:root{
  --bg0:#07060a;
  --bg1:#0b0a10;
  --bg2:#0f0d16;
  --surface: rgba(18,16,26,.72);
  --surface2: rgba(14,12,20,.72);
  --stroke: rgba(231,192,106,.42);
  --stroke2: rgba(231,192,106,.22);
  --gold:#e7c06a;
  --gold2:#f1d187;
  --text:#f3f0e7;
  --muted: rgba(243,240,231,.72);
  --muted2: rgba(243,240,231,.56);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --glow: 0 0 0 1px rgba(231,192,106,.55), 0 16px 60px rgba(231,192,106,.08);
  --radius: 18px;
  --radius2: 22px;
  --max: 1120px;
  --ease: cubic-bezier(.2,.9,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 15% 0%, rgba(231,192,106,.10), transparent 55%),
              radial-gradient(900px 700px at 90% 20%, rgba(231,192,106,.07), transparent 60%),
              radial-gradient(1000px 700px at 50% 100%, rgba(255,255,255,.05), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg2));
  overflow-x:hidden;
}

a{color:inherit}

.container{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
}

.bg{
  position:fixed;
  inset:0;
  z-index:-1;
}
.bg__vignette{
  position:absolute;
  inset:-20vh -10vw;
  background: radial-gradient(60% 60% at 50% 20%, rgba(0,0,0,.25), rgba(0,0,0,.62) 55%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
}
.bg__grid{
  position:absolute;
  inset:0;
  opacity:.20;
  background:
    linear-gradient(rgba(231,192,106,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,192,106,.10) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(60% 45% at 50% 10%, black 30%, transparent 70%);
  pointer-events:none;
}

.nav{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(6,5,9,.78), rgba(6,5,9,.40));
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
}
.nav__divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(231,192,106,.40), transparent);
}

.brand{display:flex; align-items:center; gap:12px; letter-spacing:.08em}
.brand__mark{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--gold2);
  background: radial-gradient(120% 120% at 30% 20%, rgba(231,192,106,.24), rgba(18,16,26,.75));
  box-shadow: 0 0 0 1px rgba(231,192,106,.35), 0 20px 50px rgba(0,0,0,.45);
  font-weight:800;
}
.brand__text{
  font-weight:650;
  font-size:12px;
  text-transform:uppercase;
  color: rgba(243,240,231,.86);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid rgba(231,192,106,.55);
  background: linear-gradient(180deg, rgba(231,192,106,.18), rgba(231,192,106,.06));
  color: var(--gold2);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  box-shadow: 0 0 0 1px rgba(231,192,106,.14), 0 18px 60px rgba(231,192,106,.08);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.btn:focus-visible{outline:2px solid rgba(241,209,135,.85); outline-offset:3px}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(241,209,135,.72);
  box-shadow: 0 0 0 1px rgba(231,192,106,.20), 0 24px 70px rgba(231,192,106,.12);
  background: linear-gradient(180deg, rgba(231,192,106,.22), rgba(231,192,106,.07));
}

.hero{padding:48px 0 84px}
.hero__inner{display:flex; flex-direction:column; gap:26px}
.hero__top{padding-top:10px}

.eyebrow{display:inline-flex; align-items:center; gap:10px; margin-bottom:14px}
.eyebrow__dot{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(241,209,135,.95), rgba(231,192,106,.35));
  box-shadow: 0 0 0 1px rgba(231,192,106,.35), 0 0 26px rgba(231,192,106,.18);
}
.eyebrow__text{
  color: rgba(231,192,106,.92);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  font-size:11px;
}

.h1{
  margin:0;
  font-size: clamp(40px, 5vw, 64px);
  line-height:1.02;
  letter-spacing:-.02em;
  font-weight:800;
  background: linear-gradient(180deg, rgba(241,209,135,1), rgba(231,192,106,.78));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.subtext{margin:14px 0 0; color:var(--muted); max-width: 64ch; font-size:16px; line-height:1.6}

.hero__rule{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(231,192,106,.50), transparent);
  opacity:.9;
}

.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:14px 0 18px}
.h2{
  margin:0;
  font-size: 22px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  color: rgba(241,209,135,.95);
}
.h3{
  margin:0;
  font-size: 14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:800;
  color: rgba(241,209,135,.92);
}
.muted{margin:0; color:var(--muted2); font-size:13px; line-height:1.55; max-width: 60ch}

.pricing__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
}

