/* ============================================
   MUHAMMAD SALMAN CH — PORTFOLIO CSS v2
   Full mobile-first, dark, data-driven design
   ============================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
/* Prevent any grid/flex child from blowing out container width */
img { max-width:100%; }

:root {
  --bg: #060810;
  --bg-2: #0d1117;
  --bg-card: #111827;
  --bg-card-h: #161f2e;
  --accent: #4f8ef7;
  --accent-2: #7c3aed;
  --accent-3: #10b981;
  --accent-g: rgba(79,142,247,0.25);
  --tp: #f0f4ff;
  --ts: #8b9bb4;
  --tm: #4a5568;
  --border: rgba(255,255,255,0.07);
  --border-a: rgba(79,142,247,0.4);
  --grad: linear-gradient(135deg,#4f8ef7,#7c3aed);
  --grad-glow: linear-gradient(135deg,rgba(79,142,247,0.12),rgba(124,58,237,0.12));
  --font: 'Inter',sans-serif;
  --r: 14px; --r-s: 8px; --r-l: 22px;
  --sh: 0 4px 24px rgba(0,0,0,0.5);
  --shg: 0 0 40px rgba(79,142,247,0.18);
  --t: all 0.3s cubic-bezier(0.4,0,0.2,1);
}

html { scroll-behavior:smooth; font-size:16px; }
body { background:var(--bg); color:var(--tp); font-family:var(--font); line-height:1.7; overflow-x:hidden; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg-2); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:99px; }
::selection { background:rgba(79,142,247,0.3); color:#fff; }

/* ── CURSOR (desktop only) ── */
.cursor-dot,.cursor-ring { pointer-events:none; position:fixed; z-index:9999; transform:translate(-50%,-50%); transition:none; }
.cursor-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; top:0; left:0; }
.cursor-ring { width:34px; height:34px; border:2px solid rgba(79,142,247,0.45); border-radius:50%; top:0; left:0; z-index:9998; }
@media(max-width:768px){ .cursor-dot,.cursor-ring { display:none; } }

/* ── LOADER ── */
.loader { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:99999; transition:opacity 0.6s,visibility 0.6s; }
.loader.hidden { opacity:0; visibility:hidden; }
.loader-inner { text-align:center; }
.loader-text { font-size:3rem; font-weight:900; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:4px; margin-bottom:20px; animation:pulse 1s ease infinite; }
.loader-bar { width:180px; height:3px; background:var(--border); border-radius:99px; margin:0 auto; overflow:hidden; }
.loader-bar span { display:block; height:100%; background:var(--grad); border-radius:99px; animation:loading 1.8s ease forwards; }
@keyframes loading { from{width:0} to{width:100%} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }

/* ── NAVBAR ── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:18px 0; transition:var(--t); }
.navbar.scrolled { background:rgba(6,8,16,0.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:10px 0; }
.nav-container { max-width:1280px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav-logo { display:flex; align-items:center; gap:5px; text-decoration:none; flex-shrink:0; }
.logo-letters { font-size:1.4rem; font-weight:900; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:2px; }
.logo-dot { width:7px; height:7px; background:var(--accent-3); border-radius:50%; animation:blink 2s ease infinite; }

.nav-links { display:flex; gap:2px; list-style:none; }
.nav-links a { color:var(--ts); text-decoration:none; font-size:0.82rem; font-weight:500; padding:5px 10px; border-radius:var(--r-s); transition:var(--t); position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:1px; left:50%; right:50%; height:2px; background:var(--accent); transition:var(--t); border-radius:99px; }
.nav-links a:hover,.nav-links a.active { color:var(--tp); }
.nav-links a:hover::after,.nav-links a.active::after { left:10px; right:10px; }

.nav-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.lang-toggle { display:flex; align-items:center; gap:5px; background:var(--bg-card); border:1px solid var(--border); border-radius:99px; padding:4px 12px; font-size:0.75rem; }
.lang-option { cursor:pointer; font-weight:700; color:var(--tm); transition:var(--t); padding:2px 3px; }
.lang-option.active { color:var(--accent); }
.lang-divider { color:var(--tm); }

.btn-nav { background:var(--grad); color:#fff; text-decoration:none; font-size:0.82rem; font-weight:600; padding:8px 18px; border-radius:99px; transition:var(--t); white-space:nowrap; }
.btn-nav:hover { opacity:0.9; transform:translateY(-2px); }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--tp); border-radius:99px; transition:var(--t); }

/* ── CONTAINERS ── */
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
.section { padding:80px 0; overflow-x:hidden; }
.section-dark { background:var(--bg-2); }

.section-header { text-align:center; margin-bottom:60px; }
.section-tag { display:inline-block; background:var(--grad-glow); border:1px solid var(--border-a); color:var(--accent); font-size:0.72rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; padding:5px 16px; border-radius:99px; margin-bottom:14px; }
.section-title { font-size:clamp(1.6rem,3.5vw,2.6rem); font-weight:800; color:var(--tp); line-height:1.2; margin-bottom:12px; }
.section-subtitle { font-size:1rem; color:var(--ts); max-width:540px; margin:0 auto; }

