:root {
  color-scheme: dark;
  --royal: #075fc3;
  --deep: #073e91;
  --cyan: #39e9f5;
  --white: #f8fbff;
  font-family: 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #082d64; color: var(--white); }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid #8cf6ff; outline-offset: 5px; }
button { cursor: pointer; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; padding: .75rem 1rem; background: #fff; color: #073b85; border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.page-width { width: min(100% - 112px, 1370px); margin-inline: auto; }
.top-scene {
  position: relative; isolation: isolate; overflow: hidden; min-height: 100vh;
  background:
    radial-gradient(ellipse 58% 54% at 86% 35%, rgba(28, 143, 235, .8), transparent 72%),
    radial-gradient(ellipse 74% 48% at 18% 76%, rgba(18, 153, 240, .72), transparent 75%),
    linear-gradient(119deg, #096acf 0%, #075ac0 40%, #064b9f 73%, #0863c3 100%);
}
.top-scene::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(102, 207, 255, .14), transparent 28%, rgba(0, 30, 91, .14) 70%, transparent);
}
.site-header { height: 145px; position: relative; z-index: 10; display: flex; align-items: center; gap: 25px; padding-top: 24px; }
.brand { width: 388px; flex: 0 0 388px; position: relative; display: flex; align-items: center; isolation: isolate; }
.brand-lockup { display: block; width: 100%; height: auto; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(17px, 1.85vw, 31px); flex: 1; min-width: 0; }
.main-nav a { font-size: 16px; white-space: nowrap; transition: color .2s; }
.main-nav a:hover, .footer-bottom a:hover { color: var(--cyan); }
.outline-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; font-weight: 700; white-space: nowrap; border-radius: 999px; transition: transform .2s, box-shadow .2s, background .2s; }
.outline-button:hover, .primary-button:hover { transform: translateY(-2px); }
.outline-button { min-height: 59px; padding: 0 27px; border: 1.5px solid #b2ffff; box-shadow: inset 0 0 12px rgba(38,236,252,.19), 0 0 12px rgba(35,232,255,.7); background: rgba(9,48,113,.36); font-size: 16px; }
.outline-button span, .primary-button span { font-size: 26px; font-weight: 400; line-height: 1; }
.menu-toggle { display: none; }
.hero { height: 580px; position: relative; display: grid; grid-template-columns: 56% 44%; align-items: start; }
.hero-copy { position: relative; z-index: 4; padding-top: 67px; max-width: 760px; }
.eyebrow, .section-kicker { font-size: 12px; letter-spacing: .31em; font-weight: 600; }
.eyebrow { margin: 0 0 30px; white-space: nowrap; }
.eyebrow span { font-size: 18px; padding: 0 12px; font-weight: 400; opacity: .8; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: 'Segoe UI', Arial, sans-serif; }
.hero h1 { --headline-base-size: clamp(49px, 4.3vw, 65px); font-size: calc(var(--headline-base-size) * .89); line-height: calc(var(--headline-base-size) * 1.06); white-space: nowrap; letter-spacing: -.045em; font-weight: 800; margin: 0 0 20px; text-shadow: 0 2px 8px rgba(0,22,65,.15); }
.hero h1 span { color: var(--cyan); }
.hero-promise { font-size: 34px; line-height: 1.18; font-weight: 600; letter-spacing: -.025em; margin: 0 0 6px; }
.hero-support { font-size: 22px; line-height: 1.35; color: #ecf7ff; margin: 0 0 34px; }
.hero-actions { display: flex; align-items: center; gap: 27px; }
.primary-button { min-height: 65px; padding: 0 37px; background: linear-gradient(120deg,#10a0e5,#46edf2); border: 2px solid #e4ffff; color: #00244c; box-shadow: 0 0 18px rgba(40,235,255,.7), inset 0 0 10px rgba(255,255,255,.22); font-size: 20px; }
.primary-button:hover { box-shadow: 0 0 26px rgba(40,235,255,.96); }
.hero .primary-button { min-height: 67px; padding: 0 39px; font-size: 20px; }
.hero-footnote { display: flex; align-items: center; gap: 20px; margin: 41px 0 0; color: #d8ebff; font-size: 15px; white-space: nowrap; }
.hero-footnote span { width: 35px; height: 1px; background: #fff; flex: 0 0 auto; }
.hero-art { position: absolute; right: -9px; top: 25px; width: 645px; height: 570px; pointer-events: none; overflow: visible; }
.portrait {
  position: absolute; inset: 0;
  transform: translateY(65px);
  background: linear-gradient(90deg, rgba(7,84,177,.16), rgba(7,66,153,.04)), url('assets/hero-office.webp') 67% 43% / cover no-repeat;
  mask-image: radial-gradient(ellipse 68% 70% at 59% 56%, #000 43%, rgba(0,0,0,.88) 55%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 68% 70% at 59% 56%, #000 43%, rgba(0,0,0,.88) 55%, transparent 85%);
  opacity: .98;
}
.art-tint { display: none; }
.glass-card { position: absolute; z-index: 2; border: 1px solid rgba(104,228,255,.72); border-radius: 13px; background: linear-gradient(135deg,rgba(19,112,201,.57),rgba(10,62,132,.67)); box-shadow: inset 0 0 18px rgba(118,235,255,.1),0 9px 23px rgba(0,28,74,.25); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); color: #fff; font-size: 12px; }
.glass-card strong { font-size: 13px; }
.overview-card { width: 207px; min-height: 173px; left: 5%; top: 151px; padding: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; white-space: nowrap; }
.card-head span { padding: 4px 7px; background: rgba(36,139,231,.7); border-radius: 5px; font-size: 9px; }
.card-rule { display: block; height: 1px; background: rgba(185,235,255,.25); margin: 17px 0 12px; }
.metric-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(180,230,255,.12); }
.metric-row i { display: block; width: 66px; height: 6px; border-radius: 5px; background: linear-gradient(90deg,#18cbff,#80f1f5); }
.metric-row:nth-child(5) i { width: 39px; }
.trend-card { width: 198px; height: 132px; left: 8%; top: 350px; padding: 13px; }
.bar-chart { height: 61px; margin: 9px 0 3px; display: flex; align-items: end; justify-content: space-around; border-bottom: 1px solid rgba(209,242,255,.45); background: repeating-linear-gradient(to top,transparent 0 18px,rgba(201,235,255,.1) 19px); }
.bar-chart i { width: 14px; background: linear-gradient(#4bedff,#167de0); height: 23%; }.bar-chart i:nth-child(2) { height: 40%; }.bar-chart i:nth-child(3) { height: 53%; }.bar-chart i:nth-child(4) { height: 47%; }.bar-chart i:nth-child(5) { height: 62%; }.bar-chart i:nth-child(6) { height: 73%; }.bar-chart i:nth-child(7) { height: 88%; }
.bar-caption { display: flex; justify-content: space-between; font-size: 9px; }
.breakdown-card { width: 229px; height: 125px; right: 2%; top: 386px; padding: 12px; }
.breakdown-body { display: flex; gap: 13px; align-items: center; margin-top: 8px; }
.donut { height: 71px; width: 71px; border-radius: 50%; background: conic-gradient(#53eaf9 0 31%,#2a8fe5 31% 64%,#9ccfff 64% 100%); position: relative; }.donut::after { content: ''; position: absolute; inset: 16px; border-radius: 50%; background: #164a93; }
.legend { display: grid; gap: 8px; }.legend i { font-style: normal; font-size: 10px; white-space: nowrap; }.legend i::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5ae7f7; margin-right: 7px; }.legend i:nth-child(2)::before { background: #2e91e8; }.legend i:nth-child(3)::before { background: #9ccfff; }
.script-note { position: absolute; right: 3%; top: 24px; font: 23px/1.02 'Segoe Script','Brush Script MT',cursive; transform: rotate(-11deg); text-shadow: 0 1px 7px #034b91; }
.script-note span { display: block; width: 42px; height: 1px; background: var(--cyan); margin-top: 14px; }
.side-words { position: absolute; right: 0; top: 252px; font-size: 12px; letter-spacing: .34em; line-height: 2.2; color: #90eefa; }
.illustrative-note { position: absolute; bottom: 34px; right: 3%; font-size: 10px; line-height: 1.4; letter-spacing: .03em; color: rgba(224,239,255,.8); white-space: nowrap; }
.wave { height: 185px; margin-top: -90px; position: relative; z-index: 3; pointer-events: none; }
.wave svg { width: 100%; height: 100%; display: block; }
.features { position: relative; z-index: 4; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); padding: 12px 0 5px; }
.feature { display: flex; gap: 21px; min-height: 130px; padding: 0 30px; position: relative; }
.feature:first-child { padding-left: 50px; }
.feature:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 8px; height: 116px; width: 1px; background: rgba(53,183,241,.52); }
.feature-icon { width: 73px; height: 73px; display: grid; place-items: center; flex: 0 0 auto; border: 1.5px solid #27e5f6; border-radius: 50%; color: var(--cyan); box-shadow: inset 0 0 13px rgba(60,221,255,.13),0 0 10px rgba(44,226,250,.16); }
.feature-icon svg { width: 48px; height: 48px; }
.feature h2 { font-size: 20px; line-height: 1.32; margin: 10px 0 8px; max-width: 270px; }
.feature p { font-size: 15px; line-height: 1.53; color: #dce9ff; max-width: 280px; }
.brand-line { display: flex; align-items: center; gap: 25px; min-height: 84px; padding-bottom: 14px; }
.brand-line span { font-size: 11px; letter-spacing: .36em; white-space: nowrap; }
.brand-line i { height: 1px; flex: 1; background: rgba(222,247,255,.7); }
.brand-line em { font: 25px 'Segoe Script','Brush Script MT',cursive; white-space: nowrap; color: #bbffff; }
.content-section{padding:96px 0;scroll-margin-top:20px}
.process-section{background:linear-gradient(145deg,#0b3b79,#10549b)}
.content-grid{display:grid;grid-template-columns:44% 1fr;gap:10%}
.section-kicker{color:var(--cyan);margin-bottom:22px}
.content-section h2,.site-footer h2{font-size:clamp(34px,4vw,53px);line-height:1.12;letter-spacing:-.045em;margin-bottom:22px}
.section-intro,.security-content>p:last-child,.download-content p:not(.section-kicker){font-size:19px;line-height:1.7;color:#dceaff;max-width:575px}
.process-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(93,208,247,.32)}
.process-list li{display:flex;gap:29px;padding:21px 0;border-bottom:1px solid rgba(93,208,247,.32)}
.process-list li>span{font:700 17px 'Segoe UI',Arial,sans-serif;color:var(--cyan)}
.process-list strong{font-size:19px}.process-list p{font-size:15px;line-height:1.5;color:#cadff5;margin:7px 0 0}
.security-section{background:radial-gradient(ellipse at 79% 37%,rgba(34,135,222,.38),transparent 55%),#0b4387}
.security-content{max-width:1370px}
.security-content>p:last-child{max-width:740px}
.download-section{background:linear-gradient(110deg,#074f9e,#0d72c6 62%,#09529d)}
.download-content{display:flex;align-items:center;justify-content:space-between;gap:40px}
.download-content p:not(.section-kicker){margin-bottom:0}
.site-footer{padding:80px 0 26px;background:#082d62;scroll-margin-top:20px}
.footer-content{display:flex;justify-content:space-between;gap:40px;padding-bottom:68px}
.contact-links{display:grid;align-content:center;gap:17px;font-size:20px}.contact-links a:hover{text-decoration:underline;text-decoration-color:var(--cyan)}
.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(140,219,246,.25);padding-top:24px;color:#a9d1f0;font-size:13px}
/* Desktop geometry only: retain the accepted content sizes and responsive scale. */
@media (min-width: 981px) {
  .top-scene { min-height: 0; }
  .hero { height: 470px; }
  .hero-copy { padding-top: 25px; }
  .eyebrow { margin-bottom: 22px; }
  .hero h1 { margin-bottom: 16px; }
  .hero-support { margin-bottom: 26px; }
  .hero-footnote { margin-top: 26px; }
  .hero-art { top: -55px; }
  .portrait { transform: translateY(55px); }
  .script-note { top: 64px; }
  .wave { height: 145px; margin-top: -35px; }
}
@media (max-width: 1250px) {
  .site-header { gap: 17px; }
  .brand { width: 310px; flex-basis: 310px; }
  .main-nav { gap: 15px; }
  .main-nav a { font-size: 14px; }
  .header-cta { padding-inline: 20px; font-size: 14px; }
  .hero h1 { --headline-base-size: clamp(47px,4.34vw,57px); }
  .hero-art { width: 55%; }
  .feature { padding-inline: 18px; gap: 15px; }
  .feature:first-child { padding-left: 18px; }
  .feature h2 { font-size: 18px; }
  .feature p { font-size: 14px; }
}
@media (max-width: 980px) {
  .page-width { width: min(100% - 64px,1370px); }
  .site-header { height: 113px; padding-top: 0; }
  .brand { width: 300px; flex-basis: 300px; margin-right: auto; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 6px; order: 3; width: 45px; height: 45px; background: transparent; border: 1px solid rgba(134,234,255,.7); border-radius: 10px; padding: 10px; }
  .menu-toggle span { height: 2px; width: 100%; background: #fff; border-radius: 2px; }
  .main-nav { display: none; position: absolute; top: 99px; left: 0; right: 0; background: #063a7a; border: 1px solid rgba(103,222,255,.5); border-radius: 14px; padding: 12px; box-shadow: 0 15px 40px rgba(0,15,55,.4); }
  .main-nav.is-open { display: grid; gap: 0; }
  .main-nav a { display: block; font-size: 16px; padding: 13px; }
  .header-cta { order: 2; }
  .hero { height: 570px; }
  .hero-copy { padding-top: 62px; }
  .hero h1 { --headline-base-size: clamp(42px,5.27vw,53px); }
  .hero-art { width: 58%; right: -23px; opacity: .85; }
  .script-note, .side-words { display: none; }
  .features { padding-top: 14px; }
  .feature { display: block; }
  .feature-icon { margin-bottom: 10px; }
  .brand-line em { font-size: 21px; }
}
@media (max-width: 700px) {
  .page-width { width: min(100% - 36px,1370px); }
  .site-header { height: 91px; gap: 10px; }
  .brand { width: 185px; flex-basis: 185px; }
  .header-cta { min-height: 40px; padding: 0 12px; font-size: 11px; gap: 5px; }
  .header-cta span { font-size: 18px; }
  .menu-toggle { width: 40px; height: 40px; }
  .main-nav { top: 79px; }
  .hero { height: auto; display: flex; flex-direction: column; padding-bottom: 38px; }
  .hero-copy { padding-top: 34px; width: 100%; }
  .eyebrow { font-size: 9px; letter-spacing: .18em; margin-bottom: 25px; }
  .eyebrow span { padding: 0 5px; }
  .hero h1 { --headline-base-size: clamp(36px,7.65vw,53px); letter-spacing: -.045em; margin-bottom: 18px; }
  .hero-promise { font-size: 26px; }
  .hero-support { font-size: 16px; max-width: 360px; margin-bottom: 28px; }
  .hero-actions { gap: 18px; flex-wrap: wrap; }
  .primary-button, .hero .primary-button { min-height: 56px; padding: 0 22px; font-size: 16px; }
  .hero-footnote { white-space: normal; font-size: 12px; line-height: 1.5; margin-top: 26px; gap: 10px; }
  .hero-footnote span { width: 20px; }
  .hero-art { position: relative; width: calc(100% + 36px); height: 355px; right: auto; top: auto; margin: 27px -18px 0; opacity: 1; overflow: hidden; }
  .portrait { transform: none; background-position: 67% 42%; mask-image: radial-gradient(ellipse 68% 72% at 56% 48%,#000 45%,transparent 100%); -webkit-mask-image: radial-gradient(ellipse 68% 72% at 56% 48%,#000 45%,transparent 100%); }
  .overview-card { left: 4%; top: 38px; transform: scale(.75); transform-origin: top left; }
  .trend-card { left: 7%; top: 204px; transform: scale(.72); transform-origin: top left; }
  .breakdown-card { right: 1%; top: 228px; transform: scale(.65); transform-origin: top right; }
  .illustrative-note { bottom: 9px; right: 15px; }
  .wave { margin-top: -27px; height: 80px; }
  .features { grid-template-columns: 1fr; padding: 7px 0 28px; }
  .feature, .feature:first-child { display: flex; align-items: flex-start; gap: 16px; min-height: auto; padding: 18px 3px; }
  .feature:not(:last-child)::after { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; }
  .feature-icon { width: 57px; height: 57px; margin: 0; }
  .feature-icon svg { width: 37px; height: 37px; }
  .feature h2 { font-size: 17px; margin: 0 0 6px; }
  .feature p { font-size: 13px; margin-bottom: 0; }
  .brand-line { display: grid; gap: 10px; padding: 13px 0 31px; min-height: auto; }
  .brand-line span { font-size: 9px; letter-spacing: .18em; white-space: normal; }
  .brand-line i { display: none; }
  .brand-line em { font-size: 21px; white-space: normal; }
  .content-section { padding: 69px 0; }
  .content-grid { display: block; }
  .section-intro, .security-content>p:last-child, .download-content p:not(.section-kicker) { font-size: 16px; }
  .process-list { margin-top: 35px; }
  .process-list li { gap: 17px; }
  .process-list strong { font-size: 16px; }
  .process-list p { font-size: 14px; }
  .download-content, .footer-content { display: block; }
  .download-content .primary-button { margin-top: 28px; }
  .contact-links { font-size: 17px; margin-top: 30px; }
  .footer-content { padding-bottom: 50px; }
  .site-footer { padding-top: 60px; }
}
@media (max-width: 480px) {
  .brand { width: 153px; flex-basis: 153px; }
  .header-cta { font-size: 10px; padding-inline: 9px; }
  .header-cta span { display: none; }
}
@media (max-width: 380px) {
  .brand { width: 130px; flex-basis: 130px; }
  .hero h1 { --headline-base-size: 33.2px; }
  .eyebrow { font-size: 8px; }
  .hero-art { height: 315px; }
  .breakdown-card { top: 203px; }
  .trend-card { top: 186px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .outline-button, .primary-button, .main-nav a { transition: none; }
}