/* ============================================================
   kapitonov.su/ai — AI-native development: consulting & course
   Builds on ../styles.css (tokens, nav, hero, sections, cards,
   buttons); this file only adds what the page needs on top.
   Level 1 (the product loop) is cool, level 2 (the process
   loop) is heat — the same two ends of the thermal scale.
   ============================================================ */

/* ---------- hero ---------- */
/* no live heat field here: a soft bloom behind the schematic instead */
.ai-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(34% 48% at 79% 44%, rgba(77, 214, 230, 0.075), transparent 70%),
    radial-gradient(28% 40% at 82% 40%, rgba(255, 106, 61, 0.06), transparent 70%);
}
.ai-status { color: var(--ok); display: inline-flex; align-items: center; }
.ai-nowrap { white-space: nowrap; }

.ai-hero__grid {
  grid-template-columns: minmax(0, 1fr) clamp(320px, 36vw, 450px);
  align-items: center;
}
.ai-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(42px, 8vw, 118px);
  font-size: clamp(34px, 12.8cqi, 118px);   /* "Software that" fills ~95% of its column */
  line-height: 0.92;
  letter-spacing: -0.04em;
  display: flex;
  flex-direction: column;
}
.ai-title__accent {
  background: linear-gradient(95deg, #ff5a2c 0%, var(--heat) 22%, var(--heat-soft) 62%, #ffb899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.04em;
  width: max-content;
  max-width: 100%;
}
/* the title is the LCP candidate: it slides in but is never invisible */
.js .ai-title .reveal { opacity: 1; }

/* ---------- loop schematic panel ---------- */
.panel--loop { padding: 18px 18px 16px; }
.panel--loop .panel__head { margin-bottom: 4px; }
.panel--loop .panel__state { min-width: 0; }

.loopviz {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--mono);
}
.lv-ring { fill: none; stroke-width: 1.5; transition: stroke .5s, stroke-opacity .5s; }
.lv-ring--inner { stroke: var(--cool); stroke-opacity: 0.5; }
.lv-ring--outer { stroke: var(--heat); stroke-opacity: 0.55; stroke-dasharray: 3 7; }
.lv-ring--inner.is-retuned { stroke: var(--heat); stroke-opacity: 0.95; }

