:root {
    /* Core palette */
    --bg: #f3f4fb;
    --bg-soft: #eef2ff;
    --bg-elevated: #ffffff;
    --bg-elevated-alt: #f9fafb;

    --fg: #0f172a;
    --text-main: #111827;
    --text-subtle: #4b5563;
    --text-muted: #6b7280;
    --muted: var(--text-muted);

    --accent: #2563eb;
    --accent-2: #22c55e;

    --accent-soft: #bfdbfe;
    --accent-soft-2: #e0f2fe;

    --chip-bg: rgba(255,255,255,0.9);
    --chip-fg: var(--text-main);
    --chip-border: rgba(148,163,184,0.35);

    --border: rgba(15,23,42,0.1);
    --border-strong: rgba(15,23,42,0.2);

    --tag-bg: #e0ecff;
    --tag-border: rgba(37,99,235,0.32);

    --success: #22c55e;

    --ring: rgba(15,23,42,0.16);
    --shadow-soft: 0 10px 22px rgba(15,23,42,0.12);
    --shadow-strong: 0 20px 40px rgba(15,23,42,0.2);
    --shadow-elevated: 0 30px 80px -30px rgba(15,23,42,0.35);

    --radius: 18px;
    --panel: var(--bg-elevated);
    --card: var(--bg-elevated);
    --ringproject: rgba(15,23,42,0.12);
    --accentproject: var(--accent);
    --gap: 28px;
    --pad-y: 12px;
    --pad-x: 18px;
    --edge-fade: 140px;
    --brand: var(--accent);
    --ink: var(--fg);

    /* Hero */
    --hero-blobs-opacity: 0.1;
    --hero-blob-a: radial-gradient(closest-side, rgba(34,211,238,.18), rgba(56,189,248,.10), rgba(217,70,239,.06));
    --hero-blob-b: radial-gradient(closest-side, rgba(99,102,241,.18), rgba(34,211,238,.10), rgba(16,185,129,.08));
    --hero-blob-c: radial-gradient(closest-side, rgba(16,185,129,.16), rgba(56,189,248,.10), rgba(168,85,247,.06));

    --hero-card-bg: rgba(255,255,255,0.92);
    --hero-card-border: var(--border);
    --hero-card-shadow: 0 18px 40px rgba(15,23,42,0.12);
    --hero-cta-bg: rgba(37,99,235,0.08);
    --hero-cta-border: rgba(37,99,235,0.18);
    --hero-cta-bg-hover: rgba(37,99,235,0.12);
    --hero-cta-color: #1e3a8a;

    /* Cursor */
    --cursor-dot: #ffffff;
    --cursor-ring-color: #ffffff;
    --cursor-spark: #ffffff;

    /* Skills */
    --skills-bg1: radial-gradient(1000px 280px at 50% 100%, rgba(166,200,255,.18), transparent 70%);
    --skills-bg2: radial-gradient(1200px 220px at 50% 95%, rgba(166,200,255,.10), transparent 75%);

    /* Projects */
    --project-bg: linear-gradient(180deg, var(--bg-elevated), var(--bg-soft));
    --project-overlay: linear-gradient(180deg, transparent 40%, rgba(100,155,255,.1) 75%, rgba(100,200,255,.3));
    --project-shadow: 0 0 0 1px rgba(148,163,184,.25), 0 20px 40px rgba(15,23,42,.12);
    --project-shadow-hover: 0 0 18px 0 rgba(148,163,184,.5), 0 28px 60px rgba(15,23,42,.22);
    --project-conic: conic-gradient(from 0deg at 50% 50%, transparent 0 75%, rgba(148,163,184,.35) 78%, transparent 82% 100%);

    /* Lightbox */
    --lightbox-backdrop: rgba(15,23,42,0.15);
    --lightbox-left-bg: var(--bg-soft);
    --lightbox-right-bg: linear-gradient(180deg,var(--bg-elevated) 0%,var(--bg-elevated-alt) 100%);
    --lightbox-head-bg: var(--bg-elevated);
    --scrollbar-track: #f3f4f6;
    --scrollbar-thumb: #9ca3af;
    --scrollbar-thumb-hover: #818cf8;

    /* Contact */
    --contact-bg: radial-gradient(circle at top, rgba(37, 99, 235, 0.12), #f3f4fb 55%);
    --contact-kicker-bg: rgba(255, 255, 255, 0.95);
    --contact-kicker-border: rgba(148, 163, 184, 0.6);

    --contact-pill-bg: #eff6ff;
    --contact-pill-border: rgba(148,163,184,0.65);

    --contact-cta-border-gradient: linear-gradient(135deg, rgba(96, 165, 250, 0.5), rgba(52, 211, 153, 0.5));

    /* Image sheen */
    --acf-sheen: radial-gradient(60% 60% at 25% 0%, rgba(255,255,255,.30), transparent 60%);

    /* Overlay / backdrops */
    --overlay-backdrop: rgba(15,23,42,.15);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin:0; }
html:has(#aboutlink:target) {
  scroll-behavior: smooth;
}
body {
    font-family: system-ui, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    background: var(--bg);
    color: var(--fg);
}
.normal-weight { font-weight:400; }

.underlined {
    position:relative; display:inline-block;
}
.underlined::after {
    content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transform-origin:left; transform: scaleX(0); transition: transform 1s cubic-bezier(.2,.8,.2,1);
    border-radius:2px;
}
.underlined.show::after {
    transform: scaleX(1);
}

/* Hero Section CSS Start */

.hero { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; }

.blobs { position: absolute; inset: -10%; filter: blur(64px); opacity: var(--hero-blobs-opacity); pointer-events: none; }
.blob { position: absolute; border-radius: 9999px }
.blob.a {
    left: 6%;  top: 12%; width: 44vmax; height: 44vmax;
    background: var(--hero-blob-a);
}
.blob.b {
    right: 6%; top: 28%; width: 34vmax; height: 34vmax;
    background: var(--hero-blob-b);
}
.blob.c {
    left: 68%; bottom: 0%; width: 26vmax; height: 26vmax; transform: translateX(-50%);
    background: var(--hero-blob-c);
}

canvas { position: absolute; inset: 0; display: block; }

.content {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
    max-width: 1100px; margin: 0 20px; padding: clamp(7px,5vw,64px); text-align: center;
    background: var(--hero-card-bg);
    border-radius: 30px;
    border: 1px solid var(--hero-card-border);
    box-shadow: var(--hero-card-shadow);
    color: var(--fg);
}
.hero-title { font-size: clamp(28px, 4vw, 56px); line-height: 1.05; letter-spacing: .3px; margin: 0 0 16px; color: var(--text-main); }
.hero-lead { font-size: clamp(14px, 1.6vw, 18px); opacity: .9; margin: 0 0 28px; color: var(--muted); }
.cta {
    display: inline-block; padding: 12px 18px; border-radius: 14px;
    background: var(--hero-cta-bg);
    color: var(--hero-cta-color);
    border: 1px solid var(--hero-cta-border);
    text-decoration: none; backdrop-filter: blur(4px);
}

@keyframes blob { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%,-3%,0) scale(1.05); } }

