@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

:root {
  --bg-deep: #000205;
  --text-strong: #ffffff;
  --text-muted: rgba(238, 246, 255, 0.9);

  --orb-size: clamp(calc(360px * 1.1), calc(34vw * 1.1), calc(560px * 1.1));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  font-family: "Montserrat", Arial, sans-serif;
  color: var(--text-strong);
  background: var(--bg-deep);
  overflow: hidden;
}

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100svh;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 200% 140% at 14% 78%, rgba(62, 14, 118, 0.46), transparent 58%),
    radial-gradient(ellipse 170% 110% at 92% 22%, rgba(10, 62, 158, 0.42), transparent 54%),
    radial-gradient(ellipse 95% 72% at 48% 52%, rgba(40, 22, 92, 0.09), transparent 62%),
    radial-gradient(ellipse 130% 92% at 50% 38%, rgba(6, 14, 56, 0.26), transparent 58%),
    radial-gradient(ellipse 108% 96% at 50% 48%, rgba(18, 52, 132, 0.16), transparent 62%),
    radial-gradient(ellipse 125% 100% at 16% 46%, rgba(0, 238, 255, 0.1), transparent 52%),
    radial-gradient(ellipse 125% 100% at 84% 50%, rgba(188, 52, 248, 0.13), transparent 52%),
    radial-gradient(ellipse 95% 75% at 50% 115%, rgba(34, 14, 82, 0.42), transparent 58%),
    radial-gradient(circle at 50% 48%, rgba(2, 4, 14, 0.58) 0%, rgba(3, 6, 16, 0.26) 26%, transparent 48%);
}

.hero-milky-way {
  position: absolute;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.64;
  mix-blend-mode: normal;
  background-image:
    repeating-linear-gradient(
      121deg,
      rgba(255, 255, 255, 0.024) 0 1px,
      transparent 1px 6px
    ),
    repeating-linear-gradient(
      58deg,
      transparent 0 11px,
      rgba(170, 216, 255, 0.04) 11px 12px,
      transparent 12px 28px
    ),
    linear-gradient(
      119deg,
      rgba(4, 8, 22, 0) 0%,
      rgba(26, 54, 148, 0.095) 39%,
      rgba(88, 36, 132, 0.14) 49.5%,
      rgba(22, 62, 156, 0.092) 60%,
      rgba(4, 6, 18, 0) 100%
    );
  filter: blur(1.35px);
  /* Continuous dust toward center — no large circular cut-out */
  -webkit-mask-image: radial-gradient(
    ellipse 96% 90% at 50% 50%,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.78) 30%,
    rgba(0, 0, 0, 0.94) 54%,
    rgb(0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    ellipse 96% 90% at 50% 50%,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.78) 30%,
    rgba(0, 0, 0, 0.94) 54%,
    rgb(0, 0, 0) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .hero-milky-way {
    opacity: 0.54;
    filter: blur(1px);
  }
}

.hero-wave-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.wave-tail {
  transform-origin: 960px 540px;
}

.wave-tail--left {
  animation: waveTailDriftLeft 72s ease-in-out infinite alternate;
  will-change: transform;
}

.wave-tail--right {
  animation: waveTailDriftRight 76s ease-in-out infinite alternate;
  will-change: transform;
}

.wave-path-static,
.wave-path-morph,
.wave-path-morph-glow {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0;
}

.wave-path-static {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* JS morphed ribbons */
.wave-path-morph {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wave-path-morph-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ribbon-stack {
  pointer-events: none;
}

/* Safety: no decorative circles inside ribbon stacks */
.ribbon-stack circle {
  display: none;
}

/* #svgStars: layer 1 = full canvas cosmic field, layer 2 = tendril-local dust (painted above) */
.starfield-layer {
  pointer-events: none;
}

.star-dot {
  pointer-events: none;
  animation: starTwinkle var(--star-twinkle-dur, 56s) ease-in-out infinite;
  animation-delay: var(--star-twinkle-delay, 0s);
}

.star-dot--dust {
  animation-name: starTwinkleDust;
  animation-duration: calc(var(--star-twinkle-dur, 76s) * 1.06);
  animation-timing-function: ease-in-out;
  filter:
    drop-shadow(0 0 2px rgba(48, 252, 255, 0.32))
    drop-shadow(0 0 3px rgba(186, 85, 245, 0.22));
}

.star-dot--cluster {
  animation-duration: calc(var(--star-twinkle-dur, 56s) * 0.88);
}

.star-dot--deep {
  animation-name: starTwinkleDeep;
  animation-duration: calc(var(--star-twinkle-dur, 56s) * 1.06);
}

.star-dot--bright {
  animation-name: starTwinkleBright;
  animation-duration: calc(var(--star-twinkle-dur, 56s) * 1.03);
}

@media (prefers-reduced-motion: reduce) {
  .star-dot,
  .star-dot--dust,
  .star-dot--deep,
  .star-dot--bright,
  .star-dot--cluster {
    animation: none;
  }
}

@keyframes starTwinkle {
  0%,
  100% {
    opacity: 0.78;
  }
  50% {
    opacity: 1;
  }
}

@keyframes starTwinkleDeep {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 0.98;
  }
}

@keyframes starTwinkleBright {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 1;
  }
}

