/* Layout: header, nav, grid, footer, utility classes */

header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background:
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
        radial-gradient(circle at 88% 70%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 75%),
        linear-gradient(135deg, color-mix(in srgb, var(--bg-soft) 88%, transparent), color-mix(in srgb, var(--bg) 94%, transparent));
    border-bottom: 1px solid color-mix(in srgb, var(--accent-2) 18%, var(--border));
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    box-shadow: 0 2px 12px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}

/* Mobile nav overlay */
#nav-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(145deg, rgba(0, 0, 0, .36), rgba(0, 0, 0, .28));
    /* no blur to avoid page content blurring */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    /* never intercept clicks now */
    transition: opacity .4s ease;
    z-index: 30;
    /* below sticky header (50) and nav panel */
}

#nav-overlay.show {
    opacity: .92;
}

body.nav-open {
    overflow: hidden;
}

:root.light header.site {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .78) 58%, rgba(255, 255, 255, .62) 100%),
        radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 68%),
        radial-gradient(circle at 16% 74%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 18px -9px rgba(0, 0, 0, .14), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

.brand__dot {
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 999px;
}

.nav__links {
    display: flex;
    gap: 1rem;
}

.nav__links a {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}

.nav__links a.active,
.nav__links a:hover {
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
    text-decoration: none;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent-2) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transform: translateY(-2px);
    color: var(--text);
}

.nav__links a:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px -4px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

@media (prefers-reduced-motion:reduce) {

    .nav__links a.active,
    .nav__links a:hover {
        transform: none;
    }
}

/* Enhanced nav link aesthetics */
.nav__links a {
    position: relative;
    overflow: hidden;
    transition: background .3s, color .3s, transform .3s;
}

.nav__links a::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 6px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
    border-radius: 2px;
}

.nav__links a:hover::after,
.nav__links a.active::after {
    transform: scaleX(1);
}

/* Mobile nav toggle (hidden desktop) */
.nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 0.55rem 0.7rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: 10px;
    cursor: pointer;
    color: var(--text);
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transition: background .4s, border-color .4s, box-shadow .4s, transform .35s;
    backdrop-filter: blur(4px) saturate(140%);
}

.nav__toggle:hover,
.nav__toggle:focus-visible {
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
    border-color: color-mix(in srgb, var(--accent-2) 40%, var(--accent) 30%);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    transform: translateY(-2px);
}

.nav__toggle:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px -3px rgba(0, 0, 0, .6);
}

.nav__toggle[aria-expanded="true"] {
    background: linear-gradient(145deg, var(--accent) 0%, var(--accent-2) 95%);
    border-color: color-mix(in srgb, var(--accent-2) 55%, var(--accent) 45%);
}

.nav__toggle .bar {
    display: block;
    width: 22px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    border-radius: 2px;
    transition: background .35s, transform .45s ease, opacity .35s;
}

.nav__toggle[aria-expanded="true"] .bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .bar:nth-child(2) {
    opacity: 0;
}

.nav__toggle[aria-expanded="true"] .bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.theme-toggle {
    --toggle-size: 40px;
    width: var(--toggle-size);
    height: var(--toggle-size);
    border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border));
    padding: 0;
    /* ensure square */
    border-radius: 12px;
    cursor: pointer;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-2) 14%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    transition: background .4s, border-color .4s, box-shadow .4s, transform .35s;
    backdrop-filter: blur(4px) saturate(150%);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-2) 26%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
    border-color: color-mix(in srgb, var(--accent) 45%, var(--accent-2) 35%);
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .6);
}

/* Theme icon visuals */
.theme-toggle .icon {
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    place-items: center;
    position: relative;
}

.theme-toggle .icon svg {
    width: 100%;
    height: 100%;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    fill: none;
    stroke: var(--accent);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 45%, transparent));
    transition: transform .65s cubic-bezier(.65, .05, .36, 1), stroke .4s, filter .55s;
}

.theme-toggle:hover .icon svg {
    stroke: var(--accent-2);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-2) 60%, transparent));
}

.theme-toggle .icon.swap svg {
    animation: iconSwap .65s ease;
}

