/* ===========================================================
   FENI CRANE SERVICE — Premium Redesign 2026
   Khadem Enterprise Feni | Finest Marketing Edition
   =========================================================== */

:root {
  --bg: #05080f;
  --bg-2: #0a101c;
  --surface: #0f1726;
  --surface-2: #151f32;
  --line: rgba(245, 166, 35, 0.12);
  --line-strong: rgba(245, 166, 35, 0.4);
  --crane: #f5a623;
  --crane-2: #ff8c1a;
  --crane-glow: rgba(245, 166, 35, 0.35);
  --crane-soft: rgba(245, 166, 35, 0.1);
  --text: #eef3fa;
  --muted: #9aadc4;
  --muted-2: #6b7f96;
  --white: #fff;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 28px 64px -24px rgba(0, 0, 0, 0.75);
  --shadow-crane: 0 20px 48px -14px rgba(245, 166, 35, 0.45);
  --maxw: 1180px;
  --font: 'Noto Sans Bengali', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: 'Saira Condensed', 'Noto Sans Bengali', system-ui, sans-serif;
  --sp-5: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:root[data-theme="light"] {
  --bg: #f2f5fa;
  --bg-2: #e6ecf5;
  --surface: #ffffff;
  --surface-2: #f0f4fa;
  --line: rgba(224, 142, 0, 0.22);
  --line-strong: rgba(224, 142, 0, 0.48);
  --crane: #d98900;
  --crane-2: #e86f0a;
  --crane-glow: rgba(217, 137, 0, 0.28);
  --crane-soft: rgba(217, 137, 0, 0.1);
  --text: #141c28;
  --muted: #4a5a70;
  --muted-2: #7a8a9e;
  --shadow: 0 24px 56px -22px rgba(20, 40, 70, 0.22);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
svg { max-width: 100%; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section { padding: var(--sp-5) 0; position: relative; }

.section-head { text-align: center; max-width: 740px; margin: 0 auto 56px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--crane); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--crane-soft); border: 1px solid var(--line);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 18px;
}
.section-head h2 {
  font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.08; font-weight: 700; letter-spacing: 0.3px;
}
.section-head h2 b {
  background: linear-gradient(120deg, var(--crane), var(--crane-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head p { color: var(--muted); margin-top: 14px; font-size: 1.05rem; }
.section-rule {
  width: 56px; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--crane), var(--crane-2));
  margin: 0 auto 20px;
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-family: var(--font);
  padding: 15px 28px; border-radius: var(--radius-sm);
  cursor: pointer; border: 0; font-size: 0.97rem;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg); transition: left 0.55s ease; pointer-events: none;
}
.btn:hover::after { left: 130%; }
.btn-primary {
  background: linear-gradient(135deg, var(--crane), var(--crane-2));
  color: #1a1206; box-shadow: var(--shadow-crane);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -14px rgba(245,166,35,0.68); }
.btn-ghost {
  background: rgba(255,255,255,0.04); color: var(--text);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { transform: translateY(-3px); background: rgba(245,166,35,0.1); }
.btn-whatsapp { background: #25d366; color: #06210f; }
.btn-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgba(37,211,102,0.55); }
.card .card-wa { margin-top: 16px; width: 100%; justify-content: center; display: inline-flex; }

.offer-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(90deg, var(--crane-2), var(--crane));
  color: #1a1206; font-size: 0.9rem; font-weight: 600;
  padding: 9px 46px 9px 16px; text-align: center;
}
.offer-bar .ob-tag {
  background: #1a1206; color: var(--crane); font-size: 0.72rem;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.offer-bar a { color: #1a1206; text-decoration: underline; }
.offer-bar .ob-close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: rgba(26,18,6,0.12); border: 0; color: #1a1206;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 0.9rem;
}
.offer-bar.hide { display: none; }
body.has-offer header { top: 38px; }
body.has-offer { scroll-padding-top: 130px; }

header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: all 0.35s ease;
}
header.scrolled {
  background: rgba(5, 8, 15, 0.92); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line); box-shadow: 0 12px 36px -20px rgba(0,0,0,0.85);
}
:root[data-theme="light"] header.scrolled {
  background: rgba(242, 245, 250, 0.94); border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand .mark {
  width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(135deg, var(--crane), var(--crane-2));
  display: grid; place-items: center; box-shadow: var(--shadow-crane);
}
.brand .mark svg { width: 25px; height: 25px; color: #1a1206; }
.brand .txt {
  font-family: var(--display); font-weight: 700; font-size: 1.22rem;
  letter-spacing: 0.4px; line-height: 1;
}
.brand .txt span { color: var(--crane); }
.brand .sub { font-size: 0.66rem; color: var(--muted-2); margin-top: 3px; }

.nav-links {
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 6px;
}
header.scrolled .nav-links { background: rgba(255,255,255,0.04); border-color: var(--line-strong); }
.nav-links > a {
  padding: 9px 14px; border-radius: 999px; color: var(--muted);
  font-weight: 600; font-size: 0.88rem; transition: all 0.2s; white-space: nowrap;
}
.nav-links > a:hover { color: var(--crane); background: var(--crane-soft); }
.nav-links > a.active {
  color: #1a1206; background: linear-gradient(135deg, var(--crane), var(--crane-2));
  box-shadow: 0 8px 20px -8px rgba(245,166,35,0.55);
}
.nav-drop { position: relative; }
.nav-drop-btn {
  padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--muted); font-weight: 600; font-size: 0.88rem;
  font-family: var(--font); display: inline-flex; align-items: center; gap: 4px;
}
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn { color: var(--crane); background: var(--crane-soft); }
.nav-drop-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-strong); border-radius: 16px; padding: 8px;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 0.25s ease; z-index: 120;
}
.nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-drop-menu a {
  display: block; padding: 11px 14px; border-radius: 10px; color: var(--muted);
  font-weight: 600; font-size: 0.9rem;
}
.nav-drop-menu a:hover { background: var(--crane-soft); color: var(--crane); }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.theme-toggle, .lang-toggle {
  width: 42px; height: 42px; border-radius: 11px; background: var(--crane-soft);
  border: 1px solid var(--line-strong); color: var(--crane); display: grid; place-items: center;
  cursor: pointer; transition: transform 0.25s, background 0.25s;
}
.theme-toggle:hover, .lang-toggle:hover { transform: translateY(-2px); background: var(--crane); color: #1a1206; }
.theme-toggle svg { width: 21px; height: 21px; }
.lang-toggle { font-weight: 800; font-size: 0.8rem; font-family: var(--display); }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }

.hamburger {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--crane-soft); display: none; place-items: center; cursor: pointer; color: var(--crane);
}
.hb-lines { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.hb-lines i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s, opacity 0.3s, width 0.3s; }
.hamburger[aria-expanded="true"] .hb-lines i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hb-lines i:nth-child(2) { opacity: 0; width: 0; }
.hamburger[aria-expanded="true"] .hb-lines i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-head, .nav-mobile-cta { display: none; }
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  /* NO backdrop-filter — prevents whole-page blur */
  z-index: 125;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}
.nav-backdrop.show { opacity: 1; visibility: visible; pointer-events: auto; }
body.menu-open { overflow: hidden; }
body.menu-open > *:not(header):not(.nav-backdrop) {
  /* do not blur page content */
  filter: none !important;
}

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--crane), var(--crane-2)); z-index: 200;
}

.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding-top: 100px; overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 520px at 82% -8%, rgba(245,166,35,0.15), transparent 60%),
    radial-gradient(720px 520px at -8% 110%, rgba(27,42,69,0.65), transparent 60%),
    linear-gradient(180deg, #05080f, #0a101c 60%, #05080f);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.32; z-index: 0;
}
:root[data-theme="light"] .hero-video { opacity: 0.18; mix-blend-mode: multiply; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,166,35,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, #000 30%, transparent 75%);
}
.hero-inner {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: 1.12fr 0.88fr; gap: 44px; align-items: center; width: 100%;
}
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--crane-soft); border: 1px solid var(--line-strong);
  padding: 9px 16px; border-radius: 999px; color: var(--crane);
  font-weight: 600; font-size: 0.85rem; margin-bottom: 20px;
}
.dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--crane);
  box-shadow: 0 0 0 0 rgba(245,166,35,0.7); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(245,166,35,0.55); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.hero h1 {
  font-family: var(--display); font-size: clamp(2.45rem, 5.4vw, 4.15rem);
  line-height: 1.04; font-weight: 700; letter-spacing: 0.25px; text-wrap: balance;
}
.hero h1 b {
  background: linear-gradient(120deg, var(--crane), var(--crane-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 28px var(--crane-glow);
}
.hero .lead { color: var(--muted); font-size: 1.15rem; margin: 22px 0; max-width: 560px; }
.hero .lead b { color: var(--text); }
.notice {
  display: flex; gap: 14px;
  background: linear-gradient(135deg, rgba(245,166,35,0.13), rgba(255,140,26,0.05));
  border: 1px solid var(--line-strong); border-radius: 15px;
  padding: 16px 18px; margin: 6px 0 26px;
}
.notice .ic {
  flex: 0 0 38px; height: 38px; border-radius: 10px; background: var(--crane);
  display: grid; place-items: center; color: #1a1206;
}
.notice p { font-size: 0.96rem; color: #f4e6cb; }
.notice b { color: var(--crane); }
:root[data-theme="light"] .notice p { color: #4a3810; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 20px; }
.hero-trust span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.88rem; font-weight: 600; color: var(--crane);
}

.hero-feats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 18px 0 0;
  padding: 0;
  max-width: 560px;
}
.hero-feats li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px 7px 10px;
}
.hero-feats li svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  flex-shrink: 0;
  color: var(--crane);
  stroke: currentColor;
}

.hero-card {
  position: relative; background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line); border-radius: 24px; padding: 20px;
  box-shadow: var(--shadow); overflow: hidden;
}
.hero-card img {
  width: 100%; height: 230px; object-fit: cover; border-radius: 14px;
  border: 1px solid var(--line); transition: transform 0.6s ease;
}
.hero-card:hover img { transform: scale(1.04); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.mini-stat {
  background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 8px; text-align: center;
  transition: transform 0.3s, background 0.3s;
}
.mini-stat:hover { transform: translateY(-3px); background: rgba(245,166,35,0.06); }
.mini-stat b { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--crane); line-height: 1; }
.mini-stat span { font-size: 0.7rem; color: var(--muted-2); }
.scroll-cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 3; color: var(--muted-2); font-size: 0.75rem; text-align: center;
  animation: bob 2s ease-in-out infinite;
}
.scroll-cue svg { width: 22px; height: 22px; display: block; margin: 4px auto 0; }
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

.trust {
  overflow: hidden; border-bottom: 1px solid var(--line);
  background: var(--bg-2); padding: 16px 0;
}
.trust-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: scrollx 28s linear infinite; color: var(--muted-2);
  font-weight: 600; font-size: 0.93rem;
}
.trust-track span { display: inline-flex; align-items: center; gap: 8px; }
.trust-track svg { width: 16px; height: 16px; color: var(--crane); }
@keyframes scrollx { to { transform: translateX(-50%); } }

.stats {
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stats .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
.stat {
  border: 1px solid var(--line); border-radius: 16px; padding: 24px;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  transition: transform 0.3s, border-color 0.3s;
}
.stat:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.stat b {
  font-family: var(--display); font-size: clamp(2rem, 4vw, 2.85rem);
  color: var(--crane); display: block; line-height: 1; min-height: 1.15em;
}
.stat span { color: var(--muted); font-size: 0.93rem; }

.process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pstep {
  position: relative; background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 26px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; overflow: visible;
}
.pstep:hover { transform: translateY(-8px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.pstep .pn {
  width: 54px; height: 54px; border-radius: 15px;
  background: linear-gradient(135deg, var(--crane), var(--crane-2));
  color: #1a1206; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.45rem;
  margin-bottom: 16px; box-shadow: var(--shadow-crane);
}
.pstep h3 { font-size: 1.15rem; margin-bottom: 8px; }
.pstep p { color: var(--muted); font-size: 0.94rem; }
@media (min-width: 981px) {
  .process-steps .pstep:not(:last-child)::after {
    content: '→'; position: absolute; right: -20px; top: 50%;
    transform: translateY(-50%); font-size: 1.6rem; color: var(--crane); opacity: 0.4; z-index: 3;
  }
}

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s, background-size 0.35s;
  position: relative; overflow: hidden;
  background-image: linear-gradient(var(--crane), var(--crane)), linear-gradient(160deg, var(--surface), var(--bg-2));
  background-size: 0 3px, 100% 100%; background-position: left top, 0 0; background-repeat: no-repeat;
}
.card:hover {
  transform: translateY(-8px); border-color: var(--line-strong); box-shadow: var(--shadow);
  background-size: 100% 3px, 100% 100%;
}
.card .ic {
  width: 54px; height: 54px; border-radius: 14px; background: var(--crane-soft);
  border: 1px solid var(--line-strong); display: grid; place-items: center;
  color: var(--crane); margin-bottom: 16px; transition: transform 0.3s;
}
.card:hover .ic { transform: scale(1.08) rotate(-3deg); }
.card .ic svg { width: 28px; height: 28px; }
.card h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.94rem; }
.card ul { margin-top: 14px; display: grid; gap: 8px; }
.card ul li { display: flex; gap: 8px; color: var(--muted); font-size: 0.88rem; }
.card ul svg { width: 16px; height: 16px; color: var(--crane); flex: 0 0 auto; margin-top: 3px; }

.fitem {
  background: linear-gradient(160deg, var(--surface), var(--bg));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  text-align: center; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.fitem:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.fitem .ton { font-family: var(--display); font-size: 2.25rem; color: var(--crane); line-height: 1; }
.fitem .ton small { font-size: 1rem; color: var(--muted); }
.fitem .ton-bar {
  height: 4px; border-radius: 99px; background: rgba(245,166,35,0.12);
  margin: 14px 0 10px; overflow: hidden;
}
.fitem .ton-bar i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--crane), var(--crane-2));
  box-shadow: 0 0 12px var(--crane-glow);
}
.fitem h4 { font-size: 1rem; margin: 8px 0 4px; }
.fitem p { color: var(--muted-2); font-size: 0.84rem; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gitem {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 4/3; transition: transform 0.4s; cursor: zoom-in;
}
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.gitem:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gitem:hover img { transform: scale(1.08); }
.gitem span {
  position: absolute; bottom: 12px; left: 14px; font-size: 0.8rem; color: #fff;
  background: rgba(6,10,18,0.8); padding: 5px 12px; border-radius: 999px;
  font-weight: 500; transform: translateY(6px); transition: transform 0.35s; z-index: 2;
}
.gitem:hover span { transform: translateY(0); }
.gitem::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(6,10,18,0.82));
  opacity: 0; transition: opacity 0.35s; z-index: 1;
}
.gitem:hover::before { opacity: 1; }

