/* =====================================================
   Salam Doghmash — Portfolio Stylesheet
   2026 design system: OKLCH color, container queries,
   scroll-driven animations, view transitions, :has()
   ===================================================== */

/* ---------- Design Tokens ---------- */
:root {
    /* Color (OKLCH — Soft-dark, easy on the eyes) */
    --bg-base:        oklch(20% 0.012 265);
    --bg-deep:        oklch(17% 0.014 265);
    --bg-elev-1:      oklch(23% 0.014 265);
    --bg-elev-2:      oklch(26% 0.016 265);
    --border-soft:    oklch(35% 0.018 265 / 0.45);
    --border-strong:  oklch(45% 0.025 265 / 0.55);
    --text-primary:   oklch(94% 0.008 250);
    --text-secondary: oklch(76% 0.014 250);
    --text-muted:     oklch(60% 0.014 258);

    /* Brand: softer cyan -> violet (lower chroma = less eye strain) */
    --accent-1:       oklch(78% 0.13 215);   /* soft cyan */
    --accent-2:       oklch(74% 0.16 295);   /* soft violet */
    --accent-3:       oklch(78% 0.14 340);   /* soft magenta */
    --accent-glow:    oklch(78% 0.13 215 / 0.28);

    /* Semantic */
    --success:        oklch(76% 0.12 160);
    --warning:        oklch(82% 0.12 80);

    /* Surfaces */
    --glass:          color-mix(in oklch, var(--bg-elev-1) 70%, transparent);
    --glass-strong:   color-mix(in oklch, var(--bg-elev-1) 88%, transparent);

    /* Type */
    --font-sans:      'Inter', 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display:   'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Fluid type scale */
    --fs-xs:    clamp(0.75rem, 0.7rem + 0.2vw, 0.8rem);
    --fs-sm:    clamp(0.85rem, 0.8rem + 0.25vw, 0.92rem);
    --fs-base:  clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
    --fs-lg:    clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
    --fs-xl:    clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
    --fs-2xl:   clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
    --fs-3xl:   clamp(2.4rem, 1.8rem + 2.5vw, 3.75rem);
    --fs-4xl:   clamp(3rem, 2rem + 4.5vw, 6rem);
    --fs-hero:  clamp(3.5rem, 2.4rem + 6vw, 8rem);

    /* Layout */
    --container:    min(94%, 1280px);
    --container-sm: min(94%, 800px);
    --radius-xs:    8px;
    --radius-sm:    14px;
    --radius-md:    20px;
    --radius-lg:    28px;
    --radius-xl:    36px;

    /* Motion */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-emph:    cubic-bezier(0.4, 0, 0, 1);
    --t-fast:       180ms;
    --t-med:        320ms;
    --t-slow:       560ms;

    /* Shadows (softer for soft-dark theme) */
    --shadow-sm:    0 1px 2px oklch(0% 0 0 / 0.25);
    --shadow-md:    0 4px 18px oklch(0% 0 0 / 0.22), 0 2px 4px oklch(0% 0 0 / 0.12);
    --shadow-lg:    0 14px 50px oklch(0% 0 0 / 0.28), 0 4px 14px oklch(0% 0 0 / 0.16);
    --shadow-glow:  0 0 0 1px oklch(78% 0.13 215 / 0.22), 0 8px 32px oklch(78% 0.13 215 / 0.14);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
*:focus-visible {
    outline: 2px solid var(--accent-1);
    outline-offset: 3px;
    border-radius: 4px;
}

html {
    scroll-behavior: smooth;
    scroll-padding-block-start: 100px;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

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

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    font-feature-settings: 'cv11', 'ss01', 'kern';
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--accent-1); color: var(--bg-deep); }

