/* Monica AI PRO landing — shared tokens, base, a11y */
:root{
  --cyan-glow:#00D9FF;
  --electric-blue:#0EA5E9;
  --deep-cyan:#06B6D4;
  --neon-cyan:#22D3EE;
  --warm-amber:#F59E0B;
  --golden-glow:#FBBF24;
  --soft-gold:#FCD34D;
  --midnight:#020617;
  --deep-navy:#0F172A;
  --slate-dark:#1E293B;
  --gunmetal:#334155;
  --passion-red:#DC2626;
  --white:#FFFFFF;
  --soft-gray:#94A3B8;
  --muted:#64748B;
  --grad-cyan: linear-gradient(135deg,#00D9FF 0%,#0EA5E9 100%);
  --grad-amber: linear-gradient(135deg,#F59E0B 0%,#FBBF24 100%);
  --grad-fusion: linear-gradient(135deg,#00D9FF 0%,#F59E0B 100%);
  --grad-card: linear-gradient(145deg, rgba(30,41,59,.8) 0%, rgba(15,23,42,.9) 100%);
  --grad-hero: linear-gradient(135deg,#020617 0%,#0F172A 50%,#020617 100%);
  --pad-x: clamp(16px, 4vw, 48px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--midnight);overflow-x:hidden}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--midnight);
  color:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.mono{font-family:'JetBrains Mono',monospace}

.container{width:100%;margin:0 auto;padding:0 var(--pad-x)}

h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em;line-height:1.15}
h1{font-size:clamp(44px,7vw,80px);font-weight:900;letter-spacing:-.04em;line-height:1.05}
h2{font-size:clamp(34px,4.5vw,52px);letter-spacing:-.03em}
h3{font-size:clamp(22px,2.4vw,30px)}
h4{font-size:20px;font-weight:700}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan-glow);
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--cyan-glow)}

.grad-text{
  background:linear-gradient(135deg,#fff 0%,#00D9FF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.amber-text{
  background:var(--grad-amber);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fusion-text{
  background:var(--grad-fusion);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.btn-primary, .btn-secondary, .btn-tertiary{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 26px;border-radius:12px;font-size:15px;font-weight:600;
  transition:all .3s ease;min-height:44px;
}
.btn-primary{
  background:var(--grad-cyan);color:var(--midnight);
  box-shadow:0 10px 40px rgba(0,217,255,.32);
}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 56px rgba(0,217,255,.5)}
.btn-secondary{
  background:transparent;border:2px solid rgba(0,217,255,.5);color:var(--cyan-glow);
}
.btn-secondary:hover:not(:disabled){background:rgba(0,217,255,.08);border-color:var(--cyan-glow)}
.btn-tertiary{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--white);
}
.btn-tertiary:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.btn-primary svg, .btn-secondary svg{width:18px;height:18px}

.btn-soon:disabled,
button[disabled].btn-soon,
a.btn-soon[aria-disabled="true"]{
  opacity:.55;cursor:not-allowed;pointer-events:none;
  box-shadow:none;transform:none;
}
.soon-badge{
  display:inline-flex;align-items:center;
  margin-left:8px;padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(245,158,11,.2);color:var(--warm-amber);border:1px solid rgba(245,158,11,.35);
}

/* Dual view trees */
#view-desktop, #view-mobile{width:100%}
#view-desktop[hidden], #view-mobile[hidden]{display:none !important}
#view-desktop.is-inactive,
#view-mobile.is-inactive{
  display:none !important;
  pointer-events:none;
}
#view-desktop.is-inactive a,
#view-desktop.is-inactive button,
#view-desktop.is-inactive input,
#view-desktop.is-inactive summary,
#view-mobile.is-inactive a,
#view-mobile.is-inactive button,
#view-mobile.is-inactive input,
#view-mobile.is-inactive summary{tabindex:-1}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  .particle,.float-badge,.glow-ring,.badge-new .dot{animation:none !important}
}

#toast-soon{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);
  z-index:9999;padding:12px 20px;border-radius:12px;
  background:rgba(15,23,42,.95);border:1px solid rgba(0,217,255,.35);
  color:var(--white);font-size:14px;font-weight:600;
  box-shadow:0 16px 48px rgba(0,0,0,.45);
  transition:transform .35s ease, opacity .35s ease;
  opacity:0;pointer-events:none;
}
#toast-soon.show{transform:translateX(-50%) translateY(0);opacity:1}