/* Base background also present here for safety */


@media (max-width: 767px){
  /* FAQ Modal (mobile) */
  .faq-card{ width:calc(100vw - 24px); height:auto; max-height:82vh; padding:18px 16px 14px; }
  .faq-title{ font-size:20px; }
  .faq-close{ top:8px; right:8px; width:34px; height:34px; }

  .lang-mobile{ position:absolute; right:calc(var(--padX) + 36px + 8px); top:50%; transform:translateY(-50%); display:inline-flex !important; align-items:center; gap:6px;  z-index:3000;}
  .lang-mobile .lang-menu{ `00; position:absolute; top:calc(100% + 8px); right:0; min-width:140px; padding:8px; border-radius:12px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.06); display:none; flex-direction:column; gap:4px; max-height:60vh; overflow:auto; }
  .lang-mobile .lang-item{ appearance:none; border:0; background:transparent; text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:600; }

  .nav-right{ display:none !important; }

  /* HERO (mobile) */
  .hero-wrap{ padding: 18px 14px 8px; }
  .hero-title{ font-size: 24px; line-height:1.18; }
  .hero-sub{ font-size: 15px; line-height:1.45; opacity:.92; }

  :root{ --padX:16px; }
  .brand-bar{ padding:16px var(--padX); }
  /* hide center nav, show burger */
  .nav-center{ display:none !important; }
  .burger{
    position:absolute; right:var(--padX); top:50%; transform:translateY(-50%);
    display:inline-flex !important; width:36px; height:36px; align-items:center; justify-content:center;
    border-radius:10px; border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.6);
  }
  .burger-box{ position:relative; width:18px; height:12px; }
  .burger-inner, .burger-inner::before, .burger-inner::after{
    position:absolute; left:0; width:100%; height:2px; background:#111; content:"";
    transition: transform .2s ease, opacity .2s ease;
  }
  .burger-inner{ top:50%; transform:translateY(-50%); }
  .burger-inner::before{ top:-5px; }
  .burger-inner::after{ top:5px; }
  .burger[aria-expanded="true"] .burger-inner{ transform: translateY(-50%) rotate(45deg); }
  .burger[aria-expanded="true"] .burger-inner::before{ transform: translateY(5px) rotate(90deg); }
  .burger[aria-expanded="true"] .burger-inner::after{ transform: translateY(-5px) rotate(90deg); }

  /* logo + text sizing and weight */
  .brand-mark{ height:23px; }
  .brand{
    font-size:17px;
    font-family:"Arial Black", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight:900; -webkit-text-stroke:0.35px #111;
  }

  /* Overlay + RIGHT drawer pinned */
  .mobile-menu{ position:fixed; inset:0; background:transparent; z-index:50; }
  .mobile-menu-content{
    position:absolute; top:0; right:max(env(safe-area-inset-right), 0px);
    left:auto; height:100dvh;
    width:min(39vw, 240px);
    transform-origin:100% 50%; will-change:transform;
    transform:translate3d(120%,0,0);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
    display:flex; flex-direction:column; gap:8px; padding:18px; padding-top:70px;
    align-items:flex-start; background:rgba(255,255,255,.86); backdrop-filter: blur(10px);
    border-left:1px solid rgba(0,0,0,.06);
  }
  .mobile-menu.open .mobile-menu-content{ transform:translate3d(0,0,0); }

  /* Bubble just around text on tap */
  .mobile-menu .nav-link{ display:inline-block; }
  .mobile-menu .nav-link::before{ opacity:0; transform:scale(.92); }
  .mobile-menu .nav-link:active::before,
  .mobile-menu .nav-link.pulse::before{ opacity:.24; transform:scale(1); }

  /* Mobile hard lock */
  html, body{ margin:0; padding:0; width:100vw; overflow:hidden !important; overscroll-behavior:none; }
  body{ position: fixed !important; inset:0 !important; height: 100dvh !important; }
}
@supports not (height: 100dvh){
  @media (max-width: 767px){
  /* FAQ Modal (mobile) */
  .faq-card{ width:calc(100vw - 24px); height:auto; max-height:82vh; padding:18px 16px 14px; }
  .faq-title{ font-size:20px; }
  .faq-close{ top:8px; right:8px; width:34px; height:34px; }

  .lang-mobile{ position:absolute; right:calc(var(--padX) + 36px + 8px); top:50%; transform:translateY(-50%); display:inline-flex !important; align-items:center; gap:6px; }
  .lang-mobile .lang-menu{ z-index: 1000; position:absolute; top:calc(100% + 8px); right:0; min-width:140px; padding:8px; border-radius:12px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.06); display:none; flex-direction:column; gap:4px; max-height:60vh; overflow:auto; }
  .lang-mobile .lang-item{ appearance:none; border:0; background:transparent; text-align:left; padding:8px 10px; border-radius:8px; cursor:pointer; font-weight:600; }

  .nav-right{ display:none !important; }

  /* HERO (mobile) */
  .hero-wrap{ padding: 18px 14px 8px; }
  .hero-title{ font-size: 24px; line-height:1.18; }
  .hero-sub{ font-size: 15px; line-height:1.45; opacity:.92; }
 body{ height: 100vh !important; } }
}


/* === Pricing headline: match HERO on mobile === */
@media (max-width: 767px){
  #pricing-section .headline{
    font-size: 24px;
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: .01em;
  }
}

/* Hero landing CTA styles */
.hero-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin-top:24px;
  flex-wrap:wrap;
}
.hero-btn{
  padding:10px 24px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
}
.hero-btn-secondary{
  background:#111;
  color:#fff;
}