/* ============================================================
   Ahmed Abo Dooh — Portfolio Frontend
   Solid palette · Inter only · JCREA-style navbar
   No gradients. Drop-in entrance animation.
   ============================================================ */

:root {
    --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    /* ============================================================
       THEME TOKENS — single source of truth.
       Override any of these from the admin panel (or via inline
       <style id="theme-override">) to re-skin the entire site.
       RGB-tuple twins (`*-rgb`) are used for rgba() compositions.
       ============================================================ */
    --theme-primary:           #20B15A;
    --theme-primary-rgb:       32, 177, 90;
    --theme-primary-deep:      #0E8A43;
    --theme-primary-deep-rgb:  14, 138, 67;
    --theme-primary-soft:      #48B774;
    --theme-primary-soft-rgb:  72, 183, 116;
    --theme-primary-mist:      #7ED6A0;
    --theme-primary-mist-rgb:  126, 214, 160;
    --theme-primary-forest:      #14532D;
    --theme-primary-forest-rgb:  20, 83, 45;
    --theme-primary-tint:      #D7F5DC;

    --theme-ink:               #130F26;
    --theme-ink-rgb:           19, 15, 38;
    --theme-ink-2:             #333333;
    --theme-ink-3:             #6B6B6B;
    --theme-ink-4:             #C4C4C4;
    --theme-surface:           #FFFFFF;
    --theme-bg:                #F9F9F9;
    --theme-error:             #DC2626;

    /* Legacy brand aliases — keep pointing at theme tokens so
       existing rules inherit changes made from the admin panel. */
    --brand:           var(--theme-primary);
    --brand-dark:      var(--theme-primary-soft);
    --brand-deep:      var(--theme-primary-deep);
    --brand-soft:      var(--theme-primary-mist);
    --brand-forest:    var(--theme-primary-forest);
    --brand-tint:      var(--theme-primary-tint);
    --brand-lavender:  #E6E4FF;
    --orange:          var(--theme-primary-deep);

    /* Neutrals (aliased from theme) */
    --navy:    var(--theme-ink);
    --ink:     var(--theme-ink);
    --ink-2:   var(--theme-ink-2);
    --ink-3:   var(--theme-ink-3);
    --ink-4:   var(--theme-ink-4);
    --surface: var(--theme-surface);
    --bg:      var(--theme-bg);

    --white: #FFFFFF;
    --black: #000000;

    /* Tokens */
    --border:  rgba(var(--theme-ink-rgb), 0.08);
    --shadow-sm:  0 2px 8px -2px rgba(var(--theme-ink-rgb),0.08);
    --shadow:     0 14px 32px -12px rgba(var(--theme-ink-rgb),0.12);
    --shadow-lg:  0 30px 70px -20px rgba(var(--theme-ink-rgb),0.18);
    --shadow-xl:  0 40px 90px -20px rgba(var(--theme-primary-rgb),0.25);

    --max-wide:   1480px;
    --max-narrow: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

html.dark, html.dark body { background: var(--navy); color: var(--white); }

::selection { background: var(--brand); color: var(--white); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 10px; border: 2px solid var(--bg); }

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; border: 0; background: transparent; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }

/* ---------- Layout ---------- */
.container-wide   { margin: 0 auto; width: 100%; max-width: var(--max-wide);   padding: 0 14px; }
.container-narrow { margin: 0 auto; width: 100%; max-width: var(--max-narrow); padding: 0 14px; }
@media (min-width: 640px) { .container-wide, .container-narrow { padding: 0 20px; } }

/* ---------- Display headings use Inter italic (not a separate serif) ---------- */
.display-italic { font-style: italic; font-weight: 600; letter-spacing: -0.02em; }

/* ---------- Utility classes ---------- */
.flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; }
.gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-x-3 { column-gap: .75rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }  .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 1.75rem; }  .mt-10 { margin-top: 2.25rem; } .mt-16 { margin-top: 3.75rem; }
.mb-2 { margin-bottom: .5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; }
.p-6 { padding: 1.5rem; } .p-8 { padding: 1.75rem; } .p-10 { padding: 2.25rem; }
.py-24 { padding-top: 5.25rem; padding-bottom: 5.25rem; } .pt-16 { padding-top: 3.5rem; } .pt-20 { padding-top: 4.25rem; } .pt-24 { padding-top: 5.25rem; }
.pb-8 { padding-bottom: 1.75rem; } .pb-12 { padding-bottom: 2.5rem; } .pb-16 { padding-bottom: 3.5rem; } .pb-24 { padding-bottom: 5.25rem; } .pb-32 { padding-bottom: 6.75rem; }
.w-full { width: 100%; } .h-full { height: 100%; } .min-w-0 { min-width: 0; }
.max-w-xs { max-width: 20rem; } .max-w-sm { max-width: 24rem; }
.max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-md { max-width: 28rem; }
.shrink-0 { flex-shrink: 0; } .relative { position: relative; } .absolute { position: absolute; } .inset-0 { inset: 0; }
.overflow-hidden { overflow: hidden; }
.rounded-full { border-radius: 9999px; } .rounded-xl { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-4xl { border-radius: 2rem; }

.text-xs { font-size: .75rem; } .text-sm { font-size: .875rem; } .text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; } .text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; } .text-7xl { font-size: 4.5rem; } .text-8xl { font-size: 6rem; }
.font-mono { font-family: var(--font-mono); }
.font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-widest { letter-spacing: 0.1em; }
.widest { letter-spacing: .25em; }
.leading-none { line-height: 1; } .leading-tight { line-height: 1.25; } .leading-relaxed { line-height: 1.6; }

.muted   { color: var(--ink-2); }
.muted-2 { color: var(--ink-3); }
.small { font-size: .875rem; }
.mono-xs { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.accent { color: var(--brand); }
/* Solid-color "accent" replacement for former gradient text */
.grad-text { color: var(--brand); font-style: italic; }
.alt-text  { color: var(--orange); font-style: italic; }

/* Grids */
.grid { display: grid; }
.grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-9 { grid-column: span 9 / span 9; }
@media (max-width: 767px) {
    .grid-12 { grid-template-columns: 1fr; }
    .col-span-3, .col-span-9 { grid-column: auto; }
}
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .md-text-3xl { font-size: 1.875rem; }
    .md-text-6xl { font-size: 3.75rem; }
    .md-text-7xl { font-size: 4.5rem; }
    .md-text-8xl { font-size: 6rem; }
    .md-gap-8 { gap: 1.75rem; }
    .md-col-9 { grid-column: span 9 / span 9; }
}

.exp-body { border-top: 1px solid var(--border); padding-top: 1rem; }
@media (min-width: 768px) {
    .exp-body { border-top: 0; padding-top: 0; border-left: 1px solid var(--border); padding-left: 2rem; }
}

.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-10 > * + * { margin-top: 2.25rem; }
.space-y-12 > * + * { margin-top: 2.5rem; }

/* ============================================================
   AMBIENT BACKGROUND — clean, solid-based
   ============================================================ */
.ambient-bg {
    position: fixed; inset: 0; z-index: -1; overflow: hidden;
    background: var(--bg);
}
html.dark .ambient-bg { background: var(--navy); }
.ambient-bg::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(19,15,38,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(19,15,38,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6), transparent 75%);
}
html.dark .ambient-bg::before {
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* Subtle solid-color floating blobs (top-left one removed — too visible near navbar) */
.ambient-orb {
    position: absolute; border-radius: 50%;
    opacity: 0.1;
    filter: blur(100px);
    animation: drift 24s ease-in-out infinite;
    pointer-events: none;
}
.ambient-orb.one   { display: none; }
.ambient-orb.two   { width: 520px; height: 520px; top: 40%; right: -8%; background: var(--brand); animation-delay: -8s; }
.ambient-orb.three { width: 420px; height: 420px; bottom: -10%; left: 35%; background: var(--orange); animation-delay: -16s; }
@keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.05); }
    66%      { transform: translate(-30px, 20px) scale(0.95); }
}

/* ============================================================
   TOP NAV — JCREA-style pill container
   ============================================================ */
.topnav {
    position: sticky; top: 18px; z-index: 40;
    padding: 0 12px;
    margin-top: 20px;
}
@media (min-width: 640px) {
    .topnav { top: 26px; padding: 0 16px; margin-top: 28px; }
}
.topnav-inner {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(215, 245, 220, 0.55);   /* brand-tint translucent */
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(32, 177, 90, 0.18);
    border-radius: 9999px;
    padding: .5rem .75rem;
    gap: .25rem;
    box-shadow: 0 12px 32px -14px rgba(19,15,38,0.14);
}
@media (max-width: 640px) {
    .topnav-inner { padding: .35rem .5rem; gap: .15rem; }
}
.topnav-brand {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--navy);
    padding: .5rem .75rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: .9375rem;
}
/* Logos — mini 3D chunky cubes */
.topnav-logo,
.topnav-center-logo {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: linear-gradient(150deg,
        rgb(var(--theme-primary-rgb)) 0%,
        rgb(var(--theme-primary-deep-rgb)) 100%);
    color: var(--white);
    font-style: italic;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow:
        0  1px 0 rgba(var(--theme-primary-forest-rgb), .95),
        0  2px 0 rgba(var(--theme-primary-forest-rgb), .90),
        0  3px 0 rgba(var(--theme-primary-forest-rgb), .85),
        0  4px 0 rgba(var(--theme-primary-forest-rgb), .80),
        0 10px 18px -4px rgba(var(--theme-primary-deep-rgb), .40),
        inset 0  1px 0 rgba(255, 255, 255, .40),
        inset 1px 0 0 rgba(255, 255, 255, .18),
        inset 0 -2px 6px rgba(0, 0, 0, .15);
    transition: transform .3s cubic-bezier(.2,.9,.25,1.15), box-shadow .3s ease;
}
.topnav-logo { width: 2rem; height: 2rem; font-size: 1.05rem; }
.topnav-center-logo { width: 2.35rem; height: 2.35rem; font-size: 1.2rem; }

.topnav-brand:hover .topnav-logo,
.topnav-center:hover .topnav-center-logo {
    transform: translateY(-2px) rotate(-3deg);
    box-shadow:
        0  1px 0 rgba(var(--theme-primary-forest-rgb), .95),
        0  2px 0 rgba(var(--theme-primary-forest-rgb), .90),
        0  3px 0 rgba(var(--theme-primary-forest-rgb), .85),
        0  4px 0 rgba(var(--theme-primary-forest-rgb), .80),
        0  5px 0 rgba(var(--theme-primary-forest-rgb), .75),
        0 14px 22px -4px rgba(var(--theme-primary-deep-rgb), .55),
        inset 0  1px 0 rgba(255, 255, 255, .50),
        inset 1px 0 0 rgba(255, 255, 255, .22),
        inset 0 -2px 6px rgba(0, 0, 0, .18);
}

.topnav-center {
    display: inline-flex; align-items: center;
    padding: 0 .75rem;
}
@media (max-width: 899px) {
    .topnav-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 0;
    }
}

.topnav-links {
    display: none; align-items: center; gap: .125rem;
    font-size: .875rem; font-weight: 500;
}
@media (min-width: 900px) { .topnav-links { display: flex; } }
.topnav-link {
    color: var(--navy);
    padding: .5rem .9rem;
    border-radius: 9999px;
    opacity: 0.78;
    transition: all .2s ease;
}
.topnav-link:hover { opacity: 1; }
.topnav-link.is-active {
    background: var(--brand);
    color: var(--white);
    opacity: 1;
    font-weight: 600;
    box-shadow: 0 4px 12px -4px rgba(32, 177, 90, 0.45);
}

.topnav-actions { display: flex; align-items: center; gap: .375rem; }
.topnav-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 9999px;
    border: 0;
    color: var(--navy);
    background: transparent;
    opacity: 0.75;
    transition: all .2s ease;
    flex-shrink: 0;
}
.topnav-iconbtn:hover {
    background: rgba(19,15,38,0.08);
    opacity: 1;
}
.topnav-iconbtn svg { width: 1rem; height: 1rem; }
@media (max-width: 640px) {
    .topnav-iconbtn { width: 1.9rem; height: 1.9rem; }
    .topnav-iconbtn svg { width: .9rem; height: .9rem; }
}

/* Music toggle — visible on all screens when music is configured */
.topnav-music {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 9999px;
    color: var(--navy);
    background: transparent;
    border: 0;
    opacity: .75;
    transition: background .2s ease, opacity .2s ease, transform .3s cubic-bezier(.2,.9,.25,1.15);
    cursor: pointer;
    flex-shrink: 0;
}
.topnav-music:hover { background: rgba(19,15,38,0.08); opacity: 1; transform: scale(1.05); }
@media (max-width: 640px) {
    .topnav-music { width: 1.9rem; height: 1.9rem; }
    .topnav-music .music-icon { width: .9rem; height: .9rem; }
}
.topnav-music[hidden] { display: none; }
.topnav-music.is-playing {
    color: rgb(var(--theme-primary-rgb));
    opacity: 1;
    background: rgba(var(--theme-primary-rgb), .12);
}

