/* ===========================================================
   APEX MOBILE & COMPUTER REPAIRS — design system v4
   Signature: "THE BENCH" — the site reads like a technician's
   diagnostic readout. Red/green aren't decoration here — they're
   the same PASS/FAIL, OPEN/CLOSED, IN-STOCK/OUT signal language
   used on an actual bench test, applied to the whole site.
   =========================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

   :root {
     /* palette — red / green / black / white, structural grays only for text hierarchy */
     --ink:        #0A0A0A;   /* true black — dark surfaces + primary text */
     --ink-soft:   #161616;
     --paper:      #FFFFFF;   /* true white — light surfaces */
     --paper-dim:  #EFEFEA;
     --amber:      #E3342F;   /* repointed to signal-red: the one accent color, used for CTAs + selected states */
     --amber-dark: #B31E1A;
     --slate:      #4B4B4B;
     --slate-light:#8A8A85;
     --green:      #16B054;   /* PASS / open / in-stock */
     --red:        #E3342F;   /* FAIL / closed / urgent — same red as accent, one red across the site */
     --line:       #E1E1DC;
     --blue:       #0A0A0A;   /* repointed to black — no blue in this palette */
     --blue-light: #EFEFEA;
   
     --display: 'Archivo Black', sans-serif;
     --body: 'IBM Plex Sans', sans-serif;
     --mono: 'IBM Plex Mono', monospace;
   
     --radius: 4px;   /* sharper corners — bench equipment, not consumer app */
   }
   
   * { box-sizing: border-box; margin: 0; padding: 0; }
   
   html { scroll-behavior: smooth; }
   
   body {
     font-family: var(--body);
     color: var(--ink);
     background-color: var(--paper-dim);
     background-image:
       linear-gradient(rgba(10,10,10,0.045) 1px, transparent 1px),
       linear-gradient(90deg, rgba(10,10,10,0.045) 1px, transparent 1px);
     background-size: 40px 40px;
     line-height: 1.5;
     -webkit-font-smoothing: antialiased;
   }
   
   img { max-width: 100%; display: block; }
   a { color: inherit; text-decoration: none; }
   button { font-family: inherit; cursor: pointer; border: none; }
   
   :focus-visible {
     outline: 3px solid var(--amber-dark);
     outline-offset: 2px;
   }
   
   .eyebrow {
     font-family: var(--mono);
     font-size: 0.72rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--green);
   }
   .eyebrow::before { content: "[ "; }
   .eyebrow::after { content: " ]"; }
   
   h1, h2, h3 {
     font-family: var(--display);
     font-weight: 600;
     letter-spacing: -0.01em;
     color: var(--ink);
   }
   
   .container {
     max-width: 1120px;
     margin: 0 auto;
     padding: 0 24px;
   }
   
   /* ---------- top bar ---------- */
   .topbar {
     background: var(--ink);
     color: var(--paper);
     padding: 12px 0;
     font-family: var(--mono);
     font-size: 0.78rem;
   }
   .topbar .container {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 8px;
   }
   .topbar a { color: var(--amber); }
   
   /* ---------- nav ---------- */
   .nav {
     background: var(--paper);
     border-bottom: 1px solid var(--line);
     padding: 18px 0;
     position: sticky;
     top: 0;
     z-index: 50;
     backdrop-filter: blur(6px);
   }
   .nav .container {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   .logo {
     font-family: var(--display);
     font-weight: 700;
     font-size: 1.15rem;
     display: flex;
     align-items: center;
     gap: 8px;
   }
   .logo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
   .logo-mark { height: 42px; width: auto; display: block; }
   
   /* icon system — sharp, single-stroke, currentColor. no rounded AI-pack look. */
   .icon { display: block; stroke: currentColor; fill: none; }
   
   .nav-mark {
     width: 34px; height: 34px;
     border: 1.5px solid var(--ink);
     display: flex; align-items: center; justify-content: center;
     color: var(--red);
     flex-shrink: 0;
   }
   .logo-text {
     display: flex;
     flex-direction: column;
     line-height: 1;
     font-family: var(--display);
     font-size: 1.15rem;
   }
   .logo-text small {
     font-family: var(--mono);
     font-size: 0.5rem;
     letter-spacing: 0.09em;
     text-transform: uppercase;
     color: var(--slate-light);
     font-weight: 500;
     margin-top: 4px;
   }
   .nav-links { display: flex; gap: 28px; font-size: 0.92rem; font-weight: 500; }
   .nav-links a:hover { color: var(--amber-dark); }
   .nav-cta {
     background: var(--ink);
     color: var(--paper);
     padding: 10px 18px;
     border-radius: var(--radius);
     font-weight: 600;
     font-size: 0.88rem;
   }
   .nav-cta:hover { background: var(--ink-soft); }
   
   /* ---------- hero : THE BENCH ---------- */
   .hero {
     background: var(--ink);
     color: var(--paper);
     padding: 56px 0 84px;
     position: relative;
     overflow: hidden;
     border-bottom: 3px solid var(--amber);
   }
   .hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image:
       linear-gradient(var(--ink-soft) 1px, transparent 1px),
       linear-gradient(90deg, var(--ink-soft) 1px, transparent 1px);
     background-size: 34px 34px;
     opacity: 0.5;
     mask-image: radial-gradient(circle at 78% 20%, black, transparent 65%);
   }
   .hero .container { position: relative; }
   
   /* bench status bar — a real reading, not decoration: reflects actual shop hours via JS */
   .bench-status {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     font-family: var(--mono);
     font-size: 0.76rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: #C9C9C4;
     border: 1px solid var(--ink-soft);
     padding: 7px 14px;
     margin-bottom: 26px;
   }
   .bench-led {
     width: 8px; height: 8px; border-radius: 50%;
     background: var(--green);
     box-shadow: 0 0 8px var(--green);
   }
   .bench-led.off { background: var(--red); box-shadow: 0 0 8px var(--red); }
   .bench-led.pulse { animation: ledPulse 2.2s ease-in-out infinite; }
   @keyframes ledPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
   
   .hero-kicker {
     font-family: var(--mono);
     color: var(--amber);
     font-size: 0.8rem;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     margin-bottom: 18px;
   }
   .hero h1 {
     color: var(--paper);
     font-family: var(--display);
     font-weight: 400; /* Archivo Black only ships one weight */
     text-transform: uppercase;
     font-size: clamp(2rem, 4.6vw, 3.1rem);
     max-width: 760px;
     line-height: 1.06;
     letter-spacing: -0.01em;
   }
   .hero h1 .fault { color: var(--red); }
   .hero p.lead {
     color: #B7B7B1;
     max-width: 540px;
     margin-top: 20px;
     font-size: 1.02rem;
   }
   
   /* ---------- choice list (the 3 doors) rebuilt as a bench test readout ---------- */
   .choice-grid {
     display: flex;
     flex-direction: column;
     border: 1px solid var(--ink-soft);
     margin-top: 44px;
   }
   .choice-card {
     background: var(--ink);
     color: var(--paper);
     border-radius: 0;
     padding: 22px 20px;
     display: grid;
     grid-template-columns: 64px 1fr auto;
     align-items: center;
     gap: 18px;
     border-bottom: 1px solid var(--ink-soft);
     transition: background .12s ease, padding-left .12s ease;
   }
   .choice-card:last-child { border-bottom: none; }
   .choice-card:hover { background: var(--ink-soft); padding-left: 26px; }
   .choice-card .test-id {
     font-family: var(--mono);
     font-size: 0.66rem;
     color: var(--green);
     border: 1px solid currentColor;
     padding: 8px 0 6px;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 5px;
   }
   .choice-card .icon { display: none; } /* superseded by test-id */
   .choice-card h3 {
     font-family: var(--body);
     font-weight: 600;
     font-size: 1.05rem;
     color: var(--paper);
   }
   .choice-card p { color: #A6A6A0; font-size: 0.86rem; margin-top: 3px; }
   .choice-card .go {
     font-family: var(--mono);
     font-size: 1.1rem;
     color: var(--amber);
     font-weight: 600;
   }
   /* ---------- hero grid + system readout panel (inspired by node/coordinate readouts) ---------- */
   .hero-grid {
     display: grid;
     grid-template-columns: 1fr 300px;
     gap: 44px;
     align-items: start;
   }
   .hero-main { min-width: 0; }
   .hero canvas {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
   }
   
   .readout-panel {
     border: 1px solid var(--ink-soft);
     background: rgba(255,255,255,0.02);
     padding: 18px 20px;
     margin-top: 8px;
   }
   .readout-panel .rp-title {
     font-family: var(--mono);
     font-size: 0.68rem;
     letter-spacing: 0.1em;
     color: var(--green);
     margin-bottom: 12px;
   }
   .readout-row {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     padding: 6px 0;
     border-bottom: 1px dotted var(--ink-soft);
     font-family: var(--mono);
     font-size: 0.72rem;
     color: #8F8F89;
   }
   .readout-row:last-child { border-bottom: none; }
   .readout-row strong { color: var(--paper); font-weight: 600; text-align: right; }
   
   .meter {
     margin-top: 16px;
     border: 1px solid var(--ink-soft);
     padding: 16px 18px;
   }
   .meter-label {
     font-family: var(--mono);
     font-size: 0.66rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: #8F8F89;
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
   }
   .meter-label span:last-child { color: var(--green); font-weight: 700; }
   .meter-bar { height: 5px; background: var(--ink-soft); position: relative; overflow: hidden; }
   .meter-fill {
     position: absolute; inset: 0; width: 0%;
     background: linear-gradient(90deg, var(--red), var(--green));
     animation: meterFill 2.2s ease forwards;
   }
   @keyframes meterFill { to { width: 87%; } }
   
   @media (max-width: 900px) {
     .hero-grid { grid-template-columns: 1fr; }
   }
   
   /* ---------- 3D device stage (real, tiltable, mouse-reactive) ---------- */
   .device-stage {
     perspective: 1400px;
     padding: 30px 0 10px;
     display: flex;
     justify-content: center;
   }
   .phone3d-wrap {
     position: relative;
     width: 210px;
     height: 420px;
     transform-style: preserve-3d;
     transform: rotateY(-20deg) rotateX(8deg);
     transition: transform 0.2s ease-out;
   }
   .phone3d {
     position: absolute; inset: 0;
     border-radius: 30px;
     background: linear-gradient(155deg, #1E1E1E, #030303);
     border: 1px solid #2E2E2E;
     transform-style: preserve-3d;
     box-shadow:
       0 50px 70px -25px rgba(0,0,0,0.55),
       inset 0 0 0 1.5px rgba(255,255,255,0.05);
   }
   .phone3d::before {
     /* right-edge slab — fakes the phone's physical thickness in 3D */
     content: "";
     position: absolute; top: 0; bottom: 0; right: -10px; width: 10px;
     background: linear-gradient(180deg, #151515, #000);
     transform: rotateY(90deg);
     transform-origin: left center;
     border-radius: 0 6px 6px 0;
   }
   .phone3d .notch3d {
     width: 64px; height: 13px;
     background: #030303;
     border-radius: 0 0 10px 10px;
     margin: 9px auto 0;
     position: relative; z-index: 2;
   }
   .screen3d {
     position: absolute; inset: 9px 7px 7px;
     background: var(--paper);
     border-radius: 22px;
     padding: 16px 13px;
     overflow: hidden;
     transform: translateZ(1px);
   }
   .screen3d .s-bar { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.56rem; color: var(--slate-light); }
   .screen3d .s-tag { font-family: var(--mono); font-size: 0.6rem; color: var(--green); margin-top: 14px; display: flex; align-items: center; gap: 5px; letter-spacing: 0.04em; }
   .screen3d .s-tag::before { content: "["; }
   .screen3d .s-tag::after { content: "]"; }
   .screen3d .s-tag .icon { width: 11px; height: 11px; }
   .screen3d .s-device { font-weight: 700; font-size: 0.82rem; margin-top: 3px; color: var(--ink); }
   .screen3d .meter { margin-top: 12px; padding: 9px 10px; border-width: 1px; }
   .screen3d .meter-label { font-size: 0.54rem; margin-bottom: 6px; }
   .screen3d .ticket { margin-top: 12px; padding: 11px; border-width: 1px; }
   .screen3d .ticket-head { padding-bottom: 6px; margin-bottom: 6px; }
   .screen3d .ticket-id { font-size: 0.68rem; }
   .screen3d .ticket-status { font-size: 0.52rem; padding: 2px 6px; }
   .screen3d .ticket-row { font-size: 0.6rem; padding: 3px 0; }
   
   /* floating circuit chips — same gear/circuit language as the brand mark */
   .float-chip {
     position: absolute;
     transform: translateZ(70px);
     filter: drop-shadow(0 10px 16px rgba(0,0,0,0.45));
     animation: chipFloat 5s ease-in-out infinite;
   }
   .float-chip.c1 { top: -18px; left: -46px; animation-delay: 0s; }
   .float-chip.c2 { bottom: 60px; right: -50px; animation-delay: 1.4s; }
   .float-chip.c3 { top: 55%; left: -58px; animation-delay: 2.6s; width: 26px; }
   @keyframes chipFloat {
     0%, 100% { transform: translateZ(70px) translateY(0) rotate(0deg); }
     50% { transform: translateZ(70px) translateY(-12px) rotate(8deg); }
   }
   @keyframes autoTilt {
     0%, 100% { transform: rotateY(-20deg) rotateX(8deg); }
     50% { transform: rotateY(8deg) rotateX(2deg); }
   }
   
   /* screen3d cycling states */
   .screen3d .s-screen { display: none; }
   .screen3d .s-screen.active { display: block; animation: screenIn 0.4s ease; }
   @keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
   .s-devicerow { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
   .s-devicerow span {
     font-family: var(--mono); font-size: 0.52rem; border: 1px solid var(--line);
     padding: 4px 7px; color: var(--slate);
     display: inline-flex; align-items: center; gap: 4px;
   }
   .s-devicerow span.sel { border-color: var(--red); color: var(--red); font-weight: 700; }
   .s-check { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.58rem; color: var(--green); margin-top: 10px; }
   .s-check .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
   
   .s-fault-row {
     display: flex; align-items: center; gap: 6px;
     font-family: var(--mono); font-size: 0.55rem; color: var(--red);
     margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--line);
   }
   .s-progress { height: 3px; background: var(--paper-dim); margin-top: 10px; overflow: hidden; }
   .s-progress-fill { height: 100%; background: var(--green); animation: progressGrow 3.2s ease-in-out infinite; }
   @keyframes progressGrow { 0% { width: 10%; } 50% { width: 70%; } 100% { width: 10%; } }
   .s-footline { font-family: var(--mono); font-size: 0.48rem; color: var(--slate-light); margin-top: 6px; letter-spacing: 0.06em; }
   
   .s-checklist { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
   .s-check-row {
     display: flex; align-items: center; gap: 6px;
     font-family: var(--mono); font-size: 0.55rem; color: var(--ink);
     padding: 4px 6px; border: 1px solid var(--line);
   }
   .s-check-row span { margin-left: auto; font-weight: 700; }
   .s-check-row.ok { color: var(--slate); }
   .s-check-row.ok span { color: var(--green); }
   .s-check-row.fail { border-color: var(--red); }
   .s-check-row.fail span { color: var(--red); }
   
   /* ---------- ticker readout (replaces flat stat grid) ---------- */
   .ticker-bar {
     background: var(--ink);
     border-top: 1px solid var(--ink-soft);
     border-bottom: 1px solid var(--ink-soft);
     overflow: hidden;
     padding: 16px 0;
   }
   .ticker-track {
     display: flex;
     width: max-content;
     animation: tickerScroll 26s linear infinite;
     gap: 0;
   }
   .ticker-bar:hover .ticker-track { animation-play-state: paused; }
   .ticker-item {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-family: var(--mono);
     font-size: 0.82rem;
     color: var(--paper);
     white-space: nowrap;
     padding: 0 28px;
     border-right: 1px solid var(--ink-soft);
   }
   .ticker-item strong { color: var(--green); font-weight: 700; }
   .ticker-item .sep-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
   @keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
   
   /* ---------- circuit timeline (replaces old/new columns) ---------- */
   .old-way-strip {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-family: var(--mono);
     font-size: 0.8rem;
     color: var(--slate-light);
     text-decoration: line-through;
     margin-bottom: 36px;
     border-left: 2px solid var(--red);
     padding-left: 12px;
   }
   .old-way-strip::before { content: "✕"; text-decoration: none; color: var(--red); font-weight: 700; }
   
   .circuit-timeline {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     position: relative;
     gap: 0;
   }
   .circuit-timeline::before {
     content: "";
     position: absolute;
     top: 17px; left: 6%; right: 6%;
     height: 2px;
     background: repeating-linear-gradient(90deg, var(--green) 0 6px, transparent 6px 11px);
   }
   .circuit-step { position: relative; padding: 0 14px 0 0; text-align: left; }
   .circuit-node {
     width: 34px; height: 34px;
     border: 2px solid var(--green);
     background: var(--paper);
     border-radius: 50%;
     display: flex; align-items: center; justify-content: center;
     font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
     color: var(--ink);
     position: relative; z-index: 1;
     margin-bottom: 14px;
   }
   .circuit-step h4 { font-size: 0.92rem; font-weight: 600; margin-bottom: 4px; }
   .circuit-step p { font-size: 0.8rem; color: var(--slate); line-height: 1.4; }
   @media (max-width: 860px) {
     .circuit-timeline { grid-template-columns: 1fr; gap: 26px; }
     .circuit-timeline::before { display: none; }
     .circuit-step { padding-left: 18px; border-left: 2px dashed var(--line); }
   }
   
   /* ---------- brand marquee ---------- */
   .marquee-wrap { overflow: hidden; }
   .marquee-track {
     display: flex;
     width: max-content;
     gap: 0;
     animation: marqueeScroll 22s linear infinite;
   }
   .marquee-wrap:hover .marquee-track { animation-play-state: paused; }
   @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
   
   /* ---------- testimonial scroll strip ---------- */
   .testimonial-scroll {
     display: flex;
     gap: 16px;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     padding-bottom: 10px;
     margin: 0 -24px;
     padding-left: 24px;
     padding-right: 24px;
   }
   .testimonial-scroll .testimonial-card {
     scroll-snap-align: start;
     min-width: 300px;
     flex: 0 0 300px;
   }
   .testimonial-scroll::-webkit-scrollbar { height: 6px; }
   .testimonial-scroll::-webkit-scrollbar-thumb { background: var(--line); }
   /* ---------- service modules (bento) ---------- */
   .bench-modules { background: var(--ink); color: var(--paper); }
   .bench-modules .section-head p { color: #B7B7B1; }
   .module-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1px;
     background: var(--ink-soft);
     border: 1px solid var(--ink-soft);
   }
   .module-card {
     background: var(--ink);
     padding: 26px 22px;
     display: flex;
     flex-direction: column;
     gap: 8px;
     transition: background .15s ease;
   }
   .module-card:hover { background: var(--ink-soft); }
   .module-card.span-2 { grid-column: span 2; }
   .module-tag { font-family: var(--mono); font-size: 0.66rem; color: var(--red); letter-spacing: 0.06em; display: flex; align-items: center; gap: 7px; }
   .module-tag .icon { width: 15px; height: 15px; }
   .module-card h3 { font-family: var(--body); font-weight: 600; font-size: 1.05rem; color: var(--paper); }
   .module-card p { font-size: 0.85rem; color: #A6A6A0; }
   .module-stat {
     margin-top: auto;
     font-family: var(--mono);
     font-size: 0.68rem;
     color: var(--slate-light);
     padding-top: 10px;
     border-top: 1px dotted var(--ink-soft);
     letter-spacing: 0.04em;
   }
   .module-stat strong { color: var(--green); }
   @media (max-width: 760px) {
     .module-grid { grid-template-columns: 1fr; }
     .module-card.span-2 { grid-column: span 1; }
   }
   
   /* ---------- phone frame (this is a phone repair shop — show it on a phone) ---------- */
   .phone-frame {
     width: 272px;
     border: 9px solid var(--ink);
     border-radius: 34px;
     background: var(--ink);
     margin: 0 auto;
     box-shadow: 0 24px 50px rgba(0,0,0,0.18);
   }
   .phone-frame .notch {
     width: 74px; height: 16px;
     background: var(--ink);
     border-radius: 0 0 12px 12px;
     margin: 0 auto;
     position: relative;
     z-index: 1;
   }
   .phone-frame .screen {
     background: var(--paper);
     border-radius: 25px;
     padding: 20px 16px 24px;
     margin-top: -16px;
   }
   
   @media (max-width: 800px) {
     .choice-grid { grid-template-columns: 1fr; }
     .nav-links { display: none; }
   }
   
   /* ---------- trust strip ←’ capability readout: every line is a real PASS ---------- */
   .trust {
     border-bottom: 1px solid var(--line);
     padding: 18px 0;
     background: var(--paper-dim);
   }
   .trust .container {
     display: flex;
     flex-wrap: wrap;
     gap: 8px 28px;
     justify-content: space-between;
   }
   .trust span {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--mono);
     font-size: 0.76rem;
     color: var(--slate);
     text-transform: uppercase;
     letter-spacing: 0.04em;
   }
   .trust span::before {
     content: "";
     width: 7px; height: 7px; border-radius: 50%;
     background: var(--green);
     flex-shrink: 0;
   }
   .trust span strong { color: var(--ink); font-weight: 700; }
   
   /* ---------- section ---------- */
   .section { padding: 72px 0; }
   .section-head { max-width: 620px; margin-bottom: 40px; }
   .section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 8px; }
   .section-head p { color: var(--slate); margin-top: 12px; }
   
   /* ---------- how it works ---------- */
   .flow {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: wrap;
     font-family: var(--mono);
     font-size: 0.82rem;
   }
   .flow-step {
     background: var(--paper);
     border: 1px solid var(--line);
     border-radius: 999px;
     padding: 8px 16px;
   }
   .flow-step.old { color: var(--slate-light); text-decoration: line-through; }
   .flow-arrow { color: var(--slate-light); }
   
   .flow-columns {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
     margin-top: 30px;
   }
   .flow-col h4 {
     font-family: var(--mono);
     font-size: 0.78rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--slate-light);
     margin-bottom: 14px;
   }
   .flow-col.new h4 { color: var(--amber-dark); }
   @media (max-width: 720px) { .flow-columns { grid-template-columns: 1fr; } }
   
   /* ---------- ticket component (SIGNATURE ELEMENT) ---------- */
   .ticket {
     background: var(--paper);
     border: 1.5px dashed var(--line);
     border-radius: 14px;
     position: relative;
     padding: 28px 26px;
   }
   .ticket::before, .ticket::after {
     content: "";
     position: absolute;
     width: 22px; height: 22px;
     background: var(--ink);
     border-radius: 50%;
     top: 50%;
     transform: translateY(-50%);
   }
   .ticket::before { left: -11px; }
   .ticket::after { right: -11px; }
   .ticket-head {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
     border-bottom: 1px dashed var(--line);
     padding-bottom: 14px;
     margin-bottom: 14px;
   }
   .ticket-id {
     font-family: var(--mono);
     font-weight: 600;
     font-size: 1.1rem;
   }
   .ticket-status {
     font-family: var(--mono);
     font-size: 0.72rem;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     padding: 4px 10px;
     border-radius: 6px;
     background: var(--paper-dim);
   }
   .ticket-status.ready { background: #E4F3EA; color: var(--green); }
   .ticket-status.urgent { background: #FBE7E6; color: var(--red); }
   .ticket-row {
     display: flex;
     justify-content: space-between;
     font-size: 0.9rem;
     padding: 6px 0;
     color: var(--slate);
   }
   .ticket-row strong { color: var(--ink); font-weight: 500; }
   
   /* ---------- footer ---------- */
   .footer {
     background: var(--ink);
     color: #B9C2D0;
     padding: 48px 0 28px;
     margin-top: 40px;
   }
   .footer .container {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 24px;
   }
   .footer h5 { color: var(--paper); font-family: var(--display); margin-bottom: 10px; }
   .footer small { display: block; margin-top: 26px; color: #6E7A8C; font-family: var(--mono); font-size: 0.72rem; }
   
   /* ===========================================================
      WIZARD (repair.html)
      =========================================================== */
   .wizard-shell {
     max-width: 760px;
     margin: 0 auto;
     padding: 40px 24px 100px;
   }
   .wizard-progress {
     display: flex;
     gap: 4px;
     margin-bottom: 34px;
   }
   .wizard-progress .bar {
     flex: 1;
     height: 4px;
     background: var(--line);
     border-radius: 2px;
     overflow: hidden;
   }
   .wizard-progress .bar.done, .wizard-progress .bar.active { background: var(--amber); }
   
   .wizard-step-label {
     font-family: var(--mono);
     font-size: 0.78rem;
     color: var(--amber-dark);
     text-transform: uppercase;
     letter-spacing: 0.1em;
     margin-bottom: 6px;
   }
   .wizard-card {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 14px;
     padding: 34px;
   }
   .wizard-card h2 { font-size: 1.5rem; margin-bottom: 8px; }
   .wizard-card > p.hint { color: var(--slate); margin-bottom: 26px; font-size: 0.92rem; }
   
   .option-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px;
   }
   .option-grid.two { grid-template-columns: repeat(2, 1fr); }
   .option-tile {
     border: 1.5px solid var(--line);
     border-radius: 10px;
     padding: 18px 12px;
     text-align: center;
     background: var(--paper);
     font-weight: 500;
     font-size: 0.92rem;
     transition: all .12s ease;
   }
   .option-tile .glyph { font-size: 1.5rem; display: block; margin-bottom: 8px; }
   .option-tile:hover { border-color: var(--amber); }
   .option-tile.selected {
     border-color: var(--amber-dark);
     background: #FDF3E2;
     box-shadow: inset 0 0 0 1px var(--amber-dark);
   }
   @media (max-width: 560px) { .option-grid { grid-template-columns: repeat(2, 1fr); } }
   
   .checkbox-list { display: flex; flex-wrap: wrap; gap: 10px; }
   .chip {
     border: 1.5px solid var(--line);
     border-radius: 999px;
     padding: 10px 16px;
     font-size: 0.88rem;
     background: var(--paper);
   }
   .chip.selected { border-color: var(--amber-dark); background: #FDF3E2; color: var(--amber-dark); font-weight: 600; }
   
   label.field-label {
     display: block;
     font-size: 0.85rem;
     font-weight: 600;
     margin-bottom: 8px;
     margin-top: 20px;
   }
   label.field-label:first-of-type { margin-top: 0; }
   input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea {
     width: 100%;
     padding: 12px 14px;
     border: 1.5px solid var(--line);
     border-radius: 8px;
     font-family: var(--body);
     font-size: 0.95rem;
     background: #fff;
   }
   input:focus, select:focus, textarea:focus { border-color: var(--amber-dark); }
   textarea { min-height: 100px; resize: vertical; }
   
   .upload-zone {
     border: 1.5px dashed var(--line);
     border-radius: 10px;
     padding: 26px;
     text-align: center;
     color: var(--slate);
     font-size: 0.88rem;
     background: var(--paper);
     cursor: pointer;
   }
   .upload-zone:hover { border-color: var(--amber); }
   .photo-preview-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
   .photo-preview-row img { width: 74px; height: 74px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
   
   .wizard-actions {
     display: flex;
     justify-content: space-between;
     margin-top: 30px;
   }
   .btn {
     padding: 13px 24px;
     border-radius: 9px;
     font-weight: 600;
     font-size: 0.92rem;
   }
   .btn-primary { background: var(--ink); color: var(--paper); }
   .btn-primary:hover { background: var(--ink-soft); }
   .btn-primary:disabled { background: var(--slate-light); cursor: not-allowed; }
   .btn-ghost { background: transparent; color: var(--slate); }
   .btn-ghost:hover { color: var(--ink); }
   
   .quote-box {
     background: var(--ink);
     color: var(--paper);
     border-radius: 12px;
     padding: 22px;
     margin-top: 10px;
   }
   .quote-box .amount { font-family: var(--mono); font-size: 1.8rem; color: var(--amber); }
   .quote-box .label { font-size: 0.8rem; color: #A9B3C2; margin-top: 4px; }
   
   /* time slot picker */
   .slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
   .slot-tile { border: 1.5px solid var(--line); border-radius: 8px; padding: 12px; text-align: center; font-size: 0.85rem; background: var(--paper); }
   .slot-tile.selected { border-color: var(--amber-dark); background: #FDF3E2; font-weight: 600; }
   
   /* admin table */
   .admin-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
   .admin-table th, .admin-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); }
   .admin-table th { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; color: var(--slate-light); }
   .status-pill { font-family: var(--mono); font-size: 0.7rem; padding: 4px 10px; border-radius: 6px; background: var(--paper-dim); text-transform: uppercase; }
   .status-pill.received { background: #EDEBE0; }
   .status-pill.diagnosed { background: #E3EAF6; color: #2E5AA8; }
   .status-pill.repairing { background: #FDF0DC; color: var(--amber-dark); }
   .status-pill.ready { background: #E4F3EA; color: var(--green); }
   
   /* ===========================================================
      MOBILE OPTIMIZATION & TOUCH TARGETS
      =========================================================== */
   
   /* Improve touch targets on mobile */
   @media (max-width: 640px) {
     body { font-size: 15px; }
     
     .container { padding: 0 16px; }
     
     .topbar .container { flex-direction: column; align-items: flex-start; gap: 6px; }
     
     .nav .container { flex-wrap: wrap; }
     .nav-links { display: none; }
     .nav .logo { flex: 1; }
     
     h1 { font-size: 1.8rem; line-height: 1.2; }
     h2 { font-size: 1.4rem; }
     h3 { font-size: 1.1rem; }
     
     .choice-grid { grid-template-columns: 1fr; }
     .choice-card { padding: 20px 16px; }
     
     .trust { flex-direction: column; gap: 12px; }
     .trust span { text-align: center; padding: 8px 0; }
     
     .flow-columns { flex-direction: column; }
     .flow-col { margin-bottom: 24px; }
     
     /* Wizard on mobile */
     .wizard-shell { padding: 20px 0; }
     .wizard-card { padding: 20px 16px; border-radius: 12px; }
     
     .option-grid, .option-grid.two { grid-template-columns: 1fr; }
     .option-tile { padding: 14px 12px; font-size: 0.9rem; }
     .option-tile .glyph { font-size: 1.4rem; }
     
     .slot-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
     .slot-tile { padding: 10px 8px; font-size: 0.8rem; }
     
     .upload-zone { padding: 20px 12px; }
     .photo-preview-row img { width: 60px; height: 60px; }
     
     input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea {
       padding: 12px 12px;
       font-size: 16px; /* prevents zoom on iOS */
     }
     
     .btn { padding: 12px 16px; width: 100%; }
     .wizard-actions { flex-direction: column; gap: 10px; }
     .btn-ghost { width: 100%; }
     
     .wizard-step-label { margin-bottom: 16px; }
     
     .ticket { max-width: 100%; }
     
     .admin-table { font-size: 0.8rem; }
     .admin-table th, .admin-table td { padding: 8px 10px; }
     
     .footer { padding: 40px 0 30px; }
     .footer .container { display: block; }
     .footer > div:first-child { margin-bottom: 30px; }
   }
   
   /* Tablet */
   @media (max-width: 1024px) {
     .hero-kicker { font-size: 0.9rem; }
     h1 { font-size: 2.2rem; }
     .flow-columns { gap: 20px; }
   }
   
   /* Enhanced button and form touch targets */
   button, .btn, .option-tile, .chip, .slot-tile {
     min-height: 44px;
     transition: all 0.15s ease-out;
   }
   
   input[type="file"]:focus-visible { outline: none; }
   
   /* ===========================================================
      ONLINE STORE — Product Cards & Catalog
      =========================================================== */
   
   .store-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
     flex-wrap: wrap;
     gap: 16px;
   }
   
   .store-filters {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
   }
   
   .filter-btn {
     padding: 8px 16px;
     border: 1.5px solid var(--line);
     border-radius: 6px;
     background: var(--paper);
     font-size: 0.9rem;
     cursor: pointer;
     transition: all 0.15s ease-out;
   }
   
   .filter-btn.active {
     background: var(--ink);
     color: var(--paper);
     border-color: var(--ink);
   }
   
   .filter-btn:hover:not(.active) {
     border-color: var(--slate);
   }
   
   .product-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 20px;
     margin-bottom: 60px;
   }
   
   .product-card {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 12px;
     overflow: hidden;
     transition: all 0.2s ease-out;
     display: flex;
     flex-direction: column;
     cursor: pointer;
     position: relative;
   }
   
   .product-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
   }
   
   .product-image {
     width: 100%;
     height: 200px;
     background: var(--paper-dim);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 3rem;
     position: relative;
     overflow: hidden;
   }
   
   .product-image.has-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   
   .product-badge {
     position: absolute;
     top: 10px;
     right: 10px;
     background: var(--green);
     color: white;
     padding: 4px 10px;
     border-radius: 4px;
     font-family: var(--mono);
     font-size: 0.65rem;
     text-transform: uppercase;
     font-weight: 600;
   }
   
   .product-badge.featured {
     background: var(--blue);
   }
   
   .product-body {
     padding: 16px;
     flex: 1;
     display: flex;
     flex-direction: column;
   }
   
   .product-title {
     font-weight: 600;
     font-size: 0.95rem;
     line-height: 1.3;
     margin-bottom: 6px;
     color: var(--ink);
   }
   
   .product-specs {
     font-size: 0.8rem;
     color: var(--slate-light);
     margin-bottom: 12px;
   }
   
   .product-price {
     font-family: var(--mono);
     font-size: 1.2rem;
     font-weight: 700;
     color: var(--amber-dark);
     margin-bottom: 8px;
   }
   
   .product-rating {
     display: flex;
     gap: 4px;
     margin-bottom: 12px;
   }
   
   .star { color: var(--amber); font-size: 0.9rem; }
   .star.empty { color: var(--line); }
   
   .product-footer {
     display: flex;
     gap: 8px;
     margin-top: auto;
   }
   
   .product-btn {
     flex: 1;
     padding: 10px 12px;
     border: 1.5px solid var(--line);
     background: #fff;
     border-radius: 6px;
     font-size: 0.85rem;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.15s ease-out;
   }
   
   .product-btn:hover {
     border-color: var(--ink);
     background: var(--ink);
     color: var(--paper);
   }
   
   .product-btn.add-to-cart {
     background: var(--blue);
     color: white;
     border-color: var(--blue);
   }
   
   .product-btn.add-to-cart:hover {
     background: #1d4ed8;
   }
   
   /* Empty state */
   .empty-state {
     text-align: center;
     padding: 60px 20px;
   }
   
   .empty-state h3 {
     margin-bottom: 8px;
   }
   
   .empty-state p {
     color: var(--slate-light);
     margin-bottom: 20px;
   }
   
   /* ===========================================================
      IMPROVED WIZARD UX
      =========================================================== */
   
   .wizard-progress {
     height: 4px;
     background: var(--line);
     position: relative;
     overflow: hidden;
     --progress: 0%;
   }
   
   .wizard-progress::after {
     content: '';
     position: absolute;
     height: 100%;
     background: var(--amber);
     left: 0;
     top: 0;
     width: var(--progress);
     transition: width 0.4s ease-out;
   }
   
   .wizard-step-label {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
     padding-bottom: 12px;
     border-bottom: 1px solid var(--line);
   }
   
   .step-counter {
     font-family: var(--mono);
     font-size: 0.75rem;
     text-transform: uppercase;
     color: var(--slate-light);
     letter-spacing: 0.05em;
   }
   
   .step-title {
     font-weight: 600;
     color: var(--ink);
     flex: 1;
   }
   
   .step-progress-percent {
     font-family: var(--mono);
     font-size: 0.75rem;
     color: var(--amber-dark);
     font-weight: 600;
   }
   
   .wizard-hint {
     font-size: 0.85rem;
     color: var(--slate-light);
     margin-bottom: 16px;
     line-height: 1.4;
   }
   
   /* Smooth step transitions */
   .wizard-enter {
     animation: slideUp 0.3s ease-out;
   }
   
   @keyframes slideUp {
     from {
       opacity: 0;
       transform: translateY(12px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   /* Review step styling */
   .review-block {
     background: var(--paper);
     border-left: 3px solid var(--amber);
     padding: 14px 16px;
     border-radius: 4px;
     margin-bottom: 12px;
     display: flex;
     justify-content: space-between;
     align-items: baseline;
   }
   
   .review-label {
     font-weight: 600;
     font-size: 0.85rem;
     color: var(--slate-light);
     margin-bottom: 2px;
   }
   
   .review-value {
     font-weight: 500;
     font-size: 0.95rem;
     color: var(--ink);
   }
   
   .review-edit {
     font-family: var(--mono);
     font-size: 0.7rem;
     color: var(--amber);
     cursor: pointer;
     margin-left: 12px;
     text-transform: uppercase;
   }
   
   .review-edit:hover {
     color: var(--amber-dark);
     text-decoration: underline;
   }
   
   /* ===========================================================
      ADMIN DATA MANAGEMENT
      =========================================================== */
   
   .admin-panel {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 12px;
     padding: 24px;
     margin-bottom: 24px;
   }
   
   .admin-panel-title {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px;
     padding-bottom: 12px;
     border-bottom: 1px solid var(--line);
   }
   
   .admin-panel-title h3 {
     margin: 0;
   }
   
   .admin-tab-buttons {
     display: flex;
     gap: 8px;
     margin-bottom: 20px;
     border-bottom: 1px solid var(--line);
   }
   
   .admin-tab-btn {
     padding: 10px 14px;
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
     font-weight: 600;
     color: var(--slate-light);
     cursor: pointer;
     transition: all 0.15s ease-out;
   }
   
   .admin-tab-btn.active {
     color: var(--ink);
     border-bottom-color: var(--amber);
   }
   
   .data-form {
     display: flex;
     flex-direction: column;
     gap: 16px;
     max-width: 600px;
   }
   
   .form-row {
     display: flex;
     gap: 12px;
   }
   
   .form-row > input {
     flex: 1;
   }
   
   .data-table-wrapper {
     overflow-x: auto;
   }
   
   .device-tag {
     display: inline-block;
     background: var(--blue-light);
     color: var(--blue);
     padding: 6px 10px;
     border-radius: 4px;
     font-size: 0.8rem;
     font-weight: 500;
     margin-right: 6px;
     margin-bottom: 6px;
   }
   
   .price-row {
     display: grid;
     grid-template-columns: 2fr 1fr auto;
     gap: 12px;
     align-items: center;
     padding: 12px;
     border-bottom: 1px solid var(--line);
   }
   
   .price-row:last-child { border-bottom: none; }
   
   .price-row input { padding: 8px 10px; font-size: 0.9rem; }
   
   .delete-btn {
     background: var(--red);
     color: white;
     border: none;
     padding: 6px 12px;
     border-radius: 4px;
     font-size: 0.8rem;
     cursor: pointer;
     transition: all 0.15s ease-out;
   }
   
   .delete-btn:hover {
     background: #a03836;
   }
   
   .success-message {
     background: #E4F3EA;
     color: var(--green);
     padding: 12px 16px;
     border-radius: 6px;
     font-size: 0.9rem;
     margin-bottom: 16px;
     animation: fadeIn 0.3s ease-out;
   }
   
   @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
   }
   
   /* ===========================================================
      SHOPPING CART
      =========================================================== */
   
   .cart-sidebar {
     position: fixed;
     right: 0;
     top: 0;
     width: 360px;
     height: 100vh;
     background: white;
     box-shadow: -2px 0 24px rgba(0, 0, 0, 0.1);
     z-index: 1000;
     display: flex;
     flex-direction: column;
     transform: translateX(100%);
     transition: transform 0.3s ease-out;
   }
   
   .cart-sidebar.open {
     transform: translateX(0);
   }
   
   .cart-header {
     padding: 20px;
     border-bottom: 1px solid var(--line);
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
   .cart-close-btn {
     background: transparent;
     border: none;
     font-size: 1.4rem;
     cursor: pointer;
   }
   
   .cart-items {
     flex: 1;
     overflow-y: auto;
     padding: 20px;
   }
   
   .cart-item {
     display: flex;
     gap: 12px;
     padding-bottom: 16px;
     margin-bottom: 16px;
     border-bottom: 1px solid var(--line);
   }
   
   .cart-item-image {
     width: 60px;
     height: 60px;
     background: var(--paper-dim);
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     flex-shrink: 0;
   }
   
   .cart-item-info {
     flex: 1;
   }
   
   .cart-item-title {
     font-weight: 600;
     font-size: 0.9rem;
     margin-bottom: 4px;
   }
   
   .cart-item-price {
     font-family: var(--mono);
     font-size: 0.9rem;
     color: var(--amber-dark);
     margin-bottom: 6px;
   }
   
   .cart-item-qty {
     display: flex;
     gap: 6px;
     align-items: center;
   }
   
   .qty-btn {
     width: 24px;
     height: 24px;
     border: 1px solid var(--line);
     background: transparent;
     border-radius: 3px;
     cursor: pointer;
     font-size: 0.8rem;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .qty-btn:hover { background: var(--paper-dim); }
   
   .cart-summary {
     padding: 20px;
     border-top: 1px solid var(--line);
   }
   
   .summary-row {
     display: flex;
     justify-content: space-between;
     margin-bottom: 8px;
     font-size: 0.9rem;
   }
   
   .summary-row.total {
     font-weight: 700;
     font-size: 1.1rem;
     color: var(--ink);
     margin-top: 12px;
     padding-top: 12px;
     border-top: 1px solid var(--line);
   }
   
   .checkout-btn {
     width: 100%;
     padding: 12px;
     background: var(--blue);
     color: white;
     border: none;
     border-radius: 6px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.15s ease-out;
     margin-top: 12px;
   }
   
   .checkout-btn:hover { background: #1d4ed8; }
   
   .cart-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.3);
     z-index: 999;
     display: none;
   }
   
   .cart-backdrop.open {
     display: block;
   }
   
   @media (max-width: 640px) {
     .cart-sidebar { width: 100%; }
     
     .product-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 12px;
     }
     
     .admin-panel { padding: 16px; }
     .form-row { flex-direction: column; }
     .price-row { grid-template-columns: 1fr; }
   }
   
   /* ===========================================================
      ENHANCEMENT: DARK MODE
      =========================================================== */
   
   /* Theme toggle button */

   
   /* ===========================================================
      ENHANCEMENT: MOBILE HAMBURGER MENU
      =========================================================== */
   .menu-toggle {
     display: none;
     background: transparent;
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
     padding: 4px 8px;
   }
   .mobile-menu {
     position: fixed;
     top: 0;
     right: -100%;
     width: 280px;
     height: 100vh;
     background: var(--paper);
     box-shadow: -2px 0 24px rgba(0,0,0,0.15);
     z-index: 1001;
     transition: right 0.3s ease;
     padding: 80px 24px 24px;
     display: flex;
     flex-direction: column;
     gap: 20px;
   }
   .mobile-menu.open { right: 0; }
   .mobile-menu a {
     font-size: 1.1rem;
     font-weight: 600;
     padding: 12px 0;
     border-bottom: 1px solid var(--line);
   }
   .mobile-menu a:hover { color: var(--amber-dark); }
   .mobile-menu .menu-close {
     position: absolute;
     top: 20px;
     right: 20px;
     font-size: 1.5rem;
     background: none;
     border: none;
     cursor: pointer;
   }
   .menu-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.3);
     z-index: 1000;
     display: none;
   }
   .menu-backdrop.open { display: block; }
   
   @media (max-width: 800px) {
     .menu-toggle { display: block; }
     .nav-cta { display: none; }
   }
   
   /* ===========================================================
      ENHANCEMENT: BACK TO TOP
      =========================================================== */
   .back-to-top {
     position: fixed;
     bottom: 24px;
     right: 24px;
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--ink);
     color: var(--paper);
     border: none;
     font-size: 1.3rem;
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s;
     z-index: 500;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .back-to-top.visible { opacity: 1; visibility: visible; }
   .back-to-top:hover { background: var(--amber); color: var(--ink); transform: translateY(-2px); }
   
   /* ===========================================================
      ENHANCEMENT: TOAST NOTIFICATIONS
      =========================================================== */
   .toast-container {
     position: fixed;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 2000;
     display: flex;
     flex-direction: column;
     gap: 8px;
     align-items: center;
     pointer-events: none;
   }
   .toast {
     padding: 12px 24px;
     border-radius: 8px;
     font-weight: 600;
     font-size: 0.9rem;
     box-shadow: 0 4px 16px rgba(0,0,0,0.15);
     animation: toastIn 0.3s ease-out;
     pointer-events: auto;
   }
   .toast.success { background: #E4F3EA; color: var(--green); }
   .toast.error { background: #FEE2E2; color: var(--red); }
   .toast.info { background: #DBEAFE; color: var(--blue); }
   .toast.removing { animation: toastOut 0.3s ease-out forwards; }
   @keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
   @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }
   
   /* ===========================================================
      ENHANCEMENT: SKELETON LOADERS
      =========================================================== */
   .skeleton {
     background: linear-gradient(90deg, var(--paper-dim) 25%, var(--paper) 50%, var(--paper-dim) 75%);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
     border-radius: 8px;
   }
   .skeleton-card {
     border: 1px solid var(--line);
     border-radius: 14px;
     overflow: hidden;
     padding: 0;
   }
   .skeleton-img { height: 140px; }
   .skeleton-body { padding: 16px; }
   .skeleton-line { height: 14px; margin-bottom: 8px; }
   .skeleton-line.w-60 { width: 60%; }
   .skeleton-line.w-40 { width: 40%; }
   .skeleton-line.w-80 { width: 80%; }
   @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
   
   /* ===========================================================
      ENHANCEMENT: FAQ ACCORDION
      =========================================================== */
   .faq-list { max-width: 720px; margin: 0 auto; border: 1px solid var(--line); }
   .faq-item {
     border-radius: 0;
     margin-bottom: 0;
     border-bottom: 1px solid var(--line);
     overflow: hidden;
     background: #fff;
   }
   .faq-item:last-child { border-bottom: none; }
   .faq-question {
     padding: 16px 22px;
     font-weight: 500;
     font-size: 0.94rem;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 16px;
     background: transparent;
     border: none;
     width: 100%;
     text-align: left;
     font-family: var(--mono);
     color: var(--ink);
   }
   .faq-question::before { content: ">"; color: var(--green); font-weight: 700; margin-right: 10px; }
   .faq-question .faq-icon { font-size: 1.1rem; font-family: var(--mono); color: var(--slate-light); transition: transform 0.2s; }
   .faq-item.open .faq-icon { transform: rotate(45deg); color: var(--red); }
   .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease, padding 0.3s ease;
     padding: 0 22px 0 46px;
     color: var(--slate);
     font-size: 0.92rem;
     line-height: 1.6;
   }
   .faq-item.open .faq-answer { max-height: 300px; padding: 0 22px 18px 46px; }
   
   /* ===========================================================
      ENHANCEMENT: TESTIMONIAL CARDS
      =========================================================== */
   .testimonial-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
   }
   @media (max-width: 800px) { .testimonial-grid { grid-template-columns: 1fr; } }
   .testimonial-card {
     background: #fff;
     border: 1px solid var(--line);
     border-left: 3px solid var(--green);
     border-radius: 0;
     padding: 26px 24px;
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
   .testimonial-rating { color: var(--slate-light); font-size: 0.72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
   .testimonial-rating::before { content: "PASS · "; color: var(--green); font-weight: 700; }
   .testimonial-text { font-size: 0.95rem; color: var(--ink); line-height: 1.6; font-style: normal; }
   .testimonial-author { font-weight: 700; font-size: 0.9rem; }
   .testimonial-role { font-size: 0.78rem; color: var(--slate-light); font-family: var(--mono); text-transform: uppercase; }
   
   /* ===========================================================
      ENHANCEMENT: STAT COUNTERS
      =========================================================== */
   .stat-counter-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
   }
   @media (max-width: 800px) { .stat-counter-grid { grid-template-columns: repeat(2, 1fr); } }
   .stat-counter {
     text-align: center;
     padding: 24px 16px;
     border-left: 1px solid var(--ink-soft);
   }
   .stat-counter:first-child { border-left: none; }
   .stat-number {
     font-family: var(--mono);
     font-size: clamp(1.8rem, 3.6vw, 2.5rem);
     font-weight: 700;
     color: var(--green);
     line-height: 1;
   }
   .stat-label {
     margin-top: 8px;
     font-family: var(--mono);
     font-size: 0.78rem;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--slate-light);
   }
   
   /* ===========================================================
      ENHANCEMENT: PROGRESS TIMELINE (track page)
      =========================================================== */
   .timeline {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     position: relative;
     margin: 30px 0 20px;
     padding: 0 8px;
   }
   .timeline::before {
     content: "";
     position: absolute;
     top: 22px;
     left: 8px;
     right: 8px;
     height: 3px;
     background: var(--line);
     border-radius: 2px;
   }
   .timeline-stage {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     flex: 1;
   }
   .timeline-stage .stage-dot {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--paper);
     border: 3px solid var(--line);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.2rem;
     transition: all 0.3s;
   }
   .timeline-stage .stage-label {
     font-family: var(--mono);
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--slate-light);
     text-align: center;
     line-height: 1.3;
   }
   .timeline-stage.done .stage-dot {
     background: var(--green);
     border-color: var(--green);
   }
   .timeline-stage.done .stage-label { color: var(--green); }
   .timeline-stage.active .stage-dot {
     background: var(--amber);
     border-color: var(--amber-dark);
     box-shadow: 0 0 0 6px rgba(232,163,61,0.2);
     animation: pulse 2s infinite;
   }
   .timeline-stage.active .stage-label { color: var(--amber-dark); font-weight: 600; }
   @keyframes pulse {
     0%, 100% { box-shadow: 0 0 0 6px rgba(232,163,61,0.2); }
     50% { box-shadow: 0 0 0 10px rgba(232,163,61,0.1); }
   }
   @media (max-width: 640px) {
     .timeline { flex-wrap: wrap; gap: 16px; }
     .timeline::before { display: none; }
     .timeline-stage { flex: 0 0 calc(33% - 16px); }
     .timeline-stage .stage-label { font-size: 0.65rem; }
   }
   
   /* ===========================================================
      ENHANCEMENT: MODAL
      =========================================================== */
   .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.5);
     z-index: 2000;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 20px;
   }
   .modal-overlay.open { display: flex; }
   .modal {
     background: #fff;
     border-radius: 14px;
     max-width: 480px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
     animation: scaleIn 0.25s ease-out;
   }
   .modal-header {
     padding: 20px 24px;
     border-bottom: 1px solid var(--line);
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .modal-header h3 { font-size: 1.2rem; }
   .modal-close {
     background: transparent;
     border: none;
     font-size: 1.4rem;
     cursor: pointer;
     color: var(--slate-light);
   }
   .modal-body { padding: 24px; }
   @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
   
   /* ===========================================================
      ENHANCEMENT: BREADCRUMB
      =========================================================== */
   .breadcrumb {
     display: flex;
     gap: 8px;
     font-family: var(--mono);
     font-size: 0.8rem;
     color: var(--slate-light);
     margin-bottom: 20px;
     align-items: center;
   }
   .breadcrumb a:hover { color: var(--amber-dark); }
   .breadcrumb .separator { opacity: 0.5; }
   
   /* ===========================================================
      ENHANCEMENT: SEARCH BAR
      =========================================================== */
   .search-bar {
     position: relative;
     max-width: 600px;
     margin: 0 auto;
   }
   .search-input {
     width: 100%;
     padding: 14px 20px 14px 44px;
     font-size: 1rem;
     border: 1.5px solid var(--line);
     border-radius: 999px;
     background: var(--paper);
     font-family: var(--body);
     transition: border-color 0.2s;
   }
   .search-input:focus { border-color: var(--amber); outline: none; }
   .search-icon {
     position: absolute;
     left: 16px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 1.1rem;
     opacity: 0.5;
   }
   
   /* ===========================================================
      ENHANCEMENT: SORT DROPDOWN
      =========================================================== */
   .sort-select {
     padding: 8px 14px;
     border: 1px solid var(--line);
     border-radius: 8px;
     font-size: 0.88rem;
     background: var(--paper);
     cursor: pointer;
     font-family: var(--body);
   }
   
   /* ===========================================================
      ENHANCEMENT: WISHLIST
      =========================================================== */
   .wishlist-btn {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: rgba(255,255,255,0.9);
     border: 1px solid var(--line);
     cursor: pointer;
     font-size: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s;
     z-index: 5;
   }
   .wishlist-btn:hover { border-color: var(--red); }
   .wishlist-btn.active { background: #FEE2E2; border-color: var(--red); }
   .wishlist-count {
     background: var(--red);
     color: white;
     border-radius: 50%;
     width: 18px;
     height: 18px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 0.65rem;
     margin-left: 4px;
   }
   
   /* ===========================================================
      ENHANCEMENT: ADMIN STAT CARDS
      =========================================================== */
   .stat-cards-row {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 16px;
     margin-bottom: 32px;
   }
   @media (max-width: 800px) { .stat-cards-row { grid-template-columns: repeat(2, 1fr); } }
   .stat-card {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 12px;
     padding: 20px;
     display: flex;
     align-items: center;
     gap: 14px;
   }
   .stat-card .stat-icon {
     width: 48px;
     height: 48px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
     flex-shrink: 0;
   }
   .stat-card .stat-icon.blue { background: #DBEAFE; }
   .stat-card .stat-icon.amber { background: #FDF3E2; }
   .stat-card .stat-icon.green { background: #E4F3EA; }
   .stat-card .stat-icon.red { background: #FEE2E2; }
   .stat-card .stat-value {
     font-family: var(--display);
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 1;
   }
   .stat-card .stat-label {
     font-size: 0.78rem;
     color: var(--slate-light);
     font-family: var(--mono);
   }
   
   /* ===========================================================
      ENHANCEMENT: ADMIN ENHANCEMENTS
      =========================================================== */
   .admin-toolbar {
     display: flex;
     gap: 12px;
     margin-bottom: 20px;
     flex-wrap: wrap;
     align-items: center;
   }
   .admin-search {
     flex: 1;
     min-width: 200px;
     padding: 10px 14px;
     border: 1px solid var(--line);
     border-radius: 8px;
     font-size: 0.9rem;
   }
   .export-btn {
     background: var(--green);
     color: white;
     border: none;
     padding: 10px 16px;
     border-radius: 8px;
     font-weight: 600;
     font-size: 0.88rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 6px;
   }
   .export-btn:hover { opacity: 0.9; }
   .quick-btn {
     padding: 4px 10px;
     border-radius: 6px;
     font-size: 0.75rem;
     font-weight: 600;
     border: 1px solid var(--line);
     background: var(--paper);
     cursor: pointer;
     transition: all 0.15s;
   }
   .quick-btn:hover { opacity: 0.85; }
   .quick-btn.ready { background: var(--green); color: white; border-color: var(--green); }
   .quick-btn.delivered { background: var(--blue); color: white; border-color: var(--blue); }
   .expandable-row { cursor: pointer; }
   .expandable-content {
     display: none;
     padding: 16px;
     background: var(--paper-dim);
     border-radius: 8px;
     margin: 8px 0;
   }
   .expandable-content.open { display: block; }
   .expandable-content .detail-row {
     display: flex;
     justify-content: space-between;
     padding: 6px 0;
     font-size: 0.88rem;
   }
   .expandable-content .detail-row span { color: var(--slate-light); }
   .expandable-content .detail-row strong { font-weight: 500; }
   
   /* ===========================================================
      ENHANCEMENT: BADGE VARIANTS
      =========================================================== */
   .badge-in-stock { background: #E4F3EA; color: var(--green); }
   .badge-out-stock { background: #FBE2E1; color: var(--red); }
   .badge-featured { background: var(--ink); color: var(--paper); }
   .badge-warrantied { background: var(--paper-dim); color: var(--ink); border: 1px solid var(--line); }
   
   /* ===========================================================
      ENHANCEMENT: CTA BANNER
      =========================================================== */
   .cta-banner {
     background: var(--ink);
     color: var(--paper);
     border-radius: 0;
     border-top: 3px solid var(--red);
     padding: 40px 36px;
     text-align: center;
     position: relative;
     overflow: hidden;
   }
   .cta-banner .cta-content { position: relative; z-index: 1; }
   .cta-banner h2 { color: var(--paper); margin-bottom: 12px; }
   .cta-banner p { color: #B7B7B1; margin-bottom: 24px; }
   .cta-banner .btn { background: var(--green); color: var(--ink); font-weight: 700; padding: 14px 32px; border-radius: var(--radius); }
   .cta-banner .btn:hover { background: #12943F; color: var(--paper); }
   
   /* ===========================================================
      ENHANCEMENT: BRAND STRIP
      =========================================================== */
   .brand-strip {
     display: flex;
     flex-wrap: wrap;
     gap: 32px;
     justify-content: center;
     align-items: center;
     padding: 30px 0;
   }
   .brand-name {
     font-family: var(--mono);
     font-size: 0.85rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: var(--slate);
     opacity: 0.7;
     transition: opacity 0.2s;
     padding: 0 26px;
     border-right: 1px solid var(--line);
   }
   .brand-name:hover { opacity: 1; color: var(--ink); }
   
   /* ===========================================================
      ENHANCEMENT: LOADING OVERLAY
      =========================================================== */
   .loading-overlay {
     position: fixed;
     inset: 0;
     background: rgba(247,244,236,0.8);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 3000;
     flex-direction: column;
     gap: 16px;
   }
   .loading-overlay.open { display: flex; }
   .loading-overlay .spinner {
     width: 48px;
     height: 48px;
     border: 4px solid var(--line);
     border-top-color: var(--amber);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   /* ===========================================================
      ENHANCEMENT: CHECKOUT FORM
      =========================================================== */
   .checkout-form { display: flex; flex-direction: column; gap: 14px; }
   .checkout-form input, .checkout-form select {
     padding: 12px 14px;
     border: 1px solid var(--line);
     border-radius: 8px;
     font-size: 0.95rem;
     font-family: var(--body);
   }
   .checkout-form input:focus, .checkout-form select:focus {
     border-color: var(--amber);
     outline: none;
   }
   
   /* ===========================================================
      ENHANCEMENT: ANIMATIONS
      =========================================================== */
   @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
   @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
   @keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
   .animate-fadeIn { animation: fadeIn 0.4s ease-out; }
   .animate-slideUp { animation: slideUp 0.4s ease-out; }
   .animate-slideInRight { animation: slideInRight 0.3s ease-out; }
   .wizard-enter { animation: fadeInUp 0.3s ease-out; }
   
   /* ===========================================================
      ENHANCEMENT: PRINT STYLES (track page)
      =========================================================== */
   @media print {
     .nav, .footer, .back-to-top, .menu-toggle, .mobile-menu, .menu-backdrop,
     .theme-toggle, .no-print { display: none !important; }
     body { background: white; color: black; }
     .ticket { border: 2px solid #333; }
     .wizard-card { box-shadow: none; border: 1px solid #ccc; }
   }
/* ===========================================================
   V4.1 REFINEMENTS — visual polish, depth, micro-interactions
   Enhances the bench aesthetic without changing the core design
   =========================================================== */

/* ---------- refined root variables ---------- */
:root {
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-bench: 0 0 0 1px rgba(255,255,255,0.03), 0 20px 60px -20px rgba(0,0,0,0.5);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- hero: deeper atmosphere ---------- */
.hero {
  background: #050505;
  border-bottom: 3px solid var(--red);
}
.hero::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 1;
  mask-image: radial-gradient(ellipse at 72% 28%, black 5%, transparent 70%);
}
.hero h1 {
  text-shadow: 0 0 60px rgba(227,52,47,0.08);
}
.hero h1 .fault {
  position: relative;
}
.hero h1 .fault::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--red);
  box-shadow: 0 0 12px rgba(227,52,47,0.5);
  animation: faultLine 3s ease-in-out infinite;
}
@keyframes faultLine {
  0%, 100% { opacity: 1; transform: scaleX(1); }
  50% { opacity: 0.5; transform: scaleX(0.92); }
}
.bench-status {
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(4px);
  transition: border-color 0.3s;
}
.bench-status:hover { border-color: var(--green); }
.bench-led { transition: all 0.3s; }

/* ---------- choice cards: refined hover with accent line ---------- */
.choice-card {
  position: relative;
  transition: background 0.15s var(--ease-out), padding-left 0.2s var(--ease-out);
}
.choice-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--green);
  transition: width 0.2s var(--ease-out);
}
.choice-card:hover::before { width: 3px; }
.choice-card:hover { background: #0F0F0F; padding-left: 26px; }
.choice-card .go {
  transition: transform 0.2s var(--ease-out);
}
.choice-card:hover .go { transform: translateX(6px); }

/* ---------- readout panel: subtle inner glow ---------- */
.readout-panel {
  background: rgba(255,255,255,0.015);
  backdrop-filter: blur(2px);
  position: relative;
}
.readout-panel::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0.4;
}

/* ---------- 3D phone: refined shadow + better float chips ---------- */
.phone3d {
  box-shadow:
    0 50px 80px -25px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 0 0 1.5px rgba(255,255,255,0.06);
}
.float-chip {
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5)) drop-shadow(0 0 6px rgba(22,176,84,0.15));
}

/* ---------- module grid: refined hover + accent borders ---------- */
.module-card {
  position: relative;
  transition: background 0.2s var(--ease-out);
}
.module-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.module-card:hover::after { transform: scaleX(1); }
.module-card:hover { background: #0F0F0F; }
.module-card h3 { transition: color 0.2s; }
.module-card:hover h3 { color: var(--paper); }
.module-tag { transition: color 0.2s; }
.module-card:hover .module-tag { color: var(--green); }

/* ---------- ticker bar: refined ---------- */
.ticker-bar {
  background: #050505;
}
.ticker-item {
  transition: color 0.2s;
}
.ticker-item strong {
  text-shadow: 0 0 8px rgba(22,176,84,0.3);
}

/* ---------- circuit timeline: animated connecting line + better nodes ---------- */
.circuit-timeline::before {
  background: repeating-linear-gradient(90deg, var(--green) 0 6px, transparent 6px 12px);
  animation: circuitFlow 4s linear infinite;
}
@keyframes circuitFlow {
  from { background-position: 0 0; }
  to { background-position: 24px 0; }
}
.circuit-node {
  transition: all 0.3s var(--ease-spring);
  box-shadow: 0 0 0 0 rgba(22,176,84,0);
}
.circuit-step:hover .circuit-node {
  box-shadow: 0 0 0 6px rgba(22,176,84,0.15);
  transform: scale(1.08);
}
.circuit-step h4 { transition: color 0.2s; }
.circuit-step:hover h4 { color: var(--red); }

/* ---------- old way strip: refined ---------- */
.old-way-strip {
  background: var(--paper-dim);
  padding: 8px 16px 8px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: 3px solid var(--red);
}

/* ---------- trust strip: refined dots ---------- */
.trust span::before {
  box-shadow: 0 0 6px rgba(22,176,84,0.4);
}

/* ---------- brand marquee: refined ---------- */
.brand-name {
  transition: opacity 0.2s, color 0.2s, transform 0.2s;
}
.brand-name:hover {
  opacity: 1;
  color: var(--ink);
  transform: translateY(-2px);
}

/* ---------- section heads: better rhythm ---------- */
.section { padding: 72px 0; }
.section-head { margin-bottom: 44px; }
.section-head h2 {
  max-width: 680px;
  margin-top: 8px;
}
.section-head p {
  max-width: 560px;
  margin-top: 10px;
}

/* ---------- buttons: tactile press states ---------- */
.btn, .nav-cta, .checkout-btn {
  transition: all 0.15s var(--ease-out);
  position: relative;
}
.btn:active, .nav-cta:active, .checkout-btn:active {
  transform: translateY(1px);
}
.btn-primary {
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--shadow-sm);
}
.btn-primary:hover {
  box-shadow: 0 2px 0 rgba(255,255,255,0.05) inset, var(--shadow-md);
}
.nav-cta {
  box-shadow: var(--shadow-sm);
  transition: all 0.15s var(--ease-out);
}
.nav-cta:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.nav-cta:active { transform: translateY(0); }

/* ---------- product cards: refined hover ---------- */
.product-card {
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.2s;
  border-radius: var(--radius-lg);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--ink);
}
.product-card:hover .product-price {
  color: var(--red);
}
.product-price { transition: color 0.2s; }

/* ---------- testimonial cards: refined ---------- */
.testimonial-card {
  transition: border-color 0.2s, transform 0.2s var(--ease-out);
}
.testimonial-card:hover {
  border-left-color: var(--red);
  border-left-width: 4px;
  transform: translateY(-2px);
}
.testimonial-rating::before { letter-spacing: 0.06em; }

/* ---------- FAQ: refined ---------- */
.faq-item {
  transition: background 0.2s;
}
.faq-item:hover { background: var(--paper-dim); }
.faq-item.open { background: var(--paper-dim); }
.faq-question { transition: color 0.15s; }
.faq-question:hover { color: var(--red); }
.faq-question::before { transition: transform 0.2s; }
.faq-item.open .faq-question::before { transform: rotate(90deg); color: var(--red); }

/* ---------- CTA banner: refined with scanline effect ---------- */
.cta-banner {
  background: #050505;
  position: relative;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(255,255,255,0.01) 2px,
    rgba(255,255,255,0.01) 4px
  );
  pointer-events: none;
}
.cta-banner::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0.5;
}
.cta-banner .btn {
  transition: all 0.2s var(--ease-out);
  box-shadow: 0 0 0 0 rgba(22,176,84,0);
}
.cta-banner .btn:hover {
  box-shadow: 0 0 20px rgba(22,176,84,0.3);
  transform: translateY(-2px);
}

/* ---------- phone frame: refined ---------- */
.phone-frame {
  box-shadow: 0 24px 60px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.05);
  transition: transform 0.3s var(--ease-out);
}
.phone-frame:hover {
  transform: translateY(-4px);
}

/* ---------- footer: refined ---------- */
.footer {
  border-top: 3px solid var(--red);
  background: #050505;
}
.footer h5 {
  letter-spacing: 0.04em;
}
.footer .nav-mark {
  transition: border-color 0.2s, color 0.2s;
}
.footer h5:hover .nav-mark {
  border-color: var(--green);
  color: var(--green);
}

/* ---------- nav: refined sticky behavior ---------- */
.nav {
  transition: box-shadow 0.3s, background 0.3s;
  box-shadow: 0 0 0 transparent;
}
.nav.scrolled {
  box-shadow: 0 1px 0 var(--line), 0 4px 20px rgba(0,0,0,0.06);
}
.nav-mark {
  transition: border-color 0.2s, color 0.2s;
}
.logo:hover .nav-mark {
  border-color: var(--red);
  color: var(--red);
}
.nav-links a {
  position: relative;
  transition: color 0.15s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* ---------- topbar: refined ---------- */
.topbar {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar a {
  transition: color 0.2s;
}
.topbar a:hover { color: var(--green); }

/* ---------- option tiles: refined selection ---------- */
.option-tile {
  transition: all 0.15s var(--ease-out);
  cursor: pointer;
}
.option-tile:hover {
  border-color: var(--red);
  transform: translateY(-1px);
}
.option-tile.selected {
  border-color: var(--red);
  background: rgba(227,52,47,0.06);
  box-shadow: inset 0 0 0 1px var(--red);
}

/* ---------- chips: refined ---------- */
.chip {
  transition: all 0.15s var(--ease-out);
  cursor: pointer;
}
.chip:hover {
  border-color: var(--red);
}
.chip.selected {
  border-color: var(--red);
  background: rgba(227,52,47,0.06);
  color: var(--red);
  font-weight: 600;
}

/* ---------- admin: refined ---------- */
.stat-card {
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
  border-radius: var(--radius-lg);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.quick-btn {
  transition: all 0.15s var(--ease-out);
}
.quick-btn:active { transform: translateY(1px); }
.export-btn {
  transition: all 0.15s var(--ease-out);
}
.export-btn:active { transform: translateY(1px); }

/* ---------- modal: refined ---------- */
.modal {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.modal-overlay {
  backdrop-filter: blur(4px);
}

/* ---------- ticket: refined ---------- */
.ticket {
  transition: border-color 0.2s;
  border-radius: var(--radius-lg);
}
.ticket:hover {
  border-color: var(--ink);
}

/* ---------- status pills: refined ---------- */
.status-pill {
  transition: all 0.15s;
  border-radius: var(--radius);
}
.status-pill.received { border-left: 3px solid var(--slate-light); }
.status-pill.diagnosed { border-left: 3px solid #2E5AA8; }
.status-pill.repairing { border-left: 3px solid var(--amber-dark); }
.status-pill.ready { border-left: 3px solid var(--green); }
.status-pill.delivered { border-left: 3px solid var(--blue); }

/* ---------- skeleton: refined shimmer ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--paper-dim) 25%, #F5F5F0  50%, var(--paper-dim) 75%);
}

/* ---------- back-to-top: refined ---------- */
.back-to-top {
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: all 0.3s var(--ease-spring);
}
.back-to-top:hover {
  background: var(--red);
  color: var(--paper);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ---------- toast: refined ---------- */
.toast {
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
}
.toast.success { background: rgba(228,243,234,0.95); border-left: 3px solid var(--green); }
.toast.error { background: rgba(254,226,226,0.95); border-left: 3px solid var(--red); }
.toast.info { background: rgba(219,234,254,0.95); border-left: 3px solid var(--blue); }

/* ---------- scroll-triggered reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- DARK MODE: fixed to match bench aesthetic ---------- */

/* ---------- responsive refinements ---------- */
@media (max-width: 760px) {
  .section { padding: 52px 0; }
  .section-head { margin-bottom: 32px; }
  .hero { padding: 40px 0 60px; }
  .choice-card { padding: 18px 14px; }
  .module-card { padding: 20px 18px; }
}

/* ---------- selection color ---------- */
::selection {
  background: var(--red);
  color: var(--paper);
}

/* ---------- scrollbar: refined ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--paper-dim); }
::-webkit-scrollbar-thumb { background: var(--slate-light); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--slate); }

/* ===========================================================
   V5 — CONTENT SECTIONS (the "finished product" layer)
   =========================================================== */

/* ---------- WHY APEX cards ---------- */
.why-apex { background: var(--paper-dim); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.why-card {
  background: var(--paper);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.2s var(--ease-out);
}
.why-card:hover { background: var(--paper-dim); }
.why-icon {
  width: 48px; height: 48px;
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  color: var(--red);
  transition: all 0.2s var(--ease-out);
}
.why-card:hover .why-icon {
  background: var(--ink);
  color: var(--green);
  border-color: var(--ink);
}
.why-card h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
}
.why-card p {
  font-size: 0.88rem;
  color: var(--slate);
  line-height: 1.55;
}
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- PRODUCT PREVIEW cards ---------- */
.product-preview-section { padding-top: 64px; }
.view-all-link {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--red);
  font-weight: 600;
  transition: transform 0.2s var(--ease-out);
  white-space: nowrap;
}
.view-all-link:hover { transform: translateX(4px); }
.preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.preview-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.25s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.preview-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--ink);
}
.preview-img {
  height: 160px;
  background: var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
}
.preview-badge {
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 2px;
}
.preview-badge.in-stock { background: #E4F3EA; color: var(--green); }
.preview-badge.warrantied { background: var(--ink); color: var(--paper); }
.preview-badge.out-stock { background: #FBE2E1; color: var(--red); }
.preview-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.preview-body h4 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.preview-spec {
  font-size: 0.8rem;
  color: var(--slate-light);
  margin-bottom: 12px;
  flex: 1;
}
.preview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.preview-price {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--red);
}
.preview-stock {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--slate-light);
  text-transform: uppercase;
}
@media (max-width: 900px) { .preview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .preview-grid { grid-template-columns: 1fr; } }

/* ---------- TRACK INTERACTIVE ---------- */
.track-section { background: var(--paper-dim); }
.track-interactive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.track-input-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.track-input-row input {
  flex: 1;
  padding: 14px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: var(--body);
  background: var(--paper);
  transition: border-color 0.2s;
}
.track-input-row input:focus { border-color: var(--red); outline: none; }
.track-demo-ticket { position: relative; }
.track-demo-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 10px;
  letter-spacing: 0.06em;
}
.track-hint {
  font-size: 0.82rem;
  color: var(--slate);
  margin-top: 14px;
}
@media (max-width: 760px) { .track-interactive { grid-template-columns: 1fr; } }

/* ---------- GOOGLE RATING BADGE ---------- */
.google-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 10px 18px;
  border-radius: var(--radius);
}
.google-score {
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
}
.google-stars { color: #E3342F; font-size: 0.9rem; letter-spacing: 1px; }
.google-source {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate-light);
}

/* ---------- LOCATION SECTION ---------- */
/* No background override — lets the page's blueprint grid show through */
.location-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.location-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.location-block h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-light);
  margin-bottom: 10px;
  font-weight: 600;
}
.location-block h5 .icon { color: var(--red); }
.location-block p { font-size: 0.95rem; line-height: 1.6; color: var(--ink); margin-bottom: 6px; }
.directions-link {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--red);
  font-weight: 600;
  transition: transform 0.2s var(--ease-out);
  display: inline-block;
  margin-top: 4px;
}
.directions-link:hover { transform: translateX(4px); }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td {
  padding: 7px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--line);
}
.hours-table td:first-child { color: var(--slate); font-family: var(--mono); font-size: 0.82rem; }
.hours-table td:last-child { text-align: right; color: var(--ink); font-weight: 500; }
.hours-table tr:last-child td { border-bottom: none; }
.hours-table .closed td { color: var(--slate-light) !important; }
.hours-table .closed td:last-child { color: var(--red) !important; }
.contact-wa {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--green);
  font-weight: 600;
  transition: transform 0.2s;
  display: inline-block;
  margin-top: 4px;
}
.contact-wa:hover { transform: translateX(4px); }
.location-map {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-height: 320px;
  overflow: hidden;
  position: relative;
}
.map-placeholder {
  width: 100%; height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  background-color: var(--paper-dim);
}
.map-pin {
  width: 56px; height: 56px;
  background: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  animation: mapBounce 3s ease-in-out infinite;
}
@keyframes mapBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.map-label {
  font-family: var(--display);
  font-size: 1rem;
  text-align: center;
  color: var(--ink);
  margin-top: 8px;
}
.map-coords {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--slate-light);
}
@media (max-width: 760px) { .location-grid { grid-template-columns: 1fr; } }

/* ---------- FULL FOOTER ---------- */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 56px 0 40px;
}
.footer-brand p.footer-desc {
  font-size: 0.85rem;
  color: #8A8A85;
  line-height: 1.6;
  margin: 12px 0 18px;
  max-width: 280px;
}
.footer-social {
  display: flex;
  gap: 10px;
}
.social-link {
  width: 38px; height: 38px;
  border: 1px solid var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6A6A65;
  transition: all 0.2s var(--ease-out);
  border-radius: var(--radius);
}
.social-link:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-2px);
}
.footer-col h6 {
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slate-light);
  margin-bottom: 14px;
  font-weight: 600;
}
.footer-col a {
  display: block;
  font-size: 0.88rem;
  color: #9A9A95;
  padding: 5px 0;
  transition: color 0.15s, transform 0.15s;
}
.footer-col a:hover { color: var(--paper); transform: translateX(4px); }
.footer-col p { font-size: 0.88rem; color: #9A9A95; padding: 3px 0; }
.footer-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #7A7A75;
}
.footer-status .bench-led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
}
.footer-status .bench-led.off { background: var(--red); box-shadow: 0 0 6px var(--red); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 0;
  border-top: 1px solid var(--ink-soft);
  margin-top: 20px;
}
.footer-bottom small { color: #5A5A55; font-size: 0.78rem; }
.footer-credit { font-family: var(--mono); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- DARK MODE: new sections ---------- */

/* ===========================================================
   V5.1 — MOBILE CENTERING (≤ 760px)
   =========================================================== */
@media (max-width: 760px) {
  /* Section heads */
  .section-head { text-align: center; }
  .section-head h2 { margin-left: auto; margin-right: auto; }
  .section-head p { margin-left: auto; margin-right: auto; }
  .section-head[style*="flex"] { flex-direction: column; gap: 12px; align-items: center; }
  .section-head[style*="flex"] .view-all-link { margin-top: 4px; }

  /* Trust strip */
  .trust .container { justify-content: center; text-align: center; }
  .trust span { justify-content: center; }

  /* Hero */
  .hero-main { text-align: center; }
  .hero-kicker, .hero h1, .hero p.lead, .bench-status { margin-left: auto; margin-right: auto; }

  /* Choice cards */
  .choice-grid { max-width: 400px; margin-left: auto; margin-right: auto; }
  .choice-card { text-align: left; }

  /* Module cards */
  .module-card { text-align: center; align-items: center; }
  .module-tag { justify-content: center; }
  .module-stat { text-align: center; }

  /* Circuit timeline */
  .circuit-step { text-align: center; }
  .circuit-node { margin-left: auto; margin-right: auto; }

  /* Why cards */
  .why-card { text-align: center; align-items: center; }
  .why-icon { margin-left: auto; margin-right: auto; }

  /* Product preview */
  .preview-body { text-align: center; }
  .preview-footer { justify-content: center; }

  /* Track interactive */
  .track-interactive { grid-template-columns: 1fr; text-align: center; }
  .track-input-row { justify-content: center; max-width: 420px; margin: 0 auto 16px; }
  .track-demo-label, .track-hint { text-align: center; }
  .track-demo-ticket { max-width: 380px; margin: 0 auto; }

  /* Google rating */
  .google-rating { margin-left: auto; margin-right: auto; }

  /* Testimonials */
  .testimonial-card { text-align: center; }

  /* FAQ */
  .faq-list { margin: 0 auto; }
  .faq-question { justify-content: center; text-align: center; }
  .faq-answer { text-align: center; padding-left: 22px; }

  /* Location */
  .location-grid { grid-template-columns: 1fr; text-align: center; }
  .location-info { align-items: center; }
  .location-block { text-align: center; }
  .location-block h5 { justify-content: center; }
  .hours-table td { text-align: center; }
  .directions-link, .contact-wa { display: inline-block; }
  .location-map { max-width: 420px; margin: 0 auto; }

  /* Footer */
  .footer-grid { text-align: center; justify-content: center; gap: 28px; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-brand p.footer-desc { margin-left: auto; margin-right: auto; }
  .footer-social { justify-content: center; }
  .footer-col h6 { text-align: center; }
  .footer-col a, .footer-col p { text-align: center; }
  .footer-status { justify-content: center; }
  .footer-bottom { justify-content: center; text-align: center; }

  /* Old way strip */
  .old-way-strip { display: inline-flex; margin: 0 auto 28px; }
  .section:has(.old-way-strip) { text-align: center; }

  /* Readout panel */
  .readout-panel { max-width: 240px; margin-left: auto; margin-right: auto; }
}

/* ===========================================================
   V5.2 — SVG ICON STYLING (no emoji, hollowed-out line icons)
   =========================================================== */

/* Theme toggle icon */
.theme-toggle .icon { stroke: var(--ink); }

/* Menu toggle icon */
.menu-toggle .icon { stroke: var(--ink); }

/* Menu close icon */
.menu-close .icon { stroke: var(--ink); }

/* Choice card go arrow */
.choice-card .go .icon {
  stroke: var(--red);
  transition: stroke 0.2s;
}
.choice-card:hover .go .icon { stroke: var(--green); }

/* Product preview icons */
.preview-icon {
  stroke: var(--slate-light);
  transition: stroke 0.2s var(--ease-out);
}
.preview-card:hover .preview-icon {
  stroke: var(--red);
}
.preview-img { transition: background 0.2s; }
.preview-card:hover .preview-img { background: var(--paper-dim); }

/* Back to top icon */
.back-to-top .icon { stroke: var(--paper); }
.back-to-top:hover .icon { stroke: var(--paper); }

/* View all link arrow */
.view-all-link .icon { stroke: var(--red); transition: transform 0.2s var(--ease-out); }
.view-all-link:hover .icon { transform: translateX(4px); }

/* Directions link arrow */
.directions-link .icon { stroke: var(--red); transition: transform 0.2s var(--ease-out); }
.directions-link:hover .icon { transform: translateX(4px); }

/* Contact WhatsApp icon */
.contact-wa .icon { stroke: var(--green); }

/* Social link icons */
.social-link .icon { stroke: currentColor; }

/* Google rating stars */
.google-stars .icon { stroke: var(--red); display: inline-block; vertical-align: baseline; }

/* Ticker star */
.ticker-item .icon { stroke: var(--green); display: inline-block; vertical-align: baseline; }

/* Track hint arrows */
.track-hint .icon { stroke: var(--slate-light); opacity: 0.6; display: inline-block; vertical-align: middle; }

/* Footer social icons */
.footer-social .social-link .icon { transition: stroke 0.2s; }
.social-link:hover .icon { stroke: var(--red); }

/* Inline arrow icons in links */
a .icon[width="14"] { display: inline-block; vertical-align: middle; }

/* Mobile: icon alignment */
@media (max-width: 760px) {
  .preview-icon { width: 40px; height: 40px; }
}

/* ===========================================================
   V5.3 — EXTRA ENHANCEMENTS
   =========================================================== */

/* Subtle grain texture overlay for depth (barely visible) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
}

/* Hero bench status: glow effect when open */
.bench-status {
  transition: all 0.3s var(--ease-out);
}
.bench-status:not(:has(.bench-led.off)) {
  box-shadow: 0 0 24px -8px rgba(22, 176, 84, 0.25);
}

/* Live queue readout: subtle blink when it updates */
#queueReadout {
  transition: opacity 0.3s;
}

/* Module cards: add a faint scanline on hover */
.module-card {
  position: relative;
  overflow: hidden;
}
.module-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,0.008) 3px,
    rgba(255,255,255,0.008) 4px
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.module-card:hover::before { opacity: 1; }

/* Hero lead text: refine */
.hero p.lead {
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Section headings: add a decorative line under eyebrow */
.eyebrow {
  display: inline-block;
  position: relative;
  margin-bottom: 4px;
}
.eyebrow::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--green);
  margin: 10px auto 0;
  opacity: 0.6;
}

/* Product preview: add "WARRANTIED" tag style refinement */
.preview-badge.warrantied {
  letter-spacing: 0.04em;
}

/* Footer: add a subtle top scanline */
.footer::after {
  content: "";
  position: absolute;
  top: 3px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,52,47,0.3), transparent);
}

/* Why cards: add number prefix like module cards */
.why-card { position: relative; }
.why-card .why-num {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--slate-light);
  letter-spacing: 0.1em;
  position: absolute;
  top: 14px;
  right: 18px;
}

/* Choice cards: refined test-id alignment */
.choice-card .test-id {
  transition: border-color 0.2s, color 0.2s;
}
.choice-card:hover .test-id {
  border-color: var(--green);
}

/* Nav: add a subtle bottom border accent on scroll */
.nav.scrolled {
  border-bottom-color: var(--ink);
}

/* CTA banner: add animated edge */
.cta-banner {
  position: relative;
}
.cta-banner::before {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: 0.4;
}

/* Track demo ticket: add a subtle pulse to the status */
.ticket-status.repairing {
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Map pin: refine */
.map-pin {
  transition: transform 0.3s var(--ease-spring);
}
.location-map:hover .map-pin {
  transform: scale(1.15);
}