:root {
  --bg: #05070c;
  --bg-alt: #0a0e17;
  --card: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.09);
  --accent: #5fd9b8;       /* seafoam green — primary */
  --accent-dark: #3fbfa0;  /* seafoam hover/darker */
  --lavender: #a78bfa;     /* secondary accent */
  --violet: #7c5ce0;       /* deeper purple, for gradients */
  --blue: #5b9ef0;         /* tertiary accent */
  --text: #edeff5;
  --text-muted: #b8bfcc;
  --radius: 14px;
  --wrap: 2000px;
  --font-heading: "Space Grotesk", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.6;
  background: var(--bg);
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  .wrap { padding: 0 20px; }
}

h1, h2, h3 { font-family: var(--font-heading); line-height: 1.15; margin: 0 0 0.5em; font-weight: 600; }
p { margin: 0 0 1em; color: var(--text-muted); }
a { color: var(--accent); text-decoration: none; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

/* Fixed background glow — stays put while content scrolls over it */

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.32;
}

.glow-1 { width: 420px; height: 420px; background: var(--accent); top: -120px; left: -100px; }
.glow-2 { width: 380px; height: 380px; background: var(--violet); top: 20%; right: -140px; }
.glow-3 { width: 340px; height: 340px; background: var(--blue); bottom: -10%; left: 35%; }

/* Particles — scattered points around each glow, echoing the logo's
   "chaos resolving into order" language. Sharp (unblurred) small dots,
   unlike the soft glow orbs, so they read as distinct elements near
   the light rather than more haze. Scattered (not a directional trail)
   — reads as loose chaos surrounding the glow rather than a pipeline. */

.particle { position: absolute; border-radius: 50%; }

/* Around glow-1 (seafoam) */
.p1 { width: 6px;   height: 6px;   background: var(--accent); opacity: 0.35; top: 60px;  left: 180px; }
.p2 { width: 4px;   height: 4px;   background: var(--accent); opacity: 0.25; top: 140px; left: 230px; }
.p3 { width: 3px;   height: 3px;   background: var(--accent); opacity: 0.18; top: 20px;  left: 260px; }
.p4 { width: 5px;   height: 5px;   background: var(--accent); opacity: 0.30; top: 200px; left: 170px; }
.p5 { width: 2.5px; height: 2.5px; background: var(--accent); opacity: 0.15; top: 90px;  left: 300px; }
.p6 { width: 4.5px; height: 4.5px; background: var(--accent); opacity: 0.28; top: 180px; left: 90px; }
.p7 { width: 3.5px; height: 3.5px; background: var(--accent); opacity: 0.20; top: 30px;  left: 150px; }
.p8 { width: 2.8px; height: 2.8px; background: var(--accent); opacity: 0.17; top: 230px; left: 260px; }
.p9 { width: 5.5px; height: 5.5px; background: var(--accent); opacity: 0.32; top: 110px; left: 60px; }

/* Around glow-2 (violet) */
.p10 { width: 6px;   height: 6px;   background: var(--violet); opacity: 0.35; top: calc(20% + 40px);  right: 60px; }
.p11 { width: 4px;   height: 4px;   background: var(--violet); opacity: 0.25; top: calc(20% - 30px);  right: 100px; }
.p12 { width: 5px;   height: 5px;   background: var(--violet); opacity: 0.30; top: calc(20% + 120px); right: 80px; }
.p13 { width: 3px;   height: 3px;   background: var(--violet); opacity: 0.18; top: calc(20% + 20px);  right: 150px; }
.p14 { width: 3.5px; height: 3.5px; background: var(--violet); opacity: 0.20; top: calc(20% - 60px);  right: 180px; }
.p15 { width: 2.8px; height: 2.8px; background: var(--violet); opacity: 0.16; top: calc(20% + 90px);  right: 200px; }
.p16 { width: 4.5px; height: 4.5px; background: var(--violet); opacity: 0.27; top: calc(20% + 160px); right: 130px; }
.p17 { width: 5.5px; height: 5.5px; background: var(--violet); opacity: 0.33; top: calc(20% - 10px);  right: 40px; }

