:root {
  --bg: #1C1C20;
  --bg-2: #222228;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.15);
  --text: #F0F0F0;
  --text-secondary: rgba(240,240,240,.6);
  --muted: rgba(240,240,240,.4);
  --accent: #5A6B35;
  --accent-light: #7A8B45;
  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 80px);
  --font-display: "Saira Condensed", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* === RESET === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 80px }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-weight: 400;
  line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
ul { list-style: none }
::selection { background: var(--accent); color: #fff }

/* === HEADER === */
.header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  padding: 24px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(28,28,32,.6); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.logo {
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
  letter-spacing: .02em; display: flex; align-items: center; gap: 8px;
  z-index: 210;
}
.nav { display: flex; align-items: center; gap: 36px }
.nav a {
  font-size: .85rem; color: var(--text-secondary); letter-spacing: .04em;
  transition: color .3s;
}
.nav a:hover { color: var(--text) }
.nav-cta {
  color: var(--text) !important; border: 1px solid var(--line-strong);
  padding: 10px 24px; font-size: .82rem; letter-spacing: .06em;
  transition: border-color .3s, background .3s;
}
.nav-cta:hover { border-color: var(--accent); background: rgba(90,107,53,.15) }

/* lang switch */
.lang-link {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--muted); border: 1px solid var(--line); padding: 5px 10px;
  transition: color .3s, border-color .3s;
}
.lang-link:hover { color: var(--text); border-color: var(--accent) }

/* burger — CSS only */
.menu-toggle { display: none }
.burger { display: none; width: 28px; height: 16px; position: relative; z-index: 210; cursor: pointer }
.burger span {
  position: absolute; left: 0; width: 100%; height: 1.5px;
  background: var(--text); transition: .35s var(--ease);
}
.burger span:nth-child(1) { top: 0 }
.burger span:nth-child(2) { top: 7px }
.burger span:nth-child(3) { top: 14px }
.menu-toggle:checked ~ .burger span:nth-child(1) { top: 7px; transform: rotate(45deg) }
.menu-toggle:checked ~ .burger span:nth-child(2) { opacity: 0 }
.menu-toggle:checked ~ .burger span:nth-child(3) { top: 7px; transform: rotate(-45deg) }

@media (max-width: 880px) {
  .nav {
    display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #1C1C20;
    flex-direction: column; justify-content: center; align-items: center; gap: 32px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .4s, visibility .4s; z-index: 200;
    overflow-y: auto;
  }
  .nav a { font-size: 1.2rem; color: var(--text) }
  .menu-toggle:checked ~ .nav { opacity: 1; visibility: visible; pointer-events: auto }
  .burger { display: block }
  body:has(.menu-toggle:checked) { overflow: hidden }
}

/* === HERO === */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden }
.hero-bg { position: absolute; inset: 0; z-index: 0 }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40% }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(28,28,32,.92) 0%, rgba(28,28,32,.7) 40%, rgba(28,28,32,.3) 70%, rgba(28,28,32,.15) 100%),
    linear-gradient(0deg, rgba(28,28,32,.8) 0%, transparent 30%),
    linear-gradient(180deg, rgba(28,28,32,.6) 0%, transparent 20%);
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: 0 var(--pad);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100svh;
}
.hero-text { max-width: 680px; padding-top: 130px; display: flex; flex-direction: column; align-items: flex-start }
.hero-tagline {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px;
}
.hero-tagline::before { content: ""; width: 32px; height: 1px; background: var(--accent); opacity: .7 }
.hero-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.4rem, 8vw, 7rem); line-height: .92;
  letter-spacing: -.02em; text-transform: uppercase;
  position: relative; margin-bottom: 32px;
}
.hero-title .accent-block {
  position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: clamp(50px, 6vw, 70px); height: 110%;
  background: var(--accent); z-index: -1; opacity: .85;
}
.hero-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 36px; border: none; cursor: pointer;
  font-size: .88rem; letter-spacing: .08em; color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 24px rgba(90,107,53,.35);
  transition: background .3s, transform .3s, box-shadow .3s;
  margin-bottom: 32px;
}
.hero-btn:hover {
  background: var(--accent-light); transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(90,107,53,.45);
}
.hero-btn .arrow { transition: transform .3s var(--ease) }
.hero-btn:hover .arrow { transform: translateX(5px) }

