:root{
    --bg-deep:#0d1219;
    --bg-raised:#131c27;
    --bg-raised-2:#16212e;
    --text:#e8f0f7;
    --text-body:#b6c2d1;
    --muted:#7a8fa6;
    --gold:#f0a830;
    --gold-soft:#f6c069;
    --gold-wash:rgba(240,168,48,0.12);
    --on-gold:#1a1205;
    --hairline:rgba(232,240,247,0.09);
    --hairline-gold:rgba(240,168,48,0.28);
    --maxw:1100px;
    --readw:760px;
    --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-head:"Marcellus",Georgia,"Times New Roman",serif;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg-deep);
    color:var(--text-body);
    font-family:var(--font-body);
    line-height:1.7;
    font-size:17px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}

  /* ---------- type ---------- */
  h1,h2,h3{font-family:var(--font-head);color:var(--text);line-height:1.16;letter-spacing:-0.005em;font-weight:400}
  .eyebrow{
    font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.7}

  /* ---------- layout ---------- */
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .section{padding-block:clamp(3.8rem,8vw,6.5rem)}
  .section--center{text-align:center}
  .section--center .read{max-width:var(--readw);margin-inline:auto}
  .section--center .eyebrow{justify-content:center}
  .lede{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--text-body)}
  h2.title{font-size:clamp(1.7rem,3.6vw,2.55rem);margin-bottom:1.1rem}
  .divider{height:1px;background:var(--hairline);max-width:var(--maxw);margin:0 auto}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-block;background:var(--gold);color:var(--on-gold);
    font-weight:650;font-size:1rem;letter-spacing:.01em;
    padding:.95rem 1.6rem;border-radius:9px;border:1px solid var(--gold);
    transition:transform .18s ease,box-shadow .25s ease,background .2s ease;
    box-shadow:0 8px 26px -12px rgba(240,168,48,.55);
  }
  .btn:hover{background:var(--gold-soft);transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(240,168,48,.7)}
  .btn-ghost{
    display:inline-block;color:var(--text);font-weight:550;font-size:.95rem;
    padding:.7rem 1.05rem;border-radius:9px;border:1px solid var(--hairline);
    transition:border-color .2s ease,background .2s ease;
  }
  .btn-ghost:hover{border-color:var(--hairline-gold);background:var(--gold-wash)}
  .micro{color:var(--muted);font-size:.86rem;margin-top:1rem}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(13,18,25,.78);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--hairline);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:66px}
  .brand{display:flex;align-items:center;gap:.62rem}
  .brand-logo{width:34px;height:34px;border-radius:8px;display:block;flex:0 0 auto}
  .wordmark{font-family:var(--font-head);font-size:1.3rem;font-weight:400;color:var(--text);letter-spacing:.01em}
  .wordmark b{color:var(--gold);font-weight:400}
  .nav-actions{display:flex;align-items:center;gap:.7rem}

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;text-align:center;padding-block:clamp(4rem,10vw,7.5rem);background:linear-gradient(180deg,rgba(13,18,25,.6),rgba(13,18,25,.7)),url(images/bg-1.jpg) center/cover no-repeat}
  .hero .ember{
    position:absolute;left:50%;top:34%;
    width:min(900px,120vw);height:min(900px,120vw);transform:translate(-50%,-50%);
    background:radial-gradient(circle at center,
      rgba(240,168,48,.22) 0%,
      rgba(240,168,48,.10) 26%,
      rgba(240,168,48,.03) 46%,
      rgba(13,18,25,0) 66%);
    pointer-events:none;z-index:0;animation:breathe 7s ease-in-out infinite;
  }
  @keyframes breathe{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
  .hero .inner{position:relative;z-index:1;max-width:840px;margin-inline:auto}
  .hero h1{
    font-size:clamp(3rem,9vw,6rem);font-weight:400;letter-spacing:0;
    color:var(--text);line-height:1.02;
  }
  .hero h1 b{color:var(--gold);font-weight:400}
  .hero .sub{
    font-size:clamp(1.15rem,2.3vw,1.5rem);color:var(--text);font-weight:450;
    margin:1.6rem auto 2.2rem;max-width:600px;line-height:1.45;letter-spacing:-0.01em;
  }
  .hero .micro{margin-top:1.1rem}

  /* ---------- forges grid ---------- */
  .forges{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:3rem}
  .forge{
    background:var(--bg-raised);border:1px solid var(--hairline);border-radius:16px;
    padding:18px 18px 22px;transition:transform .2s ease,border-color .25s ease,box-shadow .25s ease;
  }
  .forge:hover{transform:translateY(-4px);border-color:var(--hairline-gold);box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
  .forge h3{font-size:1.4rem;margin-bottom:.1rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
  .forge h3 .desc{font-family:var(--font-body);font-size:.8rem;font-weight:500;color:var(--gold);font-style:italic;letter-spacing:.01em}
  .forge p{font-size:.96rem;color:var(--text-body);margin-top:.5rem}

  /* ---------- image placeholders ---------- */
  .ph{
    position:relative;width:100%;border-radius:12px;
    background:
      linear-gradient(135deg,var(--bg-raised-2),var(--bg-raised));
    border:1px dashed var(--hairline-gold);
    display:grid;place-items:center;color:var(--muted);overflow:hidden;
  }
  .ph::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 30% 20%,var(--gold-wash),transparent 60%);
    opacity:.6;pointer-events:none;
  }
  .ph .ph-label{position:relative;z-index:1;text-align:center;font-size:.8rem;letter-spacing:.04em}
  .ph .ph-label svg{display:block;margin:0 auto .5rem;opacity:.7}
  .ph .ph-label small{display:block;color:var(--muted);opacity:.7;font-size:.72rem;margin-top:.2rem}
  .ph-forge{aspect-ratio:4/3;margin-bottom:1rem}
  .ph-wide{aspect-ratio:5/4}

  /* ---------- split rows ---------- */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
  .split.reverse .split-media{order:2}
  .split .lede{margin-top:.4rem}

  /* ---------- pricing ---------- */
  .price-card{
    max-width:520px;margin:2.6rem auto 0;background:var(--bg-raised);
    border:1px solid var(--hairline-gold);border-radius:20px;padding:34px 30px;
    text-align:left;box-shadow:0 30px 60px -34px rgba(240,168,48,.25);
  }
  .price-card .plan{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
  .price-card .amount{font-family:var(--font-head);font-size:3.1rem;font-weight:400;color:var(--text);margin:.4rem 0 .1rem;letter-spacing:0}
  .price-card .amount span{font-family:var(--font-body);font-size:1rem;font-weight:500;color:var(--muted);letter-spacing:0}
  .price-card .annual{color:var(--muted);font-size:.92rem;margin-bottom:1.4rem}
  .price-card ul{list-style:none;margin:0 0 1.6rem;display:grid;gap:.7rem}
  .price-card li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem;color:var(--text-body)}
  .price-card li svg{flex:0 0 auto;margin-top:.28rem}
  .price-card .btn{width:100%;text-align:center}
  .price-card .micro{text-align:center}

  /* ---------- closing ---------- */
  .closing{position:relative;overflow:hidden;text-align:center}
  .closing .ember{
    position:absolute;left:50%;bottom:-40%;width:min(820px,120vw);height:min(820px,120vw);
    transform:translateX(-50%);
    background:radial-gradient(circle at center,rgba(240,168,48,.16),rgba(13,18,25,0) 64%);
    pointer-events:none;
  }
  .closing .inner{position:relative;z-index:1;max-width:720px;margin-inline:auto}
  .closing h2{font-size:clamp(1.8rem,4vw,2.7rem);margin-bottom:1.2rem}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--hairline);padding-block:3rem;background:var(--bg-deep)}
  .foot{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between}
  .foot .tag{color:var(--muted);font-size:.9rem;white-space:nowrap}
  .foot-links{display:flex;gap:1.4rem;flex-wrap:wrap}
  .foot-links a{color:var(--muted);font-size:.9rem;transition:color .2s ease}
  .foot-links a:hover{color:var(--gold)}
  .copy{color:var(--muted);opacity:.6;font-size:.8rem;margin-top:1.6rem}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- responsive ---------- */
  @media(max-width:760px){
    .forges{grid-template-columns:1fr}
    .split{grid-template-columns:1fr;gap:1.6rem}
    .split.reverse .split-media{order:0}
    .nav .btn-ghost.hide-sm{display:none}
    .foot .tag{white-space:normal}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important}
    .reveal{opacity:1;transform:none;transition:none}
    html{scroll-behavior:auto}
  }

  /* ---------- image frames ---------- */
  .shot{border-radius:12px;overflow:hidden;border:1px solid var(--hairline);
    box-shadow:0 24px 52px -30px rgba(0,0,0,.9);background:var(--bg-raised)}
  .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
  .shot-forge{aspect-ratio:16/10;margin-bottom:1.05rem}
  .shot-wide{aspect-ratio:16/10}
  .shot-portrait{aspect-ratio:4/5;max-width:430px;margin-inline:auto}
  .shot-portrait img{object-position:center}
  .oracle{max-width:360px;margin:1.7rem auto 1.7rem;aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:1px solid var(--hairline-gold);box-shadow:0 30px 64px -30px rgba(240,168,48,.32)}
  .oracle img{width:100%;height:100%;object-fit:cover;display:block}
  .hero .ember{display:none}
  .hero h1,.hero .sub,.hero .micro{text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 30px rgba(0,0,0,.7)}
  .bg-matrix{position:relative;background:linear-gradient(180deg,rgba(13,18,25,.62),rgba(13,18,25,.74)),url(images/bg-2.jpg) center 35%/cover no-repeat}
  .bg-matrix .title,.bg-matrix .lede,.bg-matrix .eyebrow{text-shadow:0 1px 4px rgba(0,0,0,.7),0 2px 30px rgba(0,0,0,.82)}
  .split-media .oracle{max-width:none;margin:0}
  .hero,.bg-matrix{background-attachment:fixed}
  @media(max-width:760px){.hero,.bg-matrix{background-attachment:scroll}}
  @media(prefers-reduced-motion:reduce){.hero,.bg-matrix{background-attachment:scroll}}