/* ============================================================
   THE ANGIE PROJECT — Home 2
   Fluid layout: vw-based spacing, clamp() typography, no max-width
   ============================================================ */

:root {
  --bg:    rgb(237, 238, 240);
  --ink:   rgb(25, 36, 59);
  --blue:  rgb(0, 51, 254);
  --lime:  rgb(229, 255, 191);
  --white: #fff;

  --_layout---border-radius--4px: 4px;

  /* Side padding — scales with viewport, min 16px, max 120px */
  --side: clamp(4px, 2vw, 30px);

  /* Fluid type scale */
  --text-xs:  clamp(7px,  0.6vw, 9px);
  --text-sm:  clamp(11px, 0.9vw, 14px);
  --text-md:  clamp(15px, 1.1vw, 18px);
  --text-lg:  clamp(18px, 1.5vw, 22px);
  --text-xl:  clamp(28px, 3.5vw, 53px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Roboto', Arial, sans-serif;
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(25,36,59,0.20) 0.7px, transparent 0.7px);
  background-size: 14px 14px;
  color: var(--ink);
}

.page {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ============================================================
   SCROLL HINT
   ============================================================ */
.mouse_scroll {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
body.page-loaded .mouse_scroll {
  opacity: 1;
}
body.page-loaded .mouse_scroll.is-hidden {
  opacity: 0;
}
.mouse {
  height: 42px;
  width: 24px;
  border-radius: 14px;
  border: 2px solid var(--blue);
}
.wheel {
  height: 4px;
  width: 4px;
  border: 2px solid var(--blue);
  border-radius: 8px;
  display: block;
  margin: 5px auto;
  animation: mouse-wheel 0.6s linear infinite;
}
.m_scroll_arrows {
  display: block;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  margin: 0 0 3px 4px;
  animation: mouse-scroll 1s infinite;
}
.unu { margin-top: 1px; animation-delay: .1s; animation-direction: alternate; }
.doi { margin-top: -6px; animation-delay: .2s; animation-direction: alternate; }
.trei { margin-top: -6px; animation-delay: .3s; animation-direction: alternate; }

@keyframes mouse-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(6px); opacity: 0; }
}
@keyframes mouse-scroll {
  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}

/* ============================================================
   WORDMARK
   ============================================================ */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: 0.02em;
}
img.wordmark {
  height: clamp(15px, 1.32vw, 20px);
  width: auto;
  display: block;
  align-self: flex-start;
}
.wordmark .sphere {
  width: clamp(14px, 1.4vw, 20px);
  height: clamp(14px, 1.4vw, 20px);
  background: url('../images/logo-sphere.png') center / contain no-repeat;
  flex-shrink: 0;
}
.wordmark .dot {
  width: clamp(6px, 0.6vw, 9px);
  height: clamp(6px, 0.6vw, 9px);
  border-radius: 50%;
  background: var(--lime);
  margin: 0 2px 0 -4px;
  flex-shrink: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  text-decoration: none;
  height: 3.5em;
  padding: 0 1.5em;
  background: var(--lime);
  color: var(--ink);
  border-radius: 5px;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  box-shadow: 3px 3px 6px 0 rgba(0,0,0,0.25);
  white-space: nowrap;
  font-family: inherit;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue);
  clip-path: inset(
    calc(50% - clamp(10px, 0.9vw, 13px))
    1.5em
    calc(50% - clamp(10px, 0.9vw, 13px))
    calc(100% - 1.5em - clamp(20px, 1.8vw, 26px))
    round 2px
  );
  transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.btn-primary:hover::before {
  clip-path: inset(0 0 0 0 round 5px);
}
.btn-primary:hover { color: var(--white); }

.btn-primary .arrow-box {
  width: clamp(20px, 1.8vw, 26px);
  height: clamp(20px, 1.8vw, 26px);
  border-radius: 2px;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}
.btn-primary .arrow-box svg,
.btn-primary .arrow-box svg path,
.btn-primary .arrow-box svg line,
.btn-primary .arrow-box svg polyline {
  transition: stroke 0.4s ease, fill 0.4s ease;
}
.btn-primary:hover .arrow-box {
  transform: rotate(45deg);
  background: transparent;
}
.btn-primary:hover .arrow-box svg,
.btn-primary:hover .arrow-box svg path,
.btn-primary:hover .arrow-box svg line,
.btn-primary:hover .arrow-box svg polyline {
  stroke: var(--white);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  text-decoration: none;
  height: 3.5em;
  padding: 0 1.5em;
  background: transparent;
  color: var(--lime);
  border-radius: 5px;
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  border: 1px solid var(--lime);
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease;
}
.btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lime);
  clip-path: inset(
    calc(50% - clamp(10px, 0.9vw, 13px))
    1.5em
    calc(50% - clamp(10px, 0.9vw, 13px))
    calc(100% - 1.5em - clamp(20px, 1.8vw, 26px))
    round 2px
  );
  transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}
.btn-outline:hover::before {
  clip-path: inset(0 0 0 0 round 5px);
}
.btn-outline:hover { color: var(--blue); border-color: var(--lime); }

.btn-outline .arrow-box {
  width: clamp(20px, 1.8vw, 26px);
  height: clamp(20px, 1.8vw, 26px);
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
}
.btn-outline .arrow-box svg,
.btn-outline .arrow-box svg path,
.btn-outline .arrow-box svg line,
.btn-outline .arrow-box svg polyline {
  stroke: var(--blue);
  transition: stroke 0.4s ease, fill 0.4s ease;
}
.btn-outline:hover .arrow-box {
  transform: rotate(45deg);
  border-color: transparent;
}
.btn-outline:hover .arrow-box svg,
.btn-outline:hover .arrow-box svg path,
.btn-outline:hover .arrow-box svg line,
.btn-outline:hover .arrow-box svg polyline {
  stroke: var(--blue);
}


/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  width: 100%;
  padding: clamp(4px, 0.5vw, 8px) var(--side);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-card {
  width: 100%;
  height: clamp(45px, 4.5vw, 90px);
  border-radius: clamp(8px, 0.8vw, 12px);
  background: var(--ink);
  border: 1px solid rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 3vw, 40px);
  gap: clamp(12px, 2vw, 28px);
}
.brand-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand-logo svg {
  display: block;
  width: clamp(32px, 3.2vw, 47px);
  height: auto;
}

