/* ============================================
   VARIANT: PULSE — Nova aesthetic, single-viewport tabbed
   Same cursor spotlight, same gradient display type, same
   horizontal project carousel, but compressed into a fixed
   viewport with tab-switching instead of scrolling.
   Dual-mode (light default, dark via [data-theme="dark"]).
   ============================================ */


/* ---- LIGHT MODE ---- */
[data-style="pulse"] {
    --text: var(--ink);
    --text-2: var(--ink-2);
    --text-3: var(--ink-3);
    --bg-card: var(--panel);
    --bg-alt: var(--panel-2);
    --bg:          #F8F8FB;
    --bg-2:        #FFFFFF;
    --panel:       #FFFFFF;
    --panel-2:     #F3F3F7;
    --panel-hov:   #EBEBF0;

    --ink:         #0A0A10;
    --ink-2:       #2C2C36;
    --ink-3:       #6E6E7A;
    --ink-4:       #A2A2AC;
    --ink-5:       #D5D5DC;

    --border:      rgba(10, 10, 16, 0.08);
    --border-2:    rgba(10, 10, 16, 0.16);

    --accent:      #E6006A;
    --accent-2:    #0099CC;
    --accent-3:    #E5A800;
    --accent-soft: rgba(230, 0, 106, 0.08);

    --grad:        linear-gradient(135deg, #FF006E 0%, #8338EC 45%, #3A86FF 80%, #00E5FF 100%);
    --grad-outline: linear-gradient(135deg, #FF006E, #3A86FF);

    --spot-1:      rgba(230, 0, 106, 0.08);
    --spot-2:      rgba(0, 153, 204, 0.06);
    --grid-line:   rgba(10, 10, 16, 0.04);

    --code-bg:     #13131A;
    --code-bar:    #0A0A10;
    --code-ink:    #FFFFFF;
    --code-muted:  rgba(255, 255, 255, 0.6);

    --sidebar-w:   220px;
    --gap:         14px;

    /* Stage width = sidebar + inner gap + content. The whole unit
       (sidebar + main) is centered horizontally within the viewport,
       so on wide monitors both move rightward together. On narrower
       screens the max() floor snaps to the normal gap-from-edge layout. */
    --stage-w:          1500px;
    --stage-offset:     max(var(--gap), calc((100vw - var(--stage-w)) / 2));

    --mx: 50%;
    --my: 50%;
}

[data-style="pulse"][data-theme="dark"] {
    --bg:          #09090F;
    --bg-2:        #11111A;
    --panel:       #16161F;
    --panel-2:     #1B1B26;
    --panel-hov:   #22222D;
    --ink:         #FFFFFF;
    --ink-2:       #C8C8D6;
    --ink-3:       #8A8AA0;
    --ink-4:       #55556B;
    --ink-5:       #313141;
    --border:      rgba(255, 255, 255, 0.06);
    --border-2:    rgba(255, 255, 255, 0.14);
    --accent:      #FF006E;
    --accent-2:    #00E5FF;
    --accent-3:    #FFBE0B;
    --accent-soft: rgba(255, 0, 110, 0.12);
    --spot-1:      rgba(255, 0, 110, 0.12);
    --spot-2:      rgba(0, 229, 255, 0.07);
    --grid-line:   rgba(255, 255, 255, 0.028);
}

/* ===========================================================================
   COLOR PALETTE OVERRIDES
   ===========================================================================
   Switches the entire accent system (accent color, gradient text, CTA
   backgrounds, avatar ring, hover states, etc.) by overriding the
   --accent / --accent-2 / --accent-3 / --grad / --accent-soft / --spot-1
   variables. The selector specificity (0,2,0) beats the variant base
   declaration (0,1,0), so palette wins regardless of source order.

   "pulse" is the default rainbow — no override needed; it inherits the
   variant's base colors.

   Single-color palettes set --grad to a same-color "gradient" so any
   existing background-clip:text or background:var(--grad) usage stays
   working — it just becomes a solid fill.
   =========================================================================== */

/* ---- Cobalt (deep blue, single accent) ---- */
[data-style="pulse"][data-palette="cobalt"] {
    --accent:      #2563EB;
    --accent-2:    #2563EB;
    --accent-3:    #2563EB;
    --accent-soft: rgba(37, 99, 235, 0.10);
    --grad:        linear-gradient(135deg, #2563EB 0%, #2563EB 100%);
    --grad-outline: linear-gradient(135deg, #2563EB, #2563EB);
    --spot-1:      rgba(37, 99, 235, 0.08);
    --spot-2:      rgba(37, 99, 235, 0.04);
}
[data-style="pulse"][data-palette="cobalt"][data-theme="dark"] {
    --accent:      #3B82F6;
    --accent-2:    #3B82F6;
    --accent-3:    #3B82F6;
    --accent-soft: rgba(59, 130, 246, 0.16);
    --grad:        linear-gradient(135deg, #3B82F6 0%, #3B82F6 100%);
    --spot-1:      rgba(59, 130, 246, 0.12);
    --spot-2:      rgba(59, 130, 246, 0.06);
}

/* ---- Red (sharp, single accent) ---- */
[data-style="pulse"][data-palette="red"] {
    --accent:      #E11D48;
    --accent-2:    #E11D48;
    --accent-3:    #E11D48;
    --accent-soft: rgba(225, 29, 72, 0.10);
    --grad:        linear-gradient(135deg, #E11D48 0%, #E11D48 100%);
    --grad-outline: linear-gradient(135deg, #E11D48, #E11D48);
    --spot-1:      rgba(225, 29, 72, 0.08);
    --spot-2:      rgba(225, 29, 72, 0.04);
}
[data-style="pulse"][data-palette="red"][data-theme="dark"] {
    --accent:      #F43F5E;
    --accent-2:    #F43F5E;
    --accent-3:    #F43F5E;
    --accent-soft: rgba(244, 63, 94, 0.16);
    --grad:        linear-gradient(135deg, #F43F5E 0%, #F43F5E 100%);
    --spot-1:      rgba(244, 63, 94, 0.12);
    --spot-2:      rgba(244, 63, 94, 0.06);
}

/* ---- Green (electric mint, single accent) ---- */
[data-style="pulse"][data-palette="green"] {
    --accent:      #00B96B;
    --accent-2:    #00B96B;
    --accent-3:    #00B96B;
    --accent-soft: rgba(0, 185, 107, 0.12);
    --grad:        linear-gradient(135deg, #00B96B 0%, #00B96B 100%);
    --grad-outline: linear-gradient(135deg, #00B96B, #00B96B);
    --spot-1:      rgba(0, 185, 107, 0.08);
    --spot-2:      rgba(0, 185, 107, 0.04);
}
[data-style="pulse"][data-palette="green"][data-theme="dark"] {
    --accent:      #00D67D;
    --accent-2:    #00D67D;
    --accent-3:    #00D67D;
    --accent-soft: rgba(0, 214, 125, 0.18);
    --grad:        linear-gradient(135deg, #00D67D 0%, #00D67D 100%);
    --spot-1:      rgba(0, 214, 125, 0.14);
    --spot-2:      rgba(0, 214, 125, 0.07);
}

[data-style="pulse"] body {
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink-2);
    font-size: 14.5px;
    line-height: 1.6;
    position: relative;
    overflow: hidden;
    height: 100vh;
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Cursor spotlight */
[data-style="pulse"] body::before {
    content: '';
    position: fixed; inset: 0;
    background:
        radial-gradient(circle 520px at var(--mx) var(--my), var(--spot-1), transparent 45%),
        radial-gradient(circle 700px at calc(100% - var(--mx)) calc(100% - var(--my)), var(--spot-2), transparent 45%);
    pointer-events: none;
    z-index: 0;
    will-change: background;
}

/* Grid */
[data-style="pulse"] body::after {
    content: '';
    position: fixed; inset: 0;
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 50% 35%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 35%, black 20%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

[data-style="pulse"] a { color: inherit; }
[data-style="pulse"] ::selection { background: var(--accent); color: #fff; }
[data-style="pulse"] p { max-width: 62ch; }

/* ---- Typography (compressed sizes for viewport fit) ---- */
[data-style="pulse"] h1,
[data-style="pulse"] h2,
[data-style="pulse"] h3,
[data-style="pulse"] h4 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
[data-style="pulse"] h1 {
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.95;
}
[data-style="pulse"] h1 .accent {
    background: var(--grad);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: pulse-gradient 6s ease-in-out infinite;
    display: inline-block;
    /* Italic overhang compensation so the last glyph isn't clipped by bg-clip:text */
    padding-right: 0.12em;
    margin-right: -0.06em;
}
@keyframes pulse-gradient {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
[data-style="pulse"] h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
}
[data-style="pulse"] h2 .accent {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
    /* Italic glyphs lean past their box; without this, bg-clip:text crops
       the tail of the last character (e.g. the 'd' in "worked"). */
    display: inline-block;
    padding-right: 0.18em;
    margin-right: -0.1em;
}
[data-style="pulse"] h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; }
[data-style="pulse"] h4 { font-size: 0.95rem; font-weight: 600; }

[data-style="pulse"] .label {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    color: var(--ink-3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
[data-style="pulse"] .label__num {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--grad);
    color: #fff;
    border: none;
    padding: 2px 7px;
    border-radius: 100px;
    font-size: 0.6rem;
    min-width: 0; height: auto;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* =======================
   SIDEBAR (replaces top header entirely)
   Fixed left column, vertical nav, theme toggle at bottom.
   No logo (per design: dev, not company).
   ======================= */
[data-style="pulse"] .site-header {
    position: fixed;
    top: 50%;
    left: var(--stage-offset);
    transform: translateY(-50%);
    bottom: auto;
    width: var(--sidebar-w);
    height: auto;
    max-height: calc(100vh - 2 * var(--gap));
    z-index: 100;
    /* Solid near-opaque panel so the bar reads as a single unified card
       regardless of flight state. Matches the mobile top-bar approach.
       Previously used rgba(248,248,251,0.6) + backdrop-filter, which
       briefly went solid during rocket flight (~1.2s via .ld-flying-in)
       and then faded back to transparent, looking like a delayed glitch. */
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 24px rgba(10, 10, 16, 0.06);
}
[data-style="pulse"][data-theme="dark"] .site-header {
    background: rgba(22, 22, 31, 0.96);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
[data-style="pulse"] .header-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    height: auto;
    max-width: none;
    padding: 0;
    gap: 14px;
}

/* No logo — user isn't a company */
[data-style="pulse"] .site-logo { display: none; }

[data-style="pulse"] .header-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: 100%;
}

/* =======================
   SIDEBAR AVATAR — lightweight rocket flight
   Transforms-only on a dedicated compositor layer. The surrounding page
   freezes its expensive effects (backdrop-filter, cursor spotlight,
   skill-card glow) for the 1.2s flight so the GPU can focus purely on
   moving one image around.
   ======================= */
[data-style="pulse"] .sidebar-avatar {
    position: fixed;
    left: var(--stage-offset);
    top: calc(50% - 354px);
    width: var(--sidebar-w);
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 101;
    text-decoration: none;

    /* Default (Home): hidden, parked near the hero portrait. */
    opacity: 0;
    transform: translate3d(460px, 260px, 0) rotate(-45deg) scale(0.18);
    pointer-events: none;
    backface-visibility: hidden;
}

[data-style="pulse"] .sidebar-avatar img {
    position: relative;
    z-index: 2;
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--panel);
    /* Solid border is compositor-friendly. No box-shadow during flight
       (added back via the .ld-away-home selector below, at rest only). */
    border: 3px solid var(--accent);
    backface-visibility: hidden;
}
/* Decorative ring/trail spans are not painted at all */
[data-style="pulse"] .sidebar-avatar__ring,
[data-style="pulse"] .sidebar-avatar__trail { display: none; }

[data-style="pulse"] .sidebar-avatar__dot {
    position: absolute;
    right: calc(50% - 50px);
    bottom: 16px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 0 2px var(--panel);
    z-index: 3;
}

/* Docked state (resting on non-Home pages). Decorative glow only here,
   where the element is STATIC — no per-frame box-shadow rasterization. */
[data-style="pulse"].ld-away-home .sidebar-avatar {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    pointer-events: auto;
}
[data-style="pulse"].ld-away-home .sidebar-avatar img {
    box-shadow: 0 8px 22px rgba(255, 0, 110, 0.25);
}
[data-style="pulse"].ld-away-home .sidebar-avatar:hover {
    transform: translate3d(0, -2px, 0) scale(1.04);
    transition: transform 0.2s ease;
}

/* ============ FLIGHT ============
   Short (1.2s) and simple (3 waypoints). Each stop uses only transform
   and opacity — the cheapest properties to animate. */
/* The actual flight is driven by JS (Web Animations API in main.js →
   triggerRocket), which measures real hero photo and docked avatar
   positions at click-time and animates between them. CSS just keeps a
   `will-change` hint during flight for compositor prep. */
[data-style="pulse"].ld-flying-in  .sidebar-avatar,
[data-style="pulse"].ld-flying-out .sidebar-avatar {
    will-change: transform, opacity;
}

/* ===== Freeze page-level expensive effects for the duration of flight.
   This is the actual lag fix — backdrop-filter, the mousemove-driven
   spotlight, and the skill-card blur glows force compositor work every
   frame; during a 1.2s animation that adds up fast. We turn them off
   only while the rocket is in the air. ===== */
/* (Sidebar background is already solid near-opaque; no flight override
   needed. This block used to swap to var(--panel) during flight and was
   what caused the "white → transparent after 2s" reload glitch.) */
[data-style="pulse"].ld-flying-in body::before,
[data-style="pulse"].ld-flying-out body::before {
    opacity: 0;
    transition: opacity 0.15s ease;
}
[data-style="pulse"].ld-flying-in .skill-group::before,
[data-style="pulse"].ld-flying-out .skill-group::before,
[data-style="pulse"].ld-flying-in .service-card::before,
[data-style="pulse"].ld-flying-out .service-card::before,
[data-style="pulse"].ld-flying-in .project-card--feat::before,
[data-style="pulse"].ld-flying-out .project-card--feat::before {
    display: none;
}

/* Keep the portrait above the menu when vertical space is limited. */
@media (min-width: 769px) and (max-height: 700px) {
    [data-style="pulse"] .sidebar-avatar { top: calc(50% - 330px); height: 96px; }
    [data-style="pulse"] .sidebar-avatar img { width: 72px; height: 72px; }
    [data-style="pulse"] .sidebar-avatar__dot { right: calc(50% - 40px); bottom: 14px; width: 12px; height: 12px; }
}
@media (max-width: 768px) {
    [data-style="pulse"] .sidebar-avatar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    [data-style="pulse"].ld-flying-in  .sidebar-avatar,
    [data-style="pulse"].ld-flying-out .sidebar-avatar {
        animation-duration: 0.25s;
    }
}

[data-style="pulse"] .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
}
/* Socials + CV duplicated inside the dropdown menu are mobile-only.
   On desktop they live in their dedicated docks (.site-social and .cv-download)
   alongside the theme toggle, so the in-nav copies are hidden here.
   !important is needed because `[data-style="pulse"] .site-nav a` (the next
   rule) has higher specificity (matches both the class AND the tag), and
   would otherwise re-set `display: flex` and reveal the duplicate. */
[data-style="pulse"] .site-nav__socials,
[data-style="pulse"] .site-nav__cv { display: none !important; }

/* Inline SVG icons inside nav anchors are mobile-only — hidden on desktop
   where the sidebar shows full text labels. */
[data-style="pulse"] .site-nav__icon { display: none; }
[data-style="pulse"] .site-nav a {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ink-3);
    padding: 10px 14px;
    border-radius: 10px;
    transition: all 0.18s ease;
    position: relative;
    text-align: left;
    justify-content: flex-start;
    display: flex;
    align-items: center;
}
[data-style="pulse"] .site-nav a:hover {
    color: var(--ink);
    background: var(--panel-hov);
}
[data-style="pulse"] .site-nav a.active {
    color: #fff;
    background: var(--grad);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(255, 0, 110, 0.25);
}
[data-style="pulse"] .nav-cta {
    background: transparent !important;
    color: var(--ink-3) !important;
    font-weight: 500 !important;
    font-size: 0.86rem !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
}
[data-style="pulse"] .nav-cta:hover {
    background: var(--panel-hov) !important;
    color: var(--ink) !important;
    transform: none !important;
}
[data-style="pulse"] .nav-cta.active {
    background: var(--grad) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(255, 0, 110, 0.25);
}

/* Download CV button — sits between the nav and the theme toggle.
   Solid panel by default, gradient + lift on hover so it stands out as a CTA. */
[data-style="pulse"] .cv-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--ink-2);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
[data-style="pulse"] .cv-download .ld-icon {
    width: 14px; height: 14px;
    stroke-width: 2;
}
[data-style="pulse"] .cv-download:hover {
    color: #fff;
    background: var(--grad);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 0, 110, 0.25);
}

/* Theme toggle sits under the nav (sidebar is auto-height, vertically centered) */
[data-style="pulse"] .theme-toggle {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    transition: all 0.2s;
}
[data-style="pulse"] .theme-toggle:hover { color: var(--ink); border-color: var(--border-2); background: var(--panel-hov); }
[data-style="pulse"] .theme-toggle .ld-icon { width: 14px; height: 14px; }
[data-style="pulse"] .theme-toggle__icon--dark { display: block; }
[data-style="pulse"] .theme-toggle__icon--light { display: none; }
[data-style="pulse"][data-theme="dark"] .theme-toggle__icon--dark { display: none; }
[data-style="pulse"][data-theme="dark"] .theme-toggle__icon--light { display: block; }

[data-style="pulse"] .menu-toggle { display: none; padding: 8px; }
[data-style="pulse"] .menu-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

/* Social icons dock — row of square buttons below theme toggle */
[data-style="pulse"] .site-social {
    display: flex;
    gap: 6px;
    width: 100%;
    padding-top: 10px;
    margin-top: 2px;
    border-top: 1px dashed var(--border);
}
[data-style="pulse"] .site-social a {
    flex: 1;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--ink-3);
    background: var(--panel);
    transition: all 0.2s ease;
}
[data-style="pulse"] .site-social a:hover {
    color: #fff;
    background: var(--grad);
    border-color: transparent;
    transform: translateY(-1px);
}
[data-style="pulse"] .site-social svg {
    width: 15px; height: 15px;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

/* =======================
   MAIN — single viewport, tab layer
   Positioned inside the centered stage, sits beside the sidebar.
   ======================= */
[data-style="pulse"] main {
    position: fixed;
    top: var(--gap);
    left: calc(var(--stage-offset) + var(--sidebar-w) + var(--gap));
    width: calc(var(--stage-w) - var(--sidebar-w) - var(--gap));
    max-width: calc(100vw - var(--stage-offset) - var(--sidebar-w) - var(--gap) * 2);
    right: auto;
    bottom: var(--gap);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

/* Force each child of main into an absolute overlay within the content area
   so we can fade between them on tab switch */
[data-style="pulse"] main > * {
    grid-column: 2;
}

/* HERO + Section = fullscreen panels, content vertically centered.
   overflow-x: hidden prevents the photo's negative-offset decor shapes
   from triggering a horizontal scrollbar. */
[data-style="pulse"] .hero,
[data-style="pulse"] .section {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 1.5rem 1.75rem;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
    min-height: 0;
}
[data-style="pulse"] .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center; /* don't cut off top when content overflows */
    align-items: stretch;
    animation: pulse-enter 0.45s ease;
}
[data-style="pulse"] .hero.is-inactive { display: none; }
[data-style="pulse"] .section.is-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
    align-items: stretch;
    animation: pulse-enter 0.35s ease;
}
@keyframes pulse-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Left-aligned within main so content sits beside the sidebar instead of
   floating in the middle of wide viewports. */
[data-style="pulse"] .hero .container,
[data-style="pulse"] .section .container {
    max-width: 1200px;
    margin: 0;
    padding: 0 !important;
    width: 100%;
}

/* =======================
   HERO — compressed
   ======================= */
[data-style="pulse"] .hero {
    align-items: stretch;
    padding: 1rem 1.75rem;
}
[data-style="pulse"] .hero__bg,
[data-style="pulse"] .hero__orb { display: none; }

/* Show the portrait photo in the hero, hide the code card.
   !important defends against the base style.css's generic hide rule
   in case cascade order or specificity is misbehaving in the loader. */
[data-style="pulse"] .code-card { display: none !important; }
[data-style="pulse"] .hero__photo { display: block !important; }
[data-style="pulse"] .hero__inner {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 2.5rem;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0;
}
[data-style="pulse"] .hero__content { position: relative; }
[data-style="pulse"] .hero__badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--ink-2);
    margin-bottom: 1.2rem;
    position: relative;
    overflow: hidden;
}
[data-style="pulse"] .hero__badge::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--grad);
    opacity: 0.08;
    z-index: -1;
}
[data-style="pulse"] .hero__badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 6px #4ADE80;
    animation: pulse-dot 2s ease-in-out infinite;
}
/* Slightly trimmed h1 since the hero also carries about copy + stats now */
[data-style="pulse"] .hero h1 {
    margin-bottom: 1.1rem;
    font-size: clamp(2.2rem, 4.8vw, 4.2rem);
}
[data-style="pulse"] .hero__greet {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--ink-3);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0.3rem;
    line-height: 1;
}
[data-style="pulse"] .hero__greet::before { content: '// '; color: var(--ink-4); }

/* Intro paragraphs (merged from old About section) */
[data-style="pulse"] .hero__about {
    margin-bottom: 1.35rem;
    max-width: 56ch;
}
[data-style="pulse"] .hero__about p {
    font-size: 0.93rem;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 0.7rem;
}
[data-style="pulse"] .hero__about p:first-child {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ink);
    letter-spacing: -0.015em;
}
[data-style="pulse"] .hero__about p:last-child { margin-bottom: 0; }
[data-style="pulse"] .hero__about strong {
    color: var(--ink);
    font-weight: 600;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Stats sit where the old CTA buttons used to be */
[data-style="pulse"] .hero__stats {
    max-width: 560px;
}

/* Legacy hero__sub (kept harmless: the front-end no longer emits it) */
[data-style="pulse"] .hero__sub {
    font-size: 1.02rem;
    color: var(--ink-2);
    max-width: 44ch;
    margin-bottom: 1.75rem;
    line-height: 1.55;
}
[data-style="pulse"] .hero__actions {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
}

[data-style="pulse"] .hero__visual {
    position: relative;
    animation: pulse-enter 0.6s ease 0.2s both;
}

/* ---- Hero portrait (borrowed from Studio, Pulse-palette) ---- */
[data-style="pulse"] .hero__photo {
    position: relative;
    aspect-ratio: 1;
    max-width: 420px;
    margin-left: auto;
}

[data-style="pulse"] .hero__shape--blob {
    position: absolute;
    width: 108%; height: 108%;
    top: -4%; left: -4%;
    fill: var(--accent);
    opacity: 0.85;
    transform: rotate(-8deg);
    z-index: 0;
    animation: pulse-morph 14s ease-in-out infinite;
    filter: blur(0.5px);
}
@keyframes pulse-morph {
    0%, 100% { transform: rotate(-8deg) scale(1); }
    50%      { transform: rotate(-4deg) scale(1.03); }
}

[data-style="pulse"] .hero__shape--ring {
    position: absolute;
    width: 32%; height: 32%;
    top: -10%; right: -8%;
    color: var(--ink);
    z-index: 3;
    animation: pulse-spin 22s linear infinite;
    opacity: 0.7;
}
@keyframes pulse-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

[data-style="pulse"] .hero__shape--squiggle {
    position: absolute;
    width: 28%; height: auto;
    bottom: 6%; left: -14%;
    color: var(--accent-2);
    z-index: 3;
}

[data-style="pulse"] .hero__shape--star {
    position: absolute;
    width: 9%; height: 9%;
    top: 14%; right: -4%;
    color: var(--accent-3);
    z-index: 3;
    animation: pulse-spin 18s linear infinite reverse;
}

[data-style="pulse"] .hero__photo-frame {
    position: relative;
    aspect-ratio: 1;
    border-radius: 36% 64% 60% 40% / 42% 40% 60% 58%;
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--border);
    z-index: 2;
    transform: rotate(-2deg);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), border-radius 0.8s ease;
    box-shadow: 0 14px 50px rgba(0, 0, 0, 0.18);
}
[data-style="pulse"] .hero__photo:hover .hero__photo-frame {
    transform: rotate(0deg) scale(1.01);
    border-radius: 50% 50% 44% 56% / 52% 48% 56% 44%;
}
[data-style="pulse"] .hero__photo-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