@keyframes iconSwap {
    0% {
        transform: scale(.35) rotate(-140deg);
        opacity: 0;
    }

    55% {
        opacity: 1;
        transform: scale(1.15) rotate(12deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@media (prefers-reduced-motion:reduce) {
    .theme-toggle .icon svg {
        transition: stroke .4s, filter .5s;
    }

    .theme-toggle .icon.swap svg {
        animation: none;
    }
}

.hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    align-items: center;
    padding-top: 2rem;
}

.hero__cta {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.hero__meta {
    display: flex;
    gap: 0.85rem;
    /* tighter gap; pills carry their own padding */
    color: var(--muted);
    margin-top: 1rem;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin-left: 0;
    justify-content: flex-start;
}

/* Pill styling for CGPA & Location */
.hero__meta li {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem .48rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: .85rem;
    line-height: 1.1;
    color: var(--muted);
    backdrop-filter: blur(4px) saturate(140%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    transition: background .3s, border-color .3s, box-shadow .3s, transform .3s;
}

.hero__meta li strong {
    color: var(--accent);
    font-weight: 600;
}

.hero__meta li:nth-child(2) strong {
    color: var(--accent-2);
}

.hero__meta li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.hero__meta li:nth-child(2)::before {
    background: var(--accent-2);
}

.hero__meta li:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
    transform: translateY(-2px);
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .4);
}

.hero__meta li:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .45);
}

.hero__visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(180px, 38vw, 300px);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    border-radius: 50%;
    border: 3px solid #ffffff;
    /* dark theme border color */
    /* light theme variant overridden below */
    transition: border-color .4s ease;
    /* Create stacking context for pseudo elements */
    isolation: isolate;
}

/* Light theme specific avatar border */
.light .hero__visual {
    border-color: var(--accent);
}

/* Gradient ring using mask technique */
.hero__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    /* ring thickness */
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            var(--accent) 0deg,
            var(--accent-2) 110deg,
            var(--accent) 220deg,
            var(--accent-2) 330deg,
            var(--accent) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    /* hidden until hover */
    transform: scale(1);
    transition: opacity .45s ease;
    pointer-events: none;
}

/* Soft glow */
.hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 65%),
        radial-gradient(circle at 70% 75%, rgba(255, 255, 255, 0.08), transparent 70%);
    mix-blend-mode: overlay;
    opacity: 0;
    filter: blur(6px);
    transition: opacity .8s ease, filter 1s ease;
    pointer-events: none;
}

.hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    position: relative;
    z-index: 2;
    /* shadow removed per request */
    transition: filter .5s ease;
}

/* All motion removed */

.hero__visual:hover {
    border-color: transparent;
}

.hero__visual:hover::before {
    opacity: 1;
    animation: ringRotate 6s linear infinite, ringGlow 3.2s ease-in-out infinite;
}

.hero__visual:hover::after {
    opacity: .85;
}

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

