/* =========================================================
   LOCAL CAR KEY & LOCKSMITH — style.css (CLEAN + MOBILE-FIXED)
   - HTML unchanged
   - Fixes: FOMO full visible on mobile, Header full title + cities,
            Burger menu works with your JS (aria-hidden/body.nav-open)
   ========================================================= */

/* -------------------------
   TOKENS / ROOT
-------------------------- */
:root{
  /* Brand palette */
  --navy0:#04102E;
  --navy1:#061B4A;
  --navy2:#0A2B86;
  --navy3:#0B3AAE;

  --gold0:#FFE9A6;
  --gold1:#FFD76A;
  --gold2:#FFB84A;

  --red1:#E63B2E;
  --red2:#B71D1A;

  --white:#F7FAFF;

  /* App tokens */
  --bg: var(--navy1);
  --surface: rgba(5,18,52,.78);
  --surface2: rgba(5,18,52,.62);

  --text: rgba(247,250,255,.96);
  --muted: rgba(247,250,255,.78);
  --muted2: rgba(247,250,255,.62);

  --line: rgba(255,215,106,.26);
  --line2: rgba(255,215,106,.18);

  --shadow: 0 22px 70px rgba(0,0,0,.50);
  --shadow2: 0 14px 38px rgba(0,0,0,.38);

  --r: 18px;
  --r2: 22px;

  --container: 1180px;

  /* iOS safe area */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* Fixed bars (desktop defaults) */
  --fomoH: 56px;
  --mheadH: 74px;

  /* Spacing */
  --g: 12px;
}

/* FOMO mini mode (desktop scroll) */
body.fomo-mini{ --fomoH: 46px; }
/* FOMO closed */
body.fomo-closed{ --fomoH: 0px; }

/* -------------------------
   BASE / RESET
-------------------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ overflow-x:hidden; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);

  /* Reserve for fixed bars + sticky */
  padding-top: calc(var(--sat) + var(--fomoH) + var(--mheadH) + 10px);
  padding-bottom: calc(110px + var(--sab));
}

a{ color:inherit; text-decoration:none; }
a:hover{ opacity:.94; }
strong{ font-weight:900; }
.muted{ color: var(--muted); }
.tiny{ font-size:12px; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

button, .btn, a{ -webkit-tap-highlight-color: transparent; }
button{ font:inherit; background:none; border:0; color:inherit; }

.ico{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; }
.ico svg{ width:18px; height:18px; }

html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Skip link */
.skip{
  position:absolute; left:-9999px; top:auto;
  width:1px;height:1px; overflow:hidden;
}
.skip:focus{
  left:16px; top:16px;
  width:auto;height:auto;
  padding:10px 12px;
  background: rgba(5,18,52,.92);
  border:1px solid var(--line);
  border-radius:12px;
  z-index:9999;
}

/* -------------------------
   GLOBAL BACKGROUND (NO BANDING)
-------------------------- */
body::before{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(900px 520px at 18% 8%, rgba(255,215,106,.18), transparent 60%),
    radial-gradient(820px 520px at 86% 12%, rgba(0,196,255,.14), transparent 62%),
    radial-gradient(900px 700px at 50% 105%, rgba(230,59,46,.12), transparent 60%),
    linear-gradient(180deg, #061B4A 0%, #0A2B86 42%, #061B4A 100%);

  /* micro texture without stripes */
  filter: saturate(1.05);
  opacity: 1;
}

body > *{ position:relative; }


/* -------------------------
   FOMO BAR (TOP)
-------------------------- */
.fomo{
  position:fixed;
  top:0; left:0; right:0;
  z-index:130;
  padding-top: var(--sat);
  color:#1A1408;

  background: linear-gradient(180deg, rgba(255,233,166,.98), rgba(255,215,106,.96));
  border-bottom: 2px solid rgba(183,29,26,.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.fomo__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  min-height: var(--fomoH);
}

.fomo__left{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  line-height:1.15;
  min-width:0;
}

.fomo__pulse{
  width:10px;height:10px;border-radius:50%;
  background: var(--red1);
  box-shadow:0 0 0 0 rgba(230,59,46,.55);
  animation: pulse 1.35s infinite;
}

@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(230,59,46,.55); }
  70%{ box-shadow:0 0 0 12px rgba(230,59,46,0); }
  100%{ box-shadow:0 0 0 0 rgba(230,59,46,0); }
}

.fomo .muted{ color: rgba(26,20,8,.78); }

.dot{
  width:6px;height:6px;border-radius:50%;
  background: rgba(26,20,8,.35);
  display:inline-block; vertical-align:middle;
}

.fomo__right{
  display:flex; align-items:center; gap:10px;
  flex:0 0 auto;
}

.fomo__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px;
  border-radius:999px;
  font-weight:950;
  white-space:nowrap;
  min-height:40px;

  background: linear-gradient(180deg, rgba(11,58,174,.96), rgba(10,43,134,.96));
  color: rgba(247,250,255,.96);
  border: 1px solid rgba(11,58,174,.55);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}