@keyframes starTwinkleDust {
  0%,
  100% {
    opacity: 0.58;
  }
  50% {
    opacity: 0.96;
  }
}

.bg-noise,
.bg-vignette,
.word-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-noise {
  z-index: 1;
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px);
  animation: noiseShift 36s steps(8) infinite;
}

.bg-vignette {
  z-index: 5;
  background: radial-gradient(
    circle at center,
    transparent 14%,
    rgba(0, 0, 0, 0.34) 48%,
    rgba(0, 0, 0, 0.78) 84%,
    rgba(0, 0, 0, 0.94) 100%
  );
}

.word-layer {
  z-index: 3;
  overflow: hidden;
}

.word-token {
  position: absolute;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.06em;
  unicode-bidi: isolate;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.82s ease;
}

.word-token.word-token--hu {
  font-weight: 650;
  letter-spacing: 0.09em;
}

.word-token.word-token--hu.tone-cyan {
  color: rgba(186, 255, 255, 1);
}

.word-token.word-token--hu.tone-purple {
  color: rgba(255, 232, 255, 1);
}

.word-token.visible {
  opacity: var(--word-opacity, 0.44);
}

.word-token.tone-cyan {
  color: rgba(168, 255, 255, 0.98);
  text-shadow:
    0 0 12px rgba(0, 248, 255, 0.48),
    0 0 24px rgba(0, 170, 255, 0.32),
    0 0 38px rgba(0, 120, 220, 0.14);
}

.word-token.tone-purple {
  color: rgba(248, 226, 255, 0.98);
  text-shadow:
    0 0 12px rgba(236, 72, 255, 0.46),
    0 0 24px rgba(168, 85, 247, 0.34),
    0 0 36px rgba(124, 58, 237, 0.16);
}

.word-token.tone-soft {
  color: rgba(228, 238, 255, 0.96);
  text-shadow:
    0 0 10px rgba(140, 210, 255, 0.28),
    0 0 20px rgba(100, 140, 240, 0.18),
    0 0 28px rgba(80, 110, 200, 0.09);
}

@keyframes wordTokenDrift {
  0% {
    transform: translate3d(var(--token-dx, 0px), var(--token-dy, 0px), 0);
  }
  100% {
    transform: translate3d(
      calc(var(--token-dx, 0px) * -1.06),
      calc(var(--token-dy, 0px) * -1.08),
      0
    );
  }
}

.word-token.word-token--drift.visible {
  animation-name: wordTokenDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: var(--token-drift-ms, 72s);
}

.featured-word {
  position: absolute;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.98);
  text-shadow:
    0 0 14px rgba(0, 238, 255, 0.52),
    0 0 30px rgba(168, 85, 247, 0.42),
    0 0 46px rgba(40, 120, 220, 0.16);
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 1.15s ease;
}

.featured-word.visible {
  opacity: var(--featured-opacity, 0.52);
  transform: translate3d(0, 0, 0);
}

.core {
  position: relative;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: min(96vw, 1280px);
  padding: min(4vw, 2rem);
}

.orb-stack {
  position: relative;
  container-type: size;
  width: var(--orb-size);
  height: var(--orb-size);
  display: grid;
  align-items: stretch;
  justify-items: center;
  animation: orbBreathe 26s ease-in-out infinite;
  filter:
    drop-shadow(0 0 8px rgba(48, 252, 255, 0.16))
    drop-shadow(0 0 18px rgba(139, 72, 226, 0.095));
}

/* Whisper only — no wide tinted disk behind orb */
.orb-field {
  position: absolute;
  inset: -4%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 50%, rgba(56, 252, 255, 0.065), transparent 26%),
    radial-gradient(circle at 72% 50%, rgba(232, 100, 255, 0.055), transparent 26%);
  filter: blur(7px);
  opacity: 0.11;
  animation: fieldPulseOpacity 22s ease-in-out infinite;
  z-index: 0;
}

