:root{  
  --bg:#0b0d12;  
  --card:#121622;  
  --text:#e9ecf5;  
  --muted:#a8b0c3;  
  --brand:#f5c84b;  
  --brand2:#5bd6ff;  
  --border: rgba(255,255,255,.10);  
  --shadow: 0 18px 50px rgba(0,0,0,.45);  
  --radius: 18px;  
  --max: 1120px;  
}  
  
*{box-sizing:border-box}  
html,body{margin:0;padding:0}  
body{  
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";  
  background: radial-gradient(1200px 600px at 20% -10%, rgba(91,214,255,.18), transparent 60%),  
              radial-gradient(900px 500px at 90% 0%, rgba(245,200,75,.16), transparent 55%),  
              var(--bg);  
  color: var(--text);  
  line-height: 1.6;  
}  
  
a{color:inherit;text-decoration:none}  
img{max-width:100%;display:block}  
  
.container{max-width:var(--max);margin:0 auto;padding:0 18px}  
.btn{  
  display:inline-flex;gap:10px;align-items:center;justify-content:center;  
  padding:12px 16px;border-radius:14px;border:1px solid var(--border);  
  background: rgba(255,255,255,.06);  
  color: var(--text);  
  cursor:pointer;  
  transition:.2s ease;  
  font-weight: 650;  
}  
.btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18)}  
.btn.primary{  
  background: linear-gradient(135deg, rgba(245,200,75,.95), rgba(91,214,255,.70));  
  color: #0a0c10;  
  border: 0;  
}  
.btn.primary:hover{filter: brightness(1.03)}  
.badge{  
  display:inline-flex;gap:8px;align-items:center;  
  font-size: 12px; letter-spacing:.2px;  
  border:1px solid var(--border);  
  border-radius: 999px;  
  padding:6px 10px;  
  color: var(--muted);  
  background: rgba(255,255,255,.04);  
}  
  
header{  
  position: sticky; top: 0; z-index: 50;  
  backdrop-filter: blur(12px);  
  background: rgba(11,13,18,.55);  
  border-bottom: 1px solid var(--border);  
}  
.nav{  
  display:flex;align-items:center;justify-content:space-between;  
  padding: 14px 0;  
}  
.brand{  
  display:flex; align-items:center; gap:10px;  
  font-weight: 900; letter-spacing: .8px;  
}  
.brand .dot{  
  width:10px;height:10px;border-radius:50%;  
  background: linear-gradient(135deg, var(--brand), var(--brand2));  
  box-shadow: 0 0 18px rgba(245,200,75,.35);  
}  
.navlinks{  
  display:flex; gap:18px; align-items:center;  
}  
.navlinks a{  
  color: var(--muted);  
  font-weight: 650;  
  padding: 8px 10px;  
  border-radius: 10px;  
}  
.navlinks a:hover{color: var(--text); background: rgba(255,255,255,.05)}  
.menuBtn{display:none}  
  
.hero{  
  padding: 40px 0 30px;  
}  
.heroGrid{  
  display:grid;  
  grid-template-columns: 1.25fr .75fr;  
  gap: 18px;  
  align-items: stretch;  
}  
.heroCard{  
  position:relative;  
  overflow:hidden;  
  border-radius: var(--radius);  
  border: 1px solid var(--border);  
  box-shadow: var(--shadow);  
  min-height: 420px;  
}  
.heroCard .bg{  
  position:absolute; inset:0;  
  background-size: cover;  
  background-position: center;  
  transform: scale(1.02);  
}  
.heroCard .overlay{  
  position:absolute; inset:0;  
  background: linear-gradient(90deg, rgba(11,13,18,.85) 0%, rgba(11,13,18,.45) 55%, rgba(11,13,18,.15) 100%);  
}  
.heroCard .content{  
  position:relative;  
  padding: 34px;  
  max-width: 680px;  
}  
.h1{  
  font-size: clamp(32px, 4.2vw, 52px);  
  line-height: 1.05;  
  margin: 14px 0 12px;  
  letter-spacing: -.6px;  
}  
.lead{  
  color: var(--muted);  
  font-size: 16px;  
  max-width: 56ch;  
  margin: 0 0 18px;  
}  
.heroActions{display:flex; gap:12px; flex-wrap:wrap; margin-top: 10px}  
.kpis{  
  display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px;  
}  
.kpi{  
  padding: 10px 12px;  
  border-radius: 14px;  
  border:1px solid var(--border);  
  background: rgba(255,255,255,.04);  
  color: var(--muted);  
  font-size: 13px;  
}  
  