.fomo__x{
  width:40px;height:40px;
  border-radius:999px;
  cursor:pointer;
  font-weight:950;

  background: linear-gradient(180deg, rgba(230,59,46,.92), rgba(183,29,26,.92));
  color:#fff;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 12px 26px rgba(0,0,0,.28);
}

/* desktop mini */
body.fomo-mini .fomo__row{ padding:8px 0; }
body.fomo-mini .fomo__left{ flex-wrap:nowrap; overflow:hidden; }
body.fomo-mini .fomo__left .muted{ display:none; }
body.fomo-mini .fomo__left strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 62vw;
}
body.fomo-mini .fomo__btn{ padding:8px 10px; font-size:13px; min-height:36px; }
body.fomo-mini .fomo__x{ width:36px; height:36px; }

/* -------------------------
   HEADER (FIXED UNDER FOMO)
-------------------------- */
.mhead{
  position:fixed;
  left:0; right:0;
  top: calc(var(--sat) + var(--fomoH));
  z-index:125;

  background: rgba(4,16,46,.92);
  border-bottom: 1px solid rgba(255,215,106,.22);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.mhead::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,215,106,.75), transparent);
  opacity:.9;
  pointer-events:none;
}

.mhead__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0 10px;
  min-height: var(--mheadH);
}

.mhead__copy{ min-width:0; }

.mhead__title{
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1.15;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 62vw;
}

.mhead__title span{
  font-weight:900;
  color: rgba(255,215,106,.92);
}

.mhead__sub{
  margin-top:4px;
  font-weight:850;
  font-size:12.5px;
  color: rgba(247,250,255,.72);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 62vw;
}

.mhead__actions{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}

.mhead__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  line-height:1;
  white-space:nowrap;
  min-height:44px;
  cursor:pointer;

  background: rgba(10,43,134,.55);
  color: rgba(247,250,255,.96);
  border: 1px solid rgba(255,215,106,.22);
  box-shadow: 0 14px 36px rgba(0,0,0,.34);
}

.mhead__btn--call{
  background: linear-gradient(180deg, rgba(230,59,46,.92), rgba(183,29,26,.92));
  border: 1px solid rgba(255,255,255,.22);
}

.mhead__btnSmall{
  font-weight:950;
  opacity:.88;
  margin-left:6px;
}

/* -------------------------
   NAV (DESKTOP LINKS BAR)
-------------------------- */
.nav{
  z-index:80;
  background: rgba(4,16,46,.70);
  border-bottom: 1px solid rgba(255,215,106,.14);
}

.nav__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 0;
  position:relative;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand--desktopOnly{ display:flex; }

.nav__links{
  display:flex;
  align-items:center;
  gap:16px;
}

.nav__links a{
  font-weight:950;
  color: rgba(247,250,255,.86);
  position:relative;
}

.nav__links a:not(.nav__cta)::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(255,215,106,.75), transparent);
  opacity:0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.nav__links a:not(.nav__cta):hover::after{
  opacity:.9;
  transform: translateY(0);
}

.nav__cta{
  padding:10px 14px;
  border-radius:999px;
  font-weight:950;

  background: linear-gradient(180deg, rgba(255,233,166,.98), rgba(255,215,106,.96));
  color:#1A1408 !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 52px rgba(0,0,0,.35);
}

/* -------------------------
   BURGER (MOBILE)
-------------------------- */
.nav__burger{
  display:none;
  width:46px; height:46px;
  border-radius:16px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
  flex-direction:column;

  background: rgba(4,16,46,.92);
  border: 1px solid rgba(255,215,106,.22);
  box-shadow: 0 18px 60px rgba(0,0,0,.44);
}

.nav__burger span{
  display:block;
  width:18px; height:2px;
  background: rgba(247,250,255,.88);
  border-radius:999px;
}

/* -------------------------
   MOBILE DRAWER MENU (WORKS WITH YOUR JS)
   JS toggles:
   - body.nav-open
   - #mnav aria-hidden false/true
-------------------------- */
.mnav{
  position:fixed; inset:0;
  display:none;
  z-index:140;
  background: rgba(0,0,0,.55);
}

.mnav[aria-hidden="false"],
body.nav-open .mnav{
  display:block;
}

.mnav__panel{
  position:absolute;
  top: calc(12px + var(--sat));
  left: calc(12px + var(--sal));
  right: calc(12px + var(--sar));
  border-radius:22px;
  padding:14px;

  background: rgba(4,16,46,.96);
  border: 1px solid rgba(255,215,106,.18);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);

  max-height: calc(100vh - (24px + var(--sat)));
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.mnav__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 6px 10px;
  border-bottom: 1px solid rgba(255,215,106,.14);
  color: rgba(247,250,255,.92);
}

.mnav__x{
  width:42px; height:42px;
  border-radius:14px;
  cursor:pointer;
  font-weight:950;

  background: linear-gradient(180deg, rgba(230,59,46,.92), rgba(183,29,26,.92));
  color:#fff;
  border: 1px solid rgba(255,255,255,.20);
}

