/* ─────────────────────────────────────────────────────────────
   Simply AI Sites — hero design system
   ───────────────────────────────────────────────────────────── */

/* Smooth in-page scrolling for the single-page nav anchors. */
html { scroll-behavior: smooth; }
:target,
section[id],
[id="contact"] { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:root {
  --ink:        oklch(0.16 0.035 255);
  --ink-2:      oklch(0.28 0.04 255);
  --ink-3:      oklch(0.48 0.035 250);
  --paper:      oklch(0.985 0.006 240);
  --paper-2:    oklch(0.965 0.012 235);
  --paper-3:    oklch(0.93 0.018 230);
  --indigo:     oklch(0.55 0.20 262);
  --indigo-2:   oklch(0.42 0.21 265);
  --violet:     oklch(0.60 0.18 270);
  --teal:       oklch(0.72 0.14 215);
  --sky:        oklch(0.78 0.13 235);
  --cyan:       oklch(0.82 0.13 220);
  --coral:      oklch(0.74 0.16 222);
  --amber:      oklch(0.84 0.13 232);
  --lime:       oklch(0.88 0.13 200);
  --halo:       0 30px 80px -20px color-mix(in oklch, var(--indigo) 45%, transparent), 0 8px 24px -12px color-mix(in oklch, var(--violet) 35%, transparent);
  --card-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(15, 23, 42, .04), 0 12px 40px -16px rgba(15, 23, 42, .18);
  --font-display: "Geist", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-body:    "Geist", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --tight: -0.04em;
  --tighter: -0.055em;
}

html, body { margin: 0; padding: 0; font-family: var(--font-body); color: var(--ink); background: #ffffff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
* { box-sizing: border-box; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

.fp-modern    { --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --tight: -0.04em; --tighter: -0.055em; }
.fp-editorial { --font-display: "Instrument Serif", "Times New Roman", serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, monospace; --tight: -0.025em; --tighter: -0.035em; }
.fp-display   { --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --tight: -0.035em; --tighter: -0.05em; }

.stage { position: relative; width: 100%; min-height: 100vh; overflow: hidden; }
.nav { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 4vw, 56px); }
.nav .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: var(--tight); color: inherit; text-decoration: none; }
.logo-mark { width: 28px; height: 28px; border-radius: 8px; position: relative; background: conic-gradient(from 140deg at 50% 50%, var(--indigo), var(--violet), var(--coral), var(--teal), var(--indigo)); box-shadow: 0 4px 16px -4px color-mix(in oklch, var(--indigo) 50%, transparent); }
.logo-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 4px; background: var(--paper); }
.logo-mark.dark::after { background: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 450; color: color-mix(in oklch, currentColor 78%, transparent); }
.nav-links a { color: inherit; text-decoration: none; transition: color .15s ease; }
.nav-links a:hover { color: currentColor; }
.nav-right { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.nav-right .login { color: color-mix(in oklch, currentColor 78%, transparent); text-decoration: none; }
.nav-right .login:hover { color: currentColor; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 0; font-weight: 500; font-size: 14px; letter-spacing: -0.005em; white-space: nowrap; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(0,0,0,.25); }
.btn-ghost-light { background: rgba(255,255,255,.08); color: var(--paper); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); }
.hero-form { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.hero-form .field { position: relative; display: flex; align-items: center; background: rgba(255,255,255,.85); border: 1px solid rgba(15, 23, 42, .08); border-radius: 14px; height: 54px; padding: 0 18px 0 50px; box-shadow: var(--card-shadow); transition: border-color .15s ease, box-shadow .15s ease; }
.hero-form .field input { flex: 1; border: 0; outline: 0; background: transparent; height: 100%; font-size: 15px; color: var(--ink); }
.hero-form .field input::placeholder { color: color-mix(in oklch, var(--ink) 45%, transparent); }
.hero-form .field .icon { position: absolute; left: 18px; width: 18px; height: 18px; color: color-mix(in oklch, var(--ink) 50%, transparent); }
.hero-form .submit { height: 56px; border-radius: 14px; border: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: white; background: linear-gradient(135deg, var(--indigo) 0%, var(--violet) 55%, var(--coral) 110%); position: relative; overflow: hidden; box-shadow: 0 10px 30px -10px color-mix(in oklch, var(--indigo) 55%, transparent), 0 2px 4px -1px rgba(15,23,42,.1), 0 0 0 1px rgba(255,255,255,.18) inset; transition: transform .2s ease, box-shadow .2s ease; }
.hero-form .submit:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -8px color-mix(in oklch, var(--indigo) 60%, transparent), 0 0 0 1px rgba(255,255,255,.22) inset; }
.hero-form .submit .arrow { display: inline-block; margin-left: 8px; transition: transform .25s ease; }
.hero-form .submit:hover .arrow { transform: translateX(4px); }
.hero-form .submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-100%); transition: transform .8s ease; }
.hero-form .submit:hover::after { transform: translateX(100%); }
.trust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: color-mix(in oklch, currentColor 65%, transparent); }
.trust .item { display: inline-flex; align-items: center; gap: 6px; }
.trust .dot { width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: .35; }
.trust .check { width: 14px; height: 14px; color: color-mix(in oklch, var(--teal) 90%, white); }
.eq { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; color: color-mix(in oklch, currentColor 80%, transparent); }
.eq .term { display: inline-flex; align-items: center; gap: 8px; }
.eq .op { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: color-mix(in oklch, currentColor 8%, transparent); font-weight: 600; color: color-mix(in oklch, currentColor 70%, transparent); }
.eq .chip { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; border: 0; border-radius: 0; font-size: 12px; }
.eq .chip .dot { width: 6px; height: 6px; border-radius: 999px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklch, currentColor 60%, transparent); }
.eyebrow .pip { width: 6px; height: 6px; border-radius: 999px; background: var(--coral); box-shadow: 0 0 0 4px color-mix(in oklch, var(--coral) 25%, transparent); }
.hero-grid { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: clamp(40px, 8vw, 110px) clamp(20px, 4vw, 56px) clamp(60px, 10vw, 140px); max-width: 980px; margin: 0 auto; }
.hero-copy { width: 100%; max-width: 820px; display: flex; flex-direction: column; align-items: center; }
.hero-form, .hero-form-inline { align-self: stretch; margin-left: auto; margin-right: auto; }
.eq, .trust { justify-content: center; }
.headline { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 7.4vw, 96px); line-height: 0.98; letter-spacing: var(--tighter); margin: 22px 0 22px; text-wrap: balance; }
.fp-editorial .headline { font-weight: 400; font-size: clamp(56px, 8.4vw, 108px); line-height: 0.95; letter-spacing: var(--tight); }
.lede { font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: color-mix(in oklch, currentColor 72%, transparent); max-width: 560px; margin: 0 auto 30px; text-wrap: pretty; }
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes float-x { 0%,100% { transform: translateX(0); } 50% { transform: translateX(18px); } }
@keyframes drift { 0% { transform: translate(0,0) rotate(0); } 50% { transform: translate(30px,-22px) rotate(8deg); } 100% { transform: translate(0,0) rotate(0); } }
@keyframes hueshift { 0%,100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(30deg); } }
@keyframes orbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes pulse-glow { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes meshmove { 0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%, 100% 100%; } 50% { background-position: 30% 20%, 70% 40%, 20% 70%, 50% 30%, 80% 60%; } }
@keyframes rotate-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -200% 50%; } 100% { background-position: 200% 50%; } }
@keyframes word-cycle { 0%, 22% { transform: translateY(0); opacity: 1; } 28%, 30% { transform: translateY(-100%); opacity: 0; } 31%, 53% { transform: translateY(0); opacity: 1; } }
.avatars { display: inline-flex; align-items: center; }
.avatars .av { width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--paper); margin-left: -8px; background-size: cover; }
.avatars .av:first-child { margin-left: 0; }
.counter { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }