/* ===================================================================
   Championship Closers: site design system
   =================================================================== */

/* ---------- 1. Custom Properties ---------- */
:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --nav-h: 64px;
  --max-w: 1200px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --ease: 0.25s cubic-bezier(.4,0,.2,1);

  --status-pass: #22c55e;
  --status-fail: #ef4444;
  --status-pending: #f59e0b;
  --status-review: #3b82f6;
}

.dark {
  --bg: #0a0f18;
  --bg-s: #0f1624;
  --bg-e: #141c2e;
  --bg-nav: rgba(10,15,24,0.9);
  --border: rgba(255,255,255,0.07);
  --border-s: rgba(255,255,255,0.12);
  --t1: #f0f4fa;
  --t2: rgba(240,244,250,0.58);
  --t3: rgba(240,244,250,0.35);
  --accent: #3b82f6;
  --accent-h: #60a5fa;
  --accent-sub: rgba(59,130,246,0.14);
  --accent-glow: rgba(59,130,246,0.35);
  --primary: #3b82f6;
  --secondary: #fff;
  --bg-body: #0a0f18;
  --text-footer: #fff;
}

.light {
  --bg: #f8fafc;
  --bg-s: #f1f5f9;
  --bg-e: #ffffff;
  --bg-nav: rgba(248,250,252,0.92);
  --border: rgba(15,23,42,0.08);
  --border-s: rgba(15,23,42,0.12);
  --t1: #0f172a;
  --t2: rgba(15,23,42,0.62);
  --t3: rgba(15,23,42,0.4);
  --accent: #2563eb;
  --accent-h: #1d4ed8;
  --accent-sub: rgba(37,99,235,0.1);
  --accent-glow: rgba(37,99,235,0.22);
  --primary: #2563eb;
  --secondary: #0f172a;
  --bg-body: #f8fafc;
  --text-footer: #0f172a;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{min-height:100vh;font-family:var(--font);background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden;transition:background .4s ease,color .3s ease}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}

.section-inner{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px}

/* ---------- 3. Navigation ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--bg);border-bottom:1px solid var(--border);height:var(--nav-h);transition:background var(--ease)}
.nav-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:28px}

.nav-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--t1)}
.nav-brand-anim{height:36px;width:auto;display:block}
.nav-brand-text{display:none;align-items:center;gap:10px}
.nav-brand-text img{width:28px;height:28px}

/* Theme-aware brand images: CSS hides wrong theme instantly (no JS race) */
.brand-light{display:none!important}
.brand-dark{display:block}
.light .brand-light{display:block!important}
.light .brand-dark{display:none!important}

.nav-links{display:flex;align-items:center;gap:24px;margin-left:auto}
.nav-links a{font-size:.8125rem;font-weight:500;color:var(--t2);transition:color var(--ease);letter-spacing:.01em}
.nav-links a:hover{color:var(--t1)}

.nav-actions{display:flex;align-items:center;gap:14px;margin-left:20px}
.nav-link-signin{font-size:.8125rem;font-weight:500;color:var(--t2);transition:color var(--ease)}
.nav-link-signin:hover{color:var(--t1)}
.nav-cta{font-size:.8125rem;font-weight:600;padding:7px 16px;border-radius:var(--r-sm);background:var(--accent);color:#fff;transition:all var(--ease);white-space:nowrap}
.nav-cta:hover{background:var(--accent-h);transform:translateY(-1px)}

.nav-mobile-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--t1);padding:4px}
.nav-mobile-menu{display:none;flex-direction:column;gap:2px;padding:12px 24px 20px;background:var(--bg);border-bottom:1px solid var(--border)}
.nav-mobile-menu a{font-size:.9375rem;font-weight:500;color:var(--t2);padding:10px 0;transition:color var(--ease)}
.nav-mobile-menu a:hover{color:var(--t1)}
.nav-mobile-menu .nav-cta{display:inline-block;text-align:center;margin-top:8px;color:#fff}
.nav-mobile-divider{height:1px;background:var(--border);margin:8px 0 4px}

/* ---------- 4. Hero ---------- */
.hero-section{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;max-width:var(--max-w);margin:0 auto;padding:calc(var(--nav-h) + 48px) 24px 64px}

.hero-content{max-width:560px}

.hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:600;color:var(--accent);background:var(--accent-sub);border:1px solid rgba(96,165,250,.22);border-radius:100px;padding:5px 14px 5px 10px;margin-bottom:24px;letter-spacing:.02em;text-transform:uppercase;animation:fadeInDown .6s ease-out}
.light .hero-badge{border-color:rgba(37,99,235,.22)}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse-dot 2s ease-in-out infinite}

