:root {
  --scroll: 0;
  --mx: 0;
  --my: 0;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --keyboard-power: .28;
  --network-shift: 0px;
  --network-opacity: .18;
  --scene-glow-alpha: .09;
  --noise-x: 0px;
  --noise-y: 0px;
  --ambient-a-x: 0px;
  --ambient-a-y: 0px;
  --ambient-a-scale: .82;
  --ambient-b-x: 0px;
  --ambient-b-y: 0px;
  --ambient-b-scale: .9;
  --ambient-c-x: 0px;
  --ambient-c-y: 0px;
  --grid-y: 0px;
  --grid-opacity: .28;
  --anchor-right: 1vw;
  --anchor-x: 0vw;
  --anchor-scale: .9;
  --scroll-rx: 0deg;
  --scroll-ry: 0deg;
  --scroll-rz: 0deg;
  --laptop-glow-blur: 14px;
  --laptop-glow-alpha: .09;
  --screen-opacity: .3;
  --network-scale: .98;
  --scan-y: 0%;
  --scan-opacity: .1;
  --screen-radial-alpha: .04;
  --edge-alpha: .08;
  --edge-opacity: .25;
  --shadow-scale: .98;
  --shadow-y: 0px;
  --shadow-opacity: .72;
  --thread-x: 0px;
  --thread-rotation: 0deg;
  --thread-opacity: .12;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #040307; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 74% 46%, rgba(255, 0, 96, .16), transparent 31%),
    radial-gradient(circle at 12% 55%, rgba(75, 0, 255, .12), transparent 37%),
    linear-gradient(145deg, #030205 0%, #08030a 47%, #020104 100%);
  color: transparent;
  font-family: Arial, sans-serif;
}

.page { min-height: 100%; }
.scroll-stage { height: 520vh; position: relative; }
.sticky-scene {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  perspective: 1800px;
  background:
    radial-gradient(ellipse at 74% 54%, rgba(242, 16, 104, var(--scene-glow-alpha)), transparent 33%),
    radial-gradient(ellipse at 50% 116%, rgba(124, 31, 255, .14), transparent 52%),
    linear-gradient(115deg, #030205 0%, #090309 50%, #020104 100%);
}

.sticky-scene::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -4;
  opacity: .42;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 5px);
  transform: translate3d(var(--noise-x), var(--noise-y), 0);
  mask-image: radial-gradient(circle at 72% 50%, #000 0 34%, transparent 68%);
}

.ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: -3;
  mix-blend-mode: screen;
}
.ambient-a {
  width: 38vw; height: 38vw; right: -6vw; top: 6vh;
  background: rgba(255, 0, 99, .16);
  transform: translate3d(var(--ambient-a-x), var(--ambient-a-y), 0) scale(var(--ambient-a-scale));
}
.ambient-b {
  width: 42vw; height: 42vw; left: -22vw; bottom: -24vw;
  background: rgba(55, 0, 255, .13);
  transform: translate3d(var(--ambient-b-x), var(--ambient-b-y), 0) scale(var(--ambient-b-scale));
}
.ambient-c {
  width: 23vw; height: 23vw; left: 42vw; top: 30vh;
  background: rgba(0, 194, 255, .07);
  transform: translate3d(var(--ambient-c-x), var(--ambient-c-y), 0);
}

.grid-floor {
  position: absolute;
  left: -10%; right: -10%; bottom: -42%; height: 76%;
  z-index: -2;
  transform: rotateX(72deg) translateY(var(--grid-y));
  transform-origin: center top;
  background-image:
    linear-gradient(rgba(255, 42, 126, .105) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 42, 126, .105) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, transparent 88%);
  opacity: var(--grid-opacity);
}

.particle-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.particle {
  position: absolute;
  width: var(--size); height: var(--size);
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 0 12px rgba(255, 47, 135, .85);
  opacity: var(--alpha);
  transform: translate3d(var(--particle-x, 0px), var(--particle-y, 0px), 0);
}

.laptop-anchor {
  position: absolute;
  right: var(--anchor-right);
  top: 50%;
  width: min(70vw, 1120px);
  transform: translateY(-48%) translateX(var(--anchor-x)) scale(var(--anchor-scale));
  transform-origin: 72% 55%;
  z-index: 3;
}

