/* ============================================================
   NIZOV.AI — anti-card design kit (DESIGN.md doctrine, applied)
   Editorial-first marketing surface + instrument readouts for data.
   NO cards: hairlines · numbers-in-text · corner-bracket cells (sparingly).
   COMPOSE these classes — do not re-roll boxed cards.
   Loaded after base.css; depends on variables.css tokens.
   ============================================================ */

/* ---------- editorial section head (eyebrow + engraved hairline + title) ---------- */
.sec{ position:relative; }
.sec__top{ display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3.4rem); }
.sec__idx{ font-family:var(--mono); font-size:var(--t-mono); color:var(--accent); letter-spacing:.16em; }
.sec__title{ font-size:var(--t-h2); font-weight:700; line-height:1.04; letter-spacing:-0.025em; }
.sec__title em{ font-style:normal; color:var(--ink-2); }            /* 2nd word dimmed = free contrast */
.sec__rule{ height:1px; border:0; flex:1 1 120px; min-width:80px; align-self:center;
  background:linear-gradient(90deg,var(--line-1),transparent); }
.sec__lead{ font-size:clamp(1.1rem,1.5vw,1.32rem); color:var(--ink-1); max-width:56ch; line-height:1.5; }

/* asymmetric editorial column: content offset, not centered boxes */
.colset{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:clamp(1.4rem,4vw,4rem); align-items:start; }
@media(max-width:820px){ .colset{ grid-template-columns:1fr; gap:1.2rem; } }
.colset__aside{ font-family:var(--mono); font-size:var(--t-mono); color:var(--ink-2); letter-spacing:.04em; text-transform:uppercase; }

/* ---------- KPI: numbers-in-text, split by vertical hairlines (NOT tiles) ---------- */
.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.kpi{ padding:.2rem clamp(1.2rem,2.4vw,2.2rem); border-left:1px solid var(--line); }
.kpi:first-child{ border-left:0; padding-left:0; }
.kpi__n{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1; letter-spacing:-0.02em; color:var(--ink-0); }
.kpi__n .u{ color:var(--accent); }
.kpi__l{ margin-top:.7rem; font-family:var(--mono); font-size:var(--t-mono); color:var(--ink-1);
  text-transform:uppercase; letter-spacing:.1em; line-height:1.4; }
@media(max-width:560px){ .kpis{ grid-template-columns:1fr 1fr; gap:1.4rem 0; } }

/* ---------- the ONLY allowed frame: corner-bracket hairline cell (use sparingly) ---------- */
.brk{ position:relative; padding:clamp(1.3rem,2.4vw,2rem); }
.brk::before,.brk::after{ content:""; position:absolute; width:14px; height:14px; pointer-events:none; }
.brk::before{ top:0; left:0; border-top:1px solid var(--accent); border-left:1px solid var(--accent); }
.brk::after{ bottom:0; right:0; border-bottom:1px solid var(--accent); border-right:1px solid var(--accent); }
.brk--full{ border:1px solid var(--line); }                         /* optional faint full hairline */

/* ---------- hairline rail (lists: rows separated by hairlines, NO outer box) ---------- */
.rail{ border-top:1px solid var(--line); }
.rail__row{ display:grid; grid-template-columns:auto 1fr auto; gap:1.2rem; align-items:baseline;
  padding:clamp(1rem,1.8vw,1.5rem) 0; border-bottom:1px solid var(--line); }
.rail__k{ font-family:var(--mono); font-size:var(--t-mono); color:var(--accent); letter-spacing:.08em; white-space:nowrap; }
.rail__t{ font-weight:600; font-size:1.05rem; }
.rail__d{ color:var(--ink-1); font-size:.98rem; }
.rail__row:hover .rail__k{ color:var(--accent-2); }

