@import url('directions-exact.css?v=1');

/* Interactive glow treatment.
   The hero's left bloom deliberately remains a single rendered layer:
   cursor proximity adjusts only its brightness, never its shape or blur. */

.kyu-glow-reactive{
  --kyu-glow-energy:0;
  isolation:isolate;
}

/* Other section glows retain their existing soft hover treatment. */
.kyu-glow-reactive::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background-color:inherit;
  background-image:inherit;
  background-position:inherit;
  background-size:inherit;
  background-repeat:inherit;
  opacity:calc(var(--kyu-glow-energy) * .20);
  filter:blur(calc(18px + var(--kyu-glow-energy) * 18px)) saturate(calc(1 + var(--kyu-glow-energy) * .08));
  transition:opacity .30s ease,filter .30s ease;
  transform:translateZ(0);
}

[data-theme="dark"] .kyu-glow-reactive::after{
  mix-blend-mode:screen;
  opacity:calc(var(--kyu-glow-energy) * .24);
}

/* Technology section / branded glow — exact Figma geometry (node 3755:12551).
   The source is a 480px circle within a 748.8px blur frame at the left edge. */
.tech{
  overflow:hidden;
}

.tech .tech__glow{
  position:absolute;
  width:748.8px;
  height:748.8px;
  left:-354.4px;
  top:-14.4px;
  overflow:hidden;
  pointer-events:none;
}

.tech .tech__glow::before{
  content:"";
  position:absolute;
  width:480px;
  height:480px;
  left:134.4px;
  top:134.4px;
  border-radius:50%;
  background:linear-gradient(90deg,#BD79FA 0%,#FC61C0 52%,#027DFD 100%);
  filter:blur(67.2px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .16));
  opacity:.09;
  transition:filter .30s ease;
}

.tech .tech__glow.kyu-glow-reactive::after{
  content:none!important;
}

@media(max-width:600px){
  .tech .tech__glow{
    width:468px;
    height:468px;
    left:-222px;
    top:-9px;
  }

  .tech .tech__glow::before{
    width:300px;
    height:300px;
    left:84px;
    top:84px;
    filter:blur(42px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .16));
  }
}

/* Timing section / market haze — exact Figma geometry (node 3755:12610).
   The 972×324 ellipse is positioned inside its 1248×600 blur frame. */
.timing .timing__haze{
  width:1248px!important;
  height:600px!important;
  left:calc(50% - 624px)!important;
  top:-48px!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:none!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}

.timing .timing__haze::before{
  content:"";
  position:absolute;
  width:972px;
  height:324px;
  left:138px;
  top:138px;
  border-radius:50%;
  pointer-events:none;
  background:linear-gradient(90deg,#027DFD 0%,#BD79FA 52%,#FC61C0 100%);
  filter:blur(69px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .16));
  opacity:.12;
  transition:filter .30s ease;
}

.timing .timing__haze.kyu-glow-reactive::after{
  content:none!important;
}

@media(max-width:600px){
  .timing .timing__haze{
    width:624px!important;
    height:300px!important;
    left:calc(50% - 312px)!important;
    top:-24px!important;
  }

  .timing .timing__haze::before{
    width:486px;
    height:162px;
    left:69px;
    top:69px;
    filter:blur(34.5px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .16));
  }
}

/* Application section / branded haze — exact Figma geometry (nodes 3755:12662, 3755:12663).
   Each source ellipse is 520×560 inside its 811.2×851.2 blur frame. */
.contact .contact__glow{
  width:811.2px!important;
  height:851.2px!important;
  top:324.4px!important;
  bottom:auto!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:none!important;
  filter:none!important;
  opacity:1!important;
  animation:none!important;
  transform:none!important;
}

.contact .contact__glow--blue{
  left:-285.6px!important;
  right:auto!important;
}

.contact .contact__glow--pink{
  right:-265.6px!important;
  left:auto!important;
}

.contact .contact__glow::before{
  content:"";
  position:absolute;
  width:520px;
  height:560px;
  left:145.6px;
  top:145.6px;
  border-radius:50%;
  pointer-events:none;
  filter:blur(72.8px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .18));
  opacity:.22;
  transition:filter .30s ease;
}

.contact .contact__glow--pink::before{
  background:linear-gradient(90deg,#BD79FA 0%,#FC61C0 52%,#027DFD 100%);
}

.contact .contact__glow--blue::before{
  background:linear-gradient(163.1deg,#027DFD 0%,#BD79FA 52%,#FC61C0 100%);
}

/* Hover brightens the original field; it never inserts a second haze. */
.contact .contact__glow.kyu-glow-reactive::after{
  content:none!important;
}

@media(max-width:600px){
  .contact .contact__glow{
    width:468px!important;
    height:491px!important;
    top:410px!important;
  }

  .contact .contact__glow--blue{left:-168px!important}
  .contact .contact__glow--pink{right:-168px!important}

  .contact .contact__glow::before{
    width:300px;
    height:323px;
    left:84px;
    top:84px;
    filter:blur(42px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .18));
  }
}

/* Start screen / left glow.
   Native single-layer rendering of Figma node 3755:12460.
   The ellipse (560×880 at −290/160) and its colour vector match the mockup.
   CSS blur is used instead of an SVG filter so browser zoom cannot create tile seams. */
.hero{
  overflow:visible;
}

.hero .orb--blue{
  width:560px!important;
  height:880px!important;
  left:-290px!important;
  top:160px!important;
  border-radius:50%!important;
  background:linear-gradient(156.1deg,#027DFD 0%,#BD79FA 52%,#FC61C0 100%)!important;
  box-shadow:none!important;
  filter:blur(78.4px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .24))!important;
  opacity:.26!important;
  animation:none!important;
  transition:filter .30s ease;
  transform:translateZ(0);
}

/* The pointer brightens this one source only — no secondary bloom or waves. */
.hero .orb--blue.kyu-glow-reactive::after{
  content:none!important;
}

@media(max-width:600px){
  .hero .orb--blue{
    width:300px!important;
    height:460px!important;
    left:-220px!important;
    top:115px!important;
    filter:blur(43px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .24))!important;
  }
}

