:root {
  --navy: #06132f;
  --blue: #1265ea;
  --blue-bright: #16a3ff;
  --blue-soft: #eaf4ff;
  --ink: #10213d;
  --muted: #60708b;
  --line: #dce6f3;
  --paper: #ffffff;
  --wash: #f5f9ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }

.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 12px 16px; color: #fff; background: #06132f; border-radius: 8px; font-weight: 800; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; box-shadow: 0 0 0 6px #06132f; }
main:focus { outline: none; }

.utility-bar { min-height: 44px; color: #d6dbe3; background: #080a0e; }
.utility-inner { width: min(1180px, calc(100% - 40px)); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; font-weight: 650; letter-spacing: .04em; }
.utility-inner > span { color: #8f99aa; }
.utility-inner a { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; color: #fff; font-weight: 750; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s ease; }
.utility-inner a:hover { color: #62c3ff; text-decoration-thickness: 2px; }
.site-header { position: relative; z-index: 20; width: min(1180px, calc(100% - 40px)); height: 108px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(19, 91, 199, .13); background: #fff; }
.header-brand { display: flex; align-items: center; gap: 14px; }
.header-brand img { width: 190px; height: 96px; object-fit: contain; object-position: left center; }
.header-brand > span { padding-left: 14px; border-left: 1px solid #d9e3ef; color: #6a7890; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.header-brand strong { display: block; margin-top: 4px; color: #233958; font-size: 11px; }
nav { display: flex; align-items: center; gap: 34px; font-size: 14px; font-weight: 650; color: #3d4e68; }
nav a { min-height: 44px; display: inline-flex; align-items: center; transition: color .2s ease, transform .2s ease; }
nav a:hover { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transform: translateY(-1px); }
.nav-cta { padding: 11px 19px; color: white !important; background: var(--navy); border-radius: 999px; }

.hero { position: relative; isolation: isolate; min-height: 710px; padding: 85px max(32px, calc((100vw - 1180px) / 2)) 95px; display: grid; grid-template-columns: .92fr 1.08fr; gap: 64px; align-items: center; overflow: hidden; background: linear-gradient(145deg, #fff 0%, #f7fbff 54%, #e9f4ff 100%); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -3; background-image: radial-gradient(rgba(24, 106, 228, .12) 1px, transparent 1px); background-size: 26px 26px; mask-image: linear-gradient(to right, black, transparent 50%); }
.hero-glow { position: absolute; z-index: -2; border-radius: 50%; filter: blur(4px); opacity: .8; }
.glow-one { width: 480px; height: 480px; right: -130px; top: 80px; background: radial-gradient(circle, rgba(38, 160, 255, .25), transparent 68%); }
.glow-two { width: 380px; height: 380px; left: 30%; bottom: -260px; background: radial-gradient(circle, rgba(4, 82, 223, .17), transparent 70%); }
.eyebrow { margin: 0 0 15px; color: var(--blue); font-size: 12px; line-height: 1.4; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1 { margin: 0; max-width: 640px; color: var(--navy); font-size: clamp(46px, 5vw, 72px); line-height: 1.02; letter-spacing: -.055em; font-weight: 770; }
h1 span { color: transparent; background: linear-gradient(90deg, #0a54d7, #17a8f7); background-clip: text; -webkit-background-clip: text; }
.hero-text { margin: 25px 0 0; max-width: 520px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; gap: 12px; margin-top: 31px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 23px; border-radius: 13px; font-size: 14px; font-weight: 750; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { gap: 18px; color: #fff; background: linear-gradient(135deg, #146ce9, #0452cf); box-shadow: 0 14px 30px rgba(10, 91, 218, .24); }
.button-primary:hover { box-shadow: 0 18px 38px rgba(10, 91, 218, .33); }
.button-primary span { font-size: 21px; }
.button-quiet { color: #254164; border: 1px solid #d2deec; background: rgba(255,255,255,.72); }
.trust-line { display: flex; flex-wrap: wrap; gap: 19px; margin-top: 27px; color: #5f718c; font-size: 12px; font-weight: 650; }
.trust-line span { display: flex; align-items: center; gap: 7px; }
.trust-line i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #0873e9; background: #e4f3ff; font-style: normal; font-size: 11px; }

.product-stage { position: relative; min-width: 0; }
.screen-card { position: relative; z-index: 3; width: 110%; overflow: hidden; border: 1px solid rgba(29, 96, 198, .17); border-radius: 22px; background: white; box-shadow: 0 34px 70px rgba(12, 49, 108, .19), 0 4px 12px rgba(12, 49, 108, .09); transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); transition: transform .5s ease, box-shadow .5s ease; }
.screen-card:hover { transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-5px); box-shadow: 0 40px 90px rgba(12, 49, 108, .24); }
.screen-card > img { width: 100%; height: auto; }
.screen-bar { position: relative; height: 39px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid #e2eaf5; background: #f9fbfe; }
.screen-bar span { width: 8px; height: 8px; border-radius: 50%; background: #c9d6e7; }
.screen-bar p { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; color: #8190a6; font-size: 10px; }
.orbit { position: absolute; z-index: 1; border-radius: 50%; border: 1px dashed rgba(18, 101, 234, .27); animation: orbit-spin 28s linear infinite; }
.orbit::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #14a4ff; box-shadow: 0 0 0 7px rgba(20, 164, 255, .11); }
.orbit-one { width: 610px; height: 610px; right: -85px; top: -135px; }
.orbit-one::after { top: 83px; left: 65px; }
.orbit-two { width: 500px; height: 500px; right: -30px; top: -75px; animation-direction: reverse; animation-duration: 34s; }
.orbit-two::after { right: 39px; bottom: 100px; background: #0960e6; }
.floating-chip { position: absolute; z-index: 5; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border: 1px solid rgba(20, 102, 228, .14); border-radius: 12px; background: rgba(255,255,255,.94); box-shadow: 0 13px 32px rgba(10, 52, 117, .15); color: #1e3558; font-size: 12px; font-weight: 750; animation: float 4s ease-in-out infinite; }
.floating-chip span { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 5px; border-radius: 8px; color: #0873e9; background: #e7f3ff; font-size: 10px; }
.chip-one { left: -37px; top: -29px; }
.chip-two { right: -48px; bottom: -32px; animation-delay: -2s; }

.section { padding: 110px max(32px, calc((100vw - 1180px) / 2)); }
.section-heading { max-width: 640px; margin: 0 auto 58px; text-align: center; }
h2 { margin: 0; color: var(--navy); font-size: clamp(38px, 4vw, 56px); line-height: 1.08; letter-spacing: -.04em; }
.section-heading > p:last-child { margin: 17px 0 0; color: var(--muted); font-size: 17px; }
.how-section { background: #fff; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps::before { content: ""; position: absolute; z-index: 0; left: 16%; right: 16%; top: 73px; border-top: 1px dashed #bed6f4; }
.steps article { position: relative; z-index: 1; padding: 28px 28px 31px; border: 1px solid var(--line); border-radius: 20px; background: white; text-align: center; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.steps article:hover { transform: translateY(-7px); border-color: #aed1fb; box-shadow: 0 20px 45px rgba(29, 76, 145, .1); }
.step-number { position: absolute; top: 17px; left: 19px; color: #9ab1cd; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.step-icon { display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 28px; color: var(--blue); background: linear-gradient(145deg, #eff8ff, #ddecff); }
.step-icon svg, .feature-icon svg { width: 33px; height: 33px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.steps h3, .feature-card h3 { margin: 0; color: #122849; font-size: 19px; }
.steps p, .feature-card p { margin: 10px auto 0; max-width: 250px; color: var(--muted); font-size: 14px; line-height: 1.65; }

.features-section { background: var(--wash); }
.feature-intro { display: flex; align-items: end; justify-content: space-between; gap: 60px; margin-bottom: 48px; }
.feature-intro > p { max-width: 390px; margin: 0 0 6px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card { min-height: 235px; padding: 29px 24px; border: 1px solid transparent; border-radius: 18px; background: white; box-shadow: 0 5px 18px rgba(16, 50, 100, .05); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.feature-card:hover { transform: translateY(-6px); border-color: #d4e4f9; box-shadow: 0 19px 36px rgba(16, 50, 100, .1); }
.feature-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 25px; border-radius: 15px; }
.feature-icon.blue { color: #0b6ff0; background: #e8f3ff; }.feature-icon.amber { color: #e39400; background: #fff5d9; }.feature-icon.green { color: #0a9c62; background: #e2f8ed; }.feature-icon.violet { color: #7357d9; background: #eeeaff; }

.contact-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 85px; color: white; background: radial-gradient(circle at 10% 15%, #123d7d 0, transparent 36%), linear-gradient(135deg, #06142f, #08275b); }
.eyebrow.light { color: #6fc7ff; }
.contact-copy { align-self: center; }
.contact-copy h2 { color: white; }
.contact-copy > p:nth-of-type(2) { max-width: 470px; margin: 24px 0 37px; color: #bbcae1; font-size: 17px; line-height: 1.75; }
.contact-details { display: grid; gap: 13px; }
.contact-details a { width: max-content; min-height: 44px; display: inline-flex; align-items: center; color: white; font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.contact-details span { display: inline-block; width: 60px; color: #79baf6; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.contact-form { padding: 33px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: rgba(255,255,255,.08); box-shadow: 0 24px 60px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 15px; }
.field-group { min-width: 0; }
.field-group input { min-width: 0; }
.contact-form label { display: block; margin-bottom: 8px; color: #edf5ff; font-size: 13px; font-weight: 750; }
.contact-form > input, .contact-form > select, .contact-form > textarea { margin-bottom: 15px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; outline: none; color: white; background: rgba(255,255,255,.08); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.contact-form input, .contact-form select { height: 48px; padding: 0 14px; }
.contact-form select { color-scheme: dark; cursor: pointer; }
.contact-form select option { color: #10213d; background: #fff; }
.contact-form textarea { resize: vertical; padding: 13px 14px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #bacbe1; opacity: 1; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #4bb5ff; background: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(59, 176, 255, .13); }
.contact-form button { width: 100%; height: 52px; border: 0; border-radius: 11px; color: #08204a; background: linear-gradient(135deg, #f7fbff, #bfe6ff); font-size: 14px; font-weight: 800; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.contact-form button:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(28, 164, 255, .22); }
.contact-form button span { margin-left: 14px; font-size: 19px; }
.form-note { margin: 10px 0 0; color: #c4d5ec; font-size: 12px; text-align: center; }

footer { padding: 56px max(32px, calc((100vw - 1180px) / 2)) 22px; background: #fff; }
.footer-brand { display: flex; flex-direction: column; align-items: center; padding-bottom: 44px; }
.footer-brand p { margin: 0 0 17px; color: #7b899c; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer-brand img { width: 290px; max-height: 115px; object-fit: contain; transition: transform .25s ease; }
.footer-brand img:hover { transform: scale(1.025); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid #e6edf6; color: #7c899a; font-size: 11px; }
.footer-bottom p { margin: 0; }.footer-bottom a { font-weight: 700; color: #53657e; }

.load-in { animation: load-in .8s cubic-bezier(.2,.7,.2,1) both; }
.load-delay { animation-delay: .16s; }
.reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 8% cover 28%; }
@keyframes load-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 80px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-brand { margin-left: auto; margin-right: auto; }
  .product-stage { width: min(820px, 90%); margin: 30px auto 0; }
  .screen-card { width: 100%; transform: none; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .utility-inner { width: calc(100% - 30px); }
  .utility-inner > span { display: none; }
  .utility-inner { justify-content: flex-end; }
  .site-header { width: calc(100% - 30px); height: 92px; }
  .header-brand { gap: 8px; }
  .header-brand img { width: 125px; height: 76px; }
  .header-brand > span { padding-left: 8px; font-size: 8px; letter-spacing: .04em; }
  .header-brand strong { font-size: 9px; }
  nav a:not(.nav-cta) { display: none; }
  .nav-cta { padding: 9px 15px; }
  .hero { padding: 72px 20px 70px; gap: 35px; }
  .hero-actions { width: 100%; flex-direction: column; }
  .button { width: 100%; }
  .trust-line { justify-content: center; }
  .product-stage { width: 100%; }
  .floating-chip { display: none; }
  .orbit-one { width: 380px; height: 380px; right: -60px; top: -70px; }
  .orbit-two { width: 320px; height: 320px; right: -20px; top: -40px; }
  .screen-bar p { display: none; }
  .section { padding: 78px 20px; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .feature-intro { align-items: start; flex-direction: column; gap: 20px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 200px; }
  .contact-section { grid-template-columns: 1fr; gap: 43px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form { padding: 24px 18px; }
  .footer-bottom { align-items: center; flex-direction: column; gap: 12px; text-align: center; }
}
@media (max-width: 430px) {
  .header-brand > span { display: none; }
  .header-brand img { width: 138px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .load-in, .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
  .orbit, .floating-chip { animation: none !important; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}