:root{
  --bg:#0b1220;
  --card:#0f1a33;
  --muted:#a8b3cf;
  --text:#eef2ff;
  --brand:#60a5fa;
  --brand2:#8ab4ff;
  --border:rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.35);

  --maxText: 720px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(96,165,250,.16), transparent 55%),
    radial-gradient(900px 600px at 90% 20%, rgba(138,180,255,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.7;
}

a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

p{max-width:var(--maxText);color:var(--muted);margin:0}
h1,h2,h3,h4{margin:0;letter-spacing:-.2px}

.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(11,18,32,.75);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  letter-spacing:.2px;
  min-width: 240px;
}
.logo-img{
  width:46px;
  height:46px;
  display:block;
  object-fit:contain;
}
.brand-text{font-size:18px}
.brand-text span{color:var(--muted);font-weight:700}

.nav-links{display:flex;gap:18px;align-items:center;color:var(--muted);font-weight:700}
.nav-links a{padding:8px 10px;border-radius:10px}
.nav-links a:hover{background:rgba(255,255,255,.06);color:var(--text)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:12px 18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);

  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:700;

  transition: all .15s ease;
}

.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
}

.btn.primary{
  border:none;
  background: linear-gradient(135deg, #60a5fa, #8ab4ff);
  color:#051425;
}

.btn.primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.card{
  background: rgba(15,26,51,.80);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
}

section{padding:80px 0}
.page-hero{padding:110px 0 70px}

.kicker{
  display:inline-block;
  color:#cfe6ff;
  border:1px solid rgba(96,165,250,.35);
  background: rgba(96,165,250,.10);
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.2px;
  font-size:12px;
  margin-bottom:14px;
}

h1{
  font-size: clamp(34px, 4.0vw, 56px);
  line-height:1.05;
  margin-bottom:14px;
  max-width: 18ch;
}
.lead{
  font-size:18px;
  max-width: var(--maxText);
  margin-bottom:22px;
}

.grid2{display:grid;grid-template-columns: 1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns: repeat(3, 1fr);gap:16px}

.feature{padding:20px}
.feature h3{font-size:18px;margin-bottom:8px}
.feature p{margin:0}

.hr-soft{
  height:1px;
  background: rgba(255,255,255,.08);
  border:0;
  margin: 18px 0;
}

.section-alt{
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.cta{
  padding:26px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background: linear-gradient(135deg, rgba(96,165,250,.18), rgba(138,180,255,.10));
}

.small{font-size:13px;color:var(--muted)}

.form{
  max-width: 760px;
  margin: 0 auto;
  padding: 26px;
}
.form-row{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
input,
textarea,
select{
  padding:13px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size:14px;
  outline:none;

  transition: all .18s ease;
}

input:focus,
textarea:focus,
select:focus{
  border-color: rgba(96,165,250,.7);
  box-shadow: 0 0 0 3px rgba(96,165,250,.15);
  background: rgba(255,255,255,.07);
}

input::placeholder,
textarea::placeholder{
  color:#8fa3c8;
}

input:hover,
textarea:hover,
select:hover{
  border-color: rgba(96,165,250,.35);
}

label{font-weight:800;color:#dbe7ff}

footer{
  padding:28px 0 40px;
  color:var(--muted);
  border-top:1px solid var(--border);
}

@media (max-width: 900px){
  .grid3{grid-template-columns: 1fr;}
  .grid2{grid-template-columns: 1fr;}
  .nav-links{display:none;}
  h1{max-width: 28ch;}
}

.hero-content{
  max-width:650px;
}

.hero-waves{
  position:relative;
  overflow:hidden;
}

.hero-waves::after{
  content:"";
  position:absolute;
  left:-10%;
  bottom:-40px;
  width:140%;
  height:200px;

  background:
    radial-gradient(120px 40px at 25% 60%, rgba(96,165,250,.18), transparent),
    radial-gradient(160px 60px at 55% 70%, rgba(96,165,250,.15), transparent),
    radial-gradient(140px 50px at 75% 60%, rgba(96,165,250,.18), transparent);

  filter: blur(25px);
  animation: waveMove 14s linear infinite;
}

@keyframes waveMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-200px); }
}

.hero-grid{
  grid-template-columns: 1.05fr .95fr;
}

.hero-content{
  max-width:650px;
}

.hero-card{
  padding:22px;
  align-self:start;
}

.hero-list{
  display:grid;
  gap:12px;
}

.hero-item{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.hero-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  margin-top:7px;
  background: linear-gradient(135deg, rgba(96,165,250,.95), rgba(138,180,255,.85));
  flex:0 0 auto;
}

.hero-item span{
  color: var(--muted);
  font-weight:600;
}

/* Mobile */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-content{ max-width: 100%; }
}
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #8fa3c8 50%),
    linear-gradient(135deg, #8fa3c8 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px;
  background-repeat:no-repeat;
}

select option{
  background:#0b1220;
  color:#eef2ff;
}