:root{
  --bg-0:#07090e; --bg-1:#0c111a; --ink:#e5e7eb; --muted:#a1a1aa;
  --accent:#6ee7ff; --accent-2:#7c3aed; --glass:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:
	radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.18), transparent 60%),
	radial-gradient(800px 500px at 90% 10%, rgba(110,231,255,.14), transparent 60%),
	linear-gradient(180deg, var(--bg-0), var(--bg-1));
  letter-spacing:.2px;
}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* Nav */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(180deg, rgba(10,11,15,.85), rgba(10,11,15,.45)); border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px}
.logo{width:36px; height:36px; display:grid; place-items:center; background:conic-gradient(from 210deg, var(--accent), var(--accent-2)); border-radius:12px; box-shadow:0 10px 25px rgba(124,58,237,.25), inset 0 0 20px rgba(255,255,255,.08)}
.logo svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.brand-title{font-weight:800; letter-spacing:.8px}

.menu{display:flex; gap:20px}
.menu a{opacity:.85; padding:8px 10px; border-radius:10px; transition:opacity .2s ease, background .2s ease}
.menu a:hover{opacity:1; background:var(--glass)}

.burger{display:none; background:none; border:1px solid var(--border); color:var(--ink); border-radius:10px; padding:8px; cursor:pointer}

/* Mobile menu */
.mobile{display:none; border-top:1px solid var(--border); padding:10px 0 14px}
.mobile a{display:block; padding:10px 12px; border-radius:10px; margin:2px 0; background:transparent}
.mobile a:hover{background:var(--glass)}

/* Hero */
.hero{padding:96px 0 64px}
.grid{display:grid; grid-template-columns:1.15fr 1fr; gap:36px; align-items:center}
.kicker{color:var(--muted); text-transform:uppercase; font-size:.8rem; letter-spacing:.2em}
h1{margin:.4rem 0 0; font-size:clamp(2rem, 5vw, 3.5rem); line-height:1.05}
.lead{margin:14px 0 24px; color:var(--muted); font-size:clamp(1rem, 2.2vw, 1.125rem)}

.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{padding:12px 18px; border-radius:14px; border:1px solid var(--border); background:var(--glass); color:var(--ink); font-weight:600; cursor:pointer}

.btn.primary {
  background: linear-gradient(180deg, rgba(255,165,0,0.85), rgba(255,165,0,0.55));
  border-color: rgba(255,165,0,0.75);
}

.btn:hover{filter:brightness(0.9)}

/* Footer */
footer{padding:40px 0; color:var(--muted)}

/* Responsive */
@media (max-width: 900px){
  .grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .menu{display:none}
  .burger{display:inline-flex}
  .hero{padding:80px 0 48px}
}

.center
{
    text-align: center;
    margin: auto;
    width: 100%;
}

.orange
{
    color: orange;
}

.rounded-img {
  border-radius: 25px;
  box-shadow: 0 4px 30px rgba(0,0,0,.8);
}