/* Local Montserrat with explicit weights for consistent WebKit rendering. */
/* cyrillic-ext — 300 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-ext-300.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic-ext — 400 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-ext-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic-ext — 500 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-ext-500.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic-ext — 600 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-ext-600.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic-ext — 700 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-ext-700.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic-ext — 800 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-ext-800.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic-ext — 900 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-ext-900.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic — 300 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-300.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* cyrillic — 400 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* cyrillic — 500 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-500.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* cyrillic — 600 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-600.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* cyrillic — 700 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-700.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* cyrillic — 800 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-800.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* cyrillic — 900 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-cyrillic-900.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext — 300 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-ext-300.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin-ext — 400 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-ext-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin-ext — 500 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-ext-500.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin-ext — 600 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-ext-600.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin-ext — 700 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-ext-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin-ext — 800 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-ext-800.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin-ext — 900 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-ext-900.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin — 300 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin — 400 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin — 500 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin — 600 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin — 700 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin — 800 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin — 900 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/montserrat-v31-latin-900.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #090312;
  --panel: rgba(20, 5, 36, .60);
  --panel-strong: rgba(16, 5, 29, .83);
  --purple: #b026ff;
  --pink: #ff107a;
  --violet: #8b5cf6;
  --text: #f7f4fb;
  --muted: #a9a0b5;
  --line: rgba(255,255,255,.07);
  --line-purple: rgba(176,38,255,.28);
  --radius: 24px;
  --shadow: 0 0 25px -5px rgba(176,38,255,.38), 0 0 15px -5px rgba(255,16,122,.28);
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: 'Montserrat',system-ui,sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button,input { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(255,16,122,.28); color: #fff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background:#090312; }
::-webkit-scrollbar-thumb { background:linear-gradient(#b026ff,#ff107a); border-radius:5px; }

#tw-particles { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; background:#090312; }
.site { position:relative; z-index:2; }
.container { width:min(calc(100% - 40px), var(--max)); margin-inline:auto; }

.header { position:fixed; inset:0 0 auto; z-index:50; padding:21px 0; transition:padding .3s ease,background .3s ease,border .3s ease,backdrop-filter .3s ease; }
.header.is-scrolled { padding:13px 0; background:rgba(9,3,18,.82); backdrop-filter:blur(20px); border-bottom:1px solid rgba(255,255,255,.05); }
.header-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; }
.brand { display:flex; align-items:center; gap:11px; min-width:max-content; }
.brand-mark { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--purple),var(--pink)); box-shadow:0 0 25px rgba(176,38,255,.42); font:900 15px 'Montserrat'; }
.brand-name { font:800 15px/1 'Montserrat'; letter-spacing:.12em; }
.nav { display:flex; align-items:center; gap:34px; }
.nav a { position:relative; padding:8px 0; color:#d4cddd; font-size:13px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; transition:.25s ease; }
.nav a:after { content:''; position:absolute; left:0; bottom:1px; width:0; height:2px; background:linear-gradient(90deg,var(--purple),var(--pink)); transition:width .25s ease; }
.nav a:hover,.nav a.active { color:#fff; text-shadow:0 0 12px rgba(176,38,255,.7); }
.nav a:hover:after,.nav a.active:after { width:100%; }
.header-actions { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.menu-btn { display:none; width:42px; height:42px; border:1px solid var(--line); color:#fff; background:rgba(255,255,255,.04); border-radius:13px; cursor:pointer; }
.scroll-progress { position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform-origin:left center; transform:scaleX(0); background:linear-gradient(90deg,var(--purple),var(--pink)); box-shadow:0 0 12px rgba(176,38,255,.7); }

.btn { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:16px; padding:0 25px; font-weight:800; cursor:pointer; transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background .24s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:#fff; background:linear-gradient(100deg,var(--purple),var(--pink)); box-shadow:0 0 22px rgba(176,38,255,.38); }
.btn-primary:hover { box-shadow:0 0 36px rgba(255,16,122,.43); }
.btn-secondary { color:#fff; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(12px); }
.btn-secondary:hover { border-color:rgba(176,38,255,.42); background:rgba(176,38,255,.08); }
.btn-small { min-height:42px; padding:0 17px; border-radius:13px; font-size:13px; }

.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:120px 0 70px; position:relative; overflow:hidden; }
.hero-inner { max-width:930px; text-align:center; margin:auto; display:flex; flex-direction:column; align-items:center; }
.badge { display:inline-flex; align-items:center; min-height:32px; padding:0 14px; border-radius:999px; color:#ff5ca5; border:1px solid rgba(255,16,122,.32); background:rgba(255,16,122,.08); backdrop-filter:blur(10px); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero-logo { width:clamp(132px,16vw,210px); aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 0 28px rgba(176,38,255,.42)); margin:22px 0 4px; animation:logoFloat 6s ease-in-out infinite; }
@keyframes logoFloat { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
.hero h1 { margin:0; font:900 clamp(46px,8.5vw,104px)/.95 'Montserrat'; letter-spacing:-.045em; text-transform:uppercase; text-shadow:0 0 14px rgba(176,38,255,.50),0 0 28px rgba(255,16,122,.22); }
.gradient-text { color:transparent; background:linear-gradient(100deg,#fff 0%,#fff 30%,#d9b7ff 58%,#ff76b7 100%); -webkit-background-clip:text; background-clip:text; }
.hero-sub { max-width:760px; margin:25px auto 0; color:#c7bfce; font-size:clamp(17px,2vw,22px); line-height:1.7; font-weight:500; }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:36px; }
.hero-proof { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:26px; color:#847b8f; font-size:12px; }
.hero-proof span { display:flex; align-items:center; gap:7px; }
.proof-dot { width:6px; height:6px; border-radius:50%; background:#42ffab; box-shadow:0 0 12px #42ffab; }
.scroll-hint { position:absolute; left:50%; bottom:25px; transform:translateX(-50%); color:#706879; display:grid; justify-items:center; gap:7px; font:700 10px 'Montserrat'; letter-spacing:.16em; text-transform:uppercase; }
.scroll-arrow { animation:bob 1.6s ease-in-out infinite; font-size:20px; }
@keyframes bob { 0%,100%{transform:translateY(0)}50%{transform:translateY(8px)} }

.section { padding:105px 0; position:relative; }
.section-tight { padding:72px 0; }
.section-head { max-width:760px; margin-bottom:38px; }
.section-head.center { text-align:center; margin-inline:auto; }
.eyebrow { color:#ff4fa0; font:800 11px 'Montserrat'; letter-spacing:.16em; text-transform:uppercase; }
.section-title { margin:13px 0 14px; font:900 clamp(32px,4vw,54px)/1.1 'Montserrat'; letter-spacing:-.035em; }
.section-copy { color:var(--muted); font-size:16px; line-height:1.8; }

.glass { background:var(--panel); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius); backdrop-filter:blur(18px); box-shadow:var(--shadow); }
.about-card { display:grid; grid-template-columns:1.03fr .97fr; overflow:hidden; }
.about-copy { padding:48px; }
.about-copy h2 { margin:10px 0 18px; font:900 clamp(30px,4vw,50px)/1.08 'Montserrat'; }
.about-copy p { color:#b4aabd; line-height:1.85; }
.about-image { position:relative; min-height:440px; padding:34px; display:flex; align-items:center; background:radial-gradient(circle at 60% 40%,rgba(176,38,255,.16),transparent 60%); border-left:1px solid rgba(255,255,255,.05); }
.about-image img { width:100%; border-radius:17px; box-shadow:0 28px 80px rgba(0,0,0,.5),0 0 35px rgba(176,38,255,.18); border:1px solid rgba(255,255,255,.08); }
.mini-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:28px; }
.mini-stat { padding:17px 18px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06); }
.mini-stat strong { display:block; color:#fff; font:800 18px 'Montserrat'; margin-bottom:5px; }
.mini-stat span { color:#8e8499; font-size:12px; }

.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature { min-height:214px; padding:26px; position:relative; overflow:hidden; transition:.3s ease; }
.feature:hover { transform:translateY(-5px); border-color:rgba(176,38,255,.24); box-shadow:0 0 42px -8px rgba(176,38,255,.35); }
.feature-num { color:#6d6277; font:700 11px 'Montserrat'; letter-spacing:.12em; }
.feature-icon { width:45px; height:45px; margin:24px 0 19px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(145deg,rgba(176,38,255,.18),rgba(255,16,122,.08)); border:1px solid rgba(176,38,255,.20); color:#e2baff; font-size:21px; }
.feature h3 { margin:0 0 10px; font:800 16px 'Montserrat'; }
.feature p { margin:0; color:#958b9f; font-size:13px; line-height:1.7; }

.choice-card { padding:34px; display:grid; grid-template-columns:1fr auto; gap:25px; align-items:center; }
.choice-card h3 { margin:0 0 8px; font:900 clamp(23px,3vw,34px) 'Montserrat'; }
.choice-card p { margin:0; color:#9b91a5; line-height:1.65; }
.choice-actions { display:flex; gap:10px; }

.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step { padding:32px; min-height:260px; }
.step-index { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; border:1px solid rgba(176,38,255,.32); color:#ff6fb0; background:rgba(176,38,255,.08); font:800 12px 'Montserrat'; }
.step h3 { margin:24px 0 12px; font:800 19px 'Montserrat'; }
.step p { color:#9c92a6; line-height:1.72; font-size:14px; }

.referral { padding:48px; display:grid; grid-template-columns:1fr auto; gap:35px; align-items:center; overflow:hidden; position:relative; }
.referral:after { content:''; position:absolute; width:280px; height:280px; right:-130px; top:-130px; border-radius:50%; background:#b026ff; filter:blur(90px); opacity:.12; }
.referral h2 { margin:10px 0 14px; font:900 clamp(28px,4vw,44px) 'Montserrat'; }
.referral p { max-width:700px; color:#a79dad; line-height:1.75; }

.footer { position:relative; z-index:3; border-top:1px solid rgba(255,255,255,.05); background:rgba(5,1,10,.58); backdrop-filter:blur(18px); padding:72px 0 28px; margin-top:50px; }
.footer-grid { display:grid; grid-template-columns:1.35fr repeat(3,1fr); gap:42px; }
.footer-brand img { width:72px; height:72px; object-fit:contain; filter:drop-shadow(0 0 18px rgba(176,38,255,.32)); }
.footer-brand h3 { font:800 16px 'Montserrat'; margin:14px 0 11px; }
.footer-brand p { color:#82788c; line-height:1.7; font-size:13px; max-width:300px; }
.footer h4 { font:800 12px 'Montserrat'; letter-spacing:.10em; margin:8px 0 18px; color:#dcd4e4; }
.footer ul { padding:0; margin:0; list-style:none; display:grid; gap:12px; }
.footer li a { color:#8f8599; font-size:13px; transition:.2s; }
.footer li a:hover { color:#ff62aa; }
.footer-status { display:inline-flex; align-items:center; gap:8px; color:#a59aaa; font-size:12px; margin-top:14px; }
.footer-bottom { margin-top:48px; padding-top:25px; border-top:1px solid rgba(255,255,255,.05); display:flex; justify-content:space-between; gap:20px; color:#665d70; font-size:11px; line-height:1.6; }

.page-hero { padding:155px 0 58px; text-align:center; }
.page-hero h1 { margin:14px 0; font:900 clamp(38px,6vw,66px)/1.05 'Montserrat'; letter-spacing:-.04em; }
.page-hero p { max-width:700px; margin:0 auto; color:#a89dad; line-height:1.7; }
.page-card { padding:38px; }
.download-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; }
.download-primary { padding:40px; }
.download-primary h2 { font:900 31px 'Montserrat'; margin:0 0 10px; }
.download-info { display:grid; gap:10px; margin:27px 0; }
.info-row { display:flex; justify-content:space-between; align-items:flex-start; gap:25px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.info-row span { color:#82788c; font-size:12px; }
.info-row strong { color:#eee8f4; text-align:right; font-size:13px; word-break:break-word; }
.download-help { padding:34px; }
.download-help ol { margin:22px 0 0; padding-left:22px; color:#a69bad; line-height:2; }
.status-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(66,255,171,.18); color:#75ffc0; background:rgba(66,255,171,.06); padding:7px 11px; border-radius:999px; font-size:11px; font-weight:700; }
.status-pill.offline { color:#ff8cae; border-color:rgba(255,70,120,.18); background:rgba(255,70,120,.06); }

.ref-layout { max-width:900px; margin:auto; }
.ref-panel { padding:42px; }
.reward-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:25px 0 12px; }
.reward { padding:20px; border-radius:17px; border:1px solid rgba(176,38,255,.18); background:rgba(176,38,255,.065); }
.reward span { display:block; color:#7f7489; font:700 10px 'Montserrat'; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; }
.reward strong { font:800 18px 'Montserrat'; }
.condition { margin-top:12px; padding:18px 20px; border-radius:17px; border:1px solid rgba(176,38,255,.18); background:rgba(176,38,255,.055); color:#d6cddd; line-height:1.6; }
.code-card { margin:28px 0; padding:22px; border-radius:18px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.07); }
.code-row { display:flex; align-items:center; gap:10px; margin-top:12px; }
.code { flex:1; padding:15px 17px; border-radius:13px; border:1px solid rgba(176,38,255,.25); background:#090312; color:#fff; font:800 18px 'Montserrat'; letter-spacing:.08em; overflow:hidden; text-overflow:ellipsis; }
.ref-actions { display:flex; flex-wrap:wrap; gap:10px; }

.doc-shell { display:grid; grid-template-columns:1fr; gap:18px; max-width:980px; margin:auto; }
.doc-nav { padding:11px; display:flex; flex-wrap:wrap; gap:8px; position:sticky; top:76px; z-index:10; }
.doc-nav a { padding:11px 14px; border-radius:12px; color:#91869b; font-size:12px; font-weight:700; }
.doc-nav a:hover,.doc-nav a.active { color:#fff; background:rgba(176,38,255,.12); }
.document { padding:44px; }
.document .updated { color:#6f6579; font-size:12px; margin-bottom:30px; }
.document h2 { font:800 19px 'Montserrat'; margin:36px 0 13px; }
.document p,.document li { color:#a99fad; line-height:1.82; font-size:14px; }
.document a { color:#d68bff; }
.document ul { padding-left:21px; }

.modal-root[hidden] { display:none; }
.modal-root { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(9px); }
.modal { position:relative; z-index:1; width:min(100%,480px); padding:32px; border-radius:22px; background:rgba(9,3,18,.96); border:1px solid rgba(255,255,255,.10); box-shadow:0 0 60px rgba(176,38,255,.20); animation:modalIn .22s ease-out; }
@keyframes modalIn { from{opacity:0;transform:translateY(14px) scale(.97)} to{opacity:1;transform:none} }
.modal h3 { margin:0 0 10px; font:800 25px 'Montserrat'; }
.modal p { color:#9f95a9; line-height:1.7; }
.modal-actions { display:flex; gap:10px; margin-top:24px; }
.modal-actions .btn { flex:1; }
.modal-close { position:absolute; top:13px; right:13px; width:38px; height:38px; border:0; background:transparent; color:#756b80; font-size:22px; cursor:pointer; }
.ref-how ol { padding-left:20px; color:#aaa0b4; line-height:1.85; }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .75s ease,transform .75s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.08s; }.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

.mobile-nav { display:none; }
@media(max-width:900px){
  .header-row{grid-template-columns:1fr auto}.nav{display:none}.header-actions .btn{display:none}.menu-btn{display:grid;place-items:center}
  .mobile-nav{position:absolute;left:20px;right:20px;top:72px;padding:15px;gap:5px;flex-direction:column;background:rgba(9,3,18,.96);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(18px)}
  .mobile-nav.open{display:flex}.mobile-nav a{padding:13px 15px;border-radius:11px;color:#c4bacd;font-weight:700}.mobile-nav a:hover{background:rgba(176,38,255,.08);color:#fff}
  .about-card,.download-grid{grid-template-columns:1fr}.about-image{border-left:0;border-top:1px solid var(--line);min-height:auto}
  .features,.steps{grid-template-columns:1fr 1fr}.choice-card,.referral{grid-template-columns:1fr}.choice-actions{justify-content:flex-start}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .container{width:min(calc(100% - 28px),var(--max))}.header{padding:14px 0}.brand-name{display:none}
  .hero{padding-top:100px}.hero-logo{width:130px}.hero h1{font-size:clamp(40px,13vw,62px)}.hero-sub{font-size:16px}.hero-actions{width:100%}.hero-actions .btn{width:100%}
  .section{padding:74px 0}.about-copy,.about-image,.page-card,.download-primary,.download-help,.ref-panel,.document,.referral{padding:25px}
  .features,.steps,.reward-grid{grid-template-columns:1fr}.choice-actions,.modal-actions{flex-direction:column}.choice-actions .btn{width:100%}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column}.page-hero{padding-top:120px}.doc-nav{top:67px;overflow-x:auto;flex-wrap:nowrap}.doc-nav a{white-space:nowrap}.code-row{flex-direction:column}.code-row .btn,.code{width:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}


body{letter-spacing:.002em} 
.header.is-scrolled{background:rgba(9,3,18,.72)}
.btn{font-family:'Montserrat',system-ui,sans-serif;letter-spacing:-.01em;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease,filter .35s ease}
.btn:before{content:'';position:absolute;inset:1px;border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));opacity:.45;pointer-events:none}
.btn-primary{box-shadow:0 0 26px rgba(176,38,255,.36),0 0 46px rgba(255,16,122,.15)}
.btn-primary:hover{box-shadow:0 0 34px rgba(176,38,255,.55),0 0 60px rgba(255,16,122,.28);filter:saturate(1.08)}
.btn-secondary{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.15)}
.hero h1,.section-title,.about-copy h2,.choice-card h3,.step h3,.feature h3,.page-hero h1,.referral h2,.document h2,.modal h3,.footer-brand h3,.download-primary h2{font-family:'Montserrat',system-ui,sans-serif!important}
.hero h1{letter-spacing:-.055em;font-size:clamp(54px,8.3vw,108px);text-shadow:0 0 16px rgba(176,38,255,.45),0 0 34px rgba(255,16,122,.2)}
.hero-sub{max-width:820px;color:#d4ccd9} 
.glass{position:relative;isolation:isolate;background:linear-gradient(180deg,rgba(21,6,38,.74),rgba(11,4,22,.8));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(22px) saturate(1.12);box-shadow:0 22px 80px rgba(0,0,0,.22),0 0 35px rgba(176,38,255,.12)}
.glass:before{content:'';position:absolute;inset:1px;border-radius:calc(var(--radius) - 1px);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 24%,rgba(255,255,255,.02) 100%);pointer-events:none;z-index:-1}
.about-card{grid-template-columns:.98fr 1.02fr}
.about-image{padding:30px 32px;border-left:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;background:none;min-height:470px}
.mini-stat{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.feature,.step,.reward,.condition,.code-card,.download-primary,.download-help,.document,.ref-panel,.choice-card,.referral{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.feature p,.step p,.section-copy,.page-hero p,.document p,.document li,.about-copy p,.choice-card p,.referral p,.footer-brand p{color:#bbb0c6}
.choice-card{grid-template-columns:1fr;justify-items:center;text-align:center;padding:38px 36px}
.choice-card p{max-width:760px;margin-inline:auto}
.choice-actions{justify-content:center;flex-wrap:wrap}
.steps,.features{gap:18px}
.feature{min-height:226px;border-color:rgba(255,255,255,.06)}
.feature:hover,.step:hover,.reward:hover,.condition:hover,.code-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.18),0 0 28px rgba(176,38,255,.12),inset 0 1px 0 rgba(255,255,255,.05)}
.step,.feature,.reward,.condition,.code-card{transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease}
.referral{grid-template-columns:1fr;justify-items:center;text-align:center}
.referral p{max-width:760px}.referral:after{display:none}
.referral .btn{margin-top:6px}
.ref-actions{justify-content:center}
.page-hero p{max-width:760px}
.download-grid{align-items:start}
.download-primary .btn,.download-help .btn{justify-self:center}
.info-row strong{max-width:55%;color:#fff}
.footer{background:linear-gradient(180deg,rgba(9,3,18,.45),rgba(9,3,18,.82));backdrop-filter:blur(24px)}
.footer-grid{gap:46px}
.footer li a{transition:color .25s ease,text-shadow .25s ease}.footer li a:hover{text-shadow:0 0 14px rgba(176,38,255,.4)}
.footer-bottom{color:#7a7186}
.doc-nav a.active{box-shadow:0 0 22px rgba(176,38,255,.12)}
.code{font-family:'Montserrat',system-ui,sans-serif;letter-spacing:.01em}
.reward strong{font-size:17px} 
.hero-proof{justify-content:center}


/* -------------------------------------------------------------
   V6 polish: restrained motion, real perspective, richer liquid glass
   ------------------------------------------------------------- */

