:root {
  --text: #dff8ff;
  --muted: #8ab7c8;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; width: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-width: 280px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(65, 195, 255, 0.12), transparent 22%),
    radial-gradient(circle at bottom right, rgba(56, 255, 223, 0.08), transparent 24%),
    linear-gradient(180deg, #020b16 0%, #041423 100%);
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
.bg-grid,.bg-world,.bg-network,.bg-scan { position: fixed; inset: 0; pointer-events: none; }
.bg-grid {
  z-index: 0;
  background-image:
    linear-gradient(rgba(98, 232, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 232, 255, 0.03) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  opacity: 0.35;
}
.bg-world {
  z-index: 1;
  opacity: 0.22;
  background:
    radial-gradient(circle at 18% 40%, rgba(98,232,255,0.14) 0 10%, transparent 11%),
    radial-gradient(circle at 25% 45%, rgba(98,232,255,0.12) 0 8%, transparent 9%),
    radial-gradient(circle at 33% 36%, rgba(98,232,255,0.12) 0 10%, transparent 11%),
    radial-gradient(circle at 49% 35%, rgba(98,232,255,0.12) 0 11%, transparent 12%),
    radial-gradient(circle at 58% 46%, rgba(98,232,255,0.12) 0 9%, transparent 10%),
    radial-gradient(circle at 72% 38%, rgba(98,232,255,0.12) 0 10%, transparent 11%),
    radial-gradient(circle at 82% 46%, rgba(98,232,255,0.10) 0 8%, transparent 9%);
  filter: blur(20px);
}
.bg-network {
  z-index: 2;
  opacity: 0.4;
  background:
    linear-gradient(25deg, transparent 49.2%, rgba(98,232,255,0.16) 49.5%, rgba(98,232,255,0.16) 50.5%, transparent 50.8%),
    linear-gradient(-20deg, transparent 49.2%, rgba(98,232,255,0.10) 49.5%, rgba(98,232,255,0.10) 50.5%, transparent 50.8%);
  background-size: 320px 180px, 320px 180px;
  animation: networkShift 16s linear infinite alternate;
}
.bg-scan {
  z-index: 3;
  background: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 40%, rgba(0,0,0,0.12) 50%, rgba(255,255,255,0.015) 60%, rgba(255,255,255,0.05) 100%);
  background-size: 100% 4px;
  opacity: 0.15;
}
.screen {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(18px, var(--safe-top)) max(18px, var(--safe-right)) max(18px, var(--safe-bottom)) max(18px, var(--safe-left));
}
.hero {
  width: min(100%, 1280px);
  min-height: min(78svh, 760px);
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 820px) minmax(90px, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  padding: clamp(20px, 3vw, 38px);
}
.content {
  text-align: center;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid rgba(98,232,255,0.12);
  background: linear-gradient(180deg, rgba(6,22,38,0.28), rgba(6,22,38,0.08));
  box-shadow: 0 0 0 1px rgba(98,232,255,0.04) inset, 0 30px 80px rgba(0,0,0,0.35);
  border-radius: 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.eyebrow { margin: 0 0 10px; color: var(--muted); letter-spacing: 0.28em; font-size: clamp(0.72rem, 1vw, 0.9rem); }
h1 {
  margin: 0;
  font-size: clamp(4.4rem, 18vw, 12rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  color: rgba(120, 210, 240, 0.15);
  -webkit-text-stroke: 2px rgba(98, 232, 255, 0.78);
  text-shadow: 0 0 16px rgba(98,232,255,0.14), 0 0 30px rgba(98,232,255,0.08);
}
h2 {
  margin: 14px 0 16px;
  font-size: clamp(1.5rem, 4vw, 3.2rem);
  line-height: 1.08;
  color: rgba(98, 232, 255, 0.9);
  text-shadow: 0 0 18px rgba(98,232,255,0.12);
}
.message {
  max-width: 52ch;
  margin: 0 auto;
  color: #b7d8e5;
  font-size: clamp(0.98rem, 2vw, 1.12rem);
  line-height: 1.7;
}
.actions { margin-top: 28px; display: flex; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 220px; max-width: 100%;
  padding: 14px 22px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: clamp(0.95rem, 2vw, 1rem);
  transition: transform 0.18s ease, filter 0.18s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn.primary { color: #041018; background: linear-gradient(135deg, #8ef4ff 0%, #51ddf3 100%); box-shadow: 0 0 24px rgba(98,232,255,0.18); }
.tech-left,.tech-right { height: 100%; min-height: 220px; position: relative; opacity: 0.9; }
.tech-left span,.tech-right span {
  position: absolute; display: block; border: 2px solid rgba(98,232,255,0.55);
  border-radius: 8px; transform: skewX(-12deg); box-shadow: 0 0 18px rgba(98,232,255,0.08);
}
.tech-left span:nth-child(1),.tech-right span:nth-child(1) { width: 120px; height: 120px; top: 24%; }
.tech-left span:nth-child(2),.tech-right span:nth-child(2) { width: 86px; height: 86px; top: 33%; }
.tech-left span:nth-child(3),.tech-right span:nth-child(3) { width: 54px; height: 54px; top: 42%; }
.tech-left span { right: 0; } .tech-right span { left: 0; }

.tv-effect {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  opacity: 0; visibility: hidden; overflow: hidden; background: #000;
}
.tv-effect.active { visibility: visible; animation: tvOverlay 1.05s linear forwards; }
.tv-effect > div { position: absolute; inset: 0; }
.tv-bars {
  background: linear-gradient(90deg, #f3f3f3 0% 14.28%, #ffe500 14.28% 28.56%, #21ecff 28.56% 42.84%, #39ff39 42.84% 57.12%, #ff49f1 57.12% 71.4%, #ff3131 71.4% 85.68%, #244dff 85.68% 100%);
  filter: saturate(1.35) contrast(1.22);
  animation: barsWarp 0.12s steps(2) infinite;
  transform-origin: center;
}
.tv-distort { mix-blend-mode: screen; opacity: 0.7; }
.distort-a {
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.16) 14%, transparent 26%, rgba(255,255,255,0.14) 44%, transparent 56%, rgba(255,255,255,0.22) 72%, transparent 100%);
  animation: distortSlideA 0.18s linear infinite;
}
.distort-b {
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 12%, rgba(0,0,0,0.25) 31%, transparent 42%, rgba(255,255,255,0.10) 58%, transparent 70%, rgba(0,0,0,0.2) 100%);
  animation: distortSlideB 0.14s linear infinite;
}
.tv-static {
  opacity: 0.52;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.85) 0.55px, transparent 0.95px),
    radial-gradient(circle, rgba(0,0,0,0.55) 0.55px, transparent 0.95px),
    linear-gradient(90deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.02) 20%, rgba(0,0,0,0.22) 40%, rgba(255,255,255,0.04) 60%, rgba(0,0,0,0.22) 80%, rgba(255,255,255,0.03) 100%);
  background-size: 3px 3px, 4px 4px, 100% 100%;
  animation: staticJitter 0.07s steps(2) infinite;
  mix-blend-mode: screen;
}
.tv-scanlines {
  background: linear-gradient(to bottom, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 35%, rgba(0,0,0,0.24) 50%, rgba(255,255,255,0.02) 65%, rgba(255,255,255,0.12) 100%);
  background-size: 100% 4px;
  opacity: 0.42;
}
.tv-roll {
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.16) 18%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.18) 72%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.8;
  animation: rollDown 0.22s linear infinite;
}
.tv-rgb {
  background: linear-gradient(90deg, rgba(255,0,64,0.28), transparent 32%, transparent 68%, rgba(0,220,255,0.28)), linear-gradient(180deg, rgba(255,255,255,0.10), transparent 30%, transparent 70%, rgba(255,255,255,0.10));
  mix-blend-mode: screen;
  animation: rgbShift 0.11s steps(2) infinite;
  opacity: 0.34;
}
.tv-fade { background: radial-gradient(circle at center, transparent 56%, rgba(0,0,0,0.18) 100%); }