/* ---------- editorial pull-quote (testimonials — NOT cards) ---------- */
.quote{ position:relative; padding:clamp(1.4rem,3vw,2.4rem) 0; border-top:1px solid var(--line); }
.quote__mark{ font-family:var(--display); font-size:3.4rem; line-height:.5; color:var(--accent); opacity:.5; }
.quote__result{ font-family:var(--mono); font-size:var(--t-sm); color:var(--accent); letter-spacing:.02em; margin-bottom:.9rem; }
.quote__body{ font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--ink-0); line-height:1.55; max-width:62ch; }
.quote__by{ margin-top:1rem; font-family:var(--mono); font-size:var(--t-mono); color:var(--ink-2); letter-spacing:.06em; }

/* ---------- hairline timeline spine (roadmap / career — NOT boxed steps) ---------- */
.tl{ position:relative; padding-left:clamp(2rem,4vw,3.4rem); }
.tl::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--line); }
.tl__fill{ content:""; position:absolute; left:7px; top:6px; width:1px; background:linear-gradient(var(--accent),transparent);
  height:0; transition:height .1s linear; }                          /* scroll-scrub via page JS (optional) */
.tl__node{ position:relative; padding-block:clamp(1.2rem,2.4vw,2rem); }
.tl__node::before{ content:""; position:absolute; left:calc(-1*clamp(2rem,4vw,3.4rem) + 3px); top:calc(clamp(1.2rem,2.4vw,2rem) + .35em);
  width:9px; height:9px; border:1px solid var(--accent); background:var(--bg-0); border-radius:1px; }
.tl__node--done::before{ background:var(--accent); box-shadow:0 0 10px var(--glow); }
.tl__idx{ font-family:var(--mono); font-size:var(--t-mono); color:var(--accent); letter-spacing:.1em; }
.tl__title{ font-weight:700; font-size:var(--t-h3); margin:.3rem 0 .6rem; letter-spacing:-0.02em; }
.tl__pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.tl__pill{ font-family:var(--mono); font-size:var(--t-micro); color:var(--ink-1); border:1px solid var(--line);
  padding:.3em .7em; border-radius:3px; }
.tl__note{ font-family:var(--mono); font-size:var(--t-mono); color:var(--ink-2); margin-top:.7rem; }
.tl__note::before{ content:"// "; color:var(--accent); }

/* ---------- pricing as hairline matrix rows (NOT 4 floating boxes) ---------- */
.matrix{ border-top:1px solid var(--line-1); }
.matrix__row{ display:grid; grid-template-columns:minmax(0,1.4fr) auto minmax(0,1.6fr) auto; gap:1.4rem;
  align-items:center; padding:clamp(1.4rem,2.6vw,2.2rem) 0; border-bottom:1px solid var(--line); transition:background var(--dur-1) var(--ease); }
.matrix__row:hover{ background:linear-gradient(90deg,var(--accent-dim),transparent 60%); }
.matrix__row--feat .matrix__name{ color:var(--accent); }
.matrix__name{ font-weight:700; font-size:var(--t-h3); letter-spacing:-0.02em; }
.matrix__tag{ font-family:var(--mono); font-size:var(--t-micro); color:var(--accent); letter-spacing:.1em; text-transform:uppercase; }
.matrix__price{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; font-size:clamp(1.4rem,2.4vw,2rem); white-space:nowrap; }
.matrix__price .pct{ color:var(--accent); }
.matrix__desc{ color:var(--ink-1); font-size:.98rem; }
@media(max-width:760px){ .matrix__row{ grid-template-columns:1fr; gap:.6rem; } }

/* ---------- big editorial statement line (one hero-moment per section) ---------- */
.statement{ font-size:clamp(1.6rem,3.4vw,2.8rem); font-weight:600; line-height:1.18; letter-spacing:-0.02em; max-width:24ch; }
.statement .accent{ color:var(--accent); }

/* ---------- terminal flavor line (brand motif, used as accent not noise) ---------- */
.term{ font-family:var(--mono); font-size:var(--t-mono); color:var(--ink-2); letter-spacing:.02em; }
.term .c{ color:var(--ink-0); } .term .ok{ color:var(--accent); }
.term::before{ content:"> "; color:var(--accent); }

/* ---------- CTA band: clean top-hairline accent (NO contained PNG-glow) ---------- */
.wash{ position:relative; }
.wash::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(440px,72%); height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.8; }
.wash > *{ position:relative; }