.card{
  position:relative;
  border-radius: var(--radius2);
  background: linear-gradient(180deg, rgba(18,16,26,.78), rgba(12,10,18,.66));
  border:1px solid rgba(231,192,106,.36);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translateY(10px);
  opacity:0;
  transition: transform .8s var(--ease), opacity .8s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.card.is-visible{transform: translateY(0); opacity:1}
.card:hover{border-color: rgba(241,209,135,.62); box-shadow: var(--shadow), 0 0 0 1px rgba(231,192,106,.24), 0 26px 90px rgba(231,192,106,.10)}

.card__cap{display:flex; align-items:center; justify-content:space-between; padding:18px 18px 10px; position:relative}
.card__glow{
  position:absolute;
  inset:-40px -80px auto;
  height:120px;
  background: radial-gradient(closest-side at 50% 50%, rgba(231,192,106,.18), transparent 70%);
  filter: blur(2px);
  pointer-events:none;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(231,192,106,.40);
  background: linear-gradient(180deg, rgba(231,192,106,.12), rgba(0,0,0,.10));
  color: rgba(241,209,135,.92);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:11px;
  font-weight:800;
}
.chip--silver{color: rgba(241,209,135,.85)}
.chip--gold{color: rgba(241,209,135,.98)}
.chip--platinum{color: rgba(243,240,231,.88)}

.card__title{
  margin: 2px 18px 0;
  font-size: 20px;
  font-weight:800;
  letter-spacing:-.01em;
  color: rgba(243,240,231,.94);
}

.card__meta{
  margin: 12px 18px 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.meta dt{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(231,192,106,.82);
  margin-bottom:6px;
}
.meta dd{
  margin:0;
  color: rgba(243,240,231,.86);
  font-weight:650;
  line-height:1.35;
}
.price{
  color: rgba(241,209,135,.95);
  font-weight:900;
  letter-spacing:.06em;
}

.card__divider{
  height:1px;
  margin:16px 18px 10px;
  background: linear-gradient(90deg, transparent, rgba(231,192,106,.50), transparent);
}

.card__list{list-style:none; padding:0 18px 18px; margin:0; display:grid; gap:10px}
.card__list li{display:flex; gap:10px; align-items:flex-start; color: rgba(243,240,231,.80); line-height:1.5; font-size:13px}
.check{color: rgba(231,192,106,.88); flex:0 0 auto; margin-top:1px}

.card--featured{
  border-color: rgba(241,209,135,.70);
  box-shadow: var(--shadow), 0 0 0 1px rgba(231,192,106,.28), 0 30px 110px rgba(231,192,106,.10);
}
.badge{
  margin: 0 18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(231,192,106,.14), rgba(231,192,106,.06));
  border: 1px solid rgba(231,192,106,.36);
  color: rgba(241,209,135,.92);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:10px;
}
.badge__dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(241,209,135,.95);
  box-shadow: 0 0 18px rgba(231,192,106,.28);
}

.note{
  margin-top: 18px;
  border-radius: var(--radius2);
  border: 1px solid rgba(231,192,106,.45);
  background: linear-gradient(180deg, rgba(231,192,106,.12), rgba(18,16,26,.60));
  box-shadow: var(--shadow);
}
.note__inner{display:flex; gap:14px; padding:18px}
.note__icon{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:14px;
  border:1px solid rgba(231,192,106,.42);
  background: radial-gradient(120% 120% at 30% 20%, rgba(231,192,106,.22), rgba(12,10,18,.70));
  color: rgba(241,209,135,.92);
  box-shadow: 0 0 0 1px rgba(231,192,106,.12);
  flex:0 0 auto;
}
.note__text{margin:10px 0 0; color: rgba(243,240,231,.84); line-height:1.65; font-size:14px}

.offers{margin-top: 26px}
.icon-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
.icon-item{
  border-radius: var(--radius);
  border:1px solid rgba(231,192,106,.24);
  background: linear-gradient(180deg, rgba(18,16,26,.68), rgba(12,10,18,.52));
  padding:14px 14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  transform: translateY(8px);
  opacity:0;
  transition: transform .75s var(--ease), opacity .75s var(--ease), border-color .25s var(--ease);
}
.icon-item.is-visible{transform: translateY(0); opacity:1}
.icon-item:hover{border-color: rgba(231,192,106,.48)}
.icon{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius: 12px;
  border:1px solid rgba(231,192,106,.30);
  background: radial-gradient(120% 120% at 30% 20%, rgba(231,192,106,.16), rgba(0,0,0,.10));
  color: rgba(231,192,106,.92);
  flex: 0 0 auto;
}
.icon-item__text{color: rgba(243,240,231,.82); line-height:1.55; font-size:13px; padding-top:2px}

