* {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      min-height: 100%;
    }

    a {
      color: inherit;
    }

    :focus-visible {
      outline: 2px solid #2be7ced9;
      outline-offset: 2px;
    }

    .site {
      /* ── Dark tokens (identidad nativa de la marca) ── */
      --bg: #0a0b10;
      --panel: rgba(255, 255, 255, .035);
      --panel-brd: rgba(255, 255, 255, .09);
      --panel-hov: rgba(255, 255, 255, .055);
      --core: #2be7ced9;
      --core-soft: rgba(43, 231, 206, .16);
      --core-glow: rgba(43, 231, 206, .5);
      --expand: #4FD1C5;
      --expand-soft: rgba(79, 209, 197, .14);
      --text: #f3f5f8;
      --dim: #9aa1b2;
      --faint: #565f74;
      --ambient-1: rgba(43, 231, 206, .12);
      --ambient-2: rgba(79, 209, 197, .07);
      --radius: 16px;
      --font-head: -apple-system, 'Segoe UI Semibold', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      --font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      transition: background .2s ease, color .2s ease;
    }

    /* ── Light tokens ── */
    @media (prefers-color-scheme: light) {
      .site:not([data-theme]) {
        --bg: #eef1f5;
        --panel: rgba(255, 255, 255, .65);
        --panel-brd: rgba(10, 20, 35, .10);
        --panel-hov: rgba(255, 255, 255, .9);
        --core: #15C1AA;
        --core-soft: rgba(21, 193, 170, .13);
        --core-glow: rgba(21, 193, 170, .35);
        --expand: #128F85;
        --expand-soft: rgba(18, 143, 133, .13);
        --text: #12161c;
        --dim: #4b5566;
        --faint: #8891a1;
        --ambient-1: rgba(21, 193, 170, .07);
        --ambient-2: rgba(18, 143, 133, .05);
      }
    }

    .site[data-theme="light"] {
      --bg: #eef1f5;
      --panel: rgba(255, 255, 255, .65);
      --panel-brd: rgba(10, 20, 35, .10);
      --panel-hov: rgba(255, 255, 255, .9);
      --core: #15C1AA;
      --core-soft: rgba(21, 193, 170, .13);
      --core-glow: rgba(21, 193, 170, .35);
      --expand: #128F85;
      --expand-soft: rgba(18, 143, 133, .13);
      --text: #12161c;
      --dim: #4b5566;
      --faint: #8891a1;
      --ambient-1: rgba(21, 193, 170, .07);
      --ambient-2: rgba(18, 143, 133, .05);
    }

    .site[data-theme="dark"] {
      --bg: #0a0b10;
      --panel: rgba(255, 255, 255, .035);
      --panel-brd: rgba(255, 255, 255, .09);
      --panel-hov: rgba(255, 255, 255, .055);
      --core: #2be7ced9;
      --core-soft: rgba(43, 231, 206, .16);
      --core-glow: rgba(43, 231, 206, .5);
      --expand: #4FD1C5;
      --expand-soft: rgba(79, 209, 197, .14);
      --text: #f3f5f8;
      --dim: #9aa1b2;
      --faint: #565f74;
      --ambient-1: rgba(43, 231, 206, .12);
      --ambient-2: rgba(79, 209, 197, .07);
    }

    /* ── Preview badge ────────────────────────────────────── */
    .preview-badge {
      position: sticky;
      top: 0;
      z-index: 20;
      text-align: center;
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: .06em;
      color: var(--dim);
      background: var(--bg);
      opacity: .96;
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--panel-brd);
      padding: 8px 12px;
    }

    .preview-badge b {
      color: var(--core);
    }

    .lang-fallback {
      text-align: center;
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--core);
      background: var(--core-soft);
      border-bottom: 1px solid var(--panel-brd);
      padding: 7px 12px;
    }

    .lang-fallback[hidden] {
      display: none;
    }

    /* ── Nav ──────────────────────────────────────────────── */
    .nav {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 18px 44px;
      border-bottom: 1px solid var(--panel-brd);
      flex-wrap: wrap;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      margin-right: auto;
    }

    .brand-mark {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      flex-shrink: 0;
      background: radial-gradient(circle at 35% 30%, #b8fbf0, var(--core) 60%);
      box-shadow: 0 0 14px var(--core-glow);
    }

    .brand-name {
      font-family: var(--font-head);
      font-weight: 800;
      font-size: 15px;
      letter-spacing: -.02em;
    }

    .nav-links {
      display: flex;
      gap: 24px;
    }

    .nav-links a {
      font-size: 12.5px;
      color: var(--dim);
      text-decoration: none;
      transition: color .15s ease;
    }

    .nav-links a:hover {
      color: var(--text);
    }

    /* ── Mobile nav: hamburger real, no solo flex-wrap ──────── */
    .nav-collapse {
      display: contents;
    }

    .nav-toggle {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 32px;
      height: 32px;
      padding: 0;
      background: transparent;
      border: none;
      cursor: pointer;
    }

    .nav-toggle span {
      display: block;
      width: 100%;
      height: 2px;
      background: var(--text);
      border-radius: 1px;
      transition: transform .2s ease, opacity .2s ease;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(2) {
      opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    @media (max-width: 900px) {
      .nav-toggle {
        display: flex;
        order: 1;
        margin-left: auto;
      }

      .nav-tools {
        order: 2;
      }

      .nav-collapse {
        display: none;
        order: 3;
        width: 100%;
      }

      .nav-collapse.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        margin-top: 18px;
        padding-top: 18px;
        border-top: 1px solid var(--panel-brd);
      }

      .nav-collapse .nav-links {
        flex-direction: column;
        gap: 16px;
      }

      .nav-collapse .nav-auth {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
      }

      .nav-collapse .nav-cta {
        justify-content: center;
      }
    }

    .nav-tools {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .lang-select {
      font-family: var(--font-body);
      font-size: 12px;
      color: var(--text);
      background: var(--panel);
      border: 1px solid var(--panel-brd);
      border-radius: 20px;
      padding: 6px 10px;
      cursor: pointer;
    }

    .theme-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--panel);
      border: 1px solid var(--panel-brd);
      border-radius: 20px;
      padding: 5px 10px;
      cursor: pointer;
      color: var(--dim);
      font-size: 11px;
      font-family: var(--font-mono);
    }

    .theme-track {
      position: relative;
      display: inline-block;
      width: 28px;
      height: 14px;
      background: var(--faint);
      border-radius: 7px;
      border: 1px solid var(--panel-brd);
      flex-shrink: 0;
      transition: background .2s;
    }

    .theme-thumb {
      position: absolute;
      top: 1px;
      left: 1px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      transition: left .2s;
    }

    .theme-btn[data-mode="light"] .theme-track {
      background: var(--core);
    }

    .theme-btn[data-mode="light"] .theme-thumb {
      left: 15px;
    }

    /* ── Acceso a la plataforma (isieep.com app) ─────────────── */
    .nav-auth {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-right: 4px;
    }

    .nav-login {
      font-size: 12.5px;
      color: var(--dim);
      text-decoration: none;
      transition: color .15s ease;
    }

    .nav-login:hover {
      color: var(--text);
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 12.5px;
      color: #06120f;
      background: var(--core);
      border-radius: 20px;
      padding: 7px 16px;
      text-decoration: none;
      box-shadow: 0 0 0 1px var(--core-soft);
      transition: filter .15s ease;
    }

    .nav-cta:hover {
      filter: brightness(1.08);
    }

    /* ── CTAs (hero + tira de conversión post-Conexión) ──────── */
    .cta-group {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
      display: inline-flex;
      align-items: center;
      font-family: var(--font-body);
      font-size: 14.5px;
      border-radius: 24px;
      padding: 13px 28px;
      text-decoration: none;
      transition: filter .15s ease, transform .15s ease, border-color .15s ease, background .15s ease;
    }

    .btn-hero-primary {
      font-weight: 700;
      color: #06120f;
      background: var(--core);
      box-shadow: 0 0 0 1px var(--core-soft);
    }

    .btn-hero-primary:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }

    .btn-hero-secondary {
      font-weight: 600;
      color: var(--text);
      background: transparent;
      border: 1.5px solid var(--panel-brd);
    }

    .btn-hero-secondary:hover {
      border-color: var(--core-soft);
      background: var(--panel);
    }

    .cta-strip {
      text-align: center;
      max-width: 560px;
      margin: 0 auto;
    }

    .cta-strip h2 {
      font-family: var(--font-head);
      font-size: 23px;
      font-weight: 700;
      letter-spacing: -.01em;
      margin: 0 0 12px;
    }

    .cta-strip p {
      font-size: 13.5px;
      color: var(--dim);
      line-height: 1.7;
      margin: 0 0 28px;
    }

    /* ── Hero ─────────────────────────────────────────────── */
    .hero {
      position: relative;
      text-align: center;
      padding: 88px 28px 76px;
      background: radial-gradient(ellipse 900px 520px at 50% -8%, var(--ambient-1), transparent 62%),
        radial-gradient(ellipse 700px 460px at 88% 30%, var(--ambient-2), transparent 60%);
      overflow: hidden;
    }

    .hero-core {
      position: relative;
      width: 84px;
      height: 84px;
      border-radius: 50%;
      margin: 0 auto 28px;
      background: radial-gradient(circle at 35% 30%, #b8fbf0, var(--core) 60%);
      box-shadow: 0 0 0 1px var(--core-soft), 0 10px 34px -6px var(--core-glow);
    }

    .hero-core::before {
      content: '';
      position: absolute;
      inset: -16px;
      border-radius: 50%;
      border: 1px solid var(--core-soft);
      animation: pulse 3.2s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: .55;
      }

      50% {
        transform: scale(1.1);
        opacity: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-core::before {
        animation: none;
        opacity: .3;
      }
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--core);
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 18px;
      border: 1px solid var(--core-soft);
      background: var(--core-soft);
      padding: 5px 12px;
      border-radius: 20px;
    }

    .hero h1 {
      font-family: var(--font-head);
      font-size: 38px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -.02em;
      max-width: 680px;
      margin: 0 auto 20px;
      text-wrap: balance;
    }

    .hero h1 em {
      font-style: normal;
      color: var(--core);
      background: linear-gradient(180deg, transparent 70%, var(--core-soft) 70%);
    }

    .hero p {
      font-size: 14.5px;
      color: var(--dim);
      line-height: 1.75;
      max-width: 540px;
      margin: 0 auto 32px;
    }

    .hero-scroll {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 26px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      /* --dim, no --faint: --faint cae bajo 4.5:1 de contraste en ambos
         temas (hallazgo del análisis de diseño) — este link ya no es la
         única vía de conversión del hero, pero sigue siendo texto con
         significado real, no decoración, así que debe leerse bien. */
      color: var(--dim);
      text-decoration: none;
      transition: color .15s ease;
    }

    .hero-scroll:hover {
      color: var(--core);
    }

    .acronym {
      font-family: var(--font-mono);
      font-size: 11px;
      color: var(--faint);
      letter-spacing: .04em;
      max-width: 460px;
      margin: 0 auto 22px;
      line-height: 1.5;
    }

    /* ── Connection diagram (reused core+modules language) ── */
    .diagram-section {
      max-width: 900px;
      margin: 0 auto;
      width: 100%;
    }

    .diagram-scroll {
      overflow-x: auto;
      padding: 4px 4px 8px;
    }

    .diagram {
      width: 720px;
      max-width: 100%;
      margin: 0 auto;
    }

    .core-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .core-ring {
      position: relative;
      width: 92px;
      height: 92px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #b8fbf0, var(--core) 60%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 1px var(--core-soft), 0 8px 30px -6px var(--core-glow);
    }

    .core-ring::before {
      content: '';
      position: absolute;
      inset: -14px;
      border-radius: 50%;
      border: 1px solid var(--core-soft);
      animation: pulse 3.2s ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      .core-ring::before {
        animation: none;
        opacity: .3;
      }
    }

    .core-mark {
      font-family: var(--font-head);
      font-weight: 800;
      font-size: 13px;
      color: #062420;
      letter-spacing: -.02em;
    }

    .core-caption {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--dim);
      margin-top: 14px;
      text-align: center;
      max-width: 340px;
      line-height: 1.6;
    }

    .connectors {
      display: block;
      width: 100%;
      height: 92px;
      margin-top: 6px;
    }

    .connectors .tunnel {
      stroke: var(--faint);
      stroke-width: 1.6;
    }

    .connectors .tunnel.future {
      stroke-dasharray: 3 5;
    }

    .connectors .tunnel.active {
      stroke: var(--core);
      stroke-width: 2;
      stroke-dasharray: 4 5;
      animation: flow 1.1s linear infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      .connectors .tunnel.active {
        animation: none;
        stroke-dasharray: none;
      }
    }

    @keyframes flow {
      to {
        stroke-dashoffset: -18;
      }
    }

    .nodes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .node {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .node .dot2 {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--faint);
      margin-bottom: 14px;
      box-shadow: 0 0 0 4px rgba(128, 128, 128, .08);
    }

    .node.active .dot2 {
      background: var(--core);
      box-shadow: 0 0 0 4px var(--core-soft);
    }

    .node.future .dot2 {
      background: transparent;
      border: 1.5px dashed var(--faint);
    }

    .node .card.future {
      border-style: dashed;
      border-color: var(--panel-brd);
      background: transparent;
      opacity: .85;
    }

    .diagram-note {
      text-align: center;
      font-size: 11px;
      color: var(--faint);
      margin-top: 26px;
      font-family: var(--font-mono);
    }

    .node .card {
      width: 100%;
      background: var(--panel);
      border: 1.5px solid var(--panel-brd);
      border-radius: var(--radius);
      padding: 20px 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 8px;
      backdrop-filter: blur(20px);
      transition: transform .15s ease, border-color .15s ease;
    }

    .node .card:hover {
      transform: translateY(-2px);
    }

    .node .card.active {
      border-color: rgba(43, 231, 206, .45);
    }

    .node .card .card-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--core);
    }

    .node .card.future .card-tag {
      color: var(--faint);
    }

    .node .card .card-icon {
      font-size: 22px;
    }

    .node .card .card-title {
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 700;
    }

    .node .card .card-desc {
      font-size: 10.5px;
      color: var(--dim);
      line-height: 1.55;
    }

    /* ── Section shells ───────────────────────────────────── */
    section.block {
      padding: 76px 28px;
      max-width: 1000px;
      margin: 0 auto;
      width: 100%;
    }

    section.block.tinted {
      background: rgba(128, 128, 128, .02);
      border-top: 1px solid var(--panel-brd);
      border-bottom: 1px solid var(--panel-brd);
      max-width: none;
    }

    section.block.tinted>.inner {
      max-width: 1000px;
      margin: 0 auto;
    }

    .block-head {
      text-align: center;
      max-width: 560px;
      margin: 0 auto 44px;
    }

    .block-head h2 {
      font-family: var(--font-head);
      font-size: 25px;
      font-weight: 700;
      margin: 10px 0 12px;
      letter-spacing: -.01em;
    }

    .block-head p {
      font-size: 13px;
      color: var(--dim);
      line-height: 1.7;
      margin: 0;
    }

    /* ── Pillars ──────────────────────────────────────────── */
    .pillars {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .pillar {
      background: var(--panel);
      border: 1px solid var(--panel-brd);
      border-radius: var(--radius);
      padding: 22px 16px;
      text-align: center;
      backdrop-filter: blur(20px);
    }

    .pillar-icon {
      font-size: 20px;
      margin-bottom: 12px;
    }

    .pillar-title {
      font-family: var(--font-head);
      font-size: 12.5px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .pillar-desc {
      font-size: 10.5px;
      color: var(--dim);
      line-height: 1.55;
    }

    /* ── Products ─────────────────────────────────────────── */
    .products {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    .product-card {
      background: var(--panel);
      border: 1px solid var(--panel-brd);
      border-radius: var(--radius);
      padding: 26px 24px;
      backdrop-filter: blur(20px);
      transition: background .15s ease, transform .15s ease;
    }

    .product-card:hover {
      background: var(--panel-hov);
      transform: translateY(-2px);
    }

    .product-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--core);
      margin-bottom: 12px;
    }

    .product-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(128, 128, 128, .09);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      margin-bottom: 14px;
    }

    .product-name {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .product-desc {
      font-size: 12px;
      color: var(--dim);
      line-height: 1.65;
    }

    /* ── Precios ──────────────────────────────────────────── */
    .price-tiers {
      list-style: none;
      margin: 16px 0 0;
      padding: 14px 0 0;
      border-top: 1px solid var(--panel-brd);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .price-tiers li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      font-size: 13px;
    }

    .price-tiers li span {
      color: var(--dim);
    }

    .price-tiers li b {
      font-family: var(--font-mono);
      font-weight: 600;
      color: var(--text);
    }

    .price-tiers li b small {
      font-family: var(--font-body);
      font-weight: 400;
      color: var(--faint);
      margin-left: 2px;
    }

    .price-note {
      font-size: 10.5px;
      color: var(--faint);
      margin-top: 16px;
      line-height: 1.5;
    }

    /* ── Videos ───────────────────────────────────────────── */
    .video-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    .video-card {
      background: var(--panel);
      border: 1px solid var(--panel-brd);
      border-radius: var(--radius);
      overflow: hidden;
    }

    .video-thumb {
      aspect-ratio: 16/9;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid var(--panel-brd);
      position: relative;
    }

    .play-btn {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--core-soft);
      border: 1px solid var(--core);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .play-btn::after {
      content: '';
      width: 0;
      height: 0;
      margin-left: 3px;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 11px solid var(--core);
    }

    .video-soon-badge {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-family: var(--font-mono);
      font-size: 8.5px;
      padding: 3px 9px;
      border-radius: 9px;
      color: var(--faint);
      border: 1px solid var(--panel-brd);
      background: var(--panel);
    }

    .video-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      font-family: var(--font-mono);
      font-size: 8.5px;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--core);
      background: var(--core-soft);
      padding: 3px 9px;
      border-radius: 9px;
    }

    .video-info {
      padding: 16px 18px;
    }

    .video-title {
      font-family: var(--font-head);
      font-size: 13.5px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .video-desc {
      font-size: 11px;
      color: var(--dim);
      line-height: 1.6;
    }

    /* ── Blog ─────────────────────────────────────────────── */
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .blog-card {
      background: var(--panel);
      border: 1px solid var(--panel-brd);
      border-radius: var(--radius);
      padding: 22px 20px;
      backdrop-filter: blur(20px);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .blog-badge {
      align-self: flex-start;
      font-family: var(--font-mono);
      font-size: 8.5px;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--faint);
      border: 1px solid var(--panel-brd);
      border-radius: 10px;
      padding: 3px 9px;
    }

    .blog-title {
      font-family: var(--font-head);
      font-size: 13.5px;
      font-weight: 700;
      line-height: 1.4;
    }

    .blog-desc {
      font-size: 11px;
      color: var(--dim);
      line-height: 1.6;
    }

    .block-foot-note {
      text-align: center;
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--faint);
      margin-top: 28px;
    }

    /* ── Announcements ────────────────────────────────────── */
    .timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
      max-width: 620px;
      margin: 0 auto;
    }

    .tl-item {
      display: flex;
      gap: 18px;
      padding: 18px 0;
      border-top: 1px solid var(--panel-brd);
    }

    .tl-item:first-child {
      border-top: none;
    }

    .tl-dot-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      padding-top: 3px;
    }

    .tl-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--core);
      box-shadow: 0 0 0 4px var(--core-soft);
    }

    .tl-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--core);
      margin-bottom: 5px;
    }

    .tl-title {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .tl-desc {
      font-size: 11.5px;
      color: var(--dim);
      line-height: 1.6;
    }

    /* ── Training ─────────────────────────────────────────── */
    .training-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    .training-card {
      background: var(--panel);
      border: 1px solid var(--panel-brd);
      border-radius: var(--radius);
      padding: 22px 22px;
    }

    .training-product {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--expand);
      margin-bottom: 10px;
    }

    .training-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .training-list li {
      font-size: 12px;
      color: var(--dim);
      padding-left: 14px;
      position: relative;
    }

    .training-list li::before {
      content: '—';
      position: absolute;
      left: 0;
      color: var(--faint);
    }

    /* ── Footer ───────────────────────────────────────────── */
    .site-footer {
      border-top: 1px solid var(--panel-brd);
      padding: 40px 28px;
      margin-top: auto;
    }

    .footer-inner {
      max-width: 1000px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 24px;
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-copy {
      font-size: 11px;
      color: var(--faint);
      margin-top: 10px;
      max-width: 320px;
      line-height: 1.6;
    }

    .footer-products {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--dim);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .footer-products b {
      color: var(--faint);
      text-transform: uppercase;
      letter-spacing: .06em;
      font-size: 9px;
      display: block;
      margin-bottom: 4px;
    }

    @media (max-width: 860px) {
      .pillars {
        grid-template-columns: repeat(2, 1fr);
      }

      .products,
      .blog-grid,
      .training-grid,
      .video-grid {
        grid-template-columns: 1fr;
      }
    }