/* ====================================================
   THKLinear.com — Global Stylesheet
   thklinear/assets/css/main.css
   ==================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:        #0a1628;
  --primary-light:  #2d1010;
  --accent:         #CC0000;
  --accent-bright:  #E60012;
  --accent-gold:    #e65100;
  --text-primary:   #0d1117;
  --text-secondary: #4a5568;
  --text-light:     #718096;
  --bg-white:       #ffffff;
  --bg-light:       #f7f9fc;
  --bg-dark:        #0a1628;
  --border:         #e2e8f0;
  --font-cn:        'Noto Sans SC', sans-serif;
  --font-en:        'Roboto', sans-serif;
  --max-width:      1280px;
  --section-py:     96px;
  --nav-h:          72px;
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-cn);
  color: var(--text-primary);
  background: var(--bg-white);
  line-height: 1.7;
  overflow-x: hidden;
}

/* ── CONTAINER ── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }

/* ── TYPOGRAPHY ── */
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-bright); margin-bottom: 14px;
}
.section-label::before { content:''; display:block; width:24px; height:2px; background:currentColor; }
.section-title {
  font-size: clamp(26px,4vw,42px); font-weight: 700; line-height: 1.2;
  color: var(--primary); margin-bottom: 14px;
}
.section-title.light { color:#fff; }
.section-subtitle {
  font-size: 16px; color: var(--text-secondary); line-height: 1.85; max-width: 620px;
}
.section-subtitle.light { color: rgba(255,255,255,0.72); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 30px; border-radius: 4px; font-size: 15px; font-weight: 500;
  text-decoration: none; transition: .2s; border: none; cursor: pointer;
  font-family: var(--font-cn);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-bright); transform: translateY(-1px); }
