/* ============================================================
   LIM YI HENG — PORTFOLIO  style.css  v3
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --coral:  #FF6B6B;
  --amber:  #FFA94D;
  --mint:   #38D9A9;
  --violet: #845EF7;
  --sky:    #4DABF7;
  --dark:   #0D0D14;
  --dark2:  #13131E;
  --card:   #1A1A28;
  --card2:  #21212F;
  --text:   #E8E6F2;
  --muted:  #787896;
  --bdr:    rgba(255,255,255,0.07);
  --bdr2:   rgba(255,255,255,0.13);
}

html { scroll-behavior: smooth; font-size: 17px; }

body {
  background: var(--dark);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ─── NAV ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.9rem 4rem;
  background: rgba(13,13,20,0.82);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bdr);
  transition: padding 0.3s;
}
nav.scrolled { padding: 0.6rem 4rem; }
.nav-logo { font-family:'Syne',sans-serif; font-weight:800; font-size:1.2rem; color:var(--text); text-decoration:none; }
.nav-logo span { color: var(--coral); }
.nav-links { display:flex; gap:0.15rem; list-style:none; }
.nav-links a { text-decoration:none; color:var(--muted); font-size:0.83rem; font-weight:500; padding:0.35rem 0.7rem; border-radius:8px; transition:color 0.2s,background 0.2s; }
.nav-links a:hover, .nav-links a.active { color:var(--text); background:rgba(255,255,255,0.07); }

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6rem;
  padding: 7rem 5rem 4rem;
  position: relative;
  overflow: hidden;
}

/* dot grid */
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, black, transparent);
}

/* blobs */
.blob { position:absolute; border-radius:50%; filter:blur(100px); pointer-events:none; animation:floatB 14s ease-in-out infinite; }
.b1 { width:520px;height:520px;background:rgba(255,107,107,0.09);top:-130px;right:-60px;animation-delay:0s; }
.b2 { width:400px;height:400px;background:rgba(132,94,247,0.08);bottom:-100px;left:-80px;animation-delay:5s; }
.b3 { width:300px;height:300px;background:rgba(56,217,169,0.06);top:38%;left:44%;animation-delay:10s; }
@keyframes floatB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(18px,-22px)} }

/* hero left */
.hero-left { position:relative;z-index:1; flex:1; max-width:560px; }

.badge {
  display:inline-flex; align-items:center; gap:0.45rem;
  background:rgba(56,217,169,0.07); border:1px solid rgba(56,217,169,0.22);
  border-radius:999px; padding:0.38rem 1rem;
  font-size:0.77rem; color:var(--mint); font-weight:500;
  margin-bottom:1.6rem; animation:fadeUp 0.5s ease both;
}
.badge .dot { width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:blink-dot 2s ease infinite; }
@keyframes blink-dot { 0%,100%{opacity:1} 50%{opacity:0.15} }

.hero-name { animation:fadeUp 0.5s 0.1s ease both; }
.hero-name .greeting { display:block; font-family:'DM Sans',sans-serif; font-size:1.05rem; font-weight:400; color:var(--muted); margin-bottom:0.25rem; }
.hero-name .name {
  display:block;
  font-family:'Syne',sans-serif; font-weight:800;
  font-size: clamp(2.8rem, 4.5vw, 4rem);
  line-height:1.08; letter-spacing:-0.02em;
  color:var(--text);
  white-space: normal;
}

.divider-line { width:38px;height:2px;background:linear-gradient(90deg,var(--coral),transparent);border-radius:2px;margin:1.4rem 0;animation:fadeUp 0.5s 0.15s ease both; }

.tagline {
  font-size:0.97rem; color:var(--muted); min-height:1.6rem; line-height:1.65;
  animation:fadeUp 0.5s 0.2s ease both;
}
.tagline::after { content:'|';color:var(--coral);animation:cur 1s step-end infinite;margin-left:1px; }
@keyframes cur { 0%,100%{opacity:1} 50%{opacity:0} }

.stats { display:flex;gap:2rem;margin-top:1.8rem;animation:fadeUp 0.5s 0.25s ease both; }
.sn { font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;line-height:1;margin-bottom:0.2rem; }
.sl { font-size:0.63rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em; }

