/* =========================================================
   PlastiCore Industrial — main.css
   Mobile-first. Hand-authored utility + component layer.
   Production note: swap this file for the Tailwind-compiled
   build output (npm run build) once /build pipeline is wired —
   design tokens in style.css map 1:1 to tailwind.config.js
   theme.extend.colors so class names stay stable either way.
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

.pc-skip-link { position: absolute; top: -50px; left: 0; background: var(--pc-amber-500); color: var(--pc-navy-950); padding: .75rem 1.25rem; z-index: 1000; transition: top .2s var(--pc-ease); }
.pc-skip-link:focus { top: 0; }

.pc-container { width: 100%; max-width: var(--pc-container); margin-inline: auto; padding-inline: 1.25rem; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--pc-font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5rem; }
.pc-page-title { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-top: 1.5rem; }
.pc-page-sub { color: var(--pc-slate-400); max-width: 60ch; margin-bottom: 2rem; }
.pc-section__title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.pc-section__sub { color: var(--pc-slate-400); max-width: 65ch; }
.pc-eyebrow { display: inline-block; font-family: var(--pc-font-mono); font-size: .75rem; letter-spacing: .12em; color: var(--pc-amber-400); margin-bottom: .75rem; }

/* ---------- Layout ---------- */
.pc-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.pc-grid { display: grid; gap: 1.25rem; }
.pc-grid--3 { grid-template-columns: 1fr; }
.pc-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .pc-grid--3 { grid-template-columns: repeat(2,1fr); } .pc-grid--4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px) { .pc-grid--3 { grid-template-columns: repeat(3,1fr); } .pc-grid--4 { grid-template-columns: repeat(4,1fr); } }

.pc-content-narrow { max-width: 78ch; }

/* ---------- Glassmorphism card ---------- */
.pc-glass-card {
  background: var(--pc-glass-bg);
  border: 1px solid var(--pc-glass-border);
  backdrop-filter: blur(var(--pc-glass-blur));
  -webkit-backdrop-filter: blur(var(--pc-glass-blur));
  border-radius: var(--pc-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--pc-shadow-elev);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--pc-ease), transform .5s var(--pc-ease);
}
.pc-glass-card.pc-in-view, .pc-grid > *.pc-in-view { opacity: 1; transform: translateY(0); }
.pc-glass-card svg { width: 28px; height: 28px; color: var(--pc-amber-400); margin-bottom: .75rem; }
.pc-glass-card h3 { font-size: 1.15rem; }
.pc-glass-card a { color: var(--pc-amber-400); font-weight: 600; text-decoration: none; font-size: .9rem; }

/* ---------- Buttons ---------- */
.pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: var(--pc-radius-sm); font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s var(--pc-ease), background .2s; font-family: var(--pc-font-body); }
.pc-btn-sm { padding: .5rem 1rem; font-size: .85rem; }
.pc-btn:not(.pc-btn-sm):not(.pc-btn-lg) { padding: .65rem 1.25rem; font-size: .9rem; }
.pc-btn-lg { padding: .9rem 1.75rem; font-size: 1rem; }
.pc-btn-primary { background: var(--pc-amber-500); color: var(--pc-navy-950); }
.pc-btn-primary:hover { background: var(--pc-amber-400); transform: translateY(-1px); }
.pc-btn-ghost { background: transparent; border-color: var(--pc-glass-border); color: var(--pc-white); }
.pc-btn-ghost:hover { background: var(--pc-glass-bg); }
.pc-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---------- Header ---------- */
.pc-header { position: sticky; top: 0; z-index: 100; background: rgba(7,11,20,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pc-glass-border); }
.pc-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; gap: 1rem; }
.pc-header__brand-text { font-family: var(--pc-font-display); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.pc-nav { list-style: none; display: none; gap: 1.5rem; margin: 0; padding: 0; }
.pc-nav a { text-decoration: none; font-size: .9rem; color: var(--pc-slate-200); }
.pc-nav a:hover { color: var(--pc-amber-400); }
.pc-header__cta { display: none; gap: .75rem; }
.pc-header__toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: .5rem; }
.pc-header__toggle span { width: 22px; height: 2px; background: var(--pc-white); }
@media (min-width: 960px) {
  .pc-nav { display: flex; }
  .pc-header__cta { display: flex; }
  .pc-header__toggle { display: none; }
}
.pc-mobile-nav { border-top: 1px solid var(--pc-glass-border); padding: 1rem 1.25rem; }
.pc-mobile-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.pc-mobile-nav__list a { text-decoration: none; }

