/* =====================================================================
   DESIGN TOKENS — toutes les valeurs graphiques vivent ici.
   Système sans dépendance externe. Thème sombre par défaut, thème clair
   via [data-theme="light"]. Repris du design de référence index.html
   (palette indigo/emerald, header sticky, navigation, animations reveal).
   ===================================================================== */
:root {
  color-scheme: dark;
  /* Couleurs de marque (palette cyan néon / noir profond — alignée sur le hero) */
  --color-brand: #00e5ff; --color-brand-strong: #00b8d4; --color-brand-ink: #06121a;
  --color-cyan: #00e5ff; --color-cyan-soft: #6df3ff; --color-orange: #ff8a3d; --color-purple: #b18cff;
  --color-white: #fff; --color-black: #060912;
  /* Texte */
  --color-text-strong: #ffffff; --color-text: #e6edf5;
  --color-text-muted: #b3becd; --color-text-subtle: #7d8a9c;
  /* Fonds */
  --color-bg: #060912; --color-bg-raised: #0b1320; --color-bg-soft: #0f1a2c; --color-bg-alt: #0d1626;
  /* Bordures & verre */
  --color-border: rgba(255,255,255,.18); --color-border-soft: rgba(255,255,255,.18);
  --color-glass: rgba(255,255,255,.04); --color-focus: #00e5ff;
  /* Typographie */
  --font-body: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-display: "Helvetica Neue", "Segoe UI Light", "Trebuchet MS", sans-serif;
  --font-mono: "Courier New", monospace;
  --text-xs: .6875rem; --text-sm: .8125rem; --text-base: 1rem; --text-lg: 1.08rem;
  --text-xl: 1.3rem; --text-2xl: 1.6rem; --text-3xl: 2.5rem;
  --text-hero: clamp(3rem, 6.4vw, 5.75rem);
  --line-tight: .96; --line-normal: 1.55;
  --letter-tight: -.065em; --letter-wide: .2em;
  /* Espacement */
  --space-0: 0; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
  /* Rayons */
  --radius-sm: .55rem; --radius-md: 1rem; --radius-lg: 1.35rem;
  --radius-xl: 1.8rem; --radius-pill: 999px;
  /* Ombres */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.18);
  --shadow-md: 0 12px 34px rgba(0,0,0,.27);
  --shadow-lg: 25px 35px 90px rgba(0,0,0,.48);
  --shadow-brand: 0 0 24px rgba(0,229,255,.35);
  /* Animations */
  --duration-fast: 150ms; --duration-base: 240ms; --duration-slow: 720ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  /* Layout */
  --max-width: 1180px; --header-height: 78px; --offer-banner-height: 42px;
}

[data-theme="light"] {
  color-scheme: light;
  --color-text-strong: #0b1320; --color-text: #1c2533;
  --color-text-muted: #475569; --color-text-subtle: #64748b;
  --color-bg: #f4f7fa; --color-bg-raised: #fff;
  --color-bg-soft: #eaf2f6; --color-bg-alt: #e2eef3;
  --color-border: rgba(15,23,42,.18);
  --color-border-soft: rgba(15,23,42,.08);
  --color-glass: rgba(255,255,255,.55);
  --shadow-lg: 25px 35px 90px rgba(33,53,39,.18);
  --shadow-brand: 0 0 24px rgba(0,163,196,.22);
}

/* RESET / BASE */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px; overflow-x: hidden;
  background: var(--color-bg); color: var(--color-text-strong);
  font: var(--text-base)/var(--line-normal) var(--font-body);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .04;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
