/* =========================================================================
   Yusufcan Ulusoy — Portfolio
   Palette: blue → sky  (#3B82F6 · #60A5FA · #7DD3FC)

   >>> To retune the whole site's colour identity, change ONLY these three
       values in :root — --brand-1, --brand-2, --brand-3. Everything else
       (gradients, glows, borders, buttons) is derived from them. <<<
   ========================================================================= */

/* ------------------------------ 1. RESET ------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    /* 1rem = 10px */
    scroll-behavior: smooth;
    overflow-x: hidden;
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

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

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

ul {
    list-style: none;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: none;
}

button {
    cursor: pointer;
}

/* --------------------------- 2. DESIGN TOKENS -------------------------- */
:root {
    /* --- brand (edit these three) --- */
    --brand-1: 59 130 246;
    /* #3B82F6 blue      */
    --brand-2: 96 165 250;
    /* #60A5FA blue      */
    --brand-3: 125 211 252;
    /* #7DD3FC sky       */

    /* Ink used on top of brand-coloured surfaces. The blues are light enough
       that white text on them fails contrast, so these sit on dark ink. */
    --btn-ink: #06121f;

    --c1: rgb(var(--brand-1));
    --c2: rgb(var(--brand-2));
    --c3: rgb(var(--brand-3));

    --gradient: linear-gradient(135deg, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%);
    --gradient-r: linear-gradient(135deg, var(--c3) 0%, var(--c2) 52%, var(--c1) 100%);

    /* --- type --- */
    --font-display: "Sora", "Poppins", system-ui, sans-serif;
    --font-body: "Poppins", system-ui, -apple-system, sans-serif;

    /* --- shape & motion --- */
    --r-sm: 1.2rem;
    --r-md: 1.8rem;
    --r-lg: 2.6rem;
    --r-pill: 100px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 0.2s var(--ease);
    --t: 0.35s var(--ease);
    --t-slow: 0.6s var(--ease);

    --maxw: 1240px;
    --pad-x: clamp(2rem, 7vw, 10rem);
    --header-h: 8.4rem;
}

/* --------------------------- 3. DARK THEME ----------------------------- */
html[data-theme="dark"] {
    /* One flat near-black for the whole page — no gradients behind content. */
    --bg: #0b0b0d;
    --bg-alt: #0b0b0d;
    --surface: rgba(255, 255, 255, 0.05);
    --surface-2: rgba(255, 255, 255, 0.085);
    --border: rgba(59, 130, 246, 0.26);
    --border-soft: rgba(255, 255, 255, 0.1);

    --text: #eceef3;
    --text-soft: #c3c8d4;
    --text-mute: #8d93a3;

    --accent: var(--c2);

    --header-bg: rgba(11, 11, 13, 0.78);
    --shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.8);
    --glow: 0 0 34px -14px rgba(var(--brand-2), 0.4);
    --card-shadow: none;
}

/* --------------------------- 4. LIGHT THEME ---------------------------- */
html[data-theme="light"] {
    /* One flat light tone for the whole page. Swap both to #ffffff for pure white. */
    --bg: #f4f4f4;
    --bg-alt: #f4f4f4;
    --surface: #ffffff;
    --surface-2: #ffffff;
    --border: rgba(29, 78, 216, 0.2);
    --border-soft: rgba(15, 23, 42, 0.1);

    --text: #0f1420;
    --text-soft: #333a4a;
    --text-mute: #5a6273;

    --accent: #2563eb;

    --header-bg: rgba(244, 244, 244, 0.82);
    --shadow: 0 20px 50px -24px rgba(15, 23, 42, 0.3);
    --glow: 0 12px 30px -18px rgba(var(--brand-1), 0.35);
    --card-shadow: 0 6px 18px -12px rgba(15, 23, 42, 0.22);
}

/* Cards get a resting elevation in light mode, none in dark mode. */
.stat-card,
.skill-card,
.tl-card,
.project-card,
.service-card,
.ref-card,
.contact-info,
.contact-form input,
.contact-form textarea {
    box-shadow: var(--card-shadow);
}

/* ------------------------------ 5. BASE -------------------------------- */
body {
    font-family: var(--font-body);
    font-size: 1.6rem;
    line-height: 1.7;
    background: var(--bg);
    color: var(--text);
    transition: background var(--t), color var(--t);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    font-weight: 700;
}