/* ---------- Hero ---------- */
.pc-hero--home { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: 3rem; }
.pc-hero__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 960px) { .pc-hero__grid { grid-template-columns: 1.1fr .9fr; } }
.pc-hero__title { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.pc-hero__sub { color: var(--pc-slate-400); font-size: 1.05rem; max-width: 55ch; margin-bottom: 1.5rem; }
.pc-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.pc-hero__visual { display: grid; gap: 1.25rem; }
.pc-hero__stat { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--pc-glass-border); padding-bottom: .75rem; }
.pc-hero__stat strong { font-family: var(--pc-font-mono); font-size: 1.4rem; color: var(--pc-amber-400); }
.pc-hero__stat span { color: var(--pc-slate-400); font-size: .85rem; }

/* ---------- Trust strip ---------- */
.pc-trust-strip { border-top: 1px solid var(--pc-glass-border); border-bottom: 1px solid var(--pc-glass-border); padding-block: 1rem; }
.pc-trust-strip__row { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; font-family: var(--pc-font-mono); font-size: .8rem; color: var(--pc-slate-400); letter-spacing: .04em; }

/* ---------- CTA band ---------- */
.pc-cta-band { text-align: center; display: grid; gap: 1.5rem; padding: 3rem 1.5rem; background: linear-gradient(135deg, var(--pc-navy-800), var(--pc-navy-700)); border-radius: var(--pc-radius-lg); }

/* ---------- Co-extrusion diagram ---------- */
.pc-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.pc-tab { background: var(--pc-navy-800); border: 1px solid var(--pc-glass-border); color: var(--pc-slate-200); padding: .6rem 1.2rem; border-radius: 999px; cursor: pointer; font-size: .85rem; }
.pc-tab.is-active { background: var(--pc-amber-500); color: var(--pc-navy-950); border-color: transparent; }
.pc-layer-diagram { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1.5rem; }
.pc-layer { padding: 1rem; border-radius: var(--pc-radius-sm); font-size: .85rem; font-family: var(--pc-font-mono); }
.pc-layer--a { background: rgba(245,165,36,0.18); border: 1px solid rgba(245,165,36,0.4); }
.pc-layer--b { background: var(--pc-navy-700); border: 1px solid var(--pc-glass-border); padding-block: 2rem; }
.pc-layer--tie { background: rgba(58,160,255,0.12); border: 1px solid rgba(58,160,255,0.3); padding-block: .5rem; font-size: .75rem; }
.pc-layer-benefits { padding-left: 1.25rem; color: var(--pc-slate-200); }
.pc-tab-panel[hidden] { display: none; }

/* ---------- Tolerance / gauge widget ---------- */
.pc-tolerance__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .pc-tolerance__grid { grid-template-columns: 1.2fr .8fr; } }
.pc-tolerance-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.pc-tolerance-table th, .pc-tolerance-table td { border: 1px solid var(--pc-glass-border); padding: .6rem .9rem; text-align: left; font-size: .9rem; }
.pc-tolerance-table th { background: var(--pc-navy-800); }
.pc-gauge-widget { text-align: center; }
.pc-gauge__dial { width: 140px; height: 70px; margin: 1rem auto; border: 3px solid var(--pc-slate-600); border-bottom: none; border-radius: 140px 140px 0 0; position: relative; overflow: hidden; }
.pc-gauge__needle { position: absolute; bottom: 0; left: 50%; width: 2px; height: 62px; background: var(--pc-amber-500); transform-origin: bottom center; transform: rotate(0deg); transition: transform .8s var(--pc-ease); }
.pc-gauge__value { font-family: var(--pc-font-mono); font-size: 1.4rem; color: var(--pc-amber-400); margin: 0; }
.pc-gauge__label { color: var(--pc-slate-400); font-size: .8rem; }

/* ---------- Configurator ---------- */
.pc-configurator__layout { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .pc-configurator__layout { grid-template-columns: 1.4fr .9fr; align-items: start; } }
.pc-config-field { border: none; padding: 0; margin: 0 0 1.75rem; }
.pc-config-field legend { font-family: var(--pc-font-display); font-weight: 600; margin-bottom: .9rem; padding: 0; }
.pc-config-field--grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .pc-config-field--grid { grid-template-columns: 1fr 1fr; } }
.pc-input-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; font-size: .85rem; color: var(--pc-slate-200); }
.pc-input-group input, .pc-input-group select, .pc-input-group textarea {
  background: var(--pc-navy-900); border: 1px solid var(--pc-glass-border); color: var(--pc-white);
  border-radius: var(--pc-radius-sm); padding: .65rem .8rem; font-size: .95rem; font-family: var(--pc-font-body);
}
.pc-input-group input:focus, .pc-input-group select:focus, .pc-input-group textarea:focus { outline: 2px solid var(--pc-amber-500); outline-offset: 1px; }

