/* ==========================================================================
   FERDY.COM DESIGN SYSTEM v1.0
   Tokens -> Base -> Layout -> Components -> Utilities -> Motion -> Responsive
   Every value here maps to an Elementor Global Style or Container setting.
   See ELEMENTOR-BUILD-SPEC.md
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand: dark blue / blue-purple / orange */
  --ink:            #080C24;
  --ink-2:          #0E1433;
  --ink-3:          #171E48;
  --navy:           #1B2464;

  --brand:          #4A5BF7;
  --brand-600:      #3A46D8;
  --brand-700:      #2C35AC;
  --brand-100:      #E8EAFE;
  --brand-50:       #F2F3FF;

  --violet:         #7C5CFC;
  --violet-100:     #EFE9FF;

  --accent:         #FF7A2F;
  --accent-soft:    #FFB07C;
  --accent-600:     #C24E09;
  --accent-100:     #FFEDE1;
  --accent-50:      #FFF6F0;

  --paper:          #FFFFFF;
  --paper-2:        #F7F8FD;
  --paper-3:        #EFF1FA;
  --line:           #E3E7F5;
  --line-2:         #D3D9EE;

  --text:           #10163A;
  --text-2:         #3A426B;
  --muted:          #646C93;
  --muted-2:        #676F92;

  --on-dark:        #FFFFFF;
  --on-dark-2:      #C3C9E8;
  --on-dark-3:      #8E97C4;
  --hairline-dark:  rgba(255,255,255,.10);

  /* Gradients */
  --grad-brand:  linear-gradient(135deg, #4A5BF7 0%, #7C5CFC 100%);
  --grad-brand-r:linear-gradient(135deg, #7C5CFC 0%, #4A5BF7 100%);
  --grad-warm:   linear-gradient(135deg, #E4680F 0%, #D4530D 55%, #C2430C 100%);
  --grad-warm-d: linear-gradient(135deg, #C94E0A 0%, #B34309 55%, #A03A0B 100%);
  --grad-ink:    linear-gradient(165deg, #0E1433 0%, #080C24 60%, #0B1130 100%);
  --grad-text:   linear-gradient(100deg, #FFFFFF 0%, #D8DCFF 45%, #FFB98F 100%);
  --grad-sheen:  linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  --grad-hair:   linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
  --grad-hair-d: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 20%, rgba(255,255,255,.16) 80%, transparent);

  /* Typography */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.6rem, 5.6vw, 4.6rem);
  --fs-h1:      clamp(2.2rem, 4.4vw, 3.4rem);
  --fs-h2:      clamp(1.85rem, 3.1vw, 2.7rem);
  --fs-h3:      clamp(1.35rem, 1.9vw, 1.7rem);
  --fs-h4:      1.1875rem;
  --fs-lead:    clamp(1.0625rem, 1.25vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.06;
  --lh-snug:  1.18;
  --lh-head:  1.28;
  --lh-body:  1.68;

  /* Space: 4pt base */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:96px;
  --s13:120px; --s14:160px;

  --section-y:  clamp(72px, 8.5vw, 128px);
  --section-y-s:clamp(56px, 6vw, 88px);
  --container:  1200px;
  --container-w:1320px;
  --container-n:880px;
  --gutter:     clamp(20px, 4vw, 40px);

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(12,18,50,.04), 0 1px 3px rgba(12,18,50,.05);
  --sh-2: 0 2px 6px rgba(12,18,50,.04), 0 10px 24px rgba(12,18,50,.06);
  --sh-3: 0 4px 10px rgba(12,18,50,.05), 0 20px 48px rgba(12,18,50,.10);
  --sh-4: 0 8px 18px rgba(12,18,50,.07), 0 34px 72px rgba(12,18,50,.14);
  --sh-brand: 0 12px 32px rgba(74,91,247,.26);
  --sh-warm:  0 12px 32px rgba(255,122,47,.28);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* Motion */
  --e-out:   cubic-bezier(.22,.9,.24,1);
  --e-inout: cubic-bezier(.62,.02,.28,1);
  --e-spring:cubic-bezier(.34,1.32,.44,1);
  --t-fast: .18s; --t-mid:.34s; --t-slow:.6s;

  --nav-h: 72px;
}

/* ---------- 2. RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01"; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%; height:auto}
a{color:var(--brand-600); text-decoration:none; transition:color var(--t-fast) var(--e-out)}
a:hover{color:var(--brand-700)}
h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--text); margin:0; letter-spacing:-.022em; font-weight:800}
h1{font-size:var(--fs-h1); line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2); line-height:var(--lh-snug); letter-spacing:-.026em}
h3{font-size:var(--fs-h3); line-height:var(--lh-head); font-weight:750}
h4{font-size:var(--fs-h4); line-height:1.36; font-weight:700; letter-spacing:-.012em}
p{margin:0}
ul,ol{margin:0; padding:0}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
::selection{background:rgba(74,91,247,.18); color:var(--text)}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s6); top:var(--s3); z-index:2000; background:var(--paper); padding:var(--s3) var(--s5);
  border-radius:var(--r-pill); box-shadow:var(--sh-3); font-weight:650}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-w{max-width:var(--container-w)}
.wrap-n{max-width:var(--container-n)}
.sec{position:relative; padding-block:var(--section-y)}
.sec-s{padding-block:var(--section-y-s)}
.sec-dark{background:var(--grad-ink); color:var(--on-dark)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--on-dark)}
.sec-soft{background:var(--paper-2)}
.sec-line{border-top:1px solid var(--line)}

/* --- Dark-context inheritance -------------------------------------------
   .hero, .phead, .cta-band and .news are dark surfaces that are not .sec-dark,
   so they need the same text-colour treatment. In Elementor this is one
   "Dark section" global class applied to those containers. */
.hero, .phead, .cta-band, .news{color:var(--on-dark)}
.hero h1,.hero h2,.hero h3,.hero h4,
.phead h1,.phead h2,.phead h3,.phead h4,
.cta-band h1,.cta-band h2,.cta-band h3,
.news h2,.news h3,.news h4{color:var(--on-dark)}
.hero .lead,.phead .lead,.cta-band .lead,.news .lead{color:var(--on-dark-2)}
.hero .eyebrow,.phead .eyebrow,.cta-band .eyebrow,.news .eyebrow{color:var(--accent-soft)}
.hero .muted,.phead .muted,.cta-band .muted,.news .muted{color:var(--on-dark-3)}
.hero .small,.phead .small{color:var(--on-dark-2)}
.hero .btn-ghost,.phead .btn-ghost,.cta-band .btn-ghost,.news .btn-ghost{
  --btn-fg:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.07)}
.hero .btn-ghost:hover,.phead .btn-ghost:hover,.cta-band .btn-ghost:hover,.news .btn-ghost:hover{
  border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.13); color:#fff}
.hero .hair,.phead .hair,.cta-band .hair{background:var(--grad-hair-d)}
.grid{display:grid; gap:var(--s6)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hair{height:1px; background:var(--grad-hair); border:0; margin:0}
.sec-dark .hair{background:var(--grad-hair-d)}

/* ---------- 4. TYPE HELPERS ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--font-display); font-size:var(--fs-eyebrow); font-weight:750;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-600);
}
.sec-dark .eyebrow{color:var(--accent-soft,#FFB07C)}
.display{font-family:var(--font-display); font-size:var(--fs-display); line-height:var(--lh-tight);
  letter-spacing:-.034em; font-weight:800; margin:0}
.lead{font-size:var(--fs-lead); line-height:1.62; color:var(--text-2)}
.sec-dark .lead{color:var(--on-dark-2)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.muted{color:var(--muted)}
.sec-dark .muted{color:var(--on-dark-3)}
.mono{font-family:var(--font-mono); font-size:.86em; letter-spacing:-.01em}
.balance{text-wrap:balance}
.pretty{text-wrap:pretty}
.grad-text{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-text{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.warm-text{background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent}
.underline-mark{position:relative; white-space:nowrap}
.underline-mark::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.02em; height:.34em; z-index:-1;
  background:var(--grad-warm); opacity:.24; border-radius:var(--r-pill);
}
.sec-head{max-width:720px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head .eyebrow{margin-bottom:var(--s4)}
.sec-head h2{margin-bottom:var(--s5)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --btn-bg:var(--grad-brand); --btn-fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); letter-spacing:-.008em;
  padding:15px 26px; border-radius:var(--r-pill); background:var(--btn-bg); color:var(--btn-fg);
  box-shadow:var(--sh-brand); overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform var(--t-mid) var(--e-spring), box-shadow var(--t-mid) var(--e-out), color var(--t-fast) linear;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--grad-sheen);
  transform:translateX(-120%); transition:transform .72s var(--e-out);
}
.btn:hover{transform:translateY(-2px) scale(1.014); box-shadow:0 18px 44px rgba(74,91,247,.34); color:#fff}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.99)}
.btn .ic{transition:transform var(--t-mid) var(--e-out)}
.btn:hover .ic{transform:translateX(3px)}
.btn-warm{--btn-bg:var(--grad-warm-d); box-shadow:var(--sh-warm)}
.btn-warm:hover{box-shadow:0 18px 44px rgba(255,122,47,.38)}
.btn-ghost{
  --btn-bg:transparent; --btn-fg:var(--text); box-shadow:none;
  border:1.5px solid var(--line-2); background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
}
.btn-ghost:hover{--btn-fg:var(--text); border-color:var(--brand); background:var(--brand-50);
  box-shadow:0 10px 26px rgba(74,91,247,.14); color:var(--text)}
.sec-dark .btn-ghost{--btn-fg:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.07)}
.sec-dark .btn-ghost:hover{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.13); color:#fff}
.btn-lg{padding:18px 32px; font-size:1rem}
.btn-sm{padding:11px 18px; font-size:var(--fs-xs)}
.btn-white{--btn-bg:#fff; --btn-fg:var(--ink); box-shadow:0 12px 32px rgba(0,0,0,.24)}
.btn-white:hover{color:var(--ink); box-shadow:0 18px 44px rgba(0,0,0,.3)}
.link-arrow{
  display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--font-display);
  font-weight:700; font-size:var(--fs-sm); color:var(--brand-600);
}
.link-arrow .ic{transition:transform var(--t-mid) var(--e-out)}
.link-arrow:hover .ic{transform:translateX(4px)}

/* ---------- 6. PILLS / CHIPS / BADGES ---------- */
.pill{
  display:inline-flex; align-items:center; gap:var(--s2); padding:7px 14px 7px 11px;
  border-radius:var(--r-pill); background:var(--paper); border:1px solid var(--line);
  font-size:var(--fs-xs); font-weight:600; color:var(--text-2); box-shadow:var(--sh-1);
}
.pill-glass{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:var(--on-dark-2); backdrop-filter:blur(12px) saturate(140%); box-shadow:none;
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(255,122,47,.18)}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--paper-3); color:var(--text-2); font-size:var(--fs-xs); font-weight:650;
  border:1px solid transparent; transition:all var(--t-fast) var(--e-out);
}
a.chip:hover{background:var(--brand-100); color:var(--brand-700); border-color:rgba(74,91,247,.3); transform:translateY(-1px)}
.tag{
  display:inline-flex; align-items:center; padding:5px 11px; border-radius:7px;
  font-family:var(--font-display); font-size:.6875rem; font-weight:750;
  letter-spacing:.07em; text-transform:uppercase;
}
.tag-brand{background:var(--brand-100); color:var(--brand-700)}
.tag-warm{background:var(--accent-100); color:#B44507}
.tag-violet{background:var(--violet-100); color:#5B37C9}
.tag-glass{background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(8px)}

/* ---------- 7. NAVBAR ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center;
  transition:height var(--t-mid) var(--e-out), background var(--t-mid) linear, box-shadow var(--t-mid) linear, border-color var(--t-mid) linear;
  border-bottom:1px solid transparent;
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:rgba(255,255,255,.93); backdrop-filter:blur(20px) saturate(180%);
  transition:opacity var(--t-mid) linear;
}
.nav.stuck{height:62px; border-color:var(--line)}
.nav.stuck::before{opacity:1}
.nav.stuck .brand-word{color:var(--text)}
.nav-in{display:flex; align-items:center; gap:var(--s7); width:100%}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0}
.brand-mark{
  width:34px; height:34px; border-radius:11px; background:var(--grad-brand);
  display:grid; place-items:center; box-shadow:var(--sh-brand), var(--sh-inset);
  transition:transform var(--t-mid) var(--e-spring);
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.brand-mark span{font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.0625rem; letter-spacing:-.04em}

/* ---------- SVG WORDMARK ---------- */
/* Lettering is currentColor: white over the dark hero, brand purple once the
   nav sticks or on light pages. The play circle and its triangle are fixed. */
.brand-logo{height:16px; width:auto; display:block; color:#fff;
  transition:color .3s var(--ease); flex-shrink:0}
.nav.stuck .brand-logo,
.nav.on-light .brand-logo{color:#341390}
.foot .brand-logo{height:18px; color:#fff}
.brand:hover .brand-logo{opacity:.85}
@media (max-width:600px){ .brand-logo{height:13px} }
.brand-word{font-family:var(--font-display); font-weight:800; font-size:1.1875rem; letter-spacing:-.038em; color:#fff;
  transition:color var(--t-mid) linear}
/* the <nav> wrapper is the flex child, so the auto margin belongs on it,
   this is what pushes the links + CTA to the container's right edge */
.nav-in > nav{margin-left:auto}
.nav-links{display:flex; align-items:center; gap:var(--s1); list-style:none}
.nav-links a{
  position:relative; display:block; padding:9px 15px; border-radius:var(--r-pill);
  font-family:var(--font-display); font-size:var(--fs-sm); font-weight:650; color:#fff;
  transition:color var(--t-fast) linear, background var(--t-fast) linear;
}
.nav.stuck .nav-links a{color:var(--text-2)}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.1)}
.nav.stuck .nav-links a:hover{color:var(--text); background:var(--paper-3)}
.nav-links a[aria-current="page"]{color:#fff}
.nav.stuck .nav-links a[aria-current="page"]{color:var(--brand-600)}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:2px; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--accent);
}
.nav-cta{margin-left:var(--s4); flex-shrink:0}
.nav-burger{display:none; margin-left:auto; width:42px; height:42px; border-radius:12px;
  align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2)}
.nav.stuck .nav-burger{border-color:var(--line)}
.nav-burger i{display:block; width:17px; height:1.8px; background:currentColor; border-radius:2px; position:relative; color:#fff}
.nav.stuck .nav-burger i{color:var(--text)}
.nav-burger i::before,.nav-burger i::after{content:""; position:absolute; left:0; width:17px; height:1.8px;
  background:currentColor; border-radius:2px; transition:transform var(--t-mid) var(--e-out)}
.nav-burger i::before{top:-5.5px} .nav-burger i::after{top:5.5px}
/* Light-header variant for inner pages that start on white */
.nav.on-light .brand-word,.nav.on-light .nav-links a{color:var(--text-2)}
.nav.on-light .brand-word{color:var(--text)}
.nav.on-light{border-color:var(--line)}
.nav.on-light::before{opacity:1}
.nav.on-light .nav-burger i,.nav.on-light .nav-burger i::before,.nav.on-light .nav-burger i::after{color:var(--text)}
.nav.on-light .nav-burger{border-color:var(--line)}

.mobile-menu{
  position:fixed; inset:0; z-index:999; background:var(--grad-ink); color:#fff;
  padding:calc(var(--nav-h) + 32px) var(--gutter) var(--s9);
  display:flex; flex-direction:column; gap:var(--s2);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), visibility var(--t-mid);
}
.mobile-menu.open{opacity:1; visibility:visible; transform:none}
.mobile-menu a{
  font-family:var(--font-display); font-size:1.5rem; font-weight:750; color:#fff;
  padding:var(--s4) 0; border-bottom:1px solid var(--hairline-dark); letter-spacing:-.02em;
  display:flex; justify-content:space-between; align-items:center;
}
/* The mobile menu is already a list of large tap targets, so the CTA is styled
   as one more row rather than a pill button competing with them. */
.mobile-menu .btn{
  margin-top:0; background:none; border:0; box-shadow:none; color:#fff;
  font-family:var(--font-display); font-size:1.5rem; font-weight:750;
  padding:var(--s4) 0; border-bottom:1px solid var(--hairline-dark);
  letter-spacing:-.02em; display:flex; justify-content:space-between;
  align-items:center; border-radius:0; width:100%;
}
.mobile-menu .btn:hover{background:none; transform:none; box-shadow:none; color:var(--accent-soft)}

/* ---------- 8. HERO ---------- */
.hero{
  position:relative; background:var(--grad-ink); color:var(--on-dark);
  padding-top:calc(var(--nav-h) + clamp(56px,7vw,96px)); padding-bottom:clamp(72px,8vw,120px);
  overflow:hidden; isolation:isolate;
}
.hero-fx{position:absolute; inset:0; z-index:-1; overflow:hidden}
.hero-fx .blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.hero-fx .b1{width:640px; height:640px; top:-220px; left:-140px;
  background:radial-gradient(circle,#4A5BF7 0%,transparent 68%)}
.hero-fx .b2{width:560px; height:560px; top:-80px; right:-120px;
  background:radial-gradient(circle,#7C5CFC 0%,transparent 66%); opacity:.44}
.hero-fx .b3{width:480px; height:480px; bottom:-240px; left:36%;
  background:radial-gradient(circle,#FF7A2F 0%,transparent 66%); opacity:.2}
.hero-fx .mesh{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 62% at 50% 34%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 62% at 50% 34%, #000 20%, transparent 78%);
}
.hero-fx .grain{position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero h1{font-size:var(--fs-display); letter-spacing:-.036em; margin:var(--s6) 0 var(--s6); color:#fff}
.hero .lead{max-width:52ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s8)}
.hero-note{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s6);
  font-size:var(--fs-sm); color:var(--on-dark-3)}
.hero-note svg{flex-shrink:0}

/* Portrait frame (real photo slot) */
.portrait{position:relative; isolation:isolate}
.portrait-frame{
  position:relative; aspect-ratio:4/5; border-radius:var(--r-2xl); overflow:hidden;
  background:linear-gradient(150deg, rgba(124,92,252,.4), rgba(74,91,247,.22) 45%, rgba(255,122,47,.26));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 50px 110px rgba(0,0,0,.5), var(--sh-inset);
}
.portrait-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,12,36,.7) 0%, transparent 52%);
}
.portrait-frame img{width:100%; height:100%; object-fit:cover}
/* Cut-out portraits. The headroom lives in the asset, not here: ferdy-cutout
   is authored on an exact 4:5 canvas with transparent space above the head and
   small side gutters, matching .portrait-frame. Padding here would shrink the
   content box and make cover crop into the subject instead. */
.portrait-frame img.cutout{object-fit:cover; object-position:center bottom}
.photo-slot{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--s3); text-align:center; padding:var(--s7);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px),
    linear-gradient(150deg, rgba(124,92,252,.34), rgba(74,91,247,.2) 50%, rgba(255,122,47,.22));
}
.photo-slot .ps-ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(8px)}
.photo-slot .ps-label{font-family:var(--font-display); font-weight:750; font-size:var(--fs-sm); color:#fff}
.photo-slot .ps-hint{font-size:var(--fs-xs); color:rgba(255,255,255,.72); max-width:26ch; line-height:1.5}
.photo-slot .ps-dim{font-family:var(--font-mono); font-size:.6875rem; color:rgba(255,255,255,.55);
  padding:4px 10px; border-radius:var(--r-pill); background:rgba(0,0,0,.24)}
.portrait-badge{
  position:absolute; z-index:3; display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s5); border-radius:var(--r-md);
  background:rgba(12,17,46,.62); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(20px) saturate(160%); box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.portrait-badge.pb-1{bottom:var(--s7); left:calc(-1 * var(--s6))}
.portrait-badge.pb-2{top:var(--s9); right:calc(-1 * var(--s5))}
.portrait-badge .pb-n{font-family:var(--font-display); font-weight:800; font-size:1.125rem; color:#fff; line-height:1.1}
.portrait-badge .pb-l{font-size:.6875rem; color:var(--on-dark-3); letter-spacing:.04em; text-transform:uppercase; font-weight:600}
.portrait-badge .pb-ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--grad-warm); box-shadow:var(--sh-warm)}

/* ---------- 9. STAT STRIP ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--hairline-dark); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--hairline-dark);
}
.stat{padding:var(--s7) var(--s6); background:rgba(255,255,255,.028); text-align:center}
.stat-n{font-family:var(--font-display); font-weight:800; font-size:clamp(1.75rem,3vw,2.5rem);
  letter-spacing:-.038em; line-height:1; background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-l{margin-top:var(--s3); font-size:var(--fs-xs); color:var(--on-dark-3); letter-spacing:.02em}
.stats-light{background:var(--line); border-color:var(--line)}
.stats-light .stat{background:var(--paper)}
.stats-light .stat-n{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text}
.stats-light .stat-l{color:var(--muted)}

/* ---------- 10. LOGO / TRUST ROW ---------- */
.trust{display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--s5) clamp(24px,4vw,56px)}
.trust-item{display:flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:700; font-size:var(--fs-sm); color:var(--muted); letter-spacing:-.01em}
.trust-item svg{opacity:.6}
.trust-label{width:100%; text-align:center; font-size:var(--fs-xs); color:var(--muted-2);
  letter-spacing:.1em; text-transform:uppercase; font-weight:650}

/* ---------- 11. CARDS: TUTORIAL ---------- */
.card{
  position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-2); isolation:isolate;
  transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) linear;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-4); border-color:var(--line-2)}