.primary-nav {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
  align-items: center;
  margin-left: auto;
}
.primary-nav a {
  font-size: var(--text-sm);
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.primary-nav a:hover { color: var(--lime); }

.header-card .header-btn { margin-left: clamp(20px, 3vw, 40px); flex-shrink: 0; }

.btn-primary.header-btn {
  column-gap: 1em;
  row-gap: 1em;
  border-top-left-radius: var(--_layout---border-radius--4px);
  border-top-right-radius: var(--_layout---border-radius--4px);
  border-bottom-left-radius: var(--_layout---border-radius--4px);
  border-bottom-right-radius: var(--_layout---border-radius--4px);
  cursor: pointer;
  /* flex-grow: 1; */
  justify-content: center;
  align-items: center;
  height: 3.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  line-height: 1;
  display: flex;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.35s ease;
}

.btn-primary.header-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue);
  clip-path: inset(
    calc(50% - clamp(10px, 0.9vw, 13px))
    1.5em
    calc(50% - clamp(10px, 0.9vw, 13px))
    calc(100% - 1.5em - clamp(20px, 1.8vw, 26px))
    round 2px
  );
  transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn-primary.header-btn:hover::before {
  clip-path: inset(0 0 0 0 round var(--_layout---border-radius--4px));
}

.btn-primary.header-btn:hover {
  color: var(--white);
}

.btn-primary.header-btn .arrow-box {
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
}

.btn-primary.header-btn .arrow-box svg,
.btn-primary.header-btn .arrow-box svg path,
.btn-primary.header-btn .arrow-box svg line,
.btn-primary.header-btn .arrow-box svg polyline {
  transition: stroke 0.4s ease, fill 0.4s ease;
}

.btn-primary.header-btn:hover .arrow-box {
  transform: rotate(45deg);
  background: transparent;
}

.btn-primary.header-btn:hover .arrow-box svg,
.btn-primary.header-btn:hover .arrow-box svg path,
.btn-primary.header-btn:hover .arrow-box svg line,
.btn-primary.header-btn:hover .arrow-box svg polyline {
  stroke: var(--white);
}

/* CTA кнопки в мобільному меню — приховані на десктопі */
.nav-cta-row { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero-section {
  width: 100%;
  padding: 0 var(--side);
  position: sticky;
  top: var(--header-h, 60px);
  z-index: 1;
}
.hero-card {
  width: 100%;
  border-radius: clamp(8px, 0.8vw, 12px);
  background: linear-gradient(180deg, rgb(9,30,58) 0%, rgb(47,128,237) 100%);
  border: 1px solid rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 5vw, 76px) clamp(22px, 3vw, 40px) clamp(36px, 5vw, 60px);
  min-height: clamp(340px, 40vw, 531px);
}
.hero-card .wordmark-hero { color: var(--bg); }
.hero-card .wordmark-hero .dot { background: var(--lime); }

.hero-card h1 {
  margin: clamp(16px, 2.5vw, 32px) 0 0;
  width: 55%;
  font-size: var(--text-xl);
  line-height: 1.05;
  font-weight: 400;
  color: var(--white);
}
.hero-card .sub {
  margin: clamp(16px, 2vw, 30px) 0 0;
  width: clamp(260px, 38vw, 452px);
  font-size: var(--text-md);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--white);
}
.hero-card .cta-row {
  margin: clamp(20px, 3vw, 40px) 0 0;
  display: flex;
  gap: clamp(12px, 2.5vw, 38px);
  flex-wrap: wrap;
}
.sphere-big {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(256px, 38vw, 542px);
  aspect-ratio: 1;
  pointer-events: none;
  overflow: hidden;
}
.sphere-big canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ============================================================
   STATS
   ============================================================ */
.stats-section {
  width: 100%;
  padding: clamp(32px, 5vw, 70px) var(--side) clamp(24px, 3vw, 40px);
  overflow: visible;
  position: relative;
  z-index: 2;
}
.stats-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.5vw, 20px);
  position: relative;
  overflow: visible;
}

/* SVG arch connectors */
.stat-arch {
  position: absolute;
  display: block;
  pointer-events: none;
  width: 25%;
  height: auto;
}
/* Top arch: centered over block 2 */
.stat-arch--top {
  top: 0;
  left: 12%;
  transform: translateY(-100%);
}
/* Bottom arch: centered over block 3, opens upward */
.stat-arch--bottom {
  top: 100%;
  left: 63%;
}
.stat {
  height: clamp(72px, 7vw, 93px);
  border-radius: clamp(6px, 0.7vw, 10px);
  background: var(--ink);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(25,36,59,0.65);
}
.stat .num {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 1.3vw, 18px);
  line-height: 1;
}
.stat .lbl {
  font-family: Arial, sans-serif;
  font-size: var(--text-xs);
  color: rgba(237,238,240,0.6);
  letter-spacing: 0.08em;
}

/* ============================================================
   SECTION TITLES
   ============================================================ */
