/* ===== Tokens ===== */
  :root{
    --navy-900:#041E42;
    --navy-800:#0a2a55;
    --navy-700:#12386b;
    --navy-600:#1a4682;
    --ink:#0b1322;
    --paper:#ffffff;
    --paper-2:#f4f6fa;
    --paper-3:#e8ecf4;
    --line:rgba(4,30,66,0.10);
    --line-strong:rgba(4,30,66,0.18);
    --muted:#54607a;
    --accent:#7cb6ff;       /* azul claro tech */
    --accent-2:#b9d7ff;
    --metallic:linear-gradient(135deg,#dfe6f2 0%,#f6f8fc 50%,#c9d3e6 100%);
    --shadow-card: 0 1px 0 rgba(4,30,66,0.04), 0 24px 48px -24px rgba(4,30,66,0.18);
    --shadow-soft: 0 8px 24px -12px rgba(4,30,66,0.18);
    --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:28px;
    --pad: clamp(20px, 4vw, 56px);
    --maxw: 1280px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  h1,h2,h3,h4{font-family:'Inter Tight','Inter',sans-serif;letter-spacing:-0.02em;color:var(--navy-900);margin:0;text-wrap:balance}
  h1{font-weight:800; font-size:clamp(40px,6vw,84px); line-height:1.02}
  h2{font-weight:700; font-size:clamp(30px,3.6vw,52px); line-height:1.08}
  h3{font-weight:700; font-size:clamp(20px,1.6vw,24px); line-height:1.2}
  p{margin:0;color:var(--muted)}
  a{color:inherit;text-decoration:none}
  .mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase}
  .container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
  .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--navy-700);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase}
  .eyebrow::before{content:"";width:24px;height:1px;background:var(--navy-700)}
  .hero-eyebrow{color:#bcd5ff}
  .hero-eyebrow::before{background:#bcd5ff}
  /* Reveal animation */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
  .reveal.on{opacity:1;transform:none}
  .reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}.reveal.d5{transition-delay:.3s}

  /* ===== Buttons ===== */
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 22px;border-radius:999px;font-weight:600;font-size:15px;
    transition:transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    cursor:pointer;border:1px solid transparent; white-space:nowrap;
  }
  .btn .arr{transition:transform .25s ease}
  .btn:hover .arr{transform:translateX(4px)}
  .btn-primary{background:var(--navy-900);color:#fff;box-shadow:0 10px 24px -10px rgba(4,30,66,0.55)}
  .btn-primary:hover{background:var(--navy-700);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--navy-900);border-color:var(--line-strong)}
  .btn-ghost:hover{background:var(--paper-2);border-color:var(--navy-900)}
  .btn-on-dark-primary{background:#fff;color:var(--navy-900)}
  .btn-on-dark-primary:hover{background:var(--accent-2)}
  .btn-on-dark-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.35)}
  .btn-on-dark-ghost:hover{border-color:#fff;background:rgba(255,255,255,0.06)}

  /* ===== Nav ===== */
  .nav{
    position:sticky;top:0;z-index:50;
    backdrop-filter:saturate(140%) blur(14px);
    background:rgba(255,255,255,0.78);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand-mark{width:36px;height:36px;display:grid;place-items:center}
  .brand-mark svg{width:100%;height:100%}
  .brand-name{font-family:'Inter Tight',sans-serif;font-weight:700;color:var(--navy-900);font-size:18px;letter-spacing:-.01em}
  .brand-name span{color:var(--muted);font-weight:500}
  .nav-links{display:flex;gap:28px;align-items:center}
  .nav-links a{font-size:14px;color:var(--ink);opacity:.78}
  .nav-links a:hover{opacity:1;color:var(--navy-900)}
  .nav-cta{display:flex;gap:10px;align-items:center}
  @media (max-width:880px){.nav-links{display:none}}

  /* ===== Hero ===== */
  .hero{
    position:relative;overflow:hidden;
    background:
      radial-gradient(80% 60% at 80% 0%, rgba(124,182,255,0.18) 0%, transparent 60%),
      radial-gradient(60% 50% at 0% 100%, rgba(124,182,255,0.10) 0%, transparent 60%),
      linear-gradient(180deg,#03142e 0%, #041E42 55%, #061a3a 100%);
    color:#fff;
    padding-top:80px;padding-bottom:120px;
  }
  .hero .grid-bg{
    position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image:radial-gradient(ellipse at 50% 40%, #000 40%, transparent 80%);
  }
  .hero .nodes{position:absolute;inset:0;pointer-events:none}
  .hero h1{color:#fff}
  .hero h1 .accent{
    background:linear-gradient(135deg,#bcd5ff 0%,#7cb6ff 50%,#ffffff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-sub{color:rgba(255,255,255,0.74);font-size:clamp(16px,1.3vw,19px);max-width:60ch;margin-top:18px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
  .hero-meta{display:flex;gap:32px;flex-wrap:wrap;margin-top:48px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.10)}
  .hero-meta .stat{display:flex;flex-direction:column;gap:4px}
  .hero-meta .num{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:34px;color:#fff;letter-spacing:-.02em}
  .hero-meta .lab{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.55)}

  .hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
  @media (max-width:980px){.hero-grid{grid-template-columns:1fr}}

  /* Hero shield composition */
  .shield-wrap{position:relative;display:grid;place-items:center;min-height:480px}
  .shield-glow{
    position:absolute;width:560px;height:560px;border-radius:50%;
    background:radial-gradient(circle,#7cb6ff33 0%, transparent 60%);filter:blur(8px);
  }
  .shield-card{
    position:relative;width:min(420px,100%);aspect-ratio:1/1;
    border-radius:32px;
    background:linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 60%);
    border:1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(14px) saturate(150%);
    display:grid;place-items:center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 40px 80px -30px rgba(0,0,0,0.6);
    overflow:hidden;
  }
  .shield-card::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(60% 60% at 100% 0%, rgba(124,182,255,0.18), transparent 60%),
      radial-gradient(60% 60% at 0% 100%, rgba(124,182,255,0.10), transparent 60%);
  }
  .shield-card .corner{position:absolute;width:18px;height:18px;border:1px solid rgba(255,255,255,0.35)}
  .shield-card .c1{top:14px;left:14px;border-right:none;border-bottom:none}
  .shield-card .c2{top:14px;right:14px;border-left:none;border-bottom:none}
  .shield-card .c3{bottom:14px;left:14px;border-right:none;border-top:none}
  .shield-card .c4{bottom:14px;right:14px;border-left:none;border-top:none}
  .shield-img{position:relative;width:64%;height:64%;display:grid;place-items:center;filter: brightness(0) invert(1) drop-shadow(0 8px 30px rgba(124,182,255,0.4));}
  .shield-img img{width:100%;height:100%;object-fit:contain}
  .shield-tag{
    position:absolute;left:24px;bottom:24px;display:flex;gap:8px;align-items:center;
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.7)
  }
  .shield-dot{width:8px;height:8px;border-radius:50%;background:#7cb6ff;box-shadow:0 0 0 4px rgba(124,182,255,0.18); animation: pulse 2s infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(124,182,255,0.18)}50%{box-shadow:0 0 0 8px rgba(124,182,255,0.05)}}

  /* Floating company chips around shield */
  .orbit{position:absolute;inset:0;pointer-events:none}
  .chip{
    position:absolute;display:flex;align-items:center;gap:10px;
    padding:10px 14px;border-radius:999px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    color:#fff;font-size:13px;font-weight:500;
    box-shadow: 0 10px 24px -12px rgba(0,0,0,0.5);
    animation: float 6s ease-in-out infinite;
  }
  .chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
  .chip.c-a{top:8%;left:-6%;animation-delay:0s}
  .chip.c-b{top:34%;right:-12%;animation-delay:1.2s}
  .chip.c-c{bottom:14%;left:-10%;animation-delay:2s}
  .chip.c-d{bottom:0%;right:-4%;animation-delay:3s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @media (max-width:520px){.chip.c-a,.chip.c-b,.chip.c-c,.chip.c-d{display:none}}

  /* ===== Logos marquee ===== */
  .strip{
    background:#06173a;color:#fff;border-top:1px solid rgba(255,255,255,0.06);
    border-bottom:1px solid rgba(255,255,255,0.06);
    overflow:hidden;
  }
  .strip-inner{display:flex;align-items:center;gap:64px;padding:28px 0;animation: marquee 40s linear infinite}
  .strip-inner img{height:36px;width:auto;opacity:0.8;filter:brightness(0) invert(1);flex-shrink:0}
  .strip-inner img.strip-shield{height:48px}
  .strip-inner .pill{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.5);flex-shrink:0}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ===== About ===== */
  .section{padding:clamp(80px,9vw,140px) 0}
  .section-head{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:end;margin-bottom:64px}
  @media (max-width:880px){.section-head{grid-template-columns:1fr;gap:24px}}
  .section-head .lead{font-size:clamp(18px,1.4vw,21px);color:var(--ink);max-width:60ch;line-height:1.5}
  .section-head .lead strong{color:var(--navy-900);font-weight:600}

  .values-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
  @media (max-width:1100px){.values-grid{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:640px){.values-grid{grid-template-columns:repeat(2,1fr)}}
  .value{padding:32px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s ease}
  .value:hover{background:var(--paper-2)}
  .value .num{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:11px;letter-spacing:.14em}
  .value h4{font-family:'Inter Tight',sans-serif;font-weight:600;color:var(--navy-900);font-size:18px;margin-top:16px;letter-spacing:-.01em}
  .value p{font-size:13.5px;margin-top:8px;line-height:1.5}
  .value .ico{width:28px;height:28px;color:var(--navy-900);margin-bottom:0}

  /* ===== Companies ===== */
  .cards{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
  .card{
    grid-column: span 4;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
    padding:28px;display:flex;flex-direction:column;gap:18px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    position:relative;overflow:hidden;
    min-height:380px;
  }
  .card::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(120% 80% at 100% 0%, var(--card-tint, rgba(124,182,255,0.10)) 0%, transparent 55%);
    opacity:0;transition:opacity .35s ease;
  }
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--line-strong)}
  .card:hover::after{opacity:1}
  .card .top{display:flex;align-items:center;justify-content:space-between}
  .card .logo-box{
    height:70px;display:flex;align-items:center;
  }
  .card .logo-box img{max-height:54px;max-width:200px;width:auto;height:auto;object-fit:contain}
  .card .sector{
    font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--navy-700);background:var(--paper-2);padding:6px 10px;border-radius:6px;
    border:1px solid var(--line);
  }
  .card h3{margin-top:4px}
  .card p.desc{font-size:14.5px;color:var(--muted);line-height:1.55;flex:1}
  .card .visit{
    display:inline-flex;align-items:center;gap:8px;color:var(--navy-900);font-weight:600;font-size:14px;
    padding-top:14px;border-top:1px solid var(--line); margin-top:auto;
  }
  .card .visit .arr{transition:transform .25s ease}
  .card:hover .visit .arr{transform:translateX(4px)}
  .card .url{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:11px;letter-spacing:.05em}

  /* big featured card */
  .card.feat{grid-column: span 8; min-height:420px; background:linear-gradient(135deg,#041E42 0%,#0a2a55 100%); color:#fff; border:none}
  .card.feat h3, .card.feat .visit{color:#fff}
  .card.feat p.desc{color:rgba(255,255,255,0.74)}
  .card.feat .sector{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.85);border-color:rgba(255,255,255,0.12)}
  .card.feat .visit{border-top-color:rgba(255,255,255,0.16)}
  .card.feat .logo-box img{filter:brightness(0) invert(1)}
  .card.feat::before{
    content:"";position:absolute;inset:auto -20% -40% auto;width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle, rgba(124,182,255,0.22) 0%, transparent 60%);
    pointer-events:none;
  }

  @media (max-width:1100px){
    .card{grid-column: span 6}
    .card.feat{grid-column: span 12}
  }
  @media (max-width:680px){
    .card,.card.feat{grid-column: span 12}
  }

  /* ===== Ecosystem diagram ===== */
  .ecosystem{
    background:linear-gradient(180deg,#03142e 0%, #041E42 100%);
    color:#fff;
    position:relative;overflow:hidden;
  }
  .ecosystem .grid-bg{
    position:absolute;inset:0;pointer-events:none;opacity:.4;
    background-image:
      linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
  }
  .ecosystem h2{color:#fff}
  .ecosystem .lead{color:rgba(255,255,255,0.74);font-size:18px;max-width:60ch}
  .diagram{
    position:relative;margin-top:80px;height:640px;
  }
  @media (max-width:880px){.diagram{height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:48px}}
  .diagram svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  @media (max-width:880px){.diagram svg.lines{display:none}}
  .center-node{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:200px;height:200px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0.04));
    border:1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(12px);
    display:grid;place-items:center;text-align:center;
    box-shadow: 0 0 0 12px rgba(124,182,255,0.06), 0 0 0 30px rgba(124,182,255,0.03), 0 30px 80px -20px rgba(0,0,0,0.5);
    z-index:2;
  }
  @media (max-width:880px){.center-node{position:relative;top:auto;left:auto;transform:none;grid-column:1/-1;width:100%;border-radius:var(--r-lg);height:auto;padding:32px;display:grid}}
  .center-node .small{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
  .center-node .big{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:24px;margin-top:6px}
  .center-logo{width:120px;height:120px;display:grid;place-items:center}
  .center-logo img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1) drop-shadow(0 4px 16px rgba(124,182,255,0.35))}
  .ico-logo{background:#fff !important;padding:6px}
  .ico-logo img{width:100%;height:100%;object-fit:contain}
  .node{
    position:absolute;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    border-radius:14px;padding:14px 16px;
    display:flex;align-items:center;gap:12px;min-width:200px;
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
    cursor:default;
  }
  .node:hover{background:rgba(255,255,255,0.10);border-color:rgba(124,182,255,0.4);transform:translateY(-2px)}
  .node .ico{width:36px;height:36px;border-radius:8px;background:rgba(124,182,255,0.14);display:grid;place-items:center;color:#bcd5ff;flex-shrink:0}
  .node .ico svg{width:18px;height:18px}
  .node .nm{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:14px;color:#fff;letter-spacing:-.01em;line-height:1.2}
  .node .sec{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:4px;line-height:1.2}
  @media (max-width:880px){.node{position:relative;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;width:auto;min-width:0}}
  .n1{top:4%;left:18%}
  .n2{top:4%;right:18%}
  .n3{top:42%;left:0%}
  .n4{top:42%;right:0%}
  .n5{bottom:4%;left:18%}
  .n6{bottom:4%;right:18%}
  .n7{top:50%;left:50%;transform:translate(-50%, 240px); margin-top:0}
  @media (max-width:880px){.n7{transform:none}}

  /* ===== Differentiators ===== */
  .diffs{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
  @media (max-width:1100px){.diffs{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:640px){.diffs{grid-template-columns:repeat(2,1fr)}}
  .diff{
    background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
    padding:24px;display:flex;flex-direction:column;gap:14px;min-height:200px;
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .diff:hover{transform:translateY(-3px);border-color:var(--navy-900);box-shadow:var(--shadow-soft)}
  .diff .ico{width:38px;height:38px;border-radius:10px;background:var(--paper-2);display:grid;place-items:center;color:var(--navy-900)}
  .diff h4{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:16.5px;color:var(--navy-900);margin:0}
  .diff p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0}

  /* ===== CTA ===== */
  .cta{
    position:relative;overflow:hidden;
    background:linear-gradient(135deg, #041E42 0%, #0a2a55 60%, #102f63 100%);
    color:#fff;border-radius:32px;padding:clamp(48px,7vw,96px);
    margin: 0 var(--pad);
  }
  .cta::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(60% 60% at 100% 0%, rgba(124,182,255,0.18), transparent 60%),
      radial-gradient(60% 60% at 0% 100%, rgba(124,182,255,0.10), transparent 60%);
    pointer-events:none;
  }
  .cta-grid{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
  @media (max-width:880px){.cta-grid{grid-template-columns:1fr}}
  .cta h2{color:#fff;font-size:clamp(32px,4vw,56px)}
  .cta p{color:rgba(255,255,255,0.74);font-size:18px;max-width:50ch;margin-top:18px}
  .cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
  @media (max-width:880px){.cta-actions{justify-content:flex-start}}

  /* ===== Footer ===== */
  footer{background:#020e22;color:rgba(255,255,255,0.7);padding:80px 0 32px;margin-top:120px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
  @media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
  @media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
  .foot h5{font-family:'Inter Tight',sans-serif;color:#fff;font-size:14px;font-weight:600;margin:0 0 16px;letter-spacing:.01em}
  .foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .foot a{color:rgba(255,255,255,0.7);font-size:14px;transition:color .2s}
  .foot a:hover{color:#fff}
  .foot p{font-size:14px;color:rgba(255,255,255,0.6);max-width:36ch;margin-top:14px}
  .foot-brand{display:flex;align-items:center;gap:12px}
  .foot-brand .nm{font-family:'Inter Tight',sans-serif;color:#fff;font-weight:700;font-size:18px}
  .foot-bottom{
    margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.08);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
    font-size:12.5px;color:rgba(255,255,255,0.5)
  }
  .foot-bottom .legals{display:flex;gap:22px;flex-wrap:wrap}

  /* small helpers */
  .row{display:flex;align-items:center;gap:12px}
  .vh{visibility:hidden}