/* ═══════════════════════════════════════════════════════
   NEKOCHIN ANIME GOODS — Ultra Edition v3
   Additions: Loader, Flash Banner, Quiz, FAQ, TikTok,
              Parallax, Glitch, Copy Toast
   ═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── Variables ── */
:root {
    --bg:#07071a; --card-bg:rgba(255,255,255,.04);
    --np:#c084fc; --npk:#f472b6; --nc:#22d3ee; --nv:#8b5cf6;
    --gm:linear-gradient(135deg,#b94fff 0%,#ff4fa3 100%);
    --gt:linear-gradient(90deg,#c084fc 0%,#f472b6 50%,#38bdf8 100%);
    --gb:linear-gradient(90deg,#c084fc,#f472b6,#38bdf8,#c084fc);
    --gb2:rgba(255,255,255,.09); --gs:0 8px 32px rgba(0,0,0,.5);
    --tx:#f0e6ff; --td:rgba(240,230,255,.6); --tm:rgba(240,230,255,.35);
    --fh:'Orbitron',monospace; --fb:'Space Grotesk',sans-serif;
    --r:20px; --rs:12px; --px:1.2rem;
    --scroll-y:0;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--fb);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;cursor:none}

/* ── LOADING SCREEN ── */
.loader{
    position:fixed;inset:0;z-index:10000;
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;
    transition:opacity .6s ease, visibility .6s ease;
}
.loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader-bg{
    position:absolute;inset:0;
    background:radial-gradient(ellipse at 30% 40%,rgba(185,79,255,.35),transparent 60%),
               radial-gradient(ellipse at 70% 60%,rgba(255,79,163,.25),transparent 60%),
               var(--bg);
    animation:loader-bg-pulse 2s ease-in-out infinite alternate;
}
@keyframes loader-bg-pulse{0%{filter:brightness(1)}100%{filter:brightness(1.3)}}
.loader-content{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.loader-logo-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem}
.loader-cat{font-size:3.5rem;animation:loader-cat-bounce .8s ease-in-out infinite alternate;filter:drop-shadow(0 0 20px rgba(185,79,255,.8))}
@keyframes loader-cat-bounce{0%{transform:translateY(0)}100%{transform:translateY(-10px)}}
.loader-name{
    font-family:var(--fh);font-size:2.2rem;font-weight:900;letter-spacing:6px;
    background:var(--gt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    min-height:1.2em;
}
.loader-bar-wrap{width:200px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.loader-bar{height:100%;width:0%;background:var(--gm);border-radius:2px;transition:width .05s linear;box-shadow:0 0 10px rgba(185,79,255,.6)}
.loader-sub{font-size:.7rem;letter-spacing:2px;color:var(--tm);text-transform:uppercase}
.loader-particles{position:absolute;inset:0;pointer-events:none;z-index:2}
.burst-particle{position:absolute;border-radius:50%;animation:burst-out .8s ease-out forwards}
@keyframes burst-out{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(var(--bx),var(--by)) scale(1);opacity:0}}

/* ── Noise ── */
.noise-overlay{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.03;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:128px 128px;mix-blend-mode:overlay}

/* ── Custom Cursor ── */
.cursor-dot{position:fixed;width:18px;height:18px;border-radius:50%;background:var(--gm);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);box-shadow:0 0 12px rgba(185,79,255,.8);mix-blend-mode:screen;transition:width .15s,height .15s}
.cursor-dot.clicking{width:26px;height:26px;box-shadow:0 0 24px rgba(185,79,255,1)}
.cursor-spark{position:fixed;pointer-events:none;z-index:9997;animation:spark-fade .6s ease-out forwards;transform:translate(-50%,-50%)}
@keyframes spark-fade{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-180%) scale(.3)}}

/* ── Aurora (parallax ready) ── */
.ambient-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.aurora{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;animation:aurora-drift 14s ease-in-out infinite alternate;will-change:transform}
.aurora-1{width:550px;height:550px;background:radial-gradient(circle,rgba(185,79,255,.5),transparent 70%);top:-150px;left:-120px;animation-delay:0s}
.aurora-2{width:420px;height:420px;background:radial-gradient(circle,rgba(255,79,163,.4),transparent 70%);top:35%;right:-100px;animation-delay:-5s}
.aurora-3{width:360px;height:360px;background:radial-gradient(circle,rgba(0,229,255,.3),transparent 70%);bottom:15%;left:5%;animation-delay:-9s}
@keyframes aurora-drift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(25px,-25px) scale(1.06)}66%{transform:translate(-15px,20px) scale(.97)}100%{transform:translate(18px,8px) scale(1.04)}}

