:root {
  --navy: #042d55;
  --navy-2: #063b6f;
  --blue: #087bc1;
  --blue-2: #159de0;
  --sky: #21a6df;
  --ice: #eaf7ff;
  --ink: #12263a;
  --muted: #5e7184;
  --line: #d9e7f2;
  --white: #fff;
  --green: #22b573;
  --shadow: 0 24px 80px rgba(5, 48, 86, .15);
  --radius: 26px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 16px; background: #fff; color: var(--navy); transform: translateY(-150%); border-radius: 8px; }
.skip-link:focus { transform: none; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; color: #fff; transition: background .3s, box-shadow .3s, color .3s; }
.site-header.scrolled { background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 10px 35px rgba(6,59,111,.1); backdrop-filter: blur(18px); }
.header-inner { height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { width: 38px; height: 38px; position: relative; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 12px 12px 15px 12px; transform: rotate(45deg); }
.brand-mark::after { content: ""; position: absolute; width: 11px; height: 2px; background: currentColor; right: -7px; bottom: 3px; border-radius: 2px; }
.brand-mark span { width: 12px; height: 12px; border: 2px solid var(--sky); border-radius: 4px; }
.brand-name { font-size: 23px; }
.brand-name span { color: var(--sky); }
.desktop-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.desktop-nav a, .text-link { font-size: 14px; font-weight: 650; opacity: .82; transition: opacity .2s, color .2s; }
.desktop-nav a:hover, .text-link:hover { opacity: 1; color: var(--sky); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border: 0; border-radius: 11px; background: linear-gradient(135deg, var(--blue), #0a69c4); color: #fff; font-weight: 750; cursor: pointer; box-shadow: 0 12px 30px rgba(4,101,181,.24); transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 17px 36px rgba(4,101,181,.32); }
.button-small { min-height: 42px; padding-inline: 18px; font-size: 14px; box-shadow: none; }
.site-header:not(.scrolled) .button-small { color: var(--navy); background: #fff; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; background: transparent; border: 0; color: inherit; }
.menu-toggle span { display: block; width: 24px; height: 2px; margin: 5px 0; background: currentColor; transition: .25s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { padding: 14px 24px 28px; background: #fff; color: var(--ink); box-shadow: 0 18px 35px rgba(6,59,111,.16); }
.mobile-menu a { display: block; padding: 13px 0; font-weight: 650; }
.mobile-menu .button { margin-top: 8px; padding-inline: 18px; }

.hero { min-height: 920px; position: relative; display: flex; align-items: center; overflow: hidden; color: #fff; background: var(--navy); }
.hero-image { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(3,36,70,.98) 0%, rgba(4,55,99,.93) 31%, rgba(5,57,101,.36) 62%, rgba(2,32,62,.18) 100%), url('/assets/hero-construction.jpg') center/cover no-repeat; transform: scaleX(-1) scale(1.02); }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,25,52,.42), transparent 34%, rgba(0,31,62,.52)); }
.hero-grid { position: absolute; inset: 0; opacity: .11; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 70px 70px; mask-image: linear-gradient(90deg, #000, transparent 75%); }
.hero-glow { position: absolute; width: 620px; height: 620px; left: -260px; top: 90px; background: radial-gradient(circle, rgba(23,166,223,.38), transparent 68%); filter: blur(10px); }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; padding-top: 80px; }
.hero-copy { max-width: 650px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: #b9e9ff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.eyebrow span { width: 26px; height: 2px; background: var(--sky); }
.eyebrow-blue { color: var(--blue); }
.hero h1 { margin: 0; max-width: 720px; font-size: clamp(54px, 5.3vw, 78px); line-height: 1.01; letter-spacing: -.055em; font-weight: 760; }
h1 em, h2 em { display: block; color: #6dd3ff; font-style: normal; font-weight: 550; }
.hero-lead { max-width: 630px; margin: 28px 0 0; color: rgba(255,255,255,.82); font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button-light { background: #fff; color: var(--navy); }
.button-light:hover { background: #f4fbff; }
.button-ghost { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); box-shadow: none; backdrop-filter: blur(10px); }
.button-ghost svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hero-points { display: flex; flex-wrap: wrap; gap: 20px; margin: 30px 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.72); font-size: 13px; }
.hero-points li { display: flex; gap: 7px; align-items: center; }
.check { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(115,220,255,.5); border-radius: 50%; color: #80e1ff; font-size: 11px; }
.hero-panel { position: relative; align-self: center; transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); transform-origin: center; }
.app-preview { overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 22px; background: rgba(245,251,255,.97); box-shadow: 0 35px 90px rgba(0,18,39,.46), inset 0 1px rgba(255,255,255,.8); color: var(--ink); }
.preview-bar { height: 58px; display: flex; justify-content: space-between; align-items: center; padding: 0 18px; color: var(--navy); background: #fff; border-bottom: 1px solid #e5edf3; font-size: 13px; font-weight: 800; }
.preview-brand, .preview-user { display: flex; align-items: center; gap: 9px; }
.mini-mark { width: 19px; height: 19px; border: 2px solid var(--blue); border-radius: 6px; transform: rotate(45deg); }
.preview-user span:first-child { width: 48px; height: 7px; background: #dce9f2; border-radius: 4px; }
.preview-user span:last-child { width: 27px; height: 27px; background: #d8effb; border-radius: 50%; }
.preview-body { min-height: 420px; display: grid; grid-template-columns: 58px 1fr; }
.preview-side { padding: 20px 13px; background: var(--navy); }
.preview-side i { width: 31px; height: 31px; display: block; margin-bottom: 13px; border-radius: 8px; background: rgba(255,255,255,.08); }
.preview-side i.active { background: linear-gradient(135deg, var(--blue-2), var(--blue)); box-shadow: 0 7px 18px rgba(21,157,224,.35); }
.preview-main { min-width: 0; padding: 23px; background: #f4f8fb; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview-heading div { display: grid; gap: 5px; }
.preview-heading small { color: #8090a0; font-size: 10px; }
.preview-heading strong { color: var(--navy); font-size: 17px; }
.live-dot { display: flex; align-items: center; gap: 5px; padding: 7px 10px; color: #16845a; background: #ddf7ed; border-radius: 20px; font-size: 9px; font-weight: 800; }
.live-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #22b573; box-shadow: 0 0 0 4px rgba(34,181,115,.13); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 21px 0 13px; }
.metric-grid article { min-width: 0; padding: 14px; border: 1px solid #e3edf4; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(23,66,102,.05); }
.metric-grid span, .metric-grid small { display: block; overflow: hidden; color: #7b8d9d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.metric-grid b { display: block; margin: 7px 0; color: var(--navy); font-size: 23px; }
.metric-grid small.up { color: #1b9c6b; }
.chart-row { display: grid; grid-template-columns: 1.65fr .75fr; gap: 12px; }
.chart-card, .donut-card { padding: 15px; border: 1px solid #e3edf4; border-radius: 12px; background: #fff; color: #6f8293; font-size: 9px; }
.chart-card svg { width: 100%; height: 120px; margin-top: 10px; overflow: visible; }
.chart-card .area { fill: url(#area); }
.chart-card .line { fill: none; stroke: #159de0; stroke-width: 3; stroke-linecap: round; }
.chart-labels { display: flex; justify-content: space-between; color: #9ba9b5; font-size: 7px; }
.donut { width: 105px; height: 105px; display: grid; place-content: center; margin: 22px auto 0; border-radius: 50%; background: radial-gradient(circle at center, #fff 50%, transparent 52%), conic-gradient(#159de0 0 76%, #dceaf3 76%); text-align: center; }
.donut b { color: var(--navy); font-size: 18px; }
.donut small { color: #8da0ae; font-size: 7px; }
.floating-alert { position: absolute; right: -30px; bottom: -28px; display: flex; align-items: center; gap: 12px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.5); border-radius: 14px; background: rgba(255,255,255,.96); color: var(--ink); box-shadow: 0 18px 50px rgba(0,33,64,.28); animation: float 5s ease-in-out infinite; }
.floating-alert i { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: #def8ed; color: #179966; font-style: normal; font-weight: 900; }
.floating-alert span { display: grid; gap: 3px; }
.floating-alert b { font-size: 11px; }
.floating-alert small { color: #7b8c9a; font-size: 8px; }
@keyframes float { 50% { transform: translateY(-8px); } }
.hero-edge { position: absolute; z-index: 3; right: -3%; bottom: -75px; width: 63%; height: 145px; background: #fff; transform: rotate(-4.5deg); transform-origin: right bottom; }

.trust-strip { position: relative; z-index: 5; margin-top: -5px; border-bottom: 1px solid #e5edf4; background: #fff; }
.trust-inner { min-height: 102px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.trust-inner p { margin: 0; color: #8292a1; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.role-list { display: flex; align-items: center; gap: 18px; color: #3e566b; font-size: 13px; font-weight: 700; }
.role-list i { width: 4px; height: 4px; border-radius: 50%; background: var(--sky); }

.section { padding: 125px 0; }
.section-heading { max-width: 790px; margin: 0 auto 62px; text-align: center; }
.section-heading .eyebrow { justify-content: center; }
.section-heading h2, .field-copy h2, .security-copy h2, .demo-copy h2 { margin: 0; color: var(--navy); font-size: clamp(40px, 4.5vw, 62px); line-height: 1.08; letter-spacing: -.047em; }
.section-heading h2 em, .field-copy h2 em { color: var(--blue); }
.section-heading p, .field-copy > p, .security-copy > p, .demo-copy > p { max-width: 720px; margin: 22px auto 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.challenge { background: linear-gradient(180deg, #fff, #f5faff); }
.challenge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.challenge-card { position: relative; min-height: 300px; padding: 34px; overflow: hidden; border: 1px solid #deebf4; border-radius: var(--radius); background: rgba(255,255,255,.9); box-shadow: 0 15px 40px rgba(5,61,105,.06); transition: transform .25s, box-shadow .25s, border-color .25s; }
.challenge-card:hover { transform: translateY(-8px); border-color: #b6dff4; box-shadow: var(--shadow); }
.card-number { position: absolute; top: 20px; right: 27px; color: #e1edf4; font-size: 52px; font-weight: 850; letter-spacing: -.06em; }
.icon-box { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: linear-gradient(135deg, #e6f7ff, #d9effc); color: var(--blue); }
.icon-box svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.challenge-card h3 { margin: 28px 0 12px; color: var(--navy); font-size: 21px; }
.challenge-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

.modules-section { position: relative; overflow: hidden; background: linear-gradient(142deg, #052f58 0%, #064e83 58%, #087db9 100%); color: #fff; }
.modules-backdrop { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(30deg, transparent 44%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.08) 46%, transparent 47%), linear-gradient(150deg, transparent 44%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.06) 46%, transparent 47%); background-size: 95px 95px; }
.modules-backdrop::after { content: ""; position: absolute; width: 800px; height: 800px; right: -260px; top: -270px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 100px rgba(255,255,255,.02), 0 0 0 230px rgba(255,255,255,.02); }
.modules-section .container { position: relative; }
.section-heading-light h2 { color: #fff; }
.section-heading-light p { color: rgba(255,255,255,.68); }
.module-shell { border: 1px solid rgba(255,255,255,.19); border-radius: 28px; background: rgba(4,40,76,.45); box-shadow: 0 35px 85px rgba(0,20,40,.3); backdrop-filter: blur(10px); }
.module-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid rgba(255,255,255,.14); }
.module-tab { min-height: 72px; padding: 10px; border: 0; border-right: 1px solid rgba(255,255,255,.12); background: transparent; color: rgba(255,255,255,.64); font-size: 12px; font-weight: 750; cursor: pointer; transition: .2s; }
.module-tab:last-child { border-right: 0; }
.module-tab:hover { color: #fff; background: rgba(255,255,255,.04); }
.module-tab.active { color: #fff; background: linear-gradient(180deg, rgba(21,157,224,.25), rgba(21,157,224,.05)); box-shadow: inset 0 -3px var(--sky); }
.module-content { min-height: 470px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; padding: 58px; align-items: center; }
.module-kicker { display: inline-block; margin-bottom: 15px; color: #79d8ff; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .15em; }
.module-copy h3 { margin: 0; font-size: clamp(30px, 3vw, 42px); line-height: 1.18; letter-spacing: -.035em; }
.module-copy p { margin: 20px 0; color: rgba(255,255,255,.7); font-size: 15px; line-height: 1.7; }
.module-copy ul { display: grid; gap: 13px; padding: 0; list-style: none; color: rgba(255,255,255,.85); font-size: 13px; }
.module-copy li { display: flex; align-items: flex-start; gap: 10px; }
.module-copy li::before { content: "✓"; width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(53,204,255,.15); color: #6ddcff; font-size: 10px; }
.module-visual { position: relative; height: 330px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: linear-gradient(145deg, rgba(9,106,165,.65), rgba(3,44,82,.8)); }
.blueprint-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 32px 32px; }
.building-stack { position: absolute; width: 280px; right: 42px; bottom: 30px; transform: skewY(-4deg); }
.floor { height: 53px; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 0 18px; border: 1px solid rgba(137,223,255,.45); background: rgba(10,83,132,.65); box-shadow: inset 0 0 22px rgba(37,177,230,.08); }
.floor i { width: 70%; height: 9px; border-radius: 5px; background: repeating-linear-gradient(90deg, rgba(157,226,250,.35) 0 19px, transparent 19px 24px); }
.floor b { color: rgba(255,255,255,.5); font-size: 11px; }
.floor.active { border-color: #5ed5ff; background: rgba(22,153,210,.45); box-shadow: 0 0 35px rgba(34,190,244,.25); transform: translateX(-18px); }
.floor.active b { color: #fff; }
.module-data-card { position: absolute; left: 24px; top: 30px; display: grid; gap: 7px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; background: rgba(3,38,72,.8); box-shadow: 0 16px 35px rgba(0,20,40,.25); }
.module-data-card span { color: #8ddfff; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.module-data-card b { font-size: 11px; }
.module-data-card i { width: 150px; height: 4px; margin-top: 4px; background: rgba(255,255,255,.12); border-radius: 5px; }
.module-data-card em { display: block; width: 78%; height: 100%; background: var(--sky); border-radius: inherit; }
.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 23px; }
.capability { min-height: 195px; padding: 26px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.055); transition: background .2s, transform .2s; }
.capability:hover { transform: translateY(-5px); background: rgba(255,255,255,.09); }
.capability > span { color: #5ccffa; font-size: 10px; font-weight: 850; }
.capability h3 { margin: 22px 0 10px; font-size: 16px; }
.capability p { margin: 0; color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.7; }

.field-section { background: #fff; }
.field-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 76px; align-items: center; }
.field-image { position: relative; }
.field-image::before { content: ""; position: absolute; z-index: -1; width: 75%; height: 72%; left: -30px; bottom: -30px; border-radius: 26px; background: #e6f5fd; }
.field-image img { width: 100%; min-height: 570px; object-fit: cover; border-radius: 30px; box-shadow: var(--shadow); }
.image-badge { position: absolute; right: -30px; bottom: 40px; max-width: 245px; display: grid; gap: 6px; padding: 20px 22px; border-left: 4px solid var(--sky); border-radius: 7px 15px 15px 7px; background: #fff; box-shadow: 0 18px 50px rgba(5,47,84,.2); }
.image-badge strong { color: var(--navy); font-size: 15px; }
.image-badge span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.field-copy h2 { font-size: clamp(38px, 4vw, 55px); }
.field-copy > p { margin-inline: 0; }
.feature-lines { display: grid; margin-top: 35px; }
.feature-lines article { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.feature-lines i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--ice); color: var(--blue); font-size: 10px; font-style: normal; font-weight: 850; }
.feature-lines h3 { margin: 0 0 7px; color: var(--navy); font-size: 16px; }
.feature-lines p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.workflow-section { background: #f3f9fd; }
.workflow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.workflow::before { content: ""; position: absolute; top: 53px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, #8ccfee, #8ccfee, transparent); }
.workflow li { position: relative; z-index: 1; padding: 0 12px; text-align: center; }
.workflow > li > span { position: absolute; top: -18px; right: 22px; color: #d8eaf4; font-size: 42px; font-weight: 850; }
.workflow-icon { width: 82px; height: 82px; display: grid; place-items: center; margin: 12px auto 27px; border: 10px solid #f3f9fd; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--sky)); color: #fff; box-shadow: 0 12px 25px rgba(8,123,193,.22); }
.workflow-icon svg { width: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.workflow h3 { margin: 0 0 12px; color: var(--navy); font-size: 18px; }
.workflow p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.security-section { position: relative; overflow: hidden; background: linear-gradient(145deg, #052c54, #063e70); color: #fff; }
.security-orbit { position: absolute; width: 800px; height: 800px; right: -260px; top: -200px; border: 1px solid rgba(87,199,242,.12); border-radius: 50%; }
.security-orbit::before, .security-orbit::after { content: ""; position: absolute; border: 1px solid rgba(87,199,242,.1); border-radius: 50%; }
.security-orbit::before { inset: 100px; }.security-orbit::after { inset: 220px; }
.security-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.security-copy h2, .demo-copy h2 { color: #fff; }
.security-copy h2 em, .demo-copy h2 em { color: #6ed8ff; }
.security-copy > p, .demo-copy > p { margin-inline: 0; color: rgba(255,255,255,.65); }
.security-list { margin-top: 35px; }
.security-list article { display: grid; grid-template-columns: 35px 1fr; gap: 15px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12); }
.security-list > article > span { color: #65d2fb; font-size: 10px; font-weight: 850; }
.security-list h3 { margin: 0 0 6px; font-size: 16px; }
.security-list p { margin: 0; color: rgba(255,255,255,.58); font-size: 13px; line-height: 1.6; }
.security-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.shield { width: 240px; height: 280px; display: grid; place-items: center; border: 1px solid rgba(93,214,255,.25); border-radius: 50%; background: radial-gradient(circle, rgba(25,166,220,.2), transparent 65%); box-shadow: 0 0 0 55px rgba(63,194,239,.03), 0 0 0 110px rgba(63,194,239,.025); }
.shield svg { width: 130px; fill: rgba(21,157,224,.15); stroke: #5fd6ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 18px rgba(45,192,244,.4)); }
.security-chip { position: absolute; min-width: 190px; display: grid; grid-template-columns: 10px 1fr; gap: 3px 9px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(3,35,67,.76); box-shadow: 0 15px 40px rgba(0,15,33,.25); backdrop-filter: blur(10px); }
.security-chip i { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #33d795; box-shadow: 0 0 0 5px rgba(51,215,149,.12); }
.security-chip span { font-size: 10px; }.security-chip b { grid-column: 2; color: #63d8ff; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.chip-a { top: 35px; left: 10px; }.chip-b { right: 0; top: 205px; }.chip-c { left: 5px; bottom: 25px; }

.demo-section { position: relative; overflow: hidden; background: linear-gradient(135deg, #0879bd, #06477c); color: #fff; }
.demo-lines { position: absolute; inset: 0; opacity: .16; background: linear-gradient(155deg, transparent 44%, #fff 44.2%, transparent 44.4%), linear-gradient(25deg, transparent 60%, #fff 60.2%, transparent 60.4%); background-size: 420px 420px; }
.demo-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.demo-copy ul { display: grid; gap: 13px; margin: 30px 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.8); font-size: 13px; }
.demo-copy li { display: flex; gap: 10px; }.demo-copy li span { color: #8fe7ff; font-weight: 900; }
.demo-form { padding: 34px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 30px 75px rgba(0,26,51,.28); }
.form-heading { display: grid; gap: 5px; margin-bottom: 23px; }.form-heading span { color: var(--navy); font-size: 22px; font-weight: 800; }.form-heading small { color: var(--muted); }
.demo-form label { display: grid; gap: 7px; margin-bottom: 15px; color: #385066; font-size: 11px; font-weight: 750; }
.demo-form input, .demo-form select, .demo-form textarea { width: 100%; border: 1px solid #d7e4ed; border-radius: 10px; background: #f8fbfd; color: var(--ink); outline: 0; transition: border-color .2s, box-shadow .2s; }
.demo-form input, .demo-form select { height: 47px; padding: 0 13px; }.demo-form textarea { resize: vertical; padding: 12px 13px; }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { border-color: var(--sky); box-shadow: 0 0 0 3px rgba(33,166,223,.12); }
.demo-form .invalid { border-color: #d94f5c; box-shadow: 0 0 0 3px rgba(217,79,92,.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.demo-form label.consent { display: flex; grid-template-columns: none; align-items: flex-start; gap: 9px; color: #6c7f90; font-weight: 500; line-height: 1.45; }
.consent input { width: 17px; height: 17px; flex: 0 0 17px; margin: 1px 0 0; accent-color: var(--blue); }
.form-submit { width: 100%; }
.form-note { margin: 12px 0 0; color: #8a9aa7; font-size: 9px; line-height: 1.45; text-align: center; }
.form-status { min-height: 18px; margin-top: 8px; color: #c2404c; font-size: 11px; text-align: center; }

.site-footer { background: #031f3b; color: #fff; }
.footer-main { display: grid; grid-template-columns: 1.6fr .7fr .7fr; gap: 70px; padding: 70px 0 48px; }
.brand-footer { margin-bottom: 18px; }.footer-main > div:first-child p { max-width: 390px; color: rgba(255,255,255,.52); font-size: 13px; line-height: 1.7; }
.footer-links { display: grid; align-content: start; gap: 12px; font-size: 12px; }.footer-links span { margin-bottom: 7px; color: #64d0f8; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; }.footer-links a { color: rgba(255,255,255,.6); }.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.42); font-size: 11px; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.challenge-card:nth-child(2), .capability:nth-child(2), .workflow li:nth-child(2) { transition-delay: .08s; }
.challenge-card:nth-child(3), .capability:nth-child(3), .workflow li:nth-child(3) { transition-delay: .16s; }
.capability:nth-child(4), .workflow li:nth-child(4) { transition-delay: .24s; }

@media (max-width: 1100px) {
  .desktop-nav { gap: 20px; }
  .hero { min-height: 900px; }
  .hero-inner { grid-template-columns: 1fr .88fr; gap: 30px; }
  .hero h1 { font-size: 57px; }
  .preview-body { min-height: 370px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }.metric-grid article:last-child { display: none; }
  .chart-row { grid-template-columns: 1fr; }.donut-card { display: none; }
  .role-list { gap: 11px; font-size: 11px; }
  .module-content { padding: 42px; }
  .field-grid, .security-grid, .demo-grid { gap: 50px; }
}

@media (max-width: 900px) {
  .desktop-nav, .header-actions { display: none; }
  .menu-toggle { display: block; }
  .site-header { background: rgba(4,45,85,.75); backdrop-filter: blur(14px); }
  .site-header.scrolled { background: rgba(255,255,255,.95); }
  .hero { min-height: 1050px; align-items: flex-start; }
  .hero-image { background: linear-gradient(180deg, rgba(3,36,70,.96) 0%, rgba(4,55,99,.88) 48%, rgba(4,55,99,.52) 100%), url('/assets/hero-construction.jpg') 34% center/cover no-repeat; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 155px; }
  .hero-copy { max-width: 720px; }
  .hero h1 { font-size: clamp(48px, 8vw, 70px); }
  .hero-panel { width: min(650px, 92%); margin: 20px auto 0; transform: none; }
  .trust-inner { padding: 26px 0; flex-direction: column; justify-content: center; text-align: center; }
  .role-list { flex-wrap: wrap; justify-content: center; }
  .challenge-grid { grid-template-columns: 1fr; }
  .challenge-card { min-height: auto; }
  .module-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }.module-tab { min-width: 180px; padding-inline: 18px; }
  .module-content { grid-template-columns: 1fr; }.module-visual { min-height: 330px; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .field-grid, .security-grid, .demo-grid { grid-template-columns: 1fr; }
  .field-image { max-width: 690px; }.field-image img { min-height: 480px; }
  .workflow { grid-template-columns: 1fr 1fr; row-gap: 55px; }.workflow::before { display: none; }
  .security-visual { order: -1; min-height: 430px; }
  .demo-form { max-width: 650px; }
}

@media (max-width: 600px) {
  .container { width: min(100% - 32px, var(--container)); }
  .header-inner { height: 70px; }
  .brand-mark { width: 33px; height: 33px; }.brand-name { font-size: 21px; }
  .hero { min-height: 1000px; }
  .hero-inner { padding-top: 120px; }
  .hero h1 { font-size: clamp(42px, 13vw, 58px); }
  .hero-lead { font-size: 16px; }
  .hero-actions { display: grid; }.hero-actions .button { width: 100%; }
  .hero-points { display: grid; gap: 10px; }
  .hero-panel { width: 100%; }
  .preview-body { grid-template-columns: 40px 1fr; min-height: 315px; }.preview-side { padding: 13px 7px; }.preview-side i { width: 26px; height: 26px; margin-bottom: 9px; }.preview-main { padding: 15px; }.preview-heading strong { font-size: 13px; }.metric-grid { grid-template-columns: 1fr 1fr; }.metric-grid article { padding: 10px; }.metric-grid b { font-size: 18px; }.chart-card svg { height: 90px; }.floating-alert { display: none; }
  .section { padding: 88px 0; }
  .section-heading { margin-bottom: 42px; text-align: left; }.section-heading .eyebrow { justify-content: flex-start; }
  .section-heading h2, .field-copy h2, .security-copy h2, .demo-copy h2 { font-size: 38px; }
  .section-heading p, .field-copy > p, .security-copy > p, .demo-copy > p { font-size: 15px; }
  .challenge-card { padding: 27px; }
  .module-content { padding: 28px 22px; }.module-copy h3 { font-size: 29px; }.module-visual { height: 280px; min-height: 280px; }.building-stack { width: 220px; right: 20px; }.module-data-card { left: 12px; top: 18px; }
  .capability-grid { grid-template-columns: 1fr; }.capability { min-height: auto; }
  .field-image img { min-height: 390px; }.image-badge { right: -8px; bottom: 20px; }.field-image::before { left: -15px; bottom: -18px; }
  .workflow { grid-template-columns: 1fr; }.workflow li { padding-inline: 28px; }
  .security-visual { min-height: 390px; }.shield { width: 190px; height: 230px; }.security-chip { min-width: 160px; padding: 12px; }.chip-a { left: 0; }.chip-b { right: 0; }.chip-c { left: 5px; }
  .demo-form { padding: 24px 19px; }.form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-main { grid-template-columns: 1fr; gap: 36px; padding-top: 55px; }.footer-bottom { gap: 20px; }
}

/* Vivid product identity and mobile app concept */
:root {
  --navy: #031f4a;
  --blue: #075dff;
  --blue-2: #007ff5;
  --sky: #00c9ff;
  --cyan: #21e0f4;
  --green: #20d98b;
  --amber: #ffb21c;
  --coral: #ff6e66;
  --ice: #eaf9ff;
  --shadow: 0 28px 75px rgba(2, 63, 132, .16);
}

.scroll-progress { position: fixed; z-index: 130; inset: 0 0 auto; height: 3px; pointer-events: none; }
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan), var(--blue), var(--amber)); box-shadow: 0 0 18px rgba(0,201,255,.8); }
.language-switcher, .mobile-languages, .footer-languages { display: inline-flex; align-items: center; gap: 4px; }
.language-switcher { padding: 4px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.08); }
.site-header.scrolled .language-switcher { border-color: #d5e9f8; background: #f1f9ff; }
.language-switcher a, .mobile-languages a, .footer-languages a { display: grid; place-items: center; min-width: 34px; min-height: 30px; padding: 0 7px; border-radius: 8px; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.language-switcher a.active, .mobile-languages a.active, .footer-languages a.active { color: #fff; background: linear-gradient(135deg, var(--blue), var(--sky)); box-shadow: 0 6px 16px rgba(7,93,255,.25); }
.mobile-languages { margin: 8px 0 5px; padding: 5px; background: #eef8ff; border-radius: 12px; }
.footer-languages a { color: rgba(255,255,255,.72); }

.hero { background: #031f4a; }
.hero::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at 16% 18%, rgba(0,217,255,.3), transparent 28%), radial-gradient(circle at 82% 18%, rgba(28,104,255,.42), transparent 31%), radial-gradient(circle at 62% 78%, rgba(27,218,141,.15), transparent 27%); animation: meshMove 14s ease-in-out infinite alternate; }
.hero-image { background: linear-gradient(270deg, rgba(2,24,68,.96) 0%, rgba(3,48,105,.88) 38%, rgba(3,66,129,.35) 70%, rgba(1,38,82,.34) 100%), url('/assets/hero-construction.jpg') center/cover no-repeat; filter: saturate(1.18) contrast(1.04); animation: heroZoom 18s ease-in-out infinite alternate; }
.hero-grid { opacity: .18; background-size: 58px 58px; animation: gridDrift 16s linear infinite; }
.hero-glow { background: radial-gradient(circle, rgba(0,217,255,.55), transparent 66%); animation: pulseGlow 7s ease-in-out infinite; }
.hero h1 em, .section-heading-light h2 em, .security-copy h2 em, .demo-copy h2 em { color: transparent; background: linear-gradient(90deg, #7bf2ff, #00c9ff 40%, #9bffcf 75%, #ffd36f); background-size: 180% auto; -webkit-background-clip: text; background-clip: text; animation: textShine 7s linear infinite; }
.button { overflow: hidden; position: relative; background: linear-gradient(120deg, #075dff, #00a9ff 55%, #17d6b0); background-size: 180% auto; box-shadow: 0 14px 32px rgba(0,122,255,.3); }
.button::after { content: ""; position: absolute; inset: -2px; transform: translateX(-130%) skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transition: transform .65s; }
.button:hover::after { transform: translateX(130%) skewX(-22deg); }
.button-light { color: #062755; background: linear-gradient(135deg, #fff, #d9faff); }
.button-ghost { background: rgba(7,110,211,.25); }
.hero-panel { filter: drop-shadow(0 30px 60px rgba(0,201,255,.2)); transition: transform .18s ease-out; }
.app-preview { border: 1px solid rgba(124,235,255,.62); box-shadow: 0 40px 105px rgba(0,18,55,.55), 0 0 0 8px rgba(0,201,255,.06); }
.chart-card .line { stroke-dasharray: 700; stroke-dashoffset: 700; animation: drawChart 3.2s ease forwards 1s, linePulse 4s ease-in-out infinite 4.2s; }
.donut { animation: donutPulse 4s ease-in-out infinite; }
.floating-alert { border-color: rgba(31,219,255,.75); box-shadow: 0 20px 55px rgba(0,54,117,.36), 0 0 25px rgba(0,201,255,.15); }
.floating-alert::after { content: ""; position: absolute; inset: -7px; z-index: -1; border: 1px solid rgba(0,201,255,.28); border-radius: 19px; animation: ringPulse 2.8s ease-out infinite; }
.hero-signal { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.hero-signal span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(124,235,255,.22); border-radius: 999px; background: rgba(0,103,209,.18); color: rgba(255,255,255,.82); font-size: 10px; font-weight: 750; backdrop-filter: blur(10px); }
.hero-signal b { color: #7ff4ff; font-size: 8px; }
.challenge { background: radial-gradient(circle at 12% 10%, rgba(0,201,255,.12), transparent 26%), radial-gradient(circle at 88% 74%, rgba(32,217,139,.11), transparent 30%), linear-gradient(180deg, #fff, #f3fbff); }
.challenge-card { border-color: #d5eefa; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,251,255,.92)); }
.challenge-card::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green)); transform: scaleX(.2); transform-origin: left; transition: transform .35s; }
.challenge-card:hover::after { transform: scaleX(1); }
.challenge-card:nth-child(2)::after { background: linear-gradient(90deg, var(--amber), var(--coral)); }
.challenge-card:nth-child(3)::after { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.icon-box { background: linear-gradient(135deg, #dbf7ff, #dce7ff); box-shadow: inset 0 0 0 1px rgba(0,135,255,.12), 0 12px 25px rgba(0,136,255,.12); }
.modules-section { background: radial-gradient(circle at 14% 20%, rgba(0,213,255,.25), transparent 26%), radial-gradient(circle at 88% 72%, rgba(32,217,139,.16), transparent 31%), linear-gradient(142deg, #021d52 0%, #04499d 55%, #007fc8 100%); }
.module-shell { border-color: rgba(116,235,255,.34); background: rgba(2,31,79,.52); box-shadow: 0 35px 95px rgba(0,12,52,.38), 0 0 80px rgba(0,180,255,.08); }
.module-tab.active { background: linear-gradient(180deg, rgba(0,210,255,.35), rgba(15,112,255,.08)); box-shadow: inset 0 -3px #4af4e0; }
.capability { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035)); }
.capability::before { content: ""; position: absolute; width: 100px; height: 100px; right: -40px; top: -40px; border-radius: 50%; background: radial-gradient(circle, rgba(0,222,255,.3), transparent 70%); }

.mobile-app-section { position: relative; overflow: hidden; background: linear-gradient(180deg, #f4fbff 0%, #fff 52%, #effaff 100%); }
.mobile-app-section::before { content: ""; position: absolute; inset: 8% -10% auto; height: 72%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,199,255,.12), transparent 65%); filter: blur(20px); }
.mobile-app-orb { position: absolute; border-radius: 50%; filter: blur(2px); animation: orbitFloat 9s ease-in-out infinite; }
.orb-a { width: 270px; height: 270px; right: -110px; top: 60px; background: radial-gradient(circle at 35% 35%, rgba(0,203,255,.36), rgba(7,93,255,.08) 60%, transparent 72%); }
.orb-b { width: 190px; height: 190px; left: -85px; bottom: 50px; background: radial-gradient(circle at 55% 45%, rgba(32,217,139,.28), rgba(255,178,28,.08) 55%, transparent 72%); animation-delay: -4s; }
.mobile-app-grid { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; gap: 76px; align-items: center; }
.phone-scene { position: relative; min-height: 650px; display: grid; place-items: center; perspective: 1200px; }
.phone-frame { width: min(100%, 650px); overflow: hidden; border: 8px solid #fff; border-radius: 36px; background: #fff; box-shadow: 0 38px 90px rgba(0,55,125,.24), 0 0 0 1px rgba(0,139,255,.13); transform: rotateY(3deg) rotateX(1deg); transition: transform .35s ease; }
.phone-scene:hover .phone-frame { transform: rotateY(0) rotateX(0) translateY(-7px); }
.phone-frame img { width: 100%; height: 600px; object-fit: cover; object-position: 45% center; border-radius: 27px; filter: saturate(1.1); }
.concept-badge { position: absolute; z-index: 3; left: 0; top: 23px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid #c8eafa; border-radius: 14px; background: rgba(255,255,255,.94); color: #31506b; box-shadow: 0 16px 38px rgba(0,72,145,.16); backdrop-filter: blur(12px); font-size: 11px; }
.concept-badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 6px rgba(255,178,28,.14); }
.concept-badge b { color: var(--navy); }
.phone-float { position: absolute; z-index: 3; display: grid; gap: 4px; min-width: 180px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 20px 42px rgba(0,54,110,.18); backdrop-filter: blur(12px); animation: float 5s ease-in-out infinite; }
.phone-float b { color: var(--navy); font-size: 12px; }
.phone-float span { color: var(--muted); font-size: 9px; }
.phone-float-a { right: -18px; top: 115px; }
.phone-float-b { left: -20px; bottom: 75px; animation-delay: -2.4s; }
.mobile-app-copy h2 { margin: 0; color: var(--navy); font-size: clamp(40px, 4.3vw, 60px); line-height: 1.06; letter-spacing: -.047em; }
.mobile-app-copy h2 em { display: block; color: transparent; background: linear-gradient(90deg, var(--blue), #00aee9, var(--green)); -webkit-background-clip: text; background-clip: text; font-style: normal; font-weight: 570; }
.mobile-app-copy > p { margin: 23px 0 0; color: var(--muted); font-size: 16px; line-height: 1.72; }
.future-label { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: #60788d; font-size: 10px; line-height: 1.45; }
.future-label span { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #fff3d8; color: #9b6200; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.mobile-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 29px; }
.mobile-feature-grid article { display: grid; grid-template-columns: 30px 1fr; gap: 11px; padding: 15px; border: 1px solid #dceef8; border-radius: 15px; background: rgba(255,255,255,.88); box-shadow: 0 10px 25px rgba(0,82,149,.055); transition: transform .25s, border-color .25s, box-shadow .25s; }
.mobile-feature-grid article:hover { transform: translateY(-4px); border-color: #8fdcff; box-shadow: 0 18px 35px rgba(0,116,205,.11); }
.mobile-feature-grid i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, #e0f9ff, #e0eaff); color: var(--blue); font-size: 9px; font-style: normal; font-weight: 900; }
.mobile-feature-grid article:nth-child(3n+2) i { color: #ad6900; background: #fff4d6; }
.mobile-feature-grid article:nth-child(3n) i { color: #078459; background: #dff9ee; }
.mobile-feature-grid h3 { margin: 0 0 5px; color: var(--navy); font-size: 13px; }
.mobile-feature-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }

.workflow-section { background: radial-gradient(circle at 78% 8%, rgba(0,201,255,.12), transparent 30%), #f2faff; }
.workflow-icon { background: linear-gradient(135deg, var(--blue), var(--cyan) 60%, var(--green)); box-shadow: 0 15px 32px rgba(0,132,233,.28); }
.security-section { background: radial-gradient(circle at 80% 28%, rgba(0,211,255,.28), transparent 26%), radial-gradient(circle at 20% 80%, rgba(33,219,141,.12), transparent 30%), linear-gradient(145deg, #021b48, #04458d); }
.demo-section { background: radial-gradient(circle at 15% 25%, rgba(0,223,255,.26), transparent 28%), radial-gradient(circle at 88% 75%, rgba(32,217,139,.17), transparent 32%), linear-gradient(135deg, #075dff, #006bc9 60%, #008fae); }

/* Reusable LottieAnimation component */
.lottie-animation { position: relative; width: var(--lottie-width, 100%); height: var(--lottie-height, 100%); contain: layout paint; }
.lottie-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .25s ease; }
.lottie-canvas svg { width: 100% !important; height: 100% !important; }
.lottie-fallback { position: absolute; z-index: 0; inset: 0; margin: auto; opacity: 1; transition: opacity .2s ease; }
.lottie-ready .lottie-canvas { opacity: 1; }
.lottie-ready .lottie-fallback { opacity: 0; }
.lottie-failed .lottie-canvas, .lottie-reduced .lottie-canvas { display: none; }
.lottie-failed .lottie-fallback, .lottie-reduced .lottie-fallback { opacity: 1; }

.hero-lottie { position: absolute; z-index: 0; top: -105px; right: -82px; pointer-events: none; opacity: .78; filter: drop-shadow(0 0 24px rgba(0,201,255,.32)); }
.hero-lottie .lottie-fallback { width: 100%; height: 100%; overflow: visible; fill: #20d98b; stroke: #00c9ff; stroke-width: 1.3; }
.hero-lottie .lottie-fallback .core { fill: rgba(7,93,255,.35); stroke: #7bf2ff; }
.hero-panel .app-preview { position: relative; z-index: 1; }
.hero-panel .floating-alert { z-index: 2; }

.icon-box.lottie-icon { display: block; }
.lottie-icon .lottie-canvas { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); }
.lottie-icon .lottie-fallback { width: 26px; height: 26px; }

.form-status.lottie-status { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #08764e; font-weight: 700; }
.form-status .form-success-lottie { flex: 0 0 38px; width: 38px; height: 38px; }
.form-status .form-success-lottie .lottie-fallback { width: 32px; height: 32px; fill: rgba(32,217,139,.15); stroke: #0d915f; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.form-status .form-success-lottie .lottie-fallback circle { stroke-width: 4; }

@keyframes meshMove { 0% { transform: translate3d(-2%,0,0) scale(1); } 100% { transform: translate3d(2%,1%,0) scale(1.06); } }
@keyframes heroZoom { from { transform: scaleX(-1) scale(1.02); } to { transform: scaleX(-1) scale(1.075); } }
@keyframes gridDrift { to { background-position: 58px 58px; } }
@keyframes pulseGlow { 50% { opacity: .6; transform: scale(1.16); } }
@keyframes textShine { to { background-position: 180% center; } }
@keyframes drawChart { to { stroke-dashoffset: 0; } }
@keyframes linePulse { 50% { stroke-width: 4; filter: drop-shadow(0 0 5px rgba(0,201,255,.7)); } }
@keyframes donutPulse { 50% { transform: scale(1.045); filter: drop-shadow(0 0 10px rgba(0,201,255,.23)); } }
@keyframes ringPulse { to { opacity: 0; transform: scale(1.12); } }
@keyframes orbitFloat { 50% { transform: translate3d(15px,-22px,0) scale(1.08); } }

@media (max-width: 1100px) {
  .language-switcher a { min-width: 30px; padding-inline: 4px; }
  .mobile-app-grid { gap: 42px; }
  .phone-float-a { right: -8px; }
  .phone-float-b { left: -8px; }
  .hero-lottie { top: -80px; right: -55px; transform: scale(.82); }
}

@media (max-width: 900px) {
  .mobile-app-grid { grid-template-columns: 1fr; }
  .phone-scene { min-height: 590px; }
  .phone-frame { width: min(100%, 690px); }
  .phone-frame img { height: 540px; }
  .mobile-app-copy { max-width: 720px; }
  .hero-lottie { top: -65px; right: -50px; transform: scale(.72); transform-origin: top right; }
}

@media (max-width: 600px) {
  .hero { min-height: 1090px; }
  .hero-signal { gap: 7px; }
  .hero-signal span { padding: 7px 9px; }
  .phone-scene { min-height: 450px; }
  .phone-frame { border-width: 5px; border-radius: 24px; }
  .phone-frame img { height: 420px; border-radius: 19px; object-position: 46% center; }
  .concept-badge { top: -18px; left: 8px; }
  .phone-float { min-width: 150px; padding: 12px; }
  .phone-float-a { right: -4px; top: 95px; }
  .phone-float-b { left: -4px; bottom: 22px; }
  .mobile-app-copy h2 { font-size: 38px; }
  .mobile-feature-grid { grid-template-columns: 1fr; }
  .future-label { align-items: flex-start; }
  .footer-bottom { flex-wrap: wrap; align-items: center; }
  .hero-lottie { top: -42px; right: -35px; transform: scale(.56); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .lottie-canvas { display: none !important; }
  .lottie-fallback { opacity: 1 !important; }
}