:root{
  --bg:#fffafc;
  --white:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --pink:#ec4899;
  --pink-dark:#db2777;
  --violet:#8b5cf6;
  --line:#f3d7e5;
  --soft:#fff1f7;
  --shadow:0 18px 40px rgba(236,72,153,.10);
  --max:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
.container{max-width:var(--max);margin:0 auto;padding-left:24px;padding-right:24px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:999px;font-size:14px;font-weight:800;
  border:1px solid transparent;transition:.25s ease;cursor:pointer;
}
.btn-light{background:#fff1f7;color:#db2777;border-color:#f8cadd}
.btn-dark{background:#111827;color:#fff;box-shadow:0 12px 26px rgba(15,23,42,.12)}
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.header-inner{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;min-width:max-content}
.logo-icon{
  width:48px;height:48px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--pink),var(--violet));color:#fff;font-size:23px;
  box-shadow:0 14px 28px rgba(236,72,153,.22);
}
.logo-text strong{display:block;font-size:19px;line-height:1.1;font-weight:900;color:#111827}
.logo-text span{display:block;margin-top:3px;font-size:13px;color:var(--muted)}
.main-menu{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
.main-menu a{padding:10px 13px;border-radius:999px;font-size:14px;font-weight:700;color:#475569;transition:.25s ease}
.main-menu a.active,.main-menu a:hover{background:var(--pink);color:#fff;box-shadow:0 10px 22px rgba(236,72,153,.20)}
.header-actions{display:flex;align-items:center;gap:10px;min-width:max-content}
.site-footer{
  margin-top:60px;
  background:radial-gradient(circle at 12% 15%, rgba(236,72,153,.12), transparent 28%),
             radial-gradient(circle at 88% 10%, rgba(139,92,246,.13), transparent 26%), #fff;
  border-top:1px solid var(--line);
}
.footer-top{padding:54px 0 38px}
.footer-grid{display:grid;grid-template-columns:1.35fr .85fr .95fr .95fr;gap:28px}
.footer-brand-card{
  padding:28px;border-radius:32px;background:linear-gradient(135deg,#fff1f7,#f7f2ff);
  border:1px solid #f7cfe1;box-shadow:var(--shadow);
}
.footer-logo{display:flex;align-items:center;gap:12px}
.footer-logo-icon{
  width:52px;height:52px;border-radius:20px;background:linear-gradient(135deg,var(--pink),var(--violet));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:25px;
}
.footer-logo strong{display:block;font-size:22px;line-height:1.1;font-weight:900}
.footer-logo span{display:block;margin-top:3px;color:var(--muted);font-size:13px}
.footer-brand-card p{margin:18px 0 0;color:var(--muted);line-height:1.75;font-size:15px}
.footer-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.footer-socials a{
  width:40px;height:40px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--pink);font-weight:900;box-shadow:0 8px 18px rgba(236,72,153,.10);
}
.footer-col{
  padding:26px;border-radius:28px;background:#fff;border:1px solid #f1e4ec;
  box-shadow:0 14px 30px rgba(15,23,42,.04);
}
.footer-col h4{margin:0 0 16px;font-size:17px;font-weight:900;color:#111827}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin:11px 0;color:var(--muted);font-size:14px;line-height:1.5}
.footer-col a{color:var(--muted);transition:.2s ease}
.footer-col a:hover{color:var(--pink);padding-left:3px}
.footer-newsletter{
  margin-top:26px;padding:24px;border-radius:30px;background:linear-gradient(90deg,#fff1f7,#f6f1ff,#eef6ff);
  border:1px solid #f7cfe1;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
}
.footer-newsletter h4{margin:0;font-size:22px;font-weight:900}
.footer-newsletter p{margin:4px 0 0;color:var(--muted);font-size:14px}
.newsletter-form{display:flex;gap:10px}
.newsletter-form input{
  width:280px;border:1px solid #fff;background:#fff;border-radius:18px;padding:14px 16px;outline:none;color:#334155;
}
.newsletter-form button{border:0;background:var(--pink);color:#fff;border-radius:18px;padding:14px 18px;font-weight:900;cursor:pointer}
.footer-bottom{border-top:1px solid #f1f5f9;padding:18px 0}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#94a3b8;font-size:13px}
.footer-bottom-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-bottom-links a:hover{color:var(--pink)}
.demo-space{min-height:280px;display:flex;align-items:center;justify-content:center;padding:50px 24px;color:#64748b;text-align:center}
.demo-card{max-width:780px;border:1px dashed #f3b4d0;background:#fff;border-radius:30px;padding:34px;box-shadow:var(--shadow)}
.demo-card h1{margin:0 0 10px;color:#111827;font-size:34px}
.demo-card p{margin:0;line-height:1.7}
@media (max-width:1050px){
  .header-inner{flex-wrap:wrap;padding:14px 0}
  .main-menu{order:3;width:100%;justify-content:flex-start}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-newsletter{grid-template-columns:1fr}
}
@media (max-width:680px){
  .header-actions{width:100%}
  .header-actions .btn{flex:1}
  .footer-grid{grid-template-columns:1fr}
  .newsletter-form{flex-direction:column}
  .newsletter-form input{width:100%}
  .footer-bottom-inner{flex-direction:column;align-items:flex-start}
}