@keyframes ringGlow {

    0%,
    100% {
        filter: brightness(1) saturate(1);
    }

    50% {
        filter: brightness(1.25) saturate(1.3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__visual:hover::before {
        animation: none;
    }
}

.grid {
    display: grid;
    gap: 1rem;
}

.grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

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

.grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

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

    .grid--3 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    /* Enlarge profile picture on small screens (~25% increase) */
    .hero__visual {
        width: clamp(225px, 48vw, 360px);
    }
}

/* Mobile nav behaviour */
@media (max-width: 780px) {
    .nav {
        position: relative;
        flex-wrap: wrap;
    }

    .nav__toggle {
        display: flex;
    }

    /* Reorder for mobile: brand left, theme toggle, then menu (rightmost) */
    .brand {
        order: 1;
    }

    /* Restore original ordering: brand | (auto space) theme toggle | hamburger */
    #theme-toggle {
        order: 2;
        margin-left: auto;
        margin-right: .6rem;
    }

    .nav__toggle {
        order: 3;
    }

    .nav>* {
        flex-shrink: 0;
    }

    /* Mobile nav panel (redesigned) */
    .nav__links {
        order: 4;
        width: 100%;
        background: linear-gradient(135deg, color-mix(in srgb, var(--bg-soft) 94%, var(--accent) 3%) 0%, color-mix(in srgb, var(--bg) 96%, var(--accent-2) 3%) 100%);
        backdrop-filter: blur(12px) saturate(160%);
        -webkit-backdrop-filter: blur(12px) saturate(160%);
        border: none;

        /* Perf fast: reduce heavy blurs & shadows */
        html.perf-fast header.site,
        html.perf-fast :root.light header.site,
        html.perf-fast :root.light footer.site,
        html.perf-fast footer.site {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
        }

        html.perf-fast .cta,
        html.perf-fast .nav__toggle,
        html.perf-fast .nav__links a,
        html.perf-fast .strength,
        html.perf-fast .card,
        html.perf-fast .project-sheet,
        html.perf-fast .contact-card {
            box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
        }

        html.perf-fast .ph-decor {
            filter: blur(30px) saturate(120%) !important;
            opacity: .4 !important;
        }

        box-shadow: 0 14px 44px -24px rgba(0, 0, 0, .6),
        0 0 0 1px rgba(255, 255, 255, .04) inset;
        border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border));
        flex-direction: column;
        gap: 0.25rem;
        overflow: hidden;
        height: 0;
        padding: 0 1rem;
        /* inner padding retained for horizontal */
        transition: height .5s cubic-bezier(.6, .2, .25, 1),
        opacity .5s ease,
        transform .55s cubic-bezier(.4, .8, .3, 1);
        position: relative;
        border-radius: 28px;
        margin-top: .85rem;
        isolation: isolate;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
    }

    /* When open, height gets set inline via JS for smooth slide; we only add vertical padding */
    .nav__links.open {
        padding: 0.75rem 1rem 0.9rem;
        border-bottom: none;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Light theme variant for mobile drawer */
    :root.light .nav__links {
        /* Add subtle accent washes + depth so panel isn't flat white */
        background:
            radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--accent) 22%, #ffffff 78%) 0%, transparent 68%),
            radial-gradient(circle at 82% 76%, color-mix(in srgb, var(--accent-2) 22%, #ffffff 78%) 0%, transparent 70%),
            linear-gradient(145deg,
                color-mix(in srgb, #ffffff 88%, var(--accent) 12%) 0%,
                color-mix(in srgb, #ffffff 91%, var(--accent-2) 9%) 55%,
                color-mix(in srgb, #ffffff 95%, var(--accent-2) 5%) 100%);
        border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--accent-2) 35%);
        box-shadow: 0 20px 56px -30px rgba(0, 0, 0, .24), 0 0 0 1px rgba(255, 255, 255, .55) inset;
    }

    /* Toned-down active/hover effect inside mobile drawer */
    .nav__links a.active,
    .nav__links a:hover {
        background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
        box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .05) inset;
        transform: translateY(-1px);
    }

    :root.light .nav__links a.active,
    :root.light .nav__links a:hover {
        background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 22%, #ffffff 78%), color-mix(in srgb, var(--accent-2) 22%, #ffffff 78%));
        box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .18), 0 0 0 1px rgba(255, 255, 255, .55) inset;
    }

    :root.light .nav__links.open {
        border-bottom: none;
    }

    /* Remove border for mobile nav in all themes */
    .nav__links {
        border: none;
    }

    .nav__links a {
        width: 100%;
        padding: 1.05rem 1.2rem 1.15rem;
        border-radius: 18px;
        font-size: 1.05rem;
        font-weight: 500;
        letter-spacing: .5px;
        position: relative;
        isolation: isolate;
    }

    .nav__links a+a {
        margin-top: .25rem;
    }

    /* Pill active state (mobile) */
    .nav__links a.active {
        background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 32%, var(--bg-soft) 68%), color-mix(in srgb, var(--accent-2) 36%, var(--bg-soft) 64%));
        box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--accent-2) 70%, transparent), 0 12px 30px -14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 0 2px color-mix(in srgb, var(--accent-2) 48%, var(--accent) 42%);
        color: var(--text);
    }

    .nav__links a.active::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        /* gradient ring */
        background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        /* Safari */
        mask-composite: exclude;
        pointer-events: none;
        opacity: .9;
    }

    /* Underline inside pill stays subtle */
    .nav__links a.active::after {
        bottom: 10px;
        height: 2px;
        border-radius: 2px;
    }

    /* Hover (non-active) subtle pill preview */
    .nav__links a:not(.active):hover {
        background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent));
        box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--accent-2) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, .05) inset;
        transform: translateY(-2px);
    }

    /* Light theme adjustments */
    :root.light .nav__links a.active {
        background: linear-gradient(140deg, color-mix(in srgb, #ffffff 84%, var(--accent) 16%), color-mix(in srgb, #ffffff 86%, var(--accent-2) 14%));
        box-shadow: 0 34px 74px -34px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .65) inset, 0 0 0 2px color-mix(in srgb, var(--accent-2) 48%, var(--accent) 42%);
        color: color-mix(in srgb, var(--text) 96%, #000);
    }

    :root.light .nav__links a:not(.active):hover {
        background: linear-gradient(130deg, color-mix(in srgb, var(--accent) 22%, #ffffff 78%), color-mix(in srgb, var(--accent-2) 22%, #ffffff 78%));
        box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .55) inset;
    }
}

footer.site {
    border-top: 1px solid var(--border);
    margin-top: 2rem;
    padding: 1.25rem 0;
    color: var(--muted);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-soft) 98%, transparent) 0%, color-mix(in srgb, var(--bg) 94%, transparent) 120%);
}

