/* ============================================================
   MOUNTOU BEN-RICHE | FBE TECHNOLOGIES
   Stack : HTML5 Sémantique + CSS3 Pur (Zero Framework)
   Auteur du design : LOUTALADIO DANICK ARCEL
   ============================================================ */

/* === GOOGLE FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

/* ─────────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────────── */
:root {
  /* Palette */
  --c-bg:        #030712;
  --c-surface:   #0a0f1e;
  --c-card:      rgba(255,255,255,.028);
  --c-card-h:    rgba(255,255,255,.045);
  --c-gold:      #FCD116;
  --c-gold-glow: rgba(252,209,22,.07);
  --c-gold-rim:  rgba(252,209,22,.22);
  --c-blue:      #0052cc;
  --c-blue-b:    #2d7dff;
  --c-blue-dim:  rgba(45,125,255,.12);
  --c-w:         #ffffff;
  --c-p:         #e8ecf0;
  --c-s:         #8892a4;
  --c-m:         #4a5568;
  --c-border:    rgba(255,255,255,.065);
  --c-border-g:  rgba(252,209,22,.2);
  --c-border-b:  rgba(45,125,255,.2);

  /* Espacement fluide */
  --sec-pad:  clamp(4.5rem, 9vw, 9rem);
  --con-px:   clamp(1.25rem, 5vw, 4.5rem);

  /* Ease */
  --ease: cubic-bezier(0.16,1,0.3,1);
  --t:    all 0.4s var(--ease);
  --tf:   all 0.22s var(--ease);

  /* Radii */
  --r-sm:   0.5rem;
  --r-md:   0.875rem;
  --r-lg:   1.25rem;
  --r-xl:   1.75rem;
  --r-full: 9999px;

  /* Type scale — 100% clamp, zéro rupture */
  --t-2xs: clamp(.65rem,  .55rem + .25vw, .72rem);
  --t-xs:  clamp(.72rem,  .62rem + .33vw, .82rem);
  --t-sm:  clamp(.82rem,  .72rem + .45vw, .95rem);
  --t-base:clamp(.92rem,  .82rem + .52vw, 1.08rem);
  --t-lg:  clamp(1.05rem, .92rem + .65vw, 1.28rem);
  --t-xl:  clamp(1.2rem,  1rem  + .9vw,  1.55rem);
  --t-2xl: clamp(1.45rem, 1.1rem + 1.6vw, 2.15rem);
  --t-3xl: clamp(1.85rem, 1.3rem + 2.4vw, 3rem);
  --t-4xl: clamp(2.4rem,  1.6rem + 3.5vw, 4.2rem);
  --t-5xl: clamp(2.9rem,  2rem  + 4.5vw, 5.5rem);
}

/* ─────────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--c-bg);
  color: var(--c-p);
  font-size: var(--t-base);
  line-height: 1.72;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }
ul  { list-style:none; }

/* Scrollbar */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--c-bg); }
::-webkit-scrollbar-thumb { background:var(--c-gold); border-radius:var(--r-full); }

/* ─────────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────────── */
.container {
  width:100%;
  max-width:76rem;
  margin-inline:auto;
  padding-inline: var(--con-px);
}