/* Show ▶ icon when paused, 3-bar equalizer when playing */
.topnav-music .music-icon       { width: 1rem; height: 1rem; display: block; }
.topnav-music .music-bars       { display: none; }
.topnav-music.is-playing .music-icon { display: none; }
.topnav-music.is-playing .music-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    width: 1.1rem;
    height: 1rem;
}
.topnav-music .music-bars > span {
    display: block;
    width: 3px;
    background: currentColor;
    border-radius: 2px;
    animation: music-bar 1s ease-in-out infinite;
}
.topnav-music .music-bars > span:nth-child(1) { height: 60%; animation-delay: -.2s; }
.topnav-music .music-bars > span:nth-child(2) { height: 100%; animation-delay: -.6s; }
.topnav-music .music-bars > span:nth-child(3) { height: 75%; animation-delay: -.4s; }

@keyframes music-bar {
    0%, 100% { transform: scaleY(.4); }
    50%      { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .topnav-music .music-bars > span { animation: none; }
}

.topnav-burger {
    display: flex;
    width: 2.25rem; height: 2.25rem;
    align-items: center; justify-content: center;
    border-radius: 9999px;
    color: var(--navy);
    background: transparent;
    border: 0;
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .topnav-burger { width: 1.9rem; height: 1.9rem; }
    .topnav-burger svg { width: 1rem !important; height: 1rem !important; }
}
@media (min-width: 900px) { .topnav-burger { display: none; } }

/* Mobile sheet — matches the navbar palette */
.topnav-sheet {
    display: none;
    padding: 1.25rem 1.5rem;
    margin: .5rem 16px 0;
    border-radius: 1.5rem;
    flex-direction: column; gap: .75rem;
    font-size: .9375rem; font-weight: 500;
    background: rgba(215, 245, 220, 0.92);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(32, 177, 90, 0.2);
    color: var(--navy);
    box-shadow: 0 12px 30px -8px rgba(19,15,38,0.18);
}
.topnav-sheet.is-open { display: flex; }
.topnav-sheet a, .topnav-sheet button {
    padding: .5rem .75rem; color: var(--navy);
    text-align: left; font: inherit;
    border-radius: .5rem;
}
.topnav-sheet a.is-active {
    background: var(--brand);
    color: var(--white);
    font-weight: 600;
}

/* Scroll progress (solid green) */
.scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50;
    transform-origin: left; transform: scaleX(0);
    background: var(--brand);
    pointer-events: none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero-stage { position: relative; }

.hero-title {
    font-size: 13vw; font-weight: 800; letter-spacing: -0.04em; line-height: .95;
    color: var(--ink);
}
@media (min-width: 640px)  { .hero-title { font-size: 10vw; } }
@media (min-width: 768px)  { .hero-title { font-size: 8vw; } }
@media (min-width: 1024px) { .hero-title { font-size: 5.6vw; } }

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.25rem;
    align-items: center;
    padding-bottom: 3rem;
}
/* Phones: portrait shows FIRST, then the copy. Uses order so DOM stays accessible. */
@media (max-width: 1023px) {
    .hero-grid > :first-child  { order: 2; }
    .hero-grid > :nth-child(2) { order: 1; }
}
@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 1.35fr 1fr; gap: 3.25rem; padding-bottom: 3.75rem; }
}

/* Portrait */
.portrait-wrap {
    position: relative;
    max-width: 26rem;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .portrait-wrap { max-width: min(22rem, 86vw); }
}
.portrait-glow {
    position: absolute;
    inset: -3rem;
    background: var(--brand);
    opacity: 0.12;
    filter: blur(60px);
    border-radius: 9999px;
    pointer-events: none;
    z-index: 0;
    animation: pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow {
    0%, 100% { opacity: 0.12; transform: scale(1); }
    50%      { opacity: 0.2; transform: scale(1.08); }
}
.portrait-card {
    position: relative; z-index: 2;
    aspect-ratio: 4/5;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
.portrait-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; object-position: center bottom;
    filter: drop-shadow(0 30px 40px rgba(18, 136, 83, 0.22))
            drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

/* ============================================================
   Floating 3D social cubes — chunky claymorphic tiles that
   swap positions around the portrait every 24 seconds.
   ============================================================ */
.social-orbit {
    /* 4 stop positions around the portrait. Re-tune here to reshape the loop. */
    --pos1-x: -6%;  --pos1-y:  4%;
    --pos2-x: 86%;  --pos2-y:  2%;
    --pos3-x: 86%;  --pos3-y: 74%;
    --pos4-x: -8%;  --pos4-y: 76%;

    position: absolute;
    inset: 0;
    z-index: 4;
    perspective: 1200px;
    pointer-events: none;
}

.social-icon {
    /* Default palette — overridden per platform below. RGB tuples for rgba(). */
    --ic-rgb:      10, 102, 194;
    --ic-rgb-deep:  0,  73, 147;
    --ic-rgb-edge:  0,  52, 110;

    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    display: inline-block;
    pointer-events: auto;
    text-decoration: none;
    color: #fff;
    transform-style: preserve-3d;
    opacity: 0;
    cursor: pointer;
    animation:
        social-swap 24s cubic-bezier(.65,.03,.35,.97) infinite,
        social-appear 0.8s cubic-bezier(.2,.9,.25,1.15) both,
        social-bob 4s ease-in-out infinite;
}
.social-icon:nth-child(1) { animation-delay:   0s, 0.10s,  0s; }
.social-icon:nth-child(2) { animation-delay:  -6s, 0.25s, -1s; }
.social-icon:nth-child(3) { animation-delay: -12s, 0.40s, -2s; }
.social-icon:nth-child(4) { animation-delay: -18s, 0.55s, -3s; }

/* Chunky 3D face — stacked shadows fake a thick tile protruding toward the viewer */
.social-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: linear-gradient(150deg,
        rgb(var(--ic-rgb)) 0%,
        rgb(var(--ic-rgb-deep)) 100%);
    box-shadow:
        /* 3D thickness — 10 tight layers building downward depth */
        0  1px 0 rgba(var(--ic-rgb-edge), .95),
        0  2px 0 rgba(var(--ic-rgb-edge), .95),
        0  3px 0 rgba(var(--ic-rgb-edge), .90),
        0  4px 0 rgba(var(--ic-rgb-edge), .90),
        0  5px 0 rgba(var(--ic-rgb-edge), .85),
        0  6px 0 rgba(var(--ic-rgb-edge), .85),
        0  7px 0 rgba(var(--ic-rgb-edge), .80),
        0  8px 0 rgba(var(--ic-rgb-edge), .80),
        /* Floor shadow below the cube */
        0 18px 26px -6px rgba(var(--ic-rgb-deep), .55),
        0 26px 40px -12px rgba(19, 15, 38, .30),
        /* Inner highlights — glossy bevel on top-left, shading bottom-right */
        inset 0 2px 0 rgba(255, 255, 255, .45),
        inset 2px 0 0 rgba(255, 255, 255, .20),
        inset 0 -4px 8px rgba(0, 0, 0, .18);
    transform-style: preserve-3d;
    transform: translateZ(0);
    /* Y-axis wobble — tilts the cube left/right so it reads as a 3D spin */
    animation: social-spin 5s ease-in-out infinite;
    transition:
        transform .35s cubic-bezier(.2,.9,.25,1.15),
        box-shadow .35s ease;
}
.social-icon:nth-child(1) .social-face { animation-delay: -0.4s; }
.social-icon:nth-child(2) .social-face { animation-delay: -1.7s; }
.social-icon:nth-child(3) .social-face { animation-delay: -2.9s; }
.social-icon:nth-child(4) .social-face { animation-delay: -4.1s; }

/* Top gloss — subtle sheen on the upper portion */
.social-face::before {
    content: "";
    position: absolute;
    inset: 2px 2px auto 2px;
    height: 45%;
    border-radius: 14px 14px 40% 40% / 14px 14px 70% 70%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

/* Ambient halo that floats slightly behind the cube */
.social-face::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 22px;
    background: radial-gradient(closest-side, rgba(var(--ic-rgb), .30), transparent 70%);
    filter: blur(14px);
    transform: translateZ(-24px);
    z-index: -1;
    pointer-events: none;
}

.social-face svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.28));
    position: relative;
    z-index: 1;
}

/* Platform-specific colours + icon rendering tweaks */
.social-icon--linkedin { --ic-rgb: 10, 102, 194;  --ic-rgb-deep:  0,  73, 147; --ic-rgb-edge:  0,  52, 110; }
.social-icon--github   { --ic-rgb: 36,  41,  47;  --ic-rgb-deep: 13,  17,  23; --ic-rgb-edge:  0,   0,   0; }
.social-icon--whatsapp { --ic-rgb: 37, 211, 102;  --ic-rgb-deep: 18, 140,  75; --ic-rgb-edge: 10,  95,  50; }

/* Gmail keeps the iconic multi-colour envelope — white tile with a tinted shadow ring */
.social-icon--gmail    { --ic-rgb: 255, 255, 255; --ic-rgb-deep: 238, 238, 238; --ic-rgb-edge: 210, 210, 210; }
.social-icon--gmail .social-face {
    background: linear-gradient(150deg, #ffffff 0%, #f3f3f3 100%);
}
.social-icon--gmail .social-face::after {
    background: radial-gradient(closest-side, rgba(234, 67, 53, .22), transparent 70%);
}
.social-icon--gmail .social-face svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.18)); }

/* Label tooltip that springs in on hover */
.social-label {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    padding: .3rem .65rem;
    border-radius: .4rem;
    background: rgb(var(--theme-ink-rgb));
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    translate: -50% 6px;
    transition: opacity .3s ease, translate .3s cubic-bezier(.2,.9,.25,1.15);
    pointer-events: none;
    box-shadow: 0 8px 18px -6px rgba(0,0,0,.35);
}
.social-label::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 8px; height: 8px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}

/* Hover state — freeze motion (so it's clickable), pop forward, reveal label */
.social-icon:hover,
.social-icon:hover .social-face {
    animation-play-state: paused;
}
.social-icon:hover { z-index: 5; }
.social-icon:hover .social-face {
    transform: translate3d(-3px, -5px, 14px) scale(1.08);
    box-shadow:
        0  1px 0 rgba(var(--ic-rgb-edge), .95),
        0  2px 0 rgba(var(--ic-rgb-edge), .95),
        0  3px 0 rgba(var(--ic-rgb-edge), .90),
        0  4px 0 rgba(var(--ic-rgb-edge), .90),
        0  5px 0 rgba(var(--ic-rgb-edge), .85),
        0  6px 0 rgba(var(--ic-rgb-edge), .85),
        0  7px 0 rgba(var(--ic-rgb-edge), .80),
        0  8px 0 rgba(var(--ic-rgb-edge), .80),
        0  9px 0 rgba(var(--ic-rgb-edge), .75),
        0 10px 0 rgba(var(--ic-rgb-edge), .75),
        0 24px 34px -6px rgba(var(--ic-rgb-deep), .7),
        0 34px 50px -14px rgba(19, 15, 38, .40),
        inset 0 2px 0 rgba(255, 255, 255, .55),
        inset 2px 0 0 rgba(255, 255, 255, .25),
        inset 0 -4px 8px rgba(0, 0, 0, .22);
}
.social-icon:hover:active .social-face {
    transform: translate3d(-1px, -1px, 4px) scale(1.02);
}
.social-icon:hover .social-label {
    opacity: 1;
    translate: -50% 0;
}

/* 4-stop position swap — each icon is phase-offset so they keep trading places */
@keyframes social-swap {
    0%    { top: var(--pos1-y); left: var(--pos1-x); }
    22%   { top: var(--pos1-y); left: var(--pos1-x); }
    28%   { top: var(--pos2-y); left: var(--pos2-x); }
    47%   { top: var(--pos2-y); left: var(--pos2-x); }
    53%   { top: var(--pos3-y); left: var(--pos3-x); }
    72%   { top: var(--pos3-y); left: var(--pos3-x); }
    78%   { top: var(--pos4-y); left: var(--pos4-x); }
    97%   { top: var(--pos4-y); left: var(--pos4-x); }
    100%  { top: var(--pos1-y); left: var(--pos1-x); }
}

/* Fade-in on load */
@keyframes social-appear {
    0%   { opacity: 0; scale: 0.2; }
    60%  { opacity: 1; scale: 1.12; }
    100% { opacity: 1; scale: 1; }
}

