:root {
  --bg: #080a0c;
  --panel: #202225;
  --text: #f4f5f7;
  --muted: #b9bbc1;
  --green: #a7e900;
  --green-bright: #aeef00;
  --line: rgba(255,255,255,.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.site-header {
  height: 98px;
  padding: 0 64px 0 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, #090b0d 0%, #080a0c 100%);
  position: relative;
  z-index: 10;
}
.brand, .footer-brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.brand img { display: block; width: 207px; height: 56px; object-fit: contain; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 2.8vw, 48px); margin-left: auto; margin-right: clamp(35px, 7.6vw, 128px); }
.nav-link {
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  position: relative;
  color: #d1d2d6;
  font-size: 15px;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-link:hover, .nav-link.active { color: var(--green); }
.nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; background: var(--green); }
.nav-link.active span { color: #f2f3f5; }
.login-button {
  width: 117px;
  height: 47px;
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--green);
  background: transparent;
  border: 1.4px solid var(--green);
  border-radius: 13px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.login-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.login-button:hover { color: #0b0d0f; background: var(--green); box-shadow: 0 0 24px rgba(167,233,0,.18); }
.menu-toggle { display: none; }

main { position: relative; isolation: isolate; overflow: clip; padding: 0 64px 37px 42px; }
.hero { height: 402px; position: relative; isolation: isolate; }
.hero-globe {
  position: absolute;
  z-index: -1;
  top: 0;
  right: -64px;
  width: min(66vw, 1055px);
  height: 1000px;
  opacity: .98;
  overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 5%, #000 15%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 5%, #000 15%);
}
.hero-copy { position: relative; padding: 57px 0 0 8px; max-width: 690px; }
.hero h1 { margin: 0 0 10px; font-size: clamp(56px, 4.7vw, 78px); line-height: 1.03; letter-spacing: -2.1px; font-weight: 750; white-space: nowrap; }
.hero h1 span { color: var(--green); }
.hero-lead { margin: 13px 0 16px; color: #bfc0c5; font-size: 31px; line-height: 1.16; font-weight: 650; letter-spacing: -.55px; }
.hero-description { margin: 0 0 20px; color: #c1c2c7; font-size: 18px; line-height: 1.36; letter-spacing: -.12px; }
.primary-button {
  width: 306px;
  height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  background: var(--green-bright);
  color: #101307;
  border-radius: 17px;
  font-size: 16px;
  font-weight: 750;
  box-shadow: 0 0 0 1px rgba(207,255,72,.15) inset;
  transition: transform .2s ease, box-shadow .2s ease;
}
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(167,233,0,.18); }
.primary-button .arrow { font-size: 23px; line-height: 1; font-weight: 400; margin-top: -2px; }

.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.product-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 295px;
  padding: 26px 23px 23px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 16px;
  background: linear-gradient(135deg, #202225 0%, #202225 48%, #24262b 100%);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.product-card:hover { transform: translateY(-4px); border-color: rgba(167,233,0,.38); box-shadow: 0 12px 34px rgba(0,0,0,.25); }
.card-art { position: absolute; z-index: -1; right: 0; bottom: 0; object-fit: cover; pointer-events: none; opacity: .78; }
.art-nettrace { width: 39%; height: 63%; object-position: center bottom; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, #000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, #000 0%, #000 70%, transparent 100%); mask-composite: intersect; }
.art-desk { width: 42%; height: 66%; object-position: center bottom; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%), linear-gradient(0deg, #000 0%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 25%), linear-gradient(0deg, #000 0%, transparent 100%); mask-composite: intersect; }
.art-crm { width: 59%; height: 75%; object-position: center bottom; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(0deg, #000 0%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%), linear-gradient(0deg, #000 0%, transparent 100%); mask-composite: intersect; }
.art-other { width: 48%; height: 64%; object-position: center bottom; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, #000 0%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(0deg, #000 0%, transparent 100%); mask-composite: intersect; }
.card-heading { display: flex; align-items: flex-start; gap: 20px; min-height: 89px; position: relative; z-index: 1; }
.product-icon { width: 64px; height: 64px; margin-top: 2px; color: var(--green); flex: 0 0 auto; overflow: visible; }
.card-heading > div { padding-top: 18px; }
.card-heading h2 { margin: 0 0 7px; font-size: 21px; line-height: 1.12; font-weight: 720; letter-spacing: -.5px; white-space: nowrap; }
.card-heading p { margin: 0; color: #c4c5ca; font-size: 16px; line-height: 1.28; letter-spacing: -.2px; }
.feature-list { position: relative; z-index: 1; list-style: none; margin: 23px 0 24px; padding: 0; display: grid; gap: 8px; color: #c9cbd0; font-size: 14px; line-height: 1.25; }
.feature-list li { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.feature-list li::before { content: "✓"; color: var(--green); font-size: 19px; font-weight: 700; line-height: .8; }
.outline-button {
  min-width: 140px;
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  border: 1.3px solid var(--green);
  border-radius: 15px;
  background: rgba(15,17,19,.62);
  color: #f0f1f3;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.outline-button span { font-size: 20px; line-height: 0; font-weight: 400; margin-top: -2px; }
.outline-button:hover { background: var(--green); color: #101307; }

.site-footer {
  position: relative;
  z-index: 2;
  height: 109px;
  padding: 0 64px 0 42px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  background: #080a0c;
  color: #aeb0b6;
}
.footer-brand { width: 208px; margin-right: clamp(40px, 4.3vw, 73px); }
.footer-brand img { display: block; width: 164px; height: 47px; object-fit: contain; }
.footer-links { display: flex; align-items: center; gap: clamp(25px, 3.4vw, 57px); white-space: nowrap; }
.footer-links a { font-size: 14px; color: #aaaeb5; transition: color .2s ease; }
.footer-links a:hover { color: var(--green); }
.social-links { display: flex; gap: 25px; align-items: center; margin-left: auto; padding-left: 30px; }
.social-links a { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #292c31; color: #c9cbd0; transition: background .2s ease, color .2s ease; }
.social-links a:hover { background: var(--green); color: #101307; }
.social-links svg { width: 17px; height: 17px; fill: currentColor; stroke: currentColor; stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; }
.copyright { margin-left: 43px; padding-left: 43px; border-left: 1px solid rgba(255,255,255,.14); font-size: 11px; color: #9da0a7; white-space: nowrap; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.modal-backdrop.open { display: flex; }
.modal { width: min(100%, 480px); position: relative; padding: 35px 34px 32px; background: linear-gradient(145deg, #24272b, #15181b); border: 1px solid rgba(167,233,0,.35); border-radius: 20px; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.modal-accent { width: 52px; height: 4px; border-radius: 10px; background: var(--green); margin-bottom: 20px; }
.modal h2 { margin: 0 0 16px; font-size: 25px; }
.modal p { color: #c2c5ca; line-height: 1.5; }
.modal-close { position: absolute; top: 12px; right: 16px; border: 0; color: #c7cbd0; background: transparent; font-size: 30px; cursor: pointer; }
.modal-form { display: grid; gap: 12px; margin-top: 19px; }
.modal-form label { color: #c9cbd0; font-size: 13px; }
.modal-form input { width: 100%; margin-top: 6px; height: 44px; padding: 0 13px; color: white; background: #101316; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; outline: none; }
.modal-form input:focus { border-color: var(--green); }
.modal-submit { height: 44px; margin-top: 5px; border: 0; border-radius: 10px; color: #101307; background: var(--green); font-weight: 700; cursor: pointer; }
.modal-note { margin: 13px 0 0; color: #969ba2 !important; font-size: 12px; }

@media (max-width: 1450px) {
  .main-nav { gap: 22px; margin-right: 36px; }
  .nav-link { font-size: 14px; gap: 8px; }
  .brand img { width: 185px; }
  .footer-brand { margin-right: 45px; width: 170px; }
  .footer-links { gap: 25px; }
  .copyright { margin-left: 25px; padding-left: 25px; }
  .product-card { padding-left: 18px; padding-right: 18px; }
  .card-heading { gap: 13px; }
  .card-heading h2 { font-size: 19px; }
  .card-heading p { font-size: 14px; }
  .feature-list { font-size: 12px; }
}
@media (max-width: 1100px) {
  .site-header { padding: 0 25px; }
  .brand img { width: 175px; }
  .main-nav { gap: 15px; margin-right: 20px; }
  .nav-link { font-size: 12px; gap: 6px; }
  .nav-link svg { width: 20px; height: 20px; }
  .login-button { width: 100px; }
  main { padding-left: 25px; padding-right: 25px; }
  .products { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-card { min-height: 280px; padding: 24px; }
  .card-heading h2 { font-size: 21px; }
  .card-heading p { font-size: 15px; }
  .feature-list { font-size: 14px; }
  .hero-globe { width: 72vw; right: -25px; opacity: .7; }
  .site-footer { padding: 20px 25px; height: auto; min-height: 109px; flex-wrap: wrap; gap: 22px; }
  .footer-brand { margin-right: 12px; }
  .footer-links { flex: 1; flex-wrap: wrap; gap: 20px; }
  .social-links { margin-left: 0; padding-left: 0; }
  .copyright { margin-left: 0; padding-left: 20px; }
}
@media (max-width: 760px) {
  .site-header { height: 78px; padding: 0 18px; }
  .brand img { width: 164px; height: 48px; }
  .menu-toggle { width: 42px; height: 42px; display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; margin-right: 12px; background: transparent; border: 1px solid rgba(167,233,0,.5); border-radius: 10px; padding: 0 10px; cursor: pointer; }
  .menu-toggle span { height: 2px; width: 100%; background: var(--green); border-radius: 2px; }
  .main-nav { display: none; position: absolute; top: 77px; left: 0; right: 0; margin: 0; padding: 12px 20px 20px; background: #0b0e10; border-bottom: 1px solid rgba(255,255,255,.1); align-items: stretch; flex-direction: column; gap: 0; }
  .main-nav.open { display: flex; }
  .nav-link { height: 46px; font-size: 14px; }
  .nav-link.active::after { left: 0; right: auto; width: 72px; bottom: 0; }
  .login-button { width: 94px; height: 42px; font-size: 13px; }
  main { padding: 0 18px 25px; }
  .hero { height: auto; min-height: 420px; }
  .hero-globe { top: 0; right: -18px; width: 100%; height: 280px; opacity: .44; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%); }
  .hero-copy { padding: 50px 0 35px; }
  .hero h1 { font-size: clamp(42px, 10vw, 64px); white-space: normal; letter-spacing: -1.7px; }
  .hero-lead { font-size: clamp(23px, 5.4vw, 29px); }
  .hero-description { font-size: 16px; }
  .desktop-break { display: none; }
  .products { grid-template-columns: 1fr; gap: 16px; }
  .product-card { min-height: 275px; padding: 23px; }
  .site-footer { padding: 25px 18px; gap: 20px; }
  .footer-brand { width: 100%; }
  .footer-brand img { width: 158px; }
  .footer-links { width: 100%; justify-content: flex-start; gap: 16px 24px; }
  .footer-links a { font-size: 13px; }
  .social-links { margin-right: 5px; }
  .copyright { font-size: 10px; border-left: 0; padding-left: 0; }
}
@media (max-width: 420px) {
  .site-header { padding: 0 12px; }
  .brand img { width: 142px; }
  .menu-toggle { margin-right: 8px; }
  .login-button { width: 84px; gap: 6px; }
  .hero { min-height: 440px; }
  .hero-copy { padding-top: 42px; }
  .hero h1 { font-size: 42px; }
  .hero-lead { font-size: 22px; }
  .primary-button { width: 100%; max-width: 306px; font-size: 14px; }
  .card-heading { gap: 14px; }
  .product-icon { width: 55px; height: 55px; }
  .card-heading h2 { font-size: 19px; }
  .feature-list { font-size: 13px; }
}


/* CULEN — restrained, cinematic globe treatment */
.site-header { height: 98px; padding: 0 42px; }
main { padding: 0 42px 37px; overflow: hidden; }
.hero { height: 402px; position: relative; isolation: isolate; overflow: visible; }
.hero-copy { position: relative; z-index: 3; padding: 57px 0 0 8px; max-width: 690px; }
.hero-globe {
  position: absolute;
  z-index: 1;
  top: -5px;
  right: -80px;
  width: min(65vw, 1080px);
  height: min(65vw, 1080px);
  min-width: 850px;
  min-height: 850px;
  overflow: hidden;
  opacity: .98;
  pointer-events: none;
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 7%, #000 19%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 7%, #000 19%);
}
.hero-globe.globe-ready { background-image: none; }
.hero-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 55%, rgba(8,10,12,.45) 63%, #080a0c 68%);
}
.globe-canvas, .network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.globe-canvas { z-index: 0; }
.network-canvas { z-index: 1; }
.globe-atmosphere {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 51% 50%, transparent 53%, rgba(0,0,0,.06) 70%, rgba(0,0,0,.38) 100%),
    radial-gradient(ellipse at 48% 14%, rgba(205,240,221,.08), transparent 30%);
  mix-blend-mode: screen;
}
.products { position: relative; z-index: 3; }
.product-card { background: linear-gradient(135deg, #202225 0%, #202225 48%, #24262b 100%); }
.site-footer { position: relative; z-index: 5; background: #080a0c; }

/* Keep the hero typography and cards close to the supplied 1672px reference. */
@media (min-width: 1400px) {
  .hero h1 { font-size: 78px; }
  .hero-lead { font-size: 31px; }
  .product-card { min-height: 295px; }
}
@media (max-width: 1250px) {
  .site-header { padding-left: 26px; padding-right: 26px; }
  main { padding-left: 26px; padding-right: 26px; }
  .main-nav { gap: 18px; margin-right: 26px; }
  .brand img { width: 178px; }
  .hero-globe { right: -125px; opacity: .85; }
  .hero h1 { font-size: clamp(54px, 5.2vw, 70px); }
  .hero-lead { font-size: 27px; }
  .product-card { padding-left: 18px; padding-right: 18px; }
  .card-heading { gap: 13px; }
  .card-heading h2 { font-size: 19px; }
  .card-heading p { font-size: 14px; }
  .feature-list { font-size: 12px; }
}
@media (max-width: 1100px) {
  .hero-globe { width: 78vw; height: 78vw; min-width: 700px; min-height: 700px; right: -170px; top: -10px; opacity: .65; }
  .hero-copy { max-width: 620px; }
  .products { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-card { min-height: 280px; padding: 24px; }
  .card-heading h2 { font-size: 21px; }
  .card-heading p { font-size: 15px; }
  .feature-list { font-size: 14px; }
  .site-footer { padding: 20px 25px; height: auto; min-height: 109px; flex-wrap: wrap; gap: 22px; }
  .footer-brand { margin-right: 12px; }
  .footer-links { flex: 1; flex-wrap: wrap; gap: 20px; }
  .social-links { margin-left: 0; padding-left: 0; }
  .copyright { margin-left: 0; padding-left: 20px; }
}
@media (max-width: 760px) {
  .site-header { height: 78px; padding: 0 18px; }
  .brand img { width: 164px; height: 48px; }
  .menu-toggle { width: 42px; height: 42px; display: flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; margin-right: 12px; background: transparent; border: 1px solid rgba(167,233,0,.5); border-radius: 10px; padding: 0 10px; cursor: pointer; }
  .menu-toggle span { height: 2px; width: 100%; background: var(--green); border-radius: 2px; }
  .main-nav { display: none; position: absolute; top: 77px; left: 0; right: 0; margin: 0; padding: 12px 20px 20px; background: #0b0e10; border-bottom: 1px solid rgba(255,255,255,.1); align-items: stretch; flex-direction: column; gap: 0; }
  .main-nav.open { display: flex; }
  .nav-link { height: 46px; font-size: 14px; }
  .nav-link.active::after { left: 0; right: auto; width: 72px; bottom: 0; }
  .login-button { width: 94px; height: 42px; font-size: 13px; }
  main { padding: 0 18px 25px; }
  .hero { height: auto; min-height: 420px; }
  .hero-globe { top: 0; right: -65vw; width: 125vw; height: 125vw; min-width: 0; min-height: 0; opacity: .42; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%); mask-image: linear-gradient(90deg, transparent 0%, #000 48%); }
  .hero-copy { padding: 50px 0 35px; }
  .hero h1 { font-size: clamp(42px, 10vw, 64px); white-space: normal; letter-spacing: -1.7px; }
  .hero-lead { font-size: clamp(23px, 5.4vw, 29px); }
  .hero-description { font-size: 16px; }
  .desktop-break { display: none; }
  .products { grid-template-columns: 1fr; gap: 16px; }
  .product-card { min-height: 275px; padding: 23px; }
  .site-footer { padding: 25px 18px; gap: 20px; }
  .footer-brand { width: 100%; }
  .footer-brand img { width: 158px; }
  .footer-links { width: 100%; justify-content: flex-start; gap: 16px 24px; }
  .footer-links a { font-size: 13px; }
  .social-links { margin-right: 5px; }
  .copyright { font-size: 10px; border-left: 0; padding-left: 0; }
}
@media (max-width: 420px) {
  .site-header { padding: 0 12px; }
  .brand img { width: 142px; }
  .menu-toggle { margin-right: 8px; }
  .login-button { width: 84px; gap: 6px; }
  .hero { min-height: 440px; }
  .hero-copy { padding-top: 42px; }
  .hero h1 { font-size: 42px; }
  .hero-lead { font-size: 22px; }
  .primary-button { width: 100%; max-width: 306px; font-size: 14px; }
  .card-heading { gap: 14px; }
  .product-icon { width: 55px; height: 55px; }
  .card-heading h2 { font-size: 19px; }
  .feature-list { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Final hero globe: original art as the local poster + a real rotating night-Earth video. */
.hero-globe {
  top: -12px;
  right: -82px;
  width: min(72vw, 1190px);
  height: 680px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 1;
  background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.42) 8%, #000 20%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.42) 8%, #000 20%);
}
.hero-globe::after {
  background: linear-gradient(180deg, transparent 0%, transparent 57%, rgba(8,10,12,.26) 67%, #080a0c 84%);
}
.globe-poster {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: auto;
  right: 0;
  top: 5px;
  opacity: 1;
  object-fit: contain;
  animation: posterBreath 34s ease-in-out infinite alternate;
  transition: opacity 1.8s ease;
}
.globe-video {
  position: absolute;
  z-index: 1;
  width: 190%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: none;
  left: 50%;
  top: 47%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: grayscale(.35) sepia(.22) hue-rotate(27deg) saturate(.82) brightness(.72) contrast(1.13);
  mix-blend-mode: screen;
  transition: opacity 1.8s ease;
}
.hero-globe.video-playing .globe-video { opacity: .92; }
.hero-globe.video-playing .globe-poster { opacity: 0; }
.network-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: .76;
  mix-blend-mode: screen;
}
.route-lines path {
  opacity: .42;
  stroke-dasharray: 2 9;
  animation: routeDash 24s linear infinite;
}
.moving-packets circle { opacity: .9; }
.globe-atmosphere {
  z-index: 3;
  background:
    radial-gradient(ellipse at 54% 48%, transparent 48%, rgba(0,0,0,.10) 73%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, transparent 0%, transparent 62%, rgba(8,10,12,.16) 75%, #080a0c 92%);
  mix-blend-mode: screen;
}
@keyframes posterBreath {
  0% { transform: translate3d(0, 0, 0) scale(1.015); }
  100% { transform: translate3d(-8px, 5px, 0) scale(1.045); }
}
@keyframes routeDash { to { stroke-dashoffset: -180; } }
@media (max-width: 1250px) {
  .hero-globe { width: 76vw; height: 620px; right: -130px; opacity: .88; }
  .globe-video { width: 205%; }
}
@media (max-width: 1100px) {
  .hero-globe { width: 82vw; height: 640px; right: -180px; top: -18px; opacity: .72; }
  .globe-video { width: 220%; }
}
@media (max-width: 760px) {
  .hero-globe { top: 0; right: -62vw; width: 142vw; height: 470px; opacity: .48; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 44%); mask-image: linear-gradient(90deg, transparent 0%, #000 44%); }
  .globe-poster { top: 18px; }
  .globe-video { width: 235%; top: 45%; }
  .network-overlay { opacity: .56; }
}
@media (prefers-reduced-motion: reduce) {
  .globe-poster, .route-lines path { animation: none !important; }
}
/* The supplied poster already contains its own routes: avoid doubling them until the live globe is playing. */
.route-lines, .moving-packets { opacity: 0; transition: opacity 1.4s ease; }
.hero-globe.video-playing .route-lines { opacity: .52; }
.hero-globe.video-playing .moving-packets { opacity: 1; }
@keyframes posterBreath {
  0% { transform: translate3d(0, 0, 0) scale(1.012); }
  100% { transform: translate3d(-4px, 2px, 0) scale(1.026); }
}

/* Local, real-time WebGL globe — no external video or CDN dependency. */
.hero-globe {
  top: -2px;
  right: -60px;
  width: min(74vw, 1200px);
  height: 780px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 1;
  background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.20) 7%, rgba(0,0,0,.9) 20%, #000 35%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.20) 7%, rgba(0,0,0,.9) 20%, #000 35%);
}
.hero-globe::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 12%;
  top: 4%;
  width: 78%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(91,132,81,.12) 0%, rgba(49,91,48,.07) 48%, transparent 72%);
  filter: blur(28px);
  pointer-events: none;
}
.hero-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 64%, rgba(8,10,12,.26) 73%, #080a0c 91%);
}
.globe-canvas, .network-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.globe-canvas { z-index: 1; }
.network-canvas { z-index: 2; }
.globe-fallback {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: auto;
  right: 0;
  top: 8px;
  opacity: 0;
  object-fit: contain;
  transition: opacity .65s ease;
}
.globe-fallback.fallback-visible { opacity: .95; }
.globe-atmosphere {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 57% 61%, transparent 50%, rgba(0,0,0,.08) 72%, rgba(0,0,0,.28) 100%);
  mix-blend-mode: screen;
}
.products { position: relative; z-index: 3; }
.site-footer { position: relative; z-index: 5; background: #080a0c; }
@media (max-width: 1250px) {
  .hero-globe { width: 94vw; height: 700px; right: -80px; top: 0; }
}
@media (max-width: 1100px) {
  .hero-globe { width: 100vw; height: 650px; right: -120px; top: -4px; opacity: .82; }
}
@media (max-width: 760px) {
  .hero-globe { width: 145vw; height: 460px; top: -3px; right: -65vw; opacity: .46; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%); mask-image: linear-gradient(90deg, transparent 0%, #000 36%); }
  .hero-globe::after { background: linear-gradient(180deg, transparent 0%, transparent 67%, rgba(8,10,12,.18) 83%, #080a0c 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .globe-canvas, .network-canvas { display: none; }
  .globe-fallback { opacity: .95; }
}

/* Final globe: self-contained looping animation, aligned with the reference composition. */
.hero-globe {
  top: -2px;
  right: -60px;
  width: min(74vw, 1200px);
  height: 900px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 1;
  background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 7%, rgba(0,0,0,.88) 20%, #000 34%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 7%, rgba(0,0,0,.88) 20%, #000 34%);
}
.hero-globe::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 13%;
  top: 2%;
  width: 78%;
  height: 82%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(98,145,83,.10) 0%, rgba(45,82,48,.06) 49%, transparent 74%);
  filter: blur(30px);
}
.hero-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 73%, rgba(8,10,12,.32) 83%, #080a0c 96%);
}
.globe-video, .globe-fallback {
  position: absolute;
  z-index: 1;
  display: block;
  width: 900px;
  height: 900px;
  left: 210px;
  top: 0;
  object-fit: contain;
  pointer-events: none;
}
.globe-video {
  opacity: 0;
  transition: opacity .9s ease;
}
.globe-fallback {
  opacity: .98;
  transition: opacity .9s ease;
}
.hero-globe.video-playing .globe-video { opacity: 1; }
.hero-globe.video-playing .globe-fallback { opacity: 0; }
.globe-atmosphere {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 58% 50%, transparent 54%, rgba(0,0,0,.06) 72%, rgba(0,0,0,.2) 100%);
  mix-blend-mode: screen;
}
@media (max-width: 1250px) {
  .hero-globe { width: 94vw; height: 760px; top: 15px; right: -80px; }
  .globe-video, .globe-fallback { width: 780px; height: 780px; left: 15%; }
}
@media (max-width: 1100px) {
  .hero-globe { width: 100vw; height: 700px; top: 0; right: -120px; opacity: .82; }
  .globe-video, .globe-fallback { width: 730px; height: 730px; left: 18%; }
}
@media (max-width: 760px) {
  .hero-globe { width: 145vw; height: 500px; top: 0; right: -65vw; opacity: .44; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%); mask-image: linear-gradient(90deg, transparent 0%, #000 36%); }
  .globe-video, .globe-fallback { width: 112vw; height: 112vw; left: 4%; top: 0; }
  .hero-globe::after { background: linear-gradient(180deg, transparent 0%, transparent 67%, rgba(8,10,12,.18) 84%, #080a0c 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .globe-video { display: none; }
  .globe-fallback { opacity: .98 !important; }
}
/* Override transforms from the previous globe draft: keep the poster and video perfectly aligned. */
.globe-video, .globe-fallback { transform: none !important; }
/* The animation file uses pure black outside the sphere; screen blending removes the video rectangle. */
.globe-video, .globe-fallback { mix-blend-mode: screen; }
/* Allow the video background to screen-blend with the site's near-black canvas. */
main, .hero { isolation: auto !important; }
.hero-globe { mix-blend-mode: screen; }


/* Smooth GPU-rendered globe. The old video layers are intentionally disabled. */
.hero-globe {
  position: absolute !important;
  z-index: 0 !important;
  top: -2px !important;
  right: -60px !important;
  width: min(74vw, 1200px) !important;
  height: 900px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  background: transparent !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 7%, rgba(0,0,0,.88) 20%, #000 34%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 7%, rgba(0,0,0,.88) 20%, #000 34%) !important;
  mix-blend-mode: normal !important;
}
.hero-copy { position: relative !important; z-index: 2 !important; }
.products { position: relative !important; z-index: 3 !important; }
.site-footer { position: relative !important; z-index: 5 !important; }
.globe-video { display: none !important; }
.globe-fallback {
  position: absolute !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  opacity: .98 !important;
  object-fit: contain !important;
  transition: opacity .8s ease !important;
  mix-blend-mode: screen !important;
}
.globe-canvas, .network-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}
.globe-canvas { z-index: 1 !important; opacity: 0; transition: opacity .8s ease; }
.network-canvas { z-index: 2 !important; opacity: 0; transition: opacity .8s ease; }
.hero-globe.webgl-ready .globe-canvas,
.hero-globe.webgl-ready .network-canvas { opacity: 1; }
.hero-globe.webgl-ready .globe-fallback { opacity: 0 !important; }
.globe-atmosphere {
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse at 65% 50%, transparent 53%, rgba(0,0,0,.08) 75%, rgba(0,0,0,.22) 100%) !important;
  mix-blend-mode: screen !important;
}
@media (max-width: 1250px) {
  .hero-globe { width: 94vw !important; height: 760px !important; top: 15px !important; right: -80px !important; }
}
@media (max-width: 1100px) {
  .hero-globe { width: 100vw !important; height: 700px !important; top: 0 !important; right: -120px !important; opacity: .82 !important; }
}
@media (max-width: 760px) {
  .hero-globe {
    width: 145vw !important; height: 500px !important; top: 0 !important; right: -65vw !important;
    opacity: .48 !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 36%) !important;
  }
  .hero-globe::after { background: linear-gradient(180deg, transparent 0%, transparent 67%, rgba(8,10,12,.18) 84%, #080a0c 100%) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .globe-canvas, .network-canvas { display: none !important; }
  .globe-fallback { opacity: .98 !important; }
}

/* Hardware-safe fallback for browsers without accelerated WebGL. */
.globe-fallback-video {
  position: absolute !important;
  z-index: 1 !important;
  display: block !important;
  width: 972px !important;
  height: 972px !important;
  left: 234px !important;
  top: -36px !important;
  object-fit: contain !important;
  opacity: 0 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  transition: opacity .5s ease !important;
}
.hero-globe.video-fallback .globe-fallback-video { opacity: .96 !important; }
.hero-globe.video-fallback .globe-fallback,
.hero-globe.video-fallback .globe-canvas,
.hero-globe.video-fallback .network-canvas { opacity: 0 !important; }
@media (max-width: 1250px) {
  .globe-fallback-video { width: 850px !important; height: 850px !important; left: 16% !important; top: -30px !important; }
}
@media (max-width: 1100px) {
  .globe-fallback-video { width: 780px !important; height: 780px !important; left: 18% !important; top: -30px !important; }
}
@media (max-width: 760px) {
  .globe-fallback-video { width: 112vw !important; height: 112vw !important; left: 4% !important; top: 0 !important; }
}

.globe-fallback-video {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 43%, rgba(0,0,0,.92) 45%, transparent 48%) !important;
  mask-image: radial-gradient(circle at 50% 50%, #000 0 43%, rgba(0,0,0,.92) 45%, transparent 48%) !important;
}


/* Final globe layer: local 30fps video is the primary visual, not a static poster. */
.hero { isolation: auto !important; overflow: visible !important; }
.hero-globe {
  position: absolute !important;
  z-index: 1 !important;
  top: -5px !important;
  right: -80px !important;
  width: min(65vw, 1080px) !important;
  height: 900px !important;
  min-width: 850px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: .98 !important;
  pointer-events: none !important;
  background: transparent !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.52) 7%, #000 19%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.52) 7%, #000 19%) !important;
  mix-blend-mode: screen !important;
}
.hero-copy { position: relative !important; z-index: 2 !important; }
.products { position: relative !important; z-index: 3 !important; }
.site-footer { position: relative !important; z-index: 5 !important; }
.globe-motion {
  position: absolute !important;
  display: block !important;
  width: 900px !important;
  height: 900px !important;
  left: calc(60% - 450px) !important;
  top: -14px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  background: transparent !important;
}
.hero-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, transparent 62%, rgba(8,10,12,.24) 77%, #080a0c 96%);
}
@media (max-width: 1250px) {
  .hero-globe { width: 94vw !important; height: 760px !important; top: 15px !important; right: -80px !important; }
  .globe-motion { width: 820px !important; height: 820px !important; left: calc(60% - 410px) !important; top: -20px !important; }
}
@media (max-width: 1100px) {
  .hero-globe { width: 100vw !important; height: 700px !important; top: 0 !important; right: -120px !important; opacity: .82 !important; }
  .globe-motion { width: 760px !important; height: 760px !important; left: calc(62% - 380px) !important; top: -18px !important; }
}
@media (max-width: 760px) {
  .hero-globe {
    width: 145vw !important; height: 500px !important; top: 0 !important; right: -65vw !important;
    opacity: .48 !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 36%) !important;
  }
  .globe-motion { width: 112vw !important; height: 112vw !important; left: 4% !important; top: 0 !important; }
  .hero-globe::after { background: linear-gradient(180deg, transparent 0%, transparent 67%, rgba(8,10,12,.18) 84%, #080a0c 100%); }
}


/* === CULEN PROJECTS demo pages === */
.page-main { padding:0 42px 64px; overflow:hidden; min-height:calc(100vh - 205px); }
.inner-page { width:min(100%,1500px); margin:0 auto; padding:44px 0 28px; position:relative; }
.breadcrumbs { display:flex; align-items:center; gap:10px; color:#81868f; font-size:13px; margin:0 0 28px; }
.breadcrumbs a { color:#aeb3bc; transition:color .2s; }
.breadcrumbs a:hover { color:var(--green); }
.page-intro { max-width:850px; margin:0 0 44px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--green); font-size:11px; font-weight:750; letter-spacing:2px; text-transform:uppercase; margin:0 0 15px; }
.eyebrow > span { width:20px; height:2px; display:inline-block; background:var(--green); box-shadow:0 0 12px rgba(167,233,0,.3); }
.page-intro h1 { margin:0 0 16px; font-size:clamp(38px,5.2vw,64px); line-height:1.05; letter-spacing:-1.8px; }
.page-intro p { max-width:760px; margin:0; color:#b9bdc4; font-size:19px; line-height:1.55; }
.catalog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.catalog-card,.download-card,.feature-panel,.aside-card,.form-panel,.dashboard-panel,.account-info,.login-info,.doc-article { position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:linear-gradient(145deg,rgba(34,37,41,.96),rgba(20,23,27,.98)); box-shadow:0 12px 34px rgba(0,0,0,.12); }
.catalog-card { padding:24px; min-height:365px; isolation:isolate; }
.catalog-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; }
.product-symbol { color:var(--green); font-size:28px; line-height:1; font-weight:300; }
.status-tag { display:inline-flex; align-items:center; padding:6px 9px; border-radius:30px; border:1px solid rgba(167,233,0,.22); color:#c2df79; background:rgba(167,233,0,.06); font-size:10px; letter-spacing:.2px; white-space:nowrap; }
.muted-tag { color:#a8acb3; border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.035); }
.catalog-card h2 { margin:21px 0 9px; font-size:25px; letter-spacing:-.5px; }
.catalog-card p { min-height:74px; max-width:95%; color:#bfc2c8; font-size:14px; line-height:1.48; }
.catalog-card ul { list-style:none; padding:0; margin:18px 0 22px; display:grid; gap:9px; color:#d0d2d6; font-size:13px; }
.catalog-card li::before { content:'✓'; color:var(--green); margin-right:9px; font-weight:800; }
.catalog-card .outline-button { margin-top:auto; }
.catalog-art { position:absolute; right:-20px; bottom:0; z-index:-1; width:62%; height:44%; opacity:.22; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 45%,#000); }
.catalog-art img { width:100%; height:100%; object-fit:cover; object-position:center bottom; }
.wide-callout { display:flex; justify-content:space-between; align-items:center; gap:28px; margin:40px 0 10px; padding:30px 34px; border:1px solid rgba(167,233,0,.19); border-radius:18px; background:linear-gradient(110deg,rgba(167,233,0,.075),rgba(28,31,35,.82) 54%,rgba(15,17,20,.95)); }
.wide-callout h2 { margin:0 0 9px; font-size:25px; }
.wide-callout p { margin:0; max-width:800px; color:#b9bdc4; line-height:1.5; font-size:14px; }
.wide-callout .primary-button { flex:0 0 auto; }
.notice-panel { display:flex; align-items:flex-start; gap:17px; padding:19px 22px; border:1px solid rgba(167,233,0,.2); border-radius:14px; background:rgba(167,233,0,.055); margin:0 0 24px; }
.notice-icon { flex:0 0 30px; width:30px; height:30px; display:grid; place-items:center; border:1px solid rgba(167,233,0,.45); border-radius:50%; color:var(--green); font-weight:800; }
.notice-panel strong { display:block; margin:1px 0 5px; }
.notice-panel p { margin:0; color:#bfc3c9; font-size:13px; line-height:1.5; }
.download-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.download-card { padding:24px; min-height:290px; display:flex; flex-direction:column; }
.file-icon { width:55px; height:58px; display:grid; place-items:center; margin-bottom:22px; border-radius:11px; background:rgba(167,233,0,.09); border:1px solid rgba(167,233,0,.28); color:var(--green); font-size:13px; font-weight:800; letter-spacing:1px; }
.download-meta { color:#a8c95b; font-size:10px; font-weight:700; letter-spacing:1.4px; }
.download-card h2 { font-size:21px; margin:8px 0; }
.download-card p { margin:0 0 18px; flex:1; color:#b9bdc4; font-size:13px; line-height:1.55; }
.download-card .outline-button { align-self:flex-start; }
.file-size { color:#7f858d; font-size:11px; margin-top:10px; }
.section-heading { margin:48px 0 20px; }
.section-heading h2 { margin:0 0 8px; font-size:29px; }
.section-heading p { margin:0; color:#aeb3bb; line-height:1.5; }
.release-row { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px 4px; border-bottom:1px solid rgba(255,255,255,.08); }
.release-row strong,.release-row span { display:block; }
.release-row strong { font-size:14px; margin-bottom:5px; }
.release-row div span { color:#858b94; font-size:12px; }
.docs-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:28px; align-items:start; }
.docs-sidebar { position:sticky; top:24px; display:grid; gap:5px; padding:20px 14px; background:#15181b; border:1px solid rgba(255,255,255,.07); border-radius:14px; }
.docs-sidebar strong { padding:0 9px 10px; color:#e8eaed; font-size:13px; }
.docs-sidebar a { padding:9px; border-radius:8px; color:#aeb3bb; font-size:13px; transition:background .2s,color .2s; }
.docs-sidebar a:hover { color:var(--green); background:rgba(167,233,0,.07); }
.search-box { display:flex; align-items:center; gap:12px; padding:0 17px; height:50px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#171a1e; color:var(--green); margin-bottom:18px; }
.search-box span { font-size:22px; }
.search-box input { width:100%; border:0; outline:0; color:#f3f4f5; background:transparent; font:inherit; font-size:14px; }
.docs-topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.docs-topic { display:flex; gap:14px; padding:17px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:linear-gradient(145deg,#202327,#171a1e); transition:border-color .2s,transform .2s; }
.docs-topic:hover { border-color:rgba(167,233,0,.32); transform:translateY(-2px); }
.topic-icon { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:var(--green); background:rgba(167,233,0,.08); font-size:12px; font-weight:800; }
.docs-topic strong { display:block; margin:0 0 6px; font-size:14px; }
.docs-topic p { margin:0 0 8px; color:#aeb4bc; font-size:12px; line-height:1.45; }
.docs-topic small { color:#7f8791; font-size:10px; }
.search-empty { padding:22px; border:1px dashed rgba(255,255,255,.15); border-radius:12px; color:#aeb3bb; }
.doc-article { padding:26px 28px; margin-top:18px; scroll-margin-top:22px; }
.doc-article h2 { margin:0 0 12px; font-size:24px; }
.doc-article p,.doc-article li { color:#bec2c8; font-size:14px; line-height:1.65; }
.doc-article a { color:var(--green); }
.doc-article ol { padding-left:22px; }
.code-note { padding:14px 16px; border-radius:9px; background:#0d1012; border:1px solid rgba(255,255,255,.08); color:#b7d77a; font:12px/1.8 Consolas,monospace; overflow-wrap:anywhere; }
.doc-article details,.faq-grid details { border-top:1px solid rgba(255,255,255,.08); padding:14px 0; }
.doc-article summary,.faq-grid summary { cursor:pointer; color:#e7e9eb; font-size:14px; }
.doc-article details p,.faq-grid details p { margin:10px 0 0; }
.support-layout,.contacts-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.8fr); gap:22px; align-items:start; }
.form-panel { padding:27px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; }
.panel-head h2,.form-panel h2 { margin:0; font-size:25px; }
.site-form { display:grid; gap:16px; }
.site-form label { display:grid; gap:8px; color:#c4c8ce; font-size:12px; }
.form-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.site-form input,.site-form select,.site-form textarea { width:100%; min-height:44px; padding:12px 13px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#111417; color:#f0f2f4; outline:0; font:inherit; font-size:13px; transition:border-color .2s,box-shadow .2s; }
.site-form textarea { resize:vertical; min-height:120px; }
.site-form input:focus,.site-form select:focus,.site-form textarea:focus { border-color:rgba(167,233,0,.55); box-shadow:0 0 0 3px rgba(167,233,0,.07); }
.site-form input::placeholder,.site-form textarea::placeholder { color:#68707a; }
.checkbox-line { display:flex !important; grid-template-columns:auto 1fr; align-items:start; gap:10px !important; line-height:1.4; }
.checkbox-line input { width:15px; min-height:15px; margin:1px 0 0; accent-color:var(--green); }
.form-submit { border:0; cursor:pointer; width:max-content; padding:0 22px; }
.form-result { padding:14px 16px; border-radius:10px; border:1px solid rgba(167,233,0,.28); background:rgba(167,233,0,.07); color:#dce8c1; font-size:13px; line-height:1.5; }
.form-result p { margin:7px 0; color:#bfc8ad; }
.form-result .text-link { color:var(--green); }
.subtle-note { color:#858c95 !important; font-size:11px !important; line-height:1.5 !important; }
.support-aside,.contact-aside { display:grid; gap:16px; }
.aside-card { padding:22px; }
.aside-card h3 { margin:0 0 12px; font-size:19px; }
.aside-card p,.aside-card li { color:#b6bbc2; font-size:13px; line-height:1.55; }
.aside-card ol { padding-left:19px; display:grid; gap:7px; }
.aside-link { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); color:#cbd0d5; font-size:13px; }
.aside-link:last-child { border-bottom:0; }
.aside-link span { color:var(--green); }
.faq-strip { margin:45px 0 0; padding:26px 28px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:#15181b; }
.faq-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.faq-grid details { border-top:0; padding:0; }
.faq-grid summary { font-weight:650; line-height:1.45; }
.faq-grid details p { color:#aeb4bc; font-size:12px; line-height:1.55; }
.account-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(270px,.8fr); gap:20px; align-items:start; }
.account-login { max-width:620px; }
.account-login h2 { margin:0 0 8px; }
.account-login > p { color:#aeb4bc; font-size:13px; line-height:1.5; }
.account-info { padding:24px; }
.account-info h3 { margin:0 0 10px; font-size:19px; }
.account-info p { color:#b7bcc3; font-size:13px; line-height:1.55; }
.demo-dashboard { grid-column:1/-1; }
.dashboard-top { display:flex; justify-content:space-between; align-items:center; gap:22px; margin-bottom:20px; }
.dashboard-top h2 { margin:0 0 6px; font-size:28px; }
.dashboard-top p { margin:0; color:#aeb4bc; font-size:13px; }
.dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.dashboard-stats div { padding:20px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:#1b1e22; }
.dashboard-stats small,.dashboard-stats strong { display:block; }
.dashboard-stats small { color:#999fa8; font-size:11px; margin-bottom:8px; }
.dashboard-stats strong { font-size:27px; }
.green-text { color:var(--green); }
.dashboard-columns { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; }
.dashboard-panel { padding:22px; }
.dashboard-panel h3 { margin:0 0 15px; font-size:17px; }
.ticket-list { display:grid; gap:9px; margin-bottom:16px; }
.ticket-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px; border-radius:9px; background:#111417; }
.ticket-item strong,.ticket-item small { display:block; }
.ticket-item strong { font-size:12px; margin-bottom:4px; }
.ticket-item small,.ticket-item > span { color:#89919a; font-size:10px; }
.empty-state { color:#969da5; font-size:12px; line-height:1.5; }
.account-product { display:flex; flex-direction:column; gap:5px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.account-product span { color:#e9ecef; font-size:13px; font-weight:700; }
.account-product small { color:#9299a2; font-size:11px; }
.login-layout { display:grid; grid-template-columns:minmax(320px,.85fr) minmax(0,1fr); gap:26px; align-items:center; max-width:1100px; }
.login-panel { padding:30px; }
.login-panel h2 { margin:0 0 22px; font-size:26px; }
.login-info { padding:38px; min-height:320px; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(circle at 85% 15%,rgba(167,233,0,.09),transparent 42%),linear-gradient(145deg,#22262a,#131619); }
.login-info h2 { margin:0 0 12px; font-size:30px; max-width:470px; }
.login-info p,.login-info li { color:#b9bec5; font-size:14px; line-height:1.6; }
.login-info ul { display:grid; gap:7px; padding-left:19px; }
.product-detail-hero { display:grid; grid-template-columns:1fr minmax(320px,.8fr); gap:35px; align-items:center; min-height:340px; position:relative; }
.detail-copy h1 { margin:0 0 10px; font-size:clamp(42px,5.3vw,67px); line-height:1; letter-spacing:-2px; }
.detail-copy h2 { margin:0 0 15px; color:#c4c8ce; font-size:23px; font-weight:580; }
.detail-copy p { max-width:600px; color:#aeb4bc; font-size:15px; line-height:1.6; }
.detail-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:25px; }
.text-link { color:var(--green); font-size:13px; font-weight:650; }
.detail-visual { position:relative; min-height:300px; display:grid; place-items:center; }
.detail-visual::before { content:""; position:absolute; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(167,233,0,.10),transparent 65%); filter:blur(8px); }
.detail-visual img { position:relative; width:100%; max-height:340px; object-fit:contain; filter:drop-shadow(0 22px 34px rgba(0,0,0,.35)); }
.feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.feature-panel { padding:22px; min-height:185px; }
.feature-number { color:var(--green); font-size:11px; font-weight:800; letter-spacing:1px; margin-bottom:18px; }
.feature-panel h3 { margin:0 0 9px; font-size:17px; }
.feature-panel p { margin:0; color:#adb3ba; font-size:12px; line-height:1.55; }
.company-story { display:grid; grid-template-columns:1fr .95fr; gap:35px; align-items:start; }
.company-story h2 { margin:0 0 15px; max-width:600px; font-size:34px; line-height:1.15; }
.company-story p { color:#b9bec5; font-size:15px; line-height:1.7; }
.company-values { display:grid; grid-template-columns:1fr; gap:10px; }
.company-values article { padding:19px 22px; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:#1b1e22; }
.company-values strong { color:var(--green); font-size:12px; }
.company-values h3 { margin:8px 0 4px; font-size:17px; }
.company-values p { margin:0; font-size:12px; }
.toast { position:fixed; left:50%; bottom:28px; z-index:100; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:12px 18px; border:1px solid rgba(167,233,0,.35); border-radius:30px; background:#1d2220; color:#e5efcf; font-size:13px; box-shadow:0 12px 30px rgba(0,0,0,.35); transition:opacity .25s,transform .25s; }
.toast.visible { opacity:1; transform:translate(-50%,0); }
[hidden] { display:none !important; }
@media(max-width:1200px) {
  .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .page-main { padding:0 26px 48px; }
  .inner-page { padding-top:34px; }
  .docs-layout { grid-template-columns:1fr; }
  .docs-sidebar { position:static; display:flex; flex-wrap:wrap; align-items:center; }
  .docs-sidebar strong { width:100%; }
  .support-layout,.contacts-layout,.account-layout,.company-story { grid-template-columns:1fr; }
  .account-info { grid-row:2; }
  .product-detail-hero { grid-template-columns:1fr 330px; }
  .faq-grid { grid-template-columns:1fr; }
}
@media(max-width:680px) {
  .page-main { padding:0 18px 35px; }
  .page-intro { margin-bottom:30px; }
  .page-intro h1 { font-size:39px; }
  .page-intro p { font-size:15px; }
  .catalog-grid,.download-grid,.feature-grid,.docs-topic-grid { grid-template-columns:1fr; }
  .catalog-card { min-height:330px; }
  .wide-callout { flex-direction:column; align-items:flex-start; padding:23px; }
  .wide-callout .primary-button { width:100%; }
  .form-two { grid-template-columns:1fr; }
  .form-panel { padding:21px; }
  .panel-head { align-items:flex-start; flex-direction:column; }
  .faq-strip { padding:22px; }
  .dashboard-top { align-items:flex-start; flex-direction:column; }
  .dashboard-stats { grid-template-columns:1fr; }
  .dashboard-columns { grid-template-columns:1fr; }
  .login-layout,.product-detail-hero { grid-template-columns:1fr; }
  .detail-visual { min-height:190px; grid-row:1; }
  .detail-visual img { max-height:210px; }
  .detail-copy h1 { font-size:46px; }
  .login-info { min-height:240px; padding:25px; }
  .release-row { align-items:flex-start; flex-direction:column; }
  .site-footer { padding:25px 18px; }
}

/* Server-backed commerce and account UI */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}.form-grid .full-width{grid-column:1/-1}.form-grid textarea{width:100%;min-height:76px}.form-grid input,.form-grid select,.form-grid textarea{box-sizing:border-box}.checkbox-label{display:flex!important;align-items:flex-start;gap:10px;font-size:13px;color:#c4c8cb}.checkbox-label input{width:auto!important;margin-top:3px;accent-color:#9be600}.form-result{display:block;padding:13px 15px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:#202326;color:#ffd1d1;font-size:14px}.form-result.success{color:#c7f58a;border-color:rgba(155,230,0,.4)}.server-price{display:flex;align-items:center;gap:10px;margin:16px 0 10px;color:#aeb4b9}.server-price strong,.checkout-price{font-size:22px;color:#a6e900;font-weight:750}.server-price small,.checkout-price small{font-size:11px;color:#8f969b}.checkout-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:24px;align-items:start}.checkout-price{margin:20px 0;display:flex;flex-direction:column;gap:4px}.admin-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-chart{display:grid;grid-template-columns:repeat(14,minmax(20px,1fr));gap:8px;align-items:end;min-height:160px;padding-top:14px}.chart-day{display:flex;flex-direction:column;gap:8px;align-items:center;min-width:0}.chart-bars{height:122px;width:100%;display:flex;align-items:end;justify-content:center;gap:3px;border-bottom:1px solid #3b4044}.chart-bars i,.chart-bars b{display:block;width:35%;min-height:2px;border-radius:4px 4px 0 0;background:#9be600}.chart-bars b{background:#64717b}.chart-day small{font-size:10px;color:#949ba1;white-space:nowrap;transform:rotate(-30deg)}.admin-table-wrap{overflow-x:auto}.admin-table{border-collapse:collapse;width:100%;min-width:720px;font-size:13px}.admin-table th,.admin-table td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left;vertical-align:middle}.admin-table th{color:#a5eb00;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.admin-table td small{display:block;color:#92999e;margin-top:5px}.admin-table em{color:#b5d67d;font-size:10px}.release-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.release-form input[type=file]{max-width:170px;font-size:11px}.release-form input[name=version]{width:80px;min-width:80px;padding:6px}.release-form .outline-button{padding:7px 10px}.text-link{cursor:pointer}.outline-button:disabled{opacity:.4;cursor:not-allowed}.account-product{display:flex;flex-direction:column;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1);color:#f2f4f5;text-decoration:none}.account-product small{color:#9ca3a8;margin-top:5px}.checkout-layout .account-info{position:sticky;top:110px}.ticket-item a{white-space:nowrap}.success{color:#c7f58a!important}
@media(max-width:760px){.form-grid{grid-template-columns:1fr}.form-grid .full-width{grid-column:auto}.checkout-layout{grid-template-columns:1fr}.checkout-layout .account-info{position:static}.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-chart{gap:3px}.chart-day small{font-size:8px}}