/* ─────────────────────────────────────────────────
   ATMOSPHERIC BACKGROUND GLOWS (fixed, passe-partout)
───────────────────────────────────────────────── */
.bg-atmo {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.bg-atmo::before {
  content:'';
  position:absolute;
  top:-10%; left:-5%;
  width:65vw; height:65vw;
  background:radial-gradient(ellipse at 40% 35%,
    rgba(0,82,204,.14) 0%,
    rgba(0,82,204,.04) 45%,
    transparent 70%);
  filter:blur(90px);
  border-radius:50%;
}
.bg-atmo::after {
  content:'';
  position:absolute;
  bottom:-5%; right:-10%;
  width:55vw; height:55vw;
  background:radial-gradient(ellipse at 60% 65%,
    rgba(252,209,22,.07) 0%,
    rgba(252,209,22,.02) 40%,
    transparent 68%);
  filter:blur(110px);
  border-radius:50%;
}

/* Troisième orb central */
.bg-atmo-3 {
  position:fixed;
  top:55%; left:50%;
  transform:translate(-50%,-50%);
  width:40vw; height:40vw;
  background:radial-gradient(ellipse at center,
    rgba(0,82,204,.06) 0%,
    transparent 65%);
  filter:blur(80px);
  pointer-events:none;
  z-index:0;
  border-radius:50%;
}

/* ─────────────────────────────────────────────────
   HEADER & NAVIGATION
───────────────────────────────────────────────── */
.header {
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  padding-block: clamp(.75rem,1.5vw,1.25rem);
  transition: var(--t);
}
.header.scrolled {
  background: rgba(3,7,18,.88);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--c-border);
}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.nav__logo {
  display:flex; align-items:baseline; gap:.35rem;
  font-weight:800; letter-spacing:-.025em; flex-shrink:0;
}
.nav__logo-fbe {
  font-size: var(--t-xl);
  color: var(--c-w);
}
.nav__logo-dot { color: var(--c-gold); }
.nav__logo-sub {
  font-size: var(--t-xs);
  font-weight:500;
  color: var(--c-m);
  letter-spacing:.06em;
}
.nav__links {
  display:flex; align-items:center;
  gap: clamp(1rem,2.5vw,2.5rem);
}
.nav__links a {
  font-size: var(--t-sm); font-weight:500;
  color: var(--c-s);
  transition: var(--tf);
  position:relative;
}
.nav__links a::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:1px;
  background: var(--c-gold);
  transition: width .3s var(--ease);
}
.nav__links a:hover { color: var(--c-w); }
.nav__links a:hover::after { width:100%; }
.nav__right {
  display:flex; align-items:center; gap:.65rem; flex-shrink:0;
}

