/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root{
  --bg: #07090b;
  --ink: #e8fff8;
  --ink-dim: #bff7e6;
  --glass: rgba(255,255,255,0.06);
  --line: rgba(255,255,255,0.12);
  --accent: #b2ffe7;
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Inter", "SF Pro Display", Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: radial-gradient(1500px 800px at 70% -20%, #0b1220 0%, transparent 60%),
              radial-gradient(1000px 600px at -10% 110%, #08131c 0%, transparent 60%),
              var(--bg);
  letter-spacing: 0.2px;
}
.bg-noise::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background-image: repeating-linear-gradient(transparent 0 1px, rgba(255,255,255,0.02) 1px 2px),
                    radial-gradient(2px 2px at 40% 10%, rgba(255,255,255,0.04) 20%, transparent 60%),
                    radial-gradient(3px 3px at 70% 80%, rgba(255,255,255,0.03) 20%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: flicker 8s linear infinite;
}
@keyframes flicker { 0%,100%{opacity:.45} 50%{opacity:.6} }
.wrapper{ display:flex; flex-direction:column; min-height:100dvh; }
.container{ width:min(1080px, 92%); margin:0 auto; }
.header{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; position:sticky; top:0; backdrop-filter: blur(8px); background: linear-gradient(to bottom, rgba(7,9,11,0.8), transparent); z-index:10; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand img{ width:44px; height:44px; filter: drop-shadow(0 0 12px rgba(178,255,231,0.35)); }
.brand h1{ font-size:18px; letter-spacing:4px; font-weight:700; margin:0; color:var(--ink); }
.badge{ font-size:12px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--ink-dim); }
.hero{ display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:40px; padding:56px 0 32px; }
.hero-title{ font-size:clamp(40px, 8vw, 86px); line-height:1.02; margin:0 0 16px; letter-spacing:.5px; }
.hero-sub{ color:var(--ink-dim); font-size:clamp(14px,2.2vw,18px); margin:0 0 22px; max-width:48ch; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:14px; border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:var(--ink); text-decoration:none; font-weight:600; transition:.25s ease;
  transform: translateZ(0);
}
.btn:hover{ border-color: var(--accent); box-shadow: 0 0 0 1px inset var(--accent), 0 10px 30px rgba(178,255,231,0.15); transform: translateY(-1px); }
.btn .icon{ width:18px;height:18px; display:inline-block; }
.play{ background: linear-gradient(180deg, rgba(178,255,231,0.22), rgba(178,255,231,0.06)); }
.orb{ width: 380px; height: 380px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #d0ffe6, transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(178,255,231,0.75), transparent 65%),
              radial-gradient(closest-side, rgba(255,255,255,0.08), rgba(255,255,255,0));
  filter: blur(0.2px) drop-shadow(0 30px 80px rgba(178,255,231,0.2));
  animation: float 9s ease-in-out infinite;
  border: 1px solid rgba(178,255,231,0.2);
}
@keyframes float { 0%,100%{ transform: translateY(-6px) translateX(0)} 50%{ transform: translateY(8px) translateX(6px)} }
.section{ padding:34px 0 64px; }
.section h2{ font-size:20px; letter-spacing:1px; color:var(--ink-dim); font-weight:600; margin:0 0 14px; }
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
.card{ position:relative; overflow:hidden; padding:16px; min-height:120px;
  border-radius:16px; background: var(--glass); border:1px solid var(--line);
  transition:.3s ease; text-decoration:none; color:var(--ink); }
.card:hover{ transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 36px rgba(178,255,231,0.15); }
.card .icon{ width:22px; height:22px; opacity:.9; }
.card h3{ margin:10px 0 6px; font-size:16px; }
.card p{ margin:0; color:var(--ink-dim); font-size:13px; }
.card .chip{ position:absolute; top:12px; right:12px; font-size:11px; padding:4px 8px; border:1px solid var(--line); border-radius:999px; color:var(--ink-dim); }
.footer{ padding:32px 0 56px; color:var(--ink-dim); font-size:13px; border-top:1px solid var(--line); margin-top:auto; }
.footer a{ color:var(--ink-dim); }
@media (max-width: 880px){
  .hero{ grid-template-columns: 1fr; }
  .orb{ order:-1; margin: 0 auto 8px; width:320px;height:320px; }
}