/* ═══════════════════════════════════════════════
   Mustansir Mustafa Portfolio — style.css
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── Variables ── */
:root {
  --bg:         hsl(220,30%,3%);
  --fg:         hsl(40,20%,96%);
  --card:       hsl(220,25%,6%);
  --border:     hsl(220,20%,14%);
  --muted:      hsl(220,20%,10%);
  --muted-fg:   hsl(220,15%,60%);
  --primary:    hsl(28,95%,55%);
  --primary-fg: hsl(220,30%,5%);
  --secondary:  hsl(220,20%,12%);
  --font-sans:  'Plus Jakarta Sans', sans-serif;
  --font-serif: 'Outfit', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;
  --radius:     0.75rem;
  --ease:       cubic-bezier(.22,1,.36,1);
}
html.light {
  --bg:         hsl(40,20%,97%);
  --fg:         hsl(224,25%,10%);
  --card:       hsl(0,0%,100%);
  --border:     hsl(40,15%,85%);
  --muted:      hsl(40,10%,92%);
  --muted-fg:   hsl(224,15%,40%);
  --primary:    hsl(28,90%,50%);
  --primary-fg: hsl(0,0%,100%);
  --secondary:  hsl(224,20%,20%);
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);letter-spacing:-.03em}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{display:block}
ul{list-style:none}

/* ── Layout helpers ── */
.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.container{padding:0 3rem}}
.section{padding:7rem 0;position:relative;overflow:hidden}
.section-alt{background:color-mix(in srgb,var(--card) 30%,transparent);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.d-block{display:block}
.text-muted{color:var(--muted-fg)}
.italic{font-style:italic}
.oh{overflow:hidden}

/* ── Typography ── */
.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:var(--primary);font-weight:800}
.eyebrow-row{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}
.eyebrow-line{width:3rem;height:1px;background:var(--primary)}
.section-title{font-size:clamp(2rem,5vw,3.75rem);font-weight:900;color:var(--fg);line-height:1.05}
.section-title-xl{font-size:clamp(2.5rem,7vw,5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;color:var(--fg);line-height:1}
.section-header{margin-bottom:4rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.body-lg{font-size:1.125rem;color:var(--muted-fg);line-height:1.75;font-weight:500}
.amber-bar{height:.25rem;width:5rem;background:linear-gradient(to right,var(--primary),hsl(38,100%,50%));border-radius:999px}
.clip-wrap{overflow:hidden}

/* ── Glows ── */
.section-glow-l{position:absolute;left:0;top:50%;transform:translateY(-50%);width:20rem;height:20rem;background:color-mix(in srgb,var(--primary) 5%,transparent);border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
.section-glow-r{position:absolute;right:0;bottom:0;width:24rem;height:24rem;background:color-mix(in srgb,var(--primary) 5%,transparent);border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}

/* ── Keyframes ── */
@keyframes fadeIn    {from{opacity:0}to{opacity:1}}
@keyframes slideDown {from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
@keyframes slideLeft {from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@keyframes slideRight{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:none}}
@keyframes scaleX    {from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes fadeUp    {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes popIn     {from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:none}}
@keyframes marquee   {from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ping      {75%,100%{transform:scale(2);opacity:0}}

.anim-fade        {animation:fadeIn .6s ease both}
.anim-slide-down  {animation:slideDown .5s ease both}
.anim-slide-left  {animation:slideLeft .85s var(--ease) .1s both}
.anim-slide-right {animation:slideRight 1s var(--ease) .15s both}
.anim-scale-x     {animation:scaleX .8s ease .4s both;transform-origin:left}
.anim-fade-up     {animation:fadeUp .6s ease .5s both}
.anim-fade-up-2   {animation:fadeUp .6s ease .6s both}
.anim-fade-up-3   {animation:fadeUp .6s ease .7s both}
.anim-fade-late   {animation:fadeIn .6s ease 1s both}
.anim-pop         {animation:popIn .5s ease .9s both}
.anim-pop-late    {animation:popIn .5s ease 1.1s both}

/* ── Scroll reveal ── */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{--d:.15s}
.reveal-d2{--d:.28s}

/* ═══════════════ NAVBAR ═══════════════ */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;padding:2rem 0;transition:background .3s,backdrop-filter .3s,border-color .3s,padding .3s}
.navbar.scrolled{background:color-mix(in srgb,var(--bg) 70%,transparent);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);box-shadow:0 1px 20px rgba(0,0,0,.2);padding:1rem 0}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between}
@media(min-width:768px){.nav-inner{padding:0 3rem}}
.nav-logo{font-family:var(--font-serif);font-size:1.5rem;font-weight:900;letter-spacing:-.05em;cursor:pointer;display:flex;align-items:baseline;gap:.1rem}
.logo-m{color:var(--primary);transition:color .3s}
.logo-rest{color:var(--fg);transition:color .3s}
.nav-logo:hover .logo-m{color:hsl(38,100%,65%)}
.nav-logo:hover .logo-rest{color:var(--primary)}
.nav-desktop{display:none}
@media(min-width:768px){
  .nav-desktop{display:block;background:color-mix(in srgb,var(--bg) 40%,transparent);backdrop-filter:blur(12px);border:1px solid color-mix(in srgb,var(--border) 50%,transparent);border-radius:999px;padding:.5rem 1.5rem}
}
.nav-list{display:flex;align-items:center;gap:1.5rem}
.nav-link{font-size:.875rem;font-weight:600;color:var(--muted-fg);transition:color .3s;position:relative;padding:.5rem .25rem;background:none;border:none;cursor:pointer}
.nav-link:hover,.nav-link.active{color:var(--primary)}
.nav-underline{display:none;position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--primary);border-radius:999px;box-shadow:0 0 8px color-mix(in srgb,var(--primary) 80%,transparent)}
.nav-link.active .nav-underline{display:block}
.nav-actions{display:flex;align-items:center;gap:.75rem}
.theme-toggle{width:2.25rem;height:2.25rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted-fg);transition:color .3s,border-color .3s}
.theme-toggle:hover{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 50%,transparent)}
html:not(.light) .icon-sun,.icon-moon{display:none}
html:not(.light) .icon-moon{display:block}
html.light .icon-sun{display:block}
html.light .icon-moon{display:none}

