@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;600;700;800&display=swap');

:root {
  /* ── light canvas ── */
  --bg:        #ffffff;
  --bg-tint:   #f6f7fb;
  --bg-tint-2: #eef0f8;
  --ink:       #0d1030;
  --ink-dim:   #545876;
  --ink-faint: #898ea8;
  --line:      rgba(13,16,48,0.09);
  --line-1:    rgba(13,16,48,0.14);
  --line-2:    rgba(13,16,48,0.22);

  /* ── dual accent (routing semantics) ── */
  --edge:      #10b981;   /* edge = local / private */
  --edge-ink:  #05795a;
  --edge-soft: rgba(16,185,129,0.10);
  --cloud:     #64748b;   /* cloud = remote API — neutral slate */
  --cloud-ink: #475569;
  --cloud-soft:rgba(100,116,139,0.10);

  /* ── dark code surface (sits on the light page) ── */
  --code-bg:   #0c0f20;
  --code-line: rgba(255,255,255,0.08);

  --skew: 3deg;

  --radius:    8px;
  --radius-lg: 18px;
  --maxw:      1180px;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}
::selection { background: var(--edge-soft); color: var(--edge-ink); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ───────────────────────── layout ───────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; width: 100%; }
.section { padding: 104px 0; position: relative; }
.section-tight { padding: 64px 0; }

/* ───────────────────────── type kit ───────────────────────── */
.eyebrow {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--edge-ink);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--edge); }

.h-sec { font-size: clamp(30px, 3.7vw, 50px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; margin: 16px 0 0; color: var(--ink); text-wrap: balance; }
.sub-sec { font-size: 18px; color: var(--ink-dim); max-width: 520px; margin: 18px 0 0; line-height: 1.55; text-wrap: pretty; }
.mono { font-family: var(--mono); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-1); background: #fff; color: var(--ink-dim); white-space: nowrap;
}

/* ───────────────────────── buttons ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em; line-height: 1;
  padding: 0 14px; height: 36px; border-radius: 6px;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap; cursor: pointer;
}
.btn-primary {
  background: var(--edge); color: #fff;
  border: 1px solid color-mix(in srgb, var(--edge) 80%, #000);
}
.btn-primary:hover { opacity: 0.85; }
.btn-ghost {
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-1);
  box-shadow: 0 1px 2px rgba(13,16,48,0.04);
}
.btn-ghost:hover { background: var(--bg-tint); border-color: var(--line-2); }
.btn-dark { background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,0.08); }
.btn-dark:hover { opacity: 0.85; }

/* ───────────────────────── dot & grid patterns ───────────────────────── */
.dot-pattern {
  background-image: radial-gradient(circle, var(--ink) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
  opacity: 0.06;
}
.grid-pattern {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ───────────────────────── interactive cards (spotlight follows cursor) ───── */
.icard {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 26px 28px;
  box-shadow: 0 1px 2px rgba(13,16,48,0.04), 0 14px 40px -28px rgba(13,16,48,0.25);
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s;
  overflow: hidden;
}
.icard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .25s;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), var(--accent-soft, var(--edge-soft)), transparent 62%);
}
.icard::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .25s;
  padding: 1px; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), var(--accent, var(--edge)), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.icard:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(13,16,48,0.05), 0 30px 60px -30px rgba(13,16,48,0.32); }
.icard:hover::before, .icard:hover::after { opacity: 1; }

/* ───────────────────────── code surface (dark on light) ───────────────────── */
.codeface { background: var(--code-bg); border: 1px solid var(--code-line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -34px rgba(13,16,48,0.5); }
.code-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--code-line); }
.code-dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.14); }
pre.code { font-family: var(--mono); font-size: 13.5px; line-height: 1.75; padding: 20px 22px; overflow-x: auto; color: #c9d2e3; tab-size: 2; }
pre.code .t-kw  { color: #c79bff; }
pre.code .t-fn  { color: #6ea8ff; }
pre.code .t-str { color: #4be0a8; }
pre.code .t-num { color: #ffc463; }
pre.code .t-cmt { color: #6b7390; }
pre.code .t-prop{ color: #8fd0ff; }
.code-head button { white-space: nowrap; }

/* PII highlight (live demo, dark panel) */
.hl-wrap { position: relative; flex: 1; min-height: 250px; }
.hl-back, .hl-input { position: absolute; inset: 0; font-family: var(--mono); font-size: 14px; line-height: 1.7; padding: 20px 22px; margin: 0; border: 0; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; letter-spacing: 0; tab-size: 2; }
.hl-back { color: #d4dbe9; pointer-events: none; overflow: auto; }
.hl-input { color: transparent; background: transparent; caret-color: var(--edge); resize: none; outline: none; overflow: auto; }
.hl-input::placeholder { color: #6b7390; }
mark.pii { background: rgba(80,230,180,0.16); color: #6ff0c2; border-bottom: 1.5px solid var(--edge); border-radius: 3px 3px 0 0; padding: 1px; margin: 0 -1px; }

.copycmd { white-space: nowrap; }
.copycmd > span { white-space: nowrap; }
.hr { height: 1px; background: var(--line); border: 0; }

/* ───────────────────────── skewed bands ───────────────────────── */
.skew-band { position: relative; }
.skew-band > .skew-bg { position: absolute; inset: -2px 0; z-index: 0; transform: skewY(calc(-1 * var(--skew))); transform-origin: center; overflow: hidden; }
.skew-band > .wrap { position: relative; z-index: 1; }

/* reveal — entrance animates TRANSFORM ONLY; opacity stays 1 at all times so a
   frozen/deferred animation can never leave content invisible (just slightly offset). */
.reveal { animation: revealIn .7s cubic-bezier(.2,.7,.2,1); }
.reveal.d1 { animation-delay: .07s; }
.reveal.d2 { animation-delay: .14s; }
.reveal.d3 { animation-delay: .21s; }
@keyframes revealIn { from { transform: translateY(18px); } to { transform: none; } }
.no-motion .reveal { animation: none; }

/* travelling packet (junctions) */
.pkt { position: absolute; width: 7px; height: 7px; border-radius: 50%; }
.pkt.edge  { background: var(--edge);  box-shadow: 0 0 10px var(--edge); }
.pkt.cloud { background: var(--cloud); box-shadow: 0 0 10px var(--cloud); }
.pkt.routepkt { left: 0; opacity: 0; animation: routepkt 1.7s linear infinite; }
@keyframes routepkt { 0% { left: 2%; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { left: 98%; opacity: 0 } }
.no-motion .pkt.routepkt { animation: none; opacity: .8; }

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width: 980px) {
  .section { padding: 80px 0; }
  .nav-links { display: none !important; }
  .demo-grid, .code-split, .fork-cards, .how-cards { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  .detect-grid { grid-template-columns: 1fr 1fr !important; }
  .comp-grid { grid-template-columns: 1fr !important; }
  .nav-gh-txt { display: none; }
}