body::after {
  content: ""; position: fixed; inset: auto -10rem -12rem auto; z-index: -1;
  width: 34rem; height: 34rem; border-radius: 50%;
  background: var(--color-cyan); opacity: .06; filter: blur(100px);
}
h1,h2,h3 { font-family: var(--font-display); line-height: var(--line-tight); letter-spacing: var(--letter-tight); }
h1,h2,h3,p { text-wrap: balance; }
a { color: inherit; }
button { font: inherit; }
img,video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* UTILITY-FIRST LAYER */
.container { width: min(var(--max-width), calc(100% - 3rem)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.flex { display:flex; } .inline-flex { display:inline-flex; } .grid { display:grid; }
.hidden { display:none; } .relative { position:relative; } .absolute { position:absolute; } .overflow-hidden { overflow:hidden; }
.items-center { align-items:center; } .items-start { align-items:flex-start; }
.justify-between { justify-content:space-between; } .justify-center { justify-content:center; }
.flex-col { flex-direction:column; } .flex-wrap { flex-wrap:wrap; }
.grow { flex-grow:1; } .shrink-0 { flex-shrink:0; }
.gap-2 { gap:var(--space-2); } .gap-3 { gap:var(--space-3); } .gap-4 { gap:var(--space-4); }
.gap-6 { gap:var(--space-6); } .gap-8 { gap:var(--space-8); } .gap-12 { gap:var(--space-12); }
.p-4 { padding:var(--space-4); } .p-6 { padding:var(--space-6); } .p-8 { padding:var(--space-8); }
.px-6 { padding-inline:var(--space-6); } .py-4 { padding-block:var(--space-4); }
.mt-4 { margin-top:var(--space-4); } .mt-6 { margin-top:var(--space-6); }
.mt-8 { margin-top:var(--space-8); } .mt-12 { margin-top:var(--space-12); }
.mb-4 { margin-bottom:var(--space-4); } .mb-6 { margin-bottom:var(--space-6); }
.text-xs { font-size:var(--text-xs); } .text-sm { font-size:var(--text-sm); } .text-lg { font-size:var(--text-lg); }
.text-muted { color:var(--color-text-muted); } .text-brand { color:var(--color-brand); }
.text-orange { color:var(--color-orange); } .uppercase { text-transform:uppercase; }
.tracking-wide { letter-spacing:var(--letter-wide); } .text-center { text-align:center; }
.rounded-sm { border-radius:var(--radius-sm); } .rounded-md { border-radius:var(--radius-md); }
.rounded-lg { border-radius:var(--radius-lg); } .rounded-xl { border-radius:var(--radius-xl); }
.rounded-pill { border-radius:var(--radius-pill); }
.border { border:1px solid var(--color-border); }
.shadow-sm { box-shadow:var(--shadow-sm); } .shadow-md { box-shadow:var(--shadow-md); } .shadow-lg { box-shadow:var(--shadow-lg); }
.transition { transition: all var(--duration-base) var(--ease); }
.transition-fast { transition: all var(--duration-fast) var(--ease); }

/* COMPONENTS — header / nav / boutons */
.offer-banner {
  position:fixed; inset:0 0 auto; z-index:30; min-height:var(--offer-banner-height);
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:8px 1rem; background:var(--color-brand); color:var(--color-brand-ink);
  font-size:var(--text-xs); font-weight:800; letter-spacing:.08em; text-align:center;
  text-transform:uppercase; box-shadow:0 5px 20px rgba(0,0,0,.12);
}
.offer-banner strong { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; }
.offer-banner span { opacity:.78; font-weight:700; letter-spacing:.04em; text-transform:none; }
.offer-banner a {
  display:inline-flex; align-items:center; min-height:25px; padding:4px 11px;
  border:1px solid color-mix(in srgb,var(--color-brand-ink) 28%,transparent);
  border-radius:var(--radius-pill); color:var(--color-brand-ink);
  text-decoration:none; letter-spacing:.05em;
  transition:background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.offer-banner a:hover { background:rgba(255,255,255,.2); transform:translateY(-1px); }

.site-header {
  position:fixed; inset:var(--offer-banner-height) 0 auto; z-index:20;
  background:color-mix(in srgb,var(--color-bg) 80%,transparent);
  border-bottom:1px solid var(--color-border-soft);
  backdrop-filter:blur(18px);
}
.site-header--gallery { /* Variante pour les pages sans bannière d'offre */
  position:fixed; inset:0 0 auto; z-index:20;
  background:color-mix(in srgb,var(--color-bg) 80%,transparent);
  border-bottom:1px solid var(--color-border-soft);
  backdrop-filter:blur(18px);
}
.nav { height:var(--header-height); }
.brand { color:var(--color-text-strong); text-decoration:none; font-weight:800; letter-spacing:-.04em; }
.brand-mark {
  position:relative; overflow:hidden; display:grid; place-items:center;
  width:36px; height:36px; transform:rotate(-6deg);
  border-radius:var(--radius-md) var(--radius-md) var(--radius-md) var(--space-1);
  background:var(--color-brand); color:var(--color-brand-ink);
  font:bold 15px/1 var(--font-mono);
}
.brand-mark img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.18; }
.brand-label { font-size:15px; line-height:1.03; }

.nav-links a { padding:var(--space-2) var(--space-3); color:var(--color-text-muted); text-decoration:none; font-size:var(--text-sm); font-weight:700; }
.nav-links a:hover { color:var(--color-brand); }
.nav-links a.is-current { color:var(--color-brand); }

.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 1.45rem; border:1px solid transparent; cursor:pointer;
  text-decoration:none; font-size:var(--text-sm); font-weight:800; border-radius:var(--radius-pill);
}
.btn-primary { background:var(--color-brand); color:var(--color-brand-ink); box-shadow:var(--shadow-brand); }
.btn-primary:hover { background:var(--color-brand-strong); transform:translateY(-2px); box-shadow:0 15px 35px rgba(16,185,129,.32); }
.btn-ghost { border-color:var(--color-border); background:var(--color-glass); color:var(--color-text-strong); }
.btn-ghost:hover { background:var(--color-bg-soft); transform:translateY(-2px); }

.nav-cta { padding:.65rem 1rem; font-size:12px; }
.menu {
  display:none; padding:5px 10px; border:1px solid var(--color-border);
  background:transparent; color:var(--color-text-strong);
  border-radius:var(--radius-sm); cursor:pointer;
}
.theme-toggle, .lang-toggle {
  border:1px solid var(--color-border); background:var(--color-bg-soft); color:var(--color-text);
  border-radius:999px; padding:8px 11px; font-size:11px; font-weight:800; letter-spacing:.08em; cursor:pointer;
}
.theme-toggle:hover, .lang-toggle:hover { background:var(--color-brand); color:var(--color-brand-ink); }

.eyebrow, .section-kicker { font-size:var(--text-xs); font-weight:850; letter-spacing:var(--letter-wide); text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:var(--space-6); color:var(--color-brand); }
.eyebrow::before { content:""; width:27px; height:1px; background:currentColor; }
.section-kicker { margin-bottom:18px; color:var(--color-orange); }

.card { padding:var(--space-8); border:1px solid var(--color-border); background:var(--color-glass); border-radius:var(--radius-md); }

/* SECTIONS — hero / problèmes / solution / témoignages / formation */
.hero {
  min-height:780px; padding:150px 0 90px;
  display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:70px;
  background-image: linear-gradient(rgba(0,10,20,0.55), rgba(0,10,20,0.75)), url('img/hero-ai-brain.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::after {
  content:""; position:absolute; top:100px; left:32%;
  width:440px; height:440px; border-radius:50%;
  background:var(--color-cyan); opacity:.1; filter:blur(110px); pointer-events:none;
}
.hero h1 { max-width:700px; font-size:var(--text-hero); }
.hero h1 em { color:var(--color-brand); font-style:normal; }
.hero-copy p { max-width:510px; margin:25px 0 34px; color:var(--color-text-muted); font-size:var(--text-lg); }
.actions { display:flex; gap:12px; flex-wrap:wrap; }
.micro { margin-top:22px; color:var(--color-text-subtle); font-size:var(--text-xs); }
.micro b { color:var(--color-text-strong); }
.avatars { display:flex; }
.avatar { width:24px; height:24px; margin-right:-7px; border:2px solid var(--color-bg); border-radius:50%; background:linear-gradient(135deg,#ffb58c,#7b88ff); }
.avatar:nth-child(2) { background:linear-gradient(135deg,#c9ff62,#33a4a7); }
.avatar:nth-child(3) { background:linear-gradient(135deg,#fe8b91,#7d54b9); }

.video-frame {
  aspect-ratio:4/5; isolation:isolate;
  background:var(--color-bg-soft); border:1px solid var(--color-border);
}
.video-frame::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(145deg,color-mix(in srgb,var(--color-brand) 20%,transparent),transparent 35%,color-mix(in srgb,var(--color-orange) 18%,transparent));
}
.video-frame video { width:100%; height:100%; object-fit:cover; opacity:.78; cursor:pointer; }
.video-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(5,8,12,.08),rgba(5,8,12,.45));
  transition:opacity var(--duration-base) var(--ease),pointer-events var(--duration-base) var(--ease),background var(--duration-base) var(--ease);
}
.video-frame.is-playing .video-overlay, .video-frame.is-playing #playBtn { opacity:0; pointer-events:none; }
.video-frame.show-controls .video-overlay { opacity:1; pointer-events:auto; }
.play {
  display:grid; place-items:center; width:82px; height:82px; padding-left:4px; border:0; cursor:pointer;
  background:var(--color-brand); color:var(--color-brand-ink);
  box-shadow:0 0 0 12px rgba(16,185,129,.18); font-size:25px; border-radius:50%;
}
.play:hover { transform:scale(1.08); }
.video-label {
  position:absolute; left:22px; bottom:20px; color:#fff;
  font-size:var(--text-xs); font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  transition:opacity var(--duration-base) var(--ease);
}
.video-frame.is-playing .video-label { opacity:0; }
.video-frame.show-controls .video-label { opacity:1; }
.video-label span { display:block; margin-top:5px; color:var(--color-brand); font-size:10px; }

.ticker {
  border-block:1px solid var(--color-border); padding:15px 0; overflow:hidden;
  color:var(--color-text-subtle); font-size:var(--text-xs);
  letter-spacing:var(--letter-wide); white-space:nowrap;
}
.ticker-track { display:inline-flex; gap:38px; animation:marquee 28s linear infinite; }
.ticker i { color:var(--color-brand); font-style:normal; }
@keyframes marquee { to { transform:translateX(-50%); } }

.section { padding:125px 0; }
.section-title { max-width:750px; font-size:clamp(2.375rem,5vw,4rem); }
.section-intro { max-width:560px; margin-top:18px; color:var(--color-text-muted); }

.problem-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; }
.pain-list { margin-top:7px; border-top:1px solid var(--color-border); }
.pain {
  display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--color-border);
  color:var(--color-text); font-size:var(--text-lg);
}
.pain strong {
  margin-top:2px; color:var(--color-orange); font:700 var(--text-sm)/1 var(--font-mono);
}

.solution {
  background:linear-gradient(120deg,var(--color-bg-alt),var(--color-bg-soft) 62%,var(--color-bg-raised));
  border-block:1px solid var(--color-border);
}
.steps, .quote-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:54px; }
.step-num { margin-bottom:50px; color:var(--color-brand); font:800 var(--text-sm)/1 var(--font-mono); }
.step h3 { margin-bottom:12px; font-size:var(--text-2xl); }
.step p, .testimonial p, .feature p { color:var(--color-text-muted); font-size:var(--text-sm); }
.step-accent { width:35px; height:3px; margin-top:25px; background:var(--color-brand); }

.difference-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:55px; }
.feature { min-height:195px; }
.feature h3 { margin:20px 0 10px; font-size:var(--text-xl); }
.feature-icon { color:var(--color-brand); font-size:24px; }

.testimonials { background:var(--color-bg-soft); }
.testimonial { display:flex; flex-direction:column; min-height:240px; }
.testimonial p { color:var(--color-text); font-size:var(--text-base); line-height:1.6; }
.person { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:28px; color:var(--color-text-muted); font-size:var(--text-xs); }
.person-dot { width:30px; height:30px; background:var(--color-cyan); border-radius:50%; }
.person-dot.two { background:var(--color-orange); }
.person-dot.three { background:var(--color-brand); }

.formation { padding-bottom:145px; }
.formation-box {
  display:flex; align-items:center; justify-content:space-between; gap:30px; padding:55px;
  border:1px solid color-mix(in srgb,var(--color-brand) 35%,transparent);
  background:radial-gradient(circle at 90% 0,color-mix(in srgb,var(--color-brand) 14%,transparent),transparent 38%),var(--color-bg-raised);
  border-radius:var(--radius-xl);
}
.formation-box h2 { max-width:650px; font-size:clamp(2.25rem,5vw,3.625rem); }
.formation-box p { max-width:510px; margin-top:17px; color:var(--color-text-muted); }

.site-footer {
  padding:32px 0; border-top:1px solid var(--color-border);
  color:var(--color-text-subtle); font-size:var(--text-xs);
}
.footer-links a { color:var(--color-text-muted); text-decoration:none; }
.footer-links a:hover { color:var(--color-brand); }

.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity var(--duration-slow) var(--ease),transform var(--duration-slow) var(--ease);
}
.reveal.is-visible { opacity:1; transform:none; }
.reveal:nth-child(2) { transition-delay:80ms; }
.reveal:nth-child(3) { transition-delay:160ms; }

