:root {
  --brand: #355c7d;
  --brand-dark: #203a50;
  --brand-soft: #e9f0f5;
  --ink: #17212b;
  --muted: #5e6b76;
  --line: #dbe3e9;
  --paper: #ffffff;
  --surface: #f5f7f9;
  --radius: 22px;
  --shadow: 0 18px 55px rgba(23, 33, 43, 0.09);
  --container: min(1180px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }

.container { width: var(--container); margin-inline: auto; }
.eyebrow {
  margin: 0 0 14px;
  color: var(--brand);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section { padding: 96px 0; }
.section.alt { background: var(--surface); }
.section-head {
  max-width: 760px;
  margin-bottom: 42px;
}
.section-head h2 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(219,227,233,.85);
  backdrop-filter: blur(16px);
}
.nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.brand img { width: 238px; height: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: .95rem;
  font-weight: 650;
}
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -7px;
  height: 2px;
  background: var(--brand);
  transition: right .2s ease;
}
.nav-links a:hover::after { right: 0; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.language {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
}
.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 8px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  margin: 5px 0;
  background: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.primary {
  color: white;
  background: var(--brand);
  box-shadow: 0 12px 24px rgba(53,92,125,.22);
}
.btn.primary:hover { background: var(--brand-dark); }
.btn.secondary {
  color: var(--ink);
  background: rgba(255,255,255,.82);
  border-color: var(--line);
}
.btn.small { min-height: 42px; padding-inline: 18px; font-size: .88rem; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  display: grid;
  align-items: center;
  background:
    linear-gradient(120deg, rgba(255,255,255,.98) 0 53%, rgba(233,240,245,.9) 53% 100%);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(53,92,125,.18);
  border-radius: 50%;
}
.hero::before {
  width: 620px;
  height: 620px;
  right: -180px;
  top: 80px;
}
.hero::after {
  width: 430px;
  height: 430px;
  right: 40px;
  top: 175px;
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 70px;
  padding: 100px 0;
}
.hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(3.25rem, 7vw, 6.5rem);
  line-height: .96;
  letter-spacing: -0.065em;
}
.hero h1 span { color: var(--brand); }
.hero-copy {
  max-width: 680px;
  margin: 28px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-panel {
  position: relative;
  min-height: 470px;
  border: 1px solid rgba(53,92,125,.22);
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(53,92,125,.10), rgba(255,255,255,.72)),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(53,92,125,.07) 52px 53px);
  box-shadow: var(--shadow);
}
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 38px;
  border: 1px solid rgba(53,92,125,.28);
  clip-path: polygon(0 0, 100% 13%, 82% 100%, 13% 83%);
}
.hero-panel::after {
  content: "TACTILE • ACOUSTIC • ARCHITECTURAL";
  position: absolute;
  left: 32px;
  bottom: 28px;
  color: var(--brand);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .14em;
}
.hero-badge {
  position: absolute;
  top: 28px;
  right: 28px;
  max-width: 205px;
  padding: 16px 18px;
  border-radius: 16px;
  color: white;
  background: var(--brand-dark);
  font-size: .85rem;
  font-weight: 750;
}

.stats {
  margin-top: -52px;
  position: relative;
  z-index: 3;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stat { padding: 26px 30px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat strong { display: block; color: var(--brand); font-size: 1.15rem; }
.stat span { color: var(--muted); font-size: .9rem; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(53,92,125,.42);
  box-shadow: var(--shadow);
}
.card-visual {
  position: absolute;
  inset: 0 0 42%;
  background:
    linear-gradient(150deg, rgba(53,92,125,.12), transparent),
    repeating-linear-gradient(45deg, rgba(53,92,125,.12) 0 1px, transparent 1px 24px);
}
.card-visual::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: 28px;
  top: 28px;
  border: 1px solid rgba(53,92,125,.34);
  transform: rotate(18deg);
}
.card h3 { position: relative; margin: 0 0 8px; font-size: 1.35rem; }
.card p { position: relative; margin: 0; color: var(--muted); }
.card .arrow { position: relative; margin-top: 20px; color: var(--brand); font-weight: 900; }

.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.solution {
  padding: 30px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper);
}
.solution span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  border-radius: 50%;
  color: white;
  background: var(--brand);
  font-weight: 900;
}
.solution h3 { margin: 0 0 8px; }
.solution p { margin: 0; color: var(--muted); }

.partner {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: stretch;
  border-radius: 30px;
  overflow: hidden;
  background: var(--brand-dark);
  color: white;
}
.partner-mark {
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 50px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.12), transparent 58%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px);
}
.partner-mark strong {
  font-size: clamp(3.5rem, 9vw, 7rem);
  letter-spacing: -.07em;
}
.partner-copy { padding: 68px; }
.partner-copy h2 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.partner-copy p { color: rgba(255,255,255,.76); }
.partner-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-top: 26px;
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