.card-media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink-2)}
.card-media img{width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--e-out), filter .5s linear}
.card:hover .card-media img{transform:scale(1.055)}
.card-media::after{content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(to top, rgba(8,12,36,.42), transparent 60%);
  transition:opacity var(--t-mid) linear}
.card:hover .card-media::after{opacity:1}
.card-media .tag{position:absolute; top:var(--s4); left:var(--s4); z-index:2}
.card-media .dur{
  position:absolute; bottom:var(--s4); right:var(--s4); z-index:2;
  padding:5px 10px; border-radius:7px; background:rgba(8,12,36,.72);
  color:#fff; font-family:var(--font-mono); font-size:.6875rem; font-weight:600;
  backdrop-filter:blur(6px);
}
.card-play{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center; opacity:0;
  transition:opacity var(--t-mid) linear;
}
.card:hover .card-play{opacity:1}
.card-play span{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.94); box-shadow:0 12px 36px rgba(0,0,0,.3);
  transform:scale(.82); transition:transform var(--t-mid) var(--e-spring);
}
.card:hover .card-play span{transform:scale(1)}
.card-body{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s6) var(--s6) var(--s7);
  flex:1 1 auto}
.card-meta{display:flex; align-items:center; gap:var(--s3); font-size:var(--fs-xs); color:var(--muted-2)}
.card-meta .sep{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6}
.card-body h3{letter-spacing:-.024em}
.card-body h3 a{color:inherit}
.card:hover .card-body h3 a{color:var(--brand-600)}
.card-body p{color:var(--muted); font-size:var(--fs-sm); line-height:1.62}
.card-foot{margin-top:auto; padding-top:var(--s5)}

