:root { color: #17243a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; background: #0d376d; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { min-width: 320px; margin: 0; }
.landing { position: relative; display: grid; width: 100%; height: 100dvh; overflow: hidden; place-items: center; padding: clamp(16px, 3vw, 32px); background: linear-gradient(135deg, #0b315f 0%, #123f79 58%, #19569a 100%); }
.landing::before { position: absolute; inset: 0; background: linear-gradient(125deg, transparent 0 47%, rgb(255 255 255 / 5%) 47% 48%, transparent 48%); content: ""; }
.orb { position: absolute; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; }
.orb-one { top: -25vw; right: -13vw; width: 57vw; height: 57vw; }
.orb-two { bottom: -34vw; left: -16vw; width: 66vw; height: 66vw; }
.landing-panel { position: relative; display: grid; width: min(1040px, 100%); height: min(700px, calc(100dvh - clamp(32px, 6vw, 64px))); min-height: 430px; grid-template-rows: auto 1fr auto; overflow: hidden; border: 1px solid rgb(255 255 255 / 22%); border-radius: 18px; padding: clamp(22px, 4vw, 48px); background: rgb(255 255 255 / 96%); box-shadow: 0 30px 80px rgb(2 18 42 / 28%); }
.landing-panel::after { position: absolute; right: 0; bottom: 0; width: 145px; height: 5px; background: #9d1717; content: ""; }
.landing-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-block { display: flex; align-items: center; gap: 13px; }
.brand-logo { width: clamp(48px, 6vw, 64px); height: clamp(48px, 6vw, 64px); border-radius: 7px; padding: 5px; background: #fff; box-shadow: 0 1px 5px rgb(4 19 44 / 18%); object-fit: contain; }
.brand-copy { display: grid; color: #254d95; font-size: clamp(12px, 1.5vw, 15px); font-weight: 800; line-height: 1.08; letter-spacing: .055em; }
.partner-logos { display: flex; align-items: center; gap: clamp(10px, 2vw, 20px); }
.partner-logos img { width: clamp(58px, 8vw, 84px); height: clamp(58px, 8vw, 84px); object-fit: contain; }
.hero-copy { align-self: center; max-width: 760px; padding-block: 18px; }
.hero-copy > p { margin: 0 0 14px; color: #2768be; font-size: clamp(11px, 1.5vw, 13px); font-weight: 800; letter-spacing: .16em; }
.hero-copy h1 { max-width: 760px; margin: 0; color: #14243d; font-size: clamp(38px, 7vw, 72px); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; }
.hero-copy h2 { margin: 13px 0 0; color: #3f526d; font-size: clamp(17px, 2.6vw, 25px); font-weight: 600; line-height: 1.35; }
.hero-copy a { display: inline-flex; min-height: 42px; align-items: center; gap: 12px; margin-top: clamp(24px, 4vh, 36px); border-radius: 8px; padding: 0 18px; background: #174f90; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 7px 18px rgb(23 79 144 / 22%); }
.hero-copy a:hover { background: #123f79; }
.hero-copy a span { font-size: 19px; }
footer { border-top: 1px solid #dce4ee; padding-top: 16px; color: #64748b; font-size: 12px; font-weight: 600; }
@media (max-width: 620px) { .landing-panel { min-height: 0; border-radius: 14px; } .landing-header { align-items: flex-start; } .partner-logos img { width: 48px; height: 48px; } .brand-copy { font-size: 11px; } .hero-copy h1 { font-size: clamp(34px, 12vw, 50px); } .hero-copy h2 { max-width: 280px; } }
@media (max-height: 560px) { .landing-panel { min-height: 0; padding-block: 18px; } .brand-logo { width: 44px; height: 44px; } .partner-logos img { width: 48px; height: 48px; } .hero-copy { padding-block: 8px; } .hero-copy > p { margin-bottom: 7px; } .hero-copy h1 { font-size: clamp(31px, 7vw, 52px); } .hero-copy h2 { margin-top: 6px; } .hero-copy a { min-height: 36px; margin-top: 14px; } footer { padding-top: 9px; } }