/* ═══════════════════════════════════════════════
   SAMIR MESSAOUDI — Design System v4
   Monochrome + Accent Blue · Poppins · Minimal
═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,700;1,800;1,900&display=swap');

:root {
  --black:  #070707;
  --white:  #f4f2ee;
  --off:    #0e0e0e;
  --g1:     #161616;
  --g2:     #222;
  --g3:     #444;
  --g4:     #777;
  --g5:     #aaa;
  --blue:   #4f8ef7;         /* Primary accent — used sparingly */
  --blue-d: rgba(79,142,247,0.10);
  --blue-b: rgba(79,142,247,0.28);
  --teal:   #2ec4b6;         /* Secondary accent — quantum / live */
  --teal-d: rgba(46,196,182,0.10);
  --teal-b: rgba(46,196,182,0.28);
  --line:   rgba(255,255,255,0.06);
  --line2:  rgba(255,255,255,0.11);
  --line3:  rgba(255,255,255,0.20);
  --f:      'Poppins', sans-serif;
  --ease:   cubic-bezier(.25,.46,.45,.94);
  --ease2:  cubic-bezier(.76,0,.24,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body { font-family:var(--f); background:var(--black); color:var(--white);
       overflow-x:hidden; cursor:none; -webkit-font-smoothing:antialiased }
a { text-decoration:none; color:inherit }
img { display:block; max-width:100%; height:auto }
button { font-family:var(--f); cursor:none; border:none; background:none }

/* ── CURSOR ── */
#cursor-dot { position:fixed; width:6px; height:6px; background:var(--white);
  border-radius:50%; pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%); mix-blend-mode:difference; transition:width .15s,height .15s }
#cursor-ring { position:fixed; width:38px; height:38px;
  border:1px solid rgba(244,242,238,.38); border-radius:50%;
  pointer-events:none; z-index:9998; transform:translate(-50%,-50%); mix-blend-mode:difference }
body.cursor-lg #cursor-dot { width:11px; height:11px }

/* ── PROGRESS BAR ── */
#progress-bar { position:fixed; top:0; left:0; height:1px;
  background:linear-gradient(90deg,var(--blue),var(--teal));
  z-index:9999; width:0%; transition:width .08s linear }

/* ── LOADER ── */
#loader { position:fixed; inset:0; background:var(--black); z-index:8000;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.6rem }
.ld-logo { font-size:.65rem; font-weight:800; letter-spacing:.4em; text-transform:uppercase; color:var(--g4) }
.ld-logo span { display:inline-block; opacity:0; animation:ldChar .55s var(--ease2) both }
.ld-bar { width:120px; height:1px; background:var(--g2); overflow:hidden; position:relative }
.ld-fill { position:absolute; inset:0;
  background:linear-gradient(90deg,var(--blue),var(--teal));
  transform:scaleX(0); transform-origin:left; animation:ldFill 1.4s var(--ease2) .4s forwards }
.ld-pct { font-size:.5rem; font-weight:700; letter-spacing:.2em; color:var(--g3) }
@keyframes ldChar { from{opacity:0;transform:translateY(80%)} to{opacity:1;transform:none} }
@keyframes ldFill  { to { transform:scaleX(1) } }

/* ── NOISE OVERLAY ── */
body::before { content:''; position:fixed; inset:0; opacity:.018; pointer-events:none; z-index:9000;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E") }

/* ── NAV ── */
.nav { position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.9rem 4.5vw; transition:all .5s var(--ease) }
.nav.scrolled { padding:1rem 4.5vw; background:rgba(7,7,7,.94);
  backdrop-filter:blur(22px); border-bottom:1px solid var(--line) }
.nav-logo { font-size:.64rem; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--white) }
.nav-links { display:flex; gap:2.2rem; list-style:none }
.nav-links a { font-size:.56rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--g4); transition:color .25s; position:relative }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; right:0;
  height:1px; background:var(--blue); transform:scaleX(0);
  transform-origin:right; transition:transform .3s var(--ease2) }
.nav-links a:hover { color:var(--white) }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); transform-origin:left }
.nav-links a.active { color:var(--white) }
/* LinkedIn nav item special color */
.nav-links a[href*="linkedin-feed"] { color:var(--blue) }
.nav-links a[href*="linkedin-feed"]:hover { color:var(--white) }
.nav-links a[href*="linkedin-feed"]::after { background:var(--blue) }
.nav-cta { font-size:.56rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.6rem 1.3rem; border:1px solid var(--line2); color:var(--white); transition:all .25s }
.nav-cta:hover { background:var(--white); color:var(--black); border-color:var(--white) }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--f);
  font-size:.62rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  padding:.9rem 1.9rem; border:1px solid transparent; cursor:none;
  transition:all .3s var(--ease); position:relative; overflow:hidden }
