/* =============================================
   BRUTALISM UI - Sibashish Portfolio
   ============================================= */

/* -- CSS Variables (Canary Yellow Background, Black Primary, Bright Green Accents) -- */
:root {
    --primary: #000000;
    --primary-glow: rgba(0, 0, 0, 0.8);
    --primary-dim: rgba(0, 0, 0, 0.1);
    --accent: #111111;
    --accent-cyan: #000000;
    --bg-deep: #ffff00;
    --bg-card: #ffffff;
    --bg-card2: #f5f5f5;
    --glass-bg: #ffffff;
    --glass-border: #000000;
    --text-main: #000000;
    --text-muted: rgba(0, 0, 0, 0.6);
    --shadow-soft: 5px 5px 0px #000000;
    --shadow-hover: 8px 8px 0px #000000;
    --accent-green: #00DD00;
    --accent-blue: #0066FF;
    --accent-red: #FF0000;
}

/* -- YELLOW THEME -- */
[data-theme="yellow"] {
    --primary: #000000;
    --primary-glow: rgba(0, 0, 0, 0.8);
    --primary-dim: rgba(0, 0, 0, 0.1);
    --accent: #111111;
    --accent-cyan: #000000;
    --bg-deep: #FFFF00;
    --bg-card: #ffffff;
    --bg-card2: #f5f5f5;
    --glass-bg: #ffffff;
    --glass-border: #000000;
    --text-main: #000000;
    --text-muted: rgba(0, 0, 0, 0.6);
    --shadow-soft: 5px 5px 0px #000000;
    --shadow-hover: 8px 8px 0px #000000;
    --accent-green: #00DD00;
    --accent-blue: #0066FF;
    --accent-red: #FF0000;
}

/* -- ORANGE THEME -- */
[data-theme="orange"] {
    --primary: #000000;
    --primary-glow: rgba(0, 0, 0, 0.8);
    --primary-dim: rgba(0, 0, 0, 0.1);
    --accent: #111111;
    --accent-cyan: #000000;
    --bg-deep: #FFFF00;
    --bg-card: #ffffff;
    --bg-card2: #f5f5f5;
    --glass-bg: #ffffff;
    --glass-border: #000000;
    --text-main: #000000;
    --text-muted: rgba(0, 0, 0, 0.6);
    --shadow-soft: 5px 5px 0px #000000;
    --shadow-hover: 8px 8px 0px #000000;
    --accent-green: #00DD00;
    --accent-blue: #0066FF;
    --accent-red: #FF0000;
}

/* -- VIOLET THEME -- */
[data-theme="violet"] {
    --primary: #000000;
    --primary-glow: rgba(0, 0, 0, 0.8);
    --primary-dim: rgba(0, 0, 0, 0.1);
    --accent: #111111;
    --accent-cyan: #000000;
    --bg-deep: #FFFF00;
    --bg-card: #ffffff;
    --bg-card2: #f5f5f5;
    --glass-bg: #ffffff;
    --glass-border: #000000;
    --text-main: #000000;
    --text-muted: rgba(0, 0, 0, 0.6);
    --shadow-soft: 5px 5px 0px #000000;
    --shadow-hover: 8px 8px 0px #000000;
    --accent-green: #00DD00;
    --accent-blue: #0066FF;
    --accent-red: #FF0000;
}

/* -- Body -- */
body {
    background: #FFFF00;
    color: var(--text-main) !important;
    overflow-x: hidden;
    border-top: none;
    font-family: 'Space Grotesk', sans-serif !important;
}

/* -- Import Lexend Mega Bold & Space Grotesk Regular Fonts -- */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@400&family=Space+Grotesk:wght@400&display=swap');

/* -- Apply Lexend Mega Bold to All Headers -- */
h1, h2, h3, h4, h5, h6,
.bc-title,
.modern-hero-infos h4,
.hero-name,
.modern-contact-box h1,
.exp-title,
.section-heading,
.ct-heading,
.ct-bc-title,
.ct-loc-city,
.ct-avail-heading,
.ideck-label,
.ivc-label {
    font-family: 'Lexend Mega', sans-serif !important;
    font-weight: 400 !important;
}

/* =============================================
   BRUTALISM - NO AURORA BACKGROUND
   ============================================= */
.bg-aurora { display: none !important; }

.blob { display: none !important; }

/* -- Grid noise overlay -- */
.noise-overlay { display: none !important; }

/* =============================================
   BRUTALISM CURSOR (minimal)
   ============================================= */
.cursor-dot,
.cursor-ring {
    position: fixed;
    border-radius: 0;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background: #000000;
    box-shadow: none;
}

.cursor-ring {
    width: 36px;
    height: 36px;
    border: 2px solid #000000;
}

.cursor-ring.expand {
    width: 60px;
    height: 60px;
    border: 2px solid #000000;
    background: transparent;
}

/* Cursor trail dots */
.cursor-trail {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #000;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .1s;
}

/* Click ripple */
.cursor-ripple {
    position: fixed;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.18);
    pointer-events: none;
    z-index: 99997;
    transform: translate(-50%, -50%);
    animation: cursorRipple .55s cubic-bezier(.22,.68,0,1.2) forwards;
}
@keyframes cursorRipple {
    from { width: 0;   height: 0;   opacity: .6; }
    to   { width: 80px; height: 80px; opacity: 0; }
}

@media (max-width: 768px) {
    .cursor-dot, .cursor-ring { display: none; }
}

/* =============================================
   MOBILE HEADER
   ============================================= */
@media (max-width: 767px) {
    /* Logo sizing on mobile */
    .modern-logo {
        font-size: 14px !important;
        letter-spacing: 0.5px !important;
    }

    /* Hide theme switcher on mobile */
    .theme-switcher {
        display: none !important;
    }

    /* Hide pill nav on mobile by default */
    .modern-nav {
        display: none !important;
        position: fixed !important;
        top: 30px; left: 0; right: 0;
        width: 100% !important;
        height: calc(100dvh - 30px) !important;
        z-index: 999 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background: #FFFF00 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        gap: 0 !important;
        padding: 0 !important;
        border-top: 3px solid #000000 !important;
        overflow-y: auto !important;
    }

    /* Open state */
    .modern-nav.active {
        display: flex !important;
    }

    /* Stack menu items vertically */
    .modern-nav .menu {
        flex-direction: column !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        gap: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .modern-nav .menu li {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        border-bottom: 1px solid #000000 !important;
        margin: 0 !important;
    }

    .modern-nav .menu li:last-child {
        border-bottom: none !important;
    }

    .modern-nav .menu li a,
    .modern-nav .menu li a:visited {
        display: block !important;
        padding: 16px 20px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 0;
        color: #000000 !important;
        background: transparent !important;
        opacity: 1 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }

    .modern-nav .menu li.active > a,
    .modern-nav .menu li a:hover {
        background: #000000 !important;
        color: #FFFF00 !important;
        opacity: 1 !important;
    }

    /* CTA button inside nav */
    .modern-nav .modern-btn {
        margin: 12px 12px 0 12px !important;
        width: calc(100% - 24px) !important;
        font-size: 12px !important;
        padding: 12px 20px !important;
        text-align: center !important;
    }

    /* Show hamburger button */
    .show-menu {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 20px !important;
        height: 12px !important;
        cursor: pointer !important;
        z-index: 1001 !important;
        position: relative !important;
    }

    .show-menu span {
        display: block !important;
        width: 100% !important;
        height: 2px !important;
        background: #000000 !important;
        border-radius: 0;
        transition: transform 0.3s ease, opacity 0.2s ease !important;
        transform-origin: center !important;
    }

    /* X animation when active */
    .show-menu.active span:first-child {
        transform: translateY(5px) rotate(45deg) !important;
    }
    .show-menu.active span:nth-child(2) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }
    .show-menu.active span:last-child {
        transform: translateY(-5px) rotate(-45deg) !important;
    }

    /* Hide duplicate outer "Let's talk" on mobile */
    .modern-header .gx-row > .modern-btn {
        display: none !important;
    }

    /* Header padding on mobile */
    .modern-header {
        padding: 0 !important;
    }

    .modern-header .container {
        padding: 6px 16px !important;
    }

    .modern-header .gx-row {
        gap: 12px !important;
    }
}

/* =============================================
   BRUTALISM HEADER
   ============================================= */
.modern-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #ffffff !important;
    border-bottom: 3px solid var(--primary);
    margin-top: 0 !important;
    padding: 0;
    box-shadow: none;
}

/* No gradient line in brutalism */
.modern-header::before { display: none !important; }

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

/* -- Logo -- */
.modern-logo {
    font-size: 22px;
    font-family: 'Kiloy', sans-serif !important;
    font-weight: 900;
    letter-spacing: 2px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0;
    line-height: 1;
    color: #000000 !important;
    -webkit-text-fill-color: unset;
    background: none !important;
    transition: none;
    text-transform: lowercase;
}

.modern-logo:hover { opacity: 1; }

/* Brackets ? static, no animation */
.logo-bracket {
    color: #000000;
    background: none;
    display: inline-block;
}

/* Header name wrap ? fully visible, no clip */
.logo-name-wrap {
    display: inline-block;
    overflow: visible;
    height: auto;
    vertical-align: middle;
    line-height: 1;
}

.logo-name {
    display: block;
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: unset;
    line-height: 1;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 900;
}

/* Hide hamburger on desktop */
.show-menu {
    display: none;
}

/* -- Nav pill container -- */
.modern-nav {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.modern-nav .menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 3px solid var(--primary) !important;
    border-radius: 0;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 5px 5px 0px #000000 !important;
}

.modern-nav .menu li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    float: none !important;
    display: inline-block !important;
}

.modern-nav .menu li a,
.modern-nav .menu li a:visited {
    display: inline-block !important;
    padding: 12px 20px !important;
    border-radius: 0;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    opacity: 1;
    text-decoration: none !important;
    background: transparent !important;
    transition: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-right: 3px solid var(--primary);
}

.modern-nav .menu li:last-child a {
    border-right: none !important;
}

.modern-nav .menu li a:hover,
.modern-nav .menu li a:focus {
    color: #ffffff !important;
    background: #000000 !important;
    opacity: 1 !important;
}

.modern-nav .menu li.active > a {
    color: #ffffff !important;
    background: var(--primary) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

.modern-nav .menu li a::before,
.modern-nav .menu li a::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
}

/* =============================================
   THEME SWITCHER
   ============================================= */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 3px solid var(--primary);
    border-radius: 0;
    background: #ffffff;
}

.theme-switcher .theme-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid #000000;
    background: #ffffff;
    color: #000000;
    font-size: 16px;
    cursor: pointer;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 0;
    box-shadow: 2px 2px 0px #000000;
}

.theme-switcher .theme-btn[data-theme="black"] { color: #000000; }
.theme-switcher .theme-btn[data-theme="yellow"] { color: #000000; }
.theme-switcher .theme-btn[data-theme="orange"] { color: #000000; }
.theme-switcher .theme-btn[data-theme="violet"] { color: #000000; }

.theme-switcher .theme-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0px #000000;
}

.theme-switcher .theme-btn.active {
    background: #000000;
    color: #ffffff;
    box-shadow: 4px 4px 0px #000000;
    transform: translate(-2px, -2px);
}

/* -- CTA Button -- */
.modern-btn {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-radius: 0;
    padding: 12px 28px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--primary) !important;
    box-shadow: 5px 5px 0px var(--primary) !important;
    transition: none !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.modern-btn::before {
    display: none !important;
}

.modern-btn:hover {
    box-shadow: 8px 8px 0px var(--primary) !important;
    transform: translate(-3px, -3px);
    color: #ffffff !important;
    opacity: 1 !important;
}

.modern-btn:hover::before {
    opacity: 0;
}

/* =============================================
   BRUTALISM CARDS
   ============================================= */
.modern-card {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 3px solid #000000 !important;
    box-shadow: 5px 5px 0px #000000 !important;
    transition: none !important;
    will-change: auto;
}

.modern-card::before {
    background: none !important;
    opacity: 0 !important;
}

.modern-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0px #000000 !important;
    border-color: #000000 !important;
}

/* =============================================
   HERO CARD
   ============================================= */
.hero-card {
    padding: 50px 40px !important;
    overflow: hidden;
}

/* Animated rings - hide in brutalism */
.hero-rings { display: none !important; }

.ring { display: none !important; }

/* Floating profile image */
.modern-img-box {
    animation: none !important;
    box-shadow: 5px 5px 0px #000000 !important;
    border-radius: 0;
    border: 3px solid #000000 !important;
    z-index: 3;
    width: 280px !important;
    height: 280px !important;
    overflow: hidden;
}

/* Hero text */
.modern-hero-infos {
    z-index: 3;
}

.modern-hero-infos h4.typed-subtitle {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000000 !important;
    opacity: 1 !important;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.modern-hero-infos h4.typed-subtitle::before {
    content: '';
    width: 24px;
    height: 2px;
    background: #000000;
    display: inline-block;
    border-radius: 0;
}

.hero-name {
    font-size: 48px !important;
    line-height: 1.15 !important;
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: unset;
    margin-bottom: 12px !important;
    font-weight: 900 !important;
    letter-spacing: -1px;
    text-transform: uppercase;
}

.hero-location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted) !important;
    font-size: 13px;
}

.hero-location i {
    color: var(--primary);
    font-size: 16px;
}

/* =============================================
   BRUTALISM MARQUEE BANNER
   ============================================= */
.modern-marquee-box {
    background: #000000 !important;
    border: 3px solid #000000 !important;
    overflow: hidden;
    box-shadow: 5px 5px 0px #000000 !important;
}

.modern-marquee-box .text {
    color: #ffffff !important;
    font-weight: 700;
}

/* =============================================
   BRUTALISM ICON BOXES (Interests)
   ============================================= */
.modern-icon-boxes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px !important;
    margin-top: 36px !important;
}

.modern-icon-boxes i {
    font-size: 42px;
    color: #000000;
    transition: none;
    cursor: default;
    font-weight: 900;
}

.modern-icon-boxes i:nth-child(1):hover,
.modern-icon-boxes i:nth-child(2):hover,
.modern-icon-boxes i:nth-child(3):hover {
    color: #000000;
    text-shadow: none;
    transform: scale(1.15) rotate(0deg);
}

/* =============================================
   BRUTALISM SOCIAL ICONS
   ============================================= */
.modern-social-icons {
    gap: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.modern-social-icons a {
    width: 56px !important;
    height: 56px !important;
    background: #ffffff !important;
    border: 3px solid #000000 !important;
    position: relative;
    overflow: hidden;
    transition: none !important;
    animation: none;
    box-shadow: 5px 5px 0px #000000 !important;
}

.modern-social-icons a::before {
    z-index: 0 !important;
    display: none !important;
}

.modern-social-icons a i {
    font-size: 24px !important;
    z-index: 2;
    position: relative;
    transition: none;
    color: #000000 !important;
    font-weight: 700;
}

.modern-social-icons a:nth-child(1):hover,
.modern-social-icons a:nth-child(2):hover,
.modern-social-icons a:nth-child(3):hover {
    transform: translate(-4px, -4px) !important;
    border-color: #000000 !important;
    box-shadow: 8px 8px 0px #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
}

.modern-social-icons a:nth-child(1):hover i,
.modern-social-icons a:nth-child(2):hover i,
.modern-social-icons a:nth-child(3):hover i {
    color: #ffffff !important;
}

/* =============================================
   BRUTALISM STATS / CLIENT BOX
   ============================================= */
.modern-stat h1 {
    font-size: 48px !important;
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: unset;
    font-weight: 900 !important;
    letter-spacing: -1px;
    transition: none;
}

.modern-stat:hover h1 {
    transform: none;
}

.modern-stat p {
    font-size: 11px !important;
    letter-spacing: 2px;
    text-transform: uppercase !important;
    color: #000000 !important;
    font-weight: 700;
}

/* =============================================
   CONTACT BOX  ? "Let's work together"
   ============================================= */
@keyframes contact-glow-pulse {
    0%, 100% { box-shadow: 0 0 40px rgba(23, 105, 255,.15), 0 8px 32px rgba(23, 105, 255,.08); }
    50%       { box-shadow: 0 0 60px rgba(23, 105, 255,.28), 0 12px 40px rgba(23, 105, 255,.16); }
}
@keyframes float-gentle {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-6px); }
}
@keyframes social-icon-in {
    from { opacity: 0; transform: scale(.5) rotate(-15deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes profile-card-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes contact-card-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(12px, -10px) scale(1.08); }
    66%       { transform: translate(-8px, 8px) scale(.94); }
}

/* Profile card */
.about-profile-box.modern-card {
    animation: profile-card-in .7s cubic-bezier(.34,1.1,.64,1) .2s both;
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}
.about-profile-box.modern-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(23, 105, 255,.14) !important;
}

/* Contact card */
.about-contact-box.modern-card {
    animation: contact-card-in .7s cubic-bezier(.34,1.1,.64,1) .35s both;
    animation-name: contact-glow-pulse, contact-card-in;
    animation-duration: 3.5s, .7s;
    animation-timing-function: ease-in-out, cubic-bezier(.34,1.1,.64,1);
    animation-delay: 1s, .35s;
    animation-iteration-count: infinite, 1;
    animation-fill-mode: none, both;
    position: relative;
    overflow: hidden;
    transition: transform .3s ease;
}
.about-contact-box.modern-card:hover {
    transform: translateY(-4px) scale(1.01);
}
.about-contact-box.modern-card::before {
    display: none !important;
}
.about-contact-box.modern-card::after {
    display: none !important;
}