/* ─────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:inherit; font-weight:600; font-size: var(--t-sm);
  letter-spacing:.01em; cursor:pointer; border:none;
  transition: var(--t); text-decoration:none; white-space:nowrap;
  line-height:1;
}
.btn--primary {
  background: var(--c-gold); color:#000;
  padding: .62rem 1.35rem; border-radius: var(--r-full);
  box-shadow: 0 0 22px rgba(252,209,22,.22),
              inset 0 1px 0 rgba(255,255,255,.3);
}
.btn--primary:hover {
  transform:translateY(-2px);
  box-shadow: 0 0 38px rgba(252,209,22,.38),
              inset 0 1px 0 rgba(255,255,255,.3);
}
.btn--primary.btn--lg { padding:.88rem 1.85rem; font-size: var(--t-base); }
.btn--ghost {
  background:transparent; color: var(--c-s);
  padding: .62rem 1.35rem; border-radius: var(--r-full);
  border:1px solid var(--c-border);
}
.btn--ghost:hover {
  color: var(--c-w); border-color:rgba(255,255,255,.18);
  transform:translateY(-2px); background: var(--c-card);
}
.btn--ghost.btn--lg { padding:.88rem 1.85rem; font-size: var(--t-base); }
.btn--blue {
  background: var(--c-blue); color:#fff;
  padding: .62rem 1.35rem; border-radius: var(--r-full);
  box-shadow: 0 0 22px rgba(0,82,204,.3);
}
.btn--blue:hover {
  transform:translateY(-2px); background: var(--c-blue-b);
  box-shadow: 0 0 38px rgba(45,125,255,.42);
}

/* ─────────────────────────────────────────────────
   LABELS / EYEBROWS
───────────────────────────────────────────────── */
.eyebrow {
  display:inline-flex; align-items:center; gap:.45rem;
  font-size: var(--t-2xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding: .28rem .8rem;
  border:1px solid var(--c-border-g);
  border-radius: var(--r-full);
  background: var(--c-gold);
  color:#000;
 

}
.eyebrow--blue {
  color: var(--c-blue-b);
  border-color: var(--c-border-b);
  background: var(--c-blue-dim);
}

/* ─────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────── */
.hero {
  position:relative; z-index:1;
  
  display:flex; align-items:center;
  padding-top:   clamp(5.5rem,10vw,8.5rem);
  padding-bottom: clamp(3rem,6vw,5rem);
  overflow:hidden;
}
/* Orb héro droit (bleu profond) */
.hero::before {
  content:'';
  position:absolute; top:5%; right:0;
  width:55vw; height:55vw; max-width:750px; max-height:750px;
  background:radial-gradient(ellipse at 65% 35%,
    rgba(0,82,204,.18) 0%,
    rgba(0,82,204,.05) 45%,
    transparent 68%);
  filter:blur(85px); border-radius:50%;
  pointer-events:none;
}
/* Orb héro bas-droite (or) */
.hero::after {
  content:'';
  position:absolute; bottom:8%; right:20%;
  width:32vw; height:32vw; max-width:420px; max-height:420px;
  background:radial-gradient(ellipse at center,
    rgba(252,209,22,.09) 0%, transparent 65%);
  filter:blur(65px); border-radius:50%;
  pointer-events:none;
}
.hero__inner {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap: clamp(2rem,5vw,6rem);
}

.hero__eyebrow { margin-bottom: clamp(.9rem,2.2vw,1.75rem); }

.hero__name {
  font-size: var(--t-5xl);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.0;
  color: var(--c-w);
  margin-bottom:.12em;
}
.hero__name--gold {
  background: linear-gradient(135deg, #fcd116 0%, #ffe566 48%, #fcd116 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero__role {
  font-size: var(--t-lg); font-weight:400;
  color: var(--c-s);
  margin-top:.65rem; margin-bottom: clamp(1rem,2.5vw,1.7rem);
  letter-spacing:.01em;
}
.hero__divider {
  width:2rem; height:2px;
  background:linear-gradient(90deg,var(--c-gold),transparent);
  margin-bottom: clamp(1rem,2.5vw,1.7rem);
}
.hero__desc {
  font-size: var(--t-base); color: var(--c-s);
  max-width:47ch; line-height:1.78;
  margin-bottom: clamp(1.5rem,4vw,2.5rem);
}
.hero__cta {
  display:flex; flex-wrap:wrap;
  gap:.75rem; align-items:center;
}

/* Portrait */
.hero__visual { position:relative; flex-shrink:0; }
.hero__portrait-wrap {
  position:relative;
  width: clamp(230px,27vw,370px);
}
/* Gradient ring */
.hero__portrait-wrap::before {
  content:'';
  position:absolute; inset:-2px;
  border-radius: var(--r-xl);
  background:linear-gradient(145deg,
    rgba(0,82,204,.35) 85%,
    transparent 100%);
  z-index:-1; filter:blur(1px);
}
/* Halo atmosphérique */
.hero__portrait-wrap::after {
  content:'';
  position:absolute; inset:-22px;
  border-radius: var(--r-xl);
  background:radial-gradient(ellipse at 50% 50%,
    rgba(252,209,22,.13) 0%, transparent 60%);
  z-index:-2; filter:blur(22px);
}
.hero__portrait {
  width:100%; border-radius: var(--r-xl);
  object-fit:cover; aspect-ratio:3/4;
  display:block;
  border:1px solid rgba(252,209,22,.14);
}

/* Badge flottant */
.hero__badge {
  position:absolute;
  bottom:7%; left:-12%;
  display:flex; align-items:center; gap:.4rem;
  background:rgba(3,7,18,.92);
  color: var(--c-gold);
  font-size: var(--t-2xs); font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding: .5rem .95rem;
  border-radius: var(--r-full);
  backdrop-filter:blur(18px);
  box-shadow: 0 0 22px rgba(252,209,22,.1);
  animation: float 3.2s ease-in-out infinite;
  white-space:nowrap;
}
.badge-pulse {
  width:6px; height:6px;
  border-radius:50%;
  background: var(--c-gold);
  box-shadow: 0 0 8px var(--c-gold);
  animation: pdot 2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes float {
  0%,100%{ transform:translateY(0);}
  50%    { transform:translateY(-7px);}
}
@keyframes pdot {
  0%,100%{ opacity:1; box-shadow:0 0 8px var(--c-gold);}
  50%    { opacity:.55; box-shadow:0 0 3px var(--c-gold);}
}

/* ─────────────────────────────────────────────────
   STATS STRIP
───────────────────────────────────────────────── */
.stats {
  position:relative; z-index:1;
  padding-block: clamp(1.8rem,3.5vw,2.8rem);
  border-top:1px solid var(--c-border);
  border-bottom:1px solid var(--c-border);
  background:linear-gradient(90deg,
    transparent, rgba(0,82,204,.04), transparent);
}
.stats__flex {
  display:flex; align-items:center;
  justify-content:center; flex-wrap:wrap;
}
.stats__item {
  flex:1; min-width:clamp(110px,22vw,190px);
  display:flex; flex-direction:column;
  align-items:center; gap:.22rem;
  padding:clamp(.9rem,1.8vw,1.4rem) clamp(1rem,2vw,2rem);
}
.stats__item:not(:last-child){ border-right:1px solid var(--c-border); }
.stats__num {
  font-size: var(--t-4xl); font-weight:800;
  letter-spacing:-.04em; color: var(--c-w); line-height:1;
}
.stats__sup { color: var(--c-gold); font-size:.6em; vertical-align:super; }
.stats__lbl {
  font-size: var(--t-2xs); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color: var(--c-m);
}

/* ─────────────────────────────────────────────────
   ABOUT
───────────────────────────────────────────────── */
.about {
  padding-block: var(--sec-pad);
  position:relative; z-index:1;
}
.about__inner {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:start;
  gap: clamp(3rem,6vw,7rem);
}
.section-eyebrow { margin-bottom: clamp(.9rem,2vw,1.5rem); }
.section-h {
  font-size: var(--t-4xl); font-weight:800;
  letter-spacing:-.035em; line-height:1.08;
  color: var(--c-w);
  margin-bottom: clamp(.6rem,1.5vw,1rem);
}
.section-sub {
  font-size: var(--t-base); color: var(--c-s);
  max-width:52ch; line-height:1.72;
}
.about__tags {
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-top:1.5rem;
}
.tag {
  font-size: var(--t-2xs); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding: .28rem .7rem;
  border-radius: var(--r-full);
  border:1px solid var(--c-border);
  color: var(--c-s); background: var(--c-card);
  transition: var(--tf);
}
.tag:hover {
  border-color: var(--c-gold-rim);
  color: var(--c-gold); background: var(--c-gold-glow);
}
.about__right {
  display:flex; flex-direction:column; gap:1.35rem;
}
.about__quote {
  padding:1.2rem 1.5rem;
  border-left:2px solid;
  background: var(--c-card); border-radius:0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-base); font-style:italic;
  color: var(--c-s); line-height:1.72;
}
.about__sw-label {
  font-size: var(--t-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--c-m); margin-bottom:.6rem;
}
.sw-grid {
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.sw-badge {
  font-size: var(--t-2xs); font-weight:700;
  letter-spacing:.04em;
  padding: .3rem .65rem;
  border-radius: var(--r-sm);
  background: var(--c-card); border:1px solid var(--c-border);
  color: var(--c-s); transition: var(--tf);
}
.sw-badge:hover {
  border-color: var(--c-border-b);
  color: var(--c-blue-b); background: var(--c-blue-dim);
}

/* ─────────────────────────────────────────────────
   ECOSYSTEM (Les 2 Entreprises)
───────────────────────────────────────────────── */
.ecosystem {
  padding-block: var(--sec-pad);
  position:relative; z-index:1;
}
.ecosystem::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--c-border),transparent);
}
.ecosystem__head { margin-bottom: clamp(2.5rem,5vw,4rem); }
.ecosystem__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  gap: clamp(1rem,2.5vw,1.5rem);
}

