/* AUREUM FLOW — Mobile-first kinetic site */
:root{
  --bg:#000; --ink:#EEF2F7; --muted:#A6B1C1; --line:#1D2430;
  --accent:#A6FF2A; --accent2:#0A84FF;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{font:16px/1.6 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}

.bg{position:fixed;inset:0;z-index:-1;background:
 radial-gradient(900px 450px at 50% -10%, rgba(166,255,42,.35), transparent 60%),
 radial-gradient(1000px 600px at 10% 20%, rgba(10,132,255,.22), transparent 60%);
 filter:blur(18px);opacity:.95}

.viewport{height:100svh;overflow:auto;scroll-snap-type:y mandatory}
.screen{min-height:100svh;display:grid;align-items:center;scroll-snap-align:start}
.hero{position:relative}
.hero .logo{width:min(50vw,260px);margin:0 auto 6px;display:block;filter:drop-shadow(0 10px 34px rgba(166,255,42,.32))}
.hero h1{font-size:38px;line-height:1.1;text-align:center;margin:6px 0 6px}
.lead{text-align:center;color:#C9D1DC;margin:0 0 12px}

.wheel{position:relative;width:min(92vw,440px);height:min(92vw,440px);margin:8px auto 0}
.cap{position:absolute;inset:auto;display:flex;align-items:center;justify-content:center;width:44%;height:44%;
  border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px) saturate(140%);
  color:#fff;font-weight:600;letter-spacing:.2px;text-shadow:0 2px 12px rgba(0,0,0,.35);box-shadow:0 10px 28px rgba(0,0,0,.35);}
.cap span{pointer-events:none}
.cap:active{transform:translateY(1px)}

.cap:nth-child(1){top:0;left:28%}
.cap:nth-child(2){top:28%;right:0}
.cap:nth-child(3){bottom:0;left:28%}
.cap:nth-child(4){top:28%;left:0}

.hint{text-align:center;color:#A6B1C1;margin-top:10px;font-size:14px}
.scroll-indicator{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#9BA7B8;font-size:12px}

.content .wrap{max-width:1100px;margin:0 auto;padding:22px 16px}
.content h2{margin:0 0 10px}
.content.alt{background:rgba(255,255,255,.02);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.cards{display:grid;grid-template-columns:1fr;gap:10px}
.card{padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.list{margin:0 0 0 18px}
.tiers{display:grid;grid-template-columns:1fr;gap:10px}
.price{padding:16px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.amt{font-size:24px;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}

.form{display:grid;gap:10px;max-width:520px}
.form input,.form textarea{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff}
.btn{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.06));color:#fff}
.meta{color:var(--muted);text-align:center}
.links{text-align:center}
.links a{color:inherit}

@media (min-width:768px){
  .hero h1{font-size:56px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .tiers{grid-template-columns:repeat(3,1fr)}
  .wheel{width:520px;height:520px}
}


/* v2: Orbital ring menu + smooth section reveals */
.wheel{position:relative;width:min(92vw,460px);height:min(92vw,460px);margin:12px auto 0}
.wheel::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 60px rgba(10,132,255,.15) inset}
.cap{width:44%;height:64px}
/* place around a circle */
.wheel .cap:nth-child(1){top:2%;left:50%;transform:translate(-50%,0)}
.wheel .cap:nth-child(2){top:50%;right:2%;transform:translate(0,-50%)}
.wheel .cap:nth-child(3){bottom:2%;left:50%;transform:translate(-50%,0)}
.wheel .cap:nth-child(4){top:50%;left:2%;transform:translate(0,-50%)}
/* add subtle hover/active glow */
.cap:active, .cap:focus{box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 10px 32px rgba(0,0,0,.4)}

/* soften snap feel */
.viewport{scroll-snap-type:y proximity}
.screen{scroll-margin-top:6svh;transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease}
.screen.reveal{opacity:1;transform:translateY(0)}
.screen{opacity:.92;transform:translateY(8px)}
/* reduce harshness of section edges */
.content.alt{background:rgba(255,255,255,.03)}


/* v3: Professional glass button row */
.glass-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:680px;margin:12px auto 6px}
.gbtn{display:flex;align-items:center;gap:10px;justify-content:center;padding:12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(16px) saturate(140%);color:#fff;text-decoration:none;font-weight:600;letter-spacing:.2px}
.gbtn .ring{width:20px;height:20px;border-radius:50%;border:2px solid rgba(166,255,42,.65);
  box-shadow:0 0 10px rgba(166,255,42,.45),0 0 18px rgba(10,132,255,.25),inset 0 0 6px rgba(255,255,255,.12)}
.gbtn:active{transform:translateY(1px)}
.trustline{text-align:center;color:#C2C9D3;margin:8px 0 0;font-weight:600;letter-spacing:.2px}

/* neutralize wheel remnants */
.wheel, .hint, .scroll-indicator{display:none}


/* v4: Smooth scrolling and refined pricing */
html{scroll-behavior:smooth}
.viewport{height:100svh;overflow:auto;scroll-snap-type:y proximity}
.screen{scroll-margin-top:8svh;transition:opacity .45s ease, transform .45s ease;opacity:1;transform:none}

.tiers-rich{display:grid;grid-template-columns:1fr;gap:12px}
.price header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.pf{margin:6px 0 0 18px;color:#C9D1DC}
.pf li{margin:4px 0}
@media (min-width:768px){
  .tiers-rich{grid-template-columns:repeat(3,1fr)}
}