/* ── BUTTONS ── */
.btn-primary { display:inline-flex; align-items:center; gap:9px; background:var(--grad); color:#fff; text-decoration:none; font-size:0.9rem; font-weight:600; padding:13px 28px; border-radius:99px; transition:var(--t); border:none; cursor:pointer; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 36px rgba(79,142,247,0.38); }
.btn-primary.btn-full { width:100%; justify-content:center; }

.btn-ghost { display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--tp); text-decoration:none; font-size:0.9rem; font-weight:600; padding:13px 28px; border-radius:99px; border:1.5px solid var(--border); transition:var(--t); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn-ghost.btn-sm { padding:8px 18px; font-size:0.8rem; }

/* ── HERO ── */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; padding:100px 0 60px; }
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(79,142,247,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,142,247,0.04) 1px,transparent 1px); background-size:60px 60px; }
.hero-glow { position:absolute; border-radius:50%; pointer-events:none; }
.glow-1 { width:500px; height:500px; background:radial-gradient(circle,rgba(79,142,247,0.12),transparent 70%); top:-150px; right:-50px; filter:blur(80px); animation:floatG 8s ease-in-out infinite; }
.glow-2 { width:350px; height:350px; background:radial-gradient(circle,rgba(124,58,237,0.1),transparent 70%); bottom:-80px; left:80px; filter:blur(80px); animation:floatG 11s ease-in-out infinite reverse; }
@keyframes floatG { 0%,100%{transform:translate(0,0)} 50%{transform:translate(18px,-25px)} }

.particle { position:absolute; border-radius:50%; background:var(--accent); animation:pFloat linear infinite; }
@keyframes pFloat { 0%{transform:translateY(100vh) scale(0);opacity:0} 10%{opacity:0.3} 90%{opacity:0.2} 100%{transform:translateY(-80px) scale(1);opacity:0} }

.hero-container { max-width:1280px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; z-index:2; }

.hero-badge { display:inline-flex; align-items:center; gap:9px; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.28); color:var(--accent-3); font-size:0.78rem; font-weight:500; padding:6px 14px; border-radius:99px; margin-bottom:20px; }
.badge-dot { width:7px; height:7px; background:var(--accent-3); border-radius:50%; animation:blink 2s ease infinite; }

.hero-name { display:block; font-size:clamp(2.2rem,4.5vw,3.8rem); font-weight:900; line-height:1.05; background:linear-gradient(135deg,#f0f4ff 0%,#94b8ff 55%,#7c3aed 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-1px; margin-bottom:14px; }
.hero-role { font-size:1.1rem; color:var(--ts); margin-bottom:20px; min-height:36px; }
.typed-wrap { color:var(--accent); font-weight:700; }
.hero-tagline { font-size:0.95rem; color:var(--ts); border-left:3px solid var(--accent); padding-left:14px; margin-bottom:28px; line-height:1.6; }

.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px; }

/* Hero Stats Strip */
.hero-stats-strip { display:flex; align-items:center; gap:0; padding:16px 20px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); margin-bottom:20px; overflow-x:auto; }
.hs-item { text-align:center; flex:1; min-width:80px; }
.hs-row { display:flex; align-items:baseline; justify-content:center; gap:1px; }
.hs-num { font-size:1.6rem; font-weight:900; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:inline-block; }
.hs-plus { font-size:1.1rem; font-weight:900; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hs-label { display:block; font-size:0.68rem; color:var(--ts); margin-top:2px; }
.hs-divider { width:1px; height:36px; background:var(--border); flex-shrink:0; margin:0 8px; }

/* Hero Credentials */
.hero-creds { display:flex; gap:14px; flex-wrap:wrap; }
.cred-item { display:flex; align-items:center; gap:10px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-s); padding:10px 14px; }
.cred-logo { height:22px; object-fit:contain; filter:brightness(1.1); }
.cred-flag { font-size:1.5rem; line-height:1; }
.cred-icon i { color:var(--accent); font-size:1.2rem; }
.cred-icon-lang { width:32px; height:32px; background:var(--grad); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.cred-icon-lang i { color:#fff; font-size:0.95rem; }
.cred-score { display:block; font-size:1rem; font-weight:900; color:var(--accent); line-height:1; }
.cred-label { display:block; font-size:0.65rem; color:var(--ts); }

/* Company-specific logo backgrounds */
.cavago-logo { background:#1a1400 !important; border-color:rgba(251,191,36,0.3) !important; }
.motive-logo { background:#ffffff !important; border-color:rgba(255,255,255,0.2) !important; }
.aiesec-logo { background:#002395 !important; border-color:rgba(0,35,149,0.5) !important; }
.bitgrit-logo { background:#0a0a0a !important; border-color:rgba(255,255,255,0.15) !important; }
.foodpanda-logo { background:#d70f64 !important; border-color:rgba(215,15,100,0.3) !important; }

/* Hero Visual */
.hero-visual { display:flex; justify-content:center; }
.hero-photo-showcase { position:relative; width:380px; max-width:100%; }
.hps-main { position:relative; border-radius:var(--r-l); overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,0.5); border:2px solid rgba(79,142,247,0.2); }
.hps-main-img { width:100%; height:480px; object-fit:cover; object-position:top center; display:block; transition:opacity 0.4s ease,transform 0.4s ease; }
.hps-glow-base { position:absolute; bottom:0; left:0; right:0; height:50%; background:linear-gradient(to top,rgba(6,8,16,0.7),transparent); pointer-events:none; }
.hps-thumbs { display:flex; gap:10px; margin-top:12px; justify-content:center; }
.hps-thumb { width:72px; height:72px; border-radius:10px; overflow:hidden; cursor:pointer; border:2px solid var(--border); transition:var(--t); }
.hps-thumb:hover,.hps-thumb.active { border-color:var(--accent); box-shadow:0 0 16px rgba(79,142,247,0.3); }
.hps-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; }

.float-card { position:absolute; background:rgba(13,17,23,0.9); border:1px solid var(--border); border-radius:var(--r); padding:12px 16px; display:flex; align-items:center; gap:10px; backdrop-filter:blur(16px); box-shadow:var(--sh); animation:floatCard 4s ease-in-out infinite; z-index:10; }
.float-card i { font-size:1.3rem; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.fc-num { font-size:1.1rem; font-weight:900; color:var(--tp); line-height:1; }
.fc-label { font-size:0.65rem; color:var(--ts); margin-top:2px; }
.card-1 { top:8%; right:-20px; animation-delay:0s; }
.card-2 { bottom:18%; right:-20px; animation-delay:1.5s; }
@keyframes floatCard { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.hero-scroll { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--tm); font-size:0.68rem; letter-spacing:2px; text-transform:uppercase; }
.scroll-mouse { width:22px; height:34px; border:2px solid var(--tm); border-radius:99px; display:flex; justify-content:center; padding-top:6px; }
.scroll-mouse span { width:2px; height:7px; background:var(--accent); border-radius:99px; animation:scrollD 2s ease infinite; }
@keyframes scrollD { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(10px);opacity:0} }

/* ── ABOUT ── */
.about-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:60px; align-items:start; }
.about-img-stack { position:relative; height:480px; }
.aimg { position:absolute; border-radius:var(--r-l); object-fit:cover; transition:var(--t); }
.aimg-1 { width:72%; height:380px; left:0; top:0; box-shadow:var(--sh); border:2px solid var(--border); z-index:2; }
.aimg-2 { width:58%; height:300px; right:0; bottom:0; box-shadow:var(--sh); border:2px solid var(--border-a); z-index:3; }
.aimg:hover { transform:scale(1.03) rotate(-1deg); z-index:10; }
.about-exp-badge { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); background:var(--grad); border-radius:var(--r); padding:14px 18px; text-align:center; z-index:5; box-shadow:0 8px 28px rgba(79,142,247,0.4); }
.aeb-num { font-size:1.8rem; font-weight:900; color:#fff; display:block; }
.aeb-text { font-size:0.7rem; color:rgba(255,255,255,0.8); }
.about-intro { margin-bottom:28px; }
.about-intro p { color:var(--ts); margin-bottom:14px; font-size:0.98rem; }
.about-pillars { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:28px; }
.pillar { display:flex; align-items:flex-start; gap:12px; padding:14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); transition:var(--t); }
.pillar:hover { border-color:var(--border-a); transform:translateY(-2px); }
.pillar-icon { width:36px; height:36px; background:var(--grad-glow); border:1px solid var(--border-a); border-radius:var(--r-s); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pillar-icon i { color:var(--accent); font-size:0.9rem; }
.pillar h4 { font-size:0.82rem; font-weight:700; margin-bottom:2px; }
.pillar p { font-size:0.74rem; color:var(--ts); }
.about-meta { display:flex; flex-direction:column; gap:10px; }
.meta-item { display:flex; align-items:center; gap:10px; font-size:0.87rem; color:var(--ts); }
.meta-item i { color:var(--accent); width:16px; flex-shrink:0; }

/* ── EXPERIENCE / TIMELINE ── */
.timeline { position:relative; max-width:860px; margin:0 auto; }
.timeline::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--border); transform:translateX(-50%); }
.tl-item { position:relative; width:calc(50% - 36px); margin-bottom:40px; }
.tl-left { margin-right:auto; }
.tl-right { margin-left:auto; }
.tl-dot { position:absolute; top:22px; }
.tl-left .tl-dot { right:-44px; }
.tl-right .tl-dot { left:-44px; }
.tl-dot-inner { width:14px; height:14px; background:var(--bg-2); border:2px solid var(--border); border-radius:50%; transition:var(--t); }
.tl-dot-inner.current { border-color:var(--accent); background:var(--accent); box-shadow:0 0 14px rgba(79,142,247,0.6); }
.tl-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:22px; transition:var(--t); }
.tl-card:hover { border-color:var(--border-a); box-shadow:var(--shg); transform:translateY(-4px); }
.tl-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.tl-company { display:flex; align-items:center; gap:10px; }
.tl-company-logo { width:44px; height:44px; border-radius:var(--r-s); overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--bg-2); border:1px solid var(--border); }
.tl-company-logo img { width:100%; height:100%; object-fit:contain; padding:6px; }
.tl-company h3 { font-size:1rem; font-weight:700; }
.tl-location { font-size:0.74rem; color:var(--ts); }
.tl-location i { margin-right:3px; }
.tl-badge { display:flex; align-items:center; gap:5px; font-size:0.72rem; font-weight:600; padding:4px 10px; border-radius:99px; flex-shrink:0; }
.current-badge { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.28); color:var(--accent-3); }
.president-badge { background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.28); color:#f59e0b; }
.badge-pulse { width:5px; height:5px; border-radius:50%; background:var(--accent-3); animation:blink 2s ease infinite; }
.tl-role { font-size:0.92rem; font-weight:700; color:var(--accent); margin-bottom:4px; }
.tl-period { font-size:0.76rem; color:var(--tm); margin-bottom:12px; }
.tl-period i { margin-right:5px; }
.tl-bullets { list-style:none; margin-bottom:14px; }
.tl-bullets li { font-size:0.82rem; color:var(--ts); padding:3px 0 3px 16px; position:relative; }
.tl-bullets li::before { content:'→'; position:absolute; left:0; color:var(--accent); }
.tl-tags { display:flex; flex-wrap:wrap; gap:5px; }
.tl-tags span { background:var(--grad-glow); border:1px solid var(--border-a); color:var(--accent); font-size:0.68rem; font-weight:600; padding:2px 9px; border-radius:99px; }

