/* SALA — Demo / contact page */
.demo-wrap{ max-width:1140px; margin:0 auto; padding:0 24px; }
.demo-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:start; padding:64px 0 100px; }

/* left value panel */
.dleft .eyebrow{ margin-bottom:18px; }
.dleft .h1{ max-width:14ch; }
.dleft .lead{ margin-top:18px; max-width:42ch; }
.dnext{ margin-top:38px; display:flex; flex-direction:column; gap:20px; }
.dstep{ display:flex; gap:16px; align-items:flex-start; }
.dstep .sn{ width:30px; height:30px; border-radius:9px; background:var(--blue-tint); color:var(--blue-700); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; flex:none; }
.dstep .st{ font-weight:600; font-size:15.5px; }
.dstep .sd{ font-size:14px; color:var(--muted); margin-top:3px; line-height:1.45; }
.dproof{ margin-top:38px; padding-top:28px; border-top:1px solid var(--line); display:flex; gap:40px; }

/* right card */
.dcard{ background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lg); overflow:hidden; }
.dtabs{ display:flex; padding:6px; gap:4px; background:var(--bg-soft); border-bottom:1px solid var(--line); }
.dtab{ flex:1; height:42px; border-radius:12px; border:0; background:transparent; font-family:var(--font); font-size:14.5px; font-weight:600; color:var(--muted); cursor:pointer; transition:all .16s; }
.dtab.on{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }
.dbody{ padding:30px; }
.dpane{ display:none; }
.dpane.on{ display:block; }

.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:7px; }
.field .req{ color:var(--blue); }
.inp{ width:100%; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:11px; font-family:var(--font);
  font-size:15px; color:var(--ink); background:#fff; transition:border-color .15s, box-shadow .15s; }
textarea.inp{ height:auto; padding:12px 14px; resize:vertical; min-height:84px; line-height:1.5; }
.inp:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,75,208,.12); }
.inp::placeholder{ color:var(--muted-2); }
.inp.bad{ border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.1); }
.field .err{ font-size:12px; color:#ef4444; margin-top:6px; display:none; }
.field.bad .err{ display:block; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.seg{ display:flex; flex-wrap:wrap; gap:8px; }
.seg .opt{ padding:9px 14px; border:1px solid var(--line); border-radius:999px; font-size:13.5px; font-weight:500; color:var(--ink-2); cursor:pointer; transition:all .15s; user-select:none; }
.seg .opt:hover{ border-color:var(--blue-tint-2); }
.seg .opt.on{ background:var(--blue); color:#fff; border-color:var(--blue); }
.dsubmit{ width:100%; margin-top:8px; }
.fineprint{ font-size:12px; color:var(--muted-2); text-align:center; margin-top:14px; line-height:1.5; }

/* success */
.dsuccess{ display:none; flex-direction:column; align-items:center; text-align:center; padding:30px 10px; }
.dsuccess.on{ display:flex; }
.dsuccess .check{ width:64px; height:64px; border-radius:50%; background:#dcfce7; color:#16a34a; display:flex; align-items:center; justify-content:center; font-size:30px; margin-bottom:20px; }
.dsuccess h3{ font-size:22px; }
.dsuccess p{ color:var(--muted); margin-top:10px; max-width:36ch; line-height:1.5; }

@media(max-width:880px){ .demo-grid{ grid-template-columns:1fr; gap:40px; padding:44px 0 70px; } .dleft .h1{ max-width:none; } }