*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    
    :root {
      /* Monochrome scheme — black/white only. Blue reserved for buttons. */
      --background: 0 0% 0%;
      --foreground: 0 0% 100%;
      --card: 0 0% 6%;
      --card-foreground: 0 0% 100%;
      --popover: 0 0% 4%;
      --popover-foreground: 0 0% 100%;
      --primary: 0 0% 100%;
      --primary-foreground: 0 0% 0%;
      --secondary: 0 0% 12%;
      --secondary-foreground: 0 0% 100%;
      --muted: 0 0% 8%;
      --muted-foreground: 0 0% 65%;
      --accent: 0 0% 100%;
      --accent-foreground: 0 0% 0%;
      --destructive: 0 84% 60%;
      --border: 0 0% 14%;
      --input: 0 0% 14%;
      --ring: 0 0% 100%;
      --radius: 0.75rem;
      --neon-purple: 0 0% 100%;
      --gold: 0 0% 100%;
      --dark-surface: 0 0% 6%;
      --darker-surface: 0 0% 2%;
      --gradient-neon: linear-gradient(135deg, hsl(0 0% 100%) 0%, hsl(0 0% 100%) 100%);
      --btn-blue: 220 100% 50%;
      --btn-blue-hover: 220 100% 58%;
      --font-display: 'DM Sans', sans-serif;
      --font-body: 'DM Sans', sans-serif;
    }
    
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font-body);
      background: hsl(var(--background));
      color: hsl(var(--foreground));
      line-height: 1.6;
      overflow-x: hidden;
    }
    h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; height: auto; display: block; }
    button { cursor: pointer; font-family: inherit; }
    ul { list-style: none; }
    
    /* ===== UTILITY CLASSES ===== */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
    .text-center { text-align: center; }
    .font-display { font-family: var(--font-display); }
    .text-foreground { color: hsl(var(--foreground)); }
    .text-muted { color: hsl(var(--muted-foreground)); }
    .text-primary { color: hsl(var(--primary)); }
    .bg-background { background: hsl(var(--background)); }
    .bg-card { background: hsl(var(--card)); }
    
    .gradient-text {
      background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--neon-purple)) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      display: inline-block;
    }
    
    .glass-card {
      background: hsl(var(--dark-surface) / 0.8);
      backdrop-filter: blur(20px);
      border: 1px solid hsl(var(--neon-purple) / 0.15);
      border-radius: var(--radius);
    }
    
    .neon-border {
      border: 1px solid hsl(var(--neon-purple) / 0.5);
      box-shadow: 0 0 10px hsl(var(--neon-purple) / 0.3);
    }
    
    .hover-glow { transition: all 0.3s ease; }
    .hover-glow:hover {
      box-shadow: 0 0 40px hsl(var(--neon-purple) / 0.5);
      border-color: hsl(var(--neon-purple) / 0.8);
    }
    
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      padding: 0.625rem 1.5rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600;
      transition: all 0.3s ease; white-space: nowrap;
      position: relative;
    }
    @property --btn-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: conic-gradient(
        from var(--btn-angle),
        transparent 0%,
        hsl(var(--primary) / 0.3) 3%,
        hsl(var(--primary)) 5%,
        hsl(var(--neon-purple)) 7%,
        hsl(var(--neon-purple) / 0.3) 9%,
        transparent 12%,
        transparent 100%
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      animation: btnStroke 3s linear infinite;
      pointer-events: none;
    }
    .btn-neon {
      background: hsl(var(--btn-blue));
      color: #fff;
      box-shadow: 0 0 30px hsl(var(--btn-blue) / 0.5);
    }
    .btn-neon:hover {
      background: hsl(var(--btn-blue-hover));
      box-shadow: 0 0 40px hsl(var(--btn-blue) / 0.7);
      transform: scale(1.04);
    }
    .btn-outline {
      background: transparent;
      color: hsl(var(--foreground));
      box-shadow: 0 0 20px hsl(var(--neon-purple) / 0.6);
    }
    .btn-outline:hover { box-shadow: 0 0 20px hsl(var(--neon-purple) / 0.5); transform: scale(1.05); }
    .btn-lg { padding: 0.75rem 2rem; font-size: 1rem; }
    .btn-sm { padding: 0.5rem 1rem; font-size: 0.75rem; }
    
    .grid { display: grid; gap: 1.5rem; }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .items-center { align-items: center; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .gap-2 { gap: 0.5rem; }
    .gap-3 { gap: 0.75rem; }
    .gap-4 { gap: 1rem; }
    .gap-6 { gap: 1.5rem; }
    .gap-8 { gap: 2rem; }
    .gap-12 { gap: 3rem; }
    .flex-wrap { flex-wrap: wrap; }
    .flex-1 { flex: 1; }
    .shrink-0 { flex-shrink: 0; }
    .w-full { width: 100%; }
    .rounded-xl { border-radius: 0.75rem; }
    .rounded-2xl { border-radius: 1rem; }
    .rounded-full { border-radius: 9999px; }
    .rounded-lg { border-radius: 0.5rem; }
    .overflow-hidden { overflow: hidden; }
    .relative { position: relative; }
    .absolute { position: absolute; }
    .fixed { position: fixed; }
    .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
    .z-10 { z-index: 10; }
    .z-50 { z-index: 50; }
    .pointer-events-none { pointer-events: none; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 0.75rem; }
    .mb-4 { margin-bottom: 1rem; }
    .mb-6 { margin-bottom: 1.5rem; }
    .mb-8 { margin-bottom: 2rem; }
    .mb-12 { margin-bottom: 3rem; }
    .mb-16 { margin-bottom: 4rem; }
    .mt-2 { margin-top: 0.5rem; }
    .mt-8 { margin-top: 2rem; }
    .mt-12 { margin-top: 3rem; }
    .mx-auto { margin-left: auto; margin-right: auto; }
    .p-4 { padding: 1rem; }
    .p-5 { padding: 1.25rem; }
    .p-6 { padding: 1.5rem; }
    .p-8 { padding: 2rem; }
    .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
    .px-4 { padding-left: 1rem; padding-right: 1rem; }
    .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
    .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
    .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .py-20 { padding-top: 5rem; padding-bottom: 5rem; }
    .py-24 { padding-top: 6rem; padding-bottom: 6rem; }
    .pt-28 { padding-top: 7rem; }
    .pb-20 { padding-bottom: 5rem; }
    .hidden { display: none; }
    
    .aspect-3-2 { aspect-ratio: 3/2; }
    .aspect-4-3 { aspect-ratio: 4/3; }
    .aspect-square { aspect-ratio: 1; }
    .object-cover { object-fit: cover; width: 100%; height: 100%; }
    
    .text-xs { font-size: 0.75rem; }
    .text-sm { font-size: 0.875rem; }
    .text-base { font-size: 1rem; }
    .text-lg { font-size: 1.125rem; }
    .text-xl { font-size: 1.25rem; }
    .text-2xl { font-size: 1.5rem; }
    .text-3xl { font-size: 1.875rem; }
    .text-4xl { font-size: 2.25rem; }
    .text-5xl { font-size: 3rem; }
    .text-6xl { font-size: 3.75rem; }
    .text-7xl { font-size: 4.5rem; }
    .font-medium { font-weight: 500; }
    .font-semibold { font-weight: 600; }
    .font-bold { font-weight: 700; }
    .font-extrabold { font-weight: 800; }
    .tracking-wider { letter-spacing: 0.05em; }
    .tracking-widest { letter-spacing: 0.1em; }
    .tracking-tight { letter-spacing: -0.025em; }
    .uppercase { text-transform: uppercase; }
    .leading-tight { line-height: 1.25; }
    .leading-relaxed { line-height: 1.625; }
    
    /* ===== NAVIGATION ===== */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 50;
      padding: 1.25rem 0;
      transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease, backdrop-filter 0.3s ease;
    }
    .navbar.scrolled {
      background: hsl(var(--card) / 0.9);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid hsl(var(--border));
      padding: 0.75rem 0;
    }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; position: relative; }
    .nav-logo { display: flex; align-items: center; gap: 0.75rem; }
    .nav-logo img { filter: brightness(1.8) saturate(1.15); transition: filter 0.2s; }
    html.light .nav-logo img { filter: none; }
    .nav-logo-text { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; }
    .nav-links {
      display: flex; align-items: center; gap: 1.75rem;
    }
    .nav-links a {
      font-size: 0.875rem; font-weight: 500;
      color: hsl(var(--foreground) / 0.7);
      transition: color 0.3s;
    }
    .nav-links a:hover, .nav-links a.active { color: hsl(var(--primary)); }
    .nav-actions { display: flex; align-items: center; gap: 0.75rem; }
    .mobile-menu-btn { display: none; background: none; border: none; color: hsl(var(--foreground)); padding: 0.5rem; }
    .mobile-menu { display: none; }

    /* ===== NAV DROPDOWN ===== */
    .nav-dropdown { position: relative; }
    .nav-dropdown-trigger {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-size: 0.875rem; font-weight: 500;
      color: hsl(var(--foreground) / 0.7);
      cursor: pointer; transition: color 0.3s;
      background: none; border: none; padding: 0; font-family: inherit;
      outline: none; -webkit-tap-highlight-color: transparent;
    }
    .nav-dropdown-trigger:hover { color: hsl(var(--primary)); }
    .nav-dropdown-trigger:focus,
    .nav-dropdown-trigger:focus-visible,
    .nav-dropdown-trigger:active { outline: none; box-shadow: none; }
    .nav-dropdown-trigger svg { transition: transform 0.25s; }
    .nav-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }
    .nav-dropdown-menu {
      position: absolute; top: calc(100% + 0.875rem); left: 50%;
      transform: translateX(-50%) translateY(-6px);
      min-width: 240px;
      background: hsl(var(--card) / 0.97); backdrop-filter: blur(24px);
      border: 1px solid hsl(var(--border));
      border-radius: 0.875rem; padding: 0.5rem;
      display: flex; flex-direction: column; gap: 2px;
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.22s, transform 0.22s, visibility 0.22s;
      z-index: 100;
      box-shadow: 0 16px 40px hsl(var(--background) / 0.7);
    }
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown.open .nav-dropdown-menu {
      opacity: 1; visibility: visible; pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    .nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); }
    .nav-dropdown-menu a {
      padding: 0.6rem 1rem; border-radius: 0.5rem;
      font-size: 0.875rem; font-weight: 500;
      color: hsl(var(--foreground) / 0.75);
      transition: background 0.2s, color 0.2s;
      display: flex; align-items: center; gap: 0.6rem;
    }
    .nav-dropdown-menu a svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; }
    .nav-dropdown-menu a:hover svg { opacity: 1; }
    .nav-dropdown-menu a:hover { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }

    /* ===== HERO ===== */
    .hero {
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0; z-index: 0;
      overflow: hidden;
      background: none;
    }
    .hero-bg video {
      position: absolute;
      inset: 0;
      min-width: 100%;
      min-height: 100%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      filter: brightness(0.55) saturate(1.1);
      animation: heroBgBreath 18s ease-in-out infinite;
      transform: translateZ(0);
      will-change: transform;
    }
    @keyframes heroBgBreath {
      0%,100% { transform: scale(1)    translateX(0)     translateY(0); }
      25%      { transform: scale(1.03) translateX(-6px)  translateY(-4px); }
      50%      { transform: scale(1.06) translateX(0)     translateY(-8px); }
      75%      { transform: scale(1.03) translateX(6px)   translateY(-4px); }
    }
    /* Particle layer — tiny floating dots that mimic the image's sparkles */
    .hero-particles {
      position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
    }
    .hero-particles span {
      position: absolute; border-radius: 50%;
      background: hsl(268 82% 75%);
      opacity: 0;
      animation: particleDrift var(--dur, 6s) ease-in-out infinite;
      animation-delay: var(--delay, 0s);
    }
    @keyframes particleDrift {
      0%   { opacity: 0;    transform: translateY(0)     scale(0.6); }
      20%  { opacity: 0.7; }
      80%  { opacity: 0.4; }
      100% { opacity: 0;    transform: translateY(-80px) scale(1); }
    }
    .hero-overlay {
      position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(to bottom,
        hsl(var(--background) / 0.45),
        hsl(var(--background) / 0.15),
        hsl(var(--background) / 0.75));
    }
    .hero-overlay2 { position: absolute; inset: 0; z-index: 2; background: hsl(var(--background) / 0.08); }
    .hero-content {
      display: flex; align-items: center; gap: 4rem;
      position: relative; z-index: 5; max-width: 1100px; margin: 0 auto; padding: 0 1rem;
    }
    .hero-text { flex: 1; }
    .hero-tag {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.5rem 1rem; border-radius: 9999px;
      background: hsl(227 55% 4% / 0.7);
      border: 1px solid hsl(var(--primary) / 0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      margin-bottom: 1.5rem;
      font-size: 0.875rem; font-weight: 500; color: hsl(var(--primary));
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    .hero h1 {
      font-size: clamp(2.25rem, 5vw, 4.5rem);
      font-weight: 800; margin-bottom: 1.5rem;
      line-height: 1.05; letter-spacing: -0.025em;
    }
    .hero-subtitle {
      font-size: 1.125rem; color: hsl(var(--muted-foreground));
      margin-bottom: 2rem; max-width: 36rem; line-height: 1.625;
    }
    .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
    .hero-avatar { flex-shrink: 0; position: relative; }

    /* Soft background glow — breathes gently */
    .hero-avatar-glow {
      position: absolute; inset: -28px; border-radius: 1.5rem;
      background: radial-gradient(ellipse at center, hsl(var(--primary) / 0.35) 0%, transparent 70%);
      animation: glowBreathe 4s ease-in-out infinite;
    }

    /* Card — slow float + shadow that deepens mid-air */
    .hero-avatar-img {
      position: relative; z-index: 2;
      width: 22rem; height: 28rem; border-radius: 1rem;
      border: 1px solid hsl(var(--primary) / 0.35); overflow: hidden;
      background: hsl(var(--card) / 0.5); backdrop-filter: blur(4px);
      animation: floatCard 6s ease-in-out infinite;
    }
    .hero-avatar-img img { width: 100%; height: 100%; object-fit: cover; }

    /* Shimmer sweep — diagonal light streak glides across, then waits */
    .hero-avatar-img::after {
      content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
      background: linear-gradient(108deg, transparent 40%, rgba(255,255,255,0.13) 50%, transparent 60%);
      transform: translateX(-120%);
      animation: shimmerSweep 4.5s linear infinite;
    }

    .hero-badge {
      position: absolute; bottom: -1rem; right: -1rem; z-index: 4;
      padding: 0.5rem 1rem; border-radius: 9999px;
      background: hsl(var(--dark-surface) / 0.9); backdrop-filter: blur(20px);
      border: 1px solid hsl(var(--primary) / 0.4);
      font-size: 0.875rem; font-weight: 600; color: hsl(var(--primary));
      animation: floatBadge 3s ease-in-out infinite;
    }

    @keyframes floatCard {
      0%, 100% { transform: translateY(0);     box-shadow: 0 8px 30px hsl(var(--primary) / 0.12); }
      50%       { transform: translateY(-10px); box-shadow: 0 24px 50px hsl(var(--primary) / 0.22); }
    }
    @keyframes glowBreathe {
      0%, 100% { opacity: 0.5; transform: scale(1); }
      50%       { opacity: 0.9; transform: scale(1.06); }
    }
    @keyframes shimmerSweep {
      0%, 8%  { transform: translateX(-120%); }  /* brief pause off-left */
      30%     { transform: translateX(220%); }    /* ~1s glide across */
      100%    { transform: translateX(220%); }    /* ~3s wait off-right */
    }
    @keyframes floatBadge {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-8px); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-20px); }
    }