/* Hamburger */
.hamburger{display:flex;flex-direction:column;gap:5px;padding:.375rem;background:none;border:none;cursor:pointer}
@media(min-width:768px){.hamburger{display:none}}
.hamburger span{display:block;width:24px;height:2px;background:var(--fg);border-radius:999px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
.mobile-menu.open{display:block}
@media(min-width:768px){.mobile-menu{display:none!important}}
.mobile-menu ul{padding:2rem 1.5rem;display:flex;flex-direction:column;gap:1.5rem;align-items:center}
.mobile-nav-link{font-family:var(--font-serif);font-size:1.75rem;font-weight:700;color:var(--muted-fg);transition:color .3s;background:none;border:none;cursor:pointer}
.mobile-nav-link:hover,.mobile-nav-link.active{color:var(--primary)}

/* ═══════════════ HERO ═══════════════ */
.hero{min-height:100dvh;display:flex;overflow:hidden;background:var(--bg);position:relative}
.hero-grid{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(to right,rgba(128,128,128,.06) 1px,transparent 1px),linear-gradient(to bottom,rgba(128,128,128,.06) 1px,transparent 1px);background-size:50px 50px}
.hero-glow{position:absolute;top:33%;left:25%;width:500px;height:500px;background:color-mix(in srgb,var(--primary) 8%,transparent);border-radius:50%;filter:blur(130px);pointer-events:none;z-index:0}
.bg-noise::before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.04;pointer-events:none;z-index:50}
html.light .bg-noise::before{opacity:.02}

.hero-left{flex:1;display:flex;flex-direction:column;justify-content:center;padding:7rem 1.5rem 4rem;position:relative;z-index:10;min-width:0}
@media(min-width:768px){.hero-left{padding:7rem 3rem 4rem}}
@media(min-width:1024px){.hero-left{padding:7rem 4rem 4rem 6rem}}

.mobile-avatar{display:block;margin-bottom:2rem;align-self:flex-start}
@media(min-width:1024px){.mobile-avatar{display:none}}
.mobile-avatar img{width:5rem;height:5rem;border-radius:50%;object-fit:cover;object-position:top;border:2px solid color-mix(in srgb,var(--primary) 50%,transparent);box-shadow:0 0 20px -5px color-mix(in srgb,var(--primary) 50%,transparent)}

.status-badge{display:inline-flex;align-items:center;gap:.625rem;align-self:flex-start;margin-bottom:2rem;padding:.5rem 1rem;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,transparent);border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);color:var(--primary);font-size:.875rem;font-weight:700;letter-spacing:.03em}
.ping-dot{position:relative;display:inline-flex;width:.625rem;height:.625rem}
.ping{position:absolute;inset:0;border-radius:50%;background:var(--primary);opacity:.6;animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite}
.ping-dot::after{content:"";position:relative;display:inline-flex;width:.625rem;height:.625rem;border-radius:50%;background:var(--primary)}

.hero-name{margin-bottom:0}
.name-solid{font-size:clamp(3rem,8.5vw,7.5rem);font-weight:900;color:var(--fg);line-height:.92;letter-spacing:-.05em}
.name-outline{font-size:clamp(3rem,8.5vw,7.5rem);font-weight:900;line-height:.92;letter-spacing:-.09em;-webkit-text-stroke:3px var(--primary);color: #101010;
    paint-order: stroke fill;}

.hero-rule{display:flex;align-items:center;gap:.75rem;margin:2rem 0;transform-origin:left}
.rule-amber{height:3px;width:4rem;background:var(--primary);border-radius:999px}
.rule-gray{height:1px;flex:1;max-width:7.5rem;background:var(--border)}

.hero-tagline{font-size:1.125rem;color:var(--muted-fg);font-weight:500;max-width:28rem;line-height:1.75;margin-bottom:2.5rem}
.hero-stats{display:flex;align-items:center;gap:1.5rem;margin-bottom:2.5rem}
@media(min-width:768px){.hero-stats{gap:2.5rem}}
.stat{}
.stat-val{font-family:var(--font-serif);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:900;color:var(--primary);line-height:1}
.stat-lbl{font-size:.625rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--muted-fg);margin-top:.375rem}
.stat-sep{width:1px;height:2.5rem;background:var(--border)}

