:root {
  --ink: #f7f8ff;
  --muted: #9aa3bd;
  --line: rgba(255, 255, 255, .10);
  --panel: rgba(22, 29, 48, .88);
  --panel-2: #19233a;
  --purple: #8f6cff;
  --teal: #00d5c4;
  --lime: #b2f76d;
  --bg: #0b1120;
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 18% 10%, rgba(35,70,115,.22), transparent 32%), radial-gradient(circle at 84% 34%, rgba(87,55,130,.14), transparent 30%), linear-gradient(180deg, #0d1424 0%, var(--bg) 44%, #0a101c 100%); color: var(--ink); font-family: "Noto Sans TC", system-ui, sans-serif; line-height: 1.55; min-width: 320px; }
button, select { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; pointer-events: none; filter: blur(120px); opacity: .17; border-radius: 50%; z-index: -1; }
.ambient-one { width: 470px; height: 470px; background: var(--purple); top: -180px; right: 5vw; }
.ambient-two { width: 430px; height: 430px; background: var(--teal); top: 560px; left: -220px; opacity: .09; }

.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto; padding: 0 28px; border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); text-decoration: none; display: flex; gap: 12px; align-items: center; }
.brand-mark { width: 38px; height: 34px; display: flex; gap: 3px; align-items: end; }
.brand-mark i { width: 9px; border-radius: 2px 2px 1px 1px; background: linear-gradient(var(--teal), var(--purple)); }
.brand-mark i:nth-child(1) { height: 17px; } .brand-mark i:nth-child(2) { height: 31px; } .brand-mark i:nth-child(3) { height: 23px; }
.brand b { font-family: "Space Grotesk"; font-size: 22px; letter-spacing: .08em; display: block; line-height: 1; }
.brand small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .14em; margin-top: 4px; }
.topbar-actions { display: flex; gap: 14px; align-items: center; }
.topnav { display: flex; align-items: center; gap: 18px; margin-right: 8px; }
.topnav a { color: #aeb6ca; text-decoration: none; font-size: 11px; font-weight: 600; }
.topnav a:hover { color: var(--teal); }
.privacy-pill { border: 1px solid var(--line); background: rgba(255,255,255,.035); padding: 8px 13px; border-radius: 99px; color: #c4cadd; font-size: 12px; }
.privacy-pill span { display: inline-block; width: 7px; height: 7px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 12px var(--teal); margin-right: 7px; }
.ghost-btn { border: 1px solid var(--line); background: transparent; border-radius: 10px; padding: 9px 14px; cursor: pointer; }
.ghost-btn:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); }

main { max-width: 1240px; margin: auto; padding: 0 28px 100px; }
.hero { min-height: 520px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 72px; padding: 74px 0 68px; }
.eyebrow { margin: 0 0 13px; color: var(--teal); font-family: "Space Grotesk"; font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.hero h1 { font-size: clamp(42px, 5vw, 68px); line-height: 1.12; letter-spacing: -.045em; margin: 0; font-weight: 800; }
.hero h1 span { color: #b7bed2; }
.hero-lead { color: var(--muted); font-size: 17px; max-width: 600px; margin: 25px 0 30px; }
.primary-cta { display: inline-flex; gap: 38px; align-items: center; padding: 14px 18px; color: #07100e; background: var(--lime); border-radius: 11px; font-weight: 800; text-decoration: none; box-shadow: 0 14px 40px rgba(178, 247, 109, .14); }
.primary-cta span { font-size: 18px; }
.hero-actions { display: flex; align-items: center; gap: 14px; }
.secondary-cta { color: #d5dbeb; border: 1px solid var(--line); border-radius: 11px; padding: 13px 17px; font-size: 13px; font-weight: 700; text-decoration: none; }
.secondary-cta:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); }
.signal-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(25,29,48,.92), rgba(11,14,24,.94)); border-radius: 26px; padding: 18px; transform: perspective(1000px) rotateY(-4deg) rotateX(2deg); box-shadow: 0 30px 90px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.05); }
.signal-head, .signal-stats { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font: 700 10px/1 "Space Grotesk"; letter-spacing: .12em; }
.live-dot { color: var(--lime); }
.signal-card svg { width: 100%; margin: 9px 0; }
.wave-path { filter: drop-shadow(0 0 10px rgba(0,213,196,.55)); stroke-dasharray: 1000; animation: draw 2.6s ease both; }
@keyframes draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.signal-stats { border-top: 1px solid var(--line); padding-top: 14px; justify-content: flex-start; gap: 28px; }
.signal-stats b { color: var(--ink); font-size: 18px; margin-right: 4px; }