.modern-contact-box h1 {
    font-size: 42px !important;
    line-height: 50px !important;
    color: #000000;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    animation: none;
    position: relative;
    z-index: 1;
}

.modern-contact-box h1 span {
    color: #000000;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

/* Spinning star - removed */
.spinning-star {
    animation: none !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
}

@keyframes spinStar {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* About button */
.about-btn img {
    transition: none;
}

.info-box:hover .about-btn img {
    transform: none;
}

/* =============================================
   MODERN FOOTER
   ============================================= */
.modern-footer {
    border-top: none;
    background: transparent !important;
    backdrop-filter: none;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    width: 100% !important;
}

/* Footer giant name - 70% visible from bottom */
.modern-logo--footer {
    font-size: 120px !important;
    font-family: 'Lexend Mega', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 6px !important;
    display: inline-block !important;
    line-height: 1 !important;
    overflow-y: hidden !important;
    overflow-x: visible !important;
    height: 0.7em !important;
    text-decoration: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    white-space: nowrap !important;
    margin: 0 auto !important;
}

/* Each animated letter span (injected by JS) */
.footer-letter {
    display: inline-block;
    line-height: 1;
    color: #000000;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    transform: translateY(1em);
    opacity: 0;
    will-change: transform, opacity;
}

.footer-letter--bracket {
    color: #000000;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

/* Triggered class ? letter marches up */
.footer-letter.fl-risen {
    animation: footerLetterRise 0.52s cubic-bezier(.22,.68,0,1.1) forwards;
}

.footer-content {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    overflow: visible !important;
}

@keyframes footerLetterRise {
    0%   { transform: translateY(1em); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* =============================================
   LINKEDIN STYLE CARD
   ============================================= */
.linkedin-style-card {
    padding: 32px !important;
    background: #ffffff !important;
    border: 3px solid #000000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.linkedin-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.linkedin-name {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    margin: 0 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    line-height: 1.2 !important;
}

.linkedin-headline {
    font-size: 16px !important;
    color: #000000 !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 400 !important;
}

.linkedin-location {
    font-size: 15px !important;
    color: #000000 !important;
    margin: 0 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 400 !important;
}

/* Hide animations */
@keyframes capImgIn { 
    from { opacity: 1; transform: none; }
    to { opacity: 1; transform: none; }
}

/* =============================================
   SECTION ENTRANCE ANIMATION HELPERS
   ============================================= */
.about-area {
    position: relative;
    z-index: 2;
}

/* Hide shine sweep animation */
.modern-card::after {
    display: none !important;
}

/* =============================================
   BRUTALISM SCROLL PROGRESS BAR
   ============================================= */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: #000000;
    z-index: 10001;
    transition: width 0.1s linear;
    box-shadow: none;
}

/* =============================================
   PRELOADER BRUTALISM
   ============================================= */
.preloader {
    background: #ffffff !important;
}

.preloader .loader {
    background: #000000 !important;
    box-shadow: none;
    border: 3px solid #000000;
}

/* =============================================
   ABOUT PAGE ? image box, details, edu/exp
   ============================================= */
.about-area .about-image-box.modern-card,
.about-area .about-details-inner.modern-card {
    overflow: hidden;
}

.about-details-inner.modern-card img[alt="Star"] {
    filter: none;
    animation: none;
    width: 36px;
    height: 36px;
    margin-bottom: 20px;
}

.about-details-inner.modern-card {
    position: relative;
    padding: 36px 36px 36px 48px !important;
    border-left: 3px solid #000000 !important;
    border-radius: 0;
    background: #ffffff !important;
    overflow: hidden;
    border: 2px solid #000000 !important;
    border-left: 3px solid #000000 !important;
    box-shadow: 3px 3px 0px #000000 !important;
}

.about-details-inner.modern-card::before {
    display: none;
}

.about-details-inner.modern-card h1 {
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: unset;
    font-size: 28px !important;
    font-weight: 900 !important;
    margin-bottom: 12px !important;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.about-details-inner.modern-card p {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: var(--text-muted) !important;
    max-width: 480px;
}

.about-edc-exp.modern-card h3 {
    letter-spacing: 3px;
    font-size: 11px;
    color: #000000 !important;
    margin-bottom: 32px;
    text-transform: uppercase;
    font-weight: 700;
}

/* -- Timeline layout -- */
@keyframes exp-line-grow {
    from { transform: scaleY(0); transform-origin: top; }
    to   { transform: scaleY(1); transform-origin: top; }
}
@keyframes exp-dot-pop {
    0%   { transform: scale(0); opacity: 0; }
    65%  { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes exp-slide-in {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes exp-skill-pop {
    from { opacity: 0; transform: scale(.7) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--primary), 0 0 12px var(--primary-glow); }
    50%       { box-shadow: 0 0 0 4px var(--primary), 0 0 22px var(--primary-glow); }
}

.exp-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.exp-timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: #000000;
    border-radius: 0;
    animation: none;
}
.exp-item {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
    position: relative;
    animation: none;
}
.exp-item:last-child { margin-bottom: 0; }
.exp-dot {
    flex-shrink: 0;
    width: 38px;
    display: flex;
    justify-content: center;
    padding-top: 4px;
    z-index: 1;
}
.exp-dot span {
    width: 14px;
    height: 14px;
    border-radius: 0;
    background: #000000;
    border: 2px solid #000000;
    box-shadow: none;
    display: block;
    margin-top: 3px;
    animation: none;
}
.exp-content {
    flex: 1;
    padding: 4px 0 20px 4px;
}
.exp-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}
.exp-company-logo {
    width: 90px;
    height: 42px;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
    border: 2px solid #000000;
    box-shadow: 2px 2px 0px #000000;
}
.exp-item:hover .exp-company-logo {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px #000000;
}
.exp-company-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.exp-logo-fallback {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--primary);
}
.exp-date {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #000000;
    text-transform: uppercase;
    margin: 0 0 4px;
}
.exp-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 0 3px !important;
    line-height: 1.3 !important;
    transition: none;
    text-transform: uppercase;
}
.exp-item:hover .exp-title { color: #000000 !important; }
.exp-company {
    font-size: 12px;
    color: #666666;
    margin: 0;
    font-weight: 600;
}
.exp-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.exp-skills span {
    font-size: 11px;
    font-weight: 700;
    color: #000000;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    padding: 6px 12px;
    letter-spacing: 0.5px;
    opacity: 1;
    animation: none !important;
    transition: none;
    text-transform: uppercase;
    box-shadow: 3px 3px 0px #000000;
}
.exp-skills span:hover {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
    box-shadow: 5px 5px 0px #000000;
    transform: translate(-2px, -2px);
}
.exp-item:nth-child(1) .exp-skills span:nth-child(1) { animation-delay: .7s; }
.exp-item:nth-child(1) .exp-skills span:nth-child(2) { animation-delay: .8s; }
.exp-item:nth-child(1) .exp-skills span:nth-child(3) { animation-delay: .9s; }
.exp-item:nth-child(1) .exp-skills span:nth-child(4) { animation-delay: 1s; }
.exp-item:nth-child(1) .exp-skills span:nth-child(5) { animation-delay: 1.1s; }
.exp-item:nth-child(1) .exp-skills span:nth-child(6) { animation-delay: 1.2s; }
.exp-item:nth-child(2) .exp-skills span:nth-child(1) { animation-delay: .95s; }
.exp-item:nth-child(2) .exp-skills span:nth-child(2) { animation-delay: 1.05s; }
.exp-item:nth-child(2) .exp-skills span:nth-child(3) { animation-delay: 1.15s; }
.exp-item:nth-child(2) .exp-skills span:nth-child(4) { animation-delay: 1.25s; }
.exp-item:nth-child(2) .exp-skills span:nth-child(5) { animation-delay: 1.35s; }
.exp-item:nth-child(2) .exp-skills span:nth-child(6) { animation-delay: 1.45s; }

/* =============================================
   PROJECT / WORKS CARDS
   ============================================= */
.project-item.modern-card {
    overflow: hidden;
    margin-bottom: 24px;
}

.project-item.modern-card .project-img {
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 16px;
    border: 2px solid #000000;
}

.project-item.modern-card .project-img img {
    transition: none;
    display: block;
    width: 100%;
}

.project-item.modern-card:hover .project-img img {
    transform: none;
}

.project-item.modern-card .project-info p {
    color: #000000 !important;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 700;
}

.project-item.modern-card .project-info h1 {
    font-size: 18px !important;
    color: #000000 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}

.project-btn {
    opacity: 1;
    transition: none !important;
}

.project-item.modern-card:hover .project-btn {
    opacity: 1;
}

.project-item.modern-card:hover .project-btn img {
    transform: none;
}

/* =============================================
   CONTACT PAGE
   ============================================= */
.contact-area h3 {
    color: #000000 !important;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 28px;
    position: relative;
    display: inline-block;
    font-weight: 700;
}

.contact-area h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 32px;
    height: 2px;
    background: #000000;
    border-radius: 0;
}

.contact-area .icon-box.modern-card {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: #ffffff !important;
    border-color: #000000 !important;
    transition: none !important;
    border: 2px solid #000000 !important;
    box-shadow: 2px 2px 0px #000000 !important;
}

.contact-area .icon-box.modern-card:hover {
    background: #000000 !important;
    box-shadow: 4px 4px 0px #000000 !important;
    transform: translate(-2px, -2px) !important;
}

.contact-area .icon-box.modern-card i {
    color: #000000;
    font-size: 24px;
    font-weight: 700;
}

.contact-area .icon-box.modern-card:hover i {
    color: #ffffff;
}

.contact-area .contact-details li {
    gap: 16px;
    margin-bottom: 20px;
}

.contact-area .contact-details .right span {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000000;
    opacity: 1;
    font-weight: 700;
}

.contact-area .contact-details .right h4 {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    margin-top: 2px;
}

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

.contact-area .social-links a.modern-social-link {
    width: 48px;
    height: 48px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    font-size: 20px;
    transition: none;
    box-shadow: 2px 2px 0px #000000;
    font-weight: 700;
}

.contact-area .social-links a.modern-social-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px #000000;
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}

/* =============================================
   SERVICE / BIO PAGE
   ============================================= */
.service-area .service-sidebar-inner.modern-card {
    background: #ffffff !important;
}

.service-area .service-sidebar-inner ul li {
    padding: 14px 16px;
    border-radius: 0;
    color: #000000;
    cursor: default;
    transition: none;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
}

.service-area .service-sidebar-inner ul li:hover {
    background: #f5f5f5;
    color: #000000;
    padding-left: 16px;
}

.service-area .service-sidebar-inner ul li .icon {
    color: #000000;
    font-size: 20px;
    flex-shrink: 0;
    font-weight: 700;
}

.service-area .service-content-inner.modern-card {
    overflow: hidden;
}

.service-area .service-content-inner .service-item {
    border-left: 2px solid rgba(23, 105, 255,0.2) !important;
    padding-left: 18px;
    margin-bottom: 20px;
    transition: border-color 0.3s;
}

.service-area .service-content-inner .service-item:hover {
    border-color: var(--primary) !important;
}

.service-area .service-content-inner .service-item p {
    color: rgba(30, 50, 100, 0.55);
    line-height: 1.7;
    font-size: 14px;
}

/* Section heading gradient */
.section-heading {
    background: linear-gradient(135deg, var(--text-main) 50%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* =============================================
   SKILLS SECTION ? Dice Throw & Roll Animation
   ============================================= */

.skills-area {
    padding-top: 0;
    padding-bottom: 60px;
    position: relative;
}

.skills-area .section-heading {
    margin-bottom: 48px;
    display: block;
}

/* Projects section ? mirrors skills-area */
.projects-area {
    padding-top: 0;
    padding-bottom: 60px;
}

/* Override style.css which hides this heading */
.projects-area .container > .section-heading {
    display: block !important;
}

.projects-area .section-heading {
    margin-bottom: 48px;
    display: block !important;
}

/* Group label */
.skills-group {
    margin-bottom: 40px;
}

.skills-group-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.skills-group-label::after {
    content: '';
    flex: 1;
    height: 2px;
    background: #000000;
    border-radius: 0;
}

/* Grid */
.skills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}



/* -- Individual card (graph node � circle) -- */
.skill-card {
    width: 100px;
    height: 100px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: default;
    border-radius: 0;
    background: #ffffff !important;
    border: 3px solid #000000 !important;
    box-shadow: 6px 6px 0px #000000 !important;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: scale(0.35);
    will-change: transform, opacity;
}

/* -- Rolled = node drops from left corner and rolls in -- */
.skill-card.rolled {
    animation: dropAndRoll var(--throw-dur, 0.85s) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* -- Settled: permanently visible after animation -- */
.skill-card.settled {
    opacity: 1 !important;
    transform: scale(1) !important;
    animation: none !important;
}
.skill-card.settled.node-connected {
    animation: nodeGlow 3s ease-in-out infinite !important;
}

@keyframes dropAndRoll {
    0% {
        opacity: 0;
        transform: translateX(-120%) translateY(-120px) scale(0.6) rotateZ(-90deg);
    }
    20% {
        opacity: 1;
        transform: translateX(-90%) translateY(-60px) scale(0.75) rotateZ(-75deg);
    }
    40% {
        opacity: 1;
        transform: translateX(-50%) translateY(-20px) scale(0.9) rotateZ(-45deg);
    }
    60% {
        opacity: 1;
        transform: translateX(-15%) translateY(-5px) scale(0.98) rotateZ(-15deg);
    }
    85% {
        opacity: 1;
        transform: translateX(-1%) translateY(0px) scale(1) rotateZ(-2deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0px) translateY(0px) scale(1) rotateZ(0deg);
    }
}

/* Node glow pulse after appearing */
.skill-card.node-connected {
    animation: none !important;
}
@keyframes nodeGlow {
    0%,100% { box-shadow: 0 0 0 #000000; }
    50%     { box-shadow: 0 0 0 #000000; }
}

/* -- Hover: scale up & enhanced shadow -- */
.skill-card:hover {
    box-shadow: 8px 8px 0px #000000 !important;
    transform: scale(1.08) translate(-2px, -2px) !important;
    animation: none !important;
}

@keyframes nodeHover {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1.05); }
}

/* Staggered animation delays for cascading drop-and-roll effect */
.skill-card.rolled:nth-child(1) { animation-delay: 0s; }
.skill-card.rolled:nth-child(2) { animation-delay: 0.08s; }
.skill-card.rolled:nth-child(3) { animation-delay: 0.16s; }
.skill-card.rolled:nth-child(4) { animation-delay: 0.24s; }
.skill-card.rolled:nth-child(5) { animation-delay: 0.32s; }
.skill-card.rolled:nth-child(6) { animation-delay: 0.4s; }
.skill-card.rolled:nth-child(7) { animation-delay: 0.48s; }
.skill-card.rolled:nth-child(8) { animation-delay: 0.56s; }
.skill-card.rolled:nth-child(9) { animation-delay: 0.64s; }
.skill-card.rolled:nth-child(10) { animation-delay: 0.72s; }
.skill-card.rolled:nth-child(n+11) { animation-delay: calc((var(--card-index, 11) - 11) * 0.08s + 0.8s); }

/* Icon - Brutalism Enhanced */
.skill-icon {
    font-size: 53px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    filter: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

.skill-icon i {
    font-size: 53px;
    display: block;
    line-height: 1;
    filter: none !important;
    box-shadow: none !important;
}

/* AI tools styled letter badge */
.skill-icon-ai {
    width: 53px;
    height: 53px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.5px;
    font-family: 'Space Grotesk', sans-serif;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Skill name - Brutalism Style */
.skill-name {
    font-size: 10px;
    font-weight: 700;
    color: #000000;
    text-align: center;
    letter-spacing: 1px;
    transition: all 0.2s ease;
    line-height: 1.2;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.skill-card:hover .skill-name {
    color: #000000;
    font-weight: 900;
}

/* =============================================
   SECTION LABEL DIVIDER
   ============================================= */

.section-label-wrap {
    padding: 48px 0 8px;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-label-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(23, 105, 255,0.4), transparent);
}

.section-label-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    white-space: nowrap;
    padding: 6px 18px;
    border-radius: 0;
    border: 1px solid rgba(23, 105, 255,0.3);
    background: rgba(23, 105, 255,0.07);
}

.section-label-text i {
    font-size: 16px;
}

/* =============================================
   DEVICE PREVIEW MOCKUP (real screenshots)
   ============================================= */

.fp-preview-wrap {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 52px;
    perspective: 1000px;
}

/* -- Desktop / Web device -- */
.fp-device-web {
    flex: 1;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: #0a0a14;
    box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(23, 105, 255,0.12);
    animation: deviceFloatWeb 7s ease-in-out infinite;
}

@keyframes deviceFloatWeb {
    0%, 100% { transform: translateY(0) rotateX(1.5deg); box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(23, 105, 255,0.12); }
    50%       { transform: translateY(-8px) rotateX(0deg); box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(23, 105, 255,0.25), 0 0 40px rgba(23, 105, 255,0.07); }
}

.fp-browser-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.fp-dot {
    width: 10px; height: 10px;
    border-radius: 0;
    flex-shrink: 0;
}
.fp-dot-red    { background: #ff5f57; }
.fp-dot-yellow { background: #febc2e; }
.fp-dot-green  { background: #28c840; }

.fp-url-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 0;
    padding: 4px 10px;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    overflow: hidden;
    white-space: nowrap;
}
.fp-url-bar i { font-size: 10px; color: #28c840; flex-shrink: 0; }

.fp-visit-btn {
    color: rgba(255,255,255,0.35);
    font-size: 14px;
    transition: color 0.2s;
    flex-shrink: 0;
}
.fp-visit-btn:hover { color: var(--primary); }

.fp-device-screen {
    width: 100%;
    overflow: hidden;
    max-height: 320px;
    display: flex;
    align-items: flex-start;
}

.fp-device-screen img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top;
    transition: transform 8s ease;
}

.fp-device-web:hover .fp-device-screen img {
    transform: translateY(calc(-100% + 320px));
}

/* -- Mobile / Phone device -- */
.fp-device-mobile {
    flex: 0 0 auto;
    width: 140px;
    animation: deviceFloatMobile 7s ease-in-out infinite 0.8s;
}

@keyframes deviceFloatMobile {
    0%, 100% { transform: translateY(0) rotate(1deg); filter: drop-shadow(0 12px 28px rgba(0,0,0,0.55)); }
    50%       { transform: translateY(-10px) rotate(0.5deg); filter: drop-shadow(0 22px 40px rgba(23, 105, 255,0.2)); }
}

.fp-phone-frame {
    background: #111118;
    border-radius: 0;
    border: 2px solid rgba(255,255,255,0.1);
    padding: 12px 6px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0 1px rgba(255,255,255,0.03);
    position: relative;
}

.fp-phone-notch {
    width: 48px; height: 8px;
    background: #111118;
    border-radius: 0;
    border: 2px solid rgba(255,255,255,0.08);
    border-top: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.fp-phone-screen {
    width: 100%;
    border-radius: 0;
    overflow: hidden;
    max-height: 260px;
    display: flex;
    align-items: flex-start;
}

.fp-phone-screen img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top;
    transition: transform 8s ease;
}

.fp-device-mobile:hover .fp-phone-screen img {
    transform: translateY(calc(-100% + 260px));
}

.fp-phone-home {
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 0;
    flex-shrink: 0;
}

/* =============================================
   EXPANDED PROJECT CARDS (featured projects)
   ============================================= */

.featured-projects {
    margin-top: 32px;
}

/* -- Card wrapper ? hidden before animation -- */
.fp-animate-wrap {
    opacity: 0;
    transform: translateY(60px) scale(0.97);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.fp-animate-wrap.fp-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* -- Base card -- */
.fp-card {
    padding: 36px 40px !important;
    margin-bottom: 28px;
    overflow: hidden;
    background: rgba(10, 10, 22, 0.75) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.35s cubic-bezier(0.23,1,0.32,1) !important;
    position: relative;
}

.fp-card:hover {
    border-color: rgba(23, 105, 255,0.4) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(23, 105, 255,0.2),
                inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transform: translateY(-4px) !important;
}

/* -- Animated corner accent line -- */
.fp-corner-accent {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--accent-cyan));
    border-radius: 0;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 5;
}

.fp-card:hover .fp-corner-accent,
.fp-animate-wrap.fp-visible .fp-corner-accent {
    width: 100%;
}

/* -- Header -- */
.fp-card .fp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.fp-card .fp-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 10px;
    background: linear-gradient(135deg, var(--text-main) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.fp-card .fp-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.fp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 0;
    border: 1px solid;
}

.fp-badge.backend {
    color: #1769ff;
    border-color: rgba(23, 105, 255,0.35);
    background: rgba(23, 105, 255,0.08);
}
.fp-badge.microservices {
    color: #1769ff;
    border-color: rgba(23, 105, 255,0.35);
    background: rgba(23, 105, 255,0.08);
}
.fp-badge.rest {
    color: #1769ff;
    border-color: rgba(23, 105, 255,0.35);
    background: rgba(23, 105, 255,0.08);
}

.fp-date {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.fp-github-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

.fp-github-btn i { font-size: 18px; }

.fp-github-btn:hover {
    background: rgba(23, 105, 255,0.15);
    border-color: rgba(23, 105, 255,0.5);
    box-shadow: 0 6px 22px rgba(23, 105, 255,0.3);
    color: var(--text-main);
    transform: translateY(-2px);
}

/* -- Service bullet list ? staggered slide-in -- */
.fp-services {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.fp-service-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 0;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.055);
    transition: background 0.3s, border-color 0.3s, transform 0.28s;
    /* Stagger set by JS */
    opacity: 0;
    transform: translateX(-20px);
}

.fp-service-item.fp-svc-visible {
    animation: fpServiceIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fpServiceIn {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.fp-service-item:hover {
    background: rgba(23, 105, 255,0.07);
    border-color: rgba(23, 105, 255,0.22);
    transform: translateX(5px);
}

.fp-service-dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
    flex-shrink: 0;
    margin-top: 5px;
}

.fp-service-content { flex: 1; }

.fp-service-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.fp-service-desc {
    font-size: 12px;
    color: rgba(30, 50, 100, 0.55);
    line-height: 1.7;
    margin: 0;
}

/* -- Key Skills row -- */
.fp-key-skills {
    margin-bottom: 20px;
    padding: 16px 18px;
    border-radius: 0;
    background: rgba(23, 105, 255,0.05);
    border: 1px solid rgba(23, 105, 255,0.15);
}

.fp-key-skills-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
    font-weight: 600;
}

.fp-key-skills-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fp-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    font-size: 12px;
    font-weight: 500;
    color: #ccc;
    transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s;
    cursor: default;
}

.fp-skill-chip i {
    font-size: 16px;
}

.fp-skill-chip:hover {
    background: rgba(23, 105, 255,0.12);
    border-color: rgba(23, 105, 255,0.4);
    color: var(--text-main);
    transform: translateY(-2px);
}

/* -- Tech tag pills -- */
.fp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fp-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 0;
    background: rgba(23, 105, 255,0.08);
    border: 1px solid rgba(23, 105, 255,0.18);
    color: #1769ff;
    text-transform: uppercase;
    transition: background 0.2s, transform 0.2s;
}

.fp-tag:hover {
    background: rgba(23, 105, 255,0.18);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .fp-card { padding: 24px 20px !important; }
    .fp-card .fp-header { flex-direction: column; }
    .fp-github-btn { width: 100%; justify-content: center; }
    .fp-key-skills-icons { gap: 8px; }
}

/* =============================================
   RESPONSIVE
   ============================================= */

.featured-project-card .fp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.featured-project-card .fp-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    background: linear-gradient(135deg, var(--text-main) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.featured-project-card .fp-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.fp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 0;
    border: 1px solid;
}

.fp-badge.backend {
    color: #1769ff;
    border-color: rgba(23, 105, 255,0.35);
    background: rgba(23, 105, 255,0.08);
}

.fp-badge.microservices {
    color: #1769ff;
    border-color: rgba(23, 105, 255,0.35);
    background: rgba(23, 105, 255,0.08);
}

.fp-badge.rest {
    color: #1769ff;
    border-color: rgba(23, 105, 255,0.35);
    background: rgba(23, 105, 255,0.08);
}

.fp-date {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.fp-github-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
    flex-shrink: 0;
}

.fp-github-btn i {
    font-size: 18px;
}

.fp-github-btn:hover {
    background: rgba(23, 105, 255,0.15);
    border-color: rgba(23, 105, 255,0.5);
    box-shadow: 0 6px 20px rgba(23, 105, 255,0.25);
    color: var(--text-main);
    transform: translateY(-2px);
}

/* Service list */
.fp-services {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fp-service-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.3s, border-color 0.3s, transform 0.25s;
}

.fp-service-item:hover {
    background: rgba(23, 105, 255,0.07);
    border-color: rgba(23, 105, 255,0.2);
    transform: translateX(4px);
}

.fp-service-dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary-glow);
    flex-shrink: 0;
    margin-top: 5px;
}

.fp-service-content {
    flex: 1;
}

.fp-service-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.fp-service-desc {
    font-size: 12px;
    color: rgba(30, 50, 100, 0.55);
    line-height: 1.65;
    margin: 0;
}

/* Tech tags */
.fp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.fp-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 0;
    background: rgba(23, 105, 255,0.1);
    border: 1px solid rgba(23, 105, 255,0.2);
    color: #1769ff;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .featured-project-card { padding: 24px 20px !important; }
    .featured-project-card .fp-header { flex-direction: column; }
    .fp-github-btn { width: 100%; justify-content: center; }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
    .hero-rings { display: none; }
    .blob { opacity: 0.12; }
    .hero-name { font-size: 28px !important; }
    .skill-card { width: 64px; height: 64px; }
    .skill-icon i { font-size: 44px; }
    .skill-icon { font-size: 44px; height: 48px; }
    .skill-icon-ai { width: 44px; height: 44px; font-size: 13px; }
}

/* =============================================
   LIGHT THEME ? Global Overrides
   (these must come last to beat style.css)
   ============================================= */

/* Body text */
body, p, li, span, div, h1, h2, h3, h4, h5, h6 {
    color: inherit;
}

/* Override hardcoded white text in style.css */
.menu li a,
.navbar .menu li a,
.footer-menu li a,
.footer-content p,
.footer-content .copyright {
    color: rgba(26, 26, 46, 0.7) !important;
}

.footer-menu li a:hover {
    color: var(--primary) !important;
}

.copyright span { color: var(--primary) !important; }

/* Info box labels/headings */
.info-box h4, .info-box h1 {
    color: var(--text-main) !important;
}

/* Cards general text */
.modern-card h1, .modern-card h2, .modern-card h3,
.modern-card h4, .modern-card p, .modern-card li {
    color: var(--text-main) !important;
}

.modern-card .text-muted, .modern-card p.text-muted {
    color: var(--text-muted) !important;
}

/* About page */
.about-details-inner p, .about-edc-exp.modern-card ul li p {
    color: var(--text-muted) !important;
}

/* Works page fp cards */
.fp-title, .fp-service-name { color: var(--text-main) !important; }
.fp-service-desc { color: var(--text-muted) !important; }
.fp-tag { background: rgba(23, 105, 255,0.08) !important; border-color: rgba(23, 105, 255,0.2) !important; color: var(--primary) !important; }

/* Service page */
.service-area .service-content-inner .service-item p {
    color: var(--text-muted) !important;
}
.service-area .service-sidebar-inner ul li {
    color: var(--text-muted) !important;
}

/* Contact page */
.contact-area h3, .contact-area .right h4 {
    color: var(--text-main) !important;
}

/* Skills cards */
.skill-card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0; }
.skill-card:hover { box-shadow: none !important; border: none !important; }
.skill-name { color: var(--text-main) !important; }
.skills-group-label { color: var(--text-muted) !important; }

/* FP card overrides */
.fp-card, .featured-project-card {
    background: rgba(255,255,255,0.85) !important;
    border-color: rgba(23, 105, 255,0.3) !important;
    box-shadow: 0 4px 24px rgba(23, 105, 255,0.07) !important;
}
.fp-card:hover, .featured-project-card:hover {
    border-color: rgba(23, 105, 255,0.3) !important;
    box-shadow: 0 12px 40px rgba(23, 105, 255,0.15) !important;
}

/* Section heading on all pages */
.section-heading {
    background: linear-gradient(135deg, var(--text-main) 50%, var(--primary) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* =============================================
   HOME PAGE ? BENTO GRID
   ============================================= */
#particle-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .3; }

.hp-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(80px, auto);
    gap: 18px;
    padding: 0 0 60px;
}

/* Base bento card */
.bc {
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(23, 105, 255, .2);
    border-radius: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 28px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,.68,0,1.1), box-shadow .35s ease, border-color .3s;
    will-change: transform;
    box-shadow: 0 2px 20px rgba(23, 105, 255, .06), 0 1px 6px rgba(0,0,0,.04);
}
/* Make overlay-link cover the entire bento card */
.bc .overlay-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 0;
}
.bc::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(167,243,208,.06) 60%);
    border-radius: 0;
    pointer-events: none;
}
.bc:hover { border-color: rgba(23, 105, 255, .35); box-shadow: 0 12px 48px rgba(23, 105, 255, .14), 0 4px 16px rgba(0,0,0,.06); }
.bc.bc-visible { opacity: 1; transform: translateY(0); }

