/* =====================================================================
   Vinthra — styles
   Direction (ui-ux-pro-max design system): Swiss-minimal layout with
   bento-style card grids · trust blue + orange accent · light & dark.
   Type: Space Grotesk (display) + DM Sans (body), self-hosted.
   Screen-aware: <html data-screen="xs|sm|md|lg|xl|xxl" data-input="mouse|touch">
   is set before first paint (see <head>); layout also uses media queries
   so it still works without JavaScript.
   Alignment: everything sits on one page column (.wrap), including the floating
   nav. Cards share --gap and --card-pad, and cards side by side share their rows
   through subgrid, so their titles, text and footers stay on the same lines.
   ===================================================================== */

/* ---------- Fonts: served from /fonts — no requests to Google ---------- */
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/space-grotesk-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:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/space-grotesk-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:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/dm-sans-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:'DM Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/dm-sans-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;
}

/* ---------- Design tokens ---------- */
:root{
  --font-display:'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Content fills the screen width; only this side gap (shared with the nav) is left empty.
     16px on small phones → ~4vw → 72px on very wide screens. */
  --gutter:clamp(16px, 4vw, 72px);
  --content:100%;                      /* fills the full width of the screen */
  --gap:clamp(12px, 2vw, 24px);        /* between cards, the same in every grid */
  --card-pad:clamp(18px, 2.6vw, 32px); /* inside cards, so text in stacked cards shares one left edge */
  --nav-h:68px;
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:22px;
  --ease:cubic-bezier(.2, .8, .2, 1);
  --dur:200ms;
}

/* Light theme */
:root,
[data-theme="light"]{
  color-scheme:light;
  --bg:#F8FAFC;
  --band:#F1F5F9;
  --surface:#FFFFFF;
  --surface-2:#F4F7FB;
  --text:#0F172A;
  --text-body:#1E293B;
  --text-muted:#475569;
  --border:#E2E8F0;
  --border-strong:#CBD5E1;

  --primary:#2563EB;          /* white text on it: 5.2:1 */
  --primary-hover:#1D4ED8;
  --on-primary:#FFFFFF;
  --primary-text:#1D4ED8;     /* blue text on light surfaces: 6.7:1 */
  --primary-soft:#DBEAFE;
  --primary-softer:#EFF6FF;

  --accent:#EA580C;
  --accent-text:#C2410C;
  --accent-soft:#FFEDD5;
  --green:#047857;
  --green-soft:#D1FAE5;
  --violet:#6D28D9;
  --violet-soft:#EDE9FE;

  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 14px 34px -18px rgba(15,23,42,.22);
  --shadow-lg:0 2px 6px rgba(15,23,42,.05), 0 28px 60px -26px rgba(15,23,42,.34);
  --grid-line:rgba(15,23,42,.055);
  --nav-bg:rgba(248,250,252,.84);
  --nav-active-color:#1D4ED8;
  --nav-active-bg:#DBEAFE;
  --nav-active-border:rgba(37,99,235,.28);
  --nav-active-shadow:0 2px 8px -2px rgba(37,99,235,.22);
}

/* Dark theme */
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0F1C;
  --band:#0D1424;
  --surface:#111A2E;
  --surface-2:#16213A;
  --text:#F8FAFC;
  --text-body:#CBD5E1;
  --text-muted:#94A3B8;       /* on surface: 6.7:1 */
  --border:#1F2A44;
  --border-strong:#2E3C5E;

  --primary:#2563EB;
  --primary-hover:#1D4ED8;
  --on-primary:#FFFFFF;
  --primary-text:#60A5FA;
  --primary-soft:rgba(59,130,246,.16);
  --primary-softer:rgba(59,130,246,.08);

  --accent:#FB923C;
  --accent-text:#FDBA74;
  --accent-soft:rgba(251,146,60,.15);
  --green:#34D399;
  --green-soft:rgba(52,211,153,.14);
  --violet:#A78BFA;
  --violet-soft:rgba(167,139,250,.16);

  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 18px 40px -22px rgba(0,0,0,.7);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 32px 70px -30px rgba(0,0,0,.85);
  --grid-line:rgba(148,163,184,.07);
  --nav-bg:rgba(10,15,28,.8);
  --nav-active-color:#93C5FD;
  --nav-active-bg:rgba(37,99,235,.24);
  --nav-active-border:rgba(96,165,250,.38);
  --nav-active-shadow:0 0 16px -2px rgba(59,130,246,.45);
}

/* Colour tones shared by icons and cards */
.tone-blue  {--tone:var(--primary-text); --tone-soft:var(--primary-soft);}
.tone-orange{--tone:var(--accent-text);  --tone-soft:var(--accent-soft);}
.tone-green {--tone:var(--green);        --tone-soft:var(--green-soft);}
.tone-violet{--tone:var(--violet);       --tone-soft:var(--violet-soft);}