@media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } }

/* Hero Section CSS End */

/* Custom Cursor CSS Start */

a,button,[data-cursor="link"]{position:relative;z-index:1}

/*.cursor{*/
/*    pointer-events:none;*/
/*    position:fixed;inset:0;z-index:9999;*/
/*    mix-blend-mode:difference;*/
/*}*/
/*.cursor{opacity:0;transition:opacity 1s ease}*/
/*.cursor.is-visible{opacity:1}*/

/*.cursor__dot,.cursor__ring{*/
/*    position:absolute;left:0;top:0;*/
/*    transform:translate(-50%,-50%);*/
/*    will-change:transform,opacity;*/
/*    backface-visibility:hidden;*/
/*}*/

/*.cursor__dot{*/
/*    width:12px;height:12px;border-radius:50%;*/
/*    background:var(--cursor-dot);*/
/*}*/

/*.cursor__ring{*/
/*    border-radius:50%;*/
/*    border:2px solid var(--cursor-ring-color);*/
/*}*/
  
/*.cursor__ring.r1{width:42px;height:42px;opacity:.18}*/
/*.cursor__ring.r2{width:64px;height:64px;opacity:.12}*/

/*.cursor.is-link .cursor__ring{transform:translate(-50%,-50%) scale(1.15)}*/
/*.cursor.is-link .cursor__dot{transform:translate(-50%,-50%) scale(.9)}*/

