:root{
  /* Brand palette: green + blue from the logo */
  --brand:#256b3b;       /* green */
  --brand-2:#2f6fb4;     /* blue */
  --bg:#0b1220;          /* deep slate */
  --bg-soft:#0f172a;     
  --card:#111827;        
  --text:#e5e7eb;        
  --muted:#9ca3af;       
  --ring: rgba(47,111,180,.35);
  --shadow: 0 10px 25px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
  --radius: 18px; 
  --radius-sm:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(47,111,180,.12), transparent 45%),
             radial-gradient(1000px 500px at 110% 10%, rgba(37,107,59,.14), transparent 40%), var(--bg);
  line-height:1.55;
}
a{color:inherit}
.container{max-width:1100px; margin-inline:auto; padding:0 20px}
header{position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background:linear-gradient(to bottom, rgba(15,23,42,.9), rgba(15,23,42,.6)); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:14px}
.brand-logo{height:44px; width:auto; display:block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));}
.brand-text{font-weight:700; letter-spacing:.2px}
nav ul{display:flex; gap:18px; list-style:none; padding:0; margin:0}
nav a{display:inline-block; padding:8px 12px; border-radius:10px; text-decoration:none; color:var(--text); opacity:.9}
nav a:hover{background:rgba(255,255,255,.06); opacity:1}
.lang-switch{display:flex; gap:8px; align-items:center}
.chip{padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--muted); font-size:.92rem}
.btn{appearance:none; border:none; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#04162b; font-weight:700; padding:12px 18px; border-radius:12px; cursor:pointer; box-shadow: var(--shadow)}
.btn.secondary{background:rgba(255,255,255,.08); color:var(--text); font-weight:600; box-shadow:none; border:1px solid rgba(255,255,255,.1)}
.btn:hover{transform: translateY(-1px)}
.hero{padding:64px 0 36px}
.hero .wrap{display:grid; grid-template-columns: 1.3fr 1fr; gap:28px; align-items:center}
.headline{font-size: clamp(28px, 4vw, 46px); font-weight:800; letter-spacing:.2px; line-height:1.14; margin:0 0 10px}
.sub{font-size: clamp(16px, 2.1vw, 20px); color:var(--muted); margin:0 0 20px}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 26px}
.badge{background: rgba(47,111,180,.18); color:#dbeafe; border:1px solid rgba(47,111,180,.45); padding:6px 10px; border-radius:999px; font-weight:600; font-size:.9rem}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow)}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.metric{background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); padding:18px; border-radius:14px}
.metric b{display:block; font-size:22px}
section{padding:56px 0}
.section-title{font-size:28px; font-weight:800; margin:0 0 10px}
.section-sub{color:var(--muted); margin:0 0 24px}
.grid{display:grid; grid-template-columns:repeat(12, 1fr); gap:18px}
.card{grid-column: span 6; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding:18px; min-height: 160px}
.card-icon{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(37,107,59,.18); border:1px solid rgba(37,107,59,.45); margin-bottom:10px}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:var(--muted)}
.card .link{display:inline-block; margin-top:10px; font-weight:700; color:#93c5fd}
.strip{display:flex; gap:18px; flex-wrap:wrap; align-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:14px 18px; border-radius:14px}
.strip .item{display:flex; align-items:center; gap:10px}
.strip svg{width:18px; height:18px; opacity:.8}
.contact{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
form{display:grid; gap:10px}
input, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--text)}
label{font-size:.9rem; color:var(--muted)}
.helper{font-size:.9rem; color:var(--muted)}
.map{width:100%; height:260px; border:0; border-radius:14px}
footer{border-top:1px solid rgba(255,255,255,.08); padding:22px 0 38px; color:var(--muted)}
.fwrap{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}
.mt0{margin-top:0}
.mt6{margin-top:6px}
.mt10{margin-top:10px}
.mt12{margin-top:12px}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr} .grid .card{grid-column: span 12} .contact{grid-template-columns:1fr} nav ul{display:none} }