/* ---------- Screen-size scaling ---------- */
@media (min-width:1440px){ :root{--nav-h:72px;} html{font-size:106.25%;} }  /* 17px */
@media (min-width:1920px){ html{font-size:112.5%;} }                         /* 18px */
@media (min-width:2400px){ html{font-size:125%;} }                           /* 20px on 1440p/4K monitors */
@media (max-height:520px) and (orientation:landscape){ :root{--nav-h:60px;} }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top) + 12px);
}
body{
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--text-body);
  font-family:var(--font-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; font-synthesis:none;
  transition:background-color .3s ease, color .3s ease;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--text); margin:0; font-weight:700; line-height:1.15; letter-spacing:-0.02em; text-wrap:balance;}
p{margin:0; text-wrap:pretty;}
ul,ol{margin:0; padding:0; list-style:none;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit;}
svg{width:1em; height:1em; flex:none;}
img,svg,video{max-width:100%;}
:focus-visible{outline:2px solid var(--primary-text); outline-offset:3px; border-radius:8px;}
#main:focus{outline:none;}
#main:focus-visible{outline:2px solid var(--primary-text); outline-offset:-4px;}

.skip-link{
  position:absolute; left:12px; top:-120px; z-index:300;
  background:var(--primary); color:var(--on-primary); font-weight:600;
  padding:12px 18px; border-radius:var(--radius-sm);
}
.skip-link:focus{top:12px;}

