/* ==========================================================================
   MO-TEK Design System — site stylesheet
   Ported from 摩科国际贸易设计系统 (Claude Design). Apple-style, navy #1E4F79.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Brand navy scale */
  --navy-900:#0e2237; --navy-800:#143147; --navy-700:#1e4f79; --navy-600:#2c6091;
  --navy-500:#315b84; --navy-400:#6c9ac4; --navy-300:#a8c3dc; --navy-200:#dce6f1;
  --navy-100:#edf3f9; --navy-50:#f5f8fb;
  /* Apple-neutral gray ramp */
  --ink-900:#1d1d1f; --ink-800:#2f3033; --ink-700:#424245; --ink-600:#6e6e73;
  --ink-500:#86868b; --ink-400:#a1a1a6; --ink-300:#c7c7cc; --ink-200:#d2d2d7;
  --ink-100:#e8e8ed; --ink-50:#f5f5f7; --paper:#ffffff; --bg:#f5f5f7;
  /* Accent + brass */
  --accent-500:#1e4f79; --accent-600:#17405f;
  --brass-700:#855e24; --brass-600:#9a6e2e; --brass-500:#b98a3e; --brass-400:#cba35e; --brass-100:#f3ead9;
  /* Status */
  --success:#1a7f43; --success-bg:#e6f3ea; --warning:#9a6a12; --warning-bg:#f6eede;
  --danger:#b0322c; --danger-bg:#f6e6e5;
  /* Semantic */
  --brand:var(--navy-700); --brand-hover:var(--navy-800); --accent:var(--accent-500); --accent-hover:var(--accent-600);
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-600); --text-faint:var(--ink-500);
  --text-link:var(--navy-600); --text-link-hover:var(--navy-800);
  --surface-page:var(--bg); --surface-card:var(--paper); --surface-header:var(--navy-700); --surface-dark:#0e2237;
  --border-subtle:var(--ink-200); --border-default:var(--ink-300); --divider:var(--ink-100);
  /* Type */
  --font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Manrope','PingFang SC','Noto Sans SC','Segoe UI','Microsoft YaHei',sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Manrope','PingFang SC','Noto Sans SC','Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular','Cascadia Code',monospace;
  --font-ui:var(--font-sans);
  /* Spacing / layout */
  --container-max:1200px; --gutter:24px;
  /* Radii */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px; --radius-2xl:30px; --radius-pill:980px;
  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04); --shadow-sm:0 2px 8px rgba(0,0,0,.05);
  --shadow-md:0 6px 24px rgba(0,0,0,.07); --shadow-lg:0 18px 48px rgba(0,0,0,.10); --shadow-xl:0 32px 80px rgba(0,0,0,.14);
  --shadow-focus:0 0 0 4px rgba(49,91,132,.25);
  /* Motion */
  --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:150ms; --dur-base:260ms;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text-body);font-family:var(--font-ui);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
h1,h2,h3,h4{margin:0;color:var(--text-strong);font-weight:600;letter-spacing:-.02em;font-family:var(--font-display)}
p{margin:0}
.mono{font-family:var(--font-mono)}
.container{max-width:var(--container-max);margin:0 auto;padding:0 32px}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
section{position:relative}