.hero-title{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:800;line-height:1.08;letter-spacing:-.04em;color:var(--t1);margin-bottom:20px;animation:fadeInUp .7s ease-out .1s both}
.hero-title-accent{color:var(--accent)}

.hero-subtitle{font-size:clamp(1rem,1.6vw,1.125rem);line-height:1.75;color:var(--t2);margin-bottom:32px;animation:fadeInUp .7s ease-out .2s both}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;animation:fadeInUp .7s ease-out .3s both}

.hero-visual{animation:fadeIn 1s ease-out .4s both}
.hero-media-col{display:flex;flex-direction:column;gap:20px;min-width:0}
.media-frame{background:var(--bg-e);border:1px solid var(--border-s);border-radius:var(--r-md);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.18),0 0 0 1px var(--border)}
.light .media-frame{box-shadow:0 24px 80px rgba(15,23,42,.06),0 0 0 1px var(--border)}
.video-embed{aspect-ratio:16/9;position:relative;width:100%}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hero-photo{width:100%;display:block;object-fit:cover;aspect-ratio:4/5;max-height:440px}

.content-figure{margin:0;max-width:100%}
.content-figure img{display:block;width:100%;height:auto}
.hero-spotlight-figure{margin:0}
.hero-spotlight-frame{padding:0;overflow:hidden;box-shadow:0 28px 96px rgba(0,0,0,.28),0 0 0 1px var(--border-s)}
.light .hero-spotlight-frame{box-shadow:0 28px 96px rgba(15,23,42,.1),0 0 0 1px var(--border)}
.hero-spotlight-frame img{display:block;width:100%;height:auto;object-fit:cover;object-position:center center;max-height:min(52vh,460px)}
.swim-figure{margin-top:4px}
.swim-frame{padding:0;overflow:hidden}
.swim-frame img{display:block;width:100%;height:auto;object-fit:cover;max-height:min(44vh,360px)}
.team-stage-figure{max-width:440px;margin:0 auto 32px}
.team-stage-figure .media-frame{padding:0}
.about-hero-figure{max-width:540px;margin:0 auto 28px}
.about-second-figure{max-width:400px;margin:32px auto 0}
.producers-figure{max-width:920px;margin:0 auto}
.producers-frame{padding:0;overflow:hidden}
.figure-caption{font-size:.8125rem;color:var(--t3);text-align:center;margin-top:12px;line-height:1.55;max-width:48rem;margin-left:auto;margin-right:auto;padding:0 8px}
.nav-wordmark{font-size:1rem;font-weight:800;letter-spacing:-.03em;color:var(--t1)}
.tagline-strip{padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-s)}
.tagline-strip-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tagline-pill{font-size:.75rem;font-weight:600;color:var(--accent);background:var(--accent-sub);border:1px solid rgba(96,165,250,.2);padding:6px 14px;border-radius:100px}
.light .tagline-pill{border-color:rgba(37,99,235,.2)}
.story-section{padding:100px 0;border-top:1px solid var(--border)}
/* Extra breathing room before the Producers section (index #story → #producers) */
#story.story-section{padding-bottom:140px}
.story-prose{max-width:640px;margin:0 auto;font-size:1.0625rem;line-height:1.85;color:var(--t2)}
.story-prose p{margin-bottom:1.1em}
.story-prose strong{color:var(--t1)}
.mentor-inline{font-weight:600;color:var(--accent)}
.mentor-inline:hover{text-decoration:underline}
.page-hero{padding:calc(var(--nav-h) + 56px) 24px 48px;max-width:var(--max-w);margin:0 auto}
.page-hero h1{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;letter-spacing:-.03em;margin-bottom:12px;color:var(--t1)}
.page-lead{color:var(--t2);max-width:600px;font-size:1.0625rem;line-height:1.75}
.form-page{min-height:70vh;padding-bottom:80px}
.form-card{max-width:560px;margin:28px auto 0;background:var(--bg-s);border:1px solid var(--border);border-radius:var(--r-md);padding:32px 28px}
.form-row{margin-bottom:20px}
.form-label{display:block;font-size:.8125rem;font-weight:600;color:var(--t1);margin-bottom:6px}
.form-input,.form-textarea,.form-select{width:100%;font:inherit;font-size:.9375rem;padding:10px 14px;border-radius:var(--r-sm);border:1px solid var(--border-s);background:var(--bg-e);color:var(--t1)}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:2px solid var(--accent);outline-offset:1px}
.form-textarea{min-height:96px;resize:vertical}
.form-hint{font-size:.75rem;color:var(--t3);margin-top:8px;line-height:1.5}
.form-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.op-list{list-style:none;padding:0;margin:20px 0 0;max-width:560px}
.op-list li{display:flex;align-items:flex-start;gap:10px;font-size:1rem;color:var(--t2);padding:10px 0;border-bottom:1px solid var(--border)}
.op-list li:last-child{border-bottom:none}
.op-list svg{color:var(--accent);flex-shrink:0;margin-top:2px}
.final-band{padding:80px 0;background:var(--bg-s);border-top:1px solid var(--border)}
.final-prose{max-width:640px;margin:0 auto;text-align:center;font-size:clamp(1rem,2vw,1.125rem);line-height:1.8;color:var(--t2)}
.final-prose p{margin-bottom:1em}
.final-prose strong,.final-prose .final-lead{color:var(--t1);font-weight:700}