::selection {
    background: var(--c2);
    color: var(--btn-ink);
}

.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 1rem 2rem;
    background: var(--c1);
    color: var(--btn-ink);
    border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
    left: 0;
}

:focus-visible {
    outline: 2px solid var(--c2);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ----------------------------- 6. HEADER ------------------------------- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-h);
    padding: 0 var(--pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    z-index: 50;
    background: transparent;
    transition: background var(--t), box-shadow var(--t), border-color var(--t);
    border-bottom: 1px solid transparent;
}

.header.scrolled {
    background: var(--header-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--border-soft);
    box-shadow: 0 8px 30px -18px rgba(0, 0, 0, 0.5);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 1.1rem;
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.logo-mark {
    display: grid;
    place-items: center;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 1.1rem;
    background: var(--gradient);
    color: var(--btn-ink);
    font-weight: 800;
    font-size: 2rem;
    box-shadow: var(--glow);
    transition: transform var(--t);
}

.logo:hover .logo-mark {
    transform: rotate(-8deg) scale(1.06);
}

.logo-text b {
    font-weight: 800;
}

.navbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.navbar a {
    position: relative;
    padding: 0.8rem 1.4rem;
    font-size: 1.5rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--text-soft);
    border-radius: var(--r-pill);
    transition: color var(--t-fast), background var(--t-fast);
}

.navbar a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.2rem;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient);
    transform: translateX(-50%);
    transition: width var(--t);
}

/* Hovering a nav item colours it and draws the underline in. */
.navbar a:hover {
    color: var(--accent);
}

.navbar a.active {
    color: var(--accent);
    font-weight: 600;
}

.navbar a:hover::after,
.navbar a.active::after {
    width: 55%;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

/* --- language switch --- */
.lang-switch {
    position: relative;
    display: flex;
    padding: 0.35rem;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--border-soft);
}

.lang-btn {
    position: relative;
    z-index: 1;
    padding: 0.5rem 1.2rem;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-mute);
    border-radius: var(--r-pill);
    transition: color var(--t-fast);
}

.lang-btn.is-active {
    color: var(--btn-ink);
}

.lang-thumb {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    width: calc(50% - 0.35rem);
    height: calc(100% - 0.7rem);
    border-radius: var(--r-pill);
    background: var(--gradient);
    box-shadow: var(--glow);
    transition: transform var(--t);
}

.lang-switch[data-active="tr"] .lang-thumb {
    transform: translateX(100%);
}

/* --- theme toggle --- */
.theme-toggle,
.menu-toggle {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    font-size: 2rem;
    color: var(--text);
    transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.theme-toggle:hover,
.menu-toggle:hover {
    background: var(--surface-2);
    border-color: var(--border);
    transform: translateY(-2px);
}

.theme-toggle i {
    grid-area: 1 / 1;
    transition: opacity var(--t), transform var(--t);
}

html[data-theme="dark"] .icon-sun,
html[data-theme="light"] .icon-moon {
    opacity: 1;
    transform: rotate(0) scale(1);
}

html[data-theme="dark"] .icon-moon,
html[data-theme="light"] .icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.4);
}

.menu-toggle {
    display: none;
}

/* ---------------------------- 8. SECTIONS ------------------------------ */
section {
    position: relative;
    padding: clamp(7rem, 12vh, 12rem) var(--pad-x);
    scroll-margin-top: var(--header-h);
}

.section-head {
    max-width: 70rem;
    margin: 0 auto clamp(4rem, 7vh, 6.5rem);
    text-align: center;
}

.eyebrow {
    display: inline-block;
    padding: 0.5rem 1.6rem;
    margin-bottom: 1.6rem;
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(var(--brand-2), 0.1);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
}

.heading {
    font-size: clamp(3.2rem, 5.5vw, 5rem);
    letter-spacing: -0.03em;
    font-weight: 800;
}

.section-sub {
    margin-top: 1.4rem;
    font-size: 1.7rem;
    color: var(--text-mute);
}

