:root{
  --bg:#0b1320; --bg-2:#0f1a2d; --ink:#0e2a42; --surface:#ffffff; --muted:#f5f7fb;
  --text:#121826; --text-2:#4b5563; --text-inv:#f8fafc; --primary:#173b5a; --accent:#e31b23; --accent-ink:#9b1118;
  --ok:#22c55e; --danger:#ef4444; --radius:18px; --radius-lg:24px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --max:1152px; --focus: 0 0 0 3px rgba(227,27,35,.45);
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text);
     background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 40%, #111827 100%);}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--max); margin:auto; padding:0 24px}
.btn{display:inline-block; padding:14px 22px; border-radius:12px; font-weight:600; transition:.2s ease;}
.btn:focus{outline:none; box-shadow:var(--focus)}
.btn.primary{background:var(--accent); color:#111827; box-shadow:0 8px 20px rgba(227,27,35,.35)}
.btn.primary:hover{background:var(--accent-ink); color:#fff; transform:translateY(-1px)}
.btn.ghost{border:1px solid rgba(255,255,255,.35); color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(10px);
  background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.65)); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px; color:#fff}
.brand-logo-img{height:36px; display:block}
.logo-dark{display:none}
@media (prefers-color-scheme: light){ .logo-dark{display:block} .logo-light{display:none} }
@media (prefers-color-scheme: dark){ .logo-dark{display:none} .logo-light{display:block} }
.nav-menu{display:flex; gap:22px}
.nav-menu a{color:#e5e7eb; font-weight:600}
.nav-menu a.active{color:#fff; border-bottom:2px solid var(--accent)}
.menu-btn{display:none; align-items:center; gap:8px; color:#fff; border:1px solid rgba(255,255,255,.25); padding:8px 12px; border-radius:12px; background:transparent}
.menu-btn:hover{background:rgba(255,255,255,.08)}

/* Hero */
.hero{position:relative; isolation:isolate; padding:80px 0 60px}
.hero::before{content:""; position:absolute; inset:0; background:radial-gradient(1200px 600px at 20% -10%, rgba(47,88,133,.35), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(227,27,35,.15), transparent 55%); z-index:-1}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.kicker{display:inline-flex; align-items:center; gap:8px; padding:6px 12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); color:#4b5563; border-radius:999px; font-size:13px}
.hero h1{font-family:Montserrat, sans-serif; color:#fff; font-size:48px; line-height:1.1; margin:14px 0; text-shadow:0 2px 4px rgba(0,0,0,.5)}
.hero p{color:#1e293b; font-size:18px; max-width:62ch; font-weight:400}
.hero-actions{display:flex; gap:12px; margin-top:22px}
.hero-card{background:#ffffff; border:1px solid #e5e7eb; border-radius:var(--radius-lg); padding:24px; color:#1e293b; box-shadow:var(--shadow)}
.hero-card h3{margin:0 0 6px; color:#111827}
.hero-media{position:relative}
.hero-img{border-radius:20px; border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 45px rgba(0,0,0,.35)}

/* Sections */
section{padding:70px 0; background:#fff}
section.muted{background:var(--muted)}
section.dark{background:#0b1320; color:#cbd5e1}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:26px}
.section-head h2{font-family:Montserrat, sans-serif; font-size:32px; margin:0}
.section-head p{color:var(--text-2); margin:6px 0 0}

/* Grids */
.features{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.grid-4{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}

/* Cards */
.card{background:var(--surface); border:1px solid #e9eef5; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card h3{margin:12px 0 6px}
.chip{display:inline-flex; align-items:center; gap:8px; font-size:12px; padding:5px 10px; border-radius:999px; background:#eef7f2; color:#146c43}
.thumb{height:170px; border-radius:14px; background:linear-gradient(135deg, #dbeafe, #fef3c7); border:1px solid #e7edf7}

/* Utilities */
.section-figure{margin:0 0 24px 0}
.section-figure img{width:100%; height:auto; border-radius:16px; border:1px solid #e9eef5; box-shadow:var(--shadow)}

/* CTA */
.cta{background:linear-gradient(135deg, var(--primary), var(--ink)); color:#e5e7eb; border-radius:24px; padding:30px; display:flex; align-items:center; justify-content:space-between; gap:18px; box-shadow:0 18px 48px rgba(0,0,0,.18)}
.cta h3{color:#fff; margin:0 0 6px}

/* Footer */
footer{background:#0b1320; color:#94a3b8; padding:30px 0; border-top:1px solid rgba(255,255,255,.08)}
.foot{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px}
.foot h4{color:#e2e8f0; margin:0 0 10px}
.foot a{color:#cbd5e1}
.credits{margin-top:18px; font-size:14px; color:#94a3b8}

/* Form */
form{display:grid; gap:12px}
input, textarea{width:100%; padding:12px 14px; border:1px solid #d6dbe6; border-radius:12px; font:inherit}
input:focus, textarea:focus{outline:none; box-shadow:var(--focus)}
label{font-weight:600}

/* === Animations Upgrade === */
@media (prefers-reduced-motion: no-preference) {
  body { opacity: 0; transform: translateY(4px); animation: bodyIn .5s ease-out forwards; }
  @keyframes bodyIn { to { opacity: 1; transform: translateY(0); } }
  .hero::before { animation: heroGlow 16s ease-in-out infinite; background-size: 200% 200%; }
  @keyframes heroGlow { 0%,100% { filter: saturate(110%) brightness(1); transform: translate3d(0,0,0) scale(1); } 50% { filter: saturate(130%) brightness(1.05); transform: translate3d(0,-1%,0) scale(1.02); } }
  .reveal { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
  .reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
  .hero-img { transform: translateY(0); animation: floaty 8s ease-in-out infinite; }
  @keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
  .card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.12); border-color: rgba(227,27,35,.35); }
  .btn { position: relative; overflow: hidden; }
  .btn.primary::after { content:""; position:absolute; top:0; left:-120%; width:120%; height:100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%); transform: skewX(-20deg); }
  .btn.primary:hover::after { animation: shine .8s ease; }
  @keyframes shine { from { left:-120%; } to { left:120%; } }
  .nav-menu a { position:relative; }
  .nav-menu a::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background: var(--accent); transition: width .25s ease; }
  .nav-menu a:hover::after, .nav-menu a.active::after { width:100%; }
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  .nav-menu{display:none}
  .menu-btn{display:flex}
  .hero h1{font-size:36px}
  .features,.grid-4,.grid-3{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .cta{flex-direction:column; text-align:center}
}

.kpi{font-family:Montserrat, sans-serif; font-size:44px; font-weight:700; color:#0b1320}
.brand-marquee{position:relative; overflow:hidden; border-radius:14px; border:1px solid #e9eef5; background:#fff}
.brand-marquee .track{display:flex; gap:40px; padding:16px 20px; white-space:nowrap; animation: marquee 22s linear infinite}
.brand-marquee .track span{opacity:.8; font-weight:600; letter-spacing:.2px}
.brand-marquee:hover .track{animation-play-state: paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}