/* ============================================================
   MIRAJ AHMED — PORTFOLIO v5 "gallery"
   Plain HTML/CSS. Zero dependencies. Built to load fast.
   Shared chrome (header/footer/nav/data-label) is reused by
   the case-study pages. Portfolio card styles are scoped under
   .grid so they never collide with case-page content cards.
   ============================================================ */

:root{
  --bg:#faf5ec; --bg-2:#f3ead9; --surface:#fffdf8; --surface-2:#fbf6ec;
  --ink:#1c1812; --muted:#6b6253; --line:#e8dfce; --line-soft:#efe7d6;
  --accent:#ff5c1c; --accent-ink:#d8470b; --accent-soft:rgba(255,92,28,.09);
  --accent-rgb:255,92,28;
  --st-yellow:#ffd43b; --st-blue:#74c0fc; --st-pink:#faa2c1; --st-green:#69db7c; --st-violet:#b197fc;
  --shadow:0 1px 2px rgba(28,24,18,.05), 0 10px 28px rgba(28,24,18,.08);
  --shadow-lift:0 4px 10px rgba(28,24,18,.09), 0 24px 54px rgba(28,24,18,.17);
  --ring:0 0 0 3px var(--accent-soft);
  --radius:22px; --radius-sm:14px;
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-hand:"Caveat",cursive;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
[data-theme="dark"]{
  --bg:#14100a; --bg-2:#1b160e; --surface:#211c14; --surface-2:#191309;
  --ink:#f6efe2; --muted:#a89c87; --line:#352d20; --line-soft:#2a2318;
  --accent:#ff7a3d; --accent-ink:#ff9663; --accent-soft:rgba(255,122,61,.12);
  --accent-rgb:255,122,61;
  --st-yellow:#e6bc2f; --st-blue:#5aa9e6; --st-pink:#e487a9; --st-green:#4cba66; --st-violet:#9a7ff0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
  --shadow-lift:0 4px 8px rgba(0,0,0,.5), 0 24px 54px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:84px}
body{
  margin:0; font-family:var(--font-body); font-size:16px; line-height:1.7;
  color:var(--muted); background:var(--bg); -webkit-font-smoothing:antialiased;
  overflow-x:hidden; transition:background-color .3s, color .3s;
}
img{max-width:100%; display:block}
a{color:var(--accent-ink); text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); line-height:1.08; margin:0 0 .5em; letter-spacing:-.02em}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:8px}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
section{padding:104px 0; position:relative}

.data-label{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em;
  text-transform:lowercase; color:var(--accent-ink);
  display:inline-flex; align-items:center; gap:12px; margin:0 0 16px;
}
.data-label::before{content:""; height:1px; width:34px; background:var(--accent); opacity:.55}
.section-head{position:relative; margin-bottom:52px}
.section-head h2{font-size:clamp(32px,4.6vw,54px); font-weight:800; margin:0 0 10px}
.section-head p{margin:0; max-width:56ch; font-size:17px}
.hand{font-family:var(--font-hand); font-size:23px; color:var(--accent-ink); transform:rotate(-3deg); display:inline-block}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}

