:root { --ink:#201a43; --purple:#4b26dd; --violet:#7255ff; --mint:#c8f4dd; --cream:#fcfbff; --line:#e8e3f5; --muted:#736d8e; --shadow:0 24px 70px rgba(51,24,145,.15); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#eeebf8; font-family:"DM Sans",Arial,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
.page-shell { width:min(1120px,100%); min-height:100vh; margin:auto; display:grid; grid-template-columns:43% 57%; background:var(--cream); box-shadow:0 0 60px rgba(38,20,96,.1); overflow:hidden; }
.intro-panel { min-height:100vh; position:relative; padding:45px 45px 35px; color:white; overflow:hidden; background:linear-gradient(147deg,#2c0e9a 0%,#4d29dc 57%,#6949f3 100%); }
.intro-panel::before { content:""; position:absolute; width:490px; height:490px; border:1px solid rgba(255,255,255,.15); border-radius:50%; top:255px; left:-135px; }
.brand { position:relative; z-index:1; display:flex; align-items:center; gap:8px; font:700 25px Outfit,sans-serif; letter-spacing:-1.2px; }.brand>span:last-of-type span { color:#aaffcb; }.brand small { margin:4px 0 0 1px; padding-left:9px; border-left:1px solid rgba(255,255,255,.45); font:600 9px "DM Sans"; letter-spacing:1.7px; }.brand-mark { display:grid; place-items:center; width:27px; height:27px; border-radius:8px; color:#4825d8; background:#c8f4dd; font-size:18px; }
.eyebrow,.mini-label { font-size:10px; font-weight:700; letter-spacing:1.5px; }.eyebrow { position:relative; z-index:1; display:flex; align-items:center; gap:8px; margin-top:80px; color:#bff8d9; }.eyebrow span { width:22px; height:1px; background:#bff8d9; }.intro-panel h1 { position:relative; z-index:1; margin:14px 0 17px; font:800 clamp(46px,5vw,64px)/.97 Outfit,sans-serif; letter-spacing:-2.8px; }.intro-panel h1 em { color:#bff8d9; font-style:normal; }.intro-copy { position:relative; z-index:1; max-width:305px; margin:0; color:#e6ddff; font-size:14px; line-height:1.65; }
.reward-preview { position:relative; z-index:1; display:flex; align-items:center; gap:12px; margin-top:27px; color:#fff; font-size:13px; line-height:1.45; }.reward-preview strong { font-size:14px; }.reward-preview span { color:#d5caff; }.gift-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#3210a8; background:#c8f4dd; font-size:24px; }
.student-illustration { position:absolute; right:-3px; bottom:57px; width:280px; height:260px; }.phone { position:absolute; z-index:2; left:95px; top:36px; width:135px; height:220px; padding:23px 17px; border:6px solid white; border-radius:28px; transform:rotate(12deg); background:#fdfcff; box-shadow:0 24px 35px rgba(19,6,83,.38); }.phone-top { width:36px; height:5px; margin:0 auto; border-radius:99px; background:#d8d2ed; }.phone-check { display:grid; place-items:center; width:60px; height:60px; margin:29px auto 14px; border-radius:50%; color:white; background:#3bd18d; font-size:28px; }.phone-line { height:8px; border-radius:99px; background:#e7e2f3; }.phone-line.short { width:58px; margin:11px auto; }.orbit { position:absolute; border:1px dashed rgba(213,255,232,.65); border-radius:50%; }.orbit-one { width:260px; height:260px; top:0; left:9px; }.orbit-two { width:186px; height:186px; top:37px; left:47px; }.coin { position:absolute; z-index:3; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#4a25d7; background:#c8f4dd; font-size:20px; font-weight:700; box-shadow:0 8px 18px rgba(28,8,114,.25); }.coin-one { top:53px; left:34px; }.coin-two { right:14px; bottom:52px; color:#f6e7ff; background:#7356ff; }.spark { position:absolute; z-index:3; color:#ffdc78; font-size:27px; }.sparkle-one { top:23px; right:42px; }.sparkle-two { left:27px; bottom:52px; font-size:17px; color:#c8f4dd; }.privacy-note { position:absolute; z-index:1; bottom:23px; left:45px; margin:0; color:#cfc3fb; font-size:10px; }
.survey-panel { min-height:100vh; display:grid; place-items:center; padding:48px clamp(28px,7vw,95px); background:radial-gradient(circle at 92% 9%,#f0edff 0,transparent 22%),#fcfbff; }.screen { width:min(100%,480px); }.hidden { display:none !important; }.welcome-screen h2,.question-content h2,.result-screen h2 { margin:12px 0; font:700 clamp(30px,4vw,43px)/1.06 Outfit,sans-serif; letter-spacing:-1.6px; }.mini-label { color:#735de7; }.welcome-screen>p:not(.small-print) { color:var(--muted); font-size:15px; line-height:1.65; }.name-field { display:block; margin:35px 0 17px; }.name-field span { display:block; margin-bottom:8px; color:#514a70; font-size:12px; font-weight:700; }.name-field input { width:100%; padding:15px 0; outline:none; border:0; border-bottom:2px solid #ddd7ec; color:var(--ink); background:transparent; font-size:19px; font-weight:600; transition:.2s; }.name-field input:focus { border-color:var(--purple); }.name-field input::placeholder { color:#bab4c9; font-weight:400; }.primary-button,.secondary-button { display:flex; justify-content:center; align-items:center; gap:14px; width:100%; min-height:54px; border:0; border-radius:13px; font-size:14px; font-weight:700; transition:transform .18s,box-shadow .18s,background .18s; }.primary-button { color:#fff; background:var(--purple); box-shadow:0 10px 22px rgba(75,38,221,.22); }.primary-button span { font-size:22px; line-height:0; }.primary-button:hover:not(:disabled) { transform:translateY(-2px); background:#3c1bc5; box-shadow:0 15px 28px rgba(75,38,221,.3); }.primary-button:disabled { cursor:not-allowed; opacity:.44; box-shadow:none; }.small-print { margin:18px 12px; color:#9991af; font-size:10px; line-height:1.5; text-align:center; }
.quiz-screen { min-height:480px; display:flex; flex-direction:column; }.quiz-topbar { display:grid; grid-template-columns:37px 1fr auto; align-items:center; gap:12px; }.back-button { width:35px; height:35px; border:1px solid var(--line); border-radius:10px; color:#786f98; background:white; font-size:21px; transition:.2s; }.back-button:hover { color:var(--purple); border-color:var(--purple); }.progress-info span { display:block; margin-bottom:7px; color:#625a80; font-size:11px; font-weight:700; }.progress-track { height:5px; overflow:hidden; border-radius:99px; background:#ebe7f3; }.progress-track div { width:8.33%; height:100%; border-radius:99px; background:linear-gradient(90deg,#4b26dd,#8067ff); transition:width .35s ease; }.question-tag { padding:7px 9px; border-radius:7px; color:#6248dc; background:#eeeaff; font-size:10px; font-weight:700; }.question-content { flex:1; padding-top:54px; }.question-content h2 { max-width:450px; margin:11px 0 29px; }.answers { display:grid; gap:10px; }.answer { display:flex; align-items:center; gap:14px; width:100%; min-height:58px; padding:10px 15px; border:1px solid #e5e0ee; border-radius:13px; color:#4e476b; background:#fff; text-align:left; font-size:14px; font-weight:600; transition:.18s; }.answer-key { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:8px; color:#8e87a5; background:#f4f2f8; font-size:11px; }.answer:hover { border-color:#a99af7; background:#faf9ff; }.answer.selected { border-color:#5632e0; color:#37228b; background:#f2efff; box-shadow:0 4px 12px rgba(88,49,224,.09); }.answer.selected .answer-key { color:white; background:#5632e0; }.next-button { margin-top:29px; }
.result-screen { text-align:center; }.celebration-icon { display:grid; place-items:center; width:82px; height:82px; margin:0 auto 22px; border-radius:28px; background:#c8f4dd; font-size:42px; transform:rotate(-5deg); }.celebration-icon.retry { color:#5130d5; background:#eeebff; font-size:40px; }.result-screen h2 { margin-bottom:17px; }.result-screen h2 span { color:#5130d5; }.result-copy { max-width:360px; margin:0 auto 26px; color:#756e8c; font-size:14px; line-height:1.65; }.result-copy strong { color:#39298f; }.coupon { display:flex; justify-content:space-between; align-items:center; margin:0 auto; padding:15px 16px; border:1px dashed #b9abeb; border-radius:13px; text-align:left; background:#f9f7ff; }.coupon small { display:block; margin-bottom:4px; color:#8478a7; font-size:9px; font-weight:700; letter-spacing:.8px; }.coupon strong { display:block; color:#3d20be; font:700 18px Outfit,sans-serif; letter-spacing:.8px; }.coupon button { padding:8px 11px; border:0; border-radius:8px; color:#5130d5; background:#eae5ff; font-size:11px; font-weight:700; }.coupon-help { color:#978fa9; font-size:11px; }.secondary-button { margin-top:22px; min-height:45px; border:1px solid #e3ddec; color:#675f7b; background:#fff; font-size:12px; }.secondary-button:hover { border-color:#a99af7; color:#5130d5; }.toast { position:fixed; z-index:10; bottom:24px; left:50%; padding:12px 18px; border-radius:9px; color:#fff; background:#27155c; font-size:12px; font-weight:700; opacity:0; transform:translate(-50%,20px); pointer-events:none; transition:.25s; }.toast.visible { opacity:1; transform:translate(-50%,0); }.confetti { position:fixed; z-index:9; inset:0; overflow:hidden; pointer-events:none; }.piece { position:absolute; top:-20px; width:9px; height:14px; border-radius:2px; animation:fall 2.8s linear forwards; }@keyframes fall { to { transform:translate(var(--drift),110vh) rotate(720deg); opacity:0; } }
@media (max-width:760px) { .page-shell { display:block; }.intro-panel { min-height:438px; padding:31px 28px; }.eyebrow { margin-top:46px; }.intro-panel h1 { font-size:47px; }.intro-copy { max-width:280px; font-size:13px; }.reward-preview { margin-top:19px; }.student-illustration { right:-18px; bottom:-15px; width:220px; transform:scale(.72); transform-origin:bottom right; }.privacy-note { left:28px; bottom:18px; }.survey-panel { min-height:590px; padding:45px 28px; }.quiz-screen { min-height:480px; }.question-content { padding-top:43px; }.question-content h2 { font-size:31px; }.answer { min-height:55px; }.welcome-screen h2,.result-screen h2 { font-size:36px; } }
@media (max-width:370px) { .intro-panel { min-height:455px; }.intro-panel h1 { font-size:41px; }.student-illustration { transform:scale(.62); right:-38px; }.survey-panel { padding-left:21px; padding-right:21px; } }