:root{
  --bg:#020713;
  --ink:#f4f8ff;
  --muted:#b8c7dc;
  --dim:#71849e;
  --line:rgba(174,218,255,.18);
  --glass:rgba(5,16,32,.62);
  --glass-strong:rgba(6,18,34,.78);
  --blue:#72aeff;
  --cyan:#63d6ff;
  --gold:#f2c86b;
  --gold2:#ffe2a3;
  --danger:#ffb3b3;
  --shadow:0 34px 110px rgba(0,0,0,.56);
}

html[data-theme="light"]{
  --bg:#edf7ff;
  --ink:#0e2541;
  --muted:#50657f;
  --dim:#6b7b91;
  --line:rgba(25,90,155,.22);
  --glass:rgba(255,255,255,.68);
  --glass-strong:rgba(255,255,255,.82);
  --blue:#145fb1;
  --cyan:#0b9dd2;
  --gold:#9b6b22;
  --gold2:#c8953c;
  --shadow:0 34px 90px rgba(42,87,134,.18);
}

*{box-sizing:border-box}

html{
  min-height:100%;
  background:#01040b;
}

body{
  margin:0;
  min-height:100%;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  background:
    radial-gradient(900px 560px at 50% 8%,rgba(114,174,255,.30),transparent 66%),
    radial-gradient(900px 620px at 50% 44%,rgba(99,214,255,.18),transparent 64%),
    radial-gradient(700px 500px at 12% 34%,rgba(242,200,107,.08),transparent 68%),
    radial-gradient(740px 520px at 88% 36%,rgba(99,214,255,.08),transparent 68%),
    linear-gradient(180deg,#01040b 0%,#041023 44%,#020713 74%,#010309 100%);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  background:
    radial-gradient(circle at 16% 62%,rgba(242,200,107,.38) 0 1px,transparent 2px),
    radial-gradient(circle at 25% 50%,rgba(99,214,255,.32) 0 1px,transparent 2px),
    radial-gradient(circle at 70% 28%,rgba(255,255,255,.28) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 62%,rgba(242,200,107,.34) 0 1px,transparent 2px),
    radial-gradient(circle at 42% 18%,rgba(99,214,255,.30) 0 1px,transparent 2px);
  opacity:.8;
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    radial-gradient(circle at 50% 40%,transparent 0 34%,rgba(0,0,0,.26) 70%,rgba(0,0,0,.72) 100%),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:auto,68px 68px,68px 68px;
}

a{color:inherit;text-decoration:none}
button{font:inherit}

.scene-shell{
  width:min(1600px,calc(100% - 42px));
  margin:auto;
  padding:18px 0 38px;
  position:relative;
}

.scene-shell:before{
  content:"";
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:45vh;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent,rgba(2,8,18,.36) 36%,rgba(1,4,10,.88)),
    repeating-linear-gradient(90deg,rgba(99,214,255,.05) 0 1px,transparent 1px 52px);
  transform:perspective(700px) rotateX(64deg);
  transform-origin:bottom;
  opacity:.68;
}

.top{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 18px;
  position:sticky;
  top:0;
  z-index:80;
  border:1px solid rgba(174,218,255,.13);
  border-radius:0 0 28px 28px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),
    rgba(1,7,16,.66);
  backdrop-filter:blur(24px);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:max-content;
}

.brand-seal{
  width:56px;
  height:56px;
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center;
  border:1px solid rgba(242,200,107,.48);
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.85),rgba(242,200,107,.25) 20%,rgba(9,24,42,.94) 68%);
  box-shadow:0 0 32px rgba(242,200,107,.20),inset 0 0 18px rgba(255,255,255,.08);
}

.brand-seal:before{
  content:"⚕";
  color:var(--gold);
  font-size:32px;
  line-height:1;
  filter:drop-shadow(0 0 8px rgba(242,200,107,.55));
}

.brand b{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  line-height:1;
  letter-spacing:.11em;
  font-weight:500;
}

.brand em{
  display:block;
  margin-top:7px;
  color:var(--gold2);
  font-size:14px;
  font-style:normal;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.nav a,
.nav button{
  border:0;
  background:transparent;
  color:rgba(244,248,255,.92);
  padding:10px 12px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}

.nav a:hover,
.nav button:hover,
.nav a.active{
  background:rgba(99,214,255,.09);
  color:#fff;
}

.nav a.active{
  color:#fff;
  box-shadow:inset 0 -1px 0 var(--gold);
}

.nav .primary{
  background:linear-gradient(135deg,rgba(47,135,255,.85),rgba(99,214,255,.78));
  color:#fff;
  box-shadow:0 0 24px rgba(99,214,255,.18);
}

.homepage-cinema{
  position:relative;
}

.hero{
  min-height:820px;
  display:grid;
  grid-template-columns:minmax(280px,.82fr) minmax(520px,1.38fr) minmax(330px,.96fr);
  gap:26px;
  align-items:center;
  padding:42px 0 24px;
  position:relative;
  isolation:isolate;
}

.hero:before{
  content:"";
  position:absolute;
  inset:40px -34px 0;
  border-radius:54px;
  z-index:-5;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(99,214,255,.08),transparent 18%,transparent 82%,rgba(99,214,255,.08)),
    radial-gradient(ellipse at 50% 42%,rgba(99,214,255,.16),transparent 46%),
    radial-gradient(ellipse at 50% 86%,rgba(99,214,255,.12),transparent 44%);
  filter:blur(2px);
}

.hero:after{
  content:"";
  position:absolute;
  inset:0 -10% -4%;
  z-index:-4;
  pointer-events:none;
  background:
    linear-gradient(118deg,transparent 0 28%,rgba(99,214,255,.06) 44%,transparent 62%),
    linear-gradient(245deg,transparent 0 34%,rgba(242,200,107,.045) 50%,transparent 70%),
    radial-gradient(ellipse at 50% 72%,rgba(255,255,255,.055),transparent 46%);
  filter:blur(20px);
  animation:chamberFog 16s ease-in-out infinite;
}

