/* ═══════════════════════════════════════════════
   DESIGN TOKENS — DARK MODE (défaut)
═══════════════════════════════════════════════ */
:root {
  /* Fonds sombres bleu nuit */
  --navy:        #08070e;
  --navy2:       #0d0e1c;
  --navy3:       #121326;
  --steel:       #1a1b32;
  --steel2:      #20224a;

  /* Couleur primaire : orangé */
  --cyan:        #ff7a1a;
  --cyan2:       #e05c00;
  --cyan-dim:    rgba(255,122,26,0.07);
  --cyan-glow:   rgba(255,122,26,0.20);

  /* Couleur secondaire : bleu foncé / bleu ciel */
  --blue-dark:   #1a3a6e;
  --blue-sky:    #4db6ff;
  --blue-dim:    rgba(77,182,255,0.07);

  /* Textes */
  --white:       #f0eee8;
  --white2:      #c9c2b5;
  --muted:       #7a7268;
  --muted2:      #4a4540;

  /* Utilitaires */
  --gold:        #f0c060;
  --green:       #00e5a0;
  --red:         #ff6b6b;

  /* Bordures */
  --border:      rgba(255,122,26,0.12);
  --border2:     rgba(255,255,255,0.06);
  --glass:       rgba(8,7,14,0.78);
  --glass2:      rgba(8,7,14,0.78);

  /* Rayons */
  --r:           14px;
  --r-lg:        20px;

  /* Couleurs de fond (pour le toggle) */
  --bg-main:     var(--navy);
  --bg-card:     var(--navy3);
  --bg-header:   rgba(8,7,14,0.80);
  --text-main:   var(--white);
  --shadow-glow: rgba(255,122,26,0.20);
  --form-input:rgba(0,0,0,.3);
}

/* ── LIGHT MODE ── */
:root.light {
  --navy:        #fff8f2;
  --navy2:       #fff3ea;
  --navy3:       #fdeedd;
  --steel:       #f0e8de;
  --steel2:      #e4d8cc;

  --white:       #1c1410;
  --white2:      #3d3228;
  --muted:       #7a6a5c;
  --muted2:      #b0a090;

  --border:      rgba(255,122,26,0.18);
  --border2:     rgba(0,0,0,0.08);
  --glass:       rgba(255,248,242,0.82);
  --glass2:      rgba(249, 220, 195, 0.82);

  --bg-main:     var(--navy);
  --bg-card:     var(--navy3);
  --bg-header:   rgba(255,248,242,0.88);
  --text-main:   var(--white);
  --shadow-glow: rgba(255,122,26,0.14);
  --form-input:rgba(255, 255, 255, 0.8);

}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  width:36px; height:36px; border-radius:9px;
  border:1px solid var(--border2); background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:all .2s; flex-shrink:0;
  font-size:1rem;
}
.theme-toggle:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim); }

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans', sans-serif;
  background:var(--navy);
  color:var(--white);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  transition:background .3s, color .3s;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--navy); }
::-webkit-scrollbar-thumb { background:var(--cyan2); border-radius:2px; }

/* ── AMBIENT TEXTURE ── */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  opacity:.5;
}
body::after {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,122,26,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,122,26,0.022) 1px, transparent 1px);
  background-size:72px 72px;
}

/* ── PAGE SHELL ── */
.page { position:relative; z-index:1; display:none; }
.page.active { display:block; }

/* ═══════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════ */
header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:70px; padding:0 clamp(20px,5vw,80px);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-header);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  transition:background .3s;
}

.logo { display:flex; align-items:center; gap:12px; text-decoration:none; cursor:pointer; min-width:0; }
.logo-icon {
  width: 100%;
  max-width: 220px;
  /* width:110px;  */
  height:auto;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.logo-icon img {
  width:100%; height:100%; object-fit:contain;
  background:transparent;
}
.logo-text-group {
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  min-width:0;
}
.logo-text {
  font-family:'Syne', sans-serif;
  font-size:1.1rem; font-weight:700; letter-spacing:-.02em;
  color:var(--cyan); line-height:1.1;
}
.logo-text span { color:var(--cyan); }
.logo-slogan {
  font-family:'DM Sans', sans-serif;
  font-size:.68rem; font-weight:400; letter-spacing:.01em;
  color:var(--blue-sky); line-height:1.1;
  white-space:nowrap;
}

#site-header nav { display:flex; align-items:center; gap:15px; flex:1; justify-content:flex-end; }
#site-header nav a {
  font-size:.85rem; font-weight:400; color:var(--muted);
  text-decoration:none; cursor:pointer; letter-spacing:.01em;
  transition:color .2s; padding:4px 0; border-bottom:1px solid transparent;
}
#site-header nav a:hover, #site-header nav a.active-link { color:var(--white); border-color:var(--cyan); }

/* Dropdown "Partenaires" */
.nav-dropdown { position:relative; }
.nav-dropdown-toggle { display:flex; align-items:center; gap:4px; }
.nav-dropdown-toggle .chevron { transition:transform .2s; }
.nav-dropdown:hover .chevron,
.nav-dropdown.open .chevron { transform:rotate(180deg); }

.nav-dropdown-menu {
  position:absolute; top:100%; left:0; margin-top:8px;
  background:var(--navy3); border:1px solid var(--border2); border-radius:10px;
  min-width:220px; padding:6px; display:none; flex-direction:column;
  box-shadow:0 12px 30px rgba(0,0,0,.35); z-index:1000;
}
.nav-dropdown-menu a {
  padding:10px 12px!important; border-bottom:none!important; border-radius:7px;
  white-space:nowrap;
}
.nav-dropdown-menu a:hover { background:var(--cyan-dim); }

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display:flex; }

/* .header-actions now lives inside <nav> in the markup (so it's reachable
   in the mobile dropdown). On desktop we push it to the far right with
   a left margin, visually matching the old sibling layout. */
.header-actions { display:flex; align-items:center; gap:10px; margin-left:28px; }

.btn-ghost {
  padding:8px 18px!important; border-radius:9px!important; font-size:.82rem!important; font-weight:500!important;
  border:1px solid var(--border2)!important; color:var(--white2)!important;
  background:transparent!important; cursor:pointer!important; text-decoration:none!important;
  transition:all .2s!important; letter-spacing:.01em!important;
  font-family:'DM Sans',sans-serif; white-space:nowrap!important;
}
.btn-ghost:hover { border-color:var(--cyan); color:var(--white); background:var(--cyan-dim); }

.btn-cta {
  padding:9px 20px!important; border-radius:9px!important; font-size:.82rem!important; font-weight:500!important;
  border:none!important; background:var(--cyan); color:var(--navy)!important;
  cursor:pointer!important; text-decoration:none!important; letter-spacing:.01em!important;
  transition:all .25s!important; display:inline-flex; align-items:center; gap:7px;
  box-shadow:0 0 24px rgba(255,122,26,0.25);
  font-family:'DM Sans',sans-serif; white-space:nowrap;
}
.btn-cta:hover { background:#ff9944; box-shadow:0 0 40px rgba(255,122,26,0.4); transform:translateY(-1px); }

/* ═══════════════════════════════════════════════
   LANDING PAGE
═══════════════════════════════════════════════ */
#page-landing {
  min-height:100vh;
}

/* HERO */
.hero {
  min-height:100vh;
  display:flex; align-items:center;
  padding:110px clamp(20px,5vw,80px) 80px;
  position:relative; overflow:hidden;
}

.orb { position:absolute; border-radius:50%; pointer-events:none; filter:blur(100px); }
.orb-1 { width:700px; height:700px; top:-150px; right:-100px;
  background:radial-gradient(circle, rgba(255,122,26,0.11) 0%, transparent 65%);
  animation:orb-drift 10s ease-in-out infinite; }
.orb-2 { width:500px; height:500px; bottom:-100px; left:10%;
  background:radial-gradient(circle, rgba(224,92,0,0.2) 0%, transparent 65%);
  animation:orb-drift 15s ease-in-out infinite reverse; }
.orb-3 { width:300px; height:300px; top:40%; left:40%;
  background:radial-gradient(circle, rgba(255,122,26,0.04) 0%, transparent 70%);
  animation:orb-drift 20s ease-in-out infinite; }
@keyframes orb-drift {
  0%,100% { transform:translate(0,0); }
  33% { transform:translate(30px,-25px); }
  66% { transform:translate(-20px,20px); }
}

.scan-line {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,0.4),transparent);
  top:0; animation:scan 8s linear infinite;
}
@keyframes scan { 0%{ top:-1px; } 100%{ top:100%; } }

.hero-inner {
  max-width:1280px; margin:0 auto; width:100%;
  display:grid; grid-template-columns:1.1fr 1fr; gap:64px; align-items:center;
}
.hero-inner > * { min-width:0; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px 5px 8px; border-radius:100px;
  background:rgba(0, 99, 229, 0.07); border:1px solid rgba(32,136,247,0.2);
  font-size:.72rem; color:var(--blue-sky); margin-bottom:22px;
  letter-spacing:.08em; text-transform:uppercase; font-weight:500;
}
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.8);} }

h2.hero-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2.7vw, 34px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin-bottom: 18px;
  overflow-wrap: break-word;
  word-break: break-word;
}

h2.hero-title em {
  font-style:normal;
  background:linear-gradient(125deg,var(--cyan) 0%,#ffb066 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hero-sub {
  font-size:1rem; color:var(--muted); line-height:1.75;
  max-width:480px; margin-bottom:36px; font-weight:300;
}

.hero-ctas { display:flex; gap:12px; margin-bottom:44px; flex-wrap:wrap; }

.btn-lg {
  padding:14px 28px; border-radius:11px; font-size:.9rem; font-weight:500;
  cursor:pointer; text-decoration:none; transition:all .25s;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Sans',sans-serif;
}
.btn-lg.primary {
  background:var(--cyan); color:var(--navy); border:none;
  box-shadow:0 0 36px rgba(255,122,26,0.3), 0 6px 24px rgba(0,0,0,.35);
}
.btn-lg.primary:hover { transform:translateY(-2px); box-shadow:0 0 52px rgba(255,122,26,.45), 0 12px 32px rgba(0,0,0,.4); }
.btn-lg.outline {
  background:transparent; color:var(--white2);
  border:1px solid var(--border2);
  backdrop-filter:blur(8px);
}
.btn-lg.outline:hover { border-color:rgba(255,122,26,.35); background:var(--cyan-dim); color:var(--white); }

.btn-arrow { transition:transform .2s; }
.btn-lg:hover .btn-arrow { transform:translateX(4px); }

.hero-trust { display:flex; gap:22px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--muted); }
.trust-check {
  width:20px; height:20px; border-radius:50%;
  background:rgba(0,229,160,.08); border:1px solid rgba(0,229,160,.25);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* HERO VISUAL */
.hero-visual { position:relative; }
.dash-card {
  background:linear-gradient(145deg,var(--navy3),var(--steel));
  border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 48px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.05);
}
.dash-topbar {
  padding:10px 16px;
  background:rgba(0,0,0,.35);
  border-bottom:1px solid var(--border2);
  display:flex; align-items:center; gap:7px;
}
.win-dot { width:10px; height:10px; border-radius:50%; }
.dash-url-bar {
  flex:1; text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem; color:var(--muted2); letter-spacing:.04em;
}
.dash-body { padding:18px; }
.dash-kpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.kpi-box {
  background:rgba(0,0,0,.3); border:1px solid var(--border2);
  border-radius:10px; padding:12px;
}
.kpi-label { font-size:.65rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px; }
.kpi-val { font-family:'Syne',sans-serif; font-size:1.3rem; font-weight:700; color:var(--white); }
.kpi-delta { font-size:.65rem; margin-top:3px; }
.delta-up { color:var(--blue-sky); }
.delta-pend { color:var(--gold); }

.dash-chart-wrap {
  background:rgba(0,0,0,.25); border:1px solid var(--border2);
  border-radius:10px; padding:14px; margin-bottom:12px;
}
.chart-label { font-size:.65rem; color:var(--muted2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; }
.bar-chart { display:flex; gap:5px; align-items:flex-end; height:56px; }
.bar {
  flex:1; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--cyan),rgba(224,92,0,.3));
}
.bar.hi { opacity:1; }
.bar:not(.hi) { opacity:.55; }