.scroll-hint{
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);
}
.scroll-hint.is-hidden{
  opacity:0;
  transform:translate(-50%,14px);
  pointer-events:none;
}

/* True 3D camera scene: perspective on X/Y, not a flat Z rotation. */
.showcase-scene{
  --tilt-x:0deg;
  --tilt-y:0deg;
  position:relative;
  width:min(100%,780px);
  min-height:450px;
  display:grid;
  place-items:center;
  perspective:1450px;
  transform-style:preserve-3d;
  isolation:isolate;
}
.shot-backplane{
  position:absolute;
  inset:11% 8% 13% 10%;
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(176,38,255,.035));
  border:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(16px);
  transform:
    rotateX(calc(5deg + var(--tilt-x)))
    rotateY(calc(-17deg + var(--tilt-y)))
    translateZ(-34px)
    translateX(18px)
    translateY(12px);
  box-shadow:0 28px 90px rgba(0,0,0,.28);
}
.shot-floor-shadow{
  position:absolute;
  left:13%;
  right:5%;
  bottom:7%;
  height:24%;
  border-radius:50%;
  background:rgba(0,0,0,.52);
  filter:blur(28px);
  transform:rotateX(72deg) translateZ(-60px);
  opacity:.7;
}
.shot-main{
  position:relative;
  z-index:2;
  width:100%;
  border-radius:23px;
  border:1px solid rgba(255,255,255,.105);
  transform-origin:center center;
  transform:
    rotateX(calc(5deg + var(--tilt-x)))
    rotateY(calc(-17deg + var(--tilt-y)))
    translateZ(32px);
  box-shadow:
    -24px 28px 75px rgba(0,0,0,.52),
    0 0 34px rgba(176,38,255,.16);
  transition:box-shadow .55s ease;
  will-change:transform;
}
.showcase-scene:hover .shot-main{
  box-shadow:
    -30px 36px 92px rgba(0,0,0,.58),
    0 0 44px rgba(176,38,255,.22);
}
.showcase-chip{
  position:absolute;
  z-index:4;
  padding:12px 16px;
  border-radius:16px;
  background:rgba(12,5,22,.68);
  backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.25);
  color:#f5eff9;
  font-size:12px;
  font-weight:750;
}
.chip-top{
  top:5%;
  right:6%;
  transform:translateZ(70px) rotate(-1deg);
}
.chip-bottom{
  left:2%;
  bottom:7%;
  max-width:285px;
  color:#d0c6d8;
  line-height:1.45;
  transform:translateZ(62px) rotate(-1deg);
}

