/* Manufacturing Copilot — Demo Download Page */

.demo-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 84px;
  background:
    radial-gradient(circle at 82% 20%, rgba(45,110,166,.28), transparent 34%),
    linear-gradient(135deg, #061321 0%, #0B1E36 56%, #123B67 100%);
  color: #fff;
}
.demo-grid-pattern {
  position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, black, transparent 92%);
}
.demo-hero-grid {
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:64px; align-items:center;
}
.demo-copy h1 {
  max-width:780px; margin:18px 0 20px;
  font-size:clamp(2.65rem,5.5vw,5rem); line-height:.98; letter-spacing:-.055em;
}
.demo-copy h1 span { color:#68B7FF; }
.demo-copy > p { max-width:760px; color:#CBD8E8; font-size:1.08rem; line-height:1.75; }
.demo-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.demo-download { box-shadow:0 16px 34px rgba(37,99,235,.25); }
.demo-proof { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.demo-proof span {
  padding:8px 12px; border:1px solid rgba(255,255,255,.15);
  border-radius:999px; color:#D7E6F5; background:rgba(255,255,255,.045);
  font-size:.82rem;
}
.login-card {
  padding:28px; border:1px solid rgba(139,201,241,.34); border-radius:20px;
  background:rgba(8,28,50,.78); backdrop-filter:blur(16px);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.login-badge {
  display:inline-flex; padding:6px 10px; border-radius:999px;
  background:#DCEEFF; color:#0B4B83; font-size:.72rem; font-weight:900; letter-spacing:.08em;
}
.login-card h2 { margin:16px 0 8px; font-size:1.65rem; }
.login-card > p { color:#B9CAE0; line-height:1.6; }
.credential {
  margin-top:14px; padding:14px 16px; border-radius:12px;
  background:#fff; color:#0B1E36;
}
.credential span { display:block; color:#64748B; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.credential strong { display:block; margin-top:3px; font-size:1.12rem; }
.credential-note { margin:16px 0 0 !important; font-size:.82rem; }

.demo-section { padding:76px 0; background:#fff; }
.demo-section-soft { background:#F5F8FC; }
.demo-section-heading { max-width:760px; margin-bottom:34px; }
.demo-section-heading h2, .demo-two-column h2, .demo-cta h2 {
  margin:.35rem 0 .75rem; color:#0B1E36; font-size:clamp(2rem,4vw,3.15rem); line-height:1.05; letter-spacing:-.04em;
}
.demo-section-heading > p:last-child { color:#64748B; line-height:1.7; }

.demo-feature-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.demo-feature-grid article {
  padding:24px; border:1px solid #DCE5EF; border-radius:16px; background:#fff;
  box-shadow:0 8px 28px rgba(15,35,58,.055);
}
.demo-feature-grid article > span {
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:#E7F2FF; color:#1F63B7; font-weight:900;
}
.demo-feature-grid h3 { margin:16px 0 8px; color:#0B1E36; }
.demo-feature-grid p { margin:0; color:#64748B; line-height:1.6; }

.demo-two-column {
  display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:start;
}
.install-steps { list-style:none; padding:0; margin:28px 0 0; display:grid; gap:12px; }
.install-steps li {
  display:grid; grid-template-columns:135px 1fr; gap:16px; padding:16px 18px;
  border:1px solid #DEE7F0; border-radius:12px; background:#fff;
}
.install-steps b { color:#1D5FA8; }
.install-steps span { color:#526579; }
.requirements-card {
  padding:28px; border-radius:18px; background:#0B1E36; color:#fff;
  box-shadow:0 20px 45px rgba(7,21,35,.16);
}
.requirements-card h2 { color:#fff; font-size:2rem; }
.requirements-card dl { margin:20px 0 0; }
.requirements-card dl div { display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.requirements-card dt { color:#91BEE4; font-weight:800; }
.requirements-card dd { margin:0; text-align:right; color:#E8F1FA; }

.demo-safety { background:#EDF4FB; }
.safety-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.safety-grid div { padding:20px; border-radius:14px; border:1px solid #CFE0EF; background:#fff; }
.safety-grid strong { color:#1D5FA8; font-size:.78rem; letter-spacing:.05em; }
.safety-grid p { margin:8px 0 0; color:#5B6F83; line-height:1.55; }

.demo-cta { padding:64px 0; background:linear-gradient(135deg,#071523,#10345A); color:#fff; }
.demo-cta-inner { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.demo-cta h2 { color:#fff; max-width:720px; }
.demo-cta p { color:#C2D3E5; max-width:720px; }
.demo-cta .demo-actions { flex-shrink:0; }

@media (max-width: 980px) {
  .demo-hero-grid, .demo-two-column { grid-template-columns:1fr; }
  .demo-feature-grid { grid-template-columns:repeat(2,1fr); }
  .safety-grid { grid-template-columns:repeat(2,1fr); }
  .demo-cta-inner { display:block; }
}
@media (max-width: 640px) {
  .demo-hero { padding:68px 0 58px; }
  .demo-feature-grid, .safety-grid { grid-template-columns:1fr; }
  .install-steps li { grid-template-columns:1fr; gap:4px; }
  .requirements-card dl div { display:block; }
  .requirements-card dd { margin-top:4px; text-align:left; }
}