/* ===================================================================
   PULS — Design System v3
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --brand:       #c0235b;
  --brand-hover: #a01d4e;
  --brand-dim:   rgba(192,35,91,0.10);
  --ink:         #141414;
  --body:        #3a3a3a;
  --muted:       #6b6b6b;
  --muted-soft:  #9a9a9a;
  --hairline:    #e8e8e8;
  --canvas:      #ffffff;
  --surface:     #f6f6f6;

  --r-xs:  4px;  --r-sm: 8px;  --r-md: 14px;
  --r-lg: 20px;  --r-xl: 32px; --r-full: 9999px;
  --font: 'Inter', -apple-system, system-ui, sans-serif;
  --accent: #4ade80;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--canvas);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:var(--font);cursor:pointer;border:none;background:none}
input{font-family:var(--font)}
img,svg{display:block}

/* ===================================================================
   LANDING PAGE
=================================================================== */

.nav {
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:68px;display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;
  background:rgba(255,255,255,0.88);backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .2s,box-shadow .2s;
}
.nav.scrolled{border-color:var(--hairline);box-shadow:0 1px 24px rgba(0,0,0,0.06)}
.nav-logo{font-size:20px;font-weight:800;letter-spacing:-0.5px;color:var(--brand);display:flex;align-items:center;gap:6px}
.nav-logo-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:pulse-dot 2.4s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:0.6}}
.nav-link{font-size:14px;font-weight:500;color:var(--muted);padding:8px 16px;border-radius:var(--r-full);transition:color .15s,background .15s}
.nav-link:hover{color:var(--ink);background:var(--surface)}

/* Hero */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:100px 32px 80px;position:relative;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 60% 50% at 18% 25%,rgba(192,35,91,0.07) 0%,transparent 55%),
             radial-gradient(ellipse 50% 40% at 82% 70%,rgba(192,35,91,0.05) 0%,transparent 50%),#fff}
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(100px)}
.hero-orb-1{width:900px;height:900px;background:radial-gradient(circle,rgba(192,35,91,0.06) 0%,transparent 65%);top:-300px;left:-250px;animation:float-orb 22s ease-in-out infinite}
.hero-orb-2{width:600px;height:600px;background:radial-gradient(circle,rgba(192,35,91,0.04) 0%,transparent 65%);bottom:-200px;right:-150px;animation:float-orb 18s ease-in-out infinite reverse}
@keyframes float-orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(50px,-60px) scale(1.04)}66%{transform:translate(-40px,40px) scale(0.96)}}

.hero-content{position:relative;z-index:1;max-width:800px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:var(--brand);margin-bottom:32px}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:pulse-dot 2.4s ease-in-out infinite}
.hero-title{font-size:clamp(52px,9vw,88px);font-weight:800;line-height:1.0;letter-spacing:-3px;color:var(--ink);margin-bottom:28px}
.hero-title-accent{color:var(--brand)}
.hero-subtitle{font-size:clamp(17px,2.2vw,21px);font-weight:400;line-height:1.65;color:var(--muted);max-width:560px;margin:0 auto 48px}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:16px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--brand);color:#fff;font-size:16px;font-weight:700;letter-spacing:-0.1px;padding:18px 40px;border-radius:var(--r-sm);height:58px;transition:background .15s,transform .12s,box-shadow .15s;box-shadow:0 4px 24px rgba(192,35,91,0.28)}
.btn-primary:hover{background:var(--brand-hover);transform:translateY(-2px);box-shadow:0 8px 32px rgba(192,35,91,0.34)}
.btn-primary:active{transform:translateY(0)}
.hero-note{font-size:13px;color:var(--muted-soft)}

.scroll-indicator{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:rgba(0,0,0,0.25);animation:bounce-y 2.4s ease-in-out infinite;cursor:pointer;z-index:1;transition:color .2s}
.scroll-indicator:hover{color:rgba(0,0,0,0.45)}
.scroll-chevron{width:20px;height:20px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
@keyframes bounce-y{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}

/* Sections — все центрируем */
.section{padding:80px 32px}
.section-inner{max-width:1120px;margin:0 auto;text-align:center}
.section-label{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--brand);margin-bottom:16px}
.section-title{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:var(--ink);margin-bottom:16px}
.section-sub{font-size:18px;color:var(--muted);line-height:1.65;max-width:560px;margin:0 auto 56px}