.selector-shell { border: 1px solid rgba(var(--category-rgb, 0,213,196),.28); background: linear-gradient(145deg, rgba(24,32,52,.94), rgba(13,19,33,.92)); backdrop-filter: blur(18px); border-radius: 28px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,.35), 0 0 70px rgba(var(--category-rgb, 0,213,196),.07); scroll-margin-top: 24px; transition: border-color .25s, box-shadow .25s; }
.selector-heading { padding: 28px 31px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.selector-heading h2 { margin: 0; font-size: 26px; }
.step-indicator { display: flex; align-items: center; }
.step-indicator span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font: 700 11px/1 "Space Grotesk"; }
.step-indicator span.active { background: var(--teal); color: #061211; border-color: var(--teal); box-shadow: 0 0 18px rgba(0,213,196,.3); }
.step-indicator i { width: 28px; height: 1px; background: var(--line); }
.selector-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); }
.filter-panel { padding: 28px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(var(--category-rgb, 0,213,196),.07), rgba(12,18,31,.5) 32%); }
.filter-step { margin-bottom: 29px; }
.step-label { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.step-label > span { color: var(--purple); font: 700 11px "Space Grotesk"; border: 1px solid rgba(143,108,255,.3); border-radius: 6px; padding: 4px 6px; }
.step-label b, .step-label small { display: block; }
.step-label b { font-size: 14px; }
.step-label small { color: var(--muted); font-size: 11px; margin-top: 1px; }
.category-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.category-card { position: relative; min-height: 91px; text-align: left; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px; padding: 13px; background: linear-gradient(135deg, rgba(var(--category-rgb),.105), rgba(24,31,49,.94) 66%); border: 1px solid rgba(var(--category-rgb),.23); border-radius: 12px; cursor: pointer; overflow: hidden; }
.category-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--category); opacity: .75; }
.category-card:hover { border-color: rgba(var(--category-rgb),.62); background: linear-gradient(135deg, rgba(var(--category-rgb),.18), rgba(26,34,54,.96) 70%); transform: translateY(-1px); }
.category-card.active { border-color: var(--category); background: linear-gradient(135deg, rgba(var(--category-rgb),.26), rgba(25,32,51,.95) 72%); box-shadow: inset 0 0 0 1px rgba(var(--category-rgb),.16), 0 10px 28px rgba(var(--category-rgb),.12); }
.category-card b, .category-card small { display: block; }
.category-card b { font-size: 13px; }
.category-card small { color: var(--muted); font-size: 9px; margin-top: 3px; line-height: 1.35; }
.category-card em { font-style: normal; color: var(--muted); }
.category-card.active em { color: var(--category); }
.category-icon { font: 700 22px "Space Grotesk"; color: var(--category); text-shadow: 0 0 18px rgba(var(--category-rgb),.38); }
.application-list { display: flex; flex-wrap: wrap; gap: 8px; }
.app-chip { border: 1px solid var(--line); background: #111523; color: #aeb6ce; border-radius: 9px; padding: 8px 11px; font-size: 12px; cursor: pointer; }
.app-chip:hover { color: white; }
.app-chip.active { border-color: var(--teal); color: var(--teal); background: rgba(0,213,196,.08); }
.field-label { display: block; color: #aeb6ce; font-size: 11px; margin: 10px 0 5px; }
select { width: 100%; appearance: none; color: #e6e9f4; border: 1px solid var(--line); background: #111523 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa3bd' fill='none'/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center; border-radius: 9px; padding: 9px 32px 9px 10px; font-size: 12px; outline: 0; }
select:focus { border-color: var(--teal); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check-row { display: flex; align-items: center; gap: 8px; color: #b7bed1; font-size: 11px; margin-top: 10px; cursor: pointer; }
.check-row input { appearance: none; width: 17px; height: 17px; border-radius: 5px; border: 1px solid var(--line); background: #111523; margin: 0; }
.check-row input:checked { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 4px #0e1520; }
.primary-action { width: 100%; border: 0; background: linear-gradient(90deg, var(--purple), #6c7cff); border-radius: 10px; padding: 12px 15px; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 14px 30px rgba(108,124,255,.17); }
.primary-action span { float: right; }
.text-action { display: block; margin: 11px auto 0; border: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }

.results-panel { padding: 29px; min-width: 0; scroll-margin-top: 20px; background: linear-gradient(155deg, rgba(30,39,63,.52), rgba(13,18,31,.28)); }
.results-summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 18px; }
.results-summary h3 { font-size: 22px; margin: 0; }
.results-summary h3 span { color: var(--lime); }
.summary-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.summary-tags span { color: #adb5ca; font-size: 10px; padding: 5px 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 6px; }
.sales-note { display: flex; gap: 12px; padding: 14px 16px; background: linear-gradient(90deg, rgba(0,213,196,.08), rgba(143,108,255,.06)); border: 1px solid rgba(0,213,196,.2); border-radius: 12px; margin-bottom: 14px; }
.note-icon { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 7px; background: rgba(0,213,196,.14); color: var(--teal); }
.sales-note b { color: var(--teal); font-size: 11px; }
.sales-note p { margin: 3px 0 0; color: #bdc5d8; font-size: 11px; }
.price-source { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; padding: 10px 13px; margin: -5px 0 14px; border: 1px solid rgba(178,247,109,.18); border-radius: 10px; background: rgba(178,247,109,.045); }
.price-source > span { width: 30px; height: 24px; display: grid; place-items: center; color: #07110b; background: var(--lime); border-radius: 6px; font: 800 10px "Space Grotesk"; }
.price-source p { margin: 0; color: #aeb8cb; font-size: 10px; }.price-source p b { color: var(--lime); }.price-source a { color: var(--lime); font-size: 9px; text-decoration: none; white-space: nowrap; }
.result-list { display: grid; gap: 10px; }
.show-more { width: 100%; margin-top: 12px; border: 1px solid rgba(143,108,255,.35); background: rgba(143,108,255,.07); color: #c9bdff; border-radius: 10px; padding: 10px 14px; font-size: 11px; font-weight: 700; cursor: pointer; }
.show-more:hover { border-color: var(--purple); background: rgba(143,108,255,.12); }
.product-card { position: relative; display: grid; grid-template-columns: 96px minmax(0,1fr) 170px; gap: 16px; align-items: stretch; border: 1px solid rgba(var(--category-rgb),.20); background: linear-gradient(110deg, rgba(var(--category-rgb),.075), rgba(24,31,50,.9) 35%, rgba(17,23,39,.92)); border-radius: 15px; padding: 16px; overflow: hidden; }
.product-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--category), rgba(var(--category-rgb),.18)); }
.product-card:hover { border-color: rgba(var(--category-rgb),.48); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--category-rgb),.09); transition: .2s; }
.product-card.recommended { border-color: rgba(var(--category-rgb),.62); background: linear-gradient(110deg, rgba(var(--category-rgb),.17), rgba(27,35,55,.92) 44%, rgba(18,24,40,.94)); box-shadow: 0 12px 38px rgba(var(--category-rgb),.10); }
.rank { position: absolute; top: 7px; right: 9px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.rank span { color: var(--lime); font: 700 10px "Space Grotesk"; margin-right: 5px; }
.instrument-visual { align-self: center; background: #090b12; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 7px; height: 72px; box-shadow: 0 9px 20px rgba(0,0,0,.3); position: relative; }
.instrument-screen { background: #101b26; border-radius: 4px; height: 42px; width: 68px; position: relative; overflow: hidden; }
.instrument-screen > i { position: absolute; inset: 0; border-right: 1px solid rgba(255,255,255,.06); transform: translateX(25%); }
.instrument-screen > i:nth-child(2) { transform: translateX(50%); }.instrument-screen > i:nth-child(3) { transform: translateX(75%); }
.instrument-screen svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.instrument-screen path { fill: none; stroke: var(--trace); stroke-width: 3; filter: drop-shadow(0 0 4px var(--trace)); }
.instrument-knobs { position: absolute; right: 6px; top: 9px; display: grid; gap: 6px; }
.instrument-knobs i { width: 8px; height: 8px; border-radius: 50%; border: 2px solid #77819b; }
.instrument-visual small { display: block; color: #6f7890; text-align: center; font: 700 6px "Space Grotesk"; margin-top: 4px; }
.product-title { display: flex; justify-content: space-between; align-items: start; gap: 8px; padding-right: 40px; }
.product-title small { color: var(--category); font: 700 8px "Space Grotesk"; letter-spacing: .11em; }
.product-title h3 { margin: 1px 0 0; font: 700 21px "Space Grotesk"; letter-spacing: -.02em; }
.budget { border-radius: 99px; font-size: 9px; padding: 4px 8px; font-weight: 700; white-space: nowrap; }
.budget-1 { color: var(--lime); background: rgba(178,247,109,.09); }.budget-2 { color: var(--teal); background: rgba(0,213,196,.09); }.budget-3 { color: #b7a5ff; background: rgba(143,108,255,.12); }
.fit { color: #c0c7d8; font-size: 10px; margin: 7px 0; }
.fit b { color: #7f899f; }
.highlights { display: flex; flex-wrap: wrap; gap: 5px; }
.highlights span { font-size: 8px; padding: 3px 6px; border-radius: 4px; color: #b9c1d4; border: 1px solid var(--line); }
.difference { font-size: 9px; color: #9ca5ba; margin: 9px 0 0; }
.difference b { color: #dae0ef; margin-right: 7px; }
.product-specs { border-left: 1px solid var(--line); padding: 10px 0 0 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; }
.product-specs div small, .product-specs div b { display: block; }
.product-specs div small { color: #778198; font-size: 7px; text-transform: uppercase; }.product-specs div b { color: #cfd5e4; font-size: 9px; margin-top: 1px; }
.online-price { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 9px; border: 1px solid rgba(178,247,109,.22); border-radius: 8px; background: rgba(178,247,109,.055); }
.online-price div small, .online-price div strong { display: block; }.online-price div small { color: #819078; font-size: 7px; text-transform: none; }.online-price div strong { color: var(--lime); font: 700 13px "Space Grotesk"; margin-top: 2px; }
.online-price a { color: var(--lime); font-size: 8px; font-weight: 800; text-decoration: none; white-space: nowrap; }.online-price a:hover { text-decoration: underline; }
.online-price.unavailable { border-color: rgba(255,173,50,.32); background: linear-gradient(105deg, rgba(255,173,50,.10), rgba(255,255,255,.025)); text-decoration: none; }
.online-price.unavailable div strong { color: #ffd08a; font-size: 9px; }
.online-price.unavailable > span { color: #ffbd5c; font-size: 8px; font-weight: 800; white-space: nowrap; }
.online-price.unavailable:hover { border-color: rgba(255,173,50,.68); background: linear-gradient(105deg, rgba(255,173,50,.17), rgba(255,255,255,.035)); }
.compare-toggle { grid-column: 1 / -1; align-self: end; border: 1px solid var(--line); color: #9da6bc; background: transparent; border-radius: 7px; font-size: 9px; padding: 6px; cursor: pointer; }
.compare-toggle:hover, .compare-toggle.selected { color: var(--teal); border-color: rgba(0,213,196,.5); background: rgba(0,213,196,.06); }
.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: 15px; }
.empty-state > div { font-size: 42px; color: var(--purple); }.empty-state h3 { color: var(--ink); margin-bottom: 4px; }.empty-state p { font-size: 12px; margin-top: 0; }

.catalog-section { padding: 105px 0 35px; scroll-margin-top: 20px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 26px; }
.section-heading h2 { margin: 0; font-size: clamp(30px, 4vw, 45px); letter-spacing: -.035em; }
.section-heading > div > p:last-child { color: var(--muted); margin: 8px 0 0; font-size: 13px; }
.catalog-stat { display: grid; grid-template-columns: auto auto; column-gap: 9px; align-items: baseline; min-width: 190px; padding-left: 23px; border-left: 1px solid var(--line); }
.catalog-stat b { color: var(--lime); font: 700 24px "Space Grotesk"; text-align: right; }
.catalog-stat span { color: var(--muted); font-size: 10px; }
.catalog-tools { display: grid; grid-template-columns: 1fr 180px; gap: 10px; margin-bottom: 12px; }
.catalog-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: rgba(17,21,35,.84); border-radius: 12px; padding: 0 14px; }
.catalog-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,213,196,.06); }
.catalog-search span { color: var(--teal); font: 700 22px "Space Grotesk"; }
.catalog-search input { width: 100%; height: 44px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.catalog-search input::placeholder { color: #6f7890; }
.catalog-categories { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; overflow-x: auto; padding: 2px 0 12px; }
.catalog-category { min-width: 88px; position: relative; border: 1px solid rgba(var(--category-rgb, 0,213,196),.25); background: linear-gradient(145deg, rgba(var(--category-rgb, 0,213,196),.10), rgba(23,30,48,.94)); border-radius: 11px; padding: 11px 8px 9px; text-align: left; cursor: pointer; overflow: hidden; }
.catalog-category::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--category, var(--teal)); opacity: .72; }
.catalog-category:hover { border-color: rgba(var(--category-rgb, 0,213,196),.55); transform: translateY(-1px); }
.catalog-category.active { border-color: var(--category, var(--teal)); background: linear-gradient(145deg, rgba(var(--category-rgb, 0,213,196),.24), rgba(23,30,48,.96)); box-shadow: 0 8px 24px rgba(var(--category-rgb, 0,213,196),.10); }
.catalog-category > span { display: block; color: var(--category, var(--teal)); font: 700 17px "Space Grotesk"; height: 22px; }
.catalog-category b { display: block; font-size: 10px; margin-top: 3px; white-space: nowrap; }
.catalog-category small { position: absolute; top: 7px; right: 8px; color: #6f7890; font: 700 8px "Space Grotesk"; }
.catalog-result-head { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 12px; color: var(--muted); }
.catalog-result-head p { margin: 0; font-size: 11px; }
.catalog-result-head b { color: var(--ink); }
.catalog-result-head .text-action { margin: 0; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.catalog-card { min-width: 0; display: flex; flex-direction: column; position: relative; border: 1px solid rgba(var(--category-rgb),.20); background: linear-gradient(155deg, rgba(var(--category-rgb),.105), rgba(24,31,49,.94) 44%, rgba(14,20,34,.94)); border-radius: 16px; padding: 17px; overflow: hidden; }
.catalog-card::after { content: ""; position: absolute; width: 130px; height: 130px; border: 1px solid rgba(143,108,255,.08); border-radius: 50%; right: -72px; top: -78px; }
.catalog-card:hover { transform: translateY(-3px); border-color: rgba(var(--category-rgb),.48); box-shadow: 0 16px 38px rgba(var(--category-rgb),.09); transition: .2s; }
.catalog-card-head { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; }
.catalog-symbol { width: 34px; height: 34px; display: grid; place-items: center; color: var(--category); background: rgba(var(--category-rgb),.12); border: 1px solid rgba(var(--category-rgb),.28); border-radius: 9px; font: 700 14px "Space Grotesk"; }
.catalog-card-head small { display: block; color: #747e96; font-size: 8px; }
.catalog-card-head h3 { margin: 1px 0 0; font: 700 19px "Space Grotesk"; letter-spacing: -.02em; }
.tier { align-self: start; border-radius: 99px; padding: 4px 8px; font-size: 8px; font-weight: 800; }
.tier-entry { color: var(--lime); background: rgba(178,247,109,.09); }
.tier-mainstream { color: var(--teal); background: rgba(0,213,196,.09); }
.tier-pro { color: #bcaeff; background: rgba(143,108,255,.13); }
.tier-special { color: #ffbd73; background: rgba(255,155,74,.1); }
.catalog-summary { min-height: 52px; color: #bec5d7; font-size: 11px; margin: 14px 0 10px; }
.catalog-specs { display: flex; flex-wrap: wrap; gap: 5px; }
.catalog-specs span { color: #adb6cc; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 5px; padding: 3px 6px; font-size: 8px; }
.catalog-use { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.catalog-use b, .model-index > b { color: #778198; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.catalog-use p { color: #d1d6e3; font-size: 9px; margin: 4px 0 0; }
.model-index { margin-top: 11px; }
.model-index > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.model-index code { color: #b8c0d2; font: 600 8px "Space Grotesk"; background: #0a0d15; border-radius: 4px; padding: 3px 5px; }
.model-index code.more-models { color: var(--purple); }
.catalog-price { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 9px; border: 1px solid rgba(178,247,109,.2); border-radius: 8px; background: rgba(178,247,109,.05); color: inherit; text-decoration: none; position: relative; z-index: 1; }
.catalog-price span { color: #8d987f; font-size: 8px; }.catalog-price b { color: var(--lime); font: 700 11px "Space Grotesk"; }.catalog-price:hover { border-color: rgba(178,247,109,.45); }
.catalog-price.quote-request { border-color: rgba(255,173,50,.30); background: rgba(255,173,50,.075); }
.catalog-price.quote-request span { color: #b99b71; }.catalog-price.quote-request b { color: #ffc56e; }
.catalog-price.quote-request:hover { border-color: rgba(255,173,50,.65); background: rgba(255,173,50,.13); }
.catalog-document { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 12px; padding: 9px; border: 1px solid rgba(0,213,196,.24); border-radius: 8px; background: rgba(0,213,196,.055); color: inherit; text-decoration: none; position: relative; z-index: 1; }
.catalog-document span { padding: 3px 5px; border-radius: 4px; color: #071511; background: var(--teal); font: 800 8px "Space Grotesk"; }.catalog-document b { color: var(--teal); font-size: 10px; }.catalog-document em { color: var(--teal); font-style: normal; }.catalog-document:hover { border-color: rgba(0,213,196,.55); }
.catalog-downloads { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin: 3px 0 14px; }
.catalog-downloads > a, .catalog-downloads > div { min-width: 0; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(17,21,35,.84); color: inherit; text-decoration: none; }
.catalog-downloads > a { display: flex; justify-content: space-between; align-items: center; }.catalog-downloads > a:hover { border-color: rgba(178,247,109,.42); }
.catalog-downloads b { color: #dce2ef; font-size: 11px; }.catalog-downloads > a span { color: var(--lime); font-size: 9px; }
.catalog-downloads > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }.catalog-downloads > div > span { display: flex; gap: 6px; overflow-x: auto; }
.catalog-downloads > div a { flex: 0 0 auto; color: var(--teal); border: 1px solid rgba(0,213,196,.18); border-radius: 6px; padding: 5px 7px; font-size: 8px; text-decoration: none; }.catalog-downloads > div a:hover { border-color: var(--teal); }
.catalog-page { margin-top: auto; padding-top: 12px; color: #596278; font-size: 8px; text-align: right; }
.catalog-more { margin-top: 14px; }
.catalog-empty { text-align: center; padding: 50px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); }
.catalog-empty b { color: var(--ink); }.catalog-empty p { font-size: 11px; margin-bottom: 0; }

.inquiry-section { padding: 90px 0 25px; scroll-margin-top: 20px; }
.inquiry-layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 14px; align-items: start; }
.inquiry-form, .inquiry-inbox { border: 1px solid var(--line); background: linear-gradient(155deg, rgba(20,24,40,.94), rgba(11,14,24,.92)); border-radius: 18px; padding: 20px; }
.form-head, .inbox-head, .inquiry-card-head { display: flex; justify-content: space-between; align-items: start; gap: 14px; }
.form-head b, .inbox-head b { display: block; font-size: 15px; }.form-head small, .inbox-head small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; }
.inquiry-form > label, .inquiry-pair label { display: grid; gap: 6px; margin-top: 14px; }.inquiry-form label > span { color: #9ba5ba; font-size: 10px; font-weight: 700; }
.inquiry-form input, .inquiry-form textarea, .inbox-head select, .inquiry-card select { width: 100%; color: var(--ink); background: #0c101b; border: 1px solid var(--line); border-radius: 9px; outline: 0; font: inherit; }
.inquiry-form input { min-height: 41px; padding: 9px 11px; }.inquiry-form textarea { resize: vertical; padding: 10px 11px; line-height: 1.55; }.inquiry-form input:focus, .inquiry-form textarea:focus, .inbox-head select:focus, .inquiry-card select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,213,196,.06); }
.inquiry-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-row { grid-template-columns: auto 1fr !important; align-items: start; }.consent-row input { width: 16px; min-height: 16px; margin-top: 1px; accent-color: var(--teal); }.consent-row span { font-weight: 400 !important; line-height: 1.45; }
.form-feedback { min-height: 18px; margin-top: 10px; color: var(--lime); font-size: 10px; }.inquiry-form .primary-action { margin-top: 3px; }
.inbox-head > div:last-child { display: flex; gap: 7px; }.inbox-head select, .inquiry-card select { width: auto; min-height: 36px; padding: 7px 28px 7px 9px; font-size: 9px; }
.inbox-state { display: grid; place-items: center; min-height: 230px; color: var(--muted); font-size: 11px; }.inquiry-list { display: grid; gap: 9px; margin-top: 15px; max-height: 620px; overflow: auto; padding-right: 3px; }
.inquiry-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.02); }
.inquiry-card-head small { color: #6f7890; font-size: 8px; }.inquiry-card-head h3 { margin: 3px 0 0; font-size: 14px; }.inquiry-card-head p { margin: 3px 0 0; color: #a8b1c5; font-size: 9px; }
.inquiry-models { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }.inquiry-models span { color: var(--teal); border: 1px solid rgba(0,213,196,.2); border-radius: 5px; padding: 3px 6px; font-size: 8px; }
.inquiry-message { color: #c5ccdb; font-size: 10px; line-height: 1.55; margin: 10px 0; }.inquiry-contact { display: flex; flex-wrap: wrap; gap: 10px; }.inquiry-contact a { color: var(--lime); font-size: 9px; text-decoration: none; }

.method-section { padding: 85px 0 15px; scroll-margin-top: 20px; }
.section-heading.compact { align-items: end; }
.section-heading.compact > p { max-width: 460px; color: var(--muted); font-size: 12px; margin: 0; }
.method-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(14,17,29,.7); }
.method-grid article { padding: 21px; border-right: 1px solid var(--line); }
.method-grid article:last-child { border-right: 0; }
.method-grid span { color: var(--purple); font: 700 10px "Space Grotesk"; }
.method-grid b { display: block; margin-top: 16px; font-size: 14px; }
.method-grid p { color: var(--muted); font-size: 10px; margin: 6px 0 0; }
.source-note { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 13px; padding: 14px 16px; border: 1px solid rgba(178,247,109,.16); background: rgba(178,247,109,.035); border-radius: 12px; }
.source-note > span { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid rgba(178,247,109,.3); color: var(--lime); border-radius: 50%; font: 700 10px "Space Grotesk"; }
.source-note p { margin: 0; color: #aab2c6; font-size: 10px; }.source-note p b { color: #dce1ed; margin-right: 7px; }
.source-note a { color: var(--lime); text-decoration: none; font-size: 10px; white-space: nowrap; }

.articles-section { padding: 84px 0 20px; scroll-margin-top: 20px; border-top: 1px solid var(--line); }
.article-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0; }
.article-filters button { border: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--muted); padding: 9px 14px; border-radius: 999px; cursor: pointer; font: inherit; }
.article-filters button.active { color: #fff; border-color: rgba(0,213,196,.55); background: rgba(0,213,196,.12); }
.article-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.application-card { position: relative; display: flex; flex-direction: column; min-height: 320px; padding: 24px; border: 1px solid var(--line); border-top: 3px solid var(--category); border-radius: 18px; background: linear-gradient(145deg,rgba(var(--category-rgb),.1),rgba(255,255,255,.025) 42%); }
.article-card-top { display: flex; justify-content: space-between; color: var(--category); font-size: 13px; font-weight: 700; }
.article-card-top small { font-family: "Space Grotesk",sans-serif; color: var(--muted); }
.application-card h3 { margin: 22px 0 12px; font-size: 22px; line-height: 1.4; }
.application-card > p { color: var(--muted); line-height: 1.7; margin: 0 0 18px; }
.article-audience { display: grid; gap: 5px; margin-top: auto; font-size: 14px; }.article-audience span { color: var(--muted); }
.article-models { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }.article-models span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; }
.application-card > button { display: flex; justify-content: space-between; width: 100%; border: 0; border-top: 1px solid var(--line); padding: 15px 0 0; background: transparent; color: #fff; cursor: pointer; font: inherit; font-weight: 700; }
.application-card > button span { color: var(--category); }
.article-dialog { width: min(900px,calc(100vw - 28px)); max-height: 90vh; }
.article-dialog-body { padding: 0 28px 30px; overflow: auto; }
.article-lead { border-left: 3px solid var(--category); padding: 16px 18px; background: rgba(var(--category-rgb),.08); border-radius: 0 10px 10px 0; }.article-lead span { color: var(--category); font-weight: 700; }.article-lead p { font-size: 18px; line-height: 1.7; }.article-lead small { color: var(--muted); }
.article-dialog-body section { margin-top: 28px; }.article-dialog-body section h3 { margin-bottom: 10px; }.article-dialog-body section p,.article-dialog-body li { color: var(--muted); line-height: 1.8; }.article-dialog-body ol { padding-left: 22px; }
.article-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }.article-table-wrap table { width: 100%; border-collapse: collapse; min-width: 620px; }.article-table-wrap th,.article-table-wrap td { padding: 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }.article-table-wrap th { background: rgba(255,255,255,.055); }.article-table-wrap td { color: var(--muted); }
.article-actions { display: flex; gap: 10px; margin-top: 28px; }.article-actions button { width: auto; }

.compare-bar { position: fixed; z-index: 20; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(900px, calc(100% - 28px)); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 12px 14px 12px 18px; background: rgba(19,23,38,.96); border: 1px solid rgba(143,108,255,.45); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.6); backdrop-filter: blur(20px); }
.compare-bar small, .compare-bar b { display: block; }.compare-bar small { color: var(--purple); font: 700 8px "Space Grotesk"; }.compare-bar b { font-size: 12px; }
.compare-chips { display: flex; gap: 7px; overflow: auto; }
.compare-chips span { white-space: nowrap; color: #bdc5d6; font-size: 10px; background: rgba(255,255,255,.05); border-radius: 7px; padding: 6px 7px 6px 9px; }
.compare-chips button { border: 0; background: transparent; color: #747e95; cursor: pointer; margin-left: 5px; }
.compare-bar > button { border: 0; border-radius: 9px; padding: 10px 14px; background: var(--purple); font-size: 11px; font-weight: 800; cursor: pointer; }
.compare-bar > button:disabled { opacity: .45; cursor: not-allowed; }

dialog { width: min(1000px, calc(100% - 32px)); max-height: 88vh; color: var(--ink); background: #0e1220; border: 1px solid var(--line); border-radius: 22px; padding: 0; box-shadow: 0 30px 120px #000; }
dialog::backdrop { background: rgba(3,5,9,.82); backdrop-filter: blur(6px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 26px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; font-size: 24px; }.dialog-head button { border: 0; background: transparent; color: var(--muted); font-size: 30px; cursor: pointer; }
.compare-table-wrap { overflow: auto; padding: 20px 26px; }
table { width: 100%; border-collapse: collapse; min-width: 650px; }
th, td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); padding: 13px 12px; font-size: 11px; }
thead th { color: var(--ink); background: rgba(255,255,255,.025); }
thead th:first-child, tbody th { width: 125px; color: #828ca2; }
thead small, thead b { display: block; }.compare-table-wrap thead small { color: var(--purple); font: 700 8px "Space Grotesk"; }.compare-table-wrap thead b { font: 700 17px "Space Grotesk"; margin-top: 4px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 26px; border-top: 1px solid var(--line); }
.dialog-actions .primary-action { width: auto; padding-inline: 22px; }
footer { max-width: 1240px; margin: auto; padding: 25px 28px 45px; border-top: 1px solid var(--line); color: #6f7890; display: flex; justify-content: space-between; gap: 30px; font-size: 10px; }
footer p { margin: 0; }
.toast { position: fixed; z-index: 40; left: 50%; bottom: 34px; transform: translate(-50%, 20px); background: #eefbf0; color: #102018; border-radius: 9px; padding: 9px 14px; font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Readability pass: keep hierarchy while making working text comfortable to scan. */
.topnav a { font-size: 14px; }
.brand small, .eyebrow { font-size: 12px; }
.step-label b { font-size: 16px; }.step-label small { font-size: 13px; line-height: 1.5; }
.category-card b { font-size: 15px; }.category-card small { font-size: 13px; line-height: 1.5; }
.app-chip { font-size: 14px; line-height: 1.45; padding: 10px 12px; }
.field-label, .check-row { font-size: 14px; }.field-label { margin-top: 14px; }
select { min-height: 44px; font-size: 14px; }
.primary-action { font-size: 15px; padding-block: 14px; }.text-action { font-size: 13px; }
.summary-tags span { font-size: 12px; }.sales-note b { font-size: 13px; }.sales-note p { font-size: 14px; line-height: 1.6; }
.price-source p { font-size: 13px; line-height: 1.55; }.price-source a { font-size: 12px; }.show-more { font-size: 13px; }
.rank { font-size: 11px; }.budget { font-size: 12px; }
.product-card { grid-template-columns: 104px minmax(0,1fr) 210px; gap: 20px; padding: 20px; }
.product-title small { font-size: 12px; line-height: 1.4; }.instrument-visual small { font-size: 10px; }
.fit { font-size: 14px; line-height: 1.6; }.highlights span { font-size: 12px; padding: 5px 8px; }.difference { font-size: 14px; line-height: 1.65; }
.product-specs div small { font-size: 11px; }.product-specs div b { font-size: 14px; line-height: 1.4; }
.online-price div small { font-size: 11px; }.online-price div strong { font-size: 16px; }.online-price a { font-size: 12px; }
.online-price.unavailable div strong { font-size: 13px; }.online-price.unavailable > span { font-size: 11px; }
.compare-toggle { font-size: 13px; padding: 9px; }
.section-heading > div > p:last-child { font-size: 15px; line-height: 1.65; }.catalog-stat span { font-size: 12px; }
.catalog-search input { font-size: 14px; }.catalog-category b { font-size: 13px; }.catalog-result-head p { font-size: 13px; }
.catalog-card-head small { font-size: 12px; line-height: 1.45; }.tier { font-size: 11px; }
.catalog-summary { min-height: 66px; font-size: 14px; line-height: 1.65; }
.catalog-specs span { font-size: 11px; padding: 5px 7px; }.catalog-use b, .model-index > b { font-size: 11px; }.catalog-use p { font-size: 13px; line-height: 1.55; }
.model-index code { font-size: 11px; padding: 5px 7px; }
.catalog-price span { font-size: 11px; }.catalog-price b { font-size: 15px; }.catalog-document span { font-size: 10px; }.catalog-document b { font-size: 13px; }
.catalog-downloads b { font-size: 14px; }.catalog-downloads > a span, .catalog-downloads > div a { font-size: 12px; }.catalog-page { font-size: 11px; }
.form-head b, .inbox-head b { font-size: 17px; }.form-head small, .inbox-head small { font-size: 12px; line-height: 1.5; }
.inquiry-form label > span { font-size: 14px; }.inquiry-form input, .inquiry-form textarea { font-size: 15px; }.form-feedback { font-size: 13px; }
.inbox-head select, .inquiry-card select { font-size: 12px; }.inbox-state { font-size: 14px; }
.inquiry-card-head small { font-size: 11px; }.inquiry-card-head h3 { font-size: 16px; }.inquiry-card-head p { font-size: 13px; }
.inquiry-models span { font-size: 11px; }.inquiry-message { font-size: 14px; line-height: 1.65; }.inquiry-contact a { font-size: 13px; }
.section-heading.compact > p { font-size: 15px; line-height: 1.65; }.method-grid b { font-size: 16px; }.method-grid p { font-size: 14px; line-height: 1.65; }
.source-note p, .source-note a { font-size: 13px; line-height: 1.55; }
.compare-bar small { font-size: 10px; }.compare-bar b { font-size: 14px; }.compare-chips span, .compare-bar > button { font-size: 13px; }
th, td { font-size: 14px; line-height: 1.5; }.toast { font-size: 13px; } footer { font-size: 12px; line-height: 1.55; }

@media (max-width: 980px) {
  .topnav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 45px; padding-top: 55px; }
  .signal-card { max-width: 650px; transform: none; }
  .selector-grid { grid-template-columns: 330px minmax(0, 1fr); }
  .product-card { grid-template-columns: 80px 1fr; }
  .product-specs { grid-column: 1/-1; border-left: 0; border-top: 1px solid var(--line); padding: 11px 0 0; grid-template-columns: repeat(4,1fr); }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-categories { grid-template-columns: repeat(12, 96px); }
  .method-grid { grid-template-columns: 1fr 1fr; }
  .method-grid article:nth-child(2) { border-right: 0; }.method-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 740px) {
  .topbar { height: 70px; padding-inline: 17px; }.privacy-pill { display: none; }
  main { padding-inline: 14px; }.hero { min-height: 0; padding: 48px 3px 56px; }.hero h1 { font-size: 39px; }.hero-lead { font-size: 14px; }
  .signal-card { display: none; }
  .hero-actions { align-items: stretch; flex-direction: column; max-width: 240px; }.primary-cta { justify-content: space-between; }.secondary-cta { text-align: center; }
  .selector-heading { padding: 23px 18px; }.selector-heading h2 { font-size: 21px; }
  .selector-grid { display: block; }.filter-panel { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 18px; }
  .category-list { grid-template-columns: 1fr 1fr; }.category-card { min-height: 76px; }
  .results-panel { padding: 22px 14px; }.results-summary { align-items: flex-start; }.summary-tags { max-width: 45%; }
  .price-source { grid-template-columns: 32px 1fr; }.price-source a { grid-column: 2; }
  .product-card { grid-template-columns: 70px 1fr; padding: 14px; gap: 12px; }.product-title { padding-right: 26px; }.product-title h3 { font-size: 18px; }
  .instrument-visual { height: 62px; padding: 6px; }.instrument-screen { width: 49px; height: 35px; }.instrument-knobs { display: none; }
  .product-specs { grid-template-columns: 1fr 1fr; }.compare-toggle { padding: 10px; }
  .compare-bar { grid-template-columns: 1fr auto; }.compare-chips { display: none; }
  .catalog-section { padding-top: 72px; }.section-heading { display: block; }.catalog-stat { display: none; }
  .catalog-tools { grid-template-columns: 1fr; }.catalog-grid { grid-template-columns: 1fr; }.catalog-summary { min-height: 0; }
  .article-grid { grid-template-columns: 1fr; }.articles-section { padding-top: 60px; }.article-actions { flex-direction: column; }.article-actions button { width: 100%; }
  .catalog-downloads, .inquiry-layout { grid-template-columns: 1fr; }.catalog-downloads > div { grid-template-columns: 1fr; }.inquiry-pair { grid-template-columns: 1fr; gap: 0; }
  .inbox-head { display: grid; }.inbox-head > div:last-child { flex-wrap: wrap; }.inquiry-section { padding-top: 68px; }
  .section-heading.compact > p { margin-top: 12px; }.method-section { padding-top: 65px; }.method-grid { grid-template-columns: 1fr; }
  .method-grid article { border-right: 0; border-bottom: 1px solid var(--line); }.method-grid article:last-child { border-bottom: 0; }
  .source-note { grid-template-columns: auto 1fr; }.source-note a { grid-column: 2; }
  footer { display: block; padding-inline: 18px; } footer p + p { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }