/* ============================================================
   RUBIX INOV — Design System v3.0
   Dark mode (default) + Light mode professionnel
   Bebas Neue (display) · DM Sans (body) · Space Mono (accent)
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ══════════════════════════════════════════
   DARK MODE — par défaut
   ══════════════════════════════════════════ */
:root {
  --ink:        #0b0b0f;
  --ink-2:      #13131a;
  --ink-3:      #1c1c26;
  --ink-4:      #252534;
  --border:     rgba(255,255,255,.08);
  --border-s:   rgba(255,255,255,.16);
  --red:        #e8271e;
  --red-glow:   rgba(232,39,30,.25);
  --blue:       #0095ff;
  --blue-glow:  rgba(0,149,255,.22);
  --white:      #f5f5f7;
  --grey:       #8b8b9e;
  --grey-2:     #5a5a6e;
  --text:       #f5f5f7;
  --text-muted: #8b8b9e;
  --shadow:     rgba(0,0,0,.45);
  --header-bg:  rgba(11,11,15,.97);
  --nav-mobile: rgba(11,11,15,.98);
  --display:    'Bebas Neue', sans-serif;
  --body:       'DM Sans', sans-serif;
  --mono:       'Space Mono', monospace;
  --ease:       cubic-bezier(.25,.46,.45,.94);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  /* Theme toggle icon */
  --toggle-bg:  var(--ink-3);
  --toggle-border: var(--border);
}

/* ══════════════════════════════════════════
   LIGHT MODE — très professionnel
   Base: blanc cassé chaud, accents précis
   ══════════════════════════════════════════ */
[data-theme="light"] {
  --ink:        #f7f7f9;
  --ink-2:      #ffffff;
  --ink-3:      #f0f0f5;
  --ink-4:      #e4e4ec;
  --border:     rgba(0,0,0,.09);
  --border-s:   rgba(0,0,0,.18);
  --red:        #d41e16;
  --red-glow:   rgba(212,30,22,.18);
  --blue:       #0077cc;
  --blue-glow:  rgba(0,119,204,.18);
  --white:      #f7f7f9;
  --grey:       #5c5c72;
  --grey-2:     #9090a8;
  --text:       #111118;
  --text-muted: #5c5c72;
  --shadow:     rgba(0,0,0,.10);
  --header-bg:  rgba(247,247,249,.96);
  --nav-mobile: rgba(247,247,249,.99);
  --toggle-bg:  #ffffff;
  --toggle-border: rgba(0,0,0,.12);
}

html { scroll-behavior:smooth; font-size:16px; }
html, body { max-width:100%; overflow-x:hidden; }

body {
  font-family:var(--body);
  background:var(--ink);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  cursor:none;
  transition:background .4s var(--ease), color .4s var(--ease);
}