/*.cursor.is-big .cursor__dot{width:60px;height:60px}*/
/*.cursor.is-big .cursor__ring.r1{width:100px;height:100px}*/
/*.cursor.is-big .cursor__ring.r2{width:120px;height:120px}*/

/*.cursor__spark{*/
/*    position:absolute;left:0;top:0;*/
/*    will-change:transform,opacity;*/
/*    width:4px;height:4px;border-radius:50%;*/
/*    background:var(--cursor-spark);*/
/*}*/

/*@media (hover:none),(pointer:coarse){*/
/*    .cursor{display:none} *{cursor:auto}*/
/*}*/

/* Custom Cursor CSS End */

/* About Section CSS Start */

.about{
    display:grid; grid-template-columns: 420px 1fr; gap:48px; align-items:center;
    max-width:1000px; margin:70px auto; padding:0 20px;
}
.panel{
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-elevated-alt));
    border:1px solid var(--border);
    border-radius:24px; padding:28px; backdrop-filter: blur(8px);
    box-shadow:0 0 15px 0 var(--ring);
}

/* Photo */
.photo-wrap{ position:relative; aspect-ratio:4/5; border-radius:24px; overflow:hidden }
@keyframes spin { to{ transform: rotate(1turn) } }
.photo{ position:relative; width:100%; height:100%; object-fit:cover; border-radius:16px; transform:translateZ(0); }

/* Headings */
.eyebrow{letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:600; font-size:.8rem}
.about-title{ font-size: clamp(26px, 3vw, 40px); margin:8px 0 20px; line-height:1.1; color:var(--text-main); }
.underline{ position:relative; display:inline-block; }
.underline::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin:left; transform: scaleX(0); transition: transform .7s cubic-bezier(.2,.8,.2,1);
  border-radius:2px;
}
.about:hover .underline::after{ transform: scaleX(1) }

/* Text */
.lead{
    color:var(--text-subtle);
    opacity:.96;
    font-size:1.02rem; margin:10px 0 14px;
}
.mutedp{
    color:var(--text-muted);
    opacity:.9;
    font-size:.98rem;
}

/* Badges */
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 8px}
.badge{
  position:relative;
  background:var(--chip-bg);
  color:var(--chip-fg);
  border:1px solid var(--border);
  padding:9px 14px; border-radius: 8px; font-size:.84rem; font-weight:600;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  overflow:hidden;
}
.badge:hover{
  transform: translateY(-2px);
  box-shadow:0 3px 5px -2px var(--ring);
  border-color:var(--border-strong);
  background:var(--accent-soft-2);
}
.badge:hover::after{ opacity:1; }

/* Actions (centered, two rows) */
.actions{ display:flex; flex-direction:column; gap:16px; margin-top:22px; align-items:center; }
.row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Buttons with underline hover (no glow) */
.btn, .icon-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px;
  text-decoration:none; border:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg-elevated), var(--bg-elevated-alt));
  color:var(--text-main); font-weight:700; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn.primary, .primary{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:var(--bg-elevated); border-color:transparent; border:none;font-weight: 600;
}
.btn:hover, .icon-btn:hover{
  box-shadow:var(--shadow-soft);
  transform:translateY(-1px);
}
.btn::after, .icon-btn::after{
  content:""; position:absolute; left:12px; right:12px; bottom:8px; height:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin:left; transform: scaleX(0); transition: transform .5s cubic-bezier(.2,.8,.2,1);
  border-radius:2px;
}
.btn.primary::after, .primary::after {
  background: linear-gradient(90deg, var(--bg-elevated), var(--bg-elevated-alt));
}
.btn:hover::after, .icon-btn:hover::after{ transform: scaleX(1); }
.icon{ width:18px; height:18px; }

@media (max-width: 900px){
  .about{ grid-template-columns:1fr; }
  .photo-wrap{ max-width:420px; margin:auto }
}

