@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#f8f4ff; --muted:#a9a1b6; --bg:#09070e; --panel:#12101a; --line:rgba(255,255,255,.1); --pink:#fd3fa4; --violet:#8e5cff; --cyan:#56e8e0; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:'DM Sans',sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.site-header { position:absolute; z-index:5; top:0; left:0; width:100%; height:86px; padding:0 clamp(22px,5vw,80px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.09); }
.brand { font-family:'Manrope'; font-size:24px; font-weight:800; letter-spacing:-1.5px; }
.brand span { color:#fff; } .brand b { color:var(--pink); }
nav { display:flex; gap:38px; font-size:13px; color:#d0c9d8; }
nav a, footer a { transition:.2s; } nav a:hover, footer a:hover { color:var(--pink); }
.mini-cta { padding:10px 16px; border:1px solid rgba(255,255,255,.24); border-radius:999px; font-size:12px; }
.mini-cta span { color:var(--pink); margin-left:6px; }
.hero { position:relative; min-height:780px; height:100svh; display:flex; align-items:center; overflow:hidden; background:#090713; }
.hero-art { position:absolute; inset:0; background:url('assets/hero-anime.webp') 62% center/cover no-repeat; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,6,13,.98) 0%,rgba(7,6,13,.88) 32%,rgba(7,6,13,.24) 67%,rgba(7,6,13,.18)),linear-gradient(0deg,rgba(7,6,13,.65),transparent 35%); }
.hero-content { position:relative; z-index:1; width:min(700px,90%); margin-left:clamp(24px,8vw,128px); padding-top:60px; }
.eyebrow { margin:0 0 20px; color:#c1b7ce; font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow i { display:inline-block; width:6px; height:6px; margin-right:8px; background:var(--pink); border-radius:50%; box-shadow:0 0 12px var(--pink); }
h1,h2 { font-family:'Manrope'; letter-spacing:-.055em; line-height:.96; margin:0; }
h1 { font-size:clamp(60px,8.5vw,124px); font-weight:800; }
h1 em { color:transparent; -webkit-text-stroke:1px #f3c9e8; font-style:normal; text-shadow:0 0 40px rgba(253,63,164,.2); }
.hero-brand { font-size:clamp(64px,9vw,132px); letter-spacing:-.08em; }
.hero-brand span { color:var(--pink); text-shadow:0 0 40px rgba(253,63,164,.3); }
.hero-copy { max-width:540px; margin:28px 0 30px; color:#c6becd; font-size:17px; }
.hero-search { display:flex; width:min(680px,100%); min-height:66px; padding:7px; background:rgba(15,11,21,.88); border:1px solid rgba(255,255,255,.2); box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 35px rgba(142,92,255,.08); backdrop-filter:blur(12px); }
.hero-search:focus-within { border-color:rgba(253,63,164,.7); box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 0 3px rgba(253,63,164,.1); }
.hero-search input[type="search"] { min-width:0; flex:1; padding:0 18px; color:#fff; background:transparent; border:0; outline:0; font:500 15px 'DM Sans',sans-serif; }
.hero-search input::placeholder { color:#777080; }
.hero-search button { cursor:pointer; min-width:132px; padding:0 20px; color:#fff; background:linear-gradient(135deg,var(--pink),#ad38e8); border:0; font-weight:700; }
.hero-search button span { margin-left:15px; }
.popular-searches { display:flex; flex-wrap:wrap; align-items:center; gap:9px; max-width:700px; margin-top:18px; font-size:11px; }
.popular-searches>span { color:#777080; text-transform:uppercase; letter-spacing:.1em; }
.popular-searches a { padding:5px 10px; color:#c9c1d0; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:999px; transition:.2s; }
.popular-searches a:hover { color:#fff; border-color:rgba(253,63,164,.55); background:rgba(253,63,164,.12); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hero-actions { display:flex; align-items:center; gap:28px; }
.button { cursor:pointer; border:0; display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:52px; padding:0 24px; border-radius:2px; color:white; font-weight:700; font-size:13px; }
.button.primary { background:linear-gradient(135deg,var(--pink),#ad38e8); box-shadow:0 14px 40px rgba(218,46,164,.22); }
.button.primary:hover { filter:brightness(1.12); transform:translateY(-1px); }
.button.ghost { background:transparent; border:1px solid var(--line); }
.text-link { font-size:13px; color:#dcd6e2; } .play { display:inline-grid; place-items:center; width:32px; height:32px; margin-right:8px; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:var(--pink); font-size:9px; }
.trust-row { display:flex; gap:28px; margin-top:42px; color:#827a8e; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.hero-direct-cta { display:flex; align-items:center; justify-content:space-between; width:min(360px,100%); margin-top:30px; padding:15px 17px 15px 20px; color:#fff; background:linear-gradient(110deg,rgba(253,63,164,.92),rgba(154,54,222,.95)); border:1px solid rgba(255,255,255,.16); box-shadow:0 14px 40px rgba(218,46,164,.2); font:700 17px 'Manrope',sans-serif; text-transform:uppercase; letter-spacing:.03em; transition:.2s; }
.hero-direct-cta small { display:block; margin-bottom:1px; color:rgba(255,255,255,.68); font:600 9px 'DM Sans',sans-serif; letter-spacing:.14em; }
.hero-direct-cta i { display:grid; place-items:center; width:42px; height:42px; background:rgba(7,5,12,.2); border-radius:50%; font-style:normal; font-size:18px; }
.hero-direct-cta:hover { transform:translateY(-2px); filter:brightness(1.1); box-shadow:0 18px 48px rgba(218,46,164,.3); }
.scroll-cue { position:absolute; z-index:1; right:48px; bottom:45px; color:#80788a; font-size:10px; letter-spacing:.15em; text-transform:uppercase; writing-mode:vertical-rl; }
.scroll-cue span { margin-top:12px; color:var(--pink); }
.section { padding:110px clamp(24px,8vw,128px); }
.section-label { margin-bottom:55px; color:#625a6b; font-size:10px; text-transform:uppercase; letter-spacing:.24em; }
.discover { background:radial-gradient(circle at 75% 40%,rgba(253,63,164,.12),transparent 30%),#0b0910; }
.discover-grid { display:grid; grid-template-columns:minmax(280px,.8fr) 1.2fr; gap:9vw; align-items:center; }
.feature-image { position:relative; max-width:484px; border:1px solid var(--line); box-shadow:30px 30px 0 rgba(142,92,255,.06); overflow:hidden; }
.feature-image::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,6,12,.65),transparent 40%); pointer-events:none; }
.feature-image img { display:block; width:100%; height:auto; filter:saturate(.82) contrast(1.04); }
.feature-image span { position:absolute; z-index:1; left:22px; bottom:18px; color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; }
.discover-copy>p:not(.eyebrow):not(.legal-note) { max-width:650px; color:#aaa2b3; }
.keyword-cloud { display:flex; flex-wrap:wrap; gap:9px; margin:30px 0; }
.keyword-cloud span { padding:7px 12px; border:1px solid rgba(253,63,164,.24); border-radius:999px; color:#d7cfdd; background:rgba(253,63,164,.05); font-size:11px; }
.legal-note { max-width:650px; padding-left:18px; border-left:2px solid var(--pink); color:#777080; font-size:12px; }
.gallery { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:80px; }
.gallery-card { position:relative; height:390px; margin:0; overflow:hidden; background:#14101a; border:1px solid var(--line); }
.gallery-card:nth-child(2n) { transform:translateY(22px); }
.gallery-card img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .45s ease,filter .45s ease; }
.gallery-card::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,4,9,.9),transparent 40%); pointer-events:none; }
.gallery-card:hover img { transform:scale(1.04); filter:saturate(1.12); }
.gallery-card figcaption { position:absolute; z-index:1; left:16px; bottom:14px; color:#fff; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.intro { background:radial-gradient(circle at 15% 45%,rgba(111,41,153,.14),transparent 28%),#0c0a11; }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:end; }
h2 { font-size:clamp(44px,5.8vw,80px); }
h2 span { color:var(--pink); }
.intro-copy { max-width:580px; color:#aaa2b3; font-size:15px; }
.note { padding-left:18px; border-left:2px solid var(--pink); font-size:13px; }
.note b { color:#eee8f4; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:78px; background:var(--line); border:1px solid var(--line); }
.step-card { min-height:380px; padding:28px; background:#100e16; transition:.25s; }
.step-card:hover { background:#15111c; transform:translateY(-4px); }
.step-card.featured { background:linear-gradient(145deg,#1e1020,#13101c); }
.step-top { display:flex; justify-content:space-between; color:#625c69; font-size:11px; }
.step-top i { padding:4px 9px; border-radius:999px; background:rgba(253,63,164,.12); color:var(--pink); font-style:normal; }
.step-icon { margin:70px 0 28px; color:var(--pink); font-size:30px; }
.step-card h3 { margin:0 0 12px; font:700 20px 'Manrope'; }
.step-card p { color:#89818f; font-size:13px; }
.step-card a { display:inline-block; margin-top:18px; color:var(--pink); font-size:12px; }
.safety { background:#0a0810; }
.safety-panel { display:grid; grid-template-columns:.65fr 1.2fr 1.5fr; gap:7vw; align-items:center; padding:65px; background:linear-gradient(115deg,rgba(142,92,255,.08),transparent),#111019; border:1px solid var(--line); }
.shield { position:relative; color:var(--violet); font-size:150px; line-height:1; text-align:center; text-shadow:0 0 45px rgba(142,92,255,.3); }
.shield span { position:absolute; inset:0; display:grid; place-items:center; color:var(--pink); font-size:32px; }
.checklist { list-style:none; padding:0; margin:0; }
.checklist li { position:relative; padding:15px 0 15px 38px; border-bottom:1px solid var(--line); }
.checklist li::before { content:'✓'; position:absolute; left:0; color:var(--pink); }
.checklist b,.checklist span { display:block; } .checklist b { font-size:13px; } .checklist span { color:#837b8d; font-size:12px; }
.faq { background:#f3eff5; color:#15111a; }
.faq .eyebrow { color:#756d7b; }
.faq-head { display:grid; grid-template-columns:1.2fr 1fr; gap:10vw; align-items:end; margin-bottom:65px; }
.faq-head>p { color:#746c79; font-size:14px; }
.accordion { border-top:1px solid #cbc4cf; }
details { border-bottom:1px solid #cbc4cf; }
summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:60px 1fr 30px; align-items:center; padding:24px 0; font:700 18px 'Manrope'; }
summary::-webkit-details-marker { display:none; }
summary span { color:#a098a4; font:500 10px 'DM Sans'; }
summary i { position:relative; width:18px; height:18px; }
summary i::before,summary i::after { content:''; position:absolute; top:8px; left:0; width:16px; height:1px; background:#1c1720; transition:.2s; }
summary i::after { transform:rotate(90deg); } details[open] summary i::after { transform:rotate(0); }
details p { max-width:800px; margin:0 0 28px 60px; color:#68616c; font-size:14px; }
.closing { text-align:center; background:radial-gradient(circle at 50% 100%,rgba(253,63,164,.2),transparent 45%),#0b0810; }
.closing h2 { margin-bottom:40px; }
footer { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:25px; padding:38px clamp(24px,8vw,128px); border-top:1px solid var(--line); color:#777080; font-size:11px; }
footer>p { text-align:center; } footer>div { display:flex; justify-content:flex-end; gap:18px; } footer small { grid-column:1/-1; text-align:center; color:#514b59; }
@media (max-width:800px) {
  .site-header { height:70px; } nav { display:none; } .mini-cta { padding:8px 12px; }
  .hero { min-height:860px; height:auto; padding:90px 0 70px; } .hero-art { background-position:68% center; opacity:.64; } .hero-shade { background:linear-gradient(90deg,rgba(7,6,13,.96),rgba(7,6,13,.48)); }
  .hero-content { margin:auto 24px; padding-top:60px; } h1 { font-size:58px; } .hero-brand { font-size:64px; } .hero-copy { font-size:15px; }
  .trust-row { flex-wrap:wrap; gap:10px 20px; margin-top:28px; } .hero-direct-cta { margin-top:24px; } .scroll-cue { display:none; }
  .section { padding:80px 24px; } .discover-grid,.intro-grid,.faq-head { grid-template-columns:1fr; gap:45px; }
  .feature-image { max-width:380px; margin:auto; }
  .gallery { grid-template-columns:repeat(2,1fr); margin-top:55px; }
  .gallery-card { height:380px; } .gallery-card:nth-child(2n) { transform:none; }
  .steps { grid-template-columns:1fr; } .step-card { min-height:300px; } .step-icon { margin-top:45px; }
  .safety-panel { grid-template-columns:1fr; padding:34px 24px; } .shield { font-size:100px; }
  summary { grid-template-columns:36px 1fr 24px; font-size:15px; } details p { margin-left:36px; }
  footer { grid-template-columns:1fr; text-align:center; } footer>div { justify-content:center; } footer>p { margin:0; }
}
@media (max-width:480px) { .hero-brand { font-size:52px; } .hero-search { min-height:58px; } .hero-search button { min-width:58px; font-size:0; } .hero-search button span { margin:0; font-size:18px; } .gallery { grid-template-columns:1fr; } .gallery-card { height:480px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }