:root{
  --bg:#0B0F14;
  --bg2:#070A0F;

  --surface:#0F1621;
  --surface2:#111B28;

  --border:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.12);

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.66);
  --muted2:rgba(255,255,255,.48);

  /* Orange accent (restore the vibe) */
  --accent:#F97316;
  --accent2:#FB7185;  /* warm secondary for gradients */
  --glow:rgba(249,115,22,.35);

  --radius-sm:10px;
  --radius:14px;
  --radius-lg:18px;

  --shadow:0 10px 30px rgba(0,0,0,.35);
  --shadow2:0 18px 50px rgba(0,0,0,.55);

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:72px;
  --space-9:96px;

  --ease:cubic-bezier(.2,.8,.2,1);
  --dur-1:120ms;
  --dur-2:220ms;
  --dur-3:420ms;

  --container:1120px;

  --h1:clamp(2.2rem, 4.4vw, 4.1rem);
  --h2:clamp(1.55rem, 2.4vw, 2.25rem);
  --h3:1.15rem;
  --body:1rem;
  --small:.92rem;

  --marquee-distance: 1200px;
  --marquee-duration: 30s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(249,115,22,.18), transparent 58%),
    radial-gradient(900px 600px at 85% 20%, rgba(251,113,133,.10), transparent 58%),
    radial-gradient(1200px 700px at 50% 110%, rgba(255,255,255,.06), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  overflow-x:hidden;
}

/* slow drifting orbs (Stripe-ish vibe) */
body:before, body:after{
  content:"";
  position:fixed;
  inset:-200px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(420px 420px at 20% 20%, rgba(249,115,22,.10), transparent 60%),
    radial-gradient(520px 520px at 80% 30%, rgba(251,113,133,.08), transparent 62%),
    radial-gradient(520px 520px at 60% 85%, rgba(255,255,255,.05), transparent 62%);
  filter: blur(2px);
  animation: drift 18s var(--ease) infinite alternate;
  opacity:.9;
}
body:after{
  animation-duration: 26s;
  opacity:.6;
  transform: translate3d(30px, 10px, 0);
}
@keyframes drift{
  from{transform: translate3d(-10px, -10px, 0) scale(1)}
  to{transform: translate3d(18px, 14px, 0) scale(1.02)}
}

/* subtle noise overlay */
.noise{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.06;
  mix-blend-mode: overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

a{color:inherit; text-decoration:none}
a:hover{color:rgba(255,255,255,.98)}

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

.section{
  padding:var(--space-8) 0;
}
@media (max-width: 640px){
  .section{padding:56px 0}
  .container{width:calc(100% - 32px)}
}

.subtle{
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.03));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* Accessibility */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:16px; top:16px; width:auto; height:auto;
  padding:10px 12px; border-radius:10px;
  background:var(--surface); border:1px solid var(--border2);
  z-index:9999;
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* NAV */
.nav-shell{
  position:sticky; top:0; z-index:50;
  background:rgba(11,15,20,.42);
  backdrop-filter: blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.nav-shell.scrolled{
  background:rgba(11,15,20,.72);
  border-bottom-color:var(--border);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{
  width:28px; height:28px; border-radius:10px;
  background:
    radial-gradient(12px 12px at 30% 25%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(18px 18px at 70% 20%, rgba(249,115,22,.30), transparent 55%),
    radial-gradient(14px 14px at 70% 70%, rgba(251,113,133,.20), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.brand-mark.sm{width:22px; height:22px; border-radius:8px}
.brand-text{font-weight:800; letter-spacing:-.02em}

.nav-links{display:flex; gap:18px; align-items:center}
.nav-link{
  font-size:var(--small);
  color:var(--muted);
  padding:8px 10px;
  border-radius:10px;
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.nav-link:hover{
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.9);
}

.nav-actions{display:flex; gap:10px; align-items:center}

.icon-btn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  transition:transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease);
}
.icon-btn:active{transform:translateY(1px)}
.icon-bars{
  display:block; width:18px; height:12px; position:relative;
}
.icon-bars:before,.icon-bars:after{
  content:""; position:absolute; left:0; right:0;
  height:2px; border-radius:2px; background:rgba(255,255,255,.75);
}
.icon-bars:before{top:0}
.icon-bars:after{bottom:0}

.mobile-menu{
  display:none;
  border-top:1px solid var(--border);
  background:rgba(11,15,20,.88);
}
.mobile-menu.open{display:block}
.mobile-menu-inner{padding:14px 0; display:flex; flex-direction:column; gap:10px}
.mobile-menu-actions{display:flex; gap:10px; padding-top:6px}

.hide-sm{display:inline-flex}
.show-sm{display:none}
@media (max-width: 760px){
  .nav-links{display:none}
  .hide-sm{display:none}
  .show-sm{display:inline-flex}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border-radius:14px;
  padding:10px 14px;
  font-weight:700;
  font-size:var(--small);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);
  transition:transform var(--dur-1) var(--ease),
             background var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.btn:hover{background:rgba(255,255,255,.05)}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:12px 16px; border-radius:16px; font-size:1rem}

.btn-primary{
  border-color:rgba(249,115,22,.55);
  background:linear-gradient(180deg, rgba(249,115,22,.26), rgba(249,115,22,.10));
  box-shadow:0 0 0 0 rgba(249,115,22,0);
}
.btn-primary:before{
  content:"";
  position:absolute; inset:-2px;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 20%, transparent 40%);
  transform:translateX(-120%);
  transition:transform 700ms var(--ease);
  opacity:.6;
}
.btn-primary:hover{
  box-shadow:0 0 0 6px rgba(249,115,22,.10), 0 18px 60px rgba(0,0,0,.45);
  transform:translateY(-1px);
}
.btn-primary:hover:before{
  transform:translateX(120%);
}
.btn-ghost{background:transparent}
.w-full{width:100%}

/* Hero */
.hero{padding-top:56px; padding-bottom:46px}
.hero-grid{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap:30px;
  align-items:stretch;
}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr; gap:18px}
  .hero{padding-top:36px}
}

.badge{
  display:inline-flex; align-items:center;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.78);
  font-size:var(--small);
}

.hero-title{
  margin:16px 0 10px 0;
  font-size:var(--h1);
  line-height:1.05;
  letter-spacing:-.04em;
  background:
    radial-gradient(160px 160px at var(--mx,50%) var(--my,35%), rgba(255,255,255,.95), rgba(255,255,255,.62) 40%, rgba(255,255,255,.22) 75%),
    linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-sub{
  margin:0 0 18px 0;
  color:var(--muted);
  font-size:clamp(1.05rem, 1.25vw, 1.18rem);
  line-height:1.6;
}

.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.hero-trust{margin-top:18px; display:flex; flex-direction:column; gap:8px}
.trust-item{color:var(--muted); font-size:var(--small); display:flex; align-items:center; gap:10px}
.trust-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(249,115,22,.9);
  box-shadow:0 0 0 7px rgba(249,115,22,.10);
}

/* Hero media (PNG) */
.hero-media{display:flex; flex-direction:column; gap:10px}
.media-frame{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow2);
  overflow:hidden;
  position:relative;
  min-height: 320px;
}
.hero-image{
  width:100%;
  height:auto;
  display:block;
  transform: translate3d(var(--px,0px), var(--py,0px), 0) scale(1.01);
  transition: transform 380ms var(--ease);
  will-change: transform;
}
.media-frame:hover .hero-image{
  transform: translate3d(var(--px,0px), var(--py,0px), 0) scale(1.03);
}
.media-glow{
  position:absolute; inset:-2px;
  background:
    radial-gradient(360px 360px at 20% 10%, rgba(249,115,22,.22), transparent 58%),
    radial-gradient(320px 320px at 90% 30%, rgba(251,113,133,.14), transparent 60%);
  pointer-events:none;
  opacity:.9;
}
.media-caption{font-size:.9rem}

/* Ticker tape (better spacing + perfect loop) */
.ticker-tape{
  padding:16px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.tape-mask{position:relative; overflow:hidden}
.tape-mask:before, .tape-mask:after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:72px;
  pointer-events:none;
  z-index:2;
}
.tape-mask:before{left:0; background:linear-gradient(90deg, var(--bg), transparent)}
.tape-mask:after{right:0; background:linear-gradient(270deg, var(--bg), transparent)}

.tape-track{
  display:flex;
  align-items:center;
  will-change: transform;
  animation: marquee var(--marquee-duration) linear infinite;
  padding: 10px 0;
}
.tape-track:hover{animation-play-state:paused}

.tape-run{
  display:flex;
  gap:26px;
  align-items:center;
  padding-right:26px;
  white-space:nowrap;
}

.tape-item{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  font-size:var(--small);
  color:rgba(255,255,255,.78);
  letter-spacing:.02em;
}
.tape-item .dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(249,115,22,.95);
  box-shadow:0 0 0 7px rgba(249,115,22,.12);
}

@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--marquee-distance)))}
}
@media (prefers-reduced-motion: reduce){
  .tape-track{animation:none; overflow-x:auto}
}