.hero-cascade { display: flex; flex-direction: column; gap: 4px; width: 100%; margin-top: auto; padding-bottom: clamp(40px, 6vw, 80px) }
.hero-cascade-line {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.9rem, 1.6vw, 1.3rem); color: var(--text-secondary); line-height: 1.4;
}
.hero-cascade--left { text-align: left }
.hero-cascade--center { text-align: center }
.hero-cascade--center strong { color: var(--text); font-weight: 800 }
.hero-cascade--right { text-align: right }

.hero-labels {
  position: absolute; right: var(--pad); top: 0; bottom: 0;
  width: 200px; z-index: 3; pointer-events: none;
}
.hero-label {
  position: absolute; font-family: var(--font-mono); font-size: .68rem;
  color: rgba(240,240,240,.5); letter-spacing: .06em; white-space: nowrap;
  padding-left: 48px;
}
.hero-label::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 36px; height: 1px; background: rgba(255,255,255,.2);
}
.hero-label--1 { top: 32% }
.hero-label--2 { top: 52% }
.hero-label--3 { top: 72% }

.hero-dots {
  position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 5;
}
.hero-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted) }
.hero-dots span.active { background: var(--text) }

@media (max-width: 880px) {
  .hero { min-height: auto }
  .hero-inner { min-height: auto; padding-top: 100px; padding-bottom: 40px; text-align: left }
  .hero-text { text-align: left; align-items: flex-start; padding-top: 0 }
  .hero-overlay {
    background:
      linear-gradient(0deg, rgba(28,28,32,.92) 0%, rgba(28,28,32,.6) 50%, rgba(28,28,32,.4) 100%),
      linear-gradient(180deg, rgba(28,28,32,.7) 0%, transparent 30%);
  }
  .hero-title { font-size: clamp(2.4rem, 10vw, 3.6rem); margin-bottom: 24px }
  .hero-title .accent-block { width: clamp(36px, 8vw, 50px); left: -10px }
  .hero-tagline { margin-bottom: 14px }
  .hero-btn { margin-bottom: 24px; font-size: .82rem; padding: 14px 28px }
  .hero-cascade { gap: 2px }
  .hero-cascade-line { font-size: clamp(.82rem, 3.5vw, 1rem) }
  .hero-dots, .hero-labels { display: none }
}

/* === SECTIONS === */
.section { padding: clamp(40px, 5vw, 72px) var(--pad) }
.wrap { max-width: var(--maxw); margin: 0 auto }
.section-line { height: 1px; background: var(--line); max-width: var(--maxw); margin: 0 auto }
.sec-label {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px;
}
.sec-label::before { content: ""; width: 32px; height: 1px; background: var(--accent) }
.sec-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  line-height: .94; letter-spacing: -.01em;
  font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: clamp(16px, 2vw, 28px);
}
.sec-desc {
  font-size: clamp(.92rem, 1.1vw, 1.05rem); color: var(--text-secondary);
  max-width: 56ch; line-height: 1.7;
}

/* === SECTION WITH BG IMAGE === */
.section--bg { position: relative; overflow: hidden }
.section-bg { position: absolute; inset: 0; z-index: 0 }
.section-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center }
.section-bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(28,28,32,.82);
}
.section--bg-content { position: relative; z-index: 2 }

/* === ABOUT === */
.about-lead {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--text);
  margin-bottom: 16px; max-width: 28ch;
}
.about-body {
  font-size: clamp(.92rem, 1.1vw, 1.05rem); color: var(--text-secondary);
  max-width: 44ch; line-height: 1.7; margin-bottom: 20px;
}
.about-punch {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem); color: var(--text);
  border-left: 3px solid var(--accent); padding-left: 18px;
}

/* === PILLARS (details/summary) === */
.about-pillars {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  margin-top: clamp(40px, 6vw, 72px);
}
.pillar {
  background: var(--bg); padding: clamp(18px, 2vw, 26px);
  transition: background .4s; border-left: 2px solid transparent;
}
.pillar:hover { background: var(--bg-2); border-left-color: var(--accent) }
.pillar summary {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  cursor: default; list-style: none; margin-bottom: 10px;
}
.pillar summary::-webkit-details-marker { display: none }
.pillar-tag {
  display: inline-block; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: #fff; padding: 4px 10px; flex-shrink: 0;
}
.pillar-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.88rem, 1.2vw, 1.05rem); letter-spacing: -.01em;
}
.pillar p { color: var(--text-secondary); font-size: .82rem; line-height: 1.5 }

