/* Detroit: Become Human Inspired - Triangle Geometric Theme */
/* Optimized font loading - only load essential weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Playfair+Display:ital@1&display=swap');

:root{
  --primary-red:#E62B1E;
  --vibrant-orange:#FF6B35;
  --dark-bg:#0A0E1A;
  --darker:#050812;
  --glass-bg:rgba(20, 20, 30, 0.6);
  --glass-border:rgba(255, 255, 255, 0.1);
  --white:#FFFFFF;
  --gray:#B8C5D6;
  --light-blue:#7DD3FC;
  --cool-gray:#94A3B8;
  --maxw:1100px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  /* Performance optimizations */
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}

/* Hardware acceleration for animations */
*[class*="hero"],
*[class*="card"],
*[class*="cta"],
*[class*="btn"]{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  will-change:transform;
}

/* Smooth scrolling */
html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Performance: Allow browser to skip rendering off-screen content */
.card, .section{
  content-visibility:auto;
  contain-intrinsic-size:0 500px;
}

@keyframes scanline{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(100vh)}
}

@keyframes flicker{
  0%, 100%{opacity:1}
  50%{opacity:0.8}
}

@keyframes digitalRain{
  0%{transform:translateY(-100%); opacity:0}
  50%{opacity:0.5}
  100%{transform:translateY(100vh); opacity:0}
}

body{
  font-family:'Inter', sans-serif; 
  margin:0; 
  color:var(--white); 
  background:var(--darker);
  background-image:
    linear-gradient(180deg, rgba(230, 43, 30, 0.05) 0%, transparent 100%),
    radial-gradient(ellipse at 20% 20%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(230, 43, 30, 0.08) 0%, transparent 50%);
  background-attachment:fixed;
  padding-top:75px;
  position:relative;
  overflow-x:hidden;
  min-height:100vh;
}

/* Flowing lines pattern - freedom theme with organic geometric shapes */
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:
    linear-gradient(135deg, transparent 0%, rgba(255, 107, 53, 0.02) 25%, transparent 50%, rgba(230, 43, 30, 0.02) 75%, transparent 100%),
    repeating-linear-gradient(45deg, transparent, transparent 100px, rgba(255, 107, 53, 0.015) 100px, rgba(255, 107, 53, 0.015) 200px),
    repeating-linear-gradient(-45deg, transparent, transparent 150px, rgba(230, 43, 30, 0.015) 150px, rgba(230, 43, 30, 0.015) 300px),
    radial-gradient(circle at 30% 20%, rgba(255, 107, 53, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(230, 43, 30, 0.04) 0%, transparent 50%);
  background-size:200% 100%, 400px 400px, 600px 600px, 800px 800px, 800px 800px;
  opacity:0.8;
  z-index:0;
  pointer-events:none;
  animation:flowingLight 15s ease-in-out infinite;
}

@keyframes flowingLight{
  0%, 100%{
    background-position:0% 50%, 30% 20%, 70% 80%;
    transform:rotate(0deg);
  }
  50%{
    background-position:100% 50%, 40% 30%, 60% 70%;
    transform:rotate(2deg);
  }
}

/* Add rebellious warning stripes accent - Barber pole style */
body::after{
  content:'';
  position:fixed;
  top:0;
  right:0;
  width:8px;
  height:100%;
  background:
    repeating-linear-gradient(
      135deg,
      var(--primary-red),
      var(--primary-red) 10px,
      #0A0E1A 10px,
      #0A0E1A 20px
    );
  opacity:0.9;
  z-index:1000;
  pointer-events:none;
  box-shadow:-2px 0 10px rgba(230, 43, 30, 0.5);
  animation:barberPole 2s linear infinite, stripeGlow 3s ease-in-out infinite;
}

@keyframes barberPole{
  0%{background-position:0 0}
  100%{background-position:0 28.28px}
}