/* Light theme footer: add subtle elevated glass & gradient for separation */
:root.light footer.site {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .95) 92%),
        radial-gradient(circle at 84% 32%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 72%);
    border-top: 1px solid var(--border);
    box-shadow: 0 -3px 14px -8px rgba(0, 0, 0, .10), 0 0 0 1px rgba(255, 255, 255, .68) inset;
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    color: color-mix(in srgb, var(--text) 92%, #000);
}

:root.light footer.site a {
    color: var(--accent-2);
}

:root.light footer.site a:hover {
    text-decoration: underline;
}

.cta {
    position: relative;
    text-align: center;
    background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 11%, #000 89%), color-mix(in srgb, var(--accent-2) 12%, #000 88%)), radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 65%);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: clamp(18px, 1.8vw, 32px);
    padding: clamp(2.2rem, 5vw, 4.2rem) clamp(1.2rem, 4vw, 3.5rem);
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 18px 55px -20px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

/* Light theme variant: soften dark core, increase airy contrast */
:root.light .cta {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #ffffff 78%) 0%, color-mix(in srgb, var(--accent-2) 24%, #ffffff 76%) 100%),
        radial-gradient(circle at 34% 24%, color-mix(in srgb, var(--accent) 24%, transparent) 0%, transparent 58%);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .20), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

:root.light .cta::before {
    opacity: .25;
    filter: blur(46px);
    mix-blend-mode: color-dodge;
}

:root.light .cta::after {
    opacity: .35;
}

:root.light .cta h2 {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 70%);
    -webkit-background-clip: text;
    background-clip: text;
}

:root.light .cta p {
    color: color-mix(in srgb, var(--text) 78%, var(--accent-2) 10%);
}

:root.light .cta .btn {
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent-2) 55%, var(--accent) 45%) 100%);
    color: #fff;
    box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent-2) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

:root.light .cta .btn:hover,
:root.light .cta .btn:focus-visible {
    box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--accent-2) 65%, transparent), 0 0 0 1px rgba(255, 255, 255, .65) inset;
}

.cta::before,
.cta::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cta::before {
    background: conic-gradient(from 0deg at 80% 20%, var(--accent) 0deg, var(--accent-2) 110deg, var(--accent) 240deg, var(--accent-2) 360deg);
    mix-blend-mode: overlay;
    opacity: .18;
    filter: blur(40px);
}

.cta::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 45%), radial-gradient(circle at 78% 75%, rgba(255, 255, 255, .18), transparent 60%);
    mix-blend-mode: overlay;
    opacity: .25;
}

.cta h2 {
    margin: 0 0 1.1rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 65%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: .5px;
    position: relative;
}

.cta p {
    max-width: 68ch;
    margin: 0 auto 1.8rem;
    color: color-mix(in srgb, var(--text) 85%, var(--accent-2) 15%);
    font-size: clamp(.95rem, 1.05vw + .5rem, 1.25rem);
    line-height: 1.5;
    position: relative;
}

.cta .btn {
    min-width: 190px;
    padding: .95rem 1.75rem;
    font-size: 1.05rem;
    border-radius: 18px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent-2) 55%, var(--accent) 45%) 100%);
    box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent-2) 55%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
    transition: box-shadow .5s, transform .5s, background .6s;
}

.cta .btn:hover,
.cta .btn:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--accent-2) 65%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.09) inset;
}

.cta .btn:active {
    transform: translateY(-1px);
}

