/* Shared site stylesheet, extracted from index.html / projects/index.html / contact/index.html (previously ~57KB of near-identical inline <style> duplicated on every page load). See each page's <head> for the small page-specific override block that still exists for genuine per-page differences. */

link[rel="icon"] { border-radius: 50%; }

    .breadcrumb { font-family: 'Fira Code', monospace; font-size: 12px; color: var(--muted); margin-bottom: 20px; }
    .breadcrumb a { color: var(--muted); text-decoration: none; }
    .breadcrumb a:hover { color: var(--accent); }
    .breadcrumb .sep { margin: 0 6px; opacity: 0.5; }
    .breadcrumb [aria-current="page"] { color: var(--ink); }

:root {
    --ink:    #0a0e14;
    --ink-rgb: 10, 14, 20;
    --paper:  #f5f0e8;
    --paper-rgb: 245, 240, 232;
    --accent: #c8401a;
    --blue:   #1a4fd6;
    --muted:  #7a7060;
    --rule:   #d4cec2;
    --card:   #ede8de;
    --hero-top: 100px;
    color-scheme: light;
  }
  
  body.dark-mode {
    --ink:    #f5f0e8;
    --ink-rgb: 245, 240, 232;
    --paper:  #0a0e14;
    --paper-rgb: 10, 14, 20;
    --accent: #ff4b2b;
    --blue:   #3b82f6;
    --muted:  #a1a1aa;
    --rule:   #27272a;
    --card:   #18181b;
    color-scheme: dark;
  }

  :root, body.dark-mode {
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --shadow-sm: 0 8px 24px rgba(10,14,20,0.06);
    --shadow-md: 0 20px 48px rgba(10,14,20,0.10);
    --shadow-lg: 0 32px 72px rgba(10,14,20,0.16);
  }

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

  html { scroll-behavior: smooth; }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none;
    opacity: 0;
    transition: opacity 0.8s ease-in, background 0.3s ease, color 0.3s ease;
  }

  #scrollProgress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: var(--accent);
    z-index: 999;
    transition: width 0.1s ease-out;
  }
  
  /* ── Theme Toggle ── */
  .theme-toggle {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink);
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
    font-size: 16px;
    position: relative; z-index: 102;
  }
  .theme-toggle:hover { border-color: var(--accent); color: var(--accent); background: var(--card); }
  .theme-toggle .fa-sun { display: none; }
  body.dark-mode .theme-toggle .fa-moon { display: none; }
  body.dark-mode .theme-toggle .fa-sun { display: block; }
  body.loaded { opacity: 1; }

  /* ── Pre-loader ── */
  #preloader {
    position: fixed; inset: 0; z-index: 10000;
    background: var(--ink);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
  }
  #preloader.hidden { transform: translateY(-100%); }
  .loader-text {
    font-family: 'Playfair Display', serif;
    font-size: 32px; color: var(--paper);
    overflow: hidden;
  }
  .loader-text span {
    display: inline-block;
    transform: translateY(100%);
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

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

  /* ── Custom cursor ── */
  #cursor {
    position: fixed; top: 0; left: 0; z-index: 9999;
    width: 10px; height: 10px;
    background: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.15s ease, opacity 0.2s;
  }
  #cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 9998;
    width: 36px; height: 36px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(.16,1,.3,1), width 0.3s, height 0.3s, border-color 0.3s;
  }
  body.dark-mode #cursor-ring { border-color: #ff4b2b; }
  body:has(a:hover) #cursor-ring,
  body:has(button:hover) #cursor-ring { width: 56px; height: 56px; border-color: var(--accent); }

  /* ── Noise overlay ── */
  body::before {
    content: '';
    position: fixed; inset: 0; z-index: 9990;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }

  /* ── Nav ── */
  .site-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 72px;
    background: transparent;
    transition: background 0.3s ease;
    gap: 20px;
  }
  .nav-right {
    display: flex; align-items: center; gap: 16px;
  }
  @media (max-width: 720px) {
    .site-nav { padding: 16px 20px; gap: 12px; }
    .nav-logo { font-size: 16px; }
    .nav-links { gap: 16px; }
    .nav-links a { font-size: 10px; letter-spacing: 0.08em; }
    .theme-toggle { width: 36px; height: 36px; font-size: 14px; }
  }
  @media (max-width: 480px) {
    .site-nav { padding: 14px 16px; gap: 8px; }
    .nav-logo { font-size: 14px; }
    .nav-username { font-size: 11px; }
    .nav-links { gap: 12px; }
    .nav-links a { font-size: 9px; }
    .theme-toggle { width: 32px; height: 32px; font-size: 12px; }
  }
  body.dark-mode .site-nav { mix-blend-mode: normal; }
  /* Light mode only blending for paper effect */
  body:not(.dark-mode) .site-nav { mix-blend-mode: multiply; }
  .nav-logo {
    display:flex; align-items:center; gap:8px;
    font-family: 'Playfair Display', serif;
    font-size: 18px; letter-spacing: -0.5px;
    color: var(--ink); text-decoration: none;
  }
  .nav-username { font-family: 'Fira Code', monospace; font-size:13px; color:var(--muted); font-weight:700; text-decoration:none; transition: color 0.3s ease; }
  body.dark-mode .nav-username { color: var(--ink); }

  /* ── Hamburger Menu ── */
  .hamburger {
    display: none; background: none; border: none; cursor: pointer; padding: 8px;
    align-items: center; justify-content: center; font-size: 28px;
    color: var(--ink); position: relative; z-index: 101;
  }
  .hamburger-close { display: none; }
  .hamburger.active .hamburger-icon { display: none; }
  .hamburger.active .hamburger-close { display: inline; }
  
  .nav-links {
    display: flex; gap: 32px; align-items: center;
  }
  .nav-links a {
    font-family: 'Fira Code', monospace;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
    transition: color 0.3s;
  }
  .nav-links a:hover { color: var(--accent); }
  body.dark-mode .nav-links a { color: var(--ink); opacity: 0.8; }
  body.dark-mode .nav-links a:hover { opacity: 1; color: var(--accent); }
  
  @media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-links {
      position: absolute; top: 100%; left: 0; right: 0;
      display: none; flex-direction: column; gap: 0;
      background: var(--paper); border-bottom: 1px solid var(--rule);
      padding: 0; max-height: 0; overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease;
    }
    .nav-links.active {
      display: flex; max-height: 500px; padding: 16px 0;
    }
    .nav-links a {
      padding: 12px 20px; font-size: 12px;
      border-bottom: 1px solid var(--rule);
    }
    .nav-links a:last-of-type { border-bottom: none; }
  }

  /* ── Hero ── */
  #hero {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding-top: 112px; /* clear the fixed nav (~81-102px tall) */
  }
  #hero::before, #hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.16;
    z-index: 0;
    pointer-events: none;
  }
  #hero::before {
    width: 520px; height: 520px;
    background: var(--accent);
    top: -180px; right: -120px;
  }
  #hero::after {
    width: 420px; height: 420px;
    background: var(--blue);
    bottom: -160px; left: -100px;
    opacity: 0.12;
  }
  #hero > *:not(.hero-illustration) { position: relative; z-index: 1; }
  @media (prefers-reduced-motion: no-preference) {
    #hero::before { animation: heroBlobFloat 14s ease-in-out infinite; }
    #hero::after { animation: heroBlobFloat 18s ease-in-out infinite reverse; }
  }
  @keyframes heroBlobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, 30px) scale(1.08); }
  }
  .hero-left {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center;
    padding: 0 96px 60px;
    position: relative; z-index: 3;
    gap: 18px;
    max-width: 900px;
    margin: 0 auto;
  }
  @media (max-width: 1024px) {
    .hero-left { padding: 0 48px 40px; }
  }
  @media (max-width: 768px) {
    .hero-left { padding: 70px 24px 40px; }
  }
  @media (max-width: 480px) {
    .hero-left { padding: 60px 18px 32px; gap: 14px; }
  }
  .sub-item { display: flex; flex-direction: column; gap: 6px; }
  .sub-title { font-family: 'Fira Code', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
  .sub-desc { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--muted); font-weight: 600; }

  @media (max-width: 1024px) {
    .hero-left { padding: 48px 32px; }
  }
  @media (max-width: 720px) {
    #hero { min-height: auto; padding-top: 84px; }
    .hero-left { padding: 24px 20px 32px 20px; gap: 14px; }
  }
  @media (max-width: 480px) {
    #hero { padding-top: 84px; }
    .hero-left { padding: 16px 16px 20px 16px; gap: 10px; }
  }
  .hero-eyebrow {
    font-family: 'Fira Code', monospace;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 24px;
    font-weight: 700; display: inline-flex; align-items: center; gap: 8px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding: 8px 16px; border-radius: 999px;
    opacity: 0; max-width: 100%; word-break: break-word;
    animation: fadeUp 0.6s 0.12s forwards;
  }
  .hero-eyebrow::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
    animation: pulseDot 1.6s ease-in-out infinite;
  }
  @keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
  }
  @media (max-width: 480px) {
    .hero-eyebrow { font-size: 10px; letter-spacing: 0.1em; margin-bottom: 16px; padding: 6px 12px; }
  }
  .hero-name {
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 6vw, 68px);
    line-height: 0.95; letter-spacing: -2px;
    color: var(--ink); margin-bottom: 8px; max-width: 100%; word-wrap: break-word;
    /* Animation handled by JS staggered reveal */
  }
  @media (max-width: 480px) {
    .hero-name { letter-spacing: -1px; }
  }
  .hero-name em {
    font-style: italic; color: var(--accent);
  }
  .hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(14px, 2vw, 20px); font-weight: 600;
    color: var(--muted); margin-bottom: 40px; letter-spacing: 0.01em;
    opacity: 0; animation: fadeUp 0.9s 0.5s forwards; max-width: 100%; word-wrap: break-word;
  }
  @media (max-width: 480px) {
    .hero-title { margin-bottom: 28px; letter-spacing: 0em; }
  }
  .hero-desc {
    max-width: 440px; width: 100%;
    font-size: 13px; line-height: 1.75; color: var(--muted);
    margin-bottom: 48px;
    opacity: 0; animation: fadeUp 0.9s 0.65s forwards;
  }
  @media (max-width: 480px) {
    .hero-desc { font-size: 12px; line-height: 1.65; margin-bottom: 32px; }
  }
  .hero-cta {
    display: flex; gap: 16px; flex-wrap: wrap;
    opacity: 0; animation: fadeUp 0.9s 0.8s forwards;
  }
  .btn-primary {
    display: inline-block; padding: 15px 32px;
    background: var(--accent); color: var(--paper);
    font-family: 'Fira Code', monospace; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    text-decoration: none; border: 1px solid var(--accent);
    border-radius: 999px;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 30%, transparent);
    transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
  }
  .btn-primary:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 20%, transparent); }
  .btn-ghost {
    display: inline-block; padding: 15px 32px;
    background: transparent; color: var(--ink);
    font-family: 'Fira Code', monospace; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    text-decoration: none; border: 1px solid var(--rule);
    border-radius: 999px;
    transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.25s;
  }
  .stats-bar {
    padding: 48px 72px;
    background: var(--card);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
  }
  .stat-item {
    text-align: center;
    padding: 8px;
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .stat-item.visible { opacity: 1; transform: translateY(0); }
  .stat-value {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 48px);
    color: var(--accent);
    line-height: 1;
    margin-bottom: 8px;
    display: block;
  }
  .stat-label {
    font-family: 'Fira Code', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }
  @media (max-width: 720px) {
    .stats-bar { grid-template-columns: repeat(2, 1fr); padding: 32px 24px; gap: 28px 16px; }
  }
  @media (max-width: 480px) {
    .stats-bar { padding: 24px 16px; gap: 20px 12px; }
    .stat-label { font-size: 9px; }
  }

  /* ── Section band alternation for visual rhythm ── */
  #about, #skills, #expertise, #send-message { background: var(--card); }





  .hero-counter {
    position: absolute; bottom: 48px; right: 48px;
    font-family: 'Playfair Display', serif; font-size: 80px;
    color: rgba(245,240,232,0.08); line-height: 1;
    pointer-events: none; user-select: none;
  }

  /* Scrolling ticker - modern */
  .ticker-wrap {
    background: transparent; overflow: hidden;
    padding: 14px 0; display:flex; align-items:center;
    border-top: 1px solid rgba(10,14,20,0.04);
  }
  .ticker {
    display: flex; gap: 18px;
    animation: ticker 20s linear infinite;
    white-space: nowrap;
    will-change: transform;
  }
  .ticker span {
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 13px;
    letter-spacing: 0.06em; text-transform: none;
    color: var(--ink); padding: 8px 18px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(200,64,26,0.06), rgba(26,79,214,0.03));
    border: 1px solid rgba(10,14,20,0.04);
  }
  .ticker span::after { content: ''; }
  .ticker-wrap:hover .ticker { animation-play-state: paused; }
  @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ── Sections ── */
  section { padding: 96px 72px; }
  @media (max-width: 1024px) { section { padding: 64px 48px; } }
  @media (max-width: 720px) { section { padding: 48px 32px; } }
  @media (max-width: 480px) { section { padding: 32px 20px; } }
  .section-label {
    font-family: 'Fira Code', monospace; font-size: 10px;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 16px;
    display: inline-block;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    padding: 6px 14px; border-radius: 999px;
    text-align: center;
  }
  .section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.05; letter-spacing: -1px;
    color: var(--ink); margin-bottom: 48px;
    text-align: center; max-width: 100%; width: 100%; word-wrap: break-word;
  }
  section > .section-label { display: block; width: fit-content; margin-left: auto; margin-right: auto; }
  @media (max-width: 480px) {
    .section-title { letter-spacing: -0.5px; margin-bottom: 32px; }
  }

  /* ── Why Hire Me ── */
  #why { background: var(--paper); border-top: 1px solid var(--rule); }
  #why .section-label { color: var(--accent); }
  #why .section-title { color: var(--ink); }
  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .why-card {
    background: var(--paper); padding: 28px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(10,14,20,0.06);
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s;
  }
  .why-card.visible { opacity: 1; transform: translateY(0); }
  .why-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(10,14,20,0.09); }
  .why-num {
    font-family: 'Playfair Display', serif; font-size: 36px;
    color: var(--accent); line-height: 1; margin-bottom: 12px;
  }
  .why-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700;
    color: var(--ink); margin-bottom: 8px; letter-spacing: 0.01em;
  }
  .why-card p {
    font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 100%;
  }
  .why-summary { max-width: 900px; width: 100%; margin: 0 auto; padding: 28px; background: transparent; }
  .why-summary .why-text { font-size: 18px; line-height: 1.9; color: var(--muted); text-align: center; font-family: 'Plus Jakarta Sans', sans-serif; max-width: 100%; }

  /* ── Skills ── */
  #skills { background: transparent; color: var(--ink); padding: 36px 18px; border-top: 1px solid var(--rule); }
  .skills-hint {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Fira Code', monospace; font-size: 12px; color: var(--muted);
    margin-top: 12px;
  }
  .skills-hint i { color: var(--accent); font-size: 12px; }
  .skills-grid {
    max-width: 1180px; width: 100%; margin: 48px auto 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  }
  .skill-category {
    position: relative; overflow: hidden;
    background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
    padding: 26px 24px;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease, border-color 0.3s ease;
  }
  .skill-category::before {
    content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
    background: var(--accent); opacity: 0.75;
  }
  .skill-category:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(10,14,20,0.08);
    border-color: var(--accent);
  }
  body.dark-mode .skill-category:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
  .skill-category-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  .skill-category-icon {
    width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px;
    background: var(--paper); border: 1px solid var(--rule);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 14px;
  }
  .skill-category-title { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
  .skill-pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
  .skill-pill {
    display: inline-flex; align-items: center;
    padding: 7px 13px; border-radius: 999px;
    background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
    font-family: 'Fira Code', monospace; font-size: 12.5px;
    cursor: pointer; transition: all 0.2s ease;
  }
  .skill-pill:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); transform: translateY(-2px); }
  .skill-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (max-width: 720px) {
    #skills { padding: 20px 12px; }
    .skills-grid { grid-template-columns: 1fr; gap: 18px; }
    .skill-category { padding: 22px 20px; }
  }

  /* ── Projects ── */
  #projects { background: transparent; color: var(--ink); border-top: 1px solid var(--rule); position: relative; padding: 32px 0 56px; }
  .projects-wrap { max-width: 1180px; margin: 0 auto; position: relative; padding: 0 22px; }
  .projects-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 18px; }
  .section-title { color: var(--ink); margin: 0; font-size: 20px; }
  .section-title::after { content: ''; display:block; width:56px; height:4px; background: var(--accent); border-radius:4px; margin-top:10px; opacity:0.9; }
  .project-count { margin-left:8px; color: var(--muted); font-size:14px; font-weight:700; }

  .projects-grid { display:flex; gap:24px; align-items:stretch; overflow-x:hidden; scroll-behavior:smooth; padding-bottom:8px; padding-top:6px; scroll-snap-type: x mandatory; }
  .projects-grid::-webkit-scrollbar{display:none}

  /* ── Flagship Project (PesaGuard) ── */
  .flagship-project {
    --fp-text: #f5f0e8;
    background: #0a0e14; color: var(--fp-text);
    border-radius: var(--radius-lg);
    padding: 48px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .flagship-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Fira Code', monospace; font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    padding: 7px 14px; border-radius: 999px; margin-bottom: 20px;
  }
  .flagship-title {
    font-family: 'Playfair Display', serif; font-size: clamp(28px, 3.5vw, 42px);
    color: var(--fp-text); margin-bottom: 8px; line-height: 1.1;
  }
  .flagship-tagline {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px;
    color: color-mix(in srgb, var(--fp-text) 65%, transparent); margin-bottom: 36px;
  }
  .flagship-body { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: start; }

  .flagship-pipeline { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .pipeline-step {
    width: 100%; text-align: center;
    font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; color: var(--fp-text);
    background: color-mix(in srgb, var(--fp-text) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--fp-text) 16%, transparent);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
  }
  .pipeline-step.is-accent { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .pipeline-arrow { color: var(--accent); font-size: 18px; line-height: 1; padding: 6px 0; }

  .flagship-dashboard {
    background: #0d1420;
    border: 1px solid color-mix(in srgb, var(--fp-text) 14%, transparent);
    border-radius: var(--radius-md);
    padding: 28px;
  }
  .dashboard-status {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Fira Code', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--fp-text) 55%, transparent); margin-bottom: 24px;
  }
  .dashboard-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: statusPulseDot 1.6s ease-in-out infinite; }
  @keyframes statusPulseDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
    50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  }
  .dashboard-caption {
    font-size: 11.5px; color: color-mix(in srgb, var(--fp-text) 40%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--fp-text) 12%, transparent);
    padding-top: 14px; line-height: 1.5;
  }
  .flagship-visual {
    margin-top: 28px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--fp-text) 14%, transparent);
    box-shadow: var(--shadow-md);
  }
  .flagship-visual img { display: block; width: 100%; height: auto; }
  .flagship-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
  .flagship-footer .stack-badge { background: color-mix(in srgb, var(--fp-text) 10%, transparent); color: var(--fp-text); border-color: color-mix(in srgb, var(--fp-text) 18%, transparent); }
  .flagship-footer .btn-primary { margin-left: auto; }

  @media (max-width: 900px) {
    .flagship-body { grid-template-columns: 1fr; }
    .flagship-project { padding: 32px 24px; }
  }
  @media (max-width: 480px) {
    .flagship-footer .btn-primary { margin-left: 0; width: 100%; text-align: center; }
  }

  .project-card {
    min-width: calc((100% - 48px) / 3); flex: 0 0 calc((100% - 48px) / 3); display: flex; flex-direction: column; background: var(--paper); padding: 0; border-radius: var(--radius-md); overflow:hidden;
    box-shadow: var(--shadow-sm); border: 1px solid var(--rule);
    opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s, border-color 0.3s;
    scroll-snap-align: start; cursor: pointer;
  }
  .project-card.visible { opacity: 1; transform: translateY(0); }
  .project-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); border-color: var(--accent); }
  
  /* ── Project Modal Specifics ── */
  .project-modal-image { width: 100%; height: 240px; object-fit: cover; border-radius: 8px; margin-bottom: 20px; border: 1px solid var(--rule); }
  .project-modal-meta { display: flex; gap: 16px; margin-bottom: 16px; font-size: 13px; color: var(--accent); font-family: 'Fira Code', monospace; }
  .project-modal-section-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); margin: 20px 0 8px; text-transform: uppercase; letter-spacing: 0.05em; }
  .project-modal-list { padding-left: 18px; margin-bottom: 16px; }
  .project-modal-list li { margin-bottom: 6px; }
  .case-study-item { display: flex; gap: 16px; margin-bottom: 20px; align-items: flex-start; }
  .case-study-num {
    font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 700;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 8px; width: 30px; height: 30px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .case-study-body { flex: 1; min-width: 0; }
  .case-study-label {
    font-family: 'Fira Code', monospace; font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 4px; font-weight: 700;
  }
  .case-study-text { font-size: 14.5px; line-height: 1.7; color: var(--ink); }
  .project-thumb { height: 160px; width:100%; display:block; object-fit:cover; background: #f0efe9; }
  .project-content { display:flex; flex-direction:column; gap:8px; padding:14px 18px; flex:1; }
  .project-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: var(--ink); margin: 0 0 6px 0; font-weight:700; }
  .project-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin:0; }
  .project-stack { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .stack-badge { font-family: 'Fira Code', monospace; font-size: 11px; color: var(--accent); background: rgba(200,64,26,0.06); padding:6px 10px; border-radius:8px; border: 1px solid rgba(200,64,26,0.12); display:inline-flex; align-items:center; gap:8px; }
  .stack-icon { display:inline-flex; width:18px; height:18px; flex:0 0 18px; }
  .tool-icon { width:18px; height:18px; display:block; }
  .project-actions { margin-top: 12px; display:flex; gap:10px; }

  .project-controls { position: static; display:flex; gap:12px; align-items:center; pointer-events:auto; }
  .project-btn { background: transparent; border: 1px solid var(--rule); width:46px; height:46px; border-radius:999px; display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--ink); transition: all 0.3s ease; }
  .project-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
  .project-btn svg { width:18px; height:18px; color: currentColor; }

  @media (max-width: 1100px) { .project-card { min-width: calc((100% - 24px) / 2); flex:0 0 calc((100% - 24px) / 2); } }
  @media (max-width: 720px) { .projects-wrap { padding: 0 12px; } .project-card { min-width: calc(100% - 40px); flex:0 0 calc(100% - 40px); } }
  @media (max-width: 540px) { .projects-grid { gap:14px; } .project-controls { display:flex; padding:0 4px; } .project-btn { width:40px; height:40px; } }
  @media (max-width: 420px) { .project-card { min-width: calc(100vw - 64px); flex: 0 0 calc(100vw - 64px); } }

  /* Formspree success / error banners */
  .fs-success, .fs-error { display:none; padding:12px 18px; border-radius:10px; text-align:center; font-weight:700; max-width:720px; margin: 0 auto 16px; }
  .fs-success.visible { display:block; background: var(--accent); color: #fff; box-shadow: 0 12px 30px rgba(200,64,26,0.12); }
  .fs-error.visible { display:block; background: #fff2f0; color: var(--ink); border:1px solid rgba(200,64,26,0.12); }
  .fs-success small, .fs-error small { display:block; font-weight:400; margin-top:6px; font-size:13px; color: rgba(255,255,255,0.9); }
  @media (max-width: 540px) { .fs-success, .fs-error { padding:10px 14px; font-size:14px; } }
  .btn-sm { padding: 8px 12px; font-size: 12px; border-radius: 8px; text-decoration: none; display:inline-flex; align-items:center; gap:8px; border: 1px solid var(--accent); }
  .btn-outline { background: transparent; border: 1px solid var(--accent); color: var(--ink); }
  .btn-primary-sm { background: var(--accent); color: var(--paper); border: 1px solid var(--accent); }
  .btn-sm i { font-size: 14px; }
  @media (max-width: 1200px) { .projects-grid{ grid-template-columns: repeat(2,1fr);} }
  @media (max-width: 720px) { .projects-grid{ grid-template-columns: 1fr;} }

  /* ── About ── */
  #about { border-top: 1px solid var(--rule); }
  .about-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 56px;
    align-items: start;
    margin-top: 48px;
  }
  @media (max-width: 900px) {
    .about-layout { grid-template-columns: 1fr; gap: 36px; }
  }
  .about-photo-frame {
    position: relative;
    width: 100%;
    max-width: 300px;
  }
  /* Soft ambient glow behind the frame, for depth. */
  .about-photo-frame::before {
    content: '';
    position: absolute;
    top: -32px; left: -32px; right: -32px; bottom: -32px;
    background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 68%);
    filter: blur(32px);
    z-index: -1;
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  /* Offset outline frame, shifted slightly on hover for a subtle parallax lift. */
  .about-photo-frame::after {
    content: '';
    position: absolute; top: 16px; left: -16px; right: 16px; bottom: -16px;
    border: 1.5px solid var(--accent);
    border-radius: 12px;
    z-index: 0;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .about-photo-frame:hover::before { opacity: 0.8; }
  .about-photo-frame:hover::after { transform: translate(4px, -4px); }
  .about-photo-frame picture {
    position: relative;
    display: block;
    z-index: 1;
  }
  /* Corner-bracket accents, echoing the site's monospace/schematic
     details ("// 02" section labels, Fira Code) elsewhere on the page. */
  .about-photo-frame picture::before,
  .about-photo-frame picture::after {
    content: '';
    position: absolute;
    width: 22px; height: 22px;
    border: 2px solid var(--accent);
    z-index: 2;
    pointer-events: none;
    transition: width 0.3s ease, height 0.3s ease;
  }
  .about-photo-frame picture::before {
    top: -8px; left: -8px;
    border-right: none; border-bottom: none;
    border-radius: 4px 0 0 0;
  }
  .about-photo-frame picture::after {
    bottom: -8px; right: -8px;
    border-left: none; border-top: none;
    border-radius: 0 0 4px 0;
  }
  .about-photo-frame:hover picture::before,
  .about-photo-frame:hover picture::after {
    width: 28px; height: 28px;
  }
  .about-photo {
    position: relative; z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 10px;
    filter: grayscale(35%) contrast(1.02);
    box-shadow: 0 24px 48px rgba(10,14,20,0.18);
    transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), filter 0.5s ease, box-shadow 0.5s ease;
  }
  .about-photo-frame:hover .about-photo {
    transform: scale(1.015);
    filter: grayscale(8%) contrast(1.05);
    box-shadow: 0 32px 64px rgba(10,14,20,0.26);
  }
  body.dark-mode .about-photo { box-shadow: 0 24px 48px rgba(0,0,0,0.5); }
  body.dark-mode .about-photo-frame:hover .about-photo { box-shadow: 0 32px 64px rgba(0,0,0,0.6); }
  .about-role-chip {
    position: absolute; z-index: 3; left: 18px; bottom: -16px;
    display: flex; align-items: center; gap: 7px;
    background: rgba(var(--ink-rgb), 0.78);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    border: 1px solid rgba(var(--paper-rgb), 0.15);
    color: var(--paper);
    font-family: 'Fira Code', monospace; font-size: 11px; font-weight: 600;
    padding: 8px 14px 8px 11px; border-radius: 999px;
    box-shadow: 0 10px 22px rgba(10,14,20,0.28);
    white-space: nowrap;
  }
  .chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #3ddc73;
    box-shadow: 0 0 0 3px rgba(61,220,115,0.25);
    flex-shrink: 0;
    animation: chipDotPulse 2.2s ease-in-out infinite;
  }
  @keyframes chipDotPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(61,220,115,0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(61,220,115,0.1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .chip-dot { animation: none; }
    .about-photo, .about-photo-frame::after, .about-photo-frame::before,
    .about-photo-frame picture::before, .about-photo-frame picture::after { transition: none; }
  }
  .about-text h2 { margin-bottom: 24px; }
  .about-lead {
    font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 600;
    color: var(--ink); line-height: 1.55; margin-bottom: 20px;
  }
  .about-body { font-size: 13.5px; line-height: 1.9; color: var(--muted); margin-bottom: 32px; }
  .about-facts {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  }
  @media (max-width: 480px) {
    .about-facts { grid-template-columns: 1fr; }
  }
  .about-fact {
    display: flex; flex-direction: column; gap: 5px;
    padding: 14px 16px;
    background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
    transition: border-color 0.25s ease;
  }
  .about-fact:hover { border-color: var(--accent); }
  .fact-label {
    font-family: 'Fira Code', monospace; font-size: 11px;
    color: var(--muted);
  }
  .fact-value { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--ink); font-weight: 600; }

  /* ── Contact ── */
  #contact { background: var(--paper); border-top: 1px solid var(--rule); }
  #contact .section-title { color: var(--ink); }
  #contact .section-label { color: var(--accent); }
  .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .contact-links { display: flex; flex-direction: column; gap: 10px; }
  .contact-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-radius: 10px;
    background: var(--paper); border: 1px solid var(--rule);
    color: var(--ink); text-decoration: none;
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600;
    transition: transform 0.14s, box-shadow 0.14s, color 0.14s;
  }
  .contact-link:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(10,14,20,0.06); color: var(--accent); }
  .contact-link-arrow { font-size: 14px; }

  .contact-cards {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    max-width: 960px; margin: 56px auto 0;
  }
  .contact-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
    padding: 28px 16px;
    background: var(--card); border: 1px solid var(--rule);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    text-decoration: none; color: var(--ink);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--accent); }
  .contact-card-icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
  }
  .contact-card-label {
    font-family: 'Fira Code', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); font-weight: 700;
  }
  .contact-card-value {
    font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--ink); word-break: break-word;
  }
  @media (max-width: 720px) {
    .contact-cards { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  }
  .contact-note { font-size: 13px; color: var(--muted); }
  .contact-avail {
    margin-top: 20px; display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Fira Code', monospace; font-size: 11px; letter-spacing: 0.1em;
    color: #8aba72;
  }
  .avail-dot { width: 8px; height: 8px; border-radius: 50%; background: #8aba72; animation: pulse 2s infinite; }
  @keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:0.35 } }

  /* ── Footer ── */
  /* Bottom padding is oversized on purpose: it reserves clearance for
     the fixed-position WhatsApp/scroll-to-top buttons (24px base offset
     + 56px button + 20px gap = 100px, added to the original 32px), which
     stay fixed at all times and would otherwise sit on top of this
     content once scrolled to the very bottom of the page. */
  footer {
    background: var(--card); padding: 64px 72px 132px;
    border-top: 3px solid var(--accent);
    display: flex; flex-direction: column; gap: 40px;
    color: var(--muted);
  }
  .footer-main {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px;
  }
  .footer-brand { padding-right: 16px; }
  .footer-logo {
    font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700;
    color: var(--ink); margin-bottom: 12px;
  }
  .footer-tagline {
    font-size: 13.5px; line-height: 1.7; color: var(--muted); margin-bottom: 18px; max-width: 320px;
  }
  .footer-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Fira Code', monospace; font-size: 11px; letter-spacing: 0.04em;
    color: var(--ink); font-weight: 600;
    background: var(--paper); border: 1px solid var(--rule);
    padding: 7px 14px; border-radius: 999px;
  }
  .footer-status .dot {
    width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
    animation: statusPulseDot 1.6s ease-in-out infinite;
  }
  .footer-links-label {
    font-family: 'Fira Code', monospace; font-size: 11px; letter-spacing: 0.08em;
    color: var(--ink); text-transform: uppercase; font-weight: 700; margin-bottom: 16px;
  }
  .footer-links {
    display: flex; flex-direction: column; gap: 12px;
  }
  .footer-links { display: flex; flex-direction: column; gap: 11px; align-items: flex-start; }
  .footer-links a {
    position: relative; width: fit-content; padding-bottom: 2px;
    font-family: 'Fira Code', monospace; font-size: 13px;
    color: var(--muted); text-decoration: none;
    border-bottom: 1px solid transparent;
    width: fit-content;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .footer-links a:hover { color: var(--accent); border-color: var(--accent); transform: translateX(3px); }
  .footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
  .footer-social-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--paper); border: 1px solid var(--rule); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .footer-social-icon:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-sm); }
  .footer-bottom {
    display: flex; justify-content: center; align-items: center;
    padding-top: 24px; border-top: 1px solid var(--rule);
  }
  footer p {
    font-family: 'Fira Code', monospace; font-size: 11px;
    color: var(--muted); letter-spacing: 0.08em; margin: 0;
  }

  /* ── Animations ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn {
    from { opacity: 0; } to { opacity: 0.85; }
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .site-nav { padding: 16px 24px; }
    .nav-links { display: none; }
    .hero-left { padding: 80px 24px 40px; }
    section { padding: 64px 24px; }
    .why-grid, .about-layout, .contact-layout, .skills-layout { grid-template-columns: 1fr; gap: 24px; }
    .about-layout { gap: 40px; }
    .contact-layout { gap: 48px; }
    .hero-photo, .about-photo { width: 100%; height: auto; aspect-ratio: 4/5; }
    .about-photo-frame::before,
    .about-photo-frame::after,
    .about-photo-frame picture::before,
    .about-photo-frame picture::after { display: none; }
    footer { padding: 40px 24px 124px; } /* extra bottom clearance for the fixed FABs, see the desktop rule's comment */
    .footer-main { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
    .footer-brand { grid-column: 1 / -1; padding-right: 0; }
    .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
    .contact-row { flex-direction: column; }
  }

  @media (max-width: 480px) {
    .hero-left { padding: 16px 16px 20px 16px; gap: 10px; }
    .hero-name { font-size: 30px; }
    .hero-title { font-size: 13px; }
    .section-title { font-size: 28px; }
    .hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
    .btn-primary, .btn-ghost { text-align: center; width: 100%; padding: 11px 12px; font-size: 10px; }
    #cursor, #cursor-ring { display: none; }
    body { cursor: auto; }
  }

  /* Contact form styles */
  .contact-layout {
    display: grid;
    grid-template-columns: minmax(240px, 380px) 1fr;
    gap: 56px;
    align-items: start;
    margin-top: 48px;
  }
  @media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 36px; }
  }

  .contact-lead {
    font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600;
    color: var(--ink); line-height: 1.5; margin-bottom: 18px;
  }
  .contact-sub { font-size: 13.5px; color: var(--muted); line-height: 1.8; margin-bottom: 24px; max-width: 42ch; }
  .contact-meta {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Fira Code', monospace; font-size: 12px; color: var(--ink);
    margin-bottom: 20px;
  }
  .contact-status-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #2ecc71;
    box-shadow: 0 0 0 3px color-mix(in srgb, #2ecc71 25%, transparent);
    flex-shrink: 0;
  }
  .contact-email-link {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Fira Code', monospace; font-size: 13px; font-weight: 600;
    color: var(--ink); text-decoration: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 4px;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  .contact-email-link:hover { color: var(--accent); border-color: var(--accent); }
  .contact-email-link i { color: var(--accent); }

  .contact-form-card {
    background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
    padding: 36px 32px;
    box-shadow: 0 24px 48px rgba(10,14,20,0.08);
  }
  body.dark-mode .contact-form-card { box-shadow: 0 24px 48px rgba(0,0,0,0.4); }
  @media (max-width: 480px) {
    .contact-form-card { padding: 26px 20px; }
  }

  .contact-form { display:flex; flex-direction:column; gap:18px; }
  .contact-row { display:flex; gap:16px; }
  @media (max-width: 540px) { .contact-row { flex-direction: column; gap: 18px; } }

  .form-field { position: relative; flex: 1; }
  .contact-form input, .contact-form textarea {
    width:100%; padding:18px 14px 8px; border:1px solid var(--rule); border-radius:8px;
    font-family: 'Fira Code', monospace; font-size:14px;
    background: var(--paper); color: var(--ink); caret-color: var(--accent);
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .contact-form input::placeholder, .contact-form textarea::placeholder { color: transparent; }
  .contact-form input:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--accent);
  }
  .form-field label {
    position: absolute; left: 14px; top: 16px;
    font-family: 'Fira Code', monospace; font-size: 14px; color: var(--muted);
    pointer-events: none; transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  }
  .form-field input:focus + label,
  .form-field input:not(:placeholder-shown) + label,
  .form-field textarea:focus + label,
  .form-field textarea:not(:placeholder-shown) + label {
    top: 6px; font-size: 10px; color: var(--accent); letter-spacing: 0.04em;
  }
  .form-field textarea ~ label { top: 16px; }
  .form-field textarea:focus ~ label,
  .form-field textarea:not(:placeholder-shown) ~ label { top: 6px; }

  /* Prevent browser autofill from overriding theme colors */
  .contact-form input:-webkit-autofill,
  .contact-form input:-webkit-autofill:hover,
  .contact-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
    -webkit-text-fill-color: var(--ink);
    caret-color: var(--accent);
    transition: background-color 9999s ease-in-out 0s;
  }
  .contact-form textarea { min-height:140px; resize:vertical; }
  .contact-actions { display:flex; gap:12px; align-items:center; margin-top: 4px; }
  .contact-note.small { font-size:13px; color:var(--muted); text-align:center; margin-top:16px; }

  /* ── Experience Timeline ── */
  .experience-timeline {
    position: relative;
    margin-top: 56px;
    padding-left: 44px;
  }
  .experience-timeline::before {
    content: '';
    position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px;
    background: var(--rule);
  }
  .experience-item { position: relative; margin-bottom: 40px; }
  .experience-item:last-child { margin-bottom: 0; }
  .experience-node {
    position: absolute; left: -44px; top: 6px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--rule);
  }
  .experience-node::after {
    content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--muted);
  }
  .experience-node-current { border-color: var(--accent); }
  .experience-node-current::after { background: var(--accent); }
  .experience-node-current::before {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid var(--accent); opacity: 0.4;
    animation: expPulseRing 2.4s ease-out infinite;
  }
  @keyframes expPulseRing {
    0% { transform: scale(0.75); opacity: 0.5; }
    100% { transform: scale(1.7); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .experience-node-current::before { animation: none; }
  }

  .experience-card {
    background: var(--card); border: 1px solid var(--rule); border-radius: 14px;
    padding: 28px 26px;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  .experience-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(10,14,20,0.1);
    border-color: var(--accent);
  }
  body.dark-mode .experience-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.45); }

  .experience-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 16px; flex-wrap: wrap; }
  .experience-title { font-family: 'Playfair Display', serif; font-size: 19px; color: var(--ink); margin: 0 0 4px 0; }
  .experience-company { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; color: var(--accent); font-weight: 600; margin: 0; }
  .experience-date {
    font-family: 'Fira Code', monospace; font-size: 11px; color: var(--muted);
    white-space: nowrap; padding: 5px 12px; border: 1px solid var(--rule);
    border-radius: 999px; background: var(--paper);
  }
  .experience-desc { font-size: 13.5px; color: var(--muted); line-height: 1.75; margin-bottom: 18px; }
  .experience-subsection { margin-bottom: 16px; }
  .experience-subsection:last-of-type { margin-bottom: 0; }
  .experience-subsection-label {
    font-family: 'Fira Code', monospace; font-size: 11px; font-weight: 600;
    color: var(--accent); margin-bottom: 6px;
  }
  .experience-subsection-text { font-size: 13.5px; color: var(--muted); line-height: 1.75; margin: 0; }
  .experience-skills { display: flex; flex-wrap: wrap; gap: 8px; }
  .skill-tag { display: inline-block; padding: 4px 10px; background: var(--card); color: var(--ink); border-radius: 4px; font-size: 11px; font-family: 'Fira Code', monospace; border: 1px solid var(--rule); }

  @media (max-width: 600px) {
    .experience-timeline { padding-left: 32px; }
    .experience-node { left: -32px; width: 20px; height: 20px; }
    .experience-card { padding: 22px 20px; }
  }

  /* ── Certifications: credential plaques ── */
  .cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 36px 32px;
    margin-top: 56px;
  }
  .cert-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 32px 26px 22px;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, border-color 0.4s ease;
  }
  .cert-card::after {
    content: '';
    position: absolute; inset: 6px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.6;
  }
  .cert-card:hover {
    border-color: var(--accent);
    box-shadow: 0 24px 48px rgba(10,14,20,0.14);
  }
  body.dark-mode .cert-card:hover { box-shadow: 0 24px 48px rgba(0,0,0,0.5); }

  .cert-seal {
    position: absolute; top: -20px; left: 28px;
    min-width: 52px; height: 52px; padding: 0 6px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Fira Code', monospace; font-weight: 600;
    font-size: 11px; letter-spacing: 0.01em;
    border: 4px solid var(--paper);
    box-shadow: 0 8px 16px rgba(10,14,20,0.22);
    transition: transform 0.4s cubic-bezier(0.34,1.4,0.64,1);
  }
  .cert-card:hover .cert-seal { transform: rotate(-8deg) scale(1.05); }

  .cert-issuer {
    font-family: 'Fira Code', monospace; font-size: 11px; color: var(--muted);
    margin: 22px 0 10px; letter-spacing: 0.02em;
  }
  .cert-title {
    font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700;
    color: var(--ink); line-height: 1.3; margin-bottom: 14px;
  }
  .cert-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 18px; }
  .cert-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }

  .cert-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 16px;
    border-top: 1px dashed var(--rule);
  }
  .cert-year {
    font-family: 'Fira Code', monospace; font-size: 12px; color: var(--muted);
  }
  .cert-view-btn {
    font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 600;
    color: var(--ink); background: transparent; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; padding: 0;
    border-bottom: 1px solid var(--accent);
    transition: color 0.2s ease, gap 0.2s ease;
  }
  .cert-view-btn:hover { color: var(--accent); gap: 9px; }
  .cert-view-btn i { font-size: 11px; }

  @media (max-width: 480px) {
    .cert-grid { grid-template-columns: 1fr; gap: 40px; }
  }

  /* ── Expertise & Contributions ── */
  #expertise { border-top: 1px solid var(--rule); }
  .expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 48px;
  }
  .expertise-card {
    background: var(--paper); padding: 32px;
    border-radius: var(--radius-md); border: 1.5px solid var(--rule);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
  }
  .expertise-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
  }
  .expertise-icon {
    font-size: 22px; color: var(--accent); margin-bottom: 20px;
    width: 56px; height: 56px; border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
  }
  .expertise-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
  .expertise-desc { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

  .contributions-list {
    margin-top: 48px;
    padding-left: 24px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .contributions-list li {
    font-size: 14px; color: var(--muted); margin-bottom: 12px;
    line-height: 1.7;
  }
  .contributions-list li i { color: var(--accent); margin-right: 12px; }

  /* Skip link */
  .skip-link {
    position: absolute; top: -40px; left: 0;
    background: var(--accent); color: white;
    padding: 8px; z-index: 1000;
    transition: top 0.2s;
  }
  .skip-link:focus { top: 0; }

  @media (max-width: 480px) {
    .expertise-grid { grid-template-columns: 1fr; }
  }


  @media (max-width: 480px) {
    .footer-main { grid-template-columns: 1fr; gap: 28px; }
    .footer-brand { grid-column: auto; }
    .footer-tagline { max-width: 100%; }
  }


  /* ── Floating Action Buttons ──
     Shared geometry lives in custom properties so the WhatsApp FAB, the
     scroll-to-top FAB, and the tooltip's pointer are always derived from
     the same numbers, which is what guarantees the two buttons share an
     identical baseline and the tooltip's arrow always centers on the
     WhatsApp icon, at every breakpoint, with no hardcoded values to drift
     out of sync. JS lifts them (via inline `bottom`, still position:fixed)
     as the footer's top edge rises into view, and fades them out once
     fully scrolled past it, rather than pinning them at an ever-taller
     position; see the comment in site.js for why. */
  :root {
    --fab-size: 56px;
    --fab-edge: 20px;
    --fab-bottom-base: 24px;
  }
  @media (max-width: 480px) {
    :root {
      --fab-size: 50px;
      --fab-edge: 14px;
      --fab-bottom-base: 16px;
    }
  }

  .fab {
    position: fixed;
    bottom: max(var(--fab-bottom-base), env(safe-area-inset-bottom));
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    z-index: 500;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.12),
                inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -8px 12px rgba(0,0,0,0.12);
    cursor: pointer;
    border: none;
    transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease, opacity 0.25s ease, background 0.2s ease;
    text-decoration: none;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
  }
  .fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 22px rgba(0,0,0,0.25), 0 3px 8px rgba(0,0,0,0.14), inset 0 1px 1px rgba(255,255,255,0.4), inset 0 -8px 12px rgba(0,0,0,0.12); }
  .fab:active { transform: translateY(-1px) scale(0.96); box-shadow: 0 4px 10px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -6px 10px rgba(0,0,0,0.14); }
  .fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* Icons are baked in as a CSS background layer (icon + gradient, as two
     comma-separated background-image values) rather than a child <svg>
     laid out by flexbox. background-position:center is one of the most
     reliably-supported centering mechanisms in CSS, with nothing for a
     particular browser/device to get wrong the way an SVG child's own
     intrinsic sizing occasionally can; this replaced a real, reproduced
     mis-centering bug seen on an actual device that never showed up in
     any headless test. */
  .fab-top .fab-top-ring { width: 100%; height: 100%; position: absolute; inset: 0; }

  /* WhatsApp FAB lives bottom-right per spec; scroll-to-top lives
     bottom-left so the two buttons don't stack on top of each other. */
  @keyframes fabIdlePulse {
    0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -8px 12px rgba(0,0,0,0.12), 0 0 0 0 rgba(37,211,102,0.4); }
    50%      { box-shadow: 0 6px 16px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.12), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -8px 12px rgba(0,0,0,0.12), 0 0 0 9px rgba(37,211,102,0); }
  }
  @keyframes fabPulseRing {
    0%   { box-shadow: 0 6px 16px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -8px 12px rgba(0,0,0,0.12), 0 0 0 0 rgba(37,211,102,0.55); }
    70%  { box-shadow: 0 6px 16px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -8px 12px rgba(0,0,0,0.12), 0 0 0 14px rgba(37,211,102,0); }
    100% { box-shadow: 0 6px 16px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -8px 12px rgba(0,0,0,0.12), 0 0 0 0 rgba(37,211,102,0); }
  }
  .fab-whatsapp {
    right: max(var(--fab-edge), env(safe-area-inset-right));
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z%22/%3E%3Cpath%20d%3D%22M12.001%202C6.478%202%202%206.477%202%2011.999c0%202.113.652%204.075%201.762%205.688L2.5%2022l4.428-1.235A9.94%209.94%200%200012.001%2022C17.523%2022%2022%2017.523%2022%2012%2022%206.477%2017.523%202%2012.001%202zm5.876%2015.876a8.06%208.06%200%2001-11.407.24l-.213-.213-2.658.741.75-2.593-.222-.223A8.07%208.07%200%20013.933%206.13a8.07%208.07%200%200113.944%205.869%208.02%208.02%200%2001-2.001%205.877z%22/%3E%3C/svg%3E"), linear-gradient(135deg, #2fe27c, #17a94f);
    background-size: 26px 26px, cover;
    color: #fff;
    animation: fabIdlePulse 2.8s ease-in-out infinite;
  }
  .fab-whatsapp:hover {
    animation: fabPulseRing 1.4s ease-out infinite;
  }
  @media (max-width: 480px) {
    .fab-whatsapp { background-size: 22px 22px, cover; }
  }
  .fab-status-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #CBFF4D;
    border: 2px solid #fff;
    box-sizing: border-box;
  }
  @media (max-width: 480px) {
    .fab-status-dot { top: 1px; right: 1px; width: 11px; height: 11px; }
  }

  .fab-top {
    left: max(var(--fab-edge), env(safe-area-inset-left));
    background-image: linear-gradient(135deg, var(--accent), rgba(0,0,0,0.22)), linear-gradient(135deg, var(--accent), var(--accent));
    background-size: cover, cover;
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }
  /* The arrow lives on its own pseudo-element (rather than as a layer of
     .fab-top's own background) specifically so it can bounce
     independently of the button's hover/reveal transforms. */
  @keyframes fabArrowBounce {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-3px); }
  }
  .fab-top::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V6M6%2011l6-6%206%206%22/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
    animation: fabArrowBounce 1.8s ease-in-out infinite;
    pointer-events: none;
  }
  @media (max-width: 480px) {
    .fab-top { background-size: cover, cover; }
    .fab-top::after { width: 20px; height: 20px; }
  }
  .fab-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .fab-top:hover { transform: translateY(-3px) scale(1.05); }
  /* Scroll-progress ring: fills as the visitor scrolls down the page,
     sitting on top of the arrow (painted via background-image above) so
     the button also works as a reading-progress indicator, not just a
     jump-to-top control. It stays a real SVG element (not a background
     layer) because JS updates its stroke-dashoffset every scroll tick. */
  .fab-top-ring {
    transform: rotate(-90deg);
    pointer-events: none;
  }
  .fab-top-ring-track { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 2.5; }
  .fab-top-ring-progress {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
  }

  /* ── WhatsApp chat tooltip: glassmorphic greeting card ──
     right/bottom reuse the exact same --fab-edge / --fab-size variables
     as .fab-whatsapp, so its right edge always lines up with the
     button's right edge and it always clears the button by the same 14px
     regardless of breakpoint. */
  .chat-tooltip {
    position: fixed;
    right: max(var(--fab-edge), env(safe-area-inset-right));
    bottom: calc(max(var(--fab-bottom-base), env(safe-area-inset-bottom)) + var(--fab-size) + 14px);
    z-index: 499;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 240px;
    max-width: calc(100vw - 40px);
    background: rgba(var(--ink-rgb), 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(var(--paper-rgb), 0.14);
    color: var(--paper);
    padding: 12px 14px 12px 12px;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.45s cubic-bezier(0.34,1.56,0.64,1),
                transform 0.45s cubic-bezier(0.34,1.56,0.64,1),
                visibility 0.45s;
  }
  .chat-tooltip-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }
  .chat-tooltip::after {
    content: '';
    position: absolute;
    /* centers a 12px diamond on the fab's horizontal midpoint: the
       tooltip's right edge coincides with the fab's right edge (same
       --fab-edge value), so half the fab's width minus half the
       diamond's width lands the tail dead-center on the icon at any
       breakpoint, with no hardcoded offset to fall out of sync. */
    right: calc((var(--fab-size) / 2) - 6px);
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: rgba(var(--ink-rgb), 0.72);
    border-bottom: 1px solid rgba(var(--paper-rgb), 0.14);
    border-right: 1px solid rgba(var(--paper-rgb), 0.14);
    transform: rotate(45deg);
    border-radius: 2px;
  }
  .chat-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .chat-tooltip-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22white%22%3E%3Cpath%20d%3D%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z%22/%3E%3Cpath%20d%3D%22M12.001%202C6.478%202%202%206.477%202%2011.999c0%202.113.652%204.075%201.762%205.688L2.5%2022l4.428-1.235A9.94%209.94%200%200012.001%2022C17.523%2022%2022%2017.523%2022%2012%2022%206.477%2017.523%202%2012.001%202zm5.876%2015.876a8.06%208.06%200%2001-11.407.24l-.213-.213-2.658.741.75-2.593-.222-.223A8.07%208.07%200%20013.933%206.13a8.07%208.07%200%200113.944%205.869%208.02%208.02%200%2001-2.001%205.877z%22/%3E%3C/svg%3E"), linear-gradient(135deg, #2fe27c, #17a94f);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 17px 17px, cover;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 1px rgba(255,255,255,0.35);
  }
  .chat-tooltip-body { flex: 1; min-width: 0; }
  .chat-tooltip-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--paper);
  }
  .chat-tooltip-title .emoji { font-size: 15px; line-height: 1; }
  .chat-tooltip-text {
    margin: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(var(--paper-rgb), 0.78);
  }
  .chat-tooltip-close {
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(var(--paper-rgb), 0.1);
    border-radius: 50%;
    color: var(--paper);
    font-size: 12px;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .chat-tooltip-close:hover { background: rgba(var(--paper-rgb), 0.22); transform: scale(1.08); }

  @media (max-width: 480px) {
    .chat-tooltip { width: 210px; }
    .chat-tooltip-avatar { width: 30px; height: 30px; background-size: 15px 15px, cover; }
    .chat-tooltip-title { font-size: 13px; }
    .chat-tooltip-text { font-size: 11.5px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .fab, .fab-top { transition: opacity 0.2s ease; }
    .fab:hover, .fab:active { transform: none; }
    .fab-whatsapp { animation: none; }
    .fab-whatsapp:hover { animation: none; }
    .fab-top::after { animation: none; }
  }


  /* ══════════════════ ADVANCED TRANSITIONS: scroll-reveal ══════════════════ */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
    will-change: opacity, transform;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  /* ══════════════════ MICRO-INTERACTIONS: nav scroll-spy ══════════════════ */
  .nav-links a { position: relative; padding-bottom: 3px; }
  .nav-links a::after {
    content: ''; position: absolute; left: 0; bottom: -2px;
    width: 0; height: 1.5px; background: var(--accent);
    transition: width 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  .nav-links a:hover::after, .nav-links a.active-link::after { width: 100%; }
  .nav-links a.active-link { color: var(--accent); }
  body.dark-mode .nav-links a.active-link { color: var(--accent); opacity: 1; }

  /* ══════════════════ MICRO-INTERACTIONS: press feedback ══════════════════ */
  .btn-primary:active, .btn-ghost:active, .cta-btn:active,
  .skill-pill:active, .cert-view-btn:active, .about-fact:active,
  .experience-card:active, .cert-card:active, .skill-category:active {
    transform: scale(0.97);
  }
  .btn-primary, .btn-ghost { transition: background 0.25s, color 0.25s, transform 0.15s, box-shadow 0.25s, border-color 0.25s; }

  /* ══════════════════ TYPOGRAPHY REFINEMENT ══════════════════ */
  .hero-name, .section-title { text-wrap: balance; }
  .stat-value, .experience-date, .cert-year, .hero-eyebrow,
  .about-fact .fact-value, .skill-category-title {
    font-variant-numeric: tabular-nums;
  }
  .about-body, .experience-desc, .cert-desc { max-width: 62ch; }

  /* ══════════════════ DARK FINTECH VISUAL SYSTEM (dark mode only) ══════════════════ */
  body.dark-mode::after {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.6;
  }
  body.dark-mode .stat-value {
    text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  body.dark-mode .experience-card:hover,
  body.dark-mode .cert-card:hover,
  body.dark-mode .skill-category:hover,
  body.dark-mode .about-fact:hover {
    box-shadow: 0 0 0 1px var(--accent), 0 20px 45px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  body.dark-mode .experience-date,
  body.dark-mode .cert-year {
    background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  }

  /* ══════════════════ CUSTOM ILLUSTRATION: hero pipeline motif ══════════════════ */
  .hero-illustration {
    position: absolute; top: 0; right: 0;
    width: min(52vw, 720px); height: 100%;
    pointer-events: none; z-index: 0;
    opacity: 0.5;
    color: var(--rule);
  }
  body.dark-mode .hero-illustration { color: var(--accent); opacity: 0.16; }
  #hero { position: relative; overflow: hidden; }
  #hero > *:not(.hero-illustration) { position: relative; z-index: 1; }
  @media (max-width: 900px) {
    .hero-illustration { display: none; }
  }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  @keyframes slideDown { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .skill-detail-block { margin-bottom: 20px; }
  .skill-detail-label {
    font-family: 'Fira Code', monospace; font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 8px 0;
  }
  .skill-detail-text { font-size: 14px; line-height: 1.7; color: var(--ink); margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
  .skill-detail-project-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Fira Code', monospace; font-size: 13px; font-weight: 600;
    color: var(--ink); background: var(--paper); border: 1px solid var(--rule);
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    transition: all 0.2s ease;
  }
  .skill-detail-project-link:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
  .skill-detail-project-link i { font-size: 11px; }
  .subscription-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
  .subscription-option:hover { border-color: var(--accent); background: var(--card); transform: translateY(-2px); }
  .subscription-copy-btn:hover { opacity: 0.9; }

/* ── Print stylesheet ── */
  @media print {
    .site-nav, footer, .fab, .fab-whatsapp, .fab-top, .chat-tooltip, #cursor, #cursor-ring,
    #scrollProgress, .hero-illustration, .skip-link, .contact-form-card,
    .cert-seal, .expertise-icon { display: none !important; }
    body { background: #fff !important; color: #000 !important; cursor: auto !important; }
    body::before, body::after { display: none !important; }
    * { box-shadow: none !important; text-shadow: none !important; animation: none !important; }
    .reveal { opacity: 1 !important; transform: none !important; }
    a { color: #000 !important; text-decoration: underline; }
    .section-title, h1, h2, h3 { color: #000 !important; }
    .impact-value, .stat-value { color: #000 !important; }
    section { page-break-inside: avoid; }
    .about-photo-frame::before, .about-photo-frame::after,
    .about-photo-frame picture::before, .about-photo-frame picture::after { display: none; }
  }