/* ============ THEME TOKENS (mirror BRAND_COLORS exactly) ============ */
:root{
  --bg:#F4F7FD;
  --panel:rgba(255,255,255,.68);
  --panel-solid:#FFFFFF;
  --line:rgba(37,99,235,.18);
  --text:#0F1E33;
  --muted:#5B6B84;
  --green:#158A46; --cyan:#0E7FA8; --purple:#7C3AED; --blue:#2563EB;
  --h1-a:#0E7FA8; --h1-b:#2563EB; --h1-c:#7C3AED;
  --glow-blue:rgba(37,99,235,.5);
  --shadow-lg:0 18px 44px -18px rgba(15,30,50,.28);
}
html[data-theme="dark"]{
  --bg:#030712;
  --panel:rgba(9,17,34,.62);
  --panel-solid:#0A1222;
  --line:rgba(56,189,248,.16);
  --text:#F2F6FC;
  --muted:#94A3BA;
  --green:#3DDC63; --cyan:#22D3EE; --purple:#B15CFF; --blue:#3B82F6;
  --h1-a:#22D3EE; --h1-b:#3B82F6; --h1-c:#B15CFF;
  --glow-blue:rgba(59,130,246,.6);
  --shadow-lg:0 18px 44px -18px rgba(0,0,0,.6);
}

/* ============ BASE ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--text); background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased; }
::selection{ background:#2563EB4D; }
a{ color:inherit; text-decoration:none; }

/* ============ UTILITIES (for preserved asset lines) ============ */
.flex{ display:flex; } .flex-col{ flex-direction:column; } .items-center{ align-items:center; }
.justify-center{ justify-content:center; } .justify-between{ justify-content:space-between; }
.mb-6{ margin-bottom:1.5rem; } .mb-5{ margin-bottom:1.25rem; } .mb-4{ margin-bottom:1rem; }
.w-20{ width:80px; } .h-20{ height:80px; } .w-11{ width:44px; } .h-11{ height:44px; }
.grid2{ display:grid; gap:1rem; } @media (min-width:640px){ .grid2{ grid-template-columns:1fr 1fr; } }

/* ============ BACKGROUND LAYER ============ */
#bg-layer{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
body::before, body::after{ content:""; position:fixed; width:42vw; height:42vw; border-radius:50%; filter:blur(90px); opacity:.75; z-index:-1; pointer-events:none; transition:background 1.2s ease; will-change:transform; }
body::before{ top:-8vw; left:-6vw; background:radial-gradient(circle,var(--h1-b) 0%, transparent 62%); transform:translate3d(0, calc(var(--sy, 0) * 0.05), 0); }
body::after{ bottom:-14vw; right:-8vw; background:radial-gradient(circle,var(--h1-c) 0%, transparent 62%); transform:translate3d(0, calc(var(--sy, 0) * -0.035), 0); }
html[data-theme="dark"] body::before{ opacity:.55; }
html[data-theme="dark"] body::after{ opacity:.5; }

.repairz-circuit{ position:absolute; inset:0; animation:circuitDrift 48s linear infinite; }
.repairz-particle{ position:absolute; border-radius:9999px; animation-name:particleFloat; animation-timing-function:linear; animation-iteration-count:infinite; }
.repairz-scan{ position:absolute; left:0; right:0; height:12rem; animation:scanSweep 11s ease-in-out infinite; }
@keyframes circuitDrift{ from{ background-position:0 0; } to{ background-position:240px 240px; } }
@keyframes particleFloat{
  0%{ transform:translateY(0); opacity:0; }
  12%{ opacity:.9; }
  88%{ opacity:.9; }
  100%{ transform:translateY(-105vh); opacity:0; }
}
@keyframes scanSweep{ 0%{ transform:translateY(-40vh); } 100%{ transform:translateY(120vh); } }

