:root {
      --dark: #06101f;
      --dark-2: #0a1c35;
      --blue: #1677ff;
      --blue-light: #42b2ff;
      --purple: #7a3cff;
      --green: #21c963;

      --text: #152238;
      --muted: #68778d;

      --white: #ffffff;
      --light: #f5f8fc;
      --border: #e5eaf2;

      --shadow: 0 20px 60px rgba(20, 45, 90, 0.12);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Inter", sans-serif;
      color: var(--text);
      background: var(--white);
      line-height: 1.6;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    .container {
      width: min(1160px, 92%);
      margin: auto;
    }

    section {
      padding: 95px 0;
    }

    /* =========================
       NAVBAR
    ========================== */

    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;

      background: rgba(6, 16, 31, 0.94);
      backdrop-filter: blur(15px);

      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .nav-inner {
      min-height: 76px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      gap: 25px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 11px;

      color: white;
      font-size: 23px;
      font-weight: 800;
      letter-spacing: 4px;
    }

    .logo-icon {
      width: 34px;
      height: 34px;

      border-radius: 9px;

      background:
        linear-gradient(
          135deg,
          var(--blue-light),
          var(--purple)
        );

      transform: rotate(45deg);
      position: relative;
    }

    .logo-icon::after {
      content: "";

      position: absolute;

      width: 15px;
      height: 15px;

      top: 10px;
      left: 10px;

      border-radius: 4px;

      background: var(--dark);
    }

    nav {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    nav a {
      color: #dce7f8;
      font-size: 14px;
      font-weight: 500;

      transition: .2s ease;
    }

    nav a:hover {
      color: white;
    }

    .nav-cta {
      padding: 11px 20px;

      background: var(--blue);

      border-radius: 10px;

      color: white !important;
      font-weight: 700;
    }

    /* =========================
       BUTTONS
    ========================== */

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: 15px 24px;

      border-radius: 11px;

      font-weight: 700;

      transition:
        transform .2s ease,
        box-shadow .2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
    }

    .btn-primary {
      background: var(--blue);
      color: white;

      box-shadow:
        0 12px 25px rgba(22,119,255,.22);
    }

    .btn-primary:hover {
      box-shadow:
        0 16px 30px rgba(22,119,255,.30);
    }

    .btn-whatsapp {
      background: var(--green);
      color: white;

      box-shadow:
        0 12px 25px rgba(33,201,99,.20);
    }

    /* =========================
       HERO
    ========================== */

    .hero {
      min-height: 760px;

      padding-top: 150px;
      padding-bottom: 80px;

      display: flex;
      align-items: center;

      color: white;

      background:
        radial-gradient(
          circle at 80% 30%,
          rgba(56,125,255,.22),
          transparent 35%
        ),
        radial-gradient(
          circle at 25% 85%,
          rgba(122,60,255,.16),
          transparent 30%
        ),
        linear-gradient(
          135deg,
          #06101f,
          #0a1c35
        );
    }

    .hero-grid {
      display: grid;

      grid-template-columns: 1.08fr .92fr;

      gap: 70px;

      align-items: center;
    }

    .badge {
      display: inline-flex;

      padding: 8px 15px;

      border: 1px solid rgba(255,255,255,.2);

      border-radius: 100px;

      background: rgba(255,255,255,.06);

      font-size: 13px;

      margin-bottom: 24px;
    }

    .hero h1 {
      font-size: clamp(44px, 6vw, 76px);

      line-height: 1.04;

      letter-spacing: -3px;

      margin-bottom: 24px;
    }

    .gradient {
      background:
        linear-gradient(
          90deg,
          #46b1ff,
          #9a69ff
        );

      -webkit-background-clip: text;
      background-clip: text;

      color: transparent;
    }

    .hero p {
      max-width: 650px;

      color: #c7d4e9;

      font-size: 19px;

      margin-bottom: 34px;
    }

    .hero-buttons {
      display: flex;

      flex-wrap: wrap;

      gap: 14px;
    }

    .hero-card {
      position: relative;

      padding: 25px;

      border-radius: 24px;

      background: rgba(255,255,255,.08);

      border: 1px solid rgba(255,255,255,.12);

      box-shadow:
        0 30px 70px rgba(0,0,0,.25);
    }

    .browser {
      overflow: hidden;

      border-radius: 14px;

      background: white;

      color: var(--text);
    }

    .browser-top {
      height: 38px;

      display: flex;
      align-items: center;

      gap: 6px;

      padding: 0 12px;

      background: #edf1f6;
    }

    .dot {
      width: 8px;
      height: 8px;

      border-radius: 50%;

      background: #bcc7d3;
    }

    .browser-content {
      min-height: 330px;

      padding: 42px 32px;

      background:
        linear-gradient(
          135deg,
          #fafcff,
          #edf4ff
        );
    }

    .browser-content small {
      color: var(--blue);

      font-weight: 800;

      letter-spacing: 1px;
    }

    .browser-content h3 {
      margin-top: 12px;

      font-size: 36px;

      line-height: 1.13;
    }

    .browser-content p {
      color: var(--muted);

      font-size: 14px;

      margin: 16px 0 22px;
    }

    /* =========================
       TRUST
    ========================== */

    .trust {
      background: white;

      border-bottom: 1px solid var(--border);
    }

    .trust-grid {
      padding: 26px 0;

      display: grid;

      grid-template-columns: repeat(4, 1fr);

      gap: 20px;

      text-align: center;
    }

    .trust strong {
      display: block;

      font-size: 15px;
    }

    .trust span {
      color: var(--muted);

      font-size: 13px;
    }

    /* =========================
       SECTION HEADER
    ========================== */

    .section-header {
      max-width: 760px;

      margin: 0 auto 55px;

      text-align: center;
    }

    .eyebrow {
      color: var(--blue);

      text-transform: uppercase;

      letter-spacing: 2px;

      font-size: 13px;

      font-weight: 800;
    }

    .section-header h2 {
      margin: 12px 0 16px;

      font-size:
        clamp(34px, 4vw, 52px);

      line-height: 1.12;

      letter-spacing: -2px;
    }

    .section-header p {
      color: var(--muted);

      font-size: 17px;
    }

    /* =========================
       PRICING
    ========================== */

    .pricing {
      background: var(--light);
    }

    .pricing-grid {
      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap: 24px;

      align-items: stretch;
    }

    .price-card {
      position: relative;

      display: flex;
      flex-direction: column;

      padding: 34px;

      border-radius: 22px;

      background: white;

      border: 1px solid var(--border);

      box-shadow: var(--shadow);
    }

    .price-card.featured {
      border: 2px solid var(--purple);

      transform: scale(1.03);
    }

    .popular {
      position: absolute;

      top: -14px;
      right: 24px;

      padding: 7px 13px;

      border-radius: 100px;

      background: var(--purple);

      color: white;

      font-size: 11px;
      font-weight: 800;

      text-transform: uppercase;
    }

    .price-card h3 {
      font-size: 26px;
    }

    .price-subtitle {
      min-height: 48px;

      margin-top: 5px;

      color: var(--muted);

      font-size: 14px;
    }

    .price {
      margin: 24px 0 2px;

      font-size: 40px;

      font-weight: 800;

      letter-spacing: -2px;
    }

    .price small {
      font-size: 14px;

      letter-spacing: 0;
    }

    .payment {
      margin-bottom: 22px;

      color: var(--muted);

      font-size: 12px;
    }

    .extra {
      margin-bottom: 22px;

      padding: 15px;

      border-radius: 12px;

      background:
        linear-gradient(
          135deg,
          rgba(22,119,255,.10),
          rgba(122,60,255,.10)
        );

      border:
        1px solid rgba(22,119,255,.14);
    }

    .extra strong {
      display: block;

      margin-bottom: 4px;

      color: var(--blue);

      font-size: 14px;
    }

    .extra span {
      color: var(--muted);

      font-size: 12px;

      line-height: 1.45;
    }

    .features {
      flex: 1;

      margin-bottom: 30px;

      list-style: none;
    }

    .features li {
      display: flex;

      gap: 9px;

      padding: 8px 0;

      font-size: 14px;
    }

    .features li::before {
      content: "✓";

      color: var(--blue);

      font-weight: 800;
    }

    .price-card .btn {
      width: 100%;
    }

    .pricing-note {
      margin-top: 35px;

      color: var(--muted);

      text-align: center;

      font-size: 12px;
    }

    /* =========================
       SERVICES
    ========================== */

    .services-grid {
      display: grid;

      grid-template-columns:
        repeat(3, 1fr);

      gap: 22px;
    }

    .service {
      padding: 30px;

      border-radius: 18px;

      border: 1px solid var(--border);

      transition: .2s ease;
    }

    .service:hover {
      transform: translateY(-5px);

      box-shadow: var(--shadow);
    }

    .service-icon {
      width: 47px;
      height: 47px;

      display: grid;
      place-items: center;

      margin-bottom: 20px;

      border-radius: 12px;

      background:
        linear-gradient(
          135deg,
          var(--blue),
          var(--purple)
        );

      color: white;

      font-size: 20px;
    }

    .service h3 {
      margin-bottom: 10px;
    }

    .service p {
      color: var(--muted);

      font-size: 14px;
    }

    /* =========================
       PROCESS
    ========================== */

    .process {
      background: var(--dark);

      color: white;
    }

    .process .section-header p {
      color: #aebbd0;
    }

    .steps {
      display: grid;

      grid-template-columns:
        repeat(4, 1fr);

      gap: 28px;
    }

    .step-number {
      color: rgba(73,154,255,.32);

      font-size: 56px;

      font-weight: 800;
    }

    .step h3 {
      margin-bottom: 8px;

      font-size: 20px;
    }

    .step p {
      color: #aebbd0;

      font-size: 14px;
    }

    /* =========================
       WHY
    ========================== */

    .why-grid {
      display: grid;

      grid-template-columns: 1fr 1fr;

      align-items: center;

      gap: 70px;
    }

    .why h2 {
      margin: 12px 0 20px;

      font-size: 48px;

      line-height: 1.12;

      letter-spacing: -2px;
    }

    .why-description {
      margin-bottom: 30px;

      color: var(--muted);
    }

    .benefits {
      display: grid;

      grid-template-columns:
        1fr 1fr;

      gap: 18px;
    }

    .benefit {
      padding: 20px;

      border-radius: 13px;

      border: 1px solid var(--border);
    }

    .benefit strong {
      display: block;

      margin-bottom: 5px;
    }

    .benefit span {
      color: var(--muted);

      font-size: 13px;
    }

    .stats {
      padding: 45px;

      border-radius: 25px;

      color: white;

      background:
        linear-gradient(
          135deg,
          var(--blue),
          var(--purple)
        );
    }

    .stat {
      padding: 22px 0;

      border-bottom:
        1px solid rgba(255,255,255,.2);
    }

    .stat:last-child {
      border: none;
    }

    .stat strong {
      display: block;

      font-size: 36px;
    }

    .stat span {
      font-size: 14px;

      opacity: .85;
    }

    /* =========================
       FAQ
    ========================== */

    .faq {
      background: var(--light);
    }

    .faq-list {
      max-width: 850px;

      margin: auto;
    }

    details {
      margin-bottom: 12px;

      padding: 20px 24px;

      border-radius: 13px;

      background: white;

      border: 1px solid var(--border);
    }

    summary {
      cursor: pointer;

      font-weight: 700;
    }

    details p {
      margin-top: 14px;

      color: var(--muted);

      font-size: 14px;
    }

    /* =========================
       CTA
    ========================== */

    .cta-section {
      padding: 80px 0;
    }

    .cta-box {
      padding: 65px;

      border-radius: 28px;

      text-align: center;

      color: white;

      background:
        radial-gradient(
          circle at 80%,
          rgba(105,88,255,.38),
          transparent 35%
        ),
        var(--dark);
    }

    .cta-box h2 {
      max-width: 720px;

      margin: auto;

      font-size: 46px;

      line-height: 1.1;
    }

    .cta-box p {
      max-width: 600px;

      margin: 20px auto 30px;

      color: #bfcce0;
    }

    /* =========================
       FOOTER
    ========================== */

    footer {
      padding: 50px 0 25px;

      background: #050d18;

      color: #9dacbf;
    }

    .footer-grid {
      display: grid;

      grid-template-columns:
        2fr 1fr 1fr;

      gap: 50px;

      margin-bottom: 40px;
    }

    footer h4 {
      margin-bottom: 14px;

      color: white;
    }

    footer p,
    footer a {
      font-size: 13px;
    }

    footer a {
      display: block;

      margin: 8px 0;
    }

    footer a:hover {
      color: white;
    }

    .copyright {
      padding-top: 25px;

      border-top:
        1px solid rgba(255,255,255,.08);

      font-size: 12px;

      text-align: center;
    }

    /* =========================
       FLOATING WHATSAPP
    ========================== */

    .floating-wa {
      position: fixed;

      right: 22px;
      bottom: 22px;

      z-index: 999;

      width: 60px;
      height: 60px;

      display: grid;
      place-items: center;

      border-radius: 50%;

      background: var(--green);

      color: white;

      font-size: 26px;

      box-shadow:
        0 12px 30px rgba(0,0,0,.25);

      transition: .2s ease;
    }

    .floating-wa:hover {
      transform: scale(1.07);
    }

    /* =========================
       RESPONSIVE
    ========================== */

    @media (max-width: 900px) {

      nav a:not(.nav-cta) {
        display: none;
      }

      .hero-grid,
      .why-grid {
        grid-template-columns: 1fr;
      }

      .pricing-grid,
      .services-grid {
        grid-template-columns: 1fr;
      }

      .price-card.featured {
        transform: none;
      }

      .steps {
        grid-template-columns:
          1fr 1fr;
      }

      .trust-grid {
        grid-template-columns:
          1fr 1fr;
      }

      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {

      .hero {
        padding-top: 125px;
      }

      .hero h1 {
        letter-spacing: -2px;
      }

      .hero-card {
        padding: 14px;
      }

      .browser-content {
        padding: 25px;
      }

      section {
        padding: 70px 0;
      }

      .steps,
      .benefits {
        grid-template-columns: 1fr;
      }

      .cta-box {
        padding: 45px 22px;
      }

      .cta-box h2 {
        font-size: 34px;
      }
    }