/* ═══════════════════════════════════════════════════════════
   NANO DRIVE v4 — style.css
   Dark cinematic automotive aesthetic · Barlow Condensed
═══════════════════════════════════════════════════════════ */
:root {
  --or:   #FFA500;
  --or2:  #CC8400;
  --or3:  #FFB733;
  --og:   rgba(255,165,0,.15);
  --og2:  rgba(255,165,0,.06);
  --bk:   #080808;
  --d0:   #0d0d0d;
  --d1:   #111;
  --d2:   #181818;
  --d3:   #202020;
  --d4:   #2a2a2a;
  --ln:   #242424;
  --ln2:  #323232;
  --tx:   #d4d4d4;
  --tm:   #6a6a6a;
  --td:   #3a3a3a;
  --wh:   #fff;
  --fd:   'Barlow Condensed', sans-serif;
  --fb:   'Barlow', sans-serif;
  --r:    6px;
  --rl:   14px;
  --rx:   22px;
  --tr:   .3s cubic-bezier(.4,0,.2,1);
  --nh:   70px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; scrollbar-gutter:stable }
body { background:var(--bk); color:var(--tx); font-family:var(--fb); font-weight:300; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased }
img,video,svg { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
ul { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:inherit }
input,select,textarea { font-family:var(--fb); font-size:.95rem }
.container { max-width:1200px; margin:0 auto; padding:0 28px }
.hidden { display:none!important }
.ctr { text-align:center }

/* ── Reveal ─────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .72s ease,transform .72s ease }
.reveal.vis { opacity:1; transform:none }

/* ── Buttons ─────────────────────────────────────────── */
.btn-or { display:inline-flex; align-items:center; gap:8px; background:var(--or); color:#000; font-family:var(--fd); font-weight:800; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; padding:13px 28px; border-radius:var(--r); border:2px solid var(--or); transition:background var(--tr),transform var(--tr),box-shadow var(--tr); cursor:pointer; white-space:nowrap }
.btn-or:hover { background:var(--or3); border-color:var(--or3); transform:translateY(-2px); box-shadow:0 10px 32px rgba(255,165,0,.32) }
.btn-gh { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--wh); font-family:var(--fd); font-weight:700; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; padding:13px 28px; border-radius:var(--r); border:2px solid var(--ln2); transition:border-color var(--tr),color var(--tr),transform var(--tr); cursor:pointer; white-space:nowrap }
.btn-gh:hover { border-color:var(--or); color:var(--or); transform:translateY(-2px) }
.btn-lg { padding:16px 36px; font-size:.92rem }
.btn-full { width:100%; justify-content:center }

/* ── Tags ─────────────────────────────────────────────── */
.tag { display:inline-flex; align-items:center; gap:7px; font-family:var(--fd); font-size:.68rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--or); border:1px solid rgba(255,165,0,.22); background:var(--og2); padding:5px 14px; border-radius:20px }
.tag::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--or); flex-shrink:0 }

/* ── Section headings ─────────────────────────────────── */
.sec-hd { text-align:center; margin-bottom:58px }
.sec-hd h2 { font-family:var(--fd); font-weight:900; font-size:clamp(2rem,5vw,3.5rem); line-height:.94; text-transform:uppercase; color:var(--wh); margin-top:16px }
.sec-hd h2 em { font-style:normal; color:var(--or) }
.sec-p { margin-top:14px; color:var(--tm); font-size:.9rem; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.7 }

/* ── Section backgrounds ──────────────────────────────── */
.s-dark { padding:96px 0; background:var(--d1) }
.s-black { padding:96px 0; background:var(--d0) }

/* ══════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════ */
#navbar { position:fixed; inset:0 0 auto 0; height:var(--nh); z-index:1000; background:rgba(8,8,8,.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid transparent; transition:background var(--tr),box-shadow var(--tr),border-color var(--tr) }
#navbar.scrolled { background:rgba(8,8,8,.95); border-bottom-color:var(--ln); box-shadow:0 4px 30px rgba(0,0,0,.5) }
.nav-inner { max-width:1200px; margin:0 auto; padding:0 28px; height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px }

/* Real logo image in nav */
.nav-logo-img { height:156px; width:auto; display:block }
.nav-logo-wrap { display:flex; align-items:center; flex-shrink:0 }

.nav-links { display:flex; align-items:center; gap:26px; flex-shrink:0 }
.nav-links a { font-family:var(--fd); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tm); transition:color var(--tr); position:relative; white-space:nowrap }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px; background:var(--or); transition:width var(--tr) }
.nav-links a:hover,.nav-links a.active { color:var(--wh) }
.nav-links a:hover::after,.nav-links a.active::after { width:100% }
.nav-cta { background:var(--or)!important; color:#000!important; padding:9px 20px!important; border-radius:var(--r)!important; font-weight:800!important }
.nav-cta::after { display:none!important }
.nav-cta:hover { background:var(--or3)!important; color:#000!important }

/* language switch */
.nav-lang { display:flex; align-items:center }
.lang-switch { display:inline-flex; border:1px solid rgba(255,255,255,.22); border-radius:var(--r); overflow:hidden }
.lang-switch button { font-family:var(--fd); font-weight:700; font-size:.72rem; letter-spacing:.08em; padding:6px 10px; background:transparent; color:var(--tm); border:0; cursor:pointer; transition:background var(--tr),color var(--tr) }
.lang-switch button + button { border-left:1px solid rgba(255,255,255,.22) }
.lang-switch button:hover { color:var(--wh) }
.lang-switch button.on { background:var(--or); color:#000 }
.lang-switch-mobile { display:none }

/* services & prices list */
.price-grid { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px }
.price-row { display:flex; align-items:center; justify-content:space-between; gap:20px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--rl); padding:18px 24px; transition:border-color var(--tr),background var(--tr) }
.price-row:hover { border-color:rgba(255,165,0,.35); background:rgba(255,255,255,.06) }
.price-row strong { display:block; font-family:var(--fd); font-size:1.05rem; color:var(--wh); letter-spacing:.02em }
.price-row span { display:block; font-size:.85rem; color:var(--tm); margin-top:3px }
.price-amt { font-family:var(--fd); font-weight:900; font-size:1.25rem; color:var(--or); white-space:nowrap }
@media (max-width:520px) { .price-row { flex-direction:column; align-items:flex-start; gap:8px } }

.nav-toggle { display:none; flex-direction:column; gap:5px; padding:6px 4px; z-index:10 }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--wh); border-radius:2px; transition:var(--tr); transform-origin:center }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
#hero { position:relative; height:100svh; min-height:600px; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden }
#heroVideo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38 }
#hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 90% at 30% 50%,rgba(255,165,0,.07),transparent 65%),linear-gradient(160deg,#0e0e0e,#080808); z-index:0 }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.08),transparent 38%,rgba(8,8,8,.88) 100%); z-index:1 }

.hero-content { position:relative; z-index:3; text-align:center; padding:0 24px; padding-top:calc(var(--nh) - 30px) }
.hero-eyebrow { display:flex; align-items:center; justify-content:center; gap:14px; font-family:var(--fd); font-size:.7rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--or); margin-bottom:26px; opacity:0; animation:fadeUp .7s .2s forwards }
.pdot { width:5px; height:5px; border-radius:50%; background:var(--or); flex-shrink:0; animation:pulse 2.2s infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }

.hero-title { display:flex; flex-direction:column; font-family:var(--fd); font-weight:900; font-size:clamp(3.2rem,11vw,9.5rem); line-height:.88; letter-spacing:-.01em; text-transform:uppercase; margin-bottom:24px; opacity:0; animation:fadeUp .8s .4s forwards }
.ht-a { color:var(--wh); display:block }
.ht-b { color:var(--or); display:block; text-shadow:0 0 90px rgba(255,165,0,.22) }

/* Hero logo display (large, centered) */
.hero-logo-display { display:flex; justify-content:center; margin-bottom:28px; opacity:0; animation:fadeUp .8s .3s forwards }
.hero-logo-display img { height:80px; width:auto }