.wrap{
  width:100%; max-width:calc(var(--content) + 2 * var(--gutter)); margin-inline:auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

/* ---------- Shared bits ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  font-family:var(--font-display); font-size:.8125rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary-text); background:var(--primary-softer); border:1px solid var(--primary-soft);
  padding:6px 12px; border-radius:999px;
}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);}

.section{position:relative; padding:clamp(72px, 9vw, 128px) 0;}
.section-band{background:var(--band); border-block:1px solid var(--border);}
.section-head{max-width:740px; margin-bottom:clamp(36px, 5vw, 60px);}
@media (min-width:1440px){ .section-head{max-width:900px;} }
.section-head h2{font-size:clamp(2rem, 1.35rem + 2.6vw, 3.25rem); line-height:1.06; letter-spacing:-0.035em;}
.section-head p:not(.eyebrow){margin-top:16px; max-width:62ch; color:var(--text-muted); font-size:clamp(1.02rem, .98rem + .25vw, 1.15rem);}
.subhead{font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); letter-spacing:-0.02em; margin-bottom:24px;}
.label{font-family:var(--font-display); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary-text);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border-radius:12px; border:1px solid transparent;
  font-family:var(--font-display); font-size:.95rem; font-weight:600; line-height:1; letter-spacing:-0.005em;
  white-space:nowrap; cursor:pointer; text-align:center;
  transition:background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease);
}
.btn svg{width:18px; height:18px; transition:transform var(--dur) var(--ease);}
.btn:active{transform:translateY(1px) scale(.99);}
.btn-sm{padding:0 16px; font-size:.875rem;} /* keeps .btn's 44px height and radius, matching the icon buttons beside it */
.btn-lg{min-height:52px; padding:0 26px; font-size:1rem;}
.btn-primary{
  background:var(--primary); color:var(--on-primary);
  box-shadow:0 1px 2px rgba(15,23,42,.12), 0 10px 22px -10px rgba(37,99,235,.7);
}
.btn-primary:hover{background:var(--primary-hover);}
.btn-secondary{background:var(--surface); color:var(--text); border-color:var(--border-strong);}
.btn-secondary:hover{background:var(--surface-2); border-color:var(--text-muted);}
.btn-light{background:#FFFFFF; color:#1D4ED8;}
.btn-light:hover{background:#EFF6FF;}
.btn-ghost-light{color:#FFFFFF; border-color:rgba(255,255,255,.6);}
.btn-ghost-light:hover{background:rgba(255,255,255,.12); border-color:#FFFFFF;}
[data-input="mouse"] .btn:hover svg{transform:translateX(3px);}
/* touch screens (detected by the screen profile): every tap target at least 44px */
[data-input="touch"] .nav-links ul a,
[data-input="touch"] .foot-links a{min-height:44px;}

.icon-btn{
  display:inline-grid; place-items:center; width:44px; height:44px; flex:none;
  border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text);
  cursor:pointer; transition:background-color var(--dur) ease, border-color var(--dur) ease;
}
.icon-btn:hover{background:var(--surface-2); border-color:var(--border-strong);}
.icon-btn svg{width:20px; height:20px;}

/* ---------- Navigation (vinthra.vercel.app pill shape) ---------- */
.icon-sprite{position:absolute; width:0; height:0; overflow:hidden;}
body{padding-top:calc(var(--nav-h) + env(safe-area-inset-top));}

.site-nav{
  position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:100;
  width:100%; max-width:100%;
  padding-top:env(safe-area-inset-top);
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-radius:0;
  border:1.4px solid transparent; border-bottom-color:var(--border);
  box-shadow:none;
  transition:top .35s var(--ease), width .35s var(--ease), max-width .35s var(--ease),
             border-radius .35s ease, border-color .35s ease, box-shadow .35s ease, background-color .3s ease;
}

/* Floating pill state from vinthra.vercel.app when scrolling */
.site-nav.scrolled, .site-nav.pill{
  top:calc(16px + env(safe-area-inset-top));
  width:calc(100% - 32px);
  max-width:1120px;
  border-radius:100px;
  border-color:var(--border);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.45);
}

.nav-inner{
  display:flex; align-items:center; gap:16px; height:var(--nav-h);
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right));
  margin:0 auto;
  max-width:calc(var(--content) + 2 * var(--gutter));
  width:100%;
  box-sizing:border-box;
  transition:padding .35s var(--ease), height .35s var(--ease), max-width .35s var(--ease);
}

.site-nav.scrolled .nav-inner, .site-nav.pill .nav-inner{
  max-width:1120px;
  padding-left:20px;
  padding-right:18px;
  height:calc(var(--nav-h) - 4px);
}

@media (min-width:1024px){
  .nav-inner{display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center;}
  .brand{justify-self:start;}
  .nav-links{margin:0; justify-self:center;}
  .nav-actions{justify-self:end; margin-left:0;}
}

.brand{display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--text); text-decoration:none; flex:none;}
.brand-mark{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none;
  background:linear-gradient(140deg, #3B82F6, #1D4ED8); color:#FFFFFF;
  box-shadow:0 8px 18px -8px rgba(37,99,235,.75);
}
.brand-mark svg{width:24px; height:24px; fill:currentColor;}
.brand-name{font-family:var(--font-display); font-size:1.3rem; font-weight:700; letter-spacing:-0.035em;}

.nav-links{margin-inline:auto;}
.nav-links ul{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0;}
.nav-links ul a{
  position:relative;
  display:inline-flex; align-items:center; min-height:40px; padding:0 15px; border-radius:999px;
  font-size:.95rem; font-weight:500; color:var(--text-muted); text-decoration:none;
  transition:color var(--dur) ease, background-color var(--dur) ease, box-shadow var(--dur) ease;
}
.nav-links ul a:hover{color:var(--text); background:var(--surface-2);}
.nav-links ul a.is-active,
.nav-links ul a.is-active:hover{
  color:var(--nav-active-color);
  font-weight:600;
  background:var(--nav-active-bg);
  box-shadow:inset 0 0 0 1px var(--nav-active-border), var(--nav-active-shadow);
}
.nav-menu-cta{display:none;}
.nav-actions{display:flex; align-items:center; gap:8px; margin-left:auto; flex:none;}

.site-nav.scrolled .icon-btn, .site-nav.scrolled .nav-cta,
.site-nav.pill .icon-btn, .site-nav.pill .nav-cta{
  border-radius:999px;
}

.theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

.nav-toggle .bars{display:grid; gap:4px; width:18px;}
.nav-toggle .bars span{display:block; height:2px; border-radius:2px; background:currentColor; transition:transform .25s var(--ease), opacity .2s ease;}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:1023.98px){
  .nav-inner{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .site-nav.scrolled .nav-inner, .site-nav.pill .nav-inner{
    padding-left:16px;
    padding-right:12px;
  }
  .nav-links{
    position:absolute; left:0; right:0; top:calc(100% + 8px); margin:0;
    background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg);
    padding:8px 16px 18px;
    max-height:calc(100vh - var(--nav-h) - 32px);
    max-height:calc(var(--app-height, 100vh) - var(--nav-h) - 32px);
    overflow-y:auto; overscroll-behavior:contain;
    opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none;
    transition:opacity .2s ease, transform .25s var(--ease), visibility 0s linear .25s;
  }
  .nav-links.open{
    opacity:1; transform:none; visibility:visible; pointer-events:auto;
    transition:opacity .2s ease, transform .25s var(--ease), visibility 0s;
  }
  .nav-links ul{flex-direction:column; align-items:stretch; gap:2px;}
  .nav-links ul li + li{border-top:1px solid var(--border);}
  .nav-links ul a{
    min-height:52px; padding:0 12px; border-radius:10px; font-size:1.05rem; color:var(--text);
    transition:color var(--dur) ease, background-color var(--dur) ease, box-shadow var(--dur) ease, padding-left var(--dur) ease;
  }
  .nav-links ul a:hover{background:var(--surface-2); color:var(--text);}
  .nav-links ul a.is-active,
  .nav-links ul a.is-active:hover{
    color:var(--nav-active-color);
    font-weight:600;
    background:var(--nav-active-bg);
    padding-left:16px;
    box-shadow:inset 3.5px 0 0 0 var(--nav-active-color), var(--nav-active-shadow);
  }
  .nav-menu-cta{display:flex; width:100%; min-height:50px; margin-top:14px;}
}
@media (min-width:1024px){ .nav-toggle{display:none;} }
@media (max-width:767.98px){ .nav-cta{display:none;} }
@media (max-width:359.98px){
  .brand-name{font-size:1.15rem;}
  .brand-mark{width:32px; height:32px;}
  .nav-actions{gap:6px;}
}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; isolation:isolate; padding:clamp(40px, 7vw, 104px) 0 clamp(56px, 8vw, 120px);}
.hero::before, .hero::after{content:""; position:absolute; z-index:-1; border-radius:50%; pointer-events:none;}
.hero::before{
  width:min(720px, 90vw); aspect-ratio:1; top:-22%; right:-18%;
  background:radial-gradient(circle, color-mix(in srgb, var(--primary) 26%, transparent), transparent 66%);
}
.hero::after{
  width:min(520px, 80vw); aspect-ratio:1; bottom:-6%; left:-16%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 66%);
}
.hero-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px; background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 75%);
          mask-image:radial-gradient(ellipse 75% 65% at 50% 35%, #000 25%, transparent 75%);
}
.hero-grid{display:grid; gap:clamp(36px, 6vw, 96px); align-items:center;}
@media (min-width:1024px){ .hero-grid{grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);} }
/* Desktop / laptop: the hero fills the first screen (height read by the screen profile) */
@media (min-width:1024px) and (min-height:640px){
  .hero{
    display:flex; align-items:center;
    min-height:calc(100vh - var(--nav-h));
    min-height:calc(var(--app-height, 100vh) - var(--nav-h));
    padding:clamp(32px, 4vw, 64px) 0;
  }
  .hero-grid{width:100%;}
}