[data-style="pulse"] .hero__photo-chip {
    /* Sits right under the "Currently" caption card. Because it's now a
       sibling of the caption (outside the blob frame), it's free from the
       frame's overflow:hidden clip. Right-aligned with the caption; bottom
       offset so it stacks just below it. */
    position: absolute;
    top: auto; left: auto;
    right: -4%;
    bottom: 2%;
    transform: rotate(-3deg);
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    background: rgba(9, 9, 15, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
    z-index: 5;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}
[data-style="pulse"] .hero__photo-chip-dot {
    width: 6px; height: 6px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent);
}

[data-style="pulse"] .hero__photo-caption {
    position: absolute;
    /* Pushed up so the location chip tucks in right below it */
    right: -6%; bottom: 14%;
    display: flex; flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 0.7rem 0.95rem;
    border-radius: 14px;
    z-index: 4;
    transform: rotate(4deg);
    max-width: 190px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}
[data-style="pulse"] .hero__photo-caption-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.3rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
[data-style="pulse"] .hero__photo-caption-role {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.005em;
    line-height: 1.3;
}

/* Retained for reference/fallback only: if someone forces code-card, hide it */
[data-style="pulse"] .code-card {
    background: var(--code-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}
[data-style="pulse"] .code-card::before {
    content: '';
    position: absolute; inset: -1px;
    background: var(--grad-outline);
    opacity: 0.3;
    border-radius: inherit;
    z-index: -1;
    filter: blur(12px);
}
[data-style="pulse"] .code-card__bar {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px;
    background: var(--code-bar);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
[data-style="pulse"] .code-card__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); }
[data-style="pulse"] .code-card__dot--r { background: #FF006E; }
[data-style="pulse"] .code-card__dot--y { background: #FFBE0B; }
[data-style="pulse"] .code-card__dot--g { background: #4ADE80; }
[data-style="pulse"] .code-card__title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    color: var(--code-muted);
    margin-left: 10px;
}
[data-style="pulse"] .code-card__body {
    padding: 14px 18px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.74rem;
    line-height: 1.9;
    color: var(--code-ink);
}
[data-style="pulse"] .code-indent { padding-left: 1.2rem; }
[data-style="pulse"] .c-key  { color: #FF79C6; }
[data-style="pulse"] .c-fn   { color: #8BE9FD; }
[data-style="pulse"] .c-str  { color: #50FA7B; }
[data-style="pulse"] .c-num,
[data-style="pulse"] .c-bool { color: #FFBE0B; }
[data-style="pulse"] .c-com  { color: rgba(255,255,255,0.4); font-style: italic; }
[data-style="pulse"] .c-br   { color: rgba(255,255,255,0.6); }

/* =======================
   BUTTONS
   ======================= */
[data-style="pulse"] .btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.7rem 1.35rem;
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.22s ease;
    position: relative;
}
[data-style="pulse"] .btn .ld-icon { width: 14px; height: 14px; }
[data-style="pulse"] .btn--primary {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
    overflow: hidden;
}
[data-style="pulse"] .btn--primary::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--grad);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 0;
}
[data-style="pulse"] .btn--primary > * { position: relative; z-index: 1; }
[data-style="pulse"] .btn--primary:hover { color: #fff; transform: translateY(-1px); }
[data-style="pulse"] .btn--primary:hover::before { opacity: 1; }
[data-style="pulse"] .btn--ghost {
    background: var(--panel);
    color: var(--ink);
    border-color: var(--border);
}
[data-style="pulse"] .btn--ghost:hover { background: var(--panel-hov); border-color: var(--border-2); }

/* =======================
   SECTION HEADERS
   ======================= */
[data-style="pulse"] .section__header { margin-bottom: 1.5rem; max-width: 720px; }
[data-style="pulse"] .section__desc {
    color: var(--ink-3);
    margin-top: 0.5rem;
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: 54ch;
}

/* =======================
   ABOUT
   ======================= */
[data-style="pulse"] .about-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: start;
}
[data-style="pulse"] .about-text p {
    font-size: 0.98rem;
    color: var(--ink-2);
    line-height: 1.65;
    margin-bottom: 0.9rem;
}
[data-style="pulse"] .about-text p:first-child {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -0.02em;
}
[data-style="pulse"] .about-text strong {
    color: var(--ink);
    font-weight: 600;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-style="pulse"] .stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
[data-style="pulse"] .stat-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    transition: all 0.3s ease;
}
[data-style="pulse"] .stat-card:hover { transform: translateY(-2px); border-color: var(--border-2); }
[data-style="pulse"] .stat-card:nth-child(1) {
    grid-column: span 2;
    background: var(--grad);
    border-color: transparent;
}
[data-style="pulse"] .stat-card:nth-child(1) .stat-card__num,
[data-style="pulse"] .stat-card:nth-child(1) .stat-card__label { color: #fff; }
[data-style="pulse"] .stat-card__num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.3rem;
}
[data-style="pulse"] .stat-card:nth-child(1) .stat-card__num { font-size: 2.4rem; }
[data-style="pulse"] .stat-card__label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    color: var(--ink-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
}

/* =======================
   SKILLS
   ======================= */
[data-style="pulse"] .section--skills { background: transparent; border: none; }
[data-style="pulse"] .skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
[data-style="pulse"] .skill-group {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
[data-style="pulse"] .skill-group::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 140px; height: 140px;
    background: var(--accent);
    filter: blur(50px);
    opacity: 0;
    transition: opacity 0.4s ease;
}
[data-style="pulse"] .skill-group:hover::before { opacity: 0.25; }
[data-style="pulse"] .skill-group:nth-child(3n+2)::before { background: var(--accent-2); }
[data-style="pulse"] .skill-group:nth-child(3n+3)::before { background: var(--accent-3); }
[data-style="pulse"] .skill-group:hover { transform: translateY(-2px); border-color: var(--border-2); }
[data-style="pulse"] .skill-group__head {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 0.8rem;
    position: relative; z-index: 1;
}
[data-style="pulse"] .skill-group__icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--panel-hov);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
}
[data-style="pulse"] .skill-group:nth-child(3n+2) .skill-group__icon { color: var(--accent-2); }
[data-style="pulse"] .skill-group:nth-child(3n+3) .skill-group__icon { color: var(--accent-3); }
[data-style="pulse"] .skill-group__icon .ld-icon { width: 14px; height: 14px; stroke-width: 2; }
[data-style="pulse"] .skill-group h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.98rem; font-weight: 600; }
[data-style="pulse"] .skill-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; position: relative; z-index: 1; }
[data-style="pulse"] .skill-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    padding: 0.22rem 0.6rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--ink-2);
    transition: all 0.18s ease;
}
[data-style="pulse"] .skill-tag:hover {
    transform: translateY(-1px) scale(1.04);
    color: var(--ink);
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* =======================
   SERVICES — 2x2 grid of service cards
   Each card: icon, title, description, bullet list, hover glow.
   ======================= */
[data-style="pulse"] .services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
}
[data-style="pulse"] .service-card {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
[data-style="pulse"] .service-card::before {
    /* Accent glow in the top-right corner of the card (subtle, hover intensifies) */
    content: '';
    position: absolute;
    top: -50px; right: -50px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: var(--accent);
    filter: blur(60px);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
[data-style="pulse"] .service-card:nth-child(2)::before { background: var(--accent-2); }
[data-style="pulse"] .service-card:nth-child(3)::before { background: var(--accent-3); }
[data-style="pulse"] .service-card:nth-child(4)::before {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
}
[data-style="pulse"] .service-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-2);
}
[data-style="pulse"] .service-card:hover::before { opacity: 0.28; }

