/* =========================================================
   NVIDIA DGX Spark – ANT PC themed corporate modal
   Works with Bootstrap 4 and 5. Add class "dgx-modal" on .modal
   Theme tokens (black / white / grey, red accent, Roboto) – tweak here
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

.dgx-modal{
  --dgx-black:#0b0b0c;          /* ANT PC primary black */
  --dgx-charcoal:#161515;       /* dark panels / tabs */
  --dgx-red:#e53935;            /* ANT PC accent */
  --dgx-red-dk:#c62828;
  --dgx-text:#b4b4ba;           /* secondary text on dark */
  --dgx-line:rgba(255,255,255,.14);
  font-family:'Roboto','Segoe UI',Arial,sans-serif;
}

/* ---------- Dialog ---------- */
.dgx-modal .modal-dialog{max-width:1000px;width:calc(100% - 1rem)}
.dgx-modal .modal-content{
  position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:16px;
  background:var(--dgx-black);color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.55)}

/* ---------- Header: only the close button ---------- */
.dgx-modal .modal-header{position:absolute;top:16px;right:16px;z-index:5;padding:0;border:0;background:none;display:block}
.dgx-modal .modal-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dgx-modal .btn-close,.dgx-modal .close{
  position:relative;display:block;width:38px;height:38px;margin:0;padding:0;border:1px solid var(--dgx-line);border-radius:50%;
  opacity:1;filter:none;float:none;text-shadow:none;font-size:0;color:transparent;
  background:rgba(255,255,255,.06) none;cursor:pointer;transition:background-color .2s,border-color .2s}
.dgx-modal .btn-close::before,.dgx-modal .btn-close::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;background:#fff}
.dgx-modal .btn-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.dgx-modal .btn-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.dgx-modal .btn-close:hover{background-color:var(--dgx-red);border-color:var(--dgx-red);opacity:1}
.dgx-modal .btn-close:focus{outline:none;box-shadow:none}
.dgx-modal .btn-close:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- Layout: text | product panel ---------- */
.dgx-modal .modal-body{
  padding:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:560px}