/* Bob — makes the cube bounce + tilt in place between position swaps */
@keyframes social-bob {
    0%, 100% { translate: 0   0;    rotate: 0deg; }
    25%      { translate: 4px -9px; rotate: -5deg; }
    50%      { translate: 0   -4px; rotate: 0deg; }
    75%      { translate: -4px -9px; rotate: 5deg; }
}

/* Self-rotation — the face itself wobbles on its Y axis (3D spin feel) */
@keyframes social-spin {
    0%, 100% { rotate: y -28deg; }
    50%      { rotate: y  28deg; }
}

@media (max-width: 640px) {
    .social-icon        { width: 46px; height: 46px; }
    .social-face svg    { width: 22px; height: 22px; }
    .social-label       { font-size: .6rem; padding: .22rem .5rem; }
    /* Tighten the orbit ring on phones so nothing slips off the right edge. */
    .social-orbit {
        --pos1-x:  2%;  --pos1-y:  4%;
        --pos2-x: 74%;  --pos2-y:  2%;
        --pos3-x: 74%;  --pos3-y: 72%;
        --pos4-x:  2%;  --pos4-y: 74%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-icon {
        animation: social-appear 0.6s ease-out both;
        top: var(--pos1-y); left: var(--pos1-x);
    }
    .social-icon:nth-child(2) { top: var(--pos2-y); left: var(--pos2-x); animation-delay: .15s; }
    .social-icon:nth-child(3) { top: var(--pos3-y); left: var(--pos3-x); animation-delay: .30s; }
    .social-icon:nth-child(4) { top: var(--pos4-y); left: var(--pos4-x); animation-delay: .45s; }
    .social-face { animation: none; rotate: y 0deg; }
}
.portrait-badge {
    position: absolute; top: 1rem; left: 1rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .375rem;
    border-radius: 9999px;
    padding: .375rem .875rem;
    font-size: .75rem; font-weight: 600; color: var(--ink);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.portrait-badge .dot { position: relative; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--brand); }
.portrait-badge .dot::before {
    content: ''; position: absolute; inset: 0; border-radius: 9999px;
    background: var(--brand); animation: ping 1.8s ease-in-out infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .75; } 75%,100% { transform: scale(2.4); opacity: 0; } }

.portrait-caption {
    position: absolute; z-index: 3;
    right: -1rem; bottom: 1.25rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: .75rem 1rem;
    box-shadow: var(--shadow);
}
@media (max-width: 640px) { .portrait-caption { right: 0.5rem; bottom: -1rem; } }
.portrait-caption-kicker { font-size: .625rem; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-3); font-weight: 600; }
.portrait-caption-val    { margin-top: .125rem; font-size: .8125rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

.portrait-placeholder {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: flex-end;
    padding: 2rem; color: rgba(255,255,255,0.9);
}
.portrait-placeholder .aa {
    font-style: italic; font-weight: 700;
    font-size: min(22vw, 10rem); line-height: .8;
}

/* ============================================================
   Stats — 3D animated cards
   ============================================================ */
.stats-3d {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.25rem;
    perspective: 1200px;
}
@media (min-width: 640px)  { .stats-3d { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stats-3d { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }

.stat-card {
    --stat-color: 32, 177, 90;
    --rx: 0deg; --ry: 0deg;
    --mx: 50%; --my: 0%;
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: 20px;
    background:
        radial-gradient(120% 90% at var(--mx) var(--my), rgba(var(--stat-color), .10), transparent 55%),
        linear-gradient(180deg, var(--white) 0%, #fafbf9 100%);
    border: 1px solid var(--border);
    box-shadow:
        0 2px 6px -2px rgba(19,15,38,.06),
        0 14px 34px -18px rgba(19,15,38,.18);
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
    overflow: hidden;
    isolation: isolate;
    will-change: transform;
}

html.dark .stat-card {
    background:
        radial-gradient(120% 90% at var(--mx) var(--my), rgba(var(--stat-color), .18), transparent 55%),
        linear-gradient(180deg, #1a1634 0%, #13112a 100%);
    border-color: rgba(255,255,255,.07);
    box-shadow:
        0 2px 6px -2px rgba(0,0,0,.35),
        0 18px 40px -18px rgba(0,0,0,.55);
}

.stat-card:hover {
    transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
    border-color: rgba(var(--stat-color), .35);
    box-shadow:
        0 10px 24px -10px rgba(19,15,38,.12),
        0 34px 70px -22px rgba(var(--stat-color), .35);
}

/* Soft corner glow that pulses */
.stat-glow {
    position: absolute;
    top: -30%; right: -25%;
    width: 70%; height: 70%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--stat-color), .28), transparent 70%);
    filter: blur(22px);
    pointer-events: none;
    z-index: 0;
    animation: statGlowPulse 6s ease-in-out infinite;
}
.stat-card:nth-child(2) .stat-glow { animation-delay: 1.5s; }
.stat-card:nth-child(3) .stat-glow { animation-delay: 3s; }
.stat-card:nth-child(4) .stat-glow { animation-delay: 4.5s; }

/* Diagonal sheen on hover */
.stat-sheen {
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform 1s ease;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}
html.dark .stat-sheen {
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
    mix-blend-mode: screen;
}
.stat-card:hover .stat-sheen { transform: translateX(130%); }

/* Icon tile — floats on Z axis and rocks gently */
.stat-icon {
    position: relative;
    z-index: 2;
    width: 54px; height: 54px;
    border-radius: 14px;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(var(--stat-color), 1) 0%, rgba(var(--stat-color), .75) 100%);
    box-shadow:
        0 12px 26px -10px rgba(var(--stat-color), .55),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -6px 12px rgba(0,0,0,.12);
    transform: translateZ(35px);
    animation: statIconFloat 5s ease-in-out infinite;
}
.stat-card:nth-child(2) .stat-icon { animation-delay: .5s; }
.stat-card:nth-child(3) .stat-icon { animation-delay: 1s; }
.stat-card:nth-child(4) .stat-icon { animation-delay: 1.5s; }
.stat-icon svg { width: 26px; height: 26px; }

.stat-card:hover .stat-icon {
    box-shadow:
        0 18px 34px -12px rgba(var(--stat-color), .7),
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -6px 12px rgba(0,0,0,.18);
}

.stat-num {
    position: relative;
    z-index: 2;
    margin-top: 1.4rem;
    font-family: var(--font-sans);
    font-size: clamp(2.25rem, 3.2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--ink);
    transform: translateZ(22px);
    display: flex; align-items: baseline; gap: .1em;
}
.stat-num > span {
    background: linear-gradient(135deg, rgb(var(--stat-color)) 0%, rgba(var(--stat-color), .7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
html.dark .stat-num { color: #fff; }

.stat-label {
    position: relative; z-index: 2;
    margin-top: .65rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-3);
    transform: translateZ(12px);
}
html.dark .stat-label { color: rgba(255,255,255,.55); }

.stat-desc {
    position: relative; z-index: 2;
    margin-top: .55rem;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--ink-2);
    transform: translateZ(6px);
}
html.dark .stat-desc { color: rgba(255,255,255,.72); }

@keyframes statCardRise {
    from { opacity: 0; transform: translateY(24px) translateZ(-60px) rotateX(6deg); }
    to   { opacity: 1; transform: translateY(0)    translateZ(0)     rotateX(0); }
}
@keyframes statIconFloat {
    0%, 100% { transform: translateZ(35px) translateY(0)   rotate(0deg); }
    50%      { transform: translateZ(35px) translateY(-6px) rotate(-4deg); }
}
@keyframes statGlowPulse {
    0%, 100% { transform: scale(1)    translate(0, 0);        opacity: .65; }
    50%      { transform: scale(1.18) translate(-12px, 10px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .stat-icon,
    .stat-glow,
    .stat-sheen { animation: none; transition: none; }
    .stat-card:hover { transform: none; }
}

/* Mobile: center the icon + all text inside each stat card */
@media (max-width: 640px) {
    .stat-card {
        text-align: center;
        padding: 1.5rem 1.25rem 1.4rem;
    }
    .stat-card .stat-icon {
        margin-left: auto;
        margin-right: auto;
    }
    .stat-num,
    .stat-label,
    .stat-desc {
        text-align: center;
    }
    .stat-num {
        justify-content: center;
    }
    /* Soften the side glow so it doesn't look off-center when the layout is symmetric */
    .stat-glow {
        top: -30%;
        right: 15%;
        left: 15%;
        width: 70%;
    }
}

/* ============================================================
   HERO CTAs — hero buttons (responsive row)
   ============================================================ */
.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    white-space: nowrap;
}
.hero-cta .cta-sm { display: none; }
.hero-cta .cta-lg { display: inline; }

@media (max-width: 640px) {
    .hero-ctas {
        gap: .45rem;
        flex-wrap: nowrap;
    }
    .hero-cta {
        flex: 1 1 0;
        min-width: 0;
        padding: .55rem .5rem;
        font-size: .78rem;
        gap: .3rem;
    }
    .hero-cta svg {
        width: .85rem !important;
        height: .85rem !important;
        flex-shrink: 0;
    }
    /* Swap long labels for short ones on phones so text never truncates. */
    .hero-cta .cta-lg { display: none; }
    .hero-cta .cta-sm { display: inline; }
}

/* ============================================================
   BUTTONS & CHIPS
   ============================================================ */
.tag-chip {
    display: inline-flex; align-items: center; gap: .375rem;
    border-radius: 9999px; padding: .3rem .8rem;
    font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    background: var(--brand-tint);
    border: 1px solid transparent;
    color: var(--navy);
}
.chip-sm {
    display: inline-flex; border-radius: 9999px;
    padding: .125rem .5rem;
    font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.15);
    margin-right: .25rem; margin-top: .25rem;
}
.tech-chip { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.tech-sep  { color: var(--ink-4); padding: 0 .25rem; }

.btn-primary {
    display: inline-flex; align-items: center; gap: .5rem;
    border-radius: 9999px; padding: .8rem 1.6rem;
    font-size: .875rem; font-weight: 600; color: var(--white);
    background: var(--brand);
    box-shadow: 0 8px 20px -4px rgba(32,177,90,0.45);
    transition: all .25s ease;
    cursor: pointer;
}
.btn-primary:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -6px rgba(32,177,90,0.55);
}

.btn-ghost {
    display: inline-flex; align-items: center; gap: .5rem;
    border-radius: 9999px; padding: .8rem 1.6rem;
    font-size: .875rem; font-weight: 500;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all .25s ease;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
    background: var(--navy);
    color: var(--white);
    border-color: var(--navy);
}

.btn-accent {
    display: inline-flex; align-items: center; gap: .5rem;
    border-radius: 9999px; padding: .8rem 1.6rem;
    font-size: .875rem; font-weight: 600; color: var(--white);
    background: var(--orange);
    transition: all .25s ease;
}
.btn-accent:hover { background: #0B7238; }

.arrow-circle {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    transition: all .3s ease;
}
.arrow-circle svg { width: 1.25rem; height: 1.25rem; }
.card-project:hover .arrow-circle, .archive-card:hover .arrow-circle {
    background: var(--brand); color: var(--white); border-color: var(--brand);
    transform: rotate(45deg);
}

.link-underline {
    position: relative; display: inline-block;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
    transition: background-size .3s ease;
}
.link-underline:hover { background-size: 100% 1px; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { display: flex; gap: 3rem; animation: marquee 40s linear infinite; white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   CLIENTS — dual-rail animated logo strip (admin-uploaded logos)
   ============================================================ */
.clients-section {
    position: relative;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(1200px 300px at 50% 0%,   rgba(var(--theme-primary-rgb), 0.07), transparent 60%),
        radial-gradient(1000px 300px at 50% 100%, rgba(var(--theme-primary-deep-rgb), 0.06), transparent 60%),
        var(--white);
    padding: 3.5rem 0 3.25rem;
    margin-top: 1.5rem;
    overflow: hidden;
    isolation: isolate;
}
.clients-bg-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(400px 140px at 18% 50%, rgba(var(--theme-primary-rgb), 0.10), transparent 70%),
        radial-gradient(400px 140px at 82% 50%, rgba(var(--theme-primary-deep-rgb), 0.10), transparent 70%);
    opacity: .9;
    z-index: -1;
    animation: clients-bg-drift 18s ease-in-out infinite alternate;
}
@keyframes clients-bg-drift {
    from { transform: translateX(-20px); }
    to   { transform: translateX(20px); }
}

.clients-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--text-mute, #6b7280);
    margin: 0 0 2rem;
}
.clients-rule {
    flex: 0 0 3.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(19,15,38,0.22), transparent);
    border-radius: 1px;
}
.clients-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-deep));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.14);
    animation: clients-dot-pulse 2.6s ease-in-out infinite;
}
@keyframes clients-dot-pulse {
    0%, 100% { transform: scale(1);   box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.14); }
    50%      { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(var(--theme-primary-rgb), 0.04); }
}