.lv-ticks line { stroke: var(--heat); stroke-opacity: 0.3; stroke-width: 1; stroke-dasharray: 2 4; marker-end: url(#lv-arrow); }
#lv-arrow path { fill: var(--heat); fill-opacity: 0.45; }

.lv-chev path { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lv-chev--inner path { stroke: var(--cool); stroke-opacity: 0.7; }
.lv-chev--outer path { stroke: var(--heat); stroke-opacity: 0.7; }

.lv-ripple { fill: none; stroke: var(--heat); stroke-width: 2; opacity: 0; }
.lv-trail { fill: none; stroke-width: 3; stroke-linecap: round; }
.lv-pulse--inner { fill: var(--cool); }
.lv-pulse--outer { fill: var(--heat); }
/* the pulses only make sense while loop.js drives them */
html:not(.js) .lv-pulse, html:not(.js) .lv-trail { display: none; }

.lv-node rect { fill: #111318; stroke-width: 1; transition: fill .35s, stroke .35s; }
.lv-node text { font-size: 11px; letter-spacing: 0.12em; text-anchor: middle; fill: var(--text); }
.lv-node--l1 rect { stroke: rgba(77, 214, 230, 0.55); }
.lv-node--l2 rect { stroke: rgba(255, 106, 61, 0.6); }
.lv-node--l1.is-hot rect { fill: rgba(77, 214, 230, 0.2); stroke: var(--cool); }
.lv-node--l2.is-hot rect { fill: rgba(255, 106, 61, 0.22); stroke: var(--heat); }
.lv-node--l1.is-tuned rect { stroke: var(--heat); }

.lv-core text { text-anchor: middle; }
.lv-core__tag { font-size: 9.5px; letter-spacing: 0.16em; fill: var(--faint); }
.lv-core__name { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.01em; fill: var(--text); }
.lv-core__cap { font-size: 10px; fill: var(--dim); }

.lv-rows {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.lv-rows dd { font-size: 12px; line-height: 1.45; letter-spacing: 0.01em; }
.lv-rows [data-lv="l1"] { color: var(--cool); }
.lv-rows [data-lv="l2"] { color: var(--heat-soft); }

/* ---------- 01 · two loops ---------- */
.section__title.ai-wide { max-width: 22ch; }
.section__title em { font-style: normal; color: var(--heat); }

.levels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.level {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px;
}
.level--1 { border-color: rgba(77, 214, 230, 0.22); background: linear-gradient(160deg, rgba(77, 214, 230, 0.08), var(--surface) 55%); }
.level--2 { border-color: rgba(255, 106, 61, 0.32); background: linear-gradient(160deg, rgba(255, 106, 61, 0.12), var(--surface) 58%); }
.level__tag { font-size: 11px; letter-spacing: 0.2em; margin-bottom: 14px; }
.level--1 .level__tag { color: var(--cool); }
.level--2 .level__tag { color: var(--heat); }
.level__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.level__steps { list-style: none; display: grid; gap: 14px; }
.level__steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; }
.level__steps p, .level__text { color: #c4c7cf; font-size: 15px; line-height: 1.58; }
.level__steps b { color: var(--text); font-weight: 600; }
.level__num { color: var(--cool); font-size: 12px; padding-top: 3px; }
.level__facts { list-style: none; margin-top: 16px; display: grid; gap: 9px; }
.level__facts li { position: relative; padding-left: 20px; color: #d3d5dc; font-size: 14.5px; line-height: 1.5; }
.level__facts li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.66em;
  width: 8px; height: 1px;
  background: var(--heat);
}
.level__note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 106, 61, 0.25);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--dim);
}

.humans {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin-top: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.humans__label { font-size: 11px; letter-spacing: 0.2em; color: var(--ok); white-space: nowrap; }
.humans p { flex: 1 1 320px; color: #c4c7cf; font-size: 15px; }

/* ---------- 02 · core topics ---------- */
.topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.topic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 24px;
}
.topic__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.topic__text { color: #c4c7cf; font-size: 15px; line-height: 1.58; flex: 1; }
.topic__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.topic__chips li {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--cool);
  background: rgba(77, 214, 230, 0.06);
  border: 1px solid rgba(77, 214, 230, 0.32);
  border-radius: 6px;
  padding: 3px 8px;
}
.topic__proof { padding-top: 14px; border-top: 1px dashed var(--line); }
.topic__label { font-size: 10.5px; letter-spacing: 0.18em; color: var(--faint); }
.topic__proof ul { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.topic__proof li { position: relative; padding-left: 16px; color: var(--dim); font-size: 13.5px; line-height: 1.5; }
.topic__proof li::before { content: "\25B8"; position: absolute; left: 0; top: 0.05em; font-size: 11px; color: var(--heat); }
.topic__proof b { color: var(--text); font-weight: 600; }
.topic__proof a { color: var(--text); border-bottom: 1px solid rgba(255, 255, 255, 0.22); transition: color .2s, border-color .2s; }
.topic__proof a:hover, .topic__proof a:focus-visible { color: var(--heat); border-bottom-color: var(--heat); }

/* ---------- 03 · work with me ---------- */
.ai-lede {
  max-width: 62ch;
  margin-top: 18px;
  color: #c8cad2;
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.65;
}
.tracks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.track {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 28px;
  scroll-margin-top: 90px;
}
.track--company { border-color: rgba(255, 106, 61, 0.32); background: linear-gradient(160deg, rgba(255, 106, 61, 0.11), var(--surface) 55%); }
.track--course { border-color: rgba(77, 214, 230, 0.26); background: linear-gradient(160deg, rgba(77, 214, 230, 0.08), var(--surface) 55%); }
.track__tag { font-size: 11px; letter-spacing: 0.2em; margin-bottom: 14px; }
.track--company .track__tag { color: var(--heat); }
.track--course .track__tag { color: var(--cool); }
.track__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(23px, 2.6vw, 32px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.track__sub {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.25;
  color: var(--dim);
}
.track__sub em { font-style: normal; color: var(--cool); }
.track__text { margin-top: 14px; color: #c4c7cf; font-size: 15px; line-height: 1.58; }
.track__list { list-style: none; margin-top: 18px; display: grid; gap: 12px; }
.track__list li { position: relative; padding-left: 20px; color: #c4c7cf; font-size: 15px; line-height: 1.55; }
.track__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.7em;
  width: 8px; height: 1px;
  background: var(--heat);
}
.track__list b { color: var(--text); font-weight: 600; }
.track__inside { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--line); }
.track__label { font-size: 10.5px; letter-spacing: 0.18em; color: var(--faint); }
.track__steps {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--dim);
}
.track__steps span { color: var(--heat); margin-right: 10px; }
.track--course .track__steps span { color: var(--cool); }
.track__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: auto;
  padding-top: 26px;
}
.track__avail { font-size: 11.5px; letter-spacing: 0.08em; color: var(--dim); display: inline-flex; align-items: center; }

.tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
}
.tier {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-2);
  padding: 18px;
}
.tier__kind { font-size: 10.5px; letter-spacing: 0.18em; color: var(--cool); }
.tier__name { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.15; letter-spacing: -0.015em; }
.tier__desc { color: #c4c7cf; font-size: 14px; line-height: 1.5; flex: 1; }
.tier__status { font-size: 11px; letter-spacing: 0.06em; color: var(--dim); display: flex; align-items: center; }
.tier__cta {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--cool);
  border: 1px solid rgba(77, 214, 230, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  transition: background .2s, border-color .2s, transform .18s;
}
.tier__cta:hover, .tier__cta:focus-visible { background: rgba(77, 214, 230, 0.08); border-color: var(--cool); transform: translateY(-2px); }
.dot--heat { background: var(--heat); animation-name: pulse-heat; }

/* ---------- 04 · contact ---------- */
.ai-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.ai-contact .comms { margin-top: 0; }
.whoami {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
}
/* head-and-shoulders crop of photo.jpg: margins in % of the box width */
.whoami__photo { display: block; width: 104px; aspect-ratio: 5 / 6; overflow: hidden; border-radius: 10px; background: #0e0f13; }
.whoami__photo img {
  display: block;
  width: 165%;
  max-width: none;
  height: auto;
  margin: -24% 0 0 -34%;
  filter: grayscale(0.45) contrast(1.04) brightness(0.94);
}
.whoami__name { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; line-height: 1.15; }
.whoami__bio { color: var(--dim); font-size: 14px; line-height: 1.5; margin-top: 6px; }
.whoami__link { display: inline-block; margin-top: 10px; font-size: 12px; letter-spacing: 0.06em; color: var(--heat); }
.whoami__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .ai-hero__grid { grid-template-columns: 1fr; align-items: stretch; }
  .panel.panel--loop { display: block; max-width: 560px; padding: 16px; }
  .levels, .tracks, .topics, .ai-contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .panel.panel--loop { padding: 12px; }
  .lv-rows dd { font-size: 11.5px; min-height: 2.9em; }
  .level, .track { padding: 22px; }
  .tiers { grid-template-columns: 1fr; }
  .whoami { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .whoami__photo { width: 84px; }
  .track__foot .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- reduced motion: the schematic stays a static diagram ---------- */
@media (prefers-reduced-motion: reduce) {
  .lv-pulse, .lv-trail, .lv-ripple { display: none; }
}