/* =============================================================
   GOLDPRIME GAME — Xometry-inspired design extensions
   Built on top of style.css tokens. Loaded after style.css.
   Palette: navy/near-black + gold (#F5B301) + neon violet (#A78BFA)
   + cyan accent (#22D3EE).
   ============================================================= */

/* ---- extra tokens ---- */
:root{
  --navy:#0B1020;
  --navy-2:#161E2E;
  --navy-3:#1F2A44;
  --gold:#F5B301;
  --violet:#A78BFA;
  --cyan:#22D3EE;
  --radius-lg:20px;
  --shadow:0 18px 50px rgba(11,16,32,.12);
  --shadow-sm:0 8px 22px rgba(11,16,32,.08);
  --grad-gold:linear-gradient(135deg,#F5B301,#C9970A);
  --grad-violet:linear-gradient(135deg,#A78BFA,#7C5CFC);
  --grad-navy:linear-gradient(135deg,#0B1020 0%,#1F2A44 100%);
}

/* ===================== DARK SECTION ===================== */
.dark-sec{background:var(--grad-navy);color:#E5EAF5;position:relative;overflow:hidden;}
.dark-sec::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(640px 320px at 12% -10%,rgba(167,139,250,.20),transparent 60%),
    radial-gradient(560px 300px at 92% 10%,rgba(34,211,238,.16),transparent 60%);
  pointer-events:none;
}
.dark-sec .section-title,.dark-sec h2{color:#fff;}
.dark-sec .section-sub,.dark-sec p{color:#B9C2DA;}
.dark-sec .eyebrow{color:var(--gold);}

/* ===================== CAPABILITIES GRID ===================== */
.cap-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;
}
.cap-card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px;position:relative;overflow:hidden;transition:.25s;
  box-shadow:var(--shadow-sm);
}
.cap-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad-gold);opacity:.9;
}
.cap-card:nth-child(2)::before{background:linear-gradient(135deg,#22D3EE,#0E7490);}
.cap-card:nth-child(3)::before{background:var(--grad-violet);}
.cap-card:nth-child(4)::before{background:linear-gradient(135deg,#FB923C,#C9970A);}
.cap-card:nth-child(5)::before{background:linear-gradient(135deg,#34D399,#0E7490);}
.cap-card:nth-child(6)::before{background:linear-gradient(135deg,#F87171,#C9970A);}
.cap-card:nth-child(7)::before{background:linear-gradient(135deg,#60A5FA,#A78BFA);}
.cap-card:nth-child(8)::before{background:linear-gradient(135deg,#FBBF24,#F87171);}
.cap-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.cap-ico{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  font-size:26px;background:var(--primary-soft);margin-bottom:14px;
}
.cap-card h3{font-size:18px;margin:0 0 10px;color:var(--ink);}
.cap-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;}
.cap-card li{font-size:14px;color:var(--text);display:flex;gap:8px;align-items:flex-start;}
.cap-card li::before{content:"▹";color:var(--primary-dark);font-weight:700;}

/* ===================== HERO (enhanced, Xometry-like) ===================== */
.hero-x{
  position:relative;background:var(--grad-navy);color:#fff;overflow:hidden;
  padding:64px 0 56px;
}
.hero-x::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(700px 360px at 85% -5%,rgba(167,139,250,.28),transparent 60%),
    radial-gradient(620px 340px at 5% 110%,rgba(34,211,238,.18),transparent 60%);
}
.hero-x .hero-inner{position:relative;z-index:2;text-align:left;}
.hero-x h1{
  font-size:clamp(32px,5vw,54px);line-height:1.08;margin:14px 0 16px;color:#fff;
}
.hero-x h1 .hl{
  background:linear-gradient(135deg,#F5B301,#FBBF24);-webkit-background-clip:text;
  background-clip:text;color:transparent;
}
.hero-x .lead{font-size:18px;color:#C7D0E6;max-width:680px;}
.hero-x .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.hero-chip{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#E5EAF5;padding:7px 14px;border-radius:999px;font-size:13px;
}
.hero-stats{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;margin-top:44px;
}
.hero-stat{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:20px;text-align:center;backdrop-filter:blur(4px);
}
.hero-stat .num{font-size:30px;font-weight:800;color:var(--gold);}
.hero-stat .lbl{font-size:13px;color:#B9C2DA;margin-top:6px;}

/* ===================== 3-STEP QUOTE FLOW ===================== */
.flow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;
  position:relative;
}
.flow-step{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px;position:relative;box-shadow:var(--shadow-sm);
}
.flow-step .fnum{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:18px;color:#fff;background:var(--grad-violet);margin-bottom:14px;
}
.flow-step:nth-child(2) .fnum{background:var(--grad-gold);color:#1a1304;}
.flow-step:nth-child(3) .fnum{background:linear-gradient(135deg,#22D3EE,#0E7490);}
.flow-step h3{margin:0 0 8px;font-size:19px;color:var(--ink);}
.flow-step p{margin:0;font-size:14px;color:var(--text);}
.flow-arrow{display:none;}
@media(min-width:980px){
  .flow{grid-template-columns:repeat(3,1fr);}
  .flow-step::after{
    content:"→";position:absolute;right:-20px;top:50%;transform:translateY(-50%);
    font-size:26px;color:var(--primary);z-index:3;
  }
  .flow-step:last-child::after{content:"";}
}

/* ===================== CONFIGURATOR (Instant Quote) ===================== */
.config-wrap{
  display:grid;grid-template-columns:1.4fr 1fr;gap:28px;margin-top:34px;align-items:start;
}
.config-panel{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-sm);
}
.config-group{margin-bottom:26px;}
.config-group:last-child{margin-bottom:0;}
.config-group > label.lbl{
  display:block;font-weight:700;color:var(--ink);margin-bottom:12px;font-size:15px;
}
.config-group .gnum{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--primary-soft);color:var(--primary-dark);font-size:12px;font-weight:800;
  margin-right:8px;
}
.opt-row{display:flex;flex-wrap:wrap;gap:10px;}
.opt{
  border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:11px 15px;
  cursor:pointer;font-size:14px;color:var(--text);transition:.18s;user-select:none;
  display:flex;align-items:center;gap:8px;
}
.opt:hover{border-color:var(--primary);}
.opt input{accent-color:var(--primary-dark);}
.opt.sel{border-color:var(--primary);background:var(--primary-soft);color:var(--ink);font-weight:600;}
.opt.full{width:100%;}
.field{
  width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;
  font-size:14px;color:var(--ink);background:#fff;
}
.field:focus{outline:none;border-color:var(--primary);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.checks{display:flex;flex-direction:column;gap:10px;}
.check{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text);cursor:pointer;}
.check input{width:18px;height:18px;accent-color:var(--primary-dark);}

.quote-preview{
  position:sticky;top:18px;background:var(--grad-navy);color:#fff;border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow);overflow:hidden;
}
.quote-preview::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px 220px at 100% 0,rgba(167,139,250,.25),transparent 60%);
}
.quote-preview > *{position:relative;z-index:2;}
.qp-price{font-size:40px;font-weight:800;color:var(--gold);line-height:1;}
.qp-price small{font-size:15px;color:#B9C2DA;font-weight:500;display:block;margin-top:6px;}
.qp-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:#C7D0E6;}
.qp-row strong{color:#fff;font-weight:600;}
.qp-btns{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.qp-tip{
  margin-top:16px;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);
  color:#CFFAFE;border-radius:12px;padding:12px 14px;font-size:13px;
}
.upload-zone{
  border:2px dashed var(--line);border-radius:14px;padding:18px;text-align:center;
  color:var(--muted);font-size:13px;cursor:pointer;transition:.18s;margin-bottom:22px;
}
.upload-zone:hover{border-color:var(--primary);color:var(--primary-dark);}
.upload-zone b{color:var(--ink);}

/* ===== INSTANT-QUOTE: breakdown + compliance panels ===== */
.qp-divider{border-top:1px solid rgba(255,255,255,.14);margin:18px 0 16px;}
.qp-subhead{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px;}
.qp-subhead span{color:#B9C2DA;text-transform:none;letter-spacing:0;font-weight:500;font-size:11px;}

.qp-breakdown{display:flex;flex-direction:column;gap:2px;}
.qpb-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;font-size:13.5px;color:#C7D0E6;border-top:1px solid rgba(255,255,255,.08);}
.qpb-row:first-child{border-top:none;}
.qpb-row span{color:#C7D0E6;flex:1;}
.qpb-row strong{color:#fff;font-weight:600;white-space:nowrap;}
.qpb-row.disc strong{color:#FCA5A5;}
.qpb-row.net{margin-top:4px;border-top:1px solid rgba(255,255,255,.2);}
.qpb-row.net span,.qpb-row.net strong{color:#fff;font-size:15px;}
.qpb-row.proj strong{color:var(--cyan);}
.qpb-row.total{margin-top:6px;border-top:2px solid var(--gold);}
.qpb-row.total span,.qpb-row.total strong{color:var(--gold);font-size:16px;}

.qp-compliance{margin-top:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;}
.comp-head{font-size:13.5px;color:#E5EAF5;margin-bottom:12px;}
.comp-head b{color:var(--gold);}
.comp-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.comp-badge{display:flex;flex-direction:column;background:rgba(167,139,250,.16);border:1px solid rgba(167,139,250,.4);border-radius:10px;padding:7px 11px;font-size:12.5px;font-weight:700;color:#fff;}
.comp-badge small{font-weight:500;color:#C7D0E6;font-size:11px;margin-top:2px;}
.comp-cost{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13px;color:#C7D0E6;border-top:1px solid rgba(255,255,255,.08);}
.comp-cost strong{color:#fff;font-weight:600;}
.comp-cost.muted strong{color:#9AA6C2;font-weight:500;}
.comp-check-title{margin:14px 0 8px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--cyan);font-weight:700;}
.comp-check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px;}
.comp-check li{position:relative;padding-left:22px;font-size:13px;color:#D7DCEC;line-height:1.45;}
.comp-check li::before{content:"☑";position:absolute;left:0;top:0;color:var(--cyan);}
.comp-note{margin:12px 0 0;font-size:11.5px;color:#8E99B8;line-height:1.5;}

/* ===================== GENERIC CARD GRIDS ===================== */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px;}

.card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm);transition:.22s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.card .ico{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:24px;
  background:var(--primary-soft);margin-bottom:14px;
}
.card h3{margin:0 0 10px;font-size:18px;color:var(--ink);}
.card p{margin:0;font-size:14px;color:var(--text);}
.card .more{display:inline-block;margin-top:14px;color:var(--primary-dark);font-weight:600;font-size:14px;text-decoration:none;}

/* product/line card with image */
.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px;}
.pcard{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:.22s;display:flex;flex-direction:column;
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.pcard .pimg{height:190px;background:var(--grad-navy);background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden;}
.pcard .pimg .emoji{display:none;}
.pcard .pimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,13,32,0),rgba(8,13,32,.42));}
.pcard .pbody{padding:22px 24px;flex:1;display:flex;flex-direction:column;}
.pcard h3{margin:0 0 8px;font-size:19px;color:var(--ink);}
.pcard .spec{font-size:13px;color:var(--muted);margin:0 0 14px;font-family:var(--font-mono);}
.pcard .pactions{margin-top:auto;display:flex;gap:10px;}

/* ===================== DIFFERENTIATORS ===================== */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;}
.diff{
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;
  box-shadow:var(--shadow-sm);transition:.22s;
}
.diff:hover{transform:translateY(-5px);border-color:var(--violet);}
.diff .ico{font-size:28px;margin-bottom:10px;}
.diff h3{margin:0 0 8px;font-size:17px;color:var(--ink);}
.diff p{margin:0;font-size:14px;color:var(--text);}

/* ===================== PARTNERS ===================== */
.partner-band{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:24px;
}
.partner-pill{
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 20px;
  font-size:14px;color:var(--text);box-shadow:var(--shadow-sm);
}
.region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px;}
.region{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff;}
.region h4{margin:0 0 6px;color:var(--ink);font-size:15px;}
.region span{font-size:13px;color:var(--muted);}

/* ===================== RESOURCES ===================== */
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;}
.res-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);transition:.22s;display:flex;flex-direction:column;}
.res-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.res-tag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:8px 14px;color:#fff;background:var(--grad-violet);}
.res-card:nth-child(2) .res-tag{background:var(--grad-gold);color:#1a1304;}
.res-card:nth-child(3) .res-tag{background:linear-gradient(135deg,#22D3EE,#0E7490);}
.res-card:nth-child(4) .res-tag{background:linear-gradient(135deg,#FB923C,#C9970A);}
.res-card:nth-child(5) .res-tag{background:linear-gradient(135deg,#34D399,#0E7490);}
.res-card:nth-child(6) .res-tag{background:linear-gradient(135deg,#F87171,#C9970A);}
.res-body{padding:20px 22px;flex:1;display:flex;flex-direction:column;}
.res-body h3{margin:0 0 8px;font-size:17px;color:var(--ink);}
.res-body p{margin:0 0 14px;font-size:14px;color:var(--text);flex:1;}
.res-body .more{color:var(--primary-dark);font-weight:600;font-size:14px;text-decoration:none;}

/* ===================== STAT BAND ===================== */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px;}
.sb{text-align:center;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);}
.sb .num{font-size:30px;font-weight:800;color:var(--primary-dark);}
.sb .lbl{font-size:13px;color:var(--muted);margin-top:6px;}

/* ===================== TABLE (spec matrix) ===================== */
.spec-table{width:100%;border-collapse:collapse;margin-top:24px;font-size:14px;}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;}
.spec-table thead th{background:var(--navy);color:#fff;font-weight:600;}
.spec-table tbody tr:nth-child(even){background:var(--bg-alt);}

/* ===================== MEDIA (real photography) ===================== */
/* homepage hero with photo backdrop */
.hero-x{
  background:
    linear-gradient(100deg, rgba(8,13,32,.93) 28%, rgba(8,13,32,.62) 62%, rgba(8,13,32,.38) 100%),
    url("/assets/img/showroom/show-01@2x.webp") center/cover no-repeat,
    var(--grad-navy);
}
.hero-x::before{
  background:
    radial-gradient(700px 360px at 88% -5%, rgba(167,139,250,.26), transparent 60%),
    radial-gradient(620px 340px at 8% 115%, rgba(34,211,238,.16), transparent 60%);
}

/* page-hero with photo backdrop */
.page-hero.has-media{position:relative;color:#fff;padding:80px 0 66px;}
.page-hero.has-media h1{color:#fff;}
.page-hero.has-media p{color:#C9D2E8;}
.page-hero.has-media .crumb,.page-hero.has-media .crumb a{color:#AEB8D4;}

/* showcase grids & shots */
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;}
.showcase-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.showcase-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.shot{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);background:#0b1228;}
.shot img{width:100%;height:240px;object-fit:cover;display:block;transition:transform .5s ease;}
.shot:hover img{transform:scale(1.05);}
.shot .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-size:13px;color:#fff;background:linear-gradient(180deg,transparent,rgba(8,13,32,.82));}
@media(max-width:760px){
  .showcase-grid,.showcase-grid.cols-4,.showcase-grid.cols-2{grid-template-columns:1fr 1fr;}
  .shot img{height:172px;}
}

/* featured single image */
.feat-img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow);display:block;margin-top:26px;}

/* ===================== RESPONSIVE ===================== */
@media(max-width:980px){
  .cap-grid,.grid-4,.region-grid,.stat-band{grid-template-columns:repeat(2,1fr);}
  .grid-3,.diff-grid,.res-grid{grid-template-columns:repeat(2,1fr);}
  .config-wrap{grid-template-columns:1fr;}
  .quote-preview{position:static;}
  .hero-stats{grid-template-columns:repeat(2,1fr);}
  .flow{grid-template-columns:1fr;}
  .flow-step::after{content:""!important;}
  .plist{grid-template-columns:1fr;}
}
@media(max-width:620px){
  .cap-grid,.grid-2,.grid-3,.grid-4,.diff-grid,.res-grid,.region-grid,.stat-band,.hero-stats{grid-template-columns:1fr;}
  .two-col{grid-template-columns:1fr;}
}