.clients-rails {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.clients-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.clients-track {
    --clients-duration: 40s;
    display: flex;
    align-items: center;
    gap: 3rem;
    width: max-content;
    will-change: transform;
}
.clients-track--ltr {
    animation: clients-scroll-left var(--clients-duration) linear infinite;
}
.clients-track--rtl {
    animation: clients-scroll-right var(--clients-duration) linear infinite;
}
.clients-marquee:hover .clients-track { animation-play-state: paused; }
@keyframes clients-scroll-left  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes clients-scroll-right { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

.client-logo {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    min-width: 170px;
    padding: 0 1.6rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        transform .5s cubic-bezier(.2,.9,.3,1.2),
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}
.client-logo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb),0), rgba(var(--theme-primary-deep-rgb),0));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transition: background .4s ease;
    pointer-events: none;
}
.client-logo-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.client-logo img {
    max-height: 50px;
    max-width: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) contrast(.92) brightness(1.02);
    opacity: .6;
    transition: filter .45s ease, opacity .45s ease, transform .45s ease;
}
.client-logo:hover {
    transform: translateY(-4px);
    background: #fff;
    border-color: rgba(var(--theme-ink-rgb), 0.06);
    box-shadow:
        0 12px 28px -14px rgba(var(--theme-primary-rgb), 0.28),
        0 6px 18px -10px rgba(var(--theme-primary-deep-rgb), 0.22);
}
.client-logo:hover::before {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb),.55), rgba(var(--theme-primary-deep-rgb),.55));
}
.client-logo:hover img {
    filter: grayscale(0%) contrast(1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .clients-track,
    .clients-bg-glow,
    .clients-dot { animation: none; }
    .client-logo, .client-logo img { transition: none; }
}
@media (max-width: 640px) {
    .clients-section { padding: 2rem 0 2.25rem; }
    .clients-rails   { gap: .75rem; }
    .clients-track   { gap: 1.75rem; }
    .client-logo     { min-width: 120px; padding: 0 1rem; height: 58px; border-radius: 12px; }
    .client-logo img { max-height: 38px; max-width: 128px; }
    .clients-kicker  { font-size: .66rem; letter-spacing: .25em; }
}

/* ============================================================
   DROP-IN ENTRANCE — slides from the left, stacks into place
   ============================================================ */
.drop-in {
    opacity: 0;
    transform: translateX(-140px) translateY(-12px) rotate(-2deg);
    animation: drop-in 0.95s cubic-bezier(.2, 1, .4, 1) forwards;
}
.drop-in.d-0 { animation-delay: 0s; }
.drop-in.d-1 { animation-delay: .1s; }
.drop-in.d-2 { animation-delay: .22s; }
.drop-in.d-3 { animation-delay: .34s; }
.drop-in.d-4 { animation-delay: .46s; }
.drop-in.d-5 { animation-delay: .58s; }
.drop-in.d-6 { animation-delay: .70s; }
.drop-in.d-7 { animation-delay: .82s; }
.drop-in.d-8 { animation-delay: .94s; }
@keyframes drop-in {
    0%   { opacity: 0; transform: translateX(-140px) translateY(-12px) rotate(-2deg); }
    70%  { opacity: 1; transform: translateX(6px) translateY(2px) rotate(0.5deg); }
    100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0); }
}
.drop-in-right {
    opacity: 0;
    transform: translateX(140px) translateY(-12px) rotate(2deg);
    animation: drop-in-right 1s cubic-bezier(.2, 1, .4, 1) forwards .35s;
}
@keyframes drop-in-right {
    0%   { opacity: 0; transform: translateX(140px) translateY(-12px) rotate(2deg); }
    70%  { opacity: 1; transform: translateX(-6px) translateY(2px) rotate(-0.5deg); }
    100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0); }
}

/* ============================================================
   UNIFIED SCROLL-REVEAL SYSTEM
   - .reveal                       → default: fade + rise
   - .reveal[data-enter="left"]    → fly in from the left
   - .reveal[data-enter="right"]   → fly in from the right
   - .reveal[data-enter="up"]      → rise (explicit)
   - .reveal[data-enter="down"]    → drop in from above
   - .reveal[data-enter="zoom"]    → scale in
   - .reveal[data-enter="flip"]    → tilt-flip in from bottom
   - style="--reveal-delay:200ms"  → per-element stagger
   - .stagger > .reveal            → auto 100ms stagger (up to 10 kids)
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition:
        opacity .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms),
        transform .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
.reveal[data-enter="left"]  { transform: translate3d(-90px, 0, 0) rotate(-1.5deg); }
.reveal[data-enter="right"] { transform: translate3d( 90px, 0, 0) rotate( 1.5deg); }
.reveal[data-enter="up"]    { transform: translate3d(0,  40px, 0); }
.reveal[data-enter="down"]  { transform: translate3d(0, -40px, 0); }
.reveal[data-enter="zoom"]  { transform: scale(.85); }
.reveal[data-enter="flip"]  {
    transform: perspective(900px) rotateX(-18deg) translate3d(0, 28px, 0);
    transform-origin: 50% 100%;
}

.reveal.is-visible                        { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
.reveal[data-enter="flip"].is-visible     { transform: perspective(900px) rotateX(0) translate3d(0, 0, 0); }

.stagger > .reveal:nth-child(1)  { --reveal-delay:  50ms; }
.stagger > .reveal:nth-child(2)  { --reveal-delay: 150ms; }
.stagger > .reveal:nth-child(3)  { --reveal-delay: 250ms; }
.stagger > .reveal:nth-child(4)  { --reveal-delay: 350ms; }
.stagger > .reveal:nth-child(5)  { --reveal-delay: 450ms; }
.stagger > .reveal:nth-child(6)  { --reveal-delay: 550ms; }
.stagger > .reveal:nth-child(7)  { --reveal-delay: 650ms; }
.stagger > .reveal:nth-child(8)  { --reveal-delay: 750ms; }
.stagger > .reveal:nth-child(9)  { --reveal-delay: 850ms; }
.stagger > .reveal:nth-child(10) { --reveal-delay: 950ms; }

.typewriter::after {
    content: '▌'; color: var(--brand);
    animation: caret 1s step-end infinite; margin-left: 2px;
}
.typewriter.is-done::after { animation: none; opacity: 0; }
@keyframes caret { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

/* ============================================================
   PROJECT MARQUEE — two rails, opposite directions, slow scroll
   ============================================================ */
.projects-rails {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: .75rem 0;
    isolation: isolate;
}

.projects-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.projects-track {
    --marquee-duration: 45s;
    display: flex;
    gap: 1.25rem;
    width: max-content;
    will-change: transform;
    padding: .5rem .25rem;
}
.projects-track--ltr { animation: projects-scroll-left  var(--marquee-duration) linear infinite; }
.projects-track--rtl { animation: projects-scroll-right var(--marquee-duration) linear infinite; }

/* Pause when the user hovers the row so they can read / click */
.projects-marquee:hover .projects-track { animation-play-state: paused; }

@keyframes projects-scroll-left  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes projects-scroll-right { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

/* ---------- Individual project card (inside the marquee rails) ---------- */
.project-card-3d {
    flex: 0 0 auto;
    width: min(72vw, 400px);
    aspect-ratio: 16 / 10;
    position: relative;
    border-radius: 1.4rem;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    isolation: isolate;
    transition: transform .4s cubic-bezier(.2,.9,.25,1.15);
}
.project-card-3d:hover { transform: translateY(-6px); }

.project-card-3d .pc-frame {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background: linear-gradient(180deg, #eef3ef 0%, #e3ece4 100%);
    border: 1px solid rgba(var(--theme-primary-rgb), .18);
    box-shadow:
        0  2px  8px -2px rgba(var(--theme-primary-rgb), .18),
        0 14px 34px -14px rgba(var(--theme-primary-rgb), .30);
    transition: box-shadow .4s ease, border-color .4s ease;
}
html.dark .project-card-3d .pc-frame {
    background: linear-gradient(180deg, #1a1634 0%, #13112a 100%);
    border-color: rgba(var(--theme-primary-rgb), .22);
}
.project-card-3d:hover .pc-frame {
    border-color: rgba(var(--theme-primary-rgb), .55);
    box-shadow:
        0  2px  8px -2px rgba(var(--theme-primary-rgb), .25),
        0 28px 58px -14px rgba(var(--theme-primary-rgb), .55),
        0 12px 24px -8px rgba(var(--theme-primary-rgb), .30);
}

/* Image area — shows FULL image (contain) with neutral backdrop */
.project-card-3d .pc-image {
    position: absolute;
    inset: 0;
    transition: filter .5s ease;
}
.project-card-3d .pc-image.has-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .9s cubic-bezier(.22,1,.36,1);
}
.project-card-3d:hover .pc-image.has-image img { transform: scale(1.03); }
.project-card-3d .pc-image.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
}
.project-card-3d:hover .pc-image { filter: saturate(1.08); }

.project-card-3d .pc-fallback-letter {
    font-family: var(--font-sans);
    font-size: 7rem;
    font-style: italic;
    font-weight: 800;
    color: rgba(255,255,255,.4);
    line-height: 1;
}

/* Dark veil at the bottom for title readability */
.project-card-3d .pc-veil {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.88) 100%);
    pointer-events: none;
    z-index: 1;
    transition: opacity .4s ease;
}

/* Diagonal sheen — sweeps on hover */
.project-card-3d .pc-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform 1.1s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
}
.project-card-3d:hover .pc-sheen { transform: translateX(130%); }

/* Info overlay — bottom of the card */
.project-card-3d .pc-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.1rem 1.3rem 1.25rem;
    z-index: 3;
    color: #fff;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,.55);
}
.project-card-3d .pc-title {
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}
@media (min-width: 768px) { .project-card-3d .pc-title { font-size: 1.6rem; } }
.project-card-3d .pc-tagline {
    margin: .4rem 0 0;
    font-size: .85rem;
    color: rgba(255,255,255,.92);
    line-height: 1.45;
    max-width: 30rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Corner arrow button */
.project-card-3d .pc-arrow {
    position: absolute;
    top: .9rem; right: .9rem;
    z-index: 4;
    display: flex; align-items: center; justify-content: center;
    width: 2.3rem; height: 2.3rem;
    border-radius: 9999px;
    background: rgba(19, 15, 38, .60);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    transition:
        background .3s ease,
        color .3s ease,
        transform .45s cubic-bezier(.2,.9,.25,1.15),
        box-shadow .3s ease;
}
.project-card-3d .pc-arrow svg { width: .95rem; height: .95rem; }
.project-card-3d:hover .pc-arrow {
    background: rgb(var(--theme-primary-rgb));
    transform: scale(1.1);
    box-shadow: 0 10px 22px -6px rgba(var(--theme-primary-rgb), .55);
}

@media (max-width: 640px) {
    .project-card-3d           { width: 280px; }
    .project-card-3d .pc-title { font-size: 1.15rem; }
    .projects-track            { --marquee-duration: 32s; gap: .85rem; }
    .projects-rails            { gap: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .projects-track                     { animation: none; }
    .project-card-3d,
    .project-card-3d .pc-frame,
    .project-card-3d .pc-image img,
    .project-card-3d .pc-sheen          { transition: none; }
}

/* Gallery navigation arrows */
.gallery-nav {
    display: flex; align-items: center; justify-content: flex-end;
    gap: .5rem; margin-top: 1rem;
    padding: 0 20px;
}
@media (min-width: 640px) { .gallery-nav { padding: 0 32px; } }
.gallery-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    transition: all .2s ease;
    box-shadow: var(--shadow-sm);
}
.gallery-nav-btn:hover:not(:disabled) {
    background: var(--brand); color: var(--white); border-color: var(--brand);
    transform: translateY(-1px);
}
.gallery-nav-btn svg { width: 1.125rem; height: 1.125rem; }

/* ============================================================
   NOTE / BLOG CARDS — 3D claymorphic
   ============================================================ */
.note-card-3d {
    --rx: 0deg; --ry: 0deg;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 1.2rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    border: 1px solid var(--border);
    transform-style: preserve-3d;
    perspective: 1200px;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition:
        transform .45s cubic-bezier(.2,.9,.25,1.15),
        box-shadow .45s ease,
        border-color .35s ease;
    box-shadow:
        0  2px  8px -2px rgba(19, 15, 38, .08),
        0 14px 32px -14px rgba(19, 15, 38, .18);
    animation: note-rise .75s cubic-bezier(.2,.9,.25,1.15) calc(var(--i, 0) * 0.08s + .15s) both;
}
html.dark .note-card-3d {
    background: #1a1634;
    border-color: rgba(255,255,255,.06);
    box-shadow:
        0  2px  8px -2px rgba(0,0,0,.35),
        0 18px 40px -18px rgba(0,0,0,.55);
}
.note-card-3d:hover {
    transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px);
    border-color: rgba(var(--theme-primary-rgb), .35);
    box-shadow:
        0  2px  8px -2px rgba(19, 15, 38, .10),
        0 24px 52px -16px rgba(var(--theme-primary-rgb), .32),
        0 12px 24px -8px rgba(19, 15, 38, .22);
}

