/* ==========================================================================
   PEIHUA HARDWARE — Design System (compiled, no CDN)
   Quality target: exceeds protolabs.com
   ========================================================================== */

/* --- Design Tokens (30+) ------------------------------------------------- */
:root{
  /* Color — brand */
  --c-ink:        #0E1726;   /* primary deep */
  --c-ink-2:      #1A2538;
  --c-ink-3:      #2A3753;
  --c-brass:      #B08440;   /* accent — brushed brass */
  --c-brass-2:    #C99A4E;
  --c-brass-3:    #8A6630;
  --c-copper:     #C56A3A;   /* warm accent */
  --c-steel:      #6B7785;
  --c-line:       #D9D3C7;
  --c-line-2:     #B8B0A1;
  --c-surface:    #F6F2EA;   /* warm light surface */
  --c-surface-2:  #EDE6D7;
  --c-surface-3:  #FFFFFF;
  --c-fog:        #F1EEE8;
  --c-ink-text:   #0E1726;
  --c-body:       #3C4555;
  --c-mute:       #6B7785;
  --c-success:    #1F7A4D;
  --c-danger:     #B0382E;

  /* Typography */
  --ff-sans:  "Inter", "SF Pro Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ff-disp:  "Fraunces", "Source Serif Pro", "Georgia", "Times New Roman", serif;
  --ff-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-12: .75rem;   --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem;
  --fs-16: 1rem;     --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-22: 1.375rem;
  --fs-24: 1.5rem;   --fs-28: 1.75rem;  --fs-32: 2rem;    --fs-36: 2.25rem;
  --fs-42: 2.625rem; --fs-48: 3rem;     --fs-56: 3.5rem;  --fs-64: 4rem;
  --fs-72: 4.5rem;   --fs-84: 5.25rem;

  --lh-tight: 1.08; --lh-snug: 1.2; --lh-base: 1.55; --lh-loose: 1.75;

  /* Spacing (4px base) */
  --s-1: .25rem; --s-2: .5rem;  --s-3: .75rem; --s-4: 1rem;
  --s-5: 1.25rem;--s-6: 1.5rem; --s-8: 2rem;   --s-10: 2.5rem;
  --s-12: 3rem;  --s-14: 3.5rem;--s-16: 4rem;  --s-20: 5rem;
  --s-24: 6rem;  --s-28: 7rem;  --s-32: 8rem;  --s-40: 10rem;

  /* Radius */
  --r-2: 2px; --r-3: 3px; --r-4: 4px; --r-6: 6px; --r-8: 8px;
  --r-12: 12px; --r-16: 16px; --r-24: 24px; --r-pill: 999px;

  /* Shadow — layered, subtle */
  --sh-1: 0 1px 2px rgba(14,23,38,.05), 0 1px 1px rgba(14,23,38,.03);
  --sh-2: 0 4px 12px rgba(14,23,38,.06), 0 2px 4px rgba(14,23,38,.04);
  --sh-3: 0 12px 32px rgba(14,23,38,.08), 0 4px 12px rgba(14,23,38,.05);
  --sh-4: 0 24px 56px rgba(14,23,38,.12), 0 8px 24px rgba(14,23,38,.06);
  --sh-inset: inset 0 0 0 1px rgba(14,23,38,.06);

  /* Layout */
  --container: 1320px;
  --container-narrow: 980px;
  --header-h: 76px;
  --transition: 220ms cubic-bezier(.2,.7,.2,1);

  /* z */
  --z-header: 50; --z-mega: 49; --z-overlay: 80; --z-float: 90;
}

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--ff-sans); font-size:var(--fs-16); line-height:var(--lh-base);
  color:var(--c-body); background:var(--c-surface-3); -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