.mnav__link{
  display:block;
  padding:14px 12px;
  border-radius:16px;
  margin:10px 0;
  font-weight:950;

  background: rgba(10,43,134,.35);
  border: 1px solid rgba(255,215,106,.16);
  color: rgba(247,250,255,.92);
}

.mnav__cta{
  display:block;
  text-align:center;
  padding:14px 12px;
  border-radius:16px;
  margin-top:10px;
  font-weight:950;

  background: linear-gradient(180deg, rgba(255,233,166,.98), rgba(255,215,106,.96));
  color:#1A1408;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.mnav__quick{
  margin-top:12px;
  display:grid;
  gap:10px;
}

/* body lock when drawer open (your JS uses body.style.top) */
body.nav-open{
  position:fixed;
  left:0; right:0;
  width:100%;
  overflow:hidden;
}

/* -------------------------
   HERO
-------------------------- */
.hero{ padding:24px 0 10px; }

.hero__grid{
  display:grid;
  gap:18px;
  grid-template-columns: 1.05fr .95fr;
  align-items:start;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;

  background: rgba(4,16,46,.72);
  border: 1px solid rgba(255,215,106,.18);
  box-shadow: 0 16px 46px rgba(0,0,0,.42);
}

.tag__spark{
  width:10px;height:10px;border-radius:50%;
  background: linear-gradient(180deg, rgba(255,233,166,.98), rgba(255,215,106,.96));
  box-shadow: 0 0 0 8px rgba(255,215,106,.10);
}

h1{
  margin:14px 0 10px;
  font-size: clamp(30px, 3.6vw, 54px);
  line-height:1.06;
  letter-spacing:-.03em;
}

.h1-accent{
  background: linear-gradient(180deg, rgba(255,233,166,.98), rgba(255,215,106,.96));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lead{
  font-size:16px;
  line-height:1.6;
  color: rgba(247,250,255,.86);
  max-width:56ch;
}

.cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:16px 0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  font-weight:950;
  cursor:pointer;
  min-height:44px;

  background: rgba(4,16,46,.80);
  border: 1px solid rgba(255,215,106,.18);
  color: rgba(247,250,255,.95);
  box-shadow: 0 16px 46px rgba(0,0,0,.42);
}

.btn--primary{
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,233,166,.98), rgba(255,215,106,.96));
  color:#1A1408;
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
}

.btn--ghost{
  background: rgba(10,43,134,.45);
  border: 1px solid rgba(255,215,106,.16);
  color: rgba(247,250,255,.96);
}

.btn--full{ width:100%; }

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 6px;
}

.chip{
  padding:10px 12px;
  border-radius:999px;
  font-weight:950;

  background: rgba(4,16,46,.72);
  border: 1px solid rgba(255,215,106,.16);
  color: rgba(247,250,255,.90);
  box-shadow: 0 14px 38px rgba(0,0,0,.38);
}

.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin:16px 0 0;
}

.stat{
  padding:12px 12px;
  border-radius:16px;

  background: rgba(4,16,46,.72);
  border: 1px solid rgba(255,215,106,.16);
  box-shadow: 0 16px 46px rgba(0,0,0,.38);
}
.stat span{
  display:block;
  margin-top:5px;
  color: rgba(247,250,255,.74);
  font-weight:850;
  font-size:12px;
}

/* Job builder card */
.hero__card{
  border-radius: var(--r2);
  overflow:hidden;

  background: rgba(4,16,46,.82);
  border: 1px solid rgba(255,215,106,.18);
  box-shadow: var(--shadow);
}

.cardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px;
  border-bottom: 1px solid rgba(255,215,106,.14);

  background: linear-gradient(180deg, rgba(255,215,106,.16), rgba(4,16,46,0));
}

.cardHead__title span{ display:block; margin-top:4px; }

.badge{
  padding:8px 10px;
  border-radius:999px;
  font-weight:950;
  white-space:nowrap;

  background: linear-gradient(180deg, rgba(230,59,46,.92), rgba(183,29,26,.92));
  color:#fff;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 14px 38px rgba(0,0,0,.35);
}

.job{ padding:14px 16px 10px; }

.job__row{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2, minmax(0,1fr));
  margin-bottom:10px;
}
.job__row:nth-child(2){ grid-template-columns:repeat(3, minmax(0,1fr)); }

.field{ display:block; }
.field__label{
  display:block;
  font-size:12px;
  font-weight:950;
  color: rgba(247,250,255,.78);
  margin-bottom:6px;
}

.input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  outline:none;
  -webkit-appearance:none;
  appearance:none;

  background: rgba(6,27,74,.85);
  color: rgba(247,250,255,.95);
  border: 1px solid rgba(255,215,106,.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}

.input::placeholder{ color: rgba(247,250,255,.56); }

.input:focus{
  border-color: rgba(255,215,106,.55);
  box-shadow: 0 0 0 5px rgba(255,215,106,.12);
}

