:root {
  --bg-1: #070612;
  --bg-2: #0d0b23;
  --bg-3: #17113c;
  --panel: rgba(14, 15, 40, 0.76);
  --panel-strong: rgba(21, 20, 56, 0.88);
  --panel-soft: rgba(255, 255, 255, 0.07);
  --line: rgba(170, 165, 255, 0.18);
  --text: #fbfaff;
  --muted: #cbc7ef;
  --shadow: 0 36px 100px rgba(4, 6, 24, 0.58);
  --radius-xl: 36px;
  --radius-lg: 24px;
  --instagram: linear-gradient(135deg, #7fd6ff, #765cff 58%, #d771ff);
  --youtube: linear-gradient(135deg, #6fd3ff, #5363ff);
  --tiktok: linear-gradient(135deg, #7cf1ff, #7757ff 55%, #d86fff);
  --email: linear-gradient(135deg, #adb2ff, #cf72ff);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Instrument Sans", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 18%, rgba(85, 181, 255, 0.24), transparent 24%),
    radial-gradient(circle at 86% 14%, rgba(170, 93, 255, 0.28), transparent 26%),
    radial-gradient(circle at 70% 72%, rgba(86, 84, 255, 0.28), transparent 24%),
    linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body.cookie-banner-visible .page-shell {
  padding-bottom: 144px;
}

img,
svg,
a,
span,
strong,
p,
h1 {
  user-select: none;
  -webkit-user-select: none;
}

img,
svg {
  -webkit-user-drag: none;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 36%, transparent 86%);
}

body::after {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0, transparent 58%),
    radial-gradient(circle at center, rgba(139, 118, 255, 0.12) 0, transparent 68%);
  opacity: 0.34;
  animation: coreDrift 34s ease-in-out infinite;
}

.ambient {
  position: fixed;
  border-radius: 999px;
  filter: blur(30px);
  opacity: 0.9;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
  mix-blend-mode: screen;
}

.ambient-one {
  top: 6%;
  left: -10rem;
  width: 32rem;
  height: 32rem;
  background: rgba(84, 171, 255, 0.28);
  animation: floatOne 28s ease-in-out infinite;
}

.ambient-two {
  right: -10rem;
  bottom: 6%;
  width: 34rem;
  height: 34rem;
  background: rgba(187, 92, 255, 0.28);
  animation: floatTwo 32s ease-in-out infinite;
}

.ambient-three {
  left: 38%;
  top: 28%;
  width: 26rem;
  height: 26rem;
  background: rgba(118, 141, 255, 0.24);
  animation: floatThree 36s ease-in-out infinite;
}

.stars-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
  mix-blend-mode: screen;
}

.star {
  position: absolute;
  width: var(--star-size, 2px);
  height: var(--star-size, 2px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0, rgba(176, 229, 255, 0.98) 34%, rgba(194, 146, 255, 0.58) 66%, rgba(194, 146, 255, 0) 100%);
  box-shadow:
    0 0 14px rgba(156, 213, 255, 0.82),
    0 0 28px rgba(171, 106, 255, 0.52),
    0 0 42px rgba(171, 106, 255, 0.22);
  opacity: var(--star-min-opacity, 0.32);
 animation:
  twinkle var(--twinkle-duration, 14s) ease-in-out infinite,
  sparkle var(--sparkle-duration, 12s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}

.paint-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  opacity: 0.95;
}

.page-shell {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 36px 18px;
}

.profile-card {
  position: relative;
  width: min(100%, 820px);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(28px);
  overflow: hidden;
  isolation: isolate;
}

.profile-card::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -5%;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(119, 208, 255, 0.32), transparent 68%);
  opacity: 0.7;
}

.profile-card::after {
  content: "";
  position: absolute;
  right: -4rem;
  top: -4rem;
  width: 18rem;
  height: 18rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(206, 108, 255, 0.28), transparent 70%);
  opacity: 0.85;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 270px);
  gap: 24px;
  align-items: center;
}

.hero-copy {
  text-align: left;
  max-width: 32rem;
}