/* ---------- Background Layers ---------- */
.bg-aurora {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
.bg-aurora__blob {
    position: absolute;
    width: 55vmax;
    height: 55vmax;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.22;
    will-change: transform;
}
.bg-aurora__blob--1 {
    background: radial-gradient(circle, var(--accent-1) 0%, transparent 60%);
    top: -20vmax;
    inset-inline-start: -15vmax;
    animation: aurora-drift-1 22s var(--ease-out) infinite alternate;
}
.bg-aurora__blob--2 {
    background: radial-gradient(circle, var(--accent-2) 0%, transparent 60%);
    bottom: -25vmax;
    inset-inline-end: -15vmax;
    animation: aurora-drift-2 26s var(--ease-out) infinite alternate;
}
.bg-aurora__blob--3 {
    background: radial-gradient(circle, var(--accent-3) 0%, transparent 65%);
    top: 30%;
    inset-inline-start: 30%;
    width: 38vmax;
    height: 38vmax;
    opacity: 0.14;
    animation: aurora-drift-3 30s var(--ease-out) infinite alternate;
}

@keyframes aurora-drift-1 {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(8vw, 6vh, 0) scale(1.15); }
}
@keyframes aurora-drift-2 {
    from { transform: translate3d(0, 0, 0) scale(1.05); }
    to   { transform: translate3d(-6vw, -8vh, 0) scale(0.9); }
}
@keyframes aurora-drift-3 {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-10vw, 10vh, 0); }
}

.bg-grid {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(to right, oklch(80% 0.05 250 / 0.025) 1px, transparent 1px),
        linear-gradient(to bottom, oklch(80% 0.05 250 / 0.025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black 0%, transparent 80%);
}

.bg-noise {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.018;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Custom Cursor (desktop) ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
    .cursor {
        display: block;
        position: fixed;
        top: 0; left: 0;
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: difference;
    }
    .cursor__dot {
        position: fixed;
        width: 6px; height: 6px;
        background: white;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: transform 80ms linear, width var(--t-fast), height var(--t-fast);
    }
    .cursor__ring {
        position: fixed;
        width: 36px; height: 36px;
        border: 1.5px solid oklch(80% 0.05 250 / 0.6);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: transform 220ms var(--ease-out), width var(--t-med), height var(--t-med), border-color var(--t-fast);
    }
    body.cursor-hover .cursor__dot { transform: translate(-50%, -50%) scale(0); }
    body.cursor-hover .cursor__ring {
        width: 56px; height: 56px;
        border-color: var(--accent-1);
        background: oklch(75% 0.18 210 / 0.06);
    }
    * { cursor: none !important; }
}

/* ---------- Reading Progress Bar ---------- */
.progress-bar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    z-index: 100;
    transition: width 90ms linear;
    box-shadow: 0 0 12px var(--accent-glow);
}

/* ---------- Container ---------- */
.container {
    width: var(--container);
    margin-inline: auto;
}
.container--sm { width: var(--container-sm); margin-inline: auto; }

/* ---------- Header / Nav ---------- */
.site-header {
    position: sticky;
    inset-block-start: 16px;
    z-index: 50;
    margin-inline: auto;
    margin-block-start: 16px;
    width: var(--container);
    transition: margin-block-start var(--t-med) var(--ease-out);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 18px;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: var(--shadow-md);
}
body.scrolled .site-header { margin-block-start: 8px; }
body.scrolled .site-header__inner {
    background: var(--glass-strong);
    border-color: var(--border-strong);
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.brand__name span {
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.brand__role {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.brand--lg .brand__mark { width: 48px; height: 48px; }
.brand--lg .brand__name { font-size: 1.15rem; }
.brand--lg .brand__role { font-size: 0.78rem; }

.site-nav { flex: 1; display: flex; justify-content: center; }
.site-nav ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    border-radius: 999px;
    transition: color var(--t-fast), background var(--t-fast);
    position: relative;
}
.nav-link:hover { color: var(--text-primary); background: oklch(80% 0.05 250 / 0.06); }
.nav-link.is-active {
    color: var(--text-primary);
    background: oklch(80% 0.05 250 / 0.08);
}
.nav-link.is-active::before {
    content: '';
    position: absolute;
    inset-inline-start: 8px;
    inset-block-end: 4px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent-1);
    box-shadow: 0 0 8px var(--accent-1);
}

.site-header__actions { display: flex; align-items: center; gap: 8px; }

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    transition: all var(--t-fast);
}
.lang-switch:hover {
    color: var(--text-primary);
    border-color: var(--accent-1);
    background: oklch(75% 0.18 210 / 0.08);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: all var(--t-fast) var(--ease-out);
    text-decoration: none;
    background: transparent;
    color: var(--text-primary);
    white-space: nowrap;
    will-change: transform;
}
.btn--sm { padding: 8px 14px; font-size: 0.82rem; }
.btn--lg { padding: 14px 24px; font-size: 0.95rem; }
.btn--primary {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    color: oklch(15% 0.02 270);
    font-weight: 600;
    box-shadow: 0 4px 16px var(--accent-glow), inset 0 1px 0 oklch(100% 0 0 / 0.2);
}
.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--accent-glow), inset 0 1px 0 oklch(100% 0 0 / 0.3);
}
.btn--ghost {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.btn--ghost:hover {
    background: oklch(80% 0.05 250 / 0.06);
    border-color: var(--accent-1);
    transform: translateY(-2px);
}
.btn .icon { transition: transform var(--t-fast); }
.btn:hover .icon { transform: translateX(3px); }
[dir="rtl"] .btn:hover .icon { transform: translateX(-3px); }

.menu-toggle {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    place-items: center;
}
.menu-toggle .icon { width: 20px; height: 20px; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    inset-block-start: 100px;
    padding: 32px 24px;
    background: var(--glass-strong);
    backdrop-filter: blur(28px);
    z-index: 49;
}
.mobile-menu ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.mobile-menu .nav-link {
    display: block;
    padding: 16px 20px;
    font-size: 1.1rem;
    border-radius: var(--radius-md);
}
.mobile-menu__footer { margin-block-start: 32px; padding-block-start: 24px; border-block-start: 1px solid var(--border-soft); }
body.menu-open .mobile-menu { display: block; }
body.menu-open { overflow: hidden; }

/* Icon sizing */
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }

