/* Planar × Octo — "Signal" palette across the whole page (local preview, 2026-10-15).
 * The violet comes from the octopus: eyes and suckers. It marks what is active or chosen:
 * orbits and dots, thin lines, selected tabs and goals, opened services, the Planar column,
 * focus and the form. Surfaces stay graphite, text stays silver-white, main CTAs stay silver.
 * Loaded after styles.css; overrides only colours and a few decorative details. */
:root {
  --violet: oklch(64% .2 300);          /* suckers: lines, dots, indicators */
  --violet-bright: oklch(73% .17 303);  /* eye highlight: small marks on graphite */
  --violet-soft: oklch(85% .08 305);    /* readable lavender for small labels */
  --violet-deep: oklch(36% .13 300);
  --violet-line: oklch(64% .2 300 / .5);
  --violet-faint: oklch(64% .2 300 / .16);
  --color-focus: oklch(83% .11 305);
  --color-silver-haze: oklch(62% .12 300 / .08); /* atmosphere: a violet breath behind the strands */
}

::selection { background: oklch(64% .2 300 / .55); color: var(--color-ink); }

/* ---------- Labels and links ---------- */
.section-label { color: var(--violet-soft); }
.eyebrow::before { background: linear-gradient(90deg, var(--violet), var(--color-silver)); }
.text-link {
  background: linear-gradient(var(--color-rule-strong), var(--color-rule-strong)) no-repeat 0 calc(100% - 8px) / 100% 1px,
              linear-gradient(var(--violet-bright), var(--violet-bright)) no-repeat 0 calc(100% - 8px) / 0 1px;
}
@media (hover: hover) {
  .button-outline:hover { border-color: var(--violet-bright); }
  .social-circle:hover { border-color: var(--violet-bright); }
}

/* ---------- Header: Signal line, violet hairlines, silver CTA ---------- */
.site-header { border-bottom-color: oklch(64% .2 300 / .42); }
.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, oklch(64% .2 300 / 0) 0%, var(--violet) 18%, oklch(64% .2 300 / .25) 55%, oklch(64% .2 300 / 0) 100%);
  pointer-events: none;
}
.nav-links a::after { background: var(--violet-bright); }
@media (min-width: 901px) { .header-telegram { border-color: oklch(64% .2 300 / .75); } }
.nav-telegram { border-color: oklch(64% .2 300 / .75); }
@media (hover: hover) {
  .header-telegram:hover, .nav-telegram:hover { border-color: var(--violet-bright); color: var(--color-ink); }
}

/* The octopus mark: a fixed box, so motion never moves the wordmark or the menu */
.brand { gap: .55rem; }
.brand .octo-mark {
  position: relative;
  display: block;
  flex: none;
  width: 84px;
  height: var(--header-h);
  margin-block: calc((44px - var(--header-h)) / 2); /* the link keeps its 44px target */
  margin-left: -10px;
  /* Cut only along the header's bottom line: the sway and the curl stay whole at the sides */
  clip-path: inset(-24px -24px 0 -24px);
}
.brand .octo-mark::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 0;
  top: 18%;
  bottom: -20%;
  background: radial-gradient(closest-side, oklch(58% .2 300 / .26), oklch(58% .2 300 / 0));
  pointer-events: none;
}
.octo-mark svg {
  position: absolute;
  left: 0;
  top: 7px;
  width: 84px;
  height: 66px;
  overflow: visible;
}
.site-footer .brand img { width: 34px; height: 34px; }

/* ---------- Hero orbit plate ---------- */
.orbit-line.o1 { stroke: var(--violet); stroke-opacity: .5; }
.orbit-line.o3 { stroke: var(--violet-line); }
.orbit-spark { fill: var(--violet-bright); }
.case-link { stroke: var(--violet-bright); }
.case-node[aria-pressed="true"] i { background: var(--violet); border-color: var(--violet-bright); }
.case-node[aria-pressed="true"] i::after { border-color: var(--violet-bright); }
@media (hover: hover) { .case-node:hover i { border-color: var(--violet-bright); } }
.hero-evidence { box-shadow: inset 0 1px 0 oklch(64% .2 300 / .55), 0 40px 90px -50px var(--color-shadow); }

