:root{
  --bg:#070A12;

  /* More white overall */
  --core: rgba(255,255,255,.95);
  --coreHot: rgba(255,255,255,.78);
  --glow: rgba(255,255,255,.45);

  --size: 140px;
  --burst: 60px;

  /* Bolt emission offset from center logo edge */
  --emit-x: 200px; /* push origin left/right from logo center */
  --emit-y: 0px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(900px 520px at 50% 50%, rgba(160,190,255,.08), transparent 60%),
    radial-gradient(800px 450px at 50% 60%, rgba(255,255,255,.08), transparent 55%),
    var(--bg);
  overflow-x:hidden;
  overflow-y:auto;
  font-family: "Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.stage{
  position:relative;
  width:100%;
  max-width:900px;
  margin:0 auto;
  height:100vh;
  display:grid;
  place-items:center;

  /* 3D context */
  perspective: 900px;
  filter: drop-shadow(0 0 18px var(--glow));
}

/* Center logo: 3D rotate around Y */
.logo{
  position:relative;
  width:var(--size);
  height:var(--size);
  display:grid;
  place-items:center;

  transform-style: preserve-3d;
  animation: logoY 2.2s linear infinite;
}

.logo svg{ width:100%; height:100%; overflow:visible; }
/* 3D bolt layers */
.bolt-shadow{
  fill: rgba(0,0,0,.4);
  filter: blur(3px);
}
.bolt-back{
  fill: url(#boltGradientBack);
}
.bolt-fill{
  fill: url(#boltGradient);
  filter: drop-shadow(0 0 14px rgba(255,255,255,.35));
}
.bolt-highlight{
  fill: none;
  stroke: url(#boltHighlight);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bolt-stroke{
  fill:none;
  stroke: rgba(255,255,255,.7);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.logo::after{
  content:"";
  position:absolute;
  inset:-18px;
  background: radial-gradient(circle at 45% 40%, rgba(255,255,255,.28), transparent 45%);
  mix-blend-mode: screen;
  opacity:0;
  animation: flash 1.1s ease-in-out infinite;
  pointer-events:none;
}

/* Side bolt groups */
.side{
  position:absolute;
  top:50%;
  width:50%;
  height:180px;
  transform: translateY(-50%);
  pointer-events:none;
}
.side.left{ left:0; }
.side.right{ right:0; }

/* A realistic bolt line shot (SVG path) */
.boltline{
  position:absolute;
  top:50%;
  width:520px;
  height:180px;
  opacity:0;
  transform: translateY(-50%);
  filter: drop-shadow(0 0 12px rgba(255,255,255,.35));
}

.boltline path{
  fill:none;
  stroke: var(--core);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Draw-on */
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: draw .55s ease-out infinite;
}

.boltline .hot{
  stroke: var(--coreHot);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.22));
}

/* Emit from near the logo edge, with an offset (not exactly from center) */
.left .boltline{
  left: calc(50% + var(--emit-x));
  top: calc(50% + var(--emit-y));
  transform: translate(-100%, -50%); /* anchor at its right edge near logo */
  animation: boltLeft .55s linear infinite;
}

.right .boltline{
  right: calc(50% + var(--emit-x));
  top: calc(50% + var(--emit-y));
  transform: translate(100%, -50%);  /* anchor at its left edge near logo */
  animation: boltRight .55s linear infinite;
}

/* Stagger bursts (faster cadence) */
.boltline:nth-child(1){ animation-delay: 0s; }
.boltline:nth-child(1) path{ animation-delay: 0s; }

.boltline:nth-child(2){ animation-delay: .12s; }
.boltline:nth-child(2) path{ animation-delay: .12s; }

.boltline:nth-child(3){ animation-delay: .24s; }
.boltline:nth-child(3) path{ animation-delay: .24s; }

.boltline:nth-child(4){ animation-delay: .36s; }
.boltline:nth-child(4) path{ animation-delay: .36s; }

/* Angle variance */
.left .boltline:nth-child(2){ transform: translate(-100%, -50%) rotate(-8deg) scale(.94); }
.left .boltline:nth-child(3){ transform: translate(-100%, -50%) rotate(12deg) scale(.90); }
.left .boltline:nth-child(4){ transform: translate(-100%, -50%) rotate(-15deg) scale(.84); }

.right .boltline:nth-child(2){ transform: translate(100%, -50%) rotate(8deg) scale(.94); }
.right .boltline:nth-child(3){ transform: translate(100%, -50%) rotate(-12deg) scale(.90); }
.right .boltline:nth-child(4){ transform: translate(100%, -50%) rotate(15deg) scale(.84); }

@keyframes logoY{
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes flash{
  0%, 65%{ opacity:0; }
  68%{ opacity:.95; }
  71%{ opacity:.12; }
  74%{ opacity:.75; }
  100%{ opacity:0; }
}

/* Stroke-dashoffset draw animation */
@keyframes draw{
  0%   { stroke-dashoffset: 620; opacity: 0; }
  8%   { opacity: 1; }
  75%  { stroke-dashoffset: 0; opacity: .95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Faster travel */
@keyframes boltLeft{
  0%   { opacity:0; }
  8%   { opacity:1; }
  100% { opacity:0; transform: translate(-100%, -50%) translateX(calc(-1 * var(--burst))) scale(.62); }
}
@keyframes boltRight{
  0%   { opacity:0; }
  8%   { opacity:1; }
  100% { opacity:0; transform: translate(100%, -50%) translateX(var(--burst)) scale(.62); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; }
  .boltline{ opacity:1; }
  .boltline path{ stroke-dasharray:none; stroke-dashoffset:0; }
}

.tagline{
font-weight: 600;
position:absolute;
top: calc(50% + (var(--size) / 2) + 22px);
left: 50%;
transform: translateX(-50%);
width: min(820px, 92vw);
text-align:center;

color: rgba(255,255,255,.92);
font-weight: 650;
letter-spacing: .02em;
font-size: clamp(16px, 2.4vw, 26px);

/* Glow stack */
text-shadow:
  0 0 3px rgba(255,255,255,.40),
  0 0 8px rgba(255,255,255,.30),
  0 0 16px rgba(180,210,255,.22);

animation: taglineGlow 5.5s ease-in-out infinite;
}

/* Pulse + slight flicker by varying opacity and text-shadow */
@keyframes taglineGlow{
0%{
  opacity: .72;
  text-shadow:
    0 0 2px rgba(255,255,255,.20),
    0 0 6px rgba(255,255,255,.18),
    0 0 12px rgba(180,210,255,.12);
}
55%{
  opacity: .98;
  text-shadow:
    0 0 4px rgba(255,255,255,.55),
    0 0 10px rgba(255,255,255,.42),
    0 0 20px rgba(180,210,255,.30);
}
62%{ opacity: .55; } /* quick dip = "electric" */
100%{
  opacity: .90;
  text-shadow:
    0 0 3px rgba(255,255,255,.45),
    0 0 8px rgba(255,255,255,.32),
    0 0 16px rgba(180,210,255,.22);
}
}

@media (prefers-reduced-motion: reduce){
.tagline{ animation:none; }
}

/* Features Section */
.features{
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.feature-card{
  background: rgba(10, 15, 25, 0.6);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 40px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover{
  transform: scale(1.02);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 0 20px rgba(255,255,255,0.1);
}

.feature-icon{
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  color: rgba(255,255,255,0.9);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
}

.icon-bolt{
  fill: currentColor;
}

.feature-card h3{
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  text-shadow:
    0 0 3px rgba(255,255,255,0.3),
    0 0 8px rgba(255,255,255,0.2);
}

.feature-card p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}

/* Release Banner */
.release{
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 40px;
  text-align: center;
  position: relative;
}

.release::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 50% 50%, rgba(160,190,255,.06), transparent 70%);
  pointer-events: none;
}

.release-content{
  position: relative;
  z-index: 1;
}

.release-label{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  margin-bottom: 16px;
  text-shadow: 0 0 8px rgba(255,255,255,0.2);
}

.release-title{
  margin: 0 0 20px 0;
  font-size: 48px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  text-shadow:
    0 0 3px rgba(255,255,255,.40),
    0 0 8px rgba(255,255,255,.30),
    0 0 16px rgba(180,210,255,.22);
  animation: releasePulse 3s ease-in-out infinite;
}

.release-text{
  margin: 0;
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

@keyframes releasePulse{
  0%, 100%{
    opacity: 0.85;
    text-shadow:
      0 0 3px rgba(255,255,255,.35),
      0 0 8px rgba(255,255,255,.25),
      0 0 16px rgba(180,210,255,.18);
  }
  50%{
    opacity: 1;
    text-shadow:
      0 0 4px rgba(255,255,255,.50),
      0 0 10px rgba(255,255,255,.38),
      0 0 20px rgba(180,210,255,.28);
  }
}

@media (prefers-reduced-motion: reduce){
  .release-title{ animation:none; }
}

/* Contact Section */
.contact{
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 40px;
  text-align: center;
}

.contact h2{
  margin: 0 0 20px 0;
  font-size: 36px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  text-shadow:
    0 0 2px rgba(255,255,255,0.3),
    0 0 6px rgba(255,255,255,0.2);
}

.contact p{
  margin: 0;
  font-size: 20px;
  color: rgba(255,255,255,0.85);
}

.contact a{
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: all 0.2s ease;
}

.contact a:hover,
.contact a:focus{
  color: rgba(255,255,255,1);
  text-shadow:
    0 0 3px rgba(255,255,255,0.4),
    0 0 8px rgba(255,255,255,0.3);
  outline: none;
}

/* Footer */
.footer{
  width: 100%;
  padding: 30px 20px;
  text-align: center;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 40px;
}

.footer p{
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}

/* Mobile Responsiveness */
@media (max-width: 768px){
  /* Adjust hero animation */
  :root{
    --size: 100px;
    --burst: 30px;
    --emit-x: 100px;
  }

  .boltline{
    width: 312px; /* 60% of 520px */
  }

  .tagline{
    font-size: clamp(18px, 4vw, 26px);
  }

  /* Features section stacks vertically */
  .features{
    grid-template-columns: 1fr;
    padding: 60px 20px;
    gap: 20px;
  }

  .feature-card{
    padding: 30px;
  }

  /* Release banner */
  .release{
    padding: 60px 20px;
  }

  .release-title{
    font-size: 32px;
  }

  .release-text{
    font-size: 16px;
  }

  /* Contact section */
  .contact{
    padding: 60px 20px;
  }

  .contact h2{
    font-size: 28px;
  }

  .contact p{
    font-size: 18px;
  }
}