.sideCard{  
  border-radius: var(--radius);  
  border: 1px solid var(--border);  
  background: rgba(255,255,255,.04);  
  box-shadow: var(--shadow);  
  overflow:hidden;  
  display:flex;  
  flex-direction:column;  
}  
.sideTop{  
  position:relative;  
  min-height: 210px;  
}  
.sideTop .bg{  
  position:absolute; inset:0;  
  background-size: cover;  
  background-position: center;  
}  
.sideTop .overlay{  
  position:absolute; inset:0;  
  background: linear-gradient(180deg, rgba(11,13,18,.10), rgba(11,13,18,.85));  
}  
.sideBody{padding: 18px}  
.sideBody h3{margin: 0 0 6px}  
.sideBody p{margin:0;color:var(--muted)}  
.sideBody .miniActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}  
  
.section{padding: 34px 0}  
.section h2{  
  margin: 0 0 10px;  
  font-size: 26px;  
  letter-spacing: -.2px;  
}  
.section .sub{color:var(--muted);margin:0 0 18px;max-width: 70ch}  
  
.grid3{  
  display:grid;  
  grid-template-columns: repeat(3, 1fr);  
  gap: 14px;  
}  
.card{  
  border:1px solid var(--border);  
  border-radius: var(--radius);  
  background: rgba(255,255,255,.04);  
  padding: 16px;  
}  
.card h3{margin: 0 0 8px}  
.card p{margin:0;color:var(--muted)}  
.list{  
  margin: 10px 0 0;  
  padding-left: 18px;  
  color: var(--muted);  
}  
.list li{margin: 6px 0}  
  
.split{  
  display:grid;  
  grid-template-columns: 1fr 1fr;  
  gap: 14px;  
  align-items: start;  
}  
  
.form{  
  display:grid; gap: 10px;  
}  
.input, textarea{  
  width:100%;  
  padding: 12px 12px;  
  border-radius: 14px;  
  border:1px solid var(--border);  
  background: rgba(255,255,255,.04);  
  color: var(--text);  
  outline:none;  
}  
textarea{min-height: 120px; resize: vertical}  
small{color: var(--muted)}  
  
footer{  
  border-top: 1px solid var(--border);  
  padding: 24px 0 30px;  
  color: var(--muted);  
}  
.footerGrid{  
  display:grid;  
  grid-template-columns: 1.2fr .8fr;  
  gap: 14px;  
}  
.footerGrid a{color: var(--muted)}  
.footerGrid a:hover{color: var(--text)}  
  
hr.sep{  
  border:0;  
  border-top:1px solid var(--border);  
  margin: 18px 0;  
}  
  
/* responsive */  
@media (max-width: 980px){  
  .heroGrid{grid-template-columns: 1fr}  
  .heroCard{min-height: 420px}  
  .grid3{grid-template-columns: 1fr}  
  .split{grid-template-columns: 1fr}  
  .navlinks{display:none}  
  .menuBtn{display:inline-flex}  
}  
.drawer{  
  display:none;  
  border-top:1px solid var(--border);  
  padding: 10px 0 14px;  
}  
.drawer a{  
  display:block;  
  padding: 10px 8px;  
  border-radius: 12px;  
  color: var(--muted);  
  font-weight: 650;  
}  
.drawer a:hover{background: rgba(255,255,255,.05); color: var(--text)}  
.drawer.open{display:block}