.panel{
  position:relative;
  border:1px solid var(--line);
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.023)),
    var(--glass);
  backdrop-filter:blur(24px);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 42px rgba(99,214,255,.035);
  overflow:hidden;
}

.panel:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(125deg,rgba(255,255,255,.12),transparent 18%,transparent 76%,rgba(99,214,255,.07)),
    radial-gradient(circle at 12% 0%,rgba(99,214,255,.12),transparent 30%);
  opacity:.7;
}

.left-panel{
  min-height:650px;
  padding:38px 34px;
  transform:translateY(18px) perspective(900px) rotateY(3deg);
}

.right-panel{
  min-height:650px;
  padding:34px 26px 30px;
  transform:translateY(-4px) perspective(900px) rotateY(-3deg);
}

.panel-title{
  position:relative;
  z-index:2;
  text-align:center;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(230,242,255,.96);
  margin-bottom:28px;
}

.panel-subtitle{
  position:relative;
  z-index:2;
  text-align:center;
  color:var(--gold2);
  margin-top:-18px;
  margin-bottom:24px;
  font-size:14px;
}

.principles{
  position:relative;
  z-index:2;
  display:grid;
  gap:24px;
}

.principle{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:18px;
  align-items:center;
  padding:10px 0 18px;
  border-bottom:1px solid rgba(174,218,255,.10);
}

.principle:last-child{border-bottom:0}

.premium-icon,
.product-icon,
.pulse-card i{
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 20%,rgba(255,255,255,.22),transparent 42%),
    rgba(8,25,44,.58);
  border:1px solid rgba(174,218,255,.22);
  box-shadow:
    inset 0 0 22px rgba(99,214,255,.10),
    0 0 28px rgba(99,214,255,.10);
}

.premium-icon{
  width:70px;
  height:70px;
}

.premium-icon svg,
.product-icon svg,
.pulse-card svg{
  width:36px;
  height:36px;
  fill:none;
  stroke:var(--cyan);
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(99,214,255,.60));
}

.principle b{
  display:block;
  color:var(--gold2);
  font-size:18px;
  margin-bottom:6px;
}

.principle span{
  display:block;
  color:rgba(226,237,250,.84);
  font-size:14px;
  line-height:1.45;
}

.core-stage{
  min-height:760px;
  display:grid;
  place-items:center;
  position:relative;
  perspective:1200px;
}

.core-heading{
  position:absolute;
  top:26px;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  z-index:20;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.core-heading span{
  display:block;
  color:rgba(244,248,255,.96);
  font-size:21px;
  font-weight:900;
}

.core-heading strong{
  display:block;
  color:var(--gold2);
  font-size:14px;
  margin-top:6px;
  letter-spacing:.04em;
  text-transform:none;
  font-weight:600;
}

.core-stage:before{
  content:"";
  position:absolute;
  width:min(780px,74vw);
  height:min(780px,74vw);
  border-radius:50%;
  background:
    conic-gradient(from 90deg,
      transparent 0deg,
      rgba(99,214,255,.13) 46deg,
      transparent 92deg,
      rgba(242,200,107,.11) 138deg,
      transparent 184deg,
      rgba(99,214,255,.13) 230deg,
      transparent 300deg,
      rgba(255,255,255,.10) 340deg,
      transparent 360deg);
  filter:blur(.5px);
  opacity:.92;
  animation:reactorHaloSpin 48s linear infinite;
  z-index:-1;
}

.core-stage:after{
  content:"";
  position:absolute;
  width:min(860px,82vw);
  height:180px;
  bottom:88px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(99,214,255,.20),transparent 68%);
  filter:blur(18px);
  opacity:.95;
  z-index:-1;
}

.core-label{
  position:absolute;
  z-index:22;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 15px;
  border:1px solid rgba(174,218,255,.26);
  border-radius:999px;
  background:rgba(4,12,24,.54);
  backdrop-filter:blur(12px);
  color:rgba(244,248,255,.96);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  box-shadow:0 0 24px rgba(99,214,255,.12),inset 0 0 16px rgba(255,255,255,.04);
}

.core-label:before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px var(--gold),0 0 24px rgba(242,200,107,.50);
}

.label-top{top:120px;left:50%;transform:translateX(-50%)}
.label-left{left:4%;top:42%}
.label-left2{left:7%;top:68%}
.label-right{right:1%;top:42%}
.label-right2{right:6%;top:68%}

.identity-core{
  width:min(650px,56vw);
  min-width:430px;
  aspect-ratio:1/1;
  position:relative;
  display:grid;
  place-items:center;
  isolation:isolate;
  transform:translateY(18px) rotateX(2deg);
  filter:
    drop-shadow(0 44px 95px rgba(0,0,0,.62))
    drop-shadow(0 0 48px rgba(99,214,255,.18));
}

.identity-core:before{
  content:"";
  position:absolute;
  inset:-16%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 48%,rgba(99,214,255,.35),transparent 30%),
    radial-gradient(circle at 50% 52%,rgba(242,200,107,.16),transparent 46%),
    radial-gradient(circle at 50% 52%,rgba(255,255,255,.12),transparent 58%);
  filter:blur(28px);
  z-index:-5;
  animation:coreBloom 7s ease-in-out infinite;
}

.identity-core:after{
  content:"";
  position:absolute;
  width:42%;
  height:146%;
  top:-23%;
  left:29%;
  background:
    linear-gradient(180deg,transparent 0%,rgba(99,214,255,.12) 20%,rgba(255,255,255,.18) 50%,rgba(242,200,107,.08) 62%,transparent 100%);
  filter:blur(24px);
  transform:rotate(-5deg);
  opacity:.82;
  z-index:-4;
  animation:shaft 9s ease-in-out infinite;
}

