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

:root{
  --primary:#00c783; --primary-dark:#00a06d;
  --bg-dark:#000; --bg-darker:#0a0a0a; --bg-card:#111;
  --text-primary:#fff; --text-secondary:#a0a0a0; --border:#222;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg-dark); color:var(--text-primary); line-height:1.6; overflow-x:hidden;
}

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

/* Nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(0,0,0,.8); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-container{ display:flex; justify-content:space-between; align-items:center; padding:1rem 20px; }

.logo{
  font-size:1.5rem; font-weight:700; background:linear-gradient(135deg,var(--primary),#00ffaa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  align-items:center; display:flex; gap:.5rem; text-decoration:none;
}
.logo-img{ width:3rem; height:3rem; }

.nav-links{ display:flex; gap:2rem; align-items:center; }
.nav-links a{ color:var(--text-primary); text-decoration:none; transition:color .3s; font-size:.95rem; }
.nav-links a:hover{ color:var(--primary); }

.language-switcher{
  display:flex; align-items:center; gap:.5rem; background:var(--bg-card);
  border:1px solid var(--border); padding:.5rem 1rem; border-radius:50px; cursor:pointer;
  color:var(--text-primary); transition:all .3s;
}
.language-switcher:hover{ border-color:var(--primary); box-shadow:0 0 20px rgba(0,199,131,.3); }

.mobile-menu-btn{ display:none; position:relative; width:36px; height:36px; background:none; border:none; cursor:pointer; }
.mobile-menu-btn span{
  position:absolute; left:6px; right:6px; height:2px; background:var(--text-primary);
  transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.mobile-menu-btn span:nth-child(1){ top:11px; }
.mobile-menu-btn span:nth-child(2){ top:17px; }
.mobile-menu-btn span:nth-child(3){ top:23px; }
.mobile-menu-btn.is-open span:nth-child(1){ top:17px; transform:rotate(45deg); }
.mobile-menu-btn.is-open span:nth-child(2){ opacity:0; }
.mobile-menu-btn.is-open span:nth-child(3){ top:17px; transform:rotate(-45deg); }

/* Mobile menu overlay/sheet */
.mobile-menu[hidden]{ display:none !important; }
.mobile-menu{ position:fixed; inset:0; z-index:1200; }
.mobile-menu__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .25s ease;
}
.mobile-menu__sheet{
  position:absolute; left:0; right:0; top:0; background:rgba(15,15,15,.98);
  border-bottom:1px solid var(--border); transform:translateY(-100%);
  transition:transform .32s cubic-bezier(.2,.8,.2,1); padding:16px 20px 20px;
  max-height:100dvh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.mobile-menu--open .mobile-menu__overlay{ opacity:1; }
.mobile-menu--open .mobile-menu__sheet{ transform:translateY(0); }

.mobile-menu__header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0 8px; }
.mobile-close-btn{
  position:relative; width:36px; height:36px; border:1px solid var(--border);
  border-radius:10px; background:var(--bg-card); cursor:pointer;
}
.mobile-close-btn span{ position:absolute; left:9px; right:9px; top:17px; height:2px; background:var(--text-primary); }
.mobile-close-btn span:first-child{ transform:rotate(45deg); }
.mobile-close-btn span:last-child{ transform:rotate(-45deg); }

.mobile-menu__nav{ display:grid; gap:12px; margin:16px 0 12px; }
.mobile-menu__nav a{
  display:block; padding:14px 12px; border-radius:12px; border:1px solid var(--border);
  background:rgba(17,17,17,.7); text-decoration:none; color:var(--text-primary); font-weight:600;
  transition:border-color .2s, transform .15s;
}
.mobile-menu__nav a:hover{ border-color:var(--primary); }
.mobile-menu__nav a:active{ transform:scale(.98); }

.mobile-menu__actions{ display:grid; gap:10px; margin:10px 0 16px; }
.mobile-menu__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-top:1px solid var(--border); padding-top:12px;
}
.mobile-menu__tel{ color:var(--text-secondary); text-decoration:none; }

body.menu-open{ overflow:hidden; }

.contact-link{ color:var(--text-secondary); text-decoration:none; }

/* Animated background */
.animated-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.gradient-orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.3; animation:float 20s infinite ease-in-out; }
.orb-1{ width:500px; height:500px; background:var(--primary); top:-250px; left:-250px; animation-delay:0s; }
.orb-2{ width:400px; height:400px; background:#00ffaa; bottom:-200px; right:-200px; animation-delay:-7s; }
.orb-3{ width:350px; height:350px; background:var(--primary); top:50%; left:50%; animation-delay:-14s; }
@keyframes float{ 0%,100%{ transform:translate(0,0) scale(1);} 33%{ transform:translate(100px,-100px) scale(1.1);} 66%{ transform:translate(-100px,100px) scale(.9);} }
.grid-pattern{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,199,131,.05) 1px,transparent 1px), linear-gradient(90deg, rgba(0,199,131,.05) 1px,transparent 1px);
  background-size:50px 50px; animation:gridMove 20s linear infinite;
}
@keyframes gridMove{ 0%{ transform:translate(0,0);} 100%{ transform:translate(50px,50px);} }
#particlesCanvas{ position:absolute; inset:0; width:100%; height:100%; }