.btn-inner { position:relative; z-index:1; display:flex; align-items:center;
  gap:.6rem; transition:color .3s }
.btn-bg { position:absolute; inset:0; transform:translateX(-101%); transition:transform .38s var(--ease2) }
.btn-fill { background:var(--white); color:var(--black); border-color:var(--white) }
.btn-fill .btn-bg { background:var(--g2) }
.btn-fill:hover .btn-bg { transform:none }
.btn-fill:hover .btn-inner { color:var(--white) }
.btn-stroke { background:transparent; color:var(--white); border-color:var(--line2) }
.btn-stroke .btn-bg { background:var(--white) }
.btn-stroke:hover .btn-bg { transform:none }
.btn-stroke:hover .btn-inner { color:var(--black) }
.btn-blue { background:var(--blue-d); color:var(--blue); border:1px solid var(--blue-b) }
.btn-blue .btn-bg { background:var(--blue) }
.btn-blue:hover .btn-bg { transform:none }
.btn-blue:hover .btn-inner { color:var(--white) }
.btn svg { width:12px; height:12px; flex-shrink:0; transition:transform .3s var(--ease) }
.btn:hover svg { transform:translate(3px,-3px) }

/* ── SECTION STRUCTURE ── */
.section { padding:9rem 4.5vw } .section-sm { padding:6rem 4.5vw }
.section-label { display:flex; align-items:center; gap:.7rem; font-size:.56rem;
  font-weight:700; letter-spacing:.25em; text-transform:uppercase; color:var(--g4); margin-bottom:1.4rem }
.section-label::before { content:''; width:22px; height:1px; background:var(--g4) }
.section-label.blue { color:var(--blue) } .section-label.blue::before { background:var(--blue) }
.section-label.teal { color:var(--teal) } .section-label.teal::before { background:var(--teal) }
.section-title { font-size:clamp(2rem,4vw,3.8rem); font-weight:800;
  letter-spacing:-.04em; line-height:1.02; color:var(--white) }
.section-title em { font-style:italic; font-weight:200; color:var(--g4) }
.divider { height:1px; background:var(--line); margin:0 4.5vw }

/* ── MARQUEE ── */
.marquee-wrap { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:.8rem 0 }
.marquee-track { display:flex; width:max-content; animation:mscroll 34s linear infinite }
.marquee-track:hover { animation-play-state:paused }
.marquee-item { display:flex; align-items:center; gap:2rem; padding:0 2rem;
  font-size:.57rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--g4); white-space:nowrap }
.marquee-sep { width:4px; height:4px; border-radius:50%; background:var(--blue); opacity:.5; flex-shrink:0 }
@keyframes mscroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── REVEAL ── */
.rv   { opacity:0; transform:translateY(28px);  transition:opacity .85s var(--ease),transform .85s var(--ease) }
.rv-x { opacity:0; transform:translateX(-28px); transition:opacity .85s var(--ease),transform .85s var(--ease) }
.rv-s { opacity:0; transform:scale(.94);        transition:opacity .85s var(--ease),transform .85s var(--ease) }
.rv.on, .rv-x.on, .rv-s.on { opacity:1; transform:none }
[data-d="1"]{transition-delay:.08s} [data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s} [data-d="4"]{transition-delay:.32s}
[data-d="5"]{transition-delay:.4s}  [data-d="6"]{transition-delay:.48s}

/* ── CHIP ── */
.chip { display:inline-block; padding:.3rem .82rem; border:1px solid var(--line2);
  font-size:.55rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--g4); border-radius:2px; transition:all .2s; cursor:none }
.chip:hover { border-color:var(--white); color:var(--white) }
.chip.blue { border-color:var(--blue-b); color:var(--blue); background:var(--blue-d) }
.chips { display:flex; flex-wrap:wrap; gap:.4rem }

/* ── CARD LINE ── */
.card-line { position:absolute; bottom:0; left:0; right:0; height:1px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease2) }

/* ── ACCENT BADGE ── */
.badge-blue { display:inline-flex; align-items:center; gap:.5rem; padding:.32rem .88rem;
  background:var(--blue-d); border:1px solid var(--blue-b); border-radius:2px;
  font-size:.54rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue) }
.badge-teal { display:inline-flex; align-items:center; gap:.5rem; padding:.32rem .88rem;
  background:var(--teal-d); border:1px solid var(--teal-b); border-radius:2px;
  font-size:.54rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal) }
.live-dot { width:5px; height:5px; border-radius:50%; background:var(--teal);
  animation:livePulse 1.6s ease-in-out infinite }
@keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }

/* ── PAGE HERO GENERIC ── */
.page-hero { min-height:58vh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:10rem 4.5vw 5rem; border-bottom:1px solid var(--line); position:relative; overflow:hidden }
.page-hero-ghost { position:absolute; bottom:-2rem; right:4.5vw;
  font-size:clamp(5rem,13vw,16rem); font-weight:900; letter-spacing:-.08em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.04);
  pointer-events:none; user-select:none; line-height:1 }
.page-hero-title { font-size:clamp(4rem,9vw,9rem); font-weight:900;
  letter-spacing:-.06em; line-height:.88; color:var(--white);
  animation:fUp .9s .4s var(--ease) both }
.page-hero-title em { font-style:italic; font-weight:200; color:var(--g4) }
.page-hero-sub { max-width:540px; font-size:.92rem; font-weight:300; line-height:1.85;
  color:var(--g4); margin-top:1.5rem; animation:fUp .9s .55s var(--ease) both }
@keyframes fUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

/* ── FOOTER ── */
.footer { background:var(--off); border-top:1px solid var(--line); padding:5rem 4.5vw 2.5rem }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:4rem; padding-bottom:3.5rem; border-bottom:1px solid var(--line) }
.footer-name { font-size:1.1rem; font-weight:800; letter-spacing:-.02em; margin-bottom:.8rem }
.footer-about { font-size:.76rem; font-weight:300; line-height:1.8; color:var(--g4); max-width:250px }
.footer-col-title { font-size:.52rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--g4); margin-bottom:1.4rem }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.7rem }
.footer-links a { font-size:.78rem; font-weight:300; color:var(--g4); transition:color .2s }
.footer-links a:hover { color:var(--white) }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:2rem }
.footer-copy { font-size:.6rem; font-weight:300; color:var(--g3); letter-spacing:.05em }
.footer-soc { display:flex; gap:.8rem }
.soc-btn { width:34px; height:34px; border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center; color:var(--g4);
  font-size:.6rem; font-weight:700; transition:all .2s }
.soc-btn:hover { border-color:var(--blue); color:var(--blue) }

/* ── LINKEDIN CAROUSEL (home page strip) ── */
.li-strip { padding:4rem 0; border-top:1px solid var(--line); overflow:hidden; position:relative }
.li-strip-header { display:flex; align-items:center; justify-content:space-between;
  padding:0 4.5vw; margin-bottom:2rem }
.li-strip-title { font-size:.62rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--g4); display:flex; align-items:center; gap:.7rem }
.li-strip-link { font-size:.58rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue); border-bottom:1px solid var(--blue-b);
  padding-bottom:.18rem; transition:opacity .2s }
.li-strip-link:hover { opacity:.7 }
.li-carousel-wrap { overflow:hidden; padding:0 4.5vw }
.li-carousel { display:flex; gap:1.5rem; animation:liScroll 32s linear infinite }
.li-carousel:hover { animation-play-state:paused }
/* Carousel card */
.li-mini-card { flex-shrink:0; width:300px; border:1px solid var(--line);
  background:var(--g1); padding:1.5rem; display:flex; flex-direction:column;
  gap:.85rem; position:relative; overflow:hidden; transition:border-color .25s }
.li-mini-card:hover { border-color:var(--line3) }
.li-mini-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,var(--blue),var(--teal));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease2) }
.li-mini-card:hover::before { transform:scaleX(1) }
.li-mini-head { display:flex; align-items:center; gap:.7rem }
.li-mini-avatar { width:28px; height:28px; border-radius:50%; overflow:hidden;
  flex-shrink:0; border:1px solid var(--line2) }
.li-mini-avatar img { width:100%; height:100%; object-fit:cover; filter:grayscale(15%) }
.li-mini-name { font-size:.68rem; font-weight:700; color:var(--white) }
.li-mini-time { font-size:.55rem; font-weight:300; color:var(--g3) }
.li-mini-cat { font-size:.5rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-d); border:1px solid var(--blue-b);
  padding:.15rem .55rem; border-radius:2px; width:fit-content }
.li-mini-text { font-size:.75rem; font-weight:300; line-height:1.7; color:var(--g4);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.li-mini-text strong { color:var(--white); font-weight:600 }
.li-mini-footer { display:flex; align-items:center; justify-content:space-between;
  padding-top:.75rem; border-top:1px solid var(--line) }
.li-mini-likes { font-size:.58rem; font-weight:500; color:var(--g3) }
.li-mini-cta { font-size:.55rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); transition:opacity .2s }
.li-mini-cta:hover { opacity:.7 }
@keyframes liScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }