*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#05060A;
  --text:#ffffff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.55);

  --apple:#F5F5F7;
  --ink:#111214;
  --ink2:rgba(17,18,20,.72);

  --primary:#2F6BFF;
  --grad1:#67B7FF;
  --grad2:#7B5CFF;

  --cardLight:#ffffff;
  --borderLight:rgba(17,18,20,.10);

  --wa:#25D366;
}
html{scroll-behavior:smooth}
body{
  font-family:'Montserrat',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* HEADER */
.header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(5,6,10,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px
}
.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:#fff}
.brand-mark{font-weight:800;letter-spacing:-0.02em}
.brand-name{opacity:.85;font-weight:500}

.nav{display:flex;gap:22px}
.nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:14px}
.nav a:hover{color:#fff}

/* WhatsApp */
.btn-wa{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:14px;color:#fff;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
}
.btn-wa-icon{
  width:28px;height:28px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--wa);color:#fff;
  box-shadow:0 10px 26px rgba(37,211,102,.22);
}
.btn-wa:hover{border-color:rgba(255,255,255,0.18)}
.btn-wa--mobile{width:100%;justify-content:center}

.burger{
  display:none;width:42px;height:42px;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);cursor:pointer
}
.burger span{display:block;width:18px;height:2px;background:#fff;margin:6px auto;border-radius:2px;opacity:.9}

.mobile-menu{display:none;padding:14px 20px 22px;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-menu a{display:block;padding:12px 0;text-decoration:none;color:var(--muted);font-weight:600}
.mobile-menu a:hover{color:#fff}
.mobile-menu.open{display:block}

/* HERO */
.hero{position:relative;padding:110px 20px 90px;text-align:center;overflow:hidden}
.hero-glow{
  position:absolute;top:-220px;left:50%;
  width:640px;height:640px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(123,92,255,.9) 0%,rgba(103,183,255,.25) 55%,transparent 70%);
  filter:blur(120px);opacity:.35
}
.hero-content{position:relative;max-width:980px;margin:auto}

/* finer typography */
.hero h1{
  font-size:clamp(2.6rem,6vw,4.6rem);
  font-weight:700;letter-spacing:-0.03em
}
.gradient-text{
  background:linear-gradient(90deg,var(--grad1),var(--grad2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent
}
.dot{color:var(--grad2)}
.subtitle{
  margin-top:18px;
  font-size:clamp(1.05rem,2vw,1.55rem);
  color:var(--muted);font-weight:500
}
.description{
  margin:22px auto 0;max-width:760px;
  color:var(--muted2);font-weight:300;font-size:1.05rem
}
.buttons{margin-top:34px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.btn{
  padding:16px 28px;border-radius:999px;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent
}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 14px 40px rgba(47,107,255,.18)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.secondary{background:#fff;color:#111214}
.btn.secondary:hover{filter:brightness(.96)}

/* signature */
.hero-signature{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-author{color:var(--muted2);font-size:.98rem;font-weight:500}
.hero-author span{opacity:.9}
.signature-img{
  width:240px;max-width:70vw;height:auto;display:block;opacity:.92;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.35))
}

section{padding:90px 20px}

/* light sections */
.section-light{background:var(--apple);color:var(--ink)}
h2{text-align:center;font-size:2.35rem;font-weight:700;letter-spacing:-0.03em;color:var(--ink)}
.section-lead{text-align:center;margin-top:12px;color:var(--ink2);font-weight:300}

/* expertise tiles */
.tiles-2x2{
  margin:54px auto 0;max-width:1200px;
  display:grid;grid-template-columns:1fr 1fr;gap:18px
}
.tile{
  position:relative;border-radius:26px;overflow:hidden;
  border:1px solid var(--borderLight);
  min-height:360px;display:flex;align-items:stretch
}
.tile--image{
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:#fff;border:1px solid rgba(17,18,20,.10)
}
.tile--photo{background-image:url("../images/expertises/exp-photo.jpg")}
.tile--video{background-image:url("../images/expertises/exp-video.jpg")}
.tile--design{background-image:url("../images/expertises/exp-design.jpg")}
.tile--ia{background-image:url("../images/expertises/exp-ia.jpg")}

.tile-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.20) 0%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.66) 100%)
}
.tile-inner{padding:44px;width:100%;position:relative;z-index:1}
.tile-kicker{font-size:.95rem;letter-spacing:.02em;opacity:.75;font-weight:500}
.tile-title{margin-top:10px;font-size:2.15rem;line-height:1.05;letter-spacing:-0.03em;font-weight:700}
.tile-desc{margin-top:14px;max-width:520px;font-weight:300;opacity:.85}

/* portfolio carousel */
.section-carousel{padding-bottom:60px}
.carousel-head{position:relative;display:grid;place-items:center;gap:10px}
.carousel-title{text-align:center}
.carousel-controls{
  position:absolute;right:20px;top:50%;
  transform:translateY(-50%);display:flex;gap:10px
}
.cbtn{
  width:42px;height:42px;border-radius:999px;
  border:1px solid var(--borderLight);background:#fff;color:var(--ink);
  font-size:22px;cursor:pointer
}
.cbtn:hover{filter:brightness(.97)}
.carousel{margin-top:24px;overflow:hidden}
.carousel-track{
  display:flex;gap:14px;padding:0 20px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.carousel-track:focus{outline:3px solid rgba(47,107,255,.25);outline-offset:8px;border-radius:16px}
.carousel-track::-webkit-scrollbar{height:10px}
.carousel-track::-webkit-scrollbar-thumb{background:rgba(17,18,20,.15);border-radius:999px}

.slide{
  position:relative;flex:0 0 auto;width:360px;height:230px;border-radius:22px;
  background:#fff;border:1px solid var(--borderLight);
  scroll-snap-align:start;overflow:hidden;text-decoration:none
}
.slide--wide{width:520px}
.slide-img{width:100%;height:100%;display:block;object-fit:cover}
.slide-overlay{position:absolute;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:6px}
.slide-tag{
  display:inline-flex;width:fit-content;padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid rgba(17,18,20,.10);
  font-size:12px;font-weight:600;color:var(--ink)
}
.slide-title{
  font-weight:600;color:var(--ink);letter-spacing:-0.02em;
  background:rgba(255,255,255,.65);width:fit-content;padding:6px 10px;border-radius:12px;
  border:1px solid rgba(17,18,20,.08)
}
.dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.dotx{width:8px;height:8px;border-radius:999px;background:rgba(17,18,20,.22);border:none;cursor:pointer}
.dotx.active{width:22px;background:rgba(17,18,20,.65)}

/* process */
.process-grid{
  margin:54px auto 0;max-width:1100px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px
}
.process-card{
  background:var(--cardLight);padding:34px;border-radius:24px;border:1px solid var(--borderLight)
}
.process-card h3{color:var(--ink);font-weight:700;letter-spacing:-0.02em}
.process-card p{color:var(--ink2);font-weight:300}
.pill{
  display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:999px;
  background:rgba(123,92,255,.12);border:1px solid rgba(123,92,255,.22);margin-bottom:12px;color:var(--ink);font-weight:700
}

/* contact */
.contact-card{
  margin:54px auto 0;max-width:1100px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px
}
.contact-block{
  background:var(--cardLight);padding:34px;border-radius:24px;border:1px solid var(--borderLight)
}
.contact-block h3{color:var(--ink);font-weight:700}
.contact-block p{color:var(--ink2);font-weight:300;margin:10px 0 18px}

/* footer */
.footer{padding:28px 0;border-top:1px solid var(--borderLight)}
.footer-inner{
  display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  color:var(--ink2);font-size:14px;font-weight:300
}
.footer-links{display:flex;gap:16px}
.footer-links a{color:var(--ink2);text-decoration:none;font-weight:400}
.footer-links a:hover{color:var(--ink)}

/* responsive */
@media (max-width:980px){
  .nav{display:none}
  .burger{display:block}
  .carousel-controls{position:static;transform:none;margin-top:10px}
}
@media (max-width:840px){
  .tiles-2x2{grid-template-columns:1fr}
  .tile{min-height:320px}
}
@media (max-width:520px){
  .btn{width:100%}
  .buttons{width:100%}
  .signature-img{width:210px}
  .slide{width:300px;height:210px}
  .slide--wide{width:360px}
}

/* ===============================
   Portfolio slider (target look)
   =============================== */

#portfolio{
  background-image: url("../images/ndopfond-pf.jpg");
  background-repeat: repeat;
  background-position: center;
  background-size: 300px 300px;
}
#portfolio .carousel{
  position: relative;
  overflow: hidden;
  padding: 5px 0;
  height: 360px; /* room for scale(1.4) */
}
#portfolio #pfTrack.carousel-track{
  position: relative;
  height: 100%;
  overflow: hidden !important;
  display: block;
}
#portfolio #pfTrack .slide{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  height: 230px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1), opacity 520ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  border-radius: 22px;
  overflow: hidden;
  text-decoration:none;
}
#portfolio #pfTrack .slide.is-visible{ opacity: 1; pointer-events: auto; }
#portfolio #pfTrack .slide.is-active{ z-index: 5; }
#portfolio #pfTrack .slide.is-near{ z-index: 4; }

