/* ABOV3 — Genesis CodeForger landing page styles */
:root{
  /* Poster-inspired palette: warm anvil orange + cool teal highlights */
  --bg:#07121a; /* deep marine */
  --card:#07121a;
  --accent:#c86b2e; /* warm orange */
  --accent-2:#ffb36b; /* lighter orange */
  --teal:#66d0d6; /* cool highlight */
  --muted:rgba(230,238,246,0.85);
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --max:1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background: linear-gradient(180deg, #020814 0%, #05101a 100%);
  color: var(--muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--max);margin:0 auto;padding:28px}
.nav{backdrop-filter: blur(6px);position:sticky;top:0;z-index:20}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo-img{height:192px;object-fit:contain;display:block;transition:transform .18s ease}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600}
.btn-outline{padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);}

.hero{padding:72px 0}
.hero-inner{display:grid;grid-template-columns:1fr 460px;gap:28px;align-items:center}
.hero-copy h1{font-size:24px;margin:0 0 12px;letter-spacing:-0.5px;line-height:1.3}
.brand-main{font-size:24px;font-weight:900;letter-spacing:-0.5px}
.brand-sub{font-size:24px;font-weight:600;opacity:0.95}
.muted{opacity:0.95;color:var(--muted)}
.lead{color:rgba(230,238,246,0.85);font-size:18px;line-height:1.5;margin:14px 0 18px}
.cta-row{display:flex;gap:12px;margin-bottom:18px}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(200,110,50,0.16)}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:12px 18px;border-radius:12px;color:var(--muted);text-decoration:none}
.pill-list{display:flex;gap:12px;list-style:none;padding:0;margin:12px 0 0}
.pill-list li{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:8px 12px;border-radius:999px;color:var(--muted);font-weight:600;border:1px solid rgba(255,255,255,0.03)}

.hero-visual .device{background:linear-gradient(180deg,#071a25,#02111a);border-radius:16px;padding:18px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(2,8,18,0.6)}
.carousel-track{position:relative;display:block}
.samples-carousel{position:relative;overflow:hidden;width:100%}
/* Fade-based carousel: stack slides and crossfade via opacity */
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none;padding:0;margin:0}
.carousel-slide.is-active{opacity:1;pointer-events:auto}
.carousel-track{min-height:180px}
.carousel-nav{display:none}
.samples-grid, .carousel-track .code-sample{margin:0}
.code-sample{margin:0;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));color:var(--teal);white-space:pre-wrap;overflow:auto;border-radius:8px;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;font-size:13px;line-height:1.45}

@media(min-width:1200px){
  .carousel-slide{min-width:320px;flex:0 0 320px}
  .code-sample{font-size:14px}
}

@media(max-width:700px){
  /* Make slides fit within the viewport on small screens to avoid overflow */
  .carousel-slide{flex:0 0 85%;min-width:unset}
  .carousel-track{gap:8px}
  .carousel-nav{padding:6px 10px}
}

.features{padding:60px 0}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:linear-gradient(180deg, rgba(2,6,10,0.35), rgba(2,6,10,0.25));padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}