.dash-rows { display:flex; flex-direction:column; gap:7px; }
.dash-row {
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  background:rgba(0,0,0,.25); border:1px solid var(--border2); border-radius:9px;
}
.row-ico {
  width:28px; height:28px; border-radius:7px;
  background:rgba(255,122,26,.09); border:1px solid rgba(255,122,26,.18);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.row-info { flex:1; min-width:0; }
.row-name { font-size:.75rem; font-weight:500; color:var(--white2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row-meta { font-size:.65rem; color:var(--muted); margin-top:1px; }
.row-badge { font-size:.62rem; padding:2px 8px; border-radius:20px; flex-shrink:0; }
.badge-ok { background:rgba(0,229,160,.1); color:var(--blue-sky); border:1px solid rgba(0,229,160,.2); }
.badge-pend { background:rgba(232,196,106,.1); color:var(--gold); border:1px solid rgba(232,196,106,.2); }

/* floating accent cards */
.float-pill {
  position:absolute;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:12px; padding:12px 16px;
  backdrop-filter:blur(16px);
  box-shadow:0 24px 48px rgba(0,0,0,.45);
}
.float-pill-a { top:-20px; right:-30px; animation:flt 5s ease-in-out infinite; }
.float-pill-b { bottom:40px; left:-44px; animation:flt 7s ease-in-out infinite .3s; }
@keyframes flt { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
.fp-lbl { font-size:.62rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; }
.fp-val { font-family:'Syne',sans-serif; font-size:1.4rem; font-weight:700; color:var(--cyan); }
.fp-val small { font-size:.72rem; color:var(--muted); font-family:'DM Sans',sans-serif; font-weight:300; }
.fp-trend { font-size:.7rem; color:var(--blue-sky); margin-top:2px; }

/* GLOW DIVIDER */
.glow-div {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,.25),transparent);
}

/* STATS STRIP */
.stats-strip {
  border-top:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
  background:linear-gradient(180deg,rgba(255,122,26,.025),transparent);
  padding:0 clamp(20px,5vw,80px);
}
.stats-inner {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat-box { padding:44px 32px; border-right:1px solid var(--border2); min-width:0; }
.stat-box:last-child { border-right:none; }
.stat-num {
  font-family:'Syne',sans-serif;
  font-size:3rem; font-weight:800; letter-spacing:-2px; line-height:1;
  background:linear-gradient(135deg,var(--white),var(--white2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; margin-bottom:7px;
  white-space:nowrap;
}
.stat-num b { color:var(--cyan); -webkit-text-fill-color:var(--cyan); font-weight:800; }
.stat-lbl { font-size:.85rem; color:var(--muted); font-weight:300; }
.stat-sub { font-size:.72rem; color:var(--muted2); margin-top:4px; }

/* SECTION COMMONS */
.section {
  padding:100px clamp(20px,5vw,80px);
  max-width:1280px; margin:0 auto;
}
.section-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan); font-weight:500; margin-bottom:14px;
}
.section-eyebrow::before { content:''; width:28px; height:1px; background:var(--cyan); }
h2.section-title {
  font-family:'Syne',sans-serif;
  font-size:clamp(28px,3.5vw,46px);
  font-weight:700; line-height:1.08; letter-spacing:-1.2px; margin-bottom:14px;
}
h2.section-title em {
  font-style:normal;
  background:linear-gradient(125deg,var(--cyan),#ffb066);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.section-sub { font-size:.95rem; color:var(--muted); font-weight:300; max-width:500px; line-height:1.72; }

/* PRODUCTS PREVIEW on landing */
.products-header-row {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:44px; flex-wrap:wrap; gap:16px;
}
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.product-card {
  background:var(--navy3); border:1px solid var(--border2);
  border-radius:var(--r); overflow:hidden;
  transition:all .3s; cursor:pointer; position:relative;
}
.product-card:hover {
  border-color:rgba(255,122,26,.22);
  transform:translateY(-5px);
  box-shadow:0 24px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(255,122,26,.09);
}
.product-card::before {
  content:''; position:absolute; inset:0; border-radius:var(--r);
  background:linear-gradient(145deg,rgba(255,122,26,.04),transparent);
  opacity:0; transition:opacity .3s;
}
.product-card:hover::before { opacity:1; }

.prod-img {
  height:175px;
  background:linear-gradient(145deg,var(--steel),var(--steel2));
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.prod-img::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 110%, rgba(255,122,26,.09),transparent 65%);
}
.prod-icon-ring {
  width:68px; height:68px; border-radius:16px;
  background:rgba(255,122,26,.07); border:1px solid rgba(255,122,26,.18);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.prod-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.62rem; letter-spacing:.05em; padding:3px 10px; border-radius:20px;
  background:rgba(255,122,26,.09); border:1px solid rgba(255,122,26,.22);
  color:var(--cyan); text-transform:uppercase; font-weight:500;
}
.prod-new {
  position:absolute; top:12px; right:12px; z-index:2;
  font-size:.6rem; padding:3px 9px; border-radius:20px;
  background:rgba(0,229,160,.12); border:1px solid rgba(0,229,160,.25);
  color:var(--green); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
}
.prod-body { padding:18px; }
.prod-title { font-family:'Syne',sans-serif; font-size:1rem; font-weight:600; margin-bottom:7px; }
.prod-desc { font-size:.8rem; color:var(--muted); line-height:1.62; margin-bottom:14px; font-weight:300; }
.prod-specs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:14px; }
.spec { font-size:.7rem; padding:5px 9px; background:rgba(0,0,0,.3); border:1px solid var(--border2); border-radius:7px; color:var(--muted); }
.spec strong { color:var(--white2); display:block; font-size:.75rem; }
.prod-foot { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--border2); }
.prod-ref { font-size:.75rem; color:var(--muted); }
.prod-ref strong { color:var(--cyan); }
.btn-sm {
  padding:7px 15px; border-radius:8px; font-size:.75rem; font-weight:500;
   cursor:pointer; transition:all .2s;
  font-family:'DM Sans',sans-serif;
  display:inline-flex; align-items:center; gap:5px;
    background: rgba(0, 99, 229, .07);
    border: 1px solid rgba(32, 136, 247, 0.2);
    color: var(--blue-sky);
}
.btn-sm:hover { background:rgba(255,122,26,.16); }

/* SERVICES on landing */
.services-bg {
  background:linear-gradient(180deg,transparent,rgba(11,22,40,.8),rgba(11,22,40,.8),transparent);
  border-top:1px solid var(--border2); border-bottom:1px solid var(--border2);
  padding:100px 0;
}
.services-inner { max-width:1280px; margin:0 auto; padding:0 clamp(20px,5vw,80px); }
.services-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:44px; }
.service-card {
  background:var(--glass); border:1px solid var(--border2);
  border-radius:var(--r); padding:26px;
  display:flex; gap:18px; cursor:pointer;
  transition:all .3s;
}
.service-card:hover {
  border-color:rgba(255,122,26,.22);
  background:rgba(255,122,26,.025);
  transform:translateX(4px);
}
.svc-icon {
  width:50px; height:50px; flex-shrink:0; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.svc-info { flex:1; }
.svc-title { font-family:'Syne',sans-serif; font-size:.95rem; font-weight:600; margin-bottom:7px; }
.svc-desc { font-size:.8rem; color:var(--muted); line-height:1.62; font-weight:300; }
.svc-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; margin-top:10px; text-decoration:none;
  transition:gap .2s;
}
.svc-link:hover { gap:10px; }

/* PRÉSENTATION / ACTIVITÉS on landing */
.activities-section .section-sub { max-width:720px; }
.company-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:30px; margin-bottom:18px;
  background:rgba(255,122,26,.07); border:1px solid rgba(255,122,26,.2);
  font-size:.72rem; letter-spacing:.04em; color:var(--cyan); font-weight:500;
}
.company-badge svg { flex-shrink:0; }

.activities-list { display:flex; flex-direction:column; gap:22px; margin-top:48px; }

.activity-card {
  background:var(--glass); border:1px solid var(--border2);
  border-radius:var(--r-lg); padding:32px clamp(20px,3vw,40px);
  transition:all .3s; position:relative; overflow:hidden;
}
.activity-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,122,26,.035),transparent 55%);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.activity-card:hover { border-color:rgba(255,122,26,.22); box-shadow:0 24px 64px rgba(0,0,0,.35); }
.activity-card:hover::before { opacity:1; }

.activity-head {
  display:grid; grid-template-columns:auto auto 1fr; align-items:flex-start;
  gap:20px; margin-bottom:26px;
}
.activity-num {
  font-family:'Syne',sans-serif; font-size:1.9rem; font-weight:800;
  color:transparent; -webkit-text-stroke:1px rgba(255,122,26,.4);
  line-height:1; padding-top:2px;
}
.activity-icon {
  width:56px; height:56px; flex-shrink:0; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,122,26,.08); border:1px solid rgba(255,122,26,.2);
}
.activity-title {
  font-family:'Syne',sans-serif; font-size:1.25rem; font-weight:700;
  letter-spacing:-.3px; margin-bottom:9px;
}
.activity-intro { font-size:.88rem; color:var(--muted); font-weight:300; line-height:1.68; max-width:640px; }

.activity-items {
  display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;
  padding-left:calc(56px + 20px + 40px);
}
.activity-item {
  display:flex; align-items:flex-start; gap:10px;
  font-size:.85rem; color:var(--white2); font-weight:300; line-height:1.55;
}
.ai-check {
  width:18px; height:18px; flex-shrink:0; margin-top:1px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,122,26,.1); border:1px solid rgba(255,122,26,.22);
}

/* DOCS SECTION on landing */
.docs-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:40px; align-items:start; margin-top:44px; }
.doc-public { display:flex; flex-direction:column; gap:10px; }
.doc-item {
  display:flex; align-items:center; gap:12px; padding:14px;
  background:var(--navy3); border:1px solid var(--border2); border-radius:11px;
  cursor:pointer; transition:all .2s;
}
.doc-item:hover { border-color:rgba(255,122,26,.18); }
.doc-ico { width:38px; height:38px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.doc-inf { flex:1; }
.doc-name { font-size:.82rem; font-weight:500; color:var(--white2); }
.doc-meta { font-size:.7rem; color:var(--muted); margin-top:2px; }
.doc-lock { width:28px; height:28px; border-radius:7px; background:rgba(232,196,106,.07); border:1px solid rgba(232,196,106,.18); display:flex; align-items:center; justify-content:center; }

.access-card {
  background:var(--navy3); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:28px; position:relative; overflow:hidden;
}
.access-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.access-badge {
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
  border-radius:20px; background:rgba(0, 99, 229, 0.07); border:1px solid rgba(0,229,160,.18);
  font-size:.7rem; color:var(--blue-sky); margin-bottom:16px; letter-spacing:.04em;
}
.doc-premium-list { display:flex; flex-direction:column; gap:7px; }
.doc-premium-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  /* background:rgba(0,0,0,.3);  */
  border:1px solid var(--border2); border-radius:9px;
}
.dtype { font-size:.62rem; padding:2px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; flex-shrink:0; }
.dtype-iso { background:rgba(255,122,26,.09); color:var(--cyan); border:1px solid rgba(255,122,26,.18); }
.dtype-cert { background:rgba(0, 99, 229, 0.07); color:var(--blue-sky); border:1px solid rgba(0,229,160,.18); }
.dtype-pdf { background:rgba(232,196,106,.09); color:var(--gold); border:1px solid rgba(232,196,106,.18); }
.dname { flex:1; min-width:0; font-size:.8rem; color:var(--white2); overflow-wrap:break-word; word-break:break-word; }
.ddl { font-size:.7rem; color:var(--muted2); flex-shrink:0; }

.access-card-actions { display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.access-card-actions .btn-lg { min-width:0; }
@media(max-width:480px) {
  .access-card-actions { flex-direction:column; }
}

/* WORKFLOW */
.workflow-bg {
  border-top:1px solid var(--border2); border-bottom:1px solid var(--border2);
  background:linear-gradient(180deg,rgba(255,122,26,.02),transparent);
}
.workflow-inner { max-width:1280px; margin:0 auto; padding:100px clamp(20px,5vw,80px); }
.workflow-steps {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; margin-top:56px; position:relative;
}
.workflow-steps::before {
  content:''; position:absolute; top:27px; left:7%; right:7%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,.3),rgba(255,122,26,.3),transparent);
}
.wf-step { text-align:center; padding:0 20px; }
.wf-circle {
  width:54px; height:54px; border-radius:50%; margin:0 auto 18px;
  background:var(--navy2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; transition:all .3s;
}
.wf-step:hover .wf-circle { border-color:var(--cyan); box-shadow:0 0 24px rgba(255,122,26,.2); background:rgba(255,122,26,.07); }
.wf-num {
  position:absolute; top:-7px; right:-7px;
  width:18px; height:18px; border-radius:50%;
  background:var(--navy); border:1px solid var(--border);
  font-family:'Syne',sans-serif; font-size:.62rem; font-weight:700; color:var(--blue-sky);
  display:flex; align-items:center; justify-content:center;
}
.wf-title { font-family:'Syne',sans-serif; font-size:.9rem; font-weight:600; margin-bottom:7px; }
.wf-desc { font-size:.78rem; color:var(--muted); line-height:1.62; font-weight:300; }

/* TESTIMONIALS */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px; }
.testi-card {
  background:var(--navy3); border:1px solid var(--border2); border-radius:var(--r); padding:22px;
  transition:all .3s;
}
.testi-card:hover { border-color:rgba(255,122,26,.15); transform:translateY(-3px); }
.testi-stars { display:flex; gap:3px; margin-bottom:12px; }
.star { width:12px; height:12px; }
.testi-quote { font-size:.83rem; color:var(--white2); line-height:1.68; margin-bottom:18px; font-weight:300; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:10px; }
.testi-av {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--steel),var(--steel2));
  border:1px solid var(--blue-sky);
  display:flex; align-items:center; justify-content:center;
  font-family:'Syne',sans-serif; font-size:.78rem; font-weight:700; color:var(--blue-sky);
}
.testi-name { font-size:.8rem; font-weight:500; color:var(--white2); }
.testi-role { font-size:.68rem; color:var(--muted); margin-top:1px; }
.testi-co {
  margin-left:auto; font-size:.65rem; color:var(--muted2);
  padding:3px 8px; border-radius:4px;
  background:rgba(255,255,255,.03); border:1px solid var(--border2);
  text-transform:uppercase; letter-spacing:.06em;
}