.bc-shimmer {
    position: absolute;
    top: -60px; right: -60px;
    width: 160px; height: 160px;
    border-radius: 0;
    background: radial-gradient(circle, rgba(23, 105, 255, .12), transparent 70%);
    pointer-events: none;
}

/* Grid placements (no bc-hero card — hero is a standalone section above) */
.bc-tagline  { grid-column: 1/7;  grid-row: 1/2; display: flex; flex-direction: column; justify-content: center; }
.bc-exp      { grid-column: 7/13; grid-row: 1/2; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.bc-marquee  { grid-column: 1/13; grid-row: 2/3; display: flex; align-items: center; overflow: hidden; padding: 20px 28px; background: #000000 !important; }
.bc-github   { grid-column: 1/13; grid-row: 3/4; }
.bc-interests{ grid-column: 1/13; grid-row: 4/5; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
    background: #ffffff !important;
    overflow: hidden; min-height: 260px; padding: 36px 40px !important; border: 3px solid #000000 !important; box-shadow: 5px 5px 0px #000000 !important; }
.bc-captures { grid-column: 1/8;  grid-row: 5/6; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.bc-cta      { grid-column: 8/13; grid-row: 5/6; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: #ffffff !important; border: 3px solid #000000 !important; box-shadow: 5px 5px 0px #000000 !important; }

/* Hero photo rings */
.hero-photo-wrap {
    position: relative;
    flex-shrink: 0;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    overflow: visible;
}
.hero-photo-ring { position: absolute; border-radius: 0; border: 2px solid #000000; animation: none; opacity: 1; }
.hero-photo-ring:nth-child(1) { width: 320px; height: 320px; animation-delay: 0s; }
.hero-photo-ring:nth-child(2) { width: 340px; height: 340px; animation-delay: 0s; opacity: 1; }
.hero-photo-ring:nth-child(3) { width: 360px; height: 360px; animation-delay: 0s; opacity: 1; }
@keyframes ringPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1); opacity: 1; } }

.hero-photo {
    width: 220px;
    height: 220px;
    border-radius: 0;
    object-fit: cover;
    object-position: top center;
    border: 3px solid var(--primary);
    box-shadow:
        0 0 0 6px rgba(23, 105, 255,.12),
        0 12px 40px rgba(23, 105, 255,.3),
        0 2px 8px rgba(0,0,0,.12);
    position: relative;
    z-index: 2;
    animation: photoFloat 5s ease-in-out infinite, morphShape 10s ease-in-out infinite;
    filter: brightness(1.04) contrast(1.04);
    transition: transform .3s ease, box-shadow .3s ease;
}
.hero-photo:hover {
    box-shadow:
        0 0 0 8px rgba(23, 105, 255,.2),
        0 18px 52px rgba(23, 105, 255,.4),
        0 4px 12px rgba(0,0,0,.15);
}
@keyframes photoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes morphShape {
    0%,100% { border-radius: 0; }
    25%      { border-radius: 0; }
    50%      { border-radius: 0; }
    75%      { border-radius: 0; }
}

/* Hero badge */
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(23, 105, 255,.08); border: 1px solid rgba(23, 105, 255,.22); border-radius: 0; padding: 4px 14px; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; width: fit-content; position: relative; z-index: 10; }
.hero-badge .dot { width: 6px; height: 6px; border-radius: 0; background: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248,.6); animation: blinkDot 1.4s ease-in-out infinite; }
@keyframes blinkDot { 0%,100% { opacity: 1; } 50% { opacity: .2; } }

/* Glitch name */
.hero-name-glitch { font-family: 'Lexend Mega', sans-serif; font-size: clamp(2rem,4vw,3.2rem); font-weight: 400; color: var(--text-main); line-height: 1.1; position: relative; margin-bottom: 8px; }
.hero-name-glitch::before, .hero-name-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; }
.hero-name-glitch::before { color: rgba(23, 105, 255,.5); clip-path: polygon(0 30%,100% 30%,100% 55%,0 55%); animation: glitch1 5s infinite; }
.hero-name-glitch::after  { color: rgba(16,185,129,.4); clip-path: polygon(0 60%,100% 60%,100% 85%,0 85%); animation: glitch2 5s infinite; }
@keyframes glitch1 { 0%,90%,100%{transform:translate(0);opacity:0} 92%{transform:translate(-3px,1px);opacity:.7} 94%{transform:translate(3px,-1px);opacity:.5} 96%{transform:translate(-2px,2px);opacity:.7} }
@keyframes glitch2 { 0%,91%,100%{transform:translate(0);opacity:0} 93%{transform:translate(3px,1px);opacity:.6} 95%{transform:translate(-3px,-1px);opacity:.4} 97%{transform:translate(2px,2px);opacity:.6} }

.hero-role { font-size: 14px; color: var(--text-muted); letter-spacing: .5px; margin-bottom: 18px; min-height: 20px; }
.typed-cursor { color: var(--primary); animation: blinkDot .8s ease-in-out infinite; }