/* ----------------------------- 9. BUTTONS ------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.35rem 3rem;
    font-size: 1.55rem;
    font-weight: 600;
    border-radius: var(--r-pill);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t);
}

.btn i {
    font-size: 1.9rem;
}

.btn-primary {
    background: var(--gradient);
    background-size: 180% 180%;
    color: var(--btn-ink);
    box-shadow: 0 12px 34px -12px rgba(var(--brand-2), 0.8);
}

.btn-primary:hover {
    background-position: 100% 0;
    transform: translateY(-3px);
    box-shadow: 0 18px 44px -12px rgba(var(--brand-3), 0.85);
}

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

.btn-ghost:hover {
    transform: translateY(-3px);
    border-color: var(--c2);
    box-shadow: var(--glow);
}

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

/* --------------------------- 10. SOCIAL ICONS -------------------------- */
.social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.social-icons a {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    font-size: 2.1rem;
    border-radius: 50%;
    color: var(--accent);
    background: var(--surface);
    border: 1.5px solid var(--border);
    transition: transform var(--t), color var(--t-fast), background var(--t), box-shadow var(--t);
}

.social-icons a:hover {
    color: var(--btn-ink);
    background: var(--gradient);
    transform: translateY(-5px) scale(1.08);
    box-shadow: var(--glow);
}

/* ------------------------------ 11. HOME ------------------------------- */
.home {
    min-height: 100svh;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: clamp(3rem, 6vw, 8rem);
    padding-top: calc(var(--header-h) + 4rem);
}

.home h1 {
    margin: 0 0 1rem;
    font-size: clamp(3.8rem, 6.4vw, 6.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
}

.home h1 .gradient-text {
    display: block;
}

.typed-line {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 600;
    color: var(--text-soft);
    min-height: 1.4em;
}

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

.caret {
    display: inline-block;
    width: 3px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--gradient);
    animation: blink 1s steps(2) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.home-bio {
    max-width: 58rem;
    margin: 2.2rem 0 3rem;
    color: var(--text-mute);
    font-size: 1.65rem;
}

.home .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 3rem;
}

.home-img {
    position: relative;
    display: grid;
    place-items: center;
    /* match the photo, so the ring scales with it instead of the grid column */
    width: min(38rem, 100%);
    margin-inline: auto;
}

.home-img img {
    width: min(38rem, 100%);
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid transparent;
    background: var(--bg) padding-box, var(--gradient) border-box;
    box-shadow: var(--glow), var(--shadow);
    transition: transform var(--t-slow);
}

.home-img img:hover {
    transform: scale(1.04) rotate(2deg);
}

.img-ring {
    position: absolute;
    width: min(46rem, 118%);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1.5px dashed var(--border);
    animation: spin 18s linear infinite;
}

.img-ring::before,
.img-ring::after {
    content: "";
    position: absolute;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--gradient);
    box-shadow: 0 0 18px -2px rgba(var(--brand-2), 0.75);
}

.img-ring::before {
    top: -0.95rem;
    left: 50%;
    transform: translateX(-50%);
}

.img-ring::after {
    bottom: -0.95rem;
    left: 50%;
    transform: translateX(-50%);
}

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

/* ------------------------------ 12. ABOUT ------------------------------ */
.about-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(3rem, 5vw, 6rem);
    align-items: start;
    max-width: var(--maxw);
    margin: 0 auto;
}

.about-text p {
    margin-bottom: 1.8rem;
    color: var(--text-mute);
}

.about-text .lead {
    font-family: var(--font-display);
    font-size: 2.1rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--text);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}

.stat-card {
    padding: 2.6rem 2rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--border);
    box-shadow: var(--glow);
}

.stat-value {
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 1.35rem;
    color: var(--text-mute);
    line-height: 1.4;
}

/* ------------------------------ 13. SKILLS ----------------------------- */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 2.2rem;
    /* narrower than --maxw so six cards land as 3 x 2, not 4 + an orphan */
    max-width: 102rem;
    margin: 0 auto;
}

.skill-card {
    position: relative;
    padding: 3rem 2.6rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.skill-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t);
}

.skill-card:hover {
    transform: translateY(-6px);
    border-color: var(--border);
    box-shadow: var(--shadow), var(--glow);
}

.skill-card:hover::before {
    transform: scaleX(1);
}

.skill-icon {
    display: grid;
    place-items: center;
    width: 5.2rem;
    height: 5.2rem;
    margin-bottom: 1.8rem;
    font-size: 2.6rem;
    color: var(--btn-ink);
    background: var(--gradient);
    border-radius: var(--r-sm);
    box-shadow: var(--glow);
}

.skill-card h3 {
    font-size: 2rem;
    margin-bottom: 1.6rem;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.chip {
    padding: 0.5rem 1.3rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-soft);
    background: rgba(var(--brand-2), 0.09);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    transition: color var(--t-fast), background var(--t-fast);
}

