/* Light-blue sky theme with floating clouds */
:root{
  --sky-1:#eaf6ff;--sky-2:#d7efff;--sky-3:#c8e7ff;--ink:#0f2940;--muted:#4b6a88;--brand:#2a7de1;--brand-2:#7fd3ff;--card:#ffffff;--shadow:0 10px 30px rgba(16, 71, 120, .12);
  /* Fluid type scale */
  --step--1: clamp(.78rem, .72rem + .2vw, .85rem);
  --step-0: clamp(.95rem, .9rem + .25vw, 1rem);
  --step-1: clamp(1.15rem, 1.05rem + .6vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.3rem + 1vw, 1.85rem);
  --step-3: clamp(2.15rem, 1.8rem + 2.4vw, 3.2rem);
  --step-4: clamp(2.7rem, 2.2rem + 3.6vw, 4rem);
  --radius-pill: 999px;
}

/* Dark theme variables (applied via .theme-dark on body) */
.theme-dark{
  --sky-1:#0d1822;--sky-2:#0f2030;--sky-3:#132b3f;--ink:#e6eef5;--muted:#8aa4ba;--brand:#5aa9ff;--brand-2:#7fd3ff;--card:#142736;--shadow:0 10px 30px rgba(0,0,0,.4);
  background:linear-gradient(180deg,var(--sky-1),var(--sky-2) 40%, var(--sky-3));
}
.theme-dark .site-header{background:rgba(20,39,54,.7);border-bottom:1px solid rgba(127,211,255,.15)}
.theme-dark .nav a{color:var(--ink)}
.theme-dark .card{background:var(--card);border-color:rgba(127,211,255,.12)}
.theme-dark .tile{background:linear-gradient(180deg,#1d394f,#172c3d);border-color:rgba(127,211,255,.15)}
.theme-dark .chip, .theme-dark .stack-list li{background:rgba(127,211,255,.12);border-color:rgba(127,211,255,.25);color:var(--ink)}
.theme-dark .chip-list li{background:rgba(127,211,255,.12);border-color:rgba(127,211,255,.25);}
.theme-dark .proj-modal{background:#1d394f;border-color:rgba(127,211,255,.25)}
.theme-dark .close-modal{background:rgba(127,211,255,.15);color:var(--ink)}
.theme-dark .close-modal:hover{background:rgba(127,211,255,.25)}
.theme-dark .field-group input,.theme-dark .field-group textarea{background:rgba(29,57,79,.8);border-color:rgba(127,211,255,.25);color:var(--ink)}
.theme-dark .field-group input:focus,.theme-dark .field-group textarea:focus{background:#1d394f}
.theme-dark .badge{background:rgba(127,211,255,.15);border-color:rgba(127,211,255,.3)}
.theme-dark .segmented{background:rgba(29,57,79,.6);border-color:rgba(127,211,255,.25)}
.theme-dark .seg-btn{color:var(--muted)}
.theme-dark .seg-btn.active{color:var(--ink)}
.theme-dark .proj-badge{background:linear-gradient(90deg,#5aa9ff,#7fd3ff)}
.theme-dark .btn.ghost{border-color:var(--brand);color:var(--brand)}
.theme-dark .btn-contact::before{background:linear-gradient(120deg,#5aa9ff 0%,#7fd3ff 50%,#5aa9ff 100%)}
.theme-dark .proj-modal-overlay{background:rgba(0,0,0,.55)}
.theme-dark .clouds{display:none}
/* Starfield in dark mode */
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;display:none;background:transparent}
.theme-dark .stars{display:block;}

/* Theme toggle */
.theme-toggle{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:0;width:40px;height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.05rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px -4px rgba(16,71,120,.35);transition:transform .25s ease, box-shadow .25s ease}
.theme-toggle:hover{transform:translateY(-2px)}
.theme-toggle:active{transform:translateY(0) scale(.95)}
.theme-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.theme-dark .theme-toggle{background:linear-gradient(135deg,#234a69,#2f678d)}
/* Floating bottom-right placement for theme toggle */
.theme-fab{position:fixed;right:22px;bottom:24px;z-index:260}
@media (max-width:640px){.theme-fab{right:16px;bottom:18px;width:46px;height:46px;font-size:1.15rem}}

/* Lazy image */
.lazy-img{opacity:0;transform:translateY(4px);transition:opacity .6s ease, transform .6s ease;filter:blur(8px)}
.lazy-img.loaded{opacity:1;transform:translateY(0);filter:blur(0)}

*{box-sizing:border-box;margin:0;padding:0}
/* html,body{height:100%} */
html{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:'calt' 1,'liga' 1;}
body{font-family:inherit;color:var(--ink);background:linear-gradient(180deg,var(--sky-1),var(--sky-2) 40%, var(--sky-3));overflow-x:hidden;line-height:1.55;font-weight:400;font-size:var(--step-0);} 
/* Initial load: only show hero section */
body.initial-hero-only .site-header,
body.initial-hero-only main > section:not(.hero),
body.initial-hero-only .site-footer,
body.initial-hero-only .contact-fab{display:none}
body.initial-hero-only .hero{min-height:100vh}
@media (max-width:980px){body.initial-hero-only .hero{padding-top:4rem}}

/* Smooth reveal of rest after exiting hero-only
body.initial-hero-only-transition .site-header,
body.initial-hero-only-transition main > section:not(.hero),
body.initial-hero-only-transition .site-footer,
body.initial-hero-only-transition .contact-fab{animation:fadeAll .65s cubic-bezier(.4,.2,.2,1) forwards;opacity:0}
@keyframes fadeAll{to{opacity:1;transform:none}} */

/* Explore hint button */
.explore-hint{position:fixed;left:50%;bottom:38px;transform:translate(-50%,40px) scale(.6);opacity:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border:0;padding:10px 18px;border-radius:28px;font:600 .75rem/1 Inter,system-ui,sans-serif;letter-spacing:.7px;text-transform:uppercase;box-shadow:0 10px 28px -10px rgba(16,71,120,.4);cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;z-index:260;transition:opacity .55s cubic-bezier(.4,.2,.2,1), transform .55s cubic-bezier(.4,.2,.2,1)}
.explore-hint.show{opacity:1;transform:translate(-50%,0) scale(1)}
.explore-hint:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:640px){.explore-hint{bottom:22px;padding:9px 16px;font-size:.65rem}}
@media (prefers-reduced-motion:reduce){.explore-hint{transition:none}}
/* Global typography */
h1,h2,h3{font-family:'Playfair Display', Georgia, serif; font-weight:600; line-height:1.15; letter-spacing:.5px; margin:0 0 .65em;}
h1{font-size:var(--step-3); font-weight:700;}
h2{font-size:var(--step-2); font-weight:600;}
h3{font-size:var(--step-1); font-weight:600;}
p{font-size:var(--step-0);line-height:1.55;margin:0 0 1em;}
small{font-size:var(--step--1)}
code, pre, kbd, samp{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.85em;line-height:1.4}
code{background:rgba(42,125,225,.08);padding:.25em .45em;border-radius:8px;border:1px solid rgba(42,125,225,.18)}
pre{background:rgba(42,125,225,.08);padding:1rem;border-radius:14px;overflow:auto;border:1px solid rgba(42,125,225,.18);}
.theme-dark code,.theme-dark pre{background:rgba(127,211,255,.12);border-color:rgba(127,211,255,.25)}

.sr-only{position:absolute;left:-9999px;}

.site-header{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.55);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(42,125,225,.08);transition:background .35s, box-shadow .35s, padding .35s, transform .45s}
.site-header.hide{transform:translateY(-110%)}
.site-header::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(42,125,225,.12),rgba(127,211,255,.12) 55%,rgba(42,125,225,.12));opacity:.4}
.site-header.nav-scrolled{background:rgba(255,255,255,.82);box-shadow:0 4px 18px -6px rgba(16,71,120,.25)}
.theme-dark .site-header.nav-scrolled{background:rgba(20,39,54,.9);box-shadow:0 4px 22px -6px rgba(0,0,0,.55);border-bottom:1px solid rgba(127,211,255,.2)}
.theme-dark .site-header::after{background:linear-gradient(90deg,rgba(127,211,255,.12),rgba(90,169,255,.12) 55%,rgba(127,211,255,.12));opacity:.25}
.site-header .scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,rgba(42,125,225,.25),rgba(127,211,255,.25));overflow:hidden}
.site-header .scroll-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .15s linear}
@media (prefers-reduced-motion:reduce){.site-header{transition:none}.site-header .scroll-progress span{transition:none}}
.nav{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 26px;gap:1.25rem;transition:padding .35s}
.nav.balanced{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:2.5rem;max-width:1280px;padding-left:56px;padding-right:56px}
.nav.balanced .brand{justify-self:start}
.nav.balanced .nav-links{justify-self:center;display:flex;gap:40px}
.nav.balanced .nav-extra{justify-self:end}
.nav.balanced .nav-links a{font-size:.95rem;font-weight:600}
@media (max-width:1000px){
  .nav.balanced{padding-left:32px;padding-right:32px}
  .nav.balanced .nav-links{gap:36px}
}
@media (max-width:840px){
  .nav.balanced{grid-template-columns:auto 1fr auto;padding-left:20px;padding-right:20px}
  .nav.balanced .nav-links{gap:26px}
}
.site-header.nav-scrolled .nav{padding:8px 26px}
.brand{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:1.35rem;text-decoration:none;color:var(--brand);letter-spacing:.5px}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer}
.nav-links{list-style:none;display:flex;gap:20px;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;position:relative;padding:.45rem .4rem;border-radius:8px;line-height:1}
.nav a::after{content:"";position:absolute;left:12%;bottom:4px;width:0;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .3s cubic-bezier(.4,.2,.2,1)}
.nav a:hover::after,.nav a.is-active::after{width:76%}
.nav a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.nav a[aria-current="page"], .nav a.current{font-weight:700}

/* Page-specific header spacing adjustments for blog/projects */
body.blog-page .container, body.projects-page .container{padding-top:60px}
body.blog-page .site-header, body.projects-page .site-header{backdrop-filter:blur(18px) saturate(160%)}
body.blog-page .clouds, body.projects-page .clouds{opacity:.4}
/* Wider layout for projects page to better use horizontal whitespace */
body.projects-page .container{max-width:1320px}
@media (min-width:1500px){body.projects-page .container{max-width:1480px}}
/* Projects intro initial (title only) */
body.projects-intro-only .courses-card{opacity:0;transform:translateX(70px);pointer-events:none;visibility:hidden}
/* Allow hero descriptive elements to show immediately (was hidden in intro state) */
body.projects-intro-only .projects-hero .tagline,
body.projects-intro-only .projects-hero .metrics,
body.projects-intro-only .projects-hero .hero-actions,
body.projects-intro-only .projects-hero .minimal-badges{opacity:1;transform:none;pointer-events:auto}
body.projects-page .courses-card,
body.projects-page .projects-hero .tagline,
body.projects-page .projects-hero .metrics,
body.projects-page .projects-hero .hero-actions,
body.projects-page .projects-hero .minimal-badges{transition:opacity .85s cubic-bezier(.4,.2,.2,1), transform .85s cubic-bezier(.4,.2,.2,1)}
body.projects-loaded .courses-card{opacity:1;transform:none;pointer-events:auto;visibility:visible}
body.projects-loaded .projects-hero .tagline,
body.projects-loaded .projects-hero .metrics,
body.projects-loaded .projects-hero .hero-actions,
body.projects-loaded .projects-hero .minimal-badges{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  body.projects-intro-only .courses-card,
  body.projects-intro-only .projects-hero .tagline,
  body.projects-intro-only .projects-hero .metrics,
  body.projects-intro-only .projects-hero .hero-actions,
  body.projects-intro-only .projects-hero .minimal-badges{transition:none}
}
/* Projects page two-column layout */
/* Adjust column proportions (main grows, timeline wider) */
.projects-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:2.8rem}
@media (min-width:1400px){.projects-layout{grid-template-columns:minmax(0,1fr) 400px;gap:3.2rem}}
@media (max-width:1280px){.projects-layout{grid-template-columns:minmax(0,1fr) 320px;gap:2.2rem}}
@media (max-width:1180px){.projects-layout{grid-template-columns:minmax(0,1fr) 300px;gap:2rem}}
@media (max-width:980px){.projects-layout{grid-template-columns:1fr}}
.projects-main{min-width:0}
.courses-card{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:1rem}
.courses-card .mini{font-size:.65rem;letter-spacing:.6px;font-weight:600;text-transform:uppercase}
.gpa-badge{display:inline-block;margin-left:.4rem;padding:3px 6px;border-radius:8px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;font:700 .55rem/1 Inter,system-ui,sans-serif;letter-spacing:.7px}
/* Course timeline enhanced styling */
.course-timeline{margin:0;padding:4px 0 0 14px;list-style:none;display:flex;flex-direction:column;gap:.95rem;counter-reset:course;position:relative;--ct-progress:0}
.course-timeline::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:3px;border-radius:4px;background:linear-gradient(180deg,var(--brand),var(--brand-2));opacity:.25;filter:blur(.2px)}
.course-timeline::after{content:"";position:absolute;left:4px;top:0;width:3px;height:calc(var(--ct-progress) * 1%);background:linear-gradient(180deg,var(--brand),var(--brand-2));border-radius:4px;box-shadow:0 0 8px -2px rgba(42,125,225,.6);transition:height .4s cubic-bezier(.4,.2,.2,1)}
.course-timeline li{--delay:calc(var(--i,0) * 34ms);position:relative;padding:.75rem .85rem .75rem 1.3rem;border:1px solid rgba(42,125,225,.14);background:linear-gradient(160deg,#ffffff,rgba(255,255,255,.9));backdrop-filter:blur(5px);border-radius:16px;font-size:.72rem;line-height:1.38;display:flex;flex-direction:column;gap:.35rem;box-shadow:0 6px 18px -8px rgba(16,71,120,.18);opacity:0;transform:translateY(6px) scale(.98);transition:opacity .38s cubic-bezier(.4,.2,.2,1), transform .55s cubic-bezier(.4,.2,.2,1);transition-delay:var(--delay);will-change:opacity,transform}
.course-timeline li.in{opacity:1;transform:none}
.theme-dark .course-timeline li{background:linear-gradient(180deg,#142736,#1e3b52);border-color:rgba(127,211,255,.18);box-shadow:0 8px 26px -10px rgba(0,0,0,.55)}
.course-timeline li::before{counter-increment:course;content:counter(course);position:absolute;left:-18px;top:14px;transform:translate(-50%,0);width:24px;height:24px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;font:600 .6rem/24px Inter,system-ui,sans-serif;text-align:center;box-shadow:0 4px 10px -4px rgba(16,71,120,.35);border:2px solid #fff}
.course-timeline li:not(.course-group)::after{content:"";position:absolute;left:-18px;top:38px;bottom:-18px;width:2px;background:linear-gradient(180deg,rgba(42,125,225,.4),rgba(127,211,255,.15));}
.course-timeline li:last-child::after{display:none}
.course-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
.course-title{font:600 .74rem/1.2 Inter,system-ui,sans-serif;letter-spacing:.4px}
.course-term{font:600 .5rem/1 Inter,system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.course-term b.grade{display:inline-block;margin-left:.25rem;padding:2px 4px;border-radius:6px;background:rgba(42,125,225,.08);border:1px solid rgba(42,125,225,.2);font:700 .55rem/1 Inter,system-ui,sans-serif;letter-spacing:.5px;color:var(--ink)}
.theme-dark .course-term b.grade{background:rgba(127,211,255,.15);border-color:rgba(127,211,255,.3);color:var(--ink)}
.course-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.05rem}
.course-tag{--h:210;--s:60%;--l:52%;background:hsl(var(--h) var(--s) calc(var(--l) + 14%)/.15);border:1px solid hsl(var(--h) var(--s) var(--l)/.35);padding:3px 6px;border-radius:999px;font:600 .48rem/1 Inter,system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;position:relative;overflow:hidden}
.course-tag[data-tag*="ai"],.course-tag[data-tag*="ml"],.course-tag[data-tag*="rl"]{--h:210;--s:80%;--l:46%}
.course-tag[data-tag*="systems"],.course-tag[data-tag*="cloud"],.course-tag[data-tag*="backend"]{--h:200;--s:70%;--l:40%}
.course-tag[data-tag*="math"],.course-tag[data-tag*="theory"],.course-tag[data-tag*="alg"]{--h:250;--s:55%;--l:46%}
.course-tag[data-tag*="graphics"],.course-tag[data-tag*="vision"]{--h:170;--s:60%;--l:42%}
.course-tag[data-tag*="dat"]{--h:185;--s:65%;--l:40%}
.course-tag::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 35%,rgba(255,255,255,.3),transparent 60%);opacity:.35;mix-blend-mode:overlay;pointer-events:none}
.theme-dark .course-tag{background:hsl(var(--h) var(--s) calc(var(--l) + 18%)/.18);border-color:hsl(var(--h) var(--s) var(--l)/.45)}
/* Flash highlight for project cards when filtering by clicking a course title */
@keyframes courseFlash{0%{box-shadow:0 0 0 0 rgba(42,125,225,.55);transform:translateY(0)}40%{box-shadow:0 0 0 8px rgba(42,125,225,0);transform:translateY(-2px)}100%{box-shadow:0 0 0 0 rgba(42,125,225,0);transform:translateY(0)}}
.course-match-flash{animation:courseFlash 1.1s ease-out 1;background:linear-gradient(135deg,rgba(42,125,225,.1),rgba(127,211,255,.08));border-color:rgba(42,125,225,.55)!important}
.theme-dark .course-match-flash{background:linear-gradient(135deg,rgba(20,71,120,.55),rgba(42,125,225,.25));border-color:rgba(127,211,255,.7)!important}
/* Group header (term) */
.course-timeline li.course-group{background:transparent;border:0;box-shadow:none;padding:.2rem .25rem .2rem 1rem;counter-increment:none;opacity:1;transform:none;animation:none}
.course-timeline li.course-group::before{display:none}
.course-group .course-term-label{position:sticky;top:0;z-index:3;backdrop-filter:blur(6px);font:700 .58rem/1 Inter,system-ui,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:var(--brand);background:linear-gradient(90deg,rgba(42,125,225,.12),rgba(127,211,255,.12));padding:.4rem .6rem .38rem;border-radius:10px;display:inline-block;box-shadow:0 2px 6px -4px rgba(16,71,120,.35)}
.theme-dark .course-group .course-term-label{color:var(--brand-2);background:rgba(127,211,255,.12)}
/* Planned items */
.course-timeline li.planned{border-style:dashed;opacity:.92;position:relative}
.course-timeline li.planned::before{background:linear-gradient(135deg,#889fb4,#b7ccda)}
.course-timeline li.planned .course-title::after{content:"Planned";margin-left:.4rem;font:700 .5rem/1 Inter,system-ui,sans-serif;letter-spacing:.6px;padding:2px 5px;border-radius:6px;background:rgba(42,125,225,.1);color:var(--brand);border:1px solid rgba(42,125,225,.25)}
.theme-dark .course-timeline li.planned .course-title::after{background:rgba(127,211,255,.15);color:var(--brand-2);border-color:rgba(127,211,255,.3)}
.theme-dark .course-timeline li.planned::before{background:linear-gradient(135deg,#345c78,#4d7fa3)}
.course-timeline li:hover{border-color:rgba(42,125,225,.35);box-shadow:0 10px 28px -10px rgba(16,71,120,.32)}
.theme-dark .course-timeline li:hover{border-color:rgba(127,211,255,.4);box-shadow:0 14px 36px -12px rgba(0,0,0,.6)}
@media (max-width:980px){.courses-card{position:static}}
.btn{background:linear-gradient(90deg,var(--brand),var(--brand-2));border:none;color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none;display:inline-block;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;border:2px solid var(--brand);color:var(--brand)}
.btn.small{padding:8px 12px;font-size:.95rem}
/* Nav extra area (theme toggle relocates here on wide screens) */
.nav-extra{display:flex;align-items:center;gap:.9rem;margin-left:auto;margin-right:0}
.nav-extra .theme-toggle{display:none}
/* Small circular icon buttons (GitHub, LinkedIn, Mail) */
.icon-circle{--size:40px;width:var(--size);height:var(--size);min-width:var(--size);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;text-decoration:none;box-shadow:0 6px 18px -6px rgba(16,71,120,.35);position:relative;overflow:hidden;font-size:.95rem;transition:transform .25s, box-shadow .25s, filter .4s}
.icon-circle svg{display:block}
.icon-circle:hover{transform:translateY(-3px);box-shadow:0 12px 28px -10px rgba(16,71,120,.45)}
.icon-circle:active{transform:translateY(-1px)}
.icon-circle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.theme-dark .icon-circle{background:linear-gradient(135deg,#234a69,#2f678d)}
.icon-circle::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 35%,rgba(255,255,255,.35),transparent 60%);mix-blend-mode:overlay;pointer-events:none}
@media (max-width:760px){.icon-circle{--size:44px}}
/* Contact button variant with subtle glow */
.btn-contact{position:relative;isolation:isolate;overflow:hidden;}
.btn-contact::before{content:"";position:absolute;inset:-2px;background:linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 50%,var(--brand) 100%);filter:blur(10px) opacity(.0);transition:filter .4s;z-index:-1}
.btn-contact:hover::before{filter:blur(18px) opacity(.6)}
.btn-contact:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}
/* Contact button icon layout */
.btn-contact{display:inline-flex;align-items:center;justify-content:center;padding:9px 24px;font-size:.9rem;font-weight:600;border-radius:999px;min-height:40px;line-height:1;gap:.6rem;letter-spacing:.5px;box-shadow:0 10px 24px -10px rgba(16,71,120,.55),0 6px 14px -6px rgba(16,71,120,.35),0 0 0 1px rgba(255,255,255,.35);background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 100%)}
.btn-contact .icon-mail{display:none}
.btn-contact::before{display:none}
.btn-contact:hover{transform:translateY(-3px);box-shadow:0 16px 34px -12px rgba(16,71,120,.55),0 8px 18px -8px rgba(16,71,120,.35),0 0 0 1px rgba(255,255,255,.4)}
.btn-contact:active{transform:translateY(-1px)}
/* Allow triggering same pulse animation on the contact button if desired */
.btn-contact.pulsing{animation:sectionPulse 1.4s ease-out forwards}

/* Floating contact action button */
.contact-fab{position:fixed;right:24px;bottom:26px;z-index:250;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;font:600 .8rem/1 Inter,system-ui,sans-serif;padding:14px 18px;border-radius:30px;text-decoration:none;box-shadow:0 10px 32px -8px rgba(16,71,120,.35),0 4px 12px -4px rgba(16,71,120,.25);display:inline-flex;align-items:center;gap:.45rem;letter-spacing:.5px;transition:transform .25s, box-shadow .25s}
.contact-fab:hover{transform:translateY(-4px)}
.contact-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:640px){.contact-fab{right:16px;bottom:18px;padding:12px 16px}}
@media (prefers-reduced-motion:reduce){.contact-fab{transition:none}}

/* Highlight animation when scrolled into view via smooth scroll triggers */
#contact.highlight-pulse,#about.highlight-pulse,#skills.highlight-pulse{animation:sectionPulse 1.4s ease-out forwards}
@keyframes sectionPulse{0%{box-shadow:0 0 0 0 rgba(42,125,225,.55)}70%{box-shadow:0 0 0 18px rgba(42,125,225,0)}100%{box-shadow:0 0 0 0 rgba(42,125,225,0)}}

/* Anchor offset: provide breathing room above anchored sections when navigated via hash */
#about,#contact,#skills{scroll-margin-top:90px}

.container{max-width:1100px;margin:auto;padding:28px 18px}
.hero{position:relative;min-height:62vh;display:grid;place-items:center;text-align:center}
.hero.enhanced{min-height:78vh;padding-top:2rem;text-align:left;align-items:center}
.hero.minimal{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:3.5rem;padding:5rem 0 3rem;min-height:70vh;text-align:left}
.hero.minimal .hero-main{max-width:640px;display:flex;flex-direction:column;gap:1.25rem}
.hero-avatar{margin:0;flex:0 0 auto;position:relative;width:300px;height:380px;border-radius:46px;overflow:hidden;box-shadow:0 28px 60px -20px rgba(16,71,120,.35),0 8px 24px -8px rgba(16,71,120,.25);background:linear-gradient(135deg,#ffffff,#eaf6ff)}
.hero-avatar::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.85}
.hero-avatar img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:.25rem}
.hero.minimal .metrics.compact{margin-top:.5rem}
.minimal-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.2rem}
.hero.minimal .badge{background:rgba(42,125,225,.08);border-color:rgba(42,125,225,.15)}
@media (max-width:980px){
  .hero.minimal{flex-direction:column;padding:3.5rem 0 2rem;gap:2.5rem;text-align:center}
  .hero.minimal .hero-main{text-align:center;align-items:center}
  .hero-avatar{width:240px;height:310px}
}
@media (max-width:520px){
  .hero-avatar{width:200px;height:260px;border-radius:40px}
}
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3.2rem;width:100%;align-items:center}
.hero-col{position:relative;z-index:2}
.hero-text h1{margin-top:0}
.hero-text .tagline{font-size:1.05rem;max-width:56ch}
.hero-cta-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.75rem;margin-top:1.2rem}
.metrics{list-style:none;display:flex;gap:1.4rem;padding:0;margin:0}
.metrics li{display:flex;flex-direction:column;gap:.2rem}
.metric-value{font:700 1.35rem/1 Inter,system-ui,sans-serif;background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.5px}
.metric-label{font:600 .6rem/1 Inter,system-ui,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:var(--muted)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.scroll-x::-webkit-scrollbar{height:6px}
.scroll-x::-webkit-scrollbar-track{background:transparent}
.scroll-x::-webkit-scrollbar-thumb{background:rgba(42,125,225,.25);border-radius:4px}
.hero-side .profile-card{background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.9));border:1px solid rgba(42,125,225,.14);border-radius:34px;padding:2.1rem 2.4rem 2.2rem;display:grid;grid-template-columns:auto 1fr;grid-auto-rows:minmax(0,auto);column-gap:2rem;row-gap:1.2rem;align-items:start;box-shadow:0 18px 48px -12px rgba(16,71,120,.32);position:relative;overflow:hidden;width:clamp(340px,40vw,660px)}
.hero-side .profile-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 18%,rgba(127,211,255,.25),transparent 65%);opacity:.9;pointer-events:none}
.theme-dark .hero-side .profile-card{background:linear-gradient(180deg,#142736,#1d394f);border-color:rgba(127,211,255,.18)}
.avatar-wrap{margin:0;position:relative;width:180px;height:240px;border-radius:44px;overflow:hidden;box-shadow:0 18px 42px -14px rgba(16,71,120,.48);background:linear-gradient(135deg,#d7efff,#ffffff)}
.avatar-wrap::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;background:linear-gradient(135deg,var(--brand),var(--brand-2));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.92}
.theme-dark .avatar-wrap{background:linear-gradient(135deg,#1d394f,#142736)}
.avatar{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}
.subhead{font-size:1rem;margin:0 0 .5rem;font-family:'Playfair Display',Georgia,serif;font-weight:600;letter-spacing:.4px}
.current-focus p{margin:0;font-size:.9rem;line-height:1.5;color:var(--muted)}
.profile-body{display:flex;flex-direction:column;gap:1rem;min-width:0}
.profile-body .quick-links{margin-top:.2rem}
@media (max-width:900px){
  .hero-side .profile-card{width:100%;padding:1.9rem 2rem;column-gap:1.6rem}
  .avatar-wrap{width:160px;height:210px}
}
@media (max-width:720px){
  .hero-side .profile-card{grid-template-columns:1fr;row-gap:1.2rem;padding:1.6rem 1.5rem;width:100%}
  .avatar-wrap{width:140px;height:184px;border-radius:36px}
}
.quick-links{display:grid;gap:.45rem;margin-top:.3rem}
.quick-links .mini-link{text-decoration:none;font:600 .72rem/1 Inter,system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--brand);position:relative;padding:.45rem .65rem;border-radius:10px;background:rgba(42,125,225,.08);border:1px solid rgba(42,125,225,.18);display:inline-block}
.quick-links .mini-link:hover{background:rgba(42,125,225,.12)}
.theme-dark .quick-links .mini-link{background:rgba(127,211,255,.12);border-color:rgba(127,211,255,.25);color:var(--brand-2)}
.hero-glow{position:absolute;inset:0;pointer-events:none;z-index:0;/* Removed blue gradient overlay */background:none;mix-blend-mode:normal;display:none}
.about-split{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start}
.about-split .muted-line{color:var(--muted);font-size:.9rem}
.highlight-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;font-size:.9rem}
.highlight-list li{position:relative;padding-left:1.4rem;line-height:1.5}
.highlight-list .dot{position:absolute;left:0;top:.4rem;width:.75rem;height:.75rem;border-radius:50%;background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 0 4px rgba(42,125,225,.15)}
.theme-dark .highlight-list .dot{box-shadow:0 0 0 4px rgba(127,211,255,.15)}
@media (max-width:860px){
  .hero-grid{gap:2.2rem}
  .hero.enhanced{min-height:unset;padding-top:1rem}
  .metrics{gap:1rem}
  .hero-side .profile-card{padding:1.1rem 1.15rem}
}
@media (max-width:640px){
  .hero-cta-row{flex-direction:column;align-items:stretch}
  .metrics{justify-content:space-between;width:100%}
  .hero-text .tagline{font-size:1rem}
}
.hi{font-weight:600;color:var(--muted);display:block}
.name{font-family:'Playfair Display',Georgia,serif;font-weight:700;letter-spacing:.5px;font-size:var(--step-3);background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent;}
.tagline{margin-top:10px;color:var(--muted);font-size:1.1rem}
.cta{margin-top:18px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.meta-badges{margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.badge{background:rgba(255,255,255,.7);border:1px solid rgba(42,125,225,.15);padding:6px 10px;border-radius:var(--radius-pill);font-weight:600;font-size:.75rem;letter-spacing:.5px;text-transform:uppercase}
.floating-card{position:absolute;right:24px;bottom:-22px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:1px solid rgba(42,125,225,.12);box-shadow:var(--shadow);border-radius:16px;padding:14px 16px;max-width:320px;animation:float 6s ease-in-out infinite}
.theme-dark .floating-card{background:rgba(20,39,54,.85);border-color:rgba(127,211,255,.2)}
.floating-card h3{margin-bottom:6px}

.card{background:var(--card);border:1px solid rgba(42,125,225,.08);box-shadow:var(--shadow);border-radius:20px;padding:22px;margin:28px 0}
h2{font-family:'Playfair Display',Georgia,serif;font-weight:600;margin-bottom:12px}
.grid{display:grid;gap:16px}
/* Slightly larger project tile base width on wider layout */
.projects-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@media (max-width:780px){.projects-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.blog-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.blog-hero{position:relative;overflow:hidden}
.blog-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 20%,rgba(42,125,225,.15),transparent 60%),radial-gradient(circle at 10% 75%,rgba(127,211,255,.25),transparent 65%)}
.blog-tagline{color:var(--muted);max-width:60ch;margin:0 0 1.2rem}
.blog-controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-top:.5rem}
.blog-search input{min-width:200px}
.posts-grid{display:grid;gap:28px}
.news-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:2.5rem;margin-top:1.5rem}
.news-main{min-width:0}
.news-sidebar{display:flex;flex-direction:column;gap:1.6rem;position:sticky;top:110px;align-self:start}
.sidebar-card{margin:0;padding:1.25rem 1.35rem;border-radius:18px}
.sidebar-title{margin:0 0 .75rem;font-size:1.05rem;letter-spacing:.5px;font-family:'Playfair Display',Georgia,serif}
.latest-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.85rem}
.latest-list a{text-decoration:none;color:var(--ink);font-weight:600;line-height:1.35}
.latest-list a:hover{text-decoration:underline}
.tag-mini-cloud{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tag-mini{background:rgba(42,125,225,.08);border:1px solid rgba(42,125,225,.18);padding:6px 10px;border-radius:999px;font:600 .6rem/1 Inter,system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;color:var(--ink);transition:background .25s,border-color .25s}
.tag-mini:hover{background:rgba(42,125,225,.14)}
.mini{font-size:.8rem;line-height:1.45;color:var(--muted);margin:0}
.news-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.news-grid .feature{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;position:relative;padding:2.2rem 2.2rem 2rem}
.news-grid .feature::before{content:"FEATURE";position:absolute;top:10px;right:18px;font:700 .55rem/1 Inter,system-ui,sans-serif;letter-spacing:.7px;color:var(--brand);background:rgba(42,125,225,.08);padding:.4rem .55rem;border-radius:8px}
.news-grid .feature h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);line-height:1.15}
.news-grid .feature .excerpt{font-size:1rem;max-width:60ch}
.news-grid .feature .post-body-wrap{grid-column:1/-1}
@media (max-width:1100px){.news-layout{grid-template-columns:1fr 300px}}
@media (max-width:960px){.news-layout{grid-template-columns:1fr 260px}.news-grid .feature{grid-template-columns:1fr}}
@media (max-width:820px){.news-layout{grid-template-columns:1fr}.news-sidebar{position:static;flex-direction:row;overflow-x:auto;padding-bottom:.5rem;margin-top:.5rem}.sidebar-card{min-width:240px;flex:0 0 auto}}
@media (max-width:640px){.news-grid .feature{padding:1.6rem 1.4rem 1.4rem;gap:1.2rem}.news-sidebar{flex-direction:column;overflow:visible}.sidebar-card{min-width:unset}}
.post.tile{display:flex;flex-direction:column;gap:.75rem;padding:22px;position:relative}
/* Blog specific space utilization tweaks */
body.blog-page .container{max-width:1320px}
@media (min-width:1400px){body.blog-page .container{max-width:1480px}}
.blog-hero{margin-bottom:18px}
.news-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.news-grid .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1000px){.news-grid .feature{grid-template-columns:1fr}}
/* Tighter top spacing on blog page */
body.blog-page .container{padding-top:34px}
body.blog-page .blog-hero{margin-top:4px}
.post-head h3{margin:0 0 .25rem;font-weight:700}
.post-meta{font:600 .6rem/1 Inter,system-ui,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.post .excerpt{margin:0 0 .25rem;color:var(--muted)}
.chip-line{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.25rem}
.post-body-wrap{border:1px solid rgba(42,125,225,.12);background:linear-gradient(180deg,#ffffff,#f6fbff);padding:.9rem 1rem;border-radius:14px}
.post-body-wrap summary{cursor:pointer;font:600 .65rem/1 Inter,system-ui,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:var(--brand);margin:-.4rem -0.4rem .6rem;padding:.4rem .4rem;border-radius:10px;list-style:none}
.post-body-wrap[open] summary{background:rgba(42,125,225,.06)}
.post-body{animation:fadeUp .5s ease}
.prose p{margin:0 0 1rem}
.prose code{font-size:.8em}
.prose pre{margin:0 0 1rem}
.prose ul,.prose ol{margin:0 0 1rem 1.2rem;display:grid;gap:.35rem}
.prose li{line-height:1.5}
.prose blockquote{margin:0 0 1rem;padding:.9rem 1rem;border-left:4px solid var(--brand);background:rgba(42,125,225,.06);border-radius:10px;font-style:italic}
.prose hr{border:0;height:1px;background:linear-gradient(90deg,rgba(42,125,225,.25),rgba(127,211,255,.4),rgba(42,125,225,.25));margin:1.4rem 0}
.theme-dark .post-body-wrap{background:linear-gradient(180deg,#142736,#1b3244);border-color:rgba(127,211,255,.18)}
.theme-dark .post-body-wrap summary{color:var(--brand-2)}
.theme-dark .post-body-wrap[open] summary{background:rgba(127,211,255,.08)}
.theme-dark .prose blockquote{background:rgba(127,211,255,.08);border-left-color:var(--brand-2)}
.theme-dark .prose hr{background:linear-gradient(90deg,rgba(127,211,255,.15),rgba(127,211,255,.4),rgba(127,211,255,.15))}
.blog-aux-links{display:flex;gap:.75rem;align-items:center;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.aux-link{color:var(--brand);text-decoration:none;position:relative}
.aux-link::after{content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .25s}
.aux-link:hover::after{width:100%}
.pager{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0}
.pager button{background:rgba(42,125,225,.08);border:1px solid rgba(42,125,225,.18);padding:.55rem .85rem;border-radius:10px;font:600 .7rem/1 Inter,system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;color:var(--ink);transition:background .25s,border-color .25s}
.pager button.active{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;border-color:var(--brand)}
.pager button:hover:not(.active){background:rgba(42,125,225,.14)}
.theme-dark .pager button{background:rgba(127,211,255,.12);border-color:rgba(127,211,255,.22);color:var(--ink)}
.theme-dark .pager button.active{background:linear-gradient(90deg,var(--brand),var(--brand-2));border-color:var(--brand)}
.tags-page .tag-cloud{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:1rem}
.tag-card{background:var(--card);border:1px solid rgba(42,125,225,.1);padding:1rem 1rem .85rem;border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.35rem}
.tag-card a{font-weight:600;text-decoration:none;color:var(--brand);font-size:.9rem}
.tag-card small{color:var(--muted);font-size:.65rem;letter-spacing:.6px;text-transform:uppercase}
.theme-dark .tag-card{background:linear-gradient(180deg,#142736,#1d394f);border-color:rgba(127,211,255,.18)}
.tile{background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.8));border:1px solid rgba(42,125,225,.1);border-radius:16px;padding:16px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.tile:hover{transform:translateY(-4px)}
.tile:focus{outline:3px solid var(--brand)}
.tile h3{margin-bottom:6px;font-weight:700;letter-spacing:.3px}
.chip{display:inline-block;margin-right:6px;margin-top:8px;background:rgba(42,125,225,.08);border:1px solid rgba(42,125,225,.18);padding:4px 10px;border-radius:var(--radius-pill);font-size:.7rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--ink)}
.chip-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.chip-list li{background:rgba(255,255,255,.9);border:1px solid rgba(42,125,225,.12);padding:8px 12px;border-radius:var(--radius-pill);font-weight:600;letter-spacing:.4px;text-transform:uppercase;font-size:.7rem}

.center{text-align:center}.mt{margin-top:12px}

.site-footer{margin-top:24px;text-align:center;padding:28px;color:var(--muted)}
/* Reveal animation system */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.4,.2,.2,1), transform .85s cubic-bezier(.4,.2,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay]{transition-delay:calc(var(--delay,0) * 1ms)}

/* Journey / Timeline */
.journey h2{margin-bottom:1.4rem}
.timeline{list-style:none;margin:0 auto;padding:0;position:relative;max-width:980px;--tl-progress:0}
/* Base spine (full length) */
.timeline::after{content:"";position:absolute;top:0;bottom:0;width:4px;left:50%;transform:translateX(-50%);border-radius:4px;background:linear-gradient(180deg,rgba(42,125,225,.18),rgba(127,211,255,.18));opacity:.55;box-shadow:0 0 0 1px rgba(42,125,225,.15),0 0 18px -4px rgba(42,125,225,.28);mix-blend-mode:normal;pointer-events:none}
/* Progress fill */
.timeline::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:4px;height:calc(var(--tl-progress) * 1%);background:linear-gradient(180deg,var(--brand),var(--brand-2));border-radius:4px;filter:drop-shadow(0 0 6px rgba(42,125,225,.55)) drop-shadow(0 0 16px rgba(127,211,255,.4));transition:height .45s cubic-bezier(.4,.2,.2,1);pointer-events:none}
.timeline-item{position:relative;padding:0 0 2.4rem 0;width:100%}
.timeline-item:last-child{padding-bottom:.3rem}
.timeline-item{--t-delay:calc(var(--i,0) * 90ms)}
.timeline-item::before{content:"";position:absolute;top:.55rem;left:50%;transform:translate(-50%,0) scale(.55);width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95) 0 52%,rgba(42,125,225,.3) 58% 100%);box-shadow:0 0 0 3px rgba(42,125,225,.18),0 4px 9px -4px rgba(16,71,120,.28);transition:transform .6s cubic-bezier(.4,.2,.2,1), box-shadow .6s, background .6s, filter .6s}
.timeline-item.in::before{transform:translate(-50%,0) scale(.7)}
.timeline-item.passed::before{background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 0 0 4px rgba(42,125,225,.22),0 0 0 9px rgba(42,125,225,.08),0 6px 16px -6px rgba(16,71,120,.45)}
.timeline-item.active::before{transform:translate(-50%,0) scale(1);filter:brightness(1.08)}
.timeline-item.active.passed::before{animation:tlNodePulse 2.8s ease-in-out infinite}
@keyframes tlNodePulse{0%,100%{box-shadow:0 0 0 4px rgba(42,125,225,.24),0 0 0 10px rgba(42,125,225,0),0 6px 18px -6px rgba(16,71,120,.45)}50%{box-shadow:0 0 0 4px rgba(42,125,225,.24),0 0 0 10px rgba(42,125,225,.18),0 6px 22px -6px rgba(16,71,120,.55)}}
.timeline-item:hover::before{filter:brightness(1.15)}
.theme-dark .timeline-item::before{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.8) 0 48%,rgba(127,211,255,.25) 55% 100%);box-shadow:0 0 0 3px rgba(127,211,255,.22),0 4px 9px -4px rgba(0,0,0,.5)}
.theme-dark .timeline-item.passed::before{background:linear-gradient(135deg,var(--brand-2),var(--brand));box-shadow:0 0 0 4px rgba(127,211,255,.32),0 0 0 9px rgba(127,211,255,.12),0 8px 18px -6px rgba(0,0,0,.6)}
.theme-dark .timeline-item.active.passed::before{box-shadow:0 0 0 4px rgba(127,211,255,.34),0 0 0 10px rgba(127,211,255,.18),0 10px 24px -8px rgba(0,0,0,.65)}
.ti-header{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.45rem;position:relative;z-index:2}
.ti-header h3{margin:0;font-size:1.05rem;line-height:1.25;font-weight:600}
.ti-header .at{font-weight:400;font-style:italic;color:var(--muted);font-size:.85rem}
.ti-time{font:600 .6rem/1 Inter,system-ui,sans-serif;letter-spacing:.65px;text-transform:uppercase;color:var(--muted)}
.timeline-item p{margin:.3rem 0 .75rem}
.ti-points{margin:0;padding:0;list-style:none;display:grid;gap:.4rem;font-size:.8rem}
.ti-points li{position:relative;padding-left:1rem;line-height:1.4}
.ti-points li::before{content:"";position:absolute;left:0;top:.55rem;width:6px;height:6px;background:var(--brand);border-radius:50%;opacity:.85}
@media (min-width:880px){
  .timeline-item{width:50%}
  .timeline-item:nth-child(odd){padding-right:3.8rem;text-align:right;margin-left:0}
  .timeline-item:nth-child(even){padding-left:3.8rem;text-align:left;margin-left:50%}
  .timeline-item:nth-child(odd) .ti-points li{padding-left:0;padding-right:1rem}
  .timeline-item:nth-child(odd) .ti-points li::before{left:auto;right:0}
}
.theme-dark .timeline::after{background:linear-gradient(180deg,rgba(127,211,255,.22),rgba(42,125,225,.22));opacity:.65;box-shadow:0 0 0 1px rgba(127,211,255,.25),0 0 24px -6px rgba(127,211,255,.4)}
.journey-actions .btn{margin-top:.4rem}
/* Timeline card enhancement */
.timeline-card{background:linear-gradient(180deg,#ffffff,rgba(255,255,255,.9));border:1px solid rgba(42,125,225,.12);padding:1.05rem 1.15rem 1.15rem;border-radius:20px;box-shadow:0 6px 20px -6px rgba(16,71,120,.18);backdrop-filter:blur(4px);position:relative;overflow:hidden;transition:box-shadow .5s, transform .5s,border-color .5s, background .5s;opacity:0;transform:translateY(14px) translateZ(0);animation:tlFade .85s cubic-bezier(.4,.2,.2,1) forwards;animation-delay:var(--t-delay)}
.timeline-card::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 85% 15%,rgba(127,211,255,.25),transparent 60%),
  linear-gradient(120deg,rgba(42,125,225,.08),rgba(127,211,255,.08));
  opacity:0;transition:opacity .8s}