/* About Section CSS End */

/* Skills Section CSS Start */
.skills * { pointer-events: none; }
.skills{
    display:flex; justify-content:center; padding:30px 15px 40px;
    background:
      var(--skills-bg1),
      var(--skills-bg2);
}
.skills__inner{ width:min(1600px, 96vw); }
.carousel{
    position:relative;
    overflow:hidden;
    mask-image: linear-gradient(to right,
    transparent 0, black var(--edge-fade),
    black calc(100% - var(--edge-fade)), transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
    transparent 0, black var(--edge-fade),
    black calc(100% - var(--edge-fade)), transparent 100%);
}
.carousel__track{
    display:flex;
    align-items:center;
    gap:var(--gap);
    will-change: transform;
    transform: translateX(0);
}
.skill{
    flex:0 0 auto;
    display:inline-grid;
    grid-auto-flow: column;
    align-items:center;
    gap:12px;
    padding:var(--pad-y) var(--pad-x);
    background:var(--chip-bg);
    border:1px solid var(--chip-border);
    border-radius:12px;
    color:var(--chip-fg);
    opacity:1;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    user-select:none;
}
.skill:hover{
    transform: translateY(-2px);
    box-shadow:0 0 18px var(--ring);
    background:var(--bg-elevated);
}
.skill img{
    width:42px; height:42px; display:block;
    filter:none;
}
.skill__name{ letter-spacing:.2px; white-space:nowrap; }

@media (max-width:600px){
    :root{ --gap: 8px; --edge-fade: 70px; }
    .skill img{ width:24px; height:24px; }
    .skill{ padding:8px; }
}

/* Skills Section CSS End */

/* Experience Section CSS Start */

