/* =========================================================
   TapEato — Premium SaaS Landing
   Design system + components
   ========================================================= */

:root{
  /* Surfaces */
  --bg:        #0B0B0F;
  --bg-2:      #0d0d13;
  --surface:   #111827;
  --surface-2: #151c2c;
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);

  /* Brand */
  --purple:    #7C3AED;
  --purple-2:  #9d5bf6;
  --blue:      #2563EB;
  --blue-2:    #4f86f7;
  --grad:      linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
  --grad-soft: linear-gradient(135deg, rgba(124,58,237,.16), rgba(37,99,235,.16));

  /* Text */
  --ink:       #F4F5FB;
  --ink-soft:  rgba(244,245,251,0.72);
  --ink-mute:  rgba(244,245,251,0.46);
  --ink-faint: rgba(244,245,251,0.30);

  /* Type */
  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Geometry */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --maxw: 1200px;
  --shadow: 0 30px 80px -30px rgba(0,0,0,0.8);
  --glow-p: 0 0 60px -10px rgba(124,58,237,0.55);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(124,58,237,.45); color:#fff; }

/* Ambient grain / vignette over whole page */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(124,58,237,0.16), transparent 60%),
    radial-gradient(1000px 600px at 0% 10%, rgba(37,99,235,0.13), transparent 55%);
}

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

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--purple-2);
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--purple-2));
}
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:-0.02em; }
.section-title{ font-size:clamp(32px, 4.4vw, 52px); margin:18px 0 16px; text-wrap:balance; }
.section-sub{ color:var(--ink-soft); font-size:clamp(16px,1.4vw,19px); max-width:620px; }
.center{ text-align:center; }
.center .section-sub{ margin-inline:auto; }
.gradient-text{
  background:linear-gradient(120deg,#fff 0%, #c9b6ff 40%, #7fa6ff 75%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--body); font-weight:600; font-size:15.5px;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 24px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .3s, background .3s, border-color .3s;
  position:relative; white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{
  color:#fff; background:var(--grad);
  box-shadow:0 10px 30px -10px rgba(124,58,237,.7), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -12px rgba(124,58,237,.85), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost{
  color:var(--ink); background:rgba(255,255,255,0.04);
  border-color:var(--border-2); backdrop-filter:blur(10px);
}
.btn-ghost:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,.28); }
.btn svg{ width:17px; height:17px; }

/* ---------- Section rhythm ---------- */
section{ position:relative; padding:clamp(80px,10vw,140px) 0; z-index:1; }
.section-head{ margin-bottom:56px; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.40s; }
.reveal[data-d="6"]{ transition-delay:.48s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}