.hero h1{font-size:clamp(2.5rem, 1.55rem + 4.5vw, 5.75rem); line-height:1.02; letter-spacing:-0.045em;}
.hero h1 .hl{position:relative; color:var(--primary-text);}
.hero h1 .hl::after{
  content:""; position:absolute; z-index:-1; left:.02em; right:.06em; bottom:.06em; height:.14em;
  border-radius:99px; background:var(--accent); opacity:.8;
}
.hero-sub{margin-top:22px; max-width:58ch; color:var(--text-muted); font-size:clamp(1.05rem, 1rem + .35vw, 1.2rem);}
.hero-sub strong{color:var(--text); font-weight:700;}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
.hero-tags{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:32px;}
.hero-tags li{display:inline-flex; align-items:center; gap:8px; font-size:.95rem; font-weight:500; color:var(--text-muted);}
.hero-tags svg{width:18px; height:18px; color:var(--primary-text);}
/* small screens: the buttons and the tags below them share the same two columns */
@media (max-width:599.98px){
  .hero-actions .btn{flex:1 1 calc(50% - 6px); padding-inline:12px;}
  .hero-tags{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px;}
}
/* narrowest two-column hero: a tighter gap keeps all four tags on one row */
@media (min-width:1024px) and (max-width:1099.98px){ .hero-tags{column-gap:10px;} }
/* too narrow for two buttons: stack them here rather than rely on wrapping, which differs by browser */
@media (max-width:359.98px){ .hero-actions .btn{flex-basis:100%;} }

/* Interactive card deck — sized per screen (data-screen), fanned out by JS to fit the space */
.hero-visual{display:flex; justify-content:center; perspective:1400px;}
.deck{
  --card-w:212px; --card-h:276px; --deck-h:340px;
  position:relative; width:100%; max-width:520px; height:var(--deck-h);
  transform-style:preserve-3d; /* mouse tilt is eased in JS, one write per frame */
}
[data-screen="xs"] .deck{--card-w:176px; --card-h:232px; --deck-h:290px;}
[data-screen="sm"] .deck{--card-w:196px; --card-h:256px; --deck-h:320px;}
[data-screen="xl"] .deck{--card-w:244px; --card-h:316px; --deck-h:400px; max-width:600px;}
[data-screen="xxl"] .deck{--card-w:268px; --card-h:346px; --deck-h:440px; max-width:660px;}

