/* ================================
   ROOT / THEME
================================ */
:root{
  --bg: #0a0a0f;
  --surface: #18181b;
  --primary: #22c55e;
  --secondary: #f97316;
  --text: #fafafa;
  --muted: #a1a1aa;
  --border: rgba(255,255,255,0.08);
}

/* ================================
   RESET & BASE
================================ */
*{box-sizing:border-box}
html,body{height:100%}

body{
  background: var(--bg);
  color:var(--text);
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  scroll-behavior:smooth;
}

/* subtle noise overlay */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:url("assets/images/noise.png");
  opacity:.035;
  mix-blend-mode:overlay;
  z-index:9999;
}

/* ================================
   FIXED NAVBAR OFFSET (GLOBAL)
================================ */

main#mainContent{
  padding-top: 96px;
}

/* Slightly smaller on mobile */
@media (max-width: 991px){
  main#mainContent{
    padding-top: 88px;
  }
}


/* ================================
   SECTION BASE (TIGHTER + CONTROLLED)
================================ */

section{
  position:relative;
  padding:72px 0;
}

@media (max-width:768px){
  section{
    padding:56px 0;
  }
}

/* ================================
   TYPOGRAPHY
================================ */
h1,h2,h3,h4,h5{
  font-family:'Space Grotesk',sans-serif;
  letter-spacing:-0.03em;
}

.display-4{
  font-weight:800;
}

.muted{color:var(--muted)}

.section-title{
  font-weight:700;
  margin-bottom:10px;
}

/* ================================
   NAVBAR + LOGO (FIXED)
================================ */
.site-header{
  transition:all .35s ease;
}

.navbar{
  background:transparent;
}

.site-header.scrolled{
  background:rgba(24,24,27,.6);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

/* Brand */
.brand-logo{
  width:auto;        /* wider */
  height:75px;       /* keep proportions */
  flex-shrink:0;
  filter:drop-shadow(0 8px 24px rgba(34,197,94,.25));
}


/* ================================
   BUTTONS
================================ */
.btn{
  border-radius:6px;
  padding:10px 20px;
  font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease;
}

.btn-primary-cta{
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  color:#051010;
  border:none;
  box-shadow:0 10px 40px rgba(34,197,94,.25);
}

.btn-outline-cta{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}

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

/* ================================
   HERO
================================ */
.hero{
  padding-top:140px;
}

.hero-title{
  font-size:2.6rem;
  line-height:1.05;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;
  color:transparent;
}

.hero-mockup img{
  box-shadow:
    0 40px 140px rgba(34,197,94,.25),
    0 0 0 1px rgba(255,255,255,.05);
  transform:perspective(1200px) rotateY(-6deg);
  transition:transform .6s ease;
}

.hero-mockup img:hover{
  transform:perspective(1200px) rotateY(0deg) scale(1.02);
}

/* ================================
   TICKER
================================ */
.ticker{
  overflow:hidden;
  border-radius:10px;
}

.ticker-inner{
  display:flex;
  gap:3rem;
  white-space:nowrap;
  animation:marquee 18s linear infinite;
}

.ticker-inner span{
  padding:8px 14px;
  background:rgba(255,255,255,.03);
  border-radius:6px;
  color:var(--muted);
}

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

/* ================================
   GLASS PANELS
================================ */
.glass-panel{
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:16px;
  backdrop-filter:blur(12px);
}

/* ================================
   OUR PHILOSOPHY (INTERACTIVE)
================================ */
.service-card{
  height:100%;
  cursor:pointer;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease;
}

.service-card:hover,
.service-card:focus-within{
  transform:translateY(-8px);
  background:rgba(34,197,94,.08);
  border-color:rgba(34,197,94,.4);
  box-shadow:0 30px 80px rgba(34,197,94,.25);
}

.service-card h6{
  transition:color .3s ease;
}

.service-card:hover h6{
  color:var(--primary);
}

/* ================================
   FEATURED PROJECTS
================================ */
.project-row{
  transition:transform .4s ease;
}

.project-thumb img{
  width:200px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  border-radius:14px;
}

.project-row:hover{
  transform:translateY(-6px);
}

/* Responsive featured projects */
@media (max-width:991px){
  .project-row{
    flex-direction:column !important;
    text-align:center;
  }

  .project-thumb img{
    width:260px;
    margin-bottom:20px;
  }
}

/* ================================
   PORTFOLIO GRID
================================ */
.masonry-grid{
  column-count:3;
  column-gap:1.2rem;
}

.masonry-item{
  margin-bottom:1.2rem;
  break-inside:avoid;
}

@media(max-width:992px){.masonry-grid{column-count:2}}
@media(max-width:576px){.masonry-grid{column-count:1}}

/* ================================
   FOOTER
================================ */
.site-footer{
  padding-top:100px;
  padding-bottom:60px;
  border-top:1px solid var(--border);
}

.footer-title{
  font-weight:800;
}

/* ================================
   SCROLLBAR
================================ */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));
  border-radius:10px;
}

/* ================================
   PORTFOLIO (INDUSTRY STANDARD)
================================ */
.portfolio-image a{
  display:block;
  cursor:zoom-in;
}

.portfolio-image img{
  transition:transform .65s cubic-bezier(.2,.9,.3,1);
}

.portfolio-header{
  margin-bottom:60px;
}

.portfolio-grid{
  margin-top:20px;
}

.portfolio-card{
  height:100%;
  overflow:hidden;
  transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .4s ease;
}

.portfolio-card:hover{
  transform:translateY(-10px);
  border-color:rgba(34,197,94,.35);
  box-shadow:
    0 40px 120px rgba(0,0,0,.65),
    0 0 0 1px rgba(34,197,94,.25);
}

/* Image */
.portfolio-image{
  position:relative;
  overflow:hidden;
  border-radius:14px 14px 0 0;
}

.portfolio-image img{
  width:100%;
  height:230px;
  object-fit:cover;
  transition:transform .6s ease;
}

.portfolio-card:hover img{
  transform:scale(1.08);
}

/* Content */
.portfolio-content{
  padding:22px;
}

.portfolio-category{
  display:inline-block;
  margin-bottom:6px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--primary);
}

.portfolio-content h5{
  margin-bottom:6px;
}

/* Mobile refinement */
@media (max-width:768px){
  .portfolio-image img{
    height:200px;
  }
}


/* ================================
   SERVICES – INDUSTRY STANDARD
================================ */

.services-header{
  margin-bottom:60px;
}

.service-card-lg{
  height:100%;
  padding:32px;
  transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .4s ease,
    background .4s ease;
}

/* Hover / touch highlight */
.service-card-lg:hover,
.service-card-lg:focus-within{
  transform:translateY(-10px);
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.06);
  box-shadow:
    0 40px 120px rgba(0,0,0,.6),
    0 0 0 1px rgba(34,197,94,.25);
}

/* Top row */
.service-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}

.service-num{
  font-family:'Space Grotesk';
  font-size:28px;
  font-weight:800;
  color:var(--primary);
}

/* Feature list */
.service-features li{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  color:var(--muted);
  font-size:14px;
}

.service-features .check{
  color:var(--primary);
  font-size:12px;
}

/* Responsive refinement */
@media (max-width:768px){
  .service-card-lg{
    padding:26px;
  }
}



/* ================================
   FOOTER – LOGO + ICONS
================================ */

.site-footer{
  margin-top:140px;
  padding:120px 0 60px;
  background:
    radial-gradient(900px 300px at 15% -10%, rgba(34,197,94,.08), transparent),
    radial-gradient(900px 300px at 85% -10%, rgba(249,115,22,.06), transparent);
  border-top:1px solid var(--border);
}

.footer-main{
  margin-bottom:80px;
}

/* Brand */
.footer-logo{
  width:auto;
  height:100px;
}

.footer-desc{
  max-width:420px;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:18px;
}

/* Social icons */
.footer-socials{
  display:flex;
  gap:14px;
}

.footer-socials a{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.05);
  color:var(--text);
  transition:all .3s ease;
  text-decoration:none;
}

.footer-socials a:hover{
  background:var(--primary);
  color:#04110a;
  transform:translateY(-4px);
}

/* Columns */
.footer-sub{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:16px;
}

