/* Stylish Features & Specs (namespaced to avoid conflicts) */
.qtw-section{}
.qtw-grid{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:960px){ .qtw-grid{ grid-template-columns:1fr } }
.qtw-card{ background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:16px; box-shadow:0 6px 18px rgba(2,6,23,.05) }
.qtw-card h3{ margin:.2em 0 .3em; font-size:1.05rem }
.qtw-card p{ color:#475569; font-size:.95rem; line-height:1.6 }
.qtw-icon{ width:36px; height:36px; border-radius:10px; background:#0b1220; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; box-shadow:0 10px 20px rgba(2,6,23,.18); margin-bottom:8px }

/* Spec table */
.qtw-spec{ background:#fff; border:1px solid #e2e8f0; border-radius:16px; overflow:hidden; }
.qtw-spec table{ width:100%; border-collapse:separate; border-spacing:0 }
.qtw-spec th, .qtw-spec td{ padding:10px 12px; vertical-align:top; }
.qtw-spec th{ width:28%; background:#f8fafc; text-align:left; color:#0f172a; font-weight:700 }
.qtw-spec tr+tr th, .qtw-spec tr+tr td{ border-top:1px solid #e2e8f0 }
.qtw-note{ color:#64748b; font-size:.9rem; margin-top:8px }

/* swap : two-image crossfade with caption line above */
.qtfade{ --interval:5s; }
.qtfade .capline{ position:relative; min-height:28px; margin:4px 0 8px; display:flex; justify-content:center }
.qtfade .capline .cap{ position:absolute; left:0; padding:6px 10px; border-radius:10px; background:#0b1220; color:#fff; font-weight:700; font-size:.95rem; opacity:0; animation: qtSwap calc(var(--interval,5s)*2) infinite ease-in-out }
.qtfade .capline .cap:nth-child(2){ animation-delay: var(--interval,5s) }
.qtfade .swap{ position:relative; border-radius:14px; overflow:hidden; background:#0b1220; aspect-ratio:16/9 }
.qtfade .swap img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .6s ease; animation: qtSwap calc(var(--interval,5s)*2) infinite ease-in-out }
.qtfade .swap img:nth-child(2){ animation-delay: var(--interval,5s) }
@keyframes qtSwap{ 0%,45%{opacity:1} 50%,95%{opacity:0} 100%{opacity:1} }
@media (prefers-reduced-motion: reduce){
  .qtfade .swap img, .qtfade .capline .cap{ animation:none !important; opacity:1 !important }
  .qtfade .swap img:nth-child(n+2){ display:none }
}

/* inline-contact (screenshot-like) */
.inline-contact{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:0; margin:12px 0 0; box-shadow:0 2px 6px rgba(0,0,0,.04); overflow:hidden }
.inline-contact header{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; background:#0b1220; color:#fff }
.inline-contact h3{ margin:.2em 0; font-size:1.05rem; font-weight:700 }
.inline-contact .body{ padding:16px }
.inline-contact form{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.inline-contact form .full{ grid-column:1 / -1 }
.inline-contact label{ display:block; font-weight:600; color:#334155; margin-bottom:6px }
.inline-contact input, .inline-contact textarea{ width:100%; padding:10px; border:1px solid #cbd5e1; border-radius:10px }
.inline-contact textarea{ min-height:140px }
.inline-contact .actions{ display:flex; gap:12px; align-items:center; margin-top:8px }
.inline-contact .close{ color:#fff; background:transparent; border:none; font-size:20px; line-height:1; padding:6px; width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; opacity:.9 }
.inline-contact .close:hover{ opacity:1; background:rgba(255,255,255,.12) }
.inline-contact .close:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.reqmark{ color:#dc2626; font-weight:700; margin-left:.25em }
@media (max-width:720px){ .inline-contact form{ grid-template-columns:1fr } }