/* =========================
   Design Tokens
========================= */
@font-face{font-family:ABeeZee;src:url("../fonts/abeezee-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Basically Sans";src:url("../fonts/basically.sans-serif.otf") format("opentype");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --font-body: ABeeZee, "Trebuchet MS", system-ui, sans-serif;
  --font-accent: "Basically Sans", ABeeZee, "Inter", system-ui, sans-serif;
  --font-display: "Basically Sans", ABeeZee, "Inter", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --color-primary-50:#e6eeee;--color-primary-100:#ccdcdc;--color-primary-300:#668987;--color-primary-500:#003A37;--color-primary-700:#002e2c;--color-primary-900:#001d1b;
  --color-secondary-50:#edf3f3;--color-secondary-300:#9db6b5;--color-secondary-500:#4E7775;--color-secondary-700:#365957;
  --color-accent-50:#f6f8f8;--color-accent-500:#8b9b9a;--color-accent-700:#5d6b6a;
  --color-info-500:#4E7775;--color-success-500:#2f6f5e;--color-warning-500:#a56c2e;--color-error-500:#b3454d;
  --color-cocoa-900:#1f1d1e;--color-cocoa-700:#373435;--color-cocoa-500:#625e60;
  --color-slate-950:#071817;--color-slate-900:#003A37;--color-slate-700:#4E7775;
  --color-cream-50:#f8fafa;--color-cream-100:#ECF0F0;--color-surface:#ECF0F0;--color-surface-strong:#ffffff;
  --color-border:rgba(55,52,53,.16);--color-border-strong:rgba(55,52,53,.32);--color-text-main:#373435;--color-text-muted:#686365;--color-text-inverse:#f8fafa;
  --gradient-primary:linear-gradient(135deg,#003A37 0%,#4E7775 100%);
  --gradient-berry:linear-gradient(135deg,#4E7775 0%,#ECF0F0 62%,#ffffff 100%);
  --gradient-cocoa:linear-gradient(135deg,#071817 0%,#003A37 58%,#373435 100%);
  --gradient-glow:radial-gradient(circle at 30% 20%,rgba(0,58,55,.28),transparent 34%),radial-gradient(circle at 80% 10%,rgba(78,119,117,.34),transparent 28%),linear-gradient(135deg,#f8fafa,#ECF0F0);
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
  --container:1180px;--section-y:clamp(72px,10vw,136px);
  --radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-pill:999px;
  --shadow-sm:0 8px 24px rgba(55,52,53,.08);--shadow-md:0 16px 42px rgba(55,52,53,.14);--shadow-lg:0 24px 70px rgba(55,52,53,.18);
  --z-nav:50;--z-modal:100;--z-toast:120;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.2,.7,.2,1);--transition-fast:150ms var(--ease-out);--transition-base:250ms var(--ease-out);--transition-slow:600ms var(--ease-soft);
  --breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;
}

/* =========================
   Base
========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--color-text-main);background:var(--color-cream-50);overflow-x:hidden}
body.modal-open{overflow:hidden}
img,svg{display:block;max-width:100%}
svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid rgba(0,58,55,.78);outline-offset:4px}
::selection{background:var(--color-secondary-300);color:var(--color-cocoa-900)}
.skip-link{position:fixed;left:16px;top:16px;z-index:200;transform:translateY(-140%);padding:10px 14px;border-radius:var(--radius-pill);background:var(--color-cocoa-900);color:#fff;transition:var(--transition-base)}
.skip-link:focus{transform:none}
.container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
.section{position:relative;padding:var(--section-y) 0;overflow:hidden}
.section-light{background:linear-gradient(180deg,#f8fafa 0%,#ECF0F0 100%)}
.section-cream{background:radial-gradient(circle at 15% 5%,rgba(0,58,55,.12),transparent 30%),linear-gradient(180deg,#ECF0F0 0%,#f8fafa 100%)}
.section-dark{background:var(--gradient-cocoa);color:var(--color-text-inverse)}
.section-dark .section-heading p,.section-dark .color-card p{color:rgba(248,250,250,.76)}
.section-heading{max-width:760px;margin-bottom:var(--space-12)}
.section-heading h2{margin:0 0 var(--space-4);font-size:clamp(34px,5vw,62px);line-height:1.04;font-weight:400}
.section-heading p{margin:0;color:var(--color-text-muted);font-size:18px}
.eyebrow{font-family:var(--font-accent);font-size:14px;color:var(--color-primary-700);margin:0 0 var(--space-3)}

/* =========================
   Typography
========================= */
h1,h2,h3,h4,p{margin-top:0}
.text-display{font-family:var(--font-display);font-size:clamp(56px,9vw,132px);line-height:.92;font-weight:600}
.text-h1{font-family:var(--font-accent);font-size:clamp(44px,7vw,84px);line-height:1.02;font-weight:600}
.text-h2{font-size:clamp(32px,4vw,56px);line-height:1.08}
.body-lg{font-size:20px;line-height:1.7;color:var(--color-text-muted)}

/* =========================
   Navigation
========================= */
.site-nav{position:fixed;inset:16px 20px auto;z-index:var(--z-nav);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-4);width:min(calc(100% - 40px),1180px);margin-inline:auto;padding:10px 12px;border:1px solid rgba(255,255,255,.34);border-radius:var(--radius-pill);background:rgba(31,43,51,.52);color:#fff;backdrop-filter:blur(18px);box-shadow:var(--shadow-sm);transition:var(--transition-base)}
.site-nav.is-scrolled{background:rgba(31,43,51,.82);box-shadow:var(--shadow-md)}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-accent)}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--color-surface);color:var(--color-primary-500);font-family:var(--font-body);font-size:12px;font-weight:400;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.nav-links{justify-self:center;display:flex;gap:var(--space-5);align-items:center}
.nav-links a{padding:8px 2px;color:rgba(255,255,255,.84);transition:var(--transition-fast)}
.nav-links a:hover,.nav-links a.is-active{color:#fff;transform:translateY(-1px)}
.site-nav .nav-toggle{display:none}

/* =========================
   Hero
========================= */
.hero{min-height:92svh;padding:110px 0 64px;color:#fff;background:var(--color-slate-950);overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,26,32,.82),rgba(17,26,32,.34) 45%,rgba(17,26,32,.68)),url("../img/gelato-system-hero.png") center/cover;transform:scale(1.02)}
.hero-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 22%,rgba(0,58,55,.36),transparent 24%),radial-gradient(circle at 70% 20%,rgba(78,119,117,.28),transparent 24%)}
.hero-orbit{position:absolute;right:18px;top:18%;width:360px;height:360px;border:1px solid rgba(255,255,255,.22);border-radius:50%;animation:float 9s ease-in-out infinite}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:clamp(40px,7vw,96px);align-items:center}
.hero-copy{padding-top:86px}
.hero h1{margin:0 0 var(--space-5);font-family:var(--font-display);font-size:clamp(64px,9vw,116px);line-height:.92;font-weight:600;text-shadow:0 12px 40px rgba(0,0,0,.28)}
.hero .eyebrow{color:var(--color-primary-100);text-shadow:0 6px 22px rgba(0,0,0,.35)}
.hero-lede{max-width:670px;color:rgba(248,250,250,.88);font-size:clamp(18px,2vw,22px)}
.hero-actions,.button-demo,.choice-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.hero-metrics{display:flex;gap:var(--space-4);margin:var(--space-8) 0 0;padding:0}
.hero-metrics div{min-width:104px;padding:14px 18px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-md);background:rgba(255,255,255,.1);backdrop-filter:blur(12px)}
.hero-metrics dt{font-size:26px;line-height:1}.hero-metrics dd{margin:4px 0 0;color:rgba(255,255,255,.7);font-size:13px}
.hero-stage{position:relative;min-height:460px}
.floating-card{position:absolute;border:1px solid rgba(255,255,255,.32);background:rgba(31,43,51,.48);backdrop-filter:blur(20px);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.taste-card{left:0;top:28px;width:min(100%,360px);padding:26px;animation:float 7s ease-in-out infinite}
.taste-card h2{font-family:var(--font-accent);font-size:34px;line-height:1.15;margin:16px 0 10px}
.taste-card p{color:rgba(255,255,255,.78)}
.price-card{right:0;top:210px;width:230px;padding:24px;animation:float 8s ease-in-out -2s infinite}
.price-card strong{font-size:52px;line-height:1}.price-card span{color:rgba(255,255,255,.72)}
.chip-card{left:86px;bottom:22px;display:flex;gap:12px;padding:18px}
.chip-card span{width:48px;height:48px;border-radius:50%;background:var(--chip);box-shadow:inset 0 0 0 5px rgba(255,255,255,.28)}
.taste-meter,.progress{height:10px;border-radius:var(--radius-pill);background:rgba(255,255,255,.22);overflow:hidden}
.taste-meter span,.progress span{display:block;height:100%;border-radius:inherit;background:var(--gradient-primary)}
.wave-divider{position:absolute;left:0;right:0;bottom:-1px;height:34px;background-color:var(--color-cream-50);background-image:radial-gradient(24px 24px at 24px 0,#0000 98%,var(--color-cream-50) 100%);background-repeat:repeat-x;background-size:48px 34px}

/* =========================
   Colors
========================= */
.color-grid,.principles-grid,.gradient-grid,.cards-demo,.motion-grid,.practice-grid,.real-grid,.layout-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.principle-card,.ui-card,.motion-card,.practice,.type-spec,.component-block,.real-section,.testimonial,.faq,.cta-example,.spacing-scale,.grid-demo,.radius-demo{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:rgba(255,255,255,.68);box-shadow:var(--shadow-sm)}
.principle-card{padding:26px}.principle-card svg,.feature-card svg{width:34px;height:34px;color:var(--color-primary-700)}.principle-card h3,.ui-card h4,.motion-card h3,.practice h3{margin:16px 0 8px}.principle-card p,.ui-card p,.motion-card p,.practice p{margin:0;color:var(--color-text-muted)}
.color-card{padding:18px;border-radius:var(--radius-lg);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.color-card span{display:block;aspect-ratio:1.7;border-radius:var(--radius-md);background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.color-card h3{font-family:var(--font-mono);font-size:13px;margin:16px 0 8px;color:#fff}
.color-card p{font-size:13px;margin:0}
.opacity-row{display:flex;gap:10px;margin-top:var(--space-8);flex-wrap:wrap}
.opacity-row span{padding:12px 18px;border-radius:var(--radius-pill);background:rgba(0,58,55,var(--alpha));color:var(--color-text-inverse)}

/* =========================
   Components
========================= */
.btn,.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid transparent;border-radius:var(--radius-pill);min-height:44px;padding:0 22px;color:inherit;background:transparent;transition:transform var(--transition-base),box-shadow var(--transition-base),background var(--transition-base),border-color var(--transition-base)}
.btn svg{width:18px;height:18px}.btn:hover,.icon-btn:hover{transform:translateY(-2px)}.btn:active,.icon-btn:active{transform:translateY(0) scale(.98)}.btn:disabled{opacity:.48;cursor:not-allowed;transform:none}
.btn-primary{background:var(--gradient-primary);color:var(--color-text-inverse);box-shadow:0 14px 34px rgba(0,58,55,.28)}
.btn-secondary{background:var(--color-secondary-500);color:#fff;box-shadow:0 14px 34px rgba(78,119,117,.26)}
.btn-outline{border-color:currentColor;background:rgba(255,255,255,.08)}
.btn-ghost{background:rgba(55,52,53,.06);color:var(--color-cocoa-700)}
.btn-link{padding-inline:6px;border-radius:var(--radius-sm);color:var(--color-primary-700);min-height:auto}
.btn-sm{min-height:36px;padding:0 16px;font-size:14px}.btn-lg{min-height:54px;padding:0 28px;font-size:17px}
.icon-btn{width:44px;padding:0;aspect-ratio:1;background:rgba(255,255,255,.1);color:inherit}.icon-btn svg{width:21px;height:21px}
.is-loading{position:relative;color:transparent}.is-loading:after{content:"";position:absolute;width:18px;height:18px;border:2px solid rgba(255,255,255,.42);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
.component-block{padding:var(--space-8);margin-bottom:var(--space-8)}
.block-title{display:flex;justify-content:space-between;gap:var(--space-5);align-items:end;margin-bottom:var(--space-6)}.block-title h3{font-size:28px;margin:0}.block-title p{max-width:620px;margin:0;color:var(--color-text-muted)}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.field{display:grid;gap:8px;font-size:13px}.field span{position:relative}.field input,.field select,.field textarea{width:100%;min-height:48px;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:0 14px;background:#fff;color:var(--color-text-main);transition:var(--transition-fast)}.field textarea{min-height:118px;padding-block:12px;resize:vertical}.field small{color:var(--color-text-muted)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 4px rgba(0,58,55,.16);outline:0}
.field.has-icon svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--color-text-muted)}.field.has-icon input{padding-right:44px}
.field.is-success input{border-color:var(--color-success-500)}.field.is-success small{color:var(--color-success-500)}.field.is-error input{border-color:var(--color-error-500)}.field.is-error small{color:var(--color-error-500)}.field.is-disabled{opacity:.62}.field-wide{grid-column:span 2}
.choice-row{grid-column:1/-1}.choice-row label,.switch{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:#fff}
.switch input{position:absolute;opacity:0}.switch span{width:42px;height:24px;border-radius:var(--radius-pill);background:#d8d1ca;position:relative}.switch span:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:var(--transition-fast)}.switch input:checked+span{background:var(--color-primary-500)}.switch input:checked+span:after{transform:translateX(18px)}
.cards-demo{grid-template-columns:repeat(3,1fr)}.ui-card{padding:24px;transition:var(--transition-base)}.ui-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}.image-card-art{height:120px;border-radius:var(--radius-md);background:var(--gradient-glow);margin-bottom:16px}.pricing-card strong,.stat-card strong{display:block;font-size:48px;line-height:1;color:var(--color-primary-700)}.glass-card{background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.28));backdrop-filter:blur(14px)}
.badge{display:inline-flex;align-items:center;width:max-content;min-height:28px;padding:0 12px;border-radius:var(--radius-pill);background:rgba(55,52,53,.08);font-size:12px}.badge-mint{background:rgba(0,58,55,.14);color:var(--color-primary-900)}.badge-berry{background:rgba(78,119,117,.18);color:var(--color-secondary-700)}
.feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}.mini-navbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:#fff}.mini-navbar a{padding:8px 10px;border-radius:var(--radius-pill)}.mini-navbar .is-active{background:var(--color-primary-100)}
.feedback-stack{display:grid;gap:var(--space-3)}.alert{display:flex;align-items:flex-start;gap:10px;padding:14px;border-radius:var(--radius-md);border:1px solid var(--color-border)}.alert svg{flex:0 0 auto;margin-top:2px}.alert-info{background:rgba(41,163,163,.12);color:#0e6262}.alert-success{background:rgba(56,168,107,.12);color:#276b46}
.toast-demo{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-md);background:var(--color-cocoa-900);color:#fff;width:max-content}.toast-demo span{width:8px;height:8px;border-radius:50%;background:var(--color-primary-500)}
.tooltip-demo:hover+.tooltip,.tooltip-demo:focus+.tooltip{opacity:1;transform:translateY(0)}.tooltip{width:max-content;opacity:0;transform:translateY(4px);transition:var(--transition-fast);padding:8px 10px;border-radius:var(--radius-sm);background:var(--color-cocoa-900);color:#fff;font-size:13px}
.skeleton{height:54px;border-radius:var(--radius-md);background:linear-gradient(90deg,rgba(55,52,53,.08),rgba(55,52,53,.18),rgba(55,52,53,.08));background-size:220% 100%;animation:shimmer 1.4s linear infinite}

/* =========================
   Layout, Gradients, Examples
========================= */
.type-showcase{display:grid;gap:var(--space-5);margin-bottom:var(--space-8)}.type-spec{padding:24px}.type-spec span{display:block;margin-bottom:12px;color:var(--color-text-muted);font-family:var(--font-mono);font-size:12px}.type-spec p{margin:0}
.spec-table{display:grid;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:#fff}.spec-table>div{display:grid;grid-template-columns:1fr 1.1fr .7fr 1fr 1.4fr;gap:12px;padding:13px 16px;border-bottom:1px solid var(--color-border);align-items:center}.spec-table>div:last-child{border-bottom:0}.spec-table strong{color:var(--color-cocoa-900)}
.gradient-card{min-height:210px;border-radius:var(--radius-lg);padding:24px;color:var(--color-cocoa-900);display:flex;flex-direction:column;justify-content:end;box-shadow:var(--shadow-sm)}.g-primary{background:var(--gradient-primary)}.g-berry{background:var(--gradient-berry)}.g-cocoa{background:var(--gradient-cocoa);color:#fff}.g-radial{background:var(--gradient-glow)}
.layout-grid{grid-template-columns:repeat(3,1fr)}.spacing-scale,.grid-demo,.radius-demo{padding:24px}.spacing-scale div{display:flex;gap:12px;align-items:center;margin:12px 0}.spacing-scale span{height:20px;border-radius:var(--radius-pill);background:var(--color-primary-500)}code,.token-code{font-family:var(--font-mono)}.grid-lines{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;height:140px;margin:12px 0}.grid-lines span{border-radius:var(--radius-sm);background:linear-gradient(180deg,rgba(0,58,55,.26),rgba(78,119,117,.18))}
.radius-demo span{display:inline-grid;place-items:center;width:70px;height:70px;margin:0 8px 12px 0;background:var(--color-primary-100);color:var(--color-primary-900)}.radius-demo span:nth-of-type(1){border-radius:8px}.radius-demo span:nth-of-type(2){border-radius:16px}.radius-demo span:nth-of-type(3){border-radius:24px}.radius-demo span:nth-of-type(4){border-radius:50%}
.icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--space-4)}.icon-grid span{display:grid;gap:10px;place-items:center;padding:24px;border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);background:rgba(255,255,255,.08)}.icon-grid svg{width:34px;height:34px;color:var(--color-primary-300)}
.motion-grid{grid-template-columns:repeat(3,1fr)}.motion-card{padding:26px;min-height:210px}.motion-dot,.motion-orb{display:block;width:54px;height:54px;border-radius:50%;background:var(--gradient-primary);box-shadow:0 0 34px rgba(0,58,55,.28);animation:pulse 1.8s ease-in-out infinite}.motion-orb{animation:float 2.8s ease-in-out infinite}
.real-section{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center;padding:var(--space-8);margin-bottom:var(--space-5);background:var(--gradient-glow)}.real-section h3{font-size:38px;line-height:1.1}.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.feature-list span{padding:18px;border-radius:var(--radius-md);background:rgba(255,255,255,.72);border:1px solid var(--color-border)}
.real-grid{grid-template-columns:repeat(3,1fr)}.testimonial,.faq,.cta-example{padding:26px}.testimonial p{font-family:var(--font-accent);font-size:24px;line-height:1.45}.faq details{border-top:1px solid var(--color-border);padding:12px 0}.faq summary{cursor:pointer}.cta-example{background:var(--color-cocoa-900);color:#fff}
.practice-grid{grid-template-columns:repeat(4,1fr)}.practice{padding:24px}
.token-code{display:block;overflow:auto;margin:0;padding:26px;border-radius:var(--radius-lg);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:14px;line-height:1.75}

/* =========================
   Modal and Utilities
========================= */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:var(--transition-base)}
.modal.is-open{opacity:1;pointer-events:auto}.modal-overlay{position:absolute;inset:0;background:rgba(17,26,32,.66);backdrop-filter:blur(10px)}
.modal-panel{position:relative;width:min(100%,560px);border-radius:var(--radius-lg);background:var(--color-surface-strong);box-shadow:var(--shadow-lg);transform:translateY(18px) scale(.98);transition:var(--transition-base);overflow:hidden}.modal.is-open .modal-panel{transform:none}
.modal-panel header,.modal-panel footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:20px 22px;border-bottom:1px solid var(--color-border)}.modal-panel footer{border-top:1px solid var(--color-border);border-bottom:0;justify-content:flex-end}.modal-body{padding:24px}
.scroll-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;background:var(--color-cocoa-900);color:#fff;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transform:translateY(12px);transition:var(--transition-base);z-index:40}.scroll-top.is-visible{opacity:1;pointer-events:auto;transform:none}
.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--transition-slow),transform var(--transition-slow)}.reveal.is-visible{opacity:1;transform:none}.delay-1{transition-delay:90ms}.delay-2{transition-delay:160ms}.delay-3{transition-delay:230ms}

/* =========================
   Animations
========================= */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{to{background-position:-220% 0}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}

/* =========================
   Responsive
========================= */
@media (max-width:1024px){
  .site-nav{grid-template-columns:auto auto;justify-content:space-between}.site-nav .nav-toggle{display:inline-flex}.nav-cta{display:none}.nav-links{position:absolute;left:0;right:0;top:calc(100% + 10px);display:none;flex-direction:column;align-items:stretch;padding:14px;border-radius:var(--radius-lg);background:rgba(31,43,51,.94);box-shadow:var(--shadow-md)}.site-nav.is-open .nav-links{display:flex}.nav-links a{padding:12px 16px}
  .hero-grid{grid-template-columns:1fr}.hero-stage{display:none}
  .color-grid,.principles-grid,.gradient-grid,.practice-grid{grid-template-columns:repeat(2,1fr)}.cards-demo,.layout-grid,.real-grid,.motion-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr 1fr}.icon-grid{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1025px){
  .hero-metrics{display:none}
}
@media (max-width:760px){
  .container{width:min(calc(100% - 28px),var(--container))}.site-nav{inset:10px 12px auto;width:calc(100% - 24px);border-radius:var(--radius-lg)}.brand span:last-child{display:none}
  .hero{min-height:100svh;padding-top:108px;padding-bottom:36px}.hero h1{font-size:clamp(58px,18vw,92px)}.hero-actions .btn{width:100%}.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hero-metrics div{min-width:0;padding:10px}.hero-stage{display:none}
  .color-grid,.principles-grid,.gradient-grid,.cards-demo,.layout-grid,.real-grid,.motion-grid,.practice-grid,.feedback-grid,.real-section{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.field-wide{grid-column:auto}.block-title{display:block}.component-block{padding:20px}.spec-table{overflow-x:auto}.spec-table>div{min-width:720px}.icon-grid{grid-template-columns:repeat(2,1fr)}.feature-list{grid-template-columns:1fr}
}
@media (max-width:480px){
  .button-demo .btn{width:100%}.icon-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}