.hero-sub { font-size:clamp(.78rem,1.4vw,.92rem); color:var(--tm); letter-spacing:.1em; text-transform:uppercase; margin-bottom:38px; opacity:0; animation:fadeUp .8s .6s forwards }
.hero-acts { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; opacity:0; animation:fadeUp .8s .8s forwards }

.hero-ticker { position:absolute; bottom:0; left:0; right:0; z-index:4; background:var(--or); overflow:hidden; padding:9px 0 }
.ticker-inner { display:flex; animation:ticker 22s linear infinite; white-space:nowrap }
.ticker-inner span { font-family:var(--fd); font-weight:700; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:#000; padding:0 22px; flex-shrink:0 }
.ticker-inner .sep { opacity:.4; padding:0 4px }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }

/* ══════════════════════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════════════════════ */
.page-hero { padding:calc(var(--nh) + 70px) 0 80px; background:linear-gradient(160deg,var(--d0),var(--bk)); position:relative; overflow:hidden; text-align:center }
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(255,165,0,.055),transparent 70%); pointer-events:none }
.page-hero-c { position:relative; z-index:2; padding:0 28px; max-width:720px; margin:0 auto }
.page-hero .tag { margin-bottom:20px }
.page-hero h1 { font-family:var(--fd); font-weight:900; font-size:clamp(2.6rem,8vw,6rem); line-height:.92; text-transform:uppercase; color:var(--wh); margin-bottom:18px }
.page-hero h1 em { font-style:normal; color:var(--or) }
.page-hero p { color:var(--tm); font-size:.96rem; margin-bottom:28px; line-height:1.68 }
.page-hero-acts { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* ══════════════════════════════════════════════════════
   SERVICES GRID (home)
══════════════════════════════════════════════════════ */
.svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
.svc-card { display:flex; flex-direction:column; background:var(--d2); border:1px solid var(--ln); border-radius:var(--rl); padding:32px 24px; transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr); cursor:pointer; position:relative; overflow:hidden }
.svc-card::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 50% at 80% 20%,rgba(255,165,0,.04),transparent 70%); opacity:0; transition:opacity var(--tr) }
.svc-card:hover { border-color:var(--or); transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.45) }
.svc-card:hover::after { opacity:1 }
.svc-card.featured { border-color:rgba(255,165,0,.35); background:linear-gradient(150deg,var(--d2),#180f00) }
.svc-card.studio-card { border-color:rgba(255,165,0,.2) }
.svc-badge { position:absolute; top:16px; right:16px; font-family:var(--fd); font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:var(--or); color:#000; padding:3px 10px; border-radius:20px }
.svc-num { font-family:var(--fd); font-weight:900; font-size:3.6rem; color:var(--d4); line-height:1; margin-bottom:14px; transition:color var(--tr) }
.svc-card:hover .svc-num { color:rgba(255,165,0,.1) }
.svc-ico { width:46px; height:46px; color:var(--or); margin-bottom:16px }
.svc-ico svg { width:100%; height:100% }
.svc-card h3 { font-family:var(--fd); font-weight:800; font-size:1.3rem; letter-spacing:.04em; text-transform:uppercase; color:var(--wh); margin-bottom:10px }
.svc-card p { font-size:.86rem; color:var(--tm); line-height:1.6; flex:1; margin-bottom:20px }
.svc-link { font-family:var(--fd); font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--or); margin-top:auto }
.svc-card:hover .svc-link { text-decoration:underline }

/* ══════════════════════════════════════════════════════
   BEFORE/AFTER SLIDER GALLERY
══════════════════════════════════════════════════════ */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.gallery-grid.full-gallery { grid-template-columns:repeat(3,1fr) }

.gallery-card { background:var(--d2); border:1px solid var(--ln); border-radius:var(--rl); overflow:hidden; transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr) }
.gallery-card:hover { border-color:rgba(255,165,0,.35); transform:translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,.5) }

/* The slider itself */
.gc-slider { position:relative; aspect-ratio:16/10; overflow:hidden; cursor:col-resize; user-select:none }
.gc-before, .gc-after { position:absolute; inset:0 }
.gc-before img, .gc-after img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none }
.gc-before { z-index:1 }
.gc-after { z-index:2; clip-path:inset(0 50% 0 0) }

.gc-divider { position:absolute; top:0; bottom:0; left:50%; z-index:3; width:3px; background:var(--or); transform:translateX(-50%); cursor:col-resize }
.gc-handle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%; background:var(--or); border:3px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; box-shadow:0 0 20px rgba(255,165,0,.5); transition:transform var(--tr) }
.gc-handle:hover { transform:translate(-50%,-50%) scale(1.15) }
.gc-handle svg { width:18px; height:18px }

