/* ============================================================
   Near-Job - brand.css
   Couleurs extraites du logo : Bleu #1565C0 · Vert #43A047
   Animations premium · Effets visuels senior-level
   ============================================================ */

/* ── Variables de marque ──────────────────────────────────── */
:root {
  --brand-blue:    #1565C0;
  --brand-blue-d:  #0D47A1;
  --brand-blue-xl: #1A237E;
  --brand-blue-l:  #E3F2FD;
  --brand-blue-m:  #BBDEFB;
  --brand-green:   #43A047;
  --brand-green-d: #2E7D32;
  --brand-green-xl:#1B5E20;
  --brand-green-l: #E8F5E9;
  --brand-green-m: #C8E6C9;

  --brand-gradient:    linear-gradient(135deg, #0D47A1 0%, #1565C0 45%, #43A047 100%);
  --brand-gradient-anim: linear-gradient(135deg, #0B3F9E, #1565C0, #2E7D32, #43A047);
}

/* ══════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════ */

@keyframes nj-fade-up {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nj-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nj-scale-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes nj-slide-left {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nj-slide-right {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nj-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
@keyframes nj-float-sm {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}
@keyframes nj-gradient-pan {
  0%  { background-position: 0%   50%; }
  50% { background-position: 100% 50%; }
  100%{ background-position: 0%   50%; }
}
@keyframes nj-shimmer-line {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@keyframes nj-pulse-glow {
  0%, 100% { box-shadow: 0 0 0   0 rgba(21,101,192,.3); }
  50%       { box-shadow: 0 0 24px 8px rgba(21,101,192,.15); }
}
@keyframes nj-pin-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30%       { transform: translateY(-18px) scale(1.05); }
  50%       { transform: translateY(-14px) scale(1); }
  70%       { transform: translateY(-18px) scale(1.05); }
}
@keyframes nj-rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes nj-reveal-width {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes nj-number-pop {
  0%   { opacity: 0; transform: scale(.7) translateY(10px); }
  80%  { transform: scale(1.05) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   SCROLL-TRIGGERED ANIMATIONS (IntersectionObserver)
   ══════════════════════════════════════════════════════════ */

[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity  .65s cubic-bezier(.22,.68,0,1.15),
    transform .65s cubic-bezier(.22,.68,0,1.15);
}
[data-animate="fade-up"]      { transform: translateY(40px); }
[data-animate="fade-down"]    { transform: translateY(-30px); }
[data-animate="fade-in"]      { transform: none; }
[data-animate="scale-in"]     { transform: scale(.93); }
[data-animate="slide-left"]   { transform: translateX(-36px); }
[data-animate="slide-right"]  { transform: translateX(36px); }
[data-animate].is-visible {
  opacity: 1;
  transform: translate(0) scale(1) !important;
}

/* Stagger delays */
[data-delay="50"]  { transition-delay: .05s; }
[data-delay="100"] { transition-delay: .10s; }
[data-delay="150"] { transition-delay: .15s; }
[data-delay="200"] { transition-delay: .20s; }
[data-delay="250"] { transition-delay: .25s; }
[data-delay="300"] { transition-delay: .30s; }
[data-delay="400"] { transition-delay: .40s; }
[data-delay="500"] { transition-delay: .50s; }
[data-delay="600"] { transition-delay: .60s; }
[data-delay="700"] { transition-delay: .70s; }

/* ══════════════════════════════════════════════════════════
   PAGE D'ACCUEIL - HERO COULEURS LOGO
   ══════════════════════════════════════════════════════════ */

.home-hero {
  background: linear-gradient(145deg,
    #0B3F9E  0%,
    #1565C0 40%,
    #2E7D32 80%,
    #43A047 100%
  );
  background-size: 300% 300%;
  animation: nj-gradient-pan 10s ease infinite;
  min-height: 94vh;
  position: relative;
  overflow: hidden;
}

/* Logo watermark centré */
.home-hero::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 560px; height: 560px;
  background: url('/assets/images/nearjob-logo.png') center / contain no-repeat;
  opacity: .06;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 0;
}

/* Orbes décoratifs */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 55% at 80% 60%, rgba(67,160,71,.22), transparent),
    radial-gradient(ellipse 40% 45% at 15% 25%, rgba(255,255,255,.07), transparent),
    radial-gradient(ellipse 30% 30% at 50% 90%, rgba(13,71,161,.3), transparent);
  pointer-events: none;
  z-index: 0;
}
.home-hero > .container { position: relative; z-index: 1; }

/* Titre animé au chargement */
.home-hero-label   { animation: nj-fade-up .7s cubic-bezier(.22,.68,0,1.15) .1s both; }
.home-hero-title   { animation: nj-fade-up .9s cubic-bezier(.22,.68,0,1.15) .2s both; }
.home-hero-lead    { animation: nj-fade-up .8s ease .35s both; }
.home-hero-actions { animation: nj-fade-up .8s ease .45s both; }
.home-hero-trust   { animation: nj-fade-in .8s ease .6s both; }
.home-hero-visual  { animation: nj-slide-right .9s cubic-bezier(.22,.68,0,1.15) .3s both; }

/* Carte hero flottante */
.home-hero-card {
  border-top: 3px solid var(--brand-blue);
  animation: nj-float 5.5s ease-in-out 1s infinite;
}
.home-hero-float-1 { animation: nj-float-sm 4s ease-in-out .8s infinite; }
.home-hero-float-2 { animation: nj-float-sm 4.8s ease-in-out 1.6s infinite; }

/* Icône étoiles dans la carte */
.hhc-stars i { transition: color .2s; }
.home-hero-card:hover .hhc-stars i { color: var(--brand-blue); }

/* Underline animé sur le titre */
.home-hero-title em,
.sf-hero-title em {
  font-style: normal;
  position: relative;
  display: inline-block;
}
.home-hero-title em::after,
.sf-hero-title em::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(67,160,71,.8));
  animation: nj-reveal-width 1s cubic-bezier(.22,.68,0,1.15) 1s both;
  width: 0;
}

/* Bouton blanc (hero CTA) */
.btn-white {
  background: #fff;
  color: var(--brand-blue);
  font-weight: 700;
  transition: background .2s, color .2s, box-shadow .2s, transform .1s;
}
.btn-white:hover {
  background: var(--brand-blue-l);
  color: var(--brand-blue-d);
  box-shadow: 0 6px 24px rgba(21,101,192,.25);
  transform: translateY(-2px);
}

/* Bouton outline blanc */
.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
  font-weight: 700;
  transition: background .2s, border-color .2s, transform .1s;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.18);
  border-color: #fff;
  transform: translateY(-2px);
}

/* ── Section chiffres ─────────────────────────────────────── */
.home-numbers {
  background: linear-gradient(90deg, #0D47A1, #1565C0 35%, #2E7D32 75%, #43A047);
  background-size: 200% 100%;
  animation: nj-gradient-pan 8s ease infinite;
}
.home-number-value {
  background: linear-gradient(135deg, #fff 40%, #C8E6C9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── "Pour qui" cards ─────────────────────────────────────── */
.pour-qui-client {
  border-color: var(--brand-blue);
  background: linear-gradient(145deg, #EBF4FF 0%, #fff 60%);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pour-qui-client:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(21,101,192,.15); }
.pour-qui-client .pq-icon  { background: var(--brand-blue-m); color: var(--brand-blue); }
.pour-qui-client .pq-list i{ color: var(--brand-blue); }
.pour-qui-client > a { background: var(--brand-blue); border: none; }
.pour-qui-client > a:hover { background: var(--brand-blue-d); }

.pour-qui-provider {
  border-color: var(--brand-green);
  background: linear-gradient(145deg, #EDF7EE 0%, #fff 60%);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pour-qui-provider:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(67,160,71,.15); }
.pour-qui-provider .pq-icon  { background: var(--brand-green-m); color: var(--brand-green); }
.pour-qui-provider .pq-list i{ color: var(--brand-green); }
.pour-qui-provider > a { color: var(--brand-green); border-color: var(--brand-green); }
.pour-qui-provider > a:hover { background: var(--brand-green-l); }

/* ── Mission ──────────────────────────────────────────────── */
.mission-pill  { background: var(--brand-blue-l); color: var(--brand-blue); }
.mv-icon       { background: var(--brand-blue-m);  color: var(--brand-blue); }
.mv-icon-gold  { background: var(--brand-green-m); color: var(--brand-green); }
.mv-icon-blue  { background: var(--brand-blue-l);  color: var(--brand-blue-d); }
.mv-icon-green { background: var(--brand-green-l); color: var(--brand-green-d); }

/* ── Steps homepage ───────────────────────────────────────── */
.sf-step-badge { background: linear-gradient(135deg, var(--brand-blue), var(--brand-green)); }
.sf-step-icon  { color: var(--brand-blue); }
.home-step-num { background: linear-gradient(135deg, var(--brand-blue), var(--brand-green)); }

/* ── CTA prestataires ─────────────────────────────────────── */
.home-provider-cta {
  background: linear-gradient(135deg, #06224A, #0D47A1 50%, #1B5E20);
  background-size: 200% 200%;
  animation: nj-gradient-pan 12s ease infinite;
}

/* ── About CTA ────────────────────────────────────────────── */
.about-cta {
  background: linear-gradient(135deg, #0D47A1 0%, #1565C0 50%, #43A047 100%);
}

/* ── Final CTA accueil ────────────────────────────────────── */
.home-final-cta {
  background: linear-gradient(135deg, #06224A 0%, #0D47A1 40%, #1B5E20 80%, #2E7D32 100%);
  background-size: 200% 200%;
  animation: nj-gradient-pan 12s ease infinite;
}
.hfcta-block h3 { color: #fff; }
.hfcta-block p  { color: rgba(255,255,255,.75); }
.hfcta-client   .btn-white:hover { color: var(--brand-blue); }
.hfcta-provider .btn-outline-white:hover { background: rgba(255,255,255,.18); }

/* ══════════════════════════════════════════════════════════
   /TROUVER - SEARCH FIRST HERO
   ══════════════════════════════════════════════════════════ */

.sf-hero {
  background: linear-gradient(150deg,
    #0B3F9E  0%,
    #1565C0 45%,
    #2E7D32 80%,
    #43A047 100%
  );
  background-size: 300% 300%;
  animation: nj-gradient-pan 10s ease infinite;
}
.sf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 50% 80%, rgba(67,160,71,.2), transparent),
    radial-gradient(ellipse 35% 40% at 80% 20%, rgba(255,255,255,.06), transparent);
  pointer-events: none;
}
.sf-hero > .container { position: relative; z-index: 1; }

/* Animations hero /trouver */
.sf-hero-label  { animation: nj-fade-up  .7s ease .1s both; }
.sf-hero-title  { animation: nj-fade-up  .85s cubic-bezier(.22,.68,0,1.15) .2s both; }
.sf-hero-sub    { animation: nj-fade-up  .8s ease .35s both; }
.sf-search-wrap { animation: nj-scale-in .85s cubic-bezier(.22,.68,0,1.15) .45s both; }
.sf-popular     { animation: nj-fade-in  .7s ease .6s both; }

/* Search bar focus glow */
.sf-search-form { transition: box-shadow .3s ease; }
.sf-search-form:focus-within {
  box-shadow: 0 0 0 4px rgba(21,101,192,.25), 0 10px 48px rgba(0,0,0,.2);
}

/* Bouton recherche - gradient animé logo */
.sf-search-btn {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position .45s ease, box-shadow .25s, transform .1s;
}
.sf-search-btn:hover {
  background-position: 100% 50%;
  box-shadow: 0 4px 20px rgba(67,160,71,.35);
  transform: none;
}

/* Chip effect shimmer au hover */
.sf-chip {
  position: relative;
  overflow: hidden;
  transition: background .2s, transform .15s, border-color .2s;
}
.sf-chip::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
}
.sf-chip:hover { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.7); transform: translateY(-1px); }
.sf-chip:hover::after { left: 140%; }

/* Section intentions - animations + hover logo colors */
.sf-intents { animation: nj-fade-up .6s ease .1s both; }
.sf-intent-card {
  transition: transform .25s cubic-bezier(.22,.68,0,1.15), box-shadow .25s, border-color .25s;
}
.sf-intent-card:hover { transform: translateY(-5px); }

.sf-intent-premium .sf-intent-icon { background: var(--brand-blue-m); color: var(--brand-blue); }
.sf-intent-premium:hover { border-color: var(--brand-blue); box-shadow: 0 6px 24px rgba(21,101,192,.18); }

.sf-intent-top .sf-intent-icon { background: var(--brand-green-m); color: var(--brand-green); }
.sf-intent-top:hover { border-color: var(--brand-green); box-shadow: 0 6px 24px rgba(67,160,71,.18); }

.sf-intent-new .sf-intent-icon { background: var(--brand-blue-l); color: var(--brand-blue-d); }
.sf-intent-new:hover { border-color: var(--brand-blue-d); box-shadow: 0 6px 24px rgba(13,71,161,.15); }

.sf-intent-local .sf-intent-icon { background: var(--brand-green-l); color: var(--brand-green-d); }
.sf-intent-local:hover { border-color: var(--brand-green-d); box-shadow: 0 6px 24px rgba(46,125,50,.15); }

/* Domain cards */
.sf-domain-card {
  transition: transform .22s cubic-bezier(.22,.68,0,1.15), box-shadow .22s, border-color .22s;
}
.sf-domain-card:hover { transform: translateY(-5px); border-color: var(--brand-blue); box-shadow: 0 6px 20px rgba(21,101,192,.14); }
.sf-domain-icon { background: var(--brand-blue-l); color: var(--brand-blue); transition: background .25s, color .25s; }
.sf-domain-card:hover .sf-domain-icon { background: linear-gradient(135deg, var(--brand-blue), var(--brand-green)); color: #fff; }

/* Stats section /trouver */
.home-stats-section {
  background: linear-gradient(90deg, #0D47A1, #1565C0 35%, #2E7D32 75%, #43A047);
  background-size: 200% 100%;
  animation: nj-gradient-pan 8s ease infinite;
}

/* Provider CTA /trouver */
.home-provider-cta { /* déjà déclaré plus haut */ }

/* ══════════════════════════════════════════════════════════
   PROVIDER CARDS - hover premium
   ══════════════════════════════════════════════════════════ */
.pcard {
  transition: transform .25s cubic-bezier(.22,.68,0,1.15), box-shadow .25s, border-color .25s;
}
.pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(21,101,192,.12);
  border-color: var(--brand-blue-m);
}
.pcard-featured:hover { border-color: var(--brand-green); }

/* Bouton "Contacter" gradient */
.pcard-btn-contact {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
  border: none;
  color: #fff;
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position .4s ease, box-shadow .2s, transform .1s !important;
}
.pcard-btn-contact:hover {
  background-position: 100% 50%;
  box-shadow: 0 4px 16px rgba(21,101,192,.3);
  transform: none;
}

/* Dot vérification */
.pcard-dot-identity { background: var(--brand-blue); }
.pcard-dot-activity { background: var(--brand-green); }
.pcard-dot-premium  { background: #F9A825; }

/* Shimmer sur badge vérification */
.badge-identity { background: var(--brand-blue-l); color: var(--brand-blue); }
.badge-activity { background: var(--brand-green-l); color: var(--brand-green-d); }

/* ══════════════════════════════════════════════════════════
   AUTH PAGES - LOGO EN BACKGROUND
   ══════════════════════════════════════════════════════════ */

.auth-split-left {
  background: linear-gradient(160deg,
    #0B3F9E  0%,
    #1565C0 45%,
    #266629 75%,
    #43A047 100%
  ) !important;
  position: relative;
  overflow: hidden;
}

/* Logo watermark centré - grand et discret */
.auth-split-left .auth-logo-bg {
  position: absolute;
  width: 380px;
  height: 380px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url('/assets/images/nearjob-logo.png') center/contain no-repeat;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
  filter: grayscale(1) brightness(10);
}

/* Orbes décoratifs */
.auth-split-left .auth-orb-1 {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(67,160,71,.18) 0%, transparent 70%);
  bottom: -180px; right: -150px;
  pointer-events: none; z-index: 0;
}
.auth-split-left .auth-orb-2 {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  top: -100px; left: -80px;
  pointer-events: none; z-index: 0;
}

/* Le contenu du panneau gauche passe au-dessus */
.auth-split-left > * { position: relative; z-index: 1; }

/* Logo image (remplace le texte) */
.auth-split-logo-img {
  width: 160px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: .92;
  transition: opacity .2s, transform .2s;
}
.auth-split-logo-img:hover { opacity: 1; transform: scale(1.03); }

/* Stats panel */
.auth-split-stats {
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
}
.auth-split-stat strong { font-size: 1.5rem !important; }

/* Bénéfices */
.asb-icon {
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  transition: background .2s, transform .2s;
}
.auth-split-benefits li:hover .asb-icon { background: rgba(255,255,255,.28) !important; transform: scale(1.1); }

/* Logo watermark dans la carte formulaire */
.auth-split-form-wrap {
  background-image:
    linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.97)),
    url('/assets/images/nearjob-logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto, 240px auto;
}

/* ── Desktop (≥ 900px) : carte flottante sur le panneau droit ── */
@media (min-width: 900px) {
  /* Layout 45/55 - plus de place pour le formulaire */
  .auth-split-page {
    grid-template-columns: 44% 56%;
    min-height: calc(100vh - var(--header-h));
  }
  .auth-split-right {
    min-height: calc(100vh - var(--header-h));
    background: #f0f4f8;
    padding: 3rem 3.5rem;
  }
  /* La carte formulaire flotte sur le panel droit */
  .auth-split-form-wrap {
    background-image:
      linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1)),
      url('/assets/images/nearjob-logo.png');
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 40px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);
    padding: 2.75rem 2.5rem;
    max-width: 460px !important;
    border: 1px solid rgba(0,0,0,.06);
  }
  .auth-split-form-wide {
    max-width: 540px !important;
  }
  /* Le divider "Nouveau sur Near-Job ?" doit avoir fond blanc = form-wrap */
  .auth-split-divider span {
    background: #fff;
  }
  /* Le legal text s'adapte */
  .auth-split-legal {
    color: #94a3b8;
  }
}

/* Bouton primaire - gradient logo */
.auth-split-right .btn-primary,
.auth-split-right button[type="submit"].btn-primary {
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-green) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  border: none;
  transition: background-position .45s ease, box-shadow .25s, transform .1s;
}
.auth-split-right .btn-primary:hover,
.auth-split-right button[type="submit"].btn-primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 4px 20px rgba(21,101,192,.3);
}

/* Focus ring couleur logo */
.auth-split-right .form-control:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(21,101,192,.12);
}

/* ══════════════════════════════════════════════════════════
   HEADER - Logo image
   ══════════════════════════════════════════════════════════ */
.logo-img {
  height: 36px;
  width: auto;
  display: block;
  transition: opacity .2s, transform .2s;
}
.logo:hover .logo-img { opacity: .85; transform: scale(1.04); }

/* ══════════════════════════════════════════════════════════
   GLOBAL HOVER IMPROVEMENTS
   ══════════════════════════════════════════════════════════ */

/* Liens primaires */
.btn-primary {
  transition: background .2s, box-shadow .2s, transform .12s !important;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active { transform: scale(.98); }

/* Outline button */
.btn-outline {
  transition: background .2s, color .2s, border-color .2s, transform .12s !important;
}
.btn-outline:hover { transform: translateY(-1px); }

/* Nav links */
.site-nav a {
  position: relative;
  transition: color .2s !important;
}
.site-nav a::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0; right: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
  border-radius: 99px;
  transition: right .25s cubic-bezier(.22,.68,0,1.15);
}
.site-nav a:hover::after, .site-nav a.active::after { right: 0; }

/* Section cards hover */
.value-card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; }
.value-card:hover { border-color: var(--brand-blue-m) !important; }

/* Testimonials */
.testimonial-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(21,101,192,.10);
  border-color: var(--brand-blue-m);
}

/* Steps hover */
.home-step, .sf-step, .how-step {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-step:hover, .sf-step:hover, .how-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(21,101,192,.12);
  border-color: var(--brand-blue-m);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .auth-split-left .auth-logo-bg { width: 280px; height: 280px; opacity: .06; }
}