.cta { display:flex;gap:0.7rem;margin-top:1.8rem;flex-wrap:wrap;animation:fadeUp 0.5s 0.3s ease both; }
.btn-primary { display:inline-flex;align-items:center;gap:0.4rem;padding:0.78rem 1.6rem;background:var(--coral);color:#fff;border-radius:10px;font-weight:600;font-size:0.88rem;text-decoration:none;box-shadow:0 4px 18px rgba(255,107,107,0.28);transition:transform 0.2s,box-shadow 0.2s,background 0.2s; }
.btn-primary:hover { transform:translateY(-2px);background:#f55;box-shadow:0 8px 28px rgba(255,107,107,0.42); }
.btn-ghost { display:inline-flex;align-items:center;gap:0.4rem;padding:0.78rem 1.6rem;background:transparent;color:var(--text);border:1px solid var(--bdr2);border-radius:10px;font-weight:500;font-size:0.88rem;text-decoration:none;transition:border-color 0.2s,background 0.2s,transform 0.2s; }
.btn-ghost:hover { border-color:rgba(255,255,255,0.22);background:rgba(255,255,255,0.05);transform:translateY(-2px); }

@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* hero right — photo */
.hero-right { position:relative;z-index:1;flex-shrink:0;animation:fadeUp 0.6s 0.2s ease both; }

.pfp-ring {
  width:290px; height:290px; border-radius:50%;
  padding:4px;
  background:linear-gradient(145deg,var(--coral) 0%,var(--amber) 38%,var(--mint) 70%,var(--violet) 100%);
  flex-shrink:0;
}
.pfp-gap { width:100%;height:100%;border-radius:50%;padding:4px;background:var(--dark); }
.pfp-circle { width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--card2); }
.pfp-circle img { width:100%;height:100%;object-fit:cover;object-position:center top;display:block; }

/* scroll hint */
.scroll-hint { position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.45rem;color:var(--muted);font-size:0.62rem;text-transform:uppercase;letter-spacing:0.12em;animation:fadeUp 1s 1s ease both;z-index:1; }
.scroll-line { width:1px;height:34px;background:linear-gradient(to bottom,rgba(255,255,255,0.2),transparent);animation:scrl 1.8s ease infinite; }
@keyframes scrl { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ─── SHARED SECTIONS ─── */
section { padding:6rem 6rem; position:relative; z-index:1; }
.alt { background: var(--dark2); }
.sec-divider { border:none;border-top:1px solid var(--bdr); }

.eyebrow { display:inline-flex;align-items:center;gap:0.5rem;font-size:0.67rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:var(--coral);margin-bottom:0.5rem; }
.eyebrow::before { content:'';width:16px;height:2px;background:var(--coral);border-radius:1px; }

.sec-title { font-family:'Syne',sans-serif;font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;line-height:1.1;letter-spacing:-0.02em;margin-bottom:0.6rem; }
.sec-desc { color:var(--muted);max-width:480px;margin-bottom:2.4rem;line-height:1.75;font-size:0.93rem; }

/* ─── ABOUT ─── */
.about-wrap { display:grid;grid-template-columns:1.1fr 0.9fr;gap:3.5rem;align-items:start; }
.about-text p { color:var(--muted);line-height:1.85;margin-bottom:1rem;font-size:0.93rem; }
.hobby-list { display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:1.2rem; }
.htag { padding:0.28rem 0.82rem;border-radius:8px;font-size:0.77rem;font-weight:500;border:1px solid var(--bdr);color:var(--muted);background:rgba(255,255,255,0.02);transition:all 0.2s;cursor:default; }
.htag:hover { border-color:rgba(255,107,107,0.3);color:var(--coral);background:rgba(255,107,107,0.05); }

.about-card { background:var(--card);border:1px solid var(--bdr);border-radius:18px;padding:1.5rem;position:relative;overflow:hidden; }
.about-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--coral),var(--amber),var(--mint)); }
.info-grid { display:grid;grid-template-columns:1fr 1fr;gap:0.55rem; }
.iitem { background:rgba(255,255,255,0.025);border-radius:11px;padding:0.95rem 1.1rem;border:1px solid var(--bdr);transition:border-color 0.2s; }
.iitem:hover { border-color:var(--bdr2); }
.ilabel { font-size:0.67rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.25rem; }
.ival { font-size:0.95rem;font-weight:600; }