@keyframes ctaPulseBg {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.cta {
    background-size: 220% 220%;
    animation: ctaPulseBg 18s ease-in-out infinite;
}

/* ================= Redesigned Home Hero ================= */
.home-hero {
    position: relative;
    /* Increased bottom padding so next section can visually blend without a hard band */
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.2rem, 5vw, 3.8rem);
    margin-bottom: 0;
    /* eliminate gap that produced a pale band */
}

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 65%), radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--accent-2) 22%, transparent) 0%, transparent 70%), linear-gradient(140deg, color-mix(in srgb, var(--bg) 94%, transparent), color-mix(in srgb, var(--bg-soft) 90%, transparent));
    opacity: .85;
    /* Fade the overlay toward the bottom to avoid a hard edge before strengths section */
    -webkit-mask: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, .85) 82%, rgba(0, 0, 0, .55) 88%, rgba(0, 0, 0, 0) 100%);
    mask: linear-gradient(to bottom, #000 72%, rgba(0, 0, 0, .85) 82%, rgba(0, 0, 0, .55) 88%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* Subtle bridge gradient to blend into the following strengths section */
.home-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: clamp(70px, 11vw, 120px);
    background: linear-gradient(to bottom,
            color-mix(in srgb, var(--bg-soft) 85%, transparent) 0%,
            color-mix(in srgb, var(--bg-soft) 78%, transparent) 35%,
            color-mix(in srgb, var(--bg-soft) 60%, transparent) 60%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    opacity: .85;
}

:root.light .home-hero::after {
    background: linear-gradient(to bottom,
            color-mix(in srgb, #ffffff 92%, var(--accent) 8%) 0%,
            color-mix(in srgb, #ffffff 94%, var(--accent-2) 6%) 40%,
            color-mix(in srgb, #ffffff 96%, var(--accent-2) 4%) 60%,
            rgba(255, 255, 255, 0) 100%);
    opacity: .9;
}

.home-hero__inner {
    display: grid;
    gap: clamp(2.4rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr) min(378px, 34%);
    align-items: center;
}

.hh-text {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    position: relative;
    z-index: 1;
}

.hh-pre {
    font-size: .7rem;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    font-weight: 600;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hh-heading {
    margin: 0;
    font-size: clamp(2.2rem, 3.2vw + 1rem, 3.75rem);
    line-height: 1.1;
    letter-spacing: .4px;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hh-heading .hh-gradient {
    background: linear-gradient(120deg, var(--accent-2), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hh-lead {
    font-size: clamp(1.02rem, .9vw + .8rem, 1.3rem);
    line-height: 1.55;
    max-width: 62ch;
    color: color-mix(in srgb, var(--text) 90%, white);
    margin: 0;
}

.hh-lead {
    position: relative;
    overflow: visible;
    color: color-mix(in srgb, var(--text) 94%, #000);
    background: none !important;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: currentColor;
}

.hh-lead:hover {
    filter: brightness(1.05);
}

/* Underline grow */
.hh-lead::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
    border-radius: 2px;
    transition: width .85s cubic-bezier(.65, .05, .36, 1);
    opacity: .9;
}

.hh-lead:hover {
    background-position: 100% 0;
    filter: brightness(1.08) saturate(115%);
}

.hh-lead:hover::after {
    width: 100%;
}

@media (prefers-reduced-motion:reduce) {
    .hh-lead {
        background-position: 0 !important;
        transition: none;
    }

    .hh-lead::after {
        display: none;
    }
}

:root.light .hh-lead {
    background: linear-gradient(110deg, var(--text) 0%, var(--text) 42%, color-mix(in srgb, var(--accent-2) 55%, var(--accent)) 50%, var(--text) 58%, var(--text) 100%);
}

.hh-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.hh-meta {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hh-meta li {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .65rem .85rem .7rem;
    min-width: 110px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 24%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 55%, var(--border));
    border-radius: 18px;
    font-size: .7rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset;
}

.hh-meta li::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), transparent 60%);
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity .6s;
}

.hh-meta li:hover::after {
    opacity: .95;
}

.hh-meta__value {
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hh-meta__label {
    opacity: .85;
    color: color-mix(in srgb, var(--text) 75%, var(--accent-2) 25%);
}

.hh-social {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}

.hh-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 16px;
    position: relative;
    isolation: isolate;
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 32%, rgba(0, 0, 0, .6)), color-mix(in srgb, var(--accent-2) 34%, rgba(0, 0, 0, .6)));
    border: 1px solid color-mix(in srgb, var(--accent-2) 60%, var(--accent) 40%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08) inset;
    backdrop-filter: blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    overflow: hidden;
    transition: transform .5s cubic-bezier(.25, .8, .25, 1), box-shadow .6s, background .65s, filter .6s;
}

.hh-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .28), transparent 60%), linear-gradient(120deg, rgba(255, 255, 255, .15), transparent 55%);
    mix-blend-mode: overlay;
    opacity: .55;
    transition: opacity .6s;
    pointer-events: none;
}

.hh-icon svg {
    width: 60%;
    height: 60%;
    display: block;
}

.hh-icon:hover,
.hh-icon:focus-visible {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .1) inset;
}

.hh-icon:hover::before,
.hh-icon:focus-visible::before {
    opacity: .95;
}