/* FAQ */
.faq-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:64px; align-items:start; }
.faq-list { margin-top:0; }
.faq-item { border-bottom:1px solid var(--border2); cursor:pointer; }
.faq-header { display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:14px; }
.faq-q { font-size:.88rem; font-weight:400; color:var(--white2); transition:color .2s; }
.faq-item:hover .faq-q { color:var(--white); }
.faq-icon {
  width:26px; height:26px; border-radius:50%; border:1px solid var(--border);
  background:transparent; color:var(--muted); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:all .25s; font-size:1.1rem; line-height:1;
}
.faq-item.open .faq-icon { background:rgba(255,122,26,.09); border-color:rgba(255,122,26,.3); color:var(--cyan); transform:rotate(45deg); }
.faq-body { overflow:hidden; max-height:0; transition:max-height .35s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-body { max-height:200px; }
.faq-a { font-size:.82rem; color:var(--muted); line-height:1.72; padding-bottom:18px; font-weight:300; }

/* CTA BANNER */
.cta-banner {
  margin:0 clamp(20px,5vw,80px) 80px;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--navy3),var(--steel),var(--navy3));
  border:1px solid var(--border);
  padding:72px clamp(28px,6vw,100px);
  text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:500px; height:280px;
  background:radial-gradient(ellipse, rgba(255,122,26,.11), transparent 68%);
  pointer-events:none;
}
.cta-banner::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,122,26,.35),transparent);
}
.cta-tag { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin-bottom:18px; font-weight:500; display:block; }
.cta-title {
  font-family:'Syne',sans-serif;
  font-size:clamp(26px,3.5vw,44px);
  font-weight:800; line-height:1.1; letter-spacing:-1px; margin-bottom:14px;
}
.cta-sub { color:var(--muted); font-size:.95rem; font-weight:300; max-width:480px; margin:0 auto 32px; }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* FOOTER */
footer {
  background:var(--navy3); border-top:1px solid var(--border);
  padding:56px clamp(20px,5vw,80px) 28px;
}
.footer-grid {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; margin-bottom:44px;
}
.footer-brand .logo { margin-bottom:14px; }
.footer-tagline { font-size:.8rem; color:var(--muted); line-height:1.7; font-weight:300; max-width:240px; margin-bottom:18px; }
.footer-socials { display:flex; gap:8px; }
.soc {
  width:32px; height:32px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s; color:var(--muted);
}
.soc:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim); }
.footer-col h4 { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); font-weight:500; margin-bottom:14px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-col a { font-size:.8rem; color:var(--muted); text-decoration:none; font-weight:300; transition:color .2s; cursor:pointer; }
.footer-col a:hover { color:var(--white2); }
.footer-bottom {
  max-width:1280px; margin:0 auto;
  padding-top:22px; border-top:1px solid var(--border2);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.footer-copy { font-size:.72rem; color:var(--muted2); }
.footer-legal { display:flex; gap:16px; }
.footer-legal a { font-size:.72rem; color:var(--muted2); text-decoration:none; cursor:pointer; }
.footer-legal a:hover { color:var(--muted); }

/* WHATSAPP */
.wa-btn {
  position:fixed; bottom:26px; right:26px; z-index:999;
  width:52px; height:52px; border-radius:50%; background:#25d366;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 24px rgba(37,211,102,.4);
  text-decoration:none; transition:all .25s;
  animation:flt 5s ease-in-out infinite;
}
.wa-btn:hover { transform:scale(1.1); box-shadow:0 10px 36px rgba(37,211,102,.55); }

.fb-btn {
  position:fixed; bottom:90px; right:26px; z-index:999;
  width:52px; height:52px; border-radius:50%; background:#1877f2;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 24px rgba(24,119,242,.4);
  text-decoration:none; transition:all .25s;
  animation:flt 5s ease-in-out infinite;
  animation-delay:.3s;
}
.fb-btn:hover { transform:scale(1.1); box-shadow:0 10px 36px rgba(24,119,242,.55); }

/* REVEAL */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.vis { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════
   CATALOGUE PAGE
═══════════════════════════════════════════════ */
#page-catalogue { padding-top:70px; }
.cat-hero {
  padding:56px clamp(20px,5vw,80px) 40px;
  background:linear-gradient(180deg,rgba(255,122,26,.04),transparent);
  border-bottom:1px solid var(--border2);
}
.cat-hero-inner { max-width:1280px; margin:0 auto; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:.75rem; color:var(--muted); margin-bottom:16px; }
.breadcrumb span { color:var(--muted2); }
.breadcrumb a { color:var(--muted); text-decoration:none; cursor:pointer; }
.breadcrumb a:hover { color:var(--white2); }
.cat-title { font-family:'Syne',sans-serif; font-size:clamp(24px,3vw,38px); font-weight:700; letter-spacing:-1px; margin-bottom:8px; }
.cat-sub { font-size:.88rem; color:var(--muted); font-weight:300; }

.cat-body { max-width:1280px; margin:0 auto; padding:36px clamp(20px,5vw,80px) 80px; display:grid; grid-template-columns:260px 1fr; gap:28px; }

/* FILTERS */
.filters-panel {
  position:sticky; top:86px; height:fit-content;
  background:var(--navy3); border:1px solid var(--border2); border-radius:var(--r); padding:20px;
}
.filter-section { margin-bottom:24px; }
.filter-section:last-child { margin-bottom:0; }
.filter-label { font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); font-weight:500; margin-bottom:10px; display:block; }
.search-wrap { position:relative; margin-bottom:20px; }
.search-ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.search-input {
  width:100%; padding:10px 12px 10px 38px;
  background:rgba(0,0,0,.3); border:1px solid var(--border2); border-radius:9px;
  font-family:'DM Sans',sans-serif; font-size:.82rem; color:var(--white);
  outline:none; transition:border-color .2s; caret-color:var(--cyan);
}
.search-input::placeholder { color:var(--muted2); }
.search-input:focus { border-color:rgba(255,122,26,.35); }
.filter-chips { display:flex; flex-direction:column; gap:6px; }
.filter-chip {
  padding:7px 12px; border-radius:8px;
  background:rgba(0,0,0,.25); border:1px solid var(--border2);
  font-size:.78rem; color:var(--muted); cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:space-between;
}
.filter-chip:hover { border-color:rgba(255,122,26,.2); color:var(--white2); }
.filter-chip.on { background:rgba(255,122,26,.08); border-color:rgba(255,122,26,.3); color:var(--cyan); }
.filter-chip-count { font-size:.65rem; color:var(--muted2); }
.filter-chip.on .filter-chip-count { color:rgba(255,122,26,.6); }

/* CATALOGUE GRID */
.cat-main { }
.cat-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; flex-wrap:wrap; gap:10px;
}
.cat-count { font-size:.82rem; color:var(--muted); }
.cat-count strong { color:var(--white2); }
.view-toggle { display:flex; gap:4px; }
.view-btn {
  width:32px; height:32px; border-radius:7px;
  border:1px solid var(--border2); background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); transition:all .2s;
}
.view-btn.on { background:var(--cyan-dim); border-color:rgba(255,122,26,.3); color:var(--cyan); }
.sort-select {
  padding:7px 12px; border-radius:8px;
  background:rgba(0,0,0,.3); border:1px solid var(--border2);
  font-family:'DM Sans',sans-serif; font-size:.78rem; color:var(--white2);
  outline:none; cursor:pointer;
}
.sort-select option { background:var(--navy3); }

.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cat-grid.list-view { grid-template-columns:1fr; }
.cat-grid.list-view .product-card { display:flex; }
.cat-grid.list-view .prod-img { width:180px; height:auto; flex-shrink:0; }
.cat-grid.list-view .prod-body { flex:1; }

/* PAGINATION */
.pagination { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:36px; }
.page-btn {
  width:36px; height:36px; border-radius:9px;
  border:1px solid var(--border2); background:transparent;
  color:var(--muted); font-size:.82rem; cursor:pointer; transition:all .2s;
  font-family:'DM Sans',sans-serif; display:flex; align-items:center; justify-content:center;
}
.page-btn:hover { border-color:rgba(255,122,26,.3); color:var(--white); }
.page-btn.on { background:var(--cyan-dim); border-color:rgba(255,122,26,.3); color:var(--cyan); }

/* ═══════════════════════════════════════════════
   PRODUCT DETAIL PAGE
═══════════════════════════════════════════════ */
#page-product { padding-top:70px; }
.prod-detail-hero {
  padding:40px clamp(20px,5vw,80px) 0;
  border-bottom:1px solid var(--border2);
}
.prod-detail-inner { max-width:1280px; margin:0 auto; }
.prod-detail-layout {
  max-width:1280px; margin:0 auto;
  padding:40px clamp(20px,5vw,80px) 80px;
  display:grid; grid-template-columns:1fr 480px; gap:40px; align-items:start;
}

/* GALLERY */
.gallery-main {
  background:linear-gradient(145deg,var(--steel),var(--steel2));
  border:1px solid var(--border2); border-radius:var(--r);
  height:360px; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; margin-bottom:12px;
}
.gallery-main::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 120%, rgba(255,122,26,.1), transparent 65%);
}
.gallery-main-ico { position:relative; z-index:1; }
.gallery-thumbs { display:flex; gap:8px; }
.gallery-thumb {
  width:72px; height:54px; border-radius:8px;
  background:linear-gradient(145deg,var(--steel),var(--steel2));
  border:2px solid transparent; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.gallery-thumb.on { border-color:var(--cyan); }
.gallery-thumb:hover { border-color:rgba(255,122,26,.5); }

/* PRODUCT INFO */
.prod-info { }
.prod-category-badge {
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
  border-radius:20px; background:rgba(255,122,26,.08); border:1px solid rgba(255,122,26,.2);
  font-size:.7rem; color:var(--cyan); margin-bottom:12px; font-weight:500;
}
h1.prod-name {
  font-family:'Syne',sans-serif;
  font-size:clamp(22px,2.5vw,32px); font-weight:700; letter-spacing:-.8px;
  margin-bottom:10px; line-height:1.15;
}
.prod-ref-row { display:flex; align-items:center; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.prod-sku { font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--muted); }
.prod-avail { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--green); }
.avail-dot { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }

.prod-short-desc { font-size:.88rem; color:var(--muted); line-height:1.72; font-weight:300; margin-bottom:22px; }

/* SPEC TABLE */
.spec-table { background:var(--navy3); border:1px solid var(--border2); border-radius:var(--r); overflow:hidden; margin-bottom:22px; }
.spec-table-header {
  padding:12px 16px; border-bottom:1px solid var(--border2);
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted2); font-weight:500;
}
.spec-row { display:flex; border-bottom:1px solid var(--border2); }
.spec-row:last-child { border-bottom:none; }
.spec-key { width:40%; padding:10px 16px; font-size:.8rem; color:var(--muted); font-weight:400; border-right:1px solid var(--border2); }
.spec-val { flex:1; padding:10px 16px; font-size:.82rem; color:var(--white2); font-weight:500; }

/* PARTIAL SPECS (for visitors) */
.spec-locked {
  background:rgba(0,0,0,.25); border:1px solid var(--border2); border-radius:var(--r);
  padding:20px; margin-bottom:22px; text-align:center;
  position:relative; overflow:hidden;
}
.spec-locked::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 60%,var(--navy3));
  pointer-events:none;
}
.lock-icon { margin-bottom:8px; }
.lock-text { font-size:.85rem; color:var(--white2); font-weight:500; margin-bottom:5px; }
.lock-sub { font-size:.78rem; color:var(--muted); font-weight:300; }

/* ACTION BUTTONS */
.prod-actions { display:flex; gap:10px; margin-bottom:22px; flex-wrap:wrap; }
.prod-actions .btn-lg { flex:1; justify-content:center; }

/* CERTS */
.cert-row { display:flex; gap:8px; flex-wrap:wrap; }
.cert-chip {
  display:flex; align-items:center; gap:6px; padding:5px 12px;
  background:rgba(0,0,0,.25); border:1px solid var(--border2); border-radius:7px;
  font-size:.72rem; color:var(--muted); font-weight:500;
}

/* TABS */
.prod-tabs { margin-top:48px; border-top:1px solid var(--border2); }
.tabs-nav { display:flex; gap:0; border-bottom:1px solid var(--border2); }
.tab-btn {
  padding:14px 20px; background:none; border:none; border-bottom:2px solid transparent;
  font-family:'DM Sans',sans-serif; font-size:.85rem; font-weight:500; color:var(--muted);
  cursor:pointer; transition:all .2s; margin-bottom:-1px;
}
.tab-btn:hover { color:var(--white2); }
.tab-btn.on { color:var(--cyan); border-bottom-color:var(--cyan); }
.tab-content { padding:28px 0; display:none; }
.tab-content.on { display:block; }

/* RELATED */
.related-section { max-width:1280px; margin:0 auto; padding:0 clamp(20px,5vw,80px) 80px; }