@media (max-width: 768px){
  #portfolio .carousel{ height: 300px; }
  #portfolio #pfTrack .slide{ width: 260px; height: 180px; }
}
.carousel-controls-below{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:12px;
}

/* slider helper: disable animation during snap */
#portfolio #pfTrack.no-anim .slide{ transition:none !important; }

/* Ensure enough vertical room for scale(1.4) */
#portfolio .carousel{height:380px}
@media (max-width:768px){ #portfolio .carousel{height:320px} }

/* ===== Slider spacing tweaks (reduce empty space) ===== */
#portfolio .carousel{
  height: 310px;
  margin-top: 16px;
  padding: 0;
}
@media (max-width:768px){
  #portfolio .carousel{height:260px; margin-top:12px;}
}
#portfolio .dots{margin-top:14px}
.carousel-controls-below{margin-top:10px}

/* v8: keep 7 cards visible (no missing on right) without changing your spacing feel */
#portfolio .carousel{ padding-left: 10px; padding-right: 10px; }
#portfolio #pfTrack .slide{ opacity: 1; } /* safety: if JS fails, you still see them */


/* ===============================
   Expertises (premium split-card)
   Image: ~62% / Text: ~38%
   =============================== */
.exp-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
@media (max-width: 900px){
  .exp-grid{ grid-template-columns: 1fr; }
}

