*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    }
    
    body{
    font-family:'Inter',sans-serif;
    background:#0a0a0a;
    color:#fff;
    overflow-x:hidden;
    user-select: none;
    }
    
    html{
        scroll-behavior:smooth;
      }

img {
  pointer-events: none;
}

.navbar{

  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);

  width: 85%;
  max-width: 1100px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 14px 30px;

  background: rgba(20,20,25,0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.12);

  box-shadow: 0 8px 30px rgba(0,0,0,0.35);

  z-index: 999;

  transition: all 0.3s ease;
}

.navbar.scrolled{
  background: rgba(10,10,15,0.9);
  border: 1px solid rgba(255,255,255,0.18);
}

.logo{
  color:#fff;
  font-weight:600;
  font-size:18px;
  letter-spacing:0.5px;
  text-decoration:none; 
}

.nav-links{
  display:flex;
  align-items:center;
  gap:25px;
}

.nav-links a{
  text-decoration:none;
  color:#fff;
  font-size:14px;
  opacity:0.85;
  transition:0.25s ease;
}

.nav-links a:hover{
  opacity:1;
}


.nav-links a.home:hover{ color:#aaa; }
.nav-links a.recorrido:hover{ color:#e60023; }
.nav-links a.dev:hover{ color:#e60023; }
.nav-links a.services1:hover{ color:#e60023; }
.nav-links a.studio:hover{ color:#e60023; }
.nav-links a.contact:hover{ color:#e60023; }

.menu-toggle{
  display:none;
  font-size:22px;
  color:#fff;
  cursor:pointer;
}

@media (max-width:768px){
  .navbar{
    width:92%;
    padding:12px 20px;
    position: fixed;
  }
  .menu-toggle{
    display:block;
    z-index:1002;
  }
  .navbar{
    position: fixed;
  }

  .nav-links{
    position: absolute;

    top: calc(100% + 10px);
    left: 0;
    width: 100%;

    background: rgba(15,15,20,0.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-radius: 25px;
    border: 1px solid rgba(255,255,255,0.08);

    padding: 30px 20px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:20px;

    opacity:0;
    transform: translateY(-10px) scale(0.98);
    pointer-events:none;

    transition: all 0.35s ease;

    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
  }

  .nav-links.active{
    opacity:1;
    transform: translateY(0) scale(1);
    pointer-events:auto;
  }

  .nav-links a{
    font-size:18px;
    color:#fff;
    text-decoration:none;
    font-weight:500;

    opacity:0.85;
    transform: translateY(10px);

    transition: all 0.3s ease;
  }

  .nav-links.active a{
    opacity:1;
    transform: translateY(0);
  }

  .nav-links.active a:nth-child(1){ transition-delay:0.05s; }
  .nav-links.active a:nth-child(2){ transition-delay:0.1s; }
  .nav-links.active a:nth-child(3){ transition-delay:0.15s; }
  .nav-links.active a:nth-child(4){ transition-delay:0.2s; }
  .nav-links.active a:nth-child(5){ transition-delay:0.25s; }

  .nav-links a:hover{
    opacity:1;
    transform: scale(1.05);
  }

  .nav-links a:active{
    transform: scale(0.95);
    opacity:0.6;
  }

}

.hero{
    display:flex;
    height:10vh;
    }
  
    .hero-left,
    .hero-right{
    
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:0.4s;
    
    }
    
.hero-right{

  position: relative;
  overflow: hidden;

  background: linear-gradient(120deg, #0f172a, #020617, #001f1f);
  background-size: 300% 300%;

  color: #00ffcc;
  transition: 0.4s ease;

}


.hero-right:hover{
  animation: codeFlow 10s ease infinite;
  
}

@keyframes codeFlow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

.hero-right h1{
  color: #00ffcc;
  transition: 0.4s;
}

.hero-right:hover h1{
  color: #00e0ff;
}

.hero-right p{
  color: rgba(0,255,204,0.7);
}

.hero-right::before{
  content: "";
  position: absolute;
  inset: 0;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,204,0.05) 0px,
    rgba(0,255,204,0.05) 1px,
    transparent 1px,
    transparent 3px
  );

  animation: scan 6s linear infinite;
  pointer-events: none;
}

@keyframes scan{
  0%{transform: translateY(-100%);}
  100%{transform: translateY(100%);}
}

.hero-right:hover{
  box-shadow:
    0 0 40px rgba(0,255,204,0.15),
    0 0 80px rgba(0,224,255,0.1);
}

    .hero-left{
    
    background:linear-gradient(120deg,#ff6b6b,#feca57,#48dbfb,#1dd1a1,#5f27cd);
    background-size:400% 400%;
    color:#fff;
    
    }
    
    .hero-left:hover{
    
    animation:colorFlow 8s ease infinite;
    color:#fff;
    
    }
 
    @keyframes colorFlow{
    
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
    
    }
    
    .hero-left h1{
    color:#fff;
    transition:0.4s;
    }
    
    .hero-left:hover h1{
    color:#fff;
    }

@media (max-width: 768px){

  .hero{
    flex-direction: column;
    height: auto;
  }

  .hero-left,
  .hero-right{
    width: 100%;
    height: 50vh;
    padding: 40px 20px;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .hero-left h1,
  .hero-right h1{
    font-size: 20px;
    line-height: 1.2;
  }

  .hero-left p,
  .hero-right p{
    font-size: 14px;
    max-width: 300px;
  }

  .hero-left:hover,
  .hero-right:hover{
    animation: none;
  }

  .hero-right{
    box-shadow: none;
  }

    
   @keyframes colorFlow{
    
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
    
    }

     .hero-left{
    
      background:linear-gradient(120deg,#ff6b6b,#feca57,#48dbfb,#1dd1a1,#5f27cd);
      background-size:400% 400%;
      color:#fff;
      
      }
    
      .hero-left:hover{
      
      animation:colorFlow 8s ease infinite;
      color:#fff;
      
      }

}

.hero-left,
.hero-right{
  gap: 10px;
}

.hero-left > *,
.hero-right > *{
  max-width: 400px;
}

.hero-left,
.hero-right{
  justify-content: center;
}

.work{
    background:#fff;
    padding:100px 8%;
    max-width:100%;
    margin:auto;
   
    background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    
    background-size:40px 40px;
    background-position:center;
    
    }
    
    .work h2{
    font-size:38px;
    margin-bottom:70px;
    letter-spacing:-1px;
    color:#666;
    font-weight:700;
    text-align: center;
    }

.icon {
  display: inline-block;
  font-size: 1.5rem;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

    .projects{
    
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:45px;
    
    }
 
    .project{
    
    display:block;
    text-decoration:none;
    color:inherit;
    
    background:#fff;
    border-radius:12px;
    padding:24px;
    
    box-shadow:
    0 1px 2px rgba(0,0,0,0.05),
    0 10px 30px rgba(0,0,0,0.08);
    
    transition:all .35s ease;
    
    position:relative;
    overflow:hidden;
    
    }
  
    .project:hover{
    
    transform:translateY(-8px);
    
    box-shadow:
    0 10px 40px rgba(0,0,0,0.12);
    
    }
    
    .project-image{
    
    width:100%;
    height:220px;
    overflow:hidden;
    border-radius:8px;
    margin-bottom:18px;
    
    }
    
    .project-image img{
    
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    
    transition:transform .6s ease;
    
    }
 
    .project:hover img{
    
    transform:scale(1.07);
    
    }

    .project h3{
    
    margin-top:8px;
    margin-bottom:6px;
    
    font-size:18px;
    font-weight:600;
    
    color:#555;
    
    transition:.3s;
    
    }
   
    .project:hover h3{
    
    color:#e60023;
    
    }
  
    .project p{
    
    font-size:14px;
    line-height:1.6;
    color:#666;
    
    transition:.3s;
    
    }
    
    .project:hover p{
    
    color:#444;
    
    }
  
    .project::after{
    
    content:"";
    position:absolute;
    
    left:0;
    bottom:0;
    
    width:0;
    height:3px;
    
    background:#e60023;
    
    transition:.35s;
    
    }
    
    .project:hover::after{
    
    width:100%;
    
    }
    
    
    @media (max-width:768px){
    
    .work{
    padding:100px 6%;
  
    }
    
    .work h2{
      font-size:28px;
      text-align:center;
      line-height:1.3;
    
    }
    
    .project-image{
    height:200px;
    }
    
    }

    .footer{

        background:#0f0f10;
        color:#fff;
        padding:90px 6% 30px;
        
        }
        
        .footer-container{
        
        max-width:1200px;
        margin:auto;
        
        display:grid;
        grid-template-columns:2fr 1fr 1fr;
        gap:60px;
        
        }
        
        .footer-profile{
        
        max-width:360px;
        
        }
        
        .footer-avatar{
        
        width:70px;
        height:70px;
        border-radius:50%;
        object-fit:cover;
        margin-bottom:15px;
        border:2px solid rgba(255,255,255,0.15);
        object-fit:cover;
        object-position:center 1%;
        
        transform:scale(1.2);
        }
        
        .footer-profile h3{
        
        font-size:20px;
        margin-bottom:4px;
        
        }
        
        .role{
        
        color:#aaa;
        font-size:14px;
        margin-bottom:20px;
        
        }
     
        .studio-title{
        
        font-size:28px;
        margin-bottom:10px;
        
        }
        
        .studio{
        
        color:#fff;
        
        }
        
        .rabbit{
        
        color:#ff2b2b;
        
        }
        
        .studio-desc{
        
        color:#aaa;
        line-height:1.6;
        margin-bottom:20px;
        
        }
        
        .footer-cta{
        
        display:inline-block;
        padding:12px 22px;
        background:#ff2b2b;
        color:white;
        text-decoration:none;
        border-radius:30px;
        font-size:14px;
        transition:0.3s;
        
        }
        
        .footer-cta:hover{
        
        background:#ff4c4c;
        
        }
      
        .footer-links h4,
        .footer-social h4{
        
        margin-bottom:18px;
        
        }
        
        .footer-links a,
        .footer-social a{
        
        display:block;
        color:#aaa;
        text-decoration:none;
        margin-bottom:10px;
        transition:0.3s;
        
        }
        
        .footer-links a:hover,
        .footer-social a:hover{
        
        color:#fff;
        transform:translateX(4px);
        
        }
      
        .footer-bottom{
        
        margin-top:70px;
        text-align:center;
        border-top:1px solid rgba(255,255,255,0.08);
        padding-top:25px;
        color:#777;
        font-size:13px;
        
        }
       
        @media (max-width:768px){
        
        .footer-container{
        
        grid-template-columns:1fr;
        gap:40px;
        text-align:center;
        
        }
        
        .footer-profile{
        
        margin:auto;
        
        }
        
        }
  
    .reveal{
    
    opacity:0;
    transform:translateY(40px);
    transition:0.8s;
    
    }
    
    .reveal.active{
    
    opacity:1;
    transform:translateY(0);
    
    }
  
    .loader{
        position: fixed;
        inset: 0;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        transition: opacity 0.5s ease;
      }
      
      .loader.hidden{
        opacity: 0;
        pointer-events: none;
      }
      
      .loader-content{
        text-align: center;
      }

      .loader-logo{
        font-size: 2rem;
        margin-bottom: 20px;
        letter-spacing: 3px;
      }
      
      .loader-bar{
        width: 260px;
        height: 4px;
        background: rgba(255,255,255,0.1);
        border-radius: 10px;
        overflow: hidden;
      }
      
      .loader-progress{
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, #00f0ff, #00ff9d, #00f0ff);
        background-size: 200%;
        animation: glowMove 2s linear infinite;
        transition: width 0.2s ease;
      }
      
      @keyframes glowMove{
        0%{ background-position: 0% }
        100%{ background-position: 200% }
      }


.services{
  padding:140px 0;
  background:#fff;
  font-family: 'Inter', sans-serif;
}


.services-header{
  text-align:center;
  max-width:700px;
  margin:auto;
  margin-bottom:80px;
}

.tag{
  color:#e60023;
  font-size:13px;
  letter-spacing:2px;
}

.services-header h2{
  font-size:42px;
  margin:20px 0;
  color:#0f0f0f;
}

.services-header h2 span{
  color:#e60023;
}

.services-header p{
  color:#aaa;
  font-size:18px;
}

.services-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding:0 20px;
}

.service-card{
  position:relative;
  padding:35px;
  border-radius:20px;

  background: linear-gradient(145deg, #111, #0a0a0a);
  border:1px solid rgba(255,255,255,0.06);

  transition: all 0.3s ease;
  text-decoration:none;
}

.service-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;

  background: linear-gradient(120deg, transparent, rgba(230,0,35,0.6), transparent);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity:0;
  transition:0.3s;
}

.icon{
  font-size:28px;
  margin-bottom:20px;
  color:#e60023;
}

.service-card h3{
  color:#fff;
  font-size:22px;
  margin-bottom:10px;
}

.service-card p{
  color:#aaa;
  font-size:15px;
  line-height:1.6;
}

.arrow{
  position:absolute;
  bottom:25px;
  right:25px;
  font-size:18px;
  color:#e60023;
  transition:0.3s;
}

.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}

.service-card:hover::before{
  opacity:1;
}

.service-card:hover .arrow{
  transform: translateX(6px);
}

@media(max-width:900px){
  .services-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .services-grid{
    grid-template-columns:1fr;
  }

  .services-header h2{
    font-size:32px;
  }
}
  

.contact-section{
  background:#f5f5f7;
  padding:120px 20px;
    
    background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    
    background-size:40px 40px;
    background-position:center;
    
}

.contact-wrapper{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.contact-info h2{
  font-size:42px;
  font-weight:700;
  letter-spacing:-1px;
  margin-bottom:20px;
  color: #666;
}

.contact-info p{
  color:#6e6e73;
  font-size:18px;
  max-width:420px;
  line-height:1.6;
}


.contact-island{
  background:rgba(255,255,255,0.6);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  border-radius:40px;
  padding:50px 40px;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);

  transition:0.4s;
}

.contact-island:hover{
  transform: translateY(-5px) scale(1.01);
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:30px;
}

.form-group{
  position:relative;
}

.form-group input,
.form-group textarea{
  width:100%;
  border:none;
  border-radius:18px;
  padding:18px 20px;
  font-size:16px;
  background:#fff;
  outline:none;

  box-shadow:
    inset 0 0 0 1px #e5e5e7,
    0 4px 12px rgba(0,0,0,0.04);

  transition:0.3s;
}

.form-group textarea{
  height:130px;
  resize:none;
}

.form-group input:focus,
.form-group textarea:focus{
  box-shadow:
    inset 0 0 0 2px #050505,
    0 10px 25px rgba(0,113,227,0.15);
}

.form-group label{
  position:absolute;
  left:20px;
  top:18px;
  color:#8e8e93;
  font-size:14px;
  pointer-events:none;
  transition:0.3s;
}

.form-group input:focus + label,
.form-group input:valid + label,
.form-group textarea:focus + label,
.form-group textarea:valid + label{
  top:-10px;
  left:14px;
  font-size:12px;
  background:#e60023;
  padding:2px 8px;
  border-radius:10px;
  color:#fff;
}

.contact-form button{
  margin-top:10px;
  padding:16px;
  border:none;
  border-radius:999px;

  background:linear-gradient(135deg, #ff1a3d, #e60023);
  color:#fff;
  font-weight:600;
  font-size:15px;

  cursor:pointer;
  position:relative;
  overflow:hidden;

  transition:0.3s;
}

.contact-form button:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 25px rgba(255, 81, 0, 0.3);
}

.contact-form button:active{
  transform: scale(0.97);
}

@media(max-width:900px){

  .contact-wrapper{
    grid-template-columns:1fr;
    gap:50px;
  }

  .contact-info h2{
    font-size:38px;
    text-align: center;
    color: #000;
  }

  .contact-info p{
    font-size:18px;
    text-align: center;
  }

  .contact-island{
    padding:35px 25px;
    border-radius:30px;
  }

}

  .projects-section{
    padding:160px 10%;
    background:#fff;
  
    background-image:
      linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  
    background-size:40px 40px;
    background-position:center;
  }

  .projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:40px;
  }

  .project-card{
    border:1px solid #eee;
    padding:30px;
    background:#fff;
    border-radius:16px;
    transition:0.3s;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
  }
  
  .project-image{
    height:200px;
    background:linear-gradient(135deg,#f5f5f5,#eaeaea);
    border-radius:10px;
    margin-bottom:20px;
  }

  .project-image img{
    width:100%;
    height:100%;
    object-fit:cover; 
  }
  
  .project-links{
    margin-top:20px;
    display:flex;
    gap:12px;
  }
  
  .project-links a{
    text-decoration:none;
    font-size:14px;
    padding:8px 16px;
    border-radius:6px;
    transition:0.25s;
  }
  

  .btn-web{
    background:#e60023;
    color:#fff;
  }
  
  .btn-web:hover{
    background:#fff;
    color:#e60023;
  }
  

  .btn-code{
    background:transparent;
    color:#000;
    border:1px solid #000;
  }
  
  .btn-code:hover{
    background:#e60023;
    color:#fff;
    border:1px solid #ddd;
  
  }

  .project-card h3{
    color:#1d1d1f;
    margin-bottom:8px;
    font-weight:600;
  }
  
  .project-card:hover p{
    color:#6e6e73;
    line-height:1.5;
    font-size:15px;
  }

  .project-card:hover h3{
    color:#e60023;
    margin-bottom:8px;
    font-weight:600;
  }
  
  .project-card p{
    color:#6e6e73;
    line-height:1.5;
    font-size:15px;
  }
  
  @media(max-width:900px){
  
    .projects-grid{
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    }
  
    .projects-header h1{
      font-size:36px;
    }
  
  }

.rabbit-card-section{

    display:flex;
    justify-content:center;
    align-items:center;
    padding:80px 0;
    background:#fff;
    max-width:100%;
    margin:auto;
    
    background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    
    background-size:40px 40px;
    background-position:center;
    
    }
    
    .rabbit-card {
    
    width:600px;
    height:300px;
    perspective:1400px;
    margin: 60px 40px; 
    }
    
    .rabbit-front,
    .rabbit-back{
    
    position:absolute;
    width:100%;
    height:100%;
    border-radius:16px;
    backface-visibility:hidden;
    overflow:hidden;
    
    }
    

    .rabbit-front{
    
    background:#000;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:20px;
    
    }
    
    .rabbit-logo{
    
    font-size:40px;
    font-weight:700;
    letter-spacing:2px;
    
    }
    
    .studio{
    
    color:#e60023;
    
    }
    
    .rabbit{
    
    color:#fff;
    
    }
    
    
    .dev-name{
    
    color:#ffffff;
    font-size:14px;
    
    }
    
    .rabbit-links{
    
    display:flex;
    gap:20px;
    
    }
    
    .rabbit-links a{
    
    text-decoration:none;
    color:#FFF;
    font-weight:500;
    
    }
    
    .rabbit-links a:hover{
    
    color:#e60023;
    
    }
  
    .flip-btn{
    
    padding:8px 18px;
    border:none;
    background:#020617;
    color:white;
    border-radius:20px;
    cursor:pointer;
    
    }

    .rabbit-avatar{
      width:100px;
      height:100px;
      border-radius:50%;
      object-fit:cover;
      border:2px solid rgba(255,255,255,0.2);
      box-shadow:0 8px 30px rgba(0,0,0,0.4);
      backdrop-filter:blur(4px);
    }

    @media (max-width:768px){
      .rabbit-avatar{
        width:70px;
        height:70px;
      }
    }
    
    .rabbit-back{
    
    transform:rotateY(180deg);
    background-image:url("../img/cardartdesign.png");
    background-size:cover;
    background-position:center;
    
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    padding:20px;
    
    }
    
    .back{
    
    background:rgba(0,0,0,.6);
    
    }
    
    @media (max-width:768px){
    
    .rabbit-card{
    
    width:100%;
    height:220px;
    
    }
    
    .rabbit-logo{
    
    font-size:28px;
    
    }
    
    }

    .rabbit-card-inner{
      width:100%;
      height:100%;
      position:relative;
      transform-style:preserve-3d;
      transition:transform .8s;
    

      transform: rotateY(180deg);
    }
    
  
    .rabbit-card.flip .rabbit-card-inner{
      transform: rotateY(0deg);
    }

.business-section{

    padding:140px 20px;
    background: #0a0a0a;
    position:relative;
    overflow:hidden;
    
    }
    
    .business-container{
    
    max-width:1100px;
    margin:auto;
    position:relative;
    z-index:2;
    
    }
 
    .business-content{
    
    background:#0a0a0a;
    border:1px solid #e60023;
    
    padding:60px;
    
    border-radius:10px;
    
    box-shadow:
    0 20px 50px rgba(0,0,0,.06);
    
    }
  
    .business-content h2{
    
    font-size:28px;
    margin-bottom:20px;
    color:#fff;
    
    }
   
    .business-content p{
    
    font-size:15px;
    color:#fff;
    max-width:700px;
    margin-bottom:30px;
    
    }

    .business-actions{
    
    display:flex;
    gap:16px;
    
    }
  
    
    .btn-outline{
    
    border:1px solid #e60023;
    
    padding:12px 26px;
    
    text-decoration:none;
    
    color:#fff;
    
    border-radius:4px;
    
    transition:.25s;
    
    }
    
    .btn-outline:hover{
    
    background:#0a0a0a;
    color:#fff;
    
    }

    @media(max-width:700px){
    
    .business-content{
    
    padding:40px;
    
    }
    
    .business-content h2{
    
    font-size:24px;
    
    }
    
    .business-actions{
    
    flex-direction:column;
    
    }
    
    }
    
    .timeline-line {
      position: absolute;
      left: 60px;
      top: 0;
      width: 2px;
      height: 0;
      background: linear-gradient(to bottom, #1dd1a1, transparent);
    }
    
    .timeline-item {
      position: relative;
      margin-bottom: 120px;
    }
    
    .timeline-dot {
      position: absolute;
      left: -60px;
      top: 15px;
      width: 14px;
      height: 14px;
      background: #1dd1a1;
      border-radius: 50%;
      box-shadow: 0 0 10px #1dd1a1;
      transition: 0.3s;
    }


    .timeline-wrapper{

        padding:120px 20px;
        max-width:1200px;
        margin:auto;
        
      
        }

        .timeline-header{
        text-align:center;
        margin-bottom:100px;
        
        }
        
        .timeline-header h2{
        font-size:42px;
        margin-bottom:10px;
        
        }
        
        .timeline-header p{
        opacity:.7;
        
        }
        
        .timeline-year{
        margin-bottom:120px;
        
        }
        
        .year-title{
        font-size:32px;
        margin-bottom:10px;
        color:#1dd1a1;
        
        }
        
        .year-description{
        max-width:700px;
        margin-bottom:40px;
        opacity:.8;
        
        }
        
        .projects-grid1 {
          display: grid;
          grid-template-columns: repeat(3, 1fr); 
          gap: 30px;
        }
        
        .project-card1 {
          background: #111;
          border-radius: 12px;
          overflow: hidden;
          transition: .3s;
          display: flex;
          flex-direction: column;
        }
        
        .project-card1 img {
          width: 100%;
          height: 200px;
          object-fit: cover;
        }
        
        .project-card1 span {
          padding: 16px;
          font-size: 14px;
          color: #ccc;
        }

        .project-card1:hover img {
          transform: scale(1.05);
        }
        
        .project-card1 img {
          transition: transform .4s ease;
        }

        
        @media (max-width:768px){
        
        .timeline-header h2{
        
        font-size:30px;
        
        }
        
        .year-title{
        
        font-size:26px;
        
        }
        
        }


@media (max-width: 1024px) {
  .projects-grid1 {
    grid-template-columns: repeat(2, 1fr);
  }
}


@media (max-width: 600px) {
  .projects-grid1 {
    grid-template-columns: 1fr;
  }
}

.timeline-line {
  box-shadow: 0 0 10px rgba(29, 209, 161, 0.5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.timeline-year {
  position: relative;
}

@media (max-width: 768px) {
  .timeline-wrapper {
    padding-left: 20px;
  }

  .timeline-dot {
    display: none;
  }

  .timeline-line {
    display: none;
  }
}

.case-section{
  padding:120px 0;
  .case-section{
    padding:120px 0;
  
    background:
      radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06), transparent 40%),
      radial-gradient(circle at 85% 30%, rgba(255,255,255,0.04), transparent 40%),
      radial-gradient(circle at 50% 80%, rgba(0,122,255,0.08), transparent 50%),
      linear-gradient(180deg, #0f0f10, #141416);
  
    position:relative;
    overflow:hidden;
  }

  position:relative;
  overflow:hidden;
}


.case-section::before{
  content:"";
  position:absolute;
  inset:0;
background-color: #fff;
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);

  background-size:40px 40px;
  background-position:center;

  z-index:0;
}

.case-study{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;

  position:relative;
  z-index:2;

  color:#e6e6e6;
}

.typo-header h2{
  text-align: center;
}

.project-title{
  font-size:40px;
  color:#384675;
  text-align: center;
}

.project-title2{
  font-size:40px;
  color:#7B2CBF;
  text-align: center;
}

.project-title3{
  font-size:40px;
  color:#007aff;
  text-align: center;
}

.project-title4{
  font-size:40px;
  color:#e60023;
  text-align: center;
}

.project-title5{
  font-size:40px;
  color:#3B8E7D;
  text-align: center;
}

.project-subtitle{
  margin-top:10px;
  max-width:500px;
  text-align:center;
  color:#666;
}

.project-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:20px;
  justify-content:center;
}

.project-meta span{
  font-size:12px;
  padding:8px 14px;
  border-radius:20px;
  color:#666;
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
}

.project-hero{
  display:flex;
  justify-content:center; 
  text-align:center;
  padding:120px 20px 60px;
}

.project-hero-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:700px; }


.project-section h2{
  font-size:28px;
  margin-bottom:20px;
  text-align: center;
  color:#888;
}


.ux-step,
.color-card,
.typography-card{
  background-color: #fff;
  border:1px solid #666;
  backdrop-filter:blur(12px);
  border-radius:20px;
}

.ux-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top: 24px;

}

.typography-card {
  margin-top: 24px;
}

.ux-step{
  padding:25px;
}

.ux-step h3{
  color:#888;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  
}

.ux-step p{
  color:#888;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  
}

.color-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.color-card{
  padding:20px;
  text-align:center;
}

.color-box{
  height:60px;
  border-radius:10px;
  margin-bottom:10px;
}


.color-card span {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  letter-spacing: 1px;
}

.color-card p {
  font-size: 13px;
  font-weight: 500;
  color: #888;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .color-card {
    width: 100%;
  }
}

.color-box {
  border: 1px solid var(--border);
}

.typography-card{
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.typo-preview{
  font-size:28px;
}

.typo-info h3{
  color:#888;
}

.typo-info span{
  color:#888;
}

.result-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

.open-modal-btn {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #384675;
}

.open-modal-btn2:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.open-modal-btn2 {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #7B2CBF;
}

.open-modal-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.open-modal-btn3:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.open-modal-btn3 {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #007aff;
}

.open-modal-btn4:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.open-modal-btn4 {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #e60023;
}

.open-modal-btn5:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.open-modal-btn5 {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #3B8E7D;
}

@media(min-width:1024px){

.project-hero{
  grid-template-columns:1.1fr 1fr;
  gap:80px;
  align-items:center;
}

.project-section{
  margin:120px 0;
}

.project-section h2{
  font-size:36px;
  color: #888;
  letter-spacing: -0.5px;
}

.ux-steps{
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

.color-palette{
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

.typography-card{
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}

.typo-preview{
  font-size:48px;
}

.result-grid{
  grid-template-columns:repeat(3,1fr);
  gap:50px;
}

.result-item img{
  height:100%;
  object-fit:cover;
}

}

@media (max-width:768px){
  .container,
  .project-section,
  .case-section{
    text-align:center;
  }

  @media (max-width: 768px) {

    .project-meta {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  
    .project-meta span {
      display: block;
      text-align: center;
    }
  
  }
}

@media (max-width:768px){

  .project-cover{
    margin:auto;
    border-radius:16px;
    height:220px;
  }

  .project-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

}

.project-section{
  margin-top: 120px;
}

@media (max-width:768px){
  .project-section{
    margin-top: 80px;
  }
}

.project-showcase{

  position:relative;

  padding:0 20px 120px;

  text-align:center;

}

.showcase-header h2{
  font-size:44px;
  font-weight:600;
  margin:0 0 10px;

}

.showcase-header p{
  color:#888;
  margin-top:10px;
  margin-bottom:100px;

}

.result-header p {
  color:#888;
}

.device-window{
  max-width:1000px;
  margin:0 auto;
  border-radius:20px;
  overflow:hidden;
  background:
  rgba(255,255,255,.6);
  backdrop-filter:blur(20px);
  box-shadow:
  0 30px 80px rgba(0,0,0,.12),
  0 10px 30px rgba(0,0,0,.08);
  transform-style:preserve-3d;
  transition:.5s ease;
  margin-bottom:180px;
}

.window-bar{
  display:flex;
  align-items:center;
  padding:12px 16px;
  background:
 linear-gradient(
 145deg,
 #2c2c2e,
 #050505
 );
}

.dots{
 display:flex;
 gap:8px;
}

.dot{
 width:12px;
 height:12px;
 border-radius:50%;
}

.red{
background:#ff5f57;
}

.yellow{
background:#febc2e;
}

.green{
background:#28c840;
}

.window-content img{
 width:100%;
 display:block;
}

.mobile-floating{
 position:absolute;
 right:6%;
 top:55%;
 z-index:5;
}


.iphone-frame{
 width:270px;
 height:560px;
 padding:9px;
 border-radius:55px;
 background:
 linear-gradient(
 145deg,
 #2c2c2e,
 #050505
 );
 box-shadow:
 inset 0 0 0 2px rgba(255,255,255,.18),
 0 50px 100px rgba(0,0,0,.55);
 position:relative;
}

.iphone-screen{
 width:100%;
 height:100%;
 overflow:hidden;
 border-radius:47px;
 background:#000;
}

.iphone-screen img{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}

.dynamic-island{
 position:absolute;
 top:22px;
 left:50%;
 transform:translateX(-50%);
 width:105px;
 height:32px;
 background:#000;
 border-radius:20px;
 z-index:3;
}

.iphone-frame::after{
 content:"";
 position:absolute;
 inset:0;
 border-radius:55px;
 background:
 linear-gradient(
 120deg,
 rgba(255,255,255,.22),
 transparent 35%
 );
 pointer-events:none;
}

.mockups-gallery{

  margin-top:320px; 

  flex-direction:column;

  align-items:center;

  gap:80px;

  max-width:1200px;

  margin-left:auto;

  margin-right:auto;

  overflow:hidden;

}

.mockups-gallery img{

  width:100%;

  max-width:1100px;

  display:block;

  border-radius:22px;

}

@media(min-width:1025px){

.mobile-floating{

  position:absolute;

  right:-6%;

  top:46%;

  transform:translateY(-50%);

}

}

@media(max-width:1024px){
.project-showcase{
display:flex;
flex-direction:column;
align-items:center;
}

.device-window{
width:90%;
}

.mobile-floating{
position:relative;
right:auto;
top:auto;
margin-top:-90px;
}

.iphone-frame{
width:220px;
height:450px;
}

}

@media(max-width:600px){

  .project-showcase{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:40px;
    padding:0 16px 120px;
  }

  @media(max-width:600px){

    .device-window{
      display:none;
    }
  
  }

  .showcase-header h2{
    font-size:28px;
  }

  .device-window{
    width:100%;
    border-radius:16px;
  }

  .window-bar{
    padding:10px;
  }

  .dot{
    width:9px;
    height:9px;
  }

  .mobile-floating{
    position:relative;
    margin-top:80px; 
    z-index:2;
    filter: drop-shadow(0 30px 40px rgba(0,0,0,0.25));
  }

  .iphone-frame{
    width:170px;   
    height:340px;
    border-radius:35px;
    padding:6px;
  }

  .iphone-screen{
    border-radius:30px;
  }

  .dynamic-island{
    width:65px;
    height:20px;
    top:14px;
  }

  .mockups-gallery{
    margin-top:120px;
    gap:30px;
  }

  .mockups-gallery img{
    width:100%;
  }

}

.related-projects2{
  padding-top:-40px;
  margin-top:0;
 
}

.related-header2{
  max-width:1200px;
  margin:auto;
  padding:0 30px;
  margin-bottom:60px;
}

.related-header2 h2{
  font-size:38px;
  letter-spacing:-2px;
  color:#888;
  text-align: center;
}

.related-header2 p{
  color:#888;
  font-size:20px;
  text-align: center;
}

.projects-carousel2{
  max-width:1200px;
  margin:auto;
  padding:0 30px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}

.project-card2{
background-color: #fff;
  border:1px solid #ccc;
  border-radius:35px;
  padding:20px;
  backdrop-filter:blur(25px);
  transition:.4s;
}

.project-image2{
  height:240px;
  border-radius:25px;
  overflow:hidden;
  background:#fff;
}

.project-image2 img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.project-info2{
  padding:25px 10px 10px;
}

.project-info2 h3{
  font-size:20px;
  color:#ccc;
  margin-bottom:10px;
}

.project-info2 a{
  color:#ccc;
  text-decoration:none;
  font-size:16px;
}

.proyect-info2 a:hover{
  color:#e60023;
}

  @media(max-width:700px){
    .related-projects2{
    padding:90px 0;
   
    }

    .related-header2 h2{
    font-size:32px;
    }

    @media(max-width:700px){

      .projects-carousel2{
        display: flex;
        overflow-x: auto;
        gap: 20px;
        padding: 0 20px;
        scroll-snap-type: x mandatory;
      }
    
      .project-card2{
        flex: 0 0 90%;
        scroll-snap-align: center;
      }
    
    }
    
    .project-image2{
    height:220px;
    }
    }

    .rabbit-signature{
      margin-top: -340px; 
      right: 80px; 
      display:flex;
      justify-content:flex-end;
      align-items:center;
      width:100%;
      pointer-events:none; 
    }

    .rabbit-signature img{
      width:420px;
      max-width:40vw;
      opacity:0.6;
      transition:0.4s ease;
      pointer-events:auto;
    }

    .rabbit-signature img:hover{
      opacity:1;
      transform:scale(1.03);
    }

    @media(max-width:768px){

      .rabbit-signature {
        position: relative;
        margin-top: -60px; 
        justify-content: center;
        align-items: center;
        z-index: 1;
        right: 10px;
       
      }
    
    
      .rabbit-signature img{
        width:300px;
        align-items: center;
      }
    
    }

    .rabbit-signature::before{

      content:"";
    
      position:absolute;
      width:500px;
      height:120px;
    
      filter:blur(40px);
      z-index:-1;
    
    }

.apple-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: flex-end;

  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
}

.apple-modal.active{
  opacity: 1;
  pointer-events: auto;
}


.apple-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
}

.apple-modal-sheet{
  position: relative;
  width: 100%;
  max-width: 900px;

  background: rgba(20,20,25,0.95);
  border-radius: 24px 24px 0 0;

  padding: 30px;

  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}

.apple-modal.active .apple-modal-sheet{
  transform: translateY(0);
}


.apple-modal-sheet.large{
  height: 85vh;
  display: flex;
  flex-direction: column;
}


.modal-handle{
  width: 40px;
  height: 4px;
  background: rgba(255,255,255,0.3);
  border-radius: 10px;
  margin: 0 auto 10px;
}


.modal-close{
  position: absolute;
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}


.modal-body{
  overflow-y: auto;
}

.modal-body p {
  text-align: center;
  margin-bottom: 20px;
}

.modal-body h2 {
  text-align: center;
  margin-bottom: 40px;
}

.modal-body h3 {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 40px;
}


.modal-img{
  width: 100%;
  border-radius: 12px;
  margin-top: 15px;
}


.ux-step{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tools-section{
  padding:100px 5%;
  text-align:center;
  overflow:hidden;
  position:relative;
  z-index:1;
  background: radial-gradient(circle at center, #ff7a00 0%, #ff3c00 40%, #b30000 100%);
}


.tools-section::before{
  content:"";
  position:absolute;
  inset:0;

  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);

  background-size:60px 60px;

  z-index:0;
  pointer-events:none;
}


.tools-section > *{
  position:relative;
  z-index:2;
}

@keyframes glow {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
  100% { filter: brightness(1); }
}

.tools-section{
  animation: glow 6s ease-in-out infinite;
}
    
    .tools-slider{
    
    width:100%;
    overflow:hidden;
    position:relative;
    
    }
  
    .tools-track{
    
    display:flex;
    gap:60px;
    width:max-content;
    animation:scrollTools 35s linear infinite;
    
    }
    
    
    .tools-track img{
    
    width:50px;
    transition:0.3s;
    
    }
    
    .tools-track img:hover{
    
    opacity:1;
    transform:scale(1.2);
    
    }
    
    @keyframes scrollTools{
    
    0%{
    
    transform:translateX(0);
    
    }
    
    100%{
    
    transform:translateX(-50%);
    
    }
    
    }

    .tech-list{
      margin-top:20px;
      padding-left:0;
      list-style:none;
      text-align: center;
    }
    
    .tech-list li{
      padding:10px 0;
      border-bottom:1px solid rgba(0,0,0,0.05);
      font-size:15px;
      color:#ccc;
      text-align: center;
    }
    
    .tech-list li strong{
      color:#fff;
      font-weight:600;
      text-align: center;
    }

 
.project-card1{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
  }
  

  .project-card1 button{
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    
    background: rgba(0,0,0,0.7);
    color: #fff;
    cursor: pointer;
    
    opacity: 0;
    transition: 0.3s;
  }
  

  .project-card1:hover button{
    opacity: 1;
  }
  

  .project-card1::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0);
    transition:0.3s;
  }
  
  .project-card1:hover::after{
    background:rgba(0,0,0,0.4);
  }
  

  .modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.9);
    justify-content:center;
    align-items:center;
    z-index:9999;
  }
  
  .modal img{
    max-width:90%;
    max-height:90%;
    border-radius:10px;
    box-shadow: 0 0 40px rgba(0,255,200,0.3);
  }
  

  .close{
    position:absolute;
    top:30px;
    right:40px;
    font-size:40px;
    color:#fff;
    cursor:pointer;
  }

  .figma-embed{
    width:100%;
    max-width:1200px;
    margin:60px auto;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.4);
  }
  
  .figma-embed iframe{
    width:100%;
    height:70vh;
    border:none;
  }


  .palette-section{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:80px;
    background:#0d0d0d;
    color:#fff;
  }

  .custom-soft {
    padding: 120px 20px;
    background: #f8fafc;
    text-align: center;
  }
  
  .custom-container {
    max-width: 1100px;
    margin: auto;
  }
  
  
  .custom-header h2 {
    font-size: 2.4rem;
    margin-bottom: 10px;
  }
  
  .custom-header p {
    color: #666;
  }
  
 
  .custom-grid {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  
  .custom-card {
    background: white;
    padding: 25px;
    border-radius: 18px;
    text-align: left;
    transition: 0.3s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  }
  
  .custom-card:hover {
    transform: translateY(-5px);
  }
  
  .custom-card.highlight {
    border: 2px solid #2563eb;
  }
  

  .custom-diff {
    margin-top: 70px;
  }
  
  .custom-diff h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
  }
  

  .custom-benefits {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  
  .benefit-box {
    background: white;
    padding: 20px;
    border-radius: 15px;
    font-size: 0.95rem;
  }
  

  .custom-cta {
    margin-top: 60px;
  }
  
  .custom-cta span {
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    color: #777;
  }
  

  @media(max-width: 900px){
    .custom-grid {
      grid-template-columns: 1fr;
    }
  
    .custom-benefits {
      grid-template-columns: 1fr;
    }
  }
    
  .auto-final-push {
    padding: 120px 20px;
    background: #020617;
    color: white;
    text-align: center;
  }
  
  .push-container {
    max-width: 900px;
    margin: auto;
  }
  

  .push-head h2 {
    font-size: 2.5rem;
    line-height: 1.3;
  }
  
  .push-head span {
    color: #2563eb;
  }
  

  .push-text {
    margin-top: 20px;
    color: #cbd5f5;
  }
  
  .push-text.strong {
    font-weight: 600;
    color: white;
  }
  

  .push-contrast {
    margin-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .contrast-box {
    background: #0f172a;
    padding: 25px;
    border-radius: 15px;
    width: 260px;
    text-align: left;
  }
  
  .contrast-box.highlight {
    background: white;
    color: #020617;
  }
  
  .contrast-box ul {
    margin-top: 15px;
    line-height: 1.8;
  }
  
  .vs {
    font-weight: bold;
    opacity: 0.6;
  }
  
 
  .push-cta {
    margin-top: 70px;
  }
  
  .push-cta h3 {
    font-size: 1.6rem;
  }
  
  .push-cta p {
    margin: 10px 0 25px;
    color: #cbd5f5;
  }

.cta-marketing{
  padding:120px 10%;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  position:relative;
  color:#fff;
  overflow:hidden;
}

.cta-marketing::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background: radial-gradient(circle, rgba(102,126,234,0.35), transparent 70%);
  top:-100px;
  left:-100px;
  filter: blur(80px);
}

.cta-marketing::after{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  background: radial-gradient(circle, rgba(118,75,162,0.35), transparent 70%);
  bottom:-100px;
  right:-100px;
  filter: blur(80px);
}

.cta-container{
  display:flex;
  flex-direction:column;
  gap:60px;
  align-items:center;
  text-align:center;
  position:relative;
  z-index:2;
}

.cta-text h2{
  font-size:42px;
  font-weight:600;
  margin-bottom:20px;
}

.cta-text p{
  max-width:600px;
  font-size:18px;
  opacity:0.9;
  margin:0 auto 30px;
}


.cta-text .highlight{
  background: linear-gradient(90deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-buttons{
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:wrap;
}

.btn-dark{
  background: linear-gradient(90deg, #667eea, #764ba2);
  color:#fff;
  padding:14px 30px;
  border-radius:30px;
  text-decoration:none;
  transition:0.3s;
  box-shadow: 0 10px 30px rgba(102,126,234,0.4);
}

.btn-dark:hover{
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(102,126,234,0.6);
}

.btn-outline{
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  padding:14px 30px;
  border-radius:30px;
  text-decoration:none;
  transition:0.3s;
}

.btn-outline:hover{
  background:#fff;
  color:#111;
}
    .pricing-section{
        padding: 120px 10%;
        background: #f5f5f7;
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
      }
      
      .pricing-header h2{
        font-size: 40px;
        font-weight: 600;
        margin-bottom: 10px;
        color:#666;
      }
      
      .pricing-header p{
        color: #6e6e73;
        max-width: 600px;
        margin: auto;
      }
      
      .pricing-grid{
        display: flex;
        gap: 30px;
        justify-content: center;
        margin-top: 60px;
        flex-wrap: wrap;
      }
      
      .pricing-card{
        background: #f77402;
        padding: 40px 30px;
        border-radius: 25px;
        width: 260px;
        text-align: center;
        transition: all 0.35s ease;
        border: 1px solid rgba(0,0,0,0.05);
        position: relative;
      }
      
      .pricing-card:hover{
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(0,0,0,0.08);
      }
      
      .featured{
        border: 2px solid #feca57;
        transform: scale(1.05);
      }
      
      .badge{
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: #feca57;
        color: #fff;
        padding: 6px 16px;
        border-radius: 20px;
        font-size: 12px;
      }
      
      .price{
        font-size: 42px;
        font-weight: 600;
        color: #feca57;
        margin: 10px 0;
      }
      
      .subtitle{
        color: #6e6e73;
        margin-bottom: 20px;
      }
      
      .pricing-card ul{
        list-style: none;
        padding: 0;
        margin-bottom: 30px;
      }
      
      .pricing-card li{
        margin: 10px 0;
        color: #1d1d1f;
        font-size: 14px;
      }
      
      .btn-primary{
        display: inline-block;
        padding: 12px 26px;
        border-radius: 30px;
        background: #feca57;
        color: #fff;
        text-decoration: none;
        font-size: 14px;
        transition: all 0.3s ease;
      }
      
      .btn-primary:hover{
        background: #aaa;
      }
      
      @media(max-width:768px){
        .pricing-grid{
          flex-direction: column;
          align-items: center;
        }
      }
    
.pricing1{
  padding:100px 6%;
  background:#fff;
  text-align:center;
}

.pricing-title{
  font-size:clamp(28px, 5vw, 42px);
  font-weight:600;
  margin-bottom:10px;
  color:#f77402;
}

.pricing-subtitle{
  color:#6e6e73;
  margin-bottom:50px;
  font-size:clamp(14px, 2vw, 18px);
}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:24px;
  align-items:stretch;
}

.pricing-card{
  background:#fff;
  backdrop-filter:blur(20px);
  border-radius:22px;
  padding:30px 24px;
  text-align:left;
  transition:0.35s ease;
  box-shadow:0 8px 25px rgba(0,0,0,0.05);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border: 2px solid #f77402;
}

.pricing-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,0.08);
}

.pricing-card{
  margin:0 auto;
}

.pricing-card h3{
  font-size:20px;
  margin-bottom:8px;
  color:#777;
}

.price{
  font-size:26px;
  font-weight:600;
  margin-bottom:20px;
  color:#f77402;
}

.pricing-card ul{
  list-style:none;
  padding:0;
  margin-bottom:25px;
}

.pricing-card li{
  margin-bottom:10px;
  font-size:14px;
  color:#555;
}

.btn{
  display:block;
  text-align:center;
  padding:14px;
  border-radius:12px;
  background:#f77402;
  color:#fff;
  text-decoration:none;
  font-weight:500;
  transition:0.3s;
  font-size:15px;
}

.btn:hover{
  background:#666;
  color:#f77402;
}

.featured{
  background:#fff;
  color:#f77402;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
}

.featured li{
  color:#f77402;
}

.featured .btn:hover{
  background:#555;
  color:#f77402;
}


@media (max-width:768px){

  .pricing{
    padding:70px 20px;
  }

  .pricing-grid{
    grid-template-columns:1fr;
  }

  .pricing-card{
    padding:25px 20px;
    text-align:center;
    align-items:center;
  }

  .price{
    font-size:24px;
  }

  .pricing-card ul{
    text-align:center;
  }


  .btn{
    width:100%;
    max-width:260px;
    margin:0 auto;
  }

  .featured{
    transform:none;
  }

}

    .cookie-banner{
      position:fixed;
      bottom:20px;
      left:50%;
      transform:translateX(-50%) translateY(100px);
      width:90%;
      max-width:720px;
      z-index:9999;
    
      opacity:0;
      transition:all .6s cubic-bezier(.22,1,.36,1);
    }
    
    .cookie-banner.show{
      transform:translateX(-50%) translateY(0);
      opacity:1;
    }
    
    .cookie-content{
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    
      background: rgba(255,255,255,0.75);
      border:1px solid rgba(255,255,255,0.3);
    
      border-radius:18px;
      padding:20px 24px;
    
      box-shadow:
        0 10px 30px rgba(0,0,0,0.1),
        inset 0 1px rgba(255,255,255,0.6);
    
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
    }
    
    .cookie-text h3{
      margin:0;
      font-size:16px;
    }
    
    .cookie-text p{
      margin:5px 0 0;
      font-size:14px;
      color:#555;
    }
    
    .cookie-actions{
      display:flex;
      gap:10px;
    }
    
    .btn{
      border:none;
      padding:10px 16px;
      border-radius:999px;
      cursor:pointer;
      font-size:14px;
      transition:0.3s;
    }
    

    .btn.primary{
      background:#000;
      color:#fff;
    }
    
    .btn.primary:hover{
      transform:scale(1.05);
    }
    

    .btn.ghost{
      background:transparent;
      border:1px solid rgba(0,0,0,0.2);
    }
    
    .btn.ghost:hover{
      background:rgba(0,0,0,0.05);
    }
    

    .btn.link{
      background:none;
      color:#007aff;
    }
    
    .btn.link:hover{
      text-decoration:underline;
    }
    
    @media(max-width:600px){
      .cookie-content{
        flex-direction:column;
        align-items:flex-start;
      }
    
      .cookie-actions{
        width:100%;
        justify-content:space-between;
      }
    }

    .lead-ultra{
      position:relative;
      padding:140px 8%;
      color:#fff;
      overflow:hidden;
      background-color: #555;
    }
    
    .container{
      position:relative;
      z-index:2;
      max-width:1200px;
      margin:auto;
      text-align:center;
    }
    
    .header1 h2{
      font-size:42px;
      color:#feca57;
    }
    
    .header1 p{
      color:#ccc;
      margin-top:10px;
    }
    
    .stats{
      display:flex;
      justify-content:space-around;
      margin:60px 0;
    }
    
    .stat h3{
      font-size:36px;
    }
 
.selector{
  margin:60px 0;
  color:#feca57;
}

input[type=range]{
  -webkit-appearance: none;
  width:300px;
  background: transparent;
}

input[type=range]::-webkit-slider-runnable-track{
  height:6px;
  background:#2a2a2a;
  border-radius:10px;
}

input[type=range]{
  background: linear-gradient(to right, #feca57 0%, #feca57 var(--value), #2a2a2a var(--value), #2a2a2a 100%);
  border-radius:10px;
  height:6px;
}

input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  background:#feca57;
  border-radius:50%;
  cursor:pointer;
  margin-top:-6px;
  box-shadow:0 0 12px rgba(254,202,87,0.7);
  transition:0.2s;
}

input[type=range]::-webkit-slider-thumb:hover{
  transform:scale(1.2);
}

input[type=range]::-moz-range-track{
  height:6px;
  background:#2a2a2a;
  border-radius:10px;
}

input[type=range]::-moz-range-thumb{
  width:18px;
  height:18px;
  background:#feca57;
  border:none;
  border-radius:50%;
  cursor:pointer;
}

.budget-value{
  margin-top:10px;
}

.recommendation{
  margin-top:20px;
  font-weight:500;
}

    .dashboard{
      display:flex;
      gap:20px;
      justify-content:center;
      margin-top:60px;
    }
    
    .dash-card{
      background:rgba(255,255,255,0.08);
      backdrop-filter:blur(20px);
      padding:25px;
      border-radius:20px;
      width:180px;
    }

    .lead-campaigns{
      padding:120px 8%;
      background:#fff;
      color:#111;
    }
    
    .container{
      max-width:1200px;
      margin:auto;
    }

    .section-header{
      text-align:center;
      margin-bottom:80px;
    }
    
    .section-header h2{
      font-size:40px;
      font-weight:600;
      margin-bottom:15px;
      color:#feca57;
    }
    
    .section-header p{
      color:#666;
      font-size:18px;
      max-width:600px;
      margin:auto;
    }
    
    .campaign-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:30px;
    }
    

    .campaign-card{
      background:#555;
      padding:30px;
      border-radius:20px;
      transition:0.4s;
      position:relative;
      overflow:hidden;
    }
    
    .campaign-card:hover{
      transform:translateY(-10px);
      box-shadow:0 20px 40px rgba(0,0,0,0.08);
    }
    
    .campaign-card .icon{
      font-size:28px;
      margin-bottom:20px;
    }
    
    .campaign-card h3{
      font-size:22px;
      margin-bottom:10px;
      color:#feca57;
    }
    
    .campaign-card p{
      font-size:15px;
      color:#fff;
      margin-bottom:15px;
    }
    
    .campaign-card ul{
      list-style:none;
      padding:0;
    }
    
    .campaign-card ul li{
      font-size:14px;
      margin-bottom:8px;
      color:#feca57;
    }
  
    .campaign-card.highlight{
      color:#feca57;
      border:3px solid #feca57;
    }

    .campaign-card.highlight p,
    .campaign-card.highlight li{
      color:#555;
    }
    
    .cta-box{
      text-align:center;
      margin-top:80px;
    }
    
    .cta-box h3{
      font-size:28px;
      margin-bottom:20px;
    }
    
    .cta-btn{
      display:inline-block;
      padding:14px 28px;
      background:#111;
      color:#fff;
      border-radius:30px;
      text-decoration:none;
      transition:0.3s;
    }
    
    .cta-btn:hover{
      background:#333;
    }
    
    @media(max-width:1024px){
      .campaign-grid{
        grid-template-columns:repeat(2,1fr);
      }
    }
    
    @media(max-width:768px){
      .campaign-grid{
        grid-template-columns:1fr;
      }
    
      .section-header h2{
        font-size:30px;
      }
    }

    .mini-form{
      margin-top:80px;
      padding:40px;
      border-radius:25px;
      background:#feca57;
      backdrop-filter:blur(25px);
      text-align:center;
    }
    
    .mini-form h3{
      margin-bottom:25px;
      font-size:24px;
    }
    
    .form-row{
      display:flex;
      gap:15px;
      margin-bottom:15px;
    }
    
    .form-row input,
    .form-row select{
      flex:1;
      padding:14px;
      border:none;
      border-radius:12px;
      outline:none;
      font-size:14px;
    }
   
    .mini-form button{
      margin-top:10px;
      padding:14px 30px;
      border:none;
      border-radius:30px;
      background:#000;
      color:#fff;
      cursor:pointer;
      font-weight:500;
      transition:0.3s;
    }
    
    .mini-form button:hover{
      transform:scale(1.05);
    }
    
    .form-msg{
      margin-top:10px;
      font-size:14px;
      color:#90ee90;
    }
    
    @media(max-width:768px){
      .form-row{
        flex-direction:column;
      }
    }

.carousel-section{
  padding:70px 0;
  overflow:hidden;
  position:relative;
}

.carousel-section::before,
.carousel-section::after{
  content:"";
  position:absolute;
  top:0;
  width:100px;
  height:100%;
  z-index:2;
  pointer-events:none;
}

.carousel-section::before{
  left:0;
  background:linear-gradient(to right, #0f0f0f, transparent);
}

.carousel-section::after{
  right:0;
  background:linear-gradient(to left, #0f0f0f, transparent);
}

.cta-carousel{
  width:100%;
  overflow:hidden;
}

.carousel-track{
  display:flex;
  align-items:center;
  gap:80px;
  width:max-content;
  animation:scroll 20s linear infinite;
}

.carousel-item{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.carousel-item img{
  width:60px;
  height:60px;
  object-fit:contain;

  opacity:0.6;
  filter:grayscale(100%) brightness(0.9);

  transition:all 0.3s ease;
}


.carousel-item:hover img{
  opacity:1;
  filter:grayscale(0%) brightness(1.1);
  transform:scale(1.15);
}

@keyframes scroll{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

.carousel-track:hover{
  animation-play-state: paused;
}

.auto-pro {
  padding: 120px 20px;
  background: #001f1f;
}

.auto-wrapper {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.auto-visual {
  position: relative;
}

.auto-mock {
  background: #0f172a;
  border-radius: 20px;
  padding: 20px;
  color: white;
  box-shadow: 0 30px 80px rgba(0,0,0,0.2);
}

.mock-header span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #334155;
  border-radius: 50%;
  margin-right: 5px;
}

.mock-content {
  margin-top: 20px;
}

.car-item {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.car-item.highlight {
  color: #22c55e;
}

.auto-float {
  position: absolute;
  background: white;
  padding: 10px 15px;
  border-radius: 12px;
  font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.stat1 {
  top: -20px;
  left: -20px;
}

.stat2 {
  bottom: -20px;
  right: -20px;
}

.auto-content h2 {
  font-size: 2.5rem;
  margin: 15px 0;
}

.auto-content h2 span {
  color: #2563eb;
}

.auto-tag {
  font-size: 0.8rem;
  background: #e0ecff;
  padding: 5px 10px;
  border-radius: 20px;
  color: #2563eb;
}

.auto-desc {
  color: #555;
  margin-bottom: 25px;
}

.auto-benefits-pro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 30px;
}

.benefit {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f9fafb;
  padding: 12px;
  border-radius: 12px;
}

.auto-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn-primary {
  background: #2563eb;
  color: white;
  padding: 14px 22px;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.3s;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.auto-proof {
  font-size: 0.85rem;
  color: #777;
}

@media(max-width: 900px){
  .auto-wrapper {
    grid-template-columns: 1fr;
  }

  .auto-benefits-pro {
    grid-template-columns: 1fr;
  }
}

.growth-section{
  padding:120px 6%;
  background:#666;
  color:#fff;
}

.growth-container{
  max-width:1300px;
  margin:auto;
}

.growth-title{
  font-size:42px;
  text-align:center;
  margin-bottom:10px;
}

.growth-subtitle{
  text-align:center;
  color:#f77402;
  margin-bottom:70px;
}

.growth-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
}

.growth-left h3{
  font-size:28px;
  margin-bottom:20px;
}

.growth-left p{
  color:#aaa;
  line-height:1.6;
  margin-bottom:25px;
}

.growth-benefits{
  list-style:none;
  padding:0;
  margin-bottom:30px;
}

.growth-benefits li{
  margin-bottom:12px;
}


.growth-btn{
  display:inline-block;
  padding:14px 28px;
  background:#f77402;
  color:#fff;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.growth-btn:hover{
  transform:scale(1.05);
}


.growth-right{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.growth-card{
  background:rgba(255,255,255,0.05);
  padding:25px;
  border-radius:18px;
  backdrop-filter:blur(10px);
  transition:0.3s;
}

.growth-card:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,0.08);
}

.growth-card h4{
  margin-bottom:10px;
}

.growth-card p{
  font-size:14px;
  color:#aaa;
}

.growth-card.highlight{
  background:linear-gradient(135deg,#ffffff20,#ffffff05);
  border:1px solid #f77402;
}

@media (max-width:900px){

  .growth-grid{
    grid-template-columns:1fr;
  }

  .growth-right{
    grid-template-columns:1fr;
  }

}


.modal-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(12px);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  visibility:hidden;
  transition:0.4s;
  z-index:9999;
}



.modal-overlay.active{
  opacity:1;
  visibility:visible;
}



.modal-box{
  width:90%;
  max-width:420px;
  background:#555;
  border:1px solid #f77402;
  border-radius:20px;
  padding:40px 30px;
  text-align:center;
  backdrop-filter:blur(20px);
  transform:translateY(30px) scale(0.95);
  transition:0.4s;
}

.modal-box1{
  width:90%;
  max-width:420px;
  background:#0f0f10;
  border:1px solid #e60023;
  border-radius:20px;
  padding:40px 30px;
  text-align:center;
  backdrop-filter:blur(20px);
  transform:translateY(30px) scale(0.95);
  transition:0.4s;
}

.modal-overlay.active .modal-box{
  transform:translateY(0) scale(1);
}

.modal-overlay.active .modal-box1{
  transform:translateY(0) scale(1);
}

.modal-box h2{
  margin-bottom:10px;
}
.modal-box1 h2{
  margin-bottom:10px;
}

.modal-box p{
  color:#f77402;
  font-size:14px;
  margin-bottom:25px;
}

.modal-box1 p{
  color:#fff;
  font-size:14px;
  margin-bottom:25px;
}


.modal-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.modal-form input{
  padding:12px;
  border-radius:10px;
  border:none;
  outline:none;
  background:rgba(255,255,255,0.05);
  color:#fff;
  border:1px solid #f77402;
}

.modal-form input::placeholder{
  color:#fff;
}

.modal-form button{
  margin-top:10px;
  padding:12px;
  border:none;
  border-radius:30px;
  background:#fff;
  color:#000;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.modal-form button:hover{
  transform:scale(1.05);
}

.modal-form1{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.modal-form1 input{
  padding:12px;
  border-radius:10px;
  border:none;
  outline:none;
  background:rgba(255,255,255,0.05);
  color:#fff;
  border:1px solid #646565;
}

.modal-form1 input::placeholder{
  color:#fff;
}

.modal-form1 button{
  margin-top:10px;
  padding:12px;
  border:none;
  border-radius:30px;
  background:#e60023;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:0.3s;
}

.modal-form1 button:hover{
  transform:scale(1.05);
}

.modal-close{
  position:absolute;
  top:15px;
  right:20px;
  font-size:22px;
  cursor:pointer;
  color:#aaa;
}

.modal-close:hover{
  color:#fff;
}


.modal-form textarea{
  padding:12px;
  border-radius:10px;
  border:none;
  outline:none;
  background:rgba(255,255,255,0.05);
  color:#fff;
  resize:none;
}

.modal-form textarea::placeholder{
  color:#777;
}

.modal-form1 textarea{
  padding:12px;
  border-radius:10px;
  border:none;
  outline:none;
  background:rgba(245, 243, 243, 0.05);
  color:#fff;
  resize:none;
}

.modal-form1 textarea::placeholder{
  color:#777;
}

.btn-outline{
  padding:12px 26px;
  border-radius:5px;
  color:#fff;
  background:#e60023;
  text-decoration:none;
  transition:0.3s;
}

.btn-outline:hover{
  background: #0a0a0a;
  color:#fff;
}

.modal-form input[type="date"],
.modal-form input[type="time"]{
  padding:12px;
  border-radius:10px;
  border:none;
  background:rgba(255,255,255,0.05);
  color:#aaa;
}

.scale-section{
  padding:120px 6%;
  background:#666;
  color:#fff;
  text-align:center;
}

.scale-container{
  max-width:1100px;
  margin:auto;
}

.scale-title{
  font-size:38px;
  margin-bottom:10px;
}

.scale-subtitle{
  color:#f77402;
  margin-bottom:60px;
}

.scale-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin-bottom:60px;
}

.scale-card{
  padding:35px;
  border-radius:18px;
  text-align:left;
}

.scale-card.weak{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  opacity:0.7;
}


.scale-card.strong{
  background:linear-gradient(135deg,#f77402,#ff9a3c);
  color:#fff;
}


.scale-card ul{
  list-style:none;
  padding:0;
  margin-top:20px;
}

.scale-card li{
  margin-bottom:12px;
}

.scale-cta p{
  color:#fff;
  margin-bottom:30px;
  margin-top: 20px;
}

.scale-cta-note{
  margin-top:15px;
  font-size:12px;
  color:#f77402;
  text-align:center;
  max-width:400px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.4;
}


.scale-btn{
  display:inline-block;
  padding:14px 30px;
  background:#f77402;
  color:#fff;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

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

@media (max-width:768px){

  .scale-grid{
    grid-template-columns:1fr;
  }

}

.pay-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(12px);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:0.3s;
  z-index:9999;
}

.pay-modal.active{
  opacity:1;
  pointer-events:auto;
}

.pay-box{
  background:#555;
  padding:40px;
  border-radius:20px;
  width:90%;
  max-width:400px;
  text-align:center;
  color:#fff;
  border:1px solid #f77402;
}

.pay-close{
  position:absolute;
  right:20px;
  top:15px;
  cursor:pointer;
}

.pay-options{
  margin-top:25px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pay-btn{
  padding:12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
}

.pay-btn.mp{
  background:#00a8ff;
  color:#fff;
}

.pay-btn.wa{
  background:#25D366;
  color:#fff;
}

.pay-btn.bank{
  background:#fff;
  color:#000;
}

.quote-modal{
  position:fixed;
  inset:0;
  background:rgba(63, 63, 63, 0.7);
  backdrop-filter:blur(12px);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:.3s;
}

.quote-modal.active{
  opacity:1;
  pointer-events:auto;
}

.quote-box{
  width:90%;
  max-width:420px;
  background:#555;
  border-radius:20px;
  padding:30px;
  color:#fff;
  overflow:hidden;
}

.progress-bar{
  height:4px;
  background:#fff;
  border-radius:10px;
  margin-bottom:20px;
}

.progress-fill{
  height:100%;
  width:0%;
  background:#f77402;
  transition:.4s;
}

.step{
  display:none;
  flex-direction:column;
  gap:10px;
  animation:fade .4s;
}

.step.active{
  display:flex;
}

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


.option{
  padding:12px;
  border-radius:12px;
  border:none;
  background:#f77402;
  color:#fff;
  cursor:pointer;
  transition:.3s;
}

.option:hover{
  background:#fff;
  color:#f77402;
}

#finalPrice{
  font-size:32px;
  margin:15px 0;
}

.quote-btn{
  padding:12px;
  background:#fff;
  color:#000;
  border-radius:20px;
  text-align:center;
  text-decoration:none;
}

.quote-box{
  position:relative; 
  width:90%;
  max-width:420px;
  background:rgba(20,20,20,0.85);
  border-radius:20px;
  padding:40px 25px 30px; 
  color:#fff;
  overflow:hidden;
}


.quote-close{
  position:absolute;
  top:15px;
  right:15px;
  font-size:18px;
  cursor:pointer;
  z-index:10;
  color:#aaa;
  transition:.3s;
}

.quote-close:hover{
  color:#fff;
  transform:scale(1.1);
}

.progress-bar{
  height:4px;
  background:#fff;
  border-radius:10px;
  margin-bottom:25px;
  margin-top:10px; 
  overflow:hidden;
}

.progress-fill{
  height:100%;
  width:0%;
  background:#f77402;
  transition:.4s;
}

.mk-lead-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9998; 
}

.mk-lead-modal.is-open{
  display:flex;
  align-items:center;
  justify-content:center;
}

.mk-lead-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.5);
}

.mk-lead-modal__box{
  position:relative;
  background:#fff;
  padding:30px;
  border-radius:16px;
  width:90%;
  max-width:450px;
  z-index:2;
  animation:leadFade 0.25s ease;
}

.mk-lead-modal__close{
  position:absolute;
  top:12px;
  right:12px;
  cursor:pointer;
  font-size:20px;
}

#formLead{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#formLead input,
#formLead textarea{
  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
}

#formLead button{
  padding:12px;
  border:none;
  background:#111;
  color:#fff;
  border-radius:8px;
  cursor:pointer;
}

@keyframes leadFade{
  from{
    opacity:0;
    transform:scale(0.95);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.auto-compare {
  padding: 120px 20px;
  background: #0f172a;
  color: white;
}

.compare-container {
  max-width: 1100px;
  margin: auto;
  text-align: center;
}

.compare-header h2 {
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.compare-header p {
  color: #cbd5e1;
}


.compare-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}


.compare-card {
  padding: 35px;
  border-radius: 20px;
  text-align: left;
  transition: 0.3s;
}


.compare-card.bad {
  background: #1e293b;
  opacity: 0.85;
}


.compare-card.good {
  background: white;
  color: #0f172a;
  transform: scale(1.05);
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}


.compare-label {
  font-size: 0.8rem;
  margin-bottom: 10px;
  opacity: 0.7;
}

.compare-label.highlight {
  color: #2563eb;
  font-weight: bold;
}


.compare-card ul {
  margin-top: 20px;
  line-height: 2;
}


.compare-cta {
  margin-top: 60px;
}

.compare-cta h4 {
  margin-bottom: 20px;
  font-weight: 400;
  color: #cbd5e1;
}


@media(max-width: 900px){
  .compare-grid {
    grid-template-columns: 1fr;
  }

  .compare-card.good {
    transform: none;
  }
}

.integrations-pro {
  padding: 100px 20px;
  background: #ffffff;
  overflow: hidden;
  text-align: center;
}

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.section-header p {
  color: #666;
  max-width: 600px;
  margin: auto;
}


.slider {
  margin-top: 60px;
  position: relative;
}


.slider::before,
.slider::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
}

.slider::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}

.slider::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}


.slide-track {
  display: flex;
  width: calc(250px * 12);
  animation: scroll 25s linear infinite;
}


.slider:hover .slide-track {
  animation-play-state: paused;
}


.slide {
  width: 250px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  margin: 0 10px;
  background: #f9fafb;
  border-radius: 18px;
  transition: 0.3s ease;
}

.slide img {
  width: 32px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: 0.3s;
}

.slide span {
  font-weight: 500;
  color: #333;
}


.slide:hover {
  transform: translateY(-5px);
  background: #ffffff;
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.slide:hover img {
  filter: grayscale(0%);
  opacity: 1;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.apple-demo {
  padding: 180px 20px; 
  background: linear-gradient(180deg, #f5f5f7, #ffffff);
}

.demo-container {
  max-width: 900px;
  margin: auto;
  text-align: center;
}


.demo-intro {
  margin-bottom: 60px;
}

.demo-label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0071e3;
  margin-bottom: 10px;
}

.demo-intro h2 {
  font-size: 2.2rem;
  margin-bottom: 15px;
}

.demo-intro p {
  max-width: 600px;
  margin: auto;
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
}


.apple-window {
  width: 420px;
  margin: auto;
  border-radius: 16px;
  background: white;
  box-shadow: 0 40px 100px rgba(0,0,0,0.12);
  overflow: hidden;
  animation: float 6s ease-in-out infinite;
}


.window-header {
  height: 38px;
  background: #f1f1f3;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
}

.dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
}

.red { background: #ff5f57; }
.yellow { background: #febc2e; }
.green { background: #28c840; }

.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #555;
}


.window-body {
  padding: 40px 30px;
}


.login-box h3 {
  margin-bottom: 5px;
}

.login-box p {
  font-size: 0.9rem;
  color: #777;
  margin-bottom: 25px;
}


.input-group input {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.input-group input:focus {
  border-color: #0071e3;
  box-shadow: 0 0 0 3px rgba(0,113,227,0.1);
}


.login-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: #0071e3;
  color: white;
}


.demo-foot {
  margin-top: 50px;
}

.demo-foot p {
  font-size: 0.95rem;
  color: #888;
}

.dash-window {
  width: 900px;
  height: 520px;
  margin: 20px auto 0;
  border-radius: 18px;
  background: white;
  box-shadow: 0 40px 100px rgba(0,0,0,0.12);
  overflow: hidden;
  transition: 0.4s;
}

.dash-window:hover {
  transform: scale(1.01);
}


.dash-header {
  height: 38px;
  background: #f1f1f3;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
}

.dash-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
}

.dash-red { background: #ff5f57; }
.dash-yellow { background: #febc2e; }
.dash-green { background: #28c840; }

.dash-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #555;
}


.dash-body {
  display: flex;
  height: 100%;
}


.dash-sidebar {
  width: 220px;
  background: #0f172a;
  color: white;
  padding: 20px;
}

.dash-profile {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
}

.dash-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0071e3, #00c6ff);
  margin-right: 10px;
}

.dash-profile span {
  font-size: 0.75rem;
  opacity: 0.7;
}

.dash-sidebar ul li {
  margin: 12px 0;
  font-size: 0.9rem;
  opacity: 0.7;
  cursor: pointer;
  transition: 0.2s;
}

.dash-sidebar ul li:hover {
  opacity: 1;
}

.dash-sidebar ul li.active {
  opacity: 1;
  font-weight: 500;
}


.dash-main {
  flex: 1;
  padding: 25px;
  background: #f8fafc;
  overflow-y: auto;
}


.dash-topbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.dash-status {
  font-size: 0.8rem;
  color: #22c55e;
}


.dash-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 25px;
}

.dash-metric {
  background: white;
  padding: 18px;
  border-radius: 12px;
}

.dash-metric span {
  font-size: 0.75rem;
  color: #666;
}

.dash-metric strong {
  font-size: 1.5rem;
  display: block;
  margin-top: 5px;
}


.dash-item {
  background: white;
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.dash-item strong {
  display: block;
  font-size: 0.9rem;
}

.dash-item span {
  font-size: 0.8rem;
  color: #666;
}

.dash-item.highlight {
  border-left: 4px solid #22c55e;
}

@media (max-width: 1024px) {

  .apple-demo {
    padding: 120px 20px;
  }

  .demo-intro h2 {
    font-size: 1.9rem;
  }

 
  .apple-window {
    width: 360px;
  }

 
  .dash-window {
    width: 95%;
    height: auto;
  }

  .dash-body {
    flex-direction: column;
  }

  .dash-sidebar {
    width: 100%;
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 15px;
  }

  .dash-sidebar ul {
    display: flex;
    gap: 15px;
  }

  .dash-sidebar ul li {
    white-space: nowrap;
    font-size: 0.8rem;
  }

  .dash-main {
    padding: 20px;
  }

  .dash-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 600px) {

  .apple-demo {
    padding: 90px 15px;
  }

  .demo-intro {
    margin-bottom: 40px;
  }

  .demo-intro h2 {
    font-size: 1.6rem;
  }

  .demo-intro p {
    font-size: 0.95rem;
  }


  .apple-window {
    width: 100%;
    max-width: 320px;
  }

  .window-body {
    padding: 30px 20px;
  }


  .dash-window {
    width: 100%;
    border-radius: 14px;
  }

  .dash-header {
    height: 34px;
  }

  .dash-sidebar {
    flex-direction: column;
    align-items: flex-start;
  }

  .dash-profile {
    margin-bottom: 15px;
  }

  .dash-sidebar ul {
    flex-wrap: wrap;
  }

  .dash-sidebar ul li {
    font-size: 0.75rem;
  }

  .dash-main {
    padding: 15px;
  }

  .dash-topbar span:first-child {
    font-size: 0.9rem;
  }


  .dash-metrics {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .dash-metric strong {
    font-size: 1.3rem;
  }

 
  .dash-item {
    padding: 12px;
  }

}

.dash-window {
  backdrop-filter: blur(20px);
}

.apple-window {
  backdrop-filter: blur(20px);
}

.pipe-demo {
  padding: 160px 20px;
  background: linear-gradient(180deg, #ffffff, #f5f5f7);
}

.pipe-container {
  max-width: 1100px;
  margin: auto;
  text-align: center;
}


.pipe-intro {
  margin-bottom: 60px;
}

.pipe-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #0071e3;
  letter-spacing: 1px;
}

.pipe-intro h2 {
  font-size: 2.2rem;
  margin: 10px 0;
}

.pipe-intro p {
  max-width: 600px;
  margin: auto;
  color: #666;
}


.pipe-window {
  border-radius: 18px;
  background: white;
  box-shadow: 0 40px 100px rgba(0,0,0,0.12);
  overflow: hidden;
  backdrop-filter: blur(20px);
}


.pipe-header {
  height: 38px;
  background: #f1f1f3;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
}

.pipe-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
}

.pipe-red { background: #ff5f57; }
.pipe-yellow { background: #febc2e; }
.pipe-green { background: #28c840; }

.pipe-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: #555;
}


.pipe-body {
  display: flex;
  gap: 20px;
  padding: 25px;
  overflow-x: auto;
}


.pipe-col {
  min-width: 220px;
  background: #f8fafc;
  border-radius: 12px;
  padding: 15px;
  text-align: left;
}

.pipe-col h4 {
  font-size: 0.9rem;
  margin-bottom: 10px;
}


.pipe-card {
  background: white;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  transition: 0.2s;
}

.pipe-card:hover {
  transform: translateY(-3px);
}

.pipe-card strong {
  display: block;
  font-size: 0.9rem;
}

.pipe-card span {
  font-size: 0.75rem;
  color: #666;
}


.pipe-card.highlight {
  border-left: 4px solid #0071e3;
}

.pipe-card.success {
  border-left: 4px solid #22c55e;
}


.pipe-foot {
  margin-top: 40px;
  color: #888;
}

@media (max-width: 1024px) {

  .pipe-demo {
    padding: 120px 20px;
  }

  .pipe-body {
    gap: 15px;
  }

  .pipe-col {
    min-width: 200px;
  }

}

@media (max-width: 600px) {

  .pipe-demo {
    padding: 90px 15px;
  }

  .pipe-intro h2 {
    font-size: 1.6rem;
  }

  .pipe-intro p {
    font-size: 0.95rem;
  }

  .pipe-body {
    padding: 15px;
    gap: 12px;
  }

  .pipe-col {
    min-width: 180px;
    padding: 12px;
  }

  .pipe-card {
    padding: 10px;
  }

}

.chat-demo {
  padding: 160px 20px;
  background: linear-gradient(180deg, #f5f5f7, #ffffff);
}

.chat-container {
  max-width: 1000px;
  margin: auto;
  text-align: center;
}


.chat-intro {
  margin-bottom: 60px;
}

.chat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #0071e3;
}

.chat-intro h2 {
  font-size: 2.2rem;
  margin: 10px 0;
}

.chat-intro p {
  max-width: 600px;
  margin: auto;
  color: #666;
}

.chat-window {
  border-radius: 18px;
  background: white;
  box-shadow: 0 40px 100px rgba(0,0,0,0.12);
  overflow: hidden;
}


.chat-header {
  height: 38px;
  background: #f1f1f3;
  display: flex;
  align-items: center;
  padding: 0 12px;
  position: relative;
}

.chat-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
}

.chat-red { background: #ff5f57; }
.chat-yellow { background: #febc2e; }
.chat-green { background: #28c840; }

.chat-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
}

.chat-body {
  display: flex;
  height: 400px;
}


.chat-sidebar {
  width: 180px;
  background: #0f172a;
  color: white;
  padding: 15px;
}

.chat-user {
  padding: 10px;
  font-size: 0.85rem;
  opacity: 0.7;
  cursor: pointer;
}

.chat-user.active,
.chat-user:hover {
  opacity: 1;
}


.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}


.chat-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.msg {
  max-width: 70%;
  margin-bottom: 10px;
}

.msg span {
  display: inline-block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
}

.msg.me {
  margin-left: auto;
  text-align: right;
}

.msg.me span {
  background: #0071e3;
  color: white;
}

.msg.other span {
  background: white;
}


.chat-input {
  display: flex;
  padding: 10px;
  background: white;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.chat-input button {
  margin-left: 10px;
  padding: 10px 15px;
  border: none;
  background: #0071e3;
  color: white;
  border-radius: 8px;
}


@media (max-width: 600px) {

  .chat-body {
    flex-direction: column;
    height: auto;
  }

  .chat-sidebar {
    width: 100%;
    display: flex;
    overflow-x: auto;
  }

  .chat-main {
    height: 300px;
  }

}

.srv-section {
  background: #f5f5f7;
  padding: 120px 0;
}

.srv-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}


.srv-header {
  text-align: center;
  margin-bottom: 80px;
}

.srv-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #999;
  margin-bottom: 12px;
}

.srv-title {
  font-family: 'Syne', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: #1d1d1f;
  margin-bottom: 16px;
}

.srv-title span {
  color: #ff3b30;
}

.srv-subtitle {
  font-size: 16px;
  color: #6e6e73;
  max-width: 520px;
  margin: auto;
  line-height: 1.7;
}

.srv-row {
  margin-bottom: 16px;
}

.srv-trigger {
  background: #ffffff;
  border-radius: 16px;
  padding: 26px 24px;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.srv-trigger:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}


.srv-trigger--web:hover {
  background: #ff3b30;
}
.srv-trigger--web:hover .srv-name,
.srv-trigger--web:hover .srv-desc,
.srv-trigger--web:hover .srv-num,
.srv-trigger--web:hover .srv-chevron {
  color: #fff;
}

.srv-trigger--dev:hover {
  background: #0a84ff;
}
.srv-trigger--dev:hover .srv-name,
.srv-trigger--dev:hover .srv-desc,
.srv-trigger--dev:hover .srv-num,
.srv-trigger--dev:hover .srv-chevron {
  color: #fff;
}


.srv-trigger--shop:hover {
  background: #34c759;
}
.srv-trigger--shop:hover .srv-name,
.srv-trigger--shop:hover .srv-desc,
.srv-trigger--shop:hover .srv-num,
.srv-trigger--shop:hover .srv-chevron {
  color: #fff;
}


.srv-trigger--landing:hover {
  background: #ff9f0a;
}
.srv-trigger--landing:hover .srv-name,
.srv-trigger--landing:hover .srv-desc,
.srv-trigger--landing:hover .srv-num,
.srv-trigger--landing:hover .srv-chevron {
  color: #fff;
}


.srv-trigger--mobile:hover {
  background: #bf5af2;
}
.srv-trigger--mobile:hover .srv-name,
.srv-trigger--mobile:hover .srv-desc,
.srv-trigger--mobile:hover .srv-num,
.srv-trigger--mobile:hover .srv-chevron {
  color: #fff;
}


.srv-trigger--seo:hover {
  background: #1d1d1f;
}
.srv-trigger--seo:hover .srv-name,
.srv-trigger--seo:hover .srv-desc,
.srv-trigger--seo:hover .srv-num,
.srv-trigger--seo:hover .srv-chevron {
  color: #fff;
}


.srv-num {
  font-size: 32px;
  font-weight: 700;
  color: #d2d2d7;
}

.srv-name {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
}

.srv-desc {
  font-size: 14px;
  color: #6e6e73;
}

.srv-badge {
  background: #f2f2f2;
  color: #6e6e73;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
}

.srv-chevron {
  font-size: 20px;
  color: #999;
}


.srv-panel {
  overflow: hidden;
  transition: all 0.4s ease;
}


.srv-inner {
  margin-top: 10px;
  border-radius: 16px;
  padding: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr 220px;
  gap: 30px;
  transition: all 0.4s ease;
}

.srv-row.open .srv-inner {
  background: rgba(28, 28, 30, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 
    0 10px 40px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.05);

  color: #fff;
}


.srv-row.open .srv-inner li,
.srv-row.open .srv-inner p {
  color: rgba(255,255,255,0.85);
}

.srv-row.open .srv-block-title {
  color: rgba(255,255,255,0.5);
}


.srv-price-box {
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.08);
}


.srv-price {
  font-size: 26px;
  color: #30d158;
  font-weight: 600;
}


.srv-cta-btn {
  background: #ffffff;
  color: #000;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  display: block;
  margin-top: 14px;
  transition: all 0.25s ease;
  text-decoration: none;
  font-weight: 500;
}

.srv-cta-btn:hover {
  background: rgba(255,255,255,0.85);
  transform: translateY(-1px);
}


.srv-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.srv-row.open .srv-chevron {
  transform: rotate(180deg);
  color: #ff3b30;
}


@media (max-width: 560px) {
  .srv-section { padding: 120px 0; }
  .srv-container { padding: 0 14px; }
  .srv-header { margin-bottom: 40px; }
  .srv-title { font-size: 28px; }
  .srv-subtitle { font-size: 14px; }

  .srv-trigger {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 18px;
    border-radius: 22px;
  }

  .srv-inner {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 20px 18px 24px;
  }

  .srv-price-box {
    order: -1;
  }

  .srv-price {
    font-size: 38px;
  }
}



@media (max-width: 560px) {


  .srv-col {
    text-align: center;
  }

  
  .srv-block-title {
    text-align: center;
  }

  
  .srv-features,
  .srv-steps {
    padding: 0;
    list-style-position: inside;
    text-align: center;
  }

 
  .srv-features li,
  .srv-steps li {
    text-align: center;
  }

 
  .srv-features li,
  .srv-steps li {
    max-width: 280px;
    margin: 0 auto;
  }
}


.srv-block-title {
  font-size: 13px;
  letter-spacing: 0.05em;
}


.srv-features li,
.srv-steps li {
  font-size: 14px;
  line-height: 1.5;
}


.srv-inner p {
  font-size: 14px;
}


.srv-price {
  font-size: 22px;
}


.srv-price-note {
  font-size: 12px;
  opacity: 0.7;
}


.srv-cta-btn {
  font-size: 13px;
  padding: 10px;
}

.edu-section {
  background: #0f0f10;
  padding: 100px 20px;
}

.edu-container {
  max-width: 1100px;
  margin: 0 auto;
}

.edu-header {
  text-align: center;
  margin-bottom: 60px;
}

.edu-label {
  letter-spacing: 2px;
  font-size: 12px;
  color: #888;
}

.edu-title {
  font-size: 36px;
  margin: 10px 0;
  font-weight: 600;
}

.edu-subtitle {
  color: #666;
  font-size: 16px;
}

.edu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.edu-card {
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,180,80,0.9) 0%, rgba(255,120,0,0.8) 25%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(255,80,0,0.8) 10%, rgba(200,30,0,0.9) 40%, transparent 70%),
    radial-gradient(circle at center, #330000 60%, #120000 100%);
    
  border-radius: 18px;
  padding: 30px;
  transition: all 0.4s ease;
  border: 1px solid rgba(255,120,0,0.2);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.edu-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 40px rgba(255,80,0,0.3),
    inset 0 0 60px rgba(255,120,0,0.2);
}

.edu-card::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(255,120,0,0.2),
    rgba(255,0,0,0.3),
    transparent
  );
  animation: spin 12s linear infinite;
  z-index: 0;
}

.edu-card > * {
  position: relative;
  z-index: 1;
}

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

.edu-icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.edu-card h3 {
  margin: 10px 0 5px;
  font-size: 18px;
  color:#fff;
}

.edu-institution {
  color: #fff;
  font-size: 14px;
}

.edu-status {
  display: inline-block;
  margin-top: 15px;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eaeaea;
  color: #444;
}

.edu-status.completed {
  background: #dff5e1;
  color: #1f7a3a;
}


@media (max-width: 900px) {
  .edu-grid {
    grid-template-columns: 1fr;
  }

  .edu-title {
    font-size: 28px;
  }
}


.carousel-track {
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
}


.carousel-content {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: scrollLoop 25s linear infinite;
}


.carousel-track:hover .carousel-content {
  animation-play-state: paused;
}


@keyframes scrollLoop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.related-card {
  min-width: 280px;
  flex: 0 0 auto;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  text-decoration: none;
  transition: all 0.3s ease;
}


.related-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}


.related-card span {
  display: block;
  padding: 16px;
  font-size: 15px;
  font-weight: 500;
  color: #1d1d1f;
}


.related-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.studio1{
  background:#000;
  color:#fff;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.studio-hero{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  text-align:center;
  overflow:hidden;
  --zoom: 1;
  --move: 0px;
}

.studio-hero::before{
  content:"";
  position:absolute;
  inset:0;

  background:url("../img/madriguera.png") center/cover no-repeat;

  transform: scale(var(--zoom)) translateY(var(--move));
  transform-origin: center;
  will-change: transform;
  z-index:0;
  filter: brightness(1.1) contrast(1.1);
}


.studio-overlay{
  position:absolute;
  inset:0;
  z-index:1;
}

.studio-hero-content{
  position:relative;
  z-index:2;
  max-width:900px;
  padding:0 20px;
}

.studio-hero h1 {
  font-size: 50px;
  letter-spacing: -1px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.6);
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.8),
    rgba(255,255,255,0.2)
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.studio-hero p{
  color:#fff;
  font-size:20px;
  margin-top:10px;
}

