/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   DOSTT G&B — landing page design system.
   Neon pink / purple / blue on near-black, read off the client's own reference screens. Neon is a
   glow, a border and a button — never a large flat fill, because a big saturated panel stops reading
   as premium and starts reading as a pop-up ad.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#05050B; --bg2:#080817; --bg3:#0D0B19;
  --pink:#FF2B9A; --pink-l:#FF4DA6; --pink-d:#FF1F8F;
  --purple:#8E35FF; --purple-l:#A33BFF; --purple-d:#7B2CFF;
  --blue:#168CFF; --blue-l:#00BFFF;
  --gold:#FFC928; --gold-l:#FFD84D;
  --ink:#FFFFFF; --ink2:#F5F5FA; --sub:#C9C9D5;
  --muted:rgba(201,201,213,.56);
  --ok:#20E878; --bad:#FF4267;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.055);
  --card:rgba(255,255,255,.035);
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --disp:'Manrope','Inter',system-ui,sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* height:auto is load-bearing — every <img> carries width/height attributes, and without it the
   browser caps the width and keeps the attribute height, squashing the art. */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
@media(min-width:900px){.wrap{padding:0 28px}}

/* ── the ambient ground ─────────────────────────────────────────────────────────────────────────── */
.glow{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 42% at 18% 8%,rgba(255,43,154,.20),transparent 64%),
    radial-gradient(52% 40% at 86% 22%,rgba(142,53,255,.20),transparent 66%),
    radial-gradient(50% 38% at 60% 92%,rgba(22,140,255,.14),transparent 68%),
    linear-gradient(180deg,#080817 0%,#05050B 46%,#0D0B19 100%)}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* floating hearts, decorative, off on small screens and for reduced motion */
.hearts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hearts i{position:absolute;display:block;width:16px;height:16px;opacity:.5;
  background:var(--pink);
  clip-path:path("M8 15S0 9.7 0 5a4.6 4.6 0 0 1 8-3 4.6 4.6 0 0 1 8 3c0 4.7-8 10-8 10z");
  animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(120%) scale(.7) rotate(0)}100%{transform:translateY(-160%) scale(1.15) rotate(28deg)}}
@media(max-width:760px){.hearts{display:none}}