.chip:hover {
    color: var(--btn-ink);
    background: var(--gradient);
}

/* ---------------------------- 14. TIMELINE ----------------------------- */
.timeline {
    position: relative;
    max-width: 105rem;
    margin: 0 auto;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, var(--c1), var(--c3), transparent);
}

.tl-item {
    position: relative;
    width: 50%;
    padding-right: 5rem;
    margin-bottom: 4rem;
}

.tl-item:nth-child(even) {
    margin-left: 50%;
    padding-right: 0;
    padding-left: 5rem;
    text-align: left;
}

.tl-item:nth-child(odd) {
    text-align: right;
}

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

.tl-dot {
    position: absolute;
    top: 2.4rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--gradient);
    border: 3px solid var(--bg-alt);
    box-shadow: var(--glow);
}

.tl-item:nth-child(odd) .tl-dot {
    right: -0.9rem;
}

.tl-item:nth-child(even) .tl-dot {
    left: -0.9rem;
}

.tl-card {
    padding: 2.6rem 2.8rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.tl-card:hover {
    transform: translateY(-4px);
    border-color: var(--border);
    box-shadow: var(--shadow), var(--glow);
}

.tl-type {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 1.1rem;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(var(--brand-2), 0.1);
    border-radius: var(--r-pill);
}

.tl-date {
    display: block;
    margin: 1.2rem 0 0.6rem;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-mute);
}

.tl-card h3 {
    font-size: 1.95rem;
    margin-bottom: 0.4rem;
}

.tl-place {
    font-size: 1.45rem;
    font-weight: 600;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tl-desc {
    margin-top: 1.2rem;
    font-size: 1.45rem;
    color: var(--text-mute);
}

/* ---------------------------- PROJECTS --------------------------------- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 2.4rem;
    /* matches the skills grid so six cards land as 3 x 2 */
    max-width: 102rem;
    margin: 0 auto;
}

.project-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: var(--border);
    box-shadow: var(--shadow), var(--glow);
}

.project-cover {
    position: relative;
    aspect-ratio: 16 / 6;
    display: grid;
    place-items: center;
    background: var(--gradient);
    overflow: hidden;
}

.project-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.3), transparent 55%),
        radial-gradient(circle at 78% 85%, rgba(6, 18, 31, 0.22), transparent 60%);
}

.project-cover i {
    position: relative;
    z-index: 1;
    font-size: 4.6rem;
    color: var(--btn-ink);
}

.project-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2.6rem;
    gap: 1.4rem;
}

.project-body h3 {
    font-size: 1.95rem;
}

.project-body p {
    font-size: 1.45rem;
    color: var(--text-mute);
    flex: 1;
}

.project-links {
    display: flex;
    gap: 1.8rem;
    margin-top: auto;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border-soft);
}

.project-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--accent);
    transition: gap var(--t-fast);
}

.project-links a:hover {
    gap: 1rem;
}

/* ---------------------------- 16. SERVICES ----------------------------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
    gap: 2.2rem;
    max-width: var(--maxw);
    margin: 0 auto;
}

.service-card {
    position: relative;
    padding: 3.4rem 2.8rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.service-card::after {
    content: "";
    position: absolute;
    inset: auto -30% -60% auto;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: var(--gradient);
    opacity: 0;
    filter: blur(60px);
    transition: opacity var(--t);
}

.service-card:hover {
    transform: translateY(-6px);
    border-color: var(--border);
    box-shadow: var(--shadow);
}

.service-card:hover::after {
    opacity: 0.35;
}

.service-card>* {
    position: relative;
    z-index: 1;
}

.service-num {
    position: absolute;
    top: 1.6rem;
    right: 2.2rem;
    font-family: var(--font-display);
    font-size: 4.4rem;
    font-weight: 800;
    color: var(--text);
    opacity: 0.07;
    z-index: 0;
}

.service-icon {
    display: grid;
    place-items: center;
    width: 5.6rem;
    height: 5.6rem;
    margin-bottom: 2rem;
    font-size: 2.8rem;
    color: var(--accent);
    background: rgba(var(--brand-2), 0.12);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: background var(--t), color var(--t);
}

.service-card:hover .service-icon {
    color: var(--btn-ink);
    background: var(--gradient);
}

.service-card h3 {
    font-size: 2.1rem;
    margin-bottom: 1rem;
}

.service-card p {
    font-size: 1.45rem;
    color: var(--text-mute);
}

/* --------------------------- 17. REFERENCES ---------------------------- */
.references-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
    gap: 2.4rem;
    max-width: 102rem;
    margin: 0 auto;
}