:root.light .hh-icon {
    background: linear-gradient(150deg, color-mix(in srgb, #ffffff 78%, var(--accent) 22%), color-mix(in srgb, #ffffff 75%, var(--accent-2) 25%));
    color: color-mix(in srgb, var(--text) 95%, #000);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

:root.light .hh-icon::before {
    opacity: .4;
}

:root.light .hh-icon:hover::before {
    opacity: .85;
}

.hh-visual {
    position: relative;
}

.hh-visual__frame {
    position: relative;
    border-radius: 38px;
    padding: 8px;
    background: linear-gradient(130deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent-2) 30%, transparent));
    box-shadow: 0 18px 54px -24px rgba(0, 0, 0, .68), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    overflow: hidden;
    isolation: isolate;
    max-width: 100%;
}

@media (min-width: 981px) {
    .hh-visual__frame {
        transform: translateY(-8%);
    }
}

.hh-visual__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: .85;
    pointer-events: none;
}

.hh-visual__frame img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 28px;
    filter: brightness(.94) saturate(118%);
    transition: transform .9s cubic-bezier(.25, .8, .25, 1), filter .85s ease;
}

.hh-visual__frame:hover img {
    transform: scale(1.05);
    filter: brightness(1) saturate(130%);
}

@media (max-width: 980px) {
    .home-hero__inner {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 6vw, 3.2rem);
    }

    .hh-visual {
        order: -1;
        max-width: 340px;
        margin: 0 auto;
    }

    .hh-visual__frame {
        padding: 6px;
        border-radius: 34px;
    }

    .hh-text {
        text-align: center;
        align-items: center;
    }

    .hh-cta {
        justify-content: center;
        flex-wrap: wrap;
        gap: .85rem;
    }

    .hh-meta {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hh-social {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .hh-visual {
        max-width: 300px;
    }

    .home-hero__inner {
        gap: clamp(1.8rem, 8vw, 2.6rem);
    }
}

@media (max-width: 560px) {
    .hh-heading {
        font-size: clamp(2rem, 8vw, 2.6rem);
    }

    .hh-cta .btn {
        flex: 1 1 auto;
        min-width: 140px;
    }
}

/* Light theme adjustments */
/* Removed light theme solid color override to preserve gradient clipping */
:root.light .hh-meta li {
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

/* ================= Highlights Redesign ================= */
.home-highlights {
    position: relative;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bg-soft) 90%, transparent), color-mix(in srgb, var(--bg) 94%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 18%, var(--border));
    border-radius: clamp(22px, 2vw, 34px);
    padding: clamp(2.2rem, 4.5vw, 3.2rem) clamp(1rem, 3vw, 2rem) clamp(2.4rem, 5vw, 3.4rem);
    box-shadow: 0 18px 52px -22px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04) inset;
    overflow: hidden;
    isolation: isolate;
}

.home-highlights::before,
.home-highlights::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-highlights::before {
    background: radial-gradient(circle at 18% 25%, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 65%), radial-gradient(circle at 82% 75%, color-mix(in srgb, var(--accent-2) 26%, transparent) 0%, transparent 68%);
    opacity: .6;
    mix-blend-mode: overlay;
}

.home-highlights::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%);
    opacity: .4;
    mix-blend-mode: overlay;
}

.home-highlights .section__header h2 {
    margin-top: 0;
}

:root.light .home-highlights {
    background: linear-gradient(140deg, color-mix(in srgb, #ffffff 92%, var(--accent) 8%), color-mix(in srgb, #ffffff 94%, var(--accent-2) 10%));
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    box-shadow: 0 18px 48px -20px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

:root.light .home-highlights::before {
    opacity: .45;
}

.feature-grid {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.feature-card {
    position: relative;
    padding: 1.05rem 1.1rem 1.25rem;
    border-radius: 24px;
    background: linear-gradient(155deg, color-mix(in srgb, var(--card) 85%, transparent), color-mix(in srgb, var(--bg-soft) 92%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 22%, var(--border));
    box-shadow: 0 12px 34px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    overflow: hidden;
    isolation: isolate;
    transition: transform .6s cubic-bezier(.25, .8, .25, 1), box-shadow .65s, border-color .5s, background .6s;
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 70%), radial-gradient(circle at 78% 78%, color-mix(in srgb, var(--accent-2) 30%, transparent) 0%, transparent 72%), linear-gradient(150deg, rgba(255, 255, 255, .06), transparent 60%);
    opacity: .38;
    mix-blend-mode: overlay;
    pointer-events: none;
    transition: opacity .7s;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 56px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}

.feature-card:hover::before {
    opacity: .62;
}

.fc-icon {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--accent-2) 65%, transparent), 0 0 0 1px rgba(255, 255, 255, .14) inset;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}

.fc-icon svg {
    width: 60%;
    height: 60%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.feature-card:hover .fc-icon svg {
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45));
}

.fc-title {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: .5px;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fc-text {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--text) 90%, white);
}

