:root{
  --brand:#00d1b2; /* teal */
  --brand-accent:#ff2ea1; /* pink */
  --brand-dark:#1b1b2e;
  --text:#1e1e24;
  --muted:#5b5b6e;
  --bg:#ffffff;
  --card:#ffffff;
  --shadow:0 10px 20px rgba(0,0,0,.07),0 2px 6px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

.navbar{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #f0f0f0;z-index:50}
.navbar .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--brand-dark)}
.brand img{height:32px;width:auto;display:block}
.navbar a{color:var(--brand-dark);text-decoration:none}

.hero{padding:72px 0;background:radial-gradient(1200px 600px at 80% -10%, rgba(0,209,178,.15), transparent 60%), radial-gradient(900px 500px at 10% 0%, rgba(255,46,161,.12), transparent 60%);}
.hero .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:32px}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 12px;color:var(--brand-dark)}
.hero .tagline{font-size:20px;color:var(--muted);margin:0 0 20px}
.hero .hero-media img{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(27,27,46,.15))}

.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:10px;border:1px solid transparent;font-weight:600;cursor:pointer;transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;text-decoration:none}
.btn-primary{background:linear-gradient(135deg, var(--brand), #00b8a2);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:#e7e7ef;color:var(--brand-dark)}
.btn-ghost:hover{background:#f7f7fb}

.features{padding:56px 0}
.feature-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;padding:0;margin:0}
.feature-card{background:var(--card);border:1px solid #eee;border-radius:14px;padding:18px 18px 16px;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .2s ease}
.feature-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.08),0 6px 12px rgba(0,0,0,.05)}
.feature-card h3{margin:0 0 8px;color:var(--brand-dark)}
.feature-card p{margin:0;color:var(--muted)}

.footer{border-top:1px solid #eee;padding:28px 0;color:var(--muted);text-align:center}

/* Responsive */
@media (max-width: 880px){
  .hero .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero{padding:56px 0}
  .hero h1{font-size:40px}
}