/* Lunaris AI — static site theme (dark cosmic, lavender–cyan glow) */
:root{
  --bg: #0a0b10;
  --card: rgba(255,255,255,0.04);
  --ring: rgba(255,255,255,0.10);
  --text: #e6e7ee;
  --muted: #9aa3b2;
  --grad-a: #c6b5ff;
  --grad-b: #89e0ff;
  --grad-c: #7dfdff;
  --accent: #b79cff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* Cosmic radial wash */
.bg-cosmic::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1000px 600px at 10% -10%, rgba(198,181,255,.15), transparent),
    radial-gradient(900px 500px at 90% 10%, rgba(124,253,255,.14), transparent),
    radial-gradient(800px 600px at 50% 90%, rgba(137,224,255,.12), transparent);
}
/* Subtle noise */
.bg-cosmic::after{
  content:""; position:fixed; inset:0; z-index:-1; opacity:.04;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.6"/></svg>');
}

/* Preloader */
#preloader{
  position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center;
  z-index:9999; transition:opacity .5s ease, visibility .5s ease;
}
.moon{
  width:84px; height:84px; border-radius:999px; position:relative;
  background: conic-gradient(from 180deg, var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-a));
  filter: blur(0.5px);
  animation: spin 2.4s linear infinite;
  box-shadow: 0 0 60px rgba(137,224,255,.35), inset 0 0 30px rgba(255,255,255,.25);
}
.moon::after{
  content:""; position:absolute; inset:8px; border-radius:999px; background:var(--bg);
}
.hidden-preloader{opacity:0; visibility:hidden}
@keyframes spin{to{transform:rotate(360deg)}}

/* Layout */
.container{max-width:1200px; margin:0 auto; padding:0 24px}
.header{
  position:sticky; top:0; backdrop-filter:saturate(180%) blur(12px);
  background:linear-gradient(to bottom, rgba(10,11,16,.75), rgba(10,11,16,.35) 60%, transparent);
  border-bottom:1px solid var(--ring); z-index:50;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.4px}
.logo{width:28px; height:28px}
.crescent{
  fill:url(#lg);
}
.nav-links{display:flex; gap:22px; align-items:center}
.nav-links a{color:#cfd6e6; text-decoration:none; font-size:14px}
.nav-links a:hover{color:white}
.actions{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:16px; text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
  font-weight:600; font-size:14px;
}
.btn-ghost{border-color:var(--ring); color:#d7deed; background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.05)}
.btn-grad{color:#0a0b10; background:linear-gradient(90deg, var(--accent), var(--grad-b), var(--grad-c)); box-shadow:0 0 40px -10px rgba(173,216,255,.6)}
.btn-grad:hover{filter:saturate(1.1)}

.hero{padding:80px 0 60px}
h1{font-size:56px; line-height:1.05; margin:0 0 16px}
h2{font-size:36px; margin:0 0 10px}
p.lead{color:#b7bfd0; font-size:18px; max-width:720px}
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:1.2fr .8fr}
@media(max-width:980px){.grid-2{grid-template-columns:1fr} h1{font-size:40px}}

.card{background:var(--card); border:1px solid var(--ring); border-radius:24px; padding:18px}
.section{padding:70px 0}
.kicker{display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#cbd3e6;
  border:1px solid var(--ring); padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.04)}
.dot{width:8px; height:8px; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--grad-c))}

.list{list-style:none; padding:0; margin:0}
.list li{display:flex; align-items:center; gap:8px; color:#cbd3e6; font-size:14px}
.badge{position:absolute; right:16px; top:-10px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; background:linear-gradient(90deg,var(--accent),var(--grad-c)); color:#0a0b10}
.price{font-size:32px; font-weight:800}

/* Footer + form */
footer{border-top:1px solid var(--ring); padding:32px 0 60px; margin-top:20px}
.footer-grid{display:grid; gap:22px; grid-template-columns:1fr 1fr}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}}
.form{display:grid; gap:12px}
.input, .textarea{
  width:100%; padding:12px 14px; border-radius:14px; border:1px solid var(--ring); background:rgba(255,255,255,.03);
  color:var(--text); outline:none;
}
.input::placeholder, .textarea::placeholder{color:#94a0b5}
.textarea{min-height:120px; resize:vertical}
.success{margin-top:10px; color:#93f2ff; display:none}

/* Glow helpers */
.glass{background:var(--card); border:1px solid var(--ring); border-radius:24px}
.glow{position:relative}
.glow::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(90deg, rgba(183,156,255,.2), transparent, rgba(140,240,255,.2));
  filter:blur(12px); z-index:-1;
}

/* SVG gradient for logo */
svg defs linearGradient#lg stop:nth-child(1){}