:root{
  --bg:#02060b;
  --ink:#050b12;
  --panel:#07111c;
  --panel2:#0b1825;
  --cyan:#16dcff;
  --cyan2:#00a9ff;
  --blue:#086bff;
  --gold:#ffc919;
  --white:#f7fbff;
  --muted:#a8bdd0;
  --red:#ff3148;
  --green:#5cff5f;
  --purple:#bb4cff;
  --orange:#ffad1f;
  --pink:#ff39ad;
  --shadow:0 0 32px rgba(22,220,255,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--white);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
button,input{font:inherit}
button{touch-action:manipulation}

/* approved landing art */
.landing-shell{min-height:100vh;background:#000;display:flex;justify-content:center;align-items:flex-start;position:relative;overflow:hidden}
.landing-shell:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 50% 15%,rgba(0,132,255,.26),transparent 38%),#01050a;z-index:0}
.poster-wrap{width:min(1024px,100vw);position:relative;z-index:1;box-shadow:0 0 80px rgba(0,145,255,.35)}
.poster-wrap>img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hero-hotspot{position:absolute;left:27%;top:47.1%;width:46%;height:6.3%;border:0;background:transparent;cursor:pointer;border-radius:8px;z-index:3;color:transparent}
.hero-hotspot:hover,.hero-hotspot:focus-visible{outline:3px solid rgba(22,220,255,.72);outline-offset:3px;box-shadow:0 0 38px rgba(22,220,255,.8);background:rgba(22,220,255,.03)}
.hero-hotspot-top{position:absolute;left:35%;top:.5%;width:20%;height:5%;border:0;background:transparent;cursor:pointer;color:transparent;z-index:3}
.faq-hotspot-top{position:absolute;left:66%;top:.5%;width:9%;height:5%;border:0;background:transparent;cursor:pointer;color:transparent;z-index:3}
.faq-hotspot-top:hover,.faq-hotspot-top:focus-visible{outline:2px solid rgba(22,220,255,.72);outline-offset:2px;box-shadow:0 0 24px rgba(22,220,255,.55);background:rgba(22,220,255,.03)}
.landing-caption{position:absolute;bottom:8px;right:12px;font-size:10px;color:rgba(255,255,255,.35);z-index:4}

/* internal app chrome */
.app-screen{min-height:100vh;position:relative;background:#02060b;isolation:isolate;padding-bottom:40px}
.app-screen:before{content:"";position:fixed;inset:0;background:
  linear-gradient(rgba(2,6,11,.90),rgba(2,6,11,.94)),
  url('approved-landing.png') center 18%/cover no-repeat;
  filter:saturate(1.1);z-index:-2;transform:scale(1.02)}
.app-screen:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  repeating-linear-gradient(116deg,transparent 0 33px,rgba(24,191,255,.024) 34px 35px),
  radial-gradient(circle at 50% 0,rgba(0,179,255,.16),transparent 37%)}
.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px clamp(16px,4vw,54px);border-bottom:2px solid rgba(22,220,255,.45);background:rgba(0,4,9,.88);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20;box-shadow:0 10px 38px rgba(0,0,0,.5)}
.small-logo{height:78px;width:auto;display:block;object-fit:contain}
.toplinks{display:flex;align-items:center;gap:clamp(12px,3vw,34px);font-family:Bangers,Impact,sans-serif;font-size:20px;letter-spacing:.7px}
.toplinks button{border:0;background:transparent;color:#fff;cursor:pointer;text-transform:uppercase;padding:10px}
.toplinks button:hover{color:var(--cyan);text-shadow:0 0 16px var(--cyan)}
.top-status{color:var(--gold)!important}
.page{width:min(1040px,94vw);margin:0 auto;padding:42px 0}
.brush{font-family:Bangers,Impact,sans-serif;letter-spacing:1px;text-transform:uppercase;font-style:italic}
.mono{font-family:'Black Ops One',Impact,sans-serif;text-transform:uppercase}
.kicker{font-size:13px;letter-spacing:2.8px;font-weight:900;color:var(--gold);text-transform:uppercase}
.cyan{color:var(--cyan)}
.gold{color:var(--gold)}

/* name screen */
.name-stage{min-height:calc(100vh - 92px);display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;align-items:center;gap:36px}
.name-art{background:rgba(2,6,11,.66);border:2px solid rgba(22,220,255,.38);box-shadow:var(--shadow);padding:12px;transform:rotate(-1deg)}
.name-art img{width:100%;display:block}
.name-panel{position:relative;padding:38px;background:linear-gradient(145deg,rgba(4,11,18,.97),rgba(7,19,31,.95));border:2px solid #1289ca;clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);box-shadow:0 0 45px rgba(0,170,255,.24)}
.name-panel h1{font-family:Bangers,Impact,sans-serif;font-size:clamp(50px,7vw,82px);line-height:.85;margin:10px 0;color:white;text-shadow:4px 4px 0 #0062a9,0 0 20px rgba(22,220,255,.3)}
.name-panel p{font-size:18px;color:var(--muted);max-width:560px;line-height:1.5}
.name-panel input{width:100%;font-size:22px;padding:17px 18px;margin:15px 0 18px;color:#fff;background:#02070d;border:2px solid #21445f;outline:none;box-shadow:inset 0 0 20px rgba(0,0,0,.65)}
.name-panel input:focus{border-color:var(--cyan);box-shadow:0 0 24px rgba(22,220,255,.25)}
.cta{border:2px solid #7aefff;background:linear-gradient(90deg,#11d8f5,#22a8ff);color:#00111a;font-family:'Black Ops One',Impact,sans-serif;font-weight:900;text-transform:uppercase;padding:16px 25px;min-height:56px;cursor:pointer;box-shadow:0 0 28px rgba(22,220,255,.55);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:.15s ease}
.cta:hover{filter:brightness(1.13);transform:translateY(-2px)}
.ghost{border:2px solid #54738f;color:#fff;background:rgba(5,12,19,.78);font-weight:900;text-transform:uppercase;padding:14px 22px;min-height:52px;cursor:pointer;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.ghost:hover{border-color:var(--cyan);color:var(--cyan)}

/* quiz */
.quiz-shell{width:min(860px,94vw);margin:34px auto 0;background:rgba(4,10,17,.95);border:2px solid #135a86;box-shadow:0 0 60px rgba(0,142,255,.18);position:relative;padding:30px clamp(20px,4vw,42px) 36px;clip-path:polygon(0 18px,18px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.quiz-shell:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 22px var(--cyan)}
.quiz-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:10px}
.qcount{font-family:'Black Ops One';font-size:17px;letter-spacing:1px}.qcount strong{color:var(--cyan)}
.progress{height:11px;background:#0d1b27;border:1px solid #3b607c;box-shadow:inset 0 0 12px #000;margin:12px 0 29px;overflow:hidden}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,#00e1ff,#008dff);box-shadow:0 0 18px var(--cyan)}
.question-paper{position:relative;background:#eef2f2;color:#091019;padding:30px clamp(20px,4vw,38px);font-weight:900;font-size:clamp(24px,3.4vw,38px);line-height:1.18;margin:0 0 28px;transform:rotate(-.25deg);box-shadow:9px 9px 0 rgba(0,123,215,.26);clip-path:polygon(0 7px,4% 1%,10% 5px,16% 0,22% 6px,31% 1px,43% 6px,52% 0,63% 5px,76% 0,89% 6px,100% 2px,99% 96%,92% 100%,81% 96%,69% 100%,55% 96%,39% 100%,25% 96%,12% 100%,0 96%)}
.scale-list{display:grid;gap:10px}
.scale-choice{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:14px;min-height:64px;background:linear-gradient(90deg,#07101a,#0b1620);border:1px solid #2f506c;color:#e9f5ff;cursor:pointer;text-align:left;padding:9px 18px;transition:.12s ease}
.scale-choice:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(22,220,255,.25);transform:translateX(3px)}
.scale-choice.selected{border:2px solid var(--cyan);background:linear-gradient(90deg,#06324a,#082037);box-shadow:0 0 25px rgba(22,220,255,.48)}
.scale-num{font-family:'Black Ops One';font-size:24px;text-align:center;color:var(--cyan);border-right:1px solid #31546e;padding-right:14px}
.scale-copy strong{display:block;font-size:15px}.scale-copy span{font-size:12px;color:#8fa8bb}
.quiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}

/* analyzing */
.analyze-stage{min-height:calc(100vh - 92px);display:grid;place-items:center;padding:35px 0}
.analyze-card{width:min(760px,94vw);text-align:center;padding:44px 34px;background:rgba(3,10,17,.94);border:2px solid #0d76b6;box-shadow:0 0 70px rgba(22,220,255,.25);position:relative;overflow:hidden}
.analyze-card:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 0deg,transparent,rgba(22,220,255,.12),transparent 30%);animation:scan 2s linear infinite}@keyframes scan{to{transform:rotate(360deg)}}
.analyze-inner{position:relative;z-index:2}
.analyze-card img{width:min(520px,85%);max-height:250px;object-fit:cover;object-position:center 46%;filter:drop-shadow(0 0 20px rgba(22,220,255,.4))}
.analyze-title{font-family:Bangers,Impact,sans-serif;font-size:clamp(48px,8vw,88px);line-height:.86;color:#fff;text-shadow:4px 4px 0 #006eaa;margin:4px 0 24px}.analyze-title em{color:var(--cyan);font-style:normal}
.scan-list{width:min(500px,92%);margin:0 auto;text-align:left;border:1px solid #31506a;background:#040a10;padding:17px 22px;box-shadow:inset 0 0 24px #000}
.scan-row{display:flex;justify-content:space-between;padding:8px 0;font-weight:800;letter-spacing:.7px}.scan-row span:last-child{color:#32f4ff}

/* results */
.results-page{width:min(1080px,95vw);margin:0 auto;padding:34px 0 55px}
.results-title{text-align:center;margin-bottom:22px}.results-title .brush{font-size:clamp(58px,9vw,104px);line-height:.8;text-shadow:5px 5px 0 #00649e}.results-title p{margin:13px 0 0;color:var(--muted)}
.diag-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:16px;align-items:stretch}
.diagnosis-card{border:2px solid #1486c4;background:linear-gradient(145deg,rgba(3,10,16,.98),rgba(7,20,32,.96));box-shadow:0 0 35px rgba(22,220,255,.2);padding:20px;position:relative;overflow:hidden;clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.diagnosis-card:after{content:"DIAGNOSIS";position:absolute;right:-8px;top:12px;font-family:'Black Ops One';font-size:60px;color:#fff;opacity:.035;transform:rotate(-6deg)}
.primary-wrap{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center;position:relative;z-index:2}
.primary-art{width:220px;max-width:100%;border:2px solid var(--cyan);box-shadow:0 0 25px rgba(22,220,255,.35);background:#02060a}
.diag-label{color:var(--gold);font-weight:900;letter-spacing:2px;font-size:12px}
.combo-name{font-family:Bangers,Impact,sans-serif;font-size:clamp(48px,6vw,78px);line-height:.82;margin:5px 0 13px;text-transform:uppercase;color:#fff;text-shadow:4px 4px 0 #0670b0}.combo-name em{color:var(--cyan);font-style:normal}
.diag-copy{font-size:17px;line-height:1.5;color:#c7d5e1;max-width:640px}
.trait-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.trait-pill{border:1px solid #28516d;background:#07111b;padding:12px}.trait-pill span{display:block;color:#8ca6ba;font-size:10px;font-weight:900;letter-spacing:1.4px}.trait-pill b{font-size:18px;color:#fff}
.tox-card{border:2px solid var(--red);background:linear-gradient(145deg,#18070b,#09070a);box-shadow:0 0 35px rgba(255,30,60,.2),inset 0 0 40px rgba(255,0,44,.06);padding:24px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.tox-card:before{content:"☣";position:absolute;right:-14px;bottom:-32px;font-size:180px;opacity:.06}.tox-label{font-family:'Black Ops One';font-size:16px;color:#ffd934}.tox-num{font-family:'Black Ops One';font-size:clamp(68px,10vw,118px);line-height:.88;color:var(--gold);text-shadow:0 0 28px rgba(255,201,25,.28);margin:10px 0}.tox-band{font-family:Bangers,Impact,sans-serif;font-size:34px;color:#ff3b53;letter-spacing:1px}.tox-desc{color:#c7d2da;line-height:1.45}
.breakdown{margin-top:16px;border:2px solid #17699c;background:rgba(3,9,15,.96);padding:22px;box-shadow:0 0 30px rgba(0,149,255,.15)}
.section-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}.section-head:before,.section-head:after{content:"";height:3px;flex:1;background:linear-gradient(90deg,transparent,var(--cyan))}.section-head:after{background:linear-gradient(90deg,var(--cyan),transparent)}.section-head h2{font-family:Bangers,Impact,sans-serif;font-size:36px;margin:0;white-space:nowrap}
.stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-bottom:20px}
.stat-card{position:relative;background:#050d14;border:1px solid #26465e;overflow:hidden;min-width:0;transition:.15s ease}.stat-card.primary{border:2px solid var(--cyan);box-shadow:0 0 22px rgba(22,220,255,.35)}.stat-card.secondary{border:2px solid var(--gold);box-shadow:0 0 18px rgba(255,201,25,.22)}
.stat-card img{display:block;width:100%;aspect-ratio:157/250;object-fit:cover}.stat-score{position:absolute;right:7px;top:7px;background:rgba(0,0,0,.82);border:1px solid currentColor;padding:5px 7px;font-weight:900;color:var(--cyan)}
.bars{display:grid;gap:10px}.bar-row{display:grid;grid-template-columns:165px 1fr 52px;gap:12px;align-items:center}.bar-row b{font-size:13px}.bar-track{height:13px;border:1px solid #42637b;background:#0c1620;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,#0085ff,#15ddff);box-shadow:0 0 10px rgba(22,220,255,.5)}.bar-val{text-align:right;color:var(--cyan);font-weight:900}
.treatment{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;border:2px solid var(--gold);background:linear-gradient(90deg,#1a1304,#070b10);padding:18px 22px;box-shadow:0 0 25px rgba(255,201,25,.12)}
.treatment-icon{font-size:42px}.treatment b{display:block;color:var(--gold);letter-spacing:1.5px;margin-bottom:4px}.treatment p{margin:0;font-size:17px}
.result-actions{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.disclaimer{text-align:center;color:#677f91;font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-top:24px}

/* responsive */
@media(max-width:820px){
  .topbar{height:74px;padding:6px 12px}.small-logo{height:62px}.toplinks button:not(.top-status){display:none}.toplinks{font-size:17px}
  .page{padding-top:24px}.name-stage{grid-template-columns:1fr;gap:18px}.name-art{display:none}.name-panel{padding:28px 22px}.name-panel h1{font-size:58px}
  .quiz-shell{margin-top:18px;padding:22px 16px 28px}.question-paper{min-height:165px;display:flex;align-items:center}.scale-choice{grid-template-columns:48px 1fr;padding:8px 12px}.scale-num{font-size:21px}.quiz-nav{position:sticky;bottom:8px;z-index:5;background:rgba(2,6,11,.86);padding:8px;backdrop-filter:blur(8px)}
  .diag-grid{grid-template-columns:1fr}.primary-wrap{grid-template-columns:150px 1fr}.primary-art{width:150px}.trait-pair{grid-template-columns:1fr}.tox-card{min-height:250px}.stat-grid{grid-template-columns:repeat(3,1fr)}.bar-row{grid-template-columns:115px 1fr 45px;font-size:11px}
}
@media(max-width:520px){
  .poster-wrap{width:100vw}.landing-caption{display:none}
  .top-status{font-size:14px!important}.results-page{width:96vw}.results-title .brush{font-size:58px}.primary-wrap{grid-template-columns:1fr;text-align:center}.primary-art{width:min(260px,78vw);margin:0 auto}.combo-name{font-size:52px}.diag-copy{text-align:left}.trait-pair{text-align:left}.stat-grid{grid-template-columns:repeat(2,1fr)}.section-head h2{font-size:28px}.bar-row{grid-template-columns:100px 1fr 42px;gap:8px}.result-actions{flex-direction:column}.result-actions button{width:100%}.treatment{grid-template-columns:1fr;text-align:center}.question-paper{font-size:24px}.scale-copy strong{font-size:14px}.scale-copy span{font-size:11px}
}