.timeline-item.in .timeline-card::after{opacity:1}
@keyframes tlFade{to{opacity:1;transform:translateY(0) translateZ(0)}}
.timeline-card:hover{transform:translateY(-6px);box-shadow:0 18px 46px -14px rgba(16,71,120,.3)}
.timeline-card:hover{border-color:rgba(42,125,225,.3)}
.theme-dark .timeline-card{background:linear-gradient(180deg,#142736,#1d394f);border-color:rgba(127,211,255,.2);box-shadow:0 10px 30px -12px rgba(0,0,0,.55)}
.theme-dark .timeline-card:hover{border-color:rgba(127,211,255,.4);box-shadow:0 20px 52px -18px rgba(0,0,0,.75)}
/* Collapsible timeline */
.ti-collapsible{padding:0}
.ti-collapsible{cursor:pointer}
.ti-collapsible:not([open]) .ti-content{display:none}
.ti-summary{list-style:none;display:flex;align-items:flex-start;gap:.9rem;cursor:pointer;position:relative;padding:.9rem 1rem .9rem 1rem;border-radius:18px;-webkit-user-select:none;user-select:none;outline:none;transition:background .4s}
.ti-summary:hover{background:rgba(42,125,225,.05)}
.ti-summary:focus-visible{box-shadow:0 0 0 3px rgba(42,125,225,.35);background:rgba(42,125,225,.06)}
.ti-summary::-webkit-details-marker{display:none}
.ti-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 4px 14px -4px rgba(16,71,120,.4),0 0 0 1px rgba(255,255,255,.4);flex:0 0 44px;position:relative;overflow:hidden}
.ti-icon::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 35%,rgba(255,255,255,.25),transparent 70%);mix-blend-mode:overlay;pointer-events:none}
.ti-text-group{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.ti-text-group h3{margin:0;font-size:.95rem;line-height:1.25;font-weight:600;letter-spacing:.3px}
.ti-caret{margin-left:auto;position:relative;top:4px;width:18px;height:18px;flex:0 0 18px}
.ti-caret::before{content:"";position:absolute;inset:0;display:block;background:conic-gradient(from 180deg,var(--brand) 0 25%,transparent 25% 75%, var(--brand-2) 75% 100%);mask:polygon(50% 70%,15% 30%,85% 30%);-webkit-mask:polygon(50% 70%,15% 30%,85% 30%);opacity:.55;transition:transform .45s,opacity .45s}
.ti-collapsible[open] .ti-caret::before{transform:rotate(180deg);opacity:.95}
.ti-content{padding:.4rem 1.1rem 1rem 1.1rem}
.ti-collapsible[open] .ti-summary{background:rgba(42,125,225,.06)}
.theme-dark .ti-collapsible[open] .ti-summary{background:rgba(127,211,255,.08)}
@media (max-width:879px){
  .ti-summary{padding:.85rem .95rem}
  .ti-icon{width:40px;height:40px}
}
/* Reduced motion preference: minimize timeline animations */
@media (prefers-reduced-motion:reduce){
  .timeline::before{transition:none}
  .timeline-item::before{transition:none}
  .timeline-item.active.passed::before{animation:none}
  .timeline-card, .timeline-item, .timeline-card::after{animation:none;transition:none}
}
@media (max-width:879px){
  .timeline::before{left:12px;transform:none}
  .timeline-item,.timeline-item:nth-child(even),.timeline-item:nth-child(odd){width:100%;padding:0 0 2.2rem 0;text-align:left;margin-left:0}
  .timeline-item::before{left:12px;transform:translate(0,0) scale(.85)}
  .timeline-card{margin-left:2.4rem}
  .timeline-item:nth-child(odd) .ti-points li{padding-right:0;padding-left:1rem}
  .timeline-item:nth-child(odd) .ti-points li::before{right:auto;left:0}
}

/* Projects page enhancements */
.projects-card{overflow:visible;padding:28px 30px}
@media (min-width:1400px){.projects-card{padding:32px 40px}}
.projects-head{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.2rem}
.projects-controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.segmented{display:inline-flex;background:rgba(255,255,255,.6);backdrop-filter:blur(6px);border:1px solid rgba(42,125,225,.15);padding:4px;border-radius:14px;position:relative}
.seg-btn{background:transparent;border:0;padding:8px 14px;font:600 .75rem/1 Inter,system-ui,sans-serif;border-radius:10px;cursor:pointer;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);position:relative;transition:color .25s}
.seg-btn.active{color:var(--ink);}
.seg-btn::after{content:"";position:absolute;inset:0;border-radius:10px;opacity:0;box-shadow:0 0 0 1px rgba(42,125,225,.25),0 4px 10px -2px rgba(16,71,120,.18);background:linear-gradient(180deg,#fff,rgba(255,255,255,.85));transition:opacity .25s}
.seg-btn.active::after{opacity:1;z-index:-1}
.seg-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.segmented.multi .seg-btn.active:not([data-filter="all"])::after{opacity:1}
.results-line{margin-top:-.25rem;font:600 .65rem/1 Inter,system-ui,sans-serif;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.course-filter-chip{margin-left:.5rem;display:inline-flex;align-items:center;gap:.4rem;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;padding:4px 10px;border-radius:999px;font:700 .55rem/1 Inter,system-ui,sans-serif;letter-spacing:.7px;box-shadow:0 4px 10px -4px rgba(16,71,120,.4)}
.course-filter-chip button{background:rgba(255,255,255,.18);border:0;color:#fff;width:18px;height:18px;line-height:18px;border-radius:50%;cursor:pointer;font:600 .8rem/18px Inter,system-ui,sans-serif;padding:0;display:inline-block}
.course-filter-chip button:hover{background:rgba(255,255,255,.3)}
.theme-dark .course-filter-chip{background:linear-gradient(90deg,var(--brand-2),var(--brand));}
.search-wrap{display:flex;gap:.6rem;align-items:center}
.search-wrap input[type=search]{padding:10px 14px;border-radius:12px;border:1.5px solid rgba(42,125,225,.25);background:rgba(255,255,255,.7);font:500 .85rem/1 Inter,system-ui,sans-serif;min-width:180px}
.search-wrap select{padding:10px 12px;border-radius:12px;border:1.5px solid rgba(42,125,225,.25);background:rgba(255,255,255,.7);font:500 .75rem/1 Inter,system-ui,sans-serif;letter-spacing:.5px;text-transform:uppercase}
.search-wrap input:focus,.search-wrap select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(42,125,225,.25)}
.project{position:relative;display:flex;flex-direction:column;gap:.65rem}
.proj-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.proj-badge{font:600 .55rem/1 Inter,system-ui,sans-serif;letter-spacing:.8px;text-transform:uppercase;padding:5px 8px;border-radius:8px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 2px 6px -2px rgba(16,71,120,.35)}
.proj-thumb{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;margin:-4px -4px 10px;background:linear-gradient(135deg,#d7efff,#ffffff);box-shadow:0 4px 14px -4px rgba(16,71,120,.25)}
.proj-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.project:hover .proj-thumb img{transform:scale(1.05);transition:transform .65s ease}
.theme-dark .proj-thumb{background:linear-gradient(135deg,#142736,#1d394f);box-shadow:0 4px 14px -4px rgba(0,0,0,.45)}
.stack-list{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap;margin:4px 0 0;padding:0}
.stack-list li{background:rgba(42,125,225,.08);border:1px solid rgba(42,125,225,.18);padding:4px 8px;border-radius:999px;font:600 .55rem/1 Inter,system-ui,sans-serif;letter-spacing:.7px;text-transform:uppercase}
.fade-in{opacity:0;transform:translateY(12px);animation:fadeUp .7s ease forwards;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.hidden-card{display:none!important}

/* Modal */
.proj-modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,41,64,.4);backdrop-filter:blur(8px);z-index:300;opacity:0;pointer-events:none;transition:opacity .3s ease}
.proj-modal-overlay.open{opacity:1;pointer-events:auto}
.proj-modal{background:#fff;border:1px solid rgba(42,125,225,.15);border-radius:22px;box-shadow:0 20px 50px -10px rgba(16,71,120,.35);max-width:560px;width:clamp(320px,90vw,560px);padding:1.75rem 1.9rem;display:flex;flex-direction:column;gap:1rem;position:relative;animation:scaleIn .4s ease}
@keyframes scaleIn{0%{transform:translateY(12px) scale(.96);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
.proj-modal h3{margin:0;font-size:var(--step-2)}
.proj-modal p{margin:0 0 .75rem}
.close-modal{position:absolute;top:10px;right:10px;border:0;background:rgba(42,125,225,.1);color:var(--ink);font-size:1.2rem;width:38px;height:38px;border-radius:12px;cursor:pointer;display:grid;place-items:center;line-height:1;font-weight:600}
.close-modal:hover{background:rgba(42,125,225,.18)}
.modal-links a{font-weight:600}
@media (max-width:600px){.proj-modal{padding:1.25rem 1.25rem}}

/* Clouds */
.clouds{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cloud{position:absolute;background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.95), rgba(255,255,255,.3) 60%, rgba(255,255,255,0) 70%);filter:blur(0.5px);border-radius:50%;animation:drift linear infinite}
.c1{width:420px;height:180px;top:8vh;left:-20vw;animation-duration:120s}
.c2{width:520px;height:200px;top:22vh;left:-30vw;animation-duration:140s;animation-delay:-30s}
.c3{width:360px;height:160px;top:45vh;left:-25vw;animation-duration:110s;animation-delay:-10s}
.c4{width:460px;height:190px;top:65vh;left:-35vw;animation-duration:150s;animation-delay:-50s}
.c5{width:380px;height:160px;top:78vh;left:-28vw;animation-duration:130s;animation-delay:-70s}
/* Extra clouds (projects page only - added elements only appear there) */
.c6{width:300px;height:130px;top:12vh;left:-18vw;animation-duration:115s;animation-delay:-20s;opacity:.9}
.c7{width:560px;height:220px;top:38vh;left:-40vw;animation-duration:160s;animation-delay:-40s;opacity:.88}
.c8{width:260px;height:110px;top:58vh;left:-15vw;animation-duration:100s;animation-delay:-25s;opacity:.92}
.c9{width:480px;height:200px;top:82vh;left:-42vw;animation-duration:170s;animation-delay:-90s;opacity:.85}
@keyframes drift{
  0%{transform:translateX(0)}
  100%{transform:translateX(140vw)}
}
@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0)}
}

/* Tilt hover */
.tilt{transform-style:preserve-3d;perspective:600px}
.tilt:hover{transform:translateY(-6px) rotateX(2deg) rotateY(-2deg)}

/* Responsive */
@media (max-width: 760px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;right:16px;top:62px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px) saturate(150%);border:1px solid rgba(42,125,225,.18);border-radius:22px;padding:18px 20px;display:none;flex-direction:column;gap:14px;box-shadow:0 28px 60px -14px rgba(16,71,120,.35);min-width:200px}
  .nav-links.open{display:flex;animation:menuPop .45s cubic-bezier(.4,.2,.2,1)}
  .nav-links li{animation:fadeSlide .5s ease forwards;opacity:0;transform:translateY(6px)}
  .nav-links.open li{--i:0}
  .nav-links.open li:nth-child(1){animation-delay:40ms}
  .nav-links.open li:nth-child(2){animation-delay:80ms}
  .nav-links.open li:nth-child(3){animation-delay:120ms}
  .nav-links.open li:nth-child(4){animation-delay:160ms}
  .nav-links.open li:nth-child(5){animation-delay:200ms}
  .nav-links.open li:nth-child(6){animation-delay:240ms}
  .nav-extra{display:none}
  .floating-card{position:static;margin-top:14px}
}
@keyframes menuPop{0%{transform:translateY(8px) scale(.96);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes fadeSlide{to{opacity:1;transform:none}}

/* Contact form */
.contact-section{position:relative;overflow:hidden}
.contact-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 15%, rgba(127,211,255,.35), transparent 60%),radial-gradient(circle at 10% 90%, rgba(42,125,225,.20), transparent 65%);pointer-events:none;}
.contact-intro{margin-top:-4px;margin-bottom:16px;color:var(--muted);font-size:.95rem}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.contact-grid .full{grid-column:1/-1}
.field-group{display:flex;flex-direction:column;gap:6px;position:relative}
.field-group input,.field-group textarea{width:100%;font:inherit;padding:12px 14px;border:1.5px solid rgba(42,125,225,.25);border-radius:14px;background:rgba(255,255,255,.85);backdrop-filter:blur(4px);box-shadow:0 2px 4px rgba(16,71,120,.05) inset,0 1px 0 rgba(255,255,255,.6);transition:border-color .2s, box-shadow .2s, background .3s}
.field-group input::placeholder,.field-group textarea::placeholder{color:#748aa2;letter-spacing:.5px}
.field-group input:focus,.field-group textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(42,125,225,.25),0 0 0 1px var(--brand);background:#fff}
.field-error{font-size:.7rem;font-weight:600;color:#c2410c;min-height:1em;letter-spacing:.5px;padding-left:4px}
.field-group.invalid input,.field-group.invalid textarea{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.25)}
.contact-actions{display:flex;align-items:center;gap:16px;margin-top:18px;flex-wrap:wrap}
.submit-btn{min-width:120px;position:relative}
.submit-btn.sending{opacity:.8;pointer-events:none}
.form-status{font-size:.75rem;letter-spacing:.5px;font-weight:600;color:var(--muted)}
.form-status.success{color:#047857}
.form-status.error{color:#dc2626}
.noscript{font-size:.75rem;color:var(--muted);margin-top:12px}
@media (max-width:640px){.contact-actions{flex-direction:column;align-items:stretch}.form-status{align-self:flex-start}}