/* ============================================================
   Coornet — coornet.com
   Clean static rebuild of the Framer site. Dark theme, purple accent.
   ============================================================ */

:root {
  --bg: #000000;
  --card: #0b0b0b;
  --panel: #101010;
  --panel-2: #0d0d0d;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --dim: rgba(255, 255, 255, 0.75);
  --muted: rgba(255, 255, 255, 0.48);
  --faint: rgba(255, 255, 255, 0.32);
  --purple: #814ac8;
  --purple-soft: #a97fe0;
  --pink: #df7afe;
  --font-head: "Figtree", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-ui: "Satoshi", "Inter", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.02em; }

/* ---------- language switch ---------- */
.lang-switch {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 50;
  display: flex;
  background: rgba(13, 13, 13, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px;
  font-family: var(--font-ui);
  font-size: 12px;
}
.lang-switch a {
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--muted);
  transition: color 0.2s;
}
.lang-switch a:hover { color: var(--text); }
.lang-switch a.active { background: rgba(255, 255, 255, 0.1); color: var(--text); }

/* ---------- shared bits ---------- */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 5px 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--dim);
  letter-spacing: 0.01em;
}
.badge-new {
  background: linear-gradient(180deg, #9a5fe0, var(--purple));
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
  box-shadow: 0 0 14px rgba(129, 74, 200, 0.55);
}
.hero-badge { padding: 4px 14px 4px 4px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #9257db, #7a44bf);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 9px;
  padding: 9px 17px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 0 28px rgba(129, 74, 200, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.25s, transform 0.25s;
}
.btn:hover {
  box-shadow: 0 0 42px rgba(129, 74, 200, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.btn-label {
  display: inline-block;
  overflow: hidden;
  height: 1.45em;
  line-height: 1.45em;
}
.btn-label span { display: block; transition: transform 0.35s cubic-bezier(0.5, 0, 0.2, 1); }
.btn:hover .btn-label span { transform: translateY(-100%); }
.btn-arrow { flex: none; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tags span {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 12px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--dim);
}

.chip-dim {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 10.5px;
  color: var(--muted);
}

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 24px 120px;
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
/* swirling ring orb — intro: alone center stage, then rises behind headline */
.orb {
  position: absolute;
  left: 50%;
  top: 5%;
  width: 500px;
  height: 500px;
  transform: translateX(-50%);
  opacity: 0;
  animation: orbIntro 2.4s cubic-bezier(0.45, 0.05, 0.2, 1) forwards;
  will-change: transform, opacity;
}
.orb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 300deg,
    rgba(223, 122, 254, 0.55),
    rgba(190, 110, 240, 0.4) 45deg,
    rgba(129, 74, 200, 0.12) 95deg,
    rgba(140, 85, 210, 0.42) 150deg,
    rgba(129, 74, 200, 0.3) 195deg,
    rgba(60, 30, 110, 0.03) 250deg,
    rgba(90, 50, 160, 0.08) 290deg,
    rgba(223, 122, 254, 0.55) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 44%, #000 55%, transparent 80%);
  mask: radial-gradient(circle, transparent 28%, #000 44%, #000 55%, transparent 80%);
  filter: blur(24px);
  animation: spin 14s linear infinite;
}
/* second arc layer, counter-rotating */
.orb::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 120deg,
    rgba(165, 100, 230, 0.4),
    rgba(90, 45, 160, 0.04) 70deg,
    rgba(200, 120, 250, 0.32) 160deg,
    rgba(60, 30, 110, 0.02) 230deg,
    rgba(120, 70, 200, 0.2) 300deg,
    rgba(165, 100, 230, 0.4) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 46%, #000 56%, transparent 76%);
  mask: radial-gradient(circle, transparent 30%, #000 46%, #000 56%, transparent 76%);
  filter: blur(26px);
  animation: spinRev 21s linear infinite;
}
@keyframes spinRev { to { transform: rotate(-360deg); } }
.orb-core { display: none; }
@keyframes orbIntro {
  0%   { opacity: 0; transform: translate(-50%, 26vh) scale(1.18); }
  14%  { opacity: 1; transform: translate(-50%, 26vh) scale(1.18); }
  58%  { opacity: 1; transform: translate(-50%, 26vh) scale(1.18); }
  100% { opacity: 0.8; transform: translate(-50%, 0) scale(1); }
}
#stars { position: absolute; inset: 0; opacity: 0; animation: softIn 1.8s ease 0.6s forwards; }
#stars i {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--d, 4s) ease-in-out var(--dl, 0s) infinite alternate;
}
@keyframes twinkle {
  from { opacity: var(--o1, 0.15); }
  to   { opacity: var(--o2, 0.75); }
}

.hero-content { position: relative; max-width: 780px; }
.hero h1 {
  font-size: 54px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  margin: 26px auto 18px;
  max-width: 680px;
}
.hero-sub {
  color: var(--dim);
  font-size: 15px;
  max-width: 430px;
  margin: 0 auto 28px;
}

/* hero intro timeline — orb solo first, then text fades in slow with blur */
.hero-badge { opacity: 0; animation: softIn 0.7s ease 1.75s forwards; }
.hero-badge span:last-child {
  clip-path: inset(0 100% 0 0);
  animation: labelReveal 0.7s cubic-bezier(0.3, 0.6, 0.2, 1) 2.7s forwards;
}
@keyframes labelReveal { to { clip-path: inset(0 0 0 0); } }
.hero h1 {
  opacity: 0; filter: blur(10px); transform: translateY(22px);
  animation: heroText 1.1s cubic-bezier(0.25, 0.5, 0.2, 1) 1.9s forwards;
}
.hero-sub {
  opacity: 0; filter: blur(8px); transform: translateY(16px);
  animation: heroText 1s ease 2.2s forwards;
}
.hero-cta {
  opacity: 0; transform: translateY(12px);
  animation: heroText 0.9s ease 2.45s forwards;
}
@keyframes heroText { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes softIn { to { opacity: 1; } }

/* ---------- sections ---------- */
.section { max-width: 1140px; margin: 0 auto; padding: 90px 24px 0; }
.sec-head { text-align: center; margin-bottom: 72px; }
.sec-head h2 { font-size: 42px; line-height: 1.18; margin: 20px 0 14px; }
.sec-head p { color: var(--dim); font-size: 15px; max-width: 470px; margin: 0 auto; }

/* ---------- feature cards ---------- */
.feature-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 100px;
}
.feature-graphic {
  background: radial-gradient(120% 120% at 50% 0%, #0d0d0d, #070707);
  border: 1px solid var(--line);
  border-radius: 20px;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  overflow: hidden;
  position: relative;
}
.feature-content h3 { font-size: 26px; margin: 18px 0 14px; letter-spacing: -0.015em; }
.feature-content p { font-size: 15px; color: var(--dim); margin-bottom: 12px; }
.feature-content p:last-of-type { margin-bottom: 0; }
.feature-content .tint-purple { color: var(--purple-soft); }
.feature-content .tint-dim { color: var(--muted); }

/* mock windows */
.mock {
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  font-family: var(--font-ui);
}
.mt-title { font-size: 12.5px; color: rgba(255, 255, 255, 0.9); font-weight: 500; }

/* --- tasks mock (vertical marquee) --- */
.mock-tasks { width: 350px; padding: 14px 14px 0; }
.mock-tasks-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.tasks-viewport { height: 296px; overflow: hidden; position: relative; }
.tasks-viewport::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--panel), transparent 12%, transparent 82%, var(--panel));
  pointer-events: none;
}
.tasks-scroll { animation: scrollY 16s linear infinite; }
.tasks-scroll li {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
@keyframes scrollY { to { transform: translateY(-50%); } }

.t-ico {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.8);
}
.t-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.t-txt b { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.95); }
.t-txt i { font-style: normal; font-size: 11px; color: var(--muted); }
.t-more { color: var(--faint); font-size: 14px; }

