/* =========================================================
   GEC SOLAR — CONSOLIDATED THEME (safe with Bootstrap)
   ========================================================= */

:root{
  --primary:#0d6efd; --dark:#0b2035; --accent:#ffc107; --ink:#212529;
  --bg:#ffffff; --muted:#6c757d;
}

/* Base / Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Container */
.container{max-width:1140px;margin:0 auto;padding:0 16px}

/* ================= NAVBAR ================= */
.navbar{
  position:sticky; top:0; z-index:50; background:#0f1320e6; backdrop-filter: blur(8px);
  color:#fff; border-bottom:1px solid #1e2233;
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.brand img{height:36px;width:auto;border-radius:6px;display:block;background:#fff}
.menu{display:flex;gap:20px;align-items:center}
.menu a{color:#cfd6e4;font-weight:600;text-decoration:none}
.menu a:hover,.menu a.active{color:#fff}

/* ================= HERO (home only) ================= */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center; color:#fff; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg, #02203A, #003C8F 45%, #0087FF);
  isolation:isolate;
}
.veil::before{
  content:""; position:absolute; inset:-40% -30% 0 -30%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.07), transparent 60%),
    conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.06), transparent 40% 60%, rgba(255,255,255,.06));
  filter: blur(60px); animation: drift 22s linear infinite alternate; opacity:.9; z-index:0;
}
@keyframes drift{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(6%,-5%,0) rotate(8deg)}}
.hero .wrap{position:relative; z-index:1; padding:64px 0}
.kicker{
  display:inline-block; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25);
  padding:.45rem .75rem; border-radius:999px; backdrop-filter: blur(2px); font-weight:700;
}
.title{font-size:clamp(32px,5vw,56px); line-height:1.1; margin:16px 0 12px; font-weight:800}
.lead{font-size:clamp(16px,2.3vw,20px); color:#e7f1ff; max-width:60ch}

/* Buttons */
.btn{
  display:inline-block; padding:14px 18px; border-radius:12px; font-weight:800;
  box-shadow:0 12px 30px rgba(0,0,0,.2); transform: translateY(0); transition: transform .2s, box-shadow .2s;
}
.btn-primary{background:var(--accent); color:#1a1a1a}
.btn-primary:hover{transform: translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.28)}
.btn-outline{border:2px solid #fff;color:#fff}
.btn-outline:hover{background:#ffffff1a}
.btn-warning{background:var(--accent); color:#1a1a1a}
.btn-animated{transition:all .3s ease;border-radius:50px}
.btn-animated:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.2)}
.btn-pill{border-radius:999px}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}

/* Floating icons (home) */
.float-icon{position:absolute; opacity:.18; color:#fff; animation: floaty 8s ease-in-out infinite}
.i1{top:12%; right:6%; font-size:120px; animation-delay:0s}
.i2{bottom:8%; left:5%; font-size:100px; animation-delay:1.2s}
.i3{top:36%; left:46%; font-size:72px; animation-delay:.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ================= STATS ================= */
.stats{background: linear-gradient(180deg,#f8fbff,#ecf3ff); border-radius:20px; margin-top:28px}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; text-align:center; padding:20px}
.stat h3{margin:0;font-size:28px;font-weight:900}
.muted{color:var(--muted)}

/* Wavy divider (home) */
.wave{display:block;width:100%;height:70px;margin-top:-35px}

/* Sections */
.section{padding:72px 0}
.center{text-align:center}
hr{border:0;border-top:1px solid #e9eef7}

/* ================= CARDS ================= */
.cards{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{
  background:#fff; border:1px solid #eef2f7; border-radius:16px; padding:22px;
  box-shadow:0 10px 30px rgba(13,110,253,.08); transition: transform .25s, box-shadow .25s;
}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,32,58,.15)}
.icon{
  width:60px;height:60px;border-radius:14px;display:grid;place-items:center;margin-bottom:10px;
  background:rgba(13,110,253,.1); color:var(--primary)
}
.stretched{color:var(--primary); font-weight:700}
.lift{transition: transform .25s ease, box-shadow .25s ease}
.lift:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,32,58,.15)}

/* ================= STEPS ================= */
.steps{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{
  background:#fff;border:1px solid #eef2f7;border-radius:16px;padding:24px;
  text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.05)
}

/* ================= HEADER BAND (inner pages) ================= */
.band{padding:84px 0;background:#f6f9ff;border-bottom:1px solid #e9eef7}
.band h1{margin:0 0 6px;font-size:clamp(26px,4.5vw,38px);font-weight:800}

/* ================= FOOTER ================= */
footer{background:#0f1320;color:#cfd6e4}
footer a{color:#cfd6e4;text-decoration:none}
footer a:hover{color:#fff}
footer .grid{display:grid;gap:22px;grid-template-columns:2fr 1fr 1fr}

/* ================= REVEAL ANIMATION ================= */
.reveal{opacity:0; transform: translateY(18px); transition: all .6s ease}
.reveal.show{opacity:1; transform: none}

/* ================= RESPONSIVE TWEAKS ================= */
@media (max-width:768px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  footer .grid{grid-template-columns:1fr}
}

/* =========================================================
   SCOPED ADDITIONS (do not override Bootstrap grid)
   ========================================================= */

/* TEAM grid */
.team-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:768px){.team-grid{grid-template-columns:repeat(3,1fr)}}

/* Team card */
.card-soft{
  background:#fff; border:1px solid #eef2f7; border-radius:16px;
  box-shadow:0 10px 30px rgba(13,110,253,.08);
  transition: transform .25s, box-shadow .25s; overflow:hidden;
}
.card-soft .card-body{padding:18px;text-align:center}
.card-soft h3{font-weight:700;color:var(--dark)}
.card-soft p.muted{color:var(--muted);font-size:.95rem}

/* Team image fills placeholder */
.card-soft .thumb{
  width:100%;
  height:240px;
  object-fit:cover;
  object-position:center;
  display:block;
  padding:0;
  background:none;
  border-bottom:1px solid #eef2f7;
  border-top-left-radius:16px;border-top-right-radius:16px;
  transition:transform .3s ease;
}
@media (min-width:768px){ .card-soft .thumb{ height:280px; } }
@media (min-width:1200px){ .card-soft .thumb{ height:320px; } }
.card-soft:hover .thumb{ transform:scale(1.02); }

/* CTA button row */
.cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem}

/* Forms */
.gec-form input,.gec-form select,.gec-form textarea{
  font:inherit;color:inherit;background:#fff;border:1px solid #e5e9f2;border-radius:12px;
  padding:.75rem .9rem;width:100%;transition:border-color .2s, box-shadow .2s;
}
.gec-form input:focus,.gec-form select:focus,.gec-form textarea:focus{
  outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,110,253,.15);
}
.gec-form label{font-weight:700;display:block;margin-bottom:.35rem;color:#0b2035}
.gec-form .form-row{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:768px){.gec-form .form-row{grid-template-columns:1fr 1fr}}
.gec-form .form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Alerts / badges */
.gec-badge{
  display:inline-block;padding:.35rem .6rem;border-radius:999px;
  background:rgba(13,110,253,.08);color:var(--primary);font-weight:700;font-size:.8rem;
}
.gec-alert{padding:1rem 1.2rem;border-radius:14px;border:1px solid #e9eef7;background:#f8fbff}
.gec-alert.success{background:#f6fff8;border-color:#d7f5dd;color:#1e7e34}
.gec-alert.error{background:#fff6f6;border-color:#f5d7d7;color:#842029}

/* Tables */
.gec-table{width:100%;border-collapse:collapse;font-size:.95rem}
.gec-table th,.gec-table td{padding:.75rem .9rem;border-bottom:1px solid #eef2f7;text-align:left}
.gec-table thead th{background:#f8fbff;font-weight:800;color:#0b2035}

/* ===== Mobile drawer fixes (global) ===== */
@media (max-width:860px){
  .drawer{
    background: rgba(15,19,32,.98);
    backdrop-filter: blur(6px);
    border-top: 1px solid #1f2940;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .drawer a{
    color:#eaf2ff;
    font-weight:800;
    padding:16px 20px;
    background: transparent;
  }
  .drawer a.active{ background:#121a2c; color:#fff; }
  .drawer a:hover{  background:#182238; color:#fff; }
  .drawer a:focus-visible{
    outline:2px solid #4da3ff; outline-offset:2px;
  }
  .scrim{
    position:fixed; inset:64px 0 0 0; z-index:84;
    background: rgba(0,0,0,.45);
    opacity:0; pointer-events:none; transition: opacity .2s ease;
  }
  .scrim.open{ opacity:1; pointer-events:auto; }
  .nav-mobile{
    background:#121a2c; color:#eaf2ff; border:1px solid #2a3653;
    padding:8px 12px; border-radius:10px; font-weight:900;
  }
  .nav-mobile:active{ transform: translateY(1px); }
}

/* =========================
   MOBILE NAV DRAWER (PATCH)
   ========================= */

/* 1) Drawer mechanics across all sizes */
.drawer{
  position: fixed;
  left: 0; right: 0; top: 0;
  transform: translateY(-120%);
  transition: transform .28s ease;
  z-index: 1200;
  background: rgba(15,19,32,.98);
  backdrop-filter: blur(6px);
  border-top: 1px solid #1f2940;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  padding: 72px 16px 16px;
}
.drawer.open{ transform: translateY(0); }

.drawer a{
  display:block;
  text-decoration:none;
  border-radius:12px;
  font-weight:800;
  padding:16px 18px;
  letter-spacing:.2px;
  color:#eaf2ff;
}
.drawer a + a{ margin-top:6px; }
.drawer a:hover{ background:#182238; color:#fff; }
.drawer a.active{ background:#0d6efd; color:#fff; }

/* 2) Backdrop */
.scrim,
.nav-overlay{
  position: fixed;
  inset: 64px 0 0 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.scrim.open,
.nav-overlay.open{ opacity:1; pointer-events:auto; }

/* 3) Show burger/hide desktop menu on small screens */
@media (max-width: 860px){
  .menu{ display:none; }
  .nav-mobile{
    display:inline-flex; align-items:center; justify-content:center;
    background:#121a2c; color:#eaf2ff; border:1px solid #2a3653;
    width:42px; height:42px; border-radius:10px; font-weight:900;
    line-height:1; cursor:pointer;
  }
  .nav-mobile:active{ transform: translateY(1px); }

  .navbar{ background:#0f1320e6; border-bottom:1px solid #1e2233; }
  .brand div{ color:#ffffff; }
}

/* 4) Accessibility + reduced motion */
.drawer:focus-within a:focus{
  outline:2px solid #4da3ff; outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .drawer{ transition:none; }
}

/* =========================================================
   PARTNER LOGOS MARQUEE (FULL COLOR, BIGGER LOGOS)
   Works with:
   - <div class="logo-marquee"><div class="logo-track">...</div></div>
   - OR <div class="marquee"><div class="track">...</div></div>
   ========================================================= */

/* Outer band */
.marquee,
.logo-marquee {
  overflow:hidden;
  position:relative;
  padding:12px 0;
  background:#ffffff;
  border-radius:16px;
  border:1px solid #eef2f7;
  box-shadow:0 8px 24px rgba(15,19,32,.06);
}

/* Scrolling track */
.marquee .track,
.logo-marquee .logo-track {
  display:flex;
  align-items:center;
  gap:80px;               /* space between logos */
  padding:12px 48px;
  width:max-content;
  animation: logo-scroll 26s linear infinite;
}

/* Pause on hover */
.marquee:hover .track,
.logo-marquee:hover .logo-track {
  animation-play-state:paused;
}

/* Each logo tile */
.logo-tile{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:240px;            /* visible space per logo */
  height:140px;           /* band height */
}

/* Actual logo image */
.logo-tile img{
  max-height:120px;       /* BIG logos */
  width:auto;
  object-fit:contain;
  display:block;
  filter:saturate(1.05) contrast(1.05);
  transition: transform .25s ease, filter .25s ease;
}

.logo-tile img:hover{
  transform:scale(1.06);
  filter:saturate(1.15) contrast(1.1);
}

/* Scroll keyframes */
@keyframes logo-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee .track,
  .logo-marquee .logo-track{
    animation:none;
  }
}

/* Slightly smaller logos on very small screens */
@media (max-width:600px){
  .logo-tile{
    width:200px;
    height:120px;
  }
  .logo-tile img{
    max-height:100px;
  }
}