:root{
  --gold:#d4af37; /* primary */
  --gold-d:#b79228; /* darker */
  --ink:#1f1b14;
  --bg:#0f0e0c; /* rich dark background */
  --muted:#9a8f78;
  --card:#151310;
  --white:#ffffff;
  --shadow:0 20px 50px rgba(0,0,0,.35);
  --bd:rgba(212,175,55,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:#eee;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
html,body{ overflow-x:hidden; }

.container{ width:min(1200px, 100% - 40px); margin-inline:auto; }

/* ----------------------------------------------------------
   Header
---------------------------------------------------------- */
header.site{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(160%) blur(6px);
  background:rgba(15,14,12,.85);
  border-bottom:1px solid rgba(212,175,55,.14);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#f7f4eb; font-weight:700; letter-spacing:.3px; }
.logo{
  width:32px; height:32px; border-radius:10px; position:relative; overflow:hidden;
  background:radial-gradient(80% 80% at 20% 20%, #fff7d1 0%, #f2d36a 35%, var(--gold) 60%, var(--gold-d) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  animation:opviroPulse 6s ease-in-out infinite;
}

.navlinks{ display:flex; gap:22px; align-items:center; }
.navlinks > a:not(.btn){ color:#eae6d9; text-decoration:none; font-weight:500; opacity:.92; }
.navlinks > a:not(.btn):hover{ color:#fff; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; color:#000; text-decoration:none;
  border:1px solid rgba(212,175,55,.35);
  background:linear-gradient(180deg,#f6d35e,#d4af37 80%);
  font-weight:800; box-shadow:var(--shadow);
  transition:all .2s ease-in-out; opacity:1 !important;
}
.btn:hover{ transform:translateY(-1px) scale(1.01); filter:saturate(115%); background:linear-gradient(180deg,#f0c94c,#b79228 85%); }
.btn.ghost{ background:transparent; color:#f3e9c6 !important; border-color:rgba(212,175,55,.35); box-shadow:none; }
.btn.ghost:hover{ background:rgba(212,175,55,.08); color:#fff !important; }

/* Hamburger (animated) */
.hamb{
  display:none; width:42px; height:42px; border:1px solid rgba(212,175,55,.35);
  border-radius:12px; color:#f3e9c6; background:transparent; align-items:center; justify-content:center;
}
.hamb span{ position:relative; display:block; width:20px; height:2px; background:#f3e9c6; }
.hamb span::before,.hamb span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:#f3e9c6;
  transition:transform .2s ease, top .2s ease, opacity .2s ease;
}
.hamb span::before{ top:-6px; }
.hamb span::after{ top:6px; }
.hamb.is-open span{ background:transparent; }
.hamb.is-open span::before{ top:0; transform:rotate(45deg); }
.hamb.is-open span::after{ top:0; transform:rotate(-45deg); }

/* Mobile menu */
.mobilemenu{
  display:none; position:fixed; inset:66px 12px auto 12px; z-index:95;
  background:linear-gradient(180deg,#17140f,#0f0e0c);
  border:1px solid rgba(212,175,55,.25); border-radius:16px; padding:14px; box-shadow:var(--shadow);
}
.mobilemenu a{ display:block; padding:12px; color:#f1ead7; text-decoration:none; border-radius:10px; }
.mobilemenu a:hover{ background:rgba(212,175,55,.08); }
.mobilemenu.open{ display:block; }
body.nav-open{ overflow:hidden; }

@media (max-width:900px){
  .navlinks{ display:none; }
  .hamb{ display:inline-flex; }
}

/* ----------------------------------------------------------
   Hero
   (use :after aurora so it never looks “cut”; allow overflow)
---------------------------------------------------------- */
.hero{
  position:relative; padding:84px 0 64px; overflow:visible;
}
.hero::after{
  content:""; position:absolute; pointer-events:none; z-index:-1;
  width:120vmax; height:120vmax; right:-35vmax; top:-10vmax;
  background:
    radial-gradient(closest-side, rgba(212,175,55,.20), rgba(212,175,55,.06) 55%, transparent 70%),
    radial-gradient(closest-side, rgba(255,239,180,.12), transparent 70%);
  filter:blur(18px);
}
.hero h1{ font-family:'Playfair Display',serif; font-size:clamp(36px, 5vw, 64px); line-height:1.05; margin:0 0 14px; color:#fff8e1; letter-spacing:.2px; }
.hero p{ font-size:clamp(16px, 2.2vw, 20px); color:#e7dfc6; max-width:760px; margin:0 0 26px; }
.hero .cta{ display:flex; gap:12px; flex-wrap:wrap; }
.trusted{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; margin-top:26px; opacity:.9; color:#d6ccb2; font-size:14px; }

@media (max-width:900px){
  .hero::after{ right:-40vmax; top:10vmax; width:140vmax; height:140vmax; filter:blur(22px); }
}
@media (max-width:540px){ .hero .cta .btn{ width:100%; } }

/* ----------------------------------------------------------
   Grid / Cards
---------------------------------------------------------- */
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
@media (max-width:980px){ .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

.card{
  background:linear-gradient(180deg, #191612, #13110e);
  border:1px solid var(--bd); border-radius:18px; padding:22px; box-shadow:var(--shadow);
}
.card h3{ margin:0 0 8px; font-size:20px; color:#fff4c2; }
.card p{ margin:0; color:#dfd7bf; }

.pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(212,175,55,.35); color:#f2e7c2; background:rgba(212,175,55,.08);
  font-size:12px; font-weight:600; letter-spacing:.3px;
}

/* ----------------------------------------------------------
   Sections
---------------------------------------------------------- */
section{ padding:56px 0; }
.section-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.section-title h2{ font-size:28px; margin:0; color:#fff4c2; letter-spacing:.3px; }
.section-title p{ margin:6px 0 0; color:#d9cfb5; }

/* ----------------------------------------------------------
   Pricing
---------------------------------------------------------- */
.pricing{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:stretch; }
@media (max-width:980px){ .pricing{ grid-template-columns:1fr; } }

.plan{
  position:relative; border:1px solid rgba(212,175,55,.2);
  background:linear-gradient(180deg,#181510,#12100d); border-radius:18px; padding:22px; box-shadow:var(--shadow);
}
.plan.best::after{
  content:"POPULAR"; position:absolute; top:14px; right:14px; font-size:11px; letter-spacing:.4px; color:#231b08;
  background:linear-gradient(180deg,#fff7d1,#f7d76f,var(--gold));
  border:1px solid rgba(212,175,55,.3); border-radius:999px; padding:4px 8px; font-weight:800;
}
.price{ font-size:36px; font-weight:900; color:#fff6cc; margin:12px 0; }
.price small{ font-size:14px; color:#d5c9a7; font-weight:600; }
.features{ list-style:none; padding:0; margin:14px 0 0; display:grid; gap:10px; color:#e9dfc3; }

/* CTA banner */
.cta-banner{
  margin-top:24px; padding:22px; border:1px solid rgba(212,175,55,.25); border-radius:18px;
  background:linear-gradient(180deg,#191612,#13110e);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
}

/* ----------------------------------------------------------
   FAQ details
---------------------------------------------------------- */
details{ background:linear-gradient(180deg,#181510,#13110e); border:1px solid rgba(212,175,55,.2); border-radius:14px; padding:14px 16px; }
details + details{ margin-top:10px; }
summary{ cursor:pointer; font-weight:700; color:#f3eac8; }
details p{ color:#dfd7bf; margin:10px 0 0; }

/* ----------------------------------------------------------
   Footer
---------------------------------------------------------- */
footer{ border-top:1px solid rgba(212,175,55,.16); padding:30px 0; color:#cabf9f; }
footer a{ color:#eaddb8; text-decoration:none; }

/* ----------------------------------------------------------
   Logo animation
---------------------------------------------------------- */
.logo::after{
  content:""; position:absolute; inset:-50% -50%;
  background:linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform:translateX(-120%); pointer-events:none; animation:opviroSheen 4.2s ease-in-out infinite;
}
@keyframes opviroSheen{ 0%{ transform:translateX(-120%);} 55%{ transform:translateX(120%);} 100%{ transform:translateX(120%);} }
@keyframes opviroPulse{
  0%{ filter:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
  50%{ filter:brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 6px 18px rgba(212,175,55,.22);}
  100%{ filter:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
}
@media (prefers-reduced-motion:reduce){
  .logo{ animation:none !important; }
  .logo::after{ animation:none !important; }
}

/* ----------------------------------------------------------
   Forms (register/setup)
---------------------------------------------------------- */
.form-card{ background:linear-gradient(180deg, #191612, #13110e); border:1px solid var(--bd); border-radius:18px; padding:22px; box-shadow:var(--shadow); }
.form-card label{ display:grid; gap:6px; color:#e7dfc6; }
.form-card input, .form-card select, .form-card textarea{
  background:#0f0e0c; border:1px solid var(--bd); border-radius:12px; color:#eee; padding:10px 12px; outline:none;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus{ border-color:rgba(212,175,55,.45); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width:800px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }
.split{ display:flex; align-items:center; gap:8px; }
.alert{ background:#2b2215; border:1px solid rgba(212,175,55,.35); color:#fff1cc; padding:10px 12px; border-radius:12px; }
.muted{ color:#cabb95; font-size:13px; }
/* === Dashboard layout === */
.dash-grid{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:16px;
}
@media (max-width: 1100px){
  .dash-grid{ grid-template-columns: 1fr; }
}

.card--workspace .ws{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  border:1px dashed rgba(212,175,55,.22); border-radius:14px; padding:14px;
  background:linear-gradient(180deg,#17140f,#13110e);
}
.ws__url{ min-width:0; }
.ws__pill{
  display:inline-block; padding:8px 12px; border-radius:10px;
  background:#0f0e0c; border:1px solid var(--bd); color:#e9dfc3;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; white-space:nowrap; overflow:auto;
}
.ws__actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* three mini-cards aligned buttons */
.hcards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
@media (max-width: 980px){ .hcards{ grid-template-columns:1fr; } }

.minicard{
  background:linear-gradient(180deg,#191612,#13110e);
  border:1px solid var(--bd);
  border-radius:18px; padding:18px;
  display:flex; flex-direction:column; min-height:180px;
}
.minicard h4{ margin:0 0 6px; font-size:20px; color:#fff4c2; }
.minicard .actions{ margin-top:auto; }
.minicard .actions .btn{ align-self:flex-start; }

/* steps (improved next steps) */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.step{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  background:linear-gradient(180deg,#181510,#12100d);
  border:1px solid rgba(212,175,55,.18); border-radius:12px; padding:12px;
}
.step__dot{ width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.18); }
.step__text strong{ display:block; color:#fff2bf; }
.step__text span{ display:block; color:#d9cfb5; font-size:13px; }
.step__cta{ padding:8px 12px; }

/* danger card */
.card.danger{
  background:linear-gradient(180deg, #211415, #1a1212);
  border:1px solid rgba(255,80,80,.22);
  border-radius:18px; padding:18px; box-shadow:var(--shadow);
}
.card.danger .btn{
  background:linear-gradient(180deg,#ffd3d3,#ff8d8d 80%);
  border-color:rgba(255,120,120,.6);
}
.card.danger .btn:hover{
  background:linear-gradient(180deg,#ffc4c4,#ff7878 85%);
}
.danger__hr{
  border:0; height:1px; background:rgba(255,120,120,.18);
  margin:14px 0;
}