:root.light .feature-card {
    background: linear-gradient(155deg, color-mix(in srgb, #ffffff 90%, var(--accent) 10%), color-mix(in srgb, #ffffff 92%, var(--accent-2) 12%));
    box-shadow: 0 14px 40px -22px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .55) inset;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}

/* ===== New Core Strengths Section ===== */
.home-strengths {
    position: relative;
    /* Remove previous margin to allow hero bridge gradient to blend smoothly */
    margin-top: 0;
}

/* Light theme: give Core Strengths a subtle panel so cards don't float on a mismatched band */
:root.light .home-strengths {
    background: linear-gradient(145deg,
            color-mix(in srgb, #ffffff 96%, var(--accent) 4%) 0%,
            color-mix(in srgb, #ffffff 98%, var(--accent-2) 2%) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: clamp(28px, 2.2vw, 42px);
    padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 3vw, 1.8rem) clamp(2rem, 4vw, 2.8rem);
    box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .25), 0 2px 6px -2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(255, 255, 255, .6) inset;
    overflow: hidden;
}

:root.light .home-strengths::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 78% 78%, color-mix(in srgb, var(--accent-2) 16%, transparent) 0%, transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 55%);
    mix-blend-mode: overlay;
    opacity: .55;
    pointer-events: none;
}

/* Reset grid spacing when wrapped with inner padding */
:root.light .home-strengths .strengths-grid {
    margin-top: .4rem;
}

.strengths-grid {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.strength {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.1rem 1.15rem 1.25rem 1.15rem;
    border-radius: 26px;
    background: linear-gradient(155deg,
            color-mix(in srgb, var(--card) 86%, transparent) 0%,
            color-mix(in srgb, var(--bg-soft) 90%, transparent) 55%,
            color-mix(in srgb, var(--bg-soft) 94%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--accent-2) 25%, var(--border));
    box-shadow: 0 14px 40px -24px rgba(0, 0, 0, .66), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    overflow: hidden;
    isolation: isolate;
    background-size: 180% 180%;
    transition: transform .7s cubic-bezier(.25, .8, .25, 1), box-shadow .75s, border-color .55s, background .9s ease, background-position 1.4s ease;
}

.strength::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 22%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 65%), radial-gradient(circle at 80% 78%, color-mix(in srgb, var(--accent-2) 30%, transparent) 0%, transparent 70%), linear-gradient(140deg, rgba(255, 255, 255, .06), transparent 60%);
    mix-blend-mode: overlay;
    opacity: .4;
    transition: opacity .7s;
    pointer-events: none;
}

/* Gradient border glow layer */
.strength::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    /* creates the stroke */
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    opacity: 0;
    pointer-events: none;
    transition: opacity .7s;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.strength:hover {
    /* Removed vertical lift to avoid overlapping previous (hero) section */
    transform: none;
    box-shadow: 0 14px 44px -24px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .07) inset;
    background-position: 53% 47%;
}

.strength:hover::before {
    opacity: .62;
}

.strength:hover::after {
    opacity: .55;
}

/* Icon slight lift for added depth */
.strength:hover .strength__icon {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .strength,
    .strength:hover {
        transform: none !important;
        background-position: 50% 50% !important;
    }

    .strength:hover .strength__icon {
        transform: none !important;
    }
}

.strength__icon {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    position: relative;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, var(--accent), var(--accent-2));
    box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--accent-2) 70%, transparent), 0 0 0 1px rgba(255, 255, 255, .14) inset;
    overflow: hidden;
}

.strength__flare {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .32), transparent 60%);
    mix-blend-mode: overlay;
    opacity: .7;
    transition: opacity .7s;
}

.strength:hover .strength__flare {
    opacity: .95;
}

.strength__icon svg {
    width: 60%;
    height: 60%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

.strength__title {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: .5px;
    background: linear-gradient(120deg, var(--accent), var(--accent-2) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.strength__desc {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--text) 90%, white);
}

.strength__points {
    list-style: none;
    margin: .25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: .75rem;
    letter-spacing: .4px;
}

.strength__points li {
    position: relative;
    padding-left: 1rem;
    color: color-mix(in srgb, var(--text) 78%, white);
}

.strength__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .05);
}

/* Light theme refinement for strengths */
:root.light .strength {
    background: linear-gradient(160deg,
            color-mix(in srgb, #ffffff 94%, var(--accent) 6%) 0%,
            color-mix(in srgb, #ffffff 97%, var(--accent-2) 3%) 55%,
            color-mix(in srgb, #ffffff 99%, var(--accent-2) 1%) 100%);
    box-shadow: 0 14px 38px -24px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .55) inset;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
}

:root.light .strength::before {
    opacity: .45;
    background:
        radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 60%),
        radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--accent-2) 20%, transparent) 0%, transparent 62%),
        linear-gradient(150deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
}

