/* Landing page only. Every class here is home- prefixed; no other page reads
   these, and this file reads no other page's classes. */

/* ── hero ───────────────────────────────────────────────────────────────── */

.home-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(56px, 8vw, 104px) clamp(48px, 7vw, 88px);
}
/* One light source, behind the headline, so the eye lands on the sentence
   before it lands on anything else. */
.home-hero::before {
  content: ""; position: absolute; inset: -30% 20% auto -10%; height: 620px;
  background: radial-gradient(closest-side, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.home-hero__in { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.home-hero h1 { margin-block: 18px 20px; }
.home-hero h1 em { font-style: normal; color: var(--accent); }
.home-hero__lede { font-size: clamp(1.02rem, 1.7vw, 1.16rem); max-width: 54ch; }
.home-hero__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.home-hero__meta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; }

@media (max-width: 940px) {
  .home-hero__in { grid-template-columns: 1fr; gap: 40px; }
}

/* ── admission theatre ──────────────────────────────────────────────────── */
/* The product's one-sentence claim, shown rather than asserted: four images
   arriving, four verdicts, no network call in the path. */

.home-adm {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden;
}
.home-adm__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--mono); font-size: .78rem; color: var(--faint);
}
.home-adm__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.home-adm__dot--live { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.home-adm__rows { display: grid; }
.home-adm__row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.home-adm__row:last-child { border-bottom: 0; }
.home-adm__img { grid-column: 1; grid-row: 1; font-family: var(--mono); font-size: .84rem; color: var(--text); word-break: break-all; }
.home-adm__why { grid-column: 1; grid-row: 2; font-size: .84rem; color: var(--faint); }
.home-adm__verdict { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; }
.home-adm__foot {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-top: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: .78rem; color: var(--muted);
}
.home-adm__foot strong { color: var(--green); }

/* ── proof strip ────────────────────────────────────────────────────────── */

.home-proof { border-block: 1px solid var(--line); background: var(--bg-raise); padding-block: 30px; }
.home-proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; row-gap: 4px; }
.home-proof__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.home-proof__k { font-family: var(--disp); font-size: 1.02rem; font-weight: 600; }
.home-proof__v { font-size: .88rem; color: var(--faint); }
@media (max-width: 860px) { .home-proof__grid { grid-template-columns: 1fr 1fr; row-gap: 24px; } }

/* ── argument ───────────────────────────────────────────────────────────── */

.home-arg__in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; }
.home-arg h2 { margin-block: 14px 0; }
.home-arg__body { display: grid; gap: 18px; }
.home-arg__quote {
  border-left: 2px solid var(--accent); padding-left: 20px;
  font-family: var(--disp); font-size: clamp(1.1rem, 2vw, 1.32rem); color: var(--text); line-height: 1.4;
}
@media (max-width: 900px) { .home-arg__in { grid-template-columns: 1fr; gap: 28px; } }

/* ── steps ──────────────────────────────────────────────────────────────── */

.home-steps { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, auto); column-gap: 20px; row-gap: 8px; margin-top: 44px; }
.home-step { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; padding-top: 22px; border-top: 2px solid var(--line); }
.home-step[data-active="true"] { border-top-color: var(--accent); }
.home-step__n { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; color: var(--accent); }
.home-step h3 { margin-block: 8px 8px; font-size: 1.06rem; }
.home-step p { font-size: .92rem; }
@media (max-width: 900px) { .home-steps { grid-template-columns: 1fr 1fr; row-gap: 20px; } }
@media (max-width: 560px) { .home-steps { grid-template-columns: 1fr; } }

/* ── capabilities ───────────────────────────────────────────────────────── */

.home-caps { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); column-gap: 20px; row-gap: 10px; margin-top: 44px; }
.home-cap { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; }
.home-cap__ico {
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--accent-bd); background: var(--accent-soft);
  border-radius: var(--radius); color: var(--accent);
}
.home-cap__ico svg { width: 19px; height: 19px; }
.home-cap h3 { font-size: 1.04rem; }
.home-cap p { font-size: .93rem; }
@media (max-width: 900px) { .home-caps { grid-template-columns: 1fr 1fr; row-gap: 20px; } }
@media (max-width: 560px) { .home-caps { grid-template-columns: 1fr; } }

/* ── evidence ───────────────────────────────────────────────────────────── */