@keyframes triangleFloat{
  0%{background-position:0 0, 40px 0, 0 70px}
  100%{background-position:80px 0, 120px 0, 80px 70px}
}

@keyframes barberPole{
  0%{background-position:0 0}
  100%{background-position:0 28.28px}
}

@keyframes stripeGlow{
  0%, 100%{
    box-shadow:-2px 0 10px rgba(230, 43, 30, 0.5);
    opacity:0.7;
  }
  50%{
    box-shadow:-4px 0 20px rgba(230, 43, 30, 0.8), -8px 0 40px rgba(255, 107, 53, 0.4);
    opacity:0.9;
  }
}

/* Remove grid overlay - keep it clean and rebellious */

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:24px;
  position:relative;
  z-index:1;
}

@keyframes slideDown{
  from{
    top:-100px;
    opacity:0;
    transform:translateX(-50%) scale(0.95);
  }
  to{
    top:16px;
    opacity:1;
    transform:translateX(-50%) scale(1);
  }
}

@keyframes hexagonPulse{
  0%, 100%{transform:scale(1); opacity:0.3}
  50%{transform:scale(1.1); opacity:0.6}
}

.header{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  background:rgba(10, 14, 26, 0.95);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:2px solid rgba(255, 107, 53, 0.2);
  box-shadow:0 8px 32px rgba(0, 0, 0, 0.6);
  border-radius:60px;
  padding:12px 32px;
  max-width:calc(var(--maxw) - 48px);
  width:calc(100% - 48px);
  animation:slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  transition:all 0.3s ease;
  overflow:hidden;
}

.header::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.08), transparent);
  animation:headerShine 4s ease-in-out infinite;
  pointer-events:none;
}

.header::after{
  content:'';
  position:absolute;
  bottom:-20px;
  right:10%;
  width:100px;
  height:100px;
  background:radial-gradient(circle, rgba(230, 43, 30, 0.05) 0%, transparent 70%);
  border-radius:50%;
  pointer-events:none;
  filter:blur(15px);
}

@keyframes slideDown{
  from{
    top:-100px;
    opacity:0;
    transform:translateX(-50%) scale(0.95);
  }
  to{
    top:16px;
    opacity:1;
    transform:translateX(-50%) scale(1);
  }
}

.header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0;
  max-width:100%;
  margin:0;
}

