/* ============================================================
   SAMAK TECHNOLOGIE — Base (tokens, preloader, header, slider, footer)
   Identité ROUGE & NOIR — version claire & animée
   ============================================================ */
:root {
  /* Brand — red */
  --red-700: #9E1014;
  --red-600: #C8161C;
  --red-500: #E11D24;
  --red-400: #F23B41;
  --red-050: #FDECEC;
  --red-tint:#FBF1EF;

  /* Neutrals — warm, light */
  --ink:     #16151A;   /* text / near-black */
  --ink-2:   #201F25;
  --black:   #121117;   /* rare dark zones (footer) */
  --slate-600:#56555F;
  --slate-500:#74737E;
  --slate-400:#A2A1AC;
  --slate-300:#D2D1D8;
  --slate-200:#E6E4E2;
  --slate-100:#F0EEEC;
  --cream:   #F7F5F2;   /* warm soft section bg */
  --cream-2: #FBFAF8;
  --white:   #FFFFFF;

  --bg:      var(--white);
  --bg-soft: var(--cream);
  --fg:      var(--ink);
  --fg-soft: var(--slate-600);
  --line:    var(--slate-200);

  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-2xl: 40px; --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(22,21,26,.05), 0 1px 3px rgba(22,21,26,.05);
  --shadow-md: 0 12px 30px -12px rgba(22,21,26,.16), 0 3px 8px rgba(22,21,26,.05);
  --shadow-lg: 0 40px 70px -28px rgba(22,21,26,.30), 0 10px 26px -14px rgba(22,21,26,.14);
  --shadow-red: 0 16px 40px -12px rgba(200,22,28,.42);
  --shadow-glass: 0 10px 40px -12px rgba(22,21,26,.16);

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body); background: var(--bg); color: var(--fg);
  line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
::selection { background: var(--red-600); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red-600);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--red-600); border-radius: 2px; transform-origin: left; }
.eyebrow.on-dark { color: #fff; }
.eyebrow.on-dark::before { background: var(--red-500); }

h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: 800; line-height: 1.05; letter-spacing: -.022em; color: var(--ink); }
.h1 { font-size: clamp(40px, 6vw, 70px); }
.h2 { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -.028em; }
.h3 { font-size: clamp(21px, 2.3vw, 27px); letter-spacing: -.02em; }
.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--fg-soft); line-height: 1.62; text-wrap: pretty; }
.muted { color: var(--fg-soft); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .lead, .on-dark .muted { color: rgba(255,255,255,.74); }
.red { color: var(--red-600); }
.grad-text { background: linear-gradient(100deg, var(--red-600), var(--red-500) 65%, #ff6a48 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================
   BUTTONS — with shine + lift
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 16px; padding: 14px 26px; border-radius: var(--r-full);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease), background .25s, color .25s, border-color .25s;
  white-space: nowrap; position: relative; overflow: hidden; isolation: isolate;
}
.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.btn::after { /* shine sweep */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(120deg, transparent 28%, rgba(255,255,255,.45) 50%, transparent 72%);
  transform: translateX(-130%); transition: transform .7s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }
.btn-primary { background: var(--red-600); color: #fff; box-shadow: var(--shadow-red); }
.btn-primary:hover { transform: translateY(-3px); background: var(--red-500); box-shadow: 0 24px 54px -14px rgba(200,22,28,.6); }
.btn-primary:hover svg { transform: translateX(4px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost::after { display: none; }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-3px); background: var(--ink); color: #fff; }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost.on-dark:hover { border-color: #fff; background: #fff; color: var(--ink); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.btn-sm { padding: 10px 20px; font-size: 15px; }
.btn-lg { padding: 17px 32px; font-size: 17px; }

/* ============================================================
   PLACEHOLDER MEDIA + image-slot
   ============================================================ */
.ph {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  background-color: var(--slate-100);
  background-image: repeating-linear-gradient(135deg, rgba(200,22,28,.06) 0 12px, transparent 12px 24px);
  display: grid; place-items: center;
}
.ph span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; letter-spacing: .03em;
  color: var(--slate-500); background: rgba(255,255,255,.8); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--slate-200);
}
.ph.dark { background-color: #1b1a20; background-image: repeating-linear-gradient(135deg, rgba(225,29,36,.14) 0 12px, transparent 12px 24px); }
.ph.dark span { background: rgba(0,0,0,.45); color: rgba(255,255,255,.66); border-color: rgba(255,255,255,.12); }
image-slot { display: block; width: 100%; height: 100%; }

/* ============================================================
   PRELOADER + PAGE TRANSITION
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: #08090c;
  background-image: radial-gradient(120% 90% at 50% 38%, #14161d 0%, #08090c 64%);
  display: grid; place-items: center;
  transition: transform .8s var(--ease-out), opacity .5s ease .25s;
  will-change: transform;
}
.preloader.cover { transform: translateY(0); } /* used for exit */
.preloader.done { transform: translateY(-101%); }
.preloader.done.no-anim { transition: none; }
.pl-inner { display: flex; flex-direction: column; align-items: center; gap: 30px; transition: opacity .4s ease, transform .6s var(--ease-out); }
.preloader.done .pl-inner { opacity: 0; transform: translateY(-10px); }
.pl-logo {
  height: clamp(72px, 12vw, 104px); width: auto; opacity: 1;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,.55));
  animation: plLogo 1s var(--ease-out) .05s both;
  image-rendering: -webkit-optimize-contrast;
}
@keyframes plLogo { from { opacity: 0; transform: translateY(12px) scale(.94); } to { opacity: 1; transform: none; } }
.pl-bar { width: 190px; height: 2px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; position: relative; }
.pl-bar i { position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0)); border-radius: 3px; animation: plShuttle 1.15s var(--ease) infinite; }
@keyframes plShuttle { 0% { transform: translateX(-120%); } 100% { transform: translateX(310%); } }
/* exit transition overlay (separate, slides up to cover) */
.page-exit {
  position: fixed; inset: 0; z-index: 9998; background: var(--red-600);
  transform: translateY(100%); pointer-events: none;
}
.page-exit.go { animation: exitCover .55s var(--ease-out) forwards; }
@keyframes exitCover { to { transform: translateY(0); } }