/* desktop: force all open */
@media (min-width: 881px) {
  .pillar { content-visibility: visible }
  .pillar > p { display: block !important }
}
.about-pillars--4 { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 1100px) { .about-pillars--4 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 880px) {
  .about-pillars--4 { display: flex; flex-direction: column }
  .about-pillars {
    display: flex; flex-direction: column; gap: 0;
    background: none; border: none;
  }
  .pillar {
    position: sticky; top: 70px;
    border: 1px solid var(--line);
    border-left: 2px solid transparent;
    background: var(--bg);
  }
  .pillar:nth-child(2) { top: 82px }
  .pillar:nth-child(3) { top: 94px }
  .pillar summary {
    flex-direction: row; align-items: center; gap: 12px;
    cursor: pointer; margin-bottom: 0;
  }
  .pillar[open] summary { margin-bottom: 10px }
}

/* === STACK LIST (details/summary for 03) === */
.stack-list { border-top: 1px solid var(--line) }
.stack-item {
  padding: clamp(22px, 3vw, 36px) 0; border-bottom: 1px solid var(--line);
}
.stack-item summary {
  display: grid; grid-template-columns: 80px 1fr; gap: clamp(16px, 3vw, 40px);
  align-items: center; cursor: pointer; list-style: none;
  transition: padding-left .4s var(--ease);
}
.stack-item summary::-webkit-details-marker { display: none }
.stack-item summary:hover { padding-left: 12px }
.stack-num { font-family: var(--font-mono); font-size: .9rem; color: var(--accent) }
.stack-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.2rem, 2.8vw, 1.9rem); line-height: 1; letter-spacing: -.01em;
}
.stack-item p {
  color: var(--text-secondary); max-width: 54ch;
  padding-left: calc(80px + clamp(16px, 3vw, 40px)); padding-top: 12px;
}
.stack-item p b { color: var(--text); font-weight: 600 }

/* desktop: force all open */
@media (min-width: 881px) {
  .stack-item > p { display: block !important }
}
@media (max-width: 880px) {
  .stack-item {
    position: sticky; background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .stack-item:nth-child(1) { top: 70px }
  .stack-item:nth-child(2) { top: 82px }
  .stack-item:nth-child(3) { top: 94px }
  .stack-item:nth-child(4) { top: 106px }
  .stack-item summary { grid-template-columns: 60px 1fr; gap: 12px }
  .stack-item p { padding-left: 72px }
}
@media (max-width: 620px) {
  .stack-item summary { grid-template-columns: 1fr; gap: 4px }
  .stack-item summary::after { grid-column: 1; justify-self: end; position: absolute; right: 0; top: 0 }
  .stack-item summary { position: relative }
  .stack-item p { padding-left: 0 }
}

/* === STATS === */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.stat {
  background: var(--bg); padding: clamp(18px, 2vw, 26px); text-align: center;
  transition: background .4s; border-left: 2px solid transparent;
}
.stat:hover { background: var(--bg-2); border-left-color: var(--accent) }
.stat-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: .9; margin-bottom: 8px;
}
.stat-num .unit { font-size: .35em; color: var(--accent); vertical-align: super; margin-left: 4px }
.stat-label { color: var(--text-secondary); font-size: .88rem }
.stats--4 { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 880px) { .stats--4 { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 740px) { .stats, .stats--4 { grid-template-columns: 1fr } }

/* === PROCESS === */
.seq-row {
  display: flex; align-items: stretch; gap: 0;
  margin-bottom: clamp(8px, 1vw, 14px);
}
.seq-row:last-child { margin-bottom: 0 }
.seq-card {
  flex: 1; border: 1px solid var(--line); padding: clamp(16px, 2vw, 22px);
  transition: border-color .3s, background .3s; border-left: 2px solid transparent;
}
.seq-card:hover { border-color: var(--accent); background: var(--bg-2); border-left-color: var(--accent) }
.seq-num { font-family: var(--font-mono); font-size: .68rem; color: var(--accent); letter-spacing: .1em; margin-bottom: 8px }
.seq-card h4 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(.82rem, 1.1vw, .95rem); margin-bottom: 6px; letter-spacing: -.01em;
}
.seq-card p { color: var(--text-secondary); font-size: .8rem; line-height: 1.5 }
.seq-arrow {
  display: flex; align-items: center; padding: 0 clamp(8px, 1.2vw, 16px);
  color: var(--accent); font-size: 1.1rem; flex-shrink: 0;
}
@media (max-width: 700px) {
  .seq-wrap {
    display: flex; gap: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
    padding: 0 var(--pad);
    scrollbar-width: none;
  }
  .seq-wrap::-webkit-scrollbar { display: none }
  .seq-row { display: contents }
  .seq-card {
    flex: none; width: 72%; min-width: 72%;
    scroll-snap-align: start;
  }
  .seq-arrow { display: none }
}

