/* Dark theme, earlier-style look with robust mobile UX + Unsplash Source API backgrounds */

/* variables */
:root{
  --bg:#07070a;
  --panel:#121217;
  --muted:#9aa0a6;
  --text:#e6eef2;
  --accent:#00b7d9;
  --glass:rgba(255,255,255,0.03);
  --radius:12px;
  --container:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

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

/* header */
.site-header{position:fixed;width:100%;top:0;z-index:1000;background:linear-gradient(180deg, rgba(7,7,10,0.7), rgba(7,7,10,0.45));backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.03);transition:background 220ms ease, box-shadow 220ms ease, border-color 220ms ease}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.brand{display:flex;flex-direction:column}
.brand-name{font-weight:700;letter-spacing:.3px}
.brand-sub{font-size:.8rem;color:var(--muted);margin-top:2px}

/* nav (desktop) */
.primary-nav ul{display:flex;gap:.6rem;align-items:center;list-style:none;margin:0;padding:0}
.primary-nav a{text-decoration:none;color:var(--text);padding:.45rem .6rem;border-radius:8px;font-weight:600}
.primary-nav a:hover{background:var(--glass)}
.primary-nav .cta{border:1px solid rgba(255,255,255,0.06);padding:.45rem .9rem;border-radius:999px}

/* menu toggle (mobile) */
.menu-toggle{display:none;background:transparent;border:0;color:var(--text);cursor:pointer;padding:.5rem;border-radius:6px;transition:background-color 0.3s ease}
.menu-toggle:hover{background:rgba(255,255,255,0.1)}
.menu-toggle:focus{outline:2px solid var(--accent);outline-offset:2px}

/* Add padding for fixed header */
body {
  padding-top: 70px; /* Adjust this value to match your header height */
}

/* HERO: use local avionics image */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:4rem 0;overflow:hidden;z-index:1;margin-top:-70px} /* negative margin to counteract body padding */
.hero-bg{position:absolute;inset:0;background-image:url('./assets/jaguar.jpg');background-size:cover;background-position:center;filter:saturate(.9) brightness(0.9);z-index:0}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.8));z-index:1}
.hero-content{position:relative;z-index:3;max-width:1000px;padding:3rem 1rem}
.hero h1{font-size:3.2rem;margin:0 0 1rem;line-height:1.1;font-weight:700}
.lead{color:var(--muted);font-size:1.2rem;margin-bottom:2rem;line-height:1.6;max-width:800px;margin-left:auto;margin-right:auto}
.hero-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;padding:.9rem 1.8rem;border-radius:999px;font-weight:600;cursor:pointer;text-decoration:none;font-size:1rem;transition:all 0.3s ease}
.btn.primary{background:linear-gradient(135deg,var(--accent), #00c2e0);color:#062022;box-shadow:0 8px 25px rgba(0,183,217,0.15)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(0,183,217,0.25)}
.btn.outline{background:transparent;border:2px solid rgba(255,255,255,0.2);color:var(--text);backdrop-filter:blur(10px)}
.btn.outline:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.3)}
.hero-badges{margin-top:1.5rem;color:var(--muted);display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;font-size:.95rem}
.hero-badges span{padding:.5rem 1rem;background:rgba(255,255,255,0.05);border-radius:20px;border:1px solid rgba(255,255,255,0.1)}

/* sections */
.section{padding:4rem 0;position:relative;z-index:1}
.section.dark{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02))}
h2{font-size:2.2rem;margin-bottom:1.5rem;font-weight:700;text-align:center}
.section p{font-size:1.1rem;line-height:1.7;color:var(--muted);max-width:800px;margin:0 auto 1.5rem;text-align:justify}
.section-footer{display:flex;justify-content:center;margin-top:3rem}
.section-footer a{
  display:inline-flex;
  align-items:center;
  padding:0.8rem 2rem;
  background:rgba(255,255,255,0.03);
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.1);
  transition:all 0.3s ease;
  backdrop-filter:blur(10px);
}
.section-footer a:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.2);
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(0,0,0,0.2);
}