.experience {
    padding:40px 20px;max-width:1050px;margin:0 auto;display:flex;flex-direction:column;gap:22px;
}
.section-title{font-size:28px;font-weight:700;margin-bottom:24px;color:var(--text-main);}
.exp-head{text-align:center;margin-bottom:10px}
.exp-row{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:start}
.exp-date{padding-top:18px;text-align:right;color:var(--muted);font-size:.95rem}
@media(max-width:720px){.exp-row{grid-template-columns:1fr}.exp-date{text-align:left;padding-top:0}}
.exp-card{
    position:relative; overflow:hidden;
    background:linear-gradient(180deg,var(--bg-elevated),var(--bg-elevated-alt));
    border:1px solid var(--border); border-radius:14px; padding:22px;
    transform:translateZ(0);
    opacity:.98;
    transition:opacity .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.exp-card::after{
    content:""; position:absolute; inset:-20% -20%;
    opacity:0; pointer-events:none; mix-blend-mode:screen;
    transition:opacity .25s ease;
}
.exp-card:hover{
    opacity:1;
    transform:translateY(-6px);
    border-color:var(--border-strong);
    box-shadow: var(--shadow-strong);
}
.exp-card:hover::after{ opacity:.25; }
.exp-header{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.exp-role{color:var(--text-main);font-weight:600;margin:0;font-size:1.05rem}
.exp-company{color:var(--accent);font-weight:600;text-decoration:none}
.exp-desc,
.exp-desc ul,
.exp-desc ul li {
    color:var(--text-subtle);
    font-size:.86rem;line-height:1.6;margin:10px 0;padding-left: 10px;
}
.exp-desc { margin-bottom: 20px; }
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
    font-size:.78rem;padding:6px 10px;border-radius:20px;
    color:var(--brand);
    background:var(--tag-bg);
    border:1px solid var(--tag-border);
    transform:translateY(12px);
    opacity:0;
    transition:transform .6s cubic-bezier(.19,1,.22,1), opacity .6s ease;
}
.exp-card.show-tags .tag{
    transform:translateY(0);
    opacity:1;
}
.tag:nth-child(1){transition-delay:.1s}
.tag:nth-child(2){transition-delay:.2s}
.tag:nth-child(3){transition-delay:.3s}
.tag:nth-child(4){transition-delay:.4s}
.tag:nth-child(5){transition-delay:.5s}

/* Experience Section CSS End */

/* Education Section CSS Start */

.edu-section{position:relative;padding:20px 25px 40px;}
.edu-inner{max-width:1200px;margin:0 auto;position:relative}

.edu-head{text-align:center;margin-bottom:36px}
.edu-eyebrow{
    display:inline-block;padding:6px 12px;border-radius:999px;margin-bottom: 10px;
    background:linear-gradient(90deg,rgba(37,99,235,.2),transparent);
    color:var(--muted);font-size:13px;letter-spacing:.18em;text-transform:uppercase
}
.edu-eyebrow::before{
    display: inline-block; content: "";width: 6px;height: 6px;border-radius: 999px;background: var(--success);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); vertical-align: middle; margin-right: 10px;
}
.edu-title{
    margin:12px 0 6px;font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.02em;
    background:linear-gradient(90deg,var(--fg),var(--accent) 60%,var(--accent-2) 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent
}
.edu-sub{color:var(--muted);font-size:15px}
.edu-rowwrap{display:flex;gap:32px;justify-content:center;align-items:flex-start;flex-wrap:wrap;}
.edu-item{width:min(520px, 46vw);display:grid;grid-template-rows:auto 1fr;gap:14px;}
.edu-badge{
    display:flex; align-items:center; justify-content:center;
    padding:10px 16px; border-radius:12px;
    background:var(--bg-elevated);
    border:1px solid var(--chip-border); box-shadow:0 4px 16px var(--ring);
    backdrop-filter:blur(8px) saturate(120%); min-height:44px; text-align:center;
    transition:transform .25s ease, background .25s ease, box-shadow .25s ease; width:max-content; margin-inline:auto;
}
.edu-badge:hover{
    transform:translateY(-3px);
    background:var(--accent-soft-2);
    box-shadow:var(--shadow-soft);
}
.edu-badge span{font-weight:700;font-size:14px;letter-spacing:.02em}

.edu-card{
    position:relative; border-radius:var(--radius); border:1px solid var(--border);
    background:linear-gradient(180deg,var(--bg-elevated),var(--bg-elevated-alt));
    box-shadow:var(--shadow-soft); padding:16px 16px 14px; backdrop-filter:blur(10px) saturate(120%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; width:100%;
}
.edu-card::after{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(120deg,transparent 30%,rgba(148,163,184,.28) 48%,transparent 66%);
    transform:translateX(-30%);opacity:0;transition:transform .6s ease,opacity .6s ease;
}
.edu-card:hover{
    transform:translateY(-6px) scale(1.015);
    box-shadow:var(--shadow-strong);
}
.edu-card:hover::after{transform:translateX(20%);opacity:.4}
.edu-row{margin-bottom:6px}
.edu-row > div:first-child { margin-bottom: 20px; }
.edu-chip{
    font-size:11px;padding:4px 8px;border-radius:999px;color:var(--text-main);
    background:var(--accent-soft-2);border:1px solid var(--chip-border);
}
.edu-year{font-weight:700;font-size:12px;color:var(--accent);letter-spacing:.08em}
.edu-degree{font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--text-main)}
.edu-school{color:var(--text-subtle);font-size:15px}
.edu-notes{color:var(--text-muted);font-size:12px;margin-top:6px;line-height:1.5}
.edu-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.edu-tagpill{
    font-size:11px;padding:6px 10px;border-radius:999px;
    color:var(--text-main);border:1px solid var(--chip-border);background:var(--accent-soft);
}
@media(max-width:900px){
    .edu-item{width:min(560px,92vw)}
}

/* Education Section CSS End */

/* Project Section CSS Start */

.portfolio-section{padding:0 4vw 50px}
.container{max-width:1200px;margin-inline:auto}
.section-head{font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:.4px;margin:0 0 1.2rem;color:var(--muted)}
.projects-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows: 160px;gap:var(--gap);margin-top: 50px;}
@media (max-width:1000px){
    .projects-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:680px){
    .projects-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;}
    .project, .project.w2, .project.h2, .project.w2.h2{ grid-column: span 1 !important; grid-row: auto !important; aspect-ratio: 4/3; }
}
.project{grid-column: span 2; grid-row: span 2;}
.project.w2{grid-column: span 4}
.project.h2{grid-row: span 3}
.project.w2.h2{grid-column: span 4; grid-row: span 4}

.project{
    position:relative;display:block;height:100%;border-radius:var(--radius);overflow:hidden;
    background:var(--project-bg);transform-style:preserve-3d;
    box-shadow:var(--project-shadow);
    transition:box-shadow .35s ease, transform .25s ease;isolation:isolate;
}
.project:hover{
    box-shadow:var(--project-shadow-hover);
    transform:translateY(-2px);
}
.project img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:translateZ(0);
    transition:transform .7s cubic-bezier(.2,.6,.2,1), filter .6s ease;
    filter:grayscale(.1) saturate(1.02) brightness(.98) contrast(1.03);
}
.project:hover img{
    transform:scale(1.06) rotateZ(-.4deg);
    filter:grayscale(0) saturate(1.06) brightness(.99) contrast(1.06);
}
.project::after{
    content:"";position:absolute;inset:-60%;
    background:var(--project-conic);
    transform:translateX(-40%) rotate(12deg) scale(1.1);mix-blend-mode:screen;
    opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .9s cubic-bezier(.2,.6,.2,1);
}
.project:hover::after{opacity:1;transform:translateX(40%) rotate(12deg) scale(1.1)}
.overlay{
    position:absolute;inset:0;text-align:center;padding:clamp(.9rem,2.4vw,1.2rem);
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    background:var(--project-overlay);
}
.project-title{
    --lift:14px; margin:0 0 .35rem;font-size: clamp(1rem,1.6vw,1.25rem);
    font-weight:700; letter-spacing:.3px; color:var(--text-main);transform:translateY(14px);
    opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
    position:relative; z-index:2;text-shadow:0 2px 18px var(--bg-elevated);
}
.project:hover .project-title{transform:translateY(0);opacity:1}
.under{
    align-self:center;display:block; height:2px; width:0%;
    background:linear-gradient(90deg,transparent, var(--accent), transparent);
    margin-top:.25rem;filter:drop-shadow(0 0 8px var(--ring));
    transition:width .6s cubic-bezier(.2,.7,.2,1);
}
.project:hover .under{width:92%}

/* Project Section CSS End */

/* Lightbox CSS Start */

