/* site-header.css - Generated from index.html inline <style>.
   Source of truth: index.html
   Propagated by: build_header_css.py
   Generated: 2026-04-11T19:40:55.218895
   DO NOT EDIT DIRECTLY. Edit the inline <style> in index.html, then run build_header_css.py
*/
/* =====================================================
       YMARKET REDESIGN V2 — Leumi Structure
       Full-width rotating hero + flowing sections
       ===================================================== */

    :root {
      --navy-900: #0A1628;
      --navy-800: #112A45;
      --navy-700: #1B3A5C;
      --navy-600: #2A5080;
      --navy-500: #3668A0;
      --navy-400: #4A82BF;
      --navy-300: #7AAAD6;
      --navy-200: #A8CCE8;
      --navy-100: #D4E6F4;
      --navy-50: #EBF2FA;

      --action: #0A6BFF;
      --action-hover: #0856D6;
      --action-light: #3D8AFF;
      --action-glow: rgba(10, 107, 255, 0.35);
      --action-bg: rgba(10, 107, 255, 0.06);

      --gold: #E8A735;
      --gold-hover: #D4952E;
      --gold-light: #F5C76B;
      --gold-glow: rgba(232, 167, 53, 0.3);

      --green: #1a7f37;
      --green-light: #22C55E;

      --surface: #FFFFFF;
      --surface-alt: #F6F8FB;
      --surface-glass: rgba(255, 255, 255, 0.65);
      --surface-glass-strong: rgba(255, 255, 255, 0.82);

      --text-primary: #0F172A;
      --text-secondary: #475569;
      --text-muted: #94A3B8;
      --text-on-dark: #FFFFFF;
      --text-on-dark-muted: rgba(255, 255, 255, 0.75);

      --border: rgba(27, 58, 92, 0.1);
      --border-hover: rgba(10, 107, 255, 0.3);

      --shadow-sm: 0 2px 8px rgba(10, 22, 40, 0.06);
      --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.08);
      --shadow-lg: 0 8px 32px rgba(10, 22, 40, 0.1);
      --shadow-xl: 0 15px 60px -12px rgba(10, 22, 40, 0.18);
      --shadow-glass: 0 8px 32px rgba(10, 22, 40, 0.06), 0 0 0 1px rgba(255,255,255,0.5) inset;
      --shadow-hover: 0 20px 60px -15px rgba(10, 22, 40, 0.22);

      --font: 'Heebo', Arial, sans-serif;
      --fs-xs: 0.75rem;
      --fs-sm: 0.875rem;
      --fs-base: 1rem;
      --fs-md: 1.125rem;
      --fs-lg: clamp(1.15rem, 1.5vw, 1.3rem);
      --fs-xl: clamp(1.35rem, 2vw, 1.6rem);
      --fs-2xl: clamp(1.6rem, 2.5vw, 2.1rem);
      --fs-3xl: clamp(2rem, 3vw, 2.75rem);
      --fs-4xl: clamp(2.25rem, 4vw, 3.5rem);
      --fs-hero: clamp(2.5rem, 5vw, 4rem);

      --sp-xs: 0.25rem; --sp-sm: 0.5rem; --sp-md: 1rem; --sp-lg: 1.5rem;
      --sp-xl: 2rem; --sp-2xl: 3rem; --sp-3xl: 4.5rem; --sp-4xl: 6rem;

      --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 100px;

      --max-w: 1320px;
      --padding: clamp(1rem, 3vw, 2rem);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; overflow-x: clip; }
    body {
      font-family: var(--font); font-size: var(--fs-base); font-weight: 400;
      line-height: 1.6; color: var(--text-primary); background: var(--surface);
      direction: rtl; text-align: right; -webkit-font-smoothing: antialiased; overflow-x: clip;
    }
    img { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    ul, ol { list-style: none; }
    button, a, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    input, button, textarea, select { font: inherit; }
    h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.25; color: var(--navy-800); }
    ::selection { background: var(--action); color: white; }
    .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--padding); }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--navy-50); }
    ::-webkit-scrollbar-thumb { background: var(--navy-300); border-radius: 99px; }

    /* ── Keyframes ── */
    @keyframes floatBlob {
      0%,100% { transform: translate(0,0) scale(1); }
      33% { transform: translate(20px,-25px) scale(1.04); }
      66% { transform: translate(-15px,15px) scale(0.97); }
    }
    @keyframes floatBlobSlow {
      0%,100% { transform: translate(0,0); }
      50% { transform: translate(-25px,-20px); }
    }
    @keyframes slideUp {
      from { opacity:0; transform:translateY(35px); }
      to { opacity:1; transform:translateY(0); }
    }
    @keyframes fadeSlideIn {
      from { opacity:0; transform:translateX(-30px); }
      to { opacity:1; transform:translateX(0); }
    }
    @keyframes shimmer {
      0% { background-position: 200% center; }
      100% { background-position: -200% center; }
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes iconBounce {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }
    @keyframes bannerIn {
      from { opacity:0; transform:scale(1.03); }
      to { opacity:1; transform:scale(1); }
    }
    @keyframes textSlideUp {
      from { opacity:0; transform:translateY(24px); }
      to { opacity:1; transform:translateY(0); }
    }
    @keyframes progressBar {
      from { width: 0; }
      to { width: 100%; }
    }

    /* ── Scroll Reveal ── */
    .reveal {
      opacity: 0; transform: translateY(28px);
      transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-d1 { transition-delay: .08s; }
    .reveal-d2 { transition-delay: .16s; }
    .reveal-d3 { transition-delay: .24s; }
    .reveal-d4 { transition-delay: .32s; }
    .reveal-d5 { transition-delay: .4s; }

    /* ── Buttons ── */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      padding: 14px 28px; font-family: var(--font); font-size: var(--fs-base);
      font-weight: 700; line-height: 1; border: 2px solid transparent;
      border-radius: var(--r-lg); cursor: pointer;
      transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
      white-space: nowrap; text-decoration: none; position: relative; overflow: hidden;
    }
    .btn--action { background: var(--action); color: white; box-shadow: 0 4px 20px var(--action-glow); }
    .btn--action:hover { background: var(--action-hover); transform: translateY(-2px); box-shadow: 0 8px 30px var(--action-glow); color: white; }
    .btn--action::after {
      content:''; position:absolute; inset:0;
      background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
      background-size: 200% 100%; animation: shimmer 3s infinite;
    }
    .btn--outline { background: var(--surface-glass); color: var(--navy-700); border-color: var(--border); }
    .btn--outline:hover { border-color: var(--action); color: var(--action); background: var(--action-bg); transform: translateY(-2px); }
    .btn--navy { background: var(--navy-800); color: white; }
    .btn--navy:hover { background: var(--navy-700); transform: translateY(-2px); color: white; }
    .btn--gold { background: linear-gradient(135deg, var(--gold), var(--gold-hover)); color: white; box-shadow: 0 4px 16px var(--gold-glow); }
    .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--gold-glow); color: white; }
    .btn--whatsapp { background: var(--green); color: white; }
    .btn--whatsapp:hover { background: #158a32; transform: translateY(-2px); color: white; }
    .btn--white { background: rgba(255,255,255,0.12); color: white; border-color: rgba(255,255,255,0.25); }
    .btn--white:hover { background: rgba(255,255,255,0.22); color: white; }
    .btn--hero { padding: 16px 36px; font-size: var(--fs-md); border-radius: var(--r-xl); }
    .btn--lg { padding: 16px 36px; font-size: var(--fs-md); }

    /* ═══════════════════════════════
       TOP BAR + HEADER
       ═══════════════════════════════ */
    .announcement {
      background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
      text-align: center; font-size: var(--fs-sm); font-weight: 700; position: relative; z-index: 100;
    }
    .announcement a {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      padding: 11px 16px; color: var(--gold); min-height: 44px; transition: background 0.3s;
    }
    .announcement a:hover { background: rgba(232,167,53,0.08); color: var(--gold); }
    .announcement::after {
      content:''; position: absolute; bottom:0; left:0; right:0; height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

    .info-bar {
      background: var(--surface); border-bottom: 1px solid var(--border);
      font-size: 0.82rem; color: var(--text-secondary);
    }
    .info-bar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; padding-bottom: 6px; }
    .info-bar__group { display: flex; align-items: center; gap: var(--sp-lg); }
    .info-bar__item { display: flex; align-items: center; gap: 6px; }
    .info-bar__item a { color: var(--text-secondary); transition: color 0.2s; }
    .info-bar__item a:hover { color: var(--action); }
    .info-bar__social a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: 50%;
      color: var(--text-secondary); transition: all 0.25s;
    }
    .info-bar__social a:hover { color: var(--action); background: var(--action-bg); }

    .header {
      background: var(--surface-glass-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 9000;
      transition: box-shadow 0.3s;
    }
    .header.scrolled { box-shadow: 0 4px 24px rgba(10,22,40,0.08); }
    .header .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
    .header__logo { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
    .header__logo-icon {
      width: 42px; height: 42px; background: linear-gradient(135deg, var(--navy-700), var(--action));
      border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
      color: white; font-weight: 900; font-size: 1.3rem;
    }
    .header__logo-text { font-weight: 800; font-size: 1.35rem; color: var(--navy-800); }
    .header__logo-text span { color: var(--action); }

    .nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
    .nav__item { position: relative; }
    .nav__link {
      display: flex; align-items: center; gap: 6px; padding: 10px 18px;
      font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary);
      border-radius: var(--r-md); transition: all 0.2s; white-space: nowrap;
    }
    .nav__link:hover, .nav__link.active { color: var(--action); background: var(--action-bg); }
    .nav__link i { font-size: 0.65em; transition: transform 0.3s; }
    .nav__item:hover .nav__link i { transform: rotate(180deg); }

    .mega-menu {
      position: absolute; top: 100%; right: 50%; transform: translateX(50%);
      background: var(--surface-glass-strong); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
      padding: var(--sp-xl); padding-top: calc(var(--sp-xl) + 10px); min-width: 580px;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
      transform: translateX(50%) translateY(8px); z-index: 9100;
    }
    /* Bridge the gap between nav link and mega menu */
    .mega-menu::before {
      content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; background: transparent;
    }
    .nav__item:hover .mega-menu { opacity:1; visibility:visible; pointer-events:auto; transform: translateX(50%) translateY(0); }
    .mega-menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .mega-menu__cat {
      display: flex; align-items: center; gap: 10px; padding: 10px 14px;
      border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 500;
      color: var(--text-primary); transition: all 0.2s;
    }
    .mega-menu__cat:hover { background: var(--action-bg); color: var(--action); }
    .mega-menu__cat i {
      width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
      border-radius: var(--r-sm); background: var(--navy-50); color: var(--navy-600);
      font-size: 0.75rem; flex-shrink: 0; transition: all 0.2s;
    }
    .mega-menu__cat:hover i { background: var(--action); color: white; }

    .header__actions { display: flex; align-items: center; gap: 8px; }
    .header__btn {
      display: flex; align-items: center; justify-content: center; gap: 6px;
      padding: 8px 14px; background: none; border: none; cursor: pointer;
      font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary);
      border-radius: var(--r-md); transition: all 0.2s; min-height: 40px;
    }
    .header__btn:hover { color: var(--action); background: var(--action-bg); }
    .header__login { background: var(--navy-700); color: white; border-radius: var(--r-pill); padding: 8px 20px; font-weight: 600; }
    .header__login:hover { background: var(--navy-600); color: white; }
    .header__register {
      background: linear-gradient(135deg, var(--gold), var(--gold-hover)); color: white;
      border-radius: var(--r-pill); padding: 8px 20px; font-weight: 700;
      box-shadow: 0 2px 10px var(--gold-glow);
    }
    .header__register:hover { transform: translateY(-1px); box-shadow: 0 4px 16px var(--gold-glow); color: white; }
    .mobile-menu-btn {
      display: none; background: none; border: none; font-size: 1.4rem; color: var(--navy-700);
      cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px;
      align-items: center; justify-content: center;
    }

    /* ═══════════════════════════════
       HERO CAROUSEL — Leumi Style
       ═══════════════════════════════ */
    .hero-carousel {
      position: relative;
      width: 100%;
      height: 580px; /* Fixed height — no jumping between slides */
      overflow: hidden;
    }

    /* All slides absolute — same fixed height */
    .hero-slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1);
      z-index: 1;
    }
    .hero-slide.active {
      opacity: 1;
      pointer-events: auto;
      z-index: 2;
    }
    .hero-slide .container { position: relative; z-index: 3; }

    /* Slide Backgrounds */
    .hero-slide--1 {
      background: linear-gradient(155deg, var(--navy-800) 0%, var(--navy-900) 60%, #060E1A 100%);
    }
    .hero-slide--2 {
      background: linear-gradient(155deg, var(--surface-alt) 0%, var(--surface) 40%, var(--navy-50) 100%);
    }
    .hero-slide--3 {
      background: linear-gradient(155deg, #0C2340 0%, var(--navy-800) 50%, #1A3F6B 100%);
    }
    .hero-slide--4 {
      background: linear-gradient(155deg, var(--navy-50) 0%, var(--surface) 50%, #F0F4FF 100%);
    }

    /* Floating blobs per slide */
    .hero-slide__blob {
      position: absolute; border-radius: 50%; z-index: 1; pointer-events: none;
    }
    .hero-slide--1 .hero-slide__blob:nth-child(1) {
      width: 500px; height: 500px; top: -150px; left: -100px;
      background: radial-gradient(circle at 40% 40%, rgba(10,107,255,0.18), transparent 70%);
      animation: floatBlob 14s ease-in-out infinite;
    }
    .hero-slide--1 .hero-slide__blob:nth-child(2) {
      width: 350px; height: 350px; bottom: -80px; right: -50px;
      background: radial-gradient(circle at 60% 60%, rgba(232,167,53,0.15), transparent 70%);
      animation: floatBlobSlow 12s ease-in-out infinite;
    }
    .hero-slide--1 .hero-slide__blob:nth-child(3) {
      width: 200px; height: 200px; top: 25%; left: 50%;
      background: radial-gradient(circle, rgba(10,107,255,0.1), transparent 70%);
      animation: floatBlob 10s ease-in-out infinite reverse;
    }
    .hero-slide--2 .hero-slide__blob:nth-child(1) {
      width: 400px; height: 400px; top: -80px; right: -60px;
      background: radial-gradient(circle, rgba(10,107,255,0.08), transparent 70%);
      animation: floatBlobSlow 16s ease-in-out infinite;
    }
    .hero-slide--2 .hero-slide__blob:nth-child(2) {
      width: 300px; height: 300px; bottom: -50px; left: 10%;
      background: radial-gradient(circle, rgba(232,167,53,0.06), transparent 70%);
      animation: floatBlob 13s ease-in-out infinite;
    }
    .hero-slide--3 .hero-slide__blob:nth-child(1) {
      width: 450px; height: 450px; top: -100px; right: -80px;
      background: radial-gradient(circle, rgba(34,197,94,0.12), transparent 70%);
      animation: floatBlob 11s ease-in-out infinite;
    }
    .hero-slide--4 .hero-slide__blob:nth-child(1) {
      width: 380px; height: 380px; bottom: -60px; left: -40px;
      background: radial-gradient(circle, rgba(10,107,255,0.07), transparent 70%);
      animation: floatBlobSlow 15s ease-in-out infinite;
    }

    /* Grid pattern on dark slides */
    .hero-slide--1::before, .hero-slide--3::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 60px 60px; z-index: 1;
      mask-image: radial-gradient(ellipse at 30% 50%, black, transparent 80%);
      -webkit-mask-image: radial-gradient(ellipse at 30% 50%, black, transparent 80%);
    }

    /* Slide content layout */
    .hero-slide__grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: var(--sp-2xl);
      align-items: center;
      height: 100%;
      padding: var(--sp-2xl) 0;
    }

    /* Text animations within active slide */
    .hero-slide.active .hero-slide__badge { animation: textSlideUp 0.6s 0.15s cubic-bezier(0.22,1,0.36,1) both; }
    .hero-slide.active .hero-slide__title { animation: textSlideUp 0.6s 0.25s cubic-bezier(0.22,1,0.36,1) both; }
    .hero-slide.active .hero-slide__desc { animation: textSlideUp 0.6s 0.35s cubic-bezier(0.22,1,0.36,1) both; }
    .hero-slide.active .hero-slide__actions { animation: textSlideUp 0.6s 0.45s cubic-bezier(0.22,1,0.36,1) both; }
    .hero-slide.active .hero-slide__visual { animation: bannerIn 0.8s 0.3s cubic-bezier(0.22,1,0.36,1) both; }

    .hero-slide__badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 16px; border-radius: var(--r-pill);
      font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-lg);
    }
    /* dark slide badge */
    .hero-slide--dark .hero-slide__badge {
      background: rgba(10,107,255,0.15); color: var(--action-light); border: 1px solid rgba(10,107,255,0.25);
    }
    /* light slide badge */
    .hero-slide--light .hero-slide__badge {
      background: var(--action-bg); color: var(--action); border: 1px solid rgba(10,107,255,0.15);
    }

    .hero-slide__title {
      font-size: var(--fs-hero); font-weight: 900; line-height: 1.12;
      margin-bottom: var(--sp-lg); letter-spacing: -1px;
    }
    .hero-slide--dark .hero-slide__title { color: white; }
    .hero-slide--light .hero-slide__title { color: var(--navy-800); }
    .hero-slide__title em {
      font-style: normal;
      background: linear-gradient(135deg, var(--action-light), var(--action));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-slide--dark .hero-slide__title em {
      background: linear-gradient(135deg, var(--gold-light), var(--gold));
      -webkit-background-clip: text; background-clip: text;
    }

    .hero-slide__desc {
      font-size: var(--fs-lg); line-height: 1.7; margin-bottom: var(--sp-xl); max-width: 520px;
    }
    .hero-slide--dark .hero-slide__desc { color: var(--text-on-dark-muted); }
    .hero-slide--light .hero-slide__desc { color: var(--text-secondary); }

    .hero-slide__actions { display: flex; gap: var(--sp-md); flex-wrap: wrap; }

    /* Visual panel (glassmorphism card on right side) */
    .hero-slide__visual {
      border-radius: var(--r-2xl); padding: var(--sp-2xl); position: relative;
    }
    .hero-slide--dark .hero-slide__visual {
      background: rgba(255,255,255,0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    }
    .hero-slide--light .hero-slide__visual {
      background: var(--surface-glass-strong); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.5); box-shadow: var(--shadow-xl);
    }

    /* Visual card internals */
    .visual-card__badge {
      position: absolute; top: -14px; right: 28px; padding: 6px 18px;
      border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 700;
      display: flex; align-items: center; gap: 8px;
    }
    .hero-slide--dark .visual-card__badge {
      background: var(--gold); color: var(--navy-900); box-shadow: 0 4px 16px var(--gold-glow);
    }
    .hero-slide--light .visual-card__badge {
      background: var(--navy-800); color: var(--gold); box-shadow: var(--shadow-md);
    }
    .visual-card__title {
      font-size: var(--fs-2xl); font-weight: 800; margin-top: var(--sp-sm); margin-bottom: var(--sp-md); line-height: 1.3;
    }
    .hero-slide--dark .visual-card__title { color: white; }
    .visual-card__text {
      font-size: var(--fs-sm); line-height: 1.7; margin-bottom: var(--sp-xl);
    }
    .hero-slide--dark .visual-card__text { color: var(--text-on-dark-muted); }
    .hero-slide--light .visual-card__text { color: var(--text-secondary); }
    .visual-card__features {
      display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--sp-xl);
    }
    .visual-card__feature {
      display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm);
    }
    .hero-slide--dark .visual-card__feature { color: var(--text-on-dark-muted); }
    .hero-slide--light .visual-card__feature { color: var(--text-secondary); }
    .visual-card__feature i { color: var(--action-light); font-size: 0.8rem; width: 20px; text-align: center; }
    .hero-slide--light .visual-card__feature i { color: var(--action); }
    .visual-card__btns { display: flex; flex-direction: column; gap: 10px; }

    /* Stats row inside visual */
    .visual-stats {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-xl);
    }
    .visual-stat { text-align: center; }
    .visual-stat__num {
      font-size: var(--fs-xl); font-weight: 900; line-height: 1;
    }
    .hero-slide--dark .visual-stat__num { color: var(--gold-light); }
    .hero-slide--light .visual-stat__num { color: var(--action); }
    .visual-stat__label { font-size: var(--fs-xs); margin-top: 4px; }
    .hero-slide--dark .visual-stat__label { color: var(--text-on-dark-muted); }
    .hero-slide--light .visual-stat__label { color: var(--text-muted); }

    /* Carousel Controls */
    .hero-carousel__dots {
      position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 10px; z-index: 10;
    }
    .hero-carousel__dot {
      width: 12px; height: 12px; border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.5); background: transparent;
      cursor: pointer; transition: all 0.3s; padding: 0;
    }
    .hero-carousel__dot.active {
      background: var(--action); border-color: var(--action);
      box-shadow: 0 0 12px var(--action-glow);
    }
    .hero-slide--light ~ .hero-carousel__dots .hero-carousel__dot {
      border-color: var(--navy-300);
    }

    /* Progress bar under dots */
    .hero-carousel__progress {
      position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
      background: rgba(255,255,255,0.1); z-index: 10;
    }
    .hero-carousel__progress-bar {
      height: 100%; background: var(--action); width: 0;
      transition: width 0.1s linear;
    }

    /* Carousel arrows */
    .hero-carousel__arrow {
      position: absolute; top: 50%; z-index: 10;
      width: 48px; height: 48px; border-radius: 50%; border: none;
      background: rgba(255,255,255,0.1); backdrop-filter: blur(8px);
      color: white; font-size: 1.1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s; opacity: 0;
    }
    .hero-carousel:hover .hero-carousel__arrow { opacity: 1; }
    .hero-carousel__arrow:hover { background: var(--action); transform: translateY(-50%) scale(1.1); }
    .hero-carousel__arrow--prev { right: 20px; transform: translateY(-50%); }
    .hero-carousel__arrow--next { left: 20px; transform: translateY(-50%); }

    /* ═══════════════════════════════
       QUICK SERVICES — "How can we help?"
       ═══════════════════════════════ */
    .quick-services {
      background: var(--surface); padding: var(--sp-2xl) 0;
      border-bottom: 1px solid var(--border); position: relative;
    }
    .quick-services::before {
      content: ''; position: absolute; top:0; left:0; right:0; height: 100%;
      background: linear-gradient(180deg, var(--navy-50) 0%, transparent 100%); opacity: 0.4;
    }
    .quick-services .container { position: relative; z-index: 1; }
    .quick-services__grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg);
    }
    .qs-card {
      display: flex; align-items: center; gap: var(--sp-md);
      background: var(--surface-glass-strong); backdrop-filter: blur(12px);
      border: 1px solid var(--border); border-radius: var(--r-xl);
      padding: var(--sp-lg) var(--sp-xl); box-shadow: var(--shadow-glass);
      transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    .qs-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--border-hover); }
    .qs-card__icon {
      width: 50px; height: 50px; border-radius: var(--r-lg);
      background: linear-gradient(135deg, var(--navy-700), var(--action));
      display: flex; align-items: center; justify-content: center;
      color: white; font-size: 1.15rem; flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(10,107,255,0.2);
    }
    .qs-card__text strong { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
    .qs-card__text span { font-size: var(--fs-xs); color: var(--text-secondary); }

    /* ═══════════════════════════════
       SECTIONS COMMON
       ═══════════════════════════════ */
    .section { padding: var(--sp-4xl) 0; position: relative; }
    .section--alt { background: var(--surface-alt); }
    .section--navy { background: linear-gradient(155deg, var(--navy-900) 0%, var(--navy-800) 50%, var(--navy-700) 100%); color: white; }
    .section__header { text-align: center; margin-bottom: var(--sp-3xl); }
    .section__label {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--action-bg); color: var(--action);
      padding: 5px 14px; border-radius: var(--r-pill);
      font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.5px; margin-bottom: var(--sp-md);
    }
    .section--navy .section__label { background: rgba(10,107,255,0.15); color: var(--action-light); }
    .section__title { font-size: var(--fs-3xl); font-weight: 800; margin-bottom: var(--sp-sm); letter-spacing: -0.5px; }
    .section--navy .section__title { color: white; }
    .section__subtitle { font-size: var(--fs-md); color: var(--text-secondary); max-width: 560px; margin: 0 auto; }
    .section--navy .section__subtitle { color: var(--text-on-dark-muted); }

    /* ═══ CATEGORIES ═══ */
    .categories-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: var(--sp-md);
    }
    .cat-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
      padding: var(--sp-xl) var(--sp-lg); text-align: center; text-decoration: none;
      display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm);
      transition: all 0.35s cubic-bezier(0.22,1,0.36,1); position: relative; overflow: hidden;
    }
    .cat-card::after {
      content:''; position: absolute; bottom:0; left:0; right:0; height: 3px;
      background: linear-gradient(90deg, var(--action), var(--navy-400));
      transform: scaleX(0); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    .cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--border-hover); }
    .cat-card:hover::after { transform: scaleX(1); }
    .cat-card__icon {
      width: 56px; height: 56px; border-radius: var(--r-lg);
      background: linear-gradient(135deg, var(--navy-50), var(--action-bg));
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; color: var(--navy-600); transition: all 0.35s;
    }
    .cat-card:hover .cat-card__icon {
      background: linear-gradient(135deg, var(--action), var(--navy-600)); color: white;
      transform: scale(1.08); box-shadow: 0 4px 16px var(--action-glow);
    }
    .cat-card__name { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); }
    .cat-card__desc { font-size: var(--fs-xs); color: var(--text-muted); }

    /* ═══ SERVICES STRIP ═══ */
    .services-strip {
      background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
      padding: var(--sp-3xl) 0; position: relative; overflow: hidden;
    }
    .services-strip::before {
      content:''; position: absolute; inset:0;
      background: radial-gradient(circle at 20% 50%, rgba(10,107,255,0.15), transparent 50%),
                  radial-gradient(circle at 80% 50%, rgba(232,167,53,0.1), transparent 50%);
    }
    .services-strip .container { position: relative; z-index: 1; }
    .services-strip__header { text-align: center; margin-bottom: var(--sp-2xl); }
    .services-strip__title { font-size: var(--fs-2xl); font-weight: 800; color: white; margin-bottom: var(--sp-sm); }
    .services-strip__subtitle { font-size: var(--fs-md); color: var(--text-on-dark-muted); }
    .services-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
    .svc-block {
      background: rgba(255,255,255,0.06); backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-xl);
      padding: var(--sp-xl); text-align: center; transition: all 0.4s cubic-bezier(0.22,1,0.36,1);
    }
    .svc-block:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); border-color: rgba(255,255,255,0.2); }
    .svc-block__icon {
      width: 64px; height: 64px; margin: 0 auto var(--sp-md); border-radius: var(--r-lg);
      display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    }
    .svc-block:nth-child(1) .svc-block__icon { background: linear-gradient(135deg, rgba(10,107,255,0.2), rgba(10,107,255,0.05)); color: var(--action-light); }
    .svc-block:nth-child(2) .svc-block__icon { background: linear-gradient(135deg, rgba(232,167,53,0.2), rgba(232,167,53,0.05)); color: var(--gold-light); }
    .svc-block:nth-child(3) .svc-block__icon { background: linear-gradient(135deg, rgba(74,130,191,0.2), rgba(74,130,191,0.05)); color: var(--navy-300); }
    .svc-block:nth-child(4) .svc-block__icon { background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(34,197,94,0.05)); color: var(--green-light); }
    .svc-block:hover .svc-block__icon { animation: iconBounce 0.5s ease; }
    .svc-block__title { color: white; font-size: var(--fs-lg); font-weight: 700; margin-bottom: 4px; }
    .svc-block__desc { color: var(--text-on-dark-muted); font-size: var(--fs-sm); line-height: 1.6; }

    /* ═══ FEATURES ═══ */
    .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
    .feature-card {
      background: var(--surface-glass-strong); backdrop-filter: blur(12px);
      border: 1px solid var(--border); border-radius: var(--r-xl);
      padding: var(--sp-2xl) var(--sp-xl); text-align: center;
      transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--border-hover); }
    .feature-card__icon {
      width: 64px; height: 64px; margin: 0 auto var(--sp-lg); border-radius: var(--r-xl);
      background: linear-gradient(135deg, var(--navy-50), var(--action-bg));
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; color: var(--action); transition: all 0.35s;
    }
    .feature-card:hover .feature-card__icon {
      background: var(--action); color: white; box-shadow: 0 6px 20px var(--action-glow); transform: scale(1.08);
    }
    .feature-card h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--sp-sm); }
    .feature-card p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin: 0; }

    /* ═══ STATS ═══ */
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-xl); }
    .stat-card {
      text-align: center; padding: var(--sp-xl);
      background: rgba(255,255,255,0.06); backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-xl); transition: all 0.3s;
    }
    .stat-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-3px); }
    .stat-card__num { font-size: var(--fs-4xl); font-weight: 900; color: white; line-height: 1; margin-bottom: 6px; }
    .stat-card__label { font-size: var(--fs-sm); color: var(--text-on-dark-muted); font-weight: 500; }

    /* ═══ ESTIMATOR ═══ */
    .estimator {
      background: var(--surface-glass-strong); backdrop-filter: blur(24px);
      border: 1px solid var(--border); border-radius: var(--r-2xl);
      padding: var(--sp-3xl); max-width: 720px; margin: 0 auto;
      box-shadow: var(--shadow-xl); position: relative;
    }
    .estimator::before {
      content:''; position: absolute; top: -2px; left: 10%; right: 10%; height: 4px;
      background: linear-gradient(90deg, var(--action), var(--gold), var(--action));
      background-size: 200% 100%; animation: gradientShift 4s ease infinite; border-radius: var(--r-pill);
    }
    .estimator__title { font-size: var(--fs-xl); font-weight: 800; text-align: center; margin-bottom: var(--sp-sm); }
    .estimator__subtitle { text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--sp-2xl); }
    .estimator__row { margin-bottom: var(--sp-xl); }
    .estimator__label { display: flex; justify-content: space-between; margin-bottom: var(--sp-sm); font-size: var(--fs-sm); font-weight: 600; }
    .estimator__value { background: var(--action-bg); color: var(--action); padding: 3px 12px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-sm); }
    .estimator__slider {
      -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
      border-radius: var(--r-pill); background: var(--navy-100); outline: none; direction: ltr;
    }
    .estimator__slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
      background: var(--action); cursor: pointer; box-shadow: 0 2px 10px var(--action-glow);
      border: 3px solid white; transition: transform 0.2s;
    }
    .estimator__slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
    .estimator__slider::-moz-range-thumb {
      width: 26px; height: 26px; border-radius: 50%; background: var(--action);
      cursor: pointer; box-shadow: 0 2px 10px var(--action-glow); border: 3px solid white;
    }
    .estimator__result {
      background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
      border-radius: var(--r-xl); padding: var(--sp-xl); text-align: center; margin-top: var(--sp-xl);
    }
    .estimator__result-label { color: var(--text-on-dark-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-sm); }
    .estimator__result-amount { font-size: var(--fs-3xl); font-weight: 900; color: var(--gold); direction: ltr; unicode-bidi: bidi-override; }
    .estimator__result-note { font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-top: var(--sp-sm); }
    .estimator__cta { text-align: center; margin-top: var(--sp-xl); }

    /* ═══ SEGMENTS ═══ */
    .segments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
    .seg-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
      padding: var(--sp-xl); text-align: center; transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
      position: relative; overflow: hidden;
    }
    .seg-card::before {
      content:''; position: absolute; top:0; left:0; right:0; height: 4px;
      background: linear-gradient(90deg, var(--action), var(--navy-400)); opacity:0; transition: opacity 0.3s;
    }
    .seg-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
    .seg-card:hover::before { opacity: 1; }
    .seg-card i { font-size: 2rem; color: var(--navy-600); margin-bottom: var(--sp-md); display: block; transition: color 0.3s; }
    .seg-card:hover i { color: var(--action); }
    .seg-card h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: var(--sp-sm); color: var(--text-primary); }
    .seg-card p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; margin: 0; }

    /* ═══ ISRAEL DELIVERY MAP — Clean UX ═══ */
    .delivery-map {
      padding: var(--sp-4xl) 0 var(--sp-3xl);
      background: linear-gradient(180deg, var(--navy-900) 0%, #0C1E35 50%, var(--navy-800) 100%);
      position: relative; overflow: hidden; color: white;
    }
    .delivery-map::before {
      content: ''; position: absolute; inset: 0;
      background:
        radial-gradient(circle at 30% 70%, rgba(10,107,255,0.06) 0%, transparent 40%),
        radial-gradient(circle at 70% 30%, rgba(232,167,53,0.04) 0%, transparent 40%);
    }
    .delivery-map .container { position: relative; z-index: 2; }

    .israel-map-wrapper {
      display: flex; justify-content: center; align-items: flex-start;
      gap: var(--sp-3xl); margin-top: var(--sp-2xl);
    }
    .israel-svg-box { width: 420px; flex-shrink: 0; }
    .israel-svg-box svg { width: 100%; height: auto; display: block; }

    /* Land */
    .il-land { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.1); stroke-width: 1.5; stroke-linejoin: round; }
    .il-water { fill: rgba(10,107,255,0.08); stroke: rgba(10,107,255,0.18); stroke-width: 0.6; }
    .il-coast { fill: none; stroke: rgba(10,107,255,0.12); stroke-width: 1; stroke-dasharray: 4 5; }
    .il-mountain { fill: rgba(255,255,255,0.025); stroke: rgba(255,255,255,0.06); stroke-width: 0.7; stroke-linejoin: round; }
    .il-geo-label { fill: rgba(255,255,255,0.2); font-size: 8px; font-family: 'Heebo'; font-weight: 300; }
    .il-water-label { fill: rgba(10,107,255,0.3); font-size: 7px; font-family: 'Heebo'; font-weight: 400; }

    /* Route */
    .rt { fill:none; stroke-linecap:round; stroke-linejoin:round; }
    .rt-bg { stroke: rgba(255,255,255,0.06); stroke-width: 3; }
    .rt-glow { stroke: url(#rGrad); stroke-width: 2.5; stroke-dasharray: 2200; stroke-dashoffset: 2200; }
    .rt-glow.animate { animation: drawRt 3.5s cubic-bezier(0.4,0,0.2,1) forwards; }
    @keyframes drawRt { to { stroke-dashoffset: 0; } }
    .rt-dash { stroke: rgba(255,255,255,0.04); stroke-width: 1; stroke-dasharray: 5 8; }

    /* Zoom box for Gush Dan */
    .zoom-frame { fill: none; stroke: rgba(232,167,53,0.25); stroke-width: 1; stroke-dasharray: 4 3; rx: 6; }
    .zoom-label { fill: rgba(232,167,53,0.4); font-size: 6px; font-family: 'Heebo'; font-weight: 600; }

    /* Cities */
    .c-pin { stroke: white; stroke-width: 1.8; transition: all 0.35s; }
    .c-pin--sm { fill: var(--action); r: 4; }
    .c-pin--md { fill: var(--action-light); r: 5; }
    .c-pin--hq { fill: var(--gold); r: 7; stroke-width: 2.2; filter: url(#gGold); }
    .c-lbl { font-family: 'Heebo'; font-weight: 700; transition: fill 0.3s; pointer-events: none; }
    .c-lbl--sm { fill: rgba(255,255,255,0.75); font-size: 8.5px; }
    .c-lbl--md { fill: rgba(255,255,255,0.9); font-size: 9.5px; }
    .c-lbl--hq { fill: var(--gold); font-size: 11px; }
    .c-ping { fill: none; stroke-width: 1.2; opacity: 0; }
    .c-ping.active { animation: cPing 1.8s ease-out infinite; }
    @keyframes cPing { 0% { r: 5; opacity: 0.5; } 100% { r: 20; opacity: 0; } }

    /* Highlight on arrival */
    .c-pin.highlight { fill: var(--gold) !important; filter: drop-shadow(0 0 6px rgba(232,167,53,0.5)); }
    .c-lbl.highlight { fill: var(--gold) !important; }

    /* Truck */
    .ym-truck { opacity: 0; transition: opacity 0.4s; }
    .ym-truck.driving { opacity: 1; }

    /* Side panel */
    .delivery-panel { flex: 1; display: flex; flex-direction: column; gap: var(--sp-lg); padding-top: var(--sp-lg); }
    .dp-live {
      background: linear-gradient(135deg, rgba(232,167,53,0.12), rgba(232,167,53,0.05));
      border: 1px solid rgba(232,167,53,0.25); border-radius: var(--r-xl);
      padding: var(--sp-lg); text-align: center;
    }
    .dp-live__label { font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-bottom: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .dp-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: blink 1.2s infinite; }
    @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
    .dp-live__city { font-size: var(--fs-xl); font-weight: 800; color: var(--gold); min-height: 30px; transition: all 0.3s; }
    .dp-card {
      background: rgba(255,255,255,0.05); backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-xl);
      padding: var(--sp-xl); transition: all 0.3s;
    }
    .dp-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
    .dp-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
    .dp-card__icon { font-size: 1.1rem; }
    .dp-card:nth-child(2) .dp-card__icon { color: var(--gold-light); }
    .dp-card:nth-child(3) .dp-card__icon { color: var(--action-light); }
    .dp-card:nth-child(4) .dp-card__icon { color: var(--green-light); }
    .dp-card:nth-child(5) .dp-card__icon { color: var(--navy-300); }
    .dp-card__title { font-size: var(--fs-base); font-weight: 700; color: white; }
    .dp-card__desc { font-size: var(--fs-sm); color: var(--text-on-dark-muted); line-height: 1.6; margin: 0; }

    @media (max-width: 900px) {
      .israel-map-wrapper { flex-direction: column; align-items: center; gap: var(--sp-xl); }
      .israel-svg-box { width: 320px; }
      .delivery-panel { flex-direction: row; flex-wrap: wrap; }
      .dp-card { flex: 1; min-width: 200px; }
    }
    @media (max-width: 480px) {
      .israel-svg-box { width: 280px; }
      .delivery-panel { flex-direction: column; }
      .dp-card { min-width: auto; }
    }

    /* ═══ BLOG ═══ */
    .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
    .blog-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
      padding: var(--sp-xl); text-decoration: none; display: flex; flex-direction: column;
      transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    .blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: var(--border-hover); }
    .blog-card h3 { font-size: var(--fs-base); font-weight: 700; color: var(--navy-700); margin-bottom: var(--sp-sm); transition: color 0.2s; }
    .blog-card:hover h3 { color: var(--action); }
    .blog-card p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.7; flex: 1; }
    .blog-card__link { font-size: var(--fs-sm); color: var(--action); font-weight: 700; margin-top: var(--sp-md); display: inline-flex; align-items: center; gap: 6px; }

    /* ═══ REGISTRATION ═══ */
    .reg-section { background: linear-gradient(135deg, var(--navy-50), var(--surface)); padding: var(--sp-4xl) 0; text-align: center; }
    .reg-section h2 { font-size: var(--fs-3xl); font-weight: 800; margin-bottom: var(--sp-2xl); }
    .reg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); margin-bottom: var(--sp-2xl); }
    .reg-item {
      display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm);
      padding: var(--sp-xl); background: var(--surface-glass-strong); backdrop-filter: blur(12px);
      border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-glass);
      transition: all 0.3s;
    }
    .reg-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
    .reg-item__icon {
      width: 48px; height: 48px; border-radius: var(--r-lg);
      background: linear-gradient(135deg, var(--action-bg), var(--navy-50));
      display: flex; align-items: center; justify-content: center; color: var(--action); font-size: 1.2rem;
    }
    .reg-item__text { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); text-align: center; }

    /* ═══ CTA ═══ */
    .cta-section {
      background: linear-gradient(155deg, var(--navy-900), var(--navy-800), var(--navy-700));
      padding: var(--sp-4xl) 0; text-align: center; position: relative; overflow: hidden;
    }
    .cta-section::before {
      content:''; position:absolute; inset:0;
      background: radial-gradient(circle at 20% 50%, rgba(10,107,255,0.12), transparent 50%),
                  radial-gradient(circle at 80% 30%, rgba(232,167,53,0.08), transparent 50%);
    }
    .cta-section .container { position: relative; z-index: 1; }
    .cta-section h2 { font-size: var(--fs-3xl); font-weight: 900; color: white; margin-bottom: var(--sp-md); }
    .cta-section p { font-size: var(--fs-md); color: var(--text-on-dark-muted); margin-bottom: var(--sp-2xl); max-width: 500px; margin-inline: auto; }
    .cta-section__actions { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; }

    /* ═══ FOOTER ═══ */
    .footer {
      background: linear-gradient(180deg, var(--navy-900), #060E1A); color: var(--text-on-dark-muted);
      padding: var(--sp-4xl) 0 var(--sp-xl); position: relative;
    }
    .footer::before {
      content:''; position:absolute; top:0; left:0; right:0; height:1px;
      background: linear-gradient(90deg, transparent 10%, rgba(10,107,255,0.3) 50%, transparent 90%);
    }
    .footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--sp-3xl); margin-bottom: var(--sp-3xl); }
    .footer__brand p { margin-top: var(--sp-md); font-size: var(--fs-sm); line-height: 1.7; }
    .footer__brand-logo { display: flex; align-items: center; gap: 10px; }
    .footer__brand-icon {
      width: 40px; height: 40px; background: linear-gradient(135deg, var(--navy-600), var(--action));
      border-radius: var(--r-md); display: flex; align-items: center; justify-content: center;
      color: white; font-weight: 900; font-size: 1.2rem;
    }
    .footer__brand-name { font-size: 1.2rem; font-weight: 800; color: white; }
    .footer__social { display: flex; gap: 10px; margin-top: var(--sp-lg); }
    .footer__social a {
      width: 40px; height: 40px; border-radius: var(--r-md);
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center; color: var(--text-on-dark-muted); transition: all 0.25s;
    }
    .footer__social a:hover { background: var(--action); color: white; border-color: var(--action); }
    .footer__heading { font-size: var(--fs-sm); font-weight: 700; color: white; margin-bottom: var(--sp-lg); text-transform: uppercase; letter-spacing: 0.5px; }
    .footer__links { display: flex; flex-direction: column; gap: 10px; }
    .footer__links a { font-size: var(--fs-sm); color: var(--text-on-dark-muted); transition: all 0.2s; }
    .footer__links a:hover { color: white; transform: translateX(-4px); }
    .footer__contact-item { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: var(--fs-sm); }
    .footer__contact-item i { width: 20px; text-align: center; color: var(--action-light); }
    .footer__contact-item a { color: var(--text-on-dark-muted); transition: color 0.2s; }
    .footer__contact-item a:hover { color: white; }
    .footer__bottom {
      border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--sp-xl);
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-md);
    }
    .footer__copyright { font-size: var(--fs-xs); color: rgba(255,255,255,0.6); }
    .footer__legal { display: flex; gap: var(--sp-lg); flex-wrap: wrap; }
    .footer__legal a { font-size: var(--fs-xs); color: rgba(255,255,255,0.6); transition: color 0.2s; }
    .footer__legal a:hover { color: white; }

    /* ═══ WHATSAPP ═══ */
    .whatsapp-float {
      position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px;
      background: #25D366; border-radius: 50%; display: flex; align-items: center;
      justify-content: center; color: white; font-size: 28px;
      box-shadow: 0 4px 20px rgba(37,211,102,0.4); z-index: 8000; transition: all 0.3s;
    }
    .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.5); color: white; }

    /* ═══ RESPONSIVE ═══ */
    @media (max-width: 1024px) {
      .hero-carousel { height: auto; }
      .hero-slide__grid { grid-template-columns: 1fr; gap: var(--sp-xl); height: auto; padding: var(--sp-xl) 0; }
      .hero-slide__visual { max-width: 520px; margin: 0 auto; }
      .features-grid, .stats-grid, .quick-services__grid, .services-strip__grid, .reg-grid { grid-template-columns: repeat(2, 1fr); }
      .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2xl); }
    }
    /* Mobile nav open state */
    .nav.open { display: flex !important; }
    .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 8999; opacity: 0; transition: opacity 0.3s; }
    .mobile-overlay.active { display: block; opacity: 1; }

    @media (max-width: 768px) {
      .nav {
        display: none;
        position: fixed; top: 0; right: 0; width: 85%; max-width: 360px; height: 100vh; height: 100dvh;
        background: var(--surface, #fff); flex-direction: column; align-items: stretch; justify-content: flex-start;
        padding: 24px; padding-top: max(24px, env(safe-area-inset-top)); gap: 0; z-index: 9001;
        box-shadow: var(--shadow-xl); overflow-y: auto; -webkit-overflow-scrolling: touch;
        transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .nav.open { transform: translateX(0); }
      .nav__link, .nav .nav__item > .nav__link { padding: 14px 16px; font-size: 1rem; border-bottom: 1px solid var(--border); border-radius: 0; min-height: 48px; width: 100%; }
      .nav .mega-menu { position: static; min-width: auto; box-shadow: none; border: none; padding: 0 16px; opacity: 1; visibility: visible; transform: none; display: none; }
      .nav .nav__item.open .mega-menu { display: block; }
      .mobile-menu-btn { display: flex; }
      .header .container { height: 60px; }
      .info-bar { display: none; }
      .hero-slide__grid { padding: var(--sp-xl) 0; gap: var(--sp-lg); }
      .hero-slide__title { font-size: clamp(1.75rem, 5vw, 2.5rem) !important; }
      .hero-slide__desc { font-size: var(--fs-base); max-width: 100%; }
      .hero-slide__actions .btn { padding: 14px 24px; font-size: var(--fs-sm); }
      .hero-slide__visual { padding: var(--sp-lg); }
      .hero-carousel__arrow { display: none; }
      .hero-carousel__dots { bottom: 12px; }
      .mega-menu { display: none; }
      .segments-grid, .blog-grid { grid-template-columns: 1fr; }
      .categories-grid { grid-template-columns: repeat(2, 1fr); }
      .cta-section__actions { flex-direction: column; align-items: center; }
      .footer__grid { grid-template-columns: 1fr; }
      .footer__bottom { flex-direction: column; text-align: center; }
    }
    @media (max-width: 480px) {
      .quick-services__grid, .features-grid, .stats-grid, .services-strip__grid, .reg-grid { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
      .categories-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-sm); }
      .cat-card { padding: var(--sp-md) var(--sp-sm); }
      .hero-slide__grid { padding: var(--sp-md) 0; }
      .hero-slide__title { font-size: 1.5rem !important; letter-spacing: -0.5px; }
      .hero-slide__desc { font-size: var(--fs-sm); margin-bottom: var(--sp-md); }
      .hero-slide__badge { font-size: 0.7rem; padding: 4px 12px; margin-bottom: var(--sp-sm); }
      .hero-slide__actions { flex-direction: column; gap: var(--sp-sm); }
      .hero-slide__actions .btn { width: 100%; justify-content: center; padding: 12px 20px; font-size: var(--fs-sm); border-radius: var(--r-lg); }
      .hero-slide__visual { padding: var(--sp-md); border-radius: var(--r-xl); }
      .hero-slide__visual .visual-stats { grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); }
      .hero-slide__visual .visual-stat__num { font-size: var(--fs-lg); }
      .hero-slide__visual .visual-card__title { font-size: var(--fs-lg); }
      .hero-slide__visual .visual-card__features { gap: 6px; }
      .hero-slide__visual .visual-card__feature { font-size: 0.75rem; }
      .hero__proof { flex-wrap: wrap; }
      .hero__proof-text { font-size: 0.75rem; }
      .estimator { padding: var(--sp-xl); }
      .header__login span, .header__register span { display: none; }
      .whatsapp-float { width: 52px; height: 52px; font-size: 24px; bottom: 16px; right: 16px; }
    }

    /* ═══════════════════════════════════════════════════
       FIGMA-LEVEL CSS UPGRADE V2 — Applied 2026-04-03
       Multi-layer shadows, spring easing, glassmorphism+,
       gradient text, mesh backgrounds, noise texture,
       card micro-interactions, button glow, FAQ accordion,
       3D tilt-ready cards, scrollbar gradient
       ═══════════════════════════════════════════════════ */

    /* ── Design tokens override ── */
    :root {
      --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

      /* Multi-layer shadows — 3-4 layers for realistic depth */
      --shadow-sm: 0 0 0 1px rgba(27,58,92,0.04), 0 1px 2px rgba(10,22,40,0.02), 0 4px 8px rgba(10,22,40,0.03);
      --shadow-md: 0 0 0 1px rgba(27,58,92,0.04), 0 1px 2px rgba(10,22,40,0.02), 0 4px 8px rgba(10,22,40,0.03), 0 12px 32px rgba(10,22,40,0.06);
      --shadow-lg: 0 0 0 1px rgba(27,58,92,0.03), 0 2px 4px rgba(10,22,40,0.02), 0 8px 20px rgba(10,22,40,0.04), 0 20px 48px rgba(10,22,40,0.08);
      --shadow-xl: 0 0 0 1px rgba(27,58,92,0.03), 0 4px 8px rgba(10,22,40,0.02), 0 12px 28px rgba(10,22,40,0.05), 0 28px 72px rgba(10,22,40,0.12);
      --shadow-hover: 0 0 0 1px rgba(10,107,255,0.06), 0 4px 8px rgba(10,22,40,0.03), 0 16px 40px rgba(10,22,40,0.06), 0 24px 64px rgba(10,22,40,0.1);
      --shadow-glass: 0 8px 32px rgba(10,22,40,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
    }

    /* ── Scroll reveal — use expo easing ── */
    .reveal {
      transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo) !important;
    }

    /* ══════════════════════════════════════
       HEADER — glassmorphism+ upgrade
       ══════════════════════════════════════ */
    .header {
      backdrop-filter: blur(20px) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
      border-bottom-color: rgba(255,255,255,0.06) !important;
      box-shadow: inset 0 -1px 0 rgba(27,58,92,0.06) !important;
    }
    .header.scrolled {
      box-shadow: 0 0 0 1px rgba(27,58,92,0.04), 0 1px 2px rgba(10,22,40,0.02), 0 4px 24px rgba(10,22,40,0.06), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }
    .mega-menu {
      backdrop-filter: blur(20px) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
      box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.08) !important;
      border-color: rgba(255,255,255,0.06) !important;
    }

    /* ══════════════════════════════════════
       BUTTONS — light overlay + glow halo + active press
       ══════════════════════════════════════ */
    .btn {
      transition: all 0.45s var(--ease-expo) !important;
      position: relative; overflow: hidden;
    }
    .btn::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent 60%);
      opacity: 0; transition: opacity 0.4s var(--ease-expo);
      pointer-events: none;
    }
    .btn:hover::before { opacity: 1; }
    .btn:hover { transform: translateY(-2px) !important; }
    .btn:active { transform: translateY(0) scale(0.98) !important; transition-duration: 0.1s !important; }

    .btn--action {
      box-shadow: 0 4px 16px rgba(10,107,255,0.2), 0 1px 3px rgba(10,107,255,0.1) !important;
    }
    .btn--action:hover {
      box-shadow: 0 8px 32px rgba(10,107,255,0.35), 0 2px 6px rgba(10,107,255,0.15) !important;
    }
    .btn--action::after {
      content: ''; position: absolute; bottom: -50%; left: 10%; right: 10%; height: 60%;
      background: rgba(10,107,255,0.25); filter: blur(20px); border-radius: 50%;
      opacity: 0; transition: opacity 0.4s var(--ease-expo); pointer-events: none; z-index: -1;
    }
    .btn--action:hover::after { opacity: 1; }

    .btn--gold {
      box-shadow: 0 4px 16px rgba(232,167,53,0.2), 0 1px 3px rgba(232,167,53,0.1) !important;
    }
    .btn--gold:hover {
      box-shadow: 0 8px 32px rgba(232,167,53,0.35), 0 2px 6px rgba(232,167,53,0.15) !important;
    }

    .btn--whatsapp {
      box-shadow: 0 4px 16px rgba(37,211,102,0.2), 0 1px 3px rgba(37,211,102,0.1) !important;
    }
    .btn--whatsapp:hover {
      box-shadow: 0 8px 32px rgba(37,211,102,0.35), 0 2px 6px rgba(37,211,102,0.15) !important;
    }

    /* ══════════════════════════════════════
       FEATURE CARDS — gradient top-border reveal + icon spring
       ══════════════════════════════════════ */
    .feature-card {
      transition: all 0.5s var(--ease-expo) !important;
      border: 1px solid rgba(27,58,92,0.06) !important;
      position: relative; overflow: hidden;
    }
    .feature-card::before {
      content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
      background: linear-gradient(90deg, var(--action), var(--gold), #22C55E);
      transform: scaleX(0); transform-origin: right;
      transition: transform 0.55s var(--ease-expo); border-radius: 16px 16px 0 0;
    }
    .feature-card:hover::before { transform: scaleX(1); }
    .feature-card:hover {
      transform: translateY(-8px) !important;
      box-shadow: var(--shadow-lg) !important;
      border-color: rgba(10,107,255,0.1) !important;
    }
    .feature-card__icon {
      transition: all 0.45s var(--ease-spring) !important;
    }
    .feature-card:hover .feature-card__icon {
      background: var(--action) !important; color: white !important;
      box-shadow: 0 0 0 1px rgba(10,107,255,0.1), 0 4px 12px rgba(10,107,255,0.2), 0 8px 24px rgba(10,107,255,0.15);
      transform: scale(1.08) rotate(-3deg);
    }

    /* ══════════════════════════════════════
       CATEGORY CARDS — 3D tilt-ready + gradient hover
       ══════════════════════════════════════ */
    .cat-card {
      transition: all 0.5s var(--ease-expo) !important;
      background: linear-gradient(145deg, var(--navy-50) 0%, white 100%) !important;
      border: 1px solid rgba(27,58,92,0.06) !important;
      position: relative; overflow: hidden;
      perspective: 800px;
      transform-style: preserve-3d;
    }
    .cat-card::after {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(10,107,255,0.08), transparent 70%);
      opacity: 0; transition: opacity 0.5s var(--ease-expo); pointer-events: none;
    }
    .cat-card:hover {
      transform: translateY(-8px) !important;
      box-shadow: var(--shadow-lg) !important;
      border-color: rgba(10,107,255,0.12) !important;
    }
    .cat-card:hover::after { opacity: 1; }
    .cat-card__icon {
      transition: all 0.45s var(--ease-spring) !important;
    }
    .cat-card:hover .cat-card__icon {
      color: white !important;
      background: linear-gradient(135deg, var(--action), var(--navy-600)) !important;
      border-radius: 14px;
      box-shadow: 0 0 0 1px rgba(10,107,255,0.1), 0 4px 12px rgba(10,107,255,0.2), 0 8px 20px rgba(10,107,255,0.15);
      transform: scale(1.1) rotate(-3deg);
    }

    /* ══════════════════════════════════════
       QUICK SERVICE CARDS — glass upgrade
       ══════════════════════════════════════ */
    .qs-card {
      transition: all 0.45s var(--ease-expo) !important;
      border: 1px solid rgba(27,58,92,0.06) !important;
      backdrop-filter: blur(20px) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }
    .qs-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: var(--shadow-md) !important;
      border-color: rgba(10,107,255,0.12) !important;
    }
    .qs-card__icon {
      transition: all 0.4s var(--ease-spring) !important;
    }
    .qs-card:hover .qs-card__icon {
      transform: scale(1.08) rotate(-3deg);
      box-shadow: 0 4px 16px rgba(10,107,255,0.3);
    }

    /* ══════════════════════════════════════
       STAT CARDS — gradient text + radial glow
       ══════════════════════════════════════ */
    .stat-card {
      transition: all 0.5s var(--ease-expo) !important;
      border: 1px solid rgba(255,255,255,0.06) !important;
      position: relative; overflow: hidden;
      backdrop-filter: blur(20px) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
    }
    .stat-card::before {
      content: ''; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px;
      background: radial-gradient(circle, rgba(10,107,255,0.1), transparent 70%);
      pointer-events: none; transition: opacity 0.5s;
    }
    .stat-card::after {
      content: ''; position: absolute; bottom: -40px; left: -40px; width: 100px; height: 100px;
      background: radial-gradient(circle, rgba(232,167,53,0.06), transparent 70%);
      pointer-events: none;
    }
    .stat-card:hover {
      background: rgba(255,255,255,0.08) !important;
      transform: translateY(-6px) !important;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 12px 40px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1) !important;
      border-color: rgba(255,255,255,0.12) !important;
    }
    .stat-card__num {
      background: linear-gradient(135deg, white 60%, var(--action-light)) !important;
      -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
    }

    /* ══════════════════════════════════════
       SERVICE BLOCKS (dark) — hover glow + icon spring
       ══════════════════════════════════════ */
    .svc-block {
      transition: all 0.5s var(--ease-expo) !important;
      border: 1px solid rgba(255,255,255,0.06) !important;
      position: relative; overflow: hidden;
      backdrop-filter: blur(20px) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
    }
    .svc-block::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.04), transparent 60%);
      opacity: 0; transition: opacity 0.5s; pointer-events: none; border-radius: inherit;
    }
    .svc-block:hover::before { opacity: 1; }
    .svc-block:hover {
      transform: translateY(-8px) !important;
      border-color: rgba(255,255,255,0.18) !important;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 12px 40px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    }
    .svc-block__icon {
      transition: all 0.45s var(--ease-spring) !important;
    }
    .svc-block:hover .svc-block__icon {
      transform: scale(1.12) rotate(-5deg);
    }

    /* ══════════════════════════════════════
       SEGMENT CARDS — top-border reveal + icon bounce
       ══════════════════════════════════════ */
    .seg-card {
      transition: all 0.5s var(--ease-expo) !important;
      border: 1px solid rgba(27,58,92,0.06) !important;
      position: relative; overflow: hidden;
    }
    .seg-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--action), var(--navy-400));
      transform: scaleX(0); transform-origin: center;
      transition: transform 0.5s var(--ease-expo);
    }
    .seg-card:hover::before { transform: scaleX(1); }
    .seg-card:hover {
      transform: translateY(-8px) !important;
      box-shadow: var(--shadow-lg) !important;
      border-color: rgba(10,107,255,0.1) !important;
    }
    .seg-card i {
      transition: all 0.45s var(--ease-spring) !important;
    }
    .seg-card:hover i {
      color: var(--action) !important;
      transform: scale(1.15) rotate(-3deg);
    }

    /* ══════════════════════════════════════
       BLOG CARDS — hover border + link spring
       ══════════════════════════════════════ */
    .blog-card {
      transition: all 0.5s var(--ease-expo) !important;
      border: 1px solid rgba(27,58,92,0.06) !important;
      position: relative; overflow: hidden;
    }
    .blog-card::before {
      content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
      background: linear-gradient(90deg, var(--action), var(--navy-400));
      transform: scaleX(0); transform-origin: right;
      transition: transform 0.5s var(--ease-expo);
    }
    .blog-card:hover::before { transform: scaleX(1); }
    .blog-card:hover {
      transform: translateY(-8px) !important;
      box-shadow: var(--shadow-lg) !important;
      border-color: rgba(10,107,255,0.12) !important;
    }
    .blog-card:hover h3 { color: var(--action) !important; }
    .blog-card__link {
      transition: gap 0.35s var(--ease-expo), color 0.3s !important;
    }
    .blog-card:hover .blog-card__link { gap: 14px !important; }

    /* ══════════════════════════════════════
       REGISTRATION ITEMS — icon color shift
       ══════════════════════════════════════ */
    .reg-item {
      transition: all 0.45s var(--ease-expo) !important;
      border: 1px solid rgba(27,58,92,0.06) !important;
      backdrop-filter: blur(20px) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
      box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }
    .reg-item:hover {
      transform: translateY(-6px) !important;
      box-shadow: var(--shadow-md) !important;
      border-color: rgba(10,107,255,0.1) !important;
    }
    .reg-item__icon {
      transition: all 0.45s var(--ease-spring) !important;
    }
    .reg-item:hover .reg-item__icon {
      background: var(--action) !important; color: white !important;
      box-shadow: 0 0 0 1px rgba(10,107,255,0.1), 0 4px 12px rgba(10,107,255,0.2), 0 8px 20px rgba(10,107,255,0.15);
      transform: scale(1.08) rotate(-3deg);
    }

    /* ══════════════════════════════════════
       DARK SECTIONS — mesh gradient backgrounds
       ══════════════════════════════════════ */
    .services-strip::before,
    .section--navy::before,
    .delivery-map::before,
    .cta-section::before {
      background:
        radial-gradient(ellipse at 20% 80%, rgba(10,107,255,0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(232,167,53,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(34,197,94,0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 10% 10%, rgba(74,130,191,0.04) 0%, transparent 40%) !important;
    }

    /* ── Noise texture overlay on dark sections ── */
    .services-strip::after,
    .section--navy::after,
    .cta-section::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: 0.02; z-index: 0;
    }
    .services-strip, .section--navy, .cta-section { position: relative; }
    .services-strip .container, .section--navy .container, .cta-section .container { position: relative; z-index: 1; }

    /* ══════════════════════════════════════
       ESTIMATOR — elevated glass card
       ══════════════════════════════════════ */
    .estimator {
      border: 1px solid rgba(27,58,92,0.06) !important;
      box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08) !important;
      backdrop-filter: blur(20px) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
      transition: box-shadow 0.5s var(--ease-expo) !important;
    }
    .estimator:hover {
      box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    }

    /* ══════════════════════════════════════
       SECTION LABELS — pill with subtle border
       ══════════════════════════════════════ */
    .section__label {
      border: 1px solid rgba(10,107,255,0.12) !important;
      border-radius: 100px !important;
      padding: 6px 18px !important;
      backdrop-filter: blur(8px) !important;
      transition: all 0.3s var(--ease-expo) !important;
    }
    .section--navy .section__label {
      border-color: rgba(10,107,255,0.2) !important;
    }

    /* ══════════════════════════════════════
       HERO VISUAL — glass + inner glow
       ══════════════════════════════════════ */
    .hero-slide__visual {
      backdrop-filter: blur(20px) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    }
    .hero-slide--dark .hero-slide__visual {
      box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 15px 50px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08) !important;
      border-color: rgba(255,255,255,0.06) !important;
    }
    .hero-slide--light .hero-slide__visual {
      box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.3) !important;
      border-color: rgba(255,255,255,0.06) !important;
    }

    /* ══════════════════════════════════════
       WHATSAPP FLOAT — pulse glow animation
       ══════════════════════════════════════ */
    @keyframes waPulse {
      0%, 100% {
        box-shadow: 0 0 0 1px rgba(37,211,102,0.1), 0 4px 16px rgba(37,211,102,0.3), 0 0 0 0 rgba(37,211,102,0);
      }
      50% {
        box-shadow: 0 0 0 1px rgba(37,211,102,0.1), 0 4px 16px rgba(37,211,102,0.3), 0 0 0 14px rgba(37,211,102,0.08);
      }
    }
    .whatsapp-float {
      animation: waPulse 3s var(--ease-expo) infinite !important;
      transition: all 0.35s var(--ease-spring) !important;
    }
    .whatsapp-float:hover {
      transform: scale(1.12) !important;
      box-shadow: 0 0 0 1px rgba(37,211,102,0.15), 0 6px 24px rgba(37,211,102,0.4), 0 0 0 8px rgba(37,211,102,0.1) !important;
      animation: none !important;
    }

    /* ══════════════════════════════════════
       DELIVERY MAP CARDS — glass + hover lift
       ══════════════════════════════════════ */
    .dp-card {
      transition: all 0.45s var(--ease-expo) !important;
      backdrop-filter: blur(20px) saturate(1.8) !important;
      -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
    }
    .dp-card:hover {
      transform: translateY(-6px) !important;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06) !important;
      border-color: rgba(255,255,255,0.18) !important;
    }
    .dp-live {
      box-shadow: inset 0 1px 0 rgba(232,167,53,0.1) !important;
    }

    /* ══════════════════════════════════════
       SCROLLBAR — gradient thumb
       ══════════════════════════════════════ */
    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--navy-50); }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--navy-400), var(--navy-600)) !important;
      border-radius: 99px !important;
      border: 2px solid transparent !important;
      background-clip: padding-box !important;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, var(--action), var(--navy-500)) !important;
      background-clip: padding-box !important;
    }

    /* ══════════════════════════════════════
       SELECTION
       ══════════════════════════════════════ */
    ::selection {
      background: var(--action) !important; color: white !important;
    }

    /* ══════════════════════════════════════
       ANNOUNCEMENT BAR — gold shimmer
       ══════════════════════════════════════ */
    .announcement a {
      transition: background 0.4s var(--ease-expo) !important;
    }

    /* ══════════════════════════════════════
       FOOTER — social icons spring
       ══════════════════════════════════════ */
    .footer__social a {
      transition: all 0.35s var(--ease-spring) !important;
    }
    .footer__social a:hover {
      transform: scale(1.1) translateY(-2px) !important;
      box-shadow: 0 4px 16px rgba(10,107,255,0.25) !important;
    }
    .footer__links a {
      transition: all 0.3s var(--ease-expo) !important;
    }

    /* ══════════════════════════════════════
       FAQ SECTION — accordion design
       ══════════════════════════════════════ */
    .faq-grid {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--sp-md);
    }
    .faq-item {
      background: var(--surface);
      border: 1px solid rgba(27,58,92,0.08);
      border-radius: var(--r-xl);
      overflow: hidden;
      transition: all 0.4s var(--ease-expo);
      box-shadow: var(--shadow-sm);
    }
    .faq-item:hover {
      border-color: rgba(10,107,255,0.12);
      box-shadow: var(--shadow-md);
    }
    .faq-item[open] {
      border-color: rgba(10,107,255,0.15);
      box-shadow: var(--shadow-md);
    }
    .faq-item__q {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--sp-lg) var(--sp-xl);
      cursor: pointer;
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--navy-800);
      list-style: none;
      user-select: none;
      transition: color 0.3s;
    }
    .faq-item__q::-webkit-details-marker { display: none; }
    .faq-item__q::marker { display: none; content: ''; }
    .faq-item__q:hover { color: var(--action); }
    .faq-item__icon {
      font-size: 0.75rem;
      color: var(--text-muted);
      transition: transform 0.4s var(--ease-spring), color 0.3s;
      flex-shrink: 0;
      margin-right: auto;
      margin-left: var(--sp-md);
    }
    .faq-item[open] .faq-item__icon {
      transform: rotate(180deg);
      color: var(--action);
    }
    .faq-item__a {
      padding: 0 var(--sp-xl) var(--sp-lg);
      font-size: var(--fs-sm);
      color: var(--text-secondary);
      line-height: 1.8;
      border-top: 1px solid rgba(27,58,92,0.06);
      margin-top: -2px;
      padding-top: var(--sp-md);
    }

    /* FAQ Schema support */
    .faq-section .section__header {
      margin-bottom: var(--sp-2xl);
    }

    /* ══════════════════════════════════════
       RESPONSIVE — FAQ
       ══════════════════════════════════════ */
    @media (max-width: 768px) {
      .faq-item__q {
        padding: var(--sp-md) var(--sp-lg);
        font-size: var(--fs-base);
      }
      .faq-item__a {
        padding: 0 var(--sp-lg) var(--sp-md);
      }
    }