body {
      font-family: 'Big Shoulders Display', sans-serif;
      color: #fff;
      overflow-x: hidden;
      background-color: #000111;
    }
    
    .orbitron {
      font-family: 'Orbitron', sans-serif;
    }
    
    .glass-card {
      background: rgba(0, 72, 215, 0.3);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 64, 255, 0.1);
    }
    
    .progress-bar {
      position: relative;
      overflow: hidden;
    }

    .progress-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 64, 255, 0.2),
        transparent
      );
      animation: shine 2s infinite;
    }
    
    /* Enhanced slanted edge button */
    .slanted-btn {
      position: relative;
      z-index: 1;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    
    .slanted-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -10px;
      width: calc(100% + 20px);
      height: 100%;
      background: inherit;
      z-index: -1;
      transform: skewX(-10deg);
      transition: all 0.3s ease;
    }
    
    .slanted-btn:hover::before {
      transform: skewX(-15deg) scale(1.05);
    }
    
    .slanted-btn.primary {
      background: transparent;
      color: white;
    }
    
    .slanted-btn.primary::before {
      background: #0040FF;
    }
    
    .slanted-btn.primary:hover::before {
      background: #0030CC;
    }
    
    .slanted-btn.secondary {
      background: transparent;
      color: white;
    }
    
    .slanted-btn.secondary::before {
      background: transparent;
      border: 1px solid #0040FF;
    }
    
    .slanted-btn.secondary:hover::before {
      background: rgba(0, 64, 255, 0.1);
    }
    
    .section-transition {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .section-transition.active {
      opacity: 1;
      transform: translateY(0);
    }
    
    .pattern-grid {
      background-image: 
        linear-gradient(rgba(0, 64, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 64, 255, 0.05) 1px, transparent 1px);
      background-size: 20px 20px;
    }
    
    .floating {
      animation: float 6s ease-in-out infinite;
    }
    
    .social-icons {
      position: fixed;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 15px;
      z-index: 50;
    }
    
    .social-icons a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(0, 10, 30, 0.3);
      backdrop-filter: blur(5px);
      border: 1px solid rgba(0, 64, 255, 0.2);
      color: white;
      transition: all 0.3s ease;
    }
    
    .social-icons a:hover {
      background: rgba(0, 64, 255, 0.3);
      transform: translateY(-3px);
    }
    
    .future-text {
      font-size: 5rem;
      line-height: 1;
      letter-spacing: 0.1em;
      font-weight: 800;
      text-transform: uppercase;
    }
    
    .future-text span {
      display: inline-block;
      position: relative;
    }
    
    .future-text span::after {
      content: '';
      position: absolute;
      height: 5px;
      width: 100%;
      background: #0040FF;
      bottom: 15px;
      left: 0;
    }
    
    .glitch {
      position: relative;
    }
    
    .glitch::before,
    .glitch::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .glitch::before {
      left: 2px;
      text-shadow: -1px 0 #0040FF;
      clip: rect(44px, 450px, 56px, 0);
      animation: glitch-anim 5s infinite linear alternate-reverse;
    }
    
    .glitch::after {
      left: -2px;
      text-shadow: -1px 0 #FF00FF;
      clip: rect(44px, 450px, 56px, 0);
      animation: glitch-anim2 5s infinite linear alternate-reverse;
    }
    
    /* Hero background animation layers */
    .hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    .hero-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      opacity: 0.1;
    }
    
    .hero-layer-1 {
      background: radial-gradient(circle at 20% 30%, rgba(0, 64, 255, 0.4) 0%, transparent 50%);
      animation: pulse-layer 15s ease-in-out infinite alternate;
    }
    
    .hero-layer-2 {
      background: linear-gradient(45deg, transparent 0%, rgba(0, 64, 255, 0.2) 50%, transparent 100%);
      animation: slide-layer 20s linear infinite;
    }
    
    .hero-layer-3 {
      background-image: 
        repeating-linear-gradient(0deg, rgba(0, 64, 255, 0.1) 0px, rgba(0, 64, 255, 0.1) 1px, transparent 1px, transparent 20px),
        repeating-linear-gradient(90deg, rgba(0, 64, 255, 0.1) 0px, rgba(0, 64, 255, 0.1) 1px, transparent 1px, transparent 20px);
      animation: move-grid 30s linear infinite;
    }
    
    .hero-layer-4 {
      background: radial-gradient(circle at 70% 60%, rgba(0, 64, 255, 0.3) 0%, transparent 40%);
      animation: pulse-layer 12s ease-in-out infinite alternate-reverse;
    }
    
    .hero-layer-5 {
      background-image: 
        radial-gradient(circle at 10% 10%, rgba(0, 64, 255, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 30% 70%, rgba(0, 64, 255, 0.1) 0%, transparent 25%),
        radial-gradient(circle at 70% 40%, rgba(0, 64, 255, 0.1) 0%, transparent 30%),
        radial-gradient(circle at 90% 90%, rgba(0, 64, 255, 0.1) 0%, transparent 15%);
      animation: float-particles 25s ease-in-out infinite;
    }
    
    /* Scroll indicator */
    .scroll-indicator {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: bounce 2s infinite;
    }
    
    .scroll-indicator .mouse {
      width: 30px;
      height: 50px;
      border: 2px solid rgba(255, 255, 255, 0.5);
      border-radius: 20px;
      position: relative;
    }
    
    .scroll-indicator .mouse::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 6px;
      height: 6px;
      background: white;
      border-radius: 50%;
      animation: scroll-down 2s infinite;
    }
    
    /* Tool tip */
    .tooltip {
      position: relative;
      display: inline-block;
    }
    
    .tooltip .tooltip-text {
      visibility: hidden;
      width: 120px;
      background-color: rgba(0, 10, 30, 0.8);
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .tooltip .tooltip-text::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: rgba(0, 10, 30, 0.8) transparent transparent transparent;
    }
    
    .tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }
    
    @keyframes glitch-anim {
      0% {
        clip: rect(31px, 9999px, 94px, 0);
      }
      5% {
        clip: rect(70px, 9999px, 71px, 0);
      }
      10% {
        clip: rect(29px, 9999px, 83px, 0);
      }
      15% {
        clip: rect(16px, 9999px, 91px, 0);
      }
      20% {
        clip: rect(2px, 9999px, 23px, 0);
      }
      25% {
        clip: rect(60px, 9999px, 73px, 0);
      }
      30% {
        clip: rect(14px, 9999px, 56px, 0);
      }
      35% {
        clip: rect(89px, 9999px, 37px, 0);
      }
      40% {
        clip: rect(26px, 9999px, 68px, 0);
      }
      45% {
        clip: rect(33px, 9999px, 25px, 0);
      }
      50% {
        clip: rect(89px, 9999px, 23px, 0);
      }
      55% {
        clip: rect(5px, 9999px, 82px, 0);
      }
      60% {
        clip: rect(91px, 9999px, 43px, 0);
      }
      65% {
        clip: rect(10px, 9999px, 75px, 0);
      }
      70% {
        clip: rect(37px, 9999px, 99px, 0);
      }
      75% {
        clip: rect(42px, 9999px, 73px, 0);
      }
      80% {
        clip: rect(28px, 9999px, 25px, 0);
      }
      85% {
        clip: rect(23px, 9999px, 28px, 0);
      }
      90% {
        clip: rect(65px, 9999px, 28px, 0);
      }
      95% {
        clip: rect(67px, 9999px, 16px, 0);
      }
      100% {
        clip: rect(61px, 9999px, 53px, 0);
      }
    }
    
    @keyframes glitch-anim2 {
      0% {
        clip: rect(65px, 9999px, 99px, 0);
      }
      5% {
        clip: rect(79px, 9999px, 43px, 0);
      }
      10% {
        clip: rect(26px, 9999px, 33px, 0);
      }
      15% {
        clip: rect(20px, 9999px, 74px, 0);
      }
      20% {
        clip: rect(71px, 9999px, 92px, 0);
      }
      25% {
        clip: rect(90px, 9999px, 67px, 0);
      }
      30% {
        clip: rect(54px, 9999px, 13px, 0);
      }
      35% {
        clip: rect(99px, 9999px, 92px, 0);
      }
      40% {
        clip: rect(98px, 9999px, 61px, 0);
      }
      45% {
        clip: rect(93px, 9999px, 3px, 0);
      }
      50% {
        clip: rect(1px, 9999px, 71px, 0);
      }
      55% {
        clip: rect(46px, 9999px, 81px, 0);
      }
      60% {
        clip: rect(83px, 9999px, 98px, 0);
      }
      65% {
        clip: rect(9px, 9999px, 62px, 0);
      }
      70% {
        clip: rect(87px, 9999px, 80px, 0);
      }
      75% {
        clip: rect(1px, 9999px, 46px, 0);
      }
      80% {
        clip: rect(42px, 9999px, 11px, 0);
      }
      85% {
        clip: rect(28px, 9999px, 85px, 0);
      }
      90% {
        clip: rect(99px, 9999px, 100px, 0);
      }
      95% {
        clip: rect(67px, 9999px, 34px, 0);
      }
      100% {
        clip: rect(23px, 9999px, 92px, 0);
      }
    }
    
    @keyframes float {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-10px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    
    @keyframes shine {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }
    
    @keyframes pulse-layer {
      0% {
        opacity: 0.05;
        transform: scale(1);
      }
      50% {
        opacity: 0.15;
        transform: scale(1.1);
      }
      100% {
        opacity: 0.05;
        transform: scale(1);
      }
    }
    
    @keyframes slide-layer {
      0% {
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
      }
      100% {
        transform: translateX(50%) translateY(50%) rotate(360deg);
      }
    }
    
    @keyframes move-grid {
      0% {
        transform: translateX(0) translateY(0);
      }
      100% {
        transform: translateX(20px) translateY(20px);
      }
    }
    
    @keyframes float-particles {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
      100% {
        transform: translateY(0);
      }
    }
    
    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
      }
      40% {
        transform: translateY(-10px) translateX(-50%);
      }
      60% {
        transform: translateY(-5px) translateX(-50%);
      }
    }
    
    @keyframes scroll-down {
      0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
      100% {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
      }
    }
    
    .profile-image-container {
      position: relative;
      display: inline-block;
      background: transparent;
    }
    
    .profile-image-container::before {
      content: '';
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border: 1px solid rgba(0, 64, 255, 0.3);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 0.3;
      }
      50% {
        transform: scale(1.05);
        opacity: 0.6;
      }
      100% {
        transform: scale(1);
        opacity: 0.3;
      }
    }
    
    .tech-label {
      position: absolute;
      top: 20%;
      right: 10%;
      font-size: 0.8rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
    }
    
    .no-emotion {
      position: absolute;
      bottom: 20%;
      right: 10%;
      font-size: 0.8rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
    }
    
    /* Scroll reveal animations */
    .reveal-left {
      opacity: 0;
      transform: translateX(-50px);
      transition: all 1s ease;
    }
    
    .reveal-right {
      opacity: 0;
      transform: translateX(50px);
      transition: all 1s ease;
    }
    
    .reveal-up {
      opacity: 0;
      transform: translateY(50px);
      transition: all 1s ease;
    }
    
    .reveal-down {
      opacity: 0;
      transform: translateY(-50px);
      transition: all 1s ease;
    }
    
    .reveal-scale {
      opacity: 0;
      transform: scale(0.8);
      transition: all 1s ease;
    }
    
    .reveal-rotate {
      opacity: 0;
      transform: rotate(10deg);
      transition: all 1s ease;
    }
    
    .reveal-left.active,
    .reveal-right.active,
    .reveal-up.active,
    .reveal-down.active,
    .reveal-scale.active,
    .reveal-rotate.active {
      opacity: 1;
      transform: translate(0) scale(1) rotate(0);
    }
    
    /* Tech tool tooltip */
    .tech-tool {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 100;
      background: rgba(0, 10, 30, 0.8);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(0, 64, 255, 0.3);
      border-radius: 10px;
      padding: 15px;
      width: 300px;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.5s ease;
    }
    
    .tech-tool.active {
      transform: translateY(0);
      opacity: 1;
    }
    
    .tech-tool-toggle {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 101;
      background: #0040FF;
      color: white;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(0, 64, 255, 0.5);
      transition: all 0.3s ease;
    }
    
    .tech-tool-toggle:hover {
      transform: scale(1.1);
    }