/* cards & grids */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:2rem}
.card{background:rgba(255,255,255,0.03);padding:1.5rem;border-radius:12px;border:1px solid rgba(255,255,255,0.05);transition:transform 0.3s ease, box-shadow 0.3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,0.2)}
.card h3{font-size:1.3rem;margin-bottom:1rem;color:var(--accent);font-weight:600;text-align:center}
.card p{line-height:1.6;color:#FFFFFF;text-align:center}

/* Solutions & Services - 2 columns on desktop, 1 on mobile */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem}
.service{background:rgba(255,255,255,0.03);padding:1.5rem;border-radius:12px;border:1px solid rgba(255,255,255,0.05);font-weight:600;color:var(--text);text-align:center;transition:all 0.3s ease;backdrop-filter:blur(10px); align-content: center;}
.service:hover{background:rgba(255,255,255,0.06);transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,0.15)}

/* with-image sections using local images */
.with-image{position:relative;background-image:url('./assets/mig-tailpaint.jpg');background-size:cover;background-position:center;overflow:hidden;min-height:50vh;display:flex;align-items:center;z-index:1}
.with-image::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.7);z-index:0}
.with-image .container{position:relative;z-index:2}
.with-image-2{position:relative;background-image:url('./assets/formation.jpg');background-size:cover;background-position:center;overflow:hidden;min-height:50vh;align-items:center;z-index:1}
.with-image-2::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.75);z-index:0}
.with-image-2 .container{position:relative;z-index:2}
.with-image-3{position:relative;background-image:url('./assets/refuel.jpg');background-size:cover;background-position:center;overflow:hidden;min-height:50vh;align-items:center;z-index:1}
.with-image-3::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.75);z-index:0}
.with-image-3 .container{position:relative;z-index:2}

/* Mobile image optimizations */
@media (max-width:640px){
  .hero-bg{background-size:cover;background-position:center top}
  .with-image{background-size:cover;background-position:center top;min-height:40vh}
  .with-image-2{background-size:cover;background-position:center top;min-height:40vh}
}

/* team grid - single row on desktop, column on mobile */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.team-item{background:rgba(18,20,25,0.9);padding:1.5rem;border-radius:12px;border:1px solid rgba(255,255,255,0.05);transition:all 0.3s ease;backdrop-filter:blur(10px)}
.team-item:hover{transform:translateY(-3px);background:rgba(18,20,25,0.95);box-shadow:0 8px 25px rgba(0,0,0,0.2)}
.team-item h3{font-size:1.2rem;margin-bottom:1rem;color:var(--accent);font-weight:600;text-align:center}
.team-item p{line-height:1.6;color:var(--muted);text-align:center}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 450px;gap:2rem;align-items:start;margin-top:2rem}
.contact-card{background:rgba(255,255,255,0.03);padding:2rem;border-radius:12px;border:1px solid rgba(255,255,255,0.05);backdrop-filter:blur(10px)}
.contact-card h2{text-align:center;margin-bottom:1rem;color:var(--text)}
.contact-card p{line-height:1.6;margin-bottom:1rem;color:var(--muted)}
.contact-card .muted{text-align:center;font:1.1rem;color:var(--accent);font-weight:500}

