:root{
  --grad-primary: linear-gradient(135deg,#7c3aed,#22d3ee);
  --grad-hero:
    radial-gradient(1200px 600px at 20% 10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(900px 500px at 90% 30%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(700px 400px at 50% 100%, rgba(168,85,247,.2), transparent 60%);
  --shadow-glass: 0 8px 32px 0 rgba(0,0,0,.4), inset 0 1px 0 0 rgba(255,255,255,.06);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:#0b0817;color:#f5f3ff}
h1,h2,h3,h4{font-family:'Outfit',system-ui,sans-serif;letter-spacing:-.02em;font-weight:500}
::selection{background:rgba(124,58,237,.4);color:#fff}

.glass{background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-glass)}
.glass-strong{background:rgba(21,17,41,.7);backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);border:1px solid rgba(255,255,255,.1)}
.text-gradient{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-premium{background:var(--grad-primary);color:#fff;
  box-shadow:0 10px 40px -10px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .25s ease, box-shadow .25s ease}
.btn-premium:hover{transform:translateY(-2px);
  box-shadow:0 15px 50px -10px rgba(124,58,237,.8), 0 0 30px rgba(34,211,238,.4)}
.bg-hero-glow{background-image:var(--grad-hero)}
.bg-grid{background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px}

@keyframes float-slow{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(3deg)}}
@keyframes float-medium{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pulse-glow{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes spin-slow-rev{to{transform:rotate(-360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.animate-float-slow{animation:float-slow 7s ease-in-out infinite}
.animate-float-medium{animation:float-medium 6s ease-in-out infinite}
.animate-pulse-glow{animation:pulse-glow 4s ease-in-out infinite}
.animate-spin-slow{animation:spin-slow 20s linear infinite}
.animate-spin-slow-rev{animation:spin-slow-rev 30s linear infinite}
.animate-marquee{animation:marquee 40s linear infinite}

[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].in{opacity:1;transform:none}

.service-card{transition:transform .3s ease}
.project-card img{transition:transform .7s ease}
.project-card:hover img{transform:scale(1.05)}

.faq-item .faq-body{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.faq-item.open .faq-body{max-height:400px;padding:0 1.25rem 1.25rem}
.faq-item.open .faq-chevron{transform:rotate(180deg);color:#22d3ee}
.faq-chevron{transition:transform .3s ease}