:root{
    --bg:#0A0A0C; --bg2:#101013; --panel:rgba(255,255,255,.035); --panel2:rgba(255,255,255,.05);
    --line:rgba(200,144,46,.20); --line-soft:rgba(237,231,218,.09);
    --gold:#C8902E; --gold-d:#8B5B18; --ivory:#EDE7DA; --muted:#9A948A; --ok:#4FB98A;
    --grad-gold:linear-gradient(135deg,#FFEAA0 0%,#F6CE69 42%,#C8902E 74%,#8B5B18 100%);
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:
      radial-gradient(1100px 520px at 78% -8%, rgba(200,144,46,.14), transparent 60%),
      radial-gradient(760px 420px at 6% 12%, rgba(200,144,46,.06), transparent 55%),
      var(--bg);
    color:var(--ivory); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  .wrap{max-width:1140px; margin:0 auto; padding:0 28px}

  /* ---- topbar ---- */
  .top{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
    background:linear-gradient(180deg, rgba(10,10,12,.86), rgba(10,10,12,.55));
    border-bottom:1px solid var(--line-soft);}
  .top .wrap{display:flex; align-items:center; gap:26px; height:70px}
  .brand{display:flex; align-items:center; gap:14px; text-decoration:none}
  .brand .col{width:2px; height:30px; background:var(--grad-gold); opacity:.85; border-radius:2px}
  .mark{font-family:'Cinzel',serif; font-weight:700; letter-spacing:.14em; font-size:22px;
    background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .mark small{font-family:'Cinzel',serif; color:var(--muted); -webkit-text-fill-color:var(--muted);
    font-size:11px; letter-spacing:.42em; margin-left:2px}
  nav{margin-left:auto; display:flex; gap:26px; align-items:center}
  nav a{color:var(--muted); text-decoration:none; font-size:13.5px; letter-spacing:.02em; transition:color .2s}
  nav a:hover{color:var(--ivory)}
  .chip{display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.06em;
    color:var(--ok); border:1px solid rgba(79,185,138,.28); background:rgba(79,185,138,.07);
    padding:5px 11px; border-radius:999px; text-transform:uppercase}
  .dot{width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok)}
  @media(max-width:820px){nav .navlink{display:none}}

  /* ---- hero ---- */
  header{padding:78px 0 34px}
  .eyebrow{font-family:'Cinzel',serif; letter-spacing:.34em; font-size:12px; color:var(--gold);
    text-transform:uppercase; margin:0 0 22px}
  h1{font-family:'Playfair',Georgia,serif; font-weight:800; font-size:clamp(38px,6vw,68px);
    line-height:1.04; letter-spacing:-.01em; margin:0; text-wrap:balance; max-width:16ch}
  h1 em{font-style:italic; background:var(--grad-gold); -webkit-background-clip:text; background-clip:text; color:transparent}
  .lede{color:var(--muted); font-size:clamp(15px,1.7vw,18.5px); max-width:60ch; margin:22px 0 0}
  .rule{height:1px; background:linear-gradient(90deg,var(--gold),transparent); margin:34px 0 0; max-width:230px}

  /* ---- tools grid ---- */
  section{padding:26px 0 8px}
  .sec-lab{display:flex; align-items:baseline; gap:14px; margin:0 0 20px}
  .sec-lab span{font-family:'Cinzel',serif; letter-spacing:.28em; font-size:11.5px; color:var(--gold); text-transform:uppercase}
  .sec-lab i{flex:1; height:1px; background:var(--line-soft)}
  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.grid{grid-template-columns:1fr}}
  .card{position:relative; border:1px solid var(--line); border-radius:16px; padding:24px 22px 20px;
    background:linear-gradient(180deg, var(--panel2), var(--panel)); overflow:hidden;
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;}
  .card::before{content:""; position:absolute; inset:0; border-radius:16px; padding:1px;
    background:linear-gradient(135deg, rgba(246,206,105,.35), transparent 40%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .25s}
  .card:hover{transform:translateY(-4px); border-color:rgba(200,144,46,.4);
    box-shadow:0 18px 50px -22px rgba(0,0,0,.8), 0 0 0 1px rgba(200,144,46,.08)}
  .card:hover::before{opacity:1}
  .ic{width:44px; height:44px; border-radius:11px; display:grid; place-items:center; margin:0 0 16px;
    border:1px solid var(--line); background:rgba(200,144,46,.08); color:var(--gold)}
  .ic svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6}
  .card h3{font-family:'Playfair',Georgia,serif; font-weight:700; font-size:20px; margin:0 0 7px; letter-spacing:.01em}
  .card p{color:var(--muted); font-size:13.5px; margin:0 0 18px; min-height:38px}
  .go{display:inline-flex; align-items:center; gap:8px; color:var(--gold); text-decoration:none;
    font-size:13px; letter-spacing:.03em; font-weight:600}
  .go svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .2s}
  .card:hover .go svg{transform:translateX(4px)}
  .card .tag{position:absolute; top:16px; right:16px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:3px 9px}
  .card.wide{grid-column:span 3}
  @media(max-width:900px){.card.wide{grid-column:span 2}}
  @media(max-width:600px){.card.wide{grid-column:span 1}}
  .card.wide{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; padding:22px 24px}
  .card.wide .ic{margin:0}
  .card.wide p{min-height:0; margin:4px 0 0}
  .card.wide .go{white-space:nowrap}

  /* ---- status strip ---- */
  .status{margin:30px 0 8px; border:1px solid var(--line-soft); border-radius:14px; padding:16px 22px;
    display:flex; flex-wrap:wrap; gap:22px 34px; align-items:center; background:var(--panel)}
  .status .it{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted)}
  .status .it b{color:var(--ivory); font-weight:600}
  .status .k{font-family:'Cinzel',serif; letter-spacing:.2em; font-size:10.5px; color:var(--gold); text-transform:uppercase}

  footer{margin-top:48px; padding:30px 0 46px; border-top:1px solid var(--line-soft); color:var(--muted); font-size:12.5px}
  footer .wrap{display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center}
  footer .fm{font-family:'Cinzel',serif; letter-spacing:.16em; color:var(--gold); font-size:13px}

  /* motion */
  .rise{opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}.d5{animation-delay:.37s}.d6{animation-delay:.45s}
  @keyframes rise{to{opacity:1; transform:none}}
  @media(prefers-reduced-motion:reduce){.rise{animation:none; opacity:1; transform:none}}