/* Color and optical materials. Typography stays in readability.css.
   liquid-glass.js supplies a size-matched SVG refraction filter in Chromium. */
:root {
  --bg: #101b45;
  --bg-2: #172858;
  --text: #f6f9ff;
  --accent: #91dcff;
  --glass-rim: rgba(255, 255, 255, .64);
  --glass-light: linear-gradient(125deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .12) 48%, rgba(255, 255, 255, .23));
  --glass-dark: linear-gradient(125deg, rgba(187, 231, 255, .16), rgba(181, 191, 255, .055) 48%, rgba(255, 192, 240, .12));
  --glass-shadow: 0 4px 7px rgba(22, 33, 59, .055), 0 20px 44px rgba(22, 33, 59, .11), inset 0 1.5px 1px rgba(255, 255, 255, .85), inset 0 -2px 2px rgba(67, 87, 124, .12);
  --glass-dark-shadow: 0 4px 7px rgba(2, 7, 20, .13), 0 20px 44px rgba(6, 12, 25, .18), inset 0 1.5px 1px rgba(239, 250, 255, .63), inset 0 -2px 2px rgba(1, 7, 21, .22);
}

::selection { background: #7254e8; color: #fff; }
button:focus-visible, a:focus-visible { outline-color: #45dfff; }
.light-section button:focus-visible, .light-section a:focus-visible { outline-color: #503bce; }
/* Section colors sit below a transparent, viewport-sized WebGL scene.
   Text and cards sit above it; no ancestor filter blocks optical sampling. */
body { background: #102758; }
.scene-mount {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  transform: none;
  background: transparent;
}
#glass-scene {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
}
main, footer { position: relative; z-index: auto; }
.section, .hero, .trust { isolation: auto; z-index: auto; }
.section > .wrap, .hero-inner, .trust-inner, footer > .wrap { position: relative; z-index: 2; }
.hero-bottom { z-index: 2; }
.hero { background: radial-gradient(ellipse at 85% 30%, #57418888, transparent 65%), radial-gradient(ellipse at 65% 85%, #17618766, transparent 65%), #132654; isolation: auto; }
.hero-atmosphere { display: none; }
.hero .hero-gradient {
  color: #b8eaff;
  background: linear-gradient(105deg, #a2f0ff 4%, #bbcdff 50%, #edbdff 94%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.light-section .grad-text { color: #6346bd; }
.status-dot { background: #6be8ca; box-shadow: 0 0 10px #6be8ca55; }
header.scrolled {
  background: rgba(16, 32, 80, .78);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}
.nav { border-bottom-color: rgba(158, 206, 255, .18); }
.trust {
  background: radial-gradient(ellipse at 13% 120%, #1d669264, transparent 65%), linear-gradient(110deg, #122750, #2a2258);
  border-top-color: rgba(144, 206, 255, .23);
}
/* The five figures share one raised glass plate above the moving scene. */
.trust-inner.glass {
  background: linear-gradient(125deg, rgba(181, 230, 255, .19), rgba(163, 183, 236, .075) 48%, rgba(234, 180, 237, .12)), rgba(12, 24, 52, .08);
  border: 1px solid rgba(213, 234, 255, .56);
  border-radius: 26px;
  box-shadow: var(--glass-dark-shadow);
  -webkit-backdrop-filter: blur(3px) saturate(125%);
  backdrop-filter: blur(3px) saturate(125%);
}
.trust-item { border-right-color: rgba(170, 202, 255, .23); }
.trust .stat-number { color: #bceaff; }
.trust-item:nth-child(2) .stat-number { color: #ccbeff; }
.trust-item:nth-child(3) .stat-number { color: #ffcced; }
.trust-item:nth-child(4) .stat-number { color: #b8f6e8; }
.trust-item:nth-child(5) .stat-number { color: #ffe3c3; }

/* Real section backgrounds keep adjacent light and dark areas readable
   while the transparent scene passes continuously across both of them. */
#about, #services, #products, #strength, #cases, .contact {
  isolation: auto;
  overflow: visible;
}
.light-section { color-scheme: light; }
#about.light-section {
  background: radial-gradient(ellipse at 91% 38%, #bcd8ff 0, transparent 54%), radial-gradient(ellipse at 60% 105%, #f4cff1, transparent 47%), linear-gradient(120deg, #f7fbff, #eaf2ff 62%, #e5ddff);
}
#services.light-section {
  background: radial-gradient(ellipse at 7% 35%, #c0f0f7, transparent 57%), radial-gradient(ellipse at 95% 85%, #e9d1ff, transparent 60%), linear-gradient(125deg, #eff8ff, #edf0ff 55%, #f9eafb);
}
#products {
  background: radial-gradient(ellipse at 6% 45%, #08748c66, transparent 59%), radial-gradient(ellipse at 91% 45%, #6c3eac88, transparent 60%), linear-gradient(120deg, #10284d, #242a67 55%, #372354);
}
#strength.light-section {
  background: radial-gradient(ellipse at 5% 80%, #c6f0f7, transparent 56%), radial-gradient(ellipse at 90% 24%, #e6d6ff, transparent 55%), linear-gradient(115deg, #f2f9ff, #eff0ff 60%, #ffedf7);
}
#cases.light-section {
  background: radial-gradient(ellipse at 20% 70%, #c6dfff, transparent 53%), radial-gradient(ellipse at 91% 80%, #f4d0ed, transparent 58%), linear-gradient(120deg, #f1f5ff, #e9f3ff 46%, #f5eaff);
}
.contact {
  background: radial-gradient(ellipse at 4% 38%, #165e8c99, transparent 58%), radial-gradient(ellipse at 100% 80%, #9b4ca057, transparent 55%), linear-gradient(125deg, #122957, #2b2463 60%, #3a245b);
}

/* A rounded refracting edge, fine upper reflection and short lower bevel
   give each transparent face a little physical height. */
.light-section .card.glass,
.light-section .about-visual.glass,
.light-section .honor.glass,
.light-section .case.glass {
  background: var(--glass-light);
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 24px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  backdrop-filter: blur(3px) saturate(120%);
}
.spotlight { isolation: auto; }
.spotlight::before, .spotlight:hover::before {
  content: none;
  display: none;
  background: none;
  box-shadow: none;
}
.about-reflection { opacity: .20; }
.about-visual.glass { background-color: rgba(255, 255, 255, .04); }
.light-section .ico, .capability-orbit span, .about-tags span, .network-node {
  background: linear-gradient(135deg, #ffffff75, #d4edff29 60%, #d6cbff3d);
  border: 1px solid #ffffffb8;
  box-shadow: 0 7px 18px #2964af12, inset 0 1px 0 #ffffffc9;
  -webkit-backdrop-filter: blur(6px) saturate(130%);
  backdrop-filter: blur(6px) saturate(130%);
}
.light-section .ico { border-radius: 16px; }
.card:nth-child(2n) .ico { background: linear-gradient(135deg, #fff9, #c8c2ff4d); }
.card:nth-child(3n) .ico { background: linear-gradient(135deg, #fff9, #f5c3e966); }
.about-tags span { border-radius: 99px; }
.prod.glass {
  background: var(--glass-dark);
  border-color: rgba(205, 226, 255, .47);
  border-radius: 26px;
  box-shadow: var(--glass-dark-shadow);
  -webkit-backdrop-filter: blur(3px) saturate(130%);
  backdrop-filter: blur(3px) saturate(130%);
}
.prod-enterprise.glass { background: linear-gradient(125deg, #b7d5ff24, #b9bbff0c 45%, #efb8e822); }
#products .section-kicker { color: #b8deff; }
.floating-tag, .dashboard-glass {
  background: linear-gradient(135deg, #bef6ff2b, #d4baff14 55%, #fbd0ff26);
  border-color: #d4e6ff8c;
  box-shadow: inset 0 1px 0 #ffffff6e, 0 15px 30px #060d3d26;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}
.achievement-medal {
  background: linear-gradient(130deg, #97f0ff57 2%, #839df51c 24%, #b49aff45 49%, #b962c94f 73%, #ffd5eb66);
  border-color: #c4efffc2;
  box-shadow: inset 3px 3px 8px #d6ffff9c, inset -3px -4px 8px #5c51aa55, 5px 7px 0 -2px #8b73c04d, 0 16px 40px #59bdff24;
}
.achievement-medal svg { stroke: #d6f8ff; fill: #b7a3ff1a; }
.art-orbit { border-color: #a9deff66; }
.orbit-two { border-color: #cba6ff4d; }
.dash-chart i { background: linear-gradient(#78e2edb3, #a98bfa40); border-color: #c6efff33; }
.dash-chart i:nth-child(2n) { background: linear-gradient(#bc9affbb, #9578fa40); }
.dash-chart i:nth-child(3n) { background: linear-gradient(#eda7dfb3, #9e83fc40); }
.platform-list { background: none; box-shadow: none; border-radius: 0; }
.platform-list .p {
  background: linear-gradient(125deg, #c3f2ff17, #c6a7ff0d 56%, #e4ceff17);
  border: 1px solid #c6dcff40;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 #ffffff24, 0 8px 24px #060d3d0f;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.platform-list .dot { background: #92eced; box-shadow: 0 0 10px #81e0ec40; }
.case-art {
  background: radial-gradient(ellipse at 22% 80%, #64d5ea38, transparent 70%), linear-gradient(125deg, #bcf4ff4d, #9ebcff47 56%, #b8b3f352);
  border-bottom-color: #ffffff87;
  box-shadow: none;
}
.inspection-art {
  background: radial-gradient(ellipse at 69% 65%, #ec97d343, transparent 65%), linear-gradient(125deg, #ded0ff5e, #b7c4fa45 55%, #f6c4e14d);
}
.network-center svg { fill: #a5dcff54; stroke: #fff; }
.network-line { background: linear-gradient(90deg, #fff, #7983d966); }
.scan-ring.r1 { border-color: #8d6fd77a; }
.scan-ring.r2 { border-color: #ffffffc7; box-shadow: inset 0 1px 3px #fff9, 0 8px 20px #7a69ce1f; }
.scan-core svg { stroke: #7651b0; }

.contact-panel.glass {
  background: var(--glass-dark);
  border: 1px solid rgba(207, 226, 255, .43);
  border-radius: 28px;
  box-shadow: var(--glass-dark-shadow);
  padding: 32px;
  margin: -32px;
  -webkit-backdrop-filter: blur(3px) saturate(130%);
  backdrop-filter: blur(3px) saturate(130%);
}
.contact-panel.spotlight::before { display: none; }
.phone-block, .contact-details { border-color: #b3d5ff33; }
footer {
  background: radial-gradient(ellipse at 90% 100%, #35307477, transparent 70%), #101d40;
  border-top-color: #96c8ff26;
}
.foot-bottom { border-top-color: #afc9ff24; }

/* Controls are clear capsules; the text is outside the optical filter pipeline. */
.btn, .product-button, .copy-phone, .nav-cta,
.burger, .dialog-close, .back-top, .lang-toggle {
  background: linear-gradient(125deg, rgba(190, 237, 255, .20), rgba(205, 200, 255, .075) 48%, rgba(236, 202, 255, .14));
  border: 1px solid rgba(216, 237, 255, .55);
  border-radius: 99px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 22px rgba(4, 19, 58, .13);
  color: #f6fbff;
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  backdrop-filter: blur(8px) saturate(130%);
}
.btn-primary {
  background: linear-gradient(125deg, #70dff552, #9ba4ff38 52%, #cba2ff40);
  border-color: #d8f6ffb3;
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffffb3, 0 10px 26px #086cbf21;
}
.nav-cta { padding: 0 18px; }
.lang-toggle { padding: 3px; gap: 2px; }
.lang-toggle button {
  border: 0;
  background: transparent;
  color: #c8d9ef;
  border-radius: 99px;
  box-shadow: none;
}
.lang-toggle button.active { background: #d5eaff29; color: #fff; box-shadow: inset 0 1px 0 #e6f6ff4d; }
.burger, .dialog-close, .back-top { border-radius: 50%; }
.burger span { background: #e3f3ff; }
.product-button::before, .copy-phone::before,
.nav-cta::before, .card-link::before { content: none; }
.card-link {
  background: linear-gradient(125deg, #ffffff3b, #dcf2ff33 55%, #dccfff38);
  border: 1px solid #ffffffbf;
  border-radius: 99px;
  padding: 11px 18px;
  box-shadow: inset 0 1px 0 #ffffffb3, 0 5px 15px #4b62b20a;
  -webkit-backdrop-filter: blur(7px) saturate(125%);
  backdrop-filter: blur(7px) saturate(125%);
}
.scroll-circle { background: #c2eeff14; border-color: #c0e6ff66; box-shadow: inset 0 1px 0 #ffffff4d; }

/* A masked specular reflection follows the pointer along the curved rim.
   The content-box cutout is fully transparent: no glow crosses the card face. */
:where(.liquid-glass) { position: relative; }
.liquid-glass {
  --glass-light-angle: 315deg;
  --glass-specular-opacity: 0;
}
.liquid-glass:not(.p)::after,
.platform-list .p.liquid-glass::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 2px;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(
    from calc(var(--glass-light-angle, 315deg) - 36deg),
    transparent 0deg,
    rgba(216, 240, 255, .07) 12deg,
    rgba(255, 255, 255, .55) 24deg,
    #fff 34deg,
    #fff 38deg,
    rgba(255, 255, 255, .55) 48deg,
    rgba(216, 240, 255, .07) 60deg,
    transparent 72deg,
    transparent 198deg,
    rgba(220, 236, 255, .25) 216deg,
    transparent 234deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: var(--glass-specular-opacity, 0);
  transition: opacity 160ms ease;
  box-shadow: none;
  filter: none;
}

/* Generated filters only affect the backdrop, so enlarged text stays crisp. */
.liquid-glass.liquid-ready {
  -webkit-backdrop-filter: var(--liquid-filter) saturate(1.18);
  backdrop-filter: var(--liquid-filter) saturate(1.18);
}
.light-section .liquid-glass.liquid-ready,
.prod.glass.liquid-ready,
.trust-inner.glass.liquid-ready,
.contact-panel.glass.liquid-ready {
  -webkit-backdrop-filter: var(--liquid-filter) saturate(1.18);
  backdrop-filter: var(--liquid-filter) saturate(1.18);
}

.menu {
  background: radial-gradient(ellipse at 87% 16%, #7150b74d, transparent 60%), radial-gradient(ellipse at 3% 91%, #0b92ba40, transparent 60%), rgba(15, 30, 71, .97);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  backdrop-filter: blur(24px) saturate(130%);
}
.menu>a { border-bottom-color: #b8dcff24; }
.menu>a:hover, .menu>a.active { color: #a9e5ff; }
.menu>a::after { color: #a9baff; }
.product-dialog {
  background: radial-gradient(ellipse at 0 0, #3a9bba33, transparent 70%), linear-gradient(135deg, #243e6de8, #333569e8 55%, #543466ed);
  border-color: #cce8ff99;
  box-shadow: inset 0 1px 0 #ffffff94, 0 35px 100px #050c2e80;
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
.product-dialog::backdrop { background: #0c174c80; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }

@media (hover: hover) {
  .light-section .card.glass:hover, .light-section .honor.glass:hover, .light-section .case.glass:hover {
    box-shadow: var(--glass-shadow);
  }
  .prod.glass:hover { box-shadow: var(--glass-dark-shadow); }
  .btn:hover, .product-button:hover, .copy-phone:hover,
  .nav-cta:hover, .burger:hover, .dialog-close:hover, .back-top:hover {
    background: linear-gradient(125deg, #ace6ff47, #c9baff26 50%, #d7b5ff3d);
    border-color: rgba(216, 237, 255, .55);
    box-shadow: inset 0 1px 0 #ffffff80, 0 10px 26px rgba(15, 26, 44, .15);
    color: #fff;
  }
  .btn-primary:hover { background: linear-gradient(125deg, #7ae5f96e, #a9b1ff52 52%, #d8b0ff59); }
  .card-link:hover { background: linear-gradient(125deg, #ffffff80, #d4f3ff66 55%, #dfd0ff66); border-color: #ffffffbf; }
  .platform-list .p:hover { background: linear-gradient(125deg, #baf4ff2e, #c3adff1f 56%, #ebccff2b); border-color: #d1eaff85; }
}

@media (max-width: 700px) {
  .trust-inner.glass { border-radius: 22px; }
  .contact-panel.glass { padding: 24px 16px; margin: -8px; border-radius: 24px; }
  .lang-toggle { padding: 2px; }
  .lang-toggle button { border-radius: 99px; }
}

@media (prefers-reduced-transparency: reduce) {
  .light-section .card.glass, .light-section .about-visual.glass,
  .light-section .honor.glass, .light-section .case.glass { background: linear-gradient(135deg, #f0f9ff, #eae9ff); }
  .prod.glass, .trust-inner.glass, .platform-list .p, .contact-panel.glass, .product-dialog { background: linear-gradient(135deg, #204a72, #3b336b); }
  .liquid-glass.liquid-ready, .light-section .liquid-glass.liquid-ready,
  .prod.glass.liquid-ready, .trust-inner.glass.liquid-ready, .contact-panel.glass.liquid-ready { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .liquid-glass::after, .platform-list .p.liquid-glass::before { transition: none; }
}