.hero-ctas{display:flex;flex-direction:column;gap:1rem;flex-wrap:wrap;margin-bottom:2rem}
@media(min-width:640px){.hero-ctas{flex-direction:row}}
.btn-primary{display:inline-flex;align-items:center;gap:.625rem;justify-content:center;padding:1rem 1.75rem;background:var(--primary);color:var(--primary-fg);font-weight:700;font-size:1rem;border-radius:var(--radius);box-shadow:0 0 40px -12px color-mix(in srgb,var(--primary) 60%,transparent);transition:box-shadow .3s,transform .3s;position:relative;overflow:hidden;border:none;cursor:pointer;font-family:inherit}
.btn-primary:hover{box-shadow:0 0 60px -8px color-mix(in srgb,var(--primary) 80%,transparent);transform:translateY(-2px)}
.btn-shine{position:absolute;inset:0;background:rgba(255,255,255,.15);transform:translateY(100%);transition:transform .3s ease;pointer-events:none}
.btn-primary:hover .btn-shine{transform:translateY(0)}
.btn-ghost{display:inline-flex;align-items:center;gap:.625rem;justify-content:center;padding:1rem 1.75rem;background:transparent;color:var(--fg);font-weight:700;font-size:1rem;border-radius:var(--radius);border:1px solid var(--border);transition:all .3s;font-family:inherit}
.btn-ghost:hover{border-color:color-mix(in srgb,var(--primary) 50%,transparent);background:color-mix(in srgb,var(--primary) 5%,transparent);transform:translateY(-2px)}

.hero-loc{display:flex;align-items:center;gap:.5rem;color:var(--muted-fg);font-size:.875rem;font-weight:500}

.hero-photo-col{display:none;flex-shrink:0;width:44%;align-self:stretch;position:relative;clip-path:polygon(10% 0%,100% 0%,100% 100%,0% 100%)}
@media(min-width:1024px){.hero-photo-col{display:block}}
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:top}
.photo-fade-b{position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 0%,transparent 28%);pointer-events:none}
.photo-fade-l{position:absolute;inset:0;background:linear-gradient(to right,var(--bg) 0%,transparent 18%);pointer-events:none}

.float-badge{display:none;position:absolute;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:1rem;padding:.75rem 1rem;box-shadow:0 8px 32px rgba(0,0,0,.3);align-items:center;gap:.75rem}
@media(min-width:1024px){.float-badge{display:flex}}
.badge-exp{top:30%;right:38%}
.badge-team{bottom:22%;right:36%}
.badge-icon{width:2.25rem;height:2.25rem;border-radius:.75rem;background:color-mix(in srgb,var(--primary) 15%,transparent);border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.badge-lbl{font-size:.625rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-fg)}
.badge-val{font-family:var(--font-serif);font-size:1rem;font-weight:900;color:var(--fg)}

.hero-accent-line{display:none;position:absolute;top:0;bottom:0;left:calc(56% - 2px);width:3px;z-index:10;pointer-events:none;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--primary) 60%,transparent),transparent)}
@media(min-width:1024px){.hero-accent-line{display:block}}

.scroll-indicator{position:absolute;bottom:2rem;left:2rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted-fg);z-index:10;font-size:.625rem;text-transform:uppercase;letter-spacing:.3em;font-weight:800}
@media(min-width:768px){.scroll-indicator{left:50%;transform:translateX(-50%)}}
.scroll-line{width:1px;height:2.5rem;background:linear-gradient(to bottom,var(--primary),transparent)}

/* ═══════════════ ABOUT ═══════════════ */
.about-grid{display:grid;gap:3rem;align-items:start;position:relative;z-index:1}
@media(min-width:1024px){.about-grid{grid-template-columns:1fr 1.5fr;gap:6rem}}
.about-left{display:flex;flex-direction:column;gap:1.5rem}
.about-h3{font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--fg);line-height:1.1}
.about-right{display:flex;flex-direction:column;gap:2rem}
.quote-card{position:relative;padding:2rem;background:var(--card);border:1px solid var(--border);border-radius:1rem}
.quote-icon{position:absolute;top:-1.25rem;left:-1.25rem;width:2.5rem;height:2.5rem;background:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:color-mix(in srgb,var(--primary) 50%,transparent)}
.quote-text{font-family:var(--font-serif);font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--fg)}

/* ═══════════════ TIMELINE ═══════════════ */
.timeline{max-width:48rem;margin:0 auto;position:relative;padding-left:2rem}
@media(min-width:768px){.timeline{padding-left:3rem}}
.timeline-rail{position:absolute;left:0;top:.5rem;bottom:.5rem;width:1px;background:linear-gradient(to bottom,var(--primary),color-mix(in srgb,var(--primary) 30%,transparent),transparent)}
.timeline-item{position:relative;margin-bottom:3rem}
.timeline-item:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:-2rem;top:.5rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--primary);outline:4px solid var(--bg);box-shadow:0 0 12px color-mix(in srgb,var(--primary) 50%,transparent)}
@media(min-width:768px){.tl-dot{left:-3rem}}
.tl-card{padding:1.5rem 2rem;background:var(--bg);border:1px solid color-mix(in srgb,var(--border) 60%,transparent);border-radius:1rem;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:border-color .3s,box-shadow .3s}
.tl-card:hover{border-color:color-mix(in srgb,var(--primary) 30%,transparent);box-shadow:0 4px 20px rgba(0,0,0,.25)}
.tl-meta{display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem}
@media(min-width:640px){.tl-meta{flex-direction:row;align-items:center;justify-content:space-between}}
.tl-company{font-family:var(--font-serif);font-size:1.25rem;font-weight:900;color:var(--fg)}
@media(min-width:768px){.tl-company{font-size:1.5rem}}
.tl-role{color:var(--muted-fg);font-weight:500;font-size:.875rem;margin-top:.125rem}
.tl-period{font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent);border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);padding:.375rem .75rem;border-radius:999px;white-space:nowrap;align-self:flex-start}
@media(min-width:640px){.tl-period{align-self:center}}
.tl-bullets{display:flex;flex-direction:column;gap:.625rem}
.tl-bullets li{display:flex;align-items:flex-start;gap:.75rem;color:var(--muted-fg);font-size:.875rem;line-height:1.6}
.arrow-icon{color:color-mix(in srgb,var(--primary) 40%,transparent);flex-shrink:0;margin-top:.1rem;transition:color .3s}
.tl-bullets li:hover .arrow-icon{color:var(--primary)}

