/* =========================
 Rapidit — updated style.css
 (hero spacing, how-it-works & why images, testimonials centering,
  faq restored, footer/badge sizing, floating download alignment,
  mobile hero sizing + safety padding)
 Replace your existing style.css with this file.
 ========================= */

:root{
  --blue:#2b52f5;
  --blue-600:#2343db;
  --dark:#111;
  --muted:#666;
  --alt-bg:#f8f9fb;
  --max-width:1300px;

  --elev-1: 0 8px 30px rgba(11,24,55,0.06);
  --elev-2: 0 20px 60px rgba(11,24,55,0.08);
  --elev-3: 0 30px 90px rgba(11,24,55,0.10);

  --fs-base: 16px;
  --fs-h1: 56px;
  --fs-h2: 28px;
  --fs-body: 16px;
  --radius-md: 12px;
}

/* Base reset */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Poppins", sans-serif;
  font-size:var(--fs-base);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:#fff;
  /* avoid floating CTA overlapping content by reserving space at bottom */
  padding-bottom:120px;
}
.container{ width:92%; max-width:var(--max-width); margin:0 auto; }

/* -------------------------
   Nav / pill
   ------------------------- */
.nav-surface{
  position: sticky;
  top: 4px;
  z-index: 1400;
  display:flex!important;
  justify-content:center!important;
  padding:6px 0!important;
  background: transparent!important;
}
.site-header{ position:sticky; top:0; z-index:1200; }

/* Hide accidental duplicate anchors immediately following nav (screenshot fix) */
.nav-surface + a,
.nav-surface + .quick-links,
.nav-surface + nav.quick-links,
.nav-surface + .breadcrumbs,
.nav-surface + .top-inline-links { display:none !important; }

/* nav pill */
.nav-wrap{
  position: relative;
  display:inline-flex!important;
  align-items:center!important;
  gap:18px!important;
  padding:6px 22px!important;
  background:#fff!important;
  border-radius:22px!important;
  box-shadow:var(--elev-1)!important;
  max-width:1080px;
  width:auto;
}

/* brand */
.brand, .nav a.brand{
  font-family: "Poppins", system-ui, sans-serif;
  font-weight:900;
  font-size:28px!important;
  color:var(--blue)!important;
  text-decoration:none;
  padding:6px 8px!important;
  line-height:1;
  border-radius:8px!important;
}