.gc-badge { position:absolute; top:12px; font-family:var(--fd); font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding:4px 10px; border-radius:20px; z-index:4 }
.before-badge { left:12px; background:rgba(20,20,20,.85); color:var(--tm); border:1px solid var(--ln2); backdrop-filter:blur(6px) }
.after-badge { right:12px; background:rgba(255,165,0,.9); color:#000; z-index:5 }

.gc-info { padding:18px 16px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.gc-il strong { display:block; font-family:var(--fd); font-weight:700; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; color:var(--wh); margin-bottom:4px }
.gc-il p { font-size:.78rem; color:var(--tm); line-height:1.55 }
.gc-stag { font-family:var(--fd); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--or); border:1px solid rgba(255,165,0,.22); background:var(--og2); padding:4px 10px; border-radius:20px; flex-shrink:0; margin-top:2px }

/* ══════════════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════════════ */
.stats-bar { background:var(--d2); border-top:1px solid var(--ln); border-bottom:1px solid var(--ln); padding:32px 0; display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap }
.sb-item { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 48px }
.sb-n { font-family:var(--fd); font-weight:900; font-size:2.4rem; color:var(--or); line-height:1 }
.sb-n small { font-size:1rem }
.sb-l { font-size:.7rem; color:var(--tm); text-transform:uppercase; letter-spacing:.1em }
.sb-div { width:1px; height:48px; background:var(--ln) }

/* ══════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════ */
.test-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.tc { background:var(--d2); border:1px solid var(--ln); border-radius:var(--rl); padding:26px 22px; transition:border-color var(--tr) }
.tc:hover { border-color:rgba(255,165,0,.25) }
.tc-stars { color:var(--or); font-size:.95rem; margin-bottom:12px; letter-spacing:.05em }
.tc p { font-size:.86rem; color:var(--tm); line-height:1.65; font-style:italic; margin-bottom:14px }
.tc strong { font-size:.78rem; color:var(--or); font-family:var(--fd); letter-spacing:.08em; text-transform:uppercase }
.tc-avatar { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:1.1rem; font-weight:900; color:#fff; margin:0 auto 16px; letter-spacing:.04em; box-shadow:0 4px 16px rgba(0,0,0,.5); flex-shrink:0 }
.tv-avatar { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:4rem; font-weight:900; color:rgba(255,255,255,.18); letter-spacing:-.02em; z-index:0; user-select:none }
.tv-thumb { position:relative }
.tv-play { position:relative; z-index:1 }

/* ══════════════════════════════════════════════════════
   MAP
══════════════════════════════════════════════════════ */
.map-wrap { display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start }
.map-frame { height:380px; border-radius:var(--rl); overflow:hidden; border:1px solid var(--ln) }
.map-frame iframe { width:100%; height:100% }
.map-info { display:flex; flex-direction:column; gap:12px }
.mi { display:flex; gap:13px; align-items:flex-start; background:var(--d2); border:1px solid var(--ln); border-radius:var(--r); padding:14px }
.mi svg { width:18px; height:18px; flex-shrink:0; margin-top:2px }
.mi strong { font-size:.83rem; color:var(--wh); display:block; margin-bottom:2px }
.mi p { font-size:.78rem; color:var(--tm); line-height:1.5 }

/* Social icons */
.social-row { display:flex; gap:10px }
.soc-btn { width:38px; height:38px; border-radius:50%; background:var(--d3); border:1px solid var(--ln2); display:flex; align-items:center; justify-content:center; color:var(--tm); transition:background var(--tr),color var(--tr),border-color var(--tr); flex-shrink:0 }
.soc-btn svg { width:16px; height:16px }
.soc-btn:hover { background:var(--or); color:#000; border-color:var(--or) }

/* ══════════════════════════════════════════════════════
   STUDIO PAGE
══════════════════════════════════════════════════════ */
.studio-steps { display:flex; flex-direction:column; gap:0 }
.ss-item { display:flex; gap:28px; align-items:flex-start; padding:28px 0; border-bottom:1px solid var(--ln) }
.ss-item:last-child { border-bottom:none }
.ss-n { font-family:var(--fd); font-weight:900; font-size:3.2rem; color:var(--or); line-height:1; flex-shrink:0; width:60px; opacity:.5 }
.ss-content h4 { font-family:var(--fd); font-weight:700; font-size:1.2rem; text-transform:uppercase; color:var(--wh); margin-bottom:8px; letter-spacing:.04em }
.ss-content p { font-size:.88rem; color:var(--tm); line-height:1.68 }

.pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.pkg-card { background:var(--d2); border:1px solid var(--ln); border-radius:var(--rl); padding:32px 26px; position:relative; transition:border-color var(--tr),transform var(--tr) }
.pkg-card:hover { border-color:rgba(255,165,0,.3); transform:translateY(-3px) }
.pkg-card.featured { border-color:rgba(255,165,0,.5); box-shadow:0 0 40px rgba(255,165,0,.07) }
.pkg-rec { position:absolute; top:20px; right:20px; font-family:var(--fd); font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:var(--or); color:#000; padding:4px 10px; border-radius:20px }
.pkg-tier { font-family:var(--fd); font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--or); margin-bottom:10px }
.pkg-card h3 { font-family:var(--fd); font-weight:800; font-size:1.5rem; text-transform:uppercase; color:var(--wh); margin-bottom:10px }
.pkg-card p { font-size:.86rem; color:var(--tm); line-height:1.65; margin-bottom:20px }
.pkg-list { display:flex; flex-direction:column; gap:8px; margin-bottom:26px }
.pkg-list li { font-size:.83rem; color:var(--tm); padding-left:16px; position:relative }
.pkg-list li::before { content:'→'; position:absolute; left:0; color:var(--or); font-size:.72rem }

/* ══════════════════════════════════════════════════════
   GRAPHENE PAGE
══════════════════════════════════════════════════════ */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start }
.lead { font-size:.96rem; color:var(--tm); line-height:1.75; margin-bottom:24px }

.compare-table { background:var(--d3); border:1px solid var(--ln); border-radius:var(--rl); overflow:hidden; margin-bottom:0 }
.ct-head,.ct-row { display:grid; grid-template-columns:1.7fr 1fr 1fr }
.ct-head { background:var(--d4); border-bottom:1px solid var(--ln) }
.ct-head span,.ct-row span { padding:11px 14px; font-size:.78rem; color:var(--tm); border-right:1px solid var(--ln) }
.ct-head span:last-child,.ct-row span:last-child { border-right:none }
.ct-head span { font-family:var(--fd); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase }
.ct-row { border-bottom:1px solid var(--ln) }
.ct-row:last-child { border-bottom:none }
.ct-row span:first-child { color:var(--tx) }
.win { color:var(--or)!important; font-weight:600!important; background:rgba(255,165,0,.04)!important }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.sg-c { background:var(--d2); border:1px solid var(--ln); border-radius:var(--r); padding:20px 16px; text-align:center; transition:border-color var(--tr),transform var(--tr) }
.sg-c:hover { border-color:rgba(255,165,0,.35); transform:translateY(-2px) }
.sg-c.wide { grid-column:1/-1 }
.sg-v { font-family:var(--fd); font-weight:900; font-size:2.4rem; color:var(--or); line-height:1; margin-bottom:6px }
.sg-v small { font-size:1.1rem }
.sg-l { font-size:.68rem; color:var(--tm); text-transform:uppercase; letter-spacing:.06em }

.tier-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px }
.tier-card { background:var(--d2); border:1px solid var(--ln); border-radius:var(--rl); overflow:hidden; position:relative; transition:border-color var(--tr),transform var(--tr) }
.tier-card:hover { border-color:rgba(255,165,0,.3); transform:translateY(-3px) }
.tier-card.featured { border-color:rgba(255,165,0,.5); box-shadow:0 0 40px rgba(255,165,0,.08) }
.tier-rec { position:absolute; top:14px; right:14px; font-family:var(--fd); font-size:.6rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:var(--or); color:#000; padding:4px 10px; border-radius:20px }
.light-swatch { height:90px; background:linear-gradient(135deg,#f0f0f0,#d0d0d0) }
.dark-swatch  { height:90px; background:linear-gradient(135deg,#1a1a1a,#2a2a2a) }
.tier-body { padding:22px }
.tier-badge { display:inline-block; font-family:var(--fd); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:4px 12px; border-radius:20px; margin-bottom:12px }
.light-badge { background:#e8e8e8; color:#111 }
.dark-badge  { background:#1a1a1a; color:var(--or); border:1px solid var(--or) }
.tier-card h3 { font-family:var(--fd); font-weight:800; font-size:1.5rem; text-transform:uppercase; color:var(--wh); margin-bottom:10px }
.tier-card p { font-size:.84rem; color:var(--tm); line-height:1.65; margin-bottom:16px }
.tier-list { display:flex; flex-direction:column; gap:7px; margin-bottom:22px }
.tier-list li { font-size:.82rem; color:var(--tm); padding-left:16px; position:relative }
.tier-list li::before { content:'→'; position:absolute; left:0; color:var(--or); font-size:.72rem }

.care-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.care-card { background:var(--d2); border:1px solid var(--ln); border-radius:var(--rl); padding:24px 20px; transition:border-color var(--tr),transform var(--tr) }
.care-card:hover { border-color:rgba(255,165,0,.28); transform:translateY(-2px) }
.cc-n { font-family:var(--fd); font-weight:900; font-size:2.8rem; color:var(--d4); line-height:1; margin-bottom:10px }
.care-card h4 { font-family:var(--fd); font-weight:700; font-size:1.05rem; text-transform:uppercase; color:var(--wh); margin-bottom:8px }
.care-card p { font-size:.82rem; color:var(--tm); line-height:1.65 }

/* ══════════════════════════════════════════════════════
   SERVICE DETAIL PAGES
══════════════════════════════════════════════════════ */
.sdg-left .tag { margin-bottom:16px }
.sdg-left h2 { font-family:var(--fd); font-weight:900; font-size:clamp(2rem,4vw,3rem); line-height:.95; text-transform:uppercase; color:var(--wh); margin-bottom:16px }
.sdg-left h2 em { font-style:normal; color:var(--or) }

.inc-list { display:flex; flex-direction:column; gap:14px; margin-bottom:30px }
.inc { display:flex; gap:14px; align-items:flex-start }
.ic { width:24px; height:24px; border-radius:50%; background:rgba(255,165,0,.1); border:1px solid rgba(255,165,0,.28); color:var(--or); font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px }
.inc strong { font-size:.9rem; color:var(--wh); display:block; margin-bottom:3px }
.inc p { font-size:.8rem; color:var(--tm) }

.stat-box { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px }
.sbx { background:var(--d3); border:1px solid var(--ln); border-radius:var(--r); padding:16px 12px; text-align:center }
.sbx-n { display:block; font-family:var(--fd); font-weight:900; font-size:1.6rem; color:var(--or); line-height:1; margin-bottom:6px }
.sbx-l { font-size:.66rem; color:var(--tm); text-transform:uppercase; letter-spacing:.06em }

.tip { display:flex; gap:12px; align-items:flex-start; background:var(--d3); border:1px solid rgba(255,165,0,.18); border-radius:var(--r); padding:16px }
.tip-ic { font-size:1.2rem; flex-shrink:0; margin-top:2px }
.tip strong { font-size:.86rem; color:var(--wh); display:block; margin-bottom:4px }
.tip p { font-size:.8rem; color:var(--tm) }

.tint-lvls { background:var(--d3); border:1px solid var(--ln); border-radius:var(--rl); padding:22px }
.tl { display:flex; align-items:center; gap:12px; margin-bottom:12px }
.tl:last-child { margin-bottom:0 }
.tl-bar { flex:1; height:32px; border-radius:var(--r); border:1px solid var(--ln2) }
.tl span { font-size:.8rem; color:var(--tm); white-space:nowrap; min-width:160px }

/* ══════════════════════════════════════════════════════
   PRODUCTS PAGE
══════════════════════════════════════════════════════ */
.pf-list { display:flex; flex-direction:column; gap:28px }
.pf-card { display:grid; grid-template-columns:360px 1fr; background:var(--d2); border:1px solid var(--ln); border-radius:var(--rl); overflow:hidden; transition:border-color var(--tr),transform var(--tr),box-shadow var(--tr) }
.pf-card:hover { border-color:rgba(255,165,0,.3); transform:translateY(-2px); box-shadow:0 18px 50px rgba(0,0,0,.4) }
.pf-card.featured { border-color:rgba(255,165,0,.42); box-shadow:0 0 40px rgba(255,165,0,.07) }
.pf-img { position:relative; overflow:hidden }
.pf-img img { width:100%; height:100%; object-fit:cover; transition:transform .55s ease,filter .4s ease; filter:brightness(.88) saturate(.75) }
.pf-card:hover .pf-img img { transform:scale(1.04); filter:brightness(.95) saturate(.9) }
.pf-cat { position:absolute; top:14px; left:14px; font-family:var(--fd); font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:rgba(8,8,8,.8); color:var(--or); border:1px solid rgba(255,165,0,.28); backdrop-filter:blur(6px); padding:4px 12px; border-radius:20px }
.pf-cat.pro { background:var(--or); color:#000; border-color:var(--or) }
.pf-inf { padding:28px 24px; display:flex; flex-direction:column; gap:11px }
.pf-inf h3 { font-family:var(--fd); font-weight:800; font-size:1.55rem; text-transform:uppercase; color:var(--wh) }
.pf-inf h3 em { font-style:normal; color:var(--or) }
.pf-inf p { font-size:.87rem; color:var(--tm); line-height:1.65 }
.pf-tags { display:flex; flex-wrap:wrap; gap:6px }
.pf-tags span { font-family:var(--fd); font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--or); border:1px solid rgba(255,165,0,.18); background:var(--og2); padding:3px 10px; border-radius:20px }
.pf-feats { display:flex; flex-direction:column; gap:7px; flex:1 }
.pff { font-size:.82rem; color:var(--tm); display:flex; gap:8px }
.pff span { color:var(--or) }

/* ══════════════════════════════════════════════════════
   TESTIMONIALS PAGE
══════════════════════════════════════════════════════ */
.vid-notice { display:flex; gap:16px; align-items:flex-start; background:var(--d2); border:1px solid rgba(255,165,0,.18); border-radius:var(--rl); padding:20px 22px; margin-bottom:36px }
.vn-ic { font-size:1.8rem; flex-shrink:0 }
.vid-notice strong { font-size:.9rem; color:var(--wh); display:block; margin-bottom:5px }
.vid-notice p { font-size:.82rem; color:var(--tm); line-height:1.65 }

.tv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.tv-card { background:var(--d2); border:1px solid var(--ln); border-radius:var(--rl); overflow:hidden; transition:border-color var(--tr),transform var(--tr) }
.tv-card:hover { border-color:rgba(255,165,0,.32); transform:translateY(-3px) }
.tv-thumb { aspect-ratio:16/9; background:var(--d3); display:flex; align-items:center; justify-content:center; position:relative }
.tv-play { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; height:100%; justify-content:center; transition:background var(--tr) }
.tv-play:hover { background:rgba(255,165,0,.05) }
.tv-pi { width:54px; height:54px }
.tv-pi svg { width:100%; height:100% }
.tv-play span { font-family:var(--fd); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--tm) }
.tv-info { padding:18px 16px }
.tvs { color:var(--or); font-size:.88rem; margin-bottom:9px; letter-spacing:.05em }
.tv-info h4 { font-family:var(--fd); font-weight:700; font-size:1rem; text-transform:uppercase; color:var(--wh); margin-bottom:7px }
.tv-info p { font-size:.82rem; color:var(--tm); line-height:1.6; font-style:italic; margin-bottom:11px }
.tv-lnk { display:inline-flex; align-items:center; gap:6px; font-family:var(--fd); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--or) }
.tv-lnk:hover { text-decoration:underline }
.fb-th { background:var(--d2); flex-direction:column; gap:12px; color:#1877F2 }
.fb-th svg { width:52px; height:52px }
.fb-th p { font-family:var(--fd); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--tm) }
.tv-card.fb-cta .tv-info h4 { color:var(--or) }

/* ══════════════════════════════════════════════════════
   BOOKING PAGE
══════════════════════════════════════════════════════ */
.booking-layout { display:grid; grid-template-columns:1fr 380px; gap:26px; align-items:start }
.booking-form-card { background:var(--d2); border:1px solid var(--ln); border-radius:var(--rx); padding:38px 32px }
.form-sec-ttl { font-family:var(--fd); font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--or); border-bottom:1px solid var(--ln); padding-bottom:10px; margin-bottom:18px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.fg { display:flex; flex-direction:column; gap:6px; margin-bottom:14px }
.fg label { font-family:var(--fd); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--tm) }
.fg label span { color:var(--or) }
.fg input,.fg select,.fg textarea { background:var(--d3); border:1px solid var(--ln2); border-radius:var(--r); color:var(--wh); padding:12px 14px; transition:border-color var(--tr),box-shadow var(--tr); outline:none; width:100%; -webkit-appearance:none }
.fg input::placeholder { color:var(--td) }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--or); box-shadow:0 0 0 3px rgba(255,165,0,.1) }
.fg select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; cursor:pointer }
.fg select option { background:var(--d3); color:var(--wh) }
.fg textarea { resize:vertical; min-height:80px }
.ferr { font-size:.74rem; color:#ff6464; min-height:14px }

.ge-block { margin-bottom:14px }
.ge-block.hidden { display:none }
.ge-info { display:flex; gap:12px; align-items:flex-start; background:rgba(255,165,0,.07); border:1px solid rgba(255,165,0,.28); border-radius:var(--r); padding:14px 15px }
.ge-ico { font-size:1.2rem; flex-shrink:0 }
.ge-info strong { font-size:.86rem; color:var(--or); display:block; margin-bottom:4px }
.ge-info p { font-size:.8rem; color:var(--tm) }

.upload-zone { position:relative; background:var(--d3); border:2px dashed var(--ln2); border-radius:var(--rl); padding:26px; text-align:center; cursor:pointer; transition:border-color var(--tr),background var(--tr) }
.upload-zone:hover,.upload-zone.drag-over { border-color:var(--or); background:var(--og2) }
.upload-zone input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100% }
.uz-c { pointer-events:none; display:flex; flex-direction:column; align-items:center; gap:10px }
.uz-c svg { width:38px; height:38px; color:var(--or) }
.uz-c p { font-size:.86rem; color:var(--tm); line-height:1.5 }
.uz-c p strong { color:var(--wh) }
.uz-c small { font-size:.7rem; color:var(--td) }
.photo-previews { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }
.pp { position:relative; width:78px; height:78px; border-radius:var(--r); overflow:hidden; border:1px solid var(--ln2) }
.pp img { width:100%; height:100%; object-fit:cover }
.pp .rm { position:absolute; top:3px; right:3px; width:17px; height:17px; border-radius:50%; background:rgba(0,0,0,.75); color:var(--wh); font-size:.68rem; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none }

.gcal-row { display:flex; gap:12px; align-items:center; background:var(--d3); border:1px solid rgba(255,165,0,.14); border-radius:var(--r); padding:12px 14px; margin-bottom:18px }
.gcal-row svg { width:17px; height:17px; flex-shrink:0 }
.gcal-row p { font-size:.78rem; color:var(--tm) }
.gcal-row strong { color:var(--wh) }

.success-msg { text-align:center; padding:32px 16px }
.succ-ico { width:62px; height:62px; margin:0 auto 18px }
.succ-ico svg { width:100%; height:100% }
.success-msg h3 { font-family:var(--fd); font-weight:800; font-size:1.6rem; text-transform:uppercase; color:var(--wh); margin-bottom:10px }
.success-msg p { color:var(--tm); margin-bottom:22px; font-size:.9rem }
.succ-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
#btnLoader { display:inline-flex; align-items:center }
#btnLoader svg { animation:spin .8s linear infinite }
@keyframes spin { to{transform:rotate(360deg)} }

.booking-sidebar { display:flex; flex-direction:column; gap:14px }
.mini-cal { background:var(--d2); border:1px solid var(--ln); border-radius:var(--rl); padding:20px }
.cal-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.cal-hdr button { font-size:1.1rem; color:var(--tm); width:28px; height:28px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; transition:color var(--tr),background var(--tr) }
.cal-hdr button:hover { color:var(--or); background:var(--og) }
#calMonthYear { font-family:var(--fd); font-weight:700; font-size:.88rem; letter-spacing:.08em; text-transform:uppercase; color:var(--wh) }
.cal-days-hdr { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:6px }
.cal-days-hdr span { font-family:var(--fd); font-size:.62rem; font-weight:700; text-transform:uppercase; color:var(--td); padding:3px 0 }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.cal-day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:.76rem; border-radius:var(--r); cursor:pointer; transition:background var(--tr),color var(--tr); color:var(--tx) }
.cal-day:hover:not(.empty):not(.past):not(.closed) { background:var(--og); color:var(--or) }
.cal-day.today { background:var(--or); color:#000; font-weight:700 }
.cal-day.selected { background:var(--or2); color:#000; font-weight:700 }
.cal-day.empty,.cal-day.past,.cal-day.closed { color:var(--d4); cursor:default; pointer-events:none }

.sb-info { display:flex; flex-direction:column; gap:10px }
.sbi { display:flex; gap:12px; align-items:flex-start; background:var(--d2); border:1px solid var(--ln); border-radius:var(--r); padding:13px }
.sbi svg { width:16px; height:16px; flex-shrink:0; margin-top:2px }
.sbi strong { font-size:.8rem; color:var(--wh); display:block; margin-bottom:2px }
.sbi p { font-size:.76rem; color:var(--tm) }
.sb-map { border-radius:var(--rl); overflow:hidden; border:1px solid var(--ln) }
.sb-map iframe { width:100%; height:190px; display:block }

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
#footer { background:var(--d1); border-top:1px solid var(--ln); padding:60px 0 28px }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:40px; margin-bottom:40px }
.footer-brand .footer-logo { display:inline-flex; align-items:center; margin-bottom:14px }
.footer-logo-img { height:36px; width:auto }
.ft-sub { font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--tm); margin-bottom:14px; line-height:1.6 }
.footer-col { display:flex; flex-direction:column; gap:10px }
.footer-col h5 { font-family:var(--fd); font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--or); margin-bottom:4px }
.footer-col a { font-size:.82rem; color:var(--tm); transition:color var(--tr) }
.footer-col a:hover { color:var(--wh) }
.footer-btm { border-top:1px solid var(--ln); padding-top:20px; font-size:.74rem; color:var(--td); text-align:center }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .svc-grid { grid-template-columns:1fr 1fr }
  .two-col { grid-template-columns:1fr; gap:36px }
  .booking-layout { grid-template-columns:1fr }
  .booking-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:14px }
  .map-wrap { grid-template-columns:1fr }
  .map-frame { height:280px }
  .footer-grid { grid-template-columns:1fr 1fr }
  .gallery-grid { grid-template-columns:repeat(2,1fr) }
}
/* Collapse the nav to the hamburger early: the full desktop nav (worst case is
   the 8-link windshield page) overflows and pushes the EN/FR toggle off-screen
   between ~769–960px. Below 1000px we use the mobile layout, which puts the
   always-visible .lang-switch-mobile next to the hamburger. */
