/* =========================
   SSB HERO BASE
   ใช้ร่วมกันทั้ง desktop / mobile
   ========================= */

.tech-hero{
  --hero-radius: 34px;
  --hero-border: rgba(124, 206, 255, .14);
  --hero-grid: rgba(130, 200, 255, .06);
  --hero-blue-1: #091a44;
  --hero-blue-2: #07132f;
  --hero-cyan: #bfefff;
  --hero-cyan-2: #86d9ff;
  --hero-glow: rgba(90, 180, 255, .18);

  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:var(--hero-radius);
  isolation:isolate;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 50% 48%, rgba(58,138,255,.18) 0%, rgba(20,72,186,.10) 18%, rgba(7,25,72,.94) 44%, rgba(3,12,34,1) 80%, rgba(2,8,24,1) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(122,216,255,.07),
    inset 0 0 70px rgba(58,151,255,.05),
    0 26px 60px rgba(0,0,0,.24);
}

.tech-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size:48px 48px;
  opacity:.45;
}

.tech-hero::after{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:26px;
  border:1px solid rgba(126,204,255,.08);
  pointer-events:none;
  z-index:0;
}

body.light-mode .tech-hero{
  background:linear-gradient(180deg, #f8fbff 0%, #edf4ff 100%);
  box-shadow:0 20px 54px rgba(31,74,140,.10);
}

body.light-mode .tech-hero::before{
  opacity:.20;
  background:
    linear-gradient(rgba(70,110,180,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,110,180,.05) 1px, transparent 1px);
  background-size:48px 48px;
}

body.light-mode .tech-hero::after{
  border-color:rgba(20,55,100,.08);
}

.hero-stars,
.bg-ring,
.ring-1,
.ring-2,
.ring-3,
.ring-tilt-1,
.ring-tilt-2{
  display:none !important;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.bg-core-glow{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(62vw, 620px);
  height:min(62vw, 620px);
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(201,238,255,.18) 0%, rgba(110,194,255,.11) 18%, rgba(46,140,255,.06) 32%, transparent 66%);
  filter:blur(18px);
}

body.light-mode .bg-core-glow{
  background:
    radial-gradient(circle, rgba(79,124,255,.10) 0%, rgba(111,155,255,.06) 24%, transparent 68%);
}

.hero-system-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  z-index:10;
  pointer-events:none;
}

.hero-system-title-inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(116,214,255,.18);
  background:
    linear-gradient(180deg, rgba(12,38,96,.28), rgba(7,20,53,.14)),
    linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  box-shadow:0 0 20px rgba(69,170,255,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

body.light-mode .hero-system-title-inner{
  background:#ffffff;
  border-color:rgba(20,55,100,.08);
  box-shadow:0 14px 30px rgba(31,74,140,.10);
}

.hero-system-title-text{
  font-family:'Orbitron',sans-serif;
  font-weight:900;
  text-transform:uppercase;
  color:#eaf9ff;
  white-space:nowrap;
  text-shadow:0 0 10px rgba(141,222,255,.40);
}

body.light-mode .hero-system-title-text{
  color:#21497e;
  text-shadow:none;
}

.center-glow{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:3;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle, rgba(228,248,255,.72) 0%, rgba(169,228,255,.18) 34%, rgba(90,188,255,.04) 56%, transparent 72%);
  filter:blur(12px);
}

body.light-mode .center-glow{
  background:radial-gradient(circle, rgba(111,155,255,.14) 0%, rgba(111,155,255,.06) 44%, transparent 74%);
}

.center-pulse{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.92);
  border:1px solid rgba(138,223,255,.14);
  opacity:0;
  pointer-events:none;
  z-index:3;
}

body.light-mode .center-pulse{
  border-color:rgba(79,124,255,.14);
}

.center-pulse.active{
  animation:pulseOut .72s ease-out;
}

.logo-core{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:12;
  border:none;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}

.logo-core::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(128,214,255,.12), transparent 70%);
  filter:blur(8px);
  z-index:-1;
}

.logo-core img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:
    drop-shadow(0 0 12px rgba(120,212,255,.18))
    drop-shadow(0 16px 24px rgba(0,0,0,.20));
}

body.light-mode .logo-core img{
  filter:drop-shadow(0 12px 24px rgba(31,74,140,.14));
}

.hero-energy-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:7;
  pointer-events:none !important;
  overflow:visible;
}

.orbit-ring{
  fill:none;
  stroke:rgba(165,225,255,.20);
  stroke-width:1.6;
  filter:drop-shadow(0 0 6px rgba(120,190,255,.16));
}

.orbit-runner{
  fill:#d2f5ff;
  filter:drop-shadow(0 0 10px rgba(170,235,255,.95));
  transform-origin:600px 450px;
  animation:orbitSpin 5s linear infinite;
}

.energy-line{
  fill:none;
  stroke:rgba(120,205,255,.94);
  stroke-width:3.1;
  stroke-linecap:round;
  filter:drop-shadow(0 0 10px rgba(110,190,255,.44));
  stroke-dasharray:16 220;
  stroke-dashoffset:0;
  opacity:0;
}

.tech-hero.flow-m1 .energy-m1,
.tech-hero.flow-company .energy-company,
.tech-hero.flow-product .energy-product,
.tech-hero.flow-agent .energy-agent{
  animation:energyPulse .85s ease-out 1;
}

@keyframes orbitSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@keyframes pulseOut{
  0%{
    transform:translate(-50%,-50%) scale(.88);
    opacity:.88;
  }
  100%{
    transform:translate(-50%,-50%) scale(1.08);
    opacity:0;
  }
}

@keyframes energyPulse{
  0%{
    opacity:0;
    stroke-dashoffset:220;
  }
  15%{
    opacity:1;
  }
  100%{
    opacity:0;
    stroke-dashoffset:0;
  }
}