/* ═══════════════════════════════════════════════
   SERVICES PAGE
═══════════════════════════════════════════════ */
#page-services { padding-top:70px; }
.svc-hero {
  padding:64px clamp(20px,5vw,80px) 0;
  background:linear-gradient(180deg,rgba(255,122,26,.04),transparent);
  border-bottom:1px solid var(--border2);
}
.svc-hero-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding-bottom:60px; }
.svc-cards-grid { max-width:1280px; margin:0 auto; padding:60px clamp(20px,5vw,80px); display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.svc-full-card {
  background:var(--navy3); border:1px solid var(--border2); border-radius:var(--r-lg);
  padding:28px; cursor:pointer; transition:all .3s; position:relative; overflow:hidden;
}
.svc-full-card::before {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0; transition:opacity .3s;
}
.svc-full-card:hover { border-color:rgba(255,122,26,.22); transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.svc-full-card:hover::before { opacity:1; }
.svc-full-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.svc-full-title { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:600; margin-bottom:8px; }
.svc-full-desc { font-size:.85rem; color:var(--muted); line-height:1.68; font-weight:300; margin-bottom:16px; }
.svc-features { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; }
.svc-feat { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--white2); }
.feat-check { width:16px; height:16px; border-radius:50%; background:rgba(0,229,160,.1); border:1px solid rgba(0,229,160,.25); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.svc-link-btn {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.82rem; font-weight:500; text-decoration:none;
  transition:gap .2s; cursor:pointer;
}
.svc-link-btn:hover { gap:12px; }

/* PROCESS */
.process-section { max-width:1280px; margin:0 auto; padding:0 clamp(20px,5vw,80px) 80px; }
.process-timeline { margin-top:40px; display:flex; flex-direction:column; gap:0; position:relative; }
.process-timeline::before {
  content:''; position:absolute; left:27px; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,var(--cyan),transparent);
  opacity:.25;
}
.proc-step { display:flex; gap:24px; padding-bottom:36px; }
.proc-step:last-child { padding-bottom:0; }
.proc-circle {
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:var(--navy3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
  font-family:'Syne',sans-serif; font-size:.8rem; font-weight:700; color:var(--cyan);
}
.proc-content { padding-top:14px; }
.proc-title { font-family:'Syne',sans-serif; font-size:1rem; font-weight:600; margin-bottom:6px; }
.proc-desc { font-size:.82rem; color:var(--muted); line-height:1.68; font-weight:300; max-width:520px; }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.7); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box {
  background:var(--navy3); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:36px; width:90%; max-width:480px;
  position:relative; transform:scale(.92) translateY(20px);
  transition:transform .35s cubic-bezier(.175,.885,.32,1.275);
  box-shadow:0 48px 120px rgba(0,0,0,.6);
}
.modal-overlay.open .modal-box { transform:scale(1) translateY(0); }
.modal-box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.modal-close {
  position:absolute; top:14px; right:14px; width:28px; height:28px;
  border-radius:7px; background:rgba(255,255,255,.06); border:1px solid var(--border2);
  color:var(--muted); cursor:pointer; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.modal-close:hover { color:var(--white); background:rgba(255,255,255,.1); }
.modal-title { font-family:'Syne',sans-serif; font-size:1.25rem; font-weight:700; margin-bottom:6px; }
.modal-sub { font-size:.82rem; color:var(--muted); margin-bottom:22px; line-height:1.6; }
.form-field { margin-bottom:14px; }
.form-field label { display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:6px; }
.form-input {
  width:100%; padding:11px 14px;
  background: var(--form-input);
   border:1px solid var(--border2); border-radius:9px;
  font-family:'DM Sans',sans-serif; font-size:.85rem; color:var(--white);
  outline:none; transition:border-color .2s; caret-color:var(--cyan);
}
.form-input:focus { border-color:rgba(255,122,26,.4); }
.form-input::placeholder { color:var(--muted2); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
textarea.form-input { resize:vertical; min-height:90px; }
.form-submit {
  width:100%; padding:13px; border-radius:11px; border:none;
  background:linear-gradient(135deg,var(--cyan),var(--cyan2));
  color:var(--navy); font-family:'DM Sans',sans-serif;
  font-size:.88rem; font-weight:600; cursor:pointer;
  transition:all .25s; box-shadow:0 0 28px rgba(255,122,26,.25);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.form-submit:hover { transform:translateY(-1px); box-shadow:0 0 44px rgba(255,122,26,.4); }

/* ── TOASTS ── */
.toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--glass); border:1px solid var(--border);
  border-radius:12px; padding:12px 20px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.175,.885,.32,1.275), opacity .4s;
  z-index:3000; opacity:0; min-width:260px;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast-ico { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.toast-text strong { display:block; font-size:.82rem; font-weight:600; color:var(--white); }
.toast-text span { font-size:.75rem; color:var(--muted); }

/* ── MOBILE RESPONSIVE ── */
@media(max-width:900px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .stats-inner { grid-template-columns:repeat(2,1fr); }
  .stat-box:nth-child(2) { border-right:none; }
  .stat-box { border-bottom:1px solid var(--border2); padding:32px 16px; }
  .stat-box:last-child { border-bottom:none; }
  .stat-num { font-size:clamp(28px,9vw,42px); }
  .products-grid,.cat-grid { grid-template-columns:repeat(2,1fr); }
  .services-grid,.svc-cards-grid { grid-template-columns:1fr; }
  .activity-head { grid-template-columns:auto 1fr; }
  .activity-num { display:none; }
  .activity-items { grid-template-columns:1fr; padding-left:0; }
  .docs-grid,.prod-detail-layout { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .workflow-steps { grid-template-columns:1fr 1fr; gap:32px; }
  .workflow-steps::before { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .cat-body { grid-template-columns:1fr; }
  .filters-panel { position:static; }
  .faq-layout { grid-template-columns:1fr; }
  .svc-hero-inner { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .products-grid,.cat-grid { grid-template-columns:1fr; }
  .hero-ctas { flex-direction:column; }
  .btn-lg { width:100%; justify-content:center; }
  .footer-grid { grid-template-columns:1fr; }
  .testi-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .prod-detail-layout { grid-template-columns:1fr; }
}
@media(max-width:420px) {
  header { padding:0 14px; }
  .logo-icon { width:36px; height:36px; }
  .logo-slogan { display:none; }
}

/* ── MOBILE HAMBURGER ── */
.mobile-toggle { display:none; background:none; border:none; cursor:pointer; padding:6px; flex-direction:column; gap:5px; }
.mobile-toggle span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:all .3s; }

@media(max-width:900px) {}

@media(max-width:1050px) {
  .mobile-toggle { display:flex; }

  #site-header nav {
    display:none; position:fixed; top:70px; left:0; right:0;
    max-height:calc(100vh - 70px); overflow-y:auto;
    background:var(--glass2); backdrop-filter:blur(20px);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:8px 20px 20px; border-bottom:1px solid var(--border);
    gap:0; z-index:999;
  }
  #site-header nav.open { display:flex; }
  #site-header nav a { padding:14px 4px; border-bottom:1px solid var(--border2); }

  .header-actions {
    flex-direction:column; align-items:stretch;
    gap:10px; width:100%; margin-left:0;
    padding:16px 0 4px; margin-top:6px;
  }
  .header-actions .theme-toggle { align-self:flex-start; width:40px; height:40px; }
  .header-actions .btn-ghost,
  .header-actions .btn-cta { width:100%; justify-content:center; padding:12px 18px; }

    .nav-dropdown-menu {
    position:static; box-shadow:none; border:none; background:transparent;
    margin-top:0; padding:0 0 0 14px; min-width:0;
  }
  .nav-dropdown-menu a { padding:12px 4px!important; border-bottom:1px solid var(--border2)!important; }
  .nav-dropdown:hover .nav-dropdown-menu { display:none; }
  .nav-dropdown.open .nav-dropdown-menu { display:flex; }
}

/* ── FLASH ALERTS ── */
.alert-flash { padding:14px 20px; border-radius:var(--r); margin-bottom:24px; font-size:.85rem; line-height:1.6; }
.alert-flash.success { background:rgba(0,229,160,.08); border:1px solid rgba(0,229,160,.2); color:var(--green); }
.alert-flash.error { background:rgba(255,107,107,.08); border:1px solid rgba(255,107,107,.2); color:var(--red); }

/* ── FORM PAGE STYLES ── */
.page-hero { padding:56px clamp(20px,5vw,80px) 40px; background:linear-gradient(180deg,rgba(255,122,26,.04),transparent); border-bottom:1px solid var(--border2); margin-top:70px; }
.page-hero-inner { max-width:1280px; margin:0 auto; }
.page-content { max-width:1280px; margin:0 auto; padding:40px clamp(20px,5vw,80px) 80px; }

/* ── CONTACT PAGE LAYOUT ── */
.contact-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
}
.contact-grid > * { min-width:0; }
@media(max-width:900px) {
  .contact-grid { grid-template-columns:1fr; gap:24px; }
}
.contact-info-row a, .contact-info-row { min-width:0; }
.contact-info-row > *:last-child { min-width:0; overflow-wrap:break-word; word-break:break-word; }

/* ── ABOUT PAGE LAYOUT ── */
.about-intro-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-bottom:64px;
}
.about-intro-grid > * { min-width:0; }
.about-values-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px;
}
.about-values-grid > * { min-width:0; }
@media(max-width:900px) {
  .about-intro-grid { grid-template-columns:1fr; gap:32px; }
  .about-values-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:560px) {
  .about-values-grid { grid-template-columns:1fr; }
}
/* ── ABOUT PAGE — TEAM / SITE GALLERY (scattered, interactive photo wall) ── */
.about-gallery-wall {
  position:relative;
  margin-top:44px;
  min-height:280px;
}
.about-gallery-pin {
  position:absolute;
  cursor:pointer;
  background:var(--navy3);
  border:6px solid var(--navy3);
  border-radius:6px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, z-index 0s;
  will-change:transform;
  animation:pin-in .6s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:calc(var(--i, 0) * 90ms);
}
:root.light .about-gallery-pin { background:var(--steel); border-color:var(--steel); }
.about-gallery-pin::after {
  content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffdca8, var(--cyan) 60%, var(--cyan2) 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.4);
  z-index:2;
}
.about-gallery-pin img {
  display:block; width:100%; height:100%; object-fit:cover; border-radius:2px;
  pointer-events:none;
}
.about-gallery-pin:hover,
.about-gallery-pin:focus-visible {
  transform:rotate(0deg) scale(1.09) translateY(-6px) !important;
  box-shadow:0 26px 55px rgba(255,122,26,.28);
  z-index:50 !important;
  outline:none;
}

@keyframes pin-in {
  from { opacity:0; transform:translateY(24px) rotate(0deg) scale(.92); }
}

/* Desktop scatter positions — cycles every 5 images to echo an art-directed wall */
.about-gallery-pin:nth-child(5n+1) { top:0;    left:2%;   width:23%; height:230px; transform:rotate(-6deg); }
.about-gallery-pin:nth-child(5n+2) { top:40px; left:27%;  width:21%; height:190px; transform:rotate(4deg); }
.about-gallery-pin:nth-child(5n+3) { top:0;    left:50%;  width:24%; height:260px; transform:rotate(-3deg); }
.about-gallery-pin:nth-child(5n+4) { top:60px; left:76%;  width:22%; height:200px; transform:rotate(6deg); }
.about-gallery-pin:nth-child(5n+5) { top:300px;left:14%;  width:25%; height:230px; transform:rotate(3deg); }
.about-gallery-pin:nth-child(5n+6) { top:280px;left:41%;  width:22%; height:210px; transform:rotate(-5deg); }
.about-gallery-pin:nth-child(5n+7) { top:330px;left:65%;  width:23%; height:240px; transform:rotate(2deg); }
.about-gallery-pin:nth-child(5n+8) { top:560px;left:5%;   width:22%; height:200px; transform:rotate(4deg); }
.about-gallery-pin:nth-child(5n+9) { top:580px;left:29%;  width:21%; height:190px; transform:rotate(-4deg); }
.about-gallery-pin:nth-child(5n+10){ top:560px;left:52%;  width:24%; height:230px; transform:rotate(5deg); }

@media(max-width:900px) {
  .about-gallery-wall { min-height:0; }
  .about-gallery-pin {
    position:relative !important; top:auto !important; left:auto !important;
    width:calc(50% - 22px) !important; height:200px !important;
    display:inline-block; margin:0 10px 30px;
  }
  .about-gallery-wall { display:flex; flex-wrap:wrap; justify-content:center; }
}
@media(max-width:560px) {
  .about-gallery-pin { width:calc(100% - 20px) !important; height:230px !important; margin:0 10px 26px; }
}

/* ── LIGHTBOX ── */
.about-lightbox {
  position:fixed; inset:0; z-index:3000;
  background:rgba(4,4,10,.92); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s;
  padding:24px;
}
.about-lightbox.open { opacity:1; visibility:visible; }
.about-lightbox-frame {
  position:relative; max-width:min(880px,92vw); max-height:86vh;
  transform:scale(.94); transition:transform .3s;
}
.about-lightbox.open .about-lightbox-frame { transform:scale(1); }
.about-lightbox-frame img {
  display:block; max-width:100%; max-height:86vh; object-fit:contain;
  border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  border:1px solid var(--border2);
}
.about-lightbox-close {
  position:absolute; top:-44px; right:0;
  width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--border2);
  color:var(--white); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s; font-size:1.1rem;
}
.about-lightbox-close:hover { background:var(--cyan); border-color:var(--cyan); color:var(--navy); }
.about-lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid var(--border2);
  color:var(--white); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.about-lightbox-nav:hover { background:var(--cyan); border-color:var(--cyan); color:var(--navy); }
.about-lightbox-nav.prev { left:-56px; }
.about-lightbox-nav.next { right:-56px; }
.about-lightbox-counter {
  position:absolute; bottom:-34px; left:50%; transform:translateX(-50%);
  font-size:.78rem; color:var(--muted); letter-spacing:.04em;
}
@media(max-width:720px) {
  .about-lightbox-nav.prev { left:6px; }
  .about-lightbox-nav.next { right:6px; }
  .about-lightbox-nav { background:rgba(4,4,10,.55); }
}


/* ─── HERO MINI ─── */
.hero-mini {
  padding: 52px clamp(16px,4vw,64px) 44px;
  background: linear-gradient(180deg, var(--navy2) 0%, var(--navy) 100%);
  /* border-bottom: 1px solid var(--border2); */
  overflow: hidden;
  position: relative;
}
.hero-mini-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 100% at 80% 50%, rgba(255,122,26,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 30% 60% at 10% 0%, rgba(224,92,0,0.08) 0%, transparent 60%);
  z-index: 0;
}
.tech-lines {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 40%; opacity: 0.12; pointer-events: none;
  overflow: hidden; z-index: 0;
}
.tech-lines svg { width: 100%; height: 100%; }
.hero-mini-inner { max-width: 1280px; margin: 0 auto; position: relative; z-index: 1; }

.hero-mini-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(24px, 3.5vw, 38px);
  font-weight: 700; letter-spacing: -0.8px;
  margin-bottom: 8px;
}
.hero-mini-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--cyan), #ffb066);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-mini-sub {
  font-size: 15px; color: var(--muted); font-weight: 300; max-width: 540px;
}

/* ─── SEARCH BAR ─── */
.search-section {
  padding: 0 clamp(16px,4vw,64px);
  margin-top: -24px;
  position: relative; z-index: 10;
}
.search-bar-wrap { max-width: 1280px; margin: 0 auto; }
.search-bar {
  display: flex; align-items: center;
  background: var(--navy2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden; transition: all 0.3s;
}
.search-bar:focus-within {
  border-color: rgba(255,122,26,0.35);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,122,26,0.15), 0 0 20px rgba(255,122,26,0.06);
}
.search-icon {
  padding: 0 18px; color: var(--muted); display: flex; align-items: center; flex-shrink: 0;
}
.search-bar .search-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--white); font-size: 15px; font-family: 'DM Sans', sans-serif;
  padding: 16px 0; min-width: 0;
}
.search-bar .search-input::placeholder { color: var(--muted2); }
.search-submit-btn {
  margin: 8px; padding: 10px 24px;
  background: var(--cyan); color: var(--navy); border: none;
  border-radius: 9px; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 7px;
  flex-shrink: 0; font-family: 'DM Sans', sans-serif;
}
.search-submit-btn:hover { background: #ff9944; box-shadow: 0 0 16px rgba(255,122,26,0.3); }

/* ─── CATALOGUE LAYOUT ─── */
.catalogue-layout {
  max-width: 1280px; margin: 0 auto;
  padding: 32px clamp(16px,4vw,64px) 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}

/* ─── TOOLBAR ─── */
.toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border2);
  border-radius: 12px; margin-bottom: 20px;
  flex-wrap: wrap;
}
.result-count { font-size: 13px; color: var(--muted); }
.result-count strong { color: var(--white2); }
.toolbar-sep { width: 1px; height: 20px; background: var(--border2); margin: 0 4px; }
.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.view-btns { display: flex; border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; }
.view-btn {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: transparent; border: none; color: var(--muted);
  transition: all 0.15s;
}
.view-btn:hover { color: var(--white2); background: rgba(255,255,255,0.04); }
.view-btn.on,
.view-btn.active { color: var(--cyan); background: rgba(255,122,26,0.08); }

/* ─── CATEGORY CHIPS ─── */
.cat-chips-bar {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px;
}
.cat-chip-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px; font-size: 12px;
  border: 1px solid var(--border2); color: var(--muted);
  background: transparent; text-decoration: none;
  transition: all 0.18s; white-space: nowrap;
}
.cat-chip-link:hover { border-color: rgba(255,122,26,0.2); color: var(--white2); background: rgba(255,122,26,0.04); }
.cat-chip-link.on {
  color: var(--cyan); background: rgba(255,122,26,0.08);
  border-color: rgba(255,122,26,0.25);
}
.cat-chip-link .chip-count {
  font-size: 10px; padding: 1px 6px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border2); color: var(--muted2);
}
.cat-chip-link.on .chip-count { background: rgba(255,122,26,0.12); border-color: rgba(255,122,26,0.2); color: var(--cyan); }

/* ─── PRODUCT GRID ─── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.products-grid.list-view {
  grid-template-columns: 1fr;
}

/* ─── PRODUCT CARD (GRID) ─── */
.product-card {
  display: block;
  background: var(--navy2);
  border: 1px solid var(--border2);
  border-radius: 14px; overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  cursor: pointer; text-decoration: none; color: inherit;
}
.product-card:hover {
  border-color: rgba(255,122,26,0.2);
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,122,26,0.08);
}

/* Image area */
.prod-img-wrap {
  height: 170px;
  background: linear-gradient(145deg, var(--steel), var(--steel2));
  overflow: hidden; position: relative;
}
.prod-img-inner {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover .prod-img-inner { transform: scale(1.04); }
.prod-img-inner img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.prod-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,13,26,0.6) 100%);
}

/* Badges */
.card-badges {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 5px; flex-wrap: wrap; z-index: 2;
}
.card-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase;
}
.card-badge-featured {
  background: rgba(232,196,106,0.12);
  border: 1px solid rgba(232,196,106,0.25);
  color: var(--gold);
}
.card-badge-new {
  background: rgba(0,229,160,0.12);
  border: 1px solid rgba(0,229,160,0.25);
  color: var(--green);
}

/* Card body */
.card-body { padding: 16px; }
.card-ref {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--cyan); letter-spacing: 0.8px;
  margin-bottom: 5px; text-transform: uppercase;
}
.card-title {
  font-family: 'Syne', sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  margin-bottom: 6px; color: var(--white);
  transition: color 0.2s;
}
.product-card:hover .card-title { color: var(--cyan); }
.card-desc { font-size: 12px; color: var(--muted); line-height: 1.6; font-weight: 300; margin-bottom: 12px; }

