:root{
    --primary:#1D4ED8;
    --primary-dark:#1E3A8A;
    --primary-deep:#172554;
    --sky:#38BDF8;
    --emerald:#10B981;
    --emerald-dark:#059669;
    --amber:#F59E0B;
    --rose:#EF4444;
    --bg:#F8FAFC;
    --bg-tint:#F1F5F9;
    --surface:#FFFFFF;
    --text:#020617;
    --text-soft:#0F172A;
    --body:#475569;
    --body-light:#64748B;
    --border:#E2E8F0;
    --border-soft:#EEF2F6;
    --tint:#EFF6FF;
    --tint-deep:#DBEAFE;
    --tint-emerald:#ECFDF5;
    --tint-amber:#FEF3C7;
    --radius-card:20px;
    --radius-btn:12px;
    --shadow-xs:0 1px 2px rgba(2,6,23,0.04);
    --shadow-sm:0 1px 3px rgba(2,6,23,0.06), 0 1px 2px rgba(2,6,23,0.04);
    --shadow-md:0 8px 24px -8px rgba(2,6,23,0.12), 0 2px 6px rgba(2,6,23,0.04);
    --shadow-lg:0 24px 56px -20px rgba(29,78,216,0.22), 0 8px 24px -12px rgba(2,6,23,0.08);
    --shadow-xl:0 36px 80px -28px rgba(29,78,216,0.28), 0 12px 32px -16px rgba(2,6,23,0.12);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:16px;line-height:1.6;color:var(--body);
    background:var(--surface);-webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,h5{
    font-family:'Sora',sans-serif;color:var(--text);
    line-height:1.15;letter-spacing:-0.025em;font-weight:700;
  }
  a{color:inherit;text-decoration:none}
  img,svg{display:block;max-width:100%}
  button{font-family:inherit}

  .container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}

  /* ============ ANNOUNCEMENT BAR ============ */
  .announcement{
    background:linear-gradient(90deg, var(--primary-deep) 0%, var(--primary-dark) 50%, var(--primary) 100%);
    color:white;padding:14px 0;font-size:14.5px;position:relative;z-index:101;
    overflow:hidden;
    display:none;
  }
  .announcement::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at 20% 50%, rgba(56,189,248,.3) 0%, transparent 50%);
    pointer-events:none;
  }
  .announcement-inner{
    display:flex;justify-content:center;align-items:center;gap:16px;
    flex-wrap:wrap;text-align:center;position:relative;z-index:1;
  }
  .announce-tag{
    background:var(--emerald);color:white;padding:4px 12px;border-radius:999px;
    font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  }
  .announce-text strong{color:#FDE68A;font-weight:700}
  .announce-link{
    color:white;text-decoration:underline;text-underline-offset:3px;
    font-weight:600;opacity:.95;
  }
  .announce-link:hover{opacity:1}

  /* Sticky mini announcement on scroll */
  .announce-sticky{
    position:fixed;top:0;left:0;z-index:200;
    background:linear-gradient(135deg, var(--primary-deep), var(--primary));
    color:white;padding:8px 16px;border-radius:0 0 12px 0;
    font-size:12px;font-weight:600;
    box-shadow:0 4px 16px rgba(29,78,216,.4);
    transform:translateX(-100%);opacity:0;
    transition:transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
    display:flex;align-items:center;gap:8px;
    display:none;
  }
  .announce-sticky.show{
    transform:translateX(0);opacity:1;
  }
  .announce-sticky .dot{
    width:6px;height:6px;border-radius:50%;background:var(--emerald);
    box-shadow:0 0 0 3px rgba(16,185,129,.3);
    animation:pulse 2s ease-in-out infinite;
  }
  .announce-sticky strong{color:#FDE68A}

  /* UAE flag emoji style */
  .uae-flag-real{font-size:18px;line-height:1;vertical-align:middle}

  /* ============ NAVBAR ============ */
  .nav{
    position:sticky;top:0;z-index:100;
    padding:14px 0;background:rgba(255,255,255,.85);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid transparent;transition:border-color .25s ease;
  }
  .nav.scrolled{border-bottom-color:var(--border)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
  .logo{
    display:inline-flex;align-items:center;
    flex-shrink:0;
  }
  .logo img{
    display:block;
    height:36px;
    width:auto;
  }
  .nav-links{display:flex;gap:28px;align-items:center}
  .nav-promo{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 14px;border-radius:999px;
    background:linear-gradient(135deg, rgba(29,78,216,.12), rgba(56,189,248,.18));
    border:1px solid rgba(29,78,216,.18);
    color:var(--primary-deep);font-size:12.5px;font-weight:700;
    white-space:nowrap;
  }
  .nav-promo strong{color:var(--primary)}
  .nav-promo .dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--emerald);
    box-shadow:0 0 0 4px rgba(16,185,129,.14);
    flex-shrink:0;
  }
  .nav-links a{
    font-size:14px;color:var(--body);font-weight:500;
    transition:color .2s ease;
  }
  .nav-links a:hover{color:var(--text)}
  /* Services Dropdown */
.nav-service-dropdown{
  position:relative;
}

.nav-service-btn{
  background:none;
  border:0;
  cursor:pointer;
  font-size:14px;
  color:var(--body);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 0;
  font-family:'Inter',sans-serif;
}

.nav-service-btn:hover{
  color:var(--text);
}

.nav-service-btn span{
  font-size:13px;
  transition:transform .2s ease;
}

.nav-service-dropdown:hover .nav-service-btn span{
  transform:rotate(180deg);
}

.nav-service-menu{
  position:absolute;
  top:calc(100% + 16px);
  left:50%;
  width:360px;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(226,232,240,.95);
  border-radius:20px;
  box-shadow:
    0 24px 60px rgba(15,23,42,.14),
    0 4px 16px rgba(15,23,42,.06);
  padding:10px;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, 10px);
  transition:.22s ease;
  z-index:999;
  backdrop-filter:blur(14px);
}

.nav-service-menu::before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  width:14px;
  height:14px;
  background:#fff;
  border-left:1px solid rgba(226,232,240,.95);
  border-top:1px solid rgba(226,232,240,.95);
  transform:translateX(-50%) rotate(45deg);
}

.nav-service-dropdown:hover .nav-service-menu{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}

.nav-service-menu a{
  display:block;
  padding:13px 15px 13px 16px;
  border-radius:14px;
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  position:relative;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.nav-service-menu a::before{
  content:"";
  position:absolute;
  left:7px;
  top:50%;
  width:3px;
  height:0;
  border-radius:999px;
  background:linear-gradient(180deg,var(--primary),var(--sky));
  transform:translateY(-50%);
  transition:height .18s ease;
}

.nav-service-menu a:hover{
  background:linear-gradient(135deg, rgba(239,246,255,.95), rgba(248,250,252,.95));
  color:var(--primary);
  transform:translateX(3px);
  box-shadow:inset 0 0 0 1px rgba(29,78,216,.08);
}

.nav-service-menu a:hover::before{
  height:28px;
}

.nav-service-menu a:first-child{
  background:linear-gradient(135deg, rgba(29,78,216,.08), rgba(56,189,248,.10));
  border:1px solid rgba(29,78,216,.12);
  margin-bottom:6px;
}

.nav-service-menu a:first-child:hover{
  background:linear-gradient(135deg, rgba(29,78,216,.12), rgba(56,189,248,.14));
}

.nav-service-menu small{
  display:block;
  margin-top:5px;
  font-size:12.5px;
  color:var(--body-light);
  font-weight:500;
  line-height:1.35;
}
  .nav-cta{display:flex;gap:10px;align-items:center}
  .nav-login{
    font-size:14px;font-weight:600;color:var(--body);
    padding:9px 14px;border-radius:var(--radius-btn);
    border:1px solid var(--border);background:var(--surface);
    transition:color .2s ease,border-color .2s ease,background .2s ease;
  }
  .nav-login:hover{color:var(--primary);border-color:var(--tint-deep);background:var(--tint)}

  .btn{
    display:inline-flex;align-items:center;gap:8px;justify-content:center;
    font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;
    padding:11px 20px;border-radius:var(--radius-btn);
    border:1px solid transparent;cursor:pointer;
    transition:all .22s ease-in-out;text-decoration:none;white-space:nowrap;
  }
  .btn-primary{
    background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%);
    color:white;
    box-shadow:0 6px 16px -4px rgba(29,78,216,.45), inset 0 1px 0 rgba(255,255,255,.15);
    position:relative;overflow:hidden;
  }
  .btn-primary::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,var(--primary-dark) 0%, var(--primary-deep) 100%);
    opacity:0;transition:opacity .22s ease;
  }
  .btn-primary > *{position:relative;z-index:1}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -4px rgba(29,78,216,.55)}
  .btn-primary:hover::before{opacity:1}
  .btn-primary:active{transform:translateY(0) scale(.98)}
  .btn-whatsapp{
    background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color:white;box-shadow:0 6px 16px -4px rgba(37,211,102,.4);
  }
  .btn-whatsapp:hover{transform:translateY(-1px);box-shadow:0 10px 22px -4px rgba(37,211,102,.5)}
  .btn-secondary{
    background:var(--surface);color:var(--text);border-color:var(--border);
  }
  .btn-secondary:hover{
    border-color:#94A3B8;background:var(--bg);transform:translateY(-1px);
  }
  .btn-ghost{
    background:transparent;color:var(--body);
  }
  .btn-ghost:hover{background:var(--bg);color:var(--text)}
  .btn-lg{padding:14px 24px;font-size:15px}

  .mobile-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px}
  .mobile-toggle svg{width:24px;height:24px;stroke:var(--text)}
/* Homepage Mobile Menu */
.homepage-mobile-menu{
  display:none;
}

