/* ===================================================================
   MOHD MONISH — PORTFOLIO
   Bright, modern, minimal redesign. Signature motif: the growth line.
=================================================================== */

:root{
  /* canvas */
  --bg:        #FFFFFF;
  --bg-soft:   #F5F8EF;
  --line:      #E6E9DF;

  /* ink */
  --ink:       #0E1014;
  --ink-soft:  #5E6470;

  /* signature accent — "growth" lime */
  --lime:      #CCFD4F;
  --lime-deep: #5C8A00;
  --lime-pale: #EFFFC9;

  --white:     #FFFFFF;

  /* type */
  --f-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --f-sans:    'Plus Jakarta Sans', -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', 'Courier New', monospace;

  --wrap:    1240px;
  --gutter:  clamp(20px, 5vw, 64px);
  --radius:    20px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --shadow:  0 24px 48px -24px rgba(14,16,20,.16);
}

/* ===================== RESET ===================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--ink); color:var(--lime); padding:.7em 1.1em; z-index:1200;
  font-family:var(--f-mono); font-size:.85rem; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; top:0; }

:focus-visible{
  outline:2px solid var(--lime-deep);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ===================== SHARED TYPE ===================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-mono);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 1.1rem;
}
.eyebrow__dot{ width:7px; height:7px; border-radius:50%; background:var(--lime-deep); flex-shrink:0; }

.h2{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  line-height:1.16;
  letter-spacing:-.01em;
  max-width:20ch;
  margin-bottom:2.6rem;
}

/* ===================== NAV ===================== */
.nav{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:.9rem 0;
}
.nav__brand{ display:flex; align-items:center; gap:.7rem; }
.nav__mark{
  width:36px; height:36px; border-radius:10px;
  background:var(--ink); color:var(--lime);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:700; font-size:.86rem;
  flex-shrink:0;
}
.nav__name{ font-family:var(--f-display); font-weight:600; font-size:1.02rem; }
.nav__links{ display:flex; gap:2.1rem; font-weight:600; font-size:.93rem; }
.nav__links a{ position:relative; padding:.3rem 0; transition:color .2s; }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-3px; width:0; height:2px;
  background:var(--lime-deep); transition:width .25s;
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  font-family:var(--f-sans); font-weight:700; font-size:.86rem;
  background:var(--ink); color:var(--white);
  padding:.7rem 1.4rem; border-radius:999px;
  transition:background .2s, color .2s, transform .2s;
  white-space:nowrap;
}
.nav__cta:hover{ background:var(--lime); color:var(--ink); transform:translateY(-2px); }

.nav__resume{
  font-family:var(--f-sans); font-weight:700; font-size:.86rem;
  background:var(--lime); color:var(--ink);
  padding:.7rem 1.4rem; border-radius:999px;
  border:2px solid var(--lime);
  transition:background .2s, color .2s, transform .2s, box-shadow .2s;
  white-space:nowrap;
}
.nav__resume:hover{
  background:var(--lime-deep); color:var(--white); border-color:var(--lime-deep);
  transform:translateY(-2px); box-shadow:0 8px 20px -8px rgba(92,138,0,.45);
}

.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; flex-shrink:0;
}
.nav__toggle span{ height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  .nav__links, .nav__cta, .nav__resume{ display:none; }
  .nav__toggle{ display:flex; }
}