/* Hero */
.hero{ position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; padding-top:80px; overflow:hidden; }
.hero-container{ margin-top:9rem; position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }

.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem; background:rgba(0,199,131,.1);
  border:1px solid rgba(0,199,131,.3); padding:.5rem 1rem; border-radius:50px; font-size:.9rem; margin-bottom:2rem;
}
.badge-dot{ width:8px; height:8px; background:var(--primary); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(1.2);} }

.hero-title{ font-size:4rem; font-weight:800; line-height:1.1; margin-bottom:1.5rem; }
.gradient-text{ background:linear-gradient(135deg,var(--primary),#00ffaa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; animation:gradientShift 3s ease infinite; }
@keyframes gradientShift{ 0%,100%{ filter:hue-rotate(0);} 50%{ filter:hue-rotate(20deg);} }

.hero-description{ font-size:1.2rem; color:var(--text-secondary); margin-bottom:2rem; max-width:600px; }
.hero-buttons{ display:flex; gap:1rem; margin-bottom:3rem; }

.btn{
  padding:1rem 2rem; border-radius:50px; font-size:1rem; font-weight:600; cursor:pointer; transition:all .3s; border:none;
}
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 0 30px rgba(0,199,131,.3); }
.btn-primary:hover{ background:var(--primary-dark); box-shadow:0 0 40px rgba(0,199,131,.5); transform:translateY(-2px); }
.btn-secondary{ background:transparent; color:var(--text-primary); border:2px solid var(--border); }
.btn-secondary:hover{ border-color:var(--primary); box-shadow:0 0 20px rgba(0,199,131,.2); }
.btn-large{ padding:1.2rem 2.5rem; font-size:1.1rem; }

.hero-stats{ display:flex; gap:3rem; }
.stat-item{ text-align:center; }
.stat-number{ font-size:2.5rem; font-weight:800; color:var(--primary); margin-bottom:.5rem; }
.stat-label{ font-size:.9rem; color:var(--text-secondary); }

.hero-visual{ position:relative; height:500px; }
.floating-cards{ position:relative; width:100%; height:100%; }
.floating-card{
  position:absolute; background:rgba(17,17,17,.8); backdrop-filter:blur(10px); border:1px solid var(--border);
  border-radius:20px; padding:1.5rem; display:flex; align-items:center; gap:1rem;
  box-shadow:0 10px 40px rgba(0,0,0,.5); transition:all .3s;
}
.floating-card:hover{ border-color:var(--primary); box-shadow:0 10px 40px rgba(0,199,131,.3); transform:translateY(-5px); }
.card-1{ top:10%; left:10%; animation:floatCard 6s ease-in-out infinite; }
.card-2{ top:40%; right:10%; animation:floatCard 6s ease-in-out infinite; animation-delay:-2s; }
.card-3{ bottom:10%; left:20%; animation:floatCard 6s ease-in-out infinite; animation-delay:-4s; }
@keyframes floatCard{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-20px);} }
.card-icon{ font-size:2rem; }
.card-text{ font-weight:600; }

.scroll-indicator{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:1; }
.scroll-line{ width:2px; height:60px; background:linear-gradient(to bottom,var(--primary),transparent); animation:scrollDown 2s ease-in-out infinite; }
@keyframes scrollDown{ 0%{ opacity:0; transform:translateY(-20px);} 50%{ opacity:1;} 100%{ opacity:0; transform:translateY(20px);} }