.pc-material-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
@media (min-width: 560px) { .pc-material-grid { grid-template-columns: repeat(3,1fr); } }
.pc-material-option input { position: absolute; opacity: 0; }
.pc-material-option__card { display: block; border: 1px solid var(--pc-glass-border); border-radius: var(--pc-radius-sm); padding: .85rem; cursor: pointer; transition: border-color .2s, background .2s; }
.pc-material-option input:checked + .pc-material-option__card { border-color: var(--pc-amber-500); background: rgba(245,165,36,0.1); }
.pc-material-option__card small { display: block; color: var(--pc-slate-400); font-family: var(--pc-font-mono); margin-top: .25rem; }

.pc-config-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.pc-form-msg { min-height: 1.2em; font-size: .85rem; margin-top: .75rem; }
.pc-form-msg.is-success { color: var(--pc-success); }
.pc-form-msg.is-error { color: var(--pc-danger); }

.pc-config-summary { position: sticky; top: 90px; }
.pc-summary-list { display: grid; gap: .6rem; margin: 1rem 0; }
.pc-summary-list > div { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--pc-glass-border); padding-bottom: .5rem; font-size: .9rem; }
.pc-summary-list dt { color: var(--pc-slate-400); }
.pc-summary-total { font-size: 1.1rem !important; font-weight: 700; border-bottom: none !important; }
.pc-summary-total dd { color: var(--pc-amber-400); }
.pc-summary-note { font-size: .78rem; color: var(--pc-slate-400); }

/* ---------- Product catalog ---------- */
.pc-catalog-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.pc-filter-chip { text-decoration: none; padding: .45rem 1rem; border: 1px solid var(--pc-glass-border); border-radius: 999px; font-size: .82rem; color: var(--pc-slate-200); }
.pc-filter-chip.is-active { background: var(--pc-amber-500); color: var(--pc-navy-950); border-color: transparent; }
.pc-product-card__meta { display: flex; gap: .5rem; margin: .75rem 0; flex-wrap: wrap; }
.pc-product-card__meta span { font-size: .75rem; font-family: var(--pc-font-mono); color: var(--pc-slate-400); }
.pc-badge { background: rgba(47,191,113,0.15); color: var(--pc-success); padding: .15rem .5rem; border-radius: 4px; }
.pc-pagination ul { list-style: none; display: flex; gap: .5rem; padding: 0; }

/* ---------- Portal ---------- */
.pc-portal__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .pc-portal__grid { grid-template-columns: 1fr 1fr; } }
.pc-inline-form { display: flex; gap: .75rem; flex-wrap: wrap; }
.pc-inline-form input { flex: 1; min-width: 200px; background: var(--pc-navy-900); border: 1px solid var(--pc-glass-border); color: var(--pc-white); border-radius: var(--pc-radius-sm); padding: .65rem .8rem; }
.pc-lifecycle { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.pc-lifecycle li { display: flex; align-items: center; gap: .75rem; font-size: .9rem; color: var(--pc-slate-400); }
.pc-lifecycle__dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--pc-slate-600); flex-shrink: 0; }
.pc-lifecycle li.is-complete .pc-lifecycle__dot { background: var(--pc-success); border-color: var(--pc-success); }
.pc-lifecycle li.is-complete { color: var(--pc-white); }
.pc-lifecycle li.is-active .pc-lifecycle__dot { background: var(--pc-amber-500); border-color: var(--pc-amber-500); box-shadow: 0 0 0 4px rgba(245,165,36,0.25); }
.pc-lifecycle li.is-active { color: var(--pc-white); font-weight: 600; }

/* ---------- Modal ---------- */
.pc-modal { border: none; border-radius: var(--pc-radius-lg); background: var(--pc-navy-900); color: var(--pc-white); padding: 0; max-width: 720px; width: 92%; }
.pc-modal::backdrop { background: rgba(0,0,0,0.7); }
.pc-modal__inner { padding: 2rem; position: relative; }
.pc-modal__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--pc-white); font-size: 1.5rem; cursor: pointer; }

/* ---------- Footer ---------- */
.pc-footer { background: var(--pc-navy-900); border-top: 1px solid var(--pc-glass-border); padding-top: 3rem; margin-top: 4rem; }
.pc-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; padding-bottom: 2rem; }
@media (min-width: 720px) { .pc-footer__grid { grid-template-columns: repeat(4,1fr); } }
.pc-footer__col h4 { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pc-slate-400); }
.pc-footer__nav, .pc-footer__badges { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: .88rem; }
.pc-footer__bottom { border-top: 1px solid var(--pc-glass-border); padding: 1.25rem 0; font-size: .8rem; color: var(--pc-slate-400); }

/* ---------- Breadcrumbs ---------- */
.pc-breadcrumbs { font-size: .8rem; color: var(--pc-slate-400); margin-top: 1rem; }
.pc-breadcrumbs a { text-decoration: none; color: var(--pc-slate-400); }

/* ---------- Prose ---------- */
.pc-prose p, .pc-prose ul, .pc-prose ol { margin-bottom: 1rem; color: var(--pc-slate-200); }