/* Cover */
.note-cover-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(var(--theme-primary-rgb), .08), transparent 60%),
        linear-gradient(135deg, #eef3ef 0%, #e3ece4 100%);
    border-bottom: 1px solid var(--border);
    transform: translateZ(0);
}
html.dark .note-cover-wrap {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(var(--theme-primary-rgb), .15), transparent 60%),
        linear-gradient(135deg, #1f1a3d 0%, #13112a 100%);
    border-bottom-color: rgba(255,255,255,.06);
}
.note-cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.note-cover.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1s cubic-bezier(.22,1,.36,1), filter .5s ease;
}
.note-card-3d:hover .note-cover.has-image img {
    transform: scale(1.06);
    filter: saturate(1.08);
}
.note-fallback-letter {
    font-family: var(--font-sans);
    font-size: 5rem;
    font-style: italic;
    font-weight: 800;
    color: rgba(var(--theme-primary-rgb), .35);
    line-height: 1;
}

/* Diagonal sheen sweeps across on hover */
.note-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);
    transform: translateX(-130%);
    transition: transform 1.1s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
}
.note-card-3d:hover .note-sheen { transform: translateX(130%); }

/* Reading-time badge pinned in the cover corner */
.note-read-badge {
    position: absolute;
    top: .75rem; right: .75rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: .25rem .6rem;
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(19, 15, 38, .62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
}

/* Body */
.note-body {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    transform: translateZ(20px);
}
.note-date {
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--ink-3);
}
html.dark .note-date { color: rgba(255,255,255,.55); }
.note-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
    transform: translateZ(10px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html.dark .note-title { color: #fff; }
.note-excerpt {
    margin: 0;
    font-size: .85rem;
    color: var(--ink-2);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
html.dark .note-excerpt { color: rgba(255,255,255,.72); }

/* Read-more CTA */
.note-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .35rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: rgb(var(--theme-primary-rgb));
    transition: gap .3s ease, color .3s ease;
}
.note-cta svg { width: .85rem; height: .85rem; transition: transform .35s cubic-bezier(.2,.9,.25,1.15); }
.note-card-3d:hover .note-cta { gap: .7rem; }
.note-card-3d:hover .note-cta svg { transform: translate(2px, -2px); }

@keyframes note-rise {
    from { opacity: 0; transform: translateY(24px) translateZ(-40px); }
    to   { opacity: 1; transform: translateY(0)    translateZ(0); }
}

@media (prefers-reduced-motion: reduce) {
    .note-card-3d           { animation: none; opacity: 1; }
    .note-card-3d,
    .note-cover img,
    .note-sheen             { transition: none; }
}

/* ============================================================
   CARDS
   ============================================================ */
.card-project {
    position: relative; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    transition: all .4s ease;
    box-shadow: var(--shadow-sm);
}
.card-project:hover {
    border-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.card-inner { padding: 1.5rem; }
@media (min-width: 768px) { .card-inner { padding: 2rem; } }
.card-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; transition: color .3s ease; color: var(--ink); }
@media (min-width: 768px) { .card-title { font-size: 1.875rem; } }
.card-project:hover .card-title { color: var(--brand); }

.glass {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
}

/* ============================================================
   ARCHIVE
   ============================================================ */
.archive-card { display: block; }
.archive-mockup {
    position: relative;
    aspect-ratio: 21 / 11;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transition: transform .4s ease, box-shadow .4s ease;
}
.archive-card:hover .archive-mockup {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
.archive-corner {
    position: absolute; top: 1rem; right: 1rem;
    display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--white);
    transition: all .3s ease;
}
.archive-card:hover .archive-corner {
    background: var(--white); color: var(--navy); border-color: var(--white);
    transform: rotate(45deg);
}
.archive-corner svg { width: 1rem; height: 1rem; }

/* ============================================================
   PROJECT COLOR TOKENS — SOLID only (no gradients)
   ============================================================ */
.bg-gradient { position: relative; }
.bg-gradient.from-violet-600  { background: #20B15A; }
.bg-gradient.from-fuchsia-600 { background: #130F26; }
.bg-gradient.from-amber-600   { background: #0E8A43; }
.bg-gradient.from-blue-600    { background: #333333; }
.bg-gradient.from-slate-600   { background: #130F26; }
.bg-gradient.from-rose-600    { background: #0E8A43; }
.bg-gradient.from-teal-600    { background: #48B774; }
.bg-gradient.from-indigo-600  { background: #333333; }
.bg-gradient.from-orange-600  { background: #0E8A43; }
.bg-gradient.from-cyan-500    { background: #48B774; }
.bg-gradient.from-emerald-600 { background: #20B15A; }

.absolute-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abs-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.abs-flex-col { position: absolute; inset: 0; display: flex; flex-direction: column; }
.text-white-80 { color: rgba(255,255,255,0.8); }
.text-mockup { font-size: 10vw; line-height: 1; font-style: italic; font-weight: 700; }
.project-hero-title { font-size: 12vw; line-height: 1; font-style: italic; font-weight: 700; }

/* ============================================================
   FORMS
   ============================================================ */
input, textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
    padding: .8rem 1rem;
    border-radius: .75rem;
    font: inherit;
    transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(32,177,90,0.18);
}
label { display: block; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; font-weight: 700; }

.alert-ok {
    margin-bottom: 1.5rem; padding: 1rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--brand);
    background: var(--brand-tint);
    color: #08471E;
    font-size: .875rem;
}
.alert-err {
    margin-bottom: 1.5rem; padding: 1rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid #DC2626;
    background: #FEE2E2;
    color: #7A1313;
    font-size: .875rem;
}

/* ============================================================
   PROSE
   ============================================================ */
.prose-article { font-size: 1.125rem; line-height: 1.75; color: var(--ink-2); }
.prose-article > * + * { margin-top: 1.25rem; }
.prose-article h2 { margin-top: 4rem; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.prose-article h3 { margin-top: 3rem; font-size: 1.5rem;   font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.prose-article h2 + *, .prose-article h3 + * { margin-top: .75rem; }
.prose-article a  { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.prose-article strong { color: var(--ink); font-weight: 700; }
.prose-article code {
    background: var(--brand-tint); color: #0A5A25;
    padding: .125rem .375rem; border-radius: .25rem;
    font-family: var(--font-mono); font-size: .9em;
}
.prose-article pre {
    background: var(--navy); color: #E6E4FF;
    border-radius: 1rem; padding: 1.5rem; overflow-x: auto; margin: 2rem 0;
    font-family: var(--font-mono); font-size: .875rem; line-height: 1.6;
    border: 1px solid rgba(255,255,255,0.06);
}
.prose-article pre code { background: transparent; color: inherit; padding: 0; }
.prose-article ul, .prose-article ol { padding-left: 1.5rem; }
.prose-article ul { list-style: disc; } .prose-article ol { list-style: decimal; }
.prose-article ul li + li, .prose-article ol li + li { margin-top: .5rem; }
.prose-article ul::marker, .prose-article ol::marker { color: var(--brand); }

/* ============================================================
   CV MODAL
   ============================================================ */
.cv-modal {
    position: fixed; inset: 0; z-index: 70;
    display: none;
    align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(19,15,38,0.85);
    backdrop-filter: blur(18px);
}
.cv-modal.is-open { display: flex; }
.cv-modal-inner {
    background: var(--surface);
    border-radius: 1.5rem;
    width: 100%;
    max-width: 980px;
    height: min(92vh, 1100px);
    display: flex; flex-direction: column;
    box-shadow: 0 50px 120px -20px rgba(0,0,0,0.5);
    overflow: hidden;
    animation: cv-pop .5s cubic-bezier(.22,1,.36,1);
}
@keyframes cv-pop {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.cv-modal-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.cv-modal-title { font-weight: 700; font-size: .9375rem; color: var(--ink); }
.cv-modal-sub   { font-size: .75rem; color: var(--ink-3); margin-top: .125rem; }
.cv-modal-actions { display: flex; align-items: center; gap: .5rem; }
.cv-modal-actions a, .cv-modal-actions button {
    display: inline-flex; align-items: center; gap: .375rem;
    padding: .5rem .875rem;
    border-radius: 9999px;
    font-size: .75rem; font-weight: 600;
    border: 1px solid var(--border);
    color: var(--ink);
    transition: all .2s ease;
    background: transparent;
}
.cv-modal-actions a:hover, .cv-modal-actions button:hover {
    background: var(--navy); color: var(--white); border-color: var(--navy);
}
.cv-modal-actions .primary {
    background: var(--brand); color: var(--white); border-color: var(--brand);
}
.cv-modal-actions .primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.cv-modal-body {
    flex: 1;
    background: var(--bg);
    position: relative;
}
.cv-modal-body iframe, .cv-modal-body embed, .cv-modal-body object {
    width: 100%; height: 100%;
    border: 0; display: block;
}
.cv-missing {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem; text-align: center;
    color: var(--ink-3);
}
.cv-missing h3 { margin: 0 0 .5rem; color: var(--ink); font-size: 1.25rem; font-weight: 700; }
.cv-missing code {
    background: var(--brand-tint); color: #0A5A25;
    padding: 2px 6px; border-radius: 4px;
    font-family: var(--font-mono); font-size: .875em;
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
    position: fixed; inset: 0; z-index: 60;
    display: none; align-items: center; justify-content: center;
    background: rgba(19,15,38,0.92); backdrop-filter: blur(20px);
    padding: 1rem;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-height: 90vh; max-width: 90vw; border-radius: 1rem; box-shadow: 0 40px 80px rgba(0,0,0,0.5); }
.lightbox-btn, .lightbox-close {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 9999px;
    background: rgba(255,255,255,0.1);
    color: #fff; border: 1px solid rgba(255,255,255,0.15);
    font-size: 1.5rem; line-height: 1;
    transition: all .2s ease;
}
.lightbox-btn { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox-btn.left  { left: 1.5rem; }
.lightbox-btn.right { right: 1.5rem; }
.lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 40px; height: 40px; }
.lightbox-btn:hover, .lightbox-close:hover { background: var(--brand); border-color: var(--brand); }

.gallery-thumb {
    position: relative; aspect-ratio: 4/3;
    overflow: hidden; border-radius: 1rem;
    background: var(--ink-4); cursor: pointer;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-thumb:hover img { transform: scale(1.05); }

/* ============================================================
   NEXT PROJECT
   ============================================================ */
.next-card {
    display: block; padding: 2.5rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    transition: all .4s ease;
    box-shadow: var(--shadow);
}
.next-card:hover {
    background: var(--brand);
    color: var(--white);
    border-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}
@media (min-width: 768px) { .next-card { padding: 3.5rem; } }
.next-kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .25em; color: var(--brand); font-weight: 700; }
.next-card:hover .next-kicker { color: rgba(255,255,255,0.85); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    position: relative;
    margin-top: 3rem;
    overflow: hidden;
    padding: 2.25rem 0 1rem;
    background: var(--navy);
    color: rgba(255,255,255,0.92);
    font-size: .875rem;
}
.site-footer a { color: inherit; }
.site-footer .accent { color: var(--brand-dark); }
.site-footer .link-underline { font-size: .85rem; }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    align-items: start;
}
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: 1.4fr 1fr; gap: 2.5rem; }
}
.footer-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.footer-bottom {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    font-size: .72rem;
    color: rgba(255,255,255,0.55);
}

/* ============================================================
   BOOT SCREEN
   ============================================================ */
.boot-screen {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    color: var(--ink);
    transition: opacity .7s ease, visibility .7s ease;
}
.boot-screen.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-content { position: relative; z-index: 1; text-align: center; width: min(560px, 92vw); }

/* ---------- Legacy boot styles — sub-pages (blog, projects, post, project) ---------- */
.boot-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 5rem; height: 5rem;
    border-radius: 9999px;
    background: var(--brand);
    color: var(--white);
    font-style: italic;
    font-weight: 700;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 14px 32px -10px rgba(var(--theme-primary-rgb),.45);
    animation: boot-pulse 2.4s ease-in-out infinite;
}
.boot-title { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); }
.boot-subtitle {
    color: var(--ink-3); font-size: .75rem; margin-top: .375rem;
    text-transform: uppercase; letter-spacing: .3em;
}
.boot-skeleton { display: grid; grid-template-columns: repeat(4, 1fr); gap: .625rem; margin-top: 2.5rem; }
.boot-skel-card {
    aspect-ratio: 16/10; border-radius: .875rem;
    background: var(--brand-tint);
    border: 1px solid var(--border);
    animation: boot-shimmer 1.6s ease-in-out infinite alternate;
}
.boot-skel-card:nth-child(2) { animation-delay: .2s; }
.boot-skel-card:nth-child(3) { animation-delay: .4s; }
.boot-skel-card:nth-child(4) { animation-delay: .6s; }
@keyframes boot-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .85; transform: scale(1.05); } }
@keyframes boot-shimmer { from { opacity: .4; } to { opacity: 1; } }

/* ---------- Boot cubes — shared 3D chunky tile ---------- */
.boot-cube {
    --cube-rgb:      var(--theme-primary-rgb);
    --cube-rgb-deep: var(--theme-primary-deep-rgb);
    --cube-rgb-edge: var(--theme-primary-forest-rgb);
    position: relative;
    display: inline-block;
    color: #fff;
    vertical-align: middle;
}
.boot-cube-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(150deg, rgb(var(--cube-rgb)) 0%, rgb(var(--cube-rgb-deep)) 100%);
    font-family: var(--font-sans);
    font-weight: 800;
    line-height: 1;
    border-radius: 12px;
    box-shadow:
        0  1px 0 rgba(var(--cube-rgb-edge), .95),
        0  2px 0 rgba(var(--cube-rgb-edge), .95),
        0  3px 0 rgba(var(--cube-rgb-edge), .90),
        0  4px 0 rgba(var(--cube-rgb-edge), .90),
        0  5px 0 rgba(var(--cube-rgb-edge), .85),
        0  6px 0 rgba(var(--cube-rgb-edge), .85),
        0 14px 22px -6px rgba(var(--cube-rgb-deep), .5),
        0 22px 36px -12px rgba(19, 15, 38, .25),
        inset 0  2px 0 rgba(255,255,255,.45),
        inset 2px 0 0 rgba(255,255,255,.20),
        inset 0 -4px 8px rgba(0,0,0,.18);
}

/* Hero 'a' cube — big headline */
.boot-hero { margin-bottom: 1.75rem; perspective: 900px; }
.boot-cube--hero {
    width: 6.5rem; height: 6.5rem;
    animation: boot-hero-float 3.2s ease-in-out infinite;
}
.boot-cube--hero .boot-cube-face {
    border-radius: 22px;
    font-size: 4.25rem;
    font-style: italic;
    box-shadow:
        0  1px 0 rgba(var(--cube-rgb-edge), .95),
        0  2px 0 rgba(var(--cube-rgb-edge), .95),
        0  3px 0 rgba(var(--cube-rgb-edge), .90),
        0  4px 0 rgba(var(--cube-rgb-edge), .90),
        0  5px 0 rgba(var(--cube-rgb-edge), .85),
        0  6px 0 rgba(var(--cube-rgb-edge), .85),
        0  7px 0 rgba(var(--cube-rgb-edge), .80),
        0  8px 0 rgba(var(--cube-rgb-edge), .80),
        0  9px 0 rgba(var(--cube-rgb-edge), .75),
        0 10px 0 rgba(var(--cube-rgb-edge), .75),
        0 24px 32px -6px rgba(var(--cube-rgb-deep), .55),
        0 34px 54px -14px rgba(19, 15, 38, .30),
        inset 0  3px 0 rgba(255,255,255,.50),
        inset 3px 0 0 rgba(255,255,255,.25),
        inset 0 -6px 12px rgba(0,0,0,.20);
}

/* Row of letter cubes — each letter is its own mini 3D tile */
.boot-title-3d {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.85rem 1.25rem;
    perspective: 800px;
}
.boot-word {
    display: inline-flex;
    gap: 0.2rem;
}
.boot-cube--letter {
    width: 2.35rem;
    height: 2.8rem;
    opacity: 0;
    animation:
        boot-letter-drop 0.65s cubic-bezier(.2,.9,.25,1.15) calc(0.1s + var(--i, 0) * 0.065s) both,
        boot-letter-dance 2.6s ease-in-out calc(1.2s + var(--i, 0) * 0.14s) infinite;
}
.boot-cube--letter .boot-cube-face {
    font-size: 1.45rem;
    font-weight: 800;
    border-radius: 10px;
}

@keyframes boot-hero-float {
    0%, 100% { transform: translateY(0)    rotate(0deg); }
    50%      { transform: translateY(-8px) rotate(-3deg); }
}
@keyframes boot-letter-drop {
    0%   { opacity: 0; transform: translateY(-28px) scale(0.35) rotateX(70deg); }
    60%  { opacity: 1; transform: translateY(0)     scale(1.08) rotateX(0deg); }
    100% { opacity: 1; transform: translateY(0)     scale(1)    rotateX(0deg); }
}
@keyframes boot-letter-dance {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@media (max-width: 640px) {
    .boot-cube--hero       { width: 5rem; height: 5rem; }
    .boot-cube--hero .boot-cube-face { font-size: 3.25rem; border-radius: 18px; }
    .boot-cube--letter     { width: 1.85rem; height: 2.25rem; }
    .boot-cube--letter .boot-cube-face { font-size: 1.15rem; }
    .boot-title-3d         { gap: 0.65rem 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .boot-cube--hero       { animation: none; }
    .boot-cube--letter     {
        opacity: 1;
        animation: boot-letter-drop 0.5s ease-out calc(var(--i, 0) * 0.04s) both;
    }
}

/* ---------- Hero name — small 3D letter cubes above the role label ---------- */
.hero-name-3d {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.7rem;
    margin-bottom: 1.1rem;
}
.hero-name-word {
    display: inline-flex;
    gap: 0.18rem;
}
.cube-mini {
    --cube-rgb:      var(--theme-primary-rgb);
    --cube-rgb-deep: var(--theme-primary-deep-rgb);
    --cube-rgb-edge: var(--theme-primary-forest-rgb);
    display: inline-block;
    width: 1.5rem;
    height: 1.8rem;
    animation: hero-name-float 3.2s ease-in-out calc(var(--i, 0) * 0.18s) infinite;
}
.cube-mini-face {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(150deg,
        rgb(var(--cube-rgb)) 0%,
        rgb(var(--cube-rgb-deep)) 100%);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    border-radius: 7px;
    box-shadow:
        0 1px 0 rgba(var(--cube-rgb-edge), .95),
        0 2px 0 rgba(var(--cube-rgb-edge), .90),
        0 3px 0 rgba(var(--cube-rgb-edge), .85),
        0 7px 10px -2px rgba(var(--cube-rgb-deep), .45),
        inset 0  1px 0 rgba(255,255,255,.40),
        inset 1px 0 0 rgba(255,255,255,.18),
        inset 0 -2px 4px rgba(0,0,0,.18);
}

@keyframes hero-name-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

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

.not-found { padding: 6rem 2rem; text-align: center; color: var(--ink); }
.not-found a { color: var(--brand); }
.empty { padding: 6rem 2rem; text-align: center; color: var(--ink-3); }

.skeleton-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .skeleton-grid { grid-template-columns: 1fr 1fr; } }
.skel-card {
    border-radius: 1.5rem;
    aspect-ratio: 21/11;
    background: var(--brand-tint);
    animation: boot-shimmer 1.6s ease-in-out infinite alternate;
    border: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal, .drop-in, .drop-in-right { opacity: 1 !important; transform: none !important; }
    .ambient-orb { animation: none !important; }
}

/* ============================================================
   CONTACT — 3D stacked card + floating-label form
   ============================================================ */
.contact-section { position: relative; overflow: hidden; }
.contact-section__dotgrid {
    position: absolute;
    top: 4rem; right: -3rem;
    width: 260px; height: 260px;
    background-image: radial-gradient(rgba(var(--theme-ink-rgb), 0.14) 1.4px, transparent 1.4px);
    background-size: 18px 18px;
    opacity: .55;
    pointer-events: none;
    mask-image: radial-gradient(circle at center, #000 45%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at center, #000 45%, transparent 75%);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}
@media (min-width: 960px) {
    .contact-grid {
        grid-template-columns: 5fr 7fr;
        gap: 3.75rem;
    }
}

/* ---------- LEFT column ---------- */
.contact-info { position: relative; z-index: 1; }
.contact-info__lede { max-width: 36ch; font-size: 1.0625rem; }

.contact-tiles {
    margin-top: 2.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
}
@media (min-width: 520px) {
    .contact-tiles { grid-template-columns: 1fr 1fr; }
}

.contact-tile {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    color: var(--ink);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.contact-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--theme-primary-rgb), 0.35);
    box-shadow: 0 18px 40px -18px rgba(var(--theme-primary-rgb), 0.30);
}
.contact-tile__icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    border-radius: 0.7rem;
    background: var(--brand-tint);
    color: var(--brand-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.contact-tile__icon svg { width: 18px; height: 18px; }
.contact-tile__icon--live { background: rgba(var(--theme-primary-rgb), 0.12); }
.contact-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contact-tile__label {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
}
.contact-tile__value {
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.20);
    animation: contactPulse 2s ease-in-out infinite;
}
@keyframes contactPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.20); }
    50%      { box-shadow: 0 0 0 9px rgba(var(--theme-primary-rgb), 0.05); }
}

/* ---------- RIGHT column (3D stack) ---------- */
.contact-stack {
    position: relative;
    isolation: isolate;
    padding: 14px 14px 14px 0;
}
.contact-stack__slab {
    position: absolute;
    top: 22px;
    right: -14px;
    bottom: -14px;
    left: 22px;
    border-radius: 1.75rem;
    background: var(--brand);
    z-index: 0;
    box-shadow: 0 30px 60px -25px rgba(var(--theme-primary-rgb), 0.55);
    transition: transform .4s ease;
}
.contact-stack:hover .contact-stack__slab {
    transform: translate(4px, 4px);
}
.contact-stack__badge {
    position: absolute;
    top: -18px;
    right: -12px;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 18px 35px -10px rgba(var(--theme-ink-rgb), 0.45);
    transform: rotate(-8deg);
    transition: transform .35s ease;
}
.contact-stack:hover .contact-stack__badge { transform: rotate(6deg) scale(1.05); }
.contact-stack__badge svg { width: 22px; height: 22px; }

.contact-card {
    position: relative;
    z-index: 2;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.75rem;
    padding: 2rem;
    box-shadow:
        0 2px 0 rgba(var(--theme-ink-rgb), 0.04),
        0 34px 80px -28px rgba(var(--theme-ink-rgb), 0.25),
        0 10px 30px -15px rgba(var(--theme-primary-rgb), 0.18);
}
@media (min-width: 640px) {
    .contact-card { padding: 2.5rem; }
}

.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}
@media (min-width: 560px) {
    .contact-form__row { grid-template-columns: 1fr 1fr; }
}

/* Floating-label field */
.contact-field { position: relative; }
.contact-field input,
.contact-field textarea {
    width: 100%;
    padding: 1.55rem 1rem 0.65rem;
    background: var(--bg);
    border: 1.5px solid transparent;
    border-radius: 0.9rem;
    color: var(--ink);
    font: inherit;
    line-height: 1.4;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.contact-field textarea {
    min-height: 150px;
    resize: vertical;
    padding-top: 1.65rem;
}
.contact-field input:hover,
.contact-field textarea:hover {
    background: #F2F5F0;
}
.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb), 0.14);
}
.contact-field label {
    position: absolute;
    left: 1rem;
    top: 1.1rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-3);
    pointer-events: none;
    transition: top .18s ease, font-size .18s ease, letter-spacing .18s ease, color .18s ease, font-weight .18s ease;
}
.contact-field__hint {
    font-size: inherit;
    letter-spacing: inherit;
    color: var(--ink-4);
    font-weight: 500;
    text-transform: none;
}
.contact-field input:focus ~ label,
.contact-field input:not(:placeholder-shown) ~ label,
.contact-field textarea:focus ~ label,
.contact-field textarea:not(:placeholder-shown) ~ label {
    top: 0.5rem;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-deep);
    font-weight: 700;
}