@media(max-width:1000px) {
  .nav-links { display:none; flex-direction:column; align-items:stretch; position:fixed; top:var(--nh); left:0; right:0; background:rgba(8,8,8,.97); backdrop-filter:blur(20px); border-bottom:1px solid var(--ln); padding:8px 0 20px; max-height:calc(100svh - var(--nh)); overflow-y:auto; z-index:999 }
  .nav-links.open { display:flex }
  .nav-links li { width:100% }
  .nav-links a { display:block; padding:13px 22px; border-bottom:1px solid var(--ln); font-size:.86rem }
  .nav-links a::after { display:none }
  .nav-cta { margin:13px 18px 0!important; text-align:center!important; border-radius:var(--r)!important; border-bottom:none!important }
  .nav-logo-img { height:96px }
  .nav-toggle { display:flex }
  .lang-switch-mobile { display:inline-flex; margin-left:auto; margin-right:14px }
  .nav-lang { display:none }
}
@media(max-width:860px) {
  .pf-card { grid-template-columns:1fr }
  .pf-img { aspect-ratio:16/9 }
  .pkg-grid { grid-template-columns:1fr }
  .care-grid { grid-template-columns:1fr 1fr }
  .tier-grid { grid-template-columns:1fr }
  .test-grid { grid-template-columns:1fr }
  .tv-grid { grid-template-columns:1fr 1fr }
}
@media(max-width:768px) {
  :root { --nh:60px }
  .s-dark,.s-black { padding:72px 0 }
  .container { padding:0 18px }
  .svc-grid { grid-template-columns:1fr }
  .gallery-grid,.gallery-grid.full-gallery { grid-template-columns:1fr }
  .booking-sidebar { display:flex; flex-direction:column }
  .booking-form-card { padding:22px 16px }
  .form-row { grid-template-columns:1fr; gap:0 }
  .stats-bar { gap:0; flex-direction:column }
  .sb-item { padding:22px 0 }
  .sb-div { width:80%; height:1px; background:var(--ln) }
  .care-grid { grid-template-columns:1fr }
  .tv-grid { grid-template-columns:1fr }
  .footer-grid { grid-template-columns:1fr 1fr; gap:24px }
  .hero-logo-display img { height:60px }
}
@media(max-width:480px) {
  .hero-acts { flex-direction:column; align-items:center }
  .hero-acts .btn-or,.hero-acts .btn-gh { width:100%; max-width:280px; justify-content:center }
  .footer-grid { grid-template-columns:1fr }
  .succ-btns { flex-direction:column; align-items:center }
  .page-hero-acts { flex-direction:column; align-items:center }
  .pkg-grid { grid-template-columns:1fr }
}