/* ---------- Buttons (pill) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-ui);
  font-weight:500;line-height:1;border-radius:var(--radius-pill);cursor:pointer;
  border:1px solid transparent;padding:11px 22px;min-height:42px;font-size:15px;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn:hover{color:inherit}
.btn-sm{padding:8px 16px;min-height:34px;font-size:13px;gap:6px}
.btn-lg{padding:15px 30px;min-height:52px;font-size:17px;gap:10px}
.btn-primary{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.btn-primary:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.btn-accent{background:var(--ink-900);color:#fff;border-color:var(--ink-900)}
.btn-accent:hover{background:#000;border-color:#000;color:#fff}
.btn-secondary{background:var(--ink-50);color:var(--ink-900);border-color:var(--ink-50)}
.btn-secondary:hover{background:var(--ink-100);border-color:var(--ink-100);color:var(--ink-900)}
.btn-ghost{background:transparent;color:var(--navy-700);border-color:transparent}
.btn-ghost:hover{background:var(--navy-100);color:var(--navy-700)}
.btn svg{width:1.05em;height:1.05em;stroke-width:1.75}

/* ---------- Badges / Tags ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;line-height:1;
  padding:4px 9px;border-radius:var(--radius-pill)}
.badge-brass{background:var(--brass-500);color:#fff}
.badge-success{background:var(--success-bg);color:var(--success)}
.badge-navy{background:var(--navy-100);color:var(--navy-700)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;line-height:1;
  padding:7px 12px;border-radius:var(--radius-sm);background:var(--navy-50);color:var(--navy-700);
  border:1px solid var(--navy-200);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.tag:hover{background:var(--navy-100)}
.tag.is-active{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-subtle)}
.site-header .bar{max-width:var(--container-max);margin:0 auto;padding:0 32px;height:68px;
  display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px}
.brand .zh{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--navy-700);line-height:1.1}
.brand .en{font-size:10px;letter-spacing:.08em;color:var(--ink-500)}
.site-nav{display:flex;gap:4px;margin-left:auto}
.site-nav a{font-size:14px;font-weight:500;color:var(--ink-600);padding:8px 12px;border-radius:var(--radius-sm)}
.site-nav a:hover{color:var(--navy-700);background:var(--navy-50)}
.site-nav a.is-active{color:var(--navy-700);font-weight:600}
.header-cta{display:flex;align-items:center}
.nav-toggle{display:none}
.lang-switch{display:flex;gap:2px;align-items:center;margin-left:10px;padding-left:10px;border-left:1px solid var(--border-subtle)}
.lang-switch a{font-size:13px;color:var(--ink-500);padding:5px 8px;border-radius:var(--radius-sm);font-weight:500;line-height:1}
.lang-switch a:hover{background:var(--ink-50);color:var(--navy-700)}
.lang-switch a.ls-active{color:var(--navy-700);font-weight:600}

/* ---------- Hero ---------- */
.hero{background:#fff}
.hero .grid{max-width:1120px;margin:0 auto;padding:100px 32px 88px;display:grid;
  grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.hero h1{font-size:68px;line-height:1.05;letter-spacing:-.035em;color:var(--ink-900);margin:16px 0 0;font-weight:600}
.hero .lead{font-size:21px;color:var(--ink-600);line-height:1.5;margin:22px 0 0;max-width:460px;letter-spacing:-.01em}
.hero .cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero .stats{display:flex;gap:52px;margin-top:56px;flex-wrap:wrap}
.stat .n{font-family:var(--font-display);font-weight:600;font-size:44px;letter-spacing:-.03em;color:var(--ink-900);line-height:1}
.stat .n small{font-size:22px}
.stat .l{font-size:13px;color:var(--ink-500);margin-top:6px}
.hero .shot{aspect-ratio:4/3;border-radius:var(--radius-2xl);background:var(--ink-50);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);overflow:hidden}
.shot-mono{font-family:var(--font-mono);font-size:13px;color:var(--ink-400)}

/* ---------- Sections ---------- */
.section{max-width:1120px;margin:0 auto;padding:96px 32px 8px}
.section-head h2{font-size:40px;color:var(--ink-900);margin:10px 0 0;letter-spacing:-.03em}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Category strip */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
.cat-card{display:block;text-align:left;background:var(--ink-50);border:1px solid transparent;
  border-radius:var(--radius-lg);padding:20px 20px 22px;transition:box-shadow .3s,transform .3s}
.cat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.cat-card .sku{font-family:var(--font-mono);font-size:11px;color:var(--ink-400)}
.cat-card .zh{font-size:16px;font-weight:600;color:var(--navy-700);margin-top:8px}
.cat-card .en{font-size:13px;color:var(--ink-500)}

/* Product cards */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.prod-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow var(--dur-base),transform var(--dur-base);display:block}
.prod-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.prod-card .shot{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--navy-50),var(--navy-50) 10px,var(--navy-100) 10px,var(--navy-100) 20px)}
.prod-card .shot .cap{font-family:var(--font-mono);font-size:12px;color:var(--ink-400)}
.prod-card .shot .badge-brass{position:absolute;top:10px;left:10px}
.prod-card .body{padding:16px}
.prod-card .cat{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brass-600);margin-bottom:6px}
.prod-card .zh{font-size:15px;font-weight:600;color:var(--text-strong);line-height:1.3}
.prod-card .en{font-size:13px;color:var(--text-muted);margin-top:2px}
.prod-card .sku{font-family:var(--font-mono);font-size:12px;color:var(--ink-500);margin-top:10px;padding-top:10px;border-top:1px solid var(--ink-100)}