.pricing-note {
  max-width: 720px; margin: 0 auto 28px; text-align: center;
  background: var(--crane-soft); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px;
}
.pricing-note p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.pricing-note strong { color: var(--crane); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pricing {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 26px;
  text-align: center; position: relative;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.pricing:hover { transform: translateY(-8px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.pricing.popular {
  border-color: var(--crane);
  background: linear-gradient(160deg, var(--crane-soft), rgba(245,166,35,0.04));
  box-shadow: 0 0 0 1px var(--crane), 0 20px 50px -20px rgba(245,166,35,0.35);
}
.pricing.popular:hover { transform: translateY(-12px) scale(1.015); box-shadow: 0 28px 56px -18px rgba(245,166,35,0.5); }
.ppop {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--crane); color: #1a1206; font-size: 0.72rem; font-weight: 700;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.pricing h3 { font-size: 1.2rem; font-weight: 700; }
.pprice {
  font-family: var(--display); font-size: clamp(1.85rem, 3vw, 2.5rem);
  color: var(--crane); line-height: 1; margin: 12px 0; font-weight: 700;
}
.pdesc { color: var(--muted); font-size: 0.88rem; margin-bottom: 16px; }
.prate { font-size: 0.82rem; color: var(--crane); font-weight: 600; margin: -6px 0 14px; }
.pricing ul { display: grid; gap: 10px; margin-bottom: 22px; text-align: left; }
.pricing li { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9rem; }
.pricing li svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--crane); }
.emergency-strip {
  margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px;
  background: linear-gradient(135deg, rgba(220,60,40,0.12), rgba(245,166,35,0.08));
  border: 1px solid rgba(220,80,60,0.28); border-radius: 18px; padding: 22px 26px;
}
.em-left { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.em-left strong { font-size: 1.1rem; color: var(--text); }
.em-left span { color: var(--muted); font-size: 0.92rem; }
.em-btns { display: flex; flex-wrap: wrap; gap: 10px; }

.testi { background: var(--bg-2); }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tcard {
  background: linear-gradient(160deg, var(--surface), var(--bg));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.tcard .quote { color: var(--crane); font-size: 2.4rem; font-family: var(--display); line-height: 0.6; opacity: 0.35; }
.tcard p { color: var(--text); font-size: 0.94rem; flex: 1; }
.tcard .who { display: flex; align-items: center; gap: 12px; }
.tcard .av {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--crane), var(--crane-2));
  display: grid; place-items: center; color: #1a1206; font-weight: 700;
  font-family: var(--display); font-size: 1.05rem; flex: 0 0 auto;
}
.tcard .who b { display: block; font-size: 0.93rem; }
.tcard .who span { font-size: 0.78rem; color: var(--muted-2); }
.stars { color: var(--crane); font-size: 0.82rem; }
.tdots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.tdots button {
  width: 10px; height: 10px; border-radius: 50%; border: 0;
  background: var(--line-strong); cursor: pointer; transition: background 0.3s, transform 0.3s;
}
.tdots button.active { background: var(--crane); transform: scale(1.3); }

.why, .drivers { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.why .visual, .drivers .dvisual {
  position: relative; height: 400px; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
}
.why .visual { background: url('images/crane-1.webp') center/cover; }
.why .visual::after, .drivers .dvisual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(6,10,18,0.15), rgba(6,10,18,0.55));
}
.drivers .dvisual img { width: 100%; height: 100%; object-fit: cover; }
.op-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 0.85fr;
  gap: 8px;
  height: 100%;
  min-height: 320px;
}
.op-grid picture {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  height: 100%;
}
.op-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.op-grid picture:hover img { transform: scale(1.05); }
.op-grid .op-wide {
  grid-column: 1 / -1;
}
.drivers .badge-xs {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  background: var(--crane); color: #1a1206; font-weight: 700; font-size: 0.82rem;
  padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow-crane);
  animation: badgepulse 2.8s ease-in-out infinite;
}
@keyframes badgepulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.reasons, .dpoints { display: grid; gap: 14px; }
.reason, .dpoint {
  display: flex; gap: 14px;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  transition: transform 0.3s, border-color 0.3s;
}
.reason:hover, .dpoint:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.reason .num, .dpoint .num {
  flex: 0 0 42px; height: 42px; border-radius: 11px; background: var(--crane);
  color: #1a1206; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.15rem;
}
.reason h4, .dpoint h4 { font-size: 1.02rem; margin-bottom: 2px; }
.reason p, .dpoint p { color: var(--muted); font-size: 0.9rem; }

.area-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.area-col {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}
.area-col h3 { font-size: 1.15rem; margin-bottom: 14px; color: var(--crane); }
.area-col ul { display: grid; gap: 8px; }
.area-col li {
  color: var(--muted); font-size: 0.94rem; display: flex; gap: 8px; align-items: center;
}
.area-col li::before { content: '▸'; color: var(--crane); }

.guides-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.guide-card {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column; gap: 10px;
}
.guide-card:hover { transform: translateY(-8px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.guide-card .gc-num {
  font-family: var(--display); font-size: 2.4rem; font-weight: 800;
  color: var(--crane); opacity: 0.2; line-height: 1;
}
.guide-card h3 { font-size: 1.12rem; margin: 0; }
.guide-card p { color: var(--muted); font-size: 0.9rem; flex: 1; margin: 0; }
.guide-card .gc-link { color: var(--crane); font-weight: 700; font-size: 0.9rem; margin-top: 6px; }

.faq { max-width: 820px; margin: 0 auto; }
.qa {
  border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px;
  overflow: hidden; background: linear-gradient(160deg, var(--surface), var(--bg-2));
}
.qa summary {
  list-style: none; cursor: pointer; padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; font-weight: 600; font-size: 1rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm {
  flex: 0 0 28px; height: 28px; border-radius: 8px; background: var(--crane-soft);
  border: 1px solid var(--line-strong); display: grid; place-items: center;
  color: var(--crane); transition: transform 0.3s;
}
.qa[open] summary .pm { transform: rotate(45deg); }
.qa .ans { padding: 0 20px 18px; color: var(--muted); font-size: 0.94rem; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cinfo h3 { font-size: 1.3rem; margin-bottom: 6px; }
.cinfo > p { color: var(--muted); margin-bottom: 22px; }
.crow { display: flex; gap: 14px; margin-bottom: 14px; align-items: flex-start; }
.crow .ic {
  flex: 0 0 44px; height: 44px; border-radius: 12px; background: var(--crane-soft);
  border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--crane);
}
.crow .ic svg { width: 22px; height: 22px; }
.crow b { display: block; font-size: 0.98rem; }
.crow span, .crow a { color: var(--muted); font-size: 0.9rem; direction: ltr; display: inline-block; }
.cform {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
}
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 0.86rem; color: var(--muted); margin-bottom: 6px; font-weight: 500; }
.field input, .field textarea {
  width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; color: var(--text); font-family: var(--font);
  font-size: 0.94rem; transition: border-color 0.2s, background 0.2s;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--crane); background: rgba(245,166,35,0.04);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field.error input, .field.error textarea { border-color: #e05a45; background: rgba(224,90,69,0.06); }
.field .err { display: none; color: #e88a7a; font-size: 0.8rem; margin-top: 5px; }
.field.error .err { display: block; }
.form-note { font-size: 0.82rem; color: var(--muted-2); margin-top: 8px; text-align: center; }

.fb-card, .gbp-card {
  display: flex; gap: 14px; align-items: flex-start; margin: 14px 0 18px;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
}
.fb-card {
  background: linear-gradient(160deg, rgba(24,119,242,0.08), var(--surface));
  border-color: rgba(24,119,242,0.28);
}
.fb-card .fb-icon {
  flex: 0 0 44px; height: 44px; border-radius: 12px; background: rgba(24,119,242,0.12);
  display: grid; place-items: center;
}
.gbp-card .gbp-icon { font-size: 1.6rem; line-height: 1; }
.fb-card b, .gbp-card b { display: block; font-size: 1rem; margin-bottom: 4px; }
.fb-card p, .gbp-card p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.btn-fb {
  display: inline-flex; align-items: center; gap: 8px; background: #1877F2; color: #fff !important;
  font-weight: 700; border-radius: var(--radius-sm); border: 0;
  transition: transform 0.25s, box-shadow 0.25s; padding: 11px 18px;
}
.btn-fb:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(24,119,242,0.55); }

.cta-band {
  background: linear-gradient(135deg, var(--crane), var(--crane-2));
  border-radius: 26px; padding: 50px 36px; text-align: center;
  box-shadow: var(--shadow-crane); animation: ctapulse 3.5s ease-in-out infinite;
}
@keyframes ctapulse {
  0%, 100% { box-shadow: var(--shadow-crane); }
  50% { box-shadow: 0 22px 56px -12px rgba(245,166,35,0.65); }
}
.cta-band h2 {
  font-family: var(--display); font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: #1a1206; line-height: 1.1;
}
.cta-band p { color: #3a2a08; margin: 12px 0 24px; font-size: 1.02rem; font-weight: 500; }
.cta-band .btn-primary { background: #1a1206; color: var(--crane); }
.cta-band .btn-primary:hover { background: #000; }
.cta-band .btn-ghost {
  background: rgba(26,18,6,0.16); border: 1px solid #1a1206; color: #1a1206;
}
.cta-band .btn-ghost:hover { background: #1a1206; color: var(--crane); }
.cta-band .btn { margin: 4px; }

.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 30px; }
.proof-card {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  text-align: center; transition: transform 0.3s, border-color 0.3s;
}
.proof-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.proof-card .pc-ic { font-size: 1.9rem; margin-bottom: 8px; }
.proof-card h4 { font-size: 1rem; margin-bottom: 4px; }
.proof-card p { color: var(--muted); font-size: 0.88rem; }

.vids-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.vid-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); aspect-ratio: 16/10;
  cursor: pointer; transition: transform 0.3s, border-color 0.3s;
}
.vid-card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.vid-card video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.vid-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 2rem; color: #fff; background: rgba(0,0,0,0.25); pointer-events: none;
  transition: opacity 0.3s;
}
.vid-card:hover .vid-play, .vid-card.playing .vid-play { opacity: 0; }
.vid-meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.75)); color: #fff;
}
.vid-meta b { display: block; font-size: 0.95rem; }
.vid-meta span { font-size: 0.8rem; opacity: 0.85; }