/* Submit button — dramatic dark-to-brand flip */
.contact-submit {
    margin-top: 0.5rem;
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 1.1rem 1.5rem;
    background: var(--ink);
    color: var(--white);
    border: 0;
    border-radius: 1rem;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 1rem;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 12px 30px -10px rgba(var(--theme-ink-rgb), 0.55),
        inset 0 -3px 0 rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.contact-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--brand);
    transform: translateY(101%);
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
    z-index: 0;
}
.contact-submit:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 45px -12px rgba(var(--theme-primary-rgb), 0.55),
        inset 0 -3px 0 rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.contact-submit:hover::before { transform: translateY(0); }
.contact-submit:active { transform: translateY(0); }
.contact-submit__label,
.contact-submit__icon { position: relative; z-index: 1; }
.contact-submit__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    transition: transform .35s ease, background .25s ease;
}
.contact-submit__icon svg { width: 14px; height: 14px; }
.contact-submit:hover .contact-submit__icon {
    background: rgba(255, 255, 255, 0.22);
    transform: translateX(3px) rotate(-8deg);
}

/* Mobile polish */
@media (max-width: 639px) {
    .contact-stack { padding: 10px 8px 10px 0; }
    .contact-stack__slab { top: 16px; left: 16px; right: -8px; bottom: -8px; }
    .contact-stack__badge { width: 48px; height: 48px; top: -14px; right: -8px; }
    .contact-stack__badge svg { width: 18px; height: 18px; }
    .contact-card { padding: 1.5rem; border-radius: 1.5rem; }
    .contact-section__dotgrid { display: none; }
}