/* Around glow-3 (blue) */
.p18 { width: 6px;   height: 6px;   background: var(--blue); opacity: 0.35; bottom: calc(-10% + 60px);  left: calc(35% + 60px); }
.p19 { width: 4px;   height: 4px;   background: var(--blue); opacity: 0.25; bottom: calc(-10% + 120px); left: calc(35% + 20px); }
.p20 { width: 5px;   height: 5px;   background: var(--blue); opacity: 0.30; bottom: calc(-10% + 40px);  left: calc(35% - 40px); }
.p21 { width: 3px;   height: 3px;   background: var(--blue); opacity: 0.18; bottom: calc(-10% + 160px); left: calc(35% + 90px); }
.p22 { width: 3.5px; height: 3.5px; background: var(--blue); opacity: 0.20; bottom: calc(-10% + 90px);  left: calc(35% - 70px); }
.p23 { width: 2.8px; height: 2.8px; background: var(--blue); opacity: 0.16; bottom: calc(-10% + 200px); left: calc(35% + 40px); }
.p24 { width: 4.5px; height: 4.5px; background: var(--blue); opacity: 0.27; bottom: calc(-10% + 20px);  left: calc(35% + 110px); }
.p25 { width: 5.5px; height: 5.5px; background: var(--blue); opacity: 0.32; bottom: calc(-10% + 140px); left: calc(35% - 20px); }

@media (max-width: 800px) {
  .particle { display: none; }
}

/* Header */

.site-header {
  position: sticky;
  top: 16px;
  z-index: 10;
  padding: 0 24px;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 22px;
  max-width: calc(var(--wrap) - 48px);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
}

.logo-mark { flex-shrink: 0; }

.site-header nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-header nav a {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.site-header nav a:hover { color: #fff; }

.nav-cta {
  background: var(--accent);
  color: var(--bg) !important;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
}

.nav-cta:hover { background: #7fe3c9; }

/* Hero */

.hero {
  padding: 120px 0 100px;
  text-align: center;
  position: relative;
}

.hero .wrap { max-width: 720px; }

.hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
}

.hero h1 .grad {
  background: linear-gradient(120deg, var(--accent), var(--lavender));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 520px;
  margin: 0 auto 2em;
}

.btn {
  display: inline-block;
  padding: 15px 32px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: linear-gradient(120deg, var(--accent), var(--violet));
  color: #05070c;
}

.btn-primary:hover { filter: brightness(1.08); }

/* Sections */

.section { padding: 90px 0; position: relative; }
.section-alt { background: transparent; }

.section h2 {
  font-size: 1.9rem;
  text-align: center;
  color: #fff;
}

#services h2, #services .eyebrow { text-align: center; display: block; }

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.card {
  padding: 26px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover {
  border-color: var(--accent-dark);
  transform: translateY(-2px);
}

.card-visual {
  height: 140px;
  margin: -26px -26px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-bottom 0.35s ease;
}

.card-visual svg { width: 68px; height: 68px; }

.card-visual--scene svg { width: 100%; height: 100%; display: block; }

.card:nth-child(3n+1) .card-visual { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.card:nth-child(3n+2) .card-visual { background: linear-gradient(135deg, var(--lavender), var(--violet)); }
.card:nth-child(3n+3) .card-visual { background: linear-gradient(135deg, var(--blue), var(--violet)); }

.card h3 {
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 0.4em;
}

.card p { margin: 0; }

/* Hover-to-reveal — only on devices with real hover (mouse), so touch/
   mobile always sees full content (visual AND description) by default
   rather than needing a tap that does nothing obvious. On hover, the
   visual disappears and the description text expands into its place. */
@media (hover: hover) and (pointer: fine) {
  .card p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }
  .card:hover p {
    max-height: 160px;
    opacity: 1;
    margin-top: 8px;
  }

  .card-visual {
    max-height: 140px;
    opacity: 1;
    overflow: hidden;
  }
  .card:hover .card-visual {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
  }

  .card:hover {
    transform: translateY(-4px) scale(1.02);
  }
}

/* How It Works */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 44px;
}

.step-num {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.step:nth-child(4n+1) .step-num { color: var(--accent); }
.step:nth-child(4n+2) .step-num { color: var(--lavender); }
.step:nth-child(4n+3) .step-num { color: var(--blue); }
.step:nth-child(4n+4) .step-num { color: var(--accent); }

.step h3 { font-size: 1.02rem; color: #fff; }
.step p { font-size: 0.92rem; }

/* Case Studies */

.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 44px;
}

.case-card {
  padding: 2px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(140deg, var(--accent), var(--violet), var(--blue));
}

.case-card > h3,
.case-card > .case-meta,
.case-card > .compare {
  background: var(--bg-alt);
}

.case-card {
  display: flex;
  flex-direction: column;
}

.case-card h3 {
  color: #fff;
  font-size: 1.15rem;
  padding: 26px 26px 0;
  border-radius: 14px 14px 0 0;
  margin-bottom: 0.3em;
}

.case-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--lavender);
  padding: 0 26px;
  margin-bottom: 1.2em;
}

.compare {
  padding: 0 26px 26px;
  border-radius: 0 0 14px 14px;
  flex: 1;
}

/* Case cards use scroll pop-in (.reveal, applied in HTML) instead of
   hover-to-reveal — the dramatic expand/collapse of 6 comparison rows
   looked jarring on hover. Keep a small hover lift as a lightweight
   affordance only. */
@media (hover: hover) and (pointer: fine) {
  .case-card { transition: transform 0.25s ease; }
  .case-card:hover { transform: translateY(-3px); }
}

.compare-head {
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: 14px;
  padding-bottom: 10px;
}

.compare-head span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.compare-head span:last-child { color: var(--accent); }

.compare-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--card-border);
  align-items: start;
}

