/* ==========================================================================
   ТРИУМФ — core
   Strict institutional dark. One theme, one accent, one radius scale.
   Palette is off-black throughout (never #000) so depth survives on OLED.
   ========================================================================== */

:root{
  /* Surfaces: four steps, cold-neutral, no warm drift anywhere on the site */
  --bg:            #0a0b0c;
  --bg-raised:     #101113;
  --bg-sunken:     #070809;
  --line:          rgba(255,255,255,0.09);
  --line-strong:   rgba(255,255,255,0.18);

  /* Type */
  --fg:            #f2f3f4;
  --fg-muted:      #a9adb2;
  --fg-dim:        #75797f;

  /* Single accent: deep restrained red. Used for state and one mark per
     screen, never as decoration. Kept under 60% saturation deliberately. */
  --accent:        #a32f36;
  --accent-hi:     #c3454c;
  --accent-wash:   rgba(163,47,54,0.14);

  /* Type scale — locked to viewport so headlines never overflow the hero */
  --t-display: clamp(2.6rem, 1.6rem + 4.2vw, 5.6rem);
  --t-h1:      clamp(2.1rem, 1.5rem + 2.6vw, 3.9rem);
  --t-h2:      clamp(1.55rem, 1.25rem + 1.4vw, 2.5rem);
  --t-h3:      clamp(1.12rem, 1rem + 0.5vw, 1.45rem);
  --t-lead:    clamp(1.02rem, 0.97rem + 0.28vw, 1.22rem);
  --t-body:    1rem;
  --t-sm:      0.875rem;
  --t-xs:      0.775rem;

  /* Space */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 36px;
  /* s5-s8 are the "large" rhythm tokens (hero/section padding, big gaps).
     Fluid so a desktop-tuned 128px section doesn't sit unchanged on a phone:
     each clamp reaches its desktop max at/under 1024px, so nothing at real
     desktop widths changes, but mobile and tablet ease down proportionally. */
  --s5: clamp(40px, 7vw, 56px);
  --s6: clamp(56px, 9vw, 88px);
  --s7: clamp(72px, 12.5vw, 128px);
  --s8: clamp(104px, 17vw, 176px);

  --gutter: clamp(20px, 5vw, 72px);
  --max: 1320px;

  /* One radius scale: sharp structure, pill interactive */
  --r: 3px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: .24s;
  --mid: .5s;

  /* Display face carried over from the previous version: Unbounded gives the
     wordmark and section titles their weight, Manrope keeps body text calm. */
  --font-display: "Unbounded", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.08; letter-spacing:-0.02em; }
h1,h2{ font-family:var(--font-display); }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; transition:color var(--fast) var(--ease); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--accent); color:#fff; }

:focus-visible{
  outline:2px solid var(--fg);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--fg); color:var(--bg); padding:12px 20px; border-radius:var(--r);
}
.skip:focus{ left:12px; top:12px; }

/* ---------- Layout primitives ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--s7); position:relative; }
.section--tight{ padding-block:var(--s6); }
.section--edge{ border-top:1px solid var(--line); }

.display{ font-family:var(--font-display); font-size:var(--t-display); font-weight:700; letter-spacing:-0.03em; line-height:1.0; }
.h1{ font-size:var(--t-h1); }
.h2{ font-size:var(--t-h2); }
.h3{ font-size:var(--t-h3); font-weight:600; letter-spacing:-0.01em; }
.h2{ letter-spacing:-0.025em; }
.lead{ font-size:var(--t-lead); color:var(--fg-muted); line-height:1.5; max-width:62ch; }
.body{ color:var(--fg-muted); max-width:66ch; }
.small{ font-size:var(--t-sm); color:var(--fg-muted); }

/* Reserved for a single eyebrow per page. Everything else that looks like a
   small label is a real heading and uses .mini instead. */
.label{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.mini{ font-size:1rem; font-weight:600; letter-spacing:-0.01em; color:var(--fg); }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding-inline:30px;
  border-radius:var(--r-pill);
  font-size:0.94rem; font-weight:600; letter-spacing:-0.01em;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease),
             color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--fg); color:#0a0b0c; }
.btn--solid:hover{ background:#fff; }
.btn--line{ border-color:var(--line-strong); color:var(--fg); }
.btn--line:hover{ border-color:var(--fg); background:rgba(255,255,255,0.04); }
.btn--sm{ height:42px; padding-inline:20px; font-size:0.85rem; }
.btn .arw{ transition:transform var(--fast) var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }

/* Touch tap targets: anything under ~44px gets a minimum hit area on devices
   that are actually touched rather than pointed at. Gated on (hover:none) and
   (pointer:coarse) rather than a width breakpoint, so a touch laptop or a
   resized desktop window is not affected, and a narrow-but-mouse-driven
   window keeps the tighter desktop sizing. */
@media (hover: none) and (pointer: coarse){
  .btn--sm{ height:44px; }
}

.tlink{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:0.94rem;
  padding-bottom:3px;
  border-bottom:1px solid var(--line-strong);
}
.tlink:hover{ border-bottom-color:var(--fg); }
.tlink .arw{ transition:transform var(--fast) var(--ease); }
.tlink:hover .arw{ transform:translateX(3px); }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:1; }
.js [data-reveal]{ opacity:0; transform:translateY(18px); }
.js [data-reveal].seen{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transform:none; }
}