/* Srijonix design tokens + utilities (mirrors src/styles.css) */
:root{
  --background: oklch(0.99 0.005 264);
  --foreground: oklch(0.18 0.03 264);
  --card: oklch(1 0 0);
  --muted: oklch(0.96 0.01 264);
  --muted-foreground: oklch(0.48 0.02 264);
  --border: oklch(0.92 0.01 264);
  --primary: oklch(0.55 0.22 264);
  --primary-foreground: oklch(0.99 0 0);
  --primary-glow: oklch(0.72 0.18 280);
  --accent: oklch(0.62 0.24 300);
  --accent-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.96 0.01 264);
  --ring: oklch(0.55 0.22 264);
  --radius: 1rem;
  --shadow-elegant: 0 10px 30px -10px oklch(0.55 0.22 264 / .25);
  --shadow-glow: 0 0 40px oklch(0.72 0.18 280 / .35);
  --glass-bg: oklch(1 0 0 / .65);
  --glass-border: oklch(0.92 0.01 264 / .8);
}
html.dark{
  --background: oklch(0.13 0.02 264);
  --foreground: oklch(0.97 0.01 264);
  --card: oklch(0.17 0.02 264);
  --muted: oklch(0.20 0.02 264);
  --muted-foreground: oklch(0.70 0.02 264);
  --border: oklch(0.25 0.02 264);
  --secondary: oklch(0.20 0.02 264);
  --glass-bg: oklch(0.17 0.02 264 / .65);
  --glass-border: oklch(0.30 0.02 264 / .6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-display{font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;letter-spacing:-0.01em}
.font-num{font-family:"Manrope",ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
@media(min-width:640px){.container{padding:0 1.5rem}}
@media(min-width:1024px){.container{padding:0 2rem}}

.gradient-primary{background:linear-gradient(135deg,var(--primary),var(--accent))}
.gradient-text{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.glass{
  background:var(--glass-bg);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid var(--glass-border);
}
.shadow-elegant{box-shadow:var(--shadow-elegant)}
.shadow-glow{box-shadow:var(--shadow-glow)}
.shadow-soft{box-shadow:0 4px 20px -8px oklch(0.18 0.03 264 / .1)}
.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}
.border-token{border:1px solid var(--border)}
.bg-card{background:var(--card)}.bg-secondary{background:var(--secondary)}
.text-muted{color:var(--muted-foreground)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.15rem;border-radius:9999px;font-weight:600;font-size:.9rem;transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease;cursor:pointer;border:1px solid transparent}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:var(--primary-foreground);box-shadow:var(--shadow-elegant)}
.btn-primary:hover{transform:translateY(-2px);opacity:.95}
.btn-ghost{background:var(--secondary);color:var(--foreground);border-color:var(--border)}
.btn-ghost:hover{background:var(--card)}

/* Eyebrow chip */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--border);background:color-mix(in oklab,var(--secondary) 70%,transparent);padding:.25rem .75rem;border-radius:9999px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-foreground)}
.eyebrow::before{content:"";width:.4rem;height:.4rem;border-radius:9999px;background:var(--accent)}

/* Headings */
h1.display,h2.display{font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.05}
h1.display{font-size:clamp(2.5rem,6vw,4.5rem)}
h2.display{font-size:clamp(2rem,4.5vw,3.5rem)}

/* Sections */
section{position:relative;padding:6rem 0}
@media(max-width:640px){section{padding:4rem 0}}

/* Grid helpers */
.grid{display:grid;gap:1rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* Card */
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1.25rem;transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-elegant)}
.icon-square{width:2.5rem;height:2.5rem;border-radius:.75rem;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;font-weight:700}

/* Hero blob */
.blob{position:absolute;inset:auto;width:40rem;height:40rem;border-radius:9999px;filter:blur(80px);opacity:.55;pointer-events:none;z-index:-1}
.blob.a{background:radial-gradient(closest-side,oklch(0.62 0.22 264 / .55),transparent);top:-10rem;left:-10rem;animation:drift 18s ease-in-out infinite}
.blob.b{background:radial-gradient(closest-side,oklch(0.65 0.24 300 / .5),transparent);bottom:-12rem;right:-8rem;animation:drift 22s ease-in-out infinite reverse}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}

/* Navbar */
.nav-wrap{position:fixed;inset:0 0 auto 0;z-index:50;padding:.75rem 0;transition:padding .3s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 1rem;border-radius:1rem;transition:all .3s ease}
.nav-wrap.scrolled .nav-inner{background:var(--glass-bg);backdrop-filter:blur(18px);border:1px solid var(--glass-border);box-shadow:0 4px 20px -8px rgba(0,0,0,.08)}
.nav-links{display:none;gap:.25rem;align-items:center}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-links a{padding:.4rem .9rem;border-radius:9999px;font-size:.875rem;font-weight:500;color:var(--muted-foreground);transition:color .2s, background .2s}
.nav-links a:hover,.nav-links a.current{color:var(--foreground);background:var(--secondary)}
.icon-btn{width:2.25rem;height:2.25rem;border-radius:9999px;display:grid;place-items:center;background:color-mix(in oklab,var(--secondary) 60%,transparent);border:1px solid var(--border);color:var(--muted-foreground);cursor:pointer}
.icon-btn:hover{color:var(--foreground)}
.mobile-only{display:flex}@media(min-width:1024px){.mobile-only{display:none}}

/* Reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}

/* Marquee */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 40s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee span{font-family:"Space Grotesk";font-weight:600;color:var(--muted-foreground);opacity:.7;font-size:1.25rem;white-space:nowrap}

/* Pricing */
.price-card.featured{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--primary),var(--accent)) border-box;border:1px solid transparent;box-shadow:var(--shadow-glow)}

/* Accordion */
details.faq{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem 1.25rem;margin-bottom:.75rem;box-shadow:0 4px 20px -8px rgba(0,0,0,.06)}
details.faq summary{cursor:pointer;list-style:none;font-family:"Space Grotesk";font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:1rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.5rem;color:var(--muted-foreground);transition:transform .2s}
details.faq[open] summary::after{content:"−"}
details.faq p{margin:.75rem 0 0;color:var(--muted-foreground);font-size:.9rem}

/* Form */
input,textarea,select{font:inherit;color:inherit;width:100%;padding:.7rem 1rem;background:var(--card);border:1px solid var(--border);border-radius:.75rem;outline:none}
input:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 20%,transparent)}

/* Footer */
footer.site{margin-top:6rem;border-top:1px solid var(--border);background:color-mix(in oklab,var(--secondary) 50%,transparent);padding:4rem 0 2rem}
footer.site h4{font-family:"Space Grotesk";font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-foreground);margin:0 0 1rem}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem;font-size:.9rem}

/* Floating CTA */
.floating-cta{position:fixed;bottom:1.25rem;right:1.25rem;z-index:40;display:none}
@media(min-width:640px){.floating-cta{display:inline-flex}}

/* Hero mockup */
.mockup{position:relative;border-radius:1.25rem;padding:1rem;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-elegant)}
.mockup .bar{display:flex;gap:.4rem;margin-bottom:.75rem}
.mockup .bar i{width:.65rem;height:.65rem;border-radius:9999px;background:var(--border)}
.mockup .stripe{height:.75rem;border-radius:.5rem;background:linear-gradient(90deg,var(--secondary),var(--muted));margin:.6rem 0}
.mockup .stripe.short{width:60%}
.mockup .stripe.tall{height:6rem;background:linear-gradient(135deg,color-mix(in oklab,var(--primary) 30%,transparent),color-mix(in oklab,var(--accent) 30%,transparent))}