/* ─── RESET & BASE ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', sans-serif;
      background: #0A1628;
      color: #E8EDF2;
      line-height: 1.6;
      overflow-x: hidden;
    }

    /* ─── TOKENS ────────────────────────────────────────────────── */
    :root {
      --navy:       #0A1628;
      --navy-mid:   #0F1E36;
      --navy-card:  #132040;
      --steel:      #2E86AB;
      --steel-light:#4BA3C7;
      --gold:       #C9A84C;
      --gold-light: #E2C46E;
      --ice:        #F0F4F8;
      --muted:      #7A93B0;
      --border:     rgba(46,134,171,0.22);
      --radius:     12px;
      --wa:         #25D366;
    }

    /* ─── UTILS ─────────────────────────────────────────────────── */
    .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
    .tag {
      display: inline-block;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px; font-weight: 700;
      letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--gold); background: rgba(201,168,76,.12);
      border: 1px solid rgba(201,168,76,.3);
      padding: 4px 14px; border-radius: 100px;
      margin-bottom: 16px;
    }
    .section-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 800; line-height: 1.05;
      color: var(--ice);
    }
    .section-title span { color: var(--steel); }
    .section-sub {
      font-size: 17px; color: var(--muted);
      margin-top: 14px; max-width: 620px;
      line-height: 1.7;
    }
    .divider-diagonal {
      width: 100%; height: 60px; overflow: hidden;
      position: relative; margin: 0;
    }
    .divider-diagonal svg { width: 100%; height: 100%; display: block; }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 10px;
      background: linear-gradient(135deg, var(--steel), var(--steel-light));
      color: #fff; font-family: 'Barlow Condensed', sans-serif;
      font-size: 18px; font-weight: 700; letter-spacing: 1px;
      padding: 16px 36px; border-radius: 8px; border: none;
      cursor: pointer; text-decoration: none;
      transition: transform .2s, box-shadow .2s;
      box-shadow: 0 6px 28px rgba(46,134,171,.4);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(46,134,171,.55); }
    .btn-wa {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--wa); color: #fff;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 20px; font-weight: 700; letter-spacing: .5px;
      padding: 18px 42px; border-radius: 8px; border: none;
      cursor: pointer; text-decoration: none;
      transition: transform .2s, box-shadow .2s;
      box-shadow: 0 6px 28px rgba(37,211,102,.35);
    }
    .btn-wa:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(37,211,102,.5); }
    .btn-wa svg { width: 24px; height: 24px; fill: #fff; flex-shrink: 0; }

    /* ─── NAV ────────────────────────────────────────────────────── */
    nav {
      position: sticky; top: 0; z-index: 100;
      background: rgba(10,22,40,.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
      padding: 14px 0;
    }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; }
    .nav-logo { display: flex; align-items: center; gap: 12px; }
    .nav-logo img { height: 46px; width: auto; }
    .nav-name {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 17px; font-weight: 800;
      letter-spacing: 1.5px; color: var(--ice);
      line-height: 1.1;
    }
    .nav-name small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); letter-spacing: 2px; }
    .nav-cta { font-size: 14px; }
    .nav-cta span { font-size: 20px; }

    /* ─── HERO ───────────────────────────────────────────────────── */
    .hero {
      position: relative;
      min-height: 92vh; display: flex; align-items: center;
      background:
        radial-gradient(ellipse 70% 60% at 80% 50%, rgba(46,134,171,.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 10% 80%, rgba(201,168,76,.08) 0%, transparent 60%),
        var(--navy);
      padding: 80px 0 60px;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background: repeating-linear-gradient(
        -45deg,
        transparent 0px, transparent 38px,
        rgba(46,134,171,.03) 38px, rgba(46,134,171,.03) 40px
      );
      pointer-events: none;
    }
    .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
    .hero-eyebrow {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px; font-weight: 700; letter-spacing: 3px;
      text-transform: uppercase; color: var(--gold);
      margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
    }
    .hero-eyebrow::before {
      content: ''; display: inline-block;
      width: 32px; height: 2px; background: var(--gold);
    }
    .hero-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(42px, 6.5vw, 76px);
      font-weight: 800; line-height: 0.97;
      color: var(--ice); letter-spacing: -1px;
    }
    .hero-title .accent { color: var(--steel); display: block; }
    .hero-title .gold   { color: var(--gold); }
    .hero-desc {
      font-size: 17px; color: var(--muted);
      margin: 22px 0 36px; max-width: 520px; line-height: 1.75;
    }
    .hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
    .badge {
      display: flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,.05);
      border: 1px solid var(--border);
      padding: 8px 14px; border-radius: 100px;
      font-size: 13px; color: var(--muted);
    }
    .badge svg { width: 14px; height: 14px; fill: var(--steel); flex-shrink: 0; }
    .hero-image-side {
      display: flex; justify-content: center; align-items: center; position: relative;
    }
    .hero-logo-wrap {
      position: relative; width: 360px; height: 360px;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-logo-wrap::before {
      content: '';
      position: absolute; inset: -2px;
      border-radius: 50%;
      background: conic-gradient(from 0deg, var(--steel) 0%, transparent 40%, var(--gold) 70%, transparent 100%);
      animation: spin 10s linear infinite;
      opacity: .45;
    }
    .hero-logo-wrap::after {
      content: '';
      position: absolute; inset: 8px;
      border-radius: 50%;
      background: var(--navy-mid);
    }
    .hero-logo-img {
      position: relative; z-index: 1;
      width: 280px; height: 280px; object-fit: contain;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .stat-strip {
      display: flex; gap: 32px; margin-top: 42px;
      padding-top: 28px;
      border-top: 1px solid var(--border);
    }
    .stat-item {}
    .stat-val {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 40px; font-weight: 800; color: var(--steel); line-height: 1;
    }
    .stat-label { font-size: 12px; color: var(--muted); margin-top: 3px; letter-spacing: .5px; }

    /* ─── PROBLEM ────────────────────────────────────────────────── */
    .problem {
      background: var(--navy-mid);
      padding: 80px 0;
    }
    .problem-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
      margin-top: 50px;
    }
    .problem-list { list-style: none; }
    .problem-list li {
      display: flex; gap: 14px; align-items: flex-start;
      padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.06);
      font-size: 15px; color: var(--muted);
    }
    .problem-list li:last-child { border-bottom: none; }
    .problem-list .icon {
      width: 28px; height: 28px; flex-shrink: 0; margin-top: 1px;
      background: rgba(201,168,76,.12); border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
    }
    .problem-list .icon svg { width: 14px; height: 14px; fill: var(--gold); }
    .problem-cta-box {
      background: linear-gradient(135deg, rgba(46,134,171,.15), rgba(201,168,76,.08));
      border: 1px solid var(--border);
      border-radius: 16px; padding: 40px;
    }
    .problem-cta-box h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 28px; font-weight: 800; color: var(--ice); margin-bottom: 14px;
    }
    .problem-cta-box p { color: var(--muted); font-size: 15px; margin-bottom: 24px; }

    /* ─── MODALIDADES TABS ───────────────────────────────────────── */
    .modalidades { padding: 90px 0; background: var(--navy); }
    .tab-nav {
      display: flex; gap: 0; margin: 48px 0 48px;
      background: rgba(255,255,255,.04);
      border: 1px solid var(--border);
      border-radius: 12px; padding: 6px; width: fit-content;
    }
    .tab-btn {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 16px; font-weight: 700; letter-spacing: .5px;
      padding: 12px 30px; border-radius: 8px;
      border: none; background: transparent;
      color: var(--muted); cursor: pointer;
      transition: all .22s;
    }
    .tab-btn.active {
      background: linear-gradient(135deg, var(--steel), var(--steel-light));
      color: #fff;
      box-shadow: 0 4px 18px rgba(46,134,171,.45);
    }
    .tab-btn:hover:not(.active) { color: var(--ice); }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; animation: fadeIn .3s ease; }
    @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

    /* content layout inside tab */
    .includes-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
      margin-bottom: 48px;
    }
    .include-card {
      background: var(--navy-card);
      border: 1px solid var(--border);
      border-radius: 12px; padding: 24px;
      transition: border-color .2s, transform .2s;
    }
    .include-card:hover { border-color: var(--steel); transform: translateY(-3px); }
    .include-card .ic-icon {
      width: 42px; height: 42px;
      background: rgba(46,134,171,.14); border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px;
    }
    .include-card .ic-icon svg { width: 20px; height: 20px; fill: var(--steel); }
    .include-card h4 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 18px; font-weight: 700; color: var(--ice); margin-bottom: 8px;
    }
    .include-card p { font-size: 13.5px; color: var(--muted); line-height: 1.65; }

    /* ─── PLANOS ─────────────────────────────────────────────────── */
    .planos { padding: 90px 0; background: var(--navy-mid); }
    .planos-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px;
      margin-top: 48px;
    }
    .plan-card {
      background: var(--navy-card);
      border: 1px solid var(--border);
      border-radius: 14px; padding: 30px 26px;
      position: relative; transition: transform .22s, border-color .22s;
      display: flex; flex-direction: column;
    }
    .plan-card:hover { transform: translateY(-4px); border-color: var(--steel-light); }
    .plan-card.featured {
      border-color: var(--gold);
      background: linear-gradient(145deg, #132040, #0f1e36);
    }
    .plan-card.featured::before {
      content: 'MAIS ESCOLHIDO';
      position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
      background: var(--gold); color: #0A1628;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 10px; font-weight: 800; letter-spacing: 2px;
      padding: 4px 14px; border-radius: 100px;
    }
    .plan-period {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: var(--steel); margin-bottom: 12px;
    }
    .plan-price {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 46px; font-weight: 800; color: var(--ice); line-height: 1;
    }
    .plan-price .prefix { font-size: 20px; vertical-align: top; margin-top: 8px; display: inline-block; color: var(--muted); }
    .plan-price .cents { font-size: 22px; }
    .plan-note { font-size: 12px; color: var(--muted); margin-top: 6px; margin-bottom: 20px; }
    .plan-divider { height: 1px; background: var(--border); margin: 18px 0; }
    .plan-features { list-style: none; flex: 1; }
    .plan-features li {
      font-size: 13.5px; color: var(--muted);
      padding: 6px 0; display: flex; gap: 8px; align-items: flex-start;
    }
    .plan-features li svg { width: 14px; height: 14px; fill: var(--steel); flex-shrink: 0; margin-top: 2px; }
    .plan-cta { margin-top: 22px; }
    .plan-btn {
      display: block; text-align: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 16px; font-weight: 700; letter-spacing: .5px;
      padding: 13px; border-radius: 8px;
      text-decoration: none; border: none; cursor: pointer;
      transition: all .2s;
      background: rgba(46,134,171,.15);
      border: 1px solid var(--border); color: var(--steel-light);
    }
    .plan-card.featured .plan-btn {
      background: linear-gradient(135deg, var(--gold), var(--gold-light));
      border-color: transparent; color: #0A1628;
      box-shadow: 0 4px 20px rgba(201,168,76,.3);
    }
    .plan-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
    .planos-payment-note {
      text-align: center; color: var(--muted); font-size: 13px; margin-top: 28px;
    }
    .planos-payment-note strong { color: var(--ice); }
    .planos-discount-note {
      text-align: center; margin-top: 14px;
      font-size: 13px; color: var(--gold);
    }

    /* ─── DEPOIMENTOS ────────────────────────────────────────────── */
    .depoimentos { padding: 90px 0; background: var(--navy); }
    .dep-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
      margin-top: 48px;
    }
    .dep-card {
      background: var(--navy-card); border: 1px solid var(--border);
      border-radius: 14px; padding: 28px;
    }
    .dep-stars { color: var(--gold); font-size: 16px; margin-bottom: 14px; }
    .dep-text { font-size: 14.5px; color: var(--muted); line-height: 1.72; font-style: italic; }
    .dep-author { margin-top: 18px; display: flex; gap: 12px; align-items: center; }
    .dep-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: linear-gradient(135deg, var(--steel), var(--navy-mid));
      display: flex; align-items: center; justify-content: center;
      font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 800; color: #fff;
    }
    .dep-name { font-size: 14px; font-weight: 600; color: var(--ice); }
    .dep-role { font-size: 12px; color: var(--muted); }

    /* ─── FAQ ────────────────────────────────────────────────────── */
    .faq { padding: 90px 0; background: var(--navy-mid); }
    .faq-list { max-width: 760px; margin: 48px auto 0; }
    .faq-item {
      border-bottom: 1px solid var(--border);
      padding: 22px 0;
    }
    .faq-question {
      display: flex; justify-content: space-between; align-items: center; gap: 16px;
      cursor: pointer; font-size: 16px; font-weight: 600; color: var(--ice);
      list-style: none;
    }
    .faq-question::after {
      content: '+'; font-size: 22px; color: var(--steel);
      line-height: 1; flex-shrink: 0; transition: transform .2s;
    }
    .faq-item.open .faq-question::after { transform: rotate(45deg); }
    .faq-answer {
      font-size: 14.5px; color: var(--muted); line-height: 1.72;
      max-height: 0; overflow: hidden; transition: max-height .32s ease;
    }
    .faq-item.open .faq-answer { max-height: 400px; padding-top: 14px; }

    /* ─── FINAL CTA ──────────────────────────────────────────────── */
    .final-cta {
      padding: 100px 0;
      background:
        radial-gradient(ellipse 60% 70% at 50% 50%, rgba(46,134,171,.18) 0%, transparent 70%),
        var(--navy);
      text-align: center;
    }
    .final-cta .hero-title { max-width: 760px; margin: 0 auto 24px; }
    .final-cta p { font-size: 17px; color: var(--muted); max-width: 520px; margin: 0 auto 40px; }
    .final-cta .logo-small {
      width: 100px; margin: 0 auto 32px; display: block;
      opacity: .85;
    }
    .cta-pix { font-size: 13px; color: var(--muted); margin-top: 18px; }

    /* ─── FOOTER ─────────────────────────────────────────────────── */
    footer {
      background: #050E1C; padding: 32px 0;
      text-align: center; border-top: 1px solid var(--border);
    }
    footer img { height: 48px; margin-bottom: 12px; }
    footer p { font-size: 12px; color: var(--muted); }
    footer span { color: var(--steel); }

    /* ─── RESPONSIVE ─────────────────────────────────────────────── */
    @media (max-width: 768px) {
      .hero-grid { grid-template-columns: 1fr; }
      .hero-image-side { display: none; }
      .problem-grid { grid-template-columns: 1fr; }
      .stat-strip { gap: 20px; }
      .tab-nav { flex-direction: column; width: 100%; }
      .tab-btn { text-align: center; }
      .nav-cta { display: none; }
    }
    @media (max-width: 480px) {
      .plan-price { font-size: 36px; }
      .planos-grid { grid-template-columns: 1fr; }
      .dep-grid { grid-template-columns: 1fr; }
    }