.process{margin-top: 26px}
.flow{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.step{
  border-radius: var(--radius2);
  border:1px solid rgba(231,192,106,.26);
  background: linear-gradient(180deg, rgba(18,16,26,.68), rgba(12,10,18,.52));
  padding:16px;
  box-shadow: 0 14px 50px rgba(0,0,0,.40);
  transform: translateY(10px);
  opacity:0;
  transition: transform .8s var(--ease), opacity .8s var(--ease), border-color .25s var(--ease);
}
.step.is-visible{transform: translateY(0); opacity:1}
.step:hover{border-color: rgba(231,192,106,.48)}
.step__top{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.step__num{
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius: 16px;
  border: 1px solid rgba(231,192,106,.44);
  background: radial-gradient(120% 120% at 30% 20%, rgba(231,192,106,.20), rgba(0,0,0,.12));
  color: rgba(241,209,135,.95);
  font-weight:900;
  letter-spacing:.14em;
}
.step__connector{
  height:1px;
  flex:1;
  background: linear-gradient(90deg, rgba(231,192,106,.60), rgba(231,192,106,.12));
  box-shadow: 0 0 18px rgba(231,192,106,.12);
}
.step__title{margin:0; font-size:15px; letter-spacing:.10em; text-transform:uppercase; font-weight:850; color: rgba(243,240,231,.92)}
.step__text{margin:10px 0 0; color: rgba(243,240,231,.78); line-height:1.65; font-size:13px}

.terms,.notes{margin-top: 22px}
.terms__box,.notes__box{
  border-radius: var(--radius2);
  border:1px solid rgba(231,192,106,.28);
  background: linear-gradient(180deg, rgba(18,16,26,.62), rgba(12,10,18,.50));
  box-shadow: 0 18px 60px rgba(0,0,0,.42);
  padding: 16px;
}
.terms__list,.notes__list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.terms__list li,.notes__list li{display:flex; gap:10px; align-items:flex-start; color: rgba(243,240,231,.82); line-height:1.65; font-size:13px}
.dot{
  width:8px; height:8px; border-radius:999px;
  margin-top:7px;
  background: rgba(231,192,106,.85);
  box-shadow: 0 0 18px rgba(231,192,106,.18);
  flex: 0 0 auto;
}

.cta{margin-top: 34px}
.cta__inner{
  border-radius: 26px;
  border: 1px solid rgba(231,192,106,.34);
  background: radial-gradient(1200px 260px at 50% 0%, rgba(231,192,106,.14), transparent 65%),
              linear-gradient(180deg, rgba(18,16,26,.66), rgba(12,10,18,.52));
  box-shadow: 0 28px 110px rgba(0,0,0,.55);
  padding: 26px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.cta__rule{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(231,192,106,.65), transparent);
  margin-bottom: 16px;
}
.cta__hint{
  position:absolute;
  inset:auto 0 0 0;
  height: 70px;
  display:flex;
  justify-content:center;
  gap:18px;
  pointer-events:none;
  opacity:.7;
}
.cta__spark{
  width:120px;
  height:120px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(241,209,135,.18), transparent 60%);
  filter: blur(1px);
  transform: translateY(46px);
  animation: float 5.8s var(--ease) infinite;
}
.cta__spark:nth-child(2){animation-duration: 6.8s; animation-delay:-1.1s; opacity:.7}
.cta__spark:nth-child(3){animation-duration: 7.6s; animation-delay:-2.3s; opacity:.55}

@keyframes float{
  0%,100%{transform: translateY(52px)}
  50%{transform: translateY(40px)}
}

@media (max-width: 980px){
  .pricing__grid{grid-template-columns: 1fr;}
  .icon-grid{grid-template-columns: 1fr 1fr;}
  .flow{grid-template-columns: 1fr;}
  .section__head{align-items:flex-start; flex-direction:column}
}

@media (max-width: 520px){
  .container{width:min(var(--max), calc(100% - 32px))}
  .icon-grid{grid-template-columns: 1fr;}
  .card__meta{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  .card,.icon-item,.step{transition:none}
  .cta__spark{animation:none}
  .btn{transition:none}
}