.section-title {
  font-size: var(--text-xl);
  line-height: 1.05;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.section-intro {
  font-size: var(--text-md);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: clamp(14px, 1.5vw, 24px) 0 0;
}

/* ============================================================
   STEPS
   ============================================================ */
.steps-section {
  width: 100%;
  padding: clamp(48px, 6vw, 90px) var(--side) 0;
}
.steps-head .section-intro { text-align: right; }

.steps-list {
  width: 100%;
  margin-top: clamp(24px, 3vw, 48px);
}
.blue-band-scene {
  height: 220vh;
}
.step {
  width: 100%;
  padding: clamp(20px, 2.5vw, 30px) var(--side);
  display: grid;
  grid-template-columns: auto 2fr auto 3fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  border-top: 1px solid var(--ink);
}
.num-badge {
  width: clamp(38px, 3.5vw, 48px);
  height: clamp(38px, 3.5vw, 48px);
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--blue);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(22px, 2.5vw, 34px);
  letter-spacing: -0.05em;
  box-shadow: 3px 3px 6px 1px rgba(0,0,0,0.25);
  font-weight: 400;
}
.right-col-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}
.left-col p, .right-col p {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.left-col .foot {
  display: block;
  margin-top: clamp(24px, 4vw, 60px);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.arrow-btn {
  width: clamp(60px, 6vw, 89px);
  height: clamp(36px, 3vw, 42px);
  border-radius: 5px;
  background: var(--blue);
  box-shadow: 3px 3px 6px 1px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  
}

/* ─── Steps scroll animations ─── */
.steps-head {
  z-index: 20;
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(25,36,59,0.30) 1px, transparent 1px);
  background-size: 24px 24px;
  padding-bottom: clamp(12px, 1.5vw, 20px);
}

/* Card stacking */
.steps-list .step {
  position: sticky;
  top: var(--header-h, 60px);
  height: calc(100vh - var(--header-h, 60px) - 20px);
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(25,36,59,0.30) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: clamp(6px, 0.7vw, 10px);
  border: 1px solid var(--ink);
  padding-bottom: clamp(24px, 3vw, 48px);
  transform-origin: top center;
  will-change: transform, opacity;
  margin-bottom: 20vh;
}
.steps-list .step:last-child { margin-bottom: 0; }
.steps-section { padding-bottom: 0; }
.steps-list .step:nth-child(1) { z-index: 1; }
.steps-list .step:nth-child(2) { z-index: 2; }
.steps-list .step:nth-child(3) { z-index: 3; }

/* ============================================================
   BLUE BAND
   ============================================================ */
.blue-band {
  width: 100vw;
  min-height: 100vh;
  background: var(--blue);
  margin-top: 0;
  margin-left: calc(-1 * var(--side));
  position: sticky;
  top: 0;
  z-index: 30;
  will-change: clip-path;
}
.blue-band-inner {
  width: 100%;
  padding: clamp(40px, 6vw, 80px) var(--side);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.bb-title {
  font-size: var(--text-xl);
  line-height: 1.05;
  font-weight: 400;
  color: var(--white);
  margin: 0;
  white-space: pre-line;
}
.bb-copy {
  font-size: var(--text-md);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--white);
  margin: 0;
}
.bb-photo {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: clamp(4px, 0.5vw, 6px);
  margin-top: clamp(24px, 3vw, 40px);
  position: relative;
  overflow: hidden;
}

.bb-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.bb-photo[data-state="1"] .bb-photo-img:nth-child(1) { opacity: 1; }
.bb-photo[data-state="2"] .bb-photo-img:nth-child(2) { opacity: 1; }
.bb-photo[data-state="3"] .bb-photo-img:nth-child(3) { opacity: 1; }

.bb-features {
  display: flex;
  flex-direction: column;
  margin-top: clamp(32px, 4vw, 56px);
}
.bb-feature {
  padding-left: clamp(56px, 6vw, 84px);
  position: relative;
  padding-bottom: clamp(24px, 3vw, 40px);
}
.bb-feature:last-child { padding-bottom: 0; }
.bb-feature .icon {
  position: absolute;
  left: 0; top: 0;
  width: clamp(44px, 4.5vw, 64px);
  height: clamp(44px, 4.5vw, 64px);
  border-radius: 5px;
  background: var(--lime);
  box-shadow: 3px 3px 6px 1px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.bb-feature h3 {
  margin: 0 0 6px;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--white);
  letter-spacing: 0.02em;
}
.bb-feature p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--white);
}
.bb-connector {
  position: absolute;
  left: calc(clamp(44px, 4.5vw, 64px) / 2 - 1px);
  top: clamp(44px, 4.5vw, 64px);
  bottom: 0;
  width: 0;
  border-left: 2px dashed var(--lime);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.bb-feature {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.bb-feature.bb-active {
  opacity: 1;
  transform: translateY(0);
}
.bb-connector.bb-active {
  opacity: 1;
  transform: scaleY(1);
}
.bb-photo {
  transition: background 0.6s ease;
}

/* ============================================================
   SECTION 2 — media + tabs
   ============================================================ */
.media-reveal {
  opacity: 0;
  transform: scale(0.75);
  filter: blur(6px);
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}
.media-reveal.is-visible {
  opacity: 1;
  transform: scale(1);
  filter: none;
}
.media-reveal:nth-child(2) {
  transition-delay: 0.15s;
}

.media-section {
  width: 100%;
  padding: 0;
}
.media-scene {
  height: 350vh;
}
.media-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.media-inner {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--header-h, 60px) + clamp(24px, 3vw, 48px)) var(--side) clamp(16px, 2vw, 28px);
}
.media-inner .section-intro { text-align: right; }


