/* OOBOX Design System */
:root {
  --bg-deep: #0B0B1A;
  --bg-navy: #111C3A;
  --purple: #7B3FE4;
  --violet: #904DFF;
  --white: #F5F7FA;
  --gray: #A6A8B5;
  --gray-dim: #6B6D7A;
  --line: rgba(245, 247, 250, 0.08);
  --line-strong: rgba(245, 247, 250, 0.18);
  --grad: linear-gradient(90deg, #7B3FE4 0%, #904DFF 100%);
  --grad-soft: linear-gradient(135deg, rgba(123, 63, 228, 0.18) 0%, rgba(144, 77, 255, 0.06) 100%);
  --font-head: 'Montserrat', sans-serif;
  --font-sub: 'Poppins', sans-serif;
  --font-body: 'Lato', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-deep);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; }
h5, h6, .sub { font-family: var(--font-sub); font-weight: 500; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.violet-text { color: var(--violet); }

.eyebrow {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--violet);
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Background grid + glow */
.bg-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 800px 600px at 80% 0%, rgba(144, 77, 255, 0.12), transparent 60%),
    radial-gradient(ellipse 700px 500px at 0% 60%, rgba(123, 63, 228, 0.08), transparent 60%);
}

.bg-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(245, 247, 250, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 247, 250, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 30%, black 30%, transparent 80%);
}

#root { position: relative; z-index: 1; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 4px;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  position: relative;
  white-space: nowrap;
}
.btn-primary {
  background: var(--grad);
  color: white;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(144, 77, 255, 0.6); }

.btn-ghost {
  border: 1px solid var(--line-strong);
  color: var(--white);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover { border-color: var(--violet); background: rgba(144, 77, 255, 0.06); }

/* Brand Shape (the trapezoid/expansion shape) */
.shape-bracket {
  position: absolute;
  pointer-events: none;
}

/* Card */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
  transition: border-color 0.3s ease, transform 0.3s ease;
  position: relative;
  overflow: hidden;
}
.card:hover {
  border-color: rgba(144, 77, 255, 0.35);
  transform: translateY(-4px);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.card:hover::before { opacity: 1; }

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 40s linear infinite; }

/* Pulse for digital lines */
@keyframes dash-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Section dividers */
.section { padding: 120px 0; position: relative; }
.section-tight { padding: 80px 0; }

@media (max-width: 768px) {
  .section { padding: 80px 0; }
  .container { padding: 0 20px; }
}