.fx-trigger {
  position: fixed; right: max(16px, calc(var(--safe-right) + 12px)); bottom: max(16px, calc(var(--safe-bottom) + 12px));
  z-index: 30; width: clamp(54px, 7vw, 72px); height: clamp(54px, 7vw, 72px);
  border: 0; padding: 0; border-radius: 18px; background: transparent; cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.fx-trigger:hover { transform: scale(1.06); filter: brightness(1.08); }
.fx-trigger:active { transform: scale(0.96); }
.fx-icon { position: relative; width: 100%; height: 100%; display: block; }
.shape {
  position: absolute; inset: 0; margin: auto; transform: rotate(45deg); border-radius: 10px;
}
.shape.outer {
  width: 78%; height: 78%;
  background: linear-gradient(135deg, #0f9fb8 0%, #2fd7ee 42%, #5defff 100%);
  box-shadow: 0 0 18px rgba(61, 233, 255, 0.20), 0 10px 24px rgba(0,0,0,0.38);
}
.shape.inner {
  width: 52%; height: 52%;
  background: linear-gradient(135deg, #0b1726 0%, #142238 100%);
  border: 2px solid rgba(115, 237, 255, 0.16);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.35);
}
.shape.core {
  width: 24%; height: 24%; border-radius: 999px;
  background: linear-gradient(135deg, #7af5ff 0%, #48dff3 100%);
  box-shadow: 0 0 18px rgba(122,245,255,0.45), 0 0 6px rgba(122,245,255,0.35);
}
.fx-trigger.pulse .shape.outer { animation: iconPulse 0.45s ease; }

@keyframes networkShift { 0% { background-position: 0 0, 0 0; } 100% { background-position: 120px 40px, -100px 30px; } }
@keyframes tvOverlay { 0% { opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes barsWarp {
  0% { transform: translateX(0) skewX(0deg) scaleY(1); filter: saturate(1.35) contrast(1.22); }
  20% { transform: translateX(-16px) skewX(6deg) scaleY(1.04); }
  40% { transform: translateX(18px) skewX(-8deg) scaleY(0.96); }
  60% { transform: translateX(-12px) skewX(5deg) scaleY(1.02); }
  80% { transform: translateX(10px) skewX(-4deg) scaleY(0.98); }
  100% { transform: translateX(0) skewX(0deg) scaleY(1); filter: saturate(1.4) contrast(1.28); }
}
@keyframes distortSlideA {
  0% { transform: translateY(-14px) skewX(0deg); }
  25% { transform: translateY(8px) skewX(9deg); }
  50% { transform: translateY(-10px) skewX(-10deg); }
  75% { transform: translateY(6px) skewX(7deg); }
  100% { transform: translateY(-14px) skewX(0deg); }
}
@keyframes distortSlideB {
  0% { transform: translateY(10px) skewX(0deg); }
  25% { transform: translateY(-8px) skewX(-8deg); }
  50% { transform: translateY(12px) skewX(9deg); }
  75% { transform: translateY(-6px) skewX(-6deg); }
  100% { transform: translateY(10px) skewX(0deg); }
}
@keyframes staticJitter {
  0% { transform: translate(0,0) scale(1); opacity: 0.48; }
  20% { transform: translate(2px,-1px) scale(1.02); opacity: 0.6; }
  40% { transform: translate(-2px,1px) scale(0.98); opacity: 0.42; }
  60% { transform: translate(1px,2px) scale(1.01); opacity: 0.56; }
  80% { transform: translate(-1px,-2px) scale(1.01); opacity: 0.46; }
  100% { transform: translate(0,0) scale(1); opacity: 0.5; }
}
@keyframes rollDown { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes rgbShift {
  0% { transform: translateX(0); opacity: 0.24; }
  20% { transform: translateX(-14px); opacity: 0.42; }
  40% { transform: translateX(18px); opacity: 0.2; }
  60% { transform: translateX(-10px); opacity: 0.36; }
  80% { transform: translateX(8px); opacity: 0.24; }
  100% { transform: translateX(0); opacity: 0.3; }
}
@keyframes iconPulse { 0% { transform: rotate(45deg) scale(1); } 30% { transform: rotate(45deg) scale(1.14); } 100% { transform: rotate(45deg) scale(1); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 10px; }
  .tech-left,.tech-right { display: none; }
}
@media (max-width: 640px) {
  .actions { flex-direction: column; }
  .btn { width: 100%; min-width: 0; }
  h1 { -webkit-text-stroke: 1.4px rgba(98, 232, 255, 0.78); }
}
@media (max-width: 420px) {
  .screen { padding: max(14px, var(--safe-top)) max(14px, var(--safe-right)) max(14px, var(--safe-bottom)) max(14px, var(--safe-left)); }
  .content { padding: 16px 14px 18px; border-radius: 22px; }
  h1 { font-size: clamp(3.5rem, 24vw, 5.2rem); }
  .eyebrow { letter-spacing: 0.18em; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .screen { min-height: auto; padding-top: max(14px, var(--safe-top)); padding-bottom: max(14px, var(--safe-bottom)); }
  .hero { min-height: auto; }
  .content { padding-top: 16px; padding-bottom: 18px; }
  h1 { font-size: clamp(3.4rem, 13vw, 6rem); }
  h2 { font-size: clamp(1.1rem, 2.8vw, 1.6rem); }
  .message { font-size: clamp(0.9rem, 1.8vw, 1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-network,.tv-effect.active,.tv-bars,.tv-distort,.tv-static,.tv-roll,.tv-rgb,.fx-trigger.pulse .shape.outer { animation: none !important; }
  .fx-trigger,.btn { transition: none; }
}