/* Liquid glass: material depth + dynamic specular highlight.
   Applied only to important panels, not every card. */
.liquid-panel{
  --glass-x:50%;
  --glass-y:0%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 24%,rgba(255,255,255,.018)),
    linear-gradient(145deg,rgba(25,8,43,.76),rgba(10,3,21,.82));
  border:1px solid rgba(255,255,255,.095);
  backdrop-filter:blur(26px) saturate(1.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 1px 0 0 rgba(255,255,255,.035),
    inset 0 -1px 0 rgba(110,35,170,.12),
    0 28px 80px rgba(0,0,0,.24),
    0 0 30px rgba(176,38,255,.10);
}
.liquid-panel::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(112deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.045) 11%,
      rgba(255,255,255,0) 29%,
      rgba(255,255,255,.025) 72%,
      rgba(255,255,255,.065) 100%);
  opacity:.72;
}
.liquid-panel::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-35%;
  pointer-events:none;
  background:
    radial-gradient(
      circle at var(--glass-x) var(--glass-y),
      rgba(255,255,255,.18) 0%,
      rgba(221,175,255,.075) 12%,
      rgba(176,38,255,.032) 24%,
      transparent 43%);
  filter:blur(3px);
  opacity:.28;
  transform:scale(.96);
  transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1);
}
.liquid-panel.has-glass-light::after{
  opacity:.88;
  transform:scale(1);
}

