/* Components. Reads only from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--surface-base);
  color: var(--ink-primary);
  font: var(--fs-body)/var(--lh-base) var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; }
p { margin: 0; }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }
.section { padding-block: var(--section-py); }
#services { padding-top: var(--space-6); }
.label {
  font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}
.label--case { text-transform: none; letter-spacing: 0.02em; font-size: calc(var(--fs-label) * 1.25); }
.section-head { margin-bottom: var(--space-8); }
.section-head h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); margin-top: var(--space-3); text-wrap: balance; }
.section-head p { color: var(--ink-soft); margin-top: var(--space-4); max-width: var(--measure); font-size: var(--fs-lead); }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-4); }

/* Header: translucent so the page seems to continue beneath it */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: oklch(97% 0.015 var(--hue) / 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.brand { font-family: var(--font-display); font-size: var(--fs-h4); text-decoration: none; }
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav a:not(.btn) {
  text-decoration: none; color: var(--ink-soft); font-size: var(--fs-small);
  min-height: var(--touch); display: inline-flex; align-items: center;
  transition: color var(--t-fast);
}
.nav a:not(.btn):hover { color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touch); padding: 0 var(--space-5);
  border-radius: var(--radius); border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent);
  font: 600 var(--fs-small)/1 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--accent-faint); }

/* Hero: left-aligned, asymmetric */
.hero { padding-block: var(--space-8) var(--space-6); }
.hero-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: var(--space-8); align-items: center; }
.hero h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.02em; margin-top: var(--space-4); }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: var(--measure); margin-top: var(--space-5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.portrait {
  aspect-ratio: 1; border-radius: var(--radius); /* square keeps the hero compact on one screen */
  background:
    linear-gradient(to top, var(--surface-base), transparent 35%), /* soft edge into page */
    var(--surface-elev);
  border: 1px solid var(--hairline);
  display: grid; place-items: center; color: var(--ink-quiet); font-size: var(--fs-small);
  text-align: center; overflow: hidden;
}
/* portrait.jpg is pre-cropped square around the subject, so no focal-point offset is needed */
.portrait img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }

/* Stats band on the dark surface */
.stats { background: var(--surface-ink); color: var(--ink-on-dark); padding-block: var(--space-8); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.stat { border-top: 1px solid var(--hairline-on-dark); padding-top: var(--space-4); }
.stat b { display: block; font: 400 var(--fs-stat)/var(--lh-tight) var(--font-display); color: var(--accent-bright); }
.stat span { display: block; margin-top: var(--space-2); font-size: var(--fs-small); color: var(--ink-on-dark-soft); }

/* Services: offset cards, not a uniform grid */
.services-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5); }
.card {
  background: var(--surface-raise); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); margin-top: var(--space-4); }
.card p { color: var(--ink-soft); margin-top: var(--space-3); }
.card:nth-child(1) { grid-column: span 3; }
.card:nth-child(2) { grid-column: span 3; margin-top: var(--space-7); }
.card:nth-child(n+3) { grid-column: span 3; }
.card:nth-child(n+3):nth-child(even) { margin-top: var(--space-5); }
.card p + p { margin-top: var(--space-3); }

/* Process: numbered steps */
.process { background: var(--surface-elev); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); counter-reset: step; }
.steps li { counter-increment: step; border-top: 1px solid var(--ink-faint); padding-top: var(--space-5); }
.steps li::before { content: counter(step, decimal-leading-zero); font: 400 var(--fs-h3)/1 var(--font-display); color: var(--accent); }
.steps h3 { font-size: var(--fs-h4); margin-top: var(--space-4); }
.steps p { color: var(--ink-soft); margin-top: var(--space-2); font-size: var(--fs-small); }

/* CTA band */
/* Raised panel with an accent edge so the band reads as a deliberate break, not a stray heading */

/* Experience: heading left, supporting copy right, so the long headline stops running across the page */
#experience .section-head { display: grid; grid-template-columns: 5fr 6fr; column-gap: var(--space-8); align-items: start; margin-bottom: 0; }
#experience .section-head h2 { grid-row: 1 / span 3; margin-top: 0; font-size: clamp(24px, 3vw, 34px); }
#experience .section-head p { margin-top: 0; font-size: var(--fs-body, 1rem); }
#experience .section-head p + p { margin-top: var(--space-4); }
@media (max-width: 768px) {
  #experience .section-head { grid-template-columns: 1fr; }
  #experience .section-head h2 { grid-row: auto; margin-bottom: var(--space-5); }
}

/* Pricing */
.price { display: grid; gap: var(--space-4); justify-items: start; }
.price b { font: 400 var(--fs-stat)/var(--lh-tight) var(--font-display); color: var(--accent); }
.price small { color: var(--ink-soft); font-size: var(--fs-small); }
#experience .section-head p + p { margin-top: var(--space-4); }

