/* ════════════════════════════════════════
   COMMON.CSS — Root Variables, Reset, Global Utilities
════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
  --bg:      #04060f;
  --bg2:     #070b18;
  --bg3:     #0a1022;
  --surface: #0d1426;
  --card:    #101828;
  --card2:   #141e30;
  --border:  rgba(255,255,255,.06);
  --border2: rgba(255,255,255,.1);
  --text:    #e2e8f8;
  --text2:   #7a90b8;
  --text3:   #3a4f72;
  --cyan:    #00e5ff;
  --violet:  #a855f7;
  --pink:    #f43f8e;
  --gold:    #f59e0b;
  --green:   #10b981;
  --tr:      .32s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
  cursor: default;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
ul { list-style: none; }
::selection { background: rgba(0,229,255,.18); color: #fff; }

/* ── Aurora Background ── */
#aurora {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .18;
  animation: floatBlob 14s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
.ab1 { width:700px;height:500px;background:radial-gradient(circle,#00e5ff,transparent 70%);top:-100px;left:-150px;animation-duration:16s }
.ab2 { width:600px;height:600px;background:radial-gradient(circle,#a855f7,transparent 70%);top:20%;right:-200px;animation-duration:12s;animation-delay:-4s }
.ab3 { width:500px;height:400px;background:radial-gradient(circle,#f43f8e,transparent 70%);bottom:10%;left:20%;animation-duration:18s;animation-delay:-8s }
.ab4 { width:400px;height:400px;background:radial-gradient(circle,#10b981,transparent 70%);bottom:-100px;right:10%;animation-duration:13s;animation-delay:-2s }

@keyframes floatBlob {
  0%   { transform: translate(0,0) scale(1) }
  33%  { transform: translate(60px,-40px) scale(1.08) }
  66%  { transform: translate(-30px,50px) scale(.95) }
  100% { transform: translate(40px,20px) scale(1.05) }
}

/* ── Grid Overlay ── */
.grid-overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,229,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.025) 1px,transparent 1px);
  background-size: 60px 60px;
}

/* ── Scanline ── */
.scanline {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.04) 2px, rgba(0,0,0,.04) 4px
  );
}

/* ── Cursor Glow ── */
#cursor-glow {
  position: fixed; width: 400px; height: 400px;
  border-radius: 50%; pointer-events: none; z-index: 1;
  background: radial-gradient(circle,rgba(0,229,255,.06),transparent 70%);
  transform: translate(-50%,-50%);
  transition: opacity .3s;
}

/* ── Page Wrap ── */
.wrap { position: relative; z-index: 2; }

/* ── Section Common ── */
section { padding: 96px 2rem; }
.sec-in { max-width: 1280px; margin: 0 auto; }

.sec-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: .75rem;
}
.sec-eyebrow::before, .sec-eyebrow::after {
  content: ''; display: block;
  width: 24px; height: 1px; background: var(--cyan); opacity: .5;
}
.sec-title {
  font-size: clamp(1.9rem,3.5vw,2.8rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  margin-bottom: .75rem;
}
.sec-sub { font-size: 1rem; color: var(--text2); max-width: 520px; line-height: 1.7; }

.grad-text {
  background: linear-gradient(135deg,var(--cyan),var(--violet));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Buttons ── */
.btn-glow {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1.8rem; border-radius: 12px;
  background: linear-gradient(135deg,var(--cyan),var(--violet));
  color: #fff; font-weight: 700; font-size: .95rem;
  box-shadow: 0 0 30px rgba(0,229,255,.3);
  transition: all .25s;
}
.btn-glow:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(0,229,255,.45); }
.btn-outline {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1.8rem; border-radius: 12px;
  border: 1px solid var(--border2);
  color: var(--text); font-weight: 600; font-size: .95rem;
  background: rgba(255,255,255,.03);
  transition: all .25s;
}
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,229,255,.05); }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px) }
  to   { opacity: 1; transform: none }
}
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease; }
.reveal.vis { opacity: 1; transform: none; }
.delay1 { transition-delay: .1s; }
.delay2 { transition-delay: .18s; }
.delay3 { transition-delay: .26s; }
.delay4 { transition-delay: .34s; }

/* ── Global Responsive ── */
@media (max-width: 768px) {
  section { padding: 72px 1.25rem; }
}