/* Refs: every inner surface uses the same material language. */
.ref-main-section{padding-top:54px}
.ref-layout{max-width:930px}
.ref-panel{
  padding:34px;
  border-radius:28px;
}
.ref-overview{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.ref-surface{
  position:relative;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),
    rgba(16,5,29,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 32px rgba(0,0,0,.12);
}
.ref-tile{
  min-height:118px;
  padding:20px 21px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ref-tile-condition{grid-column:1/-1;min-height:104px}
.ref-tile span{
  display:block;
  color:#91879d;
  font-size:10px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.ref-tile strong{
  display:block;
  margin-top:8px;
  color:#fff;
  font-size:18px;
  font-weight:800;
}
.ref-tile small{
  display:block;
  margin-top:7px;
  color:#9e94a8;
  font-size:12px;
  line-height:1.55;
}
.ref-code-zone{
  margin-top:14px;
  padding:22px;
}
.ref-code-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:14px;
}
.ref-code-heading p{
  margin:0;
  max-width:520px;
  color:#8f8599;
  font-size:12px;
  line-height:1.55;
  text-align:right;
}
.code{
  background:rgba(7,2,14,.42);
  border-color:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.ref-actions{
  margin-top:24px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.ref-actions .btn{min-width:178px}
.btn-rules{
  color:#f9deec;
  border-color:rgba(255,84,162,.30);
  box-shadow:0 0 20px rgba(255,16,122,.06),inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-rules:hover{
  border-color:rgba(255,84,162,.50);
  box-shadow:0 0 26px rgba(255,16,122,.12),inset 0 1px 0 rgba(255,255,255,.08);
}

/* Rules: content is immediately visible and starts closer to the top. */
body[data-page="rules"] .page-hero{padding-bottom:32px}
body[data-page="rules"] .section-tight{padding-top:22px}
.rules-document{opacity:1!important;transform:none!important}
.rules-top-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:25px;
}
.rules-intro{
  margin-bottom:29px;
  padding:20px 21px;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
}
.rules-intro p{margin:10px 0 0!important}

/* Manual 18+ answer */
.age-confirm-modal{width:min(100%,520px)}
.age-confirm-modal p strong{color:#fff}
.age-input-label{
  display:block;
  margin:22px 0 9px;
  color:#a69cac;
  font-size:12px;
  font-weight:750;
}
.age-confirm-input{
  width:100%;
  min-height:55px;
  padding:0 17px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.10);
  outline:none;
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.02));
  color:#fff;
  font-family:'Montserrat',system-ui,sans-serif;
  font-size:16px;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 13px 32px rgba(0,0,0,.14);
  backdrop-filter:blur(18px);
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.age-confirm-input::placeholder{color:#6e6577;font-weight:500}
.age-confirm-input:focus{
  border-color:rgba(190,73,255,.55);
  background:linear-gradient(180deg,rgba(176,38,255,.075),rgba(255,255,255,.02));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 3px rgba(176,38,255,.07),
    0 0 26px rgba(176,38,255,.14);
}
.age-confirm-input.is-invalid{
  animation:ageShake .28s ease;
  border-color:rgba(255,74,125,.58);
  box-shadow:0 0 0 3px rgba(255,16,122,.06),0 0 22px rgba(255,16,122,.11);
}
.age-message{
  min-height:21px;
  margin-top:9px;
  color:#ff83b2;
  font-size:12px;
  line-height:1.5;
}
@keyframes ageShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

/* Softer, more expensive-feeling motion */
.reveal{
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1);
}
.btn{
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .38s ease,
    border-color .38s ease,
    background .38s ease,
    filter .38s ease;
}

@media(max-width:900px){
  .showcase-scene{min-height:360px}
  .shot-main,.shot-backplane{
    transform:
      rotateX(4deg)
      rotateY(-11deg)
      translateZ(20px);
  }
  .ref-code-heading{align-items:flex-start;flex-direction:column}
  .ref-code-heading p{text-align:left}
}
@media(max-width:620px){
  .showcase-scene{min-height:245px}
  .showcase-chip{display:none}
  .ref-panel{padding:22px}
  .ref-overview{grid-template-columns:1fr}
  .ref-tile-condition{grid-column:auto}
  .ref-actions{flex-direction:column}
  .ref-actions .btn{width:100%;min-width:0}
  .rules-top-actions{align-items:stretch;flex-direction:column}
  .rules-top-actions .btn{width:100%}
}


/* ==========================================================================
   V7 FINAL VISUAL PASS
   Fresh asset filename prevents old browser cache from mixing layouts.
   ========================================================================== */

/* More obvious, lower-side camera view for the launcher screenshot. */
.showcase-scene{
  min-height:490px;
  perspective:1050px;
  perspective-origin:64% 72%;
}
.shot-main{
  transform-origin:52% 72%;
  transform:
    rotateX(calc(-8deg + var(--tilt-x)))
    rotateY(calc(21deg + var(--tilt-y)))
    rotateZ(-.65deg)
    translate3d(-10px,8px,42px);
  border-radius:24px;
  box-shadow:
    32px 38px 90px rgba(0,0,0,.58),
    -4px 0 0 rgba(255,255,255,.055),
    0 0 40px rgba(176,38,255,.17);
}
.shot-backplane{
  inset:13% 8% 10% 10%;
  transform-origin:52% 72%;
  transform:
    rotateX(calc(-8deg + var(--tilt-x)))
    rotateY(calc(21deg + var(--tilt-y)))
    rotateZ(-.65deg)
    translate3d(16px,16px,-36px);
  background:rgba(18,7,30,.52);
  border:1px solid rgba(255,255,255,.075);
}
.shot-floor-shadow{
  left:21%;right:1%;bottom:2%;height:28%;
  transform:rotateX(74deg) rotateZ(-4deg) translateZ(-80px);
  filter:blur(30px);opacity:.78;
}
.showcase-caption{
  position:absolute;z-index:5;right:4%;bottom:5%;
  padding:10px 14px;border-radius:14px;
  color:#ded4e8;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(12,5,22,.62);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 34px rgba(0,0,0,.24);
}

/* Liquid glass that is actually visible: thinner material, stronger inner edge, moving caustic. */
.liquid-panel{
  --glass-x:50%;--glass-y:0%;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 20%,rgba(255,255,255,.008) 54%,rgba(255,255,255,.026)),
    rgba(19,7,32,.56);
  border:1px solid rgba(235,215,255,.14);
  backdrop-filter:blur(30px) saturate(1.32);
  -webkit-backdrop-filter:blur(30px) saturate(1.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(160,75,235,.14),
    inset 1px 0 0 rgba(255,255,255,.045),
    0 28px 85px rgba(0,0,0,.25),
    0 0 34px rgba(176,38,255,.10);
}
.liquid-panel::before{
  inset:1px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.055) 13%,transparent 30%,transparent 68%,rgba(255,255,255,.045) 86%,rgba(255,255,255,.11) 100%);
  opacity:.85;
}
.liquid-panel::after{
  inset:-28%;
  background:
    radial-gradient(ellipse at var(--glass-x) var(--glass-y),rgba(255,255,255,.26) 0%,rgba(234,205,255,.105) 10%,rgba(176,38,255,.055) 21%,transparent 39%);
  filter:blur(8px);
  opacity:.38;
  transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1);
}
.liquid-panel.has-glass-light::after{opacity:.95;transform:scale(1.025)}

