:root{
  --bg:#050811; --panel:#0A0F1A; --txt:#F2F7FF; --muted:#CFE6FF;
  --p1:#0EA5FF; --p2:#2563EB; --glass:rgba(255,255,255,.10);
   --nav-safe-desktop: 112px;  /* space under nav on desktop */
  --nav-safe-mobile: 128px;   /* space under nav on mobile */
}


/* push the whole Solutions content down from the navbar */
main.solutions{
  padding-top: var(--nav-safe-desktop);
}

/* also add a bit of breathing room inside the first stripe */
.intro.section{
  padding-top: 16px;   /* small inner pad so heading never kisses the edge */
}

/* mobile/tablet: a touch more offset because the nav stacks/tall logo */
@media (max-width: 1024px){
  main.solutions{ padding-top: var(--nav-safe-mobile); }
  .intro.section{ padding-top: 12px; }
}
/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--txt)}
a{color:inherit; text-decoration:none}

/* Nav/Footer accents (blue only) */
header.navbar.scrolled{box-shadow:0 0 20px rgba(14,165,255,.25) !important}
header.navbar nav a::after{background:linear-gradient(90deg,var(--p1),var(--p2)) !important}
header.navbar .cta{background:linear-gradient(90deg,var(--p1),var(--p2)) !important}
footer h3{color:var(--p1) !important}

/* tighter rhythm */
.section{padding:48px 0}
.intro.section{padding-bottom:16px}
.container{width:min(1180px,92%); margin:auto}

/* intro */
.kicker{letter-spacing:.10em; text-transform:uppercase; font-size:.82rem; color:#E2F4FF}
.intro h1{font-size:clamp(2rem,4.6vw,3rem); margin:.2rem 0 .3rem}
.lede{color:#e6f4ff; margin:0}

/* cards */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.service{
  display:grid; grid-template-columns:1.05fr .95fr; gap:16px; align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--glass); border-radius:18px; padding:16px;
  position:relative; overflow:hidden; cursor:pointer;
  transition:transform .32s cubic-bezier(.2,.75,.2,1), box-shadow .32s, border-color .32s;
}
.service:nth-child(even){grid-template-columns:.95fr 1.05fr}
.service:hover{transform:translateY(-2px) scale(1.02); border-color:rgba(14,165,255,.35); box-shadow:0 24px 80px rgba(14,165,255,.14)}

.media{border-radius:14px; overflow:hidden; box-shadow:0 12px 30px rgba(14,165,255,.18)}
.media img{width:100%; height:auto; display:block; transform:scale(1); transition:transform .55s ease}
.service:hover .media img{transform:scale(1.04)}

.copy h2{margin:0 0 .35rem}
.copy p{margin:0 0 .35rem; color:#d7e7ff}
.copy ul{margin:0; padding-left:18px; color:#c8dcff}     /* bullets visible */
.copy li{margin:.25rem 0}

/* modal */
.modal{position:fixed; inset:0; display:none; place-items:center; background:rgba(2,6,14,.62); backdrop-filter:blur(6px); z-index:1000}
.modal.open{display:grid}
.modal-card{
  width:min(980px,92%); max-height:86vh; overflow:auto; color:#F2F7FF;
  border:1px solid var(--glass); border-radius:20px; padding:0; background:var(--panel);
  box-shadow:0 40px 120px rgba(14,165,255,.25); animation:pop .28s ease-out;
  display:grid; grid-template-columns:1.1fr .9fr;
}
@keyframes pop{from{transform:scale(.96); opacity:.6} to{transform:scale(1); opacity:1}}

.modal-media{position:relative; overflow:hidden; border-right:1px solid var(--glass)}
.modal-media .gallery{position:relative}
.modal-media img{display:block; width:100%; height:100%; object-fit:cover}
.gallery-thumbs{display:flex; gap:8px; padding:10px; overflow:auto; background:rgba(255,255,255,.04); border-top:1px solid var(--glass)}
.gallery-thumbs img{height:54px; width:84px; object-fit:cover; border-radius:8px; opacity:.7; cursor:pointer}
.gallery-thumbs img.active{opacity:1; outline:2px solid var(--p1)}

.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 18px 0}
.modal-head h3{margin:0}
.modal-close{border:0; background:transparent; color:#EAF6FF; font-size:1.3rem; line-height:1; cursor:pointer; padding:.35rem .5rem; border-radius:8px}
.modal-body{padding:12px 18px 18px}
.modal-body p{color:#d9ebff}
.modal-body ul{margin:.4rem 0 .8rem; padding-left:18px; color:#cfe0ff}
.modal-actions{padding:0 18px 18px}

.btn{display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:600; padding:.9rem 1.3rem; transition:transform .25s, box-shadow .25s}
.btn-primary{background:linear-gradient(90deg,var(--p1),var(--p2)); color:white; box-shadow:0 14px 32px rgba(14,165,255,.25)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 22px 42px rgba(14,165,255,.35)}

/* reveal */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal{opacity:1; transform:none}

/* responsive */
@media (max-width:1080px){
  .grid{grid-template-columns:1fr}
  .service{grid-template-columns:1fr}
  .modal-card{grid-template-columns:1fr}
  .modal-media{height:40vh; border-right:0; border-bottom:1px solid var(--glass)}
}