[data-style="pulse"] .service-card__icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--panel-hov);
    border: 1px solid var(--border);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.9rem;
    position: relative;
    z-index: 1;
}
[data-style="pulse"] .service-card:nth-child(2) .service-card__icon { color: var(--accent-2); }
[data-style="pulse"] .service-card:nth-child(3) .service-card__icon { color: var(--accent-3); }
[data-style="pulse"] .service-card:nth-child(4) .service-card__icon {
    color: #fff;
    background: var(--grad);
    border-color: transparent;
}
[data-style="pulse"] .service-card__icon .ld-icon {
    width: 18px; height: 18px; stroke-width: 1.8;
}

[data-style="pulse"] .service-card__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
    position: relative; z-index: 1;
}
[data-style="pulse"] .service-card__desc {
    color: var(--ink-3);
    font-size: 0.85rem;
    line-height: 1.55;
    margin-bottom: 0.9rem;
    max-width: none;
    position: relative; z-index: 1;
}
[data-style="pulse"] .service-card__bullets {
    list-style: none;
    margin: auto 0 0;
    padding: 0.85rem 0 0;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative; z-index: 1;
}
[data-style="pulse"] .service-card__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--ink-2);
    line-height: 1.4;
    letter-spacing: 0.01em;
}
[data-style="pulse"] .service-card__bullet-icon {
    width: 13px; height: 13px;
    stroke-width: 2.5;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 1px;
}
[data-style="pulse"] .service-card:nth-child(2) .service-card__bullet-icon { color: var(--accent-2); }
[data-style="pulse"] .service-card:nth-child(3) .service-card__bullet-icon { color: var(--accent-3); }
[data-style="pulse"] .service-card:nth-child(4) .service-card__bullet-icon { color: var(--accent); }