/* A soft moving highlight around important liquid surfaces even without mouse movement. */
.choice-card.liquid-panel,.referral.liquid-panel,.ref-panel.liquid-panel,.download-primary.liquid-panel,.download-help.liquid-panel,.document.liquid-panel{
  animation:liquidBreathe 7s ease-in-out infinite;
}
@keyframes liquidBreathe{
  0%,100%{border-color:rgba(235,215,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(160,75,235,.12),0 28px 85px rgba(0,0,0,.25),0 0 28px rgba(176,38,255,.08)}
  50%{border-color:rgba(235,215,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.19),inset 0 -1px 0 rgba(205,90,255,.18),0 30px 90px rgba(0,0,0,.27),0 0 38px rgba(176,38,255,.14)}
}

/* Equal-size download cards. */
.download-grid{align-items:stretch;grid-template-columns:1fr 1fr;gap:18px}
.download-primary,.download-help{
  min-height:500px;
  display:flex;
  flex-direction:column;
}
.download-primary [data-real-download]{margin-top:auto}
.download-help ol{margin-bottom:22px}
.download-help .btn{margin-top:auto!important}
.download-primary>.section-copy{max-width:480px}

/* Referral composition: consistent tiles and button alignment. */
.ref-panel{padding:34px}
.ref-overview{align-items:stretch}
.ref-tile{height:132px}
.ref-tile-condition{height:auto;min-height:112px}
.ref-code-zone{margin-top:16px}
.ref-code-row{align-items:stretch}
.ref-code-row .code,.ref-code-row .btn{min-height:56px}
.ref-actions{justify-content:center;gap:12px;margin-top:24px}
.ref-actions .btn{min-width:190px}
.btn-rules-strong{
  border-color:rgba(255,84,162,.42)!important;
  color:#fff!important;
  background:linear-gradient(180deg,rgba(255,68,154,.10),rgba(255,255,255,.035))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 24px rgba(255,16,122,.09)!important;
}

/* Document navigation no longer floats over content. */
.doc-nav-static,.doc-nav{
  position:relative!important;
  top:auto!important;
  margin-bottom:18px;
  overflow:visible;
}
.rules-document,.document.is-visible{opacity:1!important;transform:none!important}
.rules-top-actions{margin-bottom:22px}

/* Footer becomes one deliberate glass composition, not four loose columns. */
.footer{
  margin-top:74px;
  padding:56px 0 28px;
  background:linear-gradient(180deg,rgba(9,3,18,0),rgba(6,2,12,.62));
  border-top:1px solid rgba(255,255,255,.035);
}
.footer-grid{
  position:relative;
  padding:34px 38px;
  border-radius:28px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.046),rgba(255,255,255,.012)),
    rgba(15,5,26,.48);
  border:1px solid rgba(255,255,255,.075);
  backdrop-filter:blur(24px) saturate(1.18);
  -webkit-backdrop-filter:blur(24px) saturate(1.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 30px 80px rgba(0,0,0,.20),0 0 26px rgba(176,38,255,.07);
}
.footer-brand img{width:64px;height:64px}
.footer h4{color:#eee8f4;font-size:11px}
.footer li a{display:inline-flex;padding:3px 0;color:#9f95aa}
.footer li a:hover{transform:translateX(3px);color:#fff}
.footer-status{padding:8px 11px;border:1px solid rgba(66,255,171,.10);border-radius:999px;background:rgba(66,255,171,.025)}
.footer-bottom{padding-inline:4px}

/* Premium button sheen, only on hover. */
.btn::after{
  content:"";position:absolute;top:-60%;bottom:-60%;left:-32%;width:24%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  transform:skewX(-18deg) translateX(-260%);
  transition:transform .65s cubic-bezier(.22,1,.36,1);pointer-events:none;
}
.btn:hover::after{transform:skewX(-18deg) translateX(650%)}

/* Tiny card depth. */
.feature,.step,.ref-tile{
  --card-rx:0deg;--card-ry:0deg;
  transform:perspective(900px) rotateX(var(--card-rx)) rotateY(var(--card-ry));
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease;
}
.feature:hover,.step:hover,.ref-tile:hover{
  transform:perspective(900px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(-4px);
}

/* Scroll hint is only a hero affordance. */
.scroll-hint{opacity:1;transition:opacity .58s cubic-bezier(.22,1,.36,1),transform .58s cubic-bezier(.22,1,.36,1)}
.scroll-hint.is-hidden{opacity:0!important;transform:translate(-50%,18px)!important;visibility:hidden;transition:opacity .58s cubic-bezier(.22,1,.36,1),transform .58s cubic-bezier(.22,1,.36,1),visibility 0s linear .58s}

@media(max-width:900px){
  .showcase-scene{min-height:365px;perspective-origin:58% 70%}
  .shot-main{transform:rotateX(-6deg) rotateY(13deg) rotateZ(-.4deg) translate3d(-4px,6px,24px)}
  .shot-backplane{transform:rotateX(-6deg) rotateY(13deg) rotateZ(-.4deg) translate3d(12px,14px,-25px)}
  .download-grid{grid-template-columns:1fr}
  .download-primary,.download-help{min-height:0}
  .footer-grid{padding:30px;grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .showcase-scene{min-height:250px}
  .showcase-caption{display:none}
  .footer-grid{grid-template-columns:1fr;padding:26px}
  .ref-tile{height:auto;min-height:112px}
}
@media(prefers-reduced-motion:reduce){
  .choice-card.liquid-panel,.referral.liquid-panel,.ref-panel.liquid-panel,.download-primary.liquid-panel,.download-help.liquid-panel,.document.liquid-panel{animation:none!important}
  .feature,.step,.ref-tile{transform:none!important}
}



/* ==========================================================================
   V8 CSS-INTEGRITY PASS
   This block is intentionally small. V6/V7 rules above now parse normally.
   ========================================================================== */
html{background:#090312}
body[data-site-build="v8"]{background:#090312}

/* More legible liquid edge and specular sweep without adding ambient light circles. */
.liquid-panel{
  border-color:rgba(242,226,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 -1px 0 rgba(174,82,245,.16),
    0 30px 86px rgba(0,0,0,.26),
    0 0 32px rgba(176,38,255,.12);
}
.liquid-panel::after{
  mix-blend-mode:screen;
}

/* The referral and CTA panels use the same geometry/material rhythm. */
.ref-panel,.choice-card,.referral{border-radius:28px}
.ref-panel{max-width:930px;margin-inline:auto}
.ref-actions .btn{display:inline-flex;align-items:center;justify-content:center}

/* Keep document navigation separate from the document body at every width. */
.doc-nav,.doc-nav-static{position:relative!important;top:auto!important;z-index:1!important}
.document{position:relative;z-index:0}

/* Footer feels like one deliberate panel while preserving the existing background. */
.footer-grid{align-items:start}
.footer-brand p{max-width:330px}

/* The hero hint becomes fully removed from hit-testing after its fade. */
.scroll-hint.is-hidden{pointer-events:none!important}


/* ==========================================================================
   V9 — visible liquid glass, stable referral layout, calmer particles UI pass
   ========================================================================== */
body[data-site-build="v10"]{background:#090312}

/* Liquid glass is intentionally transparent enough for the particle network to remain visible behind it. */
.liquid-panel{
  --glass-x:50%;
  --glass-y:12%;
  background:
    linear-gradient(160deg,rgba(255,255,255,.105) 0%,rgba(255,255,255,.026) 23%,rgba(175,86,225,.028) 48%,rgba(7,2,14,.30) 76%,rgba(255,255,255,.025) 100%),
    rgba(15,5,27,.31)!important;
  border:1px solid rgba(242,226,255,.20)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.42) contrast(1.04)!important;
  backdrop-filter:blur(26px) saturate(1.42) contrast(1.04)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(172,74,235,.16),
    inset 1px 0 0 rgba(255,255,255,.06),
    0 26px 76px rgba(0,0,0,.23),
    0 0 30px rgba(176,38,255,.09)!important;
}
.liquid-panel::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(118deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.065) 11%,transparent 29%,transparent 64%,rgba(220,174,255,.045) 84%,rgba(255,255,255,.13) 100%);
  opacity:.92!important;
}
.liquid-panel::after{
  content:"";
  position:absolute;
  inset:-32%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at var(--glass-x) var(--glass-y),rgba(255,255,255,.32) 0%,rgba(238,210,255,.13) 9%,rgba(183,80,244,.055) 20%,transparent 37%);
  mix-blend-mode:screen;
  filter:blur(9px);
  opacity:.45;
  transition:opacity .5s ease,transform .75s cubic-bezier(.22,1,.36,1);
}
.liquid-panel.has-glass-light::after{opacity:1;transform:scale(1.04)}

/* Main page: enough premium material to be noticeable without making every card translucent. */
.about-card.liquid-panel,.choice-card.liquid-panel,.referral.liquid-panel,
.ref-panel.liquid-panel,.download-primary.liquid-panel,.download-help.liquid-panel,
.document.liquid-panel,.modal.liquid-panel,.footer-grid.liquid-panel{
  animation:glassPulseV9 8.5s ease-in-out infinite;
}
@keyframes glassPulseV9{
  0%,100%{border-color:rgba(242,226,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.21),inset 0 -1px 0 rgba(172,74,235,.13),0 26px 76px rgba(0,0,0,.22),0 0 23px rgba(176,38,255,.07)}
  50%{border-color:rgba(242,226,255,.23);box-shadow:inset 0 1px 0 rgba(255,255,255,.27),inset 0 -1px 0 rgba(198,92,255,.19),0 28px 82px rgba(0,0,0,.24),0 0 36px rgba(176,38,255,.12)}
}

/* Feature cards stay more restrained but gain a clear glass lip. */
.feature,.step,.ref-surface,.mini-stat{
  background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.015)),rgba(15,5,27,.42)!important;
  border-color:rgba(255,255,255,.085)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 16px 38px rgba(0,0,0,.10)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
}

/* Referral geometry: no oversized empty bottom area, same rhythm across all sections. */
.ref-main-section{padding-top:44px;padding-bottom:72px}
.ref-layout{max-width:930px}
.ref-panel{min-height:0!important;padding:30px!important}
.ref-overview{gap:12px}
.ref-tile{height:auto!important;min-height:116px!important}
.ref-tile-condition{min-height:100px!important}
.ref-code-zone{margin-top:12px;padding:20px}
.ref-actions{margin-top:20px;gap:10px;justify-content:center}
.ref-actions .btn{min-width:176px}
.ref-code-heading{align-items:center}

/* Rules begin quickly, nav never floats over text. */
body[data-page="rules"] .page-hero{padding-bottom:26px}
body[data-page="rules"] .section-tight{padding-top:18px}
body[data-page="rules"] .doc-shell{gap:14px}
body[data-page="rules"] .document{padding-top:34px}
.doc-nav,.doc-nav-static{position:relative!important;top:auto!important;z-index:1!important;margin-bottom:0!important}
.rules-document{opacity:1!important;transform:none!important}

/* Age form: centered header, more breathing room, form itself remains easy to scan. */
.age-confirm-modal{
  width:min(100%,540px)!important;
  padding:46px 38px 34px!important;
  text-align:center;
}
.age-confirm-modal .badge{margin-inline:auto}
.age-confirm-modal h3{margin:15px 0 13px!important;font-size:29px!important;line-height:1.12}
.age-confirm-modal>p{max-width:430px;margin:0 auto 27px!important;line-height:1.7}
.age-confirm-modal .age-input-label{text-align:left;margin:0 0 9px!important}
.age-confirm-modal .age-confirm-input{text-align:left}
.age-confirm-modal .age-message{text-align:left}
.age-confirm-modal .modal-actions{justify-content:center;margin-top:20px}
.age-confirm-modal .modal-actions .btn{min-width:0}
.age-confirm-modal .modal-close{top:15px;right:15px}

/* Ref info modal uses the same centered vertical rhythm. */
.ref-how{padding:40px 34px 32px!important}
.ref-how .badge{margin-inline:auto}
.ref-how h3{text-align:center;margin:14px 0 20px!important}
.ref-how ol{margin:0 auto;max-width:410px;padding-left:25px;line-height:1.8}
.ref-how .modal-actions{margin-top:25px}

/* Footer: clear premium surface while staying visually quiet. */
.footer{margin-top:64px}
.footer-grid.liquid-panel{padding:34px 38px;background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.014) 32%,rgba(8,3,15,.28) 78%),rgba(12,4,22,.30)!important}
.footer-bottom{margin-top:28px}

/* Stronger camera perspective: slightly from the side and from below. */
.showcase-scene{perspective:980px;perspective-origin:42% 82%;min-height:485px}
.shot-main{
  transform-origin:46% 76%;
  transform:rotateX(calc(10deg + var(--tilt-x))) rotateY(calc(-22deg + var(--tilt-y))) rotateZ(.3deg) translate3d(3px,11px,46px)!important;
  box-shadow:-28px 38px 92px rgba(0,0,0,.58),2px 0 0 rgba(255,255,255,.055),0 0 38px rgba(176,38,255,.16)!important;
}
.shot-backplane{
  transform-origin:46% 76%;
  transform:rotateX(calc(10deg + var(--tilt-x))) rotateY(calc(-22deg + var(--tilt-y))) rotateZ(.3deg) translate3d(-18px,18px,-38px)!important;
}
.shot-floor-shadow{left:7%;right:20%;bottom:1%;height:25%;transform:rotateX(76deg) rotateZ(3deg) translateZ(-82px)!important}

/* The hint disappears after even a small deliberate scroll. */
.scroll-hint{opacity:1;visibility:visible;transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s}
.scroll-hint.is-hidden{opacity:0!important;transform:translate(-50%,16px)!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1),visibility 0s linear .55s!important}