/* Sections */
.section{ position:relative; padding:6rem 0; overflow:hidden; }
.section-header{ text-align:center; margin-bottom:4rem; }
.section-title{
  font-size:3rem; font-weight:800; margin-bottom:1rem;
  background:linear-gradient(135deg,var(--text-primary),var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-subtitle{ font-size:1.2rem; color:var(--text-secondary); }

/* About */
.about-content{ position:relative; z-index:1; display:grid; gap:3rem; }
.about-text{ display:flex; flex-direction:column; gap:1.5rem; }
.about-text p{ font-size:1.1rem; color:var(--text-secondary); line-height:1.8; }
.about-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.feature-item{
  display:flex; align-items:center; gap:1rem; background:rgba(17,17,17,.5); border:1px solid var(--border);
  padding:1.5rem; border-radius:15px; transition:all .3s;
}
.feature-item:hover{ border-color:var(--primary); box-shadow:0 0 30px rgba(0,199,131,.2); transform:translateX(5px); }
.feature-icon{ font-size:1.5rem; color:var(--primary); }
.feature-text{ font-weight:600; }

/* Services */
.services-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.service-card{
  background:rgba(17,17,17,.5); border:1px solid var(--border); border-radius:20px; padding:2rem; transition:all .3s; cursor:pointer;
}
.service-card:hover{ border-color:var(--primary); box-shadow:0 10px 40px rgba(0,199,131,.2); transform:translateY(-10px); }
.service-icon{ font-size:3rem; margin-bottom:1.5rem; }
.service-title{ font-size:1.5rem; font-weight:700; margin-bottom:1rem; color:var(--text-primary); }
.service-description{ color:var(--text-secondary); line-height:1.6; }

/* Types */
.types-grid{ position:relative; z-index:1; display:grid; gap:2rem; }
.type-card{
  background:rgba(17,17,17,.5); border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:all .3s;
  display:grid; grid-template-columns:400px 1fr;
}
.type-card:hover{ border-color:var(--primary); box-shadow:0 10px 40px rgba(0,199,131,.2); }
.type-image{ width:100%; height:100%; overflow:hidden; }
.type-image img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.type-card:hover .type-image img{ transform:scale(1.1); }
.type-content{ padding:2rem; display:flex; flex-direction:column; justify-content:center; }
.type-title{ font-size:1.8rem; font-weight:700; margin-bottom:1rem; color:var(--text-primary); }
.type-description{ color:var(--text-secondary); line-height:1.6; font-size:1.1rem; }

/* CTA */
.cta-section{ padding:8rem 0; }
.cta-content{ position:relative; z-index:1; text-align:center; max-width:800px; margin:0 auto; }
.cta-title{
  font-size:3rem; font-weight:800; margin-bottom:1.5rem;
  background:linear-gradient(135deg,var(--text-primary),var(--primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.cta-description{ font-size:1.3rem; color:var(--text-secondary); margin-bottom:2.5rem; }
.cta-buttons{ display:flex; gap:1.5rem; justify-content:center; }

/* Footer */
.footer{ background:var(--bg-darker); border-top:1px solid var(--border); padding:3rem 0 1.5rem; }
.footer-content{ display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; margin-bottom:2rem; }
.footer-title{
  font-size:1.5rem; font-weight:700; background:linear-gradient(135deg,var(--primary),#00ffaa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:1rem;
}
.footer-text{ color:var(--text-secondary); }
.footer-heading{ font-size:1.2rem; font-weight:600; margin-bottom:1rem; color:var(--text-primary); }
.footer-links,.footer-contact{ list-style:none; display:flex; flex-direction:column; gap:.8rem; }
.footer-links a{ color:var(--text-secondary); text-decoration:none; transition:color .3s; }
.footer-links a:hover{ color:var(--primary); }
.footer-contact li{ color:var(--text-secondary); }
.footer-bottom{ text-align:center; padding-top:2rem; border-top:1px solid var(--border); color:var(--text-secondary); }

/* Reveal on load */
.reveal-on-load{ opacity:0; transform:translateY(16px); will-change:transform,opacity,clip-path; }
body.page-loaded .reveal-on-load{
  animation:heroRise .6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--i,0) * 90ms);
}
.hero-title.reveal-on-load,.hero-visual.reveal-on-load{ clip-path:inset(0 0 40% 0 round 8px); }
body.page-loaded .hero-title.reveal-on-load, body.page-loaded .hero-visual.reveal-on-load{ animation-name:heroRiseClip; }
@keyframes heroRise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:translateY(0);} }
@keyframes heroRiseClip{
  0%{ opacity:0; transform:translateY(18px); clip-path:inset(0 0 40% 0 round 8px);}
  100%{ opacity:1; transform:translateY(0); clip-path:inset(0 0 0 0 round 8px);}
}

/* Responsive */
@media (max-width:968px){
  .nav-links{ display:none; }
  .mobile-menu-btn{ display:inline-block; }
  .hero-container{ grid-template-columns:1fr; gap:2rem; }
  .hero-title{ font-size:2.5rem; }
  .hero-visual{ height:300px; }
  .services-grid{ grid-template-columns:1fr; }
  .type-card{ grid-template-columns:1fr; }
  .footer-content{ grid-template-columns:1fr; }
  .cta-buttons{ flex-direction:column; }
  .about-features{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .hero-title{ font-size:2rem; }
  .section-title{ font-size:2rem; }
  .hero-stats{ flex-direction:column; gap:1.5rem; }
  .hero-buttons{ flex-direction:column; }
}