.input--ta{ resize:vertical; min-height:92px; }

.job__actions{ margin-top:10px; }

.job__tips{
  border-top:1px solid rgba(255,215,106,.14);
  padding:12px 16px 16px;
  display:grid;
  gap:10px;
}

.tip{
  padding:12px 12px;
  border-radius:16px;

  background: rgba(10,43,134,.28);
  border: 1px dashed rgba(255,215,106,.22);
}
.tip span{
  display:block;
  margin-top:5px;
  color: rgba(247,250,255,.74);
  font-weight:850;
}

/* -------------------------
   SECTIONS / CARDS
-------------------------- */
.section{ padding:44px 0; background: transparent; }

.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.kicker{
  margin:0 0 8px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,215,106,.95);
  font-size:12px;
}

h2{
  margin:0;
  font-size: clamp(22px, 2.3vw, 34px);
  letter-spacing:-.02em;
}

.grid{ display:grid; gap:12px; }
.grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid--5{ grid-template-columns:repeat(5, minmax(0,1fr)); }

.card{
  padding:16px 16px;
  border-radius: var(--r);
  background: rgba(4,16,46,.82);
  border: 1px solid rgba(255,215,106,.16);
  box-shadow: 0 18px 56px rgba(0,0,0,.42);
}

.card h3{
  margin:0 0 8px;
  letter-spacing:-.01em;
  color: rgba(247,250,255,.96);
}

.list{
  margin:10px 0 0;
  padding-left:18px;
  color: rgba(247,250,255,.74);
  font-weight:800;
}

.link{
  display:inline-flex;
  margin-top:12px;
  font-weight:950;
  color: rgba(255,215,106,.98);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(255,215,106,.45);
}

.card--click{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card--click:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 70px rgba(0,0,0,.52);
  border-color: rgba(255,215,106,.28);
}

.banner{
  margin-top:14px;
  padding:14px 16px;
  border-radius: var(--r);
  font-weight:950;

  background: linear-gradient(180deg, rgba(255,215,106,.14), rgba(10,43,134,.10));
  border: 1px solid rgba(255,215,106,.22);
  color: rgba(247,250,255,.90);
}

/* steps, quotes */
.step, .quote{
  padding:16px 16px;
  border-radius: var(--r);
  background: rgba(4,16,46,.82);
  border: 1px solid rgba(255,215,106,.16);
  box-shadow: 0 18px 56px rgba(0,0,0,.42);
}

.step p{ margin:8px 0 0; color: rgba(247,250,255,.74); }

blockquote{
  margin:0;
  font-weight:950;
  color: rgba(247,250,255,.94);
  line-height:1.5;
}
figcaption{
  margin-top:10px;
  color: rgba(247,250,255,.72);
  font-weight:850;
}

/* FAQ */
.faq details{
  border-radius: var(--r);
  padding:12px 14px;
  margin:10px 0;

  background: rgba(4,16,46,.82);
  border: 1px solid rgba(255,215,106,.16);
  box-shadow: 0 18px 56px rgba(0,0,0,.38);
}

.faq summary{ cursor:pointer; font-weight:950; color: rgba(247,250,255,.94); }
.faq p{
  margin:10px 0 0;
  color: rgba(247,250,255,.74);
  font-weight:800;
  line-height:1.6;
}

/* -------------------------
   SEO <details> blocks
-------------------------- */
.seoDetails,
.megaLinks{
  margin-top: 14px;
  border-radius: var(--r);
  background: rgba(4,16,46,.82);
  border: 1px solid rgba(255,215,106,.16);
  box-shadow: 0 18px 56px rgba(0,0,0,.42);
  overflow: hidden;
}

.seoDetails__summary,
.megaLinks > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 14px 16px;
  font-weight: 950;
  color: rgba(247,250,255,.95);

  background: linear-gradient(180deg, rgba(255,215,106,.14), rgba(4,16,46,0));
  border-bottom: 1px solid rgba(255,215,106,.14);
}

.seoDetails__summary::-webkit-details-marker,
.megaLinks > summary::-webkit-details-marker{ display:none; }

.seoDetails__summary::after,
.megaLinks > summary::after{
  content:"▾";
  font-weight: 950;
  color: rgba(255,215,106,.95);
  transform: translateY(-1px) rotate(0deg);
  transition: transform .18s ease;
}

.seoDetails[open] .seoDetails__summary::after,
.megaLinks[open] > summary::after{
  transform: translateY(-1px) rotate(180deg);
}

.seoPhrases{
  padding: 12px 16px 16px;
  background: rgba(6,27,74,.45);
  max-height: 460px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(255,215,106,.10);
}

.seoPhrases::-webkit-scrollbar{ width: 10px; }
.seoPhrases::-webkit-scrollbar-track{ background: rgba(4,16,46,.45); border-radius: 999px; }
.seoPhrases::-webkit-scrollbar-thumb{
  background: rgba(255,215,106,.24);
  border: 1px solid rgba(255,215,106,.22);
  border-radius: 999px;
}