.home-ev__in { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.home-ev__states { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.home-ev__code {
  background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.home-ev__code header {
  padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: .77rem; color: var(--faint);
}
.home-ev__code pre { margin: 0; padding: 18px 16px; overflow-x: auto; font-size: .8rem; line-height: 1.7; color: var(--muted); }
.home-ev__code .k { color: var(--accent); }
.home-ev__code .s { color: var(--green); }
@media (max-width: 900px) { .home-ev__in { grid-template-columns: 1fr; gap: 32px; } }

/* ── pricing teaser ─────────────────────────────────────────────────────── */

.home-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.home-tier { position: relative; display: grid; grid-template-rows: auto auto 1fr; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.home-tier__list { align-content: start; }
.home-tier > .pill { position: absolute; top: -12px; left: 22px; background: var(--bg-raise); }
.home-tier[data-featured="true"] { border-color: var(--accent-bd); background: var(--bg-raise); box-shadow: var(--shadow-sm); }
.home-tier__name { font-family: var(--disp); font-weight: 600; font-size: 1.06rem; }
.home-tier__price { font-family: var(--disp); font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; }
.home-tier__price span { display: block; font-family: var(--sans); font-size: .82rem; font-weight: 400; color: var(--faint); letter-spacing: 0; }
.home-tier__list { list-style: none; display: grid; gap: 8px; font-size: .9rem; color: var(--muted); }
.home-tier__list li { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: start; }
.home-tier__list svg { width: 14px; height: 14px; margin-top: 5px; color: var(--green); }
@media (max-width: 980px) { .home-tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .home-tiers { grid-template-columns: 1fr; } }

/* ── faq ────────────────────────────────────────────────────────────────── */

.home-faq { margin-top: 40px; display: grid; gap: 12px; max-width: 860px; }
.home-faq details {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
}
.home-faq details[open] { border-color: var(--line-2); }
.home-faq summary {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; cursor: pointer; list-style: none;
  font-family: var(--disp); font-weight: 600; font-size: 1.02rem;
}
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 9px; height: 9px; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.home-faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.home-faq p { padding: 0 22px 20px; font-size: .95rem; }
.home-faq p + p { padding-top: 0; }

/* ── closing call ───────────────────────────────────────────────────────── */

.home-end { text-align: center; }
.home-end h2 { margin-bottom: 14px; }
.home-end .lede { margin-inline: auto; }
.home-end__acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.home-end__note { margin-top: 18px; font-size: .86rem; color: var(--faint); }

/* ── rhythm helpers ─────────────────────────────────────────────────────── */
/* Spacing belongs to the stylesheet, not to a style attribute on the element
   (HAVC don't-list). These name the relationship rather than the pixel. */

.section h2 + .lede,
.section h2 + p { margin-top: 15px; }

.home-note { margin-top: 26px; font-size: .92rem; }
.home-note--tight { margin-top: 20px; }

.home-shell { margin-top: 32px; }

.home-ctarow { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.home-ctarow__note { font-size: .88rem; color: var(--faint); max-width: 46ch; }

.home-faq-more { margin-top: 26px; }

/* ── compliance frameworks ──────────────────────────────────────────────── */
/* Named instruments with the count of requirements each mapping carries — the
   claim a buyer checks first, and the one that must not be vague. */

.home-fw-row { margin-top: clamp(40px, 5vw, 64px); }

/* ── shared rows across a card row ──────────────────────────────────────── */
/* Four cards side by side only look like a set when the same part of each one
   sits on the same line. Left to itself every card sizes its own rows, so the
   moment one title wraps to two lines — which it does in Turkish and did in
   English on the framework row — that card's body drops 19px below its
   neighbours' and the row reads as four boxes rather than one comparison.
   `grid-template-rows: subgrid` hands the row heights to the parent, so the
   pill line, the title line and the body line are shared. A browser without
   subgrid ignores the declaration and gets today's behaviour. */
.home-fw { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 8px; }
@media (max-width: 860px) { .home-fw { grid-template-columns: 1fr; } }
.home-fw__item {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start;
  padding: 18px 20px; border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius); background: var(--surface);
}
.home-fw__item h3 { font-size: 1rem; }
.home-fw__item p { font-size: .9rem; }
.home-fw__item .pill { justify-self: start; }

/* ── console ────────────────────────────────────────────────────────────── */

.home-con__in { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .home-con__in { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
}
.home-con__copy { display: grid; align-content: start; gap: 18px; }
.home-con__copy h2 { margin: 4px 0 0; }

.home-con__ui {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden;
}
.home-con__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: .78rem; color: var(--faint);
}
.home-con__body { display: grid; grid-template-columns: auto 1fr; }
.home-con__side {
  display: grid; align-content: start; gap: 2px;
  padding: 12px 10px; border-right: 1px solid var(--line); background: var(--surface);
}
.home-con__nav {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 6px 10px; border-radius: 7px; font-size: .78rem; color: var(--faint);
}
.home-con__nav::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-2); flex: none;
}
.home-con__nav[data-on="true"] { background: var(--bg-raise); color: var(--text); }
.home-con__nav[data-on="true"]::before { background: var(--accent); }

.home-con__main { display: grid; align-content: start; gap: 12px; padding: 16px; }
.home-con__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.home-con__tile {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
}
.home-con__tile b { display: block; font-family: var(--disp); font-size: 1.25rem; color: var(--text); }
.home-con__tile span { font-size: .7rem; line-height: 1.35; color: var(--faint); }
.home-con__sev { display: flex; flex-wrap: wrap; gap: 6px; }
.home-con__foot {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-top: 1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size: .78rem; color: var(--muted);
}

@media (max-width: 620px) {
  .home-con__body { grid-template-columns: 1fr; }
  .home-con__side {
    grid-template-columns: 1fr 1fr;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
}

.home-con__screens {
  display: grid; gap: 1px; margin-top: 44px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 620px) { .home-con__screens { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .home-con__screens { grid-template-columns: repeat(3, 1fr); } }
.home-con__screen { background: var(--bg-raise); padding: 18px 20px; }
.home-con__screen h3 { margin: 0 0 6px; font-size: .95rem; }
.home-con__screen p { margin: 0; font-size: .86rem; color: var(--muted); }