.mobile-nav{
  position:fixed; inset:0; top:65px; z-index:190;
  background:var(--white);
  display:flex; flex-direction:column;
  padding:1.6rem var(--gutter) 2rem;
  opacity:0; transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.mobile-nav.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-nav a{
  font-family:var(--f-display); font-weight:600;
  font-size:1.7rem; padding:.75rem 0;
  border-bottom:1px solid var(--line);
}
.mobile-nav__resume{
  font-family:var(--f-sans) !important; font-weight:700 !important;
  font-size:1rem !important;
  margin-top:1.4rem;
  background:var(--lime); color:var(--ink) !important;
  padding:.9rem 1.6rem !important;
  border-radius:999px; border:none !important;
  text-align:center; display:inline-block;
  align-self:flex-start;
}
@media (min-width:861px){ .mobile-nav{ display:none; } }

/* ===================== HERO ===================== */
.hero{ padding:clamp(3rem,7vw,5rem) 0 0; position:relative; }
.hero__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero__title{
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  line-height:1.1;
  letter-spacing:-.01em;
  max-width:19ch;
  margin-bottom:1.4rem;
}
.hero__title .hl{ position:relative; white-space:nowrap; }
.hero__title .hl::after{
  content:''; position:absolute; left:-3px; right:-3px; bottom:.06em; height:.3em;
  background:var(--lime); border-radius:3px; z-index:-1;
}
.hero__sub{
  font-family:var(--f-sans);
  font-size:clamp(1.02rem, 1.6vw, 1.2rem);
  color:var(--ink-soft);
  max-width:46ch; line-height:1.65;
  margin-bottom:1.8rem;
}
.hero__ctas{ display:flex; gap:.85rem; flex-wrap:wrap; align-items:center; margin-bottom:1.5rem; }

.btn{
  font-family:var(--f-sans); font-weight:700; font-size:.92rem;
  padding:.95rem 1.7rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:transform .25s, background .25s, color .25s, box-shadow .25s, border-color .25s;
}
.btn--primary{ background:var(--ink); color:var(--white); }
.btn--primary:hover{ background:var(--lime); color:var(--ink); transform:translateY(-3px); box-shadow:var(--shadow); }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-3px); }

/* Resume download button — lime accent */
.btn--resume{
  background:var(--lime); color:var(--ink); border:1.5px solid var(--lime);
  font-weight:700;
}
.btn--resume:hover{
  background:var(--lime-deep); color:var(--white); border-color:var(--lime-deep);
  transform:translateY(-3px); box-shadow:var(--shadow);
}

.hero__meta{ font-family:var(--f-mono); font-size:.82rem; color:var(--ink-soft); }

.hero__photo{ position:relative; justify-self:center; width:100%; max-width:380px; }
.hero__photo-shape{
  position:absolute; top:22px; left:22px; width:100%; height:100%;
  background:var(--lime); border-radius:var(--radius-lg); z-index:0;
}
.hero__photo-img{
  position:relative; z-index:1; width:100%; display:block;
  border-radius:var(--radius-lg); box-shadow:var(--shadow);
  aspect-ratio:4/5; object-fit:cover;
}
.hero__badge{
  position:absolute; left:-14px; bottom:-22px; z-index:2;
  background:var(--white); border-radius:999px;
  padding:.7rem 1.15rem .7rem .9rem;
  display:flex; align-items:center; gap:.65rem;
  box-shadow:var(--shadow);
  font-family:var(--f-sans); font-weight:700; font-size:.84rem;
  white-space:nowrap;
}
.hero__badge-dot{ width:9px; height:9px; border-radius:50%; background:var(--lime-deep); position:relative; flex-shrink:0; }
.hero__badge-dot::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
  background:var(--lime-deep); opacity:.45; animation:badgePulse 2.2s ease-out infinite;
}
@keyframes badgePulse{
  0%{ transform:scale(.5); opacity:.5; }
  75%{ transform:scale(1.8); opacity:0; }
  100%{ opacity:0; }
}

.hero__spark{ width:100%; height:auto; display:block; margin-top:clamp(2rem,5vw,3.2rem); }
.hero__spark path{
  fill:none; stroke:var(--lime-deep); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:600; stroke-dashoffset:600;
  animation:drawSpark 1.8s ease forwards .3s;
}
.hero__spark circle{
  fill:var(--lime-deep); opacity:0; animation:fadeDot .4s ease forwards 1.9s;
}
@keyframes drawSpark{ to{ stroke-dashoffset:0; } }
@keyframes fadeDot{ to{ opacity:1; } }

@media (max-width:880px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__photo{ max-width:300px; margin-top:1rem; }
}

