/* ─────────────────────────────────────────────────────────
       GLOBAL RESET
    ───────────────────────────────────────────────────────── */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --neon:      #AAFF00;
      --neon-low:  rgba(170,255,0,.12);
      --neon-glow: rgba(170,255,0,.35);
      --black:     #060606;
      --card:      #0E0E0E;
      --white:     #FFFFFF;
      --muted:     rgba(255,255,255,.38);
      --border:    rgba(255,255,255,.07);
    }
    html { scroll-behavior: smooth; }
    body {
      background:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(170,255,0,.018), transparent),
        radial-gradient(ellipse 80% 80% at 0% 50%, rgba(0,30,10,.45), transparent),
        radial-gradient(ellipse 80% 80% at 100% 50%, rgba(0,10,30,.35), transparent),
        #060606;
      color: var(--white);
      font-family: 'Funnel Sans', sans-serif;
      overflow-x: hidden;
    }



    /* ═══════════════════════════════════════════════════════
       1. HERO
    ═══════════════════════════════════════════════════════ */
    .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 620px;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 38%;
      display: block;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(105deg,
          rgba(6,6,6,.96)  0%,
          rgba(6,6,6,.82)  28%,
          rgba(6,6,6,.46)  50%,
          rgba(6,6,6,.10)  68%,
          transparent      80%
        ),
        linear-gradient(to top,  rgba(6,6,6,.88) 0%, rgba(6,6,6,.45) 22%, transparent 42%),
        linear-gradient(to bottom, rgba(6,6,6,.55) 0%, transparent 14%);
    }

    .hero-grain {
      position: absolute;
      inset: 0;
      z-index: 2;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: .032;
      pointer-events: none;
    }

    .hero-neon-line {
      position: absolute;
      left: 0; top: 0;
      width: 3px;
      height: 0;
      background: linear-gradient(to bottom, var(--neon), transparent);
      z-index: 6;
      animation: lineGrow 1.4s .3s cubic-bezier(.22,.68,0,1) forwards;
    }
    @keyframes lineGrow { to { height: 65%; } }

    /* NAVBAR */
    .nav {
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 56px;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      opacity: 0;
      transform: translateY(-16px);
      animation: fadeDown .8s 1.5s cubic-bezier(.22,.68,0,1.2) forwards;
    }
    .nav-logo img {
      height: 36px;
      width: auto;
      display: block;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
      opacity: 0;
      transform: translateY(-16px);
      animation: fadeDown .8s 1.65s cubic-bezier(.22,.68,0,1.2) forwards;
    }
    .nav-links a {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.65);
      text-decoration: none;
      transition: color .2s;
      position: relative;
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a.active { color: var(--neon); }
    .nav-links a.active::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0;
      width: 100%; height: 1px;
      background: var(--neon);
    }

    .nav-icon {
      width: 36px; height: 36px;
      border: 1px solid rgba(255,255,255,.15);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,.6);
      cursor: pointer;
      transition: border-color .2s, color .2s;
      opacity: 0;
      transform: translateY(-16px);
      animation: fadeDown .8s 1.78s cubic-bezier(.22,.68,0,1.2) forwards;
    }
    .nav-icon:hover { border-color: var(--neon); color: var(--neon); }
    .nav-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

    /* HAMBURGER BUTTON — hidden on desktop */
    .nav-burger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px; height: 36px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 4px;
      flex-shrink: 0;
    }
    .nav-burger span {
      display: block;
      width: 100%; height: 1.5px;
      background: var(--white);
      border-radius: 2px;
      transform-origin: center;
      transition: transform .3s cubic-bezier(.22,.68,0,1.2), opacity .2s, width .3s;
    }
    /* X state */
    .nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav-burger.open span:nth-child(2) { opacity: 0; width: 0; }
    .nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* MOBILE DROPDOWN MENU */
    .nav-mobile-menu {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 9;
      background: rgba(6,6,6,.97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(170,255,0,.15);
      padding: 90px 24px 40px;
      transform: translateY(-100%);
      transition: transform .45s cubic-bezier(.22,.68,0,1.2);
    }
    .nav-mobile-menu.open {
      transform: translateY(0);
    }
    .nav-mobile-menu ul {
      list-style: none;
      margin: 0; padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .nav-mobile-menu ul li {
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .nav-mobile-menu ul li:first-child {
      border-top: 1px solid rgba(255,255,255,.06);
    }
    .nav-mobile-menu ul li a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 32px;
      letter-spacing: .04em;
      color: rgba(255,255,255,.7);
      text-decoration: none;
      transition: color .2s, padding-left .2s;
    }
    .nav-mobile-menu ul li a::after {
      content: '→';
      font-family: 'Funnel Sans', sans-serif;
      font-size: 18px;
      color: var(--neon);
      opacity: 0;
      transform: translateX(-8px);
      transition: opacity .2s, transform .2s;
    }
    .nav-mobile-menu ul li a:hover {
      color: var(--white);
      padding-left: 8px;
    }
    .nav-mobile-menu ul li a:hover::after {
      opacity: 1;
      transform: translateX(0);
    }
    .nav-mobile-lang {
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid rgba(255,255,255,.06);
    }
    .nav-mobile-lang .nav-lang {
      display: flex;
      opacity: 1;
      transform: none;
      animation: none;
      padding: 8px 16px;
      font-size: 12px;
    }

    .nav-lang {
      display: flex;
      align-items: center;
      gap: 7px;
      background: transparent;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 3px;
      padding: 6px 12px;
      cursor: pointer;
      opacity: 0;
      transform: translateY(-16px);
      animation: fadeDown .8s 1.9s cubic-bezier(.22,.68,0,1.2) forwards;
      transition: border-color .2s;
    }
    .nav-lang:hover { border-color: var(--neon); }
    .nav-lang-active {
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .1em;
      color: var(--neon);
    }
    .nav-lang-sep {
      width: 1px;
      height: 10px;
      background: rgba(255,255,255,.2);
    }
    .nav-lang-other {
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .1em;
      color: rgba(255,255,255,.35);
      transition: color .2s;
    }
    .nav-lang:hover .nav-lang-other { color: rgba(255,255,255,.7); }

    /* HERO CONTENT */
    .hero-content {
      position: absolute;
      z-index: 5;
      inset: 0;
      width: 56%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 120px 56px 120px;
    }

    .hero-kicker {
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      font-style: italic;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--neon);
      margin-bottom: 18px;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeUp .55s .45s ease forwards;
    }

    .hero-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(58px, 6.0vw, 108px);
      line-height: .92;
      letter-spacing: .01em;
      margin-bottom: 24px;
    }
    .hero-title .tl { display: block; overflow: hidden; }
    .hero-title .tl span {
      display: block;
      transform: translateY(110%);
      opacity: 0;
      animation: slideUp .65s cubic-bezier(.16,.84,.44,1) forwards;
    }
    .hero-title .tl:nth-child(1) span { animation-delay: .52s; }
    .hero-title .tl:nth-child(2) span { animation-delay: .62s; }
    .hero-title .tl:nth-child(3) span { animation-delay: .72s; }

    .hero-sub {
      font-size: clamp(14px, 1.4vw, 17px);
      font-weight: 300;
      line-height: 1.65;
      color: rgba(255,255,255,.68);
      max-width: 420px;
      margin-bottom: 40px;
      opacity: 0;
      transform: translateY(16px);
      animation: fadeUp .6s .9s ease forwards;
    }

    .hero-ctas {
      display: flex;
      align-items: center;
      gap: 28px;
      flex-wrap: wrap;
      opacity: 0;
      transform: translateY(16px);
      animation: fadeUp .6s 1.05s ease forwards;
    }

    .btn-primary {
      padding: 15px 32px;
      background: var(--neon);
      color: var(--black);
      font-family: 'Funnel Sans', sans-serif;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      text-decoration: none;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background .2s, transform .2s;
    }
    .btn-primary::after { content: '→'; transition: transform .2s; }
    .btn-primary:hover { background: #c8ff33; transform: translateY(-2px); }
    .btn-primary:hover::after { transform: translateX(4px); }

    .btn-ghost {
      padding: 14px 0;
      background: none;
      border: none;
      border-bottom: 1px solid rgba(255,255,255,.25);
      color: rgba(255,255,255,.78);
      font-family: 'Funnel Sans', sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: .1em;
      text-decoration: none;
      cursor: pointer;
      transition: color .2s, border-color .2s;
    }
    .btn-ghost:hover { color: var(--white); border-color: var(--white); }

    /* SCROLL INDICATOR */
    .hero-scroll {
      position: absolute;
      left: 50%; bottom: 88px;
      transform: translateX(-50%);
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      opacity: 0;
      animation: fadeUp .5s 1.3s ease forwards;
    }
    .scroll-chevron {
      display: block;
      width: 14px; height: 8px;
      position: relative;
    }
    .scroll-chevron::before, .scroll-chevron::after {
      content: '';
      position: absolute;
      width: 7px; height: 1.5px;
      background: var(--neon);
      top: 3px;
    }
    .scroll-chevron::before { left:0;  transform: rotate(45deg);  transform-origin: right; }
    .scroll-chevron::after  { right:0; transform: rotate(-45deg); transform-origin: left;  }
    .scroll-chevron:nth-child(1) { opacity:.35; animation: chevPulse 1.8s .0s ease-in-out infinite; }
    .scroll-chevron:nth-child(2) { opacity:.7;  animation: chevPulse 1.8s .2s ease-in-out infinite; }
    .scroll-chevron:nth-child(3) { opacity:1;   animation: chevPulse 1.8s .4s ease-in-out infinite; }
    @keyframes chevPulse { 0%,100% { transform:translateY(0); } 50% { transform:translateY(3px); } }

    /* STATS BAR */
    .hero-stats {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 5;
      display: flex;
      height: 64px;
      border-top: 1px solid rgba(255,255,255,.06);
      background: rgba(6,6,6,.6);
      backdrop-filter: blur(14px);
      opacity: 0;
      animation: fadeUp .5s 1.2s ease forwards;
    }
    .hero-stat {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border-right: 1px solid rgba(255,255,255,.06);
      padding: 0 20px;
    }
    .hero-stat:last-child { border-right: none; }
    .hs-num {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 28px;
      color: var(--neon);
      line-height: 1;
      flex-shrink: 0;
    }
    .hs-label {
      font-family: 'DM Mono', monospace;
      font-size: 8.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,.3);
      line-height: 1.5;
    }


    /* EXPERIENCE PANEL — BOTTOM-RIGHT, 2 CARDS */
    .hero-exp-panel {
      position: absolute;
      top: auto;
      right: 28px;
      bottom: 84px;
      margin: 0;
      width: 37.5%;
      height: 218px;
      z-index: 5;
      opacity: 0;
      animation: fadeUp .7s 1.3s ease forwards;
    }

    .hero-exp-label {
      position: absolute;
      top: -22px;
      left: 2px;
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.42);
      pointer-events: none;
    }

    .hero-exp-blend {
      display: none;
    }

    .hero-exp-slides {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-radius: 14px;
    }

    .hero-exp-track {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 100%;
      gap: 10px;
      align-items: stretch;
      padding: 0;
    }

    .hero-exp-card {
      flex: 1;
      min-width: 0;
      height: 100%;
      position: relative;
      background-size: cover;
      background-position: center;
      text-decoration: none;
      display: block;
      overflow: hidden;
      border-radius: 14px;
      opacity: 1;
      cursor: pointer;
    }

    .hero-exp-card.active {
      opacity: 1;
    }


    .hero-exp-card.active::after {
      content: '';
      position: absolute;
      inset: 0;
      border: 1.5px solid rgba(182,147,65,.7);
      border-radius: 14px;
      pointer-events: none;
      z-index: 15;
    }

    .hero-exp-card:hover {
      filter: brightness(1.06);
    }


    .hero-exp-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(6,6,6,.92) 0%,
        rgba(6,6,6,.40) 50%,
        rgba(6,6,6,.08) 100%
      );
    }

    /* Year badge */
    .hero-exp-card-year {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 10;
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      letter-spacing: .14em;
      color: var(--white);
      background: rgba(6,6,6,.52);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 4px 10px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,.12);
      display: inline-block;
    }

    .hero-exp-card-year--soon {
      color: var(--black);
      background: var(--neon);
      border-color: transparent;
    }

    .hero-exp-card-loc {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 10;
      font-family: 'Funnel Sans', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.9);
      background: rgba(6,6,6,.45);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 4px 10px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,.12);
    }

    .hero-exp-card-body {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px 16px 16px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 5;
    }

    .hero-exp-card-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(22px, 2vw, 34px);
      line-height: .95;
      letter-spacing: .02em;
      color: var(--white);
      display: block;
    }

    .hero-exp-card-desc {
      font-family: 'Funnel Sans', sans-serif;
      font-size: 15px;
      line-height: 1.52;
      color: rgba(255,255,255,.82);
      margin: 4px 0 0;
    }

    .hero-exp-card-btn {
      position: absolute;
      bottom: 16px;
      right: 16px;
      z-index: 10;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.22);
      background: rgba(6,6,6,.38);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: rgba(255,255,255,.8);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color .2s, color .2s;
    }

    .hero-exp-card-btn svg {
      width: 15px;
      height: 15px;
    }

    .hero-exp-card:hover .hero-exp-card-btn,
    .hero-exp-card.active .hero-exp-card-btn {
      border-color: var(--neon);
      color: var(--neon);
    }

    /* Keep old tag/link hidden */
    .hero-exp-card-tag { display: none; }
    .hero-exp-card-link { display: none; }

    .hero-exp-card--soon .hero-exp-card-overlay {
      background: linear-gradient(
        to top,
        rgba(6,6,6,.97) 0%,
        rgba(6,6,6,.72) 50%,
        rgba(6,6,6,.38) 100%
      );
    }



    /* ═══════════════════════════════════════════════════════
       2. ABOUT
    ═══════════════════════════════════════════════════════ */
    #about {
      position: relative;
      overflow: hidden;
      padding: 180px 0 96px;
      background:
        radial-gradient(ellipse 90% 70% at 80% 20%, rgba(0,20,40,.6), transparent),
        radial-gradient(ellipse 60% 60% at 10% 80%, rgba(5,25,5,.5), transparent),
        linear-gradient(160deg, #080d08 0%, #060606 45%, #07080e 100%);
    }
    /* ── Parallax image layer ── */
    .abt-bg-parallax {
      position: absolute;
      inset: -28% 0;
      z-index: 0;
      will-change: transform;
    }
    .abt-bg-parallax img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 40%;
      display: block;
      filter: brightness(1.2) contrast(1.05);
    }
    /* ── Dark gradient overlay on top of image ── */
    .abt-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(to right, rgba(6,6,6,.92) 0%, rgba(6,6,6,.72) 38%, rgba(6,6,6,.28) 65%, rgba(6,6,6,.08) 100%),
        linear-gradient(to bottom, rgba(6,6,6,.50) 0%, transparent 15%, transparent 62%, rgba(6,6,6,.82) 82%, rgba(6,6,6,.96) 100%);
      pointer-events: none;
    }

    #about::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
      opacity: .025;
      pointer-events: none;
      z-index: 3;
    }

    .abt-wm {
      position: absolute;
      top: -80px; right: -40px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: min(52vw, 740px);
      line-height: 1;
      color: rgba(255,255,255,.014);
      pointer-events: none;
      user-select: none;
      z-index: 4;
    }

    .abt-spine { display: none; }
    .abt-spine.grow { height: 100%; }
    .abt-spine::after {
      content: '';
      position: absolute;
      top: 0; left: -3px;
      width: 7px; height: 7px;
      background: var(--neon);
      border-radius: 50%;
      box-shadow: 0 0 12px var(--neon);
      animation: dotPulse 2.5s ease-in-out infinite;
    }
    @keyframes dotPulse {
      0%,100% { box-shadow: 0 0 8px var(--neon); }
      50%      { box-shadow: 0 0 20px var(--neon), 0 0 40px rgba(170,255,0,.4); }
    }

    .abt-inner {
      position: relative;
      z-index: 6;
      padding: 0 64px 0 92px;
    }

    .abt-label {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--neon);
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 36px;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .5s, transform .5s;
    }
    .abt-label.on { opacity: 1; transform: none; }
    .abt-label::before { content: ''; width: 28px; height: 1px; background: var(--neon); flex-shrink: 0; }

    .abt-headline {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(36px, 4.5vw, 64px);
      line-height: .91;
      letter-spacing: .015em;
      margin-bottom: 52px;
      max-width: 1100px;
    }
    .hl-wrap { display: inline-block; overflow: hidden; vertical-align: top; line-height: inherit; }
    .hl-inner {
      display: inline-block;
      transform: translateY(108%);
      opacity: 0;
      transition: transform .7s cubic-bezier(.16,.84,.44,1), opacity .4s ease;
    }
    .hl-inner.on { transform: translateY(0); opacity: 1; }
    .hl-inner.em-green { color: var(--neon); font-style: italic; }

    .abt-rule {
      height: 1px;
      margin-bottom: 60px;
      position: relative;
      background: rgba(255,255,255,.06);
      overflow: visible;
      opacity: 0;
      transition: opacity .4s .3s ease;
    }
    .abt-rule.on { opacity: 1; }
    .abt-rule::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      height: 1px; width: 0;
      background: linear-gradient(90deg, var(--neon), rgba(170,255,0,.15));
      transition: width 1.2s .5s cubic-bezier(.22,.68,0,1.15);
    }
    .abt-rule.on::before { width: 100%; }

    .abt-cols {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: 0 72px;
      margin-bottom: 80px;
      align-items: start;
    }

    .abt-body-p {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.78;
      color: rgba(255,255,255,.4);
      letter-spacing: .022em;
      margin-bottom: 22px;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s, transform .6s;
    }
    .abt-body-p:last-child { margin-bottom: 0; }
    .abt-body-p.on { opacity: 1; transform: none; }
    .abt-body-p b { font-weight: 700; color: rgba(255,255,255,.78); }

    .abt-acc {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s .18s, transform .6s .18s;
    }
    .abt-acc.on { opacity: 1; transform: none; }

    .acc-item {
      border-top: 1px solid rgba(255,255,255,.07);
      position: relative;
    }
    .acc-item:last-child { border-bottom: 1px solid rgba(255,255,255,.07); }
    .acc-item::before {
      content: '';
      position: absolute;
      left: -26px; top: 0; bottom: 0;
      width: 2px;
      background: var(--neon);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .35s cubic-bezier(.22,.68,0,1.15);
    }
    .acc-item.open::before { transform: scaleY(1); }

    .acc-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 0;
      cursor: pointer;
      background: none;
      border: none;
      width: 100%;
      text-align: left;
      gap: 20px;
    }
    .acc-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px;
      letter-spacing: .06em;
      color: var(--neon);
      line-height: 1;
      transition: color .28s;
    }
    .acc-item.open .acc-title, .acc-item:hover .acc-title { color: var(--white); }

    .acc-icon {
      width: 28px; height: 28px;
      border: 1px solid var(--neon);
      background: var(--neon);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: border-color .28s, background .28s, transform .38s cubic-bezier(.22,.68,0,1.15);
      position: relative;
    }
    .acc-icon::before, .acc-icon::after {
      content: '';
      position: absolute;
      background: var(--black);
      transition: background .28s, transform .38s cubic-bezier(.22,.68,0,1.15);
    }
    .acc-icon::before { width: 10px; height: 1.5px; }
    .acc-icon::after  { width: 1.5px; height: 10px; }
    .acc-item.open .acc-icon { border-color: var(--white); background: var(--white); transform: rotate(45deg); }
    .acc-item.open .acc-icon::before, .acc-item.open .acc-icon::after { background: var(--black); }

    .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.4,0,.2,1); }
    .acc-item.open .acc-body { grid-template-rows: 1fr; }
    .acc-body-inner { overflow: hidden; }
    .acc-text {
      padding: 0 0 26px;
      font-size: 14px;
      font-weight: 300;
      line-height: 1.72;
      color: rgba(255,255,255,.38);
      letter-spacing: .022em;
      max-width: 480px;
    }

    .abt-pillars {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid rgba(255,255,255,.07);
    }
    .pillar {
      padding: 44px 32px 0 0;
      border-right: 1px solid rgba(255,255,255,.05);
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .55s, transform .55s;
    }
    .pillar:nth-child(2) { padding-left: 32px; }
    .pillar:nth-child(3) { padding-left: 32px; border-right: none; padding-right: 0; }
    .pillar.on { opacity: 1; transform: none; }

    .pillar-bar {
      width: 0; height: 2px;
      background: var(--neon);
      margin-bottom: 18px;
      box-shadow: 0 0 8px rgba(170,255,0,.5);
      transition: width .9s cubic-bezier(.22,.68,0,1.2);
    }
    .pillar.on .pillar-bar { width: 44px; }

    .pillar-num {
      display: block;
      font-family: 'DM Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .24em;
      color: rgba(170,255,0,.55);
      margin-bottom: 14px;
    }
    .pillar-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(22px, 2.2vw, 32px);
      letter-spacing: .05em;
      line-height: 1.05;
      color: rgba(255,255,255,.6);
      transition: color .28s;
    }
    .pillar:hover .pillar-name { color: var(--white); }
    .pillar-sub {
      margin-top: 10px;
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: transparent;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: color .28s;
    }
    .pillar-sub::before {
      content: '';
      display: inline-block;
      width: 0; height: 1px;
      background: var(--neon);
      transition: width .3s;
    }
    .pillar:hover .pillar-sub { color: rgba(170,255,0,.55); }
    .pillar:hover .pillar-sub::before { width: 16px; }


    /* ═══════════════════════════════════════════════════════
       3. TALENTOS
    ═══════════════════════════════════════════════════════ */
    .section-talentos {
      width: 100%;
      padding: 90px 0 70px;
      position: relative;
      background:
        radial-gradient(ellipse 100% 55% at 50% 0%, rgba(170,255,0,.028), transparent),
        radial-gradient(ellipse 70% 80% at 2% 60%, rgba(0,25,8,.7), transparent),
        radial-gradient(ellipse 65% 70% at 98% 40%, rgba(0,8,28,.6), transparent),
        linear-gradient(180deg, #080e08 0%, #060606 25%, #060609 100%);
    }

    .section-talentos::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(170,255,0,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170,255,0,.025) 1px, transparent 1px);
      background-size: 56px 56px;
      pointer-events: none;
    }
    .section-talentos::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 50%, transparent, rgba(6,6,6,.5));
      pointer-events: none;
    }

    /* Header */
    .hdr { padding: 0 64px; margin-bottom: 48px; position: relative; z-index: 2; }

    .hdr-label {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--neon);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .55s, transform .55s;
    }
    .hdr-label.on { opacity: 1; transform: none; }
    .hdr-label::before { content: ''; width: 28px; height: 1px; background: var(--neon); flex-shrink: 0; }

    .hdr-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(36px, 4.5vw, 64px);
      line-height: .9;
      letter-spacing: .02em;
      overflow: hidden;
    }
    .hdr-title-line { display: block; overflow: hidden; }
    .hdr-title-line span {
      display: inline-block;
      opacity: 0;
      transform: translateY(105%);
      transition: opacity .5s, transform .5s;
    }
    .hdr-title-line span.on { opacity: 1; transform: none; }

    .hdr-bottom {
      margin-top: 24px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
    }
    .hdr-desc {
      max-width: 360px;
      font-size: 14px;
      font-weight: 300;
      line-height: 1.65;
      color: var(--muted);
      letter-spacing: .025em;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .6s .28s, transform .6s .28s;
    }
    .hdr-desc.on { opacity: 1; transform: none; }

    .hdr-stats {
      display: flex;
      gap: 36px;
      flex-shrink: 0;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .6s .38s, transform .6s .38s;
    }
    .hdr-stats.on { opacity: 1; transform: none; }
    .stat { text-align: right; }
    .stat-n {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 52px;
      color: var(--neon);
      line-height: 1;
      display: block;
      text-align: left;
    }
    .stat-l {
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.28);
    }

    /* Neon rule */
    .neon-rule {
      position: relative;
      height: 1px;
      margin: 0 64px 48px;
      background: linear-gradient(90deg, transparent 0%, var(--neon) 40%, var(--neon) 60%, transparent);
      opacity: 0;
      z-index: 2;
      transition: opacity .7s .45s;
    }
    .neon-rule.on { opacity: 1; }
    .neon-rule::after {
      content: '';
      position: absolute;
      top: -3px; left: 50%;
      transform: translateX(-50%);
      width: 50px; height: 7px;
      background: var(--neon);
      border-radius: 50%;
      filter: blur(7px);
      animation: glowPulse 2.2s ease-in-out infinite;
    }
    @keyframes glowPulse { 0%,100% { width:30px; opacity:.5; } 50% { width:80px; opacity:1; } }

    /* Cards track */
    .track-wrap { padding: 0 64px; position: relative; z-index: 2; overflow: visible; }
    .track {
      display: flex;
      gap: 14px;
      overflow-x: auto;
      overflow-y: visible;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding-top: 14px;
      padding-bottom: 10px;
      cursor: grab;
      -webkit-overflow-scrolling: touch;
    }
    .track:active { cursor: grabbing; }
    .track::-webkit-scrollbar { height: 2px; }
    .track::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 2px; }
    .track::-webkit-scrollbar-thumb { background: var(--neon); border-radius: 2px; }

    /* Player card */
    .card {
      flex: 0 0 255px;
      height: 390px;
      position: relative;
      scroll-snap-align: start;
      border-radius: 3px;
      overflow: hidden;
      background: var(--card);
      border: 1px solid var(--border);
      cursor: pointer;
      opacity: 0;
      transform: translateY(44px);
      transition: opacity .55s, transform .55s, border-color .28s, box-shadow .28s;
    }
    .card.on { opacity: 1; transform: translateY(0); }
    .card:hover {
      border-color: var(--neon);
      box-shadow: 0 0 28px var(--neon-glow), 0 0 64px rgba(170,255,0,.07);
      transform: translateY(-7px);
    }

    .card-bg { position: absolute; inset: 0; transition: transform .4s; }
    .card:nth-child(1) .card-bg { background: radial-gradient(ellipse at 50% 25%, #162216, var(--card)); }
    .card:nth-child(2) .card-bg { background: radial-gradient(ellipse at 50% 25%, #161622, var(--card)); }
    .card:nth-child(3) .card-bg { background: radial-gradient(ellipse at 50% 25%, #221616, var(--card)); }
    .card:nth-child(4) .card-bg { background: radial-gradient(ellipse at 50% 25%, #162020, var(--card)); }
    .card:nth-child(5) .card-bg { background: radial-gradient(ellipse at 50% 25%, #1e1e14, var(--card)); }
    .card:nth-child(6) .card-bg { background: radial-gradient(ellipse at 50% 25%, #141c14, var(--card)); }
    .card:nth-child(7) .card-bg { background: radial-gradient(ellipse at 50% 25%, #181420, var(--card)); }
    .card:hover .card-bg { transform: scale(1.04); }

    .card-num {
      position: absolute;
      top: -24px; right: -8px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 190px;
      line-height: 1;
      color: rgba(255,255,255,.03);
      pointer-events: none;
      z-index: 1;
      user-select: none;
      transition: color .4s;
    }
    .card:hover .card-num { color: rgba(170,255,0,.05); }

    .card-scan {
      position: absolute;
      left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--neon), transparent);
      opacity: 0;
      z-index: 9;
      top: 0;
      transition: opacity .15s;
      pointer-events: none;
    }
    .card:hover .card-scan { opacity: 1; animation: scan 1.6s linear infinite; }
    @keyframes scan { 0% { top:0%; opacity:1; } 85% { opacity:1; } 100% { top:100%; opacity:0; } }

    .card-pos {
      position: absolute;
      top: 13px; left: 13px;
      z-index: 5;
      font-family: 'DM Mono', monospace;
      font-size: 8.5px;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
      padding: 5px 9px;
      background: rgba(6,6,6,.75);
      border: 1px solid rgba(255,255,255,.1);
      color: rgba(255,255,255,.55);
      backdrop-filter: blur(12px);
      transition: background .28s, border-color .28s, color .28s;
    }
    .card:hover .card-pos { background: rgba(170,255,0,.1); border-color: var(--neon); color: var(--neon); }

    .card-age {
      position: absolute;
      top: 13px; right: 13px;
      z-index: 5;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 24px;
      line-height: 1;
      color: var(--neon);
      background: rgba(6,6,6,.75);
      border: 1px solid rgba(170,255,0,.2);
      padding: 6px 9px 5px;
      backdrop-filter: blur(12px);
      text-align: center;
    }
    .card-age em {
      display: block;
      font-family: 'DM Mono', monospace;
      font-style: normal;
      font-size: 7.5px;
      letter-spacing: .18em;
      color: rgba(255,255,255,.35);
      text-transform: uppercase;
      margin-top: 2px;
    }

    .card-fig {
      position: absolute;
      bottom: 75px; left: 0; right: 0; top: 0;
      z-index: 2;
      transition: transform .42s cubic-bezier(.25,.46,.45,.94);
      overflow: hidden;
      pointer-events: none;
    }
    .card-fig::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(6,6,6,.15) 0%, transparent 30%, transparent 55%, rgba(6,6,6,.75) 100%);
      pointer-events: none;
    }
    .card:hover .card-fig { transform: translateY(-8px) scale(1.03); }
    .card-fig img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 20%;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }

    .card-info {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 18px 16px 16px;
      background: linear-gradient(to top, rgba(6,6,6,.98) 65%, transparent);
      z-index: 5;
    }
    .card-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 25px;
      letter-spacing: .03em;
      line-height: 1;
      margin-bottom: 3px;
    }
    .card-team {
      font-family: 'DM Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .1em;
      color: var(--neon);
      text-transform: uppercase;
    }
    .card-extra {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      border-top: 1px solid transparent;
      transition: max-height .38s, opacity .28s, margin-top .28s, border-color .28s;
    }
    .card:hover .card-extra {
      max-height: 56px;
      opacity: 1;
      margin-top: 10px;
      border-color: rgba(170,255,0,.18);
      padding-top: 10px;
    }
    .card-extra-row {
      font-family: 'DM Mono', monospace;
      font-size: 9.5px;
      color: rgba(255,255,255,.38);
      letter-spacing: .08em;
      margin-bottom: 3px;
    }
    .card-extra-row b { color: rgba(255,255,255,.72); font-weight: 500; }
    .card-cta {
      font-family: 'DM Mono', monospace;
      font-size: 8.5px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--neon);
      margin-top: 8px;
      display: flex;
      align-items: center;
      gap: 5px;
      opacity: 0;
      transform: translateX(-6px);
      transition: opacity .28s .08s, transform .28s .08s;
    }
    .card-cta::after { content: '→'; font-size: 11px; }
    .card:hover .card-cta { opacity: 1; transform: none; }

    /* Bottom bar */
    .bottom-bar {
      margin: 48px 64px 0;
      padding: 22px 26px;
      border: 1px solid rgba(170,255,0,.15);
      background: rgba(170,255,0,.03);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      z-index: 2;
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .6s .3s, transform .6s .3s;
    }
    .bottom-bar.on { opacity: 1; transform: none; }
    .bottom-bar::before { content: ''; position: absolute; left:0; top:0; bottom:0; width:3px; background: var(--neon); }
    .bb-left { display: flex; align-items: center; gap: 18px; }
    .bb-big { font-family: 'Bebas Neue', sans-serif; font-size: 56px; color: var(--neon); line-height: 1; }
    .bb-text { line-height: 1.4; }
    .bb-text strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: .03em; }
    .bb-text span { font-size: 13px; font-weight: 300; color: var(--muted); }

    .btn-neon {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 28px;
      background: var(--neon);
      color: var(--black);
      font-family: 'Funnel Sans', sans-serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: background .2s, transform .2s;
    }
    .btn-neon::after { content: '→'; transition: transform .2s; }
    .btn-neon:hover { background: #c8ff33; transform: translateY(-1px); }
    .btn-neon:hover::after { transform: translateX(4px); }

    /* Track navigation arrows */
    .track-nav {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-shrink: 0;
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .6s .44s, transform .6s .44s;
    }
    .track-nav.on { opacity: 1; transform: none; }
    .track-nav-btn {
      width: 42px; height: 42px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.03);
      color: rgba(255,255,255,.45);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: border-color .22s, background .22s, color .22s, transform .18s;
    }
    .track-nav-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .track-nav-btn:hover { border-color: var(--neon); background: rgba(170,255,0,.08); color: var(--neon); }
    .track-nav-btn:active { transform: scale(.92); }
    .track-nav-btn:disabled { opacity: .25; pointer-events: none; }

    /* Scroll progress bar */
    .track-progress {
      height: 2px;
      background: rgba(255,255,255,.06);
      margin: 14px 64px 0;
      position: relative;
      z-index: 2;
    }
    .track-progress-fill {
      height: 100%;
      background: var(--neon);
      width: 0%;
      border-radius: 1px;
      box-shadow: 0 0 8px rgba(170,255,0,.45);
      transition: width .12s ease;
    }

    /* Scroll hint */
    .scroll-hint {
      margin-top: 14px;
      padding: 0 64px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      letter-spacing: .2em;
      color: rgba(255,255,255,.18);
      text-transform: uppercase;
      position: relative;
      z-index: 2;
    }
    .hint-arrows span {
      display: inline-block;
      width: 18px; height: 1px;
      background: rgba(255,255,255,.18);
      margin: 0 1px;
      vertical-align: middle;
    }
    .hint-arrows span:nth-child(1) { animation: arrowBlink 1.6s .1s ease-in-out infinite; }
    .hint-arrows span:nth-child(2) { animation: arrowBlink 1.6s .35s ease-in-out infinite; }
    .hint-arrows span:nth-child(3) { animation: arrowBlink 1.6s .6s ease-in-out infinite; }
    @keyframes arrowBlink { 0%,100% { opacity:.18; } 50% { opacity:1; background:var(--neon); } }


    /* ═══════════════════════════════════════════════════════
       MODAL
    ═══════════════════════════════════════════════════════ */
    .modal-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(6,6,6,.96);
      backdrop-filter: blur(14px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .32s;
    }
    .modal-overlay.open { opacity: 1; pointer-events: all; }

    .modal {
      position: relative;
      width: 100%;
      max-width: 900px;
      max-height: 92vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid rgba(170,255,0,.2);
      background: #0A0A0A;
      overflow: hidden;
      transform: scale(.93) translateY(18px);
      transition: transform .36s cubic-bezier(.22,.68,0,1.2);
    }
    .modal-overlay.open .modal { transform: scale(1) translateY(0); }
    .modal::before { content: ''; position: absolute; top:0; left:0; width:60px; height:3px; background:var(--neon); z-index:10; }
    .modal::after  { content: ''; position: absolute; top:0; left:0; width:3px; height:60px; background:var(--neon); z-index:10; }

    .modal-left {
      position: relative;
      min-height: 520px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
    }
    .modal-left-bg { position: absolute; inset: 0; transition: background .4s; }
    .modal-num-bg {
      position: absolute;
      bottom: -40px; left: -20px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 280px;
      line-height: 1;
      color: rgba(255,255,255,.03);
      pointer-events: none;
      user-select: none;
      transition: color .3s;
    }
    .modal-fig {
      position: absolute;
      inset: 0;
      z-index: 2;
      transition: opacity .18s;
    }
    .modal-fig img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 15%;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }
    @keyframes modalFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

    .modal-glow {
      position: absolute;
      bottom: 24px; left: 50%;
      transform: translateX(-50%);
      width: 160px; height: 20px;
      background: var(--neon);
      border-radius: 50%;
      filter: blur(22px);
      opacity: .3;
      z-index: 1;
      animation: floorPulse 3.5s ease-in-out infinite;
    }
    @keyframes floorPulse { 0%,100% { opacity:.3; width:120px; } 50% { opacity:.5; width:180px; } }

    .modal-right {
      padding: 48px 40px 40px 36px;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      border-left: 1px solid rgba(255,255,255,.06);
    }
    .modal-right::-webkit-scrollbar { width: 2px; }
    .modal-right::-webkit-scrollbar-thumb { background: var(--neon); }

    .modal-row {
      opacity: 0;
      transform: translateX(14px);
      transition: opacity .35s, transform .35s;
    }
    .modal-overlay.open .modal-row { opacity:1; transform:none; }
    .modal-overlay.open .modal-row:nth-child(1) { transition-delay:.10s; }
    .modal-overlay.open .modal-row:nth-child(2) { transition-delay:.17s; }
    .modal-overlay.open .modal-row:nth-child(3) { transition-delay:.22s; }
    .modal-overlay.open .modal-row:nth-child(4) { transition-delay:.27s; }
    .modal-overlay.open .modal-row:nth-child(5) { transition-delay:.32s; }
    .modal-overlay.open .modal-row:nth-child(6) { transition-delay:.37s; }
    .modal-overlay.open .modal-row:nth-child(7) { transition-delay:.42s; }
    .modal-overlay.open .modal-row:nth-child(8) { transition-delay:.47s; }

    .modal-label-sm { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--neon); margin-bottom:6px; }
    .modal-name { font-family:'Bebas Neue',sans-serif; font-size:clamp(38px,4vw,54px); line-height:.95; color:var(--white); margin-bottom:4px; }
    .modal-club { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.45); text-transform:uppercase; margin-bottom:24px; }
    .modal-divider { height:1px; background:rgba(255,255,255,.07); margin:18px 0; }
    .modal-divider.neon { background:rgba(170,255,0,.18); }
    .modal-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
    .modal-tag { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; padding:5px 10px; border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.55); background:rgba(255,255,255,.03); }
    .modal-tag.highlight { border-color:var(--neon); color:var(--neon); background:rgba(170,255,0,.06); }
    .modal-attrs { display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:20px; }
    .modal-attr-label { font-family:'DM Mono',monospace; font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:3px; }
    .modal-attr-value { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:600; letter-spacing:.04em; color:var(--white); }
    .modal-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.07); margin-bottom:20px; }
    .modal-stat-box { background:#0A0A0A; padding:14px 12px; text-align:center; }
    .modal-stat-n { font-family:'Bebas Neue',sans-serif; font-size:36px; color:var(--neon); line-height:1; display:block; }
    .modal-stat-l { font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.28); }
    .modal-bio { font-size:13px; font-weight:300; line-height:1.65; color:rgba(255,255,255,.42); letter-spacing:.02em; margin-bottom:24px; }
    .modal-cta {
      display:inline-flex; align-items:center; gap:10px;
      padding:13px 26px;
      background:var(--neon); color:var(--black);
      font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700;
      letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:none; cursor:pointer;
      align-self:flex-start; transition:background .2s, transform .2s;
    }
    .modal-cta::after { content:'→'; transition:transform .2s; }
    .modal-cta:hover { background:#c8ff33; transform:translateY(-1px); }
    .modal-cta:hover::after { transform:translateX(4px); }

    .modal-close {
      position:absolute; top:16px; right:16px; z-index:20;
      width:36px; height:36px;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.5); font-size:18px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:background .2s, border-color .2s, color .2s;
    }
    .modal-close:hover { background:rgba(170,255,0,.1); border-color:var(--neon); color:var(--neon); }

    .modal-nav { position:absolute; bottom:20px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:16px; z-index:20; }
    .modal-nav-btn {
      width:36px; height:36px;
      background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
      color:rgba(255,255,255,.5); font-size:16px; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      transition:background .2s, border-color .2s, color .2s;
    }
    .modal-nav-btn:hover { background:rgba(170,255,0,.1); border-color:var(--neon); color:var(--neon); }
    .modal-nav-counter { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.18em; color:rgba(255,255,255,.28); }
    .modal-nav-counter span { color:var(--neon); }


    /* ═══════════════════════════════════════════════════════
       ALIANZAS CON EMPRESAS
    ═══════════════════════════════════════════════════════ */
    #alianzas {
      position: relative;
      background: #060606;
    }

    /* ── Coming Soon block ── */
    .al-cs {
      display: grid;
      grid-template-columns: 50% 50%;
      min-height: 100vh;
      background: #060606;
      overflow: hidden;
    }

    /* LEFT — visual */
    .al-cs-visual {
      position: relative;
      overflow: hidden;
    }

    .al-cs-visual::after {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: 80px;
      background: linear-gradient(to right, transparent, #060606);
      pointer-events: none;
      z-index: 2;
    }

    .al-cs-visual img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }

    /* RIGHT — text */
    .al-cs-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px 80px 80px 0;
      opacity: 0;
      transform: translateX(28px);
      transition: opacity .75s ease, transform .75s ease;
    }

    .al-cs-content.on {
      opacity: 1;
      transform: none;
    }

    .al-cs-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(52px, 6.5vw, 96px);
      line-height: .9;
      letter-spacing: .01em;
      color: var(--white);
      margin: 10px 0 16px;
    }

    .al-cs-location {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(20px, 2.2vw, 30px);
      letter-spacing: .14em;
      color: var(--neon);
      margin-bottom: 24px;
    }

    .al-cs-content .al-tag {
      font-size: clamp(18px, 2vw, 26px);
      font-style: normal;
      letter-spacing: .18em;
      margin-bottom: 28px;
    }

    .al-cs-desc {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.68;
      color: rgba(255,255,255,.6);
      max-width: 380px;
      margin-bottom: 36px;
    }

    .al-cs-content .al-btn {
      align-self: flex-start;
    }

    /* ── Divider ── */
    .al-exp-hdr {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 24px 80px;
      background: #060606;
      border-top: 1px solid rgba(255,255,255,.05);
    }

    .al-exp-hdr-rule {
      flex: 1;
      height: 1px;
      background: rgba(255,255,255,.08);
    }

    .al-exp-hdr-label {
      font-family: 'DM Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: rgba(255,255,255,.28);
      white-space: nowrap;
    }

    /* ── Carousel wrapper ── */
    .al-carousel {
      position: relative;
      height: 100vh;
      min-height: 560px;
      overflow: hidden;
      background: #060606;
    }

    /* Track holds all slides side by side */
    .al-track {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform .85s cubic-bezier(.77,0,.18,1);
    }

    .al-slide {
      flex: 0 0 100%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
    }

    /* Left text-readable gradient overlay */
    .al-slide-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(105deg,
          rgba(6,6,6,.92)  0%,
          rgba(6,6,6,.72)  30%,
          rgba(6,6,6,.25)  58%,
          rgba(6,6,6,.0)   75%
        ),
        linear-gradient(to top, rgba(6,6,6,.6) 0%, transparent 35%),
        linear-gradient(to bottom, rgba(6,6,6,.45) 0%, transparent 18%);
      z-index: 1;
    }

    /* Giant watermark text background */
    .al-slide-wm {
      position: absolute;
      right: 4%;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(80px, 12vw, 170px);
      line-height: .9;
      letter-spacing: .04em;
      color: rgba(255,255,255,.05);
      text-align: right;
      pointer-events: none;
      user-select: none;
      z-index: 1;
    }

    /* Content */
    .al-slide-content {
      position: relative;
      z-index: 2;
      padding: 0 80px;
      max-width: 560px;
    }

    .al-tag {
      display: block;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      font-style: italic;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--neon);
      margin-bottom: 20px;
    }

    .al-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(36px, 4.5vw, 64px);
      line-height: .92;
      letter-spacing: .02em;
      color: #fff;
      margin-bottom: 20px;
    }

    .al-desc {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.68;
      color: rgba(255,255,255,.62);
      letter-spacing: .02em;
      max-width: 400px;
      margin-bottom: 36px;
    }

    .al-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 15px 32px;
      background: var(--neon);
      color: var(--black);
      font-family: 'Funnel Sans', sans-serif;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background .2s, transform .2s;
    }
    .al-btn::after { content: '→'; transition: transform .2s; }
    .al-btn:hover { background: #c8ff33; transform: translateY(-2px); }
    .al-btn:hover::after { transform: translateX(4px); }

    /* ── ARROWS ── */
    .al-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 48px; height: 48px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.6);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .2s, border-color .2s, color .2s, transform .2s;
    }
    .al-arrow svg { width: 20px; height: 20px; }
    .al-arrow:hover {
      background: rgba(170,255,0,.12);
      border-color: var(--neon);
      color: var(--neon);
    }
    .al-prev { left: 28px; }
    .al-next { right: 28px; }
    /* Subtle arrow press */
    .al-prev:active { transform: translateY(-50%) translateX(-2px); }
    .al-next:active { transform: translateY(-50%) translateX(2px); }

    /* ── DOTS ── */
    .al-dots {
      position: absolute;
      bottom: 36px;
      left: 80px;
      z-index: 10;
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .al-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,.25);
      cursor: pointer;
      transition: background .3s, transform .3s, width .3s;
      border: none;
    }
    .al-dot.active {
      background: var(--neon);
      width: 24px;
      border-radius: 3px;
      box-shadow: 0 0 8px rgba(170,255,0,.5);
    }

    /* ── PROGRESS BAR ── */
    .al-progress {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: rgba(255,255,255,.06);
      z-index: 10;
    }
    .al-progress-bar {
      height: 100%;
      background: var(--neon);
      width: 0%;
      transition: width linear;
      box-shadow: 0 0 8px rgba(170,255,0,.5);
    }

    /* ═══════════════════════════════════════════════════════
       MARQUEE STRIP
    ═══════════════════════════════════════════════════════ */
    .marquee-strip {
      overflow: hidden;
      background: var(--neon);
      padding: 13px 0;
      position: relative;
      z-index: 5;
    }
    .marquee-track {
      display: flex;
      gap: 0;
      width: max-content;
      animation: mq-scroll 28s linear infinite;
    }
    @keyframes mq-scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .mq-item {
      display: inline-flex;
      align-items: center;
      padding: 0 36px;
      gap: 0;
      flex-shrink: 0;
      color: #060606;
    }

    /* ═══════════════════════════════════════════════════════
       CTA
    ═══════════════════════════════════════════════════════ */
    #cta {
      position: relative;
      min-height: 58vh;
      background: #060606;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    .cta-bg-img {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .cta-bg-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 30%;
      display: block;
      filter: brightness(0.75) grayscale(0.15);
    }
    .cta-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(to right, rgba(6,6,6,.82) 0%, rgba(6,6,6,.58) 42%, rgba(6,6,6,.18) 100%),
        linear-gradient(to bottom, rgba(6,6,6,.35) 0%, transparent 18%, transparent 72%, rgba(6,6,6,.60) 100%),
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(170,255,0,.05), transparent);
      pointer-events: none;
    }
    .cta-inner {
      position: relative;
      z-index: 2;
      padding: 100px 80px;
      max-width: 680px;
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .9s ease, transform .9s ease;
    }
    .cta-inner.on { opacity: 1; transform: none; }
    .cta-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(36px, 4.5vw, 64px);
      line-height: .95;
      letter-spacing: .02em;
      color: #fff;
      margin-bottom: 20px;
    }
    .cta-title em {
      font-style: italic;
      color: var(--neon);
    }
    .cta-body {
      font-size: 15px;
      font-weight: 300;
      line-height: 1.7;
      color: rgba(255,255,255,.62);
      letter-spacing: .02em;
      max-width: 420px;
      margin-bottom: 28px;
    }
    .cta-question {
      font-family: 'Funnel Sans', sans-serif;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .06em;
      color: rgba(255,255,255,.88);
      margin-bottom: 28px;
    }
    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 44px;
      background: var(--neon);
      color: var(--black);
      font-family: 'Funnel Sans', sans-serif;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .22em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background .2s, transform .2s, box-shadow .2s;
    }
    .cta-btn:hover {
      background: #c8ff33;
      transform: translateY(-3px);
      box-shadow: 0 12px 40px rgba(170,255,0,.3);
    }

    /* ═══════════════════════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════════════════════ */
    #footer {
      background:
        radial-gradient(ellipse 90% 120% at 50% 100%, rgba(170,255,0,.04), transparent),
        radial-gradient(ellipse 60% 80% at 0% 0%, rgba(0,20,8,.5), transparent),
        radial-gradient(ellipse 50% 70% at 100% 0%, rgba(0,8,25,.4), transparent),
        linear-gradient(to bottom, #07090a 0%, #060606 40%);
      border-top: 1px solid var(--border);
      padding: 72px 80px 0;
      overflow: hidden;
      position: relative;
    }
    #footer::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .045;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 260px 260px;
      background-repeat: repeat;
    }
    #footer > * { position: relative; z-index: 1; }
    .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding-bottom: 56px;
    }
    .footer-col-title {
      font-family: 'Funnel Sans', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--neon);
      margin-bottom: 20px;
    }
    .footer-contact-row {
      display: flex;
      align-items: center;
      gap: 12px;
      color: rgba(255,255,255,.72);
      font-size: 15px;
      font-weight: 300;
      letter-spacing: .03em;
      text-decoration: none;
      transition: color .2s;
    }
    .footer-contact-row:hover { color: var(--white); }
    .footer-icon {
      width: 32px; height: 32px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: border-color .2s;
    }
    .footer-contact-row:hover .footer-icon { border-color: var(--neon); }
    .footer-icon svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
    .footer-divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,.1);
      margin: 0 0 0;
    }
    .footer-copy {
      text-align: center;
      padding: 18px 0;
      font-family: 'DM Mono', monospace;
      font-size: 11px;
      letter-spacing: .14em;
      color: rgba(255,255,255,.28);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .footer-wordmark {
      display: block;
      width: 100%;
      margin-top: 0;
      line-height: 1;
    }
    .footer-wordmark img {
      width: 100%;
      max-width: 100%;
      display: block;
      /* slight trim — the image has some padding */
      margin-bottom: -4px;
    }

    /* ─── SHARED KEYFRAMES ─────────────────────────────────── */
    /* ═══════════════════════════════════════════════════════
       ÁREAS DE NEGOCIO
    ═══════════════════════════════════════════════════════ */
    #areas {
      background:
        radial-gradient(ellipse 70% 80% at 5% 10%, rgba(170,255,0,.03), transparent),
        radial-gradient(ellipse 80% 60% at 95% 80%, rgba(0,15,40,.55), transparent),
        radial-gradient(ellipse 60% 50% at 60% 50%, rgba(10,18,10,.7), transparent),
        linear-gradient(145deg, #08100a 0%, #060608 55%, #060606 100%);
      padding: 100px 0 0;
      overflow: hidden;
      position: relative;
    }
    #areas::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .045;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 260px 260px;
      background-repeat: repeat;
    }
    #areas > * { position: relative; z-index: 1; }

    /* ── AREAS EDITORIAL HEADER ── */
    .areas-header {
      padding: 0 64px 0;
      position: relative;
      z-index: 1;
    }

    .areas-hdr-rule {
      height: 1px;
      background: linear-gradient(90deg, var(--neon) 0%, rgba(170,255,0,.25) 55%, transparent 100%);
      margin-bottom: 52px;
      opacity: 0;
      transform: scaleX(0);
      transform-origin: left;
      transition: opacity .4s, transform .9s cubic-bezier(.22,.68,0,1);
    }
    .areas-hdr-rule.on { opacity: 1; transform: scaleX(1); }

    .areas-hdr-grid {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 0 80px;
      align-items: end;
      margin-bottom: 56px;
    }

    /* Left column */
    .areas-hdr-label {
      font-family: 'DM Mono', monospace;
      font-size: 10px;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--neon);
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .5s, transform .5s;
    }
    .areas-hdr-label.on { opacity: 1; transform: none; }
    .areas-hdr-label::before { content: ''; width: 24px; height: 1px; background: var(--neon); flex-shrink: 0; }

    .areas-hdr-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(36px, 4.5vw, 64px);
      line-height: .91;
      letter-spacing: .02em;
    }
    .areas-hdr-title .ahl { display: block; overflow: hidden; }
    .areas-hdr-title .ahl span {
      display: block;
      opacity: 0;
      transform: translateY(108%);
      transition: opacity .55s, transform .6s cubic-bezier(.16,.84,.44,1);
    }
    .areas-hdr-title .ahl span.on { opacity: 1; transform: none; }
    .areas-hdr-title .ahl:nth-child(2) span { transition-delay: .1s; }
    .areas-hdr-title .ahl:nth-child(3) span { transition-delay: .2s; }
    .t-white   { color: var(--white); }
    .t-neon    { color: var(--neon); }
    .t-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.3); }

    /* Right column */
    .areas-hdr-right {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s .22s, transform .6s .22s;
    }
    .areas-hdr-right.on { opacity: 1; transform: none; }

    .areas-hdr-desc {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.72;
      color: rgba(255, 255, 255, 0.801);
      letter-spacing: .02em;
      margin-bottom: 16px;
    }
    .areas-hdr-desc b { font-weight: 600; color: rgba(255,255,255,.85); }

    .areas-hdr-stats {
      display: flex;
      gap: 44px;
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 28px;
      margin-top: 28px;
      justify-content: space-around;
    }
    .areas-hdr-stat-n {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 42px;
      color: var(--neon);
      line-height: 1;
      display: block;
      text-align:center;
    }
    .areas-hdr-stat-l {
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.28);
    }

    .areas-hdr-bottom-rule {
      height: 1px;
      background: rgba(255,255,255,.07);
      margin-bottom: 56px;
      position: relative;
      overflow: hidden;
    }
    .areas-hdr-bottom-rule::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, var(--neon), transparent);
      transition: left 1.1s .5s cubic-bezier(.22,.68,0,1);
    }
    .areas-hdr-bottom-rule.on::after { left: 100%; }

    /* GRID */
    .areas-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      padding: 0 64px 96px;
    }

    /* ── FLIP CARD ── */
    .acard {
      height: 520px;
      border-radius: 4px;
      perspective: 1200px;
      cursor: pointer;
      opacity: 0;
      transform: translateY(40px);
      transition: opacity .55s ease, transform .55s ease;
    }
    .acard.on { opacity: 1; transform: translateY(0); }

    .acard-inner {
      position: relative;
      width: 100%; height: 100%;
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      transition: transform .75s cubic-bezier(.4,0,.2,1);
    }
    .acard:hover .acard-inner,
    .acard.flipped .acard-inner {
      transform: rotateY(180deg);
    }

    .acard-front, .acard-back {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* FRONT */
    .acard-front {
      background: #0A0A0A;
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 32px;
    }

    /* Background photos per card */
    .acard-pattern {
      position: absolute;
      inset: 0;
      pointer-events: none;
      transition: transform .6s cubic-bezier(.25,.46,.45,.94), opacity .4s;
      background-size: cover;
      background-position: center;
    }
    .acard:hover .acard-pattern { transform: scale(1.06); opacity: .9; }

    .p1 {
      background:
        linear-gradient(to top, rgba(6,6,6,.95) 0%, rgba(6,6,6,.6) 45%, rgba(6,6,6,.25) 100%),
        url('../WEBSITE IMAGES/Fotos A One/representacion deportiva.jpg') center/cover;
    }
    .p2 {
      background:
        linear-gradient(to top, rgba(6,6,6,.95) 0%, rgba(6,6,6,.6) 45%, rgba(6,6,6,.25) 100%),
        url('../WEBSITE IMAGES/Fotos A One/Conexion con sponsors.jpeg') center/cover;
    }
    .p3 {
      background:
        linear-gradient(to top, rgba(6,6,6,.95) 0%, rgba(6,6,6,.6) 45%, rgba(6,6,6,.25) 100%),
        url('../WEBSITE IMAGES/Fotos A One/Organización de eventos.jpg') center/cover;
    }
    .p4 {
      background:
        linear-gradient(to top, rgba(6,6,6,.95) 0%, rgba(6,6,6,.6) 45%, rgba(6,6,6,.25) 100%),
        url('../WEBSITE IMAGES/centro-deportivo.jpeg') center/cover;
    }

    /* Big background number */
    .acard-num {
      position: absolute;
      top: -20px; right: -10px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 200px;
      line-height: 1;
      color: rgba(255,255,255,.03);
      user-select: none;
      transition: color .4s;
    }
    .acard:hover .acard-num { color: rgba(170,255,0,.05); }

    .acard-content { position: relative; z-index: 2; }

    .acard-tag {
      font-family: 'DM Mono', monospace;
      font-size: 9px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--neon);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .acard-tag::before {
      content: '';
      width: 20px; height: 1px;
      background: var(--neon);
    }

    .acard-title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(32px, 2.2vw, 36px);
      line-height: 1.02;
      letter-spacing: .03em;
      color: #fff;
      margin-bottom: 12px;
    }

    .acard-sub {
      font-size: 16px;
      font-weight: 300;
      line-height: 1.6;
      color: rgb(255, 255, 255);
      letter-spacing: .02em;
    }

    /* Hover hint that fades out once hovered */
    .acard-hover-hint {
      font-family: 'DM Mono', monospace;
      font-size: 8.5px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.2);
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 18px;
      transition: opacity .3s;
    }
    .acard-hover-hint::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--neon);
      animation: hintBlink 1.8s ease-in-out infinite;
    }
    @keyframes hintBlink { 0%,100%{opacity:.3;} 50%{opacity:1;} }
    .acard:hover .acard-hover-hint { opacity: 0; }

    /* BACK */
    .acard-back {
      transform: rotateY(180deg);
      padding: 32px;
      display: flex;
      flex-direction: column;
      border-radius: 4px;
    }
    .b1 { background: linear-gradient(160deg, #0f1f0f 0%, #060606 100%); border-top: 2px solid var(--neon); }
    .b2 { background: linear-gradient(160deg, #0d1020 0%, #060606 100%); border-top: 2px solid #4488ff; }
    .b3 { background: linear-gradient(160deg, #1c1400 0%, #060606 100%); border-top: 2px solid #ffaa00; }
    .b4 { background: linear-gradient(160deg, #081812 0%, #060606 100%); border-top: 2px solid #00ddaa; }

    .aback-num {
      position: absolute;
      top: -16px; right: -8px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 160px;
      line-height: 1;
      color: rgba(255,255,255,.03);
      user-select: none;
      pointer-events: none;
    }

    .aback-inner { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }

    .aback-label {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20px;
      letter-spacing: .06em;
      color: rgba(255,255,255,.5);
      margin-bottom: 20px;
    }

    .aback-stat-row {
      display: flex;
      gap: 0;
      margin-bottom: 18px;
    }
    .aback-stat {
      flex: 1;
      text-align: center;
      padding: 10px 6px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
      margin-right: -1px;
    }
    .aback-stat-n {
      display: block;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px;
      color: var(--neon);
      line-height: 1;
    }
    .b2 .aback-stat-n { color: #88aaff; }
    .b3 .aback-stat-n { color: #ffcc44; }
    .b4 .aback-stat-n { color: #44ddaa; }

    .aback-stat-l {
      display: block;
      font-family: 'DM Mono', monospace;
      font-size: 7.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.28);
      margin-top: 3px;
    }

    .aback-divider {
      height: 1px;
      background: rgba(255,255,255,.07);
      margin-bottom: 16px;
    }

    .aback-list {
      list-style: none;
      flex: 1;
      margin-bottom: 16px;
    }
    .aback-list li {
      font-size: 12.5px;
      font-weight: 300;
      line-height: 1.55;
      color: rgba(255,255,255,.55);
      letter-spacing: .018em;
      padding: 7px 0;
      border-bottom: 1px solid rgba(255,255,255,.04);
      padding-left: 14px;
      position: relative;
    }
    .aback-list li::before {
      content: '';
      position: absolute;
      left: 0; top: 50%;
      transform: translateY(-50%);
      width: 4px; height: 4px;
      background: var(--neon);
      border-radius: 50%;
    }
    .b2 .aback-list li::before { background: #88aaff; }
    .b3 .aback-list li::before { background: #ffcc44; }
    .b4 .aback-list li::before { background: #44ddaa; }

    .aback-trust {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px;
      background: rgba(170,255,0,.06);
      border: 1px solid rgba(170,255,0,.15);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.5;
      color: rgba(255,255,255,.7);
      letter-spacing: .01em;
      margin-top: auto;
    }
    .b2 .aback-trust { background: rgba(68,136,255,.06); border-color: rgba(68,136,255,.15); }
    .b3 .aback-trust { background: rgba(255,180,0,.06); border-color: rgba(255,180,0,.15); }
    .b4 .aback-trust { background: rgba(0,220,150,.06); border-color: rgba(0,220,150,.15); }

    .aback-trust-icon {
      font-size: 14px;
      color: var(--neon);
      flex-shrink: 0;
      margin-top: 1px;
      font-weight: 700;
    }
    .b2 .aback-trust-icon { color: #88aaff; }
    .b3 .aback-trust-icon { color: #ffcc44; }
    .b4 .aback-trust-icon { color: #44ddaa; }

    @keyframes fadeUp   { to { opacity:1; transform:translateY(0); } }
    @keyframes fadeDown { to { opacity:1; transform:translateY(0); } }
    @keyframes slideUp  { to { transform:translateY(0); opacity:1; } }

    /* ══════════════════════════════════════════════════════
       BREAKPOINT — TABLET  (≤ 1024px)
    ══════════════════════════════════════════════════════ */
    @media (max-width: 1024px) {

      /* NAV */
      .nav { padding: 24px 36px; }
      .nav-links { gap: 24px; }
      .nav-links a { font-size: 13px; }

      /* HERO */
      .hero-inner { padding: 0 36px; }
      .hero-stats { padding: 0 36px 24px; gap: 24px; }
      .hero-exp-panel { right: 16px; width: 40.5%; height: 199px; }

      /* ABOUT */
      .abt-inner { padding: 0 36px 0 56px; }
      .abt-cols { grid-template-columns: 1fr 1fr; gap: 0 48px; }

      /* AREAS */
      .areas-header { padding: 0 36px; }
      .areas-hdr-grid { grid-template-columns: 1fr 1fr; gap: 0 48px; }
      .areas-grid { grid-template-columns: repeat(2, 1fr); padding: 0 36px 72px; }
      .acard { height: 460px; }

      /* TALENTOS */
      .hdr { padding: 0 36px; }
      .track-wrap { padding: 0 36px; }

      /* ALIANZAS */
      .al-slide-content { padding: 0 56px; }
      .al-cs-visual { padding: 0; }
      .al-cs-content { padding: 60px 36px 60px 0; }
      .al-exp-hdr { padding: 20px 56px; }

      /* CTA */
      .cta-inner { padding: 80px 56px; }

      /* FOOTER */
      #footer { padding: 56px 36px 0; }

      /* MODAL */
      .modal { max-width: 780px; }
      .modal-right { padding: 40px 28px 32px; }
    }

    /* ══════════════════════════════════════════════════════
       BREAKPOINT — MOBILE  (≤ 640px)
    ══════════════════════════════════════════════════════ */
    @media (max-width: 640px) {

      /* GLOBAL SECTION PADDING */
      section,
      .areas-header, .areas-grid,
      .hdr, .track-wrap,
      .abt-inner,
      .al-slide-content,
      .cta-inner,
      #footer {
        padding-left: 20px;
        padding-right: 20px;
      }

      /* NAV */
      .nav {
        padding: 20px 20px;
        gap: 12px;
      }
      .nav-links { display: none; }
      .nav-lang { display: none; }
      .nav-burger { display: flex; }
      .nav-mobile-menu { display: block; }

      /* HERO */
      .hero-bg img { object-position: 39% 38%; }
      .hero-overlay {
        background:
          linear-gradient(105deg,
            rgba(6,6,6,.75) 0%,
            rgba(6,6,6,.55) 35%,
            rgba(6,6,6,.18) 60%,
            transparent 90%
          ),
          linear-gradient(to bottom, rgba(6,6,6,.30) 0%, transparent 18%, transparent 65%, rgba(6,6,6,.55) 100%);
      }
      .hero-content {
        width: 100%;
        justify-content: flex-end;
        background: none;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 0;
        padding-bottom: 28px;
      }
      .hero-inner {
        padding: 0 20px;
        padding-top: 96px;
        max-width: 70%;
      }
      .hero-kicker { font-size: 9px; margin-bottom: 12px; }
      .hero-title {
        font-size: 60px;
        line-height: .95;
        margin-bottom: 14px;
      }
      .hero-sub {
        font-size: 16px;
        line-height: 1.55;
        max-width: 100%;
        margin-bottom: 24px;
      }
      .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; }
      .btn-primary { padding: 14px 20px; font-size: 13px; justify-content: center; }
      .btn-ghost { padding: 10px 0; font-size: 13px; }
      .hero-right-deco { display: none; }
      .hero-stats { display: none; }
      .hero-scroll { display: none; }
      .hero-content { padding-bottom: 225px; }
      .hero-exp-panel {
        top: auto;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 180px;
      }
      .hero-exp-label { display: none; }
      .hero-exp-slides { border-radius: 0; }
      .hero-exp-card { border-radius: 0; }
      .hero-exp-card.active::after { display: none; }
      .hero-exp-card-name { font-size: 18px; }
      .hero-exp-card-body { padding: 10px 12px 50px; gap: 3px; }
      .hero-exp-card-desc { font-size: 12px; }
      .hero-exp-card-btn { width: 28px; height: 28px; bottom: 10px; right: 10px; }
      .hero-exp-card-btn svg { width: 11px; height: 11px; }
      .hero-exp-card-year { font-size: 9px; padding: 3px 8px; top: 10px; left: 12px; }
      .hero-exp-card-loc { font-size: 9px; top: 10px; right: 10px; padding: 3px 8px; }

      /* AREAS */
      .areas-hdr-grid { grid-template-columns: 1fr; gap: 28px 0; }
      .areas-hdr-title { font-size: 55px; }
      .areas-hdr-stats { gap: 20px; }
      .areas-grid {
        grid-template-columns: 1fr;
        padding: 0 20px 56px;
        gap: 24px;
      }
      .acard { height: 520px; }

      /* TALENTOS */
      .hdr { margin-bottom: 32px; }
      .hdr-title { font-size: 55px; }
      .hdr-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
      }
      .hdr-desc { max-width: 100%; text-align: left; }
      .hdr-stats { gap: 20px; }
      .hdr-label { text-align: left; }
      .stat { text-align: left; }
      .stat-n { text-align: left; }
      .track-wrap { padding: 0 20px; }
      .track { gap: 10px; }
      .card { flex: 0 0 220px; height: 340px; }

      /* ALIANZAS */
      #alianzas { padding: 0; }
      .al-cs {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        min-height: auto;
      }
      .al-cs-visual {
        padding: 0;
        min-height: 280px;
      }
      .al-cs-visual::after { display: none; }
      .al-cs-visual img { max-width: unset; }
      .al-cs-content {
        padding: 0 24px 60px;
        align-items: center;
        text-align: center;
        opacity: 1;
        transform: none;
      }
      .al-cs-content .al-btn { align-self: center; }
      .al-cs-title { font-size: 56px; }
      .al-cs-location { font-size: 20px; }
      .al-cs-desc { font-size: 15px; max-width: 100%; }
      .al-exp-hdr { padding: 18px 24px; }
      .al-slide { justify-content: center; }
      .al-slide-content { max-width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
      .al-title { font-size: 55px; line-height: 1; }
      .al-desc { font-size: 16px; }
      .al-slide-wm { font-size: clamp(60px, 18vw, 100px); right: -2%; }
      .al-arrow { width: 40px; height: 40px; }
      .al-prev { left: 16px; }
      .al-next { right: 16px; }
      .al-dots { left: 50%; transform: translateX(-50%); bottom: 28px; }

      /* ABOUT */
      .abt-spine { display: none; }
      .abt-headline { font-size: 48px; }
      .abt-cols {
        grid-template-columns: 1fr;
        gap: 40px 0;
        margin-bottom: 48px;
      }
      .abt-pillars {
        flex-direction: column;
        gap: 0;
      }
      .pillar { border-left: none; border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; }
      .pillar-bar { display: none; }

      /* CTA */
      .cta-inner { padding-top: 64px; padding-bottom: 64px; }
      .cta-title { font-size: 48px; }

      /* FOOTER */
      #footer { padding-top: 48px; padding-bottom: 0; }
      .footer-top { flex-direction: column; align-items: center; gap: 40px; }
      .footer-cols { flex-direction: column; gap: 28px; }
      .footer-col { text-align: center; }
      .footer-col[style] { text-align: center !important; }
      .footer-contact-row { justify-content: center; }
      .footer-col-title { text-align: center; }

      /* MODAL */
      .modal {
        display: flex;
        flex-direction: column;
        max-height: 92vh;
        max-width: calc(100vw - 24px);
        border-radius: 4px;
      }
      .modal-left { min-height: 280px; flex: 0 0 280px; width: 100%; }
      .modal-right {
        padding: 24px 20px 20px;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.06);
        overflow-y: auto;
        flex: 1;
      }
      .modal-stats { grid-template-columns: repeat(3, 1fr); }
      .modal-stat-n { font-size: 26px; }
      .modal-name { font-size: clamp(28px, 8vw, 40px); }
      .modal-close { top: 12px; right: 12px; }
    }

    /* ── TOUCH DEVICES: replace 3D flip with fade ── */
    @media (hover: none) {
      .acard-inner {
        transform-style: flat;
        -webkit-transform-style: flat;
      }
      .acard:hover .acard-inner,
      .acard.flipped .acard-inner {
        transform: none;
      }
      .acard-back {
        transform: none;
        opacity: 0;
        transition: opacity .35s ease;
      }
      .acard-front {
        transition: opacity .35s ease;
      }
      .acard.flipped .acard-front {
        opacity: 0;
      }
      .acard.flipped .acard-back {
        opacity: 1;
      }
    }