[data-style="pulse"] .services-cta {
    margin-top: 1.25rem;
    padding: 1.1rem 1.35rem;
    background: linear-gradient(135deg, var(--panel), var(--panel-2));
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
[data-style="pulse"] .services-cta__text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    max-width: none;
}

@media (max-width: 900px) {
    [data-style="pulse"] .services-grid { grid-template-columns: 1fr; }
}

/* =======================
   PROJECTS — horizontal carousel (fixed-height cards)
   ======================= */
[data-style="pulse"] .projects-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(360px, 440px);
    grid-auto-rows: 460px;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 0 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}
[data-style="pulse"] .projects-grid::-webkit-scrollbar { height: 6px; }
[data-style="pulse"] .projects-grid::-webkit-scrollbar-track { background: transparent; }
[data-style="pulse"] .projects-grid::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; }

[data-style="pulse"] .project-card {
    scroll-snap-align: start;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    grid-column: span 1 !important;
    grid-row: auto !important;
    display: flex; flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
[data-style="pulse"] .project-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-2);
}
[data-style="pulse"] .project-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: var(--grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
[data-style="pulse"] .project-card:hover::after { transform: scaleX(1); }

[data-style="pulse"] .project-card--feat {
    background: linear-gradient(135deg, var(--panel), var(--panel-2));
    border-color: var(--border-2);
    grid-column: span 1 !important;
    grid-row: auto !important;
}
[data-style="pulse"] .project-card--feat::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 200px; height: 200px;
    background: var(--accent);
    filter: blur(70px);
    opacity: 0.2;
    pointer-events: none;
}
[data-style="pulse"] .project-card__top {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 0.85rem;
    position: relative; z-index: 1;
}
[data-style="pulse"] .project-card__icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: var(--panel-hov);
    color: var(--accent);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}