/* ═══════════════ SKILLS ═══════════════ */
.skills-hdr{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:4rem;justify-content:space-between;align-items:flex-start}
@media(min-width:768px){.skills-hdr{flex-direction:row;align-items:flex-end}}
.skills-sub{color:var(--muted-fg);font-size:1.125rem;max-width:20rem;font-weight:500}
@media(min-width:768px){.skills-sub{text-align:right}}
.skills-grid{display:grid;gap:1.25rem;position:relative;z-index:1}
@media(min-width:768px){.skills-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.skills-grid{grid-template-columns:repeat(3,1fr)}}
.skill-card{border-radius:1.5rem;background:var(--card);border:1px solid var(--border);position:relative;overflow:hidden;cursor:default;transition:border-color .3s,box-shadow .3s}
.skill-card:hover{box-shadow:0 8px 40px rgba(0,0,0,.3)}
.skill-wide{grid-column:span 1}
@media(min-width:1024px){.skill-wide{grid-column:span 2}}
.sc-hover{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none}
.skill-card:hover .sc-hover{opacity:1}
.sc-dot{position:absolute;top:1.5rem;right:1.5rem;width:.625rem;height:.625rem;border-radius:50%;opacity:0;transition:opacity .4s}
.skill-card:hover .sc-dot{opacity:1}
.sc-inner{position:relative;z-index:1;padding:2rem;height:100%}
.sc-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}
.sc-icon{padding:.875rem;background:var(--bg);border:1px solid var(--border);border-radius:1rem;color:var(--fg);transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.skill-card:hover .sc-icon{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 30%,transparent);transform:scale(1.1)}
.sc-title{font-size:1.125rem;font-weight:700;font-family:var(--font-serif);color:var(--fg)}
.sc-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.sc-tag{padding:.375rem .875rem;background:color-mix(in srgb,var(--bg) 80%,transparent);color:var(--fg);font-size:.875rem;font-weight:600;border-radius:.5rem;border:1px solid var(--border)}