.card-specs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.spec-tag {
  font-size: 11px; padding: 3px 8px; border-radius: 5px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border2);
  color: var(--muted); white-space: nowrap;
}
.spec-tag strong { color: var(--white2); font-weight: 500; }

/* Card footer / actions */
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.card-actions {
  display: flex; gap: 7px;
  opacity: 0; transform: translateY(4px);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover .card-actions { opacity: 1; transform: translateY(0); }
@media (hover: none) { .card-actions { opacity: 1; transform: none; } }

.btn-card {
  padding: 8px 14px; border-radius: 8px; font-size: 12px;
  cursor: pointer; transition: all 0.18s;
  font-family: 'DM Sans', sans-serif; border: none;
  font-weight: 500;
}
.btn-card-primary {
  background: rgba(255,122,26,0.1);
  border: 1px solid rgba(255,122,26,0.25);
  color: var(--cyan);
}
.btn-card-primary:hover { background: rgba(255,122,26,0.2); }

/* ─── LIST VIEW OVERRIDES ─── */
.products-grid.list-view .product-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  border-radius: 12px;
}
.products-grid.list-view .prod-img-wrap {
  height: 100%; min-height: 120px; border-radius: 0;
}
.products-grid.list-view .card-body {
  padding: 18px 20px;
  border-left: 1px solid var(--border2);
  display: flex; flex-direction: column; justify-content: center;
}
.products-grid.list-view .card-actions {
  opacity: 1; transform: none;
  margin-top: 10px;
}
.products-grid.list-view .card-foot { flex-wrap: wrap; }

/* ─── EMPTY STATE ─── */
.empty-state {
  grid-column: 1 / -1;
  text-align: center; padding: 80px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.empty-icon {
  width: 72px; height: 72px; border-radius: 20px;
  background: var(--navy2); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
}
.empty-title { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 600; }
.empty-sub { font-size: 14px; color: var(--muted); font-weight: 300; max-width: 360px; }
.btn-reset {
  margin-top: 8px; padding: 9px 20px; border-radius: 9px;
  border: 1px solid var(--border2); color: var(--muted); font-size: 13px;
  background: transparent; cursor: pointer; text-decoration: none;
  transition: all 0.2s; display: inline-flex; align-items: center; gap: 7px;
}
.btn-reset:hover { border-color: rgba(255,122,26,0.3); color: var(--white2); }

/* ─── PAGINATION ─── */
.pagination {
  margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--border2);
  display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 6px;
  border-radius: 8px; font-size: 13px;
  border: 1px solid transparent; color: var(--muted);
  text-decoration: none; transition: all 0.15s;
}
.pagination a:hover { color: var(--white2); background: rgba(255,255,255,0.04); border-color: var(--border2); }
.pagination .active, .pagination .active a {
  color: var(--cyan); background: rgba(255,122,26,0.08); border-color: rgba(255,122,26,0.2);
}

/* ─── CTA SECTION ─── */
.cta-strip {
  margin: 0 clamp(16px,4vw,64px) 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--navy2) 0%, var(--steel) 60%, var(--navy2) 100%);
  border: 1px solid var(--border);
  padding: 48px clamp(24px,5vw,80px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; overflow: hidden; position: relative;
}
.cta-strip::before {
  content: ''; position: absolute; top: -80px; right: 80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,122,26,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-left { max-width: 500px; position: relative; z-index: 1; }
.cta-label {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 10px; font-weight: 500;
}
.cta-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2.5vw, 30px); font-weight: 700;
  line-height: 1.25; letter-spacing: -0.5px; margin-bottom: 10px;
}
.cta-sub { font-size: 14px; color: var(--muted); font-weight: 300; line-height: 1.6; }
.cta-btns { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; position: relative; z-index: 1; }
.btn-cta-primary {
  padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 500;
  background: var(--cyan); color: var(--navy); border: none; cursor: pointer;
  transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(255,122,26,0.25); font-family: 'DM Sans', sans-serif;
}
.btn-cta-primary:hover { background: #ff9944; box-shadow: 0 0 32px rgba(255,122,26,0.4); transform: translateY(-1px); }
.btn-cta-ghost {
  padding: 12px 24px; border-radius: 10px; font-size: 14px;
  background: transparent; color: var(--white); border: 1px solid var(--border2);
  cursor: pointer; transition: all 0.2s; text-decoration: none;
  font-family: 'DM Sans', sans-serif;
}
.btn-cta-ghost:hover { border-color: var(--border); background: rgba(255,255,255,0.04); }

/* ─── REVEAL ANIMATION ─── */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ─── RESPONSIVE ─── */
@media (max-width: 640px) {
  .products-grid { grid-template-columns: 1fr; }
  .products-grid.list-view .product-card { grid-template-columns: 90px 1fr; }
  .cta-strip { text-align: center; justify-content: center; }
  .cta-btns {
        justify-content: center;
        flex-shrink: 1;
        flex-direction: column;
        width: 100%;
  }
}

.pd-breadcrumb-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px clamp(16px,4vw,64px);
    border-bottom: 1px solid var(--border2);
    background: var(--glass);
    gap: 12px; flex-wrap: wrap;
    margin-top: 70px; /* offset fixed header */
}
.pd-breadcrumb-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pd-breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.pd-breadcrumb a { color: var(--muted); text-decoration: none; transition: color .2s; }
.pd-breadcrumb a:hover { color: var(--white2); }
.pd-bc-sep { color: var(--muted2); }
.pd-breadcrumb span:last-child { color: var(--white2); }
.pd-breadcrumb-pills { display: flex; align-items: center; gap: 8px; }
.pd-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px; font-size: 11px; letter-spacing: .3px;
}
.pd-status-pill[data-status="stock"]   { background: rgba(0,229,160,.08); border: 1px solid rgba(0,229,160,.2); color: var(--green); }
.pd-status-pill[data-status="rupture"] { background: rgba(255,107,107,.08); border: 1px solid rgba(255,107,107,.2); color: var(--red); }
.pd-status-pill[data-status="order"]   { background: rgba(232,196,106,.08); border: 1px solid rgba(232,196,106,.2); color: var(--gold); }
.pd-status-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor;
    animation: pdPulse 2s ease-in-out infinite;
}
@keyframes pdPulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.pd-badge-new {
    font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
    padding: 3px 8px; border-radius: 4px;
    background: rgba(255,122,26,.1); border: 1px solid rgba(255,122,26,.3); color: var(--cyan);
}
.pd-breadcrumb-actions { display: flex; gap: 6px; }
.pd-icon-btn {
    width: 30px; height: 30px; border-radius: 7px;
    border: 1px solid var(--border2); background: transparent; color: var(--muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.pd-icon-btn:hover { border-color: var(--border); color: var(--white2); background: var(--cyan-dim); }
.pd-icon-btn svg { width: 13px; height: 13px; }

/* ── Layout ── */
.pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 0;
    max-width: 1440px; margin: 0 auto;
    min-height: calc(100vh - 130px);
}

/* ── Gallery column ── */
.pd-gallery-col {
    padding: 28px clamp(16px,3vw,48px) 48px clamp(16px,4vw,64px);
    border-right: 1px solid var(--border2);
    position: sticky; top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto; scrollbar-width: none;
}
.pd-gallery-col::-webkit-scrollbar { display: none; }

.pd-gallery-main {
    border-radius: 16px;
    background: linear-gradient(145deg, var(--navy3, #0b1628), var(--steel2, #172540));
    border: 1px solid var(--border2);
    overflow: hidden; aspect-ratio: 4/3;
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-in; transition: border-color .3s;
    position: relative; margin-bottom: 12px;
}
.pd-gallery-main:hover { border-color: rgba(255,122,26,.22); }
.pd-gallery-glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,122,26,.06), transparent 70%);
}
.pd-gallery-canvas { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.pd-main-img {
    width: 100%; height: 100%; object-fit: contain;
    display: none; transition: opacity .3s;
}
.pd-main-img.active { display: block; }
.pd-placeholder-svg { width: 180px; height: 180px; }
.pd-zoom-badge {
    position: absolute; top: 12px; right: 12px;
    padding: 3px 9px; border-radius: 5px; font-size: 10px;
    /* background: rgba(0,0,0,.45);  */
    border: 1px solid var(--border2);
    color: var(--muted); letter-spacing: .5px;
    display: flex; align-items: center; gap: 4px;
}
.pd-zoom-badge svg { width: 10px; height: 10px; }

.pd-nav-pills { display: flex; gap: 4px; margin-bottom: 12px; }
.pd-nav-pill {
    height: 3px; flex: 1; border-radius: 2px;
    background: var(--muted2, #3d5268); cursor: pointer; transition: background .2s;
}
.pd-nav-pill.active { background: var(--cyan); }

.pd-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 16px; }
.pd-thumb {
    aspect-ratio: 1; border-radius: 9px;
    background: linear-gradient(135deg, var(--steel, #111e33), var(--steel2, #172540));
    border: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .2s; overflow: hidden;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover, .pd-thumb.active { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(255,122,26,.18); }
.pd-thumb-video { flex-direction: column; gap: 3px; background: linear-gradient(135deg,#0d1828,#1a2440); }
.pd-thumb-video span { font-size: 7px; color: var(--gold); font-family: 'DM Mono', monospace; letter-spacing: .5px; }
.pd-thumb-video svg { width: 20px; height: 20px; }

.pd-video-thumb {
    display: flex; flex-direction: column;
    border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border2);
    background: linear-gradient(135deg,#0d1828,#1a2440);
    text-decoration: none; color: inherit;
    transition: border-color .3s;
    position: relative; aspect-ratio: 16/9;
    cursor: pointer;
}
.pd-video-thumb:hover { border-color: var(--cyan); }
.pd-video-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-video-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,13,26,.35);
}
.pd-play-btn {
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,122,26,.12); border: 1px solid rgba(255,122,26,.3);
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.pd-video-thumb:hover .pd-play-btn { background: rgba(255,122,26,.22); transform: scale(1.06); }
.pd-play-btn svg { width: 16px; height: 16px; margin-left: 2px; }
.pd-video-label {
    position: absolute; bottom: 10px; left: 12px; right: 12px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: var(--muted);
}
.pd-video-chip {
    font-size: 9px; color: var(--red); letter-spacing: .5px;
    padding: 2px 6px; border-radius: 3px;
    background: rgba(255,75,106,.08); border: 1px solid rgba(255,75,106,.18);
}

/* ── Info column ── */
.pd-info-col { padding: 28px clamp(16px,3vw,48px) 80px; }

/* Product header */
.pd-header { margin-bottom: 18px; }
.pd-header-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pd-cat-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; letter-spacing: .8px; text-transform: uppercase; font-weight: 600;
    padding: 3px 10px; border-radius: 20px;
    background: rgba(255,122,26,.07); border: 1px solid rgba(255,122,26,.2); color: var(--cyan);
}
.pd-cat-badge svg { width: 10px; height: 10px; }
.pd-brand-tag { font-size: 11px; color: var(--muted); font-family: 'DM Mono', monospace; letter-spacing: .5px; }
.pd-product-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700; letter-spacing: -.6px; line-height: 1.15;
    margin-bottom: 10px; color: var(--white);
}
.pd-ref-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pd-ref-code {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted2);
    letter-spacing: .8px; text-transform: uppercase;
}
.pd-ref-code svg { width: 10px; height: 10px; }
.pd-avail-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; padding: 3px 9px; border-radius: 20px;
}
.pd-avail-pill[data-status="stock"]   { background: rgba(0,229,160,.07); border: 1px solid rgba(0,229,160,.2); color: var(--green); }
.pd-avail-pill[data-status="rupture"] { background: rgba(255,107,107,.07); border: 1px solid rgba(255,107,107,.2); color: var(--red); }
.pd-avail-pill[data-status="order"]   { background: rgba(232,196,106,.07); border: 1px solid rgba(232,196,106,.2); color: var(--gold); }
.pd-avail-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pd-warranty-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; color: var(--blue-sky); padding: 3px 8px; border-radius: 5px;
    background: rgba(0,99,229,.07); border: 1px solid rgba(62, 136, 247, 0.2);
}
.pd-warranty-tag svg { width: 10px; height: 10px; }
.pd-short-desc { font-size: 13px; color: var(--muted); line-height: 1.75; font-weight: 300; max-width: 540px; margin-bottom: 10px; }

/* Tags */
.pd-tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pd-tag {
    font-size: 10px; padding: 3px 9px; border-radius: 20px; letter-spacing: .4px;
    background: rgba(255,255,255,.04); border: 1px solid var(--border2); color: var(--muted2);
    transition: all .2s; cursor: default;
}
.pd-tag:hover { color: var(--white2); border-color: var(--border); }

/* Commercial strip */
.pd-commercial-strip {
    display: flex; flex-wrap: wrap; gap: 0;
    background: var(--navy2, #070f1c); border: 1px solid var(--border2);
    border-radius: 12px; overflow: hidden; margin-bottom: 18px;
}
.pd-comm-item {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; flex: 1; min-width: 140px;
    border-right: 1px solid var(--border2);
}
.pd-comm-item:last-child { border-right: none; }
.pd-comm-icon {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
    background: rgba(255,122,26,.07); border: 1px solid rgba(255,122,26,.15);
    display: flex; align-items: center; justify-content: center; color: var(--cyan);
}
.pd-comm-icon svg { width: 14px; height: 14px; }
.pd-comm-label { font-size: 9px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted2); margin-bottom: 2px; }
.pd-comm-val { font-size: 13px; color: var(--white2); font-weight: 500; }

