/* Tech & AI — focused demo request page */

.demo-section{background:var(--dark);color:var(--cream);padding:clamp(74px,9vw,130px) var(--pad)}
.demo-wrap{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(420px,1.18fr);gap:clamp(44px,8vw,120px);align-items:start;max-width:1240px;margin:0 auto}
.demo-copy{position:sticky;top:120px}
.demo-copy .kicker{color:var(--caramel)}
.demo-copy h2{margin:0 0 24px;font-size:clamp(40px,5.4vw,76px);font-weight:400;line-height:1.2;letter-spacing:-2px}
.demo-copy h2 span{color:var(--caramel)}
.demo-copy>p:not(.kicker){max-width:460px;margin:0;color:#d5d0cb;font-size:16px;line-height:1.9}
.demo-note{display:flex;gap:12px;align-items:flex-start;margin-top:34px;padding-top:22px;border-top:1px solid rgba(237,233,230,.16);color:#9caea8;font-size:13px;line-height:1.8}
.demo-note::before{content:'↗';color:var(--caramel);font:18px var(--en-body);line-height:1.2}
.demo-form{display:grid;gap:18px;padding:clamp(28px,4vw,48px);background:#f6f3f0;color:var(--ink);border:1px solid rgba(237,233,230,.14)}
.demo-form label{display:grid;gap:8px}
.demo-form label>span{font-size:13px;color:#5e544f}
.demo-form input,.demo-form select,.demo-form textarea{width:100%;border:1px solid rgba(92,79,74,.28);background:var(--white);color:var(--ink);padding:13px 15px;border-radius:0;font:14px var(--en-body);outline:none;resize:vertical;transition:border-color .2s ease,box-shadow .2s ease}
.demo-form select{appearance:auto;cursor:pointer}
.demo-form textarea{min-height:120px}
.demo-form input:focus,.demo-form select:focus,.demo-form textarea:focus{border-color:var(--sage);box-shadow:0 0 0 3px rgba(92,118,109,.14)}
.demo-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.demo-form .button{justify-self:start;border:0;cursor:pointer;margin-top:4px}
.demo-form .form-status{min-height:24px;margin:0;color:#5e544f;font-size:13px;line-height:1.6}
.demo-form .form-status.success{color:#2e6b4d}
.demo-form .form-status.error{color:#9a3f35}
.custom-demo-fields[hidden]{display:none}

html[dir="rtl"] .demo-copy{text-align:right}
html[dir="rtl"] .demo-form{text-align:right}
html[dir="rtl"] .demo-note::before{transform:scaleX(-1)}

@media(max-width:850px){
  .demo-wrap{grid-template-columns:1fr;gap:42px}
  .demo-copy{position:static}
  .demo-copy>p:not(.kicker){max-width:680px}
}
@media(max-width:560px){
  .demo-section{padding-top:64px;padding-bottom:72px}
  .demo-form{padding:24px 20px}
  .demo-form .form-row{grid-template-columns:1fr;gap:18px}
  .demo-form .button{width:100%}
}