.projects-placeholder {
  padding: 54px;
  border: 1px dashed rgba(53,92,125,.42);
  border-radius: var(--radius);
  text-align: center;
  background:
    linear-gradient(145deg, rgba(53,92,125,.06), transparent),
    var(--paper);
}
.projects-placeholder h3 { margin: 0 0 8px; font-size: 1.6rem; }
.projects-placeholder p { max-width: 650px; margin: auto; color: var(--muted); }

.contact-wrap {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 24px;
}
.contact-info,
.contact-form {
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.contact-info h3,
.contact-form h3 { margin-top: 0; font-size: 1.6rem; }
.contact-list { display: grid; gap: 20px; margin-top: 30px; }
.contact-item small { display: block; color: var(--muted); margin-bottom: 3px; }
.contact-item a, .contact-item strong { font-weight: 800; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 800; }
.field input,
.field textarea,
.field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  background: var(--surface);
  outline: none;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--brand); }
.form-note { margin: 12px 0 0; color: var(--muted); font-size: .78rem; }

.site-footer {
  padding: 42px 0;
  color: rgba(255,255,255,.76);
  background: #111a22;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr .7fr;
  gap: 42px;
}
.footer-logo {
  width: 250px;
  padding: 10px;
  border-radius: 10px;
  background: white;
}
.footer-grid h4 { color: white; margin: 0 0 14px; }
.footer-links { display: grid; gap: 9px; }
.footer-bottom {
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: .82rem;
}