/* ---------- header (shared with case pages) ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.site-header.scrolled{border-bottom-color:var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.logo{font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--ink); letter-spacing:-.02em}
.logo span{color:var(--accent)}
.nav{display:flex; align-items:center; gap:2px}
.nav a{
  font-size:14.5px; font-weight:500; color:var(--muted); padding:8px 14px;
  border-radius:999px; transition:color .2s, background .2s;
}
.nav a:hover{color:var(--ink); background:var(--accent-soft)}
.icon-btn,.theme-toggle{
  width:38px; height:38px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; font-size:16px; transition:border-color .2s, transform .3s;
}
.icon-btn:hover,.theme-toggle:hover{border-color:var(--accent)}
.theme-toggle:hover{transform:rotate(40deg)}
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:inline}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
.nav .theme-toggle{margin-left:8px}
.mobile-controls{display:none; align-items:center; gap:8px}
.menu-btn span{position:relative; width:16px; height:2px; background:currentColor; border-radius:2px; transition:transform .3s, opacity .2s}
.menu-btn span::before,.menu-btn span::after{content:""; position:absolute; left:0; width:16px; height:2px; background:currentColor; border-radius:2px; transition:transform .3s, top .3s}
.menu-btn span::before{top:-5px} .menu-btn span::after{top:5px}
body.menu-open .menu-btn span{background:transparent}
body.menu-open .menu-btn span::before{top:0; transform:rotate(45deg)}
body.menu-open .menu-btn span::after{top:0; transform:rotate(-45deg)}

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:68px 0 auto 0; z-index:99; background:var(--surface);
  border-bottom:1px solid var(--line); padding:12px 24px 22px;
  transform:translateY(-14px); opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .22s;
}
body.menu-open .mobile-nav{transform:none; opacity:1; pointer-events:auto}
.mobile-nav a{display:block; padding:13px 8px; font-family:var(--font-display); font-weight:700;
  font-size:20px; color:var(--ink); border-bottom:1px solid var(--line-soft)}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav a span{font-family:var(--font-mono); font-size:12px; color:var(--accent-ink); margin-right:12px}

/* ---------- hero ---------- */
.hero{padding:76px 0 112px; overflow:hidden}
.hero::after{content:""; position:absolute; left:-4%; right:-4%; bottom:0; height:9px;
  background:var(--accent); transform:skewY(-1deg); transform-origin:left; opacity:.92}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:center}
.aurora{position:absolute; inset:-30% -10% auto -10%; height:150%; z-index:-1; filter:blur(60px); opacity:.55; pointer-events:none}
.aurora b{position:absolute; border-radius:50%; mix-blend-mode:multiply; animation:drift 18s ease-in-out infinite alternate}
[data-theme="dark"] .aurora b{mix-blend-mode:screen}
.aurora b:nth-child(1){width:340px; height:340px; left:6%; top:8%; background:radial-gradient(circle,var(--accent),transparent 68%)}
.aurora b:nth-child(2){width:300px; height:300px; right:18%; top:2%; background:radial-gradient(circle,var(--st-blue),transparent 68%); animation-delay:-6s}
.aurora b:nth-child(3){width:260px; height:260px; left:38%; bottom:0; background:radial-gradient(circle,var(--st-yellow),transparent 68%); animation-delay:-11s}
@keyframes drift{to{transform:translate3d(40px,-26px,0) scale(1.12)}}

.hero-copy .data-label{margin-bottom:20px}
.name-row{position:relative; display:inline-block}
.hero h1{font-size:clamp(46px,7.4vw,88px); font-weight:800; margin:0 0 6px; letter-spacing:-.03em}
.hero h1 .dot{color:var(--accent)}
.squiggle{display:block; width:min(340px,72%); height:16px; margin-top:-2px}
.squiggle path{fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:640; stroke-dashoffset:640; animation:draw 1.1s .5s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.intro{font-size:19px; margin:18px 0 26px; max-width:44ch}
.intro b{color:var(--ink)}
.tag-accent{color:var(--accent-ink); font-weight:600}

.hero-links{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:38px}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px 9px 13px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  color:var(--ink); font-size:14px; font-weight:500;
  transition:transform .18s, border-color .18s, box-shadow .18s, color .18s;
}
.chip svg{width:15px; height:15px; fill:currentColor}
.chip:hover{transform:translateY(-2px); border-color:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow)}

.kpis{display:flex; gap:34px; flex-wrap:wrap}
.kpi .num{font-family:var(--font-display); font-weight:800; font-size:38px; color:var(--ink); line-height:1; letter-spacing:-.02em}
.kpi .num em{color:var(--accent); font-style:normal}
.kpi .lbl{font-size:12.5px; color:var(--muted); margin-top:6px; letter-spacing:.02em}