/* Feature card (first of 3, wide) */
.tut-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s6)}
.tut-grid.featured{grid-template-columns:minmax(0,1.32fr) minmax(0,1fr)}
.tut-grid.featured .card:first-child{grid-row:span 2}
.tut-grid.featured .card:first-child .card-media{aspect-ratio:auto; flex:1 1 auto; min-height:300px}
.tut-grid.featured .card:first-child .card-body{padding:var(--s7); flex:0 0 auto}
.tut-grid.featured .card:first-child h3{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.tut-side{display:grid; gap:var(--s6); align-content:stretch}
.tut-side .card{height:100%}
.card-row{
  display:grid; grid-template-columns:180px minmax(0,1fr); gap:0; overflow:hidden;
}
.card-row .card-media{aspect-ratio:auto; width:100%; height:100%; min-height:170px}
.card-row .card-body{padding:var(--s5) var(--s6)}
.card-row .card-body h3{font-size:1.125rem}

/* ---------- 12. TOPIC CARDS ---------- */
/* 7 cards, two balanced rows: 4 across (span 3 of 12) then 3 across (span 4 of 12) */
.topics{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s5)}
.topics > *{grid-column:span 3}
.topics > *:nth-child(n+5){grid-column:span 4}
.topic{
  position:relative; display:flex; flex-direction:column; gap:var(--s4);
  padding:var(--s7) var(--s6) var(--s6); border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1);
  overflow:hidden; isolation:isolate;
  transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) linear;
}
.topic::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(74,91,247,.09), transparent 70%);
  transition:opacity var(--t-mid) linear;
}
.topic:hover{transform:translateY(-5px); box-shadow:var(--sh-3); border-color:rgba(74,91,247,.28)}
.topic:hover::before{opacity:1}
.topic-ic{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex-shrink:0;
  background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-600);
  transition:transform var(--t-mid) var(--e-spring), background var(--t-mid) linear, color var(--t-mid) linear;
}
.topic:hover .topic-ic{transform:scale(1.08) rotate(-5deg); background:var(--grad-brand); color:#fff; border-color:transparent}
.topic.warm .topic-ic{background:var(--accent-50); border-color:var(--accent-100); color:var(--accent-600)}
.topic.warm:hover .topic-ic{background:var(--grad-warm); color:#fff}
.topic.warm:hover{border-color:rgba(255,122,47,.34)}
.topic.warm::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(255,122,47,.1), transparent 70%)}
.topic h3{font-size:1.1875rem; letter-spacing:-.02em}
.topic p{font-size:var(--fs-sm); color:var(--muted); line-height:1.6; flex:1}
.topic-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding-top:var(--s4); margin-top:var(--s2); border-top:1px solid var(--line)}
.topic-count{font-size:var(--fs-xs); color:var(--muted-2); font-weight:600}
.topic-go{width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--paper-3); color:var(--text-2);
  transition:background var(--t-fast) linear, color var(--t-fast) linear, transform var(--t-mid) var(--e-out)}
