:root{
      --bg:#070a16;
      --bg2:#0b1020;
      --card: rgba(255,255,255,.06);
      --card2: rgba(255,255,255,.08);
      --line: rgba(255,255,255,.12);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);

      --indigo:#3b2ea6;
      --violet:#8b5cf6;
      --gold:#f3c969;
      --gold2:#f5d98c;

      --shadow: 0 18px 48px rgba(0,0,0,.35);
      --glow: 0 0 40px rgba(139,92,246,.25);
      --radius: 18px;
      --radius2: 24px;
      --max: 1140px;

      --pad: 18px;
      --pad2: 22px;
      --btnH: 44px;
      --hdrH: 64px;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--text);
      background:
        radial-gradient(900px 450px at 10% 0%, rgba(139,92,246,.18), transparent 60%),
        radial-gradient(900px 450px at 90% 10%, rgba(243,201,105,.12), transparent 58%),
        radial-gradient(1200px 700px at 50% 100%, rgba(59,46,166,.24), transparent 62%),
        linear-gradient(180deg, var(--bg), var(--bg2));
      line-height:1.55;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x:hidden;
    }

    a{ color:inherit; text-decoration: none; }
    a:focus-visible, button:focus-visible, summary:focus-visible{
      outline:3px solid rgba(243,201,105,.35);
      outline-offset:2px;
      border-radius: 12px;
    }

    /* Utility */
    .wrap{ max-width: var(--max); margin:0 auto; padding: 0 16px; }
    .muted{ color: var(--muted); }
    .sr-only{
      position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }

    /* Header (mobile <= 64px) */
    header{
      position: relative;
      height: var(--hdrH);
    }
    .topbar{
      height: var(--hdrH);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 10px 0;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      min-width: 0;
    }
    .logo{
      width: 34px; height: 34px;
      border-radius: 14px;
      display:grid; place-items:center;
      background:
        radial-gradient(16px 16px at 30% 30%, rgba(243,201,105,.25), transparent 60%),
        linear-gradient(135deg, rgba(139,92,246,.22), rgba(59,46,166,.18));
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 12px 26px rgba(0,0,0,.25), var(--glow);
      flex: 0 0 auto;
    }
    .brandtext{
      display:flex; flex-direction:column; gap:2px;
      line-height:1.15;
      min-width: 0;
    }
    .brandtext strong{
      font-weight: 900;
      letter-spacing:-0.02em;
      font-size: 14px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 60vw;
    }
    .brandtext span{
      font-size: 12px;
      color: rgba(255,255,255,.68);
      white-space:nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 60vw;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      height: var(--btnH);
      padding: 0 14px;
      border-radius: 999px;
      font-weight: 800;
      letter-spacing: .01em;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      box-shadow: 0 18px 40px rgba(0,0,0,.25);
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{ background: rgba(255,255,255,.09); }
    .btn.primary{
      border-color: rgba(243,201,105,.35);
      background:
        radial-gradient(100px 40px at 30% 10%, rgba(243,201,105,.35), transparent 60%),
        linear-gradient(135deg, rgba(243,201,105,.18), rgba(139,92,246,.10));
      box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 0 40px rgba(243,201,105,.12);
    }
    .btn.primary:hover{
      background:
        radial-gradient(120px 50px at 30% 10%, rgba(243,201,105,.42), transparent 60%),
        linear-gradient(135deg, rgba(243,201,105,.22), rgba(139,92,246,.12));
    }
    .btn.secondary{
      border-color: rgba(255,255,255,.16);
      background: rgba(255,255,255,.04);
    }

    /* Icons */
    .icon{
      width:18px; height:18px; display:inline-block; flex:0 0 auto;
    }
    .icon svg{ width:100%; height:100%; display:block; }
    .gold{ color: var(--gold); }
    .violet{ color: #c4b5fd; }

    /* Hero with starfield */
    .hero{
      position: relative;
      padding: 18px 0 22px;
    }
    .starfield{
      position:absolute; inset:-120px -60px auto -60px;
      height: 520px;
      pointer-events:none;
      opacity: .9;
      background:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.85) 50%, transparent 60%),
        radial-gradient(1px 1px at 22% 65%, rgba(255,255,255,.55) 50%, transparent 60%),
        radial-gradient(1px 1px at 35% 35%, rgba(255,255,255,.65) 50%, transparent 60%),
        radial-gradient(1px 1px at 48% 18%, rgba(255,255,255,.45) 50%, transparent 60%),
        radial-gradient(1px 1px at 57% 62%, rgba(255,255,255,.65) 50%, transparent 60%),
        radial-gradient(1px 1px at 68% 42%, rgba(255,255,255,.55) 50%, transparent 60%),
        radial-gradient(1px 1px at 78% 16%, rgba(255,255,255,.75) 50%, transparent 60%),
        radial-gradient(1px 1px at 86% 58%, rgba(255,255,255,.55) 50%, transparent 60%),
        radial-gradient(1px 1px at 92% 28%, rgba(255,255,255,.65) 50%, transparent 60%),
        radial-gradient(1px 1px at 14% 44%, rgba(243,201,105,.55) 50%, transparent 60%),
        radial-gradient(1px 1px at 66% 26%, rgba(139,92,246,.65) 50%, transparent 60%),
        radial-gradient(700px 220px at 40% 10%, rgba(139,92,246,.20), transparent 60%),
        radial-gradient(620px 210px at 75% 0%, rgba(243,201,105,.16), transparent 58%);
      filter: blur(.2px);
    }

    .hero-grid{
      display:grid;
      gap: 14px;
      align-items:start;
    }
    .hero-card{
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
      border-radius: var(--radius2);
      box-shadow: var(--shadow), var(--glow);
      padding: var(--pad2);
      position: relative;
      overflow:hidden;
    }
    .hero-card:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(420px 120px at 15% 0%, rgba(243,201,105,.18), transparent 65%),
        radial-gradient(420px 140px at 85% 15%, rgba(139,92,246,.16), transparent 65%);
      pointer-events:none;
    }
    .hero-content{
      position: relative;
      display:grid;
      gap: 10px;
    }
    .tagrow{
      display:flex; flex-wrap:wrap; gap:8px;
    }
    .tag{
      display:inline-flex; align-items:center; gap:8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.82);
      font-size: 12px;
      line-height: 1;
    }
    h1{
      margin: 4px 0 0;
      font-size: clamp(26px, 6vw, 44px);
      line-height: 1.08;
      letter-spacing: -0.035em;
      font-weight: 950;
    }
    .lead{
      margin: 0;
      color: rgba(255,255,255,.78);
      font-size: 15px;
      max-width: 58ch;
    }
    .cta-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top: 4px;
    }
    .hero-highlights{
      display:grid; gap:10px;
      margin-top: 8px;
    }
    .hl{
      display:flex; gap:10px; align-items:flex-start;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.14);
    }
    .hl strong{ font-weight: 900; }
    .hl p{ margin:0; color: rgba(255,255,255,.78); font-size: 13px; }

    .hero-media{
      border-radius: var(--radius2);
      border: 1px solid rgba(255,255,255,.12);
      overflow:hidden;
      background: rgba(255,255,255,.04);
      box-shadow: var(--shadow);
    }
    .hero-media img{
      width:100%;
      height:auto;
      display:block;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      background:
        radial-gradient(420px 260px at 30% 20%, rgba(139,92,246,.16), transparent 60%),
        radial-gradient(420px 260px at 70% 10%, rgba(243,201,105,.12), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    }

    /* Sections */
    section{
      padding: 18px 0;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 14px;
      margin-bottom: 10px;
    }
    h2{
      margin:0;
      font-size: 20px;
      letter-spacing: -0.02em;
      font-weight: 900;
    }
    .sub{
      margin:0;
      color: rgba(255,255,255,.72);
      font-size: 13px;
      max-width: 52ch;
    }

    .grid{
      display:grid;
      gap: 12px;
    }
    .card{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,.12);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
      box-shadow: 0 14px 40px rgba(0,0,0,.28);
      padding: var(--pad);
    }
    .card h3{
      margin: 0 0 6px;
      font-size: 15px;
      letter-spacing: -0.01em;
      font-weight: 900;
    }
    .card p{
      margin:0;
      color: rgba(255,255,255,.74);
      font-size: 13px;
    }

    .steps .card{
      position: relative;
      overflow:hidden;
    }
    .stepno{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width: 30px; height: 30px;
      border-radius: 12px;
      font-weight: 900;
      border: 1px solid rgba(243,201,105,.28);
      background:
        radial-gradient(40px 18px at 40% 20%, rgba(243,201,105,.25), transparent 60%),
        rgba(255,255,255,.04);
      color: rgba(255,255,255,.92);
      margin-bottom: 10px;
      box-shadow: 0 12px 26px rgba(0,0,0,.25);
    }

    /* Personalization UI */
    .badges{
      display:flex; flex-wrap:wrap; gap:8px;
      margin-top: 10px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      font-size: 12px;
      color: rgba(255,255,255,.86);
    }
    .chips{
      display:flex; gap:8px; flex-wrap:wrap;
      margin-top: 10px;
      align-items:center;
    }
    .chip{
      width: 16px; height:16px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.22);
      box-shadow: 0 10px 22px rgba(0,0,0,.26);
    }
    .c1{ background: #f3c969; }
    .c2{ background: #8b5cf6; }
    .c3{ background: #60a5fa; }
    .c4{ background: #34d399; }
    .c5{ background: #fb7185; }
    .c6{ background: #eab308; }
    .c7{ background: #c084fc; }
    .c8{ background: #f472b6; }

    /* Zodiac chips */
    .zodiac-grid{
      display:grid;
      gap: 10px;
      grid-template-columns: 1fr 1fr;
    }
    .zchip{
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      font-size: 12px;
      color: rgba(255,255,255,.82);
      display:flex;
      gap:10px;
      align-items:flex-start;
      box-shadow: 0 14px 34px rgba(0,0,0,.22);
      min-height: 54px;
    }
    .zchip strong{ font-weight: 900; color: rgba(255,255,255,.92); }
    .zchip span{ display:block; color: rgba(255,255,255,.70); }

    /* Gift tiles */
    .tiles .card{
      background:
        radial-gradient(260px 110px at 20% 0%, rgba(139,92,246,.12), transparent 60%),
        radial-gradient(240px 110px at 90% 10%, rgba(243,201,105,.10), transparent 58%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
    }
    .kvs{
      display:grid;
      gap: 10px;
      margin-top: 10px;
    }
    .kv{
      display:flex;
      align-items:flex-start;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.12);
    }
    .kv p{ margin:0; font-size: 13px; color: rgba(255,255,255,.76); }

    /* FAQ */
    details{
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: rgba(255,255,255,.04);
      padding: 12px 12px;
      box-shadow: 0 14px 34px rgba(0,0,0,.22);
    }
    details + details{ margin-top: 10px; }
    summary{
      cursor:pointer;
      font-weight: 900;
      letter-spacing: -0.01em;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      list-style:none;
    }
    summary::-webkit-details-marker{ display:none; }
    summary::after{
      content:"+";
      width: 34px; height: 34px;
      border-radius: 14px;
      display:grid; place-items:center;
      border: 1px solid rgba(243,201,105,.26);
      background: rgba(255,255,255,.04);
      color: var(--gold2);
      font-weight: 900;
      flex: 0 0 auto;
    }
    details[open] summary::after{ content:"–"; }
    details p{
      margin: 8px 0 0;
      color: rgba(255,255,255,.74);
      font-size: 13px;
    }
    details a{
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: .08em;
    }

    /* Final CTA */
    .final{
      padding: 18px 0 26px;
    }
    .finalbox{
      border-radius: 26px;
      border: 1px solid rgba(243,201,105,.22);
      background:
        radial-gradient(520px 160px at 20% 10%, rgba(243,201,105,.22), transparent 62%),
        radial-gradient(540px 180px at 85% 20%, rgba(139,92,246,.22), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      box-shadow: 0 24px 70px rgba(0,0,0,.40), 0 0 60px rgba(243,201,105,.10);
      padding: 18px;
      display:grid;
      gap: 12px;
      overflow:hidden;
      position:relative;
    }
    .finalbox:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(1px 1px at 8% 18%, rgba(255,255,255,.75) 50%, transparent 60%),
        radial-gradient(1px 1px at 22% 58%, rgba(255,255,255,.55) 50%, transparent 60%),
        radial-gradient(1px 1px at 44% 30%, rgba(255,255,255,.65) 50%, transparent 60%),
        radial-gradient(1px 1px at 62% 55%, rgba(255,255,255,.55) 50%, transparent 60%),
        radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,.75) 50%, transparent 60%),
        radial-gradient(1px 1px at 90% 48%, rgba(255,255,255,.55) 50%, transparent 60%);
      opacity:.35;
      pointer-events:none;
    }
    .finalbox > *{ position:relative; }
    .finalbox h2{ font-size: 20px; margin:0; }
    .finalbox p{ margin:0; color: rgba(255,255,255,.78); font-size: 13px; max-width: 62ch; }
    .finalbox .cta-row{ margin-top: 2px; }

    /* Footer */
    footer{
      padding: 18px 0 26px;
      border-top: 1px solid rgba(255,255,255,.10);
      color: rgba(255,255,255,.68);
      font-size: 12px;
    }
    footer a{ text-decoration: underline; text-underline-offset: 3px; }

    /* Responsive enhancements */
    @media (min-width: 860px){
      .wrap{ padding: 0 20px; }
      .hero-grid{
        grid-template-columns: 1.1fr .9fr;
        gap: 14px;
        align-items:stretch;
      }
      .grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
      .grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
      .grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
      .zodiac-grid{ grid-template-columns: repeat(4, 1fr); }
      .finalbox{ padding: 22px; grid-template-columns: 1.2fr .8fr; align-items:center; }
      .finalbox .cta-row{ justify-content:flex-start; }
    }

    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
    }