:root{
  --bg:#0b1220;
  --card:#0f1924;
  --glass: rgba(255,255,255,0.04);
  --accent: #F59E0B; /* warm gold */
  --muted: #9aa4b2;
  --text: #e6eef6;
  --radius: 14px;
  --maxw: 1100px;
  --ff-sans: 'Inter', Arial, sans-serif;
  --ff-head: 'Montserrat', 'Inter', sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ff-sans);
  background:linear-gradient(180deg,#071223 0%, #071829 60%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:hidden;
}

/* container */
.container{max-width:var(--maxw);margin:0 auto;padding:1rem}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(7,12,20,0.6), rgba(7,12,20,0.35));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.9rem 0}
.logo{font-weight:800;font-size:1.2rem;color:var(--text);text-decoration:none;letter-spacing:0.6px}
.logo span{color:var(--accent);margin-left:6px;font-weight:700}

/* nav */
.main-nav{display:flex;gap:1rem}
.main-nav a{color:var(--muted);text-decoration:none;padding:10px;border-radius:10px;font-weight:600}
.main-nav a:hover{color:var(--text);background:rgba(255,255,255,0.02)}

/* hamburger */
.hamburger{display:none;background:none;border:0;padding:8px;width:48px;height:48px;border-radius:10px;cursor:pointer}
.hamburger span{display:block;height:2px;width:20px;background:var(--text);margin:5px 0;transition:transform .25s ease}

/* HERO */
.hero{position:relative;padding:3rem 0 1rem}
.hero .container{display:flex;gap:2rem;align-items:center;justify-content:space-between}
.hero-text{flex:1;max-width:56%}
.hero-text h1{font-family:var(--ff-head);font-size:2.4rem;margin:0 0 .6rem;line-height:1.05}
.lead{color:var(--muted);margin:0 0 1rem}
.btn{display:inline-block;padding:.65rem 1rem;border-radius:10px;text-decoration:none;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--accent), #FF7A18);color:#061017}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}