.aura{
  position:absolute;
  inset:-2%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(99,214,255,.28),transparent 36%),
    radial-gradient(circle at 50% 56%,rgba(242,200,107,.16),transparent 60%);
  filter:blur(20px);
  animation:breathe 6s ease-in-out infinite;
  z-index:-3;
}

.sphere{
  position:absolute;
  inset:7%;
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle at 32% 22%,rgba(255,255,255,1) 0%,rgba(176,236,255,.82) 8%,rgba(66,155,255,.62) 25%,rgba(9,38,84,.94) 58%,#010715 100%),
    radial-gradient(circle at 68% 70%,rgba(242,200,107,.20),transparent 42%);
  box-shadow:
    inset -78px -78px 150px rgba(0,0,0,.68),
    inset 36px 30px 78px rgba(255,255,255,.18),
    inset 0 0 88px rgba(99,214,255,.12),
    0 0 0 1px rgba(160,220,255,.38),
    0 42px 138px rgba(49,137,255,.42),
    0 0 100px rgba(99,214,255,.24);
  animation:sphereFloat 7s ease-in-out infinite;
}

.sphere:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 33% 18%,rgba(255,255,255,.46),transparent 28%),
    linear-gradient(128deg,transparent 18%,rgba(255,255,255,.16) 42%,transparent 50%),
    repeating-linear-gradient(25deg,rgba(255,255,255,.07) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(104deg,rgba(99,214,255,.085) 0 1px,transparent 1px 48px);
  mix-blend-mode:screen;
  opacity:.88;
}

.brain{
  position:absolute;
  inset:16%;
  opacity:.54;
  border-radius:50%;
  background:
    radial-gradient(circle at 24% 28%,transparent 0 10px,rgba(99,214,255,.66) 11px 13px,transparent 14px),
    radial-gradient(circle at 40% 23%,transparent 0 12px,rgba(99,214,255,.52) 13px 15px,transparent 16px),
    radial-gradient(circle at 58% 32%,transparent 0 13px,rgba(99,214,255,.52) 14px 16px,transparent 17px),
    radial-gradient(circle at 38% 48%,transparent 0 12px,rgba(99,214,255,.62) 13px 15px,transparent 16px),
    radial-gradient(circle at 62% 54%,transparent 0 14px,rgba(99,214,255,.54) 15px 17px,transparent 18px),
    radial-gradient(circle at 50% 68%,transparent 0 11px,rgba(242,200,107,.50) 12px 14px,transparent 15px);
  filter:drop-shadow(0 0 16px rgba(99,214,255,.32));
}

.brain:before{
  content:"";
  position:absolute;
  inset:6%;
  border-radius:48% 52% 54% 46%;
  border:1px solid rgba(99,214,255,.34);
  box-shadow:inset 0 0 52px rgba(99,214,255,.20);
}

.network{
  position:absolute;
  inset:9%;
  border-radius:50%;
  background:
    radial-gradient(circle at 22% 31%,var(--cyan) 0 2px,transparent 3px),
    radial-gradient(circle at 37% 22%,var(--cyan) 0 2px,transparent 3px),
    radial-gradient(circle at 62% 28%,var(--cyan) 0 2px,transparent 3px),
    radial-gradient(circle at 75% 44%,var(--gold) 0 2px,transparent 3px),
    radial-gradient(circle at 29% 62%,var(--cyan) 0 2px,transparent 3px),
    radial-gradient(circle at 51% 70%,var(--cyan) 0 2px,transparent 3px),
    radial-gradient(circle at 68% 67%,var(--gold) 0 2px,transparent 3px);
  opacity:.98;
  animation:nodePulse 3.4s ease-in-out infinite;
}

.city-nodes{
  position:absolute;
  inset:10%;
  border-radius:50%;
  pointer-events:none;
  opacity:1;
  z-index:5;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 8px rgba(242,200,107,.35));
}

.city-nodes i{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#ffd86b;
  box-shadow:0 0 12px #ffd86b;
  animation:flicker 2.8s ease-in-out infinite;
}

.city-nodes i[data-size="large"]{
  width:6px;
  height:6px;
}

.city-nodes i[data-tone="gold"]{
  background:#ffe7a3;
  box-shadow:0 0 18px #ffe7a3;
}

.orbit{
  position:absolute;
  inset:2%;
  border-radius:50%;
  border:1px solid rgba(136,205,255,.22);
  transform:rotate(var(--r));
  animation:orbitSpin var(--s) linear infinite;
  box-shadow:inset 0 0 22px rgba(99,214,255,.04);
}

.orbit:before{
  content:"";
  position:absolute;
  left:10%;
  top:49%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ffd86b;
  box-shadow:0 0 12px #ffd86b,0 0 28px rgba(242,200,107,.60);
}

.o1{--r:-18deg;--s:22s}
.o2{--r:24deg;--s:31s;inset:0;opacity:.72}
.o3{--r:72deg;--s:38s;inset:6%;opacity:.52}
.o4{--r:112deg;--s:44s;inset:10%;opacity:.36}

.jet{
  position:absolute;
  inset:4%;
  border-radius:50%;
  border-top:2px dashed rgba(255,255,255,.34);
  transform:rotate(-12deg);
  animation:jetMove 5s linear infinite;
  opacity:.44;
  filter:drop-shadow(0 0 8px rgba(99,214,255,.32));
}

.j2{transform:rotate(26deg);animation-duration:6.5s;opacity:.32}

.neural-constellation{
  position:absolute;
  inset:7%;
  z-index:6;
  pointer-events:none;
  opacity:.76;
  mix-blend-mode:screen;
}

.constellation-svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.neural-link{
  fill:none;
  stroke:rgba(99,214,255,.40);
  stroke-width:1.2;
  stroke-dasharray:7 12;
  filter:drop-shadow(0 0 8px rgba(99,214,255,.40));
  animation:neuralFlow 6s linear infinite;
}

