/* ==========================================================================
FONTS — self-hosted
Sora (headings + body) and IBM Plex Mono (eyebrows, numbers, labels) are
served from this domain rather than Google's CDN. A font request to a third
party leaks every visitor's IP address and user agent to that third party on
every page load, which is a poor look for a firm selling data protection —
and the Cookie Policy invites readers to open the Network tab and check.
Sora is a variable font: one file covers weights 300-600.
========================================================================== */
@font-face{
font-family:'Sora';
font-style:normal;
font-weight:300 600;
font-display:swap;
src:url('../fonts/sora-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'Sora';
font-style:normal;
font-weight:300 600;
font-display:swap;
src:url('../fonts/sora-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'IBM Plex Mono';
font-style:normal; font-weight:400; font-display:swap;
src:url('../fonts/plexmono-400-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'IBM Plex Mono';
font-style:normal; font-weight:400; font-display:swap;
src:url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family:'IBM Plex Mono';
font-style:normal; font-weight:500; font-display:swap;
src:url('../fonts/plexmono-500-latin.woff2') format('woff2');
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:'IBM Plex Mono';
font-style:normal; font-weight:500; font-display:swap;
src:url('../fonts/plexmono-500-latin-ext.woff2') format('woff2');
unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==========================================================================
AVISHA GLOBAL — Design System
AI. Security. Digital Trust.
White and navy. White carries the reading surface; navy carries the brand —
the nav, the hero, the Managed AI band, the closing panel and the footer.
Three discipline accents sit on top of that, all cool, all the same chroma,
with hue the only variable: indigo-violet for AI, azure for Security, teal
for Digital Trust. Each one has a deep value for white surfaces and a bright
value for navy, so a discipline keeps its identity on either background.
Amber and red survive only as risk bands in the readiness calculator, where
the colour carries meaning rather than decoration.
The older token names (--ink-*, --paper-*, --accent-*) are kept as the
public interface so the component layer below did not have to be renamed
line by line; their values are the redesign's.
========================================================================== */
:root{
/* ---- Navy: the brand surface ---- */
--navy-950:#0a1628;
--navy-900:#0b1b35;
--navy-800:#0d2142;
--navy-700:#11284f;
--navy-600:#16325f;
--navy-500:#1e4079;
/* ---- White: the reading surface ---- */
--white:#ffffff;
--paper-000:#ffffff;
--paper-050:#f5f7fa;
--paper-100:#eaeef5;
--paper-200:#dbe1ec;
--slate-600:#3d4a63;
--slate-700:#27324a;
--slate-800:#141e33;
/* ---- Discipline accents — deep values, for white surfaces ---- */
--acc-ai:oklch(0.50 0.18 288); /* indigo-violet — AI, 6.45:1 on white */
--acc-sec:oklch(0.46 0.16 258); /* azure — Security, 7.31:1 */
--acc-trust:oklch(0.46 0.16 192); /* teal — Digital Trust, 5.92:1 */
/* ---- The same hues, bright, for navy surfaces ---- */
--acc-ai-lite:oklch(0.78 0.13 288); /* 8.21:1 on navy-900 */
--acc-sec-lite:oklch(0.78 0.13 258); /* 8.45:1 */
--acc-trust-lite:oklch(0.80 0.13 192); /* 9.71:1 */
/* ---- Hairlines ---- */
--hair:rgba(11,27,53,0.10);
--hair-mid:rgba(11,27,53,0.14);
--hair-strong:rgba(11,27,53,0.20);
--hair-on-navy:rgba(255,255,255,0.08);
--hair-on-navy-mid:rgba(255,255,255,0.14);
--hair-on-navy-strong:rgba(255,255,255,0.22);
--line-dark:rgba(255,255,255,0.08);
--line-dark-strong:rgba(255,255,255,0.16);
--btn-hairline:rgba(255,255,255,0.22);
/* ---- Dark-surface aliases used by the component layer ---- */
--bg:#ffffff;
--bg-alt:#f5f7fa;
--surface:#ffffff;
--surface-hover:#f5f7fa;
--ink-950:#0a1628;
--ink-900:#0b1b35;
--ink-850:#0d2142;
--ink-800:#11284f;
--ink-700:#16325f;
--ink-600:#1e4079;
--ink-500:#2a4e8c;
/* ---- Accent aliases used by the component layer ---- */
--accent-500:var(--acc-sec); /* deep — light surfaces */
--accent-400:var(--acc-sec-lite); /* bright — navy surfaces */
--accent-300:oklch(0.84 0.09 258);
--accent-600:var(--acc-sec); /* on white */
--accent-glow:oklch(0.50 0.16 258 / 0.45);
--cyan-400:var(--acc-trust-lite);
--cyan-500:var(--acc-trust);
--violet-400:var(--acc-ai-lite);
--violet-500:var(--acc-ai);
--coral-400:var(--acc-sec-lite);
--coral-600:var(--acc-sec);
--trust-600:var(--acc-trust);
--success-500:var(--acc-trust); /* deep — light surfaces, 5.92:1 */
--success-600:var(--acc-trust);
--success-lite:var(--acc-trust-lite); /* bright — navy surfaces */
--amber-400:oklch(0.60 0.14 70); /* risk band only */
--danger-400:oklch(0.55 0.19 25); /* risk band only */
/* ---- Text ---- */
--text-on-light:#0b1b35; /* 17.18:1 on white */
--text-on-light-dim:#3d4a63; /* 8.91:1 */
--text-on-light-faint:#64708a; /* 4.97:1 */
--text-on-dark:#ffffff;
--text-on-dark-dim:#c3cde0; /* 10.74:1 on navy-900 */
--text-on-dark-body:#c3cde0;
--text-on-dark-muted:#9aa8c4; /* 7.18:1 */
--text-on-dark-faint:#8694b2; /* 5.64:1 */
/* ---- Type ---- */
--font-sans:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--fs-display: clamp(46px, 7.2vw, 108px);
--fs-h1: clamp(38px, 5.2vw, 72px);
--fs-h2: clamp(34px, 4.4vw, 60px);
--fs-h3: clamp(21px, 1.2vw + 16px, 26px);
--fs-h4: 18px;
--fs-body-lg: 18px;
--fs-body: 16px;
--fs-small: 14.5px;
--fs-caption: 13px;
--fs-mono: 12px;
/* ---- Layout ---- */
--container: 1320px;
--container-wide: 1440px;
--gutter: 28px;
--radius-sm: 12px;
--radius-md: 18px;
--radius-lg: 22px;
--radius-xl: 24px;
--radius-panel: 32px;
--shadow-soft: 0 18px 50px -24px rgba(11,27,53,0.18);
--shadow-strong: 0 30px 80px -30px rgba(11,27,53,0.28);
--ease: cubic-bezier(.2,.7,.2,1);
}
/* oklch is widely supported; these hex equivalents cover the rest. */
@supports not (color: oklch(0.5 0.1 200)){
:root{
--acc-ai:#6349c1; --acc-sec:#0d53af; --acc-trust:#00706f;
--acc-ai-lite:#b3a9ff; --acc-sec-lite:#82b9ff; --acc-trust-lite:#2dd8d3;
--accent-300:#b9d2fb;
--accent-glow:rgba(13,83,175,0.45);
--amber-400:#9a6a10; --danger-400:#bf2f2a;
}
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:auto; }
body{
margin:0;
font-family:var(--font-sans);
background:var(--white);
color:var(--text-on-light);
font-size:var(--fs-body);
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--navy-900); color:var(--white); }
/* Base size for inline icons in running text; component rules override this. */
main p svg, main span svg, main li svg, main dd svg, main dt svg, main a:not(.btn) svg, main label svg, main small svg{ width:1.05em; height:1.05em; flex:none; vertical-align:-0.15em; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.container-wide{ max-width:var(--container-wide); margin:0 auto; padding:0 var(--gutter); }
section{ position:relative; }
:focus-visible{ outline:2px solid var(--acc-sec); outline-offset:3px; border-radius:4px; }
.surface-dark :focus-visible, .surface-darker :focus-visible{ outline-color:var(--acc-trust-lite); }
/* ---- Section surfaces ---- */
.surface-dark{ background:var(--navy-900); color:var(--text-on-dark); }
.surface-darker{ background:var(--navy-950); color:var(--text-on-dark); }
.surface-light{ background:var(--white); color:var(--text-on-light); }
.surface-tint{ background:var(--paper-050); color:var(--text-on-light); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.surface-dark .eyebrow, .surface-darker .eyebrow{ color:var(--acc-trust-lite); }
.surface-dark h2, .surface-darker h2{ color:var(--text-on-dark); }
.surface-dark p, .surface-darker p{ color:var(--text-on-dark-body); }
/* ==========================================================================
Typography helpers
========================================================================== */
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--font-mono); font-size:var(--fs-mono); font-weight:400;
letter-spacing:0.1em; text-transform:uppercase;
color:var(--acc-sec);
}
.eyebrow.ai{ color:var(--acc-ai); }
.eyebrow.sec{ color:var(--acc-sec); }
.eyebrow.trust{ color:var(--acc-trust); }
.surface-dark .eyebrow.ai, .surface-darker .eyebrow.ai{ color:var(--acc-ai-lite); }
.surface-dark .eyebrow.sec, .surface-darker .eyebrow.sec{ color:var(--acc-sec-lite); }
.surface-dark .eyebrow.trust, .surface-darker .eyebrow.trust{ color:var(--acc-trust-lite); }
.display{ font-size:var(--fs-display); font-weight:500; line-height:0.98; letter-spacing:-0.045em; text-wrap:balance; }
h1,.h1{ font-size:var(--fs-h1); font-weight:500; line-height:1.02; letter-spacing:-0.04em; text-wrap:balance; }
h2,.h2{ font-size:var(--fs-h2); font-weight:500; line-height:1.04; letter-spacing:-0.035em; text-wrap:balance; }
h3,.h3{ font-size:var(--fs-h3); font-weight:500; line-height:1.18; letter-spacing:-0.02em; }
h4,.h4{ font-size:var(--fs-h4); font-weight:500; line-height:1.35; letter-spacing:-0.01em; }
.lede{ font-size:var(--fs-body-lg); font-weight:300; color:var(--text-on-light-dim); line-height:1.6; text-wrap:pretty; }
.surface-dark .lede,.surface-darker .lede{ color:var(--text-on-dark-body); }
.small{ font-size:var(--fs-small); }
.caption{ font-size:var(--fs-caption); color:var(--text-on-light-faint); }
.surface-dark .caption,.surface-darker .caption{ color:var(--text-on-dark-faint); }
.mono{ font-family:var(--font-mono); font-size:var(--fs-mono); letter-spacing:0.1em; text-transform:uppercase; }
.gradient-text{
background:linear-gradient(100deg,var(--acc-ai),var(--acc-sec) 50%,var(--acc-trust));
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.surface-dark .gradient-text, .surface-darker .gradient-text{
background:linear-gradient(100deg,var(--acc-ai-lite),var(--acc-sec-lite) 50%,var(--acc-trust-lite));
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-head{ max-width:820px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:20px; }
.section-head h2{ margin-bottom:24px; }
.section-pad{ padding:130px 0; }
.section-pad-sm{ padding:88px 0; }
@media (max-width:900px){
.section-pad{ padding:88px 0; }
.section-pad-sm{ padding:60px 0; }
}
@media (max-width:600px){
:root{ --gutter:20px; }
.section-pad{ padding:68px 0; }
}
/* ==========================================================================
Buttons
The primary action is navy on white — the highest-contrast pair in the
system (17.2:1) and the one element that should never compete with an
accent. On navy surfaces it inverts to white on navy.
========================================================================== */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:16px 26px; border-radius:999px; font-weight:500; font-size:15px;
border:1px solid transparent; cursor:pointer; white-space:nowrap;
transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ background:var(--navy-900); color:var(--white); }
.btn-primary:hover{ background:var(--acc-trust); color:var(--white); transform:translateY(-2px); }
.surface-dark .btn-primary, .surface-darker .btn-primary{ background:var(--white); color:var(--navy-900); }
.surface-dark .btn-primary:hover, .surface-darker .btn-primary:hover{ background:var(--acc-trust-lite); color:var(--navy-900); }
.btn-ghost-dark{ background:rgba(255,255,255,0.04); color:var(--text-on-dark); border-color:var(--btn-hairline); }
.btn-ghost-dark:hover{ border-color:var(--white); transform:translateY(-2px); }
.btn-ghost-light{ background:var(--white); color:var(--text-on-light); border-color:var(--paper-200); }
.btn-ghost-light:hover{ transform:translateY(-2px); border-color:var(--navy-900); }
.btn-outline{ background:transparent; color:var(--text-on-light); border-color:var(--paper-200); }
.btn-outline:hover{ border-color:var(--navy-900); color:var(--navy-900); }
.surface-dark .btn-outline, .surface-darker .btn-outline{ color:var(--text-on-dark); border-color:var(--btn-hairline); }
.surface-dark .btn-outline:hover, .surface-darker .btn-outline:hover{ border-color:var(--white); color:var(--white); }
.btn-sm{ padding:10px 18px; font-size:14px; }
.btn-block{ width:100%; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
/* Long CTA labels wrap on a phone rather than pushing the page sideways. */
@media (max-width:600px){
.btn{ white-space:normal; text-align:center; max-width:100%; }
}
/* ==========================================================================
Navy islands
The sub-page hero, the closing panel and the homepage hero are navy blocks
sitting inside otherwise light pages, so they are not .surface-dark and would
otherwise inherit the light-surface text colours — body copy at 1.9:1 on
navy. They take the dark-surface treatment here instead.
========================================================================== */
.page-hero, .cta-band, .hx-hero{ color:var(--text-on-dark); }
.page-hero p, .cta-band p, .hx-hero p{ color:var(--text-on-dark-body); }
.page-hero .lede, .cta-band .lede, .hx-hero .lede{ color:var(--text-on-dark-body); }
.page-hero .caption, .cta-band .caption, .hx-hero .caption{ color:var(--text-on-dark-faint); }
.page-hero .eyebrow, .cta-band .eyebrow, .hx-hero .eyebrow{ color:var(--acc-trust-lite); }
.page-hero .eyebrow.ai, .cta-band .eyebrow.ai, .hx-hero .eyebrow.ai{ color:var(--acc-ai-lite); }
.page-hero .eyebrow.sec, .cta-band .eyebrow.sec, .hx-hero .eyebrow.sec{ color:var(--acc-sec-lite); }
.page-hero .eyebrow.trust, .cta-band .eyebrow.trust, .hx-hero .eyebrow.trust{ color:var(--acc-trust-lite); }
.page-hero .gradient-text, .cta-band .gradient-text, .hx-hero .gradient-text{
background:linear-gradient(100deg,var(--acc-ai-lite),var(--acc-sec-lite) 50%,var(--acc-trust-lite));
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-hero .btn-primary, .cta-band .btn-primary, .hx-hero .btn-primary{ background:var(--white); color:var(--navy-900); }
.page-hero .btn-primary:hover, .cta-band .btn-primary:hover, .hx-hero .btn-primary:hover{ background:var(--acc-trust-lite); color:var(--navy-900); }
.page-hero .btn-outline, .cta-band .btn-outline, .hx-hero .btn-outline{ color:var(--text-on-dark); border-color:var(--btn-hairline); }
.page-hero .btn-outline:hover, .cta-band .btn-outline:hover, .hx-hero .btn-outline:hover{ border-color:var(--white); color:var(--white); }
.page-hero :focus-visible, .cta-band :focus-visible, .hx-hero :focus-visible{ outline-color:var(--acc-trust-lite); }
/* ==========================================================================
Header / Nav
========================================================================== */
.site-header{
position:sticky; top:0; z-index:900;
background:rgba(11,27,53,0.9);
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
border-bottom:1px solid var(--line-dark);
}
.nav-wrap{
max-width:var(--container-wide); margin:0 auto; padding:0 24px;
display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px;
}
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand-mark{ width:30px; height:30px; flex:none; display:flex; }
/* The ring and diamond come from logoMark() in build/icons.js — the same
geometry the favicon and touch icon are generated from, so the mark in the
bar and the mark in the browser tab cannot drift apart. */
.brand-mark svg{ width:30px; height:30px; color:var(--white); overflow:visible; }
.mark-gem{ fill:var(--acc-trust-lite); }
.brand-name{ color:var(--white); font-weight:600; font-size:16px; letter-spacing:-0.01em; line-height:1.1; }
.brand-name small{
display:block; font-family:var(--font-mono); font-weight:400; font-size:10px;
letter-spacing:0.06em; color:var(--text-on-dark-muted); text-transform:uppercase; margin-top:3px;
}
.main-nav{ display:flex; align-items:center; gap:2px; flex:1; justify-content:center; }
.main-nav > li{ position:relative; }
.nav-link{
display:flex; align-items:center; gap:6px; padding:10px 15px; border-radius:8px;
color:var(--text-on-dark-dim); font-size:14px; font-weight:400; transition:color .2s, background .2s;
}
.nav-link svg{ width:13px;height:13px; opacity:0.7; transition:transform .2s var(--ease); }
.main-nav > li:hover .nav-link, .nav-link:focus-visible{ color:var(--white); background:rgba(255,255,255,0.06); }
/* The bar is navy on every page, so its primary pill inverts to white-on-navy. */
.site-header .btn-primary, .mobile-drawer .btn-primary{ background:var(--white); color:var(--navy-900); }
.site-header .btn-primary:hover, .mobile-drawer .btn-primary:hover{ background:var(--acc-trust-lite); color:var(--navy-900); }
.main-nav > li:hover .nav-link svg{ transform:rotate(180deg); }
.mega{
/* top:100% (no gap) so the hoverable area is continuous from nav-link to panel —
a gap here would create a dead zone that closes the menu before the pointer arrives. */
position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-4px);
width:min(760px,86vw);
margin-top:14px;
background:rgba(13,33,66,0.98);
border:1px solid var(--line-dark-strong);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-strong);
padding:30px;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
z-index:60;
}
/* Invisible bridge that closes the visual gap so hover never drops between nav-link and panel */
.main-nav > li::after{
content:''; position:absolute; left:0; right:0; top:100%; height:14px;
}
.main-nav > li:hover .mega, .main-nav > li:focus-within .mega{
opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
/* The last two items sit close enough to the right edge that a 760px panel
centred under them would run off the viewport and be clipped. They hang from
the right instead. */
.main-nav > li:nth-last-child(-n+2) .mega{ left:auto; right:0; transform:translateY(-4px); }
.main-nav > li:nth-last-child(-n+2):hover .mega,
.main-nav > li:nth-last-child(-n+2):focus-within .mega{ transform:translateY(0); }
/* Same at the other end. */
.main-nav > li:nth-child(-n+2) .mega{ left:0; right:auto; transform:translateY(-4px); }
.main-nav > li:nth-child(-n+2):hover .mega,
.main-nav > li:nth-child(-n+2):focus-within .mega{ transform:translateY(0); }
.mega-backdrop{
position:fixed; left:0; right:0; top:76px; bottom:0;
background:rgba(8,18,34,0.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .22s var(--ease), visibility .22s;
z-index:45;
}
.site-header:has(.main-nav > li:hover) .mega-backdrop,
.site-header:has(.main-nav > li:focus-within) .mega-backdrop{
opacity:1; visibility:visible;
}
.mega-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:28px; }
.mega-col-feature{
background:linear-gradient(155deg,rgba(130,185,255,0.14),rgba(179,169,255,0.09));
border:1px solid var(--line-dark);
border-radius:var(--radius-md);
padding:22px;
display:flex; flex-direction:column; gap:12px;
}
.mega-col-feature .eyebrow{ color:var(--acc-trust-lite); }
.mega-col-feature h4, .mega-col-feature .h4{ color:var(--white); }
.mega-col-feature p{ color:var(--text-on-dark-dim); font-size:0.86rem; }
.mega-col h5{
font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-on-dark-faint);
margin-bottom:12px; font-weight:650;
}
.mega-col ul{ display:flex; flex-direction:column; gap:3px; }
.mega-col a{
display:block; padding:8px 10px; border-radius:8px; color:var(--text-on-dark-dim);
font-size:0.9rem; transition:background .18s, color .18s;
}
.mega-col a:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.mega-link-more{ margin-top:6px; color:var(--acc-trust-lite) !important; font-weight:500; }
.nav-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-toggle{
display:none; background:none; border:none; color:#fff; padding:8px; cursor:pointer;
}
.nav-toggle svg{ width:24px;height:24px; }
/* Sora is a wide face: eight top-level items plus the brand lockup and the CTA
stop fitting well before the old 1080px breakpoint, and the bar overflowed
rather than wrapping. Tighten first, then hand over to the drawer. */
@media (max-width:1380px){
.nav-wrap{ gap:12px; }
.nav-link{ padding:10px 9px; font-size:13.5px; }
.brand-name small{ display:none; }
.brand-name{ font-size:15px; }
}
@media (max-width:1200px){
.main-nav{ display:none; }
.nav-toggle{ display:flex; }
.nav-cta .btn-ghost-dark{ display:none; }
}
/* Mobile drawer */
.mobile-drawer{
position:fixed; inset:0; z-index:1000; background:var(--ink-950);
transform:translateX(100%); transition:transform .32s var(--ease);
overflow-y:auto; padding:22px 22px 60px;
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.mobile-close{ background:rgba(255,255,255,0.08); border:none; color:#fff; width:40px;height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.mobile-close svg{ width:18px;height:18px; }
.mobile-acc-item{ border-bottom:1px solid var(--line-dark); }
.mobile-acc-btn{
width:100%; display:flex; justify-content:space-between; align-items:center;
background:none; border:none; color:#fff; padding:16px 4px; font-size:1.02rem; font-weight:600; cursor:pointer;
}
.mobile-acc-btn svg{ width:16px;height:16px; transition:transform .25s var(--ease); color:var(--text-on-dark-faint); }
.mobile-acc-item.open .mobile-acc-btn svg{ transform:rotate(180deg); }
.mobile-acc-panel{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.mobile-acc-item.open .mobile-acc-panel{ max-height:600px; }
.mobile-acc-panel a{ display:block; padding:9px 6px 9px 14px; color:var(--text-on-dark-dim); font-size:0.94rem; border-left:2px solid var(--line-dark); margin-left:2px; }
.mobile-acc-panel a:hover{ color:#fff; }
.mobile-drawer .btn{ margin-top:26px; }
.mobile-simple-link{ display:block; padding:16px 4px; color:#fff; font-weight:600; font-size:1.02rem; border-bottom:1px solid var(--line-dark); }
/* ==========================================================================
Breadcrumb
========================================================================== */
.breadcrumb{ padding:18px 0; }
.breadcrumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:0.84rem; color:var(--text-on-light-faint); }
.breadcrumb li{ display:flex; align-items:center; gap:6px; }
.breadcrumb a{ color:var(--text-on-light-dim); }
.breadcrumb a:hover{ color:var(--accent-600); }
.breadcrumb li:not(:last-child)::after{ content:'/'; color:var(--paper-200); }
.surface-dark .breadcrumb, .surface-darker .breadcrumb, .page-hero .breadcrumb{ color:var(--text-on-dark-faint); }
.surface-dark .breadcrumb ol, .surface-darker .breadcrumb ol, .page-hero .breadcrumb ol{ color:var(--text-on-dark-faint); }
.surface-dark .breadcrumb a, .surface-darker .breadcrumb a, .page-hero .breadcrumb a{ color:var(--text-on-dark-dim); }
.surface-dark .breadcrumb a:hover, .surface-darker .breadcrumb a:hover, .page-hero .breadcrumb a:hover{ color:var(--white); }
.surface-dark .breadcrumb li:not(:last-child)::after,
.surface-darker .breadcrumb li:not(:last-child)::after,
.page-hero .breadcrumb li:not(:last-child)::after{ color:var(--text-on-dark-faint); }
/* ==========================================================================
Page hero (sub-pages)
========================================================================== */
.page-hero{
background:
radial-gradient(1100px 500px at 15% -10%, rgba(130,185,255,0.20), transparent 60%),
radial-gradient(900px 500px at 100% 0%, rgba(179,169,255,0.16), transparent 55%),
var(--navy-900);
color:var(--white); padding:64px 0 96px;
position:relative; overflow:hidden;
}
.page-hero::after{
content:''; position:absolute; inset:0; opacity:0.5; pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
background-size:26px 26px; mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.page-hero-inner{ position:relative; z-index:2; max-width:820px; }
.page-hero-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.tag-chip{
display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px;
background:rgba(255,255,255,0.07); border:1px solid var(--line-dark-strong); font-size:0.8rem; color:var(--text-on-dark-dim);
}
.tag-chip svg{ width:12px;height:12px; color:var(--cyan-400); }
/* ==========================================================================
Cards
========================================================================== */
.card{
background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-lg);
padding:32px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:transparent; }
.icon-tile{
width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
background:var(--paper-050); border:1px solid var(--hair);
color:var(--acc-sec); margin-bottom:20px; flex:none;
}
.icon-tile svg{ width:24px; height:24px; }
.icon-tile.on-dark{ background:rgba(255,255,255,0.05); border-color:var(--hair-on-navy-mid); color:var(--acc-trust-lite); }
/* Pillar cards (3 big cards) */
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pillar-card{
position:relative; border-radius:var(--radius-xl); padding:38px 32px; overflow:hidden;
background:linear-gradient(175deg,var(--ink-800),var(--ink-900));
border:1px solid var(--line-dark); color:var(--text-on-dark);
display:flex; flex-direction:column; min-height:460px;
transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.pillar-card:hover{ transform:translateY(-8px); border-color:rgba(255,255,255,0.28); }
.pillar-num{ font-size:0.85rem; color:var(--text-on-dark-faint); font-weight:700; letter-spacing:0.08em; }
.pillar-card h3{ color:#fff; margin:14px 0 14px; }
.pillar-card ul{ display:flex; flex-direction:column; gap:9px; margin-bottom:28px; flex:1; }
.pillar-card ul li{ display:flex; align-items:center; gap:10px; font-size:0.92rem; color:var(--text-on-dark-dim); }
.pillar-card ul li svg{ width:15px;height:15px; color:var(--cyan-400); flex:none; }
.pillar-glow{ position:absolute; width:280px; height:280px; border-radius:50%; filter:blur(70px); opacity:0.35; z-index:0; pointer-events:none; }
.pillar-card > *{ position:relative; z-index:1; }
.pillar-card.p1 .pillar-glow{ background:var(--acc-ai-lite); top:-90px; right:-90px; }
.pillar-card.p2 .pillar-glow{ background:var(--acc-sec-lite); bottom:-100px; left:-60px; }
.pillar-card.p3 .pillar-glow{ background:var(--acc-trust-lite); top:40%; right:-100px; }
@media (max-width:980px){ .pillar-grid{ grid-template-columns:1fr; } .pillar-card{ min-height:auto; } }
/* Solution tiles */
.solution-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.solution-tile{
background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-lg); padding:28px;
display:flex; flex-direction:column; gap:14px; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.solution-tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.solution-tile .meta-row{ display:flex; flex-wrap:wrap; gap:6px; }
.solution-tile .meta-row span{ font-size:0.72rem; padding:4px 9px; border-radius:999px; background:var(--paper-100); color:var(--text-on-light-dim); font-weight:600; }
.solution-kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; font-size:0.86rem; margin-top:4px; }
.solution-kv dt{ font-weight:650; color:var(--text-on-light); }
.solution-kv dd{ margin:0; color:var(--text-on-light-dim); }
.solution-tile .tile-cta{ margin-top:auto; font-weight:650; color:var(--accent-600); display:flex; align-items:center; gap:6px; font-size:0.9rem; }
.solution-tile .tile-cta svg{ width:14px;height:14px; transition:transform .2s; }
.solution-tile:hover .tile-cta svg{ transform:translateX(3px); }
@media (max-width:980px){ .solution-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .solution-grid{ grid-template-columns:1fr; } }
/* Industry cards with photo */
.industry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.industry-card{
position:relative; border-radius:var(--radius-lg); overflow:hidden; height:380px;
display:flex; align-items:flex-end; color:#fff; transition:transform .35s var(--ease);
border:1px solid var(--line-dark);
}
.industry-card:hover{ transform:translateY(-6px); }
.industry-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s var(--ease); }
.industry-card:hover img{ transform:scale(1.06); }
.industry-card::before{
content:''; position:absolute; inset:0; z-index:1;
background:linear-gradient(0deg, rgba(10,22,40,0.94) 10%, rgba(10,22,40,0.55) 55%, rgba(10,22,40,0.15) 100%);
}
.industry-card-body{ position:relative; z-index:2; padding:26px; width:100%; }
.industry-card-body .eyebrow{ color:var(--cyan-400); }
.industry-card-body h3{ color:#fff; margin:8px 0 10px; }
.industry-card-body ul{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.industry-card-body ul li{ font-size:0.74rem; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.18); }
.industry-card-body .tile-link{ font-weight:650; font-size:0.9rem; display:inline-flex; align-items:center; gap:6px; color:#fff; }
.industry-card-body .tile-link svg{ width:14px;height:14px; transition:transform .2s; }
.industry-card:hover .tile-link svg{ transform:translateX(3px); }
@media (max-width:640px){ .industry-card{ height:320px; } }
@media (max-width:980px){ .industry-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .industry-grid{ grid-template-columns:1fr; } }
/* Metric cards */
.metric-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.metric-card{
background:rgba(255,255,255,0.04); border:1px solid var(--line-dark); border-radius:var(--radius-md);
padding:26px; text-align:left;
}
.metric-card .num{ font-size:2.1rem; font-weight:750; color:#fff; letter-spacing:-0.02em; }
.metric-card .lbl{ font-size:0.86rem; color:var(--text-on-dark-dim); margin-top:6px; }
@media (max-width:900px){ .metric-grid{ grid-template-columns:1fr 1fr; } }
/* Article / insight cards */
.article-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.article-card{
background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-lg); overflow:hidden;
display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.article-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.article-card .art-tag{ padding:22px 24px 0; }
.article-card .art-tag span{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent-600); }
.article-card .art-body{ padding:12px 24px 24px; flex:1; display:flex; flex-direction:column; }
.article-card h4, .article-card .h4{ margin-bottom:10px; }
.article-card p{ color:var(--text-on-light-dim); font-size:0.92rem; flex:1; }
.article-card .art-meta{ margin-top:16px; font-size:0.8rem; color:var(--text-on-light-faint); display:flex; justify-content:space-between; align-items:center; }
#whitepaper-grid .art-meta svg{ color:var(--accent-500); transition:transform .25s var(--ease); }
#whitepaper-grid .article-card:hover .art-meta svg{ transform:translateY(2px); }
@media (max-width:980px){ .article-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .article-grid{ grid-template-columns:1fr; } }
/* Case-study / logo strip */
.trust-strip{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; }
.trust-chip{
display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
border:1px solid var(--line-dark-strong); background:rgba(255,255,255,0.04); color:var(--text-on-dark-dim); font-size:0.86rem; font-weight:600;
}
.trust-chip svg{ width:15px;height:15px; color:var(--cyan-400); }
.logo-placeholder-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.logo-placeholder{
height:64px; border-radius:12px; border:1px dashed var(--paper-200); display:flex; align-items:center; justify-content:center;
color:var(--text-on-light-faint); font-size:0.76rem; font-weight:600; text-align:center; padding:8px;
}
@media (max-width:820px){ .logo-placeholder-row{ grid-template-columns:repeat(2,1fr);} }
/* ==========================================================================
Journey / process steps
========================================================================== */
.journey{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.journey-step{
background:rgba(255,255,255,0.04); border:1px solid var(--line-dark); border-radius:var(--radius-md);
padding:22px 18px; position:relative;
}
.journey-step .step-idx{
width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent-500),var(--violet-500));
display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:0.82rem; margin-bottom:14px;
}
.journey-step h4, .journey-step .h4{ color:#fff; font-size:0.98rem; margin-bottom:6px; }
.journey-step p{ font-size:0.82rem; color:var(--text-on-dark-dim); }
.journey-arrow{ display:none; }
@media (max-width:1080px){ .journey{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .journey{ grid-template-columns:1fr; } }
/* Step-count variants — declared after the base media queries so they win at
equal specificity. These used to be inline grid-template-columns on the
pages, which beat every media query and left the journey four columns wide
on a phone, pushing the whole page sideways. */
.journey-4{ grid-template-columns:repeat(4,1fr); }
.journey-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1080px){
.journey-4{ grid-template-columns:repeat(2,1fr); }
.journey-3{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){ .journey-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .journey-4, .journey-3{ grid-template-columns:1fr; } }
.journey > *{ min-width:0; }
.process-vert{ display:flex; flex-direction:column; }
.process-row{ display:grid; grid-template-columns:64px 1fr; gap:22px; padding:26px 0; border-bottom:1px solid var(--paper-200); }
.process-row:last-child{ border-bottom:none; }
.process-idx{
width:52px;height:52px;border-radius:14px; background:linear-gradient(145deg,rgba(130,185,255,0.14),rgba(179,169,255,0.1));
color:var(--accent-600); display:flex; align-items:center; justify-content:center; font-weight:750; font-size:1.1rem;
}
.process-row h4, .process-row .h4{ margin-bottom:6px; }
.process-row p{ color:var(--text-on-light-dim); }
/* ==========================================================================
Journey funnel (problem section)
========================================================================== */
.problem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.problem-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px; }
.problem-item{ display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:12px; background:rgba(255,255,255,0.03); border:1px solid var(--line-dark); }
.problem-item svg{ width:18px;height:18px; color:var(--amber-400); flex:none; margin-top:2px; }
.problem-item span{ font-size:0.9rem; color:var(--text-on-dark-dim); }
.bridge-callout{
margin-top:32px; padding:26px 28px; border-radius:var(--radius-md);
background:linear-gradient(120deg,rgba(130,185,255,0.16),rgba(45,216,211,0.1));
border:1px solid var(--line-dark-strong);
}
.bridge-callout p{ color:#fff; font-size:1.08rem; font-weight:550; line-height:1.5; }
@media (max-width:900px){ .problem-grid{ grid-template-columns:1fr; } .problem-list{ grid-template-columns:1fr; } }
/* ==========================================================================
Trust seal badge (custom SVG-based, no photo)
========================================================================== */
.seal-wrap{ display:flex; align-items:center; justify-content:center; }
.seal-badge{ position:relative; width:260px; height:260px; }
.seal-ring{ position:absolute; inset:0; border-radius:50%; animation:spin 40s linear infinite; }
@media (prefers-reduced-motion: reduce){ .seal-ring{ animation:none; } }
.seal-core{
position:absolute; inset:26px; border-radius:50%;
background:radial-gradient(circle at 35% 30%, #16325f, var(--ink-900) 70%);
border:1px solid var(--line-dark-strong);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
box-shadow:0 0 60px -10px var(--accent-glow), inset 0 0 40px rgba(130,185,255,0.15);
}
.seal-core svg{ width:44px;height:44px; color:var(--cyan-400); }
.seal-core strong{ color:#fff; font-size:0.82rem; letter-spacing:0.06em; text-align:center; }
.seal-core small{ color:var(--text-on-dark-faint); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; }
.seal-categories{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.seal-cat{ display:flex; gap:12px; padding:16px; border-radius:12px; border:1px solid var(--line-dark); background:rgba(255,255,255,0.03); }
.seal-cat .icon-tile.on-dark{ width:40px;height:40px; margin-bottom:0; }
.seal-cat .icon-tile.on-dark svg{ width:18px;height:18px; }
.seal-cat h4, .seal-cat .h4{ color:#fff; font-size:0.94rem; }
.seal-cat p{ font-size:0.8rem; color:var(--text-on-dark-dim); }
.seal-disclaimer{
margin-top:22px; padding:16px 18px; border-radius:12px; background:var(--paper-050);
border:1px solid var(--hair-mid); font-size:0.84rem; color:var(--text-on-light-dim); display:flex; gap:10px;
}
.surface-dark .seal-disclaimer, .surface-darker .seal-disclaimer{
background:rgba(255,255,255,0.04); border-color:var(--hair-on-navy-mid); color:var(--text-on-dark-dim);
}
.seal-disclaimer svg{ width:18px;height:18px; color:var(--amber-400); flex:none; margin-top:1px; }
/* ==========================================================================
Control plane diagram
========================================================================== */
.cp-diagram{ display:flex; flex-direction:column; align-items:center; gap:0; }
.cp-inputs{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:8px; }
.cp-chip{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid var(--line-dark-strong); font-size:0.84rem; color:var(--text-on-dark-dim); }
.cp-chip svg{ width:15px;height:15px; color:var(--accent-300); }
.cp-arrow-down{ width:2px; height:34px; background:linear-gradient(var(--accent-500),transparent); margin:0 auto; }
.cp-plane{
width:100%; max-width:640px; padding:26px 30px; border-radius:var(--radius-lg);
background:linear-gradient(135deg,rgba(130,185,255,0.16),rgba(45,216,211,0.08));
border:1px solid var(--line-dark-strong); text-align:center; margin:14px 0;
}
.cp-plane strong{ color:#fff; font-size:1.05rem; }
.cp-outputs{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:8px; width:100%; max-width:760px; }
.cp-out{ text-align:center; padding:14px 8px; border-radius:12px; background:rgba(255,255,255,0.04); border:1px solid var(--line-dark); }
.cp-out svg{ width:20px;height:20px; color:var(--cyan-400); margin-bottom:8px; }
.cp-out span{ display:block; font-size:0.78rem; color:var(--text-on-dark-dim); font-weight:600; }
@media (max-width:700px){ .cp-outputs{ grid-template-columns:repeat(2,1fr); } }
/* ==========================================================================
Split media sections
========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.reverse .split-media{ order:2; }
.split-media{ border-radius:var(--radius-xl); overflow:hidden; position:relative; box-shadow:var(--shadow-soft); }
.split-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.2; }
.split-list{ display:flex; flex-direction:column; gap:14px; margin:26px 0 30px; }
.split-list li{ display:flex; gap:12px; align-items:flex-start; }
.split-list li svg{ width:19px;height:19px; color:var(--accent-500); flex:none; margin-top:2px; }
.surface-dark .split-list li svg, .surface-darker .split-list li svg{ color:var(--cyan-400); }
@media (max-width:900px){ .split, .split.reverse .split-media{ grid-template-columns:1fr; order:0; } .split{grid-template-columns:1fr;} }
/* ==========================================================================
Forms
========================================================================== */
.form-card{ background:var(--white); border-radius:var(--radius-xl); padding:38px; box-shadow:var(--shadow-soft); border:1px solid var(--hair-mid); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
/* An has an intrinsic minimum width of about 180px, and a grid item's
min-width is auto — so without these the form forced its own column wider
than the phone, taking the whole page with it. */
.form-field input, .form-field select, .form-field textarea{ min-width:0; width:100%; }
@media (max-width:640px){
.form-grid{ grid-template-columns:1fr; }
.form-card{ padding:26px 20px; }
}
.form-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.form-field.full{ grid-column:1/-1; }
.form-field label{ font-size:0.86rem; font-weight:650; color:var(--text-on-light); }
.form-field .req{ color:#d64545; }
.form-field input, .form-field select, .form-field textarea{
padding:13px 15px; border-radius:10px; border:1.5px solid var(--paper-200); font-family:inherit; font-size:0.95rem;
background:var(--paper-050); transition:border-color .2s, background .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
outline:none; border-color:var(--acc-sec); background:var(--white);
}
.chip-select{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-option input{ display:none; }
.chip-option label{
display:inline-flex; padding:9px 15px; border-radius:999px; border:1.5px solid var(--paper-200); font-size:0.85rem;
font-weight:600; color:var(--text-on-light-dim); cursor:pointer; transition:all .2s;
}
.chip-option input:checked + label{ background:var(--navy-900); border-color:var(--navy-900); color:var(--white); }
.form-note{ font-size:0.8rem; color:var(--text-on-light-faint); margin-top:10px; }
.form-error{ font-size:0.85rem; color:#d64545; margin-top:10px; font-weight:600; }
.form-error:empty{ display:none; }
.form-notice{
display:flex; gap:10px; align-items:flex-start; margin-bottom:22px; padding:14px 16px;
border-radius:var(--radius-md); background:var(--paper-050);
border:1px solid var(--hair-mid); font-size:0.86rem; color:var(--text-on-light-dim); line-height:1.5;
}
.form-notice[hidden]{ display:none; }
.form-notice svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--acc-sec); }
.form-notice strong{ color:var(--text-on-light); }
.form-success{ display:none; text-align:center; padding:40px 20px; }
.form-success.show{ display:block; }
.form-success svg{ width:52px;height:52px; color:var(--success-500); margin-bottom:16px; }
/* ==========================================================================
WHITEPAPER / LONG-FORM ARTICLE
Narrow measure, generous leading — these pages are read start to finish
rather than scanned like the marketing pages.
========================================================================== */
.paper-container{ max-width:760px; }
/* Whitepaper hero image. Sits slightly wider than the text measure so it reads
as an opening image rather than an illustration dropped inside a paragraph. */
.paper-figure{ margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--paper-200); }
.paper-figure img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.paper-meta{
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
font-size:0.8rem; color:var(--text-on-light-faint); font-weight:600;
letter-spacing:0.04em; text-transform:uppercase;
padding-bottom:20px; margin-bottom:34px; border-bottom:1px solid var(--paper-200);
}
.paper-meta svg{ width:16px; height:16px; color:var(--accent-500); }
.paper-body{ font-size:1.035rem; line-height:1.75; color:var(--text-on-light-dim); }
.paper-body > *:first-child{ margin-top:0; }
.paper-body h2{
font-size:1.55rem; line-height:1.25; color:var(--text-on-light);
margin:52px 0 16px; letter-spacing:-0.01em;
}
.paper-body h3{
font-size:1.14rem; color:var(--text-on-light);
margin:34px 0 10px; letter-spacing:-0.005em;
}
.paper-body p{ margin:0 0 20px; }
.paper-body strong{ color:var(--text-on-light); font-weight:650; }
.paper-body a:not(.btn){ color:var(--acc-sec); text-decoration:underline; text-underline-offset:2px; }
.paper-body ul, .paper-body ol{ margin:0 0 22px; padding-left:22px; }
.paper-body li{ margin-bottom:9px; }
.paper-body li::marker{ color:var(--accent-500); }
.paper-body blockquote{
margin:28px 0; padding:4px 0 4px 22px;
border-left:3px solid var(--accent-500);
color:var(--text-on-light); font-size:1.06rem; font-style:italic;
}
/* Tables carry the operational detail in these papers, so they get room to
breathe and their own horizontal scroll rather than squeezing the page. */
.paper-body table{
width:100%; border-collapse:collapse; margin:26px 0; font-size:0.9rem;
display:block; overflow-x:auto; white-space:nowrap;
}
.paper-body table thead th{
text-align:left; font-weight:700; color:var(--text-on-light);
background:var(--paper-50, #f5f7fa); border-bottom:2px solid var(--paper-200);
padding:11px 14px;
}
.paper-body table td{ padding:11px 14px; border-bottom:1px solid var(--paper-200); vertical-align:top; }
.paper-body table tbody tr:last-child td{ border-bottom:none; }
.paper-body pre{
background:var(--ink-900, #0a1628); color:#eaeef5;
padding:16px 18px; border-radius:var(--radius-md);
overflow-x:auto; margin:24px 0; font-size:0.84rem; line-height:1.6;
}
.paper-body pre code{ background:none; padding:0; color:inherit; font-size:inherit; }
.paper-body code{
background:var(--paper-100, #eaeef5); color:var(--text-on-light);
padding:2px 6px; border-radius:5px; font-size:0.88em;
}
/* Legal pages reuse the long-form typography but sit in a wider container and
lead with an h2, so the first heading must not push away from the notice. */
/* Product video. Self-hosted, so the frame is sized by aspect-ratio rather than
the padding-hack an iframe embed would need. */
/* The frame has to read as a distinct object against a dark section, so it gets
a light edge and a lifted shadow rather than sitting flush on the background. */
.video-frame{
position:relative; max-width:960px; margin:0 auto;
border-radius:var(--radius-lg); overflow:hidden;
border:1px solid rgba(255,255,255,0.16);
box-shadow:0 40px 90px -40px rgba(0,0,0,0.95), 0 0 0 6px rgba(255,255,255,0.03);
background:#0a1628;
}
.video-frame video{
display:block; width:100%; height:auto; aspect-ratio:16/9;
object-fit:cover; background:#0a1628;
}
/* Click-to-play overlay. Covers the poster until the viewer starts the video,
at which point main.js hands over to the native controls. */
.video-play{
position:absolute; inset:0; width:100%; border:0; cursor:pointer;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
background:linear-gradient(180deg, rgba(10,22,40,0.30) 0%, rgba(10,22,40,0.55) 100%);
color:#fff; font-family:inherit; transition:background .3s var(--ease);
}
.video-play:hover, .video-play:focus-visible{ background:linear-gradient(180deg, rgba(10,22,40,0.20) 0%, rgba(10,22,40,0.45) 100%); }
.video-play-ring{
width:84px; height:84px; border-radius:50%; flex:none;
background:rgba(255,255,255,0.14); border:2px solid rgba(255,255,255,0.75);
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
display:flex; align-items:center; justify-content:center;
transition:transform .3s var(--ease), background .3s var(--ease);
box-shadow:0 10px 40px -10px rgba(0,0,0,0.7);
}
.video-play-ring svg{ width:34px; height:34px; margin-left:4px; color:#fff; }
.video-play:hover .video-play-ring{ transform:scale(1.08); background:rgba(255,255,255,0.24); }
.video-play-meta{
font-size:0.84rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
padding:8px 17px; border-radius:999px;
background:rgba(10,22,40,0.6); border:1px solid rgba(255,255,255,0.22);
}
.video-frame.is-playing .video-play{ display:none; }
@media (max-width:640px){
.video-play-ring{ width:64px; height:64px; }
.video-play-ring svg{ width:26px; height:26px; }
}
.section-head.center{ text-align:center; margin-left:auto; margin-right:auto; max-width:720px; }
.caption.center{ text-align:center; }
/* Unconfirmed facts awaiting the company's input. Visible on purpose. */
mark.todo{
background:rgba(245,158,11,0.14); color:#8a5a00;
border:1px dashed rgba(245,158,11,0.55); border-radius:5px;
padding:1px 7px; font-size:0.9em; font-style:normal; font-weight:600;
}
.legal-body > div:first-child h2{ margin-top:0; }
.legal-body h2{ font-size:1.4rem; }
.paper-body .signal-card{ margin:30px 0; }
.paper-body hr{ border:none; border-top:1px solid var(--paper-200); margin:40px 0; }
@media (max-width:640px){
.paper-body{ font-size:0.98rem; }
.paper-body h2{ font-size:1.32rem; margin-top:40px; }
.paper-body table{ white-space:normal; font-size:0.84rem; }
}
/* ==========================================================================
FAQ accordion
========================================================================== */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid var(--paper-200); border-radius:14px; overflow:hidden; background:#fff; }
.faq-q{
width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; text-align:left;
padding:20px 22px; background:none; border:none; cursor:pointer; font-weight:650; font-size:1rem; color:var(--text-on-light);
}
.faq-q svg{ width:18px;height:18px; flex:none; color:var(--text-on-light-faint); transition:transform .25s var(--ease); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-item.open .faq-a{ max-height:400px; }
.faq-a-inner{ padding:0 22px 20px; color:var(--text-on-light-dim); font-size:0.94rem; line-height:1.65; }
/* ==========================================================================
Footer
========================================================================== */
.site-footer{ background:var(--navy-950); color:var(--text-on-dark-dim); padding:76px 0 30px; border-top:1px solid var(--hair-on-navy); }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(6,1fr); gap:28px; padding-bottom:52px; border-bottom:1px solid var(--line-dark); }
.footer-brand p{ margin:16px 0 20px; font-size:0.9rem; max-width:280px; }
.footer-col h5{
color:var(--text-on-dark-faint); font-family:var(--font-mono); font-size:11px;
text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; font-weight:400;
}
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:0.88rem; color:var(--text-on-dark-dim); transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap:10px; margin-top:6px; }
.footer-social a{ width:36px;height:36px; border-radius:10px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:16px;height:16px; }
.footer-bottom{ padding-top:26px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:0.82rem; }
.footer-legal{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-legal a:hover{ color:#fff; }
@media (max-width:1080px){ .footer-top{ grid-template-columns:1fr 1fr 1fr; } .footer-brand{ grid-column:1/-1; } }
@media (max-width:640px){ .footer-top{ grid-template-columns:1fr 1fr; } }
/* ==========================================================================
Final CTA band
========================================================================== */
.cta-band{
border-radius:var(--radius-xl); padding:64px 56px; position:relative; overflow:hidden;
background:var(--navy-900);
border:1px solid var(--line-dark-strong);
display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-band::before{
content:''; position:absolute; width:520px; height:520px; border-radius:50%;
background:radial-gradient(circle,rgba(179,169,255,0.35),transparent 65%);
top:-200px; right:-140px;
}
.cta-band::after{
content:''; position:absolute; width:460px; height:460px; border-radius:50%;
background:radial-gradient(circle,rgba(45,216,211,0.28),transparent 65%);
bottom:-200px; left:60px;
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band{ border-radius:var(--radius-panel); }
.cta-band h2{ color:var(--white); max-width:620px; }
.cta-band p{ color:var(--text-on-dark-dim); margin-top:12px; max-width:460px; }
/* ==========================================================================
Reveal-on-scroll
========================================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-delay-1.in{ transition-delay:.08s; }
.reveal-delay-2.in{ transition-delay:.16s; }
.reveal-delay-3.in{ transition-delay:.24s; }
.reveal-delay-4.in{ transition-delay:.32s; }
.reveal-delay-5.in{ transition-delay:.4s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
/* ==========================================================================
Utility grid columns
========================================================================== */
/* Grid and flex items default to min-width:auto, which lets a wide child push
its track past the viewport. Everything here wraps instead. */
.split > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .hx-intro > *, .hx-split > *{ min-width:0; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:980px){ .grid-3{ grid-template-columns:1fr 1fr; } .grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
.center-copy{ max-width:700px; margin:0 auto; text-align:center; }
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;} .mt-64{margin-top:64px;}
.mb-0{margin-bottom:0 !important;}
/* ==========================================================================
DPDP Readiness Calculator
========================================================================== */
.calc-shell{
background:var(--ink-950); border-radius:var(--radius-xl); border:1px solid var(--line-dark-strong);
padding:40px; color:var(--text-on-dark); box-shadow:var(--shadow-strong); position:relative; overflow:hidden;
}
.calc-shell::before{
content:''; position:absolute; width:360px; height:360px; border-radius:50%; background:var(--accent-500);
filter:blur(120px); opacity:0.25; top:-160px; right:-120px; pointer-events:none;
}
.calc-shell > *{ position:relative; z-index:1; }
.calc-intro{ display:flex; flex-direction:column; gap:16px; }
.calc-intro-meta{ display:flex; gap:10px; flex-wrap:wrap; }
.calc-start-btn{ align-self:flex-start; margin-top:10px; }
.calc-progress-track{ height:6px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; margin-bottom:28px; }
.calc-progress-bar{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--accent-500),var(--cyan-400)); transition:width .4s var(--ease); }
.calc-step-label{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; font-size:0.8rem; color:var(--text-on-dark-faint); font-weight:650; letter-spacing:.04em; text-transform:uppercase; }
.calc-cat-pill{ padding:5px 12px; border-radius:999px; background:rgba(255,255,255,0.07); border:1px solid var(--line-dark-strong); color:var(--accent-300); }
.calc-question h3{ color:#fff; margin-bottom:8px; }
.calc-question .calc-hint{ font-size:0.84rem; color:var(--text-on-dark-faint); margin-bottom:22px; }
.calc-options{ display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.calc-option{
display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-radius:14px;
border:1.5px solid var(--line-dark-strong); background:rgba(255,255,255,0.03); cursor:pointer;
transition:border-color .2s, background .2s;
}
.calc-option:hover{ border-color:var(--accent-400); background:rgba(130,185,255,0.08); }
.calc-option input{ margin-top:3px; accent-color:var(--accent-500); flex:none; }
.calc-option span{ font-size:0.94rem; color:var(--text-on-dark-dim); line-height:1.5; }
.calc-option input:checked ~ span{ color:#fff; }
.calc-option:has(input:checked){ border-color:var(--accent-400); background:rgba(130,185,255,0.14); }
.calc-nav{ display:flex; justify-content:space-between; align-items:center; gap:14px; }
.calc-nav .calc-back{ visibility:hidden; }
.calc-nav .calc-back.show{ visibility:visible; }
.calc-results{ display:none; }
.calc-results.show{ display:block; }
.calc-score-row{ display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:center; margin-bottom:8px; }
.calc-gauge{ position:relative; width:200px; height:200px; margin:0 auto; }
.calc-gauge svg{ width:100%; height:100%; transform:rotate(-90deg); }
.calc-gauge-track{ fill:none; stroke:rgba(255,255,255,0.08); stroke-width:14; }
.calc-gauge-fill{ fill:none; stroke:url(#calcGaugeGrad); stroke-width:14; stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease); }
.calc-gauge-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.calc-gauge-label strong{ font-size:2.4rem; color:#fff; line-height:1; }
.calc-gauge-label span{ font-size:0.78rem; color:var(--text-on-dark-faint); text-transform:uppercase; letter-spacing:.06em; margin-top:6px; }
.calc-band{ display:inline-block; margin-top:12px; padding:6px 14px; border-radius:999px; font-size:0.82rem; font-weight:650; }
.calc-band.band-0{ background:rgba(214,69,69,0.16); color:#f38b8b; }
.calc-band.band-1{ background:rgba(245,184,86,0.16); color:var(--amber-400); }
.calc-band.band-2{ background:rgba(45,216,211,0.16); color:var(--cyan-400); }
.calc-band.band-3{ background:rgba(45,216,211,0.16); color:var(--success-lite); }
.calc-cats{ display:flex; flex-direction:column; gap:14px; }
.calc-cat-row{ display:grid; grid-template-columns:180px 1fr 46px; align-items:center; gap:14px; }
.calc-cat-row span:first-child{ font-size:0.86rem; color:var(--text-on-dark-dim); font-weight:600; }
.calc-cat-track{ height:8px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; }
.calc-cat-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent-500),var(--cyan-400)); width:0%; transition:width 1s var(--ease); }
.calc-cat-row .calc-cat-pct{ font-size:0.82rem; color:var(--text-on-dark-faint); text-align:right; font-weight:650; }
.calc-results-note{
margin-top:28px; padding:16px 18px; border-radius:12px; background:rgba(255,255,255,0.04);
border:1px solid var(--line-dark); font-size:0.84rem; color:var(--text-on-dark-dim); display:flex; gap:10px;
}
.calc-results-note svg{ width:18px;height:18px; color:var(--amber-400); flex:none; margin-top:1px; }
.calc-results-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
@media (max-width:760px){
.calc-score-row{ grid-template-columns:1fr; text-align:center; }
.calc-cat-row{ grid-template-columns:1fr; text-align:left; gap:6px; }
.calc-cat-row .calc-cat-pct{ text-align:left; }
.calc-shell{ padding:26px; }
}
@media print{
.site-header, .site-footer, .mobile-drawer, .page-hero, .calc-intro, .calc-progress-track,
.calc-step-label, .calc-question, .calc-nav, .cta-band, section:not(:has(.calc-results.show)){
display:none !important;
}
.calc-shell{ box-shadow:none; border:1px solid #ccc; background:#fff; color:#000; }
.calc-shell::before{ display:none; }
body{ background:#fff; }
}
/* ==========================================================================
Product dashboard mockup (used in place of generic stock imagery
wherever the subject is the software itself, not a physical place)
========================================================================== */
.dash-mock{
background:linear-gradient(175deg,var(--ink-800),var(--ink-950));
border:1px solid var(--line-dark-strong); border-radius:var(--radius-xl);
padding:28px; color:var(--text-on-dark); box-shadow:var(--shadow-strong);
position:relative; overflow:hidden;
}
.dash-mock::before{
content:''; position:absolute; width:280px; height:280px; border-radius:50%;
background:var(--accent-500); filter:blur(100px); opacity:0.25; top:-120px; right:-100px; pointer-events:none;
}
.dash-mock > *{ position:relative; z-index:1; }
.dash-mock-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.dash-mock-head .eyebrow{ color:var(--accent-300); margin-bottom:0; }
.dash-mock-live{ display:flex; align-items:center; gap:7px; font-size:0.76rem; color:var(--text-on-dark-faint); font-weight:600; }
.dash-mock-live .dot{ width:7px;height:7px;border-radius:50%; background:var(--success-lite); box-shadow:0 0 0 3px rgba(45,216,211,0.2); }
.dash-mock-body{ display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; margin-bottom:24px; }
.dash-mock-gauge{ position:relative; width:120px; height:120px; flex:none; }
.dash-mock-gauge svg{ width:100%; height:100%; transform:rotate(-90deg); }
.dash-mock-gauge-label{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dash-mock-gauge-label strong{ font-size:1.5rem; color:#fff; line-height:1; }
.dash-mock-gauge-label span{ font-size:0.64rem; color:var(--text-on-dark-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.dash-mock-rows{ display:flex; flex-direction:column; gap:12px; }
.dash-mock-row{ display:grid; grid-template-columns:110px 1fr 34px; align-items:center; gap:10px; }
.dash-mock-row span:first-child{ font-size:0.8rem; color:var(--text-on-dark-dim); font-weight:600; }
.dash-mock-track{ height:6px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; }
.dash-mock-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent-500),var(--cyan-400)); }
.dash-mock-row .pct{ font-size:0.76rem; color:var(--text-on-dark-faint); font-weight:650; text-align:right; }
.dash-mock-foot{ display:flex; gap:18px; flex-wrap:wrap; padding-top:20px; border-top:1px solid var(--line-dark); }
.dash-mock-stat strong{ display:block; color:#fff; font-size:1.05rem; }
.dash-mock-stat span{ font-size:0.74rem; color:var(--text-on-dark-faint); }
@media (max-width:480px){ .dash-mock-body{ grid-template-columns:1fr; justify-items:center; text-align:center; } .dash-mock-row{ grid-template-columns:90px 1fr 30px; } }
/* ==========================================================================
Motion & polish layer
========================================================================== */
/* Scroll progress bar */
.scroll-progress{
position:fixed; top:0; left:0; height:3px; width:0%; z-index:1200; pointer-events:none;
background:linear-gradient(90deg,var(--accent-500),var(--cyan-400),var(--violet-400));
}
/* Film grain on dark surfaces + hairline top edge */
.surface-dark, .surface-darker{ position:relative; }
.surface-dark::after, .surface-darker::after{
content:''; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0.05;
background-image:url("data:image/svg+xml;utf8,");
}
.surface-dark::before, .surface-darker::before{
content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:1; pointer-events:none;
background:linear-gradient(90deg,transparent 5%,rgba(154,200,255,0.35) 50%,transparent 95%);
}
.surface-dark > .container, .surface-darker > .container,
.surface-dark > .container-wide, .surface-darker > .container-wide{ position:relative; z-index:1; }
/* Aurora blobs (hero + page heroes) */
.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora span{
position:absolute; border-radius:50%; filter:blur(90px); opacity:0.5; will-change:transform;
animation:drift 18s ease-in-out infinite alternate;
}
.aurora span:nth-child(1){ width:560px; height:560px; background:#82b9ff; top:-200px; left:-140px; }
.aurora span:nth-child(2){ width:480px; height:480px; background:#b3a9ff; top:5%; right:-160px; animation-duration:23s; animation-delay:-7s; }
.aurora span:nth-child(3){ width:420px; height:420px; background:#2dd8d3; bottom:-200px; left:38%; opacity:0.32; animation-duration:27s; animation-delay:-13s; }
.aurora-sm span{ opacity:0.35; }
.aurora-sm span:nth-child(1){ width:460px; height:460px; }
.aurora-sm span:nth-child(2){ width:380px; height:380px; }
@keyframes drift{
from{ transform:translate3d(0,0,0) scale(1); }
to{ transform:translate3d(70px,50px,0) scale(1.15); }
}
.page-hero > .container{ position:relative; z-index:2; }
/* Hero entrance choreography */
.hero-copy h1{ font-size:var(--fs-display); }
.hero-copy > *{ opacity:0; transform:translateY(22px); animation:riseIn .9s var(--ease) forwards; }
.hero-copy > :nth-child(1){ animation-delay:.05s; }
.hero-copy > :nth-child(2){ animation-delay:.15s; }
.hero-copy > :nth-child(3){ animation-delay:.28s; }
.hero-copy > :nth-child(4){ animation-delay:.40s; }
.hero-copy > :nth-child(5){ animation-delay:.55s; }
.hero-visual{ opacity:0; transform:scale(.94); animation:scaleIn 1.1s var(--ease) .25s forwards; }
@keyframes riseIn{ to{ opacity:1; transform:none; } }
@keyframes scaleIn{ to{ opacity:1; transform:none; } }
/* Orbit visual: connectors, halo, floating nodes */
.orbit-links{ position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.orbit-links line{
stroke:rgba(154,200,255,0.42); stroke-width:0.45; stroke-dasharray:1.6 2.2; stroke-linecap:round;
animation:dashflow 4s linear infinite;
}
.orbit-links line:nth-child(2n){ animation-duration:5.5s; }
@keyframes dashflow{ to{ stroke-dashoffset:-38; } }
.orbit-halo{
position:absolute; top:50%; left:50%; width:230px; height:230px; border-radius:50%; z-index:4;
background:conic-gradient(from 0deg, transparent 0 20%, rgba(130,185,255,0.55) 32%, transparent 45%, rgba(45,216,211,0.45) 62%, transparent 75%, rgba(179,169,255,0.4) 88%, transparent 100%);
filter:blur(16px); opacity:0.9; animation:haloSpin 16s linear infinite;
}
@keyframes haloSpin{ from{ transform:translate(-50%,-50%) rotate(0deg);} to{ transform:translate(-50%,-50%) rotate(360deg);} }
.orbit-node{ z-index:6; animation:floaty 6s ease-in-out infinite; }
.orbit-node:nth-of-type(2){ animation-delay:-1s; }
.orbit-node:nth-of-type(3){ animation-delay:-2s; }
.orbit-node:nth-of-type(4){ animation-delay:-3s; }
.orbit-node:nth-of-type(5){ animation-delay:-4s; }
.orbit-node:nth-of-type(6){ animation-delay:-5s; }
@keyframes floaty{
0%,100%{ transform:translate(-50%,-50%) translateY(0); }
50%{ transform:translate(-50%,-50%) translateY(-7px); }
}
.orbit-node .dot{ background:rgba(13,33,66,0.72); }
/* Capability marquee */
.hero-grid > *{ min-width:0; }
.marquee{
margin-top:40px; overflow:hidden; width:100%; min-width:0; max-width:100%;
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-group{ display:flex; gap:12px; padding-right:12px; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
/* Cards: gradient border + accent line on hover */
.card{ position:relative; overflow:hidden; }
.card::after{
content:''; position:absolute; left:0; right:0; top:0; height:3px;
background:linear-gradient(90deg,var(--accent-500),var(--cyan-400));
transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.card:hover::after{ transform:scaleX(1); }
.card:hover{
background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--accent-300),var(--cyan-400)) border-box;
border-color:transparent;
}
.solution-tile:hover, .article-card:hover{
background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--accent-300),var(--cyan-400)) border-box;
border-color:transparent;
}
.metric-card{ transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06); }
.metric-card:hover{
transform:translateY(-4px); border-color:transparent;
background:linear-gradient(var(--ink-700),var(--ink-700)) padding-box, linear-gradient(135deg,rgba(154,200,255,0.9),rgba(45,216,211,0.9)) border-box;
}
.metric-card .icon-tile{ transition:transform .3s var(--ease); }
.metric-card:hover .icon-tile{ transform:translateY(-2px) scale(1.06); }
.pillar-card:hover{
border-color:transparent;
background:linear-gradient(175deg,var(--ink-800),var(--ink-900)) padding-box, linear-gradient(135deg,rgba(154,200,255,0.85),rgba(45,216,211,0.85)) border-box;
}
.journey-step{ position:relative; transition:transform .3s var(--ease), border-color .3s var(--ease); }
.journey-step:hover{ transform:translateY(-4px); border-color:rgba(154,200,255,0.6); }
.icon-tile{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover .icon-tile, .solution-tile:hover .icon-tile{ transform:translateY(-2px) scale(1.06); box-shadow:0 10px 24px -12px var(--accent-glow); }
/* Journey connector line (desktop) */
@media (min-width:1081px){
.journey{ position:relative; }
.journey::before{
content:''; position:absolute; left:40px; right:40px; top:37px; height:2px; z-index:0;
background:repeating-linear-gradient(90deg,rgba(154,200,255,0.45) 0 8px,transparent 8px 16px);
}
.journey-step{ z-index:1; background:linear-gradient(rgba(255,255,255,0.04),rgba(255,255,255,0.04)), var(--ink-900); }
}
/* Buttons: shimmer sweep */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
content:''; position:absolute; top:-20%; left:-70%; width:45%; height:140%; pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.32),transparent);
transform:skewX(-20deg); transition:left .7s var(--ease);
}
.btn-primary:hover::after{ left:130%; }
.btn-ghost-dark:hover{ border-color:rgba(154,200,255,0.6); }
/* Nav link underline */
.nav-link{ position:relative; }
.nav-link::after{
content:''; position:absolute; left:15px; right:15px; bottom:5px; height:2px; border-radius:2px;
background:linear-gradient(90deg,var(--accent-400),var(--cyan-400));
transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.main-nav > li:hover .nav-link::after, .nav-link[aria-current="page"]::after{ transform:scaleX(1); }
.mega{ transform:translateX(-50%) translateY(-6px) scale(.985); }
.main-nav > li:hover .mega, .main-nav > li:focus-within .mega{ transform:translateX(-50%) translateY(0) scale(1); }
/* Media zoom */
.split-media{ overflow:hidden; }
.split-media img{ transition:transform .9s var(--ease); }
.split-media:hover img{ transform:scale(1.04); }
/* Section-head accent */
.section-head h2{ position:relative; }
.eyebrow::before{ box-shadow:0 0 12px var(--accent-glow); }
@media (prefers-reduced-motion: reduce){
.aurora span, .orbit-links line, .orbit-halo, .orbit-node, .marquee-track{ animation:none !important; }
.hero-copy > *, .hero-visual{ opacity:1; transform:none; animation:none; }
}
/* Pillar cards with media strip (overrides the earlier tall/empty layout) */
.pillar-card{ padding:0; min-height:auto; }
.pillar-media{ position:relative; height:210px; overflow:hidden; flex:none; }
.pillar-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); filter:saturate(.9); }
.pillar-card:hover .pillar-media img{ transform:scale(1.06); }
.pillar-media::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(11,27,53,0.15) 0%, rgba(11,27,53,0.35) 55%, var(--ink-800) 100%);
}
.pillar-body{ position:relative; z-index:1; padding:22px 32px 34px; display:flex; flex-direction:column; flex:1; }
.pillar-body ul{ flex:1; }
.pillar-card > .pillar-media{ z-index:1; }
.pillar-card > .pillar-glow{ position:absolute; z-index:0; }
@media (max-width:980px){ .pillar-media{ height:170px; } }
/* ==========================================================================
Conversion content components
========================================================================== */
/* "Signals you need this" checklist card */
.signal-card{
background:#fff; border:1px solid var(--paper-200); border-radius:var(--radius-lg); padding:30px 32px;
}
.surface-dark .signal-card, .surface-darker .signal-card{ background:rgba(255,255,255,0.04); border-color:var(--line-dark); }
.signal-card h3{ margin-bottom:16px; }
.signal-list{ display:flex; flex-direction:column; gap:12px; }
.signal-list li{ display:flex; gap:12px; align-items:flex-start; font-size:0.95rem; color:var(--text-on-light-dim); }
.surface-dark .signal-list li, .surface-darker .signal-list li{ color:var(--text-on-dark-dim); }
.signal-list li svg{ width:18px;height:18px; flex:none; margin-top:2px; color:var(--amber-400); }
.signal-list.positive li svg{ color:var(--success-500); }
/* Compare table: without vs with */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.compare-col{ border-radius:var(--radius-lg); padding:28px 30px; border:1px solid var(--paper-200); background:#fff; }
.compare-col.with{ border-color:transparent; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,var(--accent-400),var(--cyan-400)) border-box; box-shadow:var(--shadow-soft); }
.surface-dark .compare-col, .surface-darker .compare-col{ background:rgba(255,255,255,0.04); border-color:var(--line-dark); }
.surface-dark .compare-col.with, .surface-darker .compare-col.with{ background:linear-gradient(var(--ink-700),var(--ink-700)) padding-box, linear-gradient(135deg,var(--accent-400),var(--cyan-400)) border-box; }
.compare-col h4, .compare-col .h4{ margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.compare-col ul{ display:flex; flex-direction:column; gap:10px; }
.compare-col li{ display:flex; gap:10px; align-items:flex-start; font-size:0.92rem; color:var(--text-on-light-dim); }
.surface-dark .compare-col li, .surface-darker .compare-col li{ color:var(--text-on-dark-dim); }
.compare-col li svg{ width:16px;height:16px; flex:none; margin-top:3px; }
.compare-col.without li svg{ color:#d64545; }
.compare-col.with li svg{ color:var(--success-500); }
@media (max-width:760px){ .compare{ grid-template-columns:1fr; } }
/* Deliverable rows (numbered) */
.deliverables{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.deliverable{ display:flex; gap:16px; padding:22px; border-radius:var(--radius-md); border:1px solid var(--paper-200); background:#fff; }
.surface-dark .deliverable, .surface-darker .deliverable{ background:rgba(255,255,255,0.04); border-color:var(--line-dark); }
.deliverable .d-idx{ width:36px;height:36px;border-radius:10px; flex:none; display:flex;align-items:center;justify-content:center; font-weight:750; font-size:0.85rem; color:#fff; background:linear-gradient(135deg,var(--accent-500),var(--violet-500)); }
.deliverable h4, .deliverable .h4{ margin-bottom:4px; font-size:1rem; }
.deliverable p{ font-size:0.88rem; color:var(--text-on-light-dim); }
.surface-dark .deliverable p, .surface-darker .deliverable p{ color:var(--text-on-dark-dim); }
.surface-dark .deliverable h4, .surface-darker .deliverable h4, .surface-dark .deliverable .h4, .surface-darker .deliverable .h4{ color:#fff; }
@media (max-width:760px){ .deliverables{ grid-template-columns:1fr; } }
/* Why-us strip */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.why-item{ padding:26px; border-radius:var(--radius-lg); background:rgba(255,255,255,0.04); border:1px solid var(--line-dark); }
.why-item h4, .why-item .h4{ color:#fff; margin:12px 0 8px; }
.why-item p{ color:var(--text-on-dark-dim); font-size:0.9rem; }
@media (max-width:900px){ .why-grid{ grid-template-columns:1fr; } }
/* Mid-page inline CTA */
.cta-inline{
display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
padding:26px 30px; border-radius:var(--radius-lg);
background:linear-gradient(120deg,rgba(130,185,255,0.12),rgba(45,216,211,0.08)); border:1px solid rgba(130,185,255,0.25);
}
.cta-inline p{ font-weight:600; color:var(--text-on-light); }
.surface-dark .cta-inline p, .surface-darker .cta-inline p{ color:#fff; }
/* Skip link */
.skip-link{
position:absolute; left:12px; top:-60px; background:#fff; color:#000; padding:12px 18px; border-radius:8px;
z-index:2000; transition:top .2s;
}
.skip-link:focus{ top:12px; }
.h4{ margin:0; }
/* Icons inside headings must never inherit heading box size */
h1 svg, h2 svg, h3 svg, h4 svg, .h4 svg{ width:1.1em; height:1.1em; flex:none; vertical-align:-0.15em; }
.compare-col h4 svg, .compare-col .h4 svg{ width:20px; height:20px; }
.compare-col.without h4 svg, .compare-col.without .h4 svg{ color:#d64545; }
.compare-col.with h4 svg, .compare-col.with .h4 svg{ color:var(--success-500); }
/* Gap assessment (multi-question steps) */
.ga-q{ padding:22px 0; border-top:1px solid var(--line-dark); }
.ga-q:first-child{ border-top:none; padding-top:6px; }
.ga-q-title{ color:#fff; font-size:1.05rem; margin-bottom:6px; }
.ga-q .calc-hint{ font-size:0.84rem; color:var(--text-on-dark-faint); margin-bottom:14px; }
.ga-q .calc-options{ margin-bottom:0; }
.ga-actions .deliverable{ background:rgba(255,255,255,0.04); border-color:var(--line-dark); }
.ga-actions .deliverable p{ color:var(--text-on-dark-dim); }
.mega.mega-wide{ width:min(980px,92vw); }
.mega-wide .mega-grid{ grid-template-columns:1.1fr 1fr 1fr 1fr; }
@media print{ .ga-intro, .ga-quiz{ display:none !important; } .ga-results{ display:block !important; } .ga-actions .deliverable{ background:#fff; border-color:#ddd; } .ga-actions .deliverable p, .ga-q-title{ color:#000; } }
/* ==========================================================================
HOMEPAGE — redesign components (prefix: hx-)
Built from the design handoff. The handoff is dark throughout; here navy
carries the hero, the Managed AI band and the closing panel, and white
carries everything that is read. Grids use
repeat(auto-fit, minmax(min(100%, Npx), 1fr)) so every one of them is fluid
without a media query.
========================================================================== */
@keyframes hx-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes hx-spin-y{ from{ transform:rotateY(0deg); } to{ transform:rotateY(360deg); } }
@keyframes hx-sweep{ from{ background-position:0% 50%; } to{ background-position:200% 50%; } }
@keyframes hx-dash{ to{ background-position:0 -24px; } }
@keyframes hx-pulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
/* ---------------------------------------------------------------- Hero --- */
.hx-hero{
position:relative; overflow:hidden;
min-height:calc(100vh - 72px);
display:flex; align-items:center;
background:var(--navy-900);
color:var(--white);
}
.hx-hero::before{
/* Faint dot field so the navy is never a flat plane even before WebGL loads. */
content:''; position:absolute; inset:0; z-index:0; opacity:0.5; pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
background-size:28px 28px;
mask-image:radial-gradient(circle at 60% 40%, black, transparent 72%);
}
.hx-canvas{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.hx-canvas canvas{ width:100%; height:100%; display:block; transition:opacity .6s var(--ease); }
.hx-labels{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.hx-label{
position:absolute; left:0; top:0; opacity:0;
display:flex; align-items:center; gap:8px;
font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em;
color:var(--white); white-space:nowrap; will-change:transform;
}
.hx-label i{
width:6px; height:6px; border-radius:50%; background:currentColor;
box-shadow:0 0 12px currentColor; flex:none;
}
.hx-label span{
padding:5px 9px; border:1px solid var(--hair-on-navy-strong); border-radius:6px;
background:rgba(11,27,53,0.6); color:var(--white);
}
.hx-label.ai i{ color:var(--acc-ai-lite); }
.hx-label.sec i{ color:var(--acc-sec-lite); }
.hx-label.trust i{ color:var(--acc-trust-lite); }
.hx-hero-inner{ position:relative; z-index:3; width:100%; padding:96px 0 120px; }
.hx-hero-copy{ max-width:680px; }
.hx-hero-pill{
display:inline-flex; align-items:center; gap:10px; padding:7px 14px;
border:1px solid var(--hair-on-navy-mid); border-radius:999px;
font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em;
color:var(--text-on-dark-dim); background:rgba(11,27,53,0.5);
}
.hx-hero-pill b{ display:flex; gap:4px; }
.hx-hero-pill b i{ width:6px; height:6px; border-radius:50%; }
.hx-hero-pill b i:nth-child(1){ background:var(--acc-ai-lite); }
.hx-hero-pill b i:nth-child(2){ background:var(--acc-sec-lite); }
.hx-hero-pill b i:nth-child(3){ background:var(--acc-trust-lite); }
.hx-hero h1{ margin:28px 0 0; font-size:var(--fs-display); line-height:0.98; letter-spacing:-0.045em; }
.hx-hero .lede{ margin:28px 0 0; max-width:540px; font-size:19px; color:var(--text-on-dark-body); }
.hx-hero .btn-row{ margin-top:40px; }
.hx-scroll{
position:absolute; left:var(--gutter); bottom:28px; z-index:3;
display:flex; align-items:center; gap:12px;
font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--text-on-dark-muted);
}
.hx-scroll::before{ content:''; width:1px; height:36px; background:linear-gradient(var(--text-on-dark-muted),transparent); }
@media (max-width:980px){
.hx-hero{ min-height:0; }
.hx-hero-inner{ padding:72px 0 92px; }
.hx-scroll{ display:none; }
/* The scene drops to 45% here but the labels are HTML, so they stay crisp and
land on top of the headline. Below this width they go. */
.hx-labels{ display:none; }
}
/* ------------------------------------------------------------- Marquee --- */
.hx-marquee{
background:var(--navy-950);
border-top:1px solid var(--hair-on-navy); border-bottom:1px solid var(--hair-on-navy);
overflow:hidden; padding:22px 0;
}
.hx-marquee-track{ display:flex; width:max-content; animation:hx-marquee 38s linear infinite; }
.hx-marquee-item{
display:flex; align-items:center; gap:28px; padding-right:28px;
font-size:22px; font-weight:300; color:var(--text-on-dark-dim); white-space:nowrap;
}
.hx-marquee-item i{ width:8px; height:8px; transform:rotate(45deg); flex:none; }
.hx-marquee-item.ai i{ background:var(--acc-ai-lite); }
.hx-marquee-item.sec i{ background:var(--acc-sec-lite); }
.hx-marquee-item.trust i{ background:var(--acc-trust-lite); }
@media (prefers-reduced-motion: reduce){
.hx-marquee-track{ animation:none; }
.hx-marquee{ overflow-x:auto; }
}
/* ---------------------------------------------------- Two-column intro --- */
.hx-intro{
display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
gap:56px; align-items:end;
}
.hx-intro .lede{ max-width:480px; }
/* -------------------------------------------------- Pain-point ledger --- */
.hx-pains{
margin-top:72px; display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
border-top:1px solid var(--hair);
}
.hx-pain{
display:flex; gap:20px; padding:28px 24px 28px 0;
border-bottom:1px solid var(--hair); transition:background .3s var(--ease);
}
.hx-pain:hover{ background:var(--paper-050); }
.hx-pain i{
font-family:var(--font-mono); font-size:12px; font-style:normal;
color:var(--text-on-light-faint); padding-top:4px; flex:none;
}
.hx-pain span{ font-size:17px; line-height:1.45; color:var(--text-on-light); }
/* --------------------------------------------------- Discipline cards --- */
.hx-disc-grid{
margin-top:64px; display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:20px;
}
.hx-card{
position:relative; border-radius:var(--radius-lg); overflow:hidden;
background:var(--white); border:1px solid var(--hair-mid);
transform-style:preserve-3d; will-change:transform;
transition:transform .35s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.hx-card:hover{ border-color:var(--hair-strong); box-shadow:var(--shadow-soft); }
.hx-card-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
/* Absolute rather than width/height:100%: the build wraps every ![]()
in a
for the WebP source, and a is inline by default. */
.hx-card-media img{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
filter:saturate(.65) brightness(.92); transform:scale(1.06);
}
.hx-card-media::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(255,255,255,0) 34%,var(--white) 99%);
}
.hx-card-blend{ position:absolute; inset:0; mix-blend-mode:color; opacity:.42; }
.hx-card-num{
position:absolute; top:18px; left:22px; z-index:2;
font-family:var(--font-mono); font-size:13px; color:var(--white);
padding:3px 9px; border-radius:6px; background:rgba(11,27,53,0.78);
border:1px solid var(--hair-on-navy-strong);
}
.hx-card-body{ padding:8px 28px 30px; transform:translateZ(40px); }
.hx-card-title{ display:flex; align-items:center; gap:10px; }
.hx-card-title i{ width:10px; height:10px; transform:rotate(45deg); flex:none; }
.hx-card-title h3{ font-size:26px; }
.hx-chips{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
.hx-chips span{
padding:7px 12px; border-radius:999px; border:1px solid var(--hair-mid);
font-size:13px; color:var(--text-on-light-dim);
}
.hx-card-link{
margin-top:28px; display:inline-flex; align-items:center; gap:8px;
font-size:14px; font-weight:500; color:var(--text-on-light);
}
.hx-card-link svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.hx-card:hover .hx-card-link svg{ transform:translateX(3px); }
.hx-ai .hx-card-blend{ background:var(--acc-ai); }
.hx-sec .hx-card-blend{ background:var(--acc-sec); }
.hx-trust .hx-card-blend{ background:var(--acc-trust); }
.hx-ai .hx-card-title i{ background:var(--acc-ai); }
.hx-sec .hx-card-title i{ background:var(--acc-sec); }
.hx-trust .hx-card-title i{ background:var(--acc-trust); }
/* ------------------------------------------------------ AI lifecycle --- */
.hx-steps-wrap{ position:relative; margin-top:80px; }
.hx-steps-line{
position:absolute; left:0; right:0; top:21px; height:1px; transform-origin:left center;
background:linear-gradient(90deg,var(--acc-ai),var(--acc-sec),var(--acc-trust));
}
.hx-steps{
position:relative; display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:28px;
}
.hx-step{ display:flex; flex-direction:column; gap:18px; }
.hx-step i{
width:43px; height:43px; border-radius:50%; flex:none;
background:var(--paper-050); display:flex; align-items:center; justify-content:center;
font-family:var(--font-mono); font-size:13px; font-style:normal;
}
.hx-step.ai i{ border:1px solid var(--acc-ai); color:var(--acc-ai); box-shadow:0 0 24px -8px var(--acc-ai); }
.hx-step.sec i{ border:1px solid var(--acc-sec); color:var(--acc-sec); box-shadow:0 0 24px -8px var(--acc-sec); }
.hx-step.trust i{ border:1px solid var(--acc-trust); color:var(--acc-trust); box-shadow:0 0 24px -8px var(--acc-trust); }
.hx-step h3{ font-size:22px; }
.hx-step p{ font-size:15px; line-height:1.55; color:var(--text-on-light-dim); }
.hx-caps{
margin-top:96px; display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
gap:1px; background:var(--hair-mid);
border:1px solid var(--hair-mid); border-radius:var(--radius-md); overflow:hidden;
}
.hx-cap{
background:var(--white); padding:28px 26px 32px; min-height:170px;
display:flex; flex-direction:column; gap:12px; transition:background .3s var(--ease);
}
.hx-cap:hover{ background:var(--paper-050); }
.hx-cap h4{ font-size:18px; }
.hx-cap p{ font-size:14.5px; line-height:1.55; color:var(--text-on-light-dim); }
/* ------------------------------------------------------- Trust Seal --- */
.hx-split{
display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));
gap:80px; align-items:center;
}
.hx-seals{ margin-top:40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.hx-seal-card{ padding:20px; border-radius:14px; border:1px solid var(--hair-mid); background:var(--paper-050); }
.hx-seal-card b{ display:flex; align-items:center; gap:8px; font-weight:500; font-size:16px; }
.hx-seal-card b i{ width:7px; height:7px; border-radius:50%; background:var(--acc-trust); flex:none; }
.hx-seal-card p{ margin:8px 0 0; font-size:14px; line-height:1.5; color:var(--text-on-light-dim); }
.hx-coin-stage{ display:flex; justify-content:center; perspective:1200px; padding:40px 0; }
.hx-coin{ position:relative; width:min(380px,80vw); aspect-ratio:1; }
.hx-coin::before{
content:''; position:absolute; inset:-14%; border-radius:50%;
background:radial-gradient(circle,rgba(0,112,111,0.18),transparent 62%);
}
.hx-coin-spin{ position:absolute; inset:0; transform-style:preserve-3d; animation:hx-spin-y 14s linear infinite; }
.hx-coin-face{
position:absolute; inset:0; border-radius:50%; backface-visibility:hidden;
border:1px solid var(--hair-on-navy-strong);
display:flex; flex-direction:column; align-items:center; justify-content:center;
color:var(--white); text-align:center;
}
.hx-coin-front{
transform:translateZ(6px); gap:14px;
background:radial-gradient(circle at 35% 30%,var(--navy-600),var(--navy-950) 70%);
box-shadow:inset 0 0 0 14px var(--navy-900), inset 0 0 0 15px rgba(45,216,211,0.6);
}
.hx-coin-front i{ width:34px; height:34px; transform:rotate(45deg); border:2px solid var(--acc-trust-lite); }
.hx-coin-front b{ font-weight:600; font-size:clamp(22px,3vw,30px); letter-spacing:0.14em; line-height:1.15; }
.hx-coin-front small{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em; color:var(--acc-trust-lite); }
.hx-coin-back{
transform:rotateY(180deg) translateZ(6px); gap:10px;
background:radial-gradient(circle at 65% 30%,var(--navy-600),var(--navy-950) 70%);
box-shadow:inset 0 0 0 14px var(--navy-900), inset 0 0 0 15px rgba(179,169,255,0.6);
font-family:var(--font-mono); font-size:12px; letter-spacing:0.1em; line-height:2;
color:var(--text-on-dark-dim);
}
.hx-coin-rim{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--hair-strong); transform:translateZ(0); }
@media (prefers-reduced-motion: reduce){ .hx-coin-spin{ animation:none; } }
/* ------------------------------------------------ Managed AI diagram --- */
.hx-plane{ display:flex; flex-direction:column; align-items:stretch; }
.hx-plane-row{ display:grid; gap:10px; }
.hx-plane-row.in4{ grid-template-columns:repeat(4,1fr); }
.hx-plane-row.in5{ grid-template-columns:repeat(5,1fr); gap:8px; }
.hx-plane-node{
padding:14px 8px; text-align:center; border-radius:12px;
border:1px solid var(--hair-on-navy-mid); background:rgba(255,255,255,0.04);
font-size:14px; color:var(--white);
}
.hx-wires{ display:grid; }
.hx-wires.in4{ grid-template-columns:repeat(4,1fr); }
.hx-wires.in5{ grid-template-columns:repeat(5,1fr); }
.hx-wires > span{ display:flex; justify-content:center; }
.hx-wires > span::before{
content:''; width:1px; height:48px;
background-image:linear-gradient(var(--acc-ai-lite) 50%, transparent 50%);
background-size:1px 12px; animation:hx-dash 1s linear infinite;
}
.hx-wires.trust > span::before{ background-image:linear-gradient(var(--acc-trust-lite) 50%, transparent 50%); }
.hx-plane-bar{
position:relative; padding:30px 28px; border-radius:var(--radius-md);
border:1px solid var(--hair-on-navy-strong);
background:linear-gradient(90deg,var(--navy-700),var(--navy-500),var(--navy-700),var(--navy-500),var(--navy-700));
background-size:200% 100%; animation:hx-sweep 6s linear infinite;
display:flex; align-items:center; justify-content:space-between; gap:16px;
box-shadow:0 30px 80px -34px rgba(99,73,193,0.55);
}
.hx-plane-bar small{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--text-on-dark-muted); }
.hx-plane-bar b{ display:block; margin-top:6px; font-weight:600; font-size:22px; letter-spacing:-0.01em; color:var(--white); }
.hx-plane-dots{ display:flex; gap:6px; flex:none; }
.hx-plane-dots i{ width:8px; height:8px; border-radius:50%; animation:hx-pulse 2s ease-in-out infinite; }
.hx-plane-dots i:nth-child(1){ background:var(--acc-ai-lite); }
.hx-plane-dots i:nth-child(2){ background:var(--acc-sec-lite); animation-delay:.4s; }
.hx-plane-dots i:nth-child(3){ background:var(--acc-trust-lite); animation-delay:.8s; }
.hx-plane-metric{
padding:12px 4px; text-align:center; border-radius:10px;
border:1px solid rgba(45,216,211,0.32); color:var(--acc-trust-lite);
font-family:var(--font-mono); font-size:12px;
}
@media (prefers-reduced-motion: reduce){
.hx-plane-bar, .hx-wires > span::before, .hx-plane-dots i{ animation:none; }
}
@media (max-width:620px){
.hx-plane-row.in5{ grid-template-columns:repeat(3,1fr); }
.hx-wires.in5{ grid-template-columns:repeat(3,1fr); }
.hx-wires.in5 > span:nth-child(n+4){ display:none; }
}
/* --------------------------------------------------------- Products --- */
.hx-prod-grid{
margin-top:36px; display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:20px;
}
.hx-prod{ border-radius:var(--radius-xl); }
.hx-prod .hx-card-media{ aspect-ratio:16/9; }
.hx-prod .hx-card-media img{ filter:saturate(.72) brightness(.95); transform:none; }
.hx-prod .hx-card-media::after{ background:linear-gradient(180deg,rgba(255,255,255,0.08),var(--white) 97%); }
.hx-prod-tag{
position:absolute; left:28px; bottom:20px; z-index:2;
padding:6px 12px; border-radius:999px; background:rgba(11,27,53,0.72);
border:1px solid var(--hair-on-navy-strong);
font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--white);
}
.hx-prod-body{ padding:16px 32px 36px; }
.hx-prod-name{ font-weight:600; font-size:15px; }
.hx-prod-body h3{ margin:8px 0 0; font-size:clamp(26px,2.6vw,36px); letter-spacing:-0.03em; line-height:1.1; }
.hx-prod-body > p{ margin:16px 0 0; font-size:16px; line-height:1.6; color:var(--text-on-light-dim); }
.hx-prod-points{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.hx-prod-points li{ display:flex; gap:12px; font-size:14.5px; line-height:1.5; color:var(--text-on-light-dim); }
.hx-prod-points li::before{ content:''; flex:none; margin-top:8px; width:5px; height:5px; transform:rotate(45deg); background:currentColor; }
.hx-prod.hx-sec .hx-prod-name, .hx-prod.hx-sec .hx-prod-points li::before{ color:var(--acc-sec); }
.hx-prod.hx-ai .hx-prod-name, .hx-prod.hx-ai .hx-prod-points li::before{ color:var(--acc-ai); }
/* ------------------------------------------------------ Why Avisha --- */
.hx-why{
margin-top:64px; display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:48px 56px;
}
.hx-why-item{ display:flex; flex-direction:column; gap:12px; padding-top:24px; border-top:1px solid var(--hair-mid); }
.hx-why-item i{ font-family:var(--font-mono); font-size:12px; font-style:normal; color:var(--text-on-light-faint); }
.hx-why-item h3{ font-size:21px; letter-spacing:-0.015em; }
.hx-why-item p{ font-size:15px; line-height:1.6; color:var(--text-on-light-dim); }
/* ----------------------------------------------------- Closing panel --- */
.cta-band.hx-cta{ padding:clamp(56px,8vw,110px) clamp(28px,6vw,80px); display:block; }
.cta-band.hx-cta h2{ font-size:clamp(40px,5.6vw,80px); line-height:1; letter-spacing:-0.045em; max-width:720px; }
.cta-band.hx-cta p{ font-size:19px; line-height:1.55; max-width:620px; margin-top:24px; }
.cta-band.hx-cta .btn-row{ margin-top:40px; }
/* ------------------------------------------------------------ Reveal --- */
/* The handoff's numbers: 32px, 1s, 12% visible, 90-240ms stagger. */
.reveal{ transform:translateY(32px); transition-duration:1s; }
.reveal-delay-1.in{ transition-delay:90ms; }
.reveal-delay-2.in{ transition-delay:120ms; }
.reveal-delay-3.in{ transition-delay:150ms; }
.reveal-delay-4.in{ transition-delay:180ms; }
.reveal-delay-5.in{ transition-delay:210ms; }
.reveal-delay-6.in{ transition-delay:240ms; }
.reveal-line{ transform:scaleX(0); transform-origin:left center; transition:transform 1.6s var(--ease); }
.reveal-line.in{ transform:scaleX(1); }
@media (prefers-reduced-motion: reduce){ .reveal-line{ transform:none; transition:none; } }
/* ==========================================================================
AG BRAIN — product page components (prefix: ag-)
The page argues in one line: your systems already hold the answer, nobody
can see across them, so here is the layer that can. The diagram carries
that argument, so it is built from real elements rather than an image —
it stays sharp, it reads on a phone, and a screen reader gets the words.
========================================================================== */
/* ------------------------------------------------- the three-stage flow --- */
.ag-flow{
background:var(--navy-800); border:1px solid var(--hair-on-navy-mid);
border-radius:var(--radius-xl); padding:26px 24px 28px; color:var(--text-on-dark);
}
.ag-flow-label{
font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
color:var(--text-on-dark-faint); display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.ag-flow-label b{ color:var(--acc-trust-lite); font-weight:400; }
.ag-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.ag-chips span{
padding:6px 11px; border-radius:7px; border:1px solid var(--hair-on-navy-mid);
background:rgba(255,255,255,0.04); font-size:13px; color:var(--text-on-dark-dim); white-space:nowrap;
}
.ag-flow-arrow{
margin:18px 0 16px; display:flex; align-items:center; gap:12px;
font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
color:var(--text-on-dark-faint);
}
.ag-flow-arrow::before, .ag-flow-arrow::after{ content:''; height:1px; flex:1; background:var(--hair-on-navy-mid); }
.ag-brain-core{
position:relative; overflow:hidden;
border-radius:var(--radius-md); padding:22px 24px;
border:1px solid rgba(45,216,211,0.34);
background:linear-gradient(135deg,var(--navy-600),var(--navy-700));
}
.ag-brain-core::after{
content:''; position:absolute; right:-70px; top:-90px; width:230px; height:230px; border-radius:50%;
background:radial-gradient(circle,rgba(45,216,211,0.3),transparent 66%); pointer-events:none;
}
.ag-brain-core > *{ position:relative; }
.ag-brain-core em{
font-style:normal; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
text-transform:uppercase; color:var(--acc-trust-lite);
}
.ag-brain-core strong{ display:block; margin-top:8px; font-size:20px; font-weight:500; letter-spacing:-0.02em; color:var(--white); }
.ag-brain-core p{ margin-top:8px; font-size:13.5px; color:var(--text-on-dark-muted); }
.ag-flow-out{ display:flex; flex-wrap:wrap; gap:7px; }
.ag-flow-out span{
padding:7px 12px; border-radius:7px; font-size:13px; color:var(--acc-trust-lite);
border:1px solid rgba(45,216,211,0.3); background:rgba(45,216,211,0.07); white-space:nowrap;
}
.ag-flow-foot{
margin-top:20px; padding-top:16px; border-top:1px solid var(--hair-on-navy);
display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px;
font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
color:var(--text-on-dark-faint);
}
/* ------------------------------------------------------ problem quotes --- */
.ag-quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr)); gap:20px; }
.ag-quote{
padding:30px 30px 26px; border-radius:var(--radius-lg);
border:1px solid var(--hair-mid); background:var(--white);
display:flex; flex-direction:column; gap:16px;
}
.ag-quote blockquote{
margin:0; font-size:19px; line-height:1.45; font-weight:300; letter-spacing:-0.015em;
color:var(--text-on-light); text-wrap:pretty;
}
.ag-quote cite{
font-style:normal; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
text-transform:uppercase; color:var(--text-on-light-faint);
}
.ag-quote .ag-cost{
margin-top:auto; padding-top:16px; border-top:1px solid var(--hair);
display:flex; gap:10px; align-items:baseline; font-size:14.5px; color:var(--text-on-light-dim);
}
.ag-quote .ag-cost::before{ content:'→'; color:var(--acc-sec); flex:none; }
/* ----------------------------------------------------- the anti-pitch --- */
.ag-versus{ display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:stretch; }
.ag-versus-col{
padding:30px 32px; border-radius:var(--radius-lg);
border:1px solid var(--hair-on-navy-mid); background:rgba(255,255,255,0.03);
}
.ag-versus-col.ours{ border-color:rgba(45,216,211,0.34); background:rgba(45,216,211,0.06); }
.ag-versus-col em{
font-style:normal; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
text-transform:uppercase; color:var(--text-on-dark-faint);
}
.ag-versus-col.ours em{ color:var(--acc-trust-lite); }
.ag-versus-col h3{ margin:14px 0 14px; font-size:22px; color:var(--white); }
.ag-versus-col p{ font-size:15px; line-height:1.6; color:var(--text-on-dark-body); }
.ag-versus-rule{
display:flex; flex-direction:column; align-items:center; gap:14px;
font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--text-on-dark-faint); white-space:nowrap;
}
.ag-versus-rule::before, .ag-versus-rule::after{ content:''; width:1px; flex:1; background:var(--hair-on-navy-mid); }
@media (max-width:900px){
.ag-versus{ grid-template-columns:1fr; gap:16px; }
.ag-versus-rule{ flex-direction:row; gap:12px; }
.ag-versus-rule::before, .ag-versus-rule::after{ width:auto; height:1px; flex:1; }
}
/* ------------------------------------------------------ sector stories --- */
.ag-cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:20px; }
.ag-case{
border-radius:var(--radius-xl); overflow:hidden; background:var(--white);
border:1px solid var(--hair-mid); display:flex; flex-direction:column;
transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ag-case:hover{ border-color:var(--hair-strong); box-shadow:var(--shadow-soft); }
.ag-case-media{ position:relative; aspect-ratio:16/7; overflow:hidden; }
.ag-case-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.6) brightness(.82); }
/* The sector label sits on a photograph, so the plate under it has to hold up
whatever the image does there. At 0.86 the darkest point composites to
about rgb(47,61,83) even over a white patch, leaving the label above 10:1. */
.ag-case-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,27,53,0.10) 40%,rgba(11,27,53,0.86)); }
.ag-case-sector{
position:absolute; left:24px; bottom:18px; z-index:2;
font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--white);
}
.ag-case-sector small{ display:block; margin-top:5px; font-size:11px; letter-spacing:0.04em; text-transform:none; color:rgba(255,255,255,0.86); }
.ag-case-body{ padding:26px 30px 30px; display:flex; flex-direction:column; gap:18px; flex:1; }
.ag-case-block em{
font-style:normal; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
text-transform:uppercase; color:var(--text-on-light-faint); display:block; margin-bottom:8px;
}
.ag-case-block p{ font-size:15px; line-height:1.6; color:var(--text-on-light-dim); }
.ag-case-block.lead p{ font-size:17px; line-height:1.5; color:var(--text-on-light); }
.ag-case q{
margin-top:auto; padding-top:18px; border-top:1px solid var(--hair);
display:block; font-size:16px; font-weight:300; font-style:italic; color:var(--text-on-light); quotes:none;
}
.ag-case q::before, .ag-case q::after{ content:'"'; }
/* ---------------------------------------------- the ten-day engagement --- */
.ag-days{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:1px; background:var(--hair-on-navy-mid); border:1px solid var(--hair-on-navy-mid); border-radius:var(--radius-md); overflow:hidden; }
.ag-day{ background:var(--navy-900); padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; }
.ag-day em{
font-style:normal; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
text-transform:uppercase; color:var(--acc-trust-lite);
}
.ag-day h4, .ag-day .h4{ font-size:17px; color:var(--white); }
.ag-day p{ font-size:14px; line-height:1.55; color:var(--text-on-dark-muted); }
.ag-takeaways{ margin-top:22px; display:flex; flex-direction:column; }
.ag-takeaway{
display:flex; gap:16px; align-items:flex-start;
padding:18px 2px; border-bottom:1px solid var(--hair-on-navy);
font-size:15.5px; line-height:1.55; color:var(--text-on-dark-body);
}
.ag-takeaway:last-child{ border-bottom:none; }
.ag-takeaway i{
font-style:normal; flex:none; width:22px; font-family:var(--font-mono); font-size:11px;
color:var(--text-on-dark-faint); padding-top:4px;
}
.ag-takeaway b{ color:var(--white); font-weight:500; }
/* ---------------------------------------------------- connected systems --- */
/* Shared hairline spec table — the systems AG Brain reads, the curriculum
Study24by7 covers. One rule, two names, because they are the same object. */
.ag-systems, .spec-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:1px; background:var(--hair-mid); border:1px solid var(--hair-mid); border-radius:var(--radius-md); overflow:hidden; }
.ag-system, .spec-item{ background:var(--white); padding:22px 20px; display:flex; flex-direction:column; gap:6px; transition:background .3s var(--ease); }
.ag-system:hover, .spec-item:hover{ background:var(--paper-050); }
.ag-system b, .spec-item b{ font-size:15px; font-weight:500; color:var(--text-on-light); }
.ag-system span, .spec-item span{ font-size:13px; line-height:1.5; color:var(--text-on-light-faint); }
.surface-tint .spec-item{ background:var(--paper-000); }
.surface-tint .spec-item:hover{ background:var(--paper-100); }
/* ------------------------------------------------------ governance row --- */
.ag-gov{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:40px 48px; }
.ag-gov-item{ display:flex; flex-direction:column; gap:10px; padding-top:22px; border-top:1px solid var(--hair-on-navy-mid); }
.ag-gov-item em{
font-style:normal; font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em;
text-transform:uppercase; color:var(--acc-trust-lite);
}
.ag-gov-item h4, .ag-gov-item .h4{ font-size:18px; color:var(--white); }
.ag-gov-item p{ font-size:14.5px; line-height:1.6; color:var(--text-on-dark-muted); }
/* --------------------------------------------------- sector sizing model --- */
/* A worked example, not a client result: assumptions on top, the arithmetic in
the middle, the figure at the bottom. Laid out as a definition list because
that is what it is — each line is a claim and the basis for it, and a screen
reader should read them as a pair. */
.ag-size{
margin-top:auto; border:1px solid var(--hair-mid); border-radius:var(--radius-md);
background:var(--paper-050); padding:20px 22px 18px;
}
.ag-size em{
font-style:normal; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
text-transform:uppercase; color:var(--acc-sec); display:block;
}
.ag-size-basis{ margin-top:10px; font-size:13.5px; line-height:1.55; color:var(--text-on-light-faint); }
.ag-size dl{ margin:16px 0 0; display:flex; flex-direction:column; }
.ag-size dl > div{
display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline;
justify-content:space-between; padding:11px 0; border-top:1px solid var(--hair);
}
.ag-size dt{ font-size:14px; line-height:1.45; color:var(--text-on-light-dim); flex:1 1 200px; min-width:0; }
.ag-size dd{ margin:0; display:flex; align-items:baseline; gap:12px; flex:none; }
.ag-size dd span{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-on-light-faint); white-space:nowrap; }
.ag-size dd b{ font-size:15px; font-weight:500; color:var(--text-on-light); white-space:nowrap; min-width:62px; text-align:right; }
.ag-size-total{
margin-top:4px; padding:14px 0 0; border-top:1.5px solid var(--navy-900);
display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; justify-content:space-between;
}
.ag-size-total span{
font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
color:var(--text-on-light-dim);
}
.ag-size-total b{ font-size:21px; font-weight:500; letter-spacing:-0.02em; color:var(--navy-900); }
.ag-size-note{ margin-top:14px; font-size:13.5px; line-height:1.6; color:var(--text-on-light-faint); }
/* Model and component identifiers — set in the mono face so VIDYA-Core reads as
a name rather than as a heading that happens to be hyphenated. */
.mono-name{ font-family:var(--font-mono); font-size:15px; letter-spacing:0.01em; }
.metric-card h3, .metric-card .h4{ color:var(--white); margin:14px 0 8px; }
.metric-card p{ font-size:0.9rem; color:var(--text-on-dark-dim); line-height:1.6; }
.metric-card .icon-tile{ margin-bottom:0; }
/* ------------------------------------------------------ product screenshot --- */
/* A real screen from the product, not a redrawn mock. The caption carries the
same "demonstration data" note the product itself shows, because these are
seeded demo accounts rather than a real school's numbers. */
.shot{ margin:0; }
.shot picture{ display:block; }
.shot img{
width:100%; height:auto; display:block; background:var(--white);
border-radius:var(--radius-md); border:1px solid var(--hair-mid);
box-shadow:var(--shadow-soft);
}
.shot figcaption{
margin-top:14px; font-family:var(--font-mono); font-size:11px;
letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-light-faint);
}
.surface-dark .shot img, .surface-darker .shot img{ border-color:var(--hair-on-navy-mid); box-shadow:var(--shadow-strong); }
.surface-dark .shot figcaption, .surface-darker .shot figcaption{ color:var(--text-on-dark-faint); }
.shot-pair{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:24px; align-items:start; }
/* ==========================================================================
Pricing — plan cards and the comparison table
========================================================================== */
.plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:20px; align-items:stretch; }
.plan{
display:flex; flex-direction:column; padding:32px 30px 34px;
border-radius:var(--radius-lg); border:1px solid var(--hair-mid); background:var(--white);
transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover{ border-color:var(--hair-strong); box-shadow:var(--shadow-soft); }
.plan.featured{ border-color:var(--acc-sec); box-shadow:var(--shadow-soft); }
.plan-tag{
display:inline-flex; align-self:flex-start; padding:5px 11px; border-radius:999px;
background:var(--acc-sec); color:var(--white);
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
margin-bottom:16px;
}
.plan h3{ font-size:22px; }
.plan-price{ margin-top:18px; display:flex; align-items:baseline; gap:8px; }
.plan-price b{ font-size:44px; font-weight:500; letter-spacing:-.03em; color:var(--navy-900); line-height:1; }
.plan-price span{ font-size:15px; color:var(--text-on-light-faint); }
.plan-note{ margin-top:10px; font-size:14px; color:var(--text-on-light-dim); }
.plan-gst{ margin-top:4px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-on-light-faint); }
.plan .btn{ margin-top:26px; width:100%; }
.plan-list{ margin-top:26px; padding-top:22px; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:10px; }
.plan-list li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.5; color:var(--text-on-light-dim); }
.plan-list li svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--acc-trust); }
/* Comparison table. On a phone it scrolls sideways inside its own box rather
than widening the page, and the feature column stays put so a row never
loses its label. */
.cmp-wrap{ margin-top:48px; overflow-x:auto; border:1px solid var(--hair-mid); border-radius:var(--radius-md); background:var(--white); }
.cmp{ width:100%; min-width:640px; border-collapse:collapse; font-size:14.5px; }
.cmp th, .cmp td{ padding:13px 18px; text-align:left; border-bottom:1px solid var(--hair); }
.cmp thead th{
position:sticky; top:0; background:var(--paper-050); color:var(--text-on-light);
font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; font-weight:400;
border-bottom:1px solid var(--hair-mid);
}
.cmp tbody th{
font-weight:400; color:var(--text-on-light);
position:sticky; left:0; background:var(--white); min-width:220px;
}
.cmp td{ text-align:center; color:var(--text-on-light-dim); white-space:nowrap; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td{ border-bottom:none; }
.cmp tbody tr:hover th, .cmp tbody tr:hover td{ background:var(--paper-050); }
.cmp .yes{ color:var(--acc-trust); }
.cmp .no{ color:var(--text-on-light-faint); }
.cmp .yes svg{ width:17px; height:17px; vertical-align:-3px; }
/* Visible to assistive tech only — used for table captions and for the words
behind the tick marks in the pricing matrix, which would otherwise read as
an unlabelled column of icons. */
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* List price and the saving. The struck price is deliberately quiet — it is
context for the number above it, not a second price competing with it. */
.plan-was{ margin-top:8px; display:flex; align-items:center; gap:10px; }
.plan-was s{ font-size:15px; color:var(--text-on-light-faint); text-decoration-thickness:1px; }
.plan-was em{
font-style:normal; font-family:var(--font-mono); font-size:10.5px;
letter-spacing:.09em; text-transform:uppercase;
color:var(--acc-trust); border:1px solid var(--acc-trust);
padding:3px 8px; border-radius:999px;
}