/* ===================== STRIP (stat marquee) ===================== */
.strip{
  background:var(--white);
  border-top:2px solid var(--lime);
  border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap;
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
.strip__track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
.strip__set{ display:flex; align-items:center; }
.strip__item{
  font-family:var(--f-mono); font-size:.82rem; font-weight:500;
  padding:.9rem 1.8rem; border-right:1px solid var(--line);
  display:inline-flex; align-items:center; gap:.55rem; color:var(--ink);
}
.strip__item .dot{ width:6px; height:6px; border-radius:50%; background:var(--lime-deep); flex-shrink:0; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===================== ABOUT ===================== */
.about{ padding:clamp(4.5rem,8vw,7.5rem) 0; }
.about__grid{ display:grid; grid-template-columns:.75fr 1.6fr; gap:clamp(2rem,5vw,5rem); }
.about__body p{ font-size:1.06rem; color:var(--ink); max-width:62ch; margin-bottom:1.15rem; line-height:1.75; }
.about__lead{ font-weight:600; font-size:1.22rem; }
@media (max-width:880px){ .about__grid{ grid-template-columns:1fr; } }

/* ===================== STATS ===================== */
.stats{ padding:clamp(4.5rem,8vw,7.5rem) 0; background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.stat{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.3rem 1.9rem; position:relative; overflow:hidden;
  transition:transform .3s, box-shadow .3s;
}
.stat:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.stat__spark{ position:absolute; top:1.6rem; right:1.7rem; width:48px; height:26px; }
.stat__spark path{ fill:none; stroke:var(--lime-deep); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
.stat__value{ font-family:var(--f-display); font-weight:700; font-size:clamp(2.5rem,4.2vw,3.3rem); color:var(--ink); margin-bottom:.5rem; line-height:1; }
.stat__label{ font-size:.96rem; color:var(--ink-soft); max-width:26ch; }
@media (max-width:880px){ .stats__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .stats__grid{ grid-template-columns:1fr; } }

/* ===================== EXPERIENCE ===================== */
.experience{ padding:clamp(4.5rem,8vw,7.5rem) 0; }
.timeline{ margin-top:2.6rem; }
.timeline__item{ display:grid; grid-template-columns:28px 1fr; gap:1.7rem; position:relative; padding-bottom:2.2rem; }
.timeline__rail{ position:relative; display:flex; justify-content:center; }
.timeline__rail::before{
  content:''; position:absolute; top:8px; bottom:-2.2rem; left:50%;
  width:2px; background:var(--line); transform:translateX(-50%);
}
.timeline__item:last-child .timeline__rail::before{ display:none; }
.timeline__dot{
  width:14px; height:14px; border-radius:50%; background:var(--lime);
  border:3px solid var(--white); box-shadow:0 0 0 2px var(--ink);
  margin-top:6px; position:relative; z-index:1;
}
.timeline__content{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.9rem 2.1rem; margin-bottom:.4rem;
  transition:box-shadow .3s, transform .3s;
}
.timeline__content:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.timeline__years{ font-family:var(--f-mono); font-weight:700; font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft); }
.timeline__role{ font-family:var(--f-display); font-weight:600; font-size:1.42rem; margin:.45rem 0 .15rem; }
.timeline__org{ font-weight:500; color:var(--ink-soft); margin-bottom:1.1rem; }
.timeline__content ul{ display:flex; flex-direction:column; gap:.55rem; }
.timeline__content li{ position:relative; padding-left:1.2rem; font-size:.96rem; color:var(--ink); max-width:64ch; }
.timeline__content li::before{
  content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background:var(--lime-deep);
}
@media (max-width:700px){
  .timeline__item{ grid-template-columns:18px 1fr; gap:1rem; }
  .timeline__content{ padding:1.5rem 1.6rem; }
}

/* ===================== SELECTED WORK ===================== */
.work__head{ padding:clamp(4.5rem,8vw,7.5rem) 0 2rem; }

.case{ padding:clamp(3.2rem,6vw,5rem) 0; border-top:1px solid var(--line); }
.case--alt{ background:var(--bg-soft); }

.case__top{ display:grid; grid-template-columns:120px 1fr; gap:2rem; align-items:start; margin-bottom:2.6rem; }
.case__no{
  font-family:var(--f-mono); font-weight:700; line-height:1;
  font-size:clamp(2.6rem,5vw,4.2rem); color:var(--line);
}
@supports (-webkit-text-stroke:1px black){
  .case__no{ color:transparent; -webkit-text-stroke:1.5px var(--line); }
}
.case .eyebrow{ margin-bottom:.6rem; }
.case__title{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.22; margin:.25rem 0 1rem; max-width:28ch; }
.case__meta{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1.3rem; }
.case__desc p{ font-size:1.02rem; color:var(--ink); max-width:62ch; margin-bottom:.9rem; line-height:1.75; }

/* PAR Case Study Labels */
.par-label{
  display:inline-block;
  font-family:var(--f-mono); font-weight:700; font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.28rem .65rem; border-radius:999px;
  margin-right:.55rem; vertical-align:middle;
  position:relative; top:-.1em;
}
.par-label--p{ background:#FFF0F0; color:#C0392B; border:1px solid #FBBFC0; }
.par-label--a{ background:#FFF8E6; color:#B07D00; border:1px solid #F7D98A; }
.par-label--r{ background:var(--lime-pale); color:var(--lime-deep); border:1px solid #C4F06E; }

.case__stats{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.7rem; }
.case__stat{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.9rem 1.25rem; min-width:130px; }
.case--alt .case__stat{ background:var(--white); }
.case__stat b{ display:block; font-family:var(--f-display); font-weight:700; font-size:1.45rem; color:var(--ink); }
.case__stat span{ font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); }
.case__stat--up b{ display:flex; align-items:center; gap:.35rem; }
.case__stat--up b::before{ content:'▲'; font-size:.7rem; color:var(--lime-deep); }

@media (max-width:700px){
  .case__top{ grid-template-columns:1fr; gap:.5rem; }
  .case__no{ font-size:2.1rem; }
}

/* ---- image gallery ---- */
.gallery{ display:grid; gap:1.6rem; }
.gallery--2col{ grid-template-columns:1fr 1fr; }
.shot{ margin:0; }
.shot--wide{ grid-column:1 / -1; }
.shot--app .shot__btn{ max-width:420px; margin:0 auto; }

.shot__btn{
  position:relative; display:block; width:100%; padding:0;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 1px 2px rgba(14,16,20,.04);
  transition:transform .35s ease, box-shadow .35s ease;
}
.shot__btn:hover, .shot__btn:focus-visible{ transform:translateY(-5px); box-shadow:var(--shadow); }
.shot__btn img{ width:100%; height:auto; display:block; }

.shot__chrome{
  display:flex; align-items:center; gap:6px;
  padding:.65rem .85rem; border-bottom:1px solid var(--line); background:var(--bg-soft);
}
.shot__chrome span{ width:9px; height:9px; border-radius:50%; }
.shot__chrome span:nth-child(1){ background:#FF5F57; }
.shot__chrome span:nth-child(2){ background:#FEBC2E; }
.shot__chrome span:nth-child(3){ background:#28C840; }
.shot__url{ margin-left:auto; font-family:var(--f-mono); font-size:.68rem; font-weight:500; color:var(--ink-soft); }

.shot__expand{
  position:absolute; top:14px; right:14px; z-index:2;
  background:var(--lime); color:var(--ink);
  font-family:var(--f-mono); font-size:.68rem; font-weight:700; letter-spacing:.02em;
  padding:.5rem .85rem; border-radius:999px;
  display:flex; align-items:center; gap:.35rem;
  opacity:0; transform:translateY(-6px);
  transition:opacity .25s, transform .25s;
  pointer-events:none;
}
.shot__btn:hover .shot__expand, .shot__btn:focus-visible .shot__expand{ opacity:1; transform:translateY(0); }

.shot figcaption{ margin-top:.85rem; font-family:var(--f-mono); font-size:.78rem; color:var(--ink-soft); }

@media (max-width:700px){
  .gallery--2col{ grid-template-columns:1fr; }
}
@media (max-width:540px){
  .gallery{ grid-template-columns:1fr; }
  .shot--app .shot__btn{ max-width:none; }
}

/* ---- visit card (website design dispatch) ---- */
.visit{
  display:flex; flex-direction:column; gap:.7rem;
  background:var(--ink); color:var(--white);
  border-radius:var(--radius); padding:2.3rem 2.4rem;
  max-width:560px;
  transition:transform .3s, background .3s, color .3s;
}
.visit:hover{ background:var(--lime); color:var(--ink); transform:translateY(-4px); }
.visit__label{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; opacity:.65; }
.visit__url{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.5rem,2.4vw,1.85rem); }
.visit__arrow{ align-self:flex-end; font-size:1.5rem; transition:transform .3s; }
.visit:hover .visit__arrow{ transform:translate(4px,-4px); }

/* ===================== SKILLS & TOOLS ===================== */
.skills{ padding:clamp(4.5rem,8vw,7.5rem) 0; }
.skills__groups{ display:flex; flex-direction:column; gap:1.8rem; }
.skills__group-name{
  display:block; font-family:var(--f-mono); font-size:.76rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-soft); margin-bottom:.95rem;
}
.chip-row{ display:flex; gap:.65rem; flex-wrap:wrap; }
.chip{
  font-family:var(--f-sans); font-weight:600; font-size:.88rem;
  padding:.55rem 1.05rem; border-radius:999px;
  background:var(--bg-soft); border:1px solid var(--line); color:var(--ink);
  transition:background .2s, border-color .2s, transform .2s;
}
.chip:hover{ background:var(--lime-pale); border-color:var(--lime-deep); transform:translateY(-2px); }

/* ===================== FOOTER ===================== */
.footer{
  background:var(--ink); color:var(--white);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  margin-top:clamp(2rem,5vw,4rem);
  padding:clamp(4rem,8vw,6rem) 0 0;
}
.footer__grid{
  display:grid; grid-template-columns:1.5fr 1fr; gap:3rem;
  padding-bottom:3.4rem; border-bottom:1px solid rgba(255,255,255,.14);
}
.footer__headline{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.8rem); max-width:17ch; margin-bottom:1.6rem;
}
.footer__email{
  font-family:var(--f-mono); font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--lime); border-bottom:2px solid var(--lime); padding-bottom:.2rem; display:inline-block;
}
.footer__details{
  display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.5rem;
  font-size:.88rem; color:rgba(255,255,255,.6);
}
.footer__nav{ display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; font-weight:600; font-size:.96rem; }
.footer__nav a{ transition:color .2s; }
.footer__nav a:hover{ color:var(--lime); }
.footer__resume{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:.6rem;
  background:var(--lime); color:var(--ink) !important;
  font-weight:700; font-size:.88rem;
  padding:.75rem 1.4rem; border-radius:999px;
  transition:background .2s, color .2s, transform .2s, box-shadow .2s;
}
.footer__resume:hover{
  background:var(--lime-deep); color:var(--white) !important;
  transform:translateY(-2px); box-shadow:0 8px 20px -8px rgba(92,138,0,.6);
}
.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  padding:1.5rem 0; font-family:var(--f-mono); font-size:.72rem; color:rgba(255,255,255,.45);
}
@media (max-width:700px){ .footer__grid{ grid-template-columns:1fr; } }

/* ===================== LIGHTBOX ===================== */
.lightbox{
  position:fixed; inset:0; background:rgba(10,11,14,.96);
  z-index:1000; display:none; flex-direction:column;
  padding:clamp(1rem,3vw,2rem);
}
.lightbox.is-open{ display:flex; }
.lightbox__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:1rem;
}
.lightbox__caption{ font-family:var(--f-sans); font-size:.92rem; color:rgba(255,255,255,.85); max-width:60ch; }
.lightbox__actions{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
.lightbox__btn{
  font-family:var(--f-mono); font-size:.9rem; font-weight:600; color:var(--white);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:999px;
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, color .2s;
}
.lightbox__btn:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.lightbox__btn--link{ width:auto; padding:0 1.1rem; gap:.4rem; font-family:var(--f-sans); font-size:.82rem; }
.lightbox__zoom{ font-family:var(--f-mono); font-size:.78rem; color:rgba(255,255,255,.7); min-width:48px; text-align:center; }

.lightbox__viewport{
  flex:1; position:relative; overflow:hidden; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.02);
}
.lightbox__viewport img{
  max-width:100%; max-height:100%; object-fit:contain;
  cursor:zoom-in; user-select:none; -webkit-user-drag:none;
}
.lightbox__viewport.is-zoomed img{ cursor:grab; }
.lightbox__viewport.is-dragging img{ cursor:grabbing; }

@media (max-width:700px){
  .lightbox__bar{ flex-direction:column; align-items:flex-start; }
}

/* ===================== REVEAL ANIMATION ===================== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .strip__track{ animation:none; }
  .hero__spark path{ animation:none; stroke-dashoffset:0; }
  .hero__spark circle{ animation:none; opacity:1; }
  .hero__badge-dot::after{ animation:none; opacity:0; }
  html{ scroll-behavior:auto; }
  .shot__btn{ transition:none; }
}