/* Cases */
.cases { display: grid; gap: var(--space-5); }
.case {
  display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--space-6); align-items: baseline;
  padding-block: var(--space-6); border-top: 1px solid var(--hairline);
}
.case:last-child { border-bottom: 1px solid var(--hairline); }
.case h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.case p { color: var(--ink-soft); }
.case .result { font: 400 var(--fs-h3)/1 var(--font-display); color: var(--accent); white-space: nowrap; }

/* Contact */
.contact { background: var(--surface-ink); color: var(--ink-on-dark); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.contact .label { color: var(--accent-bright); }
.contact h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); margin-top: var(--space-3); }
.contact p { color: var(--ink-on-dark-soft); margin-top: var(--space-4); max-width: var(--measure); }
.contact-links { list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.contact-links a { display: inline-flex; align-items: center; min-height: var(--touch); text-decoration: none; transition: color var(--t-fast); }
.contact-links a:hover { color: var(--accent-bright); }
.messengers { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.messenger { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; transition: transform var(--t-fast), opacity var(--t-fast); }
.messenger:hover { transform: translateY(-2px); opacity: .9; }
form { display: grid; gap: var(--space-4); }
label { font-size: var(--fs-small); color: var(--ink-on-dark-soft); display: grid; gap: var(--space-2); }
input, textarea {
  font: inherit; color: var(--ink-on-dark); background: oklch(97% 0.015 var(--hue) / 0.06);
  border: 1px solid var(--hairline-on-dark); border-radius: var(--radius-input);
  min-height: var(--touch); padding: var(--space-3) var(--space-4);
  transition: border-color var(--t-fast);
}
textarea { min-height: calc(var(--touch) * 2.5); resize: vertical; }
input:hover, textarea:hover { border-color: var(--ink-on-dark-soft); }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.contact .btn { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--surface-ink); justify-self: start; }
.contact .btn:hover { background: var(--ink-on-dark); border-color: var(--ink-on-dark); }

.site-footer { background: var(--surface-ink); color: var(--ink-on-dark-soft); font-size: var(--fs-small); padding-block: var(--space-6); border-top: 1px solid var(--hairline-on-dark); }

/* Reveal on scroll: opacity + transform only */
.reveal { opacity: 0; transform: translateY(var(--space-5)); transition: opacity var(--t-medium), transform var(--t-medium); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
/* --i is set per sibling by JS, so groups appear in sequence */
.reveal { transition-delay: calc(var(--i, 0) * var(--stagger)); }

/* Hero entrance on load: children fade up in order */
@keyframes rise { from { opacity: 0; transform: translateY(var(--space-5)); } to { opacity: 1; transform: none; } }
.hero-grid > div:first-child > *,
.portrait { animation: rise var(--t-hero) both; }
.hero-grid > div:first-child > :nth-child(1) { animation-delay: calc(1 * var(--stagger)); }
.hero-grid > div:first-child > :nth-child(2) { animation-delay: calc(2 * var(--stagger)); }
.hero-grid > div:first-child > :nth-child(3) { animation-delay: calc(4 * var(--stagger)); }
.hero-grid > div:first-child > :nth-child(4) { animation-delay: calc(6 * var(--stagger)); }
.portrait { animation-delay: calc(3 * var(--stagger)); }

/* Case result lands slightly after its row */
.case .result { opacity: 0; transform: translateX(calc(var(--space-4) * -1)); transition: opacity var(--t-medium), transform var(--t-medium); transition-delay: calc(var(--i, 0) * var(--stagger) + 3 * var(--stagger)); }
.case.is-in .result { opacity: 1; transform: none; }
.no-js .case .result { opacity: 1; transform: none; }

/* Header hairline fades in after scrolling (opacity only) */
.site-header { border-bottom-color: transparent; }
.site-header::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--hairline);
  opacity: 0; transition: opacity var(--t-fast);
}
.site-header.is-scrolled::after { opacity: 1; }

@media (max-width: 960px) {
  .hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 320px; aspect-ratio: 1; }
  .stats-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: 1fr; }
  .card:nth-child(n) { grid-column: auto; margin-top: 0; }
  .case { grid-template-columns: 1fr; gap: var(--space-3); }
}
@media (max-width: 768px) {
  .hero { padding-top: var(--space-6); }
  .nav a:not(.btn) { display: none; }
}
@media (max-width: 480px) {
  .stats-grid, .steps { grid-template-columns: 1fr; }
}

/* Language toggle */
.lang-toggle {
  min-height: var(--touch); min-width: var(--touch); padding: 0 var(--space-3);
  background: transparent; color: var(--ink-soft); cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  font: 600 var(--fs-small)/1 var(--font-ui); letter-spacing: 0.06em;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.lang-toggle:hover { color: var(--accent); border-color: var(--accent-soft); }

/* Russian copy is longer and Cyrillic glyphs are wider, so the hero headline needs a smaller scale */
:lang(ru) .hero h1 { font-size: clamp(28px, 3.8vw, 46px); letter-spacing: -0.01em; }

:lang(en) .hero h1 { font-size: clamp(30px, 4.4vw, 54px); }