/* ---------- Section Wrapper ---------- */
.section {
    padding-block: clamp(80px, 10vw, 140px);
    position: relative;
}
.section__inner { width: var(--container); margin-inline: auto; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent-1);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-block-end: 20px;
}
.eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--accent-1);
}

.section__title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    color: var(--text-primary);
}
.section__title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section__lead {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    max-width: 60ch;
    margin: 0 0 56px;
}

/* ---------- HERO ---------- */
.hero {
    position: relative;
    min-block-size: 100svh;
    display: grid;
    align-items: center;
    padding-block: clamp(120px, 14vh, 160px) clamp(60px, 8vh, 100px);
    overflow: hidden;
}
.hero__inner {
    width: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 64px;
    align-items: center;
}
@media (max-width: 960px) {
    .hero__inner { grid-template-columns: 1fr; gap: 48px; }
}

.hero__greeting {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--glass);
    backdrop-filter: blur(8px);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-block-end: 24px;
    animation: fade-up 600ms var(--ease-out) both;
}
.hero__greeting::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 0 4px oklch(72% 0.16 160 / 0.2);
    animation: pulse 2s ease-in-out infinite;
}

.hero__name {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin: 0 0 24px;
    color: var(--text-primary);
    animation: fade-up 800ms var(--ease-out) both;
    animation-delay: 100ms;
}
.hero__name-gradient {
    display: inline-block;
    background: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-shift 8s ease-in-out infinite;
}

.hero__title {
    font-size: var(--fs-xl);
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0 0 24px;
    animation: fade-up 800ms var(--ease-out) both;
    animation-delay: 200ms;
}

.hero__tagline {
    font-size: var(--fs-base);
    color: var(--text-muted);
    max-width: 50ch;
    margin: 0 0 40px;
    animation: fade-up 800ms var(--ease-out) both;
    animation-delay: 300ms;
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    animation: fade-up 800ms var(--ease-out) both;
    animation-delay: 400ms;
}

.hero__visual {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    animation: fade-in 900ms var(--ease-out) both;
    animation-delay: 500ms;
}
.hero__orb {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, oklch(85% 0.13 215 / 0.32) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, oklch(74% 0.16 295 / 0.32) 0%, transparent 50%),
        conic-gradient(from 0deg, var(--accent-1), var(--accent-2), var(--accent-3), var(--accent-1));
    filter: blur(3px);
    opacity: 0.22;
    animation: rotate 32s linear infinite;
}
.hero__orb-inner {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 0%, oklch(100% 0 0 / 0.08) 0%, transparent 50%),
        var(--bg-elev-1);
    border: 1px solid var(--border-soft);
    backdrop-filter: blur(20px);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.hero__orb-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, oklch(80% 0.05 250 / 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, oklch(80% 0.05 250 / 0.06) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(circle, black 0%, transparent 70%);
}
.hero__orb-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 24px;
}
.hero__orb-mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-1);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-block-end: 12px;
}
.hero__orb-stat {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero__orb-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-block-start: 6px;
}

