/* MAIN LAYOUT */
.demo-wrap{padding:100px 52px 104px;background:var(--bg);position:relative;overflow:hidden;min-height:100vh}
.demo-wrap::before{content:'';position:absolute;width:900px;height:700px;background:radial-gradient(ellipse,rgba(59,130,246,0.07) 0%,transparent 65%);top:-200px;left:-200px;pointer-events:none}
.demo-wrap::after{content:'';position:absolute;width:700px;height:600px;background:radial-gradient(ellipse,rgba(124,58,237,0.06) 0%,transparent 65%);top:0;right:-150px;pointer-events:none}
.demo-inner{max-width:1100px;margin:0 auto}

/* LEFT - INFO */
.demo-info{padding-top:28px}

.demo-h1{font-family:var(--font-display);font-size:clamp(34px,4vw,52px);font-weight:var(--weight-extrabold);line-height:1.08;letter-spacing:var(--tracking-tight);color:var(--ink);margin-bottom:18px}

.demo-sub{font-size:var(--text-2xl);color:var(--ink2);line-height:var(--leading-copy);font-weight:var(--weight-light);margin-bottom:40px}
.demo-features{display:flex;flex-direction:column;gap:14px;margin-bottom:48px}
.demo-feat{display:flex;align-items:flex-start;gap:12px;font-size:var(--text-base);color:var(--ink2);font-weight:var(--weight-light)}
.demo-feat-check{width:20px;height:20px;background:rgba(59,130,246,0.1);border-radius:50%;flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center}
.demo-feat-check::before{content:'';width:10px;height:6px;border-left:2.5px solid #3b82f6;border-bottom:2.5px solid #3b82f6;transform:rotate(-45deg);margin-top:-2px}
.demo-contact{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:20px 22px}
.demo-contact-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--ink3);text-transform:uppercase;letter-spacing:var(--tracking-label);margin-bottom:10px}
.demo-contact-row{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2);margin-bottom:6px}
.demo-contact-row:last-child{margin-bottom:0}
.demo-contact-icon{width:14px;height:14px;flex-shrink:0;position:relative;color:#3b82f6}
.demo-contact-icon.email{border:1.8px solid currentColor;border-radius:2px}
.demo-contact-icon.email::before,.demo-contact-icon.email::after{content:'';position:absolute;top:3px;width:8px;height:1.8px;background:currentColor}
.demo-contact-icon.email::before{left:-1px;transform:rotate(32deg);transform-origin:left center}
.demo-contact-icon.email::after{right:-1px;transform:rotate(-32deg);transform-origin:right center}
.demo-contact-icon.phone::before{content:'';position:absolute;inset:1px;border:1.8px solid currentColor;border-top-color:transparent;border-right-color:transparent;border-radius:3px 0 3px 3px;transform:rotate(-45deg)}
.demo-contact-row a{color:var(--ink2);text-decoration:none;transition:color 0.2s}
.demo-contact-row a:hover{color:#3b82f6}

/* DEMO DETAILS */
.demo-details-kicker{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:#3b82f6;margin-bottom:12px}
.demo-details h2{font-family:var(--font-display);font-size:clamp(28px,3.5vw,42px);font-weight:var(--weight-extrabold);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--ink);margin-bottom:38px}
.demo-answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.demo-answer{background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px 22px}
.demo-answer h3{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--ink);letter-spacing:-0.01em;margin-bottom:10px}
.demo-answer p{font-size:13.5px;color:var(--ink2);line-height:var(--leading-body);font-weight:var(--weight-light)}

@media(max-width:900px){
  .demo-wrap{padding:100px 24px 72px}
  .demo-answer-grid{grid-template-columns:1fr}
}