/* Data Meridian - Liquid Glass static styles */
:root{
  --bg1: #0b1020;
  --bg2: #101a3a;
  --glass: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.35);
  --text: #eef1f7;
  --muted: #c8cfdd;
  --accent: #7cc6ff;
  --accent2: #8ef3c5;
  --shadow: 0 8px 30px rgba(0,0,0,0.25);
  --radius-xl: 1rem; /* rounded-2xl feel */
  --radius-full: 999px;
  --bezier: cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #1a275a 0%, transparent 50%),
              radial-gradient(1000px 700px at 110% 10%, #153a3a 0%, transparent 55%),
              linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  overflow-x:hidden;
}

/* Background animated orbs */
.bg::before,.bg::after{
  content:"";
  position:fixed; inset:auto auto 10% -5%; width:45vmax; height:45vmax;
  background: radial-gradient(closest-side, rgba(124,198,255,0.25), transparent);
  filter: blur(40px); transform: rotate(0deg);
  animation: float1 22s var(--bezier) infinite alternate;
  pointer-events:none; z-index:0;
}
.bg::after{
  left:auto; right:-10%; bottom:auto; top:5%;
  background: radial-gradient(closest-side, rgba(142,243,197,0.22), transparent);
  animation: float2 26s var(--bezier) infinite alternate;
}
@keyframes float1{from{transform:translateY(0) rotate(0)} to{transform:translateY(-5%) rotate(10deg)}}
@keyframes float2{from{transform:translateY(0) rotate(0)} to{transform:translateY(4%) rotate(-8deg)}}

.container{max-width:1100px; margin:0 auto; padding:20px; position:relative; z-index:1}

/* Glass utility */
.glass{
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow);
}
.rounded-2xl{ border-radius: var(--radius-xl); }
.rounded-full{ border-radius: var(--radius-full); }

/* Navigation */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{
  display:inline-grid; place-items:center; width:40px; height:40px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#0a1220; font-weight:800; letter-spacing:0.5px; border-radius: var(--radius-full);
  box-shadow: 0 8px 20px rgba(124,198,255,0.35);
}
.name{ font-weight:700; letter-spacing:.3px }
.nav-links a{ color:var(--muted); text-decoration:none; margin-left:16px; position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .25s var(--bezier);} 
.nav-links a:hover{ color:var(--text) }
.nav-links a:hover::after{ width:100% }

/* Hero */
.hero{ padding:48px; text-align:center; margin-top:16px; }
.hero h1{ margin:0 0 12px; font-size:40px; line-height:1.15; }
.subtitle{ color:var(--muted); font-size:18px; }
.cta{ margin-top:28px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{ padding:12px 18px; font-weight:600; text-decoration:none; transition: transform .15s var(--bezier), box-shadow .2s var(--bezier); border:1px solid rgba(255,255,255,0.18); }
.btn.primary{ color:#0b1325; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow: 0 10px 24px rgba(124,198,255,0.35); }
.btn.ghost{ color:var(--text); background:transparent; }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,0.28); }

/* Panels */
.panel{ padding:28px; margin-top:22px; }
.list{ list-style:none; margin:14px 0 0; padding:0; color:var(--muted); }
.list li{ padding:10px 0; display:flex; align-items:center; gap:10px; }
.badge{ padding:6px 10px; background:linear-gradient(135deg, rgba(124,198,255,0.25), rgba(142,243,197,0.2)); border:1px solid rgba(255,255,255,0.22); color:var(--text); font-weight:600; }

/* Feature grid */
.grid{ display:grid; grid-template-columns: repeat( auto-fit, minmax(240px, 1fr)); gap:18px; margin-top:22px; }
.card{ padding:22px; transition: transform .2s var(--bezier), box-shadow .2s var(--bezier), background .2s var(--bezier); }
.card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.35); background: rgba(255,255,255,0.10); }

/* Contact */
.inline-form{ display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.input{ min-width:260px; padding:12px 14px; color:var(--text); background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); outline:none; }
.input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(124,198,255,0.15); transition: box-shadow .2s var(--bezier); }
.thanks{ color:var(--accent2); margin-top:10px; }
.hidden{ display:none; }
.fade-in{ animation: fadein .45s var(--bezier); }
@keyframes fadein{ from{opacity:0; transform: translateY(4px)} to{opacity:1; transform: translateY(0)} }

/* Footer */
.footer{ margin:22px 0; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); }
.footer a{ color:var(--muted); text-decoration:none; }
.footer a:hover{ color:var(--text); }

/* Responsive */
@media (max-width:640px){
  .hero{ padding:28px; }
  .hero h1{ font-size:30px; }
}