@media(max-width:900px){
  .age-confirm-modal{padding:42px 30px 30px!important}
  .showcase-scene{min-height:360px;perspective-origin:46% 78%}
  .shot-main{transform:rotateX(8deg) rotateY(-15deg) translate3d(2px,8px,30px)!important}
  .shot-backplane{transform:rotateX(8deg) rotateY(-15deg) translate3d(-11px,13px,-26px)!important}
}
@media(max-width:620px){
  .age-confirm-modal{padding:40px 22px 26px!important;text-align:center}
  .age-confirm-modal h3{font-size:26px!important}
  .age-confirm-modal .modal-actions{flex-direction:column}
  .showcase-scene{min-height:250px}
  .ref-panel{padding:20px!important}
}
@media(prefers-reduced-motion:reduce){
  .about-card.liquid-panel,.choice-card.liquid-panel,.referral.liquid-panel,.ref-panel.liquid-panel,.download-primary.liquid-panel,.download-help.liquid-panel,.document.liquid-panel,.modal.liquid-panel,.footer-grid.liquid-panel{animation:none!important}
}


/* ==========================================================================
   V10 - GLASS CLARITY / REFERRAL ALIGNMENT
   ========================================================================== */

/* Base glass must remain transparent enough to read the live particle mesh through it. */
.glass{
  background:
    linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.012) 18%,rgba(255,255,255,.006) 58%),
    rgba(12,4,22,.31)!important;
  border-color:rgba(255,255,255,.105)!important;
  backdrop-filter:blur(8px) saturate(1.18) brightness(1.03)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.18) brightness(1.03)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 0 0 1px rgba(176,38,255,.018),
    0 18px 52px rgba(0,0,0,.18),
    0 0 24px rgba(176,38,255,.055)!important;
}
.glass::before{
  opacity:.42!important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 22%)!important;
}

