/* =====================================================================
   GVS · SHELTER-STYLE SKIN, company colors
   Shelter's layout and motion in the company's black + metallic-silver
   brand: deep-space backdrop, chrome glows, glass panels, HUD corner
   frames and pixel/mono labels. Pairs with js/shelter.js (stars, rain,
   skeleton spine, appliance footage, services pager, section readout,
   reveals) and the original js/script.js (nav, location modal, request
   form, copyright year).
   ===================================================================== */

:root {
  --bg: #050506;
  --bg-2: #0c0d10;
  --ink: #eef0f4;
  --ink-hi: #ffffff;
  --muted: #9ba1ac;
  --dim: #6e737d;
  --steel: #b6bcc6;
  --chrome: #e4e7ec;
  --graphite: #474c57;
  --silver: #d4d9e1;
  --silver-2: #cfd6df;
  --shine: #f0f3f7;
  --frost: #dbe3ec;
  --slate: #7d8593;
  --gold: #fbbf24;
  /* brushed metal, same family as the invoice app's buttons */
  --metal: linear-gradient(135deg, #fbfcfd 0%, #c9ced6 28%, #f2f4f7 50%, #9ea5b0 74%, #e3e6eb 100%);
  --metal-ink: #0b0c0e;
  --glass: rgba(18, 19, 23, .52);
  --glass-2: rgba(26, 28, 33, .62);
  --line: rgba(206, 212, 222, .16);
  --line-2: rgba(206, 212, 222, .32);
  --radius: 18px;
  --radius-sm: 12px;
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1240px;
  --fa: Vazirmatn, "Segoe UI", Tahoma, system-ui, sans-serif;
  --px: Silkscreen, ui-monospace, Consolas, monospace;
  --mono: "Share Tech Mono", ui-monospace, Consolas, monospace;
  --header-h: 84px;
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--fa);
  font-size: 16px;
  line-height: 1.85;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.35; color: var(--ink-hi); }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: rgba(176, 183, 194, .45); color: #fff; }
:focus-visible { outline: 2px solid var(--shine); outline-offset: 3px; border-radius: 8px; }

svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon { width: 24px; height: 24px; }
.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 14px; height: 14px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.px { font-family: var(--px); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; line-height: 1.6; direction: ltr; unicode-bidi: isolate; }
.mono { font-family: var(--mono); font-style: normal; letter-spacing: .06em; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.grad {
  background: linear-gradient(180deg, #ffffff 0%, #e2e6ec 42%, #8f96a1 52%, #d9dde3 78%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(220, 226, 235, .18));
}
.hl { color: var(--shine); font-weight: 800; }

/* ---------- deep-space backdrop ---------- */
.space { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(140% 90% at 50% 0%, #121316 0%, var(--bg) 62%); }
.nebula { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.nebula--steel { width: 62vmax; height: 62vmax; top: -24vmax; inset-inline-start: -10vmax; background: radial-gradient(circle, rgba(64, 70, 82, .75), transparent 65%); animation: drift 26s ease-in-out infinite alternate; }
.nebula--slate { width: 46vmax; height: 46vmax; bottom: -18vmax; inset-inline-end: -12vmax; background: radial-gradient(circle, rgba(70, 78, 92, .45), transparent 65%); animation: drift 32s ease-in-out infinite alternate-reverse; }
.nebula--silver-2 { width: 40vmax; height: 40vmax; bottom: -22vmax; left: 30%; background: radial-gradient(circle, rgba(80, 92, 110, .45), transparent 65%); animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); } }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Fixed scene behind every section: skeleton spine + drifting appliance feeds.
   js/shelter.js turns them with the scroll and dims them while the hero's own fridge is on screen. */
.scene { position: absolute; inset: 0; opacity: var(--scene-o, 1); transition: opacity .9s ease; }
/* The crystal column stands in front of the two films, like Shelter's skeleton holding its game feeds */
.spine {
  position: absolute; top: 0; height: 100%; width: min(400px, 32vw); left: 25vw; transform: translateX(-50%); z-index: 2;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
  transition: left 1.4s cubic-bezier(.2, .7, .2, 1);
}
/* on the live-divisions section it glides between the big film card and the list */
.scene.is-focus .spine { left: 52vw; }
.bg-feed {
  position: absolute; z-index: 1; width: min(380px, 27vw); aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.bg-feed canvas { width: 100%; height: 100%; display: block; }
.bg-feed::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); }
.bg-feed span { position: absolute; left: 18px; bottom: 14px; z-index: 1; color: var(--muted); font-size: 9px; }
.bg-feed b { color: var(--shine); font-weight: 400; }
.bg-feed--a { left: 1vw; top: 13vh; opacity: .45; transform: perspective(900px) translateY(var(--py, 0)) rotateY(calc(28deg + var(--ry, 0deg))) rotateZ(-2deg); }
.bg-feed--b {
  left: 30vw; bottom: 9vh; opacity: .3; transform: perspective(900px) translateY(var(--py, 0)) rotateY(calc(-26deg + var(--ry, 0deg))) rotateZ(2deg);
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 45%); mask-image: linear-gradient(270deg, transparent, #000 45%);
}

/* ---------- HUD frame ---------- */
.hud { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.hud-corner { position: absolute; width: 22px; height: 22px; border: 0 solid var(--line-2); }
.hud > .hud-corner--tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.hud > .hud-corner--tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.hud > .hud-corner--br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.hud > .hud-corner--bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.hud-readout { position: absolute; left: 46px; bottom: 32px; display: flex; gap: 22px; color: var(--muted); font-size: 10px; opacity: .85; }
.hud-readout span:last-child { color: var(--silver); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 16px; border: 1px solid transparent;
  font: 800 15px/1 var(--fa); color: var(--ink-hi); cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { min-height: 60px; padding: 0 30px; font-size: 16px; border-radius: 18px; }
.btn-pill { border-radius: 999px; }
.btn-primary {
  background: var(--metal); color: var(--metal-ink);
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 10px 28px -10px rgba(220, 226, 235, .55), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .25);
}
.btn-primary:hover { box-shadow: 0 16px 36px -10px rgba(230, 236, 245, .75), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .25); }
.btn-glass { background: rgba(12, 13, 16, .55); border-color: var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-glass:hover { border-color: rgba(236, 240, 245, .55); box-shadow: 0 0 24px -6px rgba(214, 221, 230, .5); }
.btn svg { stroke-width: 3; }

/* ---------- glass & HUD frames ---------- */
.glass {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.frame {
  position: relative; background: linear-gradient(180deg, rgba(26, 27, 32, .55), rgba(12, 12, 15, .55));
  border: 1px solid var(--line-2); border-radius: 22px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.frame::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none; --c: rgba(206, 212, 222, .5); --s: 14px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--s) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--s) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--s) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--s) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--s) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--s) no-repeat;
}
.frame-label { position: absolute; top: 16px; left: 34px; color: var(--dim); font-size: 10px; }