/* Start screen / right glow — exact Figma frame for node 3755:12459.
   Figma places a 540×880 ellipse inside an expanded 842.4×1182.4 blur frame.
   Keeping that frame is what preserves the intended silhouette. */
.hero .orb--pink{
  width:842.4px!important;
  height:1182.4px!important;
  right:-381.2px!important;
  top:8.8px!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  animation:none!important;
  transform:none!important;
}

.hero .orb--pink::before{
  content:"";
  position:absolute;
  width:540px;
  height:880px;
  left:151.2px;
  top:151.2px;
  border-radius:50%;
  pointer-events:none;
  background:linear-gradient(90deg,#BD79FA 0%,#FC61C0 52%,#027DFD 100%);
  filter:blur(75.6px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .24));
  opacity:.24;
  transition:filter .30s ease;
}

/* Cursor proximity adjusts this source only; no duplicate glow is added. */
.hero .orb--pink.kyu-glow-reactive::after{
  content:none!important;
}

@media(max-width:600px){
  .hero .orb--pink{
    width:468px!important;
    height:657px!important;
    right:-304px!important;
    top:31px!important;
  }

  .hero .orb--pink::before{
    width:300px;
    height:489px;
    left:84px;
    top:84px;
    filter:blur(42px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .24));
  }
}

.hero .orb,
.directions .orb,
.timing__haze,
.contact__glow{
  overflow:visible;
}

.contact__glow.kyu-glow-reactive::after,
.timing__haze.kyu-glow-reactive::after{
  background-origin:inherit;
  background-clip:inherit;
}

@media(max-width:700px){
  .kyu-glow-reactive::after{
    opacity:calc(var(--kyu-glow-energy) * .14);
    filter:blur(calc(14px + var(--kyu-glow-energy) * 14px)) saturate(calc(1 + var(--kyu-glow-energy) * .06));
  }

  [data-theme="dark"] .kyu-glow-reactive::after{
    opacity:calc(var(--kyu-glow-energy) * .17);
  }
}

@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .kyu-glow-reactive::after{display:none}
}


/* Directions section / branded glows — exact Figma geometry
   (nodes 3755:12545 and 3755:12546). Each 440×430 ellipse
   lives inside its full 686.4×676.4 blur frame. */
.directions .orb--left,
.directions .orb--right{
  width:686.4px!important;
  height:676.4px!important;
  top:146.8px!important;
  overflow:hidden!important;
  border-radius:0!important;
  background:none!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  pointer-events:none;
}

.directions .orb--left{left:-303.2px!important;right:auto!important}
.directions .orb--right{left:auto!important;right:-223.2px!important}

.directions .orb--left::before,
.directions .orb--right::before{
  content:"";
  position:absolute;
  width:440px;
  height:430px;
  left:123.2px;
  top:123.2px;
  border-radius:50%;
  transition:filter .30s ease;
}

.directions .orb--left::before{
  background:linear-gradient(105.4deg,#027DFD 0%,#BD79FA 52%,#FC61C0 100%);
  filter:blur(61.6px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .16));
  opacity:.26;
}

.directions .orb--right::before{
  background:linear-gradient(90deg,#BD79FA 0%,#FC61C0 52%,#027DFD 100%);
  filter:blur(61.6px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .16));
  opacity:.24;
}

.directions .orb--left.kyu-glow-reactive::after,
.directions .orb--right.kyu-glow-reactive::after{
  content:none!important;
}

@media(max-width:600px){
  .directions .orb--left,
  .directions .orb--right{
    width:429px!important;
    height:422.75px!important;
    top:91.75px!important;
  }

  .directions .orb--left{left:-189.5px!important}
  .directions .orb--right{right:-139.5px!important}

  .directions .orb--left::before,
  .directions .orb--right::before{
    width:275px;
    height:268.75px;
    left:77px;
    top:77px;
    filter:blur(38.5px) brightness(calc(1 + var(--kyu-glow-energy, 0) * .16));
  }
}


/* Light theme — Figma light-mode glow tokens from frame 3328:11150.
   Geometry stays identical; only the lighter fills and calibrated opacity change. */
[data-theme="light"] .hero .orb--blue{
  opacity:.16!important;
}

[data-theme="light"] .hero .orb--pink::before{
  background:linear-gradient(90deg,#BD79FA 0%,#FC61C0 52%,#FCFDFE 100%);
  opacity:.145;
}

[data-theme="light"] .directions .orb--left::before{
  opacity:.16;
}

[data-theme="light"] .directions .orb--right::before{
  background:linear-gradient(90deg,#BD79FA 0%,#FC61C0 52%,#FCFDFE 100%);
  opacity:.145;
}

[data-theme="light"] .tech .tech__glow::before{
  background:linear-gradient(90deg,#BD79FA 0%,#FC61C0 52%,#FCFDFE 100%);
  opacity:.04;
}

/* Light contact haze — exact Figma sources 3406:11042 / 3406:11043.
   The same pointer energy only brightens these original fields. */
[data-theme="light"] .contact .contact__glow{
  display:block!important;
}

[data-theme="light"] .contact .contact__glow::before{
  opacity:.32;
}

[data-theme="light"] .contact .contact__glow--pink::before{
  background:linear-gradient(90deg,#BD79FA 0%,#FC61C0 52%,#FCFDFE 100%);
}