/* live panel */
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lift); padding:22px; position:relative; will-change:transform; transition:transform .25s ease;
}
.panel::before,.panel::after{
  content:""; position:absolute; top:-9px; width:64px; height:20px; border-radius:5px;
  background:color-mix(in srgb,var(--st-yellow) 88%, #fff); box-shadow:0 2px 6px rgba(28,24,18,.15);
}
.panel::before{left:24px; transform:rotate(-6deg)}
.panel::after{right:24px; transform:rotate(5deg); background:color-mix(in srgb,var(--st-pink) 88%, #fff)}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.panel-title{font-family:var(--font-mono); font-size:12px; color:var(--muted)}
.panel-title b{color:var(--st-green); font-weight:500}
.panel-dots{display:flex; gap:6px}
.panel-dots i{width:9px; height:9px; border-radius:50%; background:var(--line)}
.panel-dots i:first-child{background:var(--accent)}
.bars{display:flex; align-items:flex-end; gap:9px; height:112px; margin-bottom:16px}
.bars i{flex:1; height:var(--h); border-radius:6px 6px 3px 3px; transform-origin:bottom;
  background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 55%, transparent));
  animation:grow .8s calc(.25s + var(--d)) cubic-bezier(.2,.8,.2,1) both}
.bars i:nth-child(even){background:linear-gradient(var(--st-blue),color-mix(in srgb,var(--st-blue) 45%, transparent))}
@keyframes grow{from{transform:scaleY(0)}}
.spark{position:relative; margin-bottom:14px}
.spark svg{width:100%; height:42px; overflow:visible}
.spark path{fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:420; stroke-dashoffset:420; animation:draw 1.3s 1s ease forwards}
.spark circle{fill:var(--accent); opacity:0; animation:pop .3s 2.1s forwards}
@keyframes pop{to{opacity:1}}
.delta{position:absolute; right:0; top:-4px; font-family:var(--font-hand); font-size:19px; color:var(--st-green)}
.legend{display:flex; gap:8px; flex-wrap:wrap}
.legend span{font-family:var(--font-mono); font-size:11px; padding:4px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink)}

/* strained doodle-boy hanging off the panel */
.doodle-boy{position:absolute; top:calc(100% + 2px); right:22px; width:104px; height:auto; overflow:visible;
  pointer-events:none; transform-origin:50% 92%; animation:strain .38s ease-in-out infinite alternate}
@keyframes strain{from{transform:rotate(-1.6deg) translateY(0)}to{transform:rotate(1.4deg) translateY(1.5px)}}
.kid .sweat{stroke:var(--accent); stroke-width:2; opacity:0; fill:none}
.kid .s1{animation:sweat 1.6s ease-in-out infinite}
.kid .s2{animation:sweat 1.6s ease-in-out .7s infinite}
@keyframes sweat{0%,100%{opacity:0; transform:translateY(0)}45%{opacity:1; transform:translateY(4px)}}
.kid .eye-squeeze{fill:none; stroke:#1a1a1a; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.strain-label{position:absolute; top:calc(100% + 46px); right:126px; font-size:21px; white-space:nowrap;
  transform:rotate(-5deg); pointer-events:none; font-family:var(--font-hand); color:var(--accent-ink)}
@media (max-width:600px){ .doodle-boy{width:84px; right:14px} .strain-label{font-size:18px; right:104px; top:calc(100% + 38px)} }

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line); padding:16px 0; overflow:hidden; background:var(--surface-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; gap:44px; width:max-content; animation:scroll 26s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--font-display); font-weight:700; font-size:24px; color:var(--ink);
  opacity:.72; display:inline-flex; align-items:center; gap:44px; white-space:nowrap}
.marquee-track span::after{content:"✦"; color:var(--accent); font-size:14px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:52px; align-items:start}
.about-photo{position:relative; max-width:340px; transform:rotate(-2deg);
  background:var(--surface); border:1.5px solid var(--ink); border-radius:14px; padding:12px 12px 16px; box-shadow:var(--shadow)}
.about-photo img{width:100%; height:auto; object-fit:contain; border-radius:8px}
.about-photo::before,.about-photo::after{content:""; position:absolute; width:84px; height:24px;
  background:rgba(var(--accent-rgb),.28); border:1px dashed rgba(var(--accent-rgb),.45)}
