@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&display=swap');
@import 'variables.css';

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; overflow-x:hidden; }
body { font-family:var(--font-body); background:var(--bg-primary); color:var(--text-dark); overflow-x:hidden; line-height:1.7; }
a { text-decoration:none; color:inherit; transition:var(--transition-fast); }
ul { list-style:none; }
img { max-width:100%; display:block; }
.container { max-width:var(--container); margin:0 auto; padding:0 24px; width:100%; }
section { position:relative; overflow:hidden; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); line-height:1.2; color:var(--text-dark); }
h1 { font-size:clamp(2.5rem,5vw,4.5rem); font-weight:800; }
h2 { font-size:clamp(2rem,4vw,3.2rem); font-weight:700; }
h3 { font-size:clamp(1.3rem,2.5vw,1.8rem); font-weight:600; }
p { color:var(--text-body); font-size:1.05rem; }
.section-padding { padding:100px 0; }
.text-center { text-align:center; }
.text-orange { color:var(--orange); }
.text-navy { color:var(--navy-mid); }

/* Loader — Light theme */
#loader { position:fixed; inset:0; background:var(--white); z-index:10000; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .6s, visibility .6s; }
#loader.hidden { opacity:0; visibility:hidden; }
.loader-logo { position:relative; margin-bottom:20px; }
.loader-logo-img { height:60px; width:auto; animation:logoBob 2s ease-in-out infinite; }
.loader-bar { width:200px; height:3px; background:rgba(10,22,40,0.08); border-radius:3px; overflow:hidden; margin-top:20px; }
.loader-bar-inner { height:100%; width:0%; background:linear-gradient(90deg,var(--orange),var(--orange-glow)); border-radius:3px; animation:loadBar 2s ease-in-out forwards; }
.loader-text { margin-top:15px; font-family:var(--font-heading); font-size:.9rem; letter-spacing:3px; text-transform:uppercase; color:var(--text-muted); }
@keyframes logoBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes loadBar { 0%{width:0} 100%{width:100%} }

/* Navbar — Light */
.navbar { position:fixed; top:0; left:0; width:100%; z-index:1000; padding:20px 0; transition:var(--transition); background:transparent; }
.navbar.scrolled { background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border-bottom:1px solid rgba(10,22,40,0.08); padding:12px 0; box-shadow:0 2px 20px rgba(10,22,40,0.06); }
.navbar .container { display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; transition:var(--transition); }
.logo-svg { height: 42px; width: auto; display: block; transition: var(--transition); }
.navbar:not(.scrolled):not(.light-page) .logo-svg { filter: brightness(0) invert(1); }
.logo-text-wrap { display:flex; flex-direction:column; line-height:1.15; }
.logo-text-wrap .logo-title { font-family:var(--font-heading); font-weight:800; font-size:1.05rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--white); transition:var(--transition); }
.logo-text-wrap .logo-subtitle { font-family:var(--font-heading); font-weight:600; font-size:0.5rem; letter-spacing:3.5px; text-transform:uppercase; color:rgba(255,255,255,0.65); transition:var(--transition); }
.navbar.scrolled .logo-text-wrap .logo-title,
.navbar.light-page .logo-text-wrap .logo-title { color:var(--navy); }
.navbar.scrolled .logo-text-wrap .logo-subtitle,
.navbar.light-page .logo-text-wrap .logo-subtitle { color:var(--navy-mid); }
.footer .logo { display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.footer .logo-svg { height:45px; filter:none; }
.footer .logo-text-wrap .logo-title { color:var(--navy); }
.footer .logo-text-wrap .logo-subtitle { color:var(--navy-mid); }

.nav-links { display:flex; align-items:center; gap:35px; }
.nav-links a { font-weight:500; font-size:.95rem; letter-spacing:.3px; position:relative; padding:5px 0; color:rgba(255,255,255,0.85); }
.navbar.scrolled .nav-links a { color:var(--text-body); }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--navy-mid); transition:var(--transition); border-radius:2px; }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.nav-links a:hover { color:var(--navy); }
.navbar.scrolled .nav-links a:hover { color:var(--navy); }
.nav-links > a:last-child { background:linear-gradient(135deg,var(--orange),var(--orange-dark)); padding:10px 24px !important; border-radius:50px; font-weight:600; color:var(--white) !important; box-shadow:0 4px 15px rgba(0,123,255,0.3); }
.nav-links > a:last-child::after { display:none !important; }
.nav-links > a:last-child:hover { transform:translateY(-2px); box-shadow:0 6px 25px rgba(0,123,255,0.45); color:var(--white) !important; }
.nav-cta { background:linear-gradient(135deg,var(--orange),var(--orange-dark)); padding:10px 24px; border-radius:50px; font-weight:600; font-size:.9rem; border:none; color:var(--white); cursor:pointer; transition:var(--transition); box-shadow:0 4px 15px rgba(0,123,255,0.3); }
.nav-cta:hover { transform:translateY(-2px); box-shadow:var(--shadow-glow); }