.hero__floating {
    position: absolute;
    background: var(--glass-strong);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    animation: float 6s ease-in-out infinite;
}
.hero__floating--1 {
    inset-block-start: 12%;
    inset-inline-end: -8%;
    animation-delay: 0s;
}
.hero__floating--2 {
    inset-block-end: 16%;
    inset-inline-start: -6%;
    animation-delay: -3s;
}
.hero__floating .icon { color: var(--accent-1); }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px oklch(72% 0.16 160 / 0.2); }
    50%      { box-shadow: 0 0 0 8px oklch(72% 0.16 160 / 0); }
}
@keyframes rotate {
    to { transform: rotate(360deg); }
}
@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero__scroll {
    position: absolute;
    inset-block-end: 32px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.hero__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--accent-1), transparent);
    background-size: 100% 200%;
    animation: scroll-line 2s ease-in-out infinite;
}
@keyframes scroll-line {
    from { background-position: 0% 200%; }
    to   { background-position: 0% 0%; }
}

/* Hero stats bento (below hero, optional) */
.hero__stats {
    margin-block-start: 56px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 720px) {
    .hero__stats { grid-template-columns: repeat(2, 1fr); }
}
.stat-card {
    padding: 20px 22px;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.stat-card:hover {
    border-color: var(--accent-1);
    transform: translateY(-2px);
}
.stat-card__num {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-block-end: 6px;
}
.stat-card__label { font-size: 0.85rem; color: var(--text-secondary); }

/* ---------- ABOUT ---------- */
.about__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 64px;
    align-items: start;
}
@media (max-width: 880px) {
    .about__grid { grid-template-columns: 1fr; gap: 40px; }
}
.about__copy p {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    margin-block: 0 24px;
    line-height: 1.7;
}
.about__copy p:first-child {
    color: var(--text-primary);
    font-size: var(--fs-xl);
    line-height: 1.5;
}

.about__highlights {
    display: grid;
    gap: 16px;
}
.highlight-card {
    padding: 24px;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
    transition: all var(--t-med) var(--ease-out);
    position: relative;
    overflow: hidden;
}
.highlight-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    opacity: 0;
    transition: opacity var(--t-fast);
    z-index: -1;
}
.highlight-card:hover {
    border-color: var(--accent-1);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.highlight-card__icon {
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, oklch(75% 0.18 210 / 0.15), oklch(70% 0.22 290 / 0.15));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    color: var(--accent-1);
    margin-block-end: 14px;
}
.highlight-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--text-primary);
}
.highlight-card__text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}

/* ---------- PUBLICATIONS ---------- */
.pubs { display: grid; gap: 24px; }
.pub-card {
    padding: 32px;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    transition: all var(--t-med) var(--ease-out);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: start;
}
@media (max-width: 720px) {
    .pub-card { grid-template-columns: 1fr; }
}
.pub-card:hover {
    border-color: var(--accent-1);
    background: var(--glass-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.pub-card__year {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent-1);
    padding: 6px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    align-self: start;
    white-space: nowrap;
}
.pub-card__type {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent-2);
    margin-block-end: 8px;
}
.pub-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0 0 12px;
}
.pub-card__venue {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 0 0 16px;
}
.pub-card__abstract {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}
.pub-card__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}
@media (max-width: 720px) {
    .pub-card__actions { flex-direction: row; align-items: stretch; }
}

/* ---------- PROJECTS — Bento grid ---------- */
.projects__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 40px;
}
.filter-chip {
    padding: 8px 16px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: var(--glass);
    color: var(--text-secondary);
    font-size: 0.85rem;
    backdrop-filter: blur(8px);
    transition: all var(--t-fast);
}
.filter-chip:hover { border-color: var(--accent-1); color: var(--text-primary); }
.filter-chip.is-active {
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    color: oklch(15% 0.02 270);
    font-weight: 600;
    border-color: transparent;
}

