:root{
  --bg:#08111f; --bg-2:#0f1b2d; --panel:#101c2f; --panel-2:#13233b; --text:#e8eef8; --muted:#aab7cc;
  --line:rgba(255,255,255,.10); --primary:#2dd4bf; --primary-2:#14b8a6; --accent:#60a5fa; --white:#ffffff;
  --shadow:0 18px 60px rgba(0,0,0,.28); --radius:22px; --radius-sm:14px; --max:1200px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
  background: radial-gradient(circle at top right, rgba(96,165,250,.12), transparent 35%),
              radial-gradient(circle at top left, rgba(45,212,191,.08), transparent 25%),
              linear-gradient(180deg, #08111f 0%, #0b1423 100%);
  line-height:1.65;
}
h1,h2,h3,h4,h5,h6{margin:0 0 .5rem; line-height:1.14; letter-spacing:-.02em; font-family:Manrope,Inter,system-ui,sans-serif}
p{margin:.3rem 0 1rem;color:var(--muted)} a{color:inherit;text-decoration:none} img{max-width:100%}
.container{width:min(var(--max),calc(100% - 40px));margin:auto}
.section{padding:88px 0}.section-sm{padding:60px 0}
.grid{display:grid;gap:24px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03)); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.card.soft{box-shadow:none;background:rgba(255,255,255,.03)}
.kicker{display:inline-block;padding:8px 14px;border:1px solid rgba(45,212,191,.25);border-radius:999px;color:#c8fff6;background:rgba(45,212,191,.08);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase}
.mini-kicker{color:#91f3e6;font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;margin-bottom:12px}
.lead{font-size:1.12rem;max-width:760px}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:999px;border:1px solid transparent;font-weight:700;transition:.25s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent));color:#07111d}
.btn-secondary{background:rgba(255,255,255,.04);color:var(--white);border-color:var(--line)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.18)}
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(8,17,31,.65);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:24px}
.logo{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:.18em}
.logo small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.22em;color:var(--muted)}
.nav-links{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.nav-links a{color:#dde8f6;font-size:.96rem}.nav-links a:hover{color:#9ee8de}
.hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg, rgba(8,17,31,.95), rgba(8,17,31,.78) 48%, rgba(14,165,233,.18)),radial-gradient(circle at 80% 20%, rgba(96,165,250,.24), transparent 24%),linear-gradient(120deg, rgba(45,212,191,.10), transparent 30%)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;min-height:700px;align-items:center}
.hero h1{font-size:clamp(2.7rem,5vw,5rem);max-width:900px}.hero p{font-size:1.14rem;max-width:760px}
.glass{background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);border-radius:30px;padding:28px;box-shadow:var(--shadow)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.stat{border:1px solid var(--line);border-radius:18px;padding:18px;background:rgba(255,255,255,.03)}
.stat strong{display:block;font-size:1.25rem;color:#fff}
.trust-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}
.trust-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;padding:18px 0;color:#bac7da;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;text-align:center}
.split{display:grid;grid-template-columns:.95fr 1.05fr;gap:28px;align-items:center}
.checks{display:grid;gap:14px;margin-top:18px}
.check{padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03)}
.band{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.map-panel{min-height:360px;background:radial-gradient(circle at 25% 32%, rgba(45,212,191,.18), transparent 18%),radial-gradient(circle at 62% 40%, rgba(96,165,250,.18), transparent 18%),radial-gradient(circle at 78% 62%, rgba(45,212,191,.18), transparent 18%),linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03))}
.process-step{display:flex;gap:16px;align-items:flex-start}
.step-num{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(90deg,var(--primary),var(--accent));color:#07111d;font-weight:800;flex:0 0 42px}
.quote-box{background:linear-gradient(135deg, rgba(45,212,191,.14), rgba(96,165,250,.10));border:1px solid rgba(45,212,191,.18)}
.footer{border-top:1px solid var(--line);padding:28px 0 40px}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr;gap:24px}
.footer h4{font-size:1rem;margin-bottom:12px}.footer a,.footer p{color:#b7c5d8;font-size:.95rem}
.hero-mini{padding:72px 0 48px;border-bottom:1px solid var(--line);background:linear-gradient(135deg, rgba(8,17,31,.96), rgba(8,17,31,.82) 58%, rgba(14,165,233,.12)),radial-gradient(circle at 84% 20%, rgba(96,165,250,.18), transparent 25%)}
.page-title{font-size:clamp(2.3rem,4vw,4rem);max-width:900px}.breadcrumb{color:#9eb1ca;font-size:.92rem;margin-bottom:14px}
.feature-list{display:grid;gap:10px;padding-left:0;list-style:none}
.feature-list li{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.cta-banner{padding:34px;border-radius:28px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(96,165,250,.10));display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.table-like{display:grid;gap:12px}.table-row{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
.mega{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pill{padding:12px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);text-align:center}
.link-list{display:grid;gap:10px}.link-list a{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)} .link-list a:hover{border-color:rgba(45,212,191,.28);color:#cffff4}
.subnav{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.subnav a{padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:.92rem}
.note{font-size:.92rem;color:#c7d4e5}
@media (max-width: 980px){.hero-grid,.split,.two,.three,.four,.footer-grid,.table-row,.trust-grid,.mega,.pill-grid{grid-template-columns:1fr}.nav{padding:14px 0}.nav-links{display:none}.hero{padding-bottom:24px}.stats{grid-template-columns:1fr}}


/* Motion and interactive enhancements */
:root{
  --glow: 0 0 0 rgba(0,0,0,0);
}
body{overflow-x:hidden}
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease}
.reveal.in-view{opacity:1; transform:none}
.float-slow{animation:floatY 7s ease-in-out infinite}
.float-mid{animation:floatY 5.5s ease-in-out infinite}
.float-fast{animation:floatY 4.5s ease-in-out infinite}
.spin-slow{animation:spinSlow 20s linear infinite}
.marquee-wrap{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.025)}
.marquee{display:flex; gap:18px; min-width:max-content; padding:14px 0; animation:marquee 26s linear infinite}
.marquee span{
  padding:10px 16px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.04); color:#dbe8f7; font-size:.88rem; white-space:nowrap
}
.hero-orb{
  position:absolute; border-radius:50%; filter:blur(10px); opacity:.55; pointer-events:none
}
.hero-orb.one{width:260px; height:260px; right:8%; top:14%; background:radial-gradient(circle, rgba(45,212,191,.35), transparent 65%)}
.hero-orb.two{width:220px; height:220px; right:22%; bottom:12%; background:radial-gradient(circle, rgba(96,165,250,.30), transparent 65%)}
.hero-orb.three{width:180px; height:180px; left:4%; top:16%; background:radial-gradient(circle, rgba(255,255,255,.09), transparent 65%)}
.slider{
  position:relative; min-height:220px; border:1px solid rgba(255,255,255,.14);
  border-radius:26px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}
.slide{
  position:absolute; inset:0; padding:28px;
  opacity:0; transform:translateX(20px) scale(.985);
  transition:opacity .6s ease, transform .6s ease;
}
.slide.active{opacity:1; transform:none}
.slide-badge{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:rgba(45,212,191,.10); border:1px solid rgba(45,212,191,.22);
  color:#cafff6; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase
}
.slider-dots{display:flex; gap:8px; margin-top:18px}
.slider-dot{
  width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.26); cursor:pointer; transition:.2s ease
}
.slider-dot.active{background:linear-gradient(90deg,var(--primary),var(--accent)); transform:scale(1.15)}
.metric-strip{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:18px
}
.metric-pill{
  padding:14px 16px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.04)
}
.metric-pill strong{display:block; font-size:1.08rem; color:#fff}
.floating-tags{position:relative; min-height:280px}
.floating-tag{
  position:absolute; padding:10px 14px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:#dff8f2; backdrop-filter:blur(10px); box-shadow:var(--shadow)
}
.floating-tag.t1{top:8%; left:4%}
.floating-tag.t2{top:24%; right:8%}
.floating-tag.t3{top:48%; left:14%}
.floating-tag.t4{bottom:18%; right:16%}
.floating-tag.t5{bottom:6%; left:34%}
.image-panel{
  position:relative; min-height:420px; border:1px solid var(--line); border-radius:30px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03))
}
.image-panel img{
  width:100%; height:100%; object-fit:cover; display:block; opacity:.84;
  transform:scale(1.03); transition:transform 1.2s ease, opacity .6s ease
}
.image-panel:hover img{transform:scale(1.08); opacity:.95}
.image-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,17,31,.05), rgba(8,17,31,.65) 70%, rgba(8,17,31,.88))
}
.image-caption{
  position:absolute; left:24px; right:24px; bottom:24px;
  border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:18px;
  background:rgba(8,17,31,.45); backdrop-filter:blur(10px)
}
.flow-line{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:22px
}
.flow-line::before{
  content:""; position:absolute; left:9%; right:9%; top:28px; height:2px;
  background:linear-gradient(90deg, rgba(45,212,191,.25), rgba(96,165,250,.45), rgba(45,212,191,.25))
}
.flow-step{
  position:relative; z-index:1; padding-top:0
}
.flow-dot{
  width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(90deg,var(--primary),var(--accent)); color:#07111d; font-weight:800;
  box-shadow:0 10px 35px rgba(45,212,191,.18)
}
.flow-card{
  margin-top:14px; padding:18px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.04)
}
.section-glow{
  position:relative; isolation:isolate
}
.section-glow::before{
  content:""; position:absolute; inset:auto 0 0 0; height:280px; z-index:-1;
  background:radial-gradient(circle at center, rgba(45,212,191,.08), transparent 60%)
}
@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes spinSlow{
  from{transform:rotate(0)} to{transform:rotate(360deg)}
}
@keyframes marquee{
  from{transform:translateX(0)} to{transform:translateX(-50%)}
}
@media (max-width: 980px){
  .metric-strip,.flow-line{grid-template-columns:1fr}
  .flow-line::before{display:none}
  .floating-tags{min-height:220px}
  .image-panel{min-height:340px}
}