@media(max-width:900px){

  .studio-hero h1{
    font-size:34px;
  }

  .studio-hero p{
    font-size:16px;
  }

}

.studio-tools{
  padding:120px 60px;
  text-align:center;
}

.studio-tools h2{
  font-size:40px;
  margin-bottom:50px;
}

.tools-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  max-width:600px;
  margin:auto;
}

.tool{
  padding:25px;
  border-radius:20px;

  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);

  backdrop-filter:blur(12px);

  transition:0.3s;
}

.tool:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,0.1);
}

.studio-creator{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  padding:120px 60px;
  align-items:center;
  max-width:1200px;
  margin:0 auto; 
}

.creator-img{
  display:flex;
  justify-content:center;
}

.creator-img img{
  width:100%;
  max-width:500px;
  border-radius:24px;
}

.creator-text{
  text-align:left;
}

.creator-text h2{
  font-size:40px;
  margin-bottom:20px;
}

.creator-text p{
  color:#aaa;
  line-height:1.6;
  margin-bottom:10px;
  max-width:500px; 
}


.creator-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin-top:30px;
  max-width:500px;
}

.creator-stats div{
  padding:20px;
  border-radius:18px;

  background:rgba(255,255,255,0.05);
  border:1px solid #ff7a00;

  backdrop-filter:blur(10px);

  text-align:center;
}