/* ---------- 5. Dashboard Mockup ---------- */
.mockup{background:var(--bg-e);border:1px solid var(--border-s);border-radius:var(--r-md);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.18),0 0 0 1px var(--border)}
.light .mockup{box-shadow:0 24px 80px rgba(0,0,0,.08),0 0 0 1px var(--border)}

.mockup-chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--bg-s);border-bottom:1px solid var(--border)}
.mockup-chrome .dot{width:10px;height:10px;border-radius:50%;background:var(--border-s)}
.mockup-chrome-title{margin-left:12px;font-size:.7rem;font-weight:600;color:var(--t3);letter-spacing:.03em;text-transform:uppercase}

.mockup-body{padding:0}

.mockup-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.mockup-project{font-size:.8125rem;font-weight:600;color:var(--t1)}
.mockup-review-badge{font-size:.6875rem;font-weight:600;color:var(--status-review);background:rgba(59,130,246,.12);padding:3px 10px;border-radius:100px}

.mockup-rows{font-size:.8125rem}
.mockup-row{display:flex;align-items:center;padding:9px 16px;border-bottom:1px solid var(--border)}
.mockup-row:last-child{border-bottom:none}
.mockup-row-head{background:var(--bg-s);font-size:.6875rem;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;padding:7px 16px}
.m-col-id{width:60px;flex-shrink:0}
.m-col-name{flex:1;min-width:0}
.m-col-status{width:80px;flex-shrink:0;text-align:right}
.m-id{font-weight:600;font-family:'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;font-size:.75rem;color:var(--accent)}
.m-col-name{color:var(--t2)}

.st{display:inline-block;font-size:.6875rem;font-weight:600;padding:2px 8px;border-radius:4px;white-space:nowrap}
.st-pass{background:rgba(34,197,94,.12);color:var(--status-pass)}
.st-fail{background:rgba(239,68,68,.12);color:var(--status-fail)}
.st-pending{background:rgba(245,158,11,.12);color:var(--status-pending)}
.st-review{background:rgba(59,130,246,.12);color:var(--status-review)}

.mockup-meta{display:flex;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--border);font-size:.6875rem;color:var(--t3)}

/* Subtle perspective: feels like a product preview */
.mockup-preview{transform:perspective(1200px) rotateY(-2deg) rotateX(1deg);transition:transform .5s ease}
.mockup-preview:hover{transform:perspective(1200px) rotateY(0) rotateX(0)}

/* ---------- 6. Social Proof ---------- */
.proof-section{padding:48px 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-s)}
.proof-inner{max-width:var(--max-w);margin:0 auto;text-align:center}
.proof-stats{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap}
.proof-stat{text-align:center}
.proof-stat-value{display:block;font-size:1.25rem;font-weight:800;color:var(--accent);letter-spacing:-.01em}
.proof-stat-label{display:block;font-size:.8125rem;color:var(--t2);margin-top:4px}
.proof-divider{width:1px;height:40px;background:var(--border-s)}