/* HERO VIDEO CAROUSEL */
.video-carousel { aspect-ratio:16/10; position:relative; }
.carousel-track,.carousel-slide { position:absolute; inset:0; }
.carousel-slide { opacity:0; visibility:hidden; transition:opacity var(--duration-base) var(--ease); }
.carousel-slide.is-active { opacity:1; visibility:visible; z-index:1; }
.carousel-slide video { width:100%; height:100%; object-fit:cover; cursor:pointer; }
.video-slide-controls { position:absolute; right:18px; bottom:18px; z-index:3; display:flex; gap:8px; }
.video-slide-controls button, .carousel-arrow {
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.35);
  background:rgba(5,8,12,.62); color:#fff; cursor:pointer; backdrop-filter:blur(8px);
  transition:background var(--duration-fast) var(--ease),transform var(--duration-fast) var(--ease);
}
.video-slide-controls button { width:38px; height:38px; border-radius:50%; font-size:15px; }
.video-slide-controls button:hover, .carousel-arrow:hover { background:var(--color-brand); color:var(--color-brand-ink); transform:scale(1.06); }
.carousel-arrow { position:absolute; top:50%; z-index:4; width:38px; height:38px; border-radius:50%; font-size:28px; line-height:1; transform:translateY(-50%); }
.carousel-arrow:hover { transform:translateY(-50%) scale(1.06); }
.carousel-prev { left:16px; } .carousel-next { right:16px; }
.carousel-dots { position:absolute; left:50%; bottom:18px; z-index:4; display:flex; gap:8px; transform:translateX(-50%); }
.carousel-dot { width:9px; height:9px; padding:0; border:1px solid rgba(255,255,255,.75); border-radius:50%; background:transparent; cursor:pointer; }
.carousel-dot.is-active { background:var(--color-brand); border-color:var(--color-brand); transform:scale(1.25); }