.contact-form{display:flex;flex-direction:column;gap:1rem;background:rgba(255,255,255,0.03);padding:2rem;border-radius:12px;border:1px solid rgba(255,255,255,0.05);backdrop-filter:blur(10px)}
.contact-form input,.contact-form textarea,.contact-form select{background:transparent;border:1px solid rgba(255,255,255,0.1);color:var(--text);padding:1rem;border-radius:8px;font-size:1rem;transition:all 0.3s ease}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,183,217,0.1)}
.contact-form textarea{min-height:140px;resize:vertical}
.form-row{display:flex;gap:1rem;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.form-status{color:var(--muted);font-size:1rem}

/* footer */
.site-footer{padding:1.2rem 0;border-top:1px solid rgba(255,255,255,0.02);color:var(--muted);text-align:center;position:relative;z-index:1}

/* responsive */
@media (max-width:1200px){
  .container{max-width:95%;padding:0 1.5rem}
  .hero h1{font-size:2.8rem}
  .hero .lead{font-size:1.1rem}
}

@media (max-width:900px){ 
  .contact-grid{grid-template-columns:1fr;gap:1.5rem}
  .hero-actions{flex-direction:column;align-items:center}
  .hero-actions .btn{width:100%;max-width:300px}
  .hero-badges{justify-content:center}
  .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
}

@media (max-width:820px){
  .primary-nav{display:none}
  .menu-toggle{display:inline-flex}
  .header-inner{align-items:center;justify-content:space-between}
  .section{padding:3rem 0}
  .hero{padding:3rem 0}
  .hero h1{font-size:2.4rem}
  .hero .lead{font-size:1rem}
  h2{font-size:1.8rem}
  .contact-grid{gap:1rem}
  .contact-card{padding:1.5rem}
  .contact-form{padding:1.5rem}
}

/* mobile nav panel */
.mobile-nav-panel{position:fixed;top:var(--header-offset,70px);left:0;right:0;background:linear-gradient(180deg,#06060a,#0a0a0d);padding:1.5rem;border-top:1px solid rgba(255,255,255,0.03);z-index:90;display:none;flex-direction:column;gap:1rem;backdrop-filter:blur(10px);max-height:calc(100vh - var(--header-offset,70px));overflow-y:auto;transform:translateY(-100%);transition:transform 0.3s ease}

/* scrolled state: stronger backdrop to keep header readable over hero images */
.site-header.scrolled{background:linear-gradient(180deg, rgba(7,7,10,0.98), rgba(7,7,10,0.98));box-shadow:0 8px 30px rgba(0,0,0,0.6);border-bottom:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(8px)}
.mobile-nav-panel.show{display:flex;transform:translateY(0)}
.mobile-nav-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.5rem}
.mobile-nav-panel a{padding:1rem 1.2rem;border-radius:8px;color:var(--text);text-decoration:none;font-weight:500;transition:all 0.3s ease;display:block}
.mobile-nav-panel a:hover{background:var(--glass);transform:translateX(5px)}
.mobile-nav-panel .cta{border:1px solid rgba(255,255,255,0.2);padding:1rem 1.2rem;border-radius:8px;text-align:center;margin-top:0.5rem}

@media (max-width:640px){
  .container{padding:0 1rem}
  .hero{padding:2rem 0}
  .hero h1{font-size:2rem;line-height:1.2}
  .hero .lead{font-size:.95rem;margin-bottom:1.5rem}
  .hero-actions{gap:.75rem}
  .hero-badges{gap:.5rem;font-size:.85rem}
  .hero-badges span{padding:.4rem .8rem}
  .section{padding:2.5rem 0}
  h2{font-size:1.6rem;margin-bottom:1rem}
  .cards{gap:1rem}
  .card{padding:1.2rem}
  .service{padding:1.2rem;font-size:.95rem}
  .team-item{padding:1.2rem}
  .contact-card{padding:1.2rem}
  .contact-form{padding:1.2rem}
  .contact-form input,.contact-form textarea,.contact-form select{padding:.8rem;font-size:.95rem}
  .form-row{flex-direction:column;align-items:stretch;gap:.5rem}
  .form-row .btn{width:100%;justify-content:center}
  .form-status{order:-1;text-align:center;margin-bottom:.5rem}
}

@media (max-width:480px){
  .hero h1{font-size:1.8rem}
  .hero .lead{font-size:.9rem}
  .brand-sub{display:none}
  .brand-name{font-size:1rem}
  .hero-badges{flex-direction:column;align-items:center}
  .hero-badges span{width:fit-content}
  .btn{padding:.8rem 1.5rem;font-size:.95rem}
  .section{padding:2rem 0}
  h2{font-size:1.4rem}
  .card{padding:1rem}
  .service{padding:1rem;font-size:.9rem}
  .team-item{padding:1rem}
  .contact-card{padding:1rem}
  .contact-form{padding:1rem}
  .contact-form textarea{min-height:120px}
  .form-row{flex-direction:column;align-items:stretch;gap:.75rem}
  .form-row .btn{width:100%;padding:1rem;font-size:1rem;font-weight:600}
  .form-status{order:-1;text-align:center;margin-bottom:0;font-size:.9rem}
}