.about-photo::before{top:-12px; left:-22px; transform:rotate(-35deg)}
.about-photo::after{bottom:-10px; right:-22px; transform:rotate(-32deg)}
.about-photo .mascot{left:-58px; bottom:-18px}
.qa{margin-bottom:28px}
.qa h3{font-size:22px; margin-bottom:8px}
.qa h3 .q{color:var(--accent)}
.qa p{margin:0}
.qa p b{color:var(--ink)}
.skills{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.skill{font-family:var(--font-mono); padding:6px 14px; border:1.5px solid var(--ink); border-radius:999px;
  background:var(--surface); font-size:13px; color:var(--ink); transition:transform .15s, background .15s}
.skill:hover{transform:rotate(-2deg) translateY(-2px); background:var(--accent-soft)}

/* ---------- resume ---------- */
.resume-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px}
.resume-col h3{font-size:22px; font-weight:800; margin-bottom:28px; padding-bottom:12px; border-bottom:1.5px solid var(--ink)}
.resume-item{position:relative; padding:0 0 34px 30px; border-left:1.5px dashed var(--line)}
.resume-item:last-child{padding-bottom:0}
.resume-item::before{content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2.5px solid var(--accent); transition:background .2s, box-shadow .2s}
.resume-item:hover::before{background:var(--accent); box-shadow:0 0 0 5px rgba(var(--accent-rgb),.18)}
.resume-item h4{font-size:17.5px; margin-bottom:4px}
.resume-item .when{font-family:var(--font-mono); font-size:12.5px; color:var(--accent-ink); display:block; margin-bottom:4px}
.resume-item .where{color:var(--ink); font-weight:500; font-size:14.5px; display:block; margin-bottom:8px}
.resume-item p,.resume-item ul{font-size:14.5px; margin:0 0 8px}
.resume-item ul{padding-left:18px}
.resume-item li{margin-bottom:4px}
.doc-link{font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px}
@media (max-width:860px){.resume-grid{grid-template-columns:1fr; gap:40px}}

/* ---------- filters ---------- */
.filters{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px}
.filters button{
  font-family:var(--font-mono); font-size:13px; padding:9px 20px; border-radius:999px;
  border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); cursor:pointer;
  box-shadow:3px 3px 0 var(--ink); transition:all .15s; display:inline-flex; align-items:center; gap:6px;
}
.filters button:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--accent)}
.filters button.active{background:var(--accent); color:#fff; transform:rotate(-2deg); box-shadow:3px 3px 0 var(--ink)}
.filters .count{font-size:11px; opacity:.65}
.filters button.active .count{opacity:.85}

/* ---------- grid + portfolio cards (SCOPED so case-page .card is untouched) ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid .card{
  position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow); transition:transform .25s, box-shadow .25s, border-color .25s;
  will-change:transform;
}
.grid .card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb,var(--accent) 40%, var(--line))}
.grid .card .thumb{aspect-ratio:16/10; position:relative; overflow:hidden; background:var(--surface-2)}
.grid .card .thumb img{position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px);
  object-fit:contain; object-position:center; transition:transform .4s}
.grid .card:hover .thumb img{transform:scale(1.03)}
.grid .card .body{padding:16px 20px 20px}
.grid .card .tag{display:inline-block; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 11px; border:1.5px solid #1a1a1a; border-radius:999px;
  background:var(--st-yellow); color:#1a1a1a; margin-bottom:10px; transform:rotate(-2deg)}
.grid .project-item[data-cat="python"] .tag{background:var(--st-blue)}
.grid .project-item[data-cat="tableau"] .tag{background:var(--st-pink)}
.grid .project-item[data-cat="powerbi"] .tag{background:var(--st-green)}
.grid .project-item[data-cat="academic"] .tag{background:var(--st-yellow)}
#certs .grid .card .tag{background:var(--st-blue); transform:rotate(1.5deg)}
.grid .card h4{font-size:16.5px; font-weight:700; margin:0 0 3px; color:var(--ink)}
.grid .card .sub{font-size:13px; margin:0; color:var(--muted)}
.grid .card .go{position:absolute; inset:0; z-index:3}
.grid .card.hide{display:none}
/* gradient placeholder shown under each image (covers a missing/slow image gracefully) */
.thumb.art{background:linear-gradient(135deg,var(--accent),var(--st-pink))}
.thumb.a1{background:linear-gradient(135deg,var(--accent),var(--st-pink))}
.thumb.a2{background:linear-gradient(135deg,var(--st-blue),var(--st-violet))}
.thumb.a3{background:linear-gradient(135deg,var(--st-green),var(--st-blue))}
.thumb.a4{background:linear-gradient(135deg,var(--st-yellow),var(--accent))}
.thumb.a5{background:linear-gradient(135deg,var(--st-violet),var(--accent))}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start}
.info{display:flex; flex-direction:column; gap:14px; margin-top:8px}
.info-card{display:flex; gap:14px; align-items:center; padding:16px 18px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface)}
.info-card .glyph{font-size:22px; width:44px; height:44px; display:grid; place-items:center; background:var(--accent-soft); border-radius:12px}
.info-card h4{margin:0 0 1px; font-size:15px}
.info-card p{margin:0; font-size:14px}
.form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form input,.form textarea{
  font-family:var(--font-body); font-size:15px; padding:13px 15px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); width:100%; transition:border-color .2s, box-shadow .2s;
}
.form input:focus,.form textarea:focus{border-color:var(--accent); box-shadow:var(--ring)}
.form .full{grid-column:1/-1}
.form button{
  grid-column:1/-1; font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--bg);
  background:var(--ink); border:0; border-radius:var(--radius-sm); padding:14px; cursor:pointer; transition:transform .18s, background .2s;
}
.form button:hover{transform:translateY(-2px); background:var(--accent)}

/* ---------- footer (shared with case pages) ---------- */
.site-footer{border-top:1px solid var(--line); padding:56px 0 40px; text-align:center; position:relative; overflow:visible}
.big-bye{font-family:var(--font-display); font-weight:800; font-size:clamp(40px,9vw,104px); color:var(--ink); margin:0 0 8px; letter-spacing:-.03em}
.big-bye em{color:var(--accent); font-style:normal}
.socials{display:flex; justify-content:center; gap:12px; margin:18px 0}
.socials a{width:42px; height:42px; border:1px solid var(--line); border-radius:999px; display:grid;
  place-items:center; color:var(--ink); background:var(--surface); transition:transform .18s, border-color .18s, color .18s}
.socials a:hover{transform:translateY(-3px); border-color:var(--accent); color:var(--accent-ink)}
.socials svg{width:17px; height:17px; fill:currentColor}
.copy{font-size:14px; margin:6px 0 2px}
.mono-sign{font-family:var(--font-mono); font-size:12px; color:var(--muted)}

/* ---------- scroll-to-top (shared) ---------- */
.scroll-top{position:fixed; right:22px; bottom:22px; z-index:80; width:46px; height:46px; border-radius:999px;
  background:var(--ink); color:var(--bg); display:grid; place-items:center; font-size:18px; opacity:0;
  transform:translateY(12px) scale(.9); pointer-events:none; transition:all .28s; box-shadow:var(--shadow)}