.chip-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
  color: var(--shine); background: linear-gradient(140deg, rgba(214, 221, 230, .18), rgba(176, 183, 194, .22));
  box-shadow: inset 0 0 0 1px rgba(236, 240, 245, .35), 0 0 22px -8px rgba(214, 221, 230, .6);
}
.chip-icon svg { width: 26px; height: 26px; }
.chip-icon--sm { width: 40px; height: 40px; border-radius: 12px; }
.chip-icon--sm svg { width: 20px; height: 20px; }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; }
/* The scrolled backdrop lives on a pseudo-element: backdrop-filter on the header itself would
   trap the fixed full-screen mobile menu inside the header's box. */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(5, 5, 6, .86); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transition: opacity .3s ease; }
.site-header.is-scrolled::before { opacity: 1; }
.nav-inner { height: var(--header-h); padding-inline: calc(var(--gutter) + 6px); display: flex; align-items: center; justify-content: space-between; gap: 18px; }

.logo { display: inline-flex; align-items: center; gap: 12px; }
/* The logo art sits on solid black; "screen" drops the black so only the silver mark shows on the dark page */
.logo-mark, .intro-mark img, .location-modal-logo { mix-blend-mode: screen; }
.logo-mark { width: 50px; height: 50px; border-radius: 12px; object-fit: contain; }
.logo-words { display: flex; flex-direction: column; line-height: 1.15; }
.logo-name { font: 900 21px/1 var(--fa); letter-spacing: .02em; color: var(--ink-hi); direction: ltr; text-align: right; white-space: nowrap; }
.logo-name b { color: var(--silver); }
.logo-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

.main-nav > ul { display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(12, 13, 16, .5); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 15px; transition: color .2s, background .2s, box-shadow .2s; }
.main-nav > ul > li > a:hover { color: var(--ink-hi); background: rgba(206, 212, 222, .08); }
.main-nav > ul > li > a.is-active { color: var(--ink-hi); background: linear-gradient(100deg, rgba(214, 221, 230, .16), rgba(176, 183, 194, .28)); box-shadow: inset 0 0 0 1px rgba(236, 240, 245, .5), 0 0 22px -6px rgba(214, 221, 230, .5); }
.dropdown { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; min-width: 210px; padding: 8px; border-radius: 16px; background: rgba(15, 16, 19, .92); border: 1px solid var(--line-2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s ease; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--muted); font-size: 14px; }
.dropdown a:hover { color: var(--ink-hi); background: rgba(176, 183, 194, .16); }

.nav-actions { display: flex; align-items: center; gap: 10px; }
.btn-call { min-height: 54px; padding: 0 24px; border-radius: 999px; }
.nav-toggle { display: none; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(12, 13, 16, .6); color: var(--ink); cursor: pointer; place-items: center; }

/* ---------- SEC 01 intro ---------- */
.intro { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 22px; padding: calc(var(--header-h) + 20px) var(--gutter) 110px; text-align: center; }
.intro-mark { position: relative; width: clamp(140px, 22vw, 230px); aspect-ratio: 1; margin-bottom: auto; margin-top: 8vh; display: grid; place-items: center; }
.intro-mark img { width: 72%; filter: brightness(1.15) contrast(1.1); animation: float 6s ease-in-out infinite; }
.intro-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(206, 212, 222, .35); animation: spin 40s linear infinite; }
.intro-ring::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(236, 240, 245, .25); box-shadow: 0 0 60px -10px rgba(176, 183, 194, .6) inset; }
.intro-ring::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--shine); box-shadow: 0 0 14px var(--shine); }
.intro-line { color: var(--muted); font-size: 17px; }
.intro-line b { color: var(--ink-hi); font-weight: 800; }
.intro-scroll { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); }
.mouse { width: 26px; height: 40px; border-radius: 13px; border: 1.5px solid var(--line-2); display: flex; justify-content: center; padding-top: 7px; }
.mouse i { width: 3px; height: 8px; border-radius: 2px; background: var(--shine); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.intro-call { min-height: 54px; padding-inline: 10px 22px; gap: 12px; }
.play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--shine); color: var(--shine); box-shadow: 0 0 14px -2px rgba(236, 240, 245, .6); }
.play svg { width: 16px; height: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-12px); } }

/* ---------- SEC 02 hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; padding-block: calc(var(--header-h) + 30px) 120px; }
.tag { display: inline-flex; align-items: center; gap: 10px; color: var(--shine); margin-bottom: 18px; }
.tag i, .kicker i { width: 28px; height: 1px; background: currentColor; display: inline-block; box-shadow: 0 0 8px currentColor; }
.hero h1 { font-size: clamp(2rem, 4.4vw, 3.55rem); font-weight: 900; line-height: 1.3; letter-spacing: -.01em; }
.hero h1 .grad { display: block; margin-top: 6px; }
.lead { margin-top: 22px; color: var(--muted); font-size: 16.5px; line-height: 2; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-actions--center { justify-content: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chips li { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font-size: 14px; background: rgba(12, 13, 16, .45); }

.hero-visual { position: relative; height: min(620px, 74vh); overflow: hidden; }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent); }
/* The company's roof logo standing in the rain; "screen" drops its black background */
.roof-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.roof-stage picture { display: contents; }
.roof-logo { width: min(500px, 92%); aspect-ratio: 1; object-fit: contain; filter: brightness(1.05) contrast(1.1); transform: perspective(900px) rotateY(-10deg) rotateX(4deg); }
.object-glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(176, 183, 194, .35), transparent 62%); z-index: -1; }
.object-floor { position: absolute; bottom: 8%; width: 56%; height: 34px; border-radius: 50%; background: radial-gradient(ellipse, rgba(236, 240, 245, .35), transparent 70%); filter: blur(6px); }
.hero-hud { position: absolute; left: 0; bottom: 110px; display: grid; gap: 8px; color: var(--muted); font-size: 10.5px; }
.hero-hud b { color: var(--ink-hi); font-weight: 400; }