@media (max-width: 980px) {
  .nav-links {
    position: absolute;
    display: none;
    top: 81px;
    left: 20px;
    right: 20px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .menu-toggle { display: block; }
  .nav-actions .btn { display: none; }
  .hero-grid, .partner, .contact-wrap { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-panel { min-height: 360px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  :root { --container: min(100% - 28px, 1180px); }
  .brand img { width: 190px; }
  .hero-grid { padding: 72px 0 92px; gap: 42px; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.4rem); }
  .stats-grid, .cards, .solution-grid, .form-grid { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .partner-copy { padding: 42px 28px; }
  .partner-list { grid-template-columns: 1fr; }
  .section { padding: 72px 0; }
  .contact-info, .contact-form, .projects-placeholder { padding: 28px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* ===== Celes Tech Design System v2 ===== */
:root {
  --brand-50:#f4f8fb; --brand-100:#e6eef4; --brand-200:#c8d9e6;
  --brand-300:#9ebbd0; --brand-400:#7198b6; --brand-500:#4e7899;
  --brand-600:#355c7d; --brand-700:#2a4a65; --brand-800:#203a50; --brand-900:#142733;
  --success:#2d7a5e; --warning:#a46b18; --danger:#a84747;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
}
.page-shell{background:linear-gradient(180deg,#fff 0,#f7f9fb 100%)}
.breadcrumbs{display:flex;align-items:center;gap:9px;padding:24px 0;color:var(--muted);font-size:.83rem}
.breadcrumbs a:hover{color:var(--brand)} .breadcrumbs span{opacity:.55}
.category-hero{position:relative;overflow:hidden;padding:68px 0 84px;background:var(--brand-900);color:#fff}
.category-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(113,152,182,.28),transparent 35%),repeating-linear-gradient(90deg,transparent 0 72px,rgba(255,255,255,.035) 72px 73px)}
.category-hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px}
.category-hero h1{margin:0;font-size:clamp(3.4rem,7vw,6.4rem);line-height:.94;letter-spacing:-.065em}
.category-hero p{max-width:720px;color:rgba(255,255,255,.72);font-size:1.12rem}.category-hero .eyebrow{color:#bcd0df}
.category-visual{position:relative;min-height:390px;border:1px solid rgba(255,255,255,.2);border-radius:32px;background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.02));box-shadow:0 35px 90px rgba(0,0,0,.22);transform:perspective(900px) rotateY(-8deg) rotateX(4deg)}
.category-visual:before{content:"";position:absolute;inset:42px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 3px,transparent 3px 65px),repeating-linear-gradient(0deg,rgba(255,255,255,.65) 0 2px,transparent 2px 65px);clip-path:polygon(0 9%,90% 0,100% 82%,14% 100%);opacity:.32}
.category-visual:after{content:"METAL / MODULAR / ACOUSTIC";position:absolute;right:28px;bottom:25px;font-size:.69rem;font-weight:900;letter-spacing:.16em;color:#d8e6ef}
.category-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:-34px;position:relative;z-index:2;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.metric{padding:22px 24px}.metric+.metric{border-left:1px solid var(--line)}.metric b{display:block;color:var(--brand);font-size:1.05rem}.metric small{color:var(--muted)}
.category-tabs{position:sticky;top:82px;z-index:15;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.category-tabs-inner{display:flex;gap:8px;overflow:auto;padding:13px 0}.category-tab{white-space:nowrap;padding:10px 16px;border-radius:999px;color:var(--muted);font-size:.84rem;font-weight:800}.category-tab.active,.category-tab:hover{color:#fff;background:var(--brand)}
.catalog-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:34px;align-items:start}
.filter-panel{position:sticky;top:152px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff}.filter-panel h3{margin:0 0 18px}.filter-group{display:grid;gap:7px;margin:0 0 15px}.filter-group label{font-size:.75rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.filter-group input,.filter-group select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.filter-reset{border:0;background:transparent;color:var(--brand);font-weight:850;cursor:pointer;padding:6px 0}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.catalog-toolbar p{margin:0;color:var(--muted)}
.system-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.system-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#fff;transition:transform .22s,box-shadow .22s,border-color .22s}.system-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--brand-300)}.system-card.is-hidden{display:none}
.system-visual{position:relative;height:230px;overflow:hidden;background-color:var(--brand-50);border-bottom:1px solid var(--line)}
.system-visual:before{content:"";position:absolute;inset:28px;filter:drop-shadow(0 22px 20px rgba(32,58,80,.13));transform:perspective(800px) rotateX(58deg) rotateZ(-12deg);transform-origin:center}
.visual--lay-on:before{background:repeating-linear-gradient(90deg,var(--brand-500) 0 3px,transparent 3px 62px),repeating-linear-gradient(0deg,var(--brand-500) 0 3px,#fff 3px 62px)}
.visual--lay-in:before{background:repeating-linear-gradient(90deg,var(--brand-700) 0 4px,transparent 4px 64px),repeating-linear-gradient(0deg,var(--brand-700) 0 4px,#dce7ef 4px 64px);box-shadow:inset 0 0 0 14px rgba(255,255,255,.65)}
.visual--clip-in:before{background:repeating-linear-gradient(90deg,#fff 0 59px,var(--brand-200) 59px 61px),repeating-linear-gradient(0deg,#fff 0 59px,var(--brand-200) 59px 61px)}
.visual--hook-on:before{background:repeating-linear-gradient(90deg,#fff 0 118px,var(--brand-300) 118px 121px),repeating-linear-gradient(0deg,#fff 0 55px,var(--brand-200) 55px 58px)}
.visual--bandraster-box:before{background:repeating-linear-gradient(90deg,var(--brand-700) 0 12px,#f8fbfd 12px 94px),repeating-linear-gradient(0deg,var(--brand-700) 0 12px,transparent 12px 94px)}
.visual--bandraster-cd:before{background:repeating-linear-gradient(90deg,var(--brand-700) 0 10px,#fff 10px 78px),linear-gradient(#eef4f8,#eef4f8)}
.visual--corridor:before{background:repeating-linear-gradient(90deg,#fff 0 145px,var(--brand-300) 145px 149px),linear-gradient(#eef4f8,#eef4f8)}
.system-card-body{padding:23px}.system-kicker{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.system-card h3{margin:11px 0 3px;font-size:1.45rem;letter-spacing:-.025em}.system-original{margin:0 0 12px;color:var(--brand);font-size:.78rem;font-weight:800}.system-card-desc{margin:0;color:var(--muted);min-height:75px}.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.tag{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:var(--brand-50);color:var(--brand-700);font-size:.72rem;font-weight:850}.system-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.system-card-footer a{color:var(--brand);font-weight:900}.system-card-footer small{color:var(--muted)}
.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.family-card{min-height:185px;padding:25px;border:1px solid var(--line);border-radius:18px;background:#fff}.family-card b{display:block;margin-bottom:7px;font-size:1.15rem}.family-card p{margin:0;color:var(--muted)}.family-card small{display:block;margin-top:18px;color:var(--brand);font-weight:900}
.tech-band{overflow:hidden;border-radius:30px;background:var(--brand-900);color:#fff}.tech-band-grid{display:grid;grid-template-columns:1fr 1fr}.tech-band-copy{padding:58px}.tech-band-copy h2{font-size:clamp(2.1rem,4vw,3.5rem);line-height:1.05;margin:0 0 17px}.tech-band-copy p{color:rgba(255,255,255,.7)}.tech-list{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:26px}.tech-list span{padding:13px;border:1px solid rgba(255,255,255,.14);border-radius:11px;font-weight:800}.tech-pattern{min-height:420px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.1) 0 1px,transparent 1px 26px),radial-gradient(circle at 50% 50%,rgba(113,152,182,.34),transparent 55%)}
/* Product detail */
.product-hero{padding:58px 0 76px;background:linear-gradient(180deg,var(--brand-50),#fff)}.product-hero-grid{display:grid;grid-template-columns:1fr .9fr;gap:58px;align-items:center}.product-hero h1{margin:0;font-size:clamp(3rem,6vw,5.6rem);line-height:.96;letter-spacing:-.06em}.product-original{color:var(--brand);font-size:.82rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.product-lead{font-size:1.12rem;color:var(--muted);max-width:720px}.product-badges{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}.product-diagram{position:relative;min-height:460px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:var(--shadow)}.product-diagram .system-visual{position:absolute;inset:28px;height:auto;border:0;border-radius:20px}.dimension-line{position:absolute;color:var(--brand);font-size:.72rem;font-weight:900}.dimension-line.horizontal{left:18%;right:18%;bottom:24px;border-top:1px solid var(--brand);text-align:center;padding-top:7px}.dimension-line.vertical{top:20%;bottom:20%;right:18px;border-left:1px solid var(--brand);writing-mode:vertical-rl;padding-left:7px;text-align:center}.anchor-nav{position:sticky;top:82px;z-index:14;border-block:1px solid var(--line);background:rgba(255,255,255,.95);backdrop-filter:blur(12px)}.anchor-nav .container{display:flex;gap:7px;overflow:auto;padding:11px 0}.anchor-nav a{padding:9px 13px;white-space:nowrap;border-radius:999px;font-size:.8rem;font-weight:850}.anchor-nav a:hover{background:var(--brand-50);color:var(--brand)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.feature-card{padding:25px;border:1px solid var(--line);border-radius:18px}.feature-card span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-weight:900}.feature-card h3{margin:17px 0 7px}.feature-card p{margin:0;color:var(--muted)}
.spec-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:28px}.spec-summary{padding:28px;border-radius:20px;background:var(--brand-900);color:#fff}.spec-summary h3{margin-top:0}.spec-summary p{color:rgba(255,255,255,.7)}.spec-table{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}.spec-table th,.spec-table td{padding:15px 17px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.spec-table th{width:34%;background:var(--surface);font-size:.79rem;text-transform:uppercase;letter-spacing:.06em}.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.component-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;counter-reset:component}.component{position:relative;padding:18px 18px 18px 58px;border:1px solid var(--line);border-radius:14px;background:#fff}.component:before{counter-increment:component;content:counter(component);position:absolute;left:17px;top:17px;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:#fff;font-size:.72rem;font-weight:900}.component b{display:block}.component small{color:var(--muted)}
.document-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;border:1px solid var(--line);border-radius:15px;background:#fff}.document-card b{display:block}.document-card small{color:var(--muted)}
/* Design system */
.ds-header{padding:62px 0;background:var(--brand-900);color:#fff}.ds-header h1{font-size:clamp(3rem,6vw,5rem);margin:0;letter-spacing:-.06em}.ds-header p{max-width:700px;color:rgba(255,255,255,.72)}.ds-section{padding:62px 0;border-bottom:1px solid var(--line)}.ds-grid{display:grid;grid-template-columns:220px 1fr;gap:48px}.ds-intro h2{margin:0}.ds-intro p{color:var(--muted)}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.swatch{overflow:hidden;border:1px solid var(--line);border-radius:14px}.swatch-color{height:92px}.swatch-meta{padding:12px;background:#fff}.swatch-meta b,.swatch-meta code{display:block}.type-samples>*{margin-top:0}.component-demo{display:flex;flex-wrap:wrap;gap:12px}.spacing-row{display:flex;align-items:end;gap:15px;flex-wrap:wrap}.spacing-item{background:var(--brand-100);border:1px solid var(--brand-200);display:grid;place-items:center;color:var(--brand-800);font-size:.68rem;font-weight:900}
@media(max-width:980px){.category-hero-grid,.product-hero-grid,.tech-band-grid,.spec-layout,.ds-grid{grid-template-columns:1fr}.catalog-layout{grid-template-columns:1fr}.filter-panel{position:static}.category-metrics{grid-template-columns:repeat(2,1fr)}.metric:nth-child(3){border-left:0;border-top:1px solid var(--line)}.metric:nth-child(4){border-top:1px solid var(--line)}.family-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}.swatches{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.category-hero{padding-top:42px}.category-hero h1{font-size:3.8rem}.category-visual{min-height:300px}.category-metrics,.system-grid,.family-grid,.feature-grid,.component-list{grid-template-columns:1fr}.metric+.metric{border-left:0;border-top:1px solid var(--line)}.catalog-toolbar{align-items:flex-start;flex-direction:column}.tech-band-copy{padding:36px 25px}.tech-list{grid-template-columns:1fr}.product-diagram{min-height:360px}.swatches{grid-template-columns:1fr 1fr}}