:root{
  --primary:#2563eb; --accent:#06b6d4; --text:#0f172a; --muted:#64748b;
  --radius:16px; --shadow:0 12px 30px rgba(2,6,23,.08); --shadow-lg:0 22px 46px rgba(2,6,23,.14);
  --easing:cubic-bezier(.2,.8,.2,1);

  --pageBase:#ffffff; --tableBase:#ffffff;
  --bgA:.18; --bgB:.20; --bgC:.18;

  /* Honeycomb sizing */
  --hexCard:150px;
  --hexHeight: calc(var(--hexCard) * 1.12);
  --hGap: calc(var(--hexCard) * .18);
  --hexOffset: calc(var(--hexCard) / 2);
  --hexOverlap: calc(var(--hexCard) * .18);

  /* Decorative art opacity (default) */
  --artOpacity:.14;

  /* Photo BG custom properties (set via inline style when bg="" used) */
  --csd-bg-img: none;
  --csd-bg-fit: cover;
  --csd-bg-pos: center center;
  --csd-bg-opacity: .12;
}

.csd-stage{
  position: relative;
  background:
    radial-gradient(900px 280px at 6% -10%, rgba(37,99,235, var(--bgA)), transparent 60%),
    radial-gradient(900px 320px at 96% 0%, rgba(6,182,212, var(--bgB)), transparent 60%),
    radial-gradient(800px 320px at 50% 110%, rgba(251,146,60, var(--bgC)), transparent 60%),
    var(--pageBase);
  padding: 56px 0 10px;
}

/* Default welding/work vector (kept for fallback) */
.csd-stage::before,
.csd-stage::after{
  content:""; position:absolute; pointer-events:none; opacity: var(--artOpacity); z-index:0;
  background-repeat:no-repeat; background-size: contain;
}
.csd-stage::before{
  left:-30px; bottom:-20px; width:520px; height:260px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300"><g fill="none" stroke="%2394a3b8" stroke-width="2"><path d="M50 220 C120 205, 200 180, 260 160" opacity="0.9"/><path d="M260 160 L320 140" opacity="0.9"/><path d="M320 140 Q330 135 340 140 Q350 145 360 142" opacity="0.9"/><g stroke="%2394a3b8" stroke-width="2"><line x1="320" y1="140" x2="340" y2="120"/><line x1="320" y1="140" x2="345" y2="130"/><line x1="320" y1="140" x2="338" y2="150"/><line x1="320" y1="140" x2="335" y2="160"/><line x1="320" y1="140" x2="350" y2="140"/></g><circle cx="340" cy="126" r="3" fill="%2394a3b8" /></g></svg>');
}
.csd-stage::after{
  right:-20px; top:-10px; width:480px; height:230px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="560" height="260" viewBox="0 0 560 260"><g fill="none" stroke="%2394a3b8" stroke-width="2"><circle cx="420" cy="110" r="38"/><path d="M410 150 L395 200 L445 200 L430 150 Z" /><path d="M80 160 L160 160 M120 100 L120 160" /><circle cx="200" cy="160" r="26"/><circle cx="260" cy="160" r="26"/><path d="M226 160 L234 160" /><path d="M200 134 L260 134" /><path d="M200 186 L260 186" /></g></svg>');
}

/* Photo background mode (when bg="" provided) */
.csd-stage.photo-bg::before{
  inset:0; width:auto; height:auto;
  background-image: var(--csd-bg-img);
  background-size: var(--csd-bg-fit, cover);
  background-position: var(--csd-bg-pos, center center);
  background-repeat:no-repeat;
  opacity: var(--csd-bg-opacity, .12);
  filter: grayscale(1) contrast(1.05);
}
.csd-stage.photo-bg::after{ display:none; } /* hide default vector when photo used */
.csd-wrap{ max-width:1120px; margin:0 auto; padding:0 24px; font-family:Inter,system-ui; color:var(--text); position:relative; z-index:1 }

