:root{
    --brand-500:#3A58EF;
    --brand-800:#182878;
    --heading-navy:#26244A;
    --body-navy:#2A3343;
    --border-gray:#EAECF0;
    --icon-bg:#EBEEFD;
    --white:#FFFFFF;
  }

  *{ box-sizing:border-box; }

  body{
    /* font-family:'Inter', sans-serif;
    background:#0B1220;
    margin:0;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px; */
  }

  /* ============ OVERLAY / BACKDROP ============ */
  .popup-backdrop{
    position:fixed;
    inset:0;
    background:rgba(4,9,42,0.55);
    display:none;
    align-items:center;
    /* on short viewports the card can be taller than the screen; plain
       align-items:center clips the overflow so it can't be scrolled to -
       'safe center' falls back to start-alignment once it no longer fits */
    align-items:safe center;
    justify-content:center;
    overflow-y:auto;
    padding:20px;
    /* z-index:1000; */
    z-index:9999;
  }
  .popup-backdrop.show{
    display:flex !important;
  }
  .popup-backdrop.hidden{
    display:none !important;
  }
  /* Transitional state while the modal is being dismissed - keeps it visible/centered
     just long enough to fade out smoothly instead of cutting straight to display:none */
  .popup-backdrop.closing{
    display:flex !important;
    opacity:0 !important;
    transition:opacity .25s ease !important;
  }

  .popup-backdrop .modal-dialog{
    margin:0;
    max-width:100%;
    min-width:0;
    width:auto;
    pointer-events:auto;
  }
  .popup-backdrop .modal-content{
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
  }

  /* ============ POPUP CONTAINER ============ */
  .mycpe-popup{
    position:relative;
    width:733px;
    max-width:100%;
    background:var(--white);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(4,9,42,0.35);
  }

  /* Decorative gradient artwork behind the whole card (from Figma bg.svg) */
  .popup-decor{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    overflow:hidden;
    border-radius:16px;
  }
  .popup-decor svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
  }

  /* ============ CONTENT ============ */
  .popup-content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px;
    padding:24px;
  }

  .content-stack{ gap:24px; }

  /* ---- top bar: logo + close ---- */
  .popup-topbar{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    width:100%;
  }
  .popup-logo{ height:32px; }
  .popup-close{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    padding:0;
    cursor:pointer;
    line-height:0;
  }
  .popup-close svg{ width:24px; height:24px; }
  .popup-close:hover svg path{ stroke:var(--brand-500); }

  /* ---- intro text ---- */
  .popup-heading{
    font-weight:700;
    font-size:36px;
    line-height:1.2;
    letter-spacing:-0.02em;
    color:var(--heading-navy);
    text-align:center;
    margin:0;
  }
  .popup-heading .accent{ color:var(--brand-500); }
  .popup-subtitle{
    font-weight:500;
    font-size:18px;
    line-height:28px;
    color:var(--body-navy);
    text-align:center;
    margin:12px 0 0 0;
  }

  .stats-row{ --bs-gutter-x:24px; }

  /* ---- stat cards (box-with-shadow-content skill: hard-offset hover shadow, rounded corners in both states) ---- */
  .stat-card{
    background:var(--white);
    border:1px solid var(--border-gray);
    border-radius:12px;
    padding:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    height:100%;
    box-shadow:0px 0px 0px 0px rgba(0,0,0,0);
    transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    cursor:pointer;
  }
  .stat-card:hover,
  .stat-card:active{
    border-color:#5D667B;
    border-radius:12px;
    box-shadow:4px 4px 0px 0px #000000;
    transform:translate(-2px,-2px);
  }
  .stat-icon{
    width:48px;
    height:48px;
    border-radius:8px;
    background:var(--icon-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background-color 0.25s ease;
  }
  .stat-icon svg{ width:24px; height:24px; }
  .stat-icon svg path{ transition:stroke 0.25s ease; }

  /* icon box turns dark navy + icon strokes turn white, only while the card is hovered/tapped */
  .stat-card:hover .stat-icon,
  .stat-card:active .stat-icon{
    background-color:#04092A;
  }
  .stat-card:hover .stat-icon svg path,
  .stat-card:active .stat-icon svg path{
    stroke:#FFFFFF;
  }
  .stat-number{
    font-weight:700;
    font-size:32px;
    line-height:44px;
    letter-spacing:-0.02em;
    color:var(--brand-500);
    text-align:center;
    margin:0;
  }
  .stat-label{
    font-weight:600;
    font-size:18px;
    line-height:32px;
    color:var(--body-navy);
    text-align:center;
    margin:0;
  }
  .stat-sub{
    font-weight:400;
    font-size:14px;
    line-height:20px;
    color:var(--body-navy);
    text-align:center;
    margin:0;
  }

  /* ---- feature pills ---- */
  .feature-pills{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    width:100%;
    margin-bottom:40px;
  }
  .pill{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--white);
    border:1px solid var(--border-gray);
    border-radius:50px;
    padding:6px 16px;
    white-space:nowrap;
  }
  .pill svg{ width:20px; height:20px; flex-shrink:0; }
  .pill span{
    font-weight:600;
    font-size:16px;
    line-height:32px;
    color:var(--body-navy);
  }
  .pill-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--brand-500);
    flex-shrink:0;
  }

  /* ---- CTA banner ---- */
  .cta-banner{
    position:relative;
    width:100%;
    min-height:125px;
    background:var(--brand-800);
    border-radius:16px;
    padding:16px 30px 16px 24px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    overflow:visible;
  }
  .cta-illustration{
    position:absolute;
    left:39px;
    bottom:0;
    width:186px;
    pointer-events:none;
    z-index:2;
    line-height:0;
  }
  .cta-illustration svg{
    width:100%;
    height:auto;
    display:block;
    filter:drop-shadow(0 8px 12px rgba(0,0,0,0.25));
  }
  .cta-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--white);
    border:none;
    border-radius:4px;
    padding:12px 20px;
    box-shadow:0 1px 2px rgba(16,24,40,0.05);
    white-space:nowrap;
    cursor:pointer;
    text-decoration:none;
    flex-shrink:0;
    transition:background-color 0.2s ease;
  }
  .cta-btn:hover{ background:#F3F4FF; }
  .cta-btn-text{
    font-family:'Inter', sans-serif;
    font-weight:600;
    margin:0;
  }
  .cta-btn-text .txt-dark{
    font-size:20px;
    line-height:30px;
    color:#101828;
  }
  .cta-btn-text .txt-price{
    font-size:36px;
    line-height:44px;
    letter-spacing:-0.02em;
    color:var(--brand-500);
  }
  .cta-btn svg{ width:32px; height:32px; flex-shrink:0; }

  /* ================= RESPONSIVE ================= */
  @media (max-width: 767.98px){
    .popup-content{ padding:20px 16px; gap:24px; }
    .popup-heading{ font-size:26px; }
    .popup-subtitle{ font-size:16px; line-height:24px; }
    .stat-number{ font-size:24px; line-height:32px; }
    .stat-label{ font-size:16px; line-height:24px; }
    .stat-sub{ font-size:12px; }
    .stat-icon{ width:40px; height:40px; }
    .stat-icon svg{ width:20px; height:20px; }
    .stat-card{ padding:12px 8px; gap:8px; }
    .stats-row{ --bs-gutter-x:12px; }
    .stat-card:hover,
    .stat-card:active{
      box-shadow:3px 3px 0px 0px #000000;
      transform:translate(-1px,-1px);
    }
    .feature-pills{ gap:8px; }
    .pill{ padding:5px 12px; }
    .pill span{ font-size:13px; line-height:24px; }
    .pill svg{ width:18px; height:18px; }
    .pill-dot{ display:none; }

    .content-stack{ gap:28px; }

    .cta-banner{
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-end;
      min-height:0;
      padding:16px;
      padding-top:128px;
      margin-top:32px;
    }
    .cta-illustration{
      left:50%;
      top:-18px;
      bottom:auto;
      transform:translateX(-50%);
      width:150px;
    }
    .cta-btn{ width:100%; flex-wrap:wrap; padding:14px 16px; }
    .cta-btn-text{ text-align:center; }
    .cta-btn-text .txt-dark{ font-size:15px; line-height:22px; }
    .cta-btn-text .txt-price{ font-size:26px; line-height:32px; }
    .cta-btn svg{ width:26px; height:26px; }
  }

  @media (max-width: 420px){
    .stats-row{ row-gap:12px; }
  }

  /* Ultra-narrow screens (e.g. Galaxy Z Fold cover display, ~280px): the
     full-width logo crowds into the close button with no room to spare. */
  @media (max-width: 340px){
    .popup-logo{ height:22px; }
    .popup-close{ width:20px; height:20px; }
    .popup-close svg{ width:20px; height:20px; }
  }