:root{--bg1:#0b1424;--bg2:#0d1b2a;--panel:rgba(255,255,255,.06);--border:rgba(255,255,255,.12);--text:#e5e7eb;--muted:#cbd5e1;--brand1:#38bdf8;--brand2:#2563eb}
*{box-sizing:border-box} html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:radial-gradient(80rem 60rem at 50% -10%, rgba(56,189,248,.08), transparent 60%), linear-gradient(180deg,var(--bg1),var(--bg2)); color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(8px); background:rgba(13,23,42,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:600}
.badge{display:inline-flex;gap:.5rem;align-items:center;border:1px solid var(--border);background:rgba(255,255,255,.06);border-radius:999px;padding:.25rem .6rem;font-size:.8rem;color:#d1d5db}
.hero{padding:6rem 0 5rem}
h1{font-size:clamp(2rem,6vw,4rem);line-height:1.05;margin:.75rem 0 0}
.gradient{background:linear-gradient(90deg,var(--brand1),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:720px;color:var(--muted);margin-top:.75rem}
.btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}
.btn{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.06);padding:.8rem 1.1rem;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff;border:0}
.grid{display:grid;gap:1rem}
.cards{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{border:1px solid var(--border); background:var(--panel); border-radius:18px; padding:1.25rem; transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-4px)}
.card h3{margin:.35rem 0 0;font-size:1.05rem}
.card p{color:var(--muted);font-size:.95rem;margin:.35rem 0}
.section{padding:4.5rem 0}
.section h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0}
.muted{color:var(--muted)}
.icons{font-size:1.35rem;color:#60a5fa}
.contact-wrap{display:grid;gap:1.25rem}
@media(min-width:960px){.contact-wrap{grid-template-columns:1fr 1fr}}
.input{width:100%; padding:.8rem 1rem; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid var(--border); color:#e5e7eb; outline:none}
.textarea{min-height:140px; resize:vertical}
.footer{padding:2rem 0; color:#94a3b8; border-top:1px solid rgba(255,255,255,.06)}
.badges{display:flex;gap:.5rem;flex-wrap:wrap}
.iso{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border);background:rgba(255,255,255,.06);border-radius:999px;padding:.3rem .6rem;font-size:.8rem}
/* Ripple */ .ripple{position:absolute;border-radius:999px;background:rgba(255,255,255,.5);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none;mix-blend:overlay}
@keyframes rip{to{transform:scale(2.2);opacity:0}}
/* Reveal */ .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1; transform:translateY(0)}
.small{font-size:.85rem} .section-head{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem} .hero-cta{margin-top:1.2rem} .header-links{display:none;gap:1.25rem;font-size:.95rem}@media(min-width:860px){.header-links{display:flex}} .anchor{scroll-margin-top:84px}

.contact-icons{color:#60a5fa}


/* --- Modal (Popup) --- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.65);
  display:none; align-items:center; justify-content:center; z-index:70;
  backdrop-filter: blur(6px);
}
.modal-backdrop.show{ display:flex; }
.modal{
  width:min(720px, 92vw); max-height:80vh; overflow:auto;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:1.2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transform: translateY(12px); opacity:0;
  transition: opacity .35s ease, transform .35s ease;
}
.modal.show{ opacity:1; transform: translateY(0) }
.modal h3{ margin:.25rem 0 .35rem; font-size:1.25rem }
.modal .subtitle{ color:#cbd5e1; margin-bottom:.6rem }
.modal ul{ margin:.6rem 0 .2rem 1.1rem; }
.modal .close{
  position:sticky; top:0; display:flex; justify-content:flex-end;
  margin:-.6rem -.6rem .4rem 0; padding:.4rem;
}
.modal .btn-close{
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
  border-radius:10px; padding:.35rem .6rem; color:#e5e7eb; cursor:pointer;
}


/* --- Service Tiles with image background --- */
.cards.tiles{grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:640px){.cards.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cards.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card.tile{
  position:relative; padding:0; overflow:hidden; border-radius:18px;
  border:1px solid var(--border); min-height:220px; cursor:pointer;
}
.card.tile .tile-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(1.02);
  transition: transform .6s ease, filter .4s ease;
}
.card.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,6,23,.0), rgba(2,6,23,.35) 60%, rgba(2,6,23,.55));
  pointer-events:none; transition:opacity .3s ease; opacity:.8;
}
.card.tile .tile-overlay{
  position:absolute; inset:auto 0 0 0; padding:1rem;
  background:rgba(2,6,23,.0); color:#e5e7eb; opacity:.0;
  transition:opacity .25s ease;
}
.card.tile:hover .tile-bg{ transform:scale(1.06); filter:saturate(1.1) contrast(1.05); }
.card.tile:hover .tile-overlay{ opacity:1 }
.card.tile h3{ margin:0 0 .25rem 0; }
.card.tile p{ margin:0; color:#cbd5e1 }


/* v2 layout tweaks */
.section .container{max-width:1150px}
.cards.tiles{gap:1.1rem}
.card.tile{min-height:260px}
@media(min-width:1024px){ .card.tile{min-height:280px} }
.card.tile .tile-overlay{background:linear-gradient(180deg, rgba(2,6,23,0) 0%, rgba(2,6,23,.55) 80%);}

footer a, .container a{color:#7dd3fc}

.stars{color:#f59e0b; font-size:1.1rem; letter-spacing:.1rem}

.contact-list{list-style:none; padding:0; margin:.4rem 0 0 0; display:grid; gap:.4rem; font-size:.95rem}
.contact-list a{color:#60a5fa; text-decoration:none}
.contact-list a:hover{text-decoration:underline}
.contact-icons, .contact-list{color:#60a5fa}


/* Tiles grid */
.cards.tiles{grid-template-columns:repeat(1,minmax(0,1fr));gap:1.1rem}
@media(min-width:640px){.cards.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cards.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card.tile{position:relative;padding:0;overflow:hidden;border-radius:18px;border:1px solid var(--border);min-height:280px;cursor:pointer}
.card.tile .tile-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s ease,filter .4s ease}
.card.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0), rgba(2,6,23,.45) 65%, rgba(2,6,23,.65));pointer-events:none}
.card.tile .tile-overlay{position:absolute;inset:auto 0 0 0;padding:1rem;color:#e5e7eb}
.card.tile:hover .tile-bg{transform:scale(1.06);filter:saturate(1.05) contrast(1.05)}
.card.tile h3{margin:0 0 .25rem 0}
.card.tile p{margin:0;color:#cbd5e1}
/* Gold stars */
.stars{color:#f59e0b;font-size:1.1rem;letter-spacing:.08rem}
/* Contact links */
.contact-list{list-style:none;padding:0;margin:.4rem 0 0 0;display:grid;gap:.4rem;font-size:.95rem}
.contact-list a{color:#60a5fa;text-decoration:none}
.contact-list a:hover{text-decoration:underline}


/* Gradient accent for hero */
.accent{
  background: linear-gradient(90deg, #ffffff 0%, #60a5fa 45%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}


/* Accent gradient for hero */
.accent{
  background: linear-gradient(90deg, #ffffff 0%, #60a5fa 45%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.stars{color:#f59e0b;font-size:1.1rem;letter-spacing:.08rem}
.contact-list{list-style:none;padding:0;margin:.4rem 0 0 0;display:grid;gap:.4rem;font-size:.95rem}
.contact-list a{color:#60a5fa;text-decoration:none}
.contact-list a:hover{text-decoration:underline}



/* Sticky topbar */
.topbar{position:sticky; top:0; z-index:80; background:rgba(2,6,23,.65); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06)}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.topbar .brand{font-weight:700; color:#e5e7eb; text-decoration:none}
.topbar .nav{list-style:none; display:flex; gap:1rem; margin:0; padding:0; align-items:center}
.topbar .nav a{color:#cbd5e1; text-decoration:none; font-size:.95rem}
.topbar .nav a:hover{color:#ffffff}
.btn.small{padding:.35rem .6rem; border-radius:.6rem}
html{scroll-behavior:smooth}
@media (max-width: 860px){
  .topbar .nav{gap:.6rem; font-size:.9rem}
  .topbar .nav li:nth-child(n+3){display:none} /* hide some on very small screens */
}