/* ── Sakura ── */
.sakura-container{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.sakura{position:absolute;top:-30px;opacity:0;animation:sakura-fall linear infinite;user-select:none}
@keyframes sakura-fall{0%{transform:translate(0,0) rotate(0deg);opacity:0}5%{opacity:.8}95%{opacity:.5}100%{transform:translate(var(--drift),110vh) rotate(720deg);opacity:0}}

/* ── FLASH SALE BANNER ── */
.flash-banner{
    position:relative;z-index:11;
    display:flex;align-items:center;justify-content:center;gap:.6rem;
    padding:.6rem var(--px);
    background:linear-gradient(90deg,rgba(185,79,255,.25),rgba(255,79,163,.2),rgba(185,79,255,.25));
    border-bottom:1px solid rgba(255,79,163,.35);
    animation:flash-pulse 2.5s ease-in-out infinite;
    transition:max-height .4s ease,opacity .4s ease,padding .4s ease;
    overflow:hidden;
}
.flash-banner.dismissed{max-height:0!important;opacity:0;padding:0;border:none}
@keyframes flash-pulse{0%,100%{background-position:0%}50%{background-position:100%}}
.flash-icon{font-size:1rem;animation:flash-shake .5s ease-in-out infinite alternate}
@keyframes flash-shake{0%{transform:rotate(-10deg)}100%{transform:rotate(10deg)}}
.flash-text{font-size:.8rem;font-weight:600;color:var(--tx);flex:1;text-align:center}
.flash-link{color:var(--np);text-decoration:none;font-weight:700;margin-left:.4rem}
.flash-link:hover{text-decoration:underline}
.flash-close{background:none;border:none;color:var(--tm);font-size:1rem;cursor:pointer;padding:.2rem .4rem;line-height:1;transition:color .2s}
.flash-close:hover{color:var(--npk)}

/* ── Ticker ── */
.ticker-wrap{position:relative;z-index:10;background:linear-gradient(90deg,rgba(185,79,255,.12),rgba(255,79,163,.08),rgba(185,79,255,.12));border-bottom:1px solid rgba(185,79,255,.2);overflow:hidden;padding:.5rem 0}
.ticker-track{display:flex;gap:2rem;white-space:nowrap;animation:ticker-scroll 30s linear infinite;width:max-content}
.ticker-item{font-family:var(--fb);font-size:.78rem;font-weight:600;color:var(--np);letter-spacing:.3px}
.ticker-sep{color:var(--npk);font-size:.72rem}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Layout ── */
.page-container{max-width:480px;margin:0 auto;position:relative;z-index:2;padding-bottom:110px}
.section{padding:4rem var(--px)}

/* ── Labels & Titles ── */
.section-label{font-size:.7rem;font-weight:600;letter-spacing:4px;color:var(--np);text-align:center;margin-bottom:.4rem;text-transform:uppercase}
.section-title{font-family:var(--fh);font-size:1.35rem;font-weight:700;text-align:center;margin-bottom:2rem;letter-spacing:1px;text-transform:uppercase}
.gradient-text{background:var(--gt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}

/* ── Glass Card ── */
.glass-card{background:var(--card-bg);border:1px solid var(--gb2);border-radius:var(--r);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--gs);position:relative;overflow:hidden;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}
.glass-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 50%);pointer-events:none}