.projects__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
}
@media (max-width: 980px) { .projects__grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 600px) { .projects__grid { grid-template-columns: 1fr; gap: 16px; } }

.project-card {
    grid-column: span 6;
    position: relative;
    padding: 28px;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(14px);
    overflow: hidden;
    transition: all var(--t-med) var(--ease-out);
    display: flex;
    flex-direction: column;
    min-block-size: 280px;
}
.project-card--featured { grid-column: span 12; min-block-size: 340px; }
@media (max-width: 980px) {
    .project-card { grid-column: span 6; }
    .project-card--featured { grid-column: span 6; }
}
@media (max-width: 600px) { .project-card, .project-card--featured { grid-column: span 1; } }

.project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
            oklch(78% 0.13 215 / 0.08) 0%, transparent 40%);
    opacity: 0;
    transition: opacity var(--t-med);
    pointer-events: none;
}
.project-card:hover::before { opacity: 1; }
.project-card:hover {
    border-color: var(--accent-1);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.project-card__category {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-1);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-block-end: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.project-card__category::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--accent-1);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-1);
}
.project-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 14px;
}
.project-card--featured .project-card__title { font-size: var(--fs-2xl); }
.project-card__summary {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 24px;
    flex: 1;
}
.project-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: 20px;
}
.tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 4px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    color: var(--text-secondary);
    background: oklch(80% 0.05 250 / 0.04);
}
.project-card__footer {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.project-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-primary);
    padding: 8px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    transition: all var(--t-fast);
}
.project-card__link:hover {
    border-color: var(--accent-1);
    background: oklch(75% 0.18 210 / 0.08);
}
.project-card__link .icon { transition: transform var(--t-fast); }
.project-card__link:hover .icon { transform: translate(2px, -2px); }
.project-card__year {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Project hidden by filter */
.project-card.is-hidden { display: none; }

/* ---------- WEB PROJECTS — Gallery with browser frames ---------- */
.web-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
}
@media (max-width: 880px) { .web-grid { grid-template-columns: 1fr; } }

.web-card {
    grid-column: span 3;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(14px);
    overflow: hidden;
    transition: all var(--t-med) var(--ease-out);
    display: flex;
    flex-direction: column;
    position: relative;
}
.web-card--featured { grid-column: span 3; }
.web-card--featured:nth-of-type(1),
.web-card--featured:nth-of-type(2) { grid-column: span 3; }
@media (max-width: 880px) { .web-card, .web-card--featured { grid-column: span 1; } }

.web-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent 30%, oklch(78% 0.13 215 / 0.45), transparent 70%);
    -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: 0;
    transition: opacity var(--t-med);
    pointer-events: none;
}
.web-card--featured::before { opacity: 1; }

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

.web-card__visual {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-block-end: 1px solid var(--border-soft);
    background: var(--bg-deep);
    display: block;
    color: inherit;
    text-decoration: none;
}
.web-card__chrome {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    background: oklch(28% 0.014 265 / 0.65);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--border-soft);
    z-index: 2;
}
.web-card__chrome > span:not(.web-card__url) {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: oklch(45% 0.025 265);
}
.web-card__chrome > span:nth-child(1) { background: oklch(70% 0.16 30); }
.web-card__chrome > span:nth-child(2) { background: oklch(80% 0.14 80); }
.web-card__chrome > span:nth-child(3) { background: oklch(72% 0.14 145); }
.web-card__url {
    margin-inline-start: 14px;
    flex: 1;
    height: 18px;
    background: oklch(20% 0.012 265);
    border-radius: 4px;
    padding: 0 10px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    line-height: 18px;
    color: var(--text-muted);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* Full-page screenshot: the image is its natural (tall) size and we
   animate translateY on hover to scroll through the whole page. */
.web-card__shot {
    position: absolute;
    inset-block-start: 30px;
    inset-inline-start: 0;
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transform: translateY(0);
    transition: opacity 600ms var(--ease-out),
                transform var(--scroll-duration, 6s) linear;
    z-index: 1;
}
.web-card__shot.is-loaded { opacity: 1; }
.web-card__shot.is-failed { display: none; }

@media (hover: hover) and (pointer: fine) {
    .web-card:hover .web-card__shot.is-loaded {
        transform: translateY(var(--scroll-distance, 0));
    }
}
@media (prefers-reduced-motion: reduce) {
    .web-card__shot { transition: opacity 400ms ease; }
    .web-card:hover .web-card__shot { transform: none; }
}

/* Subtle "scroll" hint at the right edge while hovering */
.web-card__visual::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    height: 60px;
    background: linear-gradient(to top, var(--bg-deep), transparent);
    opacity: 0;
    transition: opacity var(--t-fast);
    pointer-events: none;
    z-index: 2;
}
.web-card:hover .web-card__visual::after { opacity: 0.4; }