/* ---------- 7. Section Shared ---------- */
.section-header{text-align:center;margin-bottom:56px}
.section-tag{display:inline-block;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:12px}
.section-title{font-size:clamp(1.625rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--t1);margin-bottom:14px}
.section-subtitle{font-size:clamp(.9375rem,1.4vw,1.0625rem);color:var(--t2);max-width:600px;margin:0 auto;line-height:1.7}

/* ---------- 8. Workflow ---------- */
.workflow-section{padding:100px 0;background:var(--bg-s);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

.flow-track{position:relative;padding:48px 0 24px;margin-bottom:48px}
.flow-line{position:absolute;top:71px;left:10%;right:10%;height:2px;background:var(--border-s)}
.flow-steps{display:flex;justify-content:space-between;position:relative;z-index:1}
.flow-step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;gap:10px}
.flow-dot{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:800;box-shadow:0 0 0 4px var(--bg-s);position:relative;z-index:2}
.flow-title{font-size:.8125rem;font-weight:600;color:var(--t1);line-height:1.3}
.flow-role{font-size:.6875rem;font-weight:500;color:var(--t3);text-transform:uppercase;letter-spacing:.05em}

.workflow-benefits{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:center}
.workflow-benefit{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:500;color:var(--t2)}
.workflow-benefit svg{color:var(--accent);flex-shrink:0}

/* ---------- 9. Features ---------- */
.features-section{padding:100px 0}
.features-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.feature-card{flex:0 0 calc((100% - 40px)/3);max-width:calc((100% - 40px)/3)}
.feature-card{background:var(--bg-s);border:1px solid var(--border);border-radius:var(--r-md);padding:32px 24px;transition:all var(--ease)}
.feature-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,.06)}
.dark .feature-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.25)}
.feature-icon{width:44px;height:44px;border-radius:var(--r-sm);background:var(--accent-sub);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:16px}
.feature-title{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:8px;letter-spacing:-.01em}
.feature-desc{font-size:.875rem;line-height:1.7;color:var(--t2)}

/* ---------- 10. Roles ---------- */
.roles-section{padding:100px 0;background:var(--bg-s);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.roles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.role-card{background:var(--bg-e);border:1px solid var(--border);border-radius:var(--r-md);padding:28px 22px;text-align:center;transition:all var(--ease)}
.role-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.role-icon{width:48px;height:48px;border-radius:50%;background:var(--accent-sub);display:flex;align-items:center;justify-content:center;color:var(--accent);margin:0 auto 14px}
.role-title{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:6px}
.role-desc{font-size:.8125rem;line-height:1.65;color:var(--t2)}

/* ---------- 11. Enterprise ---------- */
.enterprise-section{padding:100px 0}
.enterprise-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.enterprise-left .section-tag{margin-bottom:12px}
.enterprise-left .section-title{text-align:left;margin-bottom:20px}
.enterprise-text{font-size:.9375rem;line-height:1.75;color:var(--t2);margin-bottom:28px}
.enterprise-caps{display:flex;flex-direction:column;gap:14px}
.enterprise-cap{display:flex;align-items:center;gap:10px;font-size:.875rem;font-weight:500;color:var(--t1)}
.enterprise-cap svg{color:var(--accent);flex-shrink:0}

.enterprise-card{background:var(--bg-s);border:1px solid var(--border);border-radius:var(--r-md);padding:28px 24px}
.enterprise-card-icon{width:44px;height:44px;border-radius:var(--r-sm);background:var(--accent-sub);display:flex;align-items:center;justify-content:center;color:var(--accent);margin-bottom:16px}
.enterprise-card-title{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:8px}
.enterprise-card-desc{font-size:.875rem;line-height:1.7;color:var(--t2)}

/* ---------- 12. Differentiation ---------- */
.diff-section{padding:80px 0;border-top:1px solid var(--border)}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.diff-heading{font-size:1.125rem;font-weight:700;color:var(--t1);margin-bottom:20px;letter-spacing:-.01em}
.diff-list{list-style:none;display:flex;flex-direction:column;gap:14px}
.diff-list li{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--t2)}
.diff-list svg{color:var(--status-fail);flex-shrink:0;opacity:.7}
.diff-list.positive li svg{color:var(--status-pass);opacity:.95}
.diff-statement{font-size:1.0625rem;line-height:1.75;color:var(--t1);font-weight:500;margin-bottom:24px}
.diff-anchors{display:flex;flex-wrap:wrap;gap:8px}
.diff-anchor{font-size:.75rem;font-weight:600;color:var(--accent);background:var(--accent-sub);border:1px solid rgba(96,165,250,.2);padding:4px 12px;border-radius:100px}
.light .diff-anchor{border-color:rgba(37,99,235,.22)}