/* top scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9997; background: linear-gradient(90deg, var(--red-600), var(--red-400)); transition: width .1s linear; }

/* ============================================================
   HEADER — floating capsule
   ============================================================ */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 200; padding: 16px var(--gut) 0; transition: padding .35s var(--ease); }
.site-header .bar {
  max-width: var(--maxw); margin-inline: auto; height: 66px; padding: 0 12px 0 22px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: var(--r-full); border: 1px solid transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, height .35s var(--ease);
}
/* default (over light) */
.site-header .bar {
  background: rgba(255,255,255,.7); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-color: rgba(22,21,26,.07); box-shadow: var(--shadow-glass);
}
.site-header.scrolled { padding-top: 10px; }
.site-header.scrolled .bar { height: 60px; background: rgba(255,255,255,.86); box-shadow: 0 12px 36px -14px rgba(22,21,26,.22); }
/* over dark hero (home top) */
body[data-hero-dark="true"] .site-header:not(.scrolled) .bar {
  background: rgba(20,19,24,.34); border-color: rgba(255,255,255,.14); box-shadow: none;
}

.brand-logo { display: flex; align-items: center; height: 100%; }
.brand-logo img { height: 27px; width: auto; transition: opacity .3s; }
.brand-logo .logo-l { display: none; }
body[data-hero-dark="true"] .site-header:not(.scrolled) .brand-logo .logo-d { display: none; }
body[data-hero-dark="true"] .site-header:not(.scrolled) .brand-logo .logo-l { display: block; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500;
  color: var(--slate-600); padding: 10px 15px; border-radius: var(--r-full); transition: color .2s; cursor: pointer; position: relative;
}
.nav-link::before { content:""; position:absolute; left: 15px; right: 15px; bottom: 6px; height: 2px; background: var(--red-600); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .3s var(--ease-out); }
.nav-link:hover, .nav-item:hover .nav-link { color: var(--ink); }
.nav-item:hover .nav-link::before, .nav-link.active::before { transform: scaleX(1); }
.nav-link.active { color: var(--ink); font-weight: 600; }
.nav-link .chev { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.nav-item:hover .nav-link .chev { transform: rotate(180deg); }
/* over dark */
body[data-hero-dark="true"] .site-header:not(.scrolled) .nav-link { color: rgba(255,255,255,.85); }
body[data-hero-dark="true"] .site-header:not(.scrolled) .nav-link:hover,
body[data-hero-dark="true"] .site-header:not(.scrolled) .nav-item:hover .nav-link,
body[data-hero-dark="true"] .site-header:not(.scrolled) .nav-link.active { color: #fff; }
body[data-hero-dark="true"] .site-header:not(.scrolled) .header-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.32); }
body[data-hero-dark="true"] .site-header:not(.scrolled) .header-cta .btn-ghost:hover { color: var(--ink); background: #fff; border-color: #fff; }
body[data-hero-dark="true"] .site-header:not(.scrolled) .menu-toggle span,
body[data-hero-dark="true"] .site-header:not(.scrolled) .menu-toggle span::before,
body[data-hero-dark="true"] .site-header:not(.scrolled) .menu-toggle span::after { background: #fff; }

/* dropdown */
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(10px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: 10px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .26s var(--ease-out), transform .26s var(--ease-out); z-index: 50;
}
.nav-item:hover .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown::before { content:""; position:absolute; top: -14px; left: 0; right: 0; height: 14px; }
.dropdown.mega { width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dd-link { display: flex; gap: 13px; padding: 12px 14px; border-radius: var(--r-md); transition: background .18s, transform .18s; align-items: flex-start; }
.dd-link:hover { background: var(--cream); transform: translateX(2px); }
.dd-link .ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--red-050); color: var(--red-600); transition: background .2s, color .2s, transform .2s; }
.dd-link:hover .ic { background: var(--red-600); color: #fff; transform: scale(1.06); }
.dd-link b { font-family: var(--font-head); font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.dd-link span { display: block; font-size: 12.5px; color: var(--slate-500); margin-top: 2px; line-height: 1.4; }
.dd-foot { grid-column: 1 / -1; margin-top: 4px; padding: 14px; border-radius: var(--r-md); background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dd-foot b { font-family: var(--font-head); font-size: 15px; }
.dd-foot span { font-size: 13px; color: rgba(255,255,255,.6); display: block; }

/* expanded mega menu (grouped columns) */
.dropdown.mega2 { width: 600px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; padding: 18px; }
.dd-col h6 { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); margin: 4px 10px 8px; }
.dd-col h6 .hd-ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--red-050); color: var(--red-600); }
.dd-col h6 .hd-ic svg { width: 15px; height: 15px; }
.dd-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--slate-600); transition: background .16s, color .16s, padding .18s var(--ease-out); }
.dd-item i { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-300); flex: none; transition: background .18s, transform .18s; }
.dd-item:hover { background: var(--cream); color: var(--ink); padding-left: 16px; }
.dd-item:hover i { background: var(--red-600); transform: scale(1.4); }