/* ── SKILLS ── */
.featured-skill { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-l); padding:32px; margin-bottom:20px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; position:relative; transition:var(--t); }
.featured-skill:hover { border-color:var(--border-a); }
.canva-skill { border-color:rgba(0,196,204,0.2); }
.canva-skill:hover { border-color:rgba(0,196,204,0.4); }
.fs-badge { position:absolute; top:20px; right:20px; background:var(--grad); color:#fff; font-size:0.68rem; font-weight:700; padding:4px 12px; border-radius:99px; letter-spacing:1px; text-transform:uppercase; }
.fs-logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; font-size:1.2rem; font-weight:800; color:var(--tp); }
.fs-left h3 { font-size:1.1rem; font-weight:800; margin-bottom:10px; }
.fs-left p { font-size:0.87rem; color:var(--ts); line-height:1.6; }
.fs-pillars { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fs-pillar { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-s); font-size:0.8rem; color:var(--ts); transition:var(--t); }
.fs-pillar:hover { border-color:var(--border-a); color:var(--tp); }
.fs-pillar i { color:var(--accent); width:16px; flex-shrink:0; }

.skills-universe { display:flex; flex-direction:column; gap:48px; margin-top:40px; }
.skills-categories { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.skill-cat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:24px; transition:var(--t); }
.skill-cat:hover { border-color:var(--border-a); }
.skill-cat-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.skill-cat-icon { width:40px; height:40px; background:var(--grad-glow); border:1px solid var(--border-a); border-radius:var(--r-s); display:flex; align-items:center; justify-content:center; }
.skill-cat-icon i { color:var(--accent); font-size:1rem; }
.skill-cat-header h3 { font-size:0.95rem; font-weight:700; }
.skill-bar-item { margin-bottom:14px; }
.sb-label { display:flex; justify-content:space-between; font-size:0.78rem; color:var(--ts); margin-bottom:5px; }
.sb-pct { color:var(--accent); font-weight:600; }
.sb-track { height:5px; background:var(--bg); border-radius:99px; overflow:hidden; }
.sb-fill { height:100%; background:var(--grad); border-radius:99px; width:0; transition:width 1.2s cubic-bezier(0.4,0,0.2,1); }

.tools-title { font-size:0.85rem; font-weight:700; text-align:center; margin-bottom:22px; color:var(--ts); text-transform:uppercase; letter-spacing:2px; }
.tools-bubbles { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.tool-bubble { display:flex; flex-direction:column; align-items:center; gap:7px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; cursor:default; transition:var(--t); min-width:82px; }
.tool-bubble:hover { border-color:var(--border-a); transform:translateY(-5px); box-shadow:var(--shg); }
.tool-bubble i { font-size:1.5rem; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.tool-svg { width:28px; height:28px; object-fit:contain; filter:invert(1) opacity(0.7); }
.tool-bubble span { font-size:0.68rem; font-weight:600; color:var(--ts); }

/* ── IMPACT ── */
.big-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:40px; }
.big-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:28px 20px; text-align:center; transition:var(--t); position:relative; overflow:hidden; }
.big-stat::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad); transform:scaleX(0); transition:transform 0.5s ease; }
.big-stat:hover::before { transform:scaleX(1); }
.big-stat:hover { border-color:var(--border-a); transform:translateY(-5px); }
.bs-icon i { font-size:1.8rem; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:12px; display:block; }
.bs-num { font-size:2.4rem; font-weight:900; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:inline-block; line-height:1; }
.bs-unit { font-size:1.4rem; font-weight:900; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:inline-block; }
.bs-label { font-size:0.78rem; font-weight:600; color:var(--ts); margin:8px 0 4px; display:block; }
.bs-sub { font-size:0.74rem; color:var(--accent-3); font-weight:600; }

.charts-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.charts-row-2 { grid-template-columns:1fr 1.5fr 1fr; }
.chart-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:24px; transition:var(--t); }
.chart-card:hover { border-color:var(--border-a); }
.chart-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.chart-card-header h3 { font-size:0.88rem; font-weight:700; }
.chart-period { font-size:0.7rem; color:var(--tm); background:var(--bg-2); padding:3px 9px; border-radius:99px; }

.impact-cards { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:28px; }
.impact-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:22px 14px; text-align:center; position:relative; transition:var(--t); }
.impact-card:hover { border-color:var(--border-a); transform:translateY(-3px); }
.ic-num { font-size:1.6rem; font-weight:900; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:5px; line-height:1; }
.ic-label { font-size:0.72rem; color:var(--ts); line-height:1.4; }
.ic-icon { position:absolute; top:12px; right:12px; color:var(--tm); font-size:0.8rem; }