.seoList{
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.seoList li{
  padding: 10px 12px;
  border-radius: 14px;

  background: rgba(10,43,134,.22);
  border: 1px solid rgba(255,215,106,.12);

  color: rgba(247,250,255,.82);
  font-weight: 850;
  font-size: 13px;
  line-height: 1.25;
}

.seoList li:hover{
  border-color: rgba(255,215,106,.22);
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.megaLinks{ margin-top: 16px; }

.megaLinks__grid{
  padding: 14px 16px 16px;
  background: rgba(6,27,74,.45);

  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.megaLinks__grid > div{
  border-radius: 16px;
  padding: 12px 12px;

  background: rgba(4,16,46,.58);
  border: 1px solid rgba(255,215,106,.12);
}

.megaLinks__grid strong{
  display:block;
  margin-bottom: 10px;
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(255,215,106,.95);
}

.megaLinks__grid a{
  display:block;
  margin: 8px 0;
  padding: 9px 10px;
  border-radius: 14px;

  background: rgba(10,43,134,.18);
  border: 1px solid rgba(255,215,106,.10);

  font-weight: 900;
  color: rgba(247,250,255,.86);
}

.megaLinks__grid a:hover{
  border-color: rgba(255,215,106,.22);
  color: rgba(247,250,255,.96);
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* -------------------------
   FOOTER
-------------------------- */
.footer{
  border-top:1px solid rgba(255,215,106,.14);
  background: rgba(4,16,46,.88);
  padding:26px 0 14px;
}

.footer__grid{
  display:grid;
  gap:14px;
  grid-template-columns: 1.2fr .8fr .8fr;
}

.footer__links a{
  display:block;
  margin:8px 0;
  font-weight:950;
  color: rgba(247,250,255,.82);
}

.footer__bottom{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,215,106,.12);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* -------------------------
   STICKY CTA (MOBILE)
-------------------------- */
.sticky{
  position:fixed;
  left: calc(12px + var(--sal));
  right: calc(12px + var(--sar));
  bottom: calc(12px + var(--sab));
  display:none;
  gap:10px;
  padding:10px;
  border-radius:18px;
  z-index:120;

  background: rgba(4,16,46,.92);
  border: 1px solid rgba(255,215,106,.18);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

.sticky .btn{ flex:1; }

/* -------------------------
   CHAT FAB
-------------------------- */
.ck-fab{
  position:fixed;
  right: calc(14px + var(--sar));
  bottom: calc(14px + var(--sab) + 92px);
  z-index:121;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:950;
  font-size:14px;

  background: linear-gradient(180deg, rgba(255,233,166,.98), rgba(255,215,106,.96));
  color:#1A1408;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);

  opacity:0;
  pointer-events:none;
  transform: translateY(10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

body.ck-scrolled .ck-fab{
  opacity:1;
  pointer-events:auto;
  transform: translateY(0) scale(1);
}

.ck-fab__dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--red1);
  box-shadow: 0 0 0 8px rgba(230,59,46,.14);
}

/* -------------------------
   CHAT OVERLAY
-------------------------- */
.ck-chat{
  position:fixed; inset:0;
  display:none;
  z-index:150;
  background: rgba(0,0,0,.62);
}

.ck-chat__panel{
  position:absolute;
  right: calc(14px + var(--sar));
  left:  calc(14px + var(--sal));
  bottom: calc(78px + var(--sab));
  width:auto;
  border-radius:22px;
  overflow:hidden;
  max-height: calc(100vh - (140px + var(--sat)));

  background: rgba(4,16,46,.96);
  border: 1px solid rgba(255,215,106,.18);
  box-shadow: 0 30px 100px rgba(0,0,0,.70);
}

.ck-chat__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  background: linear-gradient(180deg, rgba(255,215,106,.16), rgba(4,16,46,0));
  border-bottom:1px solid rgba(255,215,106,.14);
}

.ck-chat__title span{ display:block; margin-top:4px; font-size:12px; color: rgba(247,250,255,.74); }

.ck-chat__x{
  width:38px; height:38px;
  border-radius:14px;
  cursor:pointer;
  font-weight:950;

  background: linear-gradient(180deg, rgba(230,59,46,.92), rgba(183,29,26,.92));
  color:#fff;
  border: 1px solid rgba(255,255,255,.20);
}

.ck-chat__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid rgba(255,215,106,.12);
}

.ck-chat__pill{
  padding:7px 10px;
  border-radius:999px;
  background: rgba(10,43,134,.55);
  border:1px solid rgba(255,215,106,.18);
  font-weight:950;
  color: rgba(247,250,255,.92);
}

.ck-chat__log{
  height: min(52vh, 420px);
  padding:12px;
  overflow:auto;
  background: rgba(6,27,74,.55);
}

.ck-chat__form{
  display:flex;
  gap:10px;
  padding:12px 12px calc(12px + var(--sab));
  border-top:1px solid rgba(255,215,106,.12);
  background: rgba(4,16,46,.96);
}

.ck-chat__input{
  flex:1;
  padding:12px 12px;
  border-radius:14px;
  outline:none;
  font:inherit;

  background: rgba(6,27,74,.85);
  color: rgba(247,250,255,.95);
  border:1px solid rgba(255,215,106,.14);
}

.ck-chat__input::placeholder{ color: rgba(247,250,255,.56); }

.ck-chat__input:focus{
  border-color: rgba(255,215,106,.55);
  box-shadow: 0 0 0 5px rgba(255,215,106,.12);
}

.ck-chat__send{
  padding:12px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:950;

  background: linear-gradient(180deg, rgba(255,233,166,.98), rgba(255,215,106,.96));
  color:#1A1408;
  box-shadow: 0 16px 46px rgba(0,0,0,.40);
}

.ck-chat__hint{
  padding:10px 14px;
  font-size:12px;
  border-top:1px solid rgba(255,215,106,.10);
  background: rgba(4,16,46,.96);
  color: rgba(247,250,255,.78);
}

/* -------------------------
   RESPONSIVE (GENERAL)
-------------------------- */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns:1fr; }
  .grid--3{ grid-template-columns:1fr; }
  .grid--5{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; }
  .sticky{ display:flex; }

  .job__row{ grid-template-columns:1fr !important; }
  .hero{ padding:18px 0 8px; }
  .stats{ grid-template-columns:1fr; }

  .megaLinks__grid{ grid-template-columns: 1fr; }
  .seoList{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seoPhrases{ max-height: 380px; }
}

@media (max-width: 560px){
  /* hide desktop nav bar, show burger */
  .nav{
    background: transparent;
    border:0;
    padding:0;
  }
  .nav__row{
    padding:0;
    height:0;
  }
  .brand--desktopOnly{ display:none; }
  .nav__links{ display:none; }

  .nav__burger{ display:inline-flex; }

  .nav__burger--center{
    position:fixed;
    left: calc(12px + var(--sal));
    top: calc(var(--sat) + var(--fomoH) + 12px);
    z-index:126;
  }

  /* reserve header padding so burger doesn't overlap title */
  .mhead .container{
    padding-left: 64px;
    padding-right: 12px;
  }

  /* typography */
  .hero{ padding:16px 0 8px; }
  h1{
    font-size: clamp(26px, 8.2vw, 40px);
    line-height:1.03;
    margin:12px 0 8px;
    letter-spacing:-.03em;
  }
  .lead{ font-size:15px; line-height:1.55; }
  .tag{ padding:9px 12px; }

  .seoList{ grid-template-columns: 1fr; }
  .seoPhrases{ max-height: 320px; }
}

/* -------------------------
   🔥 MOBILE FIX: 360–430px (YOUR SCREENSHOT)
   - FOMO becomes 2-row so promo text is fully visible
   - Header becomes 2-row: full name + cities + buttons grid
   - No ellipsis for title on mobile
-------------------------- */
@media (max-width: 430px){
  /* give enough reserved space so content never overlaps fixed bars */
  :root{
    --fomoH: 84px;     /* FOMO becomes taller on small phones */
    --mheadH: 112px;   /* Header becomes taller because it’s 2 rows */
  }
  body{
    padding-top: calc(var(--sat) + var(--fomoH) + var(--mheadH) + 8px);
  }

  /* ===== FOMO STACK (full text visible) ===== */
  .fomo__row{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px 0 12px;
  }
  .fomo__left{
    flex-wrap:wrap;
  }
  .fomo__left strong{
    white-space:normal;
  }
  .fomo__right{
    width:100%;
    justify-content:space-between;
  }
  .fomo__btn{
    flex:1;
    min-height:38px;
    padding:8px 10px;
    font-size:13px;
  }
  .fomo__x{
    width:38px; height:38px;
    flex:0 0 auto;
  }

  /* ===== HEADER 2-ROW (FULL TITLE + CITIES) ===== */
  .mhead__row{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px 12px;
    padding:10px 0 10px;
  }

  .mhead__copy{
    flex:1 1 100%;
    min-width:0;
  }

  .mhead__title{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    max-width:100%;
    line-height:1.08;
    font-size:15px;
  }
  .mhead__title span{
    display:block;
    margin-top:2px;
    font-size:12.5px;
  }

  .mhead__sub{
    display:block;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    max-width:100%;
    margin-top:4px;
    font-size:12px;
    opacity:.92;
  }

  .mhead__actions{
    flex:1 1 100%;
    width:100%;
    margin-top:6px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  .mhead__btn{
    width:100%;
    min-height:40px;
    padding:9px 10px;
    font-size:13.5px;
    border-radius:16px;
  }
  .mhead__btnSmall{ display:none; }
}

/* Ultra tiny safety */
@media (max-width: 360px){
  :root{ --fomoH: 86px; --mheadH: 118px; }
  .mhead__title{ font-size:14.5px; }
  .mhead__title span{ font-size:12px; }
  .mhead__actions{ gap:8px; }
  .mhead__btn{ font-size:13px; }
}

/* -------------------------
   Motion reduce
-------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ================================
   ONE FIX SYSTEM (REAL HEIGHTS)
   paste at VERY END of style.css
================================== */
:root{
  --fomoReal: 0px;   /* real pixel height from JS */
  --mheadReal: 0px;  /* real pixel height from JS */
}

/* keep both bars fixed */
#fomoBar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10080 !important;
}

header.mhead{
  position: fixed !important;
  top: var(--fomoReal) !important;   /* <- NO safe-area double count */
  left: 0 !important;
  right: 0 !important;
  z-index: 10070 !important;
}

/* THIS is the key: page starts below BOTH fixed bars */
body{
  padding-top: calc(var(--fomoReal) + var(--mheadReal) + 10px) !important;
}

/* burger always clickable and placed under promo */
@media (max-width: 560px){
  .nav__burger--center{
    top: calc(var(--fomoReal) + 12px) !important;
    z-index: 10100 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #mnav.mnav{
    z-index: 10120 !important;
  }
}
/* =========================
   BRIGHT WHITE HAMBURGER
   ========================= */
@media (max-width: 560px){
  .nav__burger{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(255,255,255,.65) !important;
    box-shadow:
      0 18px 60px rgba(0,0,0,.35),
      0 0 0 1px rgba(255,215,106,.25) inset,
      0 0 22px rgba(255,255,255,.18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .nav__burger span{
    background: rgba(4,16,46,.95) !important; /* dark lines on white */
    height: 2.5px !important;
    width: 20px !important;
  }

  .nav__burger:active{
    transform: scale(.98);
  }
}
/* ===== HAMBURGER: ALWAYS CLICKABLE + BRIGHT ===== */
@media (max-width: 560px){
  #navBurger{
    position: fixed !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    top:  calc(env(safe-area-inset-top, 0px) + var(--fomoH) + 12px) !important;
    width: 50px !important;
    height: 50px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    z-index: 2147483647 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;

    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.35) !important;
  }

  #navBurger span{
    background: rgba(4,16,46,.95) !important;
    width: 22px !important;
    height: 3px !important;
    border-radius: 999px !important;
  }

  /* меню всегда показывается когда nav-open */
  body.nav-open #mnav{
    display: block !important;
    z-index: 2147483646 !important;
  }

  /* чтобы никакие “красивые” слои не воровали тапы */
  body::before, .hero::before, .hero::after{
    pointer-events: none !important;
  }
}