/* ---------- 13. CTA ---------- */
.cta-section{padding:100px 0;background:var(--bg-s);border-top:1px solid var(--border)}
.cta-content{text-align:center;max-width:600px;margin:0 auto}
.cta-title{font-size:clamp(1.625rem,3vw,2.25rem);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--t1);margin-bottom:14px}
.cta-subtitle{font-size:1rem;line-height:1.7;color:var(--t2);margin-bottom:32px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- 14. Footer ---------- */
.site-footer{background:var(--bg);border-top:1px solid var(--border);padding:56px 0 28px}
.footer-inner{max-width:var(--max-w);margin:0 auto;padding:0 24px}
.footer-top{display:flex;justify-content:space-between;gap:48px;margin-bottom:40px}
.footer-brand{max-width:360px}
.footer-brand-anim{height:60px;width:auto;display:block;margin-bottom:0}
.footer-brand-fallback{display:none;align-items:center;gap:8px;margin-bottom:0}
.footer-brand-fallback img{width:22px;height:22px}
.dark .footer-brand-anim{mix-blend-mode:screen}
.footer-wordmark{font-size:.9375rem;font-weight:700;color:var(--t1);letter-spacing:-.02em}
.footer-tagline{font-size:.8125rem;color:var(--t3);line-height:1.5}
.footer-columns{display:flex;gap:56px}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col-title{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:4px}
.footer-col a{font-size:.8125rem;color:var(--t2);transition:color var(--ease)}
.footer-col a:hover{color:var(--t1)}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px}
.footer-copyright{font-size:.75rem;color:var(--t3)}

/* ---------- 15. Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:600;font-size:.875rem;padding:10px 22px;border-radius:var(--r-sm);border:none;cursor:pointer;transition:all var(--ease);text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-h);transform:translateY(-1px);box-shadow:0 8px 24px var(--accent-glow)}
.btn-secondary{background:transparent;color:var(--t1);border:1px solid var(--border-s)}
.btn-secondary:hover{border-color:var(--t3);background:var(--accent-sub)}
.btn-ghost{background:transparent;color:var(--t2);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--t1);border-color:var(--border-s)}
.btn-lg{padding:12px 28px;font-size:.9375rem}

/* ---------- 16. Theme Toggle ---------- */
.theme-toggle-button{background:transparent;border:none;cursor:pointer;color:var(--t2);display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0}
.theme-toggle-button svg,.theme-icon{width:16px;height:16px}
.theme-toggle-button.spin svg{animation:spin .5s linear}

/* ---------- 17. Animations ---------- */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

.anim{opacity:0;transform:translateY(16px);transition:opacity .55s ease-out,transform .55s ease-out}
.anim.visible{opacity:1;transform:translateY(0)}

/* Stagger children */
.feature-card:nth-child(2).anim{transition-delay:.06s}
.feature-card:nth-child(3).anim{transition-delay:.12s}
.feature-card:nth-child(4).anim{transition-delay:.18s}
.feature-card:nth-child(5).anim{transition-delay:.24s}
.flow-step:nth-child(2).anim{transition-delay:.08s}
.flow-step:nth-child(3).anim{transition-delay:.16s}
.flow-step:nth-child(4).anim{transition-delay:.24s}
.flow-step:nth-child(5).anim{transition-delay:.32s}
.role-card:nth-child(2).anim{transition-delay:.06s}
.role-card:nth-child(3).anim{transition-delay:.12s}
.role-card:nth-child(4).anim{transition-delay:.18s}

/* ---------- 18. Donate Page ---------- */
.donate-hero-section{width:100%;max-width:var(--max-w);margin:0 auto;padding:64px 48px 48px;text-align:left}
.donate-hero-title{font-size:clamp(2rem,4.5vw,3rem);font-weight:800;margin:0 0 12px;letter-spacing:-.03em;line-height:1.1;color:var(--t1)}
.donate-hero-subtitle{font-size:clamp(1.0625rem,1.8vw,1.25rem);font-weight:600;margin:0 0 20px;color:var(--accent);line-height:1.3}
.donate-hero-description{font-size:clamp(.9375rem,1.4vw,1.0625rem);max-width:720px;margin:0;line-height:1.75;color:var(--t2)}