/* ============ STICKY NAV ============ */
.repairz-sticky-nav{ position:sticky; top:0; z-index:40; background:var(--panel); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--line); transition:box-shadow .25s ease, border-color .25s ease; }
.repairz-sticky-nav.is-scrolled{ box-shadow:0 8px 30px -12px rgba(0,0,0,.45); border-bottom-color:var(--glow-blue); }
.nav-inner{ max-width:72rem; margin-inline:auto; padding:.9rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; transition:padding .25s ease, background .3s ease; }
.repairz-sticky-nav.is-scrolled .nav-inner{ padding-top:.6rem; padding-bottom:.6rem; }
.brand-block{ display:flex; align-items:center; gap:.75rem; }
a.brand-block{ text-decoration:none; color:inherit; }
.nav-right{ display:flex; align-items:center; gap:.75rem; flex-wrap:nowrap; }
.wordmark{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:1.25rem; letter-spacing:.14em; text-transform:uppercase; transition:font-size .25s ease, color .3s ease; }
.repairz-sticky-nav.is-scrolled .wordmark{ font-size:1.05rem; }
.wordmark em{ font-style:normal; color:#2563EB; }
html[data-theme="dark"] .wordmark{ color:#DDEBFF; text-shadow:0 0 14px var(--glow-blue); }
html[data-theme="dark"] .wordmark em{ color:#5B9CFF; text-shadow:0 0 12px rgba(91,156,255,.7); }
.repairz-sticky-nav .nav-logo{ transition:width .25s ease, height .25s ease; filter:saturate(.9) drop-shadow(0 0 8px #2563EB88); }
html[data-theme="dark"] .repairz-sticky-nav .nav-logo{ width:auto !important; }
.repairz-sticky-nav.is-scrolled .nav-logo{ width:2.2rem; height:2.2rem; }

/* ============ THEME TOGGLE / ICONS ============ */
#theme-toggle{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:9999px; background:var(--panel); border:1px solid var(--line); color:var(--text); cursor:pointer; transition:border-color .25s ease, box-shadow .25s ease, transform .15s ease, background .3s ease; }
#theme-toggle:hover{ border-color:var(--cyan); box-shadow:0 0 20px -4px rgba(37,99,235,.45); }
#theme-toggle:active{ transform:scale(.92); }
#theme-toggle svg{ width:16px; height:16px; display:block; }

/* ============ MENU HAMBURGER ============ */
.menu-toggle{ width:44px; height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:9999px; background:var(--panel); border:1px solid var(--line); color:var(--text); cursor:pointer; padding:0; transition:border-color .25s ease, box-shadow .25s ease, transform .15s ease; }
.menu-toggle:hover{ border-color:var(--cyan); box-shadow:0 0 20px -4px rgba(37,99,235,.45); }
.menu-toggle:active{ transform:scale(.92); }
.menu-toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .25s ease, opacity .2s ease; }
.repairz-sticky-nav.menu-open .menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.repairz-sticky-nav.menu-open .menu-toggle span:nth-child(2){ opacity:0; }
.repairz-sticky-nav.menu-open .menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.site-menu{ position:absolute; top:100%; right:max(1.5rem, calc((100% - 72rem) / 2 + 1.5rem)); width:min(320px, calc(100% - 2rem)); max-height:calc(100vh - 90px); overflow-y:auto; margin-top:.5rem; padding:.8rem; border-radius:18px; background:var(--panel-solid); border:1px solid var(--line); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 20px 44px -16px rgba(0,0,0,.45); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s; }
.repairz-sticky-nav.menu-open .site-menu{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .22s ease, transform .22s ease, visibility 0s; }
.site-menu a{ display:block; padding:.7rem .9rem; border-radius:10px; font-size:.95rem; font-weight:500; color:var(--text); text-decoration:none; transition:background .2s ease, color .2s ease; }
.site-menu a:hover, .site-menu a[aria-current="page"]{ background:rgba(37,99,235,.1); color:var(--blue); }
.site-menu a.menu-sub{ padding-left:1.6rem; font-size:.88rem; color:var(--muted); }
.site-menu a.menu-sub:hover, .site-menu a.menu-sub[aria-current="page"]{ color:var(--blue); }
.site-menu-label{ margin:.7rem .9rem .2rem; font-family:'Orbitron',sans-serif; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:#0E7FA8; }
html[data-theme="dark"] .site-menu-label{ color:#22D3EE; }
.site-menu a.menu-cta{ margin-top:.7rem; display:flex; justify-content:center; padding:.85rem 1.2rem; border-radius:9999px; font-family:'Orbitron',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.08em; color:#fff; background:#2563EB; }
.site-menu a.menu-cta:hover{ color:#fff; background:#1D4ED8; }
html[data-theme="dark"] .site-menu a.menu-cta{ background:linear-gradient(180deg,#3B82F6,#1D4ED8); }
@keyframes iconSpinIn { from { transform:rotate(-90deg) scale(0.5); opacity:0; } to { transform:rotate(0deg) scale(1); opacity:1; } }
.icon-spin{ animation:iconSpinIn .35s ease; }

/* ============ BUTTONS & LAYOUT ============ */
.btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.7rem; border-radius:9999px; font-family:'Orbitron',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.08em; cursor:pointer; text-align:center; transition:transform .15s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease; }
.btn:active{ transform:scale(.96); }
.btn-primary{ background:#2563EB; color:#fff; box-shadow:0 10px 28px -10px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover{ background:#1D4ED8; box-shadow:0 14px 34px -10px rgba(37,99,235,.75), inset 0 1px 0 rgba(255,255,255,.3); }
html[data-theme="dark"] .btn-primary{ background:linear-gradient(180deg,#3B82F6,#1D4ED8); box-shadow:0 0 28px -4px rgba(59,130,246,.6), inset 0 1px 0 rgba(255,255,255,.25); }
html[data-theme="dark"] .btn-primary:hover{ box-shadow:0 0 40px -2px rgba(59,130,246,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost{ background:var(--panel); border:1px solid var(--line); color:var(--text); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.btn-ghost:hover{ border-color:var(--cyan); box-shadow:0 0 24px -6px rgba(37,99,235,.35), inset 0 0 18px rgba(37,99,235,.06); }
.btn .ic{ width:.95rem; height:.95rem; }

.wrap{ max-width:72rem; margin-inline:auto; padding-inline:1.5rem; }
.section{ margin-top:4.5rem; }
section#services, section#steps-section, #trust-section, #secondlife, #faq-section, #contact{ scroll-margin-top:96px; }

/* ============ SECTION HEADS ============ */
.eyebrow{ display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; font-family:'Orbitron',sans-serif; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:#0E7FA8; }
html[data-theme="dark"] .eyebrow{ color:#22D3EE; }
.eyebrow::before, .eyebrow::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line)); }
.eyebrow::after{ background:linear-gradient(90deg,var(--line),transparent); }
h2.sec-title{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:clamp(1.7rem,3.4vw,2.5rem); letter-spacing:.06em; text-align:center; margin:0 0 .9rem; color:#16304F; }
html[data-theme="dark"] h2.sec-title{ color:#EAF2FF; text-shadow:0 0 22px rgba(37,99,235,.35); }
.sec-sub{ margin:0 auto 2.4rem; max-width:62ch; font-size:1.03rem; line-height:1.65; letter-spacing:.008em; color:var(--muted); text-align:center; }

/* ============ HERO ============ */
.hero{ position:relative; padding-top:4.5rem; padding-bottom:3.5rem; text-align:center; }
.boot-line{ font-family:'Orbitron',sans-serif; font-size:.72rem; letter-spacing:.18em; color:#0E7FA8; margin-bottom:1.6rem; min-height:1em; }
html[data-theme="dark"] .boot-line{ color:#3DDC63; text-shadow:0 0 10px rgba(61,220,99,.4); }
.caret{ animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.hero-title{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:clamp(2rem,4.6vw,3.3rem); line-height:1.12; letter-spacing:.02em; margin-bottom:1.4rem; background:linear-gradient(95deg,var(--h1-a) 5%,var(--h1-b) 48%,var(--h1-c) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; }
html[data-theme="dark"] .hero-title{ filter:drop-shadow(0 0 18px rgba(37,99,235,.4)); }
.hero-sub{ margin-inline:auto; max-width:64ch; font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.6; color:var(--muted); }
.hero-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:2.2rem; }

/* ============ CARD BASE (glass) ============ */
.glass-card{ position:relative; background:var(--panel); backdrop-filter:blur(16px) saturate(1.35); -webkit-backdrop-filter:blur(16px) saturate(1.35); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); }

/* ============ SERVICES ============ */
.service-card{ position:relative; display:flex; flex-direction:column; padding:1.4rem 1.6rem 1.6rem; transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease; will-change:transform; }
.service-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.85; transition:opacity .25s ease; background:radial-gradient(16rem circle at var(--gx,50%) var(--gy,35%), color-mix(in srgb, var(--cc) 22%, transparent), transparent 60%); }
.service-card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:.9; background:linear-gradient(120deg,var(--cc) 0%,transparent 34%,transparent 66%,var(--cc) 100%); -webkit-mask:linear-gradient(#000 0,#000) padding-box, linear-gradient(#000 0,#000); mask:linear-gradient(#000 0,#000) padding-box, linear-gradient(#000 0,#000) subtract; transition:opacity .3s ease; }
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg), 0 0 32px -8px var(--cc-glow, rgba(15,30,50,.2)); }
@media (hover:hover){
  .service-cell{ perspective:900px; }
  .service-card{ transform-style:preserve-3d; transition:transform .18s ease, box-shadow .18s ease; }
  .service-card:not(.is-tilting){ transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; }
}
.svc-header{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; transform:translateZ(0); }
.svc-img-wrap{ width:64px; height:64px; flex-shrink:0; border-radius:14px; overflow:hidden; background:#FFFFFF; border:1px solid var(--line); box-shadow:0 8px 22px -10px rgba(15,30,50,.35); transform:translateZ(26px); }
.svc-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-title{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.02em; margin:0 0 .3rem; color:#16304F; }
html[data-theme="dark"] .svc-title{ color:#EAF2FF; }
.svc-tagline{ margin:0 0 .35rem; font-family:'Space Grotesk',system-ui,sans-serif; font-weight:500; font-size:.78rem; letter-spacing:.04em; text-transform:none; color:var(--cc); }
.svc-divider{ height:1px; margin-bottom:1.1rem; background:linear-gradient(90deg,transparent,var(--cc),transparent); opacity:.55; transform:translateZ(8px); }
.price-list{ list-style:none; margin:0 0 1.2rem; padding:0; flex:1; transform:translateZ(6px); }
.price-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:.9rem; padding:.5rem .4rem; border-radius:8px; transition:background .2s ease, box-shadow .2s ease; }
.price-item:hover{ background:#FFFFFF10; box-shadow:inset 0 0 22px rgba(37,99,235,.06); }
html[data-theme="dark"] .price-item:hover{ background:#F2F6FC08; }
/* Price readability — dark theme : bright accents + per-card glow (was: dimmed by blue shadow) */
html[data-theme="dark"] .price-value{ color:var(--cc-bright); text-shadow:0 0 14px var(--cc-glow), 0 1px 2px rgba(0,0,0,.5); }
/* Price readability — light theme : darker accents for contrast on white glass */
html[data-theme="light"] .price-value{ color:var(--cc-bright); }
.price-label{ display:flex; align-items:flex-start; gap:.55rem; font-size:.9rem; line-height:1.45; color:var(--text); }
.price-label svg{ width:.85rem; height:.85rem; margin-top:.22rem; flex-shrink:0; color:var(--cc); }
.price-sub{ display:block; font-size:.72rem; color:var(--muted); margin-top:.1rem; }
.price-value{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:.95rem; white-space:nowrap; letter-spacing:.02em; color:var(--cc-bright,var(--cc)); text-shadow:0 0 14px rgba(37,99,235,.28); }
.svc-note{ display:flex; align-items:center; gap:.6rem; margin-top:auto; padding:.55rem .8rem; border-radius:10px; font-size:.74rem; color:var(--cc); background:#FFFFFF2E; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
html[data-theme="dark"] .svc-note{ background:#F2F6FC0A; }
.svc-note svg{ width:.8rem; height:.8rem; flex-shrink:0; opacity:.9; }
.svc-more{ display:flex; align-items:center; justify-content:center; gap:.45rem; margin-top:.9rem; padding:.65rem .9rem; border-radius:10px; font-size:.82rem; font-weight:600; color:var(--cc); border:1px solid var(--cc); transition:background .2s ease, color .2s ease; transform:translateZ(6px); }
.svc-more svg{ width:.85rem; height:.85rem; transition:transform .2s ease; }
.svc-more:hover{ background:var(--cc); color:#fff; }
.svc-more:hover svg{ transform:translateX(3px); }

/* ============ STEPS ============ */
.step-card{ position:relative; display:flex; flex-direction:column; gap:.7rem; padding:1.4rem 1.5rem; overflow:hidden; transform-style:preserve-3d; transition:transform .2s ease, box-shadow .2s ease; }
.step-num{ position:absolute; top:-.4rem; right:.6rem; font-family:'Orbitron',sans-serif; font-weight:800; font-size:4.4rem; line-height:1; color:#FFFFFF; opacity:.95; pointer-events:none; transform:translateZ(2px); }
html[data-theme="dark"] .step-num{ color:#F2F6FC; opacity:.13; }
.step-icon-wrap{ width:48px; height:48px; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#FFFFFF; border:1px solid var(--line); box-shadow:0 6px 18px -8px rgba(15,30,50,.3); transform:translateZ(24px); }
.step-icon-wrap img{ width:100%; height:100%; object-fit:contain; padding:.35rem; display:block; }
.step-title{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.04em; margin:0; color:#16304F; transform:translateZ(12px); }
html[data-theme="dark"] .step-title{ color:#EAF2FF; }
.step-text{ margin:0; font-size:.88rem; line-height:1.55; color:var(--muted); transform:translateZ(6px); }

/* ============ TRUST / SECOND LIFE / FAQ ============ */
.trust-item{ display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center; padding:1.2rem 1rem; margin:0; }
.trust-icon-wrap{ width:56px; height:56px; border-radius:9999px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#FFFFFF; border:1px solid var(--line); box-shadow:0 8px 20px -8px rgba(15,30,50,.25); transform:translateZ(14px); }
.trust-icon-wrap img{ width:100%; height:100%; object-fit:contain; padding:.3rem; display:block; }
.trust-label{ margin:0; font-size:.86rem; line-height:1.45; color:var(--text); transform:translateZ(8px); }
.trust-sub{ display:block; font-size:.72rem; color:var(--muted); }

.callout-secondlife{ position:relative; display:flex; align-items:center; gap:1rem; padding:1.3rem 1.6rem; border-radius:18px; background:var(--panel); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px dashed var(--line); max-width:72rem; margin-inline:auto; }
.callout-secondlife svg{ width:22px; height:22px; flex-shrink:0; color:#158A46; transform:translateZ(4px); }
html[data-theme="dark"] .callout-secondlife svg{ color:#3DDC63; filter:drop-shadow(0 0 8px rgba(61,220,99,.5)); }
.callout-text{ flex:1; margin:0; font-size:.92rem; line-height:1.55; color:var(--muted); transform:translateZ(4px); }
.callout-link{ white-space:nowrap; font-family:'Orbitron',sans-serif; font-size:.78rem; letter-spacing:.06em; color:#2563EB; transition:filter .2s ease, text-shadow .2s ease; transform:translateZ(10px); }
html[data-theme="dark"] .callout-link{ color:#6FC2FF; }
.callout-link:hover{ filter:brightness(1.12); text-shadow:0 0 14px rgba(37,99,235,.5); }

.faq-item{ overflow:hidden; margin-bottom:.8rem; border-radius:14px; background:var(--panel); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--line); transition:border-color .25s ease, box-shadow .25s ease; }
.faq-item.open{ border-color:#2563EB66; box-shadow:0 0 28px -10px rgba(37,99,235,.45), inset 0 0 24px rgba(37,99,235,.05); }
html[data-theme="dark"] .faq-item.open{ border-color:#B15CFF66; box-shadow:0 0 28px -10px rgba(177,92,255,.4), inset 0 0 24px rgba(177,92,255,.06); }
.faq-toggle{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; padding:.95rem 1.1rem; background:none; border:none; cursor:pointer; text-align:left; font-family:'Space Grotesk',sans-serif; font-size:.98rem; font-weight:600; color:var(--text); }
.faq-toggle svg{ width:18px; height:18px; flex-shrink:0; color:var(--muted); transition:transform .25s ease, color .25s ease; }
.faq-item.open .faq-toggle svg{ color:#2563EB; transform:rotate(180deg); }
html[data-theme="dark"] .faq-item.open .faq-toggle svg{ color:#B15CFF; }
.faq-answer{ margin:0; padding:0 1.2rem 1.05rem; font-size:.92rem; line-height:1.6; color:var(--muted); animation:faqIn .3s ease; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }

/* ============ CONTACT FORM ============ */
.contact-panel{ position:relative; padding:1.6rem 1.8rem 1.9rem; border-radius:20px; background:var(--panel); -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35); border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.contact-panel::after{ content:""; position:absolute; top:-1px; left:24%; right:24%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.8; pointer-events:none; }
.form-label{ margin-bottom:1.1rem; font-size:.86rem; color:var(--muted); }
.form-label .lbl-text{ display:block; margin-bottom:.35rem; font-weight:500; }
.form-input, .form-textarea{ width:100%; padding:.7rem .95rem; border-radius:12px; background:#FFFFFFAA; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line); color:var(--text); font-family:'Space Grotesk',sans-serif; font-size:1rem; resize:none; transition:border-color .2s ease, box-shadow .2s ease; }
html[data-theme="dark"] .form-input, html[data-theme="dark"] .form-textarea{ background:#F2F6FC0D; }
.form-input:focus, .form-textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px #2563EB2E, 0 0 18px -4px rgba(37,99,235,.4); }
.form-input::placeholder, .form-textarea::placeholder{ color:#5B6B84AA; font-size:.88rem; }
.cat-pills{ display:flex; flex-wrap:wrap; gap:.5rem; }
.cat-pill{ padding:.5rem .9rem; border-radius:9999px; font-family:'Space Grotesk',sans-serif; font-size:.82rem; cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cat-pill[aria-pressed="true"]{ background:#2563EB; color:#FFFFFF; box-shadow:0 8px 20px -8px rgba(37,99,235,.6); transform:translateZ(2px); }
html[data-theme="dark"] .cat-pill[aria-pressed="true"]{ background:linear-gradient(135deg,#2563EB,#7C3AED); box-shadow:0 8px 22px -8px rgba(124,58,237,.65); }
.cat-pill[aria-pressed="false"]{ background:#FFFFFFAA; color:var(--muted); border:1px solid var(--line); }
html[data-theme="dark"] .cat-pill[aria-pressed="false"]{ background:#F2F6FC0D; }
.form-error{ margin-bottom:.9rem; font-size:.84rem; line-height:1.5; color:#E76A53; display:none; }
html[data-theme="dark"] .form-error{ color:#FF7A5C; }
.btn-submit{ width:100%; justify-content:center; background:#2563EB; color:#FFFFFF; border:none; box-shadow:0 12px 30px -12px rgba(37,99,235,.6), inset 0 1px 0 rgba(255,255,255,.25); }
html[data-theme="dark"] .btn-submit{ background:linear-gradient(180deg,#3B82F6,#7C3AED); box-shadow:0 12px 34px -12px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-submit:disabled{ opacity:.6; cursor:default; }
.form-note{ margin-top:.9rem; text-align:center; font-size:.8rem; color:var(--muted); }
.success-panel{ display:flex; flex-direction:column; align-items:center; gap:.7rem; padding:2.4rem 1.8rem; text-align:center; border-radius:20px; background:var(--panel); -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35); border:1px solid #158A464D; box-shadow:var(--shadow-lg), 0 0 44px -14px rgba(21,138,70,.45); }
.success-panel svg{ width:28px; height:28px; color:#158A46; transform:translateZ(6px); }
html[data-theme="dark"] .success-panel svg{ color:#3DDC63; filter:drop-shadow(0 0 10px rgba(61,220,99,.6)); }
.success-title{ margin:0; font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.04em; color:#16304F; transform:translateZ(4px); }
html[data-theme="dark"] .success-title{ color:#EAF2FF; }
.success-text{ margin:0; font-size:.92rem; line-height:1.55; color:var(--muted); transform:translateZ(2px); }

/* ============ PROFONDEUR / 3D (ajout) ============ */
#steps-grid{ perspective:1000px; }
#trust-grid{ perspective:1000px; }
.step-card.is-tilting, .trust-item.is-tilting{ transition-duration:.18s; }
.hero{ perspective:1000px; }

/* ============ FOOTER ============ */
.site-footer{ position:relative; max-width:72rem; margin-top:4.5rem; padding:2.6rem 1.5rem 3rem; border-top:1px solid var(--line); background:linear-gradient(180deg,transparent,var(--panel)); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.copyright{ margin:0; text-align:center; font-size:.8rem; letter-spacing:.04em; color:var(--muted); }
.footer-links{ display:flex; justify-content:center; gap:.7rem; margin:0 0 .9rem; font-size:.78rem; color:var(--muted); }
.footer-links a{ color:var(--muted); text-decoration:none; }
.footer-links a:hover{ color:var(--blue); text-decoration:underline; }

/* ============ CONSEILS: article index cards ============ */
.article-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(1rem,4vw,1.5rem); max-width:900px; margin-inline:auto; }
.article-card{ display:flex; flex-direction:column; padding:1.5rem 1.6rem 1.7rem; border-radius:18px; text-decoration:none; color:inherit; transition:transform .25s ease, box-shadow .25s ease; }
.article-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px -14px rgba(15,30,50,.28); }
.article-tag{ font-family:'Orbitron',sans-serif; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#0E7FA8; margin-bottom:.7rem; }
html[data-theme="dark"] .article-tag{ color:#22D3EE; }
.article-card h2{ font-size:1.05rem; font-weight:700; margin:0 0 .6rem; color:var(--text); }
.article-card p{ font-size:.88rem; line-height:1.55; color:var(--muted); margin:0 0 1rem; }
.article-read{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; color:var(--blue); margin-top:auto; }
.article-read svg{ width:.85rem; height:.85rem; transition:transform .2s ease; }
.article-card:hover .article-read svg{ transform:translateX(3px); }
.article-cta{ margin-top:2.4rem; padding:1.6rem; border-radius:16px; text-align:center; }
.article-cta p{ margin:0 0 1rem; color:var(--muted); font-size:.92rem; }

/* ============ BACK TO TOP / REVEAL / MISC ============ */
#back-to-top{ position:fixed; right:20px; bottom:20px; z-index:50; width:44px; height:44px; border-radius:9999px; background:#2563EB; color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px -6px rgba(0,0,0,.4); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, background .25s ease; }
#back-to-top.is-shown{ opacity:1; pointer-events:auto; transform:translateY(0); }
#back-to-top:hover{ background:#1D4ED8; box-shadow:0 10px 26px -6px rgba(37,99,235,.65), inset 0 0 0 1px rgba(255,255,255,.2); }
#back-to-top svg{ width:18px; height:18px; display:block; }
.btn-primary svg{ width:16px; height:16px; flex-shrink:0; }
.btn-submit svg{ width:15px; height:15px; flex-shrink:0; }

.reveal{ opacity:0; transform:translateY(24px) scale(.98); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0) scale(1); }

/* ============ MOBILE : lisibilité + allègement / DESKTOP : boot-line ============ */
@media (min-width:768px){
  .boot-line{ font-size:.95rem; letter-spacing:.24em; }
}
@media (max-width:640px){
  body::before, body::after{ opacity:.35; filter:blur(70px); }
  .repairz-scan{ display:none; }
  .wrap{ padding-inline:1rem; }
  .section{ margin-top:3.2rem; }
  .site-footer{ margin-top:3.2rem; }
  .hero{ padding-top:2.6rem; padding-bottom:2.4rem; }
  .nav-inner{ padding:.75rem 1rem; gap:.75rem; }
  .repairz-sticky-nav.is-scrolled .nav-inner{ padding-top:.55rem; padding-bottom:.55rem; }
  .wordmark{ font-size:.95rem; letter-spacing:.08em; }
  .repairz-sticky-nav.is-scrolled .wordmark{ font-size:.9rem; }
  .brand-block{ gap:.55rem; }
  .repairz-sticky-nav .nav-logo, .repairz-sticky-nav.is-scrolled .nav-logo{ width:32px; height:32px; }
  .nav-right{ gap:.5rem; }
  #theme-toggle, .menu-toggle{ width:36px; height:36px; }
  #theme-toggle svg{ width:14px; height:14px; }
  .menu-toggle span{ width:16px; }
  .nav-cta{ display:none; }
  .site-menu{ right:1rem; width:calc(100% - 2rem); }
  .btn{ font-size:.76rem; padding:.75rem 1.2rem; gap:.5rem; }
  .hero-actions{ gap:.75rem; margin-top:1.8rem; }
  .sec-sub{ margin-bottom:1.9rem; }
  .price-label{ font-size:.93rem; }
  .trust-label{ font-size:.92rem; }
  .step-text{ font-size:.93rem; }
  .faq-toggle{ font-size:.95rem; padding:.9rem 1rem; }
  /* Icônes et cartes moins imposantes sur mobile */
  .svc-img-wrap{ width:52px; height:52px; border-radius:12px; }
  .step-icon-wrap{ width:40px; height:40px; border-radius:10px; }
  .trust-icon-wrap{ width:46px; height:46px; }
  .service-card{ padding:1.1rem 1.2rem 1.3rem; }
  .step-card{ padding:1.1rem 1.2rem; }
  .step-num{ font-size:3.4rem; }
  .contact-panel{ padding:1.3rem 1.4rem 1.5rem; }
  .svc-title{ font-size:.98rem; }
  .site-footer .w-20{ width:52px; }
  .site-footer .h-20{ height:52px; }
}

/* ============ CARTE MÈRE (fond) ============ */
.rz-board{ position:absolute; inset:0; display:block; }
.rz-vignette{ position:absolute; inset:0; background:
  radial-gradient(ellipse 60% 50% at 50% 38%, color-mix(in srgb, var(--bg) 62%, transparent) 0%, transparent 75%),
  radial-gradient(ellipse at 50% 50%, transparent 55%, color-mix(in srgb, var(--bg) 80%, transparent) 100%); }
html[data-theme="dark"] body::before{ opacity:.32; }
html[data-theme="dark"] body::after{ opacity:.28; }
body::before, body::after{ opacity:.45; }

/* ============ 3D : entrée des cartes au scroll ============ */
#services-grid, #steps-grid, #trust-grid, .article-grid{ perspective:1200px; perspective-origin:50% 30%; }
.service-cell.reveal{ transform-origin:50% 100%; transform:translate3d(0,80px,-260px) rotateX(26deg); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.16,.84,.24,1); }
.step-card.reveal:nth-child(odd){ transform:translate3d(-50px,40px,-220px) rotateY(22deg); }
.step-card.reveal:nth-child(even){ transform:translate3d(50px,40px,-220px) rotateY(-22deg); }
.trust-item.reveal{ transform:translate3d(0,50px,-200px) rotateX(-24deg); }
.step-card.reveal, .trust-item.reveal{ transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.16,.84,.24,1); }
.service-cell.reveal.is-visible, .step-card.reveal.is-visible, .trust-item.reveal.is-visible{ transform:none; }
.step-card.reveal.is-visible.is-tilting, .trust-item.reveal.is-visible.is-tilting{ transition:transform .18s ease; }
.service-card.is-enterable{ cursor:pointer; }
.service-card.is-tilting{ box-shadow:var(--shadow-lg), 0 30px 60px -24px var(--cc-glow, rgba(15,30,50,.3)); }
.article-card{ transform-style:preserve-3d; }
.article-card:hover{ transform:translateY(-4px) translateZ(20px) rotateX(4deg); }

/* ============ 3D : plongée dans une carte ============ */
.rz-dive{ position:fixed; inset:0; z-index:200; pointer-events:none; perspective:1000px; }
.rz-dive-bg{ position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cc) 30%, transparent) 0%, transparent 55%), var(--bg); }
.rz-dive-card{ position:absolute !important; margin:0; box-sizing:border-box; will-change:transform, opacity; backface-visibility:hidden; }
html.rz-diving body > :not(#bg-layer):not(.rz-dive):not(#back-to-top){ transition:transform .8s cubic-bezier(.6,0,.3,1), opacity .7s ease, filter .7s ease; transform:scale(.93); opacity:.2; filter:blur(3px); }
html.rz-arrive body > :not(#bg-layer):not(#back-to-top):not(script){ animation:rzArrive 1s cubic-bezier(.16,.84,.24,1) both; }
html.rz-arrive::after{ content:""; position:fixed; inset:0; z-index:150; pointer-events:none; background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rz-cc, #3B82F6) 32%, transparent) 0%, var(--bg) 70%); animation:rzFlash 1s ease-out both; }
@keyframes rzArrive{ from{ opacity:0; transform:perspective(1000px) translateZ(280px); filter:blur(8px); } to{ opacity:1; transform:none; filter:none; } }
@keyframes rzFlash{ from{ opacity:1; } to{ opacity:0; } }

/* ============ PRODUITS 3D (vignettes détourées + vitrine) ============ */
.service-card .svc-img-wrap{ width:76px; height:76px; overflow:visible; background:radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--cc) 26%, transparent) 0%, transparent 68%); border:none; box-shadow:none; transform:translateZ(34px); }
.service-card .svc-img-wrap img{ object-fit:contain; filter:drop-shadow(0 10px 10px rgba(0,0,0,.35)); transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease; }
.service-card.is-tilting .svc-img-wrap img{ transform:translateY(-6px) scale(1.2); filter:drop-shadow(0 18px 14px rgba(0,0,0,.4)) drop-shadow(0 0 14px var(--cc-glow, transparent)); }
.rz-show-bg{ background:radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--cc) 22%, transparent) 0%, transparent 50%), color-mix(in srgb, var(--bg) 92%, transparent); }
.rz-stage{ position:absolute; left:50%; top:46%; transform-style:preserve-3d; will-change:transform; }
.rz-product{ position:absolute; inset:0; }
.rz-prod-img{ width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 28px 30px rgba(0,0,0,.45)); }
.rz-sweep{ position:absolute; inset:0; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); background-size:60% 100%; background-repeat:no-repeat; mix-blend-mode:screen; }
.rz-halo{ position:absolute; inset:-30%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--cc) 45%, transparent) 0%, transparent 62%); filter:blur(10px); }
.rz-floor{ position:absolute; left:8%; right:8%; bottom:-6%; height:14%; border-radius:50%; border:1px solid color-mix(in srgb, var(--cc) 70%, transparent); background:radial-gradient(ellipse, color-mix(in srgb, var(--cc) 35%, transparent), transparent 70%); box-shadow:0 0 30px color-mix(in srgb, var(--cc) 50%, transparent); }
.rz-reflect{ position:absolute; left:0; top:100%; width:100%; height:100%; object-fit:contain; transform:scaleY(-1); -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 45%); mask-image:linear-gradient(to top, rgba(0,0,0,.9), transparent 45%); filter:blur(1px); }
.rz-show-label{ position:absolute; left:0; right:0; bottom:9vh; display:flex; flex-direction:column; align-items:center; gap:.45rem; text-align:center; }
.rz-show-kicker{ font-family:'Orbitron',sans-serif; font-size:.72rem; letter-spacing:.3em; color:var(--cc); }
.rz-show-title{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:clamp(1.5rem,3.4vw,2.4rem); letter-spacing:.06em; color:var(--text); text-shadow:0 0 24px color-mix(in srgb, var(--cc) 50%, transparent); }
.rz-show-tag{ font-size:.92rem; color:var(--muted); }
.rz-model-canvas{ position:absolute; left:-25%; top:-25%; width:150%; height:150%; display:block; }
.has-model .rz-prod-img, .has-model .rz-sweep, .has-model .rz-reflect, .has-model .rz-floor{ display:none; }
@media (max-width:640px){ .service-card .svc-img-wrap{ width:62px; height:62px; } .rz-show-label{ bottom:12vh; } }

@media (prefers-reduced-motion: reduce){
  .service-cell.reveal, .step-card.reveal, .trust-item.reveal{ transform:none !important; }
  html.rz-arrive::after{ display:none; }
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ============ LEGAL PAGES: mentions légales / confidentialité ============ */
.legal-content{ max-width:760px; margin-inline:auto; }
.legal-content h2{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:1.1rem; letter-spacing:.02em; margin:2.2rem 0 .8rem; color:#16304F; }
html[data-theme="dark"] .legal-content h2{ color:#EAF2FF; }
.legal-content p{ margin:0 0 1rem; line-height:1.7; color:var(--text); }
.legal-content ul{ margin:0 0 1rem; padding-left:1.3rem; line-height:1.7; }
.legal-content li{ margin-bottom:.4rem; }
.legal-content a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
.legal-content a.btn, .legal-content a.btn:hover{ color:#fff; text-decoration:none; }
.legal-updated{ font-size:.82rem; color:var(--muted); margin-bottom:2rem; text-align:center; }
.back-link{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--muted); margin-bottom:1.2rem; transition:color .2s ease; }
.back-link:hover{ color:var(--blue); }
.cross-links{ margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); text-align:center; }
.cross-links p{ font-size:.85rem; color:var(--muted); margin:0 0 .7rem; }
.cross-links-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; }
.cross-links-list a{ font-size:.82rem; padding:.5rem .9rem; border-radius:999px; border:1px solid var(--line); color:var(--text); transition:border-color .2s ease, color .2s ease; }
.cross-links-list a:hover{ border-color:var(--blue); color:var(--blue); }

/* Page Conseils + articles : animations désactivées (fond animé conservé) */
html.rz-calm body > :not(#bg-layer), html.rz-calm body > :not(#bg-layer) *, html.rz-calm body > :not(#bg-layer) *::before, html.rz-calm body > :not(#bg-layer) *::after{ animation:none !important; }
html.rz-calm .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
html.rz-calm .service-card, html.rz-calm .article-card, html.rz-calm .step-card, html.rz-calm .trust-item{ transform:none !important; }
html.rz-calm .service-card .svc-img-wrap img{ transform:none !important; }
html.rz-calm::after{ display:none; }

/* Accueil (comme v4) : vignettes photo classiques sur les cartes services */
.service-card .svc-img-wrap.svc-photo{ width:64px; height:64px; overflow:hidden; background:#FFFFFF; border:1px solid var(--line); box-shadow:0 8px 22px -10px rgba(15,30,50,.35); transform:translateZ(26px); }
.service-card .svc-img-wrap.svc-photo img, .service-card.is-tilting .svc-img-wrap.svc-photo img{ object-fit:cover; filter:none; transform:none; }
@media (max-width:640px){ .service-card .svc-img-wrap.svc-photo{ width:52px; height:52px; border-radius:12px; } }

/* Conseils — cartes articles en mode clair : plus de couleur, style proche du mode sombre */
html[data-theme="light"] .article-card{
  background:linear-gradient(160deg, rgba(255,255,255,.92) 0%, rgba(236,246,255,.9) 55%, rgba(243,236,255,.88) 100%);
  border:1px solid rgba(14,127,168,.35);
  box-shadow:0 18px 40px -20px rgba(37,99,235,.45), 0 0 0 1px rgba(124,58,237,.06), inset 0 1px 0 #fff;
  overflow:hidden;
}
html[data-theme="light"] .article-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#0EA5C9,#2563EB,#7C3AED);
}
html[data-theme="light"] .article-card:hover{ border-color:rgba(37,99,235,.6); box-shadow:0 22px 46px -18px rgba(37,99,235,.55), 0 0 0 1px rgba(124,58,237,.12); }
html[data-theme="light"] .article-card .article-tag{ color:#0891B2; font-weight:700; }
html[data-theme="light"] .article-card h2{ color:#0B1B3A; }
html[data-theme="light"] .article-card p:not(.article-tag){ color:#3E4F6B; }
html[data-theme="light"] .article-card .article-read{ color:#2563EB; font-weight:700; }

/* Articles Conseils — titres de section en couleur (mode clair) */
html.rz-calm[data-theme="light"] .legal-content h2{
  font-size:1.22rem; padding-left:.9rem; position:relative; width:fit-content; max-width:100%;
  background:linear-gradient(90deg,#0891B2 0%,#2563EB 45%,#7C3AED 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html.rz-calm[data-theme="light"] .legal-content h2::before{
  content:""; position:absolute; left:0; top:.1em; bottom:.1em; width:5px; border-radius:4px;
  background:linear-gradient(180deg,#0EA5C9,#2563EB,#7C3AED);
}

/* Liens « Autres réparations », « À lire » et « Retour à l'accueil » plus visibles (mode clair) */
html[data-theme="light"] .cross-links{ border-top-color:rgba(37,99,235,.25); }
html[data-theme="light"] .cross-links p{ font-family:'Orbitron',sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#0891B2; }
html[data-theme="light"] .cross-links-list a{
  font-size:.86rem; font-weight:600; color:#1D4ED8;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(232,242,255,.95));
  border:1px solid rgba(37,99,235,.4);
  box-shadow:0 6px 16px -8px rgba(37,99,235,.45);
  transition:border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
html[data-theme="light"] .cross-links-list a:hover{ color:#fff; border-color:transparent; background:linear-gradient(135deg,#2563EB,#7C3AED); box-shadow:0 8px 20px -8px rgba(124,58,237,.6); }
html[data-theme="light"] .back-link{
  font-weight:600; color:#1D4ED8; padding:.45rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.92); border:1px solid rgba(37,99,235,.4);
  box-shadow:0 6px 16px -8px rgba(37,99,235,.45);
  transition:color .2s ease, background .2s ease, border-color .2s ease;
}
html[data-theme="light"] .back-link:hover{ color:#fff; border-color:transparent; background:linear-gradient(135deg,#2563EB,#7C3AED); }

/* Même chose en mode sombre */
html[data-theme="dark"] .cross-links{ border-top-color:rgba(34,211,238,.22); }
html[data-theme="dark"] .cross-links p{ font-family:'Orbitron',sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#22D3EE; text-shadow:0 0 12px rgba(34,211,238,.45); }
html[data-theme="dark"] .cross-links-list a,
html[data-theme="dark"] .back-link{
  font-weight:600; color:#8EC5FF;
  background:linear-gradient(135deg,rgba(59,130,246,.14),rgba(124,58,237,.12));
  border:1px solid rgba(91,156,255,.45);
  box-shadow:0 0 18px -6px rgba(59,130,246,.55), inset 0 0 12px rgba(59,130,246,.08);
  transition:border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease;
}
html[data-theme="dark"] .cross-links-list a{ font-size:.86rem; }
html[data-theme="dark"] .back-link{ padding:.45rem 1rem; border-radius:999px; }
html[data-theme="dark"] .cross-links-list a:hover,
html[data-theme="dark"] .back-link:hover{ color:#fff; border-color:transparent; background:linear-gradient(135deg,#3B82F6,#7C3AED); box-shadow:0 0 26px -4px rgba(124,58,237,.7); }

/* Articles Conseils — titres de section en couleur (mode sombre) */
html.rz-calm[data-theme="dark"] .legal-content h2{
  font-size:1.22rem; padding-left:.9rem; position:relative; width:fit-content; max-width:100%;
  background:linear-gradient(90deg,#22D3EE 0%,#5B9CFF 45%,#B15CFF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 10px rgba(59,130,246,.35));
}
html.rz-calm[data-theme="dark"] .legal-content h2::before{
  content:""; position:absolute; left:0; top:.1em; bottom:.1em; width:5px; border-radius:4px;
  background:linear-gradient(180deg,#22D3EE,#3B82F6,#B15CFF);
  box-shadow:0 0 10px rgba(34,211,238,.6);
}

/* Garantie sur les cartes tarifs */
.service-card .svc-note + .svc-warranty{ margin-top:.5rem; font-weight:600; }

/* ---------- Diagnostic en ligne ---------- */
.diag-app{ max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:1.6rem; }
.diag-step{ display:flex; flex-direction:column; gap:.8rem; }
.diag-q{ display:flex; align-items:center; gap:.6rem; margin:0; font-weight:600; font-size:1.02rem; color:var(--text); }
.diag-num{ display:inline-grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:50%; font-size:.8rem; font-weight:700; color:#fff; background:linear-gradient(135deg,#0EA5C9,#2563EB,#7C3AED); flex-shrink:0; }
.diag-options{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:.6rem; }
.diag-opt{ text-align:left; padding:.8rem 1rem; border-radius:14px; font:500 .9rem 'Space Grotesk',sans-serif; color:var(--text); background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:border-color .2s ease, background .2s ease, color .2s ease; }
.diag-opt:hover{ border-color:#2563EB; }
.diag-opt[aria-pressed="true"]{ color:#fff; border-color:transparent; background:linear-gradient(135deg,#2563EB,#7C3AED); }
.diag-opt:focus-visible, .cat-pill:focus-visible{ outline:2px solid #22D3EE; outline-offset:2px; }
.diag-result{ padding:1.6rem clamp(1.2rem,4vw,2rem); border-radius:20px; border-color:color-mix(in srgb, var(--cc) 45%, transparent); }
.diag-result .diag-q{ margin-bottom:.9rem; }
.diag-service{ margin:0 0 .2rem; font-size:1.15rem; font-weight:700; color:var(--text); }
.diag-service em{ font-style:normal; font-weight:500; font-size:.85rem; color:var(--muted); }
.diag-price{ margin:0 0 .8rem; color:var(--muted); }
.diag-price strong{ font-family:'Orbitron',sans-serif; font-size:1.7rem; color:var(--cc); margin-left:.2rem; }
.diag-note{ margin:0 0 .6rem; font-size:.88rem; line-height:1.55; color:var(--muted); }
.diag-warranty{ display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--cc); }
.diag-warranty svg{ width:1rem; height:1rem; }
.diag-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.1rem; }

/* ---------- Suivi de réparation ---------- */
.suivi-box{ max-width:560px; margin-inline:auto; }
.suivi-form{ display:flex; gap:.6rem; flex-wrap:wrap; }
.suivi-form .form-input{ flex:1 1 220px; text-transform:uppercase; letter-spacing:.06em; }
#suivi-result{ margin-top:1.2rem; }
.suivi-wait{ color:var(--muted); font-size:.9rem; }
.suivi-card{ padding:1.5rem clamp(1.1rem,4vw,1.8rem); border-radius:20px; }
.suivi-head{ margin:0 0 1.2rem; color:var(--text); }
.suivi-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; }
.suivi-steps li{ position:relative; display:flex; align-items:center; gap:.8rem; padding:.55rem 0; color:var(--muted); font-size:.95rem; }
.suivi-steps li:not(:last-child)::after{ content:""; position:absolute; left:.95rem; top:2.3rem; height:calc(100% - 1.6rem); width:2px; background:var(--line); }
.suivi-steps li.done::after{ background:linear-gradient(180deg,#0EA5C9,#2563EB); }
.suivi-dot{ display:inline-grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; font-size:.8rem; font-weight:700; border:2px solid var(--line); background:var(--panel); flex-shrink:0; z-index:1; }
.suivi-steps li.done{ color:var(--text); }
.suivi-steps li.done .suivi-dot{ color:#fff; border-color:transparent; background:linear-gradient(135deg,#0EA5C9,#2563EB); }
.suivi-steps li.current{ color:var(--text); font-weight:700; }
.suivi-steps li.current .suivi-dot{ color:#fff; border-color:transparent; background:linear-gradient(135deg,#2563EB,#7C3AED); box-shadow:0 0 0 5px rgba(124,58,237,.18); }
.suivi-note{ margin:1.1rem 0 0; padding:.8rem 1rem; border-radius:12px; font-size:.9rem; line-height:1.55; color:var(--text); background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.2); }
.suivi-maj{ margin:.8rem 0 0; font-size:.8rem; color:var(--muted); }

/* ---------- Page 404 ---------- */
.notfound-code{ font-family:'Orbitron',sans-serif; font-size:clamp(4rem,14vw,7rem); font-weight:800; line-height:1; margin:0 0 .5rem; background:linear-gradient(90deg,#0EA5C9,#2563EB,#7C3AED); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Les cartes en 3D pas encore révélées débordaient à droite (scroll horizontal) ; clip ne casse pas le sticky */
body{ overflow-x:clip; }

/* ============ v13 : LISIBILITÉ DU FOND ============ */
/* Hors du hero et pendant la scroll-story, le circuit s'efface */
.rz-board{ transition:opacity .8s ease; }
html.rz-past-hero .rz-board{ opacity:.5; }
html.rz-focus .rz-board{ opacity:.22; }
/* Halo couleur de fond derrière les textes courants des en-têtes de section */
.section .eyebrow, .section .sec-sub{ text-shadow:0 0 10px var(--bg), 0 0 22px var(--bg), 0 0 36px var(--bg); }
html[data-theme="light"] h2.sec-title{ text-shadow:0 0 14px var(--bg), 0 0 30px var(--bg); }

/* ============ v13 : CONTACT — surtitre aligné sur le titre ============ */
#contact .eyebrow, .eyebrow--left{ justify-content:flex-start; }
#contact .eyebrow::before, .eyebrow--left::before{ display:none; }
#contact .eyebrow::after, .eyebrow--left::after{ flex:0 1 120px; }

/* ============ v13 : ÉTAPES — plus d'orpheline (4 colonnes ou 2×2) ============ */
@media (min-width:1000px){ #steps-grid:not(.is-story){ grid-template-columns:repeat(4,1fr) !important; } }
@media (min-width:560px) and (max-width:999px){ #steps-grid:not(.is-story){ grid-template-columns:repeat(2,1fr) !important; } }

/* ============ v13 : HERO ACCUEIL avec produits ============ */
.hero--home{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(1.5rem,4vw,3rem); text-align:left; padding-top:3.2rem; padding-bottom:2.5rem; min-height:min(calc(100svh - 80px), 720px); }
.hero--home .hero-sub{ margin-inline:0; }
.hero--home .hero-actions{ justify-content:flex-start; }
.hero-visual{ position:relative; width:100%; aspect-ratio:1 / .9; max-width:560px; justify-self:center; }
.hv-floor{ position:absolute; left:6%; right:6%; bottom:4%; height:22%; border-radius:50%; background:radial-gradient(ellipse, color-mix(in srgb, var(--h1-b) 34%, transparent) 0%, transparent 70%); filter:blur(6px); }
html[data-theme="dark"] .hv-floor{ box-shadow:0 0 0 1px color-mix(in srgb, var(--h1-a) 28%, transparent) inset; }
.hv-item{ position:absolute; transition:translate .5s cubic-bezier(.2,.7,.2,1); }
.hv-item img{ width:100%; height:auto; display:block; filter:drop-shadow(0 22px 22px rgba(10,20,40,.35)); animation:hvFloat 6s ease-in-out infinite; }
html[data-theme="dark"] .hv-item img{ filter:drop-shadow(0 22px 22px rgba(0,0,0,.55)) drop-shadow(0 0 22px color-mix(in srgb, var(--cc) 35%, transparent)); }
.hv-xbox{ left:2%; top:8%; width:34%; z-index:1; }
.hv-xbox img{ animation-delay:-1.5s; }
.hv-desktop{ right:0; top:0; width:46%; z-index:1; }
.hv-desktop img{ animation-delay:-3s; }
.hv-ps5{ right:2%; top:40%; width:34%; z-index:2; }
.hv-ps5 img{ animation-delay:-4.5s; }
.hv-laptop{ left:10%; top:30%; width:62%; z-index:3; }
@keyframes hvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.hv-chip{ position:absolute; z-index:4; display:flex; align-items:center; gap:.5rem; padding:.5rem .85rem; border-radius:999px; font-size:.78rem; font-weight:600; color:var(--text); background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--shadow-lg); white-space:nowrap; animation:hvFloat 7s ease-in-out infinite; }
.hv-chip span{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.hv-chip-a{ left:0; bottom:10%; animation-delay:-2s; }
.hv-chip-b{ right:0; top:30%; }
.hv-chip-b span{ background:var(--blue); box-shadow:0 0 10px var(--blue); }
@media (max-width:900px){
  .hero--home{ grid-template-columns:1fr; text-align:center; min-height:0; padding-top:2.4rem; }
  .hero--home .hero-sub{ margin-inline:auto; }
  .hero--home .hero-actions{ justify-content:center; }
  .hero-visual{ max-width:420px; margin-top:.5rem; }
}
@media (max-width:640px){ .hv-chip{ font-size:.7rem; padding:.4rem .7rem; } }

/* ============ v16 : MOBILE — alléger le GPU (crash « problème récurrent » sur iPhone) ============ */
/* Chaque backdrop-filter re-floute ce qu'il y a derrière (le fond animé) à chaque image :
   sur mobile on garde le flou de la nav seulement, et les panneaux deviennent quasi opaques. */
@media (max-width:640px){
  :root{ --panel:rgba(255,255,255,.94); }
  html[data-theme="dark"]{ --panel:rgba(9,17,34,.94); }
  :is(.glass-card, .faq-item, .contact-panel, .callout-secondlife, .btn-ghost, .svc-note, .svc-tabs button, .hv-chip, .story-step-btn, .story-bubble, .story-badge, .success-panel, .form-input, .form-textarea, .site-footer){ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  body::before, body::after{ will-change:auto; transform:none !important; }
  .service-card{ will-change:auto; }
  /* Produits du hero : une seule ombre, pas de halo coloré animé */
  html[data-theme="dark"] .hv-item img{ filter:drop-shadow(0 16px 16px rgba(0,0,0,.5)); }
}
}

/* ============ v14 : TARIFS — prix d'appel + onglets mobile ============ */
.svc-from{ margin:0; font-size:.78rem; color:var(--muted); }
.svc-from strong{ font-family:'Orbitron',sans-serif; font-size:.9rem; color:var(--cc-bright, var(--cc)); }
.svc-tabs{ display:none; }
@media (max-width:640px){
  .svc-tabs{ display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; margin:-.6rem 0 1.1rem; }
  .svc-tabs button{ display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; padding:.6rem .8rem; border-radius:14px; font:inherit; text-align:left; cursor:pointer; color:var(--text); background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:border-color .2s ease, box-shadow .2s ease, background .2s ease; }
  .svc-tabs button span{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.03em; }
  .svc-tabs button em{ font-style:normal; font-size:.74rem; color:var(--muted); }
  .svc-tabs button[aria-selected="true"]{ border-color:var(--cc); background:color-mix(in srgb, var(--cc) 14%, var(--panel)); box-shadow:0 0 22px -8px var(--cc); }
  .svc-tabs button[aria-selected="true"] em{ color:var(--cc); }
  .svc-tabs button:focus-visible{ outline:2px solid var(--cc); outline-offset:2px; }
  #services-grid .service-cell:not(.is-tab){ display:none; }
  #services-grid .service-cell.is-tab{ transition-delay:0ms !important; }
}

/* ============ v15 : PHOTOS D'ILLUSTRATION ============ */
.illus{ position:relative; margin:0; overflow:hidden; border-radius:20px; border:1px solid var(--line); box-shadow:var(--shadow-lg); background:var(--panel-solid); }
.illus img{ display:block; width:100%; height:100%; object-fit:cover; }
.illus figcaption{ position:absolute; left:.6rem; bottom:.6rem; padding:.2rem .55rem; border-radius:999px; font-size:.68rem; letter-spacing:.02em; color:#fff; background:rgba(3,7,18,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
/* Pages réparation : photo à côté de la carte tarif */
.svc-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:clamp(1rem,3vw,1.75rem); align-items:stretch; max-width:900px; margin-inline:auto; }
.svc-split #services-grid{ max-width:none !important; margin:0 !important; }
.svc-split .illus{ min-height:320px; }
@media (max-width:760px){
  .svc-split{ grid-template-columns:1fr; max-width:420px; }
  .svc-split .illus{ min-height:0; aspect-ratio:16 / 10; }
}
/* Accueil : encart « Seconde vie » avec photo */
.callout-secondlife.has-illus{ padding:0; overflow:hidden; align-items:stretch; }
.illus-callout{ flex:0 0 clamp(180px,32%,320px); border:0; border-radius:0; box-shadow:none; }
.callout-body{ flex:1; display:flex; align-items:center; gap:1rem; padding:1.3rem 1.6rem; }
@media (max-width:640px){
  .callout-secondlife.has-illus{ flex-direction:column; }
  .illus-callout{ flex:none; width:100%; aspect-ratio:16 / 9; }
  .callout-body{ flex-wrap:wrap; padding:1.1rem 1.2rem 1.3rem; }
}

/* ============ v14 : FAQ ============ */
.faq-more{ margin:1.2rem 0 0; text-align:center; font-size:.9rem; color:var(--muted); }
.faq-more a{ font-weight:600; color:var(--blue); }
.faq-more a:hover{ text-decoration:underline; }

/* ============ v14 : CONTACT — Instagram + suggestions de pannes ============ */
.btn-insta{ margin:0 0 .5rem; color:#fff; background:linear-gradient(90deg,#F58529,#DD2A7B 45%,#8134AF); box-shadow:0 10px 26px -10px rgba(221,42,123,.6); }
.btn-insta:hover{ filter:brightness(1.08); box-shadow:0 14px 32px -10px rgba(221,42,123,.75); }
.btn-insta svg{ width:17px; height:17px; }
.insta-alt{ margin:0 0 1.5rem; font-size:.84rem; color:var(--muted); }
.form-hints{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-bottom:1.1rem; }
.form-hints-lbl{ width:100%; font-size:.78rem; color:var(--muted); }
.form-hint{ padding:.35rem .7rem; border-radius:999px; font:inherit; font-size:.78rem; cursor:pointer; color:var(--muted); background:transparent; border:1px dashed var(--line); transition:color .2s ease, border-color .2s ease, background .2s ease; }
.form-hint:hover{ color:var(--text); border-color:var(--cc, var(--blue)); }
.form-hint[aria-pressed="true"]{ color:#fff; border-style:solid; border-color:transparent; background:var(--cc, var(--blue)); }
.form-hint[aria-pressed="true"]::before{ content:"✓ "; }

/* ============ v14 : MOBILE — barre « Devis gratuit » ============ */
.m-cta{ display:none; }
@media (max-width:640px){
  .m-cta{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:60; display:flex; gap:.5rem; padding:.45rem; border-radius:999px; background:var(--panel-solid); border:1px solid var(--line); box-shadow:0 14px 34px -10px rgba(0,0,0,.45); transform:translateY(140%); opacity:0; pointer-events:none; transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease; }
  .m-cta.is-shown{ transform:none; opacity:1; pointer-events:auto; }
  .m-cta-main{ flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1rem; border-radius:999px; font-family:'Orbitron',sans-serif; font-weight:700; font-size:.8rem; letter-spacing:.06em; color:#fff; background:#2563EB; }
  html[data-theme="dark"] .m-cta-main{ background:linear-gradient(180deg,#3B82F6,#1D4ED8); }
  .m-cta-main svg{ width:16px; height:16px; }
  .m-cta-insta{ width:46px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:999px; color:#fff; background:linear-gradient(135deg,#F58529,#DD2A7B 50%,#8134AF); }
  .m-cta-insta svg{ width:19px; height:19px; }
  /* Le bouton « retour en haut » remonte au-dessus de la barre */
  #back-to-top{ transition:opacity .25s ease, transform .25s ease, bottom .35s ease; }
  html.has-m-cta #back-to-top{ bottom:calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce){ .m-cta{ transition:none; } }

/* ============ v13 : SCROLL-STORY « Comment ça marche » ============ */
.story{
  --sd-bezel:#1B2638; --sd-edge:#0B1220; --sd-glass:#0E1A2E; --sd-deck:#C9D3E0; --sd-key:#2A3446; --sd-pcb:#0F5132; --sd-trace:#E0B45A;
  --sd-chip:#1E2530; --sd-batt:#2D3748; --sd-cell:#3F4D63; --sd-case:#AEB9C8; --sd-vent:#8492A6; --sd-red:#EF4444; --sd-ok:#22C55E;
  --sd-labels:0; --sd-fault:0;
  position:relative; height:440vh;
}
html[data-theme="dark"] .story{ --sd-deck:#3A4557; --sd-key:#141B27; --sd-case:#4A5568; --sd-vent:#2D3748; --sd-bezel:#101826; --sd-edge:#050A14; }
.story-pin{ position:sticky; top:64px; height:calc(100svh - 64px); display:grid; grid-template-columns:minmax(260px,.85fr) 28px 1.15fr; align-items:center; gap:clamp(.8rem,2vw,2rem); }
.story-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.story-step-btn{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:.9rem; align-items:center; width:100%; padding:.9rem 1.1rem; text-align:left; font:inherit; color:inherit; cursor:pointer; border-radius:16px; background:transparent; border:1px solid transparent; opacity:.45; transition:opacity .35s ease, background .35s ease, border-color .35s ease, transform .35s ease; }
.story-step-num{ display:none; }
.story-step-icon{ grid-row:1 / span 2; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line); }
.story-step-icon img{ width:100%; height:100%; object-fit:contain; padding:.3rem; }
.story-step-title{ display:block; font-family:'Orbitron',sans-serif; font-weight:700; font-size:.95rem; letter-spacing:.04em; color:var(--text); }
.story-step-text{ display:block; max-height:0; overflow:hidden; margin-top:0; font-size:.9rem; line-height:1.55; color:var(--muted); transition:max-height .45s ease, margin-top .35s ease; }
.story-step.is-done .story-step-btn{ opacity:.7; }
.story-step.is-active .story-step-btn{ opacity:1; background:var(--panel); border-color:color-mix(in srgb, var(--cc) 45%, transparent); box-shadow:var(--shadow-lg), 0 0 30px -12px var(--cc); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transform:translateX(6px); }
.story-step.is-active .story-step-text{ max-height:8rem; margin-top:.35rem; }
.story-step.is-active .story-step-title{ color:var(--cc); }
.story-step-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.story-rail{ position:relative; justify-self:center; width:3px; height:60%; border-radius:3px; background:var(--line); overflow:hidden; }
.story-rail span{ position:absolute; inset:0; transform-origin:top; transform:scaleY(var(--sd-p,0)); background:linear-gradient(180deg,var(--green),var(--cyan),var(--purple),var(--blue)); }
.story-stage{ position:relative; height:100%; max-height:620px; display:flex; align-items:center; justify-content:center; }
.story-svg{ width:100%; height:100%; max-height:560px; overflow:visible; }
.sd-layer{ will-change:transform; }
.sd-edge rect{ fill:var(--sd-edge); }
.sd-bezel{ fill:var(--sd-bezel); }
.sd-glass{ fill:var(--sd-glass); }
.sd-glitch{ fill:var(--sd-red); opacity:.35; animation:sdGlitch 1.2s steps(2) infinite; }
.sd-warn{ fill:var(--sd-red); filter:drop-shadow(0 0 6px var(--sd-red)); animation:sdPulse 1.4s ease-in-out infinite; }
.sd-warn-mark{ fill:#fff; }
.sd-ok{ opacity:0; }
.sd-ok-ring{ fill:none; stroke:var(--sd-ok); stroke-width:5; filter:drop-shadow(0 0 6px var(--sd-ok)); }
.sd-ok-check{ fill:none; stroke:var(--sd-ok); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
.sd-deck{ fill:var(--sd-deck); }
.sd-keycaps rect{ fill:var(--sd-key); }
.sd-pad{ fill:none; stroke:var(--sd-key); stroke-width:2; opacity:.6; }
.sd-pcb{ fill:var(--sd-pcb); }
.sd-traces path{ fill:none; stroke:var(--sd-trace); stroke-width:2; opacity:.55; }
.sd-chip{ fill:var(--sd-chip); }
.sd-chip-core{ fill:#2B3544; stroke:#5B6B84; stroke-width:1; }
.sd-ram{ fill:#1E3A5F; stroke:#60A5FA; stroke-width:1; }
.sd-fan-ring{ fill:#0B1220; stroke:#334155; stroke-width:2; }
.sd-fan path{ fill:#64748B; }
.sd-fan-hub{ fill:#94A3B8; }
.story.is-fixed .sd-fan{ animation:sdSpin .6s linear infinite; }
.sd-slot-bay{ fill:none; stroke:#1C7C50; stroke-width:1.5; stroke-dasharray:4 3; }
.sd-ssd{ fill:#1F2937; stroke:#475569; stroke-width:1; }
.sd-ssd-fresh{ fill:#1E3A8A; stroke:var(--sd-accent,#3B82F6); stroke-width:2; filter:drop-shadow(0 0 8px var(--sd-accent,#3B82F6)); }
.sd-ssd-chip{ fill:#0F172A; }
.sd-ssd-fault{ fill:color-mix(in srgb, var(--sd-red) 30%, transparent); stroke:var(--sd-red); stroke-width:2.5; opacity:var(--sd-fault); filter:drop-shadow(0 0 10px var(--sd-red)); }
.sd-ssd-new{ opacity:0; }
.sd-batt{ fill:var(--sd-batt); }
.sd-cell{ fill:var(--sd-cell); stroke:#64748B; stroke-width:1; }
.sd-case{ fill:var(--sd-case); }
.sd-vent{ fill:var(--sd-vent); }
.sd-label{ opacity:var(--sd-labels); }
.sd-label line{ stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; }
.sd-label circle{ fill:var(--cyan); }
.sd-label text{ font-family:'Orbitron',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; fill:var(--muted); }
.sd-scan{ opacity:0; }
.sd-scan rect:first-child{ fill:var(--cyan); filter:drop-shadow(0 0 8px var(--cyan)); }
.sd-scan-trail{ fill:var(--cyan); opacity:.08; }
.sd-tag{ opacity:0; }
.sd-tag rect{ fill:var(--panel-solid); stroke:var(--sd-red); stroke-width:1.5; }
.sd-tag circle{ fill:var(--sd-red); }
.sd-tag text{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; fill:var(--text); }
.sd-tag-new rect{ stroke:var(--sd-ok); }
.sd-tag-new circle{ fill:var(--sd-ok); }
.story-bubble, .story-badge{ position:absolute; z-index:2; display:flex; align-items:center; gap:.7rem; padding:.7rem 1rem; border-radius:16px; background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:var(--shadow-lg); font-size:.85rem; line-height:1.35; color:var(--muted); opacity:0; }
.story-bubble b, .story-badge b{ display:block; color:var(--text); font-size:.9rem; }
.story-bubble{ top:8%; left:4%; }
.story-bubble img{ width:34px; height:34px; border-radius:10px; background:#fff; padding:.2rem; }
.story-badge{ bottom:6%; right:6%; border-color:color-mix(in srgb, var(--sd-ok) 50%, transparent); box-shadow:var(--shadow-lg), 0 0 30px -10px var(--sd-ok); }
.story-badge svg{ width:26px; height:26px; color:var(--sd-ok); flex-shrink:0; }
@keyframes sdSpin{ to{ transform:rotate(360deg); } }
@keyframes sdPulse{ 50%{ opacity:.55; } }
@keyframes sdGlitch{ 0%{ transform:translateX(0); } 50%{ transform:translateX(6px); } }

}