/* First Klass Auto-École — White & Blue Premium System */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:14px;}
body{font-family:'Inter',system-ui,sans-serif;background:#fff;color:#0f172a;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:#f0f7ff;}
::-webkit-scrollbar-thumb{background:#0071e3;border-radius:99px;}

/* ════════ KEYFRAMES ════════ */
@keyframes shimmer-text{0%{background-position:0% center}100%{background-position:200% center}}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes float-badge{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spin-r{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 18px rgba(0,113,227,.35),0 4px 15px rgba(0,113,227,.25)}50%{box-shadow:0 0 32px rgba(0,113,227,.55),0 4px 20px rgba(0,113,227,.4)}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(0,113,227,.4)}70%{box-shadow:0 0 0 12px rgba(0,113,227,0)}100%{box-shadow:0 0 0 0 rgba(0,113,227,0)}}
@keyframes slide-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes bounce-arrow{0%,100%{transform:translateX(-50%) translateY(0);opacity:.8}50%{transform:translateX(-50%) translateY(9px);opacity:.4}}
@keyframes bg-wave{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes line-scan{0%{left:-60%}100%{left:120%}}
@keyframes count-pop{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes gold-shine{0%{background-position:0% center}100%{background-position:200% center}}
@keyframes dot-drift{0%{transform:translate(0,0)}100%{transform:translate(28px,28px)}}
@keyframes card-slide-up{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

/* ════════ NAVIGATION ════════ */
.fk-nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:60px;display:flex;align-items:center;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.fk-nav.at-top{background:transparent;}
.fk-nav.scrolled{
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 0 #e2e8f0,0 4px 24px rgba(0,0,0,.06);
  border-bottom-color:#e2e8f0;
}
.nav-link{
  position:relative;padding:7px 11px;border-radius:8px;
  font-size:.8125rem;font-weight:500;color:rgba(255,255,255,.82);
  text-decoration:none;transition:all .15s ease;white-space:nowrap;
}
.nav-link::after{
  content:'';position:absolute;bottom:3px;left:11px;right:11px;
  height:2px;border-radius:2px;background:#0071e3;
  transform:scaleX(0);transition:transform .2s ease;
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.1);}
.nav-link.active{color:#fff;font-weight:600;}
.nav-link.active::after{transform:scaleX(1);background:#60a5fa;}

.fk-nav.scrolled .nav-link{color:#64748b;}
.fk-nav.scrolled .nav-link:hover{color:#0071e3;background:#eff6ff;}
.fk-nav.scrolled .nav-link.active{color:#0071e3;}
.fk-nav.scrolled .nav-link.active::after{background:#0071e3;}
.fk-nav.scrolled .logo-name{color:#0f172a!important;}
.fk-nav.scrolled .logo-sub{color:#94a3b8!important;}
.fk-nav.scrolled .nav-phone{color:#94a3b8!important;}
.fk-nav.scrolled .nav-phone:hover{color:#0071e3!important;}
.fk-nav.scrolled .nav-ham{border-color:rgba(0,0,0,.1)!important;background:rgba(0,0,0,.03)!important;color:#334155!important;}

.btn-glow{
  background:#0071e3;color:#fff;border-radius:10px;
  box-shadow:0 2px 14px rgba(0,113,227,.35);
  animation:pulse-glow 3.5s ease-in-out infinite;
}
.btn-glow:hover{background:#005bbf;transform:translateY(-2px);}

.mobile-nav-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(1,10,30,.98);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:translateX(100%);transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.mobile-nav-overlay.open{transform:translateX(0);}
.mobile-nav-link{
  font-size:clamp(1.6rem,6vw,2.4rem);font-weight:800;letter-spacing:-.03em;
  color:rgba(255,255,255,.65);padding:12px 32px;text-decoration:none;
  transition:color .15s ease;display:block;text-align:center;
}
.mobile-nav-link:hover,.mobile-nav-link.active{color:#60a5fa;}

/* ════════ SCROLL REVEAL ════════ */
.sr{opacity:0;transform:translateY(26px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);}
.sr.in{opacity:1;transform:translateY(0);}
.sr-left{opacity:0;transform:translateX(-28px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);}
.sr-left.in{opacity:1;transform:translateX(0);}
.sr-right{opacity:0;transform:translateX(28px);transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1);}
.sr-right.in{opacity:1;transform:translateX(0);}
.sr-scale{opacity:0;transform:scale(.93);transition:opacity .5s ease,transform .5s ease;}
.sr-scale.in{opacity:1;transform:scale(1);}
.sd1{transition-delay:.05s}.sd2{transition-delay:.1s}.sd3{transition-delay:.15s}.sd4{transition-delay:.2s}
.sd5{transition-delay:.25s}.sd6{transition-delay:.3s}.sd7{transition-delay:.35s}.sd8{transition-delay:.4s}.sd9{transition-delay:.45s}

/* ════════ HERO ════════ */
.hero-dot-bg{
  position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(0,113,227,.12) 1.5px,transparent 1.5px);
  background-size:32px 32px;
  animation:dot-drift 10s linear infinite;
  mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,black 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 75% 80% at 50% 50%,black 30%,transparent 100%);
}
.hero-blob-1{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,113,227,.18) 0%,transparent 65%);top:-150px;right:-100px;animation:float-y 12s ease-in-out infinite;pointer-events:none;}
.hero-blob-2{position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.12) 0%,transparent 65%);bottom:-100px;left:-80px;animation:float-y 16s ease-in-out infinite reverse;pointer-events:none;}
.hero-ring-1{position:absolute;width:300px;height:300px;border:1.5px solid rgba(0,113,227,.12);border-radius:50%;top:10%;right:12%;animation:spin-slow 30s linear infinite;pointer-events:none;}
.hero-ring-2{position:absolute;width:160px;height:160px;border:1.5px solid rgba(201,168,76,.15);border-radius:30% 70% 60% 40%/50% 40% 60% 50%;top:22%;right:18%;animation:spin-r 18s linear infinite;pointer-events:none;}

.hero-text>*{opacity:0;animation:slide-up .68s cubic-bezier(.22,1,.36,1) forwards;}
.hero-text>*:nth-child(1){animation-delay:.1s}
.hero-text>*:nth-child(2){animation-delay:.22s}
.hero-text>*:nth-child(3){animation-delay:.34s}
.hero-text>*:nth-child(4){animation-delay:.45s}
.hero-text>*:nth-child(5){animation-delay:.54s}

.gradient-headline{
  background:linear-gradient(90deg,#0071e3,#3b82f6,#0ea5e9,#60a5fa,#0071e3);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer-text 4s linear infinite;
}
.hero-badge-float{animation:float-badge 4s ease-in-out infinite;}
.scroll-caret{position:absolute;bottom:2rem;left:50%;animation:bounce-arrow 2s ease-in-out infinite;}

/* ════════ STATS BAND ════════ */
.stats-band{
  background:#fff;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;
  position:relative;overflow:hidden;
}
.stats-band::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,113,227,.06),transparent);
  animation:line-scan 4s linear infinite;
}

/* ════════ FORMATIONS ════════ */
.fcard{
  background:#fff;border:1.5px solid #e2e8f0;border-radius:20px;overflow:hidden;
  position:relative;transition:all .28s cubic-bezier(.22,1,.36,1);
}
.fcard::before{content:'';position:absolute;inset:0;border-radius:19px;background:linear-gradient(135deg,rgba(0,113,227,.04),transparent);opacity:0;transition:opacity .28s ease;pointer-events:none;}
.fcard:hover{border-color:#93c5fd;box-shadow:0 20px 48px rgba(0,113,227,.13),0 4px 16px rgba(0,113,227,.07);transform:translateY(-8px);}
.fcard:hover::before{opacity:1;}
.fcard-cta{transform:translateY(40px);opacity:0;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .22s ease;}
.fcard:hover .fcard-cta{transform:translateY(0);opacity:1;}
.fcard.featured{border-color:#0071e3;animation:pulse-ring 2.5s ease-out infinite;}
.cat-letter{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.35rem;transition:transform .22s ease;
}
.fcard:hover .cat-letter{transform:scale(1.1) rotate(-4deg);}

/* ════════ WHY US ════════ */
.why-item{
  display:flex;align-items:flex-start;gap:14px;padding:14px 16px;
  border-radius:14px;border:1.5px solid #e8f0fe;background:#fafcff;
  transition:all .2s ease;
}
.why-item:hover{border-color:#93c5fd;background:#fff;box-shadow:0 4px 20px rgba(0,113,227,.09);transform:translateX(6px);}

/* ════════ VIDEO CARDS ════════ */
.vid-card{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;background:#0a0f1e;flex-shrink:0;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;}
.vid-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 24px 60px -12px rgba(0,113,227,.45);}
.vid-card:hover .vid-overlay{background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 40%,transparent 70%);}
.vid-card:hover .vid-play-btn{transform:scale(1.15);background:#0071e3;border-color:transparent;box-shadow:0 0 0 12px rgba(0,113,227,.2);}
.vid-thumb-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.vid-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.1) 45%,transparent 70%);transition:background .25s;}
.vid-play-btn{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;transition:all .25s ease;flex-shrink:0;}
.vid-badge{position:absolute;top:12px;left:12px;background:rgba(0,113,227,.85);backdrop-filter:blur(8px);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:20px;}
.vid-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0f1e;}
@keyframes vid-spin{to{transform:rotate(360deg)}}
.vid-spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.1);border-top-color:#0071e3;border-radius:50%;animation:vid-spin .8s linear infinite;}

/* ════════ TESTIMONIAL CARDS ════════ */
.gallery-item:hover img{transform:scale(1.04);}
.gallery-item:hover .gallery-overlay{opacity:1!important;}
.gallery-item:hover .gallery-zoom{opacity:1!important;}
.tcard{
  background:#fff;border:1.5px solid #e2e8f0;border-radius:20px;padding:22px;
  transition:all .25s ease;position:relative;overflow:hidden;
}
.tcard::before{content:'\201C';position:absolute;top:-8px;right:18px;font-size:90px;color:#eff6ff;font-family:Georgia,serif;line-height:1;pointer-events:none;}
.tcard:hover{border-color:#93c5fd;box-shadow:0 12px 36px rgba(0,113,227,.1);transform:translateY(-6px);}

/* ════════ CTA ════════ */
.cta-section{
  background:linear-gradient(135deg,#0052b4 0%,#0071e3 45%,#0284c7 100%);
  background-size:200% 200%;animation:bg-wave 8s ease infinite;
  position:relative;overflow:hidden;
}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(255,255,255,.08) 0%,transparent 55%),radial-gradient(ellipse at 80% 20%,rgba(255,255,255,.05) 0%,transparent 45%);}

/* ════════ FOOTER ════════ */
.footer-top-line{height:2px;background:linear-gradient(90deg,transparent 0%,#0071e3 30%,#C9A84C 60%,#0071e3 80%,transparent 100%);background-size:200% auto;animation:shimmer-text 5s linear infinite;}

/* ════════ TYPOGRAPHY ════════ */
.section-heading{font-size:clamp(1.7rem,3.5vw,2.5rem);font-weight:800;letter-spacing:-.03em;color:#0f172a;line-height:1.15;}
.section-heading.light{color:#fff;}
.body-base{font-size:.9375rem;line-height:1.65;color:#475569;}
.body-base.light{color:rgba(255,255,255,.72);}
.label-sm{font-size:.6875rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.section-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:99px;background:#eff6ff;border:1.5px solid #bfdbfe;color:#0071e3;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;}

/* Gold */
.gold-text{background:linear-gradient(135deg,#C9A84C,#F5D98B,#C9A84C);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gold-shine 3s linear infinite;}
.gold-line{height:2px;background:linear-gradient(90deg,transparent,#C9A84C,#F5D98B,#C9A84C,transparent);}

/* Misc */
a,button{transition:all .18s ease;}
.h-safe-bottom{height:env(safe-area-inset-bottom,0px);}
.page-spacer{height:60px;}