/* ===== SECTIONS ===== */
    section { position: relative; }
    .section-title { font-size: clamp(1.875rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1rem; }
    .section-subtitle { color: hsl(var(--muted-foreground)); font-size: 1.125rem; max-width: 42rem; margin: 0 auto; }
    
    /* ===== TOOLS SECTION — Cyber Rain BG ===== */
    .tools-section {
      position: relative;
      overflow: hidden;
      background: hsl(227 55% 3%);
    }
    .cyber-line {
      position: absolute; left: 0; right: 0;
      height: 2px;
      pointer-events: none;
      z-index: 0;
      animation: lineSweep 4s ease-in-out infinite;
    }
    @keyframes lineSweep {
      0%   { top: -2px; opacity: 0;
             background: linear-gradient(90deg, transparent 10%, hsl(220,100%,60%) 50%, transparent 90%);
             box-shadow: 0 0 12px hsl(220,100%,60%), 0 0 4px hsl(210,100%,65%); }
      5%   { opacity: 1; }
      45%  { background: linear-gradient(90deg, transparent 10%, hsl(220,100%,60%) 50%, transparent 90%);
             box-shadow: 0 0 12px hsl(220,100%,60%), 0 0 4px hsl(210,100%,65%); }
      55%  { background: linear-gradient(90deg, transparent 10%, hsl(268,82%,63%) 50%, transparent 90%);
             box-shadow: 0 0 12px hsl(268,82%,63%), 0 0 4px hsl(258,80%,58%); }
      90%  { opacity: 0.7; }
      100% { top: 100%; opacity: 0;
             background: linear-gradient(90deg, transparent 10%, hsl(268,82%,63%) 50%, transparent 90%);
             box-shadow: 0 0 12px hsl(268,82%,63%), 0 0 4px hsl(258,80%,58%); }
    }
    .tools-section .container,
    .tools-section .marquee-wrap { position: relative; z-index: 2; }

    /* ===== TOOLS MARQUEE ===== */
    .marquee-wrap { overflow: hidden; position: relative; padding: 1rem 0; }
    .marquee-track {
      display: flex; gap: 2rem; animation: marquee 25s linear infinite; width: max-content;
    }
    @keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    @keyframes btnStroke { to { --btn-angle: 360deg; } }
    .marquee-fade-l, .marquee-fade-r {
      position: absolute; top: 0; bottom: 0; width: 8rem; z-index: 10; pointer-events: none;
    }
    .marquee-fade-l { left: 0; background: linear-gradient(to right, hsl(227 55% 3%), transparent); }
    .marquee-fade-r { right: 0; background: linear-gradient(to left, hsl(227 55% 3%), transparent); }
    .tool-card {
      flex-shrink: 0; display: flex; align-items: center; gap: 1rem;
      padding: 1rem 1.5rem; min-width: 220px;
      border-radius: 0.75rem; transition: all 0.3s;
    }
    .tool-icon {
      width: 3rem; height: 3rem; border-radius: 0.5rem;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden; background: hsl(var(--primary) / 0.1);
    }
    .tool-icon img { width: 2rem; height: 2rem; object-fit: contain; }
    
    /* ===== SKILLS — Animated Progress Cards ===== */
    .skills-section { background: #000; backdrop-filter: blur(12px); position: relative; overflow: hidden; }
    .fw-section { background: #000; }
    .skills-section::after {
      content: ''; position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 700px; height: 700px;
      background: radial-gradient(circle, hsl(var(--primary) / 0.04) 0%, transparent 70%);
      pointer-events: none;
    }
    .sk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; z-index: 1; }
    .sk-card {
      position: relative;
      background: hsl(var(--card) / 0.85);
      border: 1px solid hsl(var(--border));
      border-radius: 1.25rem;
      padding: 1.5rem;
      overflow: hidden;
      opacity: 0;
      transform: translateY(30px);
      transition: box-shadow .4s, border-color .4s;
    }
    .sk-card.in-view {
      opacity: 1 !important;
      transform: translateY(0) !important;
      transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1),
                  box-shadow .4s, border-color .4s;
    }
    /* Accent colors */
    .sk-card[data-accent="blue"]   { --sk-a: 220 100% 50%; }
    .sk-card[data-accent="purple"] { --sk-a: 268 82% 63%; }
    .sk-card[data-accent="teal"]   { --sk-a: 168 100% 39%; }
    .sk-card[data-accent="amber"]  { --sk-a: 33 100% 64%; }
    /* Cursor-follow glow */
    .sk-card::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(400px circle at var(--glow-x, 50%) var(--glow-y, 50%),
        hsl(var(--sk-a, var(--primary)) / 0.07) 0%, transparent 55%);
      opacity: 0; transition: opacity .35s;
      pointer-events: none; z-index: 0;
    }
    .sk-card:hover::before { opacity: 1; }
    .sk-card:hover {
      border-color: hsl(var(--sk-a, var(--primary)) / 0.35);
      box-shadow: 0 0 50px hsl(var(--sk-a, var(--primary)) / 0.1), 0 8px 30px rgba(0,0,0,0.18);
    }
    /* Orbiting border lights */
    @property --sk-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    .sk-card::after {
      content: '';
      position: absolute; inset: 0;
      border-radius: inherit;
      padding: 1.5px;
      background: conic-gradient(
        from var(--sk-angle),
        transparent 0%,
        hsl(var(--sk-a, var(--primary)) / 0.35) 1.5%,
        hsl(var(--sk-a, var(--primary))) 3%,
        hsl(var(--sk-a, var(--primary)) / 0.35) 4.5%,
        transparent 6.5%,
        transparent 46.5%,
        hsl(var(--sk-a, var(--primary)) / 0.35) 48%,
        hsl(var(--sk-a, var(--primary))) 50%,
        hsl(var(--sk-a, var(--primary)) / 0.35) 52%,
        transparent 53.5%,
        transparent 100%
      );
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      animation: skBorderSpin 5s linear infinite;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes skBorderSpin { to { --sk-angle: 360deg; } }
    /* Icon */
    .sk-icon {
      width: 3.25rem; height: 3.25rem; border-radius: .625rem;
      background: hsl(var(--sk-a, var(--primary)) / 0.15);
      display: flex; align-items: center; justify-content: center;
      position: relative; flex-shrink: 0; margin-bottom: 1.25rem;
    }
    .sk-icon::after {
      content: ''; position: absolute; inset: -4px;
      border-radius: .75rem;
      background: hsl(var(--sk-a, var(--primary)) / 0.12);
      animation: skPulse 3s ease-in-out infinite; z-index: -1;
    }
    @keyframes skPulse {
      0%, 100% { opacity: .5; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.12); }
    }
    .sk-icon svg { width: 1.5rem; height: 1.5rem; color: hsl(var(--sk-a, var(--primary))); position: relative; z-index: 1; }
    .sk-tag {
      position: absolute; top: 1rem; right: 1rem;
      font-size: .55rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      padding: .2rem .55rem; border-radius: 100px;
      background: hsl(var(--sk-a, var(--primary)) / 0.15);
      color: hsl(var(--sk-a, var(--primary)));
      z-index: 1;
    }
    .sk-title {
      font-family: var(--font-display); font-size: 1rem; font-weight: 700;
      color: hsl(var(--foreground)); line-height: 1.3; margin-bottom: 1rem;
      position: relative; z-index: 1;
    }
    /* Skill list */
    .sk-list { display: flex; flex-direction: column; gap: .5rem; position: relative; z-index: 1; }
    .sk-list-item {
      display: flex; align-items: center; gap: .5rem;
      font-size: .82rem; color: hsl(var(--foreground) / 0.75);
      opacity: 0; transform: translateX(-12px);
    }
    .sk-card.in-view .sk-list-item {
      opacity: 1; transform: translateX(0);
      transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
    }
    .sk-dot {
      width: .375rem; height: .375rem; border-radius: 50%; flex-shrink: 0;
      background: hsl(var(--sk-a, var(--primary)) / 0.6);
    }
    @media (max-width: 1024px) { .sk-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 640px)  { .sk-grid { grid-template-columns: 1fr; } }
    
    /* ===== PORTFOLIO ===== */
    .portfolio-card {
      position: relative; border-radius: 0.75rem; overflow: hidden;
      transition: all 0.3s;
    }
    .portfolio-card:hover { box-shadow: 0 0 40px hsl(var(--neon-purple) / 0.5); }
    .portfolio-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, hsl(var(--background) / 0.95), hsl(var(--background) / 0.4), transparent);
      opacity: 0; transition: opacity 0.3s;
      display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;
    }
    .portfolio-card:hover .portfolio-overlay { opacity: 1; }
    
    /* ===== VENTO CARDS ===== */
    /* ── Featured Work — Immersive Bento Grid ── */
    .fw-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: 300px;
      gap: 1.125rem;
    }
    .fw-card:nth-child(1) { grid-column: span 2; }
    .fw-card:nth-child(2) { grid-row: span 2; }
    .fw-card:nth-child(6) { grid-column: span 2; }
    .fw-card {
      position: relative;
      border-radius: 1.25rem;
      overflow: hidden;
      cursor: pointer;
      display: block;
      color: inherit;
      opacity: 0;
    }
    .fw-card:nth-child(odd)  { transform: translateX(-50px) rotate(-1.5deg); }
    .fw-card:nth-child(even) { transform: translateX(50px) rotate(1.5deg); }
    .fw-card.in-view {
      opacity: 1 !important;
      transform: translateX(0) rotate(0) !important;
      transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
    }
    .fw-tilt {
      width: 100%; height: 100%;
      position: relative;
      transition: transform .15s ease-out;
      transform-style: preserve-3d;
      border-radius: 1.25rem;
      overflow: hidden;
    }
    .fw-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .65s cubic-bezier(.25,.46,.45,.94);
    }
    .fw-card:hover .fw-img { transform: scale(1.08); }
    .fw-scrim {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(160deg,
        rgba(4,8,28,0.05) 0%,
        rgba(4,8,28,0.45) 40%,
        rgba(4,8,28,0.92) 100%);
      transition: background .45s;
    }
    .fw-card:hover .fw-scrim {
      background: linear-gradient(160deg,
        hsl(220 100% 18%/.1) 0%,
        hsl(220 100% 14%/.55) 40%,
        hsl(220 100% 10%/.95) 100%);
    }
    .fw-num {
      position: absolute; top: .75rem; right: 1.25rem; z-index: 2;
      font-family: var(--font-display);
      font-size: 5rem; font-weight: 900;
      line-height: 1;
      color: rgba(255,255,255,0.05);
      transition: transform .5s cubic-bezier(.16,1,.3,1), color .5s;
      pointer-events: none;
    }
    .fw-card:hover .fw-num {
      transform: translateY(-10px) scale(1.05);
      color: hsl(var(--primary) / 0.12);
    }
    .fw-badge {
      position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2;
      background: hsl(var(--primary) / 0.85);
      backdrop-filter: blur(12px);
      color: #fff;
      font-size: .68rem; font-weight: 700;
      padding: .3rem .85rem;
      border-radius: 100px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .fw-content {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 1.75rem; z-index: 2;
    }
    .fw-title {
      font-family: var(--font-display);
      font-size: 1.3rem; font-weight: 700;
      color: #fff;
      margin-bottom: .35rem;
      transition: transform .4s cubic-bezier(.16,1,.3,1);
    }
    .fw-card:hover .fw-title { transform: translateY(-4px); }
    .fw-desc {
      font-size: .82rem;
      color: rgba(255,255,255,0.55);
      line-height: 1.6;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .35s .05s;
    }
    .fw-card:hover .fw-desc {
      max-height: 80px;
      opacity: 1;
    }
    .fw-cta {
      display: inline-flex; align-items: center; gap: .5rem;
      margin-top: .75rem;
      font-size: .8rem; font-weight: 600;
      color: hsl(var(--primary));
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .35s .12s, transform .4s .12s cubic-bezier(.16,1,.3,1), color .25s;
    }
    .fw-card:hover .fw-cta { opacity: 1; transform: translateY(0); }
    .fw-cta:hover { color: hsl(var(--accent)); }
    .fw-cta svg { transition: transform .3s; }
    .fw-card:hover .fw-cta svg { transform: translateX(3px); }
    /* Glow border */
    .fw-card::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: 1.25rem;
      box-shadow: inset 0 0 0 1.5px transparent;
      transition: box-shadow .4s;
      z-index: 3; pointer-events: none;
    }
    .fw-card:hover::before {
      box-shadow:
        inset 0 0 0 1.5px hsl(var(--primary) / 0.45),
        0 0 60px hsl(var(--primary) / 0.15),
        0 12px 40px rgba(0,0,0,0.35);
    }
    /* Shimmer sweep on hover */
    .fw-card::after {
      content: '';
      position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.13) 50%, rgba(255,255,255,0.06) 58%, transparent 65%);
      transform: translateX(-150%);
      pointer-events: none;
    }
    .fw-card:hover::after { animation: fwShimmer .85s cubic-bezier(.16,1,.3,1); }
    @keyframes fwShimmer { to { transform: translateX(150%); } }
    @media (max-width: 1024px) {
      .fw-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; }
      .fw-card:nth-child(1) { grid-column: span 2; }
      .fw-card:nth-child(2) { grid-row: span 1; }
      .fw-card:nth-child(6) { grid-column: span 2; }
    }
    @media (max-width: 640px) {
      .fw-grid { grid-template-columns: 1fr; grid-auto-rows: 300px; }
      .fw-card:nth-child(1), .fw-card:nth-child(6) { grid-column: span 1; }
      .fw-card:nth-child(2) { grid-row: span 1; }
      .fw-num { font-size: 3.5rem; }
    }

    /* ===== CLIENTS MARQUEE ===== */
    .cl-marquee { overflow: hidden; position: relative; padding: 1rem 0; }
    .cl-track {
      display: flex; gap: 1.25rem;
      width: max-content;
      animation: clScroll 30s linear infinite;
    }
    .cl-track:hover { animation-play-state: paused; }
    @keyframes clScroll {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }
    .cl-fade-l, .cl-fade-r {
      position: absolute; top: 0; bottom: 0; width: 6rem; z-index: 10; pointer-events: none;
    }
    .cl-fade-l { left: 0; background: linear-gradient(to right, hsl(var(--background)), transparent); }
    .cl-fade-r { right: 0; background: linear-gradient(to left, hsl(var(--background)), transparent); }
    .cl-pill {
      flex-shrink: 0;
      display: flex; align-items: center; gap: .75rem;
      padding: .75rem 1.5rem;
      background: hsl(var(--card) / 0.7);
      border: 1px solid hsl(var(--border) / 0.5);
      border-radius: 100px;
      transition: border-color .3s, box-shadow .3s, background .3s;
      text-decoration: none; color: inherit;
      white-space: nowrap;
    }
    .cl-pill:hover {
      border-color: hsl(var(--primary) / 0.5);
      background: hsl(var(--card));
      box-shadow: 0 0 25px hsl(var(--primary) / 0.12);
    }
    .cl-name { font-family: var(--font-display); font-size: .875rem; font-weight: 600; color: hsl(var(--foreground)); }
    .cl-role { font-size: .72rem; color: hsl(var(--muted-foreground)); }
    .cl-divider { width: 1px; height: 1.75rem; background: hsl(var(--border)); flex-shrink: 0; }
    
    /* ===== ABOUT ===== */
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; max-width: 56rem; margin: 0 auto; }
    .about-badge {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.5rem 1rem; border-radius: 9999px;
      border: 1px solid hsl(var(--primary) / 0.2);
    }
    .about-portrait { position: relative; }
    .about-portrait-glow {
      position: absolute; inset: 0; border-radius: 1rem;
      background: linear-gradient(135deg, hsl(var(--primary) / 0.2), hsl(var(--accent) / 0.1));
      filter: blur(30px);
    }
    .about-stats { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
    .about-stat { text-align: center; }
    .about-stat-num { font-size: 1.875rem; font-weight: 700; color: hsl(var(--primary)); }
    .about-stat-num.gold { color: hsl(var(--gold)); }
    .about-divider { width: 1px; background: hsl(var(--border)); }
    
    /* ===== SERVICE PAGE ===== */
    .service-icon-wrap {
      width: 5rem; height: 5rem; border-radius: 0.75rem;
      background: hsl(var(--primary) / 0.2);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.5rem;
    }
    .service-icon-wrap svg { width: 2.5rem; height: 2.5rem; color: hsl(var(--primary)); }
    .feature-item { display: flex; align-items: center; gap: 0.75rem; }
    .feature-check {
      width: 1.5rem; height: 1.5rem; border-radius: 9999px;
      background: hsl(var(--primary) / 0.2);
      display: flex; align-items: center; justify-content: center;
    }
    .feature-check svg { width: 1rem; height: 1rem; color: hsl(var(--primary)); }
    .service-card {
      border-radius: 0.75rem; overflow: hidden; transition: all 0.3s;
    }
    .service-card:hover { box-shadow: 0 0 40px hsl(var(--neon-purple) / 0.5); }
    .service-card img { transition: transform 0.5s; }
    .service-card:hover img { transform: scale(1.1); }
    
    /* ===== EXPERIENCE ===== */
    .exp-card {
      display: flex; gap: 1rem; padding: 1.5rem; border-radius: 0.75rem;
    }
    .exp-icon {
      width: 3rem; height: 3rem; border-radius: 0.5rem;
      background: hsl(var(--primary) / 0.2);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .exp-icon svg { width: 1.5rem; height: 1.5rem; color: hsl(var(--primary)); }
    
    /* ===== CONTACT ===== */
    .contact-info-card {
      display: flex; align-items: center; gap: 1rem;
      padding: 1rem; border-radius: 0.5rem;
    }
    .contact-icon {
      width: 3rem; height: 3rem; border-radius: 0.5rem;
      background: hsl(var(--primary) / 0.2);
      display: flex; align-items: center; justify-content: center;
    }
    .contact-icon svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary)); }
    .form-input {
      width: 100%; padding: 0.75rem 1rem; border-radius: 0.5rem;
      background: hsl(var(--muted) / 0.5); border: 1px solid hsl(var(--border));
      color: hsl(var(--foreground)); font-size: 0.875rem; font-family: inherit;
      transition: border-color 0.3s;
    }
    .form-input:focus { outline: none; border-color: hsl(var(--primary)); }
    .form-input::placeholder { color: hsl(var(--muted-foreground)); }
    textarea.form-input { resize: none; min-height: 6rem; }
    .form-label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; }
    
    /* ===== FOOTER ===== */
    .footer {
      position: relative; z-index: 10;
      background: hsl(var(--card) / 0.5);
      border-top: 1px solid hsl(var(--border));
    }
    .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-bottom: 3rem; }
    .footer-bottom {
      border-top: 1px solid hsl(var(--border)); padding-top: 1.5rem;
      display: flex; align-items: center; justify-content: space-between;
    }
    
    /* ===== WHATSAPP ===== */
    .whatsapp-btn {
      position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50;
      width: 3.5rem; height: 3.5rem; border-radius: 9999px;
      background: #25D366; border: none;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.3s;
      animation: waGlow 0.8s ease-in-out infinite;
    }
    @keyframes waGlow {
      0%, 100% {
        box-shadow:
          0 0 8px rgba(37,211,102,0.4),
          0 0 16px rgba(37,211,102,0.15);
      }
      50% {
        box-shadow:
          0 0 18px rgba(37,211,102,0.9),
          0 0 36px rgba(37,211,102,0.5),
          0 0 60px rgba(37,211,102,0.2);
      }
    }
    .whatsapp-btn:hover {
      transform: scale(1.1);
      animation: none;
      box-shadow:
        0 0 22px rgba(37,211,102,0.9),
        0 0 44px rgba(37,211,102,0.5);
    }
    .whatsapp-btn svg { width: 1.75rem; height: 1.75rem; fill: white; }
    
    /* ===== PROCESS STEPS ===== */
    .process-step {
      width: 2.5rem; height: 2.5rem; border-radius: 9999px;
      background: hsl(var(--primary) / 0.3);
      display: flex; align-items: center; justify-content: center;
      color: hsl(var(--primary)); font-weight: 700; margin: 0 auto 0.5rem;
    }
    
    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .nav-right .nav-links { display: none; }
      .nav-right > a.btn { display: none; }
      .mobile-menu-btn { display: block; }
      .mobile-menu.open { display: block; }
      .hero-content { flex-direction: column; text-align: center; gap: 2rem; }
      .hero-buttons { justify-content: center; }
      .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
      .about-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
      .hero-avatar-img { width: 16rem; height: 20rem; }
    }
    @media (min-width: 768px) and (max-width: 1024px) {
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .grid-3 { grid-template-columns: repeat(2, 1fr); }
    }

    /* ===== SVG Icon Styles ===== */
    .icon { width: 1rem; height: 1rem; display: inline-block; vertical-align: middle; }
    .icon-lg { width: 1.5rem; height: 1.5rem; }
    .icon-xl { width: 2.5rem; height: 2.5rem; }

    /* Section separator */
    .section-sep { height: 1px; background: hsl(var(--border)); margin: 0; }

    /* ===== THEME TOGGLE ===== */
    .nav-right { display: flex; align-items: center; gap: 0.75rem; }
    .theme-toggle {
      display: flex; align-items: center; justify-content: center;
      width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
      background: hsl(var(--card)); border: 1px solid hsl(var(--border));
      color: hsl(var(--foreground)); cursor: pointer; transition: all 0.3s;
      flex-shrink: 0;
    }
    .theme-toggle:hover { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.4); }
    .icon-sun { display: none; }
    .icon-moon { display: block; }
    html.light .icon-sun { display: block; }
    html.light .icon-moon { display: none; }

    /* ===== LIGHT MODE ===== */
    html.light {
      --background: 0 0% 100%;
      --foreground: 220 30% 8%;
      --card: 220 20% 96%;
      --card-foreground: 220 30% 8%;
      --popover: 0 0% 100%;
      --popover-foreground: 220 30% 8%;
      --primary: 220 100% 40%;
      --primary-foreground: 0 0% 100%;
      --secondary: 220 15% 93%;
      --secondary-foreground: 220 30% 8%;
      --muted: 220 15% 93%;
      --muted-foreground: 220 15% 28%;
      --accent: 268 72% 50%;
      --accent-foreground: 0 0% 100%;
      --destructive: 0 84% 55%;
      --border: 220 18% 86%;
      --input: 220 18% 91%;
      --ring: 220 100% 40%;
      --neon-purple: 268 72% 50%;
      --gold: 268 72% 50%;
      --dark-surface: 220 15% 93%;
      --darker-surface: 220 15% 88%;
      --gradient-neon: linear-gradient(135deg, hsl(220 100% 40%) 0%, hsl(244 90% 48%) 50%, hsl(268 72% 50%) 100%);
    }
    html.light body { background: #fff; color: #111; }
    html.light h1, html.light h2, html.light h3, html.light h4, html.light h5, html.light h6 { color: #111; }
    html.light .text-foreground { color: #111; }
    html.light .text-muted { color: #444; }
    html.light .section-title { color: #111; }
    html.light .section-subtitle { color: #444; }
    html.light .gradient-text {
      background: linear-gradient(135deg, hsl(220 100% 45%) 0%, hsl(268 82% 55%) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    /* ── Navbar ── */
    html.light .navbar.scrolled {
      background: rgba(255,255,255,0.97);
      border-bottom-color: hsl(220 18% 88%);
    }
    html.light .nav-links a { color: #333; }
    html.light .nav-links a:hover, html.light .nav-links a.active { color: hsl(220 100% 40%); }
    html.light .nav-dropdown-trigger { color: #333; }
    html.light .nav-logo-text { color: #111; }
    html.light .mobile-menu {
      background: #fff !important;
      border-top-color: hsl(220 18% 88%) !important;
    }
    html.light .mobile-menu a { color: #333 !important; }
    html.light .nav-dropdown-menu {
      background: rgba(255,255,255,0.99);
      box-shadow: 0 12px 36px rgba(0,0,0,0.12);
      border-color: hsl(220 18% 88%);
    }
    html.light .nav-dropdown-menu a { color: #333; }
    html.light .nav-dropdown-menu a:hover { color: hsl(220 100% 40%); }

    /* ── Cards ── */
    html.light .sk-card,
    html.light .glass-card,
    html.light .cl-pill,
    html.light .exp-card,
    html.light .contact-info-card,
    html.light .fw-card,
    html.light .portfolio-card {
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      background: #fff;
      border-color: hsl(220 18% 88%);
    }
    html.light .glass-card { background: #fff; border-color: hsl(220 18% 88%); }

    /* ── Buttons ── */
    html.light .btn-outline { color: #111; }
    html.light .btn-neon { box-shadow: 0 0 18px hsl(220 100% 40% / 0.25); }

    /* ── Glow (subtle in light) ── */
    html.light .neon-border { border-color: hsl(220 18% 88%); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    html.light .hover-glow:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-color: hsl(220 18% 80%); }

    /* ── Footer ── */
    html.light .footer { background: hsl(220 20% 96%); border-top-color: hsl(220 18% 88%); color: #333; }
    html.light .footer h4 { color: #111; }
    html.light .footer .text-muted { color: #555; }
    html.light .footer-bottom p { color: #666; }

    /* ── Form inputs ── */
    html.light .form-input { background: #f8f9fa; border-color: hsl(220 18% 86%); color: #111; }
    html.light .form-input::placeholder { color: #888; }
    html.light .form-input:focus { border-color: hsl(220 100% 40%); }
    html.light .form-label { color: #222; }

    /* ── Theme toggle ── */
    html.light .theme-toggle { background: #f0f0f0; border-color: hsl(220 18% 86%); color: #333; }

    /* ── Subpage hero ── */
    html.light .subpage-hero { background: linear-gradient(160deg, #fff 0%, hsl(220 20% 96%) 40%, #fff 100%); }
    html.light .subpage-hero::after { background: linear-gradient(to top, #fff, transparent); }
    html.light .subpage-hero h1 { color: #111; }
    html.light .subpage-hero .hero-subtitle { color: #444; }

    /* ── Catch-all: force dark text on any remaining white text ── */
    html.light .font-display { color: #111; }
    html.light .font-semibold { color: #111; }
    html.light .font-bold { color: #111; }
    html.light .font-extrabold { color: #111; }
    html.light .text-sm { color: #333; }
    html.light .text-xs { color: #555; }
    html.light .text-lg { color: #111; }
    html.light .text-xl { color: #111; }
    html.light .leading-relaxed { color: #333; }
    html.light .tracking-wider { color: inherit; }
    html.light .uppercase { color: inherit; }

    /* ── Skill cards text ── */
    html.light .sk-title { color: #111; }
    html.light .sk-list-item { color: #444; }
    html.light .sk-tag { color: hsl(220 100% 40%); }

    /* ── Featured Work text (inside dark images — keep white) ── */
    html.light .fw-title { color: #fff; }
    html.light .fw-desc { color: rgba(255,255,255,0.6); }
    html.light .fw-badge { color: #fff; }
    html.light .fw-view-btn { color: #fff; }

    /* ── Client pills ── */
    html.light .cl-name { color: #111; }
    html.light .cl-role { color: #555; }
    html.light .cl-pill { background: #fff; border-color: hsl(220 18% 88%); }

    /* ── Contact cards ── */
    html.light .contact-info-card .text-sm { color: #333; }
    html.light .contact-info-card .font-semibold { color: #111; }
    html.light .contact-icon { background: hsl(220 100% 40% / 0.1); }

    /* ── About page stats ── */
    html.light .story-stat-num { color: hsl(220 100% 40%); }
    html.light .story-stat-label { color: #555; }
    html.light .story-text p { color: #333; }
    html.light .story-text h2 { color: #111; }

    /* ── Skill bars (about page) ── */
    html.light .skill-bar-name { color: #111; }
    html.light .skill-bar-pct { color: hsl(var(--skb-accent, 220 100% 40%)); }
    html.light .skill-bar-card { background: #fff; border-color: hsl(220 18% 88%); }

    /* ── Tools section (stays dark on all pages) ── */
    html.light .about-tools-section { background: hsl(227 55% 6%); }
    html.light .about-tool-name { color: #f0f0f0; }
    html.light .about-tool-role { color: hsl(225 20% 65%); }

    /* ── CTA section ── */
    html.light .cta-tag { color: hsl(220 100% 35%); }
    html.light .cta-title { color: #111; }
    html.light .cta-subtitle { color: #444; }
    html.light .cta-inner { background: #fff; border-color: hsl(220 18% 88%); box-shadow: 0 8px 40px rgba(0,0,0,0.06); }
    html.light .cta-divider { color: #555; }

    /* ── Portfolio grid cards text (inside dark images — keep white) ── */
    html.light .portfolio-grid .fw-title { color: #fff; }
    html.light .portfolio-grid .fw-desc { color: rgba(255,255,255,0.6); }

    /* ── Dark sections text stays white in light mode ── */
    html.light .fw-section .section-title { color: #fff; }
    html.light .fw-section .section-subtitle { color: rgba(255,255,255,0.6); }
    html.light .fw-section .gradient-text {
      background: linear-gradient(135deg, hsl(220 100% 70%) 0%, hsl(268 82% 70%) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    html.light .skills-section .section-title { color: #fff; }
    html.light .skills-section .section-subtitle { color: rgba(255,255,255,0.6); }
    html.light .skills-section .gradient-text {
      background: linear-gradient(135deg, hsl(220 100% 70%) 0%, hsl(268 82% 70%) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    html.light .skills-section .sk-title { color: #fff; }
    html.light .skills-section .sk-list-item { color: rgba(255,255,255,0.75); }
    html.light .skills-section .sk-tag { color: hsl(220 100% 70%); }

    /* ── Experience cards ── */
    html.light .exp-card { background: #fff; border-color: hsl(220 18% 88%); }

    /* ── Misc ── */
    html.light .section-sep { background: hsl(220 18% 88%); }
    html.light .about-badge { border-color: hsl(220 100% 40% / 0.2); color: #333; }
    html.light .process-step { color: hsl(220 100% 40%); }
    html.light .hero-badge { background: rgba(255,255,255,0.95); color: hsl(220 100% 40%); }

    /* ===== SUBPAGE HERO ===== */
    .subpage-hero {
      min-height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      padding-top: 5rem;
      background: linear-gradient(160deg, hsl(var(--background)) 0%, hsl(227 55% 8%) 40%, hsl(var(--background)) 100%);
    }
    .subpage-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 30% 50%, hsl(var(--primary) / 0.1) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 50%, hsl(var(--neon-purple) / 0.08) 0%, transparent 60%);
      pointer-events: none;
    }
    .subpage-hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 120px;
      background: linear-gradient(to top, hsl(var(--background)), transparent);
      pointer-events: none;
      z-index: 2;
    }
    .subpage-hero-content {
      position: relative;
      z-index: 3;
      text-align: center;
      max-width: 800px;
      padding: 0 1rem;
    }
    .subpage-hero h1 {
      font-size: clamp(2.25rem, 5vw, 4rem);
      font-weight: 800;
      margin-bottom: 1rem;
      line-height: 1.1;
      letter-spacing: -0.025em;
    }
    .subpage-hero .hero-subtitle {
      font-size: 1.125rem;
      color: hsl(var(--muted-foreground));
      max-width: 36rem;
      margin: 0 auto 2rem;
      line-height: 1.625;
    }
    /* Subpage hero floating orbs */
    .hero-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
      animation: orbFloat 8s ease-in-out infinite;
    }
    .hero-orb-1 {
      width: 300px; height: 300px;
      background: hsl(var(--primary) / 0.12);
      top: 10%; left: 10%;
    }
    .hero-orb-2 {
      width: 200px; height: 200px;
      background: hsl(var(--neon-purple) / 0.1);
      bottom: 20%; right: 15%;
      animation-delay: -4s;
    }
    @keyframes orbFloat {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-20px) scale(1.05); }
    }

    /* Light mode subpage hero */
    html.light .subpage-hero {
      background: linear-gradient(160deg, hsl(var(--background)) 0%, hsl(220 18% 94%) 40%, hsl(var(--background)) 100%);
    }
    html.light .subpage-hero::after {
      background: linear-gradient(to top, #fff, transparent);
    }

    /* Image-backed subpage hero (skill pages) — image is set inline */
    .subpage-hero--image {
      min-height: 70vh;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
    }
    /* Subtle downward shift of background subject (e.g. AI brain) */
    .subpage-hero--image.subpage-hero--bg-top {
      background-position: center 40% !important;
    }
    /* Push image upward so distracting top elements crop out (e.g. video icons) */
    .subpage-hero--image.subpage-hero--bg-bottom {
      background-position: center 85% !important;
    }
    /* Horizontally flipped background layer (kept separate so overlays stay correct) */
    .subpage-hero--flip-bg { background-image: none !important; }
    .hero-bg-flipped {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      transform: scaleX(-1);
      z-index: 0;
    }
    .subpage-hero--flip-bg::before { z-index: 1; }
    .subpage-hero--image::before {
      background:
        radial-gradient(ellipse 70% 60% at center, transparent 0%, hsl(var(--background) / 0.55) 100%),
        linear-gradient(180deg, hsl(var(--background) / 0.25) 0%, transparent 30%, hsl(var(--background) / 0.65) 100%);
    }
    html.light .subpage-hero--image::before {
      background:
        radial-gradient(ellipse 70% 60% at center, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.65) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0.80) 100%);
    }

    /* ===== SKILL HERO POLISH — alignment, eyebrow, accent ===== */
    .subpage-hero--image { padding: 5rem 0 0; }
    .subpage-hero-container {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 6vw;
      display: flex;
      position: relative;
      z-index: 3;
    }
    .subpage-hero--align-left  .subpage-hero-container { justify-content: flex-start; }
    .subpage-hero--align-right .subpage-hero-container { justify-content: flex-end; }
    .subpage-hero--align-center .subpage-hero-container { justify-content: center; }

    .subpage-hero--align-left  .subpage-hero-content,
    .subpage-hero--align-right .subpage-hero-content,
    .subpage-hero--align-center .subpage-hero-content {
      max-width: 34rem;
      padding: 0;
      animation: heroFadeUp 0.9s ease both;
    }
    .subpage-hero--align-left  .subpage-hero-content { text-align: left; }
    .subpage-hero--align-right .subpage-hero-content { text-align: left; }
    .subpage-hero--align-center .subpage-hero-content { text-align: center; }
    .subpage-hero--align-left  .hero-subtitle,
    .subpage-hero--align-right .hero-subtitle { margin: 0; max-width: 32rem; }

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

    @property --pillAngle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    .hero-eyebrow {
      position: relative;
      isolation: isolate;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-family: var(--font-display);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      padding: 0.45rem 1rem;
      margin-bottom: 1.4rem;
      color: hsl(var(--primary));
      background: hsl(227 55% 4% / 0.7);
      border: 1px solid hsl(var(--primary) / 0.5);
      border-radius: 999px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    .hero-eyebrow::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: hsl(var(--btn-blue));
      box-shadow: 0 0 10px hsl(var(--primary));
      animation: dotPulse 1.8s ease-in-out infinite;
    }
    @keyframes dotPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: 0.5; transform: scale(0.8); }
    }
    .hero-eyebrow::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 999px;
      padding: 1px;
      background: conic-gradient(
        from var(--pillAngle),
        transparent 0deg,
        #c084fc 8deg,
        transparent 16deg,
        transparent 180deg,
        #c084fc 188deg,
        transparent 196deg,
        transparent 360deg
      );
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
              mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      pointer-events: none;
      z-index: -1;
      animation: pillSpin 3.2s linear infinite;
    }
    @keyframes pillSpin {
      to { --pillAngle: 360deg; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-eyebrow::after { animation: none; }
    }
    html.light .hero-eyebrow {
      color: hsl(220 100% 40%);
      background: rgba(255,255,255,0.85);
      border-color: hsl(220 100% 40% / 0.3);
    }

    .subpage-hero--image h1 {
      font-size: clamp(2.5rem, 5.8vw, 4.5rem);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin-bottom: 1.25rem;
      color: #fff;
    }
    html.light .subpage-hero--image h1 { color: #111; }

    .hero-accent {
      background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--neon-purple)) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      display: inline-block;
    }
    html.light .hero-accent {
      background: linear-gradient(135deg, hsl(220 100% 45%) 0%, hsl(268 82% 55%) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .subpage-hero--image.subpage-hero--align-left::before {
      background:
        linear-gradient(90deg, hsl(var(--background) / 0.88) 0%, hsl(var(--background) / 0.55) 30%, transparent 60%),
        linear-gradient(180deg, hsl(var(--background) / 0.25) 0%, transparent 30%, hsl(var(--background) / 0.65) 100%);
    }
    .subpage-hero--image.subpage-hero--align-right::before {
      background:
        linear-gradient(270deg, hsl(var(--background) / 0.88) 0%, hsl(var(--background) / 0.55) 30%, transparent 60%),
        linear-gradient(180deg, hsl(var(--background) / 0.25) 0%, transparent 30%, hsl(var(--background) / 0.65) 100%);
    }
    html.light .subpage-hero--image.subpage-hero--align-left::before {
      background:
        linear-gradient(90deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.55) 30%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0.80) 100%);
    }
    html.light .subpage-hero--image.subpage-hero--align-right::before {
      background:
        linear-gradient(270deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.55) 30%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.10) 30%, rgba(255,255,255,0.80) 100%);
    }

    @media (max-width: 768px) {
      .subpage-hero--align-left  .subpage-hero-container,
      .subpage-hero--align-right .subpage-hero-container { justify-content: center; }
      .subpage-hero--align-left  .subpage-hero-content,
      .subpage-hero--align-right .subpage-hero-content { text-align: center; }
      .subpage-hero--align-left  .hero-subtitle,
      .subpage-hero--align-right .hero-subtitle { margin: 0 auto; }
      .subpage-hero--image.subpage-hero--align-left::before,
      .subpage-hero--image.subpage-hero--align-right::before {
        background:
          linear-gradient(180deg, hsl(var(--background) / 0.45) 0%, hsl(var(--background) / 0.20) 30%, hsl(var(--background) / 0.75) 100%);
      }
      html.light .subpage-hero--image.subpage-hero--align-left::before,
      html.light .subpage-hero--image.subpage-hero--align-right::before {
        background:
          linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.20) 30%, rgba(255,255,255,0.85) 100%);
      }
    }

    /* ===== WEB PROJECT CARDS — tall white cards (homepage + skill-uiux) ===== */
    .uw-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }
    .uw-card {
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: 1rem;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 10px 30px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.08);
      transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
    }
    .uw-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 28px 56px rgba(0,0,0,0.28), 0 0 0 1.5px hsl(var(--primary) / 0.55);
    }
    .uw-card-img {
      position: relative;
      height: 320px;
      background: #f5f5f8;
      overflow: hidden;
    }
    .uw-card-img img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .7s cubic-bezier(.16,1,.3,1);
    }
    .uw-card:hover .uw-card-img img { transform: scale(1.06); }
    .uw-card-info {
      flex: 1;
      padding: 1.25rem 1.4rem 1.4rem;
      background: #ffffff;
      display: flex;
      flex-direction: column;
    }
    .uw-tag {
      display: inline-block;
      font-size: .62rem; font-weight: 800;
      letter-spacing: .12em; text-transform: uppercase;
      color: hsl(var(--primary));
      margin-bottom: .5rem;
    }
    .uw-card-info h3 {
      font-family: var(--font-display);
      font-size: 1.05rem; font-weight: 700;
      color: #0e0f1a;
      line-height: 1.3;
      margin-bottom: .4rem;
    }
    .uw-card-info p {
      font-size: .82rem;
      color: #5a5d6b;
      line-height: 1.55;
      margin-bottom: 1rem;
    }
    .uw-actions {
      display: flex;
      gap: 0.5rem;
      margin-top: auto;
      flex-wrap: wrap;
    }
    .uw-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.5rem 0.9rem;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      border-radius: 0.55rem;
      transition: background .25s, color .25s, border-color .25s, box-shadow .25s, transform .2s;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      line-height: 1;
    }
    .uw-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
    .uw-btn-primary {
      background: hsl(var(--btn-blue));
      color: #ffffff;
      border: 1px solid hsl(var(--btn-blue));
      animation: uwBtnBlink 1.6s ease-in-out infinite;
      box-shadow: 0 4px 14px hsl(var(--btn-blue) / 0.3);
    }
    @keyframes uwBtnBlink {
      0%, 100% { box-shadow: 0 0 0 0 hsl(var(--btn-blue) / 0.5), 0 4px 14px hsl(var(--btn-blue) / 0.3); }
      50%      { box-shadow: 0 0 0 8px hsl(var(--btn-blue) / 0), 0 4px 14px hsl(var(--btn-blue) / 0.3); }
    }
    .uw-btn-primary:hover {
      background: hsl(var(--btn-blue-hover));
      border-color: hsl(var(--btn-blue-hover));
      box-shadow: 0 8px 24px hsl(var(--btn-blue) / 0.55);
      animation-play-state: paused;
      transform: translateY(-2px);
    }
    .uw-btn-ghost {
      background: transparent;
      color: #0e0f1a;
      border: 1px solid #d8d8df;
    }
    .uw-btn-ghost:hover {
      border-color: hsl(var(--primary));
      color: hsl(var(--primary));
      background: hsl(var(--primary) / 0.06);
    }
    @media (max-width: 1024px) {
      .uw-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .uw-grid { grid-template-columns: 1fr; }
      .uw-card-img { height: 260px; }
    }

    /* Collapsible variant — show only the first 4 cards until toggled open */
    .uw-grid--collapsible > .uw-card:nth-child(n+5) { display: none; }
    .uw-grid--collapsible.is-expanded > .uw-card:nth-child(n+5) { display: flex; }
    .uw-see-more-wrap {
      display: flex;
      justify-content: center;
      margin-top: 2rem;
    }
    .uw-see-more {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      font-family: var(--font-display);
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #ffffff;
      background: hsl(var(--btn-blue));
      border: 1px solid hsl(var(--btn-blue));
      border-radius: 999px;
      cursor: pointer;
      transition: background .25s, transform .2s, box-shadow .25s;
      box-shadow: 0 4px 14px hsl(var(--btn-blue) / 0.3);
    }
    .uw-see-more:hover {
      background: hsl(var(--btn-blue-hover));
      transform: translateY(-2px);
      box-shadow: 0 10px 24px hsl(var(--btn-blue) / 0.4);
    }
    .uw-see-more svg {
      width: 14px;
      height: 14px;
      transition: transform .3s ease;
    }
    .uw-see-more.is-open svg { transform: rotate(180deg); }

    /* ===== SPECIALTIES — "What I Do" service grid (all skill pages) ===== */
    .specialties-section {
      background: #000;
      position: relative;
      padding-top: 6rem;
      padding-bottom: 6rem;
    }
    .specialties-section::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 40% at 20% 0%, hsl(var(--primary) / 0.10), transparent 60%),
        radial-gradient(ellipse 50% 35% at 85% 100%, hsl(var(--primary) / 0.08), transparent 60%);
      pointer-events: none;
    }
    .specialties-section > .container { position: relative; z-index: 1; }
    .specialties-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .specialty-card {
      position: relative;
      background: hsl(var(--card));
      border: 1px solid hsl(var(--border));
      border-radius: 1rem;
      padding: 2rem 1.75rem;
      transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .35s, box-shadow .35s, background .35s;
      overflow: hidden;
    }
    .specialty-card::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent);
      opacity: 0;
      transition: opacity .35s;
    }
    .specialty-card:hover {
      transform: translateY(-6px);
      border-color: hsl(var(--primary) / 0.55);
      box-shadow: 0 20px 44px rgba(0,0,0,0.45), 0 0 0 1px hsl(var(--primary) / 0.20);
    }
    .specialty-card:hover::after { opacity: 1; }
    .specialty-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 0.7rem;
      background: hsl(var(--primary) / 0.14);
      color: hsl(var(--primary));
      margin-bottom: 1.5rem;
      transition: background .35s, transform .35s, box-shadow .35s;
      animation: specialtyIconFloat 3.6s ease-in-out infinite;
    }
    @keyframes specialtyIconFloat {
      0%, 100% {
        transform: translateY(0);
        box-shadow: 0 4px 12px hsl(var(--primary) / 0.10);
      }
      50% {
        transform: translateY(-5px);
        box-shadow: 0 10px 24px hsl(var(--primary) / 0.35);
      }
    }
    .specialty-card:nth-child(2) .specialty-icon { animation-delay: 0.3s; }
    .specialty-card:nth-child(3) .specialty-icon { animation-delay: 0.6s; }
    .specialty-card:nth-child(4) .specialty-icon { animation-delay: 0.9s; }
    .specialty-card:nth-child(5) .specialty-icon { animation-delay: 1.2s; }
    .specialty-card:nth-child(6) .specialty-icon { animation-delay: 1.5s; }
    .specialty-card:hover .specialty-icon {
      animation-play-state: paused;
      background: hsl(var(--primary) / 0.22);
      transform: scale(1.08) translateY(-3px);
      box-shadow: 0 12px 32px hsl(var(--primary) / 0.45);
    }
    @media (prefers-reduced-motion: reduce) {
      .specialty-icon { animation: none; }
    }
    .specialty-icon svg { width: 22px; height: 22px; }
    .specialty-card h3 {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 0.7rem;
      color: hsl(var(--foreground));
    }
    .specialty-card p {
      color: hsl(var(--muted-foreground));
      font-size: 0.9rem;
      line-height: 1.6;
      margin: 0;
    }
    @media (max-width: 1024px) {
      .specialties-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .specialties-grid { grid-template-columns: 1fr; gap: 1rem; }
      .specialty-card { padding: 1.5rem 1.25rem; }
      .specialties-section { padding-top: 4rem; padding-bottom: 4rem; }
    }
    html.light .specialties-section { background: linear-gradient(180deg, #fff 0%, hsl(220 20% 97%) 100%); }
    html.light .specialty-card {
      background: #fff;
      border-color: rgba(15,23,42,0.08);
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    html.light .specialty-card:hover {
      box-shadow: 0 18px 40px rgba(0,0,0,0.10), 0 0 0 1px hsl(220 100% 50% / 0.30);
    }
    html.light .specialty-card h3 { color: #111; }
    html.light .specialty-card p { color: #555; }
    html.light .specialties-section .section-title { color: #111; }
    html.light .specialties-section .section-subtitle { color: #444; }
    html.light .specialties-section .gradient-text { color: hsl(220 100% 40%); }

    /* ===== PORTFOLIO CTA — bottom of every skill page ===== */
    .portfolio-cta {
      background: #000;
      padding: 2rem 0 6rem;
    }
    .portfolio-cta-card {
      position: relative;
      max-width: 56rem;
      margin: 0 auto;
      padding: 3rem 2rem;
      text-align: center;
      background:
        radial-gradient(ellipse 80% 60% at center, hsl(var(--primary) / 0.14) 0%, transparent 70%),
        linear-gradient(135deg, hsl(var(--primary) / 0.06) 0%, hsl(268 82% 63% / 0.06) 100%);
      border: 1px solid hsl(var(--primary) / 0.30);
      border-radius: 1.25rem;
      overflow: hidden;
    }
    .portfolio-cta-card::before {
      content: "";
      position: absolute;
      top: -2px; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent);
      opacity: 0.7;
    }
    .portfolio-cta-card h2 {
      font-family: var(--font-display);
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 0.85rem;
      color: hsl(var(--foreground));
    }
    .portfolio-cta-card p {
      color: hsl(var(--muted-foreground));
      font-size: 1.02rem;
      max-width: 36rem;
      margin: 0 auto 2rem;
      line-height: 1.6;
    }
    .portfolio-cta-actions {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
    }
    .portfolio-cta-actions .btn { display: inline-flex; align-items: center; gap: 0.5rem; }
    @media (max-width: 640px) {
      .portfolio-cta { padding: 1rem 0 4rem; }
      .portfolio-cta-card { padding: 2.25rem 1.25rem; border-radius: 1rem; }
      .portfolio-cta-actions { flex-direction: column; gap: 0.75rem; }
      .portfolio-cta-actions .btn { width: 100%; justify-content: center; }
    }
    html.light .portfolio-cta {
      background: linear-gradient(180deg, hsl(220 20% 97%) 0%, #fff 100%);
    }
    html.light .portfolio-cta-card {
      background:
        radial-gradient(ellipse 80% 60% at center, hsl(220 100% 50% / 0.08) 0%, transparent 70%),
        #fff;
      border-color: hsl(220 100% 50% / 0.20);
      box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    }
    html.light .portfolio-cta-card h2 { color: #111; }
    html.light .portfolio-cta-card p { color: #555; }

    /* ===== INSTAGRAM POSTS ROW — social media page ===== */
    .ig-posts-section { padding: 4rem 0 2rem; }
    .ig-posts-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px;
      max-width: 1100px;
      margin: 0 auto;
      border-radius: 1rem;
      overflow: hidden;
      box-shadow: 0 18px 50px rgba(0,0,0,0.4);
      background: hsl(var(--background));
    }
    @media (max-width: 640px) {
      .ig-posts-row { grid-template-columns: 1fr; }
    }
    .ig-post {
      display: block;
      position: relative;
      aspect-ratio: 4/5;
      background: #000;
      overflow: hidden;
    }
    .ig-post img,
    .ig-post video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
      pointer-events: none;
    }
    .ig-post:hover img,
    .ig-post:hover video { transform: scale(1.04); }

    .ig-post-play {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      pointer-events: none;
      transition: background 0.2s ease, transform 0.25s ease, border-color 0.2s ease;
    }
    .ig-post-play svg { margin-left: 3px; }
    .ig-post--video:hover .ig-post-play {
      background: hsl(var(--btn-blue));
      border-color: hsl(var(--btn-blue));
      transform: translate(-50%, -50%) scale(1.08);
    }
    html.light .ig-posts-row { box-shadow: 0 8px 24px rgba(0,0,0,0.10); }

    /* Square (1:1) variant — used for the Sample Content row above the
       Featured Work section on the social media page. */
    .sample-content-section { padding: 4rem 0 2rem; }
    .ig-posts-row--square .ig-post { aspect-ratio: 1 / 1; }

    /* ===== NAV: Hire-Me dropdown (injected by /search.js) ===== */
    .nav-hire { position: relative; }
    .nav-hire-trigger {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-size: 0.875rem; font-weight: 500;
      color: hsl(var(--foreground) / 0.7);
      background: none; border: none; padding: 0;
      line-height: 1; cursor: pointer;
      white-space: nowrap; font-family: inherit;
      outline: none; -webkit-tap-highlight-color: transparent;
      transition: color 0.3s;
    }
    .nav-hire-trigger:hover,
    .nav-hire.open .nav-hire-trigger {
      background: none;
      color: hsl(var(--primary));
    }
    .nav-hire-trigger:focus,
    .nav-hire-trigger:focus-visible,
    .nav-hire-trigger:active { outline: none; box-shadow: none; }
    .nav-hire-trigger svg { transition: transform 0.25s ease; }
    .nav-hire.open .nav-hire-trigger svg { transform: rotate(180deg); }
    .nav-hire-dot { display: none; }

    .nav-hire-menu {
      position: absolute;
      top: calc(100% + 0.5rem);
      right: 0;
      min-width: 240px;
      background: hsl(var(--card) / 0.97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid hsl(var(--border));
      border-radius: 0.75rem;
      padding: 0.45rem;
      box-shadow: 0 16px 40px hsl(var(--background) / 0.7);
      display: flex;
      flex-direction: column;
      gap: 2px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
      z-index: 110;
    }
    .nav-hire.open .nav-hire-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    .nav-hire-menu a {
      display: block;
      padding: 0.55rem 0.8rem;
      border-radius: 0.45rem;
      text-decoration: none;
      color: hsl(var(--foreground) / 0.88);
      transition: background 0.15s ease, color 0.15s ease;
    }
    .nav-hire-menu a:hover {
      background: hsl(var(--primary) / 0.14);
      color: hsl(var(--primary));
    }
    .nav-hire-title { font-weight: 600; font-size: 0.875rem; }
    .nav-hire-sub {
      font-size: 0.7rem;
      color: hsl(var(--muted-foreground));
      margin-top: 0.15rem;
    }

    @media (max-width: 768px) {
      .nav-hire { display: none; }
    }

    /* Navbar Contact button — strip the .btn rotating stroke, match Hire Me
       dimensions exactly, and apply the same blue → purple hover. */
    .nav-right a.btn[href="/contact/"] {
      font-size: 0.8rem !important;
      padding: 0.4rem 1rem !important;
      line-height: 1 !important;
      transition: background 0.2s ease, border-color 0.2s ease !important;
    }
    .nav-right a.btn[href="/contact/"]::before { display: none; }
    .nav-right a.btn[href="/contact/"]:hover {
      background: hsl(var(--btn-blue)) !important;
      border-color: hsl(var(--btn-blue)) !important;
    }
    .nav-hire-trigger { line-height: 1; }

    html.light .nav-hire-trigger { color: #333; background: none; }
    html.light .nav-hire-trigger:hover,
    html.light .nav-hire.open .nav-hire-trigger {
      color: hsl(220 100% 40%);
      background: none;
    }
    html.light .nav-hire-menu {
      background: rgba(255,255,255,0.99);
      border-color: hsl(220 18% 88%);
      box-shadow: 0 16px 40px rgba(0,0,0,0.12);
    }
    html.light .nav-hire-menu a { color: #333; }
    html.light .nav-hire-menu a:hover {
      background: hsl(220 100% 50% / 0.10);
      color: hsl(220 100% 40%);
    }

    /* ===== PLATFORM — skill-uiux page (own product, not white-label) ===== */
    .platform-section { padding: 4rem 0 2rem; }
    .platform-card {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 3rem;
      align-items: center;
      max-width: 1100px;
      margin: 0 auto;
      padding: 2.5rem;
      background: hsl(var(--card));
      border: 1px solid hsl(var(--primary) / 0.30);
      border-radius: 1.25rem;
      position: relative;
      overflow: hidden;
    }
    .platform-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 40% at 100% 0%, hsl(var(--primary) / 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 0% 100%, hsl(var(--neon-purple) / 0.08) 0%, transparent 60%);
      pointer-events: none;
    }
    .platform-card-img {
      position: relative;
      border-radius: 0.75rem;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    }
    .platform-card-img img {
      width: 100%;
      height: auto;
      display: block;
    }
    .platform-card-info {
      position: relative;
      z-index: 1;
    }
    .platform-tag {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: hsl(var(--primary));
      background: hsl(var(--primary) / 0.10);
      border: 1px solid hsl(var(--primary) / 0.35);
      border-radius: 999px;
      padding: 0.4rem 0.9rem;
      margin-bottom: 1rem;
    }
    .platform-card-info h3 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 2.5vw, 2.1rem);
      font-weight: 700;
      margin-bottom: 1rem;
      line-height: 1.2;
      color: hsl(var(--foreground));
    }
    .platform-card-info p {
      color: hsl(var(--muted-foreground));
      line-height: 1.65;
      font-size: 0.95rem;
      margin-bottom: 1.5rem;
    }
    .platform-card-info .uw-btn { display: inline-flex; align-items: center; gap: 0.45rem; }
    @media (max-width: 768px) {
      .platform-card {
        grid-template-columns: 1fr;
        padding: 1.75rem;
        gap: 1.75rem;
      }
    }
    html.light .platform-card {
      background: #fff;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    }
    html.light .platform-card-info h3 { color: #111; }
    html.light .platform-card-info p { color: #555; }

    /* ===== APP & UI DESIGN — skill-uiux page ===== */
    .app-design-section { padding: 4rem 0 2rem; }
    .app-design-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      align-items: center;
      max-width: 1100px;
      margin: 0 auto;
      padding: 3rem;
      background: hsl(var(--card));
      border: 1px solid hsl(var(--border));
      border-radius: 1.25rem;
    }
    .app-design-info { padding: 0; }
    .app-design-tag {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: hsl(var(--primary));
      background: hsl(var(--primary) / 0.10);
      border: 1px solid hsl(var(--primary) / 0.35);
      border-radius: 999px;
      padding: 0.4rem 0.9rem;
      margin-bottom: 1rem;
    }
    .app-design-info h3 {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 2.5vw, 2rem);
      font-weight: 700;
      margin-bottom: 1rem;
      line-height: 1.2;
      color: hsl(var(--foreground));
    }
    .app-design-desc {
      color: hsl(var(--muted-foreground));
      line-height: 1.65;
      font-size: 0.95rem;
      margin-bottom: 1.75rem;
    }
    .app-design-meta {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }
    .app-design-meta-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.85rem;
      border-bottom: 1px solid hsl(var(--border));
    }
    .app-design-meta-item:last-child { border-bottom: none; padding-bottom: 0; }
    .app-design-meta-label {
      font-size: 0.7rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: hsl(var(--muted-foreground));
      font-weight: 700;
    }
    .app-design-meta-value {
      font-family: var(--font-display);
      font-weight: 600;
      color: hsl(var(--foreground));
      font-size: 0.95rem;
    }

    .app-design-carousel {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 60px;
    }

    /* POS terminal mockup — light-gray plastic body, receipt-printer slit
       at the top, three Android nav-button dots at the bottom. */
    .phone-frame {
      position: relative;
      width: 260px;
      height: 530px;
      background: linear-gradient(180deg, #c4c4c6 0%, #9c9c9e 100%);
      border-radius: 12px;
      padding: 50px 8px 62px;
      box-shadow:
        0 25px 50px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.6),
        inset 0 -1px 0 rgba(0,0,0,0.15);
      flex-shrink: 0;
    }
    /* Receipt-printer slit at the top */
    .phone-frame::before {
      content: '';
      position: absolute;
      top: 18px; left: 50%;
      transform: translateX(-50%);
      width: 86px; height: 5px;
      background: #2a2a2a;
      border-radius: 1.5px;
      box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.7),
        0 0 0 0.5px rgba(0,0,0,0.25);
    }
    /* Three Android-style nav dots at the bottom (back, home, recent) */
    .phone-frame::after {
      content: '';
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      width: 12px; height: 12px;
      border-radius: 50%;
      background: #555;
      box-shadow:
        -34px 0 0 0 #555,
         34px 0 0 0 #555;
    }
    .phone-frame-viewport {
      width: 244px;
      height: 418px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
    }
    .phone-frame-track {
      display: flex;
      height: 100%;
      transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
      will-change: transform;
    }
    .phone-slide {
      flex: 0 0 244px;
      width: 244px;
      height: 100%;
      cursor: zoom-in;
      user-select: none;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
      background: #fff;
    }
    .phone-slide::-webkit-scrollbar { display: none; }
    .phone-scroll-hint {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.55);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .phone-scroll-hint.show {
      opacity: 1;
      animation: phoneScrollBounce 1.6s ease-in-out infinite;
    }
    @keyframes phoneScrollBounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%      { transform: translateX(-50%) translateY(6px); }
    }
    .phone-slide img {
      width: 244px;
      max-width: 244px;
      height: auto;
      display: block;
      pointer-events: none;
    }

    .app-nav {
      position: absolute;
      top: calc(50% - 40px);
      transform: translateY(-50%);
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(0,0,0,0.65);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.18);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 4;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }
    .app-nav:hover {
      background: hsl(var(--btn-blue));
      border-color: hsl(var(--btn-blue));
      transform: translateY(-50%) scale(1.06);
    }
    .app-nav--prev { left: 0; }
    .app-nav--next { right: 0; }

    .app-screen-label {
      margin-top: 1.5rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: hsl(var(--foreground));
      letter-spacing: 0.04em;
      text-align: center;
    }
    .app-dots {
      display: flex;
      gap: 0.4rem;
      justify-content: center;
      margin-top: 0.75rem;
    }
    .app-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: hsl(var(--muted-foreground) / 0.4);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: all 0.25s ease;
    }
    .app-dot.active {
      background: hsl(var(--btn-blue));
      width: 22px;
      border-radius: 999px;
    }
    .app-dot:hover { background: hsl(var(--btn-blue) / 0.7); }

    @media (max-width: 880px) {
      .app-design-card {
        grid-template-columns: 1fr;
        padding: 1.75rem;
        gap: 2rem;
      }
      .app-design-carousel { padding: 0 50px; }
    }

    html.light .app-design-card { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
    html.light .app-design-info h3 { color: #111; }
    html.light .app-design-desc { color: #555; }
    html.light .app-design-meta-value { color: #111; }
    html.light .app-design-meta-label { color: #666; }

    /* ===== LIGHTBOX (photography & gallery pages) ===== */
    .fw-card .fw-img { cursor: zoom-in; }
    .lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.94);
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      cursor: zoom-out;
      opacity: 0;
      transition: opacity 0.25s ease;
    }
    .lightbox.open { display: flex; opacity: 1; }
    .lightbox-content {
      position: relative;
      max-width: 92vw;
      max-height: 86vh;
      cursor: default;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .lightbox-img,
    .lightbox-video {
      display: block;
      max-width: 92vw;
      max-height: 80vh;
      width: auto;
      height: auto;
      border-radius: 0.5rem;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
      background: #111;
    }
    .lightbox-caption {
      margin-top: 1rem;
      color: rgba(255, 255, 255, 0.85);
      font-size: 0.95rem;
      font-weight: 500;
      text-align: center;
      max-width: 90vw;
      padding: 0 1rem;
    }
    .lightbox-close,
    .lightbox-prev,
    .lightbox-next {
      position: absolute;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: #fff;
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1001;
      backdrop-filter: blur(8px);
      transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    }
    .lightbox-close { top: 1.5rem; right: 1.5rem; }
    .lightbox-prev  { left: 1.5rem;  top: 50%; transform: translateY(-50%); }
    .lightbox-next  { right: 1.5rem; top: 50%; transform: translateY(-50%); }
    .lightbox-close:hover {
      background: hsl(var(--btn-blue));
      border-color: hsl(var(--btn-blue));
    }
    .lightbox-prev:hover,
    .lightbox-next:hover {
      background: hsl(var(--btn-blue));
      border-color: hsl(var(--btn-blue));
      transform: translateY(-50%) scale(1.06);
    }
    .lightbox-close svg,
    .lightbox-prev svg,
    .lightbox-next svg { width: 18px; height: 18px; }
    @media (max-width: 640px) {
      .lightbox-close { top: 0.75rem; right: 0.75rem; width: 2.5rem; height: 2.5rem; }
      .lightbox-prev  { left: 0.5rem;  width: 2.5rem; height: 2.5rem; }
      .lightbox-next  { right: 0.5rem; width: 2.5rem; height: 2.5rem; }
    }
    body.lightbox-open { overflow: hidden; }

    /* ===== PORTFOLIO GRID (3-col equal) ===== */
    .portfolio-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;
      max-width: 1100px;
      margin: 0 auto;
    }
    /* Override bento spans + tilt entrance from .fw-grid for these cards */
    .portfolio-grid .fw-card {
      grid-column: auto !important;
      grid-row: auto !important;
      transform: none !important;
      opacity: 1 !important;
      aspect-ratio: 4 / 5;
      text-decoration: none;
      cursor: zoom-in;
      width: calc(25% - 0.75rem);
      flex-shrink: 0;
    }
    /* Hide all card overlays so the creative's own typography is fully
       readable. Image-only — no scrim, no title block, no big number. */
    .portfolio-grid .fw-scrim,
    .portfolio-grid .fw-content,
    .portfolio-grid .fw-num { display: none !important; }

    /* Collapse to first 8 cards (2 rows of 4) until "See more" is clicked. */
    .portfolio-grid:not(.expanded) .fw-card:nth-child(n+9) { display: none; }
    .portfolio-see-more {
      display: block;
      margin: 2.5rem auto 0;
      padding: 0.7rem 1.75rem;
      background: hsl(var(--btn-blue));
      color: #fff;
      border: 1px solid hsl(var(--btn-blue));
      border-radius: 0.5rem;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 14px hsl(var(--btn-blue) / 0.3);
      animation: portfolioBtnPulse 1.6s ease-in-out infinite;
      transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }
    .portfolio-see-more:hover {
      background: hsl(var(--btn-blue-hover));
      border-color: hsl(var(--btn-blue-hover));
      transform: translateY(-2px);
      box-shadow: 0 8px 24px hsl(var(--btn-blue) / 0.55);
      animation-play-state: paused;
    }
    @keyframes portfolioBtnPulse {
      0%, 100% { box-shadow: 0 0 0 0 hsl(var(--btn-blue) / 0.55), 0 4px 14px hsl(var(--btn-blue) / 0.3); }
      50%      { box-shadow: 0 0 0 8px hsl(var(--btn-blue) / 0), 0 4px 14px hsl(var(--btn-blue) / 0.3); }
    }
    html.light .portfolio-see-more {
      background: hsl(220 100% 45%);
      border-color: hsl(220 100% 45%);
    }
    html.light .portfolio-see-more:hover {
      background: hsl(268 75% 55%);
      border-color: hsl(268 75% 55%);
    }

    /* Play-icon overlay for video cards in Featured Projects */
    .fw-card-play {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 56px; height: 56px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      pointer-events: none;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .fw-card-play svg { margin-left: 3px; }
    .fw-card--video:hover .fw-card-play {
      background: hsl(var(--btn-blue));
      transform: translate(-50%, -50%) scale(1.06);
    }
    @media (max-width: 1024px) {
      .portfolio-grid .fw-card { width: calc(33.333% - 0.667rem); }
    }
    @media (max-width: 720px) {
      .portfolio-grid .fw-card { width: calc(50% - 0.5rem); }
    }
    @media (max-width: 480px) {
      .portfolio-grid .fw-card { width: 100%; }
    }

    /* ============================================================
       SHARED NAV — Minimal Topbar + Full-Screen Overlay Menu
       Loaded across all pages via styles.css.
       Behavior wired up in /nav.js.
       ============================================================ */

    /* Skip link */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0.75rem;
      z-index: 1000;
      padding: 0.625rem 1rem;
      background: hsl(var(--btn-blue));
      color: #fff;
      font-weight: 600;
      font-size: 0.875rem;
      border-radius: 0.5rem;
      transition: top 0.2s ease;
    }
    .skip-link:focus,
    .skip-link:focus-visible { top: 0.75rem; outline: none; }

    /* Top bar — edge-to-edge, transparent, just logo + hamburger */
    .topbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 90;
      display: flex; align-items: center; justify-content: space-between;
      padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 5rem);
      background: transparent;
      pointer-events: none;
    }
    .topbar > * { pointer-events: auto; }
    .topbar .nav-logo { display: flex; align-items: center; gap: 0.75rem; }
    .topbar .nav-logo img { filter: brightness(1.8) saturate(1.15); transition: filter 0.2s; }
    html.light .topbar .nav-logo img { filter: none; }
    .topbar .nav-logo-text {
      font-family: var(--font-display);
      font-size: 1.125rem; font-weight: 700;
    }

    /* Hamburger trigger */
    .menu-toggle {
      position: relative;
      width: 44px; height: 44px;
      background: transparent;
      border: 1px solid hsl(var(--foreground) / 0.18);
      border-radius: 0.5rem; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    .menu-toggle:hover {
      border-color: hsl(var(--btn-blue) / 0.7);
      background: hsl(var(--btn-blue) / 0.08);
    }
    .menu-toggle-bar {
      position: absolute; left: 10px; right: 10px;
      height: 2.5px;
      background: hsl(var(--foreground));
      border-radius: 2px;
      transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
    }
    .menu-toggle-bar:nth-child(1) { top: 13px; }
    .menu-toggle-bar:nth-child(2) { top: 21px; }
    .menu-toggle-bar:nth-child(3) { top: 29px; }
    /* X-animate: top + bottom cross, middle fades */
    body.overlay-open .menu-toggle-bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
    body.overlay-open .menu-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
    body.overlay-open .menu-toggle-bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

    /* When topbar is scrolled over a light/white-bg section, invert
       its colors so logo + hamburger stay visible. Toggled by nav.js
       when any [data-light-bg] element passes under the topbar. */
    .topbar--on-light .nav-logo-text { color: #0a0a0a; }
    .topbar--on-light .nav-logo img { filter: none !important; }
    .topbar--on-light .menu-toggle {
      border-color: rgba(0, 0, 0, 0.18);
    }
    .topbar--on-light .menu-toggle:hover {
      border-color: hsl(var(--btn-blue) / 0.7);
      background: hsl(var(--btn-blue) / 0.08);
    }
    .topbar--on-light .menu-toggle-bar { background: #0a0a0a; }
    /* Smooth color transition between states */
    .topbar .nav-logo-text,
    .topbar .menu-toggle,
    .topbar .menu-toggle-bar {
      transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
    }

    /* Overlay menu */
    .overlay-menu {
      position: fixed; inset: 0; z-index: 200;
      background: hsl(var(--background));
      background-image:
        radial-gradient(circle at 80% 10%, hsl(var(--btn-blue) / 0.10) 0%, transparent 45%),
        radial-gradient(circle at 10% 90%, hsl(var(--foreground) / 0.04) 0%, transparent 50%);
      display: flex; flex-direction: column;
      padding: clamp(5rem, 9vw, 7rem) clamp(1.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.45s cubic-bezier(.16,1,.3,1), visibility 0s 0.45s;
    }
    body.overlay-open .overlay-menu {
      opacity: 1; visibility: visible; pointer-events: auto;
      transition: opacity 0.45s cubic-bezier(.16,1,.3,1), visibility 0s;
    }
    .overlay-close {
      position: absolute;
      top: clamp(1.25rem, 4vw, 2.5rem);
      right: clamp(1.5rem, 5vw, 5rem);
      width: 44px; height: 44px;
      background: transparent;
      color: hsl(var(--foreground));
      border: 1px solid hsl(var(--foreground) / 0.18);
      border-radius: 0.5rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    .overlay-close:hover {
      border-color: hsl(var(--btn-blue));
      color: hsl(var(--btn-blue));
      transform: rotate(90deg);
    }
    .overlay-inner {
      flex: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: center;
      max-width: 1400px; width: 100%; margin: 0 auto;
    }
    /* Left ID slot — same static ID badge on every page so the overlay is uniform */
    .overlay-id {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 540px;
      opacity: 0;
      transform: translateY(-30px);
      transition: opacity 0.6s cubic-bezier(.16,1,.3,1) 0.18s,
                  transform 0.6s cubic-bezier(.16,1,.3,1) 0.18s;
    }
    body.overlay-open .overlay-id { opacity: 1; transform: translateY(0); }
    /* Blue lanyard strip + buckle hanging above the card */
    .overlay-id-cord {
      width: 30px;
      height: 90px;
      background:
        linear-gradient(180deg, hsl(218 90% 28%) 0%, hsl(218 92% 45%) 50%, hsl(218 92% 40%) 100%);
      border-left: 2px solid hsl(218 90% 22%);
      border-right: 2px solid hsl(218 90% 22%);
      box-shadow: 0 4px 10px rgba(0,0,0,0.45);
    }
    .overlay-id-buckle {
      width: 44px;
      height: 26px;
      background: linear-gradient(180deg, #2a2c33 0%, #0a0b10 100%);
      border-radius: 4px;
      position: relative;
      margin-top: -2px;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 4px 12px rgba(0,0,0,0.6);
    }
    .overlay-id-buckle::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -10px;
      transform: translateX(-50%);
      width: 16px;
      height: 12px;
      background: linear-gradient(180deg, #1e2027 0%, #0a0b10 100%);
      border-radius: 0 0 4px 4px;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 2px 4px rgba(0,0,0,0.5);
    }
    /* The static ID card itself */
    .overlay-card {
      position: relative;
      width: 260px;
      height: 400px;
      margin-top: 14px;
      background:
        radial-gradient(ellipse at top, rgba(56,110,255,0.10) 0%, transparent 60%),
        linear-gradient(165deg, #1a1d27 0%, #0a0b10 60%, #050609 100%);
      border-radius: 16px;
      padding: 32px 20px 0;
      box-sizing: border-box;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.08) inset,
        0 1px 0 rgba(255,255,255,0.20) inset,
        0 -2px 0 rgba(0,0,0,0.4) inset,
        0 8px 18px rgba(0,0,0,0.55),
        0 28px 56px rgba(0,0,0,0.65);
      overflow: hidden;
    }
    .overlay-card-slot {
      position: absolute;
      top: 10px; left: 50%;
      transform: translateX(-50%);
      width: 44px; height: 4px;
      background: #000;
      border-radius: 99px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.9), 0 1px 0 rgba(255,255,255,0.12);
    }
    .overlay-card-header {
      text-align: center;
      font-family: var(--font-display);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.3em;
      color: #f3f4f7;
      text-transform: uppercase;
      margin-top: 4px;
    }
    .overlay-card-photo {
      width: 168px;
      height: 168px;
      margin: 18px auto 0;
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(135deg, #20232c 0%, #07080c 100%);
      border: 2px solid rgba(255,255,255,0.28);
      box-shadow:
        0 8px 18px rgba(0,0,0,0.6),
        0 0 0 1px rgba(0,0,0,0.4),
        0 0 22px hsl(220 100% 50% / 0.22);
    }
    .overlay-card-photo img {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: 50% 18%;
      display: block;
    }
    .overlay-card-name {
      text-align: center;
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 1.05rem;
      color: #f3f4f7;
      margin-top: 18px;
      letter-spacing: 0.02em;
      line-height: 1.2;
      text-shadow: 0 1px 0 rgba(0,0,0,0.6);
    }
    .overlay-card-role {
      text-align: center;
      font-family: var(--font-display);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      color: hsl(220 18% 55%);
      margin-top: 6px;
      text-transform: uppercase;
    }
    .overlay-card-bottom {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 36px;
      background: linear-gradient(180deg, hsl(220 100% 58%) 0%, hsl(220 100% 45%) 100%);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 0.74rem;
      font-weight: 800;
      letter-spacing: 0.34em;
      color: #fff;
      text-transform: uppercase;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 -1px 0 rgba(0,0,0,0.3) inset;
    }
    /* Right column wraps the nav links + skills/connect grid */
    .overlay-right {
      display: flex;
      flex-direction: column;
      gap: clamp(2rem, 4vw, 3.5rem);
      justify-content: center;
      align-self: center;
    }
    .overlay-primary {
      list-style: none; padding: 0; margin: 0;
      display: flex; flex-direction: row; flex-wrap: wrap;
      align-items: baseline;
      gap: 0.4rem clamp(1.25rem, 2.4vw, 2.25rem);
    }
    .overlay-primary li {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s cubic-bezier(.16,1,.3,1), transform 0.5s cubic-bezier(.16,1,.3,1);
    }
    body.overlay-open .overlay-primary li {
      opacity: 1; transform: translateY(0);
    }
    body.overlay-open .overlay-primary li:nth-child(1) { transition-delay: 0.08s; }
    body.overlay-open .overlay-primary li:nth-child(2) { transition-delay: 0.14s; }
    body.overlay-open .overlay-primary li:nth-child(3) { transition-delay: 0.20s; }
    body.overlay-open .overlay-primary li:nth-child(4) { transition-delay: 0.26s; }
    body.overlay-open .overlay-primary li:nth-child(5) { transition-delay: 0.32s; }
    .overlay-link {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 2.4vw, 2.1rem);
      font-weight: 700; letter-spacing: -0.02em;
      line-height: 1.2;
      color: hsl(var(--foreground) / 0.85);
      transition: color 0.25s ease, transform 0.25s ease;
      display: inline-block; white-space: nowrap;
    }
    .overlay-link:hover { color: hsl(var(--btn-blue)); transform: translateY(-3px); }
    .overlay-link.active { color: hsl(var(--btn-blue)); }
    /* Skills + Connect grid sits below the nav links in the right column */
    .overlay-secondary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 4vw, 3rem);
    }
    .overlay-col {
      display: flex; flex-direction: column; gap: 0.65rem;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s cubic-bezier(.16,1,.3,1) 0.32s,
                  transform 0.5s cubic-bezier(.16,1,.3,1) 0.32s;
    }
    body.overlay-open .overlay-col { opacity: 1; transform: translateY(0); }
    body.overlay-open .overlay-col:nth-child(2) { transition-delay: 0.40s; }
    .overlay-col-title {
      font-family: var(--font-display);
      font-size: 0.72rem; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: hsl(var(--foreground) / 0.4);
      margin-bottom: 0.7rem;
      padding-bottom: 0.7rem;
      border-bottom: 1px solid hsl(var(--foreground) / 0.08);
    }
    .overlay-col a {
      font-size: 1rem; font-weight: 500;
      color: hsl(var(--foreground) / 0.78);
      transition: color 0.2s ease, transform 0.2s ease;
    }
    .overlay-col a:hover { color: hsl(var(--btn-blue)); transform: translateX(4px); }
    .overlay-footer {
      max-width: 1400px; width: 100%; margin: 0 auto;
      padding-top: 1.5rem;
      border-top: 1px solid hsl(var(--foreground) / 0.06);
      display: flex; align-items: center; justify-content: space-between;
      gap: 2rem;
      opacity: 0;
      transition: opacity 0.5s cubic-bezier(.16,1,.3,1) 0.5s;
    }
    body.overlay-open .overlay-footer { opacity: 1; }
    .overlay-location {
      display: flex; align-items: baseline; gap: 0.75rem;
      font-size: 0.8rem; color: hsl(var(--foreground) / 0.55);
    }
    .overlay-location h4 {
      font-family: var(--font-display);
      font-size: 0.8rem; font-weight: 600;
      color: hsl(var(--foreground) / 0.85);
      margin: 0;
    }
    .overlay-location-sep { color: hsl(var(--foreground) / 0.25); }
    .overlay-copyright {
      font-size: 0.75rem;
      color: hsl(var(--foreground) / 0.35);
      margin: 0;
    }
    .overlay-footer-right {
      display: flex; align-items: center; gap: 1.25rem;
    }
    .overlay-footer-right .theme-toggle { width: 34px; height: 34px; }
    body.overlay-open { overflow: hidden; }
    @media (max-width: 900px) {
      .overlay-inner { grid-template-columns: 1fr; gap: 2.5rem; }
      .overlay-id { display: none; }
      .overlay-secondary { grid-template-columns: 1fr; gap: 2rem; }
      .overlay-footer { flex-direction: column; align-items: flex-start; gap: 1rem; }
    }