/* ── Custom properties ──────────────────────── */
:root {
  --bg: #070012;
  --cyan: #00f5ff;
  --pink: #ff1b6b;
  --yellow: #f5c400;
  --green: #39ff14;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Inter', system-ui, sans-serif; }

::selection { background: rgba(0,245,255,0.2); color: #00f5ff; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,245,255,0.3); border-radius: 9999px; }

/* ── Neon text ──────────────────────────────── */
.neon-cyan   { color: #00f5ff; text-shadow: 0 0 8px rgba(0,245,255,0.7), 0 0 20px rgba(0,245,255,0.35); }
.neon-pink   { color: #ff1b6b; text-shadow: 0 0 8px rgba(255,27,107,0.7), 0 0 20px rgba(255,27,107,0.35); }
.neon-yellow { color: #f5c400; text-shadow: 0 0 8px rgba(245,196,0,0.7), 0 0 20px rgba(245,196,0,0.35); }
.neon-green  { color: #39ff14; text-shadow: 0 0 8px rgba(57,255,20,0.7), 0 0 20px rgba(57,255,20,0.35); }

/* ── Gradient text ──────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.55) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glass ──────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Cyberpunk grid ─────────────────────────── */
.cp-grid {
  background-image:
    linear-gradient(rgba(0,245,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,245,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Scanlines ──────────────────────────────── */
.scanlines {
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
}

/* ── Ambient orbs ───────────────────────────── */
.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(100px);
  pointer-events: none;
  will-change: transform;
}

/* ── Animated background blobs ─────────────── */
@keyframes bgBlob1 {
  0%   { transform: translate(0,0) scale(1); }
  20%  { transform: translate(7vw,-4vh) scale(1.06); }
  45%  { transform: translate(11vw,5vh) scale(0.95); }
  70%  { transform: translate(2vw,9vh) scale(1.04); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes bgBlob2 {
  0%   { transform: translate(0,0) scale(1); }
  30%  { transform: translate(-9vw,7vh) scale(1.09); }
  65%  { transform: translate(-3vw,13vh) scale(0.92); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes bgBlob3 {
  0%   { transform: translate(0,0) scale(1); }
  40%  { transform: translate(8vw,-8vh) scale(1.06); }
  80%  { transform: translate(-5vw,4vh) scale(0.96); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes bgBlob4 {
  0%   { transform: translate(0,0) scale(1); }
  35%  { transform: translate(-7vw,-6vh) scale(1.07); }
  75%  { transform: translate(6vw,-2vh) scale(0.94); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes colorFlow {
  0%   { filter: blur(130px) hue-rotate(0deg); }
  100% { filter: blur(130px) hue-rotate(360deg); }
}

.animated-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg-blob { position: absolute; border-radius: 9999px; will-change: transform, filter; }
.bg-blob-1 {
  width: 80vw; height: 80vw; top: -25%; right: -20%;
  background: radial-gradient(circle, rgba(0,245,255,0.16) 0%, transparent 65%);
  animation: bgBlob1 35s ease-in-out infinite, colorFlow 42s linear infinite;
}
.bg-blob-2 {
  width: 65vw; height: 65vw; bottom: 0; left: -18%;
  background: radial-gradient(circle, rgba(255,27,107,0.14) 0%, transparent 65%);
  animation: bgBlob2 44s ease-in-out infinite, colorFlow 50s linear infinite;
  animation-delay: 0s, -17s;
}
.bg-blob-3 {
  width: 48vw; height: 48vw; top: 35%; left: 48%;
  background: radial-gradient(circle, rgba(245,196,0,0.11) 0%, transparent 65%);
  animation: bgBlob3 30s ease-in-out infinite, colorFlow 58s linear infinite;
  animation-delay: 0s, -30s;
}
.bg-blob-4 {
  width: 60vw; height: 60vw; top: -10%; left: -15%;
  background: radial-gradient(circle, rgba(57,255,20,0.09) 0%, transparent 65%);
  animation: bgBlob4 40s ease-in-out infinite, colorFlow 66s linear infinite;
  animation-delay: 0s, -44s;
}

/* ── Glitch ─────────────────────────────────── */
@keyframes glitch {
  0%,95%,100% { clip-path: none; transform: none; }
  96% { clip-path: inset(20% 0 60% 0); transform: translate(-3px,0); }
  97% { clip-path: inset(60% 0 10% 0); transform: translate(3px,0); }
  98% { clip-path: inset(40% 0 30% 0); transform: translate(-2px,0); }
}
.glitch { animation: glitch 6s steps(1) infinite; }

/* ── Float / pulse ──────────────────────────── */
@keyframes float     { 0%,100% { transform: translateY(0); }      50% { transform: translateY(-18px); } }
@keyframes floatSlow { 0%,100% { transform: translateY(0) translateX(0); } 33% { transform: translateY(-22px) translateX(6px); } 66% { transform: translateY(-10px) translateX(-6px); } }
@keyframes pulseDim  { 0%,100% { opacity: 0.18; } 50% { opacity: 0.38; } }

.animate-float      { animation: float 7s ease-in-out infinite; }
.animate-float-slow { animation: floatSlow 11s ease-in-out infinite; }
.animate-pulse-dim  { animation: pulseDim 5s ease-in-out infinite; }

/* ── Phone mockup ───────────────────────────── */
.phone-screenshot {
  position: absolute; inset: 0;
  transition: opacity 0.7s;
}
.phone-screenshot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.dot-btn { transition: width 0.3s, background 0.3s, box-shadow 0.3s; }

/* ── Store links ────────────────────────────── */
.store-link { transition: transform 0.2s, background 0.2s, box-shadow 0.2s; display: inline-block; }
.store-link:hover { transform: translateY(-2px); }

/* ── App grid layout ────────────────────────── */
.app-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  padding: 80px 0;
}
@media (min-width: 1024px) {
  .app-row { grid-template-columns: 1fr 1fr; }
  .app-row.phone-right .phone-col { order: 2; }
  .app-row.phone-right .info-col  { order: 1; }
}