/* header login button */
.header-login svg { width: 16px; height: 16px; }
@media (max-width: 1200px) { .header-login span, .header-login { } }

.header-cta { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { content: ""; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; position: absolute; transition: .3s; }
.menu-toggle span { position: relative; }
.menu-toggle span::before { top: -7px; } .menu-toggle span::after { top: 7px; }

@media (max-width: 1040px) { .nav, .header-cta .btn-ghost { display: none; } .menu-toggle { display: flex; } }

/* mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 199; background: var(--cream-2); padding: 96px var(--gut) 40px; transform: translateY(-100%); transition: transform .5s var(--ease-out); visibility: hidden; overflow-y: auto; }
.mobile-menu.open { transform: none; visibility: visible; }
.mm-group { border-bottom: 1px solid var(--line); }
.mm-head { display: flex; align-items: center; justify-content: space-between; width: 100%; font-family: var(--font-head); font-weight: 700; font-size: 22px; padding: 16px 0; color: var(--ink); }
.mm-head svg { width: 20px; height: 20px; transition: transform .3s; }
.mm-group.open .mm-head svg { transform: rotate(180deg); }
.mm-sub { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease-out); }
.mm-group.open .mm-sub { max-height: 400px; }
.mm-sub a { display: block; padding: 11px 0 11px 14px; font-size: 16px; color: var(--slate-600); border-left: 2px solid var(--line); margin-bottom: 2px; }
.mm-sub a:last-child { margin-bottom: 14px; }
.mm-link { display: block; font-family: var(--font-head); font-weight: 700; font-size: 22px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.mobile-menu .btn { margin-top: 24px; width: 100%; }

/* ============================================================
   HERO SLIDER (image-driven)
   ============================================================ */
.hero-slider { position: relative; height: clamp(600px, 92vh, 860px); background: var(--ink); overflow: hidden; }
.slides { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s cubic-bezier(.4,0,.2,1); }
.slide.active { opacity: 1; visibility: visible; }
.slide-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.slide-bg .img { position: absolute; inset: 0; transform: scale(1.14) translateX(1.6%); transition: transform 8s ease; }
.slide.active .slide-bg .img { transform: scale(1.14) translateX(-1.6%); }
.slide-bg .img .ph { position: absolute; inset: 0; border-radius: 0; }
.slide-bg .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(16,15,20,.72) 0%, rgba(16,15,20,.44) 38%, rgba(16,15,20,.12) 66%, rgba(16,15,20,0) 100%), linear-gradient(to top, rgba(16,15,20,.5) 0%, rgba(16,15,20,0) 22%); }
.slide-bg .accent { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(var(--red-500), var(--red-700)); }