footer { background: #04070e; border-top: 1px solid var(--line); padding: 60px 0 26px; }
.fgrid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 36px; }
.foot h4 { font-family: var(--display); font-size: 1.02rem; margin-bottom: 14px; color: var(--text); letter-spacing: 0.4px; }
.foot p { color: var(--muted); font-size: 0.9rem; margin: 12px 0; }
.foot ul { display: grid; gap: 9px; }
.foot a { color: var(--muted); font-size: 0.9rem; transition: color 0.2s; }
.foot a:hover { color: var(--crane); }
.socials { display: flex; gap: 10px; margin-top: 14px; }
.socials a {
  width: 40px; height: 40px; border-radius: 10px; background: var(--crane-soft);
  border: 1px solid var(--line-strong); display: grid; place-items: center;
  color: var(--crane); transition: all 0.2s;
}
.socials a:hover { background: var(--crane); color: #1a1206; transform: translateY(-3px); }
.socials a[aria-label="Facebook"] { border-color: rgba(24,119,242,0.4); color: #1877F2; }
.socials a[aria-label="Facebook"]:hover { background: #1877F2; color: #fff; }
.socials svg { width: 18px; height: 18px; }
.foot-bottom {
  border-top: 1px solid var(--line); margin-top: 36px; padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  color: var(--muted-2); font-size: 0.84rem;
}
.foot-bottom .areas { display: flex; gap: 8px; flex-wrap: wrap; }
.foot-bottom .chip {
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 999px; font-size: 0.74rem;
}

.whatsapp-float {
  position: fixed; bottom: 96px; right: 22px; z-index: 120;
  width: 58px; height: 58px; border-radius: 50%; background: #25d366;
  box-shadow: 0 10px 28px rgba(37,211,102,0.42); display: grid; place-items: center;
  color: #fff; cursor: pointer; border: 0; transition: transform 0.3s, box-shadow 0.3s;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 14px 34px rgba(37,211,102,0.55); }
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-popup {
  position: fixed; bottom: 166px; right: 22px; z-index: 119; width: 300px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-strong); border-radius: 18px; padding: 18px;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden;
  transform: translateY(14px); transition: all 0.35s ease;
}
.whatsapp-popup.active { opacity: 1; visibility: visible; transform: translateY(0); }
.whatsapp-popup h4 { font-size: 1.02rem; margin-bottom: 4px; }
.whatsapp-popup p { color: var(--muted); font-size: 0.84rem; margin-bottom: 12px; }
.wp-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #25d366; color: #06210f; font-weight: 700; padding: 11px 16px;
  border-radius: 12px; font-size: 0.9rem; transition: transform 0.2s;
}
.wp-btn:hover { transform: translateY(-2px); }
.wp-btn svg { width: 18px; height: 18px; }

#toTop {
  position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px;
  border-radius: 50%; background: var(--crane); color: #1a1206;
  display: grid; place-items: center; box-shadow: 0 12px 28px -10px rgba(245,166,35,0.65);
  opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s;
  z-index: 90; transform: translateY(10px); border: 0; cursor: pointer;
}
#toTop.show { opacity: 1; pointer-events: auto; transform: none; }
#toTop svg { width: 22px; height: 22px; }

.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none; gap: 10px;
  padding: 12px 16px; background: rgba(5,8,15,0.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.mcta .btn { flex: 1; justify-content: center; padding: 13px 14px; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; }
.reveal.in { opacity: 1; transform: none; }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 300;
  background: var(--crane); color: #1a1206; padding: 10px 16px;
  border-radius: 10px; font-weight: 700; font-size: 0.9rem; transition: top 0.25s;
}
.skip-link:focus { top: 16px; outline: 2px solid #fff; outline-offset: 2px; }

.pwa-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 14px 18px; box-shadow: var(--shadow); z-index: 150;
  display: none; align-items: center; gap: 12px; max-width: 92vw;
  opacity: 0; transition: opacity 0.35s, transform 0.35s;
}
.pwa-toast.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.pwa-toast button {
  border: 0; cursor: pointer; font-family: var(--font); font-weight: 700;
  padding: 8px 14px; border-radius: 10px;
}
.pwa-toast .pwa-yes { background: var(--crane); color: #1a1206; }
.pwa-toast .pwa-no { background: transparent; color: var(--muted); border: 1px solid var(--line) !important; }

::selection { background: var(--crane); color: #1a1206; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--crane); outline-offset: 3px; border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 1100px) {
  .nav-links > a { padding: 8px 11px; font-size: 0.84rem; }
  .nav-cta .nav-wa { display: none; }
}
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr !important; gap: 28px !important; }
  .hero { min-height: auto; padding-top: 88px; padding-bottom: 48px; align-items: flex-start; }
  .hero-card { max-width: 100%; }
  .why, .drivers, .contact { grid-template-columns: 1fr; gap: 28px; }
  .cards, .tgrid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
.fgrid { grid-template-columns: 1fr 1fr; }
  .stats .grid4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps .pstep:not(:last-child)::after { display: none; }
  .proof-grid, .vids-grid { grid-template-columns: repeat(2, 1fr); }
  .guides-grid, .area-cols { grid-template-columns: 1fr; }
  .section { padding: 68px 0; }
  .nav-links {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); height: 100vh; height: 100dvh;
    border-radius: 0; border: 0; border-left: 1px solid var(--line-strong);
    background: #0a101c !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 18px 16px 28px;
    transform: translateX(105%); transition: transform 0.35s ease; z-index: 140;
    overflow-y: auto; box-shadow: -20px 0 50px rgba(0,0,0,0.4);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links > a, .nav-drop-btn { padding: 14px; border-radius: 12px; font-size: 1rem; }
  .nav-links > a.active { background: var(--crane-soft); color: var(--crane); box-shadow: none; }
  .nav-drop { width: 100%; }
  .nav-drop-btn { width: 100%; justify-content: space-between; }
  .nav-drop-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; box-shadow: none; border: 1px solid var(--line); margin-top: 4px; background: var(--bg-2);
  }
  .nav-drop.open .nav-drop-menu { display: grid; }
  .nav-mobile-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
    font-weight: 700; font-size: 1.05rem;
  }
  .nav-close {
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line-strong);
    background: var(--crane-soft); color: var(--crane); font-size: 1.1rem; cursor: pointer;
  }
  .nav-mobile-cta {
    display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  }
  .nav-mobile-cta .btn { justify-content: center; width: 100%; }
  .hamburger { display: grid; }
  .nav-cta .nav-call { display: none; }
  :root[data-theme="light"] .nav-links { background: rgba(242,245,250,0.98); }
}
@media (max-width: 680px) {
  .nav { height: 68px; }
  .brand .sub { display: none; }
  .cards, .tgrid, .pricing-grid, .proof-grid, .vids-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; width: 100%; }
  .fgrid { grid-template-columns: 1fr; }
  .mcta { display: flex; }
  .hero { padding-bottom: 90px; }
  footer { padding-bottom: 90px; }
  .whatsapp-float { bottom: 88px; right: 16px; width: 54px; height: 54px; }
  .whatsapp-popup { right: 16px; width: 280px; bottom: 156px; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.6rem) !important; }
  .mini-stats { grid-template-columns: 1fr 1fr !important; }
  .emergency-strip { flex-direction: column; align-items: flex-start; }
  .offer-bar { font-size: 0.78rem; padding-right: 42px; }
}

html, body { overflow-x: hidden; max-width: 100vw; }

/* ===========================================================
   BLOG / GUIDE PAGES — Premium Reading Experience
   =========================================================== */

.blog-post {
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.85;
  color: var(--text);
  font-size: 1.04rem;
}
.blog-post h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.15;
  margin: 14px 0 10px;
  text-wrap: balance;
}
.blog-post h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  color: var(--crane);
  margin: 40px 0 14px;
  line-height: 1.25;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.blog-post h3 {
  font-size: 1.15rem;
  margin: 26px 0 10px;
  color: var(--text);
}
.blog-post p {
  margin-bottom: 16px;
  color: var(--muted);
}
.blog-post strong { color: var(--text); }
.blog-post ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}
.blog-post ul li {
  display: flex;
  gap: 10px;
  color: var(--muted);
  align-items: flex-start;
}
.blog-post ul li::before {
  content: '✔';
  color: var(--crane);
  flex: 0 0 auto;
  margin-top: 2px;
  font-weight: 700;
}
.blog-post .lead-p {
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.7;
}
.blog-post a { color: var(--crane); }
.blog-post a:hover { text-decoration: underline; }

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 16px 0 8px;
  font-size: 0.86rem;
  color: var(--muted-2);
}
.blog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--crane-soft);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 999px;
}

.blog-toc {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 28px 0 12px;
}
.blog-toc h3 {
  font-size: 1rem;
  margin: 0 0 14px;
  color: var(--crane);
  font-family: var(--display);
}
.blog-toc ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}
.blog-toc a {
  color: var(--muted);
  font-size: 0.94rem;
  transition: color 0.2s;
}
.blog-toc a:hover { color: var(--crane); }

.tip-box {
  background: linear-gradient(135deg, rgba(245,166,35,0.1), rgba(245,166,35,0.03));
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--crane);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 22px 0;
}
.tip-box strong { color: var(--crane); }
.tip-box p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.warn-box {
  background: rgba(220,80,60,0.08);
  border: 1px solid rgba(220,80,60,0.25);
  border-left: 4px solid #e05a45;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 22px 0;
}
.warn-box strong { color: #e88a7a; }
.warn-box p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.blog-table-wrap {
  overflow-x: auto;
  margin: 22px 0 28px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.blog-table th {
  background: var(--crane-soft);
  color: var(--crane);
  text-align: left;
  padding: 13px 16px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
}
.blog-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  vertical-align: top;
}
.blog-table tr:last-child td { border-bottom: 0; }
.blog-table tr:hover td { background: rgba(245,166,35,0.04); }
.blog-table strong { color: var(--text); }

.related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.related-card {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  transition: transform 0.3s, border-color 0.3s;
}
.related-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}
.related-card h4 {
  font-size: 1.02rem;
  margin-bottom: 6px;
  color: var(--text);
}
.related-card p {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}

.blog-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 28px 0;
}
.blog-card-link {
  display: block;
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  transition: transform 0.3s, border-color 0.3s;
}
.blog-card-cover {
  width: calc(100% + 44px);
  margin: -22px -22px 14px;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  background: #0d1420;
}
.blog-card-link:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  text-decoration: none;
}
.blog-card-link .tag {
  font-size: 0.72rem;
  color: var(--crane);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.blog-card-link h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--text);
}
.blog-card-link p {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--crane);
  color: #1a1206;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  margin-right: 8px;
  vertical-align: middle;
}

.blog-foot {
  background: #04070e;
  border-top: 1px solid var(--line);
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
}
.blog-foot a { color: var(--crane); }

/* Blog page specific header spacing */
.blog-hero {
  padding: 130px 0 40px;
  text-align: center;
}
.blog-hero .eyebrow { margin-bottom: 12px; }

/* Checklist style numbers */
.checklist-item {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
  transition: border-color 0.3s;
}
.checklist-item:hover { border-color: var(--line-strong); }
.checklist-item h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: var(--text);
}
.checklist-item .num {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--crane), var(--crane-2));
  color: #1a1206;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
}

/* CTA box inside blog */
.blog-cta {
  background: linear-gradient(135deg, rgba(245,166,35,0.12), rgba(245,166,35,0.04));
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  margin: 40px 0 20px;
}
.blog-cta h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  margin: 0 0 8px;
  color: var(--text);
}
.blog-cta p {
  color: var(--muted);
  margin-bottom: 18px;
}
.blog-cta .btn { margin: 4px; }

@media (max-width: 680px) {
  .related-grid,
  .blog-cards {
    grid-template-columns: 1fr;
  }
  .blog-post {
    font-size: 1rem;
  }
  .blog-toc {
    padding: 18px;
  }
}


/* === Design polish v14 === */
.section-head h2 {
  letter-spacing: -0.02em;
}
.section-head .eyebrow {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
}
.gallery {
  gap: 16px !important;
}
.gitem {
  border-radius: 18px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.gitem span {
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
}
.card, .guide-card, .pricing, .proof-card {
  border-radius: 18px !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.card:hover, .guide-card:hover, .pricing:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,0.28) !important;
}
.vid-card {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  position: relative;
  background: #000;
  aspect-ratio: 9/16;
  max-height: 420px;
}
.vid-card video, .vid-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vid-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: #fff;
  background: rgba(0,0,0,0.25);
  pointer-events: none;
  transition: opacity 0.3s;
}
.vid-card:hover .vid-play { opacity: 0; }
.vid-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #fff;
}
.vid-meta b { display: block; font-size: 0.95rem; }
.vid-meta span { font-size: 0.78rem; opacity: 0.8; }
.vids-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.ba {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--line);
}
.ba img { width: 100%; height: 100%; object-fit: cover; }
.ba span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
}
.hero-feats li {
  backdrop-filter: blur(10px);
}
.btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
.btn-primary {
  box-shadow: 0 8px 24px rgba(245, 166, 35, 0.35) !important;
}
.btn-primary:hover {
  box-shadow: 0 12px 32px rgba(245, 166, 35, 0.5) !important;
  transform: translateY(-2px);
}

/* ===========================================================
   PREMIUM UI v15 — Marketing Polish 2026
   =========================================================== */

:root {
  --radius: 22px;
  --radius-sm: 14px;
  --sp-5: 88px;
  --crane: #ffb020;
  --crane-2: #ff8a00;
  --crane-glow: rgba(255, 176, 32, 0.4);
  --shadow: 0 32px 72px -28px rgba(0, 0, 0, 0.8);
  --shadow-crane: 0 22px 52px -12px rgba(255, 176, 32, 0.5);
}

/* Header glass */
header {
  background: rgba(5, 8, 15, 0.55) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(255, 176, 32, 0.08);
  transition: background 0.35s, box-shadow 0.35s, border-color 0.35s;
}
header.scrolled {
  background: rgba(5, 8, 15, 0.88) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(255, 176, 32, 0.18);
}
.brand .mark {
  background: linear-gradient(135deg, #ffb020, #ff8a00) !important;
  box-shadow: 0 8px 24px rgba(255, 176, 32, 0.35);
}
.nav-links a {
  font-weight: 600;
  transition: color 0.2s, background 0.2s;
  border-radius: 10px;
  padding: 8px 12px !important;
}
.nav-links a:hover {
  color: var(--crane);
  background: rgba(255, 176, 32, 0.08);
}

/* Hero richer */
.hero {
  min-height: 100svh;
  padding-top: 110px;
}
.hero-bg {
  background:
    radial-gradient(1000px 560px at 85% -10%, rgba(255, 176, 32, 0.18), transparent 55%),
    radial-gradient(700px 500px at -5% 100%, rgba(30, 50, 90, 0.55), transparent 55%),
    linear-gradient(180deg, #05080f 0%, #0a101c 55%, #05080f 100%) !important;
}
.hero h1 {
  font-size: clamp(2.6rem, 5.8vw, 4.4rem) !important;
  letter-spacing: -0.02em !important;
}
.hero h1 b {
  background: linear-gradient(120deg, #ffd060, #ffb020 40%, #ff8a00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 32px rgba(255, 176, 32, 0.35));
}
.hero .lead {
  font-size: 1.18rem !important;
  line-height: 1.7;
  color: #b0c0d4 !important;
}
.notice {
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(255, 176, 32, 0.16), rgba(255, 138, 0, 0.06)) !important;
  box-shadow: 0 0 0 1px rgba(255, 176, 32, 0.2), 0 16px 40px rgba(0, 0, 0, 0.25);
}
.btn {
  border-radius: 14px !important;
  padding: 15px 26px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s !important;
}
.btn-primary {
  background: linear-gradient(135deg, #ffb020, #ff8a00) !important;
  color: #1a1000 !important;
  box-shadow: 0 12px 32px -8px rgba(255, 176, 32, 0.55) !important;
}
.btn-primary:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 48px -10px rgba(255, 176, 32, 0.7) !important;
}
.btn-ghost {
  border: 1.5px solid rgba(255, 176, 32, 0.45) !important;
  background: rgba(255, 176, 32, 0.06) !important;
}
.btn-whatsapp {
  background: linear-gradient(135deg, #2fe26d, #1ebe57) !important;
  color: #041a0c !important;
  box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.5) !important;
}
.hero-card {
  border-radius: 28px !important;
  border: 1px solid rgba(255, 176, 32, 0.15) !important;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  padding: 18px !important;
}
.hero-card img {
  height: 260px !important;
  border-radius: 18px !important;
}
.mini-stat {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 176, 32, 0.12) !important;
  padding: 12px 8px !important;
  text-align: center;
}
.mini-stat b {
  display: block;
  color: var(--crane);
  font-size: 1.05rem;
  font-weight: 800;
}
.hero-feats li {
  background: rgba(15, 23, 38, 0.75) !important;
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 176, 32, 0.14) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Section heads */
.section {
  padding: 92px 0 !important;
}
.section-head {
  margin-bottom: 52px !important;
}
.section-head h2 {
  font-size: clamp(2.05rem, 4.4vw, 3.25rem) !important;
  letter-spacing: -0.025em !important;
}
.section-head h2 b {
  background: linear-gradient(120deg, #ffd060, #ffb020);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  background: rgba(255, 176, 32, 0.1) !important;
  border-color: rgba(255, 176, 32, 0.28) !important;
  letter-spacing: 0.12em !important;
  font-size: 0.74rem !important;
}

/* Service cards */
.cards {
  gap: 24px !important;
}
.card {
  background: linear-gradient(165deg, rgba(18, 26, 42, 0.95), rgba(10, 16, 28, 0.98)) !important;
  border: 1px solid rgba(255, 176, 32, 0.12) !important;
  border-radius: 22px !important;
  padding: 28px 24px !important;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.card:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(255, 176, 32, 0.4) !important;
  box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.7), 0 0 40px rgba(255, 176, 32, 0.12) !important;
}
.card .ic {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(255, 176, 32, 0.2), rgba(255, 138, 0, 0.08)) !important;
  border: 1px solid rgba(255, 176, 32, 0.25);
  color: var(--crane);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

/* Gallery premium */
.gallery {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
.gitem {
  border-radius: 18px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 176, 32, 0.1) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  aspect-ratio: 4/3;
  position: relative;
}
.gitem::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75));
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.3s;
}
.gitem:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 176, 32, 0.35);
  z-index: 2;
}
.gitem:hover img {
  transform: scale(1.1) !important;
}
.gitem span {
  z-index: 2;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  padding: 14px 16px !important;
  transform: none !important;
}