.web-card__shot-fallback {
    position: absolute;
    inset: 30px 0 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 20% 20%, oklch(78% 0.13 215 / 0.18), transparent 55%),
        radial-gradient(circle at 80% 80%, oklch(74% 0.16 295 / 0.14), transparent 55%),
        var(--bg-elev-1);
    z-index: 0;
}

.web-card__live-dot {
    margin-inline-start: auto;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px oklch(76% 0.12 160 / 0.18);
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.web-card__hover-cta {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-end: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--glass-strong);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    font-size: 0.78rem;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--t-fast), transform var(--t-fast);
    pointer-events: none;
}
.web-card:hover .web-card__hover-cta {
    opacity: 1;
    transform: translateY(0);
}
.web-card__placeholder {
    position: absolute;
    inset: 30px 0 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    padding: 24px;
    background:
        radial-gradient(circle at 10% 20%, oklch(78% 0.13 215 / 0.12), transparent 50%),
        radial-gradient(circle at 90% 80%, oklch(74% 0.16 295 / 0.10), transparent 50%),
        var(--bg-elev-1);
}
.web-card__placeholder-glyph {
    align-self: center;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.04em;
}
.web-card__placeholder-bars {
    align-self: center;
    display: grid;
    gap: 10px;
}
.web-card__placeholder-bars span {
    height: 8px;
    background: oklch(55% 0.014 258 / 0.18);
    border-radius: 999px;
}
.web-card__placeholder-bars span:nth-child(1) { width: 90%; }
.web-card__placeholder-bars span:nth-child(2) { width: 70%; }
.web-card__placeholder-bars span:nth-child(3) { width: 80%; background: oklch(78% 0.13 215 / 0.25); }
.web-card__placeholder-bars span:nth-child(4) { width: 55%; }
.web-card__placeholder-bars span:nth-child(5) { width: 75%; }
.web-card__placeholder-bars span:nth-child(6) { width: 40%; background: oklch(74% 0.16 295 / 0.22); }

.web-card__body {
    padding: 22px 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.web-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-block-end: 4px;
    flex-wrap: wrap;
}
.web-card__kind {
    color: var(--accent-1);
    padding: 3px 9px;
    border: 1px solid oklch(78% 0.13 215 / 0.3);
    border-radius: 999px;
    background: oklch(78% 0.13 215 / 0.06);
}
.web-card__year { color: var(--text-muted); margin-inline-start: auto; }

.web-card__live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border: 1px solid oklch(76% 0.12 160 / 0.4);
    background: oklch(76% 0.12 160 / 0.08);
    border-radius: 999px;
    color: var(--success);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.62rem;
}
.web-card__live-badge .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse-soft 2s ease-in-out infinite;
}
@keyframes pulse-soft {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

.web-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-block-end: 4px;
}
.web-card__favicon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    background: var(--bg-elev-1);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    overflow: hidden;
    padding: 6px;
}
.web-card__favicon img { width: 100%; height: 100%; object-fit: contain; }
.web-card__head-text { flex: 1; min-width: 0; }
.web-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-primary);
    margin: 0;
}
.web-card--featured .web-card__title { font-size: var(--fs-xl); }
.web-card__client {
    font-size: 0.85rem;
    color: var(--accent-2);
    margin: 4px 0 0;
}
.web-card__summary {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 8px;
    flex: 1;
}
.web-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block: 4px 12px;
}
.web-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--border-soft);
}
.web-card__role {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.web-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--accent-1);
    transition: color var(--t-fast);
}
.web-card__link:hover { color: var(--text-primary); }
.web-card__link:hover .icon { transform: translate(2px, -2px); }
.web-card__link .icon { transition: transform var(--t-fast); }