/* ══════════════════════════════════════════════════════
   GRAPHENE CONFIGURATOR
══════════════════════════════════════════════════════ */
.configurator { display:flex; flex-direction:column; gap:0; max-width:960px; margin:0 auto }

.cfg-step { background:var(--d2); border:1px solid var(--ln); border-radius:var(--rl); padding:32px 30px; margin-bottom:16px; transition:border-color var(--tr) }
.cfg-step:focus-within { border-color:rgba(255,165,0,.3) }
.cfg-step.cfg-result { border-color:rgba(255,165,0,.4); background:linear-gradient(145deg,var(--d2),#160e00) }

.cfg-step-header { display:flex; align-items:flex-start; gap:20px; margin-bottom:26px }
.cfg-step-num { font-family:var(--fd); font-weight:900; font-size:2.4rem; color:var(--or); line-height:1; flex-shrink:0; width:50px; opacity:.7 }
.cfg-step-header h3 { font-family:var(--fd); font-weight:700; font-size:1.25rem; text-transform:uppercase; color:var(--wh); margin-bottom:4px; letter-spacing:.04em }
.cfg-step-header p { font-size:.82rem; color:var(--tm) }

/* Colour palette */
.color-palette { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:20px }
.color-swatch { border-radius:var(--r); aspect-ratio:1; cursor:pointer; border:3px solid transparent; transition:transform var(--tr),border-color var(--tr),box-shadow var(--tr); display:flex; align-items:flex-end; padding:6px; overflow:hidden; position:relative }
.color-swatch:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(0,0,0,.4) }
.color-swatch.selected { border-color:var(--or)!important; box-shadow:0 0 0 2px var(--or),0 6px 20px rgba(255,165,0,.35) }
.color-swatch span { font-family:var(--fd); font-size:.58rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); line-height:1.2; pointer-events:none }
.color-swatch.light-color span { color:#111; text-shadow:0 1px 2px rgba(255,255,255,.6) }
.cfg-selected { background:var(--d3); border:1px solid var(--ln2); border-radius:var(--r); padding:10px 14px; font-size:.82rem; color:var(--tm) }
#colorSelectedText { color:var(--or) }

/* Vehicle categories */
.vehicle-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.vcat-btn { background:var(--d3); border:2px solid var(--ln2); border-radius:var(--rl); padding:22px 18px; cursor:pointer; transition:border-color var(--tr),background var(--tr),transform var(--tr); display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--tm) }
.vcat-btn:hover { border-color:rgba(255,165,0,.4); color:var(--wh); transform:translateY(-2px) }
.vcat-btn.selected { border-color:var(--or); background:rgba(255,165,0,.06); color:var(--wh) }
.vcat-btn svg { width:72px; height:auto }
.vcat-btn span { font-family:var(--fd); font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.06em; color:inherit }
.vcat-btn small { font-size:.73rem; color:var(--tm); text-align:center; line-height:1.4 }

