:root{
    --brand-blue: #1355d8;
    --brand-blue-dark: #0d3fa6;
    --brand-blue-light: #eaf1fd;
    --brand-cyan: #17c3ec;
    --ink: #12203c;
    --muted: #5c6b85;
    --bg-soft: #f4f8fe;
    --star: #ffb800;
    --whatsapp: #25d366;
  }

  *{ box-sizing:border-box; }

  body{
    font-family:'Poppins', sans-serif;
    color: var(--ink);
    background:#fff;
    padding-bottom: 76px;
    overflow-x: hidden;
  }

  h1,h2,h3,h4{ font-family:'Manrope','Poppins',sans-serif; font-weight:800; }

  a{ text-decoration:none; }
  img{ max-width:100%; display:block; }

  ::selection{ background: var(--brand-blue); color:#fff; }

  .text-brand{ color: var(--brand-blue) !important; }
  .bg-brand{ background: var(--brand-blue) !important; }

  .btn-brand{
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    border: 1px solid var(--brand-blue);
    color:#fff;
    font-weight:600;
    border-radius: 10px;
    padding: .75rem 1.5rem;
    box-shadow: 0 10px 22px rgba(19,85,216,.28);
    transition: all .22s ease;
  }
  .btn-brand:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(19,85,216,.36); color:#fff; }

  .btn-outline-brand{
    background:#fff;
    border: 1.5px solid var(--brand-blue);
    color: var(--brand-blue);
    font-weight:600;
    border-radius: 10px;
    padding: .75rem 1.5rem;
    transition: all .22s ease;
  }
  .btn-outline-brand:hover{ background: var(--brand-blue-light); color: var(--brand-blue); transform: translateY(-2px); }

  /* ===== Navbar ===== */
  .navbar{
    padding: .85rem 0;
    box-shadow: 0 2px 20px rgba(20,33,58,.07);
    transition: box-shadow .2s ease;
  }
  .navbar-brand{
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ink);
    display:flex;
    align-items:center;
    gap:.6rem;
    line-height:1.1;
  }
  .brand-icon-wrap{
    width:42px; height:42px; border-radius:12px;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 14px rgba(19,85,216,.3);
    overflow:hidden;
    flex-shrink:0;
  }
  .brand-icon-wrap img{ width:100%; height:100%; object-fit:cover; }
  .navbar-brand .brand-sub{
    display:block;
    font-size:.66rem;
    font-weight:500;
    color: var(--muted);
    letter-spacing:.03em;
    text-transform:uppercase;
  }
  .nav-link{
    color: var(--ink) !important;
    font-weight:500;
    font-size:.94rem;
    position:relative;
  }
  .nav-link.active{ color: var(--brand-blue) !important; font-weight:700; }
  .nav-call-btn{
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    color:#fff;
    border-radius: 12px;
    padding:.55rem 1.15rem;
    display:flex;
    align-items:center;
    gap:.6rem;
    font-weight:700;
    box-shadow: 0 8px 18px rgba(19,85,216,.28);
  }
  .nav-call-btn small{ display:block; font-weight:500; opacity:.85; font-size:.68rem; }
  .nav-call-btn i{ font-size:1.15rem; }

  /* ===== Hero ===== */
  .hero{
    background: linear-gradient(135deg, rgba(244,248,254,0.35) 0%, rgba(231,240,255,0.30) 55%, rgba(220,233,253,0.28) 100%), url('../imges/background banner.png') center/cover no-repeat;
    position: relative;
    overflow: hidden;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .hero-blob{
    position:absolute;
    border-radius:50%;
    filter: blur(2px);
    opacity:.5;
    z-index:0;
  }
  .hero-blob.b1{ width:220px; height:220px; background: radial-gradient(circle, #bcd6fb, transparent 70%); top:-60px; left:-60px; }
  .hero-blob.b2{ width:160px; height:160px; background: radial-gradient(circle, #9fc4fb, transparent 70%); bottom:20px; left:8%; }
  .floating-flake{
    position:absolute;
    color: rgba(19,85,216,.18);
    font-size: 2.2rem;
    animation: drift 6s ease-in-out infinite;
  }
  .floating-flake.f1{ top:12%; left:4%; animation-delay:0s; font-size:1.6rem; }
  .floating-flake.f2{ top:65%; left:2%; animation-delay:1.5s; font-size:2.4rem; }
  .floating-flake.f3{ top:20%; right:3%; animation-delay:.7s; }
  @keyframes drift{
    0%,100%{ transform: translateY(0) rotate(0deg); }
    50%{ transform: translateY(-14px) rotate(15deg); }
  }

  .hero .container{ position:relative; z-index:1; }

  .hero .badge-pill{
    background:#fff;
    color: var(--brand-blue);
    border-radius: 30px;
    padding: .45rem 1.05rem;
    font-weight:600;
    font-size:.85rem;
    box-shadow: 0 3px 10px rgba(19,85,216,.1);
    display:inline-flex;
    align-items:center;
    gap:.4rem;
  }
  .hero h1{
    font-size: 2.75rem;
    line-height:1.14;
    margin: 1rem 0 .9rem;
    letter-spacing:-.01em;
  }
  .hero h1 .accent{
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .hero p.lead{
    color: var(--muted);
    font-size:1.05rem;
    max-width: 480px;
  }
  .check-list{
    display:flex;
    flex-wrap:wrap;
    gap: 1.1rem;
    margin: 1.3rem 0 1.5rem;
  }
  .check-list span{
    display:flex;
    align-items:center;
    gap:.45rem;
    font-weight:600;
    font-size:.9rem;
  }
  .check-list i{
    color:#fff;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    border-radius:50%;
    width:19px;height:19px;
    display:flex;align-items:center;justify-content:center;
    font-size:.65rem;
  }
  .avatars{ display:flex; }
  .avatars img{
    width:38px;height:38px;
    border-radius:50%;
    border:2.5px solid #fff;
    margin-left:-12px;
    object-fit:cover;
    box-shadow: 0 2px 8px rgba(20,33,58,.15);
  }
  .avatars img:first-child{ margin-left:0; }
  .trust-row{
    display:flex;
    align-items:center;
    gap:1.8rem;
    flex-wrap:wrap;
    margin-top: 1.7rem;
  }
  .trust-text{ font-size:.85rem; font-weight:600; color: var(--ink); line-height:1.25; }
  .trust-text small{ display:block; font-weight:400; color: var(--muted); }
  .google-rating{ display:flex; align-items:center; gap:.5rem; }
  .google-rating .stars i{ color: var(--star); font-size:.85rem; }
  .google-rating .g-num{ font-weight:700; font-size:1.05rem; }

  .hero-visual{ position:relative; display:flex; justify-content:center; align-items:center; }
  .hero-photo{
    width:100%;
    max-width: 440px;
    aspect-ratio: 4/4.7;
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(19,85,216,.22);
    border: 6px solid #fff;
  }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; }
  .hero-photo::after{
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 55%, rgba(10,30,70,.55) 100%);
  }
  .hero-photo .tech-badge{
    position:absolute;
    bottom: 18px; left: 18px; right:18px;
    z-index:2;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(4px);
    border-radius: 14px;
    padding:.6rem .9rem;
    font-weight:700;
    font-size:.8rem;
    color: var(--brand-blue-dark);
    display:flex; align-items:center; gap:.55rem;
  }
  .tech-badge .dot{ width:9px; height:9px; border-radius:50%; background:#2ecc71; box-shadow:0 0 0 3px rgba(46,204,113,.25); flex-shrink:0; }

  .same-day-badge{
    position:absolute;
    top: -4%;
    right: -4%;
    background:#fff;
    border-radius:50%;
    width:132px;height:132px;
    box-shadow: 0 18px 40px rgba(19,85,216,.22);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    font-weight:700;
    font-size:.82rem;
    color: var(--ink);
    border: 1px solid #eef3fd;
  }
  .same-day-badge i{ color: var(--brand-blue); font-size:1.35rem; margin-bottom:.25rem; }

  /* ===== Booking Card ===== */
  .booking-card{
    background:#fff;
    border-radius: 22px;
    box-shadow: 0 25px 55px rgba(19,85,216,.15);
    padding: 1.8rem 2rem;
    margin-top: 5rem;
    position: relative;
    z-index: 5;
    border: 1px solid #f0f4fc;
  }
  .booking-icon{
    width:56px;height:56px;
    border-radius:16px;
    background: linear-gradient(135deg, var(--brand-blue-light), #dbe8fc);
    display:flex; align-items:center; justify-content:center;
    color: var(--brand-blue);
    font-size:1.5rem;
    flex-shrink:0;
  }
  .booking-card h5{ font-weight:800; margin-bottom:.1rem; font-size:1.05rem; }
  .booking-card p{ color: var(--muted); font-size:.85rem; margin:0; }
  .privacy-note{
    font-size:.78rem;
    color: var(--muted);
    display:flex;
    align-items:center;
    gap:.4rem;
    margin-top: .9rem;
  }
  .privacy-note i{ color: var(--brand-blue); }

  /* ===== Stats ===== */
  .stats-bar{
    background:#fff;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(20,33,58,.07);
    padding: 1.7rem 1rem;
    margin-top: 5rem;
    border: 1px solid #f2f5fb;
  }
  .stat-item{ display:flex; align-items:center; gap:.85rem; justify-content:center; }
  .stat-icon{
    width:48px;height:48px;
    border-radius:14px;
    background: linear-gradient(135deg, var(--brand-blue-light), #dbe8fc);
    color: var(--brand-blue);
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;
    flex-shrink:0;
  }
  .stat-item h4{ margin:0; font-size:1.35rem; }
  .stat-item p{ margin:0; color: var(--muted); font-size:.8rem; }
  .stat-divider{ border-left: 1px solid #eaeef6; height:44px; }

  /* ===== Section common ===== */
  .section-eyebrow{
    color: var(--brand-blue);
    font-weight:700;
    letter-spacing:.04em;
    font-size:.82rem;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    background: var(--brand-blue-light);
    padding:.35rem .9rem;
    border-radius:30px;
  }
  .section-title{ font-size:2.1rem; margin: .9rem 0 2.5rem; }

  /* ===== Services ===== */
  .service-card{
    background:#fff;
    border: 1px solid #eef1f8;
    border-radius: 18px;
    padding: 1.1rem;
    height: 100%;
    transition: all .25s ease;
  }
  .service-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 38px rgba(19,85,216,.12);
    border-color: transparent;
  }
  .service-thumb{
    position:relative;
    border-radius: 14px;
    height: 180px;
    overflow:hidden;
    margin-bottom: 1rem;
  }
  .service-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .35s ease; }
  .service-card:hover .service-thumb img{ transform: scale(1.08); }
  .service-thumb::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(19,85,216,.05), rgba(10,30,70,.35)); }
  .service-badge{
    position:absolute; top:8px; right:8px; z-index:2;
    width:32px;height:32px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:.8rem;
    box-shadow: 0 6px 14px rgba(19,85,216,.35);
  }
  .service-card h6{ font-weight:700; margin-bottom:.25rem; font-size:.95rem; }
  .service-card p{ color: var(--muted); font-size:.78rem; margin:0; }

  /* ===== Why choose us ===== */
  .why-us{ padding: 5rem 0; background: linear-gradient(180deg, #fff, #fbfcff); }
  .why-us ul{ list-style:none; padding:0; margin: 1.4rem 0 1.8rem; }
  .why-us li{
    display:flex; align-items:center; gap:.8rem;
    font-weight:600; font-size:1rem;
    margin-bottom: 1.05rem;
  }
  .why-us li i{
    color:#fff; background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-dark));
    border-radius:50%; width:24px; height:24px;
    display:flex; align-items:center; justify-content:center;
    font-size:.72rem; flex-shrink:0;
  }
  .why-photo{
    border-radius: 24px;
    min-height: 340px;
    position:relative;
    overflow:hidden;
    box-shadow: 0 25px 50px rgba(19,85,216,.15);
  }
  .why-photo img{ width:100%; height:100%; object-fit:cover; min-height:340px; }
  .why-badge-float{
    position:absolute; bottom:18px; left:18px;
    background:#fff; border-radius:16px;
    padding:.9rem 1.1rem;
    display:flex; align-items:center; gap:.7rem;
    box-shadow: 0 12px 28px rgba(19,85,216,.18);
  }
  .why-badge-float .stars i{ color: var(--star); font-size:.8rem; }

  /* ===== Testimonials ===== */
  .testimonials{ background: var(--bg-soft); padding: 5rem 0; }
  .testi-card{
    background:#fff;
    border-radius: 18px;
    padding: 1.7rem;
    height:100%;
    box-shadow: 0 10px 30px rgba(20,33,58,.06);
    border: 1px solid #f2f5fb;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .testi-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 34px rgba(19,85,216,.1); }
  .testi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; }
  .testi-top .stars i{ color: var(--star); font-size:.85rem; }
  .testi-card p.quote{ font-size:.92rem; color: var(--ink); min-height: 72px; }
  .testi-user{ display:flex; align-items:center; gap:.7rem; margin-top:1rem; }
  .testi-avatar{ width:44px;height:44px; border-radius:50%; object-fit:cover; box-shadow: 0 4px 10px rgba(20,33,58,.15); }
  .testi-name{ font-weight:700; font-size:.85rem; }
  .carousel-arrow{
    width:44px;height:44px; border-radius:50%;
    background:#fff; border:1px solid #e3e9f5;
    display:flex; align-items:center; justify-content:center;
    color: var(--brand-blue);
    box-shadow: 0 6px 16px rgba(20,33,58,.07);
    transition: all .2s ease;
  }
  .carousel-arrow:hover{ background: var(--brand-blue); color:#fff; transform: scale(1.06); }

  /* ===== Trust strip ===== */
  .trust-strip{ padding: 2.2rem 0; border-top:1px solid #f0f3fa; border-bottom:1px solid #f0f3fa; }
  .trust-strip .item{ display:flex; align-items:center; gap:.6rem; justify-content:center; color: var(--muted); font-weight:600; font-size:.85rem; }
  .trust-strip .item i{ color: var(--brand-blue); font-size:1.2rem; }

  /* ===== Footer ===== */
  .site-footer{ background: var(--ink); color:#c7d2e8; padding: 3rem 0 1.5rem; }
  .site-footer h6{ color:#fff; font-weight:700; margin-bottom:1rem; }
  .site-footer a{ color:#c7d2e8; }
  .site-footer a:hover{ color:#fff; }
  .footer-social a{
    width:36px;height:36px; border-radius:50%;
    background: rgba(255,255,255,.08);
    display:inline-flex; align-items:center; justify-content:center;
    margin-right:.5rem;
  }
  .footer-social a:hover{ background: var(--brand-blue); }
  .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.2rem; font-size:.8rem; color:#8b98b5; }

  /* ===== Bottom Sticky Bar ===== */
  .bottom-bar{
    position: fixed;
    bottom:0; left:0; right:0;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-dark));
    z-index: 1030;
    padding: .7rem 0;
    box-shadow: 0 -8px 24px rgba(19,85,216,.25);
  }
  .bottom-bar .bb-item{
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    font-weight:700;
    font-size:.85rem;
    text-align:left;
  }
  .bottom-bar .bb-item i{ font-size:1.25rem; }
  .bottom-bar .bb-item small{ display:block; font-weight:400; opacity:.85; font-size:.72rem; }
  .bottom-bar .divider{ border-left: 1px solid rgba(255,255,255,.25); }

  /* ===== Responsive: Tablet (768px – 991px) ===== */
  @media (max-width: 991.98px){
    /* Navbar */
    .navbar-brand span{ font-size:1rem; }
    .navbar-brand img{ height:40px; }
    .nav-call-btn{ width:100%; justify-content:center; margin-top:.5rem; }

    /* Hero */
    .hero{ padding-top:2rem; padding-bottom:2rem; }
    .hero h1{ font-size:2rem; }
    .hero p.lead{ font-size:.95rem; }
    .hero-visual{ margin-top:2rem; }
    .booking-card{ margin-top:2rem; padding:1.5rem 1.4rem; }

    /* Stats */
    .stats-bar{ margin-top:2rem; }
    .stat-item{ justify-content:flex-start; }

    /* Services */
    .service-thumb{ height:140px; }

    /* Why Us */
    .why-us{ padding:3rem 0; }
    .why-photo{ min-height:260px; }
    .why-photo img{ min-height:260px; }

    /* Testimonials */
    .testimonials{ padding:3rem 0; }

    /* Section title */
    .section-title{ font-size:1.8rem; }
  }

  /* ===== Responsive: Mobile (max 767px) ===== */
  @media (max-width: 767.98px){
    /* Navbar */
    .navbar-brand img{ height:36px; }
    .navbar-brand span{ font-size:.9rem; }

    /* Hero */
    .hero{ padding-top:1.8rem; padding-bottom:2rem; background-position:center top; }
    .hero h1{ font-size:1.75rem; line-height:1.2; }
    .hero p.lead{ font-size:.9rem; max-width:100%; }
    .check-list{ gap:.7rem; }
    .check-list span{ font-size:.82rem; }
    .trust-row{ gap:1rem; flex-direction:column; align-items:flex-start; }
    .google-rating{ margin-top:.2rem; }
    .btn-brand, .btn-outline-brand{ padding:.65rem 1.1rem; font-size:.88rem; }

    /* Booking card */
    .booking-card{ margin-top:1.5rem; padding:1.2rem 1rem; border-radius:16px; }
    .booking-card h5{ font-size:.95rem; }
    .booking-icon{ width:44px; height:44px; font-size:1.2rem; }

    /* Stats */
    .stats-bar{ margin-top:1.5rem; padding:1.2rem .8rem; }
    .stat-item h4{ font-size:1.1rem; }
    .stat-item p{ font-size:.72rem; }
    .stat-icon{ width:38px; height:38px; font-size:1rem; }

    /* Trust strip */
    .trust-strip .item{ font-size:.78rem; }

    /* Section titles */
    .section-title{ font-size:1.5rem; margin:.7rem 0 1.5rem; }
    .section-eyebrow{ font-size:.75rem; }

    /* Services */
    .service-thumb{ height:110px; }
    .service-card{ padding:.9rem; border-radius:14px; }
    .service-card h6{ font-size:.88rem; }
    .service-card p{ font-size:.74rem; }

    /* Why Us */
    .why-us{ padding:2.5rem 0; }
    .why-us li{ font-size:.9rem; }
    .why-photo{ min-height:220px; margin-top:1.5rem; }
    .why-photo img{ min-height:220px; }
    .why-badge-float{ padding:.6rem .8rem; font-size:.78rem; }

    /* Testimonials */
    .testimonials{ padding:2.5rem 0; }
    .testi-card{ padding:1.2rem; }
    .testi-card p.quote{ font-size:.85rem; min-height:auto; }

    /* Footer */
    .site-footer{ padding:2rem 0 1rem; }
    .footer-bottom{ font-size:.75rem; }

    /* Bottom bar */
    .bottom-bar .bb-item{ flex-direction:column; gap:.1rem; }
    .bottom-bar .bb-item i{ font-size:1.1rem; }
    .bottom-bar .bb-item span.label-text{ font-size:.72rem; }
    .bottom-bar .bb-item small{ font-size:.62rem; }
  }

  /* ===== Responsive: Small Mobile (max 480px) ===== */
  @media (max-width: 480px){
    .hero h1{ font-size:1.5rem; }
    .hero p.lead{ font-size:.85rem; }
    .navbar-brand img{ height:32px; }
    .navbar-brand span{ font-size:.82rem; }
    .booking-card{ padding:1rem .9rem; }
    .section-title{ font-size:1.35rem; }
    .service-thumb{ height:95px; }
    .service-card h6{ font-size:.82rem; }
    .service-card p{ font-size:.7rem; }
    .stats-bar{ padding:1rem .6rem; }
    .stat-item{ gap:.5rem; }
    .stat-item h4{ font-size:1rem; }
    .trust-strip .item{ font-size:.72rem; gap:.4rem; }
    .why-badge-float{ display:none; }
    .testi-card{ padding:1rem; }
    .bottom-bar{ padding:.5rem 0; }
    .bottom-bar .bb-item span.label-text{ display:none; }
    .bottom-bar .bb-item{ gap:.2rem; }
    .bottom-bar .bb-item i{ font-size:1.3rem; }
    .same-day-badge{ width:90px; height:90px; font-size:.62rem; }
    .same-day-badge i{ font-size:.9rem; }
    body{ padding-bottom:64px; }
  }

  /* ===== Booking Popup ===== */
  .popup-overlay{
    position: fixed;
    inset: 0;
    background: rgba(10,20,50,.55);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
  }
  .popup-overlay.active{
    opacity: 1;
    visibility: visible;
  }
  .popup-box{
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(10,91,255,.18);
    padding: 2.2rem 2rem;
    width: 100%;
    max-width: 480px;
    position: relative;
    transform: scale(.88) translateY(24px);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
    max-height: 90vh;
    overflow-y: auto;
  }
  .popup-overlay.active .popup-box{
    transform: scale(1) translateY(0);
  }
  .popup-close{
    position: absolute;
    top: 1rem; right: 1.1rem;
    background: #f0f4fc;
    border: none;
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    color: #5c6b85;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
  }
  .popup-close:hover{ background: #1355d8; color: #fff; }
  .popup-header{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.6rem;
  }
  .popup-icon{
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1355d8, #0d3fa6);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(19,85,216,.3);
  }
  .popup-header h2{
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 .2rem;
    color: #12203c;
  }
  .popup-header p{
    font-size: .82rem;
    color: #5c6b85;
    margin: 0;
  }
  .popup-field{
    margin-bottom: 1.1rem;
  }
  .popup-field label{
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #12203c;
    margin-bottom: .4rem;
  }
  .popup-field input,
  .popup-field select{
    width: 100%;
    border: 1.5px solid #e3e9f5;
    border-radius: 10px;
    padding: .7rem 1rem;
    font-size: .92rem;
    font-family: 'Poppins', sans-serif;
    color: #12203c;
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    appearance: none;
  }
  .popup-field input:focus,
  .popup-field select:focus{
    border-color: #1355d8;
    box-shadow: 0 0 0 3px rgba(19,85,216,.1);
  }
  .popup-field input.invalid,
  .popup-field select.invalid{
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229,62,62,.1);
  }
  .popup-err{
    display: block;
    font-size: .76rem;
    color: #e53e3e;
    margin-top: .3rem;
    min-height: 1rem;
  }
  .popup-submit{
    width: 100%;
    background: linear-gradient(135deg, #1355d8, #0d3fa6);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: .85rem;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    margin-top: .4rem;
    box-shadow: 0 10px 24px rgba(19,85,216,.3);
    transition: transform .2s, box-shadow .2s;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
  }
  .popup-submit:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(19,85,216,.4);
  }
  .popup-spinner{
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  .popup-privacy{
    text-align: center;
    font-size: .78rem;
    color: #5c6b85;
    margin: .9rem 0 0;
  }
  .popup-general-err{
    background: #fdecec;
    color: #e53e3e;
    border: 1px solid #f4b8b8;
    border-radius: 8px;
    padding: .6rem .8rem;
    font-size: .82rem;
    margin: .8rem 0 0;
    text-align: center;
  }

  /* ===== Success Toast ===== */
  .success-toast{
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #12203c;
    color: #fff;
    padding: .85rem 1.8rem;
    border-radius: 50px;
    font-size: .9rem;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(10,20,50,.25);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
    white-space: nowrap;
  }
  .success-toast.show{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .success-toast.error{
    background: #e53e3e;
  }

  @media (max-width: 575.98px){
    .popup-box{ padding: 1.6rem 1.2rem; }
    .popup-header h2{ font-size: 1.1rem; }
    .success-toast{ font-size: .8rem; padding: .75rem 1.2rem; white-space: normal; text-align:center; width: 90%; }
  }