.demo{padding:46px 0 48px;margin-top:16px;background:linear-gradient(180deg, rgba(2,6,10,0.18), transparent)}
.demo-grid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
.chat-mock{background:linear-gradient(180deg,#051017,#021017);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.message{padding:12px;border-radius:10px;margin-bottom:10px}
.message.bot{background:rgba(255,255,255,0.02);color:var(--muted)}
.message.user{background:linear-gradient(90deg,#0e2430,#092025);color:var(--teal);text-align:right}
.demo-controls {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
}

.demo-controls .btn-primary {
  margin-left: 10px;
  margin-top: calc(1in - 0.25in);
}

.contact{padding:38px 0}
.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
.signup{display:flex;gap:12px}
.signup input{padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.05);background:transparent;color:inherit}

.site-footer{padding:22px 0;border-top:1px solid rgba(255,255,255,0.02);margin-top:36px}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* Shimmering animation for all orange/amber elements */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  50% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

@keyframes shimmer-bg {
  0% {
    background-position: -200% center;
  }
  50% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

.footer-tagline {
  background: linear-gradient(90deg, 
    #ff8c42 0%, 
    #ff6b35 25%, 
    #ffa500 50%, 
    #ff8c42 75%, 
    #ff6b35 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3.5s ease-in-out infinite;
  animation-delay: 0.5s;
  font-weight: 600;
  font-size: 1.1em;
  line-height: 1.4;
}

/* Base primary button styles without animation */
.btn-primary {
  background: linear-gradient(90deg, #ff8c42, #ff6b35);
  color: #07121a;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(200,110,50,0.12);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Apply shimmer only to Join Waitlist and Request Early Access buttons */
.signup .btn-primary,
.demo-controls .btn-primary {
  background: linear-gradient(90deg, 
    #ff8c42 0%, 
    #ff6b35 25%, 
    #ffa500 50%, 
    #ff8c42 75%, 
    #ff6b35 100%);
  background-size: 200% auto;
  animation: shimmer-bg 4.5s ease-in-out infinite;
}

/* Different timing for Join Waitlist button */
.signup .btn-primary {
  animation-duration: 3.8s;
  animation-delay: 1.2s;
}

/* Different timing for Request Early Access button */
.demo-controls .btn-primary {
  animation-duration: 5.2s;
  animation-delay: 0.8s;
}

/* Apply shimmer to brand heading elements */
.brand-main {
  background: linear-gradient(90deg, 
    #ff8c42 0%, 
    #ff6b35 25%, 
    #ffa500 50%, 
    #ff8c42 75%, 
    #ff6b35 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4.2s ease-in-out infinite;
  animation-delay: 0.3s;
}

.brand-sub {
  background: linear-gradient(90deg, 
    #ff8c42 0%, 
    #ff6b35 25%, 
    #ffa500 50%, 
    #ff8c42 75%, 
    #ff6b35 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s ease-in-out infinite;
  animation-delay: 0.8s;
}

/* Apply shimmer to section titles */
.section-title {
  background: linear-gradient(90deg, 
    #ff8c42 0%, 
    #ff6b35 25%, 
    #ffa500 50%, 
    #ff8c42 75%, 
    #ff6b35 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3.7s ease-in-out infinite;
  animation-delay: 0.9s;
  text-align: center;
  font-size: 28px;
  margin-bottom: 28px;
}

/* Apply shimmer to card headings with staggered delays */
.card h3 {
  background: linear-gradient(90deg, 
    #ff8c42 0%, 
    #ff6b35 25%, 
    #ffa500 50%, 
    #ff8c42 75%, 
    #ff6b35 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4.8s ease-in-out infinite;
  margin: 0 0 8px;
}

/* Different timings for each card */
.card:nth-child(1) h3 {
  animation-duration: 4.3s;
  animation-delay: 0.2s;
}

.card:nth-child(2) h3 {
  animation-duration: 3.9s;
  animation-delay: 0.7s;
}

.card:nth-child(3) h3 {
  animation-duration: 5.1s;
  animation-delay: 0.4s;
}

.card:nth-child(4) h3 {
  animation-duration: 4.6s;
  animation-delay: 1s;
}

.card:nth-child(5) h3 {
  animation-duration: 3.5s;
  animation-delay: 0.6s;
}

.card:nth-child(6) h3 {
  animation-duration: 4.9s;
  animation-delay: 0.1s;
}

/* Mobile Responsive Styles */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .hero::before{left:50%;transform:translateX(-50%);background-position:center 20%;width:160%;}
  .demo-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .contact-inner{flex-direction:column;align-items:stretch;text-align:center;}
  .signup{flex-direction:column;gap:10px;}
}

@media(max-width:768px){
  /* General mobile adjustments */
  .container{padding:16px;}
  
  /* Navigation */
  .nav-inner{padding:12px 0;flex-wrap:wrap;}
  .logo-img{height:150px;} /* Increased from 120px */
  .nav-links{gap:10px;font-size:14px;}
  .nav-links a{font-size:14px;}
  .btn-outline{padding:6px 12px;font-size:14px;}
  
  /* Hero section */
  .hero{padding:40px 0;}
  .hero-copy h1{font-size:20px;}
  .brand-main{font-size:20px !important;}
  .brand-sub{font-size:20px !important;}
  .lead{font-size:16px;line-height:1.4;}
  
  /* Buttons */
  .cta-row{flex-direction:column;width:100%;}
  .btn-primary, .btn-secondary{width:100%;text-align:center;padding:14px 20px;}
  
  /* Pills */
  .pill-list{flex-wrap:wrap;justify-content:center;}
  .pill-list li{font-size:12px;padding:6px 10px;}
  
  /* Hero visual */
  .hero-visual{margin-top:30px;}
  .hero-visual .device{padding:12px;}
  
  /* Features */
  .features{padding:40px 0;}
  .section-title{font-size:24px !important;}
  .card{padding:16px;}
  .card h3{font-size:18px !important;}
  
  /* Demo section */
  .demo{padding:35px 0 30px;margin-top:12px;}
  .demo-controls{margin-top:20px;text-align:center;}
  .demo-controls .btn-primary{width:100%;max-width:300px;}
  
  /* Contact/Signup form */
  .contact{padding:30px 0;}
  .signup{flex-direction:column;gap:10px;width:100%;}
  .signup input, .signup select{width:100%;margin:0 !important;}
  .signup button{width:100%;}
  
  /* Footer */
  .site-footer{padding:20px 0;}
  .footer-inner{flex-direction:column;gap:16px;text-align:center;}
  .footer-tagline{font-size:1em;}
  .footer-tagline small{display:block;margin-top:8px;}
}

@media(max-width:480px){
  /* Extra small screens */
  .container{padding:12px;}
  
  /* Logo and navigation */
  .logo-img{height:120px;} /* Increased from 80px for better visibility */
  .nav-links{flex-direction:column;width:100%;margin-top:10px;}
  
  /* Hero */
  .hero{padding:30px 0;}
  .hero-copy h1{font-size:18px;}
  .brand-main{font-size:18px !important;}
  .brand-sub{font-size:18px !important;}
  .lead{font-size:14px;}
  
  /* Buttons */
  .btn-primary, .btn-secondary{font-size:14px;padding:12px 16px;}
  
  /* Code samples */
  .code-sample{font-size:11px;padding:8px;}
  .carousel-track{min-height:140px;}
  
  /* Features cards */
  .section-title{font-size:20px !important;margin-bottom:20px;}
  .card{padding:14px;}
  .card h3{font-size:16px !important;}
  .card p{font-size:14px;}
  
  /* Demo section */
  .chat-mock{padding:12px;}
  .message{padding:8px;font-size:14px;}
  
  /* Contact form elements */
  #email, #role{font-size:16px;} /* Prevent zoom on iOS */
  select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 10px center;background-size:20px;padding-right:40px;}
  
  /* Footer */
  .footer-tagline{font-size:0.9em !important;}
  .footer-tagline small{font-size:0.85em;}
}

/* Landscape mobile adjustments */
@media(max-width:812px) and (orientation:landscape){
  .hero{padding:20px 0;}
  .nav-inner{padding:8px 0;}
  .logo-img{height:100px;} /* Increased from 60px for landscape */
  .hero-visual{margin-top:20px;}
  .code-sample{font-size:10px;padding:6px;}
}