.topic:hover .topic-go{background:var(--grad-brand); color:#fff; transform:translateX(3px)}
.topic.warm:hover .topic-go{background:var(--grad-warm)}

/* ---------- 13. WHY / VALUE BLOCKS ---------- */
.why-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,5vw,80px); align-items:start}
.why-list{display:grid; gap:var(--s2)}
.why{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--s5);
  padding:var(--s6); border-radius:var(--r-md); border:1px solid transparent;
  transition:background var(--t-mid) linear, border-color var(--t-mid) linear, transform var(--t-mid) var(--e-out);
}
.why:hover{background:rgba(255,255,255,.05); border-color:var(--hairline-dark); transform:translateX(4px)}
.why-n{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid var(--hairline-dark);
  font-family:var(--font-display); font-weight:800; font-size:.9375rem; color:#fff;
}
.why:nth-child(1) .why-n{background:var(--grad-brand); border-color:transparent; box-shadow:var(--sh-brand)}
.why:nth-child(2) .why-n{background:linear-gradient(135deg,#7C5CFC,#A17CFF); border-color:transparent}
.why:nth-child(3) .why-n{background:var(--grad-warm); border-color:transparent; box-shadow:var(--sh-warm)}
.why h3{font-size:1.1875rem; margin-bottom:var(--s2); letter-spacing:-.02em}
.why p{font-size:var(--fs-sm); color:var(--on-dark-2); line-height:1.62}

/* ---------- 14. TESTIMONIALS ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.quote{
  display:flex; flex-direction:column; gap:var(--s5); padding:var(--s7);
  border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh-2); transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.quote:hover{transform:translateY(-4px); box-shadow:var(--sh-3)}
.quote .stars{display:flex; gap:3px; color:var(--accent-600)}
.quote blockquote{margin:0; font-size:var(--fs-body); line-height:1.66; color:var(--text-2)}
.quote blockquote strong{color:var(--text); font-weight:650}
.quote-by{display:flex; align-items:center; gap:var(--s3); margin-top:auto;
  padding-top:var(--s5); border-top:1px solid var(--line)}
.avatar{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:var(--grad-brand); color:#fff; font-family:var(--font-display); font-weight:750; font-size:.875rem}
.avatar.v2{background:linear-gradient(135deg,#5140C9,#6E4CF0)}
.avatar.v3{background:var(--grad-warm-d)}
.quote-by .qn{font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); color:var(--text)}
.quote-by .qr{font-size:var(--fs-xs); color:var(--muted-2)}

/* ---------- 15. ARTICLE LIST ---------- */
.articles{display:grid; gap:0; border-top:1px solid var(--line)}
.article{
  display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:var(--s6); align-items:center;
  padding:var(--s6) var(--s4); border-bottom:1px solid var(--line);
  transition:background var(--t-mid) linear, padding-inline var(--t-mid) var(--e-out);
}
.article:hover{background:var(--paper-2); padding-inline:var(--s6)}
.article-date{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted-2); white-space:nowrap}
.article-main{display:flex; flex-direction:column; gap:6px}
.article-main h3{font-size:1.125rem; letter-spacing:-.02em}
.article-main h3 a{color:inherit}
.article:hover .article-main h3 a{color:var(--brand-600)}
.article-main p{font-size:var(--fs-sm); color:var(--muted)}
.article-go{width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:var(--paper-3); color:var(--text-2);
  transition:background var(--t-fast) linear, color var(--t-fast) linear, transform var(--t-mid) var(--e-out)}
.article:hover .article-go{background:var(--grad-brand); color:#fff; transform:translateX(3px)}

/* ---------- 16. NEWSLETTER ---------- */
.news{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,4vw,64px); align-items:center;
  padding:clamp(32px,4.5vw,64px); border-radius:var(--r-2xl); overflow:hidden; isolation:isolate;
  background:linear-gradient(140deg,#111845 0%,#0A0F30 55%,#141A48 100%); color:#fff;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px rgba(10,15,48,.3);
}
.news::before{
  content:""; position:absolute; z-index:-1; width:520px; height:520px; border-radius:50%;
  top:-260px; right:-140px; filter:blur(80px); opacity:.42;
  background:radial-gradient(circle,#7C5CFC,transparent 68%);
}
.news::after{
  content:""; position:absolute; z-index:-1; width:420px; height:420px; border-radius:50%;
  bottom:-260px; left:-100px; filter:blur(80px); opacity:.28;
  background:radial-gradient(circle,#FF7A2F,transparent 68%);
}
.news h2{font-size:clamp(1.6rem,2.6vw,2.25rem); color:#fff; margin-bottom:var(--s4)}
.news p{color:var(--on-dark-2); font-size:var(--fs-sm); line-height:1.62}
.news-form{display:flex; flex-direction:column; gap:var(--s3)}
.field{
  display:flex; gap:var(--s2); padding:6px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px); transition:border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.field:focus-within{border-color:rgba(255,255,255,.4); box-shadow:0 0 0 4px rgba(74,91,247,.22)}
.field input{
  flex:1; min-width:0; border:0; background:none; outline:0; padding:12px 18px;
  color:#fff; font-family:var(--font-body); font-size:var(--fs-sm);
}
.field input::placeholder{color:rgba(255,255,255,.46)}
.news-fine{display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-xs); color:var(--on-dark-3);
  padding-left:var(--s5)}
.news-points{display:grid; gap:var(--s3); margin-top:var(--s6); list-style:none}
.news-points li{display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--fs-sm); color:var(--on-dark-2)}
.news-points svg{flex-shrink:0; margin-top:4px; color:var(--accent)}

/* ---------- 17. BIG CTA ---------- */
.cta-band{
  position:relative; text-align:center; padding-block:clamp(80px,9vw,132px);
  background:var(--grad-ink); color:#fff; overflow:hidden; isolation:isolate;
}
.cta-band .fx{position:absolute; inset:0; z-index:-1}
.cta-band .fx .ring{
  position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
}
.cta-band .fx .r1{width:560px; height:560px}
.cta-band .fx .r2{width:860px; height:860px}
.cta-band .fx .r3{width:1180px; height:1180px}
.cta-band .fx .glow{
  position:absolute; left:50%; top:38%; translate:-50% -50%; width:720px; height:520px;
  filter:blur(90px); opacity:.4;
  background:radial-gradient(ellipse,#4A5BF7 0%,rgba(124,92,252,.5) 45%,transparent 72%);
}
.cta-band h2{font-size:clamp(2rem,4.2vw,3.2rem); letter-spacing:-.032em; margin-bottom:var(--s5); color:#fff}
.cta-band .lead{max-width:56ch; margin-inline:auto}
.cta-actions{display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:center; margin-top:var(--s9)}

/* ---------- 18. FOOTER ---------- */
.foot{background:#060919; color:var(--on-dark-2); padding-block:var(--s12) var(--s8)}
.foot-top{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));
  gap:clamp(28px,4vw,56px); padding-bottom:var(--s11)}
.foot-brand .brand-word{color:#fff}
.foot-brand p{margin-top:var(--s5); font-size:var(--fs-sm); color:var(--on-dark-3); max-width:34ch; line-height:1.62}
.foot-social{display:flex; gap:var(--s3); margin-top:var(--s6)}
.foot-social a{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--hairline-dark); color:var(--on-dark-2);
  transition:all var(--t-fast) var(--e-out);
}
.foot-social a:hover{background:var(--grad-brand); border-color:transparent; color:#fff; transform:translateY(-2px)}
.foot .foot-h{font-family:var(--font-display); font-size:var(--fs-xs); font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; margin-bottom:var(--s5)}
.foot ul{list-style:none; display:grid; gap:var(--s3)}
.foot ul a{font-size:var(--fs-sm); color:var(--on-dark-3)}
.foot ul a:hover{color:#fff}
.foot-bot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s5);
  padding-top:var(--s7); border-top:1px solid var(--hairline-dark); font-size:var(--fs-xs); color:var(--on-dark-3)}
.foot-bot ul{display:flex; gap:var(--s6); list-style:none}
.foot-bot a{color:var(--on-dark-3)}
.foot-bot a:hover{color:#fff}

/* ---------- 19. PAGE HEADER (inner pages) ---------- */
.phead{
  position:relative; background:var(--grad-ink); color:#fff; overflow:hidden; isolation:isolate;
  padding-top:calc(var(--nav-h) + clamp(48px,6vw,80px)); padding-bottom:clamp(56px,6vw,88px);
}
.phead .fx{position:absolute; inset:0; z-index:-1}
.phead .fx .blob{position:absolute; border-radius:50%; filter:blur(90px)}
.phead .fx .b1{width:560px;height:560px;top:-240px;left:-120px;
  background:radial-gradient(circle,#4A5BF7,transparent 68%); opacity:.44}
.phead .fx .b2{width:460px;height:460px;top:-140px;right:-100px;
  background:radial-gradient(circle,#FF7A2F,transparent 68%); opacity:.2}
.phead .mesh{position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 20%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 20%,#000,transparent 75%)}
.phead h1{color:#fff; margin:var(--s5) 0 var(--s5)}
.crumbs{display:flex; align-items:center; gap:var(--s3); font-size:var(--fs-xs); color:var(--on-dark-3)}
.crumbs a{color:var(--on-dark-3)} .crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:#fff; font-weight:600}

/* ---------- 20. ABOUT PAGE ---------- */
.prose{max-width:70ch}
.prose > * + *{margin-top:var(--s5)}
.prose p{font-size:var(--fs-lead); line-height:1.72; color:var(--text-2)}
.prose h2{margin-top:var(--s10); margin-bottom:var(--s5)}
.prose h3{margin-top:var(--s8); margin-bottom:var(--s3)}
.prose ul{padding-left:0; list-style:none; display:grid; gap:var(--s3)}
/* Bullet is absolutely positioned rather than a grid column. A grid li puts
   EVERY child in its own cell, so "<strong>Lead.</strong> trailing text" split
   across two cells and the trailing text landed in the 22px bullet column,
   wrapping one word per line. This handles any mix of inline content. */
.prose ul li{position:relative; padding-left:calc(22px + var(--s3));
  font-size:var(--fs-body); color:var(--text-2); line-height:1.62}
.prose ul li::before{content:""; position:absolute; left:6px; top:11px;
  width:7px; height:7px; border-radius:50%; background:var(--grad-warm)}
.prose ul li strong{color:var(--text)}

/* Legal pages emit one .prose wrapper per block, so the usual "* + *" rule
   inside a single .prose never fires between them. */
.prose + .prose{margin-top:var(--s5)}
.prose + .callout, .callout + .prose{margin-top:var(--s7)}
.prose blockquote{
  margin:var(--s8) 0; padding:var(--s7); border-radius:var(--r-lg);
  background:var(--brand-50); border:1px solid var(--brand-100); border-left:4px solid var(--brand);
}
.prose blockquote p{font-family:var(--font-display); font-size:clamp(1.125rem,1.8vw,1.375rem);
  font-weight:650; line-height:1.5; letter-spacing:-.018em; color:var(--text)}

.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center}
.split.narrow-l{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.split.narrow-r{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split.top{align-items:start}
.sticky-head{position:sticky; top:calc(var(--nav-h) + 48px)}
@media (max-width:1080px){.sticky-head{position:static}}

.photo-card{
  position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--line); box-shadow:var(--sh-3); background:var(--paper-3);
}
.photo-card.tall{aspect-ratio:3/4}
.photo-card.square{aspect-ratio:1/1}
.photo-card .photo-slot{
  background:
    repeating-linear-gradient(135deg, rgba(74,91,247,.05) 0 12px, transparent 12px 24px),
    linear-gradient(150deg, var(--brand-50), var(--accent-50));
}
.photo-card .photo-slot .ps-ic{background:#fff; border-color:var(--line); color:var(--brand-600)}
.photo-card .photo-slot .ps-label{color:var(--text)}
.photo-card .photo-slot .ps-hint{color:var(--muted)}
.photo-card .photo-slot .ps-dim{background:var(--paper); color:var(--muted-2); border:1px solid var(--line)}
.photo-mosaic{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4)}
.photo-mosaic .photo-card:nth-child(1){grid-row:span 2; aspect-ratio:3/4}
.photo-mosaic .photo-card:nth-child(2),
.photo-mosaic .photo-card:nth-child(3){aspect-ratio:4/3}

/* Timeline */
.timeline{position:relative; display:grid; gap:0; padding-left:0}
.timeline::before{
  content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(to bottom, var(--brand), var(--violet) 45%, var(--accent));
  opacity:.28; border-radius:2px;
}
.tl{position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--s6);
  padding-block:var(--s6)}
.tl-dot{
  position:relative; z-index:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:2px solid var(--brand-100); box-shadow:var(--sh-1);
  transition:transform var(--t-mid) var(--e-spring), border-color var(--t-mid) linear;
}
.tl-dot i{width:11px; height:11px; border-radius:50%; background:var(--grad-brand); display:block}
.tl:hover .tl-dot{transform:scale(1.14); border-color:var(--brand)}
.tl:last-child .tl-dot{border-color:var(--accent-100)}
.tl:last-child .tl-dot i{background:var(--grad-warm)}
.tl-year{font-family:var(--font-display); font-weight:800; font-size:var(--fs-xs); letter-spacing:.1em;
  color:var(--accent-600); text-transform:uppercase; margin-bottom:6px}
.tl h3{font-size:1.1875rem; margin-bottom:var(--s2); letter-spacing:-.02em}
.tl p{font-size:var(--fs-sm); color:var(--muted); line-height:1.62; max-width:62ch}

/* Value cards */
.values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.value{
  padding:var(--s7); border-radius:var(--r-lg); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.value:hover{transform:translateY(-4px); box-shadow:var(--sh-3)}
.value-ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--grad-brand); color:#fff; box-shadow:var(--sh-brand); margin-bottom:var(--s5)}
.value:nth-child(2) .value-ic{background:linear-gradient(135deg,#7C5CFC,#A17CFF); box-shadow:0 12px 32px rgba(124,92,252,.28)}
.value:nth-child(3) .value-ic{background:var(--grad-warm); box-shadow:var(--sh-warm)}
.value:nth-child(4) .value-ic{background:linear-gradient(135deg,#2AA981,#38C79A); box-shadow:0 12px 32px rgba(42,169,129,.26)}
.value:nth-child(5) .value-ic{background:linear-gradient(135deg,#E0447C,#FF6A9B); box-shadow:0 12px 32px rgba(224,68,124,.26)}
.value:nth-child(6) .value-ic{background:linear-gradient(135deg,#1B2464,#3A46D8); box-shadow:var(--sh-brand)}
.value h3{font-size:1.125rem; margin-bottom:var(--s3); letter-spacing:-.02em}
.value p{font-size:var(--fs-sm); color:var(--muted); line-height:1.62}

/* ---------- 21. KNOWLEDGE BASE ---------- */
.kb-search{
  position:relative; display:flex; align-items:center; gap:var(--s3);
  padding:6px 6px 6px var(--s5); border-radius:var(--r-pill);
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px) saturate(160%); max-width:560px;
  box-shadow:0 18px 44px rgba(0,0,0,.24);
  transition:border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.kb-search:focus-within{border-color:rgba(255,255,255,.42); box-shadow:0 0 0 4px rgba(74,91,247,.24)}
.kb-search svg{flex-shrink:0; color:rgba(255,255,255,.6)}
.kb-search input{flex:1; min-width:0; border:0; background:none; outline:0; padding:13px 0;
  color:#fff; font-family:var(--font-body); font-size:var(--fs-body)}
.kb-search input::placeholder{color:rgba(255,255,255,.44)}
.kb-search kbd{
  font-family:var(--font-mono); font-size:.6875rem; padding:6px 9px; border-radius:8px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.62);
}
.az{display:flex; flex-wrap:wrap; gap:var(--s2)}
.az button, .az a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:750; font-size:var(--fs-sm);
  background:var(--paper); border:1px solid var(--line); color:var(--text-2);
  transition:all var(--t-fast) var(--e-out);
}
.az button:hover, .az a:hover{background:var(--brand-50); border-color:var(--brand); color:var(--brand-700); transform:translateY(-2px)}
.az button.on{background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:var(--sh-brand)}
.az .wide{width:auto; padding-inline:var(--s5)}
.az-dark button, .az-dark a{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#fff}
.az-dark button:hover, .az-dark a:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff}

.kb-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.term-card{
  position:relative; display:flex; flex-direction:column; gap:var(--s3); min-height:224px;
  padding:var(--s7) var(--s6) var(--s6); border-radius:var(--r-lg); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh-1); overflow:hidden; isolation:isolate;
  scroll-margin-top:calc(var(--nav-h) + 120px);
  transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) linear;
}
.term-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:2;
  background:var(--grad-brand); transform:scaleY(0); transform-origin:top;
  transition:transform var(--t-mid) var(--e-out)}
.term-card:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-2)}
.term-card:hover::before{transform:scaleY(1)}
.term-ghost{
  position:absolute; top:-16px; right:2px; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:6.25rem; line-height:1;
  letter-spacing:-.06em; background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.12;
  transition:opacity var(--t-mid) linear, transform var(--t-mid) var(--e-out);
}
.term-card:hover .term-ghost{opacity:.2; transform:translateY(2px) scale(1.04)}
.term-card-top{position:relative; z-index:1; display:flex; align-items:flex-start;
  justify-content:space-between; gap:var(--s3)}
.term-card h3{font-size:1.1875rem; letter-spacing:-.022em}
.term-card h3 a{color:inherit}
.term-card:hover h3 a{color:var(--brand-600)}
.term-card p{position:relative; z-index:1; font-size:var(--fs-sm); color:var(--muted); line-height:1.58;
  max-width:32ch}
.term-card-foot{position:relative; z-index:1; margin-top:auto; padding-top:var(--s5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.term-card:hover .topic-go{background:var(--grad-brand); color:#fff; transform:translateX(3px)}

.kb-featured{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4)}
.kb-feat{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) var(--s6); border-radius:var(--r-md);
  background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-700);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm);
  transition:all var(--t-mid) var(--e-out);
}
.kb-feat:hover{background:var(--paper); border-color:var(--brand); box-shadow:var(--sh-2);
  transform:translateY(-2px); color:var(--brand-700)}
.kb-empty{padding:var(--s12) var(--s6); text-align:center; display:none}
.kb-empty.show{display:block}
.kb-empty h3{margin-bottom:var(--s3)}
.kb-empty p{color:var(--muted)}

/* KB stats row */
.kb-facts{display:flex; flex-wrap:wrap; gap:var(--s6) var(--s9); margin-top:var(--s8)}
.kb-fact{display:flex; align-items:center; gap:var(--s4)}
.kb-fact .n{font-family:var(--font-display); font-weight:800; font-size:1.75rem; letter-spacing:-.03em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.kb-fact .l{font-size:var(--fs-xs); color:var(--on-dark-3); line-height:1.35; max-width:14ch}

/* ---------- 22. TERM PAGE ---------- */
.term-layout{display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:clamp(32px,4vw,64px);
  align-items:start}
.term-layout > *{min-width:0}
.figure{min-width:0}
.term-hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s5)}
.term-letter{
  width:56px; height:56px; border-radius:var(--r-md); display:grid; place-items:center; flex-shrink:0;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px);
  font-family:var(--font-display); font-weight:800; font-size:1.625rem; color:#fff; letter-spacing:-.03em;
}
.term-title-row{display:flex; align-items:center; gap:var(--s5); margin-top:var(--s5)}
.term-title-row h1{margin:0}
.term-watermark{
  position:absolute; right:5%; top:52%; translate:0 -46%; z-index:-1; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:clamp(9rem,17vw,15rem); line-height:.8;
  letter-spacing:-.07em; color:rgba(255,255,255,.045); user-select:none;
}
@media (max-width:900px){.term-watermark{display:none}}

.def-card{
  position:relative; padding:clamp(24px,3vw,36px); border-radius:var(--r-lg);
  background:linear-gradient(140deg, var(--brand-50), #fff 60%, var(--accent-50));
  border:1px solid var(--brand-100); box-shadow:var(--sh-2); overflow:hidden;
}
.def-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad-brand)}
.def-card .eyebrow{margin-bottom:var(--s4)}
.def-card p{font-family:var(--font-display); font-size:clamp(1.125rem,1.9vw,1.4375rem); font-weight:650;
  line-height:1.5; letter-spacing:-.02em; color:var(--text)}

.callout{
  display:grid; grid-template-columns:38px minmax(0,1fr); gap:var(--s5);
  padding:var(--s6); border-radius:var(--r-md); background:var(--paper-2); border:1px solid var(--line);
}
.callout-ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff;
  background:var(--grad-brand); box-shadow:var(--sh-brand)}
.callout h3{font-size:var(--fs-h4); margin-bottom:6px}
.callout p{font-size:var(--fs-sm); color:var(--muted); line-height:1.62}
.callout.warn{background:var(--accent-50); border-color:var(--accent-100)}
.callout.warn .callout-ic{background:var(--grad-warm); box-shadow:var(--sh-warm)}
.callout.tip{background:#EEFBF5; border-color:#CDEEDF}
.callout.tip .callout-ic{background:linear-gradient(135deg,#2AA981,#38C79A); box-shadow:0 10px 26px rgba(42,169,129,.24)}

.figure{
  margin:var(--s9) 0; padding:clamp(24px,3vw,40px); border-radius:var(--r-lg);
  background:var(--paper-2); border:1px solid var(--line);
}
.figure svg{width:100%; height:auto; display:block}
.figure figcaption{margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--muted); line-height:1.6}

.steps{counter-reset:s; display:grid; gap:var(--s6); list-style:none}
.steps li{
  counter-increment:s; position:relative; display:grid; grid-template-columns:32px minmax(0,1fr);
  gap:var(--s5); align-items:start;
}
.steps li::before{
  content:counter(s); width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-700);
  font-family:var(--font-display); font-weight:750; font-size:.8125rem;
}
.steps li > div{min-width:0}
.steps li strong{display:block; font-family:var(--font-display); font-weight:700; color:var(--text);
  margin-bottom:3px; letter-spacing:-.012em; font-size:1.0625rem}
.steps li span{display:block; font-size:var(--fs-sm); color:var(--muted); line-height:1.62}

/* Sticky sidebar */
.term-side{position:sticky; top:calc(var(--nav-h) + 28px); display:grid; gap:var(--s6)}
.side-box{padding:var(--s6); border-radius:var(--r-md); background:var(--paper-2); border:1px solid var(--line)}
.side-box .side-h{font-family:var(--font-display); font-size:var(--fs-xs); font-weight:750; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:var(--s5)}
.toc{list-style:none; display:grid; gap:2px}
.toc a{
  display:block; padding:8px 12px; border-radius:9px; font-size:var(--fs-sm); color:var(--text-2);
  border-left:2px solid transparent; transition:all var(--t-fast) var(--e-out);
}
.toc a:hover{background:var(--paper); color:var(--brand-600)}
.toc a.on{background:var(--paper); border-left-color:var(--brand); color:var(--brand-700); font-weight:650}
.side-chips{display:flex; flex-wrap:wrap; gap:var(--s2)}

.pager{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5)}
.pager a{
  display:flex; flex-direction:column; gap:6px; padding:var(--s6) var(--s7); border-radius:var(--r-md);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1); color:var(--text);
  transition:all var(--t-mid) var(--e-out);
}
.pager a:hover{border-color:var(--brand); box-shadow:var(--sh-3); transform:translateY(-3px); color:var(--text)}
.pager .dir{display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-xs); color:var(--muted-2);
  font-weight:650; letter-spacing:.04em; text-transform:uppercase}
.pager .t{font-family:var(--font-display); font-weight:750; font-size:1.0625rem; letter-spacing:-.02em}
.pager a.next{text-align:right; align-items:flex-end}
.pager a.disabled{opacity:.4; pointer-events:none}

/* Related tutorials mini */
.mini-tuts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.mini-tut{
  display:flex; flex-direction:column; border-radius:var(--r-md); overflow:hidden;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:all var(--t-mid) var(--e-out);
}
.mini-tut:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-2)}
.mini-tut .m-media{aspect-ratio:16/9; overflow:hidden; background:var(--ink-2)}
.mini-tut .m-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--e-out)}
.mini-tut:hover .m-media img{transform:scale(1.06)}
.mini-tut .m-body{padding:var(--s5); display:grid; gap:var(--s3)}
.mini-tut h3{font-size:1rem; font-weight:700; letter-spacing:-.018em; line-height:1.36}
.mini-tut h3 a{color:inherit}
.mini-tut:hover h3 a{color:var(--brand-600)}
.mini-tut .m-meta{font-size:var(--fs-xs); color:var(--muted-2)}

/* ---------- 23. TUTORIAL INDEX FILTERS ---------- */
.filters{display:flex; flex-wrap:wrap; gap:var(--s2)}
.filters button{
  padding:9px 17px; border-radius:var(--r-pill); background:var(--paper); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:650; font-size:var(--fs-sm); color:var(--text-2);
  transition:all var(--t-fast) var(--e-out);
}
.filters button:hover{border-color:var(--brand); color:var(--brand-700); transform:translateY(-1px)}
.filters button.on{background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:var(--sh-brand)}

/* ---------- 24. FAQ ---------- */
.faq{display:grid; gap:var(--s3); max-width:820px; margin-inline:auto}
.faq details{
  border-radius:var(--r-md); background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh-1); overflow:hidden; transition:border-color var(--t-fast) linear, box-shadow var(--t-mid) linear;
}
.faq details[open]{border-color:var(--brand-100); box-shadow:var(--sh-2)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  padding:var(--s6) var(--s7); cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:700; font-size:1.0625rem; letter-spacing:-.018em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex-shrink:0;
  background:var(--paper-3); color:var(--text-2); transition:all var(--t-mid) var(--e-out)}
