/* demo-page.css — Démonstration page (reuses styles.css tokens & vocabulary) */

/* ---------- compact page hero (shared dot-grid vocabulary) ---------- */
.page-hero{position:relative;padding:120px 0 56px;overflow:hidden;text-align:center}
.page-hero .hero-bg{position:absolute;inset:0;z-index:-1}
.page-hero .hero-bg::before{content:'';position:absolute;top:-300px;left:50%;transform:translateX(-50%);
  width:1000px;height:700px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(107,124,255,.2),rgba(60,80,224,.05) 55%,transparent 72%)}
.page-hero .dots{position:absolute;inset:0;
  background-image:radial-gradient(circle at center,rgba(15,23,41,.07) 1.3px,transparent 1.5px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000,transparent 78%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000,transparent 78%)}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;letter-spacing:-.035em;max-width:16ch;margin:18px auto}
.page-hero .lead{max-width:620px;margin:0 auto}
.page-hero .grad{background:linear-gradient(110deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- demo request form ---------- */
.demo-form-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:start}
.demo-form-left{padding-top:6px}
.demo-form-left h2{margin-bottom:16px}
.demo-form-left .lead{margin-bottom:26px}
.demo-checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.demo-checks li{display:flex;align-items:flex-start;gap:13px;font-size:15.5px;color:var(--text)}
.demo-checks .dc{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px;
  background:rgba(22,163,74,.12);color:#16a34a}
.demo-checks .dc svg{width:15px;height:15px;stroke-width:3}
.demo-checks b{display:block;font-weight:700;color:var(--ink);font-size:15.5px;margin-bottom:2px}
.demo-checks span{font-size:13.5px;color:var(--muted);line-height:1.5}

.demo-form-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--shadow)}
.demo-form-card h3{font-size:19px;margin-bottom:4px}
.demo-form-card .form-sub{font-size:13.5px;color:var(--muted);margin-bottom:22px}
.demo-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.demo-field{margin-bottom:15px;display:flex;flex-direction:column}
.demo-field label{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.demo-field label .opt{color:var(--muted);font-weight:500}
.demo-field input,.demo-field textarea{width:100%;border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;font-family:inherit;font-size:15px;color:var(--text);background:#fff;line-height:1.4;
  transition:border-color .15s,box-shadow .15s}
.demo-field input::placeholder,.demo-field textarea::placeholder{color:#aab4c8}
.demo-field input:focus,.demo-field textarea:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(60,80,224,.13)}
.demo-field textarea{resize:vertical;min-height:84px}
.demo-field.err input,.demo-field.err textarea{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.1)}
.demo-field-err{color:#e5484d;font-size:12px;margin-top:6px;display:flex;align-items:center;gap:5px}
.demo-form-card .btn{width:100%;margin-top:6px}
.demo-form-note{text-align:center;font-size:12.5px;color:var(--muted);margin-top:14px;
  display:flex;align-items:center;justify-content:center;gap:7px}
.demo-form-note svg{width:14px;height:14px;color:#16a34a}

/* whatsapp direct line */
.demo-wa{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px;
  padding-top:24px;border-top:1px solid var(--line)}
.demo-wa p{font-size:14px;color:var(--muted);font-weight:500}
.btn-wa{background:#25D366;color:#fff;box-shadow:0 8px 22px -8px rgba(37,211,102,.6)}
.btn-wa:hover{background:#1eb858;transform:translateY(-1px) scale(1.02);box-shadow:0 14px 30px -10px rgba(37,211,102,.7)}

/* success state */
.demo-success{text-align:center;padding:26px 12px}
.demo-success .ds-ic{width:72px;height:72px;border-radius:50%;margin:0 auto 22px;display:grid;place-items:center;
  background:rgba(22,163,74,.12);color:#16a34a;animation:dsPop .5s cubic-bezier(.16,1.2,.4,1) both}
.demo-success .ds-ic svg{width:38px;height:38px;stroke-width:2.4}
@keyframes dsPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.demo-success h3{font-size:22px;margin-bottom:10px}
.demo-success p{font-size:15px;color:var(--muted);max-width:340px;margin:0 auto 24px;line-height:1.55}

/* ---------- testimonial strip ---------- */
.demo-tstrip{max-width:780px;margin:0 auto;text-align:center}
.demo-tstrip .demo-tstars{display:inline-flex;gap:4px;color:#f59e0b;margin-bottom:22px}
.demo-tquote{font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:600;color:var(--ink);
  line-height:1.42;letter-spacing:-.015em;margin-bottom:26px;text-wrap:balance}
.demo-tquote .mk{color:var(--primary)}
.demo-twho{display:inline-flex;align-items:center;gap:14px}
.demo-tav{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);overflow:hidden;padding:7px;flex:none}
.demo-tav-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.demo-twho-text{text-align:left}
.demo-tname{font-size:15px;font-weight:700;color:var(--ink)}
.demo-trole{font-size:13.5px;color:var(--muted)}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .demo-form-grid{grid-template-columns:1fr;gap:40px}
  .page-hero{padding:104px 0 48px}
}
@media(max-width:680px){
  .demo-form-row{grid-template-columns:1fr}
  .demo-form-card{padding:24px}
}