/* ============================================================
   EXPERIENCE — 2-column grid with 3D tilt + floating decor
   ============================================================ */
.exp-section { position: relative; overflow: hidden; isolation: isolate; }

.exp-bg-grid {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--theme-ink-rgb), 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--theme-ink-rgb), 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 85%);
}
.exp-bg-orb {
    position: absolute; z-index: -1; pointer-events: none;
    width: 520px; height: 520px; border-radius: 50%;
    filter: blur(90px); opacity: .35;
    animation: exp-orb-float 14s ease-in-out infinite alternate;
}
.exp-bg-orb-1 {
    top: -120px; left: -140px;
    background: radial-gradient(circle, rgba(var(--theme-primary-rgb), .55), transparent 65%);
}
.exp-bg-orb-2 {
    bottom: -160px; right: -120px;
    background: radial-gradient(circle, rgba(var(--theme-primary-mist-rgb), .5), transparent 65%);
    animation-delay: -6s;
}
@keyframes exp-orb-float {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(40px, -30px, 0) scale(1.08); }
}

.exp-head { display: block; }
.exp-title {
    font-size: clamp(1.85rem, 4.2vw, 3rem);
    line-height: 1.1;
    white-space: nowrap;
    max-width: 50%;
}
@media (max-width: 900px) {
    .exp-title { white-space: normal; max-width: 100%; font-size: clamp(1.75rem, 6vw, 2.4rem); }
}

.exp-dot, .exp-dot-live {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--brand); flex-shrink: 0;
}
.exp-dot-live {
    position: relative;
    box-shadow: 0 0 0 0 rgba(var(--theme-primary-rgb), .6);
    animation: exp-pulse 2s ease-out infinite;
}
@keyframes exp-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(var(--theme-primary-rgb), .55); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--theme-primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0   rgba(var(--theme-primary-rgb), 0); }
}

/* Grid: 1 col → 2 cols on tablet+ */
.exp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    perspective: 1400px;
}
@media (min-width: 900px) {
    .exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
}

/* Card */
.exp-card {
    position: relative;
    border-radius: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    isolation: isolate;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateX(var(--tilt-rx, 0)) rotateY(var(--tilt-ry, 0));
    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        border-color .35s ease,
        box-shadow .35s ease;
    --mx: 50%; --my: 50%;
}
.exp-card:hover {
    border-color: rgba(var(--theme-primary-rgb), .45);
    box-shadow:
        0 30px 60px -22px rgba(var(--theme-ink-rgb), .22),
        0 0 0 1px rgba(var(--theme-primary-rgb), .15);
}

/* Mouse-follow glow */
.exp-card-glow {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0; transition: opacity .4s ease;
    background: radial-gradient(
        420px circle at var(--mx) var(--my),
        rgba(var(--theme-primary-rgb), .18),
        transparent 60%
    );
}
.exp-card:hover .exp-card-glow { opacity: 1; }

/* Isometric floating shape, bottom-right */
.exp-decor {
    position: absolute;
    bottom: -18px; right: -18px;
    width: 130px; height: 130px;
    color: var(--brand);
    opacity: .14;
    pointer-events: none;
    transform: translateZ(10px);
    animation: exp-spin 22s linear infinite;
}
.exp-decor svg { width: 100%; height: 100%; }
.exp-card:hover .exp-decor { opacity: .28; }
@keyframes exp-spin {
    0%   { transform: translateZ(10px) rotate(0deg); }
    100% { transform: translateZ(10px) rotate(360deg); }
}

/* Card content */
.exp-card-inner {
    position: relative;
    z-index: 1;
    padding: 1.75rem;
    display: flex; flex-direction: column;
    gap: 1.1rem;
    transform: translateZ(30px);
    transform-style: preserve-3d;
}
@media (min-width: 768px) {
    .exp-card-inner { padding: 2rem 2.1rem; }
}

.exp-meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .65rem .9rem;
}
.exp-period-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .35rem .7rem;
    border-radius: 9999px;
    background: rgba(var(--theme-ink-rgb), .04);
    border: 1px solid var(--border);
    font-size: .72rem;
    color: var(--ink-2);
}
.exp-period-chip.is-live {
    background: rgba(var(--theme-primary-rgb), .1);
    border-color: rgba(var(--theme-primary-rgb), .28);
    color: var(--brand-deep);
}
.exp-period-chip .mono { font-family: var(--font-mono); letter-spacing: .02em; }
.exp-location {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .75rem; color: var(--ink-3);
}
.exp-location svg { color: var(--ink-3); flex-shrink: 0; }

.exp-heading { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.exp-role {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.25;
}
@media (min-width: 768px) { .exp-role { font-size: 1.55rem; } }
.exp-company-line {
    margin: 0;
    display: inline-flex; align-items: baseline; gap: .5rem;
    flex-wrap: wrap;
}
.exp-at { color: var(--ink-3); font-weight: 500; }
.exp-company {
    color: var(--brand);
    font-style: italic;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    transition: transform .3s ease;
}
.exp-card:hover .exp-company { transform: translateX(2px); }

.exp-summary {
    margin: 0;
    color: var(--ink-2);
    font-size: .925rem;
    line-height: 1.65;
}

.exp-highlights {
    list-style: none; padding: 0; margin: 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    display: flex; flex-direction: column; gap: .55rem;
}
.exp-highlights li {
    display: flex; gap: .6rem;
    font-size: .825rem; line-height: 1.55;
    color: var(--ink-2);
}
.exp-bullet {
    color: var(--brand);
    flex-shrink: 0;
    transform: translateY(1px);
}

/* 3D entrance — stagger via --exp-delay set inline */
/* ---- Reveal: slide in from left / right with bounce ---- */
.exp-card.reveal { opacity: 0; }
.exp-card.reveal.is-visible {
    opacity: 1;
    animation: exp-slide-in-left 1s cubic-bezier(.22, .61, .36, 1) var(--exp-delay, 0ms) both;
}
.exp-card.reveal[data-enter="right"].is-visible {
    animation-name: exp-slide-in-right;
}
@keyframes exp-slide-in-left {
    0%   { opacity: 0; transform: translate3d(-140px, 24px, 0) scale(.94); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes exp-slide-in-right {
    0%   { opacity: 0; transform: translate3d(140px, 24px, 0) scale(.94); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Small screens: relax 3D a bit */
@media (max-width: 767px) {
    .exp-decor { width: 100px; height: 100px; }
    .exp-card-inner { padding: 1.4rem; gap: .95rem; }
    .exp-role { font-size: 1.25rem; }
    .exp-company { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .exp-card, .exp-decor, .exp-bg-orb { animation: none !important; transition: none !important; }
    .exp-card { transform: none !important; }
    .exp-card.reveal { opacity: 1 !important; transform: none !important; }
    .exp-card.reveal.is-visible { animation: none !important; }
}

/* ============================================================
   STACK — skill grid with 3D cube + brand icons
   ============================================================ */
.stack-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* -- floating 3D decor -------------------------------------- */
.stack-deco {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
    perspective: 1400px;
}
.stack-cube {
    --size: 220px;
    position: absolute;
    top: 60px;
    right: 60px;
    left: auto;
    bottom: auto;
    width: var(--size);
    height: var(--size);
    transform-style: preserve-3d;
    animation: stack-cube-spin 22s linear infinite;
    filter: drop-shadow(0 30px 60px rgba(var(--theme-primary-rgb), 0.22));
}
.stack-cube-face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(135deg,
        rgba(var(--theme-primary-rgb), 0.92),
        rgba(var(--theme-primary-deep-rgb), 0.92));
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -30px 60px rgba(0, 0, 0, 0.15);
}
.stack-cube-face.front  { transform: translateZ(calc(var(--size) / 2)); }
.stack-cube-face.back   { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
.stack-cube-face.right  { transform: rotateY(90deg)  translateZ(calc(var(--size) / 2)); }
.stack-cube-face.left   { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
.stack-cube-face.top    { transform: rotateX(90deg)  translateZ(calc(var(--size) / 2)); }
.stack-cube-face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }

.stack-cube-logo {
    font-size: calc(var(--size) * 0.55);
    line-height: 1;
    color: #ffffff;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.28));
}

.stack-ring {
    position: absolute;
    top: 52%;
    left: -6%;
    width: 380px;
    height: 380px;
    border-radius: 9999px;
    border: 1.5px dashed rgba(var(--theme-primary-rgb), 0.25);
    animation: stack-ring-spin 40s linear infinite reverse;
}
.stack-ring::after {
    content: '';
    position: absolute;
    inset: 40px;
    border-radius: 9999px;
    border: 1px dashed rgba(var(--theme-primary-rgb), 0.18);
}
.stack-dots {
    position: absolute;
    bottom: 8%;
    right: 4%;
    width: 180px;
    height: 180px;
    background-image: radial-gradient(rgba(var(--theme-ink-rgb), 0.18) 1.4px, transparent 1.4px);
    background-size: 18px 18px;
    mask-image: radial-gradient(closest-side, black 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(closest-side, black 50%, transparent 100%);
    opacity: .65;
}
html.dark .stack-dots {
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.4px, transparent 1.4px);
}

@keyframes stack-cube-spin {
    0%   { transform: rotateX(-20deg) rotateY(0deg); }
    100% { transform: rotateX(-20deg) rotateY(360deg); }
}
@keyframes stack-ring-spin {
    to { transform: rotate(360deg); }
}

/* -- header row --------------------------------------------- */
.stack-title {
    max-width: 780px;
}

/* -- skill grid & category cards ---------------------------- */
.skill-grid {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 720px) {
    .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .skill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.skill-category {
    position: relative;
    padding: 1.6rem 1.4rem;
    border-radius: 1.3rem;
    background: var(--surface);
    background-image: linear-gradient(155deg,
        transparent 0%,
        rgba(var(--theme-primary-rgb), 0.05) 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.skill-category::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-deep));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s ease;
}
.skill-category:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(var(--theme-primary-rgb), 0.3);
}
.skill-category:hover::before { transform: scaleX(1); }

html.dark .skill-category {
    background: linear-gradient(155deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(var(--theme-primary-rgb), 0.06) 100%);
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.skill-category-head {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.skill-category-index {
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 600;
    color: var(--brand);
    background: rgba(var(--theme-primary-rgb), 0.12);
    padding: .25rem .5rem;
    border-radius: .5rem;
    letter-spacing: .08em;
}
.skill-category-title {
    flex: 1;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0;
}
html.dark .skill-category-title { color: var(--white); }
.skill-category-count {
    font-family: var(--font-mono);
    font-size: .7rem;
    color: var(--ink-3);
}

.skill-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: .6rem;
}

.skill-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .9rem .5rem;
    border-radius: .85rem;
    background: rgba(var(--theme-ink-rgb), 0.025);
    border: 1px solid rgba(var(--theme-ink-rgb), 0.06);
    transition: transform .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease;
    cursor: default;
    overflow: hidden;
    min-height: 88px;
}
.skill-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%,
        rgba(var(--theme-primary-rgb), 0.18),
        transparent 60%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.skill-tile:hover {
    transform: translateY(-3px) scale(1.03);
    background: rgba(var(--theme-primary-rgb), 0.06);
    border-color: rgba(var(--theme-primary-rgb), 0.25);
    box-shadow: 0 10px 24px -12px rgba(var(--theme-primary-rgb), 0.45);
}
.skill-tile:hover::after { opacity: 1; }
.skill-tile:hover .skill-tile-devicon,
.skill-tile:hover .skill-tile-svg {
    transform: scale(1.12) rotate(-4deg);
}

html.dark .skill-tile {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}
html.dark .skill-tile:hover {
    background: rgba(var(--theme-primary-rgb), 0.12);
    border-color: rgba(var(--theme-primary-rgb), 0.35);
}

.skill-tile-devicon {
    font-size: 1.85rem;
    line-height: 1;
    color: var(--skill-color, var(--brand));
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
    filter: drop-shadow(0 2px 6px rgba(var(--theme-ink-rgb), 0.12));
}
.skill-tile-svg {
    width: 30px;
    height: 30px;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
    filter: drop-shadow(0 2px 6px rgba(var(--theme-ink-rgb), 0.12));
}
.skill-tile-initial {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.02em;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.skill-tile:hover .skill-tile-initial {
    transform: scale(1.12) rotate(-4deg);
}

.skill-tile-name {
    position: relative;
    z-index: 1;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-align: center;
    line-height: 1.25;
}
html.dark .skill-tile-name { color: rgba(255, 255, 255, 0.82); }

/* -- certs block -------------------------------------------- */
.stack-certs {
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}

/* -- responsive --------------------------------------------- */
@media (max-width: 900px) {
    .stack-cube { --size: 140px; top: 2%; right: 2%; opacity: .75; }
    .stack-ring { width: 260px; height: 260px; top: auto; bottom: 10%; }
    .stack-dots { width: 120px; height: 120px; }
}
@media (max-width: 560px) {
    /* Keep the floating cube visible on phones but scale it down so it reads as a decorative accent. */
    .stack-cube { --size: 88px; top: -10px; right: -10px; opacity: .55; filter: drop-shadow(0 12px 20px rgba(var(--theme-primary-rgb), 0.18)); }
    .stack-ring { width: 180px; height: 180px; bottom: 4%; right: -30%; opacity: .4; }
    .stack-dots { width: 90px; height: 90px; opacity: .35; }
    .skill-tiles { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: .5rem; }
    .skill-tile { padding: .7rem .4rem; min-height: 78px; }
    .skill-tile-devicon { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .stack-cube, .stack-ring { animation: none !important; }
    .skill-category, .skill-tile { transition: none !important; }
    .skill-category:hover, .skill-tile:hover { transform: none !important; }
}

/* ============================================================
   CERTIFICATIONS — image cards with 3D tilt + slide-in reveal
   ============================================================ */
.cert-section {
    position: relative;
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border);
}

.cert-head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: .75rem 1.5rem;
    margin-bottom: 1.75rem;
}
.cert-head-kicker {
    margin: 0;
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: .75rem; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-2);
}
.cert-head-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), .18);
}
.cert-head-sub {
    margin: 0;
    font-size: .85rem;
    color: var(--ink-3);
}

/* Grid: 1 → 2 → 3 columns */
.cert-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    perspective: 1400px;
}
@media (min-width: 640px)  { .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1024px) { .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

/* Card — also acts as a link when credential_url is set */
.cert-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1.2rem;
    overflow: hidden;
    isolation: isolate;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 2px 10px -4px rgba(var(--theme-ink-rgb), .08);
    transform-style: preserve-3d;
    transform: perspective(1200px)
        rotateX(var(--cert-rx, 0deg))
        rotateY(var(--cert-ry, 0deg));
    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease,
        border-color .4s ease;
    --cert-mx: 50%; --cert-my: 50%;
}
a.cert-card:hover {
    border-color: rgba(var(--theme-primary-rgb), .45);
    box-shadow:
        0 30px 60px -22px rgba(var(--theme-ink-rgb), .22),
        0 0 0 1px rgba(var(--theme-primary-rgb), .15);
}
.cert-card:not(a):hover {
    border-color: rgba(var(--theme-primary-rgb), .35);
    box-shadow: 0 18px 36px -20px rgba(var(--theme-ink-rgb), .18);
}

