/* GuerraTech — tema visual (herdado da landing de 05/09; tokens em :root) */

  :root {
    --bg: #020814;
    --panel: #06101f;
    --panel2: #050b16;
    --border: #163a74;
    --text: #e6edf5;
    --muted: #8296ab;
    --accent: #2ea3ff;
    --ok: #2fd579;
    --warn: #ffb02e;
    --bad: #ff5468;
    --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  html, body { margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection { background: rgba(46,163,255,.35); }

  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }

  h2.secao {
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem);
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0 0 10px;
    font-weight: 800;
    text-wrap: balance;
  }
  .kicker {
    font-size: .78rem; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase; color: var(--accent);
    margin: 0 0 10px; font-family: var(--mono);
  }
  .lede { color: var(--muted); font-size: clamp(1rem, .95rem + .4vw, 1.15rem); max-width: 62ch; margin: 0 0 34px; }
  section { padding: 72px 0; }
  section + section { border-top: 1px solid rgba(22,58,116,.45); }

  /* ---------- HERO ---------- */
  .hero {
    position: relative;
    overflow: hidden;
    min-height: 92vh;
    min-height: 92dvh;
    display: flex;
    align-items: center;
    background:
      radial-gradient(1400px 700px at 70% -10%, #12202f 0%, transparent 60%),
      radial-gradient(900px 500px at 15% 110%, #0a1a33 0%, transparent 55%),
      var(--bg);
    border-bottom: none;
    padding: 80px 0 90px;
  }
  .hud-scanline {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(46,163,255,.65), transparent);
    animation: scan 5s linear infinite;
    opacity: .7;
    pointer-events: none;
    z-index: 2;
  }
  @keyframes scan {
    0%   { top: 0;    opacity: .8; }
    100% { top: 100%; opacity: 0; }
  }
  .hero-base-line {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(46,163,255,.75), rgba(25,239,122,.45), transparent);
    box-shadow: 0 0 18px rgba(46,163,255,.5);
    pointer-events: none;
  }
  .hero-grid {
    position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image:
      linear-gradient(rgba(22,58,116,.22) 1px, transparent 1px),
      linear-gradient(90deg, rgba(22,58,116,.22) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(900px 520px at 50% 30%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(900px 520px at 50% 30%, #000 0%, transparent 75%);
  }
  .hero-inner { position: relative; z-index: 1; width: 100%; text-align: center; }
  .marca { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 34px; }
  .marca img { height: 52px; display: block; filter: drop-shadow(0 0 14px rgba(46,163,255,.35)); }
  .wordmark { font-size: 1.35rem; font-weight: 800; letter-spacing: .16em; margin: 0; }
  .wordmark .guerra { color: var(--text); }
  .wordmark .tech { color: var(--accent); }
  .hero h1 {
    font-size: clamp(2rem, 1.2rem + 4.5vw, 3.9rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: 0 auto 18px;
    max-width: 20ch;
    font-weight: 800;
  }
  .hero h1 .nome { color: var(--accent); }
  .hero .sub {
    color: var(--muted);
    font-size: clamp(1.02rem, .95rem + .6vw, 1.3rem);
    max-width: 46ch;
    margin: 0 auto 12px;
  }
  .hero .sub b { color: var(--text); font-weight: 600; }
  .hero .formula {
    font-family: var(--mono);
    font-size: clamp(.78rem, .7rem + .5vw, .95rem);
    color: var(--accent);
    margin: 0 auto 38px;
    letter-spacing: .02em;
  }
  .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px; padding: 0 26px;
    border-radius: 12px;
    font-size: 1rem; font-weight: 700; letter-spacing: .03em;
    text-decoration: none;
    transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
  }
  .botao.primario {
    background: var(--accent); color: #04121f;
    box-shadow: 0 6px 30px rgba(46,163,255,.35);
  }
  .botao.primario:hover { filter: brightness(1.1); transform: translateY(-1px); }
  .hero .selo {
    margin: 44px auto 0; display: inline-flex; align-items: center; gap: 8px;
    font-size: .78rem; color: var(--muted); font-family: var(--mono);
    border: 1px solid rgba(22,58,116,.7); border-radius: 999px; padding: 6px 14px;
    background: rgba(6,16,31,.5);
  }
  .hero .selo .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px rgba(47,213,121,.8); flex: none; }

  /* ---------- CARTÕES ---------- */
  .grade { display: grid; gap: 16px; }
  .cartao {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  .cartao:hover {
    border-color: rgba(46,163,255,.55);
    box-shadow: 0 10px 34px rgba(2,8,20,.55), 0 0 0 1px rgba(46,163,255,.12);
  }
  .cartao h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; }
  .cartao p { margin: 0; color: var(--muted); font-size: .92rem; }
  .cartao .icone { margin-bottom: 14px; }
  .icone {
    width: 42px; height: 42px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(46,163,255,.1); border: 1px solid rgba(46,163,255,.3);
    color: var(--accent); flex: none;
  }
  .icone svg { width: 22px; height: 22px; display: block; }

  @media (min-width: 720px) {
    .grade.tres { grid-template-columns: repeat(3, 1fr); }
    .grade.quatro { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1000px) {
    .grade.quatro { grid-template-columns: repeat(4, 1fr); }
  }

  /* ---------- O FILME (6 passos) ---------- */
  .filme { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 26px; }
  .filme::before {
    content: "";
    position: absolute; left: 20px; top: 26px; bottom: 26px;
    width: 2px;
    background: linear-gradient(180deg, rgba(46,163,255,.6), rgba(22,58,116,.7) 60%, rgba(47,213,121,.55));
  }
  .passo { position: relative; padding-left: 66px; }
  .passo .no {
    position: absolute; left: 0; top: 0;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--panel2);
    border: 1px solid var(--border);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 5px var(--bg), 0 0 16px rgba(46,163,255,.25);
  }
  .passo .no svg { width: 20px; height: 20px; display: block; }
  .passo:last-child .no { color: var(--ok); border-color: rgba(47,213,121,.5); box-shadow: 0 0 0 5px var(--bg), 0 0 16px rgba(47,213,121,.3); }
  .passo .num { font-family: var(--mono); font-size: .72rem; color: var(--accent); letter-spacing: .14em; }
  .passo h3 { margin: 2px 0 4px; font-size: 1.08rem; font-weight: 700; }
  .passo p { margin: 0; color: var(--muted); font-size: .92rem; max-width: 60ch; }
  .passo p code { font-size: .82em; }

  @media (min-width: 900px) {
    .filme { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; }
    .filme::before {
      left: 21px; right: 21px; top: 21px; bottom: auto; width: auto; height: 2px;
      background: linear-gradient(90deg, rgba(46,163,255,.6), rgba(22,58,116,.7));
    }
    .filme::after {
      content: "";
      position: absolute; left: 21px; right: 21px; width: auto; height: 2px;
      top: calc(50% + 22px);
      background: linear-gradient(90deg, rgba(22,58,116,.7), rgba(47,213,121,.55));
    }
    .passo { padding-left: 0; padding-top: 60px; }
    .passo .no { top: 0; left: 0; }
  }

  .fecho {
    margin: 54px auto 0;
    text-align: center;
    font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
    font-weight: 700;
    max-width: 30ch;
    line-height: 1.4;
  }
  .fecho .destaque { color: var(--accent); }

  /* ---------- TRILHOS ---------- */
  .trilho {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 14px; padding: 18px 20px;
    transition: border-color .25s ease;
  }
  .trilho:hover { border-color: rgba(46,163,255,.5); }
  .trilho .corpo { min-width: 0; }
  .trilho h3 { margin: 0 0 2px; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .trilho p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
  .pill {
    padding: 2px 10px; border-radius: 999px; font-size: .68rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; font-family: var(--mono); white-space: nowrap;
  }
  .pill.ar { background: rgba(47,213,121,.12); color: var(--ok); border: 1px solid rgba(47,213,121,.4); }
  .pill.exp { background: rgba(255,176,46,.1); color: var(--warn); border: 1px solid rgba(255,176,46,.4); }
  .pill.piloto { background: rgba(46,163,255,.12); color: var(--accent); border: 1px solid rgba(46,163,255,.4); }
  @media (min-width: 860px) {
    .grade.trilhos { grid-template-columns: repeat(2, 1fr); }
    .trilho.largo { grid-column: 1 / -1; }
  }
  .janela {
    margin-top: 26px;
    border: 1px solid rgba(46,163,255,.4);
    background: linear-gradient(180deg, rgba(46,163,255,.08), rgba(6,16,31,.6));
    border-radius: 14px;
    padding: 24px 26px;
    font-size: clamp(1rem, .95rem + .5vw, 1.2rem);
    font-weight: 600;
    line-height: 1.55;
    box-shadow: 0 12px 36px rgba(2,8,20,.45);
  }
  .janela b { color: var(--accent); }
  .janela .assina { display: block; margin-top: 10px; font-family: var(--mono); font-size: .74rem; font-weight: 400; color: var(--muted); letter-spacing: .06em; }

  /* ---------- QUALQUER EMPRESA ---------- */
  .cartao .regra {
    margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(22,58,116,.8);
    font-family: var(--mono); font-size: .74rem; color: var(--accent); line-height: 1.7;
  }
  .modos { margin-top: 44px; }
  .modos h3.sub-secao { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
  .modos .nota { color: var(--muted); font-size: .9rem; margin: 0 0 18px; max-width: 70ch; }
  .modo { border-left: 3px solid var(--accent); }
  .modo h3 { font-family: var(--mono); font-size: .92rem; letter-spacing: .04em; }
  .modo .tag { display: block; font-size: .72rem; color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 6px; font-family: var(--mono); }

  /* ---------- SEGURANÇA ---------- */
  code {
    font-family: var(--mono);
    font-size: .84em;
    background: rgba(46,163,255,.09);
    border: 1px solid rgba(22,58,116,.7);
    border-radius: 6px;
    padding: .1em .4em;
    color: #8fc6ff;
    white-space: nowrap;
  }
  .seg { display: grid; gap: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--panel); }
  .seg-item { display: flex; gap: 16px; padding: 20px 22px; align-items: flex-start; }
  .seg-item + .seg-item { border-top: 1px solid rgba(22,58,116,.5); }
  .seg-item h3 { margin: 0 0 4px; font-size: .98rem; font-weight: 700; }
  .seg-item p { margin: 0; color: var(--muted); font-size: .88rem; max-width: 90ch; }
  .seg-item .icone { width: 38px; height: 38px; border-radius: 10px; }
  .seg-item .icone svg { width: 20px; height: 20px; }

  /* ---------- FAIXA GUERRA INTELLIGENCE (onda viva) ---------- */
  .gi-faixa {
    padding: 42px 0 38px;
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(rgba(140,170,210,.10) 1px, transparent 1.2px);
    background-size: 8px 8px;
  }
  .gi-faixa::before, .gi-faixa::after {
    content: "";
    position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(46,163,255,.35), rgba(25,239,122,.2), transparent);
    pointer-events: none;
  }
  .gi-faixa::before { top: 0; }
  .gi-faixa::after { bottom: 0; }
  .gi-brand {
    text-align: center;
    font-family: var(--mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .34em;
    text-indent: .34em; /* compensa o tracking no centramento */
    color: #c8d4e4;
    margin: 0 0 6px;
  }
  .gi-brand .intel { color: #9fd0ff; }
  .gi-wave {
    max-width: 920px;
    height: 66px;
    margin: 0 auto;
    line-height: 0;
  }
  .gi-wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .gi-legenda {
    text-align: center;
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--muted);
    letter-spacing: .03em;
    margin: 10px 0 0;
  }
  .gi-legenda b { color: #5fe89b; font-weight: 600; }
  /* cometa de solda percorrendo o cordão (pathLength=1000 → loop exato) */
  .gi-comet, .gi-comet-core {
    animation: gi-flow 7s linear infinite;
  }
  @keyframes gi-flow {
    from { stroke-dashoffset: 1000; }
    to   { stroke-dashoffset: 0; }
  }
  /* nós acendem quando o cometa passa (delays ≈ posição no traçado) */
  .gi-node { opacity: .45; animation: gi-twinkle 7s ease-out infinite; }
  .gi-node.n1 { animation-delay: 1.2s; }
  .gi-node.n2 { animation-delay: 2s; }
  .gi-node.nplus { animation-delay: 3.35s; }
  .gi-node.n3 { animation-delay: 4.35s; }
  .gi-node.n5 { animation-delay: 6.05s; }
  @keyframes gi-twinkle {
    0% { opacity: 1; }
    10% { opacity: 1; }
    32% { opacity: .45; }
    100% { opacity: .45; }
  }
  .gi-node-ok {
    transform-box: fill-box;
    transform-origin: center;
    animation: gi-okpulse 7s ease-out infinite;
    animation-delay: 5.25s;
  }
  @keyframes gi-okpulse {
    0% { transform: scale(1.5); opacity: 1; }
    12% { transform: scale(1.25); opacity: 1; }
    35% { transform: scale(1); opacity: .8; }
    100% { transform: scale(1); opacity: .8; }
  }

  /* ---------- LED DE STATUS (metal + brasa verde, família weld-*) ---------- */
  .seg-metal {
    position: relative;
    height: 7px;
    z-index: 1;
    background:
      linear-gradient(90deg,
        #4a5564 0%, #d6dbe4 7%, #6e7888 14%, #eef1f5 22%,
        #5a6574 32%, #c8ced8 42%, #7a8494 52%, #f2f4f7 62%,
        #646e7c 74%, #b8c0ca 86%, #4a5564 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.35),
      0 2px 4px rgba(0,0,0,.28),
      inset 0 1px 0 rgba(255,255,255,.55),
      inset 0 -1px 0 rgba(0,0,0,.35);
  }
  .seg-metal::after {
    content: "";
    position: absolute; left: 0; right: 0; top: 1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    opacity: .7;
  }
  @keyframes seg-led-percorre {
    0%   { left: 3%; }
    45%  { left: calc(97% - 15px); }
    50%  { left: calc(97% - 15px); }
    95%  { left: 3%; }
    100% { left: 3%; }
  }
  .seg-led {
    position: absolute;
    left: 0; top: 50%;
    width: 15px; height: 7px;
    transform: translateY(-50%);
    border-radius: 999px;
    background:
      radial-gradient(ellipse at 50% 40%, #ffffff 0 22%, rgba(255,255,255,0) 46%),
      radial-gradient(ellipse at 50% 50%, #b9ffd6 0 38%, #19ef7a 72%, #0db85f 100%);
    box-shadow:
      0 0 0 1px rgba(6,26,16,.45),
      0 0 6px 2px rgba(120,255,180,.9),
      0 0 16px 6px rgba(25,239,122,.5),
      0 0 30px 12px rgba(25,239,122,.2);
    animation: seg-led-percorre 9s ease-in-out infinite, weld-ember-led 2.4s ease-in-out infinite;
  }
  @keyframes weld-ember-led {
    0%, 100% { filter: brightness(.9); }
    45% { filter: brightness(1.3) contrast(1.08); }
    62% { filter: brightness(1.05); }
  }
  .seg-status {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 22px;
    border-bottom: 1px solid rgba(22,58,116,.5);
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .seg-status .on { color: #6fe3a1; }
  .seg-status .meta { color: #4d6076; }
  @media (max-width: 560px) {
    .seg-status .meta { display: none; }
    .seg-status { font-size: .62rem; letter-spacing: .1em; }
    .gi-wave { height: 46px; }
  }

  /* ---------- RODAPÉ ---------- */
  footer {
    border-top: 1px solid rgba(22,58,116,.45);
    padding: 44px 0 54px;
    text-align: center;
    color: var(--muted);
    font-size: .8rem;
  }
  footer .marca-pe { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; }
  footer .marca-pe img { height: 26px; opacity: .9; }
  footer .wordmark { font-size: .95rem; }
  footer p { margin: 4px 0; }
  footer .conf { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #4d6076; margin-top: 12px; }

  /* ---------- ANIMAÇÃO DE ENTRADA ---------- */
  html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s ease, transform .7s ease;
  }
  html.js .reveal.in { opacity: 1; transform: none; }
  html.js .reveal:nth-child(2) { transition-delay: .08s; }
  html.js .reveal:nth-child(3) { transition-delay: .16s; }
  html.js .reveal:nth-child(4) { transition-delay: .24s; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .reveal { opacity: 1; transform: none; transition: none; }
    .hud-scanline { animation: none; top: 40%; opacity: .35; }
    .botao { transition: none; }
    .gi-comet, .gi-comet-core { animation: none; opacity: 0; }
    .gi-node { animation: none; opacity: .85; }
    .gi-node-ok { animation: none; opacity: .9; }
    .seg-led { animation: none; left: 36px; }
    .cartao, .trilho { transition: none; }
  }


  #menu{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;gap:12px;
    padding:10px 18px;background:rgba(2,8,20,.82);backdrop-filter:blur(10px);
    border-bottom:1px solid #163a74}
  #menu .m-marca{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.12em;
    color:#e6edf5;text-decoration:none;font-size:.92rem;flex:none}
  #menu .m-marca img{height:22px}
  #menu .m-marca b{color:#2ea3ff}
  #menu nav{margin-left:auto;display:flex;align-items:center;gap:2px}
  #menu nav a{color:#8296ab;text-decoration:none;font-size:.88rem;transition:color .2s,border-color .2s;
    padding:7px 11px;border-radius:8px;white-space:nowrap}
  #menu nav a:hover{color:#e6edf5}
  #menu .m-sep{width:1px;height:22px;background:#163a74;margin:0 12px;flex:none}
  #menu nav a.m-pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #163a74;
    border-radius:999px;padding:7px 15px;color:#c8d4e4;background:rgba(6,16,31,.6);font-size:.85rem}
  #menu nav a.m-pill .seta{color:#2ea3ff;font-size:.8em;transition:transform .2s}
  #menu nav a.m-pill:hover{border-color:#2ea3ff;color:#e6edf5}
  #menu nav a.m-pill:hover .seta{transform:translate(1px,-1px)}
  #menu nav a.m-pill.principal{background:#2ea3ff;border-color:#2ea3ff;color:#020814;font-weight:700}
  #menu nav a.m-pill.principal .seta{color:#04121f}
  #menu nav a.m-pill.principal:hover{filter:brightness(1.1);color:#020814}
  #m-rotulo{display:none}
  #m-burger{display:none;margin-left:auto;background:none;border:1px solid #163a74;border-radius:8px;
    color:#e6edf5;font-size:1.2rem;padding:4px 12px;cursor:pointer}
  a:focus-visible,button:focus-visible{outline:2px solid #2ea3ff;outline-offset:2px}
  @media (max-width:900px){
    #menu nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
      align-items:stretch;gap:0;background:#050b16;border-bottom:1px solid #163a74;
      max-height:calc(100dvh - 46px);overflow-y:auto}
    #menu nav.aberto{display:flex}
    #menu nav a{padding:15px 22px;border-top:1px solid #0e1a2e;font-size:1rem;border-radius:0}
    #menu .m-sep{width:auto;height:auto;background:none;margin:0;padding:14px 22px 4px;
      border-top:1px solid #163a74}
    #m-rotulo{display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
      color:#4d6076;font-family:ui-monospace,Menlo,monospace}
    #menu nav a.m-pill{margin:10px 18px 0;justify-content:center;border-radius:12px;font-size:1rem}
    #menu nav a.m-pill.principal{margin-bottom:14px}
    #m-burger{display:block}
  }
  html{scroll-padding-top:70px}
  body{scroll-behavior:smooth}
  .hero{padding-top:128px;padding-bottom:90px}
  .hero .marca{margin-bottom:30px}
  .hero .marca img{height:clamp(84px,7vw + 56px,116px);
    filter:drop-shadow(0 0 26px rgba(46,163,255,.4)) drop-shadow(0 10px 34px rgba(2,8,20,.7))}
  @media (max-width:900px){.hero{padding-top:104px}}