/* Eco Card */
.eco-card {
  background: var(--c-card);
  border:1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem,3.5vw,2.5rem);
  transition: var(--t);
  position:relative; overflow:hidden;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
/* Metallic border shimmer on hover */
.eco-card::before {
  content:'';
  position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,
    transparent 25%,
    rgba(255,255,255,.07) 50%,
    transparent 75%);
  mask-composite:exclude;
  opacity:0; transition:opacity .4s ease;
}
.eco-card:hover::before { opacity:1; }
.eco-card:hover {
  transform:translateY(-5px);
  border-color:rgba(255,255,255,.12);
  background: var(--c-card-h);
}

/* Orb interne par carte */
.eco-card__orb {
  position:absolute; top:-40%; right:-15%;
  width:200px; height:200px;
  border-radius:50%; filter:blur(50px);
  pointer-events:none; opacity:.7;
  transition:opacity .4s ease;
}
.eco-card:hover .eco-card__orb { opacity:1.3; }
.eco-card--tech .eco-card__orb {
  background:radial-gradient(ellipse,rgba(0,82,204,.2) 0%,transparent 70%);
}
.eco-card--travel .eco-card__orb {
  background:radial-gradient(ellipse,rgba(252,209,22,.14) 0%,transparent 70%);
}

.eco-card__logo-wrap {
  width: clamp(58px,9vw,76px); height: clamp(58px,9vw,76px);
  border-radius: var(--r-md); overflow:hidden;
  border:1px solid var(--c-border);
  margin-bottom:1.2rem; background: var(--c-surface);
  flex-shrink:0;
}
.eco-card__logo { width:100%; height:100%; object-fit:cover; }
.eco-card__title {
  font-size: var(--t-2xl); font-weight:800;
  letter-spacing:-.025em; color: var(--c-w); margin-bottom:.25rem;
}
.eco-card__tagline {
  font-size: var(--t-xs); font-weight:500;
  color: var(--c-m); margin-bottom:1.1rem;
  letter-spacing:.03em;
}
.eco-card__desc {
  font-size: var(--t-sm); color: var(--c-s);
  line-height:1.72; margin-bottom:1.4rem;
}
.eco-card__services {
  display:grid; grid-template-columns:1fr 1fr;
  gap:.35rem; margin-bottom:1.4rem;
}
.eco-svc {
  display:flex; align-items:flex-start; gap:.38rem;
  font-size: var(--t-xs); color: var(--c-s);
  padding:.38rem; border-radius: var(--r-sm);
  transition: var(--tf);
}
.eco-svc:hover { color: var(--c-p); background:rgba(255,255,255,.03); }
.eco-svc__dot {
  width:5px; height:5px; border-radius:50%;
  margin-top:.42rem; flex-shrink:0;
}
.eco-card--tech  .eco-svc__dot { background: var(--c-blue-b); }
.eco-card--travel .eco-svc__dot { background: var(--c-gold); }

