/* Design system das páginas de frente — extraído do template do site EVO (performance.html) */

    /* ========== PARTICLES ========== */
    .perf-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
    .perf-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(9,81,199,0.35);animation:particleDrift linear infinite}
    .perf-particle:nth-child(1){left:10%;top:20%;animation-duration:18s;animation-delay:0s}
    .perf-particle:nth-child(2){left:25%;top:60%;animation-duration:22s;animation-delay:-3s;width:2px;height:2px;background:rgba(9,81,199,0.2)}
    .perf-particle:nth-child(3){left:50%;top:35%;animation-duration:20s;animation-delay:-7s}
    .perf-particle:nth-child(4){left:70%;top:70%;animation-duration:25s;animation-delay:-2s;width:4px;height:4px;background:rgba(9,81,199,0.15)}
    .perf-particle:nth-child(5){left:85%;top:15%;animation-duration:19s;animation-delay:-5s;width:2px;height:2px}
    .perf-particle:nth-child(6){left:40%;top:80%;animation-duration:23s;animation-delay:-10s;background:rgba(255,255,255,0.08)}
    .perf-particle:nth-child(7){left:60%;top:10%;animation-duration:17s;animation-delay:-8s;width:2px;height:2px;background:rgba(255,255,255,0.06)}
    .perf-particle:nth-child(8){left:15%;top:45%;animation-duration:21s;animation-delay:-4s;background:rgba(9,81,199,0.25)}
    @keyframes particleDrift{
      0%{transform:translate(0,0) scale(1);opacity:0}
      10%{opacity:1}
      90%{opacity:1}
      100%{transform:translate(80px,-120px) scale(0.5);opacity:0}
    }

    /* ========== GRID PATTERN ========== */
    .perf-grid-overlay{position:absolute;inset:0;background-image:
      linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size:60px 60px;pointer-events:none;z-index:0}

    /* ========== ANIMATE ========== */
    [data-animate]{opacity:0;transform:translateY(32px);transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1)}
    [data-animate].is-visible{opacity:1;transform:translateY(0)}
    [data-animate="stagger"] > *{opacity:0;transform:translateY(24px);transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1)}
    [data-animate="stagger"].is-visible > *{opacity:1;transform:translateY(0)}
    [data-animate="stagger"].is-visible > *:nth-child(1){transition-delay:0s}
    [data-animate="stagger"].is-visible > *:nth-child(2){transition-delay:0.12s}
    [data-animate="stagger"].is-visible > *:nth-child(3){transition-delay:0.24s}
    [data-animate="stagger"].is-visible > *:nth-child(4){transition-delay:0.36s}
    [data-animate="stagger"].is-visible > *:nth-child(5){transition-delay:0.48s}

    /* ========== HERO ========== */
    .perf-hero{min-height:100vh;display:flex;align-items:center;background:#0A0A0A;padding:160px 0 120px;position:relative;overflow:hidden}
    .perf-hero-container{max-width:1280px;margin:0 auto;padding:0 48px;position:relative;z-index:2}
    .perf-hero-badge{display:inline-block;border:1px solid rgba(9,81,199,0.4);background:rgba(9,81,199,0.08);padding:8px 20px;font-size:11px;font-weight:500;letter-spacing:0.18em;color:#4d8fef;margin-bottom:36px;backdrop-filter:blur(8px)}
    .perf-hero h1{font-size:64px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:-0.03em;line-height:1.05;margin-bottom:28px;max-width:780px}
    .perf-hero h1 .gradient-text{background:linear-gradient(135deg,#0951C7 0%,#4d8fef 50%,#0951C7 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease infinite}
    @keyframes gradientShift{0%{background-position:0% center}50%{background-position:100% center}100%{background-position:0% center}}
    .perf-hero-desc{font-size:18px;font-weight:300;color:rgba(255,255,255,0.5);line-height:1.75;max-width:540px;margin-bottom:48px}
    .perf-hero-cta{display:inline-flex;align-items:center;gap:12px;padding:18px 40px;background:#0951C7;color:#fff;font-size:13px;font-weight:500;letter-spacing:0.1em;text-decoration:none;text-transform:uppercase;transition:all 0.4s cubic-bezier(0.22,1,0.36,1);position:relative;overflow:hidden}
    .perf-hero-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent);opacity:0;transition:opacity 0.4s}
    .perf-hero-cta:hover{transform:translateY(-2px)}
    .perf-hero-cta:hover::before{opacity:1}
    .perf-hero-cta svg{width:16px;height:16px;transition:transform 0.4s}
    .perf-hero-cta:hover svg{transform:translateX(4px)}

    /* ========== CONTEXT ========== */
    .perf-context{padding:120px 0;background:#111;position:relative;overflow:hidden}
    .perf-context-container{max-width:1280px;margin:0 auto;padding:0 48px;position:relative;z-index:1}
    .perf-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
    .perf-context-left{position:relative}
    .perf-context-left::before{content:'';position:absolute;left:-40px;top:-20px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(9,81,199,0.15),transparent 70%);pointer-events:none}
    .perf-context h2{font-size:42px;font-weight:600;text-transform:uppercase;letter-spacing:-0.02em;line-height:1.1;color:#fff;margin-bottom:0}
    .perf-context h2 span{color:#4d8fef}
    .perf-context-right p{font-size:16px;font-weight:300;line-height:1.85;color:rgba(255,255,255,0.5);margin-bottom:20px}
    .perf-context-right strong{color:#fff;font-weight:500}
    .perf-context-accent{width:48px;height:3px;background:linear-gradient(90deg,#0951C7,transparent);margin-bottom:32px;border-radius:2px}

    /* ========== SERVICES ========== */
    .perf-services{padding:120px 0;background:#0A0A0A;position:relative}
    .perf-services-container{max-width:1280px;margin:0 auto;padding:0 48px}
    .perf-services-header{text-align:center;margin-bottom:72px}
    .perf-services-header .perf-hero-badge{border-color:rgba(9,81,199,0.3);color:#4d8fef;background:rgba(9,81,199,0.06)}
    .perf-services-header h2{font-size:42px;font-weight:600;text-transform:uppercase;color:#fff;margin-top:24px;letter-spacing:-0.02em}
    .perf-services-header h2 span{color:#4d8fef}
    .perf-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
    .perf-service{padding:48px 36px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all 0.4s cubic-bezier(0.22,1,0.36,1);position:relative;overflow:hidden}
    .perf-service::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#0951C7,transparent);opacity:0;transition:opacity 0.4s}
    .perf-service:hover{transform:translateY(-4px);border-color:rgba(9,81,199,0.3);box-shadow:0 20px 60px rgba(9,81,199,0.08)}
    .perf-service:hover::before{opacity:1}
    .perf-service-num{display:block;font-size:56px;font-weight:700;background:linear-gradient(180deg,rgba(9,81,199,0.4),rgba(9,81,199,0.05));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:28px;letter-spacing:-0.04em;line-height:1}
    .perf-service h3{font-size:16px;font-weight:600;text-transform:uppercase;color:#fff;margin-bottom:14px;letter-spacing:0.02em}
    .perf-service p{font-size:14px;font-weight:300;line-height:1.75;color:rgba(255,255,255,0.45);margin-bottom:24px}
    .perf-service ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
    .perf-service li{font-size:13px;font-weight:300;color:rgba(255,255,255,0.55);padding-left:18px;position:relative;transition:color 0.3s}
    .perf-service li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:#0951C7;box-shadow:0 0 8px rgba(9,81,199,0.4)}
    .perf-service:hover li{color:rgba(255,255,255,0.7)}

    /* ========== OPERATION ========== */
    .perf-operation{padding:120px 0;background:#111;position:relative;overflow:hidden}
    .perf-operation-container{max-width:1280px;margin:0 auto;padding:0 48px;position:relative;z-index:1}
    .perf-operation-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-bottom:80px}
    .perf-operation h2{font-size:42px;font-weight:600;text-transform:uppercase;color:#fff;letter-spacing:-0.02em;margin-bottom:0;line-height:1.1}
    .perf-operation h2 span{color:#4d8fef}
    .perf-operation-right p{font-size:16px;font-weight:300;line-height:1.85;color:rgba(255,255,255,0.5);margin-bottom:16px}
    .perf-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
    .perf-stats-row::after{content:'';position:absolute;bottom:-24px;left:10%;right:10%;height:3px;background:linear-gradient(90deg,transparent,#0951C7,transparent);border-radius:2px}
    .perf-stat-card{text-align:center;padding:56px 24px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all 0.4s cubic-bezier(0.22,1,0.36,1)}
    .perf-stat-card:hover{border-color:rgba(9,81,199,0.25);transform:translateY(-4px)}
    .stat-number{display:block;font-size:52px;font-weight:700;color:#0951C7;letter-spacing:-0.03em;margin-bottom:12px;line-height:1}
    .perf-stat-card-label{font-size:10px;font-weight:500;letter-spacing:0.14em;color:rgba(255,255,255,0.35);text-transform:uppercase}

    /* ========== INDICATORS ========== */
    .perf-indicators{padding:120px 0;background:#0A0A0A;position:relative}
    .perf-indicators-container{max-width:1280px;margin:0 auto;padding:0 48px}
    .perf-indicators-header{text-align:center;margin-bottom:64px}
    .perf-indicators-header .perf-hero-badge{border-color:rgba(9,81,199,0.3);color:#4d8fef;background:rgba(9,81,199,0.06)}
    .perf-indicators-header h2{font-size:42px;font-weight:600;text-transform:uppercase;color:#fff;margin-top:24px;letter-spacing:-0.02em}
    .perf-indicators-header h2 span{color:#4d8fef}
    .perf-indicator-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
    .perf-indicator{padding:40px 24px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:center;transition:all 0.4s cubic-bezier(0.22,1,0.36,1)}
    .perf-indicator:hover{border-color:rgba(9,81,199,0.3);transform:translateY(-4px)}
    .perf-indicator-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#0951C7;margin-bottom:20px;position:relative;animation:none}
    .perf-indicator-dot::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(9,81,199,0.3);animation:none}
    @keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(9,81,199,0.3)}50%{box-shadow:0 0 0 8px rgba(9,81,199,0)}}
    .perf-indicator h3{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:#fff;margin-bottom:10px}
    .perf-indicator p{font-size:12px;font-weight:300;line-height:1.65;color:rgba(255,255,255,0.4)}

    /* ========== QUOTE ========== */
    .perf-quote{padding:100px 0;background:#111;text-align:center;position:relative}
    .perf-quote-mark{display:block;font-size:72px;font-weight:700;line-height:1;background:linear-gradient(135deg,#0951C7,#4d8fef);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:24px}
    .perf-quote p{font-size:24px;font-weight:300;font-style:italic;color:rgba(255,255,255,0.6);line-height:1.65;max-width:680px;margin:0 auto;padding:0 24px}

    /* ========== CTA ========== */
    .perf-cta{padding:140px 0;background:#0A0A0A;text-align:center;position:relative;overflow:hidden}
    .perf-cta::before{content:'';position:absolute;top:50%;left:50%;width:600px;height:600px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(9,81,199,0.1) 0%,transparent 65%);pointer-events:none}
    .perf-cta-container{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 48px}
    .perf-cta h2{font-size:48px;font-weight:600;color:#fff;text-transform:uppercase;margin-bottom:20px;letter-spacing:-0.02em}
    .perf-cta h2 span{color:#4d8fef}
    .perf-cta p{font-size:16px;font-weight:300;color:rgba(255,255,255,0.4);margin-bottom:44px}
    .perf-cta .perf-hero-cta{display:inline-flex}

    /* ========== RESPONSIVE 1024 ========== */
    @media(max-width:1024px){
      .perf-hero h1{font-size:48px}
      .perf-context-grid,.perf-operation-grid{grid-template-columns:1fr;gap:48px}
      .perf-services-grid{grid-template-columns:1fr}
      .perf-stats-row{grid-template-columns:repeat(3,1fr)}
      .perf-indicator-grid{grid-template-columns:repeat(2,1fr)}
      .perf-context h2,.perf-services-header h2,.perf-indicators-header h2,.perf-operation h2{font-size:34px}
      .perf-cta h2{font-size:36px}
    }

    /* ========== RESPONSIVE 640 ========== */
    @media(max-width:640px){
      .perf-hero{min-height:auto;padding:120px 0 80px}
      .perf-hero-container,.perf-context-container,.perf-services-container,.perf-operation-container,.perf-indicators-container,.perf-cta-container{padding:0 24px}
      .perf-hero h1{font-size:32px;max-width:100%}
      .perf-hero-desc{font-size:15px}
      .perf-particles,.perf-context-left::before{display:none}
      .perf-context,.perf-services,.perf-indicators{padding:80px 0}
      .perf-context h2,.perf-services-header h2,.perf-indicators-header h2,.perf-operation h2{font-size:28px}
      .perf-operation{padding:80px 0}
      .perf-stats-row{grid-template-columns:1fr;gap:16px}
      .perf-stats-row::after{display:none}
      .perf-stat-card{padding:36px 16px}
      .stat-number{font-size:40px}
      .perf-indicator-grid{grid-template-columns:1fr 1fr;gap:12px}
      .perf-indicator{padding:28px 16px}
      .perf-quote{padding:72px 0}
      .perf-quote p{font-size:18px}
      .perf-cta{padding:80px 0}
      .perf-cta h2{font-size:28px}
      .perf-service-num{font-size:44px}
      .perf-service{padding:36px 24px}
    }
  
/* ========== HEADER FLUTUANTE (efeito mez.systems, retangular PW7) ========== */
/* Topo da página: header largo, transparente. Ao rolar: barra compacta centralizada. */
.header{transition:top 0.5s cubic-bezier(0.16,1,0.3,1),left 0.5s cubic-bezier(0.16,1,0.3,1),width 0.5s cubic-bezier(0.16,1,0.3,1),background 0.4s,box-shadow 0.4s,border-color 0.4s;border:1px solid transparent}
.header.compact{top:16px;left:50%;right:auto;transform:translateX(-50%);width:min(920px,calc(100% - 32px));background:rgba(10,10,10,0.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,0.12);box-shadow:0 16px 48px rgba(0,0,0,0.5),0 2px 8px rgba(0,0,0,0.35)}
.header.compact .header-container{height:58px;padding:0 20px;gap:28px;transition:height 0.5s cubic-bezier(0.16,1,0.3,1),padding 0.5s cubic-bezier(0.16,1,0.3,1),gap 0.5s cubic-bezier(0.16,1,0.3,1)}
.header .header-container{transition:height 0.5s cubic-bezier(0.16,1,0.3,1),padding 0.5s cubic-bezier(0.16,1,0.3,1),gap 0.5s cubic-bezier(0.16,1,0.3,1)}
.header.compact .logo svg{height:30px;width:auto;transition:height 0.5s cubic-bezier(0.16,1,0.3,1)}
.header .logo svg{transition:height 0.5s cubic-bezier(0.16,1,0.3,1)}
.header.compact .btn-sm{padding:10px 20px}
@media(max-width:640px){.header.compact{top:10px;width:calc(100% - 20px)}.header.compact .header-container{padding:0 14px}}

/* ========== BOTÕES NO PADRÃO DA RAIZ (glass + borda azul acesa + brilho que varre) ========== */
.perf-hero-cta{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.perf-hero-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.12) 50%,transparent 70%);transform:translateX(-100%);transition:transform .6s}
.perf-hero-cta:hover{border-color:#4D8FEF;background:rgba(9,81,199,0.12);transform:translateY(-2px)}
.perf-hero-cta:hover::after{transform:translateX(100%)}
.header .btn-primary{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff}
.header .btn-primary:hover{border-color:#4D8FEF;background:rgba(9,81,199,0.12)}
.mobile-menu .btn-primary{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);color:#fff}

/* ========== GRID VIVO (hero): respiração + pulsos de linha azul ========== */
.perf-grid-overlay{animation:gridBreathe 9s ease-in-out infinite;will-change:transform}
@keyframes gridBreathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.045);opacity:.82}}

/* pulso horizontal: linha azul desce varrendo o hero */
.perf-grid-overlay::before{content:"";position:absolute;left:0;right:0;top:60px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 5%,rgba(9,81,199,0) 22%,rgba(77,143,239,.85) 50%,rgba(9,81,199,0) 78%,transparent 95%);
  animation:traceDown 7.5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes traceDown{0%{transform:translateY(0);opacity:0}6%{opacity:1}44%{opacity:.9}56%{transform:translateY(72vh);opacity:0}100%{transform:translateY(72vh);opacity:0}}

/* pulso vertical: linha azul cruza da esquerda pra direita, fora de fase */
.perf-grid-overlay::after{content:"";position:absolute;top:0;bottom:0;left:120px;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent 8%,rgba(77,143,239,.55) 50%,transparent 92%);
  animation:traceAcross 12s cubic-bezier(.45,0,.55,1) infinite;animation-delay:3.5s}
@keyframes traceAcross{0%{transform:translateX(0);opacity:0}6%{opacity:.85}44%{opacity:.75}56%{transform:translateX(80vw);opacity:0}100%{transform:translateX(80vw);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .perf-grid-overlay{animation:none}
  .perf-grid-overlay::before,.perf-grid-overlay::after{display:none}
}

/* ========== STATS EM CLARO (momento de contraste) ========== */
.perf-stat-card{background:#F5F5F2;border:1px solid #E4E4E0}
.perf-stat-card:hover{border-color:rgba(9,81,199,.45);transform:translateY(-4px)}
.perf-stat-card .stat-number{color:#0951C7}
.perf-stat-card .perf-stat-card-label{color:#63635F}