/* Pricing */
.pricing {
  border-radius: 22px !important;
  border: 1px solid rgba(255, 176, 32, 0.12) !important;
  background: linear-gradient(170deg, #121a2a, #0a101c) !important;
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s !important;
}
.pricing:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 176, 32, 0.35) !important;
}
.pricing.featured {
  border-color: rgba(255, 176, 32, 0.55) !important;
  box-shadow: 0 24px 60px -20px rgba(255, 176, 32, 0.35), 0 0 0 1px rgba(255, 176, 32, 0.2) !important;
  background: linear-gradient(170deg, #1a2438, #0e1524) !important;
  transform: scale(1.03);
}
.pricing .badge-pop {
  background: linear-gradient(135deg, #ffb020, #ff8a00) !important;
  color: #1a1000 !important;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Stats */
.stats {
  background: linear-gradient(180deg, transparent, rgba(255, 176, 32, 0.04), transparent);
  padding: 48px 0 !important;
}
.stats .grid4 > div {
  background: rgba(15, 23, 38, 0.6);
  border: 1px solid rgba(255, 176, 32, 0.12);
  border-radius: 18px;
  padding: 28px 16px;
  transition: border-color 0.3s, transform 0.3s;
}
.stats .grid4 > div:hover {
  border-color: rgba(255, 176, 32, 0.35);
  transform: translateY(-4px);
}
.stats b, .stats .num {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  background: linear-gradient(120deg, #ffd060, #ffb020);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* CTA band */
.cta-band {
  margin: 20px 0;
  padding: 48px 32px;
  border-radius: 24px;
  background:
    radial-gradient(600px 200px at 20% 50%, rgba(255, 176, 32, 0.2), transparent),
    linear-gradient(135deg, #1a1420, #0f1524 50%, #12100a);
  border: 1px solid rgba(255, 176, 32, 0.25);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.cta-band h3 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.cta-band p {
  color: var(--muted);
  margin-bottom: 22px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.cta-band .cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* Guide cards */
.guide-card {
  background: linear-gradient(165deg, #121a2a, #0a101c) !important;
  border: 1px solid rgba(255, 176, 32, 0.1) !important;
  border-radius: 18px !important;
  padding: 22px !important;
}
.guide-card:hover {
  border-color: rgba(255, 176, 32, 0.4) !important;
  transform: translateY(-8px) !important;
}
.guide-card .gc-num {
  color: var(--crane);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  opacity: 0.7;
}

/* Floating WhatsApp */
.float-wa {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2fe26d, #1aae4f);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.45);
  transition: transform 0.25s, box-shadow 0.25s;
  font-size: 1.6rem;
}
.float-wa:hover {
  transform: scale(1.1);
  box-shadow: 0 16px 40px rgba(37, 211, 102, 0.6);
}
.float-wa svg {
  width: 28px;
  height: 28px;
}

/* Mobile bottom bar */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(5, 8, 15, 0.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 176, 32, 0.15);
  gap: 10px;
}
.mobile-cta-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.95rem;
}
.mobile-cta-bar .m-call {
  background: linear-gradient(135deg, #ffb020, #ff8a00);
  color: #1a1000;
}
.mobile-cta-bar .m-wa {
  background: linear-gradient(135deg, #2fe26d, #1aae4f);
  color: #041a0c;
}

/* Lightbox */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.lb-overlay.show {
  display: flex;
}
.lb-overlay img {
  max-width: min(96vw, 1100px);
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}
.lb-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}

/* Trust marquee polish */
.trust-marquee {
  border-top: 1px solid rgba(255, 176, 32, 0.1);
  border-bottom: 1px solid rgba(255, 176, 32, 0.1);
  background: rgba(255, 176, 32, 0.03);
  padding: 14px 0;
}
.trust-track span {
  font-weight: 600;
  color: var(--muted);
}
.trust-track svg {
  color: var(--crane);
  width: 16px;
  height: 16px;
}

/* Footer */
footer {
  background: #060a12 !important;
  border-top: 1px solid rgba(255, 176, 32, 0.1);
  padding-top: 56px !important;
}

/* Reveal animation smoother */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Responsive */
@media (max-width: 900px) {
  .gallery { grid-template-columns: 1fr 1fr !important; }
  .pricing.featured { transform: none; }
  .cards { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .section { padding: 64px 0 !important; }
  .hero { min-height: auto; padding-bottom: 48px; }
  .hero-card img { height: 200px !important; }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 76px; }
  .float-wa { bottom: 86px; right: 14px; width: 52px; height: 52px; }
  .gallery { gap: 10px !important; }
  .gitem { border-radius: 12px !important; }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr !important; }
  .hero h1 { font-size: 2.15rem !important; }
}

.whatsapp-float {
  background: linear-gradient(135deg, #2fe26d, #1aae4f) !important;
  box-shadow: 0 14px 36px rgba(37, 211, 102, 0.5) !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer;
}
.whatsapp-float:hover {
  transform: scale(1.12) !important;
}
#toTop {
  background: rgba(255, 176, 32, 0.15) !important;
  border: 1px solid rgba(255, 176, 32, 0.35) !important;
  color: var(--crane) !important;
}
#toTop:hover {
  background: rgba(255, 176, 32, 0.3) !important;
}

/* ============================================================
   FENI CRANE — ULTIMATE VISUAL v16
   Full-app beauty upgrade
   ============================================================ */
700;800&family=Noto+Sans+Bengali:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #03060c;
  --bg-2: #070d18;
  --surface: #0c1422;
  --surface-2: #121c30;
  --line: rgba(255, 176, 32, 0.1);
  --line-strong: rgba(255, 176, 32, 0.35);
  --crane: #ffb020;
  --crane-2: #ff7a00;
  --crane-glow: rgba(255, 176, 32, 0.45);
  --crane-soft: rgba(255, 176, 32, 0.09);
  --text: #f0f4fa;
  --muted: #8fa3bc;
  --muted-2: #5e728a;
  --radius: 24px;
  --radius-sm: 14px;
  --shadow: 0 40px 80px -30px rgba(0,0,0,0.85);
  --maxw: 1140px;
  --font: 'Noto Sans Bengali', system-ui, sans-serif;
  --display: 'Saira Condensed', 'Noto Sans Bengali', system-ui, sans-serif;
  --sp-5: 100px;
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,176,32,0.06), transparent 50%),
    radial-gradient(900px 500px at 100% 30%, rgba(40,80,160,0.08), transparent 50%);
  background-attachment: fixed;
}

/* ---- Offer bar refined ---- */
.offer-bar {
  background: linear-gradient(90deg, #ffb020, #ff8a00, #ffb020) !important;
  background-size: 200% 100%;
  animation: offerShine 6s linear infinite;
  font-weight: 700;
}
@keyframes offerShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ---- Header glass pro ---- */
header {
  background: rgba(3, 6, 12, 0.65) !important;
  backdrop-filter: blur(20px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(255,176,32,0.08) !important;
}
header.scrolled {
  background: rgba(3, 6, 12, 0.92) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}
.brand .mark {
  background: linear-gradient(145deg, #ffd060, #ffb020, #ff7a00) !important;
  box-shadow: 0 6px 20px rgba(255,176,32,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  border-radius: 14px !important;
}
.brand .txt {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 1.15rem;
}
.brand .txt span { color: var(--crane); }
.brand .sub {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.7;
  font-family: var(--font);
}

/* ---- Hero cinematic ---- */
.hero {
  min-height: 100svh;
  padding-top: 120px !important;
  padding-bottom: 60px;
}
.hero-video {
  opacity: 0.28 !important;
  filter: saturate(1.1) contrast(1.05);
}
.hero-bg {
  background:
    radial-gradient(ellipse 80% 50% at 70% 0%, rgba(255,176,32,0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(30,60,120,0.35), transparent 50%),
    linear-gradient(180deg, #03060c 0%, #070d18 50%, #03060c 100%) !important;
}
.hero-grid {
  opacity: 0.5;
  background-size: 56px 56px !important;
}
.badge {
  background: rgba(255,176,32,0.1) !important;
  border: 1px solid rgba(255,176,32,0.3) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(255,176,32,0.1);
  font-size: 0.82rem !important;
  padding: 10px 18px !important;
}
.dot {
  animation: pulse 2.2s ease-in-out infinite !important;
}
.hero h1 {
  font-size: clamp(2.7rem, 6.2vw, 4.6rem) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  margin: 18px 0 20px !important;
  text-shadow: 0 4px 40px rgba(0,0,0,0.4);
}
.hero h1 b {
  background: linear-gradient(115deg, #ffe08a 0%, #ffb020 35%, #ff7a00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 0 40px rgba(255,176,32,0.4));
}
.hero .lead {
  font-size: 1.12rem !important;
  line-height: 1.75 !important;
  color: #a8bad0 !important;
  max-width: 540px;
}
.notice {
  background: linear-gradient(135deg, rgba(255,176,32,0.14), rgba(255,120,0,0.05)) !important;
  border: 1px solid rgba(255,176,32,0.28) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
}
.notice .ic {
  background: linear-gradient(135deg, #ffb020, #ff7a00) !important;
  box-shadow: 0 6px 16px rgba(255,176,32,0.35);
}
.btn {
  border-radius: 16px !important;
  padding: 16px 28px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  font-size: 1.02rem !important;
}
.btn-primary {
  background: linear-gradient(135deg, #ffd060, #ffb020 40%, #ff7a00) !important;
  color: #1a0e00 !important;
  box-shadow:
    0 12px 36px -8px rgba(255,176,32,0.55),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  border: none !important;
}
.btn-primary:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 20px 50px -10px rgba(255,176,32,0.7) !important;
}
.btn-ghost {
  background: rgba(255,255,255,0.04) !important;
  border: 1.5px solid rgba(255,176,32,0.4) !important;
  color: var(--text) !important;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,176,32,0.12) !important;
  border-color: var(--crane) !important;
}
.btn-whatsapp {
  background: linear-gradient(135deg, #3aef7a, #1ebe57) !important;
  color: #021a0a !important;
  box-shadow: 0 12px 32px -10px rgba(37,211,102,0.5) !important;
  border: none !important;
}
.hero-card {
  background: linear-gradient(165deg, rgba(18,28,48,0.9), rgba(8,14,26,0.95)) !important;
  border: 1px solid rgba(255,176,32,0.18) !important;
  border-radius: 28px !important;
  padding: 16px !important;
  box-shadow:
    0 40px 80px -24px rgba(0,0,0,0.8),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 60px rgba(255,176,32,0.08) !important;
  backdrop-filter: blur(16px);
}
.hero-card img {
  height: 280px !important;
  border-radius: 20px !important;
  object-fit: cover;
}
.mini-stats {
  gap: 10px !important;
  margin-top: 14px !important;
}
.mini-stat {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,176,32,0.12) !important;
  border-radius: 16px !important;
  padding: 14px 8px !important;
}
.mini-stat b {
  background: linear-gradient(120deg, #ffd060, #ffb020);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.1rem !important;
  font-weight: 800;
}
.hero-feats li {
  background: rgba(12,20,34,0.8) !important;
  border: 1px solid rgba(255,176,32,0.14) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  font-weight: 600;
  font-size: 0.88rem !important;
}

/* ---- Trust marquee ---- */
.trust-marquee {
  background: linear-gradient(90deg, transparent, rgba(255,176,32,0.05), transparent) !important;
  border-color: rgba(255,176,32,0.1) !important;
  padding: 16px 0 !important;
}
.trust-track span {
  font-weight: 600;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  padding: 0 28px;
}

/* ---- Stats glass ---- */
.stats {
  padding: 56px 0 !important;
}
.stats .grid4 {
  gap: 16px !important;
}
.stats .grid4 > div {
  background: linear-gradient(165deg, rgba(16,24,40,0.9), rgba(8,12,22,0.95)) !important;
  border: 1px solid rgba(255,176,32,0.12) !important;
  border-radius: 22px !important;
  padding: 32px 16px !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.stats .grid4 > div:hover {
  transform: translateY(-6px);
  border-color: rgba(255,176,32,0.4) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,0.4), 0 0 30px rgba(255,176,32,0.1);
}
.stats .grid4 b,
.stats .grid4 [data-count],
.stats .num {
  font-family: var(--display) !important;
  font-size: clamp(2.2rem, 4.5vw, 3rem) !important;
  font-weight: 800 !important;
  background: linear-gradient(120deg, #ffe08a, #ffb020, #ff7a00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ---- Section heads ---- */
.section {
  padding: 100px 0 !important;
  position: relative;
}
.section-head {
  margin-bottom: 56px !important;
}
.section-head h2 {
  font-size: clamp(2.15rem, 4.5vw, 3.4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
}
.section-head h2 b {
  background: linear-gradient(120deg, #ffe08a, #ffb020) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.section-head p {
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: 14px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.eyebrow {
  background: rgba(255,176,32,0.1) !important;
  border: 1px solid rgba(255,176,32,0.25) !important;
  letter-spacing: 0.14em !important;
  font-size: 0.72rem !important;
  padding: 8px 18px !important;
  margin-bottom: 20px !important;
}

/* ---- Process steps ---- */
.process-steps {
  gap: 20px !important;
}
.process-steps > div,
.step-card {
  background: linear-gradient(165deg, rgba(14,22,38,0.95), rgba(8,12,22,0.98)) !important;
  border: 1px solid rgba(255,176,32,0.12) !important;
  border-radius: 22px !important;
  padding: 28px 22px !important;
  position: relative;
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s;
  overflow: hidden;
}
.process-steps > div:hover,
.step-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255,176,32,0.35) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,0.4);
}
.process-steps .num,
.step-card .num {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(120deg, rgba(255,176,32,0.35), rgba(255,176,32,0.08));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-bottom: 12px;
  display: block;
}

/* ---- Service cards ---- */
.cards {
  gap: 22px !important;
}
.card {
  background: linear-gradient(170deg, rgba(14,22,38,0.98), rgba(6,10,18,0.99)) !important;
  border: 1px solid rgba(255,176,32,0.1) !important;
  border-radius: 24px !important;
  padding: 30px 26px !important;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s, border-color 0.4s !important;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--crane), transparent);
  opacity: 0;
  transition: opacity 0.35s;
}
.card:hover {
  transform: translateY(-12px) !important;
  border-color: rgba(255,176,32,0.4) !important;
  box-shadow: 0 32px 64px -16px rgba(0,0,0,0.65), 0 0 40px rgba(255,176,32,0.12) !important;
}
.card:hover::before { opacity: 1; }
.card .ic {
  width: 60px !important;
  height: 60px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255,176,32,0.22), rgba(255,120,0,0.08)) !important;
  border: 1px solid rgba(255,176,32,0.25) !important;
  box-shadow: 0 8px 24px rgba(255,176,32,0.15);
  margin-bottom: 20px !important;
}
.card h3 {
  font-size: 1.22rem !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
}
.card p { color: var(--muted) !important; line-height: 1.65; }
.card ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  padding: 4px 0;
}
.card ul li svg {
  color: var(--crane);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- Gallery cinematic ---- */
.gallery {
  gap: 14px !important;
}
.gitem {
  border-radius: 20px !important;
  border: 1px solid rgba(255,176,32,0.1) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35) !important;
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s !important;
}
.gitem:hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow: 0 28px 56px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,176,32,0.35) !important;
  z-index: 3;
}
.gitem span {
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  background: linear-gradient(transparent, rgba(0,0,0,0.85)) !important;
  padding: 40px 16px 16px !important;
}

/* ---- Pricing ---- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.pricing {
  background: linear-gradient(170deg, #101828, #080e18) !important;
  border: 1px solid rgba(255,176,32,0.12) !important;
  border-radius: 24px !important;
  padding: 32px 26px !important;
  position: relative;
  transition: transform 0.4s, box-shadow 0.4s, border-color 0.4s !important;
}
.pricing:hover {
  transform: translateY(-10px);
  border-color: rgba(255,176,32,0.35) !important;
}
.pricing.popular,
.pricing.featured {
  border-color: rgba(255,176,32,0.5) !important;
  background: linear-gradient(170deg, #1a2438, #0c1424) !important;
  box-shadow: 0 28px 60px -16px rgba(255,176,32,0.3), 0 0 0 1px rgba(255,176,32,0.2) !important;
  transform: scale(1.04);
  z-index: 2;
}
.pricing.popular:hover,
.pricing.featured:hover {
  transform: scale(1.04) translateY(-8px);
}
.pricing .badge-pop,
.pricing .pop-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd060, #ff7a00) !important;
  color: #1a0e00 !important;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 6px 16px;
  border-radius: 99px;
  white-space: nowrap;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 20px rgba(255,176,32,0.4);
}
.pricing-note {
  background: rgba(255,176,32,0.08);
  border: 1px solid rgba(255,176,32,0.2);
  border-radius: 16px;
  padding: 16px 22px;
  margin-bottom: 28px;
  text-align: center;
  color: var(--muted);
}

/* ---- Reviews ---- */
.reviews-grid,
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.review-card,
.r-card {
  background: linear-gradient(165deg, #101828, #0a101c);
  border: 1px solid rgba(255,176,32,0.1);
  border-radius: 20px;
  padding: 24px;
  transition: transform 0.3s, border-color 0.3s;
}
.review-card:hover,
.r-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,176,32,0.3);
}
.review-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted, #aab);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 3px 10px;
}
.review-src b { color: #ffb020; }

/* ---- Why / Drivers ---- */
.why {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.why-item,
.why > div {
  background: linear-gradient(165deg, #101828, #0a101c);
  border: 1px solid rgba(255,176,32,0.1);
  border-radius: 20px;
  padding: 26px 22px;
  transition: transform 0.3s, border-color 0.3s;
}
.why-item:hover,
.why > div:hover {
  transform: translateY(-6px);
  border-color: rgba(255,176,32,0.3);
}

/* ---- CTA band premium ---- */
.cta-band {
  background:
    radial-gradient(ellipse 80% 80% at 20% 50%, rgba(255,176,32,0.25), transparent 50%),
    radial-gradient(ellipse 60% 60% at 90% 50%, rgba(255,120,0,0.12), transparent 45%),
    linear-gradient(135deg, #1a1520 0%, #0e1424 50%, #16120a 100%) !important;
  border: 1px solid rgba(255,176,32,0.3) !important;
  border-radius: 28px !important;
  padding: 56px 36px !important;
  box-shadow: 0 32px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.cta-band h3,
.cta-band h2 {
  font-family: var(--display) !important;
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 12px !important;
}

/* ---- Guide cards ---- */
.guides-grid {
  gap: 16px !important;
}
.guide-card {
  background: linear-gradient(165deg, #101828, #0a101c) !important;
  border: 1px solid rgba(255,176,32,0.1) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
  transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s !important;
}
.guide-card:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(255,176,32,0.4) !important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.4) !important;
}
.guide-card .gc-num {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(120deg, #ffb020, #ff7a00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Videos ---- */
.vids-grid {
  gap: 14px !important;
}
.vid-card {
  border-radius: 20px !important;
  border: 1px solid rgba(255,176,32,0.12) !important;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  transition: transform 0.35s, box-shadow 0.35s;
}
.vid-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.45);
}

/* ---- Contact form ---- */
.field input,
.field textarea,
.field select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,176,32,0.15) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  color: var(--text) !important;
  font-size: 1rem !important;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field input:focus,
.field textarea:focus {
  outline: none !important;
  border-color: rgba(255,176,32,0.5) !important;
  box-shadow: 0 0 0 3px rgba(255,176,32,0.12) !important;
}

/* ---- Footer ---- */
footer {
  background: linear-gradient(180deg, #05080f, #020408) !important;
  border-top: 1px solid rgba(255,176,32,0.1) !important;
  padding: 64px 0 32px !important;
}
.fgrid {
  gap: 32px !important;
}
.foot h4 {
  color: var(--crane);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.foot a:hover { color: var(--crane); }

/* ---- Float buttons ---- */
.whatsapp-float {
  background: linear-gradient(145deg, #3aef7a, #1aae4f) !important;
  box-shadow: 0 12px 36px rgba(37,211,102,0.5), 0 0 0 4px rgba(37,211,102,0.15) !important;
  width: 62px !important;
  height: 62px !important;
  animation: waPulse 2.5s ease-in-out infinite;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 12px 36px rgba(37,211,102,0.5), 0 0 0 4px rgba(37,211,102,0.15); }
  50% { box-shadow: 0 12px 36px rgba(37,211,102,0.6), 0 0 0 10px rgba(37,211,102,0.08); }
}
.mobile-cta-bar {
  background: rgba(3,6,12,0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255,176,32,0.18) !important;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) !important;
  gap: 10px !important;
}
.mobile-cta-bar a {
  border-radius: 16px !important;
  padding: 15px 12px !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.mobile-cta-bar .m-call {
  background: linear-gradient(135deg, #ffd060, #ff7a00) !important;
  color: #1a0e00 !important;
}
.mobile-cta-bar .m-wa {
  background: linear-gradient(135deg, #3aef7a, #1aae4f) !important;
  color: #021a0a !important;
}

/* ---- Scroll progress ---- */
.scroll-progress {
  height: 3px !important;
  background: linear-gradient(90deg, #ffd060, #ffb020, #ff7a00) !important;
  box-shadow: 0 0 12px rgba(255,176,32,0.5);
}

/* ---- Divider ---- */
.divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,176,32,0.2), transparent);
  margin: 0;
}

/* ---- Blog pages share ---- */
.blog-hero,
.blog-page-head {
  background: linear-gradient(180deg, rgba(255,176,32,0.08), transparent);
  padding: 120px 0 48px;
}
.blog-cards .blog-card-link,
.blog-card {
  background: linear-gradient(165deg, #101828, #0a101c);
  border: 1px solid rgba(255,176,32,0.1);
  border-radius: 18px;
  transition: transform 0.3s, border-color 0.3s;
}
.blog-cards .blog-card-link:hover,
.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,176,32,0.35);
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
.pricing-grid { grid-template-columns: 1fr; }
  .pricing.popular, .pricing.featured { transform: none; }
  .why { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .section { padding: 68px 0 !important; }
  .hero { min-height: auto; padding-top: 100px !important; }
  .hero h1 { font-size: 2.25rem !important; }
  .hero-card img { height: 200px !important; }
  .cards { grid-template-columns: 1fr !important; }
  .gallery { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .gitem { border-radius: 14px !important; }
  .stats .grid4 { grid-template-columns: 1fr 1fr !important; }
  body { padding-bottom: 80px; }
  .whatsapp-float { bottom: 90px !important; }
  .cta-band { padding: 36px 20px !important; border-radius: 20px !important; }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr !important; }
.fitem .ton { font-size: 1.8rem; }
}

/* ===== Final menu blur fix — retained for compatibility ===== */
.nav-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(0, 0, 0, 0.6) !important;
}
@media (max-width: 980px) {
  .nav-links {
    background: #0a101c !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
header,
.nav-links,
.nav-backdrop {
  filter: none !important;
}


/* =========================================================
   Premium rental platform layer
   ========================================================= */
:root{--gold:#ffb020;--gold2:#ff7a00;--ink:#050a12;--panel:#0d1624}
html{scroll-behavior:smooth}
body{background:radial-gradient(circle at 80% 10%,rgba(255,176,32,.035),transparent 28%),var(--bg)}
.btn-book{background:linear-gradient(135deg,#ffd45b,#ff9d18);color:#170e03;box-shadow:0 12px 34px rgba(255,176,32,.22);position:relative;overflow:hidden}
.btn-book:after{content:"";position:absolute;inset:-100% 55% auto -20%;height:260%;background:rgba(255,255,255,.22);transform:rotate(22deg);transition:transform .5s}
.btn-book:hover:after{transform:translateX(180%) rotate(22deg)}
.hero-card{position:relative;overflow:visible!important}
.hero-card>picture img{border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.45)}
.hero-status-card{position:absolute;right:-18px;bottom:24px;min-width:235px;padding:15px 16px;border:1px solid rgba(255,176,32,.3);border-radius:18px;background:rgba(6,12,21,.86);backdrop-filter:blur(18px);box-shadow:0 20px 50px rgba(0,0,0,.35);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.hero-status-card>div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px}.hero-status-card b{font-size:.86rem}.hero-status-card small{grid-column:2;color:var(--muted);font-size:.72rem}.hero-status-card strong{font-family:var(--display);font-size:1.35rem;color:var(--crane)}.hero-status-card button{grid-column:1/-1;border:0;border-radius:11px;padding:10px 12px;background:rgba(255,176,32,.1);color:var(--crane);font-weight:800;cursor:pointer}.live-dot{width:9px;height:9px;border-radius:50%;background:#37e779;box-shadow:0 0 0 5px rgba(55,231,121,.1),0 0 18px rgba(55,231,121,.7)}
.quick-booking{padding:26px 0 10px;background:linear-gradient(180deg,transparent,rgba(255,176,32,.025))}
.qb-shell{border:1px solid rgba(255,176,32,.2);border-radius:26px;padding:26px;background:linear-gradient(145deg,rgba(17,29,47,.96),rgba(8,14,24,.98));box-shadow:0 25px 80px rgba(0,0,0,.24);position:relative;overflow:hidden}.qb-shell:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-130px;background:rgba(255,176,32,.08);filter:blur(8px)}
.qb-copy{position:relative;z-index:1;max-width:650px}.qb-copy h2{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.08;margin:5px 0 8px}.qb-copy h2 b{color:var(--crane)}.qb-copy p{color:var(--muted);margin:0}.qb-grid{display:grid;grid-template-columns:1fr 1fr 1.25fr auto;gap:12px;margin-top:22px;position:relative;z-index:1}.qb-grid label{display:grid;gap:7px}.qb-grid label span{font-size:.72rem;color:#aebdd0;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.qb-grid select,.qb-grid input{height:50px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:#09111d;color:var(--text);padding:0 13px;outline:none;font:inherit}.qb-grid select:focus,.qb-grid input:focus{border-color:rgba(255,176,32,.5);box-shadow:0 0 0 3px rgba(255,176,32,.08)}.qb-btn{height:50px;align-self:end;white-space:nowrap}.qb-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;color:#aebdd0;font-size:.78rem}.qb-trust span{display:inline-flex;align-items:center;gap:5px}.qb-trust span::first-letter{color:#37e779}
.booking-modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:20px}.booking-modal.open{display:flex}.booking-backdrop{position:absolute;inset:0;background:rgba(1,5,10,.78);backdrop-filter:blur(10px)}.booking-dialog{position:relative;width:min(720px,100%);max-height:min(90vh,800px);overflow:auto;background:linear-gradient(155deg,#101c2e,#070d17);border:1px solid rgba(255,176,32,.24);border-radius:26px;padding:26px;box-shadow:0 35px 100px rgba(0,0,0,.55);animation:bookingIn .25s ease-out}.booking-close{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0b1421;color:#fff;cursor:pointer}.booking-head{display:flex;gap:14px;padding-right:45px;margin-bottom:20px}.booking-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:rgba(255,176,32,.11);border:1px solid rgba(255,176,32,.25);font-size:25px;flex:0 0 auto}.booking-head h2{font-family:var(--display);font-size:1.8rem;line-height:1.05;margin:2px 0 5px}.booking-head p{color:var(--muted);font-size:.85rem}.booking-form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.booking-field{display:grid;gap:6px}.booking-field.full{grid-column:1/-1}.booking-field label{font-size:.78rem;color:#b8c6d8;font-weight:700}.booking-field input,.booking-field select,.booking-field textarea{width:100%;border:1px solid rgba(255,255,255,.1);background:#080f1a;color:#eef3fa;border-radius:12px;padding:12px 13px;font:inherit;outline:none}.booking-field input:focus,.booking-field select:focus,.booking-field textarea:focus{border-color:rgba(255,176,32,.55);box-shadow:0 0 0 3px rgba(255,176,32,.07)}.booking-submit{grid-column:1/-1;justify-content:center;margin-top:3px;width:100%}@keyframes bookingIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:980px){.hero-status-card{right:10px;bottom:15px}.qb-grid{grid-template-columns:1fr 1fr}.qb-btn{width:100%}}
@media(max-width:620px){.hero-status-card{position:relative;right:auto;bottom:auto;margin:10px 0 0;min-width:0}.hero-card{overflow:hidden!important}.hero-card>picture img{border-radius:20px}.qb-shell{padding:20px;border-radius:20px}.qb-grid{grid-template-columns:1fr}.booking-dialog{padding:20px;border-radius:20px}.booking-form{grid-template-columns:1fr}.booking-field.full{grid-column:auto}.booking-submit{grid-column:auto}.booking-head h2{font-size:1.55rem}.booking-modal{padding:10px}.quick-booking{padding-top:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

body.modal-open{overflow:hidden}

/* =========================================================
   POLISH PASS — readability, mobile-CTA cleanup, contrast
   ========================================================= */

/* Bengali display headings need more vertical room than the Latin-tuned
   1.02–1.08 line-heights used above — matras/conjuncts were clipping into
   the line above/below and making two-line headings visually overlap.
   This is the single line-height rule for every heading in the page. */
h1, h2, h3, h4,
.hero h1, .hero h1 b,
.qb-copy h2, .booking-head h2,
.section-head h2, .fc4-title {
  line-height: 1.32 !important;
}
.hero h1 { margin-bottom: 6px !important; }
.qb-copy h2 { margin: 10px 0 12px !important; }
.mini-stat b, .fitem .ton, .tcard .quote { line-height: 1.3 !important; }

/* Mobile: one bottom action bar is enough. The separate round WhatsApp
   bubble duplicated the WhatsApp button already in that bar and sat
   overlapping it, so it's hidden below the breakpoint where the bar
   takes over. It still shows normally on desktop/tablet. */
@media (max-width: 768px) {
  .whatsapp-float, .whatsapp-popup { display: none !important; }
}

/* Bottom bar buttons: guarantee comfortable line-height/padding so
   Bengali descenders never clip against the rounded corners. */
.mobile-cta-bar a {
  line-height: 1.3 !important;
  padding: 15px 10px !important;
  font-size: 0.92rem !important;
  gap: 6px !important;
}

/* "AI সহকারী" pill in the nav should not compress on smaller desktop
   widths before the mobile menu takes over. */
@media (max-width: 1080px) and (min-width: 981px) {
  .nav-links { gap: 14px !important; }
}

/* The floating Service Ready badge was positioned to sit
   over the bottom-right of the hero photo, but the two-column mini-stats
   row sits right below the photo in normal flow, so the badge ended up
   covering (and visually "cutting off") the second mini-stat card. Move
   the badge to the top-right corner of the photo instead, where nothing
   else lives, so both are fully readable. */
.hero-status-card {
  top: 16px !important;
  bottom: auto !important;
  right: -14px !important;
}
@media (max-width: 980px) {
  .hero-status-card { top: 14px !important; right: 10px !important; }
}
@media (max-width: 620px) {
  .hero-status-card { position: relative !important; top: auto !important; right: auto !important; margin: 10px 0 0 !important; }
}

/* =========================================================
   SUCCESS STORIES (case studies)
   ========================================================= */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 12px; }
.case-card {
  background: linear-gradient(160deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s, border-color .3s;
  display: flex; flex-direction: column;
}
.case-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.case-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.case-img img { width: 100%; height: 100%; object-fit: cover; }
.case-tag {
  position: absolute; left: 12px; top: 12px;
  background: rgba(6,12,21,.82); backdrop-filter: blur(8px);
  color: var(--crane); border: 1px solid rgba(255,176,32,.35);
  font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  padding: 6px 12px; border-radius: 999px;
}
.case-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.case-body h3 { font-family: var(--display); font-size: 1.18rem; line-height: 1.3; margin: 0; }
.case-body p { color: var(--muted); font-size: .89rem; line-height: 1.65; margin: 0; }
.case-body p b { color: var(--text); }
.case-result {
  margin-top: auto !important; padding-top: 12px;
  border-top: 1px dashed var(--line);
  color: #37e779 !important; font-weight: 700; font-size: .85rem !important;
}
@media (max-width: 980px) {
  .case-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .case-grid { grid-template-columns: 1fr; }
}
/* Feni Crane Service V13 — focused conversion + mobile UX */
.quote-section{margin:24px 0 0;padding:24px;border:1px solid rgba(245,166,35,.22);border-radius:24px;background:linear-gradient(145deg,rgba(245,166,35,.09),rgba(10,15,22,.82));box-shadow:0 20px 50px rgba(0,0,0,.18)}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.quote-card{padding:20px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.025)}
.quote-card h3{margin:0 0 8px;font-size:1.15rem}.quote-card p{margin:0 0 16px;color:var(--muted);line-height:1.65}
.quote-card .quote-icon{font-size:28px;margin-bottom:10px}.quote-actions{display:flex;gap:10px;flex-wrap:wrap}.quote-note{margin-top:14px;color:var(--muted);font-size:.9rem}
.service-bottom-bar{display:none}.service-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}.service-fact{padding:15px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07)}.service-fact b{display:block;color:var(--crane);margin-bottom:4px}.service-fact span{font-size:.86rem;color:var(--muted)}
@media(max-width:820px){.quote-grid{grid-template-columns:1fr}.service-facts{grid-template-columns:repeat(2,1fr)}.service-bottom-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:999;padding:10px max(12px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));gap:8px;background:rgba(5,8,15,.96);backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.1)}.service-bottom-bar a{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:14px;font-weight:800;text-decoration:none}.service-bottom-bar .call{background:var(--crane);color:#1a1206}.service-bottom-bar .wa{background:#18b76a;color:#fff}body{padding-bottom:70px}}
@media(max-width:480px){.service-facts{grid-template-columns:1fr 1fr}.quote-section{padding:18px}.quote-card{padding:16px}}

.fc5-facebook{
  margin:28px 0;padding:22px;border-radius:24px;
  background:linear-gradient(135deg,#151b21,#0b1014);
  border:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  box-shadow:0 18px 55px rgba(0,0,0,.18)
}
.fc5-facebook .fc5-left{display:flex;align-items:center;gap:14px}
.fc5-facebook .fc5-icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:#1877f2;color:#fff;font-size:27px;font-weight:950
}
.fc5-facebook h3{margin:0 0 4px;font-size:18px}
.fc5-facebook p{margin:0;color:#9da7b0;font-size:13px;line-height:1.5}
.fc5-facebook .fc5-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:13px;background:#1877f2;color:#fff;
  text-decoration:none;font-weight:900;white-space:nowrap
}
.fc5-facebook .fc5-btn:hover{filter:brightness(1.08)}
@media(max-width:600px){
 .fc5-facebook{display:block}
 .fc5-facebook .fc5-left{align-items:flex-start}
 .fc5-facebook .fc5-btn{width:100%;box-sizing:border-box;margin-top:14px}
}

/* AI Assistant nav link — highlighted pill, consistent across desktop + mobile menu */
.nav-ai-link{
  background:var(--crane-soft);border:1px solid var(--line-strong);
  border-radius:999px;padding:7px 14px !important;color:var(--crane) !important;
  font-weight:800;white-space:nowrap
}
.nav-ai-link:hover{background:var(--crane);color:#1a1206 !important}
@media(max-width:980px){
  .nav-ai-link{display:inline-block;margin:6px 0}
}


/* Feni Crane Service V13 — mobile conversion bar */


/* ================= V13 LEAD + EMERGENCY UX ================= */
.v13-lead-booster{padding:42px 0;background:linear-gradient(180deg,rgba(255,176,32,.045),transparent);border-top:1px solid rgba(255,176,32,.08);border-bottom:1px solid rgba(255,176,32,.08)}
.v13-lead-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:stretch}
.v13-lead-copy,.v13-intent-card{border:1px solid rgba(255,176,32,.14);border-radius:24px;background:rgba(12,21,35,.78);padding:28px;box-shadow:0 18px 55px rgba(0,0,0,.18)}
.v13-lead-copy h2{font-family:var(--display);font-size:clamp(2rem,4vw,3.1rem);line-height:1.05;margin:7px 0 12px}.v13-lead-copy h2 b{color:var(--crane)}
.v13-lead-copy p{color:var(--muted);max-width:760px}.v13-action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.v13-action-row .btn{min-height:48px}.v13-note{display:block;color:#7f90a8;margin-top:12px;font-size:.78rem}
.v13-card-kicker{color:var(--crane);font-size:.72rem;font-weight:800;letter-spacing:.14em}.v13-intent-card h3{font-family:var(--display);font-size:1.8rem;margin:7px 0 14px}.v13-intents{display:grid;grid-template-columns:1fr 1fr;gap:9px}.v13-intents button{border:1px solid rgba(255,255,255,.09);background:#0b1524;color:var(--text);border-radius:12px;padding:12px;text-align:left;font:inherit;font-size:.86rem;cursor:pointer;transition:.2s}.v13-intents button:hover,.v13-intents button:focus-visible{border-color:rgba(255,176,32,.45);transform:translateY(-1px);outline:none}.v13-intent-card p{font-size:.76rem;color:#7f90a8;margin-top:13px}
.v13-location-ok{border-color:rgba(36,195,111,.45)!important}.v13-toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:1200;background:#101b2e;border:1px solid rgba(255,176,32,.25);color:var(--text);padding:12px 16px;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:.25s;max-width:min(92vw,520px);text-align:center;font-size:.84rem}.v13-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:850px){.v13-lead-grid{grid-template-columns:1fr}.v13-lead-copy,.v13-intent-card{padding:22px}}
@media(max-width:560px){.v13-action-row{display:grid;grid-template-columns:1fr}.v13-action-row .btn{width:100%;justify-content:center}.v13-intents{grid-template-columns:1fr}.v13-lead-booster{padding:28px 0}.v13-lead-copy,.v13-intent-card{border-radius:20px}}


/* ================= V13 PREMIUM MARKETING SYSTEM ================= */
.v13-job-section{padding:82px 0 74px;background:radial-gradient(circle at 15% 10%,rgba(245,166,35,.10),transparent 32%),linear-gradient(180deg,var(--bg),var(--bg-2));position:relative;overflow:hidden}
.v13-section-head{text-align:center;max-width:780px;margin:0 auto 34px}.v13-section-head h2{font-family:var(--display);font-size:clamp(2.1rem,4.5vw,3.6rem);line-height:1.05;margin:8px 0 12px}.v13-section-head h2 b{color:var(--crane)}.v13-section-head p{color:var(--muted);font-size:1rem}
.v13-job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.v13-job-card{appearance:none;text-align:left;border:1px solid rgba(245,166,35,.13);background:linear-gradient(145deg,rgba(17,29,48,.94),rgba(8,16,29,.94));color:var(--text);border-radius:22px;padding:24px;min-height:205px;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.v13-job-card::after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;right:-65px;top:-65px;background:rgba(245,166,35,.07)}.v13-job-card:hover,.v13-job-card:focus-visible{transform:translateY(-5px);border-color:rgba(245,166,35,.45);box-shadow:0 22px 55px rgba(0,0,0,.28);outline:none}.v13-job-card>span{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:rgba(245,166,35,.10);font-size:1.55rem;margin-bottom:18px}.v13-job-card strong{display:block;font-family:var(--display);font-size:1.35rem}.v13-job-card small{display:block;color:var(--muted);line-height:1.55;margin-top:5px;max-width:290px}.v13-job-card em{display:block;color:var(--crane);font-style:normal;font-weight:800;margin-top:16px;font-size:.88rem}
.v13-stats{padding:22px 0;border-top:1px solid rgba(245,166,35,.08);border-bottom:1px solid rgba(245,166,35,.08);background:#08111f}.v13-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.v13-stats .stat{min-height:116px;padding:22px;border-radius:18px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06)}.v13-stats .stat b{font-family:var(--display);font-size:1.45rem;color:var(--crane)}.v13-stats .stat span{font-size:.82rem;color:var(--muted);margin-top:4px}
.v13-proof{background:linear-gradient(180deg,var(--bg-2),var(--bg))}.v13-proof-grid{grid-template-columns:repeat(4,1fr)}.v13-proof-banner{margin-top:26px;border:1px solid rgba(245,166,35,.22);border-radius:24px;padding:28px;background:linear-gradient(120deg,rgba(245,166,35,.10),rgba(10,20,34,.94));display:flex;align-items:center;justify-content:space-between;gap:24px}.v13-proof-banner h3{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.05;margin:6px 0}.v13-proof-banner p{color:var(--muted);max-width:680px}.v13-proof-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.hero .badge{box-shadow:0 10px 30px rgba(0,0,0,.2)}.hero h1{max-width:820px;letter-spacing:-.025em}.hero .lead{max-width:760px;font-size:1.06rem}.hero-card{filter:drop-shadow(0 25px 50px rgba(0,0,0,.3))}.hero-status-card{backdrop-filter:blur(14px)}
.btn-primary{box-shadow:0 12px 34px rgba(245,166,35,.20)}.btn-whatsapp{box-shadow:0 12px 28px rgba(37,211,102,.12)}
@media(max-width:980px){.v13-job-grid{grid-template-columns:repeat(2,1fr)}.v13-stats-grid{grid-template-columns:repeat(2,1fr)}.v13-proof-grid{grid-template-columns:repeat(2,1fr)}.v13-proof-banner{align-items:flex-start;flex-direction:column}.v13-proof-actions{width:100%}.v13-proof-actions .btn{flex:1;justify-content:center}}
@media(max-width:620px){.v13-job-section{padding:58px 0}.v13-job-grid,.v13-stats-grid,.v13-proof-grid{grid-template-columns:1fr}.v13-job-card{min-height:180px;padding:20px}.v13-proof-banner{padding:22px;border-radius:20px}.v13-proof-actions{display:grid;grid-template-columns:1fr}.v13-proof-actions .btn{width:100%}.v13-stats .stat{min-height:96px}.hero h1{font-size:clamp(2.45rem,13vw,3.35rem)}}
@media(prefers-reduced-motion:reduce){.v13-job-card{transition:none}.v13-job-card:hover{transform:none}}

/* ================= V13 CINEMATIC INDUSTRIAL BACKGROUNDS ================= */
.hero-bg{
  background:
    radial-gradient(900px 520px at 82% 12%,rgba(245,166,35,.20),transparent 58%),
    radial-gradient(720px 520px at 8% 88%,rgba(32,91,145,.16),transparent 62%),
    linear-gradient(90deg,rgba(3,7,14,.94) 0%,rgba(3,7,14,.64) 48%,rgba(3,7,14,.30) 100%),
    linear-gradient(180deg,rgba(3,7,14,.60),rgba(3,7,14,.88)),
    url('images/hero-crane.webp') center/cover no-repeat;
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,7,14,.20) 0%,transparent 38%,rgba(3,7,14,.76) 100%);
}
.hero-video{opacity:.36!important;filter:saturate(.92) contrast(1.08);}
.hero-inner{z-index:3;}

/* Cinematic photographic section treatments */
.v13-job-section{
  background:
    linear-gradient(90deg,rgba(4,8,15,.96),rgba(6,12,21,.84)),
    url('images/work-steel-site.webp') center/cover no-repeat;
}
.v13-lead-booster{
  background:
    linear-gradient(105deg,rgba(3,7,14,.95),rgba(8,14,24,.80)),
    url('images/work-recovery-car.webp') center/cover no-repeat;
}
#gallery{
  background:
    linear-gradient(180deg,rgba(4,8,15,.95),rgba(5,10,18,.88)),
    url('images/work-solar-crane.webp') center/cover no-repeat;
}
#why{
  background:
    linear-gradient(90deg,rgba(3,7,14,.96),rgba(5,10,18,.82)),
    url('images/crane-1.webp') center/cover no-repeat;
}
#stories{
  background:
    linear-gradient(180deg,rgba(5,9,16,.94),rgba(7,12,21,.92)),
    url('images/work-steel-column.webp') center/cover no-repeat!important;
}
.v13-proof{
  background:
    linear-gradient(120deg,rgba(5,9,16,.95),rgba(9,16,27,.88)),
    url('images/work-solar-crane.webp') center/cover no-repeat;
}

/* Subtle industrial texture without extra assets */
.v13-job-section::before,.v13-lead-booster::before,#gallery::before,#why::before,#stories::before,.v13-proof::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(245,166,35,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,166,35,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,transparent,black 22%,black 78%,transparent);
}

@media(max-width:900px){
  .v13-job-section,.v13-lead-booster,#gallery,#why,#stories,.v13-proof{background-attachment:scroll;}
}
@media(prefers-reduced-motion:reduce){
  .hero-video{display:none!important;}
}

/* V13.1 performance + trust polish */
.trust-strip{position:relative;z-index:2;background:rgba(8,12,18,.92);border-block:1px solid rgba(255,193,7,.18);backdrop-filter:blur(8px)}
.trust-strip__inner{max-width:1180px;margin:auto;padding:12px 18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.trust-strip__inner span{font-size:.86rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.04)}
@media (max-width:640px){.trust-strip__inner{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.trust-strip__inner::-webkit-scrollbar{display:none}}


/* V13.2 — Cinematic Industrial Background System */
:root{
  --crane-yellow:#f6b900;
  --cinema-black:#05080d;
  --cinema-blue:#0a111b;
}

/* Hero: real media + cinematic gradient + restrained yellow glow + technical grid */
.hero,
.hero-section,
#hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 38%, rgba(246,185,0,.16) 0%, rgba(246,185,0,.055) 20%, transparent 42%),
    linear-gradient(90deg, rgba(3,6,10,.96) 0%, rgba(3,7,12,.84) 38%, rgba(3,7,12,.46) 67%, rgba(3,7,12,.68) 100%),
    linear-gradient(180deg, rgba(2,5,9,.20) 0%, rgba(2,5,9,.08) 48%, rgba(2,5,9,.88) 100%);
}
.hero::before,
.hero-section::before,
#hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
}
.hero::after,
.hero-section::after,
#hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 82% 44%, rgba(246,185,0,.11), transparent 34%),
    linear-gradient(180deg, transparent 52%, rgba(0,0,0,.68) 100%);
}

/* Keep hero content above visual layers */
.hero > *,
.hero-section > *,
#hero > *{
  position:relative;
  z-index:2;
}

/* Strong readability zone behind hero copy */
.hero-copy,
.hero-content,
.hero-inner,
.hero-text,
#hero .hero-content{
  position:relative;
  z-index:3;
}
.hero-copy::before,
.hero-content::before,
.hero-inner::before,
.hero-text::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-28px -34px;
  border-radius:28px;
  background:linear-gradient(90deg, rgba(2,5,9,.60), rgba(2,5,9,.24), transparent);
  filter:blur(1px);
  pointer-events:none;
}

/* Cinematic section backgrounds: image remains visible, content stays readable */
.section-cinematic,
.why-section,
.emergency-section,
.work-section,
.gallery-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.section-cinematic::before,
.why-section::before,
.emergency-section::before,
.work-section::before,
.gallery-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,7,12,.91), rgba(3,7,12,.66) 48%, rgba(3,7,12,.79)),
    radial-gradient(circle at 80% 30%, rgba(246,185,0,.075), transparent 35%),
    linear-gradient(180deg, rgba(2,5,9,.12), rgba(2,5,9,.72));
}
.section-cinematic::after,
.why-section::after,
.emergency-section::after,
.work-section::after,
.gallery-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.065;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:48px 48px;
}
.section-cinematic > *,
.why-section > *,
.emergency-section > *,
.work-section > *,
.gallery-section > *{
  position:relative;
  z-index:1;
}