/* ---------- EXPERIENCE — Timeline ---------- */
.timeline {
    position: relative;
    padding-inline-start: 32px;
}
.timeline::before {
    content: '';
    position: absolute;
    inset-inline-start: 8px;
    inset-block: 12px;
    width: 2px;
    background: linear-gradient(to bottom,
        transparent,
        var(--accent-1) 10%,
        var(--accent-2) 50%,
        var(--accent-3) 90%,
        transparent);
}
.timeline__item {
    position: relative;
    padding-block: 0 40px;
}
.timeline__item:last-child { padding-block-end: 0; }
.timeline__item::before {
    content: '';
    position: absolute;
    inset-inline-start: -32px;
    inset-block-start: 6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--bg-deep);
    border: 2px solid var(--accent-1);
    box-shadow: 0 0 0 3px oklch(78% 0.13 215 / 0.1), 0 0 8px oklch(78% 0.13 215 / 0.5);
    z-index: 1;
}
.timeline__item.is-current::before {
    background: var(--accent-1);
    animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px oklch(78% 0.13 215 / 0.1), 0 0 8px oklch(78% 0.13 215 / 0.5); }
    50%      { box-shadow: 0 0 0 7px oklch(78% 0.13 215 / 0.04), 0 0 14px oklch(78% 0.13 215 / 0.6); }
}
.timeline__date {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-block-end: 6px;
}
.timeline__date .badge-current {
    color: var(--accent-1);
    background: oklch(75% 0.18 210 / 0.12);
    padding: 2px 8px;
    border-radius: 999px;
    margin-inline-start: 8px;
    font-size: 0.7rem;
}
.timeline__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.timeline__company {
    font-size: 0.95rem;
    color: var(--accent-1);
    margin: 0 0 4px;
}
.timeline__location {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.timeline__desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ---------- EDUCATION ---------- */
.edu__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-block-end: 48px;
}
@media (max-width: 880px) { .edu__grid { grid-template-columns: 1fr; } }

.edu-card {
    padding: 28px;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    transition: all var(--t-med) var(--ease-out);
    position: relative;
    overflow: hidden;
}
.edu-card::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2), var(--accent-3));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med) var(--ease-out);
}
[dir="rtl"] .edu-card::after { transform-origin: right; }
.edu-card:hover { transform: translateY(-4px); border-color: var(--accent-1); box-shadow: var(--shadow-lg); }
.edu-card:hover::after { transform: scaleX(1); }

.edu-card__icon {
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, oklch(75% 0.18 210 / 0.15), oklch(70% 0.22 290 / 0.15));
    border-radius: var(--radius-sm);
    color: var(--accent-1);
    margin-block-end: 18px;
}
.edu-card__years {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent-1);
    margin-block-end: 8px;
}
.edu-card__degree {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.edu-card__field { font-size: 0.95rem; color: var(--text-secondary); margin: 0 0 4px; }
.edu-card__institution { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 14px; }
.edu-card__desc { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 12px; }
.edu-card__supervisor {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--accent-2);
    margin: 0;
}

.courses__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    margin: 0 0 24px;
}
.courses__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.course-item {
    padding: 16px 18px;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    transition: all var(--t-fast);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.course-item:hover { border-color: var(--accent-1); }
.course-item__name {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}
.course-item__meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* ---------- SKILLS ---------- */
.skills__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 880px) { .skills__grid { grid-template-columns: 1fr; } }