/* Thin limb accent under disk edge only — supports rim, not a second halo */
.orb-core-glow {
  position: absolute;
  inset: 9.25%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform-origin: 50% 50%;
  background: conic-gradient(
    from 198deg at 50% 50%,
    rgba(72, 255, 252, 0.42),
    rgba(0, 195, 255, 0.14) 22%,
    rgba(140, 72, 235, 0.13) 48%,
    rgba(244, 118, 255, 0.4) 74%,
    rgba(72, 255, 252, 0.42)
  );
  filter: blur(4px);
  opacity: 0.27;
  animation: coreGlowPulseOpacity 24s ease-in-out infinite;
}

/*
 * Thick luminous orbital band (cyan tail ← → purple tail), aligned with wave ribbons.
 * Outer shadows kept tight to the edge — edge-defined ring, not outer fog.
 */
.orb-body {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  border: 3px solid transparent;
  background:
    radial-gradient(
      circle at 50% 50%,
      #010206 0%,
      #00040c 28%,
      #000204 54%,
      #000002 80%,
      #000001 100%
    )
      padding-box,
    linear-gradient(
      102deg,
      #e8ffff 0%,
      rgba(52, 252, 255, 1) 11%,
      rgba(0, 210, 255, 0.78) 36%,
      rgba(124, 58, 237, 0.76) 64%,
      rgba(244, 114, 255, 1) 89%,
      #f6d4ff 100%
    )
      border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 0 2px rgba(220, 255, 255, 0.85),
    0 0 5px rgba(56, 252, 255, 0.78),
    0 0 10px rgba(0, 216, 255, 0.55),
    0 0 14px rgba(124, 58, 237, 0.48),
    0 0 18px rgba(232, 96, 255, 0.4),
    inset 0 0 128px rgba(0, 0, 0, 0.995),
    inset 0 0 68px rgba(0, 2, 12, 0.94),
    inset 0 0 18px rgba(56, 248, 255, 0.07),
    inset 0 0 28px rgba(186, 104, 255, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -26px 52px rgba(0, 4, 14, 0.78);
}

.orb-content {
  position: relative;
  z-index: 6;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  justify-self: center;
  box-sizing: border-box;
  width: 71%;
  max-width: 364px;
  padding-inline: clamp(10px, 4cqmin, 28px);
  padding-block: clamp(4px, 1.2cqmin, 12px);
  min-height: 0;
  text-align: center;
  /*
   * Lockup: headline + fading divider share width; subtitle below. Mail icon is separate.
   */
  --orb-gap-above: clamp(24px, 6cqmin, 36px);
  --orb-gap-below: clamp(22px, 5.5cqmin, 32px);
  --orb-divider-half: 1px;
}

.orb-lockup {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.orb-lockup .title,
.orb-lockup .subtitle {
  pointer-events: auto;
}

.orb-lockup__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

/* Title + divider share width (divider matches headline measure). */
.orb-lockup__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
}

.orb-lockup__head .title {
  margin-bottom: calc(var(--orb-gap-above) + var(--orb-divider-half));
}

.orb-lockup__below {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--orb-gap-below) + var(--orb-divider-half));
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.title {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  /* Symmetric cushion — spaced caps read visually left without equal side padding */
  padding-inline: clamp(3px, 0.085em, 8px);
  /* ~+20% vs prior step; inner cap stops “HAMAROSAN” before the rim */
  font-size: clamp(21px, max(21px, min(10.92cqmin, 40px)), 43px);
  font-weight: 700;
  letter-spacing: 0.152em;
  line-height: 1.05;
  white-space: nowrap;
  color: #ffffff;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.28),
    0 0 28px rgba(0, 230, 255, 0.26),
    0 0 42px rgba(168, 85, 247, 0.2),
    0 0 56px rgba(40, 100, 200, 0.08);
}

.divider {
  margin: 0;
  display: block;
  align-self: stretch;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  flex-shrink: 0;
  background: linear-gradient(90deg, rgba(72, 255, 252, 1), rgba(236, 162, 255, 1));
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 28%,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 28%,
    #000 72%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  box-shadow:
    0 0 10px rgba(56, 252, 255, 0.4),
    0 0 20px rgba(147, 51, 234, 0.28),
    0 0 30px rgba(232, 96, 255, 0.12);
}