/* ---------- section heads ---------- */
section { position: relative; }
.steps, .services, .devices, .why, .plans, .testimonials, .brands, .faq, .long-content { padding-block: clamp(70px, 10vw, 130px) 0; }
.sec-head { max-width: 860px; margin-bottom: 44px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--shine); margin-bottom: 14px; }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--shine); box-shadow: 0 0 10px var(--shine); }
.kicker--line { color: var(--frost); gap: 12px; }
.kicker--line i { width: 44px; }
.kicker--line span { color: var(--dim); }
.kicker--line em { font-style: normal; color: var(--silver-2); }
section h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 900; letter-spacing: -.01em; }
.sec-lead { margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 2; }

/* ---------- SEC 03 steps ---------- */
.steps-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; align-items: start; }
.terminal { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: rgba(8, 8, 10, .78); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 50px -20px rgba(176, 183, 194, .5); }
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: rgba(18, 19, 23, .6); direction: ltr; }
.terminal-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.terminal-bar i:nth-child(2) { background: #febc2e; }
.terminal-bar i:nth-child(3) { background: #28c840; }
.terminal-bar span { margin-left: auto; color: var(--dim); font-size: 10px; }
.terminal-body { padding: 22px 22px 26px; min-height: 236px; display: grid; gap: 10px; font-size: 15px; color: var(--silver); }
.terminal-body p { min-height: 1.6em; white-space: pre-wrap; }
.terminal-body p.ok { color: var(--shine); font-weight: 700; }
.terminal-body p.typing::after { content: "▌"; color: var(--shine); animation: blink 1s steps(1) infinite; margin-inline-start: 2px; }
@keyframes blink { 50% { opacity: 0; } }
.steps-grid { display: grid; gap: 16px; }
.step { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; padding: 24px 24px 24px 70px; }
.step .chip-icon { grid-row: span 2; }
.step h3 { font-size: 18px; font-weight: 800; }
.step p { color: var(--muted); font-size: 15px; margin-top: 6px; }
.step-num { position: absolute; left: 22px; top: 22px; font-size: 22px; letter-spacing: .05em; color: rgba(206, 212, 222, .28); }

/* ---------- SEC 04 services ---------- */
.svc { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px 50px; align-items: start; }
.svc-side { order: -1; position: relative; z-index: 1; }
.svc-stage { display: grid; gap: 14px; }
.svc-pager { display: flex; align-items: center; gap: 14px; padding: 8px; direction: ltr; }
.svc-btn { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(8, 8, 10, .6); color: var(--ink); font: 700 13px var(--mono); cursor: pointer; transition: .2s; }
.svc-btn:hover { border-color: var(--shine); color: var(--shine); }
.svc-count { color: var(--dim); font-size: 12px; }
.svc-count b { color: var(--frost); font-weight: 400; }
.svc-code { margin-inline: auto; color: var(--ink-hi); font-size: 13px; letter-spacing: .32em; }
.services { isolation: isolate; }
.svc { position: relative; }
.svc-stage { perspective: 1400px; position: relative; z-index: 1; }
.svc-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 470px; padding: 34px 34px 30px;
  border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 0% 0%, rgba(150, 157, 168, .28), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(80, 92, 110, .3), transparent 60%), rgba(10, 10, 13, .78);
  border: 1px solid var(--line-2); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 0 60px -25px rgba(206, 212, 222, .55);
  transform: rotateY(-7deg) rotateX(2deg); transform-origin: right center; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.svc-card:hover { transform: rotateY(-3deg) rotateX(1deg); }
/* Moving "footage" of the selected appliance (drawn by js/shelter.js) */
.svc-footage { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.svc-card.has-footage .svc-icon { display: none; }
.svc-card.has-footage .svc-name { margin-top: auto; }
.svc-card > :where(:not(canvas):not(.hud-corner)) { position: relative; }
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(5, 5, 7, .92) 8%, rgba(5, 5, 7, .55) 42%, transparent 70%); }
.svc-live { display: inline-flex; align-items: center; gap: 8px; color: var(--shine); font-size: 10px; }
.svc-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: blink 1.2s steps(1) infinite; }
.svc-card .svc-tags { position: absolute; top: 33px; left: 34px; }

.svc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px); }
.svc-card .hud-corner { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(206, 212, 222, .55); }
.svc-card .hud-corner--tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.svc-card .hud-corner--bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.svc-tags { color: var(--muted); font-size: 10px; align-self: flex-end; }
.svc-icon { width: 110px; height: 110px; margin-top: 14px; color: var(--shine); stroke-width: 1.8; filter: drop-shadow(0 0 14px rgba(236, 240, 245, .65)); }
.svc-name { position: relative; font-size: clamp(30px, 4.6vw, 54px); letter-spacing: .08em; color: var(--ink-hi); line-height: 1.1; margin-top: auto; }
.svc-title { font-size: 20px; font-weight: 800; color: var(--ink-hi); }
.svc-desc { color: var(--muted); font-size: 15px; max-width: 46ch; }
.svc-more { display: inline-flex; align-items: center; gap: 6px; color: var(--shine); font-weight: 700; font-size: 14px; }
.svc-card:hover .svc-more { gap: 10px; }
.glitch.is-glitching { animation: glitch .45s steps(2) 1; }
.glitch.is-glitching::before, .glitch.is-glitching::after { content: attr(data-text); position: absolute; inset: 0; overflow: hidden; }
.glitch.is-glitching::before { color: var(--slate); transform: translate(3px, -2px); clip-path: inset(0 0 55% 0); mix-blend-mode: screen; }
.glitch.is-glitching::after { color: var(--frost); transform: translate(-3px, 2px); clip-path: inset(45% 0 0 0); mix-blend-mode: screen; }
@keyframes glitch { 0% { transform: translate(0); filter: blur(1px); } 25% { transform: translate(-4px, 1px) skewX(-8deg); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-1px, 0) skewX(4deg); } 100% { transform: none; filter: none; } }
.svc-card.is-switching .svc-icon, .svc-card.is-switching .svc-title, .svc-card.is-switching .svc-desc { animation: fadeUp .45s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } }

.svc-q { font-weight: 800; font-size: 19px; color: var(--ink-hi); margin-bottom: 12px; }
.svc-list { display: grid; }
.svc-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 4px; border-bottom: 1px dashed rgba(206, 212, 222, .1); color: var(--muted); transition: color .2s, padding .2s; }
.svc-list a span { font-size: 15px; }
.svc-list a em { color: var(--silver); font-size: 14px; white-space: nowrap; transition: color .2s; }
.svc-list a:hover, .svc-list a.is-active { color: var(--ink-hi); padding-inline-start: 10px; }
.svc-list a.is-active em { color: var(--shine); text-shadow: 0 0 10px rgba(236, 240, 245, .6); }
.svc-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.mini-card { display: flex; align-items: center; gap: 12px; padding: 14px; transition: border-color .2s; }
.mini-card:hover { border-color: rgba(236, 240, 245, .5); }
.mini-card b { display: block; font-size: 15px; color: var(--ink-hi); }
.mini-card small { color: var(--muted); font-size: 12.5px; }

/* ---------- SEC 05 why ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.why-item { padding: 50px 24px 26px; display: grid; align-content: start; gap: 14px; transition: border-color .25s, transform .25s; }
.why-item:hover { border-color: rgba(236, 240, 245, .5); transform: translateY(-4px); }
.why-item h3 { font-size: 17px; font-weight: 800; }
.why-item p { color: var(--muted); font-size: 14.5px; line-height: 1.95; }
.stat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.stat-row li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; color: var(--muted); font-size: 14.5px; }
.stat-row b { color: var(--ink-hi); font-weight: 800; }
.stat-row svg { width: 20px; height: 20px; }
.st-silver { color: var(--silver-2); }
.st-gold { color: var(--gold); fill: var(--gold); }

/* ---------- SEC 06 reviews ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.testimonial-card { margin: 0; padding: 30px; display: grid; gap: 18px; position: relative; overflow: hidden; }
.testimonial-card::before { content: ""; position: absolute; inset-inline-end: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(176, 183, 194, .35), transparent 70%); }
.quote-icon { width: 38px; height: 38px; color: var(--silver); fill: rgba(206, 212, 222, .15); stroke-width: 2; }
.testimonial-card blockquote { margin: 0; color: var(--ink); font-size: 16px; line-height: 2.05; }
.testimonial-card figcaption { display: flex; align-items: center; gap: 12px; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 900; color: #06131a; background: linear-gradient(135deg, var(--shine), var(--silver)); }
.testimonial-card figcaption b { display: block; color: var(--ink-hi); }
.testimonial-card figcaption small { color: var(--muted); }

/* ---------- SEC 07/08 brands + on-site ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.brand-card { padding: 54px 26px 24px; display: flex; flex-direction: column; gap: 12px; transition: border-color .25s, transform .25s; }
.brand-card:hover { border-color: rgba(236, 240, 245, .5); transform: translateY(-4px); }
.brand-icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: var(--silver); background: rgba(176, 183, 194, .14); box-shadow: inset 0 0 0 1px rgba(206, 212, 222, .3), 0 0 26px -8px rgba(176, 183, 194, .8); }
.brand-icon svg { width: 34px; height: 34px; stroke-width: 2.2; }
.brand-card h3 { font-size: 17px; font-weight: 800; }
.brand-card p { color: var(--muted); font-size: 14.5px; line-height: 1.95; flex: 1; }
.brand-meta { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12.5px; }

/* ---------- SEC 09 CTA ---------- */
.cta { margin-top: clamp(70px, 10vw, 130px); padding: clamp(60px, 9vw, 120px) 20px; text-align: center; border-radius: 30px; background: radial-gradient(70% 90% at 70% 0%, rgba(64, 70, 82, .45), transparent 70%), radial-gradient(60% 80% at 10% 100%, rgba(70, 78, 92, .22), transparent 70%); }
.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta > :not(.stage) { position: relative; z-index: 1; }
/* Stage: sweeping light beams over a perspective grid floor */
.stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.beam { position: absolute; top: -20%; width: 34%; height: 140%; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(235, 240, 248, .22), rgba(235, 240, 248, .04) 55%, transparent 80%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); filter: blur(6px); mix-blend-mode: screen; }
.beam--1 { left: 4%; animation: sweep 9s ease-in-out infinite alternate; }
.beam--2 { left: 33%; animation: sweep 11s ease-in-out infinite alternate-reverse; opacity: .7; }
.beam--3 { right: 4%; animation: sweep 8s ease-in-out infinite alternate; animation-delay: -3s; }
@keyframes sweep { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.floor { position: absolute; left: -25%; right: -25%; bottom: -10%; height: 62%; transform: perspective(500px) rotateX(64deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(225, 231, 240, .4) 1px, transparent 1px), linear-gradient(90deg, rgba(225, 231, 240, .4) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 85%); mask-image: linear-gradient(0deg, #000 10%, transparent 85%); animation: floor 6s linear infinite; }
@keyframes floor { to { background-position: 0 56px; } }
.cta h2 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
.cta p { color: var(--muted); margin-top: 14px; font-size: 16.5px; }
.cta .btn { font-family: var(--fa); direction: ltr; }

/* ---------- SEC 10 briefing ---------- */
.long-content h2 { margin-bottom: 26px; }
.briefing { padding: 52px clamp(20px, 4vw, 44px) 30px; overflow: hidden; background-image: linear-gradient(rgba(206, 212, 222, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(206, 212, 222, .035) 1px, transparent 1px); background-size: 34px 34px; }
.briefing-body { max-height: 360px; overflow: hidden; transition: max-height .6s ease; }
.briefing.is-open .briefing-body { max-height: 9000px; }
.briefing-body > p { color: var(--muted); line-height: 2.05; }
.briefing-fade { position: absolute; inset-inline: 1px; bottom: 1px; height: 190px; border-radius: 0 0 22px 22px; background: linear-gradient(transparent, rgba(9, 9, 11, .96) 70%); pointer-events: none; transition: opacity .4s; }
.briefing.is-open .briefing-fade { opacity: 0; }
.briefing-toggle { position: relative; z-index: 2; display: flex; margin: 10px auto 0; }
.briefing-toggle svg { transition: transform .3s; }
.briefing.is-open .briefing-toggle svg { transform: rotate(180deg); }
.content-block { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding-block: 26px; border-top: 1px solid var(--line); margin-top: 26px; }
.cb-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--shine); background: rgba(214, 221, 230, .1); box-shadow: inset 0 0 0 1px rgba(236, 240, 245, .3); }
.content-block h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.content-block h3::before { content: ""; width: 8px; height: 8px; background: var(--silver-2); border-radius: 2px; box-shadow: 0 0 8px var(--silver-2); }
.content-block p { color: var(--muted); line-height: 2.05; }
.content-block p + p { margin-top: 10px; }
.phone-box { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.phone-box a { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(8, 8, 10, .55); transition: border-color .2s; }
.phone-box a:hover { border-color: var(--shine); }
.phone-box span { color: var(--muted); font-size: 13px; }
.phone-box b { font-family: var(--mono); font-weight: 400; font-size: 17px; color: var(--ink-hi); letter-spacing: .06em; direction: ltr; }

/* ---------- SEC 11 FAQ ---------- */
.faq h2 { margin-bottom: 26px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { border-radius: 18px; border: 1px solid var(--line); background: rgba(15, 16, 19, .6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .25s, box-shadow .25s; }
.faq-item[open] { border-color: rgba(236, 240, 245, .4); box-shadow: inset -3px 0 0 var(--silver-2), 0 0 30px -14px rgba(214, 221, 230, .6); }
.faq-item summary { display: flex; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num { color: var(--silver-2); font-size: 15px; }
.faq-q { flex: 1; font-weight: 800; font-size: 16.5px; color: var(--ink-hi); }
.faq-x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--shine); border: 1px solid rgba(236, 240, 245, .4); background: rgba(214, 221, 230, .08); transition: transform .3s; }
.faq-x svg { width: 18px; height: 18px; stroke-width: 3; }
.faq-item[open] .faq-x { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 22px 74px; color: var(--muted); line-height: 2.05; padding-inline-start: 62px; }

/* ---------- SEC 12 request form ---------- */
.request-section { padding-block: clamp(70px, 10vw, 130px); }
.request-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); padding: 60px clamp(22px, 4vw, 54px) 44px; }
.request-intro h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.request-form { display: grid; gap: 16px; align-content: start; }
.request-form label { display: grid; gap: 8px; }
.request-form label span { font-size: 14px; font-weight: 700; color: var(--silver); }
.request-form label span .opt { font-weight: 500; color: var(--dim); font-size: 12.5px; }
.request-form input, .request-form textarea {
  width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(8, 8, 10, .7);
  color: var(--ink-hi); font: 500 16px var(--fa); transition: border-color .2s, box-shadow .2s; resize: vertical;
}
.request-form input[dir="ltr"] { text-align: right; font-family: var(--mono); letter-spacing: .06em; }
.request-form input::placeholder, .request-form textarea::placeholder { color: var(--dim); }
.request-form input:focus, .request-form textarea:focus { outline: none; border-color: var(--shine); box-shadow: 0 0 0 4px rgba(214, 221, 230, .15), 0 0 26px -8px rgba(214, 221, 230, .6); }
.request-form .btn { justify-self: start; }
.form-feedback { min-height: 1.6em; font-size: 14.5px; font-weight: 700; }
.form-feedback.is-success { color: var(--shine); }
.form-feedback.is-error { color: #fb7185; }

/* ---------- footer ---------- */
.site-footer { position: relative; padding-top: 70px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(5, 5, 6, .4), rgba(5, 5, 6, .95) 30%); }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.2fr; gap: 34px; }
.footer-col h4 { font-size: 16px; font-weight: 800; margin-bottom: 16px; }
.footer-col p { color: var(--muted); font-size: 14px; line-height: 2; }
.footer-about .logo { margin-bottom: 16px; }
.footer-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--shine); font-weight: 700; font-size: 14.5px; }
.footer-note { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-2); font-size: 13px !important; }
.contact-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-top: 10px; border-radius: 16px; transition: border-color .2s; }
.contact-card:hover { border-color: rgba(236, 240, 245, .5); }
.contact-card b { display: block; color: var(--ink-hi); font-size: 15px; }
.contact-card small { color: var(--muted); font-size: 13px; }
.contact-card small[dir="ltr"] { font-family: var(--mono); font-size: 14px; letter-spacing: .05em; }
.contact-card svg { color: var(--silver); width: 22px; height: 22px; }
.footer-links { display: grid; gap: 8px; }
.footer-links a { color: var(--muted); font-size: 14px; transition: color .2s; }
.footer-links a:hover { color: var(--shine); }
.footer-map-embed { margin-top: 16px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); height: 170px; background: rgba(15, 16, 19, .6); filter: brightness(.88) saturate(.9); }
.footer-map-embed iframe { width: 100%; height: 100%; border: 0; }

