:root {
  color-scheme: dark;
  --bg: #080c14;
  --panel: #101722;
  --line: #253145;
  --ink: #f2f5fb;
  --muted: #aab8cc;
  --blue: #78b9ff;
  --bright: #227cf0;
  --gutter: clamp(20px, 5vw, 84px);
  font-family: Inter, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid #a5d4ff; outline-offset: 5px; }
[id] { scroll-margin-top: 105px; }
.shell { width: min(100% - var(--gutter) * 2, 1350px); margin-inline: auto; }
.skip { position: fixed; z-index: 5; top: 10px; left: 10px; padding: 12px 18px; background: #124b9b; clip-path: inset(50%); }
.skip:focus { clip-path: none; }
.header { position: sticky; top: 0; z-index: 3; background: #080c14f5; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; min-height: 77px; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img { width: 145px; }
.header nav { display: flex; align-items: center; gap: clamp(10px, 1.45vw, 26px); }
.header nav a { font-size: .84rem; font-weight: 600; color: #c6d1e0; white-space: nowrap; }
.header nav a:hover, .text-link:hover, address a:hover { color: #d5ebff; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; padding: 10px 17px; border: 1px solid #3a4b64; border-radius: 5px; font-size: .87rem; line-height: 1.3; font-weight: 650; transition: background-color .2s, border-color .2s; }
.button span, .text-link span { flex: none; }
.button:hover { background: #1b2d46; border-color: var(--blue); }
.header-demo { white-space: nowrap; min-height: 40px; }
.primary { background: #115bc6; border-color: #3783ec; color: white; }
.primary:hover { background: #1767d8; }
.secondary { background: #0c1422bd; }
.menu { color: var(--ink); background: var(--panel); border: 1px solid var(--line); min-height: 44px; border-radius: 5px; padding: 8px 12px; cursor: pointer; }
.menu span { margin-left: 5px; }
.eyebrow { margin: 0 0 20px; color: var(--blue); font-size: .72rem; font-weight: 750; letter-spacing: .16em; line-height: 1.5; }
.eyebrow span { display: inline-block; width: 20px; height: 1px; vertical-align: middle; margin-right: 7px; background: #70bdff; box-shadow: 0 0 12px #2589f9; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2 { line-height: 1.01; letter-spacing: -.065em; font-weight: 680; }
h1 { font-size: clamp(3.1rem, 6.5vw, 7.1rem); margin-bottom: 25px; }
em { font-style: normal; color: #99c9ff; }
.hero-description { max-width: 39ch; color: #c0cee1; font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.section { padding-block: clamp(62px, 8.5vw, 132px); }
.section-head, .split { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 6vw, 98px); }
.section-head { align-items: end; margin-bottom: 34px; }
.split { align-items: center; }
h2 { font-size: clamp(2.25rem, 4.25vw, 4.9rem); margin-bottom: 0; }
h3 { font-size: clamp(1.2rem, 2.15vw, 1.9rem); line-height: 1.17; letter-spacing: -.035em; margin-bottom: 10px; }
.section p:not(.eyebrow), .careers p:not(.eyebrow) { color: var(--muted); line-height: 1.65; margin-bottom: 0; max-width: 48ch; }
.split h2 + p, .careers h2 + p { margin-top: 18px; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card, .demo, .brand-panel { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.card-copy, .demo { padding: clamp(20px, 3vw, 38px); }
.card-copy .eyebrow { margin-bottom: 11px; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-size: .94rem; font-weight: 650; padding-block: 10px; }
.card .text-link { margin-top: 14px; }
.future, .careers { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.future { border-top: 1px solid var(--line); padding-top: 23px; margin-top: 26px; }
.future h3 { font-size: 1.24rem; }
.band { background: #0d131e; border-block: 1px solid var(--line); }
.solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.solution-grid article { padding: clamp(18px, 3vw, 36px); border-right: 1px solid var(--line); }
.solution-grid article:first-child { padding-left: 0; }
.solution-grid article:last-child { border-right: 0; }
.service-mark { display: block; color: var(--blue); font-size: 1.55rem; margin-bottom: 16px; }
.section-link { margin-top: 18px; }
.ai-list { margin: 0; border-top: 1px solid var(--line); }
.ai-list div { padding: 17px 0; border-bottom: 1px solid var(--line); }
.ai-list dt { font-weight: 650; }
.ai-list dd { color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.brand-panel { background: radial-gradient(ellipse at center, #182638, #0c121e 72%); display: grid; place-items: center; padding: 30px; }
.brand-panel img { width: min(100%, 335px); }
.careers { padding-block: clamp(44px, 6vw, 82px); }
.careers h2 { font-size: clamp(2rem, 3.7vw, 3.6rem); }
.contact { border-block: 1px solid var(--line); background: radial-gradient(ellipse at 72% 110%, #142a4c, transparent 70%), #0b111c; }
address { display: grid; justify-items: start; gap: 8px; margin-top: 20px; font-style: normal; color: var(--blue); overflow-wrap: anywhere; }
address a { padding-block: 5px; }
.demo-links { display: grid; gap: 10px; margin-top: 20px; }
.demo-links a:target { border-color: var(--blue); background: #183454; }
.footer { min-height: 115px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-block: 20px; }
.footer p { color: var(--muted); font-size: .85rem; margin: 0; }
.arrived { animation: enter .55s ease both; }
@keyframes enter { from { opacity: .65; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 950px) {
  .header-inner { min-height: 67px; flex-wrap: wrap; position: relative; }
  .header nav { order: 3; flex: 1 0 100%; flex-wrap: wrap; padding-bottom: 12px; }
  .header nav a { padding: 10px; }
  .menu { margin-left: auto; }
}
@media (max-width: 640px) {
  .header-demo { display: none; }
  .header .brand img { width: 124px; }
  h1 { font-size: clamp(2.7rem, 10vw, 4.2rem); }
  .hero-description { max-width: 33ch; }
  .section-head, .split, .product-grid, .solution-grid { grid-template-columns: 1fr; }
  .solution-grid article { padding: 22px 0; border-right: 0; }
  .solution-grid article + article { border-top: 1px solid var(--line); }
  .footer { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Artwork and atmospheric details */
.hero-particles i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size, 3px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #88caff;
  box-shadow: 0 0 9px 2px #288fff85;
  opacity: .35;
  animation: particle-drift 4.6s ease-in-out var(--delay) both;
}
.hero-particles i:nth-child(1) { --x: 60%; --y: 19%; --delay: .08s; }
.hero-particles i:nth-child(2) { --x: 88%; --y: 24%; --delay: .240s; --size: 2px; }
.hero-particles i:nth-child(3) { --x: 93%; --y: 57%; --delay: .160s; }
.hero-particles i:nth-child(4) { --x: 72%; --y: 80%; --delay: .04s; --size: 2px; }
.hero-particles i:nth-child(5) { --x: 52%; --y: 68%; --delay: .280s; --size: 2px; }
.hero-particles i:nth-child(6) { --x: 79%; --y: 12%; --delay: .200s; }
@keyframes particle-drift {
  from { transform: translate3d(0, 9px, 0); opacity: .28; }
  to { transform: translate3d(9px, -12px, 0); opacity: .42; }
}
.card {
  transition: border-color .25s, box-shadow .25s;
}
.card:hover, .card:focus-within {
  border-color: #43698f;
  box-shadow: 0 12px 40px #030711;
}
.product-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  border-bottom: 1px solid var(--line);
  background: #0a1220;
}
.product-art img, .innovation-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-art img { object-position: center 55%; transition: transform .45s ease; }
.card:hover .product-art img { transform: scale(1.035); }
.solutions {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0c131f;
}
.solutions-art, .solutions::before {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.solutions-art { z-index: -2; object-fit: cover; object-position: center 54%; }
.solutions::before {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, #0b111cf7 10%, #0b111ca6 52%, #0b111c70),
    linear-gradient(0deg, #0b111c 0%, transparent 68%);
}
.solutions .solution-grid {
  border: 1px solid #36516b;
  border-radius: 9px;
  background: #0e1828d9;
}
.solutions .solution-grid article:first-child { padding-left: clamp(18px, 3vw, 36px); }
.innovation {
  background: radial-gradient(ellipse at 85% 50%, #112842, transparent 64%), #080c14;
  border-bottom: 1px solid #22374c;
}
.innovation-inner { grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); }
.innovation .ai-list { margin-top: 28px; }
.innovation-art {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #315577;
  border-radius: 9px;
  background: #0a1424;
  box-shadow: 0 20px 90px #0379e01b;
}
#about {
  border-top: 0;
  background: linear-gradient(155deg, #0c1522, #0d131e 58%);
}
@media (max-width: 640px) {
  .hero-particles i:nth-child(n + 4) { display: none; }
  .product-art { aspect-ratio: 16 / 9; }
  .innovation-inner { grid-template-columns: 1fr; }
  .innovation-art { aspect-ratio: 16 / 10; grid-row: 1; }
  .solutions .solution-grid article, .solutions .solution-grid article:first-child { padding: 22px 18px; }
}

/* Cinematic homepage */
:root {
  --bg: #030d16;
  --panel: #091724;
  --line: #20384e;
  --blue: #49c5ff;
  --gutter: clamp(20px, 10vw, 168px);
}
.header { background: #030a12f7; border-color: #102030; }
.header .shell { width: min(100% - clamp(36px, 17vw, 282px), 1395px); }
.header-inner { min-height: 64px; }
.brand { gap: 8px; line-height: 1.03; }
.brand img { width: 90px; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.17rem; }
.brand small { font-size: .93rem; margin-top: 3px; }
.header nav { gap: clamp(15px, 2.5vw, 39px); }
.header nav a { color: var(--ink); position: relative; }
.header nav a[aria-current]::after {
  content: ""; position: absolute; height: 2px; border-radius: 8px;
  inset: auto 0 -10px; background: #21c6ff; box-shadow: 0 0 12px 3px #078bff99;
}
.button { border-radius: 11px; cursor: pointer; }
.primary { background: linear-gradient(110deg, #075ed9, #0564dd 70%, #087dbf); box-shadow: 0 0 18px #087ffc44; }
.primary:hover { background: #125cb9; }
.secondary { background: #04111cbf; }
.header-demo { min-height: 40px; }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: url("assets/digital-wave.svg") center 55% / 100% 100% no-repeat,
    radial-gradient(ellipse at 76% 54%, #083053, transparent 54%), linear-gradient(#061522, var(--bg));
}
.hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); align-items: center; min-height: clamp(330px, 25vw, 435px); }
.hero-content { position: relative; z-index: 1; padding: 33px 0; }
.hero .eyebrow { margin-bottom: 11px; color: #a1adbe; letter-spacing: .075em; }
.hero h1 { font-size: clamp(2.25rem, 3.35vw, 3.7rem); font-weight: 770; line-height: 1.02; letter-spacing: -.045em; margin-bottom: 15px; text-wrap: initial; }
.hero h1 em { display: block; color: #16b9ff; }
.hero-description { color: #e2e8f0; font-size: clamp(.98rem, 1.22vw, 1.2rem); line-height: 1.45; max-width: 55ch; }
.actions { margin-top: 20px; gap: 14px; }
.play-icon { border: 1px solid currentColor; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font-size: .63rem; padding-left: 1px; }
#open-overview { gap: 8px; }
.hero-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.logo-stage { position: relative; width: 122%; margin-left: -3%; aspect-ratio: 1.98; align-self: center; }
.stage-platform {
  position: absolute; inset: auto 0 5%; height: 25%; border-radius: 50%;
  border: 2px solid #0cc3ff; background: radial-gradient(ellipse at 50% 30%, #114b77, #051728 58%, #02070e 73%);
  box-shadow: 0 6px 0 #274f71, 0 10px 0 #0c1725, 0 13px 0 #0d73bb, 0 18px 0 #050a13, 0 21px 20px #0075e077, inset 0 0 15px #23bbff;
}
.stage-platform::after {
  content: ""; position: absolute; inset: 13% 6% 23%; border-radius: 50%;
  border: 1px solid #62d7ff8c; box-shadow: inset 0 0 16px #078aff, 0 0 16px #067aff;
}
.emblem { position: absolute; width: 82%; left: 9%; bottom: 19%; isolation: isolate; }
.emblem img { width: 100%; position: relative; filter: drop-shadow(0 3px 1px #b9d5ee66) drop-shadow(0 11px 8px #010812) drop-shadow(0 0 16px #0068d263); }
.emblem-depth, .emblem-shine { position: absolute; inset: 0; pointer-events: none; }
.emblem-depth { background: linear-gradient(135deg, #63758d, #0c2d55 54%, #58b7e2); transform: translate(1.15%, 2.5%); }
.emblem-shine { background: linear-gradient(122deg, transparent 38%, #d1ecff9e 46%, #5bd7ffb0 50%, transparent 58%) -120% 0 / 65% 100% no-repeat; }
.emblem-pixels { position: absolute; inset: 0; pointer-events: none; }
.emblem-pixels i { position: absolute; width: var(--size); aspect-ratio: 1; left: var(--x); top: var(--y); box-shadow: 0 0 16px 3px #18ceff; opacity: 0; }
.emblem-pixels i:nth-child(1) { --x: 79.5%; --y: 25.3%; --size: 4.1%; --delay: 2.05s; }
.emblem-pixels i:nth-child(2) { --x: 83.3%; --y: 16.6%; --size: 3.9%; --delay: 2.18s; }
.emblem-pixels i:nth-child(3) { --x: 87.5%; --y: 7.66%; --size: 3.2%; --delay: 2.32s; }
.emblem-pixels i:nth-child(4) { --x: 88.5%; --y: 26%; --size: 2%; --delay: 2.45s; }
.emblem-pixels i:nth-child(5) { --x: 90.5%; --y: 16.8%; --size: 2.8%; --delay: 2.58s; }
.emblem { animation: emblem-reveal 3.6s both, emblem-repeat 12s 12s infinite; }
.emblem-shine { animation: metallic-sweep 12s 1s infinite; }
.emblem-pixels i { animation: pixel-glow 12s var(--delay) infinite; }
.stage-platform { animation: platform-light 3.6s both, platform-repeat 12s 12s infinite; }

@keyframes emblem-reveal {
  0% { opacity: .12; transform: translateY(-5%); filter: brightness(.22); }
  30% { opacity: 1; filter: brightness(.78); }
  71% { transform: translateY(-1.8%); filter: brightness(1.08); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* The reveal occupies the first 30% (3.6s) of each 12s repeat. */
@keyframes emblem-repeat {
  0%, 30%, 100% { transform: none; filter: none; }
  9% { transform: translateY(-.6%); filter: brightness(.92); }
  21.3% { transform: translateY(-.35%); filter: brightness(1.08); }
}
@keyframes metallic-sweep {
  0% { background-position: -120% 0; }
  12.0833%, 100% { background-position: 260% 0; }
}
@keyframes energy-sweep {
  0% { background-position: -190% 0; }
  6.25%, 100% { background-position: 260% 0; }
}
@keyframes pixel-glow {
  0%, 4.1667%, 100% { opacity: 0; }
  1.75% { opacity: .85; }
}
@keyframes platform-light { 0% { opacity: .45; } 74% { opacity: .65; } 100% { opacity: 1; } }
@keyframes platform-repeat {
  0%, 30%, 100% { opacity: 1; }
  18% { opacity: .87; }
}
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.9vw, 32px); padding: 0 0 22px; }
.pillar {
  display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); min-width: 0; min-height: 85px;
  background: linear-gradient(145deg, #102439d9, #061320f0 55%, #0c1d2b);
  border: 1px solid #183249; border-radius: 13px; padding: clamp(9px, 1.1vw, 19px);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pillar:hover { border-color: #247db5; box-shadow: 0 5px 25px #06599250; transform: translateY(-3px); }
.pillar svg { flex: none; width: clamp(34px, 4vw, 55px); height: auto; padding: 8px; border-radius: 10px; background: #0b233b; fill: none; stroke: #32c9ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px #078aff80); }
.pillar strong, .pillar small { display: block; }
.pillar strong { font-size: clamp(.84rem, 1.11vw, 1.08rem); }
.pillar small { color: #c0cfdd; margin-top: 4px; font-size: clamp(.75rem, .93vw, .95rem); }
#products { position: relative; padding-top: 26px; border-top: 1px solid #112939; }
#products::before { content: ""; position: absolute; top: -1px; left: calc(50% - 30px); width: 60px; height: 2px; background: #149eff; box-shadow: 0 0 13px #068fff; }
.products-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 18px; margin-bottom: 19px; }
.products-head h2 { font-size: clamp(1.55rem, 2.15vw, 2.35rem); letter-spacing: -.04em; }
.product-grid { gap: clamp(14px, 1.65vw, 28px); }
.card { display: grid; grid-template-columns: 47% minmax(0, 1fr); position: relative; min-height: 190px; border-color: #1d4f78; border-radius: 15px; background: linear-gradient(130deg, #0d2b49, #06121e 55%, #102639); box-shadow: 0 0 18px #005eb33a; }
.card::after { content: ""; pointer-events: none; position: absolute; inset: 0 0 auto auto; border-top: 2px solid #0db7ff; border-right: 2px solid #0db7ff; width: 42px; height: 34px; border-radius: 0 13px 0 0; filter: drop-shadow(0 0 4px #149cff); }
.product-art { aspect-ratio: auto; border: 0; background: #071829; }
.product-art img { position: absolute; inset: 0; }
.card-copy { padding: clamp(14px, 1.55vw, 26px); }
.card-copy .eyebrow { display: inline-block; background: #104eaa; border-radius: 6px; color: white; padding: 3px 7px; letter-spacing: .075em; margin-bottom: 8px; font-size: .65rem; }
.card h3 { font-size: clamp(1.05rem, 1.45vw, 1.5rem); text-wrap: initial; }
.card p:not(.eyebrow) { font-size: .9rem; color: #d1dce7; line-height: 1.45; }
.card .text-link { margin-top: 5px; }
.ecosystem { margin-top: 32px; padding: clamp(18px, 3vw, 36px); border: 1px solid var(--line); border-radius: 14px; background: radial-gradient(ellipse at top, #123353, #071421 70%); text-align: center; }
.ecosystem ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 23px 0 0; padding: 0; list-style: none; }
.ecosystem li { border-top: 1px solid #2c6590; }
.ecosystem a { display: grid; place-items: center; min-height: 52px; padding: 10px 4px; color: #d9efff; font-size: .9rem; }
.ecosystem a:hover { color: var(--blue); }
.ecosystem a::before { content: ""; width: 7px; aspect-ratio: 1; border-radius: 50%; background: #36bbff; box-shadow: 0 0 11px #0b9dff; margin: -14px 0 8px; }
.solutions .more-solutions { margin-top: 12px; }
.about-values { margin-top: 25px; }
.brand-panel p { text-align: center; }
.careers { position: relative; }
.careers::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 90% 60%, #12314f, transparent 60%); }
.contact-grid { align-items: start; gap: 24px clamp(24px, 5vw, 78px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inquiry { grid-area: 1 / 2 / span 2; display: grid; gap: 8px; }
.inquiry p { margin-bottom: 10px !important; }
.inquiry label { font-size: .9rem; font-weight: 650; margin-top: 5px; }
.inquiry :is(input, select, textarea) { width: 100%; min-width: 0; padding: 10px 12px; background: #06111d; color: var(--ink); border: 1px solid #45627d; border-radius: 7px; font: inherit; }
.inquiry textarea { resize: vertical; }
.inquiry .button { justify-self: start; margin-top: 7px; }
.footer { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr .8fr; align-items: start; padding-block: 32px 15px; }
.footer nav, .footer-contact { display: grid; gap: 10px; font-size: .9rem; }
.footer a:hover { color: var(--blue); }
.footer .brand + p { margin-top: 10px; }
.footer-end { grid-column: 1 / -1; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; align-items: center; padding-top: 10px; }
.overview { max-width: min(620px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: clamp(16px, 3vw, 30px); color: var(--ink); background: #081726; border: 1px solid #316088; border-radius: 15px; }
.overview::backdrop { background: #01060cdf; }
.overview-head, .overview-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.overview-head h2 { font-size: clamp(1.15rem, 3.5vw, 1.85rem); letter-spacing: -.04em; }
.overview article img { width: 100%; height: clamp(100px, 29vh, 235px); object-fit: contain; margin-block: 17px; }
.overview article p { color: var(--muted); line-height: 1.5; }
.overview button:disabled { opacity: .5; cursor: default; }
@media (max-width: 1150px) {
  :root { --gutter: clamp(18px, 5vw, 60px); }
  .header .shell { width: min(100% - var(--gutter) * 2, 1395px); }
  .logo-stage { width: 115%; }
}
@media (max-width: 950px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar { padding-inline: 14px; }
  .card { grid-template-columns: 1fr; }
  .product-art { aspect-ratio: 2.2; }
  .header nav a[aria-current]::after { inset: auto 10px 2px; }
}
@media (max-width: 640px) {
  .header .brand img { width: 69px; }
  .header .brand strong { font-size: 1rem; }
  .header .brand small { font-size: .8rem; }
  .hero { background-size: auto 100%, auto, auto; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-content { padding-block: 26px 4px; }
  .hero h1 { font-size: clamp(2.02rem, 8.35vw, 3.3rem); }
  .desktop-break { display: none; }
  .logo-stage { width: min(106%, 470px); margin: 5px auto 16px; }
  .pillars { gap: 8px; }
  .pillar { align-items: flex-start; flex-direction: column; padding: 9px; min-height: 105px; }
  .pillar small { line-height: 1.28; }
  .ecosystem ul { grid-template-columns: 1fr; text-align: left; gap: 0; margin: 14px 0 0; }
  .ecosystem li { border-top: 0; border-left: 1px solid #2c6590; }
  .ecosystem a { display: flex; gap: 10px; padding: 8px 0; margin-left: -4px; }
  .ecosystem a::before { flex: none; margin: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .inquiry { grid-area: auto; }
  .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer > div:first-child { grid-column: 1 / -1; }
}


.overview-controls { flex-wrap: wrap; }
.overview-controls .button { min-width: 0; padding-inline: 10px; }

.emblem-definitions { position: absolute; }
.stage-reflection {
  position: absolute; left: 11.5%; bottom: -9%; width: 77%; height: 22%;
  background: url("assets/aa-emblem.png") center bottom / 100% auto no-repeat;
  transform: scaleY(-1); opacity: .2; filter: blur(3px);
  mask-image: linear-gradient(transparent, #000);
}
.emblem-depth { background: url("assets/aa-emblem.png") center / 100% 100% no-repeat; filter: brightness(.58) saturate(.82); }
.emblem-shine { clip-path: url("#emblem-clip"); }
.emblem-shine::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(158deg, transparent 44%, #21c8ff 49%, transparent 54%) -190% 0 / 65% 100% no-repeat;
  animation: energy-sweep 12s 1.65s infinite;
}
@media (min-width: 1151px) {
  .hero-layout { min-height: clamp(330px, 24vw, 400px); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.17fr); }
  .hero-content { padding-block: 28px 24px; }
  .hero h1 { font-size: clamp(2.65rem, 3.65vw, 3.85rem); }
  .hero-description { font-size: clamp(.99rem, 1.18vw, 1.15rem); max-width: 56ch; }
  .logo-stage { aspect-ratio: 2.2; }
  .emblem { width: 77%; left: 11.5%; bottom: 17%; }
  .pillars { padding-bottom: 19px; }
}
@media (max-width: 640px) {
  .desktop-break { display: initial; }
  .hero .actions { gap: 8px; }
  .hero .actions .button { font-size: .8rem; padding-inline: 10px; gap: 6px; }
  .logo-stage { width: min(100%, 470px); }
}


.inquiry-fields, .inquiry-product { display: grid; gap: 8px; min-width: 0; }
.inquiry-fields { margin: 0; padding: 0; border: 0; }
.inquiry-fields:disabled .button { cursor: wait; opacity: .75; }
.inquiry p.inquiry-privacy { font-size: .82rem; margin-bottom: 0 !important; }
.inquiry-status:not(:empty), .inquiry-error:not(:empty) {
  padding: 10px 12px;
  border: 1px solid;
  border-radius: 7px;
  font-size: .9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.inquiry-status:not(:empty) { color: #b4f4de; background: #0e292a; border-color: #287760; }
.inquiry-error:not(:empty) { color: #ffd1ca; background: #371d24; border-color: #a45862; }