:root{
  --bg:#070609;
  --panel:#111115;
  --panel2:#17171c;
  --line:rgba(220,188,123,.18);
  --line2:rgba(255,255,255,.08);
  --text:#f4eee4;
  --muted:#b9aa9e;
  --gold:#d8ad58;
  --gold2:#f0d587;
  --soft:#0d0d11;
  --danger:#2a1114;
  --radius:28px;
  --shadow:0 30px 90px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 80% 4%, rgba(216,173,88,.12), transparent 28rem),
    radial-gradient(circle at 20% 20%, rgba(118,84,255,.09), transparent 28rem),
    linear-gradient(180deg,#09080c 0%,#070609 55%,#050507 100%);
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing:-.03em;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:100% 4px;
  opacity:.22;
  mix-blend-mode:screen;
}
a{color:inherit;text-decoration:none}
p{color:var(--muted);line-height:1.55}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2.9rem,8vw,6.5rem);line-height:.9;max-width:980px;margin-bottom:24px}
h2{font-size:clamp(2.1rem,5vw,4.2rem);line-height:.98;margin-bottom:18px}
h3{font-size:1.7rem;line-height:1;margin-bottom:12px}
.section-pad{padding:72px clamp(20px,5vw,72px)}
.narrow{max-width:1050px;margin:0 auto}
.eyebrow{
  color:#d9c19d;
  text-transform:uppercase;
  letter-spacing:.38em;
  font-size:.78rem;
  font-weight:900;
  margin-bottom:18px
}
.lead{font-size:clamp(1.05rem,2.4vw,1.35rem);max-width:760px}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:22px;
  justify-content:space-between;
  padding:18px clamp(18px,5vw,64px);
  background:rgba(7,6,9,.76);
  backdrop-filter:blur(22px);
  border-bottom:1px solid var(--line2);
}
.brand{display:flex;align-items:center;gap:14px;min-width:max-content}
.brand-mark{
  width:54px;height:54px;border:1px solid var(--line);border-radius:18px;
  display:grid;place-items:center;color:var(--gold2);
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  overflow:hidden;
  padding:3px;
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:14px;
}
.brand strong{display:block;font-size:1.05rem;letter-spacing:.42em}
.brand small{display:block;color:#b7a796;font-size:.68rem;letter-spacing:.33em;margin-top:3px}
.nav{display:flex;gap:22px;color:var(--muted);font-weight:800}
.nav a:hover{color:var(--text)}
.nav-cta{
  padding:12px 18px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.04);font-weight:900
}
.hero{
  min-height:calc(100vh - 90px);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  align-items:center;
}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 24px;border-radius:999px;
  font-weight:950;letter-spacing:-.02em;border:1px solid transparent
}
.btn-primary{
  color:#0b0906;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 18px 50px rgba(216,173,88,.18)
}
.btn-secondary{
  color:var(--text);
  background:rgba(255,255,255,.04);
  border-color:var(--line);
}
.full{width:100%}
.micro-note{font-size:.95rem}
.hero-card,.feature-card,.price-card,.trust,.problem,.workflow,.faq,.final-cta,.section-head,.features,.pricing{
  position:relative;
}
.hero-card{
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 80% 10%, rgba(216,173,88,.14), transparent 18rem),
    linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow);
}
.hero-card h2{font-size:4.2rem;margin:8px 0 4px}
.card-topline{display:flex;justify-content:space-between;gap:12px;color:#d9c19d;text-transform:uppercase;letter-spacing:.32em;font-size:.72rem;font-weight:900}
.usage-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.usage-grid div{
  padding:24px;border:1px solid var(--line2);border-radius:22px;background:rgba(0,0,0,.18)
}
.usage-grid b{display:block;font-size:2.4rem}
.usage-grid span{color:var(--muted);font-weight:800}
.problem,.trust,.final-cta{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.035);
  margin-top:24px;
  box-shadow:var(--shadow)
}
.problem p,.trust p{font-size:1.15rem}
.section-head{max-width:850px;margin-bottom:34px}
.section-head p:not(.eyebrow){font-size:1.08rem}
.feature-grid,.pricing-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.feature-card,.price-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  padding:26px;
  min-height:260px;
}
.icon{
  width:52px;height:52px;border-radius:18px;display:grid;place-items:center;
  background:rgba(216,173,88,.10);border:1px solid var(--line);color:var(--gold2);
  font-weight:900;margin-bottom:26px
}
.workflow{
  border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);
}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps div{
  padding:28px;border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.035)
}
.steps span{color:#d9c19d;letter-spacing:.28em;font-weight:950;font-size:.78rem}
.steps b{display:block;font-size:1.3rem;margin:18px 0 8px}
.pricing-grid{grid-template-columns:repeat(3,1fr)}
.price-card{min-height:auto;padding:30px}
.price-card.featured{
  background:
    radial-gradient(circle at 80% 0%, rgba(216,173,88,.22), transparent 14rem),
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border-color:rgba(240,213,135,.38);
  transform:translateY(-10px);
}
.badge{
  display:inline-flex;padding:8px 12px;border-radius:999px;
  border:1px solid var(--line);color:#0b0906;background:var(--gold2);
  font-size:.72rem;font-weight:950;letter-spacing:.18em;margin-bottom:18px
}
.plan-label{color:#d9c19d;letter-spacing:.33em;font-weight:950;font-size:.78rem;text-transform:uppercase;margin-bottom:10px}
.price-card h3{font-size:2.5rem;margin-bottom:0}
.cycle{margin-bottom:22px}
.price-card ul{list-style:none;padding:0;margin:0 0 28px}
.price-card li{
  padding:13px 0;border-bottom:1px solid var(--line2);
  color:var(--text);font-weight:850
}
.faq-list{display:grid;gap:14px}
details{
  border:1px solid var(--line);border-radius:22px;
  background:rgba(255,255,255,.035);
  padding:20px 22px
}
summary{cursor:pointer;font-weight:950;font-size:1.15rem}
details p{margin:14px 0 0}
.final-cta{text-align:center}
.final-cta .btn{margin-top:10px}
.footer{
  padding:40px 22px 96px;text-align:center;border-top:1px solid var(--line2)
}
.floating-wa{
  position:fixed;left:18px;right:18px;bottom:18px;z-index:60;
  min-height:58px;border-radius:999px;
  display:none;align-items:center;justify-content:center;
  color:#0b0906;font-weight:950;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 18px 60px rgba(0,0,0,.5)
}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:56px}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
  .price-card.featured{transform:none}
  .steps{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .site-header{align-items:flex-start}
  .nav,.nav-cta{display:none}
  .brand strong{font-size:.9rem}
  .brand small{font-size:.6rem}
  .brand-mark{width:48px;height:48px;border-radius:16px}
  .section-pad{padding:48px 18px}
  h1{font-size:3.25rem}
  h2{font-size:2.45rem}
  .hero-card{padding:22px}
  .hero-card h2{font-size:3.2rem}
  .usage-grid{grid-template-columns:1fr;gap:12px}
  .feature-grid{grid-template-columns:1fr}
  .feature-card{min-height:auto}
  .cta-row .btn{width:100%}
  .floating-wa{display:flex}
  .footer{padding-bottom:104px}
}