.eco-card__hr { height:1px; background: var(--c-border); margin-block:1.2rem; }

.eco-card__contacts { display:flex; flex-direction:column; gap:.35rem; margin-bottom:1.2rem; }
.cline {
  display:flex; align-items:center; gap:.45rem;
  font-size: var(--t-xs); color: var(--c-m);
}
.cline__ic {
  font-size:.9em; flex-shrink:0;
}
.eco-card--tech  .cline__ic { color: var(--c-blue-b); }
.eco-card--travel .cline__ic { color: var(--c-gold); }

.eco-card__footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.eco-socials { display:flex; gap:.4rem; }
.eco-soc-a {
  width:2rem; height:2rem;
  border-radius: var(--r-full);
  border:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  color: var(--c-m); transition: var(--tf);
}
.eco-soc-a svg { width:13px; height:13px; }
.eco-card--tech  .eco-soc-a:hover { border-color: var(--c-border-b); color: var(--c-blue-b); background: var(--c-blue-dim); }
.eco-card--travel .eco-soc-a:hover { border-color: var(--c-gold-rim); color: var(--c-gold); background: var(--c-gold-glow); }


/* ─────────────────────────────────────────────────
   BOOKS
───────────────────────────────────────────────── */
.books {
  padding-block: var(--sec-pad);
  position:relative; z-index:1;
}
.books::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--c-border),transparent);
}
.books__head { margin-bottom: clamp(2.5rem,5vw,4rem); text-align:center; }
.books__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap: clamp(1.25rem,3vw,1.75rem);
}
.book-card {
  display:flex; align-items:flex-start;
  gap: clamp(1.2rem,3vw,1.8rem);
  background: var(--c-card);
  border:1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(1.25rem,3vw,2rem);
  transition: var(--t);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:relative; overflow:hidden;
}
/* Ligne dorée haut au survol */
.book-card::after {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--c-gold),transparent);
  opacity:0; transition:opacity .4s ease;
}
.book-card:hover::after { opacity:1; }
.book-card:hover {
  transform:translateY(-5px);
  border-color:rgba(252,209,22,.12);
  background: var(--c-card-h);
}
.book-cover {
  flex-shrink:0;
  width: clamp(88px,14vw,125px);
  border-radius: var(--r-md); overflow:hidden;
  box-shadow:
    0 4px 22px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.05),
    5px 0 14px rgba(252,209,22,.08);
  transition: var(--t);
}
.book-card:hover .book-cover {
  box-shadow:
    0 8px 32px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.08),
    5px 0 22px rgba(252,209,22,.17);
  transform:rotate(-1.5deg) scale(1.03);
}
.book-cover img { width:100%; display:block; }
.book-info { flex:1; min-width:0; }
.book-cat {
  font-size: var(--t-2xs); font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color: var(--c-gold); margin-bottom:.45rem;
}
.book-title {
  font-size: var(--t-xl); font-weight:800;
  letter-spacing:-.025em; color: var(--c-w);
  line-height:1.18; margin-bottom:.3rem;
}
.book-sub {
  font-size: var(--t-sm); font-style:italic;
  color: var(--c-m); margin-bottom:.7rem; line-height:1.42;
}
.book-desc {
  font-size: var(--t-sm); color: var(--c-s);
  line-height:1.68; margin-bottom:1rem;
}
.book-meta {
  display:flex; align-items:center;
  gap:.6rem; flex-wrap:wrap; margin-bottom:1rem;
}
.book-pill {
  font-size: var(--t-2xs); padding:.22rem .6rem;
  border-radius: var(--r-full);
  border:1px solid var(--c-border);
  color: var(--c-m); background: var(--c-card);
}
/* ─────────────────────────────────────────────────
   FORMATIONS (Bento Grid)
───────────────────────────────────────────────── */
.formations {
  padding-block: var(--sec-pad);
  position:relative; z-index:1;
}
.formations::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--c-border),transparent);
}
.formations__head { margin-bottom: clamp(2.5rem,5vw,4rem); }
.formations__sub {
  font-size: var(--t-base); color: var(--c-s);
  max-width:52ch; margin-top:.7rem; line-height:1.72;
}