.exp-card{
  display:flex;
  flex-direction:column;
  border-radius: 22px;
  overflow:hidden;
  text-decoration:none;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 38px rgba(0,0,0,.08);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.exp-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.12);
}
.exp-card:focus-visible{
  outline: 3px solid rgba(0,0,0,.25);
  outline-offset: 3px;
}

.exp-text{
  padding: 22px 22px 18px;
  flex: 0 0 38%;
}
.exp-kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  margin: 0 0 10px;
}
.exp-title{
  font-size: 34px;
  line-height: 1.05;
  margin: 0 0 10px;
  color: #111;
}
.exp-desc{
  margin: 0;
  color: rgba(0,0,0,.65);
  line-height: 1.45;
}

.exp-media{
  flex: 1 1 62%;
  min-height: 190px;
  position: relative;
  background: #eee;
}
.exp-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* subtle tint per domain (optional, stays premium) */
.exp-card--photo .exp-kicker{ color: rgba(0,0,0,.55); }
.exp-card--video .exp-kicker{ color: rgba(0,0,0,.55); }
.exp-card--design .exp-kicker{ color: rgba(0,0,0,.55); }
.exp-card--ia .exp-kicker{ color: rgba(0,0,0,.55); }
/* ===============================
   v9: Expertises uniformity
   - fixed text block height
   - consistent media height (so images are predictable)
   =============================== */
.exp-card{ height: 520px; } /* keeps the 4 cards consistent */
.exp-text{
  flex: 0 0 auto !important;
  height: 220px;            /* bigger text zone -> better uniformity */
  padding: 26px 26px 20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.exp-title{
  font-size: 36px;
  line-height: 1.03;
  margin: 0 0 12px;
}
.exp-desc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;    /* same number of lines on every card */
  overflow: hidden;
}
.exp-media{
  flex: 1 1 auto !important;
  height: 300px;            /* consistent image space */
  min-height: 300px;
}
.exp-media img{ height:100%; }

@media (max-width: 900px){
  .exp-card{ height: auto; }
  .exp-text{ height: auto; }
  .exp-media{ height: 220px; min-height: 220px; }
}
/* ===============================
   v10: Portfolio scale(1.8) room
   =============================== */
#portfolio .carousel{
  height: 460px;      /* room for 230px * 1.8 + padding */
  padding: 10px 0;    /* breathing space */
  overflow: hidden;   /* no scrollbars */
}
@media (max-width: 768px){
  #portfolio .carousel{
    height: 360px;
    padding: 10px 0;
  }
}
/* =================================================
   HERO – Ndop background (no opacity, stable layout)
   ================================================= */
.hero{
  position: relative;
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  background-image: url("../images/ndopfond.jpg");
  background-repeat: repeat;
  background-position: center;
  background-size: 300px 300px;
}

/* Keep hero inner content readable and centered */
.hero .hero-inner{
  width: 100%;
  padding: 120px 20px 110px;
  position: relative;
  z-index: 2;
}

/* Glow anchored to bottom */
.hero .hero-glow{
  position: absolute;
  left: 50%;
  bottom: -260px;
  transform: translateX(-50%);
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(123,92,255,.9) 0%, rgba(103,183,255,.25) 55%, transparent 70%);
  filter: blur(140px);
  opacity: .35;
  z-index: 1;
  pointer-events: none;
}