/* ============================================================
   AtlasIQ — landing page styles (red / black theme)
   ============================================================ */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f6f7;
  --bg-elev: #ffffff;
  --ink: #0b0b0c;
  --ink-2: #3a3a3c;
  --ink-3: #6b6b6f;
  --line: #e7e7ea;
  --line-strong: #d2d2d6;
  --accent: #dc2626;            /* red */
  --accent-ink: #ffffff;
  --accent-soft: rgba(220, 38, 38, 0.12);
  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 1320px;
  --nav-h: 76px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}
html[data-dark="true"] {
  --bg: #0b0b0c;
  --bg-soft: #131316;
  --bg-elev: #18181c;
  --ink: #f5f5f7;
  --ink-2: #c2c2c8;
  --ink-3: #8a8a92;
  --line: #2a2a30;
  --line-strong: #3a3a42;
  --accent: #ef4444;            /* slightly brighter red on dark */
  --accent-ink: #ffffff;
  --accent-soft: rgba(239, 68, 68, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: 10px 16px; border-radius: 8px; font: 500 14px var(--sans);
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* ============================================================
   Ambient neural-circuit background
   Three parallax layers, dendritic traces, pulsing nodes,
   travelling signals — echoes the brain/circuit logo.
   ============================================================ */
.bg-engine {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.bg-engine svg { width: 100%; height: 100%; display: block; }

/* Readability scrim — washes the page background over the ambient graphic so
   text sitting directly on the page (hero, section headings, decks) always stays
   legible. Painted above the SVG but still below all content (which is z-index: 2). */
.bg-engine::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: var(--bg); opacity: 0.62;
}

/* Three layers, each drifting on its own clock for parallax depth */
.bg-layer { transform-origin: center; will-change: transform; }
.bg-layer-back  { animation: bgDriftBack 90s ease-in-out infinite alternate; }
.bg-layer-mid   { animation: bgDriftMid  120s ease-in-out infinite alternate; }
.bg-layer-front { animation: bgDriftFront 70s ease-in-out infinite alternate; }
@keyframes bgDriftBack  { to { transform: translate(18px, -12px) scale(1.02); } }
@keyframes bgDriftMid   { to { transform: translate(-22px, 14px); } }
@keyframes bgDriftFront { to { transform: translate(10px, -18px); } }

/* Dendritic traces — the branching circuit lines */
.bg-engine .bg-trace {
  fill: none; stroke: var(--ink-2); stroke-width: 1.4;
  opacity: 0.42; stroke-linecap: round;
}
.bg-engine .bg-trace-strong { stroke-width: 1.8; opacity: 0.5; stroke: var(--accent); }
.bg-engine .bg-trace-far {
  fill: none; stroke: var(--ink-2); stroke-width: 1;
  opacity: 0.24; stroke-linecap: round;
}

/* Junction nodes — small circles, accent ones pulse */
.bg-engine .bg-node {
  fill: var(--bg-elev); stroke: var(--ink-3); stroke-width: 1.2;
  opacity: 0.85;
}
.bg-engine .bg-node-accent {
  stroke: var(--accent); stroke-width: 1.6;
  animation: bgNodePulse 3.6s ease-in-out infinite;
}
.bg-engine .bg-node-large { animation-duration: 4.4s; }
@keyframes bgNodePulse {
  0%, 100% { stroke-opacity: 0.4; filter: none; }
  50%      { stroke-opacity: 0.7;
             filter: drop-shadow(0 0 4px color-mix(in oklab, var(--accent) 60%, transparent)); }
}

/* Circuit-board solder pads — small accent squares at trace ends */
.bg-engine .bg-pad {
  fill: none; stroke: var(--accent); stroke-width: 1.3;
  opacity: 0.4;
}

/* Distant sparks — twinkling dots */
.bg-engine .bg-spark {
  fill: var(--accent);
  animation: bgSparkTwinkle 4.5s ease-in-out infinite;
}
@keyframes bgSparkTwinkle {
  0%, 100% { opacity: 0.12; transform: scale(0.8); }
  50%      { opacity: 0.5; transform: scale(1.2); }
}

/* Signals — pulses travelling along traces (kept subtle so they never fight the text) */
.bg-engine .bg-signal {
  fill: var(--accent); opacity: 0.7;
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--accent) 70%, transparent));
}
.bg-engine .bg-signal-bright {
  opacity: 0.8;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 70%, transparent));
}