/* --- email mock (horizontal marquee) --- */
.mock-email { width: 440px; padding: 14px; }
.me-head { display: flex; align-items: center; justify-content: space-between; }
.me-send {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(129, 74, 200, 0.18); border: 1px solid rgba(129, 74, 200, 0.45);
  display: inline-flex; align-items: center; justify-content: center; color: var(--pink);
}
.me-filters { display: flex; gap: 6px; margin: 12px 0; }
.leads-viewport { overflow: hidden; position: relative; }
.leads-viewport::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--panel), transparent 8%, transparent 92%, var(--panel));
  pointer-events: none;
}
.leads-track { display: flex; gap: 10px; width: max-content; animation: scrollX 24s linear infinite; }
@keyframes scrollX { to { transform: translateX(-50%); } }
.lead-card {
  width: 205px; flex: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 12px;
}
.lc-top { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.lc-av {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  background: linear-gradient(135deg, #2a2a2a, #171717);
  border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9.5px; color: var(--dim); letter-spacing: 0.02em;
}
.lc-name { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.lc-name b { font-size: 12px; font-weight: 500; }
.lc-name i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.chip-verified {
  background: rgba(129, 74, 200, 0.16); border: 1px solid rgba(129, 74, 200, 0.5);
  color: #cfa9ff; border-radius: 6px; padding: 2px 8px; font-size: 9.5px;
}
.lc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding-top: 10px; }
.lc-l { font-size: 9.5px; color: var(--faint); }
.lc-v { font-size: 10.5px; color: rgba(255, 255, 255, 0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-grid .lc-l:nth-child(3), .lc-grid .lc-v:nth-child(4) { grid-column: auto; }
.lc-grid { grid-template-areas: "l1 l2" "v1 v2"; }
.lc-grid .lc-l:nth-child(1) { grid-area: l1; }
.lc-grid .lc-v:nth-child(2) { grid-area: v1; }
.lc-grid .lc-l:nth-child(3) { grid-area: l2; }
.lc-grid .lc-v:nth-child(4) { grid-area: v2; }
.me-bottom { margin-top: 12px; }
.me-status { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-bottom: 7px; }
.me-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.me-fill {
  height: 100%; width: 55%; border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  animation: fillPulse 6s ease-in-out infinite alternate;
}
@keyframes fillPulse { from { width: 34%; } to { width: 82%; } }

/* --- david mock --- */
.mock-david { width: 330px; padding: 16px; border-radius: 16px; }
.md-greet { display: flex; flex-direction: column; margin-bottom: 12px; }
.md-greet b { font-size: 14px; font-weight: 600; font-family: var(--font-head); }
.md-greet i { font-style: normal; font-size: 11px; color: var(--muted); }
.md-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 12px;
}
.md-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--muted); margin-bottom: 9px;
}
.md-row, .md-meeting { display: flex; align-items: center; gap: 10px; }
.md-row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 10px;
}
.md-bot { background: rgba(129, 74, 200, 0.18); border-color: rgba(129, 74, 200, 0.45); color: #cfa9ff; }
.md-divider { height: 1px; background: var(--line); margin: 12px 0; }
.md-week { display: flex; gap: 5px; margin-bottom: 12px; }
.md-week span {
  flex: 1; text-align: center; font-size: 10px; color: var(--muted);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 0;
}
.md-week .active {
  background: linear-gradient(180deg, #9a5fe0, var(--purple));
  border-color: rgba(255, 255, 255, 0.25); color: #fff;
}
.md-meeting { padding: 7px 2px; }
.md-meeting .t-ico { width: 25px; height: 25px; }

/* ---------- process ---------- */
.process { padding-top: 110px; }
.process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.p-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 26px 24px;
  transition: border-color 0.3s;
}
.p-card:hover { border-color: rgba(255, 255, 255, 0.14); }
.p-step { font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); }
.p-title { font-size: 19px; margin: 8px 0 8px; }
.p-desc { font-size: 13.5px; color: var(--dim); margin-bottom: 22px; max-width: 420px; }
.p-mock {
  background: #090909;
  border: 1px solid var(--line);
  border-radius: 14px;
  height: 250px;
  overflow: hidden;
  font-family: var(--font-ui);
}