/* Navbar on light pages (non-hero pages) */
.navbar.light-page { background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border-bottom:1px solid rgba(10,22,40,0.08); padding:12px 0; box-shadow:0 2px 20px rgba(10,22,40,0.06); }
.navbar.light-page .nav-logo { color:var(--navy); }
.navbar.light-page .nav-links a { color:var(--text-body); }
.navbar.light-page .nav-links a:hover { color:var(--navy); }
.navbar.light-page .hamburger span { background:var(--navy); }

/* Dropdown */
.nav-dropdown { position:relative; }
.nav-dropdown > a { display:flex; align-items:center; gap:5px; }
.nav-dropdown > a .arrow { font-size:.6rem; transition:var(--transition); display:inline-block; }
.nav-dropdown:hover > a .arrow, .nav-dropdown.open > a .arrow { transform:rotate(180deg); }
.dropdown-menu { position:absolute; top:calc(100% + 15px); left:50%; transform:translateX(-50%) translateY(8px); min-width:220px; background:var(--white); border:1px solid rgba(10,22,40,0.08); border-radius:var(--radius-sm); padding:8px 0; opacity:0; visibility:hidden; transition:all 0.3s ease; box-shadow:var(--shadow-md); z-index:1000; pointer-events:none; }
.dropdown-menu::before { content:''; position:absolute; top:-8px; left:50%; transform:translateX(-50%); border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid var(--white); }
.dropdown-menu::after { content:''; position:absolute; top:-18px; left:0; right:0; height:18px; background:transparent; }
.nav-dropdown:hover .dropdown-menu, .nav-dropdown.open .dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:all; }
.dropdown-menu a { display:flex; align-items:center; gap:10px; padding:10px 20px; font-size:.9rem; color:var(--text-body) !important; font-weight:500; transition:var(--transition-fast); white-space:nowrap; }
.dropdown-menu a::after { display:none !important; }
.dropdown-menu a:hover { background:var(--bg-secondary); color:var(--navy) !important; padding-left:24px; }
.dropdown-menu a .dd-icon { font-size:1.1rem; width:28px; text-align:center; flex-shrink:0; }
.dropdown-menu .dd-divider { height:1px; background:rgba(10,22,40,0.06); margin:4px 0; }
.dropdown-menu a.dd-all { color:var(--navy-mid) !important; font-weight:600; }
.dropdown-menu a.active-service { background:rgba(0,123,255,0.08); color:var(--orange) !important; font-weight:600; border-left:3px solid var(--orange); padding-left:17px; }
.dropdown-menu a.active-service:hover { background:rgba(0,123,255,0.12); }