@keyframes floatUp{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

@keyframes breathe{
  0%, 100%{transform:scale(1)}
  50%{transform:scale(1.02)}
}

@keyframes headerShine{
  0%{
    left:-100%;
  }
  50%, 100%{
    left:200%;
  }
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  animation:fadeInLeft 0.8s ease-out 0.2s both;
}

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

.brand img{
  height:50px;
  filter:drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
  transition:filter 0.3s ease;
}

.brand img:hover{
  filter:drop-shadow(0 0 15px rgba(255, 107, 53, 0.6));
}

nav{
  animation:fadeInRight 0.8s ease-out 0.3s both;
}

@keyframes fadeInRight{
  from{
    opacity:0;
    transform:translateX(30px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

nav ul{
  display:flex;
  gap:2px;
  list-style:none;
}

nav a{
  color:var(--white);
  text-decoration:none;
  font-weight:600;
  font-family:'Inter', sans-serif;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:all 0.3s ease;
  padding:10px 20px;
  border-radius:24px;
  font-size:0.9rem;
  position:relative;
}

nav a:hover{
  background:rgba(255, 107, 53, 0.15);
  color:var(--vibrant-orange);
  transform:translateY(-2px);
}

@keyframes glowPulse{
  0%, 100%{
    text-shadow:
      0 0 10px var(--primary-red),
      0 0 20px var(--primary-red),
      0 0 30px var(--primary-red);
  }
  50%{
    text-shadow:
      0 0 20px var(--primary-red),
      0 0 30px var(--primary-red),
      0 0 40px var(--primary-red),
      0 0 50px var(--vibrant-orange);
  }
}

.hero{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  padding:100px 0 80px 0;
  align-items:center;
  position:relative;
}

.hero::before{
  content:'';
  position:absolute;
  top:10%;
  right:5%;
  width:400px;
  height:400px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 107, 53, 0.04) 0%, transparent 50%),
    linear-gradient(135deg, transparent 40%, rgba(255, 107, 53, 0.03) 40%, rgba(255, 107, 53, 0.03) 60%, transparent 60%);
  border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
  animation:morphBlob 8s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
  filter:blur(40px);
  opacity:0.7;
}

.hero::after{
  content:'';
  position:absolute;
  bottom:15%;
  left:8%;
  width:350px;
  height:350px;
  background:
    radial-gradient(circle at 70% 70%, rgba(230, 43, 30, 0.03) 0%, transparent 50%),
    linear-gradient(225deg, transparent 40%, rgba(230, 43, 30, 0.025) 40%, rgba(230, 43, 30, 0.025) 60%, transparent 60%);
  border-radius:70% 30% 30% 70% / 70% 70% 30% 30%;
  animation:morphBlob 10s ease-in-out infinite reverse;
  pointer-events:none;
  z-index:-1;
  filter:blur(35px);
  opacity:0.6;
}

@keyframes morphBlob{
  0%, 100%{
    border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;
    transform:rotate(0deg) scale(1);
  }
  25%{
    border-radius:58% 42% 75% 25% / 76% 46% 54% 24%;
  }
  50%{
    border-radius:50% 50% 33% 67% / 55% 27% 73% 45%;
    transform:rotate(180deg) scale(1.1);
  }
  75%{
    border-radius:33% 67% 58% 42% / 63% 68% 32% 37%;
  }
}

@keyframes pulse{
  0%, 100%{opacity:0.5; transform:translateX(-50%) scale(1)}
  50%{opacity:0.8; transform:translateX(-50%) scale(1.2)}
}

.hero .eyebrow{
  color:var(--vibrant-orange);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:4px;
  font-family:'Inter', sans-serif;
  font-size:0.75rem;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
  animation:fadeInUp 0.8s ease-out 0.4s both;
  text-shadow:0 0 10px var(--vibrant-orange);
}

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

.hero .eyebrow::before{
  content:'▶';
  font-size:0.8rem;
  color:var(--primary-red);
  animation:blink 2s step-end infinite;
}

@keyframes blink{
  0%, 100%{opacity:1}
  50%{opacity:0}
}

.hero h1{
  font-size:4rem;
  margin:0 0 28px 0;
  color:var(--white);
  line-height:1;
  font-family:'Inter', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:4px;
  animation:fadeInUp 0.8s ease-out 0.5s both;
}

.hero h1 .defy{
  display:inline-block;
  font-weight:900;
  color:var(--vibrant-orange);
  font-family:'Inter', sans-serif;
  letter-spacing:8px;
  font-size:4rem;
  position:relative;
  animation:fadeInUp 0.8s ease-out 0.5s both;
  text-shadow:2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero h1 .define{
  display:inline-block;
  font-weight:900;
  color:var(--white);
  font-family:'Inter', sans-serif;
  letter-spacing:8px;
  font-size:4rem;
  margin-left:20px;
  animation:fadeInUp 0.8s ease-out 0.6s both;
  text-shadow:2px 2px 4px rgba(0, 0, 0, 0.3);
  position:relative;
}

.hero h1 .define::after{
  content:'';
  position:absolute;
  bottom:-8px;
  left:0;
  width:0;
  height:3px;
  background:var(--vibrant-orange);
  animation:underlineGrow 1s ease-out 1.2s both;
}

@keyframes underlineGrow{
  to{width:100%}
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

.hero p{
  color:var(--light-blue);
  font-size:1.1rem;
  line-height:1.8;
  margin-bottom:36px;
  animation:fadeInUp 0.8s ease-out 0.6s both;
  font-family:'Inter', sans-serif;
  font-weight:400;
}

.hero-tagline{
  font-size:1.2rem !important;
  color:var(--cool-gray) !important;
  font-weight:500;
  margin-bottom:32px !important;
  line-height:1.9;
}

.manifesto{
  background:rgba(230, 43, 30, 0.1);
  border-left:4px solid var(--vibrant-orange);
  padding:24px 28px;
  margin:32px 0;
  animation:fadeInUp 0.8s ease-out 0.65s both;
  position:relative;
  overflow:hidden;
}

.manifesto::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(255, 107, 53, 0.03) 10px,
      rgba(255, 107, 53, 0.03) 20px
    );
  pointer-events:none;
}

.manifesto p{
  color:var(--white) !important;
  font-size:1.05rem !important;
  margin:8px 0 !important;
  font-weight:600;
  letter-spacing:0.5px;
  position:relative;
  z-index:1;
  animation:none !important;
}

.manifesto strong{
  color:var(--primary-red);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:2px;
  text-shadow:0 0 10px rgba(230, 43, 30, 0.5);
}

@keyframes ctaGlow{
  0%, 100%{
    box-shadow:
      0 0 20px rgba(255, 107, 53, 0.4),
      0 0 40px rgba(255, 107, 53, 0.2),
      inset 0 0 20px rgba(255, 107, 53, 0.1);
  }
  50%{
    box-shadow:
      0 0 30px rgba(255, 107, 53, 0.6),
      0 0 60px rgba(255, 107, 53, 0.3),
      inset 0 0 30px rgba(255, 107, 53, 0.2);
  }
}

.cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--vibrant-orange);
  color:var(--white);
  padding:18px 42px;
  border-radius:50px;
  border:none;
  text-decoration:none;
  font-weight:700;
  font-family:'Inter', sans-serif;
  text-transform:uppercase;
  letter-spacing:2px;
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:0 8px 24px rgba(255, 107, 53, 0.4);
  position:relative;
  overflow:hidden;
  animation:fadeInUp 0.8s ease-out 0.7s both;
  font-size:1rem;
}