/* Primary liquid panels: a clear pane with an inner rim and restrained top reflection. */
.liquid-panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.070),rgba(255,255,255,.014) 15%,rgba(255,255,255,.006) 44%),
    linear-gradient(135deg,rgba(76,28,108,.075),rgba(255,16,122,.020) 55%,transparent 78%),
    rgba(10,3,19,.22)!important;
  border:1px solid rgba(255,255,255,.135)!important;
  backdrop-filter:blur(10px) saturate(1.22) brightness(1.045)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.22) brightness(1.045)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.155),
    inset 1px 0 0 rgba(255,255,255,.030),
    inset 0 -1px 0 rgba(176,38,255,.065),
    0 24px 66px rgba(0,0,0,.20),
    0 0 28px rgba(176,38,255,.055)!important;
}
.liquid-panel > *{position:relative;z-index:2}
.liquid-panel::before{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  inset:1px;
  border-radius:inherit;
  background:
    linear-gradient(106deg,rgba(255,255,255,.115) 0%,rgba(255,255,255,.045) 10%,transparent 27%),
    linear-gradient(180deg,rgba(255,255,255,.075),transparent 19%);
  opacity:.62!important;
}
.liquid-panel::after{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  top:0;
  left:9%;
  right:9%;
  height:1px;
  inset-block-end:auto;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45) 28%,rgba(220,177,255,.52) 50%,rgba(255,255,255,.24) 72%,transparent);
  box-shadow:0 1px 14px rgba(204,132,255,.12);
  opacity:.70!important;
  transform:none!important;
  filter:none!important;
  transition:opacity .35s ease!important;
}
.liquid-panel.has-glass-light::after{opacity:.70!important;transform:none!important}
.liquid-panel:hover{
  border-color:rgba(255,255,255,.17)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(176,38,255,.075),
    0 27px 72px rgba(0,0,0,.21),
    0 0 30px rgba(176,38,255,.07)!important;
}

/* Keep small informational cards transparent too, but calmer than hero panels. */
.feature.glass,.step.glass,.mini-stat,.ref-surface{
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),
    rgba(13,5,23,.28)!important;
  border-color:rgba(255,255,255,.085)!important;
  backdrop-filter:blur(6px) saturate(1.12)!important;
  -webkit-backdrop-filter:blur(6px) saturate(1.12)!important;
}
.feature:hover,.step:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(196,122,255,.17)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 20px 44px rgba(0,0,0,.15),0 0 20px rgba(176,38,255,.05)!important;
}

/* Referral buttons are one geometrically centered group: same columns, same height. */
.ref-actions{
  width:min(100%,720px)!important;
  margin:22px auto 0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:10px!important;
}
.ref-actions .btn{
  width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  height:54px!important;
  margin:0!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.15!important;
}

/* The how-it-works dialog has a centered header, while instructions stay easy to scan. */
.ref-how{width:min(100%,520px)!important;text-align:center!important;padding:36px 34px 32px!important}
.ref-how .badge{margin:0 auto 15px!important}
.ref-how h3{text-align:center!important;margin:0 0 18px!important}
.ref-how ol{
  text-align:left!important;
  margin:0 auto!important;
  padding-left:28px!important;
  max-width:420px!important;
  line-height:1.82!important;
}
.ref-how .modal-actions{justify-content:center!important;margin-top:26px!important}
.ref-how .modal-actions .btn{min-height:52px!important}

/* Footer is a transparent pane, not a solid purple plate. */
.footer-grid.liquid-panel{
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008) 30%),
    rgba(9,3,18,.19)!important;
  backdrop-filter:blur(9px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(9px) saturate(1.15)!important;
}

@media(max-width:760px){
  .ref-actions{grid-template-columns:1fr!important;width:100%!important}
  .ref-actions .btn{height:auto!important;min-height:52px!important}
}

.liquid-panel{animation:none!important}


