/* Base */
:root{
  --bg:#f6f8ff;
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#475569;
  --brand:#5a46ff;
  --ok:#16a34a;
  --err:#dc2626;
  --radius-lg:20px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(15,23,42,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Heebo', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(246,248,255,.6);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:800}
.logo{width:40px; height:auto; border-radius:8px}

.hero{padding:48px 0}
.hero-grid{
  display:grid; grid-template-columns: 1.2fr 1fr; gap:28px; align-items:center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero-copy h1{
  font-size: clamp(28px, 5vw, 44px);
  line-height:1.2; margin:0 0 10px;
  letter-spacing:-.3px;
}
.lead{color:var(--muted); margin:0 0 14px}
.small{font-size:.95rem}
.bullets{margin:0 0 18px 1rem}
.bullets li{margin-bottom:6px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:700; border:0; cursor:pointer; box-shadow:var(--shadow); background:#fff}
.btn.primary{background:var(--brand); color:#fff}
.btn:active{transform:translateY(1px)}

.hero-art .demo-card{
  background:var(--card); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow);
}
.chip{display:inline-block; background:#eef2ff; color:#3730a3; border-radius:999px; padding:6px 10px; font-size:.9rem; margin-bottom:6px}

.section{padding:36px 0}
.two-col{display:grid; grid-template-columns: 1fr 1fr; gap:20px}
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }
.card{background:var(--card); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow)}
.note ol{margin:0; padding-inline-start:1.1rem}
.note li{margin-bottom:8px}

.contact .form-card{
  background:var(--card); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow);
}
.form-card .grid{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
.form-card .grid .full{grid-column:1/-1}
@media (max-width: 700px){ .form-card .grid{ grid-template-columns: 1fr; } }

label{font-weight:600; font-size:.95rem; display:flex; flex-direction:column; gap:6px}
input, textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(2,6,23,.12); outline:none;
  background:#fff; font-size:1rem;
}
input:focus, textarea:focus{border-color:#a78bfa; box-shadow:0 0 0 3px rgba(167,139,250,.25)}

.hp{position:absolute !important; left:-9999px !important; opacity:0 !important; height:0 !important; width:0 !important}

.err{color:var(--err); font-size:.85rem; min-height:1em}
.actions{display:flex; align-items:center; gap:12px; margin-top:10px}
#status{font-size:.95rem}

.site-footer{padding:24px 0; border-top:1px solid rgba(15,23,42,.06); margin-top:30px}
.site-footer small{color:var(--muted)}