.cta::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:
    conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.3), transparent 30%);
  animation:ctaRotate 3s linear infinite;
  opacity:0;
  transition:opacity 0.3s ease;
}

.cta::after{
  content:'→';
  font-size:1.2rem;
  position:relative;
  z-index:1;
  transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta:hover::before{
  opacity:1;
}

.cta:hover::after{
  transform:translateX(8px);
}

.cta:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(255, 107, 53, 0.6);
  background:var(--primary-red);
}

@keyframes ctaRotate{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:40px;
  padding:20px 0;
}

.card{
  background:rgba(10, 14, 26, 0.85);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  padding:36px;
  border-radius:16px;
  border:1px solid rgba(255, 107, 53, 0.25);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  position:relative;
  overflow:hidden;
  margin:8px;
}

.card::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle, rgba(255, 107, 53, 0.08) 0%, transparent 70%);
  border-radius:50%;
  transition:all 0.8s ease;
  opacity:0;
  filter:blur(20px);
}

.card::after{
  content:'';
  position:absolute;
  bottom:-30%;
  left:-30%;
  width:60%;
  height:60%;
  background:
    radial-gradient(circle, rgba(230, 43, 30, 0.06) 0%, transparent 70%);
  border-radius:50%;
  transition:all 0.8s ease;
  opacity:0;
  filter:blur(20px);
}

.card:nth-child(1){animation-delay:0.2s}
.card:nth-child(2){animation-delay:0.3s}
.card:nth-child(3){animation-delay:0.4s}
.card:nth-child(4){animation-delay:0.5s}

.card:hover::before{
  opacity:0.8;
  top:-20%;
  right:-20%;
}

.card:hover::after{
  opacity:0.7;
  bottom:-10%;
  left:-10%;
}