/* ── type ───────────────────────────────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.12;letter-spacing:-.022em;text-wrap:balance}
.eye{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pink-l);margin-bottom:14px}
.eye::before{content:"";width:22px;height:1.5px;background:linear-gradient(90deg,transparent,var(--pink))}
.h2{font-size:clamp(26px,4.2vw,42px)}
.lede{font-size:clamp(14px,1.6vw,16.5px);color:var(--sub);line-height:1.85;max-width:64ch}
.grad{background:linear-gradient(96deg,var(--pink) 0%,var(--purple) 52%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gold-grad{background:linear-gradient(180deg,#FFE9A8,var(--gold) 52%,#E8A80C);
  -webkit-background-clip:text;background-clip:text;color:transparent}

section{padding:60px 0}
@media(min-width:900px){section{padding:94px 0}}
.head{text-align:center;margin-bottom:42px}
.head .lede{margin:14px auto 0}

/* ── buttons ────────────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;
  border-radius:999px;font-weight:800;font-size:15px;border:0;cursor:pointer;font-family:var(--sans);
  position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.btn.grad-btn{background:linear-gradient(96deg,var(--pink),var(--purple));color:#fff;
  box-shadow:0 14px 38px -14px rgba(255,43,154,.85)}
.btn.grad-btn:hover{transform:translateY(-2px);box-shadow:0 20px 48px -14px rgba(255,43,154,.95)}
.btn.grad-btn::after{content:"";position:absolute;top:0;bottom:0;width:42%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  animation:sheen 3.8s ease-in-out infinite}
@keyframes sheen{0%,62%{left:-60%}100%{left:130%}}
.btn.ghost{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.sm{height:44px;padding:0 20px;font-size:13.5px}
/* the store badges, as drawn */
.store{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px;border-radius:12px;
  background:#000;border:1px solid var(--line);transition:border-color .2s,transform .2s}
.store:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.store b{display:block;font-size:13.5px;font-weight:700;line-height:1.15}
.store span{display:block;font-size:9.5px;color:var(--muted);letter-spacing:.04em}

/* ── the card every panel is cut from ───────────────────────────────────────────────────────────── */
.card{position:relative;border-radius:18px;padding:22px;background:var(--card);
  border:1px solid var(--line);backdrop-filter:blur(10px);
  box-shadow:0 24px 60px -44px #000;transition:transform .26s,border-color .26s,box-shadow .26s}
.card:hover{transform:translateY(-4px);border-color:rgba(255,43,154,.4);
  box-shadow:0 30px 70px -40px rgba(255,43,154,.34)}
.plate{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex-shrink:0;margin-bottom:15px}
.plate.pink{background:linear-gradient(150deg,rgba(255,43,154,.28),rgba(255,43,154,.08));border:1px solid rgba(255,43,154,.34)}
.plate.purple{background:linear-gradient(150deg,rgba(142,53,255,.28),rgba(142,53,255,.08));border:1px solid rgba(142,53,255,.34)}
.plate.blue{background:linear-gradient(150deg,rgba(22,140,255,.28),rgba(22,140,255,.08));border:1px solid rgba(22,140,255,.34)}
.plate.gold{background:linear-gradient(150deg,rgba(255,201,40,.28),rgba(255,201,40,.08));border:1px solid rgba(255,201,40,.34)}

/* ══ HEADER ═════════════════════════════════════════════════════════════════════════════════════ */
.hd{position:sticky;top:0;z-index:80;backdrop-filter:blur(16px);background:rgba(5,5,11,.72);
  border-bottom:1px solid transparent;transition:all .28s}
.hd.on{background:rgba(5,5,11,.95);border-bottom-color:var(--line)}
.hd-in{display:flex;align-items:center;gap:16px;height:74px}
.hd-logo img{height:46px;width:auto}
.hd-nav{display:none;margin-left:auto}
@media(min-width:1000px){.hd-nav{display:flex;align-items:center;gap:28px}}
.hd-nav a{font-size:14px;font-weight:600;color:var(--sub);position:relative;padding:6px 0;transition:color .2s}
.hd-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:linear-gradient(90deg,var(--pink),var(--purple));transition:right .26s}
.hd-nav a:hover,.hd-nav a.on{color:var(--ink)}
.hd-nav a:hover::after,.hd-nav a.on::after{right:0}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:10px}
@media(min-width:1000px){.hd-r{margin-left:24px}}
.burger{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line);background:rgba(255,255,255,.05)}
@media(min-width:1000px){.burger{display:none}}
.burger i{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);border-radius:2px}
.burger i::before{top:-6px}.burger i::after{top:6px}
.drawer{position:fixed;inset:0;z-index:90;background:rgba(5,5,11,.97);backdrop-filter:blur(10px);
  display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s}
.drawer.open{opacity:1;pointer-events:auto}
.drawer nav{display:grid;gap:4px;text-align:center}
.drawer a{font-family:var(--disp);font-size:26px;font-weight:700;padding:12px 30px}
.drawer a:hover{color:var(--pink-l)}
.drawer .x{position:absolute;top:22px;right:22px;width:46px;height:46px;border-radius:999px;
  border:1px solid var(--line);display:grid;place-items:center;font-size:26px;color:var(--ink);background:none}