/* Карточки шагов — внутри текст слева для читаемости */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;text-align:left}
.step-card{padding:32px;border-radius:var(--r-lg);border:1px solid var(--hairline);transition:box-shadow .2s,transform .2s,border-color .2s}
.step-card:hover{box-shadow:0 8px 40px rgba(0,0,0,0.08);transform:translateY(-4px);border-color:#d4d4d4}
.step-label{font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--brand);margin-bottom:20px;opacity:0.8}
.step-title{font-size:18px;font-weight:700;letter-spacing:-0.3px;margin-bottom:10px;color:var(--ink)}
.step-desc{font-size:15px;color:var(--muted);line-height:1.65}
.step-traffic{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.step-traffic-row{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--body);line-height:1.5}

/* Why */
.why-section{background:var(--ink);padding:80px 32px}
.why-inner{max-width:760px;margin:0 auto;text-align:center}
.why-quote{font-size:clamp(22px,3.5vw,36px);font-weight:500;line-height:1.45;color:rgba(255,255,255,0.85);letter-spacing:-0.5px;margin-bottom:32px}
.why-quote em{color:var(--brand);font-style:normal;font-weight:700}
.why-attr{font-size:13px;color:rgba(255,255,255,0.25)}

/* Levels */
.levels-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.level-preview{border-radius:var(--r-lg);padding:32px 24px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;text-align:left}
.level-preview:hover{transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,0.2)}
.level-preview.green {background:linear-gradient(135deg,#040e06,#081a0a);border:1px solid rgba(74,222,128,0.18)}
.level-preview.yellow{background:linear-gradient(135deg,#0f0a00,#1c1200);border:1px solid rgba(251,191,36,0.18)}
.level-preview.red   {background:linear-gradient(135deg,#0c0206,#1a0410);border:1px solid rgba(248,113,113,0.18)}
.level-num{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:rgba(255,255,255,0.25);margin-bottom:20px}
.level-name{font-size:22px;font-weight:800;letter-spacing:-0.4px;color:#fff;margin-bottom:8px}
.level-sub{font-size:13px;color:rgba(255,255,255,0.4);line-height:1.5}
.level-accent-line{position:absolute;bottom:0;left:0;right:0;height:3px}
.level-preview.green  .level-accent-line{background:linear-gradient(90deg,#4ade80,transparent)}
.level-preview.yellow .level-accent-line{background:linear-gradient(90deg,#fbbf24,transparent)}
.level-preview.red    .level-accent-line{background:linear-gradient(90deg,#f87171,transparent)}
.level-count{position:absolute;top:24px;right:24px;font-size:11px;font-weight:600;color:rgba(255,255,255,0.2)}

/* Lookup section */
.lookup-section{background:var(--surface);padding:80px 32px}
.lookup-inner{max-width:520px;margin:0 auto;text-align:center}
.lookup-tabs{display:inline-flex;background:#e8e8e8;border-radius:var(--r-full);padding:3px;margin-bottom:24px;gap:2px}
.ltab{font-size:13px;font-weight:600;padding:8px 20px;border-radius:var(--r-full);color:var(--muted);transition:background .15s,color .15s}
.ltab.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.lookup-hint{font-size:14px;color:var(--muted);margin-bottom:14px}
.lookup-row{display:flex;gap:12px}
.input-field{flex:1;min-width:0;height:52px;padding:0 16px;background:var(--canvas);color:var(--ink);border:1.5px solid var(--hairline);border-radius:var(--r-sm);font-size:15px;outline:none;transition:border-color .15s}
.input-field:focus{border-color:var(--brand)}
.input-field::placeholder{color:var(--muted-soft)}

/* Footer */
.footer{padding:32px 40px;border-top:1px solid var(--hairline)}
.footer-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.footer-logo{font-size:18px;font-weight:800;color:var(--brand)}
.footer-links{display:flex;gap:24px}
.footer-link{font-size:13px;color:var(--muted);transition:color .15s}
.footer-link:hover{color:var(--ink)}
.footer-copy{font-size:12px;color:var(--muted-soft)}

/* ===================================================================
   QUIZ PAGE — тёмная тема
=================================================================== */

body.quiz-body{min-height:100vh;color:#fff;transition:background 0.7s ease}
body.lvl-neutral{background:#0c0c14}
body.lvl-green{
  background:radial-gradient(ellipse at 8% 8%,rgba(34,197,94,0.08) 0%,transparent 38%),
             radial-gradient(ellipse at 92% 92%,rgba(52,211,153,0.05) 0%,transparent 35%),
             #040d06}
body.lvl-yellow{
  background:radial-gradient(ellipse at 85% 8%,rgba(217,119,6,0.09) 0%,transparent 38%),
             radial-gradient(ellipse at 10% 90%,rgba(180,83,9,0.05) 0%,transparent 35%),
             #0d0900}
body.lvl-red{
  background:radial-gradient(ellipse at 50% 0%,rgba(159,18,57,0.10) 0%,transparent 42%),
             radial-gradient(ellipse at 80% 95%,rgba(91,33,182,0.07) 0%,transparent 35%),
             #090204}

/* CSS-орбы */
.quiz-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.quiz-bg::before,.quiz-bg::after{content:'';position:absolute;border-radius:50%;filter:blur(130px);pointer-events:none;will-change:transform}
.quiz-bg::before{width:700px;height:700px;top:-200px;left:-200px;animation:float-orb 22s ease-in-out infinite}
.quiz-bg::after {width:500px;height:500px;bottom:-150px;right:-150px;animation:float-orb 17s ease-in-out infinite reverse}
body.lvl-green  .quiz-bg::before{background:rgba(34,197,94,0.05)}
body.lvl-green  .quiz-bg::after {background:rgba(52,211,153,0.04)}
body.lvl-yellow .quiz-bg::before{background:rgba(217,119,6,0.06)}
body.lvl-yellow .quiz-bg::after {background:rgba(180,83,9,0.04)}
body.lvl-red    .quiz-bg::before{background:rgba(159,18,57,0.07)}
body.lvl-red    .quiz-bg::after {background:rgba(91,33,182,0.05)}

/* Topbar */
.quiz-topbar{position:fixed;top:0;left:0;right:0;z-index:100;height:60px;padding:0 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(0,0,0,0.3);backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,0.07)}
.topbar-back{color:rgba(255,255,255,0.5);font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-sm);transition:color .15s,background .15s;justify-self:start}
.topbar-back:hover{color:#fff;background:rgba(255,255,255,0.08)}
.topbar-back.hidden{visibility:hidden}
.topbar-logo{font-size:17px;font-weight:800;color:#fff;letter-spacing:-0.3px;justify-self:center;display:flex;align-items:center;gap:5px}
.topbar-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse-dot 2.4s ease-in-out infinite;transition:background 0.7s}
.topbar-info{font-size:12px;color:rgba(255,255,255,0.35);justify-self:end;font-weight:500}

/* Progress */
.quiz-progress{position:fixed;top:60px;left:0;right:0;z-index:100;height:2px;background:rgba(255,255,255,0.07)}
.quiz-progress-fill{height:100%;background:var(--accent);transition:width 0.4s ease,background 0.7s;box-shadow:0 0 10px var(--accent)}

/* Main */
.quiz-main{position:relative;z-index:1;padding-top:80px;min-height:100vh}

/* Centered view */
.view-center{min-height:calc(100vh - 80px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px 100px;text-align:center;animation:view-in 0.35s ease both}
@keyframes view-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Role */
.role-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.3);margin-bottom:20px}
.role-title{font-size:clamp(28px,5vw,44px);font-weight:800;letter-spacing:-1px;margin-bottom:16px;line-height:1.15}
.role-sub{font-size:16px;color:rgba(255,255,255,0.45);line-height:1.65;max-width:420px;margin:0 auto 40px}
.role-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:460px;margin:0 auto}
.role-card{background:rgba(255,255,255,0.04);border:1.5px solid rgba(255,255,255,0.09);border-radius:var(--r-md);padding:20px 22px;display:flex;align-items:center;gap:16px;text-align:left;width:100%;transition:background .15s,border-color .15s,transform .1s;cursor:pointer}
.role-card:hover{background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.18);transform:translateY(-1px)}
.role-card.selected{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.35)}
.role-icon{font-size:26px;flex-shrink:0}
.role-text{flex:1}
.role-name{font-size:15px;font-weight:600;color:#fff;margin-bottom:2px}
.role-hint{font-size:12px;color:rgba(255,255,255,0.35)}
.role-check{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.role-card.selected .role-check{background:#fff;border-color:#fff}
.role-card.selected .role-check::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--ink)}

/* Intro */
.intro-level-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--accent);margin-bottom:24px;transition:color 0.7s}
.intro-title{font-size:clamp(36px,6vw,56px);font-weight:800;letter-spacing:-1.5px;margin-bottom:20px;line-height:1.1}
.intro-text{font-size:17px;color:rgba(255,255,255,0.5);line-height:1.7;max-width:520px;margin:0 auto 44px}
.intro-stats{display:flex;gap:48px;justify-content:center;margin-bottom:44px}
.intro-stat-num{font-size:40px;font-weight:800;letter-spacing:-1px;color:var(--accent);transition:color 0.7s}
.intro-stat-label{font-size:12px;color:rgba(255,255,255,0.3);margin-top:4px;font-weight:500}

/* Break */
.break-indicator{width:48px;height:2px;background:var(--accent);border-radius:2px;margin:0 auto 32px;transition:background 0.7s}
.break-title{font-size:clamp(28px,5vw,44px);font-weight:800;letter-spacing:-1px;margin-bottom:16px}
.break-text{font-size:16px;color:rgba(255,255,255,0.45);line-height:1.65;max-width:400px;margin:0 auto 40px}

/* Coffee break */
.coffee-icon{font-size:72px;margin-bottom:32px;filter:saturate(0.6) brightness(1.2)}
.coffee-bar{width:200px;height:3px;background:rgba(255,255,255,0.08);border-radius:2px;margin:32px auto 0;overflow:hidden}
.coffee-bar-fill{height:100%;width:100%;background:rgba(255,255,255,0.15);border-radius:2px}

/* Shared buttons */
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.15);color:#fff;font-size:15px;font-weight:600;padding:14px 30px;border-radius:var(--r-sm);transition:background .15s,border-color .15s,transform .1s}
.btn-ghost:hover{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.28);transform:translateY(-1px)}
.btn-ghost:active{transform:scale(0.97)}
.btn-accent{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#000;font-size:15px;font-weight:700;padding:14px 30px;border-radius:var(--r-sm);transition:opacity .15s,transform .1s;box-shadow:0 4px 20px rgba(0,0,0,0.25)}
.btn-accent:hover{opacity:0.88;transform:translateY(-1px)}
.btn-accent:active{transform:scale(0.97)}
.btn-accent:disabled{opacity:0.3;cursor:not-allowed;transform:none}

/* ── Блочный слайд ────────────────────────────────────────── */
.block-slide{animation:view-in 0.3s ease both}
.block-slide-header{max-width:760px;margin:0 auto;padding:24px 24px 0}
.block-slide-meta{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:var(--accent);margin-bottom:12px;transition:color 0.7s}
.block-slide-title{font-size:clamp(24px,4vw,36px);font-weight:800;letter-spacing:-0.8px;line-height:1.15;margin-bottom:6px;color:#fff}
.block-slide-sub{font-size:13px;color:rgba(255,255,255,0.3);margin-bottom:28px}

/* Быстрый выбор */
.bulk-select{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 24px;max-width:760px;margin:0 auto 20px}
.bulk-label{font-size:11px;font-weight:600;color:rgba(255,255,255,0.25);text-transform:uppercase;letter-spacing:0.5px;margin-right:4px}
.bulk-btn{font-size:12px;font-weight:600;padding:5px 12px;border-radius:var(--r-full);border:1.5px solid transparent;transition:background .15s,border-color .15s,transform .1s}
.bulk-btn:active{transform:scale(0.95)}
.bulk-btn.g{color:#4ade80;border-color:rgba(74,222,128,0.25)}.bulk-btn.g:hover{background:rgba(74,222,128,0.1);border-color:rgba(74,222,128,0.45)}
.bulk-btn.y{color:#fbbf24;border-color:rgba(251,191,36,0.25)}.bulk-btn.y:hover{background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.45)}
.bulk-btn.r{color:#f87171;border-color:rgba(248,113,113,0.25)}.bulk-btn.r:hover{background:rgba(248,113,113,0.1);border-color:rgba(248,113,113,0.45)}

/* Список практик */
.practices-list{max-width:760px;margin:0 auto;padding:0 24px 120px}

/* ── КАРТОЧКА ПРАКТИКИ — крупнее ──────────────────────────── */
.p-card{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r-md);
  padding:24px 26px;           /* было 20px 22px */
  margin-bottom:16px;          /* было 12px */
  position:relative;overflow:hidden;
  transition:border-color .2s,background .2s;
}
.p-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background 0.2s;border-radius:3px 0 0 3px}
.p-card.a-green {border-color:rgba(74,222,128,0.22);background:rgba(74,222,128,0.04)}.p-card.a-green::before{background:#4ade80}
.p-card.a-yellow{border-color:rgba(251,191,36,0.22);background:rgba(251,191,36,0.04)}.p-card.a-yellow::before{background:#fbbf24}
.p-card.a-red   {border-color:rgba(248,113,113,0.22);background:rgba(248,113,113,0.04)}.p-card.a-red::before{background:#f87171}

.p-name{font-size:20px;font-weight:700;letter-spacing:-0.3px;color:#fff;margin-bottom:10px;line-height:1.3}
.p-desc{font-size:15px;color:rgba(255,255,255,0.52);line-height:1.65;margin-bottom:18px}

.p-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.p-choices{display:flex;flex-wrap:wrap;gap:8px}
.c-btn{display:flex;align-items:center;gap:5px;padding:9px 16px;border-radius:var(--r-full);font-size:14px;font-weight:500;border:1.5px solid transparent;opacity:0.55;transition:background .15s,border-color .15s,opacity .15s,transform .1s}
.c-btn:active{transform:scale(0.94)}
.c-btn.g{color:#4ade80;border-color:rgba(74,222,128,0.22)}
.c-btn.y{color:#fbbf24;border-color:rgba(251,191,36,0.22)}
.c-btn.r{color:#f87171;border-color:rgba(248,113,113,0.22)}
.c-btn.active{opacity:1}
.c-btn.g.active{background:rgba(74,222,128,0.12);border-color:rgba(74,222,128,0.45)}
.c-btn.y.active{background:rgba(251,191,36,0.12);border-color:rgba(251,191,36,0.45)}
.c-btn.r.active{background:rgba(248,113,113,0.12);border-color:rgba(248,113,113,0.45)}

/* Направление — бинарный тумблер (открыта к практике / только партнёру) */
.p-dir{margin-left:40px;display:flex;align-items:center;gap:12px;transition:opacity .2s}
.p-dir.off{opacity:.3;pointer-events:none}
.dir-sw{position:relative;width:46px;height:26px;background:#57d99b;border-radius:var(--r-full);cursor:pointer;flex:none;transition:background .22s}
.dir-sw.on{background:#3b82f6}
.dir-sw .dir-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .22s cubic-bezier(.4,0,.2,1)}
.dir-sw.on .dir-knob{left:23px}
.dir-sw:focus-visible{outline:2px solid rgba(255,255,255,0.5);outline-offset:2px}
.dir-val{font-size:13px;color:#7fe0b0;transition:color .18s}
.dir-val.on{color:#7fb2f2}

/* Bottom bar */
.quiz-bottom{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:14px 24px;background:rgba(0,0,0,0.45);backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;justify-content:space-between;gap:16px}
.bottom-count{font-size:13px;color:rgba(255,255,255,0.35)}
.bottom-count strong{color:var(--accent);font-weight:700;transition:color 0.7s}

/* Email / Share / Waiting */
.form-box{width:100%;max-width:420px;margin:0 auto}
.form-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:rgba(255,255,255,0.35);margin-bottom:8px}
.form-input{width:100%;height:52px;padding:0 16px;background:rgba(255,255,255,0.06);color:#fff;border:1.5px solid rgba(255,255,255,0.12);border-radius:var(--r-sm);font-size:15px;outline:none;transition:border-color .15s,background .15s;margin-bottom:12px}
.form-input:focus{border-color:rgba(255,255,255,0.35);background:rgba(255,255,255,0.08)}
.form-input::placeholder{color:rgba(255,255,255,0.22)}
.form-check{display:flex;align-items:flex-start;gap:12px;text-align:left;margin-bottom:10px}
.form-check input[type=checkbox]{margin-top:3px;flex-shrink:0;accent-color:#fff;width:16px;height:16px;cursor:pointer}
.form-check label{font-size:13px;color:rgba(255,255,255,0.35);line-height:1.55;cursor:pointer}
.form-check label a{text-decoration:underline;color:rgba(255,255,255,0.45)}
.form-submit{width:100%;height:52px;margin-top:8px;background:rgba(255,255,255,0.88);color:#000;font-size:15px;font-weight:700;border-radius:var(--r-sm);transition:background .15s,transform .1s}
.form-submit:hover{background:#fff;transform:translateY(-1px)}
.form-submit:disabled{opacity:0.25;cursor:not-allowed;transform:none}

/* Share */
.share-box{width:100%;max-width:480px;margin:0 auto 14px;background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.10);border-radius:var(--r-md);padding:20px 22px;text-align:left}
.share-box-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.8px;color:rgba(255,255,255,0.25);margin-bottom:8px}
.share-box-url{font-size:12px;color:rgba(255,255,255,0.55);word-break:break-all;margin-bottom:14px;line-height:1.6}
.copy-btn{width:100%;height:42px;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.14);color:#fff;font-size:14px;font-weight:600;border-radius:var(--r-sm);transition:background .15s,border-color .15s}
.copy-btn:hover{background:rgba(255,255,255,0.12)}
.copy-btn.done{border-color:rgba(74,222,128,0.4);background:rgba(74,222,128,0.1);color:#4ade80}
.partner-email-row{display:flex;gap:10px;max-width:480px;margin:0 auto 14px}
.partner-email-row .form-input{flex:1;margin:0}
.partner-send-btn{height:52px;padding:0 18px;flex-shrink:0;background:rgba(255,255,255,0.1);border:1.5px solid rgba(255,255,255,0.18);color:#fff;font-size:14px;font-weight:600;border-radius:var(--r-sm);transition:background .15s;white-space:nowrap}
.partner-send-btn:hover{background:rgba(255,255,255,0.16)}

/* Waiting */
.waiting-ring{width:96px;height:96px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;margin:0 auto 32px;position:relative;animation:heartbeat 1.8s ease-in-out infinite}
.waiting-ring::before,.waiting-ring::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,0.07);animation:ripple 1.8s ease-out infinite}
.waiting-ring::before{inset:-14px}
.waiting-ring::after{inset:-28px;animation-delay:0.4s}
@keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.07)}28%{transform:scale(1)}42%{transform:scale(1.04)}70%{transform:scale(1)}}
@keyframes ripple{0%{transform:scale(1);opacity:1}100%{transform:scale(1.8);opacity:0}}
.waiting-label{font-size:32px}

/* Transition overlay */
.transition-overlay{position:fixed;inset:0;z-index:999;background:#000;opacity:0;pointer-events:none;transition:opacity 0.35s}
.transition-overlay.on{opacity:1;pointer-events:all}

/* ===================================================================
   RESULTS PAGE
=================================================================== */
body.results-body{min-height:100vh;background:radial-gradient(ellipse at 25% 0%,rgba(192,35,91,0.08) 0%,transparent 45%),radial-gradient(ellipse at 80% 100%,rgba(192,35,91,0.05) 0%,transparent 40%),#0d0d16;color:#fff}
.results-bg-orb-1{position:fixed;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(192,35,91,0.06) 0%,transparent 70%);top:-200px;left:-200px;filter:blur(120px);pointer-events:none;z-index:0;animation:float-orb 22s ease-in-out infinite}
.results-bg-orb-2{position:fixed;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(192,35,91,0.04) 0%,transparent 70%);bottom:-150px;right:-150px;filter:blur(100px);pointer-events:none;z-index:0;animation:float-orb 17s ease-in-out infinite reverse}

.results-header{position:relative;z-index:1;text-align:center;padding:80px 24px 48px;border-bottom:1px solid rgba(255,255,255,0.06)}
.results-logo{font-size:18px;font-weight:800;color:#c0235b;margin-bottom:28px;display:inline-block}
.results-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(192,35,91,0.1);border:1px solid rgba(192,35,91,0.22);color:#f87171;font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-full);margin-bottom:24px}
.results-title{font-size:clamp(36px,6vw,60px);font-weight:800;letter-spacing:-2px;margin-bottom:16px;line-height:1.05}
.results-sub{font-size:17px;color:rgba(255,255,255,0.4);max-width:440px;margin:0 auto;line-height:1.65}
.results-counts{display:flex;gap:48px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.r-count-num{font-size:52px;font-weight:800;letter-spacing:-2px}
.r-count-label{font-size:12px;color:rgba(255,255,255,0.3);margin-top:4px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
.r-count.green  .r-count-num{color:#4ade80}
.r-count.yellow .r-count-num{color:#fbbf24}
.r-count.discuss .r-count-num{color:rgba(255,255,255,0.4)}

.results-body{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:48px 24px 100px}
.r-section{margin-bottom:52px}
.r-section-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,0.06)}
.r-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.r-dot.green {background:#4ade80;box-shadow:0 0 10px rgba(74,222,128,0.5)}
.r-dot.yellow{background:#fbbf24;box-shadow:0 0 10px rgba(251,191,36,0.5)}
.r-dot.discuss{background:rgba(255,255,255,0.3)}
.r-section-title{font-size:18px;font-weight:700;flex:1}
.r-section-count{font-size:12px;color:rgba(255,255,255,0.25);font-weight:500}
.r-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.r-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:var(--r-md);padding:16px 18px;transition:background .15s,transform .2s;animation:slide-up 0.35s ease both}
.r-card:hover{background:rgba(255,255,255,0.06);transform:translateY(-2px)}
@keyframes slide-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.r-card.green {border-color:rgba(74,222,128,0.15)}
.r-card.yellow{border-color:rgba(251,191,36,0.15)}
.r-card-name{font-size:14px;font-weight:600;margin-bottom:8px;line-height:1.3;color:#fff}
.r-card-tags{display:flex;gap:4px;flex-wrap:wrap}
.r-tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:var(--r-full)}
.r-tag.green  {background:rgba(74,222,128,0.12);color:#4ade80}
.r-tag.yellow {background:rgba(251,191,36,0.12);color:#fbbf24}
.r-tag.discuss{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.4)}
.r-empty{text-align:center;padding:32px;color:rgba(255,255,255,0.2);font-size:14px}
.results-actions{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:14px 24px;background:rgba(0,0,0,0.5);backdrop-filter:blur(24px);border-top:1px solid rgba(255,255,255,0.06);display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.r-btn{display:flex;align-items:center;gap:7px;padding:11px 22px;border-radius:var(--r-sm);font-size:14px;font-weight:600;transition:background .15s,transform .1s}
.r-btn.primary{background:#c0235b;color:#fff;box-shadow:0 4px 20px rgba(192,35,91,0.28)}.r-btn.primary:hover{background:#a01d4e;transform:translateY(-1px)}
.r-btn.secondary{background:rgba(255,255,255,0.07);color:#fff;border:1px solid rgba(255,255,255,0.12)}.r-btn.secondary:hover{background:rgba(255,255,255,0.11);transform:translateY(-1px)}

/* Privacy */
.privacy-page{max-width:720px;margin:0 auto;padding:100px 32px 64px}
.privacy-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:40px}
.privacy-back:hover{color:var(--ink)}
.privacy-logo{font-size:20px;font-weight:800;color:var(--brand);margin-bottom:48px;display:inline-block}
.privacy-page h1{font-size:36px;font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.privacy-page .updated{font-size:14px;color:var(--muted);margin-bottom:40px}
.privacy-page h2{font-size:18px;font-weight:700;margin:32px 0 12px}
.privacy-page p,.privacy-page li{font-size:15px;color:var(--body);line-height:1.7;margin-bottom:12px}
.privacy-page ul{padding-left:24px;margin-bottom:16px}
.privacy-page a{color:var(--brand)}

/* Scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.18)}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:768px){
  .nav{padding:0 20px}
  .hero{padding:90px 20px 80px}
  .hero-title{letter-spacing:-2px}
  .section{padding:56px 20px}
  .levels-row{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .footer{padding:24px 20px}
  .footer-inner{flex-direction:column;text-align:center;gap:12px}
  .lookup-row{flex-direction:column}
  .r-grid{grid-template-columns:1fr}
  .results-counts{gap:28px}
  .partner-email-row{flex-direction:column}
}
@media(max-width:480px){
  .p-choices{gap:6px}
  .c-btn{padding:8px 12px;font-size:13px}
  .p-dir{margin-left:0;width:100%}
  .intro-stats{gap:28px}
  .intro-stat-num{font-size:32px}
}