.brand-intro-v5{
  --intro-cyan:#75d7ff;
  --intro-blue:#168aff;
  --intro-deep:#020813;
  position:fixed;
  inset:0;
  z-index:5000;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#f7fbff;
  background:
    radial-gradient(circle at 50% 36%,rgba(19,102,190,.26),transparent 26%),
    radial-gradient(circle at 50% 70%,rgba(10,91,178,.20),transparent 34%),
    linear-gradient(180deg,#020712 0%,#031326 58%,#01060e 100%);
  opacity:1;
  visibility:visible;
  transition:opacity .72s cubic-bezier(.22,1,.36,1),visibility .72s;
  isolation:isolate;
}
.brand-intro-v5.is-leaving{opacity:0;visibility:hidden}
.brand-intro-v5 .intro-background{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.brand-intro-v5 .intro-background::before{
  content:"";position:absolute;inset:-18%;
  background:
    radial-gradient(circle at 50% 45%,transparent 0 22%,rgba(48,151,255,.05) 22.3% 22.7%,transparent 23%),
    radial-gradient(circle at 50% 45%,transparent 0 31%,rgba(65,173,255,.035) 31.3% 31.6%,transparent 32%);
  animation:introPulseField 9s ease-in-out infinite;
}
.brand-intro-v5 .intro-horizon{
  position:absolute;left:-10%;right:-10%;top:70%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(105,210,255,.34),rgba(255,255,255,.72),rgba(105,210,255,.34),transparent);
  box-shadow:0 0 24px rgba(31,142,255,.42),0 0 80px rgba(20,111,212,.20);
}
.brand-intro-v5 .intro-beam{position:absolute;left:50%;top:70%;height:2px;width:72vw;transform-origin:left center;background:linear-gradient(90deg,rgba(132,220,255,.5),transparent 72%);filter:blur(.2px);opacity:.32}
.brand-intro-v5 .intro-beam-one{transform:rotate(-9deg);animation:introBeam 7s ease-in-out infinite}
.brand-intro-v5 .intro-beam-two{transform:rotate(8deg);animation:introBeam 8.5s 1.2s ease-in-out infinite reverse}
.brand-intro-v5 .intro-grid-plane{
  position:absolute;left:-20%;right:-20%;bottom:-20%;height:48%;
  background-image:linear-gradient(rgba(83,165,240,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(83,165,240,.08) 1px,transparent 1px);
  background-size:74px 42px;
  transform:perspective(620px) rotateX(68deg);
  transform-origin:center top;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 78%);
  opacity:.32;
}
.brand-intro-v5 .intro-content{
  width:min(1180px,calc(100% - 40px));
  min-height:min(900px,calc(100dvh - 68px));
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:center;
  padding:clamp(24px,4vh,52px) 0 clamp(72px,8vh,98px);
}
.brand-intro-v5 .intro-brand{display:grid;justify-items:center;align-content:start;animation:introBrandIn 1s cubic-bezier(.22,1,.36,1) both}
.brand-intro-v5 .intro-brand img{width:82px;height:82px;object-fit:contain;filter:drop-shadow(0 0 24px rgba(55,168,255,.36))}
.brand-intro-v5 .intro-brand-text{margin-top:9px;display:flex;align-items:baseline;gap:9px;letter-spacing:.12em;text-transform:uppercase}
.brand-intro-v5 .intro-brand-text strong{font-size:25px;font-weight:760;color:#f5f9ff}
.brand-intro-v5 .intro-brand-text span{font-size:14px;font-weight:420;color:#9eb4cc;letter-spacing:.19em;text-transform:none}
.brand-intro-v5 .intro-brand-rule{width:210px;height:1px;margin:13px 0 10px;background:linear-gradient(90deg,transparent,rgba(116,215,255,.82),transparent)}
.brand-intro-v5 .intro-brand small{font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:#7895b3}
.brand-intro-v5 .intro-message-stage{align-self:center;text-align:center;max-width:980px;margin:0 auto;padding:32px 20px 16px}
.brand-intro-v5 .intro-message{
  margin:0;
  min-height:2.8em;
  display:grid;
  place-items:center;
  font-size:clamp(23px,2.6vw,38px);
  line-height:1.34;
  font-weight:300;
  letter-spacing:.005em;
  color:#f4f9ff;
  text-wrap:balance;
  text-shadow:0 0 32px rgba(26,114,201,.23);
  transition:opacity .18s ease,transform .18s ease;
}
.brand-intro-v5 .intro-message.is-changing{opacity:0;transform:translateY(7px)}
.brand-intro-v5 .intro-author{margin-top:14px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#75c9f2}
.brand-intro-v5 .intro-instruction{margin-top:22px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#7f9dbd;transition:opacity .2s ease}
.brand-intro-v5 .intro-language-dock{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(20px,3vw,48px);
  padding:0 8px;
  animation:introDockIn .9s .28s cubic-bezier(.22,1,.36,1) both;
}
.brand-intro-v5 .intro-language{
  appearance:none;border:0;background:transparent;color:#fff;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:0 5px;
  min-width:112px;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s;
}
.brand-intro-v5 .intro-language:nth-child(1),.brand-intro-v5 .intro-language:nth-child(5){transform:translateY(13px)}
.brand-intro-v5 .intro-language:nth-child(2),.brand-intro-v5 .intro-language:nth-child(4){transform:translateY(4px)}
.brand-intro-v5 .intro-language:hover,.brand-intro-v5 .intro-language:focus-visible{outline:none;transform:translateY(-7px) scale(1.025)}
.brand-intro-v5 .intro-language:nth-child(1):hover,.brand-intro-v5 .intro-language:nth-child(5):hover,.brand-intro-v5 .intro-language:nth-child(1):focus-visible,.brand-intro-v5 .intro-language:nth-child(5):focus-visible{transform:translateY(5px) scale(1.025)}
.brand-intro-v5 .intro-language:nth-child(2):hover,.brand-intro-v5 .intro-language:nth-child(4):hover,.brand-intro-v5 .intro-language:nth-child(2):focus-visible,.brand-intro-v5 .intro-language:nth-child(4):focus-visible{transform:translateY(-4px) scale(1.025)}
.brand-intro-v5 .language-cube{
  position:relative;
  width:82px;height:82px;
  display:grid;place-items:center;
  border-radius:25px;
  transform-style:preserve-3d;
  animation:introCubeFloat 5.8s ease-in-out infinite;
  filter:drop-shadow(0 16px 20px rgba(0,0,0,.34));
}
.brand-intro-v5 .intro-language:nth-child(2) .language-cube{animation-delay:-1.1s}
.brand-intro-v5 .intro-language:nth-child(3) .language-cube{animation-delay:-2.2s}
.brand-intro-v5 .intro-language:nth-child(4) .language-cube{animation-delay:-3.3s}
.brand-intro-v5 .intro-language:nth-child(5) .language-cube{animation-delay:-4.4s}
.brand-intro-v5 .cube-glass{
  position:absolute;inset:0;border-radius:25px;
  border:1px solid rgba(183,229,255,.42);
  background:
    linear-gradient(145deg,rgba(221,246,255,.25),rgba(73,154,226,.12) 42%,rgba(8,42,83,.30)),
    radial-gradient(circle at 31% 24%,rgba(255,255,255,.42),transparent 22%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 10px 12px 22px rgba(210,245,255,.12),
    inset -14px -15px 22px rgba(0,32,74,.22),
    0 0 0 1px rgba(49,139,221,.08),
    0 0 28px rgba(40,147,238,.12);
  backdrop-filter:blur(8px);
  transform:rotateX(7deg) rotateY(-8deg);
  transition:.35s cubic-bezier(.22,1,.36,1);
}
.brand-intro-v5 .cube-glass::before,.brand-intro-v5 .cube-glass::after{content:"";position:absolute;border-radius:inherit;pointer-events:none}
.brand-intro-v5 .cube-glass::before{inset:6px;border:1px solid rgba(191,232,255,.13)}
.brand-intro-v5 .cube-glass::after{inset:-1px;background:linear-gradient(112deg,transparent 14%,rgba(255,255,255,.22) 35%,transparent 52%);transform:translateX(-112%);transition:transform .8s ease}
.brand-intro-v5 .intro-language:hover .cube-glass::after,.brand-intro-v5 .intro-language:focus-visible .cube-glass::after{transform:translateX(112%)}
.brand-intro-v5 .intro-language:hover .cube-glass,.brand-intro-v5 .intro-language:focus-visible .cube-glass{border-color:rgba(184,235,255,.76);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 10px 12px 24px rgba(210,245,255,.18),inset -14px -15px 22px rgba(0,32,74,.22),0 0 36px rgba(39,157,255,.30);transform:rotateX(2deg) rotateY(2deg) scale(1.035)}
.brand-intro-v5 .cube-ring{position:absolute;width:47px;height:47px;border-radius:50%;border:1px solid rgba(154,220,255,.33);box-shadow:inset 0 0 15px rgba(71,170,255,.13),0 0 16px rgba(79,172,255,.10);animation:introRing 9s linear infinite}
.brand-intro-v5 .cube-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed rgba(173,226,255,.24)}
.brand-intro-v5 .cube-code{position:relative;z-index:3;font-size:18px;font-weight:760;letter-spacing:.08em;color:#f7fbff;text-shadow:0 0 12px rgba(105,207,255,.55)}
.brand-intro-v5 .cube-particle{position:absolute;width:5px;height:5px;border:1px solid rgba(189,232,255,.5);background:rgba(122,205,255,.12);box-shadow:0 0 7px rgba(86,183,255,.30);transform:rotate(20deg)}
.brand-intro-v5 .cube-particle.p1{left:14px;top:21px;animation:introParticleOne 5s ease-in-out infinite}
.brand-intro-v5 .cube-particle.p2{right:15px;top:15px;animation:introParticleTwo 5.7s ease-in-out infinite}
.brand-intro-v5 .cube-particle.p3{right:17px;bottom:13px;animation:introParticleThree 6.2s ease-in-out infinite}
.brand-intro-v5 .language-name{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#879fba;transition:color .25s,letter-spacing .25s}
.brand-intro-v5 .intro-language:hover .language-name,.brand-intro-v5 .intro-language:focus-visible .language-name{color:#d6f1ff;letter-spacing:.19em}
.brand-intro-v5 .intro-copyright{position:absolute;left:20px;right:20px;bottom:17px;text-align:center;font-size:10px;letter-spacing:.08em;color:#5e7894}
@keyframes introBrandIn{from{opacity:0;transform:translateY(-15px)}to{opacity:1;transform:none}}
@keyframes introDockIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes introPulseField{0%,100%{transform:scale(1);opacity:.68}50%{transform:scale(1.05);opacity:1}}
@keyframes introBeam{0%,100%{opacity:.12;transform:rotate(-9deg) scaleX(.92)}50%{opacity:.38;transform:rotate(-7deg) scaleX(1.05)}}
@keyframes introCubeFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -5px;rotate:.5deg}}
@keyframes introRing{to{transform:rotate(360deg)}}
@keyframes introParticleOne{0%,100%{transform:translate(0,0) rotate(20deg)}50%{transform:translate(5px,-4px) rotate(65deg)}}
@keyframes introParticleTwo{0%,100%{transform:translate(0,0) rotate(20deg)}50%{transform:translate(-4px,5px) rotate(-25deg)}}
@keyframes introParticleThree{0%,100%{transform:translate(0,0) rotate(20deg)}50%{transform:translate(-6px,-4px) rotate(82deg)}}
@media(max-width:900px){
  .brand-intro-v5 .intro-content{min-height:calc(100dvh - 56px);padding-top:24px;padding-bottom:66px}
  .brand-intro-v5 .intro-language-dock{gap:18px;flex-wrap:wrap;max-width:620px;margin:auto}
  .brand-intro-v5 .intro-language,.brand-intro-v5 .intro-language:nth-child(n){transform:none;min-width:96px}
  .brand-intro-v5 .intro-language:hover,.brand-intro-v5 .intro-language:focus-visible,.brand-intro-v5 .intro-language:nth-child(n):hover,.brand-intro-v5 .intro-language:nth-child(n):focus-visible{transform:translateY(-5px) scale(1.02)}
  .brand-intro-v5 .language-cube{width:72px;height:72px;border-radius:22px}
  .brand-intro-v5 .cube-glass{border-radius:22px}
}
@media(max-width:560px){
  .brand-intro-v5 .intro-content{width:calc(100% - 22px);grid-template-rows:auto auto 1fr;align-content:center;gap:12px;padding:20px 0 54px}
  .brand-intro-v5 .intro-brand img{width:61px;height:61px}
  .brand-intro-v5 .intro-brand-text strong{font-size:20px}.brand-intro-v5 .intro-brand-text span{font-size:12px}
  .brand-intro-v5 .intro-message-stage{padding:16px 8px 6px}
  .brand-intro-v5 .intro-message{font-size:19px;min-height:4.5em}
  .brand-intro-v5 .intro-instruction{margin-top:11px;font-size:9px}
  .brand-intro-v5 .intro-language-dock{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;width:100%;align-items:end}
  .brand-intro-v5 .intro-language{min-width:0;padding:0;gap:7px}
  .brand-intro-v5 .language-cube{width:54px;height:54px;border-radius:17px}
  .brand-intro-v5 .cube-glass{border-radius:17px}.brand-intro-v5 .cube-ring{width:32px;height:32px}.brand-intro-v5 .cube-code{font-size:13px}
  .brand-intro-v5 .cube-particle{display:none}.brand-intro-v5 .language-name{font-size:8px;letter-spacing:.05em}
  .brand-intro-v5 .intro-copyright{font-size:8px;bottom:10px}
}
@media(prefers-reduced-motion:reduce){
  .brand-intro-v5 *{animation:none!important;transition-duration:.01ms!important}
}

/* v0.5.1 — logo integration, clean language dock, continuous network field */
.brand-intro-v5{
  background:
    radial-gradient(circle at 50% 38%,rgba(16,96,181,.22),transparent 30%),
    linear-gradient(180deg,#020712 0%,#031326 58%,#01060e 100%);
}
.brand-intro-v5 .intro-background{
  isolation:isolate;
  background:#020914;
}
.brand-intro-v5 .intro-network-video{
  position:absolute;
  inset:-9%;
  width:118%;
  height:118%;
  object-fit:cover;
  object-position:50% 51%;
  opacity:.34;
  filter:saturate(1.18) contrast(1.08) brightness(.72);
  mix-blend-mode:screen;
  transform:scale(1.02);
  animation:introNetworkDrift 16s ease-in-out infinite alternate;
  z-index:-4;
}
.brand-intro-v5 .intro-network-veil{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(3,15,35,.08) 0%,rgba(3,14,33,.30) 42%,rgba(1,6,14,.72) 100%),
    linear-gradient(180deg,rgba(1,6,15,.26),rgba(2,11,24,.10) 45%,rgba(1,6,14,.58));
}
.brand-intro-v5 .intro-background::before{
  z-index:-2;
  opacity:.5;
}
.brand-intro-v5 .intro-beam{
  z-index:-1;
  opacity:.12;
}
.brand-intro-v5 .intro-grid-plane{
  z-index:-1;
  opacity:.15;
}
.brand-intro-v5 .intro-brand{
  position:relative;
}
.brand-intro-v5 .intro-brand::before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  top:-24px;
  left:50%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(70,171,255,.18),transparent 68%);
  filter:blur(9px);
  pointer-events:none;
}
.brand-intro-v5 .intro-brand img{
  position:relative;
  width:84px;
  height:84px;
  object-fit:contain;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  filter:drop-shadow(0 0 14px rgba(68,171,255,.36)) drop-shadow(0 10px 24px rgba(0,0,0,.25));
}
.brand-intro-v5 .intro-brand-rule{
  background:linear-gradient(90deg,transparent,rgba(92,189,255,.58),transparent);
  opacity:.62;
}
.brand-intro-v5 .intro-language-dock{
  position:relative;
}
.brand-intro-v5 .intro-language-dock::before,
.brand-intro-v5 .intro-language-dock::after{
  display:none!important;
  content:none!important;
}
@keyframes introNetworkDrift{
  0%{transform:scale(1.02) translate3d(-.7%,0,0)}
  50%{transform:scale(1.055) translate3d(.6%,-.5%,0)}
  100%{transform:scale(1.025) translate3d(.2%,.5%,0)}
}
@media(max-width:900px){
  .brand-intro-v5 .intro-network-video{inset:-5%;width:110%;height:110%;object-position:50% 50%;opacity:.30}
}
@media(prefers-reduced-motion:reduce){
  .brand-intro-v5 .intro-network-video{animation:none!important}
}


/* v0.5.2 — sharper high-tech background animation */
.brand-intro-v5{
  background:
    radial-gradient(circle at 50% 38%,rgba(20,109,205,.16),transparent 26%),
    linear-gradient(180deg,#020610 0%,#041224 54%,#01050d 100%);
}
.brand-intro-v5 .intro-background{
  background:
    radial-gradient(circle at 50% 52%,rgba(15,62,120,.22),transparent 48%),
    #020813;
}
.brand-intro-v5 .intro-network-video{
  inset:-3%;
  width:106%;
  height:106%;
  object-fit:cover;
  object-position:50% 50%;
  opacity:.58;
  filter:saturate(1.36) contrast(1.30) brightness(.90);
  mix-blend-mode:screen;
  transform:scale(1);
  animation:introNetworkDriftSharp 18s ease-in-out infinite alternate;
}
.brand-intro-v5 .intro-network-veil{
  background:
    radial-gradient(ellipse at 50% 44%,rgba(2,10,23,.04) 0%,rgba(2,10,24,.18) 42%,rgba(1,6,14,.54) 100%),
    linear-gradient(180deg,rgba(1,5,14,.18),rgba(2,11,24,.06) 45%,rgba(1,6,14,.42));
}
.brand-intro-v5 .intro-background::before{
  opacity:.72;
  background:
    radial-gradient(circle at 50% 46%,transparent 0 20%,rgba(73,180,255,.10) 20.25% 20.6%,transparent 21%),
    radial-gradient(circle at 50% 46%,transparent 0 29%,rgba(103,206,255,.07) 29.3% 29.7%,transparent 30%),
    radial-gradient(circle at 50% 46%,transparent 0 38%,rgba(75,177,255,.05) 38.3% 38.6%,transparent 39%);
}
.brand-intro-v5 .intro-background::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,transparent 0 18%,rgba(109,210,255,.06) 26%,transparent 34%),
    linear-gradient(70deg,transparent 0 56%,rgba(101,200,255,.045) 63%,transparent 70%),
    radial-gradient(circle at 50% 52%,rgba(125,220,255,.08),transparent 45%);
  mix-blend-mode:screen;
  opacity:.9;
  animation:introFieldScan 14s linear infinite;
  z-index:-1;
}
.brand-intro-v5 .intro-beam{opacity:.20;filter:blur(.15px)}
.brand-intro-v5 .intro-grid-plane{opacity:.24;background-size:66px 36px}
.brand-intro-v5 .intro-brand::before{background:radial-gradient(circle,rgba(70,171,255,.15),transparent 70%)}
.brand-intro-v5 .intro-message{text-shadow:0 0 24px rgba(26,114,201,.18),0 0 2px rgba(255,255,255,.18)}
@keyframes introNetworkDriftSharp{
  0%{transform:scale(1) translate3d(0,0,0)}
  50%{transform:scale(1.025) translate3d(0,-0.8%,0)}
  100%{transform:scale(1.01) translate3d(0,0.7%,0)}
}
@keyframes introFieldScan{
  0%{transform:translate3d(-1.5%,0,0);opacity:.82}
  50%{transform:translate3d(1.5%,0,0);opacity:1}
  100%{transform:translate3d(-1.5%,0,0);opacity:.82}
}
@media(max-width:900px){
  .brand-intro-v5 .intro-network-video{opacity:.52;inset:-4%;width:108%;height:108%}
  .brand-intro-v5 .intro-grid-plane{opacity:.19}
}
@media(max-width:560px){
  .brand-intro-v5 .intro-network-video{opacity:.48;filter:saturate(1.28) contrast(1.24) brightness(.92)}
}