.lightbox{
    position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;
    background:var(--lightbox-backdrop);backdrop-filter:saturate(120%) blur(6px);z-index:1000;
    opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .32s ease-out, transform .32s ease-out;
}
.lightbox.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.lightbox[aria-hidden="false"]{display:flex}
.lb-dialog{
    width:min(1100px,96vw);height:min(720px,92vh);background:var(--panel);
    border:1px solid var(--border);border-radius:16px;display:grid;grid-template-columns:52% 48%;
    overflow:hidden;box-shadow:var(--shadow-elevated);
    opacity:0; transform:translateY(20px) scale(.96); transition:opacity .32s ease-out, transform .32s ease-out;
}
.lightbox.is-visible .lb-dialog{ opacity:1; transform:translateY(0) scale(1); }
@media (max-width:900px){.lb-dialog{grid-template-columns:1fr;height:min(92vh,760px)}}
.lb-left{position:relative;background:var(--lightbox-left-bg)}
.slide-stage{position:relative;width:100%;height:100%}
.slide-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.02);transition:opacity .3s ease, transform .3s ease}
.slide-stage img.active{opacity:1;transform:scale(1)}
.nav-btn{
    position:absolute;top:50%;translate:0 -50%;background:var(--bg-elevated);border:1px solid var(--chip-border);
    width:42px;height:42px;border-radius:10px;display:grid;place-items:center;cursor:pointer;user-select:none;
    transition:background .2s ease,border-color .2s ease,transform .2s ease, box-shadow .2s ease;
}
.nav-btn:hover{
    background:var(--accent-soft-2);border-color:var(--accent);
    transform:translateY(-1px);
    box-shadow:var(--shadow-soft);
}
.nav-prev{left:12px}.nav-next{right:12px}
.nav-btn svg{width:22px;height:22px;fill:var(--accent)}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.dot{
    width:8px;height:8px;border-radius:999px;background:var(--scrollbar-thumb);cursor:pointer;
    transition:all .2s ease;border:1px solid var(--chip-border)
}
.dot.active{width:22px;background:var(--accent)}
.lb-right{display:flex;flex-direction:column;min-height:0;background:var(--lightbox-right-bg)}
.lb-head{
    padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;
    background:var(--lightbox-head-bg);
}
.lb-title{margin:0;font-weight:800;font-size:1.1rem;line-height:1.1;color:var(--text-main)}
.lb-close{
    margin-left:auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer;
    border:1px solid var(--border);background:var(--bg-elevated);color:var(--fg);
    transition:background .2s ease,border-color .2s ease,transform .2s ease, box-shadow .2s ease;
}
.lb-close:hover{
    background:var(--accent-soft-2);border-color:var(--accent);
    transform:rotate(90deg);
    box-shadow:var(--shadow-soft);
}
.lb-close svg{pointer-events:none}
.lb-body{
    padding:14px 18px;overflow:auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
.lb-body::-webkit-scrollbar{ width:10px }
.lb-body::-webkit-scrollbar-track{ background:var(--scrollbar-track) }
.lb-body::-webkit-scrollbar-thumb{
    background:var(--scrollbar-thumb);
    border:2px solid var(--scrollbar-track);
    border-radius:8px;
}
.lb-body::-webkit-scrollbar-thumb:hover{ background:var(--scrollbar-thumb-hover) }
.lightbox .tags{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.lightbox .tag{
    background:var(--accent-soft-2); color:var(--accent); border:1px solid var(--border);
    padding:6px 10px; border-radius:8px; font-weight:600; font-size:.82rem;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; cursor:pointer;
}
.lightbox .tag:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px -10px var(--ring);
    border-color:var(--accent);
}
.lb-desc{color:var(--text-subtle);opacity:.96;line-height:1.55}
.lb-meta{margin-top:12px;font-size:.92rem;color:var(--muted)}
.lb-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.lightbox .btn{
    display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;
    background:var(--bg-elevated);border:1px solid var(--border);color:var(--accent);text-decoration:none;font-weight:700;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.lightbox .btn:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px -10px var(--ring);
    border-color:var(--accent);
}
.lightbox .backdrop{position:absolute;inset:0}
.lb-dialog{position:relative}
.focusable:focus{outline:2px solid var(--accent-soft);outline-offset:2px}

.lightbox .portfolio-info {
    padding: 5px 10px; border-radius: 20px; margin-bottom: 20px;
    box-shadow: 0 0 5px 0 var(--ring);
    background:var(--bg-elevated);
}
.lightbox .portfolio-info h3 {
    margin: 10px;border-bottom: 1px solid var(--border);padding-bottom: 10px;color:var(--text-main);
}
.lightbox .portfolio-info ul {list-style: none; padding-left: 10px; margin-bottom: 10px;color:var(--text-subtle);}
.lightbox .portfolio-info strong {font-weight: 600;}
.lightbox a {color: var(--accent);}

/* Lightbox CSS End */

/* Contact Section CSS Start */

.contact-section {
    position: relative;
    padding: 40px 20px 30px;
    background: var(--contact-bg);
    overflow: hidden;
  }

  .contact-inner {
    max-width: 1120px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .contact-header {
    max-width: 620px;
    margin: 0 auto 32px;
    text-align: center;
  }

  .contact-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--contact-kicker-bg);
    border: 1px solid var(--contact-kicker-border);
  }

  .contact-kicker::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--success);
  }

  .contact-title {
    font-size: clamp(26px, 3vw, 38px);
    margin: 14px 0 8px;
    font-weight: 800;
    line-height: 1.15;
    color:var(--text-main);
  }

  .contact-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
  }

  .contact-header-actions {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  @media (max-width: 900px) {
    .contact-grid {
      grid-template-columns: 1fr;
    }
  }

  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .contact-highlight {
    padding: 18px 16px;
    border-radius: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--contact-kicker-border);
  }

  .contact-highlight h3 {
    font-size: 1rem;
    margin-bottom: 6px;
    font-weight: 700;
    color:var(--text-main);
  }

  .contact-highlight p {
    font-size: 0.9rem;
    color: var(--text-subtle);
    margin-bottom: 10px;
  }

  .contact-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .contact-pill {
    font-size: 0.78rem;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--contact-pill-bg);
    border: 1px solid var(--contact-pill-border);
    color: var(--text-main);
    font-weight: 500;
  }

  .contact-direct {
    display: grid;
    gap: 8px;
    padding: 8px 0 2px;
    margin: 10px 0 0;
  }

  .contact-direct-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .contact-direct-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
  }

  .contact-direct-value {
    font-size: 0.9rem;
    color: var(--text-main);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border-radius: 999px;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .contact-direct-value::after {
    content: "↗";
    font-size: 0.7rem;
    opacity: 0.7;
    transform: translateY(1px);
  }

  .contact-direct-value:hover {
    color: var(--accent);
    transform: translateY(-1px);
  }

  .contact-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px dashed var(--contact-kicker-border);
    width: fit-content;
  }

  .contact-meta-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--success);
  }

  .contact-meta-text {
    font-size: 0.85rem;
    color: var(--text-subtle);
  }

  /* CTA card */
  .contact-cta-card {
    position: relative;
    border-radius: 18px;
    padding: 1px;
    background: var(--contact-cta-border-gradient);
  }

  .contact-cta-inner {
    border-radius: 16px;
    padding: 18px 16px 16px;
    background: var(--bg-elevated);
  }

  .contact-cta-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
    color:var(--text-main);
  }

  .contact-cta-text {
    font-size: 0.9rem;
    color: var(--text-subtle);
    margin-bottom: 10px;
  }

  .contact-cta-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0 0 12px;
    font-size: 0.86rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .contact-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.9rem;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 600;
    overflow: hidden;
    outline: none;
    text-decoration: none;
    white-space: nowrap;
  }

  .contact-btn-lg {
    padding-inline: 22px;
    font-size: 0.95rem;
  }

  .contact-btn-primary {
    background: radial-gradient(circle at top, var(--bg-elevated-alt), #d1d5db);
    color: var(--fg);
    border: none;
    box-shadow: 0 12px 22px -16px rgba(148, 163, 184, 1);
  }

  .contact-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 26px -18px rgba(148, 163, 184, 1);
  }

  .contact-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px -16px rgba(148, 163, 184, 0.9);
  }

  .contact-btn-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(140px 40px at 50% 0%, rgba(96, 165, 250, 0.7), transparent 65%);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
  }

  .contact-btn-primary:hover .contact-btn-glow {
    opacity: 1;
  }

  .contact-btn-ghost {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.9);
    color: var(--text-main);
  }

  .contact-btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
  }
