/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Brand Colors */
    --blue:        #10367D;
    --blue-mid:    #1a4fa8;
    --blue-light:  #4d9fff;
    --green:       #A5CE00;
    --green-light: #b8d91a;

    /* Semantic Tokens — Light Mode */
    --primary:     var(--blue);
    --accent:      var(--green);
    --bg:          #ffffff;
    --bg2:         #f4f6f9;
    --bg3:         #eef0f5;
    --surface:     rgba(255,255,255,0.92);
    --text:        #1a1e2e;
    --text-muted:  #5a6480;
    --border:      rgba(16,54,125,0.10);
    --border-accent: rgba(165,206,0,0.35);

    /* Shadows */
    --shadow-sm:  0 2px 8px rgba(16,54,125,0.08);
    --shadow-md:  0 8px 28px rgba(16,54,125,0.12);
    --shadow-lg:  0 20px 60px rgba(16,54,125,0.14);
    --shadow-xl:  0 30px 90px rgba(16,54,125,0.18);
    --glow-green: 0 0 30px rgba(165,206,0,0.25);

    /* Motion */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft:  cubic-bezier(0.25, 1, 0.5, 1);
    --dur:        0.35s;

    /* Layout */
    --nav-h: 80px;
    --radius-sm:  8px;
    --radius-md:  16px;
    --radius-lg:  24px;
    --radius-xl:  32px;
    --radius-pill: 9999px;
}

html.dark-mode {
    --primary:     var(--green);
    --accent:      var(--blue-light);
    --bg:          #0b0d14;
    --bg2:         #111420;
    --bg3:         #181c2b;
    --surface:     rgba(20,23,36,0.96);
    --text:        #e8ecf8;
    --text-muted:  #8a91ab;
    --border:      rgba(255,255,255,0.06);
    --border-accent: rgba(165,206,0,0.25);
    --shadow-sm:  0 2px 8px rgba(0,0,0,0.30);
    --shadow-md:  0 8px 28px rgba(0,0,0,0.40);
    --shadow-lg:  0 20px 60px rgba(0,0,0,0.50);
    --shadow-xl:  0 30px 90px rgba(0,0,0,0.60);
    --glow-green: 0 0 30px rgba(165,206,0,0.18);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--green), var(--blue-mid));
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--green); }
html.dark-mode ::-webkit-scrollbar-track { background: #0e1019; }

/* Reading progress bar */
.reading-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--green), var(--blue-light), var(--green));
    background-size: 200% 100%;
    z-index: 10001;
    transition: width 0.08s linear;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px rgba(165,206,0,0.55);
    pointer-events: none;
}

/* `overflow-x: hidden` on html would break position:sticky for
   descendants (e.g. the certification stack), because `hidden`
   establishes a scroll container that sticky resolves against instead
   of the viewport. `clip` prevents the same iOS rubber-band horizontal
   scroll without creating a scroll container, so sticky still resolves
   against the real viewport. body uses clip for the same reason — its
   old overflow-x:hidden also established a scroll container and silently
   killed the certification stack pinning. */
html {
    scroll-behavior: smooth;
    width: 100%;
    overflow-x: clip;
}

body {
    font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    transition: background 0.3s ease, color 0.3s ease;
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
    padding-top: var(--nav-h);
}

body.cursor-active { cursor: auto !important; }

h1, h2, h3, h4, h5, h6,
.logo, .section-title, .hero-name-line {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
}

img { display: block; max-width: 100%; }
a { color: inherit; }

/* Custom selection */
::selection {
    background: var(--green);
    color: var(--blue);
}

/* ============================================================
   CONTAINER
   ============================================================ */
.container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 48px);
}

/* ============================================================
   LOADING SCREEN — Clean Minimal Redesign
   ============================================================ */
.loading-screen {
    position: fixed;
    inset: 0;
    background: #07090f;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.12s cubic-bezier(0.4,0,0.2,1), visibility 0.12s;
    overflow: hidden;
}

.loading-screen.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Subtle radial glow behind the center */
.loading-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%,
        rgba(165,206,0,0.06) 0%,
        rgba(16,54,125,0.04) 45%,
        transparent 100%);
    pointer-events: none;
}

/* Grid texture overlay */
.loading-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

/* Center content wrapper */
.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    position: relative;
    z-index: 1;
}

/* ── Big animated name ── */
.loader-name-big {
    display: flex;
    align-items: baseline;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(5rem, 20vw, 9rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    user-select: none;
}

.loader-name-big span {
    display: inline-block;
    color: #fff;
    opacity: 0;
    animation:
        letter-drop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        letter-wave 2.4s ease-in-out infinite;
}

.loader-name-big span:nth-child(1) { animation-delay: 0.15s, 1.1s; }
.loader-name-big span:nth-child(2) { animation-delay: 0.28s, 1.25s; }
.loader-name-big span:nth-child(3) { animation-delay: 0.41s, 1.40s; }
.loader-name-big span:nth-child(4) { animation-delay: 0.54s, 1.55s; }

.loader-name-big .ld-dot {
    color: var(--green);
    text-shadow: 0 0 32px rgba(165,206,0,0.9);
    animation:
        letter-drop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
        dot-pulse 1.6s ease-in-out infinite;
    animation-delay: 0.67s, 1.7s;
}

/* ── Bottom info ── */
.loader-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    animation: fade-up-in 0.5s ease forwards 1.3s;
}

/* Cycling funny messages */
.loader-messages {
    position: relative;
    height: 1.3em;
    width: 220px;
    overflow: hidden;
}

.loader-msg {
    position: absolute;
    inset: 0;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.10em;
    color: rgba(165,206,0,0.65);
    opacity: 0;
    transform: translateY(6px);
}

/* 4 msgs × 2.6s slot = 10.4s cycle, staggered */
.loader-msg:nth-child(1) { animation: msg-slide 10.4s infinite 1.0s; }
.loader-msg:nth-child(2) { animation: msg-slide 10.4s infinite 3.6s; }
.loader-msg:nth-child(3) { animation: msg-slide 10.4s infinite 6.2s; }
.loader-msg:nth-child(4) { animation: msg-slide 10.4s infinite 8.8s; }

/* Bouncing dots */
.loader-dots {
    display: flex;
    gap: 7px;
}

.loader-dots span {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: rgba(165,206,0,0.45);
    animation: dot-bounce 1.3s ease-in-out infinite;
}

.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ── Keyframes ── */
@keyframes letter-drop {
    0%   { opacity: 0; transform: translateY(-55px) rotate(-14deg) scale(0.55); }
    60%  { opacity: 1; transform: translateY(9px) rotate(5deg) scale(1.10); }
    80%  { transform: translateY(-4px) rotate(-2deg) scale(0.96); }
    100% { opacity: 1; transform: none; }
}

@keyframes letter-wave {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}

@keyframes dot-pulse {
    0%, 100% { transform: scale(1) translateY(0);    text-shadow: 0 0 20px rgba(165,206,0,0.5); }
    50%       { transform: scale(1.4) translateY(-8px); text-shadow: 0 0 45px rgba(165,206,0,1); }
}

@keyframes msg-slide {
    0%    { opacity: 0; transform: translateY(6px);  }
    8%    { opacity: 1; transform: translateY(0);     }
    18%   { opacity: 1; transform: translateY(0);     }
    26%   { opacity: 0; transform: translateY(-6px);  }
    100%  { opacity: 0; transform: translateY(6px);   }
}

@keyframes dot-bounce {
    0%, 100% { transform: translateY(0);   opacity: 0.45; }
    50%       { transform: translateY(-8px); opacity: 1;   }
}

@keyframes fade-up-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}



/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot,
.cursor-ring {
    display: none;
}

.cursor-dot {
    width: 7px; height: 7px;
    background: var(--green);
    transform: translate(-50%,-50%);
    transition: width 0.18s ease, height 0.18s ease, opacity 0.18s ease;
}

.cursor-ring {
    width: 34px; height: 34px;
    border: 1.5px solid rgba(165,206,0,0.55);
    transform: translate(-50%,-50%);
    transition: width 0.28s var(--ease-out),
                height 0.28s var(--ease-out),
                opacity 0.28s ease,
                border-color 0.28s ease;
}

.cursor-dot.cursor-hover  { width: 10px; height: 10px; background: var(--blue); }
.cursor-ring.cursor-hover { width: 54px; height: 54px; border-color: rgba(16,54,125,0.4); }

@media (hover: none) {
    .cursor-dot, .cursor-ring { display: none; }
    body { cursor: auto; }
}

/* ============================================================
   SCROLL PROGRESS INDICATOR
   ============================================================ */
.scroll-indicator {
    display: none;
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60px;
    background: rgba(165,206,0,0.12);
    border-radius: 10px;
    z-index: 999;
    border: 1px solid rgba(165,206,0,0.20);
}

.scroll-indicator::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    background: linear-gradient(180deg, var(--green), rgba(165,206,0,0.3));
    border-radius: 10px;
    animation: scrollFlow 2.2s ease-in-out infinite;
}

@keyframes scrollFlow {
    0%,100% { height: 100%; top: 0; }
    50%      { height: 40%; top: 60%; }
}

@media (max-width: 900px) {
    .scroll-indicator { display: none; }
}

/* ============================================================
   CERT LIGHTBOX
   ============================================================ */
.cert-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.93);
    z-index: 9000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.cert-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}
.cert-lightbox-back {
    position: absolute;
    top: 28px;
    left: 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 99px;
    padding: 11px 24px 11px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    z-index: 10;
}
.cert-lightbox-back::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(165, 206, 0, 0.15);
    border: 1px solid rgba(165, 206, 0, 0.35);
    border-radius: 50%;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f060';
    font-size: 0.7rem;
    color: #a5ce00;
    flex-shrink: 0;
    transition: background 0.22s ease, transform 0.22s ease;
}
.cert-lightbox-back:hover {
    background: rgba(165, 206, 0, 0.12);
    border-color: rgba(165, 206, 0, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(165,206,0,0.15);
}
.cert-lightbox-back:hover::before {
    background: rgba(165, 206, 0, 0.28);
    transform: translateX(-2px);
}
.cert-lightbox-back .fa-arrow-left { display: none; }
.cert-lightbox-img-wrap {
    max-width: min(92vw, 900px);
    max-height: 82vh;
}
.cert-lightbox-img-wrap img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    display: block;
}

