body {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .site-header {
    transform: translateY(-100%);
    transition: transform 0.6s ease-out;
  }

  body.page-loaded .site-header {
    transform: translateY(0);
  }

  .loader {
    height: 3px;
    background: repeating-linear-gradient(
      90deg,
      #0033FE 0px,
      #0033FE 10px,
      transparent 10px,
      transparent 20px
    );
    position: fixed;
    top: 50%;
    left: 0;
    width: 0%;
    z-index: 9999;
    margin-top: -1.5px;
  }

  .loader-svg {
    position: fixed;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    z-index: 10000;
    background-image: url('../images/S1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
  }

  .content {
    display: none;
  }

  body.page-loaded .loader {
    display: none !important;
  }

  body.page-loaded .content {
    display: block;
  }

  /* ── TB1 hero reveal (triggered after loader) ── */
  @keyframes tb1-reveal {
    from { opacity: 0; transform: scale(0.75); filter: blur(6px); }
    to   { opacity: 1; transform: scale(1);    filter: blur(0px); }
  }

  .tb1-card .tb1-tags,
  .tb1-card .tb1-title,
  .tb1-card .tb1-body,
  .tb1-card .tb1-feat,
  .tb1-right {
    opacity: 0;
  }

  body.page-loaded .tb1-card .tb1-tags,
  body.page-loaded .tb1-card .tb1-title,
  body.page-loaded .tb1-card .tb1-body,
  body.page-loaded .tb1-card .tb1-feat,
  body.page-loaded .tb1-right {
    animation: tb1-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  body.page-loaded .tb1-card .tb1-tags                  { animation-delay: 0s; }
  body.page-loaded .tb1-card .tb1-title                 { animation-delay: 0.14s; }
  body.page-loaded .tb1-right                           { animation-delay: 0.20s; }
  body.page-loaded .tb1-card .tb1-body                  { animation-delay: 0.28s; }
  body.page-loaded .tb1-card .tb1-feat:nth-child(1)     { animation-delay: 0.42s; }
  body.page-loaded .tb1-card .tb1-feat:nth-child(2)     { animation-delay: 0.52s; }
  body.page-loaded .tb1-card .tb1-feat:nth-child(3)     { animation-delay: 0.62s; }

  .tb1-section {
    position: sticky;
    top: var(--header-h, 0px);
    height: calc(100vh - var(--header-h, 0px));
    z-index: 1;
    padding: clamp(8px, 1vw, 12px) var(--side);
    display: flex;
    flex-direction: column;
  }
  .tb1-card {
    flex: 1;
    min-height: 0;
  }
  .tb2-section {
    position: relative;
    z-index: 2;
    padding-top: 0;
  }

  /* ── TB4: hold + sticky inner ── */
  .tb4-section {
    min-height: 400vh;
  }
  .tb4-inner {
    position: sticky;
    top: calc(var(--header-h, 0px) + 16px);
    grid-template-columns: 1.3fr 0.88fr;
    padding-top: clamp(18px, 2.75vw, 38px);
    padding-bottom: clamp(18px, 2.75vw, 38px);
  }
  /* ── TB4: dashed border (top + right + bottom, no left) ── */
  .tb4-inner {
    border-top:    2px dashed var(--blue);
    border-left:   none;
    border-bottom: 2px dashed var(--blue);
    border-right:  2px dashed var(--blue);
    border-radius: 0 clamp(8px, 0.8vw, 12px) clamp(8px, 0.8vw, 12px) 0;
  }
  #tb4-border-svg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 45;
  }

  /* ── TB4 grid cards: scroll animation ── */
  .tb4-img-card {
    transform-origin: center;
    will-change: transform;
    transition: background-color 0.6s ease;
    display: flex;
    flex-direction: column;
    padding: clamp(14px, 2vw, 26px);
    position: relative;
  }
  .tb4-img-card.tb4-active {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
  }

  /* TB4 card inner layout */
  .tb4-card-arrow {
    position: static;
    color: var(--blue);
    flex-shrink: 0;
    margin-bottom: auto;
    line-height: 1;
  }
  .tb4-card-title {
    color: var(--ink) !important;
    font-size: var(--text-md) !important;
    font-weight: 700;
    margin: clamp(10px, 1.5vw, 20px) 0 0 !important;
    line-height: 1.2;
  }
  .tb4-card-divider {
    border: none;
    border-top: 1px solid rgba(25,36,59,0.18);
    margin: clamp(8px, 1.2vw, 14px) 0;
    flex-shrink: 0;
  }
  .tb4-card-sub {
    color: rgba(25,36,59,0.55) !important;
    font-size: var(--text-xs) !important;
    line-height: 1.4;
    margin: 0 !important;
  }

  /* Active / blue card overrides */
  .tb4-img-card--blue .tb4-card-arrow,
  .tb4-img-card.tb4-active .tb4-card-arrow { color: white; }
  .tb4-img-card--blue .tb4-card-title,
  .tb4-img-card.tb4-active .tb4-card-title { color: white !important; }
  .tb4-img-card--blue .tb4-card-divider,
  .tb4-img-card.tb4-active .tb4-card-divider { border-top-color: rgba(255,255,255,0.25); }
  .tb4-img-card--blue .tb4-card-sub,
  .tb4-img-card.tb4-active .tb4-card-sub { color: rgba(255,255,255,0.65) !important; }

  /* ── TB2 table: side borders + radius ── */
  .tb2-table.tb2-rows-in {
    border-left:  1px solid var(--ink);
    border-right: 1px solid var(--ink);
    border-radius: clamp(8px, 0.8vw, 12px);
    position: relative;
  }
  .tb2-table.tb2-rows-in .tb2-head-row {
    border-top: 1px solid var(--ink);
    border-radius: clamp(8px, 0.8vw, 12px) clamp(8px, 0.8vw, 12px) 0 0;
    overflow: hidden;
  }
  .tb2-table.tb2-rows-in .tb2-data-row:last-child {
    border-radius: 0 0 clamp(8px, 0.8vw, 12px) clamp(8px, 0.8vw, 12px);
    overflow: hidden;
  }

  /* ── TB2 head-row: sticky під хедером ── */
  .tb2-head-row {
    position: sticky;
    top: var(--header-h, 0px);
    z-index: 11;
    background: var(--bg);
  }

  /* ── TB2 data rows: wipe-in зліва направо ── */
  .tb2-data-row {
    clip-path: inset(0% 100% 0% 0%);
    will-change: clip-path;
    transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .tb2-table.tb2-rows-in .tb2-data-row:nth-child(2) { clip-path: inset(0%); transition-delay: 0.00s; }
  .tb2-table.tb2-rows-in .tb2-data-row:nth-child(3) { clip-path: inset(0%); transition-delay: 0.12s; }
  .tb2-table.tb2-rows-in .tb2-data-row:nth-child(4) { clip-path: inset(0%); transition-delay: 0.24s; }
  .tb2-table.tb2-rows-in .tb2-data-row:nth-child(5) { clip-path: inset(0%); transition-delay: 0.36s; }
  .tb2-table.tb2-rows-in .tb2-data-row:nth-child(6) { clip-path: inset(0%); transition-delay: 0.48s; }
  .steps-section { padding-top: 0; }
  .steps-inner { padding-left: 0; }
  @media (max-width: 640px) {
    .tb4-inner {
      grid-template-columns: 1fr;
      min-height: calc(100vh - var(--header-h, 60px) - 32px);
      align-content: start;
    }
    .tb5-inner {
      grid-template-columns: 1fr;
      height: auto;
      min-height: 100vh;
      align-items: start;
      overflow: visible;
    }
    .tb5-img {
      width: 100%;
      aspect-ratio: 4 / 3;
    }
  }
  @media (max-width: 768px) {
    .tb5-img {
      aspect-ratio: 5 / 9;
    }
  }
  .tb4-left { align-self: flex-start; }
  .tb5-section { min-height: 280vh; padding: 0; position: relative; z-index: 2; }
  .tb5-inner {
    position: sticky;
    top: var(--header-h, 0px);
    height: calc(150vh - var(--header-h, 0px));
    padding: clamp(32px, 5vw, 72px) var(--side);
    box-sizing: border-box;
    overflow: hidden;
    align-items: center;
    z-index: 1;
  }
  .tb5-img { will-change: transform; }
  .tb5-right { opacity: 0; }
  .tb6-scene { height: 400vh; }
  .tb6-title, .tb6-sub, .tb6-cta {
    opacity: 0;
    transform: scale(0.75);
    filter: blur(6px);
    will-change: opacity, transform, filter;
  }
  .tb6-section {
    height: 140vh;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  @media (max-width: 640px) {
    .tb6-section {
      height: 100vh;
      justify-content: center;
    }
    .tb6-cta.cta-row {
      display: flex;
      flex-direction: column;
      gap: 14px;
      width: 100%;
    }
    .tb6-cta.cta-row .btn-primary,
    .tb6-cta.cta-row .btn-outline {
      width: 100%;
      justify-content: space-between;
      box-sizing: border-box;
    }
  }
  /* ---- Steps mobile gallery nav ---- */
  .steps-gallery-nav { display: none; }
  @media (max-width: 640px) {
    .steps-gallery-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 16px var(--side) clamp(20px, 3vh, 32px);
    }
    .steps-arrow {
      width: 38px;
      height: 38px;
      border: 1.5px solid var(--ink);
      border-radius: 50%;
      background: transparent;
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 0.2s, border-color 0.2s;
    }
    .steps-arrow:active { background: rgba(25,36,59,0.08); }
    .steps-arrow:disabled { opacity: 0.25; pointer-events: none; }
    .steps-dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .steps-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(25,36,59,0.2);
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background 0.25s, transform 0.25s, width 0.25s;
    }
    .steps-dot--active {
      background: var(--blue);
      transform: scale(1.5);
    }
  }