.ref-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.6rem;
    padding: 3.4rem 2.6rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    transition: transform var(--t), border-color var(--t), box-shadow var(--t);
}

.ref-card:hover {
    transform: translateY(-6px);
    border-color: var(--border);
    box-shadow: var(--shadow), var(--glow);
}

.ref-avatar {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: var(--gradient);
    color: var(--btn-ink);
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: var(--glow);
}

.ref-meta h3 {
    font-size: 2rem;
}

.ref-meta span {
    font-size: 1.4rem;
    color: var(--text-mute);
}

.ref-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: auto;
    padding: 0.9rem 1.9rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--accent);
    border: 1.5px solid var(--border);
    border-radius: var(--r-pill);
    transition: color var(--t-fast), background var(--t), border-color var(--t-fast);
}

.ref-link i {
    font-size: 1.8rem;
}

.ref-link:hover {
    color: var(--btn-ink);
    background: var(--gradient);
    border-color: transparent;
}

/* ---------------------------- 18. CONTACT ------------------------------ */
.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2.4rem, 4vw, 4rem);
    max-width: var(--maxw);
    margin: 0 auto;
    /* stretch, not start — so the details card ends level with the form */
    align-items: stretch;
}

.contact-info {
    display: flex;
    flex-direction: column;
    padding: 3.4rem 3rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
}

.contact-info h3 {
    font-size: 2.2rem;
    margin-bottom: 2.6rem;
}

.contact-info ul {
    display: grid;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* takes up the slack when the card is taller than its content */
.contact-info .social-icons {
    margin-top: auto;
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.contact-info li i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 4.4rem;
    height: 4.4rem;
    font-size: 2.1rem;
    color: var(--accent);
    background: rgba(var(--brand-2), 0.12);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.contact-info .ci-label {
    display: block;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.contact-info .ci-value {
    font-size: 1.55rem;
    font-weight: 500;
    word-break: break-word;
}

a.ci-value:hover {
    color: var(--accent);
}

.contact-form {
    position: relative;
    display: grid;
    gap: 1.6rem;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1.7rem 2rem;
    font-size: 1.55rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--r-md);
    resize: vertical;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--text-mute);
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--c2);
    box-shadow: 0 0 0 4px rgba(var(--brand-2), 0.15);
}

.contact-form input.invalid,
.contact-form textarea.invalid {
    border-color: #ef4444;
}

/* Send button anchored inside the message box, bottom-right. */
.message-box {
    position: relative;
    display: grid;
}

.message-box textarea {
    /* leave room so typed text never runs underneath the button */
    padding-bottom: 7.5rem;
    min-height: 20rem;
    /* the drag handle would sit under the button, so drop it */
    resize: none;
}

.message-box .btn {
    position: absolute;
    right: 1.4rem;
    bottom: 1.4rem;
    z-index: 1;
}