/* ============================================================
   SCROLL-TO-TOP
   ============================================================ */
.scroll-top-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--blue-mid));
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(16px) scale(0.88);
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out), background 0.2s ease;
    z-index: 200;
    pointer-events: none;
    box-shadow: var(--shadow-md);
}

.scroll-top-btn.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.scroll-top-btn:hover {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--blue);
    transform: translateY(-3px);
    box-shadow: var(--glow-green);
}

html.dark-mode .scroll-top-btn {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--blue);
}

/* ============================================================
   NAVBAR
   ============================================================ */
@keyframes navbarReveal {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

@keyframes navItemFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    z-index: 1000;
    height: var(--nav-h);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid transparent;
    border-bottom-color: rgba(16,54,125,0.08);
    border-radius: 0;
    box-shadow: 0 1px 0 rgba(16,54,125,0.06);
    transition:
        top 0.45s var(--ease-out),
        width 0.45s var(--ease-out),
        height 0.45s var(--ease-out),
        border-radius 0.45s var(--ease-out),
        background 0.3s ease,
        box-shadow 0.35s ease,
        border-color 0.3s ease;
    overflow: visible;
    animation: navbarReveal 0.5s var(--ease-out) both;
}

/* Scrolled state: morph the full-width bar into a floating capsule ("pill"). */
.navbar--scrolled {
    top: 14px;
    width: min(94%, 960px);
    height: 62px;
    border-radius: var(--radius-pill, 999px);
    border-color: rgba(16,54,125,0.10);
    background: rgba(255,255,255,0.82);
    box-shadow: 0 14px 40px rgba(16,54,125,0.16), 0 2px 8px rgba(16,54,125,0.08);
}

html.dark-mode .navbar--scrolled {
    border-color: rgba(255,255,255,0.10);
    background: rgba(16,19,28,0.82);
    box-shadow: 0 14px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4);
}

html.dark-mode .navbar {
    background: rgba(11,13,20,0.96);
    border-bottom-color: rgba(255,255,255,0.05);
    box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

.navbar > .container {
    height: 100%;
}

.nav-wrapper {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
}

/* Logo */
/* Staggered entrance for logo, nav items, and right controls */
.nav-logo { text-decoration: none; animation: navItemFade 0.35s var(--ease-out) 0.12s both; }
.nav-right { animation: navItemFade 0.35s var(--ease-out) 0.12s both; }
.nav-menu li { animation: navItemFade 0.35s var(--ease-out) both; }
.nav-menu li:nth-child(1) { animation-delay: 0.18s; }
.nav-menu li:nth-child(2) { animation-delay: 0.22s; }
.nav-menu li:nth-child(3) { animation-delay: 0.26s; }
.nav-menu li:nth-child(4) { animation-delay: 0.30s; }
.nav-menu li:nth-child(5) { animation-delay: 0.34s; }
.nav-menu li:nth-child(6) { animation-delay: 0.38s; }
.nav-menu li:nth-child(7) { animation-delay: 0.42s; }

.logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: -0.05em;
}

html.dark-mode .logo-text { color: #fff; }
.logo-dot { color: var(--green); }

/* Nav Menu — center column of grid */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    transition: color 0.22s ease, background 0.22s ease;
    position: relative;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 13px;
    right: 13px;
    height: 2px;
    background: var(--green);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease-out);
}

.nav-link:hover {
    color: var(--blue);
    background: rgba(16,54,125,0.06);
}

.nav-link:hover::after {
    transform: scaleX(1);
}

html.dark-mode .nav-link:hover {
    color: var(--text);
    background: rgba(255,255,255,0.06);
}

.nav-link.active-link {
    color: var(--blue);
    font-weight: 600;
    background: rgba(16,54,125,0.06);
}

.nav-link.active-link::after {
    transform: scaleX(1);
}

html.dark-mode .nav-link.active-link {
    color: var(--green);
    background: rgba(165,206,0,0.07);
}

html.dark-mode .nav-link:hover::after,
html.dark-mode .nav-link.active-link::after {
    background: var(--green);
}

/* Nav Right — right column of grid, push to the end */
.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* Theme Toggle */
.theme-toggle {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--blue-mid));
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(18deg);
    box-shadow: var(--shadow-md);
}

html.dark-mode .theme-toggle {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--blue);
}

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px; height: 44px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hamburger:hover {
    background: rgba(16,54,125,0.06);
    border-color: rgba(16,54,125,0.15);
}

html.dark-mode .hamburger:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
}

.hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
    transform-origin: center;
}

.hamburger span:nth-child(2) { width: 14px; }

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); width: 20px; }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 20px; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
    position: relative;
    min-height: calc(100vh - var(--nav-h));
    background: linear-gradient(135deg, #10367D 0%, #1a4fa8 55%, #0d2555 100%);
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 80px 0 60px;
}

html.dark-mode .hero {
    background: linear-gradient(135deg, #080b14 0%, #0f1629 55%, #060a12 100%);
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.hero-blob {
    position: absolute;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    opacity: 0.08;
    animation: blobAnim 9s ease-in-out infinite;
}

.hero-blob-1 {
    width: 500px; height: 500px;
    background: var(--green);
    top: -150px; right: -150px;
    animation-duration: 9s;
}

.hero-blob-2 {
    width: 380px; height: 380px;
    background: #fff;
    bottom: -80px; left: -80px;
    animation-duration: 13s;
    animation-direction: reverse;
}

@keyframes blobAnim {
    0%,100% { transform: translate(0,0) rotate(0deg); }
    33%      { transform: translate(20px,-30px) rotate(120deg); }
    66%      { transform: translate(-25px,20px) rotate(240deg); }
}

.hero-particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
}

/* Subtle dot-grid texture — premium dark-tech pattern */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(165,206,0,0.18) 1px, transparent 1px);
    background-size: 36px 36px;
    z-index: 1;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
}

/* Hero Content */
.hero-content {
    display: flex;
    flex-direction: column;
    padding: 0 0 0 8px;
    min-width: 0;
}

.hero-availability-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: rgba(165,206,0,0.12);
    border: 1px solid rgba(165,206,0,0.30);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    margin-bottom: 24px;
    width: fit-content;
    animation: fadeUp 0.6s var(--ease-out) 0.1s both;
}

.avail-dot {
    width: 7px; height: 7px;
    background: var(--green);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(165,206,0,0.5); }
    50%      { box-shadow: 0 0 0 5px rgba(165,206,0,0); }
}

.hero-title-new {
    margin-bottom: 24px;
    animation: fadeUp 0.7s var(--ease-out) 0.2s both;
}

.hero-greeting-line {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 16px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-name-line {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(4rem, 9vw, 7rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.95;
    background: linear-gradient(120deg, #fff 0%, var(--green) 65%, var(--green-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.08em;
}

.hero-dot {
    color: var(--green);
    -webkit-text-fill-color: var(--green);
}

.hero-typed-line {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.45rem);
    font-weight: 600;
    color: var(--green);
    margin-bottom: 20px;
    min-height: 2.2em;
    animation: fadeUp 0.6s var(--ease-out) 0.3s both;
}

.typed-caret {
    display: inline-block;
    color: var(--green);
    animation: caretBlink 0.9s step-end infinite;
    margin-left: 1px;
}

@keyframes caretBlink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}

.hero-description {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    line-height: 1.8;
    color: rgba(255,255,255,0.80);
    max-width: 480px;
    margin-bottom: 32px;
    animation: fadeUp 0.6s var(--ease-out) 0.35s both;
}

/* Buttons */
.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 48px;
    animation: fadeUp 0.6s var(--ease-out) 0.4s both;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) ease,
                background var(--dur) ease,
                border-color 0.3s ease,
                color 0.3s ease;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--blue);
    box-shadow: 0 8px 28px rgba(165,206,0,0.30);
}

.btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(165,206,0,0.45);
}

.btn:active { transform: scale(0.97); }

.btn-secondary {
    background: transparent;
    color: var(--green);
    border-color: rgba(165,206,0,0.55);
}

.btn-secondary:hover {
    background: rgba(165,206,0,0.12);
    border-color: var(--green);
    transform: translateY(-4px);
}

.btn:active { transform: translateY(1px) scale(0.98); }

.btn-cv {
    background: transparent;
    color: var(--green);
    border-color: rgba(165,206,0,0.55);
}

.btn-cv:hover {
    background: rgba(165,206,0,0.12);
    border-color: var(--green);
    transform: translateY(-4px);
}

/* Hero Stats */
.hero-stats {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.10);
    animation: fadeUp 0.6s var(--ease-out) 0.5s both;
}

.hero-stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.stat-number-display {
    display: flex;
    align-items: baseline;
    gap: 2px;
    line-height: 1;
}

.stat-number-new {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--green);
}

.stat-plus {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--green);
}

.stat-infinity { font-size: 2.6rem; }

.stat-label {
    font-size: 0.80rem;
    font-weight: 500;
    color: rgba(255,255,255,0.60);
    letter-spacing: 0.02em;
}

.hero-stat-sep {
    width: 1px;
    height: 44px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

/* Hero Image Side */
.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeUp 0.4s var(--ease-out) 0s both;
    min-width: 0;
}

.image-wrapper {
    position: relative;
    width: clamp(240px, 40vw, 360px);
    max-width: 100%;
    flex-shrink: 0;
}

/* Square container — forces the image to stay circular */
.placeholder-image {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Padding-top trick: guarantees square box regardless of width */
    padding-top: 0; /* reset — use explicit width/height on img instead */
}

.profile-img {
    display: block;
    width: 100%;
    height: auto;
    /* explicit square via aspect-ratio */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 75%;
    border-radius: 50%;
    border: 3px solid rgba(165,206,0,0.35);
    box-shadow: 0 25px 80px rgba(16,54,125,0.4), var(--glow-green);
    animation: float 4s ease-in-out infinite;
    filter: contrast(1.05) saturate(1.15);
    /* Prevent stretching — never exceed parent width */
    max-width: 100%;
}

@keyframes float {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

.profile-glow-ring {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1.5px solid rgba(165,206,0,0.22);
    animation: slowSpin 24s linear infinite;
    pointer-events: none;
    z-index: 3;
}

.profile-glow-ring::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 12px 4px rgba(165,206,0,0.5);
}