.slide-content { position: relative; z-index: 3; height: 100%; display: flex; align-items: center; padding: 124px 0 116px; }
.slide-inner { max-width: 820px; }
.slide .kicker { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-full); background: rgba(255,255,255,.06); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .04em; backdrop-filter: blur(6px); }
.slide .kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red-500); box-shadow: 0 0 0 4px rgba(225,29,36,.28); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ box-shadow: 0 0 0 4px rgba(225,29,36,.28);} 50%{ box-shadow: 0 0 0 7px rgba(225,29,36,0);} }
.slide h1 { color: #fff; font-size: clamp(30px, 3.9vw, 50px); margin: 18px 0 0; max-width: 20ch; text-shadow: 0 2px 22px rgba(0,0,0,.32); }
.slide h1 em { font-style: normal; color: var(--red-400); }
.slide p { color: rgba(255,255,255,.86); font-size: clamp(16px, 1.4vw, 20px); margin-top: 20px; max-width: 540px; line-height: 1.6; text-shadow: 0 1px 14px rgba(0,0,0,.3); }
.slide-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* staggered entrance — transform-only so text stays visible even if the
   animation timeline is paused (capture / inactive tab / no-JS) */
@keyframes slideRise { from { transform: translateY(26px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .slide.active .kicker { animation: slideRise .8s var(--ease-out) .12s both; }
  .slide.active h1 { animation: slideRise .8s var(--ease-out) .24s both; }
  .slide.active p { animation: slideRise .8s var(--ease-out) .36s both; }
  .slide.active .slide-ctas { animation: slideRise .8s var(--ease-out) .48s both; }
}

.slider-ui { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 5; }
.slider-ui .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.slider-dots { display: flex; gap: 10px; }
.slider-dots button { display: flex; flex-direction: column; gap: 8px; width: 96px; text-align: left; opacity: .55; transition: opacity .3s; cursor: pointer; }
.slider-dots button.active { opacity: 1; }
.slider-dots .track { height: 3px; border-radius: 3px; background: rgba(255,255,255,.28); overflow: hidden; }
.slider-dots .track i { display: block; height: 100%; width: 0; background: var(--red-500); }
.slider-dots button.active .track i { animation: progress var(--slide-dur, 6.5s) linear forwards; }
@keyframes progress { from { width: 0; } to { width: 100%; } }
.slider-dots .lbl { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.88); letter-spacing: .03em; }
.slider-arrows { display: flex; gap: 10px; }
.slider-arrows button { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.28); display: grid; place-items: center; color: #fff; transition: .25s var(--ease-out); }
.slider-arrows button:hover { background: #fff; color: var(--ink); border-color: #fff; transform: scale(1.06); }
.slider-arrows svg { width: 18px; height: 18px; }
@media (max-width: 720px){ .slider-dots button { width: 50px; } .slider-dots .lbl { display: none; } }

.slide-chip { position: absolute; right: clamp(20px, 6vw, 80px); bottom: 124px; z-index: 4; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px); border-radius: var(--r-lg); padding: 22px 26px; display: none; }
@media (min-width: 1080px){ .slide-chip { display: block; } }
.slide-chip .v { font-family: var(--font-head); font-weight: 800; font-size: 40px; color: #fff; letter-spacing: -.02em; }
.slide-chip .v .suffix { color: var(--red-400); }
.slide-chip .k { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--black); color: rgba(255,255,255,.64); padding: 80px 0 30px; }
.footer-logo img { height: 28px; }
.footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); }
@media (max-width: 860px){ .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 480px){ .footer-top { grid-template-columns: 1fr; } }
.footer-about p { margin-top: 20px; max-width: 320px; font-size: 15px; line-height: 1.7; }
.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12); display: grid; place-items: center; color: rgba(255,255,255,.7); transition: .25s var(--ease-out); }
.footer-social a:hover { background: var(--red-600); border-color: var(--red-600); color: #fff; transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h5 { font-family: var(--font-head); color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.footer-col a { display: block; padding: 7px 0; font-size: 15px; transition: color .2s, padding .2s; }
.footer-col a:hover { color: #fff; padding-left: 5px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; font-size: 14px; }
.footer-bottom .legal { display: flex; gap: 22px; flex-wrap: wrap; }

/* ============================================================
   SCROLL REVEAL — variants
   ============================================================ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal.r-left { transform: translateX(-40px); }
.reveal.r-right { transform: translateX(40px); }
.reveal.r-scale { transform: scale(.94); }
.reveal.r-clip { opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-out); }
.reveal.r-clip.in { clip-path: inset(0 0 0 0); }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; } .reveal.d5 { transition-delay: .40s; } .reveal.d6 { transition-delay: .48s; }

@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .slide { transition: none; }
  .preloader { display: none !important; }
}

/* ============================================================
   FLOATING SOCIAL BAR + FABs (WhatsApp / scroll-top)
   ============================================================ */
.float-social { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 120; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.float-social a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,.85); border: 1px solid var(--line); box-shadow: var(--shadow-sm); backdrop-filter: blur(8px); transition: transform .25s var(--ease-out), background .2s, color .2s, box-shadow .2s; }
.float-social a:hover { background: var(--red-600); color: #fff; border-color: var(--red-600); transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-red); }
.float-social a svg { width: 19px; height: 19px; }
.float-social .fs-line { width: 1.5px; height: 40px; background: var(--line); margin: 2px 0; }
.float-social .fs-label { writing-mode: vertical-rl; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-400); }
/* over the dark hero, make chips translucent-dark */
body[data-hero-dark="true"] .float-social:not(.solid) a { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; }
body[data-hero-dark="true"] .float-social:not(.solid) a:hover { background: var(--red-600); border-color: var(--red-600); }
body[data-hero-dark="true"] .float-social:not(.solid) .fs-label { color: rgba(255,255,255,.6); }
body[data-hero-dark="true"] .float-social:not(.solid) .fs-line { background: rgba(255,255,255,.25); }
@media (max-width: 1100px){ .float-social { display: none; } }

.fab { position: fixed; right: 22px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-lg); z-index: 130; transition: transform .25s var(--ease-out), opacity .35s, visibility .35s, background .2s; }
.fab svg { width: 26px; height: 26px; }
.fab-wa { bottom: 24px; background: #25D366; color: #fff; }
.fab-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37,211,102,.5); animation: waPulse 2.4s ease-out infinite; }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.45);} 70%,100% { box-shadow: 0 0 0 16px rgba(37,211,102,0);} }
.fab-wa:hover { transform: translateY(-3px) scale(1.06); }
.fab-top { bottom: 88px; background: var(--ink); color: #fff; opacity: 0; visibility: hidden; }
.fab-top svg { width: 22px; height: 22px; }
.fab-top.show { opacity: 1; visibility: visible; }
.fab-top:hover { transform: translateY(-3px); background: var(--red-600); }
@media (max-width: 560px){ .fab { right: 16px; width: 50px; height: 50px; } .fab-top { bottom: 80px; } }