img,picture,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:600; color:var(--c-ink-text); line-height:var(--lh-snug); letter-spacing:-.01em; }
p{ margin:0; }
hr{ border:0; height:1px; background:var(--c-line); margin:var(--s-12) 0; }
::selection{ background:var(--c-brass); color:#fff; }

/* --- Utilities (container, grid, type, btn, badge, card) ---------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s-6); }
.container-narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--s-6); }
.flex{ display:flex; } .iflex{ display:inline-flex; } .grid{ display:grid; }
.between{ justify-content:space-between; } .center{ justify-content:center; } .align-c{ align-items:center; }
.gap-2{ gap:var(--s-2); } .gap-3{ gap:var(--s-3); } .gap-4{ gap:var(--s-4); } .gap-6{ gap:var(--s-6); } .gap-8{ gap:var(--s-8); }
.col{ flex-direction:column; } .wrap{ flex-wrap:wrap; } .grow{ flex:1; }
.hide{ display:none !important; }
.mt-2{margin-top:var(--s-2);}.mt-4{margin-top:var(--s-4);}.mt-6{margin-top:var(--s-6);}.mt-8{margin-top:var(--s-8);}.mt-12{margin-top:var(--s-12);}.mt-16{margin-top:var(--s-16);}
.mb-2{margin-bottom:var(--s-2);}.mb-4{margin-bottom:var(--s-4);}.mb-6{margin-bottom:var(--s-6);}.mb-8{margin-bottom:var(--s-8);}.mb-12{margin-bottom:var(--s-12);}
.text-mute{ color:var(--c-mute); } .text-ink{ color:var(--c-ink-text); } .text-brass{ color:var(--c-brass); }
.text-12{ font-size:var(--fs-12);} .text-13{ font-size:var(--fs-13);} .text-14{ font-size:var(--fs-14);} .text-15{ font-size:var(--fs-15);}
.text-18{ font-size:var(--fs-18);} .text-20{ font-size:var(--fs-20);} .text-22{ font-size:var(--fs-22);} .text-24{ font-size:var(--fs-24);}
.text-28{ font-size:var(--fs-28);} .text-32{ font-size:var(--fs-32);} .text-36{ font-size:var(--fs-36);} .text-42{ font-size:var(--fs-42);}
.text-48{ font-size:var(--fs-48);} .text-56{ font-size:var(--fs-56);} .text-64{ font-size:var(--fs-64);} .text-72{ font-size:var(--fs-72);}
.fw-5{font-weight:500}.fw-6{font-weight:600}.fw-7{font-weight:700}.fw-8{font-weight:800}
.upper{ text-transform:uppercase; letter-spacing:.08em; }
.disp{ font-family:var(--ff-disp); font-weight:500; letter-spacing:-.02em; line-height:var(--lh-tight); }
.mono{ font-family:var(--ff-mono); }

.eyebrow{ display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--fs-12); font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--c-brass-3); }
.eyebrow::before{ content:""; width:24px; height:1px; background:var(--c-brass); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); padding:.85rem 1.4rem; font-size:var(--fs-14); font-weight:600; letter-spacing:.02em; border-radius:var(--r-4); border:1px solid transparent; transition:all var(--transition); cursor:pointer; white-space:nowrap; }
.btn-primary{ background:var(--c-ink); color:#fff; }
.btn-primary:hover{ background:var(--c-ink-2); transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn-brass{ background:var(--c-brass); color:#fff; }
.btn-brass:hover{ background:var(--c-brass-3); transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn-ghost{ background:transparent; color:var(--c-ink); border-color:var(--c-ink); }
.btn-ghost:hover{ background:var(--c-ink); color:#fff; }
.btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn-outline:hover{ background:#fff; color:var(--c-ink); border-color:#fff; }
.btn-sm{ padding:.55rem .95rem; font-size:var(--fs-13); }
.btn-lg{ padding:1.05rem 1.75rem; font-size:var(--fs-15); }
.btn .arr{ transition:transform var(--transition); }
.btn:hover .arr{ transform:translateX(3px); }

.badge{ display:inline-flex; align-items:center; gap:var(--s-2); padding:.3rem .65rem; font-size:var(--fs-12); font-weight:600; border-radius:var(--r-pill); background:var(--c-surface-2); color:var(--c-ink); letter-spacing:.04em; }
.badge-brass{ background:var(--c-brass); color:#fff; }
.badge-ink{ background:var(--c-ink); color:#fff; }
.badge-line{ background:transparent; border:1px solid var(--c-line-2); color:var(--c-body); }

.card{ background:var(--c-surface-3); border-radius:var(--r-8); border:1px solid var(--c-line); overflow:hidden; transition:all var(--transition); }
.card:hover{ box-shadow:var(--sh-3); transform:translateY(-2px); border-color:var(--c-line-2); }
.card .body{ padding:var(--s-6); }

.tag{ display:inline-block; font-size:var(--fs-12); color:var(--c-mute); padding:.25rem .6rem; background:var(--c-fog); border-radius:var(--r-pill); }

.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--c-line) 20%,var(--c-line) 80%,transparent); margin:var(--s-12) 0; }

/* --- Header / Navigation ------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:var(--z-header); background:rgba(255,255,255,.92); backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--c-line); }
.topbar{ background:var(--c-ink); color:rgba(255,255,255,.85); font-size:var(--fs-12); }
.topbar .container{ display:flex; align-items:center; justify-content:space-between; height:36px; }
.topbar a{ color:rgba(255,255,255,.85); transition:color var(--transition); }
.topbar a:hover{ color:var(--c-brass-2); }
.topbar .meta{ display:flex; gap:var(--s-6); }
.topbar .meta span{ display:inline-flex; align-items:center; gap:var(--s-2); }
.topbar .cta{ display:flex; gap:var(--s-4); align-items:center; }

.nav-main{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:var(--s-8); }
.brand{ display:inline-flex; align-items:center; gap:var(--s-3); }
.brand img{ height:42px; width:auto; }
.brand .wordmark{ font-family:var(--ff-disp); font-weight:600; color:var(--c-ink); font-size:var(--fs-20); letter-spacing:-.01em; }
.brand .wordmark small{ display:block; font-family:var(--ff-sans); font-size:var(--fs-10); color:var(--c-mute); letter-spacing:.24em; text-transform:uppercase; font-weight:500; }

.nav{ display:flex; align-items:center; gap:var(--s-1); }
.nav-item{ position:relative; }
.nav-link{ display:inline-flex; align-items:center; gap:.4rem; padding:.9rem 1rem; font-size:var(--fs-14); font-weight:600; color:var(--c-ink); transition:color var(--transition); }
.nav-link .caret{ transition:transform var(--transition); }
.nav-item:hover .nav-link, .nav-link[aria-current="page"]{ color:var(--c-brass-3); }
.nav-item:hover .caret{ transform:rotate(180deg); }

.nav-cta{ display:flex; align-items:center; gap:var(--s-3); }
.nav-search{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border:1px solid var(--c-line); border-radius:var(--r-pill); color:var(--c-mute); font-size:var(--fs-13); }
.nav-search:hover{ border-color:var(--c-brass); color:var(--c-brass-3); }

/* Mega menu */
.mega{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); min-width:780px; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-12); box-shadow:var(--sh-4); padding:var(--s-8); opacity:0; pointer-events:none; transition:opacity var(--transition), transform var(--transition); }
.mega.wide{ min-width:980px; }
.nav-item:hover .mega{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-8); }
.mega-col h4{ font-size:var(--fs-12); text-transform:uppercase; letter-spacing:.18em; color:var(--c-mute); margin-bottom:var(--s-3); font-weight:600; }
.mega-list{ display:flex; flex-direction:column; gap:var(--s-2); }
.mega-list a{ display:flex; align-items:center; gap:var(--s-3); padding:.45rem 0; font-size:var(--fs-14); color:var(--c-ink); font-weight:500; transition:color var(--transition); }
.mega-list a:hover{ color:var(--c-brass-3); }
.mega-list a .dot{ width:6px; height:6px; border-radius:50%; background:var(--c-brass); opacity:0; transition:opacity var(--transition); }
.mega-list a:hover .dot{ opacity:1; }
.mega-feat{ background:var(--c-surface); border-radius:var(--r-8); padding:var(--s-5); display:flex; gap:var(--s-4); align-items:center; }
.mega-feat img{ width:84px; height:84px; object-fit:cover; border-radius:var(--r-6); }
.mega-feat .t{ font-weight:600; color:var(--c-ink); }
.mega-feat .d{ font-size:var(--fs-13); color:var(--c-mute); margin-top:.25rem; }

