/* Switch Customs / graphite hardware visual system. Presentation only. */
:root {
  --bg: #080b12;
  --panel: #111722;
  --panel-2: #192231;
  --text: #f4f7fc;
  --muted: #aebbcf;
  --line: #344252;
  --accent: #67bfff;
  --accent-2: #95d7ff;
  --violet: #a795ef;
  --max: 1220px;
}
html { scroll-padding-top: 88px; }
body {
  background-color: #080b12;
  background-image:
    radial-gradient(ellipse 65rem 46rem at 92% 0%, rgba(71,87,165,.13), transparent 68%),
    radial-gradient(ellipse 50rem 42rem at 0% 37%, rgba(35,124,160,.09), transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(130,172,211,.016) 80px 81px),
    linear-gradient(180deg,#0b101a,#080b12 34%,#0c111b);
  color: var(--text);
}
::selection { background: #5369ac; color: white; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid #a8dfff; outline-offset: 4px; }
.site-header {
  min-height: 76px;
  border-bottom: 1px solid rgba(149,185,224,.14);
  background: rgba(9,13,22,.92);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.brand-logo { box-shadow: 0 0 0 1px rgba(161,199,239,.2), 0 0 26px rgba(107,151,235,.12); }
.brand-name { font-size: .85rem; letter-spacing: .17em; }
.site-nav { gap: clamp(9px,1.3vw,20px); color: #bdc7d7; }
.site-nav a:not(.nav-cta) { transition: color .18s ease; }
.site-nav a:not(.nav-cta):hover { color: #a4d8ff; }
.nav-cta { border-color: rgba(136,189,231,.42); border-radius: 8px; background: rgba(90,150,207,.07); color: #e6f5ff; transition: background .2s ease,border-color .2s ease; }
.nav-cta:hover { background: rgba(90,150,207,.17); border-color: #88c3f3; }
.eyebrow, .form-kicker { color: #9cd4f4; letter-spacing: .22em; }
h1,h2,h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.button {
  position: relative;
  gap: 12px;
  border-radius: 9px;
  border-bottom-width: 3px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(2px); box-shadow: none !important; border-bottom-width: 1px; }
.button.primary, .primary:not(.button) { background: linear-gradient(135deg,#8cdbff,#71aef4 55%,#a4a1ee); color: #09121f; border-color: rgba(255,255,255,.15); border-bottom-color: #3c6b95; box-shadow: 0 8px 23px rgba(77,152,231,.18); }
.button.primary:hover { box-shadow: 0 12px 32px rgba(91,159,237,.32); }
.button.secondary { border-color: #465569; border-bottom-color: #283343; background: rgba(182,208,240,.045); color: #edf5fc; }
.button.secondary:hover { border-color: #82abd3; background: rgba(182,208,240,.1); }
.section-heading { border-top: 1px solid rgba(137,177,211,.17); padding-top: 28px; }
.section-heading h2 { max-width: 800px; }
.product-card, .ready-card, .custom-start-card, .service-path-card, .service-price-card, .seo-callout, .builder-panel, .build-summary {
  border-color: rgba(124,158,192,.25);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 18px 45px rgba(0,0,0,.12);
}
.product-card, .custom-start-card, .ready-card, .service-path-card { transition: transform .32s cubic-bezier(.2,.8,.2,1),border-color .3s ease,box-shadow .3s ease; }
.product-card:hover, .custom-start-card:hover, .service-path-card:hover { transform: translateY(-5px); border-color: rgba(132,183,233,.65); box-shadow: 0 20px 52px rgba(0,0,0,.25), 0 0 30px rgba(65,124,213,.08); }
.product-card.featured:hover { transform: translateY(-16px); }
.ready-card:hover { border-color: rgba(166,132,232,.52); box-shadow: 0 25px 65px rgba(0,0,0,.23); }
.custom-first-home .custom-start-card { background: linear-gradient(142deg,rgba(31,49,68,.8),rgba(16,23,34,.96)); }
.site-footer { border-top-color: rgba(136,181,224,.24); }

/* Entry composition keeps the real customer build and its audio intact. */
.custom-first-home .custom-launch { background: #10182a; border-bottom: 1px solid #334362; color: #d8e9ff; }
.custom-first-home .custom-launch a { color: #a5dcff; }
.custom-first-home .custom-first-hero {
  position: relative;
  max-width: 1350px;
  grid-template-columns: minmax(0,1fr) minmax(340px,.78fr);
  gap: clamp(30px,5vw,90px);
  padding-block: clamp(80px,9vw,138px) 110px;
}
.custom-first-home .custom-first-hero::before {
  position: absolute; z-index: -1; top: 2%; left: 34%; width: min(70vw,900px); height: 80%;
  content: ""; pointer-events: none;
  background: radial-gradient(ellipse at 60% 40%,rgba(86,93,180,.18),transparent 60%),radial-gradient(ellipse at 45% 60%,rgba(57,142,200,.12),transparent 65%);
}
.custom-first-home .hero-copy { position: relative; padding-left: 26px; }
.custom-first-home .hero-copy::before { position: absolute; top: 3px; bottom: 8px; left: 0; width: 1px; content: ""; background: linear-gradient(#84caff,rgba(154,130,223,.4),transparent); }
.custom-first-home .hero-copy::after { position: absolute; top: 0; left: -3px; width: 7px; height: 7px; border-radius: 50%; content: ""; background: #8bd9ff; box-shadow: 0 0 15px #8bd9ff; }
.custom-first-home .custom-first-hero h1 { font-size: clamp(3.7rem,6.3vw,6.8rem); line-height: .98; letter-spacing: -.067em; }
.custom-first-home .custom-first-hero h1 span { background: linear-gradient(95deg,#a8e7ff 6%,#8db8ef 55%,#b7a5f5); color: transparent; background-clip: text; }
.custom-first-home .custom-first-hero .hero-text { color: #bccbdb; font-size: clamp(1.03rem,1.6vw,1.2rem); line-height: 1.7; }
.custom-first-home .custom-first-hero .primary { background: linear-gradient(135deg,#a5e6ff,#83bdf4); color: #071827; border-bottom-color: #477795; }
.custom-first-home .home-delivery { color: #bfdddf; }
.custom-first-home .home-ready-link { color: #b7d9f4; }
.custom-first-home .custom-proof-card { width: 100%; max-width: 460px; border-radius: 18px; border-color: rgba(112,167,216,.37); transform: rotate(1.2deg); box-shadow: 0 34px 80px rgba(0,0,0,.45), 0 0 60px rgba(75,115,210,.1); }
.custom-first-home .custom-proof-card .hero-card-media { background: #202832; }
.custom-first-home .custom-proof-card .hero-card-meta { padding: 21px; background: linear-gradient(145deg,#182331,#101722); }
.custom-first-home .custom-proof-card .hero-card-meta strong { color: #f6f9ff; }
.custom-first-home .customer-sound-test { border-color: #354c63; }
.custom-first-home .custom-proof-card .customer-build-actions .primary { color: #0b1624; }
.custom-first-home .custom-proof-card .customer-build-actions a { font-size: .78rem; }

/* Scroll story. All artwork is an inlined, lightweight SVG. */
.assembly-section { position: relative; isolation: isolate; border-block: 1px solid rgba(149,182,219,.17); background: linear-gradient(180deg,rgba(22,31,49,.55),rgba(10,15,25,.8) 42%,rgba(18,22,39,.65)); }
.assembly-section::before { position: absolute; z-index: -1; inset: 0; content: ""; pointer-events: none; opacity: .36; background-image: linear-gradient(90deg,transparent 49.7%,rgba(94,151,201,.095) 50%,transparent 50.3%), repeating-linear-gradient(0deg,transparent 0 99px,rgba(101,155,199,.06) 100px 101px); background-size: 220px 220px; }
.assembly-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,340px); column-gap: 50px; padding-top: clamp(85px,9vw,140px); padding-bottom: 35px; }
.assembly-intro .eyebrow { grid-column: 1/-1; }
.assembly-intro h2 { font-size: clamp(3.3rem,6.6vw,7rem); line-height: .98; letter-spacing: -.066em; }
.assembly-intro h2 em { font-style: normal; background: linear-gradient(90deg,#90d2fb,#ac9de3); color: transparent; background-clip: text; }
.assembly-intro > p:last-child { align-self: end; color: #b7c6d8; font-size: .99rem; line-height: 1.75; }
.assembly-track { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(270px,.68fr); align-items: start; gap: clamp(35px,6vw,100px); }
.assembly-visual { position: sticky; top: 94px; align-self: start; height: min(75vh,650px); display: grid; place-items: center; }
.assembly-stage { position: relative; width: 100%; aspect-ratio: 1.31; max-height: min(68vh,575px); overflow: hidden; border: 1px solid #435571; border-radius: 20px; background: radial-gradient(ellipse at 52% 36%,rgba(74,94,165,.22),transparent 64%),linear-gradient(145deg,#151d2e,#0a101a 69%); box-shadow: inset 0 1px rgba(255,255,255,.13),inset 0 -60px 100px rgba(3,8,17,.35),0 30px 80px rgba(0,0,0,.32); }
.assembly-stage::before, .assembly-stage::after { position: absolute; z-index: 2; width: 21px; height: 21px; content: ""; border-color: rgba(150,201,243,.55); pointer-events: none; }
.assembly-stage::before { top: 15px; left: 15px; border-top: 1px solid; border-left: 1px solid; }
.assembly-stage::after { right: 15px; bottom: 15px; border-right: 1px solid; border-bottom: 1px solid; }
.assembly-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(119,158,196,.052) 1px,transparent 1px),linear-gradient(90deg,rgba(119,158,196,.052) 1px,transparent 1px); background-size: 27px 27px; mask-image: linear-gradient(transparent,black 20%,black 80%,transparent); }
.assembly-stage-top, .assembly-stage-bottom { position: absolute; z-index: 3; right: 27px; left: 27px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #a9bbcd; font: 700 .65rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .14em; }
.assembly-stage-top { top: 26px; }.assembly-stage-bottom { bottom: 26px; justify-content: flex-start; }.assembly-stage-bottom span:last-child { margin-left: auto; }
.assembly-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #86d2ff; box-shadow: 0 0 12px #86d2ff; }
.assembly-art { position: absolute; inset: 11% -2% auto; width: 104%; height: 78%; overflow: visible; filter: drop-shadow(0 20px 28px rgba(0,0,0,.32)); }
.assembly-layer { transition: opacity .35s linear; will-change: transform,opacity; }
.assembly-chapters { padding-top: 9vh; padding-bottom: 16vh; }
.assembly-chapter { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 76vh; border-left: 1px solid rgba(119,155,194,.27); padding: 55px 0 55px clamp(26px,3.5vw,48px); transition: opacity .3s ease,border-color .3s ease; }
.assembly-section.is-interactive .assembly-chapter { opacity: .55; }
.assembly-chapter.is-active { opacity: 1; border-color: #8bcfff; }
.assembly-section.is-interactive .assembly-chapter.is-active { opacity: 1; }
.assembly-chapter h3 { margin: 14px 0; font-size: clamp(2.1rem,3vw,3.55rem); line-height: 1.03; letter-spacing: -.05em; }
.assembly-chapter p { max-width: 400px; color: #bfcbda; line-height: 1.75; margin: 0; }
.assembly-index { color: #9dd5ff; font: 700 .72rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .18em; }
.assembly-final .button { margin: 26px 0 14px; min-height: 54px; }
.assembly-help-link { color: #b7d9fa; font-size: .88rem; text-decoration: underline; text-underline-offset: 5px; }
.assembly-section.no-scroll-animation .assembly-chapter { opacity: 1; }

/* Small hardware details across the real shopping and service pages. */
.custom-start-card::before,.service-path-card::before { position: absolute; inset: 0 auto auto 0; width: 48px; height: 48px; border-top: 1px solid rgba(151,204,242,.54); border-left: 1px solid rgba(151,204,242,.54); border-radius: 20px 0 0 0; content: ""; pointer-events: none; }
.custom-start-card { position: relative; overflow: hidden; }
.custom-process-grid li { border-top-color: #556783; }
.home-deal { background: linear-gradient(90deg,rgba(70,107,144,.075),transparent); }
.seo-hero, .builder-intro, .guided-intro { position: relative; }
.seo-hero::before, .builder-intro::before, .guided-intro::before { position: absolute; right: 1%; top: 8%; width: 42%; height: 84%; content: ""; pointer-events: none; z-index: -1; background: radial-gradient(ellipse,rgba(90,89,182,.16),transparent 65%); }
.builder-live, .builder-panel, .build-summary, .guided-request-form, .order-form { border-color: rgba(119,161,201,.38); }
.builder-step-tab.active, .builder-live-layer button.active { box-shadow: inset 0 -2px #96d5ff; }
.builder-live-viewport { background-image: radial-gradient(ellipse at 50% 50%,rgba(85,130,204,.15),transparent 60%),linear-gradient(rgba(122,164,203,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(122,164,203,.035) 1px,transparent 1px); background-size: auto,28px 28px,28px 28px; }
@media (max-width: 900px) {
  .custom-first-home .custom-first-hero { grid-template-columns: minmax(0,1fr) minmax(290px,.84fr); gap: 28px; }
  .custom-first-home .custom-proof-card { transform: none; }
  .assembly-track { gap: 24px; grid-template-columns: minmax(0,1fr) minmax(220px,.68fr); }
  .assembly-visual { top: 88px; }.assembly-chapter { padding-left: 24px; }
}
@media (max-width: 700px) {
  .site-header { min-height: 66px; }.site-nav.open { background: #111b2b; border: 1px solid #415471; box-shadow: 0 20px 50px #0009; }
  .custom-first-home .custom-first-hero { display: grid; grid-template-columns: 1fr; padding-block: 68px 75px; }
  .custom-first-home .hero-copy { padding-left: 18px; }
  .custom-first-home .custom-first-hero h1 { font-size: clamp(3.4rem,13.5vw,5rem); }
  .custom-first-home .custom-proof-card { max-width: 500px; justify-self: center; }
  .assembly-intro { display: block; padding-top: 70px; padding-bottom: 20px; }
  .assembly-intro h2 { font-size: clamp(3rem,12vw,5.5rem); }
  .assembly-intro > p:last-child { max-width: 500px; margin-top: 24px; }
  .assembly-track { display: block; width: 100%; }
  .assembly-visual { position: sticky; top: 66px; z-index: 4; height: auto; padding: 0 15px; background: linear-gradient(#0b101be8,#0b101b00); }
  .assembly-stage { width: min(100%,560px); max-height: none; aspect-ratio: 1.7; margin: 0 auto; border-radius: 13px; }
  .assembly-art { inset: 11% -1% auto; width: 102%; height: 81%; }
  .assembly-stage-top,.assembly-stage-bottom { right: 18px; left: 18px; font-size: .5rem; }
  .assembly-stage-top { top: 15px; }.assembly-stage-bottom { bottom: 14px; }
  .assembly-chapters { width: min(100% - 40px,560px); margin: 0 auto; padding: 0 0 80px; }
  .assembly-chapter { min-height: 43vh; padding-block: 38px; }
  .assembly-chapter h3 { font-size: clamp(1.9rem,8vw,3rem); }
  .assembly-chapter p { font-size: .94rem; }
}
@media (max-width: 420px) {
  .assembly-stage { aspect-ratio: 1.48; }
  .assembly-stage-bottom span:last-child { display: none; }
  .assembly-chapter { min-height: 40vh; }
  .button { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button,.product-card,.ready-card,.custom-start-card,.service-path-card,.assembly-chapter,.assembly-layer { transition: none !important; }
  .button:hover,.product-card:hover,.custom-start-card:hover,.service-path-card:hover,.ready-card:hover { transform: none !important; }
  .assembly-section.is-interactive .assembly-chapter { opacity: 1; }
}