/* nav links */
.nav{ display:flex!important; gap:18px; align-items:center; justify-content:center; flex:1; white-space:nowrap; flex-wrap:nowrap; }
.nav a{ color:#222; text-decoration:none; font-weight:600; font-size:16px!important; padding:6px 8px!important; border-radius:8px; transition:background .18s ease,color .18s ease; }
.nav a:hover{ background:rgba(43,82,245,0.06); color:var(--blue); }

/* download CTA */
.download-cta{ background: linear-gradient(180deg,var(--blue),var(--blue-600)); color:#fff; padding:8px 14px; border-radius:12px; text-decoration:none; font-weight:700; display:inline-flex; gap:8px; align-items:center; box-shadow:0 10px 30px rgba(43,82,245,0.10); }

/* mobile hamburger (left inside pill) */
.nav-toggle{ display:none; position:absolute; left:8px; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:10px; border:none; background:#fff; box-shadow:0 8px 20px rgba(11,24,55,0.06); align-items:center; justify-content:center; cursor:pointer; padding:6px; z-index:2000; }
.nav-toggle .bar{ display:block; width:22px; height:2px; background:#111; border-radius:2px; position:relative; transition:transform .22s ease,opacity .22s ease; }
.nav-toggle .bar::before, .nav-toggle .bar::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:#111; border-radius:2px; transition:transform .22s ease,opacity .22s ease; }
.nav-toggle .bar::before{ transform:translateY(-7px) } .nav-toggle .bar::after{ transform:translateY(7px) }
.nav-toggle.open .bar{ background:transparent } .nav-toggle.open .bar::before{ transform:rotate(45deg); top:0 } .nav-toggle.open .bar::after{ transform:rotate(-45deg); top:0 }

/* mobile panel */
.mobile-panel{ width:100%; max-width:1080px; margin:8px auto 0; overflow:hidden; border-radius:12px; background:#fff; box-shadow:0 10px 30px rgba(11,24,55,0.06); max-height:0; opacity:0; transition:max-height 360ms cubic-bezier(.2,.9,.3,1), opacity 280ms ease; }
.mobile-panel.open{ max-height:420px; opacity:1; }

/* -------------------------
   Typography — hero title gap fix
   ------------------------- */
:root { --lead-color:#5e6369; }
h1{
  font-size:var(--fs-h1);
  line-height:1.14;             /* increased to add visible gap when wrapping */
  margin:0 0 18px 0;
  font-weight:800;
  font-family:"Poppins", system-ui, sans-serif;
  letter-spacing:-0.02em;
  color:var(--dark);
  word-break:break-word;
}
h1 strong{ color:var(--blue); font-weight:900; display:inline-block; line-height:1.12; margin-top:-2px; }
h2{ font-size:var(--fs-h2); margin-bottom:12px; font-weight:700; color:var(--dark); }
p, .lead { font-size:var(--fs-body); color:var(--lead-color); line-height:1.7; margin:0 0 16px 0; }

/* -------------------------
   HERO (transparent, image sizing & mobile cap)
   ------------------------- */
.hero{ padding:120px 0 48px 0; position:relative; overflow:visible; background:transparent; }

/* remove large overlay so PNG transparency shows naturally */
.hero::before{ display:none !important; }

.hero-inner{ display:flex; gap:48px; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.hero-left{ flex:1; max-width:640px; padding-right:12px; }
.hero-right{ flex:0 0 46%; display:flex; align-items:center; justify-content:center; min-width:280px; max-width:560px; }

/* hero image container: allow transparent PNGs and bound sizes */
.hero-model{
  width:100%;
  max-width:520px;
  max-height:720px;
  display:block;
  border-radius:0;          /* important */
  overflow:visible;
  box-shadow:none;          /* important */
  background:transparent;
  margin:0;
}

/* image itself: contain so PNG lacks cropping */
.hero-model img{
  width:100%;
  height:auto;
  max-height:520px;            /* desktop cap */
  object-fit:contain;
  display:block;
  background:transparent;
}

/* mobile: cap hero image so it doesn't take 90% of viewport */
@media (max-width: 768px) {
  .hero { padding-top:36px; }
  .hero-model img { max-height:360px; }   /* prevents giant image on small screens */
  .hero-right { width:100%; max-width:540px; }
  .hero-left { width:100%; }
  h1 { font-size:32px; line-height:1.12; }
}

/* -------------------------
   site sections + spacing
   ------------------------- */
.section{ padding:80px 0; }
.section h2{ text-align:center; font-size:28px; margin-bottom:12px; }
.lead{ text-align:center; color:var(--muted); margin-bottom:18px; }

/* Services */
.services{ background:var(--alt-bg); }
.service-card{ text-align:center; padding:12px; border-radius:var(--radius-md); background:transparent; }
.service-card img{ width:100%; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 10px 30px rgba(11,24,55,0.04); }

/* -------------------------
   HOW IT WORKS - image sizing fix
   ------------------------- */
#howGrid{ display:flex; gap:48px; justify-content:center; align-items:flex-start; flex-wrap:nowrap; padding-top:10px; }
.how-card{ flex:0 0 300px; max-width:320px; text-align:center; border-radius:18px; padding:12px 14px; background:transparent; }
.how-card img{
  width:100%;
  max-width:240px;         /* more consistent and responsive */
  height:auto;
  object-fit:contain;
  margin:0 auto 18px;
  border-radius:18px;
  box-shadow: var(--elev-1);
}
@media (max-width:900px) {
  #howGrid { flex-wrap:wrap; gap:18px; }
  .how-card img { max-width:220px; }
}
@media (max-width:480px) {
  .how-card img { max-width:200px; }
}

/* -------------------------
   WHY CHOOSE — icon sizing fix
   ------------------------- */
.why-grid{ display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; margin-top:18px; }
.why-card{ flex:1; min-width:180px; text-align:center; padding:18px; border-radius:12px; background:#fff; box-shadow:var(--elev-1); transition: transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .25s ease; }
.why-card.interactive:hover { transform: translateY(-8px) scale(1.02); box-shadow:var(--elev-2); }
.why-card img{ width:84px; height:84px; object-fit:contain; margin-bottom:12px; }
@media (max-width:768px) {
  /* Mobile nav tweaks: smaller pill and fonts */
  .nav-wrap{ padding:6px 10px!important; }
  .nav a{ font-size:13px!important; padding:6px 6px!important; }
 .why-card img { width:72px; height:72px; } }

/* -------------------------
   TESTIMONIALS - center alignment
   ------------------------- */
.testimonials, .testimonial-row, .reviews-row {
  display:flex;
  justify-content:center;
  gap:28px;
  align-items:stretch;
  flex-wrap:wrap;
  margin: 0 auto;
  max-width:1200px;
  padding: 8px 12px;
  box-sizing:border-box;
}
.testimonial-card{
  max-width:320px;
  padding:18px;
  border-radius:12px;
  background:#fff;
  box-shadow:var(--elev-1);
  transition:transform .28s ease, box-shadow .28s ease;
  margin:8px;
}
.testimonial-card .user-photo{ width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; margin-bottom:12px; }
.testimonial-card .stars { color:var(--blue); margin-bottom:8px; }
.testimonial-card p{ color:var(--muted); font-size:15px; margin-bottom:10px; }

/* -------------------------
   WORKER / rockstars
   ------------------------- */
.worker-card{ max-width:320px; padding:18px; text-align:center; background:#fff; border-radius:12px; box-shadow:var(--elev-1); transition: transform .28s ease, box-shadow .28s ease; }
.worker-card img{ width:96px; height:96px; border-radius:50%; object-fit:cover; display:block; margin:0 auto 12px; }

/* -------------------------
   FAQ — pill design restored
   ------------------------- */
.faq-grid{ max-width:1100px; margin:0 auto; }
.faq-item{
  background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
  border-radius:14px;
  padding:0;
  margin:18px 0;
  box-shadow: 0 18px 40px rgba(11,24,55,0.03); border: 1px solid rgba(43,82,245,0.10);
  border: none;
 border:1px solid rgba(43,82,245,0.10);  border:none; box-shadow: 0 10px 30px rgba(11,24,55,0.02); }
.faq-q{
  width:100%;
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
  font-size:18px;
  cursor:pointer;
  background:transparent;
  border-radius:14px;
  outline:none;
}
.faq-q:focus{ box-shadow: 0 8px 20px rgba(43,82,245,0.08); }
.faq-icon{ width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 30px rgba(43,82,245,0.18); font-weight:700; font-size:18px; }
.faq-icon::before{ content:"+"; }
.faq-item.open .faq-icon::before { content:"-"; }
.faq-a{ padding:0 22px; color:var(--muted); font-size:16px; line-height:1.7; max-height:0; overflow:hidden; transition:max-height 320ms ease, padding 220ms ease; }
.faq-item.open { border-color: var(--blue); } .faq-item.open .faq-a{ padding:16px 22px 26px 22px; max-height:1000px !important; }

/* -------------------------
   FOOTER - alignment + badge sizes
   ------------------------- */
.site-footer{ background:#fff; border-top:1px solid rgba(0,0,0,0.04); padding:48px 0; }
.footer-inner{ display:flex; gap:40px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.footer-left{ flex:1 1 320px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.footer-brand{ font-weight:900; font-size:22px; color:var(--blue); margin-bottom:4px; }
.footer-socials{ display:flex; gap:12px; align-items:center; }
.footer-socials img{ height:28px; max-height:28px; }
.footer-links{ display:flex; flex-direction:column; gap:10px; }
.footer-links a{ text-decoration:none; color:#222; font-weight:600 }

/* footer downloads/badges on right */
.footer-right{  flex:0 0 360px; display:flex; flex-direction:column; align-items:flex-end; gap:12px;  margin-left:auto; align-items:flex-end; }
.footer-downloads{ display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.footer-downloads img{ height:40px; max-height:40px; object-fit:contain; }

/* mobile tweak: reduce large gaps in footer by tightening spacing */
@media (max-width:480px) {
  .site-footer { padding:36px 0; }
  .footer-inner { gap:18px; }
  .footer-left, .footer-right { width:100%; align-items:center; text-align:center; }
  .footer-right { align-items:center; }
  .footer-downloads { align-items:center; }
}

/* -------------------------
   Floating download — compact + aligned
   ------------------------- */
.floating-download{
  position:fixed;
  right:22px;
  bottom:22px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 22px 60px rgba(43,82,245,0.12);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:1400;
  width:320px;
  max-width:calc(100% - 48px);
  transition: all 260ms ease;
}
.floating-download.hidden{ opacity:0; transform: translateY(8px); pointer-events:none; }
.floating-download .fd-left{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.floating-download .fd-row-1{ font-size:13px; color:#333; font-weight:700; }
.floating-download .fd-row-2{ font-size:20px; color:var(--blue); font-weight:900; font-family:"Poppins", system-ui, sans-serif; line-height:1; }
.floating-download .fd-row-3{ font-size:13px; color:#333; font-weight:600; }
.floating-download .fd-right{ margin-left:auto; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.floating-download .fd-right img{ height:40px; max-height:40px; object-fit:contain; }

/* small screens */
@media (max-width:480px){
  .floating-download{ width:calc(100% - 34px); left:12px; right:12px; bottom:14px; padding:10px; border-radius:14px }
  .floating-download .fd-row-2{ font-size:18px; }
  .floating-download .fd-right img{ height:36px; }
}

/* -------------------------
   Swiper / carousel rules
   ------------------------- */
.swiper-slide img{ display:block; max-width:100%; height:auto; object-fit:cover; }
.worker-card img, .testimonial-card .user-photo { object-fit:cover; }

/* -------------------------
   Responsive tuning
   ------------------------- */
@media (max-width:1100px){
  h1{ font-size:44px; }
  .hero-inner{ flex-direction:column-reverse; gap:28px; align-items:flex-start; }
  .phones-viewport{ max-width:420px; }
  .hero-right{ width:100%; max-width:560px; }
  .hero-model{ max-width:420px; max-height:540px; margin:0 auto; }
  .hero-model img{ max-height:520px; object-fit:contain; }
}

@media (max-width:900px){
  .service-card img{ width:100%; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 10px 30px rgba(11,24,55,0.04); }
  .testimonial-card .user-photo{ width:56px; height:56px; }
  .worker-card img{ width:80px; height:80px; }
  #howGrid{ flex-wrap:wrap; gap:18px; }
  .how-card{ flex:1 1 280px; }
  .footer-right { align-items:center; text-align:center; }
}

@media (max-width:768px){
  .nav-wrap{ padding:8px 12px!important; border-radius:14px!important; }
  .brand{ font-size:22px!important; }
  .nav a{ font-size:15px!important; padding:8px 6px!important; }
 .hero{ padding:36px 0; }
  h1{ font-size:32px; line-height:1.12; }
  .footer-inner{ flex-direction:column; align-items:center; text-align:center; }
  .floating-download{ right:12px; left:12px; width:calc(100% - 24px); }
  .how-card img{ max-width:220px; }
  .why-card img{ width:72px; height:72px; }
  .testimonials, .testimonial-row { justify-content:center; }
  .nav-toggle{ display:inline-flex; } /* ensure toggle is visible on small screens */
  .nav{ display:none!important; }      /* hide desktop links on mobile */
  .mobile-panel{ margin-top:8px; }    /* panel under the pill */
}

/* reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion:reduce) {
  *{ transition:none!important; animation:none!important; }
}

/* focus states for accessibility */
a:focus, button:focus, .btn:focus { outline:3px solid rgba(43,82,245,0.12); outline-offset:3px; border-radius:8px; }

/* subtle divider */
.hr-subtle { height:1px; background: rgba(11,24,55,0.04); width:100%; margin:24px 0; border-radius:2px; }

/* =========================
   End of file
   ========================= */
/* ========== quick hero micro-patch ========== */
/* paste at the end of your style.css */

:root { --hero-img-desktop-max: 480px; --hero-img-mobile-max: 240px; --hero-left-pad: 44px; --hero-right-basis: 42%; --store-badge-max: 340px; }

h1 { line-height: 1.18; }            /* slightly more breathing for wrapped headline */
.hero-left { padding-right: var(--hero-left-pad); } /* give left column a touch more room */

.hero-right { flex: 0 0 var(--hero-right-basis); min-width: 260px; max-width: 520px; }

.hero-model img {
  max-height: var(--hero-img-desktop-max) !important; /* desktop cap (smaller than before) */
  width: 100%;
  object-fit: contain;
}

/* store badges — scale down so copy breathes */
.badges .store-badge, .footer-downloads img { max-width: var(--store-badge-max); height: auto; }

/* mobile caps so image never dominates small screens */
@media (max-width: 768px) {
  :root { --hero-img-mobile-max: 240px; }
  .hero-model img { max-height: var(--hero-img-mobile-max) !important; }
  .hero-left { padding-right: 12px; }
  h1 { font-size: 32px; line-height: 1.12; }
}

/* optional: if you want even more left-column breathing (uncomment)
.hero-left { max-width: 680px; }
*/
/* ========== FIX: HERO BADGE SIZE TOO BIG ========== */

.hero .badges img,
.hero .store-badge {
  width: 180px !important;   /* balanced size */
  height: auto !important;
}

@media (max-width: 768px) {
  .hero .badges img,
  .hero .store-badge {
    width: 150px !important; /* smaller for mobile */
  }
}
/* ========== FIX: HERO IMAGE SIZE + POSITION ========== */

/* Desktop */
.hero-right .hero-model img {
  max-height: 420px !important;   /* reduced from 520px */
  transform: translateY(-90px);   /* lift image slightly */
}

/* Desktop container constraint */
.hero-right {
  max-width: 460px !important;    /* reduce width */
}

/* Mobile */
@media (max-width: 768px) {
  .hero-right .hero-model img {
    max-height: 200px !important; /* smaller mobile size */
    transform: translateY(-10px); /* slight upward shift */
  }
  .hero-right {
    max-width: 360px !important;
  }
}


/* ===== Quick additions: scroll-cue, peek, nav, testimonial styling ===== */

/* --- Scroll cue --- */
.scroll-cue{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-decoration:none;
  z-index:1200;
  opacity:0.95;
  transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .22s ease;
}
.scroll-cue .cue-label{
  font-size:12px;
  font-weight:700;
  color:#333;
  letter-spacing:0.02em;
  background: rgba(255,255,255,0.8);
  padding:6px 10px;
  border-radius:18px;
  box-shadow: 0 6px 20px rgba(11,24,55,0.06);
}
.scroll-cue .cue-arrow{
  width:24px;
  height:24px;
  border-left:2px solid rgba(43,82,245,0.92);
  border-bottom:2px solid rgba(43,82,245,0.92);
  transform: rotate(-45deg);
  display:block;
  margin-bottom:6px;
  animation: cue-bob 1.4s infinite;
}
@keyframes cue-bob{
  0%{ transform: translateY(0) rotate(-45deg); }
  50%{ transform: translateY(8px) rotate(-45deg); }
  100%{ transform: translateY(0) rotate(-45deg); }
}

/* --- partial peek of next section --- */
@media (min-width: 900px){
  .services{ margin-top: -10px; padding-top: 92px; border-top-left-radius:14px; border-top-right-radius:14px; }
  .hero{ padding-bottom: 56px; } /* ensure hero still breathes */
}

/* --- mobile nav pill tweaks --- */
@media (max-width: 768px){
  .nav-wrap{
    padding-left: 18px !important;  /* more left breathing for toggle + brand */
    gap:10px!important;
  }
  .nav a{ padding:8px 6px!important; font-size:15px!important; }
  .nav-toggle{ left:6px; } /* tune toggle position */
  .brand{ margin-left:10px!important; }
}

/* --- testimonial / stars styling --- */
.testimonial-card .user-photo{
  border: 3px solid linear-gradient(90deg, rgba(43,82,245,0.08), rgba(43,82,245,0.02));
  box-shadow: 0 6px 20px rgba(11,24,55,0.06);
  transition: transform .28s ease, box-shadow .28s ease;
}
.testimonial-card:hover .user-photo{ transform: translateY(-4px); box-shadow: 0 20px 50px rgba(11,24,55,0.09); }

/* gradient star text */
.stars{ color: var(--blue); font-weight:900; font-size:18px; display:inline-block; margin-bottom:8px; }

/* stronger testimonial card emphasis */
.testimonial-card{ border: 1px solid rgba(11,24,55,0.03); }




/* --- stronger peek: reveal top of next section within first scroll --- */
@media (min-width: 900px) {
  .services{
    margin-top: -40px;      /* pull services up into hero */
    padding-top: 120px;      /* keep content padded internally */
  }
  .hero-right .hero-model img {
    max-height: 480px !important;
    transform: translateY(-90px) !important;
  }
  .hero{ padding-bottom: 8px; overflow: visible; }
  /* ensure hero content sits above services visually */
  .hero-inner{ position: relative; z-index: 20; }
  .services{ position: relative; z-index: 10; }
}

/* reduce the effect on medium screens */
@media (min-width: 640px) and (max-width: 899px){
  .services{ margin-top: -40px; padding-top: 80px; }
  .hero-right .hero-model img { transform: translateY(-60px) !important; }
}

/* mobile: smaller peek */
@media (max-width: 639px){
  .services{ margin-top: -40px; padding-top: 48px; }
  .hero-right .hero-model img { transform: translateY(-30px) !important; max-height: 200px !important; }
}


/* ===== Hero image layering fix ===== */

/* ===== Fix: ensure hero image sits above the services peek ===== */
@media (min-width: 900px) {
  .hero-inner { position: relative; z-index: 60 !important; }
  .hero-right { position: relative; z-index: 65 !important; top: -90px; } /* lift container up */
  .hero-right .hero-model img { transform: translateY(-40px) !important; max-height: 480px !important; } /* milder lift */
  .services { margin-top: -20px !important; padding-top: 96px !important; z-index: 10; position: relative; }
}

/* medium screens */
@media (min-width: 640px) and (max-width: 899px) {
  .hero-right { top: -60px !important; z-index: 40 !important; }
  .hero-right .hero-model img { transform: translateY(-30px) !important; }
  .services { margin-top: -28px !important; padding-top: 64px !important; }
}

/* small screens: keep default behavior */
@media (max-width: 639px) {
  .hero-right { top: -20px !important; }
  .hero-right .hero-model img { transform: translateY(-20px) !important; }
  .services { margin-top: -20px !important; padding-top: 40px !important; }
}


/* Mobile visible Home button placed left of brand inside the pill */
.mobile-home{ display:none; }
@media (max-width:768px){
  .mobile-home{ display:inline-flex; align-items:center; justify-content:center; padding:6px 8px; border-radius:8px; background:rgba(43,82,245,0.06); color:var(--blue); font-weight:700; text-decoration:none; margin-right:6px; }
  .nav{ display:none!important; } /* keep desktop nav hidden */
  .nav-toggle{ display:inline-flex; }      /* ensure toggle is visible on small screens */
}

.mobile-panel .mobile-inner a {
  display:block;
  padding:14px 18px;
  text-decoration:none;
  color:var(--dark);
  font-weight:700;
  border-bottom:1px solid rgba(11,24,55,0.04);
  background:transparent;
}
.mobile-panel .mobile-inner a:hover { background: rgba(43,82,245,0.04); color:var(--blue); }

/* Ensure brand centered inside pill with left toggle space */
.nav-wrap{ padding-left:56px !important; padding-right:22px !important; }

.mobile-panel.open{ max-height:420px; opacity:1; padding-top:12px; }
.mobile-panel .mobile-inner{ padding-top:6px; }

.mobile-panel .mobile-inner a{ text-decoration:none; color:var(--dark); font-weight:700; font-size:18px; }


/* FINAL mobile hero layout: text first, model second, smaller model, bit of hero padding */
@media (max-width: 768px){
  .hero{
    padding-top: 120px !important;
    padding-bottom: 32px !important;
  }
  .hero-inner{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  .hero-left{
    order: 1 !important;
    width: 100% !important;
  }
  .hero-right{
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .hero-model{
    max-height: 260px !important;
    width: auto !important;
    height: auto !important;
  }
}


/* === FINAL Mobile Hero & Header Polish (Pronto-level) === */
@media (max-width: 768px) {
  /* HEADER */
  .site-header {
    background: transparent;
  }

  .nav-surface {
    background: transparent !important;
    box-shadow: none !important;
    padding-top: 8px !important;
    padding-bottom: 0 !important;
  }

  .nav-wrap {
    padding: 0 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  .nav {
    order: 1;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
  }

  .nav a {
    display: none !important;
  }

  .nav a.brand {
    display: inline-flex !important;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 800;
    font-size: 28px;         /* larger like Pronto */
    letter-spacing: 0.02em;
    color: #111827;
    padding: 0 !important;   /* out of any pill */
    background: transparent !important;
    border-radius: 0 !important;
  }

  .nav-toggle {
    order: 2;
    margin-left: auto;
    position: static;
    transform: none;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--blue);  /* blue pill like Rapidit pill */
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-toggle .bar,
  .nav-toggle .bar::before,
  .nav-toggle .bar::after {
    background: #ffffff;      /* white hamburger bars */
  }

  /* HERO BACKGROUND & LAYOUT */
  .hero {
    background: linear-gradient(
      180deg,
      #e2f0ff 0%,
      #edf4ff 45%,
      #ffffff 100%
    ) !important;
    padding-top: 96px !important;
    padding-bottom: 32px !important;
  }

  .hero-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 20px !important;
  }

  .hero-left {
    width: 100% !important;
    padding-right: 0 !important;
    align-items: center;
  }

  .hero-left h1 {
    font-size: 38px;
    line-height: 1.12;
    color: #111827;
    margin-bottom: 10px;
  }

  .hero-left strong {
    color: #1d4ed8;
  }

  .hero-left .subtitle {
    max-width: 420px;
    margin: 0 auto 16px;
    font-size: 17px;
    line-height: 1.5;
    color: #4b5563;
  }

  .hero-promo {
    max-width: 420px;
    margin: 10px auto 0;
    font-size: 16px;
    color: #4b5563;
  }

  .badges {
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
  }

  .store-badge {
    max-width: 170px;
  }

  /* PHONES: BIGGER, STRONGER BACKGROUND */
  .hero-right {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .phones-viewport {
    width: 100%;
    max-width: 560px;
    margin: 22px auto 0;
    padding: 14px 0 14px;
    border-radius: 40px;
    background: radial-gradient(
      circle at center,
      rgba(0, 123, 255, 0.25) 0%,
      rgba(0, 123, 255, 0.14) 40%,
      rgba(255, 255, 255, 1) 86%
    );
    box-shadow: 0 32px 90px rgba(15, 23, 42, 0.30);
  }

  .hero-right .hero-model {
    width: 100%;
    max-width: 520px;
    height: auto;
  }

  /* NEXT SECTION SPACING */
  .section.services {
    margin-top: 0 !important;
    padding-top: 40px !important;
  }
}


/* === EDGE-TO-EDGE Phones Enhancement (Mobile Only) === */
@media (max-width: 768px) {
  .phones-viewport {
    max-width: 620px;
    margin: 18px auto 0;
    padding: 10px 0 12px;
    border-radius: 44px;
  }

  .hero-right .hero-model {
    max-width: 580px;
  }

  .hero {
    padding-bottom: 26px !important;
  }
}


/* === Mobile phones: use full available width for new 1200px asset === */
@media (max-width: 768px) {
  .phones-viewport {
    width: 100%;
    max-width: 100%;
    margin: 14px auto 0;
    padding: 6px 0 10px;
    border-radius: 40px;
  }

  .hero-right .hero-model {
    width: 100%;
    max-width: none;
    height: auto;
  }
}


/* === Mobile phones background: remove harsh white rectangle, keep soft blue glow === */
@media (max-width: 768px) {
  .phones-viewport {
    background: radial-gradient(
      circle at center,
      rgba(0, 123, 255, 0.22) 0%,
      rgba(0, 123, 255, 0.12) 38%,
      transparent 78%
    );
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
    border-radius: 0;
  }
}


/* === FINAL override: remove card behind phones, move glow into hero background (mobile) === */
@media (max-width: 768px) {
  .phones-viewport {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 18px !important;
  }

  .hero {
    background:
      radial-gradient(circle at bottom, rgba(0, 123, 255, 0.18) 0%, rgba(0, 123, 255, 0.04) 40%, transparent 70%),
      linear-gradient(180deg, #e2f0ff 0%, #edf4ff 40%, #ffffff 100%) !important;
  }
}


/* === Mobile phones: Pronto-style soft blue bowl background === */
@media (max-width: 768px) {
  .phones-viewport {
    background: radial-gradient(
      circle at center,
      rgba(0, 123, 255, 0.22) 0%,
      rgba(0, 123, 255, 0.10) 38%,
      rgba(0, 123, 255, 0.04) 70%,
      transparent 100%
    ) !important;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.20) !important;
    border-radius: 40px !important;
    padding: 8px 0 14px !important;
    margin-top: 18px !important;
  }
}


/* === FINAL-FINAL: phones have no card; smooth blue bowl lives in hero only (mobile) === */
@media (max-width: 768px) {
  .phones-viewport {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 20px !important;
  }

  .hero {
    background:
      radial-gradient(
        ellipse at bottom,
        rgba(0, 123, 255, 0.26) 0%,
        rgba(0, 123, 255, 0.14) 32%,
        rgba(0, 123, 255, 0.05) 60%,
        #ffffff 100%
      ),
      linear-gradient(
        180deg,
        #e9f3ff 0%,
        #f3f7ff 40%,
        #ffffff 100%
      ) !important;
  }
}


/* === FINAL: Pronto-like three-phone bowl using pseudo-elements (mobile only) === */
@media (max-width: 768px) {
  .phones-viewport {
    position: relative;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 24px !important;
    overflow: visible;
  }

  .phones-viewport::before,
  .phones-viewport::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    border-radius: 50%;
    z-index: 0;
  }

  /* Soft blue bowl behind phones */
  .phones-viewport::before {
    bottom: -40px;
    width: 135%;
    height: 260px;
    background: radial-gradient(
      ellipse at center,
      rgba(0, 123, 255, 0.22) 0%,
      rgba(0, 123, 255, 0.10) 45%,
      rgba(0, 123, 255, 0.0) 100%
    );
    filter: blur(8px);
  }

  /* White inner glow under phones */
  .phones-viewport::after {
    bottom: -60px;
    width: 120%;
    height: 220px;
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.0) 100%
    );
    filter: blur(22px);
    opacity: 0.9;
  }

  .hero-right picture,
  .hero-right .hero-model {
    position: relative;
    z-index: 1;
    width: 110%;
    max-width: 540px;
    height: auto;
    margin: 0 auto;
  }
}


/* === FINAL mobile hero typography polish (Poppins-only) === */
@media (max-width: 768px) {
  .hero-left h1 {
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #0b1020;
    margin-bottom: 12px;
    text-align: center;
  }

  .hero .subtitle {
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.4;
    color: #4b5563;
    max-width: 340px;
    margin: 0 auto 16px;
    text-align: center;
  }

  .hero-promo {
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    color: #6b7280;
    margin-top: 10px;
    text-align: center;
  }

  .hero-left strong {
    color: #1d4ed8;
    text-shadow: 0 3px 10px rgba(37, 99, 235, 0.30);
  }
}


/* === MOBILE HERO + TOP BACKGROUND FINAL TIGHTEN === */
@media (max-width: 768px) {
  /* Make top background match hero (no white band) */
  body {
    background: linear-gradient(
      180deg,
      #e2f0ff 0%,
      #edf4ff 45%,
      #ffffff 100%
    ) !important;
  }

  /* Remove extra gap between nav and hero text */
  .hero {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }

  .nav-surface {
    background: transparent !important;
  }
}
/* === SIMPLE MOBILE NAV: Rapidit left, hamburger right === */
@media (max-width: 768px) {

  .nav-surface {
    background: transparent !important;
    padding: 10px 0 0 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .nav-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 18px 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;   /* brand left, menu right */
    gap: 12px;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* Brand container */
  .nav {
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
  }

  /* Hide all links except brand */
  .nav a {
    display: none !important;
  }

  .nav a.brand {
    display: inline-flex !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;  /* Rapidit out of pill */
    border-radius: 0 !important;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 800;
    font-size: 28px;                    /* bigger like Pronto */
    letter-spacing: 0.02em;
    color: #1d4ed8;
  }

  /* Hamburger pill */
  .nav-toggle {
    flex: 0 0 auto;
    position: static;
    transform: none;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--blue);           /* blue pill */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.35);
  }

  /* White bars */
  .nav-toggle .bar,
  .nav-toggle .bar::before,
  .nav-toggle .bar::after {
    background: #ffffff;
  }

  /* Keep hero close under header */
  .hero {
    margin-top: 0 !important;
    padding-top: 24px !important;
  }
}

/* Scroll cue */
.scroll-cue{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  font-size:13px;
  color:#6b7280;
  opacity:0.65;
  animation: scrollBounce 1.8s infinite;
}
.scroll-preview{ display:block; letter-spacing:0.04em; }
.scroll-arrow{ font-size:18px; margin-top:4px; display:block; }

@keyframes scrollBounce{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,6px); }
}

/* Stronger section contrast */
.services{
  background:#F5F9FF !important;
}

/* Desktop-only scroll cue */
@media (min-width: 1024px) {
  .scroll-cue{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    font-size:13px;
    color:#6b7280;
    opacity:0.6;
    animation: scrollBounce 1.8s infinite;
    display:block;
  }
}
@media (max-width: 1023px) {
  .scroll-cue{ display:none !important; }
}

/* Desktop-only section contrast */
@media (min-width: 1024px) {
  .services{
    background:#F5F9FF !important;
  }
}