.hero-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* CTA buttons */
.hp-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: #000000; color: #ffffff !important; border: 2px solid #000000; border-radius: 0; padding: 12px 24px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; transition: none; box-shadow: 5px 5px 0px #000000; }
.hp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(23, 105, 255,.45); color: #0d1b3e !important; }

.hp-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.7); color: var(--text-main) !important; border: 1px solid rgba(23, 105, 255,.35); border-radius: 0; padding: 10px 20px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.hp-btn-ghost:hover { border-color: var(--primary); color: var(--accent) !important; background: rgba(23, 105, 255,.07); }

/* Tagline card */
.tagline-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.tagline-text { font-size: clamp(1.1rem,2.2vw,1.55rem); font-weight: 700; color: var(--text-main); line-height: 1.45; margin: 0; }
.tagline-text span { color: #000000; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; font-weight: 700; }
.tagline-sub { margin-top: 14px; font-size: 12.5px; color: var(--text-muted); line-height: 1.7; }
.tagline-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tagline-chip { font-size: 10.5px; font-weight: 600; padding: 4px 12px; border-radius: 0; background: rgba(23, 105, 255,.08); border: 1px solid rgba(23, 105, 255,.2); color: var(--accent); }

/* Experience card */
.exp-big { font-family: 'Lexend Mega', sans-serif; font-size: clamp(2.4rem,4vw,3.4rem); font-weight: 400; color: #000000; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; line-height: 1; margin-bottom: 6px; }
.exp-label-txt { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: var(--text-muted); }
.exp-divider { width: 100%; height: 2px; background: #000000; border-radius: 0; margin: 16px 0; }
.exp-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 0; }

/* Marquee */
.marquee-track { display: flex; white-space: nowrap; animation: marqueeScroll 22s linear infinite; }
.marquee-track span { display: inline-block; padding-right: 60px; font-size: 13px; color: #ffffff; }
.marquee-track span b { color: #FFFF00; font-weight: 600; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Taskade-style hero */
.bc-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    overflow: visible !important;
    padding: 32px 28px !important;
    gap: 0 !important;
}
.hero-section-full {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

/* ── NEW FULL-SCREEN HERO ── */
.hero-ts-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 0;
}

/* blurred background */
.hero-ts-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero-ts-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    filter: blur(28px) saturate(1.6) brightness(0.78);
    transform: scale(1.12);
}

/* left role tags — upper left, matching image */
.hero-ts-roles {
    position: absolute;
    left: clamp(24px, 3.5vw, 52px);
    top: clamp(90px, 14vh, 160px); /* below header */
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 4;
}
.hero-ts-roles span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(12px, 1.2vw, 18px);
    font-weight: 400;
    color: #000000;
    letter-spacing: 0.3px;
    line-height: 1.6;
}

/* center framed photo — absolutely centered, upper area */
.hero-ts-photo-frame {
    /* kept for fallback; hidden now that ID card replaces it */
    display: none;
}
.hero-ts-frame-img {
    display: none;
}

/* ============================================================
   HERO ID CARD — entrance, float, lanyard, flip animations
   ============================================================ */
@keyframes cardDrop {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-110%); }
    60%  { opacity: 1; transform: translateX(-50%) translateY(14px); }
    78%  { transform: translateX(-50%) translateY(-8px); }
    90%  { transform: translateX(-50%) translateY(4px); }
    100% { transform: translateX(-50%) translateY(0px); }
}
@keyframes lanyardSway {
    0%, 100% { transform: rotate(0deg); }
    30%       { transform: rotate(4deg); }
    70%       { transform: rotate(-4deg); }
}
@keyframes idFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    40%       { transform: translateY(-8px) rotate(1deg); }
    70%       { transform: translateY(4px) rotate(-0.8deg); }
}

/* Outer wrapper — perspective parent & absolute position */
.hero-id-outer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: cardDrop 1.1s cubic-bezier(0.22, 0.68, 0, 1.3) 0.15s both;
    perspective: 1100px;
}

/* ---- Lanyard ---- */
.hero-id-lanyard {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -2px;
    animation: lanyardSway 4s ease-in-out 1.3s infinite;
    transform-origin: top center;
}
.hero-id-clip {
    width: 36px;
    height: 14px;
    background: #e0e0e0;
    border: 2px solid #bbb;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}
/* Lanyard strap — white ribbon with repeating LUMEN in blue (vertical) */
.hero-id-strap {
    width: 28px;
    height: 90px;
    background: #ffffff;
    border-left: 2px solid rgba(0,0,0,0.08);
    border-right: 2px solid rgba(0,0,0,0.08);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.hero-id-strap span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: #1565c0;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    line-height: 1;
    white-space: nowrap;
}

/* ---- Card shell ---- */
.hero-id-card {
    width: clamp(200px, 21vw, 265px);
    height: clamp(315px, 33vw, 420px);
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    animation: idFloat 5s ease-in-out 1.5s infinite;
    border-radius: 14px;
}
.hero-id-card:hover {
    transform: rotateY(180deg);
}

/* ---- Shared face styles ---- */
.hero-id-face {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.3);
}

/* ============ FRONT ============ */
.hero-id-face--front {
    background: #f7f8fc;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Top colored bar */
.hero-id-topbar {
    width: 100%;
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
    padding: 10px 14px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
/* Logo + name grouped */
.hero-id-brand {
    display: flex;
    align-items: center;
    gap: 7px;
}
.hero-id-logo {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
.hero-id-org {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(7px, 0.7vw, 9px);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
}
.hero-id-nfc {
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
}

/* Photo */
.hero-id-photo-ring {
    margin-top: 16px;
    width: clamp(72px, 8vw, 96px);
    height: clamp(72px, 8vw, 96px);
    border-radius: 50%;
    border: 3px solid #1565c0;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(21,101,192,0.3);
}
.hero-id-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 10%;
}

/* Info block */
.hero-id-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 16px 8px;
    text-align: center;
    flex: 1;
}
.hero-id-name-text {
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #0f0f14;
}
.hero-id-role-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 500;
    color: #3a3a5c;
}
.hero-id-dept-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(8px, 0.75vw, 10px);
    color: #8888aa;
    margin-top: 2px;
}
.hero-id-avail {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(7.5px, 0.7vw, 9.5px);
    color: #2a7a2a;
    background: #e8f5e9;
    border-radius: 20px;
    padding: 3px 10px;
    margin-top: 4px;
}
.hero-id-avail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4caf50;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0.6); }
    50%       { box-shadow: 0 0 0 4px rgba(76,175,80,0); }
}

/* Footer bar with barcode */
.hero-id-footer-bar {
    width: 100%;
    background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
    padding: 10px 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.hero-id-barcode {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 24px;
}
.hero-id-barcode div {
    background: rgba(255,255,255,0.85);
    width: 2px;
    border-radius: 1px;
}
/* Varied bar heights for realistic barcode look */
.hero-id-barcode div:nth-child(odd)  { height: 100%; }
.hero-id-barcode div:nth-child(even) { height: 65%; }
.hero-id-barcode div:nth-child(3n)   { height: 80%; width: 3px; }
.hero-id-barcode div:nth-child(5n)   { height: 50%; }
.hero-id-serial {
    font-family: 'Space Grotesk', monospace;
    font-size: clamp(6.5px, 0.6vw, 8.5px);
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.12em;
}

/* ============ BACK ============ */
.hero-id-face--back {
    background: #f0f0f5;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
}
.hero-id-magstripe {
    width: 100%;
    height: 38px;
    background: linear-gradient(180deg, #1a1a1a 0%, #333 50%, #111 100%);
    margin-top: 22px;
    flex-shrink: 0;
}
.hero-id-back-body {
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.hero-id-back-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3a3a5c;
    margin: 0;
}
.hero-id-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.hero-id-chips span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(7.5px, 0.7vw, 9.5px);
    font-weight: 600;
    background: #1565c0;
    color: #fff;
    border-radius: 4px;
    padding: 3px 8px;
    letter-spacing: 0.04em;
}
.hero-id-sig-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid rgba(0,0,0,0.15);
    padding-top: 10px;
    margin-top: auto;
}
.hero-id-sig-line {
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
}
.hero-id-sig {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(13px, 1.3vw, 17px);
    font-style: italic;
    color: #111;
}
.hero-id-sig-caption {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(7px, 0.65vw, 8.5px);
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.hero-id-since {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(7.5px, 0.7vw, 9.5px);
    color: #8888aa;
    margin: 0;
    text-align: center;
    padding: 8px 0 4px;
}

/* right social bubbles — upper right matching image */
.hero-ts-socials {
    position: absolute;
    right: clamp(24px, 3.5vw, 52px);
    top: clamp(90px, 14vh, 160px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    z-index: 4;
    background: none;
    padding: 0;
    transition: opacity 0.3s ease;
}
.hero-ts-bubble {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bc, #333);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    text-decoration: none;
    transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
    box-shadow: 0 0 0 5px #ffffff, 0 4px 14px rgba(0,0,0,0.2);
    border: none;
}
.hero-ts-bubble:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 0 0 5px #ffffff, 0 8px 22px rgba(0,0,0,0.3);
    color: #fff;
}

/* ============================================================
   HERO ID CARD — MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    /* Hero section: taller to fit card + big name */
    .hero-ts-section {
        height: 97svh;
        min-height: 600px;
        overflow-x: hidden;
    }
    .hero-ts-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse at 50% 52%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.18) 55%, transparent 80%);
        z-index: 1;
        pointer-events: none;
    }

    /* Hide role tags on small screens, reposition socials */
    .hero-ts-roles {
        display: none;
    }
    .hero-ts-socials {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        position: fixed;
        top: 70%;
        right: 16px;
        left: auto;
        bottom: auto;
        transform: translateY(-50%);
        background: none;
        padding: 0;
        z-index: 999;
    }

    /* Card pinned to top on mobile */
    .hero-id-outer {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        animation: cardDropMobile 1.1s cubic-bezier(0.22, 0.68, 0, 1.3) 0.15s both;
    }

    @keyframes cardDropMobile {
        0%   { opacity: 0; transform: translateX(-50%) translateY(-110%); }
        60%  { opacity: 1; transform: translateX(-50%) translateY(14px); }
        78%  { transform: translateX(-50%) translateY(-8px); }
        90%  { transform: translateX(-50%) translateY(4px); }
        100% { transform: translateX(-50%) translateY(0); }
    }

    /* Shorter strap on mobile */
    .hero-id-strap {
        height: 56px;
    }

    /* Smaller card on mobile */
    .hero-id-card {
        width: clamp(170px, 52vw, 230px);
        height: clamp(265px, 80vw, 360px);
        animation: idFloat 5s ease-in-out 1.5s infinite;
    }

    /* Smaller photo */
    .hero-id-photo-ring {
        margin-top: 10px;
        width: clamp(58px, 16vw, 80px);
        height: clamp(58px, 16vw, 80px);
    }

    /* Tighter info padding */
    .hero-id-info {
        padding: 10px 10px 6px;
        gap: 3px;
    }

    /* Big name: smaller font, fits full name on mobile */
    .hero-ts-bottom {
        padding: 10px 16px 0 16px;
        overflow: visible;
    }
    .hero-ts-bigname {
        font-size: 6.5vw !important;
        white-space: nowrap;
    }
    .hero-ts-intro {
        font-size: 12px;
    }
    .hero-ts-bottom .hero-badge {
        font-size: 9px;
        padding: 5px 10px;
    }
    .hero-ts-bubble {
        width: 35px;
        height: 35px;
        font-size: 16px;
        border-radius: 50%;
        box-shadow: 0 0 0 3px #ffffff, 0 3px 8px rgba(0,0,0,0.2);
    }
    .hero-ts-bubble:first-child,
    .hero-ts-bubble:nth-child(2),
    .hero-ts-bubble:nth-child(3),
    .hero-ts-bubble:last-child { border-radius: 50%; }
    .hero-ts-socials {
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .hero-id-card {
        width: clamp(155px, 58vw, 210px);
        height: clamp(245px, 90vw, 330px);
    }
    .hero-id-strap {
        height: 48px;
    }
    .hero-ts-bigname {
        font-size: 12vw !important;
    }
}

/* bottom: intro + huge name bleeding off viewport bottom */
.hero-ts-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    padding: 0 clamp(20px, 3vw, 50px) clamp(12px, 2vh, 28px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.hero-ts-intro {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(13px, 1.5vw, 18px);
    font-weight: 400;
    color: rgba(255,255,255,0.88);
    margin: 0 0 -4px;
    letter-spacing: 0.3px;
}
.hero-ts-bigname {
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(4.5rem, 13vw, 15.1rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0;
    white-space: nowrap;
    text-transform: uppercase;
    /* top solid white fading to semi-transparent at bottom — exactly like image */
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, rgba(255,255,255,0.45) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-ts-bottom .hero-badge {
    margin-bottom: 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.4);
    color: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    box-shadow: none;
    font-size: 10px;
    letter-spacing: 1.5px;
    perspective: 600px;
    cursor: default;
    overflow: visible;
}
.hero-badge--flip .hero-badge-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-height: 1em;
}
.hero-badge--flip:hover .hero-badge-inner {
    transform: rotateY(180deg);
}
.hero-badge-front,
.hero-badge-back {
    display: flex;
    align-items: center;
    gap: 6px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    white-space: nowrap;
}
.hero-badge-back {
    position: absolute;
    left: 0;
    top: 50%;
    transform: rotateY(180deg) translateY(-50%);
}
.hero-ts-bottom .hero-badge .dot {
    background: #00DD00;
    box-shadow: 0 0 6px #00DD00;
}
.hero-ts-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 3;
}
.hero-ts-name-wrap {
    position: relative;
    display: block;
    overflow: visible;
    z-index: 1;
}
.hero-ts-name-row {
    display: flex;
    align-items: center;
    margin: 16px 0 0;
    line-height: 1;
    overflow: visible;
    position: relative;
    z-index: 2;
}
.hero-ts-part {
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(3rem, 12vw, 12rem);
    font-weight: 900;
    color: var(--text-main);
    line-height: 0.92;
    letter-spacing: -0.04em;
}
.hero-ts-lastname {
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(3.5rem, 11.5vw, 10rem);
    font-weight: 400;
    color: var(--text-main);
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin: 0 0 24px;
}
.hero-ts-photo-card {
    position: absolute;
    left: 60%;
    top: 70%;
    transform: translateX(-50%) translateY(-58%) rotate(-40deg);
    width: clamp(151px, 17.5vw, 303px);
    height: clamp(257px, 33.8vw, 482px);
    overflow: visible;
    border: none;
    background: transparent;
    box-shadow: none;
    z-index: 3;
    opacity: 1;
    animation: photoEntrance .9s cubic-bezier(.22,.68,0,1.2) both, photoCardFloat 5s ease-in-out 1s infinite;
    transition: transform .35s cubic-bezier(.22,.68,0,1.2), opacity .35s ease;
}
.hero-ts-photo-card:hover {
    opacity: 0.08;
    animation-play-state: paused;
}
@keyframes photoEntrance {
    from { opacity: 0; transform: translateX(-50%) translateY(-38%) rotate(-55deg) scale(.8); }
    to   { opacity: 1; transform: translateX(-50%) translateY(-58%) rotate(-40deg) scale(1); }
}
@keyframes photoCardFloat {
    0%, 100% { transform: translateX(-50%) translateY(-58%) rotate(-40deg); }
    50%       { transform: translateX(-50%) translateY(-72%) rotate(-40deg); }
}