/* ─── SKILLS ─── */
.skill-group { margin-bottom:1.8rem; }
.sg-label { font-size:0.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem; }
.skills-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0.75rem; }
.skill-card { background:var(--card);border:1px solid var(--bdr);border-radius:13px;padding:1rem 1.2rem;display:flex;align-items:center;gap:0.75rem;transition:transform 0.2s,border-color 0.2s;cursor:default; }
.skill-card:hover { transform:translateY(-3px);border-color:var(--bdr2); }
.sk-icon { width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0; }
.sk-name { font-weight:600;font-size:0.95rem;line-height:1.2; }
.sk-lvl { font-size:0.72rem;margin-top:0.1rem; }
.sk-lvl.mint   { color:var(--mint); }
.sk-lvl.amber  { color:var(--amber); }
.sk-lvl.muted  { color:var(--muted); }

/* ─── TIMELINE ─── */
.timeline { position:relative;padding-left:1.8rem;max-width:760px; }
.timeline::before { content:'';position:absolute;left:0;top:8px;bottom:0;width:1px;background:linear-gradient(to bottom,var(--coral),rgba(132,94,247,0.3),transparent); }
.tl-item { position:relative;margin-bottom:1.1rem; }
.tl-dot { position:absolute;left:-1.8rem;top:1.1rem;width:9px;height:9px;border-radius:50%;background:var(--coral);border:2px solid var(--dark2);box-shadow:0 0 8px rgba(255,107,107,0.5);transform:translateX(-3.5px); }
.exp-card { background:var(--card);border:1px solid var(--bdr);border-radius:15px;padding:1.4rem 1.6rem;transition:border-color 0.2s,transform 0.2s; }
.exp-card:hover { border-color:var(--bdr2);transform:translateX(4px); }
.exp-head { display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:0.4rem;margin-bottom:0.3rem; }
.exp-role { font-family:'Syne',sans-serif;font-size:1.08rem;font-weight:700; }
.exp-date { font-size:0.76rem;padding:0.18rem 0.6rem;background:rgba(255,255,255,0.04);border:1px solid var(--bdr);border-radius:6px;color:var(--muted); }
.exp-co   { color:var(--coral);font-size:0.9rem;font-weight:500;margin-bottom:0.6rem; }
.exp-desc { color:var(--muted);font-size:0.92rem;line-height:1.72; }
.exp-tags { display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.7rem; }
.etag { font-size:0.7rem;padding:0.12rem 0.5rem;border-radius:6px;font-weight:600;background:rgba(255,255,255,0.03);border:1px solid var(--bdr);color:var(--muted); }

/* ─── ACTIVITIES ─── */
.act-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.2rem; }
.act-card { background:var(--card);border:1px solid var(--bdr);border-radius:18px;padding:1.7rem;transition:transform 0.25s,border-color 0.2s;position:relative;overflow:hidden; }
.act-card::before { content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(to bottom,var(--coral),var(--violet));opacity:0;transition:opacity 0.2s; }
.act-card:hover { transform:translateY(-5px);border-color:var(--bdr2); }
.act-card:hover::before { opacity:1; }
.act-icon  { font-size:2rem;margin-bottom:0.75rem; }
.act-title { font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;margin-bottom:0.5rem; }
.act-desc  { color:var(--muted);font-size:0.9rem;line-height:1.72; }
.act-badge { display:inline-flex;align-items:center;gap:0.28rem;margin-top:0.85rem;font-size:0.72rem;padding:0.25rem 0.65rem;border-radius:7px;font-weight:600; }

/* Activity gallery — 3 square thumbs */
.act-photos { display:grid;grid-template-columns:repeat(3,1fr);gap:0.35rem;margin-top:0.85rem;border-radius:8px;overflow:hidden; }
.act-photos img { width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center;display:block;cursor:pointer;transition:transform 0.25s,filter 0.2s; }
.act-photos img:hover { transform:scale(1.06);filter:brightness(1.1); }

/* ─── PROJECTS ─── */
.projects-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1.4rem; }

.project-card {
  background:var(--card);border:1px solid var(--bdr);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform 0.25s,box-shadow 0.25s,border-color 0.2s;
  cursor:pointer;
}
.project-card:hover { transform:translateY(-6px);box-shadow:0 22px 55px rgba(0,0,0,0.5);border-color:var(--bdr2); }