@media (max-width:860px){
  .homepage-mobile-menu{
    position:fixed;
    top:76px;
    left:16px;
    right:16px;
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    background:rgba(255,255,255,.98);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:0 24px 60px rgba(15,23,42,.16);
    padding:12px;
    z-index:999;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:.22s ease;
    backdrop-filter:blur(14px);
    display:block;
  }

  .homepage-mobile-menu.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .homepage-mobile-menu a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 14px;
    border-radius:12px;
    color:var(--text);
    font-weight:600;
    font-size:15px;
  }

  .homepage-mobile-menu a:hover{
    background:var(--bg);
    color:var(--primary);
  }

  .homepage-mobile-menu .mobile-menu-label{
    padding:10px 14px 6px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--body-light);
  }

  .homepage-mobile-menu .mobile-service-links{
    background:linear-gradient(135deg, rgba(239,246,255,.9), rgba(248,250,252,.9));
    border:1px solid rgba(29,78,216,.10);
    border-radius:14px;
    margin:6px 0 10px;
    padding:6px;
  }

  .homepage-mobile-menu .mobile-service-links a{
    padding:11px 12px;
    font-size:14px;
  }

  .homepage-mobile-menu .mobile-cta{
    margin-top:8px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:white;
    justify-content:center;
  }

  .homepage-mobile-menu .mobile-cta:hover{
    background:linear-gradient(135deg,var(--primary-dark),var(--primary-deep));
    color:white;
  }

  .homepage-mobile-menu .mobile-cta-row{
    display:flex;
    gap:8px;
    margin-top:8px;
  }

  .homepage-mobile-menu .mobile-cta-row .mobile-cta{
    margin-top:0;
    flex:1 1 0;
    min-width:0;
    white-space:nowrap;
  }

  .homepage-mobile-menu .mobile-cta-row .mobile-cta-ghost{
    flex:0 0 auto;
    padding-left:18px;
    padding-right:18px;
  }

  .homepage-mobile-menu .mobile-cta-ghost{
    background:var(--surface);
    color:var(--primary);
    border:1px solid var(--border);
  }

  .homepage-mobile-menu .mobile-cta-ghost:hover{
    background:var(--tint);
    color:var(--primary-dark);
    border-color:var(--tint-deep);
  }

  .mobile-toggle.active svg{
    transform:rotate(90deg);
  }
}
  /* ============ HERO ============ */
  .hero{
    padding:90px 0 100px;position:relative;overflow:hidden;
    background:
      radial-gradient(1000px circle at 85% 0%, rgba(56,189,248,.12) 0%, transparent 45%),
      radial-gradient(900px circle at 10% 90%, rgba(29,78,216,.06) 0%, transparent 50%),
      radial-gradient(600px circle at 50% 50%, rgba(16,185,129,.04) 0%, transparent 60%),
      var(--surface);
  }
  .hero::before{
    content:'';position:absolute;inset:0;
    background-image:
      linear-gradient(to right, rgba(2,6,23,.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(2,6,23,.035) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 75%);
    pointer-events:none;
  }
  .hero-grid{
    display:grid;grid-template-columns:1fr 1.05fr;gap:50px;
    align-items:center;position:relative;z-index:1;
  }

  .fta-badge{
    display:inline-flex;align-items:center;gap:10px;
    padding:8px 14px 8px 8px;border-radius:999px;
    background:var(--surface);border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    font-size:12.5px;font-weight:600;color:var(--text);
    opacity:0;animation:fadeUp .5s ease-out .1s forwards;
  }
  .fta-flag{
    width:22px;height:22px;border-radius:50%;overflow:hidden;
    display:flex;flex-direction:column;flex-shrink:0;border:1px solid var(--border);
  }
  .fta-flag .s1{flex:1;background:#EF4444}
  .fta-flag .s2{flex:1;background:white}
  .fta-flag .s3{flex:1;background:#059669}
  .fta-badge .dot{
    width:6px;height:6px;border-radius:50%;background:var(--emerald);
    box-shadow:0 0 0 3px rgba(16,185,129,.22);
  }

  h1.hero-headline{
    font-size:clamp(38px, 5vw, 62px);font-weight:800;
    margin:24px 0 20px;letter-spacing:-0.035em;line-height:1.05;
    opacity:0;animation:fadeUp .6s ease-out .18s forwards;
  }
  h1.hero-headline .accent{
    background:linear-gradient(135deg,var(--primary) 0%, var(--sky) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;position:relative;
  }
  .hero-sub{
    font-size:18px;color:var(--body);max-width:540px;line-height:1.6;
    opacity:0;animation:fadeUp .6s ease-out .28s forwards;
  }
  .hero-sub strong{color:var(--text);font-weight:600}

  .hero-cta{
    display:flex;gap:12px;margin:30px 0 24px;flex-wrap:wrap;
    opacity:0;animation:fadeUp .6s ease-out .38s forwards;
  }

  .hero-proof{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 14px;max-width:560px;
    opacity:0;animation:fadeUp .6s ease-out .48s forwards;
  }
  .hero-proof-item{
    min-height:52px;padding:12px 14px;border-radius:14px;
    border:1px solid var(--border);background:rgba(255,255,255,.86);
    box-shadow:var(--shadow-xs);font-size:13.5px;color:var(--text-soft);
    display:flex;align-items:center;gap:10px;
  }
  .hero-proof-item svg{color:var(--primary);flex-shrink:0}
  .proof-divider{width:1px;height:16px;background:var(--border)}

  @keyframes fadeUp{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
  }
  @keyframes float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
  }

  /* ============ HERO VISUAL - Zoho-style widget cluster ============ */
  .hero-visual{
    position:relative;height:580px;
    opacity:0;animation:fadeIn .9s ease-out .4s forwards;
  }
  @keyframes fadeIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

  /* Main dashboard card - back layer */
  .hv-main{
    position:absolute;top:30px;right:0;width:480px;
    background:var(--surface);border-radius:20px;
    box-shadow:var(--shadow-xl);border:1px solid var(--border);
    overflow:hidden;z-index:1;
  }
  .hv-main-top{
    display:flex;align-items:center;gap:6px;
    padding:12px 14px;border-bottom:1px solid var(--border);
    background:var(--bg);
  }
  .hv-dot{width:10px;height:10px;border-radius:50%;background:#CBD5E1}
  .hv-dot.r{background:#FCA5A5}
  .hv-dot.y{background:#FCD34D}
  .hv-dot.g{background:#86EFAC}
  .hv-url{flex:1;text-align:center;font-size:11px;color:var(--body-light)}
  .hv-main-body{padding:22px}
  .hv-head{display:flex;justify-content:space-between;margin-bottom:16px}
  .hv-title{font-family:'Sora';font-weight:700;font-size:15px;color:var(--text)}
  .hv-period{font-size:11.5px;color:var(--body-light)}
  .hv-kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .hv-kpi{padding:12px 14px;border-radius:12px;background:var(--bg);border:1px solid var(--border-soft)}
  .hv-kpi-label{font-size:10.5px;color:var(--body-light);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
  .hv-kpi-val{font-size:19px;font-weight:700;color:var(--text);font-family:'Sora';margin-top:3px;letter-spacing:-.02em}
  .hv-kpi-delta{font-size:11px;font-weight:600;margin-top:2px}
  .hv-kpi-delta.up{color:var(--emerald)}
  .hv-kpi-delta.flat{color:var(--body-light)}

  .hv-chart{background:var(--bg);border-radius:12px;padding:14px;border:1px solid var(--border-soft)}
  .hv-chart-head{display:flex;justify-content:space-between;margin-bottom:8px}
  .hv-chart-title{font-size:12px;font-weight:600;color:var(--text)}
  .hv-chart-legend{display:flex;gap:10px;font-size:10px;color:var(--body-light)}
  .lg-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:middle}
  .hv-chart svg{width:100%;height:85px}
  .chart-bar{fill:var(--primary)}
  .chart-bar-2{fill:var(--sky)}

  /* Floating widget - invoice - top left */
  .hv-float-1{
    position:absolute;top:0;left:-30px;width:240px;z-index:3;
    background:var(--surface);border-radius:16px;
    box-shadow:var(--shadow-lg);border:1px solid var(--border);
    padding:16px;animation:float 5s ease-in-out infinite;
  }
  .hv-inv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .hv-inv-tag{
    display:inline-flex;align-items:center;gap:4px;
    padding:2px 8px;border-radius:999px;background:var(--tint);color:var(--primary);
    font-size:10px;font-weight:600;letter-spacing:.03em;
  }
  .hv-inv-amt{font-family:'Sora';font-weight:700;font-size:22px;color:var(--text)}
  .hv-inv-cust{font-size:11.5px;color:var(--body);margin-top:4px}
  .hv-inv-progress{height:4px;background:var(--border);border-radius:2px;margin-top:12px;overflow:hidden}
  .hv-inv-progress span{display:block;height:100%;width:70%;background:linear-gradient(90deg, var(--primary), var(--sky));border-radius:2px}
  .hv-inv-meta{display:flex;justify-content:space-between;font-size:10.5px;color:var(--body-light);margin-top:6px}

  /* Floating widget - VAT - middle left */
  .hv-float-2{
    position:absolute;bottom:110px;left:-50px;width:220px;z-index:3;
    background:var(--surface);border-radius:16px;
    box-shadow:var(--shadow-lg);border:1px solid var(--border);
    padding:16px;animation:float 5s ease-in-out infinite -1.5s;
  }
  .hv-vat-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
  .hv-vat-ic{
    width:30px;height:30px;border-radius:8px;background:var(--tint-emerald);
    color:var(--emerald);display:grid;place-items:center;
  }
  .hv-vat-title{font-family:'Sora';font-weight:600;font-size:12.5px;color:var(--text)}
  .hv-vat-sub{font-size:10.5px;color:var(--body-light);margin-top:1px}
  .hv-vat-amt{font-family:'Sora';font-weight:700;font-size:22px;color:var(--text);letter-spacing:-.02em}
  .hv-vat-due{font-size:11px;color:var(--amber);font-weight:600;margin-top:2px}
  .hv-vat-bar{height:5px;background:var(--border);border-radius:3px;margin-top:12px;overflow:hidden;display:flex}
  .hv-vat-bar .a{background:var(--primary);width:45%}
  .hv-vat-bar .b{background:var(--sky);width:30%}
  .hv-vat-bar .c{background:var(--emerald);width:25%}

  /* Floating widget - Receivables - bottom right */
  .hv-float-3{
    position:absolute;bottom:0;right:-30px;width:260px;z-index:3;
    background:var(--surface);border-radius:16px;
    box-shadow:var(--shadow-lg);border:1px solid var(--border);
    padding:16px;animation:float 5s ease-in-out infinite -3s;
  }
  .hv-recv-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .hv-recv-title{font-family:'Sora';font-weight:600;font-size:12.5px;color:var(--text)}
  .hv-recv-arrow{color:var(--primary)}
  .hv-recv-amt{font-family:'Sora';font-weight:700;font-size:24px;color:var(--text);letter-spacing:-.02em}
  .hv-recv-split{display:flex;gap:8px;margin-top:12px}
  .hv-recv-seg{flex:1;padding:8px;border-radius:8px;background:var(--bg)}
  .hv-recv-seg-label{font-size:10px;color:var(--body-light);font-weight:500}
  .hv-recv-seg-val{font-size:13px;font-weight:700;color:var(--text);font-family:'Sora';margin-top:2px}
  .hv-recv-seg.red .hv-recv-seg-val{color:var(--rose)}

  /* Floating mini-pill */
  .hv-pill{
    position:absolute;top:250px;right:-40px;z-index:4;
    display:flex;align-items:center;gap:8px;
    padding:8px 14px;border-radius:999px;
    background:var(--surface);border:1px solid var(--border);
    box-shadow:var(--shadow-md);
    font-size:12px;font-weight:600;color:var(--text);
    animation:float 5s ease-in-out infinite -2s;
  }
  .hv-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px rgba(16,185,129,.22)}

  /* ============ PROOF STRIP ============ */
  .proof-strip{
    background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    padding:40px 0;
  }
  .proof-strip-inner{
    display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;
  }
  .proof-stats{
    display:grid;grid-template-columns:repeat(3,auto);gap:40px;
  }
  .proof-stat-num{
    font-family:'Sora';font-weight:700;font-size:28px;color:var(--text);
    letter-spacing:-.02em;line-height:1;
  }
  .proof-stat-num .plus{color:var(--primary)}
  .proof-stat-label{font-size:12.5px;color:var(--body);margin-top:4px}

  .proof-logos{flex:1;min-width:0}
  .proof-marquee{
    overflow:hidden;
    mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .proof-marquee-content{
    display:flex;gap:14px;width:max-content;
    animation:marquee 28s linear infinite;
  }
  .proof-logos .ind-chip{
    background:var(--surface);
    color:var(--text);
    border:1px solid rgba(29,78,216,.12);
    box-shadow:var(--shadow-md);
    backdrop-filter:none;
    font-size:13.5px;
  }
  .proof-logos .ind-chip .ind-ic{
    width:28px;height:28px;border-radius:10px;
    background:linear-gradient(135deg, var(--primary-deep), var(--primary));
    color:white;
    display:grid;place-items:center;flex-shrink:0;
    font-size:15px;
    box-shadow:0 8px 18px rgba(29,78,216,.22);
  }

  /* ============ SECTION BASE ============ */
  section{padding:110px 0;position:relative}
  .section-head{max-width:720px;margin:0 auto 60px;text-align:center}
  .section-eyebrow{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;border-radius:999px;
    background:var(--tint);color:var(--primary);
    font-size:12px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;margin-bottom:20px;
    border:1px solid rgba(29,78,216,.1);
  }
  .section-eyebrow::before{
    content:'';width:5px;height:5px;border-radius:50%;background:var(--primary);
  }
  h2.section-title{
    font-size:clamp(30px,3.6vw,46px);font-weight:700;
    margin-bottom:16px;letter-spacing:-.03em;line-height:1.08;
  }
  .section-sub{
    font-size:17.5px;color:var(--body);line-height:1.6;max-width:640px;margin:0 auto;
  }

  /* ============ PROBLEM SECTION (Odoo-style bold) ============ */
  .problem{background:var(--bg-tint);position:relative;overflow:hidden}
  .problem::before{
    content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle, rgba(239,68,68,.06) 0%, transparent 70%);
  }
  .problem-intro{
    text-align:center;margin-bottom:56px;max-width:780px;margin-left:auto;margin-right:auto;position:relative;z-index:1;
  }
  .problem-intro h2{
    font-size:clamp(30px,3.6vw,44px);margin-bottom:18px;letter-spacing:-.03em;
  }
  .problem-intro h2 .strike{
    color:var(--rose);text-decoration:line-through;text-decoration-thickness:2px;text-underline-offset:2px;
  }
  .problem-intro p{font-size:17px;line-height:1.65;color:var(--body)}

  .problem-list{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1;
  }
  .problem-card{
    padding:32px 28px;border-radius:var(--radius-card);
    background:var(--surface);border:1px solid var(--border);
    transition:all .3s ease;position:relative;overflow:hidden;
  }
  .problem-card:hover{
    transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CBD5E1;
  }
  .problem-num{
    font-family:'Sora';font-weight:800;font-size:42px;
    color:var(--border);line-height:1;margin-bottom:14px;letter-spacing:-.02em;
    transition:color .3s ease;
  }
  .problem-card:hover .problem-num{color:var(--rose)}
  .problem-card h3{font-size:19px;margin-bottom:10px;line-height:1.3}
  .problem-card p{font-size:15px;color:var(--body);line-height:1.6}

  /* ============ FEATURE SECTION - Wafeq/Mazeed style ============ */
  .features-section{background:var(--surface)}
  .feat-row{
    display:grid;grid-template-columns:1fr 1fr;gap:80px;
    align-items:center;margin-bottom:140px;
  }
  .feat-row:last-child{margin-bottom:0}
  .feat-row.reverse{direction:rtl}
  .feat-row.reverse > *{direction:ltr}
  .feat-label{
    display:inline-flex;align-items:center;gap:8px;
    padding:6px 12px;border-radius:999px;
    background:var(--tint);color:var(--primary);
    font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    margin-bottom:18px;border:1px solid rgba(29,78,216,.1);
  }
  .feat-label.emerald{background:var(--tint-emerald);color:var(--emerald-dark);border-color:rgba(16,185,129,.15)}
  .feat-label.amber{background:var(--tint-amber);color:#B45309;border-color:rgba(245,158,11,.15)}
  .feat-text h3{
    font-size:clamp(26px,3vw,36px);margin-bottom:16px;letter-spacing:-.025em;line-height:1.15;
  }
  .feat-text > p{
    font-size:17px;color:var(--body);line-height:1.6;margin-bottom:24px;
  }
  .feat-bullets{list-style:none;display:grid;gap:14px;margin-bottom:28px}
  .feat-bullets li{
    display:flex;gap:12px;font-size:15px;color:var(--text);align-items:flex-start;line-height:1.5;
  }
  .feat-bullets .ic{
    width:22px;height:22px;border-radius:50%;background:var(--tint-emerald);color:var(--emerald);
    display:grid;place-items:center;flex-shrink:0;margin-top:1px;
  }
  .feat-link{
    display:inline-flex;align-items:center;gap:6px;
    color:var(--primary);font-weight:600;font-size:14.5px;
    transition:gap .2s ease;
  }
  .feat-link:hover{gap:10px}

  /* Feature visual cards - stacked UI layers */
  .feat-visual{
    position:relative;min-height:440px;
  }

  /* Visual 1 - Invoicing */
  .fv-invoice{
    background:linear-gradient(135deg, #d7e7ff 0%, #f3f8ff 55%, #ffffff 100%);
    border-radius:24px;padding:32px;border:1px solid var(--border);
    position:relative;overflow:hidden;
  }
  .fv-invoice::before{
    content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;
    border-radius:50%;background:radial-gradient(circle, rgba(56,189,248,.18) 0%, transparent 70%);
  }
  .fv-invoice-card{
    background:var(--surface);border-radius:14px;padding:22px;
    box-shadow:var(--shadow-lg);border:1px solid var(--border-soft);
    position:relative;z-index:1;
  }
  .fv-inv-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--border-soft)}
  .fv-inv-brand{font-family:'Sora';font-weight:700;font-size:16px;color:var(--text)}
  .fv-inv-brand span{font-size:11px;color:var(--body-light);font-weight:400;display:block;margin-top:2px}
  .fv-inv-num{text-align:right;font-size:11px;color:var(--body-light)}
  .fv-inv-num strong{display:block;font-family:'Sora';font-weight:700;font-size:13px;color:var(--text);margin-top:2px}
  .fv-inv-fta{
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 10px;border-radius:999px;background:var(--tint-emerald);
    font-size:10px;font-weight:600;color:var(--emerald-dark);margin-top:10px;
  }
  .fv-inv-items{padding:14px 0;border-bottom:1px solid var(--border-soft)}
  .fv-inv-row{display:grid;grid-template-columns:1fr 60px 80px;gap:10px;padding:6px 0;font-size:12px;color:var(--text)}
  .fv-inv-row.head{font-size:10px;color:var(--body-light);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
  .fv-inv-totals{padding-top:12px;font-size:12px}
  .fv-inv-tot-row{display:flex;justify-content:space-between;padding:3px 0;color:var(--body)}
  .fv-inv-tot-row.big{
    margin-top:6px;padding-top:10px;border-top:1px solid var(--border-soft);
    font-family:'Sora';font-weight:700;font-size:15px;color:var(--text);
  }

  .fv-inv-callout{
    position:absolute;top:20px;right:20px;z-index:2;
    background:var(--surface);border-radius:10px;padding:8px 12px;
    box-shadow:var(--shadow-md);border:1px solid var(--border);
    font-size:11px;font-weight:600;color:var(--text);
    display:flex;align-items:center;gap:6px;
  }
  .fv-inv-callout .dot{width:6px;height:6px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px rgba(16,185,129,.25)}

  /* Visual 2 - Tax */
  .fv-tax{
    background:linear-gradient(135deg, #ccefe1 0%, #eefaf5 55%, #ffffff 100%);
    border-radius:24px;padding:32px;border:1px solid var(--border);
    position:relative;overflow:hidden;
  }
  .fv-tax::before{
    content:'';position:absolute;bottom:-80px;left:-40px;width:250px;height:250px;
    border-radius:50%;background:radial-gradient(circle, rgba(16,185,129,.15) 0%, transparent 70%);
  }
  .fv-tax-card{
    background:var(--surface);border-radius:14px;padding:22px;
    box-shadow:var(--shadow-lg);border:1px solid var(--border-soft);
    position:relative;z-index:1;
  }
  .fv-tax-head{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;
    padding-bottom:14px;border-bottom:1px solid var(--border-soft);
  }
  .fv-tax-title{font-family:'Sora';font-weight:700;font-size:15px;color:var(--text)}
  .fv-tax-sub{font-size:11.5px;color:var(--body-light);margin-top:2px}
  .fv-tax-status{
    padding:4px 10px;border-radius:999px;background:var(--tint-amber);color:#B45309;
    font-size:11px;font-weight:600;
  }

  .fv-tax-amt-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px}
  .fv-tax-amt-label{font-size:11.5px;color:var(--body-light)}
  .fv-tax-amt{font-family:'Sora';font-weight:700;font-size:30px;color:var(--text);letter-spacing:-.02em;line-height:1}
  .fv-tax-delta{font-size:12px;color:var(--emerald);font-weight:600}

  .fv-tax-breakdown{display:grid;gap:10px;margin-top:14px}
  .fv-tax-br{display:flex;justify-content:space-between;align-items:center;font-size:12px}
  .fv-tax-br-label{color:var(--body);display:flex;align-items:center;gap:8px}
  .fv-tax-br-dot{width:8px;height:8px;border-radius:2px}
  .fv-tax-br-val{font-family:'Sora';font-weight:600;color:var(--text)}
  .fv-tax-br-bar{height:5px;background:var(--border);border-radius:3px;margin-top:6px;overflow:hidden}
  .fv-tax-br-bar span{display:block;height:100%;border-radius:3px}

  .fv-tax-cta{
    margin-top:18px;padding:12px;border-radius:10px;
    background:linear-gradient(135deg,var(--primary) 0%, var(--primary-dark) 100%);
    color:white;font-size:12px;font-weight:600;text-align:center;
    display:flex;align-items:center;justify-content:center;gap:8px;
  }

  /* Visual 3 - Reports */
  .fv-reports{
    background:linear-gradient(135deg, #dde3ff 0%, #f3f5ff 55%, #ffffff 100%);
    border-radius:24px;padding:32px;border:1px solid var(--border);
    position:relative;overflow:hidden;
  }
  .fv-reports::before{
    content:'';position:absolute;top:20%;right:-60px;width:220px;height:220px;
    border-radius:50%;background:radial-gradient(circle, rgba(29,78,216,.08) 0%, transparent 70%);
  }
  .fv-reports-card{
    background:var(--surface);border-radius:14px;padding:22px;
    box-shadow:var(--shadow-lg);border:1px solid var(--border-soft);
  }
  .fv-rep-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  .fv-rep-title{font-family:'Sora';font-weight:700;font-size:14.5px;color:var(--text)}
  .fv-rep-tabs{display:flex;gap:4px}
  .fv-rep-tab{font-size:10.5px;padding:3px 8px;border-radius:6px;color:var(--body-light)}
  .fv-rep-tab.active{background:var(--tint);color:var(--primary);font-weight:600}
  .fv-rep-chart svg{width:100%;height:140px}
  .fv-rep-legend{display:flex;gap:14px;margin-top:12px;font-size:11px;color:var(--body)}
  .fv-rep-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-soft)}
  .fv-rep-stat-label{font-size:10px;color:var(--body-light);text-transform:uppercase;letter-spacing:.04em}
  .fv-rep-stat-val{font-family:'Sora';font-weight:700;font-size:15px;color:var(--text);margin-top:3px}

  /* ============ FTA / TRUST SECTION ============ */
  .fta-section{
    padding:80px 0;background:var(--bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  }
  .fta-wrap{
    display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;
  }
  .fta-seal{
    width:120px;height:120px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border:2px solid #F59E0B;display:grid;place-items:center;
    position:relative;box-shadow:0 12px 30px -8px rgba(245,158,11,.3);
  }
  .fta-seal::before{
    content:'';position:absolute;inset:6px;border-radius:50%;
    border:1px dashed rgba(180,83,9,.35);
  }
  .fta-seal svg{width:42px;height:42px;color:#B45309}
  .fta-content h3{font-size:24px;margin-bottom:10px;letter-spacing:-.02em}
  .fta-content p{font-size:15.5px;color:var(--body);line-height:1.55;max-width:560px}
  .fta-btn{flex-shrink:0}

  /* ============ FOR WHO SECTION ============ */
  .for-who{background:var(--surface)}
  .who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .who-card{
    padding:36px 32px;border-radius:var(--radius-card);
    background:var(--surface);border:1px solid var(--border);
    transition:all .35s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;
  }
  .who-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,var(--primary),var(--sky));
    transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
  }
  .who-card:hover{
    transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;
  }
  .who-card:hover::before{transform:scaleX(1)}
  .who-visual{
    width:72px;height:72px;border-radius:18px;
    display:grid;place-items:center;margin-bottom:24px;
    background:linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 100%);
    color:white;position:relative;
    box-shadow:0 16px 28px -18px rgba(23,37,84,.7);
  }
  .who-visual.emerald{background:linear-gradient(135deg, #143c74 0%, var(--primary) 100%);color:white}
  .who-visual.amber{background:linear-gradient(135deg, var(--primary-dark) 0%, #2563EB 100%);color:white}
  .who-card h3{font-size:21px;margin-bottom:12px;letter-spacing:-.02em}
  .who-card > p{font-size:15px;color:var(--body);line-height:1.55;margin-bottom:20px}
  .who-benefits{list-style:none;display:grid;gap:10px}
  .who-benefits li{
    display:flex;gap:10px;font-size:13.5px;color:var(--text);align-items:flex-start;
  }
  .who-benefits .ic{
    width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg, var(--primary-deep), var(--primary));
    color:white;
    display:grid;place-items:center;flex-shrink:0;margin-top:1px;
    box-shadow:0 8px 18px -12px rgba(29,78,216,.8);
  }

  /* ============ FOUNDER SECTION ============ */
  .founder{
    background:var(--bg);
  }
  .story-shell{
    position:relative;overflow:hidden;border-radius:24px;
    padding:64px;background:linear-gradient(135deg, #0B1F3A 0%, #0F2A4A 100%);
    box-shadow:var(--shadow-xl);
  }
  .story-shell::after{
    content:'';position:absolute;top:-200px;right:-200px;width:600px;height:600px;
    background:radial-gradient(circle, rgba(59,130,246,.15), transparent 70%);
    pointer-events:none;
  }
  .story-grid{
    display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;
    position:relative;z-index:1;
  }
  .story-copy .section-eyebrow{
    background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08);color:#93C5FD;
  }
  .story-copy h2{
    color:white;font-size:clamp(32px,3.6vw,40px);line-height:1.2;
    font-weight:600;max-width:520px;margin-bottom:16px;
  }
  .story-copy h2 .highlight{color:#FACC15}
  .story-copy p{
    color:#CBD5F5;font-size:16px;line-height:1.7;max-width:520px;
  }
  .story-metrics{
    display:flex;gap:18px;flex-wrap:wrap;margin-top:32px;
  }
  .story-metric{
    min-width:150px;padding:16px 20px;border-radius:14px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  }
  .story-metric strong{
    display:block;font-family:'Sora';font-size:20px;font-weight:600;color:white;
  }
  .story-metric span{
    display:block;margin-top:6px;font-size:13px;line-height:1.5;color:#94A3B8;
  }
  .industry-strip{
    overflow:hidden;position:relative;margin-top:40px;
    mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image:linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }
  .industry-track{
    display:flex;gap:16px;width:max-content;animation:scrollLeft 25s linear infinite;
  }
  .industry-chip{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
    padding:10px 16px;border-radius:999px;font-size:13px;color:#E2E8F0;white-space:nowrap;
  }
  .story-visual{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    border-radius:18px;padding:24px;position:relative;overflow:hidden;
  }
  .story-visual-tag{
    display:inline-flex;padding:7px 12px;border-radius:999px;
    background:rgba(255,255,255,.08);color:#BFDBFE;font-size:12px;font-weight:600;
    margin-bottom:18px;
  }
  .story-stage{
    display:grid;grid-template-columns:190px 88px 1fr;gap:18px;align-items:center;
    min-height:320px;
  }
  .story-rail{display:grid;gap:16px}
  .story-visual-card{
    padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;
    color:white;font-size:14px;
  }
  .story-visual-card .ic{
    width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
    background:rgba(59,130,246,.18);color:#BFDBFE;flex-shrink:0;
  }
  .story-node-wrap{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  }
  .story-node{
    width:60px;height:60px;border-radius:50%;
    background:radial-gradient(circle, #3B82F6, #1E3A8A);
    display:grid;place-items:center;color:white;font-family:'Sora';font-weight:700;
    box-shadow:0 0 20px rgba(59,130,246,.5);
    animation:storyPulse 3s ease-in-out infinite;
  }
  .story-node-label{
    text-align:center;font-size:11.5px;line-height:1.5;color:#BFDBFE;max-width:90px;
  }
  @keyframes storyPulse{
    0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(59,130,246,.35)}
    50%{transform:scale(1.05);box-shadow:0 0 28px rgba(59,130,246,.52)}
  }
  .story-node-wrap::before,
  .story-node-wrap::after{
    content:'';position:absolute;top:30px;height:1px;width:72px;
    border-top:2px dashed rgba(59,130,246,.8);
    animation:dashMove 3s linear infinite;
  }
  .story-node-wrap::before{right:58px}
  .story-node-wrap::after{left:58px}
  @keyframes dashMove{
    from{background-position:0 0}
    to{background-position:40px 0}
  }
  .story-dash{
    border-radius:14px;background:#0F172A;border:1px solid rgba(255,255,255,.08);
    padding:18px;min-height:240px;
  }
  .story-dash-top{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;
  }
  .story-dash-title{font-family:'Sora';font-size:14px;font-weight:600;color:white}
  .story-dash-badge{
    font-size:11px;font-weight:600;color:#93C5FD;
    background:rgba(59,130,246,.14);padding:5px 8px;border-radius:999px;
  }
  .story-dash-kpis{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;
  }
  .story-dash-kpi{
    padding:12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  }
  .story-dash-kpi span{
    display:block;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#94A3B8;
  }
  .story-dash-kpi strong{
    display:block;margin-top:6px;font-family:'Sora';font-size:18px;color:white;
  }
  .story-dash-chart{
    height:86px;border-radius:12px;background:linear-gradient(180deg, rgba(30,41,59,.95), rgba(15,23,42,.6));
    display:flex;align-items:flex-end;gap:10px;padding:14px;
  }
  .story-dash-chart span{
    flex:1;border-radius:999px 999px 6px 6px;
    background:linear-gradient(180deg, #60A5FA, #1D4ED8);
    opacity:.95;
  }
  .story-dash-chart span:nth-child(1){height:34px}
  .story-dash-chart span:nth-child(2){height:48px}
  .story-dash-chart span:nth-child(3){height:42px}
  .story-dash-chart span:nth-child(4){height:64px}
  .story-dash-chart span:nth-child(5){height:56px}

  /* ============ MIGRATION SECTION ============ */
  .migration{background:var(--bg)}
  .switch-card{
    background:linear-gradient(160deg, #0A1628 0%, #122244 50%, #0E1F3D 100%);
    border-radius:24px;padding:64px;position:relative;overflow:hidden;
    box-shadow:var(--shadow-xl);
    border:1px solid rgba(59,130,246,.12);
  }
  .switch-card::after{
    content:'';position:absolute;width:500px;height:500px;bottom:-200px;left:-150px;
    background:radial-gradient(circle, rgba(56,189,248,.12), transparent 70%);
    pointer-events:none;
  }
  .switch-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
    position:relative;z-index:1;
  }
  .switch-copy .section-eyebrow{
    background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.08);color:#93C5FD;
  }
  .switch-copy h2{
    color:white;font-size:clamp(34px,3.8vw,42px);line-height:1.2;
    font-weight:600;max-width:520px;margin-bottom:16px;
  }
  .switch-copy p{
    max-width:520px;font-size:16px;line-height:1.6;color:#CBD5F5;
  }
  .switch-bullets{list-style:none;display:grid;gap:12px;margin-top:20px}
  .switch-bullets li{
    display:flex;align-items:center;gap:10px;font-size:14.5px;color:white;
  }
  .switch-bullets .ic{
    width:20px;height:20px;border-radius:50%;background:rgba(165,180,252,.18);
    color:#A5B4FC;display:grid;place-items:center;flex-shrink:0;
  }
  .switch-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
  .switch-visual{
    min-height:400px;padding:24px;border-radius:18px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    position:relative;overflow:hidden;
  }
  .switch-visual:hover .setup-source-card.one{animation-name:setupMoveOne}
  .switch-visual:hover .setup-source-card.two{animation-name:setupMoveTwo}
  .switch-visual:hover .setup-source-card.three{animation-name:setupMoveThree}
  .switch-visual:hover .setup-source-card.four{animation-name:setupMoveFour}
  .setup-guided-tag{
    position:absolute;top:18px;right:18px;padding:7px 12px;border-radius:999px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);
    color:#E2E8F0;font-size:12px;font-weight:600;
  }
  .setup-source-card{
    position:absolute;padding:12px 14px;border-radius:12px;
    background:rgba(255,255,255,.9);backdrop-filter:blur(8px);color:var(--text);
    border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow-md);
    font-size:13px;font-weight:600;animation-duration:1.5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  }
  .setup-source-card.one{top:78px;left:28px;animation-name:setupMoveOne}
  .setup-source-card.two{top:136px;left:70px;animation-name:setupMoveTwo}
  .setup-source-card.three{bottom:124px;left:54px;animation-name:setupMoveThree}
  .setup-source-card.four{bottom:68px;left:24px;animation-name:setupMoveFour}
  @keyframes setupMoveOne{
    0%,100%{transform:translate(0,0) scale(1);opacity:1}
    45%{transform:translate(110px,54px) scale(.92);opacity:.75}
    70%{transform:translate(150px,60px) scale(.88);opacity:.18}
  }
  @keyframes setupMoveTwo{
    0%,100%{transform:translate(0,0) scale(1);opacity:1}
    45%{transform:translate(86px,30px) scale(.92);opacity:.75}
    70%{transform:translate(126px,42px) scale(.88);opacity:.18}
  }
  @keyframes setupMoveThree{
    0%,100%{transform:translate(0,0) scale(1);opacity:1}
    45%{transform:translate(98px,-34px) scale(.92);opacity:.75}
    70%{transform:translate(142px,-44px) scale(.88);opacity:.18}
  }
  @keyframes setupMoveFour{
    0%,100%{transform:translate(0,0) scale(1);opacity:1}
    45%{transform:translate(116px,-60px) scale(.92);opacity:.75}
    70%{transform:translate(158px,-68px) scale(.88);opacity:.18}
  }
  .setup-core{
    position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
    width:78px;height:78px;border-radius:50%;
    background:radial-gradient(circle, rgba(96,165,250,.95), rgba(30,64,175,.95));
    display:grid;place-items:center;color:white;box-shadow:0 0 30px rgba(59,130,246,.35);
    animation:setupPulse 1.4s ease-in-out infinite;
  }
  .setup-core span{font-size:13px;font-weight:700;letter-spacing:.04em}
  @keyframes setupPulse{
    0%,100%{transform:translate(-50%,-50%) scale(1)}
    50%{transform:translate(-50%,-50%) scale(1.06)}
  }
  .setup-dashboard{
    position:absolute;top:78px;right:26px;width:220px;
    border-radius:16px;background:#0F172A;border:1px solid rgba(255,255,255,.08);
    padding:16px;box-shadow:var(--shadow-lg);
    animation:setupDashboard 1.5s ease-in-out infinite;
  }
  @keyframes setupDashboard{
    0%,25%{opacity:.35;transform:translateY(10px)}
    45%,100%{opacity:1;transform:translateY(0)}
  }
  .setup-dashboard h3{
    font-family:'Sora';font-size:14px;font-weight:600;color:white;margin-bottom:14px;
  }
  .setup-dashboard-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;
  }
  .setup-dashboard-grid div{
    padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  }
  .setup-dashboard-grid span{
    display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:#94A3B8;
  }
  .setup-dashboard-grid strong{
    display:block;margin-top:6px;font-family:'Sora';font-size:16px;color:white;
  }
  .setup-chart{
    height:72px;border-radius:12px;background:linear-gradient(180deg, rgba(30,41,59,.95), rgba(15,23,42,.65));
    padding:12px;display:flex;align-items:flex-end;gap:10px;
  }
  .setup-chart span{
    flex:1;border-radius:999px 999px 6px 6px;background:linear-gradient(180deg, #93C5FD, #2563EB);
  }
  .setup-chart span:nth-child(1){height:28px}
  .setup-chart span:nth-child(2){height:44px}
  .setup-chart span:nth-child(3){height:36px}
  .setup-chart span:nth-child(4){height:54px}
  .setup-ready{
    position:absolute;right:24px;bottom:26px;padding:11px 14px;border-radius:12px;
    background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);
    color:#DCFCE7;font-size:13px;font-weight:600;
  }

  /* ============ TESTIMONIALS ============ */
  .testimonials{background:var(--surface)}
  .test-marquee{
    overflow:hidden;position:relative;
    mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .test-track{
    display:flex;gap:20px;width:max-content;
    animation:testScroll 42s linear infinite;
    padding:6px 0 10px;
  }
  @keyframes testScroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
  }
  .test-card{
    width:340px;flex:0 0 340px;padding:30px 28px;border-radius:var(--radius-card);
    background:var(--bg);border:1px solid var(--border);
    transition:all .3s ease;display:flex;flex-direction:column;
  }
  .test-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#CBD5E1}
  .stars{color:#F59E0B;margin-bottom:14px;letter-spacing:2px;font-size:14px}
  .test-quote{
    font-size:15.5px;color:var(--text);line-height:1.6;margin-bottom:24px;flex:1;font-weight:450;
  }
  .test-person{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--border)}
  .avatar{
    width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
    color:white;font-family:'Sora';font-weight:700;font-size:15px;
  }
  .av-1{background:linear-gradient(135deg,#1D4ED8,#38BDF8)}
  .av-2{background:linear-gradient(135deg,#10B981,#059669)}
  .av-3{background:linear-gradient(135deg,#F59E0B,#EF4444)}
  .test-name{font-weight:600;color:var(--text);font-size:14.5px;font-family:'Sora'}
  .test-role{font-size:12.5px;color:var(--body);margin-top:1px}
  .test-city{font-size:11px;color:var(--body-light);margin-top:2px}

  /* ============ PRICING PREVIEW ============ */
  .pricing-section{background:var(--bg-tint);position:relative;overflow:hidden}
  .pricing-section::before{
    content:'';position:absolute;top:0;right:0;width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle, rgba(29,78,216,.05) 0%, transparent 70%);
  }
  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:1}
  .plan{
    padding:36px 30px;border-radius:var(--radius-card);
    background:var(--surface);border:1px solid var(--border);
    transition:all .3s ease;position:relative;display:flex;flex-direction:column;
  }
  .plan:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-xl);
    background:linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 100%);
    border-color:transparent;color:white;
  }
  .plan:hover .plan-name{color:white}
  .plan:hover .plan-desc{color:rgba(255,255,255,.72)}
  .plan:hover .price-num{color:white}
  .plan:hover .price-aed{color:rgba(255,255,255,.65)}
  .plan:hover .price-per{color:rgba(255,255,255,.65)}
  .plan:hover .plan-bill-note{color:rgba(255,255,255,.5)}
  .plan:hover .plan-features li{color:rgba(255,255,255,.92)}
  .plan:hover .plan-features .ic{background:rgba(16,185,129,.2);color:#6EE7B7}
  .plan:hover .btn-secondary{
    background:white;color:var(--primary-dark);border-color:white;
  }
  .plan.featured{
    border:2px solid transparent;
  }
  .featured-tag{
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    padding:6px 14px;border-radius:999px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:white;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    box-shadow:0 4px 12px rgba(29,78,216,.35);
  }
  .plan-name{font-family:'Sora';font-weight:700;font-size:19px;color:var(--text);margin-bottom:6px;letter-spacing:-.02em}
  .plan-desc{font-size:13.5px;color:var(--body);margin-bottom:24px;min-height:38px;line-height:1.5}
  .plan-price{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
  .price-aed{font-size:14px;color:var(--body);font-weight:500}
  .price-num{font-family:'Sora';font-size:44px;font-weight:700;color:var(--text);letter-spacing:-.03em;line-height:1}
  .price-per{font-size:13.5px;color:var(--body)}
  .plan-bill-note{font-size:12px;color:var(--body-light);margin-bottom:22px}
  .plan-features{list-style:none;display:grid;gap:12px;margin-bottom:28px;flex:1}
  .plan-features li{
    display:flex;gap:10px;font-size:14px;color:var(--text);align-items:flex-start;line-height:1.45;
  }
  .plan-features .ic{
    width:18px;height:18px;border-radius:50%;background:var(--tint-emerald);color:var(--emerald);
    display:grid;place-items:center;flex-shrink:0;margin-top:1px;
  }
  .plan .btn{width:100%;justify-content:center}

  .launch-strip{
    margin-top:40px;padding:22px 28px;border-radius:16px;
    background:linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 50%, var(--primary) 100%);
    border:2px solid rgba(56,189,248,.3);
    display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
    position:relative;z-index:1;overflow:hidden;
    animation:stripGlow 3s ease-in-out infinite;
  }
  .launch-strip::before{
    content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    animation:stripShine 4s ease-in-out infinite;
  }
  @keyframes stripGlow{
    0%,100%{border-color:rgba(56,189,248,.3);box-shadow:0 0 20px rgba(29,78,216,.15)}
    50%{border-color:rgba(56,189,248,.6);box-shadow:0 0 40px rgba(29,78,216,.3)}
  }
  @keyframes stripShine{
    0%{left:-100%}
    50%{left:120%}
    100%{left:120%}
  }
  .launch-strip-tag{
    background:var(--emerald);color:white;padding:4px 10px;border-radius:999px;
    font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  }
  .launch-strip span{font-size:15.5px;color:rgba(255,255,255,.9);position:relative;z-index:1}
  .launch-strip strong{color:#FDE68A;font-weight:700}

  /* ============ FINAL CTA ============ */
  .final-cta-section{padding:80px 0 100px;background:var(--surface)}
  .final-cta{
    background:linear-gradient(135deg,var(--primary-deep) 0%, var(--primary-dark) 50%, var(--primary) 100%);
    padding:80px 40px;border-radius:32px;position:relative;overflow:hidden;text-align:center;
  }
  .final-cta::before{
    content:'';position:absolute;top:-150px;right:-150px;width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle,rgba(56,189,248,.25) 0%, transparent 70%);
  }
  .final-cta::after{
    content:'';position:absolute;bottom:-150px;left:-150px;width:500px;height:500px;border-radius:50%;
    background:radial-gradient(circle,rgba(16,185,129,.18) 0%, transparent 70%);
  }
  .final-cta > *{position:relative;z-index:1}
  .final-cta .section-eyebrow{background:rgba(56,189,248,.18);color:#BFDBFE;border-color:rgba(56,189,248,.25)}
  .final-cta h2{color:white;font-size:clamp(30px,3.6vw,44px);margin-bottom:16px;letter-spacing:-.025em}
  .final-cta p{color:#BFDBFE;font-size:17.5px;max-width:600px;margin:0 auto 32px;line-height:1.55}
  .final-cta .btn-whatsapp{background:linear-gradient(135deg, #25D366 0%, #128C7E 100%)}
  .final-cta .btn-secondary{
    background:rgba(255,255,255,.08);color:white;border-color:rgba(255,255,255,.2);backdrop-filter:blur(10px);
  }
  .final-cta .btn-secondary:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35)}
  .final-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

  /* ============ FAQ ============ */
  .faq{
    background:linear-gradient(180deg, #020617 0%, #0F172A 100%);
    color:white;
  }
  .faq .section-eyebrow{
    background:rgba(56,189,248,.12);
    border-color:rgba(56,189,248,.2);
    color:#BFDBFE;
  }
  .faq .section-eyebrow::before{background:#38BDF8}
  .faq .section-title{color:white}
  .faq .section-sub{color:#CBD5E1}
  .faq-wrap{max-width:800px;margin:0 auto}
  .faq-list{display:grid;gap:10px}
  .faq-item{
    background:rgba(15,23,42,.8);border:1px solid rgba(148,163,184,.18);
    border-radius:14px;overflow:hidden;transition:all .25s ease;
  }
  .faq-item:hover{border-color:rgba(191,219,254,.35)}
  .faq-item.open{border-color:#60A5FA;box-shadow:0 18px 32px -24px rgba(96,165,250,.45)}
  .faq-q{
    padding:20px 24px;cursor:pointer;
    display:flex;justify-content:space-between;align-items:center;gap:16px;
    font-family:'Sora';font-weight:600;font-size:15.5px;color:white;user-select:none;
  }
  .faq-toggle{
    width:28px;height:28px;border-radius:50%;
    background:rgba(29,78,216,.18);color:#93C5FD;
    display:grid;place-items:center;flex-shrink:0;
    transition:transform .3s ease;font-size:18px;font-weight:600;
  }
  .faq-item.open .faq-toggle{transform:rotate(45deg);background:#2563EB;color:white}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease}
  .faq-item.open .faq-a{max-height:400px;padding:0 24px 22px}
  .faq-a p{font-size:14.5px;color:#CBD5E1;line-height:1.65}

  /* ============ FOOTER ============ */
  footer{background:#FFFFFF;color:#475569;padding:80px 0 40px;position:relative;overflow:hidden}
  footer::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg, transparent, rgba(29,78,216,.14), rgba(56,189,248,.32), rgba(29,78,216,.14), transparent);
  }
  .footer-grid{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
    padding-bottom:50px;border-bottom:1px solid var(--border);
  }
  .footer-brand .logo{color:var(--primary-deep);margin-bottom:16px}
  .footer-brand .logo img{height:32px}
  .footer-about{font-size:14px;line-height:1.65;max-width:340px;margin-bottom:20px}
  .footer-col h5{color:var(--text);font-size:13px;margin-bottom:18px;font-family:'Sora';font-weight:600;letter-spacing:.04em;text-transform:uppercase}
  .footer-col ul{list-style:none;display:grid;gap:11px}
  .footer-col a{font-size:14px;color:#64748B;transition:color .2s ease}
  .footer-col a:hover{color:var(--primary-dark)}
  .footer-bottom{
    padding-top:28px;display:flex;justify-content:space-between;align-items:center;
    font-size:13px;flex-wrap:wrap;gap:12px;
  }
  .footer-bottom a{color:#64748B;margin-left:16px;transition:color .2s ease}
  .footer-bottom a:hover{color:var(--primary-dark)}

  /* Touch targets. These are inline text links with no vertical padding, so on
     a phone they were 15-17px tall against a 44px guideline. Padding replaces
     most of the list gap, so the visual rhythm stays close to what it was. */
  @media (max-width:860px){
    .footer-col ul{gap:0}
    .footer-col a{display:block;padding:14px 0}
    .footer-bottom a{display:inline-block;padding:15px 0}
  }

  /* Reveal on scroll */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s ease-out}
  .reveal.is-visible{opacity:1;transform:translateY(0)}
  .reveal-stagger > *{opacity:0;transform:translateY(18px);transition:opacity .55s ease-out,transform .55s ease-out}
  .reveal-stagger.is-visible > *{opacity:1;transform:translateY(0)}
  .reveal-stagger.is-visible > *:nth-child(1){transition-delay:.05s}
  .reveal-stagger.is-visible > *:nth-child(2){transition-delay:.15s}
  .reveal-stagger.is-visible > *:nth-child(3){transition-delay:.25s}
  .reveal-stagger.is-visible > *:nth-child(4){transition-delay:.35s}
  .reveal-stagger.is-visible > *:nth-child(5){transition-delay:.45s}

  /* ============ INDUSTRIES MARQUEE ============ */
  .marquee-track{
    overflow:hidden;
    mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  }
  .marquee-content{
    display:flex;gap:14px;width:max-content;
    animation:marquee 35s linear infinite;
  }
  @keyframes marquee{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
  }
  @keyframes scrollLeft{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
  }
  .ind-chip{
    display:flex;align-items:center;gap:10px;
    padding:12px 20px;border-radius:999px;
    background:rgba(255,255,255,.07);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.12);
    font-size:14px;font-weight:500;color:rgba(255,255,255,.9);
    white-space:nowrap;flex-shrink:0;
    transition:all .3s ease;
  }
  .ind-chip:hover{
    background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);
    transform:translateY(-2px);
  }
  .ind-ic{font-size:18px;line-height:1}

  /* ============ PRICING TOGGLE ============ */
  .pricing-toggle{
    display:flex;align-items:center;justify-content:center;gap:14px;
    margin-bottom:50px;
  }
  .toggle-label{
    font-size:14.5px;font-weight:600;color:var(--body);
    transition:color .25s ease;cursor:pointer;
  }
  .toggle-label.active{color:var(--text)}
  .toggle-switch{
    width:52px;height:28px;border-radius:999px;
    background:var(--border);
    position:relative;cursor:pointer;
    transition:background .25s ease;
    border:none;padding:0;
  }
  .toggle-switch.yearly{background:var(--primary)}
  .toggle-knob{
    width:22px;height:22px;border-radius:50%;
    background:white;position:absolute;top:3px;left:3px;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    transition:transform .25s ease;
  }
  .toggle-switch.yearly .toggle-knob{transform:translateX(24px)}
  .toggle-save{
    font-size:11px;font-weight:700;color:var(--emerald);
    background:var(--tint-emerald);padding:3px 8px;border-radius:999px;
    letter-spacing:.03em;
  }

  /* Featured plan dark bg */
  .plan.featured{
    background:linear-gradient(135deg, var(--primary-deep) 0%, var(--primary-dark) 100%);
    border-color:transparent;
    color:white;
    box-shadow:var(--shadow-xl);
  }
  .plan.featured .plan-name{color:white}
  .plan.featured .plan-desc{color:rgba(255,255,255,.72)}
  .plan.featured .price-num{color:white}
  .plan.featured .price-aed{color:rgba(255,255,255,.65)}
  .plan.featured .price-per{color:rgba(255,255,255,.65)}
  .plan.featured .plan-bill-note{color:rgba(255,255,255,.5)}
  .plan.featured .plan-features li{color:rgba(255,255,255,.92)}
  .plan.featured .plan-features .ic{background:rgba(16,185,129,.2);color:#6EE7B7}
  .plan.featured .featured-tag{
    background:linear-gradient(135deg,var(--emerald),var(--emerald-dark));
    box-shadow:0 4px 12px rgba(16,185,129,.4);
  }
  .plan.featured .btn-primary{
    background:white;color:var(--primary-dark);
    box-shadow:0 6px 16px -4px rgba(0,0,0,.3);
  }
  .plan.featured .btn-primary:hover{background:#F1F5F9}

  /* ============================================================
     WHY FINASHEET — Premium Section
     ============================================================ */
  .founder{background:var(--bg);padding:100px 0}
  .why-shell{
    position:relative;overflow:hidden;border-radius:28px;
    padding:60px;
    background:
      radial-gradient(ellipse at top right, rgba(59,130,246,.18) 0%, transparent 45%),
      radial-gradient(ellipse at bottom left, rgba(139,92,246,.10) 0%, transparent 50%),
      linear-gradient(160deg, #050B1F 0%, #0A1A35 50%, #0B1F3A 100%);
    box-shadow:0 40px 100px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(59,130,246,.08);
  }
  .why-glow{
    position:absolute;border-radius:50%;pointer-events:none;
    filter:blur(80px);opacity:.5;
  }
  .why-glow-1{
    width:500px;height:500px;top:-200px;right:-100px;
    background:radial-gradient(circle, rgba(59,130,246,.5), transparent 60%);
  }
  .why-glow-2{
    width:400px;height:400px;bottom:-150px;left:50%;
    background:radial-gradient(circle, rgba(139,92,246,.3), transparent 60%);
  }
  .why-grid{
    display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;
    align-items:center;position:relative;z-index:2;
  }

  /* LEFT */
  .why-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 14px;border-radius:999px;
    background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);
    color:#93C5FD;font-size:11.5px;font-weight:700;letter-spacing:.12em;
    margin-bottom:24px;
  }
  .why-eyebrow .dot{
    width:6px;height:6px;border-radius:50%;background:#60A5FA;
    box-shadow:0 0 0 3px rgba(96,165,250,.25);
    animation:pulse 2s ease-in-out infinite;
  }
  .why-headline{
    color:white;font-size:clamp(34px,3.6vw,46px);font-weight:700;
    line-height:1.1;letter-spacing:-.025em;margin-bottom:20px;
  }
  .why-accent{
    background:linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .why-sub{
    color:#CBD5F5;font-size:15.5px;line-height:1.7;
    margin-bottom:14px;max-width:480px;
  }
  .why-link{color:#60A5FA;font-weight:600}

  .why-metrics{
    display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
    margin-top:32px;padding:24px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    backdrop-filter:blur(10px);
  }
  .why-metric{display:flex;flex-direction:column;gap:4px;position:relative}
  .why-metric-ic{
    width:36px;height:36px;border-radius:10px;
    display:grid;place-items:center;margin-bottom:8px;
  }
  .why-metric strong{
    font-family:'Sora';font-size:32px;font-weight:700;
    color:white;letter-spacing:-.025em;line-height:1;
  }
  .why-metric-label{
    font-size:13px;font-weight:600;color:#60A5FA;margin-top:4px;
  }
  .why-metric-sub{
    font-size:11.5px;color:#94A3B8;line-height:1.4;margin-top:2px;
  }

  /* RIGHT VISUAL */
  .why-visual{position:relative}
  .why-visual-inner{
    position:relative;
    background:
      radial-gradient(ellipse at center, rgba(59,130,246,.08) 0%, transparent 70%),
      linear-gradient(180deg, rgba(15,23,42,.4) 0%, rgba(11,31,58,.6) 100%);
    border:1px solid rgba(59,130,246,.18);
    border-radius:20px;padding:24px;overflow:hidden;
    box-shadow:0 20px 60px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  }
  .why-sparkle{
    position:absolute;width:8px;height:8px;border-radius:50%;
    background:white;opacity:.6;
    box-shadow:0 0 12px rgba(255,255,255,.8);
    animation:sparkleFloat 4s ease-in-out infinite;
  }
  .why-sparkle.s1{top:18px;right:30px}
  .why-sparkle.s2{top:60px;right:60px;width:4px;height:4px;animation-delay:1s}
  @keyframes sparkleFloat{
    0%,100%{opacity:.4;transform:scale(1)}
    50%{opacity:.9;transform:scale(1.3)}
  }

  .why-visual-head{margin-bottom:18px;padding:0 4px}
  .why-visual-title{font-family:'Sora';color:white;font-size:15px;font-weight:600;letter-spacing:-.01em}
  .why-visual-sub{font-family:'Sora';color:white;font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:2px}

  .why-flow{
    display:grid;grid-template-columns:auto 1fr 1.4fr;
    gap:0;align-items:center;
  }

  /* Feature cards stack */
  .why-feat-stack{display:flex;flex-direction:column;gap:10px;width:175px}
  .why-feat-card{
    display:flex;align-items:center;gap:10px;
    padding:11px 12px;border-radius:11px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    transition:all .3s ease;
    animation:featSlide .6s ease-out var(--delay,0s) both;
  }
  @keyframes featSlide{
    from{opacity:0;transform:translateX(-12px)}
    to{opacity:1;transform:translateX(0)}
  }
  .why-feat-card:hover{
    background:rgba(255,255,255,.07);border-color:rgba(96,165,250,.3);
    transform:translateX(2px);
  }
  .why-feat-ic{
    width:30px;height:30px;border-radius:9px;
    display:grid;place-items:center;flex-shrink:0;
  }
  .why-feat-text{display:flex;flex-direction:column;gap:1px;min-width:0}
  .why-feat-text strong{font-family:'Sora';font-size:12.5px;font-weight:600;color:white;letter-spacing:-.005em}
  .why-feat-text span{font-size:10.5px;color:#94A3B8;line-height:1.3}

  /* Connector */
  .why-connector{
    position:relative;height:280px;width:100%;
    display:flex;align-items:center;justify-content:center;
  }
  .why-lines{position:absolute;inset:0;width:100%;height:100%}
  .why-flow-line{
    animation:dashFlow 2s linear infinite;
    animation-delay:var(--ld,0s);
  }
  @keyframes dashFlow{
    from{stroke-dashoffset:0}
    to{stroke-dashoffset:-14}
  }
  .why-core{
    position:relative;width:74px;height:74px;
    display:grid;place-items:center;z-index:2;
  }
  .why-core-ring{
    position:absolute;inset:-8px;border-radius:50%;
    border:1.5px solid rgba(96,165,250,.4);
    animation:coreRing 3s ease-in-out infinite;
  }
  @keyframes coreRing{
    0%,100%{transform:scale(1);opacity:.5}
    50%{transform:scale(1.15);opacity:.2}
  }
  .why-core-inner{
    width:64px;height:64px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, #60A5FA 0%, #1D4ED8 50%, #1E3A8A 100%);
    display:grid;place-items:center;
    box-shadow:
      0 0 30px rgba(59,130,246,.6),
      0 0 60px rgba(59,130,246,.3),
      inset 0 -2px 8px rgba(0,0,0,.3),
      inset 0 2px 4px rgba(255,255,255,.2);
    position:relative;
  }
  .why-core-logo{
    width:30px;height:auto;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
    object-fit:contain;
  }

  /* Dashboard mockup */
  .why-dashboard{
    background:linear-gradient(180deg, #0F172A 0%, #0A1228 100%);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;overflow:hidden;
    box-shadow:0 16px 40px -12px rgba(0,0,0,.6);
  }
  .why-dash-topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.02);
  }
  .why-dash-brand{display:flex;align-items:center}
  .why-dash-logo{
    height:14px;width:auto;
    filter:brightness(0) invert(1) opacity(.85);
  }
  .why-dash-controls{display:flex;align-items:center;gap:10px}
  .why-dash-period{
    font-size:10px;color:#94A3B8;display:inline-flex;align-items:center;gap:4px;
    padding:4px 8px;border-radius:6px;background:rgba(255,255,255,.04);
  }
  .why-dash-bell{
    position:relative;color:#94A3B8;display:grid;place-items:center;
  }
  .why-dash-bell i{
    position:absolute;top:-2px;right:-2px;width:5px;height:5px;
    border-radius:50%;background:#EF4444;
  }
  .why-dash-avatar{
    width:18px;height:18px;border-radius:50%;
    background:linear-gradient(135deg,#60A5FA,#1D4ED8);
    display:grid;place-items:center;color:white;
    font-size:9px;font-weight:700;font-family:'Sora';
  }

  .why-dash-body{display:grid;grid-template-columns:30px 1fr;gap:0;min-height:240px}
  .why-dash-sidebar{
    display:flex;flex-direction:column;gap:6px;padding:10px 6px;
    border-right:1px solid rgba(255,255,255,.05);align-items:center;
  }
  .why-dash-nav{
    width:24px;height:24px;border-radius:6px;
    display:grid;place-items:center;color:#64748B;
    transition:all .2s ease;
  }
  .why-dash-nav.active{
    background:rgba(59,130,246,.15);color:#60A5FA;
    border:1px solid rgba(59,130,246,.25);
  }
  .why-dash-main{padding:14px;display:flex;flex-direction:column;gap:10px}
  .why-dash-section-title{font-family:'Sora';color:white;font-size:13px;font-weight:600}

  .why-dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .why-dash-kpi{
    padding:10px;border-radius:10px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
  }
  .why-dash-kpi-label{font-size:9px;color:#94A3B8;letter-spacing:.02em}
  .why-dash-kpi-val{
    display:block;margin-top:4px;
    font-family:'Sora';font-size:13px;font-weight:700;color:white;letter-spacing:-.015em;
  }
  .why-dash-kpi-delta{
    display:block;margin-top:3px;font-size:9.5px;font-weight:600;
  }
  .why-dash-kpi-delta.up{color:#34D399}
  .why-dash-kpi-delta.down{color:#F87171}

  .why-dash-chartrow{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
  .why-dash-chart, .why-dash-pie{
    padding:10px;border-radius:10px;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  }
  .why-dash-chart-head{
    display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;
  }
  .why-dash-chart-head > span:first-child{font-size:10px;color:#94A3B8;font-weight:600}
  .why-dash-chart-tag{
    font-size:8px;color:#94A3B8;text-align:right;line-height:1.2;
    background:rgba(96,165,250,.12);padding:3px 6px;border-radius:5px;
    border:1px solid rgba(96,165,250,.2);
  }
  .why-dash-chart-tag b{color:white;font-size:9px;font-weight:700}
  .why-dash-line-svg{width:100%;height:60px;display:block}
  .why-dash-chart-axis{
    display:flex;justify-content:space-between;margin-top:4px;
    font-size:8px;color:#64748B;
  }

  .why-dash-pie-row{display:flex;align-items:center;gap:8px;margin-top:4px}
  .why-dash-pie-legend{display:flex;flex-direction:column;gap:3px}
  .why-dash-pie-legend span{font-size:8.5px;color:#94A3B8;display:flex;align-items:center;gap:5px}
  .why-dash-pie-legend i{width:6px;height:6px;border-radius:2px;display:inline-block}
  .why-dash-pie-total{
    margin-top:8px;padding-top:6px;border-top:1px solid rgba(255,255,255,.06);
  }
  .why-dash-pie-total strong{font-family:'Sora';font-size:12px;font-weight:700;color:white;display:block}
  .why-dash-pie-total span{font-size:9px;color:#94A3B8}

  /* Trust pill */
  .why-trust-pill{
    margin-top:24px;padding:16px 20px;border-radius:14px;
    background:linear-gradient(135deg, rgba(34,197,94,.08), rgba(59,130,246,.08));
    border:1px solid rgba(34,197,94,.25);
    display:flex;align-items:center;gap:14px;
    box-shadow:0 8px 24px -8px rgba(34,197,94,.2);
  }
  .why-trust-check{
    width:32px;height:32px;border-radius:50%;
    background:linear-gradient(135deg, #22C55E, #16A34A);
    display:grid;place-items:center;color:white;flex-shrink:0;
    box-shadow:0 4px 12px rgba(34,197,94,.4);
  }
  .why-trust-pill div{flex:1}
  .why-trust-pill strong{
    display:block;font-family:'Sora';font-size:14.5px;font-weight:700;color:white;
  }
  .why-trust-pill span{font-size:13px;color:#94A3B8}
  .why-trust-sparkles{flex-shrink:0}

  /* Industry strip */
  .why-industry-strip{
    margin-top:48px;padding-top:32px;
    border-top:1px solid rgba(255,255,255,.06);
    position:relative;z-index:2;
  }
  .why-industry-label{
    display:flex;align-items:center;gap:8px;
    font-size:11px;font-weight:700;letter-spacing:.12em;color:#94A3B8;
    margin-bottom:18px;
  }
  .why-industry-marquee{
    overflow:hidden;
    mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    -webkit-mask-image:linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  }
  .why-industry-track{
    display:flex;gap:12px;width:max-content;
    animation:marquee 35s linear infinite;
  }
  .why-industry-chip{
    display:flex;align-items:center;gap:8px;
    padding:10px 18px;border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:white;font-size:13px;font-weight:500;white-space:nowrap;
  }
  .why-industry-chip span{font-size:14px}

  /* Compliance line */
  .why-compliance{
    margin-top:24px;padding-top:18px;
    border-top:1px solid rgba(255,255,255,.05);
    display:flex;align-items:center;gap:8px;
    font-size:13.5px;color:#94A3B8;
    position:relative;z-index:2;
  }
  .why-shield{
    width:24px;height:24px;border-radius:7px;
    background:rgba(34,197,94,.14);
    display:grid;place-items:center;flex-shrink:0;
  }

  /* ============================================================
     SWITCHING IS SIMPLE — Premium Section
     ============================================================ */
  .migration{background:var(--bg);padding:0 0 100px}
  .migration > .container > .switch-shell{
    /* override old style if any */
  }
  .switch-shell{
    position:relative;overflow:hidden;border-radius:28px;
    padding:60px;max-width:none;margin:0 auto;
    background:
      radial-gradient(ellipse at top left, rgba(59,130,246,.14) 0%, transparent 45%),
      radial-gradient(ellipse at bottom right, rgba(56,189,248,.10) 0%, transparent 50%),
      linear-gradient(170deg, #050B1F 0%, #0A1A35 50%, #0B1F3A 100%);
    box-shadow:0 40px 100px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(59,130,246,.08);
  }
  .switch-glow{
    position:absolute;border-radius:50%;pointer-events:none;
    filter:blur(80px);opacity:.5;
  }
  .switch-glow-1{
    width:500px;height:500px;top:-200px;left:-100px;
    background:radial-gradient(circle, rgba(59,130,246,.4), transparent 60%);
  }
  .switch-glow-2{
    width:400px;height:400px;bottom:-150px;right:-100px;
    background:radial-gradient(circle, rgba(56,189,248,.3), transparent 60%);
  }
  .switch-grid{
    display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;
    align-items:center;position:relative;z-index:2;
  }

  /* LEFT */
  .switch-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 14px;border-radius:999px;
    background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.25);
    color:#93C5FD;font-size:11.5px;font-weight:700;letter-spacing:.12em;
    margin-bottom:24px;
  }
  .switch-eyebrow .dot{
    width:6px;height:6px;border-radius:50%;background:#60A5FA;
    box-shadow:0 0 0 3px rgba(96,165,250,.25);
    animation:pulse 2s ease-in-out infinite;
  }
  .switch-headline{
    color:white;font-size:clamp(34px,3.6vw,46px);font-weight:700;
    line-height:1.1;letter-spacing:-.025em;margin-bottom:20px;max-width:520px;
  }
  .switch-sub{
    color:#CBD5F5;font-size:15.5px;line-height:1.65;
    margin-bottom:24px;max-width:480px;
  }
  .switch-checklist{
    list-style:none;display:grid;gap:12px;margin-bottom:32px;
  }
  .switch-checklist li{
    display:flex;align-items:center;gap:12px;
    color:white;font-size:14.5px;font-weight:500;
  }
  .switch-check{
    width:22px;height:22px;border-radius:50%;
    background:linear-gradient(135deg, #60A5FA, #3B82F6);
    display:grid;place-items:center;flex-shrink:0;
    box-shadow:0 4px 10px rgba(59,130,246,.3);
  }
  .switch-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px}
  .switch-btn-primary{
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 22px;border-radius:12px;
    background:linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color:white;font-size:14.5px;font-weight:600;text-decoration:none;
    box-shadow:
      0 8px 24px -6px rgba(59,130,246,.6),
      0 0 0 1px rgba(96,165,250,.3),
      inset 0 1px 0 rgba(255,255,255,.2);
    transition:all .25s ease;
  }
  .switch-btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px -6px rgba(59,130,246,.7), 0 0 0 1px rgba(96,165,250,.5);
  }
  .switch-btn-ghost{
    display:inline-flex;align-items:center;gap:8px;
    padding:13px 22px;border-radius:12px;
    background:rgba(255,255,255,.06);color:white;font-size:14.5px;font-weight:600;
    text-decoration:none;border:1px solid rgba(255,255,255,.12);
    transition:all .25s ease;
  }
  .switch-btn-ghost:hover{
    background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);
  }
  .switch-trust-line{
    display:flex;align-items:center;gap:12px;
    color:#94A3B8;font-size:13.5px;
  }
  .switch-avatars{display:flex}
  .sw-av{
    width:28px;height:28px;border-radius:50%;
    display:grid;place-items:center;color:white;
    font-size:11px;font-weight:700;font-family:'Sora';
    border:2px solid #0B1F3A;margin-left:-8px;
  }
  .sw-av:first-child{margin-left:0}

  /* RIGHT VISUAL */
  .switch-visual-v2{position:relative}

  /* 3 numbered steps */
  .sw-steps{
    display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
    margin-bottom:24px;
  }
  .sw-step{display:flex;align-items:center;gap:10px}
  .sw-step-num{
    width:28px;height:28px;border-radius:50%;flex-shrink:0;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.14);
    display:grid;place-items:center;
    color:white;font-size:13px;font-weight:700;font-family:'Sora';
  }
  .sw-step-text{display:flex;flex-direction:column;gap:1px;min-width:0}
  .sw-step-text strong{font-family:'Sora';font-size:13px;font-weight:600;color:white}
  .sw-step-text span{font-size:11px;color:#94A3B8}

  /* Flow */
  .sw-flow{
    position:relative;
    display:grid;grid-template-columns:auto 1fr 1.3fr;
    align-items:center;gap:0;
    padding:24px;border-radius:18px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.06);
    overflow:hidden;
  }

  .sw-sources{display:flex;flex-direction:column;gap:10px;width:170px}
  .sw-source-card{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:11px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    animation:sourceFloat 3s ease-in-out infinite;
    animation-delay:var(--delay,0s);
  }
  @keyframes sourceFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-3px)}
  }
  .sw-source-ic{
    width:30px;height:30px;border-radius:8px;
    display:grid;place-items:center;flex-shrink:0;
    box-shadow:0 4px 10px rgba(0,0,0,.3);
  }
  .sw-source-text{display:flex;flex-direction:column;gap:1px}
  .sw-source-text strong{font-family:'Sora';font-size:12.5px;font-weight:600;color:white}
  .sw-source-text span{font-size:10.5px;color:#94A3B8}

  /* Connecting lines */
  .sw-connect-lines{
    position:absolute;top:24px;left:194px;width:90px;height:calc(100% - 48px);
    pointer-events:none;
  }
  .sw-line{
    animation:dashFlow 2s linear infinite;
    animation-delay:var(--ld,0s);
  }

  /* Gear core */
  .sw-gear-wrap{
    position:relative;
    display:flex;flex-direction:column;align-items:center;
    justify-content:center;
    gap:14px;justify-self:center;align-self:stretch;
    padding:0 16px;
  }
  .sw-gear-core{
    position:relative;
    width:64px;height:64px;
    display:grid;place-items:center;
  }
  .sw-gear-rings{
    position:absolute;
    top:50%;left:50%;
    width:0;height:0;
    pointer-events:none;
  }
  .sw-gear-ring{
    position:absolute;border-radius:50%;
    border:1.5px solid rgba(96,165,250,.3);
    top:50%;left:50%;
    transform:translate(-50%, -50%);
  }
  .sw-gear-ring.r1{
    width:100px;height:100px;
    animation:ringExpand 3s ease-in-out infinite;
  }
  .sw-gear-ring.r2{
    width:130px;height:130px;
    animation:ringExpand 3s ease-in-out infinite .8s;
  }
  @keyframes ringExpand{
    0%,100%{transform:translate(-50%, -50%) scale(.85);opacity:.6}
    50%{transform:translate(-50%, -50%) scale(1);opacity:.2}
  }
  .sw-gear{
    width:64px;height:64px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, #60A5FA 0%, #1D4ED8 50%, #1E3A8A 100%);
    display:grid;place-items:center;color:white;
    box-shadow:
      0 0 30px rgba(59,130,246,.6),
      0 0 60px rgba(59,130,246,.3),
      inset 0 -2px 8px rgba(0,0,0,.3),
      inset 0 2px 4px rgba(255,255,255,.2);
    position:relative;z-index:2;
  }
  .sw-gear svg{animation:gearSpin 8s linear infinite}
  @keyframes gearSpin{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
  }
  .sw-gear-label{
    text-align:center;position:relative;z-index:2;
    margin-top:8px;
  }
  /* The connecting lines converge on the wrap's exact vertical centre. With the
     label in flow, centring the gear+label pair pushes the gear ~47px above that
     point, so the lines aim at empty space. Above 860px (where the lines are
     visible) take the label out of flow so the gear itself sits on the centre.
     Below 860px the lines are display:none and the stacked layout is correct. */
  @media (min-width:861px){
    .sw-gear-label{
      position:absolute;
      top:calc(50% + 54px);
      left:0;right:0;
      margin-top:0;
    }
  }
  .sw-gear-label strong{
    display:block;font-family:'Sora';font-size:13px;font-weight:600;color:white;
  }
  .sw-gear-label span{font-size:11px;color:#94A3B8}

  /* Final dashboard */
  .sw-dashboard{
    background:white;
    border-radius:12px;overflow:hidden;
    box-shadow:0 20px 50px -15px rgba(0,0,0,.7);
    margin-left:auto;width:100%;max-width:300px;
  }
  .sw-dash-top{
    padding:8px 12px;border-bottom:1px solid #E2E8F0;
    background:#F8FAFC;
  }
  .sw-dash-brand{
    font-family:'Sora';font-size:9.5px;font-weight:800;color:#0F172A;
    letter-spacing:.08em;
  }
  .sw-dash-body{display:grid;grid-template-columns:24px 1fr;min-height:200px}
  .sw-dash-side{
    display:flex;flex-direction:column;gap:4px;padding:8px 4px;
    border-right:1px solid #E2E8F0;align-items:center;
    background:#F8FAFC;
  }
  .sw-dash-side-ic{
    width:18px;height:18px;border-radius:5px;
    display:grid;place-items:center;color:#94A3B8;
  }
  .sw-dash-side-ic.active{background:#DBEAFE;color:#1D4ED8}
  .sw-dash-content{padding:10px;display:flex;flex-direction:column;gap:8px}
  .sw-dash-head{display:flex;justify-content:space-between;align-items:center}
  .sw-dash-title{font-family:'Sora';font-size:11px;font-weight:700;color:#0F172A}
  .sw-dash-period{
    font-size:8.5px;color:#64748B;display:inline-flex;align-items:center;gap:3px;
    padding:3px 6px;border-radius:5px;background:#F1F5F9;
  }
  .sw-dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
  .sw-dash-card{
    padding:7px;border-radius:7px;background:#F8FAFC;
    border:1px solid #E2E8F0;
  }
  .sw-dash-card span{font-size:7.5px;color:#64748B;font-weight:600}
  .sw-dash-card strong{display:block;margin-top:2px;font-family:'Sora';font-size:9.5px;font-weight:700;color:#0F172A}
  .sw-dash-card em{display:block;margin-top:1px;font-size:7.5px;font-weight:700;font-style:normal}
  .sw-dash-card em.up{color:#059669}
  .sw-dash-card em.down{color:#DC2626}

  .sw-dash-bottom{display:grid;grid-template-columns:1.4fr 1fr;gap:6px}
  .sw-dash-cashflow, .sw-dash-pie{
    padding:8px;border-radius:7px;background:#F8FAFC;
    border:1px solid #E2E8F0;
  }
  .sw-dash-cf-head span{font-size:8px;color:#64748B;font-weight:600}
  .sw-dash-axis{display:flex;justify-content:space-between;margin-top:2px;font-size:6.5px;color:#94A3B8}
  .sw-dash-pie-row{display:flex;align-items:center;gap:6px;margin-top:4px}
  .sw-dash-pie-leg{display:flex;flex-direction:column;gap:2px}
  .sw-dash-pie-leg span{font-size:7.5px;color:#475569;display:flex;align-items:center;gap:4px}
  .sw-dash-pie-leg i{width:5px;height:5px;border-radius:1px;display:inline-block}

  /* System Ready badge */
  .sw-system-ready{
    margin-top:24px;padding:16px 20px;border-radius:14px;
    background:linear-gradient(135deg, rgba(34,197,94,.1), rgba(59,130,246,.08));
    border:1px solid rgba(34,197,94,.3);
    display:flex;align-items:center;gap:14px;
    box-shadow:0 8px 24px -8px rgba(34,197,94,.25);
  }
  .sw-ready-check{
    width:34px;height:34px;border-radius:50%;
    background:linear-gradient(135deg, #22C55E, #16A34A);
    display:grid;place-items:center;color:white;flex-shrink:0;
    box-shadow:0 4px 12px rgba(34,197,94,.5);
  }
  .sw-system-ready div{flex:1}
  .sw-system-ready strong{
    display:block;font-family:'Sora';font-size:15px;font-weight:700;color:white;
  }
  .sw-system-ready span{font-size:13px;color:#94A3B8}

  /* Bottom security note */
  .switch-bottom-note{
    margin-top:24px;padding-top:18px;
    border-top:1px solid rgba(255,255,255,.05);
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:13px;color:#94A3B8;
    position:relative;z-index:2;
  }
  .switch-lock{
    width:22px;height:22px;border-radius:6px;
    background:rgba(148,163,184,.1);
    display:grid;place-items:center;flex-shrink:0;
  }

  @keyframes pulse{
    0%,100%{opacity:1}
    50%{opacity:.6}
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width:1100px){
    .hero-grid{grid-template-columns:1fr;gap:60px}
    .hero-visual{height:480px;max-width:560px;margin:0 auto}
    /* minmax(0,1fr), not 1fr: a 1fr track has an automatic min-content floor,
       so the feature mockups forced the track to 338px inside a 272px container
       and pushed the whole document to 361px wide on a 320px screen. */
    .feat-row{grid-template-columns:minmax(0,1fr);gap:40px;margin-bottom:90px}
    .feat-row.reverse{direction:ltr}
    .story-shell,.switch-card,.why-shell,.switch-shell{padding:40px}
    .story-grid,.switch-grid,.why-grid{grid-template-columns:1fr;gap:40px}
    .story-stage{grid-template-columns:1fr;gap:22px}
    .story-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
    .story-node-wrap::before,.story-node-wrap::after{display:none}
    .fta-wrap{grid-template-columns:1fr;text-align:center;gap:20px}
    .fta-seal{margin:0 auto}
    .proof-strip-inner{grid-template-columns:1fr;gap:30px}
    .proof-logos{width:100%;max-width:100%;margin:0 auto}
    .nav-promo{display:none}
    /* New Why Finasheet flow */
    .why-flow{grid-template-columns:auto 60px 1fr;gap:0}
    .why-feat-stack{width:160px}
    .why-connector{height:240px}
    /* New Switching flow */
    .sw-flow{grid-template-columns:auto auto 1fr;gap:0;padding:20px}
    .sw-sources{width:155px}
    .sw-dashboard{max-width:none}
    .sw-connect-lines{left:174px;width:70px}
  }
  @media (max-width:860px){
    .nav-links{display:none}
    .nav-login{display:none}
    /* Primary mobile control: the button box is ~36x36, under the 44px touch
       guideline. The nav row is already at capacity below 375px (the CTA button
       shrinks to fit), so anything that changes this button's footprint pushes
       the row into overflow - min-width blocks flex-shrink, and negative margins
       still alter what the flex algorithm sees.
       An absolutely positioned pseudo-element takes no layout space at all but
       still hit-tests as part of the button, so the tap area becomes 44x44 with
       the rendered layout completely unchanged. */
    .mobile-toggle{display:block;position:relative}
    .mobile-toggle::after{
      content:'';
      position:absolute;
      top:50%;left:50%;
      transform:translate(-50%,-50%);
      width:44px;height:44px;
    }
    .problem-list,.who-grid,.pricing-grid{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
    .proof-stats{gap:24px}
    .proof-stat-num{font-size:24px}
    .story-metrics{display:grid;grid-template-columns:1fr 1fr}
    /* Stack Why Finasheet flow vertically on tablet */
    .why-flow{grid-template-columns:1fr;gap:24px}
    .why-feat-stack{width:100%;flex-direction:row;flex-wrap:wrap}
    .why-feat-card{flex:1 1 calc(50% - 5px);min-width:140px}
    /* The rotate here was meant to lay the connecting lines out horizontally,
       but .why-lines is hidden at this breakpoint, so its only remaining effect
       was tipping the F badge on its side. */
    .why-connector{height:60px}
    .why-lines{display:none}
    .why-metrics{grid-template-columns:repeat(3,1fr);gap:10px;padding:18px}
    .why-metric strong{font-size:26px}
    /* Stack Switching flow vertically on tablet */
    .sw-flow{grid-template-columns:1fr;gap:20px}
    .sw-sources{width:100%;flex-direction:row;flex-wrap:wrap}
    .sw-source-card{flex:1 1 calc(50% - 5px);min-width:130px}
    .sw-connect-lines{display:none}
    .sw-gear-wrap{margin:0 auto}
    .sw-dashboard{max-width:400px;margin:0 auto}
    .sw-steps{grid-template-columns:1fr;gap:10px}
  }
  @media (max-width:620px){
    section{padding:70px 0}
    .hero{padding:50px 0 70px}
    .logo img{height:28px}
    .hero-visual{height:auto;min-height:auto;display:flex;flex-direction:column;gap:14px}
    .hv-main,.hv-float-1,.hv-float-2,.hv-float-3{
      position:relative;top:auto;left:auto;right:auto;bottom:auto;width:100%;
    }
    .hv-pill{display:none}
    .problem-list,.who-grid,.pricing-grid{grid-template-columns:1fr}
    .hero-cta{flex-direction:column;width:100%}
    .hero-cta .btn{width:100%}
    .switch-card,.story-shell,.why-shell,.switch-shell{padding:28px 22px;border-radius:20px}
    .final-cta{padding:50px 24px;border-radius:20px}
    .plan.featured{transform:none}
    .footer-grid{grid-template-columns:1fr 1fr}
    h1.hero-headline{font-size:36px}
    .hero-proof{grid-template-columns:1fr}
    .proof-divider{display:none}
    .announcement-inner{font-size:12px}
    .proof-strip-inner{gap:20px}
    .proof-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
    .proof-stat-num{font-size:20px}
    .proof-stat-label{font-size:11.5px}
    .proof-marquee-content{gap:10px;animation-duration:22s}
    .proof-logos .ind-chip{padding:10px 14px;font-size:12px}
    .proof-logos .ind-chip .ind-ic{width:24px;height:24px;font-size:13px}
    .story-metrics,.story-rail,.switch-actions,.story-dash-kpis{grid-template-columns:1fr}
    .switch-actions{display:grid}
    .switch-actions .btn{width:100%}
    /* New sections mobile */
    .why-metrics{grid-template-columns:1fr;gap:12px}
    .why-metric{flex-direction:row;align-items:center;flex-wrap:wrap}
    .why-metric-ic{margin-bottom:0}
    .why-metric strong{font-size:24px}
    .why-feat-stack{flex-direction:column}
    .why-feat-card{flex:none;width:100%}
    .why-dash-kpis,.sw-dash-cards{grid-template-columns:1fr 1fr}
    .why-dash-chartrow,.sw-dash-bottom{grid-template-columns:1fr}
    .why-trust-pill,.sw-system-ready{padding:14px 16px}
    .why-trust-pill strong,.sw-system-ready strong{font-size:13.5px}
    .why-trust-pill span,.sw-system-ready span{font-size:12px}
    .why-headline,.switch-headline{font-size:28px}
    .sw-steps{grid-template-columns:1fr}
    .sw-sources{flex-direction:column}
    .sw-source-card{width:100%}
    .switch-btn-primary,.switch-btn-ghost{width:100%;justify-content:center}
    .setup-dashboard{
      position:relative;top:auto;right:auto;width:100%;margin-top:190px;
    }
    .setup-core{left:50%;top:168px}
    .setup-ready{position:relative;right:auto;bottom:auto;margin-top:16px;display:inline-flex}
    .test-card{width:300px;flex-basis:300px}
    .footer-brand .logo img{height:28px}
  }

  /* Very narrow phones (320-373px: older iPhone SE, older Androids).
     The nav row cannot fit logo + "Talk to our team" + menu button inside a
     24px-padded 320px viewport - the CTA bottoms out at its text width - so the
     row overhung the viewport and the page scrolled sideways. Trimming the
     container padding and the nav gap gives back exactly enough, and the CTA
     keeps its label. */
  @media (max-width:373px){
    .container{padding:0 16px}
    .nav-inner{gap:10px}
  }