/* ══ HERO ═══════════════════════════════════════════════════════════════════════════════════════ */
.hero{position:relative;padding:40px 0 64px;overflow:hidden}
@media(min-width:900px){.hero{padding:66px 0 92px}}
.hero-g{display:grid;grid-template-columns:1fr;gap:36px;align-items:center;position:relative;z-index:1}
@media(min-width:980px){.hero-g{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:44px}}
.hero h1{font-size:clamp(32px,6vw,58px)}
.hero .sub{font-size:clamp(15px,2vw,19px);font-weight:600;color:var(--ink2);margin-top:14px}
.hero .lede{margin-top:14px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-stores{display:flex;gap:11px;flex-wrap:wrap;margin-top:14px}
.hero-art{position:relative}
.hero-art img{border-radius:22px;box-shadow:0 34px 90px -46px #000}
.float{animation:float 6.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* ── the 4 feature strip under the hero ─────────────────────────────────────────────────────────── */
.f4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:900px){.f4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}
.f4 .card{text-align:center;padding:22px 16px}
.f4 .plate{margin:0 auto 14px}
.f4 b{display:block;font-family:var(--disp);font-size:15px;font-weight:800;margin-bottom:6px}
.f4 span{display:block;font-size:12.5px;color:var(--sub);line-height:1.7}

/* ── two-column blocks ──────────────────────────────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
@media(min-width:980px){.g2{grid-template-columns:1fr 1fr;gap:46px}}
.tick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px}
.tick .i{display:flex;gap:11px;align-items:flex-start}
.tick b{display:block;font-size:14px;font-weight:700}
.tick span{display:block;font-size:12px;color:var(--sub);margin-top:2px}

/* ── steps ──────────────────────────────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{text-align:center;padding:26px 20px}
.step .n{width:48px;height:48px;margin:0 auto 15px;border-radius:999px;display:grid;place-items:center;
  font-family:var(--disp);font-size:18px;font-weight:800;color:#fff;
  background:linear-gradient(140deg,var(--pink),var(--purple));
  box-shadow:0 12px 28px -12px rgba(255,43,154,.9)}
.step b{display:block;font-family:var(--disp);font-size:17px;margin-bottom:8px}
.step span{font-size:13px;color:var(--sub);line-height:1.75}

/* ── gifts row ──────────────────────────────────────────────────────────────────────────────────── */
.gifts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
@media(min-width:760px){.gifts{grid-template-columns:repeat(6,minmax(0,1fr))}}
.gift{text-align:center;padding:16px 10px;border-radius:16px;background:var(--card);border:1px solid var(--line);
  transition:transform .24s,border-color .24s}
.gift:hover{transform:translateY(-4px);border-color:rgba(255,201,40,.45)}
.gift .em{font-size:30px;line-height:1;margin-bottom:9px}
.gift b{display:block;font-size:12.5px;font-weight:700}
.gift span{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--gold-l);margin-top:5px;font-weight:700}

/* ── safety list ────────────────────────────────────────────────────────────────────────────────── */
.safe{list-style:none;display:grid;gap:2px}
.safe li{display:flex;gap:13px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.safe li:last-child{border-bottom:0}
.safe b{display:block;font-family:var(--disp);font-size:15px;font-weight:700}
.safe span{display:block;font-size:13px;color:var(--sub);margin-top:4px;line-height:1.7}

/* ── download panel ─────────────────────────────────────────────────────────────────────────────── */
.dl{border-radius:22px;padding:32px 24px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(140deg,rgba(255,43,154,.16),rgba(142,53,255,.14) 52%,rgba(22,140,255,.12));
  border:1px solid var(--line)}
@media(min-width:900px){.dl{padding:46px 40px;display:flex;align-items:center;justify-content:space-between;gap:34px;text-align:left}}
.dl h3{font-size:clamp(21px,2.6vw,30px)}
.dl p{font-size:13.5px;color:var(--sub);margin-top:9px;line-height:1.75}
.dl .acts{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px;justify-content:center}
@media(min-width:900px){.dl .acts{margin-top:0;flex-shrink:0;justify-content:flex-start}}

/* ── footer ─────────────────────────────────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(8,8,23,.5),rgba(5,5,11,.95));padding:52px 0 0}
.ft-g{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:820px){.ft-g{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px}}
footer h4{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--pink-l);margin-bottom:14px}
footer a,footer p{font-size:13.5px;color:var(--sub);line-height:2.05}
footer a:hover{color:var(--ink)}
.soc{display:flex;gap:10px;margin-top:16px}
.soc a{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);display:grid;place-items:center;transition:all .22s}
.soc a:hover{border-color:var(--pink);background:rgba(255,43,154,.14);transform:translateY(-2px)}
.ft-bar{border-top:1px solid var(--line-soft);margin-top:40px;padding:18px 0;text-align:center;font-size:12px;color:var(--muted)}

/* ── the 18+ line, which is not decoration ──────────────────────────────────────────────────────── */
.age{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  background:rgba(255,66,103,.1);border:1px solid rgba(255,66,103,.32);
  font-size:12px;font-weight:700;color:#FF7C96}

/* ── reveal ─────────────────────────────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .float,.hearts,.btn.grad-btn::after{animation:none}
  html{scroll-behavior:auto}
}