/* Recommendation card */
.recommendation-card { border-radius:var(--rl); overflow:hidden }
.rec-header { padding:24px 24px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px }
.rec-header.dark-rec { background:linear-gradient(135deg,#1a1a1a,#2a1500) }
.rec-header.light-rec { background:linear-gradient(135deg,#2a2a2a,#1a1200) }
.rec-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--fd); font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; background:var(--or); color:#000; padding:5px 14px; border-radius:20px; margin-bottom:10px }
.rec-title { font-family:var(--fd); font-weight:900; font-size:2rem; text-transform:uppercase; color:var(--wh); line-height:1 }
.rec-subtitle { font-size:.84rem; color:var(--tm); margin-top:6px }
.rec-years { font-family:var(--fd); font-weight:900; font-size:4rem; color:var(--or); line-height:1; text-align:right; flex-shrink:0 }
.rec-years small { font-size:1.5rem }
.rec-body { padding:22px 24px; background:var(--d3); border-top:1px solid var(--ln) }
.rec-why { font-size:.86rem; color:var(--tm); line-height:1.7; margin-bottom:18px; padding:14px; background:var(--d2); border-radius:var(--r); border-left:3px solid var(--or) }
.rec-features { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:22px }
.rec-feat { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--tx) }
.rec-feat::before { content:'✓'; color:var(--or); font-weight:700; flex-shrink:0 }
.rec-actions { display:flex; gap:12px; flex-wrap:wrap }

/* ══════════════════════════════════════════════════════
   WHATSAPP BUTTON & BOOKING
══════════════════════════════════════════════════════ */
.btn-wa { display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#fff; font-family:var(--fd); font-weight:800; font-size:.88rem; letter-spacing:.1em; text-transform:uppercase; padding:15px 28px; border-radius:var(--r); border:2px solid #25D366; transition:background var(--tr),transform var(--tr),box-shadow var(--tr); cursor:pointer; white-space:nowrap }
.btn-wa:hover { background:#1da851; border-color:#1da851; transform:translateY(-2px); box-shadow:0 10px 30px rgba(37,211,102,.35) }
.btn-wa.btn-full { width:100%; justify-content:center; font-size:.95rem; padding:17px 28px }

.wa-notice { display:flex; gap:14px; align-items:flex-start; background:rgba(37,211,102,.06); border:1px solid rgba(37,211,102,.25); border-radius:var(--rl); padding:18px; margin-bottom:20px }
.wa-notice svg { flex-shrink:0; margin-top:2px }
.wa-notice strong { font-size:.9rem; color:var(--wh); display:block; margin-bottom:4px }
.wa-notice p { font-size:.8rem; color:var(--tm); line-height:1.6 }

/* WhatsApp popup overlay */
.wa-popup-overlay { position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(8px); z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .25s ease }
.wa-popup-overlay.show { opacity:1; pointer-events:all }
.wa-popup { background:var(--d2); border:1px solid rgba(37,211,102,.35); border-radius:var(--rx); padding:36px 32px; max-width:520px; width:100%; box-shadow:0 30px 80px rgba(0,0,0,.7); transform:translateY(16px); transition:transform .25s ease }
.wa-popup-overlay.show .wa-popup { transform:translateY(0) }
.wa-popup-header { display:flex; align-items:center; gap:14px; margin-bottom:22px }
.wa-popup-icon { width:48px; height:48px; border-radius:50%; background:rgba(37,211,102,.12); border:2px solid rgba(37,211,102,.4); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.wa-popup-icon svg { width:26px; height:26px }
.wa-popup-header h3 { font-family:var(--fd); font-weight:800; font-size:1.5rem; text-transform:uppercase; color:var(--wh) }
.wa-popup-header p { font-size:.8rem; color:var(--tm) }
.wa-summary { background:var(--d3); border:1px solid var(--ln); border-radius:var(--r); padding:16px; margin-bottom:20px; font-size:.84rem; line-height:1.8; color:var(--tx) }
.wa-summary-row { display:flex; gap:8px }
.wa-summary-label { color:var(--tm); min-width:90px; flex-shrink:0 }
.wa-summary-val { color:var(--wh); font-weight:500 }
.wa-popup-btns { display:flex; gap:12px }
.wa-popup-btns .btn-wa { flex:1; justify-content:center }
.wa-popup-close { background:transparent; border:2px solid var(--ln2); color:var(--tm); font-family:var(--fd); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; padding:13px 20px; border-radius:var(--r); cursor:pointer; transition:border-color var(--tr),color var(--tr) }
.wa-popup-close:hover { border-color:var(--or); color:var(--wh) }

@media(max-width:640px) {
  .color-palette { grid-template-columns:repeat(4,1fr) }
  .vehicle-cats { grid-template-columns:1fr }
  .rec-features { grid-template-columns:1fr }
  .rec-header { flex-direction:column; gap:10px }
  .rec-years { font-size:3rem; text-align:left }
  .wa-popup { padding:24px 18px }
  .wa-popup-btns { flex-direction:column }
}

/* ── Hero logo enlarged ─────────────────────────────── */
.hero-logo-display {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeUp .8s .2s forwards;
}
.hero-logo-display img {
  height: 120px;
  width: auto;
  filter: drop-shadow(0 4px 24px rgba(255,165,0,.18));
}
@media(max-width:768px) {
  .hero-logo-display img { height: 80px; }
}
@media(max-width:480px) {
  .hero-logo-display img { height: 64px; }
}

/* ══════════════════════════════════════════════════════
   HERO PHOTO SLIDESHOW
══════════════════════════════════════════════════════ */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1 }
/* Dark overlay on slides */
.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8,8,8,.55);
}

/* Dot indicators */
.hero-dots {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}
.hdot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: none;
  cursor: pointer;
  transition: background var(--tr), transform var(--tr), width var(--tr);
  padding: 0;
}
.hdot.active {
  background: var(--or);
  width: 24px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════
   STUDIO PHOTO GRID (homepage)
══════════════════════════════════════════════════════ */
.studio-photos-section { padding: 96px 0 }
.studio-photo-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
  height: 560px;
}
.spg-main {
  position: relative;
  border-radius: var(--rl);
  overflow: hidden;
  height: 100%;
}
.spg-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
  filter: brightness(.9) saturate(.85);
}
.spg-main:hover img { transform: scale(1.03) }