.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001; }
.hamburger span { width:28px; height:2.5px; background:var(--white); border-radius:2px; transition:var(--transition); }
.navbar.scrolled .hamburger span { background:var(--navy); }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Hero — Light Theme with Video */
.hero { position:relative; height:100vh; min-height:700px; display:flex; align-items:center; overflow:hidden; background:var(--bg-primary); }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg video, .hero-bg img { width:100%; height:100%; object-fit:cover; opacity: 1; }
.hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.25); z-index:1; }
.hero-overlay::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.2) 100%); }
.hero-content { position:relative; z-index:2; max-width:750px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.15); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.25); padding:8px 20px; border-radius:50px; font-size:.85rem; font-weight:600; margin-bottom:25px; color:var(--white); box-shadow:0 4px 15px rgba(0,0,0,0.15); }
.hero-badge .dot { width:8px; height:8px; background:var(--orange); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.3)} }
.hero h1 { margin-bottom:20px; color:var(--white); text-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.hero h1 .highlight { background:linear-gradient(135deg,var(--orange),var(--orange-glow)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow: none; position:relative; z-index:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.hero h1 .highlight::after { content:''; position:absolute; inset:-10px; background:none; z-index:-1; pointer-events:none; }
.hero-sub { font-size:1.2rem; color:rgba(255,255,255,0.9); margin-bottom:40px; max-width:550px; line-height:1.8; text-shadow: 0 1px 4px rgba(0,0,0,0.4); font-weight:500; }
.hero-buttons { display:flex; gap:16px; flex-wrap:wrap; }
.hero .btn-secondary { border-color:rgba(255,255,255,0.5); color:var(--white); backdrop-filter:blur(5px); background:rgba(255,255,255,0.1); }
.hero .btn-secondary:hover { border-color:var(--orange); color:var(--orange); }
.btn-primary { background:linear-gradient(135deg,var(--orange),var(--orange-dark)); color:var(--white); padding:15px 35px; border-radius:50px; font-weight:600; font-size:1rem; border:none; cursor:pointer; transition:var(--transition); box-shadow:0 4px 20px rgba(0,123,255,0.35); position:relative; overflow:hidden; }
.btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.2),transparent); opacity:0; transition:var(--transition); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 8px 35px rgba(0,123,255,0.5); }
.btn-primary:hover::before { opacity:1; }
.btn-secondary { background:transparent; border:2px solid rgba(255,255,255,0.25); color:var(--white); padding:14px 35px; border-radius:50px; font-weight:600; font-size:1rem; cursor:pointer; transition:var(--transition); backdrop-filter:blur(5px); }
.btn-secondary:hover { border-color:var(--orange); color:var(--orange); transform:translateY(-3px); }
/* Light variant for btn-secondary on light backgrounds */
.btn-secondary-light { background:transparent; border:2px solid var(--navy-mid); color:var(--navy-mid); padding:14px 35px; border-radius:50px; font-weight:600; font-size:1rem; cursor:pointer; transition:var(--transition); }
.btn-secondary-light:hover { border-color:var(--orange); color:var(--orange); transform:translateY(-3px); }
.scroll-indicator { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2; }
.scroll-indicator .mouse { width:26px; height:40px; border:2px solid rgba(255,255,255,0.4); border-radius:13px; display:flex; justify-content:center; padding-top:8px; }
.scroll-indicator .wheel { width:3px; height:8px; background:var(--orange); border-radius:3px; animation:scrollWheel 2s infinite; }
@keyframes scrollWheel { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(12px)} }
.scroll-indicator span { font-size:.75rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.7); }
@media(max-width:768px) {
  .scroll-indicator { display:none; }
}

/* Floating particles */
.particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.particle { position:absolute; width:4px; height:4px; background:rgba(0,123,255,0.3); border-radius:50%; animation:floatParticle 15s infinite linear; }
@keyframes floatParticle { 0%{transform:translateY(100vh) rotate(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-10vh) rotate(720deg);opacity:0} }

/* Hero video fallback gradient */
@keyframes heroGradient { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }