/* Brand colors from IDE Brand Guide */
:root{
  --purple: #AD00FF; /* Primary */
  --lime:   #BDFF00; /* Accent */
}

* { font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
h1,h2,h3,.font-\[Days\ One\] { font-family: 'Days One', 'Montserrat', sans-serif; }

/* Subtle grid + vignette */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
}
.bg-vignette {
  background: radial-gradient(1200px circle at 50% -10%, rgba(173,0,255,.18), transparent 45%),
              radial-gradient(1000px circle at 80% 120%, rgba(189,255,0,.12), transparent 40%);
}

/* Mouse spotlight */
.spotlight {
  background: radial-gradient(550px circle at var(--x,50%) var(--y,50%), rgba(173,0,255,.12), transparent 35%);
}

/* CTA glow */
@keyframes glow { 0%,100% { box-shadow: 0 0 0 0 rgba(173,0,255,.4); } 50% { box-shadow: 0 0 40px 6px rgba(173,0,255,.25); } }
.btn-glow { animation: glow 3.5s ease-in-out infinite; }

/* Floating */
@keyframes floatY { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.float { animation: floatY 6s ease-in-out infinite; }

/* Marquee */
.marquee { display: flex; gap: 3rem; white-space: nowrap; will-change: transform; animation: marquee 28s linear infinite; color: rgba(226,232,240,.8); }
@keyframes marquee { 100% { transform: translateX(-50%) } }

/* Chips */
.chip { border: 1px solid rgba(255,255,255,.1); padding: .375rem .75rem; border-radius: 9999px; background: rgba(15,23,42,.4); color: #cbd5e1; }

/* Tilt card internals */
.bar { height: 8px; border-radius: 9999px; background: #0f172a; overflow: hidden; }
.bar > div { height: 100%; background: linear-gradient(90deg, var(--purple), var(--lime)); }

.tag { border: 1px solid rgba(255,255,255,.15); border-radius: 9999px; padding: .25rem .625rem; font-size: .75rem; background: rgba(15,23,42,.6); }

/* Project cards */
.project-card {
  position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.1);
  background: rgba(2,6,23,.5); border-radius: 1.25rem; padding: 1.5rem;
  transition: border .2s ease, transform .2s ease;
}
.project-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.25); }
.project-ink { position: absolute; inset: -40% -40% auto auto; background: radial-gradient(400px circle at 30% 30%, rgba(173,0,255,.18), transparent 40%); opacity: 0; transition: opacity .25s ease; }
.project-card:hover .project-ink { opacity: 1; }
.project-title { font-weight: 800; font-size: 1.25rem; }
.project-sub { margin-top: .25rem; }
.project-list { text-align: left; margin: .75rem auto 0; max-width: 40ch; color: #94a3b8; }
.project-list li { margin: .25rem 0; }

/* Reusable buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1rem; border-radius: .75rem; background: var(--purple); color: #fff; font-weight: 700; }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.75rem 1rem; border-radius: .75rem; border:1px solid rgba(255,255,255,.2); color:#fff; }
.btn:hover { filter: brightness(1.05); }
.btn-outline:hover { border-color: rgba(255,255,255,.35); }

/* Generic cards (offer/use cases) */
.card, .case {
  position: relative; border: 1px solid rgba(255,255,255,.1); background: rgba(2,6,23,.5);
  padding: 1.5rem; border-radius: 1rem; transition: transform .2s ease, border .2s ease; text-align:center;
}
.card:hover, .case:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2); }
.card-ink { position:absolute; inset:-50% -50% auto auto; background: radial-gradient(400px circle at 30% 30%, rgba(173,0,255,.18), transparent 40%); opacity:0; transition:opacity .25s ease; }
.card:hover .card-ink{opacity:1;}
.card-head { display:flex; align-items:center; gap:.75rem; justify-content:center; }
.card-head .icon { padding:.375rem; border-radius:.75rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); background: rgba(189,255,0,.12); }
.card p, .case p { color:#94a3b8; margin-top:.5rem; }

/* FAQ */
.faq { border: 1px solid rgba(255,255,255,.1); background: rgba(2,6,23,.5); border-radius: .75rem; padding: 1rem; }
.faq summary { display: flex; justify-content: space-between; font-weight: 700; }
.faq p { color: #94a3b8; margin-top: .5rem; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Tilt effect container baseline */
.tilt { transform-style: preserve-3d; perspective: 1000px; }