/* Light: soften icon backgrounds for better cohesion */
:root.light .strength__icon {
    background: linear-gradient(145deg,
            color-mix(in srgb, var(--accent) 75%, #ffffff 25%),
            color-mix(in srgb, var(--accent-2) 70%, #ffffff 30%));
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .6) inset;
}

:root.light .strength__desc {
    color: color-mix(in srgb, var(--text) 85%, #000);
}

:root.light .strength__points li {
    color: color-mix(in srgb, var(--text) 74%, #000);
}

/* ================= Stack Snapshot ================= */
.home-stack {
    position: relative;
}

.stack-cloud {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.stack-cloud li {
    font-size: .75rem;
    letter-spacing: .6px;
    font-weight: 500;
    padding: .55rem .85rem;
    border-radius: 999px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent-2) 22%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-2) 55%, var(--border));
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    transition: transform .45s cubic-bezier(.25, .8, .25, 1), box-shadow .5s, background .6s;
}

.stack-cloud li::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .25), transparent 60%);
    opacity: 0;
    transition: opacity .55s;
}

.stack-cloud li:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .07) inset;
}

.stack-cloud li:hover::after {
    opacity: .95;
}

:root.light .stack-cloud li {
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

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

    .cta .btn {
        transition: background .5s, box-shadow .5s;
    }

    .cta .btn:hover {
        transform: none;
    }
}

/* Utilities */
.accent {
    color: var(--accent);
}

.btn {
    display: inline-block;
    border: 1px solid var(--border);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-weight: 600;
}

.btn--primary {
    background: var(--accent);
    color: white;
    border-color: transparent;
}

.btn--ghost {
    background: transparent;
    color: var(--text);
}

/* Modern Contact button variant */
.btn--contact {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.25rem .85rem;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .4px;
    border-radius: 16px;
    background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 55%, rgba(0, 0, 0, .4)) 0%, color-mix(in srgb, var(--accent-2) 65%, rgba(0, 0, 0, .55)) 100%);
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--accent-2) 55%, var(--accent) 45%);
    box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08) inset;
    overflow: hidden;
    isolation: isolate;
    transition: transform .55s cubic-bezier(.25, .8, .25, 1), box-shadow .6s, background .65s, border-color .5s;
    text-decoration: none;
}

.btn--contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 28% 30%, rgba(255, 255, 255, .25), transparent 60%), linear-gradient(120deg, rgba(255, 255, 255, .18), transparent 55%);
    mix-blend-mode: overlay;
    opacity: .55;
    transition: opacity .6s;
    pointer-events: none;
}

.btn--contact::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    opacity: .9;
    transform: translateY(-6px);
    filter: blur(6px);
    transition: transform .65s cubic-bezier(.25, .8, .25, 1), opacity .6s;
    border-radius: 2px;
}

.btn--contact:hover,
.btn--contact:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .12) inset;
}

.btn--contact:hover::before,
.btn--contact:focus-visible::before {
    opacity: .95;
}

.btn--contact:hover::after,
.btn--contact:focus-visible::after {
    transform: translateY(0);
    opacity: 1;
}

.btn--contact:active {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion:reduce) {
    .btn--contact {
        transition: background .6s, box-shadow .6s;
    }

    .btn--contact:hover,
    .btn--contact:focus-visible {
        transform: none;
    }

    .btn--contact::after {
        display: none;
    }
}

:root.light .btn--contact {
    background: linear-gradient(140deg, color-mix(in srgb, #ffffff 72%, var(--accent) 28%) 0%, color-mix(in srgb, #ffffff 70%, var(--accent-2) 30%) 100%);
    color: color-mix(in srgb, var(--text) 90%, #000);
    border-color: color-mix(in srgb, var(--accent-2) 50%, var(--accent) 35%);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .28), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

:root.light .btn--contact::before {
    opacity: .4;
}

:root.light .btn--contact:hover::before {
    opacity: .85;
}

:root.light .btn--contact {
    backdrop-filter: blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
}

.link {
    color: var(--muted);
}

.chip,
.chips li {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    margin: 0.25rem;
    cursor: default;
}

.chip[data-filter] {
    cursor: pointer;
}

.chip[data-filter]:hover {
    background: var(--border);
    color: var(--text);
    transform: translateY(-2px);
}

.success {
    color: var(--accent);
}

.error {
    color: var(--error);
}

@keyframes navSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}