.faq details[open] summary .pm{background:var(--grad-brand); color:#fff; transform:rotate(45deg)}
.faq .fa{padding:0 var(--s7) var(--s7); font-size:var(--fs-sm); color:var(--muted); line-height:1.68; max-width:68ch}

/* ---------- 25. UTILITIES ---------- */
.mt-0{margin-top:0} .mt-3{margin-top:var(--s3)} .mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)} .mt-7{margin-top:var(--s7)}
.mt-8{margin-top:var(--s8)} .mt-9{margin-top:var(--s9)} .mt-10{margin-top:var(--s10)}
.mt-11{margin-top:var(--s11)}
.mb-5{margin-bottom:var(--s5)} .mb-7{margin-bottom:var(--s7)} .mb-8{margin-bottom:var(--s8)}
.center{text-align:center} .flex{display:flex} .between{justify-content:space-between}
.items-center{align-items:center} .items-end{align-items:flex-end} .wrap-flex{flex-wrap:wrap}
.gap-3{gap:var(--s3)} .gap-4{gap:var(--s4)} .gap-5{gap:var(--s5)} .gap-6{gap:var(--s6)}
.hide{display:none}
.sec-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s7); flex-wrap:wrap}
.sec-head-row .sec-head{margin-bottom:0}

/* ---------- 26. MOTION ---------- */
[data-rv]{opacity:0; transform:translateY(22px); transition:opacity .78s var(--e-out), transform .78s var(--e-out)}
[data-rv].in{opacity:1; transform:none}
[data-rv="fade"]{transform:none}
[data-rv="left"]{transform:translateX(-24px)}
[data-rv="right"]{transform:translateX(24px)}
[data-rv="scale"]{transform:scale(.965)}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.float-d{animation-delay:-3.5s}
@keyframes pulse-ring{0%{transform:translate(-50%,-50%) scale(.9); opacity:.5}
  100%{transform:translate(-50%,-50%) scale(1.25); opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important; scroll-behavior:auto !important}
  [data-rv]{opacity:1 !important; transform:none !important}
}