.neural-dot{
  fill:#63d6ff;
  filter:drop-shadow(0 0 9px rgba(99,214,255,.78));
  animation:neuralBlink 3.2s ease-in-out infinite;
}

.neural-dot.gold{
  fill:#f2c86b;
  filter:drop-shadow(0 0 12px rgba(242,200,107,.84));
}

.med-symbol{
  position:relative;
  width:118px;
  height:118px;
  display:grid;
  place-items:center;
  border-radius:50%;
  z-index:10;
  background:
    radial-gradient(circle at 34% 22%,rgba(255,255,255,1),rgba(255,255,255,.88) 44%,rgba(214,230,248,.94) 100%);
  box-shadow:
    0 24px 70px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.56),
    0 0 48px rgba(242,200,107,.34),
    inset 0 0 24px rgba(99,214,255,.12);
}

.med-symbol:before{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:50%;
  border:1px solid rgba(99,214,255,.26);
  box-shadow:0 0 24px rgba(99,214,255,.18);
}

.staff{
  position:absolute;
  width:7px;
  height:86px;
  background:linear-gradient(180deg,#fff,#b6c3d4,#fff);
  border-radius:8px;
  z-index:4;
  box-shadow:0 0 12px rgba(255,255,255,.82);
}

.staff:before{
  content:"";
  position:absolute;
  top:-15px;
  left:-7px;
  width:21px;
  height:21px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 25%,#fff,#c6d4e8 70%);
}

.serpent{
  position:absolute;
  width:48px;
  height:88px;
  border:6px solid transparent;
  border-left-color:#d8bd7a;
  border-radius:50%;
  transform:rotate(18deg);
  z-index:5;
  filter:drop-shadow(0 0 8px rgba(242,200,107,.40));
}

.serpent:after{
  content:"";
  position:absolute;
  right:-22px;
  top:40px;
  width:43px;
  height:43px;
  border:6px solid transparent;
  border-right-color:#d8bd7a;
  border-radius:50%;
  transform:rotate(6deg);
}

.beam{
  position:absolute;
  bottom:18px;
  width:330px;
  height:180px;
  opacity:.78;
  background:radial-gradient(ellipse at center,rgba(99,214,255,.66),rgba(242,200,107,.10) 34%,transparent 70%);
  filter:blur(13px);
  z-index:-1;
  animation:beamPulse 5s ease-in-out infinite;
}

.base-ring{
  position:absolute;
  bottom:42px;
  width:430px;
  height:106px;
  border-radius:50%;
  border:1px solid rgba(99,214,255,.36);
  background:radial-gradient(ellipse at center,rgba(99,214,255,.08),transparent 66%);
  box-shadow:0 0 46px rgba(99,214,255,.30),inset 0 0 24px rgba(99,214,255,.16);
  z-index:-1;
}

.reactor-floor{
  position:absolute;
  bottom:-26px;
  width:500px;
  height:145px;
  border-radius:50%;
  background:
    repeating-radial-gradient(ellipse at center,rgba(99,214,255,.22) 0 1px,transparent 1px 22px),
    radial-gradient(ellipse at center,rgba(99,214,255,.20),transparent 66%);
  transform:rotateX(66deg);
  filter:drop-shadow(0 0 20px rgba(99,214,255,.28));
  opacity:.82;
  z-index:-2;
}

.figure8-track{
  position:absolute;
  bottom:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  color:rgba(244,248,255,.86);
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:14px;
  z-index:25;
}

.figure8-track i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 12px var(--gold);
}

.figure8-subtitle{
  position:absolute;
  bottom:21px;
  color:rgba(220,232,248,.62);
  font-size:13px;
  z-index:25;
}

.product-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.product{
  min-height:116px;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:12px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(174,218,255,.13);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018)),
    rgba(8,23,41,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:.18s ease;
}

.product:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:rgba(99,214,255,.34);
  box-shadow:0 20px 40px rgba(0,0,0,.24),0 0 28px rgba(99,214,255,.12);
}

.product-icon{
  width:52px;
  height:52px;
}

.product-icon svg{
  width:30px;
  height:30px;
}

.product-copy b{
  display:block;
  color:#fff;
  font-size:13px;
  margin-bottom:6px;
}

.product-copy em{
  display:block;
  color:rgba(226,237,250,.74);
  font-style:normal;
  font-size:11px;
  line-height:1.35;
}

.tagline{
  position:relative;
  z-index:2;
  margin-top:30px;
  text-align:center;
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:13px;
}

.pulse-strip{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:8px auto 0;
  padding:0 32px;
}

.pulse-card{
  min-height:126px;
  display:grid;
  grid-template-columns:78px 1fr;
  align-items:center;
  gap:18px;
  padding:20px 24px;
  border-radius:999px;
  border:1px solid rgba(174,218,255,.18);
  background:
    linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),
    rgba(4,13,25,.68);
  box-shadow:0 28px 60px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07);
  position:relative;
  overflow:hidden;
}

.pulse-card:after{
  content:"";
  position:absolute;
  right:-30px;
  top:50%;
  width:80px;
  height:2px;
  background:linear-gradient(90deg,rgba(99,214,255,.4),transparent);
}

.pulse-card i{
  width:72px;
  height:72px;
  position:relative;
  z-index:2;
}

.pulse-card strong{
  display:block;
  color:rgba(244,248,255,.92);
  font-size:20px;
  letter-spacing:.04em;
}

.pulse-card b{
  display:block;
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  margin:3px 0 6px;
}

.pulse-card span{
  display:block;
  color:rgba(226,237,250,.74);
  font-size:12px;
  line-height:1.35;
}

.pulse-card.active{
  border-color:rgba(242,200,107,.36);
  box-shadow:0 28px 60px rgba(0,0,0,.32),0 0 34px rgba(242,200,107,.11),inset 0 1px 0 rgba(255,255,255,.08);
}

.pulse-card.active b{
  color:var(--gold2);
}