/* ── WORK SAMPLES ── */
.work-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:20px; }
.work-card { border-radius:var(--r-l); overflow:hidden; transition:var(--t); cursor:default; }
.work-card:hover { transform:translateY(-6px); box-shadow:var(--shg); }
.work-card-img { position:relative; overflow:hidden; }
.work-card-img img { width:100%; height:280px; object-fit:cover; display:block; transition:transform 0.5s ease; }
.work-card-large .work-card-img img { height:380px; }
.work-card:hover .work-card-img img { transform:scale(1.05); }
.work-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(6,8,16,0.96) 0%,rgba(6,8,16,0.5) 55%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:24px; opacity:0; transform:translateY(10px); transition:var(--t); }
.work-card:hover .work-overlay { opacity:1; transform:translateY(0); }
.wo-tag { display:inline-block; background:var(--grad); color:#fff; font-size:0.68rem; font-weight:700; padding:3px 10px; border-radius:99px; margin-bottom:8px; width:fit-content; }
.work-overlay h4 { font-size:0.98rem; font-weight:700; margin-bottom:8px; color:#fff; }
.work-overlay p { font-size:0.78rem; color:rgba(255,255,255,0.7); line-height:1.5; }
/* Touch devices: always show overlay and badges */
@media(hover:none) {
  .work-overlay { opacity:1 !important; transform:translateY(0) !important; }
  .wc-card:hover { transform:none; }
  .pbi-cell:hover { transform:none; }
}

/* ── CREATIVE MOSAIC ── */
.work-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.work-tab { background:var(--bg-card); border:1px solid var(--border); color:var(--ts); padding:8px 18px; border-radius:99px; cursor:pointer; font-size:0.82rem; font-weight:500; transition:var(--t); }
.work-tab.active,.work-tab:hover { background:var(--grad); color:#fff; border-color:transparent; }
.work-tab:not(.active):hover { background:none; border-color:var(--accent); color:var(--accent); }


/* ════════════════════════════════════════
   WORK COLLAGE  (wc-*)
   ALL images are fixed-height tiles with
   object-fit:cover — nothing ever stretches
   ════════════════════════════════════════ */

/* 3-column layout wrapper */
.wc-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 8px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* Each column stacks its cards vertically */
.wc-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ── CARD BASE ── */
.wc-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;          /* clips image — never scrolls */
  background: var(--bg-card);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.wc-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(79,142,247,0.2); }

/* ── IMAGE BOX — strict fixed heights ── */
.wc-img-box {
  width: 100%;
  overflow: hidden;
  display: block;
}
.wc-img-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
  max-width: 100%;
}
.wc-card:hover .wc-img-box img { transform: scale(1.05); }

/* ── HEIGHT VARIANTS ── */
.wc-card-tall .wc-img-box  { height: 220px; }
.wc-card-sq   .wc-img-box  { height: 150px; }
.wc-card-wide .wc-img-box  { height: 130px; }

/* 2x2 mini grid inside centre column */
.wc-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
}
.wc-card-mini .wc-img-box  { height: 104px; }

/* ── LABEL BADGE (bottom-left overlay) ── */
.wc-badge {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 10px 8px;
  background: linear-gradient(to top, rgba(6,8,16,0.9) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
  gap: 5px;
  flex-wrap: wrap;
}
.wc-tag {
  display: inline-block;
  background: var(--grad);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  white-space: nowrap;
}
.wc-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  line-height: 1.2;
  word-break: break-word;
}

/* ── STAT ROW BELOW COLLAGE ── */
.wc-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 24px;
  flex-wrap: wrap;
}
.wc-stat { display: flex; flex-direction: column; align-items: center; padding: 0 24px; }
.wc-stat-n { font-size: 1.5rem; font-weight: 900; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.wc-stat-l { font-size: 0.68rem; color: var(--ts); margin-top: 4px; text-align: center; }
.wc-stat-div { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; }

/* ════════════════════════════════════════
   POWER BI MOSAIC  (pbi-mosaic)
   Large panel left + 2 stacked right
   ALL images fixed-height — no stretch
   ════════════════════════════════════════ */
.pbi-mosaic {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 8px;
  margin: 0 0 20px;
  width: 100%;
  box-sizing: border-box;
}
.pbi-cell-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* ── CELL BASE ── */
.pbi-cell {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: pointer;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.pbi-cell:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(79,142,247,0.25); }

/* ── IMAGE BOXES — strictly clipped ── */
.pbi-cell-img { width: 100%; overflow: hidden; display: block; }
.pbi-cell-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top left;
  transition: transform 0.5s ease;
  max-width: 100%;
}
.pbi-cell:hover .pbi-cell-img img { transform: scale(1.05); }

/* Main (large) panel */
.pbi-cell-main .pbi-cell-img  { height: 280px; }
/* Small stacked panels */
.pbi-cell-sm   .pbi-cell-img  { height: 132px; }