/* Mobile nav */
.nav-toggle{ display:none; }
.nav-drawer{ display:none; }
@media (max-width:1024px){
  .nav, .nav-cta .nav-search{ display:none; }
  .nav-toggle{ display:inline-flex; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid var(--c-line); border-radius:var(--r-4); }
  .nav-drawer{ display:block; position:fixed; inset:0; background:rgba(14,23,38,.5); opacity:0; pointer-events:none; transition:opacity var(--transition); z-index:var(--z-overlay); }
  .nav-drawer.open{ opacity:1; pointer-events:auto; }
  .nav-drawer .panel{ position:absolute; right:0; top:0; bottom:0; width:min(420px,90vw); background:#fff; padding:var(--s-6); overflow-y:auto; transform:translateX(100%); transition:transform var(--transition); }
  .nav-drawer.open .panel{ transform:translateX(0); }
  .nav-drawer .group{ border-top:1px solid var(--c-line); padding:var(--s-4) 0; }
  .nav-drawer .group h5{ font-size:var(--fs-12); text-transform:uppercase; letter-spacing:.16em; color:var(--c-mute); margin-bottom:var(--s-3); }
  .nav-drawer .group a{ display:block; padding:.4rem 0; color:var(--c-ink); font-weight:500; }
  .topbar .meta .hide-md{ display:none; }
}

/* --- Hero (home) --------------------------------------------------------- */
.hero{ position:relative; background:var(--c-ink); color:#fff; overflow:hidden; }
.hero-slider{ position:relative; }
.hero-slide{ position:relative; min-height:680px; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; align-items:stretch; }
.hero-slide .text{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:var(--s-20) var(--s-10); max-width:660px; margin-inline:auto; width:100%; }
.hero-slide .text h1{ color:#fff; font-size:clamp(2.4rem,4.2vw,3.8rem); max-width:20ch; }
.hero-slide .text .lede{ color:rgba(255,255,255,.82); font-size:clamp(1rem,1.25vw,1.15rem); max-width:48ch; margin-top:var(--s-5); }
.hero-slide .text .ctas{ display:flex; gap:var(--s-3); margin-top:var(--s-8); flex-wrap:wrap; }
.hero-slide .text .meta-strip{ display:flex; gap:var(--s-8); margin-top:var(--s-10); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.12); flex-wrap:wrap; }
.hero-slide .text .meta-strip .m{ display:flex; flex-direction:column; gap:.2rem; }
.hero-slide .text .meta-strip .v{ font-family:var(--ff-disp); font-size:var(--fs-28); color:var(--c-brass-2); font-weight:500; line-height:1; }
.hero-slide .text .meta-strip .l{ font-size:var(--fs-11); color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.16em; }
.hero-slide .visual{ position:relative; overflow:hidden; background:var(--c-ink-2); min-height:100%; }
.hero-slide .visual::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 60% 50%,rgba(176,132,64,.22),transparent 65%); pointer-events:none; z-index:1; }
.hero-slide .visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
/* contained product style for slides 2 & 3 */
.hero-slide.product .visual img{ object-fit:contain; padding:8% 10%; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
/* PC: bring text container to page-aligned */
@media (min-width:1100px){
  .hero-slide .text{ margin-left:max(var(--s-10), calc((100vw - var(--container))/2 + var(--s-10))); margin-right:auto; }
  .hero-slide .visual{ min-height:680px; }
}
.hero .dots button.on{ background:var(--c-brass-2) !important; }
@media (max-width:960px){
  .hero-slide{ grid-template-columns:1fr; min-height:auto; }
  .hero-slide .text{ padding:var(--s-12) var(--s-6); max-width:none; margin:0; }
  .hero-slide .visual{ aspect-ratio:16/10; min-height:0; }
  .hero-slide .text .meta-strip{ gap:var(--s-5); }
}

/* Section primitives */
section{ padding-block:var(--s-24); }
@media (max-width:768px){ section{ padding-block:var(--s-16); } }
.section-head{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); margin-bottom:var(--s-12); max-width:760px; }
.section-head.center{ align-items:center; text-align:center; margin-inline:auto; }
.section-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); }
.section-head p{ color:var(--c-mute); font-size:var(--fs-18); margin-top:.25rem; }
.section-head .row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s-6); width:100%; flex-wrap:wrap; }

