:root{
  --bg:#020617;
  --panel:#0f172a;
  --panel-2:#111827;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --line:rgba(148,163,184,.18);
  --cyan:#22d3ee;
  --cyan-2:#67e8f9;
  --shadow:0 20px 60px rgba(8,47,73,.25);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,calc(100% - 2rem));margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(148,163,184,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:74px; gap:20px;
}
.brand{
  font-size:.86rem; letter-spacing:.28em; text-transform:uppercase;
  color:#cffafe; font-weight:700;
}
.menu{display:flex; gap:26px; align-items:center}
.menu a{color:#cbd5e1; font-size:.95rem}
.menu a:hover{color:var(--cyan-2)}
.menu-toggle{
  display:none; background:none; border:1px solid var(--line);
  color:var(--text); border-radius:14px; padding:.45rem .7rem; font-size:1.1rem;
}
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(148,163,184,.12);
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at top left, rgba(34,211,238,.16), transparent 28%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.18), transparent 30%),
    linear-gradient(180deg, rgba(15,23,42,1) 0%, rgba(2,6,23,1) 100%);
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:center;
  padding:88px 0 72px;
}
.eyebrow-pill,.eyebrow{
  color:#a5f3fc;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.76rem;
}
.eyebrow-pill{
  display:inline-flex; padding:.75rem 1rem; border-radius:999px;
  border:1px solid rgba(34,211,238,.2); background:rgba(34,211,238,.10);
  margin-bottom:1.25rem;
}
.hero-copy h1{
  margin:0;
  font-size:clamp(2.7rem,6vw,4.9rem);
  line-height:1.04;
  letter-spacing:-.04em;
  max-width:13ch;
}
.hero-copy p{
  margin:1.5rem 0 0; max-width:760px; color:#cbd5e1; font-size:1.16rem;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:2rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:18px; padding:1rem 1.3rem; font-weight:600; transition:.18s ease;
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--cyan); color:#082f49}
.btn-primary:hover{background:var(--cyan-2)}
.btn-secondary{
  background:rgba(34,211,238,.10); color:var(--text); border-color:rgba(34,211,238,.20)
}
.btn-secondary:hover{background:rgba(34,211,238,.16)}
.btn-full{width:100%}
.glass-card{
  border:1px solid rgba(148,163,184,.12);
  border-radius:32px;
  background:rgba(15,23,42,.68);
  box-shadow:var(--shadow);
  padding:28px;
  backdrop-filter:blur(10px);
}
.glass-card h2{font-size:1.55rem; line-height:1.18; margin:.4rem 0 1.3rem}
.highlight-list{display:grid; gap:12px; padding:0; margin:0; list-style:none}
.highlight-list li{
  border:1px solid rgba(148,163,184,.12); background:rgba(2,6,23,.42);
  border-radius:18px; padding:14px 16px; color:#e2e8f0;
}
.section{padding:96px 0}
.section-alt{
  background:rgba(15,23,42,.45);
  border-top:1px solid rgba(148,163,184,.12);
  border-bottom:1px solid rgba(148,163,184,.12);
}
.section-head{max-width:800px; margin-bottom:2.5rem}
.section h2{
  margin:.4rem 0 0;
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.12; letter-spacing:-.03em;
}
.section-copy{color:#cbd5e1; font-size:1.1rem; margin-top:1rem}
.card-grid{display:grid; gap:22px}
.card-grid.three{grid-template-columns:repeat(3,1fr)}
.card-grid.four{grid-template-columns:repeat(4,1fr)}
.card{
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.55);
  border-radius:var(--radius);
  padding:30px;
  transition:.18s ease;
}
.card:hover{
  transform:translateY(-3px);
  border-color:rgba(34,211,238,.30);
  background:rgba(34,211,238,.10);
}
.card h3{margin:0; font-size:1.35rem; line-height:1.2}
.card p{margin:.95rem 0 0; color:#cbd5e1}
.split{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start;
}
.stack-copy{display:grid; gap:18px; color:#cbd5e1; font-size:1.08rem}
.badge-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(4,1fr);
}
.badge{
  display:flex; align-items:center; justify-content:center;
  border-radius:18px; padding:15px 14px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.55);
  color:#e2e8f0;
  text-align:center;
}
.step{
  color:#7dd3fc; letter-spacing:.3em; font-size:.85rem; text-transform:uppercase;
}
.section-contact{
  border-top:1px solid rgba(148,163,184,.12);
  background:linear-gradient(180deg, rgba(34,211,238,.05), transparent 22%);
}
.contact-shell{
  display:grid; grid-template-columns:1fr .95fr; gap:44px;
  border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.62);
  border-radius:32px;
  padding:40px;
}
.contact-meta{display:grid; gap:14px; margin-top:2rem}
.meta-item{
  border:1px solid rgba(148,163,184,.12); border-radius:18px; padding:14px 16px;
  color:#e2e8f0;
}
.form-card{
  border:1px solid rgba(148,163,184,.12);
  background:rgba(2,6,23,.48);
  border-radius:28px;
  padding:28px;
}
.form-card h3{margin:0; font-size:1.55rem}
.form-intro{margin:.6rem 0 1.2rem; color:var(--muted)}
.contact-form{display:grid; gap:16px}
.contact-form label{
  display:grid; gap:8px; color:#cbd5e1; font-size:.95rem;
}
.form-row{display:grid; gap:16px; grid-template-columns:repeat(2,1fr)}
input,textarea{
  width:100%; border-radius:18px; border:1px solid rgba(148,163,184,.12);
  background:rgba(15,23,42,.82); color:var(--text);
  padding:14px 15px; font:inherit; outline:none; resize:vertical;
}
input::placeholder,textarea::placeholder{color:#64748b}
input:focus,textarea:focus{border-color:rgba(34,211,238,.4)}
.site-footer{
  border-top:1px solid rgba(148,163,184,.12);
  background:rgba(2,6,23,.88);
}
.footer-grid{
  display:flex; justify-content:space-between; gap:18px;
  padding:28px 0; color:#94a3b8; font-size:.95rem;
}
.footer-meta{display:flex; gap:20px; flex-wrap:wrap}
@media (max-width: 1024px){
  .hero-grid,.split,.contact-shell{grid-template-columns:1fr}
  .card-grid.three,.card-grid.four,.badge-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .menu-toggle{display:block}
  .menu{
    display:none; position:absolute; left:1rem; right:1rem; top:74px;
    flex-direction:column; align-items:flex-start; gap:14px; padding:18px;
    background:rgba(2,6,23,.96); border:1px solid rgba(148,163,184,.12); border-radius:22px;
  }
  .menu.open{display:flex}
  .hero-grid{padding:72px 0 54px}
  .section{padding:72px 0}
  .card-grid.three,.card-grid.four,.badge-grid,.form-row{grid-template-columns:1fr}
  .contact-shell,.glass-card,.form-card,.card{padding:22px}
  .footer-grid{flex-direction:column}
}


.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.brand-logo{
  display:block;
  height:42px;
  width:auto;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:560px;
}
.footer-brand p{
  margin:0;
}
.footer-logo{
  display:block;
  height:38px;
  width:auto;
  max-width:100%;
}
@media (max-width: 760px){
  .brand-logo{
    height:34px;
  }
  .footer-logo{
    height:34px;
  }
}