/* ════════════════════════════════════════════
   BASE — reset · custom properties · typography
   ════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* colours */
  --bg:      #080c14;
  --bg2:     #0c1220;
  --bg3:     #111827;
  --card:    #0f1724;
  --card2:   #131d2e;
  --border:  rgba(99,179,237,0.10);
  --border2: rgba(99,179,237,0.22);
  --text:    #e8edf5;
  --text2:   #94a3b8;
  --text3:   #64748b;
  --cyan:    #22d3ee;
  --blue:    #3b82f6;
  --purple:  #a855f7;
  --grad:    linear-gradient(135deg, #22d3ee, #3b82f6, #a855f7);
  --grad2:   linear-gradient(90deg, #22d3ee 0%, #a855f7 100%);
  --glow:    0 0 40px rgba(34,211,238,0.15);
  /* layout */
  --nav-h:   68px;
  --radius:  14px;
  /* fonts */
  --font-d: 'Poppins', sans-serif;
  --font-b: 'DM Sans', sans-serif;
  --font-m: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(.4,0,.2,1);
}

html {
  scroll-behavior: smooth;
  /* offset for fixed nav so anchor targets aren't hidden */
  scroll-padding-top: var(--nav-h);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 2px; }

/* ── Layout ── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
section { padding: 7rem 0; position: relative; }
section.alt { background: var(--bg2); }

/* ── Section labels / titles ── */
.s-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-m); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 0.75rem;
}
.s-label::before { content:''; display:block; width:28px; height:1px; background:var(--cyan); }

.s-title {
  font-family: var(--font-d);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800; line-height: 1.1;
  color: var(--text); margin-bottom: 0.9rem;
}
.s-title .grad {
  background: var(--grad2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.s-desc { color: var(--text2); font-size: 1rem; max-width: 580px; line-height: 1.8; margin-bottom: 3.5rem; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.65rem; border-radius: 10px;
  font-weight: 600; font-size: 0.9rem;
  text-decoration: none; cursor: pointer; border: none;
  transition: all 0.3s var(--ease);
}
.btn-primary { background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.35); color: var(--cyan); }
.btn-primary:hover { background: rgba(34,211,238,0.16); transform: translateY(-2px); box-shadow: var(--glow); }
.btn-outline  { background: transparent; border: 1px solid var(--border2); color: var(--text2); }
.btn-outline:hover { color: var(--text); border-color: var(--text3); transform: translateY(-2px); }
.btn-grad     { background: var(--grad); color: #fff; border: none; }
.btn-grad:hover { opacity: 0.88; transform: translateY(-2px); }

/* ── Chips ── */
.chip {
  display: inline-block; padding: 0.3rem 0.85rem; border-radius: 100px;
  background: rgba(34,211,238,0.07); border: 1px solid rgba(34,211,238,0.18);
  color: var(--cyan); font-size: 0.78rem; font-family: var(--font-m); letter-spacing: 0.04em;
}

/* ── Scroll-reveal ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}
.d4{transition-delay:.4s} .d5{transition-delay:.5s}

/* ── Keyframes ── */
@keyframes fadeInUp  { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes blink     { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes pulseGlow { 0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)} 50%{opacity:.5;transform:translate(-50%,-50%) scale(1.12)} }
@keyframes scrollWhl { 0%{top:5px;opacity:1} 100%{top:20px;opacity:0} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes archPulse { 0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.35)} 50%{box-shadow:0 0 0 9px rgba(34,211,238,0)} }