/* ---------- 27. RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:var(--s10)}
  .portrait{max-width:440px; margin-inline:auto; width:100%}
  .portrait-badge.pb-1{left:var(--s4)} .portrait-badge.pb-2{right:var(--s4)}
  .why-grid{grid-template-columns:1fr; gap:var(--s9)}
  .term-layout{grid-template-columns:minmax(0,1fr)}
  .term-side{position:static; grid-template-columns:repeat(2,minmax(0,1fr)); display:grid}
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .kb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb-featured{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topics{grid-template-columns:repeat(6,minmax(0,1fr))}
  .topics > *,.topics > *:nth-child(n+5){grid-column:span 2}
  .topics > *:nth-child(7){grid-column:span 6}
  .split,.split.narrow-l,.split.narrow-r{grid-template-columns:1fr; gap:var(--s9)}
  .news{grid-template-columns:1fr}
  .mini-tuts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .tut-grid,.tut-grid.featured{grid-template-columns:1fr}
  .tut-grid.featured .card:first-child{grid-row:auto}
  .quotes{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article{grid-template-columns:1fr auto; gap:var(--s4)}
  .article-date{grid-column:1/-1; order:-1}
}
@media (max-width:680px){
  :root{--nav-h:64px}
  .topics{grid-template-columns:1fr}
  .topics > *,.topics > *:nth-child(n+5),.topics > *:nth-child(7){grid-column:span 1}
  .kb-grid,.kb-featured{grid-template-columns:1fr}
  .values,.g2,.g3,.g4{grid-template-columns:1fr}
  .mini-tuts{grid-template-columns:1fr}
  .term-side{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager a.next{text-align:left; align-items:flex-start}
  .card-row{grid-template-columns:1fr}
  .card-row .card-media{aspect-ratio:16/9}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-actions .btn{width:100%}
  .field{flex-direction:column; border-radius:var(--r-lg); padding:var(--s3)}
  .field .btn{width:100%}
  .photo-mosaic{grid-template-columns:1fr}
  .photo-mosaic .photo-card:nth-child(1){grid-row:auto; aspect-ratio:4/3}
  /* badges sit below the frame instead of overlapping it */
  .portrait{display:flex; flex-direction:column; gap:var(--s4)}
  .portrait-frame{order:-1}
  .portrait-badge,.portrait-badge.pb-1,.portrait-badge.pb-2{position:static; inset:auto}
  /* wide diagrams stay legible by scrolling rather than shrinking */
  .figure{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .figure svg{min-width:560px}
  .term-title-row{flex-direction:column; align-items:flex-start; gap:var(--s4)}
}

