/* =========================================================
PORTFOLIO STYLESHEET

Remon Awad — React Front-End Developer

Visual Direction:
Dark / Futuristic / Minimal / Professional

Signature typography ("Digital Atelier") is defined in
section 22 near the end of this file.

Light Mode refinements live in section 24 (plus the palette
in section 2). Extra responsive fixes (tablet / mobile / touch)
live in section 25. Section 23 must stay the very last block.
========================================================= */

/* Bodoni Moda (Didone) — used for the name and all headings.
   @import must stay the very first rule in the file. */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,500..800;1,6..96,500..900&display=swap");


/* =========================================================
1. ROOT VARIABLES — DARK DEFAULT
========================================================= */

:root {

    color-scheme: dark;

    --color-background: #06070b;
    --color-background-soft: #090b12;
    --color-surface: #0d1018;
    --color-surface-soft: #111522;
    --color-surface-hover: #151a29;

    --color-primary: #2b62f6;
    --color-primary-dark: #1e4ed8;
    --color-primary-bright: #3b72ff;
    --color-primary-soft: rgba(43, 98, 246, 0.12);

    --color-purple: #8a2be2;
    --color-purple-soft: rgba(138, 43, 226, 0.12);

    --color-accent: #f4c95d;
    --color-accent-soft: rgba(244, 201, 93, 0.12);

    --color-success: #34d399;

    --color-text: #f5f7fb;
    --color-text-light: #9aa3b5;
    --color-text-muted: #687184;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.13);

    --color-white: #ffffff;
    --color-black: #000000;

    --color-header: rgba(6, 7, 11, 0.72);
    --color-mobile-nav: rgba(13, 16, 24, 0.96);

    --color-card: rgba(255, 255, 255, 0.015);
    --color-card-soft: rgba(255, 255, 255, 0.025);
    --color-card-hover: rgba(255, 255, 255, 0.035);
    --color-card-solid: rgba(13, 16, 24, 0.92);

    --color-button-secondary: rgba(255, 255, 255, 0.02);
    --color-button-secondary-hover: rgba(255, 255, 255, 0.05);

    /* Small uppercase labels / badges (needs a darker blue in light mode) */
    --color-label: #3b72ff;

    /* Backdrop behind images / logos (education panel, project previews) */
    --color-media-bg: #080b13;
    --dot-color: rgba(255, 255, 255, 0.06);

    --font-body: "Plus Jakarta Sans", sans-serif;
    --font-display: "Plus Jakarta Sans", sans-serif;

    --text-xs: 0.72rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 3rem;
    --text-5xl: 4rem;

    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 7rem;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
    --shadow-md: 0 18px 45px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.38);
    --shadow-blue: 0 0 45px rgba(43, 98, 246, 0.16);
    --shadow-purple: 0 0 45px rgba(138, 43, 226, 0.14);

    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    --dot-grid-target: 0.55;
}

/* Native scrollbars / form controls follow the active theme */
html:has(body:not(.dark-mode)) {
    color-scheme: light;
}


/* =========================================================
2. LIGHT MODE

Warm "paper" palette: cream page, white elevated cards,
deeper brand colours so text keeps WCAG AA contrast.
========================================================= */

body:not(.dark-mode) {

    --color-background: #ece8de;
    --color-background-soft: #e3ded2;
    --color-surface: #f2eee5;
    --color-surface-soft: #e9e4d9;
    --color-surface-hover: #ded9cc;

    --color-primary: #2a56d6;
    --color-primary-dark: #1f43b0;
    --color-primary-bright: #3a68e4;
    --color-primary-soft: rgba(42, 86, 214, 0.10);

    --color-purple: #7048c4;
    --color-purple-soft: rgba(112, 72, 196, 0.10);

    --color-accent: #805a04;
    --color-accent-soft: rgba(128, 90, 4, 0.12);

    --color-success: #0c6e4d;

    --color-text: #1b2230;
    --color-text-light: #474e5e;
    --color-text-muted: #565d6a;

    --color-border: rgba(40, 32, 15, 0.11);
    --color-border-strong: rgba(40, 32, 15, 0.19);

    --color-header: rgba(240, 236, 227, 0.82);
    --color-mobile-nav: rgba(240, 236, 227, 0.98);

    --color-card: rgba(252, 250, 244, 0.62);
    --color-card-soft: rgba(252, 250, 244, 0.85);
    --color-card-hover: rgba(255, 253, 249, 0.96);
    --color-card-solid: #f8f5ee;

    --color-button-secondary: rgba(40, 32, 15, 0.035);
    --color-button-secondary-hover: rgba(40, 32, 15, 0.07);

    --color-label: #2447b5;

    --color-media-bg: #dfe5f3;
    --dot-color: rgba(27, 34, 48, 0.09);

    --shadow-sm: 0 6px 20px rgba(60, 48, 20, 0.08), 0 1px 3px rgba(60, 48, 20, 0.06);
    --shadow-md: 0 18px 45px rgba(60, 48, 20, 0.13);
    --shadow-lg: 0 28px 70px rgba(60, 48, 20, 0.17);
    --shadow-blue: 0 18px 45px rgba(42, 86, 214, 0.12);
    --shadow-purple: 0 18px 45px rgba(112, 72, 196, 0.09);

    --dot-grid-target: 0.35;
}


/* =========================================================
3. DARK MODE
========================================================= */

body.dark-mode {

    --color-background: #06070b;
    --color-background-soft: #090b12;
    --color-surface: #0d1018;
    --color-surface-soft: #111522;
    --color-surface-hover: #151a29;

    --color-primary: #2b62f6;
    --color-primary-dark: #1e4ed8;
    --color-primary-bright: #3b72ff;
    --color-primary-soft: rgba(43, 98, 246, 0.12);

    --color-purple: #8a2be2;
    --color-purple-soft: rgba(138, 43, 226, 0.12);

    --color-accent: #f4c95d;
    --color-accent-soft: rgba(244, 201, 93, 0.12);

    --color-success: #34d399;

    --color-text: #f5f7fb;
    --color-text-light: #9aa3b5;
    --color-text-muted: #687184;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.13);
}


/* =========================================================
4. RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    min-height: 100vh;
    font-family: var(--font-body);
    background:
        radial-gradient(circle at 85% 5%, rgba(43, 98, 246, 0.045), transparent 28%),
        var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background var(--transition-base), color var(--transition-base);
}

body.preloader-active,
body.nav-open {
    overflow: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

ul {
    list-style: none;
}

::selection {
    background: var(--color-primary);
    color: #ffffff;
}


/* =========================================================
5. PRELOADER
========================================================= */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(43, 98, 246, 0.07), transparent 32%),
        var(--color-background);
    transition:
        opacity 0.7s ease,
        visibility 0.7s ease,
        transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

.preloader.hide {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
}

.preloader-content {
    position: relative;
    z-index: 2;
    width: min(430px, 80%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preloader-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2.75rem;
    text-align: center;
    animation: preloaderWelcomeIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.preloader-welcome-small {
    display: block;
    margin-bottom: 0.2rem;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0;
    animation: preloaderWelcomeSmallIn 0.8s 0.15s ease-out forwards;
}

.preloader-welcome-main {
    display: block;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--color-text);
    opacity: 0;
    animation: preloaderWelcomeMainIn 0.9s 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.preloader-welcome-accent {
    position: relative;
    color: var(--color-primary);
}

.preloader-welcome-accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.12rem;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-purple));
    transform: scaleX(0);
    transform-origin: left center;
    animation: preloaderWelcomeUnderline 0.7s 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.preloader-logo {
    margin-bottom: 1.35rem;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--color-text);
    animation: preloaderLogoIn 0.8s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.preloader-logo span {
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    margin-left: 0.1em;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    vertical-align: middle;
    transform: translateY(0.14em);
}

.preloader-text {
    min-height: 1.6em;
    margin-bottom: 2.5rem;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--color-accent);
    text-align: center;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.preloader-progress-wrapper {
    position: relative;
    width: 100%;
}

.preloader-bar {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: var(--color-border-strong);
}

.preloader-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-purple));
    transform-origin: left center;
}

.preloader-progress-dot {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--color-accent);
    border: 2px solid var(--color-background);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
    transition: left 0.08s linear;
}

.preloader-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.9rem;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
}

.preloader-percentage {
    min-width: 3.5rem;
    text-align: right;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

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

@keyframes preloaderWelcomeSmallIn {
    0% { opacity: 0; transform: translateY(10px); letter-spacing: 0.28em; }
    100% { opacity: 1; transform: translateY(0); letter-spacing: 0.18em; }
}

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

@keyframes preloaderWelcomeUnderline {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

@keyframes preloaderLogoIn {
    0% { opacity: 0; transform: translateY(14px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.preloader-decoration {
    position: absolute;
    pointer-events: none;
}

.preloader-decoration-one {
    top: -120px;
    right: -80px;
    width: 280px;
    height: 280px;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    opacity: 0.12;
}

.preloader-decoration-two {
    bottom: -150px;
    left: -100px;
    width: 320px;
    height: 320px;
    border: 1px solid var(--color-purple);
    border-radius: 50%;
    opacity: 0.1;
}

.preloader-star {
    position: absolute;
    top: 18%;
    right: 15%;
    font-size: 1.2rem;
    color: var(--color-primary);
    opacity: 0.7;
    animation: preloaderStarFloat 3s ease-in-out infinite;
}

@keyframes preloaderStarFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(12deg); }
}


/* =========================================================
6. REUSABLE
========================================================= */

.container {
    width: min(1400px, 92%);
    margin-inline: auto;
}

.section {
    position: relative;
    padding: var(--space-4xl) 0;
}

.section-heading {
    margin-bottom: var(--space-3xl);
}

.section-label {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--space-md);
    padding: 0.45rem 1.05rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary-soft), var(--color-purple-soft));
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-label);
}

.section-title {
    max-width: 760px;
    font-size: clamp(2.1rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.045em;
}

.section-title span {
    color: var(--color-primary);
}


/* =========================================================
7. BUTTONS
========================================================= */

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 50px;
    padding: 0 1.3rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 700;
    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.btn-icon svg {
    width: 100%;
    height: 100%;
}

.btn:hover .btn-icon {
    transform: translateX(3px);
}

.btn-primary {
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-purple), var(--color-primary-bright));
    box-shadow: 0 10px 30px rgba(43, 98, 246, 0.22), 0 6px 20px rgba(138, 43, 226, 0.15);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-purple), var(--color-primary));
    box-shadow: 0 14px 36px rgba(43, 98, 246, 0.3), 0 8px 24px rgba(138, 43, 226, 0.2);
}