.laptop-rig {
  transform-style: preserve-3d;
  will-change: transform;
  transform:
    rotateX(calc(var(--tilt-x) + var(--scroll-rx)))
    rotateY(calc(var(--tilt-y) + var(--scroll-ry)))
    rotateZ(var(--scroll-rz));
  transition: transform 150ms cubic-bezier(.2,.8,.2,1);
}

.laptop-shell {
  position: relative;
  width: 100%;
  filter:
    drop-shadow(0 34px 34px rgba(0,0,0,.54))
    drop-shadow(0 0 var(--laptop-glow-blur) rgba(255, 24, 115, var(--laptop-glow-alpha)));
  transform-style: preserve-3d;
}
.laptop-image {
  position: relative;
  z-index: 5;
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}

.screen-fx {
  position: absolute;
  z-index: 6;
  left: 20.7%;
  top: 2.55%;
  width: 78.55%;
  height: 66.9%;
  clip-path: polygon(1.2% 0%, 100% 0%, 96.4% 100%, 0% 97.7%);
  overflow: hidden;
  pointer-events: none;
  opacity: var(--screen-opacity);
  mix-blend-mode: screen;
  transform: translateZ(3px);
}
.network-svg {
  position: absolute;
  inset: -42% -8% -18%;
  width: 116%;
  height: 160%;
  overflow: visible;
  transform: translate3d(0, var(--network-shift), 0) scale(var(--network-scale));
  transform-origin: 50% 28%;
  opacity: var(--network-opacity);
  filter: drop-shadow(0 0 8px rgba(255, 43, 136, .55));
}
.network-line {
  stroke: url(#wireGradient);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  opacity: .78;
  stroke-dasharray: 11 16;
  animation: wireFlow 3.5s linear infinite;
}
.network-line.secondary { opacity: .34; stroke-width: .72; animation-duration: 5.5s; }
.network-node-core { filter: url(#nodeGlow); }
.network-ring {
  fill: none;
  stroke: rgba(255,255,255,.5);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 2.9s ease-in-out infinite;
}
.screen-scan {
  position: absolute;
  inset: -25% 0 0;
  z-index: 2;
  background: linear-gradient(to bottom, transparent 0 41%, rgba(255,255,255,.065) 49%, rgba(255, 28, 126, .16) 50%, transparent 58%);
  transform: translateY(var(--scan-y));
  opacity: var(--scan-opacity);
  mix-blend-mode: screen;
}
.screen-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 62% 48%, rgba(255, 34, 130, var(--screen-radial-alpha)), transparent 40%),
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 35%);
  opacity: .75;
}

.keyboard-light {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(8px);
  opacity: calc(var(--keyboard-power));
  transform: translateZ(4px);
}
.keyboard-light-a {
  left: 15.5%; top: 71.2%; width: 58%; height: 13.5%;
  clip-path: polygon(6% 5%, 100% 10%, 91% 100%, 0% 72%);
  background:
    repeating-linear-gradient(91deg, rgba(255, 25, 120, .8) 0 2px, transparent 2px 7%),
    repeating-linear-gradient(176deg, rgba(113, 28, 255, .55) 0 2px, transparent 2px 16%);
  animation: keyboardWave 3.6s ease-in-out infinite alternate;
}
.keyboard-light-b {
  left: 25%; top: 72.5%; width: 48%; height: 8.5%;
  background: radial-gradient(ellipse, rgba(255, 30, 122, .75), transparent 64%);
  animation: keyboardBreath 2.5s ease-in-out infinite;
}
.keyboard-light-c {
  left: 51%; top: 72.7%; width: 31%; height: 10%;
  background: radial-gradient(ellipse, rgba(69, 95, 255, .58), transparent 68%);
  animation: keyboardBreath 3.1s ease-in-out infinite reverse;
}
.edge-shine {
  position: absolute;
  z-index: 8;
  left: 7%; right: 1%; bottom: 1%; height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 46, 133, var(--edge-alpha)), transparent 63%);
  filter: blur(10px);
  opacity: var(--edge-opacity);
  mix-blend-mode: screen;
}

