/* AFTON V2 — viral, acessível e centrado no visitante. Mobile first. */
:root{--ink:#211631;--muted:#635b70;--paper:#fffdf8;--line:#eee7ed;--purple:#693bef;--yellow:#ffdf6c;--radius:24px;--shadow:0 16px 38px rgba(48,20,86,.09)}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);line-height:1.54}
h1,h2,h3,.brand,.btn{letter-spacing:-.04em}
h1,h2,h3{font-weight:800}
h2{font-size:clamp(2.3rem,4.6vw,4.2rem)}
p{color:#665c71}
.header{position:sticky;top:0;background:rgba(255,253,248,.95);border-bottom:1px solid #f0e7f0;backdrop-filter:blur(15px);z-index:50}
.nav{height:74px;gap:28px}
.brand{font-size:1.72rem;font-weight:800;letter-spacing:-.065em}
.brand-icon{display:inline-grid;place-items:center;border-radius:12px;width:32px;height:32px;background:#ffe16e;color:#32125a;margin-right:7px;transform:rotate(-12deg)}
.brand-dot{color:#7045ee}
.nav-links a{font-size:.95rem;font-weight:700}
.nav-links a:hover,.footer a:hover{color:#7449ec}
.btn{font-weight:800;border-radius:15px;min-height:45px;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-shadow:none;text-align:center}
.btn-dark{background:#713df1;color:white;border:2px solid #713df1;box-shadow:0 5px 0 #4825a7}
.btn-dark:hover{background:#582bd5;transform:translateY(-2px)}
.btn-light{background:#fff;color:#28183f;border:2px solid #d8cbe8}
.btn-light:hover{background:#f8f3ff;border-color:#ac93eb}
.btn-large{padding:15px 23px;min-height:54px}
.nav-cta{font-size:.89rem;box-shadow:none}
.pop-hero{background:radial-gradient(ellipse at 95% 0%,#e8caff 0,transparent 48%),radial-gradient(ellipse at 0% 100%,#ffeac1 0,transparent 54%),#fffdf8;overflow:hidden;padding:50px 0 60px}
.pop-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.94fr);align-items:center;gap:clamp(28px,4vw,60px)}
.pop-eyebrow,.pop-kicker{display:inline-block;font:800 .77rem/1.3 "Space Grotesk",sans-serif;letter-spacing:.07em;color:#6542d1;text-transform:uppercase;margin-bottom:20px}
.pop-eyebrow{background:#ece1ff;border-radius:999px;padding:11px 16px}
.pop-hero h1{font-size:clamp(3.25rem,6.2vw,6.2rem);line-height:1.03;letter-spacing:-.079em;margin-bottom:23px}
.pop-hero h1 em{font-style:normal;color:#7141ed;text-decoration:underline;text-decoration-color:#ffd970;text-decoration-thickness:.13em;text-underline-offset:-.04em}
.pop-hero .lead{max-width:545px;font-size:clamp(1.07rem,1.7vw,1.29rem);color:#544b60;line-height:1.6;margin-bottom:29px}
.pop-hero .hero-cta{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.pop-hero .hero-under{color:#6b6075;font-weight:650;font-size:.84rem;margin:19px 0 0}
.pop-hero-gallery{position:relative;min-height:470px;display:grid;grid-template-columns:1.18fr .86fr;gap:20px;align-items:center;padding:27px 0}
.hero-feature{position:relative;display:block;height:376px;border:8px solid #fff;border-radius:34px;overflow:hidden;box-shadow:0 22px 55px rgba(67,44,102,.18);transition:transform .2s ease,box-shadow .2s ease}
.hero-feature img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.hero-feature:hover{transform:translateY(-7px) rotate(0);box-shadow:0 28px 60px rgba(67,44,102,.22)}
.hero-feature:hover img{transform:scale(1.065)}
.hero-feature-first{transform:rotate(-6deg);background:#ffd6df}
.hero-feature-second{height:317px;transform:rotate(7deg);background:#dee9ff;margin-top:43px}
.feature-bubble{position:absolute;bottom:14px;left:10px;right:10px;padding:13px 12px;border-radius:16px;color:#211631;background:#fff;box-shadow:0 4px 0 rgba(23,12,57,.13);font:800 .9rem/1.2 "Space Grotesk",sans-serif;text-align:center}
.gallery-spark{position:absolute;top:-13px;left:44%;font-size:5rem;color:#ffb728;text-shadow:3px 5px 0 #fff;pointer-events:none}
.ribbon{background:#221838;color:white;padding:13px 0;border-top:4px solid #f9d95f;border-bottom:4px solid #f9d95f}
.ribbon-row{display:flex;justify-content:space-around;flex-wrap:wrap;gap:16px}
.ribbon-row span{font:800 .95rem/1.4 "Space Grotesk",sans-serif;white-space:nowrap}
.pop-discover{padding:85px 0 95px}
.pop-section-head{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:29px}
.pop-section-head h2{margin-bottom:13px}
.pop-section-head h2 em,.pop-create-band h2 em{color:#6b40ea;font-style:normal}
.pop-section-head p{font-size:1.04rem;margin:0}
.pop-create-link{display:inline-block;white-space:nowrap;background:#fff0b6;border:2px solid #252035;padding:10px 17px;border-radius:99px;font-weight:800;transform:rotate(-3deg)}
.pop-create-link:hover{transform:rotate(0) translateY(-3px)}
.browse{margin-bottom:25px}
.chips{gap:9px}
.chip{min-height:44px;border-radius:99px;padding:8px 15px;border:2px solid #e8deea;background:#fff;font-weight:800;color:#5b4d69}
.chip:hover{border-color:#9b7df2}
.chip.active{background:#211535;color:#fff;border-color:#211535}
.search{border:2px solid #e9e1ed;border-radius:15px;background:#fff}
.search:focus-within{border-color:#7e58eb}
.pop-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pop-cards .quiz-card{background:#fff;border:1px solid #ebe4ed;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 7px 0 #f0e6f0,0 15px 35px rgba(58,23,72,.07);transform:none;transition:transform .2s ease,box-shadow .2s ease}
.pop-cards .quiz-card:hover{transform:translateY(-7px);box-shadow:0 9px 0 #e3d5f2,0 25px 42px rgba(58,23,72,.14)}
.pop-cards .card-image{position:relative;display:block;aspect-ratio:1.5;overflow:hidden;background:#e7d9f7}
.pop-cards .card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.pop-cards .quiz-card:hover .card-image img{transform:scale(1.07)}
.pop-cards .photo-sticker{position:absolute;right:13px;bottom:-1px;background:#fff3b6;padding:6px 14px 11px;border-radius:20px 20px 0 0;font-size:1.55rem;line-height:1.4;filter:drop-shadow(0 2px 2px #0003)}
.pop-cards .quiz-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.pop-cards .card-meta{font-size:.77rem;letter-spacing:.03em;color:#855be5;font-weight:800;text-transform:uppercase}
.pop-cards .card-meta span{color:#c1b1d2;padding:0 5px}
.pop-cards .quiz-card-title{font:800 clamp(1.18rem,2.1vw,1.53rem)/1.22 "Space Grotesk",sans-serif;letter-spacing:-.045em;color:#24162f}
.pop-cards .quiz-card-description{font-size:.91rem;color:#6f6275;line-height:1.43}
.pop-cards .card-go{display:inline-flex;margin-top:auto;padding-top:10px;font-size:.92rem;font-weight:800;color:#693bea;align-items:center;gap:5px}
.pop-cards .quiz-card[hidden]{display:none}
.no-results{background:#f9f0fd;padding:35px;border-radius:22px;text-align:center;font-weight:700}
.pop-create-band{padding:84px 0;background:#f4eafa}
.pop-band-grid{display:grid;grid-template-columns:.95fr 1.1fr;align-items:center;gap:clamp(30px,6vw,100px)}
.pop-band-art{position:relative;border:9px solid #fff;box-shadow:15px 18px 0 #fbcf6e;border-radius:32px;height:430px;transform:rotate(-2deg)}
.pop-band-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:23px}
.band-speech{position:absolute;bottom:-27px;right:-12px;padding:17px 19px;border-radius:20px;background:#fff;color:#251b3b;font:800 1rem "Space Grotesk",sans-serif;box-shadow:0 8px 20px #4020472b;transform:rotate(4deg)}
.pop-create-band h2{font-size:clamp(2.25rem,4vw,3.7rem);margin-bottom:20px}
.pop-create-band p{font-size:1.04rem;line-height:1.55;margin-bottom:24px}
.pop-steps{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}
.pop-steps li{display:grid;grid-template-columns:43px 1fr;align-items:start;column-gap:13px}
.pop-steps li>span{grid-row:span 2;background:#fff7c4;color:#352350;border-radius:12px;padding:10px;text-align:center;font-weight:900;font-size:.89rem}
.pop-steps strong{display:block;font-size:1.04rem}
.pop-steps small{display:block;color:#73677c;font-size:.86rem;line-height:1.5}
.pop-end{background:#ffdf8e;padding:62px 0;text-align:center}
.pop-end h2{font-size:clamp(1.8rem,4.2vw,3rem);max-width:730px;margin:12px auto 24px}
.pop-end span{font-size:2.5rem}
.pop-end .btn{background:#271738;border-color:#271738;box-shadow:0 5px 0 #67446c}
.inner-hero{background:linear-gradient(120deg,#fff2ca,#f2e6ff);padding:45px 0 60px}
.inner-hero h1{font-size:clamp(2.3rem,5vw,4.5rem)}
.inner-hero h1 em{font-style:normal;color:#7144e9}
.quiz-hero-grid{align-items:center}
.quiz-hero .page-art{width:100%;max-width:390px;height:270px;border:7px solid #fff;box-shadow:13px 13px 0 #f5b7dc;border-radius:30px;overflow:hidden;transform:rotate(3deg);margin:auto}
.quiz-hero .page-art img{width:100%;height:100%;object-fit:cover}
.quiz-hero .page-art>span,.quiz-hero .page-art>i{display:none}
.game{border-radius:24px;background:#fff;border:1px solid #eee5f0;box-shadow:0 14px 36px #301e5315;padding:clamp(24px,4vw,40px)}
.start-panel>h2{font-size:clamp(1.8rem,3.3vw,2.5rem)}
.progress-fill{background:#7546ed}
.answer{border:2px solid #e9dff2;background:#fffdfa;min-height:70px;border-radius:18px;text-align:left;color:#2b1e3e}
.answer:hover{border-color:#9976ef;background:#f6f1ff}
.answer.is-selected{background:#e9deff;border-color:#7649e6}
.answer-number{background:#f3ebfb;color:#6949c2;border-radius:12px;font-weight:900}
.question-title{font-size:clamp(1.6rem,4vw,2.6rem)}
/* Social challenge game with images and instant scored feedback */
.play-card-image{display:block;width:100%;height:126px;object-fit:cover;background:linear-gradient(140deg,#e5d8ff,#ffebbe)}
.visual-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.visual-answers .answer{display:flex;flex-direction:column;overflow:hidden;padding:0;min-height:185px;gap:0;text-align:center}
.visual-answers .answer img{width:100%;height:140px;object-fit:cover;display:block}
.visual-answers .answer .visual-choice-emoji{font-size:3rem;padding:23px}
.visual-answers .answer .visual-choice-label{display:block;padding:13px 12px;font-weight:800;font-size:.93rem;line-height:1.35;flex:1}
.visual-answers .answer .answer-number{position:absolute;top:8px;left:8px;background:#fff;padding:6px 10px;box-shadow:0 2px 10px #0003}
.visual-answers .answer{position:relative}
.answer.is-correct{background:#dbf9e5!important;border-color:#2eaf66!important;color:#11572d}
.answer.is-wrong{background:#ffe2e7!important;border-color:#e75467!important;color:#87213d}
.game-feedback{padding:16px 20px;border-radius:18px;background:#e5f9ea;color:#136036;margin:21px 0 0;font-weight:700}
.game-feedback.is-wrong{background:#fff0f2;color:#9a3244}
.game-feedback strong{display:block}
.game-feedback small{display:block;line-height:1.5;font-size:.85rem;margin-top:4px}
.game-next{width:100%;margin-top:18px}
.score-dots{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin:10px 0 23px}
.score-dots span{display:grid;place-items:center;min-width:0;aspect-ratio:1;border-radius:10px;background:#f0e9f7;color:#6c5d82;font-size:.8rem;font-weight:800}
.score-dots .current{background:#7550e9;color:#fff}.score-dots .right{background:#b9eeca;color:#176234}.score-dots .wrong{background:#ffcad2;color:#a72c43}
.footer{background:#241934;color:#fff;padding-top:62px}
.footer p,.footer small,.footer .footer-columns a{color:#ded3e9}
.footer .brand,.footer .footer-columns strong,.footer-bottom .by-avatix{color:#fff}
.footer-bottom{border-color:#655275}
@media(max-width:1020px){.pop-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.pop-hero-gallery{min-height:365px}.hero-feature{height:285px}.hero-feature-second{height:245px}}
@media(max-width:740px){.nav{height:68px}.pop-hero{padding:43px 0 48px}.pop-hero-grid{grid-template-columns:1fr;gap:25px}.pop-hero h1{font-size:clamp(3.2rem,12vw,5rem)}.pop-hero-gallery{max-width:495px;width:100%;margin:0 auto;min-height:270px;padding:7px}.hero-feature{height:232px;border-width:6px;border-radius:23px}.hero-feature-second{height:195px}.gallery-spark{font-size:3rem;top:-10px}.feature-bubble{font-size:.75rem;padding:9px}.pop-discover{padding:58px 0}.pop-section-head{align-items:start;flex-direction:column}.pop-band-grid{grid-template-columns:1fr}.pop-band-art{height:280px;max-width:500px;margin:0 auto;width:100%}.pop-create-band{padding:62px 0}.pop-end{padding:40px 0}.ribbon-row{gap:6px}.ribbon-row span{font-size:.8rem}.quiz-hero .page-art{height:215px;max-width:300px}}
@media(max-width:530px){.pop-hero .hero-cta{flex-direction:column}.pop-hero .hero-cta .btn{width:100%}.pop-cards{grid-template-columns:1fr;gap:18px}.pop-cards .card-image{aspect-ratio:1.65}.pop-cards .quiz-card-title{font-size:1.39rem}.ribbon-row{display:grid;grid-template-columns:1fr 1fr;place-items:center}.pop-section-head h2{font-size:2.3rem}.visual-answers{gap:10px}.visual-answers .answer img{height:116px}.visual-answers .answer .visual-choice-label{font-size:.86rem}.visual-answers .answer{min-height:155px}.score-dots{gap:3px}.score-dots span{border-radius:7px;font-size:.7rem}}

/* Comfortable touch targets for links, not only buttons. */
.header .brand{min-height:44px;display:inline-flex;align-items:center}
.header .nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 2px}
.menu-toggle{min-width:46px;min-height:46px}
.footer-columns a{min-height:43px;display:flex;align-items:center}
.footer .brand{min-height:44px;display:inline-flex;align-items:center}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
.inner-hero .back,.creator-hero .back{min-height:44px;display:inline-flex;align-items:center}

/* If a remote image is still loading or unavailable, the quiz remains illustrated. */
.pop-cards .card-image:before{content:attr(data-emoji);position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(140deg,#e1d0fa,#fff0a1);font-size:4.2rem;line-height:1;z-index:0}
.pop-cards .card-image img{position:relative;z-index:1}
.pop-cards .photo-sticker{z-index:2}