.csd-head{ text-align:left; margin-bottom:16px }
.csd-head.center{ text-align:center }
.csd-over{ display:inline-block; font-weight:800; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#0ea5e9; background:#e0f2fe; border:1px solid #bae6fd; padding:6px 10px; border-radius:999px; }
.csd-head h2{ font:800 clamp(26px,4.2vw,42px)/1.1 Inter; margin:10px 0 8px }
.csd-intro{ max-width:880px; margin:0 auto; color:#475569; line-height:1.8 }
.csd-intro.center{ text-align:center }

/* Slider */
.csd-slider{ position:relative; overflow:hidden; margin-top:18px }
.csd-slider .decor{
  position:absolute; border-radius:50%;
  border:2px dashed rgba(15,23,42,.22);
  background: radial-gradient(closest-side, rgba(59,130,246,.05), transparent 72%);
  opacity:.28; z-index:0;
}
.csd-slider .decor.d1{ width:150px; height:150px; left:8px; top:52px }
.csd-slider .decor.d2{ width:230px; height:230px; left:190px; top:120px }
.csd-slider .decor.d3{ width:140px; height:140px; right:20px; top:40px }

.csd-track{ display:flex; transition: transform .6s var(--easing); will-change: transform; position:relative; z-index:1 }
.csd-slide{ min-width:100%; padding:14px 4px 18px; }

/* Honeycomb layouts */
.csd-hexgrid{ display:flex; flex-wrap:wrap !important; gap:20px 22px; justify-content:center; align-content:flex-start; min-height: 340px }
.csd-honey6, .csd-honey5, .csd-honey4{ display:flex; flex-direction:column; align-items:center; gap: var(--hexOverlap) }
.csd-honey6 .row, .csd-honey5 .row, .csd-honey4 .row{ display:flex; gap: var(--hGap) }
.csd-honey6 .row.bottom{ transform: translateX(var(--hexOffset)); }
.csd-honey5.v23 .row.bottom{ transform: translateX(var(--hexOffset)); }
.csd-honey5.v32 .row.top{    transform: translateX(var(--hexOffset)); }
.csd-honey4 .row.bottom{      transform: translateX(var(--hexOffset)); }

.csd-logo-card{ width:var(--hexCard); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center }

.csd-hex{
  width:var(--hexCard); height:var(--hexHeight); display:grid; place-items:center;
  background:
    linear-gradient(180deg, #ffffff, #f9fbff),
    radial-gradient(220px 80px at 50% 0%, rgba(59,130,246,.06), transparent 60%);
  border:1px solid #eaf1ff; box-shadow:var(--shadow);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  transition: transform .25s var(--easing), box-shadow .25s var(--easing), border-color .25s var(--easing);
  position:relative; isolation:isolate;
}
.csd-hex::after{
  content:""; position:absolute; inset:-4px; clip-path: inherit; z-index:-1;
  background: radial-gradient(120% 120% at 50% 50%, rgba(37,99,235,.22), rgba(6,182,212,.10) 40%, transparent 60%);
  filter: blur(9px); opacity:.30;
}
.csd-hex::before{
  content:""; position:absolute; inset:8px 10px; clip-path: inherit; z-index:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
  opacity:.5;
}
.csd-hex img{ max-width:72%; max-height:68%; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(2,6,23,.06)); }
.csd-name{ font-weight:700; font-size:14px; color:#0f172a; line-height:1.3; max-width:180px; }

.csd-subline{ margin-top:26px; text-align:center; color:#0f172a; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:16px; }
.csd-subline.left{ text-align:left }

/* NAV: middle left/right */
.csd-nav{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none; padding: 0 8px;
}
.csd-btn{
  pointer-events:auto;
  width:42px; height:42px; border-radius:999px;
  border:1px solid #eaf1ff; background:#fff; color:#0f172a;
  box-shadow:var(--shadow); cursor:pointer; font-weight:800; line-height:1;
  display:grid; place-items:center; opacity:.92;
}
.csd-btn:hover{ transform: translateY(-1px); }

.csd-dots{ display:flex; gap:6px; justify-content:center; margin-top:10px }
.csd-dot{ width:8px; height:8px; border-radius:50%; background:#d1d5db }
.csd-dot.active{ background:linear-gradient(135deg,var(--primary),var(--accent)) }

/* TABLE area */
.csd-table-wrap{
  padding: 16px; margin-top:18px; border-radius:16px;
  background: linear-gradient(0deg, rgba(59,130,246,.04), rgba(6,182,212,.03)), var(--tableBase);
  position: relative; overflow:hidden;
}
.csd-table-wrap.construct::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(148,163,184,.08) 1px, transparent 1px);
  background-size: 40px 40px; pointer-events:none; z-index:0;
}
/* Default welding art (fallback) */
.csd-table-wrap.construct::after{
  content:""; position:absolute; right:-30px; bottom:-20px; width:520px; height:240px; pointer-events:none; z-index:0;
  background-repeat:no-repeat; background-size:contain; opacity: var(--artOpacity);
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 600 300"><g fill="none" stroke="%2394a3b8" stroke-width="2"><path d="M50 220 C120 205, 200 180, 260 160" opacity="0.9"/><path d="M260 160 L320 140" opacity="0.9"/><g stroke="%2394a3b8" stroke-width="2"><line x1="320" y1="140" x2="340" y2="120"/><line x1="320" y1="140" x2="345" y2="130"/><line x1="320" y1="140" x2="338" y2="150"/><line x1="320" y1="140" x2="335" y2="160"/><line x1="320" y1="140" x2="350" y2="140"/></g><circle cx="340" cy="126" r="3" fill="%2394a3b8" /></g></svg>');
}
/* Photo background mode for table (full-cover overlay) */
.csd-table-wrap.construct.photo-bg::after{
  inset:0; left:0; top:0; width:auto; height:auto;
  background-image: var(--csd-bg-img);
  background-size: var(--csd-bg-fit, cover);
  background-position: var(--csd-bg-pos, center center);
  background-repeat:no-repeat;
  opacity: calc(var(--csd-bg-opacity, .12) * 0.9);
  filter: grayscale(1) contrast(1.05);
}

.csd-table{ width:100%; border-collapse:separate; border-spacing:0 10px; margin-top:10px; position:relative; z-index:1 }
.csd-table thead th{
  position:sticky; top:0; z-index:2;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff; border:0; padding:10px 12px; font-weight:800;
}
.csd-table td{ background:#fff; border:1px solid #dbeafe; padding:14px 12px; box-shadow:0 6px 14px rgba(2,6,23,.06) }
.csd-table tr td:first-child{ border-radius:12px 0 0 12px }
.csd-table tr td:last-child{ border-radius:0 12px 12px 0 }
.csd-table tbody tr:nth-child(odd) td{ background:#f8fbff }
.csd-table tbody tr:hover td{ border-color:#93c5fd; box-shadow:0 10px 24px rgba(2,6,23,.10) }
.csd-logo-sm{ width:48px; height:48px; border-radius:10px; object-fit:cover; background:#f1f5f9; border:1px solid #e5e7eb; box-shadow:0 6px 18px rgba(15,23,42,.08) }

.csd-editing [contenteditable="true"]{ outline:1px dashed #a5b4fc; border-radius:6px }

/* Customizer */
.csd-customizer{ position:fixed; right:16px; bottom:16px; z-index:50; font-family:inherit }
.csd-gear{ width:48px; height:48px; border-radius:999px; border:none; cursor:pointer; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:var(--shadow) }
.csd-panel{ display:none; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:var(--shadow); padding:12px; width:300px; margin-top:8px }
.csd-panel.open{ display:block }
.csd-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 }
.csd-panel small{ color:#64748b }
.csd-panel input[type="color"]{ width:42px; height:32px; border:none; background:none; padding:0 }
.csd-panel input[type="range"]{ width:170px }

@media (max-width:680px){
  .csd-hex{ width:calc(var(--hexCard) - 20px); height: calc((var(--hexCard) - 20px) * 1.12) }
  .csd-logo-card{ width:calc(var(--hexCard) - 20px) }
  .csd-hexgrid{ gap:14px 16px }
  .csd-wrap{ padding:0 16px }
  .csd-stage{ padding:40px 0 8px }
  .csd-head h2{ font-size:clamp(22px,5vw,32px) }
  .csd-nav{ padding:0 4px }
  .csd-btn{ width:36px; height:36px }
  .csd-table{ font-size:14px }
  .csd-table td{ padding:10px 8px }
  .csd-logo-sm{ width:36px; height:36px }
  .csd-customizer{ right:8px; bottom:8px }
  .csd-panel{ width:280px; margin-right:-8px }
}

@media (max-width:480px){
  .csd-hex{ width:calc(var(--hexCard) - 40px); height: calc((var(--hexCard) - 40px) * 1.12) }
  .csd-logo-card{ width:calc(var(--hexCard) - 40px) }
  .csd-hexgrid{ gap:10px 12px }
  .csd-wrap{ padding:0 12px }
  .csd-stage{ padding:32px 0 6px }
  .csd-head h2{ font-size:clamp(20px,6vw,28px) }
  .csd-table{ font-size:13px }
  .csd-table td{ padding:8px 6px }
  .csd-logo-sm{ width:32px; height:32px }
  .csd-panel{ width:260px; margin-right:-12px }
}