.scroll-top.show{opacity:1; transform:none; pointer-events:auto}
.scroll-top:hover{background:var(--accent); color:#fff}

/* ---------- image modal (certificate previews) ---------- */
.image-modal{position:fixed; inset:0; z-index:200; display:none; place-items:center; padding:32px;
  background:rgba(10,8,4,.8); backdrop-filter:blur(4px)}
.image-modal.open{display:grid}
.image-modal img{max-width:92vw; max-height:82vh; border-radius:12px; box-shadow:var(--shadow-lift)}
.image-modal .caption{position:absolute; bottom:22px; left:0; right:0; text-align:center; color:#fff; font-size:14px}
.image-modal .close{position:absolute; top:18px; right:22px; width:42px; height:42px; border-radius:999px;
  border:0; background:rgba(255,255,255,.14); color:#fff; font-size:22px; cursor:pointer}
.image-modal .close:hover{background:var(--accent)}

/* ---------- mascot (hand-drawn) ---------- */
.mascot{position:absolute; pointer-events:none; z-index:20}
.mascot .kid{filter:drop-shadow(0 6px 12px rgba(28,24,18,.12)); animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.kid .ln{fill:none; stroke:#1a1a1a; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
[data-theme="dark"] .kid{filter:drop-shadow(0 0 2px rgba(255,255,255,.85)) drop-shadow(0 0 8px rgba(255,255,255,.35))}
.kid .skin{fill:#f8d0b0} .kid .hair{fill:#1a1a1a; stroke:#1a1a1a}
.kid .shirt{fill:var(--accent); stroke:#1a1a1a; stroke-width:2.5}
.kid .watch{fill:#111; stroke:#1a1a1a; stroke-width:1.5}
.kid .cheek{fill:#ff8f6b; opacity:.6; stroke:none}
.kid .eye{fill:#1a1a1a; stroke:none; transform-origin:center; animation:blink 5s infinite}
.kid .glint{fill:#fff; stroke:none} .kid .smile{stroke-width:3; stroke:#1a1a1a}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.k-wave{transform-origin:99px 84px; animation:wave 2.4s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(16deg)}50%{transform:rotate(-6deg)}75%{transform:rotate(12deg)}}
.kid-say{
  position:absolute; left:50%; bottom:100%; translate:-50% -6px; white-space:nowrap;
  font-family:var(--font-hand); font-size:18px; color:var(--ink); background:var(--surface);
  border:2px solid var(--ink); border-radius:14px; padding:5px 12px;
  box-shadow:3px 3px 0 rgba(var(--accent-rgb),.9); rotate:-2deg;
  opacity:0; animation:sayShow .5s ease-out 1s forwards;
}
@keyframes sayShow{to{opacity:1; translate:-50% -11px}}
.kid-say::after{content:""; position:absolute; left:50%; top:100%; translate:-50% -2px; width:10px; height:10px;
  background:var(--surface); border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink); rotate:45deg}

/* ---------- kidPeek (pops up behind hovered project/cert cards) ---------- */
#kidPeek{position:fixed; left:0; top:0; width:70px; z-index:60; opacity:0; transform:translateY(16px) scale(.55);
  transform-origin:bottom center; transition:opacity .26s ease, transform .28s cubic-bezier(.2,.9,.3,1.3);
  pointer-events:none; will-change:transform,opacity}
#kidPeek.show{opacity:1; transform:translateY(0) scale(1)}
#kidPeek .kid-say{position:absolute; left:56px; top:-6px; bottom:auto; font-size:19px; font-family:var(--font-hand);
  color:var(--ink); background:var(--surface); border:2px solid var(--ink); border-radius:14px; padding:6px 12px 7px;
  white-space:nowrap; box-shadow:3px 3px 0 rgba(var(--accent-rgb),.9); opacity:1; translate:0; rotate:0; animation:none}
#kidPeek .kid-say::after{left:-8px; bottom:14px; top:auto; translate:0; transform:rotate(135deg); width:12px; height:12px;
  background:var(--surface); border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); rotate:0}
#kidPeek.show .kid{animation:peekwiggle 1.4s ease-in-out .1s infinite; transform-box:fill-box; transform-origin:bottom center}
@keyframes peekwiggle{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

/* ---------- responsive ---------- */
.section-mascot{right:0; bottom:-6px}
@media (max-width:940px){
  .hero .wrap{grid-template-columns:1fr; gap:40px}
  .panel{max-width:460px; margin-inline:auto}
  .about-grid{grid-template-columns:1fr; gap:36px}
  .about-photo{max-width:320px}
  .contact-grid{grid-template-columns:1fr; gap:30px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .hero-mascot,.footer-mascot{display:none}
  /* compact section doodles: small, peeking from top-right above the heading, no bubble */
  .section-mascot{top:-30px; right:2px; bottom:auto}
  .section-mascot svg{width:44px; height:auto}
  .section-mascot .kid-say{display:none}
}
@media (max-width:760px){
  section{padding:76px 0}
  .nav{display:none}
  .mobile-controls{display:flex}
  .hero h1{font-size:clamp(42px,12vw,60px)}
  .about-photo .mascot{left:auto; right:-6px; bottom:-14px}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .kpis{gap:24px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}