/*!
Theme Name: Apex
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: apex
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Apex is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --apex-dark:#d5dfe8;
  --apex-navy:#c2d0dc;
  --apex-blue:#3d6590;
  --apex-steel:#5a80a5;
  --apex-light:#4a6a88;
  --apex-accent:#00c2ff;
  --apex-accent2:#0099dd;
  --apex-white:#1a2d45;
  --apex-bg:#e8eef4;
  --font-display:'Rajdhani',sans-serif;
  --font-body:'Outfit',sans-serif;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font-body);
  background:#e8eef4;
  color:var(--apex-white);
  line-height:1.6;
  overflow-x:hidden;
}
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity:0.3;
}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#d5dfe8}
::-webkit-scrollbar-thumb{background:var(--apex-blue);border-radius:3px}

nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:0.7rem 3rem;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(232,238,244,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(61,101,144,0.15);
  transition:all 0.4s ease;
}
nav.scrolled{padding:0.3rem 3rem;background:rgba(232,238,244,0.97)}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo-img{height:62px;width:auto}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{
  text-decoration:none;color:var(--apex-light);
  font-size:0.85rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  position:relative;transition:color 0.3s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;
  background:var(--apex-accent);transition:width 0.3s;
}
.nav-links a:hover{color:var(--apex-accent)}
.nav-links a:hover::after{width:100%}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:5px}
.hamburger span{width:24px;height:2px;background:var(--apex-light);transition:all 0.3s}

.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;padding:8rem 3rem 4rem;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(0,154,221,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(61,101,144,0.08) 0%, transparent 70%),
    linear-gradient(180deg, var(--apex-bg) 0%, var(--apex-dark) 100%);
}
.hero-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(61,101,144,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,101,144,0.06) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 80%);
}
.particle{
  position:absolute;width:2px;height:2px;background:var(--apex-accent);
  border-radius:50%;opacity:0;animation:floatParticle 8s infinite;
}
@keyframes floatParticle{
  0%{opacity:0;transform:translateY(100vh)}
  10%{opacity:0.6}90%{opacity:0.6}
  100%{opacity:0;transform:translateY(-10vh)}
}
.hero-content{position:relative;z-index:2;text-align:center;max-width:900px}

.hero-subtitle{
  font-size:clamp(0.9rem,2vw,1.15rem);color:var(--apex-light);
  letter-spacing:3px;text-transform:uppercase;font-weight:300;
  margin-bottom:2.5rem;opacity:0;animation:fadeUp 1s 0.7s forwards;
}
.hero-desc{
  font-size:1.05rem;color:rgba(60,90,120,0.85);max-width:600px;margin:0 auto 3rem;
  line-height:1.8;opacity:0;animation:fadeUp 1s 0.9s forwards;
}
.hero-actions{
  display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:fadeUp 1s 1.1s forwards;
}
.btn-primary{
  padding:1rem 2.5rem;background:var(--apex-accent);color:var(--apex-dark);
  text-decoration:none;font-family:var(--font-display);font-weight:700;
  font-size:0.9rem;letter-spacing:2px;text-transform:uppercase;transition:all 0.3s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(0,194,255,0.3)}
.btn-secondary{
  padding:1rem 2.5rem;border:1px solid var(--apex-steel);color:var(--apex-white);
  text-decoration:none;font-family:var(--font-display);font-weight:600;
  font-size:0.9rem;letter-spacing:2px;text-transform:uppercase;transition:all 0.3s;
}
.btn-secondary:hover{border-color:var(--apex-accent);color:var(--apex-accent)}
.scroll-indicator{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  opacity:0;animation:fadeUp 1s 1.5s forwards;
}
.scroll-indicator span{font-size:0.65rem;letter-spacing:3px;text-transform:uppercase;color:var(--apex-steel)}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--apex-accent),transparent);animation:scrollPulse 2s infinite}
@keyframes scrollPulse{0%,100%{opacity:0.3}50%{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

section{padding:6rem 3rem;position:relative}
.section-tag{
  font-family:var(--font-display);font-size:0.7rem;letter-spacing:4px;
  text-transform:uppercase;color:var(--apex-accent);margin-bottom:1rem;
  display:flex;align-items:center;gap:1rem;
}
.section-tag::before{content:'';width:30px;height:1px;background:var(--apex-accent)}
.section-title{
  font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);
  font-weight:700;letter-spacing:3px;margin-bottom:1rem;
}
.section-desc{
  color:var(--apex-light);max-width:600px;font-size:0.95rem;line-height:1.8;margin-bottom:3rem;
}

#services{background:linear-gradient(180deg,var(--apex-dark),var(--apex-bg))}
.services-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;max-width:1200px;margin:0 auto;
}
.service-card{
  padding:2.5rem;position:relative;overflow:hidden;
  border:1px solid rgba(61,101,144,0.2);
  background:rgba(255,255,255,0.5);backdrop-filter:blur(10px);transition:all 0.4s;
}
.service-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--apex-accent),transparent);
  opacity:0;transition:opacity 0.4s;
}
.service-card:hover{
  border-color:rgba(0,194,255,0.3);transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,0.08);
}
.service-card:hover::before{opacity:1}
.service-icon{
  width:48px;height:48px;margin-bottom:1.5rem;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--apex-blue);color:var(--apex-accent);
}
.service-card h3{
  font-family:var(--font-display);font-size:1.2rem;font-weight:600;
  letter-spacing:2px;margin-bottom:0.75rem;
}
.service-card p{color:var(--apex-light);font-size:0.9rem;line-height:1.7}

#about{overflow:hidden}
.about-wrapper{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
}
.about-visual{position:relative;height:400px}
.about-shape{position:absolute;border:1px solid rgba(61,101,144,0.2)}
.about-shape:nth-child(1){width:300px;height:300px;top:50px;left:50px;animation:rotate1 20s linear infinite}
.about-shape:nth-child(2){width:200px;height:200px;top:100px;left:100px;border-color:rgba(0,194,255,0.2);animation:rotate2 15s linear infinite}
.about-shape:nth-child(3){width:100px;height:100px;top:150px;left:150px;background:rgba(0,194,255,0.05);border-color:var(--apex-accent)}
@keyframes rotate1{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes rotate2{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
.stats-row{display:flex;gap:3rem;margin-top:2.5rem}
.stat-number{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--apex-accent);line-height:1}
.stat-label{font-size:0.75rem;letter-spacing:2px;text-transform:uppercase;color:var(--apex-steel);margin-top:0.25rem}

#process{background:linear-gradient(180deg,var(--apex-bg),var(--apex-dark))}
.process-steps{max-width:900px;margin:0 auto;position:relative}
.process-steps::before{
  content:'';position:absolute;left:24px;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,var(--apex-blue),var(--apex-accent),var(--apex-blue),transparent);
}
.step{display:flex;gap:2.5rem;padding:2rem 0;position:relative}
.step-marker{
  width:48px;height:48px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--apex-blue);background:#e8eef4;
  font-family:var(--font-display);font-weight:700;color:var(--apex-accent);
  font-size:1rem;position:relative;z-index:2;transition:all 0.3s;
}
.step:hover .step-marker{border-color:var(--apex-accent);box-shadow:0 0 20px rgba(0,194,255,0.2)}
.step h3{font-family:var(--font-display);font-size:1.1rem;font-weight:600;letter-spacing:2px;margin-bottom:0.5rem}
.step p{color:var(--apex-light);font-size:0.9rem;line-height:1.7}

#tech{overflow:hidden}
.tech-marquee{display:flex;gap:3rem;animation:marquee 30s linear infinite;white-space:nowrap;margin:2rem 0}
.tech-marquee span{font-family:var(--font-display);font-size:1.5rem;font-weight:300;color:var(--apex-blue);letter-spacing:3px;text-transform:uppercase;flex-shrink:0}
.tech-marquee span.dot{color:var(--apex-accent);font-size:0.8rem}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

#contact{background:linear-gradient(180deg,var(--apex-dark),var(--apex-bg))}
.contact-wrapper{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem}
.contact-info{display:flex;flex-direction:column;gap:2rem}
.contact-item{display:flex;align-items:flex-start;gap:1rem}
.contact-icon{
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--apex-blue);color:var(--apex-accent);
}
.contact-item h4{font-family:var(--font-display);font-size:0.8rem;letter-spacing:2px;text-transform:uppercase;color:var(--apex-steel);margin-bottom:0.25rem}
.contact-item p{font-size:0.95rem;color:var(--apex-white)}
.contact-item a{color:var(--apex-accent);text-decoration:none}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.form-group input,.form-group textarea{
  width:100%;padding:1rem;background:rgba(255,255,255,0.6);
  border:1px solid rgba(61,101,144,0.2);color:var(--apex-white);
  font-family:var(--font-body);font-size:0.9rem;
  transition:border-color 0.3s;outline:none;resize:vertical;
}
.form-group input:focus,.form-group textarea:focus{border-color:var(--apex-accent)}
.form-group textarea{min-height:120px}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--apex-steel);font-size:0.85rem;letter-spacing:1px}
.btn-submit{
  padding:1rem 2rem;background:transparent;border:1px solid var(--apex-accent);
  color:var(--apex-accent);font-family:var(--font-display);font-weight:600;
  font-size:0.85rem;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:all 0.3s;
}
.btn-submit:hover{background:var(--apex-accent);color:var(--apex-dark)}

footer{
  padding:2rem 3rem;border-top:1px solid rgba(61,101,144,0.12);
  display:flex;align-items:center;justify-content:space-between;
  font-size:0.75rem;color:var(--apex-steel);letter-spacing:1px;
}
footer a{color:var(--apex-light);text-decoration:none;transition:color 0.3s}
footer a:hover{color:var(--apex-accent)}
.footer-links{display:flex;gap:2rem}

.reveal{opacity:0;transform:translateY(40px);transition:all 0.8s cubic-bezier(0.16,1,0.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

@media(max-width:900px){
  nav{padding:1rem 1.5rem}
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-links.open{
    display:flex;flex-direction:column;position:absolute;
    top:100%;left:0;right:0;background:rgba(232,238,244,0.98);
    padding:2rem;gap:1.5rem;border-bottom:1px solid var(--apex-blue);
  }
  section{padding:4rem 1.5rem}
  .about-wrapper{grid-template-columns:1fr}
  .about-visual{display:none}
  .contact-wrapper{grid-template-columns:1fr}
  .stats-row{gap:2rem;flex-wrap:wrap}
  .hero-logo img{height:100px}
  footer{flex-direction:column;gap:1rem;text-align:center}
}