.btn-secondary {
    color: var(--color-text);
    background-color: var(--color-button-secondary);
    border: 1px solid var(--color-border-strong);
}

.btn-secondary:hover {
    background-color: var(--color-button-secondary-hover);
    border-color: rgba(43, 98, 246, 0.3);
}


/* =========================================================
8. HEADER / NAVBAR
========================================================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    background: var(--color-header);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-base), border-color var(--transition-base);
    transform: translateY(-100%);
    opacity: 0;
}

body.hero-ready .header {
    animation: headerSlideIn 0.7s 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
}

.logo {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--color-text);
}

.logo span {
    display: inline-block;
    width: 0.3em;
    height: 0.3em;
    margin-left: 0.1em;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    vertical-align: middle;
    transform: translateY(0.14em);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 2.75rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    position: relative;
    padding: 0.5rem 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-light);
    transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-text);
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-purple));
    transform: translateX(-50%);
    transition: width var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--color-text-light);
    background-color: var(--color-button-secondary);
    border: 1px solid var(--color-border);
    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.theme-toggle:hover {
    transform: rotate(12deg);
    color: var(--color-text);
    background-color: var(--color-primary-soft);
    border-color: rgba(43, 98, 246, 0.3);
}

.theme-icon {
    display: block;
    font-size: 1rem;
    line-height: 1;
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 1.2rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background-color: transparent;
    border: 1.5px solid rgba(138, 43, 226, 0.55);
    font-size: var(--text-sm);
    font-weight: 700;
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.nav-cta:hover {
    transform: translateY(-2px);
    color: var(--color-white);
    border-color: var(--color-primary-bright);
    box-shadow: 0 8px 22px rgba(43, 98, 246, 0.22);
}

.menu-toggle {
    display: none;
    position: relative;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-text-light);
    background-color: var(--color-button-secondary);
    border: 1px solid var(--color-border);
    z-index: 1;
    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.menu-toggle:hover {
    transform: rotate(12deg);
    color: var(--color-text);
    background-color: var(--color-primary-soft);
    border-color: rgba(43, 98, 246, 0.3);
}

.menu-toggle.active {
    color: var(--color-primary-bright);
    background-color: var(--color-primary-soft);
    border-color: rgba(43, 98, 246, 0.3);
}

.menu-toggle-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity 0.25s ease,
        transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.menu-icon-code {
    font-family: "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    border-radius: 50%;
    animation: menuToggleBreathe 2.6s ease-in-out infinite;
}

.menu-icon-close {
    opacity: 0;
    transform: scale(0.6) rotate(-45deg);
}

.menu-icon-close svg {
    width: 16px;
    height: 16px;
}

.menu-toggle.active .menu-icon-code {
    opacity: 0;
    transform: scale(0.6) rotate(45deg);
    animation: none;
}

.menu-toggle.active .menu-icon-close {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

@keyframes menuToggleBreathe {
    0%, 100% {
        opacity: 0.7;
        box-shadow: 0 0 0 0 rgba(43, 98, 246, 0);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 0 6px var(--color-primary-soft);
    }
}


/* =========================================================
8.5. SCROLL PROGRESS BAR

A thin gradient bar pinned to the very top of the viewport
that fills as the page is scrolled. It is drawn by the body's
::before pseudo-element (so no extra HTML is needed) and is
driven by a single custom property, --scroll-progress (0 → 1),
which the JS updates on scroll.

`background-size: 100vw` keeps the blue → purple gradient
anchored to the full viewport width, so the colours are
revealed progressively instead of being squeezed into the
short bar at the top of the page.
========================================================= */

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: calc(var(--scroll-progress, 0) * 100%);
    height: 3px;
    background-image: linear-gradient(90deg, var(--color-primary-bright), var(--color-purple));
    background-size: 100vw 100%;
    background-repeat: no-repeat;
    box-shadow: 0 0 12px rgba(43, 98, 246, 0.45);
    pointer-events: none;
}


/* =========================================================
9. HERO
========================================================= */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 110px 0 2rem;
    overflow: hidden;
}

.hero-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 4rem;
}

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

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    transform: scale(0.5);
}

body.hero-ready .hero-glow-blue {
    animation: heroGlowIn 1s 0.1s ease-out forwards;
}

body.hero-ready .hero-glow-purple {
    animation: heroGlowIn 1s 0.2s ease-out forwards;
}

@keyframes heroGlowIn {
    to { opacity: 0.35; transform: scale(1); }
}

.hero-glow-blue {
    top: 5%;
    right: 18%;
    width: 360px;
    height: 360px;
    background: rgba(43, 98, 246, 0.1);
}

.hero-glow-purple {
    bottom: 0;
    right: 35%;
    width: 280px;
    height: 280px;
    background: rgba(138, 43, 226, 0.07);
}

.hero-circle {
    position: absolute;
    top: 8%;
    right: -8%;
    width: 620px;
    height: 620px;
    border: 1px solid rgba(43, 98, 246, 0.08);
    border-radius: 50%;
}

.hero-circle::before {
    content: "";
    position: absolute;
    inset: 50px;
    border: 1px dashed rgba(138, 43, 226, 0.08);
    border-radius: 50%;
}

.hero-circle-dot {
    position: absolute;
    top: 13%;
    left: 20%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
    box-shadow: 0 0 0 6px rgba(43, 98, 246, 0.08);
}

.hero-bg-name {
    position: absolute;
    top: 28%;
    left: -1%;
    transform: translateY(-50%);
    font-size: clamp(6rem, 15vw, 12rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(110, 150, 255, 0.16);
    user-select: none;
    opacity: 0;
    transform: translateY(-50%) scale(0.85);
}

body.hero-ready .hero-bg-name {
    animation:
        heroBgNameIn 1.2s 0s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        heroNameDrift 14s 1.2s ease-in-out infinite;
}

@keyframes heroBgNameIn {
    to { opacity: 1; transform: translateY(-50%) scale(1); }
}

body:not(.dark-mode) .hero-bg-name {
    -webkit-text-stroke-color: rgba(42, 86, 214, 0.14);
}

@keyframes heroNameDrift {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(1.2%); }
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero-greeting {
    display: block;
    margin-bottom: 0.9rem;
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--color-text-light);
}

.hero-title {
    margin-bottom: 0.3rem;
    font-size: clamp(3.4rem, 6.4vw, 5.2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.045em;
    color: var(--color-text);
}

.hero-title span {
    display: inline;
    color: var(--color-text);
}

.hero-title .title-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
}

