:root {
  color-scheme: light;
  --ink: #172033; --muted: #667085; --page: #f7f9fc; --panel: #fff;
  --panel-border: #e4e8f0; --primary: #3357d6; --primary-dark: #2544b5;
  --mint: #168b72; --purple: #6c63e8; --radius: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--page); }
body {
  min-height: 100vh; margin: 0; color: var(--ink);
  background: radial-gradient(circle at 8% 18%, rgba(108,99,232,.09), transparent 28rem), radial-gradient(circle at 94% 82%, rgba(22,139,114,.08), transparent 30rem), linear-gradient(180deg,#fff 0%,#f7f9fc 55%,#f3f7f8 100%);
}
button,input { font: inherit; } button { color: inherit; } a { color: inherit; }
.site-header { position: sticky; top: 0; z-index: 50; height: 76px; background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(218,223,233,.9); box-shadow: 0 8px 28px rgba(25,38,70,.045); backdrop-filter: blur(18px); }
.header-inner { display: grid; grid-template-columns: minmax(180px,1fr) auto minmax(140px,1fr); align-items: center; width: min(1180px,calc(100% - 48px)); height: 100%; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 9px; justify-self: start; text-decoration: none; }
.brand img:first-child { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(66,63,160,.16)); }
.brand img:last-child { width: 146px; height: auto; }
.header-nav { display: flex; align-items: center; gap: clamp(18px,2.1vw,32px); }
.header-nav a { color: #475467; font-size: .96rem; font-weight: 700; text-decoration: none; }
.header-nav a:hover,.header-nav .active { color: var(--primary); }
.account-link { justify-self: end; padding: 11px 18px; color: #fff; background: var(--primary); border-radius: 12px; box-shadow: 0 8px 20px rgba(51,87,214,.18); font-size: .86rem; font-weight: 750; text-decoration: none; }
.product-tabs { position: relative; z-index: 2; border-bottom: 1px solid var(--panel-border); background: rgba(255,255,255,.86); }
.product-tabs nav { display: flex; align-items: center; gap: 26px; width: min(1180px,calc(100% - 48px)); height: 54px; margin: auto; }
.product-tabs a { position: relative; color: var(--muted); font-size: .86rem; font-weight: 760; text-decoration: none; }
.product-tabs a:hover,.product-tabs a.active { color: var(--ink); }
.product-tabs a.active::after { content: ""; position: absolute; right: 0; bottom: -18px; left: 0; height: 2px; background: linear-gradient(90deg,#2ddfbd,var(--primary)); }
.ambient { position: fixed; width: 28rem; height: 28rem; border-radius: 50%; filter: blur(100px); opacity: .11; pointer-events: none; }
.ambient-one { top: -15rem; right: -9rem; background: var(--purple); } .ambient-two { bottom: -18rem; left: -10rem; background: #48c5a6; }
main { position: relative; z-index: 1; width: min(1280px,calc(100% - 48px)); margin: 0 auto; padding: 52px 0 80px; }
.intro { max-width: none; margin-bottom: 32px; } .intro-meta { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.eyebrow,.step { margin: 0; color: var(--primary); font-size: .74rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
.edition { padding: 6px 9px; color: var(--mint); background: #edf9f5; border: 1px solid #ccece2; border-radius: 999px; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; color: #111827; font-size: clamp(2.7rem,5vw,4.5rem); line-height: .98; letter-spacing: -.06em; white-space: nowrap; }
.intro > p:last-child { max-width: 690px; margin: 20px 0 0; color: var(--muted); font-size: clamp(1rem,2vw,1.14rem); line-height: 1.65; }
.configurator { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(340px,.72fr); gap: 20px; align-items: stretch; }
.viewer-card,.controls { background: rgba(255,255,255,.95); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 28px 80px rgba(28,45,82,.10),0 2px 8px rgba(28,45,82,.04); }
.viewer-card { position: relative; display: flex; min-height: 610px; overflow: hidden; }
model-viewer { flex: 1 1 auto; width: 100%; min-height: 610px; height: auto; background: radial-gradient(circle at 50% 40%,#fff 0,#f2f5f9 55%,#e9eef5 100%); --progress-bar-color: var(--primary); --poster-color: transparent; }
.progress { width: 100%; height: 3px; background: #e2e7ef; transform-origin: left; } .progress span { display: block; width: 42%; height: 100%; background: linear-gradient(90deg,var(--mint),var(--primary)); animation: loading 1.1s ease-in-out infinite alternate; }
@keyframes loading { to { transform: translateX(138%); } }
.ar-button { position: absolute; right: 18px; bottom: 18px; min-height: 42px; padding: 0 16px; color: #fff; background: var(--primary); border: 0; border-radius: 999px; font-weight: 800; box-shadow: 0 10px 24px rgba(51,87,214,.22); }
.viewer-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; }
.viewer-toolbar button { min-height: 40px; padding: 0 14px; color: #344054; background: #fff; border: 1px solid #d7dce6; border-radius: 11px; cursor: pointer; }
.viewer-toolbar button:hover { color: var(--primary); background: #f5f7ff; border-color: #b9c5eb; }
.viewer-status { margin: 13px 18px 17px; color: var(--muted); font-size: .79rem; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.controls { padding: 28px; } .controls h2 { margin: 8px 0 0; color: #172033; font-size: 2rem; letter-spacing: -.04em; } .controls header > p:last-child { margin: 11px 0 0; color: var(--muted); line-height: 1.55; }
.price-panel { display: grid; gap: 3px; margin-top: 22px; padding: 17px 18px; color: #fff; border-radius: 17px; background: radial-gradient(circle at 100% 0,rgba(45,223,189,.22),transparent 9rem),linear-gradient(135deg,#111a31,#1c3262); box-shadow: 0 14px 30px rgba(24,46,95,.14); }
.price-panel span { color: #aebdd5; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.price-panel strong { font-size: 1.55rem; letter-spacing: -.035em; }.price-panel small { color: #b9c6da; line-height: 1.4; }.price-panel b { margin-top: 8px; padding-top: 9px; color: #78f1d9; border-top: 1px solid rgba(255,255,255,.14); font-size: .82rem; }
.price-panel.unavailable { background: linear-gradient(135deg,#4a2530,#713647); }.price-panel.unavailable strong { font-size: 1.1rem; }
.color-group { margin: 25px 0 0; padding: 21px 0 0; border: 0; border-top: 1px solid var(--panel-border); } .color-group legend { float: left; width: 100%; margin: 0 0 14px; color: #344054; font-weight: 800; } .color-group legend + * { clear: both; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; } .swatch { position: relative; width: 42px; height: 42px; padding: 0; background: var(--swatch); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #cbd2dd,0 4px 10px rgba(31,45,70,.08); cursor: pointer; }
.swatch::after { content: ""; position: absolute; inset: -6px; border: 2px solid transparent; border-radius: inherit; } .swatch:hover::after,.swatch:focus-visible::after { border-color: #aeb8ca; } .swatch.selected::after { border-color: var(--primary); }
.custom-color { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; color: var(--muted); font-size: .82rem; } .custom-color input { width: 54px; height: 34px; padding: 2px; background: #fff; border: 1px solid #cfd6e1; border-radius: 9px; cursor: pointer; }
.color-empty { width: 100%; margin: 0; padding: 11px 12px; color: #7b8495; border: 1px dashed #ccd4e1; border-radius: 11px; background: #f8fafc; font-size: .76rem; line-height: 1.45; }
.selection-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 27px; } .selection-summary span { display: grid; grid-template-columns: 14px 1fr; gap: 2px 7px; align-items: center; padding: 10px; color: var(--muted); background: #f7f8fc; border: 1px solid var(--panel-border); border-radius: 12px; font-size: .7rem; }
.selection-summary i { grid-row: 1 / 3; width: 13px; height: 28px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 5px; } .selection-summary strong { color: var(--ink); font-size: .71rem; }
.actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: 18px; } .actions button { min-height: 48px; padding: 0 17px; border-radius: 13px; font-weight: 800; cursor: pointer; }
.primary { color: #fff; background: var(--primary); border: 1px solid var(--primary); box-shadow: 0 12px 28px rgba(51,87,214,.18); } .primary:hover { background: var(--primary-dark); } .secondary { color: #344054; background: #fff; border: 1px solid #d7dce6; } .secondary:hover { background: #f8f9fc; }
.production-note { margin: 17px 0 0; color: #7b8495; font-size: .7rem; line-height: 1.5; } button:focus-visible,a:focus-visible { outline: 3px solid rgba(51,87,214,.25); outline-offset: 2px; }
.order-guide { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; margin-top: 26px; padding: 58px; color: #fff; background: linear-gradient(125deg,#10172b,#1a2752); border-radius: 28px; box-shadow: 0 28px 80px rgba(28,45,82,.12); }
.order-guide h2 { max-width: 420px; margin: 10px 0 0; font-size: clamp(2.2rem,4vw,4rem); line-height: .96; letter-spacing: -.055em; }
.order-guide ol { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.order-guide li { padding: 22px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; }
.order-guide li span { display: block; margin-bottom: 34px; color: #55e4c4; font-size: .7rem; font-weight: 900; letter-spacing: .15em; }
.order-guide li strong { display: block; font-size: 1.05rem; }
.order-guide li p { margin: 9px 0 0; color: #bdc7da; font-size: .84rem; line-height: 1.55; }
.noscript { position: fixed; right: 16px; bottom: 16px; left: 16px; padding: 14px; color: #5b1717; background: #ffd9d9; border-radius: 12px; text-align: center; }
@media (max-width:1120px) { .header-nav { display: none; } .header-inner { grid-template-columns: 1fr auto; } .configurator { grid-template-columns: 1fr; } .viewer-card,model-viewer { min-height: 500px; } model-viewer { height: 500px; } .order-guide { grid-template-columns: 1fr; gap: 34px; } }
@media (max-width:760px) { h1 { white-space: normal; } }
@media (max-width:700px) { .header-inner,main,.product-tabs nav { width: min(100% - 24px,1280px); } .site-header { height: 68px; } .brand img:last-child { width: 132px; } .account-link { padding: 9px 13px; } .product-tabs nav { overflow-x: auto; } main { padding-top: 38px; } .viewer-card,.controls { border-radius: 18px; } .viewer-card,model-viewer { min-height: 430px; } model-viewer { height: 430px; } .controls { padding: 22px; } .order-guide { padding: 30px 22px; } .order-guide ol { grid-template-columns: 1fr; } .order-guide li span { margin-bottom: 18px; } }
@media (prefers-reduced-motion:reduce) { .progress span { animation: none; width: 100%; } }