/* ===================================================================== neko68t.com — "Festive Fortune" theme A promo/rewards-forward look for the NEKO68 satellite site. Palette follows the money site neko68.com: deep indigo/violet base, cyan wordmark, gold highlights, and a signature pink -> gold gradient. Deliberately distinct from pnt96.online's "aurora glass" editorial look (different hero, background motif, and component language). ===================================================================== */ /* ---------- Fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap'); /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} img,svg{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;cursor:pointer;background:none;border:none} table{border-collapse:collapse;width:100%} ul{list-style:none} /* ---------- Tokens ---------- */ :root{ --bg:#0e0a26; /* page canvas */ --bg-2:#151240; /* theme-color / raised */ --panel:rgba(122,104,240,.06); --panel-2:rgba(122,104,240,.10); --panel-3:rgba(122,104,240,.16); --panel-solid:#1b1650; --panel-grad:linear-gradient(165deg,#231f5e 0%,#191446 100%); --border:rgba(150,132,255,.18); --border-strong:rgba(150,132,255,.36); --border-gold:rgba(253,176,34,.42); --violet:#8f7bff; --violet-2:#7059f9; --violet-deep:#4e24dd; --violet-bright:#9c40ff; --indigo:#584cd2; --cyan:#39b6ff; --cyan-2:#7ad3ff; --gold:#fdb022; --gold-2:#f5af19; --gold-bright:#ffe25a; --pink:#ff75ba; --red:#ff5a6e; --text:#f2effc; --muted:rgba(226,221,255,.66); --muted-2:rgba(226,221,255,.44); --grad-hot:linear-gradient(115deg,#ff75ba 0%,#ffa64d 52%,#fdf61d 100%); /* signature pink -> gold */ --grad-hot-soft:linear-gradient(115deg,rgba(255,117,186,.18),rgba(253,246,29,.14)); --grad-violet:linear-gradient(160deg,#9c40ff 0%,#6a4bf5 55%,#4e24dd 100%); --grad-cyan:linear-gradient(160deg,#5cc6ff,#3179e6); --grad-gold:linear-gradient(135deg,#ffe25a,#f5af19); --grad-heading:linear-gradient(180deg,#ffffff 8%,#b9b0ff 100%); --shadow:0 26px 60px -22px rgba(0,0,0,.75); --shadow-violet:0 18px 44px -18px rgba(124,92,255,.6); --shadow-hot:0 16px 38px -12px rgba(255,117,186,.55); --shadow-gold:0 14px 32px -12px rgba(245,175,25,.6); --r-sm:10px;--r-md:16px;--r-lg:22px;--r-xl:30px;--r-pill:999px; --maxw:1160px; --ff-head:'Kanit',system-ui,sans-serif; --ff-body:'Noto Sans Thai','Kanit',system-ui,-apple-system,'Segoe UI',sans-serif; } /* ---------- Base ---------- */ body{ font-family:var(--ff-body); color:var(--text); background:var(--bg); line-height:1.74; font-size:16.5px; font-weight:400; overflow-x:hidden; position:relative; min-height:100vh; } /* Festive backdrop — a warm top spotlight + violet base glow + confetti dots. (Distinct from pnt96's blurred aurora blobs and grid.) */ .bg-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden} .bg-fx::before{content:"";position:absolute;top:-18%;left:50%;transform:translateX(-50%); width:1200px;height:760px; background:radial-gradient(60% 60% at 50% 0%,rgba(253,176,34,.20),transparent 62%), radial-gradient(70% 70% at 50% 4%,rgba(156,64,255,.28),transparent 70%); filter:blur(6px)} .bg-fx::after{content:"";position:absolute;bottom:-220px;right:-160px;width:620px;height:620px; border-radius:50%;background:radial-gradient(circle,rgba(57,182,255,.16),transparent 70%);filter:blur(30px)} /* confetti / coin dots */ .bg-dots{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image: radial-gradient(rgba(253,176,34,.55) 1.6px,transparent 1.7px), radial-gradient(rgba(255,117,186,.42) 1.4px,transparent 1.5px), radial-gradient(rgba(122,211,255,.40) 1.3px,transparent 1.4px); background-size:150px 150px,220px 220px,300px 300px; background-position:0 0,60px 90px,130px 40px; -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000,transparent 78%); mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000,transparent 78%)} .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px} .section{padding-block:clamp(28px,3.4vw,50px)} .section-tight{padding-block:clamp(18px,2.4vw,32px)} /* ---------- Typography ---------- */ h1,h2,h3,h4{font-family:var(--ff-head);font-weight:700;line-height:1.22;letter-spacing:-.01em} h1{font-size:clamp(2rem,5.2vw,3.35rem);font-weight:800;letter-spacing:-.02em} h2{font-size:clamp(1.55rem,3.4vw,2.35rem)} h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:600} h4{font-size:1.05rem;font-weight:600} p{color:var(--muted)} .lead{font-size:clamp(1.02rem,1.6vw,1.2rem);color:rgba(233,229,255,.84);line-height:1.82} .text-hot{background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent} .text-gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent} .text-cyan{color:var(--cyan-2)} .ilink{color:var(--cyan-2);text-decoration:underline;text-underline-offset:3px; text-decoration-color:rgba(122,211,255,.4);font-weight:600;transition:.2s} .ilink:hover{color:#fff;text-decoration-color:var(--pink)} .ilink strong{font-weight:700} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-head);font-weight:600; font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright); padding:7px 16px;border:1px solid var(--border-gold);border-radius:var(--r-pill); background:linear-gradient(115deg,rgba(255,117,186,.14),rgba(253,176,34,.12));backdrop-filter:blur(6px)} .eyebrow.violet{color:var(--violet);border-color:var(--border-strong); background:var(--panel-2)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--ff-head);font-weight:600;font-size:1rem;line-height:1; padding:15px 28px;border-radius:var(--r-pill);transition:.25s ease;white-space:nowrap; position:relative;text-align:center} .btn svg{width:18px;height:18px} .btn-primary{background:var(--grad-violet);color:#fff; box-shadow:var(--shadow-violet),inset 0 1px 0 rgba(255,255,255,.28)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 46px -14px rgba(156,64,255,.75),inset 0 1px 0 rgba(255,255,255,.3)} .btn-hot{background:var(--grad-hot);color:#3a1230;font-weight:700; box-shadow:var(--shadow-hot),inset 0 1px 0 rgba(255,255,255,.45)} .btn-hot:hover{transform:translateY(-2px);box-shadow:0 22px 48px -12px rgba(255,117,186,.7),inset 0 1px 0 rgba(255,255,255,.5)} .btn-gold{background:var(--grad-gold);color:#3a2600;font-weight:700; box-shadow:var(--shadow-gold),inset 0 1px 0 rgba(255,255,255,.5)} .btn-gold:hover{transform:translateY(-2px)} .btn-ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--border-strong);backdrop-filter:blur(8px)} .btn-ghost:hover{background:var(--panel-3);border-color:var(--violet);transform:translateY(-2px)} .btn-lg{padding:17px 38px;font-size:1.1rem} .btn-block{display:flex;width:100%} /* ---------- Header / Nav ---------- */ .site-header{position:sticky;top:0;z-index:60;padding-top:14px;transition:.3s} .site-header .bar{position:relative;display:flex;align-items:center;gap:16px;height:68px;padding:0 16px; border-radius:20px;background:rgba(22,17,60,.6);border:1px solid var(--border); box-shadow:0 14px 36px -18px rgba(0,0,0,.75);backdrop-filter:blur(14px);transition:.3s} .site-header.scrolled .bar{background:rgba(14,10,38,.92);border-color:var(--border-strong)} .brand{display:flex;align-items:center;gap:11px} .brand img{width:auto;height:54px;object-fit:contain;filter:drop-shadow(0 5px 14px rgba(156,64,255,.5))} .nav-links{display:flex;align-items:center;gap:2px;margin-inline:auto} .nav-links a{font-family:var(--ff-head);font-weight:500;font-size:.97rem;color:var(--muted); padding:9px 14px;border-radius:var(--r-pill);transition:.2s;position:relative} .nav-links a:hover{color:var(--text);background:var(--panel-2)} .nav-links a.active{color:var(--text)} .nav-links a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px; border-radius:2px;background:var(--grad-hot)} .nav-cta{margin-left:4px} .nav-toggle{display:none;margin-left:auto;width:46px;height:46px;border-radius:12px; border:1px solid var(--border-strong);background:var(--panel-2);align-items:center;justify-content:center} .nav-toggle span{display:block;width:20px;height:2px;background:var(--text);position:relative;transition:.25s} .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--text);transition:.25s} .nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px} body.nav-open .nav-toggle span{background:transparent} body.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)} body.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)} /* ---------- Breadcrumb ---------- */ .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem;color:var(--muted-2); padding-top:26px;font-family:var(--ff-head)} .crumb a:hover{color:var(--cyan-2)} .crumb .sep{opacity:.5} .crumb span[aria-current]{color:var(--muted)} /* ===================================================================== HERO — split "prize" hero: copy on the left, glowing mascot medallion with a floating free-credit badge on the right. (Distinct from pnt96.) ===================================================================== */ .hero{position:relative;text-align:center;padding-top:clamp(26px,4.5vw,52px);padding-bottom:clamp(24px,3.5vw,40px)} .hero-inner{max-width:980px;margin-inline:auto} .hero-inner .eyebrow{margin-bottom:20px} .hero-inner h1{margin:0 auto 18px;max-width:20ch} .hero-inner .lead{max-width:62ch;margin-inline:auto} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;justify-content:center} /* legacy split-hero styles kept for reference */ .hero-fp{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(26px,4vw,54px);align-items:center} .hero-copy .eyebrow{margin-bottom:18px} .hero-copy h1{margin:0 0 18px} .hero-copy .lead{max-width:54ch} /* Hero promo banner */ .hero-banner{position:relative;overflow:hidden;margin:44px auto 0;max-width:940px;border-radius:26px; border:1px solid var(--border-strong);box-shadow:var(--shadow); background:linear-gradient(150deg,rgba(156,64,255,.30),rgba(255,117,186,.12) 60%,rgba(57,182,255,.10)),var(--panel-solid); padding:clamp(24px,3.6vw,40px) clamp(24px,5vw,58px); display:flex;align-items:center;justify-content:center;gap:clamp(22px,4vw,56px);flex-wrap:wrap;text-align:left} .hero-banner::before{content:"";position:absolute;top:-70%;left:20%;width:60%;height:200%;pointer-events:none; background:radial-gradient(circle,rgba(253,176,34,.32),transparent 60%)} .hero-banner .bdots{position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:radial-gradient(rgba(255,255,255,.55) 1.4px,transparent 1.5px);background-size:26px 26px; -webkit-mask-image:radial-gradient(ellipse 70% 80% at 32% 40%,#000,transparent 72%); mask-image:radial-gradient(ellipse 70% 80% at 32% 40%,#000,transparent 72%)} .banner-art{position:relative;z-index:2;flex:none} .banner-mascot{width:min(280px,62vw);height:auto; filter:drop-shadow(0 16px 28px rgba(0,0,0,.5)) drop-shadow(0 0 24px rgba(156,64,255,.45)); animation:bob 6.5s ease-in-out infinite} .banner-badge{position:absolute;top:-4px;right:-12px;width:96px;height:96px;border-radius:50%;z-index:3; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; background:var(--grad-hot);color:#3a1230;box-shadow:var(--shadow-hot),inset 0 2px 0 rgba(255,255,255,.5); transform:rotate(-8deg);border:3px solid rgba(255,255,255,.55)} .banner-badge b{font-family:var(--ff-head);font-weight:800;font-size:1.55rem;line-height:1} .banner-badge small{font-family:var(--ff-head);font-weight:600;font-size:.62rem;letter-spacing:.02em} .banner-badge .cur{font-size:.85rem;vertical-align:top;margin-right:1px} .banner-offers{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;max-width:360px} .banner-offers .offer-chip{font-size:.97rem;padding:12px 18px 12px 13px} .hero-offers{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .offer-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 11px;border-radius:var(--r-pill); border:1px solid var(--border);background:var(--panel-2);font-family:var(--ff-head);font-weight:500; font-size:.9rem;color:var(--text);backdrop-filter:blur(6px)} .offer-chip .ico{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center; border-radius:50%;font-size:.95rem;background:var(--grad-hot-soft);border:1px solid var(--border-gold)} .offer-chip b{color:var(--gold-bright);font-weight:700} /* mascot medallion */ .hero-art{position:relative;width:100%;max-width:460px;margin-inline:auto;aspect-ratio:1/1; display:flex;align-items:center;justify-content:center} .hero-art .halo{position:absolute;inset:6%;border-radius:50%; background:radial-gradient(circle,rgba(156,64,255,.55),rgba(78,36,221,.15) 55%,transparent 72%)} .hero-art .rays{position:absolute;inset:-4%;border-radius:50%;z-index:0;opacity:.7; background:conic-gradient(from 0deg,rgba(253,176,34,.0) 0deg,rgba(253,176,34,.28) 12deg,rgba(253,176,34,0) 24deg, rgba(255,117,186,0) 30deg,rgba(255,117,186,.26) 42deg,rgba(255,117,186,0) 54deg); -webkit-mask-image:radial-gradient(circle,transparent 40%,#000 42%,#000 74%,transparent 78%); mask-image:radial-gradient(circle,transparent 40%,#000 42%,#000 74%,transparent 78%); animation:spin 46s linear infinite} .hero-art .ring{position:absolute;inset:8%;border-radius:50%;border:1.5px dashed rgba(253,176,34,.35); animation:spin 60s linear infinite reverse} .hero-art .mascot{position:relative;z-index:2;width:98%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(156,64,255,.4));animation:bob 6.5s ease-in-out infinite} .hero-badge{position:absolute;z-index:3;right:2%;top:8%;width:118px;height:118px;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; background:var(--grad-hot);color:#3a1230;box-shadow:var(--shadow-hot),inset 0 2px 0 rgba(255,255,255,.5); transform:rotate(-8deg);animation:bob 5.5s ease-in-out infinite .4s;border:3px solid rgba(255,255,255,.55)} .hero-badge b{font-family:var(--ff-head);font-weight:800;font-size:1.9rem;line-height:1} .hero-badge small{font-family:var(--ff-head);font-weight:600;font-size:.72rem;letter-spacing:.02em} .hero-badge .cur{font-size:1rem;vertical-align:top;margin-right:1px} @keyframes bob{0%,100%{transform:translateY(0) rotate(var(--rot,0))}50%{transform:translateY(-12px) rotate(var(--rot,0))}} @keyframes spin{to{transform:rotate(360deg)}} .hero-badge{--rot:-8deg} /* ===================================================================== PROMO SHOWCASE — links to each promo page (replaces game ribbon) ===================================================================== */ .promo-rail{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .promo-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 18px;border-radius:var(--r-lg); background:var(--panel-grad);border:1px solid var(--border);overflow:hidden;transition:.28s;height:100%} .promo-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-hot); opacity:.85;transition:.28s} .promo-card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:var(--shadow-violet)} .promo-card .p-ic{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:15px; font-size:1.7rem;background:var(--panel-2);border:1px solid var(--border-strong);margin-bottom:4px} .promo-card h3{font-size:1.08rem;font-weight:600} .promo-card p{font-size:.86rem;line-height:1.6;margin:0} .promo-card .go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px; font-family:var(--ff-head);font-weight:600;font-size:.86rem;color:var(--cyan-2)} .promo-card .go svg{width:16px;height:16px;transition:.25s} .promo-card:hover .go svg{transform:translateX(4px)} /* ---------- Section head ---------- */ .sec-head{max-width:760px;margin-bottom:clamp(26px,4vw,42px)} .sec-head.center{margin-inline:auto;text-align:center} .sec-head h2{margin:14px 0 12px} .sec-head h2 .text-hot,.sec-head h2 .text-gold{padding-right:.06em} .sec-head p{font-size:1.02rem} /* two-column section intro (reference-style split) */ .sec-split{display:grid;grid-template-columns:330px 1fr;gap:clamp(28px,4vw,54px);align-items:start} .sec-split > .sec-head{margin-bottom:0;position:sticky;top:104px} /* quick-facts stat tiles */ .stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px} .stat-tile{padding:16px 16px;border:1px solid var(--border);border-radius:14px;background:var(--panel-grad)} .stat-tile b{display:block;font-family:var(--ff-head);font-weight:800;font-size:1.5rem;line-height:1.1; background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent} .stat-tile small{color:var(--muted-2);font-size:.8rem} /* ---------- Cards ---------- */ .card{background:var(--panel-grad);border:1px solid var(--border);border-radius:18px; padding:26px 24px;transition:.28s;position:relative;overflow:hidden;height:100%} .card:hover{border-color:var(--border-strong);transform:translateY(-5px);box-shadow:var(--shadow-violet)} .card .num{font-family:var(--ff-head);font-weight:800;font-size:1.1rem;width:44px;height:44px; display:flex;align-items:center;justify-content:center;border-radius:13px;margin-bottom:16px;color:#3a1230; background:var(--grad-hot);box-shadow:var(--shadow-hot)} .card .ic{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:16px; margin-bottom:16px;background:rgba(122,104,240,.12);border:1px solid var(--border-strong);font-size:1.65rem} .card h3{margin-bottom:9px} .card h4{margin-bottom:8px} .card p{font-size:.96rem} /* spotlight (dark) card — reference-style highlight */ .card.dark{background:linear-gradient(165deg,#15112f,#0b0820);border-color:var(--border-gold)} .card.dark::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-gold)} .card.dark .ic{background:rgba(253,176,34,.16);border-color:var(--border-gold)} .card.dark h3{color:#fff} .card-glow{} .grid{display:grid;gap:18px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} /* ---------- Steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step} .step{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:24px;border:1px solid var(--border); border-radius:18px;background:var(--panel-grad);transition:.28s;position:relative;overflow:hidden} .step:hover{border-color:var(--border-strong);transform:translateY(-5px);box-shadow:var(--shadow-violet)} .step .n{counter-increment:step;display:inline-flex;align-items:center;font-family:var(--ff-head);font-weight:700; font-size:.72rem;letter-spacing:.16em;color:var(--gold-bright);padding:7px 13px;border-radius:var(--r-pill); background:rgba(253,176,34,.12);border:1px solid var(--border-gold);margin-bottom:16px} .step .n::before{content:"STEP " counter(step)} .step h3{margin-bottom:6px} .step p{font-size:.94rem;margin:0} /* ---------- Data / tier tables ---------- */ .table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--panel); -webkit-overflow-scrolling:touch} table.data{min-width:420px} table.data th,table.data td{padding:15px 18px;text-align:left;font-size:.96rem} table.data thead th{font-family:var(--ff-head);font-weight:600;font-size:.85rem;letter-spacing:.04em; text-transform:uppercase;color:var(--gold-bright);background:linear-gradient(115deg,rgba(255,117,186,.14),rgba(253,176,34,.12)); border-bottom:1px solid var(--border-gold);white-space:nowrap} table.data tbody tr{border-top:1px solid var(--border)} table.data tbody tr:nth-child(odd){background:rgba(255,255,255,.02)} table.data tbody tr:hover{background:rgba(156,64,255,.08)} table.data td:first-child{font-family:var(--ff-head);font-weight:600;color:var(--text)} table.data td.hi,table.data .hi{color:var(--gold-bright);font-weight:700;font-family:var(--ff-head)} .scroll-hint{font-size:.8rem;color:var(--muted-2);margin-top:8px;text-align:center} @media(min-width:720px){.scroll-hint{display:none}} /* ---------- Chips / badges ---------- */ .chip-row{display:flex;flex-wrap:wrap;gap:10px} .chip{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill); border:1px solid var(--border);background:var(--panel-2);font-family:var(--ff-head);font-weight:500; font-size:.9rem;color:var(--muted);transition:.2s} .chip:hover{border-color:var(--border-strong);color:var(--text)} .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill); font-family:var(--ff-head);font-weight:600;font-size:.78rem} .badge-gold{background:rgba(253,176,34,.14);border:1px solid var(--border-gold);color:var(--gold-bright)} .badge-violet{background:var(--panel-2);border:1px solid var(--border-strong);color:var(--violet)} /* ---------- Callout / notice (scam warning, help resources) ---------- */ .callout{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--panel-2); padding:22px 24px;position:relative;overflow:hidden} .callout.warn{border-color:var(--border-gold);background:linear-gradient(160deg,rgba(253,176,34,.10),rgba(255,90,110,.06))} .callout.warn::before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--grad-gold)} .callout h3{margin-bottom:10px} .callout .cta-line{margin-top:16px} /* ---------- FAQ ---------- */ .faq{display:grid;gap:12px;max-width:820px;margin-inline:auto} .faq details{border:1px solid var(--border);border-radius:14px;background:var(--panel-grad);overflow:hidden;transition:.25s} .faq details[open]{border-color:var(--border-gold)} .faq summary{list-style:none;cursor:pointer;padding:20px 22px;color:var(--text)} .faq summary::-webkit-details-marker{display:none} .faq summary h3{display:flex;align-items:center;gap:14px;margin:0;font-family:var(--ff-head);font-weight:600;font-size:1.04rem;line-height:1.45;color:var(--text)} .faq summary .q-ic{flex:none;width:28px;height:28px;border-radius:9px;border:1px solid var(--border-gold); display:flex;align-items:center;justify-content:center;color:var(--gold-bright);transition:.25s;font-size:1.25rem;line-height:1} .faq details[open] summary .q-ic{transform:rotate(45deg);background:var(--grad-hot);color:#3a1230;border-color:transparent} .faq .ans{padding:0 22px 22px 64px;color:var(--muted);font-size:.98rem} .faq .ans p{margin-bottom:10px}.faq .ans p:last-child{margin-bottom:0} /* two-column FAQ with side card (reference-style) */ .faq-2col{display:grid;grid-template-columns:1fr 330px;gap:26px;align-items:start} .faq-2col .faq{max-width:none;margin:0} .faq-aside{position:sticky;top:104px;border-radius:20px;padding:32px 26px;text-align:center;overflow:hidden; border:1px solid var(--border-gold);background:linear-gradient(160deg,rgba(255,117,186,.18),rgba(156,64,255,.14)),var(--panel-solid)} .faq-aside::before{content:"";position:absolute;top:-45%;left:50%;width:150%;height:160%;transform:translateX(-50%); background:radial-gradient(circle,rgba(253,176,34,.28),transparent 62%);pointer-events:none} .faq-aside > *{position:relative} .faq-aside .ic{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:1.7rem;background:var(--grad-hot);box-shadow:var(--shadow-hot)} .faq-aside h3{margin-bottom:8px} .faq-aside p{font-size:.92rem;margin-bottom:20px} /* ---------- CTA band ---------- */ .cta-band{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(36px,6vw,66px) clamp(24px,5vw,60px); text-align:center;border:1px solid var(--border-strong); background:linear-gradient(150deg,rgba(156,64,255,.24),rgba(255,117,186,.14)),var(--bg-2)} .cta-band::before{content:"";position:absolute;top:-60%;left:50%;width:120%;height:220%;transform:translateX(-50%); background:radial-gradient(circle,rgba(253,176,34,.24),transparent 60%);pointer-events:none} .cta-band > *{position:relative} .cta-band h2{margin-bottom:14px} .cta-band p{max-width:56ch;margin:0 auto 26px;color:rgba(233,229,255,.84)} .cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} /* ---------- Prose (legal / long-form) ---------- */ .prose{max-width:840px;margin-inline:auto} .prose h2{margin:36px 0 14px;padding-top:6px;font-size:clamp(1.35rem,2.6vw,1.8rem)} .prose h2:first-of-type{margin-top:0} .prose h3{margin:24px 0 10px;color:var(--text)} .prose p{margin-bottom:15px;color:rgba(233,229,255,.8)} .prose ul,ul.prose{margin:0 0 18px;display:grid;gap:10px} .prose ul li,ul.prose>li{position:relative;padding-left:28px;color:rgba(233,229,255,.8)} .prose ul li::before,ul.prose>li::before{content:"";position:absolute;left:6px;top:12px;width:8px;height:8px;border-radius:50%; background:var(--grad-hot)} .prose ol,ol.prose{margin:0 0 18px;padding-left:26px;list-style:decimal} .prose ol li,ol.prose>li{margin-bottom:10px;padding-left:6px;color:rgba(233,229,255,.8)} .prose ol li:last-child,ol.prose>li:last-child{margin-bottom:0} .prose ol li::marker,ol.prose>li::marker{color:var(--gold-bright);font-family:var(--ff-head);font-weight:700} .prose a{color:var(--cyan-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(122,211,255,.4);font-weight:600} .prose a:hover{color:#fff;text-decoration-color:var(--pink)} .prose strong{color:var(--text);font-weight:700} .prose .note{font-size:.9rem;color:var(--muted-2);border-left:2px solid var(--border-strong);padding-left:14px;margin:18px 0} .prose .table-wrap{margin:8px 0 20px} /* Info list (help resources / feature rows) */ .info-list{display:grid;gap:14px} .info-item{display:flex;gap:16px;padding:20px 22px;border:1px solid var(--border);border-radius:var(--r-lg); background:var(--panel);transition:.25s} .info-item:hover{border-color:var(--border-strong);background:var(--panel-2)} .info-item .ic{flex:none;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center; font-size:1.4rem;background:var(--panel-2);border:1px solid var(--border-strong)} .info-item h3{margin-bottom:4px;font-size:1.08rem} .info-item p{margin:0;font-size:.95rem} .info-item a{color:var(--cyan-2);font-weight:600} .info-item a:hover{color:#fff} /* ---------- Footer ---------- */ .site-footer{margin-top:clamp(46px,7vw,88px);border-top:1px solid var(--border); background:linear-gradient(180deg,transparent,rgba(21,18,64,.55))} .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px;padding-block:54px} .foot-brand .brand{margin-bottom:16px} .foot-brand p{font-size:.92rem;max-width:40ch} .foot-col h3{font-family:var(--ff-head);font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--text);margin-bottom:16px} .foot-col ul{display:grid;gap:11px} .foot-col a{font-size:.94rem;color:var(--muted);transition:.2s} .foot-col a:hover{color:var(--cyan-2)} /* Responsible-gaming strip */ .rg-strip{border-top:1px solid var(--border);padding:30px 0 24px;text-align:center} .rg-title{font-family:var(--ff-head);font-size:.86rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px} .rg-badges{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px; padding:14px 16px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(180deg,var(--panel-2),transparent)} .rg-chip{display:inline-flex;align-items:center;justify-content:center;background:#f6f4ff; border:1px solid rgba(253,176,34,.55);border-radius:999px; padding:9px 16px;height:44px;transition:.2s;box-shadow:0 6px 16px -9px rgba(0,0,0,.55)} .rg-chip:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 12px 22px -10px rgba(253,176,34,.55)} .rg-chip img{height:23px;width:auto;display:block} .foot-bottom{border-top:1px solid var(--border);padding-block:22px;display:flex;flex-wrap:wrap; justify-content:center;gap:14px;align-items:center;text-align:center} .foot-bottom p{font-size:.86rem;color:var(--muted-2)} .foot-bottom a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--border-strong)} .foot-bottom a:hover{color:var(--cyan-2)} /* ---------- Mobile bottom bar ---------- */ .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:10px;padding:12px 16px; background:rgba(14,10,38,.94);backdrop-filter:blur(14px);border-top:1px solid var(--border)} .mobile-cta .btn{flex:1} /* ---------- Reveal (hidden by default;