.qc-pillars { margin-top: clamp(24px, 3vw, 40px) }
.qc-note {
  font-family: var(--font-mono); font-size: .82rem; color: var(--text-secondary);
  margin-top: clamp(16px, 2vw, 24px); border-left: 2px solid var(--accent);
  padding-left: 16px;
}

/* === ZERO === */
.zero-block {
  border: 1px solid rgba(63,208,127,.25); background: rgba(63,208,127,.04);
  padding: clamp(24px, 3vw, 36px); margin-top: clamp(20px, 3vw, 32px);
}
.zero-num { font-family: var(--font-display); font-weight: 800; color: #3FD07F; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: .9 }
.zero-block p { color: var(--text-secondary); margin-top: 10px; max-width: 44ch; font-size: .9rem }

/* === OFFER === */
.offer-section { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start }
.offer-big {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3rem, 8vw, 5.5rem); line-height: .82; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.2px var(--accent);
}
.offer-sub { font-family: var(--font-mono); color: var(--text-secondary); font-size: .78rem; margin-top: 10px; letter-spacing: .03em }
.offer-list { border-top: 1px solid var(--line) }
.offer-item {
  padding: 10px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--ease);
}
.offer-item:hover { padding-left: 12px }
.offer-item summary {
  cursor: default; list-style: none;
}
.offer-item summary::-webkit-details-marker { display: none }
.offer-item summary b { font-weight: 700; font-size: .95rem }
.offer-item span { color: var(--text-secondary); font-size: .82rem; display: block; margin-top: 2px }

@media (max-width: 880px) {
  .offer-item {
    position: sticky; background: var(--bg-2);
    border-bottom: 1px solid var(--line); padding: 14px 0;
  }
  .offer-item:nth-child(1) { top: 70px }
  .offer-item:nth-child(2) { top: 84px }
  .offer-item:nth-child(3) { top: 98px }
  .offer-item:nth-child(4) { top: 112px }
  .offer-item:nth-child(5) { top: 126px }
  .offer-item summary { cursor: pointer }
}
.offer-quote {
  margin-top: clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--accent); padding: clamp(16px, 2vw, 24px) clamp(18px, 2vw, 28px);
  background: rgba(90,107,53,.08);
}
.offer-quote p {
  font-size: clamp(.92rem, 1.2vw, 1.1rem); line-height: 1.5;
  color: var(--text-secondary); margin-bottom: 8px;
}
.offer-quote p:last-child { margin-bottom: 0 }
.offer-quote strong { color: var(--text); font-weight: 700 }
@media (max-width: 880px) { .offer-grid { grid-template-columns: 1fr } }

/* === FAQ === */
.faq-list { max-width: 800px; margin-top: clamp(20px, 3vw, 36px) }
.faq-item { border-bottom: 1px solid var(--line) }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(14px, 2vw, 20px) 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.88rem, 1.2vw, 1.05rem); letter-spacing: -.01em;
  list-style: none; transition: color .3s;
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.2rem;
  color: var(--accent); flex-shrink: 0; margin-left: 16px;
}
.faq-item[open] summary::after { content: "\2212" }
.faq-item summary:hover { color: var(--accent) }
.faq-item p {
  color: var(--text-secondary); font-size: .88rem; line-height: 1.65;
  padding-bottom: clamp(14px, 2vw, 20px); max-width: 64ch;
}

/* === CTA === */
.cta {
  position: relative; overflow: hidden;
  padding: clamp(80px, 10vw, 140px) var(--pad);
  text-align: center;
}
.cta-bg { position: absolute; inset: 0; z-index: 0 }
.cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30% }
.cta-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(28,28,32,.82);
}
.cta-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto }
.cta h2 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: .9; letter-spacing: -.02em;
  font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: clamp(24px, 3vw, 40px);
}
.cta-q { color: var(--accent) }
.cta-links { display: flex; align-items: baseline; justify-content: center; gap: clamp(16px, 3vw, 32px); flex-wrap: wrap }
.cta-line {
  font-family: var(--font-mono); font-size: .82rem; color: var(--text-secondary);
  letter-spacing: .03em; border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: color .3s, border-color .3s;
}
.cta-line:hover { color: var(--accent-light); border-color: var(--accent) }