.card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:
    0 12px 40px rgba(230, 43, 30, 0.3),
    0 0 0 1px rgba(255, 107, 53, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border-color:rgba(255, 107, 53, 0.6);
  background:rgba(10, 14, 26, 0.9);
}

.card h3{
  color:var(--vibrant-orange);
  font-family:'Inter', sans-serif;
  font-size:1.5rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:2px;
  margin-bottom:16px;
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
}

.card h3::before{
  font-size:1.8rem;
  line-height:1;
  filter:drop-shadow(0 0 8px currentColor);
}

.card p{
  color:var(--light-blue);
  line-height:1.8;
  position:relative;
  z-index:1;
  font-family:'Inter', sans-serif;
  font-size:1.05rem;
  font-weight:400;
}

.section{
  padding:60px 0;
  animation:fadeIn 1s ease-out;
}

.section h2{
  color:var(--white);
  font-family:'Inter', sans-serif;
  font-size:2.5rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:4px;
  margin-bottom:40px;
  position:relative;
  display:inline-block;
  animation:fadeInLeft 0.8s ease-out both;
}

.section h2::before{
  content:'▶';
  position:absolute;
  left:-40px;
  color:var(--vibrant-orange);
  animation:blink 2s step-end infinite;
}

.section h2::after{
  content:'';
  position:absolute;
  bottom:-12px;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg, var(--primary-red), var(--vibrant-orange), transparent);
  animation:slideIn 1s ease-out both;
}

@keyframes slideIn{
  from{width:0}
  to{width:80%}
}

.footer{
  padding:40px 0;
  color:var(--gray);
  background:rgba(10, 14, 26, 0.95);
  backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border-top:2px solid rgba(255, 107, 53, 0.3);
  margin-top:100px;
  box-shadow:
    0 -8px 32px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(255, 107, 53, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position:relative;
}

.footer::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--vibrant-orange), transparent);
  animation:scanlineCard 3s linear infinite;
}

/* Responsive nav */
.menu-btn{
  display:none;
  background:transparent;
  border:none;
  color:var(--vibrant-orange);
  padding:8px;
  cursor:pointer;
  font-size:1.8rem;
  line-height:1;
  transition:all 0.3s ease;
  position:relative;
  width:40px;
  height:40px;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
}

.menu-btn span{
  display:block;
  width:28px;
  height:3px;
  background:var(--vibrant-orange);
  transition:all 0.3s ease;
  border-radius:2px;
  box-shadow:0 0 8px rgba(255, 107, 53, 0.5);
}

.menu-btn.active span:nth-child(1){
  transform:rotate(45deg) translate(8px, 8px);
}

.menu-btn.active span:nth-child(2){
  opacity:0;
  transform:translateX(-20px);
}

.menu-btn.active span:nth-child(3){
  transform:rotate(-45deg) translate(8px, -8px);
}

.menu-btn:hover span{
  background:var(--primary-red);
  box-shadow:0 0 15px rgba(230, 43, 30, 0.7);
}
/* Tablet */
@media (max-width:1024px){
  .container{
    padding:20px;
  }
  .hero h1{
    font-size:3rem;
  }
  .hero{
    padding:80px 0 60px 0;
  }
  .grid{
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:24px;
  }
  .card{
    padding:28px;
  }
}