/* Mouse-follow glow layer */
.cert-card-glow {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    opacity: 0; transition: opacity .4s ease;
    background: radial-gradient(
        340px circle at var(--cert-mx) var(--cert-my),
        rgba(var(--theme-primary-rgb), .18),
        transparent 60%
    );
}
.cert-card:hover .cert-card-glow { opacity: 1; }

/* Media frame — "gallery mat" look so full cert shows without cropping */
.cert-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    padding: 1rem;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(var(--theme-primary-rgb), .12), transparent 60%),
        radial-gradient(100% 80% at 100% 100%, rgba(var(--theme-primary-deep-rgb), .09), transparent 65%),
        linear-gradient(155deg, #FAFBFC 0%, #F0F4F1 100%);
    transform: translateZ(20px);
}
.cert-media::before {
    content: '';
    position: absolute;
    inset: .6rem;
    border: 1px dashed rgba(var(--theme-primary-rgb), .25);
    border-radius: .6rem;
    pointer-events: none;
    z-index: 1;
    transition: inset .4s cubic-bezier(.22,1,.36,1), border-color .4s ease;
}
.cert-card:hover .cert-media::before {
    inset: .4rem;
    border-color: rgba(var(--theme-primary-rgb), .5);
}
.cert-media img {
    position: relative;
    z-index: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    border-radius: .4rem;
    filter: drop-shadow(0 10px 18px rgba(var(--theme-ink-rgb), .18));
    transition: transform .7s cubic-bezier(.22,1,.36,1), filter .4s ease;
}
.cert-card:hover .cert-media img {
    transform: translateY(-4px) scale(1.02);
    filter: drop-shadow(0 18px 26px rgba(var(--theme-ink-rgb), .28));
}

.cert-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: rgba(var(--theme-primary-rgb), .45);
    z-index: 0;
}
.cert-placeholder svg { width: 54px; height: 54px; }

.cert-media-shine {
    position: absolute; inset: 0;
    z-index: 2;
    background: linear-gradient(110deg,
        transparent 35%,
        rgba(255,255,255,.6) 48%,
        rgba(255,255,255,.1) 52%,
        transparent 65%);
    transform: translateX(-120%);
    transition: transform .95s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.cert-card:hover .cert-media-shine { transform: translateX(120%); }

.cert-year-badge {
    position: absolute; top: .9rem; right: .9rem;
    z-index: 3;
    padding: .35rem .7rem;
    border-radius: 9999px;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: .72rem; font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid rgba(var(--theme-primary-rgb), .25);
    box-shadow: 0 6px 16px -4px rgba(var(--theme-ink-rgb), .18);
    transform: translateZ(40px);
}

/* Body */
.cert-body {
    position: relative;
    z-index: 1;
    padding: 1.1rem 1.15rem 1.2rem;
    display: flex; flex-direction: column; gap: .45rem;
    transform: translateZ(30px);
}
.cert-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    line-height: 1.3;
    transition: color .3s ease;
}
.cert-card:hover .cert-title { color: var(--brand-deep); }

.cert-issuer {
    margin: 0;
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .85rem;
    color: var(--ink-3);
}
.cert-issuer-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

.cert-view {
    margin-top: .35rem;
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--brand-deep);
    text-transform: uppercase;
    letter-spacing: .1em;
    transition: gap .3s ease;
}
a.cert-card:hover .cert-view { gap: .55rem; }
.cert-view svg { transition: transform .3s ease; }
a.cert-card:hover .cert-view svg { transform: translate(1px, -1px); }

/* Reveal — odd from left, even from right */
.cert-card.reveal { opacity: 0; }
.cert-card.reveal.is-visible {
    opacity: 1;
    animation: cert-slide-in-left 1s cubic-bezier(.22,1.2,.36,1) var(--cert-delay, 0ms) backwards;
}
.cert-card.reveal[data-enter="right"].is-visible {
    animation-name: cert-slide-in-right;
}
@keyframes cert-slide-in-left {
    0%   { opacity: 0; transform: perspective(1200px) translate3d(-120px, 50px, -80px) rotateY(-18deg) rotateX(10deg) scale(.85); }
    55%  { opacity: 1; transform: perspective(1200px) translate3d(16px, -8px, 20px) rotateY(4deg) rotateX(-2deg) scale(1.03); }
    80%  { transform: perspective(1200px) translate3d(-4px, 2px, 0) rotateY(-1deg) rotateX(0deg) scale(1); }
    100% { opacity: 1; transform: perspective(1200px) translate3d(0, 0, 0) rotateY(0) rotateX(0) scale(1); }
}
@keyframes cert-slide-in-right {
    0%   { opacity: 0; transform: perspective(1200px) translate3d(120px, 50px, -80px) rotateY(18deg) rotateX(10deg) scale(.85); }
    55%  { opacity: 1; transform: perspective(1200px) translate3d(-16px, -8px, 20px) rotateY(-4deg) rotateX(-2deg) scale(1.03); }
    80%  { transform: perspective(1200px) translate3d(4px, 2px, 0) rotateY(1deg) rotateX(0deg) scale(1); }
    100% { opacity: 1; transform: perspective(1200px) translate3d(0, 0, 0) rotateY(0) rotateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cert-card { transform: none !important; transition: none !important; }
    .cert-card.reveal { opacity: 1 !important; }
    .cert-card.reveal.is-visible { animation: none !important; }
    .cert-media img, .cert-media-shine { transition: none !important; transform: none !important; }
}

/* ============================================================
   BLOG — post card with cover + mockup fallback
   ============================================================ */
.post-card { display: block; overflow: hidden; }
.post-card .post-card__cover {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--brand-tint);
}
.post-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.post-card:hover .post-card__img { transform: scale(1.045); }

.post-card__shine {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(19, 15, 38, 0.42) 100%);
    pointer-events: none;
}
.post-card__tag {
    position: absolute;
    top: 1rem; left: 1rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ink);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.35);
    z-index: 2;
}

/* Fallback mockup when there's no cover image */
.post-card__cover--fallback {
    background:
        radial-gradient(circle at 18% 12%, rgba(var(--theme-primary-rgb), 0.28), transparent 48%),
        radial-gradient(circle at 82% 86%, rgba(var(--theme-ink-rgb), 0.12), transparent 52%),
        var(--brand-tint);
    display: flex;
    align-items: center;
    justify-content: center;
}
.post-card__cover--fallback::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(var(--theme-ink-rgb), 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--theme-ink-rgb), 0.06) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 75%);
    pointer-events: none;
}
.post-card__mono {
    position: relative;
    font-family: var(--font-sans);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(5rem, 12vw, 9rem);
    line-height: 1;
    color: var(--brand-deep);
    letter-spacing: -0.05em;
    text-shadow: 0 2px 0 rgba(var(--theme-primary-forest-rgb), 0.22);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.post-card:hover .post-card__mono { transform: scale(1.08) rotate(-2deg); }

.post-card__body { padding: 1.5rem; }
@media (min-width: 768px) {
    .post-card__body { padding: 1.75rem 2rem; }
}
.post-card__meta {
    display: flex; align-items: center; gap: .5rem;
    font-size: .6875rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 700;
}
.post-card__title { margin-top: 1rem; font-size: 1.5rem; }
@media (min-width: 768px) { .post-card__title { font-size: 1.75rem; } }
.post-card__excerpt {
    margin: .85rem 0 0;
    font-size: .925rem;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   POST DETAIL — hero cover stacked frame
   ============================================================ */
.post-cover-stack {
    position: relative;
    isolation: isolate;
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 10px 0 0;
}
.post-cover-stack__slab {
    position: absolute;
    top: 14px;
    right: -8px;
    bottom: -8px;
    left: 14px;
    border-radius: 1.25rem;
    background: var(--brand);
    z-index: 0;
    box-shadow: 0 22px 50px -20px rgba(var(--theme-primary-rgb), 0.45);
}
.post-cover-img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 1.25rem;
    border: 1px solid var(--border);
    box-shadow: 0 28px 60px -24px rgba(var(--theme-ink-rgb), 0.28);
    background: var(--brand-tint);
}
.post-cover-fallback {
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(var(--theme-primary-rgb), 0.32), transparent 48%),
        radial-gradient(circle at 82% 86%, rgba(var(--theme-ink-rgb), 0.14), transparent 52%),
        var(--brand-tint);
}
.post-cover-fallback::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(var(--theme-ink-rgb), 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--theme-ink-rgb), 0.06) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
    pointer-events: none;
    border-radius: inherit;
}
.post-cover-mono {
    position: relative;
    font-family: var(--font-sans);
    font-style: italic;
    font-weight: 800;
    font-size: clamp(8rem, 18vw, 14rem);
    line-height: 1;
    color: var(--brand-deep);
    letter-spacing: -0.05em;
    text-shadow: 0 3px 0 rgba(var(--theme-primary-forest-rgb), 0.25);
}