body.hero-ready .hero-title .title-word:nth-child(1) {
    animation: heroTextIn 0.7s 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.hero-ready .hero-title .title-word:nth-child(2) {
    animation: heroTextIn 0.7s 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-role {
    max-width: 650px;
    margin-bottom: 1.4rem;
    font-size: clamp(2.6rem, 6.2vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.045em;
    background: linear-gradient(90deg, var(--color-primary-bright), var(--color-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    max-width: 580px;
    margin-bottom: 2rem;
    color: var(--color-text-light);
    font-size: var(--text-base);
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.hero-socials {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.hero-greeting,
.hero-role,
.hero-description,
.hero-buttons,
.hero-socials {
    opacity: 0;
    transform: translateY(18px);
}

body.hero-ready .hero-greeting {
    animation: heroTextIn 0.7s 0.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.hero-ready .hero-role {
    animation: heroTextIn 0.7s 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.hero-ready .hero-description,
body.hero-ready .hero-buttons,
body.hero-ready .hero-socials {
    animation: heroTextIn 0.7s 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--color-button-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    transition:
        transform var(--transition-fast),
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.social-icon svg {
    width: 18px;
    height: 18px;
}

.social-icon:hover {
    transform: translateY(-3px);
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.hero-visual {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hero-visual-frame {
    position: relative;
    width: min(620px, 100%);
    aspect-ratio: 620 / 700;
}

/* Laptop / tablet: push the portrait + ring down so the head
   never touches the fixed header. Mobile keeps its own spacing. */
@media screen and (min-width: 701px) {
    .hero-visual-frame {
        top: clamp(70px, 12vh, 104px);
    }
}

.hero-visual-glow {
    position: absolute;
    left: 50%;
    top: 8%;
    transform: translateX(-50%);
    width: 100%;
    height: 88.5%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(59, 114, 255, 0.28) 0%,
        rgba(138, 43, 226, 0.20) 45%,
        transparent 72%
    );
    filter: blur(40px);
    pointer-events: none;
}

.hero-ring {
    position: absolute;
    left: 50%;
    top: 4%;
    transform: translateX(-50%);
    width: 77.4%;
    height: 68.6%;
    z-index: 1;
    overflow: visible;
}

.hero-ring-circle {
    fill: none;
    stroke: rgba(110, 170, 255, 0.4);
    stroke-width: 0.6;
    filter: drop-shadow(0 0 8px rgba(80, 140, 255, 0.15));
    stroke-dasharray: 302;
    stroke-dashoffset: 302;
}

body.hero-ready .hero-ring-circle {
    animation: heroRingDraw 1.1s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes heroRingDraw {
    to { stroke-dashoffset: 0; }
}

.hero-dot-grid {
    position: absolute;
    left: 76.6%;
    top: 12%;
    width: 22.6%;
    height: 22.9%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0;
    transform: scale(0.5);
    z-index: 1;
}

body.hero-ready .hero-dot-grid {
    animation: heroDotGridIn 0.8s 0.5s ease-out forwards;
}

@keyframes heroDotGridIn {
    to { opacity: var(--dot-grid-target); transform: scale(1); }
}

body:not(.dark-mode) .hero-dot-grid {
    background-image: radial-gradient(rgba(42, 86, 214, 0.20) 1px, transparent 1px);
}

.hero-portrait {
    position: absolute;
    left: 50%;
    bottom: 22%;
    transform: translateX(-50%);
    width: 92%;
    aspect-ratio: 440 / 500;
    z-index: 2;
    clip-path: inset(0 0 100% 0);
}

body.hero-ready .hero-portrait {
    animation: heroPortraitReveal 1s 0.45s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes heroPortraitReveal {
    to { clip-path: inset(0 0 0% 0); }
}

/*
 * Bottom edge = the ring. The mask ellipse radius (40.2% x 35.4% of the
 * image) equals the ring's radius (230px of the 620px frame), with a
 * hard 0.4% anti-alias edge, so the picture ends exactly on the ring line
 * instead of fading out. The top half is unmasked so the head and cap can
 * rise above the circle.
 */

.hero-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    -webkit-mask-image:
        linear-gradient(to bottom, black 0%, black 57.1%, transparent 57.1%),
        radial-gradient(ellipse 40.2% 35.4% at 50% 57.1%, black 99.6%, transparent 100%);
    mask-image:
        linear-gradient(to bottom, black 0%, black 57.1%, transparent 57.1%),
        radial-gradient(ellipse 40.2% 35.4% at 50% 57.1%, black 99.6%, transparent 100%);
}


/* =========================================================
9.5. STATUS DOT (shared)

The small glowing green dot used by the "Currently Studying"
badge (Education) and the availability line (Contact).
========================================================= */

.status-dot {
    margin-top: 0.25rem;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-success);
    box-shadow:
        0 0 0 5px rgba(52, 211, 153, 0.10),
        0 0 14px rgba(52, 211, 153, 0.4);
}


/* =========================================================
10. ABOUT
========================================================= */

.about {
    background: linear-gradient(180deg, var(--color-background-soft), var(--color-surface));
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.about-grid {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 4rem;
    align-items: start;
}

/*
 * Sticky About card, held near the vertical middle of the screen
 * while the timeline scrolls past.
 *
 * Why not `top: 50%` + `transform: translateY(-50%)`?
 * - This element also carries `.reveal`, whose animation is driven
 *   by `transform`. `.reveal` / `.reveal.show` are declared later in
 *   this file, so they silently replaced the -50% shift and the card
 *   was never centred (its top edge sat on the middle line instead).
 * - Moving the shift to the standalone `translate` property fixes the
 *   conflict, but then the card is also pulled up by half its own
 *   height while it is NOT stuck, and it overlaps the "About Me"
 *   title (on narrower screens the card is taller, so it is worse).
 *
 * So the offset is done with `top` only: no transform involved, no
 * shift at rest. 5rem is roughly half the card's height on desktop;
 * `max()` keeps it below the fixed header on short screens.
 */

.about-content {
    max-width: 420px;
    position: sticky;
    top: max(96px, calc(50vh - 5rem));
}

.about-text {
    margin-bottom: 1.6rem;
    color: var(--color-text-light);
    line-height: 1.85;
}

.about-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.about-tags span {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-card-soft);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-light);
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.about-tags span:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 98, 246, 0.35);
    background: var(--color-primary-soft);
    color: var(--color-text);
}

.about-timeline {
    display: grid;
    gap: 0;
    padding-left: 2.5rem;
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1.5rem;
}

.timeline-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-index {
    margin-bottom: 0.7rem;
    font-family: "Courier New", monospace;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-primary);
}

.timeline-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--color-primary);
    box-shadow: 0 0 0 5px var(--color-primary-soft);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.timeline-item:hover .timeline-dot {
    transform: scale(1.3);
    box-shadow: 0 0 0 7px var(--color-primary-soft);
}

.timeline-marker::after {
    content: "";
    flex: 1;
    width: 1px;
    min-height: 46px;
    margin-top: 0.75rem;
    background: linear-gradient(180deg, var(--color-primary), var(--color-border-strong) 70%, transparent);
    opacity: 0.5;
}

.timeline-item:last-child .timeline-marker::after {
    display: none;
}

.timeline-body {
    padding-bottom: 2.5rem;
}

.timeline-item:last-child .timeline-body {
    padding-bottom: 0;
}

.timeline-tag {
    display: inline-block;
    margin-bottom: 0.45rem;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

.timeline-body h3 {
    margin-bottom: 0.55rem;
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
}

.timeline-body p {
    max-width: 460px;
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: 1.75;
}

.timeline-dot-live {
    background-color: var(--color-success);
    box-shadow:
        0 0 0 5px rgba(52, 211, 153, 0.12),
        0 0 14px rgba(52, 211, 153, 0.4);
    animation: timelineLivePulse 2.2s ease-in-out infinite;
}

.timeline-item-current:hover .timeline-dot-live {
    transform: scale(1.3);
}

.timeline-item-current .timeline-tag {
    color: var(--color-success);
}

@keyframes timelineLivePulse {
    0%, 100% {
        box-shadow:
            0 0 0 5px rgba(52, 211, 153, 0.12),
            0 0 14px rgba(52, 211, 153, 0.4);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(52, 211, 153, 0.18),
            0 0 20px rgba(52, 211, 153, 0.55);
    }
}


/* =========================================================
11. EDUCATION
========================================================= */

.education {
    background: var(--color-background);
}

.education-card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card);
    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.education-card:hover {
    transform: translateY(-6px);
    border-color: rgba(43, 98, 246, 0.22);
    box-shadow: var(--shadow-md);
}

.education-visual {
    position: relative;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding: 3rem 2.5rem;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(circle at 50% 30%, rgba(43, 98, 246, 0.16), transparent 62%),
        var(--color-media-bg);
}

.education-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(43, 98, 246, 0.08), transparent 45%, rgba(138, 43, 226, 0.07));
}

.education-visual-glow {
    position: absolute;
    top: -6%;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 114, 255, 0.24), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

.education-dot-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(circle at 50% 35%, black, transparent 70%);
    mask-image: radial-gradient(circle at 50% 35%, black, transparent 70%);
    pointer-events: none;
}

.education-logo-wrap {
    position: relative;
    z-index: 2;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.education-logo-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(110, 170, 255, 0.35);
    border-radius: 50%;
    box-shadow:
        0 0 50px rgba(80, 140, 255, 0.12),
        inset 0 0 40px rgba(80, 140, 255, 0.06);
}

.education-logo-wrap::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px dashed rgba(244, 201, 93, 0.3);
    border-radius: 50%;
    animation: educationSealTurn 22s linear infinite;
}

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

.education-logo {
    position: relative;
    z-index: 2;
    width: 148px;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.4rem;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition-base);
}

.education-card:hover .education-logo {
    transform: scale(1.04);
}

.education-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.education-institution {
    position: relative;
    z-index: 2;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.education-department {
    position: relative;
    z-index: 2;
    font-size: var(--text-sm);
    color: var(--color-text-light);
}

.education-info {
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
}

.education-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 999px;
    background: rgba(52, 211, 153, 0.08);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-success);
}

.education-status .status-dot {
    margin-top: 0;
}

.education-info h3 {
    margin-bottom: 0.6rem;
    font-size: var(--text-2xl);
    letter-spacing: -0.025em;
}

.education-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-light);
}

.education-meta-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-text-muted);
}

.education-info p {
    max-width: 480px;
    margin-bottom: 1.5rem;
    color: var(--color-text-light);
    line-height: 1.8;
}

.education-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


/* =========================================================
11.5. EXPERIENCE
========================================================= */

.experience {
    position: relative;
    background: linear-gradient(180deg, var(--color-background-soft), var(--color-surface));
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.experience-timeline {
    display: grid;
    gap: 0;
    max-width: 720px;
    padding-left: 2.5rem;
}

.timeline-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.timeline-list li {
    position: relative;
    padding-left: 1.1rem;
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: 1.7;
}

.timeline-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.timeline-item-current .timeline-list li::before {
    background-color: var(--color-success);
}


/* =========================================================
12. SERVICES — SHOWCASE
========================================================= */

.services {
    position: relative;
    background: linear-gradient(180deg, var(--color-background-soft), var(--color-surface));
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.services::before {
    content: "";
    position: absolute;
    top: 15%;
    left: -120px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(43, 98, 246, 0.035);
    filter: blur(70px);
    pointer-events: none;
}

.services-showcase {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 2rem;
    align-items: stretch;

    --services-accent: var(--color-primary-bright);
    --services-accent-soft: var(--color-primary-soft);
}

.services-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.service-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.25rem;
    text-align: left;
    color: inherit;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card);
    overflow: hidden;
    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        transform var(--transition-base);
}

.service-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--services-accent);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.service-tab:hover {
    transform: translateX(4px);
    border-color: var(--color-border-strong);
    background: var(--color-card-hover);
}

/* Keyboard focus ring — only shown for keyboard navigation
   (arrow keys / Tab), never on mouse click. Picks up the
   active service's accent colour like the rest of the tab. */

.service-tab:focus-visible {
    outline: 2px solid var(--services-accent);
    outline-offset: 3px;
}

.service-tab.is-active {
    border-color: var(--services-accent);
    background: linear-gradient(135deg, var(--services-accent-soft), var(--color-card));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.service-tab.is-active::before {
    opacity: 1;
}

.service-tab-index {
    flex-shrink: 0;
    font-family: "Courier New", monospace;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    transition: color var(--transition-base);
}

.service-tab.is-active .service-tab-index {
    color: var(--services-accent);
}

.service-tab-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.service-tab-title {
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.service-tab-desc {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-tab-arrow {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--color-text-light);
    background-color: var(--color-button-secondary);
    border: 1px solid var(--color-border);
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--transition-base),
        transform var(--transition-base),
        color var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base);
}

.service-tab-arrow svg {
    width: 14px;
    height: 14px;
}

.service-tab:hover .service-tab-arrow,
.service-tab.is-active .service-tab-arrow {
    opacity: 1;
    transform: translateX(0);
}

.service-tab.is-active .service-tab-arrow {
    color: var(--color-white);
    background: var(--services-accent);
    border-color: var(--services-accent);
}

.services-preview {
    position: relative;
    overflow: hidden;
    padding: 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-solid);
    min-width: 0;
}

.services-preview-bgnum {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    font-size: clamp(6rem, 14vw, 10rem);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--services-accent-soft);
    opacity: 0.7;
    user-select: none;
    pointer-events: none;
    z-index: 0;
    transition: -webkit-text-stroke-color var(--transition-slow);
}

.services-preview-glow {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--services-accent-soft), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    transition: background var(--transition-slow);
}

.services-preview-stage {
    position: relative;
    z-index: 1;
    min-height: 460px;
}