/* ── OVERLAY + LABELS ── */
.pbi-cell-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,8,16,0.88) 0%, rgba(6,8,16,0.1) 55%, transparent 100%);
  pointer-events: none;
}
.pbi-cell-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.pbi-live {
  display: inline-block;
  background: var(--accent-3);
  color: #fff;
  font-size: 0.56rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  width: fit-content;
  margin-bottom: 3px;
}
.pbi-cell-title { font-size: 0.82rem; font-weight: 700; color: #fff; }
.pbi-cell-sub   { font-size: 0.64rem; color: rgba(255,255,255,0.6); }

/* ── FOOTER ROW (tags + bullets) ── */
.pbi-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  padding: 20px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pbi-tags { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.pbi-bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }



/* ── TESTIMONIALS ── */
.testimonials-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.testi-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-l); padding:28px; position:relative; transition:var(--t); display:flex; flex-direction:column; }
.testi-card:hover { border-color:var(--border-a); transform:translateY(-4px); }
.testi-featured { grid-column:span 2; border-color:var(--border-a); background:var(--bg-card-h); }
.testi-quote-mark { font-size:4rem; line-height:0.6; color:var(--accent); opacity:0.25; font-family:'Playfair Display',serif; margin-bottom:14px; }
.testi-text { font-size:0.84rem; color:var(--ts); line-height:1.75; margin-bottom:20px; flex:1; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:12px; margin-top:auto; }
.testi-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem; font-weight:900; color:#fff; flex-shrink:0; }
.testi-avatar-h { background:linear-gradient(135deg,#f59e0b,#ef4444); }
.testi-avatar-a { background:linear-gradient(135deg,#7c3aed,#4f8ef7); }
.testi-avatar-i { background:linear-gradient(135deg,#10b981,#0ea5e9); }
.testi-avatar-am { background:linear-gradient(135deg,#ec4899,#f43f5e); }
.testi-avatar-ar { background:linear-gradient(135deg,#f59e0b,#10b981); }
.testi-avatar-e { background:linear-gradient(135deg,#4f8ef7,#7c3aed); }
.testi-name { font-size:0.88rem; font-weight:700; color:var(--tp); }
.testi-title { font-size:0.72rem; color:var(--ts); line-height:1.3; }
.testi-rel { font-size:0.68rem; color:var(--accent); margin-top:2px; }
.testi-li { margin-left:auto; color:var(--accent); font-size:1.2rem; transition:var(--t); flex-shrink:0; }
.testi-li:hover { transform:scale(1.2); }

/* ── CONTACT ── */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:48px; align-items:start; }
.contact-photo { position:relative; border-radius:var(--r-l); overflow:hidden; margin-bottom:24px; }
.contact-photo img { width:100%; height:300px; object-fit:cover; object-position:top; display:block; }
.cp-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(6,8,16,0.88),transparent 60%); display:flex; align-items:flex-end; padding:20px; }
.cp-overlay p { color:#fff; font-size:0.85rem; font-weight:600; display:flex; align-items:center; gap:7px; }
.cp-overlay p::before { content:''; width:7px; height:7px; background:var(--accent-3); border-radius:50%; animation:blink 2s ease infinite; flex-shrink:0; }
.contact-details { display:flex; flex-direction:column; gap:10px; }
.contact-link { display:flex; align-items:center; gap:14px; padding:14px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); text-decoration:none; color:inherit; transition:var(--t); }
.contact-link:hover { border-color:var(--border-a); transform:translateX(5px); }
.cl-icon { width:40px; height:40px; background:var(--grad-glow); border:1px solid var(--border-a); border-radius:var(--r-s); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cl-icon i { color:var(--accent); }
.cl-label { font-size:0.68rem; color:var(--tm); margin-bottom:1px; }
.cl-value { font-size:0.82rem; font-weight:600; }
.contact-form-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-l); padding:32px; }
.contact-form { display:flex; flex-direction:column; gap:18px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:0.75rem; font-weight:600; color:var(--ts); text-transform:uppercase; letter-spacing:1px; }
.form-group input,.form-group textarea { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-s); color:var(--tp); font-family:var(--font); font-size:0.88rem; padding:11px 14px; transition:var(--t); resize:vertical; outline:none; }
.form-group input:focus,.form-group textarea:focus { border-color:var(--border-a); box-shadow:0 0 0 3px rgba(79,142,247,0.08); }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--tm); }
.form-note { font-size:0.74rem; color:var(--tm); text-align:center; }

/* ── FOOTER ── */
.footer { background:var(--bg-2); border-top:1px solid var(--border); padding:56px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; margin-bottom:40px; }
.footer-logo { font-size:1.8rem; font-weight:900; letter-spacing:2px; color:var(--tp); margin-bottom:12px; }
.footer-logo span { color:var(--accent); }
.footer-brand p { font-size:0.84rem; color:var(--ts); line-height:1.7; margin-bottom:8px; }
.footer-philosophy { color:var(--accent) !important; font-size:0.9rem !important; }
.footer-social { display:flex; gap:10px; margin-top:16px; }
.footer-social a { width:38px; height:38px; background:var(--bg-card); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ts); text-decoration:none; transition:var(--t); }
.footer-social a:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.footer-nav h4,.footer-contact h4 { font-size:0.74rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--tm); margin-bottom:16px; }
.footer-nav ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-nav a { color:var(--ts); text-decoration:none; font-size:0.84rem; transition:var(--t); }
.footer-nav a:hover { color:var(--accent); padding-left:6px; }
.footer-contact p { font-size:0.84rem; color:var(--ts); margin-bottom:6px; }
.footer-contact .btn-ghost { margin-top:14px; }
.footer-bottom { border-top:1px solid var(--border); padding-top:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:0.78rem; color:var(--tm); }

/* ── BACK TO TOP ── */
.back-to-top { position:fixed; bottom:28px; right:28px; width:46px; height:46px; background:var(--grad); color:#fff; border:none; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.95rem; box-shadow:var(--sh); transition:var(--t); opacity:0; visibility:hidden; z-index:500; }
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { transform:translateY(-3px); box-shadow:var(--shg); }

/* ── PROJECT SECTION ── */
.projects.section { background:var(--bg2); }
.project-showcase { background:var(--bg3); border:1px solid var(--border); border-radius:20px; padding:36px; }
.project-header { display:flex; align-items:center; gap:18px; margin-bottom:18px; }
.project-logo-wrap { width:52px; height:52px; background:var(--grad); border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.project-logo-icon { font-size:1.6rem; color:#fff; }
.project-title-area h3 { font-size:1.4rem; font-weight:700; color:var(--th); margin-bottom:8px; }
.project-tech-tag { display:inline-block; background:rgba(79,142,247,0.12); color:var(--accent); border:1px solid rgba(79,142,247,0.25); border-radius:6px; padding:3px 10px; font-size:0.75rem; font-weight:600; margin-right:6px; margin-bottom:4px; }
.project-description { margin-bottom:24px; }
.project-description p { color:var(--ts); line-height:1.75; font-size:0.95rem; }
.ps-tab-bar { display:flex; gap:8px; margin-bottom:14px; }
.ps-tab { background:var(--bg2); border:1px solid var(--border); color:var(--ts); padding:8px 18px; border-radius:8px; cursor:pointer; font-size:0.85rem; font-weight:500; transition:var(--t); }
.ps-tab.active { background:var(--grad); color:#fff; border-color:transparent; }
.ps-tab:hover:not(.active) { border-color:var(--accent); color:var(--accent); }
.ps-screen-wrap { position:relative; }
.ps-screen { display:none; }
.ps-screen.active { display:block; }
.ps-img { width:100%; border-radius:12px; border:1px solid var(--border); box-shadow:var(--sh); }
.ps-caption { display:flex; align-items:flex-start; gap:10px; margin-top:12px; padding:12px 16px; background:rgba(79,142,247,0.07); border:1px solid rgba(79,142,247,0.15); border-radius:10px; }
.ps-caption i { color:var(--accent); margin-top:2px; flex-shrink:0; }
.ps-caption span { color:var(--ts); font-size:0.85rem; line-height:1.6; }
.project-bullets { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.pb-item { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; }
.pb-item i { color:#10b981; margin-top:2px; flex-shrink:0; }
.pb-item span { color:var(--ts); font-size:0.85rem; line-height:1.6; }

/* ======================================================
   RESPONSIVE / MOBILE
   ====================================================== */

/* Tablet: 1024px */
@media(max-width:1024px) {
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .nav-links.open { display:flex; flex-direction:column; position:fixed; top:66px; left:0; right:0; background:rgba(6,8,16,0.98); backdrop-filter:blur(20px); padding:20px 24px; border-bottom:1px solid var(--border); gap:4px; z-index:999; }
  .hero-container { grid-template-columns:1fr; gap:32px; }
  .hero-visual { order:-1; }
  .hero-photo-showcase { width:300px; margin:0 auto; }
  .hps-main-img { height:380px; }
  .float-card { display:none; }
  .timeline::before { left:20px; }
  .tl-item { width:100%; padding-left:48px; margin-bottom:28px; }
  .tl-left,.tl-right { margin:0 0 28px 0; }
  .tl-left .tl-dot,.tl-right .tl-dot { left:12px; right:auto; }
  .about-grid { grid-template-columns:1fr; }
  .about-imgs { display:none; }
  .skills-categories { grid-template-columns:1fr 1fr; }
  .featured-skill { grid-template-columns:1fr; gap:20px; }
  .big-stats { grid-template-columns:repeat(2,1fr); }
  .charts-row { grid-template-columns:1fr; }
  .charts-row-2 { grid-template-columns:1fr 1fr; }
  .impact-cards { grid-template-columns:repeat(3,1fr); }
  .work-grid { grid-template-columns:1fr 1fr; }
  .work-card-large { grid-column:span 2; }
  .testimonials-grid { grid-template-columns:1fr; }
  .testi-featured { grid-column:span 1; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand { grid-column:span 2; }
  .project-bullets { grid-template-columns:1fr; }
  /* Work collage — keep 3 cols, reduce heights */
  .wc-grid { gap:7px; }
  .wc-mini-grid { gap:7px; }
  .wc-col { gap:7px; }
  .wc-card-tall .wc-img-box { height:180px; }
  .wc-card-sq   .wc-img-box { height:122px; }
  .wc-card-wide .wc-img-box { height:105px; }
  .wc-card-mini .wc-img-box { height:86px; }
  /* PBI mosaic tablet */
  .pbi-mosaic { gap:7px; }
  .pbi-cell-stack { gap:7px; }
  .pbi-cell-main .pbi-cell-img { height:220px; }
  .pbi-cell-sm   .pbi-cell-img { height:103px; }
  .pbi-footer { grid-template-columns:1fr; gap:14px; }
  .pbi-bullets { grid-template-columns:1fr 1fr; }
}

/* Mobile: 768px */
@media(max-width:768px) {
  html { font-size:15px; }
  .section { padding:56px 0; }
  .section-header { margin-bottom:40px; }
  .hero { padding:88px 0 48px; }
  .hero-container { gap:24px; }
  .hero-photo-showcase { width:260px; }
  .hps-main-img { height:320px; }
  .hps-thumbs { gap:8px; }
  .hps-thumb { width:60px; height:60px; }
  .hero-creds { gap:8px; }
  .cred-item { padding:8px 10px; }
  .skills-categories { grid-template-columns:1fr; }
  .featured-skill { padding:22px; }
  .fs-pillars { grid-template-columns:1fr; }
  .big-stats { grid-template-columns:1fr 1fr; gap:10px; }
  .bs-num { font-size:1.8rem; }
  .charts-row-2 { grid-template-columns:1fr; }
  .impact-cards { grid-template-columns:repeat(2,1fr); gap:10px; }
  .work-grid { grid-template-columns:1fr; }
  .work-card-large { grid-column:span 1; }
  .work-card-img img,.work-card-large .work-card-img img { height:200px; }
  /* Work collage 768px — keep full 3-col, scale heights down */
  .wc-grid { grid-template-columns:1fr 1.1fr 1fr; gap:6px; }
  .wc-col { gap:6px; }
  .wc-col-right { display:flex; }  /* keep right column visible */
  .wc-mini-grid { gap:6px; }
  .wc-card-tall .wc-img-box { height:140px; }
  .wc-card-sq   .wc-img-box { height:96px; }
  .wc-card-wide .wc-img-box { height:84px; }
  .wc-card-mini .wc-img-box { height:66px; }
  .wc-badge { padding:18px 7px 7px; gap:4px; }
  .wc-tag { font-size:0.5rem; padding:1px 6px; }
  .wc-name { font-size:0.6rem; }
  .wc-stats { gap:0; padding:12px 10px; }
  .wc-stat { padding:0 10px; }
  .wc-stat-n { font-size:1.1rem; }
  .wc-stat-l { font-size:0.6rem; }
  /* PBI mosaic 768px — keep 2-col layout */
  .pbi-mosaic { grid-template-columns:1.5fr 1fr; gap:6px; }
  .pbi-cell-stack { gap:6px; }
  .pbi-cell-main .pbi-cell-img { height:190px; }
  .pbi-cell-sm   .pbi-cell-img { height:88px; }
  .pbi-footer { grid-template-columns:1fr; gap:12px; padding:14px 16px; }
  .pbi-bullets { grid-template-columns:1fr; }
  .pbi-tags { flex-direction:row; flex-wrap:wrap; gap:6px; }
  .testimonials-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .contact-form-wrap { padding:22px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-brand { grid-column:span 1; }
  .about-pillars { grid-template-columns:1fr; }
  .hero-stats-strip { gap:0; padding:12px 14px; }
  .hs-num { font-size:1.3rem; }
  .hs-divider { margin:0 4px; }
}

/* Small mobile: 480px */
@media(max-width:480px) {
  .container { padding:0 16px; }
  .nav-container { padding:0 16px; }
  .section-title { font-size:1.5rem; }
  .hero-name { font-size:2rem; }
  .hero-cta { flex-direction:column; }
  .btn-primary,.btn-ghost { text-align:center; justify-content:center; }
  .hero-photo-showcase { width:220px; }
  .hps-main-img { height:280px; }
  .hps-thumbs { display:none; }
  .big-stats { grid-template-columns:1fr 1fr; }
  .bs-num { font-size:1.5rem; }
  .impact-cards { grid-template-columns:1fr 1fr; }
  .lang-toggle { display:none; }
  .nav-actions .lang-toggle { display:flex; }
  .hero-creds { flex-direction:column; gap:8px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }
  .tl-card { padding:16px; }
  .fs-pillars { grid-template-columns:1fr; }
  .skills-categories { grid-template-columns:1fr; }
  /* Work collage 480px — keep 3-col, shrink further */
  .wc-grid { grid-template-columns:1fr 1.1fr 1fr; gap:5px; }
  .wc-col { gap:5px; }
  .wc-mini-grid { gap:5px; }
  .wc-card-tall .wc-img-box { height:110px; }
  .wc-card-sq   .wc-img-box { height:74px; }
  .wc-card-wide .wc-img-box { height:66px; }
  .wc-card-mini .wc-img-box { height:50px; }
  .wc-badge { padding:14px 5px 5px; }
  .wc-tag { font-size:0.45rem; padding:1px 5px; }
  .wc-name { display:none; }
  .wc-stats { flex-wrap:wrap; gap:6px; padding:10px; justify-content:center; }
  .wc-stat { flex:1 0 40%; padding:4px 6px; text-align:center; }
  .wc-stat-div { display:none; }
  .wc-stat-n { font-size:1.1rem; }
  /* PBI mosaic 480px — keep 2-col, shrink */
  .pbi-mosaic { grid-template-columns:1.4fr 1fr; gap:5px; }
  .pbi-cell-stack { gap:5px; }
  .pbi-cell-main .pbi-cell-img { height:150px; }
  .pbi-cell-sm   .pbi-cell-img { height:69px; }
  .pbi-cell-label { padding:7px 9px; }
  .pbi-cell-title { font-size:0.7rem; }
  .pbi-cell-sub { font-size:0.58rem; }
  .pbi-live { font-size:0.5rem; padding:1px 6px; }
}