.hero-art{width:320px}
.mockup-card{position:relative;background:linear-gradient(180deg,#0f1620,#0b1220);border-radius:18px;padding:18px;box-shadow:0 8px 30px rgba(3,6,10,0.6);overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.mockup-top{font-size:.75rem;color:var(--muted);letter-spacing:1px}
.mockup-body{display:flex;gap:10px;align-items:center;justify-content:center;padding:14px;margin-top:10px}
.mockup-sample{background:linear-gradient(180deg,#111827,#0b1220);width:80px;height:80px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:2rem;color:var(--accent);box-shadow:inset 0 -6px 20px rgba(0,0,0,0.6)}
.mockup-sample.small{width:54px;height:54px;font-size:1.4rem}
.shine{position:absolute;left:-40%;top:-40%;width:120%;height:120%;background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), transparent 25%);transform:rotate(12deg);}

/* wave */
.hero-wave path{fill:transparent;stroke:rgba(255,255,255,0.03);}

/* section */
.section{padding:3rem 0}
.section-title{font-family:var(--ff-head);font-size:1.6rem;margin-bottom:.25rem}
.muted{color:var(--muted);margin-bottom:1rem}

/* services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.service-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1.2rem;border-radius:12px;box-shadow:0 8px 20px rgba(2,6,10,0.6)}
.service-card .icon{font-weight:800;font-size:1.1rem;background:rgba(255,255,255,0.02);padding:.5rem;border-radius:8px;display:inline-block;margin-bottom:.6rem}

/* counters */
.counters{padding:2rem 0;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.counters-grid{display:flex;gap:1rem;justify-content:space-between}
.counter{flex:1;background:var(--glass);padding:1rem;border-radius:12px;text-align:center}
.counter strong{display:block;font-size:1.8rem;color:var(--accent)}

/* portfolio */
.portfolio-scroll{display:flex;gap:1rem;overflow-x:auto;padding:1rem 0;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.portfolio-item{min-width:260px;border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,0.6);background:var(--card);scroll-snap-align:center}
.portfolio-item img{display:block;width:100%;height:160px;object-fit:cover}
.portfolio-item figcaption{padding:.6rem;color:var(--muted)}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:center}
.values{display:grid;gap:.8rem;background:linear-gradient(180deg,#071827 0%, #071223 100%);padding:1rem;border-radius:12px}
.values div{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px dashed rgba(255,255,255,0.03)}
.values div:last-child{border-bottom:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:1.2rem}
.contact-form label{display:block;margin-bottom:.6rem;color:var(--muted)}
.contact-form input, .contact-form textarea{width:100%;padding:.7rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.form-actions{display:flex;gap:0.6rem;margin-top:.6rem}

/* footer */
.site-footer{padding:1rem 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.9rem}

/* reveal animation */
.reveal{opacity:0;transform:translateY(16px) scale(.995);transition:all .7s cubic-bezier(.2,.9,.2,1)}
.reveal.in-view{opacity:1;transform:none}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}
.delay-3{transition-delay:.36s}
.delay-4{transition-delay:.48s}
.delay-5{transition-delay:.6s}

/* responsive */
@media (max-width:900px){
  .hero .container{flex-direction:column-reverse;align-items:flex-start}
  .hero-text{max-width:100%}
  .hero-art{width:100%}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .main-nav{display:none}
  .hamburger{display:block}
  .container{padding:0.8rem}
}

@media (max-width:520px){
  .services-grid{grid-template-columns:1fr}
  .portfolio-item{min-width:220px}
  .logo{font-size:1rem}
  .hero-text h1{font-size:1.6rem}
}

/* mobile nav open */
.nav-open #main-nav{position:fixed;inset:70px 16px auto 16px;background:linear-gradient(180deg,#071225, #081025);padding:16px;border-radius:12px;display:flex;flex-direction:column;gap:10px;z-index:60}

/* -------- PAGE TRANSITION ANIMATIONS -------- */
.page-transition {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.page-transition.active {
  opacity: 1;
  transform: translateY(0);
}

/* fade-out when navigating */
body.fade-out {
  opacity: 0;
  transition: opacity 0.4s ease;
}
/* === HERO SLIDER === */
.slider { position:relative; height:90vh; overflow:hidden; }
.slides { height:100%; position:relative; }
.slide {
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.05); transition:opacity 1s ease, transform 1.5s ease;
  display:flex; align-items:center; justify-content:center;
}
.slide-in-right img,
.slide img,
.slide-in-right {
  width: 60%;       /* or any % that looks right */
  max-width: 500px; /* optional: limit size */
  height: auto;
  border-radius: 10px; /* optional for smoother edges */
}

.slide.active { opacity:1; transform:scale(1); z-index:1; }
.overlay { position:absolute; inset:0; background:rgba(5,10,20,0.55); }
.slide-text { position:relative; z-index:2; text-align:center; color:var(--text); padding:1rem; }
.slider-controls { position:absolute; top:50%; width:100%; display:flex; justify-content:space-between; transform:translateY(-50%); }
.slider-controls button {
  background:rgba(0,0,0,0.4); border:0; color:white; font-size:2rem; padding:.4rem .8rem; border-radius:8px;
  cursor:pointer; transition:background .3s ease;
}
.slider-controls button:hover { background:rgba(0,0,0,0.65); }

/* === SCROLL ANIMATIONS === */
.slide-in-left  { opacity:0; transform:translateX(-60px); transition:all .8s ease; }
.slide-in-right { opacity:0; transform:translateX(60px);  transition:all .8s ease; }
.slide-in-up    { opacity:0; transform:translateY(60px);  transition:all .8s ease; }
.in-view.slide-in-left,
.in-view.slide-in-right,
.in-view.slide-in-up { opacity:1; transform:none; }

/* === PAGE TRANSITION === */
.page-transition { opacity:0; transform:translateY(10px); transition:opacity .6s ease,transform .6s ease; }
.page-transition.active { opacity:1; transform:translateY(0); }
body.fade-out { opacity:0; transition:opacity .4s ease; }

/* --- WhatsApp Floating Button --- */
.whatsapp-float {
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  z-index: 9999;
  animation: pop 0.6s ease;
}
.whatsapp-float img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}
@keyframes pop { 0%{transform:scale(0);} 80%{transform:scale(1.1);} 100%{transform:scale(1);} }

/* --- Install App Popup --- */
.install-prompt {
  position: fixed;
  bottom: 90px;
  right: 18px;
  background: linear-gradient(135deg,#0f1924,#192a3b);
  color: #fff;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  display: none;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 9999;
  animation: fadeInUp .6s ease;
}
.install-prompt button {
  border: none;
  background: var(--accent);
  color: #061017;
  font-weight: 700;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}
@keyframes fadeInUp {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}