.wordmark { display: flex; justify-content: center; align-items: center; gap: .06em; margin: 60px auto 0; padding-inline: var(--gutter); font-size: clamp(34px, 9.2vw, 150px); letter-spacing: 0; line-height: 1; user-select: none; }
.wordmark span { color: transparent; -webkit-text-stroke: 1.5px rgba(190, 196, 206, .35); }
.wordmark .gap { width: .35em; }
.wordmark .on { -webkit-text-stroke: 1.5px rgba(206, 212, 222, .55); background: linear-gradient(180deg, rgba(176, 183, 194, .9), rgba(46, 50, 58, .35)); -webkit-background-clip: text; background-clip: text; }
.wordmark .on--silver-2 { background: radial-gradient(circle at 50% 45%, rgba(236, 240, 245, .95), rgba(176, 183, 194, .55) 70%); -webkit-background-clip: text; background-clip: text; }

.footer-bottom { margin-top: 40px; padding-block: 24px 80px; border-top: 1px solid var(--line); }
.legal-notice { color: var(--dim); font-size: 12.5px; line-height: 2; }
.footer-bottom-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 13.5px; }
.footer-legal-links { display: flex; gap: 10px; }
.footer-legal-links a:hover { color: var(--shine); }

/* ---------- floating buttons ---------- */
.float-call, .float-map { position: fixed; z-index: 45; display: grid; place-items: center; border-radius: 50%; color: #fff; transition: transform .2s; }
.float-call { right: 26px; bottom: 26px; width: 66px; height: 66px; background: var(--metal); color: var(--metal-ink); box-shadow: 0 10px 30px -8px rgba(220, 226, 235, .6), 0 0 0 8px rgba(206, 212, 222, .1), inset 0 1px 0 #fff; }
.float-call svg { stroke-width: 3; }
.float-call::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(206, 212, 222, .6); animation: ping 2.4s ease-out infinite; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.float-map { right: 34px; bottom: 106px; width: 50px; height: 50px; background: rgba(12, 13, 16, .75); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--shine); }
.float-call:hover, .float-map:hover { transform: scale(1.06); }

/* ---------- location modal ---------- */
.location-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(3, 3, 4, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: .25s; }
.location-overlay.is-open { opacity: 1; visibility: visible; }
.location-modal { width: min(440px, 100%); padding: 54px 26px 26px; text-align: center; background: rgba(15, 16, 19, .92); transform: translateY(14px) scale(.98); transition: transform .25s; }
.location-overlay.is-open .location-modal { transform: none; }
.location-modal-close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.location-modal-logo { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 14px; }
.location-modal h3 { font-size: 19px; margin-bottom: 18px; }
.location-app-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.location-app-btn { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(8, 8, 10, .6); font-weight: 700; font-size: 14px; transition: border-color .2s; }
.location-app-btn:hover { border-color: var(--shine); }
.location-app-icon { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; }
.location-modal-address { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 13.5px; }

/* ---------- hero full text (collapsed behind "show full text") ---------- */
.hero-more { margin-top: 26px; padding: 46px 26px 22px; overflow: hidden; }
.hero-more-body { max-height: 210px; overflow: hidden; transition: max-height .7s ease; }
.hero-more.is-open .hero-more-body { max-height: 30000px; }
.hero-more-fade { position: absolute; inset-inline: 1px; bottom: 1px; height: 150px; border-radius: 0 0 22px 22px; background: linear-gradient(transparent, rgba(8, 8, 10, .97) 72%); pointer-events: none; transition: opacity .4s; }
.hero-more.is-open .hero-more-fade { opacity: 0; }
.hero-more-toggle { position: relative; z-index: 2; display: flex; margin: 12px auto 0; }
.hero-more-toggle svg { transition: transform .3s; }
.hero-more.is-open .hero-more-toggle svg { transform: rotate(180deg); }
.hero-more-body h3 { font-size: 19px; font-weight: 900; margin: 26px 0 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.hero-more-body h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.hero-more-body h4 { font-size: 16px; font-weight: 800; margin: 16px 0 6px; color: var(--ink-hi); }
.hero-more-body p { color: var(--muted); font-size: 15px; line-height: 2; margin-top: 6px; }
.more-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.more-list a { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(10, 10, 13, .55); font-size: 14px; color: var(--ink); transition: border-color .2s; }
.more-list a:hover { border-color: rgba(255, 255, 255, .6); }
.more-quote { margin: 12px 0 0; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(18, 19, 23, .55); color: var(--ink); line-height: 2; font-size: 15px; }
.more-quote cite { display: block; margin-top: 6px; font-style: normal; font-weight: 800; color: var(--shine); font-size: 13.5px; }
.more-post { margin-top: 12px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(14, 15, 18, .5); }
.more-post h4 { margin-top: 0; }
.more-post small { display: block; margin-top: 6px; color: var(--dim); font-size: 12.5px; }
.more-note { margin-top: 12px !important; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line-2); font-size: 13.5px !important; }
/* while the text is open, the logo with the falling tools stays in view as you read */
.hero.is-expanded { align-items: start; }
.hero.is-expanded .hero-visual { position: sticky; top: calc(var(--header-h) + 10px); }

/* ---------- SEC 03 live divisions (reuses the services pager) ---------- */
.sound-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.sound-chip svg { width: 16px; height: 16px; color: var(--shine); }

/* ---------- SEC 04 how to request: phone screen recording ---------- */
.phone-demo { margin: 0; display: grid; justify-items: center; gap: 14px; }
.phone {
  position: relative; width: min(300px, 78vw); aspect-ratio: 9 / 19.5; border-radius: 42px; padding: 12px; overflow: hidden;
  background: linear-gradient(145deg, #2a2c31, #0b0c0f 45%, #1d1f23); box-shadow: inset 0 0 0 1.5px rgba(230, 236, 245, .35), 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 70px -30px rgba(220, 228, 240, .45);
  transform: perspective(1200px) rotateY(10deg) rotateX(2deg);
}
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 32px; background: #000; display: block; }
.phone-notch { position: absolute; top: 18px; left: 50%; width: 92px; height: 24px; margin-left: -46px; border-radius: 14px; background: #000; z-index: 2; }
.phone-demo figcaption { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.phone-demo figcaption i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: blink 1.2s steps(1) infinite; }
.steps-cta { justify-self: start; margin-top: 4px; }

/* ---------- SEC 05 device tiles: each a live clip ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tile {
  position: relative; display: block; aspect-ratio: 4 / 3.4; border-radius: 20px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line-2); background: #0a0a0c; transition: transform .35s ease, border-color .3s ease, box-shadow .3s ease;
}
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(.9) contrast(1.1) brightness(.72); transition: filter .5s ease, transform 1.2s ease; }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4, 4, 6, .95) 6%, rgba(4, 4, 6, .35) 55%, rgba(4, 4, 6, .1)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); }
.tile-code { position: absolute; top: 14px; left: 16px; color: var(--muted); font-size: 10px; }
.tile-code::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 8px; border-radius: 50%; background: var(--dim); vertical-align: middle; }
.tile-body { position: absolute; inset: auto 16px 16px 16px; display: grid; gap: 4px; }
.tile-body b { color: var(--ink-hi); font-size: 15.5px; font-weight: 800; }
.tile-body small { color: var(--muted); font-size: 12.5px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile:hover, .tile.is-live { transform: translateY(-4px); border-color: rgba(236, 240, 245, .55); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8), 0 0 40px -18px rgba(220, 228, 240, .6); }
.tile:hover video, .tile.is-live video { filter: grayscale(.15) contrast(1.05) brightness(.95); transform: scale(1.05); }
.tile.is-live .tile-code { color: var(--shine); }
.tile.is-live .tile-code::before { background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; }
.svc-cta--wide { max-width: 640px; margin: 22px auto 0; }

/* ---------- SEC 07 plans ---------- */
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .kicker { justify-content: center; }
.plan-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; border-radius: 22px; margin-bottom: 18px; }
.plan-tab { position: relative; min-height: 58px; border: 0; border-radius: 16px; background: transparent; color: var(--muted); font: 800 16px var(--fa); cursor: pointer; transition: color .2s, background .25s, box-shadow .25s; }
.plan-tab:hover { color: var(--ink-hi); }
.plan-tab.is-active { color: var(--metal-ink); background: var(--metal); box-shadow: 0 10px 28px -12px rgba(220, 226, 235, .6), inset 0 1px 0 #fff; }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--metal-ink); background: #fff; box-shadow: 0 4px 14px -4px rgba(255, 255, 255, .6); }
.plan-card { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px 40px; padding: 58px clamp(22px, 4vw, 50px) 30px; overflow: hidden; }
.plan-card::after { content: ""; position: absolute; width: 60%; aspect-ratio: 1; left: -15%; top: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(220, 228, 240, .12), transparent 65%); pointer-events: none; }
.plan-code { color: var(--muted); margin-bottom: 10px; text-align: right; }
.plan-name { font-size: clamp(26px, 3.6vw, 40px); font-weight: 900; }
.plan-desc { color: var(--muted); margin-top: 10px; line-height: 2; }
.plan-feats { display: grid; gap: 10px; margin-top: 18px; }
.plan-feats li { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.plan-feats li::before { content: ""; width: 18px; height: 18px; flex-shrink: 0; border-radius: 6px; background: var(--metal); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); -webkit-mask: linear-gradient(#000, #000); }
.plan-price { display: grid; align-content: center; gap: 8px; text-align: start; }
.plan-price-k { color: var(--muted); font-size: 14px; }
.plan-price-v { font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; line-height: 1.3; }
.plan-price-s { color: var(--dim); font-size: 13.5px; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.plan-includes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.plan-includes span { display: inline-flex; align-items: center; gap: 6px; }
.plan-includes span:first-child { color: var(--ink-hi); font-weight: 800; }
.plan-includes svg { width: 16px; height: 16px; color: var(--shine); stroke-width: 3.2; }
.plan-card.is-switching .plan-main, .plan-card.is-switching .plan-label { animation: fadeUp .45s ease both; }
.plan-minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.plan-mini { display: grid; gap: 4px; padding: 16px; text-align: start; border-radius: 18px; color: var(--ink); font: inherit; cursor: pointer; transition: border-color .25s, transform .25s; }
.plan-mini b { font-size: 15px; color: var(--ink-hi); }
.plan-mini small { color: var(--muted); font-size: 12.5px; }
.plan-mini i { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, .85), rgba(160, 168, 180, .5)) 0 0 / var(--w) 100% no-repeat, rgba(206, 212, 222, .12); }
.plan-mini:hover { transform: translateY(-3px); }
.plan-mini.is-active { border-color: rgba(236, 240, 245, .6); box-shadow: 0 0 30px -14px rgba(220, 228, 240, .7); }

/* ---------- SEC 12 policy ---------- */
.policy { padding-block: clamp(70px, 10vw, 130px) 0; }
.policy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.policy-card { padding: 54px 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.policy-card h3 { font-size: 17px; font-weight: 800; }
.policy-card p { color: var(--muted); font-size: 14px; line-height: 2; flex: 1; }
.policy-link { color: var(--shine); font-weight: 700; font-size: 14px; }
.policy-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- official brand licenses ---------- */
.license-strip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px 30px; padding: 50px clamp(18px, 3vw, 34px) 26px; margin-bottom: 18px; }
.license-text h3 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 900; }
.license-text p { color: var(--muted); margin-top: 8px; line-height: 2; }
.license-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.license-badges li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-weight: 800; font-size: 15px; color: var(--metal-ink); background: var(--metal); box-shadow: inset 0 1px 0 #fff, 0 8px 22px -12px rgba(230, 236, 245, .6); }
.license-badges li svg { width: 18px; height: 18px; stroke-width: 2.4; }
.license-badges li.more { color: var(--muted); background: transparent; border: 1px dashed var(--line-2); box-shadow: none; font-weight: 600; }
.lic-tag { position: absolute; top: 14px; right: 26px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: var(--metal-ink); background: var(--metal); }
.brand-chips li.lic { color: var(--metal-ink); background: var(--metal); border-color: transparent; font-weight: 800; }
.brand-chips li.lic::after { content: " ✓"; }
@media (max-width: 900px) { .license-strip { grid-template-columns: 1fr; } .license-badges { justify-content: flex-start; } }

/* ---------- SEC 09B brand repair guides ---------- */
.guides { padding-block: clamp(70px, 10vw, 130px) 0; }
.guide-box { padding: 54px clamp(18px, 3vw, 34px) 26px; }
.guide-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin-bottom: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(8, 8, 10, .5); }
.guide-tab { flex: 1 1 auto; min-height: 46px; padding: 0 16px; border: 0; border-radius: 13px; background: transparent; color: var(--muted); font: 800 15px var(--fa); cursor: pointer; transition: color .2s, background .25s; }
.guide-tab:hover { color: var(--ink-hi); }
.guide-tab.is-active { color: var(--metal-ink); background: var(--metal); box-shadow: inset 0 1px 0 #fff; }
.guide-intro, .guide-generic { color: var(--muted); line-height: 2; margin-bottom: 12px; }
.guide-item { border-radius: 16px; border: 1px solid var(--line); background: rgba(14, 15, 18, .55); margin-top: 10px; transition: border-color .25s; }
.guide-item[open] { border-color: rgba(236, 240, 245, .4); }
.guide-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 800; color: var(--ink-hi); }
.guide-item summary::-webkit-details-marker { display: none; }
.guide-item[open] .faq-x { transform: rotate(45deg); }
.guide-item > p { padding: 0 18px; color: var(--muted); line-height: 2; font-size: 15px; }
.guide-item .fault-head { margin-top: 10px; color: var(--ink); font-weight: 700; }
.fault-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; padding: 8px 18px 18px; }
.fault-list li { position: relative; padding-inline-start: 18px; color: var(--muted); font-size: 14.5px; line-height: 1.9; }
.fault-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .75em; width: 7px; height: 7px; border-radius: 2px; background: var(--silver); }
.guide-site { display: inline-block; margin-top: 16px; color: var(--shine); font-weight: 700; font-size: 14.5px; }
.guide-site:hover { text-decoration: underline; text-underline-offset: 5px; }

