:root{
      --ap-bg: #050B2E;
      --ap-text: #0f172a;
      --ap-muted: rgba(15, 23, 42, .72);
      --ap-shadow: 0 18px 60px rgba(2, 10, 40, .18);
      --ap-shadow2: 0 10px 28px rgba(2, 10, 40, .12);

      --ap-primary: #4f46e5;
      --ap-primary2: #7c3aed;
      --ap-success: #16a34a;
      --ap-warn: #f59e0b;

      --ap-radius: 22px;
    }

    .ap-wrap{ position: relative; overflow: hidden; }

    /* HERO – slightly more contrast + richer gradients */
    .ap-hero{
      position: relative;
      padding: 64px 0 26px;
      color: #fff;
      background:
        radial-gradient(1050px 620px at 18% 10%, rgba(79, 70, 229, .62), transparent 60%),
        radial-gradient(950px 560px at 82% 16%, rgba(124, 58, 237, .55), transparent 60%),
        radial-gradient(850px 600px at 55% 96%, rgba(16, 185, 129, .22), transparent 62%),
        linear-gradient(180deg, #040827 0%, #070A2A 52%, #080B26 100%);
    }

    .ap-noise{
      position:absolute; inset:0;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      opacity:.34;
      pointer-events:none;
    }

    .ap-orbs{
      position:absolute; inset:-160px -160px auto auto;
      width: 520px; height: 520px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 52%);
      transform: rotate(18deg);
      opacity: .65;
      pointer-events:none;
    }

    .ap-hero .ap-kicker{
      display:inline-flex; align-items:center; gap:10px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.09);
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 13px;
      color: rgba(255,255,255,.90);
      backdrop-filter: blur(10px);
    }
    .ap-dot{
      width:8px;height:8px;border-radius:999px;
      background: linear-gradient(135deg, #ffffff, rgba(255,255,255,.55));
      box-shadow: 0 0 0 4px rgba(255,255,255,.10);
    }
    .ap-h1{
      font-family: "Sora", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      letter-spacing: -0.02em;
      font-weight: 700;
      line-height: 1.08;
      margin: 12px 0 10px;
      font-size: clamp(28px, 3.3vw, 44px);
    }
    .ap-sub{
      margin:0;
      color: rgba(255,255,255,.86);
      font-size: 15.5px;
      line-height: 1.6;
      max-width: 900px;
    }

    .ap-heroActions{
      margin-top: 18px;
      display:flex; gap:12px; flex-wrap:wrap;
    }
    .ap-btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 12px 16px;
      border-radius: 14px;
      text-decoration:none;
      font-weight: 650;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.10);
      color: #fff;
      transition: .18s ease;
      backdrop-filter: blur(10px);
    }
    .ap-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); }
    .ap-btnPrimary{
      border-color: rgba(255,255,255,.22);
      background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(124,58,237,.82));
      box-shadow: 0 16px 34px rgba(79,70,229,.24);
    }
    .ap-btnPrimary:hover{ filter: brightness(1.03); }

    .ap-trust{
      display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
      padding: 10px 8px 0;
    }
    .ap-pill{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.86);
      font-size: 13px;
      white-space: nowrap;
    }

    /* ✅ FIX: Recommendation panel visibility (higher contrast) */
    .ap-panel{
      margin-top: 18px;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(7, 12, 45, .62);
      box-shadow: 0 22px 70px rgba(0,0,0,.28);
      padding: 16px;
      backdrop-filter: blur(14px);
    }
    .ap-panelTitle{
      color: rgba(255,255,255,.95);
      font-weight: 800;
      font-size: 16px;
      margin:0;
    }
    .ap-panelText{
      color: rgba(255,255,255,.82);
      font-size: 13.5px;
      line-height: 1.5;
      margin: 6px 0 0;
    }

    .ap-shell{
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 60%);
      padding: 0 0 50px;
    }

    .ap-pricing{
      margin-top: 16px;
      background: #f8fafc;
      border-radius: 26px;
      border: 1px solid rgba(15,23,42,.08);
      box-shadow: var(--ap-shadow2);
      padding: 22px 18px 18px;
    }
    .ap-sectionTitle{
      text-align:center;
      margin: 10px 0 6px;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--ap-text);
      font-size: clamp(22px, 2.2vw, 30px);
    }
    .ap-sectionSub{
      text-align:center;
      margin:0 0 16px;
      color: rgba(15,23,42,.70);
      font-size: 14.5px;
      line-height: 1.55;
    }

    .ap-card{
      height:100%;
      border-radius: var(--ap-radius);
      border: 1px solid rgba(15,23,42,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.72));
      box-shadow: var(--ap-shadow2);
      overflow:hidden;
      position:relative;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .ap-card:hover{ transform: translateY(-6px); box-shadow: var(--ap-shadow); border-color: rgba(15,23,42,.16); }

    .ap-card::before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(460px 240px at 20% 0%, rgba(79,70,229,.18), transparent 55%),
        radial-gradient(460px 240px at 85% 10%, rgba(16,185,129,.10), transparent 55%);
      opacity: .95;
      pointer-events:none;
    }

    .ap-cardHeader{
      position:relative;
      padding: 18px 18px 12px;
    }
    .ap-tagRow{
      display:flex; align-items:center; justify-content:space-between; gap:12px;
    }
    .ap-planName{ font-weight: 800; letter-spacing: -.01em; color: var(--ap-text); margin:0; font-size: 16px; }
    .ap-badge{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(15,23,42,.04);
      color: rgba(15,23,42,.72);
      white-space: nowrap;
    }

    .ap-priceRow{
      margin-top: 14px;
      display:flex; align-items:flex-end; gap:8px;
    }
    .ap-price{
      font-size: 34px;
      font-weight: 900;
      letter-spacing: -0.03em;
      color: var(--ap-text);
      line-height: 1;
    }
    .ap-per{
      padding-bottom: 5px;
      color: rgba(15,23,42,.60);
      font-size: 13px;
    }
    .ap-desc{
      margin: 10px 0 0;
      color: rgba(15,23,42,.70);
      font-size: 13.5px;
      line-height: 1.45;
    }

    .ap-cta{
      position:relative;
      padding: 0 18px 12px;
    }
    .ap-cta a{
      width:100%;
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      text-decoration:none;
      font-weight: 700;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(15,23,42,.04);
      color: rgba(15,23,42,.88);
      transition: .18s ease;
    }
    .ap-cta a:hover{ transform: translateY(-1px); background: rgba(15,23,42,.06); }

    .ap-cta .ap-primary{
      background: linear-gradient(135deg, rgba(79,70,229,.92), rgba(124,58,237,.82));
      color: #fff;
      border-color: rgba(79,70,229,.22);
      box-shadow: 0 18px 34px rgba(79,70,229,.18);
    }
    .ap-cta .ap-primary:hover{ filter: brightness(1.03); }

    /* ✅ NEW: Best for + What you get mini section */
    .ap-mini{
      position:relative;
      padding: 12px 18px 14px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      border-top: 1px solid rgba(15,23,42,.08);
      border-bottom: 1px solid rgba(15,23,42,.08);
      background: rgba(255,255,255,.55);
    }
    .ap-miniBox{
      border-radius: 14px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(255,255,255,.70);
      padding: 10px 10px;
      box-shadow: 0 10px 20px rgba(2,10,40,.06);
      min-height: 76px;
    }
    .ap-miniTitle{
      font-size: 11px;
      letter-spacing: .10em;
      text-transform: uppercase;
      font-weight: 900;
      color: rgba(15,23,42,.68);
      display:flex;
      align-items:center;
      gap:8px;
      margin-bottom: 6px;
    }
    .ap-miniTitle i{ color: rgba(79,70,229,.95); }
    .ap-miniText{
      margin:0;
      font-size: 13px;
      line-height: 1.35;
      color: rgba(15,23,42,.78);
      font-weight: 600;
    }
    .ap-miniBullets{
      margin: 0;
      padding-left: 16px;
      color: rgba(15,23,42,.74);
      font-size: 12.8px;
      line-height: 1.35;
    }

    .ap-feats{
      position:relative;
      padding: 14px 18px 18px;
      display:flex; flex-direction:column; gap: 10px;
    }
    .ap-feat{
      display:flex; gap:10px; align-items:flex-start;
      color: rgba(15,23,42,.72);
      font-size: 13.5px;
      line-height: 1.42;
    }
    .ap-ic{
      width: 18px; height: 18px;
      border-radius: 6px;
      display:grid; place-items:center;
      background: rgba(79,70,229,.10);
      border: 1px solid rgba(79,70,229,.18);
      margin-top: 2px;
      flex: 0 0 auto;
      color: rgba(79,70,229,.95);
    }
    .ap-ic i{ font-size: 12px; line-height: 1; }

    .ap-best{
      border-color: rgba(79,70,229,.28);
      background: linear-gradient(180deg, rgba(79,70,229,.08), rgba(255,255,255,.78));
      box-shadow: 0 26px 80px rgba(79,70,229,.14), var(--ap-shadow2);
    }
    .ap-bestRibbon{
      position:absolute; top: 14px; right: 14px;
      font-size: 11.5px;
      padding: 7px 10px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(79,70,229,.95), rgba(124,58,237,.78));
      color:#fff;
      border: 1px solid rgba(255,255,255,.22);
      box-shadow: 0 18px 40px rgba(79,70,229,.22);
      z-index: 3;
    }

    .ap-compare{
      margin-top: 18px;
      border-radius: 18px;
      overflow:hidden;
      border: 1px solid rgba(15,23,42,.10);
      box-shadow: var(--ap-shadow2);
      background: #fff;
    }
    .ap-compare table{ margin:0; }
    .ap-compare thead th{
      background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(124,58,237,.06));
      color: rgba(15,23,42,.86);
      font-weight: 800;
      padding: 14px 14px;
      border-bottom: 1px solid rgba(15,23,42,.10) !important;
      vertical-align: middle;
      white-space: nowrap;
    }
    .ap-compare tbody td{
      padding: 12px 14px;
      color: rgba(15,23,42,.74);
      vertical-align: middle;
      border-top: 1px solid rgba(15,23,42,.08) !important;
      font-size: 14px;
    }
    .ap-yes{ color: #0f766e; font-weight: 800; }
    .ap-no{ color: rgba(15,23,42,.45); }
    .ap-note{ color: rgba(15,23,42,.62); font-size: 13px; }

    .ap-faq{
      margin-top: 18px;
      border-radius: 22px;
      border: 1px solid rgba(15,23,42,.10);
      background: #fff;
      box-shadow: var(--ap-shadow2);
      padding: 18px;
    }
    .ap-faq .accordion-button{ font-weight: 800; color: rgba(15,23,42,.86); }
    .ap-faq .accordion-body{ color: rgba(15,23,42,.72); line-height: 1.6; }

    .ap-stickyCta{
      position: sticky;
      bottom: 0;
      z-index: 50;
      background: rgba(255,255,255,.90);
      border-top: 1px solid rgba(15,23,42,.10);
      backdrop-filter: blur(10px);
      padding: 10px 10px;
      display:none;
    }
    .ap-stickyCta a{
      width:100%;
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      text-decoration:none;
      font-weight: 800;
      background: linear-gradient(135deg, rgba(79,70,229,.92), rgba(124,58,237,.82));
      color:#fff;
    }
    @media (max-width: 768px){
      .ap-stickyCta{ display:block; }
      .ap-mini{ grid-template-columns: 1fr; }
    }