[data-style="pulse"] .project-card__icon .ld-icon { width: 17px; height: 17px; stroke-width: 2; }
[data-style="pulse"] .project-card--feat .project-card__icon { background: var(--accent-soft); color: var(--accent-2); }
[data-style="pulse"] .project-card__links { display: flex; gap: 0.3rem; }
[data-style="pulse"] .project-card__link {
    width: 30px; height: 30px;
    border-radius: 100px;
    background: var(--panel-hov);
    border: 1px solid var(--border);
    color: var(--ink-2);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
[data-style="pulse"] .project-card__link:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
    transform: translate(2px, -2px);
}
[data-style="pulse"] .project-card__link .ld-icon { width: 11px; height: 11px; }
[data-style="pulse"] .project-card h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 0.4rem;
    position: relative; z-index: 1;
}
[data-style="pulse"] .project-card--feat h3 { font-size: 1.4rem; }
[data-style="pulse"] .project-card p {
    color: var(--ink-3);
    font-size: 0.85rem;
    line-height: 1.55;
    margin-bottom: 0.9rem;
    position: relative; z-index: 1;
    flex: 1;
    /* Clamp long descriptions so every card reads at a similar rhythm */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-style="pulse"] .project-card .skill-tags {
    position: relative; z-index: 1;
    margin-top: auto;
}
/* Preview pill — bottom of every card, not just the featured one */
[data-style="pulse"] .project-card__preview {
    align-self: flex-start;
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    background: var(--panel-hov);
    border: 1px solid var(--border);
    border-radius: 100px;
    color: var(--ink-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    margin-top: 0.75rem;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}
[data-style="pulse"] .project-card__preview .ld-icon {
    width: 11px; height: 11px;
    color: var(--accent);
    flex-shrink: 0;
}
[data-style="pulse"] .project-card__preview--internal {
    background: transparent;
    border-style: dashed;
    color: var(--ink-3);
}
[data-style="pulse"] .project-card__preview--internal .ld-icon { color: var(--ink-3); }
[data-style="pulse"] .project-card--feat .project-card__content { display: contents; }
[data-style="pulse"] .project-card--feat .project-card__preview .ld-icon { color: var(--accent-2); }

/* =======================
   EXPERIENCE — horizontal companies, each with its roles side-by-side
   Top: main branch line + company dots
   Middle: company headers aligned under each dot
   Bottom: that company's roles in a horizontal row
   Whole strip scrolls horizontally.
   ======================= */
[data-style="pulse"] .timeline {
    display: flex;
    flex-direction: row;
    gap: 2.5rem;
    padding: 0 1.75rem 14px;
    margin: 0 -1.75rem;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
    position: relative;
    max-width: none;
    align-items: flex-start;
}
[data-style="pulse"] .timeline::-webkit-scrollbar { height: 6px; }
[data-style="pulse"] .timeline::-webkit-scrollbar-track { background: transparent; }
[data-style="pulse"] .timeline::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 10px; }
[data-style="pulse"] .timeline::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* Horizontal main branch line at y=20 */
[data-style="pulse"] .timeline::before {
    content: '';
    position: absolute;
    left: 1.75rem; right: 1.75rem;
    top: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
    transform: translateY(-50%);
}