body[data-figure8="resolving"] .sphere{
  box-shadow:
    inset -78px -78px 150px rgba(0,0,0,.68),
    inset 36px 30px 78px rgba(255,255,255,.18),
    0 0 0 1px rgba(160,220,255,.42),
    0 42px 150px rgba(99,214,255,.48);
}

body[data-figure8="rendering"] .neural-link{
  stroke:rgba(99,214,255,.62);
  animation-duration:3.4s;
}

body[data-figure8="returning"] .orbit:before{
  background:#fff2bd;
  box-shadow:0 0 24px #f2c86b,0 0 42px rgba(242,200,107,.55);
}

.site-footer{
  margin-top:34px;
  padding:18px 6px 8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  border-top:1px solid rgba(255,255,255,.07);
  color:rgba(174,187,209,.54);
  font-size:12px;
  flex-wrap:wrap;
}

.footer-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.footer-links a,
.footer-links button{
  border:0;
  background:transparent;
  color:rgba(174,187,209,.56);
  cursor:pointer;
  padding:0;
}

.footer-links a:hover,
.footer-links button:hover{
  color:#fff;
}

.admin-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.68);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
  padding:18px;
}

.admin-overlay.open{display:flex}

.admin-modal{
  width:min(440px,100%);
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(8,18,32,.96);
  padding:18px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:900;
}

.admin-modal input{
  width:100%;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  color:var(--ink);
  border-radius:12px;
  padding:10px;
  outline:none;
}

.smalllabel{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:10px 0 6px;
}

.admin-row{
  display:flex;
  gap:10px;
  margin-top:14px;
}

.admin-row button,
.modal-x{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(99,214,255,.18);
  color:var(--ink);
  cursor:pointer;
  font-weight:800;
}

.admin-row button{flex:1}
.admin-row button.secondary,.modal-x{background:rgba(255,255,255,.06)}

.admin-err{
  margin-top:10px;
  color:var(--danger);
  font-size:12px;
  display:none;
}

@keyframes chamberFog{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.75}
  50%{transform:translate3d(0,-18px,0) scale(1.035);opacity:1}
}

@keyframes reactorHaloSpin{
  to{transform:rotate(360deg)}
}

@keyframes coreBloom{
  0%,100%{opacity:.62;transform:scale(.98)}
  50%{opacity:1;transform:scale(1.045)}
}

@keyframes shaft{
  0%,100%{transform:rotate(-8deg) translateX(-8px);opacity:.56}
  50%{transform:rotate(-3deg) translateX(12px);opacity:.88}
}

@keyframes breathe{
  50%{transform:scale(1.035);opacity:.78}
}

@keyframes sphereFloat{
  50%{transform:translateY(-8px) scale(1.012)}
}

@keyframes orbitSpin{
  to{transform:rotate(calc(var(--r) + 360deg))}
}

@keyframes jetMove{
  to{border-top-color:rgba(255,255,255,.20);transform:rotate(348deg)}
}

@keyframes nodePulse{
  50%{opacity:.62;filter:brightness(1.5)}
}

@keyframes flicker{
  0%,100%{opacity:.24;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.35)}
}

@keyframes beamPulse{
  50%{opacity:.58;transform:scaleX(1.18)}
}

@keyframes neuralFlow{
  to{stroke-dashoffset:-180}
}

@keyframes neuralBlink{
  0%,100%{opacity:.35}
  50%{opacity:1}
}

@media(max-width:1280px){
  .hero{
    grid-template-columns:1fr;
  }

  .left-panel,
  .right-panel{
    transform:none;
    min-height:auto;
  }

  .identity-core{
    width:min(700px,92vw);
  }

  .pulse-strip{
    grid-template-columns:1fr 1fr;
    padding:0;
  }
}

@media(max-width:760px){
  .scene-shell{
    width:min(100% - 22px,1320px);
  }

  .top{
    position:static;
  }

  .brand em{
    display:none;
  }

  .brand b{
    font-size:26px;
  }

  .nav{
    justify-content:flex-start;
  }

  .identity-core{
    min-width:300px;
    width:96vw;
  }

  .core-heading{
    top:8px;
  }

  .core-label{
    display:none;
  }

  .figure8-track,
  .figure8-subtitle{
    display:none;
  }

  .product-grid,
  .pulse-strip{
    grid-template-columns:1fr;
  }

  .pulse-card{
    border-radius:28px;
  }

  .left-panel,
  .right-panel{
    padding:24px 18px;
  }
}
/* ============================================================
   FULL PAGE DAY / NIGHT MODE OVERRIDE
   Makes Day Mode transform the whole cinematic environment,
   not just the panels.
============================================================ */

html[data-theme="light"] body{
  color:#10243f;
  background:
    radial-gradient(1000px 620px at 50% 8%,rgba(255,255,255,.95),transparent 60%),
    radial-gradient(900px 620px at 50% 42%,rgba(99,214,255,.26),transparent 66%),
    radial-gradient(760px 520px at 14% 34%,rgba(242,200,107,.18),transparent 68%),
    radial-gradient(800px 540px at 88% 36%,rgba(35,118,201,.16),transparent 68%),
    linear-gradient(180deg,#f4fbff 0%,#dcefff 42%,#b9d9f5 74%,#8fb8dc 100%);
}

html[data-theme="light"] body:before{
  opacity:.42;
  background:
    radial-gradient(circle at 16% 62%,rgba(167,113,32,.34) 0 1px,transparent 2px),
    radial-gradient(circle at 25% 50%,rgba(0,132,196,.34) 0 1px,transparent 2px),
    radial-gradient(circle at 70% 28%,rgba(255,255,255,.88) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 62%,rgba(167,113,32,.30) 0 1px,transparent 2px),
    radial-gradient(circle at 42% 18%,rgba(0,132,196,.34) 0 1px,transparent 2px);
}

html[data-theme="light"] body:after{
  background:
    radial-gradient(circle at 50% 34%,transparent 0 42%,rgba(255,255,255,.08) 68%,rgba(65,117,166,.18) 100%),
    linear-gradient(rgba(18,100,189,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,100,189,.035) 1px,transparent 1px);
  background-size:auto,68px 68px,68px 68px;
}

html[data-theme="light"] .scene-shell:before{
  background:
    linear-gradient(180deg,transparent,rgba(255,255,255,.28) 36%,rgba(185,217,245,.72)),
    repeating-linear-gradient(90deg,rgba(18,100,189,.08) 0 1px,transparent 1px 52px);
  opacity:.72;
}

html[data-theme="light"] .top,
html[data-theme="light"] .panel,
html[data-theme="light"] .pulse-card,
html[data-theme="light"] .product{
  background:
    linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.44)),
    rgba(255,255,255,.62);
  border-color:rgba(18,100,189,.18);
  box-shadow:
    0 24px 70px rgba(42,87,134,.16),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 0 42px rgba(99,214,255,.08);
}