/* Subtle yellow edge light for premium industrial feel */
.cinematic-glow,
.hero .hero-badge,
.hero .hero-actions,
.hero .trust-strip{
  filter:drop-shadow(0 0 18px rgba(246,185,0,.08));
}

/* Mobile: protect readability and reduce visual load */
@media (max-width: 700px){
  .hero,
  .hero-section,
  #hero{
    background:
      radial-gradient(circle at 78% 30%, rgba(246,185,0,.12), transparent 34%),
      linear-gradient(180deg, rgba(3,6,10,.82) 0%, rgba(3,7,12,.66) 45%, rgba(2,5,9,.94) 100%);
    background-position:center;
  }
  .hero::before,
  .hero-section::before,
  #hero::before{
    opacity:.075;
    background-size:34px 34px;
  }
  .hero-copy::before,
  .hero-content::before,
  .hero-inner::before,
  .hero-text::before{
    inset:-18px -16px;
    background:linear-gradient(180deg, rgba(2,5,9,.58), rgba(2,5,9,.22));
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .hero video,
  .hero-section video,
  #hero video{
    display:none;
  }
}


/* V13.3 — Mobile Hero Fail-safe
   Prevents the hero copy from disappearing and avoids a giant empty viewport. */
@media (max-width: 980px){
  .hero{
    min-height: auto !important;
    height: auto !important;
    padding-top: 92px !important;
    padding-bottom: 54px !important;
    align-items: flex-start !important;
  }
  .hero-inner{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    position: relative !important;
    z-index: 5 !important;
  }
  .hero-inner > div:first-child{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
    z-index: 6 !important;
    width: 100% !important;
  }
  .hero-inner > .hero-card{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    position: relative !important;
    z-index: 6 !important;
  }
  .hero h1,
  .hero .lead,
  .hero .notice,
  .hero .hero-actions,
  .hero .hero-trust,
  .hero .fb-chip{
    visibility: visible !important;
    opacity: 1 !important;
  }
  .hero::before,
  .hero::after,
  .hero-grid{
    z-index: 1 !important;
  }
  .hero-video,
  .hero-bg{
    z-index: 0 !important;
  }
}