.creator-stats h3{
  font-size:20px;
  margin-bottom:5px;
  color:#ccc;
}


.flip-card {
  width: 100%;
  max-width: 320px; 
  perspective: 1000px;
}


.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}


.flip-front,
.flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
}


.flip-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.flip-back {
  transform: rotateY(180deg);
}

.flip-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-img {
  display: flex;
  justify-content: center;
}

.flip-card {
  height: 400px; 
}

@media(max-width:900px){

  .studio-creator{
    grid-template-columns:1fr;
    padding:80px 20px;
    text-align:center; 
  }

  .creator-text{
    text-align:center;
  }

  .creator-text p{
    margin:0 auto 10px; 
  }

  .creator-stats{
    grid-template-columns:1fr;
    max-width:100%;
  }

  .creator-img img{
    max-width:100%;
  }

}

.case-section1{
  background:#000;
  padding:120px 20px;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);

  background-size:40px 40px;
  background-position:center;
}

.hero-rabbit{
  position:relative;
  height:100vh;
  width:100%;
  background-image:url("../img/lab.png"); 
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:800px;
  padding:20px;
}

.hero-content h1{
  font-size:56px;
  margin-bottom:20px;
}

.hero-content p{
  font-size:18px;
  opacity:0.8;
  margin-bottom:30px;
}