.spg-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  height: 100%;
}
.spg-item {
  position: relative;
  border-radius: var(--rl);
  overflow: hidden;
}
.spg-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  filter: brightness(.88) saturate(.82);
}
.spg-item:hover img { transform: scale(1.05) }

.spg-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(8,8,8,.85), transparent);
  padding: 28px 14px 12px;
  font-family: var(--fd);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
}

/* ══════════════════════════════════════════════════════
   STUDIO PHOTO STRIP (studio page)
══════════════════════════════════════════════════════ */
.studio-showcase { padding: 60px 0 }
.studio-photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  height: 320px;
}
.sps-item {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: flex var(--tr);
}
.sps-item picture { display:block; width:100%; height:100% }
.sps-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 70%;
  filter: brightness(.82) saturate(.8);
  transition: transform .5s ease, filter .4s ease;
}
.sps-item:hover img {
  transform: scale(1.08);
  filter: brightness(.95) saturate(.92);
}
.sps-item span {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(8,8,8,.9), transparent);
  padding: 22px 10px 8px;
  font-family: var(--fd);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
  opacity: 0;
  transition: opacity var(--tr);
}
.sps-item:hover span { opacity: 1 }

/* ══════════════════════════════════════════════════════
   GRAPHENE 4-TIER PACKAGES
══════════════════════════════════════════════════════ */
.tier-grid-4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
  margin-bottom: 28px;
}
.tier-card {
  background: var(--d2);
  border: 1px solid var(--ln);
  border-radius: var(--rl);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.tier-card:hover { border-color: rgba(255,165,0,.3); transform: translateY(-3px) }
.tier-card.featured {
  border-color: rgba(255,165,0,.5);
  box-shadow: 0 0 40px rgba(255,165,0,.08);
}
.tier-rec-banner {
  font-family: var(--fd);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 14px;
  text-align: center;
}
.light-rec-banner {
  background: rgba(200,200,200,.15);
  color: #ccc;
  border-bottom: 1px solid rgba(200,200,200,.2);
}
.dark-rec-banner {
  background: var(--or);
  color: #000;
}
.tier-top {
  padding: 28px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tier-yrs {
  font-family: var(--fd);
  font-weight: 900;
  font-size: 3.2rem;
  color: var(--wh);
  line-height: 1;
}
.tier-yrs small { font-size: 1.4rem }
.tier-yrs.orange-years { color: var(--or) }
.tier-name {
  font-family: var(--fd);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tm);
}
.tier-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.tier-badge {
  display: inline-block;
  font-family: var(--fd);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  width: fit-content;
}
.light-badge { background: #e0e0e0; color: #222 }
.dark-badge  { background: #1a1a1a; color: var(--or); border: 1px solid var(--or) }
.tier-body p { font-size: .84rem; color: var(--tm); line-height: 1.65; flex: 1 }
.tier-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px }
.tier-list li { font-size: .81rem; color: var(--tm); padding-left: 16px; position: relative }
.tier-list li::before { content:'→'; position:absolute; left:0; color:var(--or); font-size:.72rem }

/* Tier note */
.tier-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--d2);
  border: 1px solid rgba(255,165,0,.15);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-top: 4px;
}
.tier-note p { font-size: .82rem; color: var(--tm); line-height: 1.7 }
.tier-price { padding: 0 22px 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 4px }
.tier-price-amount { font-family: var(--fd); font-size: 1.55rem; font-weight: 900; color: var(--wh) }
.tier-price-amount.promo { color: var(--or) }
.tier-price-was { font-family: var(--fd); font-size: .95rem; font-weight: 700; color: var(--tm); text-decoration: line-through; opacity: .65; align-self: center }
.tier-price-note { font-size: .7rem; color: var(--tm); letter-spacing: .04em; align-self: center }
.tier-promo-badge { font-family: var(--fd); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,165,0,.15); color: var(--or); border: 1px solid rgba(255,165,0,.35); padding: 3px 9px; border-radius: 20px; align-self: center }

/* ── Adam's Polishes certification ── */
.cert-strip { background: #0a0a0a; border-top: 1px solid rgba(255,165,0,.18); border-bottom: 1px solid rgba(255,165,0,.18); padding: 20px 0 }
.cert-inner { max-width: 1100px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap }
.cert-logo { width: 62px; height: 62px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(255,165,0,.25)) }
.cert-text { flex: 1; min-width: 200px }
.cert-label { display: block; font-family: var(--fd); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wh); margin-bottom: 3px }
.cert-sub { font-size: .77rem; color: var(--tm); line-height: 1.5 }
.cert-pill { font-family: var(--fd); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,165,0,.12); color: var(--or); border: 1px solid rgba(255,165,0,.35); padding: 6px 18px; border-radius: 30px; white-space: nowrap; flex-shrink: 0 }
.adams-pkg-banner { display: flex; align-items: center; gap: 18px; background: rgba(255,165,0,.06); border: 1px solid rgba(255,165,0,.2); border-radius: var(--r); padding: 16px 22px; margin: 18px 0 0 }
.adams-pkg-banner img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(255,165,0,.2)) }
.adams-pkg-banner-text strong { display: block; font-family: var(--fd); font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--or); margin-bottom: 4px }
.adams-pkg-banner-text span { font-size: .78rem; color: var(--tm); line-height: 1.5 }
.hero-cert { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 12px 18px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,165,0,.25); border-radius: 40px; width: fit-content }
.hero-cert img { width: 38px; height: 38px; object-fit: contain }
.hero-cert-text { font-family: var(--fd); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--wh); line-height: 1.4 }
.hero-cert-text em { color: var(--or); font-style: normal }

/* ══════════════════════════════════════════════════════
   RESPONSIVE UPDATES
══════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .studio-photo-grid { grid-template-columns: 1fr; height: auto }
  .spg-main { height: 300px }
  .spg-side { grid-template-columns: repeat(4,1fr); height: 180px }
  .studio-photo-strip { grid-template-columns: repeat(3,1fr); height: 240px }
  .tier-grid-4 { grid-template-columns: repeat(2,1fr) }
}
@media(max-width:860px) {
  .tier-grid-4 { grid-template-columns: 1fr }
  .studio-photo-strip { grid-template-columns: repeat(2,1fr); height: auto }
  .sps-item { height: 200px }
}
@media(max-width:768px) {
  .studio-photo-grid { display: none }
  .spg-side { grid-template-columns: repeat(2,1fr); height: auto }
  .studio-photo-strip { grid-template-columns: 1fr 1fr; height: auto }
}

/* ══════════════════════════════════════════════════════
   CAR WASH PAGE — REAL PHOTO SLIDER
══════════════════════════════════════════════════════ */

/* Full-width comparison slider */
.cw-slider-wrap { margin-bottom: 48px }
.cw-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: var(--rl);
  overflow: hidden;
  cursor: col-resize;
  user-select: none;
  border: 1px solid var(--ln);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.cw-before, .cw-after {
  position: absolute;
  inset: 0;
}
.cw-before img, .cw-after img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.cw-before { z-index: 1 }
.cw-after  { z-index: 2; clip-path: inset(0 50% 0 0) }