@keyframes slowSpin { to { transform: rotate(360deg); } }

.profile-badge {
    position: absolute;
    bottom: 16px;
    right: -12px;
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--blue);
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 24px rgba(165,206,0,0.35);
    z-index: 10;
    animation: badgePop 2s ease-in-out infinite, fadeUp 0.8s var(--ease-out) 0.4s both;
    display: flex;
    align-items: center;
    gap: 6px;
}

@keyframes badgePop {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

/* Floating tech icons */
.float-icon {
    position: absolute;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    z-index: 5;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.float-icon-1 { top: 8%; right: -18px; color: #3776ab; animation: floatBob 4.5s ease-in-out infinite; }
.float-icon-2 { bottom: 20%; left: -18px; color: #61dafb; animation: floatBob 5s ease-in-out infinite 1.4s; }
.float-icon-3 { top: 46%; right: -24px; color: #f7df1e; animation: floatBob 4s ease-in-out infinite 0.7s; }

html.dark-mode .float-icon {
    background: rgba(20,22,38,0.8);
    border-color: rgba(255,255,255,0.08);
}

@keyframes floatBob {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Hero 3D Canvas */
.hero-3d-canvas {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 140%; height: 140%;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

/* ============================================================
   SECTION SHARED STYLES
   ============================================================ */
section { padding: 120px 0; position: relative; }

.section-header {
    text-align: left;
    margin-bottom: 64px;
}

.section-eyebrow {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 12px;
}

html.dark-mode .section-eyebrow { color: var(--green); }

.section-title {
    display: inline-block;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 14px;
    letter-spacing: -0.04em;
    position: relative;
    background: linear-gradient(90deg, var(--blue) 0%, var(--blue-mid) 40%, var(--green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Brightness/saturation pulse — lights the letterforms up from within
       instead of casting a shadow around them. No blur, no spread, nothing
       leaves the glyph outlines: the fill itself breathes brighter and
       more saturated, then settles back. */
    animation: title-alive-glow 2.6s ease-in-out infinite;
}

.section-title::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    border-radius: 2px;
    margin: 12px 0 0;
}

html.dark-mode .section-title {
    background: linear-gradient(90deg, var(--green) 0%, var(--blue-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-alive-glow-dark 2.6s ease-in-out infinite;
}
html.dark-mode .section-title::after {
    background: linear-gradient(90deg, var(--green), var(--blue-light));
}

@keyframes title-alive-glow {
    0%, 100% { filter: brightness(1) saturate(1); }
    50%      { filter: brightness(1.5) saturate(1.5); }
}

@keyframes title-alive-glow-dark {
    0%, 100% { filter: brightness(1) saturate(1); }
    50%      { filter: brightness(1.65) saturate(1.6); }
}

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

@keyframes bar-shimmer {
    from { background-position: 0% 0; }
    to   { background-position: 100% 0; }
}

.section-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 8px 0 0;
    line-height: 1.7;
}

/* ============================================================
   REVEAL ANIMATION — directional, bidirectional (enter + exit)
   ============================================================ */

/* Base: no hidden state. JS adds .rx-init so content stays visible without JS. */
[data-reveal].rx-init {
    opacity: 0;
    transition: opacity 0.68s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.68s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
[data-reveal="left"].rx-init  { transform: translateX(-54px); }
[data-reveal="right"].rx-init { transform: translateX(54px); }
[data-reveal="up"].rx-init    { transform: translateY(40px); }

[data-reveal].rx-init.rx-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Stagger support via --rx-delay CSS variable */
[data-reveal].rx-init { transition-delay: var(--rx-delay, 0s); }

/* Block the initial 1→0 transition on page load.
   Chrome pauses CSS transitions on off-screen elements, freezing them at
   currentTime:0 (opacity:1). This class is applied during JS init, removed
   after one rAF so future rx-in toggles animate correctly. */
.rx-no-init-transition [data-reveal] {
    transition-duration: 0s !important;
    transition-delay:    0s !important;
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal].rx-init {
        transform: none !important;
        transition: opacity 0.25s ease;
    }
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about {
    background: var(--bg);
}

.about-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.about-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.06;
}

.about-blob-1 {
    width: 400px; height: 400px;
    background: var(--green);
    top: -100px; right: -100px;
}

.about-blob-2 {
    width: 350px; height: 350px;
    background: var(--blue);
    bottom: -80px; left: -80px;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: stretch;
    margin-bottom: 64px;
}

.about-content > * { min-width: 0; }

/* About Bio */
.about-bio {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.about-bio-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green);
}

.about-bio-heading {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 900;
    line-height: 1.14;
    overflow-wrap: break-word;
    letter-spacing: -0.03em;
    color: var(--text);
}

html.dark-mode .about-bio-heading { color: #fff; }

.about-bio-accent {
    font-style: normal;
    background: linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.about-bio-p {
    font-size: 1rem;
    line-height: 1.82;
    color: var(--text-muted);
}

/* ── About text highlights ── */
.text-hl {
    font-weight: 600;
    color: var(--text);
    background: linear-gradient(180deg, transparent 54%, rgba(165,206,0,0.30) 54%);
    border-radius: 2px;
    padding: 0 3px;
}
.text-hl-blue {
    font-weight: 600;
    color: var(--text);
    background: linear-gradient(180deg, transparent 54%, rgba(16,54,125,0.14) 54%);
    border-radius: 2px;
    padding: 0 3px;
}
html.dark-mode .text-hl-blue {
    background: linear-gradient(180deg, transparent 54%, rgba(77,159,255,0.22) 54%);
}

.about-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.about-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: border-color 0.25s ease, color 0.25s ease;
}

html.dark-mode .about-chip {
    background: var(--bg3);
    border-color: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.65);
}

.about-chip--live {
    background: rgba(165,206,0,0.08);
    border-color: rgba(165,206,0,0.3);
    color: var(--green);
}

.about-chip--live i {
    font-size: 0.5rem;
    animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

/* About Info Cards */
.about-info { display: flex; flex-direction: column; justify-content: center; }

.about-info-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Bento grid layout for info cards */
.about-info-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.about-info-card.aib-full {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--surface) 0%, rgba(165,206,0,0.04) 100%);
    border-color: rgba(165,206,0,0.2);
}

html.dark-mode .about-info-card.aib-full {
    background: linear-gradient(135deg, var(--bg3) 0%, rgba(165,206,0,0.06) 100%);
    border-color: rgba(165,206,0,0.18);
}

.about-info-card.aib-half {
    flex-direction: column;
    gap: 10px;
}

.about-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}

html.dark-mode .about-info-card {
    background: var(--bg3);
    border-color: rgba(255,255,255,0.06);
}

.about-info-card:hover {
    transform: translateX(6px);
    border-color: rgba(165,206,0,0.4);
    box-shadow: 0 4px 24px rgba(165,206,0,0.07);
}

.about-info-icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(165,206,0,0.14), rgba(165,206,0,0.04));
    border: 1px solid rgba(165,206,0,0.18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--green);
    font-size: 0.95rem;
    transition: transform 0.25s var(--ease-out);
}

.about-info-card:hover .about-info-icon { transform: scale(1.1) rotate(-4deg); }

.about-info-text h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

html.dark-mode .about-info-text h4 { color: #fff; }

.about-info-text p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ── Tilted Card (About section) ─────────────────────────── */
.tilted-card-figure {
    position: relative;
    min-height: 500px;
    width: 100%;
    align-self: stretch;
    perspective: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: visible;
    cursor: default;
}

.tilted-card-inner {
    position: relative;
    transform-style: preserve-3d;
    width: 340px;
    height: 430px;
    will-change: transform;
    flex-shrink: 0;
}

.tilted-card-caption {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 6px;
    background: #fff;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: #222;
    opacity: 0;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

html.dark-mode .tilted-card-caption {
    background: #1e1e2e;
    color: #e0e0e0;
}

/* 3D crystal — fills right column, no card */
.about-crystal-wrap {
    width: 100%;
    min-height: 420px;
    align-self: stretch;
    mask-image: radial-gradient(ellipse 82% 82% at 50% 50%, #000 45%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 82% 82% at 50% 50%, #000 45%, transparent 100%);
    position: relative;
    overflow: hidden;
}

@media (max-width: 900px) {
    .about-crystal-wrap {
        min-height: 380px;
    }
}

@media (max-width: 768px) {
    .about-crystal-wrap {
        min-height: 360px;
        height: 60vw;
        max-height: 460px;
        mask-image: radial-gradient(ellipse 90% 88% at 50% 50%, #000 40%, transparent 100%);
        -webkit-mask-image: radial-gradient(ellipse 90% 88% at 50% 50%, #000 40%, transparent 100%);
    }
}

@media (max-width: 640px) {
    .about-crystal-wrap {
        min-height: 320px;
        height: 85vw;
        max-height: 420px;
    }
}

@media (max-width: 400px) {
    .about-crystal-wrap {
        min-height: 300px;
        height: 90vw;
        max-height: 380px;
    }
}

/* About Facts — editorial factlist (no card backgrounds) */
.about-facts {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-self: stretch;
    justify-content: center;
}

.af-item {
    padding: 22px 0 22px 0;
    border-top: 1px solid var(--border);
    position: relative;
    transition: padding-left 0.3s ease, border-color 0.2s ease;
}

.af-item:last-child { border-bottom: 1px solid var(--border); }

.af-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--green);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
}

.af-item:hover { padding-left: 14px; border-color: rgba(165,206,0,0.35); }
.af-item:hover::before { transform: scaleY(1); }

.af-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.af-num {
    font-size: 0.6rem;
    font-weight: 900;
    color: var(--green);
    opacity: 0.5;
    letter-spacing: 0.12em;
    font-family: 'Courier New', monospace;
}

.af-label {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--text-muted);
}

.af-text {
    font-size: 0.93rem;
    color: var(--text);
    line-height: 1.65;
    margin: 0;
}

/* Tech Stack */
.tech-stack-wrap { margin-bottom: 56px; }

.subsection-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 20px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.subsection-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: var(--radius-pill);
    background: var(--tc-bg, var(--bg2));
    border: 1.5px solid var(--tc-bd, var(--border));
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
    cursor: default;
    transition: transform 0.28s var(--ease-out), box-shadow 0.28s ease,
                border-color 0.2s ease, background 0.2s ease;
    animation: fadeUp 0.5s var(--ease-out) calc(var(--ti,0) * 55ms + 0.1s) both;
}

.tech-pill i {
    color: var(--tc, var(--green));
    font-size: 1.05rem;
    flex-shrink: 0;
}

.tech-pill:hover {
    background: var(--tc-bg, rgba(165,206,0,0.14));
    border-color: var(--tc, var(--green));
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 28px var(--tc-bg, rgba(165,206,0,0.20));
    color: var(--tc, var(--blue));
}

html.dark-mode .tech-pill { background: var(--bg3); }
html.dark-mode .tech-pill:hover { color: var(--tc, var(--green)); }

/* Core Skills — editorial numbered list */
.skills-section {
    padding: 8px 0 0;
    margin-top: 48px;
    border-top: 1px solid var(--border);
    padding-top: 40px;
}

.skills-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 56px;
}

.skill-row {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--border);
    position: relative;
    transition: padding-left 0.3s var(--ease-out), background 0.3s ease;
}

.skill-row::before {
    content: '';
    position: absolute;
    left: -16px; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--green), var(--blue-light));
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.3s var(--ease-out);
}

.skill-row:hover {
    padding-left: 14px;
    background: linear-gradient(90deg, rgba(165,206,0,0.05), transparent 60%);
}

.skill-row:hover::before { transform: scaleY(1); }

.skill-row-num {
    font-family: 'Space Grotesk', monospace;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--green);
    opacity: 0.28;
    letter-spacing: -0.02em;
    min-width: 38px;
    flex-shrink: 0;
    transition: opacity 0.3s ease;
}