.service-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 2rem;
    align-items: stretch;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-panel.is-active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.service-panel-media {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: 380px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
    min-width: 0;
}

.service-panel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-panel-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--services-accent-soft), transparent 55%);
    mix-blend-mode: overlay;
}

.service-panel-body {
    min-width: 0;
    align-self: center;
}

.service-panel-tag {
    display: inline-flex;
    margin-bottom: 0.8rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--services-accent);
    border-radius: 999px;
    background: var(--services-accent-soft);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--services-accent);
}

.service-panel-body h3 {
    margin-bottom: 0.7rem;
    font-size: var(--text-2xl);
    letter-spacing: -0.025em;
}

.service-panel-body p {
    margin-bottom: 1.25rem;
    max-width: 440px;
    color: var(--color-text-light);
    line-height: 1.8;
}

.service-panel-tags {
    margin-bottom: 1.5rem;
}

.service-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--services-accent);
    transition: gap var(--transition-fast), color var(--transition-fast);
}

.service-panel-cta .btn-icon {
    color: var(--services-accent);
}

.service-panel-cta:hover {
    gap: 0.85rem;
    color: var(--color-text);
}


/* =========================================================
13. PROJECTS — BENTO GRID
========================================================= */

.projects {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.section-heading-projects {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}

.section-intro {
    max-width: 430px;
    color: var(--color-text-light);
    line-height: 1.8;
}

.projects-bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.project-card {
    --project-accent: var(--color-primary-bright);
    --project-accent-soft: var(--color-primary-soft);
    --project-accent-shadow: rgba(43, 98, 246, 0.16);

    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-solid);
    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base),
        transform var(--transition-base);
}

.project-card-purple {
    --project-accent: var(--color-purple);
    --project-accent-soft: var(--color-purple-soft);
    --project-accent-shadow: rgba(138, 43, 226, 0.16);
}

.project-card-gold {
    --project-accent: var(--color-accent);
    --project-accent-soft: var(--color-accent-soft);
    --project-accent-shadow: rgba(244, 201, 93, 0.18);
}

.project-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--project-accent), transparent);
    transition: width var(--transition-slow);
    z-index: 3;
}

.project-card:hover {
    border-color: var(--project-accent-soft);
    box-shadow: var(--shadow-md), 0 0 50px var(--project-accent-shadow);
}

.project-card:hover::before {
    width: 100%;
}

/*
 * A single project fills the whole row (image beside the text).
 * As soon as a second project is added, the grid becomes two
 * equal cards side by side automatically.
 */

.projects-bento > .project-card:only-of-type {
    grid-column: 1 / -1;
    flex-direction: row;
}

/* ---------- Image ---------- */

.project-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, var(--project-accent-soft), transparent 62%),
        var(--color-media-bg);
}

.project-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--project-accent-soft), transparent 40%, rgba(138, 43, 226, 0.06));
    pointer-events: none;
}

.projects-bento > .project-card:only-of-type .project-media {
    flex: 0 0 56%;
    padding: 2.25rem;
}

.project-media:focus-visible {
    outline: 2px solid var(--project-accent);
    outline-offset: -4px;
}

.project-browser {
    position: relative;
    z-index: 2;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    background-color: #ffffff;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    transform: perspective(1000px) rotateX(2deg);
    transition: transform var(--transition-slow);
}

.project-card:hover .project-browser {
    transform: perspective(1000px) rotateX(0deg) translateY(-4px);
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background-color: #e9edf3;
}

.browser-bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #9aa1ad;
}

.browser-bar span:nth-child(1) { background-color: #ff6b6b; }
.browser-bar span:nth-child(2) { background-color: #f4c95d; }
.browser-bar span:nth-child(3) { background-color: #34d399; }

.project-browser img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
    background-color: #12151d;
}

.project-media-chip {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(6, 7, 11, 0.78);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-white);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.project-media:hover .project-media-chip,
.project-media:focus-visible .project-media-chip {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Text ---------- */

.project-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding: 1.9rem;
}

.projects-bento > .project-card:only-of-type .project-body {
    justify-content: center;
    padding: 2.5rem;
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}

.project-badge {
    display: inline-flex;
    padding: 0.32rem 0.75rem;
    border: 1px solid var(--project-accent);
    border-radius: 999px;
    background: var(--project-accent-soft);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--project-accent);
}

.project-type {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
}

.project-body h3 {
    margin-bottom: 0.7rem;
    font-size: var(--text-2xl);
    letter-spacing: -0.02em;
}

.project-body > p {
    max-width: 520px;
    margin-bottom: 1.1rem;
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: 1.75;
}

.project-features {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1.4rem;
}

.project-features li {
    position: relative;
    padding-left: 1.1rem;
    font-size: var(--text-sm);
    color: var(--color-text-light);
    line-height: 1.65;
}

.project-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--project-accent);
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.6rem;
}

.project-tech span,
.skill-tags span,
.education-tags span {
    padding: 0.38rem 0.68rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-card-soft);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-light);
}

.project-tech span:hover,
.skill-tags span:hover,
.education-tags span:hover {
    border-color: var(--project-accent-soft, rgba(43, 98, 246, 0.3));
    background: var(--project-accent-soft, var(--color-primary-soft));
    color: var(--color-text);
}

/* Both links are always visible, so they also work on touch screens. */

.project-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: auto;
}

.project-links .btn {
    min-height: 46px;
    gap: 0.5rem;
}

.project-cta-card {
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-height: 96px;
    padding: 1.25rem 1.75rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-solid);
    color: inherit;
    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        transform var(--transition-base);
}

.project-cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.65s ease;
    pointer-events: none;
}

.project-cta-card:hover {
    transform: translateY(-3px);
    border-color: rgba(43, 98, 246, 0.3);
    background: var(--color-card-hover);
}

.project-cta-card:hover::before {
    transform: translateX(100%);
}

.project-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-button-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base),
        transform var(--transition-base);
}

.project-cta-icon svg {
    width: 19px;
    height: 19px;
}

.project-cta-card:hover .project-cta-icon {
    transform: scale(1.06);
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary), var(--color-purple));
    border-color: transparent;
}

.project-cta-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.project-cta-title {
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.project-cta-desc {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-cta-arrow {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--color-text-light);
    background-color: var(--color-button-secondary);
    border: 1px solid var(--color-border);
    transition:
        transform var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}

.project-cta-arrow svg {
    width: 15px;
    height: 15px;
}

.project-cta-card:hover .project-cta-arrow {
    transform: translateX(3px);
    color: var(--color-white);
    background: var(--color-primary-soft);
    border-color: rgba(43, 98, 246, 0.4);
}


/* =========================================================
14. SKILLS — BENTO GRID
========================================================= */

.skills {
    background: var(--color-background);
}

.skills .section-intro {
    margin-top: 1rem;
    max-width: 620px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.skill-card-wide {
    grid-column: span 2;
}

.skill-card {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card);
    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background-color var(--transition-base),
        box-shadow var(--transition-base);
}

.skill-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-purple));
    transition: width var(--transition-slow);
}

.skill-card:hover {
    transform: translateY(-6px);
    border-color: rgba(43, 98, 246, 0.25);
    background: var(--color-card-hover);
    box-shadow: var(--shadow-md);
}

.skill-card:hover::before {
    width: 100%;
}

.skill-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}

.skill-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    transition: transform var(--transition-base);
}

.skill-card-icon svg {
    width: 22px;
    height: 22px;
}

.skill-card:hover .skill-card-icon {
    transform: scale(1.08) rotate(-4deg);
}

.skill-card-icon-primary {
    color: var(--color-primary-bright);
    background: var(--color-primary-soft);
}

.skill-card-icon-purple {
    color: var(--color-purple);
    background: var(--color-purple-soft);
}

.skill-card-icon-accent {
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

.skill-card-index {
    font-family: "Courier New", monospace;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.skill-card h3 {
    margin-bottom: 1.1rem;
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.skill-tags span {
    padding: 0.38rem 0.68rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-card-soft);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-light);
    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.skill-tags span:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 98, 246, 0.3);
    background: var(--color-primary-soft);
    color: var(--color-text);
}

.skill-card-core {
    border-color: rgba(43, 98, 246, 0.3);
    background: linear-gradient(165deg, var(--color-primary-soft) 0%, var(--color-card) 65%);
    box-shadow: var(--shadow-blue);
}

.skill-card-core:hover {
    border-color: rgba(43, 98, 246, 0.45);
    background: linear-gradient(165deg, var(--color-primary-soft) 0%, var(--color-card-hover) 65%);
    box-shadow: var(--shadow-blue), var(--shadow-md);
}

.skill-card-core .skill-card-icon-primary {
    box-shadow: 0 0 0 1px rgba(43, 98, 246, 0.18), 0 0 22px rgba(43, 98, 246, 0.28);
}



/* =========================================================
15. CONTACT

Dark by default (hard-coded dark gradient + white text below).
In Light Mode the whole card is re-themed in section 24.
========================================================= */

.contact {
    padding: 6rem 0;
}

.contact-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    background: linear-gradient(120deg, #0d1730 0%, #10172a 48%, #171127 100%);
    color: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.contact-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(
        480px circle at var(--mx, 50%) var(--my, 50%),
        rgba(80, 140, 255, 0.16),
        transparent 60%
    );
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
}

.contact-wrapper.is-active::before {
    opacity: 1;
}

.contact-wrapper::after {
    content: "";
    position: absolute;
    top: -200px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 98, 246, 0.22), transparent 65%);
    filter: blur(20px);
}

.contact-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 700px;
}

.contact .section-label {
    color: var(--color-primary-bright);
}

.contact-title {
    margin-bottom: 1rem;
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.contact-title span {
    background: linear-gradient(90deg, var(--color-primary-bright), #a866ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-description {
    max-width: 560px;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.8;
}

.contact-availability {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 2.25rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
}

.contact-links {
    display: grid;
    gap: 0.75rem;
}

.contact-link-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.05rem 1.3rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        transform var(--transition-base);
}

.contact-link-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.65s ease;
}

.contact-link-row:hover {
    border-color: rgba(110, 170, 255, 0.35);
    background: rgba(255, 255, 255, 0.045);
    transform: translateY(-2px);
}

.contact-link-row:hover::before {
    transform: translateX(100%);
}

.contact-link-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.85);
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        transform var(--transition-base);
}