/* Each company is its own vertical column: dot + header + role row */
[data-style="pulse"] .timeline-item {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    position: relative;
    padding: 48px 0 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

/* Company commit dot — center on y=20 */
[data-style="pulse"] .timeline-item::before {
    content: '';
    position: absolute;
    left: 0; top: 20px;
    width: 16px; height: 16px;
    background: var(--bg);
    border: 3px solid var(--bg);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(255, 0, 110, 0.3);
    transform: translateY(-50%);
    z-index: 2;
    right: auto;
    height: 16px;
}
[data-style="pulse"] .timeline-item:nth-child(2)::before {
    box-shadow: 0 0 0 2px var(--accent-2), 0 0 14px rgba(0, 153, 204, 0.3);
}
[data-style="pulse"] .timeline-item:nth-child(3)::before {
    box-shadow: 0 0 0 2px var(--accent-3), 0 0 14px rgba(229, 168, 0, 0.3);
}
/* Current company (first) = filled dot */
[data-style="pulse"] .timeline-item:first-child::before { background: var(--accent); }

/* Company header shown below the dot */
[data-style="pulse"] .timeline-item__header {
    display: block;
    margin-bottom: 1.25rem;
    padding-right: 1rem;
}
[data-style="pulse"] .timeline-item__date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}
[data-style="pulse"] .timeline-item__date::before { content: '● '; color: var(--accent); }
[data-style="pulse"] .timeline-item:nth-child(2) .timeline-item__date::before { color: var(--accent-2); }
[data-style="pulse"] .timeline-item:nth-child(3) .timeline-item__date::before { color: var(--accent-3); }

[data-style="pulse"] .timeline-item h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0.2rem;
    line-height: 1.2;
}
[data-style="pulse"] .timeline-item__co {
    font-size: 0.78rem;
    color: var(--ink-3);
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.45;
}

/* Roles in a horizontal row under each company */
[data-style="pulse"] .timeline-item__roles {
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    padding: 0;
    margin: 0;
    border-left: 0;
    position: relative;
}

[data-style="pulse"] .role {
    width: 260px;
    flex: 0 0 auto;
    padding: 0 0 0 0.9rem;
    border-left: 2px solid var(--border-2);
    position: relative;
}
[data-style="pulse"] .role::before { display: none; }

/* Current role (first role in each company) gets coloured left bar */
[data-style="pulse"] .timeline-item:nth-child(1) .role:first-child {
    border-left-color: var(--accent);
    border-left-width: 3px;
}
[data-style="pulse"] .timeline-item:nth-child(2) .role:first-child {
    border-left-color: var(--accent-2);
    border-left-width: 3px;
}
[data-style="pulse"] .timeline-item:nth-child(3) .role:first-child {
    border-left-color: var(--accent-3);
    border-left-width: 3px;
}

[data-style="pulse"] .role__date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    color: var(--ink-4);
    margin-bottom: 0.25rem;
    letter-spacing: 0.03em;
}
[data-style="pulse"] .timeline-item:nth-child(1) .role:first-child .role__date { color: var(--accent); }
[data-style="pulse"] .timeline-item:nth-child(2) .role:first-child .role__date { color: var(--accent-2); }
[data-style="pulse"] .timeline-item:nth-child(3) .role:first-child .role__date { color: var(--accent-3); }

[data-style="pulse"] .role__title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.35rem;
    line-height: 1.25;
}
[data-style="pulse"] .role p {
    font-size: 0.8rem;
    color: var(--ink-2);
    line-height: 1.55;
    max-width: none;
}

/* Company header is visible now, so hide the JS-injected duplicate label */
[data-style="pulse"] .role__company { display: none; }

/* =======================
   CONTACT
   ======================= */
[data-style="pulse"] .contact-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}
[data-style="pulse"] .contact-card::before {
    content: '';
    position: absolute;
    top: -50%; left: 50%;
    transform: translateX(-50%);
    width: 700px; height: 500px;
    background: radial-gradient(ellipse, var(--accent) 0%, transparent 55%);
    opacity: 0.2;
    filter: blur(20px);
    pointer-events: none;
}
[data-style="pulse"] .contact-card::after {
    content: '';
    position: absolute;
    bottom: -40%; right: -10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, var(--accent-2) 0%, transparent 55%);
    opacity: 0.15;
    filter: blur(20px);
    pointer-events: none;
}
[data-style="pulse"] .contact-card > * { position: relative; z-index: 1; }
[data-style="pulse"] .contact-card .label { justify-content: center; margin: 0 auto 0.75rem; }
[data-style="pulse"] .contact-card h2 {
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    margin-bottom: 0.6rem;
}
[data-style="pulse"] .contact-card__intro {
    color: var(--ink-3);
    font-size: 1rem;
    max-width: 460px;
    margin: 0 auto 1.5rem;
    line-height: 1.55;
}
[data-style="pulse"] .contact-links {
    display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
}
[data-style="pulse"] .contact-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 1.2rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    font-size: 0.85rem; font-weight: 500;
    color: var(--ink);
    transition: all 0.22s ease;
}
[data-style="pulse"] .contact-link:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: translateY(-2px);
}
[data-style="pulse"] .contact-link .ld-icon { width: 14px; height: 14px; }

/* Standalone CTA button below the contact card — Download CV.
   Filled gradient pill, white text, soft glow. Sits with breathing room
   under the .contact-card so it reads as a separate, primary action. */
[data-style="pulse"] .contact-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.4rem auto 0;
    padding: 0.85rem 1.6rem;
    background: var(--grad);
    border: 1px solid transparent;
    border-radius: 100px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 0, 110, 0.28);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
/* Centre the button horizontally even though it's a sibling of the card. */
[data-style="pulse"] .section--contact .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
[data-style="pulse"] .contact-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(255, 0, 110, 0.36);
}
[data-style="pulse"] .contact-cta .ld-icon {
    width: 16px;
    height: 16px;
    stroke: #fff;
    stroke-width: 2.2;
}

/* Footer hidden in tabbed variant (nothing to anchor to) */
[data-style="pulse"] .site-footer { display: none; }

/* Plain pages (404, single-project) land in main */
[data-style="pulse"] main > section:not(.hero):not(.section),
[data-style="pulse"] main > article {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    padding: 2rem;
    overflow-y: auto;
}

/* =======================
   RESPONSIVE
   ======================= */
@media (max-width: 1024px) {
    [data-style="pulse"] .hero__inner { grid-template-columns: 1fr; gap: 1.5rem; }
    [data-style="pulse"] .code-card { max-width: 500px; }
    [data-style="pulse"] .about-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    [data-style="pulse"] .skills-grid { grid-template-columns: 1fr 1fr; }
    [data-style="pulse"] .projects-grid { grid-auto-columns: minmax(280px, 80vw); }
    [data-style="pulse"] .timeline { grid-template-columns: 1fr; gap: 0.85rem; }
}
@media (max-width: 960px) {
    /* Narrower sidebar at tablet widths */
    [data-style="pulse"] { --sidebar-w: 180px; }
    [data-style="pulse"] .site-nav a { font-size: 0.82rem; padding: 9px 12px; }
}