h1 {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-size: clamp(3rem, 7vw, 5.8rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.hero-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 24rem;
}

.contact-center {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: 18px 0 0;
}

.contact-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: min(100%, 360px);
  padding: 18px 20px;
  border: 1px solid rgba(167, 157, 255, 0.14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  text-decoration: none;
  text-align: center;
  backdrop-filter: blur(14px);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.contact-pill span {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.contact-pill strong {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}

.contact-pill:hover,
.contact-pill:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(184, 176, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.contact-pill:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
}

.avatar-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 280px;
}

.orbit {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(183, 173, 255, 0.18);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 65%);
}

.orbit-one {
  width: 240px;
  height: 240px;
  animation: spinSlow 40s linear infinite;
}

.orbit-two {
  width: 188px;
  height: 188px;
  border-style: dashed;
  animation: spinSlowReverse 34s linear infinite;
}

.avatar-frame {
  position: relative;
  z-index: 2;
  width: min(100%, 210px);
  aspect-ratio: 0.92;
  transform: rotate(-6deg);
}

.avatar-ring {
  position: absolute;
  inset: -10px;
  border-radius: 34px;
  background: linear-gradient(135deg, rgba(114, 214, 255, 0.28), rgba(213, 107, 255, 0.26));
  filter: blur(10px);
}

.avatar {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
  border: 1px solid rgba(218, 210, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 22px 48px rgba(19, 14, 54, 0.42);
}

.butterfly-drift {
  position: absolute;
  z-index: 3;
  width: 56px;
  height: 56px;
}

.avatar-butterfly {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 12px 22px rgba(10, 7, 29, 0.34));
  transform: translate3d(var(--drag-x, 0px), var(--drag-y, 0px), 0) rotate(var(--drag-rotate, 0deg));
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  will-change: transform;
}

.butterfly-left {
  left: -18px;
  bottom: 8px;
  animation: flutterLeft 8s ease-in-out infinite;
}

.butterfly-right {
  right: -14px;
  top: 12px;
  animation: flutterRight 9s ease-in-out infinite;
}

.butterfly-drift.is-detached {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 6;
  animation-play-state: paused;
}

.butterfly-drift.is-detached .avatar-butterfly {
  filter: drop-shadow(0 16px 30px rgba(23, 15, 68, 0.4));
}

.butterfly-drift.is-dragging .avatar-butterfly {
  cursor: grabbing;
  filter: drop-shadow(0 18px 34px rgba(23, 15, 68, 0.5));
}

.link-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 520px);
  justify-content: center;
  gap: 16px;
  margin-top: 26px;
}

.link-tile {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 18px 20px;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(168, 158, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    var(--panel-strong);
  --mx: 50%;
  --my: 50%;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
  overflow: hidden;
}

.link-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.link-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(
      190px circle at var(--mx) var(--my),
      rgba(140, 235, 255, 0.3) 0,
      rgba(122, 167, 255, 0.24) 18%,
      rgba(193, 118, 255, 0.2) 38%,
      rgba(255, 255, 255, 0.08) 54%,
      rgba(255, 255, 255, 0) 72%
    ),
    radial-gradient(
      330px circle at var(--mx) var(--my),
      rgba(100, 111, 255, 0.16) 0,
      rgba(140, 88, 255, 0.12) 32%,
      rgba(140, 88, 255, 0) 68%
    );
  opacity: 0;
  filter: saturate(120%);
  transition:
    opacity 180ms ease,
    filter 180ms ease;
  pointer-events: none;
}

.link-tile:hover,
.link-tile:focus-visible {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(175, 168, 255, 0.34);
  box-shadow: 0 24px 44px rgba(11, 8, 35, 0.35);
}

.link-tile:hover::before,
.link-tile:focus-visible::before {
  opacity: 1;
}

.link-tile:hover::after,
.link-tile:focus-visible::after {
  opacity: 1;
  filter: saturate(140%);
}

.link-tile:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.62);
  outline-offset: 4px;
}

.icon-wrap {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.icon-wrap svg {
  width: 24px;
  height: 24px;
  fill: white;
}

.instagram {
  background: var(--instagram);
}

.youtube {
  background: var(--youtube);
}

.tiktok {
  background: var(--tiktok);
}

.email {
  background: var(--email);
}

.link-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.link-copy strong {
  font-size: 1.06rem;
  font-weight: 700;
}

.link-copy span {
  color: var(--muted);
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  min-width: 74px;
  padding: 4px 10px;
  border: 1px solid rgba(173, 167, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #f4f1ff;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
  justify-self: end;
}

.stat-badge-live {
  background: rgba(112, 210, 255, 0.12);
  border-color: rgba(112, 210, 255, 0.22);
}

.profile-card.is-ready {
  animation: reveal 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(calc(100% - 24px), 760px);
  padding: 16px 18px;
  border: 1px solid rgba(164, 156, 255, 0.22);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(17, 16, 44, 0.94);
  box-shadow: 0 20px 52px rgba(6, 7, 26, 0.42);
  backdrop-filter: blur(20px);
  transform: translate(-50%, 0);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.cookie-banner.is-hidden {
  opacity: 0;
  transform: translate(-50%, 14px);
  pointer-events: none;
}

.cookie-banner p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}

.cookie-banner-button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  background: linear-gradient(135deg, rgba(116, 214, 255, 0.96), rgba(173, 92, 255, 0.96));
  box-shadow: 0 12px 26px rgba(88, 87, 255, 0.28);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.cookie-banner-button:hover,
.cookie-banner-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(88, 87, 255, 0.34);
  filter: saturate(112%);
}

.cookie-banner-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes floatOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.92) rotate(0deg);
  }

  16% {
    transform: translate3d(86px, -42px, 0) scale(1.08) rotate(10deg);
  }

  34% {
    transform: translate3d(188px, 34px, 0) scale(1.24) rotate(18deg);
  }

  56% {
    transform: translate3d(138px, 184px, 0) scale(1.18) rotate(14deg);
  }

  78% {
    transform: translate3d(-26px, 126px, 0) scale(1.06) rotate(-4deg);
  }

  90% {
    transform: translate3d(42px, 58px, 0) scale(0.98) rotate(6deg);
  }
}