/* ==========================================================================\n   V11 PUBLIC SITE / REFERRALS / SEO SUPPORT\n   ========================================================================== */
.age-confirm-modal{padding-top:46px!important}
.age-confirm-modal .badge{margin-top:0!important}
.ref-code-heading>div{width:100%}
.ref-code-state{margin:8px 0 0!important;color:#8f8599!important;font-size:12px!important;line-height:1.55!important;text-align:left!important}
.ref-link-row{margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.065);background:rgba(255,255,255,.018);display:flex;align-items:center;gap:14px}
.ref-link-row[hidden]{display:none!important}
.ref-link-row span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#756c80;font-size:11px}
.ref-link-action{border:0;background:none;color:#dc91ff;font-weight:750;cursor:pointer;padding:5px 0;white-space:nowrap}
.ref-link-action:hover{color:#ff69ae;text-shadow:0 0 12px rgba(176,38,255,.22)}
.ref-empty-hint{margin-top:13px;padding:15px 17px;border-radius:15px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.018);display:grid;gap:5px}
.ref-empty-hint[hidden]{display:none!important}
.ref-empty-hint strong{font-size:12px;color:#e6ddea}
.ref-empty-hint span{font-size:12px;color:#8f8599;line-height:1.55}
.btn:disabled,.btn[disabled]{opacity:.46;cursor:not-allowed;filter:saturate(.35);transform:none!important;box-shadow:none!important}
:focus-visible{outline:2px solid rgba(224,126,255,.78);outline-offset:3px}
@media(max-width:620px){.ref-link-row{align-items:flex-start;flex-direction:column}.ref-link-row span{width:100%}.ref-link-action{white-space:normal;text-align:left}}


/* ==========================================================================
   V12 — seamless internal navigation
   The particle canvas stays mounted while only <main> changes.
   ========================================================================== */

main{
  position:relative;
  z-index:2;
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
  transition:
    opacity .28s cubic-bezier(.22,1,.36,1),
    transform .38s cubic-bezier(.22,1,.36,1),
    filter .30s ease;
  will-change:opacity,transform,filter;
}
main.tw-page-leave{
  opacity:0;
  transform:translateY(9px);
  filter:blur(2px);
  pointer-events:none;
}
main.tw-page-enter{
  animation:twPageEnter .48s cubic-bezier(.22,1,.36,1) both;
}
@keyframes twPageEnter{
  from{
    opacity:0;
    transform:translateY(13px);
    filter:blur(3px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}
html.tw-navigating{
  cursor:progress;
}
html.tw-navigating .header{
  pointer-events:none;
}
html.tw-navigating #tw-particles{
  /* Explicitly keep the living background untouched while content changes. */
  opacity:1;
}
.nav a.tw-active{
  color:#fff;
  text-shadow:0 0 12px rgba(176,38,255,.55);
}
.nav a.tw-active:after{
  width:100%;
}
@media(prefers-reduced-motion:reduce){
  main,
  main.tw-page-enter{
    animation:none!important;
    transition:none!important;
    filter:none!important;
    transform:none!important;
  }
}


/* V13: referral how-to modal has no redundant X button. */
.ref-how{
  padding-top:34px;
}
.ref-how > .badge{
  margin-top:0;
}


/* ==========================================================================
   V14 — referral rules navigation reliability
   Rules links are ordinary same-origin links handled by the shared seamless
   navigator. No second navigation handler is layered on top.
   ========================================================================== */


/* ==========================================================================
   V16 — cross-document continuity for real HTTP errors.
   Same-origin Chromium/Yandex browsers cross-fade whole documents while the
   particle state is restored from sessionStorage on the next page.
   ========================================================================== */
@view-transition{
  navigation:auto;
}
#tw-particles{
  view-transition-name:twinkle-particles;
}
.header{
  view-transition-name:twinkle-header;
}
::view-transition-group(root){
  animation-duration:.26s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-group(twinkle-particles){
  animation-duration:.18s;
  animation-timing-function:linear;
}
::view-transition-old(root){
  animation:tw-doc-old .26s ease both;
}
::view-transition-new(root){
  animation:tw-doc-new .30s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tw-doc-old{
  to{opacity:.86;filter:blur(1.5px)}
}
@keyframes tw-doc-new{
  from{opacity:.82;filter:blur(1.5px)}
  to{opacity:1;filter:none}
}


/* ==========================================================================
   V17 — real TWINKLE Launcher screenshot slider (user-provided captures only)
   ========================================================================== */
.launcher-slider{
  --slider-px:0deg;
  --slider-py:0deg;
  position:relative;
  width:min(100%,820px);
  min-height:455px;
  display:grid;
  place-items:center;
  perspective:1450px;
  transform-style:preserve-3d;
  isolation:isolate;
}
.launcher-slides{
  position:relative;
  width:100%;
  aspect-ratio:1.895/1;
  transform-style:preserve-3d;
}
.launcher-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.105);
  opacity:0;
  filter:blur(5px) brightness(.84);
  pointer-events:none;
  will-change:opacity,transform,filter;
  transition:
    opacity 1.05s cubic-bezier(.22,1,.36,1),
    filter 1.05s ease,
    transform 1.20s cubic-bezier(.22,1,.36,1),
    box-shadow .8s ease;
  box-shadow:-26px 34px 88px rgba(0,0,0,.52),0 0 30px rgba(176,38,255,.14);
}
.launcher-slide.is-active{
  opacity:1;
  filter:blur(0) brightness(1);
  z-index:3;
  pointer-events:auto;
  box-shadow:-31px 38px 98px rgba(0,0,0,.56),0 0 38px rgba(176,38,255,.20);
}
.launcher-slide.is-leaving{
  opacity:0;
  filter:blur(7px) brightness(.78);
  z-index:2;
}
.launcher-slide.angle-1{transform:rotateX(calc(-7deg + var(--slider-py))) rotateY(calc(18deg + var(--slider-px))) translate3d(-1.5%,1.8%,30px) scale(.94)}
.launcher-slide.angle-1.is-active{transform:rotateX(calc(-7deg + var(--slider-py))) rotateY(calc(18deg + var(--slider-px))) translate3d(-.5%,0,42px) scale(.965)}
.launcher-slide.angle-2{transform:rotateX(calc(-5deg + var(--slider-py))) rotateY(calc(-16deg + var(--slider-px))) translate3d(1.4%,2%,30px) scale(.94)}
.launcher-slide.angle-2.is-active{transform:rotateX(calc(-5deg + var(--slider-py))) rotateY(calc(-16deg + var(--slider-px))) translate3d(.6%,0,42px) scale(.965)}
.launcher-slide.angle-3{transform:rotateX(calc(-9deg + var(--slider-py))) rotateY(calc(12deg + var(--slider-px))) translate3d(-1%,2%,30px) scale(.94)}
.launcher-slide.angle-3.is-active{transform:rotateX(calc(-9deg + var(--slider-py))) rotateY(calc(12deg + var(--slider-px))) translate3d(0,0,42px) scale(.965)}
.launcher-slide.angle-4{transform:rotateX(calc(-4deg + var(--slider-py))) rotateY(calc(-13deg + var(--slider-px))) translate3d(1%,2%,30px) scale(.94)}
.launcher-slide.angle-4.is-active{transform:rotateX(calc(-4deg + var(--slider-py))) rotateY(calc(-13deg + var(--slider-px))) translate3d(0,0,42px) scale(.965)}
.launcher-slide.angle-5{transform:rotateX(calc(-8deg + var(--slider-py))) rotateY(calc(15deg + var(--slider-px))) translate3d(-1%,2%,30px) scale(.94)}
.launcher-slide.angle-5.is-active{transform:rotateX(calc(-8deg + var(--slider-py))) rotateY(calc(15deg + var(--slider-px))) translate3d(0,0,42px) scale(.965)}
.slider-backplane{
  position:absolute;
  inset:11% 7% 10% 8%;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(17,5,30,.18);
  backdrop-filter:blur(15px);
  transform:rotateX(-4deg) rotateY(7deg) translateZ(-30px);
  box-shadow:0 30px 90px rgba(0,0,0,.25);
}
.slider-floor-shadow{
  position:absolute;
  left:10%;right:6%;bottom:3%;height:24%;
  border-radius:50%;
  background:rgba(0,0,0,.5);
  filter:blur(30px);
  opacity:.72;
  transform:rotateX(72deg) translateZ(-60px);
}
@media(max-width:900px){
  .launcher-slider{min-height:370px}
  .launcher-slide.angle-1,.launcher-slide.angle-1.is-active{transform:rotateX(-5deg) rotateY(11deg) scale(.96)}
  .launcher-slide.angle-2,.launcher-slide.angle-2.is-active{transform:rotateX(-4deg) rotateY(-10deg) scale(.96)}
  .launcher-slide.angle-3,.launcher-slide.angle-3.is-active{transform:rotateX(-6deg) rotateY(9deg) scale(.96)}
  .launcher-slide.angle-4,.launcher-slide.angle-4.is-active{transform:rotateX(-4deg) rotateY(-9deg) scale(.96)}
  .launcher-slide.angle-5,.launcher-slide.angle-5.is-active{transform:rotateX(-5deg) rotateY(10deg) scale(.96)}
}
@media(max-width:620px){
  .launcher-slider{min-height:245px}
  .launcher-slide{border-radius:15px}
  .slider-backplane{inset:13% 5% 13% 5%;border-radius:20px}
}
@media(prefers-reduced-motion:reduce){
  .launcher-slide{transition:none!important}
}

/* Website 19: visible keyboard focus, readable muted text and resilient small screens. */
.skip-link{position:fixed;top:12px;left:16px;z-index:10000;padding:14px 20px;border-radius:12px;background:#f5efff;color:#190c2c;font-weight:700;transform:translateY(-180%)}
.skip-link:focus{transform:none}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid #d4b5ff;outline-offset:4px}
.brand-mark img{display:block;object-fit:contain}
.footer-bottom,.footer-brand p,.footer h4,.info-row>span{color:#bfb4cb}
.hero-sub,.section-copy{color:#c8bed2}
.hero-logo{aspect-ratio:1;object-fit:contain}
.footer-brand img{aspect-ratio:1;object-fit:contain}
.footer a{overflow-wrap:anywhere}
.modal p,.modal li{line-height:1.75}
.doc-shell{grid-template-columns:minmax(0,1fr)}
.doc-shell>*{min-width:0;max-width:100%}
.document{overflow-wrap:anywhere}
.doc-nav{flex-wrap:wrap;white-space:normal}
.page-hero h1{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:480px){.footer-bottom{gap:14px;line-height:1.7}.hero-proof{line-height:1.6}.btn{white-space:normal;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.launcher-slide{transition:none}}