/* Value strip (4-col features under hero) */
.values{ background:var(--c-surface); border-block:1px solid var(--c-line); }
.values .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.values .item{ padding:var(--s-8) var(--s-6); border-right:1px solid var(--c-line); display:flex; gap:var(--s-4); align-items:flex-start; }
.values .item:last-child{ border-right:0; }
.values .item .ic{ width:40px; height:40px; flex:none; color:var(--c-brass); }
.values .item h4{ font-size:var(--fs-16); margin-bottom:.35rem; }
.values .item p{ font-size:var(--fs-14); color:var(--c-mute); }
@media (max-width:900px){ .values .grid{ grid-template-columns:repeat(2,1fr); } .values .item{ border-bottom:1px solid var(--c-line); } .values .item:nth-child(2n){ border-right:0; } }
@media (max-width:560px){ .values .grid{ grid-template-columns:1fr; } .values .item{ border-right:0; } }

/* Category grid (home) */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6); }
@media (max-width:1024px){ .cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .cat-grid{ grid-template-columns:1fr; } }
.cat-tile{ position:relative; display:block; aspect-ratio:4/3; border-radius:var(--r-8); overflow:hidden; background:linear-gradient(135deg,#1A2538 0%,#0E1726 100%); }
.cat-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:14% 16% 28%; transition:transform 600ms cubic-bezier(.2,.7,.2,1); filter:drop-shadow(0 12px 28px rgba(0,0,0,.45)); }
.cat-tile:hover img{ transform:scale(1.05); }
.cat-tile .veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,23,38,0) 0%,rgba(14,23,38,0) 45%,rgba(14,23,38,.92)); }
.cat-tile .meta{ position:absolute; inset:auto var(--s-5) var(--s-5) var(--s-5); color:#fff; z-index:2; }
.cat-tile .meta .count{ font-size:var(--fs-12); color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.14em; }
.cat-tile .meta h3{ color:#fff; font-size:var(--fs-20); margin-top:.3rem; font-family:var(--ff-disp); font-weight:500; }
.cat-tile .meta .arrow{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem; font-size:var(--fs-13); color:var(--c-brass-2); font-weight:600; }

/* Product grid (cards) */
.prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-6); }
@media (max-width:1024px){ .prod-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .prod-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .prod-grid{ grid-template-columns:1fr; } }
.prod-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-8); overflow:hidden; transition:all var(--transition); }
.prod-card:hover{ border-color:var(--c-brass); box-shadow:var(--sh-3); transform:translateY(-2px); }
.prod-card .pic{ aspect-ratio:1/1; background:var(--c-fog); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.prod-card .pic img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms ease; }
.prod-card:hover .pic img{ transform:scale(1.04); }
.prod-card .info{ padding:var(--s-5); display:flex; flex-direction:column; gap:.25rem; flex:1; }
.prod-card .info .cat{ font-size:var(--fs-12); color:var(--c-mute); text-transform:uppercase; letter-spacing:.14em; }
.prod-card .info h3{ font-size:var(--fs-15); color:var(--c-ink); font-weight:600; line-height:var(--lh-snug); }
.prod-card .info .code{ font-family:var(--ff-mono); font-size:var(--fs-12); color:var(--c-brass-3); }
.prod-card .info .cta{ margin-top:auto; padding-top:var(--s-3); display:inline-flex; align-items:center; gap:.35rem; font-size:var(--fs-13); font-weight:600; color:var(--c-ink); }
.prod-card .info .cta:hover{ color:var(--c-brass-3); }

