/* ═══ CSS Variables ═══ */
:root {
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --color-bg: #000000;
  --color-text: #f5f5f7;
  --color-text-secondary: #86868b;
  --color-text-tertiary: #6e6e73;
  --color-accent: #2997ff;
  --color-accent-purple: #bf5af2;
  --color-accent-pink: #ff375f;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══ Reset ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
  font-family: var(--font-system);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.scrollable {
  min-height: 100vh; display: flex; flex-direction: column;
}

a { color: var(--color-accent); text-decoration: none; transition: color 0.3s; }
a:hover { color: #40a9ff; }

/* ═══ Background Effects — Scrollable Pages ═══ */
.bg-glow-1 {
  position: fixed; top: 20%; left: 50%; transform: translateX(-50%);
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(41,151,255,0.06) 0%, transparent 70%);
  filter: blur(80px); pointer-events: none;
}

.bg-glow-2 {
  position: fixed; bottom: 10%; right: 20%;
  width: 350px; height: 350px; border-radius: 50%;
  background: radial-gradient(circle, rgba(191,90,242,0.05) 0%, transparent 70%);
  filter: blur(80px); pointer-events: none;
}

/* ═══ Background Effects — Fullscreen Pages ═══ */
.bg-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}

.bg-noise {
  position: fixed; inset: 0; opacity: 0.03; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.glow-orb { position: fixed; border-radius: 50%; filter: blur(120px); opacity: 0.4; pointer-events: none; z-index: 0; }

.glow-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
  top: 20%; left: 50%; transform: translateX(-50%);
  animation: float1 12s ease-in-out infinite;
}

.glow-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--color-accent-purple) 0%, transparent 70%);
  top: 40%; left: 25%;
  animation: float2 10s ease-in-out infinite; animation-delay: -3s;
}

.glow-orb-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, var(--color-accent-pink) 0%, transparent 70%);
  top: 35%; right: 20%;
  animation: float3 14s ease-in-out infinite; animation-delay: -5s;
}

.hero-rays {
  position: fixed; top: 50%; left: 50%; width: 200%; height: 200%;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0.03; z-index: 0;
}

.hero-rays::before {
  content: ''; position: absolute; inset: 0;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(255,255,255,0.5) 10deg, transparent 20deg,
    transparent 30deg, rgba(255,255,255,0.3) 40deg, transparent 50deg,
    transparent 90deg, rgba(255,255,255,0.4) 100deg, transparent 110deg,
    transparent 180deg, rgba(255,255,255,0.3) 190deg, transparent 200deg,
    transparent 270deg, rgba(255,255,255,0.5) 280deg, transparent 290deg,
    transparent 360deg);
  animation: rotateRays 60s linear infinite;
}

@keyframes float1 { 0%, 100% { transform: translateX(-50%) translateY(0) scale(1); } 50% { transform: translateX(-50%) translateY(-30px) scale(1.05); } }
@keyframes float2 { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; } 50% { transform: translateY(20px) scale(1.1); opacity: 0.5; } }
@keyframes float3 { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-25px) scale(0.95); } }
@keyframes rotateRays { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ═══ SVG Logo Animation ═══ */
.path {
  stroke-dasharray: 5000; stroke-dashoffset: 5000; fill-opacity: 0;
  animation: dash 12s ease-in-out forwards, FillIn 12s ease-in-out forwards;
}

@keyframes dash { to { stroke-dashoffset: 0; } }
@keyframes FillIn { from { fill-opacity: 0; stroke-opacity: 0.7; } to { fill-opacity: 1; stroke-opacity: 0; } }

/* ═══ Nav Logo — Scrollable Pages ═══ */
.nav-logo-fixed {
  position: fixed; top: 36px; left: 40px; z-index: 100;
  display: flex; align-items: center;
}

.nav-logo-fixed a { text-decoration: none; }
.nav-logo-fixed svg { height: 42px; width: auto; }

/* ═══ Scrollable Page Layout ═══ */
.content {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 120px 22px 80px; position: relative; z-index: 1;
}

/* ═══ Document Page Layout (terms, privacy) ═══ */
.document-content {
  max-width: 780px; margin: 0 auto; padding: 120px 22px 80px;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out-expo) 0.2s forwards;
}