/* =====================================================================
   GALERIE — composants spécifiques (hero, filtres, grille, lightbox).
   Réutilisent les tokens ci-dessus pour rester cohérent avec l'index.
   ===================================================================== */
.gallery-hero {
  padding:calc(var(--header-height) + var(--space-16)) 0 var(--space-12);
  border:1px solid var(--color-border);
  background:linear-gradient(145deg,color-mix(in srgb,var(--color-brand) 10%,transparent),transparent 40%,color-mix(in srgb,var(--color-cyan) 8%,transparent)),var(--color-bg-raised);
  border-radius:var(--radius-xl);
}
.gallery-hero h1 { font-size:clamp(2.3rem,6vw,4.5rem); }
.gallery-hero p { max-width:700px; margin-top:14px; color:var(--color-text-muted); font-size:var(--text-lg); }

.gallery-filters {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--space-8);
}
.filter {
  cursor:pointer; border:1px solid var(--color-border); background:var(--color-glass);
  color:var(--color-text); border-radius:var(--radius-pill);
  padding:9px 17px; font-size:var(--text-sm); font-weight:800; letter-spacing:.04em;
  transition:background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.filter:hover { border-color:var(--color-brand); color:var(--color-brand); }
.filter.is-active { background:var(--color-brand); color:var(--color-brand-ink); border-color:var(--color-brand); }
.filter span { opacity:.7; margin-left:6px; font-weight:700; }

.gallery-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  margin-top:var(--space-8);
}
.media-card {
  overflow:hidden; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-glass); cursor:pointer;
  transition:transform var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-base) var(--ease);
}
.media-card:hover {
  transform:translateY(-4px); border-color:var(--color-brand); box-shadow:var(--shadow-md);
}
.media-frame {
  position:relative; aspect-ratio:1/1; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--color-bg-soft),var(--color-bg-alt));
  overflow:hidden;
}
.media-frame::after {
  content:"PixVerse"; font-weight:800; letter-spacing:.08em;
  color:rgba(255,255,255,.18); font-size:1.05rem;
}
.media-frame img, .media-frame video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* Aperçu vidéo automatique : la balise <video> sert d'aperçu muet */
.media-frame video {
  display:block; background:#000;
}
.media-frame img { display:block; }
.media-card[data-type="photo"] .media-frame img { display:block; }
.media-card[data-type="video"] .media-frame img { display:none; }

