:root{
  --bg0:#050607;
  --bg1:#07090b;

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.62);
  --muted2:rgba(255,255,255,.42);

  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);

  --card:rgba(255,255,255,.040);
  --card2:rgba(255,255,255,.055);

  /* NEW ACCENT */
  --accent:#525f7f;
  --accentGlow: rgba(82,95,127,.38);
  --accentGlow2: rgba(82,95,127,.22);

  --shadow: 0 30px 90px rgba(0,0,0,.62);

  --r:18px;
  --r2:26px;
  --max:1100px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* background */
.bg{ position:fixed; inset:0; pointer-events:none; z-index:0; }
.bg__radial{
  position:absolute; inset:-140px;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(680px 560px at 18% 58%, var(--accentGlow), transparent 60%),
    radial-gradient(680px 560px at 82% 50%, var(--accentGlow2), transparent 62%);
  filter:saturate(1.02);
}
.bg__vignette{
  position:absolute; inset:0;
  background: radial-gradient(1200px 700px at 50% 40%, transparent 40%, rgba(0,0,0,.65) 78%);
}
.bg__noise{
  position:absolute; inset:0;
  opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.wrap{
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* top bar */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(5,6,7,.86), rgba(5,6,7,.55));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.6px;
}
.brand__icon{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:12px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.50);
}
.brand__icon svg{ width:22px; height:22px; }
.brand__text{ font-size:22px; }

.links{
  display:flex;
  gap:22px;
  font-size:13px;
  color: rgba(255,255,255,.76);
}
.links a{
  text-decoration:none;
  color:inherit;
  padding:8px 10px;
  border-radius:12px;
  transition: background .18s ease, transform .18s ease, color .18s ease;
}
.links a:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
  color: rgba(255,255,255,.92);
}

/* hero */
.hero{
  padding:64px 0 52px;
  min-height: 64vh;
  display:grid;
  place-items:center;
}
.hero__center{
  text-align:center;
  max-width: 820px;
}

/* pill above title */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.82);
  font-size:12px;
  letter-spacing:.38px;
  box-shadow: 0 22px 80px rgba(0,0,0,.52);
}
.pill__dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(82,95,127,.18);
}

.title{
  margin:18px 0 10px;
  font-size: clamp(46px, 5.8vw, 74px);
  line-height:1.02;
  letter-spacing:-1px;
}
.title__ghost{
  display:block;
  margin-top:10px;
  color: rgba(255,255,255,.33);
  font-weight:900;
}

.subtitle{
  margin: 10px auto 22px;
  max-width: 62ch;
  color: rgba(255,255,255,.50);
  line-height:1.65;
  font-size:15px;
}

/* floating UI pills */
.float{
  position:absolute;
  width: 260px;
  height: 60px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color: rgba(255,255,255,.66);
  font-size:12px;
  opacity:.75;
  animation: float 6.5s ease-in-out infinite;
}
.float__dot{
  width:9px; height:9px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(82,95,127,.14);
}
.float__bar{
  width:78px; height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}

.float--l1{ left:-30px; top:110px; }
.float--r1{ right:-30px; top:150px; animation-delay: 1.1s; }
.float--l2{ left:40px; top:230px; opacity:.62; animation-delay: .6s; }
.float--r2{ right:50px; top:260px; opacity:.62; animation-delay: 1.6s; }

@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

/* Buy row — FULL CARD IS BIGGER */
.buyRow{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1.25fr 0.85fr; /* full bigger */
  gap:16px;
  align-items:stretch;
}

/* buy cards */
.buyCard{
  text-decoration:none;
  color:inherit;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.040);
  box-shadow: 0 34px 120px rgba(0,0,0,.70);
  padding:18px 18px 16px;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.buyCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.052);
}