.video-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 var(--side) 20px;
  clip-path: inset(95% 0% 0% 0% round 18px);
  will-change: clip-path;
  overflow: hidden;
  background: #000;
  z-index: 2;
}
:root { --plyr-color-main: #0033FE; }
.video-wrap .plyr { width: 100%; height: 100%; }
.video-wrap .plyr__video-wrapper { height: 100% !important; padding-bottom: 0 !important; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-wrap .tb6-play { z-index: 10; pointer-events: auto; }

.image-actions {
  position: absolute;
  top: clamp(10px, 1.5vw, 16px);
  right: clamp(10px, 1.5vw, 16px);
  display: flex;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
}
.image-actions .square-icon { pointer-events: auto; }
.square-icon {
  width: clamp(36px, 3vw, 44px);
  height: clamp(36px, 3vw, 44px);
  border-radius: 5px;
  background: var(--lime);
  box-shadow: 3px 3px 6px 1px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  flex-shrink: 0;
}

.tab-row {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: clamp(6px, 1vw, 12px);
  padding: clamp(8px, 1vw, 12px) clamp(10px, 1.5vw, 16px);
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}
.tab-row .tab { pointer-events: auto; }
.tab {
  flex: 1;
  height: clamp(52px, 5vw, 65px);
  border-radius: 5px;
  background: rgba(0,51,254,0.2);
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
  padding: clamp(6px, 0.8vw, 10px);
  cursor: pointer;
}
.tab.active { background: var(--blue); }
.tab .avatar {
  width: clamp(28px, 2.8vw, 37px);
  height: clamp(26px, 2.5vw, 34px);
  border-radius: 50%;
  background: url('../images/avatar.jpg') center / cover no-repeat;
  flex-shrink: 0;
}
.tab .t-text .t1 {
  font-size: clamp(10px, 0.85vw, 13px);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.tab .t-text .t2 {
  font-size: clamp(7px, 0.6vw, 9px);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-top: 2px;
}
.tab.active .t-text .t1,
.tab.active .t-text .t2 { color: rgba(255,255,255,0.9); }

/* ============================================================
   PARTNERS
   ============================================================ */
.partners-section {
  width: 100%;
  padding: clamp(48px, 6vw, 90px) var(--side) 0;
}
.partners-card {
  width: 100%;
  padding: clamp(24px, 3vw, 40px);
  border-top: 2px dashed var(--blue);
  border-bottom: none;
  border-left: 2px dashed var(--blue);
  border-right: none;
  border-radius: clamp(8px, 0.8vw, 12px) 0 0 clamp(8px, 0.8vw, 12px);
  position: relative;
}
.partners-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 99%;
  border-bottom: 2px dashed var(--blue);
}
.partners-card .section-title { margin-bottom: clamp(28px, 3.5vw, 48px); }
#border-anim-svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 45;
}

.logos-row {
  display: flex;
  gap: clamp(12px, 1.5vw, 20px);
  margin-bottom: clamp(12px, 1.5vw, 24px);
}
.logos-row:last-child { margin-bottom: 0; }
.plogo {
  flex: 1;
  height: clamp(40px, 4vw, 50px);
  border-radius: 4px;
  background: repeating-linear-gradient(
    135deg,
    #dfe2e6 0 10px,
    #e8eaee 10px 20px
  );
}

/* ============================================================
   ARTICLES
   ============================================================ */
.articles-section {
  width: 100%;
  padding: 0 var(--side) 0;
}
.articles-inner {
  border-bottom: 2px dashed var(--blue);
  border-right: 2px dashed var(--blue);
  border-left: none;
  border-top: none;
  border-radius: 0 clamp(8px, 0.8vw, 12px) clamp(8px, 0.8vw, 12px) 0;
  padding: clamp(24px, 3vw, 40px);
  position: relative;
}
.articles-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.articles-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 34px);
  margin-top: clamp(28px, 4vw, 56px);
}
.article-card {
  border-radius: clamp(6px, 0.8vw, 10px);
  border: 1px solid #000;
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.article-card:hover .arrow-small {
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.article-card .cover {
  width: 100%;
  aspect-ratio: 351 / 216;
  background: url('../images/article.jpg') center / cover no-repeat;
  flex-shrink: 0;
}
.card-body {
  padding: clamp(12px, 1.2vw, 20px) clamp(16px, 2vw, 29px) clamp(36px, 4vw, 50px);
  flex: 1;
  position: relative;
}
.card-body .tag {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-size: clamp(7px, 0.6vw, 8px);
  padding: 3px 12px;
  border-radius: 2px;
  box-shadow: 3px 3px 6px 1px rgba(0,0,0,0.25);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.card-body h4 {
  margin: 0 0 6px;
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.card-body p {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.arrow-small {
  position: absolute;
  right: clamp(10px, 1vw, 15px);
  bottom: clamp(10px, 1vw, 15px);
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  transition: transform 0.3s ease;
}

/* ============================================================
   STA / CTA
   ============================================================ */
.sta-scene {
  height: 260vh;
}
.sta-section {
  width: 100%;
  height: 100vh;
  background: var(--blue);
  margin-top: clamp(48px, 6vw, 80px);
  clip-path: inset(88% 8% 0% 8% round 18px);
  will-change: clip-path;
  position: sticky;
  top: 0;
}
.sta-inner {
  width: 100%;
  height: 100%;
  padding: clamp(48px, 7vw, 90px) var(--side);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sta-inner .wordmark { color: var(--bg); }
.sta-inner img.wordmark { align-self: center; margin: 0 auto; }
.sta-inner .wordmark .dot { background: var(--lime); }
.sta-inner h2 {
  font-size: var(--text-xl);
  line-height: 1.05;
  font-weight: 400;
  color: var(--white);
  margin: clamp(12px, 1.5vw, 20px) 0 0;
  white-space: pre-line;
  width: clamp(280px, 50vw, 700px);
}
.sta-inner .sub {
  font-size: var(--text-md);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--white);
  margin: clamp(16px, 2vw, 28px) 0 0;
  width: clamp(260px, 48vw, 680px);
}
.sta-inner .cta-row {
  display: flex;
  gap: clamp(12px, 2.5vw, 38px);
  margin-top: clamp(28px, 4vw, 56px);
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   SCROLL REVEAL — add .scroll-reveal to any text or heading
   ============================================================ */
.scroll-reveal {
  opacity: 0;
  transform: scale(0.75);
  filter: blur(6px);
  will-change: opacity, transform, filter;
  transform-origin: center center;
  transition: none !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  width: 100%;
  background: var(--ink);
}
.footer-inner {
  width: 100%;
  padding: clamp(40px, 6vw, 76px) var(--side) clamp(20px, 2vw, 28px);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
}
.footer-left .wordmark { color: var(--bg); }
.footer-left .wordmark .dot { background: var(--lime); }

.footer-links {
  display: flex;
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(28px, 3vw, 40px);
  flex-wrap: wrap;
}
.col-label {
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
}
.col-links {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.8vw, 11px);
}
.col-links a {
  color: var(--white);
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.col-links a:hover { color: var(--lime); }

.footer-right-copy {
  font-size: var(--text-md);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--white);
  margin: 0;
}
.footer-right-copy a { color: var(--lime); text-decoration: none; }

.footer-grant {
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.75);
  margin: clamp(20px, 2.5vw, 32px) 0 0;
  white-space: pre-line;
}

.footer-hr {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.85);
  margin: clamp(28px, 4vw, 48px) 0 clamp(16px, 2vw, 24px);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(255,255,255,0.85);
  font-size: clamp(10px, 0.9vw, 12px);
  letter-spacing: 0.02em;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom .links { display: flex; gap: clamp(16px, 2.5vw, 40px); flex-wrap: wrap; }
.footer-bottom a { color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-bottom a:hover { color: var(--lime); }

/* ============================================================
   NAV ACTIVE STATE
   ============================================================ */
.primary-nav a.active { color: var(--lime); }

/* ============================================================
   TECH BLOCK 1  —  gradient hero card with image + features
   ============================================================ */
.tb1-section {
  width: 100%;
  height: calc(100vh - var(--header-h, 60px));
  padding: 0 var(--side);
  box-sizing: border-box;
}

.tb1-card {
  width: 100%;
  height: 100%;
  border-radius: clamp(8px, 0.8vw, 12px);
  background: linear-gradient(180deg, rgb(9,30,58) 0%, rgb(47,128,237) 100%);
  border: 1px solid rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr clamp(220px, 28.3vw, 340px);
  column-gap: clamp(20px, 4.4vw, 56px);
  padding: clamp(20px, 3vw, 40px) clamp(22px, 3vw, 40px);
  align-items: start;
  box-sizing: border-box;
}

.tb1-left {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.tb1-tags {
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  flex-wrap: wrap;
  margin-bottom: clamp(12px, 1.5vw, 20px);
}

.tb1-tag {
  height: clamp(18px, 1.8vw, 22px);
  padding: 0 clamp(6px, 0.7vw, 10px);
  background: var(--lime);
  color: var(--ink);
  border-radius: 2px;
  font-size: clamp(7px, 0.6vw, 9px);
  letter-spacing: 0.08em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.tb1-title {
  font-size: var(--text-xl);
  line-height: 1.05;
  font-weight: 400;
  color: var(--white);
  margin: 0;
  letter-spacing: 0.01em;
}

.tb1-body {
  font-size: var(--text-md);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--white);
  margin: clamp(20px, 3vw, 36px) 0 0;
}

.tb1-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 24px);
  margin-top: clamp(20px, 3vw, 36px);
}

.tb1-num {
  font-size: clamp(54px, 7.5vw, 90px);
  line-height: 1;
  font-weight: 400;
  color: var(--lime);
  margin-bottom: clamp(6px, 1vw, 14px);
  letter-spacing: -0.02em;
}

.tb1-feat-p {
  font-size: var(--text-sm);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--white);
  margin: 0;
}

.tb1-right {
  position: relative;
  z-index: 1;
  align-self: stretch;
}

.tb1-img {
  width: 100%;
  aspect-ratio: 339 / 349;
  border-radius: clamp(4px, 0.5vw, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.25);
  font-family: ui-monospace, monospace;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}
.tb1-img::after { content: ''; }

/* ---- tb1 mobile ---- */
@media (max-width: 640px) {
  .tb1-card {
    grid-template-columns: 1fr;
    padding-right: clamp(22px, 3.3vw, 40px);
  }
  .tb1-right { align-self: auto; }
  .tb1-img { aspect-ratio: 16/9; }
  .tb1-features { grid-template-columns: 1fr; }
}

/* ============================================================
   TECH BLOCK 2  —  comparison table
   ============================================================ */
:root {
  --orange:      #E8593C;
  --orange-dark: #CE5F48;
}

.tb2-section {
  width: 100%;
  padding: clamp(32px, 4vw, 56px) var(--side) clamp(48px, 6vw, 80px);
}

.tb2-section .section-title { color: var(--ink); }

.tb2-table {
  width: 100%;
  border-top: 1px solid var(--ink);
  margin-top: clamp(24px, 3vw, 40px);
}

/* Each row: 3 columns in SVG ratio 36.5 : 32.7 : 30.7 */
.tb2-row {
  display: grid;
  grid-template-columns: 36.5fr 32.7fr 30.7fr;
  border-bottom: 1px solid var(--ink);
}

.tb2-c2 {
  border-left:  1px solid var(--ink);
  border-right: 1px solid var(--ink);
}

/* ---- Header row ---- */
.tb2-head-row .tb2-c1,
.tb2-head-row .tb2-c2,
.tb2-head-row .tb2-c3 {
  padding: clamp(20px, 4.6vw, 46px) clamp(14px, 2.7vw, 30px);
  min-height: clamp(100px, 14.6vw, 168px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tb2-col-title {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin: 0 0 clamp(6px, 0.8vw, 10px);
}
.tb2-col-title-orange { color: var(--orange-dark); }

.tb2-head-copy {
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

.tb2-col-dot {
  width: clamp(5px, 0.53vw, 7px);
  height: clamp(5px, 0.53vw, 7px);
  border-radius: 50%;
  background: var(--blue);
  display: inline-block;
  margin-left: clamp(4px, 0.5vw, 8px);
  vertical-align: middle;
  flex-shrink: 0;
}

/* ---- Data rows ---- */
.tb2-data-row .tb2-c1 {
  padding: clamp(10px, 1.8vw, 22px) clamp(14px, 2.7vw, 30px);
  font-size: var(--text-md);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  min-height: clamp(50px, 6.1vw, 70px);
}
.tb2-data-row .tb2-c2,
.tb2-data-row .tb2-c3 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(14px, 4.1vw, 46px);
  min-height: clamp(50px, 6.1vw, 70px);
}

/* ---- Icons ---- */
.tb2-icon-check,
.tb2-icon-cross {
  width:  clamp(22px, 2.9vw, 32px);
  height: clamp(22px, 2.9vw, 32px);
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb2-icon-check { background: var(--blue); }
.tb2-icon-cross { background: var(--orange); position: relative; }

.tb2-icon-cross-inner {
  position: absolute;
  inset: clamp(4px, 0.58vw, 6.5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- tb2 mobile ---- */
@media (max-width: 640px) {
  /* Header: two equal column headers side by side, description hidden */
  .tb2-head-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .tb2-head-row .tb2-c1 { display: none; }
  .tb2-head-row .tb2-c2,
  .tb2-head-row .tb2-c3 {
    min-height: unset;
    padding: 14px 12px 16px;
  }
  .tb2-col-title { font-size: var(--text-sm); }

  /* Data rows: feature label spans full width on top, icons side by side below */
  .tb2-data-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .tb2-data-row .tb2-c1 {
    grid-column: 1 / -1;
    padding: 12px 14px;
    min-height: unset;
    font-size: var(--text-sm);
    border-bottom: 1px solid rgba(25, 36, 59, 0.12);
  }
  .tb2-data-row .tb2-c2,
  .tb2-data-row .tb2-c3 { min-height: 52px; padding: 0; }

  /* c2: remove left border, keep right divider between the two icon columns */
  .tb2-c2 {
    border-left: none;
    border-right: 1px solid var(--ink);
    border-top: none;
  }
}

/* ============================================================
   BLOCK 3 — Two-card section
   ============================================================ */
.tb3-section {
  padding: clamp(32px, 5vw, 72px) var(--side);
}

.tb3-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}

/* ---- Left card wrapper (tabs + card) ---- */
.tb3-left {
  display: flex;
  flex-direction: column;
}

.tb3-tabs {
  display: flex;
  gap: 0;
  padding-left: clamp(12px, 2vw, 24px);
}

.tb3-tab {
  background: var(--blue);
  color: var(--bg);
  font-family: 'Roboto', Arial, sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: clamp(4px, 0.6vw, 8px) clamp(14px, 2vw, 26px);
  border: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  margin-right: clamp(6px, 1vw, 14px);
  white-space: nowrap;
}

/* ---- Shared card base ---- */
.tb3-card {
  border-radius: 0 clamp(6px, 0.8vw, 12px) clamp(6px, 0.8vw, 12px) clamp(6px, 0.8vw, 12px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: clamp(28px, 4vw, 56px) clamp(22px, 3.5vw, 48px) clamp(32px, 4.5vw, 52px);
  min-height: clamp(300px, 38vw, 531px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.tb3-card-left {
  background-color: var(--bg);
  background-image: url('../images/video.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.tb3-card-right {
  background: transparent;
  border-radius: clamp(6px, 0.8vw, 12px);
}

/* ---- Badges ---- */
.tb3-badges {
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  margin-bottom: clamp(18px, 2.5vw, 32px);
  margin-top: auto;
}

.tb3-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.tb3-bottom {
  flex-shrink: 0;
  padding-top: clamp(14px, 2vw, 28px);
}

/* ---- Heading ---- */
.tb3-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(14px, 2vw, 28px);
}

/* ---- Body ---- */
.tb3-body {
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0;
}

/* ---- Partner logos row ---- */
.tb3-logos {
  display: flex;
  gap: clamp(8px, 1.5vw, 18px);
  margin-top: clamp(24px, 3.5vw, 48px);
}

.tb3-logo {
  flex: 0 0 clamp(64px, 8.5vw, 97px);
  height: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.tb3-logo::before,
.tb3-logo::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 1px;
  background: rgba(25, 36, 59, 0.25);
}

.tb3-logo::before { transform: translate(-50%, -50%) rotate(30deg); }
.tb3-logo::after  { transform: translate(-50%, -50%) rotate(-30deg); }

/* ---- Right card CTA row ---- */
.tb3-cta {
  display: flex;
  gap: clamp(10px, 1.5vw, 20px);
  flex-wrap: wrap;
  margin-top: clamp(24px, 3.5vw, 48px);
}

/* ---- tb3 mobile ---- */
@media (max-width: 768px) {
  .tb3-grid { grid-template-columns: 1fr; }
  .tb3-tabs { padding-left: 0; }
}

/* ============================================================
   BLOCK 3-STEPS — Horizontal stacking step cards
   ============================================================ */
.steps-section {
  position: relative;
  height: 500vh;
}

.steps-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.steps-inner {
  height: 100%;
  padding: var(--header-h, 60px) var(--side) clamp(24px, 3vh, 40px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ---- Tab bar (separate layer above cards) ---- */
.steps-tab-bar {
  position: relative;
  flex-shrink: 0;
  height: clamp(28px, 3.5vh, 40px);
  z-index: 10;
}

.steps-tab-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  background: var(--blue);
  color: var(--bg);
  font-family: 'Roboto', Arial, sans-serif;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0 clamp(14px, 2vw, 26px);
  border: none;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  white-space: nowrap;
  will-change: transform;
}

/* ---- Cards track ---- */
.steps-track {
  flex: 1;
  position: relative;
  min-height: 0;
}

.step-card {
  position: absolute;
  inset: 0;
  width: calc(50% - 12px);
  will-change: transform;
  display: flex;
  flex-direction: column;
}

.step-card .tb3-card-left {
  flex: 1;
  min-height: 0;
  border-top-left-radius: clamp(6px, 0.8vw, 12px);
}
.tb3-card--blue {
  background: var(--blue);
  border-color: var(--blue);
}
.tb3-card--blue .tb3-title,
.tb3-card--blue .tb3-body {
  color: var(--white);
}
.step-card--cta .tb3-card-left {
  border-top-left-radius: clamp(6px, 0.8vw, 12px);
}

.steps-track .step-card:first-child .tb3-card-left {
  border-top-left-radius: 0;
}

@media (max-width: 768px) {
  .steps-section { height: 600vh; }
  .step-card { width: 80vw; }
}

/* ============================================================
   BLOCK 4 — Text left, 2×2 image grid right
   ============================================================ */
.tb4-section {
  padding: clamp(32px, 5vw, 72px) var(--side);
}

.tb4-inner {
  border: 2px solid var(--blue);
  border-radius: clamp(6px, 0.8vw, 12px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 48px);
  padding: clamp(36px, 5.5vw, 76px) clamp(28px, 4vw, 56px);
  align-items: center;
}

.tb4-left {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 40px);
}

.tb4-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

.tb4-body {
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0;
}

/* ---- 2×2 grid ---- */
.tb4-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2.5vw, 32px);
}

.tb4-img-card {
  border-radius: clamp(6px, 0.7vw, 10px);
  border: 1px solid rgba(25, 36, 59, 0.1);
  aspect-ratio: 259 / 213;
  position: relative;
  overflow: hidden;
  box-shadow: 3px 3px 6px rgba(25, 36, 59, 0.3);
}

/* Blue featured card */
.tb4-img-card--blue {
  background: var(--blue);
  aspect-ratio: 259 / 220;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2vw, 28px);
}

/* Photo placeholder cards */
.tb4-img-card--photo {
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(25,36,59,0.30) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* Arrow icon on photo cards */
.tb4-card-arrow {
  position: absolute;
  top: clamp(8px, 1.2vw, 16px);
  left: clamp(8px, 1.2vw, 16px);
}

/* Blue card internals */
.tb4-lime-icon {
  width: clamp(14px, 1.5vw, 20px);
  height: clamp(14px, 1.5vw, 20px);
  background: var(--lime);
  border-radius: 2px;
  flex-shrink: 0;
}

.tb4-card-title {
  color: white;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: auto 0 0;
}

.tb4-card-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-sm);
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin: clamp(8px, 1.2vw, 16px) 0 0;
}

/* ---- tb4 mobile ---- */
@media (max-width: 640px) {
  .tb4-inner { grid-template-columns: 1fr; }
  .tb4-grid  { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   BLOCK 5 — Large photo left, text + bullet list right
   ============================================================ */
.tb5-section {
  padding: clamp(32px, 5vw, 72px) var(--side);
}

.tb5-inner {
  display: grid;
  grid-template-columns: clamp(220px, 42vw, 505px) 1fr;
  gap: clamp(28px, 6vw, 74px);
  align-items: center;
}

/* Photo placeholder */
.tb5-img {
  aspect-ratio: 505 / 561;
  border-radius: clamp(6px, 0.8vw, 10px);
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(25,36,59,0.30) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* Right panel */
.tb5-right {
  display: flex;
  flex-direction: column;
}

.tb5-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 clamp(8px, 0.8vw, 12px);
  background: var(--lime);
  border-radius: 2px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink);
  align-self: flex-start;
  margin-bottom: clamp(18px, 3vw, 42px);
}

.tb5-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(16px, 2.5vw, 36px);
}

.tb5-body {
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin: 0 0 clamp(24px, 3.5vw, 56px);
}

/* Bullet list */
.tb5-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 3.5vw, 42px);
}

.tb5-item {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 16px);
}

.tb5-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  margin-top: 0.35em;
}

.tb5-item-text {
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

/* ---- tb5 mobile ---- */
@media (max-width: 768px) {
  .tb5-inner { grid-template-columns: 1fr; }
  .tb5-img { aspect-ratio: 16 / 9; }
}

/* ============================================================
   BLOCK 6 — Full-width blue section with video card
   ============================================================ */
.tb6-section {
  background: var(--blue);
  padding: calc(var(--header-h, 60px) + clamp(28px, 5vw, 72px)) var(--side) clamp(28px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(14px, 2.2vw, 32px);
  overflow: hidden;
}

/* Partner logo bar */
.tb6-logos {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  flex-wrap: wrap;
  justify-content: center;
}

.tb6-logo {
  width: clamp(36px, 5vw, 68px);
  height: clamp(10px, 1.2vw, 16px);
  background: rgba(237, 238, 240, 0.35);
  border-radius: 2px;
}

.tb6-logo-sep {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
}

/* Heading + subtitle */
.tb6-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: white;
  text-align: center;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

.tb6-sub {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}
.tb6-cta.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.5vw, 56px);
}

/* Video card */
.tb6-video-wrap {
  width: 100%;
  aspect-ratio: 1204 / 526;
  background: var(--ink);
  border-radius: clamp(6px, 0.8vw, 12px);
  position: relative;
  overflow: hidden;
}

.tb6-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play button overlay */
.tb6-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tb6-play-btn {
  width: clamp(56px, 6.5vw, 94px);
  height: clamp(56px, 6.5vw, 94px);
  border-radius: 50%;
  background: rgba(115, 115, 117, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.tb6-play-btn:hover {
  background: rgba(115, 115, 117, 1);
}

.tb6-play-btn svg {
  width: 40%;
  height: 40%;
  margin-left: 8%;
}

/* ---- tb6 mobile ---- */
@media (max-width: 640px) {
  .tb6-video-wrap { aspect-ratio: 16 / 9; }
}

/* ============================================================
   BLOCK 7 — Badge + heading + body, then 3-card row below
   ============================================================ */
.tb7-section {
  padding: clamp(32px, 5vw, 72px) var(--side);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 56px);
}

.tb7-top {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 28px);
  align-items: flex-start;
}

.tb7-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}

.tb7-body {
  font-size: var(--text-md);
  color: var(--ink);
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin: 0;
  max-width: 76ch;
}

/* 3-card row */
.tb7-cards {
  display: grid;
  grid-template-columns: 341fr 383fr 343fr;
  gap: clamp(10px, 2vw, 26px);
  align-items: stretch;
}

.tb7-card {
  border-radius: clamp(6px, 0.8vw, 10px);
  border: 1px solid rgba(25, 36, 59, 0.1);
  min-height: clamp(130px, 18vw, 213px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2vw, 26px);
  box-shadow: 3px 3px 6px rgba(25, 36, 59, 0.2);
}

.tb7-card--blue {
  background: var(--blue);
}

.tb7-card--photo {
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(25,36,59,0.30) 1px, transparent 1px);
  background-size: 14px 14px;
}