.badge {
  position:absolute; top:9px; left:9px; z-index:2;
  padding:4px 9px; border-radius:var(--radius-pill);
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(5,8,12,.78); border:1px solid var(--color-border); color:var(--color-text-strong);
  backdrop-filter:blur(6px);
}
.media-card[data-type="video"] .badge { color:var(--color-brand); }

.caption { padding:12px 14px 14px; }
.caption strong { display:block; font-size:.92rem; }
.caption span { display:block; margin-top:4px; color:var(--color-text-muted); font-size:.78rem; }

.gallery-empty { display:none; color:var(--color-text-muted); padding:var(--space-12); text-align:center; }

/* LIGHTBOX */
.lightbox {
  position:fixed; inset:0; z-index:60; display:none; place-items:center;
  padding:22px; background:rgba(0,0,0,.88);
  animation:fade-in var(--duration-base) var(--ease);
}
.lightbox.is-open { display:grid; }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }
.lightbox-content {
  width:min(100%,980px); max-height:94vh;
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(240px,.7fr);
  gap:18px; align-items:center;
}
.lightbox-stage {
  display:grid; place-items:center; background:#000;
  border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:1/1; max-height:80vh;
}
.lightbox-stage img, .lightbox-stage video {
  max-width:100%; max-height:80vh; width:100%; height:100%;
  object-fit:contain; background:#000;
}
.lightbox-info {
  padding:22px; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-bg-raised);
}
.lightbox-info h2 { font-size:var(--text-xl); margin-bottom:10px; }
.lightbox-info p { color:var(--color-text-muted); line-height:1.6; font-size:var(--text-sm); }
.lightbox-info a {
  display:inline-block; margin-top:18px; color:var(--color-brand);
  text-decoration:none; font-weight:800; font-size:var(--text-sm);
}
.lightbox-close {
  position:fixed; top:18px; right:22px;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--color-border); background:rgba(5,8,12,.62); color:#fff;
  font-size:1.6rem; cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.lightbox-close:hover { background:var(--color-brand); color:var(--color-brand-ink); transform:scale(1.06); }