html[data-theme="light"] .nav a,
html[data-theme="light"] .nav button{
  color:#123255;
}

html[data-theme="light"] .nav a:hover,
html[data-theme="light"] .nav button:hover,
html[data-theme="light"] .nav a.active{
  background:rgba(18,100,189,.10);
  color:#06182c;
}

html[data-theme="light"] .brand b,
html[data-theme="light"] .panel-title,
html[data-theme="light"] .core-heading span{
  color:#0d2949;
}

html[data-theme="light"] .brand em,
html[data-theme="light"] .panel-subtitle,
html[data-theme="light"] .core-heading strong,
html[data-theme="light"] .tagline{
  color:#9b6b22;
}

html[data-theme="light"] .principle span,
html[data-theme="light"] .product-copy em,
html[data-theme="light"] .pulse-card span,
html[data-theme="light"] .figure8-subtitle{
  color:#4f657f;
}

html[data-theme="light"] .core-label{
  color:#0d2949;
  background:rgba(255,255,255,.66);
  border-color:rgba(18,100,189,.20);
}

html[data-theme="light"] .sphere{
  background:
    radial-gradient(circle at 32% 22%,rgba(255,255,255,1) 0%,rgba(200,246,255,.88) 9%,rgba(78,169,238,.66) 28%,rgba(31,101,170,.88) 62%,#17456f 100%),
    radial-gradient(circle at 68% 70%,rgba(242,200,107,.22),transparent 42%);
  box-shadow:
    inset -66px -66px 135px rgba(16,54,96,.36),
    inset 36px 30px 78px rgba(255,255,255,.34),
    inset 0 0 88px rgba(99,214,255,.16),
    0 0 0 1px rgba(18,100,189,.26),
    0 42px 120px rgba(68,137,204,.28),
    0 0 90px rgba(99,214,255,.20);
}

html[data-theme="light"] .hero:before{
  background:
    linear-gradient(90deg,rgba(18,100,189,.08),transparent 18%,transparent 82%,rgba(18,100,189,.08)),
    radial-gradient(ellipse at 50% 42%,rgba(99,214,255,.18),transparent 46%),
    radial-gradient(ellipse at 50% 86%,rgba(18,100,189,.12),transparent 44%);
}

html[data-theme="light"] .hero:after{
  background:
    linear-gradient(118deg,transparent 0 28%,rgba(99,214,255,.12) 44%,transparent 62%),
    linear-gradient(245deg,transparent 0 34%,rgba(242,200,107,.10) 50%,transparent 70%),
    radial-gradient(ellipse at 50% 72%,rgba(255,255,255,.20),transparent 46%);
}

html[data-theme="light"] .reactor-floor{
  opacity:.58;
}

html[data-theme="light"] .site-footer{
  color:rgba(13,41,73,.58);
  border-top-color:rgba(18,100,189,.16);
}

html[data-theme="light"] .footer-links a,
html[data-theme="light"] .footer-links button{
  color:rgba(13,41,73,.58);
}

html[data-theme="light"] .footer-links a:hover,
html[data-theme="light"] .footer-links button:hover{
  color:#0d2949;
}
body{
  --scene-luminosity:.42;
  --atmosphere-density:.26;
  --camera-depth:.4;
}

body.atmosphere-rendered:after{
  opacity:calc(.58 + (var(--atmosphere-density) * .42));
}

body.holograms-online .core-label{
  box-shadow:
    0 0 calc(14px + (var(--scene-luminosity) * 24px)) rgba(99,214,255,.16),
    inset 0 0 16px rgba(255,255,255,.04);
}

.identity-core{
  --reactor-pulse:.32;
  --reactor-energy:.55;
  --reactor-luminosity:.42;
}

.identity-core:before{
  opacity:calc(.42 + (var(--reactor-luminosity) * .58));
}

.sphere{
  filter:
    brightness(calc(.9 + (var(--reactor-luminosity) * .18)))
    saturate(calc(1 + (var(--reactor-energy) * .18)));
}

.aura{
  opacity:calc(.48 + (var(--reactor-energy) * .42));
}

body[data-figure8="rendering"] .panel{
  border-color:rgba(242,200,107,.24);
}

.profile-menu {
  position: relative;
  z-index: 60;
}

.profile-trigger {
  border: 1px solid rgba(130, 210, 255, 0.35);
  background: rgba(5, 14, 28, 0.72);
  color: rgba(245, 250, 255, 0.94);
  border-radius: 999px;
  padding: 0.68rem 1rem;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.14);
  backdrop-filter: blur(18px);
}

.profile-trigger:hover {
  border-color: rgba(248, 210, 123, 0.65);
  box-shadow: 0 0 30px rgba(248, 210, 123, 0.2);
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: min(340px, 88vw);
  padding: 0.65rem;
  border-radius: 1.2rem;
  background:
    linear-gradient(145deg, rgba(7, 18, 38, 0.96), rgba(4, 8, 18, 0.96));
  border: 1px solid rgba(130, 210, 255, 0.24);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    inset 0 0 28px rgba(56, 189, 248, 0.07);
  backdrop-filter: blur(22px);
  display: none;
}