.hero-btn{
  display:inline-block;
  padding:14px 28px;
  background:#0a84ff;
  color:#fff;
  border-radius:30px;
  text-decoration:none;
  transition:0.3s;
}

.hero-btn:hover{
  transform:translateY(-3px);
}

.btn-dev{
  background:#e60023;
  color:#fff;
  border:none;
  padding:14px 28px;
  border-radius:12px;
  font-size:16px;
  cursor:pointer;
  transition:0.3s;
}

.btn-dev:hover{
  transform:scale(1.05);
  background:#ff0033;
}


.dev-modal{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}


.dev-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(8px);
}


.dev-box{
  position:relative;
  background:rgba(255,255,255,0.75);
  backdrop-filter:blur(20px);
  border-radius:20px;
  padding:40px;
  width:90%;
  max-width:420px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);

  transform:translateY(40px) scale(0.95);
  opacity:0;
  transition:0.3s ease;
}

.dev-modal.active{
  display:flex;
}

.dev-modal.active .dev-box{
  transform:translateY(0) scale(1);
  opacity:1;
}


.dev-box h2{
  font-size:24px;
  margin-bottom:10px;
}

.dev-box p{
  color:#555;
  font-size:15px;
  line-height:1.5;
}


.dev-badge{
  display:inline-block;
  margin-top:20px;
  padding:6px 14px;
  background:#e60023;
  color:#fff;
  border-radius:999px;
  font-size:12px;
}


