:root{
      --bg:#030813;
      --panel:#071426;
      --panel2:#091b34;
      --text:#f4f7fb;
      --muted:#9eafc5;
      --gold:#e1b84f;
      --gold2:#ffe292;
      --blue:#2f75ff;
      --cyan:#57d7ff;
      --violet:#9d77ff;
      --rose:#ff6b9c;
      --green:#61d99c;
      --max:1240px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        radial-gradient(circle at 10% 10%,rgba(47,117,255,.09),transparent 28rem),
        radial-gradient(circle at 90% 30%,rgba(225,184,79,.06),transparent 26rem),
        linear-gradient(180deg,#020711,#050c19 55%,#071224);
      color:var(--text);
      font-family:"Manrope",system-ui,sans-serif;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    .wrap{width:min(var(--max),calc(100% - 48px));margin-inline:auto}

    .topbar{
      position:fixed;left:0;right:0;top:0;z-index:50;
      background:rgba(3,8,19,.82);
      border-bottom:1px solid rgba(255,255,255,.06);
      backdrop-filter:blur(14px);
    }
    .nav{
      height:80px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:22px;
      min-width:0;
    }
    .wordmark{
      font-family:"Cinzel",serif;font-weight:700;letter-spacing:.14em;font-size:19px;
    }
    .wordmark span{color:var(--gold2)}
    .navlinks{display:flex;align-items:center;gap:26px}
    .navlinks a{
      font-size:12px;text-transform:uppercase;letter-spacing:.11em;font-weight:800;color:#c9d4e4;
    }
    .navlinks a:hover{color:#fff}
    .nav-cta{
      padding:12px 16px;
      border:1px solid var(--gold);
      color:var(--gold2)!important;
      background:rgba(225,184,79,.05);
    }

    .social-rail{
      position:fixed;left:16px;top:50%;transform:translateY(-50%);
      display:flex;flex-direction:column;gap:9px;z-index:45;
    }
    .social-btn{
      width:42px;height:42px;display:grid;place-items:center;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(5,14,30,.88);
      color:#dce6f4;
      transition:.2s ease;
    }
    .social-btn:hover{transform:translateX(4px);border-color:var(--gold);color:var(--gold2)}
    .social-btn svg{width:18px;height:18px;fill:currentColor}

    /* HERO — explicit 40/60 flex split */
    .hero{
      width:100%;
      padding-top:80px;
      display:flex;
      align-items:stretch;
      background:#071224;
      overflow:hidden;
    }

    .hero-image{
      flex:0 0 40%;
      width:40%;
      max-width:40%;
      min-width:0;
      background:#020711;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .hero-image img{
      display:block;
      width:100%;
      height:auto;
      max-width:100%;
      object-fit:contain;
      object-position:center;
    }

    .hero-copy-panel{
      flex:0 0 60%;
      width:60%;
      max-width:60%;
      min-width:0;
      display:flex;
      align-items:center;
      padding:clamp(28px,3vw,52px);
      background:
        radial-gradient(circle at 80% 18%,rgba(47,117,255,.13),transparent 16rem),
        linear-gradient(180deg,#08162b,#050d1b);
      border-left:1px solid rgba(255,255,255,.07);
      overflow:hidden;
    }

    .hero-copy-panel > div{
      width:100%;
      min-width:0;
    }

    .kicker{
      font-size:12px;
      letter-spacing:.2em;
      text-transform:uppercase;
      font-weight:800;
      color:var(--gold2);
      margin-bottom:14px;
    }

    h1,h2{
      font-family:"Cinzel",serif;
      font-weight:600;
      letter-spacing:-.02em;
    }

    h1{
      margin:0;
      width:100%;
      max-width:100%;
      font-size:clamp(36px,4vw,64px);
      line-height:1.02;
      white-space:normal;
      overflow-wrap:anywhere;
    }

    h1 span{color:var(--gold2)}

    .hero-lead{
      margin:18px 0 0;
      max-width:680px;
      color:#c2cfe0;
      font-size:clamp(15px,1.25vw,19px);
      line-height:1.65;
    }

    .hero-price{
      margin-top:20px;
      font-family:"Cinzel",serif;
      font-size:clamp(34px,3.5vw,52px);
      line-height:1;
      color:var(--gold2);
    }

    .hero-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:20px;
    }

    .btn{
      min-height:50px;
      padding:0 18px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      font-weight:800;
      border:1px solid transparent;
      transition:.2s ease;
    }

    .btn-primary{
      color:#0b1020;
      background:linear-gradient(135deg,var(--gold2),var(--gold));
    }

    .btn-primary:hover{transform:translateY(-2px)}

    .btn-secondary{
      border-color:rgba(255,255,255,.2);
      background:transparent;
      color:#fff;
    }

    .btn-secondary:hover{
      border-color:var(--blue);
      color:#dbe8ff;
    }

    .btn svg{
      width:18px;
      height:18px;
      fill:currentColor;
    }

    section{padding:96px 0}
    .section-kicker{
      color:var(--gold2);font-size:12px;letter-spacing:.19em;text-transform:uppercase;font-weight:800;
    }
    h2{
      font-size:clamp(36px,5vw,62px);
      line-height:1.08;
      margin:12px 0 16px;
    }
    .lead{
      color:var(--muted);
      line-height:1.8;
      font-size:18px;
      max-width:850px;
    }

    /* thin colored stroke cards; no numbering */
    .cards{
      margin-top:40px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .card{
      position:relative;
      padding:28px;
      min-height:220px;
      background:rgba(6,18,38,.56);
      border:1px solid rgba(255,255,255,.06);
    }
    .card::before{
      content:"";
      position:absolute;
      left:-1px;top:-1px;bottom:-1px;
      width:3px;
      background:var(--stroke,var(--blue));
    }
    .card h3{margin:0 0 10px;font-size:18px}
    .card p{margin:0;color:#9fb0c6;line-height:1.7}
    .card.gold{--stroke:var(--gold)}
    .card.cyan{--stroke:var(--cyan)}
    .card.violet{--stroke:var(--violet)}
    .card.rose{--stroke:var(--rose)}
    .card.green{--stroke:var(--green)}
    .card.blue{--stroke:var(--blue)}

    .uses{
      display:grid;
      grid-template-columns:1fr 1.05fr;
      gap:54px;
      align-items:start;
    }
    .use-list{
      margin-top:30px;
      display:grid;
      gap:12px;
    }
    .use-item{
      display:grid;
      grid-template-columns:10px 1fr;
      gap:14px;
      align-items:start;
      padding:16px 0;
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .use-dot{width:8px;height:8px;border-radius:50%;margin-top:8px;background:var(--gold2)}
    .use-item b{display:block;margin-bottom:4px}
    .use-item span{color:#95a7bf;line-height:1.6}

    .sales-section{
      background:
        radial-gradient(circle at 85% 20%,rgba(157,119,255,.08),transparent 22rem),
        linear-gradient(180deg,rgba(7,20,38,.55),rgba(4,12,24,.65));
      border-top:1px solid rgba(255,255,255,.05);
      border-bottom:1px solid rgba(255,255,255,.05);
    }

    .table-wrap{
      margin-top:36px;
      overflow-x:auto;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(4,12,26,.68);
    }
    table{width:100%;border-collapse:collapse;min-width:760px}
    th,td{padding:16px 18px;text-align:left}
    th{
      font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:#8fa4bf;
      background:#061326;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    td{
      border-bottom:1px solid rgba(255,255,255,.06);
      color:#dce5f2;
    }
    tbody tr:last-child td{border-bottom:0}
    .domain{font-family:"Cinzel",serif;font-weight:600}
    .sale-price{font-weight:800;color:#fff}
    .row-ai{border-left:3px solid var(--gold)}
    .row-club{border-left:3px solid var(--cyan)}
    .row-green{border-left:3px solid var(--green)}
    .row-nas{border-left:3px solid var(--violet)}
    .row-bot{border-left:3px solid var(--rose)}
    .row-midnight{border-left:3px solid var(--blue)}
    .row-derm{border-left:3px solid #ff9e5e}
    .row-twig{border-left:3px solid #65e5c4}
    .row-txt{border-left:3px solid #d58cff}
    .row-folk{border-left:3px solid #ffd45a}
    .source-note{
      margin-top:14px;
      color:#8396b1;
      font-size:13px;
      line-height:1.6;
    }

    .cta-section{
      padding:108px 0;
    }
    .cta-panel{
      border:1px solid rgba(225,184,79,.45);
      background:linear-gradient(135deg,#092451,#071526 65%);
      padding:48px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:30px;
      align-items:center;
    }
    .cta-panel p{color:#aebed2;line-height:1.7;max-width:760px}
    .cta-actions{display:flex;flex-direction:column;gap:10px;min-width:240px}

    footer{
      padding:32px 0 90px;
      color:#71849d;
      border-top:1px solid rgba(255,255,255,.06);
      font-size:13px;
    }
    .foot{display:flex;justify-content:space-between;gap:20px;align-items:center}

    @media (max-width:1200px){
      .navlinks{gap:16px}
      .navlinks a{font-size:11px}
      .nav-cta{padding:11px 13px}
      h1{font-size:clamp(36px,4vw,54px)}
      .hero-copy-panel{padding:28px 30px}
      .hero-lead{font-size:15px}
      .hero-price{font-size:40px}
      .btn{min-height:46px;padding:0 15px;font-size:14px}
    }

    @media (max-width:1000px){
      .hero{
        display:block;
        padding-top:80px;
      }
      .hero-image,
      .hero-copy-panel{
        width:100%;
        max-width:100%;
        flex:none;
      }
      .hero-image img{
        width:100%;
        height:auto;
      }
      .hero-copy-panel{
        padding:42px 30px 48px;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.07);
      }
      .cards{grid-template-columns:1fr 1fr}
      .uses{grid-template-columns:1fr}
      .cta-panel{grid-template-columns:1fr}
      .cta-actions{flex-direction:row;flex-wrap:wrap}
    }

    @media (max-width:760px){
      .wrap{width:min(var(--max),calc(100% - 28px))}
      .nav{height:70px}
      .navlinks a:not(.nav-cta){display:none}
      .nav-cta{font-size:11px;padding:10px 12px}
      .wordmark{font-size:16px}
      .social-rail{display:none}
      .hero{padding-top:70px}
      .hero-image{aspect-ratio:3 / 2}
      .hero-copy-panel{padding:34px 20px 42px}
      h1{font-size:clamp(36px,12vw,54px)}
      .hero-actions{display:grid;grid-template-columns:1fr}
      .btn{width:100%}
      .cards{grid-template-columns:1fr}
      section{padding:72px 0}
      .cta-panel{padding:30px 22px}
      .cta-actions{flex-direction:column}
      .foot{flex-direction:column;align-items:flex-start}
    }