.btn-outline-dark { border: 1.5px solid var(--accent); color: var(--accent); background: transparent; }
.btn-outline-dark:hover { background: var(--accent); color: #fff; }
.btn-outline-light { border: 1.5px solid rgba(255,255,255,0.5); color: #fff; background: transparent; }
.btn-outline-light:hover { border-color:#fff; background: rgba(255,255,255,0.08); }

/* ── NAV ── */
#nav {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(10,22,40,0.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: box-shadow .3s;
}
#nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.35); }
.nav-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; height: var(--nav-h);
}
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-mark {
  width:40px; height:40px; background: var(--accent); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-en); font-size:13px; font-weight:700; color:#fff; letter-spacing:1px;
}
.logo-text-main { font-family: var(--font-cn); font-size:15px; font-weight:700; color:#fff; line-height:1; display:block; letter-spacing:0.03em; }
.logo-text-sub  { font-size:11px; color:rgba(255,255,255,0.45); letter-spacing:0.1em; display:block; margin-top:2px; }
.nav-links { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-links a {
  font-size:14px; color:rgba(255,255,255,0.78); text-decoration:none;
  padding:8px 14px; border-radius:4px; transition:.18s; white-space:nowrap;
}
.nav-links a:hover,
.nav-links a.active { color:#fff; background:rgba(255,255,255,0.09); }
.nav-links .nav-cta {
  background: var(--accent); color:#fff !important;
  padding:9px 20px; font-weight:500; margin-left:6px;
}
.nav-links .nav-cta:hover { background: var(--accent-bright) !important; }
.nav-mobile-btn {
  display:none; background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:4px;
}
.nav-mobile-btn span { display:block; width:24px; height:2px; background:#fff; }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background: var(--primary); padding: 120px 0 72px;
  position: relative; overflow: hidden;
}
.page-hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(204,0,0,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204,0,0,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
}
.page-hero-title { font-size: clamp(30px,5vw,52px); font-weight:700; color:#fff; line-height:1.2; }
.page-hero-desc { font-size:17px; color:rgba(255,255,255,0.68); margin-top:14px; max-width:560px; line-height:1.8; }
.page-hero-breadcrumb {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,0.45); list-style:none; margin-bottom:24px;
}
.page-hero-breadcrumb a { color:rgba(255,255,255,0.55); text-decoration:none; }
.page-hero-breadcrumb a:hover { color:#fff; }
.page-hero-breadcrumb .sep { color:rgba(255,255,255,0.25); }

/* ── BREADCRUMB BAR ── */
.breadbar {
  background: var(--bg-light); padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.breadbar ol {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-light); list-style:none;
}
.breadbar ol a { color: var(--accent); text-decoration:none; }
.breadbar ol a:hover { text-decoration:underline; }
.breadbar ol .sep { color: var(--border); }

/* ── CARDS ── */
.card {
  background:#fff; border:1px solid var(--border); border-radius:12px;
  overflow:hidden; transition: transform .25s, box-shadow .25s;
}
.card:hover { transform:translateY(-5px); box-shadow: 0 18px 56px rgba(0,0,0,0.09); }

/* ── GRID LAYOUTS ── */
.grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap:32px; }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
.grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }

/* ── TABLE ── */
.table-wrap { overflow-x:auto; border-radius:10px; border:1px solid var(--border); }
.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th {
  background: var(--primary); color:rgba(255,255,255,0.9);
  font-weight:500; padding:14px 18px; text-align:left; white-space:nowrap;
}
.data-table td { padding:13px 18px; border-bottom:1px solid var(--border); color:var(--text-secondary); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background: var(--bg-light); }
.data-table td:first-child { font-weight:500; color:var(--text-primary); }
.model-badge {
  display:inline-block; background:rgba(204,0,0,0.08); color:var(--accent);
  font-family:var(--font-en); font-size:12px; padding:2px 8px; border-radius:4px;
}

/* ── TAGS ── */
.tag {
  display:inline-block; background:var(--bg-light); color:var(--text-secondary);
  font-size:12px; padding:3px 10px; border-radius:100px; border:1px solid var(--border);
}
.tag.blue { background:rgba(204,0,0,0.07); color:var(--accent); border-color:rgba(204,0,0,0.2); }

/* ── SPEC ROW ── */
.spec-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:13px 0; border-bottom:1px solid var(--border);
}
.spec-row:last-child { border-bottom:none; }
.spec-row-label { font-size:14px; color:var(--text-secondary); }
.spec-row-val { font-family:var(--font-en); font-size:14px; font-weight:500; color:var(--accent); }

/* ── FOOTER ── */
#footer {
  background: var(--primary); color:rgba(255,255,255,0.65);
  padding: 80px 0 40px;
}
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; margin-bottom:56px;
}
.footer-desc { font-size:14px; line-height:1.8; color:rgba(255,255,255,0.48); margin-top:14px; }
.footer-contact { margin-top:22px; display:flex; flex-direction:column; gap:9px; }
.footer-contact a {
  font-size:14px; color:rgba(255,255,255,0.55); text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.footer-contact a:hover { color:#fff; }
.footer-col-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:18px; }
.footer-links { display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:14px; color:rgba(255,255,255,0.52); text-decoration:none; transition:.18s; }
.footer-links a:hover { color:#fff; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.08); padding-top:28px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
}
.footer-copy { font-size:13px; color:rgba(255,255,255,0.3); }
.footer-legal { display:flex; gap:20px; }
.footer-legal a { font-size:13px; color:rgba(255,255,255,0.3); text-decoration:none; }
.footer-legal a:hover { color:rgba(255,255,255,0.6); }
.footer-icp { font-size:13px; color:rgba(255,255,255,0.3); margin-top:4px; }
.footer-icp a { color:rgba(255,255,255,0.3); text-decoration:none; }
.footer-icp a:hover { color:rgba(255,255,255,0.55); }

/* ── ANIM REVEAL ── */
.reveal { opacity:0; transform:translateY(22px); transition: opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:768px){
  :root{ --section-py:60px; }
  .nav-links { display:none; }
  .nav-mobile-btn { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column; position:fixed;
    top:var(--nav-h); left:0; right:0;
    background:rgba(10,22,40,0.98); padding:16px 28px 24px;
    border-bottom:1px solid rgba(255,255,255,0.08); gap:4px;
  }
  .grid-2,.grid-3 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; text-align:center; }
}