/* ---------- Services: the opened service ---------- */
.service-list details::before { background: linear-gradient(90deg, var(--violet-bright), oklch(64% .2 300 / 0)); }
.service-list details[open]:not(.is-closing) .service-no { color: var(--violet-bright); }
details[open]:not(.is-closing) > summary .expand-icon { border-color: var(--violet); }

/* ---------- Results ---------- */
.tab-indicator { background: linear-gradient(90deg, var(--violet), var(--violet-bright)); }
.case-tabs button[aria-selected="true"] .tab-no { color: var(--violet-bright); }
.bridge-path { stroke: var(--violet-line); }
.bridge-dot { fill: var(--violet-bright); }

/* ---------- Comparison: the Planar column carries the colour ---------- */
.comparison-row > strong::before { background: var(--violet-bright); box-shadow: 0 0 0 4px var(--violet-faint); }
.comparison-head > span:last-child { color: var(--violet-soft); }

/* ---------- Goals ---------- */
.goal-indicator { background: var(--violet-bright); }
.goal-options button[aria-selected="true"] .goal-no { color: var(--violet-bright); }
.gs-node { fill: var(--violet-bright); }
.gs-orbit:first-child { stroke: var(--violet-line); }

/* ---------- Network ---------- */
.n-dot { fill: var(--violet-bright); }
.node-three { border-color: var(--violet); }

/* ---------- FAQ ---------- */
.faq-list details[open]:not(.is-closing) { box-shadow: inset 2px 0 0 var(--violet); }
.faq-list details[open]:not(.is-closing) summary { padding-left: 1rem; }
.faq-list summary { transition: padding-left var(--dur-normal) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.faq-list details[open]:not(.is-closing) .faq-answer > p { padding-left: 1rem; }

/* ---------- Contact and form ---------- */
.contact-section::before { border-color: oklch(64% .2 300 / .22); }
.contact-direct .social-circle { border-color: oklch(64% .2 300 / .75); }
.contact-next li > span { color: var(--violet-bright); }
#brief-form { border-top-color: oklch(64% .2 300 / .6); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--violet-bright);
  box-shadow: 0 0 0 3px oklch(64% .2 300 / .22);
}

/* Cameo: the octopus looks over the top edge of the form once, then idles there.
   Its eyes end exactly at the panel's edge; it never covers a field and takes no clicks. */
#brief-form > .octo-peek {
  position: absolute;
  right: 1.25rem;
  bottom: 100%;
  width: 118px;
  height: 60px;
  /* Hidden only below the panel's top edge, so the whole head and curl show while it sways */
  clip-path: inset(-40px -48px 0 -48px);
  pointer-events: none;
}
.octo-peek svg {
  position: absolute;
  left: 0;
  top: 100%;
  width: 118px;
  height: 60px;
  overflow: visible;
  transition: transform 1100ms var(--ease-out);
}
.octo-peek.is-up svg { transform: translateY(-100%); }

/* ---------- Footer ---------- */
.footer-bottom { border-top-color: transparent; background: linear-gradient(90deg, var(--violet-line), oklch(28% .005 260) 45%) no-repeat top / 100% 1px; }
@media (hover: hover) { .footer-socials > a:not(.social-circle):hover, .footer-bottom a:hover { color: var(--violet-soft); } }

/* ---------- Phones and tablets ---------- */
@media (max-width: 900px) {
  .site-header::before { display: none; }
  .site-header::after { border-top-color: oklch(64% .2 300 / .7); }
  .brand { margin-left: -3px; gap: .45rem; }
  .brand .octo-mark { width: 66px; margin-left: -8px; }
  .octo-mark svg { width: 66px; height: 52px; top: 9px; }
  /* the approved mobile header 09: frameless icons, so no violet ring here */
  .header-telegram { border-color: transparent; box-shadow: none; }
}
@media (max-width: 760px) {
  /* 38px fits the 42px gap above the form on phones */
  #brief-form > .octo-peek { right: 1rem; width: 75px; height: 38px; }
  .octo-peek svg { width: 75px; height: 38px; }
}

/* Reduced motion: a still octopus; the cameo is simply there */
@media (prefers-reduced-motion: reduce) {
  .octo-peek svg { transition: none; transform: translateY(-100%); }
}