/* === MODAL === */
.modal-toggle { display: none }
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad);
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.modal-toggle:checked ~ .modal-overlay { opacity: 1; visibility: visible }
.modal-wrap {
  width: 100%; max-width: 520px;
  transform: translateY(20px); transition: transform .35s var(--ease);
}
.modal-toggle:checked ~ .modal-overlay .modal-wrap { transform: translateY(0) }
.modal-close {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: auto; margin-bottom: 10px;
  font-size: 1.4rem; color: var(--muted); cursor: pointer;
  border: 1px solid var(--line); background: var(--bg);
  transition: color .3s, border-color .3s;
}
.modal-close:hover { color: var(--text); border-color: var(--accent) }
.modal {
  background: var(--bg); border: 1px solid var(--line);
  width: 100%; padding: clamp(28px, 4vw, 44px);
}
.modal-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: .94; margin-bottom: 12px;
}
.modal-desc {
  color: var(--text-secondary); font-size: .88rem; line-height: 1.6;
  margin-bottom: clamp(20px, 3vw, 28px); max-width: 42ch;
}
.modal-form { display: flex; flex-direction: column; gap: 12px }
.modal-form input,
.modal-form textarea {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); padding: 12px 16px;
  font-family: var(--font-body); font-size: .9rem;
  transition: border-color .3s;
}
.modal-form input::placeholder,
.modal-form textarea::placeholder { color: var(--muted) }
.modal-form input:focus,
.modal-form textarea:focus { outline: none; border-color: var(--accent) }
.modal-form textarea { resize: vertical; min-height: 80px }
.modal-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 32px; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  letter-spacing: .04em; color: #fff; background: var(--accent);
  transition: background .3s, transform .3s;
}
.modal-submit:hover { background: var(--accent-light); transform: translateY(-2px) }

/* === FOOTER === */
.footer { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) var(--pad) 0 }
.footer-inner { max-width: var(--maxw); margin: 0 auto }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px); padding-bottom: clamp(32px, 5vw, 56px);
}
.footer-col--brand p {
  color: var(--text-secondary); font-size: .85rem; margin-top: 12px;
  max-width: 28ch; line-height: 1.6;
}
.footer-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  letter-spacing: .02em;
}
.footer-col h4 {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px;
}
.footer-col ul li { margin-bottom: 10px }
.footer-col ul li a {
  color: var(--text-secondary); font-size: .88rem;
  transition: color .3s;
}
.footer-col ul li a:hover { color: var(--text) }
.footer-col ul li { color: var(--text-secondary); font-size: .88rem }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid var(--line); padding: 20px 0;
  font-family: var(--font-mono); font-size: .7rem; color: var(--muted);
  letter-spacing: .04em;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr } }

/* === LEGAL PAGES === */
.legal h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem, 2vw, 1.4rem); margin-top: clamp(28px, 4vw, 40px);
  margin-bottom: 12px; letter-spacing: -.01em;
}
.legal p { color: var(--text-secondary); font-size: .92rem; line-height: 1.7; margin-bottom: 10px; max-width: 72ch }
.legal ul { margin-bottom: 12px; padding-left: 0 }
.legal li {
  color: var(--text-secondary); font-size: .92rem; line-height: 1.7;
  padding: 4px 0; padding-left: 18px; position: relative;
}
.legal li::before { content: "—"; position: absolute; left: 0; color: var(--accent) }
.legal a { color: var(--accent-light); border-bottom: 1px solid var(--line); transition: border-color .3s }
.legal a:hover { border-color: var(--accent) }
.footer-legal { display: flex; gap: 20px }
.footer-legal a {
  font-family: var(--font-mono); font-size: .7rem; color: var(--muted);
  letter-spacing: .04em; transition: color .3s;
}
.footer-legal a:hover { color: var(--text) }

/* === SOCIAL === */
.social { display: flex; gap: 10px; margin-top: 16px }
.social a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: var(--muted);
  border: 1px solid var(--line); transition: color .3s, border-color .3s;
}
.social a:hover { color: var(--text); border-color: var(--accent) }
.nav-social { display: none; gap: 14px }
.nav-social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: var(--text-secondary);
  border: 1px solid var(--line); transition: color .3s, border-color .3s;
}
.nav-social a:hover { color: var(--text); border-color: var(--accent) }
@media (max-width: 880px) {
  .nav-social { display: flex }
}

