/* ===========================
       VARIÁVEIS & RESET
    =========================== */
    :root {
      --purple:     #ffffff;
      --cyan:       #ffffff;
      --indigo:     #ffffff;
      --pink:       #ffffff;
      --blue:       #ffffff;
      --green:      #ffffff;
      --yellow:     #ffffff;
      --bg-dark:    #020617;
      --bg-card:    rgba(255,255,255,0.04);
      --border:     rgba(255,255,255,0.09);
      --text-muted: #cbd5e1;
      --text-dim:   rgba(255,255,255,0.5);
      --radius-lg:  20px;
      --radius-md:  12px;
      --radius-sm:  8px;
      --grad-main:  #ffffff;
      --grad-alt:   #1e293b;
      --transition: 0.25s ease;
      --font:       'Plus Jakarta Sans', sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    body { font-family: var(--font); }

    /* ===========================
       BARRA DE URGÊNCIA (TOPO)
    =========================== */
    .wx-urgency-bar {
      background: #000;
      color: #fff;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      padding: 9px 16px;
      letter-spacing: 0.01em;
    }
    .wx-urgency-bar span { opacity: .85; font-weight: 400; }
    .wx-urgency-bar strong { font-weight: 800; }

    /* ===========================
       HERO — dark cinematic server room
    =========================== */
    .wx-hero {
      position: relative;
      min-height: 580px;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: #060810;
      color: #fff;
      padding: 0;
      margin-bottom: 0;
    }
    /* server rack background image */
    .wx-hero::before {
      content: '';
      position: absolute; inset: 0;
      background: url('/assets/images/backgournds/datacenter.jpg') center/cover no-repeat;
      opacity: 0.32;
      pointer-events: none;
      z-index: 0;
    }
    
    
    /* dark overlay + subtle color glow */
    .wx-hero::after {
      content: '';
      position: absolute; inset: 0;
      background: rgba(6,8,16,.68);
      pointer-events: none;
      z-index: 1;
    }
    /* orbs removidas — sem glow colorido */
    .wx-hero-orb { display: none; }
    @keyframes wxOrbDrift {
      from { transform: translate(0,0); }
      to   { transform: translate(28px, 18px); }
    }
    .wx-hero .container {
      position: relative; z-index: 2;
      padding-top: 100px;
      padding-bottom: 90px;
      text-align: center;
    }

    /* Trustpilot badge */
    .wx-trust-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 100px;
      padding: 7px 20px 7px 12px;
      margin-bottom: 28px;
      font-size: 13px;
      color: #c8d4e8;
      font-weight: 500;
      backdrop-filter: blur(8px);
      cursor: pointer;
      text-decoration: none;
      transition: background .2s, border-color .2s;
      animation: wxFadeDown .6s ease both;
    }
    .wx-trust-badge:hover {
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.22);
      color: #fff;
    }
    .wx-trust-badge .tp-stars { display:flex; gap:2px; }
    .wx-trust-badge .tp-stars span { font-size:14px; color:#fff; }
    .wx-trust-badge .tp-sep { width:1px; height:14px; background:rgba(255,255,255,.18); }
    .wx-trust-badge .tp-name { color:#fff; font-weight:700; font-size:12px; }
    .wx-trust-badge .tp-chevron { color:rgba(255,255,255,.35); font-size:13px; }

    /* Headline */
    .wx-hero h1 {
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.025em;
      margin-bottom: 20px;
      color: #fff;
      animation: wxFadeUp .7s .1s ease both;
    }
.wx-hero h1 .gradient-text {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}

    /* Subtítulo */
    .wx-hero .lead {
      color: rgba(200,212,230,.82);
      max-width: 520px;
      margin: 0 auto 34px;
      line-height: 1.7;
      font-size: 17px;
      animation: wxFadeUp .7s .2s ease both;
    }

    /* CTAs */
    .wx-hero-ctas {
      display: flex; flex-wrap: wrap; gap: 12px;
      align-items: center; justify-content: center;
      margin-bottom: 40px;
      animation: wxFadeUp .7s .3s ease both;
    }

    .wx-btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 30px;
      border-radius: 10px;
      background: #fff;
      color: #000;
      font-weight: 700;
      font-size: 15px;
      text-decoration: none;
      transition: background .2s, transform .2s, box-shadow .2s;
      box-shadow: 0 4px 24px rgba(255,255,255,.15);
    }
    .wx-btn-primary:hover {
      background: #e2e2e2;
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(255,255,255,.22);
      color: #000;
    }

    .wx-btn-secondary {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 12px 26px;
      border-radius: 10px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.15);
      color: #c8d4e8;
      font-weight: 600;
      font-size: 15px;
      text-decoration: none;
      transition: all .2s;
      backdrop-filter: blur(6px);
    }
    .wx-btn-secondary:hover {
      background: rgba(255,255,255,.13);
      border-color: rgba(255,255,255,.28);
      color: #fff;
    }

    /* Product pills */
    .wx-hero-pills {
      display: flex; flex-wrap: wrap; gap: 10px;
      align-items: center; justify-content: center;
      animation: wxFadeUp .7s .4s ease both;
    }
    .wx-hero-pill {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 100px;
      padding: 7px 16px;
      font-size: 13px; color: rgba(200,212,230,.80);
      font-weight: 500; text-decoration: none;
      transition: background .2s, border-color .2s, color .2s;
    }
    .wx-hero-pill:hover {
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.35);
      color: #fff;
    }

    @keyframes wxFadeDown {
      from { opacity:0; transform:translateY(-14px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes wxFadeUp {
      from { opacity:0; transform:translateY(18px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* Painel direito: status card */
    .wx-status-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
      backdrop-filter: blur(12px);
    }
    .wx-status-header {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 20px; font-size: 14px; color: var(--text-muted);
    }
    .wx-status-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.1); color: var(--green);
      border: 1px solid rgba(255,255,255,.25);
      padding: 4px 12px; border-radius: 20px;
      font-size: 12px; font-weight: 600;
    }
    .wx-status-badge::before {
      content: ''; width: 7px; height: 7px;
      border-radius: 50%; background: var(--green);
      animation: pulse 2s infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

    .wx-metrics {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 10px; margin-bottom: 22px;
    }
    .wx-metric {
      background: rgba(255,255,255,.04);
      border-radius: var(--radius-md);
      padding: 14px; text-align: center;
    }
    .wx-metric-label { font-size: 10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
    .wx-metric-value { font-size: 22px; font-weight: 700; }

    .wx-bar-group { display:flex; flex-direction:column; gap:14px; }
    .wx-bar-label { font-size:13px; color:var(--text-muted); margin-bottom:6px; }
    .wx-bar-track { height:6px; background:#1e293b; border-radius:10px; overflow:hidden; }
    .wx-bar-fill { height:6px; border-radius:10px; transition:width 1s ease; }
    .wx-bar-fill.cpu  { background:#fff; }
    .wx-bar-fill.mem  { background:#cbd5e1; }
    .wx-bar-fill.disk { background:#94a3b8; }

    /* ===========================
       SEÇÃO DE PLANOS — REDESIGN
    =========================== */
    .wx-plans-section {
      background: #030712;
      padding: 90px 0;
    }
    .wx-section-label {
      font-size: 13px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .12em; color: var(--purple); margin-bottom: 12px;
    }
    .wx-section-title {
      font-size: clamp(28px, 4vw, 42px); font-weight: 800;
      color: #fff; letter-spacing: -.02em; line-height: 1.2;
      margin-bottom: 14px;
    }
    .wx-section-sub {
      font-size: 16px; color: var(--text-muted); max-width: 540px;
      margin: 0 auto 48px; line-height: 1.7;
    }

    /* Toggle anual/mensal */
    .wx-billing-toggle {
      display: inline-flex; align-items: center; gap: 12px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border);
      border-radius: 40px; padding: 6px 18px;
      margin-bottom: 40px; font-size: 14px; color: var(--text-muted);
      cursor: pointer;
    }
    .wx-billing-toggle .toggle-switch {
      width: 42px; height: 24px;
      background: var(--grad-main); border-radius: 20px;
      position: relative; transition: .2s;
    }
    .wx-billing-toggle .toggle-switch::after {
      content: ''; width: 18px; height: 18px;
      background: #fff; border-radius: 50%;
      position: absolute; top: 3px; right: 3px;
      transition: .2s;
    }
    .wx-billing-badge {
      background: rgba(255,255,255,.1);
      color: var(--green);
      border: 1px solid rgba(255,255,255,.25);
      font-size: 11px; font-weight: 700;
      padding: 2px 8px; border-radius: 20px;
    }

    /* Grid de planos */
    .wx-plans-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 960px;
      margin: 0 auto;
    }
    @media(max-width:900px){ .wx-plans-grid { grid-template-columns:1fr; max-width:420px; } }

    .wx-plan-card {
      background: rgba(255,255,255,.035);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 32px 28px;
      position: relative;
      transition: transform .25s, box-shadow .25s, border-color .25s;
    }
    .wx-plan-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(0,0,0,.4);
    }
    .wx-plan-card.featured {
      border-color: rgba(255,255,255,.4);
      background: rgba(255,255,255,.06);
      box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 20px 60px rgba(0,0,0,.35);
    }
    .wx-plan-card.featured:hover { transform: translateY(-8px); }

    .wx-plan-badge {
      position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
      background: var(--grad-main);
      color: #000; font-size: 11px; font-weight: 700;
      padding: 4px 16px; border-radius: 20px;
      white-space: nowrap;
    }

    .wx-plan-name {
      font-size: 14px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--text-muted); margin-bottom: 12px;
    }

    .wx-plan-price-block { margin-bottom: 6px; }
    .wx-plan-from { font-size: 12px; color: #475569; text-decoration: line-through; }
    .wx-plan-price {
      font-size: 44px; font-weight: 800; color: #fff;
      line-height: 1.1; letter-spacing: -.03em;
    }
    .wx-plan-price sup { font-size: 22px; vertical-align: super; font-weight: 700; }
    .wx-plan-price sub { font-size: 14px; font-weight: 400; color: var(--text-muted); }
    .wx-plan-discount {
      display: inline-block;
      background: rgba(255,255,255,.1); color: var(--green);
      font-size: 12px; font-weight: 700; border-radius: 6px;
      padding: 2px 8px; margin-bottom: 20px;
    }

    .wx-plan-cta {
      display: block; width: 100%; text-align: center;
      padding: 12px; border-radius: 10px;
      font-weight: 700; font-size: 15px;
      text-decoration: none; transition: .2s; margin-bottom: 24px;
    }
    .wx-plan-cta-primary {
      background: var(--grad-main); color: #000;
      box-shadow: 0 4px 20px rgba(255,255,255,.18);
    }
    .wx-plan-cta-primary:hover { opacity:.85; color:#000; transform:translateY(-1px); box-shadow:0 8px 28px rgba(255,255,255,.25); }
    .wx-plan-cta-outline {
      background: transparent; color: var(--text-muted);
      border: 1px solid var(--border);
    }
    .wx-plan-cta-outline:hover { border-color: rgba(255,255,255,.3); color: #fff; }

    .wx-plan-divider { height:1px; background:var(--border); margin-bottom:20px; }

    .wx-plan-features { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
    .wx-plan-features li {
      display:flex; align-items:flex-start; gap:10px;
      font-size:14px; color:var(--text-muted); line-height:1.5;
    }
    .wx-plan-features li .feat-icon { color:var(--green); flex-shrink:0; margin-top:2px; }
    .wx-plan-features li strong { color:#fff; }

    /* Garantia abaixo dos planos */
    .wx-guarantee-strip {
      display: flex; justify-content: center; align-items: center;
      gap: 32px; flex-wrap: wrap;
      margin-top: 40px; padding-top: 32px;
      border-top: 1px solid var(--border);
    }
    .wx-guarantee-item {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; color: var(--text-muted);
    }
    .wx-guarantee-item i { color: var(--green); font-size: 15px; }

    /* ===========================
       SEÇÃO DE SERVIÇOS — fundo branco
    =========================== */
    .wx-services-section {
      background: #fff; padding: 80px 0;
    }
    .wx-services-section .side-title .sub-title,
    .wx-services-section .side-title .title {
      color: #0a0a0a !important;
    }
    .wx-services-section .side-title .para {
      color: #52525b !important;
      opacity: 1 !important;
    }
    .wx-services-section .theme-btn.--fill-primary {
      color: #fff !important;
      border-color: #000 !important;
      background-color: #000 !important;
      box-shadow: none !important;
    }
    .wx-services-section .theme-btn.--fill-primary:hover {
      border-color: #262626 !important;
      background-color: #262626 !important;
      box-shadow: none !important;
    }

    /* ===========================
       FEATURES / DIFERENCIAIS
    =========================== */
    .features-section .box {
      transition: transform .25s, box-shadow .25s;
    }
    .features-section .box:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,.25);
    }

    /* ===========================
       DEPOIMENTOS
    =========================== */
    .wx-testimonials {
      background: #030712; padding: 90px 0;
    }
    .wx-testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px; margin-top: 48px;
    }
    @media(max-width:900px){ .wx-testimonials-grid { grid-template-columns:1fr; } }

    .wx-testimonial-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
      transition: transform .25s;
    }
    .wx-testimonial-card:hover { transform: translateY(-4px); }
    .wx-testimonial-stars { color: var(--yellow); font-size: 14px; margin-bottom: 14px; }
    .wx-testimonial-text {
      font-size: 15px; color: var(--text-muted);
      line-height: 1.75; margin-bottom: 20px; font-style: italic;
    }
    .wx-testimonial-author {
      display: flex; align-items: center; gap: 12px;
    }
    .wx-testimonial-avatar {
      width: 42px; height: 42px; border-radius: 50%;
      background: var(--grad-alt); display:flex; align-items:center;
      justify-content:center; font-weight:700; font-size:16px; color:#fff;
      flex-shrink:0;
    }
    .wx-testimonial-name { font-size:14px; font-weight:700; color:#fff; }
    .wx-testimonial-role { font-size:12px; color:#475569; }

    /* ===========================
       UTILITÁRIOS
    =========================== */
    .sr-only {
      position:absolute; width:1px; height:1px;
      padding:0; margin:-1px; overflow:hidden;
      clip:rect(0,0,0,0); border:0;
    }
    .text-center { text-align:center; }
    .text-gradient {
      background: var(--grad-main);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
    }

    /* ===========================
       SEÇÃO LOJA ONLINE — texto neutro
       (o tema usa azul-marinho por padrão;
       aqui forçamos preto/cinza)
    =========================== */
    .se-v .text .sub-title { color: #52525b !important; }
    .se-v .text .title-1   { color: #0a0a0a !important; }
    .se-v .text .para-1    { color: #52525b !important; }
    .se-v .text .theme-btn.--fill-primary {
      color: #fff !important;
      border-color: #000 !important;
      background-color: #000 !important;
      box-shadow: none !important;
    }
    .se-v .text .theme-btn.--fill-primary:hover {
      border-color: #262626 !important;
      background-color: #262626 !important;
      box-shadow: none !important;
    }