:root{
  --bg:#0b0d13; --bg-2:#0f131c; --card:#151a27;
  --ink:#eef2ff; --muted:#aab3cf;
  --brand:#6c83ff; --accent:#1fd4a8;
  --border:rgba(255,255,255,.10);
  --container:1240px; --radius:16px;
  --fz-base:16.5px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, ui-sans-serif, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:var(--fz-base); line-height:1.65; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 75% -150px, rgba(120,140,255,.15), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.center{text-align:center}
.muted{color:var(--muted)}
/* Header */
.nav{position:sticky;top:0;z-index:60;background:rgba(11,13,19,.55);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-inner-center{display:flex;align-items:center;justify-content:center;min-height:72px}
.brand-center{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.brand-logo{height:60px;width:auto;display:block}
.brand-name{font-weight:900;color:#fff;font-size:clamp(24px,5.2vw,36px)}
/* Hero */
.hero{padding:72px 0 40px}
.hero-inner{display:grid;place-items:center}
.hero-copy{max-width:880px;margin:0 auto;text-align:center}
.hero-copy h1{font-size:clamp(38px,8.5vw,64px);line-height:1.08;margin:0 0 8px;font-weight:900}
.sub{color:var(--muted);font-size:clamp(18px,2.8vw,22px);line-height:1.7;max-width:64ch;margin:0 auto 24px}
.cta-row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;border-radius:14px;font-weight:800;padding:18px 26px;border:1px solid transparent;box-shadow:0 10px 30px rgba(95,140,255,.18)}
.btn-lg{font-size:clamp(16px,2.8vw,18px)}
.btn-primary{background:var(--brand);color:#0b0d13;border-color:rgba(108,131,255,.6)}
.btn-secondary{background:var(--accent);color:#072015;border-color:rgba(31,212,168,.6)}
/* Sections */
.section{padding:72px 0}
.section.alt{background:rgba(255,255,255,.03);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section h2{margin:0 0 20px;font-size:clamp(24px,5.2vw,38px)}
/* Chat card */
#webchat-shell{display:flex;justify-content:center;align-items:center;min-height:560px}
#webchat-container{
  position:relative;width:100%;max-width:900px;height:560px;
  background:#0b0d13;border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
@media (max-width:1024px){ #webchat-container{ height:500px; max-width:820px; } }
@media (max-width:640px){  #webchat-container{ height:520px; max-width:95%; } }
/* Grid */
.grid-3{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:880px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.tile{background:var(--card);border:1px solid var(--border);padding:20px;border-radius:var(--radius)}
/* Contact */
.contact-form{max-width:700px;margin:0 auto}
.field{display:flex;flex-direction:column;margin-bottom:16px}
.label{font-weight:700;color:#d7defa;margin-bottom:6px}
input,textarea{
  width:100%;padding:14px;border-radius:14px;border:1px solid var(--border);
  background:#0d1018;color:#fff;font-size:1.05rem;
}
.contact-email-small{margin-top:16px;color:#fff}
.status{margin-top:12px;color:#d7defa}
/* Footer */
.footer{border-top:1px solid var(--border);padding:20px 0;text-align:center;color:#aab3cf}