/* Capability band */
.band{margin-top:96px;background:var(--surface-dark);color:#fff}
.band .grid{max-width:1120px;margin:0 auto;padding:72px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.band .zh{font-size:19px;font-weight:600;margin-top:14px;letter-spacing:-.01em}
.band .en{font-size:14px;color:var(--navy-300);margin-top:4px}
.band svg{width:26px;height:26px;stroke:#fff;stroke-width:1.75}

/* ---------- DataTable (signature) ---------- */
.ds-table-wrap{overflow-x:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
table.ds-table{width:100%;border-collapse:collapse;font-size:13px;font-family:var(--font-ui)}
table.ds-table th{background:var(--surface-header);color:#fff;text-align:left;font-weight:600;padding:11px 16px;white-space:nowrap}
table.ds-table td{padding:10px 16px;border-bottom:1px solid var(--ink-100);color:var(--text-body);vertical-align:top}
table.ds-table tbody tr:nth-child(even){background:var(--navy-200)}
table.ds-table td.strong{color:var(--navy-700);font-weight:600;white-space:nowrap}
table.ds-table td.mono{font-family:var(--font-mono)}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--ink-700)}
.field input,.field select,.field textarea{font-family:var(--font-ui);font-size:15px;color:var(--ink-900);
  background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:11px 14px;width:100%;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy-500);box-shadow:var(--shadow-focus)}
.field textarea{min-height:110px;resize:vertical}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-900);color:#cdd8e6}
.site-footer .cols{max-width:var(--container-max);margin:0 auto;padding:48px 32px 28px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px}
.site-footer .co{font-family:var(--font-display);font-weight:700;font-size:20px;color:#fff}
.site-footer .co-en{font-size:12px;letter-spacing:.06em;color:var(--navy-300);margin-top:4px}
.site-footer .blurb{font-size:14px;margin-top:16px;line-height:1.7;max-width:340px}
.site-footer .col h4{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-300);margin-bottom:12px;font-family:var(--font-ui)}
.site-footer .col a,.site-footer .col div{display:block;font-size:14px;color:#cdd8e6;margin-bottom:8px}
.site-footer .col a:hover{color:#fff}
.site-footer .contact{font-family:var(--font-mono);font-size:13px;line-height:1.9}
.site-footer .legal{border-top:1px solid var(--navy-800);padding:16px 32px;font-size:12px;color:var(--navy-400);
  max-width:var(--container-max);margin:0 auto}

/* ---------- Page intro / breadcrumb ---------- */
.page-intro{max-width:var(--container-max);margin:0 auto;padding:52px 32px 0}
.page-intro h1{font-size:44px;letter-spacing:-.03em;color:var(--ink-900);margin:10px 0 0}
.page-intro p{font-size:15px;color:var(--ink-500);margin:8px 0 0}
.crumb{font-size:13px;color:var(--ink-500);margin-bottom:20px}
.crumb a{color:var(--ink-500)} .crumb a:hover{color:var(--navy-700)} .crumb .here{color:var(--navy-700)}

/* ---------- Inquiry modal ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(14,34,55,.45);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:24px}
.modal-scrim.open{display:flex}
.modal{background:#fff;border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);max-width:520px;width:100%;
  padding:32px;max-height:90vh;overflow:auto}
.modal h3{font-size:24px;letter-spacing:-.02em}
.modal .sub{font-size:14px;color:var(--ink-500);margin-top:4px}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

/* ---------- Contact ---------- */
.contact-grid{max-width:var(--container-max);margin:0 auto;padding:48px 32px 80px;display:grid;grid-template-columns:.9fr 1.1fr;gap:56px}
.info-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--ink-100)}
.info-ic{width:40px;height:40px;border-radius:var(--radius-md);background:var(--navy-50);display:flex;align-items:center;justify-content:center;color:var(--navy-700);flex:none}
.info-ic svg{width:19px;height:19px;stroke-width:1.75}
.info-row .k{font-size:12px;color:var(--ink-500)}
.info-row .v{font-family:var(--font-mono);font-size:15px;color:var(--navy-800);font-weight:500}
.form-card{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);padding:36px}