/* ===== MOBILE NAV VISIBILITY FIX ===== */
.nav__burger{
  position: relative;
  z-index: 10050;
  pointer-events: auto;
}

/* overlay */
.mnav{
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: none;
  background: rgba(8, 14, 28, .55);
  backdrop-filter: blur(10px);
}

/* show overlay when open */
body.nav-open .mnav{
  display: block;
}

/* panel slide */
.mnav__panel{
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: min(380px, 88vw);
  transform: translateX(110%);
  transition: transform .22s ease;
}

body.nav-open .mnav__panel{
  transform: translateX(0);
}
#navBurger{
  position: fixed !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}


/* FIX: unlock z-index layers (burger was trapped under header) */
body > *{ z-index: auto !important; } 
body::before{ z-index: -1 !important; }

/* Hide hamburger while mobile menu is open */
@media (max-width: 560px){
  body.nav-open #navBurger{
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(.96) !important;
  }
}

/* =========================
   MOBILE FIXES
   - footer bottom visible above sticky bar
   - burger 10px lower
   ========================= */
@media (max-width: 560px){

  /* give page more scroll room below the sticky CTA */
  body{
    padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* make sure footer bottom isn't hidden behind sticky */
  .footer{
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* hamburger down by 10px (was +12px -> +22px) */
  #navBurger{
    top: calc(var(--fomoReal, 0px) + 37px) !important;
  }
}

/* =========================
   MOBILE BURGER: 3 WHITE LINES ONLY (no square)
   ========================= */
@media (max-width: 560px){

  /* no square, no bg */
  #navBurger{
    width: 44px !important;
    height: 13px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    /* keep clickable */
    z-index: 2147483647 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* the lines */
  #navBurger span{
    display: block !important;
    width: 26px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.96) !important;

    /* readable on any bg */
    box-shadow: 0 2px 10px rgba(0,0,0,.45) !important;
  }

  /* active animation */
  #navBurger:active{
    transform: scale(.98);
    opacity: .92;
  }

  /* OPTIONAL: make it look "open" (X) when menu is open */
  body.nav-open #navBurger span:nth-child(1){
    transform: translateY(9px) rotate(45deg);
  }
  body.nav-open #navBurger span:nth-child(2){
    opacity: 0;
  }
  body.nav-open #navBurger span:nth-child(3){
    transform: translateY(-9px) rotate(-45deg);
  }

  /* smooth */
  #navBurger span{
    transition: transform .18s ease, opacity .18s ease;
  }
}
/* ===============================
   MOBILE CHAT FIX (FULLSCREEN + VISIBLE CLOSE)
   paste at VERY END of style.css
================================= */
@media (max-width: 560px){

  /* overlay always above everything */
  #ckChat.ck-chat{
    z-index: 2147483646 !important;
    display: none; /* JS will set block */
  }

  /* panel becomes fullscreen-ish */
  #ckChat .ck-chat__panel{
    position: fixed !important;

    /* start below fixed bars (real heights from your JS) */
    top: calc(var(--fomoReal) + var(--mheadReal) + 8px) !important;
    left: 12px !important;
    right: 12px !important;

    /* leave space for iOS home bar and your sticky CTA */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important;

    width: auto !important;
    max-height: none !important;

    border-radius: 18px !important;
    overflow: hidden !important;

    display: flex !important;
    flex-direction: column !important;
  }

  /* header always visible */
  #ckChat .ck-chat__head{
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;

    padding: 14px 14px !important;
  }

  /* make close button BIG + ALWAYS visible */
  #ckChat .ck-chat__x{
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: linear-gradient(180deg, rgba(230,59,46,.98), rgba(183,29,26,.98)) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow: 0 14px 38px rgba(0,0,0,.35) !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  /* meta smaller and sticky-ish */
  #ckChat .ck-chat__meta{
    padding: 10px 14px !important;
  }

  /* log becomes flexible (takes remaining height) */
  #ckChat .ck-chat__log{
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 140px !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* input row always visible */
  #ckChat .ck-chat__form{
    flex: 0 0 auto !important;
    padding: 12px 12px 12px !important;
  }

  #ckChat .ck-chat__input{
    height: 44px !important;
    font-size: 16px !important; /* IMPORTANT: stops iOS zoom */
  }

  #ckChat .ck-chat__send{
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    font-weight: 950 !important;
  }

  /* hint stays visible */
  #ckChat .ck-chat__hint{
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
  }
}