/* --- Two-column About / story ------------------------------------------- */
.story{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s-16); align-items:center; }
.story .pics{ position:relative; aspect-ratio:5/6; }
.story .pics .a{ position:absolute; inset:0; border-radius:var(--r-12); overflow:hidden; box-shadow:var(--sh-3); }
.story .pics .b{ position:absolute; left:38%; top:42%; width:55%; aspect-ratio:1/1; border-radius:var(--r-12); overflow:hidden; box-shadow:var(--sh-3); border:6px solid var(--c-surface); }
.story .pics img{ width:100%; height:100%; object-fit:cover; }
.story .stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-6); margin-top:var(--s-10); }
.story .stats .s{ padding:var(--s-5); border:1px solid var(--c-line); border-radius:var(--r-8); background:#fff; }
.story .stats .v{ font-family:var(--ff-disp); font-size:var(--fs-36); color:var(--c-brass-3); font-weight:500; }
.story .stats .l{ font-size:var(--fs-13); color:var(--c-mute); }
@media (max-width:960px){ .story{ grid-template-columns:1fr; gap:var(--s-10); } .story .pics{ aspect-ratio:5/4; } .story .pics .b{ left:50%; } }

/* --- Process / Capabilities -------------------------------------------- */
.process{ background:var(--c-ink); color:#fff; }
.process h2{ color:#fff; }
.process .grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--s-6); margin-top:var(--s-10); }
.process .step{ position:relative; padding:var(--s-6); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--r-8); }
.process .step .n{ font-family:var(--ff-disp); font-size:var(--fs-36); color:var(--c-brass-2); font-weight:500; }
.process .step h4{ color:#fff; font-size:var(--fs-16); margin:.5rem 0 .4rem; }
.process .step p{ color:rgba(255,255,255,.72); font-size:var(--fs-14); }
@media (max-width:960px){ .process .grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .process .grid{ grid-template-columns:repeat(2,1fr); } }

/* --- Industries / Use cases -------------------------------------------- */
.use-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-6); }
@media (max-width:900px){ .use-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .use-grid{ grid-template-columns:1fr; } }
.use-card{ position:relative; aspect-ratio:4/3; border-radius:var(--r-8); overflow:hidden; background:var(--c-fog); }
.use-card img{ width:100%; height:100%; object-fit:cover; transition:transform 500ms ease; }
.use-card:hover img{ transform:scale(1.04); }
.use-card .veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,23,38,0) 30%,rgba(14,23,38,.85)); }
.use-card .meta{ position:absolute; inset:auto var(--s-5) var(--s-5) var(--s-5); color:#fff; }
.use-card .meta .tag{ background:rgba(255,255,255,.15); color:#fff; backdrop-filter:blur(8px); }
.use-card .meta h3{ color:#fff; font-family:var(--ff-disp); font-size:var(--fs-22); font-weight:500; margin-top:.5rem; }

/* --- Testimonial / Trust strip ----------------------------------------- */
.trust{ background:var(--c-surface); border-block:1px solid var(--c-line); }
.trust .row{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-8); align-items:center; }
@media (max-width:900px){ .trust .row{ grid-template-columns:repeat(2,1fr); gap:var(--s-6); } }
.trust .row .cell{ display:flex; align-items:center; justify-content:center; padding:var(--s-3); color:var(--c-mute); font-family:var(--ff-disp); font-size:var(--fs-20); font-weight:500; letter-spacing:.04em; }

/* --- FAQ ---------------------------------------------------------------- */
.faq{ max-width:860px; margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--c-line); padding:var(--s-5) 0; }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); cursor:pointer; list-style:none; font-size:var(--fs-18); color:var(--c-ink); font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .plus{ width:28px; height:28px; border:1px solid var(--c-line); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:all var(--transition); flex:none; }
.faq details[open] summary .plus{ background:var(--c-brass); border-color:var(--c-brass); color:#fff; transform:rotate(45deg); }
.faq .ans{ padding-top:var(--s-4); color:var(--c-mute); font-size:var(--fs-16); line-height:var(--lh-loose); max-width:70ch; }

/* --- CTA banner --------------------------------------------------------- */
.cta-banner{ background:linear-gradient(135deg,var(--c-ink) 0%,var(--c-ink-2) 100%); color:#fff; border-radius:var(--r-16); padding:var(--s-16) var(--s-12); display:grid; grid-template-columns:1.4fr 1fr; gap:var(--s-10); align-items:center; position:relative; overflow:hidden; }
.cta-banner::after{ content:""; position:absolute; right:-10%; top:-30%; width:60%; height:160%; background:radial-gradient(circle,rgba(176,132,64,.35),transparent 60%); pointer-events:none; }
.cta-banner h2{ color:#fff; }
.cta-banner p{ color:rgba(255,255,255,.78); margin-top:.5rem; }
.cta-banner .ctas{ display:flex; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-6); }
@media (max-width:900px){ .cta-banner{ grid-template-columns:1fr; padding:var(--s-10) var(--s-6); } }

/* --- Footer ------------------------------------------------------------- */
footer.site-footer{ background:var(--c-ink); color:rgba(255,255,255,.78); padding-top:var(--s-20); }
footer .grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--s-10); padding-bottom:var(--s-16); border-bottom:1px solid rgba(255,255,255,.08); }
@media (max-width:960px){ footer .grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ footer .grid{ grid-template-columns:1fr; } }
footer h5{ color:#fff; font-size:var(--fs-12); text-transform:uppercase; letter-spacing:.18em; margin-bottom:var(--s-4); }
footer .links{ display:flex; flex-direction:column; gap:.6rem; }
footer .links a{ color:rgba(255,255,255,.72); font-size:var(--fs-14); transition:color var(--transition); }
footer .links a:hover{ color:var(--c-brass-2); }
footer .brand{ color:#fff; font-family:var(--ff-disp); font-size:var(--fs-22); font-weight:600; }
footer .about{ font-size:var(--fs-14); margin-top:var(--s-3); max-width:38ch; }
footer .contact{ font-size:var(--fs-14); line-height:var(--lh-loose); }
footer .bottom{ display:flex; justify-content:space-between; align-items:center; padding-block:var(--s-6); font-size:var(--fs-13); color:rgba(255,255,255,.55); flex-wrap:wrap; gap:var(--s-3); }
footer .socials{ display:flex; gap:var(--s-2); }
footer .socials a{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.15); border-radius:50%; color:rgba(255,255,255,.7); transition:all var(--transition); }
footer .socials a:hover{ background:var(--c-brass); border-color:var(--c-brass); color:#fff; }

/* --- Floating WhatsApp / Contact ---------------------------------------- */
.floater{ position:fixed; right:20px; bottom:20px; z-index:var(--z-float); display:flex; flex-direction:column; gap:10px; }
.floater a{ width:54px; height:54px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; box-shadow:var(--sh-3); transition:transform var(--transition); }
.floater a:hover{ transform:translateY(-2px) scale(1.05); }
.floater .wa{ background:#25D366; }
.floater .em{ background:var(--c-ink); }

/* --- Page primitives (breadcrumb, hero-sub, side card) ------------------ */
.crumbs{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-13); color:var(--c-mute); padding-block:var(--s-4); }
.crumbs a{ color:var(--c-mute); }
.crumbs a:hover{ color:var(--c-brass-3); }
.crumbs .sep{ color:var(--c-line-2); }
.crumbs .cur{ color:var(--c-ink); font-weight:600; }

.page-hero{ position:relative; padding-block:var(--s-20) var(--s-16); background:var(--c-ink); color:#fff; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; background:url("../img/hero/pattern.svg") center/600px; opacity:.06; }
.page-hero h1{ color:#fff; font-family:var(--ff-disp); font-weight:500; font-size:clamp(2rem,3.6vw,3.2rem); max-width:24ch; }
.page-hero .lede{ color:rgba(255,255,255,.78); max-width:56ch; margin-top:var(--s-4); font-size:clamp(1rem,1.2vw,1.1rem); }
.page-hero .meta{ display:flex; gap:var(--s-6); margin-top:var(--s-6); flex-wrap:wrap; }
.page-hero .meta span{ font-size:var(--fs-12); color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.16em; }
.page-hero .meta strong{ color:var(--c-brass-2); font-weight:500; margin-right:.4rem; }

/* Category page layout */
.cat-layout{ display:grid; grid-template-columns:280px 1fr; gap:var(--s-10); }
@media (max-width:960px){ .cat-layout{ grid-template-columns:1fr; } }
.side{ position:sticky; top:calc(var(--header-h) + 16px); align-self:start; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-12); padding:var(--s-6); }
.side h4{ font-size:var(--fs-12); text-transform:uppercase; letter-spacing:.18em; color:var(--c-mute); margin-bottom:var(--s-3); }
.side ul{ display:flex; flex-direction:column; gap:.2rem; }
.side li a{ display:flex; justify-content:space-between; align-items:center; padding:.55rem .7rem; border-radius:var(--r-4); font-size:var(--fs-14); color:var(--c-body); }
.side li a:hover, .side li a.on{ background:var(--c-surface); color:var(--c-ink); font-weight:600; }
.side li a .ct{ font-size:var(--fs-12); color:var(--c-mute); }
.side .filter{ margin-top:var(--s-5); padding-top:var(--s-5); border-top:1px dashed var(--c-line); }
.side .filter label{ display:flex; align-items:center; gap:.5rem; font-size:var(--fs-14); padding:.35rem 0; cursor:pointer; }

/* Product detail layout */
.pd{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s-12); }
@media (max-width:900px){ .pd{ grid-template-columns:1fr; } }
.pd-gallery{ position:sticky; top:calc(var(--header-h) + 16px); align-self:start; }
.pd-gallery .main{ aspect-ratio:1/1; background:var(--c-fog); border:1px solid var(--c-line); border-radius:var(--r-12); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.pd-gallery .main img{ width:100%; height:100%; object-fit:cover; }
.pd-gallery .thumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-2); margin-top:var(--s-3); }
.pd-gallery .thumbs button{ aspect-ratio:1/1; border:1px solid var(--c-line); border-radius:var(--r-6); overflow:hidden; background:var(--c-fog); padding:0; }
.pd-gallery .thumbs button.on{ border-color:var(--c-brass); box-shadow:0 0 0 2px rgba(176,132,64,.25); }
.pd-gallery .thumbs img{ width:100%; height:100%; object-fit:cover; }

.pd-info h1{ font-family:var(--ff-disp); font-weight:500; font-size:clamp(1.8rem,2.4vw,2.4rem); }
.pd-info .sub{ display:flex; gap:var(--s-3); align-items:center; color:var(--c-mute); margin-top:.5rem; }
.pd-info .sub .code{ font-family:var(--ff-mono); font-size:var(--fs-13); color:var(--c-brass-3); background:var(--c-surface); padding:.25rem .6rem; border-radius:var(--r-pill); }
.pd-info .badges{ display:flex; gap:.5rem; margin-top:var(--s-4); flex-wrap:wrap; }
.pd-info .lede{ margin-top:var(--s-5); font-size:var(--fs-18); color:var(--c-ink); line-height:var(--lh-loose); }
.pd-info .ctas{ display:flex; gap:var(--s-3); margin-top:var(--s-6); flex-wrap:wrap; }
.pd-info .quick{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3); margin-top:var(--s-6); }
.pd-info .quick .q{ padding:var(--s-3) var(--s-4); background:var(--c-surface); border-radius:var(--r-6); font-size:var(--fs-13); }
.pd-info .quick .q .k{ color:var(--c-mute); text-transform:uppercase; letter-spacing:.12em; font-size:var(--fs-12); }
.pd-info .quick .q .v{ color:var(--c-ink); font-weight:600; margin-top:.2rem; }