/* honeypot — must never be visible or focusable */
.hp {
    display: none !important;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Sits just below the form without adding to its height, so the details card
   beside it lines up exactly with the bottom of the message box. */
.form-note {
    position: absolute;
    top: calc(100% + 1.2rem);
    left: 0;
    right: 0;
    min-height: 2.2rem;
    font-size: 1.4rem;
    color: var(--text-mute);
}

.form-note.error {
    color: #ef4444;
}

.form-note.ok {
    color: var(--accent);
}

/* ----------------------------- 19. FOOTER ------------------------------ */
.footer {
    padding: 6rem var(--pad-x) 3rem;
    background: var(--bg-alt);
    border-top: 1px solid var(--border-soft);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 4rem;
    max-width: var(--maxw);
    margin: 0 auto 4rem;
}

.footer-brand p {
    margin-top: 1.6rem;
    max-width: 34rem;
    font-size: 1.45rem;
    color: var(--text-mute);
}

.footer h4 {
    margin-bottom: 1.8rem;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.footer-links ul {
    display: grid;
    gap: 1rem;
}

.footer-links a {
    font-size: 1.5rem;
    color: var(--text-soft);
    transition: color var(--t-fast), padding-left var(--t-fast);
}

.footer-links a:hover {
    color: var(--accent);
    padding-left: 0.6rem;
}

.copyright {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-top: 3rem;
    border-top: 1px solid var(--border-soft);
    text-align: center;
    font-size: 1.35rem;
    color: var(--text-mute);
}

/* ---------------------------- 20. TO TOP ------------------------------- */
.to-top {
    position: fixed;
    right: 2.4rem;
    bottom: 2.4rem;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 4.8rem;
    height: 4.8rem;
    font-size: 2.4rem;
    color: var(--btn-ink);
    background: var(--gradient);
    border-radius: 50%;
    box-shadow: var(--glow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1.5rem);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
}

.to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top:hover {
    transform: translateY(-4px) scale(1.06);
}

/* --------------------------- 21. SCROLLBAR ----------------------------- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-alt);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient);
    border-radius: 10px;
}

/* --------------------------- 22. REVEAL ANIM --------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
    will-change: opacity, transform;
}

/* Directional entrances — used for the two-column blocks and the timeline,
   where a side is meaningful. Everything else keeps the gentle rise. */
.reveal.from-left {
    transform: translateX(-4.5rem);
}

.reveal.from-right {
    transform: translateX(4.5rem);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* --------------------------- 23. RESPONSIVE ---------------------------- */
@media (max-width: 1340px) {
    .navbar {
        gap: 0.2rem;
    }

    .navbar a {
        padding: 0.8rem 0.9rem;
        font-size: 1.4rem;
    }

    /* the wordmark goes first — the nav labels matter more than the logo text */
    .logo-text {
        display: none;
    }
}

@media (max-width: 992px) {
    :root {
        --header-h: 7.4rem;
    }

    .menu-toggle {
        display: grid;
    }

    .navbar {
        position: absolute;
        top: 100%;
        right: var(--pad-x);
        left: var(--pad-x);
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding: 1.4rem;
        background: var(--header-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-1rem);
        transition: opacity var(--t), transform var(--t), visibility var(--t);
    }

    .navbar.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .navbar a {
        padding: 1.2rem 1.6rem;
        font-size: 1.6rem;
        text-align: left;
    }

    .navbar a::after {
        display: none;
    }

    .navbar a.active {
        background: rgba(var(--brand-2), 0.14);
        color: var(--accent);
    }

    .logo-text {
        display: inline;
    }

    .home {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: calc(var(--header-h) + 6rem);
    }

    .home-content {
        order: 2;
    }

    .home-img {
        order: 1;
        margin-bottom: 3rem;
    }

    .home-bio {
        margin-inline: auto;
    }

    .home .btn-group,
    .home .social-icons {
        justify-content: center;
    }

    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    /* timeline collapses to a single left rail */
    .timeline::before {
        left: 0.7rem;
    }

    .tl-item,
    .tl-item:nth-child(even),
    .tl-item:nth-child(odd) {
        width: 100%;
        margin-left: 0;
        padding-left: 3.6rem;
        padding-right: 0;
        text-align: left;
    }

    .tl-item:nth-child(odd) .tl-dot,
    .tl-item:nth-child(even) .tl-dot {
        left: 0;
        right: auto;
    }
}

@media (max-width: 620px) {
    html {
        font-size: 58%;
    }

    /* the orbit ring hugs the photo more closely so it clears a 320px screen */
    .img-ring {
        width: 104%;
    }

    .header-actions {
        gap: 0.7rem;
    }

    .logo-text {
        display: none;
    }

    .field-row {
        grid-template-columns: 1fr;
    }

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

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

    .btn {
        padding: 1.2rem 2.4rem;
    }
}

/* ------------------------ 24. REDUCED MOTION --------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Movement is what triggers motion sensitivity, not opacity — so keep a
       plain cross-fade rather than removing the entrance entirely. */
    .reveal {
        transform: none !important;
        transition: opacity 0.4s ease !important;
    }

    .reveal:not(.visible) {
        opacity: 0;
    }

    /* The orbiting ring and the typing caret are signature motion rather than
       decoration, so they keep running even when the OS asks for less motion.
       Everything else above is still stopped. */
    .img-ring {
        animation: spin 18s linear infinite !important;
    }

    .caret {
        animation: blink 1s steps(2) infinite !important;
    }
}

/* --------------------------- 25. PRINT --------------------------------- */
@media print {

    .header,
    .to-top,
    .contact-form,
    .footer-social {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
    }
}