/* ===== CHAT FORM WIDTH FIX (Send not cut) ===== */
@media (max-width: 560px){

  /* чуть больше правого/левого паддинга у панели */
  #ckChat .ck-chat__panel{
    left: 10px !important;
    right: 10px !important;
  }

  /* форма — строго одна строка */
  #ckChat .ck-chat__form{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 12px !important;
    width: 100% !important;
  }

  /* инпут занимает всё место и НЕ ломает layout */
  #ckChat .ck-chat__input{
    flex: 1 1 auto !important;
    min-width: 0 !important;          /* ключевая строка! */
    width: auto !important;
    box-sizing: border-box !important;
    padding-right: 14px !important;
  }

  /* кнопка фиксированной ширины, чтобы не резалась */
  #ckChat .ck-chat__send{
    flex: 0 0 auto !important;
    min-width: 88px !important;
    width: 88px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* если экран совсем узкий — чуть уменьшаем кнопку */
  @media (max-width: 360px){
    #ckChat .ck-chat__send{
      min-width: 78px !important;
      width: 78px !important;
    }
  }
}
/* =========================
   FAQ PRO (Hard Questions)
========================= */
.faqPro{ padding-top: 0; }
.faqPro__inner{ margin-top: 6px; }

.fqHead{
  margin-bottom: 14px;
}