.donate-grid-container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 48px 64px;flex:1;display:flex;align-items:flex-start}
.donate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%}

.donate-card{background:var(--accent);border:none;border-radius:var(--r-md);padding:28px 24px 24px;text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;min-height:160px;box-shadow:0 2px 8px rgba(0,0,0,.06),0 8px 20px rgba(0,0,0,.05);cursor:pointer}
.donate-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 8px 24px rgba(0,0,0,.12),0 16px 48px rgba(0,0,0,.08)}
.donate-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transition:left .5s ease}
.donate-card:hover::before{left:100%}
a.donate-card::after{display:none}
.donate-card-featured{box-shadow:0 4px 12px rgba(0,0,0,.08)}
.donate-card-premium{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-h) 100%);border:1px solid rgba(255,255,255,.12)}
.donate-card-amount{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;line-height:1;letter-spacing:-.02em;color:#fff}
.donate-card:hover .donate-card-amount{transform:scale(1.04)}
.donate-card-title{font-size:clamp(.8125rem,1.2vw,.9375rem);font-weight:600;line-height:1.3;color:rgba(255,255,255,.85)}
.donate-card-desc{font-size:.8125rem;line-height:1.6;color:rgba(255,255,255,.6);margin:0;font-weight:400}
.donate-card-popular{position:absolute;top:14px;right:14px;font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:rgba(0,0,0,.2);color:rgba(255,255,255,.9);padding:3px 10px;border-radius:100px}
.donate-card-badge{display:none}

/* Donate impact bar */
.donate-impact{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 48px 40px}
.donate-impact-inner{display:flex;gap:32px;flex-wrap:wrap;justify-content:flex-start}
.donate-impact-item{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:500;color:var(--t2)}
.donate-impact-item svg{color:var(--accent);flex-shrink:0}

/* Donate why section */
.donate-why{width:100%;max-width:var(--max-w);margin:0 auto;padding:64px 48px 40px}
.donate-why-inner{border-top:1px solid var(--border);padding-top:48px}
.donate-why-title{font-size:1.25rem;font-weight:700;color:var(--t1);margin-bottom:28px;letter-spacing:-.01em}
.donate-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.donate-why-card{padding:0}
.donate-why-card svg{color:var(--accent);margin-bottom:12px}
.donate-why-card h3{font-size:.9375rem;font-weight:700;color:var(--t1);margin-bottom:6px}
.donate-why-card p{font-size:.8125rem;line-height:1.7;color:var(--t2);margin:0}

.donate-footer-legal{width:100%;max-width:var(--max-w);margin:0 auto;padding:24px 48px 0;text-align:left}
.donate-legal-text{font-size:.8125rem;line-height:1.7;color:var(--t3)}
.donate-legal-text a{color:var(--accent)}
.donate-legal-text a:hover{text-decoration:underline}

.donate-back-container{width:100%;max-width:var(--max-w);margin:0 auto;padding:28px 48px 48px;display:flex;justify-content:flex-start}
.donate-back-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.875rem;color:var(--t1);padding:10px 22px;border:1px solid var(--border-s);border-radius:var(--r-sm);transition:all var(--ease)}
.donate-back-link:hover{border-color:var(--t3);background:var(--accent-sub)}

/* ---------- 19. Legal / Policy Content Pages ---------- */
.legal-page{padding-top:var(--nav-h);min-height:100vh;display:flex;flex-direction:column}
.legal-article{width:100%;max-width:720px;margin:0 auto;padding:48px 24px 64px}

.legal-header{margin-bottom:40px;padding-bottom:32px;border-bottom:1px solid var(--border)}
.legal-header h1{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--t1);margin-bottom:8px}
.legal-meta{font-size:.8125rem;color:var(--t3)}
.legal-breadcrumb{display:inline-block;font-size:.8125rem;font-weight:500;color:var(--t3);margin-bottom:20px;transition:color var(--ease)}
.legal-breadcrumb:hover{color:var(--accent)}