@media (hover:none) and (pointer:coarse) {
  body { cursor:auto; }
  .cursor,.cursor-follower { display:none !important; }
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { cursor:none; font-family:var(--body); border:none; background:none; }
select { font-family:var(--body); }

/* ── CURSOR ── */
.cursor {
  position:fixed; top:0; left:0;
  width:10px; height:10px;
  background:var(--red); border-radius:50%;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .15s,height .15s,background .2s;
}
.cursor-follower {
  position:fixed; top:0; left:0;
  width:36px; height:36px;
  border:1.5px solid rgba(232,39,30,.5); border-radius:50%;
  pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
  transition:transform .12s var(--ease),width .3s,height .3s;
}
.cursor.hovr { width:20px; height:20px; background:var(--blue); }
.cursor-follower.hovr { width:56px; height:56px; border-color:rgba(0,149,255,.5); }

/* ── LOADER ── */
.loader {
  position:fixed; inset:0;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  z-index:99990;
  transition:opacity .7s var(--ease),visibility .7s;
}
.loader.gone { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { text-align:center; }

.loader-svg {
  width:100px; height:100px;
  display:block; margin:0 auto 22px;
  animation:lspin 4s linear infinite;
}
@keyframes lspin { to{transform:rotate(360deg)} }

.l-ring  { stroke:var(--red);  stroke-dasharray:314; animation:ld1 2s ease-in-out infinite; }
.l-ring2 { stroke:var(--blue); stroke-dasharray:220; animation:ld2 2.5s ease-in-out infinite reverse; }
.l-tri   { stroke:rgba(128,128,160,.3); stroke-dasharray:210; animation:ld3 3s ease-in-out infinite; }
@keyframes ld1 { 0%,100%{stroke-dashoffset:314} 50%{stroke-dashoffset:0} }
@keyframes ld2 { 0%,100%{stroke-dashoffset:220} 50%{stroke-dashoffset:0} }
@keyframes ld3 { 0%,100%{stroke-dashoffset:210} 50%{stroke-dashoffset:0} }

.loader-brand { font-family:var(--display); font-size:32px; letter-spacing:6px; color:var(--text); margin-bottom:20px; }
.loader-brand span { color:var(--red); }
.loader-bar-wrap { width:200px; height:2px; background:var(--ink-4); margin:0 auto 14px; border-radius:2px; overflow:hidden; }
.loader-bar { height:100%; width:0; background:linear-gradient(90deg,var(--red),var(--blue)); transition:width .1s linear; }
.loader-status { font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--text-muted); }

/* ── HEADER ── */
.header {
  position:fixed; top:0; left:0; right:0; z-index:1100;
  transition:background .4s,backdrop-filter .4s,box-shadow .4s;
}
.header.scrolled {
  background:var(--header-bg);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 1px 0 var(--border);
}
.nav-container {
  max-width:1400px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 40px;
}
.logo { display:flex; align-items:center; flex-shrink:0; }
.logo-img { height:52px; width:auto; }

.nav-menu { display:flex; align-items:center; gap:4px; list-style:none; }
.nav-menu a {
  font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-muted); padding:10px 14px; border-radius:6px;
  transition:color .25s,background .25s; position:relative;
}
.nav-menu a:hover,.nav-menu a.active { color:var(--text); }
.nav-menu a.active::after {
  content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
  width:16px; height:2px; background:var(--red); border-radius:2px;
}
.nav-menu a.cta-nav {
  background:var(--red); color:#fff !important;
  padding:10px 18px; border-radius:8px; margin-left:8px;
}
.nav-menu a.cta-nav:hover { background:#c9201a; }
.nav-menu a.cta-nav::after { display:none; }

.nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* ── LANG SWITCHER ── */
.lang-switcher {
  display:flex; align-items:center; gap:6px;
  background:var(--ink-3); border:1px solid var(--border); border-radius:8px; padding:8px 14px;
  font-family:var(--mono); font-size:11px; letter-spacing:1px;
  transition:background .3s, border-color .3s;
}
.lang-switcher span { color:var(--grey-2); }
.lang-btn { color:var(--text-muted); font-size:11px; letter-spacing:1px; font-family:var(--mono); padding:2px 5px; border-radius:4px; transition:all .2s; }
.lang-btn.active { color:#fff; background:var(--red); }
.lang-btn:not(.active):hover { color:var(--text); cursor:pointer; }

/* ── THEME TOGGLE ── */
.theme-toggle {
  width:40px; height:40px;
  background:var(--toggle-bg);
  border:1px solid var(--toggle-border);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .3s, border-color .3s, transform .2s, box-shadow .2s;
  flex-shrink:0;
}
.theme-toggle:hover {
  border-color:var(--red);
  transform:translateY(-1px);
  box-shadow:0 4px 14px var(--red-glow);
}
.theme-toggle svg {
  width:18px; height:18px;
  stroke:var(--text-muted);
  transition:stroke .3s, transform .4s;
}
.theme-toggle:hover svg { stroke:var(--red); }
.theme-toggle .icon-moon { display:block; }
.theme-toggle .icon-sun  { display:none; }
[data-theme="light"] .theme-toggle .icon-moon { display:none; }
[data-theme="light"] .theme-toggle .icon-sun  { display:block; }

/* ── HAMBURGER ── */
.menu-toggle {
  display:none; flex-direction:column; gap:5px; padding:9px; cursor:pointer;
  background:var(--ink-3); border:1px solid var(--border); border-radius:8px;
  transition:background .3s, border-color .3s;
  position:relative; z-index:1200;  /* above nav overlay */
}
.menu-toggle span { width:22px; height:2px; background:var(--text); border-radius:2px; transition:all .3s; display:block; }
.menu-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.open span:nth-child(2) { opacity:0; }
.menu-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ── HERO ── */
.hero {
  min-height:100svh; display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding:120px 40px 80px;
  background:var(--ink);
  transition:background .4s;
}
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-content { position:relative; z-index:2; max-width:1400px; margin:0 auto; width:100%; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:28px;
  opacity:0; transform:translateY(16px);
}
.hero-eyebrow.anim { animation:fadeUp .7s var(--ease-out) forwards; }
.eyebrow-dot {
  width:6px; height:6px; border-radius:50%; background:var(--red);
  animation:pdot 2s ease-in-out infinite;
}
@keyframes pdot { 0%,100%{box-shadow:0 0 0 0 var(--red-glow)} 50%{box-shadow:0 0 0 8px transparent} }

.hero-title {
  font-family:var(--display);
  font-size:clamp(64px,10vw,160px);
  line-height:.92; letter-spacing:2px; margin-bottom:28px; overflow:hidden;
}
.ht-line { display:block; opacity:0; transform:translateY(60px); }
.ht-line.anim { animation:slideUp .9s var(--ease-out) forwards; animation-delay:var(--d,0s); }
.ht-accent { color:transparent; -webkit-text-stroke:2px var(--red); }

@keyframes slideUp { to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp  { to{opacity:1;transform:translateY(0)} }

.hero-sub {
  font-size:clamp(14px,1.8vw,18px); color:var(--text-muted); letter-spacing:.5px; margin-bottom:40px;
  opacity:0; transform:translateY(20px);
}
.hero-sub.anim { animation:fadeUp .8s var(--ease-out) .45s forwards; }

.hero-btns {
  display:flex; gap:14px; flex-wrap:wrap; margin-bottom:60px;
  opacity:0; transform:translateY(20px);
}
.hero-btns.anim { animation:fadeUp .8s var(--ease-out) .55s forwards; }

.btn-prim {
  display:inline-flex; align-items:center;
  background:var(--red); color:#fff; font-weight:600; font-size:14px; letter-spacing:.5px;
  padding:15px 30px; border-radius:10px;
  transition:background .25s,transform .2s,box-shadow .25s;
}
.btn-prim:hover { background:#c9201a; transform:translateY(-2px); box-shadow:0 12px 32px var(--red-glow); }
.btn-ghost {
  display:inline-flex; align-items:center;
  background:transparent; color:var(--text); font-weight:500; font-size:14px;
  padding:14px 28px; border:1.5px solid var(--border-s); border-radius:10px;
  transition:border-color .25s,background .25s,transform .2s;
}
.btn-ghost:hover { border-color:var(--red); background:var(--red-glow); transform:translateY(-2px); }

.hero-stats {
  display:flex; align-items:center; flex-wrap:wrap; gap:0;
  opacity:0; transform:translateY(20px);
}
.hero-stats.anim { animation:fadeUp .8s var(--ease-out) .65s forwards; }
.hstat { text-align:left; padding:0 36px 0 0; }
.hstat-n { font-family:var(--display); font-size:clamp(36px,5vw,56px); line-height:1; }
.hstat-u { font-family:var(--display); font-size:28px; color:var(--red); margin-left:2px; }
.hstat-l { display:block; font-size:12px; color:var(--text-muted); letter-spacing:.5px; margin-top:4px; }
.hstat-sep { width:1px; height:48px; background:var(--border-s); margin:0 36px 0 0; flex-shrink:0; }

.hero-scroll {
  position:absolute; bottom:32px; left:40px; z-index:2;
  display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:10px; letter-spacing:3px; color:var(--text-muted);
}
.scroll-line-anim { width:40px; height:1px; background:var(--border-s); position:relative; overflow:hidden; }
.scroll-line-anim::after {
  content:''; position:absolute; left:-100%; top:0;
  width:100%; height:100%; background:var(--red);
  animation:sline 2s ease-in-out infinite;
}
@keyframes sline { 0%{left:-100%} 100%{left:100%} }

/* ── TICKER ── */
.ticker-wrap { background:var(--red); overflow:hidden; padding:14px 0; white-space:nowrap; }
.ticker {
  display:inline-flex; align-items:center; gap:32px;
  font-family:var(--mono); font-size:12px; letter-spacing:2px; color:rgba(255,255,255,.92);
  animation:scroll-t 26s linear infinite; padding-right:32px;
}
.ticker span { flex-shrink:0; }
.t-dot { color:rgba(255,255,255,.45); font-size:8px; }
@keyframes scroll-t { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── SHARED ── */
.wrap { max-width:1320px; margin:0 auto; padding:0 40px; }
section { padding:100px 0; position:relative; transition:background .4s; }

.stag { font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--text-muted); margin-bottom:20px; }
.sec-headline {
  font-family:var(--display); font-size:clamp(40px,5.5vw,80px);
  line-height:1; letter-spacing:1px; color:var(--text); margin-bottom:20px;
}
.sec-headline.centered { text-align:center; }
.sec-sub { font-size:16px; color:var(--text-muted); line-height:1.7; max-width:640px; margin-bottom:60px; }
.sec-sub.centered { text-align:center; margin-left:auto; margin-right:auto; }

.reveal-item { opacity:0; transform:translateY(40px); transition:opacity .75s var(--ease-out),transform .75s var(--ease-out); transition-delay:var(--delay,0s); }
.reveal-item.vis { opacity:1; transform:translateY(0); }

/* ── ABOUT ── */
.about-section { background:var(--ink); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-lead { font-size:17px; line-height:1.75; color:var(--text-muted); margin-bottom:40px; }
.about-pillars { display:flex; flex-direction:column; gap:20px; }
.apillar {
  display:flex; align-items:flex-start; gap:18px;
  padding:22px; background:var(--ink-2); border:1px solid var(--border); border-radius:12px;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.apillar:hover { border-color:var(--border-s); box-shadow:0 8px 32px var(--shadow); }
.apillar-ico { width:28px; height:28px; flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; }
.apillar-ico svg { width:28px; height:28px; stroke:var(--red); }
.apillar h3 { font-size:15px; font-weight:600; margin-bottom:6px; color:var(--text); }
.apillar p { font-size:14px; color:var(--text-muted); line-height:1.65; }

.about-img-frame { position:relative; border-radius:16px; overflow:hidden; margin-bottom:20px; }
.about-main-img { width:100%; height:320px; object-fit:cover; }
.about-img-frame::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.5) 0%,transparent 50%); pointer-events:none; }

.values-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.val-card {
  display:flex; align-items:center; gap:12px;
  background:var(--ink-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px;
  font-size:14px; font-weight:500; color:var(--text);
  transition:border-color .3s,transform .25s,background .3s;
}
.val-card:hover { border-color:var(--border-s); transform:translateY(-2px); }
.val-svg { width:20px; height:20px; stroke:var(--red); flex-shrink:0; }

/* ── PRODUCTS ── */
.products-section { background:var(--ink-2); }
.prod-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:36px; }
.prod-card {
  background:var(--ink-3); border:1px solid var(--border); border-radius:20px; overflow:hidden;
  transition:border-color .35s,box-shadow .35s,transform .35s,background .3s;
}
.prod-card:hover { border-color:var(--border-s); transform:translateY(-6px); box-shadow:0 24px 60px var(--shadow); }
.prod-img-wrap { position:relative; overflow:hidden; height:250px; }
.prod-img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.prod-card:hover .prod-img { transform:scale(1.05); }
.prod-glow { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,var(--ink-3) 100%); pointer-events:none; }
.prod-tag {
  position:absolute; top:16px; right:16px;
  font-family:var(--mono); font-size:10px; letter-spacing:2px;
  background:var(--red); color:#fff; padding:5px 12px; border-radius:6px;
}
.blue-tag { background:var(--blue); }

.prod-body { padding:26px; }
.prod-name { font-family:var(--display); font-size:36px; letter-spacing:2px; color:var(--red); line-height:1; }
.blue-name { color:var(--blue); }
.prod-sub { font-size:11px; font-family:var(--mono); letter-spacing:1.5px; color:var(--text-muted); margin:8px 0 14px; }
.prod-desc { font-size:14px; color:var(--text-muted); line-height:1.7; margin-bottom:18px; }
.prod-feats { list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.prod-feats li { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); }
.feat-svg { width:16px; height:16px; stroke:var(--red); flex-shrink:0; margin-top:2px; }
.feat-svg.blue-check { stroke:var(--blue); }
.prod-cta { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--red); transition:gap .25s; }
.prod-cta:hover { gap:14px; }
.prod-cta svg { width:16px; height:16px; stroke:currentColor; vertical-align:middle; }
.blue-cta { color:var(--blue); }

.erc-banner {
  display:flex; align-items:flex-start; gap:24px;
  background:var(--ink-3); border:1px solid var(--border); border-left:3px solid var(--red);
  border-radius:14px; padding:28px 32px; transition:background .3s;
}
.erc-ico { width:48px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.erc-ico svg { width:40px; height:40px; stroke:var(--red); }
.erc-text h3 { font-size:17px; font-weight:600; margin-bottom:8px; color:var(--text); }
.erc-text p { font-size:14px; color:var(--text-muted); line-height:1.7; }

/* ── PERFORMANCES ── */
.perf-section { background:var(--ink); }
.perf-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; }
.ptab {
  font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  padding:10px 22px; border-radius:8px; border:1px solid var(--border);
  color:var(--text-muted); background:var(--ink-2);
  transition:all .25s; cursor:pointer;
}
.ptab:hover { color:var(--text); border-color:var(--border-s); }
.ptab.active { background:var(--red); color:#fff; border-color:var(--red); }

.perf-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.perf-card {
  background:var(--ink-2); border:1px solid var(--border); border-radius:14px; padding:22px;
  transition:border-color .3s,transform .3s,background .3s;
  animation:cin .5s var(--ease-out) both;
}
@keyframes cin { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.perf-card:hover { border-color:var(--border-s); transform:translateY(-4px); }
.pc-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.pc-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.pc-icon svg { width:24px; height:24px; stroke:var(--red); }
.pc-badge {
  font-family:var(--mono); font-size:9px; letter-spacing:1.5px;
  padding:4px 10px; border-radius:4px; background:var(--ink-3); color:var(--text-muted); border:1px solid var(--border);
}
.pc-badge.diesel { color:var(--red); border-color:rgba(212,30,22,.3); }
.pc-badge.essence { color:var(--blue); border-color:rgba(0,119,204,.3); }
.pc-name { font-size:15px; font-weight:600; margin-bottom:12px; color:var(--text); }
.pc-bar-wrap { height:4px; background:var(--ink-4); border-radius:4px; overflow:hidden; margin-bottom:6px; }
.pc-bar { height:100%; width:0; border-radius:4px; background:linear-gradient(90deg,var(--red),var(--blue)); transition:width 1.2s var(--ease-out); }
.pc-pct { font-family:var(--mono); font-size:13px; font-weight:700; color:var(--text); }
.pc-desc { font-size:13px; color:var(--text-muted); line-height:1.6; margin-top:8px; }

/* ── WHY US ── */
.why-section { background:var(--ink-2); }
.why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.why-card {
  background:var(--ink-3); border:1px solid var(--border); border-radius:16px; padding:30px 26px;
  position:relative; overflow:hidden;
  transition:border-color .35s,box-shadow .35s,transform .35s,background .3s;
}
.why-card:hover { border-color:var(--border-s); transform:translateY(-4px); box-shadow:0 16px 40px var(--shadow); }
.why-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at top right,var(--red-glow),transparent 70%); pointer-events:none; }
.why-num { font-family:var(--display); font-size:52px; line-height:1; color:var(--border-s); margin-bottom:10px; letter-spacing:2px; }
.why-svg { width:28px; height:28px; stroke:var(--red); margin-bottom:12px; display:block; }
.why-card h3 { font-size:15px; font-weight:600; margin-bottom:10px; color:var(--text); }
.why-card p { font-size:14px; color:var(--text-muted); line-height:1.65; }

/* ── PARTNERS ── */
.partners-section { background:var(--ink); padding:50px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.partners-lbl { font-family:var(--mono); font-size:10px; letter-spacing:3px; color:var(--grey-2); text-align:center; margin-bottom:24px; }
.partners-row { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.partner-pill {
  display:flex; align-items:center; gap:10px;
  background:var(--ink-2); border:1px solid var(--border); border-radius:100px; padding:12px 22px;
  font-size:14px; font-weight:500; color:var(--text);
  transition:border-color .25s,transform .25s,background .3s;
}
.partner-pill:hover { border-color:var(--border-s); transform:translateY(-2px); }
.partner-pill svg { width:18px; height:18px; stroke:var(--red); flex-shrink:0; }

/* ── CONTACT ── */
.contact-section { background:var(--ink-2); }
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:56px; align-items:start; }
.contact-left { display:flex; flex-direction:column; gap:16px; }
.cinfo {
  display:flex; align-items:flex-start; gap:16px;
  background:var(--ink-3); border:1px solid var(--border); border-radius:12px; padding:18px;
  transition:border-color .25s,background .3s;
}
.cinfo:hover { border-color:var(--border-s); }
.cinfo-ico { width:38px; height:38px; background:var(--red); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cinfo-ico svg { stroke:#fff; width:18px; height:18px; }
.cinfo h4 { font-size:13px; font-weight:600; margin-bottom:4px; color:var(--text); }
.cinfo p { font-size:14px; color:var(--text-muted); line-height:1.5; }
.cinfo a { color:var(--text-muted); transition:color .2s; }
.cinfo a:hover { color:var(--red); }
.csocials { display:flex; gap:10px; }
.csocials a {
  width:40px; height:40px; border:1px solid var(--border); border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
  transition:all .25s;
}
.csocials a svg { stroke:currentColor; width:18px; height:18px; }
.csocials a:hover { background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-2px); }
.contact-img-box { border-radius:12px; overflow:hidden; }
.contact-side-img { width:100%; height:180px; object-fit:cover; }

.cform { background:var(--ink-3); border:1px solid var(--border); border-radius:20px; padding:36px; display:flex; flex-direction:column; gap:16px; transition:background .3s; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fgroup { display:flex; flex-direction:column; gap:6px; }
.fgroup label { font-size:11px; font-weight:700; letter-spacing:.7px; color:var(--text-muted); text-transform:uppercase; }
.fgroup input,.fgroup textarea,.fgroup select {
  background:var(--ink-4); border:1px solid var(--border); border-radius:10px;
  padding:13px 15px; font-size:15px; color:var(--text); font-family:var(--body); outline:none;
  transition:border-color .25s,box-shadow .25s,background .3s; width:100%; -webkit-appearance:none;
}
.fgroup input:focus,.fgroup textarea:focus,.fgroup select:focus { border-color:rgba(212,30,22,.5); box-shadow:0 0 0 3px var(--red-glow); }
.fgroup select option { background:var(--ink-4); color:var(--text); }
.fgroup textarea { resize:vertical; min-height:120px; }
.fgroup input::placeholder,.fgroup textarea::placeholder { color:var(--grey-2); }

.submit-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--red); color:#fff; font-size:15px; font-weight:600;
  padding:15px 32px; border-radius:12px; cursor:pointer;
  transition:background .25s,transform .2s,box-shadow .25s;
}
.submit-btn:hover { background:#c9201a; transform:translateY(-2px); box-shadow:0 12px 32px var(--red-glow); }
.submit-btn:disabled { opacity:.6; pointer-events:none; }
.submit-btn svg { stroke:currentColor; vertical-align:middle; }

/* ── FOOTER ── */
.footer { background:var(--ink); border-top:1px solid var(--border); padding:80px 0 0; transition:background .4s; }
.footer-inner { max-width:1320px; margin:0 auto; padding:0 40px 60px; display:grid; grid-template-columns:1.2fr 2fr; gap:80px; }
.footer-logo-img { height:50px; margin-bottom:18px; }
.footer-brand p { font-size:14px; color:var(--text-muted); line-height:1.7; margin-bottom:22px; max-width:310px; }
.footer-socials { display:flex; gap:10px; }
.footer-socials a { width:38px; height:38px; border:1px solid var(--border); border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all .25s; }
.footer-socials a svg { stroke:currentColor; width:16px; height:16px; }
.footer-socials a:hover { background:var(--red); border-color:var(--red); color:#fff; }
.footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.fcol h4 { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:16px; color:var(--text); }
.fcol a { display:block; font-size:14px; color:var(--text-muted); margin-bottom:10px; transition:color .2s; }
.fcol a:hover { color:var(--red); }
.footer-bottom { border-top:1px solid var(--border); padding:20px 40px; max-width:1320px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom p { font-size:13px; color:var(--grey-2); }
.footer-slogan { font-style:italic; }

/* ── TOAST ── */
#toast-container { position:fixed; top:24px; right:24px; z-index:99995; display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast-msg {
  display:flex; align-items:center; gap:12px;
  background:var(--ink-3); border:1px solid var(--border); border-left:3px solid var(--red);
  border-radius:10px; padding:14px 18px; font-size:14px; max-width:380px; color:var(--text);
  box-shadow:0 12px 40px var(--shadow);
  animation:tin .4s var(--ease-out) forwards;
}
.toast-msg.ok { border-left-color:#00c875; }
@keyframes tin { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:translateX(0)} }
.toast-out { animation:tout .3s var(--ease) forwards; }
@keyframes tout { to{opacity:0;transform:translateX(24px)} }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--ink); }
::-webkit-scrollbar-thumb { background:var(--ink-4); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--red); }

/* ─── LIGHT MODE SPECIFIC OVERRIDES ─── */
[data-theme="light"] .header.scrolled {
  box-shadow:0 1px 0 var(--border), 0 4px 24px rgba(0,0,0,.06);
}
[data-theme="light"] .l-tri { stroke:rgba(0,0,0,.15); }
[data-theme="light"] .ht-accent { -webkit-text-stroke:2px var(--red); }
[data-theme="light"] .why-num { color:rgba(0,0,0,.08); }
[data-theme="light"] .why-card::before { background:radial-gradient(circle at top right,rgba(212,30,22,.05),transparent 70%); }
[data-theme="light"] .hero-canvas { opacity:.5; }
[data-theme="light"] .prod-glow { background:linear-gradient(to bottom,transparent 40%,var(--ink-3) 100%); }
[data-theme="light"] .about-img-frame::after { background:linear-gradient(to top,rgba(240,240,245,.5) 0%,transparent 50%); }
[data-theme="light"] ::-webkit-scrollbar-track { background:var(--ink-3); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background:var(--ink-4); }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width:1024px) {
  /* Hide inline nav; show hamburger */
  .nav-menu {
    display:none;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    width:100vw; height:100vh; height:100dvh;
    background:var(--ink);
    flex-direction:column; justify-content:center; align-items:center; gap:0;
    list-style:none; z-index:1150;
    overflow-y:auto;
  }
  .nav-menu.open {
    display:flex;
  }
  .nav-menu li { width:100%; text-align:center; }
  .nav-menu a {
    display:block; font-family:var(--display); font-size:clamp(24px,5vw,42px);
    letter-spacing:2px; color:var(--text); padding:14px 20px; transition:color .2s;
  }
  .nav-menu a::after { display:none; }
  .nav-menu a.cta-nav { background:none; color:var(--red) !important; }
  .nav-menu a.active { color:var(--red); }

  .menu-toggle { display:flex; }
  .about-grid { grid-template-columns:1fr; gap:48px; }
  .about-right { order:-1; }
  .prod-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; gap:36px; }
  .footer-inner { grid-template-columns:1fr; gap:40px; }
  .footer-cols { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:768px) {
  .wrap { padding:0 18px; }
  section { padding:64px 0; }
  .nav-container { padding:14px 18px; }
  .logo-img { height:42px; }

  /* nav-menu overlay already set above; just tighten font on small screens */
  .nav-menu a { font-size:clamp(22px,8vw,38px); padding:12px 20px; }
  .nav-menu a.cta-nav { background:none; color:var(--red) !important; }
  .nav-menu a.active { color:var(--red); }

  .hero { padding:100px 18px 80px; }
  .hero-scroll { left:18px; }
  .hstat-sep { margin:0 18px 0 0; }
  .hstat { padding-right:18px; }
  .hero-title { font-size:clamp(56px,13vw,110px); }

  .perf-grid { grid-template-columns:1fr 1fr; }
  .why-grid { grid-template-columns:1fr; }
  .frow { grid-template-columns:1fr; }
  .cform { padding:22px 18px; }
  .footer-inner { padding:0 18px 40px; }
  .footer-cols { grid-template-columns:1fr 1fr; }
  .footer-bottom { padding:18px; }

  /* Loader mobile fix */
  .loader {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    width:100vw; height:100vh; height:100dvh;
    z-index:99999;
    touch-action:none; overflow:hidden;
  }
  .loader-svg { width:80px; height:80px; }
  .loader-brand { font-size:24px; letter-spacing:4px; }
  .loader-bar-wrap { width:160px; }
}

@media (max-width:480px) {
  .hero-title { font-size:clamp(52px,15vw,90px); }
  .ht-accent { -webkit-text-stroke:1.5px var(--red); }
  .hero-btns { flex-direction:column; gap:12px; }
  .btn-prim,.btn-ghost { width:100%; justify-content:center; text-align:center; }
  .hero-stats { flex-wrap:wrap; gap:20px; }
  .hstat-sep { display:none; }
  .hstat { padding:0; min-width:28%; }
  .perf-grid { grid-template-columns:1fr; }
  .footer-cols { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:1fr 1fr; }
  .erc-banner { flex-direction:column; gap:14px; }
  .cinfo { flex-direction:column; }
  .why-grid { grid-template-columns:1fr; }
  .about-main-img { height:240px; }
  .theme-toggle { width:36px; height:36px; }
}