@media (max-width: 768px) {
    /* ========= Layout reset =========
       Mobile swaps the fixed sidebar + fixed-viewport stage for a normal
       scrolling page. Every piece that was pinned on desktop needs to be
       explicitly unpinned here; otherwise `main`'s desktop `width: 1266px`
       leaks through and clips the right half of every section. */
    [data-style="pulse"] body {
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }
    [data-style="pulse"] main {
        position: static;
        top: auto; left: auto; right: auto; bottom: auto;
        width: auto;
        max-width: 100%;
        margin: 76px 12px 20px;
        padding: 0;
        overflow: visible;
        display: block;
    }
    [data-style="pulse"] main > * { grid-column: auto; }

    [data-style="pulse"] .hero,
    [data-style="pulse"] .section {
        position: static;
        top: auto; left: auto; right: auto; bottom: auto;
        display: none;
        width: auto;
        max-width: 100%;
        padding: 0.5rem 0.25rem 1.5rem;
        height: auto;
        overflow: visible;
        min-height: 0;
    }
    [data-style="pulse"] .hero { display: flex; flex-direction: column; }
    [data-style="pulse"] .hero.is-inactive { display: none; }
    [data-style="pulse"] .section.is-active {
        display: flex;
        flex-direction: column;
    }
    [data-style="pulse"] .hero .container,
    [data-style="pulse"] .section .container {
        max-width: 100%;
        padding: 0 !important;
    }

    /* ========= HERO (home) =========
       On mobile the photo moves ABOVE the copy so the face is the first
       thing a visitor sees. Done via grid `order` on the two hero halves. */
    [data-style="pulse"] .hero__inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 100%;
    }
    [data-style="pulse"] .hero__visual { order: -1; }
    [data-style="pulse"] .hero__content { order: 0; }
    [data-style="pulse"] .hero h1 {
        font-size: clamp(2rem, 9vw, 2.8rem);
        margin-bottom: 0.9rem;
    }
    [data-style="pulse"] .hero__badge { margin-bottom: 0.9rem; }
    [data-style="pulse"] .hero__about { max-width: 100%; margin-bottom: 1rem; }
    [data-style="pulse"] .hero__about p {
        font-size: 0.9rem;
        line-height: 1.55;
        margin-bottom: 0.65rem;
    }
    [data-style="pulse"] .hero__about p:first-child { font-size: 1rem; line-height: 1.35; }
    [data-style="pulse"] .hero__stats { max-width: 100%; }

    [data-style="pulse"] .hero__photo {
        max-width: 240px;
        margin: 0.5rem auto 0.5rem;
    }
    [data-style="pulse"] .hero__photo-caption { max-width: 150px; }
    [data-style="pulse"] .hero__photo-chip { right: -2%; font-size: 0.66rem; }

    /* ========= Section headers ========= */
    [data-style="pulse"] .section__header { margin-bottom: 1rem; }
    [data-style="pulse"] .section h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
    [data-style="pulse"] .section__desc { font-size: 0.92rem; }

    /* ========= Services: single column ========= */
    [data-style="pulse"] .services-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    [data-style="pulse"] .service-card { padding: 1.1rem 1.2rem; }
    [data-style="pulse"] .services-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    [data-style="pulse"] .services-cta .btn { justify-content: center; }

    /* ========= Skills: single column ========= */
    [data-style="pulse"] .skills-grid { grid-template-columns: 1fr; gap: 0.6rem; }

    /* ========= Stats: single column inside the hero ========= */
    [data-style="pulse"] .stat-grid { grid-template-columns: 1fr; }
    [data-style="pulse"] .stat-card:nth-child(1) { grid-column: 1; }

    /* ========= Projects: vertical stack (no horizontal scroll) ========= */
    [data-style="pulse"] .projects-grid {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-auto-columns: auto;
        grid-auto-rows: auto;
        overflow-x: visible;
        scroll-snap-type: none;
        gap: 0.75rem;
    }
    [data-style="pulse"] .project-card {
        grid-column: auto !important;
        grid-row: auto !important;
        scroll-snap-align: none;
        padding: 1.2rem 1.3rem;
    }
    [data-style="pulse"] .project-card p {
        -webkit-line-clamp: unset;
        display: block;
        overflow: visible;
    }

    /* ========= Experience: vertical timeline (not horizontal) ========= */
    [data-style="pulse"] .timeline {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0;
        margin: 0;
        overflow: visible;
        max-width: 100%;
    }
    [data-style="pulse"] .timeline::before {
        /* Vertical backbone instead of horizontal */
        left: 7px;
        right: auto;
        top: 10px;
        bottom: 8px;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
        transform: none;
    }
    [data-style="pulse"] .timeline-item {
        flex: 0 0 auto;
        padding: 0 0 0 32px;
        position: relative;
    }
    [data-style="pulse"] .timeline-item::before {
        left: 1px;
        top: 10px;
        width: 14px;
        height: 14px;
        transform: translateY(-50%);
        border: 2px solid var(--accent);
    }
    [data-style="pulse"] .timeline-item:nth-child(n)::before { box-shadow: none; }
    [data-style="pulse"] .timeline-item:nth-child(2)::before { border-color: var(--accent-2); }
    [data-style="pulse"] .timeline-item:nth-child(3)::before { border-color: var(--accent-3); }
    [data-style="pulse"] .timeline-item__date { line-height: 20px; }
    [data-style="pulse"] .timeline-item__date::before { display: none; }
    [data-style="pulse"] .timeline-item__header { margin-bottom: 0.85rem; padding-right: 0; }
    [data-style="pulse"] .timeline-item__roles {
        flex-direction: column;
        gap: 1rem;
    }
    [data-style="pulse"] .role {
        width: auto;
        max-width: 100%;
    }

    /* ========= Contact ========= */
    [data-style="pulse"] .contact-card {
        padding: 1.75rem 1.25rem;
        max-width: 100%;
    }
    [data-style="pulse"] .contact-links { gap: 0.4rem; }

    /* On mobile the Contact section has little content, so vertical-center
       the card in the available viewport area (no big empty space below). */
    [data-style="pulse"] .section--contact.is-active {
        justify-content: center;
        min-height: calc(100vh - 108px);
    }
    [data-style="pulse"] .section--contact .container {
        width: 100%;
    }

    /* ========= Mobile header: edge-to-edge glass bar =========
       Stretches the full width of the viewport with a frosted-glass
       background and a single hairline below — same pattern as iOS /
       macOS native nav bars. Three groups inside, in order from left:
         1. Avatar (only when away from Home — fixed overlay)
         2. Theme toggle
         3. Hamburger
       Social icons live INSIDE the dropdown menu now (`.site-nav__socials`),
       so the bar stays minimal. */
    [data-style="pulse"] .site-header {
        position: fixed;
        top: 0; left: 0; right: 0;
        bottom: auto;
        width: auto;
        max-height: none;
        height: 64px;
        flex-direction: row;
        align-items: center;
        padding: 0 14px;
        border-radius: 0;
        transform: none;
        border: none;
        border-bottom: 1px solid var(--border);
        box-shadow: none;
    }
    /* Bottom-bar mode: header MUST NOT have backdrop-filter / filter /
       transform — any of those would create a containing block, and the
       fixed-positioned .site-nav (its descendant) would end up docking
       to the bottom of the header instead of the viewport. */
    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-header {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    [data-style="pulse"][data-mobile-nav="bottom_bar"][data-theme="dark"] .site-header {
        background: rgba(9, 9, 15, 0.96);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }
    /* Dropdown mode: full glass blur is fine — the dropdown panel uses
       a different absolute-position approach that doesn't suffer from
       the containing-block trap. */
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-header {
        background: rgba(255, 255, 255, 0.72);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
    [data-style="pulse"][data-mobile-nav="dropdown"][data-theme="dark"] .site-header {
        background: rgba(9, 9, 15, 0.68);
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    [data-style="pulse"] .header-inner {
        flex: 1 1 auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }
    [data-style="pulse"] .header-right {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        width: auto;
    }

    /* Hide the desktop social dock on mobile — they're in the menu instead */
    [data-style="pulse"] .site-social { display: none; }

    /* On mobile the desktop sidebar's `.cv-download` is always hidden.
       In dropdown mode the in-panel `.site-nav__cv` handles it; in
       bottom-bar mode the Download CV CTA lives inside the Contact
       section's contact-links row instead. */
    [data-style="pulse"] .cv-download { display: none !important; }

    /* Theme toggle (rounded square button, no fill at rest) */
    [data-style="pulse"] .theme-toggle {
        display: flex;
        width: 32px; height: 32px;
        margin-top: 0;
        border-radius: 100px;
        padding: 0;
        flex: 0 0 32px;
        background: transparent !important;
        border: 1px solid transparent !important;
    }
    [data-style="pulse"] .theme-toggle:hover {
        background: var(--panel-hov) !important;
    }
    [data-style="pulse"] .theme-toggle .ld-icon { width: 16px; height: 16px; }

    /* ===========================================================
       MOBILE NAV — MODE A: bottom_bar (default)
       Edge-to-edge tab bar fixed at the bottom; hamburger hidden.
       =========================================================== */

    [data-style="pulse"][data-mobile-nav="bottom_bar"] .menu-toggle {
        display: none !important;
    }

    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        height: 64px;
        /* Add iOS safe-area inset so the bar sits above the home indicator. */
        padding: 0 4px env(safe-area-inset-bottom, 0);
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-around;
        gap: 0;
        margin: 0;
        background: rgba(255, 255, 255, 0.82);
        backdrop-filter: blur(22px) saturate(180%);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
        border: none;
        border-top: 1px solid var(--border);
        border-radius: 0;
        box-shadow: none;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
        overflow: visible;
        z-index: 99;
    }
    [data-style="pulse"][data-mobile-nav="bottom_bar"][data-theme="dark"] .site-nav {
        background: rgba(9, 9, 15, 0.78);
        border-top-color: rgba(255, 255, 255, 0.06);
    }

    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-nav a {
        flex: 1 1 0;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: auto;
        height: 100%;
        padding: 0 2px;
        margin: 0;
        border-radius: 0;
        background: transparent !important;
        color: var(--ink-3);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        text-decoration: none;
        position: relative;
        transition: color 0.18s ease;
        box-shadow: none !important;
    }
    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-nav a:hover {
        color: var(--ink);
        background: transparent !important;
    }
    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-nav a.active {
        color: var(--accent);
    }
    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-nav a.active::before {
        content: '';
        position: absolute;
        top: 0;
        width: 30px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--grad);
    }
    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-nav__icon {
        display: block;
        width: 22px;
        height: 22px;
        stroke-width: 2;
        transition: transform 0.18s ease;
    }
    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-nav a.active .site-nav__icon {
        transform: translateY(-2px);
    }
    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-nav__label {
        display: block;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
    }

    [data-style="pulse"][data-mobile-nav="bottom_bar"] .nav-cta {
        background: transparent !important;
        color: var(--ink-3) !important;
        padding: 0 2px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
    }
    [data-style="pulse"][data-mobile-nav="bottom_bar"] .nav-cta.active {
        background: transparent !important;
        color: var(--accent) !important;
    }

    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-nav__cv,
    [data-style="pulse"][data-mobile-nav="bottom_bar"] .site-nav__socials {
        display: none !important;
    }

    [data-style="pulse"][data-mobile-nav="bottom_bar"] main {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* ===========================================================
       MOBILE NAV — MODE B: dropdown (original hamburger panel)
       Hamburger toggles a slide-down menu with text links.
       =========================================================== */

    /* Hamburger button */
    [data-style="pulse"][data-mobile-nav="dropdown"] .menu-toggle {
        display: inline-flex;
        flex: 0 0 38px;
        flex-direction: column;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: 4px;
        border-radius: 100px;
        margin-left: 2px;
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .menu-toggle:hover {
        background: var(--panel-hov);
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .menu-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--ink);
        border-radius: 2px;
        margin: 0;
    }

    /* In dropdown mode the inline nav-icon SVGs are noise — the panel uses
       text labels. Hide them and show the labels at full text size. */
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav__icon {
        display: none;
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav__label {
        display: inline;
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: 0;
        text-transform: none;
    }

    /* Slide-down dropdown panel */
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav {
        position: fixed;
        top: 72px;
        left: 10px; right: 10px;
        bottom: auto;
        height: auto;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 16px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 10px;
        gap: 2px;
        z-index: 99;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-100vh);
        transition:
            transform 0.3s ease,
            opacity 0.2s ease,
            visibility 0s linear 0.3s;
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav.open {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        transition:
            transform 0.3s ease,
            opacity 0.2s ease,
            visibility 0s linear 0s;
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav a {
        display: block;
        padding: 0.7rem;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--ink-3);
        border-radius: 12px;
        text-decoration: none;
        transition: all 0.18s ease;
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav a:hover {
        color: var(--ink);
        background: var(--panel-hov);
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav a.active {
        color: #fff;
        background: var(--grad);
        font-weight: 600;
        box-shadow: 0 4px 14px rgba(255, 0, 110, 0.25);
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .nav-cta {
        background: transparent !important;
        color: var(--ink-3) !important;
        font-weight: 500 !important;
        font-size: 0.95rem !important;
        padding: 0.7rem !important;
        border-radius: 12px !important;
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .nav-cta.active {
        background: var(--grad) !important;
        color: #fff !important;
        font-weight: 600 !important;
    }

    /* CV download inside the dropdown */
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav__cv {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 14px;
        margin-top: 6px;
        border-radius: 12px;
        background: var(--bg-2);
        border: 1px solid var(--border);
        color: var(--ink-2);
        font-size: 0.92rem;
        font-weight: 500;
        text-decoration: none;
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav__cv .ld-icon {
        width: 16px; height: 16px; stroke-width: 2;
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav__cv:hover {
        color: #fff;
        background: var(--grad);
        border-color: transparent;
    }

    /* Social row inside the dropdown */
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav__socials {
        display: flex !important;
        flex-direction: row;
        gap: 6px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px dashed var(--border);
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav__socials a {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 9px 8px;
        border-radius: 10px;
        background: var(--bg-2);
        border: 1px solid var(--border);
        color: var(--ink-2);
        font-size: 0.78rem;
        font-weight: 500;
        text-decoration: none;
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav__socials a:hover {
        color: #fff;
        background: var(--grad);
        border-color: transparent;
    }
    [data-style="pulse"][data-mobile-nav="dropdown"] .site-nav__socials svg {
        width: 14px; height: 14px;
    }

    /* ========= Avatar lives inside the mobile top bar (no flight) =========
       When the user is on a non-Home tab, a small 40px circular avatar
       appears in the bar's left side (where the bar has free space —
       its content is right-aligned). Tap to go back home. No rocket
       animation on mobile — it adds lag and isn't needed at this size. */
    [data-style="pulse"] .sidebar-avatar {
        position: fixed;
        top: 8px;
        left: 14px;
        right: auto;
        bottom: auto;
        width: 48px;
        height: 48px;
        padding: 0;
        margin: 0;
        z-index: 102;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: none;
        transition: opacity 0.25s ease, transform 0.2s ease;
        pointer-events: none;
        animation: none !important;
    }
    [data-style="pulse"] .sidebar-avatar img {
        width: 48px;
        height: 48px;
        border: 2px solid var(--accent);
        box-shadow: 0 2px 8px rgba(255, 0, 110, 0.18);
    }
    [data-style="pulse"] .sidebar-avatar__dot {
        width: 11px;
        height: 11px;
        right: -1px;
        bottom: -1px;
    }
    [data-style="pulse"].ld-away-home .sidebar-avatar {
        opacity: 1;
        pointer-events: auto;
    }
    [data-style="pulse"].ld-away-home .sidebar-avatar:active {
        transform: scale(0.92);
    }
    /* Kill any desktop rocket keyframes on mobile */
    [data-style="pulse"].ld-flying-in  .sidebar-avatar,
    [data-style="pulse"].ld-flying-out .sidebar-avatar {
        animation: none !important;
        transform: none;
    }
}

/* Very small phones: a bit more compression */
@media (max-width: 420px) {
    [data-style="pulse"] .hero h1 { font-size: clamp(1.8rem, 9vw, 2.4rem); }
    [data-style="pulse"] main { margin: 76px 8px 16px; }
    [data-style="pulse"] .hero,
    [data-style="pulse"] .section { padding: 0.5rem 0.1rem 1.25rem; }
    [data-style="pulse"] .project-card { padding: 1rem 1.1rem; }
    [data-style="pulse"] .service-card { padding: 1rem 1.1rem; }
    [data-style="pulse"] .contact-card { padding: 1.5rem 1rem; }
    /* Hide theme-toggle text inside social strip if too cramped */
    [data-style="pulse"] .site-social a:nth-child(3) { display: flex; }
}