/* ---------- TUTORIAL SINGLE ---------- */
.tut-player{
  position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2);
  border:1px solid var(--hairline-dark); box-shadow:var(--sh-lg); aspect-ratio:16/9;
}
.tut-player img{width:100%; height:100%; object-fit:cover; display:block}
.tut-player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.tut-player .veil{
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,12,36,.10),rgba(8,12,36,.62));
  transition:background .35s var(--ease)
}
.tut-player:hover .veil{background:linear-gradient(180deg,rgba(8,12,36,.04),rgba(8,12,36,.52))}
.tut-player .big-play{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff; cursor:pointer;
  border:0; background:none; width:100%; padding:0
}
.tut-player .big-play i{
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-warm); box-shadow:0 12px 40px rgba(196,78,9,.5);
  transition:transform .32s var(--ease-out)
}
.tut-player:hover .big-play i{transform:scale(1.09)}
.tut-player .big-play svg{margin-left:4px}
.tut-player .soon{
  position:absolute; left:0; right:0; bottom:0; padding:var(--s5) var(--s6);
  font-size:var(--fs-xs); color:var(--on-dark-2); letter-spacing:.02em
}

.tut-facts{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}

.checks{list-style:none; display:grid; gap:var(--s4)}
.checks li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:var(--s4); align-items:start}
.checks li svg{color:var(--brand); margin-top:3px}
.checks li span{font-size:var(--fs-sm); color:var(--text-2); line-height:1.62}
.checks.warm li svg{color:var(--accent-600)}