/* Quick specs */
.pd-quick-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 18px; }
.pd-qs-card {
    background: var(--navy2, #070f1c); border: 1px solid var(--border2);
    border-radius: 10px; padding: 12px 14px; transition: border-color .2s;
}
.pd-qs-card:hover { border-color: var(--border); }
.pd-qs-label { font-size: 10px; color: var(--muted2); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 4px; }
.pd-qs-val { font-family: 'Syne', sans-serif; font-size: 15px; font-weight: 700; color: var(--white); line-height: 1.3; }

/* CTA block */
.pd-cta-block {
    background: var(--navy2, #070f1c); border: 1px solid var(--border2);
    border-radius: 14px; padding: 18px 20px; margin-bottom: 22px;
    display: flex; flex-direction: column; gap: 10px;
}
.pd-btn-devis {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 20px; border-radius: 10px; font-size: 14px; font-weight: 600;
    background: var(--cyan); color: var(--navy); border: none; cursor: pointer;
    text-decoration: none; transition: all .2s; font-family: 'DM Sans', sans-serif;
    box-shadow: 0 0 24px rgba(255,122,26,.2);
}
.pd-btn-devis:hover { background: #ff9944; box-shadow: 0 0 32px rgba(255,122,26,.35); transform: translateY(-1px); }
.pd-btn-devis svg { width: 15px; height: 15px; }
.pd-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pd-btn-secondary {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 14px; border-radius: 9px; font-size: 12px;
    background: transparent; color: var(--white2); border: 1px solid var(--border2);
    cursor: pointer; text-decoration: none; transition: all .2s; font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
}
.pd-btn-secondary:hover { border-color: var(--border); color: var(--white); background: rgba(255,255,255,.03); }
.pd-btn-secondary svg { width: 13px; height: 13px; flex-shrink: 0; }
.pd-cta-note {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 11px; color: var(--muted2); text-align: center; padding-top: 2px;
}
.pd-cta-note svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ── Tabs ── */
.pd-tabs { }
.pd-tabs-bar {
    display: flex; gap: 0; border-bottom: 1px solid var(--border2);
    overflow-x: auto; scrollbar-width: none;
}
.pd-tabs-bar::-webkit-scrollbar { display: none; }
.pd-tab-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 15px; font-size: 13px; color: var(--muted);
    background: transparent; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; white-space: nowrap; transition: all .2s;
    font-family: 'DM Sans', sans-serif;
}
.pd-tab-btn:hover { color: var(--white2); }
.pd-tab-btn.active { color: var(--cyan); border-bottom-color: var(--cyan); }
.pd-tab-count {
    font-size: 9px; padding: 1px 5px; border-radius: 4px;
    background: rgba(255,122,26,.1); border: 1px solid rgba(255,122,26,.2); color: var(--cyan);
}
.pd-tab-pane { display: none; padding-top: 22px; }
.pd-tab-pane.active { display: block; }

/* Description tab */
.pd-desc-body { font-size: 13px; color: var(--white2); line-height: 1.8; font-weight: 300; margin-bottom: 18px; }
.pd-desc-body p { margin-bottom: 10px; }
.pd-desc-highlight {
    background: rgba(255,122,26,.04); border-left: 3px solid var(--cyan);
    padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 16px 0;
}
.pd-highlight-label { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; font-weight: 500; }
.pd-desc-highlight p { font-size: 13px; color: var(--white2); line-height: 1.7; font-weight: 300; }
.pd-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.pd-feature-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px; border-radius: 10px;
    background: var(--navy2, #070f1c); border: 1px solid var(--border2);
    font-size: 12px; color: var(--white2); line-height: 1.5;
}
.pd-feat-icon {
    width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(from var(--feat-c) r g b / .08);
    border: 1px solid rgba(from var(--feat-c) r g b / .18);
    color: var(--feat-c);
}
.pd-feat-icon svg { width: 13px; height: 13px; }

/* Specs tab */
.pd-specs-table { width: 100%; border-collapse: collapse; }
.pd-specs-table tr { border-bottom: 1px solid var(--border2); transition: background .15s; }
.pd-specs-table tr:last-child { border-bottom: none; }
.pd-specs-table tr:hover { background: rgba(255,255,255,.02); }
.pd-specs-table td { padding: 10px 14px; font-size: 13px; }
.pd-spec-name { color: var(--muted); font-weight: 300; width: 42%; }
.pd-spec-val { color: var(--white2); font-weight: 400; }

/* Documents tab — logged in */
.pd-docs-list { display: flex; flex-direction: column; gap: 8px; }
.pd-doc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--navy2, #070f1c); border: 1px solid var(--border2);
    transition: border-color .2s;
}
.pd-doc-item:hover { border-color: var(--border); }
.pd-doc-icon {
    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.pd-doc-icon svg { width: 15px; height: 15px; }
.pd-doc-info { flex: 1; min-width: 0; }
.pd-doc-name { font-size: 13px; color: var(--white2); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-doc-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pd-doc-access-badge { width: 20px; display: flex; align-items: center; justify-content: center; }
.pd-btn-download {
    display: flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: 7px; font-size: 12px;
    background: rgba(255,122,26,.07); border: 1px solid rgba(255,122,26,.18); color: var(--cyan);
    text-decoration: none; transition: all .2s; white-space: nowrap; flex-shrink: 0;
}
.pd-btn-download:hover { background: rgba(255,122,26,.14); }
.pd-btn-download svg { width: 12px; height: 12px; }

/* Documents tab — gate (non-auth) */
.pd-access-gate {
    background: var(--navy2, #070f1c); border: 1px solid var(--border2);
    border-radius: 14px; padding: 28px 24px; text-align: center;
}
.pd-gate-icon {
    width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 16px;
    background: rgba(232,196,106,.08); border: 1px solid rgba(232,196,106,.2);
    display: flex; align-items: center; justify-content: center;
}
.pd-gate-icon svg { width: 22px; height: 22px; }
.pd-gate-title { font-family: 'Syne', sans-serif; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.pd-gate-sub { font-size: 13px; color: var(--muted); line-height: 1.65; font-weight: 300; margin-bottom: 20px; max-width: 360px; margin-left: auto; margin-right: auto; }
.pd-gate-preview { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; text-align: left; }
.pd-gate-doc-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 13px; border-radius: 9px;
    background: rgba(255,255,255,.02); border: 1px solid var(--border2);
    filter: blur(0.4px); opacity: .55; pointer-events: none;
}
.pd-gate-doc-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.pd-gate-doc-icon svg { width: 14px; height: 14px; }
.pd-gate-doc-info { flex: 1; }
.pd-gate-doc-name { font-size: 12px; color: var(--white2); }
.pd-gate-doc-meta { font-size: 10px; color: var(--muted); margin-top: 2px; }
.pd-gate-lock svg { width: 13px; height: 13px; }
.pd-gate-more { text-align: center; font-size: 11px; color: var(--muted2); padding: 6px 0; }
.pd-btn-login-gate {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px; border-radius: 10px; font-size: 14px; font-weight: 500;
    background: var(--cyan); color: var(--navy); border: none; cursor: pointer;
    text-decoration: none; transition: all .2s; box-shadow: 0 0 20px rgba(255,122,26,.2);
}
.pd-btn-login-gate:hover { background: #ff9944; }
.pd-gate-or { font-size: 11px; color: var(--muted2); margin: 10px 0; }
.pd-btn-create-acc {
    display: inline-block; padding: 9px 20px; border-radius: 9px; font-size: 13px;
    background: transparent; color: var(--white2); border: 1px solid var(--border2);
    cursor: pointer; text-decoration: none; transition: all .2s;
}
.pd-btn-create-acc:hover { border-color: var(--border); color: var(--white); }
.pd-gate-note { font-size: 11px; color: var(--muted2); margin-top: 12px; }

/* Compact gate — shown below public docs when restricted ones also exist */
.pd-gate-compact { padding: 20px 24px; }
.pd-gate-compact .pd-gate-icon { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 10px; }
.pd-gate-compact .pd-gate-title { font-size: 13px; margin-bottom: 6px; }
.pd-gate-compact .pd-gate-sub { font-size: 12px; margin-bottom: 12px; }

/* Videos tab */
.pd-videos-list { display: flex; flex-direction: column; gap: 10px; }
.pd-video-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--navy2, #070f1c); border: 1px solid var(--border2);
    text-decoration: none; color: inherit; transition: all .2s;
}
.pd-video-row:hover { border-color: rgba(255,75,106,.2); }
.pd-vr-thumb {
    width: 80px; height: 52px; border-radius: 7px;
    overflow: hidden; flex-shrink: 0; position: relative;
    background: var(--steel, #111e33);
    display: flex; align-items: center; justify-content: center;
}
.pd-vr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-vr-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.3);
}
.pd-vr-play svg { width: 16px; height: 16px; }
.pd-vr-info { flex: 1; }
.pd-vr-title { font-size: 13px; color: var(--white2); margin-bottom: 3px; }
.pd-vr-meta { font-size: 11px; color: var(--muted); }
.pd-vr-arrow { width: 13px; height: 13px; color: var(--muted); }

/* Empty state */
.pd-empty-note { color: var(--muted); font-size: 13px; }

/* ── Related products ── */
.pd-related {
    max-width: 1440px; margin: 0 auto;
    padding: 44px clamp(16px,4vw,64px) 56px;
    border-top: 1px solid var(--border2);
}
.pd-related-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; }
.pd-related-eyebrow { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan); margin-bottom: 4px; font-weight: 500; }
.pd-related-title { font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 600; }
.pd-all-link { font-size: 13px; color: var(--cyan); text-decoration: none; transition: opacity .2s; padding-bottom: 2px; }
.pd-all-link:hover { opacity: .65; }
.pd-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pd-sim-card {
    background: var(--navy2, #070f1c); border: 1px solid var(--border2);
    border-radius: 13px; overflow: hidden; text-decoration: none; color: inherit;
    transition: all .3s; display: block;
}
.pd-sim-card:hover { border-color: rgba(255,122,26,.2); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.pd-sim-img {
    height: 110px;
    background: linear-gradient(145deg, var(--steel, #111e33), var(--steel2, #172540));
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pd-sim-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-sim-img svg { width: 44px; height: 44px; }
.pd-sim-body { padding: 14px; }
.pd-sim-cat { font-size: 9px; color: var(--muted2); letter-spacing: .8px; text-transform: uppercase; margin-bottom: 4px; }
.pd-sim-title { font-family: 'Syne', sans-serif; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--white); transition: color .2s; }
.pd-sim-card:hover .pd-sim-title { color: var(--cyan); }
.pd-sim-ref { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted2); margin-bottom: 6px; }
.pd-sim-desc { font-size: 11px; color: var(--muted); line-height: 1.55; margin-bottom: 10px; }
.pd-sim-cta {
    font-size: 12px; font-weight: 500; color: var(--cyan);
    padding: 6px 0; border-top: 1px solid var(--border2);
}

/* ── Final CTA ── */
.pd-final-cta {
    margin: 0 clamp(16px,4vw,64px) 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--navy2,#070f1c) 0%, var(--steel,#111e33) 60%, var(--navy2,#070f1c) 100%);
    border: 1px solid rgba(255,122,26,.14);
    padding: 52px clamp(24px,5vw,80px);
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; flex-wrap: wrap; overflow: hidden;
}
.pd-final-glow {
    position: absolute; top: -80px; right: 80px;
    width: 300px; height: 300px; pointer-events: none;
    background: radial-gradient(circle, rgba(255,122,26,.07) 0%, transparent 70%);
}
.pd-final-left { max-width: 480px; }
.pd-final-eyebrow { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; font-weight: 500; }
.pd-final-title { font-family: 'Syne', sans-serif; font-size: clamp(18px,2vw,26px); font-weight: 700; line-height: 1.2; letter-spacing: -.4px; margin-bottom: 10px; }
.pd-final-desc { font-size: 13px; color: var(--muted); font-weight: 300; line-height: 1.7; }
.pd-final-btns { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.pd-final-btn-primary {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 500;
    background: var(--cyan); color: var(--navy); border: none; cursor: pointer;
    text-decoration: none; transition: all .2s;
    box-shadow: 0 0 22px rgba(255,122,26,.25);
}
.pd-final-btn-primary:hover { background: #ff9944; box-shadow: 0 0 32px rgba(255,122,26,.4); transform: translateY(-1px); }
.pd-final-btn-secondary {
    display: inline-block;
    padding: 12px 24px; border-radius: 10px; font-size: 14px;
    background: transparent; color: var(--white); border: 1px solid var(--border2);
    cursor: pointer; text-decoration: none; transition: all .2s;
}
.pd-final-btn-secondary:hover { border-color: var(--border); background: rgba(255,255,255,.03); }

/* ── Mobile sticky CTA ── */
.pd-mobile-cta {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
    padding: 12px 16px; gap: 8px;
    background: var(--glass); backdrop-filter: blur(16px);
    border-top: 1px solid var(--border2);
}
.pd-mobile-contact-btn {
    width: 48px; height: 48px; border-radius: 10px; flex-shrink: 0;
    border: 1px solid var(--border2); background: transparent; color: var(--muted);
    display: flex; align-items: center; justify-content: center; text-decoration: none;
    transition: all .2s;
}
.pd-mobile-contact-btn:hover { color: var(--white2); border-color: var(--border); }
.pd-mobile-contact-btn svg { width: 16px; height: 16px; }

/* ── Rich-text content (from WYSIWYG editor) ── */
.pd-desc-body, .pd-advantages-body {
    font-size: 13px; color: var(--white2); line-height: 1.8; font-weight: 300;
    margin-bottom: 16px;
}
.pd-desc-body p, .pd-advantages-body p { margin-bottom: 10px; }
.pd-desc-body ul, .pd-advantages-body ul,
.pd-desc-body ol, .pd-advantages-body ol {
    margin: 8px 0 12px 18px; display: flex; flex-direction: column; gap: 4px;
}
.pd-desc-body ul { list-style: disc; }
.pd-desc-body ol { list-style: decimal; }
.pd-advantages-body ul { list-style: none; margin-left: 0; }
.pd-advantages-body ul li {
    display: flex; align-items: flex-start; gap: 8px; padding: 6px 0;
    border-bottom: 1px solid var(--border2);
}
.pd-advantages-body ul li:last-child { border-bottom: none; }
.pd-advantages-body ul li::before {
    content: '';
    width: 16px; height: 16px; min-width: 16px; margin-top: 1px;
    border-radius: 4px;
    background: rgba(0, 99, 229, 0.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M2 7.5l4 4 7-7' stroke='%2300d4ff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat;
    border: 1px solid rgba(62, 136, 247, 0.2);
}
.pd-desc-body li, .pd-advantages-body li { font-size: 13px; color: var(--white2); }
.pd-desc-body strong, .pd-advantages-body strong { color: var(--white); font-weight: 600; }
.pd-desc-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.pd-desc-body h2, .pd-desc-body h3, .pd-desc-body h4 {
    font-family: 'Syne', sans-serif; font-weight: 600; color: var(--white);
    margin: 16px 0 8px;
}
.pd-desc-body h2 { font-size: 16px; }
.pd-desc-body h3 { font-size: 14px; }

/* ── Reveal animation ── */
.pd-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.pd-reveal.visible { opacity: 1; transform: none; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .pd-layout { grid-template-columns: 1fr; }
    .pd-gallery-col { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border2); }
    .pd-gallery-main { aspect-ratio: 16/9; }
    .pd-mobile-cta { display: flex; }
    .pd-info-col { padding-bottom: 100px; }
}
@media (max-width: 768px) {
    .pd-related-grid { grid-template-columns: 1fr 1fr; }
    .pd-quick-specs { grid-template-columns: repeat(2, 1fr); }
    .pd-feature-grid { grid-template-columns: 1fr; }
    .pd-btn-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .pd-thumbs { grid-template-columns: repeat(4, 1fr); }
    .pd-related-grid { grid-template-columns: 1fr; }
    .pd-final-cta { text-align: center; justify-content: center; }
    .pd-final-btns {
        justify-content: center;
        flex-shrink: 1;
        flex-direction: column;
        width: 100%;
    }
    .pd-final-btn-primary,
    .pd-final-btn-secondary {
        width: 100%;
        justify-content: center;
    }
    .pd-related-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ═══════════════════════════════════════════════
   REALISATIONS — PAGE LISTING
═══════════════════════════════════════════════ */

/* ── Page hero ── */
.real-hero {
    margin-top: 70px;
    padding: 64px clamp(20px,5vw,80px) 56px;
    background: linear-gradient(180deg, rgba(255,122,26,.05), transparent);
    border-bottom: 1px solid var(--border2);
    position: relative;
    overflow: hidden;
}
.real-hero::after {
    content: '';
    position: absolute;
    right: -80px; top: -80px;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,26,.06) 0%, transparent 65%);
    pointer-events: none;
}
.real-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.real-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 14px 5px 8px; border-radius: 100px;
    background: rgba(255,122,26,.07); border: 1px solid rgba(255,122,26,.2);
    font-size: .72rem; color: var(--cyan); margin-bottom: 16px;
    letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
}
.real-hero-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--cyan); animation: pulse 2s infinite;
}
.real-hero-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: 12px;
}

.real-hero-sub {
    font-size: .95rem;
    color: var(--muted);
    max-width: 520px;
    line-height: 1.7;
    font-weight: 300;
}
.real-hero-stats {
    display: flex;
    gap: 32px;
    flex-shrink: 0;
}
.real-stat {
    text-align: right;
}
.real-stat-num {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--cyan);
    line-height: 1;
}
.real-stat-label {
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 4px;
}