.footer-list{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-list li{
  margin-bottom:10px;
  font-size:14px;
  color:var(--muted);
}

.footer-list a{
  color:var(--muted);
  text-decoration:none;
  transition:color .3s ease, transform .3s ease;
}

.footer-list a:hover{
  color:var(--primary);
  transform:translateX(4px);
}

/* Bottom */
.footer-bottom{
  padding-top:30px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:14px;
  font-size:13px;
  color:var(--muted);
}

.footer-dot{
  width:4px;
  height:4px;
  background:var(--muted);
  border-radius:50%;
}

/* Responsive */
@media (max-width:768px){
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}


/* ================================
   WHATSAPP FLOAT BUTTON
================================ */

.whatsapp-float{
  position:fixed;
  bottom:24px;
  right:24px;
  width:56px;
  height:56px;
  background:#25D366;
  color:#04110a;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  z-index:9999;
  box-shadow:
    0 12px 40px rgba(37,211,102,.45),
    0 0 30px rgba(37,211,102,.35);
  transition:transform .3s ease, box-shadow .3s ease;
  text-decoration:none;
}

.whatsapp-float:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:
    0 18px 60px rgba(37,211,102,.6),
    0 0 40px rgba(37,211,102,.55);
}

/* Footer contact icons */
.footer-contact-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.footer-contact-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  color:var(--muted);
}

.footer-contact-list i{
  font-size:16px;
  color:var(--primary);
  margin-top:2px;
}

.footer-contact-list a{
  color:var(--muted);
  text-decoration:none;
  transition:color .3s ease;
}

.footer-contact-list a:hover{
  color:var(--primary);
}


/* ================================
   CONTACT PAGE – PREMIUM
================================ */

.contact-icon-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.contact-icon-list li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  color:var(--muted);
}

.contact-icon-list i{
  font-size:18px;
  color:var(--primary);
}

/* Map */
.contact-map img{
  width:100%;
  height:220px;
  object-fit:cover;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}

/* Contact methods */
.contact-methods{
  display:flex;
  gap:16px;
}

.contact-methods label{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  color:var(--muted);
  transition:all .3s ease;
}

.contact-methods input{
  display:none;
}

.contact-methods label:hover,
.contact-methods input:checked + span{
  color:var(--primary);
}

/* Make span clickable */
.contact-methods span{
  display:flex;
  align-items:center;
  gap:8px;
}


/* CONTACT ICONS */
.contact-icon-list{
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.contact-icon-list i{
  color:var(--primary);
  margin-right:10px;
}

/* Map */
.contact-map{
  position:relative;
  cursor:pointer;
}
.contact-map img{
  height:220px;
  object-fit:cover;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.map-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.4);
  color:#fff;
  opacity:0;
  transition:.3s;
}
.contact-map:hover .map-overlay{
  opacity:1;
}

/* Contact method */
.contact-methods{
  display:flex;
  gap:16px;
}
.contact-methods label{
  border:1px solid var(--border);
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
}
.contact-methods input{display:none}
.contact-methods span{
  display:flex;
  gap:8px;
  align-items:center;
}


/* ================================
   MOBILE NAV DROPDOWN FIX
================================ */

@media (max-width: 991px){

  /* Navbar stays transparent */
  .navbar{
    background:transparent;
  }

  /* Dropdown menu ONLY when opened */
  .navbar-collapse{
    background:transparent;
    padding:0;
    margin-top:0;
    border-top:none;
  }

  .navbar-collapse.show{
    background:#000;
    padding:24px 20px 30px;
    margin-top:12px;
    border-top:1px solid rgba(255,255,255,0.08);
    animation: navDrop .25s ease;
  }

  /* Nav links */
  .navbar-nav .nav-link{
    padding:12px 0;
    font-size:16px;
  }

  /* CTA button */
  .navbar .btn-cta,
  .navbar .btn-primary-cta{
    width:100%;
    margin-top:16px;
    text-align:center;
  }
}

/* Animation */
@keyframes navDrop{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:none;
  }
}


/* ================================
   SECTION SPACING SYSTEM
================================ */

.section-tight{
  padding:48px 0;
}

.section-loose{
  padding:96px 0;
}

/* Mobile */
@media (max-width:768px){
  .section-tight{
    padding:40px 0;
  }
  .section-loose{
    padding:72px 0;
  }
}



/* ================================
   SUBTLE SECTION BACKGROUNDS
================================ */

.bg-gradient-1{
  background:
    radial-gradient(
      800px 400px at 10% 10%,
      rgba(34,197,94,0.08),
      transparent 60%
    );
}

.bg-gradient-2{
  background:
    radial-gradient(
      700px 400px at 90% 20%,
      rgba(249,115,22,0.06),
      transparent 60%
    );
}

.bg-divider{
  position: relative;
}

.bg-divider::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.08),
    transparent
  );
}