/* Dark theme: lift the engine further */
html[data-dark="true"] .bg-engine .bg-trace      { opacity: 0.5; stroke: var(--ink-2); }
html[data-dark="true"] .bg-engine .bg-trace-strong { opacity: 0.6; }
html[data-dark="true"] .bg-engine .bg-trace-far  { opacity: 0.32; }
html[data-dark="true"] .bg-engine .bg-node       { fill: var(--bg-soft); opacity: 0.6; }

/* Stack everything above the bg layer */
.nav, main, .site-foot, .skip-link { position: relative; z-index: 2; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center;
  height: var(--nav-h); gap: 24px;
}
/* Left: AtlasIQ brand · Center: nav links · Right: AI Labs logo.
   Equal flex on the two side groups keeps the center links optically centered. */
.brand { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 14px; font-weight: 700; letter-spacing: -0.015em; }
.brand-logo {
  width: 60px; height: 60px; object-fit: contain; display: block; flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px color-mix(in oklab, var(--ink) 25%, transparent));
}
.brand-name { font-size: 24px; color: var(--ink); line-height: 1; white-space: nowrap; }
.brand-name em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); font-size: 1.05em; }
.brand-name .tm { font-size: 0.46em; font-weight: 600; vertical-align: super; margin-left: 1px; color: var(--ink-2); }

.nav-links { flex: 0 1 auto; display: flex; gap: 30px; justify-content: center; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; transition: color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent); }

.nav-cta { flex: 1 1 0; display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
/* AI Labs parent-company logo, top-right */
.ailabs-logo {
  height: 40px; width: auto; display: block; flex: 0 0 auto;
  background: #fff; padding: 4px 9px; border-radius: 7px;
  box-shadow: 0 1px 2px color-mix(in oklab, var(--ink) 12%, transparent);
}

.theme-toggle {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink-2); cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle .ico-moon { display: none; }
.theme-toggle .ico-sun { display: block; }
html[data-dark="true"] .theme-toggle .ico-moon { display: block; }
html[data-dark="true"] .theme-toggle .ico-sun { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  font: 500 14px/1 var(--sans); letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease, filter .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: color-mix(in oklab, var(--ink) 85%, var(--accent)); }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.arrow { width: 14px; height: 14px; }

/* ============================================================
   PAGE 1 — quadrant layout
   ============================================================ */
.quad-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
  padding: 22px 22px 28px;
  min-height: calc(100vh - var(--nav-h));
}
.quad {
  display: flex; flex-direction: column;
  padding: 26px 28px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--bg);
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--ink) 5%, transparent),
    0 18px 50px -28px color-mix(in oklab, var(--ink) 45%, transparent);
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
  container-name: quad;
}
.quad:nth-child(even) { background: var(--bg-soft); }
html[data-dark="true"] .quad {
  background: var(--bg-soft);
  border-color: var(--line);
  box-shadow:
    0 1px 0 color-mix(in oklab, var(--ink) 18%, transparent),
    0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
html[data-dark="true"] .quad:nth-child(even) { background: var(--bg-elev); }

.quad-head { margin-bottom: 14px; }
.quad-head h2,
.quad-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 2.8vw, 44px);
  line-height: 1.02; letter-spacing: -0.02em;
  margin: 8px 0 0; text-wrap: balance;
}
.quad-head h2 em,
.quad-title em { font-style: italic; color: var(--accent); }
.quad-title-hl {
  display: inline-block;
  position: relative;
  padding: 0 2px 6px;
}
.quad-title-hl::after {
  content: ""; display: block;
  width: 56px; height: 3px; border-radius: 3px;
  background: var(--accent); margin-top: 8px;
}
.quad-deck {
  margin: 12px 0 0; color: var(--ink-2);
  font-size: 15px; line-height: 1.45; max-width: 56ch;
}
.kicker {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}

/* Inline product-term highlight (Strategy Studio, MINSKY ALT5, etc.) */
.term {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: -0.005em;
}
h3.term, h4.term { font-family: var(--sans); font-style: normal; }

/* Sub-headings used inside a quad body */
.quad-subhead {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
  margin: 6px 0 0; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.quad-subhead::after {
  content: ""; flex: 1; height: 1px;
  background: var(--line);
}
.quad-subhead .term { color: var(--accent); }

/* Pillar trio in Q1 */
.pillars {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  margin: 2px 0;
}
.pillar {
  padding: 12px 14px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-elev);
  position: relative;
}
.pillar-num {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--ink-3);
}
.pillar h3 {
  margin: 0 0 4px; font-size: 15px; line-height: 1.2;
}
.pillar p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.pillar .pillar-meta { margin-top: 6px; }

/* 2x2 template-category grid in Q2 */
.mini-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.mini {
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-elev);
}
.mini-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 4px; font-weight: 600;
}
.mini p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }

/* Algorithm list in Q3 */
.algo-grid {
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--line);
}
.algo {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 6px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.algo-name { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.algo-use { color: var(--ink-2); font-size: 12.5px; text-align: right; }

/* When the card is wide enough, pop the dense lists into multiple columns */
@container quad (min-width: 520px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pillar { padding: 12px 12px 12px; }
  .pillar h3 { font-size: 14px; }
  .pillar p { font-size: 12px; line-height: 1.4; }
  .pillar-num { font-size: 9.5px; top: 8px; right: 10px; }

  .quad-list-grid { grid-template-columns: 1fr 1fr; }

  .sample-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sample p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

.quad-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding-right: 4px;
  scrollbar-width: thin;
}
.quad-body::-webkit-scrollbar { width: 6px; }
.quad-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.quad-lede { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.quad-sublede {
  margin: 0; font-size: 13px; color: var(--ink-3);
  font-family: var(--mono); letter-spacing: 0.04em;
}
.quad-sublede b { color: var(--accent); font-weight: 600; }
.quad-trust {
  margin: 4px 0 0; padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
  border-radius: 0 8px 8px 0;
}
.quad-trust b { color: var(--ink); font-weight: 600; }
.pillar-meta {
  margin-top: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ink-3); text-transform: uppercase;
}

.quad-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.quad-list-grid { display: grid; grid-template-columns: 1fr; column-gap: 18px; row-gap: 6px; }
.quad-list li {
  font-size: 13.5px; color: var(--ink-2); padding-left: 22px; position: relative; line-height: 1.4;
}
.quad-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--accent);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M13.5 4.5 6.5 11.5 3 8l1-1 2.5 2.5L12.5 3.5z'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M13.5 4.5 6.5 11.5 3 8l1-1 2.5 2.5L12.5 3.5z'/></svg>") center/contain no-repeat;
}
.quad-list li b { color: var(--ink); font-weight: 600; }

.quad-meta {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-3); padding-top: 10px; border-top: 1px solid var(--line);
}

.quad-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--line);
}

/* Sample report cards inside Q2 / Q3 */
.sample-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sample {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; background: var(--bg-elev);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s, transform .15s;
}
.sample:hover { border-color: var(--accent); }
.sample-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.sample-flag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); padding: 2px 6px; border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line));
}
.sample-score { font-family: var(--serif); font-size: 18px; line-height: 1; }
.sample-score span { font-family: var(--sans); font-size: 10px; color: var(--ink-3); margin-left: 1px; }
.sample h3 { font-family: var(--serif); font-weight: 400; font-size: 16px; line-height: 1.15; margin: 0; }
.sample p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.sample-link { color: var(--accent); font-weight: 500; font-size: 12.5px; align-self: flex-start; }
.sample-link:hover { text-decoration: underline; }
.sample-pending {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); padding: 4px 8px; border-radius: 999px;
  border: 1px dashed var(--line-strong); align-self: flex-start;
}

/* Compact FAQ for Q4 */
.quad-faq { gap: 0; }
.quad-faq details {
  border-bottom: 1px solid var(--line); padding: 12px 0;
}
.quad-faq details:first-child { padding-top: 0; }
.quad-faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  font-family: var(--serif); font-weight: 400; font-size: 17px;
  line-height: 1.25; letter-spacing: -0.005em;
}
.quad-faq summary::-webkit-details-marker { display: none; }
.quad-faq .plus {
  width: 18px; height: 18px; display: grid; place-items: center;
  color: var(--accent); font-family: var(--sans); font-weight: 500; font-size: 16px;
  transition: transform .2s ease; flex-shrink: 0;
}
.quad-faq details[open] .plus { transform: rotate(45deg); }
.quad-faq p { color: var(--ink-2); margin: 10px 0 0; font-size: 14px; line-height: 1.5; }

/* ============================================================
   PAGE 2 — pricing (lifted from prior design, retuned)
   ============================================================ */
.page-pricing main { padding-bottom: 80px; }
#pricing { padding: 56px 0 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 36px; flex-wrap: wrap; }
.section-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.02em; margin: 12px 0 0; line-height: 1.0; max-width: 680px; text-wrap: balance; }
.section-head h2 em { font-style: italic; color: var(--accent); }
.section-head p { max-width: 420px; color: var(--ink-2); margin: 0; }

