/* =========================================================
   APEXSPORT — PREMIUM SPORTS INFRASTRUCTURE
   Theme: Midnight Navy / Electric Blue / Performance Green
   ========================================================= */

:root {
  --navy: #04121f;
  --navy-2: #071d2e;
  --navy-3: #0b2b40;
  --blue: #1597ff;
  --blue-2: #0675d8;
  --green: #28e17b;
  --green-2: #9cff4f;
  --white: #fff;
  --soft: #f4f8f8;
  --ink: #0b2233;
  --muted: #6b7d88;
  --line: #dce7e9;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Manrope", sans-serif;
  overflow-x: hidden;
}
body.loading { overflow: hidden; }
img { max-width: 100%; }
a { text-decoration: none; transition: .25s ease; }
h1,h2,h3,h4,h5,h6,.navbar-brand {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
}
button, a { -webkit-tap-highlight-color: transparent; }

.page-loader {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.page-loader.done { opacity: 0; visibility: hidden; }
.loader-ball {
  width: 34px;
  height: 34px;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* NAV */
.site-nav {
  padding: 17px 0;
  background: transparent;
  transition: .35s ease;
  z-index: 1000;
}
.site-nav.scrolled {
  background: rgba(4,18,31,.94);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 11px 0;
}
.navbar-brand {
  color: #fff !important;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 29px;
  letter-spacing: .5px;
}
.navbar-brand > span:last-child { color: #fff; }
.navbar-brand > span:last-child > span { color: var(--green); }
.logo-box {
  width: 39px;
  height: 39px;
  background: var(--green);
  color: var(--navy);
  border-radius: 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.nav-link {
  color: #d9e5ea !important;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 9px 13px !important;
}
.nav-link:hover,.nav-link.active { color: var(--green) !important; }
.nav-cta { padding: 10px 17px !important; font-size: 12px; }
.btn {
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: .2px;
  transition: .25s ease;
}
.btn-green {
  color: #02160b;
  background: var(--green);
  border: 1px solid var(--green);
  padding: 13px 23px;
}
.btn-green:hover {
  color: #02160b;
  background: var(--green-2);
  border-color: var(--green-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(40,225,123,.18);
}
.btn-ghost {
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  padding: 13px 23px;
}
.btn-ghost:hover { color: var(--green); border-color: var(--green); }

/* HERO */
.hero {
  min-height: 900px;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--navy);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4,18,31,.98) 0%, rgba(4,18,31,.87) 44%, rgba(4,18,31,.3) 100%),
    url("https://images.unsplash.com/photo-1553778263-73a83bab9b0c?auto=format&fit=crop&w=2200&q=90") center/cover;
  transform: scale(1.03);
}
.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to right, black, transparent 80%);
}
.hero-glow {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .13;
}
.glow-one { background: var(--green); right: -150px; top: 100px; }
.glow-two { background: var(--blue); left: 25%; bottom: -250px; }
.hero-content { position: relative; z-index: 2; }
.eyebrow,.section-label {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.2px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow-line { width: 42px; height: 2px; background: var(--green); }
.hero h1 {
  font-size: clamp(5rem, 11vw, 10.5rem);
  line-height: .77;
  letter-spacing: -3px;
  margin: 27px 0 35px;
}
.hero h1 span { color: var(--green); }
.hero-text {
  max-width: 650px;
  color: #c2d2db;
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-mini-stats {
  margin-top: 58px;
  display: flex;
  gap: 35px;
}
.hero-mini-stats div {
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.25);
}
.hero-mini-stats strong {
  font-family: "Barlow Condensed";
  display: block;
  font-size: 37px;
  line-height: 1;
}
.hero-mini-stats strong span { color: var(--green); }
.hero-mini-stats small {
  color: #8ea4af;
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 800;
}
.hero-side-card {
  width: 360px;
  margin-left: auto;
  background: rgba(5,27,43,.78);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px);
  padding: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
}
.live-dot {
  padding: 10px 8px 12px;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #a9bac3;
  font-weight: 800;
}
.live-dot span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  display: inline-block; margin-right: 6px; box-shadow: 0 0 12px var(--green);
}
.hero-side-image { height: 230px; overflow: hidden; }
.hero-side-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-side-content { padding: 20px 8px 9px; }
.hero-side-content small { color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.hero-side-content h3 { font-size: 31px; margin: 7px 0 14px; }
.hero-side-content span { font-size: 10px; color: #92a7b2; }
.hero-side-content i { color: var(--green); font-size: 24px; }
.hero-scroll {
  position: absolute;
  z-index: 5;
  bottom: 30px;
  left: 38px;
  color: #8ea4af;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
}
.hero-scroll span {
  display: inline-block;
  width: 30px;
  height: 1px;
  vertical-align: middle;
  margin-right: 10px;
  background: var(--green);
}

/* REVEAL */
.reveal { opacity: 0; transform: translateY(25px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .1s; } .delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; } .delay-4 { transition-delay: .4s; }

/* MARQUEE */
.marquee {
  overflow: hidden;
  background: var(--green);
  color: var(--navy);
  white-space: nowrap;
  padding: 15px 0;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 27px;
  animation: marquee 28s linear infinite;
}
.marquee span { font-family: "Barlow Condensed"; font-size: 20px; font-weight: 700; letter-spacing: 1px; }
.marquee b { font-size: 11px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* GENERAL */
.section { padding: 120px 0; }
.section-label { color: var(--blue); margin-bottom: 23px; }
.section-label span { color: #a4b4bb; font-size: 10px; }
.section-label.light { color: var(--green); }
.section-label.center { justify-content: center; }
.section-title {
  font-size: clamp(3.5rem, 6vw, 6rem);
  line-height: .88;
  letter-spacing: -1.5px;
  margin: 0;
}
.section-title em { color: var(--green); font-style: normal; }
.section-title.white { color: #fff; }
.section-lead { color: var(--blue-2); font-size: 19px; line-height: 1.6; font-weight: 700; margin: 28px 0 12px; }
.body-copy,.section-note { color: var(--muted); line-height: 1.85; font-size: 14px; }
.white-note { color: #91a7b3; }

/* ABOUT */
.about-section { background: #fff; }
.about-points { margin: 25px 0 30px; }
.about-points div { display: flex; align-items: center; gap: 10px; margin: 11px 0; font-size: 13px; font-weight: 700; }
.about-points i { color: var(--green-2); font-size: 20px; }
.arrow-link {
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  border-bottom: 2px solid var(--green);
  padding-bottom: 6px;
}
.arrow-link i { margin-left: 9px; }
.about-collage { position: relative; min-height: 600px; padding: 0 50px 45px 0; }
.about-main { height: 520px; overflow: hidden; }
.about-main img { width: 100%; height: 100%; object-fit: cover; }
.about-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 45%;
  height: 220px;
  border: 10px solid #fff;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(5,25,40,.18);
}
.about-small img { width: 100%; height: 100%; object-fit: cover; }
.experience-badge {
  position: absolute;
  left: -35px;
  bottom: 80px;
  background: var(--green);
  color: var(--navy);
  padding: 20px 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 20px 40px rgba(40,225,123,.22);
}
.experience-badge strong { font-family: "Barlow Condensed"; font-size: 55px; line-height: .7; }
.experience-badge span { font-size: 9px; line-height: 1.4; font-weight: 800; letter-spacing: 1px; }
.shape-dot {
  position: absolute; top: -20px; right: 15px; width: 80px; height: 80px;
  border: 2px solid var(--green); border-radius: 50%;
}

/* SOLUTIONS */
.solutions-section { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.solutions-section:before {
  content:""; position:absolute; width:600px; height:600px; border-radius:50%;
  background: rgba(21,151,255,.08); filter:blur(80px); right:-300px; top:-250px;
}
.solution-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 14px;
}
.solution-card {
  background: #0a2639;
  border: 1px solid rgba(255,255,255,.08);
  padding: 31px;
  position: relative;
  overflow: hidden;
  transition: .3s ease;
}
.solution-card:hover { transform: translateY(-6px); border-color: rgba(40,225,123,.45); }
.solution-featured { grid-row: span 2; padding: 0; }
.solution-image { height: 100%; }
.solution-image img { width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: .5s ease; }
.solution-featured:hover img { transform: scale(1.06); opacity: .75; }
.solution-content {
  position: absolute; inset: auto 0 0; padding: 30px;
  background: linear-gradient(0deg, rgba(4,18,31,.98), transparent);
}
.solution-number { position: absolute; right: 28px; top: 27px; color: #68808e; font-size: 10px; font-weight: 800; }
.solution-top-icon { color: var(--green); font-size: 30px; margin-bottom: 35px; }
.solution-icon { color: var(--green); font-size: 20px; }
.solution-card h3 { font-size: 32px; margin: 9px 0; }
.solution-card p { color: #91a6b1; font-size: 12px; line-height: 1.7; max-width: 300px; }
.solution-card a { color: var(--green); font-size: 11px; font-weight: 800; }
.solution-card a i { margin-left: 7px; }

/* NUMBERS */
.numbers-section { background: var(--green); padding: 70px 0; }
.numbers-head { display:flex; justify-content:space-between; align-items:end; margin-bottom: 35px; }
.numbers-head .section-label { color: var(--navy); margin:0; }
.numbers-head .section-label span { color: #247146; }
.numbers-head p { color: #23623e; font-size: 12px; font-weight: 700; margin: 0; }
.number-cell {
  min-height: 155px;
  border-right: 1px solid rgba(4,18,31,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
.number-cell:last-child { border-right:0; }
.number-cell strong { font-family: "Barlow Condensed"; font-size: 75px; line-height: .7; color: var(--navy); }
.number-cell b { font-family: "Barlow Condensed"; color: #fff; font-size: 38px; align-self:flex-start; }
.number-cell small { width:100%; text-align:center; color:#22603e; font-size:9px; font-weight:800; letter-spacing:1.3px; margin-top:20px; }

/* PROJECTS */
.projects-section { background: var(--soft); }
.project-mosaic {
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: 370px 370px;
  gap: 15px;
}
.project { position:relative; overflow:hidden; background:var(--navy); }
.project-a { grid-row: span 2; }
.project img { width:100%; height:100%; object-fit:cover; transition: .6s ease; }
.project:hover img { transform:scale(1.07); }
.project:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(4,18,31,.94), transparent 65%); }
.project-info { position:absolute; z-index:2; left:28px; right:28px; bottom:25px; color:#fff; }
.project-info small { color:var(--green); font-size:9px; font-weight:800; letter-spacing:1.5px; }
.project-info h3 { font-size:35px; margin:7px 0 5px; }
.project-info span { color:#aabcc5; font-size:10px; }
.project-info i { color:var(--green); margin-left:8px; }

/* WHY */
.why-section { background: var(--navy); color:#fff; }
.why-image { position:relative; min-height:720px; overflow:hidden; }
.why-image img { width:100%; height:100%; min-height:720px; object-fit:cover; opacity:.8; }
.why-image:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(4,18,31,.1), rgba(4,18,31,.7)); }
.image-caption { position:absolute; z-index:2; left:35px; bottom:35px; color:#fff; font-size:10px; font-weight:800; letter-spacing:2px; }
.why-content { padding:110px 9%; }
.why-list { margin-top:45px; border-top:1px solid rgba(255,255,255,.12); }
.why-list > div { display:flex; gap:25px; padding:23px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.why-list > div > span { color:var(--green); font-family:"Barlow Condensed"; font-size:22px; }
.why-list h4 { font-size:25px; margin:0 0 4px; }
.why-list p { color:#8da2ad; font-size:12px; line-height:1.7; margin:0; }

/* PROCESS */
.process-section { background:#fff; position:relative; }
.process-line { height:1px; background:#dce7e9; position:absolute; left:15%; right:15%; top:52%; }
.process-card { position:relative; z-index:2; background:#fff; border:1px solid var(--line); padding:32px; min-height:275px; transition:.3s; }
.process-card:hover { border-color:var(--green); box-shadow:0 25px 50px rgba(5,30,45,.08); transform:translateY(-5px); }
.process-no { color:#cbd8dc; font-family:"Barlow Condensed"; font-size:42px; position:absolute; right:25px; top:20px; }
.process-card i { font-size:31px; color:var(--blue); }
.process-card h3 { font-size:31px; margin:35px 0 8px; }
.process-card p { color:var(--muted); font-size:12px; line-height:1.75; }

/* TESTIMONIAL */
.testimonial-section { background: var(--blue); color:#fff; padding:105px 0; position:relative; overflow:hidden; }
.testimonial-section:after { content:""; position:absolute; width:500px; height:500px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-200px; top:-200px; }
.quote-mark { font-family:Georgia,serif; color:var(--green); font-size:120px; line-height:.5; }
.testimonial-inner { max-width:1000px; margin:auto; text-align:center; }
.quote { font-family:"Barlow Condensed"; font-size:clamp(2.2rem,4.5vw,4.2rem); line-height:1.02; margin:10px 0 35px; }
.quote-author { display:flex; justify-content:center; align-items:center; gap:12px; }
.quote-author > span { width:30px; height:2px; background:var(--green); }
.quote-author strong { display:block; font-size:11px; letter-spacing:1.5px; }
.quote-author small { color:#a9d1ec; font-size:8px; letter-spacing:1px; }

/* CTA */
.cta-section { background:var(--soft); padding:100px 0; }
.cta-panel {
  position:relative; overflow:hidden; background:var(--navy-2); color:#fff;
  padding:65px 70px; display:flex; justify-content:space-between; align-items:center; gap:30px;
}
.cta-panel h2 { font-size:clamp(3rem,5vw,5rem); line-height:.88; margin:0 0 15px; }
.cta-panel h2 em { color:var(--green); font-style:normal; }
.cta-panel p { color:#91a8b4; margin:0; font-size:13px; }
.cta-shape { position:absolute; width:500px; height:500px; border:1px solid rgba(40,225,123,.15); border-radius:50%; right:-230px; top:-230px; }

/* CONTACT */
.contact-section { background:#fff; }
.contact-item { display:flex; align-items:center; gap:16px; margin:25px 0; }
.contact-item > i { width:47px; height:47px; background:#eafaf1; color:var(--green-2); color:#159650; display:flex; align-items:center; justify-content:center; }
.contact-item small { display:block; color:#93a4ab; font-size:8px; font-weight:800; letter-spacing:1.5px; }
.contact-item strong { display:block; color:var(--navy); font-size:13px; margin-top:4px; }
.contact-form { background:var(--soft); padding:38px; border:1px solid var(--line); }
.form-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.form-head h3 { font-size:29px; margin:0; }
.form-head span { color:var(--blue); font-size:9px; font-weight:800; letter-spacing:1px; }
.contact-form label { display:block; font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:7px; }
.form-control,.form-select { border-radius:2px; border:1px solid #d4e1e4; padding:13px 14px; font-size:12px; background:#fff; }
.form-control:focus,.form-select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(40,225,123,.1); }
.form-note { color:#84969f; font-size:10px; }

/* FOOTER */
.footer { background:#020d16; color:#8296a0; padding:70px 0 25px; }
.footer-brand { margin-bottom:18px; }
.footer-intro { max-width:390px; color:#728893; font-size:12px; line-height:1.8; }
.footer h5 { color:#fff; font-size:20px; margin-bottom:18px; }
.footer a:not(.footer-brand) { display:block; color:#80949e; font-size:11px; margin:9px 0; }
.footer a:hover { color:var(--green); }
.footer p { font-size:11px; line-height:1.8; }
.socials { display:flex; gap:8px; }
.socials a { width:38px; height:38px; border:1px solid #213643; border-radius:50%; display:flex !important; align-items:center; justify-content:center; }
.footer-bottom { margin-top:55px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; color:#607580; font-size:9px; letter-spacing:1px; }

/* FLOATING */
.whatsapp {
  position:fixed; z-index:2000; right:22px; bottom:22px;
  width:57px; height:57px; border-radius:50%; background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:27px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.whatsapp:hover { color:#fff; transform:scale(1.08); }
.back-top {
  position:fixed; z-index:1999; right:23px; bottom:91px; width:55px; height:55px;
  border:1px solid var(--line); background:#fff; color:var(--navy); opacity:0; visibility:hidden;
  transition:.3s; box-shadow:0 8px 25px rgba(0,0,0,.1);
}
.back-top.show { opacity:1; visibility:visible; }
.back-top:hover { background:var(--green); border-color:var(--green); }

/* RESPONSIVE */
@media (max-width:1199px) {
  .hero { min-height:780px; }
  .hero h1 { font-size:clamp(5rem,12vw,8rem); }
}
@media (max-width:991px) {
  .site-nav { background:rgba(4,18,31,.94); backdrop-filter:blur(15px); }
  .navbar-collapse { background:var(--navy-2); margin-top:12px; padding:15px; }
  .nav-cta { display:inline-block; margin-top:10px; }
  .hero { min-height:760px; }
  .section { padding:85px 0; }
  .solution-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .solution-featured { grid-column:span 2; grid-row:auto; min-height:440px; }
  .solution-card { min-height:250px; }
  .why-image,.why-image img { min-height:500px; }
  .why-content { padding:75px 8%; }
  .process-line { display:none; }
  .cta-panel { padding:50px 40px; flex-direction:column; align-items:flex-start; }
}
@media (max-width:767px) {
  .navbar-brand { font-size:24px; }
  .logo-box { width:34px; height:34px; }
  .hero { min-height:760px; }
  .hero-bg { background:linear-gradient(90deg,rgba(4,18,31,.95),rgba(4,18,31,.68)),url("https://images.unsplash.com/photo-1553778263-73a83bab9b0c?auto=format&fit=crop&w=1300&q=85") center/cover; }
  .hero h1 { font-size:clamp(4.5rem,20vw,7rem); letter-spacing:-2px; }
  .hero-text { font-size:14px; }
  .hero-mini-stats { gap:18px; }
  .hero-scroll { left:18px; }
  .section { padding:70px 0; }
  .section-title { font-size:clamp(3.2rem,15vw,5rem); }
  .about-collage { min-height:480px; padding-right:20px; }
  .about-main { height:390px; }
  .about-small { width:47%; height:170px; border-width:7px; }
  .experience-badge { left:-5px; bottom:45px; padding:15px 18px; }
  .experience-badge strong { font-size:42px; }
  .solution-grid { grid-template-columns:1fr; }
  .solution-featured { grid-column:auto; min-height:420px; }
  .solution-card { min-height:235px; }
  .numbers-head { display:block; }
  .numbers-head p { margin-top:8px; }
  .number-cell { min-height:130px; }
  .number-cell strong { font-size:55px; }
  .number-cell b { font-size:28px; }
  .project-mosaic { display:block; }
  .project { height:380px; margin-bottom:14px; }
  .project-info h3 { font-size:30px; }
  .why-image,.why-image img { min-height:420px; }
  .why-content { padding:65px 7%; }
  .cta-panel { padding:45px 25px; }
  .contact-form { padding:25px 18px; }
  .form-head { display:block; }
  .form-head span { display:block; margin-top:8px; }
  .footer-bottom { display:block; line-height:2; }
}