.skill-row:hover .skill-row-num { opacity: 0.9; }

.skill-row-icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: rgba(165,206,0,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--green);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

html.dark-mode .skill-row-icon { background: rgba(165,206,0,0.14); }

.skill-row:hover .skill-row-icon {
    background: var(--green);
    color: var(--blue);
    transform: scale(1.08);
}

.skill-row-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.skill-row-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.skill-row-desc {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* About Stats Row */
.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px 24px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green), var(--blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out);
}

.stat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--border-accent); }
.stat-card:hover::before { transform: scaleX(1); }

html.dark-mode .stat-card { background: var(--bg3); }

.stat-icon {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, rgba(165,206,0,0.15), rgba(16,54,125,0.08));
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--green);
    margin: 0 auto 16px;
    transition: transform 0.35s var(--ease-out);
}

.stat-card:hover .stat-icon { transform: scale(1.15) rotate(12deg); }

.stat-count-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.stat-count-wrap h3 {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--blue);
    line-height: 1;
}

html.dark-mode .stat-count-wrap h3 { color: var(--green); }

.counter-plus {
    font-size: 1rem;
    font-weight: 700;
    color: var(--green);
}

.stat-card p {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-top: 8px;
}

/* About Stats Bar — editorial horizontal numbers */
.about-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 56px;
    padding: 40px 56px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}

html.dark-mode .about-stats-bar {
    background: var(--bg3);
    border-color: rgba(255,255,255,0.07);
}

.about-stats-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--green) 50%, transparent 100%);
    opacity: 0.6;
}

.asb-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.asb-num-wrap {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    line-height: 1;
}

.asb-num {
    font-size: clamp(2.6rem, 4.5vw, 3.8rem);
    font-weight: 900;
    color: var(--green);
    letter-spacing: -0.05em;
    line-height: 1;
    font-family: var(--font-heading);
}

.asb-sup {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--green);
    margin-top: 0.3rem;
    line-height: 1;
}

.asb-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.asb-sep {
    width: 1px;
    height: 64px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 16px;
}

/* ============================================================
   EDUCATION SECTION
   ============================================================ */
.education {
    background: var(--bg2);
}

html.dark-mode .education { background: var(--bg2); }

/* Education Grid */
.edu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.edu-card-new {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}

.edu-card-new.reveal-item { transition-delay: calc(var(--ti, 0) * 100ms); }

html.dark-mode .edu-card-new {
    background: var(--bg3);
    border-color: rgba(255,255,255,0.07);
}

.edu-card-new:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.edu-card-img-wrap {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: var(--bg3);
    flex-shrink: 0;
}

.edu-card-img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.edu-card-new:hover .edu-card-img-wrap img { transform: scale(1.07); }

.edu-card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5,10,30,0.6) 0%, transparent 55%);
}

.edu-card-year {
    position: absolute;
    bottom: 12px; left: 14px;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.92);
    background: rgba(0,0,0,0.38);
    padding: 4px 10px;
    border-radius: 100px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.edu-card-num {
    position: absolute;
    top: 12px; right: 14px;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.55);
}

.edu-card-body {
    padding: 22px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.edu-card-level {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green);
}

.edu-card-level--active { color: #4ade80; }

.edu-card-level--active i {
    font-size: 0.5rem;
    animation: pulse-dot 1.6s ease-in-out infinite;
}

.edu-card-body h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

html.dark-mode .edu-card-body h3 { color: #fff; }

.edu-card-body p {
    font-size: 0.87rem;
    color: var(--text-muted);
    line-height: 1.65;
}

/* ============================================================
   EDUCATION TIMELINE (new)
   ============================================================ */
.edu-timeline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.edu-entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 20px 0;
}

.edu-entry > * { min-width: 0; }

/* Flip image/text order for "right" entries */
.edu-entry--right {
    direction: rtl;
}
.edu-entry--right > * {
    direction: ltr;
}

.edu-entry-img {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    height: 300px;
    box-shadow: var(--shadow-lg);
}

.edu-entry-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.edu-entry:hover .edu-entry-img img { transform: scale(1.04); }

.edu-entry-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(5,10,30,0.35) 0%, transparent 60%);
    pointer-events: none;
}

.edu-entry-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.edu-entry-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.edu-entry-num {
    font-size: 5rem;
    font-weight: 900;
    color: var(--green);
    opacity: 0.1;
    line-height: 1;
    letter-spacing: -0.06em;
    font-family: var(--font-heading);
    user-select: none;
}

.edu-entry-year-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: var(--green);
    color: #050a1e;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 100px;
}

.edu-entry-year-badge--active {
    background: #4ade80;
    color: #031a08;
    box-shadow: 0 0 12px rgba(74,222,128,0.35);
}

.edu-entry-level {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green);
}

.edu-entry-level-active {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #4ade80;
}

.edu-entry-level-active i {
    font-size: 0.45rem;
    animation: pulse-dot 1.6s ease-in-out infinite;
}

.edu-entry-body h3 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 900;
    color: var(--text);
    line-height: 1.18;
    letter-spacing: -0.03em;
}

html.dark-mode .edu-entry-body h3 { color: #fff; }

.edu-entry-body p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.75;
}

/* Arrow connector — dim by default, lights up on scroll */
.edu-arrow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    align-self: center;
}

.edu-ac-line {
    width: 2px;
    height: 44px;
    background: linear-gradient(180deg, transparent 0%, rgba(165,206,0,0.6) 100%);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.4s var(--ease-out) 0s;
}

.edu-ac-line--bot {
    background: linear-gradient(180deg, rgba(165,206,0,0.6) 0%, transparent 100%);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.4s var(--ease-out) 0.52s;
}

.edu-ac-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 900;
    flex-shrink: 0;
    box-shadow: none;
    transform: scale(0.82);
    transition:
        background 0.45s ease,
        color      0.45s ease,
        box-shadow 0.55s ease,
        transform  0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Lit state — added by IntersectionObserver */
.edu-arrow-connector.is-lit .edu-ac-line {
    transform: scaleY(1);
}

.edu-arrow-connector.is-lit .edu-ac-line--bot {
    transform: scaleY(1);
}

.edu-arrow-connector.is-lit .edu-ac-icon {
    background: var(--green);
    color: #050a1e;
    transform: scale(1);
    box-shadow: 0 0 20px rgba(165,206,0,0.55), 0 0 44px rgba(165,206,0,0.25);
    animation: arrow-glow-pulse 2.5s ease-in-out infinite 0.55s;
}

/* Arrow icon bounces down continuously once lit */
.edu-arrow-connector.is-lit .edu-ac-icon i {
    display: inline-block;
    animation: arrow-bounce 1.5s ease-in-out infinite 1s;
}

@keyframes arrow-glow-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(165,206,0,0.55), 0 0 44px rgba(165,206,0,0.25); }
    50%       { box-shadow: 0 0 28px rgba(165,206,0,0.78), 0 0 56px rgba(165,206,0,0.38); }
}

@keyframes arrow-bounce {
    0%, 100% { transform: translateY(0); }
    45%       { transform: translateY(5px); }
    65%       { transform: translateY(2px); }
}

/* ============================================================
   PROJECTS SECTION
   ============================================================ */
.projects {
    background: var(--bg);
}

/* ============================================================
   PROJECTS — horizontal scroll carousel
   ============================================================ */
.project-carousel-wrap {
    position: relative;
    margin-top: 52px;
}

.project-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 24px 4px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}
.project-carousel::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
    .project-carousel { scroll-behavior: auto; }
}

/* Nav arrows */
.pc-nav {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s var(--ease-out), background 0.2s ease, opacity 0.2s ease;
}
.pc-nav:hover { transform: translateY(-50%) scale(1.08); background: var(--blue); color: #fff; }
html.dark-mode .pc-nav:hover { background: var(--green); color: #06210a; }
.pc-nav:disabled { opacity: 0.3; pointer-events: none; }
.pc-nav--prev { left: -8px; }
.pc-nav--next { right: -8px; }

@media (max-width: 860px) {
    .pc-nav { display: none; }
}

/* Dots */
.pc-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 24px;
}
.pc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 0.3s var(--ease-out), background 0.3s ease;
}
.pc-dot.is-active {
    width: 26px;
    border-radius: 4px;
    background: var(--blue);
}
html.dark-mode .pc-dot.is-active { background: var(--green); }

.pc-card {
    --pc-scale: 0.92;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 0 0 clamp(270px, 30vw, 340px);
    scroll-snap-align: center;
    opacity: 0.72;
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--pc-scale));
    /* slow spring-back on mouse-out */
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s var(--ease-out),
                border-color 0.35s ease;
    position: relative;
    will-change: transform;
}