.skill-group {
    padding: 28px;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
    container-type: inline-size;
}
.skill-group__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.skill-group__title::before {
    content: '';
    width: 6px;
    height: 24px;
    border-radius: 3px;
    background: linear-gradient(to bottom, var(--accent-1), var(--accent-2));
}
.skill-list { display: grid; gap: 14px; }
.skill {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
}
.skill__name {
    font-size: 0.92rem;
    color: var(--text-primary);
}
.skill__pct {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.skill__bar {
    grid-column: 1 / -1;
    height: 4px;
    background: oklch(80% 0.05 250 / 0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.skill__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
    border-radius: 999px;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 1200ms var(--ease-out);
}
[dir="rtl"] .skill__fill { transform-origin: right; }
.skill.is-revealed .skill__fill { transform: scaleX(var(--p, 0.8)); }
.skill__fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.3), transparent);
    animation: shimmer 2.5s ease-in-out infinite;
}
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* Languages skill group with chips */
.lang-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lang-chip {
    padding: 10px 16px;
    background: linear-gradient(135deg, oklch(75% 0.18 210 / 0.1), oklch(70% 0.22 290 / 0.1));
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lang-chip__name { font-weight: 600; color: var(--text-primary); }
.lang-chip__level { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-1); }

/* ---------- CONTACT ---------- */
.contact {
    padding-block: clamp(80px, 12vw, 160px);
    position: relative;
}
.contact__card {
    width: var(--container);
    margin-inline: auto;
    padding: clamp(40px, 6vw, 80px);
    background:
        radial-gradient(circle at 0% 0%, oklch(75% 0.18 210 / 0.18), transparent 50%),
        radial-gradient(circle at 100% 100%, oklch(70% 0.22 290 / 0.18), transparent 50%),
        var(--glass-strong);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}
.contact__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, oklch(80% 0.05 250 / 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, oklch(80% 0.05 250 / 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    pointer-events: none;
}
.contact__inner { position: relative; z-index: 1; text-align: center; }
.contact__title {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
}
.contact__title em {
    font-style: normal;
    background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.contact__intro {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    max-width: 60ch;
    margin: 0 auto 40px;
    line-height: 1.65;
}
.contact__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-block-end: 40px;
}
.contact-method {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    transition: all var(--t-fast);
    color: var(--text-primary);
}
.contact-method:hover {
    border-color: var(--accent-1);
    background: oklch(75% 0.18 210 / 0.08);
    transform: translateY(-2px);
}
.contact-method__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.contact-method__value { font-size: 0.95rem; font-weight: 500; }

.contact__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.social-icon {
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    background: var(--glass);
    border: 1px solid var(--border-soft);
    border-radius: 50%;
    color: var(--text-secondary);
    transition: all var(--t-fast);
}
.social-icon:hover {
    color: var(--text-primary);
    border-color: var(--accent-1);
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

/* ---------- FOOTER ---------- */
.site-footer {
    padding-block: 80px 40px;
    border-block-start: 1px solid var(--border-soft);
    margin-block-start: 60px;
}
.site-footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-block-end: 48px;
}
@media (max-width: 720px) {
    .site-footer__top { grid-template-columns: 1fr; gap: 32px; }
}
.site-footer__intro {
    color: var(--text-secondary);
    margin-block-start: 16px;
    font-size: 0.92rem;
    max-width: 50ch;
}
.site-footer h4 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    margin: 0 0 16px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a {
    font-size: 0.92rem;
    color: var(--text-secondary);
    transition: color var(--t-fast);
}
.site-footer ul a:hover { color: var(--accent-1); }
.social-list a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.site-footer__bottom {
    padding-block-start: 32px;
    border-block-start: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.site-footer__bottom p { margin: 0; }

/* ---------- Reveal on Scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-revealed { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }

/* ---------- Mobile Adjustments ---------- */
@media (max-width: 880px) {
    .site-nav { display: none; }
    .menu-toggle { display: grid; }
    .site-header__actions .btn--primary { display: none; }
    .site-header__actions .lang-switch span { display: none; }
}

/* ---------- View Transitions API ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: var(--ease-out);
}

/* ---------- Scroll-driven progress (modern browsers) ---------- */
@supports (animation-timeline: scroll()) {
    .progress-bar {
        animation: progress-grow linear;
        animation-timeline: scroll(root);
        width: 100%;
        transform-origin: left;
        transform: scaleX(0);
    }
    [dir="rtl"] .progress-bar { transform-origin: right; }
    @keyframes progress-grow { to { transform: scaleX(1); } }
}

/* ---------- Print ---------- */
@media print {
    .bg-aurora, .bg-grid, .bg-noise, .cursor, .progress-bar, .site-header { display: none; }
    body { background: white; color: black; }
}