/* === SERVICE CARDS === */
.service-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.5vw, 16px);
}
.service-card {
  background: var(--bg); padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  transition: background .4s, border-color .3s; border-left: 2px solid transparent;
}
.service-card:hover { background: var(--bg-2); border-left-color: var(--accent) }
.service-num {
  font-family: var(--font-mono); font-size: .68rem; color: var(--accent);
  letter-spacing: .1em; margin-bottom: 14px;
}
.service-card h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem); margin-bottom: 8px; letter-spacing: -.01em;
}
.service-promise {
  font-size: .92rem; color: var(--text); font-weight: 600;
  margin-bottom: 16px; max-width: 36ch;
}
.service-list { margin-bottom: 16px }
.service-list li {
  color: var(--text-secondary); font-size: .82rem; line-height: 1.5;
  padding: 4px 0 4px 16px; position: relative;
}
.service-list li::before {
  content: "—"; position: absolute; left: 0; color: var(--accent);
  font-family: var(--font-mono);
}
.service-chip {
  display: inline-block; margin-top: auto;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 12px;
  background: var(--accent); color: #fff;
}
@media (max-width: 700px) { .service-grid { grid-template-columns: 1fr } }

/* === COSTPLUS BAND === */
.costplus-band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(28px, 4vw, 48px) var(--pad);
}
.costplus-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.costplus-tag {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--accent); white-space: nowrap;
}
.costplus-inner p { color: var(--text-secondary); font-size: .92rem; line-height: 1.7; max-width: 60ch }
@media (max-width: 700px) { .costplus-inner { grid-template-columns: 1fr } }

/* === BLOG === */
.blog-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.blog-filter {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 8px 18px;
  border: 1px solid var(--line); color: var(--text-secondary);
  transition: border-color .3s, color .3s, background .3s;
}
.blog-filter:hover { border-color: var(--accent); color: var(--text) }
.blog-filter.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

.blog-featured {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 4vw, 48px); align-items: center;
  border: 1px solid var(--line); margin-bottom: clamp(24px, 3vw, 40px);
  transition: border-color .3s;
}
.blog-featured:hover { border-color: var(--accent) }
.blog-featured-img { overflow: hidden; height: 100% }
.blog-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block }
.blog-featured-body { padding: clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px) 0 }
.blog-featured-body .blog-meta { margin-bottom: 14px }
.blog-featured-body h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: .96; margin-bottom: 14px;
  letter-spacing: -.01em;
}
.blog-featured-body p { color: var(--text-secondary); font-size: .92rem; line-height: 1.6; max-width: 48ch }

.blog-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.blog-card {
  border: 1px solid var(--line); transition: border-color .3s;
  display: flex; flex-direction: column;
}
.blog-card:hover { border-color: var(--accent) }
.blog-card-img { overflow: hidden; aspect-ratio: 16/10 }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block }
.blog-card-body { padding: clamp(16px, 2vw, 24px); flex: 1; display: flex; flex-direction: column }
.blog-card-body .blog-meta { margin-bottom: 12px }
.blog-card-body h3 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.1; margin-bottom: 10px;
  letter-spacing: -.01em;
}
.blog-card-body p {
  color: var(--text-secondary); font-size: .82rem; line-height: 1.5;
  margin-bottom: 14px; flex: 1;
}
.blog-meta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: .68rem; color: var(--muted);
  letter-spacing: .04em;
}
.blog-tag {
  display: inline-block; padding: 3px 8px;
  background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.blog-more {
  font-family: var(--font-mono); font-size: .78rem; color: var(--accent);
  letter-spacing: .04em; margin-top: auto;
  transition: color .3s;
}
.blog-card:hover .blog-more { color: var(--accent-light) }

@media (max-width: 880px) {
  .blog-featured { grid-template-columns: 1fr }
  .blog-featured-body { padding: clamp(16px, 3vw, 24px) }
  .blog-list { grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px) { .blog-list { grid-template-columns: 1fr } }

/* === CONTACTS === */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.5vw, 18px);
}
.contact-card {
  border: 1px solid var(--line); padding: clamp(18px, 2.5vw, 28px);
  transition: border-color .3s;
}
.contact-card:hover { border-color: var(--accent) }
.contact-card-label {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.contact-card-value { font-size: 1rem; font-weight: 500 }
a.contact-card-value { transition: color .3s }
a.contact-card-value:hover { color: var(--accent) }
.contact-messengers { display: flex; gap: 16px; flex-wrap: wrap }
.contact-messengers a {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-secondary); font-size: .88rem; transition: color .3s;
}
.contact-messengers a:hover { color: var(--accent) }
@media (max-width: 620px) { .contact-grid { grid-template-columns: 1fr } }

