:root{
  --bg:#0C0C10;
  --bg2:#101014;
  --card:#15151B;
  --card2:#1B1B23;
  --line:#26262F;
  --ink:#F4F3F0;
  --mut:#A3A2AD;
  --acc:#E0965A;
  --acc2:#F2C08A;
  --ok:#67C29A;
  --wrap:1120px;
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--acc);color:#111;padding:10px 14px;border-radius:10px;z-index:99}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(12,12,16,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:-.02em}
.brand__mark{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(140deg,var(--acc),#C97C3F);color:#141418;font-weight:900;font-size:15px}
.nav__links{display:flex;gap:20px;margin-left:auto;font-size:14px;color:var(--mut)}
.nav__links a{text-decoration:none}
.nav__links a:hover{color:var(--ink)}
@media (max-width:720px){.nav__links{display:none}}

/* hero */
.hero{position:relative;padding:84px 0 44px;overflow:hidden}
.hero__aura{position:absolute;inset:0;pointer-events:none}
.hero__aura i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28}
.hero__aura i:nth-child(1){width:460px;height:460px;background:#E0965A;top:-160px;left:-80px}
.hero__aura i:nth-child(2){width:420px;height:420px;background:#4E6FE0;top:-120px;right:-100px;opacity:.2}
.hero__inner{position:relative}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  color:var(--mut);font-size:13px;padding:7px 13px;border-radius:999px}
.pill__dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(103,194,154,.15)}
h1{font-size:clamp(34px,6.4vw,62px);line-height:1.05;letter-spacing:-.035em;margin:20px 0 0;font-weight:800;max-width:16ch}
.grad{background:linear-gradient(100deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--mut);font-size:clamp(16px,2.2vw,19px);max-width:60ch;margin:18px 0 0}
.hero__stats{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0;padding:0;list-style:none}
.hero__stats li{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 14px;font-size:13.5px;color:var(--mut)}
.hero__stats b{color:var(--ink);font-weight:700}

/* sections */
.section{padding:56px 0}
.head{margin:0 0 28px}
.eyebrow{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);font-weight:700}
h2{font-size:clamp(24px,3.6vw,34px);letter-spacing:-.025em;margin:10px 0 0;font-weight:800}
.head p{color:var(--mut);margin:10px 0 0;max-width:62ch}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px}
@media (max-width:720px){.grid{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);border-color:#39323a;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card__top{display:flex;align-items:center;gap:13px}
.icon{width:52px;height:52px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;font-weight:900;font-size:20px;color:#12121a;overflow:hidden}
.icon img{width:100%;height:100%;object-fit:cover}
.card__name{font-size:19px;font-weight:750;letter-spacing:-.02em;margin:0}
.card__plat{font-size:12.5px;color:var(--mut);margin:2px 0 0}
.card__desc{color:#CFCEd6;font-size:14.6px;margin:15px 0 0}
.bul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:7px}
.bul li{position:relative;padding-left:20px;font-size:13.6px;color:var(--mut)}
.bul li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:2px;background:var(--acc);opacity:.85}
.card__foot{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.price{font-weight:800;font-size:17px;letter-spacing:-.01em}
.price small{display:block;font-size:11.5px;font-weight:500;color:var(--mut);letter-spacing:0}
.btns{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:11px;padding:11px 16px;font-size:14px;font-weight:650;
  text-decoration:none;border:1px solid transparent;transition:transform .16s ease,background .2s ease,border-color .2s ease}
.btn:active{transform:scale(.98)}
.btn--primary{background:linear-gradient(140deg,var(--acc),#CE8347);color:#14141A}
.btn--primary:hover{background:linear-gradient(140deg,var(--acc2),var(--acc))}
.btn--soft{background:#20202A;border-color:var(--line);color:var(--ink)}
.btn--soft:hover{border-color:#454050}
.tag{position:absolute;top:16px;right:16px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:#101018;color:var(--mut)}
.tag--best{color:#14141A;background:linear-gradient(140deg,var(--acc),#CE8347);border-color:transparent}
.tag--soon{color:#9AA6C7;border-color:#2B3350;background:#141827}
.card--soon{opacity:.94}
.card--soon .icon{background:#242430;color:var(--mut)}
.soonnote{font-size:13px;color:var(--mut);margin:16px 0 0;border-top:1px dashed var(--line);padding-top:14px}

/* footer */
.foot{border-top:1px solid var(--line);padding:34px 0 46px;color:var(--mut);font-size:13.5px}
.foot__inner{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--mut)}
.foot .sp{margin-left:auto}

/* motion */
[data-fade]{opacity:0;transform:translateY(16px)}
[data-fade].in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1)}
@media (prefers-reduced-motion:reduce){
  [data-fade],[data-fade].in{opacity:1;transform:none;transition:none}
  .card:hover{transform:none}
  html{scroll-behavior:auto}
}

/* a lone card in a section shouldn't sit in a 1/3 column */
.card--wide{grid-column:span 2}
@media (max-width:1040px){.card--wide{grid-column:auto}}