/* Centered card is the highlight — bigger, fully opaque, in front */
.pc-card.is-centered {
    --pc-scale: 1.06;
    opacity: 1;
    z-index: 2;
}

.pc-card:hover {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--pc-scale)) translateY(-6px);
    box-shadow: 0 24px 64px rgba(0,0,0,0.09), 0 6px 20px rgba(0,0,0,0.06);
    border-color: rgba(165,206,0,0.4);
    /* fast while hovering — responsive tilt tracking */
    transition: transform 0.12s ease,
                box-shadow 0.35s var(--ease-out),
                border-color 0.35s ease;
}

html.dark-mode .pc-card { background: var(--bg3); }

html.dark-mode .pc-card:hover {
    box-shadow: 0 24px 64px rgba(0,0,0,0.35), 0 6px 20px rgba(0,0,0,0.18);
    border-color: rgba(165,206,0,0.5);
}

@media (prefers-reduced-motion: reduce) {
    .pc-card { --pc-scale: 1; opacity: 1; }
}

/* Visual / illustration area */
.pc-visual {
    height: 190px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.pc-visual .pf-live-tag {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
}

/* Card body */
.pc-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pc-title {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 8px;
    text-wrap: balance;
    transition: color 0.25s ease;
}

.pc-card:hover .pc-title { color: var(--blue); }

html.dark-mode .pc-title { color: #e8ecf8; }
html.dark-mode .pc-card:hover .pc-title { color: var(--green); }

.pc-desc {
    font-size: 0.84rem;
    color: var(--text-muted);
    line-height: 1.68;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: pretty;
}

/* ——— Visual shimmer sweep on hover ——— */
.pc-visual::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 55%; height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%);
    transform: skewX(-15deg);
    transition: left 0.65s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    z-index: 3;
}
.pc-card:hover .pc-visual::after { left: 130%; }

/* ——— Minimalist flat icon visual ——— */
.pc-visual--icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-icon-badge {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease;
}

.pc-icon-badge i {
    font-size: 2.5rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pc-card:hover .pc-icon-badge {
    transform: scale(1.08);
    background: rgba(255,255,255,0.11);
}
.pc-card:hover .pc-icon-badge i {
    transform: scale(1.08) rotate(-4deg);
}

/* Per-project solid background + icon color */
.pcv-flood-bg     { background: #123524; }
.pcv-flood-bg     .pc-icon-badge i { color: #A5CE00; }

.pcv-campus-bg    { background: #3d2410; }
.pcv-campus-bg    .pc-icon-badge i { color: #f7b955; }

.pcv-fitness-bg   { background: #0a2540; }
.pcv-fitness-bg   .pc-icon-badge i { color: #22d3ee; }

.pcv-analytics-bg { background: #2a1b45; }
.pcv-analytics-bg .pc-icon-badge i { color: #b79cfb; }

.pcv-study-bg     { background: #0d2547; }
.pcv-study-bg     .pc-icon-badge i { color: #38bdf8; }

@media (prefers-reduced-motion: reduce) {
    .pc-visual::after { display: none; }
    .pc-icon-badge, .pc-icon-badge i { transition: none !important; }
    .pc-card, .pc-card:hover { transform: none !important; }
}

/* Shared badge / live-tag / meta */
.pf-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(74,222,128,0.10);
    border: 1px solid rgba(74,222,128,0.35);
    padding: 4px 10px;
    border-radius: 100px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pf-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--green);
    color: #050a1e;
}


.project-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}


.project-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-accent);
}

html.dark-mode .project-card { background: var(--bg3); }

.project-image {
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.project-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.15) 0%, transparent 60%);
}

.project-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 55%);
    z-index: 1;
}

@keyframes shimmer {
    0%   { left: -100%; }
    50%  { left: 140%; }
    100% { left: 140%; }
}

.project-image--blue   { background: linear-gradient(135deg, #10367D, #1a4fa8); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.project-image--orange { background: linear-gradient(135deg, #c2510a, #ea6c00); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.project-image--green  { background: linear-gradient(135deg, #14532d, #16a34a); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.project-image--purple { background: linear-gradient(135deg, #4c1d95, #7c3aed); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.project-image--teal   { background: linear-gradient(135deg, #0e4f54, #0d9488); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }

.project-icon-wrapper {
    font-size: 3.2rem;
    color: rgba(255,255,255,0.90);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: floatBob 3.5s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
    z-index: 2;
    position: relative;
}

.project-live-tag {
    position: absolute;
    top: 14px; right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 3;
}

.live-pulse {
    width: 6px; height: 6px;
    background: #4ade80;
    border-radius: 50%;
    display: inline-block;
    animation: liveBlink 1.6s ease-in-out infinite;
}

@keyframes liveBlink {
    0%,100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.7); }
}

.project-content {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pc-cat {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--green);
    margin-bottom: 10px;
    -webkit-line-clamp: unset;
    overflow: visible;
    display: block;
}

html.dark-mode .pc-cat { color: var(--green); }

.project-content .pc-cat {
    color: var(--green);
}

.project-content h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 10px;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

html.dark-mode .project-content h3 { color: #e8ecf8; }

.project-content p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
}

.tag {
    background: rgba(165,206,0,0.10);
    color: var(--blue);
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 700;
    border: 1px solid rgba(165,206,0,0.25);
    letter-spacing: 0.02em;
}

html.dark-mode .tag { color: var(--green); background: rgba(165,206,0,0.10); }

.project-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.project-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s var(--ease-out);
}

.project-btn--github {
    background: #1a1e22;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.14);
}

.project-btn--github:hover {
    background: #2d333a;
    border-color: rgba(255,255,255,0.30);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

html.dark-mode .project-btn--github {
    background: #23272e;
    border-color: rgba(255,255,255,0.20);
}

html.dark-mode .project-btn--github:hover {
    background: #2d333a;
    border-color: rgba(255,255,255,0.35);
}

.project-btn--live {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--blue);
}

.project-btn--live:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(165,206,0,0.4);
}

/* ============================================================
   EXPERIENCE SECTION
   ============================================================ */
.experience {
    background:
        radial-gradient(circle at top left, rgba(165,206,0,0.10), transparent 34%),
        var(--bg2);
    position: relative;
}

html.dark-mode .experience {
    background:
        radial-gradient(circle at top left, rgba(77,159,255,0.12), transparent 34%),
        var(--bg2);
}

.exp-journey {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.exp-journey::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, rgba(165,206,0,0.45), rgba(16,54,125,0.15));
}

.exp-entry {
    position: relative;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 20px;
    align-items: start;
    animation: expEntryReveal 0.85s var(--ease-out) both;
    animation-delay: var(--rx-delay, 0s);
}

.exp-entry-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
}

.exp-entry-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 6px 8px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--blue);
}

.exp-entry-dot {
    width: 12px;
    height: 12px;
    margin-top: 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(165,206,0,0.18);
    animation: markerPulse 2.4s ease-in-out infinite;
}

.exp-entry-card {
    position: relative;
    padding: 24px 24px 22px;
    border-radius: 22px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    overflow: hidden;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
}

.exp-entry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-accent);
}

.exp-entry-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--green), var(--blue-light));
}

.exp-entry-card--psn {
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(240,246,255,0.98) 100%);
}

.exp-entry-card--bsd {
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(247,252,239,0.98) 100%);
}

html.dark-mode .exp-entry-card {
    border-color: rgba(255,255,255,0.11);
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

html.dark-mode .exp-entry-kicker {
    color: var(--blue-light);
    opacity: 1;
}

html.dark-mode .exp-entry-index {
    background: var(--bg3);
    border-color: rgba(77,159,255,0.35);
    color: var(--blue-light);
}

html.dark-mode .exp-entry-card--psn {
    background: linear-gradient(135deg, #182035 0%, #1e2d4d 100%);
}

html.dark-mode .exp-entry-card--bsd {
    background: linear-gradient(135deg, #17221a 0%, #1d2f22 100%);
}

.exp-entry-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.exp-entry-kicker {
    margin-bottom: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue);
    opacity: 0.8;
}


.exp-summary {
    margin-bottom: 16px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}

.exp-role {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.28rem, 2.1vw, 1.6rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.exp-company {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--blue);
}

html.dark-mode .exp-company { color: var(--green); }

.exp-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}

.exp-list li {
    position: relative;
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: 0 10px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.exp-list li::before {
    content: '•';
    font-size: 1rem;
    line-height: 1.2;
    color: var(--blue);
    padding-top: 3px;
}

html.dark-mode .exp-list li::before { color: var(--green); }

.exp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}

.exp-links {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}

.exp-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--blue);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    transition: transform 0.28s var(--ease-out), box-shadow 0.28s ease;
}

.exp-link i { color: var(--blue); font-size: 0.82rem; }

.exp-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(165,206,0,0.4);
}

@keyframes expEntryReveal {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes markerPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(165,206,0,0.18);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(165,206,0,0.12);
    }
}

@keyframes floatOrb {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(6px, -8px, 0) scale(1.03);
    }
}

@media (max-width: 700px) {
    .exp-entry {
        grid-template-columns: 36px 1fr;
        gap: 12px;
    }

    .exp-journey::before {
        left: 16px;
    }

    .exp-entry-marker {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding-top: 0;
    }

    .exp-entry-index {
        min-width: 34px;
        padding: 5px 7px;
        font-size: 0.66rem;
    }

    .exp-entry-dot {
        width: 10px;
        height: 10px;
        margin-top: 0;
    }

    .exp-entry-card {
        padding: 16px 14px 16px;
        border-radius: 18px;
    }

    .exp-entry-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 8px;
    }

    .exp-summary {
        margin-bottom: 10px;
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .exp-list {
        gap: 7px;
        margin-top: 10px;
    }

    .exp-list li {
        font-size: 0.88rem;
        line-height: 1.5;
    }

    .exp-list li:nth-child(n+3) {
        display: none;
    }

    .exp-tags,
    .exp-links {
        display: none;
    }
}

/* ============================================================
   CERTIFICATIONS SECTION
   ============================================================ */
.certifications {
    background: var(--bg);
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.cert-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 0;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, border-color var(--dur) ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cert-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green), var(--blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s var(--ease-out);
    z-index: 2;
}