.price-toggle {
  display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-soft); margin: 8px 0 32px;
}
.price-toggle button {
  background: transparent; border: 0; cursor: pointer; padding: 8px 18px;
  font: 500 13px var(--sans); border-radius: 999px; color: var(--ink-2);
}
.price-toggle button.active { background: var(--ink); color: var(--bg); }
.save-pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  background: var(--accent-soft);
  color: var(--accent); padding: 2px 6px; border-radius: 4px; margin-left: 6px;
}

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
  padding: 36px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); display: flex; flex-direction: column; position: relative;
}
.plan.featured { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.plan.featured .check-list li { color: color-mix(in oklab, var(--bg) 78%, transparent); }
.plan.featured .plan-name { color: color-mix(in oklab, var(--bg) 70%, transparent); }
.plan.featured .plan-price { color: var(--bg); }
.plan.featured .price-note { color: color-mix(in oklab, var(--bg) 60%, transparent); }
.plan.featured .divider { border-color: color-mix(in oklab, var(--bg) 18%, transparent); }
.plan.featured .badge { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.badge {
  position: absolute; top: 18px; right: 18px; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 999px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong);
}
.badge-trial { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
.plan-name {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.plan-title {
  font-family: var(--serif); font-weight: 400; font-size: 32px;
  margin: 8px 0 6px; letter-spacing: -0.01em;
}
.plan-tag { color: var(--ink-2); font-size: 14.5px; margin: 0 0 24px; }
.plan.featured .plan-tag { color: color-mix(in oklab, var(--bg) 78%, transparent); }

.plan-price {
  font-family: var(--serif); font-size: 60px; line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
}
.plan-price .cur { font-size: 22px; color: var(--ink-2); }
.plan-price .per { font-size: 15px; color: var(--ink-3); font-family: var(--sans); margin-left: 4px; }
.plan.featured .plan-price .cur, .plan.featured .plan-price .per { color: color-mix(in oklab, var(--bg) 70%, transparent); }
.price-note { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 6px; letter-spacing: 0.05em; }

.divider { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

.check-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.check-list li { font-size: 14.5px; color: var(--ink-2); display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.check-list li::before {
  content: ""; width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
  background: var(--accent); border-radius: 4px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M13.5 4.5 6.5 11.5 3 8l1-1 2.5 2.5L12.5 3.5z'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M13.5 4.5 6.5 11.5 3 8l1-1 2.5 2.5L12.5 3.5z'/></svg>") center/contain no-repeat;
}

.addons {
  margin-top: 40px; padding: 32px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft);
}
.addons-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-bottom: 22px; flex-wrap: wrap; }
.addons-head p { margin: 8px 0 0; max-width: 520px; color: var(--ink-2); font-size: 14px; }
.addons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.addon {
  padding: 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.addon-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.addon-price { font-family: var(--serif); font-size: 34px; line-height: 1; letter-spacing: -0.01em; margin-top: 6px; }
.addon-price .cur { font-size: 17px; color: var(--ink-2); margin-right: 2px; }
.addon-note { font-size: 13px; color: var(--ink-2); margin-top: 2px; }

/* ---------- Footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 20px 0; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--ink-3);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
}
.foot-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-inner sup { font-size: 0.7em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .quad-page { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; min-height: 0; gap: 18px; padding: 18px; }
  .quad { min-height: 480px; }
  .quad-body { overflow: visible; }
}
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .addons-grid { grid-template-columns: 1fr; }
  .addons { padding: 22px; }
}
@media (max-width: 760px) {
  /* Below tablet, drop the centered nav links (About / Pricing) */
  .nav-links { display: none; }
}
@media (max-width: 720px) {
  :root { --nav-h: 64px; }
  .brand { gap: 10px; }
  .brand-logo { width: 46px; height: 46px; }
  .brand-name { font-size: 19px; }
  .theme-toggle { width: 38px; height: 38px; }
  .ailabs-logo { height: 34px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .quad { padding: 22px 20px; }
  .nav-inner { gap: 12px; }
  .brand-logo { width: 40px; height: 40px; }
  /* Phones: AtlasIQ mark on the left, AI Labs logo (+ toggle) on the right —
     drop the product wordmark to keep the bar clean and avoid overflow */
  .brand-name { display: none; }
  .ailabs-logo { height: 32px; padding: 3px 8px; }
}
@media (max-width: 440px) {
  .brand-logo { width: 34px; height: 34px; }
  .ailabs-logo { height: 28px; padding: 3px 7px; }
  .nav-cta { gap: 8px; }
  .theme-toggle { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .bg-engine .bg-signal { display: none; }
  .bg-engine .bg-layer { animation: none; }
  .bg-engine .bg-node-accent,
  .bg-engine .bg-spark { animation: none; }
}