.hero-ts-meta {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.hero-ts-meta .hero-role {
    margin: 0;
    font-size: 15px;
}
.hero-ts-star {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 0.7em;
    vertical-align: super;
    margin-left: 2px;
    color: var(--text-main);
}

/* Shared card elements */
.bc-label { font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.bc-title { font-family: 'Lexend Mega', sans-serif; font-size: 1.5rem; font-weight: 400; color: var(--text-main); margin: 0; line-height: 1.2; }
.bc-arrow { position: absolute; bottom: 22px; right: 22px; width: 36px; height: 36px; border-radius: 0; background: rgba(23, 105, 255,.08); border: 1px solid rgba(23, 105, 255,.22); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 18px; transition: background .25s, transform .25s, color .25s; }
.bc:hover .bc-arrow { background: var(--primary); color: #0d1b3e; transform: rotate(45deg) scale(1.1); }
.bc-icon-wrap { width: 48px; height: 48px; border-radius: 0; background: rgba(23, 105, 255,.08); border: 1px solid rgba(23, 105, 255,.2); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--accent); margin-bottom: 14px; }

/* GitHub contribution grid */
.github-grid { display: grid; grid-template-columns: repeat(7,1fr); grid-template-rows: repeat(4,8px); gap: 3px; margin-bottom: 14px; }
.gh-cell  { border-radius: 0; background: rgba(23, 105, 255,.08); }
.gh-cell.l1 { background: rgba(23, 105, 255,.18); }
.gh-cell.l2 { background: rgba(23, 105, 255,.38); }
.gh-cell.l3 { background: rgba(23, 105, 255,.62); }
.gh-cell.l4 { background: var(--primary); box-shadow: 0 0 6px rgba(23, 105, 255,.45); }

/* Social links */
.social-link-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(23, 105, 255,.18); text-decoration: none; transition: gap .25s; color: var(--text-muted); font-size: 13px; }
.social-link-row:last-of-type { border-bottom: none; }
.social-link-row:hover { gap: 18px; color: var(--accent); }
.social-link-row i { font-size: 18px; color: var(--accent); }
.sl-arrow { margin-left: auto; opacity: .35; transition: opacity .2s, transform .2s; font-size: 14px; }
.social-link-row:hover .sl-arrow { opacity: 1; transform: translateX(4px); }

/* Interest icons */
.interests-icons { display: flex; gap: 16px; margin-bottom: 20px; }
.interest-icon { width: 52px; height: 52px; border-radius: 0; background: rgba(255,255,255,.7); border: 1px solid rgba(23, 105, 255,.22); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); transition: background .25s, border-color .25s, transform .25s; animation: iconFloat 4s ease-in-out infinite; }
.interest-icon i { transition: none !important; }
.interest-icon:hover i { color: inherit; }
.interest-icon:nth-child(2) { animation-delay: .6s; }
.interest-icon:nth-child(3) { animation-delay: 1.2s; }
.interest-icon:nth-child(4) { animation-delay: 1.8s; }
.interest-icon:hover { background: rgba(23, 105, 255,.1); border-color: rgba(23, 105, 255,.4); transform: translateY(-4px) !important; }
@keyframes iconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* Interest icon tooltip */
.interest-icon[data-tip] { position: relative; cursor: default; }
.interest-icon[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--text-main);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}
.interest-icon[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: var(--text-main);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}
.interest-icon[data-tip]:hover::after,
.interest-icon[data-tip]:hover::before,
.interest-icon[data-tip].tip-show::after,
.interest-icon[data-tip].tip-show::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* -- Compact services list: names only, desc expands on hover -- */
.fp-services--names .fp-service-item {
    padding: 9px 16px;
    align-items: center;
    cursor: default;
}
.fp-services--names .fp-service-dot {
    margin-top: 0;
    flex-shrink: 0;
}
.fp-services--names .fp-service-name {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fp-services--names .fp-service-name::after {
    content: '�';
    font-size: 14px;
    color: rgba(91,120,246,0.5);
    transition: color 0.2s, transform 0.2s;
    display: inline-block;
    line-height: 1;
}
.fp-services--names .fp-service-item:hover .fp-service-name::after {
    color: #5B78F6;
    transform: rotate(90deg);
}
.fp-services--names .fp-service-desc {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    transition:
        max-height 0.38s cubic-bezier(0.22,1,0.36,1),
        opacity 0.28s ease,
        margin 0.38s cubic-bezier(0.22,1,0.36,1);
    pointer-events: none;
}
.fp-services--names .fp-service-item:hover .fp-service-desc {
    max-height: 200px;
    opacity: 1;
    margin-top: 8px;
    pointer-events: auto;
}

/* CTA orbit */
.cta-orbit { position: absolute; top: 50%; left: 65%; transform: translate(-50%,-50%); pointer-events: none; }
.cta-orbit-ring { position: absolute; border-radius: 0; border: 1px dashed rgba(23, 105, 255,.22); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: orbitSpin 12s linear infinite; }
.cta-orbit-ring:nth-child(1) { width: 160px; height: 160px; animation-duration: 10s; }
.cta-orbit-ring:nth-child(2) { width: 230px; height: 230px; animation-duration: 16s; animation-direction: reverse; }
.cta-orbit-dot { position: absolute; width: 8px; height: 8px; border-radius: 0; background: var(--primary); box-shadow: 0 0 10px rgba(23, 105, 255,.45); top: -4px; left: 50%; transform: translateX(-50%); }
@keyframes orbitSpin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

.cta-heading { font-family: 'Lexend Mega', sans-serif; font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 400; color: var(--text-main); line-height: 1.2; margin-bottom: 16px; position: relative; z-index: 1; }
.cta-heading span { color: #000000; background: none; -webkit-background-clip: unset; -webkit-text-fill-color: unset; background-clip: unset; font-weight: 700; }

/* -- Tagline accent bar -- */
.tagline-accent-bar {
    position: absolute;
    top: 0; left: 20px; right: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
    border-radius: 0;
}

/* -- Tagline stat strip -- */
.tagline-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(23,105,255,.12);
}
.tstat { display: flex; flex-direction: column; align-items: flex-start; }
.tstat-num {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.tstat-lbl { font-size: 9.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }
.tstat-sep { width: 1px; height: 26px; background: rgba(23,105,255,.18); }

/* -- Experience ring -- */
.bc-exp .bc-shimmer { display: block; }

/* exp-big gradient */
.bc-exp .exp-big {
    background: linear-gradient(135deg, var(--primary), var(--accent)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: none;
}

/* -- Experience bento card redesign -- */
.bc-exp .exp-header { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 14px; }
.exp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(23,105,255,.07);
    border: 1px solid rgba(23,105,255,.18);
    border-radius: 0;
    padding: 3px 10px;
    margin-bottom: 8px;
    width: fit-content;
}
.bc-exp .exp-header .exp-big { font-size: clamp(2rem,3.5vw,3rem); margin: 4px 0 2px; }
.bc-exp .exp-label-txt { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); margin: 0; }

/* Skill bars */
.exp-bars { display: flex; flex-direction: column; gap: 12px; }
.exp-bar-row { display: flex; align-items: center; gap: 8px; }
.exp-bar-lbl { font-size: 10.5px; font-weight: 700; color: #000000; width: 52px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 1px; }
.exp-bar-track {
    flex: 1;
    height: 18px;
    background: transparent;
    border: 2px solid #000000;
    border-radius: 0;
    overflow: hidden;
}
.exp-bar-fill {
    height: 100%;
    border-radius: 0;
    background: #00DD00;
    transform-origin: left;
    animation: expBarGrow .9s cubic-bezier(.22,1,.36,1) both;
    box-shadow: inset -2px -2px 0px rgba(0,0,0,0.2);
}
@keyframes expBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.exp-bar-pct { font-size: 10px; font-weight: 700; color: #000000; width: 28px; text-align: right; flex-shrink: 0; }

/* Milestone pills */
.exp-milestones { display: flex; flex-wrap: wrap; gap: 5px; }
.exp-mile {
    font-size: 9.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 0;
    background: rgba(23,105,255,.06);
    border: 1px solid rgba(23,105,255,.15);
    color: var(--accent);
    white-space: nowrap;
}
.bc-marquee { position: relative; }
.bc-marquee::before,
.bc-marquee::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 72px;
    z-index: 2;
    pointer-events: none;
}
.bc-marquee::before { left: 0; background: linear-gradient(to right, rgba(0,0,0,.96), transparent); }
.bc-marquee::after  { right: 0; background: linear-gradient(to left, rgba(0,0,0,.96), transparent); }

/* -- Project stacked mini cards -- */
.bc-proj-stack {
    position: relative;
    height: 86px;
    margin-bottom: 16px;
}
.bc-proj-mini {
    position: absolute;
    border-radius: 0;
    border: 1px solid rgba(23,105,255,.15);
    background: rgba(255,255,255,.65);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.bc-proj-mini--1 { width: 100%; bottom: 0; left: 0; z-index: 3; background: rgba(255,255,255,.92); border-color: rgba(23,105,255,.28); box-shadow: 0 4px 14px rgba(23,105,255,.1); }
.bc-proj-mini--2 { width: 88%; bottom: 10px; left: 6%; z-index: 2; opacity: .65; transform: translateY(-2px); }
.bc-proj-mini--3 { width: 76%; bottom: 20px; left: 12%; z-index: 1; opacity: .38; transform: translateY(-4px); }
.bc:hover .bc-proj-mini--2 { transform: translateY(-7px); opacity: .75; }
.bc:hover .bc-proj-mini--3 { transform: translateY(-14px); opacity: .5; }
.bc-proj-mini-tag { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.bc-proj-mini-bar { height: 4px; background: rgba(23,105,255,.18); border-radius: 0; width: 78%; }
.bc-proj-mini-bar--sm { width: 52%; background: rgba(23,105,255,.1); }
.bc-proj-chip { font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 0; background: rgba(23,105,255,.08); border: 1px solid rgba(23,105,255,.2); color: var(--accent); display: inline-block; margin-bottom: 8px; }

/* -- GitHub header row -- */
.gh-header-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gh-avatar { width: 36px; height: 36px; border-radius: 0; background: rgba(23,105,255,.07); border: 1px solid rgba(23,105,255,.2); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--text-main); }
.gh-meta { flex: 1; }
.gh-username { font-size: 12px; font-weight: 700; color: var(--text-main); }
.gh-status { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.gh-status-dot { width: 6px; height: 6px; border-radius: 0; background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); animation: blinkDot 2s ease-in-out infinite; flex-shrink: 0; }

/* =============================================
   GITHUB CARD v2 � Real data (profile / heatmap / repos / achievements)
   ============================================= */
.bc-github {
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap: 24px;
    align-items: start;
}

/* -- Left panel (identity + achievements + socials) -- */
.gh2-left {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* -- Right panel (heatmap + repos) -- */
.gh2-right {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* � Profile header � */
.gh2-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gh2-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.gh2-avatar {
    width: 54px;
    height: 54px;
    border-radius: 0;
    border: 2px solid rgba(23,105,255,.5);
    object-fit: cover;
    display: block;
}
.gh2-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    border-radius: 0;
    background: #3fb950;
    border: 2px solid #fff;
    box-shadow: 0 0 6px rgba(63,185,80,.6);
}
.gh2-ident { min-width: 0; flex: 1; }
.gh2-uname {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -.3px;
}
.gh2-bio {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* � Stat pills � */
.gh2-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.gh2-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    background: rgba(23,105,255,.07);
    border: 1px solid rgba(23,105,255,.15);
    border-radius: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}
.gh2-pill i { font-size: 12px; color: var(--primary); }
.gh2-pill--star { border-color: rgba(227,179,65,.25); background: rgba(227,179,65,.07); }
.gh2-pill--star i { color: #e3b341; }

/* � Section label � */
.gh2-lbl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

/* � Contribution heatmap � */
.gh2-contrib-wrap { display: flex; flex-direction: column; }
.gh2-contrib-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.gh2-contrib-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
}
.gh2-contrib-grid {
    display: flex;
    gap: 2px;
    padding: 10px;
    background: rgba(23,105,255,.04);
    border: 1px solid rgba(23,105,255,.1);
    border-radius: 0;
    overflow: hidden;
    min-height: 100px;
}
.gh2-contrib-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.gh2-contrib-cell {
    flex: 1;
    border-radius: 0;
    min-height: 9px;
    transition: opacity .15s;
    cursor: default;
}
.gh2-contrib-cell:hover { opacity: .65; }

/* � Top repos � */
.gh2-top-repos { display: flex; flex-direction: column; }
.gh2-repo-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gh2-repo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(23,105,255,.05);
    border: 1px solid rgba(23,105,255,.1);
    border-radius: 0;
    min-width: 0;
    transition: background .2s;
}
.gh2-repo-row:hover { background: rgba(23,105,255,.1); }
.gh2-repo-lang {
    width: 9px;
    height: 9px;
    border-radius: 0;
    flex-shrink: 0;
}
.gh2-repo-name {
    flex: 1;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.gh2-repo-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.gh2-repo-stars i { font-size: 11px; color: #e3b341; }

/* — Achievement badges — */
.gh2-achs-wrap { display: flex; flex-direction: column; }
.gh2-achs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 28px;
}
.gh2-ach-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--ach-rgb, 23,105,255),.1), rgba(var(--ach-rgb, 23,105,255),.06));
    border: 1px solid color-mix(in srgb, var(--ach-color, var(--primary)) 30%, transparent);
    color: var(--ach-color, var(--primary));
    letter-spacing: .1px;
    cursor: default;
    transition: transform .15s, box-shadow .15s;
}
.gh2-ach-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ach-color, var(--primary)) 30%, transparent);
}
.gh2-ach-tag i { font-size: 11px; }
.gh2-ach-img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.18));
}
.gh2-ach-empty { font-size: 10px; color: var(--text-muted); font-style: italic; }

/* ── GitHub social quick-links inside card ── */
.gh2-socials { display: flex; flex-direction: column; gap: 5px; }
.gh2-social-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(var(--sc-rgb, 23,105,255), .06);
    border: 1px solid rgba(var(--sc-rgb, 23,105,255), .14);
    text-decoration: none;
    color: var(--text-main);
    font-size: 11.5px;
    font-weight: 600;
    transition: background .2s, transform .15s;
}
.gh2-social-btn:hover { background: rgba(var(--sc-rgb, 23,105,255), .13); transform: translateX(3px); }
.gh2-social-btn i { font-size: 16px; color: var(--sc, var(--primary)); flex-shrink: 0; }
.gh2-social-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── GitHub logo mark in header ── */
.gh2-mark {
    margin-left: auto;
    font-size: 26px;
    color: rgba(23,105,255,.2);
    flex-shrink: 0;
}

/* — Footer row — */
.gh2-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/* =============================================
   GITHUB CARD v2 — Real data (profile / heatmap / repos / achievements)
   ============================================= */
.bc-github {
    display: grid !important;
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap: 24px;
    align-items: start;
}

/* ── Left panel (identity + achievements + socials) ── */
.gh2-left {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ── Right panel (heatmap + repos) ── */
.gh2-right {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* — Profile header — */
.gh2-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.gh2-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.gh2-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 2px solid rgba(23,105,255,.5);
    object-fit: cover;
    display: block;
}
.gh2-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #3fb950;
    border: 2px solid #fff;
    box-shadow: 0 0 6px rgba(63,185,80,.6);
}
.gh2-ident { min-width: 0; flex: 1; }
.gh2-uname {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -.3px;
}
.gh2-bio {
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* — Stat pills — */
.gh2-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.gh2-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    background: rgba(23,105,255,.07);
    border: 1px solid rgba(23,105,255,.15);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}
.gh2-pill i { font-size: 12px; color: var(--primary); }
.gh2-pill--star { border-color: rgba(227,179,65,.25); background: rgba(227,179,65,.07); }
.gh2-pill--star i { color: #e3b341; }

/* — Section label — */
.gh2-lbl {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

/* — Contribution heatmap — */
.gh2-contrib-wrap { display: flex; flex-direction: column; }
.gh2-contrib-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.gh2-contrib-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
}
.gh2-contrib-grid {
    display: flex;
    gap: 2px;
    padding: 10px;
    background: rgba(23,105,255,.04);
    border: 1px solid rgba(23,105,255,.1);
    border-radius: 10px;
    overflow: hidden;
    min-height: 100px;
}
.gh2-contrib-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.gh2-contrib-cell {
    flex: 1;
    border-radius: 2px;
    min-height: 9px;
    transition: opacity .15s;
    cursor: default;
}
.gh2-contrib-cell:hover { opacity: .65; }

/* — Top repos — */
.gh2-top-repos { display: flex; flex-direction: column; }
.gh2-repo-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gh2-repo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(23,105,255,.05);
    border: 1px solid rgba(23,105,255,.1);
    border-radius: 8px;
    min-width: 0;
    transition: background .2s;
}
.gh2-repo-row:hover { background: rgba(23,105,255,.1); }
.gh2-repo-lang {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gh2-repo-name {
    flex: 1;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.gh2-repo-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.gh2-repo-stars i { font-size: 11px; color: #e3b341; }

/* � Achievement badges � */
.gh2-achs-wrap { display: flex; flex-direction: column; }
.gh2-achs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 28px;
}
.gh2-ach-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(var(--ach-rgb, 23,105,255),.1), rgba(var(--ach-rgb, 23,105,255),.06));
    border: 1px solid color-mix(in srgb, var(--ach-color, var(--primary)) 30%, transparent);
    color: var(--ach-color, var(--primary));
    letter-spacing: .1px;
    cursor: default;
    transition: transform .15s, box-shadow .15s;
}
.gh2-ach-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ach-color, var(--primary)) 30%, transparent);
}
.gh2-ach-tag i { font-size: 11px; }
.gh2-ach-img {
    width: 20px;
    height: 20px;
    border-radius: 0;
    object-fit: cover;
    vertical-align: middle;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.18));
}
.gh2-ach-empty { font-size: 10px; color: var(--text-muted); font-style: italic; }

/* -- GitHub social quick-links inside card -- */
.gh2-socials { display: flex; flex-direction: column; gap: 5px; }
.gh2-social-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border-radius: 0;
    background: rgba(var(--sc-rgb, 23,105,255), .06);
    border: 1px solid rgba(var(--sc-rgb, 23,105,255), .14);
    text-decoration: none;
    color: var(--text-main);
    font-size: 11.5px;
    font-weight: 600;
    transition: background .2s, transform .15s;
}
.gh2-social-btn:hover { background: rgba(var(--sc-rgb, 23,105,255), .13); transform: translateX(3px); }
.gh2-social-btn i { font-size: 16px; color: var(--sc, var(--primary)); flex-shrink: 0; }
.gh2-social-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -- GitHub logo mark in header -- */
.gh2-mark {
    margin-left: auto;
    font-size: 26px;
    color: rgba(23,105,255,.2);
    flex-shrink: 0;
}