/* ── Filters bar ── */
.real-filters-bar {
    max-width: 1280px;
    margin: 0 auto;
    padding: 28px clamp(20px,5vw,80px) 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.real-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 340px;
}
.real-search-wrap svg {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.real-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    background: rgba(0,0,0,.3);
    border: 1px solid var(--border2);
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: .84rem;
    color: var(--white);
    outline: none;
    transition: border-color .2s;
    caret-color: var(--cyan);
}
.real-search-input:focus { border-color: rgba(255,122,26,.4); }
.real-search-input::placeholder { color: var(--muted2); }

.sector-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.sector-chip {
    padding: 6px 14px;
    border-radius: 100px;
    font-size: .75rem;
    font-weight: 500;
    border: 1px solid var(--border2);
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
    letter-spacing: .01em;
}
.sector-chip:hover {
    border-color: rgba(255,122,26,.35);
    color: var(--white);
    background: var(--cyan-dim);
}
.sector-chip.active {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--navy);
}

/* ── Grid ── */
.real-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px clamp(20px,5vw,80px) 100px;
}

/* Featured banner (first featured item) */
.real-featured-banner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 0;
    border-radius: var(--r-lg);
    border: 1px solid rgba(255,122,26,.18);
    overflow: hidden;
    margin-bottom: 48px;
    position: relative;
    background: var(--navy3);
    text-decoration: none;
    transition: border-color .3s, box-shadow .3s;
}
.real-featured-banner:hover {
    border-color: rgba(255,122,26,.35);
    box-shadow: 0 32px 80px rgba(0,0,0,.5);
}
.real-featured-img {
    position: relative;
    overflow: hidden;
    min-height: 340px;
}
.real-featured-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.real-featured-banner:hover .real-featured-img img {
    transform: scale(1.04);
}
.real-featured-img-placeholder {
    width: 100%; height: 100%; min-height: 340px;
    background: linear-gradient(135deg, var(--navy3), var(--steel));
    display: flex; align-items: center; justify-content: center;
}
.real-featured-body {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.real-featured-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 100px;
    background: rgba(232,196,106,.1); border: 1px solid rgba(232,196,106,.25);
    font-size: .7rem; color: var(--gold);
    letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
    margin-bottom: 20px; width: fit-content;
}
.real-featured-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--white);
    margin-bottom: 12px;
}
.real-featured-summary {
    font-size: .87rem;
    color: var(--muted);
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 24px;
    flex: 1;
}
.real-featured-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.real-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .77rem;
    color: var(--muted);
}
.real-meta-item svg { color: var(--cyan); flex-shrink: 0; }
.real-featured-arrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .84rem; font-weight: 500; color: var(--cyan);
    transition: gap .2s;
}
.real-featured-banner:hover .real-featured-arrow { gap: 14px; }

/* Regular grid */
.real-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.real-card {
    background: var(--navy3);
    border: 1px solid var(--border2);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: border-color .3s, transform .3s, box-shadow .3s;
    position: relative;
}
.real-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0;
    transition: opacity .3s;
}
.real-card:hover {
    border-color: rgba(255,122,26,.22);
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.real-card:hover::after { opacity: 1; }

.real-card-img {
    height: 196px;
    overflow: hidden;
    position: relative;
    background: var(--steel);
}
.real-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.real-card:hover .real-card-img img { transform: scale(1.06); }
.real-card-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--steel), var(--steel2));
    color: var(--muted2);
}
.real-card-sector {
    position: absolute;
    top: 12px; left: 12px;
    padding: 4px 10px;
    border-radius: 100px;
    background: var(--glass);
    backdrop-filter: blur(8px);
    font-size: .68rem;
    color: var(--cyan);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid rgba(255,122,26,.2);
}
.real-card-feat-badge {
    position: absolute;
    top: 12px; right: 12px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(232,196,106,.15);
    border: 1px solid rgba(232,196,106,.3);
    display: flex; align-items: center; justify-content: center;
}
.real-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.real-card-title {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
    margin-bottom: 8px;
    letter-spacing: -.01em;
}
.real-card-summary {
    font-size: .81rem;
    color: var(--muted);
    line-height: 1.65;
    font-weight: 300;
    flex: 1;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.real-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--border2);
}
.real-card-client {
    font-size: .75rem;
    color: var(--muted);
    display: flex; align-items: center; gap: 5px;
}
.real-card-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: .7rem;
    color: var(--blue-sky);
    letter-spacing: .03em;
}

/* Empty state */
.real-empty {
    grid-column: 1 / -1;
    padding: 80px 20px;
    text-align: center;
    color: var(--muted);
}
.real-empty svg { margin-bottom: 16px; opacity: .3; }
.real-empty-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--white2);
    margin-bottom: 8px;
}

/* ── Responsive ── */
@media(max-width:1024px) {
    .real-grid { grid-template-columns: repeat(2, 1fr); }
    .real-featured-banner { grid-template-columns: 1fr; }
    .real-featured-img { min-height: 240px; }
}
@media(max-width:640px) {
    .real-grid { grid-template-columns: 1fr; }
    .real-hero-stats { display: none; }
    .real-filters-bar { flex-direction: column; align-items: flex-start; }
    .real-search-wrap { max-width: 100%; }
}

/* ═══════════════════════════════════════════════
   REALISATION — PAGE DÉTAIL
═══════════════════════════════════════════════ */

/* ── Breadcrumb ── */
.real-breadcrumb {
    margin-top: 70px;
    padding: 16px clamp(20px,5vw,80px);
    border-bottom: 1px solid var(--border2);
    background: var(--glass);
}
.real-breadcrumb-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: var(--muted);
}
.real-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    transition: color .2s;
}
.real-breadcrumb a:hover { color: var(--cyan); }
.real-breadcrumb-sep {
    color: var(--muted2);
    font-size: .65rem;
}
.real-breadcrumb-current {
    color: var(--white2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* ── Cover hero ── */
.real-detail-cover {
    position: relative;
    height: clamp(260px, 42vh, 520px);
    overflow: hidden;
    background: var(--steel);
}
.real-detail-cover img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(.72);
}
.real-detail-cover-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--navy3), var(--steel2));
    display: flex; align-items: center; justify-content: center;
}
.real-detail-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-header) 0%, transparent 55%);
}
.real-detail-cover-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 40px clamp(20px,5vw,80px);
    max-width: 1280px;
    margin: 0 auto;
}
.real-detail-cover-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 14px;
}
.real-detail-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--glass);
    backdrop-filter: blur(8px);
    font-size: .72rem;
    color: var(--cyan);
    border: 1px solid rgba(255,122,26,.2);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 500;
}
.real-detail-chip.gold {
    color: var(--gold);
    border-color: rgba(232,196,106,.25);
    background: rgba(232,196,106,.08);
}
.real-detail-cover-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(24px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--white);
    text-shadow: 0 2px 24px rgba(0,0,0,.5);
    max-width: 860px;
}

/* ── Layout ── */
.real-detail-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px clamp(20px,5vw,80px) 100px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 48px;
    align-items: start;
}

/* ── Main column ── */
.real-detail-main { min-width: 0; }

/* Summary lead */
.real-detail-lead {
    font-size: 1.12rem;
    color: var(--white2);
    line-height: 1.75;
    font-weight: 300;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border2);
}

/* Tags */
.real-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 40px;
}
.real-tag {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 500;
    background: var(--cyan-dim);
    border: 1px solid var(--border);
    color: var(--cyan);
    letter-spacing: .03em;
}

/* Section blocks */
.real-detail-block {
    margin-bottom: 40px;
}
.real-detail-block-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -.01em;
}
.real-detail-block-title::before {
    content: '';
    display: block;
    width: 3px; height: 18px;
    border-radius: 2px;
    background: var(--cyan);
    flex-shrink: 0;
}
.real-detail-block-body {
    font-size: .9rem;
    color: var(--muted);
    line-height: 1.8;
    font-weight: 300;
}
.real-detail-block-body p { margin-bottom: .8em; }
.real-detail-block-body p:last-child { margin-bottom: 0; }

/* CSP vs Solution two-col */
.real-challenge-solution {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}
.real-cs-card {
    padding: 24px;
    border-radius: var(--r);
    border: 1px solid var(--border2);
    background: var(--navy2);
    position: relative;
    overflow: hidden;
}
.real-cs-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
}
.real-cs-card.challenge::before { background: linear-gradient(90deg, transparent, var(--blue-sky), transparent); }
.real-cs-card.solution::before  { background: linear-gradient(90deg, transparent, var(--blue-sky), transparent); }
.real-cs-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.real-cs-card.challenge .real-cs-icon { background: rgba(0, 99, 229, 0.07); }
.real-cs-card.solution  .real-cs-icon { background: rgba(0, 99, 229, 0.07); }
.real-cs-title {
    font-family: 'Syne', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: .01em;
}
.real-cs-card.challenge .real-cs-title { color: var(--blue-sky); }
.real-cs-card.solution  .real-cs-title { color: var(--blue-sky); }
.real-cs-body {
    font-size: .83rem;
    color: var(--muted);
    line-height: 1.75;
    font-weight: 300;
}

/* Results highlight */
.real-results-box {
    padding: 28px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, rgba(255,122,26,.05), rgba(224,92,0,.08));
    border: 1px solid rgba(255,122,26,.15);
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}
.real-results-box::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,122,26,.08), transparent 65%);
    pointer-events: none;
}
.real-results-title {
    font-family: 'Syne', sans-serif;
    font-size: .88rem;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 8px;
}
.real-results-body {
    font-size: .88rem;
    color: var(--white2);
    line-height: 1.8;
    font-weight: 300;
}
.real-results-body p { margin-bottom: .6em; }
.real-results-body p:last-child { margin-bottom: 0; }

/* Gallery */
.real-gallery {
    margin-bottom: 40px;
}
.real-gallery-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
}
.real-gallery-title::before {
    content: '';
    display: block; width: 3px; height: 18px;
    border-radius: 2px; background: var(--cyan); flex-shrink: 0;
}
.real-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.real-gallery-grid.has-many {
    grid-template-columns: repeat(4, 1fr);
}
.real-gallery-thumb {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    aspect-ratio: 4/3;
    cursor: pointer;
    background: var(--steel);
}
.real-gallery-thumb:first-child {
    grid-column: span 2;
    grid-row: span 2;
}
.real-gallery-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.real-gallery-thumb:hover img { transform: scale(1.06); }
.real-gallery-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .3s;
}
.real-gallery-thumb:hover .real-gallery-thumb-overlay { opacity: 1; }

/* Videos */
.real-videos { margin-bottom: 40px; }
.real-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.real-video-embed {
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--border2);
    background: var(--navy3);
}
.real-video-embed-title {
    padding: 10px 14px;
    font-size: .8rem;
    color: var(--muted);
    border-top: 1px solid var(--border2);
}

/* ── Sidebar ── */
.real-detail-sidebar { position: sticky; top: 90px; }

.real-info-card {
    background: var(--navy3);
    border: 1px solid var(--border2);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 20px;
}
.real-info-card-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border2);
    font-family: 'Syne', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}
.real-info-row {
    padding: 13px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid var(--border2);
    font-size: .83rem;
}
.real-info-row:last-child { border-bottom: none; }
.real-info-row-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: rgba(0, 99, 229, 0.07);
    border: 1px solid rgba(62,136,247,.2);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--blue-sky);
}
.real-info-row-label {
    font-size: .7rem;
    color: var(--muted2);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 3px;
}
.real-info-row-value {
    color: var(--white2);
    font-weight: 400;
}

/* CTA card */
.real-cta-card {
    background: linear-gradient(135deg, rgba(255,122,26,.07), rgba(224,92,0,.1));
    border: 1px solid rgba(255,122,26,.18);
    border-radius: var(--r-lg);
    padding: 24px 20px;
    text-align: center;
}
.real-cta-card-title {
    font-family: 'Syne', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.real-cta-card-sub {
    font-size: .8rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 18px;
}
.real-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    background: var(--cyan);
    color: var(--navy);
    font-family: 'DM Sans', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all .25s;
    box-shadow: 0 0 24px rgba(255,122,26,.25);
    margin-bottom: 10px;
}
.real-cta-btn:hover {
    background: #ff9944;
    box-shadow: 0 0 40px rgba(255,122,26,.4);
    transform: translateY(-1px);
}
.real-cta-btn-ghost {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 11px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--white2);
    font-size: .84rem; font-weight: 500;
    text-decoration: none;
    transition: all .2s;
}
.real-cta-btn-ghost:hover {
    border-color: var(--cyan);
    color: var(--white);
    background: var(--cyan-dim);
}

/* ── Lightbox ── */
.real-lightbox {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0,0,0,.93);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .3s;
}
.real-lightbox.open { opacity: 1; pointer-events: all; }
.real-lightbox img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--r);
    box-shadow: 0 40px 100px rgba(0,0,0,.7);
    transform: scale(.92);
    transition: transform .35s cubic-bezier(.175,.885,.32,1.275);
}
.real-lightbox.open img { transform: scale(1); }
.real-lightbox-close {
    position: fixed; top: 20px; right: 20px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    color: var(--white);
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .2s;
}
.real-lightbox-close:hover { background: rgba(255,255,255,.2); }
.real-lightbox-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s;
}
.real-lightbox-nav:hover { background: rgba(255,255,255,.18); }
.real-lightbox-prev { left: 16px; }
.real-lightbox-next { right: 16px; }

