@view-transition {
     navigation: auto;
 }

 body {
     box-sizing: border-box;
 }

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

 :root {
     --bg-color: #000000;
     --accent-glow: #00E5E5;
     --primary-depth: #003D80;
     --text-white: #FFFFFF;
     --secondary-layer: #12121D;
 }

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

 html {
     scroll-behavior: smooth;
 }

 body {
     background: var(--bg-color);
     color: var(--text-white);
     font-family: 'Inter', sans-serif;
     overflow-x: hidden;
     cursor: default;
     line-height: 1.6;
 }

 .jetbrains {
     font-family: 'JetBrains Mono', monospace;
 }

 /* Professional Cursor */
 .cursor {
     position: fixed;
     width: 12px;
     height: 12px;
     background: var(--accent-glow);
     border-radius: 50%;
     pointer-events: none;
     z-index: 9999;
     mix-blend-mode: screen;
     transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     opacity: 0.8;
 }

 .cursor.expand {
     width: 40px;
     height: 40px;
     background: transparent;
     border: 2px solid var(--accent-glow);
     opacity: 0.6;
 }

 /* WebGL Canvas Background */
 #webgl-canvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     opacity: 0.4;
 }

 /* Fluid Masking Typography */
 .fluid-mask {
     background: linear-gradient(135deg, var(--text-white) 0%, var(--accent-glow) 50%, var(--text-white) 100%);
     background-size: 300% 300%;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     animation: fluidGradient 4s ease-in-out infinite;
 }

 @keyframes fluidGradient {

     0%,
     100% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }
 }

 /* Professional Bento Grid */
 .bento-container {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-template-rows: repeat(auto-fit, minmax(200px, auto));
     gap: 24px;
     padding: 0 24px;
     max-width: 1400px;
     margin: 0 auto;
 }

 /* Desktop Bento Layout */
 @media (min-width: 1024px) {
     .about-main {
         grid-column: 1 / 8;
         grid-row: 1 / 3;
     }

     .about-side {
         grid-column: 8 / 13;
         grid-row: 1 / 2;
     }

     .service-1 {
         grid-column: 1 / 4;
         grid-row: 3 / 5;
     }

     .service-2 {
         grid-column: 4 / 7;
         grid-row: 3 / 5;
     }

     .service-3 {
         grid-column: 7 / 10;
         grid-row: 3 / 5;
     }

     .service-4 {
         grid-column: 10 / 13;
         grid-row: 3 / 5;
     }

     .games-section {
         grid-column: 8 / 13;
         grid-row: 2 / 3;
     }

     .portfolio-section {
         grid-column: 1 / 13;
         grid-row: 5 / 7;
     }
 }

 /* Mobile Responsive - Single Column */
 @media (max-width: 1023px) {
     .bento-container {
         grid-template-columns: 1fr;
         gap: 20px;
         padding: 0 16px;
     }

     .about-main,
     .about-side,
     .service-1,
     .service-2,
     .service-3,
     .service-4,
     .games-section,
     .portfolio-section {
         grid-column: 1;
         grid-row: auto;
     }
 }

 /* Professional Glass Effect */
 .glass-pro {
     background: rgba(18, 18, 29, 0.6);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(0, 229, 229, 0.1);
     border-radius: 16px;
     position: relative;
     overflow: hidden;
 }

 .glass-pro::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .glass-pro:hover::before {
     opacity: 0.6;
 }

 /* Subtle Hover Expansion */
 .expand-hover {
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .expand-hover:hover {
     transform: translateY(-8px) scale(1.02);
     box-shadow: 0 20px 40px rgba(0, 229, 229, 0.1);
 }

 /* Liquid Image Effect */
 .liquid-image {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .liquid-image::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at center, transparent 30%, var(--accent-glow) 70%);
     opacity: 0;
     transition: all 0.4s ease;
     mix-blend-mode: overlay;
 }

 .liquid-image:hover::after {
     opacity: 0.2;
     transform: scale(1.1);
 }

 .liquid-image:hover {
     transform: scale(1.05);
 }

 /* Scroll Snapping */
 .snap-section {
     scroll-snap-align: start;
     scroll-snap-stop: always;
 }

 .snap-container {
     scroll-snap-type: y mandatory;
     overflow-y: scroll;
     height: 100%;
 }

 /* Professional Form Styling */
 .form-field {
     position: relative;
     margin-bottom: 24px;
 }

 .form-input {
     width: 100%;
     padding: 16px 20px;
     background: rgba(18, 18, 29, 0.8);
     border: 2px solid rgba(0, 229, 229, 0.2);
     border-radius: 12px;
     color: var(--text-white);
     font-size: 16px;
     transition: all 0.3s ease;
     outline: none;
 }

 .form-input:focus {
     border-color: var(--accent-glow);
     box-shadow: 0 0 0 4px rgba(0, 229, 229, 0.1);
     background: rgba(18, 18, 29, 1);
 }

 .form-label {
     position: absolute;
     top: 16px;
     left: 20px;
     color: rgba(255, 255, 255, 0.6);
     font-size: 16px;
     transition: all 0.3s ease;
     pointer-events: none;
 }

 .form-input:focus+.form-label,
 .form-input:not(:placeholder-shown)+.form-label {
     top: -8px;
     left: 16px;
     font-size: 12px;
     color: var(--accent-glow);
     background: var(--bg-color);
     padding: 0 8px;
 }

 /* Professional Button */
 .btn-pro {
     background: linear-gradient(135deg, var(--primary-depth), var(--secondary-layer));
     border: 2px solid var(--accent-glow);
     color: var(--text-white);
     padding: 16px 32px;
     border-radius: 12px;
     font-weight: 600;
     letter-spacing: 0.5px;
     position: relative;
     overflow: hidden;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .btn-pro::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(0, 229, 229, 0.2), transparent);
     transition: left 0.5s ease;
 }

 .btn-pro:hover::before {
     left: 100%;
 }

 .btn-pro:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(0, 229, 229, 0.2);
 }

 /* Reveal Animations */
 .reveal-up {
     opacity: 0;
     transform: translateY(60px);
     transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .reveal-up.active {
     opacity: 1;
     transform: translateY(0);
 }

 /* Service Card Professional */
 .service-card-pro {
     background: linear-gradient(135deg, rgba(0, 61, 128, 0.3), rgba(18, 18, 29, 0.8));
     backdrop-filter: blur(15px);
     border: 1px solid rgba(0, 229, 229, 0.1);
     border-radius: 16px;
     padding: 32px 24px;
     text-align: center;
     position: relative;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .service-card-pro::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--accent-glow);
     transform: scaleX(0);
     transition: transform 0.4s ease;
 }

 .service-card-pro:hover::before {
     transform: scaleX(1);
 }

 .service-card-pro:hover {
     transform: translateY(-12px);
     border-color: rgba(0, 229, 229, 0.3);
     box-shadow: 0 20px 40px rgba(0, 229, 229, 0.1);
 }

 /* Typography Hierarchy */
 .text-hero {
     font-size: clamp(2.5rem, 6vw, 5rem);
     font-weight: 800;
     line-height: 1.1;
 }

 .text-section {
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 700;
     line-height: 1.2;
 }

 .text-card {
     font-size: clamp(1.25rem, 2.5vw, 1.5rem);
     font-weight: 600;
     line-height: 1.3;
 }

 /* Mobile Optimizations */
 @media (max-width: 768px) {
     .bento-container {
         padding: 0 16px;
         gap: 16px;
     }

     .glass-pro {
         padding: 24px 20px;
     }

     .service-card-pro {
         padding: 24px 20px;
     }

     .btn-pro {
         padding: 14px 28px;
         font-size: 14px;
     }
 }

 /* Smooth Transitions */
 * {
     transition: transform 0.3s ease, opacity 0.3s ease;
 }

 /* Footer Styles */
 .footer-link {
     position: relative;
     transition: all 0.3s ease;
 }

 .footer-link::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 1px;
     background: var(--accent-glow);
     transition: width 0.3s ease;
 }

 .footer-link:hover::after {
     width: 100%;
 }

 .footer-link:hover {
     color: var(--accent-glow);
     transform: translateX(4px);
 }

 /* Social Icon Pulse Effect */
 .social-icon {
     position: relative;
     overflow: hidden;
 }

 .social-icon::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     background: var(--accent-glow);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: all 0.4s ease;
 }

 .social-icon:hover::before {
     width: 100%;
     height: 100%;
     opacity: 0.1;
 }

 .social-icon:hover {
     border-color: var(--accent-glow);
     color: var(--accent-glow);
     box-shadow: 0 0 20px rgba(0, 229, 229, 0.3);
     animation: socialPulse 1.5s ease-in-out infinite;
 }

 @keyframes socialPulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }
 }

 /* Hero Background Futuristic */
 /* Hero Background Futuristic */
 .hero-bg {
     position: relative;
     min-height: 80vh;
     /* aumenta a altura do hero */
     background-image:
         url("/static/images/hero.png"),
         /* imagem principal */
         radial-gradient(circle at 20% 80%, rgba(0, 61, 128, 0.3) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(0, 229, 229, 0.15) 0%, transparent 50%),
         radial-gradient(circle at 40% 40%, rgba(18, 18, 29, 0.8) 0%, transparent 50%),
         linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(18, 18, 29, 0.7) 100%);
     background-size: cover, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
     background-position: center, center, center, center, center;
     background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
     animation: heroBackgroundFlow 20s ease-in-out infinite;
 }

 /* Mantemos os overlays */
 .hero-bg::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image:
         linear-gradient(45deg, transparent 40%, rgba(0, 229, 229, 0.03) 50%, transparent 60%),
         linear-gradient(-45deg, transparent 40%, rgba(0, 61, 128, 0.05) 50%, transparent 60%);
     background-size: 60px 60px, 80px 80px;
     animation: circuitFlow 15s linear infinite;
     opacity: 0.6;
     pointer-events: none;
 }

 .hero-bg::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(2px 2px at 20px 30px, rgba(0, 229, 229, 0.3), transparent),
         radial-gradient(2px 2px at 40px 70px, rgba(0, 61, 128, 0.4), transparent),
         radial-gradient(1px 1px at 90px 40px, rgba(0, 229, 229, 0.2), transparent),
         radial-gradient(1px 1px at 130px 80px, rgba(0, 61, 128, 0.3), transparent);
     background-repeat: repeat;
     background-size: 150px 100px;
     animation: dataStreamFlow 25s linear infinite;
     opacity: 0.4;
     pointer-events: none;
 }


 @keyframes heroBackgroundFlow {

     0%,
     100% {
         background-position: 0% 0%, 100% 100%, 50% 50%, 0% 0%;
         transform: scale(1);
     }

     33% {
         background-position: 30% 30%, 70% 70%, 80% 20%, 20% 80%;
         transform: scale(1.02);
     }

     66% {
         background-position: 70% 70%, 30% 30%, 20% 80%, 80% 20%;
         transform: scale(0.98);
     }
 }

 @keyframes circuitFlow {
     0% {
         transform: translateX(0) translateY(0);
     }

     100% {
         transform: translateX(-60px) translateY(-60px);
     }
 }

 @keyframes dataStreamFlow {
     0% {
         transform: translateX(0) translateY(0);
     }

     100% {
         transform: translateX(-150px) translateY(-100px);
     }
 }

 /* Hero Subtitle Glow Effect */
 .hero-subtitle-glow {
     text-shadow: 0 0 20px rgba(0, 229, 229, 0.3);
     transition: all 0.3s ease;
 }

 .hero-subtitle-glow:hover {
     text-shadow: 0 0 30px rgba(0, 229, 229, 0.5);
 }

 /* Advanced Cursor with Particle Trail */
 .cursor {
     position: fixed;
     width: 12px;
     height: 12px;
     background: var(--accent-glow);
     border-radius: 50%;
     pointer-events: none;
     z-index: 9999;
     mix-blend-mode: screen;
     transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     opacity: 0.8;
     box-shadow: 0 0 20px rgba(0, 229, 229, 0.4);
 }

 .cursor.expand {
     width: 40px;
     height: 40px;
     background: transparent;
     border: 2px solid var(--accent-glow);
     opacity: 0.6;
     box-shadow:
         0 0 30px rgba(0, 229, 229, 0.6),
         inset 0 0 20px rgba(0, 229, 229, 0.2);
 }

 /* Enhanced Service Cards */
 .service-card-pro {
     background: linear-gradient(135deg, rgba(0, 61, 128, 0.3), rgba(18, 18, 29, 0.8));
     backdrop-filter: blur(15px);
     border: 1px solid rgba(0, 229, 229, 0.1);
     border-radius: 16px;
     padding: 32px 24px;
     text-align: center;
     position: relative;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .service-card-pro::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
     transform: scaleX(0);
     transition: transform 0.4s ease;
 }

 .service-card-pro::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: radial-gradient(circle at center, rgba(0, 229, 229, 0.1) 0%, transparent 70%);
     opacity: 0;
     transition: opacity 0.4s ease;
 }

 .service-card-pro:hover::before {
     transform: scaleX(1);
 }

 .service-card-pro:hover::after {
     opacity: 1;
 }

 .service-card-pro:hover {
     transform: translateY(-12px) scale(1.02);
     border-color: rgba(0, 229, 229, 0.3);
     box-shadow:
         0 20px 40px rgba(0, 229, 229, 0.1),
         0 0 0 1px rgba(0, 229, 229, 0.2);
 }

 /* Enhanced Liquid Image Effect */
 .liquid-image {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .liquid-image::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(45deg, transparent 30%, rgba(0, 229, 229, 0.1) 50%, transparent 70%);
     transform: translateX(-100%) translateY(-100%);
     transition: transform 0.6s ease;
 }

 .liquid-image::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at center, transparent 30%, rgba(0, 229, 229, 0.15) 70%);
     opacity: 0;
     transition: all 0.4s ease;
     mix-blend-mode: overlay;
 }

 .liquid-image:hover::before {
     transform: translateX(100%) translateY(100%);
 }

 .liquid-image:hover::after {
     opacity: 1;
     transform: scale(1.1);
 }

 .liquid-image:hover {
     transform: scale(1.05);
     box-shadow: 0 10px 30px rgba(0, 229, 229, 0.2);
 }

 /* Hide scrollbar but keep functionality */
 body::-webkit-scrollbar {
     width: 0px;
     background: transparent;
 }

 .fullscreen-iframe {
     position: fixed;
     top: 100;
     left: 0;
     width: 100vw;
     height: 100vh;
     border: none;
     z-index: 1;
     /* ajusta conforme teu header */
 }