/* Mobile */
@media (max-width:800px){
  /* Fix horizontal overflow */
  html, body{
    overflow-x:hidden;
    max-width:100%;
  }
  
  body{
    position:relative;
  }
  
  .menu-btn{
    display:flex;
  }
  
  nav{
    position:fixed;
    top:0;
    right:-100%;
    width:280px;
    height:100vh;
    background:rgba(10, 14, 26, 0.98);
    border-left:2px solid var(--vibrant-orange);
    padding:80px 0 20px 0;
    transition:right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index:999;
    overflow-y:auto;
    box-shadow:-10px 0 30px rgba(0, 0, 0, 0.8);
  }
  
  nav.active{
    right:0;
  }
  
  nav ul{
    display:flex;
    flex-direction:column;
    gap:0;
  }
  
  nav a{
    display:block;
    padding:18px 28px;
    clip-path:none;
    border-radius:0;
    background:transparent;
    border-bottom:1px solid rgba(255, 107, 53, 0.2);
    font-size:1rem;
    transition:all 0.3s ease;
  }
  
  nav a:hover, nav a:active{
    background:rgba(255, 107, 53, 0.15);
    padding-left:36px;
  }
  
  /* Mobile overlay */
  .nav-overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgba(0, 0, 0, 0.7);
    z-index:998;
    opacity:0;
    transition:opacity 0.4s ease;
  }
  
  .nav-overlay.active{
    display:block;
    opacity:1;
  }
  
  body{
    padding-top:80px;
    /* Disable fixed background for performance */
    background-attachment:scroll;
  }
  
  .header{
    width:calc(100vw - 16px);
    max-width:calc(100vw - 16px);
    top:8px;
    padding:8px 16px;
    left:8px;
    transform:none;
  }
  
  .header .container{
    padding:0;
    max-width:100%;
  }
  
  .brand img{
    height:40px;
  }
  
  .hero{
    padding:60px 0 40px 0;
  }
  
  .hero h1{
    font-size:2.5rem;
    margin-bottom:20px;
  }
  
  .hero h1 .defy{
    letter-spacing:4px;
    font-size:2.5rem;
  }
  
  .hero h1 .define{
    font-size:2rem;
    margin-top:8px;
  }
  
  .hero p{
    font-size:1rem;
    margin-bottom:28px;
  }
  
  .hero .eyebrow{
    font-size:0.7rem;
    letter-spacing:2px;
  }
  
  .cta, .btn{
    padding:14px 28px;
    font-size:0.85rem;
    width:100%;
    justify-content:center;
  }
  
  .grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  .card{
    padding:24px;
  }
  
  .card h3{
    font-size:1.4rem;
  }
  
  .section h2{
    font-size:2rem;
    margin-bottom:28px;
  }
  
  .container{
    padding:16px;
  }
  
  /* Keep manifesto visible on mobile */
  .manifesto{
    padding:20px;
    margin:24px 0;
  }
  
  .manifesto p{
    font-size:0.95rem !important;
  }
  
  /* AGGRESSIVE PERFORMANCE OPTIMIZATIONS */
  
  /* Disable ALL animations on mobile except essential ones */
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
  }
  
  /* Keep barber pole and hamburger menu animations */
  body::after{
    display:block !important;
    animation:barberPole 2s linear infinite !important;
  }
  
  .menu-btn, .menu-btn span{
    transition:all 0.3s ease !important;
  }
  
  nav{
    transition:right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  .nav-overlay{
    transition:opacity 0.4s ease !important;
  }
  
  /* Remove expensive visual effects */
  body::before{
    display:none !important;
  }
  
  .hero::before{
    display:none !important;
  }
  
  /* Remove all backdrop-filter blur (most expensive) */
  .header, .card, .footer, input, textarea, select{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  
  /* Simplify header */
  .header{
    background:rgba(10, 14, 26, 0.98);
    box-shadow:0 2px 10px rgba(0, 0, 0, 0.5);
  }
  
  /* Simplify cards */
  .card{
    background:rgba(10, 14, 26, 0.95);
    box-shadow:0 4px 10px rgba(0, 0, 0, 0.5);
  }
  
  /* Remove all text-shadow effects */
  .hero h1 .defy, .section h2, label, .icon-peak{
    text-shadow:none !important;
  }
  
  /* Remove glow effects from buttons */
  .cta, .btn{
    box-shadow:none !important;
  }
  
  /* Disable hover effects on mobile */
  .cta:hover, .btn:hover, .card:hover, nav a:hover{
    transform:none !important;
    box-shadow:none !important;
  }
  
  /* Remove pseudo-element animations */
  .card::before, .card::after, .footer::before{
    display:none !important;
  }
  
  /* Simplify inputs */
  input, textarea, select{
    background:rgba(10, 14, 26, 0.95);
    box-shadow:none;
  }
  
  input:focus, textarea:focus, select:focus{
    box-shadow:none;
    transform:none;
  }
  
  /* Remove expensive clip-paths on mobile - use simple borders */
  .header, .card, .cta, .btn, nav a, input, textarea, select{
    clip-path:none !important;
    border-radius:4px;
  }
  
  /* Disable will-change to save memory */
  *{
    will-change:auto !important;
  }
}

  /* Small phones */
@media (max-width:480px){
  /* Disable smooth scroll on mobile for performance */
  html{
    scroll-behavior:auto;
  }
  
  .hero h1{
    font-size:2rem;
  }
  
  .hero h1 .defy{
    font-size:2rem;
    letter-spacing:2px;
  }
  
  .hero h1 .define{
    font-size:1.5rem;
  }
  
  .section h2{
    font-size:1.75rem;
  }
  
  .card h3{
    font-size:1.25rem;
  }
  
  input, textarea, select{
    font-size:16px; /* Prevents zoom on iOS */
  }
}/* Forms */
.form-row{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:24px;
  animation:fadeInUp 0.6s ease-out both;
}

.form-row:nth-child(1){animation-delay:0.1s}
.form-row:nth-child(2){animation-delay:0.2s}
.form-row:nth-child(3){animation-delay:0.3s}
.form-row:nth-child(4){animation-delay:0.4s}

input,textarea,select{
  background:rgba(10, 14, 26, 0.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:2px solid rgba(255, 107, 53, 0.3);
  padding:16px;
  border-radius:12px;
  color:var(--white);
  font-family:'Inter', sans-serif;
  font-size:1rem;
  font-weight:500;
  transition:all 0.3s ease;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
}

input::placeholder,textarea::placeholder{
  color:var(--cool-gray);
  opacity:0.7;
  font-family:'Inter', sans-serif;
}

input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--vibrant-orange);
  box-shadow:0 8px 24px rgba(255, 107, 53, 0.3);
  background:rgba(10, 14, 26, 0.95);
  transform:translateY(-2px);
}

