/* ============================================================
   Platho — about.platho.app
   Design tokens copied verbatim from the Platho PWA (web/styles.css).
   Aesthetic: restrained, technical, "secure infrastructure" — not
   a literal Matrix-rain backdrop. Pure black, a single teal accent,
   monospace metadata, hairline borders, generous negative space.
   ============================================================ */

:root {
  --bg: #0b0d0f;
  --panel: #111417;
  --panel-2: #151a1d;
  --panel-3: #1c2225;
  --text: #f4f7f5;
  --muted: #96a19c;
  --muted-2: #66726d;
  --accent: #30d5b0;
  --accent-2: #49a6ff;
  --line: #283136;
  --line-soft: #1e262a;
  --amber: #d7ad57;
  --rose: #e06666;
  --shadow: rgba(0, 0, 0, 0.32);

  --accent-04: rgba(48, 213, 176, 0.04);
  --accent-08: rgba(48, 213, 176, 0.08);
  --accent-14: rgba(48, 213, 176, 0.14);
  --accent-24: rgba(48, 213, 176, 0.24);
  --accent-42: rgba(48, 213, 176, 0.42);
  --accent-60: rgba(48, 213, 176, 0.6);

  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --radius: 8px;
  --radius-lg: 14px;
  --maxw: 1080px;
  --nav-h: 64px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

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

h1, h2, h3 { line-height: 1.14; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-42); color: #04110d; }

/* ---------- Background: one quiet glow, fixed ---------- */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(820px 460px at 50% -8%, var(--accent-08), transparent 62%),
    radial-gradient(700px 520px at 92% 4%, rgba(73, 166, 255, 0.04), transparent 58%);
}

main, .footer { position: relative; z-index: 1; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  background: var(--accent);
  color: #04110d;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-weight: 700;
}
.skip-link:focus { left: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}
.btn-lg { padding: 14px 26px; font-size: 15px; }

.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #04110d;
}
.btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(48, 213, 176, 0.18);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent-60); background: var(--accent-04); }

/* ---------- Nav (constant, always above content) ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: rgba(11, 13, 15, 0.9);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 32px; height: 32px; display: block; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-weight: 800; font-size: 17px; letter-spacing: 0.2px; }
.brand-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 3px;
}

.nav-links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.nav-links a { transition: color 0.16s; }
.nav-links a:hover { color: var(--text); }
.nav-cta { margin-left: 4px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px clamp(16px, 5vw, 40px) 88px;
}
/* Signal field: a LIVING lattice behind the whole page. Lattice nodes light up
   and link into short routes (information propagating) that fade as new ones
   spark, while soft "flashlights" roam and brighten the lattice beneath them.
   Fixed to the viewport, so the field stays on screen while you scroll. Drawn on
   <canvas>, ~30fps, paused when the tab is hidden; reduced-motion → static frame. */
.bg-signal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 820px; text-align: center; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--accent);
  border: 1px solid var(--accent-24);
  background: var(--accent-04);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 28px;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-14);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-14); opacity: 1; }
  50% { box-shadow: 0 0 0 5px rgba(48, 213, 176, 0.04); opacity: 0.65; }
}

.hero-title {
  font-size: clamp(34px, 6.4vw, 62px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  /* Extra room + clip the background a touch lower so descenders (y, g) on the
     last line aren't cropped by background-clip: text in WebKit/Blink. */
  padding-bottom: 0.12em;
  background: linear-gradient(180deg, #ffffff, #aebbb5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(16px, 2.1vw, 19px);
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto 34px;
}
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-terminal {
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted-2);
  letter-spacing: 0.4px;
}
.hero-terminal .prompt { color: var(--accent); margin-right: 8px; }
.cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 5px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Sections ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 116px) clamp(16px, 5vw, 40px);
}
/* Alt sections keep the SAME centred column as plain sections (so headings and
   grids line up everywhere); the panel background bleeds full-width via ::before. */
.section-alt { position: relative; }
.section-alt::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  z-index: -1;
}