html.dark-mode .cert-card { background: var(--bg3); }

.cert-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-lg);
}

.cert-card:hover::after { transform: scaleX(1); }

/* Certificate image preview area */
.cert-preview {
    display: block;
    position: relative;
    overflow: hidden;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
    text-decoration: none;
    flex-shrink: 0;
}

html.dark-mode .cert-preview { background: rgba(0,0,0,0.3); }

.cert-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.4s var(--ease-out), filter 0.3s ease;
    padding: 12px;
    box-sizing: border-box;
}

.cert-preview-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0,0,0,0.45);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(2px);
}

.cert-preview:hover .cert-img { transform: scale(1.04); filter: brightness(0.85); }
.cert-preview:hover .cert-preview-hover { opacity: 1; }

/* Bottom info area */
.cert-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    text-align: left;
}

.cert-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, rgba(165,206,0,0.15), rgba(16,54,125,0.10));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--green);
    transition: transform 0.35s var(--ease-out);
    flex-shrink: 0;
}

.cert-card:hover .cert-icon { transform: scale(1.1) rotate(6deg); }

.cert-content { flex: 1; min-width: 0; }

.cert-content h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.cert-issuer {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.cert-date {
    font-size: 0.78rem;
    color: var(--green);
    font-weight: 600;
}

/* Certifications — scroll-pinned stack of cards */
.certs-stack {
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;
}

.cert-stack-item {
    position: sticky;
    top: calc(var(--nav-h) + 16px + var(--i, 0) * 14px);
    z-index: calc(var(--i, 0) + 1);
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 26px 30px;
    margin-bottom: 28px;
    transform-origin: top center;
    transition: transform 0.4s var(--ease-out), opacity 0.4s ease, filter 0.4s ease;
    will-change: transform;
}

.cert-stack-item:last-child { margin-bottom: 0; }

html.dark-mode .cert-stack-item {
    background: #1e2338;
    border-color: rgba(255,255,255,0.13);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}

.cert-stack-item.is-stacked {
    transform: scale(0.95) translateY(8px);
    opacity: 0.55;
    filter: saturate(0.7);
}

.cert-stack-num {
    position: absolute;
    top: 16px;
    right: 22px;
    font-size: 0.62rem;
    font-weight: 900;
    color: var(--green);
    opacity: 0.5;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.1em;
}

.cert-stack-thumb {
    position: relative;
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border);
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.cert-stack-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.cert-stack-hover {
    position: absolute;
    inset: 0;
    background: rgba(165,206,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    font-size: 0.9rem;
    color: var(--green);
    transition: opacity 0.2s ease;
}

.cert-stack-thumb:hover .cert-stack-hover { opacity: 1; }
.cert-stack-thumb:hover img { transform: scale(1.04); filter: brightness(0.88); }
.cert-stack-thumb:hover { border-color: rgba(165,206,0,0.5); }

.cert-stack-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.cert-stack-name {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--heading);
    margin: 0;
    letter-spacing: -0.01em;
}

html.dark-mode .cert-stack-name { color: #fff; }

.cert-stack-issuer {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.cert-stack-date {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--green);
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(165, 206, 0, 0.10);
    border: 1px solid rgba(165, 206, 0, 0.28);
    border-radius: 99px;
    padding: 5px 14px;
    align-self: center;
}

/* ============================================================
   CONTACT SECTION
   ============================================================ */
.contact {
    background: var(--bg2);
}

html.dark-mode .contact { background: var(--bg2); }

.contact-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
}

.contact-column { display: flex; flex-direction: column; min-width: 0; }

/* Card shell — identical to exp-card */
.contact-form-box,
.contact-info-box {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease, border-color 0.4s ease;
    display: flex;
    flex-direction: column;
}

html.dark-mode .contact-form-box,
html.dark-mode .contact-info-box {
    background: var(--bg3);
}

.contact-form-box:hover,
.contact-info-box:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--border-accent);
}

/* ── Card header — identical to exp-card-header ── */
.contact-card-header {
    background: linear-gradient(135deg, #10367D 0%, #1a4fa8 60%, #0d2555 100%);
    padding: 28px 32px 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-card-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 60%);
    pointer-events: none;
}

/* Dot-grid texture inside header */
.contact-card-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

/* Eyebrow: green on blue — matches exp-company */
.contact-card-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--green);
    position: relative;
    z-index: 1;
}

/* Title: white, large, bold — matches exp-role */
.contact-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
    position: relative;
    z-index: 1;
}

.contact-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    background: rgba(255,255,255,0.10);
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.18);
    align-self: flex-start;
    position: relative;
    z-index: 1;
}

.contact-card-badge i { color: var(--green); font-size: 0.74rem; }

/* ── Card body (form + info) ── */
.contact-card-body {
    flex: 1;
    padding: 28px 32px 32px;
    background: var(--surface);
}

html.dark-mode .contact-card-body { background: var(--bg3); }

/* ── CI rows: now with icon badges like exp/project cards ── */
.ci-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ci-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
}

.ci-row + .ci-row {
    border-top: 1px solid var(--border);
}

/* Green icon badge — matches cert-icon / exp accent style */
.ci-row-icon-wrap {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--green), var(--green-light));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--blue);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(165,206,0,0.25);
    transition: transform 0.35s var(--ease-out);
}

.ci-row:hover .ci-row-icon-wrap {
    transform: scale(1.1) rotate(5deg);
}

.ci-row-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ci-row-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-muted);
}

.ci-row-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

a.ci-row-value:hover { color: var(--blue); }
html.dark-mode a.ci-row-value:hover { color: var(--green); }

/* ── Social links section ── */
.ci-socials-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.ci-socials-heading {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.ci-social-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Social pill — mirrors project-btn style with blue bg */
.ci-social-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    background: #1a1e22;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.14);
    transition: all 0.3s var(--ease-out);
}

.ci-social-pill:hover {
    background: #2d333a;
    border-color: rgba(255,255,255,0.30);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

/* LinkedIn: accent green on hover */
.ci-social-pill--linkedin:hover {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--blue);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(165,206,0,0.4);
}

/* Instagram: pink accent on hover */
.ci-social-pill--insta:hover {
    background: linear-gradient(135deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(220,39,67,0.35);
}

html.dark-mode .ci-social-pill {
    background: #23272e;
    border-color: rgba(255,255,255,0.18);
}

/* Form Fields */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-group:last-of-type { margin-bottom: 0; }

.form-group label {
    font-size: 0.90rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.form-group input,
.form-group textarea {
    padding: 13px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.95rem;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    font-weight: 500;
    resize: vertical;
}

html.dark-mode .form-group input,
html.dark-mode .form-group textarea {
    background: var(--bg2);
    border-color: var(--border);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(165,206,0,0.12);
    background: var(--bg);
}

html.dark-mode .form-group input:focus,
html.dark-mode .form-group textarea:focus {
    background: var(--bg3);
    box-shadow: 0 0 0 3px rgba(165,206,0,0.08);
}

.form-group.has-error input,
.form-group.has-error textarea {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255,107,107,0.12);
}

.field-error {
    font-size: 0.78rem;
    color: #ff6b6b;
    font-weight: 600;
    display: none;
}

.form-group.has-error .field-error {
    display: block;
}

.form-actions {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.form-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 28px;
    font-size: 1rem;
    font-weight: 700;
}

.form-message {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.90rem;
    line-height: 1.5;
    margin-top: 12px;
    border: 1.5px solid rgba(165,206,0,0.40);
    background: rgba(165,206,0,0.08);
    color: var(--text);
    animation: fadeUp 0.4s ease;
}

.form-message:empty {
    display: none;
    margin-top: 0;
}

/* Info Items */
.info-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: var(--bg2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease, border-color var(--dur) ease;
    position: relative;
    overflow: hidden;
}

.info-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--green);
    opacity: 0;
    transition: opacity 0.3s ease;
}

html.dark-mode .info-item { background: var(--bg3); }

.info-item:hover {
    transform: translateX(5px);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-sm);
}

.info-item:hover::before { opacity: 1; }

.info-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--green), var(--green-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--blue);
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(165,206,0,0.25);
    transition: transform 0.35s var(--ease-out);
}

.info-item:hover .info-icon { transform: scale(1.1) rotate(5deg); }

.info-content h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.info-content p {
    font-size: 0.90rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.info-content a {
    color: var(--green);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease;
}

.info-content a:hover { color: var(--blue); text-decoration: underline; }
html.dark-mode .info-content a:hover { color: #fff; }

/* Social Links */
.social-links-wrapper {
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.social-links-wrapper h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
}

.social-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.social-link {
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--blue), var(--blue-mid));
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(165,206,0,0.12);
    transition: all 0.35s var(--ease-out);
}

.social-link:hover {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--blue);
    transform: translateY(-6px) scale(1.08);
    box-shadow: var(--glow-green);
    border-color: transparent;
}

html.dark-mode .social-link {
    background: linear-gradient(135deg, var(--bg3), var(--bg2));
    border-color: var(--border);
}

html.dark-mode .social-link:hover {
    background: linear-gradient(135deg, var(--green), var(--green-light));
    color: var(--blue);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { color: #fff; }

/* CTA section */
.footer-cta {
    background: linear-gradient(135deg, #0f2158 0%, #091435 55%, #0a1d47 100%);
    padding: 96px 0 88px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.footer-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(165,206,0,0.55), rgba(74,144,226,0.4), rgba(165,206,0,0.55), transparent);
}

.footer-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(165,206,0,0.14) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse 80% 100% at 80% 50%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 80% 50%, black 30%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

html.dark-mode .footer-cta {
    background: linear-gradient(135deg, #0a1530 0%, #060c20 55%, #080f28 100%);
}

.footer-cta .container { position: relative; z-index: 1; }

.footer-cta-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 20px;
}

.footer-cta-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.8rem, 6.5vw, 5.5rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.04;
    letter-spacing: -0.05em;
    margin-bottom: 32px;
    position: relative;
    z-index: 1;
}

.footer-cta-accent {
    font-style: normal;
    background: linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-cta-email {
    display: inline-block;
    font-size: 1rem;
    color: rgba(255,255,255,0.52);
    text-decoration: none;
    margin-bottom: 38px;
    letter-spacing: 0.01em;
    transition: color 0.2s ease;
}

.footer-cta-email:hover { color: rgba(255,255,255,0.88); }

.footer-cta-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

/* Bottom bar */
.footer-bar {
    background: #060c1c;
    padding: 22px 0 0;
}

html.dark-mode .footer-bar { background: #040810; }

.footer-bar-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}

.footer-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    letter-spacing: -0.04em;
    flex-shrink: 0;
}

.footer-logo span { color: var(--green); }

.footer-bar-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-bar-nav a {
    font-size: 0.83rem;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-bar-nav a:hover { color: rgba(255,255,255,0.88); }

.footer-bar-social {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.footer-bar-social a {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.42);
    font-size: 0.88rem;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.footer-bar-social a:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.07);
}

.footer-copy {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.24);
    text-align: center;
    padding: 14px 0 18px;
}