/* Video header (autoplay) */
.proj-video { position:relative;height:240px;background:#000;overflow:hidden;flex-shrink:0; }
.proj-video video { width:100%;height:100%;object-fit:cover;display:block; }

/* Carousel header */
.proj-carousel { position:relative;height:240px;overflow:hidden;background:var(--dark);flex-shrink:0; }
.car-track { display:flex;height:100%;width:100%;transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);will-change:transform; }
.car-slide { min-width:100%;max-width:100%;height:100%;flex-shrink:0;overflow:hidden; }
.car-slide img { width:100%;height:100%;object-fit:cover;object-position:center;display:block; }
.car-btn { position:absolute;top:50%;transform:translateY(-50%);background:rgba(13,13,20,0.75);border:1px solid var(--bdr2);color:var(--text);width:32px;height:32px;border-radius:8px;cursor:pointer;font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:background 0.2s;z-index:2;backdrop-filter:blur(6px); }
.car-btn:hover { background:rgba(255,107,107,0.6); }
.car-btn.prev { left:8px; }
.car-btn.next { right:8px; }
.car-dots { position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2; }
.car-dot { width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.3);cursor:pointer;transition:background 0.2s,transform 0.2s; }
.car-dot.active { background:var(--coral);transform:scale(1.35); }