.section-head { margin-bottom: 46px; max-width: 720px; }
.kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.kicker::after { content: "_"; color: var(--accent); }
.section-head h2 { font-size: clamp(26px, 3.8vw, 40px); font-weight: 800; }
.section-lead { margin-top: 16px; color: var(--muted); font-size: clamp(15px, 2vw, 18px); }

/* ---------- Prose (philosophy) ---------- */
.prose p { color: var(--muted); font-size: clamp(15px, 2vw, 18px); margin-bottom: 22px; text-align: justify; }
.prose blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--accent);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-feat { grid-template-columns: repeat(4, 1fr); }

.card {
  background: rgba(21, 26, 29, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  transition: border-color 0.2s, transform 0.2s;
}
.card:hover { border-color: var(--accent-24); transform: translateY(-2px); }
.card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.card p { color: var(--muted); font-size: 15px; }
.card-num { font-family: var(--mono); font-size: 13px; color: var(--accent); font-weight: 700; }
.card-sec h3 { color: var(--text); }

/* ---------- Feature tiles ---------- */
.feat {
  background: rgba(21, 26, 29, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: border-color 0.2s, transform 0.2s;
}
.feat:hover { border-color: var(--accent-24); transform: translateY(-2px); }
.feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--accent-08);
  border: 1px solid var(--accent-24);
  color: var(--accent);
  margin-bottom: 16px;
}
.feat-icon svg { width: 21px; height: 21px; display: block; }
.feat h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feat p { color: var(--muted); font-size: 14px; }

/* Technical corner ticks — a quiet "data record / targeting" frame on panels. */
.card, .feat { position: relative; }
.card::before, .card::after,
.feat::before, .feat::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 0 solid rgba(48, 213, 176, 0.22);
  transition: border-color 0.2s;
  pointer-events: none;
}
.card::before, .feat::before { top: 9px; left: 9px; border-top-width: 1px; border-left-width: 1px; }
.card::after, .feat::after { bottom: 9px; right: 9px; border-bottom-width: 1px; border-right-width: 1px; }
.card:hover::before, .card:hover::after,
.feat:hover::before, .feat:hover::after { border-color: var(--accent-60); }

.fine-print {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted-2);
  letter-spacing: 0.4px;
}

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: rgba(21, 26, 29, 0.5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color 0.16s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 22px;
  color: var(--accent);
  transition: transform 0.2s;
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--accent); }
.faq-body { padding: 0 22px 20px; }
.faq-body p { color: var(--muted); font-size: 15px; }

/* ---------- Final CTA ---------- */
.cta-final {
  max-width: none;
  text-align: center;
  padding: clamp(80px, 12vw, 150px) clamp(16px, 5vw, 40px);
  background: radial-gradient(640px 340px at 50% 0%, var(--accent-08), transparent 70%);
  border-top: 1px solid var(--line-soft);
}
.cta-inner { max-width: 640px; margin: 0 auto; }
.cta-inner .kicker { display: block; }
.cta-inner h2 { font-size: clamp(30px, 5.6vw, 50px); font-weight: 800; margin-bottom: 16px; }
.cta-inner p { color: var(--muted); font-size: clamp(16px, 2.2vw, 19px); margin-bottom: 32px; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line-soft);
  padding: 40px clamp(16px, 5vw, 40px);
  background: var(--bg);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.brand-mark-sm { width: 26px; height: 26px; }
.footer-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-tags { font-family: var(--mono); font-size: 12px; color: var(--muted-2); letter-spacing: 0.4px; }
.footer-sig { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--accent); opacity: 0.85; }
.footer-link { color: var(--accent); font-weight: 700; font-size: 14px; }
.footer-link:hover { text-decoration: underline; }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .grid-feat { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .grid-2, .grid-feat { grid-template-columns: 1fr; }
  .hero { padding-top: 40px; }
  .btn-lg { width: 100%; justify-content: center; }
  .hero-actions { flex-direction: column; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .status-dot, .cursor { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .card:hover, .feat:hover, .btn-accent:hover { transform: none; }
}