/* ============================================================
   TEXT HIGHLIGHT UTILITY
   ============================================================ */
mark.hl, .hl {
    background: linear-gradient(transparent 54%, rgba(165,206,0,0.32) 54%);
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
    font-weight: 600;
    font-style: normal;
}

html.dark-mode mark.hl,
html.dark-mode .hl {
    background: linear-gradient(transparent 54%, rgba(165,206,0,0.22) 54%);
}

/* Hide section numbered labels (aesthetic numbers removed per design) */
.af-num,
.edu-entry-num { display: none; }

/* ============================================================
   KEYFRAMES (SHARED)
   ============================================================ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.btn:focus-visible,
.project-btn:focus-visible {
    outline: 2.5px solid var(--green);
    outline-offset: 3px;
    border-radius: 50px;
}

.nav-link:focus-visible,
.social-link:focus-visible,
.theme-toggle:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 4px;
}

.form-group input:focus-visible,
.form-group textarea:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* ============================================================
   RESPONSIVE — 1280px  (hero goes single-column here)
   ============================================================ */
@media (max-width: 1280px) {
    /* Hero — stack to single column so buttons never overflow */
    .hero { min-height: auto; padding: 64px 0 48px; overflow-x: hidden; }

    .hero .container {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-content { align-items: center; padding: 0; order: 2; width: 100%; min-width: 0; }
    .hero-image   { order: 1; width: 100%; }

    .hero-availability-tag { margin: 0 auto 20px; }

    .hero-description { max-width: 600px; margin: 0 auto 28px; font-size: 0.95rem; }

    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
    }
    .hero-buttons .btn {
        min-width: 140px;
        flex: 1 1 140px;
        max-width: 220px;
        justify-content: center;
    }

    .hero-stats {
        flex-direction: row;
        justify-content: center;
        gap: 24px;
        margin-top: 36px;
        border-top: 1px solid rgba(255,255,255,0.10);
        padding-top: 28px;
        flex-wrap: wrap;
    }
    .hero-stat-item { align-items: center; }

    /* Only hide heavy GPU elements — CSS-only effects stay on */
    .hero-3d-canvas,
    .hero-particles-canvas { display: none !important; }

    /* Scale down blobs for single-column layout */
    .hero-blob-1 { width: 320px; height: 320px; top: -100px; right: -100px; }
    .hero-blob-2 { width: 240px; height: 240px; bottom: -60px; left: -80px; }

    /* Float icons — keep visible, adjust position for narrower image */
    .float-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 1.1rem; }
    .float-icon-1 { right: 0px; }
    .float-icon-2 { left: 0px; }
    .float-icon-3 { right: -8px; }

    .image-wrapper { width: clamp(200px, 36vw, 320px); }
}

/* ============================================================
   RESPONSIVE — 1024px
   ============================================================ */
@media (max-width: 1024px) {
    .about-content { gap: 36px; }
}

/* ============================================================
   RESPONSIVE — 900px (Tablet)
   ============================================================ */
@media (max-width: 900px) {
    .hamburger { display: flex; }

    /* Keep the navbar a full-width bar on mobile (no pill morph) so the
       absolute dropdown menu stays anchored to the full width. Frosted
       background + shadow from .navbar--scrolled still apply. */
    .navbar--scrolled {
        top: 0;
        width: 100%;
        height: var(--nav-h);
        border-radius: 0;
    }

    /* Mobile dropdown */
    .nav-menu {
        display: none;
        position: absolute;
        top: var(--nav-h);
        left: 0; right: 0;
        transform: none;
        bottom: auto;
        background: var(--bg);
        flex-direction: column;
        padding: 8px 12px 16px;
        border-bottom: 2px solid var(--border);
        box-shadow: 0 20px 48px rgba(0,0,0,0.12);
        z-index: 999;
        gap: 3px;
        /* slide-down animation */
        animation: none;
    }

    .nav-menu.active {
        display: flex;
        animation: slideDown 0.25s var(--ease-out) both;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    html.dark-mode .nav-menu {
        background: var(--bg2);
        border-bottom-color: rgba(255,255,255,0.06);
        box-shadow: 0 20px 48px rgba(0,0,0,0.35);
    }

    .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 12px 16px;
        font-size: 1rem;
        font-weight: 500;
        border-radius: 10px;
        color: var(--text-muted);
        border-left: 3px solid transparent;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .nav-link:hover {
        background: rgba(16,54,125,0.06);
        color: var(--blue);
        border-left-color: var(--blue);
    }

    html.dark-mode .nav-link:hover {
        background: rgba(255,255,255,0.05);
        color: var(--text);
        border-left-color: var(--green);
    }

    .nav-link.active-link {
        background: rgba(16,54,125,0.07);
        color: var(--blue);
        font-weight: 600;
        border-left-color: var(--blue);
    }

    html.dark-mode .nav-link.active-link {
        background: rgba(165,206,0,0.08);
        color: var(--green);
        border-left-color: var(--green);
    }

    /* hide the underline pseudo-element on mobile */
    .nav-link::after { display: none; }

    /* Mobile nav-wrapper: simple flex, logo left — buttons right */
    .nav-wrapper {
        display: flex;
        grid-template-columns: unset;
        align-items: center;
        justify-content: space-between;
    }

    .nav-right {
        justify-content: flex-end;
        gap: 10px;
    }

    /* nav-menu is absolute positioned, doesn't affect bar */
    .nav-menu { grid-column: unset; }

    .about-content { grid-template-columns: 1fr; gap: 28px; }

    .about-stats { grid-template-columns: repeat(3, 1fr); }

    .about-stats-bar { padding: 32px 32px; }
    .asb-sep { margin: 0 8px; }

    /* Education timeline responsive */
    .edu-entry { gap: 36px; padding: 12px 0; }
    .edu-entry-img { height: 240px; }
    .edu-entry-body h3 { font-size: 1.4rem; }

    .contact-wrapper { grid-template-columns: minmax(0, 1fr); gap: 28px; }

    .footer-bar-nav { gap: 16px; }
}

/* ============================================================
   RESPONSIVE — 768px (Tablet)
   ============================================================ */
@media (max-width: 768px) {
    section { padding: 80px 0; }

    /* Scale down large heading at tablet widths */
    .about-bio-heading { font-size: clamp(1.6rem, 4.5vw, 2.1rem); }

    /* Tighten edu-entry gap before it goes single-column at 640px */
    .edu-entry { gap: 28px; }
    .edu-entry-img { height: 220px; }
    .edu-entry-body h3 { font-size: 1.3rem; }

    /* Footer nav: smaller gap so 6 links don't overflow on ~768px */
    .footer-bar-nav { gap: 14px; font-size: 0.80rem; }
}

/* ============================================================
   RESPONSIVE — 640px (Mobile L)
   ============================================================ */
@media (max-width: 640px) {
    section { padding: 72px 0; }

    .pc-nav { display: none; }
    .pc-edge { width: 40px; }
    .pc-track .project-card { width: 270px; }

    .section-header { margin-bottom: 44px; }

    .hero {
        padding: 52px 0 40px;
        overflow-x: hidden;
    }

    .hero .container {
        padding-left: 16px;
        padding-right: 16px;
        gap: 24px;
    }

    .hero-stat-sep { display: none; }

    .hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
        justify-content: center;
        border-top: 1px solid rgba(255,255,255,0.10);
        padding-top: 20px;
        margin-top: 20px;
    }

    .stat-number-new { font-size: 1.8rem; }

    .about-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }

    /* Stats bar: stack vertically on mobile */
    .about-stats-bar {
        flex-direction: column;
        padding: 32px 24px;
        gap: 24px;
    }
    .asb-sep {
        width: 64px;
        height: 1px;
        margin: 0;
    }

    /* Education timeline: single column on mobile */
    .edu-entry {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 8px 0;
    }
    /* Reset RTL flip — force consistent LTR flow */
    .edu-entry--right { direction: ltr; }
    .edu-entry--right > * { direction: ltr; }
    .edu-entry-img { height: 220px; }
    .edu-entry-num { font-size: 3.5rem; }
    /* Ensure all body content left-aligns after direction reset */
    .edu-entry-body,
    .edu-entry-header,
    .edu-entry-body h3,
    .edu-entry-body p,
    .edu-entry-level,
    .edu-entry-level-active { text-align: left; align-items: flex-start; }
    .edu-entry-header { align-items: center; justify-content: flex-start; }
    .edu-entry-year-badge { align-self: auto; }

    /* Cert stack: reflow date under body, tighter stacking on small screens */
    .cert-stack-item {
        grid-template-columns: 90px 1fr;
        grid-template-areas: "thumb body" "thumb date";
        gap: 18px;
        padding: 20px 22px;
        margin-bottom: 20px;
    }
    .cert-stack-thumb { grid-area: thumb; }
    .cert-stack-body  { grid-area: body; }
    .cert-stack-date  { grid-area: date; font-size: 0.68rem; margin-top: 4px; align-self: start; }

    .edu-grid { grid-template-columns: 1fr; gap: 20px; }
    .edu-card-img-wrap { height: 180px; }

    .skills-section { padding-top: 28px; margin-top: 32px; }
    .skills-list { column-gap: 28px; }

    /* Project carousel cards — desktop sizing made them ~540px tall on
       narrow screens (buttons/tags wrapping to extra rows). Compact
       everything except .tag, which must never change. */
    .pc-card { flex-basis: 220px; }
    .pc-visual { height: 104px; }
    .pc-icon-badge { width: 60px; height: 60px; }
    .pc-icon-badge i { font-size: 1.5rem; }
    .pc-body { padding: 14px; }
    .pc-cat { margin-bottom: 6px; }
    .pc-title { margin-bottom: 5px; font-size: 1rem; }
    .pc-desc { -webkit-line-clamp: 2; font-size: 0.78rem; line-height: 1.5; }
    .project-tags { padding-top: 8px; gap: 5px; }
    .project-actions {
        margin-top: 10px;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .project-btn {
        padding: 6px 10px;
        font-size: 0.72rem;
        gap: 4px;
        flex: 1 1 0;
        justify-content: center;
        white-space: nowrap;
    }

    .contact { padding: 56px 0; }
    .contact-wrapper { gap: 16px; }
    .contact-card-header { padding: 20px 20px 18px; }
    .contact-card-title { font-size: 1.2rem; }
    .contact-card-body { padding: 18px 20px 24px; }
    .ci-row { padding: 12px 0; gap: 12px; }
    .ci-row-icon-wrap { width: 34px; height: 34px; font-size: 0.85rem; }
    .ci-row-label { font-size: 0.62rem; }
    .ci-row-value { font-size: 0.82rem; }
    .ci-social-pill { padding: 7px 14px; font-size: 0.78rem; }
    .form-group { margin-bottom: 12px; gap: 5px; }
    .form-group label { font-size: 0.82rem; }
    .form-group input,
    .form-group textarea { padding: 10px 12px; font-size: 0.9rem; }

    .skill-row { padding: 18px 4px; gap: 14px; }
    .skill-row-icon { width: 36px; height: 36px; font-size: 1.05rem; }
    .skill-row-name { font-size: 0.88rem; }
    .skill-row-desc { font-size: 0.72rem; }

    .tech-pill { padding: 8px 14px; font-size: 0.80rem; }

    /* Panel collapses to a horizontal strip above the body on tablet/mobile */
    .exp-card { grid-template-columns: 1fr; }
    .exp-card-panel { flex-direction: row; align-items: center; padding: 18px 22px; }
    .exp-card-panel-top { flex: 1; align-items: center; }
    .exp-card-panel-bottom { flex-direction: row; align-items: center; margin-top: 0; gap: 12px; }
    .exp-card-index { font-size: 1.8rem; }
    .exp-card-icon { width: 40px; height: 40px; font-size: 1rem; border-radius: 11px; }
    .exp-card-body { padding: 22px 24px; }
    .exp-role { font-size: 1.25rem; }
    .exp-list li { grid-template-columns: 24px 1fr; }
    .exp-links { flex-wrap: wrap; gap: 8px; }

    /* About stats: 2 columns on small mobile */
    .about-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — 480px (Mobile S)
   ============================================================ */
@media (max-width: 480px) {
    .hero-name-line { font-size: clamp(2.2rem, 11vw, 3rem); }

    .hero-typed-line { font-size: clamp(0.9rem, 4vw, 1.15rem); }

    .hero-description { font-size: 0.88rem; line-height: 1.7; }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }
    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
        min-width: unset;
        max-width: unset;
        flex: none;
    }

    .hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
        margin-top: 20px;
    }

    .hero-stat-sep { display: none; }

    .image-wrapper { width: clamp(180px, 54vw, 215px); }

    /* Float icons too cramped on very small screens */
    .float-icon { display: none; }

    .skills-section { padding-top: 24px; margin-top: 24px; }
    .skills-list { grid-template-columns: 1fr; }
    .skill-row { padding: 14px 4px; gap: 12px; }
    .skill-row-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 10px; }
    .skill-row-num { font-size: 1.2rem; min-width: 30px; }
    .skill-row-name { font-size: 0.85rem; }
    .skill-row-desc { font-size: 0.70rem; }

    .tech-pill { padding: 7px 12px; font-size: 0.78rem; gap: 6px; }
    .tech-pill i { font-size: 0.95rem; }

    /* Cert stack: compact thumb + tighter stacking on very small screens */
    .cert-stack-item { grid-template-columns: 68px 1fr; gap: 12px; padding: 16px 18px; margin-bottom: 16px; }
    .cert-stack-name { font-size: 0.92rem; }
    .cert-stack-num { font-size: 0.56rem; top: 10px; right: 14px; }

    .contact { padding: 48px 0; }
    .contact-card-header { padding: 16px 18px 14px; }
    .contact-card-body { padding: 16px 18px 20px; }
    .ci-row-icon-wrap { width: 30px; height: 30px; font-size: 0.78rem; }
    .ci-social-pill { padding: 6px 12px; font-size: 0.76rem; }
    .form-group { margin-bottom: 10px; }

    .scroll-top-btn { bottom: 16px; right: 16px; width: 40px; height: 40px; font-size: 0.85rem; }

    .footer-cta { padding: 64px 0 60px; }
    .footer-cta-actions { flex-direction: column; align-items: stretch; }
    .footer-cta-actions .btn { justify-content: center; }
    .footer-bar-nav { gap: 14px; }

    /* Prevent horizontal overflow */
    .hero-stats { flex-wrap: wrap; justify-content: center; gap: 16px; }
    .about-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* Text overflow protection */
    .exp-list li, .cert-content h3, .project-content p { word-break: break-word; overflow-wrap: break-word; }

    .exp-role { font-size: 1.15rem; }
    .exp-card-panel { padding: 14px 18px; }
    .exp-card-index { font-size: 1.5rem; }
    .exp-card-icon { width: 34px; height: 34px; font-size: 0.9rem; border-radius: 10px; }
    .exp-card-duration { font-size: 0.62rem; }
    .exp-card-body { padding: 18px 18px 22px; }
    .exp-list li { grid-template-columns: 22px 1fr; font-size: 0.88rem; }
    .exp-link { font-size: 0.72rem; padding: 8px 16px; }
}