@media (max-width: 620px){
  .hero{
    padding-top: 84px !important;
    padding-bottom: 42px !important;
  }
  .hero-inner{
    gap: 18px !important;
  }
  .hero h1{
    font-size: clamp(2.25rem, 11.5vw, 3.15rem) !important;
    line-height: 1.04 !important;
  }
  .hero .lead{
    font-size: .98rem !important;
    line-height: 1.65 !important;
  }
  .hero-card{
    padding: 12px !important;
  }
  .hero-card img{
    height: 210px !important;
  }
  .scroll-cue{
    display: none !important;
  }
}


/* V13.5 — Mobile menu stacking fix
   Header creates a stacking context at z-index 100 while the backdrop is 125.
   That put the backdrop ABOVE the menu and intercepted all menu clicks. */
@media (max-width: 980px){
  header{
    z-index: 160 !important;
  }
  .nav-links{
    z-index: 170 !important;
  }
  .nav-backdrop{
    z-index: 150 !important;
  }
}


/* V13.5 — Mobile menu interaction hardening */
@media (max-width: 980px){
  header{z-index:160 !important; isolation:isolate;}
  .nav-backdrop{
    z-index:0 !important;
    pointer-events:none !important;
  }
  .nav-backdrop.show{
    pointer-events:auto !important;
  }
  .nav-links{
    z-index:2 !important;
    pointer-events:auto !important;
    touch-action:pan-y;
    isolation:isolate;
  }
  .nav-links > *,
  .nav-links a,
  .nav-links button{
    position:relative;
    z-index:3;
    pointer-events:auto !important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-links > a,
  .nav-drop-btn,
  .nav-close,
  .nav-mobile-cta .btn{
    cursor:pointer;
  }
}
section[id], [id].section{
  scroll-margin-top:96px;
}
@media (max-width:680px){
  section[id], [id].section{
    scroll-margin-top:78px;
  }
}

/* ========== V16 Premium Gallery & Video Polish ========== */
.gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 16px !important;
}
.gitem {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #0a101c;
  border: 1px solid rgba(245,166,35,0.15);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s;
}
.gitem:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(245,166,35,0.3);
  border-color: rgba(245,166,35,0.45);
}
.gitem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gitem:hover img {
  transform: scale(1.1);
}
.gitem span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(to top, rgba(5,8,15,0.95) 0%, rgba(5,8,15,0.6) 60%, transparent 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transform: translateY(4px);
  transition: transform 0.35s ease;
}
.gitem:hover span {
  transform: translateY(0);
}