/* ── Related ── */
.real-related {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px,5vw,80px) 100px;
}
.real-related-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border2);
}
.real-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* Reuse card styles from index (duplicated for standalone use) */
.real-card {
    background: var(--navy3);
    border: 1px solid var(--border2);
    border-radius: var(--r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: border-color .3s, transform .3s, box-shadow .3s;
    position: relative;
}
.real-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0; transition: opacity .3s;
}
.real-card:hover { border-color: rgba(255,122,26,.22); transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.real-card:hover::after { opacity: 1; }
.real-card-img { height: 180px; overflow: hidden; position: relative; background: var(--steel); }
.real-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.real-card:hover .real-card-img img { transform: scale(1.06); }
.real-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--steel), var(--steel2)); color: var(--muted2); }
.real-card-sector { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 100px; background: var(--glass); backdrop-filter: blur(8px); font-size: .65rem; color: var(--cyan); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; border: 1px solid rgba(255,122,26,.2); }
.real-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.real-card-title { font-family: 'Syne', sans-serif; font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--white); margin-bottom: 8px; }
.real-card-summary { font-size: .8rem; color: var(--muted); line-height: 1.65; font-weight: 300; flex: 1; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.real-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border2); }
.real-card-client { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.real-card-date { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--muted2); letter-spacing: .03em; }

/* ── Responsive ── */
@media(max-width:1024px) {
    .real-detail-layout { grid-template-columns: 1fr; }
    .real-detail-sidebar { position: static; }
    .real-related-grid { grid-template-columns: repeat(2, 1fr); }
    .real-gallery-grid.has-many { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width:640px) {
    .real-challenge-solution { grid-template-columns: 1fr; }
    .real-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .real-gallery-thumb:first-child { grid-column: span 2; grid-row: span 1; }
    .real-related-grid { grid-template-columns: 1fr; }
}

/* ── THEME TRANSITION (smooth switch) ── */
header, footer, .product-card, .service-card, .testi-card,
.filters-panel, .modal-box, .access-card, .spec-table,
.svc-full-card, .faq-item, .doc-item, .float-pill,
.dash-card, .kpi-box, .dash-chart-wrap, .dash-row,
.spec-locked, .cert-chip, .cat-hero, .svc-hero,
.real-card, .real-info-card, .real-cs-card, .real-results-box,
.pd-qs-card, .pd-feature-item, .pd-doc-item, .pd-cta-block,
.pd-commercial-strip, .toolbar, .sector-chip, .cat-chip-link {
  transition: background .3s, border-color .3s, color .3s, box-shadow .3s;
}

/* Light mode overrides for elements using hard-coded dark bg */
:root.light .kpi-box,
:root.light .dash-chart-wrap,
:root.light .dash-row,

/* :root.light .form-input, */

:root.light .real-search-input,
:root.light .pd-comm-icon { background:rgba(0,0,0,.07); }
:root.light .spec {
  background:rgba(0,0,0,.02);
}


:root.light .sort-select,
/* :root.light .form-input, */
:root.light .real-search-input { background:rgba(0,0,0,.06); color:var(--white); }

:root.light .spec-locked::before { background:linear-gradient(180deg,transparent 60%,rgba(253,238,221,.97)); }

:root.light .toast { background:rgba(255,248,242,.97); }

:root.light .modal-overlay,
:root.light .real-lightbox { background:rgba(0,0,0,.45); }

:root.light body::before { opacity:.25; }

:root.light .services-bg {
  background:linear-gradient(180deg,transparent,rgba(240,232,222,.85),rgba(240,232,222,.85),transparent);
}

:root.light .mobile-toggle span { background:var(--text-main); }

/* ════════════════════════════════════════════════
   THEME TOKENS — ORANGE (dark/light mode)
   Place this once near the top of visitor.css if not
   already defined elsewhere.
════════════════════════════════════════════════ */

:root {
  --bg:          #08070e;
  --surface:     #121326;
  --fg:          #f0eee8;
  --muted:       #9a9088;
  --border:      rgba(255, 122, 26, 0.12);

  --accent:      #ff7a1a;
  --accent2:     #e05c00;
  --accent-rgb:  255 122 26;

  --green:       #00e5a0;
  --red:         #ff6b6b;
  --gold:        #f5a623;
}

:root.light {
  --bg:          #fff8f2;
  --surface:     #fffaf5;
  --fg:          #1c1410;
  --muted:       #8a7c6e;
  --border:      rgba(255, 122, 26, 0.18);

  --accent:      #e05c00;
  --accent2:     #c44e00;
  --accent-rgb:  224 92 0;
}


/* ════════════════════════════════════════════════
   TESTIMONIALS — append to assets/css/visitor.css
════════════════════════════════════════════════ */

/* ── Section layout ── */
#temoignages {
  padding: 96px 0;
}

.testi-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* ── Cards grid ── */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.testi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .2s, transform .25s, background .3s, color .3s;
}

.testi-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

/* Stars row */
.testi-stars {
  display: flex;
  gap: 3px;
}

.testi-stars .star {
  width: 14px;
  height: 14px;
}

/* Quote text */
.testi-quote {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--muted);
  flex: 1;
  font-style: italic;
}

/* Author row */
.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.testi-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #ffffff;
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .04em;
}

.testi-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--fg);
}

.testi-role {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 1px;
}

.testi-co {
  margin-left: auto;
  font-size: .72rem;
  color: var(--accent);
  background: rgba(var(--accent-rgb) / .08);
  border: 1px solid rgba(var(--accent-rgb) / .15);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Success banner */
.testi-success-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 229, 160, .08);
  border: 1px solid rgba(0, 229, 160, .2);
  color: var(--green);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: .875rem;
  margin-bottom: 32px;
}


/* ════════════════════════════════════════════════
   MODAL  (shared with other modals on the page)
════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(var(--accent-rgb) / .12);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px 32px;
  width: 100%;
  max-width: 520px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(12px) scale(.98);
  transition: transform .25s, opacity .25s, background .3s, color .3s;
}

.modal-overlay.open .modal-box {
  transform: translateY(0) scale(1);
}

.modal-box--lg {
  max-width: 600px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}

.modal-close:hover {
  color: var(--fg);
  background: var(--border);
}

.modal-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
}

.modal-sub {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 24px;
}


/* ════════════════════════════════════════════════
   FORM ELEMENTS (testimonial modal)
════════════════════════════════════════════════ */

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}

.form-field label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: .02em;
}

.form-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: .9rem;
  color: var(--fg);
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .3s, color .3s;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb) / .12);
}

.testi-char-count {
  text-align: right;
  font-size: .75rem;
  color: var(--muted);
  margin-top: 4px;
}

.form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 13px 24px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  transition: opacity .2s, transform .15s;
}

.form-submit:hover   { opacity: .9; }
.form-submit:active  { transform: scale(.98); }
.form-submit:disabled { opacity: .5; cursor: not-allowed; }


/* ── Star picker ── */
.star-picker {
  display: flex;
  gap: 6px;
}

.star-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--border);
  transition: color .15s, transform .1s;
  line-height: 0;
}

.star-btn svg {
  width: 28px;
  height: 28px;
}

.star-btn.on,
.star-btn:hover,
.star-btn:hover ~ .star-btn { /* overridden by JS */
  color: var(--gold);
}

.star-btn:active {
  transform: scale(.9);
}


/* ── Validation errors ── */
.testi-error-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 107, 107, .06);
  border: 1px solid rgba(255, 107, 107, .2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}

.testi-error-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  color: var(--red);
}


/* ── Mobile ── */
@media (max-width: 600px) {
  .testi-header-row { flex-direction: column; align-items: flex-start; }
  .testi-grid       { grid-template-columns: 1fr; }
  .form-row         { grid-template-columns: 1fr; }
  .modal-box        { padding: 28px 18px 24px; }
}


/* ════════════════════════════════════════════════
   CLIENT AREA — append to visitor.css
════════════════════════════════════════════════ */

/* ── Layout: sidebar + content ── */
.client-shell {
  max-width: 1180px; margin: 0 auto;
  padding: 70px clamp(16px,4vw,32px) 80px;
  display: grid; grid-template-columns: 240px 1fr; gap: 28px;
}
.client-sidebar {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px; align-self: start;
  position: sticky; top: 96px;
}
.client-sidebar-head { padding: 6px 10px 16px; border-bottom: 1px solid var(--border2); margin-bottom: 12px; }
.client-sidebar-name { font-family:'Syne',sans-serif; font-size: .95rem; font-weight: 700; color: var(--white); }
.client-sidebar-mail { font-size: .72rem; color: var(--muted); margin-top: 2px; word-break: break-all; }
.client-nav { display: flex; flex-direction: column; gap: 4px; }
.client-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  font-size: .82rem; color: var(--white2); text-decoration: none;
  border: 1px solid transparent; transition: all .2s;
}
.client-nav a svg { flex-shrink: 0; opacity: .8; }
.client-nav a:hover { background: var(--cyan-dim); color: var(--white); }
.client-nav a.active {
  background: var(--cyan-dim); border-color: var(--border);
  color: var(--cyan); font-weight: 500;
}

.client-content { min-width: 0; }
.client-header { margin-bottom: 24px; }
.client-title { font-family:'Syne',sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--white); }
.client-sub { font-size: .85rem; color: var(--muted); margin-top: 6px; }

.client-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 24px;
}
.client-card + .client-card { margin-top: 20px; }
.client-card-title {
  font-family:'Syne',sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--white); margin-bottom: 4px;
}
.client-card-sub { font-size: .78rem; color: var(--muted); margin-bottom: 18px; }

/* ── Alerts ── */
.alert { border-radius: 10px; padding: 12px 16px; font-size: .82rem; margin-bottom: 18px; border: 1px solid; }
.alert-success { background: rgba(0,229,160,.08); color: var(--blue-sky); border-color: rgba(0,229,160,.2); }
.alert-error   { background: rgba(255,90,90,.08); color: #ff8a8a; border-color: rgba(255,90,90,.2); }
.alert ul { margin: 4px 0 0 18px; padding: 0; }

/* ── Status badges (quote_requests.status) ── */
.st-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem; padding: 4px 11px; border-radius: 20px;
  font-weight: 500; letter-spacing: .02em; white-space: nowrap;
}
.st-badge::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-pending { background: rgba(232,196,106,.1); color: var(--gold); border: 1px solid rgba(232,196,106,.2); }
.st-active  { background: rgba(77,182,255,.1); color: var(--blue-sky); border: 1px solid rgba(77,182,255,.2); }
.st-ok      { background: rgba(0,229,160,.1); color: #00e5a0; border: 1px solid rgba(0,229,160,.2); }
.st-refused { background: rgba(255,90,90,.1); color: #ff8a8a; border: 1px solid rgba(255,90,90,.2); }
.st-off     { background: rgba(255,255,255,.04); color: var(--muted); border: 1px solid var(--border2); }

/* ── Quotes table ── */
.quotes-table { width: 100%; border-collapse: collapse; }
.quotes-table th {
  text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 500; padding: 0 12px 12px;
  border-bottom: 1px solid var(--border2);
}
.quotes-table td {
  padding: 14px 12px; font-size: .82rem; color: var(--white2);
  border-bottom: 1px solid var(--border2); vertical-align: middle;
}
.quotes-table tr:last-child td { border-bottom: none; }
.quotes-table .ref { color: var(--cyan); font-family:'JetBrains Mono',monospace; font-size: .75rem; }
.quotes-table .muted-cell { color: var(--muted); }

.empty-state {
  text-align: center; padding: 48px 20px; color: var(--muted);
}
.empty-state svg { margin-bottom: 14px; opacity: .5; }
.empty-state p { font-size: .85rem; }

/* ── Quote detail ── */
.quote-meta-grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 16px; margin-bottom: 4px;
}
.quote-meta-item .label { font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 5px; }
.quote-meta-item .value { font-size: .9rem; color: var(--white2); font-weight: 500; }
.quote-message-box {
  background: rgba(0,0,0,.25); border: 1px solid var(--border2);
  border-radius: 10px; padding: 16px; font-size: .85rem; color: var(--white2);
  line-height: 1.7; white-space: pre-wrap;
}
.quote-response-box {
  background: var(--cyan-dim); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; font-size: .85rem; color: var(--white2);
  line-height: 1.7; white-space: pre-wrap;
}
.quote-files-list { display: flex; flex-direction: column; gap: 8px; }
.quote-file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; background: rgba(0,0,0,.25); border: 1px solid var(--border2);
  border-radius: 9px; font-size: .8rem;
}
.quote-file-row .fname { color: var(--white2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-file-row .fsize { color: var(--muted); font-size: .7rem; flex-shrink: 0; }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--muted); text-decoration: none;
  margin-bottom: 18px; transition: color .2s;
}
.back-link:hover { color: var(--cyan); }

/* ── Responsive ── */
@media(max-width: 860px) {
  .client-shell { grid-template-columns: 1fr; }
  .client-sidebar { position: static; }
  .client-nav { flex-direction: row; overflow-x: auto; }
  .quotes-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* 1. Let the grid track actually shrink to the viewport */
.pd-gallery-col,
.pd-info-col {
    min-width: 0;
}

/* 2. Force-wrap any CMS/rich-text content, even unbreakable runs */
.pd-desc-body,
.pd-desc-highlight p,
.pd-short-desc,
.pd-advantages-body {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ============================================================
   CLIENTS CAROUSEL
   ============================================================ */

.clients-section { overflow: hidden; }

.clients-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* fade the logos out at the left/right edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation-name: clients-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* animation-duration is set inline per-page based on logo count */
}

/* pause the whole marquee while the visitor reads a tooltip */
.clients-carousel:hover .clients-track { animation-play-state: paused; }

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* exactly half, since the logo set is duplicated once */
}

.client-logo-item {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  height: 120px;
  margin: 4px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  border-radius: 12px;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}

.client-logo-item:hover {
  border-color: var(--cyan);
  background: var(--cyan-dim);
  transform: translateY(-3px);
}

.client-logo-item img {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  filter: grayscale(1) brightness(1.4) contrast(0.9);
  /* opacity: .72; */
  transition: filter .25s ease, opacity .25s ease;
}

.client-logo-item:hover img {
  filter: grayscale(0) brightness(1) contrast(1);
  opacity: 1;
}

/* Tooltip showing the company name on hover
.client-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--navy, #08070e);
  color: var(--white, #fff);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--cyan);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 5;
}

.client-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--cyan);
}

.client-logo-item:hover .client-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
} */
 .client-tooltip-float {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  background: var(--navy, #08070e);
  color: var(--white, #fff);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .01em;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--cyan);
  opacity: 0;
  white-space: nowrap;
  transition: opacity .15s ease;
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; }
  .clients-carousel { overflow-x: auto; }
}

@media (max-width: 640px) {
  .client-logo-item { width: 120px; height: 74px; margin: 0 10px; padding: 12px 16px; }
}