/* ---------------------------------------------------------
     DESIGN PLAN
     Color   bg #FAF8FF / surface #F1EDFB / ink #17151F / ink-muted #6B6480
             accent #FF3D77 (hot coral — "drop" energy, CTA)
             gold #B5790F light / #F5B942 dark (rarity marker only)
             dark:  bg #0B0A14 / surface #16141F / ink #F3F0FF / ink-muted #9A93B8
     Type    Display: Unbounded 800/900 — chunky, expressive, streetwear-poster energy
             Body:    Manrope 400–700 — clean humanist reading face
             Utility: Space Mono — SKU codes, prices, file specs, drop countdown
     Layout  Asymmetric hero (headline+CTA left / halo-swatch mosaic right),
             horizontal "shop rail" per category, numbered 3-step process
             (a real sequence: choose → pay → download), <details> FAQ.
     --------------------------------------------------------- */

  @import url('betuk.css');
:root{
    --bg: #FAF8FF;
    --surface: #FFFFFF;
    --surface-2: #F1EDFB;
    --ink: #17151F;
    --ink-muted: #6B6480;
    --ink-faint: #A79FC2;
    --border: #E4DEF5;
    --accent: #FF3D77;
    --accent-ink: #FFFFFF;
    --accent-soft: #FFE3ED;
    --gold: #B5790F;
    --gold-soft: #FBEBCB;
    --shadow: 220 40% 30%;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg: #0B0A14;
      --surface: #15131F;
      --surface-2: #1B1828;
      --ink: #F3F0FF;
      --ink-muted: #9A93B8;
      --ink-faint: #514C6B;
      --border: #2A2638;
      --accent: #FF4D82;
      --accent-ink: #1A0410;
      --accent-soft: #3A1526;
      --gold: #F5B942;
      --gold-soft: #332711;
    }
  }
  :root[data-theme="dark"]{
    --bg: #0B0A14;
    --surface: #15131F;
    --surface-2: #1B1828;
    --ink: #F3F0FF;
    --ink-muted: #9A93B8;
    --ink-faint: #514C6B;
    --border: #2A2638;
    --accent: #FF4D82;
    --accent-ink: #1A0410;
    --accent-soft: #3A1526;
    --gold: #F5B942;
    --gold-soft: #332711;
  }

  *{ box-sizing: border-box; }
  html{ text-size-adjust: 100%; }
  body{
    margin:0; background: var(--bg); color: var(--ink);
    font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; }
  ::selection{ background: var(--accent); color: var(--accent-ink); }

  .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

  h1,h2,h3{ font-family:'Unbounded', ui-sans-serif, sans-serif; text-wrap: balance; margin:0; letter-spacing: -0.01em; }
  .eyebrow{
    font-family:'Space Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--ink-muted); display:flex; align-items:center; gap:10px;
  }
  .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background: var(--accent); flex:none; }

  .mono{ font-family:'Space Mono', ui-monospace, monospace; }

  /* ---------- nav ---------- */
  nav{
    position: sticky; top:0; z-index: 20; background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
  }
  nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:68px; gap: 24px; }
  .logo{ font-family:'Unbounded'; font-weight:900; font-size: 19px; letter-spacing: -0.02em; display:flex; align-items:center; gap:8px; }
  .logo .ring{ width:16px; height:16px; border-radius:50%; background: conic-gradient(from 200deg, var(--accent), var(--gold), var(--accent)); flex:none; }
  .navlinks{ display:flex; gap: 28px; font-size: 14.5px; font-weight:600; color: var(--ink-muted); }
  .navlinks a{ text-decoration:none; }
  .navlinks a:hover{ color: var(--ink); }
  .navcta{ display:flex; align-items:center; gap:14px; }
  @media (max-width: 720px){ .navlinks{ display:none; } }

  .btn{
    font-family:'Manrope'; font-weight:700; font-size: 14.5px; border-radius: 8px; border: none;
    padding: 12px 20px; cursor: pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  }
  .btn-accent{ background: var(--accent); color: var(--accent-ink); }
  .btn-ghost{ background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
  .btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ---------- hero ---------- */
  .hero{ padding: clamp(48px, 7vw, 92px) 0 clamp(40px, 6vw, 72px); }
  .hero .wrap{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items:center; }
  @media (max-width: 860px){ .hero .wrap{ grid-template-columns: 1fr; } }

  .hero h1{ font-size: clamp(34px, 5.4vw, 60px); line-height: 1.03; font-weight:900; margin-top:16px; }
  .hero h1 em{ font-style:normal; color: var(--accent); }
  .hero p.lede{ font-size: 17px; line-height:1.6; color: var(--ink-muted); max-width: 46ch; margin-top:18px; }
  .hero-ctas{ display:flex; gap:12px; margin-top: 28px; flex-wrap:wrap; }

  .hero-stats{ display:flex; gap: 26px; margin-top: 34px; flex-wrap:wrap; }
  .hero-stats div{ display:flex; flex-direction:column; gap:2px; }
  .hero-stats .n{ font-family:'Space Mono'; font-weight:700; font-size: 19px; }
  .hero-stats .l{ font-size: 12.5px; color: var(--ink-muted); }

  /* halo mosaic */
  .mosaic{ position:relative; aspect-ratio: 1/1; display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  .halo{ position:relative; border-radius:50%; aspect-ratio:1/1; }
  .halo::before{
    content:""; position:absolute; inset:0; border-radius:50%;
    background: conic-gradient(from var(--ang,0deg), var(--c1), var(--c2), var(--c3), var(--c1));
  }
  .halo::after{
    content:""; position:absolute; inset: 16%; border-radius:50%; background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border);
  }
  .mosaic .halo:nth-child(1){ --c1:#FF3D77; --c2:#FFB6CE; --c3:#FF3D77; --ang: 20deg; align-self:end; }
  .mosaic .halo:nth-child(2){ --c1:#4C3B8A; --c2:#B5790F; --c3:#4C3B8A; --ang: 90deg; margin-top: 18%; }
  .mosaic .halo:nth-child(3){ --c1:#0FA37A; --c2:#DDEFC7; --c3:#0FA37A; --ang: 160deg; align-self:end; }
  .mosaic .halo:nth-child(4){ --c1:#F5B942; --c2:#FF3D77; --c3:#F5B942; --ang: 260deg; }
  .mosaic .halo:nth-child(5){ --c1:#17151F; --c2:#9A93B8; --c3:#17151F; --ang: 40deg; margin-top: 10%; }
  .mosaic .halo:nth-child(6){ --c1:#3A6FF7; --c2:#C8D8FF; --c3:#3A6FF7; --ang: 300deg; align-self:end; }
  .mosaic-tag{
    position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); background: var(--ink); color: var(--bg);
    font-family:'Space Mono'; font-size: 11.5px; padding: 7px 12px; border-radius: 999px; white-space:nowrap;
    box-shadow: 0 10px 30px -8px hsl(var(--shadow) / 0.45);
  }

  /* ---------- trust strip ---------- */
  .trust{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background: var(--surface-2); }
  .trust .wrap{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; padding: 22px clamp(20px,4vw,48px); }
  .trust-item{ display:flex; align-items:center; gap:10px; font-size: 13.5px; font-weight:600; color: var(--ink-muted); }
  .trust-item svg{ flex:none; color: var(--accent); }
  @media (max-width: 780px){ .trust .wrap{ grid-template-columns: repeat(2,1fr); } }

  /* ---------- sections ---------- */
  section{ padding: clamp(56px, 7vw, 96px) 0; }
  .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 24px; margin-bottom: 36px; flex-wrap:wrap; }
  .section-head h2{ font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; }
  .section-head p{ color: var(--ink-muted); font-size: 15px; max-width: 42ch; margin-top:8px; }

  .rail-scroll{ display:flex; gap: 18px; overflow-x:auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
  .rail-scroll::-webkit-scrollbar{ height:6px; }
  .rail-scroll::-webkit-scrollbar-thumb{ background: var(--border); border-radius:3px; }

  .card{
    flex: 0 0 240px; scroll-snap-align:start; background: var(--surface); border:1px solid var(--border);
    border-radius: 14px; padding: 18px; display:flex; flex-direction:column; gap: 14px;
  }
  .card .thumb{ aspect-ratio:1/1; border-radius:12px; background: var(--surface-2); position:relative; display:grid; place-items:center; overflow:hidden; }
  .card .thumb .halo{ width:64%; }
  .card .badge{
    position:absolute; top:10px; left:10px; font-family:'Space Mono'; font-size:10.5px; padding:4px 8px; border-radius:6px;
    background: var(--gold-soft); color: var(--gold); font-weight:700; letter-spacing:.03em;
  }
  .card h3{ font-family:'Manrope'; font-weight:800; font-size:15px; }
  .card .sku{ font-family:'Space Mono'; font-size: 11px; color: var(--ink-faint); }
  .card .row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
  .card .price{ font-family:'Space Mono'; font-weight:700; font-size:16px; }
  .card .cop{
    font-family:'Manrope'; font-weight:700; font-size:12.5px; background: var(--ink); color: var(--bg);
    border:none; border-radius:7px; padding:9px 13px; cursor:pointer;
  }

  /* generator preview */
  .gen{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items:center; background: var(--surface); border:1px solid var(--border); border-radius:18px; padding: clamp(20px,3vw,36px); }
  @media (max-width: 780px){ .gen{ grid-template-columns:1fr; } }
  .gen-preview{ aspect-ratio:1/1; border-radius:16px; background: var(--surface-2); display:grid; place-items:center; }
  .gen-preview .halo{ width: 56%; --c1: var(--accent); --c2: var(--gold); --c3: var(--accent); --ang: 30deg; }
  .swatch-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
  .swatch{ width:28px; height:28px; border-radius:50%; border:2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
  .gen-controls .field{ margin-bottom: 18px; }
  .gen-controls label{ font-family:'Space Mono'; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-muted); }

  /* how it works */
  .steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; counter-reset: step; }
  @media (max-width: 780px){ .steps{ grid-template-columns:1fr; } }
  .step{ position:relative; padding-top: 18px; border-top: 2px solid var(--border); }
  .step .num{ font-family:'Space Mono'; font-weight:700; color: var(--accent); font-size:13px; }
  .step h3{ font-size: 19px; margin-top:10px; font-weight:800; }
  .step p{ color: var(--ink-muted); font-size:14.5px; line-height:1.55; margin-top:8px; }

  /* drop banner */
  .drop{
    background: var(--ink); color: var(--bg); border-radius: 20px; padding: clamp(28px,4vw,44px);
    display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  }
  :root[data-theme="dark"] .drop, @media (prefers-color-scheme: dark){ }
  .drop-left h2{ color: var(--bg); font-size: clamp(22px,3vw,30px); }
  .drop-left p{ color: color-mix(in oklab, var(--bg) 65%, transparent); margin-top:8px; font-size:14.5px; max-width:44ch; }
  .drop-timer{ display:flex; gap:10px; }
  .drop-timer div{ background: color-mix(in oklab, var(--bg) 12%, transparent); border-radius:10px; padding:12px 14px; text-align:center; min-width:64px; }
  .drop-timer .v{ font-family:'Space Mono'; font-weight:700; font-size:22px; }
  .drop-timer .l{ font-size:10.5px; opacity:.6; margin-top:2px; }

  /* social proof (aggregate only — no fabricated named testimonials) */
  .proof{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; }
  @media (max-width: 860px){ .proof{ grid-template-columns: repeat(2,1fr); } }
  .proof-tile{ background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; }
  .proof-tile .v{ font-family:'Space Mono'; font-weight:700; font-size: 26px; }
  .proof-tile .l{ color: var(--ink-muted); font-size:13px; margin-top:6px; }

  /* bundle */
  .bundle{ display:flex; gap:28px; align-items:center; background: var(--surface-2); border-radius:18px; padding: clamp(22px,3vw,34px); flex-wrap:wrap; }
  .bundle-halos{ display:flex; }
  .bundle-halos .halo{ width:52px; margin-left:-16px; border: 3px solid var(--surface-2); }
  .bundle-halos .halo:first-child{ margin-left:0; }
  .bundle-text{ flex:1; min-width:220px; }
  .bundle-text h3{ font-size:19px; font-weight:800; }
  .bundle-text p{ color: var(--ink-muted); font-size:14px; margin-top:6px; }
  .bundle-price{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
  .bundle-price .old{ font-family:'Space Mono'; text-decoration:line-through; color: var(--ink-faint); font-size:13px; }
  .bundle-price .new{ font-family:'Space Mono'; font-weight:700; font-size:24px; }

  /* faq */
  details{ border-top:1px solid var(--border); padding: 18px 0; }
  details:last-child{ border-bottom:1px solid var(--border); }
  summary{ cursor:pointer; font-weight:700; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
  summary::-webkit-details-marker{ display:none; }
  summary::after{ content:"+"; font-family:'Space Mono'; font-size:20px; color: var(--ink-muted); flex:none; }
  details[open] summary::after{ content:"–"; }
  details p{ color: var(--ink-muted); font-size:14.5px; line-height:1.65; margin: 12px 0 0; max-width: 64ch; }

  footer{ border-top:1px solid var(--border); padding: 36px 0 44px; }
  .foot-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
  .foot-legal{ color: var(--ink-faint); font-size:12.5px; max-width: 62ch; line-height:1.6; }
  .foot-links{ display:flex; gap:18px; font-size:13.5px; color: var(--ink-muted); }
  .foot-links a{ text-decoration:none; }

  @media (prefers-reduced-motion: no-preference){
    .card, .btn{ transition: transform .15s ease, box-shadow .15s ease; }
    .card:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px -18px hsl(var(--shadow) / 0.5); }
    .btn-accent:hover{ transform: translateY(-1px); }
  }