.tb7-card-lime {
  width: clamp(14px, 1.5vw, 20px);
  height: clamp(14px, 1.5vw, 20px);
  background: var(--lime);
  border-radius: 2px;
  flex-shrink: 0;
}

.tb7-card-arrow {
  position: absolute;
  top: clamp(8px, 1.2vw, 16px);
  left: clamp(8px, 1.2vw, 16px);
}

.tb7-card-text { margin-top: auto; }

.tb7-card-title {
  color: white;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(3px, 0.4vw, 6px);
}

.tb7-card-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--text-sm);
  line-height: 1.4;
  margin: 0;
}

.tb7-photo-title {
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  margin: 0 0 clamp(3px, 0.4vw, 6px);
}

.tb7-photo-sub {
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: 1.4;
  opacity: 0.6;
  margin: 0;
}

/* ---- tb7 mobile ---- */
@media (max-width: 768px) {
  .tb7-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .tb7-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE  ≤ 640px — only layout breaks, not sizes (clamp handles those)
   ============================================================ */
@media (max-width: 640px) {

  /* HEADER */
  .primary-nav { display: none; }
  .primary-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: clamp(76px, 11vw, 96px);
    left: var(--side);
    right: var(--side);
    background: var(--ink);
    border-radius: 10px;
    padding: 20px;
    gap: 16px;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  }
  .header-card .header-btn { display: none; }
  .nav-toggle { display: flex; }

  /* ---- MOBILE MENU ANIMATION ---- */

  /* Контейнер: розкривається зверху вниз через clip-path */
  .primary-nav.open {
    animation: menu-drop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes menu-drop {
    from { clip-path: inset(0% 0% 100% 0% round 10px); }
    to   { clip-path: inset(0% 0% 0% 0% round 10px); }
  }

  /* Кожен пункт: opacity + translateY + blur з затримкою */
  .primary-nav.open > * {
    animation: menu-item-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .primary-nav.open > *:nth-child(1) { animation-delay: 0.07s; }
  .primary-nav.open > *:nth-child(2) { animation-delay: 0.12s; }
  .primary-nav.open > *:nth-child(3) { animation-delay: 0.17s; }
  .primary-nav.open > *:nth-child(4) { animation-delay: 0.22s; }
  .primary-nav.open > *:nth-child(5) { animation-delay: 0.27s; }
  .primary-nav.open > *:nth-child(6) { animation-delay: 0.34s; }
  @keyframes menu-item-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
      filter: blur(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: none;
    }
  }

  /* CTA кнопки у відкритому мобільному меню */
  .primary-nav.open .nav-cta-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 4px;
  }
  .primary-nav.open .nav-cta-row .btn-primary,
  .primary-nav.open .nav-cta-row .btn-outline {
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .primary-nav.open .nav-cta-row .btn-primary {
    color: var(--ink);
  }

  /* HERO */
  .hero-card h1 { width: 100%; }
  .hero-card .sub { width: 100%; }
  .sphere-big {
    position: static;
    width: clamp(160px, 55vw, 240px);
    aspect-ratio: 1;
    margin: 20px auto 0;
    transform: none;
  }

  /* STATS */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* STEPS */
  .step {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .step .arrow-btn { display: none; }
  .step .right-col { grid-column: 1 / -1; }

  /* BLUE BAND */
  .blue-band-inner { grid-template-columns: 1fr; }
  .bb-title { white-space: normal; }
  .bb-connector { display: none; }

  /* TABS */
  .tab-row { flex-direction: column; }
  .tab { flex: none; width: 100%; height: clamp(52px, 13vw, 65px); }

  /* PARTNERS */
  .logos-row { flex-wrap: wrap; }
  .plogo { flex: 0 0 calc(50% - 8px); }

  /* ARTICLES */
  .articles-row { grid-template-columns: 1fr; }
  .articles-head { flex-direction: column; }

  /* STA */
  .sta-inner h2, .sta-inner .sub { width: 100%; white-space: normal; }

  /* FOOTER */
  .footer-top { grid-template-columns: 1fr; }
  .footer-grant { white-space: normal; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-bottom .links { flex-direction: column; gap: 8px; }
}

/* ============================================================
   MOBILE — enhanced responsive layer (overrides above where needed)
   ============================================================ */
@media (max-width: 640px) {

  /* Root: usable side padding (2vw = ~7px on 375px — too tight) */
  :root {
    --side: 16px;
    --text-sm: clamp(12px, 3.2vw, 14px);
  }

  /* ---- HERO ---- */
  .hero-card {
    min-height: auto;
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-card .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 20px;
  }
  .hero-card .cta-row .btn-primary,
  .hero-card .cta-row .btn-outline {
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
  }

  /* ---- STATS ---- */
  /* Arch SVGs are decorative — hide to avoid overflow on 2-col grid */
  .stat-arch { display: none; }

  /* ---- STEPS ---- */
  /* Text alignment */
  .steps-head .section-intro { text-align: left; }

  /* Hide image column on mobile so text fits the sticky card height */
  .step .right-col { display: none; }
  .steps-list .step { overflow: hidden; }

  /* ---- BLUE BAND ---- */
  .bb-right { padding-top: 0; }

  /* ---- MEDIA SECTION ---- */
  .media-inner .section-intro { text-align: left; }

  /* Shorter scroll track is enough on mobile */
  .media-section { padding: 0; }
  .media-scene { height: 210vh; }
  .media-sticky { top: 0; height: 100vh; }
  .media-inner { padding: clamp(18px, 3vw, 28px) var(--side) clamp(10px, 1.5vw, 16px); }

  /* Tabs: horizontal scroll instead of stacked column
     (column = 4 × ~52px = 208px covers most of the video)     */
  .tab-row {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 6px 8px;
    /* keep absolute positioning so it still overlays the video */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .tab-row::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto;
    width: 130px;
    height: 52px;
  }
  /* Drop subtitle text in tabs — not readable at 130px wide */
  .tab .t-text .t2 { display: none; }

  /* ---- STEPS TRACK (Technology.html) — horizontal gallery ---- */
  .steps-section { height: auto !important; }
  .steps-sticky  { position: static; height: auto; overflow: visible; }
  .steps-inner   { height: auto; padding-left: 0; padding-right: 0; }

  /* Tab bar: only active tab visible above current card */
  .steps-tab-bar {
    position: static;
    height: auto;
    display: flex;
    padding: 0 var(--side, 16px) 8px;
  }
  .steps-tab-btn {
    position: static;
    height: 32px;
    padding: 0 16px;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    display: none;
    transform: none !important;
  }
  .steps-tab-btn.steps-tab--active { display: flex; }
  .steps-track {
    position: static;
    flex: none;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: clamp(20px, 3vh, 32px);
  }
  .steps-track::-webkit-scrollbar { display: none; }
  .step-card {
    position: static;
    inset: auto;
    width: calc(100vw - 2 * var(--side, 16px));
    min-width: calc(100vw - 2 * var(--side, 16px));
    height: auto;
    min-height: 55vh;
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 0;
    margin-left: var(--side, 16px);
    box-sizing: border-box;
    transform: none !important;
  }
  .step-card:last-child { margin-right: var(--side, 16px); }
  .step-card .tb3-card-left,
  .steps-track .step-card:first-child .tb3-card-left {
    flex: none;
    min-height: 0;
    height: 100%;
    border-radius: clamp(6px, 2vw, 12px);
  }

  /* ---- Step CTA card buttons ---- */
  .step-card--cta .cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .step-card--cta .cta-row .btn-primary,
  .step-card--cta .cta-row .btn-outline {
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
  }

  /* ---- STA / CTA ---- */
  .sta-inner .cta-row {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    gap: 10px;
  }
  .sta-inner .cta-row .btn-primary,
  .sta-inner .cta-row .btn-outline {
    width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
  }
}

/* ============================================================
   VERY SMALL PHONES ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
  :root { --side: 14px; }

  /* Slightly larger body text on steps for readability */
  .left-col p, .left-col .foot {
    font-size: clamp(13px, 3.5vw, 16px);
  }

  /* Blue band: reduce border-radius on clip-path entry pill */
  .blue-band { min-height: auto; }

  /* Footer links readable */
  .footer-links { flex-direction: column; gap: 20px; }
}