.contact-form-inline { max-width: 700px }
.contact-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 12px;
}
.contact-form-inline input,
.contact-form-inline textarea {
  background: var(--bg-2); border: 1px solid var(--line);
  color: var(--text); padding: 12px 16px; width: 100%;
  font-family: var(--font-body); font-size: .9rem;
  transition: border-color .3s;
}
.contact-form-inline input::placeholder,
.contact-form-inline textarea::placeholder { color: var(--muted) }
.contact-form-inline input:focus,
.contact-form-inline textarea:focus { outline: none; border-color: var(--accent) }
.contact-form-inline textarea { resize: vertical; min-height: 100px; margin-bottom: 16px }
@media (max-width: 520px) { .contact-form-grid { grid-template-columns: 1fr } }

/* === VACANCIES === */
.vacancy-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.5vw, 18px);
}
@media (max-width: 700px) { .vacancy-list { grid-template-columns: 1fr } }
.vacancy {
  border: 1px solid var(--line);
  transition: border-color .3s;
}
.vacancy[open] { border-color: var(--accent) }
.vacancy summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: clamp(18px, 2.5vw, 28px); cursor: pointer;
  list-style: none; gap: 16px;
}
.vacancy summary::-webkit-details-marker { display: none }
.vacancy-head { flex: 1 }
.vacancy-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.6vw, 1.3rem); letter-spacing: -.01em; margin-bottom: 4px;
}
.vacancy-subtitle { color: var(--text-secondary); font-size: .85rem }
.vacancy-meta-tags {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.vacancy-meta-tag {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .05em;
  color: var(--muted); border: 1px solid var(--line); padding: 3px 8px;
}
.vacancy-toggle {
  font-family: var(--font-mono); font-size: 1.2rem; color: var(--accent);
  flex-shrink: 0;
}
.vacancy[open] .vacancy-toggle { display: none }
.vacancy-body { padding: 0 clamp(18px, 2.5vw, 28px) clamp(18px, 2.5vw, 28px); border-top: 1px solid var(--line) }
.vacancy-body h4 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: .9rem; margin: 18px 0 10px; letter-spacing: -.01em;
}
.vacancy-body li {
  color: var(--text-secondary); font-size: .88rem; line-height: 1.6;
  padding: 3px 0 3px 16px; position: relative;
}
.vacancy-body li::before {
  content: "—"; position: absolute; left: 0; color: var(--accent);
  font-family: var(--font-mono);
}

.perks-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.5vw, 18px);
}
.perk {
  background: var(--bg); padding: clamp(16px, 2vw, 24px);
  color: var(--text-secondary); font-size: .88rem; line-height: 1.5;
  border: 1px solid var(--line);
  transition: background .4s, border-color .3s; border-left: 2px solid transparent;
}
.perk:hover { background: var(--bg-2); border-left-color: var(--accent) }
@media (max-width: 620px) { .perks-grid { grid-template-columns: 1fr } }

/* === ARTICLE === */
.article-header { max-width: 800px; margin: 0 auto; padding: 0 var(--pad) }
.article-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.article-meta .blog-tag { flex-shrink: 0 }
.article-date { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); letter-spacing: .04em }
.article-reading { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); letter-spacing: .04em }
.article-share {
  display: flex; gap: 8px; margin-left: auto;
}
.article-share a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; color: var(--muted);
  border: 1px solid var(--line); transition: color .3s, border-color .3s;
}
.article-share a:hover { color: var(--text); border-color: var(--accent) }

.article-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem); line-height: .96; letter-spacing: -.01em;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.article-author-block {
  max-width: 800px; margin: 0 auto; padding: clamp(24px, 3vw, 36px) var(--pad);
  border-top: 1px solid var(--line);
}
.article-author {
  display: flex; align-items: center; gap: 14px;
}
.article-author-avatar {
  width: 42px; height: 42px; background: var(--accent);
  color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.article-author-name { font-weight: 600; font-size: .92rem }
.article-author-role { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); letter-spacing: .04em; margin-top: 2px }