/* � Footer row � */
.gh2-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/* -- Redesigned social links -- */
.social-link-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 10px !important;
    border-bottom: none !important;
    border-radius: 0;
    margin-bottom: 4px;
    text-decoration: none;
    transition: background .2s, transform .2s !important;
    color: var(--text-muted) !important;
}
.social-link-row:hover { background: rgba(23,105,255,.06) !important; transform: translateX(4px) !important; }
.social-plat-icon { width: 32px; height: 32px; border-radius: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; }
.social-info { display: flex; flex-direction: column; flex: 1; gap: 1px; }
.social-name { font-size: 12.5px; font-weight: 600; color: var(--text-main); }
.social-handle { font-size: 10.5px; color: var(--text-muted); }
.social-link-row .sl-arrow { margin-left: auto; }

/* -- Interest vibe cards -- */
.interests-text-col { flex-shrink: 0; min-width: 200px; position: relative; z-index: 2; }

/* Floating background words */
.interests-float-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.ifb-word {
    position: absolute;
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(1.1rem, 2.2vw, 1.8rem);
    font-weight: 900;
    letter-spacing: -.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(23,105,255,.13);
    white-space: nowrap;
    transform: rotate(var(--fr, 0deg));
    animation: ifbFloat 5s ease-in-out infinite;
    animation-delay: var(--fd, 0s);
    user-select: none;
}
@keyframes ifbFloat {
    0%, 100% { transform: translateY(0) rotate(var(--fr, 0deg)); }
    50%       { transform: translateY(-8px) rotate(var(--fr, 0deg)); }
}

/* Deck nav dots */
.deck-nav { display: flex; gap: 7px; margin-top: 18px; }
.deck-dot { width: 7px; height: 7px; border-radius: 0; background: rgba(23,105,255,.2); border: 1px solid rgba(23,105,255,.3); cursor: pointer; transition: background .25s, transform .2s; }
.deck-dot.active { background: var(--primary); transform: scale(1.25); }

/* Deck wrapper */
.interest-deck-wrap { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }
.interest-deck {
    position: relative;
    width: 290px;
    height: 320px;
}
/* Glow halo behind deck */
.interest-deck::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 220px; height: 220px;
    border-radius: 0;
    background: radial-gradient(circle, rgba(23,105,255,.12) 0%, transparent 70%);
    filter: blur(18px);
    animation: deckHalo 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes deckHalo { 0%,100% { opacity:.6; transform:translate(-50%,-50%) scale(1); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.15); } }

/* Each card */
.ideck-card {
    position: absolute;
    inset: 0;
    perspective: 900px;
    cursor: pointer;
    transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .4s ease, z-index 0s;
}
/* Stacked deck offsets � set via JS */
.ideck-card[data-pos="0"] { transform: translate(0,0) rotate(0deg);    z-index: 4; opacity: 1; }
.ideck-card[data-pos="1"] { transform: translate(10px,8px) rotate(4deg);  z-index: 3; opacity: .75; pointer-events: none; }
.ideck-card[data-pos="2"] { transform: translate(20px,16px) rotate(8deg); z-index: 2; opacity: .45; pointer-events: none; }
.ideck-card[data-pos="3"] { transform: translate(30px,24px) rotate(12deg);z-index: 1; opacity: .2;  pointer-events: none; }

/* Slide-out animation */
.ideck-card.ideck-exit {
    transform: translateX(-160%) rotate(-18deg) !important;
    opacity: 0 !important;
    transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease !important;
}

/* 3D flip inner */
.ideck-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.22,1,.36,1);
    border-radius: 0;
}
.ideck-card[data-pos="0"]:hover .ideck-inner {
    transform: rotateY(180deg);
}

/* Front face */
.ideck-front, .ideck-back {
    position: absolute;
    inset: 0;
    border-radius: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
}
.ideck-front {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(23,105,255,.18);
    box-shadow: 0 8px 32px rgba(23,105,255,.1), 0 2px 8px rgba(0,0,0,.06);
}
.ideck-icon { font-size: 40px; color: var(--accent); line-height: 1; }
.ideck-label {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -.01em;
}
.ideck-hint {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(23,105,255,.4);
    margin-top: 4px;
}

/* Back face */
.ideck-back {
    background: linear-gradient(145deg, var(--primary), #5B78F6);
    border: none;
    transform: rotateY(180deg);
    gap: 12px;
}
.ideck-back-title {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    margin: 0;
    letter-spacing: -.01em;
}
.ideck-back-desc {
    font-size: 11.5px;
    color: rgba(255,255,255,.85);
    line-height: 1.65;
    text-align: center;
    margin: 0;
}
.interest-vibe-card:hover { background: rgba(23,105,255,.07); border-color: rgba(23,105,255,.3); transform: translateY(-4px); }
.ivc-icon { font-size: 28px; color: var(--accent); display: flex; align-items: center; justify-content: center; }
.ivc-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }

/* -- CTA mesh gradient -- */
.cta-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(23,105,255,.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(56,189,248,.1) 0%, transparent 45%),
        radial-gradient(circle at 60% 80%, rgba(16,185,129,.07) 0%, transparent 40%);
    pointer-events: none;
    border-radius: 0;
    animation: meshPulse 7s ease-in-out infinite;
}
@keyframes meshPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }

/* -- CTA availability badge -- */
.cta-avail-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(34,197,94,.1);
    border: 1px solid rgba(34,197,94,.3);
    border-radius: 0;
    padding: 4px 13px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #16a34a;
    margin-bottom: 14px;
    width: fit-content;
}
.cta-avail-dot { width: 6px; height: 6px; border-radius: 0; background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.6); animation: blinkDot 1.4s ease-in-out infinite; flex-shrink: 0; }

/* -- Captures bento card -- */
.cap-bento-eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cap-bento-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(23,105,255,.07);
    border: 1px solid rgba(23,105,255,.18);
    border-radius: 0;
    padding: 4px 12px;
}
.cap-bento-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .5px;
}
.cap-bento-pinterest {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #e60023;
    text-decoration: none;
    background: rgba(230,0,35,.07);
    border: 1px solid rgba(230,0,35,.2);
    border-radius: 0;
    padding: 3px 10px;
    position: relative;
    z-index: 3;
    transition: background .2s, transform .2s;
}
.cap-bento-pinterest:hover { background: rgba(230,0,35,.13); transform: translateY(-1px); }
.cap-bento-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    flex: 1;
    margin-bottom: 16px;
}
.cap-bento-img {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: rgba(23,105,255,.05);
    border: 1px solid rgba(23,105,255,.1);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
    animation: capImgIn .55s cubic-bezier(.22,1,.36,1) var(--delay,0s) both;
}
@keyframes capImgIn {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.bc-captures:hover .cap-bento-img { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(23,105,255,.12); }
.cap-bento-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.bc-captures:hover .cap-bento-img img { transform: scale(1.06); }
.cap-bento-img-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 18px 8px 7px;
    background: linear-gradient(to top, rgba(13,27,62,.7), transparent);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
}
.cap-bento-img--more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(23,105,255,.06);
    border: 1px dashed rgba(23,105,255,.22);
}
.cap-bento-more {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 1.4rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), #5B78F6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cap-bento-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

/* Responsive bento � tablet (=1100px) */
@media (max-width: 1100px) {
    .bc-hero     { grid-column: 1/7; }
    .bc-tagline  { grid-column: 7/13; }
    .bc-exp      { grid-column: 1/5;  grid-row: 2; }
    .bc-marquee  { grid-column: 5/13; grid-row: 2; }
    .bc-github   { grid-column: 1/13; grid-row: 3; }
    .bc-interests{ grid-column: 1/13; grid-row: 4; min-height: 220px; }
    .bc-captures { grid-column: 1/7;  grid-row: 5; }
    .bc-cta      { grid-column: 7/13; grid-row: 5; }
    .interest-deck { width: 220px; height: 260px; }
    .interests-text-col { margin-left: 5% !important; min-width: 160px; }
    .tagline-stats { flex-wrap: wrap; gap: 10px; }
    .exp-bar-lbl { width: 42px; }
}

/* Responsive bento � mobile (=768px) */
@media (max-width: 768px) {
    .hp-grid { grid-template-columns: 1fr; gap: 12px; padding: 0 0 40px; }
    .bc-hero, .bc-tagline, .bc-exp, .bc-marquee,
    .bc-github,
    .bc-interests, .bc-captures, .bc-cta { grid-column: 1/2; grid-row: auto; }
    /* GitHub card: single-column stack on mobile */
    .bc-github { grid-template-columns: 1fr !important; }
    .gh2-left, .gh2-right { height: auto; }
    .gh2-contrib-grid { min-height: 70px !important; }
    .gh2-repo-list { grid-template-columns: 1fr !important; }
    .gh2-socials { flex-direction: row; flex-wrap: wrap; }
    .gh2-social-btn { flex: 1; min-width: 120px; }
    /* Hero */
    .bc-hero { flex-direction: column !important; align-items: flex-start !important; padding: 24px !important; text-align: left; }
    .hero-section-full { padding: 90px 0 50px; min-height: unset; }
    .hero-ts-part { font-size: clamp(2.6rem, 14vw, 4rem); letter-spacing: -0.03em; }
    .hero-ts-name-wrap { margin-bottom: 55px; }
    .hero-ts-photo-card {
        width: 79px;
        height: 108px;
        left: 50%;
        transform: translateX(-50%) translateY(-58%) rotate(-40deg);
    }
    .hero-section-full:hover .hero-ts-photo-card {
        transform: translateX(-50%) translateY(-58%) rotate(-40deg) scale(1.04);
    }
    .hero-role { margin-top: 8px !important; font-size: 13px; }
    .hero-cta-row { justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
    .hp-btn-primary, .hp-btn-ghost { padding: 10px 18px; font-size: 12px; }
    /* Tagline */
    .tagline-stats { gap: 10px; }
    .tagline-text { font-size: 1.05rem; }
    /* Experience */
    .bc-exp { padding: 22px !important; }
    .exp-bar-lbl { width: 46px; font-size: 10px; }
    /* Marquee */
    .marquee-track span { font-size: 11px; }
    /* Projects */
    .bc-proj-stack { height: 70px; }
    /* Interests: stack vertically */
    .bc-interests {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
        min-height: unset !important;
        padding: 24px !important;
    }
    .interests-text-col { margin-left: 0 !important; }
    .interest-deck-wrap { width: 100%; justify-content: center; }
    .interest-deck { width: 200px; height: 240px; }
    .ifb-word { font-size: 1rem; }
    /* Captures */
    .cap-bento-strip { grid-template-columns: repeat(2, 1fr); }
    .cap-bento-img--more { display: none; }
    /* CTA */
    .cta-orbit { display: none; }
    .bc-cta { padding: 28px 24px !important; }
    /* Social */
    .social-link-row { padding: 8px 8px !important; }
    .social-plat-icon { width: 28px; height: 28px; font-size: 14px; }
    .social-name { font-size: 11.5px; }
    .social-handle { font-size: 9.5px; }
    /* GH grid */
    .github-grid { grid-template-rows: repeat(4, 6px); gap: 2px; }
    /* Arrow */
    .bc-arrow { width: 30px; height: 30px; font-size: 15px; bottom: 16px; right: 16px; }
}

/* iPad portrait + landscape (769px–1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Hero */
    .hero-section-full { padding: 100px 0 60px; }
    .hero-ts-part { font-size: clamp(3.5rem, 11vw, 7rem); letter-spacing: -0.04em; }
    .hero-ts-name-wrap { margin-bottom: 60px; }
    .hero-ts-photo-card {
        width: clamp(110px, 14vw, 165px);
        height: clamp(175px, 22vw, 260px);
        left: 50%;
        transform: translateX(-50%) translateY(-58%) rotate(-40deg);
    }
    .hero-section-full:hover .hero-ts-photo-card {
        transform: translateX(-50%) translateY(-58%) rotate(-40deg) scale(1.04);
    }
    /* Bento grid */
    .hp-grid { gap: 14px; }
    .bc-tagline  { grid-column: 1/7;  grid-row: 1/2; }
    .bc-exp      { grid-column: 7/13; grid-row: 1/2; }
    .bc-marquee  { grid-column: 1/13; grid-row: 2/3; }
    .bc-github   { grid-column: 1/13; grid-row: 3/4; flex-direction: column; }
    .gh2-left, .gh2-right { width: 100%; min-width: 0; }
    .gh2-contrib-grid { min-height: 80px; }
    .gh2-socials { flex-direction: row; flex-wrap: wrap; }
    .bc-interests { grid-column: 1/13; grid-row: 4/5; padding: 28px 32px !important; }
    .bc-captures { grid-column: 1/8;  grid-row: 5/6; }
    .bc-cta      { grid-column: 8/13; grid-row: 5/6; }
    /* Tagline */
    .tagline-text { font-size: 1.15rem; }
    /* Interests */
    .interests-text-col { margin-left: 8% !important; }
    .interest-deck { width: 220px; height: 265px; }
    /* CTA */
    .cta-orbit { left: 70%; }
    .cta-heading { font-size: 1.6rem; }
}

/* Extra small (=480px) */
@media (max-width: 480px) {
    .hp-grid { padding: 80px 0 32px; gap: 10px; }
    .bc { padding: 20px !important; border-radius: 0; }
    .hero-name-glitch { font-size: clamp(1.4rem, 7vw, 2rem); }
    .tagline-text { font-size: 1rem; }
    .tagline-chips { gap: 5px; }
    .tagline-chip { font-size: 9.5px; padding: 3px 9px; }
    .bc-title { font-size: 1.2rem; }
    .cap-bento-strip { gap: 6px; }
    .interest-deck { width: 180px; height: 220px; }
    .ideck-label { font-size: 1.1rem; }
    .ideck-icon { font-size: 32px; }
    .cta-heading { font-size: 1.3rem; }
    .exp-big { font-size: 2rem; }
    .tstat-num { font-size: 1.1rem; }
    .tstat-lbl { font-size: 8.5px; }
}

/* Blob responsive */
@media (max-width: 768px) {
    .blob { opacity: 0.16; }
}

/* =============================================
   CONTACT PAGE � bento redesign
   ============================================= */

/* Section wrapper */
.ct-section {
    padding: 110px 0 80px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

/* -- Ambient orbs -- */
.ct-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ct-orb {
    position: absolute;
    border-radius: 0;
    filter: blur(80px);
    opacity: 0;
    animation: ctOrbDrift 12s ease-in-out infinite;
}
.ct-orb--1 { width: 400px; height: 400px; background: rgba(23,105,255,.12); top: -80px; left: -100px; animation-delay: 0s; }
.ct-orb--2 { width: 340px; height: 340px; background: rgba(56,189,248,.1);  top: 40%;  right: -60px; animation-delay: -4s; }
.ct-orb--3 { width: 280px; height: 280px; background: rgba(91,120,246,.09); bottom: 0; left: 30%;   animation-delay: -8s; }
@keyframes ctOrbDrift {
    0%   { opacity: 0; transform: translate(0,0) scale(1); }
    15%  { opacity: 1; }
    50%  { transform: translate(20px,-18px) scale(1.08); }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translate(0,0) scale(1); }
}

/* -- Hero -- */
.ct-hero {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
    animation: ctHeroIn .8s cubic-bezier(.22,.68,0,1.1) both;
}
@keyframes ctHeroIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ct-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(23,105,255,.08);
    border: 1px solid rgba(23,105,255,.22);
    border-radius: 0;
    padding: 5px 18px;
    margin-bottom: 22px;
}
.ct-pulse-dot {
    width: 8px; height: 8px;
    border-radius: 0;
    background: #1769ff;
    display: inline-block;
    animation: ctPulse 1.8s ease-in-out infinite;
}
@keyframes ctPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(23,105,255,.5); }
    50%      { box-shadow: 0 0 0 5px rgba(23,105,255,0); }
}
.ct-heading {
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.1;
    margin-bottom: 18px;
}
.ct-heading-em {
    font-family: 'Lexend Mega', serif;
    font-style: italic;
    font-weight: 400;
    background: linear-gradient(90deg, var(--primary), #5B78F6, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ct-sub {
    font-size: 15.5px;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 28px;
}
.ct-hero-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ct-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(23,105,255,.35);
    transition: transform .2s, box-shadow .25s;
}
.ct-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(23,105,255,.45); color: #fff; }
.ct-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.82);
    color: var(--text-main);
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(23,105,255,.28);
    backdrop-filter: blur(12px);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.ct-btn-ghost:hover { transform: translateY(-2px); border-color: rgba(23,105,255,.5); box-shadow: 0 8px 24px rgba(23,105,255,.12); color: var(--text-main); }

