:root{
  --bg:#ffffff; --text:#111827; --muted:#6b7280;
  --brand:#0f62fe; --brand-600:#1e40af; --surface:#f8fafc;
  --nav:#0b1220; --nav-text:#f9fafb; --accent:#f59e0b;
  --radius:6px; --shadow: 0 8px 30px rgba(2,6,23,.12);
  --container:1200px;
}

/* base */
*{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; display:flex; flex-direction:column; min-height:100vh;}
.container{max-width:var(--container);margin:0 auto;padding:0 1rem}

/* ensure main grows to fill space */
main{flex:1}

/* header */
header{background:var(--nav);color:var(--nav-text);position:relative;z-index:50;box-shadow:0 1px 0 rgba(255,255,255,0.02)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem}
.brand{font-weight:700;font-size:1.05rem;letter-spacing:0.2px}
.nav-list{display:flex;gap:0.6rem;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{color:var(--nav-text);text-decoration:none;padding:0.45rem 0.7rem;border-radius:8px;font-size:0.98rem;opacity:0.95}
.nav-list a[aria-current="page"]{background:rgba(255,255,255,0.03)}
.nav-list a:hover{background:rgba(255,255,255,0.04)}

/* language flags — rectangular, small radius */
.lang-switch{display:flex;gap:8px;align-items:center}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;background:transparent;border:0;padding:4px 6px;font-size:1.05rem;cursor:pointer;border-radius:4px;color:var(--nav-text)}
.lang-btn.active{background:transparent;border:2px solid var(--accent);padding:2px 4px;border-radius:6px}
.lang-btn img{display:block;height:18px;width:auto;border-radius:3px}

/* hamburger (mobile) */
.menu-toggle{display:none;border:0;background:transparent;color:var(--nav-text);font-size:1.5rem;cursor:pointer}
@media (max-width:880px){
  .nav-list{display:none;position:fixed;top:0;right:0;background:var(--nav);height:100%;width:260px;flex-direction:column;padding:3.25rem 1rem;gap:1rem;z-index:60;overflow:auto}
  .nav-list.open{display:flex}
  .menu-toggle{display:inline-flex}
}

/* hero */
.hero{display:flex;gap:2rem;align-items:center;padding:3.2rem 0}
.hero-left{flex:1}
.hero-right{flex:0 0 420px;display:flex;align-items:center;justify-content:center}
.hero h1{font-size:2.25rem;margin:0 0 0.6rem;color:#fff}
.hero-sub{color:#e6eefc;margin-bottom:1.1rem;font-size:1.05rem}

/* hero background variant for dark header area */
.hero-wrap{background:linear-gradient(180deg, rgba(6,10,22,0.98), rgba(6,10,22,0.85)); padding:2.4rem 0}
.hero .brand-cta{display:flex;gap:0.75rem;align-items:center}
.btn{display:inline-block;padding:0.6rem 1rem;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--nav-text);border:1px solid rgba(255,255,255,0.06)}

/* services (3 columns) */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}
.service{background:#fff;border-radius:10px;padding:1.1rem;border:1px solid rgba(0,0,0,0.04);box-shadow:0 6px 18px rgba(12,18,30,0.04)}
.service h3{margin:0 0 .5rem;font-size:1.05rem}
.service p{margin:0;color:var(--muted);font-size:0.95rem}
.service ul{margin:0.5rem 0 0 1rem;color:var(--muted)}

/* grids */
.refs-grid, .gallery-grid{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0}
.ref-card, .gallery-card{flex:0 0 calc(25% - 1rem);display:flex;align-items:center;justify-content:center;min-height:100px;background:var(--surface);border-radius:8px;padding:0.6rem;border:1px solid rgba(0,0,0,0.04);cursor:pointer}
.ref-card img, .gallery-card img{max-width:100%;max-height:100%;display:block}
@media (max-width:900px){ .ref-card, .gallery-card{flex:0 0 calc(50% - 0.5rem)} }
@media (max-width:480px){ .ref-card, .gallery-card{flex:0 0 100%} }

/* A–Z Filter */
.az-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0.75rem 0}
.az-filter button{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px 9px;border-radius:6px;cursor:pointer;font-weight:600;color:var(--text)}
.az-filter button.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* lightbox */
.lightbox{display:none;position:fixed;inset:0;background:rgba(2,6,23,0.92);align-items:center;justify-content:center;z-index:220;padding:20px}
.lightbox.active{display:flex}
.lightbox-inner{position:relative;max-width:1100px;width:100%;max-height:90vh;display:flex;align-items:center;justify-content:center}
.lightbox img{max-width:100%;max-height:85vh;border-radius:8px;display:block}
.lightbox-close, .lightbox-prev, .lightbox-next{position:absolute;color:#fff;font-size:2rem;cursor:pointer;user-select:none;background:transparent;border:0;padding:6px}
.lightbox-close{top:10px;right:10px}
.lightbox-prev{left:8px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:8px;top:50%;transform:translateY(-50%)}

/* footer */
footer{background:var(--nav);color:var(--nav-text);padding:1.2rem 0;border-top:1px solid rgba(255,255,255,0.03);margin-top:2.5rem;flex-shrink:0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-links{display:flex;gap:0.8rem;list-style:none;padding:0;margin:0}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--nav-text)}

/* forms */
.form-row{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.75rem}
input[type="text"], input[type="email"], textarea{width:100%;padding:0.65rem;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:#fff}
button.primary{background:var(--brand);color:#fff;border:none;padding:0.7rem 1rem;border-radius:8px;cursor:pointer;font-weight:700}

/* small helpers */
.center{text-align:center}
.muted{color:var(--muted);font-size:0.95rem}