.deck-card{
  position:absolute; left:50%; top:50%; width:var(--card-w); height:var(--card-h);
  margin-left:calc(var(--card-w) / -2); margin-top:calc(var(--card-h) / -2);
  display:flex; flex-direction:column; justify-content:space-between; padding:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg);
  /* Position = transform (its fan slot, set by JS); idle float = the separate `translate`
     property. Because they are separate, shuffling and dragging never interrupt the float,
     and every change is compositor-only (no layout, no repaint). */
  transform:var(--fan);
  transition:transform .55s cubic-bezier(.22, 1, .36, 1);
  animation:cardFloat 6s ease-in-out infinite; animation-delay:var(--delay, 0s);
  will-change:transform, translate;
  backface-visibility:hidden;
  cursor:grab; user-select:none; -webkit-user-select:none;
  touch-action:pan-y; /* vertical swipes scroll the page; sideways drags move the card */
}
.deck-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, var(--tone-soft), transparent 55%);
}
/* highlight ring: faded in with opacity instead of changing border/box-shadow (which would repaint) */
.deck-card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  border:1px solid var(--primary); box-shadow:0 0 0 3px var(--primary-soft);
  opacity:0; transition:opacity .2s ease;
}
.deck-card > *{position:relative; pointer-events:none;}
/* fallback fan (JS recomputes it to fit the screen) */
.deck-card:nth-child(1){--fan:translate(3px, -19px) rotate(-10deg) translate(-52px, 14px) translateZ(72px); z-index:4;}
.deck-card:nth-child(2){--fan:translate(3px, -19px) rotate(-3deg) translate(-17px, 4px) translateZ(48px); --delay:1.4s; z-index:3;}
.deck-card:nth-child(3){--fan:translate(3px, -19px) rotate(4deg) translate(19px, -2px) translateZ(24px); --delay:.7s; z-index:2;}
.deck-card:nth-child(4){--fan:translate(3px, -19px) rotate(11deg) translate(54px, 10px) translateZ(0px); --delay:2.1s; z-index:1;}
@keyframes cardFloat{0%,100%{translate:0 0;} 50%{translate:0 -8px;}}

.deck-code{
  align-self:flex-start; font-family:var(--font-display); font-size:.75rem; font-weight:600; letter-spacing:.08em;
  color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:4px 8px; border-radius:7px;
}
.deck-icon{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--tone-soft); color:var(--tone);}
.deck-icon svg{width:24px; height:24px;}
.deck-card h3{font-size:1.4rem; letter-spacing:-0.025em;}
.deck-card p{margin-top:4px; font-size:.875rem; line-height:1.45; color:var(--text-muted);}
[data-screen="xs"] .deck-card{padding:14px; border-radius:16px;}
[data-screen="xs"] .deck-card h3{font-size:1.15rem;}
[data-screen="xs"] .deck-card p{font-size:.8125rem;}
[data-screen="xs"] .deck-icon{width:40px; height:40px; border-radius:12px;}

[data-input="mouse"] .deck-card:hover::after{opacity:.5;}
/* while dragging: follow the pointer 1:1 (no transform transition) and hold the float where it is */
.deck-card.is-dragging{cursor:grabbing; transition:none; animation-play-state:paused; z-index:100 !important;}
.deck-card.is-dragging::after, .deck-card.is-moved::after{opacity:1;}
.deck-card.is-moved{cursor:pointer;}
.deck-card:focus-visible{outline:3px solid var(--primary-text); outline-offset:5px;}
.deck.is-settling .deck-card{transition:none;}
/* Hold the float (cards stay exactly where they are) while it would cost frames:
   off screen, during a drag, and while the mouse tilt is moving — measured to halve the style work. */
.deck.is-idle .deck-card,
.deck[data-dragging="true"] .deck-card,
.deck.is-tilting .deck-card{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){ .deck-card{animation:none;} }

/* ---------- Students & Colleges (bento) ---------- */
/* Side by side only from 1280px: any narrower and the college card is too thin to line up with its
   neighbour, so the two stack at full width and share three columns instead. */
.pillars{display:grid; gap:var(--gap);}
@media (min-width:1280px){ .pillars{grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr);} }
.pillar{
  display:flex; flex-direction:column; gap:28px;
  padding:var(--card-pad);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:border-color var(--dur) ease, box-shadow var(--dur) ease;
}
[data-input="mouse"] .pillar:hover{box-shadow:var(--shadow); border-color:var(--border-strong);}
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:8px;
  font-family:var(--font-display); font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.badge svg{width:16px; height:16px;}
.badge-primary{color:var(--primary-text); background:var(--primary-soft);}
.badge-accent{color:var(--accent-text); background:var(--accent-soft);}
.pillar-head h3{margin-top:14px; font-size:clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); letter-spacing:-0.03em;}
.pillar-lead{margin-top:10px; max-width:62ch; color:var(--text-muted); font-size:1.02rem;}