.laptop-shadow {
  position: absolute;
  z-index: -1;
  left: 13%; right: 4%; bottom: -5%; height: 18%;
  border-radius: 50%;
  background: rgba(0,0,0,.74);
  filter: blur(30px);
  transform: scaleX(var(--shadow-scale)) translateY(var(--shadow-y));
  opacity: var(--shadow-opacity);
}

.scroll-thread {
  position: absolute;
  left: 51%;
  top: -16%;
  width: 1px;
  height: 144%;
  background: linear-gradient(to bottom, transparent, rgba(255,38,128,.24), rgba(112,43,255,.17), transparent);
  transform: translateX(var(--thread-x)) rotate(var(--thread-rotation));
  opacity: var(--thread-opacity);
  filter: blur(.2px);
}

@keyframes wireFlow { to { stroke-dashoffset: -54; } }
@keyframes nodePulse {
  0%,100% { transform: scale(.72); opacity: .15; }
  50% { transform: scale(1.85); opacity: .6; }
}
@keyframes keyboardWave {
  from { transform: translate3d(-2%, 0, 4px); filter: blur(9px) hue-rotate(0deg); }
  to { transform: translate3d(4%, -1%, 4px); filter: blur(6px) hue-rotate(28deg); }
}
@keyframes keyboardBreath {
  0%,100% { transform: scale(.94) translateZ(4px); filter: blur(9px); }
  50% { transform: scale(1.08) translateZ(4px); filter: blur(6px); }
}

@media (max-width: 900px) {
  .scroll-stage { height: 430vh; }
  .laptop-anchor {
    width: 112vw;
    right: -25vw;
    top: 49%;
    transform: translateY(-48%) translateX(var(--anchor-x)) scale(var(--anchor-scale));
  }
  .ambient-a { width: 74vw; height: 74vw; }
  .grid-floor { bottom: -32%; }
}

@media (max-width: 560px) {
  .scroll-stage { height: 380vh; }
  .laptop-anchor {
    width: 140vw;
    right: -39vw;
    top: 48%;
    transform: translateY(-47%) translateX(var(--anchor-x)) scale(var(--anchor-scale));
  }
  .laptop-rig { transition-duration: 100ms; }
  .particle:nth-child(n+29) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .network-line, .network-ring, .keyboard-light { animation: none !important; }
  .laptop-rig { transition: none; }
}

/* Social icons emerging from the laptop display */
.social-network-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.social-wire-svg,
.social-icon-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.social-wire-svg {
  overflow: visible;
  opacity: var(--social-wire-opacity, 0);
  filter: drop-shadow(0 0 8px rgba(255, 33, 126, .42));
}

.world-wire {
  fill: none;
  stroke: url(#worldWireGradient);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-dasharray: 8 12;
  animation: worldWireFlow 3.8s linear infinite;
}

.world-wire.secondary {
  stroke-width: .8;
  stroke-dasharray: 4 13;
  opacity: .5;
  animation-duration: 5.4s;
}

.social-orb {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(34px, 3vw, 54px);
  aspect-ratio: 1;
  border-radius: 24%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(.3);
  transform-origin: center;
  will-change: transform, opacity, filter;
  box-shadow:
    0 11px 30px rgba(0,0,0,.42),
    0 0 18px var(--brand-glow, rgba(255,255,255,.25));
  border: 1px solid rgba(255,255,255,.27);
  overflow: hidden;
  isolation: isolate;
}

.social-orb::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255,255,255,.31), transparent 42%),
    var(--brand-bg, #555);
  z-index: -2;
}

.social-orb::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(110deg, transparent 34%, rgba(255,255,255,.36) 49%, transparent 64%);
  transform: translateX(-80%) rotate(8deg);
  animation: iconShine 4.6s ease-in-out infinite;
  z-index: -1;
}

.social-orb .glyph {
  color: white;
  font: 800 clamp(16px, 1.6vw, 28px)/1 Arial, sans-serif;
  letter-spacing: -.06em;
  text-shadow: 0 1px 3px rgba(0,0,0,.38);
  transform: translateY(-1px);
}