/* “glass” soft shine */
.buyCard::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 10%, rgba(255,255,255,.16), transparent 58%),
    radial-gradient(90% 70% at 85% 0%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%, rgba(0,0,0,.22));
  opacity:.60;
}
.buyCard__shine{
  position:absolute; inset:-40px;
  background: radial-gradient(520px 260px at 30% 20%, rgba(82,95,127,.30), transparent 60%);
  filter: blur(10px);
  opacity:.55;
  pointer-events:none;
}

.buyCard__top{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.tag{
  display:inline-flex;
  font-size:11px;
  letter-spacing:.38px;
  color: rgba(255,255,255,.72);
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
}
.tag--accent{
  border-color: rgba(82,95,127,.40);
  background: rgba(82,95,127,.16);
  color: rgba(255,255,255,.82);
}

/* PRICES */
.price{
  font-weight:900;
  font-size:30px;
  letter-spacing:-.6px;
  white-space:nowrap;
}
.price--big{
  font-size:44px; /* bigger full version price */
  letter-spacing:-1px;
  line-height:1;
}

.buyCard__desc{
  position:relative;
  margin-top:10px;
  font-size:14px;
  color: rgba(255,255,255,.60);
}

.buyCard__cta{
  position:relative;
  margin-top:14px;
  width:100%;
  text-align:center;
  padding:12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.075);
  color: rgba(255,255,255,.92);
  font-weight:900;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.buyCard:hover .buyCard__cta{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
}

/* featured full CTA */
.buyCard__cta--accent{
  border-color: rgba(82,95,127,.45);
  background: linear-gradient(180deg, rgba(82,95,127,.92), rgba(82,95,127,.75));
  color: rgba(255,255,255,.96);
}

.buyCard__meta{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  font-size:12px;
  color: rgba(255,255,255,.50);
}
.metaDot{
  width:7px; height:7px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(82,95,127,.12);
}
.metaDot--muted{
  background: rgba(255,255,255,.35);
  box-shadow:none;
}

/* section */
.section{
  padding: 18px 0 70px;
}
.sectionTitle{
  text-align:center;
  font-size: 36px;
  letter-spacing:-.7px;
  margin: 0 0 26px;
  color: rgba(255,255,255,.90);
}

.grid{
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.028);
  overflow:hidden;
  box-shadow: 0 28px 120px rgba(0,0,0,.70);
  display:grid;
  grid-template-columns: 1fr 1fr;
}

.panel{
  padding: 24px 24px 22px;
  min-height: 175px;
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.018);
}
.panel:nth-child(2n){ border-right:none; }
.panel:nth-last-child(-n+2){ border-bottom:none; }

.panel__kicker{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:.38px;
  color: rgba(255,255,255,.52);
  margin-bottom: 10px;
}

.kdot{
  width:6px; height:6px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(82,95,127,.12);
}
.kdot--muted{
  background: rgba(255,255,255,.35);
  box-shadow:none;
}

.panel__text{
  margin:0;
  line-height:1.75;
  color: rgba(255,255,255,.64);
  font-size:15px;
  max-width: 54ch;
}

.miniBtn{
  display:inline-flex;
  margin-top: 14px;
  padding:9px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.72);
  font-size:12px;
}

.tinyRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 12px;
}
.tiny{
  color: rgba(255,255,255,.48);
  font-size:12px;
}

.codeRow{
  margin-top: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding: 10px 12px;
}
code{
  color: rgba(255,255,255,.70);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

/* footer */
.footer{ padding: 40px 0 46px; }
.footLine{
  height:1px;
  background: rgba(255,255,255,.06);
  margin-bottom: 16px;
}
.footRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.muted{ color: rgba(255,255,255,.50); font-size:12px; }

/* responsive */
@media (max-width: 980px){
  .links{ display:none; }
  .float{ display:none; }
  .buyRow{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .panel{ border-right:none !important; }
  .panel:nth-last-child(-n+2){ border-bottom: 1px solid rgba(255,255,255,.06); }
  .panel:last-child{ border-bottom:none; }
}


html, body {
  scrollbar-width: none;         
  -ms-overflow-style: none;       
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  
}