/* flex:1 lets the tiles grow to fill the card when the card beside it is taller (no empty gap) */
.feature-grid{display:grid; gap:12px; flex:1 0 auto;}
@media (min-width:600px){ .pillar-students .feature-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }
/* stacked cards: three columns in both, so the columns carry straight on from one card to the next */
@media (min-width:768px) and (max-width:1279.98px){ .pillar .feature-grid{grid-template-columns:repeat(3, minmax(0, 1fr));} }
/* side by side: three equal rows in both, so the student and college tiles sit on the same lines */
@media (min-width:1280px){ .feature-grid{grid-auto-rows:1fr;} }
.feature{
  display:flex; align-items:flex-start; gap:14px; padding:16px;
  background:var(--surface-2); border:1px solid transparent; border-radius:var(--radius);
  transition:border-color var(--dur) ease, background-color var(--dur) ease;
}
@media (min-width:768px) and (max-width:1279.98px){ .feature{flex-direction:column;} }
[data-input="mouse"] .feature:hover{background:var(--surface); border-color:var(--border-strong);}
.feature-icon{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:var(--surface); border:1px solid var(--border); color:var(--primary-text);
}
.pillar-colleges .feature-icon{color:var(--accent-text);}
.feature-icon svg{width:20px; height:20px;}
.feature h4{font-size:1rem; line-height:1.3; letter-spacing:-0.01em;}
.feature p{margin-top:4px; font-size:.9rem; line-height:1.55; color:var(--text-muted);}

.pillar-foot{
  margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  padding-top:20px; border-top:1px solid var(--border);
}
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{font-size:.8125rem; font-weight:500; padding:6px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); color:var(--text-body);}
@media (max-width:599.98px){ .pillar-foot .btn{width:100%;} }
/* side by side: the same two parts in both cards, chips along the top and the button along the bottom */
@media (min-width:1280px){ .pillar-foot{flex-flow:column nowrap; align-items:flex-start;} }

/* Cards side by side share rows through subgrid, so one title wrapping moves its neighbours' text
   too and every part stays on the same line. Browsers without subgrid keep the layout above. */
@supports (grid-template-rows:subgrid){
  /* tiles in a row: title and text rows are shared */
  @media (min-width:600px) and (max-width:1279.98px){
    .feature{display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-rows:subgrid; grid-row:span 2; gap:0 14px;}
    .feature-icon{grid-row:span 2;}
    .feature > div{display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:0;}
  }
  /* icon above the text: one more shared row */
  @media (min-width:768px) and (max-width:1279.98px){
    .feature{grid-template-columns:minmax(0, 1fr); grid-row:span 3;}
    .feature-icon{grid-row:auto; margin-bottom:14px;}
  }
  /* the two cards: head, tiles and footer rows are shared */
  @media (min-width:1280px){
    .pillar{display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:subgrid; grid-row:span 3;}
    .pillar-foot{margin-top:0;} /* fill the shared row rather than sink to the bottom of it */
  }
}

/* ---------- Programs ---------- */
.domain-grid{display:grid; gap:var(--gap); grid-template-columns:minmax(0, 1fr);}
@media (min-width:600px){
  .domain-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .domain:last-child{grid-column:1 / -1;}
}
@media (min-width:1024px){
  .domain-grid{grid-template-columns:repeat(6, minmax(0, 1fr));}
  .domain{grid-column:span 2;}
  .domain:nth-child(-n+2){grid-column:span 3;}
  .domain:last-child{grid-column:span 2;}
}
/* wide screens: all five domains in one row */
@media (min-width:1440px){
  .domain-grid{grid-template-columns:repeat(5, minmax(0, 1fr));}
  .domain, .domain:nth-child(-n+2), .domain:last-child{grid-column:auto;}
}
.domain{
  position:relative; display:flex; flex-direction:column; gap:8px; overflow:hidden;
  padding:var(--card-pad);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.domain-top{display:flex; align-items:center; justify-content:space-between; padding-bottom:16px;}
.domain-icon{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--tone-soft); color:var(--tone);}
.domain-icon svg{width:24px; height:24px;}
.domain-code{font-family:var(--font-display); font-size:.75rem; font-weight:600; letter-spacing:.08em; color:var(--text-muted);}
.domain h3{font-size:1.2rem; letter-spacing:-0.02em;}
.domain p{font-size:.92rem; color:var(--text-muted); max-width:48ch;}
[data-input="mouse"] .domain:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-strong);}
/* cards in a row share their icon, title and text rows */
@supports (grid-template-rows:subgrid){
  @media (min-width:600px){ .domain{display:grid; grid-template-rows:subgrid; grid-row:span 3;} }
}