.proj-body { padding:1.4rem 1.5rem;flex:1;display:flex;flex-direction:column; }
.ptags { display:flex;flex-wrap:wrap;gap:0.3rem;margin-bottom:0.65rem; }
.tag { font-size:0.68rem;padding:0.18rem 0.55rem;border-radius:6px;font-weight:700;letter-spacing:0.02em; }
.t-coral  { background:rgba(255,107,107,0.12);color:#FF8A80; }
.t-mint   { background:rgba(56,217,169,0.12);color:var(--mint); }
.t-violet { background:rgba(132,94,247,0.12);color:#B39DDB; }
.t-sky    { background:rgba(77,171,247,0.12);color:var(--sky); }
.t-amber  { background:rgba(255,169,77,0.12);color:var(--amber); }
.proj-title { font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:0.45rem; }
.proj-desc  { color:var(--muted);font-size:0.88rem;line-height:1.72;flex:1; }

/* ─── LIGHTBOX (for project gallery) ─── */
.lb-overlay {
  display:none;position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,0.93);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
}
.lb-overlay.open { display:flex; }
.lb-box { position:relative;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:0.8rem; }
.lb-img-wrap { position:relative;display:flex;align-items:center;justify-content:center; }
.lb-img-wrap img { max-width:88vw;max-height:80vh;border-radius:10px;box-shadow:0 0 80px rgba(0,0,0,0.9);display:block; }
.lb-close { position:absolute;top:-2.5rem;right:0;font-size:1.8rem;color:rgba(255,255,255,0.55);cursor:pointer;line-height:1;transition:color 0.2s; }
.lb-close:hover { color:#fff; }
.lb-nav { position:absolute;top:50%;transform:translateY(-50%);background:rgba(13,13,20,0.8);border:1px solid var(--bdr2);color:var(--text);width:36px;height:36px;border-radius:9px;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:background 0.2s;backdrop-filter:blur(6px); }
.lb-nav:hover { background:rgba(255,107,107,0.65); }
.lb-prev { left:-48px; }
.lb-next { right:-48px; }
.lb-counter { font-size:0.75rem;color:var(--muted); }
.lb-dots { display:flex;gap:5px; }
.lb-dot { width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.25);cursor:pointer;transition:background 0.2s; }
.lb-dot.active { background:var(--coral); }

/* Simple photo lightbox (activities) */
.photo-lb { display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.93);backdrop-filter:blur(4px);align-items:center;justify-content:center; }
.photo-lb.open { display:flex; }
.photo-lb img { max-width:88vw;max-height:88vh;border-radius:12px;box-shadow:0 0 80px rgba(0,0,0,0.9); }
.photo-lb-close { position:absolute;top:1rem;right:1.4rem;font-size:1.9rem;color:rgba(255,255,255,0.55);cursor:pointer;line-height:1;transition:color 0.2s; }
.photo-lb-close:hover { color:#fff; }

/* ─── CERTS ─── */
.certs-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem; }
.cert-card { background:var(--card);border:1px solid var(--bdr);border-radius:17px;overflow:hidden;display:flex;flex-direction:column;transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s; }
.cert-card:hover { transform:translateY(-4px);border-color:var(--bdr2);box-shadow:0 14px 36px rgba(0,0,0,0.4); }
.cert-img { width:100%;height:165px;overflow:hidden;background:var(--dark2);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.cert-img img { width:100%;height:100%;object-fit:contain;object-position:center;display:block;padding:0.6rem;transition:transform 0.35s; }
.cert-card:hover .cert-img img { transform:scale(1.05); }
.cert-body { padding:1.1rem 1.2rem;flex:1;display:flex;flex-direction:column; }
.cert-name   { font-weight:700;font-size:0.95rem;margin-bottom:0.25rem;line-height:1.35; }
.cert-issuer { font-size:0.8rem;color:var(--muted);margin-bottom:0.3rem; }
.cert-meta   { font-size:0.73rem;color:var(--amber);font-weight:600;line-height:1.4;flex:1; }
.cert-link { display:inline-flex;align-items:center;gap:0.28rem;margin-top:0.6rem;font-size:0.78rem;color:var(--coral);text-decoration:none;font-weight:600;transition:gap 0.2s,color 0.2s; }
.cert-link:hover { gap:0.5rem;color:#FF8A80; }

/* ─── CONTACT ─── */
.contact-box { background:var(--card);border:1px solid var(--bdr);border-radius:22px;padding:3.2rem;position:relative;overflow:hidden;text-align:center;max-width:640px;margin:0 auto; }
.contact-box::before { content:'';position:absolute;top:-80px;left:50%;transform:translateX(-50%);width:320px;height:320px;background:radial-gradient(circle,rgba(255,107,107,0.07),transparent 70%);pointer-events:none; }
.contact-title { font-family:'Syne',sans-serif;font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;margin-bottom:0.65rem;letter-spacing:-0.02em; }
.contact-sub   { color:var(--muted);max-width:340px;margin:0 auto 2rem;font-size:0.88rem; }
.contact-links { display:flex;gap:0.65rem;justify-content:center;flex-wrap:wrap; }
.clink { display:inline-flex;align-items:center;gap:0.42rem;padding:0.65rem 1.15rem;border-radius:10px;font-size:0.82rem;font-weight:500;text-decoration:none;border:1px solid var(--bdr);color:var(--text);background:rgba(255,255,255,0.02);transition:all 0.2s; }
.clink:hover { border-color:rgba(255,107,107,0.4);color:var(--coral);background:rgba(255,107,107,0.06);transform:translateY(-2px); }
.clink svg { width:14px;height:14px; }

/* ─── FOOTER ─── */
footer { text-align:center;padding:1.5rem;border-top:1px solid var(--bdr);color:var(--muted);font-size:0.77rem;position:relative;z-index:1; }
.fn { color:var(--coral);font-weight:600; }

/* ─── SCROLL REVEAL ─── */
.reveal { opacity:0;transform:translateY(16px);transition:opacity 0.55s ease,transform 0.55s ease; }
.reveal.in { opacity:1;transform:none; }

/* ─── RESPONSIVE ─── */
@media (max-width:920px) {
  nav { padding:0.8rem 1.4rem; }
  .nav-links { display:none; }
  section { padding:4rem 1.5rem; }

  .hero { flex-direction:column;padding:6.5rem 1.5rem 3.5rem;gap:2.2rem;text-align:center; }
  .hero-left { max-width:100%; }
  .hero-name .name { font-size:clamp(2.2rem,8vw,3rem);white-space:normal; }
  .hero-right { order:-1; }
  .pfp-ring { width:210px;height:210px; }
  .stats { justify-content:center;gap:1.4rem; }
  .cta   { justify-content:center; }
  .divider-line { margin:1.3rem auto; }
  .badge { font-size:0.72rem; }

  .about-wrap { grid-template-columns:1fr;gap:1.8rem; }
  .contact-box { padding:2rem 1.4rem; }
  .lb-prev { left:-36px; }
  .lb-next { right:-36px; }

  .projects-grid { grid-template-columns:1fr; }
  .act-grid { grid-template-columns:1fr; }
  .skills-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}