.spec-table{ width:100%; border-collapse:collapse; margin-top:var(--s-5); }
.spec-table tr{ border-bottom:1px solid var(--c-line); }
.spec-table th, .spec-table td{ padding:var(--s-3) var(--s-2); text-align:left; vertical-align:top; }
.spec-table th{ width:200px; color:var(--c-mute); font-weight:500; font-size:var(--fs-14); }
.spec-table td{ color:var(--c-ink); font-weight:500; }

/* Generic content */
.prose{ max-width:74ch; }
.prose p{ margin-block:1em; font-size:var(--fs-16); line-height:var(--lh-loose); color:var(--c-body); }
.prose h2{ font-size:var(--fs-28); margin-top:2em; margin-bottom:.5em; }
.prose h3{ font-size:var(--fs-20); margin-top:1.6em; margin-bottom:.4em; }
.prose ul{ list-style:disc; padding-left:1.4em; }
.prose ul li{ margin:.4em 0; }
.prose a{ color:var(--c-brass-3); border-bottom:1px solid currentColor; }
.prose blockquote{ border-left:3px solid var(--c-brass); padding:.5em 1em; background:var(--c-surface); margin:1em 0; color:var(--c-ink); }

/* Feature list with check icons */
.checks{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem 1.5rem; }
.checks li{ display:flex; align-items:flex-start; gap:.6rem; font-size:var(--fs-15); }
.checks li::before{ content:""; width:18px; height:18px; flex:none; margin-top:2px; background:var(--c-brass); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l4 4L19 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12l4 4L19 7' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat; }
@media (max-width:600px){ .checks{ grid-template-columns:1fr; } }

/* Tabs */
.tabs{ display:flex; gap:.4rem; border-bottom:1px solid var(--c-line); margin-bottom:var(--s-6); flex-wrap:wrap; }
.tabs .t{ padding:.7rem 1rem; font-size:var(--fs-14); font-weight:600; color:var(--c-mute); border-bottom:2px solid transparent; cursor:pointer; }
.tabs .t.on{ color:var(--c-ink); border-color:var(--c-brass); }

/* Tag chips */
.chip{ display:inline-flex; padding:.3rem .75rem; border:1px solid var(--c-line); border-radius:var(--r-pill); font-size:var(--fs-12); color:var(--c-body); background:#fff; margin:0 .35rem .5rem 0; }

/* Skeleton/reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Print */
@media print{
  .site-header, .floater, .nav, footer, .cta-banner{ display:none !important; }
  body{ color:#000; background:#fff; }
}

/* Utility: text balance on headings */
h1,h2,h3{ text-wrap:balance; }