/* ============================================================ Terra, site styles Palette: deep teal / mint / coral on warm paper + dark ink ============================================================ */ :root{ /* ---- brand (flagship: blue_whale LIGHT; switchable via [data-theme]) ---- */ /* Source of truth: standalone/TerraFLUX/terraflux/tokens.py THEMES[key]["light"]. Each [data-theme] block below overrides this whole brand+neutral+semantic set, so a single attribute on recolours the entire site. */ --teal-900:#03363D; --teal-800:#08595E; --teal-700:#0B6A6F; --teal-600:#08595E; --teal-500:#0E7C86; --mint-300:#5DBFB8; --mint-100:#D3ECE9; --ochre-700:#7A4410; --ochre:#9A5A16; --ochre-300:#9A5A16; --ochre-50:#F6ECDD; /* legacy coral aliases → ochre (so any stray var() stays on-brand) */ --coral:var(--ochre-700); --coral-400:var(--ochre); --coral-100:var(--ochre-50); /* ---- neutral ramp (from the palette's neutral keys) ---- */ --n-0:#FFFFFF; --n-25:#E7F1EF; --n-50:#EAF3F1; --n-100:#C8DDDB; --n-200:#A8C4C2; --n-300:#aab6b9; --n-400:#7d8b8e; --n-500:#5A7275; --n-700:#1E4448; --n-900:#0C2427; /* ---- semantic ---- */ --ink:#0C2427; --ink-2:#1E4448; --muted:#5A7275; --paper:#F4F9F8; --paper-2:#E7F1EF; --line:#C8DDDB; --white:#FFFFFF; --on-teal:#D3ECE9; --on-teal-dim:#5DBFB8; --on-accent:#FFFFFF; --chip:#DDEAE8; --brand-rgb:11, 106, 111; --nav-bg:rgba(244, 249, 248, .86); /* ---- radius ---- */ --radius:14px; --radius-sm:10px; --radius-pill:999px; --btn-radius:10px; --maxw:1180px; --gut:clamp(20px,5vw,40px); /* ---- elevation (low, crisp ladder) ---- */ --shadow-sm:0 1px 2px rgba(14,26,34,.05); --shadow:0 2px 6px rgba(14,26,34,.06),0 8px 24px -16px rgba(14,26,34,.18); --shadow-lg:0 4px 12px rgba(14,26,34,.07),0 24px 48px -28px rgba(14,26,34,.22); --shadow-card:0 1px 2px rgba(14,26,34,.05),0 8px 24px -16px rgba(14,26,34,.14); /* ---- type ---- */ --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --display:"Space Grotesk","Inter",sans-serif; --fs-display:clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); --fs-h2:clamp(1.875rem, 1.3rem + 2.3vw, 2.75rem); --fs-h3:clamp(1.1875rem, 1.05rem + 0.55vw, 1.375rem); --fs-lead:clamp(1.125rem, 0.95rem + 0.55vw, 1.3125rem); --fs-body-lg:1.125rem; --fs-body:1rem; --fs-small:.875rem; --fs-caption:.8125rem; --fs-eyebrow:.78rem; --fs-display-num:clamp(2rem, 1.3rem + 2.8vw, 3rem); --lh-tight:1.05; --lh-head:1.12; --lh-h3:1.2; --lh-lead:1.5; --lh-body:1.6; --fw-strong:600; --measure:66ch; --measure-lead:60ch; /* ---- spacing (8pt) ---- */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --space-section:clamp(var(--s6), 9vw, var(--s7)); --space-head:clamp(var(--s4), 5vw, var(--s5)); --card-pad:clamp(24px, 2.4vw, 32px); /* ---- motion ---- */ --ease:cubic-bezier(.2,.7,.2,1); --ease-entrance:cubic-bezier(.16,.84,.34,1); --ease-exit:cubic-bezier(.4,0,.7,.2); --ease-hover:cubic-bezier(.2,.6,.2,1); --ease-spring:cubic-bezier(.34,1.32,.56,1); --dur-micro:.12s; --dur-hover:.25s; --dur-reveal:.5s; } /* ============================================================ PALETTE SWITCH (data-theme on ; LIGHT ramps only) Six selectable brand palettes mirrored from standalone/TerraFLUX/terraflux/tokens.py THEMES[key]["light"]. Each block overrides the full brand + neutral + semantic set, so switching the [data-theme] attribute recolours the whole site. ============================================================ */ :root[data-theme="royal_blue"]{ --teal-900:#1B2559; --teal-800:#26347F; --teal-700:#2E3E96; --teal-600:#26347F; --teal-500:#1663C7; --mint-300:#8E9AD8; --mint-100:#E4E7F7; --ochre-700:#8A3F07; --ochre:#B45309; --ochre-300:#B45309; --ochre-50:#FBF1E6; --n-0:#FFFFFF; --n-25:#F4F2F8; --n-50:#F3F2F9; --n-100:#DDDAE5; --n-200:#C7CADD; --n-500:#5B617A; --n-700:#33384A; --n-900:#14161F; --ink:#14161F; --ink-2:#33384A; --muted:#5B617A; --paper:#FBFBFE; --paper-2:#F4F2F8; --line:#DDDAE5; --white:#FFFFFF; --on-teal:#E4E7F7; --on-teal-dim:#8E9AD8; --on-accent:#FFFFFF; --chip:#F0EEF6; --brand-rgb:46, 62, 150; --nav-bg:rgba(251, 251, 254, .86); } :root[data-theme="blue_whale"]{ --teal-900:#03363D; --teal-800:#08595E; --teal-700:#0B6A6F; --teal-600:#08595E; --teal-500:#0E7C86; --mint-300:#5DBFB8; --mint-100:#D3ECE9; --ochre-700:#7A4410; --ochre:#9A5A16; --ochre-300:#9A5A16; --ochre-50:#F6ECDD; --n-0:#FFFFFF; --n-25:#E7F1EF; --n-50:#EAF3F1; --n-100:#C8DDDB; --n-200:#A8C4C2; --n-500:#5A7275; --n-700:#1E4448; --n-900:#0C2427; --ink:#0C2427; --ink-2:#1E4448; --muted:#5A7275; --paper:#F4F9F8; --paper-2:#E7F1EF; --line:#C8DDDB; --white:#FFFFFF; --on-teal:#D3ECE9; --on-teal-dim:#5DBFB8; --on-accent:#FFFFFF; --chip:#DDEAE8; --brand-rgb:11, 106, 111; --nav-bg:rgba(244, 249, 248, .86); } :root[data-theme="bright_sun"]{ --teal-900:#141D38; --teal-800:#AF7F0A; --teal-700:#B8860B; --teal-600:#AF7F0A; --teal-500:#0E5A9C; --mint-300:#E7C97A; --mint-100:#FBF1D2; --ochre-700:#8F3F10; --ochre:#C25A1C; --ochre-300:#C25A1C; --ochre-50:#FBEEE4; --n-0:#FFFFFF; --n-25:#F2EEE1; --n-50:#F4F0E4; --n-100:#DFD8C2; --n-200:#C7C3B4; --n-500:#63697C; --n-700:#3A4257; --n-900:#141D38; --ink:#141D38; --ink-2:#3A4257; --muted:#63697C; --paper:#FBF9F2; --paper-2:#F2EEE1; --line:#DFD8C2; --white:#FFFFFF; --on-teal:#FBF1D2; --on-teal-dim:#E7C97A; --on-accent:#141D38; --chip:#F4F0E4; --brand-rgb:184, 134, 11; --nav-bg:rgba(251, 249, 242, .86); } :root[data-theme="turquoise"]{ --teal-900:#085E3E; --teal-800:#0D724D; --teal-700:#12865B; --teal-600:#0D724D; --teal-500:#077283; --mint-300:#9FDBC5; --mint-100:#DFF6EE; --ochre-700:#814604; --ochre:#A26407; --ochre-300:#A26407; --ochre-50:#FCF4E4; --n-0:#FFFFFF; --n-25:#E7F3EF; --n-50:#EEF6F3; --n-100:#CADCD6; --n-200:#A2C3B7; --n-500:#517065; --n-700:#284D40; --n-900:#0B1F1A; --ink:#0B1F1A; --ink-2:#284D40; --muted:#517065; --paper:#F4FBF8; --paper-2:#E7F3EF; --line:#CADCD6; --white:#FFFFFF; --on-teal:#DFF6EE; --on-teal-dim:#9FDBC5; --on-accent:#FFFFFF; --chip:#D7EFE6; --brand-rgb:18, 134, 91; --nav-bg:rgba(244, 251, 248, .86); } :root[data-theme="periwinkle"]{ --teal-900:#2D2B99; --teal-800:#403DCC; --teal-700:#5250E6; --teal-600:#403DCC; --teal-500:#4B49D9; --mint-300:#B9B8FF; --mint-100:#E4E4FF; --ochre-700:#8A5210; --ochre:#A5610F; --ochre-300:#A5610F; --ochre-50:#FBF1E3; --n-0:#FFFFFF; --n-25:#F1F0FB; --n-50:#F3F2FC; --n-100:#DBDAEE; --n-200:#C7C6E6; --n-500:#67678A; --n-700:#3B3B57; --n-900:#191933; --ink:#191933; --ink-2:#3B3B57; --muted:#67678A; --paper:#FBFBFF; --paper-2:#F1F0FB; --line:#DBDAEE; --white:#FFFFFF; --on-teal:#E4E4FF; --on-teal-dim:#B9B8FF; --on-accent:#FFFFFF; --chip:#EDECFB; --brand-rgb:82, 80, 230; --nav-bg:rgba(251, 251, 255, .86); } :root[data-theme="classic_teal"]{ --teal-900:#0A3D31; --teal-800:#0C5F4A; --teal-700:#0F6E56; --teal-600:#0C5F4A; --teal-500:#17B8A6; --mint-300:#7FD8C4; --mint-100:#DFF4EC; --ochre-700:#8F6A39; --ochre:#B5894E; --ochre-300:#B5894E; --ochre-50:#F3ECE0; --n-0:#FFFFFF; --n-25:#EEF2F3; --n-50:#EEF2F3; --n-100:#E3E9EA; --n-200:#CDD6D8; --n-500:#5B6B73; --n-700:#33454B; --n-900:#0E1A22; --ink:#0E1A22; --ink-2:#33454B; --muted:#5B6B73; --paper:#F7FAF8; --paper-2:#EEF2F3; --line:#E3E9EA; --white:#FFFFFF; --on-teal:#DFF4EC; --on-teal-dim:#7FD8C4; --on-accent:#FFFFFF; --chip:#DFF4EC; --brand-rgb:15, 110, 86; --nav-bg:rgba(247, 250, 248, .86); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--font);color:var(--ink);background:var(--paper); line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-variant-numeric:lining-nums;font-optical-sizing:auto; overflow-x:hidden; } .container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--ink);text-wrap:balance} p{text-wrap:pretty} em{font-style:normal;color:var(--teal-700)} /* ---- icon system (inline SVG line icons) ---- */ .ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .ic--check{stroke-width:2;color:var(--teal-700)} .contact__direct .ic{color:var(--teal-700)} /* tabular numerals only where figures align, NOT on body (it widens the hyphen-minus) */ .tnum,.stat__num,.proof__big,.race__t,.ai__bignum,.plan__price{font-variant-numeric:tabular-nums lining-nums} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .grad{color:transparent} } /* ---------- buttons ---------- */ .btn{ --bg:var(--teal-700);--fg:var(--on-accent); display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--display);font-weight:600;font-size:.97rem; padding:.8em 1.4em;border-radius:var(--btn-radius);border:1.5px solid transparent; background:var(--bg);color:var(--fg);cursor:pointer;white-space:nowrap; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.985);transition-duration:.08s} .btn--primary{box-shadow:0 12px 26px -10px rgba(var(--brand-rgb),.55)} .btn--primary:hover{box-shadow:0 18px 34px -12px rgba(var(--brand-rgb),.6)} .btn--coral{--bg:var(--ochre-700);box-shadow:0 8px 20px -12px color-mix(in srgb,var(--ochre-700) 45%,transparent)} .btn--ghost{background:transparent;color:var(--teal-800);border-color:var(--line)} .btn--ghost:hover{border-color:var(--teal-500);background:var(--mint-100)} .btn--ghost-light{color:#fff;border-color:rgba(255,255,255,.45)} .btn--ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff} .btn--sm{padding:.6em 1.1em;font-size:.9rem} .btn--lg{padding:1.02em 1.9em;font-size:1.05rem} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid color-mix(in srgb,var(--teal-700) 12%,transparent);transition:border-color .3s,box-shadow .3s,background .3s} .nav.scrolled{border-color:var(--line);box-shadow:var(--shadow-sm)} .nav__row{display:flex;align-items:center;justify-content:space-between;height:72px} .brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--teal-800)} .brand__mark{width:30px;height:30px;flex:none} .brand__word{font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:-.02em;color:var(--ink)} .brand__word span{color:var(--teal-700)} .nav__links{display:flex;align-items:center;gap:1.9rem} .nav__links a{font-weight:500;font-size:.96rem;color:var(--ink-2);transition:color .2s} .nav__links a:hover{color:var(--teal-700)} .nav__links .btn{color:var(--teal-800)} .nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .nav__burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)} .rig{width:100%;height:auto;filter:drop-shadow(0 30px 50px color-mix(in srgb,var(--teal-900) 28%,transparent))} .rig .pulse{transform-origin:220px 320px;animation:pulse 4.5s var(--ease) infinite} .rig .chip{animation:float 5s ease-in-out infinite} .rig .ainodes circle{animation:twinkle 3s ease-in-out infinite} .rig .ainodes circle:nth-child(2){animation-delay:.6s} .rig .ainodes circle:nth-child(3){animation-delay:1.1s} .rig .ainodes circle:nth-child(4){animation-delay:1.6s} .rig .flowdown{animation:flowd 2.4s linear infinite} .rig .flowup{animation:flowu 2.4s linear infinite} @keyframes pulse{0%,100%{transform:scale(.94);opacity:.85}50%{transform:scale(1.06);opacity:1}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}} @keyframes flowd{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(110px);opacity:0}} @keyframes flowu{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(-110px);opacity:0}} /* ---------- generic section ---------- */ .section{padding:var(--space-section) 0} .section--alt{background:var(--paper-2)} main section[id],#top{scroll-margin-top:84px} .sec-head{max-width:760px;margin-bottom:var(--space-head)} .kicker{display:inline-block;font-family:var(--display);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-700);margin-bottom:.8rem} .kicker--coral{color:var(--coral)} .sec-head h2{font-size:var(--fs-h2)} .sec-lead{margin-top:1rem;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink-2);max-width:var(--measure-lead)} /* ---------- cards ---------- */ .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)} .card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:var(--card-pad);box-shadow:var(--shadow-card); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--mint-300)} .card__ic{width:44px;height:44px;display:grid;place-items:center;color:var(--teal-700);border-radius:var(--radius-sm);margin-bottom:1.1rem} .card h3{font-size:1.22rem;margin-bottom:.5rem} .card p{color:var(--ink-2);font-size:.99rem} .card--who{padding:1.9rem 1.7rem} .card--who h3{color:var(--teal-700)} /* ---------- application cases ---------- */ .cases{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)} .case{display:grid;grid-template-columns:108px 1fr;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .case:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--mint-300)} .case__viz{background:linear-gradient(155deg,var(--teal-800),var(--teal-700) 55%,var(--teal-900));display:grid;place-items:center;position:relative;overflow:hidden} .case__viz::after{content:"";position:absolute;inset:0;background:radial-gradient(72% 56% at 28% 16%,color-mix(in srgb,var(--teal-500) 45%,transparent),transparent 70%)} .case__viz svg{width:74px;height:74px;position:relative;z-index:1} .case__body{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;align-items:flex-start} .case__tag{font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-700);background:var(--mint-100);border:1px solid var(--line);padding:.3em .85em;border-radius:999px;margin-bottom:.7rem} .case__body h3{font-size:1.16rem;line-height:1.2;margin-bottom:.45rem} .case__body p{color:var(--ink-2);font-size:.95rem;margin-bottom:1rem} .case__metric{margin-top:auto;display:flex;align-items:baseline;gap:.45em;font-size:.9rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:.8rem;width:100%} .case__metric b{font-family:var(--display);font-weight:700;font-size:1.18rem;color:var(--teal-700);letter-spacing:-.01em} @media(max-width:860px){.cases{grid-template-columns:1fr}} @media(max-width:520px){.case{grid-template-columns:1fr}.case__viz{min-height:96px}} /* website figures (real plots) */ .wfigs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px);margin-top:clamp(30px,4vw,48px);align-items:start} .wfig{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(14px,1.6vw,20px);box-shadow:var(--shadow-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .wfig:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--mint-300)} .wfig img{width:100%;height:auto;border-radius:var(--radius-sm);display:block} .wfig figcaption{margin-top:.7rem;font-size:.85rem;color:var(--muted);line-height:1.5} .wfig figcaption b{color:var(--teal-700);font-weight:600} @media(max-width:760px){.wfigs{grid-template-columns:1fr}} .wfig--wide{max-width:660px;margin:clamp(30px,4vw,48px) auto 0} .arch{margin-top:clamp(34px,5vw,54px);background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,3vw,34px);box-shadow:var(--shadow)} .arch img{margin-inline:auto;width:100%;max-width:980px} /* ---------- AI section ---------- */ .ai{background:linear-gradient(180deg,var(--paper) 0%,var(--white) 100%)} .ai__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:center} .ai__copy p{color:var(--ink-2);font-size:1.08rem} .ai__bignum{margin:1.5rem 0} .ai__bignum .grad{font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;display:block} .ai__bignum small{display:block;color:var(--muted);margin-top:.4rem;font-size:.95rem} .feat{list-style:none;display:flex;flex-direction:column;gap:1rem;margin:1.6rem 0 1.9rem} .feat li{display:flex;gap:.9rem;align-items:flex-start} .feat li span{flex:none;width:42px;height:42px;display:grid;place-items:center;background:var(--grad-brand-soft);color:var(--teal-700);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal-500) 20%,transparent)} .feat li div{color:var(--ink-2);font-size:1rem} .feat strong{color:var(--ink)} .ai__viz{background:var(--teal-900);border-radius:var(--radius);padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-lg);color:#fff} .in-view .race__bar--slow{width:100%} .in-view .race__bar--fast{width:14%} /* ---------- proof ---------- */ .proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)} .proof{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:2rem 1.8rem;box-shadow:var(--shadow-sm)} .proof h3{font-size:1.06rem;color:var(--ink-2);font-family:var(--font);font-weight:600} .proof h3 small{color:var(--muted);font-weight:400} .proof__big{font-family:var(--display);font-weight:700;font-size:var(--fs-display-num);letter-spacing:-.02em; color:var(--teal-700);font-variant-numeric:tabular-nums lining-nums;margin:.5rem 0 .6rem} .proof p:last-child{color:var(--ink-2);font-size:.96rem} .proof__fig{margin-top:clamp(30px,4vw,48px);text-align:center} .proof__fig img{margin-inline:auto;width:100%;max-width:620px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);padding:14px} .proof__fig figcaption{margin-top:.9rem;color:var(--muted);font-size:.92rem} /* ---------- about ---------- */ .about__grid{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,4vw,52px);align-items:center} .about__photo{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;justify-self:center; background:linear-gradient(140deg,var(--teal-700),var(--teal-800));color:#fff;font-family:var(--display);font-weight:700;font-size:3.1rem; box-shadow:var(--shadow);border:5px solid #fff} .about__copy p{color:var(--ink-2);font-size:1.08rem;margin-bottom:.9rem} .about__copy strong{color:var(--ink)} .about__aff{font-size:.92rem!important;color:var(--muted)!important;font-weight:500} .cred{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:1.3rem 0 0;padding:0} .cred li{font-family:var(--display);font-weight:600;font-size:.78rem;letter-spacing:.01em;color:var(--teal-700); background:var(--grad-brand-soft);border:1px solid color-mix(in srgb,var(--teal-500) 22%,transparent);border-radius:var(--radius-pill);padding:.42em .95em} .about__links{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:1.15rem} .about__links a{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--teal-700); border-bottom:1px solid rgba(var(--brand-rgb),.32);padding-bottom:1px;transition:color .2s var(--ease-hover)} .about__links a:hover{color:var(--teal-800)} /* ════════════════ ANIMATED LOGO INTRO ════════════════ */ #intro{display:grid;place-items:center; background:radial-gradient(120% 120% at 50% 38%,var(--white),var(--paper-2))!important; opacity:1;transition:opacity .6s var(--ease-exit)} #intro.intro--done{opacity:0;pointer-events:none} @keyframes imDraw{to{stroke-dashoffset:0}} @keyframes imPop{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}} @keyframes imWord{to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){#intro{display:none!important}} body.embed #intro{display:none!important} /* ---------- CTA ---------- */ .cta{padding:clamp(40px,6vw,80px) 0} .cta__box{background:linear-gradient(135deg,color-mix(in srgb,var(--teal-800) 55%,var(--teal-900)),var(--teal-900));border-radius:28px;text-align:center;color:#fff; padding:clamp(44px,7vw,80px) clamp(24px,5vw,60px);box-shadow:var(--shadow-lg);position:relative;overflow:hidden} .cta__box::after{content:"";position:absolute;inset:auto -10% -60% auto;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--ochre) 26%,transparent),transparent 65%)} .cta__box>*{position:relative;z-index:1} .cta__box h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:18ch;margin-inline:auto} .cta__box p{color:var(--on-teal);margin:1rem auto 1.8rem;max-width:46ch} .cta__btns{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center} .cta__fine{font-size:.86rem!important;color:var(--on-teal-dim)!important;margin-top:1.4rem!important} /* ---------- footer ---------- */ .footer{background:#080f0c;color:#c8d4ce;padding:clamp(40px,5vw,60px) 0 28px} .footer__row{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)} .footer__brand .brand__word{color:#fff}.footer__brand .brand__word span{color:var(--mint-300)} .footer__brand p{margin-top:.6rem;color:#8fa79d;font-size:.92rem;max-width:30ch} .footer__links{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center} .footer__links a{color:#c8d4ce;font-size:.94rem;transition:color .2s} .footer__links a:hover{color:var(--mint-300)} .footer__legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:22px;color:#7e948a;font-size:.86rem} /* ---------- reveal animation ---------- */ html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} html.js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .rig *{animation:none!important} } /* ---------- responsive ---------- */ @media (max-width:920px){ .hero__grid{grid-template-columns:1fr;text-align:center} .hero__sub{max-width:46ch;margin-inline:auto} .hero__cta,.hero__meta{justify-content:center;align-items:center} .hero__art{max-width:380px;margin-top:1rem;order:-1} .ai__grid,.about__grid{grid-template-columns:1fr;text-align:center} .feat li{text-align:left} .about__grid{justify-items:center} } @media (max-width:900px){ .nav__links{position:fixed;inset:72px 0 auto 0;flex-direction:column;gap:0;background:var(--paper); border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:8px 0; clip-path:inset(0 0 100% 0);transition:clip-path .35s var(--ease)} .nav__links.open{clip-path:inset(0 0 0 0)} .nav__links a{width:100%;padding:14px var(--gut)} .nav__links .btn{margin:8px var(--gut);width:calc(100% - 2*var(--gut))} .nav__burger{display:flex} .nav__burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__burger.x span:nth-child(2){opacity:0} .nav__burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .stats__grid{grid-template-columns:repeat(2,1fr);gap:28px 18px} .stats__grid .stat{border-left:0;padding-left:0} .cards3,.pillars,.proof__grid{grid-template-columns:1fr} .demo__frame iframe{height:600px} .footer__row{flex-direction:column;gap:18px} } @media (max-width:480px){ .hero__art{max-width:min(330px,84vw)} .rig{filter:drop-shadow(0 14px 24px color-mix(in srgb,var(--teal-900) 25%,transparent))} .hero__glow{inset:-18% 0 auto auto;width:92vw} .hero h1{font-size:clamp(2rem,8.4vw,2.55rem)} .eyebrow{font-size:.74rem;letter-spacing:.05em} .stats__grid{grid-template-columns:1fr;gap:18px} .stat{text-align:center} } /* ---------- focus visibility (a11y) ---------- */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{ outline:2px solid var(--teal-600);outline-offset:3px;border-radius:6px} /* ---------- FAQ ---------- */ .faq__list{max-width:840px;display:flex;flex-direction:column;gap:12px} .faq__item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .3s var(--ease),border-color .3s} .faq__item[open]{box-shadow:var(--shadow);border-color:var(--mint-300)} .faq__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.15rem 1.4rem;font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--ink)} .faq__item summary::-webkit-details-marker{display:none} .faq__item[open] summary{color:var(--teal-700)} .faq__chev{flex:none;width:10px;height:10px;border-right:2px solid var(--teal-500);border-bottom:2px solid var(--teal-500); transform:rotate(45deg);transition:transform .3s var(--ease)} .faq__item[open] .faq__chev{transform:rotate(-135deg)} .faq__item p{padding:0 1.4rem 1.25rem;color:var(--ink-2);font-size:1rem;max-width:66ch} @keyframes faqReveal{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} .faq__item[open] p{animation:faqReveal .34s var(--ease-entrance,ease) both} /* ---------- contact ---------- */ .contact__grid{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(28px,5vw,64px);align-items:start} .contact__intro p{color:var(--ink-2);font-size:1.1rem;margin-top:.85rem} .contact__direct{list-style:none;margin-top:1.6rem;display:flex;flex-direction:column;gap:.7rem} .contact__direct li{display:flex;align-items:center;gap:.6rem;color:var(--ink-2)} .contact__direct a{color:var(--teal-700);font-weight:600;border-bottom:1px solid rgba(var(--brand-rgb),.3)} .contact__form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow)} .field{margin-bottom:1.05rem;display:flex;flex-direction:column;gap:.4rem} .field label{font-size:.9rem;font-weight:600;color:var(--ink-2)} .field label .opt{font-weight:400;color:var(--muted)} .field input,.field textarea{font-family:var(--font);font-size:1rem;color:var(--ink);background:var(--paper); border:1.5px solid var(--line);border-radius:10px;padding:.78em .95em;transition:border-color .2s,box-shadow .2s;resize:vertical;width:100%} .field input:focus,.field textarea:focus{outline:none;border-color:var(--teal-600);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.18)} .contact__form .btn{width:100%;margin-top:.3rem} .contact__note{margin-top:.9rem;font-size:.92rem;color:var(--teal-700);min-height:1.2em;text-align:center} .contact__note.err{color:var(--coral)} @media (max-width:920px){ .contact__grid{grid-template-columns:1fr} } @media (max-width:600px){ .trust__sep{display:none} .trust__row{gap:7px 13px} } @media (max-width:880px){ .plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto} } /* ════════════════ HERO PARALLAX (JS-driven) ════════════════ */ .rig,.hero__glow{will-change:transform;transition:transform .35s var(--ease)} /* ════════════════ REVEAL STAGGER (grouped rows) ════════════════ */ .cards3 .reveal:nth-child(2),.pillars .reveal:nth-child(2),.plans .reveal:nth-child(2),.proof__grid .reveal:nth-child(2){transition-delay:.08s} .cards3 .reveal:nth-child(3),.pillars .reveal:nth-child(3),.plans .reveal:nth-child(3),.proof__grid .reveal:nth-child(3){transition-delay:.16s} /* ════════════════ MICRO-INTERACTIONS ════════════════ */ .nav__links>a:not(.btn){position:relative} .nav__links>a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px; background:var(--teal-500);border-radius:2px;transition:right .28s var(--ease)} .nav__links>a:not(.btn):hover::after{right:0} .brand__mark{transition:transform .4s var(--ease)} .brand:hover .brand__mark{transform:rotate(8deg) scale(1.06)} @media (max-width:760px){ .nav__links>a:not(.btn)::after{display:none} } @media (prefers-reduced-motion:reduce){ .scroll-progress{display:none} .rig,.hero__glow{transition:none} } .brand__word span.msub{color:inherit;font-weight:500;opacity:.6;letter-spacing:0} /* ╔══════════════════════════════════════════════════════════════╗ ║ PHASE 1, BOLDER ART DIRECTION + SCROLL-DRIVEN MOTION ║ ║ (additive layer: brighter brand, animated thermal field, ║ ║ premium micro-interactions, richer scroll motion) ║ ╚══════════════════════════════════════════════════════════════╝ */ /* ---- brighter brand accents (vivid, not replaced) ---- */ :root{ --mint-vivid:var(--teal-500); --teal-vivid:var(--teal-700); --ochre-400:var(--ochre-300); --grad-brand:linear-gradient(100deg,var(--teal-700),var(--teal-500)); --grad-brand-soft:linear-gradient(120deg,color-mix(in srgb,var(--teal-500) 10%,transparent),color-mix(in srgb,var(--ochre) 8%,transparent)); --glow-mint:0 0 0 0 transparent; } /* let the field show through the page: tint the paper a hair so layers read */ body{position:relative;background: radial-gradient(1200px 700px at 78% -8%, color-mix(in srgb,var(--teal-500) 7%,transparent), transparent 60%), radial-gradient(1000px 800px at -6% 18%, color-mix(in srgb,var(--ochre) 6%,transparent), transparent 55%), var(--paper)} @keyframes auroraDrift{ 0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)} 50%{transform:translate3d(3%,-2.5%,0) scale(1.08) rotate(2deg)} 100%{transform:translate3d(-2.5%,3%,0) scale(1.04) rotate(-2deg)} } @keyframes isoFlow{to{stroke-dashoffset:-400}} @keyframes blobA{to{transform:translate(6%,5%) scale(1.12)}} @keyframes blobB{to{transform:translate(-7%,-5%) scale(1.1)}} /* ════════════════ GRADIENT KICKERS + SECTION RHYTHM ════════════════ */ .kicker{position:relative;padding-left:0;color:var(--teal-700); display:inline-flex;align-items:center;gap:.55em;font-size:var(--fs-eyebrow);letter-spacing:.12em} .kicker::before{content:"";width:1.7em;height:2px;border-radius:2px;flex:none; background:var(--grad-brand);-webkit-background-clip:border-box;background-clip:border-box} .kicker--coral{color:var(--ochre-700)} .kicker--coral::before{background:var(--ochre-700)} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .kicker{color:var(--teal-vivid)} .kicker--coral{color:var(--coral)} } /* gradient text on the big section headings where it reads well */ .sec-head h2{color:var(--ink)} /* gradient divider on alt sections + tint */ .section--alt{position:relative;background: linear-gradient(180deg,color-mix(in srgb,var(--paper-2) 92%,var(--teal-vivid) 8%),var(--paper-2))} .section--alt::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--teal-500) 42%,transparent),transparent)} /* ════════════════ POLISHED CARDS (lift) ════════════════ */ .card,.pillar,.plan,.proof,.faq__item{position:relative; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)} .card:hover,.proof:hover{transform:translateY(-4px);border-color:var(--n-200);box-shadow:var(--shadow)} .card>*,.proof>*{position:relative;z-index:1} .card__ic{background:var(--grad-brand-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--teal-500) 22%,transparent); transition:transform .4s var(--ease)} .card:hover .card__ic{transform:scale(1.05) rotate(-3deg)} .proof:hover{transform:translateY(-8px)} /* ════════════════ PREMIUM BUTTONS (gradient + glow on hover) ════════════════ */ .btn{position:relative;overflow:hidden;isolation:isolate} .btn--primary{background:var(--teal-700);box-shadow:0 6px 16px -10px rgba(var(--brand-rgb),.4); transition:transform .25s var(--ease-hover),box-shadow .25s var(--ease-hover),background .25s} .btn--primary:hover{background:var(--teal-800);box-shadow:0 10px 24px -14px rgba(var(--brand-rgb),.5)} .btn--coral{background:var(--ochre-700)} .btn--coral:hover{background:var(--ochre);box-shadow:0 10px 24px -14px color-mix(in srgb,var(--ochre-700) 50%,transparent)} .btn--ghost{transition:transform .25s var(--ease),border-color .25s,background .25s,box-shadow .25s} .btn--ghost:hover{box-shadow:0 12px 30px -16px color-mix(in srgb,var(--teal-500) 50%,transparent)} /* ════════════════ NAV LINK UNDERLINE → gradient ════════════════ */ .nav__links>a:not(.btn)::after{height:2px;background:var(--grad-brand)} .nav.scrolled{box-shadow:0 1px 0 color-mix(in srgb,var(--teal-500) 18%,transparent),var(--shadow-sm)} /* ════════════════ SCROLL-DRIVEN MOTION ════════════════ */ /* richer reveal: fade + rise + slight scale */ html.js .reveal{transform:translateY(14px); transition:opacity var(--dur-reveal) var(--ease-entrance),transform var(--dur-reveal) var(--ease-entrance)} html.js .reveal.in{transform:none} /* finer per-item stagger inside grouped rows */ .cards3 .reveal:nth-child(1),.pillars .reveal:nth-child(1),.plans .reveal:nth-child(1),.proof__grid .reveal:nth-child(1),.cards3.cards3 .reveal:nth-child(1){transition-delay:0s} .faq__item.reveal:nth-child(2){transition-delay:.06s} .faq__item.reveal:nth-child(3){transition-delay:.12s} .faq__item.reveal:nth-child(4){transition-delay:.18s} .faq__item.reveal:nth-child(5){transition-delay:.24s} .faq__item.reveal:nth-child(6){transition-delay:.30s} .tilt-panel{transform:scale(var(--panel-scale,1)) translateY(var(--panel-y,0)); opacity:var(--panel-op,1);transition:transform .12s linear,opacity .12s linear} @media (prefers-reduced-motion:reduce){ .bg-field__aurora,.bg-field__lines path,.hero h1 .grad,.hero__blob{animation:none!important} .bg-field__aurora{opacity:.4} .reveal{opacity:1;transform:none;transition:none} .tilt-panel{transform:none!important;opacity:1!important} .faq__item[open] p{animation:none!important} } /* small-screen: calm the background a touch */ @media (max-width:600px){ .bg-field__aurora{filter:blur(38px);opacity:.45} .hero__blob{opacity:.45} } /* ╔══════════════════════════════════════════════════════════════╗ ║ PHASE 2, SCROLLYTELLING (sticky figure + stepped narrative) ║ ║ + EMBEDDED INTERACTIVE VISUALISATION SECTIONS ║ ╚══════════════════════════════════════════════════════════════╝ */ /* ---- two-column sticky layout: visual on the left, steps on the right ---- */ .scrolly__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start} .scrolly__sticky{position:sticky;top:96px;align-self:start} .scrolly__figure{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:clamp(12px,2vw,20px);overflow:hidden} .scrolly__figure::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:var(--grad-brand-soft);opacity:.5} .scrolly__svg{position:relative;z-index:1;width:100%;height:auto;display:block; border-radius:var(--radius-sm);background:linear-gradient(180deg,color-mix(in srgb,var(--teal-500) 5%,transparent),transparent 40%)} /* progress dots */ .scrolly__dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2; list-style:none;display:flex;gap:9px;padding:0;margin:0} .scrolly__dots li{width:8px;height:8px;border-radius:50%;background:rgba(95,113,103,.32); transition:background .35s var(--ease),transform .35s var(--ease)} .scrolly__dots li.on{background:var(--grad-brand);background-color:var(--teal-500);transform:scale(1.35)} /* ---- the text steps ---- */ .scrolly__steps{display:flex;flex-direction:column} .scrolly__step{min-height:62vh;display:flex;flex-direction:column;justify-content:center; padding:2rem 0;opacity:.34;filter:saturate(.7); transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease); transform:translateY(6px)} .scrolly__step:first-child{padding-top:1rem} .scrolly__step:last-child{margin-bottom:8vh} .scrolly__step.is-active{opacity:1;filter:none;transform:none} .scrolly__num{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.08em; color:var(--teal-700);margin-bottom:.5rem} .scrolly__step h3{font-size:clamp(1.35rem,2.5vw,1.85rem);margin-bottom:.7rem;position:relative;padding-left:1.1rem} .scrolly__step h3::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:3px; background:var(--grad-brand);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease)} .scrolly__step.is-active h3::before{transform:scaleY(1)} .scrolly__step p{color:var(--ink-2);font-size:1.06rem;max-width:46ch} .scrolly__step.is-active p strong{color:var(--teal-700)} /* ---- the figure's per-step state (driven by data-step on #scrollyFig) ---- */ /* default: hide all the conditional layers, show base pile */ .scrolly__svg .sc-plume, .scrolly__svg .sc-neighbours, .scrolly__svg .sc-flow, .scrolly__svg .sc-flowdir, .scrolly__svg .sc-heat, .scrolly__svg .sc-tags, .scrolly__svg .sc-surrogate{opacity:0;transition:opacity .6s var(--ease),transform .6s var(--ease)} .scrolly__svg .sc-plume{transform:scale(.2);transform-origin:center;transform-box:fill-box} .scrolly__svg .sc-npile{transform:translateY(14px)} .scrolly__svg .sc-neighbours{transform:translateY(0)} .scrolly__svg .sc-flashbar{transform:scaleX(.2);transform-origin:left center;transform-box:fill-box} /* STEP 1, heat exchange arrows in, base pile */ #scrollyFig[data-step="0"] .sc-heat{opacity:1} #scrollyFig[data-step="0"] .sc-tags{opacity:.55} /* STEP 2, fluid circulates, flow chevrons + in/out tags */ #scrollyFig[data-step="1"] .sc-flow{opacity:1} #scrollyFig[data-step="1"] .sc-flowdir{opacity:1} #scrollyFig[data-step="1"] .sc-tags{opacity:1} /* STEP 3, main plume grows (soil cools) */ #scrollyFig[data-step="2"] .sc-flow{opacity:.85} #scrollyFig[data-step="2"] .sc-tags{opacity:1} #scrollyFig[data-step="2"] .sc-plume--main{opacity:1;transform:scale(1)} /* STEP 4, field: neighbours + overlapping plumes */ #scrollyFig[data-step="3"] .sc-flow{opacity:.7} #scrollyFig[data-step="3"] .sc-tags{opacity:.85} #scrollyFig[data-step="3"] .sc-neighbours{opacity:1} #scrollyFig[data-step="3"] .sc-plume{opacity:.95;transform:scale(1)} #scrollyFig[data-step="3"] .sc-plume--main{transform:scale(.95)} /* STEP 5, surrogate speed flash */ #scrollyFig[data-step="4"] .sc-neighbours{opacity:.55} #scrollyFig[data-step="4"] .sc-plume{opacity:.4;transform:scale(1)} #scrollyFig[data-step="4"] .sc-surrogate{opacity:1} #scrollyFig[data-step="4"] .sc-flashbar{transform:scaleX(1)} /* animated flowing fluid (dash march) + arrow pulse, motion-safe only */ .scrolly__svg .sc-flow{stroke-dashoffset:0} #scrollyFig[data-step="1"] .sc-flow, #scrollyFig[data-step="2"] .sc-flow, #scrollyFig[data-step="3"] .sc-flow{animation:scFlow 1.5s linear infinite} @keyframes scFlow{to{stroke-dashoffset:-64}} #scrollyFig[data-step="0"] .sc-arrow{animation:scPulse 2.2s var(--ease) infinite} @keyframes scPulse{0%,100%{opacity:.45}50%{opacity:1}} .scrolly__svg .sc-chev{animation:none} #scrollyFig[data-step="1"] .sc-chev--down{animation:scDown 1.6s var(--ease) infinite} #scrollyFig[data-step="1"] .sc-chev--up{animation:scUp 1.6s var(--ease) infinite} @keyframes scDown{0%,100%{opacity:.4}50%{opacity:1;transform:translateY(4px)}} @keyframes scUp{0%,100%{opacity:.4}50%{opacity:1;transform:translateY(-4px)}} /* reduced-motion / no-JS fallback: show every layer in its final state, stacked statically */ @media (prefers-reduced-motion:reduce){ .scrolly__sticky{position:static} .scrolly__step{opacity:1;filter:none;transform:none;min-height:0;padding:1.1rem 0} .scrolly__step h3::before{transform:scaleY(1)} .scrolly__svg .sc-plume,.scrolly__svg .sc-neighbours,.scrolly__svg .sc-flow, .scrolly__svg .sc-flowdir,.scrolly__svg .sc-heat,.scrolly__svg .sc-tags, .scrolly__svg .sc-surrogate{opacity:1;transform:none;animation:none!important} .scrolly__svg .sc-plume{opacity:.45} .scrolly__svg .sc-flashbar{transform:none} } .scrolly.no-js .scrolly__sticky{position:static} @media (max-width:920px){ .scrolly__grid{grid-template-columns:1fr;gap:8px} .scrolly__sticky{top:80px;margin-bottom:1.5rem} .scrolly__figure{max-width:440px;margin-inline:auto} .scrolly__step{min-height:48vh;text-align:left} .scrolly__step h3{padding-left:.9rem} } @media (max-width:600px){ .scrolly__step{min-height:42vh} } /* ---- embedded interactive viz sections (#explore / #response) ---- */ /* these reuse the .demo__frame / .demo__bar chrome; give the iframes a light canvas so the parallel-built explorer/response pages read on both themes */ #explore .demo__frame,#response .demo__frame{background:var(--teal-900)} #explore .demo__frame iframe,#response .demo__frame iframe{background:#fff} /* ---- embed mode: hide page chrome when ?embed=1 (parity with asset pages) ---- */ body.embed .nav,body.embed .footer,body.embed .scroll-progress{display:none} body.embed .bg-field{opacity:.4} /* ════════════════ REFINED-PREMIUM ADDITIONS ════════════════ */ .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal-700);color:#fff; padding:.65em 1.1em;border-radius:0 0 var(--radius-sm) 0;font-family:var(--display);font-weight:600;font-size:.9rem} .skip-link:focus{left:0} .nav__links a[aria-current="true"]{color:var(--teal-700)} .nav__links a[aria-current="true"]:not(.btn)::after{right:0} .field input:hover,.field textarea:hover{border-color:var(--n-200)} .contact__form:focus-within{box-shadow:var(--shadow)} @media (max-width:600px){ :root{--space-section:clamp(48px,11vw,72px)} .card,.pillar,.plan,.proof,.contact__form{padding:1.5rem 1.35rem} .demo__bar em{font-size:.7rem} .hero__art iframe{height:clamp(320px,52vh,460px)!important} .demo__frame iframe{height:clamp(380px,64vh,560px)!important} } /* tap targets + tablet 2-col tier + mobile menu height cap */ .nav__burger{min-width:44px;min-height:44px;align-items:center;justify-content:center} .nav__links.open{max-height:calc(100dvh - 72px);overflow-y:auto} @media (min-width:601px) and (max-width:900px){ .cards3,.pillars,.proof__grid,.plans{grid-template-columns:repeat(2,1fr)} }