/* =========================================================================
   mega88.fun — 2025 revamp
   Dark casino system: deep navy ground, gold primary, crimson accent.
   No framework, no build step. One stylesheet.
   ========================================================================= */

:root{
  /* ground */
  --bg:#0a0a12;
  --bg-2:#0e0e1a;
  --surface:#15152a;
  --surface-2:#1c1c34;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* brand */
  --gold:#f5c542;
  --gold-lt:#ffe9a3;
  --gold-dk:#b8860b;
  --red:#e11d3a;
  --red-lt:#ff3b57;
  --green:#1db954;
  --amber:#f0a500;
  --tg:#229ed9;

  /* text */
  --text:#eef0f7;
  --text-2:#c3c8dc;
  --muted:#8e95b2;

  /* shape */
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --shadow:0 18px 50px -18px rgba(0,0,0,.85);
  --ring:0 0 0 3px rgba(245,197,66,.45);

  --wrap:1180px;
  --pad:clamp(18px,4vw,32px);

  --f-disp:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.7;
  color:var(--text-2);
  background:var(--bg);
  background-image:
    radial-gradient(1100px 620px at 78% -8%,rgba(225,29,58,.16),transparent 60%),
    radial-gradient(900px 560px at 12% 4%,rgba(245,197,66,.11),transparent 62%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3{font-family:var(--f-disp);color:#fff;line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.15rem,5.4vw,4rem);font-weight:900}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800}
h3{font-size:1.16rem;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}

.skip{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);background:var(--gold);color:#111;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:700;z-index:200;white-space:nowrap}
.skip:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--prose{max-width:820px}

/* ---------------------------------------------------------------- buttons */
.btn{
  --btn-bg:var(--surface-2); --btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-disp);font-weight:800;font-size:.97rem;letter-spacing:.01em;
  padding:.82em 1.5em;border-radius:999px;border:1px solid transparent;
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.btn:hover{transform:translateY(-2px);text-decoration:none;filter:brightness(1.07)}
.btn:active{transform:translateY(0)}
.btn svg{width:1.1em;height:1.1em;flex:none}

.btn--gold{--btn-bg:linear-gradient(160deg,var(--gold-lt),var(--gold) 46%,var(--gold-dk));--btn-fg:#1a1405;box-shadow:0 10px 26px -10px rgba(245,197,66,.7)}
.btn--red{--btn-bg:linear-gradient(160deg,var(--red-lt),var(--red));box-shadow:0 10px 26px -10px rgba(225,29,58,.75)}
.btn--green{--btn-bg:linear-gradient(160deg,#2ee06a,var(--green));--btn-fg:#04240f;box-shadow:0 10px 26px -10px rgba(29,185,84,.7)}
.btn--amber{--btn-bg:linear-gradient(160deg,#ffc93c,var(--amber));--btn-fg:#2a1c00;box-shadow:0 10px 26px -10px rgba(240,165,0,.7)}
.btn--tg{--btn-bg:linear-gradient(160deg,#39b3e6,var(--tg))}
.btn--ghost{--btn-bg:transparent;border-color:var(--line-2);color:var(--text)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}

.btn--lg{font-size:1.06rem;padding:.95em 1.9em}
.btn--sm{font-size:.85rem;padding:.66em 1.1em}
.btn--block{display:flex;width:100%}

/* ---------------------------------------------------------------- header */
.hdr{
  position:sticky;top:0;z-index:90;
  background:rgba(10,10,18,.72);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.hdr.is-stuck{background:rgba(10,10,18,.94);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:68px}

.brand{display:flex;align-items:center;gap:11px;flex:none;color:#fff}
.brand:hover{text-decoration:none}
/* The full lockup is too detailed to survive at header scale — at 46px tall
   "MEGA" and the 888 cards turn to mush. The crown is the part of the mark
   that still reads small, so the header pairs it with the wordmark as text
   and the lockup itself is used where it has room: the footer and og:image. */
.brand__mark{width:auto;height:42px}
.brand__txt{display:grid;font-family:var(--f-disp);line-height:1}
.brand__txt>span:first-child{display:flex;align-items:baseline}
.brand__txt b{font-size:1.24rem;font-weight:900;letter-spacing:-.02em;color:#fff}
.brand__txt i{font-size:1.24rem;font-weight:900;font-style:normal;letter-spacing:-.02em;color:var(--gold)}
.brand__txt small{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-family:var(--f-body);font-weight:600}

.nav{display:flex;gap:4px;margin-left:auto}
.nav a{
  font-family:var(--f-disp);font-weight:700;font-size:.95rem;color:var(--text-2);
  padding:.5em .85em;border-radius:999px;transition:color .16s,background .16s;
}
.nav a:hover,.nav a.is-active{color:#fff;background:rgba(255,255,255,.07);text-decoration:none}

.hdr__cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav+.hdr__cta{margin-left:0}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;background:transparent;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;margin:4px auto;transition:transform .22s,opacity .22s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:clamp(48px,8vw,104px) 0 clamp(44px,6vw,80px);overflow:hidden}
.hero__glow{position:absolute;inset:auto -20% -60% 30%;height:520px;background:conic-gradient(from 210deg,rgba(245,197,66,.22),rgba(225,29,58,.2),transparent 65%);filter:blur(90px);pointer-events:none}
.hero__in{position:relative;display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(32px,5vw,64px);align-items:center}

.eyebrow{display:inline-flex;align-items:baseline;gap:.6em;font-family:var(--f-disp);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 1.1em}
.dot{flex:none;position:relative;top:-1px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(29,185,84,.22);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(29,185,84,0)}}

.grad{background:linear-gradient(120deg,var(--gold-lt),var(--gold) 40%,var(--red-lt));-webkit-background-clip:text;background-clip:text;color:transparent}

.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--text-2);max-width:56ch;margin-bottom:1.9em}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:2.4em}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0}
.stats li{display:grid;gap:2px;padding:14px 4px 14px 16px;border-left:2px solid var(--gold)}
.stats b{font-family:var(--f-disp);font-size:1.32rem;font-weight:800;color:#fff}
.stats span{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* test id */
.testid{
  background:linear-gradient(165deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,30px);box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.testid::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--gold),var(--red),var(--gold))}
.testid__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:.6em}
.testid h2{font-size:1.22rem;margin:0}
.pill{font-family:var(--f-disp);font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:.35em .8em;border-radius:999px}
.pill--live{background:rgba(29,185,84,.16);color:#4ade80;border:1px solid rgba(29,185,84,.35)}
.testid__note{font-size:.88rem;color:var(--muted);margin-bottom:1.4em}

.field{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.32);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 11px 11px 15px;margin-bottom:10px}
.field__k{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:none;width:78px}
.field__v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.copy{font-family:var(--f-disp);font-weight:700;font-size:.76rem;padding:.45em .85em;border-radius:8px;border:1px solid var(--line-2);background:transparent;color:var(--text-2);cursor:pointer;flex:none;transition:.16s}
.copy:hover{border-color:var(--gold);color:var(--gold)}
.copy.is-done{background:var(--green);border-color:var(--green);color:#04240f}
.testid .btn--block{margin-top:16px}

/* ---------------------------------------------------------------- sections */
.sec{padding:clamp(56px,7.5vw,104px) 0}
.sec--alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.028) 12%,rgba(255,255,255,.028) 88%,transparent)}
.sec__hd{max-width:720px;margin:0 auto clamp(34px,4.5vw,56px);text-align:center}
.sec__hd .eyebrow{justify-content:center}
.sub{color:var(--muted);font-size:1.02rem;margin:0}
.sub--left{text-align:left}

.grid{display:grid;gap:clamp(16px,2.2vw,24px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  background:linear-gradient(170deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.6vw,28px);position:relative;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--shadow)}
.card p:last-child{margin-bottom:0}
.card p{font-size:.96rem;color:var(--text-2)}

/* download cards */
.card--dl{display:flex;flex-direction:column;text-align:center;align-items:center}
.card--dl::before{content:"";position:absolute;inset:0 0 auto;height:3px}
.card--android::before{background:linear-gradient(90deg,#2ee06a,var(--green))}
.card--ios64::before{background:linear-gradient(90deg,var(--red-lt),var(--red))}
.card--ios32::before{background:linear-gradient(90deg,#ffc93c,var(--amber))}
.card__ico{width:60px;height:60px;display:grid;place-items:center;border-radius:18px;margin-bottom:16px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.card__ico svg{width:32px;height:32px}
.card--android .card__ico{color:#2ee06a}
.card--ios64 .card__ico{color:var(--red-lt)}
.card--ios32 .card__ico{color:#ffc93c}
.card--dl h3{margin-bottom:.5em}
.card--dl h3 span{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-top:3px}
.card--dl>p{font-size:.92rem;color:var(--muted)}
.ticks{list-style:none;margin:4px 0 22px;padding:0;text-align:left;width:100%;display:grid;gap:8px}
.ticks li{font-size:.88rem;color:var(--text-2);padding-left:24px;position:relative}
.ticks li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--gold);font-weight:800}
.card--dl .btn{margin-top:auto}
.dl__help{text-align:center;color:var(--muted);font-size:.9rem;margin:28px 0 0}
.dl__help b{color:var(--text)}

/* feature cards */
.feat__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;font-size:1.25rem;background:linear-gradient(150deg,rgba(245,197,66,.2),rgba(225,29,58,.14));border:1px solid var(--line-2);margin-bottom:15px}

/* ---------------------------------------------------------------- tabs */
.tabs__nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:clamp(26px,3.4vw,38px)}
.tab{
  font-family:var(--f-disp);font-weight:700;font-size:.98rem;
  padding:.72em 1.5em;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line-2);color:var(--text-2);transition:.18s;
}
.tab:hover{color:#fff;border-color:var(--gold)}
.tab.is-on{background:linear-gradient(160deg,var(--gold-lt),var(--gold) 46%,var(--gold-dk));border-color:transparent;color:#1a1405;box-shadow:0 10px 26px -12px rgba(245,197,66,.75)}
.panel[hidden]{display:none}
.panel__lede{max-width:74ch;margin:0 auto 2em;text-align:center;color:var(--muted)}

.game{padding-top:clamp(26px,3vw,34px)}
.game::before{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none}
.game--a::before{background:radial-gradient(circle at 82% 8%,#f5c542,transparent 58%)}
.game--b::before{background:radial-gradient(circle at 82% 8%,#8b5cf6,transparent 58%)}
.game--c::before{background:radial-gradient(circle at 82% 8%,#e11d3a,transparent 58%)}
.game--d::before{background:radial-gradient(circle at 82% 8%,#22d3ee,transparent 58%)}
.game--e::before{background:radial-gradient(circle at 82% 8%,#ef4444,transparent 58%)}
.game--f::before{background:radial-gradient(circle at 82% 8%,#1db954,transparent 58%)}
.game--g::before{background:radial-gradient(circle at 82% 8%,#f97316,transparent 58%)}
.game--h::before{background:radial-gradient(circle at 82% 8%,#ec4899,transparent 58%)}
.game--i::before{background:radial-gradient(circle at 82% 8%,#3b82f6,transparent 58%)}
.game__tag{position:relative;display:inline-block;font-family:var(--f-disp);font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(245,197,66,.4);border-radius:999px;padding:.3em .8em;margin-bottom:14px}
.game h3,.game p{position:relative}

/* trust */
.trust__c h3{display:flex;align-items:center;gap:.55em;font-size:1.22rem}

/* promos */
.promo{border-top:3px solid transparent}
.promo--1{border-top-color:var(--gold)}
.promo--2{border-top-color:var(--red)}
.promo--3{border-top-color:var(--green)}
.promo__badge{display:inline-block;font-family:var(--f-disp);font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.fineprint{text-align:center;color:var(--muted);font-size:.85rem;margin:26px 0 0}

/* ---------------------------------------------------------------- split / phone */
.split{display:grid;grid-template-columns:1fr .8fr;gap:clamp(34px,5vw,72px);align-items:center}
.split__copy .sec__hd{text-align:left;margin:0}
.listrow{padding:18px 0;border-top:1px solid var(--line)}
.listrow h3{margin-bottom:.35em}
.listrow p{font-size:.95rem;color:var(--muted);margin:0}
.split__copy .btn{margin-top:26px}

.phone{display:grid;place-items:center}
.phone__frame{width:min(290px,80vw);aspect-ratio:9/18.5;background:#05050c;border:9px solid #23233c;border-radius:42px;padding:8px;position:relative;box-shadow:0 40px 80px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07)}
.phone__notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:96px;height:20px;background:#23233c;border-radius:0 0 14px 14px;z-index:2}
.phone__screen{height:100%;border-radius:32px;overflow:hidden;background:linear-gradient(175deg,#191933,#0b0b16);display:flex;flex-direction:column;padding:26px 12px 10px}
.ps__hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ps__logo{font-family:var(--f-disp);font-weight:900;font-size:.82rem;color:#fff}
.ps__logo i{color:var(--gold);font-style:normal}
.ps__bal{font-size:.62rem;color:var(--gold);background:rgba(245,197,66,.14);border:1px solid rgba(245,197,66,.3);padding:.25em .6em;border-radius:999px}
.ps__hero{height:76px;border-radius:12px;background:linear-gradient(120deg,rgba(245,197,66,.55),rgba(225,29,58,.55));margin-bottom:10px}
.ps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ps__grid span{aspect-ratio:1;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06)}
.ps__grid span:nth-child(2){background:rgba(245,197,66,.24)}
.ps__grid span:nth-child(4){background:rgba(225,29,58,.24)}
.ps__grid span:nth-child(9){background:rgba(29,185,84,.24)}
.ps__bar{margin-top:auto;display:flex;justify-content:space-around;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}
.ps__bar i{width:20px;height:4px;border-radius:2px;background:rgba(255,255,255,.16)}
.ps__bar i:first-child{background:var(--gold)}

/* ---------------------------------------------------------------- steps */
.steps{list-style:none;margin:0 auto;padding:0;max-width:760px;counter-reset:s}
.step{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.step:last-child{border-bottom:0}
.step__n{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  font-family:var(--f-disp);font-weight:900;font-size:1.22rem;color:#1a1405;
  background:linear-gradient(160deg,var(--gold-lt),var(--gold) 46%,var(--gold-dk));
  box-shadow:0 10px 24px -12px rgba(245,197,66,.8);
}
.step h3{margin-bottom:.3em}
.step p{margin:0;font-size:.96rem;color:var(--text-2)}

.cta-band{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(34px,4.5vw,56px);padding:clamp(24px,3.4vw,38px);
  border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:linear-gradient(120deg,rgba(245,197,66,.14),rgba(225,29,58,.14));
}
.cta-band h3{font-size:1.5rem;margin-bottom:.25em}
.cta-band p{margin:0;color:var(--text-2)}
.cta-band__btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------------------------------------------------------------- faq */
.faq{display:grid;gap:10px}
.qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:border-color .18s}
.qa[open]{border-color:rgba(245,197,66,.45)}
.qa summary{
  cursor:pointer;list-style:none;padding:18px 54px 18px 20px;position:relative;
  font-family:var(--f-disp);font-weight:700;font-size:1.02rem;color:#fff;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:1.4rem;font-weight:400;color:var(--gold);transition:transform .22s;
}
.qa[open] summary::after{content:"−"}
.qa summary:hover{background:rgba(255,255,255,.035)}
.qa__a{padding:0 20px 20px}
.qa__a p{margin:0;font-size:.96rem}

/* ---------------------------------------------------------------- closing */
.closing{text-align:center}
.closing p{font-size:1.06rem;margin-bottom:2em}

/* ---------------------------------------------------------------- footer */
.ftr{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(46px,6vw,72px) 0 26px;margin-top:20px}
.ftr__in{display:grid;grid-template-columns:1.15fr 1.85fr;gap:clamp(30px,5vw,60px);padding-bottom:38px;border-bottom:1px solid var(--line)}
.ftr__brand .brand__logo{height:74px}
.ftr__brand p{font-size:.92rem;color:var(--muted);margin:16px 0 18px;max-width:44ch}
.ftr__nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.ftr__nav h3{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:1em}
.ftr__nav ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr__nav a{color:var(--text-2);font-size:.93rem}
.ftr__nav a:hover{color:var(--gold)}

.rg{display:flex;gap:18px;align-items:flex-start;padding:26px 0;border-bottom:1px solid var(--line)}
.rg__age{
  flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  border:2px solid var(--red);color:var(--red-lt);
  font-family:var(--f-disp);font-weight:900;font-size:1rem;
}
.rg p{margin:0;font-size:.86rem;color:var(--muted);line-height:1.65}
.rg b{color:var(--text)}

.ftr__legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px}
.ftr__legal p{margin:0;font-size:.82rem;color:var(--muted)}

/* ---------------------------------------------------------------- sticky + nudge */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:8px;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,10,18,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.sticky .btn{flex:1}

.nudge{
  position:fixed;right:18px;bottom:18px;z-index:85;
  display:flex;align-items:center;gap:14px;max-width:min(370px,calc(100vw - 36px));
  padding:15px 17px;border-radius:var(--r);
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid rgba(245,197,66,.4);box-shadow:var(--shadow);
  animation:rise .38s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.nudge h2{font-size:1rem;margin:0 0 .15em}
.nudge p{margin:0;font-size:.83rem;color:var(--muted)}
.nudge__ico{font-size:1.8rem;flex:none}
.nudge__x{position:absolute;top:-9px;right:-9px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text-2);cursor:pointer;font-size:1.05rem;line-height:1;display:grid;place-items:center;padding:0}
.nudge__x:hover{color:#fff;border-color:var(--gold)}
.nudge .btn{flex:none;margin-left:auto}

.totop{
  position:fixed;right:18px;bottom:18px;z-index:70;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line-2);background:rgba(21,21,42,.9);color:var(--gold);
  font-size:1.15rem;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px);
}
.totop:hover{border-color:var(--gold)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;gap:40px}
  .testid{max-width:520px}
  .nav{display:none}
}
@media (max-width:900px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:1fr}
  .phone{order:-1}
  .ftr__in{grid-template-columns:1fr}
}
@media (max-width:760px){
  html{scroll-padding-top:70px}
  body{font-size:16px}
  .burger{display:grid}
  .hdr__in{gap:12px}
  .brand__mark{height:32px}
  .hdr__cta{gap:8px}
  .hdr__cta .btn--tg span{display:none}
  .hdr__cta .btn--tg{padding:.8em .9em}
  /* the sticky bottom bar already carries Daftar — no room for it twice */
  .hdr__cta .btn--gold{display:none}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(10,10,18,.985);border-block:1px solid var(--line);padding:8px var(--pad) 18px;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  .nav.is-open{display:flex}
  .nav a{padding:.85em .6em;border-radius:10px;font-size:1.02rem}
  .hero__btns{flex-direction:column;align-items:stretch}
  .hero__btns .btn{width:100%}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .sticky{display:flex}
  body{padding-bottom:72px}
  .nudge,.totop{bottom:80px}
  .step{grid-template-columns:44px 1fr;gap:15px}
  .step__n{width:42px;height:42px;font-size:1.05rem}
  .cta-band{flex-direction:column;align-items:flex-start}
  .ftr__legal{flex-direction:column;gap:6px}
}
@media (max-width:420px){
  .ftr__nav{grid-template-columns:1fr 1fr}
  .nudge{right:10px;left:10px;max-width:none}
  .totop{display:none}
}