.document-content h1 {
  font-size: 48px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 12px;
  opacity: 0; transform: translateY(15px);
  animation: fadeUp 0.6s var(--ease-out-expo) 0.3s forwards;
}

.document-content .last-updated {
  font-size: 14px; color: var(--color-text-tertiary); margin-bottom: 48px;
  opacity: 0; animation: fadeUp 0.6s var(--ease-out-expo) 0.4s forwards;
}

.document-content h2 { font-size: 24px; font-weight: 600; margin-top: 48px; margin-bottom: 16px; }
.document-content p,
.document-content ul { font-size: 17px; color: var(--color-text-secondary); line-height: 1.52941; margin-bottom: 16px; }
.document-content ul { padding-left: 24px; }
.document-content li { margin-bottom: 8px; }

/* ═══ Footer ═══ */
.footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0; text-align: center;
}

.footer-links { display: flex; gap: 24px; justify-content: center; margin-bottom: 12px; }
.footer-links a { font-size: 12px; color: var(--color-text-secondary); }
.footer-links a:hover { color: var(--color-text); }
.footer-copyright { font-size: 12px; color: var(--color-text-tertiary); }

/* ═══ Animations ═══ */
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

/* ═══ Flash Messages ═══ */
.flash-messages {
  position: relative; z-index: 100;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 500px; width: calc(100% - 40px);
  margin: 96px auto 0;
  flex-shrink: 0;
}

.flash-messages ~ main { padding-top: 24px; }

.flash-message {
  position: relative;
  padding: 14px 36px 14px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  color: #ffffff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  animation: fadeUp 0.4s var(--ease-out-expo) forwards;
  opacity: 0; transform: translateY(-10px);
}

.flash-message.dismissing {
  animation: fadeOut 0.4s var(--ease-out-expo) forwards;
  opacity: 1; transform: translateY(0);
}

.flash-close {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  background: none; border: none; color: inherit; opacity: 0.6;
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
}
.flash-close:hover { opacity: 1; }
.flash-close:disabled { opacity: 0.3; cursor: not-allowed; }
.flash-close:disabled:hover { opacity: 0.3; }

.flash-success {
  background: rgba(52, 199, 89, 0.85);
  border: 1px solid rgba(52, 199, 89, 0.4);
}

.flash-error {
  background: rgba(255, 55, 95, 0.85);
  border: 1px solid rgba(255, 55, 95, 0.4);
}

.flash-info {
  background: rgba(41, 151, 255, 0.85);
  border: 1px solid rgba(41, 151, 255, 0.4);
}

.flash-warning {
  background: rgba(255, 149, 0, 0.85);
  border: 1px solid rgba(255, 149, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .flash-message { animation: none; opacity: 1; transform: none; }
  .flash-message.dismissing { animation: none; opacity: 0; }
}

/* ═══ Responsive ═══ */
@media (max-width: 480px) {
  .nav-logo-fixed { top: 24px; left: 24px; }
  .nav-logo-fixed svg { height: 36px; }
  .content { padding: 100px 16px 60px; }
  .document-content { padding: 100px 16px 60px; }
  .document-content h1 { font-size: 36px; }
  .glow-orb-1 { width: 300px; height: 300px; opacity: 0.3; }
  .hero-rays { display: none; }
  .flash-messages { margin-top: 72px; }
  .flash-messages ~ main { padding-top: 16px; }
}

@media (max-width: 768px) {
  .glow-orb-2, .glow-orb-3 { display: none; }
  .glow-orb-1 { width: 400px; height: 400px; }
}