/* --- radar --- */
.mock-radar { display: flex; align-items: center; gap: 20px; padding: 20px; }
.radar-side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.radar { position: relative; width: 150px; height: 150px; }
.r-ring { position: absolute; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; }
.r1 { inset: 0; }
.r2 { inset: 24px; }
.r3 { inset: 50px; }
.r-scan {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg, rgba(129, 74, 200, 0.55) 360deg);
  animation: spin 3.2s linear infinite;
}
.r-dot {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  background: var(--pink); border-radius: 50%;
  box-shadow: 0 0 12px var(--pink);
}
@keyframes spin { to { transform: rotate(360deg); } }
.r-caption { font-size: 10.5px; color: var(--muted); }
.radar-checks { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.radar-checks span {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 10px;
  font-size: 11.5px; color: var(--dim);
}
.ck { display: inline-flex; color: rgba(255, 255, 255, 0.6); }

/* --- code --- */
.mock-code { display: flex; flex-direction: column; }
.code-chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  font-size: 11px; color: var(--muted);
}
.cc-file {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 9px; font-size: 10px;
}
.cc-icons { margin-left: auto; letter-spacing: 6px; }
.code-body { display: flex; flex: 1; min-height: 0; }
.code-rail {
  width: 34px; border-right: 1px solid var(--line);
  display: flex; justify-content: center; padding-top: 12px;
  color: var(--muted);
}
.code-viewport { flex: 1; overflow: hidden; position: relative; }
.code-viewport::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, #090909, transparent 12%, transparent 82%, #090909);
  pointer-events: none;
}
.code-scroll { animation: scrollY 14s linear infinite; }
.code-scroll pre {
  padding: 12px 14px;
  font-family: "Consolas", "SF Mono", monospace;
  font-size: 10.5px; line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}