.profile-menu.open .profile-dropdown {
  display: grid;
  gap: 0.55rem;
}

.profile-option {
  text-decoration: none;
  color: rgba(245, 250, 255, 0.92);
  padding: 0.85rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  transition: 180ms ease;
}

.profile-option strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.22rem;
}

.profile-option small {
  display: block;
  line-height: 1.35;
  color: rgba(205, 220, 235, 0.72);
  font-size: 0.76rem;
}

.profile-option:hover,
.profile-option.professional {
  border-color: rgba(248, 210, 123, 0.35);
  background: rgba(248, 210, 123, 0.08);
}

body[data-homepage-bridge="online"] .identity-core,
body[data-homepage-bridge="online"] #identityCore {
  filter:
    drop-shadow(0 0 calc(38px + var(--scene-luminosity, 0.5) * 45px) rgba(79, 195, 255, 0.44))
    drop-shadow(0 0 calc(22px + var(--scene-atmosphere, 0.35) * 35px) rgba(248, 210, 123, 0.24));
}

body[data-homepage-bridge="online"] .cinematic-shell,
body[data-homepage-bridge="online"] .home-shell,
body[data-homepage-bridge="online"] main {
  --bridge-depth: calc(var(--scene-depth, 0.4) * 1px);
}

/* ============================================================
   AVA REALISM LAYERS — HOMEPAGE V2
============================================================ */

:root {
  --scene-atmosphere: 0.35;
  --scene-luminosity: 0.5;
  --scene-depth: 0.4;
  --particle-density: 0.42;
  --hologram-intensity: 0.48;
  --reactor-energy: 0.55;
  --camera-drift: 0;
}

.atmosphere-layer,
.particle-layer,
.hologram-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.atmosphere-layer {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 38%,
      rgba(56, 189, 248, calc(0.12 + var(--scene-luminosity) * 0.08)),
      transparent 34%),
    radial-gradient(circle at 72% 18%,
      rgba(248, 210, 123, calc(0.08 + var(--scene-atmosphere) * 0.08)),
      transparent 28%),
    linear-gradient(180deg,
      rgba(3, 10, 25, calc(0.12 + var(--scene-atmosphere) * 0.18)),
      rgba(0, 0, 0, 0));
  filter: blur(calc(18px + var(--scene-atmosphere) * 14px));
  opacity: calc(0.72 + var(--scene-atmosphere) * 0.2);
}

.particle-layer {
  z-index: 1;
}

.particle-layer i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.72);
  box-shadow: 0 0 14px rgba(125, 211, 252, 0.65);
  opacity: calc(0.18 + var(--particle-density) * 0.52);
  animation: particleDrift linear infinite;
}

.particle-layer i[data-tone="gold"] {
  background: rgba(248, 210, 123, 0.85);
  box-shadow: 0 0 16px rgba(248, 210, 123, 0.72);
}

.particle-layer i[data-size="large"] {
  width: 3.5px;
  height: 3.5px;
}

@keyframes particleDrift {
  from {
    transform: translate3d(0, 12px, 0) scale(0.8);
  }
  50% {
    transform: translate3d(
      calc(18px + var(--camera-drift) * 12px),
      -28px,
      0
    ) scale(1.2);
  }
  to {
    transform: translate3d(-12px, -72px, 0) scale(0.75);
  }
}

.hologram-layer {
  z-index: 2;
  display: grid;
  place-items: center;
  opacity: calc(0.18 + var(--hologram-intensity) * 0.34);
  mix-blend-mode: screen;
}

.hologram-ring {
  position: absolute;
  width: calc(360px + var(--scene-depth) * 160px);
  height: calc(360px + var(--scene-depth) * 160px);
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.16);
  box-shadow:
    inset 0 0 40px rgba(56, 189, 248, 0.08),
    0 0 45px rgba(56, 189, 248, 0.08);
  animation: hologramOrbit 12s linear infinite;
}

.hologram-ring:nth-child(2) {
  width: calc(460px + var(--scene-depth) * 180px);
  height: calc(460px + var(--scene-depth) * 180px);
  transform: rotateX(64deg);
  animation-duration: 16s;
}

.hologram-ring:nth-child(3) {
  width: calc(560px + var(--scene-depth) * 200px);
  height: calc(560px + var(--scene-depth) * 200px);
  transform: rotateY(58deg);
  animation-duration: 20s;
}

.hologram-ring:nth-child(4) {
  width: calc(660px + var(--scene-depth) * 220px);
  height: calc(660px + var(--scene-depth) * 220px);
  border-color: rgba(248, 210, 123, 0.12);
  animation-duration: 26s;
}

@keyframes hologramOrbit {
  from {
    transform: rotateX(62deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(62deg) rotateZ(360deg);
  }
}

.identity-core,
#identityCore {
  position: relative;
  transform-style: preserve-3d;
  transition:
    transform 900ms cubic-bezier(.2,.8,.2,1),
    filter 900ms ease;
  filter:
    drop-shadow(0 0 calc(30px + var(--reactor-energy) * 40px) rgba(56, 189, 248, 0.45))
    drop-shadow(0 0 calc(18px + var(--scene-luminosity) * 30px) rgba(248, 210, 123, 0.24));
}

.reactor-orbit {
  position: absolute;
  inset: -14%;
  border-radius: 999px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  pointer-events: none;
  animation: reactorOrbit linear infinite;
}

.reactor-orbit[data-orbit="1"] {
  animation-duration: calc(9s - var(--reactor-energy) * 2s);
  transform: rotateX(68deg);
}

.reactor-orbit[data-orbit="2"] {
  inset: -22%;
  border-color: rgba(248, 210, 123, 0.16);
  animation-duration: calc(13s - var(--reactor-energy) * 2s);
  transform: rotateY(58deg);
}