.vids-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
}
.vid-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #000;
  border: 1px solid rgba(245,166,35,0.18);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s;
}
.vid-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(245,166,35,0.4);
  border-color: rgba(245,166,35,0.5);
}
.vid-card video,
.vid-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vid-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  background: rgba(245,166,35,0.92);
  color: #05080f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(245,166,35,0.4);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.vid-card:hover .vid-play {
  transform: translate(-50%, -50%) scale(1.1);
}
.vid-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 32px 16px 14px;
  background: linear-gradient(to top, rgba(5,8,15,0.96) 10%, rgba(5,8,15,0.5) 70%, transparent);
  color: #eef3fa;
}
.vid-meta b {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 3px;
  color: #fff;
}
.vid-meta span {
  font-size: 0.78rem;
  color: #9aadc4;
}

@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .vids-grid { grid-template-columns: 1fr !important; }
  .gitem span { font-size: 0.75rem; padding: 20px 10px 8px; }
}

/* ========== V16.1 Marketing Polish ========== */

/* Stronger primary buttons */
.btn-primary {
  background: linear-gradient(135deg, #f5a623 0%, #ff8c1a 100%) !important;
  color: #05080f !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(245, 166, 35, 0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  border: none !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 14px 32px rgba(245, 166, 35, 0.5), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* WhatsApp button glow */
.btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #1da851 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3) !important;
  border: none !important;
}
.btn-whatsapp:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 14px 32px rgba(37, 211, 102, 0.45) !important;
}

