:root { --ink:#142026; --muted:#42545c; --line:#a7c4bb; --panel:#d8ebe3; --brand:#0f6b57; --brand-dark:#083f35; --warm:#b98622; --paper:#d8e8df; --surface:#eaf6ef; --theme-bg:#e1f0e9; --theme-border:#a8ccc1; --theme-accent:#0f6b57; }
* { box-sizing: border-box; }
html { overflow-y: scroll; overflow-x: clip; scrollbar-gutter: stable; }
body { margin: 0; overflow-x: clip; color: var(--ink); font-family: Arial, Helvetica, sans-serif; line-height: 1.55; background: radial-gradient(circle at 8% -8%, rgba(185,134,34,.38), transparent 26rem), radial-gradient(circle at 92% 8%, rgba(15,107,87,.28), transparent 30rem), linear-gradient(180deg,#cfe2d9 0,#dbe9df 42%,#e7dcc3 100%); }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.site-header { border-bottom: 1px solid rgba(15,107,87,.34); background: rgba(216,235,227,.96); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5; box-shadow: 0 8px 26px rgba(22,32,40,.09); }
.nav { max-width: 1180px; margin: 0 auto; padding: 14px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0; color: var(--ink); min-width: 0; }
.logo-image { display: block; width: auto; height: 38px; max-height: 38px; max-width: 62px; object-fit: contain; flex: 0 0 auto; }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.nav-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.nav-links a, .nav-drop-toggle { border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; transition: border-color .16s ease, background .16s ease, color .16s ease; color: var(--brand-dark); background: transparent; font: inherit; cursor: pointer; }
.nav-links a:hover, .nav-dropdown:hover .nav-drop-toggle, .nav-drop-toggle:focus-visible { text-decoration: none; border-color: rgba(15,107,87,.32); background: rgba(15,107,87,.08); color: var(--brand-dark); }
.nav-dropdown { position: relative; }
.nav-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.nav-drop-toggle::after { content: "v"; margin-left: 6px; font-size: 11px; }
.nav-drop-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 150px; display: grid; gap: 4px; padding: 8px; border: 1px solid rgba(15,107,87,.22); border-radius: 12px; background: rgba(238,248,242,.98); box-shadow: 0 16px 34px rgba(22,32,40,.16); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; z-index: 30; }
.nav-dropdown:hover .nav-drop-menu, .nav-dropdown:focus-within .nav-drop-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-drop-menu a { display: block; white-space: nowrap; }
.nav-social { display: flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid rgba(15,107,87,.18); }
.social-logo { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(15,107,87,.22); background: rgba(255,255,255,.68); color: var(--brand-dark); font-size: 12px; font-weight: 900; line-height: 1; box-shadow: 0 4px 12px rgba(22,32,40,.08); transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.social-logo:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(22,32,40,.14); border-color: rgba(15,107,87,.42); background: #fff; }
.social-facebook { color: #1877f2; font-size: 18.3px; }
.social-twitter { color: #111827; font-size: 15px; }
.social-instagram { color: #fff; background: radial-gradient(circle at 30% 110%, #feda75 0 24%, #fa7e1e 34%, #d62976 55%, #962fbf 74%, #4f5bd5 100%); }
.social-instagram:hover { color: #fff; background: radial-gradient(circle at 30% 110%, #feda75 0 24%, #fa7e1e 34%, #d62976 55%, #962fbf 74%, #4f5bd5 100%); }
.social-instagram svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.social-ebay { display: flex; align-items: center; justify-content: center; gap: 0; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 11px; letter-spacing: -1px; }
.ebay-e { color: #e53238; }
.ebay-b { color: #0064d2; }
.ebay-a { color: #f5af02; }
.ebay-y { color: #86b817; }
.hero { background: linear-gradient(90deg, rgba(15,107,87,.95), rgba(22,32,40,.82)), url('assets/laptop-workbench.svg'); background-size: cover; background-position: center; color: white; }
.hero-inner { max-width: 1180px; margin: 0 auto; padding: 76px 22px 64px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); gap: 34px; align-items: center; }
.hero h1 { display: inline-flex; flex-wrap: wrap; gap: .16em; width: fit-content; max-width: 100%; padding: 8px 12px; border: 1px solid rgba(238,250,246,.46); border-radius: 14px; background: linear-gradient(90deg, rgba(8,63,53,.58), rgba(255,255,255,.12)); box-shadow: 0 14px 30px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.16); font-size: clamp(34px, 6vw, 62px); line-height: 1.02; margin: 0 0 18px; letter-spacing: 0; }
.brand-word-one { color: #8ee6ad; }
.brand-word-two { color: #f8fbf9; }
.brand-word-three { color: #9ea8ff; }
.brand-word-one, .brand-word-two, .brand-word-three { -webkit-text-stroke: .35px rgba(0,0,0,.78); text-shadow: 0 1px 1px rgba(0,0,0,.38); }
.hero p { font-size: 18px; max-width: 640px; margin: 0 0 26px; color: #effaf6; }
.hero-panel { background: rgba(232,246,238,.22); border: 1px solid rgba(255,255,255,.38); border-radius: 14px; padding: 22px; }
.hero-panel h2 { margin: 0 0 12px; font-size: 20px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hero-search { width: min(100%, 520px); display: grid; grid-template-columns: 1fr 48px; align-items: center; border: 1px solid rgba(255,255,255,.44); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.92); box-shadow: 0 14px 34px rgba(22,32,40,.18); }
.hero-search input { min-width: 0; min-height: 48px; border: 0; padding: 0 16px; background: transparent; color: var(--ink); font: inherit; }
.hero-search input:focus { outline: 0; }
.hero-search button { min-height: 48px; border: 0; border-left: 1px solid rgba(15,107,87,.18); background: var(--brand); color: #fff; font-size: 24px; cursor: pointer; }
.content .hero-search { margin: 18px 0 14px; border-color: var(--line); background: rgba(255,255,255,.94); box-shadow: 0 12px 26px rgba(22,32,40,.12); }
.search-mode { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(232,246,238,.84); }
.search-mode legend { padding: 0 6px; font-weight: 800; color: var(--brand-dark); }
.search-mode label { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); }
.split-links { display: flex; justify-content: space-between; gap: 16px; margin-top: auto; }
.search-results { display: grid; gap: 12px; margin-top: 18px; }
.search-result { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: rgba(232,246,238,.9); }
.search-result h2 { margin: 0 0 6px; font-size: 20px; }
.search-result p { margin: 0; color: var(--muted); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-radius: 8px; border: 1px solid rgba(15,107,87,.28); background: var(--brand); color: #fff; font-weight: 700; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.button:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--warm); box-shadow: 0 10px 22px rgba(15,107,87,.18); }
.button.secondary { background: #eaf6ef; color: var(--brand-dark); }
main { width: min(calc(100% - 44px), 1180px); margin: 0 auto; padding: 34px 0 58px; overflow: clip; }
main > .content, main > h1:first-child, main > p:first-of-type, main > .pill-row, main > .product-search, main > .product-grid, main > .grid { position: relative; }
.content { width: min(100%, 900px); min-width: 0; margin-left: auto; margin-right: auto; background: linear-gradient(180deg, rgba(226,241,234,.96), rgba(214,232,224,.94)); border: 1px solid rgba(15,107,87,.24); border-radius: 22px; padding: 24px; box-shadow: 0 18px 46px rgba(22,32,40,.12); }
.content, .content *, main > h1:first-child, main > p:first-of-type { overflow-wrap: anywhere; }
.section { margin: 34px 0; padding: 22px; border: 1px solid rgba(15,107,87,.22); border-radius: 24px; background: linear-gradient(180deg, rgba(226,241,234,.9), rgba(217,233,225,.82)); box-shadow: 0 16px 42px rgba(22,32,40,.1); }
.section h2, .content h1 { font-size: 30px; margin: 0 0 18px; letter-spacing: 0; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.home-services-grid .card { display: flex; flex-direction: column; }
.home-services-grid .card > a { margin-top: auto; }
.support-links-grid .card, .accessory-card-grid .card { display: flex; flex-direction: column; }
.support-links-grid .card > a, .support-links-grid .card > .split-links, .accessory-card-grid .card > a { margin-top: auto; }
.service-grid .card { display: flex; flex-direction: column; }
.service-grid .card a { margin-top: auto; }
.card { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: linear-gradient(180deg,rgba(235,247,239,.96),rgba(220,238,229,.94)); min-height: 160px; box-shadow: 0 8px 22px rgba(22,32,40,.08); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.card:hover { transform: translateY(-2px); border-color: var(--theme-accent); box-shadow: 0 16px 34px rgba(22,32,40,.1); }
.card h3, .card h5 { margin: 0 0 8px; font-size: 18px; }
.card p { margin: 0 0 12px; color: var(--muted); }
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 18px; }
.product { border: 1px solid var(--theme-border); border-radius: 20px; padding: 18px; background: var(--theme-bg); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 26px rgba(22,32,40,.06); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.product:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(22,32,40,.1); border-color: var(--theme-accent); }
.product h3 { margin: 2px 0 0; line-height: 1.3; }
.product p { color: var(--muted); margin: 0; }
.product a { margin-top: auto; font-weight: 700; }
.product-thumb { height: 118px; border-radius: 16px; background: linear-gradient(135deg,rgba(255,255,255,.78),rgba(255,255,255,.28)); border: 1px solid rgba(255,255,255,.72); display: grid; place-items: center; color: var(--brand-dark); font-weight: 800; overflow: hidden; }
.product-thumb img, .product-photo { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; padding: 0; margin: 0; background: var(--panel); }
.stock-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; margin: 18px 0; }
.stock-gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 8px 22px rgba(22,32,40,.08); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.stock-gallery figure:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 16px 34px rgba(22,32,40,.11); }
.stock-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 0; padding: 0; margin: 0; background: var(--panel); }
.stock-gallery figcaption { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.product-hero-image { width: min(100%, 720px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); margin: 10px auto 18px; display: block; box-shadow: 0 12px 28px rgba(22,32,40,.12); }
.content img, .content .asset-note { display: inline-flex; border: 1px dashed var(--line); background: var(--panel); color: var(--muted); border-radius: 6px; padding: 10px 12px; margin: 8px 0; font-size: 13px; }
.content h2, .content h3, .content h4 { margin-top: 26px; margin-bottom: 8px; }
.spec-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 8px 16px; padding: 0; list-style: none; }
.spec-list li { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: rgba(232,246,238,.88); transition: border-color .16s ease, background .16s ease; }
.spec-list li:hover { border-color: var(--brand); background: #f7fbf8; }
.notice { border-left: 4px solid var(--warm); background: #fff3d2; padding: 12px 14px; border-radius: 10px; color: #57421a; }
.footer { border-top: 1px solid var(--line); background: #cfe2d9; }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 24px 22px; color: var(--muted); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
@media (max-width: 800px) { .hero-inner { grid-template-columns: 1fr; padding-top: 48px; } .grid { grid-template-columns: 1fr; } .nav { align-items: flex-start; flex-direction: column; } .nav-right { justify-content: flex-start; } .nav-social { padding-left: 0; border-left: 0; } }

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 24px; }
.pill { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(232,246,238,.88); font-weight: 700; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.pill:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--brand); background: #f7fbf8; }
.steps { display: grid; gap: 12px; margin: 18px 0; }
.steps div { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(232,246,238,.9); transition: border-color .16s ease, box-shadow .16s ease; }
.steps div:hover { border-color: var(--brand); box-shadow: 0 10px 24px rgba(22,32,40,.08); }
.steps strong { width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center; background: var(--brand); color: #fff; }
.theme-business, .theme-page-business { --theme-bg:#dcefe8; --theme-border:#94c3b6; --theme-accent:#0f6b57; }
.theme-home, .theme-page-home { --theme-bg:#f4e5bc; --theme-border:#d3ad59; --theme-accent:#8a5a08; }
.theme-workstation, .theme-page-workstation { --theme-bg:#dfe7fa; --theme-border:#9dafdf; --theme-accent:#334c9a; }
.theme-trade, .theme-page-trade { --theme-bg:#e7dbc8; --theme-border:#bfa37d; --theme-accent:#674b2d; }
.theme-accessories, .theme-page-accessories { --theme-bg:#e8edf4; --theme-border:#9fb2c7; --theme-accent:#37536f; }
.theme-catalogue, .theme-page-catalogue, .theme-categories { --theme-bg:#dceaf2; --theme-border:#9fbfd2; --theme-accent:#255a73; }
.category-card { position: relative; isolation: isolate; overflow: hidden; border-color: var(--theme-border); background: var(--theme-bg); border-radius: 20px; box-shadow: 0 10px 24px rgba(22,32,40,.05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.category-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--category-image); background-size: cover; background-position: center; opacity: 0; transform: scale(1.04); transition: opacity .22s ease, transform .22s ease; }
.category-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.82)); opacity: 0; transition: opacity .22s ease; }
.category-card:hover { transform: translateY(-5px); border-color: var(--theme-accent); box-shadow: 0 22px 44px rgba(22,32,40,.16); }
.category-card:hover::before { opacity: .42; transform: scale(1); }
.category-card:hover::after { opacity: 1; }
.category-card h3 { color: var(--theme-accent); }
.category-card h3, .category-card p, .category-card a { position: relative; }
.product-search { margin: 18px 0 24px; padding: 16px; border: 1px solid var(--theme-border); border-radius: 20px; background: var(--theme-bg); display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; gap: 12px; align-items: end; }
.product-search label { display: block; margin: 0 0 5px; font-size: 16px; font-weight: 800; color: var(--ink); }
.product-search select { width: 100%; min-height: 44px; border: 1px solid var(--theme-border); border-radius: 10px; padding: 9px 34px 9px 10px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; }
.product-search select:focus { outline: 2px solid var(--theme-border); border-color: var(--theme-accent); }
.search-reset { border: 0; cursor: pointer; min-width: 92px; min-height: 44px; font-size: 16px; font-weight: 800; }
.empty-state { border: 1px dashed var(--theme-border); border-radius: 16px; padding: 18px; background: var(--theme-bg); color: var(--muted); }
.product[hidden], .empty-state[hidden] { display: none !important; }
.assessment-form { display: grid; gap: 18px; }
.suggestion-box { display: grid; gap: 12px; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(232,246,238,.9); }
.suggestion-box textarea { min-height: 130px; resize: vertical; }
.suggestion-box input, .suggestion-box textarea, .builder-form input, .builder-form select, .builder-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: #eef8f2; color: var(--ink); font: inherit; }
.builder-form { display: grid; gap: 14px; margin: 18px 0; }
.builder-form .form-grid { align-items: end; }
.builder-form small { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.35; }
.builder-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 18px; align-items: start; }
.builder-summary { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: linear-gradient(180deg, rgba(247,251,248,.98), rgba(224,240,233,.96)); box-shadow: 0 18px 38px rgba(22,32,40,.12); }
.builder-summary h3 { margin-top: 0; }
.builder-summary ul { margin: 12px 0 0; padding-left: 20px; }
.builder-summary li { margin: 7px 0; }
.quote-pack { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(15,107,87,.22); }
.quote-pack textarea { width: 100%; min-height: 190px; border: 1px solid var(--line); border-radius: 12px; padding: 11px; background: #f7fbf8; color: var(--ink); font: inherit; resize: vertical; }
.quote-pack .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.copy-status { min-height: 20px; margin: 0; font-size: 13px; color: var(--muted); }
.supplier-guide { display: grid; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(15,107,87,.22); }
.supplier-guide h3 { margin: 0; }
.supplier-guide p { margin: 0; color: var(--muted); }
.supplier-meta { display: grid; gap: 7px; padding: 10px 12px; border: 1px solid rgba(15,107,87,.2); border-radius: 12px; background: rgba(232,246,238,.78); font-size: 13px; }
.supplier-picks { display: grid; gap: 8px; }
.supplier-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(247,251,248,.94); }
.supplier-pick div { display: grid; gap: 2px; min-width: 0; }
.supplier-pick span, .supplier-pick small { color: var(--muted); }
.supplier-pick b { color: var(--brand-dark); text-align: right; }
.supplier-note { padding: 10px 12px; border-left: 4px solid var(--warm); border-radius: 10px; background: #fff7de; color: #57421a !important; }
.staging-grid { align-items: stretch; }
.staging-card { border-style: dashed; }
.staging-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.staging-meta span { border: 1px solid rgba(14,111,91,.25); border-radius: 999px; background: rgba(255,255,255,.7); padding: 4px 9px; font-size: .85rem; color: #0b4438; }
.spec-list.compact { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 12px 0; padding: 0; }
.staging-warning { margin-top: auto; border: 1px solid rgba(159,106,12,.28); border-radius: 10px; background: rgba(255,248,225,.72); padding: 10px 12px; }
.staging-warning ul { margin: 6px 0 0; padding-left: 18px; }
.quote-note { border: 1px dashed rgba(15,107,87,.32); border-radius: 14px; padding: 12px; background: rgba(232,246,238,.7); color: var(--muted); }
.build-path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.build-path { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: rgba(247,251,248,.9); box-shadow: 0 12px 28px rgba(22,32,40,.08); }
.build-path strong { color: var(--brand-dark); }
.spec-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.spec-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid rgba(15,107,87,.24); border-radius: 999px; background: rgba(232,246,238,.92); font-size: 13px; font-weight: 800; color: var(--brand-dark); }
.quote-flow { counter-reset: quote-step; display: grid; gap: 12px; }
.quote-flow li { counter-increment: quote-step; display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: rgba(247,251,248,.9); }
.quote-flow li::before { content: counter(quote-step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; font-weight: 900; }
.confidence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.confidence-grid article { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: rgba(232,246,238,.86); }
.confidence-grid h3 { margin-top: 0; font-size: 18px; }
.pc-build-panel { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; margin: 24px 0; overflow: visible; }
.budget-chart-stage { position: relative; min-height: 610px; overflow: visible; padding-right: 430px; }
.budget-chart-wrap { position: relative; width: min(100%, 510px); margin: 18px auto 0 54px; aspect-ratio: 1; overflow: visible; perspective: 900px; }
.budget-chart { position: absolute; inset: 6%; border-radius: 50%; background: transparent; filter: drop-shadow(0 22px 24px rgba(22,32,40,.18)); transform: rotateX(58deg) rotateZ(-18deg); transform-style: preserve-3d; overflow: visible; }
.budget-donut { width: 100%; height: 100%; overflow: visible; }
.budget-segment-side { transform: translateY(9px); opacity: .72; }
.budget-segment { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .2s ease, filter .2s ease, opacity .2s ease; stroke: rgba(255,255,255,.52); stroke-width: .8; }
.budget-segment:hover, .budget-segment:focus, .budget-segment.is-active { transform: translate(var(--lift-x), var(--lift-y)); filter: drop-shadow(0 12px 10px rgba(22,32,40,.24)); opacity: 1; outline: none; }
.budget-hole { fill: #eef8f2; stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 2px 4px rgba(22,32,40,.08)); pointer-events: none; }
.budget-center-label { font: 900 7px system-ui, -apple-system, Segoe UI, sans-serif; fill: var(--brand-dark); text-anchor: middle; dominant-baseline: middle; pointer-events: none; transform: rotate(18deg); transform-box: fill-box; transform-origin: 50% 50%; }
.budget-segment-label { font: 900 4.4px system-ui, -apple-system, Segoe UI, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.42); stroke-width: .7px; text-anchor: middle; dominant-baseline: middle; pointer-events: none; transform: rotate(18deg); transform-box: fill-box; transform-origin: 50% 50%; transition: transform .2s ease, font-size .2s ease; }
.budget-segment-label.is-active { font-size: 4.9px; transform: rotate(18deg) translate(var(--lift-x), var(--lift-y)); }
.budget-slice { position: absolute; display: block; width: 118px; height: 92px; border: 0; background: rgba(255,255,255,0); color: transparent; opacity: 1; cursor: pointer; z-index: 20; pointer-events: auto; transform: translate(-50%, -50%); }
.budget-slice:focus-visible { opacity: 1; color: var(--brand-dark); border: 2px solid var(--brand); border-radius: 999px; background: rgba(247,251,248,.92); }
.budget-slice[data-budget-key="cpu"] { left: 72%; top: 28%; }
.budget-slice[data-budget-key="gpu"] { left: 74%; top: 68%; }
.budget-slice[data-budget-key="memory"] { left: 44%; top: 78%; }
.budget-slice[data-budget-key="storage"] { left: 25%; top: 60%; }
.budget-slice[data-budget-key="board"] { left: 25%; top: 36%; }
.budget-slice[data-budget-key="setup"] { left: 43%; top: 20%; }
.budget-connector-svg { position: absolute; inset: 0; width: calc(100% + 520px); height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.budget-connector-path { fill: none; stroke: rgba(15,107,87,.72); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(255,255,255,.75)); }
.budget-connector-dot { fill: var(--brand); filter: drop-shadow(0 2px 3px rgba(22,32,40,.2)); }
.budget-popover { position: absolute; left: calc(100% + 28px); top: 64%; width: 390px; max-width: calc(100vw - 760px); transform: translateY(-50%); border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: linear-gradient(180deg, #f7fbf8, #e5f2eb); box-shadow: 0 18px 42px rgba(22,32,40,.2); z-index: 8; }
.budget-popover::before { display: none; }
.budget-popover h3 { margin: 0 0 10px; }
.budget-popover dl { display: grid; gap: 8px; margin: 14px 0 0; }
.budget-popover div { display: grid; grid-template-columns: 100px 1fr; gap: 10px; }
.budget-popover dt { font-weight: 900; color: var(--brand-dark); }
.budget-popover dd { margin: 0; color: var(--muted); }
.budget-list { order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; }
.budget-list article { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: rgba(247,251,248,.9); }
.budget-list h3 { margin-top: 0; font-size: 18px; }
.comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; }
.comparison-grid .card { min-height: 0; }
.trust-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.trust-strip div { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(247,251,248,.88); font-weight: 800; text-align: center; }
.assessment-form fieldset { border: 1px solid var(--line); border-radius: 16px; background: rgba(232,246,238,.88); padding: 14px 16px; display: flex; gap: 16px; flex-wrap: wrap; }
.assessment-form legend { font-weight: 800; color: var(--brand-dark); padding: 0 6px; }
.assessment-form label { display: grid; gap: 6px; font-weight: 700; color: var(--ink); }
.assessment-form input, .assessment-form select, .assessment-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; background: #eef8f2; color: var(--ink); font: inherit; }
.assessment-form textarea { resize: vertical; }
.assessment-form input:focus, .assessment-form select:focus, .assessment-form textarea:focus { outline: 3px solid rgba(185,134,34,.28); border-color: var(--warm); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.file-input { border-style: dashed !important; cursor: pointer; }
.photo-guidance { margin: 0; padding-left: 20px; }
.message-preview { min-height: 180px; }
.card a:not(.button), .product a:not(.button), .section article a:not(.button), .content a:not(.button), .pill { display: inline-flex; width: fit-content; border: 2px solid transparent; border-radius: 8px; padding: 2px 5px; margin-left: -5px; transition: border-color .16s ease, background .16s ease; }
.card:hover a:not(.button), .product:hover a:not(.button), .section article:hover a:not(.button), .steps div:hover a:not(.button), .pill:hover { animation: linkBorderPulse 2.4s ease-in-out infinite; text-decoration: none; }
.button:focus-visible, .nav-links a:focus-visible, .product a:focus-visible, .card a:focus-visible, .pill:focus-visible, .content a:focus-visible { outline: 3px solid rgba(200,155,66,.62); outline-offset: 3px; border-color: var(--warm); }
@keyframes linkBorderPulse {
  0%, 100% { border-color: rgba(185,134,34,.34); box-shadow: 0 0 0 0 rgba(185,134,34,.22); background: rgba(255,255,255,.14); }
  50% { border-color: rgba(185,134,34,.9); box-shadow: 0 0 0 5px rgba(185,134,34,0); background: rgba(255,246,222,.46); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
@media (max-width: 900px) { .product-search { grid-template-columns: repeat(2, minmax(0, 1fr)); } .search-reset { width: 100%; } }
@media (max-width: 1100px) { .budget-chart-wrap { position: static; margin: 18px auto 0; } .budget-chart-stage { min-height: auto; padding-right: 0; } .budget-connector-svg { display: none; } .budget-popover { position: relative; left: auto; top: auto; width: auto; max-width: none; transform: none; margin-top: 18px; } }
@media (max-width: 900px) { .pc-build-panel, .trust-strip, .builder-layout, .budget-list { grid-template-columns: 1fr; } .builder-summary { position: static; } }
@media (max-width: 560px) { .product-search, .form-grid { grid-template-columns: 1fr; } }
.representative-photo { margin: 12px auto 22px; text-align: center; }
.representative-photo figcaption { color: var(--muted); font-size: 13px; margin-top: 8px; }

.matched-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 18px 0 20px; }
.matched-gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 10px 24px rgba(22,32,40,.08); }
.matched-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 0; margin: 0; padding: 0; }
.matched-gallery figcaption { color: var(--muted); font-size: 12px; padding: 8px 10px; }

.product-carousel { width: min(100%, 860px); margin: 16px auto 18px; }
.carousel-screen { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; min-height: min(520px, calc((100vw - 88px) * .75)); max-height: min(72vh, 760px); padding: 0; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 18px 38px rgba(22,32,40,.14); cursor: zoom-in; touch-action: none; }
.carousel-screen.is-zoomed { cursor: grab; }
.carousel-screen:active { cursor: grabbing; }
.carousel-screen::before { content: none; }
.carousel-image { box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; display: block; border: 0; padding: 0; margin: 0; background: #fff; transform-origin: center; transition: transform .18s ease; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.content .carousel-image { border: 0; border-radius: 0; padding: 0; margin: 0; background: #fff; }
.carousel-image.is-zoomed { transition: none; }
.carousel-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.carousel-controls button { width: 42px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 800; cursor: pointer; box-shadow: 0 8px 18px rgba(22,32,40,.08); }
.carousel-controls button:hover { border-color: var(--brand); background: #edf7f2; transform: translateY(-1px); }
.carousel-count { color: var(--muted); font-weight: 700; margin-left: 6px; }
.carousel-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; overflow: visible; padding: 10px; border: 1px solid var(--line); border-radius: 22px; background: rgba(245,250,247,.78); box-shadow: inset 0 0 18px rgba(255,255,255,.55); }
.carousel-thumb { aspect-ratio: 4 / 3; border: 2px solid transparent; border-radius: 18px; overflow: hidden; padding: 0; background: var(--surface); cursor: pointer; scroll-snap-align: center; opacity: .74; transition: opacity .16s ease, transform .16s ease, border-color .16s ease; }
.carousel-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; padding: 0; margin: 0; }
.carousel-thumb:hover, .carousel-thumb.is-active { opacity: 1; transform: translateY(-1px); border-color: var(--brand); }
@media (max-width: 700px) { main { width: min(calc(100% - 24px), 1180px); } .content { padding: 18px; } .carousel-screen { border-radius: 20px; min-height: 0; max-height: none; } .carousel-rail { border-radius: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

main > h1:first-child, main > p:first-of-type { text-align: center; }
main > .pill-row, main > .grid, main > .product-search, main > .product-grid { width: 100%; margin-left: auto; margin-right: auto; }
main > .pill-row, main > .grid { justify-content: center; }
.page-tools { position: fixed; right: 18px; bottom: 18px; z-index: 20; display: flex; gap: 7px; padding: 7px; border: 1px solid rgba(15,107,87,.24); border-radius: 14px; background: rgba(232,246,238,.92); box-shadow: 0 12px 32px rgba(22,32,40,.18); backdrop-filter: blur(8px); }
.page-tools button { min-height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--brand-dark); font-weight: 800; cursor: pointer; }
.page-tools button:hover { border-color: var(--brand); background: #f7fbf8; transform: translateY(-1px); }
@media (max-width: 620px) { .page-tools { left: 12px; right: 12px; justify-content: center; } }