:root{
    --bg: #0a0705;
    --bg-2: #0f0b06;
    --card: #14100a;
    --line: rgba(255,232,190,0.09);
    --ink: #f7f3ec;
    --muted: #ab9f8c;
    --lime: #ffd93d;
    --lime-ink: #1a1200;
    --violet: #ff9f1c;
    --cyan: #ffe9a8;
    --blue: #e8830a;

    /* rede de circuito animada (background) — em rgb pra usar com rgba() no canvas */
    --net-node: 255,159,28;  /* amber */
    --net-node-2: 255,217,61;/* gold */
    --net-pulse: 255,255,255;/* faísca branca */
    --net-line-alpha: 0.16;
    --nav-h: 70px; /* altura do nav, recalculada via JS */
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Inter', system-ui, sans-serif;
    line-height:1.55; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{ font-family:'Sora', sans-serif; margin:0; }
  img{ display:block; max-width:100%; }
  a{ color:inherit; }
  .container{ max-width:1120px; margin:0 auto; padding:0 24px; }
  .eyebrow{
    font-size:12.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--lime); margin:0 0 14px;
  }

  /* ---------- BG ANIMATION (rede de circuito) ---------- */
  #bg-canvas{
    position:fixed; inset:0; z-index:-1;
    width:100%; height:100%;
    pointer-events:none;
  }
  @media (max-width:560px){ #bg-canvas{ opacity:0.85; } }

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
    background:rgba(6,8,12,0.7); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .brand{ display:flex; align-items:center; gap:10px; font-family:'Sora',sans-serif; font-weight:700; letter-spacing:0.02em; }
  .brand-mark{
    width:34px; height:34px; border-radius:9px;
    background:linear-gradient(135deg, var(--violet), var(--lime));
    display:flex; align-items:center; justify-content:center;
  }
  .brand-mark svg{ width:19px; height:19px; color:#06080c; }
  .nav-cta{
    display:inline-flex; align-items:center; gap:8px;
    background:rgba(255,255,255,0.06); border:1px solid var(--line);
    padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600;
    text-decoration:none; transition:border-color .2s ease, background .2s ease;
  }
  .nav-cta:hover{ border-color:var(--lime); background:rgba(184,255,53,0.08); }
  .nav-cta svg{ width:15px; height:15px; color:#25D366; }

  /* ---------- HERO (PC gamer se desmontando no scroll) ---------- */
  .hero{ position:relative; height:230vh; }
  .hero-sticky{
    position:sticky; top:var(--nav-h,70px); height:calc(100vh - var(--nav-h,70px));
    overflow:hidden; display:flex; align-items:center;
  }
  .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:32px; align-items:center; width:100%; }
  .hero-content{ position:relative; z-index:2; }
  .hero h1{
    font-size:clamp(34px, 5.4vw, 58px); font-weight:800; line-height:1.08; letter-spacing:-0.02em;
    margin-bottom:22px;
  }
  .hero h1 em{ font-style:normal; color:var(--lime); }
  .hero p.lead{ max-width:480px; color:var(--muted); font-size:17px; margin-bottom:28px; }

  .checklist{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:34px; max-width:560px; }
  .checklist li{
    list-style:none; display:flex; align-items:center; gap:8px;
    font-size:13.5px; color:var(--ink); font-weight:500;
  }
  .checklist svg{ width:16px; height:16px; color:var(--violet); flex:none; }

  .glow-btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--lime); color:var(--lime-ink);
    font-weight:700; font-size:15.5px;
    padding:16px 30px; border-radius:999px; text-decoration:none;
    box-shadow:0 0 0 1px rgba(184,255,53,0.4), 0 12px 40px -8px rgba(184,255,53,0.55);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .glow-btn:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(184,255,53,0.55), 0 16px 46px -6px rgba(184,255,53,0.7); }
  .glow-btn svg{ width:19px; height:19px; }

  .hero-wave{ position:absolute; left:0; right:0; bottom:-2px; z-index:1; opacity:0.9; pointer-events:none; }

  /* ---------- visual do PC explodindo ---------- */
  .hero-visual{ position:relative; display:flex; flex-direction:column; align-items:center; }
  .explode-stage{
    position:relative; width:min(100%,460px); aspect-ratio:680/700;
    filter:drop-shadow(0 30px 50px rgba(0,0,0,0.5));
  }
  .explode-stage svg{ display:block; width:100%; height:100%; overflow:visible; }
  .pc-part{ transform-box:fill-box; transform-origin:50% 50%; }
  .explode-hint{
    margin:12px 0 0; font-size:12.5px; color:var(--muted); letter-spacing:0.02em; transition:opacity .3s ease;
  }

  .hero.reduced{ height:auto; }
  .hero.reduced .hero-sticky{ position:relative; top:0; height:auto; padding:126px 0 60px; overflow:visible; }
  .hero.reduced .hero-grid{ display:block; }
  .hero.reduced .hero-visual{ margin-bottom:36px; }

  @media (max-width:860px){
    .hero{ height:auto; }
    .hero-sticky{ position:relative; top:0; height:auto; padding:112px 0 46px; overflow:visible; }
    .hero-grid{ display:flex; flex-direction:column; }
    .hero-visual{ order:-1; margin-bottom:30px; }
    .explode-stage{ width:min(72vw,300px); }
    .hero p.lead{ max-width:none; }
  }

  /* ---------- SECTION HEADS ---------- */
  section{ padding:96px 0; position:relative; }
  .sec-head{ max-width:600px; margin-bottom:52px; }
  .sec-head h2{ font-size:clamp(26px,3.4vw,36px); font-weight:700; letter-spacing:-0.01em; }
  .sec-head p{ color:var(--muted); font-size:15.5px; margin-top:12px; }

  /* ---------- SERVICES ---------- */
  .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .svc{
    background:linear-gradient(180deg, var(--card), var(--bg-2));
    border:1px solid var(--line); border-radius:16px; padding:26px 24px 24px;
    transition:transform .2s ease, border-color .2s ease;
  }
  .svc:hover{ transform:translateY(-3px); border-color:rgba(184,255,53,0.3); }
  .svc-icon{
    width:48px; height:48px; border-radius:12px; margin-bottom:18px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--violet), var(--lime));
  }
  .svc.alt .svc-icon{ background:linear-gradient(135deg, var(--blue), var(--cyan)); }
  .svc-icon svg{ width:24px; height:24px; color:#06080c; }
  .svc h3{ font-size:17px; font-weight:700; margin-bottom:9px; display:flex; align-items:center; gap:8px; }
  .tag-web{
    font-size:10.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    background:rgba(51,224,255,0.12); color:var(--cyan); border:1px solid rgba(51,224,255,0.3);
    padding:2px 8px; border-radius:999px;
  }
  .svc p{ color:var(--muted); font-size:14px; margin:0 0 18px; }
  .svc .cta{
    display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
    text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:3px;
    transition:border-color .2s ease, color .2s ease;
  }
  .svc .cta:hover{ border-color:var(--lime); color:var(--lime); }
  .svc .cta svg{ width:14px; height:14px; }

  /* ---------- SPLIT ---------- */
  .split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .split img{ border-radius:18px; width:100%; height:420px; object-fit:cover; border:1px solid var(--line); }
  .split h2{ font-size:clamp(24px,3.2vw,32px); font-weight:700; margin-bottom:16px; letter-spacing:-0.01em; }
  .split p.intro{ color:var(--muted); font-size:15.5px; margin-bottom:26px; }
  .why-list{ display:flex; flex-direction:column; gap:16px; }
  .why-list li{ list-style:none; display:flex; gap:12px; align-items:flex-start; }
  .why-list svg{ width:19px; height:19px; color:var(--violet); flex:none; margin-top:2px; }
  .why-list span{ font-size:14.5px; color:var(--ink); }

  /* ---------- FINAL CTA ---------- */
  .final{ position:relative; overflow:hidden; padding:0; }
  .final-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .final-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,8,12,0.85), rgba(6,8,12,0.93)); }
  .final-inner{ position:relative; z-index:2; padding:100px 24px; text-align:center; max-width:640px; margin:0 auto; }
  .final h2{ font-size:clamp(26px,3.6vw,38px); font-weight:800; margin-bottom:16px; letter-spacing:-0.01em; }
  .final p{ color:var(--muted); font-size:15.5px; margin-bottom:32px; }

  /* ---------- FOOTER ---------- */
  footer{ border-top:1px solid var(--line); padding:28px 0 100px; text-align:center; color:var(--muted); font-size:13px; }

  /* ---------- STICKY MOBILE CTA ---------- */
  .sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:40;
    display:none; justify-content:center;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, transparent, rgba(6,8,12,0.92) 35%, #06080c 75%);
  }
  .sticky-cta a{
    display:flex; align-items:center; gap:9px;
    background:#25D366; color:#06210f; font-weight:700; font-size:14.5px;
    text-decoration:none; padding:13px 22px; border-radius:999px;
    box-shadow:0 8px 24px rgba(37,211,102,0.35);
  }
  .sticky-cta svg{ width:18px; height:18px; }

  /* ---------- REVEAL ---------- */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:860px){
    .grid{ grid-template-columns:repeat(2,1fr); }
    .split{ grid-template-columns:1fr; }
    .split img{ height:280px; order:-1; }
  }
  @media (max-width:560px){
    .grid{ grid-template-columns:1fr; }
    section{ padding:64px 0; }
    .nav-cta span{ display:none; }
    .sticky-cta{ display:flex; }
    footer{ padding-bottom:110px; }
  }