/* color variants */
.color-blue .sc-hover{background:linear-gradient(135deg,color-mix(in srgb,#3b82f6 20%,transparent),color-mix(in srgb,#06b6d4 20%,transparent))}
.color-blue .sc-dot{background:#60a5fa}
.color-blue:hover{border-color:color-mix(in srgb,#3b82f6 40%,transparent)}
.color-amber .sc-hover{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 20%,transparent),color-mix(in srgb,hsl(38,100%,50%) 20%,transparent))}
.color-amber .sc-dot{background:#fbbf24}
.color-amber:hover{border-color:color-mix(in srgb,var(--primary) 40%,transparent)}
.color-purple .sc-hover{background:linear-gradient(135deg,color-mix(in srgb,#a855f7 20%,transparent),color-mix(in srgb,#ec4899 20%,transparent))}
.color-purple .sc-dot{background:#c084fc}
.color-purple:hover{border-color:color-mix(in srgb,#a855f7 40%,transparent)}
.color-green .sc-hover{background:linear-gradient(135deg,color-mix(in srgb,#22c55e 20%,transparent),color-mix(in srgb,#10b981 20%,transparent))}
.color-green .sc-dot{background:#4ade80}
.color-green:hover{border-color:color-mix(in srgb,#22c55e 40%,transparent)}
.color-rose .sc-hover{background:linear-gradient(135deg,color-mix(in srgb,#f43f5e 20%,transparent),color-mix(in srgb,#ef4444 20%,transparent))}
.color-rose .sc-dot{background:#fb7185}
.color-rose:hover{border-color:color-mix(in srgb,#f43f5e 40%,transparent)}

/* ═══════════════ PORTFOLIO ═══════════════ */
.portfolio-hdr{display:flex;flex-direction:column;gap:1.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--border);margin-bottom:2rem}
@media(min-width:768px){.portfolio-hdr{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.portfolio-sub{color:var(--muted-fg);font-weight:500;font-size:.875rem;max-width:18rem;line-height:1.6}
@media(min-width:768px){.portfolio-sub{text-align:right}}
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filter-btn{position:relative;padding:.5rem 1.25rem;border-radius:999px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .3s;border:1px solid var(--border);background:var(--card);color:var(--muted-fg);font-family:inherit}
.filter-btn:hover{color:var(--fg)}
.filter-btn.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.fc{font-size:.7rem;font-weight:700;opacity:.65;margin-left:.25rem}
.projects-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:768px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
.project-card{border-radius:1rem;overflow:hidden;background:var(--card);border:1px solid var(--border);transition:box-shadow .3s,border-color .3s}
.project-card:hover{box-shadow:0 0 30px -5px color-mix(in srgb,var(--primary) 30%,transparent);border-color:color-mix(in srgb,var(--primary) 50%,transparent)}
.project-card.hidden{display:none}
.proj-thumb{position:relative;height:14rem;overflow:hidden}
.proj-img{width:100%;height:100%;object-fit:cover;filter:grayscale(20%);transition:filter .7s,transform .7s}
.project-card:hover .proj-img{filter:grayscale(0%);transform:scale(1.05)}
.proj-overlay{position:absolute;inset:0;background:linear-gradient(to top,var(--card) 0%,color-mix(in srgb,var(--card) 10%,transparent),transparent);pointer-events:none}
.proj-badge{position:absolute;top:1rem;left:1rem;padding:.25rem .75rem;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px);border:1px solid var(--border);color:var(--fg);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px}
.proj-hover-icon{position:absolute;top:1rem;right:1rem;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transform:translateY(-.5rem);transition:opacity .3s,transform .3s}
.project-card:hover .proj-hover-icon{opacity:1;transform:none}
.proj-body{padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.proj-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.proj-title{font-family:var(--font-serif);font-size:1.125rem;font-weight:700;color:var(--fg);line-height:1.3}
.proj-arrow{color:var(--muted-fg);flex-shrink:0;margin-top:.125rem;transition:all .3s}
.project-card:hover .proj-arrow{color:var(--primary);transform:translate(.125rem,-.125rem)}
.proj-desc{color:var(--muted-fg);font-size:.875rem;line-height:1.6}
.proj-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.5rem;border-top:1px solid var(--border)}
.proj-stack{display:flex;flex-wrap:wrap;gap:.375rem}
.tech-tag{padding:.25rem .625rem;background:var(--muted);color:var(--muted-fg);font-size:.7rem;font-weight:600;border-radius:.375rem}
.proj-result{padding:.375rem .75rem;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-size:.7rem;font-weight:700;border-radius:.5rem;border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);white-space:nowrap;flex-shrink:0}
.empty-state{text-align:center;padding:5rem 0;color:var(--muted-fg)}

/* ═══════════════ EDUCATION ═══════════════ */
.edu-grid{display:grid;gap:2rem;max-width:56rem;margin:0 auto}
@media(min-width:768px){.edu-grid{grid-template-columns:repeat(2,1fr)}}
.edu-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.5rem;padding:2.5rem;background:var(--bg);border:1px solid color-mix(in srgb,var(--border) 50%,transparent);border-radius:2rem;box-shadow:0 8px 40px rgba(0,0,0,.2);transition:border-color .3s,transform .3s;position:relative;overflow:hidden;transition-delay:var(--d,0s)}
.edu-card:hover{border-color:color-mix(in srgb,var(--primary) 40%,transparent);transform:translateY(-.5rem)}
.edu-glow{position:absolute;top:0;right:0;width:8rem;height:8rem;background:color-mix(in srgb,var(--primary) 10%,transparent);border-radius:50%;filter:blur(50px);z-index:0;transition:background .3s}
.edu-card:hover .edu-glow{background:color-mix(in srgb,var(--primary) 20%,transparent)}
.edu-icon{width:5rem;height:5rem;background:var(--secondary);display:flex;align-items:center;justify-content:center;border-radius:1rem;color:var(--fg);transition:all .3s;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:1}
.edu-card:hover .edu-icon{background:var(--primary);color:var(--primary-fg);transform:scale(1.1)}
.edu-degree{font-size:1.25rem;font-weight:700;font-family:var(--font-serif);color:var(--fg);line-height:1.3;z-index:1}
.edu-inst{color:var(--muted-fg);font-weight:600;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.25rem;z-index:1}

/* ═══════════════ CONTACT ═══════════════ */
.contact-sec{padding:6rem 0 9rem}
.contact-wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(4rem,18vw,16rem);color:var(--fg);opacity:.03;white-space:nowrap;pointer-events:none;z-index:0;overflow:hidden}
.contact-glow-br{position:absolute;bottom:0;right:0;width:37.5rem;height:37.5rem;background:color-mix(in srgb,var(--primary) 10%,transparent);border-radius:50%;filter:blur(160px);pointer-events:none;z-index:0}
.contact-glow-tl{position:absolute;top:0;left:0;width:18.75rem;height:18.75rem;background:color-mix(in srgb,var(--primary) 5%,transparent);border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.contact-grid{display:grid;gap:4rem;align-items:start;position:relative;z-index:1}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1.1fr;gap:6rem}}
.contact-left{display:flex;flex-direction:column;gap:2.5rem}
.contact-heading{display:flex;flex-direction:column;gap:.25rem}
.contact-h{font-family:var(--font-serif);font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--fg)}
.contact-h-outline{-webkit-text-stroke:3px var(--primary);color: #101010;paint-order: stroke fill;letter-spacing: 0px;}
.avail-badge{display:inline-flex;align-items:center;gap:.75rem;padding:.625rem 1.25rem;border-radius:999px;background:color-mix(in srgb,#22c55e 10%,transparent);border:1px solid color-mix(in srgb,#22c55e 30%,transparent);color:#4ade80;font-weight:700;font-size:.875rem}
.avail-dot{position:relative;display:inline-flex;width:.625rem;height:.625rem}
.avail-ping{position:absolute;inset:0;border-radius:50%;background:#4ade80;opacity:.6;animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite}
.avail-dot::after{content:"";position:relative;display:inline-flex;width:.625rem;height:.625rem;border-radius:50%;background:#22c55e}
.email-cta{text-decoration:none;font-size:1.125rem;box-shadow:0 0 60px -15px color-mix(in srgb,var(--primary) 60%,transparent)}
.email-cta:hover{box-shadow:0 0 80px -8px color-mix(in srgb,var(--primary) 90%,transparent)}

/* Bento */
.bento-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.bento-tile{border-radius:1.5rem;background:var(--card);border:1px solid var(--border);transition:transform .3s,box-shadow .3s;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.bento-tile:hover{transform:translateY(-.75rem) scale(1.02)}
.email-tile{grid-column:span 2;padding:1.75rem 2rem;cursor:pointer;text-align:left;font-family:inherit;border:1px solid var(--border)}
.bento-hover{position:absolute;inset:0;background:color-mix(in srgb,var(--primary) 8%,transparent);opacity:0;transition:opacity .5s}
.email-tile:hover .bento-hover,.linkedin-tile:hover .bento-hover,.location-tile:hover .bento-hover{opacity:1}
.bento-hover-li{background:color-mix(in srgb,#0A66C2 8%,transparent)}
.bento-hover-loc{background:color-mix(in srgb,var(--primary) 5%,transparent)}
.bento-flash{position:absolute;inset:0;background:color-mix(in srgb,var(--primary) 15%,transparent);opacity:0;transition:opacity 1.5s;pointer-events:none}
.bento-flash.show{opacity:1}
.bento-row{position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.bento-label{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--muted-fg)}
.bento-val{font-size:1rem;font-weight:700;color:var(--fg);margin-top:.375rem;word-break:break-all}
@media(min-width:768px){.bento-val{font-size:1.125rem}}
.bento-hint{font-size:.875rem;font-weight:500;color:var(--muted-fg);margin-top:.25rem;transition:color .3s}
.bento-hint.copied{color:#4ade80}
.bento-icon{width:3rem;height:3rem;border-radius:1rem;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .3s}
.email-tile:hover .bento-icon{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}
.linkedin-tile{padding:1.5rem;min-height:10rem}
.location-tile{padding:1.5rem;min-height:10rem}
.bento-footer{display:flex;align-items:center;justify-content:space-between;padding-top:1rem;position:relative;z-index:1}
.bento-link-txt{font-size:.875rem;font-weight:700;color:var(--fg);transition:color .3s}
.linkedin-tile:hover .bento-link-txt{color:#0A66C2}
.bento-link-icon{width:2rem;height:2rem;border-radius:.75rem;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .3s}
.linkedin-tile:hover .bento-link-icon{background:#0A66C2;border-color:#0A66C2;color:#fff}
.bento-loc-footer{padding-top:1rem;position:relative;z-index:1}
.bento-val-sm{font-weight:700;color:var(--fg)}
.bento-muted{font-size:.875rem;color:var(--muted-fg);font-weight:500;margin-top:.25rem}

/* ═══════════════ FOOTER ═══════════════ */
.footer{border-top:1px solid var(--border);overflow:hidden}
.marquee-strip{padding:1rem 0;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--card) 40%,transparent);overflow:hidden}
.marquee-track{display:flex;gap:2.5rem;white-space:nowrap;animation:marquee 38s linear infinite;width:max-content}
.mq-item{display:inline-flex;align-items:center;gap:1rem;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-fg)}
.mq-dot{width:.375rem;height:.375rem;border-radius:50%;background:var(--primary);flex-shrink:0}
.footer-body{max-width:1280px;margin:0 auto;padding:4rem 1.5rem 5rem}
@media(min-width:768px){.footer-body{padding:5rem 3rem}}
.footer-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1fr auto auto;gap:4rem}}
.footer-brand{display:flex;flex-direction:column;gap:1.5rem}
.footer-logo{display:flex;align-items:baseline;gap:.125rem;cursor:pointer;background:none;border:none;font-family:var(--font-serif);font-size:clamp(3rem,5vw,3.75rem);font-weight:900;letter-spacing:-.05em}
.fl-m{color:var(--primary);transition:color .3s}
.fl-r{color:var(--fg);transition:color .3s}
.footer-logo:hover .fl-m{color:hsl(38,100%,65%)}
.footer-logo:hover .fl-r{color:var(--primary)}
.footer-tag{color:var(--muted-fg);font-weight:500;max-width:18rem;line-height:1.6}
.footer-socials{display:flex;align-items:center;gap:.75rem}
.social-btn{width:2.5rem;height:2.5rem;border-radius:.75rem;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted-fg);transition:all .3s}
.social-btn:hover{color:var(--primary);border-color:color-mix(in srgb,var(--primary) 50%,transparent);transform:translateY(-2px)}
.social-li:hover{color:#0A66C2;border-color:color-mix(in srgb,#0A66C2 50%,transparent)}
.footer-col-lbl{font-size:.625rem;font-weight:800;text-transform:uppercase;letter-spacing:.25em;color:var(--muted-fg);margin-bottom:1.25rem}
.footer-nav{display:flex;flex-direction:column;gap:.75rem}
.footer-nav-link{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:var(--muted-fg);transition:all .3s;background:none;border:none;cursor:pointer;font-family:inherit}
.footer-nav-link::before{content:"";display:inline-block;width:0;height:1px;background:var(--primary);transition:width .3s;flex-shrink:0}
.footer-nav-link:hover{color:var(--fg);transform:translateX(.25rem)}
.footer-nav-link:hover::before{width:.75rem}
.footer-contact{display:flex;flex-direction:column;gap:.75rem}
.footer-contact-link{font-size:.875rem;font-weight:600;color:var(--muted-fg);transition:color .3s;word-break:break-all}
.footer-contact-link:hover{color:var(--fg)}
.footer-loc-txt{font-size:.875rem;font-weight:600;color:color-mix(in srgb,var(--muted-fg) 70%,transparent)}
.footer-bar{border-top:1px solid var(--border)}
.footer-bar-inner{max-width:1280px;margin:0 auto;padding:1.25rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
@media(min-width:640px){.footer-bar-inner{flex-direction:row;justify-content:space-between}}
@media(min-width:768px){.footer-bar-inner{padding:1.25rem 3rem}}
.footer-copy{color:var(--muted-fg);font-size:.875rem;font-weight:500}
.footer-copy-dim{color:color-mix(in srgb,var(--muted-fg) 60%,transparent)}
.back-top{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:700;color:var(--muted-fg);transition:color .3s;background:none;border:none;cursor:pointer;font-family:inherit}
.back-top:hover{color:var(--primary)}
.btt-icon{width:1.75rem;height:1.75rem;border-radius:.5rem;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;transition:all .3s}
.back-top:hover .btt-icon{background:var(--primary);border-color:var(--primary);color:var(--primary-fg)}

/* ═══════════════ TILT (JS-driven) ═══════════════ */
.tilt-card{perspective:900px}
.tilt-card .skill-card{transition:transform .15s ease;transform-style:preserve-3d}
/*.proj-thumb {*/
    /*height: 280px;*/
/*    overflow: hidden;*/
/*    position: relative;*/
/*}*/
@media (min-width: 768px) {
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.project-card[data-category="Website"] .proj-img,
.project-card[data-category="E-Commerce"] .proj-img,
.project-card[data-category="Web Application"] .proj-img,
.project-card[data-category="UI/UX Design"] .proj-img {
    width: 100%;
    height: auto;
    display: block;
    transform: translateY(0);
    transition: transform 10s cubic-bezier(0.22, 1, 0.36, 1);

}

.project-card[data-category="Website"]:hover .proj-img,
.project-card[data-category="E-Commerce"]:hover .proj-img,
.project-card[data-category="Web Application"]:hover .proj-img,
.project-card[data-category="UI/UX Design"]:hover .proj-img {
    transform: translateY(-70%);
}

/*Portfolio thumbnail slider css*/
/*.proj-img{
    transition: opacity .4s ease;
}*/

.proj-thumb{
    position:relative;
    overflow:hidden;
}

.logo-slider{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.logo-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain; /* use cover if preferred */
    opacity:0;
    transition:opacity .8s ease;
    object-fit:cover;
    object-position:top
}

.logo-slide.active{
    opacity:1;
}
.logo-pagination{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index:10;
}

.logo-bullet{
    width:6px;
    height:24px;
    border-radius:20px;
    background:rgba(255,255,255,.35);
    transition:all .3s ease;
}

.logo-bullet.active{
    height:40px;
    background:#fff;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM
   Component states live with the main stylesheet. No patch layer.
   ═══════════════════════════════════════════════════════════════ */

html, body { width:100%; max-width:100%; overflow-x:hidden; }
body { min-width:0; }
img, svg, video, canvas { max-width:100%; }
section, header, footer, main, .container { min-width:0; }

/* Navigation --------------------------------------------------- */
.navbar { width:100%; }
.nav-inner { width:100%; min-width:0; }
.nav-logo { flex:0 0 auto; }
.nav-actions { flex:0 0 auto; }

/* Hero: desktop ------------------------------------------------ */
@media (min-width:1024px) {
  .hero {
    min-height:100svh;
    height:auto;
    display:grid;
    grid-template-columns:minmax(0,56%) minmax(0,44%);
    overflow:clip;
    isolation:isolate;
  }

  .hero-left {
    grid-column:1;
    grid-row:1;
    width:100%;
    min-width:0;
    min-height:100svh;
    padding:clamp(7rem,11vh,9rem) clamp(2.5rem,5vw,6rem) clamp(4rem,7vh,6rem);
    justify-content:center;
    overflow:visible;
  }

  .hero-photo-col {
    grid-column:2;
    grid-row:1;
    display:block;
    width:100%;
    min-width:0;
    min-height:100svh;
    height:100%;
    align-self:stretch;
    overflow:hidden;
    clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);
  }

  .hero-photo {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
  }

  .mobile-avatar { display:none; }
  .float-badge { display:flex; }
  .hero-accent-line { display:block; left:56%; }
  .scroll-indicator { left:50%; transform:translateX(-50%); }
}

/* Compact desktop / laptops ----------------------------------- */
@media (min-width:1024px) and (max-width:1199px) {
  .hero { grid-template-columns:minmax(0,59%) minmax(0,41%); }
  .hero-left { padding-left:clamp(2.5rem,4vw,4rem); padding-right:2rem; }
  .name-solid, .name-outline { font-size:clamp(3.2rem,5.7vw,5.5rem); }
  .hero-tagline { max-width:27rem; font-size:1rem; }
  .hero-stats { gap:1.25rem; }
  .float-badge { display:none; }
  .hero-accent-line { left:59%; }
}

/* Tablet ------------------------------------------------------- */
@media (min-width:768px) and (max-width:1023px) {
  .navbar { padding:1.25rem 0; }
  .nav-inner { padding-left:2rem; padding-right:2rem; }

  .hero {
    min-height:0;
    height:auto;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .hero-left {
    order:1;
    width:100%;
    min-height:calc(100svh - 72px);
    padding:8rem clamp(2rem,6vw,4rem) 4rem;
    justify-content:center;
  }

  .hero-photo-col {
    order:2;
    display:block;
    width:100%;
    height:clamp(360px,58vw,540px);
    min-height:360px;
    clip-path:none;
    overflow:hidden;
  }

  .hero-photo {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 15%;
  }

  .hero-photo-col::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(to bottom,var(--bg) 0%,transparent 20%,transparent 72%,var(--bg) 100%);
  }

  .mobile-avatar { display:block; }
  .float-badge, .hero-accent-line, .scroll-indicator { display:none; }
  .name-solid, .name-outline { font-size:clamp(3.8rem,9vw,6rem); }
  .hero-tagline { max-width:42rem; }
  .hero-ctas { flex-direction:row; flex-wrap:wrap; }
}

/* Phones ------------------------------------------------------- */
@media (max-width:767px) {
  .navbar { padding:1rem 0; }
  .navbar.scrolled { padding:.75rem 0; }
  .nav-inner { padding:0 1rem; }
  .nav-logo { font-size:1.35rem; }
  .theme-toggle { width:2.15rem; height:2.15rem; }

  .hero {
    min-height:0;
    height:auto;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .hero-left {
    order:1;
    width:100%;
    min-height:0;
    padding:6rem 1rem 2.75rem;
    justify-content:flex-start;
  }

  .mobile-avatar {
    display:block;
    margin:0 0 1rem;
  }

  .mobile-avatar img {
    width:4rem;
    height:4rem;
  }

  .status-badge {
    width:max-content;
    max-width:100%;
    margin-bottom:1.15rem;
    padding:.45rem .7rem;
    font-size:.66rem;
    line-height:1.35;
    white-space:normal;
  }

  .hero-name {
    width:100%;
    max-width:100%;
    overflow:visible;
  }

  .name-solid, .name-outline {
    display:block;
    width:100%;
    max-width:100%;
    font-size:clamp(2.8rem,13.2vw,4.75rem);
    line-height:.9;
    letter-spacing:-.075em;
    white-space:nowrap;
  }

  .name-outline { -webkit-text-stroke:1.5px var(--primary); }
  .hero-rule { width:100%; margin:1.25rem 0; }

  .hero-tagline {
    width:100%;
    max-width:100%;
    font-size:.92rem;
    line-height:1.65;
    margin-bottom:1.5rem;
  }

  .hero-stats {
    width:100%;
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:center;
    gap:.5rem;
    margin-bottom:1.5rem;
  }

  .stat { min-width:0; text-align:center; }
  .stat-val { font-size:clamp(1.35rem,7vw,1.7rem); }
  .stat-lbl { font-size:.48rem; letter-spacing:.08em; white-space:nowrap; }
  .stat-sep { width:1px; height:1.75rem; }

  .hero-ctas {
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:.6rem;
    margin-bottom:1.25rem;
  }

  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
    width:100%;
    min-height:46px;
    justify-content:center;
    margin:0;
  }

  .hero-loc {
    width:100%;
    justify-content:center;
    font-size:.7rem;
    line-height:1.4;
  }

  .hero-photo-col {
    order:2;
    display:block;
    width:100%;
    height:clamp(280px,78vw,390px);
    min-height:280px;
    max-height:390px;
    clip-path:none;
    overflow:hidden;
  }

  .hero-photo {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 12%;
  }

  .hero-photo-col::after {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(to bottom,var(--bg) 0%,transparent 18%,transparent 72%,var(--bg) 100%);
  }

  .hero-grid { background-size:34px 34px; }
  .hero-glow { left:10%; top:18%; width:260px; height:260px; filter:blur(90px); }
  .float-badge, .hero-accent-line, .scroll-indicator { display:none; }

  .section { padding:5rem 0; }
  .container { width:100%; padding-left:1rem; padding-right:1rem; }
  .section-title-xl, .section-title { max-width:100%; overflow-wrap:anywhere; }

  .about-grid, .skills-grid, .projects-grid, .edu-grid, .contact-grid, .bento-grid { width:100%; min-width:0; }
  .project-card, .skill-card, .tl-card, .bento-tile { min-width:0; max-width:100%; }
  .project-card *, .skill-card *, .tl-card *, .bento-tile * { max-width:100%; }

  .tl-meta { flex-wrap:wrap; gap:.65rem; }
  .tl-period { max-width:100%; }

  .mm-cursor, .mm-cursor-ring, .mm-cursor-label, .mm-journey, .mm-hero-orb { display:none !important; }
}

/* Small phones ------------------------------------------------- */
@media (max-width:380px) {
  .hero-left { padding-left:.875rem; padding-right:.875rem; }
  .name-solid, .name-outline { font-size:clamp(2.55rem,13.2vw,3.7rem); }
  .hero-tagline { font-size:.88rem; }
  .stat-val { font-size:1.3rem; }
  .stat-lbl { font-size:.43rem; }
}

/* Touch + reduced motion -------------------------------------- */
@media (hover:none), (pointer:coarse) {
  html, body, button, a, input, textarea { cursor:auto !important; }
  .project-card:hover:before, .skill-card:hover:before, .tl-card:hover:before, .bento-tile:hover:before { opacity:0; }
}