/* Hero badge more premium */
.badge {
  background: rgba(245, 166, 35, 0.12) !important;
  border: 1px solid rgba(245, 166, 35, 0.35) !important;
  color: #f5a623 !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
}

/* Hero notice box */
.notice {
  background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(245,166,35,0.03)) !important;
  border: 1px solid rgba(245,166,35,0.2) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
}

/* Section head more impactful */
.section-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
  line-height: 1.2 !important;
}
.section-head .eyebrow {
  color: #f5a623 !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 0.78rem !important;
}

/* Trust strip premium */
.trust-strip {
  background: linear-gradient(90deg, #0a101c, #0f1726, #0a101c) !important;
  border-top: 1px solid rgba(245,166,35,0.15);
  border-bottom: 1px solid rgba(245,166,35,0.15);
}
.trust-strip__inner span {
  font-weight: 600 !important;
  color: #eef3fa !important;
}

/* Case cards nicer */
.case-card {
  border-radius: 18px !important;
  overflow: hidden;
  border: 1px solid rgba(245,166,35,0.12) !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.case-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,166,35,0.25);
}

/* Floating CTA bar more attractive if exists */
.floating-cta, .bottom-bar {
  backdrop-filter: blur(16px) !important;
  background: rgba(5,8,15,0.92) !important;
  border-top: 1px solid rgba(245,166,35,0.25) !important;
}

/* ========== V16.1 Pricing Cards ========== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.price-card {
  background: var(--surface);
  border: 1px solid rgba(245,166,35,0.15);
  border-radius: 18px;
  padding: 28px 22px;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s;
  display: flex;
  flex-direction: column;
}
.price-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  border-color: rgba(245,166,35,0.4);
}
.price-card.popular {
  border-color: rgba(245,166,35,0.45);
  background: linear-gradient(160deg, rgba(245,166,35,0.08), var(--surface));
}
.price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f5a623, #ff8c1a);
  color: #05080f;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-icon {
  font-size: 2rem;
  margin-bottom: 12px;
}
.price-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: #fff;
}
.price-range {
  font-size: 1.45rem;
  font-weight: 800;
  color: #f5a623;
  margin-bottom: 8px;
}
.price-range span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}
.price-card p {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 14px;
}
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex-grow: 1;
}
.price-card ul li {
  font-size: 0.88rem;
  color: var(--text);
  padding: 5px 0;
  padding-left: 18px;
  position: relative;
}
.price-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #f5a623;
  font-weight: 700;
}
.price-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
.pricing-note {
  background: linear-gradient(135deg, rgba(245,166,35,0.08), rgba(245,166,35,0.03));
  border: 1px solid rgba(245,166,35,0.2);
  border-radius: 16px;
  padding: 22px 24px;
  text-align: center;
}
.pricing-note p {
  margin-bottom: 16px;
  color: var(--text);
  font-size: 0.95rem;
}
@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ========== V16.1 Mobile Menu + Performance Polish ========== */
@media (max-width: 900px) {
  .nav-links {
    position: fixed !important;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 88vw);
    background: linear-gradient(180deg, #0a101c 0%, #05080f 100%) !important;
    border-left: 1px solid rgba(245,166,35,0.2);
    padding: 0 0 30px !important;
    transform: translateX(105%);
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 200;
    overflow-y: auto;
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
  }
  body.menu-open .nav-links {
    transform: translateX(0);
  }
  .nav-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(245,166,35,0.15);
    font-weight: 700;
    font-size: 1.1rem;
    color: #f5a623;
  }
  .nav-links > a, .nav-drop {
    padding: 14px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 1.05rem;
  }
  .nav-mobile-cta {
    margin-top: auto;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .nav-mobile-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }
  body.menu-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Performance: content-visibility for heavy sections */
.gallery-section,
#videos,
#stories,
#drivers {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* Smoother image rendering */
.gitem img, .vid-card video, .case-img img {
  will-change: transform;
}

/* ========== V16.2 Speed + Mobile-First Improvements ========== */

/* Faster font rendering */
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Touch-friendly targets */
.btn, .nav-links a, .hamburger, .theme-toggle, .lang-toggle {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* Prevent image drag on mobile */
img, video {
  -webkit-user-drag: none;
  user-select: none;
}

/* Better mobile spacing & typography */
@media (max-width: 768px) {
  .hero h1 {
    font-size: clamp(1.85rem, 7.5vw, 2.6rem) !important;
    line-height: 1.15 !important;
  }
  .hero .lead {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  .hero-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  .section {
    padding: 48px 0 !important;
  }
  .section-head {
    margin-bottom: 28px !important;
  }
  .section-head h2 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Gallery 2-col on mobile */
  .gallery {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .gitem span {
    font-size: 0.7rem !important;
    padding: 18px 8px 8px !important;
  }
  /* Videos full width */
  .vids-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .vid-meta b { font-size: 0.9rem !important; }
  .vid-meta span { font-size: 0.75rem !important; }
  /* Pricing cards */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Review cards */
  .tgrid {
    grid-template-columns: 1fr !important;
  }
  /* Trust strip */
  .trust-strip__inner {
    gap: 18px !important;
    font-size: 0.85rem !important;
  }
  /* Reduce large paddings */
  .notice {
    padding: 12px 14px !important;
  }
  /* Bottom safe area for notched phones */
  .floating-cta, .bottom-bar, footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

/* Extra small phones */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.7rem !important; }
  .gallery { gap: 8px !important; }
  .btn { padding: 13px 18px !important; font-size: 0.92rem !important; }
}

/* Performance: contain layout shifts */
.gitem, .vid-card, .price-card, .review-card, .case-card {
  content-visibility: auto;
  contain: layout style paint;
}

/* Reduce motion for accessibility + battery */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Faster paint for hero */
.hero {
  contain: layout style;
}
.hero-video {
  will-change: auto;
}

/* ========== V16.3 FINAL HERO GAP KILLER ========== */
.hero {
  min-height: auto !important;
  height: auto !important;
  padding-top: 90px !important;
  padding-bottom: 28px !important;
  display: block !important;
  overflow: visible !important;
  align-items: flex-start !important;
}
.hero-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  z-index: 5 !important;
  position: relative !important;
}
.hero-copy {
  display: block !important;
  width: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #eef3fa !important;
  z-index: 6 !important;
  position: relative !important;
}
.hero-copy h1 {
  color: #ffffff !important;
  font-size: clamp(1.75rem, 7vw, 2.4rem) !important;
  line-height: 1.2 !important;
  margin: 10px 0 12px !important;
}
.hero-copy .lead {
  display: block !important;
  color: #b0c0d4 !important;
  font-size: 0.95rem !important;
  margin: 0 0 14px !important;
}
.hero-copy .notice {
  display: flex !important;
  margin-bottom: 16px !important;
}
.hero-card {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.hero-video {
  opacity: 0.22 !important;
}
/* Desktop restore */
@media (min-width: 981px) {
  .hero {
    min-height: 100svh !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }
  .hero-inner {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 2.5rem !important;
    align-items: center !important;
  }
  .hero-copy h1 {
    font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
  }
}

/* Extra mobile polish V16.3 */
@media (max-width: 768px) {
  .offer-bar { font-size: 0.8rem !important; padding: 8px 12px !important; }
  header { height: 64px !important; }
  .nav { height: 64px !important; }
  .hero { padding-top: 78px !important; }
  .floating-cta, .bottom-cta, body > .fixed-bottom {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
  /* Make sure content is never hidden under fixed bottom buttons */
  body { padding-bottom: 80px !important; }
  .hero-trust { flex-wrap: wrap !important; gap: 8px !important; font-size: 0.8rem !important; }
  .fb-chip { display: inline-flex !important; margin-top: 10px !important; }
}

/* V16.3.1 - Fix huge checkmark circle & text overlap */
.notice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  margin: 12px 0 18px !important;
  position: relative !important;
  overflow: hidden !important;
}
.notice .ic {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
.notice .ic svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  display: block !important;
}
.notice p {
  flex: 1 !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: #f0e6c8 !important;
}

/* Prevent any accidental huge decorative circles */
.hero-copy svg {
  max-width: 24px !important;
  max-height: 24px !important;
}
.hero-copy .notice svg {
  max-width: 18px !important;
  max-height: 18px !important;
}

/* Fix possible text overlap on lead */
.hero-copy .lead {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  max-width: 100% !important;
  overflow: visible !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
.hero-copy h1 {
  position: relative !important;
  z-index: 2 !important;
}

/* ================= V2 CONVERSION + PERFORMANCE UPGRADE ================= */
.v2-quick-quote{position:relative;margin:0 auto;padding:28px 0;background:linear-gradient(180deg,rgba(255,193,7,.07),rgba(255,193,7,.025));border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
.v2-quick-inner{display:flex;align-items:center;justify-content:space-between;gap:28px}
.v2-quick-inner h2{margin:.2rem 0 .45rem;font-size:clamp(1.25rem,2.4vw,1.9rem)}
.v2-quick-inner p{margin:0;color:var(--muted-2);max-width:680px}
.v2-quick-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
@media(max-width:760px){
 .v2-quick-quote{padding:22px 0}
 .v2-quick-inner{display:block}
 .v2-quick-actions{margin-top:16px;display:grid;grid-template-columns:1fr}
 .v2-quick-actions .btn{width:100%;justify-content:center}
}
@media(max-width:640px){
 .hero-actions{display:grid!important;grid-template-columns:1fr!important}
 .hero-actions .btn{width:100%;justify-content:center}
 .hero-card{margin-top:18px}
}

/* v2.8: video transcripts + coverage boxes */
.vid-desc{font-size:.78rem;opacity:.72;line-height:1.6;margin:6px 0 0;font-weight:400}
.coverage-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.cov-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.cov-chip{background:rgba(250,204,21,.12);border:1px solid rgba(250,204,21,.35);color:var(--acc);font-size:.8rem;padding:4px 12px;border-radius:999px}

/* ============================================================
   v3.0 DESIGN SYSTEM — authoritative rhythm / type / touch layer
   Appended last so it wins over the earlier conflicting rules
   (.section was 48/64/68/80/92/100px in different places).
   Keeps the dark + crane-yellow industrial identity — no redesign.
   ============================================================ */
:root{
  --v3-sec-pad: 88px;                 /* desktop section padding */
  --v3-sec-pad-m: 60px;               /* mobile section padding */
  --v3-h2: clamp(1.9rem, 4vw, 2.9rem); /* unified h2 scale */
  --v3-head-mb: 44px;                 /* section-head bottom margin */
  --v3-head-mb-m: 30px;
  --v3-eyebrow: .78rem;
  --v3-tap: 44px;                     /* minimum touch target */
}

/* ---- 1. One consistent section rhythm ---- */
.section{ padding: var(--v3-sec-pad) 0 !important; }
/* Deliberate one-off inline paddings (page heroes clearing the fixed header,
   deliberately tight gallery/map sections) keep their intent: */
.section[style*="padding-top:0"]{ padding-top: 0 !important; }
.section[style*="padding-top:20px"]{ padding-top: 20px !important; }
.section[style*="padding-top:110px"]{ padding-top: 110px !important; }
.section[style*="padding-top:120px"]{ padding-top: 120px !important; }
.section[style*="padding-top:130px"]{ padding-top: 130px !important; }
.section[style*="padding-bottom:40px"]{ padding-bottom: 40px !important; }

/* ---- 2. Unified section-head scale ---- */
.section-head{ margin-bottom: var(--v3-head-mb) !important; }
.section-head h2{
  font-size: var(--v3-h2) !important;
  letter-spacing: -.02em !important;
  line-height: 1.22 !important;
  text-wrap: balance;
}
.section-head > p{
  font-size: 1.02rem; line-height: 1.7; opacity: .82; max-width: 62ch;
  margin-left: auto; margin-right: auto;
}

/* ---- 3. Unified eyebrow / kicker ---- */
.eyebrow{
  display: inline-flex !important; align-items: center; gap: 8px;
  font-size: var(--v3-eyebrow) !important; font-weight: 700 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  color: var(--acc, #facc15) !important; margin-bottom: 12px !important;
}
.eyebrow::before{
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor; flex: none;
}

/* ---- 4. Gentle alternating rhythm for plain sections ----
   Sections with their own background / cinematic treatment keep full
   identity — the tint only touches plain sections. */
body > section.section:not([style*="background"]):not(.hero):not(.emergency-section):not(.section-cinematic):nth-of-type(even){
  background: rgba(255,255,255,.018);
}
:root[data-theme="light"] body > section.section:not([style*="background"]):not(.hero):not(.emergency-section):not(.section-cinematic):nth-of-type(even){
  background: rgba(0,0,0,.022);
}

/* ---- 5. Touch targets: reinforce 44px minimum (base rule already exists) ---- */
button, .btn, .hamburger, .theme-toggle, .lang-toggle, .nav-close, .ob-close{
  min-height: var(--v3-tap); min-width: var(--v3-tap);
}
input, select, textarea{ min-height: var(--v3-tap); }
.nav-links a{ min-height: var(--v3-tap); display: inline-flex; align-items: center; }

/* ---- 6. Compact, consistent CTA row spacing ---- */
.cta-row, .btn-row, .hero-cta{ display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row .btn, .btn-row .btn, .hero-cta .btn{ margin: 0; }

/* ---- 7. Small-screen tightening ---- */
@media (max-width: 680px){
  .section{ padding: var(--v3-sec-pad-m) 0 !important; }
  .section-head{ margin-bottom: var(--v3-head-mb-m) !important; }
  .container{ padding-left: 18px; padding-right: 18px; }
  .section-head > p{ font-size: .98rem; }
}