.subtitle {
  margin: 0;
  padding-inline: clamp(4px, 1cqmin, 12px);
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  /* Clearly subordinate to .title — scaled ~+20% from prior step */
  font-size: clamp(1.06rem, max(1.06rem, min(3.2cqmin, 1.28rem)), 1.43rem);
  font-weight: 400;
  letter-spacing: 0.11em;
  color: var(--text-muted);
  text-shadow:
    0 0 10px rgba(72, 210, 255, 0.22),
    0 0 22px rgba(0, 0, 0, 0.55);
}

.contact-icon {
  position: absolute;
  left: 50%;
  /* Lower third inside orb — anchor ~74%; translate centers the glyph ring */
  top: clamp(72%, 74%, 76%);
  bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-sizing: border-box;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(170, 248, 255, 0.52);
  background: rgba(8, 14, 32, 0.62);
  box-shadow:
    0 0 18px rgba(56, 248, 255, 0.38),
    inset 0 0 12px rgba(56, 248, 255, 0.11);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.22s ease;
}

.contact-icon:hover {
  border-color: rgba(220, 255, 255, 0.92);
  background: rgba(12, 22, 52, 0.78);
  box-shadow:
    0 0 12px rgba(160, 255, 255, 0.55),
    0 0 26px rgba(56, 248, 255, 0.58),
    0 0 42px rgba(56, 220, 255, 0.42),
    0 0 56px rgba(147, 51, 234, 0.38),
    0 0 72px rgba(232, 96, 255, 0.22),
    inset 0 0 18px rgba(72, 252, 255, 0.28),
    inset 0 0 32px rgba(168, 96, 255, 0.14);
}

.contact-icon:focus-visible {
  outline: 2px solid rgba(120, 248, 255, 0.95);
  outline-offset: 4px;
}

.contact-icon:focus:not(:focus-visible) {
  outline: none;
}

.contact-icon svg {
  width: auto;
  height: 54px;
  stroke: rgba(255, 255, 255, 1);
  stroke-width: 1.55;
  transition: filter 0.22s ease;
}

.contact-icon:hover svg {
  filter:
    drop-shadow(0 0 4px rgba(200, 255, 255, 0.95))
    drop-shadow(0 0 12px rgba(56, 248, 255, 0.65))
    drop-shadow(0 0 22px rgba(168, 120, 255, 0.45));
}

@keyframes noiseShift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  33% {
    transform: translate3d(-0.45%, -0.55%, 0);
  }
  66% {
    transform: translate3d(0.5%, 0.35%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes waveTailDriftLeft {
  0% {
    transform: translate3d(-5px, 2px, 0);
  }
  100% {
    transform: translate3d(14px, -7px, 0);
  }
}

@keyframes waveTailDriftRight {
  0% {
    transform: translate3d(5px, 2px, 0);
  }
  100% {
    transform: translate3d(-14px, -7px, 0);
  }
}

@keyframes orbBreathe {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.0016);
  }
}

@keyframes fieldPulseOpacity {
  0%,
  100% {
    opacity: 0.088;
  }
  50% {
    opacity: 0.13;
  }
}

@keyframes coreGlowPulseOpacity {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.34;
  }
}

@media (max-width: 900px) {
  :root {
    --orb-size: clamp(calc(260px * 1.1), calc(72vw * 1.1), calc(380px * 1.1));
  }

  .title {
    letter-spacing: 0.132em;
  }

  .orb-field {
    inset: -3%;
    filter: blur(6px);
  }

  .wave-tail--left {
    animation: waveTailDriftLeftMobile 88s ease-in-out infinite alternate;
  }

  .wave-tail--right {
    animation: waveTailDriftRightMobile 92s ease-in-out infinite alternate;
  }
}

@keyframes waveTailDriftLeftMobile {
  0% {
    transform: translate3d(-5px, 2px, 0);
  }
  100% {
    transform: translate3d(14px, -7px, 0);
  }
}

@keyframes waveTailDriftRightMobile {
  0% {
    transform: translate3d(5px, 2px, 0);
  }
  100% {
    transform: translate3d(-14px, -7px, 0);
  }
}

@media (max-width: 520px) {
  .title {
    letter-spacing: 0.098em;
  }

  .subtitle {
    letter-spacing: 0.088em;
  }

  .orb-content {
    width: 72%;
    padding-inline: clamp(8px, 3.2cqmin, 18px);
  }

  .wave-tail--left,
  .wave-tail--right {
    animation-duration: 104s;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}