/* ============================================================
   LIQUID ETHER — winter snow hero background
   ============================================================ */
.hero-liquid-ether {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.65;
}

.hero-liquid-ether canvas {
    pointer-events: none !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Hide fluid sim on screens where JS won't start it */
@media (max-width: 1280px) {
    .hero-liquid-ether { display: none; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .hero-liquid-ether { display: none; }
}

/* ============================================================
   LOGO LOOP — base component CSS
   ============================================================ */
.logoloop {
    position: relative;
    --logoloop-gap: 16px;
    --logoloop-logoHeight: 20px;
    --logoloop-fadeColorAuto: var(--bg2);
}

html.dark-mode .logoloop {
    --logoloop-fadeColorAuto: var(--bg2);
}

.logoloop__track {
    display: flex;
    width: max-content;
    will-change: transform;
    user-select: none;
    position: relative;
    z-index: 0;
}

.logoloop--vertical .logoloop__track {
    flex-direction: column;
    height: max-content;
    width: 100%;
}

.logoloop__list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.logoloop--vertical .logoloop__list {
    flex-direction: column;
}

.logoloop__item {
    flex: 0 0 auto;
    margin-right: var(--logoloop-gap);
    font-size: var(--logoloop-logoHeight);
    line-height: 1;
    list-style: none;
}

.logoloop--vertical .logoloop__item {
    margin-right: 0;
    margin-bottom: var(--logoloop-gap);
}

.logoloop__item:last-child { margin-right: var(--logoloop-gap); }
.logoloop--vertical .logoloop__item:last-child { margin-right: 0; margin-bottom: var(--logoloop-gap); }

.logoloop__node {
    display: inline-flex;
    align-items: center;
}

.logoloop__item img {
    height: var(--logoloop-logoHeight);
    width: auto;
    display: block;
    object-fit: contain;
    -webkit-user-drag: none;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.logoloop--scale-hover .logoloop__item:hover img,
.logoloop--scale-hover .logoloop__item:hover .logoloop__node {
    transform: scale(1.2);
    transform-origin: center center;
}

.logoloop--scale-hover .logoloop__node {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.logoloop__link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}
.logoloop__link:hover { opacity: 0.8; }
.logoloop__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.logoloop--fade::before,
.logoloop--fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(24px, 8%, 120px);
    pointer-events: none;
    z-index: 10;
}

.logoloop--fade::before {
    left: 0;
    background: linear-gradient(
        to right,
        var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%,
        rgba(0,0,0,0) 100%
    );
}

.logoloop--fade::after {
    right: 0;
    background: linear-gradient(
        to left,
        var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%,
        rgba(0,0,0,0) 100%
    );
}

@media (prefers-reduced-motion: reduce) {
    .logoloop__track { transform: translate3d(0,0,0) !important; }
    .logoloop__item img, .logoloop__node { transition: none !important; }
}

/* ============================================================
   TECH STRIP — marquee section
   ============================================================ */
.tech-strip {
    padding: 24px 0 28px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.tech-strip-eyebrow {
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
    margin-bottom: 18px;
    font-family: 'Space Grotesk', sans-serif;
}

/* Pull fade color from section bg automatically */
.tech-strip .logoloop--fade {
    --logoloop-fadeColor: var(--bg2);
}

/* ── About section marquee wrapper ── */
.about-marquee-wrap {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg2);
    padding: 18px 0;
    margin-top: 4px;
}

html.dark-mode .about-marquee-wrap { background: var(--bg3); }

/* Fade edges match wrapper background */
.about-marquee-wrap .logoloop--fade {
    --logoloop-fadeColor: var(--bg2);
}

html.dark-mode .about-marquee-wrap .logoloop--fade {
    --logoloop-fadeColor: var(--bg3);
}

/* ── Tech pill ── */
.ll-tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 100px;
    white-space: nowrap;
    cursor: default;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
}

.ll-tech-pill:hover {
    transform: scale(1.07) translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
    border-color: var(--accent);
}

.ll-tech-pill i {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.ll-tech-pill-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
    font-family: 'Space Grotesk', sans-serif;
}

html.dark-mode .ll-tech-pill:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Mobile: keep but a bit smaller */
@media (max-width: 480px) {
    .tech-strip { padding: 20px 0 24px; }
    .ll-tech-pill { padding: 7px 14px; gap: 8px; }
    .ll-tech-pill i { font-size: 0.9rem; }
    .ll-tech-pill-label { font-size: 0.78rem; }
}