.process{
  margin-top:var(--gap); padding:var(--card-pad);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
}
.steps{display:grid; gap:0;}
.step{position:relative; padding:0 0 28px 64px;}
.step:last-child{padding-bottom:0;}
.step::before{content:""; position:absolute; left:21px; top:48px; bottom:4px; width:2px; border-radius:2px; background:var(--border-strong);}
.step:last-child::before{display:none;}
.step-num{
  position:absolute; left:0; top:0; z-index:1; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.95rem;
  color:var(--primary-text); background:var(--surface); border:2px solid var(--primary);
}
.step h4{padding-top:10px; font-size:1.1rem;}
.step p{margin-top:6px; max-width:48ch; font-size:.95rem; color:var(--text-muted);}
@media (min-width:768px){
  .steps{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px 28px;}
  .step, .step:last-child{padding:64px 0 0;}
  .step::before{left:52px; right:-20px; top:21px; bottom:auto; width:auto; height:2px;}
  .step:nth-child(2n)::before{display:none;}
}
@media (min-width:1024px){
  .steps{grid-template-columns:repeat(4, minmax(0, 1fr));}
  .step:nth-child(2n)::before{display:block;}
  .step:last-child::before{display:none;}
}
/* steps in a row share their title and text rows */
@supports (grid-template-rows:subgrid){
  @media (min-width:768px){ .step{display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:0;} }
}

.program-lower{display:grid; gap:var(--gap); margin-top:var(--gap);}
@media (min-width:900px){ .program-lower{grid-template-columns:repeat(2, minmax(0, 1fr));} }
.deliverables, .quote-card{
  display:flex; flex-direction:column;
  margin:0; padding:var(--card-pad);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
}
.deliverables .subhead{margin-bottom:10px;}
.check-list{margin-bottom:18px;}
.check-list li{
  display:flex; align-items:center; gap:12px; padding:13px 0;
  font-weight:500; color:var(--text); border-bottom:1px solid var(--border);
}
.check-list li:last-child{border-bottom:none;}
.check{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--green-soft); color:var(--green);}
.check svg{width:15px; height:15px;}
.format-note{margin-top:auto; padding:16px 18px; border-radius:var(--radius); background:var(--surface-2);}
.format-note p{margin-top:6px; font-size:.92rem; color:var(--text-muted);}
.quote-card{
  gap:20px;
  background:linear-gradient(155deg, var(--primary-softer), var(--surface) 62%);
}
.quote-card blockquote{
  margin:0; font-family:var(--font-display); font-weight:600; color:var(--text);
  font-size:clamp(1.35rem, 1.1rem + 1vw, 1.85rem); line-height:1.3; letter-spacing:-0.025em;
}
.quote-card figcaption{font-size:.9rem; font-weight:500; color:var(--text-muted);}
.who-for{margin-top:auto; padding:16px 18px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); font-size:.95rem; color:var(--text-muted);}
.who-for strong{color:var(--text);}

/* ---------- Sessions marquee ---------- */
.marquee{
  position:relative; overflow:hidden; padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track{
  display:flex; gap:12px; width:max-content;
  animation:marquee var(--marquee-dur, 36s) linear infinite;
  will-change:transform;
}
.marquee-group{display:flex; gap:12px;}
.speaker{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:12px 20px; border-radius:999px; background:var(--surface); border:1px solid var(--border);
  font-family:var(--font-display); font-weight:500; font-size:clamp(.92rem, .88rem + .2vw, 1.02rem); color:var(--text);
}
.speaker::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--tone);}
@keyframes marquee{
  from{transform:translate3d(0, 0, 0);}
  to{transform:translate3d(calc(-50% - 6px), 0, 0);}
}
@media (prefers-reduced-motion: reduce){
  .marquee{-webkit-mask-image:none; mask-image:none;}
  /* no scrolling: the pills wrap on the page column, lined up with the text above and below */
  .marquee-track{
    animation:none; width:auto; flex-wrap:wrap;
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }
  .marquee-group{flex-wrap:wrap;}
  .marquee-group[aria-hidden="true"]{display:none;}
}
.sessions-note{margin-top:18px; font-size:.9rem; color:var(--text-muted);}

/* ---------- Events ---------- */
.event-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--gap);}
@media (min-width:900px){ .event-grid{grid-template-columns:repeat(4, minmax(0, 1fr));} }
.event{
  display:flex; flex-direction:column; gap:16px; padding:var(--card-pad);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  font-family:var(--font-display); font-weight:600; font-size:clamp(1rem, .95rem + .3vw, 1.15rem); line-height:1.25; color:var(--text);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) ease, border-color var(--dur) ease;
}
.event-icon{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--tone-soft); color:var(--tone);}
.event-icon svg{width:24px; height:24px;}
[data-input="mouse"] .event:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--border-strong);}