.social-orb .glyph.small {
  font-size: clamp(12px, 1.15vw, 20px);
  letter-spacing: -.12em;
}

.social-orb .glyph.play {
  font-size: clamp(14px, 1.35vw, 24px);
  transform: translateX(1px);
}

.social-orb .glyph.telegram {
  font-size: clamp(17px, 1.7vw, 29px);
  transform: rotate(-18deg) translate(1px, -1px);
}

.social-orb .glyph.instagram {
  position: relative;
  width: 53%;
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 28%;
}
.social-orb .glyph.instagram::before {
  content: "";
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.social-orb .glyph.instagram::after {
  content: "";
  position: absolute;
  width: 12%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  right: 13%;
  top: 12%;
}

.social-orb .orb-pulse {
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 30%;
  opacity: 0;
  animation: orbPulse 3.2s ease-out infinite;
}

.brand-facebook { --brand-bg: linear-gradient(145deg,#2687ff,#0751c8); --brand-glow: rgba(39,132,255,.72); }
.brand-instagram { --brand-bg: radial-gradient(circle at 68% 72%,#ffd94a 0 12%,#ff3d65 35%,#b128d2 66%,#4b55e8 100%); --brand-glow: rgba(255,55,142,.72); }
.brand-linkedin { --brand-bg: linear-gradient(145deg,#1c9de0,#05639f); --brand-glow: rgba(27,155,222,.68); }
.brand-whatsapp { --brand-bg: linear-gradient(145deg,#34e66f,#0da33e); --brand-glow: rgba(44,226,102,.7); }
.brand-telegram { --brand-bg: linear-gradient(145deg,#49c7ff,#1486d7); --brand-glow: rgba(48,181,242,.7); }
.brand-reddit { --brand-bg: linear-gradient(145deg,#ff7043,#ec2d12); --brand-glow: rgba(255,81,44,.7); }
.brand-discord { --brand-bg: linear-gradient(145deg,#7f8cff,#4d5fd5); --brand-glow: rgba(112,126,255,.68); }
.brand-youtube { --brand-bg: linear-gradient(145deg,#ff3e4d,#d70011); --brand-glow: rgba(255,43,61,.72); }
.brand-tiktok { --brand-bg: linear-gradient(145deg,#17171d,#020207); --brand-glow: rgba(56,245,238,.64); }
.brand-pinterest { --brand-bg: linear-gradient(145deg,#f32a45,#b80017); --brand-glow: rgba(235,33,63,.68); }
.brand-snapchat { --brand-bg: linear-gradient(145deg,#fff94a,#e9d900); --brand-glow: rgba(255,239,41,.65); }
.brand-google { --brand-bg: linear-gradient(145deg,#ffffff,#dce4ef); --brand-glow: rgba(91,166,255,.62); }
.brand-google .glyph { color: #4285f4; text-shadow: none; }

.screen-exit-glow {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 4%;
  width: 18%;
  height: 87%;
  background:
    radial-gradient(ellipse at 18% 52%, rgba(255,255,255,.36), rgba(255,39,136,.23) 22%, rgba(107,53,255,.13) 48%, transparent 73%);
  filter: blur(8px);
  opacity: var(--portal-opacity, 0);
  transform: translateX(calc(var(--portal-shift, 0px))) scaleX(var(--portal-scale, .55));
  transform-origin: left center;
  mix-blend-mode: screen;
}

@keyframes worldWireFlow { to { stroke-dashoffset: -60; } }
@keyframes iconShine {
  0%, 60%, 100% { transform: translateX(-85%) rotate(8deg); opacity: 0; }
  72% { opacity: .75; }
  88% { transform: translateX(85%) rotate(8deg); opacity: 0; }
}
@keyframes orbPulse {
  0% { transform: scale(.74); opacity: 0; }
  18% { opacity: .36; }
  75%,100% { transform: scale(1.38); opacity: 0; }
}

@media (max-width: 900px) {
  .social-orb { width: clamp(30px, 5.5vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .world-wire, .social-orb::after, .orb-pulse { animation: none !important; }
}