/* Inline copy icon inside <a> buttons */
.ct-inline-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 0;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.18);
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    flex-shrink: 0;
    font-size: 14px;
    transition: background .2s, border-color .2s, transform .15s;
    color: inherit;
    vertical-align: middle;
}
.ct-inline-copy:hover { background: rgba(255,255,255,.32); border-color: rgba(255,255,255,.6); transform: scale(1.12); }
.ct-inline-copy .ct-check-icon { display: none; }
.ct-inline-copy.ct-copied .ct-copy-icon  { display: none; }
.ct-inline-copy.ct-copied .ct-check-icon { display: block; color: #86efac; }
.ct-inline-copy.ct-copied { border-color: rgba(134,239,172,.5); background: rgba(34,197,94,.2); }

/* Inside .ct-email-action (lighter background) */
.ct-email-action .ct-inline-copy {
    border-color: rgba(23,105,255,.28);
    background: rgba(23,105,255,.07);
    color: var(--accent);
}
.ct-email-action .ct-inline-copy:hover { background: rgba(23,105,255,.18); border-color: rgba(23,105,255,.5); }
.ct-email-action .ct-inline-copy.ct-copied .ct-check-icon { color: #22c55e; }

/* -- Bento grid -- */
.ct-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(60px, auto);
    gap: 18px;
    position: relative;
    z-index: 2;
}

/* -- Base card -- */
.ct-bc {
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(23,105,255,.2);
    border-radius: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: border-color .25s, box-shadow .3s, transform .3s;
}
.ct-bc:hover {
    border-color: rgba(23,105,255,.38);
    box-shadow: 0 10px 40px rgba(23,105,255,.12);
    transform: translateY(-3px);
}
.ct-bc-shimmer {
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 0;
    background: radial-gradient(circle, rgba(23,105,255,.14) 0%, transparent 70%);
    pointer-events: none;
}
.ct-bc-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 6px;
    display: block;
}
.ct-bc-title {
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.1;
    margin: 0 0 22px;
}

/* -- Email card -- */
.ct-bc-email { grid-column: 1/6; grid-row: 1/2; }
.ct-email-ring-wrap {
    position: absolute;
    bottom: -60px; right: -60px;
    pointer-events: none;
}
.ct-email-ring {
    position: absolute;
    border-radius: 0;
    border: 1.5px solid rgba(23,105,255,.15);
    animation: ctRingGrow 4s ease-in-out infinite;
}
.ct-email-ring        { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
.ct-email-ring--2     { width: 290px; height: 290px; margin: -145px 0 0 -145px; animation-delay: -2s; border-color: rgba(23,105,255,.07); }
@keyframes ctRingGrow {
    0%,100% { transform: scale(1);   opacity: .8; }
    50%      { transform: scale(1.1); opacity: .3; }
}
.ct-email-action {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(23,105,255,.07);
    border: 1px solid rgba(23,105,255,.22);
    border-radius: 0;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--text-main);
    font-size: 13.5px;
    font-weight: 600;
    word-break: break-all;
    transition: background .2s, border-color .2s, transform .2s, gap .2s;
    position: relative;
    z-index: 1;
}
.ct-email-action i:first-child { font-size: 20px; color: var(--accent); flex-shrink: 0; }
.ct-email-action span { flex: 1; }
.ct-ea-arrow { font-size: 16px; color: var(--accent); opacity: .5; transition: opacity .2s, transform .2s; }
.ct-email-action:hover { background: rgba(23,105,255,.14); border-color: rgba(23,105,255,.45); transform: translateY(-2px); }
.ct-email-action:hover .ct-ea-arrow { opacity: 1; transform: rotate(45deg) translate(2px,-2px); }
.ct-email-note {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 10px 0 0;
    position: relative;
    z-index: 1;
}

/* -- Availability card -- */
.ct-bc-avail {
    grid-column: 6/9; grid-row: 1/2;
    background: linear-gradient(140deg, rgba(23,105,255,.08), rgba(56,189,248,.05)) !important;
    border-color: rgba(23,105,255,.28) !important;
}
.ct-avail-pulse {
    position: absolute;
    inset: 0;
    border-radius: 0;
    border: 1.5px solid rgba(23,105,255,.3);
    animation: ctAvailPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ctAvailPulse {
    0%,100% { opacity: .8; transform: scale(1); }
    50%      { opacity: 0; transform: scale(1.04); }
}
.ct-avail-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ct-avail-dot {
    width: 10px; height: 10px; border-radius: 0;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.25);
    animation: ctDotPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ctDotPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
    50%      { box-shadow: 0 0 0 6px rgba(34,197,94,.08); }
}
.ct-avail-live { font-size: 11px; font-weight: 700; color: #22c55e; letter-spacing: .5px; }
.ct-avail-heading {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.2;
    margin: 0 0 14px;
}
.ct-avail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-avail-chip {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--accent);
    background: rgba(23,105,255,.1);
    border: 1px solid rgba(23,105,255,.25);
    border-radius: 0;
    padding: 4px 12px;
}

/* -- Location card -- */
.ct-bc-location { grid-column: 9/13; grid-row: 1/2; }
.ct-loc-icon {
    width: 42px; height: 42px;
    border-radius: 0;
    background: rgba(23,105,255,.08);
    border: 1px solid rgba(23,105,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--accent);
    margin-bottom: 12px;
    transition: transform .3s;
}
.ct-bc-location:hover .ct-loc-icon { transform: scale(1.1) rotate(-8deg); }
.ct-loc-city {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1;
    margin: 0;
}
.ct-loc-city span { color: var(--accent); }
.ct-loc-country { font-size: 13px; color: var(--text-muted); margin: 4px 0 14px; }
.ct-tz-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(23,105,255,.08);
    border: 1px solid rgba(23,105,255,.2);
    border-radius: 0;
    padding: 4px 12px;
}
.ct-tz-badge i { font-size: 13px; }

/* -- Social card -- */
.ct-bc-social { grid-column: 1/5; grid-row: 2/3; }
.ct-sl {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 0;
    margin-bottom: 6px;
    transition: background .2s, transform .2s;
}
.ct-sl:last-child { margin-bottom: 0; }
.ct-sl:hover { background: rgba(23,105,255,.06); transform: translateX(4px); }
.ct-sl-icon {
    width: 36px; height: 36px;
    border-radius: 0;
    border: 1px solid;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform .25s;
}
.ct-sl:hover .ct-sl-icon { transform: scale(1.12); }
.ct-sl-info { display: flex; flex-direction: column; flex: 1; }
.ct-sl-name { font-size: 13px; font-weight: 700; color: var(--text-main); line-height: 1.3; }
.ct-sl-handle { font-size: 10.5px; color: var(--text-muted); }
.ct-sl-arrow { font-size: 16px; color: var(--text-muted); opacity: .4; transition: opacity .2s, transform .2s; }
.ct-sl:hover .ct-sl-arrow { opacity: 1; transform: rotate(45deg) translate(2px,-2px); }

/* -- Services card -- */
.ct-bc-services { grid-column: 5/13; grid-row: 2/3; }
.ct-services-list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}
.ct-services-list li {
    display: flex;
}
.ct-hero-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ct-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    text-decoration: none;
    padding: 13px 28px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 6px 24px rgba(23,105,255,.35);
    transition: transform .2s, box-shadow .25s;
}
.ct-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(23,105,255,.45); color: #fff; }
.ct-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.82);
    color: var(--text-main);
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(23,105,255,.28);
    backdrop-filter: blur(12px);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.ct-btn-ghost:hover { transform: translateY(-2px); border-color: rgba(23,105,255,.5); box-shadow: 0 8px 24px rgba(23,105,255,.12); color: var(--text-main); }

/* -- Bento grid -- */
.ct-bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(60px, auto);
    gap: 18px;
    position: relative;
    z-index: 2;
}

/* -- Base card -- */
.ct-bc {
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(23,105,255,.2);
    border-radius: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 28px;
    position: relative;
    overflow: hidden;
    transition: border-color .25s, box-shadow .3s, transform .3s;
}
.ct-bc:hover {
    border-color: rgba(23,105,255,.38);
    box-shadow: 0 10px 40px rgba(23,105,255,.12);
    transform: translateY(-3px);
}
.ct-bc-shimmer {
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 0;
    background: radial-gradient(circle, rgba(23,105,255,.14) 0%, transparent 70%);
    pointer-events: none;
}
.ct-bc-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 6px;
    display: block;
}
.ct-bc-title {
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.1;
    margin: 0 0 22px;
}

/* -- Email card -- */
.ct-bc-email { grid-column: 1/6; grid-row: 1/2; }
.ct-email-ring-wrap {
    position: absolute;
    bottom: -60px; right: -60px;
    pointer-events: none;
}
.ct-email-ring {
    position: absolute;
    border-radius: 0;
    border: 1.5px solid rgba(23,105,255,.15);
    animation: ctRingGrow 4s ease-in-out infinite;
}
.ct-email-ring        { width: 200px; height: 200px; margin: -100px 0 0 -100px; }
.ct-email-ring--2     { width: 290px; height: 290px; margin: -145px 0 0 -145px; animation-delay: -2s; border-color: rgba(23,105,255,.07); }
@keyframes ctRingGrow {
    0%,100% { transform: scale(1);   opacity: .8; }
    50%      { transform: scale(1.1); opacity: .3; }
}
.ct-email-action {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(23,105,255,.07);
    border: 1px solid rgba(23,105,255,.22);
    border-radius: 0;
    padding: 14px 18px;
    text-decoration: none;
    color: var(--text-main);
    font-size: 13.5px;
    font-weight: 600;
    word-break: break-all;
    transition: background .2s, border-color .2s, transform .2s, gap .2s;
    position: relative;
    z-index: 1;
}
.ct-email-action i:first-child { font-size: 20px; color: var(--accent); flex-shrink: 0; }
.ct-email-action span { flex: 1; }
.ct-ea-arrow { font-size: 16px; color: var(--accent); opacity: .5; transition: opacity .2s, transform .2s; }
.ct-email-action:hover { background: rgba(23,105,255,.14); border-color: rgba(23,105,255,.45); transform: translateY(-2px); }
.ct-email-action:hover .ct-ea-arrow { opacity: 1; transform: rotate(45deg) translate(2px,-2px); }
.ct-email-note {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 10px 0 0;
    position: relative;
    z-index: 1;
}

/* -- Availability card -- */
.ct-bc-avail {
    grid-column: 6/9; grid-row: 1/2;
    background: linear-gradient(140deg, rgba(23,105,255,.08), rgba(56,189,248,.05)) !important;
    border-color: rgba(23,105,255,.28) !important;
}
.ct-avail-pulse {
    position: absolute;
    inset: 0;
    border-radius: 0;
    border: 1.5px solid rgba(23,105,255,.3);
    animation: ctAvailPulse 2.8s ease-in-out infinite;
    pointer-events: none;
}
@keyframes ctAvailPulse {
    0%,100% { opacity: .8; transform: scale(1); }
    50%      { opacity: 0; transform: scale(1.04); }
}
.ct-avail-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ct-avail-dot {
    width: 10px; height: 10px; border-radius: 0;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.25);
    animation: ctDotPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ctDotPulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
    50%      { box-shadow: 0 0 0 6px rgba(34,197,94,.08); }
}
.ct-avail-live { font-size: 11px; font-weight: 700; color: #22c55e; letter-spacing: .5px; }
.ct-avail-heading {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.2;
    margin: 0 0 14px;
}
.ct-avail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-avail-chip {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--accent);
    background: rgba(23,105,255,.1);
    border: 1px solid rgba(23,105,255,.25);
    border-radius: 0;
    padding: 4px 12px;
}

/* -- Location card -- */
.ct-bc-location { grid-column: 9/13; grid-row: 1/2; }
.ct-loc-icon {
    width: 42px; height: 42px;
    border-radius: 0;
    background: rgba(23,105,255,.08);
    border: 1px solid rgba(23,105,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--accent);
    margin-bottom: 12px;
    transition: transform .3s;
}
.ct-bc-location:hover .ct-loc-icon { transform: scale(1.1) rotate(-8deg); }
.ct-loc-city {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-main);
    line-height: 1;
    margin: 0;
}
.ct-loc-city span { color: var(--accent); }
.ct-loc-country { font-size: 13px; color: var(--text-muted); margin: 4px 0 14px; }
.ct-tz-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(23,105,255,.08);
    border: 1px solid rgba(23,105,255,.2);
    border-radius: 0;
    padding: 4px 12px;
}
.ct-tz-badge i { font-size: 13px; }

/* -- Social card -- */
.ct-bc-social { grid-column: 1/5; grid-row: 2/3; }
.ct-sl {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 0;
    margin-bottom: 6px;
    transition: background .2s, transform .2s;
}
.ct-sl:last-child { margin-bottom: 0; }
.ct-sl:hover { background: rgba(23,105,255,.06); transform: translateX(4px); }
.ct-sl-icon {
    width: 36px; height: 36px;
    border-radius: 0;
    border: 1px solid;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform .25s;
}
.ct-sl:hover .ct-sl-icon { transform: scale(1.12); }
.ct-sl-info { display: flex; flex-direction: column; flex: 1; }
.ct-sl-name { font-size: 13px; font-weight: 700; color: var(--text-main); line-height: 1.3; }
.ct-sl-handle { font-size: 10.5px; color: var(--text-muted); }
.ct-sl-arrow { font-size: 16px; color: var(--text-muted); opacity: .4; transition: opacity .2s, transform .2s; }
.ct-sl:hover .ct-sl-arrow { opacity: 1; transform: rotate(45deg) translate(2px,-2px); }

/* -- Services card -- */
.ct-bc-services { grid-column: 5/13; grid-row: 2/3; }
.ct-services-list {
    list-style: none;
    padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}
.ct-services-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--text-main);
    line-height: 1.5;
    padding: 8px 10px;
    border-radius: 0;
    transition: background .2s;
}
.ct-services-list li:hover { background: rgba(23,105,255,.05); }
.ct-services-list li i { font-size: 17px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* -- Response card -- */
.ct-bc-response {
    grid-column: 1/13; grid-row: 3/4;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 28px;
    background: rgba(23,105,255,.04) !important;
    border-style: dashed !important;
}
.ct-resp-inner { display: flex; align-items: center; gap: 14px; flex: 1; }
.ct-resp-icon {
    width: 42px; height: 42px;
    border-radius: 0;
    background: rgba(23,105,255,.08);
    border: 1px solid rgba(23,105,255,.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--accent); flex-shrink: 0;
}
.ct-resp-text { font-size: 14px; color: var(--text-main); margin: 0 0 2px; }
.ct-resp-text strong { color: var(--text-main); }
.ct-resp-sub { font-size: 11.5px; color: var(--text-muted); margin: 0; }
.ct-resp-divider { width: 1px; height: 36px; background: rgba(23,105,255,.2); }
.ct-resp-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .2s;
}
.ct-resp-link:hover { opacity: .75; color: var(--accent); }
.ct-resp-link i { font-size: 16px; }

/* -- Responsive -- */
@media (max-width: 1100px) {
    .ct-bc-email    { grid-column: 1/7; }
    .ct-bc-avail    { grid-column: 7/10; }
    .ct-bc-location { grid-column: 10/13; }
    .ct-bc-social   { grid-column: 1/5; }
    .ct-bc-services { grid-column: 5/13; }
}
@media (max-width: 768px) {
    .ct-bento { grid-template-columns: 1fr; gap: 12px; }
    .ct-bc-email, .ct-bc-avail, .ct-bc-location,
    .ct-bc-social, .ct-bc-services, .ct-bc-response { grid-column: 1/2; grid-row: auto; }
    .ct-bc-response { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ct-resp-divider { width: 40px; height: 1px; }
    .ct-services-list { grid-template-columns: 1fr; }
    .ct-heading { font-size: 2rem; }
}
@media (max-width: 480px) {
    .ct-section { padding: 90px 0 60px; }
    .ct-bc { padding: 20px; border-radius: 0; }
    .ct-bc-title { font-size: 1.6rem; }
}

/* =============================================
   CAPTURES PAGE
   ============================================= */

.cap-section {
    padding: 110px 0 80px;
    position: relative;
    z-index: 2;
}

/* Hero */
/* -- Hero: cinematic split layout -- */
.cap-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    margin-bottom: 72px;
    position: relative;
    min-height: 420px;
    padding: 32px 0 0;
}

/* Oversized watermark */
.cap-watermark {
    position: absolute;
    top: -28px;
    left: -10px;
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(80px, 14vw, 170px);
    font-weight: 900;
    letter-spacing: -4px;
    color: rgba(23,105,255,0.04);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 0;
}

/* Left: text */
.cap-hero-text {
    position: relative;
    z-index: 1;
}

/* Eyebrow pill - brutalism */
.cap-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #000000;
    background: transparent;
    border: 2px solid #000000;
    border-radius: 0;
    padding: 8px 18px;
    margin-bottom: 24px;
    opacity: 1;
    transform: none;
    transition: none;
}
.cap-eyebrow.cap-eyebrow-in { opacity: 1; transform: none; }
.cap-shutter { display: flex; align-items: center; color: #000000; font-weight: 700; }
.cap-shutter svg { animation: none; }
@keyframes shutterSpin {
    0%   { transform: rotate(0deg);   }
    90%  { transform: rotate(0deg);   }
    92%  { transform: rotate(45deg);  }
    94%  { transform: rotate(0deg);   }
    100% { transform: rotate(0deg);   }
}

/* Heading - solid color */
.cap-heading {
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(2.6rem, 5.5vw, 4.2rem);
    font-weight: 900;
    color: #000000;
    line-height: 1.08;
    margin-bottom: 18px;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: -1px;
}
.cap-heading em {
    font-style: normal;
    color: #000000;
    background: none;
    -webkit-text-fill-color: unset;
}
.cap-line {
    display: block;
    opacity: 1;
    transform: none;
    transition: none;
}
.cap-line-in { opacity: 1; transform: none; }

.cap-sub {
    font-size: 15px;
    color: #666666;
    line-height: 1.75;
    margin-bottom: 32px;
    max-width: 480px;
    opacity: 1;
    transform: none;
    transition: none;
}
.cap-sub.cap-sub-in { opacity: 1; transform: none; }

/* Stats pill - brutalism */
.cap-stats-row {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    padding: 12px 8px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    transform: none;
    transition: none;
    box-shadow: 3px 3px 0px #000000;
}
.cap-stats-row.cap-stats-in { opacity: 1; transform: none; }
.cap-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}
.cap-stat-num {
    font-family: 'Lexend Mega', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    color: #000000;
    background: none;
    -webkit-text-fill-color: unset;
    line-height: 1;
}
.cap-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #000000;
    margin-top: 3px;
}
.cap-stat-sub {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #e60023;
    margin-top: 2px;
}
/* Static stat (no count-up animation) */
.cap-stat-num.cap-stat-static {
    -webkit-text-fill-color: transparent;
}
.cap-stat-divider {
    width: 2px;
    height: 36px;
    background: #000000;
}

