/* ==========================================================================
   Improntus marketing site — shared base styles
   Design tokens, reset, typography, buttons, and the shared navigation /
   footer chrome (rendered once by the Blade layout). Page-specific styles are
   pushed per view.
   ========================================================================== */

:root{
  --bg:#0B0E12;
  --bg-2:#0F1319;
  --surface:#141820;
  --surface-2:#1A1F28;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --text:#F0F2F5;
  --text-2:#D1D5DB;
  --muted:#8B92A0;
  --teal:#00D4AA;
  --teal-dim:#00A88A;
  --teal-glow:rgba(0,212,170,.15);
  --teal-glow-2:rgba(0,212,170,.08);
  --warm:#FFB86C;
  --warm-dim:#CC9356;
  --rose:#FB7185;
  --blue:#60A5FA;
  --purple:#C084FC;
  --purple-dim:#A855F7;
  --purple-glow:rgba(192,132,252,.12);
  --emerald:#34D399;
  --radius:16px;
  --max:1180px;
  color-scheme:dark;
}

/* Light theme — activated via <html data-theme="light"> */
:root[data-theme="light"]{
  --bg:#FFFFFF;
  --bg-2:#F4F6F8;
  --surface:#FFFFFF;
  --surface-2:#EEF1F4;
  --line:rgba(11,14,18,.10);
  --line-2:rgba(11,14,18,.16);
  --text:#0B0E12;
  --text-2:#39414D;
  --muted:#5B6472;
  --teal:#00A88A;
  --teal-dim:#00806A;
  --teal-glow:rgba(0,168,138,.14);
  --teal-glow-2:rgba(0,168,138,.06);
  --warm:#B4711F;
  --warm-dim:#8A5616;
  --rose:#E11D48;
  --blue:#2563EB;
  --purple:#9333EA;
  --purple-dim:#7E22CE;
  --purple-glow:rgba(147,51,234,.12);
  --emerald:#059669;
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:'Space Grotesk',sans-serif;letter-spacing:-.025em;line-height:1.12}
h3{font-size:1.15rem;font-weight:600;line-height:1.35}
p{color:var(--muted)}
img{max-width:100%;display:block}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;font-weight:600;font-size:.9rem;transition:all .22s;cursor:pointer;border:none}
.btn-p{background:var(--teal);color:#0B0E12}
.btn-p:hover{background:#00E8BA;transform:translateY(-1px);box-shadow:0 8px 30px -8px rgba(0,212,170,.5)}
.btn-g{border:1px solid var(--line-2);color:var(--text-2);background:transparent}
.btn-g:hover{border-color:var(--teal);color:var(--teal)}
.btn svg{width:15px;height:15px}

section{padding:100px 0}

/* ── Navigation (shared layout) ── */
header{position:sticky;top:0;z-index:100;backdrop-filter:blur(20px);background:rgba(11,14,18,.78);border-bottom:1px solid var(--line)}
.nav,.nav-bar{display:flex;align-items:center;justify-content:space-between;height:68px}
#form{scroll-margin-top:88px}
.logo{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:700;font-size:1.2rem}
.logo-mark{width:30px;height:30px;flex-shrink:0}
.logo-img{height:26px;width:auto;display:block}
.logo .logo-light{display:none}
:root[data-theme="light"] .logo .logo-dark{display:none}
:root[data-theme="light"] .logo .logo-light{display:block}

/* Client logo wall / proof-bar images (white monochrome assets) */
.proof-logos img,.lw-logos img{height:26px;width:auto;object-fit:contain;opacity:.82}
:root[data-theme="light"] .proof-logos img,
:root[data-theme="light"] .lw-logos img{filter:brightness(0);opacity:.55}
nav ul{display:flex;gap:28px;list-style:none;font-size:.88rem;color:var(--muted)}
nav ul a:hover{color:var(--text)}
.nav-r{display:flex;gap:12px;align-items:center}
.nav-mobile-cta{display:none}
.nav-toggle{display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--text-2);cursor:pointer;transition:all .2s;flex-shrink:0;padding:0}
.nav-toggle:hover{border-color:var(--teal);color:var(--teal)}
.nav-toggle svg{width:18px;height:18px}
.nav-toggle .icon-close{display:none}
header.nav-open .nav-toggle .icon-menu{display:none}
header.nav-open .nav-toggle .icon-close{display:block}
.lang-sw{font-size:.78rem;color:var(--muted);padding:5px 10px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.lang-sw a{color:var(--muted);text-decoration:none;transition:color .15s}
.lang-sw a:hover{color:var(--teal)}
.lang-sw .lang-active{color:var(--text);font-weight:600}

/* ── Footer (shared layout) ── */
footer{border-top:1px solid var(--line);padding:64px 0 36px;background:#090B0F}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px}
footer h5{font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:16px;font-weight:600}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.86rem;color:var(--text-2)}
footer ul a:hover{color:var(--teal)}
.foot-about{font-size:.86rem;color:var(--muted);margin-top:14px;max-width:280px;line-height:1.55}
.foot-social{display:flex;align-items:center;gap:14px;margin-top:16px}
.foot-social a{display:inline-flex;color:var(--text);transition:color .2s}
.foot-social a:hover{color:var(--teal)}
.foot-social svg{width:18px;height:18px;display:block}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--line);font-size:.76rem;color:var(--muted);flex-wrap:wrap;gap:12px}