@keyframes floatTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.94) rotate(0deg);
  }

  14% {
    transform: translate3d(-74px, -62px, 0) scale(1.08) rotate(-8deg);
  }

  30% {
    transform: translate3d(-214px, -152px, 0) scale(1.24) rotate(-18deg);
  }

  52% {
    transform: translate3d(-126px, 56px, 0) scale(1.12) rotate(-10deg);
  }

  74% {
    transform: translate3d(-182px, 132px, 0) scale(1.18) rotate(4deg);
  }

  88% {
    transform: translate3d(-54px, 82px, 0) scale(1.02) rotate(-3deg);
  }
}

@keyframes floatThree {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.9) rotate(0deg);
  }

  18% {
    transform: translate3d(104px, -96px, 0) scale(1.12) rotate(9deg);
  }

  40% {
    transform: translate3d(-82px, 122px, 0) scale(1.2) rotate(-12deg);
  }

  62% {
    transform: translate3d(138px, 58px, 0) scale(1.1) rotate(14deg);
  }

  82% {
    transform: translate3d(28px, -38px, 0) scale(0.98) rotate(-6deg);
  }
}

@keyframes coreDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.98) rotate(0deg);
    opacity: 0.3;
  }

  24% {
    transform: translate3d(42px, -36px, 0) scale(1.08) rotate(7deg);
    opacity: 0.42;
  }

  52% {
    transform: translate3d(-36px, -58px, 0) scale(1.18) rotate(-8deg);
    opacity: 0.52;
  }

  76% {
    transform: translate3d(18px, 22px, 0) scale(1.06) rotate(5deg);
    opacity: 0.38;
  }
}

@keyframes twinkle {
  0%,
  100% {
    opacity: var(--star-min-opacity, 0.24);
    transform: scale(var(--star-min-scale, 0.82));
  }

  30% {
    opacity: var(--star-mid-opacity, 0.68);
    transform: scale(var(--star-mid-scale, 1.08));
  }

  55% {
    opacity: var(--star-peak-opacity, 1);
    transform: scale(var(--star-peak-scale, 1.56));
  }

  72% {
    opacity: var(--star-low-opacity, 0.38);
    transform: scale(var(--star-low-scale, 0.96));
  }
}

@keyframes sparkle {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }

  50% {
    filter: brightness(var(--star-brightness, 1.45)) saturate(1.18);
  }
}

@keyframes flutterLeft {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-8deg);
  }

  50% {
    transform: translate3d(8px, -8px, 0) rotate(6deg);
  }
}

@keyframes flutterRight {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(18deg);
  }

  50% {
    transform: translate3d(-8px, 12px, 0) rotate(28deg);
  }
}

@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spinSlowReverse {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@media (max-width: 860px) {
  .profile-card {
    padding: 24px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero-copy {
    text-align: center;
    max-width: none;
  }

  .hero-note {
    margin-left: auto;
    margin-right: auto;
  }

  .avatar-stage {
    min-height: 230px;
  }

  .link-grid {
    grid-template-columns: minmax(0, 520px);
  }
}

@media (max-width: 560px) {
  .page-shell {
    padding: 16px 12px;
  }

  .profile-card {
    padding: 20px 16px;
    border-radius: 28px;
  }

  .avatar-frame {
    width: min(100%, 180px);
  }

  .orbit-one {
    width: 205px;
    height: 205px;
  }

  .orbit-two {
    width: 156px;
    height: 156px;
  }

  .butterfly-drift {
    width: 48px;
    height: 48px;
  }

  .link-tile {
    min-height: 80px;
    padding: 16px;
  }

  .stat-badge {
    font-size: 0.74rem;
  }

  body.cookie-banner-visible .page-shell {
    padding-bottom: 170px;
  }

  .cookie-banner {
    bottom: 14px;
    width: calc(100% - 16px);
    padding: 14px 14px 16px;
    border-radius: 22px;
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner-button {
    width: 100%;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 768px) {
  .ambient,
  .orbit,
  .paint-layer {
    display: none !important;
  }

  .star {
    animation:
      twinkle 18s ease-in-out infinite,
      sparkle 16s ease-in-out infinite !important;
    opacity: 0.45;
  }
}