/* ---------- Text column ---------- */
.dgx-copy{padding:52px 44px 46px 56px;display:flex;flex-direction:column;justify-content:center}
.dgx-logo{height:32px;width:auto;align-self:flex-start;display:block}
.dgx-badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--dgx-line);background:rgba(255,255,255,.05);font-size:12.5px;font-weight:500;letter-spacing:.2px;color:#fff}
.dgx-badge i{width:7px;height:7px;border-radius:50%;background:var(--dgx-red);box-shadow:0 0 0 3px rgba(229,57,53,.25)}
.dgx-title{margin:18px 0 0;font-size:clamp(2.9rem,7.6vw,4.75rem);line-height:1;font-weight:900;letter-spacing:-1.5px;color:#fff}
.dgx-title::after{content:"";display:block;width:64px;height:4px;margin-top:16px;border-radius:2px;background:#77b900;}
.dgx-tag{margin:20px 0 0;font-size:1.3rem;font-weight:500;line-height:1.3;color:#fff}
.dgx-sub{margin:8px 0 0;max-width:410px;font-size:.9rem;line-height:1.65;color:var(--dgx-text)}

/* spec strip */
.dgx-chips{display:flex;margin:24px 0 0;max-width:450px;border-top:1px solid var(--dgx-line);border-bottom:1px solid var(--dgx-line)}
.dgx-chip{flex:1;padding:14px 12px 14px 0}
.dgx-chip + .dgx-chip{padding-left:16px;border-left:1px solid var(--dgx-line)}
.dgx-chip b{display:block;font-size:1.2rem;font-weight:700;line-height:1.15;color:#fff;white-space:nowrap}
.dgx-chip span{display:block;margin-top:3px;font-size:.72rem;line-height:1.3;color:var(--dgx-text)}

/* buttons */
.dgx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.dgx-btn{
  display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 28px;border-radius:6px;
  font-size:.95rem;font-weight:700;letter-spacing:.3px;text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.dgx-btn:hover{text-decoration:none}
.dgx-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dgx-btn-primary{background:#77b900;color:#fff;border:1px solid #77b900;}
.dgx-btn-primary:hover{background:#fff;border-color:#ccc;color:#000;transform:translateY(-1px)}
.dgx-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.dgx-btn-ghost:hover{background:#fff;border-color:#fff;color:var(--dgx-black)}

/* ---------- Product panel ---------- */
.dgx-visualwrap{position:relative;min-height:100%}
.dgx-visual{
  position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(62% 54% at 50% 46%, #3a3a40 0%, rgba(58,58,64,0) 100%),
    linear-gradient(180deg,#1d1d20 0%,#0f0f11 100%);
  border-left:1px solid rgba(255,255,255,.07)}
.dgx-visual::before{ /* faint grid */
  content:"";position:absolute;inset:0;opacity:.7;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 46%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 46%,#000,transparent)}
.dgx-stage{position:absolute;inset:0 0 138px}
.dgx-product{
  position:absolute;left:50%;top:50%;width:100%;max-width:none;height:auto;transform:translate(-50%,-50%);
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
  filter:drop-shadow(0 28px 24px rgba(0,0,0,.6))}
.dgx-product.is-active{opacity:1;visibility:visible}
.dgx-thumbs{position:absolute;left:0;right:0;bottom:76px;display:flex;justify-content:center;gap:10px}
.dgx-thumb{
  width:84px;height:56px;padding:0;overflow:hidden;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--dgx-line);transition:border-color .2s,background-color .2s,transform .2s}
.dgx-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.65;transition:opacity .2s}
.dgx-thumb:hover{background:rgba(255,255,255,.1)}
.dgx-thumb:hover img{opacity:1}
.dgx-thumb.is-active{ border-color: #77b900; background: rgb(119 185 0 / 13%);}
.dgx-thumb.is-active img{opacity:1}
.dgx-thumb:focus{outline:none}
.dgx-thumb:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dgx-powered{
  position:absolute;left:26px;right:26px;bottom:24px;display:flex;align-items:center;gap:10px;padding-top:16px;
  border-top:1px solid var(--dgx-line);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dgx-text)}
.dgx-powered i{flex:none;width:8px;height:8px;border-radius:2px;background:#77b900;}

/* ---------- Tablet / mobile ---------- */
@media (max-width:991.98px){
  .dgx-modal .modal-body{grid-template-columns:1fr;min-height:0}
  .dgx-visualwrap{order:-1;min-height:0}
  .dgx-visual{position:relative;inset:auto;height:clamp(290px,78vw,390px);border-left:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .dgx-stage{inset:0 0 112px}
  .dgx-thumbs{bottom:50px}
  .dgx-thumb{width:72px;height:50px}
  .dgx-powered{left:20px;right:20px;bottom:14px;padding-top:10px;font-size:.62rem}
  .dgx-copy{padding:26px 24px 28px}
  .dgx-sub{max-width:none}
  .dgx-chips{max-width:none}
}
@media (max-width:575.98px){
  .dgx-modal .modal-dialog{width:calc(100% - 1rem);margin:.5rem auto}
  .dgx-modal .modal-header{top:12px;right:12px}
  .dgx-modal .btn-close,.dgx-modal .close{width:34px;height:34px}
  .dgx-copy{padding:22px 18px 22px}
  .dgx-logo{height:28px}
  .dgx-tag{font-size:1.1rem;margin-top:16px}
  .dgx-sub{font-size:.8125rem}
  .dgx-chip b{font-size:1rem}
  .dgx-chip span{font-size:.64rem}
  .dgx-chip + .dgx-chip{padding-left:10px}
  .dgx-cta{flex-direction:column;gap:10px}
  .dgx-btn{width:100%;height:48px}
}
@media (prefers-reduced-motion:reduce){.dgx-btn,.dgx-modal .btn-close,.dgx-product,.dgx-thumb{transition:none}}


  /* =========================================================
   MSI XpertStation WS300 – ANT PC themed corporate modal
   Works with Bootstrap 4 and 5. Add class "ws300-modal" on .modal
   Theme tokens (black / white / grey, red accent, Roboto) – tweak here
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

.ws300-modal{
  --ws300-black:#0b0b0c;          /* ANT PC primary black */
  --ws300-charcoal:#161515;       /* dark panels / tabs */
  --ws300-red:#e53935;            /* ANT PC accent */
  --ws300-red-dk:#c62828;
  --ws300-text:#b4b4ba;           /* secondary text on dark */
  --ws300-line:rgba(255,255,255,.14);
  font-family:'Roboto','Segoe UI',Arial,sans-serif;
}

/* ---------- Dialog ---------- */
.ws300-modal .modal-dialog{max-width:1000px;width:calc(100% - 1rem)}
.ws300-modal .modal-content{
  position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:16px;
  background:var(--ws300-black);color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.55)}

/* ---------- Header: only the close button ---------- */
.ws300-modal .modal-header{position:absolute;top:16px;right:16px;z-index:5;padding:0;border:0;background:none;display:block}
.ws300-modal .modal-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ws300-modal .btn-close,.ws300-modal .close{
  position:relative;display:block;width:38px;height:38px;margin:0;padding:0;border:1px solid var(--ws300-line);border-radius:50%;
  opacity:1;filter:none;float:none;text-shadow:none;font-size:0;color:transparent;
  background:rgba(255,255,255,.06) none;cursor:pointer;transition:background-color .2s,border-color .2s}
.ws300-modal .btn-close::before,.ws300-modal .btn-close::after{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;background:#fff}
.ws300-modal .btn-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.ws300-modal .btn-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.ws300-modal .btn-close:hover{background-color:var(--ws300-red);border-color:var(--ws300-red);opacity:1}
.ws300-modal .btn-close:focus{outline:none;box-shadow:none}
.ws300-modal .btn-close:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- Layout: text | product panel ---------- */
.ws300-modal .modal-body{
  padding:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:560px}

/* ---------- Text column ---------- */
.ws300-copy{padding:52px 44px 46px 56px;display:flex;flex-direction:column;justify-content:center}
.ws300-badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:0;padding:6px 14px;border-radius:999px;
  border:1px solid var(--ws300-line);background:rgba(255,255,255,.05);font-size:12.5px;font-weight:500;letter-spacing:.2px;color:#fff}
.ws300-badge i{width:7px;height:7px;border-radius:50%;background:var(--ws300-red);box-shadow:0 0 0 3px rgba(229,57,53,.25)}
.ws300-eyebrow{margin:20px 0 0;font-size:1rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ws300-text)}
.ws300-title{margin:4px 0 0;font-size:clamp(3.4rem,9vw,5.5rem);line-height:.95;font-weight:900;letter-spacing:-2px;color:#fff}
.ws300-title::after{content:"";display:block;width:64px;height:4px;margin-top:16px;border-radius:2px;background:var(--ws300-red)}
.ws300-tag{margin:20px 0 0;font-size:1.3rem;font-weight:500;line-height:1.3;color:#fff}
.ws300-sub{margin:8px 0 0;max-width:410px;font-size:.9rem;line-height:1.65;color:var(--ws300-text)}

/* spec strip */
.ws300-chips{display:flex;margin:24px 0 0;max-width:450px;border-top:1px solid var(--ws300-line);border-bottom:1px solid var(--ws300-line)}
.ws300-chip{flex:1;padding:14px 12px 14px 0}
.ws300-chip + .ws300-chip{padding-left:16px;border-left:1px solid var(--ws300-line)}
.ws300-chip b{display:block;font-size:1.2rem;font-weight:700;line-height:1.15;color:#fff;white-space:nowrap}
.ws300-chip span{display:block;margin-top:3px;font-size:.72rem;line-height:1.3;color:var(--ws300-text)}

/* buttons */
.ws300-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.ws300-btn{
  display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 28px;border-radius:6px;
  font-size:.95rem;font-weight:700;letter-spacing:.3px;text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.ws300-btn:hover{text-decoration:none}
.ws300-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ws300-btn-primary{background:var(--ws300-red);color:#fff;border:1px solid var(--ws300-red)}
.ws300-btn-primary:hover{background:var(--ws300-red-dk);border-color:var(--ws300-red-dk);color:#fff;transform:translateY(-1px)}
.ws300-btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.ws300-btn-ghost:hover{background:#fff;border-color:#fff;color:var(--ws300-black)}

/* ---------- Product panel ---------- */
.ws300-visualwrap{position:relative;min-height:100%}
.ws300-visual{
  position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(64% 56% at 50% 46%, #54545c 0%, rgba(84,84,92,0) 100%),
    linear-gradient(180deg,#1d1d20 0%,#0f0f11 100%);
  border-left:1px solid rgba(255,255,255,.07)}
.ws300-visual::before{ /* faint grid */
  content:"";position:absolute;inset:0;opacity:.7;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 46%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 46%,#000,transparent)}
.ws300-stage{position:absolute;inset:40px 30px 88px}
.ws300-product{
  display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;
  filter:drop-shadow(0 26px 22px rgba(0,0,0,.65)) drop-shadow(0 0 1px rgba(255,255,255,.35))}
.ws300-powered{
  position:absolute;left:26px;right:26px;bottom:24px;display:flex;align-items:center;gap:10px;padding-top:16px;
  border-top:1px solid var(--ws300-line);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ws300-text)}
.ws300-powered i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--ws300-red)}

/* ---------- Tablet / mobile ---------- */
@media (max-width:991.98px){
  .ws300-modal .modal-body{grid-template-columns:1fr;min-height:0}
  .ws300-visualwrap{order:-1;min-height:0}
  .ws300-visual{position:relative;inset:auto;height:clamp(250px,70vw,340px);border-left:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .ws300-stage{inset:28px 22px 56px}
  .ws300-powered{left:20px;right:20px;bottom:14px;padding-top:10px;font-size:.62rem}
  .ws300-copy{padding:26px 24px 28px}
  .ws300-sub{max-width:none}
  .ws300-chips{max-width:none}
}
@media (max-width:575.98px){
  .ws300-modal .modal-dialog{width:calc(100% - 1rem);margin:.5rem auto}
  .ws300-modal .modal-header{top:12px;right:12px}
  .ws300-modal .btn-close,.ws300-modal .close{width:34px;height:34px}
  .ws300-copy{padding:22px 18px 22px}
    .ws300-tag{font-size:1.1rem;margin-top:16px}
  .ws300-sub{font-size:.8125rem}
  .ws300-chip b{font-size:1rem}
  .ws300-chip span{font-size:.64rem}
  .ws300-chip + .ws300-chip{padding-left:10px}
  .ws300-cta{flex-direction:column;gap:10px}
  .ws300-btn{width:100%;height:48px}
}
@media (prefers-reduced-motion:reduce){.ws300-btn,.ws300-modal .btn-close,.ws300-product{transition:none}}