/* IQZONE — a living interface. Loaded after the shared base stylesheet. */
:root {
  --bg: #050814;
  --surface: #0b1225;
  --line: #23304d;
  --text: #f5f7ff;
  --muted: #a4b1cc;
  --accent: #7cf0ff;
  --violet: #a490ff;
  --glass: linear-gradient(145deg, rgba(26, 40, 69, .77), rgba(8, 15, 33, .78));
}

body { background: var(--bg); overflow-x: clip; }
#ambient { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.ambient-aurora { position: fixed; inset: -15%; z-index: 0; pointer-events: none; opacity: .66; background: radial-gradient(ellipse at 12% 15%, #2958c12b 0%, transparent 40%), radial-gradient(ellipse at 86% 27%, #8255d229 0%, transparent 34%), radial-gradient(ellipse at 53% 76%, #1275881d 0%, transparent 40%); animation: aurora-drift 22s ease-in-out infinite alternate; }
.ambient-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .14; background-image: linear-gradient(#6e9ed323 1px, transparent 1px), linear-gradient(90deg, #6e9ed323 1px, transparent 1px); background-size: 84px 84px; mask-image: linear-gradient(transparent, #000 22%, #000 76%, transparent); animation: grid-drift 42s linear infinite; }
main, footer { position: relative; z-index: 1; }

.header { height: 90px; background: #060b19d6; border-bottom-color: #81cfff21; backdrop-filter: blur(24px) saturate(1.25); box-shadow: 0 8px 45px #00000017; }
.header::after { content: ''; position: absolute; height: 1px; left: 12%; right: 12%; bottom: -1px; background: linear-gradient(90deg, transparent, #91c8ff58, #a28dff58, transparent); }
.brand { font-size: 24px; gap: 11px; letter-spacing: -1px; }
.brand small { font-size: 8px; letter-spacing: 2.2px; color: #b2c1da; margin-top: 3px; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; font-size: 35px; color: #afeeff; border: 1px solid #74b6df52; border-radius: 13px; background: linear-gradient(145deg, #6797ff20, #8c64eb12); box-shadow: inset 0 1px 12px #85d0ff18, 0 0 25px #3391be12; animation: brand-breathe 6s ease-in-out infinite; }
.header nav { gap: 17px; }
.header nav > a { font-size: 12px; color: #bec9dd; position: relative; }
.header nav > a::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent), var(--violet)); transform: scaleX(0); transform-origin: left; transition: transform .25s; border-radius: 3px; }
.header nav > a:hover::after, .header nav > a[aria-current]::after { transform: scaleX(1); }
.header .nav-cta { border: 1px solid #8abce353; border-radius: 50px; padding: 11px 17px; background: #73a8ff0c; color: #e0f6ff; }
.header .nav-cta::after { display: none; }
.header .nav-cta:hover { border-color: #98e9ff; background: #75bfff18; }
.menu-toggle { border-radius: 10px; border-color: #607799; }

.hero { min-height: 760px; grid-template-columns: 1.04fr 1fr; padding-top: 68px; padding-bottom: 72px; }
.hero::before { content: ''; position: absolute; inset: -100px -140px 0; background: radial-gradient(ellipse at 82% 50%, #258bca14, transparent 43%), radial-gradient(ellipse at 68% 10%, #735bce16, transparent 40%); pointer-events: none; }
.hero-content { padding-right: 20px; }
.eyebrow { color: #b2c5e1; letter-spacing: 2.05px; }
.eyebrow > span, .status-dot { width: 7px; height: 7px; background: #81f1ff; box-shadow: 0 0 15px #6ad8ff8a; animation: status-breathe 3.6s ease-in-out infinite; }
.hero .eyebrow { font-size: 10px; width: max-content; max-width: 100%; padding: 9px 12px; border-radius: 50px; background: #6b9bff0c; border: 1px solid #81b9ee26; }
.hero h1 { font-size: clamp(48px, 5.1vw, 76px); font-weight: 800; line-height: 1.04; letter-spacing: -4.2px; margin: 28px 0 27px; text-shadow: 0 4px 30px #0207173b; }
.hero h1 > span:not(.hero-highlight) { display: inline-block; font-size: .45em; color: #b9c7e4; font-weight: 500; line-height: 1.3; letter-spacing: -1.6px; margin-top: 21px; }
.hero h1 .hero-highlight, .hero-highlight { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; margin: 0; white-space: normal; color: #96e9ff; background: linear-gradient(105deg, #79efff 2%, #a9bcff 35%, #b394ff 58%, #6be0ff 83%, #9cecfa 100%); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: headline-light 9s ease-in-out infinite; }
.hero p { font-size: 17px; line-height: 1.85; max-width: 500px; color: #b1bdd6; }
.hero-note { color: #8fa4c5; margin-top: 48px; letter-spacing: 1.7px; font-size: 9px; }
.actions { gap: 27px; }
.button { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(110deg, #9ef1ff, #8ad4ff 60%, #b7b7ff); border: 1px solid #cbf8ff96; color: #071626; border-radius: 50px; padding: 17px 23px; font-size: 13px; box-shadow: 0 8px 34px #36b4e025, inset 0 1px #fff6; transition: box-shadow .25s, transform .25s; }
.button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 22%, #ffffff8c 46%, transparent 65%); transform: translateX(-130%); transition: transform .65s ease; pointer-events: none; }
.button:hover { background: linear-gradient(110deg, #c5f8ff, #a4e2ff 60%, #c7c8ff); box-shadow: 0 10px 40px #52c1ec43; transform: translateY(-3px); }
.button:hover::before { transform: translateX(130%); }
.button > span { transition: transform .25s; }
.button:hover > span { transform: translate(3px, -3px); }
.text-link { border-bottom-color: #6d9eca64; color: #d2dffa; }
.text-link:hover { border-bottom-color: var(--accent); }

.hero-visual { height: 605px; margin-left: -28px; position: relative; isolation: isolate; border-radius: 50%; background: radial-gradient(ellipse at 50% 48%, #299ecd1a, #7564d20b 42%, transparent 70%); }
.hero-visual::before { content: ''; position: absolute; inset: 5% 1%; border: 1px solid #97c9ff1a; border-radius: 50%; transform: rotate(-24deg); box-shadow: inset 0 0 70px #82bbff05, 0 0 80px #3369c308; pointer-events: none; animation: scene-orbit 28s linear infinite; }
.hero-visual::after { content: ''; position: absolute; inset: 13% 10%; border: 1px dashed #8ba4f729; border-radius: 50%; transform: rotate(24deg); pointer-events: none; animation: scene-orbit 42s linear infinite reverse; }
.hero-visual canvas { position: relative; z-index: 1; filter: drop-shadow(0 0 25px #228ec512); }
.visual-label { top: 18px; left: 28px; z-index: 2; font-size: 9px; letter-spacing: 1.65px; color: #d5e4f8; padding: 12px 15px; background: #0a172775; border: 1px solid #83bce427; border-radius: 11px; backdrop-filter: blur(16px); }
.visual-label .status-dot { width: 5px; height: 5px; margin-right: 6px; }
.visual-label small { margin-left: 14px; color: #7f9fbd; font-size: 7px; }
.scene-label { z-index: 3; color: #abf1ff; font-size: 23px; padding: 13px 15px; border-radius: 14px; border-color: #93c6f14d; background: linear-gradient(125deg, #132a43cd, #18172dc4); box-shadow: 0 15px 40px #03061568, inset 0 1px #bdedff1a, 0 0 22px #75c2ff12; backdrop-filter: blur(18px); animation: label-float 5.2s ease-in-out infinite; }
.scene-label::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #a1f3ff; margin-left: 7px; box-shadow: 0 0 10px #7fedff; animation: status-breathe 2.8s ease-in-out infinite; }
.scene-label span { font-size: 9px; letter-spacing: 1.45px; color: #e0eeff; }
.label-voice { top: 25%; right: 3%; --label-rotation: 3deg; animation-delay: -.3s; }
.label-brain { bottom: 26%; right: -2%; --label-rotation: -3deg; animation-delay: -1.8s; }
.label-api { bottom: 24%; left: 1%; --label-rotation: 3deg; animation-delay: -3.4s; }
.scene-bottom { bottom: 4px; color: #91abc9; font-size: 8px; letter-spacing: 1.6px; z-index: 2; }
.scene-bottom b { color: #79e9ff; }
.scene-hud { position: absolute; z-index: 3; left: 50%; bottom: 58px; transform: translateX(-50%); padding: 10px 16px; display: flex; gap: 12px; align-items: center; border: 1px solid #8ccafa33; border-radius: 50px; background: #06132dcc; backdrop-filter: blur(16px); color: #a9c4e3; font-size: 8px; letter-spacing: 2px; white-space: nowrap; box-shadow: 0 5px 30px #07071f55; }
.scene-hud b { color: #e2faff; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.scene-hud::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px #82edff; animation: status-breathe 3s ease-in-out infinite; }

.story-strip { border: 1px solid #7fa7e12c; background: linear-gradient(100deg, #11213d88, #101429aa); border-radius: 16px; padding: 25px 30px; box-shadow: inset 0 1px #c1e5ff08, 0 25px 65px #05051329; backdrop-filter: blur(16px); }
.story-strip > div { position: relative; color: #c4d2e9; transition: color .5s; }
.story-strip > div::after { content: ''; position: absolute; left: 0; right: 12px; bottom: -13px; height: 2px; border-radius: 3px; background: linear-gradient(90deg, #86edff, #b394ff); transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform .65s ease, opacity .65s; }
.story-strip .active::after { opacity: 1; transform: scaleX(1); }
.story-strip small { color: #77a5cd; background: #79beff0f; border: 1px solid #79beff24; border-radius: 7px; padding: 3px 6px; font-size: 9px; }
.story-strip .active small { color: #c3f7ff; border-color: #a3efff60; }
.section { position: relative; padding-top: 118px; }
.section::before { content: ''; pointer-events: none; position: absolute; z-index: -1; width: 58%; height: 290px; left: -12%; top: 20%; border-radius: 50%; background: radial-gradient(ellipse, #387cad13, #4858d00c 36%, transparent 69%); animation: section-light 16s ease-in-out infinite alternate; animation-play-state: paused; }
.section:nth-of-type(even)::before { left: auto; right: -10%; background: radial-gradient(ellipse, #745dcc1c, #367aaa0e 40%, transparent 72%); animation-delay: -7s; }
.section.motion-in-view::before, .motion-in-view .section::before { animation-play-state: running; }
h2 { font-weight: 650; letter-spacing: -2.2px; }
h2 span { color: #93a6cf; }
.section-heading > p, .split > div > p { color: #a6b5ce; }
.section-heading { margin-top: 27px; }
.section .eyebrow { color: #8cb2d8; }

.solution-card, .service-card, .demo, .industry-result { position: relative; border: 1px solid #81acee35; background: var(--glass); box-shadow: inset 0 1px 0 #d9e9ff0b, 0 20px 60px #01061123; backdrop-filter: blur(18px); }
.solution-card { border-radius: 21px; padding: 28px 30px; transition: border-color .3s, box-shadow .3s, transform .25s; }
.solution-card::before, .service-card::before, .demo::before { content: ''; pointer-events: none; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(350px circle at var(--mx, 50%) var(--my, 0%), #91ceff13, transparent 65%); opacity: .8; z-index: 0; transition: opacity .3s; }
.solution-card > *, .service-card > *, .demo > * { position: relative; }
.solution-card:hover { border-color: #8dd6ff77; box-shadow: inset 0 1px #b8e7ff22, 0 24px 55px #0005, 0 0 40px #349ec210; }
.tilt-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); transform-style: preserve-3d; will-change: auto; }
.tilt-card:hover { --lift: -7px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift)); }
.card-top { color: #8aa6cf; }
.round-arrow { width: 35px; height: 35px; border-color: #84b8df45; color: #b5e6ff; background: #77b3f10b; transition: background .3s, transform .3s; }
.solution-card:hover .round-arrow { background: #95ddff20; transform: rotate(45deg); }
.solution-card h3 { font-size: 29px; letter-spacing: -1px; }
.solution-card h4 { color: #bfcae6; }
.solution-card p { color: #9faccc; font-size: 13px; }
.card-link { color: #a7e8ff; border-top-color: #6b9ad326; padding-top: 20px; }
.card-link > span { transition: transform .25s; }
.solution-card:hover .card-link > span { transform: translateX(5px); }
.wave { gap: 5px; background: radial-gradient(ellipse at 50% 50%, #5590e811, transparent 65%); }
.wave i { width: 3px; background: linear-gradient(#c7aaff, #87ecff 55%, #598de4); box-shadow: 0 0 10px #9ad8ff20; animation-duration: 1.75s; }
.brain-art, .api-art { height: 155px; }
.brain-art span, .api-art span { border-color: #82b4f161; background: linear-gradient(145deg, #689de11c, #665aac17); border-radius: 10px; color: #c4defb; box-shadow: 0 7px 20px #0002; }
.brain-art span { animation: file-orbit 5s ease-in-out infinite; }
.brain-art span:last-of-type { animation-delay: -2.5s; }
.brain-art b { background: linear-gradient(145deg, #3b62955c, #5b467b38); border-color: #b4c6ff7d; color: #c1eeff; border-radius: 19px; box-shadow: inset 0 0 16px #85c9ff22, 0 0 40px #9c73ff27; animation: brain-turn 9s ease-in-out infinite; }
.brain-art::after { content: ''; position: absolute; width: 115px; height: 115px; border: 1px dashed #8eb7ef35; border-radius: 50%; animation: scene-orbit 22s linear infinite; }
.brain-art em, .api-art em { color: #7f98c2; font-size: 7px; letter-spacing: 2.5px; }
.api-art { gap: 10px; }
.api-art span { font-size: 10px; padding: 12px; animation: node-charge 4.8s ease-in-out infinite; }
.api-art span:nth-of-type(2) { animation-delay: -1.6s; background: #7c92ed21; }
.api-art span:nth-of-type(3) { animation-delay: -3.2s; }
.api-art b { color: #a2ddff; font-size: 23px; animation: packet-drift 2.4s ease-in-out infinite; }
.api-art b:last-of-type { animation-delay: -1.2s; }
.service-card { border-radius: 16px; padding: 27px; overflow: hidden; }
.service-card:hover { background: linear-gradient(145deg, #1e345eaa, #141c38be); border-color: #84cdf275; box-shadow: 0 18px 45px #0409195c; }
.service-symbol { display: inline-grid; place-items: center; width: 46px; height: 46px; font-size: 26px; color: #a6dfff; border: 1px solid #7fb2e938; border-radius: 13px; background: linear-gradient(145deg, #589fec1c, #8e68d817); box-shadow: inset 0 1px #a8e1ff18; animation: icon-breathe 6s ease-in-out infinite; }
.service-card:nth-child(2n) .service-symbol { color: #c2b4ff; animation-delay: -3s; }
.service-number { color: #899dc3; }
.service-card p { color: #a6b5cf; }
.chips span { background: #17263a70; color: #a9c3df; border-color: #779cd135; border-radius: 50px; padding: 7px 13px; }

.demo { border-radius: 22px; overflow: hidden; }
.demo-bar { border-bottom-color: #80a8d52b; color: #b6cfe6; }
.demo-label { background: #6397d214; border-color: #7ca7d447; color: #b0c6de; border-radius: 50px; padding: 4px 8px; }
.transcript small { color: #93a5c5; }
.transcript p { color: #dae6f7; }
.flow-caption { color: #a2b6cf; border-top-color: #829db727; }
.flow-caption > span { color: #86dff4; animation: packet-drift 3s ease-in-out infinite; }
.outline { border: 1px solid #80c1ee60; background: #639de10d; color: #bcecff; border-radius: 9px; box-shadow: none; }
.outline:hover { background: #86b9f220; color: #e5faff; box-shadow: 0 0 22px #86b9f214; }
.knowledge-files { background: #070f1f77; }
.file { border-bottom-color: #7997c020; color: #c0d0e9; }
.file > span { color: #97c9ec; animation: document-glow 6s ease-in-out infinite; }
.file:nth-child(2n) > span { animation-delay: -2s; }
.file:nth-child(3n) > span { animation-delay: -4s; }
.file small { color: #7f99bc; }
.file b { color: #7ce9ff; }
.knowledge-core { background: radial-gradient(circle, #8194ff14, transparent 69%); overflow: hidden; }
.core-orbit { border-color: #86b8fc73; box-shadow: 0 0 30px #785fde18; }
.core-orbit::before { border-color: #98c9ff5c; animation: knowledge-orbit 9s linear infinite; }
.core-orbit::after { border-color: #a691f477; animation: knowledge-orbit 13s linear infinite reverse; }
.core-orbit b { color: #b6eaff; text-shadow: 0 0 20px #9993ff8a; animation: brain-turn 8s ease-in-out infinite; }
.knowledge-core small { color: #9caacd; }
.knowledge-chat { border-left-color: #829db72d; }
.question { border-radius: 11px; border-color: #80b8f338; background: linear-gradient(100deg, #245b773e, #5039812c); color: #e3ecfa; }
.answer p { color: #aebdd6; }
.answer small { color: #a4d8ed; background: #275c7c36; border-radius: 50px; }
.question-options button { color: #b6c8e5; border-color: #78a7dc46; border-radius: 50px; }
.question-options button[aria-pressed=true] { background: #4b91bb25; color: #d1f6ff; border-color: #85d6f281; }
.fine { color: #8d9dbb !important; }
.ecosystem { background: radial-gradient(circle, #408dbc16, #6f62c209 42%, transparent 72%); }
.ecosystem::before { content: ''; pointer-events: none; position: absolute; inset: 10%; border: 1px dashed #8ca9de29; border-radius: 50%; animation: scene-orbit 55s linear infinite; }
.ecosystem path { stroke: #77bcd7; stroke-width: 1.3; stroke-dasharray: 3 11; opacity: .65; animation-duration: 6s; }
.engine { background: linear-gradient(145deg, #234368db, #281f48db); border-color: #8ccbff79; color: #b5eaff; border-radius: 26px; box-shadow: inset 0 0 25px #85a9ff1c, 0 0 60px #6896ff25; }
.engine::before { content: ''; position: absolute; inset: -9px; border: 1px solid #91b9ee32; border-radius: 33px; animation: engine-ripple 4s ease-out infinite; }
.system { background: linear-gradient(145deg, #1a2b46d9, #151f38d9); border-color: #739cca58; color: #b7d3e9; border-radius: 10px; box-shadow: 0 7px 18px #0409144d; transition: border-color .25s, background .25s, box-shadow .25s; }
.system:hover, .system.selected { background: linear-gradient(145deg, #326688a8, #3f3a759c); border-color: #a3e6ff; color: #effcff; box-shadow: 0 0 24px #69bbd924; }
.integration-description { border-left-color: #8de2ff; }

.automation { background: linear-gradient(105deg, #1126429c, #141633b8 65%, #11263d6b); border-block-color: #80b5f12d; padding-top: 75px; backdrop-filter: blur(12px); }
.workflow-step { border-top-color: #709dca54; }
.workflow-step::after { background: #516f9a; }
.workflow-step small { color: #91aacc; }
.workflow-step > span, .workflow-step h3 { color: #92a8cb; }
.workflow-step.running { border-top-color: #a2e9ff; }
.workflow-step.running > span { text-shadow: 0 0 17px #97e6ff65; }
.workflow-step.running::after { background: #b1f3ff; box-shadow: 0 0 15px #a1dfff; }
.text-button { border-bottom-color: #729dd566; }
.industry-tabs button { border-color: #729dd534; background: #101d327a; color: #b0c3dc; border-radius: 50px; padding: 12px 19px; transition: background .25s, border-color .25s; }
.industry-tabs button:hover { border-color: #8cdaee82; }
.industry-tabs button.active { background: linear-gradient(110deg, #8fe8fa, #a3c9ff); color: #09162b; border-color: #c7f2ff8c; }
.industry-result { border-radius: 19px; background: linear-gradient(105deg, #1938539c, #222045a8); padding: 38px 42px; }
.industry-result > span { color: #96b9db; }
.industry-result h3 { color: #eff7ff; font-size: 32px; }
.industry-result p { color: #aebfd7; }
.process-grid > div { border-color: #83ace943; }
.process-grid p, .why-grid p, .usecase-grid p { color: #a1b3cf; }
.process-grid small { font-size: 11px; color: #a2dff2; padding: 6px 9px; border-radius: 8px; border: 1px solid #94b7e130; background: #31517a29; }
.why-grid > div { border-color: #8eadde38; padding: 26px 5px 10px; }
.why-grid > div > .accent { display: inline-grid; place-items: center; width: 33px; height: 33px; border: 1px solid #83bde338; background: #86b3eb12; border-radius: 9px; }
.stack-section { border-block-color: #85a2e12c; background: linear-gradient(110deg, #1524478c, #1717315c); backdrop-filter: blur(12px); }
.stack-section .wrap > p { color: #c8d7f1; }
.marquee span { color: #bccbea; }
.marquee b { color: #8fa5da; }
.usecase-grid { gap: 0 42px; }
.usecase-grid a { border-bottom-color: #7b9ad333; padding: 23px 15px; border-radius: 9px 9px 0 0; transition: background .25s, padding-left .25s; }
.usecase-grid a:hover { background: #4382b417; padding-left: 22px; }
.final-cta { position: relative; background: radial-gradient(ellipse at 50% 50%, #5389e724, #7842d30d 42%, transparent 65%); }
.final-cta::before { content: ''; position: absolute; inset: 12% 20%; border: 1px solid #99b9ff17; border-radius: 50%; transform: rotate(-20deg); pointer-events: none; animation: cta-halo 12s ease-in-out infinite alternate; }
.final-cta > * { position: relative; }
.final-cta h2 { font-weight: 650; }
.final-cta h2 > span { color: #c5d7f4; }
.contact-section { border-top-color: #8eadde35; }
.contact-phone { color: #d1ebff; }
.location { color: #9bb4d2; }
label { color: #c4d4ec; }
input, select, textarea { background: #0f1c30a3; border-color: #86acdc3a; border-radius: 9px; color: #e8f3ff; transition: background .25s, border-color .25s, box-shadow .25s; }
input::placeholder, textarea::placeholder { color: #8397b7; }
input:focus, select:focus, textarea:focus { border-color: #83dafa; background: #142642d9; box-shadow: 0 0 24px #91d8ff0d; }
footer { background: #071021ba; border-top-color: #8eaadc2d; backdrop-filter: blur(16px); }
.footer-main p { color: #c4d5ee; }
.footer-links a, .footer-bottom { color: #98adcd; }
.footer-bottom { border-top-color: #8da9d728; }
.whatsapp { background: linear-gradient(110deg, #97edff, #a0cafb); color: #08263b; border: 1px solid #d2faff96; box-shadow: 0 8px 35px #0007, 0 0 20px #83cfff17; }
.motion-toggle { position: fixed; z-index: 18; top: auto; bottom: 24px; left: 25px; right: auto; display: inline-flex; align-items: center; gap: 7px; min-height: 35px; padding: 8px 12px; color: #b9cce3; font-size: 10px; letter-spacing: .5px; background: #0c182bce; border: 1px solid #8baed349; border-radius: 50px; backdrop-filter: blur(16px); box-shadow: 0 6px 25px #0003; }
.motion-toggle:hover { color: #e2faff; border-color: #9be1ff7a; }
.page-hero { min-height: 590px; padding-block: 52px; }
.page-hero h1 { font-size: clamp(44px, 4.8vw, 68px); }
.page-hero .hero-visual { height: 510px; }

/* Reveal classes are added only after JS starts; content stays available without JS. */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.65,.25,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal:focus-within, body.motion-paused .reveal { opacity: 1; transform: none; }
.reveal.in-view.tilt-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
.hero-visual::before, .hero-visual::after, .scene-label, .scene-label::after, .scene-hud::before { animation-play-state: paused; }
.hero-visual.motion-in-view::before, .hero-visual.motion-in-view::after, .motion-in-view .scene-label, .motion-in-view .scene-label::after, .motion-in-view .scene-hud::before { animation-play-state: running; }
.solution-card .wave i, .voice-demo .wave i, .brain-art span, .brain-art b, .brain-art::after, .api-art span, .api-art b, .service-symbol, .file > span, .core-orbit::before, .core-orbit::after, .core-orbit b, .ecosystem::before, .ecosystem path, .engine::before, .flow-caption > span, .final-cta::before, .marquee > div { animation-play-state: paused; }
.motion-in-view .wave i, .motion-in-view .brain-art span, .motion-in-view .brain-art b, .motion-in-view .brain-art::after, .motion-in-view .api-art span, .motion-in-view .api-art b, .motion-in-view .service-symbol, .motion-in-view .file > span, .motion-in-view .core-orbit::before, .motion-in-view .core-orbit::after, .motion-in-view .core-orbit b, .motion-in-view .ecosystem::before, .motion-in-view.ecosystem::before, .motion-in-view .ecosystem path, .motion-in-view.ecosystem path, .motion-in-view .engine::before, .motion-in-view .flow-caption > span, .motion-in-view.final-cta::before, .motion-in-view .marquee > div, .motion-in-view.marquee > div { animation-play-state: running; }

@keyframes aurora-drift { from { transform: translate(-2%, -1%) rotate(-3deg) scale(1); } to { transform: translate(3%, 3%) rotate(4deg) scale(1.1); } }
@keyframes grid-drift { to { background-position: 84px 84px; } }
@keyframes brand-breathe { 0%, 100% { box-shadow: inset 0 1px 12px #85d0ff18, 0 0 25px #3391be12; } 50% { box-shadow: inset 0 1px 12px #85d0ff38, 0 0 30px #8879d22b; } }
@keyframes status-breathe { 0%, 100% { opacity: .6; box-shadow: 0 0 7px #86e7ff50; } 50% { opacity: 1; box-shadow: 0 0 15px #b1f4ff98; } }
@keyframes headline-light { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes scene-orbit { to { transform: rotate(336deg); } }
@keyframes label-float { 0%, 100% { transform: translateY(0) rotate(var(--label-rotation, 0deg)); } 50% { transform: translateY(-13px) rotate(calc(var(--label-rotation, 0deg) - 2deg)); } }
@keyframes section-light { from { transform: translate3d(0, -25px, 0) scale(.9); opacity: .7; } to { transform: translate3d(40%, 65px, 0) scale(1.3); opacity: 1; } }
@keyframes file-orbit { 0%, 100% { transform: translateY(2px) rotate(-7deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes brain-turn { 0%, 100% { transform: rotate(7deg) scale(1); } 50% { transform: rotate(-7deg) scale(1.08); } }
@keyframes node-charge { 0%, 75%, 100% { border-color: #82b4f161; box-shadow: 0 7px 20px #0002; transform: translateY(0); } 35% { border-color: #a8edffbb; box-shadow: 0 0 23px #76c8ff2b; transform: translateY(-4px); } }
@keyframes packet-drift { 0%, 100% { transform: translateX(-2px); opacity: .45; } 50% { transform: translateX(3px); opacity: 1; } }
@keyframes icon-breathe { 0%, 100% { transform: translateY(0); box-shadow: inset 0 1px #a8e1ff18, 0 0 0 #729fff00; } 50% { transform: translateY(-4px); box-shadow: inset 0 1px #a8e1ff30, 0 0 20px #729fff24; } }
@keyframes document-glow { 0%, 80%, 100% { color: #97c9ec; text-shadow: none; } 35% { color: #caf7ff; text-shadow: 0 0 13px #90dfff8a; } }
@keyframes knowledge-orbit { from { transform: rotate(45deg) rotateY(20deg); } to { transform: rotate(405deg) rotateY(20deg); } }
@keyframes engine-ripple { 0% { transform: scale(1); opacity: .8; } 85%, 100% { transform: scale(1.3); opacity: 0; } }
@keyframes cta-halo { from { transform: rotate(-20deg) scale(.92); opacity: .4; } to { transform: rotate(10deg) scale(1.13); opacity: 1; } }

@media (min-width: 1600px) {
  .hero { min-height: 850px; }
  .hero h1 { font-size: 76px; }
  .hero-visual { height: 655px; }
  .page-hero h1 { font-size: 72px; }
}
@media (max-width: 1250px) {
  .header nav { gap: 11px; }
  .header nav > a { font-size: 11px; }
  .brand { font-size: 21px; }
  .brand small { font-size: 7px; }
  .hero h1 { font-size: clamp(45px, 5.25vw, 68px); letter-spacing: -3.5px; }
  .hero-visual { height: 535px; }
  .scene-label { padding: 10px 12px; }
  .scene-label span { font-size: 8px; letter-spacing: 1px; }
  .solution-card { padding: 25px; }
  .solution-card h3 { font-size: 26px; }
  .page-hero h1 { font-size: 56px; }
}
@media (max-width: 1050px) {
  .header { height: 84px; }
  .header nav { top: 84px; background: #0b152beF; border-bottom-color: #648cca4d; backdrop-filter: blur(22px); }
  .header nav > a { font-size: 14px; }
  .header nav > a::after { bottom: 3px; width: 28px; }
  .hero { min-height: 670px; padding-top: 55px; }
  .hero h1 { font-size: 54px; letter-spacing: -2.9px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  .hero p { font-size: 15px; }
  .hero-visual { height: 470px; margin-left: -28px; }
  .visual-label { left: 17px; top: 7px; font-size: 8px; }
  .scene-label { font-size: 19px; padding: 10px 11px; }
  .scene-label span { font-size: 7px; }
  .scene-label::after { margin-left: 2px; width: 3px; height: 3px; }
  .scene-bottom { font-size: 6px; letter-spacing: 1px; }
  .scene-hud { bottom: 47px; font-size: 7px; padding: 9px 12px; }
  .scene-hud b { font-size: 12px; }
  .story-strip { padding: 24px; gap: 15px; }
  .story-strip > div { font-size: 10px; }
  .page-hero h1 { font-size: 48px; }
  .page-hero .hero-visual { height: 445px; }
}
@media (max-width: 768px) {
  .header { height: 76px; }
  .header nav { top: 76px; }
  .brand { font-size: 22px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 30px; }
  .hero { padding-top: 43px; padding-bottom: 29px; min-height: auto; }
  .hero-content { padding-right: 0; }
  .hero h1 { font-size: clamp(47px, 8.4vw, 70px); letter-spacing: -3px; margin-top: 24px; }
  .hero h1 > span:not(.hero-highlight) { font-size: .49em; letter-spacing: -1px; margin-top: 17px; }
  .hero p { font-size: 16px; max-width: 520px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1.3px; padding: 8px 10px; }
  .hero-note { margin-top: 28px; font-size: 8px; }
  .hero-visual { height: 465px; margin-left: 0; margin-top: 8px; max-width: 540px; }
  .hero-visual::before { inset: 7% 6%; }
  .visual-label { left: 18px; top: 7px; }
  .scene-label { font-size: 21px; padding: 11px 13px; }
  .scene-label span { font-size: 8px; }
  .label-voice { right: 6%; top: 25%; }
  .label-brain { right: 4%; bottom: 27%; }
  .label-api { left: 4%; bottom: 24%; }
  .scene-bottom { font-size: 7px; letter-spacing: .9px; }
  .scene-hud { bottom: 46px; }
  .story-strip { border-radius: 13px; padding: 22px 16px; gap: 10px; }
  .story-strip > div { font-size: 9px; }
  .story-strip small { display: inline-block; font-size: 8px; padding: 3px 5px; margin-bottom: 8px; }
  .story-strip > div::after { right: 5px; bottom: -10px; }
  .section { padding-top: 80px; }
  .section::before { width: 95%; height: 220px; left: -10%; }
  h2 { font-size: 36px; letter-spacing: -1.4px; }
  .solution-card { padding: 26px 28px; border-radius: 18px; }
  .solution-card p { font-size: 14px; }
  .solution-card h3 { font-size: 28px; }
  .brain-art, .api-art { height: 140px; }
  .solution-card:hover, .tilt-card:hover { --lift: 0px; }
  .tilt-card { transform-style: flat; }
  .knowledge-chat { border-top-color: #799cc82f; }
  .service-card { padding: 25px; }
  .industry-result { padding: 28px; }
  .industry-result h3 { font-size: 29px; }
  .automation { padding-top: 56px; }
  .final-cta { padding-block: 87px; }
  .final-cta::before { inset: 15% 5%; }
  .final-cta h2 { font-size: 45px; }
  .contact-section { padding-top: 68px; }
  .contact-phone { font-size: 25px; }
  .motion-toggle { left: 17px; bottom: 18px; font-size: 9px; min-height: 32px; }
  .page-hero h1 { font-size: clamp(43px, 7.5vw, 60px); }
  .page-hero .hero-visual { height: 420px; }
  .footer-bottom { padding-bottom: 88px; }
}
@media (max-width: 430px) {
  .hero h1 { font-size: 44px; letter-spacing: -2.5px; }
  .hero h1 > span:not(.hero-highlight) { font-size: .49em; }
  .hero .eyebrow { font-size: 7px; letter-spacing: .8px; }
  .hero p { font-size: 15px; }
  .hero .actions { gap: 15px; }
  .button { padding: 15px 18px; font-size: 12px; gap: 24px; }
  .hero-visual { height: 375px; }
  .visual-label { font-size: 7px; padding: 8px 10px; top: 4px; left: 5px; }
  .visual-label small { font-size: 6px; }
  .scene-label { padding: 9px 10px; font-size: 18px; border-radius: 11px; }
  .scene-label span { font-size: 6px; letter-spacing: .9px; }
  .scene-hud { bottom: 39px; padding: 8px 11px; font-size: 6px; letter-spacing: 1.4px; }
  .scene-hud b { font-size: 11px; }
  .scene-bottom { font-size: 6px; letter-spacing: .6px; }
  .story-strip { gap: 6px; padding: 18px 13px; }
  .story-strip > div { font-size: 8px; line-height: 1.5; }
  .section { padding-top: 70px; }
  h2 { font-size: 32px; }
  .solution-card { padding: 25px; }
  .service-card p { font-size: 13px; }
  .industry-tabs { gap: 7px; }
  .industry-tabs button { font-size: 11px; padding: 10px 14px; }
  .industry-result { padding: 25px; }
  .system { font-size: 8px; padding: 9px 7px; border-radius: 7px; }
  .engine { border-radius: 21px; }
  .engine::before { border-radius: 27px; }
  .final-cta h2 { font-size: 36px; }
  .page-hero h1 { font-size: 40px; }
  .page-hero .hero-visual { height: 370px; }
  .form-grid { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .tilt-card, .reveal.in-view.tilt-card, .tilt-card:hover { transform: none; }
  .scene-label { transform: rotate(var(--label-rotation, 0deg)); }
  .ambient-aurora { opacity: .45; }
}
body.motion-paused *, body.motion-paused *::before, body.motion-paused *::after { animation-play-state: paused !important; }
html,body{overflow-x:clip}
body.motion-paused *{transition:none!important}body.motion-paused .reveal,.reveal:focus-within{opacity:1;transform:none;transition:none}