/* Sections */
.section-head{margin-bottom:22px}
.section-head h1{font-size:var(--h2); margin:0 0 8px 0; letter-spacing:-.02em}
.section-head h2{font-size:var(--h2); margin:0 0 8px 0; letter-spacing:-.02em}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px}
@media (max-width: 900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

.card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.03);
  padding:18px 18px;
  box-shadow:var(--shadow);
  transition:transform var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),
             background var(--dur-2) var(--ease);
  position:relative;
  overflow:hidden;
}
.card:before{
  content:"";
  position:absolute; inset:-2px;
  background:radial-gradient(260px 260px at 15% 10%, rgba(249,115,22,.12), transparent 60%);
  opacity:.0;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}
.card:hover:before{opacity:1}

.card h3{margin:0 0 8px 0}
.card-icon{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  border:1px solid var(--border);
  background:rgba(0,0,0,.14);
  margin-bottom:12px;
  color:rgba(255,255,255,.78);
  font-weight:800;
}

.cta-strip{
  margin-top:22px;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 18px;
  background:linear-gradient(180deg, rgba(249,115,22,.10), rgba(255,255,255,.02));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
@media (max-width: 700px){
  .cta-strip{flex-direction:column; align-items:flex-start}
}
.cta-title{font-weight:900; letter-spacing:-.02em}

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}
@media (max-width: 1000px){
  .pricing-grid{grid-template-columns:1fr}
}
.price-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow);
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.price-card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,.14)}
.price-card.featured{
  border-color:rgba(249,115,22,.42);
  background:linear-gradient(180deg, rgba(249,115,22,.12), rgba(255,255,255,.02));
}
.price-top{display:flex; justify-content:space-between; align-items:flex-end; gap:12px}
.price-name{font-weight:900; letter-spacing:-.02em}
.price-value{font-weight:900; font-size:1.55rem}
.price-list{margin:14px 0 16px 0; padding-left:16px; color:var(--muted)}
.price-list li{margin:10px 0}
.pill{
  display:inline-flex;
  margin-left:8px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(249,115,22,.50);
  background:rgba(249,115,22,.14);
  font-size:.8rem;
  color:rgba(255,255,255,.85);
}
.tiny{font-size:.85rem}

/* FAQ */
.faq{margin-top:46px}
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 900px){.faq-grid{grid-template-columns:1fr}}
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px 14px;
  background:rgba(255,255,255,.02);
}
.faq-item summary{
  cursor:pointer;
  font-weight:800;
  color:rgba(255,255,255,.88);
}
.faq-item > div{margin-top:10px}

/* Auth */
.auth-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 900px){
  .auth-grid{grid-template-columns:1fr}
}
.auth-aside h1{font-size:var(--h2); margin:0 0 8px 0}
.aside-cards{display:grid; gap:10px; margin-top:14px}
.mini-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:14px 14px;
  background:rgba(255,255,255,.02);
}
.mini-title{font-weight:900; margin-bottom:4px}

.auth-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow2);
}

.form{display:flex; flex-direction:column; gap:12px}
.field{display:flex; flex-direction:column; gap:8px}
.field span{color:rgba(255,255,255,.78); font-size:var(--small)}
.field input{
  height:44px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.18);
  color:var(--text);
  padding:0 12px;
  outline:none;
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.field input:focus{
  border-color:rgba(249,115,22,.55);
  box-shadow:0 0 0 7px rgba(249,115,22,.10);
}
.check{display:flex; gap:10px; color:var(--muted); font-size:var(--small); align-items:flex-start}
.check input{margin-top:3px}

.form-msg{min-height:20px; color:var(--muted); font-size:var(--small)}
.form-msg.ok{color:rgba(34,197,94,.85)}
.form-msg.err{color:rgba(239,68,68,.85)}
.form-row{display:flex; justify-content:space-between; align-items:center; margin-top:4px}

/* Reveal */
.reveal{opacity:0; transform:translateY(10px); transition:opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease)}
.reveal.in{opacity:1; transform:none}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  padding:44px 0 28px 0;
  background:rgba(0,0,0,.18);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:16px;
}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.footer-grid{grid-template-columns:1fr}}
.footer-title{font-weight:900; margin-bottom:8px}
.footer-link{display:block; color:var(--muted); padding:6px 0}
.footer-link:hover{color:rgba(255,255,255,.92)}
.footer-bottom{
  display:flex; justify-content:space-between; gap:12px;
  padding-top:16px; margin-top:18px;
  border-top:1px solid var(--border);
}
@media (max-width: 640px){.footer-bottom{flex-direction:column}}

.muted{color:var(--muted)}