.reactor-orbit[data-orbit="3"] {
  inset: -31%;
  border-color: rgba(125, 211, 252, 0.12);
  animation-duration: calc(18s - var(--reactor-energy) * 3s);
  transform: rotateX(52deg) rotateY(24deg);
}

@keyframes reactorOrbit {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

.reactor-flare {
  position: absolute;
  inset: 8%;
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle,
      rgba(255, 255, 255, calc(0.06 + var(--reactor-energy) * 0.1)),
      transparent 58%);
  animation: reactorFlare 3.6s ease-in-out infinite;
}

@keyframes reactorFlare {
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.82;
    transform: scale(1.05);
  }
}

body[data-homepage-bridge="online"] .atmosphere-layer {
  opacity: calc(0.78 + var(--scene-atmosphere) * 0.16);
}

body[data-figure8="rendering"] .particle-layer i {
  animation-duration: 7s;
}

body[data-figure8="returning"] .hologram-layer {
  opacity: calc(0.22 + var(--hologram-intensity) * 0.2);
}

/* Keep realism layers behind homepage content */
.atmosphere-layer,
.particle-layer,
.hologram-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.atmosphere-layer {
  z-index: 0;
}

.particle-layer {
  z-index: 1;
}

.hologram-layer {
  z-index: 2;
}

.scene-shell,
.top,
.homepage-cinema,
.hero,
.panel,
.core-stage,
.pulse-strip,
.site-footer {
  position: relative;
  z-index: 10;
}

/* Prevent atmosphere from covering nav/dropdowns */
.profile-menu,
.profile-dropdown {
  z-index: 200;
}

/* Keep admin modal above everything */
.admin-overlay {
  z-index: 10000;
}

body[data-homepage-bridge="online"] .brand-seal {
  box-shadow:
    0 0 32px rgba(242, 200, 107, 0.34),
    0 0 42px rgba(99, 214, 255, 0.28),
    inset 0 0 18px rgba(255,255,255,.08);
}

/* ============================================================
   SHARED SCENE PROTOCOL V1 — FRONTEND CONSUMPTION
============================================================ */

:root {
  --camera-depth: 0.45;
  --camera-drift: 0.12;
  --camera-fov: 40;
  --mouse-x: 0;
  --mouse-y: 0;

  --shared-fog-density: 0.35;
  --shared-particle-density: 0.5;
  --shared-hologram-intensity: 0.5;
  --shared-bloom-intensity: 0.5;
  --shared-depth-planes: 3;

  --reactor-pulse-speed: 1;
  --particle-velocity: 1;
  --hologram-rotation: 0.7;
  --panel-depth-shift: 0.15;
}

body[data-shared-scene="online"] .hero {
  transform:
    perspective(calc(900px + var(--camera-depth) * 600px))
    translate3d(
      calc(var(--mouse-x) * -14px),
      calc(var(--mouse-y) * -10px),
      0
    );
  transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

body[data-shared-scene="online"] .left-panel {
  transform:
    translateY(calc(18px - var(--panel-depth-shift) * 18px))
    translateX(calc(var(--mouse-x) * 10px))
    perspective(900px)
    rotateY(calc(3deg + var(--mouse-x) * 2deg));
}

body[data-shared-scene="online"] .right-panel {
  transform:
    translateY(calc(-4px + var(--panel-depth-shift) * 14px))
    translateX(calc(var(--mouse-x) * -10px))
    perspective(900px)
    rotateY(calc(-3deg + var(--mouse-x) * 2deg));
}

body[data-shared-scene="online"] .core-stage {
  transform:
    translate3d(
      calc(var(--mouse-x) * -18px),
      calc(var(--mouse-y) * -12px),
      0
    );
  transition: transform 800ms cubic-bezier(.2,.8,.2,1);
}

body[data-shared-scene="online"] .identity-core,
body[data-shared-scene="online"] #identityCore {
  filter:
    drop-shadow(0 0 calc(30px + var(--shared-bloom-intensity) * 60px) rgba(56,189,248,.46))
    drop-shadow(0 0 calc(18px + var(--reactor-energy) * 44px) rgba(248,210,123,.26));
}

body[data-shared-scene="online"] .atmosphere-layer {
  opacity: calc(0.62 + var(--shared-fog-density) * 0.32);
  filter: blur(calc(18px + var(--shared-fog-density) * 22px));
}

body[data-shared-scene="online"] .particle-layer i {
  opacity: calc(0.12 + var(--shared-particle-density) * 0.58);
  animation-duration: calc(12s / max(var(--particle-velocity), 0.35));
}

body[data-shared-scene="online"] .hologram-layer {
  opacity: calc(0.14 + var(--shared-hologram-intensity) * 0.42);
}

body[data-shared-scene="online"] .hologram-ring {
  animation-duration: calc(14s / max(var(--hologram-rotation), 0.3));
}

body[data-camera-focus="reactor"] .identity-core,
body[data-camera-focus="reactor"] #identityCore {
  transform:
    translateY(calc(10px - var(--camera-depth) * 14px))
    scale(calc(1 + var(--camera-depth) * 0.025));
}

body[data-camera-focus="portals"] .product,
body[data-camera-focus="portals"] .profile-trigger {
  box-shadow:
    0 0 calc(16px + var(--shared-bloom-intensity) * 18px) rgba(99,214,255,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body[data-volumetric="on"] .hero:after {
  opacity: calc(0.68 + var(--shared-fog-density) * 0.22);
  filter: blur(calc(14px + var(--shared-fog-density) * 18px));
}

body[data-transition-style="cinematic_ease"] .panel,
body[data-transition-style="cinematic_ease"] .product,
body[data-transition-style="cinematic_ease"] .pulse-card {
  transition:
    transform 700ms cubic-bezier(.2,.8,.2,1),
    box-shadow 700ms ease,
    border-color 700ms ease;
}