.article-hero {
  margin: clamp(24px, 4vw, 48px) auto;
  max-width: var(--maxw); position: relative;
  overflow: hidden; max-height: 520px;
}
.article-hero img { width: 100%; display: block; object-fit: cover; height: 100% }
.article-hero-caption {
  font-family: var(--font-mono); font-size: .7rem; color: var(--muted);
  letter-spacing: .03em; margin-top: 8px; margin-bottom: clamp(28px, 4vw, 48px);
  font-style: italic;
}
.article-hero { margin-bottom: 0 }
.article-body {
  max-width: 800px; margin: 0 auto; padding: 0 var(--pad);
}
.article-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.55;
  color: var(--text); font-weight: 500;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.article-body h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.2rem, 2.5vw, 1.8rem); line-height: 1;
  margin: clamp(32px, 4vw, 48px) 0 16px; letter-spacing: -.01em;
}
.article-body h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.1;
  margin: clamp(24px, 3vw, 36px) 0 12px;
}
.article-body p {
  color: var(--text-secondary); font-size: clamp(.92rem, 1.1vw, 1.05rem);
  line-height: 1.75; margin-bottom: 18px; max-width: 68ch;
}
.article-body p b, .article-body p strong { color: var(--text); font-weight: 600 }
.article-body blockquote {
  border-left: 3px solid var(--accent); padding: 16px 0 16px 24px;
  margin: clamp(24px, 3vw, 36px) 0;
}
.article-body blockquote p {
  font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--text);
  font-weight: 500; font-style: italic;
}
.article-body ul, .article-body ol {
  margin-bottom: 18px; padding-left: 0;
}
.article-body li {
  color: var(--text-secondary); font-size: .95rem; line-height: 1.7;
  padding: 4px 0 4px 18px; position: relative;
}
.article-body li::before {
  content: "—"; position: absolute; left: 0; color: var(--accent);
  font-family: var(--font-mono);
}
.article-tags {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: clamp(32px, 4vw, 48px) 0;
  max-width: 800px; margin-left: auto; margin-right: auto;
  padding: 0 var(--pad);
}
.article-tag {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; padding: 6px 14px;
  border: 1px solid var(--accent); color: var(--accent);
  transition: background .3s, color .3s;
}
.article-tag:hover { background: var(--accent); color: #fff }

.read-more { padding: clamp(40px, 5vw, 72px) var(--pad) }
.read-more-inner { max-width: var(--maxw); margin: 0 auto }
.read-more h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: clamp(20px, 3vw, 32px);
}

/* === COOKIE BANNER === */
.cookie-banner {
  position: fixed; bottom: 20px; right: 20px; z-index: 190;
  max-width: 380px; background: var(--bg-2); border: 1px solid var(--line);
  padding: 20px 24px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
.cookie-banner p { font-size: .85rem; color: var(--text-secondary); line-height: 1.5 }
.cookie-banner a { color: var(--accent-light); border-bottom: 1px solid var(--line) }
.cookie-actions { display: flex; gap: 10px; align-items: center }
.cookie-accept {
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  padding: 10px 24px; border: none; cursor: pointer;
  background: var(--accent); color: #fff; transition: background .3s;
}
.cookie-accept:hover { background: var(--accent-light) }
.cookie-more {
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  letter-spacing: .04em; transition: color .3s;
}
.cookie-more:hover { color: var(--text) }
.cookie-close { display: none }
.cookie-banner-x {
  position: absolute; top: 10px; right: 12px;
  font-size: 1.1rem; color: var(--muted); cursor: pointer; transition: color .3s;
}
.cookie-banner-x:hover { color: var(--text) }
.cookie-close:checked ~ .cookie-banner { display: none }
@media (max-width: 520px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; max-width: none }
}

/* === SCROLL REVEAL (CSS-only) === */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px) }
  to { opacity: 1; transform: translateY(0) }
}
@supports (animation-timeline: view()) {
  .sec-title, .sec-desc, .about-pillars,
  .stats, .stack-list, .seq-row, .zero-block,
  .offer-grid, .offer-quote, .faq-list {
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}

/* === PAGE HERO (inner pages) === */
.page-hero {
  padding: clamp(130px, 16vw, 200px) var(--pad) clamp(40px, 6vw, 80px);
  max-width: var(--maxw); margin: 0 auto;
}
/* breadcrumb */
.breadcrumb {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 20px;
}
.breadcrumb a { color: var(--text-secondary); transition: color .3s }
.breadcrumb a:hover { color: var(--text) }
.breadcrumb-sep { margin: 0 8px; color: var(--muted) }

.page-hero--bg {
  position: relative; overflow: hidden;
  max-width: none;
}
.page-hero-content {
  position: relative; z-index: 2;
  max-width: var(--maxw); margin: 0 auto;
}
.page-hero h1 {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: .9; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 7vw, 5rem); margin-bottom: clamp(12px, 2vw, 20px);
}
.page-hero p { font-size: clamp(.95rem, 1.4vw, 1.15rem); color: var(--text-secondary); max-width: 50ch }