.dev-close{
  position:absolute;
  top:10px;
  right:10px;
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
}

.loader{
  width:40px;
  height:40px;
  margin:0 auto 20px;
  position:relative;
  background: transparent;
}

.loader::before,
.loader::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid transparent;
  border-top:3px solid #e60023;
  animation:spin 1s linear infinite;
}

.loader::after{
  border-top:3px solid rgba(230,0,35,0.3);
  animation-duration:1.5s;
}

/* ===== 404 CONTENT - RABBIT HOUSE ===== */

.hole-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 20px 80px;
  overflow: hidden;
  background: #0a0a0a;
}

.tunnel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1600px;
  height: 1600px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle at center,
    rgba(255, 30, 60, 0.35) 0px,
    rgba(255, 90, 20, 0.18) 40px,
    rgba(10, 10, 10, 0.95) 90px,
    rgba(255, 30, 60, 0.25) 140px,
    rgba(10, 10, 10, 1) 200px
  );
  animation: spin 30s linear infinite, pulse 4s ease-in-out infinite;
  z-index: 0;
}

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, #0a0a0a 75%);
  z-index: 1;
}

.content {
  position: relative;
  z-index: 2;
}

.rabbit-svg {
  width: 130px;
  height: auto;
  margin: 0 auto 18px;
  animation: fall 3.5s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(255, 30, 60, 0.5));
}

@keyframes fall {
  0%   { transform: translateY(-10px) rotate(-4deg); }
  50%  { transform: translateY(10px) rotate(4deg); }
  100% { transform: translateY(-10px) rotate(-4deg); }
}

.error-code {
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  background: linear-gradient(180deg, #ffffff 0%, #ff1e3c 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 8px;
}

.hole-wrap h1 {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 700;
  margin-bottom: 14px;
  color: #f5f5f5;
}
.hole-wrap h1 span { color: #ff1e3c; }

.hole-wrap p.desc {
  color: #9a9a9a;
  max-width: 480px;
  margin: 0 auto 34px;
  font-size: 1rem;
  line-height: 1.6;
}

.hole-wrap .cta {
  display: inline-block;
  background: #ff1e3c;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  padding: 16px 34px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 0 30px rgba(255, 30, 60, 0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hole-wrap .cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 45px rgba(255, 30, 60, 0.5);
}

.hole-wrap .quote {
  margin-top: 28px;
  font-size: 0.8rem;
  color: #6b6b6b;
  font-style: italic;
  max-width: 420px;
}