/* ---------- Final CTA ---------- */
.section-cta{padding-top:clamp(16px, 3vw, 40px);}
.cta-panel{
  position:relative; overflow:hidden; isolation:isolate; text-align:center; color:#FFFFFF;
  padding:clamp(48px, 8vw, 96px) clamp(20px, 5vw, 64px); border-radius:clamp(20px, 3vw, 32px);
  background:linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 50%, #2563EB 100%);
  box-shadow:0 30px 60px -30px rgba(29,78,216,.6);
}
.cta-panel::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.2) 1px, transparent 1px); background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 15%, transparent 70%);
          mask-image:radial-gradient(ellipse at center, #000 15%, transparent 70%);
}
.cta-panel::after{
  content:""; position:absolute; z-index:-1; width:460px; aspect-ratio:1; right:-160px; bottom:-240px; border-radius:50%;
  background:radial-gradient(circle, rgba(251,146,60,.5), transparent 65%);
}
.cta-panel h2{margin-inline:auto; max-width:18ch; color:#FFFFFF; font-size:clamp(2rem, 1.3rem + 2.8vw, 3.25rem); letter-spacing:-0.035em; line-height:1.08;}
.cta-panel p{margin:18px auto 0; max-width:56ch; color:rgba(255,255,255,.88); font-size:clamp(1rem, .96rem + .3vw, 1.15rem);}
.cta-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px;}
@media (max-width:479.98px){ .cta-actions .btn{flex:1 1 100%;} }
.cta-panel .cta-contact{color:#FFFFFF;} /* full white: 88% falls short of 4.5:1 on the lighter end of the gradient */
.cta-contact a{display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:#FFFFFF; text-decoration:underline; text-underline-offset:3px;}
.cta-contact a:hover{text-decoration-thickness:2px;}
.cta-panel :focus-visible{outline-color:#FFFFFF;} /* the site's blue ring would vanish on this blue panel */

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--border);
  padding:clamp(48px, 6vw, 72px) 0 calc(28px + env(safe-area-inset-bottom));
}
.foot-grid{display:grid; gap:32px;}
/* the links take the width they need, so their columns never split onto separate rows */
@media (min-width:768px){ .foot-grid{grid-template-columns:minmax(0, 1fr) auto; align-items:start;} }
.foot-brand p{margin-top:14px; max-width:40ch; font-size:.95rem; color:var(--text-muted);}
/* the column gap is tightest at 768px, where three columns share the row with the brand text */
.foot-links{display:flex; flex-wrap:wrap; gap:24px clamp(40px, 12vw - 52px, 96px);}
.foot-title{margin-bottom:6px; font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);}
/* the column titles sit on the same centre line as the logo beside them */
@media (min-width:768px){ .foot-title{display:flex; align-items:center; min-height:44px; margin-bottom:0;} }
.foot-links a{display:inline-flex; align-items:center; min-height:40px; font-weight:500; color:var(--text); transition:color var(--dur) ease;}
.foot-links a:hover{color:var(--primary-text);}
@media (pointer:coarse){ .foot-links a{min-height:44px;} }
.foot-bottom{
  margin-top:clamp(32px, 5vw, 56px); padding-top:20px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; font-size:.875rem; color:var(--text-muted);
}

/* ---------- Scroll reveal (visible by default; JS opts elements in) ---------- */
.reveal{transition:opacity .6s ease, transform .6s var(--ease); transition-delay:calc(var(--i, 0) * 70ms);}
.reveal.pre-reveal{opacity:0; transform:translateY(18px);}

/* ---------- Legal pages ---------- */
.legal-page{padding:clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px);}
.legal-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(24px, 4vw, 56px); box-shadow:var(--shadow-sm); width:100%; max-width:100%;
}
.legal-card h1{font-size:clamp(2rem, 1.5rem + 2vw, 2.75rem); margin-bottom:8px;}
.legal-meta{font-size:.9rem; color:var(--text-muted); margin-bottom:32px; padding-bottom:16px; border-bottom:1px solid var(--border);}
.legal-body section{margin-bottom:32px;}
.legal-body h2{font-size:1.3rem; margin-bottom:12px; color:var(--text);}
.legal-body p{color:var(--text-body); margin-bottom:14px; line-height:1.7;}
.legal-body ul{list-style:disc; padding-left:24px; margin-bottom:16px; color:var(--text-body);}
.legal-body li{margin-bottom:8px;}
.legal-body a{color:var(--primary-text); text-decoration:underline; text-underline-offset:2px;}
.foot-legal-links{display:inline-flex; align-items:center; gap:8px;}
.foot-legal-links a:hover{color:var(--primary-text);}

/* ---------- Short landscape screens (phones on their side) ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:28px 0 48px;}
  .section{padding:56px 0;}
}