/* ---------- Product detail ---------- */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.pd-shot{aspect-ratio:1/1;border-radius:var(--radius-xl);border:1px solid var(--navy-200);display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,var(--navy-100),var(--navy-100) 14px,var(--navy-50) 14px,var(--navy-50) 28px)}
.pd-thumbs{display:flex;gap:10px;margin-top:12px}
.pd-thumbs div{width:70px;height:70px;border-radius:var(--radius-md);border:1px solid var(--ink-200);background:var(--navy-50)}
.pd-metrics{display:flex;gap:40px;margin:22px 0;padding:18px 0;border-top:1px solid var(--ink-100);border-bottom:1px solid var(--ink-100);flex-wrap:wrap}
.pd-metrics .n{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:-.02em;color:var(--ink-900)}
.pd-metrics .n small{font-size:13px;color:var(--ink-500)}
.pd-metrics .k{font-size:12px;color:var(--ink-500)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-subtle)}
.tabs button{appearance:none;border:none;background:transparent;font-family:var(--font-ui);font-size:14px;font-weight:500;
  color:var(--ink-600);padding:12px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.is-active{color:var(--navy-700);border-bottom-color:var(--navy-700);font-weight:600}
.tab-panel{padding-top:24px;max-width:620px}

/* ---------- Utility ---------- */
.mt-0{margin-top:0}.hidden{display:none}
.pill-note{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-500);font-family:var(--font-mono)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hero .grid{grid-template-columns:1fr;gap:36px;padding:64px 24px 56px}
  .hero h1{font-size:44px}.hero .lead{font-size:18px}
  .cat-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
  .band .grid{grid-template-columns:repeat(2,1fr)}
  .pd-grid,.contact-grid{grid-template-columns:1fr;gap:32px}
  .site-footer .cols{grid-template-columns:1fr 1fr;gap:28px}
  .section{padding:64px 24px 8px}.section-head h2{font-size:30px}
  .site-nav{display:none}.site-nav.open{display:flex;position:absolute;top:68px;left:0;right:0;flex-direction:column;
    background:#fff;border-bottom:1px solid var(--border-subtle);padding:12px 24px;gap:4px}
  .nav-toggle{display:inline-flex;margin-left:auto;background:none;border:none;cursor:pointer;color:var(--navy-700);padding:8px}
  .header-cta{display:none}
  .page-intro h1{font-size:32px}
  .container,.wrap{padding:0 24px}
}
@media(max-width:560px){
  .cat-grid,.prod-grid{grid-template-columns:1fr}
  .band .grid{grid-template-columns:1fr}
  .modal .row{grid-template-columns:1fr}
  .hero .stats{gap:32px}
}