/* Caption row */
.cw-caption {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.cw-cap-item {
  background: var(--d2);
  border: 1px solid var(--ln);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cw-cap-item p { font-size: .82rem; color: var(--tm); line-height: 1.6 }
.cw-cap-badge {
  display: inline-block;
  font-family: var(--fd);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  width: fit-content;
}
.cw-cap-badge.before {
  background: rgba(255,255,255,.08);
  color: var(--tm);
  border: 1px solid var(--ln2);
}
.cw-cap-badge.after {
  background: var(--or);
  color: #000;
}

/* Side-by-side portrait view */
.cw-sidebyside {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 40px;
}
.cw-sbs-card {
  position: relative;
  border-radius: var(--rl);
  overflow: hidden;
  border: 1px solid var(--ln);
  transition: transform var(--tr), box-shadow var(--tr);
}
.cw-sbs-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.cw-sbs-card img {
  width: 100%;
  display: block;
  filter: brightness(.92) saturate(.88);
  transition: filter var(--tr);
}
.cw-sbs-card:hover img { filter: brightness(.98) saturate(.95) }
.cw-sbs-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(8,8,8,.88), transparent);
  padding: 32px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cw-sbs-label p { font-size: .78rem; color: var(--tx); line-height: 1.5 }
.cw-sbs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cw-sbs-arrow {
  font-size: 1.8rem;
  color: var(--or);
  font-weight: 900;
  animation: arrowPulse 1.8s ease-in-out infinite;
}
@keyframes arrowPulse {
  0%,100% { transform: translateX(0); opacity: 1 }
  50%     { transform: translateX(6px); opacity: .6 }
}
.cw-sbs-text {
  font-family: var(--fd);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  text-align: center;
  line-height: 1.5;
}

/* Detail callouts */
.cw-callouts {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-top: 8px;
}
.cw-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--d2);
  border: 1px solid var(--ln);
  border-radius: var(--r);
  padding: 18px;
  transition: border-color var(--tr);
}
.cw-callout:hover { border-color: rgba(255,165,0,.3) }
.cc-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 2px }
.cw-callout strong { font-size: .88rem; color: var(--wh); display: block; margin-bottom: 5px }
.cw-callout p { font-size: .8rem; color: var(--tm); line-height: 1.65 }

/* Book CTA bar */
.cw-book-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--d2);
  border: 1px solid rgba(255,165,0,.25);
  border-radius: var(--rl);
  padding: 36px 40px;
  flex-wrap: wrap;
}
.cw-book-cta h2 {
  font-family: var(--fd);
  font-weight: 900;
  font-size: clamp(1.6rem,3.5vw,2.4rem);
  text-transform: uppercase;
  color: var(--wh);
  line-height: 1;
  margin-bottom: 8px;
}
.cw-book-cta h2 em { font-style: normal; color: var(--or) }
.cw-book-cta p { font-size: .88rem; color: var(--tm) }

/* Real photo badge on gallery cards */
.real-photo-card { position: relative }
.real-photo-tag {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-family: var(--fd);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(8,8,8,.82);
  color: var(--or);
  border: 1px solid rgba(255,165,0,.4);
  backdrop-filter: blur(8px);
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── Responsive ── */
@media(max-width:768px) {
  .cw-sidebyside { grid-template-columns: 1fr; gap: 0 }
  .cw-sbs-divider { flex-direction: row; padding: 12px 0 }
  .cw-sbs-arrow { font-size: 1.4rem }
  .cw-callouts { grid-template-columns: 1fr }
  .cw-caption { grid-template-columns: 1fr }
  .cw-book-cta { text-align: center; justify-content: center }
}

/* ═══════════════════════════════════════════════════════════
   CHAT ASSISTANT (FAQ bot · EN/FR) — injected on every page
═══════════════════════════════════════════════════════════ */
.ndc-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 9998;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--or), var(--or2));
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 0 rgba(255,165,0,.45);
  display: flex; align-items: center; justify-content: center;
  color: #111; transition: transform var(--tr), box-shadow var(--tr);
  animation: ndc-pulse 2.8s infinite;
}
.ndc-fab:hover { transform: scale(1.07) }
.ndc-fab svg { width: 28px; height: 28px }
.ndc-fab.open { animation: none }
@keyframes ndc-pulse {
  0%   { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 0 rgba(255,165,0,.45) }
  70%  { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 16px rgba(255,165,0,0) }
  100% { box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 0 rgba(255,165,0,0) }
}
.ndc-badge {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: #e23; color: #fff;
  font-family: var(--fd); font-size: .7rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.ndc-panel {
  position: fixed; right: 22px; bottom: 94px; z-index: 9999;
  width: 360px; max-width: calc(100vw - 28px); height: 540px; max-height: calc(100vh - 130px);
  background: var(--d1); border: 1px solid var(--ln2); border-radius: var(--rx);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none;
  transition: opacity var(--tr), transform var(--tr);
}
.ndc-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto }

.ndc-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: linear-gradient(135deg, #1a1a1a, #2e1800); border-bottom: 1px solid var(--ln2);
}
.ndc-head .ndc-ava {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--or), var(--or2));
  display: flex; align-items: center; justify-content: center; color: #111;
}
.ndc-head .ndc-ava svg { width: 22px; height: 22px }
.ndc-head .ndc-h-txt { flex: 1; min-width: 0 }
.ndc-head h4 { font-family: var(--fd); color: var(--wh); font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; line-height: 1.1 }
.ndc-head .ndc-status { font-size: .72rem; color: #6fcf6f; display: flex; align-items: center; gap: 5px }
.ndc-head .ndc-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #6fcf6f }
.ndc-lang { display: flex; gap: 2px; background: rgba(0,0,0,.3); border-radius: 20px; padding: 3px }
.ndc-lang button {
  font-family: var(--fd); font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  color: var(--tm); padding: 4px 9px; border-radius: 16px; transition: all var(--tr);
}
.ndc-lang button.on { background: var(--or); color: #111 }
.ndc-close { color: var(--tm); padding: 4px; transition: color var(--tr) }
.ndc-close:hover { color: var(--wh) }
.ndc-close svg { width: 20px; height: 20px }

.ndc-body {
  flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: var(--ln2) transparent;
}
.ndc-body::-webkit-scrollbar { width: 6px }
.ndc-body::-webkit-scrollbar-thumb { background: var(--ln2); border-radius: 3px }

.ndc-msg { max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: .9rem; line-height: 1.55; animation: ndc-in .25s ease }
.ndc-msg.bot { align-self: flex-start; background: var(--d3); color: var(--tx); border-bottom-left-radius: 4px }
.ndc-msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--or), var(--or2)); color: #111; font-weight: 500; border-bottom-right-radius: 4px }
.ndc-msg a { color: var(--or3); text-decoration: underline }
.ndc-msg.user a { color: #111 }
.ndc-msg strong { color: var(--wh) }
.ndc-msg.user strong { color: #111 }
@keyframes ndc-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.ndc-chips { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; max-width: 100%; margin-top: 2px }
.ndc-chip {
  font-family: var(--fb); font-size: .82rem; color: var(--or3);
  border: 1px solid rgba(255,165,0,.4); background: rgba(255,165,0,.07);
  padding: 7px 13px; border-radius: 18px; transition: all var(--tr); text-align: left;
}
.ndc-chip:hover { background: var(--or); color: #111; border-color: var(--or) }

.ndc-more {
  align-self: flex-start; margin-top: 2px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--fd); font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: #111; background: linear-gradient(135deg, var(--or), var(--or2));
  padding: 9px 16px; border-radius: 20px; transition: filter var(--tr), transform var(--tr);
  animation: ndc-in .25s ease;
}
.ndc-more:hover { filter: brightness(1.08); transform: translateY(-1px) }
.ndc-more span { font-size: .8em }

.ndc-foot { padding: 10px 12px; border-top: 1px solid var(--ln2); display: flex; gap: 8px; background: var(--d0) }
.ndc-foot a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--fd); font-size: .82rem; font-weight: 700; letter-spacing: .05em;
  padding: 10px; border-radius: var(--r); transition: all var(--tr); text-transform: uppercase;
}
.ndc-foot .ndc-book { background: linear-gradient(135deg, var(--or), var(--or2)); color: #111 }
.ndc-foot .ndc-book:hover { filter: brightness(1.08) }
.ndc-foot .ndc-wa { background: #25D366; color: #073d1c }
.ndc-foot .ndc-wa:hover { filter: brightness(1.06) }
.ndc-foot svg { width: 16px; height: 16px }

@media (max-width: 480px) {
  .ndc-panel { right: 10px; left: 10px; width: auto; bottom: 86px; height: calc(100vh - 110px) }
  .ndc-fab { right: 16px; bottom: 16px }
}