/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

      :root {
        --color-bg: #f8f6f3;
        --color-column: #ede9e3;
        --color-text: #2a2a2a;
        --color-text-muted: #5a5a5a;
        --color-text-light: #7a7a7a;
        --color-border: #d4cfc7;
        --color-accent: #c45d3a;
        --color-accent-hover: #a84b2b;
        --color-highlight: #2d5a4a;
        --color-active: #c45d3a;
        --color-card-bg: #ffffff;
        --font-display: "Playfair Display", serif;
        --font-body: "DM Sans", sans-serif;
        --transition: 0.3s ease;
        --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      }

      body.dark-mode {
        --color-bg: #141414;
        --color-column: #0a0a0a;
        --color-text: #e8e8e8;
        --color-text-muted: #b0b0b0;
        --color-text-light: #909090;
        --color-border: #3a3a3a;
        --color-accent: #e07b5a;
        --color-accent-hover: #f09070;
        --color-highlight: #4a9b7f;
        --color-card-bg: #1e1e1e;
      }

      /* ==========================================================================
   Base & Layout
   ========================================================================== */

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
        min-height: 100dvh;
        background-color: var(--color-bg);
        color: var(--color-text);
        font-family: var(--font-body);
        transition: background-color var(--transition);
      }

      /* Scroll Progress Indicator */
      .scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        background: linear-gradient(
          90deg,
          var(--color-accent),
          var(--color-highlight)
        );
        z-index: 10000;
        width: 0%;
        transition: width 0.1s ease-out;
      }

      #container {
        display: flex;
        width: 100%;
        height: 100dvh;
      }

      /* ==========================================================================
   Columns
   ========================================================================== */

      #left-column,
      #right-column {
        text-align: center;
        background-color: var(--color-column);
        transition:
          width var(--transition),
          background-color var(--transition);
      }

      #left-column {
        width: 20%;
        height: 100%;
        font-family: var(--font-display);
        overflow-y: auto;
      }

      #left-column:hover {
        width: 25%;
      }

      #left-column nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      #left-column ul {
        display: flex;
        flex-direction: column;
        list-style: none;
        align-items: center;
        padding: 0;
        margin: 0;
      }

      #left-column li {
        font-size: 18px;
        padding: 15px 0;
        cursor: pointer;
        transition: all var(--transition);
        opacity: 0;
        transform: translateX(-100px);
        color: var(--color-text);
      }

      #left-column li:hover {
        transform: scale(1.05);
        color: var(--color-accent);
      }

      #left-column nav ul li.active {
        color: var(--color-active);
      }

      /* Keyboard hint badges */
      .kbd-hint {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 600;
        color: var(--color-text-light);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        opacity: 0.7;
        transition: all var(--transition);
      }

      #left-column li:hover .kbd-hint {
        opacity: 1;
        color: var(--color-accent);
        border-color: var(--color-accent);
      }

      body.dark-mode .kbd-hint {
        background: #2a2a2a;
        border-color: #404040;
      }

      .project-num kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 600;
        padding: 2px 6px;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        color: var(--color-text-light);
      }

      .project-item:hover .project-num kbd {
        color: var(--color-accent);
        border-color: var(--color-accent);
      }

      body.dark-mode .project-num kbd {
        background: #2a2a2a;
        border-color: #404040;
      }

      #middle-section {
        margin: 0 10px;
        width: 60%;
        height: 100dvh;
        background:
          radial-gradient(
            ellipse at 20% 20%,
            rgba(196, 93, 58, 0.04) 0%,
            transparent 50%
          ),
          radial-gradient(
            ellipse at 80% 80%,
            rgba(45, 90, 74, 0.04) 0%,
            transparent 50%
          ),
          radial-gradient(
            ellipse at 50% 50%,
            rgba(255, 255, 255, 0.8) 0%,
            transparent 100%
          ),
          var(--color-bg);
        position: relative;
        transition:
          width var(--transition),
          background var(--transition-smooth);
        overflow: hidden;
        font-family: var(--font-body);
        border-radius: 16px;
      }

      body.dark-mode #middle-section {
        background:
          radial-gradient(
            ellipse at 20% 20%,
            rgba(224, 123, 90, 0.06) 0%,
            transparent 50%
          ),
          radial-gradient(
            ellipse at 80% 80%,
            rgba(74, 155, 127, 0.06) 0%,
            transparent 50%
          ),
          var(--color-bg);
      }
      body.dark-mode #middle-section.iframe-active {
        background: #fff;
        border-radius: 0;
      }

      #right-column {
        font-family: var(--font-body);
        width: 20%;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: none;
        height: 100vh;
        overflow: hidden;
      }

      #right-column * {
        cursor: none;
      }

      #right-column p {
        font-size: 18px;
      }

      /* ==========================================================================
   Iframes
   ========================================================================== */

      iframe {
        width: 100%;
        height: 100dvh;
        border: none;
        display: none;
        opacity: 0;
        transition: opacity var(--transition);
      }

      iframe::-webkit-scrollbar {
        display: none;
      }

      iframe.show {
        display: block;
        opacity: 1;
        animation: fadeIn 0.5s forwards;
      }

      /* ==========================================================================
   Mobile Header Bar
   ========================================================================== */

      #mobile-header {
        display: none; /* desktop: hidden */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 48px;
        z-index: 10000;
        background: var(--color-column);
        border-bottom: 1px solid var(--color-border);
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        transition:
          background-color 0.3s ease,
          border-color 0.3s ease;
      }

      #mobile-menu-btn,
      #mobile-dark-btn {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: var(--color-text);
        cursor: pointer;
        border-radius: 6px;
        flex-shrink: 0;
        transition: color 0.2s ease;
      }

      #mobile-page-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--color-text);
        letter-spacing: 0.03em;
        text-align: center;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 8px;
        transition: color 0.3s ease;
      }

      /* ==========================================================================
   Custom Cursor
   ========================================================================== */

      .cursor-dot,
      .cursor-outline {
        position: fixed;
        top: 0;
        left: 0;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: 10001;
        pointer-events: none;
        display: none;
      }

      .cursor-dot {
        width: 8px;
        height: 8px;
        background-color: black;
      }

      .cursor-outline {
        width: 30px;
        height: 30px;
        border: 2px solid rgba(0, 0, 0, 0.5);
      }

      body.dark-mode .cursor-dot {
        background-color: white;
      }
      body.dark-mode .cursor-outline {
        border-color: rgba(255, 255, 255, 0.5);
      }

      /* ==========================================================================
   Dark Mode Toggle & Hamburger
   ========================================================================== */

      #dark-mode-toggle {
        position: fixed;
        top: 20px;
        left: 20px;
        cursor: pointer;
        font-size: 24px;
        color: var(--color-text);
        z-index: 9999;
        transition: transform var(--transition);
      }

      #dark-mode-toggle:hover {
        animation: flash 1s ease-in-out;
        transform: scale(1.1);
      }

      body.dark-mode #dark-mode-toggle {
        color: #fff;
      }

      #hamburger-menu {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        cursor: none;
        font-size: 24px;
        transition: all var(--transition);
        color: var(--color-text);
        display: none; /* Hidden on desktop, shown in media queries */
        background-color: var(--color-column);
        padding: 6px 8px;
        border-radius: 6px;
      }

      body.dark-mode #hamburger-menu {
        color: #fff;
        background-color: var(--color-column);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      }

      #hamburger-menu:hover {
        transform: translateY(-5px);
      }
      #hamburger-menu.active {
        transform: rotate(90deg);
      }
      #hamburger-menu.icon-hidden {
        opacity: 0;
      }

      /* ==========================================================================
   Fullscreen Toggle (Desktop Only)
   ========================================================================== */

      #fullscreen-toggle {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        cursor: none;
        background-color: transparent;
        padding: 0;
        border-radius: 0;
        transition: all var(--transition);

        display: none;
        opacity: 0;
        transform: scale(0.9);
      }

      body.fullscreen-mode #fullscreen-toggle {
        cursor: pointer;
      }

      #fullscreen-toggle.visible {
        display: block;
        opacity: 1;
        transform: scale(1);
      }

      #fullscreen-toggle kbd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 600;
        padding: 6px 10px;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        color: var(--color-text-light);
        min-width: 28px;
        transition: all var(--transition);
      }

      #fullscreen-toggle:hover kbd {
        color: var(--color-accent);
        border-color: var(--color-accent);
      }

      #fullscreen-toggle.active kbd {
        background: linear-gradient(
          135deg,
          var(--color-accent) 0%,
          var(--color-accent-hover) 100%
        );
        color: #fff;
        border-color: var(--color-accent);
        box-shadow: 0 2px 8px rgba(196, 93, 58, 0.3);
      }

      #fullscreen-toggle.active:hover kbd {
        color: #fff;
      }

      body.dark-mode #fullscreen-toggle kbd {
        background: #2a2a2a;
        border-color: #404040;
      }

      body.dark-mode #fullscreen-toggle.active kbd {
        background: linear-gradient(
          135deg,
          var(--color-accent) 0%,
          var(--color-accent-hover) 100%
        );
        border-color: var(--color-accent);
      }

      /* ==========================================================================
   Fullscreen Mode
   ========================================================================== */

      body.fullscreen-mode #left-column {
        width: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
      }

      body.fullscreen-mode #left-column:hover {
        width: 0;
      }

      body.fullscreen-mode #right-column {
        width: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
      }

      body.fullscreen-mode #middle-section {
        width: 100%;
        margin: 0;
        border-radius: 0;
      }

      body.fullscreen-mode #dark-mode-toggle {
        display: none !important;
      }

      body.fullscreen-mode .cursor-dot,
      body.fullscreen-mode .cursor-outline {
        display: none;
      }

      /* ==========================================================================
   Icons & Sections
   ========================================================================== */

      .social-icons,
      .software-icons {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid var(--color-border);
      }

      .social-icons {
        margin-top: 20px;
      }

      .social-icons i,
      .software-icons i,
      .resume-button i {
        font-size: 30px;
        transition: var(--transition-smooth);
        color: var(--color-highlight);
        cursor: none;
      }

      body.dark-mode .social-icons i,
      body.dark-mode .software-icons i,
      body.dark-mode .resume-button i {
        color: var(--color-text);
      }

      .social-icons a,
      .software-icons a,
      .resume-button {
        cursor: none;
      }

      .social-icons i:hover,
      .software-icons i:hover,
      .resume-button i:hover {
        color: var(--color-accent);
        transform: translateY(-3px) scale(1.1);
      }

      body.dark-mode .social-icons i:hover,
      body.dark-mode .software-icons i:hover,
      body.dark-mode .resume-button i:hover {
        color: var(--color-accent);
        transform: translateY(-3px) scale(1.1);
      }

      .social-icons a,
      .software-icons a {
        transition: opacity var(--transition);
      }

      .icon-hovered a:not(:hover) {
        opacity: 0;
      }

      .section-separator {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 10px 0;
      }

      .section-separator span {
        padding: 0 15px;
        font-family: var(--font-body);
        font-size: 14px;
        color: var(--color-text-light);
        transition: color var(--transition);
      }

      .resume-section {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid var(--color-border);
      }

      .resume-button {
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        color: var(--color-text);
        transition: var(--transition);
        cursor: none;
      }

      /* ==========================================================================
   Contact Form
   ========================================================================== */

      #contact-me {
        font-family: var(--font-body);
        margin-top: auto;
        padding-top: 15px;
        border-top: 1px solid var(--color-border);
        width: 100%;
      }

      #contact-me p {
        font-size: 16px;
        margin-bottom: 8px;
      }

      #contact-me form {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 5px;
      }

      #contact-me input,
      #contact-me textarea {
        font-family: var(--font-body);
        width: 100%;
        margin-bottom: 12px;
        padding: 4px;
        border: none;
        border-radius: 3px;
        outline: none;
        border-bottom: 2px solid var(--color-column);
        transition: all var(--transition);
        font-size: 16px; /* Prevents iOS zoom */
        -webkit-appearance: none;
        appearance: none;
      }

      #contact-me input:focus,
      #contact-me textarea:focus {
        border-bottom-color: var(--color-accent);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      #contact-me textarea {
        height: 60px;
      }

      #contact-me button {
        font-family: var(--font-body);
        width: 100px;
        padding: 10px 16px;
        background: linear-gradient(
          135deg,
          var(--color-accent) 0%,
          var(--color-accent-hover) 100%
        );
        color: #fff;
        border: none;
        border-radius: 8px;
        cursor: none;
        font-size: 14px;
        font-weight: 500;
        transition: all var(--transition-smooth);
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(196, 93, 58, 0.3);
      }

      #contact-me button::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition:
          width 0.6s,
          height 0.6s;
      }

      #contact-me button:hover::before {
        width: 300px;
        height: 300px;
      }
      #contact-me button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(196, 93, 58, 0.4);
      }

      /* Dark mode — contact form inputs */
      body.dark-mode #contact-me input,
      body.dark-mode #contact-me textarea {
        background-color: transparent;
        color: var(--color-text);
        border-bottom-color: var(--color-border);
        caret-color: var(--color-accent);
      }

      body.dark-mode #contact-me input::placeholder,
      body.dark-mode #contact-me textarea::placeholder {
        color: var(--color-text-muted);
      }

      body.dark-mode #contact-me input:focus,
      body.dark-mode #contact-me textarea:focus {
        border-bottom-color: var(--color-accent);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      }

      /* ==========================================================================
   Signature Logo
   ========================================================================== */

      .fa-solid.fa-signature {
        display: inline-block;
        font-size: 80px;
        margin-top: 30px;
        background: radial-gradient(
          circle at 50% 50%,
          var(--color-accent) 0%,
          var(--color-highlight) 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: 0;
        transform: scale(0.5);
        transition: transform var(--transition);
      }

      .fa-solid.fa-signature.animate {
        animation: fadeInScale 0.8s forwards;
        animation-delay: 1s;
      }

      #select-page-text {
        text-align: center;
        font-size: 15px;
        color: var(--color-text);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      /* ==========================================================================
   Welcome Hero
   ========================================================================== */

      #welcome-hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 40px 30px;
        text-align: center;
        animation: heroFadeIn 0.8s ease-out;
      }

      @keyframes heroFadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .hero-content {
        max-width: 800px;
      }

      .hero-title {
        font-family: var(--font-display);
        font-size: clamp(48px, 8vw, 72px);
        font-weight: 600;
        line-height: 1;
        margin-bottom: 16px;
        color: var(--color-text);
      }

      .hero-line-1 {
        display: block;
        background: linear-gradient(
          135deg,
          var(--color-text) 0%,
          var(--color-highlight) 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .hero-line-2 {
        display: block;
        font-size: 0.6em;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--color-accent);
        -webkit-text-fill-color: var(--color-accent);
      }

      .hero-tagline {
        font-family: var(--font-body);
        font-size: clamp(14px, 2vw, 18px);
        color: var(--color-text-muted);
        margin-bottom: 50px;
        letter-spacing: 0.05em;
      }

      .project-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 540px;
        margin: 0 auto;
      }

      .project-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 0;
        cursor: pointer;
        transition: all var(--transition-smooth);
        position: relative;
        text-decoration: none;
        color: inherit;
        border-bottom: 1px solid transparent;
      }

      .project-item::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent 0%,
          var(--color-border) 10%,
          var(--color-border) 90%,
          transparent 100%
        );
      }

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

      .project-item:hover {
        padding-left: 8px;
      }

      .project-item:hover .project-num {
        color: var(--color-accent);
      }

      .project-item:hover .project-arrow {
        transform: translateX(4px);
        color: var(--color-accent);
      }

      .project-item:hover h4 {
        color: var(--color-accent);
      }

      .project-num {
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-text-light);
        min-width: 20px;
        letter-spacing: 0.05em;
        transition: color var(--transition);
      }

      .project-icon {
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
      }

      .project-info {
        flex: 1;
        display: flex;
        align-items: baseline;
        gap: 12px;
      }

      .project-item h4 {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 500;
        color: var(--color-text);
        margin: 0;
        transition: color var(--transition);
      }

      .project-tag {
        font-family: var(--font-body);
        font-size: 11px;
        color: var(--color-text-light);
        letter-spacing: 0.03em;
      }

      .project-arrow {
        font-family: var(--font-body);
        font-size: 18px;
        color: var(--color-text-light);
        transition: all var(--transition);
        margin-left: auto;
      }

      .scroll-hint {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        color: var(--color-text-light);
        font-size: 12px;
        animation: bounce 2s infinite;
      }

      @keyframes bounce {
        0%,
        100% {
          transform: translateX(-50%) translateY(0);
        }
        50% {
          transform: translateX(-50%) translateY(5px);
        }
      }

      .scroll-hint i {
        font-size: 14px;
      }

      /* Hide hero when iframe is active */
      #middle-section.iframe-active #welcome-hero {
        display: none;
      }

      /* ==========================================================================
   Iframe Source Badge
   ========================================================================== */

      #iframe-source-badge {
        position: absolute;
        bottom: 16px;
        left: 16px;
        z-index: 50;
        display: none;
        align-items: center;
        gap: 6px;
        padding: 6px 14px 6px 10px;
        background: var(--color-column);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 500;
        color: var(--color-text-muted);
        text-decoration: none;
        letter-spacing: 0.02em;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        transition: all var(--transition);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }

      #iframe-source-badge.visible {
        display: flex;
        animation: fadeInUp 0.4s ease;
      }

      #iframe-source-badge i {
        font-size: 10px;
        color: var(--color-text-light);
        transition: color var(--transition);
      }

      #iframe-source-badge:hover {
        color: var(--color-accent);
        border-color: var(--color-accent);
        transform: translateY(-2px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
      }

      #iframe-source-badge:hover i {
        color: var(--color-accent);
      }

      body.dark-mode #iframe-source-badge {
        background: rgba(30, 30, 30, 0.9);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      }

      /* Project item embedded tag */
      .project-embed-tag {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--font-body);
        font-size: 10px;
        padding: 2px 8px;
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: 10px;
        color: var(--color-text-light);
        letter-spacing: 0.02em;
        transition: all var(--transition);
        white-space: nowrap;
      }

      .project-embed-tag i {
        font-size: 8px;
      }

      .project-item:hover .project-embed-tag {
        color: var(--color-accent);
        border-color: var(--color-accent);
      }

      body.dark-mode .project-embed-tag {
        background: #2a2a2a;
        border-color: #404040;
      }

      @media (max-width: 1366px) {
        #iframe-source-badge {
          bottom: 10px;
          left: 10px;
          font-size: 10px;
          padding: 5px 10px 5px 8px;
        }
      }

      body.dark-mode .project-item::after {
        background: linear-gradient(
          90deg,
          transparent 0%,
          var(--color-border) 10%,
          var(--color-border) 90%,
          transparent 100%
        );
      }

      /* ==========================================================================
   Left Column Pages
   ========================================================================== */

      #left-nav-page {
        min-height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      #left-about-page {
        width: 100%;
        display: block;
        padding: 40px 15px 40px;
        text-align: center;
      }

      #left-about-page h3 {
        font-family: var(--font-display);
        font-size: 28px;
        margin: 0 0 20px;
        color: var(--color-text);
      }

      #about-photo-placeholder {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        margin: 0 auto 20px;
        border: 3px solid var(--color-border);
        overflow: hidden;
        opacity: 0;
        transform: scale(0.5);
      }

      #about-photo-placeholder.animate {
        animation: fadeInScale 0.8s forwards;
      }

      #left-about-page p,
      #left-about-page ul {
        font-family: var(--font-body);
        font-size: 12px;
        line-height: 1.4;
        text-align: left;
        width: 90%;
        max-width: 400px;
        margin: 0 auto 10px;
        color: var(--color-text-muted);
      }

      #left-about-page p {
        opacity: 0;
        transform: translateY(20px);
      }

      #left-about-page p.animate {
        animation: fadeInUp 0.5s forwards;
        animation-delay: 0.6s;
      }

      #left-about-page ul {
        list-style: none;
        padding: 0;
        width: 90%;
        max-width: 400px;
      }

      #left-about-page ul li {
        margin-bottom: 2px;
        padding-left: 10px;
        position: relative;
        text-align: left;
        opacity: 0;
        transform: translateX(-100px);
      }

      #left-about-page ul li::before {
        content: "–";
        position: absolute;
        left: -5px;
        color: var(--color-text-muted);
      }

      /* About Section Enhanced */
      .about-tagline {
        font-size: 12px !important;
        color: var(--color-accent) !important;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        margin-bottom: 15px !important;
        opacity: 1 !important;
        transform: none !important;
      }

      .skills-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        margin: 15px auto;
        max-width: 400px;
        opacity: 0;
        transform: translateY(20px);
      }

      .skills-grid.animate {
        animation: fadeInUp 0.5s forwards;
        animation-delay: 0.5s;
      }

      .skill-tag {
        font-family: var(--font-body);
        font-size: 11px;
        padding: 6px 12px;
        background: var(--color-card-bg);
        border: 1px solid var(--color-border);
        border-radius: 20px;
        color: var(--color-text-muted);
        transition: all var(--transition);
      }

      .skill-tag:hover {
        background: var(--color-accent);
        color: white;
        border-color: var(--color-accent);
        transform: translateY(-2px);
      }

      .stats-row {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin: 20px auto 0;
        padding-top: 20px;
        max-width: 400px;
        border-top: 1px solid var(--color-border);
        opacity: 0;
        transform: translateY(20px);
      }

      .stats-row.animate {
        animation: fadeInUp 0.5s forwards;
        animation-delay: 0.8s;
      }

      .stat {
        text-align: center;
      }

      .stat-number {
        display: block;
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 600;
        color: var(--color-accent);
        line-height: 1;
      }

      .stat-label {
        display: block;
        font-family: var(--font-body);
        font-size: 10px;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-top: 4px;
      }

      body.dark-mode .skill-tag {
        background: var(--color-card-bg);
        border-color: var(--color-border);
      }

      /* ==========================================================================
   Animations
   ========================================================================== */

      @keyframes flash {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes fadeOut {
        from {
          opacity: 1;
          transform: scale(1);
        }
        to {
          opacity: 0;
          transform: scale(0.9);
        }
      }

      @keyframes slideIn {
        from {
          transform: translateX(-100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes slideOut {
        from {
          transform: translateX(0);
          opacity: 1;
        }
        to {
          transform: translateX(100%);
          opacity: 0;
        }
      }

      @keyframes slideInFromLeft {
        from {
          opacity: 0;
          transform: translateX(-100px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @keyframes fadeInScale {
        from {
          opacity: 0;
          transform: scale(0.5);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .fade-in {
        animation: fadeIn 0.5s forwards;
      }
      .fade-out {
        animation: fadeOut 0.5s forwards;
      }
      .slide-in {
        animation: slideIn 0.5s forwards;
      }
      .slide-out {
        animation: slideOut 0.5s forwards;
      }

      #left-column nav ul li.animate,
      #left-about-page ul li.animate {
        animation: slideInFromLeft 0.5s forwards;
      }

      /* Staggered delays */
      #left-column nav ul li:nth-child(1).animate {
        animation-delay: 0.1s;
      }
      #left-column nav ul li:nth-child(2).animate {
        animation-delay: 0.2s;
      }
      #left-column nav ul li:nth-child(3).animate {
        animation-delay: 0.3s;
      }
      #left-column nav ul li:nth-child(4).animate {
        animation-delay: 0.4s;
      }
      #left-column nav ul li:nth-child(5).animate {
        animation-delay: 0.5s;
      }
      #left-column nav ul li:nth-child(6).animate {
        animation-delay: 0.6s;
      }

      #left-about-page ul li:nth-child(1).animate {
        animation-delay: 0.1s;
      }
      #left-about-page ul li:nth-child(2).animate {
        animation-delay: 0.2s;
      }
      #left-about-page ul li:nth-child(3).animate {
        animation-delay: 0.3s;
      }
      #left-about-page ul li:nth-child(4).animate {
        animation-delay: 0.4s;
      }

      /* ==========================================================================
   Scrollbars
   ========================================================================== */

      #left-column::-webkit-scrollbar {
        width: 8px;
      }
      #left-column::-webkit-scrollbar-track {
        background: var(--color-column);
      }
      #left-column::-webkit-scrollbar-thumb {
        background-color: #c1c1c1;
        border-radius: 4px;
      }
      #left-column::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
      }

      body.dark-mode #left-column::-webkit-scrollbar-thumb {
        background-color: #555;
      }
      body.dark-mode #left-column::-webkit-scrollbar-thumb:hover {
        background-color: #777;
      }

      /* ==========================================================================
   Active States (Mobile Menu Open)
   ========================================================================== */

      /* Active states moved to media query below */

      /* ==========================================================================
   Mobile Swipe Panel System
   ========================================================================== */

      .mobile-panel-container {
        display: none;
      }

      /* Panel indicator dots */
      .panel-indicator {
        display: none;
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 150;
        gap: 10px;
        padding: 8px 16px;
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(10px);
        border-radius: 20px;
      }

      .panel-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--color-border);
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .panel-dot.active {
        background: var(--color-accent);
        transform: scale(1.3);
      }

      body.dark-mode .panel-indicator {
        background: rgba(255, 255, 255, 0.1);
      }

      /* Swipe hint animation */
      .swipe-hint {
        display: none;
        position: fixed;
        bottom: 70px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 150;
        color: var(--color-text-muted);
        font-family: var(--font-body);
        font-size: 12px;
        gap: 8px;
        align-items: center;
        animation: swipeHintFade 3s ease forwards;
        opacity: 0;
      }

      .swipe-hint i {
        animation: swipeArrow 1.5s ease-in-out infinite;
      }

      @keyframes swipeArrow {
        0%,
        100% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(5px);
        }
      }

      @keyframes swipeHintFade {
        0% {
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          display: none;
        }
      }

      /* ==========================================================================
   Responsive - Tablet & Mobile (max-width: 1366px)
   ========================================================================== */

      @media (max-width: 1366px) {
        #left-column,
        #right-column {
          display: none;
        }

        #left-column:hover {
          width: 20%;
        }

        /* Hide fullscreen toggle on mobile/tablet */
        #fullscreen-toggle {
          display: none !important;
        }

        #middle-section {
          width: 100%;
          margin: 0;
          border-radius: 0;
        }

        /* Hero responsive */
        #welcome-hero {
          padding: 30px 20px;
        }

        .hero-title {
          font-size: clamp(36px, 10vw, 56px);
        }

        .project-list {
          max-width: 100%;
          padding: 0 10px;
        }

        .project-item {
          padding: 14px 0;
          gap: 12px;
        }

        .project-icon {
          font-size: 20px;
          min-width: 28px;
        }

        .project-item h4 {
          font-size: 15px;
        }

        .project-tag {
          font-size: 10px;
        }

        .project-info {
          flex-direction: column;
          gap: 2px;
          align-items: flex-start;
        }

        .scroll-hint {
          display: none;
        }

        #dark-mode-toggle {
          opacity: 0;
          pointer-events: none;
          left: 40px;
        }

        #dark-mode-toggle.visible {
          opacity: 1;
          pointer-events: auto;
        }

        /* Mobile header replaces floating hamburger + dark mode toggle */
        #mobile-header {
          display: flex;
        }

        #hamburger-menu,
        #dark-mode-toggle {
          display: none !important;
        }

        /* Offset iframe and middle-section below the 48px header */
        iframe {
          height: calc(100dvh - 48px);
        }

        #middle-section {
          padding-top: 48px;
        }

        .cursor-dot,
        .cursor-outline {
          opacity: 0;
        }

        /* Panel indicator visible on mobile when menu is open */
        .panel-indicator.visible {
          display: flex;
        }

        .swipe-hint.visible {
          display: flex;
        }

        /* Active states - columns visible */
        #left-column.active,
        #right-column.active {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100vh;
          z-index: 100;
          transition:
            transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease;
        }

        #middle-section.active {
          display: none;
        }

        #left-column.active {
          display: block;
          padding: 8px;
          transform: translateX(0);
          opacity: 1;
        }

        /* Left column slides out to the left when right panel is shown */
        #left-column.active.panel-hidden {
          transform: translateX(-100%);
          opacity: 0;
          pointer-events: none;
        }

        #left-column.active nav {
          margin-top: 60px;
        }
        #left-column.active nav li {
          font-size: 22px;
          padding: 14px 0;
          margin: 0;
        }
        #left-column.active .fa-solid.fa-signature {
          font-size: 70px;
          margin-top: 30px;
        }

        #right-column.active {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          padding: 60px 20px 70px;
          z-index: 99;
          transform: translateX(100%);
          opacity: 0;
          pointer-events: none;
          overflow: hidden;
        }

        /* Right column slides in from the right when shown */
        #right-column.active.panel-visible {
          transform: translateX(0);
          opacity: 1;
          pointer-events: auto;
          z-index: 101;
        }

        #right-column.active .social-icons {
          padding: 8px 0;
          margin-top: 0;
          gap: 30px;
          border-bottom: 1px solid var(--color-border);
        }

        #right-column.active .software-icons {
          padding: 8px 0;
          margin-top: 0;
          gap: 30px;
        }

        #right-column.active .social-icons i,
        #right-column.active .software-icons i,
        #right-column.active .resume-button i {
          font-size: 28px;
        }

        #right-column.active .section-separator {
          margin: 4px 0;
        }

        #right-column.active .section-separator span {
          font-size: 10px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
        }

        #right-column.active .resume-section {
          padding: 8px 0;
        }

        #right-column.active #contact-me {
          margin-top: 0;
          padding: 10px 0 0;
          width: 100%;
          max-width: 280px;
          border-top: none;
        }

        #right-column.active #contact-me p {
          font-size: 14px;
          margin-bottom: 8px;
          font-weight: 500;
        }

        #right-column.active #contact-me input,
        #right-column.active #contact-me textarea {
          margin-bottom: 8px;
          padding: 8px;
          font-size: 16px;
          width: 100%;
          border-radius: 4px;
          margin-left: 0;
          margin-right: 0;
        }

        #right-column.active #contact-me textarea {
          height: 50px;
        }

        #right-column.active #contact-me button {
          width: 100%;
          padding: 10px;
          font-size: 14px;
          border-radius: 4px;
        }

        /* About page responsive */
        #left-about-page {
          padding-bottom: 80px;
        }
        #left-about-page h3 {
          font-size: 20px;
        }
        #left-about-page p,
        #left-about-page ul {
          font-size: 15px;
        }
        #about-photo-placeholder {
          width: 180px;
          height: 180px;
          margin-bottom: 15px;
        }

        #left-about-page.active h3 {
          font-size: 18px;
        }
        #left-about-page.active p,
        #left-about-page.active ul li {
          font-size: 11px;
        }
        #left-about-page.active #about-photo-placeholder {
          width: 160px;
          height: 160px;
          margin-bottom: 12px;
        }

        /* Disable hover effects on mobile */
        .icon-hovered a:not(:hover) {
          opacity: 1;
        }
        body.dark-mode #hamburger-menu.icon-hidden {
          opacity: 1;
        }

        #iframe1,
        #iframe3 {
          -webkit-overflow-scrolling: touch;
          overflow-y: scroll;
        }
      }

      /* ==========================================================================
   Responsive - Small Mobile (max-width: 1000px)
   ========================================================================== */

      @media (max-width: 1000px) {
        #right-column {
          padding: 5px;
        }
        #right-column p {
          font-size: 12px;
        }

        .social-icons {
          margin-top: 10px;
          padding: 5px 0;
        }
        .social-icons i,
        .software-icons i,
        .resume-button i {
          font-size: 16px;
        }
        .software-icons,
        .resume-section {
          padding: 5px 0;
        }
        .section-separator {
          margin: 5px 0;
        }
        .section-separator span {
          padding: 0 8px;
          font-size: 8px;
        }

        #contact-me {
          padding-top: 35px;
        }
        #contact-me p {
          font-size: 12px;
          margin-bottom: 5px;
        }
        #contact-me input,
        #contact-me textarea {
          margin-bottom: 10px;
          padding: 3px;
          font-size: 12px;
        }
        #contact-me textarea {
          height: 60px;
        }
        #contact-me button {
          width: 80px;
          padding: 5px;
          font-size: 10px;
        }

        /* Right column active - keep larger sizes on small mobile */
        #right-column.active .social-icons i,
        #right-column.active .software-icons i,
        #right-column.active .resume-button i {
          font-size: 32px;
        }

        #right-column.active .section-separator span {
          font-size: 12px;
        }

        #right-column.active #contact-me input,
        #right-column.active #contact-me textarea {
          padding: 10px;
          font-size: 16px;
        }

        #right-column.active #contact-me button {
          width: 100%;
          padding: 12px;
          font-size: 15px;
        }

        #left-column.active {
          padding: 5px;
        }
        #left-column.active nav li {
          font-size: 20px;
          padding: 12px 0;
        }
        #left-column.active .fa-solid.fa-signature {
          font-size: 60px;
          margin-top: 20px;
        }

        #left-about-page h3 {
          font-size: 18px;
        }
        #left-about-page p {
          font-size: 12px;
          line-height: 1.2;
          margin-bottom: 8px;
        }
        #left-about-page ul {
          font-size: 11px;
          line-height: 1.3;
          margin: 0;
        }
        #left-about-page ul li {
          margin: 3px 0 0;
          font-size: 11px;
          line-height: 1.3;
          padding: 1px 0 1px 10px;
        }
        #about-photo-placeholder {
          width: 160px;
          height: 160px;
          margin-bottom: 10px;
        }

        #left-about-page.active h3 {
          font-size: 16px;
        }
        #left-about-page.active p,
        #left-about-page.active ul li {
          font-size: 10px;
        }
        #left-about-page.active ul li {
          margin-bottom: 5px;
        }
        #left-about-page.active #about-photo-placeholder {
          width: 140px;
          height: 140px;
          margin-bottom: 10px;
        }

        /* Hero small mobile */
        .project-item {
          padding: 12px 0;
          gap: 10px;
        }

        .project-num {
          font-size: 10px;
          min-width: 16px;
        }

        .project-icon {
          font-size: 18px;
          min-width: 24px;
        }

        .project-item h4 {
          font-size: 14px;
        }

        .project-arrow {
          font-size: 16px;
        }

        .hero-tagline {
          margin-bottom: 30px;
        }

        /* Skills and stats responsive */
        .skills-grid {
          gap: 6px;
        }

        .skill-tag {
          font-size: 10px;
          padding: 4px 10px;
        }

        .stats-row {
          gap: 20px;
        }

        .stat-number {
          font-size: 22px;
        }

        .stat-label {
          font-size: 9px;
        }
      }

      /* ==========================================================================
         Portfolio Landing Layout (vertical scroll redesign)
         ========================================================================== */

      html {
        scroll-behavior: smooth;
        scroll-padding-top: var(--header-offset, 88px);
      }

      section[id] {
        scroll-margin-top: var(--header-offset, 88px);
      }

      body {
        cursor: auto;
      }

      img {
        max-width: 100%;
      }

      /* Restore normal cursors (custom cursor removed) */
      a,
      .social-icons a,
      .software-icons a,
      .resume-button,
      .social-icons i,
      .software-icons i,
      .resume-button i,
      #contact-me button,
      .project-card {
        cursor: pointer;
      }

      /* ---- Sticky header ---- */
      #site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 14px 32px;
        border-bottom: 1px solid var(--color-border);
      }

      /*
       * The frosted-glass blur lives on a pseudo-element rather than on
       * #site-header itself. backdrop-filter on the header would turn it into
       * the containing block for position:fixed descendants, which would break
       * the mobile nav panel (it must anchor to the viewport).
       */
      #site-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--color-bg);
        background: color-mix(in srgb, var(--color-bg) 85%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        color: var(--color-text);
      }

      .brand-sig.fa-signature {
        opacity: 1;
        transform: none;
        font-size: 30px;
        margin-top: 0;
        animation: none;
        background: radial-gradient(
          circle at 50% 50%,
          var(--color-accent) 0%,
          var(--color-highlight) 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }

      .brand-name {
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.02em;
      }

      .site-nav {
        display: flex;
        gap: 28px;
        margin-left: auto;
      }

      .site-nav a {
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 500;
        text-decoration: none;
        color: var(--color-text-muted);
        letter-spacing: 0.02em;
        position: relative;
        transition: color var(--transition);
      }

      .site-nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: var(--color-accent);
        transition: width var(--transition);
      }

      .site-nav a:hover,
      .site-nav a.active {
        color: var(--color-accent);
      }

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

      /* Social icons only appear inside the mobile dropdown menu */
      .nav-socials {
        display: none;
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 14px;
        position: relative;
        z-index: 1001;
      }

      /* Override old fixed dark-mode toggle so it lives inside the header */
      #site-header #dark-mode-toggle {
        position: static;
        top: auto;
        left: auto;
        font-size: 20px;
        line-height: 1;
        background: none;
        border: none;
        color: var(--color-text);
        cursor: pointer;
        padding: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      #site-header #dark-mode-toggle:hover {
        animation: flash 1s ease-in-out;
        transform: scale(1.1);
      }

      #site-header #dark-mode-toggle:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 3px;
        border-radius: 4px;
      }

      /* Dark mode toggle lives in the mobile dropdown only */
      .nav-dark-toggle {
        display: none;
      }

      #nav-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 22px;
        color: var(--color-text);
        cursor: pointer;
        padding: 4px;
      }

      #nav-toggle:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 3px;
        border-radius: 4px;
      }

      /* ---- Section scaffolding ---- */
      .section {
        padding: 96px 32px;
      }

      .section-inner {
        max-width: 1080px;
        margin: 0 auto;
      }

      .section-eyebrow {
        display: inline-block;
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-accent);
        margin-bottom: 12px;
      }

      .section-title {
        font-family: var(--font-display);
        font-size: clamp(30px, 4vw, 44px);
        font-weight: 600;
        margin: 0 0 32px;
        color: var(--color-text);
      }

      /* ---- Hero ---- */
      .hero-section {
        position: relative;
        min-height: calc(100dvh - 64px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 80px 32px 120px;
        background:
          radial-gradient(
            ellipse at 20% 20%,
            rgba(196, 93, 58, 0.06) 0%,
            transparent 50%
          ),
          radial-gradient(
            ellipse at 80% 80%,
            rgba(45, 90, 74, 0.06) 0%,
            transparent 50%
          );
      }

      body.dark-mode .hero-section {
        background:
          radial-gradient(
            ellipse at 20% 20%,
            rgba(224, 123, 90, 0.08) 0%,
            transparent 50%
          ),
          radial-gradient(
            ellipse at 80% 80%,
            rgba(74, 155, 127, 0.08) 0%,
            transparent 50%
          );
      }

      .hero-video-wrap {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
      }

      .hero-video-poster {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
      }

      .hero-section.hero-video-playing .hero-video {
        opacity: 1;
        visibility: visible;
      }

      .hero-section.hero-video-playing .hero-video-poster {
        opacity: 0;
        visibility: hidden;
      }

      .hero-video::-webkit-media-controls,
      .hero-video::-webkit-media-controls-enclosure,
      .hero-video::-webkit-media-controls-panel,
      .hero-video::-webkit-media-controls-play-button,
      .hero-video::-webkit-media-controls-start-playback-button,
      .hero-video::-webkit-media-controls-overlay-play-button {
        display: none !important;
        -webkit-appearance: none;
        appearance: none;
      }

      .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--color-bg);
        opacity: 0.55;
      }

      .hero-section .hero-content {
        position: relative;
        z-index: 2;
        max-width: 760px;
      }

      .hero-section .scroll-hint {
        z-index: 2;
      }

      .hero-cta {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 8px;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 500;
        padding: 13px 26px;
        border-radius: 10px;
        text-decoration: none;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all var(--transition-smooth);
      }

      .btn-primary {
        background: linear-gradient(
          135deg,
          var(--color-accent) 0%,
          var(--color-accent-hover) 100%
        );
        color: #fff;
        box-shadow: 0 4px 15px rgba(196, 93, 58, 0.3);
      }

      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(196, 93, 58, 0.4);
      }

      .btn-secondary {
        background: transparent;
        color: var(--color-text);
        border-color: var(--color-border);
      }

      .btn-secondary:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
        transform: translateY(-2px);
      }

      .hero-socials {
        border-bottom: none !important;
        width: auto !important;
        gap: 28px;
        margin: 36px auto 0 !important;
        justify-content: center;
      }

      .hero-section .scroll-hint {
        cursor: pointer;
        text-decoration: none;
      }

      .hero-video-play {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 3;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.35);
        color: rgba(255, 255, 255, 0.92);
        cursor: pointer;
        transition:
          background var(--transition),
          border-color var(--transition),
          transform var(--transition);
      }

      .hero-video-play:not([hidden]) {
        display: inline-flex;
      }

      .hero-video-play[hidden] {
        display: none !important;
      }

      .hero-video-play:hover {
        background: rgba(0, 0, 0, 0.5);
        border-color: rgba(255, 255, 255, 0.55);
        transform: scale(1.05);
      }

      .hero-video-play:focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
      }

      .hero-video-play i {
        font-size: 11px;
        margin-left: 2px;
      }

      /* ---- About ---- */
      .about-grid {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 56px;
        align-items: start;
      }

      .about-photo {
        display: flex;
        justify-content: center;
      }

      .about-photo-stage {
        position: relative;
        perspective: 900px;
        opacity: 0;
        transform: scale(0.9);
        transition:
          opacity 0.7s ease,
          transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .about-photo-stage.in {
        opacity: 1;
        transform: none;
      }

      .about-photo-ring {
        position: absolute;
        inset: -16px;
        border-radius: 50%;
        background: linear-gradient(
          135deg,
          var(--color-accent),
          var(--color-highlight)
        );
        opacity: 0.16;
        filter: blur(6px);
        z-index: 0;
        transition:
          opacity 0.4s ease,
          transform 0.5s ease;
      }

      .about-photo-stage:hover .about-photo-ring {
        opacity: 0.32;
        transform: scale(1.05);
      }

      .about-section #about-photo-placeholder {
        position: relative;
        z-index: 1;
        width: 240px;
        height: 240px;
        opacity: 1;
        transform: none;
        transform-style: preserve-3d;
        will-change: transform;
        transition:
          transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.4s ease;
      }

      .about-photo-stage:hover #about-photo-placeholder {
        box-shadow: 0 28px 48px rgba(0, 0, 0, 0.22);
      }

      body.dark-mode .about-photo-stage:hover #about-photo-placeholder {
        box-shadow: 0 28px 48px rgba(0, 0, 0, 0.55);
      }

      .about-text p {
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.7;
        color: var(--color-text-muted);
        max-width: 560px;
        margin: 0 0 18px;
      }

      .about-text .about-tagline {
        margin-top: 4px;
      }

      .about-text .skills-grid {
        justify-content: flex-start;
        margin-left: 0;
      }

      .about-roles {
        list-style: none;
        padding: 0;
        margin: 8px 0 24px;
        display: grid;
        gap: 8px;
      }

      .about-roles li {
        position: relative;
        padding-left: 22px;
        font-family: var(--font-body);
        font-size: 15px;
        color: var(--color-text-muted);
      }

      .about-roles li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-accent);
      }

      .about-text .stats-row {
        justify-content: flex-start;
        margin-left: 0;
      }

      .about-actions {
        margin-top: 28px;
      }

      .about-actions .resume-button {
        display: inline-flex;
        gap: 10px;
        align-items: center;
        padding: 12px 22px;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        color: var(--color-text);
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 500;
      }

      .about-actions .resume-button i {
        font-size: 18px;
        color: var(--color-accent);
      }

      .about-actions .resume-button:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
        transform: translateY(-2px);
      }

      /* Staggered entrance for about text */
      .about-text > * {
        opacity: 0;
        transform: translateY(22px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }

      .about-text.in > * {
        opacity: 1;
        transform: none;
      }

      .about-text.in > *:nth-child(1) {
        transition-delay: 0.05s;
      }
      .about-text.in > *:nth-child(2) {
        transition-delay: 0.12s;
      }
      .about-text.in > *:nth-child(3) {
        transition-delay: 0.19s;
      }
      .about-text.in > *:nth-child(4) {
        transition-delay: 0.26s;
      }
      .about-text.in > *:nth-child(5) {
        transition-delay: 0.33s;
      }
      .about-text.in > *:nth-child(6) {
        transition-delay: 0.4s;
      }
      .about-text.in > *:nth-child(7) {
        transition-delay: 0.47s;
      }
      .about-text.in > *:nth-child(8) {
        transition-delay: 0.54s;
      }

      /* Skill tags: subtle 3D lift on hover */
      .about-text .skill-tag {
        transition:
          transform 0.25s ease,
          background 0.25s ease,
          color 0.25s ease,
          border-color 0.25s ease,
          box-shadow 0.25s ease;
      }

      .about-text .skill-tag:hover {
        transform: translateY(-3px) scale(1.06);
        box-shadow: 0 8px 18px rgba(196, 93, 58, 0.25);
      }

      /* Stat items: lift on hover */
      .about-text .stat {
        transition: transform 0.3s ease;
      }

      .about-text .stat:hover {
        transform: translateY(-4px);
      }

      /* ---- Projects ---- */
      /* ---- Projects (3D interactive showcase, no cards) ---- */
      .projects-showcase {
        perspective: 1400px;
        border-top: 1px solid var(--color-border);
      }

      .project-row {
        position: relative;
        display: flex;
        align-items: center;
        gap: 24px;
        width: 100%;
        padding: 30px 20px;
        text-align: left;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--color-border);
        color: inherit;
        font: inherit;
        cursor: pointer;
        text-decoration: none;
        transform-style: preserve-3d;
        opacity: 0;
        transform: translateY(26px) rotateX(-10deg);
        transform-origin: top center;
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }

      .project-row.is-in {
        opacity: 1;
        transform: none;
      }

      .project-row::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(
          var(--color-accent),
          var(--color-highlight)
        );
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.35s ease;
      }

      .project-row:hover::before {
        transform: scaleY(1);
      }

      .project-row:hover {
        background: linear-gradient(
          90deg,
          color-mix(in srgb, var(--color-accent) 8%, transparent),
          transparent 70%
        );
      }

      .project-index {
        font-family: var(--font-display);
        font-size: 30px;
        font-weight: 600;
        line-height: 1;
        color: var(--color-text-light);
        opacity: 0.5;
        min-width: 48px;
        transition:
          transform 0.35s ease,
          color 0.3s ease,
          opacity 0.3s ease;
      }

      .project-row:hover .project-index {
        transform: translateZ(30px);
        color: var(--color-accent);
        opacity: 1;
      }

      .project-icon3d {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--color-column);
        font-size: 30px;
        transition:
          transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.4s ease;
      }

      .project-icon3d img {
        width: 30px;
        height: 30px;
        object-fit: contain;
      }

      .project-row:hover .project-icon3d {
        transform: translateZ(60px) rotateY(12deg) scale(1.08);
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18);
      }

      .project-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        transition: transform 0.35s ease;
      }

      .project-row:hover .project-body {
        transform: translateZ(38px);
      }

      .project-name {
        font-family: var(--font-display);
        font-size: clamp(20px, 2.4vw, 26px);
        font-weight: 600;
        color: var(--color-text);
        transition: color 0.3s ease;
      }

      .project-row:hover .project-name {
        color: var(--color-accent);
      }

      .project-meta {
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-accent);
      }

      .project-desc {
        font-family: var(--font-body);
        font-size: 14px;
        line-height: 1.6;
        color: var(--color-text-muted);
        margin: 2px 0 0;
        max-width: 60ch;
      }

      .project-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        flex-shrink: 0;
        border-radius: 50%;
        border: 1px solid var(--color-border);
        color: var(--color-text-light);
        font-size: 16px;
        transition:
          transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
          color 0.3s ease,
          border-color 0.3s ease,
          background 0.3s ease;
      }

      .project-row:hover .project-cta {
        transform: translateZ(50px);
        color: #fff;
        border-color: var(--color-accent);
        background: var(--color-accent);
      }

      body.dark-mode .project-icon3d {
        background: #2a2a2a;
      }

      body.dark-mode .project-row:hover .project-icon3d {
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
      }

      /* Scroll-activated state (touch / no-hover devices) */
      .project-row.is-active::before {
        transform: scaleY(1);
      }

      .project-row.is-active {
        background: linear-gradient(
          90deg,
          color-mix(in srgb, var(--color-accent) 8%, transparent),
          transparent 70%
        );
      }

      .project-row.is-active .project-index {
        transform: translateZ(24px);
        color: var(--color-accent);
        opacity: 1;
      }

      .project-row.is-active .project-icon3d {
        transform: translateZ(30px) scale(1.08);
        box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
      }

      .project-row.is-active .project-name {
        color: var(--color-accent);
      }

      .project-row.is-active .project-cta {
        transform: translateZ(24px);
        color: #fff;
        border-color: var(--color-accent);
        background: var(--color-accent);
      }

      body.dark-mode .project-row.is-active .project-icon3d {
        box-shadow: 0 14px 26px rgba(0, 0, 0, 0.5);
      }

      @media (max-width: 640px) {
        .project-row {
          gap: 16px;
          padding: 22px 16px;
        }
        .project-index {
          display: none;
        }
        .project-icon3d {
          width: 50px;
          height: 50px;
          font-size: 24px;
        }
        .project-desc {
          display: none;
        }
        /* Soften the pop so the icon never grows over the accent bar */
        .project-row.is-active .project-icon3d {
          transform: translateZ(0) scale(1.06);
        }
        .project-row.is-active .project-cta,
        .project-row.is-active .project-index {
          transform: none;
        }
      }

      /* ---- Contact ---- */
      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 56px;
        align-items: start;
      }

      .contact-intro p {
        font-family: var(--font-body);
        font-size: 16px;
        line-height: 1.7;
        color: var(--color-text-muted);
        max-width: 420px;
        margin: 0 0 24px;
      }

      .contact-intro .social-icons {
        border-bottom: none;
        width: auto;
        gap: 28px;
        justify-content: flex-start;
        margin-top: 8px;
        padding: 0;
      }

      .contact-section #contact-me {
        margin-top: 0;
        border-top: none;
        padding-top: 0;
        max-width: 460px;
      }

      .contact-section #contact-me p {
        font-size: 18px;
        font-family: var(--font-display);
      }

      .contact-section #contact-me form {
        align-items: stretch;
      }

      .contact-section #contact-me button {
        width: 140px;
        align-self: flex-start;
      }

      /* ---- Footer ---- */
      #site-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        padding: 28px 32px;
        border-top: 1px solid var(--color-border);
        font-family: var(--font-body);
        font-size: 13px;
        color: var(--color-text-light);
      }

      #site-footer .social-icons {
        border-bottom: none;
        width: auto;
        margin-top: 0;
        gap: 22px;
        padding: 0;
      }

      #site-footer .social-icons i {
        font-size: 22px;
      }

      /* ---- Reveal animation ---- */
      .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.6s ease,
          transform 0.6s ease;
      }

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

      /* ---- Project modal ---- */
      .modal {
        position: fixed;
        inset: 0;
        z-index: 5000;
        display: none;
        flex-direction: column;
        background: var(--color-bg);
      }

      .modal.open {
        display: flex;
      }

      body.modal-open {
        overflow: hidden;
      }

      .modal-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 18px;
        background: var(--color-column);
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
      }

      .modal-title {
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 600;
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .modal-actions {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .modal-actions #iframe-source-badge {
        position: static;
        bottom: auto;
        left: auto;
      }

      #modal-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--color-text-muted);
        cursor: pointer;
        font-size: 18px;
        padding: 6px;
        border-radius: 6px;
        transition: color var(--transition);
      }

      #modal-close:hover {
        color: var(--color-accent);
      }

      .modal-body {
        position: relative;
        flex: 1;
        background: #fff;
      }

      .modal-body iframe {
        width: 100%;
        height: 100%;
      }

      /* ---- Contact feedback modal ---- */
      .contact-modal {
        position: fixed;
        inset: 0;
        z-index: 6000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }

      .contact-modal.open {
        display: flex;
      }

      .contact-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
      }

      .contact-modal-panel {
        position: relative;
        background: var(--color-card-bg);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        padding: 28px 32px;
        max-width: 380px;
        width: 100%;
        text-align: center;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
      }

      .contact-modal-message {
        margin: 0 0 20px;
        font-family: var(--font-body);
        font-size: 15px;
        line-height: 1.5;
        color: var(--color-text);
      }

      .contact-modal-panel .btn {
        min-width: 100px;
      }

      /* ---- Responsive ---- */
      @media (max-width: 860px) {
        .about-grid,
        .contact-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .about-photo {
          justify-content: flex-start;
          padding-top: 20px;
        }

        .about-photo-ring {
          inset: -10px;
        }

        /* ---- Mobile nav: demo3-style reveal sliding in from the right ---- */
        .site-nav {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: auto;
          width: min(78vw, 300px);
          flex-direction: column;
          align-items: flex-end;
          justify-content: center;
          gap: 8px;
          margin: 0;
          padding: 88px 28px 28px;
          background: none;
          border: none;
          box-shadow: none;
          z-index: 900;
          pointer-events: none;
        }
        .site-nav a {
          padding: 16px 0;
          font-size: 22px;
          font-weight: 600;
          text-align: right;
          color: var(--color-text);
          opacity: 0;
          transform: translateX(60px);
          transition:
            opacity 0.4s ease,
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .site-nav a::after {
          left: auto;
          right: 0;
        }
        body.menu-open .site-nav a {
          opacity: 1;
          transform: translateX(0);
          pointer-events: auto;
        }
        body.menu-open .site-nav a:nth-child(1) {
          transition-delay: 0.12s;
        }
        body.menu-open .site-nav a:nth-child(2) {
          transition-delay: 0.2s;
        }
        body.menu-open .site-nav a:nth-child(3) {
          transition-delay: 0.28s;
        }

        #site-header #dark-mode-toggle {
          display: none;
        }

        .nav-socials {
          display: flex;
          align-items: center;
          gap: 24px;
          margin-top: 32px;
          justify-content: flex-end;
          opacity: 0;
          transform: translateX(60px);
          pointer-events: none;
          transition:
            opacity 0.4s ease,
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .nav-socials a {
          color: var(--color-text-muted);
          font-size: 24px;
          line-height: 1;
          transition:
            color 0.25s ease,
            transform 0.25s ease;
        }
        .nav-socials a:hover,
        .nav-socials a:active {
          color: var(--color-accent);
          transform: translateY(-2px);
        }
        body.menu-open .nav-socials {
          opacity: 1;
          transform: translateX(0);
          transition-delay: 0.36s;
          pointer-events: auto;
        }

        .nav-dark-toggle {
          position: absolute;
          right: 28px;
          bottom: 28px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 4px;
          margin: 0;
          font-size: 24px;
          line-height: 1;
          color: var(--color-text-muted);
          background: none;
          border: none;
          cursor: pointer;
          opacity: 0;
          transform: translateX(60px);
          pointer-events: none;
          transition:
            opacity 0.4s ease,
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            color 0.25s ease;
        }
        .nav-dark-toggle:hover,
        .nav-dark-toggle:active {
          color: var(--color-accent);
        }
        .nav-dark-toggle:focus-visible {
          outline: 2px solid var(--color-accent);
          outline-offset: 4px;
          border-radius: 4px;
        }
        body.menu-open .nav-dark-toggle {
          opacity: 1;
          transform: translateX(0);
          pointer-events: auto;
          transition-delay: 0.44s;
        }

        /* demo3 effect: the page content scales down + fades away */
        main,
        #site-footer {
          transform-origin: center center;
          transition:
            transform 0.4s ease-in,
            opacity 0.4s ease-in,
            visibility 0.4s ease-in;
        }
        body.menu-open {
          overflow: hidden;
        }
        body.menu-open main,
        body.menu-open #site-footer {
          transform: scale(0.85);
          opacity: 0;
          visibility: hidden;
        }

        #nav-toggle {
          display: inline-flex;
        }
        .section {
          padding: 64px 20px;
        }
        #site-header {
          padding: 12px 20px;
        }

        #site-header::before {
          background: var(--color-bg);
        }

        /* Hero: compact bottom-aligned controls so more video stays visible */
        .hero-section {
          justify-content: flex-end;
          padding: 0 20px 88px;
        }

        .hero-overlay {
          opacity: 0.4;
        }

        .hero-section .hero-content {
          margin-top: auto;
          width: 100%;
        }

        .hero-title {
          font-size: clamp(30px, 8.5vw, 44px);
          margin-bottom: 8px;
        }

        .hero-tagline {
          font-size: 12px;
          margin-bottom: 14px;
          letter-spacing: 0.04em;
        }

        .hero-cta {
          margin-top: 0;
          gap: 10px;
          justify-content: center;
        }

        .hero-section .btn {
          padding: 8px 14px;
          font-size: 12px;
          border-radius: 8px;
        }

        .hero-section .btn-primary {
          box-shadow: 0 2px 10px rgba(196, 93, 58, 0.22);
        }

        .hero-socials {
          margin: 12px auto 0 !important;
          gap: 18px;
        }

        .hero-section .scroll-hint {
          bottom: 20px;
          font-size: 11px;
        }
      }

      @media (max-width: 520px) {
        .hero-cta {
          flex-direction: row;
          width: auto;
          flex-wrap: wrap;
        }

        .hero-section .btn {
          justify-content: center;
          width: auto;
          flex: 0 1 auto;
        }
        .contact-section #contact-me button {
          width: 100%;
          padding: 13px 26px;
          font-size: 15px;
          border-radius: 10px;
        }
      }