/* RESPONSIVE */
@media (max-width:820px) {
  :root { --offer-banner-height:48px; }
  .offer-banner { gap:8px; padding-inline:10px; font-size:10px; letter-spacing:.05em; }
  .offer-banner span { display:none; }
  .offer-banner a { padding:3px 8px; font-size:10px; }
  .container { width:min(calc(100% - 2.125rem),var(--max-width)); }
  .nav { height:68px; }
  .nav-links {
    display:none; position:absolute; top:68px; left:17px; right:17px;
    flex-direction:column; align-items:stretch;
    padding:15px; background:var(--color-bg-raised);
    border:1px solid var(--color-border); border-radius:var(--radius-md); box-shadow:var(--shadow-md);
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:8px; }
  .nav-cta { display:none; }
  .menu { display:block; }
  .hero { grid-template-columns:1fr; min-height:auto; gap:55px; padding-top:125px; }
  .hero::after { left:0; }
  .video-frame { width:100%; max-width:560px; margin:auto; aspect-ratio:16/10; }
  .problem-grid { grid-template-columns:1fr; gap:50px; }
  .steps, .quote-grid { grid-template-columns:1fr; }
  .step-num { margin-bottom:30px; }
  .formation-box { display:block; padding:35px 25px; }
  .formation-box .btn { margin-top:28px; }
  .section { padding:90px 0; }
  .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .lightbox-content { display:block; }
  .lightbox-stage { max-height:55vh; }
  .lightbox-info { margin-top:12px; }
}
@media (min-width:801px) and (max-width:1050px) {
  .gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:520px) {
  .hero h1 { font-size:47px; }
  .hero-copy p { font-size:15px; }
  .difference-grid { grid-template-columns:1fr; }
  .footer-inner { display:block; }
  .footer-links { margin-top:16px; flex-wrap:wrap; }
  .ticker-track { animation:none; }
  .video-frame { aspect-ratio:1/1; }
  .actions { display:block; }
  .actions .btn { width:100%; margin-bottom:9px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}