:root{
      --bg: #0d1117;
      --card: #111827cc; /* glass */
      --muted: #9ca3af;
      --text: #e5e7eb;
      --brand: #1E90FF;   /* azul elétrico */
      --accent: #39FF14;  /* verde neon */
      --brand-600:#1874cc;
      --brand-700:#125da3;
      --ring: rgba(57,255,20,.25);
      --radius: 18px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --grad: radial-gradient(1200px 600px at 10% 10%, rgba(30,144,255,.15), transparent 60%),
              radial-gradient(800px 400px at 90% 20%, rgba(57,255,20,.12), transparent 60%),
              radial-gradient(1000px 500px at 50% 90%, rgba(30,144,255,.10), transparent 60%);
    }
    *{box-sizing:border-box}
    html,body{height:100%;}
    body{
      margin:0; background: var(--bg); color: var(--text); font-family: 'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif; line-height:1.55;
      background-image: linear-gradient(180deg, rgba(255,255,255,.03), transparent 20%), var(--grad);
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{width:min(1120px, 92%); margin-inline:auto}

    /* Header */
    header{position:sticky; top:0; backdrop-filter: blur(8px); background: #0d1117cc; border-bottom:1px solid #1f2937; z-index:30}
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
    .brand{display:flex; align-items:center; gap:12px}
    .brand-logo{width:40px; height:40px; border-radius:10px; background: linear-gradient(135deg, var(--brand), #2bb1ff); display:grid; place-items:center; box-shadow: 0 6px 16px rgba(30,144,255,.45)}
    .brand-logo span{font-weight:800}
    .brand-title{font-weight:800; letter-spacing:.3px}
    .brand-title b{color:var(--accent)}
    .nav-actions{display:flex; gap:10px}
    .btn{--bg:var(--brand); --bg2:var(--brand-600); --fg:white; padding:12px 18px; border-radius:12px; background: linear-gradient(180deg, var(--bg), var(--bg2)); color:var(--fg); font-weight:700; border:1px solid #2a5aa8; box-shadow: 0 8px 18px rgba(30,144,255,.25); transition: transform .2s ease, filter .2s ease}
    .btn:hover{transform: translateY(-1px); filter: brightness(1.05)}
    .btn-outline{background:transparent; border:1px solid #2a2f35; color:var(--text); font-weight:600}
    .btn-green{--bg: #39FF14; --bg2:#2bd10f; --fg:#052e0a; border-color:#1bb307; box-shadow: 0 8px 18px rgba(57,255,20,.25)}

    /* Hero */
    .hero{padding:72px 0 36px}
    .hero-wrap{display:grid; grid-template-columns: 1.2fr .9fr; align-items:center; gap:32px}
    .kicker{color:var(--accent); font-weight:800; letter-spacing:.4px; text-transform:uppercase; font-size:.88rem}
    h1{font-size:clamp(2.1rem, 3.6vw + 1rem, 3.6rem); line-height:1.1; margin:10px 0 12px; font-weight:900}
    .hero p{color:#cbd5e1; font-size:1.05rem; max-width:60ch}
    .hero-ctas{display:flex; gap:12px; margin-top:18px}
    .hero-card{background: linear-gradient( to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid #20242c; border-radius:var(--radius); padding:18px; box-shadow: var(--shadow)}
    .hero-card p{color:#9ca3af; font-size:1.2rem; text-align:center; margin-top:20px}
    .badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
    .badge{padding:6px 10px; border:1px solid #263042; border-radius:999px; font-size:.86rem; color:#bfdbfe}

    /* Features */
    .section{padding:56px 0}
    .section h2{font-size: clamp(1.6rem, 1.6vw + .9rem, 2.4rem); margin:0 0 14px; letter-spacing:.2px}
    .section p.lead{color:#cbd5e1; margin:0 0 22px}
    .grid-3{display:grid; grid-template-columns: repeat(3,1fr); gap:18px}
    .card{background: var(--card); border:1px solid #1f2937; border-radius:var(--radius); padding:22px; box-shadow: var(--shadow)}
    .card h3{margin:0 0 8px}
    .icon{width:38px; height:38px; border-radius:10px; background: linear-gradient(135deg, #1e90ff33, #39ff141f); display:grid; place-items:center; margin-bottom:12px; border:1px solid #263042}

    /* Devices Banner */
    .devices{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px; align-items:center}
    .devices .art{border-radius: var(--radius); overflow:hidden; border:1px solid #1f2937; box-shadow: var(--shadow)}

    /* Pricing */
    .pricing{padding:70px 0}
    .pricing .plans{display:grid; grid-template-columns: repeat(4,1fr); gap:18px}
    .plan{background:linear-gradient(180deg,#101827, #0c1422); border:1px solid #1f2937; border-radius:var(--radius); box-shadow: var(--shadow); overflow:hidden; position:relative}
    .plan header{background: linear-gradient(180deg, rgba(30,144,255,.18), rgba(30,144,255,0)); padding:18px; border-bottom:1px solid #1f2937}
    .plan h3{margin:0; font-size:1.15rem; letter-spacing:.3px}
    .price{display:flex; align-items:flex-end; gap:6px; margin:16px 0}
    .price .value{font-size:2.2rem; font-weight:900; color:var(--accent)}
    .price .period{color:#9ca3af; font-weight:600}
    .plan ul{list-style:none; padding:0 18px 18px; margin:0}
    .plan ul li{padding:8px 0; border-bottom:1px dashed #1f2937; color:#cbd5e1}
    .plan ul li:last-child{border-bottom:none}
    .plan .cta{padding:16px 18px; text-align:center; border-top:1px solid #1f2937; background: linear-gradient(180deg, rgba(30,144,255,.05), transparent)}

    /* CTA Banner */
    .cta-bar{background: linear-gradient(90deg, rgba(30,144,255,.15), rgba(57,255,20,.15)); border:1px solid #1f2937; border-radius:var(--radius); padding:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; box-shadow: var(--shadow)}

    /* FAQ */
    .faq{max-width:920px}
    details{background: var(--card); border:1px solid #1f2937; border-radius:14px; padding:14px 18px; margin-bottom:10px}
    details[open]{outline:2px solid var(--ring)}
    summary{cursor:pointer; font-weight:700}

    /* Footer */
    footer{padding:40px 0 20px; color:#9ca3af}

    /* Responsive */
    @media (max-width: 1024px){
      .hero-wrap{grid-template-columns:1fr}
      .devices{grid-template-columns:1fr}
      .pricing .plans{grid-template-columns: repeat(2,1fr)}
    }
    @media (max-width: 620px){
      .nav-actions{display:none}
      .grid-3{grid-template-columns:1fr}
      .pricing .plans{grid-template-columns:1fr}
    }