.legal-article section{margin-bottom:32px}
.legal-article h2{font-size:1.0625rem;font-weight:700;color:var(--t1);margin-bottom:10px;letter-spacing:-.01em}
.legal-article p{font-size:.9375rem;line-height:1.8;color:var(--t2);margin-bottom:10px}
.legal-article p:last-child{margin-bottom:0}
.legal-article ul{padding-left:1.25rem;margin:8px 0 0;color:var(--t2)}
.legal-article li{font-size:.9375rem;line-height:1.8;margin-bottom:4px}
.legal-contact{padding-top:16px;border-top:1px solid var(--border)}
.legal-contact a{color:var(--accent)}
.legal-contact a:hover{text-decoration:underline}

/* Legacy compat (kept minimal for any remaining references) */
.donate-page.donate-option-1{justify-content:flex-start;padding:0;gap:0}
.legal-list{margin-top:14px;padding-left:1.25rem;text-align:left;color:var(--t2);line-height:1.8}
.legal-list li{margin:.5rem 0}

/* ---------- 20. Responsive ---------- */
@media(max-width:1024px){
  .hero-section{grid-template-columns:1fr;text-align:center;gap:40px}
  .hero-content{max-width:640px;margin:0 auto}
  .hero-actions{justify-content:center}
  .hero-visual{max-width:520px;margin:0 auto}
  .feature-card{flex:0 0 calc((100% - 20px)/2);max-width:calc((100% - 20px)/2)}
  .roles-grid{grid-template-columns:repeat(2,1fr)}
  .enterprise-split{grid-template-columns:1fr;gap:40px}
  .enterprise-left .section-title{text-align:center}
  .enterprise-left{text-align:center}
  .enterprise-caps{align-items:center}
  .diff-grid{grid-template-columns:1fr;gap:40px}
  .footer-top{flex-direction:column;gap:32px}
  .footer-columns{gap:36px}
  .donate-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
  .nav-links,.nav-actions .nav-cta{display:none}
  .nav-mobile-toggle{display:flex}
  .nav-mobile-menu.open{display:flex}
  .nav-actions{margin-left:auto;gap:10px}

  .hero-section{min-height:auto;padding-top:calc(var(--nav-h) + 36px);padding-bottom:48px}
  .hero-title{font-size:clamp(1.875rem,6.5vw,2.5rem)}

  .features-section,.workflow-section,.roles-section,.enterprise-section,.diff-section,.cta-section{padding:72px 0}
  #story.story-section{padding-bottom:120px}
  .feature-card{flex:0 0 100%;max-width:100%}
  .roles-grid{grid-template-columns:1fr 1fr}
  .section-header{margin-bottom:36px}

  .flow-track{padding:24px 0 16px}
  .flow-line{display:none}
  .flow-steps{flex-direction:column;gap:0;align-items:stretch}
  .flow-step{flex-direction:row;text-align:left;align-items:center;gap:16px;padding:16px 0;border-left:2px solid var(--border-s);margin-left:21px;padding-left:28px;position:relative}
  .flow-step:last-child{border-left-color:transparent}
  .flow-dot{flex-shrink:0;width:36px;height:36px;font-size:.8125rem;position:absolute;left:-19px;box-shadow:0 0 0 4px var(--bg-s)}
  .flow-title{font-size:.875rem}
  .flow-role{font-size:.6875rem}
  .flow-step>span{display:block}
  .workflow-benefits{flex-direction:column;gap:12px;align-items:flex-start;padding:0 24px}

  .proof-stats{gap:28px}
  .proof-divider{display:none}

  .footer-columns{flex-direction:column;gap:24px}

  .donate-hero-section{padding:36px 24px 28px}
  .donate-impact{padding:0 24px 32px}
  .donate-impact-inner{gap:20px}
  .donate-grid-container{padding:0 24px 40px}
  .donate-grid{grid-template-columns:1fr;gap:14px}
  .donate-card{min-height:110px;padding:22px 20px}
  .donate-why{padding:40px 24px 24px}
  .donate-why-grid{grid-template-columns:1fr;gap:20px}
  .donate-footer-legal{padding:20px 24px 0}
  .donate-back-container{padding:24px}
}

@media(max-width:480px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .cta-actions{flex-direction:column;align-items:stretch}
  .cta-actions .btn{justify-content:center}
  .proof-stats{flex-direction:column;gap:24px}
  .roles-grid{grid-template-columns:1fr}
  .flow-steps{min-width:0}
}