/* ── Theme toggle ── */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--text-2);cursor:pointer;transition:all .2s;flex-shrink:0}
.theme-toggle:hover{border-color:var(--teal);color:var(--teal)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .icon-moon{display:none}
.theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* Light-mode chrome overrides (values hard-coded in the mockups) */
:root[data-theme="light"] header{background:rgba(255,255,255,.82)}
:root[data-theme="light"] footer{background:#F4F6F8}

/* Six primary links plus the call to action are tight just above the mobile breakpoint, most of
   all in Spanish; closing the gaps keeps the bar on one line until the menu takes over. */
@media(max-width:1140px){
  nav ul{gap:18px}
  .nav-r{gap:8px}
}

@media(max-width:960px){
  .nav-toggle{display:inline-flex}
  .nav-desktop-cta{display:none}
  header{position:sticky}
  header nav{
    display:none;
    position:absolute;
    top:68px;
    left:0;
    right:0;
    background:rgba(11,14,18,.96);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:16px 24px 24px;
  }
  :root[data-theme="light"] header nav{background:rgba(255,255,255,.96)}
  header.nav-open nav{display:block}
  header nav ul{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  header nav ul a{
    display:block;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    color:var(--text-2);
    font-size:1rem;
    font-weight:500;
  }
  header nav ul a:hover{color:var(--teal)}
  header nav ul li:last-child a{border-bottom:none}
  .nav-mobile-cta{display:inline-flex;margin-top:20px;width:100%;justify-content:center}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* Per-link visibility for header and footer menu links, set per link through the MCP menu tools.
   960px is where the header already collapses into the hamburger, so "tablet" and "mobile" links
   are the ones inside that menu; 640px splits phones from tablets. */
@media(min-width:961px){
  .mi-hide-desktop{display:none}
}
@media(min-width:641px) and (max-width:960px){
  .mi-hide-tablet{display:none}
}
@media(max-width:640px){
  .mi-hide-mobile{display:none}
}

/* The nav entry for the page being viewed. Styled on aria-current, the attribute assistive tech
   already reads, so what sighted users see and what screen readers announce cannot disagree. Same
   treatment as the active language (.lang-active) plus a teal bar; in the stacked mobile menu the
   bar would sit oddly under a full-width row, so the colour carries it instead. */
nav ul a[aria-current]{color:var(--text);font-weight:600;position:relative}
nav ul a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--teal)}
@media(max-width:960px){
  nav ul a[aria-current]{color:var(--teal)}
  nav ul a[aria-current]::after{display:none}
}

/* ── Prose: long-form text (blog articles, legal pages) ── */
.prose{font-size:1.06rem;line-height:1.78;color:var(--text-2);overflow-wrap:break-word}
.prose>*+*{margin-top:1.2em}
.prose p{color:var(--text-2)}
.prose h2{font-size:1.75rem;font-weight:700;color:var(--text);margin-top:2.1em}
.prose h3{font-size:1.3rem;font-weight:600;color:var(--text);margin-top:1.8em}
.prose h4{font-size:1.08rem;font-weight:600;color:var(--text);margin-top:1.6em}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:.7em}
.prose a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--text)}
.prose strong{color:var(--text);font-weight:600}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--teal)}
.prose li>ul,.prose li>ol{margin-top:.45em}
.prose blockquote{border-left:3px solid var(--teal);padding:6px 0 6px 22px;font-family:'Space Grotesk',sans-serif;font-size:1.2rem;line-height:1.55;color:var(--text)}
.prose blockquote p{color:inherit}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:.12em .4em;color:var(--text)}
.prose pre{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:18px 20px;overflow-x:auto;line-height:1.6}
.prose pre code{background:none;border:0;padding:0;font-size:.88rem;color:var(--text-2)}
.prose img{border-radius:12px;border:1px solid var(--line);margin:0 auto;height:auto}
.prose hr{border:0;height:1px;background:var(--line-2);margin:2.6em 0}
.prose .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.prose table{width:100%;border-collapse:collapse;font-size:.94rem}
.prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--text);background:var(--surface-2)}
.prose tr:last-child td{border-bottom:0}
@media(max-width:640px){ .prose{font-size:1rem} }

/* ── Legal pages (privacy policies): one long .prose column ── */
section.legal{padding:72px 0 100px}
.legal .prose{max-width:780px;margin:0 auto}
.legal .prose h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,4.4vw,2.9rem);line-height:1.15;font-weight:700;color:var(--text);margin-bottom:.4em}
@media(max-width:640px){ section.legal{padding:48px 0 72px} }