.code-scroll .k { color: var(--pink); }
.code-scroll .f { color: #b18cff; }
.code-scroll .n { color: #e6d6ff; }
.code-scroll .s { color: rgba(255, 255, 255, 0.5); }
.code-scroll .str { color: #c9a6ff; }

/* --- integration --- */
.mock-integration { display: flex; align-items: center; justify-content: space-between; padding: 0 30px; height: 250px; }
.int-node { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.int-orb {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  position: relative;
}
.int-orb::after {
  content: ""; position: absolute; inset: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pink), var(--purple) 60%);
  box-shadow: 0 0 16px rgba(129, 74, 200, 0.8);
}
.int-stack {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}
.int-label { font-size: 10.5px; color: var(--muted); }
.int-lines { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 0 22px; }
.int-line {
  position: relative; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  overflow: visible;
}
.int-line i {
  position: absolute; top: -2px; left: 0; width: 26px; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--pink));
  filter: blur(0.4px);
  animation: rayMove 2.6s linear infinite;
}
.int-line:nth-child(2) i { animation-delay: 0.9s; }
.int-line:nth-child(3) i { animation-delay: 1.7s; }
@keyframes rayMove { from { left: -12%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: 100%; opacity: 0; } }

/* --- status --- */
.mock-status { display: flex; flex-direction: column; gap: 10px; padding: 20px; justify-content: center; height: 250px; }
.st-row {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 12px;
}
.st-ico {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}
.st-spin svg { animation: spin 4s linear infinite; }
.st-ok { color: #cfa9ff; border-color: rgba(129, 74, 200, 0.5); background: rgba(129, 74, 200, 0.14); }

/* ---------- CTA ---------- */
.cta-card {
  margin: 110px 0 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 96px 24px 110px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(75% 95% at 50% 115%, rgba(129, 74, 200, 0.75), rgba(129, 74, 200, 0.18) 52%, transparent 75%),
    #0b0b0b;
}
.cta-card h2 { font-size: 40px; line-height: 1.18; }
.cta-card p { color: var(--dim); font-size: 14px; margin: 14px 0 28px; }

/* ---------- footer ---------- */
.site-footer {
  max-width: 1140px;
  margin: 90px auto 0;
  padding: 26px 24px 34px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--muted);
}
.sf-nav { display: flex; gap: 22px; }
.sf-nav a { color: var(--muted); transition: color 0.2s; }
.sf-nav a:hover { color: var(--text); }

/* ---------- legal pages ---------- */
.legal-main { max-width: 720px; margin: 0 auto; padding: 130px 24px 40px; }
.legal-main .back { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; margin-bottom: 34px; transition: color 0.2s; }
.legal-main .back:hover { color: var(--text); }
.legal-main h1 { font-size: 34px; margin-bottom: 34px; }
.legal-main h2 { font-size: 19px; margin: 34px 0 10px; }
.legal-main p, .legal-main li { font-size: 14.5px; color: var(--dim); margin-bottom: 10px; }
.legal-main ul { padding-left: 20px; list-style: disc; }
.legal-main a { color: var(--purple-soft); }
.legal-main a:hover { text-decoration: underline; }
.legal-main .addr { line-height: 1.75; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .feature-card { grid-template-columns: 1fr; gap: 36px; margin-bottom: 72px; }
  .process-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 44px; }
  .sec-head h2 { font-size: 36px; }
  .cta-card h2 { font-size: 34px; }
}

@media (max-width: 640px) {
  .hero { padding: 120px 20px 90px; min-height: 78vh; }
  .hero h1 { font-size: 40px; line-height: 1.12; }
  .hero-sub { font-size: 14px; }
  .orb { width: 400px; height: 400px; }
  .section { padding: 70px 20px 0; }
  .sec-head { margin-bottom: 52px; }
  .sec-head h2 { font-size: 29px; }
  .feature-graphic { min-height: 0; padding: 24px 16px; }
  .mock-tasks, .mock-email, .mock-david { width: 100%; max-width: 360px; }
  .feature-content h3 { font-size: 22px; }
  .mock-radar { gap: 14px; padding: 14px; }
  .radar-checks span { padding: 6px 8px; font-size: 10.5px; }
  .p-mock { height: auto; min-height: 220px; }
  .mock-integration { padding: 24px 16px; height: 220px; }
  .mock-status { height: auto; padding: 16px; }
  .radar { width: 120px; height: 120px; }
  .r2 { inset: 19px; }
  .r3 { inset: 40px; }
  .cta-card { padding: 64px 20px 76px; }
  .cta-card h2 { font-size: 27px; }
  .site-footer { flex-direction: column; text-align: center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tasks-scroll, .code-scroll, .leads-track, .r-scan, .int-line i, .st-spin svg, .me-fill, .orb::before, #stars i { animation: none !important; }
  .orb { animation: none; opacity: 1; transform: translateX(-50%); }
  .hero h1, .hero-sub, .hero-cta, .hero-badge, #stars { animation: none; opacity: 1; transform: none; filter: none; }
  .hero-badge span:last-child { animation: none; clip-path: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}