.compare-row .dim {
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  padding-top: 2px;
}

.compare-row .before,
.compare-row .after {
  font-size: 0.85rem;
  line-height: 1.45;
}

.compare-row .before {
  color: var(--text-muted);
  opacity: 0.75;
}

.compare-row .before::before { content: "\2715  "; color: #6b7480; }

.compare-row .after {
  color: var(--text);
}

.compare-row .after::before { content: "\2713  "; color: var(--accent); }

/* About */

.about-single {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.about-single h2 { margin-bottom: 0.6em; }
.about-single p { text-align: left; }

.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--card-border);
}

.stat-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Scroll pop-in — elements start hidden/offset, JS adds .is-visible
   (via IntersectionObserver, see script.js) once scrolled into view. */

.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Scroll-linked parallax — position/opacity set directly by JS on every
   scroll tick (see initParallax in script.js), not a one-time class
   toggle. The short transition here just smooths between animation
   frames; the actual motion is continuous and reversible with scroll
   direction. */

.parallax {
  will-change: transform, opacity;
  transition: transform 0.08s linear, opacity 0.08s linear;
}

@media (max-width: 700px) {
  /* Horizontal slide-in is cramped on narrow screens; keep the fade but
     skip the sideways travel. */
  .parallax { transform: none !important; }
}

/* Name story */

.name-story {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--card-border);
  text-align: left;
}

.name-story h3 {
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 22px;
}

.terms {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}

.term-word {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}

.term:nth-child(1) .term-word { color: var(--accent); }
.term:nth-child(2) .term-word { color: var(--lavender); }
.term:nth-child(3) .term-word { color: var(--blue); }

.term-pos {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--text-muted);
  margin-left: 6px;
}

.term p { font-size: 0.9rem; margin: 6px 0 0; }

.name-mission { font-size: 0.95rem; margin-bottom: 0; }

/* Contact */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
}

.contact-grid h2 { text-align: left; }

.contact-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.contact-card h3 { margin-top: 0; }

.contact-list {
  margin: 0 0 1.6em;
  padding-left: 1.2em;
  color: var(--text-muted);
}

.contact-list li { margin-bottom: 0.4em; }

.contact-direct {
  font-size: 0.9rem;
  margin: 1.4em 0 0;
}

/* Footer */

.site-footer {
  padding: 32px 0 40px;
  font-size: 0.85rem;
  text-align: center;
  position: relative;
}

.site-footer p { color: var(--text-muted); margin: 0; }

/* Responsive */

@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .site-header nav { gap: 16px; }
  .case-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .stats-bar { grid-template-columns: 1fr 1fr; gap: 24px; }
  .terms { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .compare-head, .compare-row { grid-template-columns: 1fr; gap: 4px; }
  .compare-head span:first-child { display: none; }
  .compare-row .dim { margin-bottom: 4px; }
  .compare-row .before, .compare-row .after { padding-left: 2px; }
  .steps { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .hero { padding: 90px 0 64px; }
  .site-header nav a:not(.nav-cta) { display: none; }
  .glow { opacity: 0.22; }
}