/* Contact Section CSS End */

/* Image Animation CSS Start */

.acf-wrap{ position:relative; display:inline-block; border-radius:16px; overflow:hidden; }
.acf-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
.acf-sheen{ content:""; position:absolute; inset:-12%;
  background: var(--acf-sheen);
  pointer-events:none; opacity:.0; transition:opacity .5s ease; }
.acf-wrap.acf-animating .acf-sheen{ opacity:.6 }
.acf-ready > img.animated-color-fill { opacity: 0 !important; }

/* Image Animation CSS End */


/* Responsive CSS Start */

@media (max-width: 768px) {
  
  .content { top: 50%; left: auto; right: auto; transform: translate(0, -50%); }
  .content h2 { font-size: 1.1em; }
  .photo-wrap { aspect-ratio: auto; }
  .exp-header { display: block; }

}

@media (max-width: 900px){
  .lightbox{ align-items:flex-start; justify-content:center; padding:16px 12px; }
  .lb-dialog{grid-template-columns:1fr;width:100%;max-width:600px;height:auto;max-height:96dvh;overflow-y:auto;}
  .lb-left{ width:100%; } .slide-stage{ height:auto; aspect-ratio:4 / 3; min-height:260px; }
  .lb-body{ overflow:visible; }
  .lb-head{
      position: sticky; top: 0; z-index: 10;
      background: var(--lightbox-head-bg);
      border-bottom: 1px solid var(--border);
  }
}

/* Responsive CSS End */