.contact-link-row:hover .contact-link-icon {
    background: var(--color-primary-soft);
    border-color: rgba(110, 170, 255, 0.4);
    transform: scale(1.06);
}

.contact-link-icon svg {
    width: 19px;
    height: 19px;
}

/*
 * The "copied" check icon is left over in the Email row's HTML
 * from the old click-to-copy behaviour. Nothing toggles it any
 * more, so it stays hidden. This rule can be deleted together
 * with that extra <svg class="icon-success"> in the HTML.
 */

.contact-link-icon .icon-success {
    display: none;
}

.contact-link-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.contact-link-title {
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-white);
}

.contact-link-value {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-fast);
}

.contact-link-hint {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.contact-link-row:hover .contact-link-hint {
    opacity: 1;
    transform: translateX(0);
}

.contact-link-arrow {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition:
        transform var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}

.contact-link-arrow svg {
    width: 15px;
    height: 15px;
}

.contact-link-row:hover .contact-link-arrow {
    transform: translateX(3px);
    color: var(--color-white);
    background: rgba(110, 170, 255, 0.18);
    border-color: rgba(110, 170, 255, 0.4);
}

.contact-decoration {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.contact-circle {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.circle-one {
    width: 430px;
    height: 430px;
    right: -130px;
    top: -160px;
}

.circle-two {
    width: 270px;
    height: 270px;
    right: 120px;
    bottom: -150px;
}

.circle-three {
    width: 150px;
    height: 150px;
    right: 310px;
    top: 80px;
    border-color: rgba(43, 98, 246, 0.12);
}

.contact-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.contact-dot-one {
    top: 22%;
    right: 30%;
    background: var(--color-primary);
    box-shadow: 0 0 0 6px rgba(43, 98, 246, 0.08);
}

.contact-dot-two {
    right: 12%;
    bottom: 25%;
    background: var(--color-purple);
    box-shadow: 0 0 0 6px rgba(138, 43, 226, 0.08);
}

.contact-star {
    position: absolute;
    right: 15%;
    top: 28%;
    font-size: 2rem;
    color: var(--color-accent);
    opacity: 0.75;
}


/* =========================================================
16. FOOTER
========================================================= */

.footer {
    padding: 2.2rem 0;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
}

.footer-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.footer p {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.footer-copyright {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}


/* =========================================================
17. SCROLL REVEAL SUPPORT
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(42px) scale(0.97);
    filter: blur(6px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.7s ease-out;
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform, filter;
}

.reveal.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}



/* =========================================================
18. RESPONSIVE — TABLET
========================================================= */

@media screen and (max-width: 1000px) {

    .container {
        width: min(920px, 92%);
    }

    .navbar {
        min-height: 68px;
    }

    .nav-right {
        gap: 0;
    }

    /*
     * Full-screen mobile menu.
     * - 100dvh follows the real visible height on phones (the
     *   address bar no longer cuts the bottom of the menu).
     * - On short screens the list scrolls instead of being cut;
     *   the auto margins on the first / last item keep it
     *   vertically centred when it fits.
     */
    .nav-links {
        position: fixed;
        top: 68px;
        left: 0;
        width: 100%;
        height: calc(100vh - 68px);
        height: calc(100dvh - 68px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 1.5rem 8%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: none;
        border-top: 1px solid var(--color-border-strong);
        border-radius: 0;
        background: var(--color-mobile-nav);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow: none;
        counter-reset: navindex;
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-16px) scale(0.98);
        transition:
            opacity 0.45s ease,
            visibility 0.45s ease,
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .nav-links li:first-child {
        margin-top: auto;
    }

    .nav-links li:last-child {
        margin-bottom: auto;
    }

    .nav-links::before {
        content: "";
        position: absolute;
        top: -8%;
        right: -18%;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(43, 98, 246, 0.18), transparent 70%);
        filter: blur(50px);
        pointer-events: none;
    }

    .nav-links::after {
        content: "";
        position: absolute;
        bottom: -12%;
        left: -15%;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(138, 43, 226, 0.16), transparent 70%);
        filter: blur(50px);
        pointer-events: none;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .nav-links li {
        position: relative;
        z-index: 1;
        counter-increment: navindex;
        opacity: 0;
        transform: translateY(26px);
        border-bottom: 1px solid var(--color-border);
        transition:
            opacity 0.5s ease,
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    .nav-links.active li {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-links.active li:nth-child(1) { transition-delay: 0.12s; }
    .nav-links.active li:nth-child(2) { transition-delay: 0.17s; }
    .nav-links.active li:nth-child(3) { transition-delay: 0.22s; }
    .nav-links.active li:nth-child(4) { transition-delay: 0.27s; }
    .nav-links.active li:nth-child(5) { transition-delay: 0.32s; }
    .nav-links.active li:nth-child(6) { transition-delay: 0.37s; }
    .nav-links.active li:nth-child(7) { transition-delay: 0.42s; }
    .nav-links.active li:nth-child(8) { transition-delay: 0.47s; }

    .nav-link {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 1.15rem 0.1rem;
        font-size: var(--text-2xl);
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--color-text-light);
        transition: color var(--transition-fast), gap var(--transition-fast);
    }

    .nav-link::before {
        content: counter(navindex, decimal-leading-zero);
        font-family: "Courier New", monospace;
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--color-primary);
    }

    .nav-link::after {
        display: none;
    }

    .nav-link:hover,
    .nav-link.active {
        color: var(--color-text);
        gap: 1.15rem;
    }

    .nav-link.active {
        background: linear-gradient(90deg, var(--color-primary-bright), var(--color-purple));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .nav-link.active::before {
        -webkit-text-fill-color: var(--color-primary);
    }

    .nav-actions {
        gap: 0.5rem;
    }

    .nav-cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
    }

    .hero-container {
        gap: 2rem;
    }

    .hero-title {
        font-size: clamp(3.7rem, 7vw, 5.5rem);
    }

    .hero-visual {
        min-height: 520px;
    }

    .hero-visual-frame {
        width: min(480px, 100%);
    }

    .about-grid {
        gap: 3.5rem;
    }

    .education-card {
        grid-template-columns: 1fr;
    }

    .education-visual {
        min-height: 300px;
    }

    .services-showcase {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .services-preview {
        padding: 2rem;
    }

    .services-preview-stage {
        min-height: 380px;
    }

    .service-panel {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        align-items: start;
    }

    .service-panel-media {
        height: auto;
        min-height: unset;
        aspect-ratio: 4 / 5;
    }

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

    .section-heading-projects {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .section-heading-projects .section-intro {
        max-width: 100%;
    }

    .projects-bento {
        grid-template-columns: 1fr;
    }

    .projects-bento > .project-card:only-of-type {
        flex-direction: column;
    }

    .projects-bento > .project-card:only-of-type .project-media {
        flex: 0 0 auto;
        padding: 1.75rem;
    }

    .projects-bento > .project-card:only-of-type .project-body {
        padding: 1.9rem;
    }

    .contact-wrapper {
        padding: 3rem;
    }
}


/* =========================================================
19. RESPONSIVE — MOBILE
========================================================= */

@media screen and (max-width: 700px) {

    .container {
        width: 92%;
    }

    .section {
        padding: 5rem 0;
    }

    .navbar {
        min-height: 68px;
    }

    .nav-right {
        gap: 0;
    }

    .nav-actions {
        gap: 0.5rem;
    }

    .hero {
        min-height: auto;
        padding: 130px 0 70px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-greeting {
        justify-content: center;
    }

    .hero-title {
        font-size: clamp(3.5rem, 15vw, 5rem);
    }

    .hero-role {
        max-width: 500px;
        font-size: clamp(2.2rem, 11vw, 3.2rem);
    }

    .hero-description {
        max-width: 520px;
        font-size: 0.95rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-socials {
        justify-content: center;
    }

    .hero-visual {
        min-height: 420px;
    }

    .hero-visual-frame {
        width: min(380px, 82vw);
    }

    .hero-circle {
        width: 500px;
        height: 500px;
        top: 15%;
        right: -35%;
    }

    .hero-bg-name {
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: clamp(4.5rem, 22vw, 7rem);
    }

    @keyframes heroNameDrift {
        0%, 100% { transform: translate(-50%, -50%); }
        50% { transform: translate(-50%, -50%) translateY(1%); }
    }

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

    .about-content {
        position: static;
        max-width: 100%;
    }

    .about-timeline,
    .experience-timeline {
        padding-left: 0;
    }

    .timeline-item {
        grid-template-columns: 44px 1fr;
        gap: 1rem;
    }

    .timeline-index {
        font-size: 0.65rem;
    }

    .timeline-body {
        padding-bottom: 2rem;
    }

    .education-visual {
        padding: 2rem;
    }

    .education-logo-wrap {
        width: 150px;
        height: 150px;
    }

    .education-logo {
        width: 116px;
        height: 116px;
    }

    .education-info {
        padding: 1.75rem;
    }

    .services-preview {
        padding: 1.5rem;
    }

    .services-preview-stage {
        min-height: 340px;
    }

    .services-preview-bgnum {
        right: 2%;
        font-size: clamp(4rem, 22vw, 6rem);
    }

    .service-tab {
        padding: 1rem;
        gap: 0.75rem;
    }

    .service-tab-desc {
        white-space: normal;
    }

    .service-panel-body h3 {
        font-size: var(--text-xl);
    }

    .service-panel-body p {
        max-width: 100%;
    }

    .projects-bento {
        gap: 1rem;
    }

    .project-media,
    .projects-bento > .project-card:only-of-type .project-media {
        padding: 1.25rem;
    }

    .project-body,
    .projects-bento > .project-card:only-of-type .project-body {
        padding: 1.5rem;
    }

    .project-links .btn {
        flex: 1 1 140px;
    }

    .project-cta-card {
        padding: 1.1rem 1.25rem;
        flex-wrap: wrap;
    }

    .project-cta-desc {
        white-space: normal;
    }

    .skills-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .skill-card {
        padding: 1.75rem;
    }

    .skill-card-wide {
        grid-column: span 1;
    }

    .contact {
        padding: 4rem 0;
    }

    .contact-wrapper {
        padding: 2.5rem 1.75rem;
        border-radius: var(--radius-lg);
    }

    .contact-title {
        font-size: clamp(2.5rem, 11vw, 3.5rem);
    }

    .contact-link-row {
        padding: 0.9rem 1rem;
        gap: 0.85rem;
    }

    .contact-link-icon {
        width: 40px;
        height: 40px;
    }

    .contact-link-hint {
        display: none;
    }

    .contact-circle.circle-one {
        width: 330px;
        height: 330px;
        right: -160px;
        top: -80px;
    }

    .contact-circle.circle-two {
        width: 210px;
        height: 210px;
        right: -60px;
    }

    .contact-circle.circle-three {
        display: none;
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-brand {
        align-items: center;
    }

    .preloader-content {
        width: 82%;
    }

    .preloader-welcome {
        margin-bottom: 2.35rem;
    }

    .preloader-welcome-small {
        font-size: 0.7rem;
    }

    .preloader-welcome-main {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .preloader-logo {
        margin-bottom: 1.25rem;
    }

    .preloader-text {
        margin-bottom: 2rem;
    }
}


/* =========================================================
20. RESPONSIVE — SMALL MOBILE
========================================================= */

@media screen and (max-width: 400px) {

    .section {
        padding: 4.25rem 0;
    }

    .hero {
        padding-top: 115px;
    }

    .hero-title {
        font-size: 3.25rem;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .hero-visual {
        min-height: 380px;
    }

    .hero-visual-frame {
        width: min(320px, 78vw);
    }

    .nav-link {
        font-size: var(--text-xl);
    }

    .preloader-content {
        width: 86%;
    }

    .preloader-welcome {
        margin-bottom: 2.1rem;
    }

    .preloader-welcome-main {
        font-size: 1.85rem;
    }

    .preloader-star {
        right: 10%;
    }
}


/* =========================================================
21. REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        filter: none;
    }

    .contact-wrapper::before {
        display: none;
    }
}


/* =========================================================
22. SIGNATURE TYPOGRAPHY — "DIGITAL ATELIER"

Remon's name is set like the wordmark of a fashion house: a
high-contrast italic Didone (Bodoni Moda), capitals, an
oversized first letter, a blue → purple four-point star as the "seal"
and a hand-signed blue → purple flourish under the name.

The same Didone is then used for every heading on the site,
while Plus Jakarta Sans stays for body text, buttons, nav
links and tags, so the whole page speaks one typographic
language.

This section is placed AFTER all the rules above (including
the responsive blocks) on purpose: it overrides them by
order, without touching them.

Requires in the JS file: initSignatureName() — it wraps every
letter of the hero name in <span class="char"> and adds
.is-split to .hero-title.
========================================================= */


/* ---------------------------------------------------------
   22.1 FONT VARIABLES
--------------------------------------------------------- */

:root {
    --font-signature: "Bodoni Moda", "Bodoni 72", Didot, "Playfair Display", Georgia, serif;
    --font-display: var(--font-signature);
}


/* ---------------------------------------------------------
   22.2 SITE-WIDE HEADINGS (Didone)
   Bodoni needs far looser tracking than Jakarta's -0.045em,
   so letter-spacing is reset to a small value everywhere.
--------------------------------------------------------- */

.section-title,
.contact-title,
.hero-role,
.preloader-welcome-main,
.timeline-body h3,
.education-info h3,
.service-panel-body h3,
.skill-card h3,
.project-body h3,
.education-institution,
.service-tab-title,
.project-cta-title,
.contact-link-title {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
}

.section-title {
    font-weight: 600;
    line-height: 1.12;
}

/* The accent words become the italic "swash" of each title */
.section-title span,
.contact-title span,
.preloader-welcome-accent {
    font-style: italic;
    font-weight: 700;
    padding-right: 0.08em; /* stops italic overhang from being clipped */
}

.hero-role {
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2.3rem, 5.4vw, 4.3rem);
    line-height: 1.12;
    letter-spacing: -0.005em;
    padding-right: 0.08em;
    padding-bottom: 0.08em; /* gradient text: keep descenders */
}

.contact-title {
    font-weight: 700;
    line-height: 1.08;
}

.preloader-welcome-main {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.timeline-body h3,
.education-info h3,
.service-panel-body h3,
.skill-card h3,
.project-body h3 {
    font-weight: 600;
}

.education-institution,
.service-tab-title,
.project-cta-title,
.contact-link-title {
    font-weight: 600;
}


/* ---------------------------------------------------------
   22.3 NUMBERS / INDEXES (Didone italic instead of monospace)
   The "</>" menu icon deliberately stays monospace: it is
   a code symbol, not typography.
--------------------------------------------------------- */

.timeline-index,
.skill-card-index,
.service-tab-index,
.nav-link::before {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-variant-numeric: lining-nums;
    letter-spacing: 0.02em;
}

.timeline-index,
.skill-card-index,
.service-tab-index {
    font-size: 0.85rem;
}

.services-preview-bgnum {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0;
}

.hero-greeting {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.35rem;
}


/* ---------------------------------------------------------
   22.4 LOGO (navbar, footer, preloader)
--------------------------------------------------------- */

.logo,
.preloader-logo {
    font-family: var(--font-signature);
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.logo {
    font-size: 1.2rem;
    font-weight: 700;
}

.preloader-logo {
    font-size: 2.9rem;
    font-weight: 800;
}

/* The dot becomes the blue → purple "seal" */
.logo span,
.preloader-logo span {
    background: linear-gradient(135deg, var(--color-primary-bright), var(--color-purple));
}

.logo {
    transition: letter-spacing 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo:hover {
    letter-spacing: 0.11em;
}

.logo span {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

.logo:hover span {
    transform: translateY(0.14em) scale(1.35);
    box-shadow: 0 0 12px rgba(59, 114, 255, 0.7);
}


/* ---------------------------------------------------------
   22.5 HERO BACKGROUND NAME (outlined)
--------------------------------------------------------- */

.hero-bg-name {
    font-family: var(--font-signature);
    font-style: italic;
    font-size: clamp(4.5rem, 11.5vw, 9.5rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    -webkit-text-stroke: 1px rgba(110, 150, 255, 0.2);
}


/* ---------------------------------------------------------
   22.6 HERO NAME — the signature
--------------------------------------------------------- */

.hero-title {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.9rem;
    font-family: var(--font-signature);
    font-style: italic;
    font-size: clamp(2.8rem, 5.4vw, 4.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text);
}

/* Oversized initials (R and A): the "swash capital" */
.hero-title .title-word::first-letter {
    font-size: 1.24em;
}

.hero-title .char-cap {
    font-size: 1.24em;
}

/*
 * Blue → purple four-point star after the name: the "seal".
 * It sits inside the last word so it always wraps with it.
 */
.hero-title .title-word:last-child::after {
    content: "\2726";
    display: inline-block;
    position: relative;
    top: -1.05em;
    margin-left: 0.18em;
    font-size: 0.4em;
    font-style: normal;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-primary-bright), var(--color-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 8px rgba(59, 114, 255, 0.65));
    animation: heroStarTwinkle 3.4s ease-in-out infinite;
}

@keyframes heroStarTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.95; }
    50%      { transform: scale(1.3) rotate(90deg); opacity: 0.6; }
}

/*
 * Hand-signed flourish under the name. An SVG used as a mask, so
 * the colour follows the theme. It is "written" left to right.
 */
.hero-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.34em;
    width: 100%;
    height: 0.36em;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary-bright) 28%, var(--color-purple) 72%, transparent 100%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M2 26C70 8 150 6 230 16 290 23 345 22 398 8 350 34 285 36 225 30 150 22 70 24 2 26Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M2 26C70 8 150 6 230 16 290 23 345 22 398 8 350 34 285 36 225 30 150 22 70 24 2 26Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}

body.hero-ready .hero-title::after {
    animation: heroFlourishWrite 1.1s 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes heroFlourishWrite {
    to { clip-path: inset(0 0 0 0); }
}


/* ---------------------------------------------------------
   22.7 LETTER-BY-LETTER ANIMATION (simplified)
--------------------------------------------------------- */

.hero-title.is-split .title-word,
body.hero-ready .hero-title.is-split .title-word:nth-child(n) {
    opacity: 1;
    transform: none;
    animation: none;
}

.hero-title.is-split .char {
    display: inline-block;
    opacity: 0;
    transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease, text-shadow 0.25s ease;
}

body.hero-ready .hero-title.is-split .char {
    animation:
        charRise 0.55s calc(0.35s + var(--i) * 0.045s) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes charRise {
    0% {
        opacity: 0;
        transform: translateY(0.3em);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.hero-title.is-split .char:hover {
    translate: 0 -0.1em;
    color: var(--color-primary-bright);
    text-shadow: 0 0 18px rgba(59, 114, 255, 0.55);
}


/* ---------------------------------------------------------
   22.8 RESPONSIVE
--------------------------------------------------------- */

@media screen and (max-width: 1000px) {

    .hero-title {
        font-size: clamp(3rem, 6.2vw, 4.4rem);
    }
}

@media screen and (max-width: 700px) {

    .hero-title {
        font-size: clamp(2.4rem, 10vw, 3.4rem);
    }

    .hero-role {
        font-size: clamp(2rem, 9.5vw, 2.9rem);
    }

    .hero-bg-name {
        font-size: clamp(3.4rem, 17vw, 5.2rem);
    }
}

@media screen and (max-width: 400px) {

    .hero-title {
        font-size: 2.3rem;
    }
}


/* ---------------------------------------------------------
   22.9 REDUCED MOTION
   The global reduced-motion rule (section 21) already
   shortens the animations. This also keeps the letters
   visible and stops the repeating light wave.
--------------------------------------------------------- */

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

    .hero-title.is-split .char {
        opacity: 1;
        animation: none !important;
    }

    .hero-title .title-word:last-child::after {
        animation: none;
    }
}


/* =========================================================
24. LIGHT MODE REFINEMENTS

Everything below only applies when the page is NOT in dark
mode. The palette itself lives in section 2; this block fixes
the places where the original design had dark-only values
hard-coded (hover text, glows, shadows, rings, card elevation).

Resting card elevation uses :where() so its specificity is 0
and the existing :hover / is-active shadows still win.
========================================================= */

/* ---------- Cards: soft elevation on the cream background ---------- */

:where(body:not(.dark-mode)) .education-card,
:where(body:not(.dark-mode)) .skill-card:not(.skill-card-core),
:where(body:not(.dark-mode)) .service-tab,
:where(body:not(.dark-mode)) .services-preview,
:where(body:not(.dark-mode)) .project-card,
:where(body:not(.dark-mode)) .project-cta-card {
    box-shadow: var(--shadow-sm);
}

/* ---------- Navbar "Let's Talk": white hover text was invisible ---------- */

body:not(.dark-mode) .nav-cta:hover {
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    box-shadow: 0 8px 22px rgba(42, 86, 214, 0.16);
}

/* ---------- Hero ---------- */

body:not(.dark-mode) .hero-visual-glow {
    background: radial-gradient(
        circle,
        rgba(58, 104, 228, 0.16) 0%,
        rgba(112, 72, 196, 0.10) 45%,
        transparent 72%
    );
}

body:not(.dark-mode) .hero-ring-circle {
    stroke: rgba(42, 86, 214, 0.38);
    filter: none;
}

body:not(.dark-mode) .hero-circle {
    border-color: rgba(42, 86, 214, 0.14);
}

body:not(.dark-mode) .hero-circle::before {
    border-color: rgba(112, 72, 196, 0.16);
}

body:not(.dark-mode) .hero-bg-name {
    -webkit-text-stroke-color: rgba(42, 86, 214, 0.18);
}

body:not(.dark-mode) .hero-title.is-split .char:hover {
    text-shadow: 0 0 14px rgba(42, 86, 214, 0.28);
}

/* ---------- Education ---------- */

body:not(.dark-mode) .education-logo-wrap::before {
    border-color: rgba(42, 86, 214, 0.28);
    box-shadow:
        0 0 40px rgba(42, 86, 214, 0.10),
        inset 0 0 30px rgba(42, 86, 214, 0.05);
}

body:not(.dark-mode) .education-logo-wrap::after {
    border-color: rgba(148, 106, 6, 0.42);
}

body:not(.dark-mode) .education-logo {
    border-color: rgba(22, 28, 39, 0.08);
    box-shadow: 0 16px 36px rgba(33, 38, 45, 0.16);
}

body:not(.dark-mode) .education-status {
    border-color: rgba(15, 122, 85, 0.28);
    background: rgba(15, 122, 85, 0.08);
}

/* ---------- Services ---------- */

body:not(.dark-mode) .service-tab.is-active {
    box-shadow: 0 14px 34px rgba(33, 38, 45, 0.10);
}

body:not(.dark-mode) .service-panel-media {
    box-shadow: 0 18px 40px rgba(33, 38, 45, 0.16);
}

body:not(.dark-mode) .services-preview-bgnum {
    opacity: 1;
}

/* ---------- Projects ---------- */

body:not(.dark-mode) .project-browser {
    border-color: rgba(22, 28, 39, 0.12);
    box-shadow: 0 22px 50px rgba(33, 38, 45, 0.20);
}

body:not(.dark-mode) .project-cta-card::before {
    background: linear-gradient(115deg, transparent 30%, rgba(42, 86, 214, 0.06) 50%, transparent 70%);
}

/* ---------- Atmosphere: soft colour washes instead of flat cream ---------- */

body:not(.dark-mode) {
    background:
        radial-gradient(900px circle at 92% 0%, rgba(58, 104, 228, 0.13), transparent 55%),
        radial-gradient(800px circle at 0% 40%, rgba(112, 72, 196, 0.08), transparent 55%),
        radial-gradient(800px circle at 100% 85%, rgba(176, 130, 30, 0.10), transparent 55%),
        var(--color-background);
}

body:not(.dark-mode) .education,
body:not(.dark-mode) .skills {
    background: transparent;
}

body:not(.dark-mode) .about {
    background:
        radial-gradient(700px circle at 90% 10%, rgba(58, 104, 228, 0.10), transparent 60%),
        rgba(255, 251, 242, 0.38);
}

body:not(.dark-mode) .experience {
    background:
        radial-gradient(700px circle at 8% 85%, rgba(176, 130, 30, 0.12), transparent 60%),
        rgba(255, 251, 242, 0.38);
}

body:not(.dark-mode) .services {
    background:
        radial-gradient(700px circle at 85% 90%, rgba(112, 72, 196, 0.10), transparent 60%),
        radial-gradient(600px circle at 5% 5%, rgba(58, 104, 228, 0.08), transparent 60%),
        rgba(255, 251, 242, 0.38);
}

body:not(.dark-mode) .projects {
    background:
        radial-gradient(700px circle at 5% 0%, rgba(58, 104, 228, 0.09), transparent 60%),
        radial-gradient(700px circle at 100% 100%, rgba(176, 130, 30, 0.10), transparent 60%),
        rgba(255, 251, 242, 0.45);
}

body:not(.dark-mode) .footer {
    background: var(--color-background-soft);
}

/* ---------- Contact: light version of the closing card ---------- */

body:not(.dark-mode) .contact-wrapper {
    color: var(--color-text);
    border-color: rgba(42, 86, 214, 0.18);
    background:
        radial-gradient(520px circle at 100% 0%, rgba(58, 104, 228, 0.16), transparent 60%),
        radial-gradient(480px circle at 0% 100%, rgba(176, 130, 30, 0.14), transparent 60%),
        linear-gradient(120deg, #f4f1ea 0%, #eef0f8 55%, #f1ecf6 100%);
    box-shadow: 0 26px 60px rgba(60, 48, 20, 0.14);
}

body:not(.dark-mode) .contact-wrapper::before {
    background: radial-gradient(
        480px circle at var(--mx, 50%) var(--my, 50%),
        rgba(58, 104, 228, 0.12),
        transparent 60%
    );
}

body:not(.dark-mode) .contact-wrapper::after {
    background: radial-gradient(circle, rgba(58, 104, 228, 0.16), transparent 65%);
}

body:not(.dark-mode) .contact .section-label {
    color: var(--color-label);
}

body:not(.dark-mode) .contact-title span {
    background: linear-gradient(90deg, var(--color-primary), var(--color-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body:not(.dark-mode) .contact-description,
body:not(.dark-mode) .contact-availability {
    color: var(--color-text-light);
}

body:not(.dark-mode) .contact-link-row {
    border-color: var(--color-border-strong);
    background: rgba(255, 253, 249, 0.62);
}

body:not(.dark-mode) .contact-link-row::before {
    background: linear-gradient(115deg, transparent 30%, rgba(42, 86, 214, 0.08) 50%, transparent 70%);
}

body:not(.dark-mode) .contact-link-row:hover {
    border-color: rgba(42, 86, 214, 0.4);
    background: rgba(255, 253, 249, 0.95);
    box-shadow: 0 10px 26px rgba(42, 56, 110, 0.10);
}

body:not(.dark-mode) .contact-link-icon {
    background: rgba(42, 86, 214, 0.08);
    border-color: rgba(42, 86, 214, 0.2);
    color: var(--color-primary-dark);
}

body:not(.dark-mode) .contact-link-row:hover .contact-link-icon {
    background: rgba(42, 86, 214, 0.14);
    border-color: rgba(42, 86, 214, 0.4);
}

body:not(.dark-mode) .contact-link-title {
    color: var(--color-text);
}

body:not(.dark-mode) .contact-link-value {
    color: var(--color-text-light);
}

body:not(.dark-mode) .contact-link-hint {
    color: var(--color-text-muted);
}

body:not(.dark-mode) .contact-link-arrow {
    color: var(--color-text-light);
    background: rgba(40, 32, 15, 0.04);
    border-color: var(--color-border);
}

body:not(.dark-mode) .contact-link-row:hover .contact-link-arrow {
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    border-color: rgba(42, 86, 214, 0.4);
}

body:not(.dark-mode) .contact-circle {
    border-color: rgba(42, 86, 214, 0.14);
}

body:not(.dark-mode) .contact-circle.circle-three {
    border-color: rgba(112, 72, 196, 0.2);
}

body:not(.dark-mode) .contact-star {
    color: var(--color-accent);
    opacity: 0.85;
}


/* =========================================================
25. RESPONSIVE FIXES — TABLET / MOBILE / TOUCH

Placed after sections 18–22 and 24 on purpose: it overrides
them by order. It only fixes layout problems found on
tablets, phones and touch screens; the desktop design is
unchanged. (The full-screen mobile menu fixes live directly
inside section 18.)
========================================================= */

/* ---------- Global safety nets ---------- */

img,
svg,
video {
    max-width: 100%;
}

.hero-role,
.section-title,
.contact-title {
    overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   25.1 TABLET + MOBILE (<= 1000px)
--------------------------------------------------------- */

@media screen and (max-width: 1000px) {

    /* Comfortable touch targets for the header buttons */
    .theme-toggle,
    .menu-toggle {
        width: 42px;
        height: 42px;
    }
}

/* Short phones / landscape: tighter menu rows */
@media screen and (max-width: 1000px) and (max-height: 700px) {

    .nav-link {
        padding: 0.8rem 0.1rem;
        font-size: var(--text-xl);
    }
}


/* ---------------------------------------------------------
   25.2 TABLET (<= 900px) — hero stacks and centers,
        About becomes a single column
--------------------------------------------------------- */

@media screen and (max-width: 900px) {

    .hero {
        min-height: auto;
        padding: 125px 0 70px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-description {
        max-width: 560px;
    }

    .hero-buttons,
    .hero-socials {
        justify-content: center;
    }

    .hero-visual {
        min-height: 0;
    }

    .hero-visual-frame {
        top: 0;
        width: min(460px, 82vw);
    }

    /*
     * Background name: truly centered. The original animation
     * ended on `translateY(-50%)` only, which cancelled the
     * horizontal centering on small screens.
     */
    .hero-bg-name {
        left: 50%;
        font-size: clamp(3.4rem, 17vw, 8rem);
    }

    body.hero-ready .hero-bg-name {
        animation:
            heroBgNameInCentered 1.2s 0s cubic-bezier(0.22, 1, 0.36, 1) forwards,
            heroNameDriftCentered 14s 1.2s ease-in-out infinite;
    }

    @keyframes heroBgNameInCentered {
        from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    @keyframes heroNameDriftCentered {
        0%, 100% { transform: translate(-50%, -50%); }
        50%      { transform: translate(-50%, -50%) translateY(1.5%); }
    }

    .hero-circle {
        right: -30%;
    }

    /* About: single column, the card is no longer sticky */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-content {
        position: static;
        max-width: 100%;
    }
}


/* ---------------------------------------------------------
   25.3 TABLET ONLY (601px – 1000px)
--------------------------------------------------------- */

@media screen and (min-width: 601px) and (max-width: 1000px) {

    /* Services: 2 x 2 tab grid instead of a tall list */
    .services-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .service-tab {
        align-items: flex-start;
    }

    .service-tab:hover {
        transform: translateY(-3px);
    }

    .service-tab-desc {
        white-space: normal;
    }

    .service-tab-arrow {
        display: none;
    }

    /* Services: image beside the text instead of a giant poster */
    .service-panel {
        grid-template-columns: 1.1fr 1fr;
        gap: 1.75rem;
        align-items: center;
    }

    .service-panel-media {
        aspect-ratio: 1 / 1;
        height: auto;
        min-height: 0;
    }

    .services-preview-stage {
        min-height: 420px;
    }

    /*
     * Skills: 2 columns with no empty gaps —
     * Core (full row) / 02 | 03 / 04 | 05
     */
    .skill-card-core {
        grid-column: span 2;
    }

    .skill-card-wide {
        grid-column: span 1;
    }

    .project-body > p {
        max-width: 100%;
    }
}


/* ---------------------------------------------------------
   25.4 MOBILE (<= 600px)
--------------------------------------------------------- */

@media screen and (max-width: 600px) {

    /* Services: single column, wide image */
    .service-panel {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    .service-panel-media {
        aspect-ratio: 6 / 5;
        height: auto;
        min-height: 0;
    }

    .services-preview {
        padding: 1.1rem;
    }

    .services-preview-stage {
        min-height: 0;
    }

    .service-panel-tags {
        margin-bottom: 1.1rem;
    }

    .service-tab-arrow {
        display: none;
    }

    /* Skills */
    .skill-card-core {
        grid-column: span 1;
    }

    /* Projects: no 3D tilt on small screens */
    .project-browser,
    .project-card:hover .project-browser {
        transform: none;
    }

    /* Education / experience */
    .education-meta {
        flex-wrap: wrap;
    }

    .education-card:hover,
    .skill-card:hover {
        transform: none;
    }

    /* Contact */
    .contact-link-value {
        font-size: 0.7rem;
    }

    .contact-star {
        display: none;
    }

    .footer-container {
        gap: 1rem;
    }
}


/* ---------------------------------------------------------
   25.5 SMALL PHONES (<= 380px)
--------------------------------------------------------- */

@media screen and (max-width: 380px) {

    .logo {
        font-size: 1.05rem;
    }

    .hero-title {
        font-size: 2.1rem;
    }

    .hero-role {
        font-size: 1.85rem;
    }

    .section-title {
        font-size: 1.9rem;
    }

    .contact-wrapper {
        padding: 2rem 1.25rem;
    }

    .contact-title {
        font-size: 2.2rem;
    }

    .project-body,
    .projects-bento > .project-card:only-of-type .project-body {
        padding: 1.25rem;
    }
}


/* ---------------------------------------------------------
   25.6 LANDSCAPE PHONES (short screens)
--------------------------------------------------------- */

@media screen and (max-height: 520px) and (orientation: landscape) {

    .hero {
        min-height: auto;
        padding-top: 100px;
    }
}


/* ---------------------------------------------------------
   25.7 TOUCH DEVICES — no hover available
--------------------------------------------------------- */

@media (hover: none) {

    /* "View live" chip is always visible, since there is no hover */
    .project-media-chip {
        opacity: 1;
        transform: none;
    }

    /* Contact hint ("Opens Gmail") is useless without hover */
    .contact-link-hint {
        display: none;
    }
}


/* =========================================================
   26. LANGUAGE TOGGLE — BUTTON + ARABIC (RTL) STYLES

   Everything under html[lang="ar"] /
   html[dir="rtl"] only applies in Arabic mode, so the English
   design is untouched.
   ========================================================= */


/* ---------- Toggle button (same look as the theme toggle) ---------- */

.lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--color-text-light);
    background-color: var(--color-button-secondary);
    border: 1px solid var(--color-border);
    font-family: "Cairo", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    transition:
        transform var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.lang-toggle[data-target="en"] {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.lang-toggle:hover {
    transform: rotate(12deg);
    color: var(--color-text);
    background-color: var(--color-primary-soft);
    border-color: rgba(43, 98, 246, 0.3);
}

@media screen and (max-width: 1000px) {
    .lang-toggle {
        width: 42px;
        height: 42px;
    }
}


/* =========================================================
   ARABIC TYPOGRAPHY
   ========================================================= */

html[lang="ar"] {
    --font-body: "Cairo", "Plus Jakarta Sans", sans-serif;
    --font-display: "Cairo", "Plus Jakarta Sans", sans-serif;
}

/* Arabic letters must stay connected: no letter-spacing
   (the English name / logo keep theirs). */
html[lang="ar"] *:not(.logo):not(.hero-title):not(.hero-title *):not(.hero-bg-name):not(.preloader-logo) {
    letter-spacing: normal !important;
}

/* No fake italics on Arabic */
html[lang="ar"] .section-title span,
html[lang="ar"] .contact-title span,
html[lang="ar"] .preloader-welcome-accent,
html[lang="ar"] .hero-greeting,
html[lang="ar"] .timeline-index,
html[lang="ar"] .skill-card-index,
html[lang="ar"] .service-tab-index,
html[lang="ar"] .nav-link::before,
html[lang="ar"] .services-preview-bgnum {
    font-style: normal;
}

/* The job title stays English, so it keeps the Didone italic */
html[lang="ar"] .hero-role {
    font-family: var(--font-signature);
}

/* Arabic needs more line height than Latin headings */
html[lang="ar"] .section-title,
html[lang="ar"] .contact-title {
    line-height: 1.4;
}

html[lang="ar"] .hero-greeting {
    font-size: 1.25rem;
}

html[lang="ar"] .preloader-welcome-main {
    line-height: 1.4;
}


/* =========================================================
   RTL LAYOUT
   ========================================================= */

/* The name stays a left-to-right English signature */
html[dir="rtl"] .hero-title,
html[dir="rtl"] .preloader-footer {
    direction: ltr;
}

/* Arrows point the other way */
html[dir="rtl"] :is(.btn-icon, .service-tab-arrow, .contact-link-arrow, .project-cta-arrow) svg {
    transform: scaleX(-1);
}

html[dir="rtl"] .btn:hover .btn-icon,
html[dir="rtl"] .contact-link-row:hover .contact-link-arrow,
html[dir="rtl"] .project-cta-card:hover .project-cta-arrow {
    transform: translateX(-3px);
}

/* Timelines */
html[dir="rtl"] .about-timeline,
html[dir="rtl"] .experience-timeline {
    padding-left: 0;
    padding-right: 2.5rem;
}

/* Bullet lists */
html[dir="rtl"] .timeline-list li,
html[dir="rtl"] .project-features li {
    padding-left: 0;
    padding-right: 1.1rem;
}

html[dir="rtl"] .timeline-list li::before,
html[dir="rtl"] .project-features li::before {
    left: auto;
    right: 0;
}

/* Services */
html[dir="rtl"] .service-tab {
    text-align: right;
}

html[dir="rtl"] .service-tab::before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .service-tab:hover {
    transform: translateX(-4px);
}

html[dir="rtl"] .service-tab-arrow {
    transform: translateX(4px);
}

html[dir="rtl"] .services-preview-bgnum {
    right: auto;
    left: 4%;
}

html[dir="rtl"] .services-preview-glow {
    right: auto;
    left: -10%;
}

/* Projects */
html[dir="rtl"] .project-card::before {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, var(--project-accent), transparent);
}

html[dir="rtl"] .project-media-chip {
    right: auto;
    left: 1.1rem;
}

/* Contact */
html[dir="rtl"] .contact-link-hint {
    transform: translateX(4px);
}

html[dir="rtl"] .contact-link-row[data-type="email"] .contact-link-value {
    direction: ltr;
    text-align: right;
    unicode-bidi: isolate;
}


/* ---------- Mobile ---------- */

@media screen and (max-width: 700px) {

    html[dir="rtl"] .about-timeline,
    html[dir="rtl"] .experience-timeline {
        padding-right: 0;
    }
}

@media screen and (max-width: 600px) {

    html[dir="rtl"] .service-tab:hover {
        transform: none;
    }
}


/* ---------- Same look in both languages ---------- */

/* Background name "REMON": behind the portrait in English too
   (in Arabic the portrait is on the left, so the name stays left). */
@media screen and (min-width: 901px) {

    html:not([dir="rtl"]) .hero-bg-name {
        left: auto;
        right: -1%;
    }
}

/* Logo: the star always sits on the right of the name */
html[dir="rtl"] .logo,
html[dir="rtl"] .preloader-logo {
    direction: ltr;
    unicode-bidi: isolate;
}


/* =========================================================
23. BRAND STAR & FLOURISH — unified blue → purple

نفس تدرّج .hero-role بالظبط (primary-bright → purple)
للنجمة والخط اللي تحت الاسم ونجمة اللوجو في الـ Navbar.
لازم يفضل آخر حاجة في الملف عشان يغلب القواعد القديمة.
========================================================= */

/* ---------- نجمة الهيرو (جنب Awad) ---------- */
.hero-title .title-word:last-child::after {
    background: linear-gradient(90deg, var(--color-primary-bright), var(--color-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(59, 114, 255, 0.45));
}

/* ---------- الخط تحت الاسم ---------- */
.hero-title::after {
    background: linear-gradient(90deg, var(--color-primary-bright), var(--color-purple));
}

/* ---------- لوجو الـ Navbar (والـ Footer): النجمة بدل الدايرة ---------- */
.logo span {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.12em;
    font-size: 0.85em;
    line-height: 1;
    vertical-align: 0.5em;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
    text-indent: 0;
    color: transparent;
    transform: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo span::before {
    content: "\2726";
    position: absolute;
    inset: 0;
    display: block;
    text-align: center;
    background: linear-gradient(90deg, var(--color-primary-bright), var(--color-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 6px rgba(59, 114, 255, 0.45));
}

.logo:hover span {
    transform: rotate(90deg) scale(1.3);
    box-shadow: none;
}