/* Right: photo stack */
.cap-hero-visual {
    position: relative;
    z-index: 1;
    height: 380px;
    transition: transform 0.12s ease-out;
    transform-style: preserve-3d;
}

/* Lens ring - hide for brutalism */
.cap-lens-ring {
    display: none;
}
.cap-lens-ring::before {
    display: none;
}
@keyframes lensRingPulse {
    0%,100% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.04); }
}

/* Polaroid photos - simplified */
.cap-photo {
    position: absolute;
    background: #ffffff;
    padding: 6px 6px 20px;
    border-radius: 0;
    border: 2px solid #000000;
    box-shadow: 4px 4px 0px #000000;
    opacity: 1;
    transition: none;
}
.cap-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}
.cap-photo-label {
    position: absolute;
    bottom: 3px;
    left: 0; right: 0;
    text-align: center;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #000000;
}
.cap-photo-1,
.cap-photo-2,
.cap-photo-3 {
    animation: none !important;
}
.cap-photo-1 {
    width: 200px; height: 220px;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.cap-photo-2 {
    width: 180px; height: 200px;
    top: 80px; left: 16%;
    transform: none;
    z-index: 2;
}
.cap-photo-3 {
    width: 170px; height: 190px;
    top: 110px; right: 4%;
    transform: none;
    z-index: 3;
}
@keyframes photoDrop1 {
    0%   { opacity:0; transform: translateX(-50%) rotate(-20deg) translateY(-60px) scale(0.7); }
    100% { opacity:1; transform: translateX(-50%) rotate(-6deg) translateY(0) scale(1); }
}
@keyframes photoDrop2 {
    0%   { opacity:0; transform: rotate(18deg) translateY(-60px) scale(0.7); }
    100% { opacity:1; transform: rotate(5deg) translateY(0) scale(1); }
}
@keyframes photoDrop3 {
    0%   { opacity:0; transform: rotate(-16deg) translateY(-60px) scale(0.7); }
    100% { opacity:1; transform: rotate(-3deg) translateY(0) scale(1); }
}
.cap-photo:hover {
    z-index: 10 !important;
    box-shadow: 6px 6px 0px #000000 !important;
    transform: translate(-2px, -2px) !important;
}

/* -- Responsive -- */
@media (max-width: 900px) {
    .cap-hero { grid-template-columns: 1fr; gap: 40px; }
    .cap-hero-visual { height: 280px; }
    .cap-photo-1 { width: 150px; height: 165px; }
    .cap-photo-2 { width: 136px; height: 152px; }
    .cap-photo-3 { width: 130px; height: 145px; }
    .cap-watermark { font-size: 18vw; top: -12px; }
}

/* Filter pills */
.cap-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}
/* Filter pills - brutalism */
.cap-pill {
    font-size: 12px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 0;
    border: 2px solid #000000;
    background: #ffffff;
    color: #000000;
    cursor: pointer;
    transition: none;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cap-pill:hover {
    border-color: #000000;
    color: #ffffff;
    background: #000000;
    transform: none;
}
.cap-pill.active {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
    box-shadow: 3px 3px 0px #000000;
}

/* Masonry grid - brutalism */
.cap-masonry {
    column-count: 3;
    column-gap: 20px;
    margin-bottom: 64px;
}
.cap-card {
    break-inside: avoid;
    margin-bottom: 20px;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    overflow: hidden;
    transition: none;
    box-shadow: 3px 3px 0px #000000;
}
.cap-card:hover {
    border-color: #000000;
    box-shadow: 6px 6px 0px #000000;
    transform: translate(-2px, -2px);
}
.cap-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Image - no transform on hover */
.cap-img-wrap {
    position: relative;
    overflow: hidden;
}
.cap-img {
    width: 100%;
    display: block;
    transition: none;
}

/* ================================================
   FLOATING COLOR SWITCHER WIDGET
   ================================================ */

.color-switcher-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    font-family: 'Space Grotesk', sans-serif;
}

.color-switcher-widget {
    background: #ffffff;
    border: 3px solid #000000;
    border-radius: 0;
    box-shadow: 8px 8px 0px #000000;
    padding: 0;
    min-width: 60px;
    transition: all 0.3s ease;
    max-height: 50px;
    overflow: hidden;
}

.color-switcher-container.active .color-switcher-widget {
    max-height: 200px;
}

.switcher-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 2px solid #000000;
    background: #000000;
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.switcher-title {
    display: none;
}

.switcher-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #ffffff;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.color-switcher-container.active .switcher-toggle {
    transform: rotate(180deg);
}

.switcher-toggle:hover {
    transform: scale(1.1);
}

.switcher-colors {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    background: #f5f5f5;
}

.color-btn {
    position: relative;
    width: 100%;
    height: 50px;
    border: 2px solid #000000;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: hidden;
}

.color-btn .color-label {
    position: relative;
    z-index: 2;
    mix-blend-mode: darken;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8);
    color: #000000;
    font-weight: 700;
    font-size: 10px;
}

.color-btn:hover {
    box-shadow: 3px 3px 0px #000000;
    transform: translate(-2px, -2px);
}

.color-btn:active {
    transform: translate(0, 0);
    box-shadow: 1px 1px 0px #000000;
}

.color-switcher-container.color-applied {
    animation: pulse-switcher 0.3s ease;
}

@keyframes pulse-switcher {
    0%, 100% {
        box-shadow: 8px 8px 0px #000000;
    }
    50% {
        box-shadow: 12px 12px 0px #000000;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .color-switcher-container {
        bottom: 20px;
        right: 10px;
    }

    .color-switcher-widget {
        box-shadow: 6px 6px 0px #000000;
        min-width: auto;
    }

    .switcher-header {
        padding: 12px 14px;
        font-size: 11px;
    }

    .switcher-toggle {
        padding: 6px;
        width: 32px;
        height: 32px;
    }

    .switcher-colors {
        padding: 12px;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
    }

    .color-btn {
        height: 50px;
        font-size: 10px;
        min-height: 44px;
        border: 2px solid #000000;
    }

    .color-btn .color-label {
        font-size: 9px;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .color-switcher-container {
        bottom: 15px;
        right: 8px;
    }

    .color-switcher-widget {
        box-shadow: 4px 4px 0px #000000;
    }

    .color-switcher-container.active .color-switcher-widget {
        max-height: 220px;
    }

    .switcher-header {
        padding: 10px 12px;
        font-size: 10px;
    }

    .switcher-toggle {
        padding: 5px;
        width: 28px;
        height: 28px;
    }

    .switcher-toggle svg {
        width: 20px;
        height: 20px;
    }

    .switcher-colors {
        padding: 10px;
        gap: 6px;
    }

    .color-btn {
        height: 48px;
        font-size: 9px;
        min-height: 44px;
        border: 2px solid #000000;
    }

    .color-btn .color-label {
        font-size: 8px;
        font-weight: 600;
    }

    .color-btn:hover {
        box-shadow: 2px 2px 0px #000000;
        transform: translate(-1px, -1px);
    }

    .color-btn:active {
        box-shadow: 0px 0px 0px #000000;
    }
}

/* Ultra small devices */
@media (max-width: 360px) {
    .color-switcher-container {
        bottom: 12px;
        right: 12px;
    }

    .color-switcher-widget {
        box-shadow: 3px 3px 0px #000000;
    }

    .switcher-header {
        padding: 8px 10px;
        font-size: 9px;
    }

    .switcher-colors {
        padding: 8px;
        gap: 5px;
    }

    .color-btn {
        height: 44px;
        font-size: 8px;
    }

    .color-btn .color-label {
        font-size: 7px;
    }
}
.cap-card:hover .cap-img { transform: none; }

/* Video placeholder - brutalism */
.cap-video-wrap {
    min-height: 200px;
}
.cap-video-thumb {
    min-height: 200px;
    background: #f5f5f5;
    background: linear-gradient(135deg, rgba(23, 105, 255,.12), rgba(16,185,129,.08));
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 2px solid #000000;
}
/* Tint overlay for video thumbs that have a real poster image */
.cap-video-thumb[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 0;
}
.cap-video-thumb[style*="background-image"] .cap-play-ring {
    position: relative;
    z-index: 1;
}
/* Tint overlay for video thumbs that have a real poster image */
.cap-video-thumb[style*="background-image"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.28);
    z-index: 0;
}
.cap-video-thumb[style*="background-image"] .cap-play-ring {
    position: relative;
    z-index: 1;
}
.cap-video-bg-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lexend Mega', sans-serif;
    font-size: 2.8rem;
    font-weight: 900;
    color: rgba(0, 0, 0,.1);
    text-align: center;
    line-height: 1.1;
    user-select: none;
    pointer-events: none;
    letter-spacing: -1px;
}
.cap-play-ring {
    width: 60px;
    height: 60px;
    border-radius: 0;
    background: #ffffff;
    border: 2px solid #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    box-shadow: 3px 3px 0px #000000;
    transition: none;
}
.cap-play-ring i { font-size: 22px; color: #000000; margin-left: 3px; font-weight: 700; }
.cap-card:hover .cap-play-ring { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px #000000; }
.cap-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    font-size: 10px;
    font-weight: 700;
    color: #000000;
    background: #ffffff;
    border-radius: 0;
    border: 1px solid #000000;
    padding: 3px 8px;
    letter-spacing: 0.5px;
    z-index: 1;
    text-transform: uppercase;
}

/* Hover overlay */
.cap-overlay {
    position: absolute;
    inset: 0;
    background: rgba(23, 105, 255,.75);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s;
}
.cap-card:hover .cap-overlay { opacity: 1; }
.cap-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #0d1b3e;
    font-weight: 700;
    font-size: 13px;
}
.cap-overlay-inner i { font-size: 28px; }

/* Card body */
.cap-card-body {
    padding: 14px 16px 16px;
}
.cap-card-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0 0 8px;
    line-height: 1.4;
}
.cap-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cap-tag {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 0;
    background: rgba(23, 105, 255,.08);
    border: 1px solid rgba(23, 105, 255,.2);
    color: var(--accent);
}
.cap-tag-video {
    background: rgba(56, 189, 248,.08);
    border-color: rgba(56, 189, 248,.25);
    color: #38bdf8;
}

/* Pinterest CTA */
.cap-pinterest-cta {
    text-align: center;
    position: relative;
    background: linear-gradient(135deg, rgba(23, 105, 255,.07), rgba(16,185,129,.04));
    border: 1px solid rgba(23, 105, 255,.22);
    border-radius: 0;
    padding: 60px 40px;
    overflow: hidden;
}
.cap-cta-orbit {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    pointer-events: none;
}
.cap-cta-ring {
    position: absolute;
    border-radius: 0;
    border: 1px dashed rgba(23, 105, 255,.22);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: orbitSpin 14s linear infinite;
}
.cap-cta-ring:nth-child(1) { width: 140px; height: 140px; animation-duration: 11s; }
.cap-cta-ring:nth-child(2) { width: 200px; height: 200px; animation-duration: 18s; animation-direction: reverse; }
.cap-cta-dot {
    position: absolute;
    width: 7px; height: 7px;
    border-radius: 0;
    background: var(--primary);
    box-shadow: 0 0 10px rgba(23, 105, 255,.4);
    top: -3.5px; left: 50%;
    transform: translateX(-50%);
}
.cap-cta-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.cap-cta-heading {
    font-family: 'Lexend Mega', sans-serif;
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    font-weight: 900;
    color: var(--text-main);
    line-height: 1.15;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}
.cap-cta-heading span {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cap-cta-sub {
    font-size: 14px;
    color: var(--text-muted);
    max-width: 440px;
    margin: 0 auto 28px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}
.cap-pinterest-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: #e60023;
    border: 1.5px solid #e60023;
    border-radius: 0;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
    position: relative;
    z-index: 1;
}
.cap-pinterest-btn:hover {
    background: #e60023;
    color: #fff;
    transform: none;
    box-shadow: none;
}
.cap-pinterest-btn i { font-size: 16px; }

/* Section label (replaces filter pills on Featured row) */
.cap-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(23, 105, 255,.08);
    border: 1px solid rgba(23, 105, 255,.22);
    border-radius: 0;
    padding: 6px 18px;
}

/* Pinterest board embed wrap */
.cap-board-wrap {
    margin-top: 72px;
    background: #ffffff;
    border: 1px solid #e8eeec;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.cap-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px 28px;
    border-bottom: 1px solid #f0f4f3;
}
.cap-board-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #e60023;
    margin-bottom: 5px;
}
.cap-board-eyebrow i { font-size: 14px; }
.cap-board-title {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 3px;
}
.cap-board-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}
.cap-board-embed-frame {
    position: relative;
    padding: 20px 28px 28px;
    min-height: 300px;
}
/* Pinterest pinit.js renders an iframe inside the <a> element */
.cap-board-embed-frame iframe,
.cap-board-embed-frame > a iframe {
    border-radius: 0;
    max-width: 100% !important;
}
.cap-board-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 244, 255, 0.6);
    border-radius: 0;
    z-index: 1;
    transition: opacity .4s;
}
.cap-board-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
}
.cap-board-loading-inner i {
    font-size: 36px;
    color: #e60023;
    animation: availPulse 2s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 992px) { .cap-masonry { column-count: 2; } }
@media (max-width: 540px) {
    .cap-masonry { column-count: 1; }
    .cap-stats-row { padding: 8px 4px; }
    .cap-stat { padding: 0 12px; }
    .cap-pinterest-cta { padding: 40px 20px; }
    .cap-cta-orbit { display: none; }
}

/* =============================================
   RESPONSIVE LINKEDIN CARD FOR MOBILE DEVICES
   ============================================= */

/* Mobile (576px to 768px) */
@media (max-width: 768px) {
    .linkedin-style-card {
        padding: 24px !important;
    }
    
    .linkedin-name {
        font-size: 24px !important;
    }
    
    .linkedin-headline {
        font-size: 15px !important;
    }
    
    .linkedin-location {
        font-size: 14px !important;
    }
}

/* Small Mobile (480px to 576px) */
@media (max-width: 576px) {
    .linkedin-style-card {
        padding: 20px !important;
    }
    
    .linkedin-name {
        font-size: 22px !important;
    }
    
    .linkedin-headline {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    
    .linkedin-location {
        font-size: 13px !important;
    }
}

/* Extra Small Mobile (< 480px) */
@media (max-width: 480px) {
    .linkedin-style-card {
        padding: 16px !important;
    }
    
    .linkedin-name {
        font-size: 20px !important;
    }
    
    .linkedin-headline {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    .linkedin-location {
        font-size: 12px !important;
    }
}

/* =============================================
   RESPONSIVE FOOTER FOR MOBILE DEVICES
   ============================================= */

/* Mobile (576px to 768px) */
@media (max-width: 768px) {
    .modern-footer {
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    .modern-logo--footer {
        font-size: clamp(36px, 7vw, 56px) !important;
        letter-spacing: clamp(1px, 0.5vw, 2px) !important;
        padding: 0 !important;
        margin: 0 auto !important;
        height: 0.7em !important;
        overflow-y: hidden !important;
        overflow-x: visible !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }
    .footer-content {
        padding: clamp(8px, 2vw, 16px) clamp(12px, 4vw, 20px) !important;
        text-align: center !important;
        overflow: visible !important;
    }
}

/* Small Mobile (480px to 576px) */
@media (max-width: 576px) {
    .modern-footer {
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    .modern-logo--footer {
        font-size: clamp(28px, 6vw, 44px) !important;
        letter-spacing: clamp(0.8px, 0.4vw, 1.5px) !important;
        padding: 0 !important;
        margin: 0 auto !important;
        height: 0.7em !important;
        overflow-y: hidden !important;
        overflow-x: visible !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }
    .footer-content {
        padding: clamp(8px, 2vw, 12px) clamp(10px, 3vw, 16px) !important;
        text-align: center !important;
        overflow: visible !important;
    }
}

/* Extra Small Mobile (< 480px) */
@media (max-width: 480px) {
    .modern-footer {
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    .modern-logo--footer {
        font-size: clamp(32px, 8vw, 64px) !important;
        letter-spacing: clamp(0.5px, 0.5vw, 1.5px) !important;
        padding: 0 !important;
        margin: 0 auto !important;
        height: 0.7em !important;
        overflow-y: hidden !important;
        overflow-x: visible !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }
    .footer-content {
        padding: 8px 12px !important;
        word-break: break-word;
        text-align: center !important;
        overflow: visible !important;
    }
}