/* Arc border */
.arc-border::after{content:'';position:absolute;inset:-1px;border-radius:calc(var(--r) + 1px);background:var(--gb);background-size:300% 300%;animation:border-spin 4s linear infinite;z-index:-1;padding:1px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@keyframes border-spin{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ── Buttons ── */
.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 1.5rem;border-radius:var(--rs);text-decoration:none;font-family:var(--fb);font-weight:700;font-size:.95rem;transition:all .25s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;border:none;position:relative;overflow:hidden;width:100%}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gm);color:#fff}
.btn-glow{box-shadow:0 0 20px rgba(185,79,255,.5),0 4px 15px rgba(255,79,163,.4)}
.btn-glow:active{box-shadow:0 0 35px rgba(185,79,255,.9)}
.btn-glass{background:rgba(255,255,255,.07);color:var(--tx);border:1px solid var(--gb2);backdrop-filter:blur(10px)}
.btn-glass:active{background:rgba(185,79,255,.15);border-color:rgba(185,79,255,.5)}
.btn-fb-neo{background:linear-gradient(135deg,#1877F2,#0d5ab5);color:#fff;box-shadow:0 4px 15px rgba(24,119,242,.4)}
.btn-tiktok{background:linear-gradient(135deg,#010101,#2a2a2a);color:#fff;border:1px solid rgba(255,255,255,.15);gap:.5rem}
.btn-tiktok:active{background:#111}
.btn-large{padding:1.2rem 1.5rem;font-size:1rem}
.btn-icon{font-size:1rem}
.btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.22);transform:scale(0);animation:ripple .5s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(2.8);opacity:0}}

/* ── HERO ── */
.hero{padding-top:2.5rem;text-align:center;position:relative}
.logo-wrap{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:2.5rem}
.logo-badge{width:44px;height:44px;border-radius:12px;background:var(--gm);display:flex;align-items:center;justify-content:center;font-size:1.4rem;box-shadow:0 0 20px rgba(185,79,255,.6)}
.logo-text-group{display:flex;flex-direction:column;text-align:left}
.brand-logo{font-family:var(--fh);font-size:1.3rem;font-weight:900;letter-spacing:3px;background:var(--gt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;display:inline-block}
.brand-logo.glitch{animation:glitch .4s steps(2) forwards}
@keyframes glitch{
    0%   {text-shadow:2px 0 #ff4fa3,-2px 0 #22d3ee;transform:translate(0)}
    20%  {text-shadow:-2px 0 #ff4fa3, 2px 0 #22d3ee;transform:translate(-2px,1px)}
    40%  {text-shadow:2px 0 #c084fc,-2px 0 #ff4fa3;transform:translate(2px,-1px)}
    60%  {text-shadow:-2px 0 #22d3ee, 2px 0 #c084fc;transform:translate(-1px,2px)}
    80%  {text-shadow:2px 0 #ff4fa3,-2px 0 #22d3ee;transform:translate(1px,-2px)}
    100% {text-shadow:none;transform:translate(0)}
}
.brand-sub{font-size:.6rem;font-weight:600;letter-spacing:3px;color:var(--tm);text-transform:uppercase}
.hero-tag{font-size:.7rem;font-weight:600;letter-spacing:3px;color:var(--np);text-transform:uppercase;margin-bottom:1.25rem;animation:pulse-glow 3s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{opacity:.6;text-shadow:none}50%{opacity:1;text-shadow:0 0 10px var(--np)}}
.hero-headline{font-family:var(--fh);font-size:1.9rem;line-height:1.2;margin-bottom:1rem;display:flex;flex-direction:column;gap:.08em}
.line-static{color:var(--tx)}
.line-typewriter{position:relative;background:var(--gt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;min-height:1.25em;display:block}
.typed-cursor{display:inline-block;-webkit-text-fill-color:var(--npk);animation:blink-cursor .75s step-end infinite;font-weight:400}
@keyframes blink-cursor{0%,100%{opacity:1}50%{opacity:0}}
.hero-subheadline{font-size:.85rem;color:var(--td);margin-bottom:1.5rem}

/* Countdown */
.countdown-wrap{margin-bottom:2rem;padding:1rem 1.25rem;background:rgba(185,79,255,.08);border:1px solid rgba(185,79,255,.25);border-radius:var(--rs);animation:cd-pulse 2s ease-in-out infinite}
@keyframes cd-pulse{0%,100%{box-shadow:0 0 0 rgba(185,79,255,0)}50%{box-shadow:0 0 20px rgba(185,79,255,.2)}}
.countdown-label{font-size:.72rem;font-weight:600;color:var(--npk);letter-spacing:1px;margin-bottom:.75rem}
.countdown-timer{display:flex;align-items:center;justify-content:center;gap:.4rem}
.time-block{display:flex;flex-direction:column;align-items:center;gap:.1rem;flex:1}
.time-num{font-family:var(--fh);font-size:1.7rem;font-weight:900;background:var(--gt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;min-width:2ch;text-align:center;transition:transform .2s}
.time-num.flip{transform:scaleY(1.15)}
.time-unit{font-size:.58rem;color:var(--tm);letter-spacing:1px;text-transform:uppercase}
.time-colon{font-family:var(--fh);font-size:1.4rem;font-weight:700;color:var(--np);align-self:flex-start;padding-top:.05em;animation:colon-blink 1s step-end infinite}
@keyframes colon-blink{0%,100%{opacity:1}50%{opacity:.2}}

/* Hero visual */
.hero-visual{position:relative;margin-bottom:2rem;display:flex;align-items:center;justify-content:center}
.glow-orb{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none}
.orb-1{width:200px;height:200px;background:rgba(185,79,255,.35);top:50%;left:50%;transform:translate(-50%,-50%)}
.orb-2{width:140px;height:140px;background:rgba(255,79,163,.25);top:50%;left:50%;transform:translate(-50%,-50%)}
.hero-card-3d{width:100%;max-width:310px;background:rgba(255,255,255,.05);border:1px solid rgba(185,79,255,.3);border-radius:24px;overflow:hidden;backdrop-filter:blur(20px);box-shadow:0 0 40px rgba(185,79,255,.2),0 20px 60px rgba(0,0,0,.5);animation:card-float 7s ease-in-out infinite;position:relative;z-index:1;transition:transform .15s ease}
@keyframes card-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
.card-inner{padding:2.5rem 2rem;position:relative}
.card-shimmer{position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%);animation:shimmer 2.5s ease-in-out infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.neko-icon-big{font-size:3.5rem;margin-bottom:.75rem;display:block;filter:drop-shadow(0 0 15px rgba(185,79,255,.6))}
.card-label{font-family:var(--fh);font-size:.62rem;letter-spacing:2px;color:var(--tm);margin-bottom:1rem;text-transform:uppercase}
.card-tags{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.tag{padding:.3rem .75rem;border-radius:100px;background:rgba(185,79,255,.15);border:1px solid rgba(185,79,255,.3);font-size:.72rem;font-weight:600;color:var(--np)}
.cta-grid{display:flex;flex-direction:column;gap:.75rem}
.cta-row-2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* ── ABOUT ── */
.about-card{padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.25rem}
.about-avatar{position:relative;width:90px;height:90px;display:flex;align-items:center;justify-content:center}
.avatar-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#c084fc,#f472b6,#38bdf8,#c084fc);animation:spin-ring 5s linear infinite;padding:3px}
.avatar-ring::before{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--bg)}
@keyframes spin-ring{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.avatar-inner{font-size:2.5rem;z-index:1;position:relative;filter:drop-shadow(0 0 10px rgba(185,79,255,.6))}
.intro-greeting{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
.intro-desc{color:var(--td);font-size:.92rem;line-height:1.7}

/* Copy button */
.copy-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:100px;background:rgba(185,79,255,.12);border:1px solid rgba(185,79,255,.3);color:var(--np);font-family:var(--fb);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.copy-btn:hover{background:rgba(185,79,255,.25);box-shadow:0 0 12px rgba(185,79,255,.3)}
.copy-btn:active{transform:scale(.96)}
.copy-code{background:rgba(34,211,238,.1);border-color:rgba(34,211,238,.3);color:var(--nc)}
.contact-row{display:flex;justify-content:center}

.stats-row{display:flex;align-items:center;justify-content:center;gap:1rem;width:100%;padding-top:1.25rem;border-top:1px solid var(--gb2)}
.stat-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;flex:1}
.stat-num{font-family:var(--fh);font-size:1.1rem;font-weight:900}
.stat-label{font-size:.62rem;color:var(--tm);letter-spacing:.5px;text-transform:uppercase}
.stat-divider{width:1px;height:32px;background:var(--gb2)}

/* ── GOODS MARQUEE ── */
.goods-marquee-section{padding-bottom:3rem}
.marquee-outer{overflow:hidden;position:relative;width:100%}
.marquee-outer::before,.marquee-outer::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.marquee-outer::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marquee-outer::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.marquee-track{display:flex;gap:.75rem;width:max-content;animation:marquee-left 22s linear infinite}
.marquee-reverse{animation:marquee-right 26s linear infinite}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.goods-chip{padding:.5rem 1.1rem;border-radius:100px;white-space:nowrap;background:rgba(185,79,255,.1);border:1px solid rgba(185,79,255,.25);font-size:.82rem;font-weight:600;color:var(--np);transition:all .2s;cursor:pointer}
.goods-chip:hover{background:rgba(185,79,255,.25);border-color:rgba(185,79,255,.6);box-shadow:0 0 12px rgba(185,79,255,.3)}
.goods-chip.chip-alt{background:rgba(244,114,182,.08);border-color:rgba(244,114,182,.25);color:var(--npk)}
.goods-chip.chip-alt:hover{background:rgba(244,114,182,.2);border-color:rgba(244,114,182,.6);box-shadow:0 0 12px rgba(244,114,182,.3)}

/* ── PRODUCTS ── */
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.product-card{padding:1.5rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.card-icon{font-size:2rem;display:block;margin-bottom:.75rem;filter:drop-shadow(0 0 8px rgba(185,79,255,.4))}
.product-card h3{font-size:.88rem;font-weight:700;margin-bottom:.4rem;color:var(--tx)}
.product-card p{font-size:.75rem;color:var(--td);line-height:1.5;margin-bottom:.75rem}
.card-badge{display:inline-block;padding:.22rem .65rem;border-radius:100px;font-size:.6rem;font-weight:700;letter-spacing:1px;background:rgba(185,79,255,.15);color:var(--np);border:1px solid rgba(185,79,255,.3);margin-bottom:.75rem}
.badge-free{background:rgba(34,211,238,.12);color:var(--nc);border-color:rgba(34,211,238,.3)}
.love-btn{display:flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:.3rem .75rem;cursor:pointer;transition:all .2s;margin-top:auto}
.love-btn:hover{background:rgba(244,114,182,.15);border-color:rgba(244,114,182,.4)}
.love-btn.loved{border-color:rgba(244,114,182,.6);background:rgba(244,114,182,.15)}
.love-heart{font-size:.9rem;transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}
.love-btn.loved .love-heart{transform:scale(1.3)}
.love-count{font-size:.72rem;font-weight:600;color:var(--td)}
.love-btn.loved .love-count{color:var(--npk)}
.heart-burst{position:fixed;pointer-events:none;z-index:9996;font-size:1.2rem;animation:heart-burst-anim .7s ease-out forwards}
@keyframes heart-burst-anim{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}100%{transform:translate(-50%,-200%) scale(1.5);opacity:0}}

/* ── FANDOM QUIZ ── */
.quiz-section{}
.quiz-card{padding:2rem 1.5rem}
.quiz-progress-wrap{height:3px;background:rgba(255,255,255,.1);border-radius:2px;margin-bottom:1rem;overflow:hidden}
.quiz-progress-bar{height:100%;width:0%;background:var(--gm);border-radius:2px;transition:width .5s cubic-bezier(.16,1,.3,1);box-shadow:0 0 8px rgba(185,79,255,.6)}
.quiz-step-label{font-size:.7rem;color:var(--tm);letter-spacing:2px;text-align:center;margin-bottom:1.5rem;text-transform:uppercase}
.quiz-step{display:none;animation:quiz-slide-in .35s cubic-bezier(.16,1,.3,1)}
.quiz-step.active{display:block}
@keyframes quiz-slide-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.quiz-question{font-family:var(--fb);font-size:1.05rem;font-weight:700;text-align:center;margin-bottom:1.25rem;color:var(--tx)}
.quiz-options{display:flex;flex-direction:column;gap:.65rem}
.quiz-opt{
    width:100%;padding:.9rem 1rem;
    background:rgba(255,255,255,.05);border:1px solid var(--gb2);
    border-radius:var(--rs);
    font-family:var(--fb);font-size:.88rem;font-weight:600;color:var(--td);
    text-align:left;cursor:pointer;
    transition:all .2s cubic-bezier(.16,1,.3,1);
}
.quiz-opt:hover{background:rgba(185,79,255,.15);border-color:rgba(185,79,255,.5);color:var(--tx);transform:translateX(4px);box-shadow:0 0 15px rgba(185,79,255,.2)}
.quiz-opt:active{transform:translateX(2px) scale(.98)}
.quiz-result-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;animation:quiz-slide-in .4s ease}
.result-icon{font-size:3rem;animation:result-bounce .6s cubic-bezier(.175,.885,.32,1.275)}
@keyframes result-bounce{0%{transform:scale(0)}80%{transform:scale(1.2)}100%{transform:scale(1)}}
.result-title{font-family:var(--fh);font-size:1.2rem;font-weight:900}
.result-desc{font-size:.88rem;color:var(--td);line-height:1.65;max-width:260px}
.quiz-reset{width:auto;padding:.6rem 1.5rem;font-size:.8rem;margin-top:.25rem}

/* ── WORKFLOW ── */
.flow-container{display:flex;flex-direction:column;gap:0}
.flow-item{display:flex;align-items:flex-start;gap:1rem;position:relative;padding-bottom:1.25rem}
.step-badge{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--gm);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:.72rem;font-weight:700;box-shadow:0 0 20px rgba(185,79,255,.45);position:relative;z-index:1}
.flow-connector{position:absolute;left:21px;top:44px;bottom:0;width:2px;background:linear-gradient(to bottom,rgba(185,79,255,.5),rgba(255,79,163,.1))}
.flow-content{flex:1;padding:1.1rem 1.2rem;margin-bottom:1rem}
.flow-content h4{font-size:.95rem;font-weight:700;margin-bottom:.3rem}
.flow-content p{font-size:.83rem;color:var(--td)}

/* ── TIKTOK SECTION ── */
.tiktok-card{padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:1.25rem}
.tiktok-header{display:flex;align-items:center;gap:.85rem}
.tiktok-avatar{width:48px;height:48px;border-radius:50%;background:var(--gm);display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 0 15px rgba(185,79,255,.4);flex-shrink:0}
.tiktok-info{flex:1;display:flex;flex-direction:column;gap:.2rem}
.tiktok-handle{font-family:var(--fh);font-size:1rem;font-weight:900;letter-spacing:1px}
.tiktok-tagline{font-size:.72rem;color:var(--tm)}
.tiktok-logo{opacity:.6}
.tiktok-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.tiktok-prev-item{background:rgba(255,255,255,.04);border:1px solid var(--gb2);border-radius:var(--rs);padding:.75rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;cursor:pointer;transition:all .2s}
.tiktok-prev-item:hover{background:rgba(185,79,255,.1);border-color:rgba(185,79,255,.4)}
.prev-thumb{font-size:1.75rem;filter:drop-shadow(0 0 8px rgba(185,79,255,.4))}
.tiktok-prev-item span{font-size:.65rem;color:var(--tm);text-align:center;font-weight:600}
.tiktok-stats{display:flex;align-items:center;justify-content:center;padding-top:1rem;border-top:1px solid var(--gb2)}
.tt-stat{display:flex;flex-direction:column;align-items:center;gap:.15rem;flex:1}
.tt-num{font-family:var(--fh);font-size:1rem;font-weight:900;background:var(--gt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tt-lbl{font-size:.62rem;color:var(--tm);text-transform:uppercase;letter-spacing:.5px}
.tt-divider{width:1px;height:28px;background:var(--gb2)}

/* ── SCRATCH CARD ── */
.scratch-section{text-align:center}
.scratch-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem}
.scratch-hint{font-size:.85rem;color:var(--td)}
.scratch-card-container{position:relative;width:320px;max-width:100%;border-radius:var(--r);overflow:hidden;box-shadow:0 0 30px rgba(185,79,255,.3),0 10px 30px rgba(0,0,0,.5)}
#scratch-canvas{position:absolute;top:0;left:0;z-index:2;border-radius:var(--r);cursor:crosshair;touch-action:none}
.scratch-reveal{width:320px;max-width:100%;height:160px;background:linear-gradient(135deg,rgba(185,79,255,.2),rgba(255,79,163,.15));border:1px solid rgba(185,79,255,.3);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;padding:1.5rem}
.reveal-icon{font-size:2rem}
.reveal-code{font-family:var(--fh);font-size:1.8rem;font-weight:900;letter-spacing:4px}
.reveal-desc{font-size:1rem;font-weight:700;color:var(--tx)}
.reveal-sub{font-size:.72rem;color:var(--tm);letter-spacing:.5px}
.scratch-done{font-size:.9rem;color:var(--npk);font-weight:600;display:flex;flex-direction:column;align-items:center;gap:.75rem;animation:pop-in .4s ease}
@keyframes pop-in{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}

/* ── TESTIMONIALS ── */
.review-scroll{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:1rem}
.review-scroll::-webkit-scrollbar{display:none}
.review-card{flex-shrink:0;width:calc(100vw - 5rem);max-width:320px;padding:1.5rem;scroll-snap-align:center}
.review-stars{font-size:1rem;margin-bottom:.75rem;letter-spacing:1px}
.review-text{font-size:.88rem;color:var(--td);line-height:1.65;margin-bottom:1.25rem;font-style:italic}
.review-author{display:flex;align-items:center;gap:.75rem}
.author-avatar{font-size:1.8rem;width:40px;height:40px;border-radius:50%;background:rgba(185,79,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.author-name{font-weight:700;font-size:.85rem;display:block;color:var(--tx)}
.author-fandom{font-size:.72rem;color:var(--tm)}
.review-dots{display:flex;justify-content:center;gap:.4rem;margin-top:1rem}
.review-dot{width:6px;height:6px;border-radius:50%;background:var(--gb2);transition:all .3s;cursor:pointer}
.review-dot.active{width:20px;border-radius:3px;background:var(--gm)}

/* ── FAQ ACCORDION ── */
.faq-section{}
.faq-list{display:flex;flex-direction:column;gap:.65rem}
.faq-item{overflow:hidden}
.faq-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    padding:1.1rem 1.25rem;background:none;border:none;
    font-family:var(--fb);font-size:.9rem;font-weight:600;color:var(--tx);
    cursor:pointer;text-align:left;gap:.75rem;
}
.faq-q:hover{color:var(--np)}
.faq-q[aria-expanded='true']{color:var(--np)}
.faq-arrow{font-size:1rem;color:var(--np);transition:transform .35s cubic-bezier(.16,1,.3,1);flex-shrink:0}
.faq-q[aria-expanded='true'] .faq-arrow{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1),padding .3s ease}
.faq-a.open{max-height:300px;padding-bottom:1.1rem}
.faq-a p{padding:0 1.25rem;font-size:.87rem;color:var(--td);line-height:1.7}
.faq-a p strong{color:var(--np)}

/* ── PRICE CTA ── */
.price-cta{padding:3rem var(--px)}
.cta-banner-neo{border-radius:24px;background:linear-gradient(135deg,rgba(185,79,255,.12),rgba(255,79,163,.08));border:1px solid rgba(185,79,255,.3);text-align:center;position:relative;overflow:hidden;backdrop-filter:blur(20px)}
.banner-glow{position:absolute;top:-50%;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(185,79,255,.4),transparent 70%);filter:blur(30px);pointer-events:none}
.banner-content{position:relative;z-index:1;padding:2.5rem 1.75rem;display:flex;flex-direction:column;gap:.75rem;align-items:center}
.banner-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:3px;color:var(--npk);text-transform:uppercase}
.cta-banner-neo h2{font-family:var(--fh);font-size:1.6rem;line-height:1.25;letter-spacing:1px}
.cta-banner-neo p{font-size:.9rem;color:var(--td);margin-bottom:.5rem}
.cta-note{font-size:.72rem!important;font-style:italic;color:var(--tm)!important;margin-top:.25rem}

/* ── TRUST ── */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.trust-item{padding:1.5rem 1rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.trust-icon{font-size:2rem;display:block;filter:drop-shadow(0 0 10px rgba(185,79,255,.5))}
.trust-item p{font-size:.8rem;font-weight:600;color:var(--td);line-height:1.4}

/* ── FOOTER ── */
.footer{text-align:center;padding-top:3rem}
.footer-top{margin-bottom:1.5rem}
.footer-logo{font-family:var(--fh);font-size:1.4rem;font-weight:900;letter-spacing:3px;display:block;margin-bottom:.5rem}
.footer-tagline{font-size:.85rem;color:var(--td)}
.footer-headline{font-family:var(--fh);font-size:1.4rem;letter-spacing:1px;line-height:1.3;margin-bottom:2rem}
.footer-btns{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2.5rem}
.copyright{font-size:.72rem;color:var(--tm)}

/* ── STICKY CTA ── */
.sticky-cta{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:480px;background:rgba(7,7,26,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:.85rem 1.25rem;display:flex;gap:.75rem;z-index:100;border-top:1px solid rgba(185,79,255,.2);box-shadow:0 -10px 40px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s ease;opacity:0}
.sticky-cta.show{transform:translateX(-50%) translateY(0);opacity:1}
.sticky-cta .btn{padding:.85rem;font-size:.88rem;flex:1}

/* ── COPY TOAST ── */
.copy-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(34,211,238,.15);border:1px solid rgba(34,211,238,.4);color:var(--nc);font-size:.85rem;font-weight:700;padding:.6rem 1.5rem;border-radius:100px;z-index:9995;opacity:0;transition:all .3s;pointer-events:none;backdrop-filter:blur(10px)}
.copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gm);border-radius:2px}

/* ── Reveal animations ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}