/* Bento */
.bento {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows: auto;
  gap: clamp(.75rem,1.5vw,1rem);
}

.f-card {
  background: var(--c-card);
  border:1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: clamp(1.2rem,2.5vw,1.75rem);
  transition: var(--t);
  position:relative; overflow:hidden;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.f-card:hover {
  transform:translateY(-3px);
  border-color: var(--c-border-b);
  background: var(--c-card-h);
}
.f-card:hover .f-ic { transform:scale(1.1); color: var(--c-blue-b); }

/* Bento column spans */
.span-8  { grid-column:span 8; }
.span-4  { grid-column:span 4; }
.span-6  { grid-column:span 6; }
.span-5  { grid-column:span 5; }
.span-7  { grid-column:span 7; }
.span-12 { grid-column:span 12; }

.f-ic {
  font-size: clamp(1.4rem,2.2vw,2rem);
  margin-bottom:.7rem; display:block;
  transition: var(--t); color: var(--c-m);
}
.f-tag {
  font-size: var(--t-2xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color: var(--c-blue-b); margin-bottom:.38rem;
}
.f-title {
  font-size: var(--t-xl); font-weight:800;
  letter-spacing:-.025em; color: var(--c-w);
  margin-bottom:.45rem; line-height:1.2;
}
.f-desc {
  font-size: var(--t-sm); color: var(--c-s);
  line-height:1.65; margin-bottom:.9rem;
}
.f-pts { display:flex; flex-direction:column; gap:.3rem; margin-bottom:.9rem; }
.f-pt {
  display:flex; align-items:baseline; gap:.4rem;
  font-size: var(--t-xs); color: var(--c-s);
}
.f-pt__d {
  width:4px; height:4px; border-radius:50%;
  background: var(--c-blue-b); flex-shrink:0; margin-top:.38rem;
}

/* CTA bento card */
.f-card--cta {
  background:linear-gradient(135deg,
    rgba(0,82,204,.16) 0%,
    rgba(252,209,22,.06) 100%);
  border-color: var(--c-border-b);
  display:flex; flex-direction:column;
  justify-content:center;
}
.f-card--cta .cta-h {
  font-size: var(--t-2xl); font-weight:800;
  letter-spacing:-.03em; color: var(--c-w);
  margin-bottom:.45rem; line-height:1.15;
}
.f-card--cta .cta-d {
  font-size: var(--t-base); color: whitesmoke;
  margin-bottom:1.4rem; max-width:42ch; line-height:1.65;
}
.f-card--cta .cta-btns { display:flex; gap:.7rem; flex-wrap:wrap; }

/* ─────────────────────────────────────────────────
   CONTACT / FOOTER
───────────────────────────────────────────────── */
.footer {
  padding-block: clamp(3.5rem,6vw,5.5rem) clamp(1.8rem,3.5vw,2.8rem);
  border-top:1px solid var(--c-border);
  position:relative; z-index:1;
}
.footer__inner {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap: clamp(2rem,5vw,4rem);
  margin-bottom: clamp(2.5rem,5vw,3.5rem);
}
.footer__brand-name {
  font-size: var(--t-xl); font-weight:800;
  letter-spacing:-.02em; color: var(--c-w); margin-bottom:.45rem;
}
.footer__brand-name span { color: var(--c-gold); }
.footer__brand-desc {
  font-size: var(--t-sm); color: var(--c-m);
  line-height:1.65; max-width:33ch; margin-bottom:1.2rem;
}
.footer__socials { display:flex; gap:.4rem; }
.fsoc {
  width:2.1rem; height:2.1rem;
  border-radius: var(--r-full);
  border:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  color: var(--c-m); transition: var(--tf);
}
.fsoc svg { width:13px; height:13px; }
.fsoc:hover {
  border-color: var(--c-gold-rim);
  color: var(--c-gold); background: var(--c-gold-glow);
}
.footer__col-h {
  font-size: var(--t-2xs); font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color: var(--c-m); margin-bottom:.95rem;
}
.footer__links { display:flex; flex-direction:column; gap:.5rem; }
.footer__lnk {
  font-size: var(--t-sm); color: var(--c-s); transition: var(--tf);
}
.footer__lnk:hover { color: var(--c-w); }
.footer__bottom {
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:1rem;
  padding-top:1.5rem; border-top:1px solid var(--c-border);
}
.footer__copy {
  font-size: var(--t-xs); color: var(--c-m);
}
.footer__copy span { color: var(--c-gold); }

/* ─────────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
.au   { animation: fadeUp .75s var(--ease) both; }
.d1   { animation-delay:.08s; }
.d2   { animation-delay:.16s; }
.d3   { animation-delay:.24s; }
.d4   { animation-delay:.32s; }
.d5   { animation-delay:.4s; }

.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity:1; transform:translateY(0); }

/* ─────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────── */
@media (max-width:48rem) {
  .hero__inner { grid-template-columns:1fr; }
  .hero__visual { order:-1; display:flex; justify-content:center; }
  .hero__portrait-wrap { width:min(270px,72vw); }
  .hero__badge { left:auto; right:0; bottom:4%; }
  .about__inner { grid-template-columns:1fr; }
  .eco-card__services { grid-template-columns:1fr; }
  .footer__inner { grid-template-columns:1fr; }
  .nav__links { display:none; }
  .book-card { flex-direction:column; }
  .book-cover { width:min(150px,45vw); align-self:center; }
  .span-8,.span-4,.span-6,.span-5,.span-7 { grid-column:span 12; }
}
@media (min-width:48rem) and (max-width:64rem) {
  .span-8 { grid-column:span 12; }
  .span-4 { grid-column:span 6; }
  .span-5 { grid-column:span 6; }
  .span-7 { grid-column:span 6; }
  .footer__inner { grid-template-columns:1fr 1fr; }
}
@media (max-width:36rem) {
  .hero__cta { flex-direction:column; align-items:flex-start; }
  .stats__flex { flex-direction:column; }
  .stats__item:not(:last-child){ border-right:none; border-bottom:1px solid var(--c-border); }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}