.fqKicker{
  display:inline-flex;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,215,106,.95);
  font-size: 12px;
}

.fqTitle{
  margin: 8px 0 6px;
  font-size: clamp(22px, 2.3vw, 34px);
  letter-spacing: -.02em;
}

.fqSub{
  margin: 0;
  color: rgba(247,250,255,.72);
  font-weight: 850;
  line-height: 1.5;
}

.fqGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fqItem{
  border-radius: var(--r);
  background: rgba(4,16,46,.82);
  border: 1px solid rgba(255,215,106,.16);
  box-shadow: 0 18px 56px rgba(0,0,0,.38);
  overflow:hidden;
}

.fqItem > summary{
  cursor:pointer;
  padding: 14px 14px;
  font-weight: 950;
  color: rgba(247,250,255,.94);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  background: linear-gradient(180deg, rgba(255,215,106,.14), rgba(4,16,46,0));
  border-bottom: 1px solid rgba(255,215,106,.14);
}

.fqItem > summary::-webkit-details-marker{ display:none; }

.fqItem > summary::after{
  content:"▾";
  font-weight: 950;
  color: rgba(255,215,106,.95);
  transform: translateY(-1px);
  transition: transform .18s ease;
}

.fqItem[open] > summary::after{
  transform: translateY(-1px) rotate(180deg);
}

.fqBody{
  padding: 12px 14px 14px;
  color: rgba(247,250,255,.76);
  font-weight: 850;
  line-height: 1.6;
  background: rgba(6,27,74,.45);
}

/* Mobile */
@media (max-width: 980px){
  .fqGrid{ grid-template-columns: 1fr; }
}