/* Lattice-like global stylesheet
   - Inter variable font
   - Neutral color system
   - Clean header, hero, cards, forms and buttons
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  /* Dark theme palette */
  --bg: #0f1115;
  --surface: #0b0d12;
  --muted: #9aa3ad;
  --text: #e6e6e6;
  --primary: #5f7bff; /* vivid blue on dark */
  --primary-600: #7b92ff;
  --accent: #06b6d4; /* cyan accent */
  --border: #1b1f2a;
  --shadow: 0 12px 38px rgba(0,0,0,0.35);
  --radius: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:1.45}

/* Vibrant circular gradient + decorative shapes and stars */
.bg-decor{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg-decor::before{content:"";position:absolute;inset:-10%;
  background:
    radial-gradient(60rem 60rem at 20% -10%, rgba(255,91,121,0.35), transparent 55%),
    radial-gradient(45rem 45rem at 85% 120%, rgba(83,91,255,0.35), transparent 55%),
    radial-gradient(32rem 32rem at 60% 40%, rgba(6,182,212,0.22), transparent 60%),
    radial-gradient(28rem 28rem at 10% 80%, rgba(255,184,108,0.18), transparent 65%);
  filter: saturate(1.2) hue-rotate(var(--bg-hue, -6deg));
  animation: bgPulse 14s ease-in-out infinite alternate;
}
.bg-decor::after{content:"";position:absolute;inset:0;opacity:.7;mix-blend-mode:screen;
  background-image:
    radial-gradient(2px 2px at 8% 12%, rgba(255,255,255,0.7) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 22% 38%, rgba(255,255,255,0.6) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 40% 16%, rgba(255,255,255,0.6) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 65% 24%, rgba(255,255,255,0.65) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 78% 14%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 90% 30%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(2px 2px at 12% 72%, rgba(255,255,255,0.7) 50%, transparent 52%),
    radial-gradient(1.7px 1.7px at 28% 84%, rgba(255,255,255,0.6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 46% 86%, rgba(255,255,255,0.55) 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 68% 78%, rgba(255,255,255,0.6) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 86% 64%, rgba(255,255,255,0.55) 50%, transparent 52%);
  background-repeat:no-repeat;
}
.bg-shape{position:absolute;opacity:.22;filter:blur(.2px)}
.bg-shape.square{width:80px;height:80px;border-radius:12px;transform:rotate(24deg);background:linear-gradient(135deg, rgba(255,255,255,0.12), rgba(0,0,0,0.04));border:1px solid rgba(0,0,0,0.06)}
.bg-shape.circle{width:90px;height:90px;border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.05));border:1px solid rgba(0,0,0,0.06)}
.bg-shape.tri{width:0;height:0;border-left:46px solid transparent;border-right:46px solid transparent;border-bottom:80px solid rgba(255,255,255,0.10);filter:drop-shadow(0 8px 24px rgba(0,0,0,0.06))}
.bg-shape.s1{top:12%;left:6%}
.bg-shape.s2{top:68%;left:12%}
.bg-shape.s3{top:18%;right:8%}
.bg-shape.s4{bottom:10%;right:14%}
.bg-shape.s5{top:44%;left:48%}

/* Animated gradient blobs */
.blob{position:absolute;border-radius:50%;filter:blur(30px);mix-blend-mode:screen;opacity:.55}
.blob.b1{width:520px;height:520px;left:-120px;top:-80px;background:radial-gradient(circle at 30% 30%, rgba(255,120,150,0.55), rgba(255,120,150,0.0) 60%);animation: drift1 32s ease-in-out infinite}
.blob.b2{width:420px;height:420px;right:-120px;bottom:-120px;background:radial-gradient(circle at 70% 70%, rgba(86,95,255,0.45), rgba(86,95,255,0.0) 60%);animation: drift2 36s ease-in-out infinite}
.blob.b3{width:380px;height:380px;left:40%;top:30%;background:radial-gradient(circle at 50% 50%, rgba(6,182,212,0.35), rgba(6,182,212,0.0) 60%);animation: drift3 44s ease-in-out infinite}
.blob.b4{width:300px;height:300px;left:10%;bottom:8%;background:radial-gradient(circle at 40% 60%, rgba(255,196,120,0.30), rgba(255,196,120,0.0) 60%);animation: drift4 38s ease-in-out infinite}

@keyframes bgPulse{from{--bg-hue:-6deg;transform:scale(1)} 50%{--bg-hue:6deg;transform:scale(1.02)} to{--bg-hue:12deg;transform:scale(1.04)}}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,4vh) scale(1.05)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,6vh) scale(0.95)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift3{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3vw,-4vh) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
@keyframes drift4{0%{transform:translate(0,0) scale(1)}50%{transform:translate(2vw,5vh) scale(0.98)}100%{transform:translate(0,0) scale(1)}}

/* Performance hints */
.bg-decor, .bg-shape, .blob{will-change: transform, opacity}
.bg-constellation{will-change: contents}

/* Auto-throttle styles (toggled via JS on scroll/low FPS) */
.perf-throttle .bg-decor::before{animation:none; filter:saturate(1.05) hue-rotate(0deg)}
.perf-throttle .blob{animation-play-state: paused; opacity:.35}

/* Respect user preference to reduce motion */
@media (prefers-reduced-motion: reduce){
  .bg-decor::before{animation:none}
  .blob{animation:none}
}

/* Layout container */
.container{max-width:1100px;margin:40px auto;padding:0 20px}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:44px;height:44px;display:block;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.25);background:transparent;color:var(--text)}
.brand .title{font-weight:700;font-size:18px}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);text-decoration:none;font-weight:600;padding:8px 10px;border-radius:8px}
.nav a.secondary{color:var(--muted);font-weight:500}
.cta{background:linear-gradient(90deg,var(--primary),var(--primary-600));color:white;padding:10px 14px;border-radius:10px;font-weight:700;border:none;cursor:pointer}

/* Hero */
.hero{background:transparent;padding:80px 0 60px;text-align:left}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center}
.hero h1{font-size:42px;line-height:1.05;margin:0 0 12px}
.hero p.lead{margin:0;color:var(--muted);font-size:16px}
.hero-figure{background:linear-gradient(180deg,rgba(96,112,255,0.10),rgba(6,182,212,0.06));border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:var(--shadow)}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:none;cursor:pointer;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--primary-600));color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text);font-weight:600}

/* Forms */
label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
input[type=text],textarea,select{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);background:#0e131c;font-size:15px;color:var(--text)}

/* Utilities */
.muted{color:var(--muted)}
.row{display:flex;gap:12px;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 10px;border-radius:999px;background:#f2f6ff;border:1px solid #e8efff;color:var(--primary);font-weight:600}

/* Footer */
.site-footer{margin-top:60px;padding:30px 0;color:var(--muted);font-size:14px;text-align:center}

/* Responsive adjustments */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero{padding:50px 0}
  .container{margin:24px auto}
}

/* Small helpers */
.text-center{text-align:center}
.hidden{display:none}