label{
  font-size:0.95rem;
  color:var(--vibrant-orange);
  font-weight:700;
  margin-bottom:8px;
  font-family:'Inter', sans-serif;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:0 0 10px rgba(255, 107, 53, 0.3);
}

.btn{
  background:var(--vibrant-orange);
  color:var(--white);
  padding:16px 36px;
  border-radius:50px;
  border:none;
  cursor:pointer;
  transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-weight:700;
  font-family:'Inter', sans-serif;
  text-transform:uppercase;
  letter-spacing:2px;
  box-shadow:0 8px 24px rgba(255, 107, 53, 0.4);
  font-size:0.95rem;
}

.btn:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(255, 107, 53, 0.6);
  background:var(--primary-red);
}

small{
  color:var(--gray);
  line-height:1.6;
  font-family:'Inter', sans-serif;
}

/* Utilities */
.center{text-align:center}

/* Icon styles */
.icon-peak{
  display:inline-block;
  margin-right:8px;
  font-size:1.2em;
  color:var(--vibrant-orange);
  animation:pulse 2s ease-in-out infinite;
  text-shadow:0 0 10px var(--vibrant-orange);
}

@keyframes pulse{
  0%, 100%{
    opacity:1;
    text-shadow:0 0 10px var(--vibrant-orange);
  }
  50%{
    opacity:0.7;
    text-shadow:0 0 20px var(--vibrant-orange), 0 0 30px var(--primary-red);
  }
}