/* footer: brand sites, listings, extra phone lines */
.footer-sub { font-size: 14px !important; margin: 18px 0 10px !important; color: var(--ink); }
.footer-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.footer-chips a { display: inline-block; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); transition: color .2s, border-color .2s; }
.footer-chips a:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
.contact-card--sm { padding: 10px 14px; }
.contact-card--sm b { font-size: 13.5px; }

/* ---------- brand board (every covered brand, by region) ---------- */
.brand-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.board-title { grid-column: 1 / -1; font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 900; margin-top: 20px; }
.board-col { padding: 54px 24px 24px; }
.board-col h3 { font-size: 17px; font-weight: 800; }
.board-col p { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.brand-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.brand-chips li { padding: 5px 12px; border-radius: 999px; font-size: 13.5px; color: var(--ink); border: 1px solid var(--line-2); background: rgba(10, 10, 13, .55); transition: border-color .2s, color .2s; }
.brand-chips li:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }

/* ---------- custom crosshair cursor (fine pointers only) ---------- */
.cursor { display: none; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor label { cursor: none; }
.has-cursor input, .has-cursor textarea { cursor: text; }
.has-cursor .cursor { display: block; position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.cursor-h, .cursor-v { position: absolute; left: 0; top: 0; background: rgba(240, 244, 250, .9); box-shadow: 0 0 6px rgba(240, 244, 250, .6); }
.cursor-h { width: 22px; height: 1px; transform: translate3d(calc(var(--x) - 11px), var(--y), 0); }
.cursor-v { width: 1px; height: 22px; transform: translate3d(var(--x), calc(var(--y) - 11px), 0); }
.cursor-ring {
  position: absolute; left: 0; top: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1px solid rgba(230, 236, 245, .55); transform: translate3d(var(--rx), var(--ry), 0) scale(var(--rs, 1)); transition: border-color .2s, background .2s;
}
.cursor-ring::before, .cursor-ring::after { content: ""; position: absolute; background: rgba(230, 236, 245, .7); }
.cursor-ring::before { left: 50%; top: -5px; width: 1px; height: 5px; box-shadow: 0 43px 0 rgba(230, 236, 245, .7); }
.cursor-ring::after { top: 50%; left: -5px; height: 1px; width: 5px; box-shadow: 43px 0 0 rgba(230, 236, 245, .7); }
.cursor.is-hover .cursor-ring { --rs: 1.6; border-color: #fff; background: rgba(255, 255, 255, .06); }
.cursor.is-down .cursor-ring { --rs: .7; }
.cursor-xy { position: absolute; left: 0; top: 0; font-size: 9px; color: var(--muted); white-space: nowrap; transform: translate3d(calc(var(--rx) + 26px), calc(var(--ry) + 18px), 0); }
.cursor.is-hidden { opacity: 0; }

/* ---------- reveal on scroll (only once JS confirms it can show them) ---------- */
.js-anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js-anim .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .main-nav > ul > li > a { padding: 0 13px; }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .nav-toggle { display: grid; }
  .btn-call span { display: none; }
  .btn-call { width: 50px; min-height: 50px; padding: 0; }
  .main-nav {
    position: fixed; inset: 0; z-index: -1; padding: calc(var(--header-h) + 20px) var(--gutter) 40px;
    background: radial-gradient(120% 80% at 85% 0%, rgba(46, 50, 58, .55), transparent 62%), rgba(5, 5, 6, .98);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; overflow-y: auto;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; background: none; backdrop-filter: none; }
  .main-nav > ul > li > a { display: flex; height: 58px; font-size: 18px; padding: 0 20px; border-radius: 16px; border: 1px solid var(--line); background: rgba(15, 16, 19, .6); color: var(--ink); justify-content: space-between; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; display: none; margin-top: 8px; background: rgba(15, 16, 19, .5); box-shadow: none; }
  .has-dropdown.is-open .dropdown { display: block; }
  .has-dropdown:hover .dropdown { display: none; }
  .has-dropdown.is-open:hover .dropdown { display: block; }

  .hero { grid-template-columns: 1fr; padding-top: calc(var(--header-h) + 24px); gap: 0; }
  .hero-visual { order: -1; height: 300px; margin-inline: calc(-1 * var(--gutter)); }
  .neon-fridge { width: 170px; }
  .neon-wrench { width: 86px; left: 26%; }
  .hero-hud { position: static; margin-top: 34px; }
  .steps-layout, .svc { grid-template-columns: 1fr; }
  .svc-side { order: 0; }
  .svc-card { min-height: 360px; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .request-panel { grid-template-columns: 1fr; }
  .hud-readout { display: none; }
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-name { font-size: 15px; letter-spacing: 0; }
  .logo-sub { font-size: 11px; }
  .intro { padding-bottom: 90px; }
  .intro-line { font-size: 15px; }
  .btn-lg { min-height: 56px; padding: 0 22px; font-size: 15px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .lead { font-size: 15.5px; }
  .why-grid, .brand-grid { grid-template-columns: 1fr; }
  .step { padding: 22px 20px 20px 20px; grid-template-columns: 1fr; row-gap: 12px; }
  .step .chip-icon { grid-row: auto; }
  .step-num { top: 18px; left: 18px; }
  .svc-card { padding: 28px 22px 24px; min-height: 330px; }
  .svc-icon { width: 84px; height: 84px; }
  .svc-cta { grid-template-columns: 1fr; }
  .faq-item summary { padding: 16px; gap: 12px; }
  .faq-q { font-size: 15px; }
  .faq-item p { padding: 0 16px 18px; }
  .content-block { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .float-call { right: 18px; bottom: 18px; width: 58px; height: 58px; }
  .float-map { right: 22px; bottom: 88px; width: 46px; height: 46px; }
  .hud > .hud-corner { width: 16px; height: 16px; }
  .request-form .btn { justify-self: stretch; }
}

@media (max-width: 900px) {
  .svc-card, .svc-card:hover { transform: none; min-height: 420px; }
  .svc-card .svc-tags { display: none; }
  /* phones: one feed, a slimmer spine pushed to the edge so text stays readable */
  .spine { left: 16vw; width: 230px; opacity: .55; }
  .scene.is-focus .spine { left: 16vw; }
  .bg-feed--a { width: 58vw; left: -12vw; top: 18vh; opacity: .22; }
  .bg-feed--b { display: none; }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .phone { transform: none; }
  .steps-cta { justify-self: stretch; }
  .plan-tabs { grid-template-columns: repeat(2, 1fr); }
  .plan-card { grid-template-columns: 1fr; }
  .plan-minis, .policy-grid, .brand-board { grid-template-columns: repeat(2, 1fr); }
  .roof-logo { width: min(330px, 86%); }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .policy-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .tile-grid { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 16 / 10; }
  .plan-tab { font-size: 14px; min-height: 52px; }
  .plan-minis, .policy-grid, .brand-board { grid-template-columns: 1fr; }
  .fault-list { grid-template-columns: 1fr; }
  .guide-tab { font-size: 14px; padding: 0 12px; }
  .plan-actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js-anim .reveal { opacity: 1; transform: none; }
}