.chapters{list-style:none; display:grid; gap:2px; counter-reset:c}
.chapters li{
  display:grid; grid-template-columns:76px minmax(0,1fr); gap:var(--s5); align-items:baseline;
  padding:var(--s5) var(--s5); border-radius:var(--r-sm); border:1px solid transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease)
}
.chapters li:hover{background:var(--paper-2); border-color:var(--line)}
.chapters .t{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; color:var(--brand-700);
  background:var(--brand-50); border:1px solid var(--brand-100); border-radius:99px;
  padding:4px 9px; text-align:center; letter-spacing:.01em
}
.chapters h3{font-size:1.0625rem; letter-spacing:-.015em; margin-bottom:4px}
.chapters p{font-size:var(--fs-sm); color:var(--muted); line-height:1.6; margin:0}

.stack-row{display:flex; flex-wrap:wrap; gap:var(--s3)}
.stack-row span{
  font-size:var(--fs-xs); font-weight:600; color:var(--text-2); background:var(--paper-2);
  border:1px solid var(--line); border-radius:99px; padding:7px 13px
}

@media (max-width:640px){
  .chapters li{grid-template-columns:1fr; gap:var(--s2)}
  .chapters .t{justify-self:start}
  .tut-player .big-play i{width:64px; height:64px}
}

/* ---------- LEGAL PAGES ---------- */
.fill{
  background:#FFF3C4; color:#6B4E00; border:1px dashed #E0B400; border-radius:5px;
  padding:1px 7px; font-family:var(--font-mono); font-size:.86em; font-weight:600;
  white-space:nowrap
}
.legal-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  padding:var(--s5) var(--s6); border-radius:var(--r-sm);
  background:var(--paper-2); border:1px solid var(--line); margin-bottom:var(--s8)
}
.legal-meta .lm-ic{color:var(--brand); display:flex}
.legal-meta p{font-size:var(--fs-sm); color:var(--muted); margin:0}
.prose .mono{font-family:var(--font-mono); font-size:.9em; color:var(--brand-700)}
.prose a{color:var(--brand-600); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px; text-decoration-color:var(--brand-100)}
.prose a:hover{text-decoration-color:var(--brand-600)}

/* ---------- COOKIE CONSENT ---------- */
.cc{position:fixed; left:0; right:0; bottom:0; z-index:9000; padding:var(--s5);
  display:flex; justify-content:center; pointer-events:none}
.cc-box{pointer-events:auto; width:100%; max-width:760px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 24px 70px rgba(8,12,36,.28);
  padding:var(--s7); transform:translateY(14px); opacity:0;
  transition:transform .38s var(--ease-out), opacity .38s var(--ease-out)}
.cc.in .cc-box{transform:none; opacity:1}
.cc-main h2{font-size:1.125rem; letter-spacing:-.02em; margin-bottom:8px}
.cc-main p{font-size:var(--fs-sm); color:var(--text-2); line-height:1.6; margin:0}
.cc-main a{color:var(--brand-600); text-decoration:underline; text-underline-offset:2px}

.cc-prefs{margin-top:var(--s6); border-top:1px solid var(--line); padding-top:var(--s3)}
.cc-row{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5);
  padding:var(--s4) 0; border-bottom:1px solid var(--hairline)}
.cc-row:last-child{border-bottom:0}
.cc-row span{display:block}
.cc-row strong{display:block; font-size:var(--fs-sm); font-weight:650; color:var(--text)}
.cc-row em{display:block; font-style:normal; font-size:var(--fs-xs); color:var(--muted);
  line-height:1.5; margin-top:2px}
.cc-row input{flex-shrink:0; width:20px; height:20px; accent-color:var(--brand); margin-top:2px}
.cc-locked input{opacity:.5}

.cc-acts{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.cc-b{font-family:var(--font-display); font-size:var(--fs-sm); font-weight:650;
  padding:11px 20px; border-radius:99px; cursor:pointer; border:1px solid transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease)}
/* Reject carries the same visual weight as accept: an EU requirement, and
   the right default everywhere else too. */
.cc-yes{background:var(--brand); color:#fff; border-color:var(--brand)}
.cc-yes:hover{background:var(--brand-700)}
.cc-alt{background:var(--paper-2); color:var(--text); border-color:var(--line)}
.cc-alt:hover{background:#fff; border-color:var(--brand-200)}
.cc-ghost{background:none; color:var(--muted); margin-right:auto; padding-left:0}
.cc-ghost:hover{color:var(--text)}

/* Held-back embed: thumbnail plus play button, no third-party request. */
.tut-player[data-embed]{cursor:pointer}
.tut-player .consent-note{position:absolute; left:0; right:0; bottom:0;
  padding:var(--s5) var(--s6); font-size:var(--fs-xs); color:var(--on-dark-2)}

@media (max-width:640px){
  .cc{padding:0}
  .cc-box{border-radius:var(--r-lg) var(--r-lg) 0 0; padding:var(--s6)}
  .cc-acts{flex-direction:column-reverse}
  .cc-b{width:100%}
  .cc-ghost{margin-right:0; order:3}
}