:root{
  --blue:#0B5ED7;
  --blue2:#0A2A66;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --bg2:#f5f8ff;
  --card:#ffffff;
  --border:rgba(15,23,42,.12);
  --shadow:0 14px 40px rgba(2,6,23,.10);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--ink); background:var(--bg);}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1120px, calc(100% - 40px)); margin:0 auto;}
/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:grid; grid-template-columns: 140px 1fr 140px; align-items:center; padding:14px 0;}
.lang-switch{
  display:flex; gap:8px; align-items:center;
}
.lang-btn{
  border:1px solid var(--border);
  background:#fff;
  padding:8px 10px;
  border-radius:999px;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition:.2s transform, .2s background;
}
.lang-btn.active{background:var(--bg2); border-color:rgba(11,94,215,.35)}
.lang-btn:hover{transform: translateY(-1px)}
.brand{
  display:flex; justify-content:center; align-items:center; gap:10px;
}
.brand-mark{width:34px; height:34px; border-radius:12px; box-shadow: 0 10px 24px rgba(11,94,215,.25); overflow:hidden;}
.brand-text{
  font-weight:900; letter-spacing:.22em; font-size:18px; text-transform:uppercase;
}
.menu-btn{
  justify-self:end;
  width:44px; height:44px; border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  display:grid; place-items:center;
  transition: .2s transform;
}
.menu-btn:hover{transform: translateY(-1px)}
.burger{width:18px; height:14px; position:relative}
.burger span{position:absolute; left:0; right:0; height:2px; background:var(--ink); border-radius:2px;}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:6px; opacity:.85}
.burger span:nth-child(3){bottom:0}
/* Offcanvas */
.offcanvas{
  position:fixed; inset:0; z-index:80; display:none;
}
.offcanvas.show{display:block}
.offcanvas .backdrop{
  position:absolute; inset:0; background:rgba(2,6,23,.55);
}
.offcanvas .panel{
  position:absolute; top:12px; right:12px;
  width:min(420px, calc(100% - 24px));
  background:#fff; border:1px solid var(--border);
  border-radius:24px;
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translateY(-8px);
  animation: pop .22s ease-out forwards;
}
@keyframes pop{to{transform: translateY(0)}}
.panel-top{display:flex; align-items:center; justify-content:space-between; padding:16px 16px 10px;}
.panel-top .title{font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:12px; color:var(--muted)}
.close-btn{width:42px; height:42px; border-radius:14px; border:1px solid var(--border); background:#fff; cursor:pointer;}
.panel-links{padding:10px 8px 16px;}
.panel-links a{
  display:flex; gap:10px; align-items:center;
  padding:14px 14px;
  border-radius:16px;
  font-weight:700;
  color:var(--ink);
  transition: .15s background;
}
.panel-links a:hover{background:var(--bg2)}
.panel-cta{padding:14px 16px 18px; border-top:1px solid var(--border); background:linear-gradient(180deg, #fff, var(--bg2));}
.pill{
  display:flex; gap:10px; flex-wrap:wrap;
  font-size:13px; color:var(--muted);
}
.pill span{background:#fff; border:1px solid var(--border); padding:8px 10px; border-radius:999px}
/* Hero */
.hero{
  position:relative;
  min-height: 86vh;
  display:flex; align-items:stretch;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.68) 48%, rgba(255,255,255,.16)),
              url("../img/hero.jpg") center/cover no-repeat;
}
.hero-inner{position:relative; padding: clamp(50px, 8vw, 86px) 0;}
.hero-center{
  max-width: 980px;
  margin: 0 auto;
  min-height: 76vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero-center .badge{margin-bottom:12px}
.hero-center .hero-actions{justify-content:center}
.hero-note{
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  max-width: 84ch;
  line-height: 1.6;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:end;
}
.hero h1{
  font-size: clamp(38px, 5vw, 58px);
  line-height:1.02;
  margin:0 0 12px;
  letter-spacing:-.03em;
}
.hero p{
  margin:0 0 22px;
  font-size: clamp(16px, 1.6vw, 18px);
  color:var(--muted);
  max-width: 52ch;
}
.hero-center p{max-width: 72ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{
  border:1px solid var(--border);
  background:#fff;
  padding:12px 16px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  transition:.18s transform, .18s box-shadow;
  display:inline-flex; gap:10px; align-items:center;
}
.btn.primary{
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  border-color:transparent;
  color:#fff;
  box-shadow: 0 14px 30px rgba(11,94,215,.28);
}
.btn:hover{transform: translateY(-1px)}
.badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(11,94,215,.10);
  border:1px solid rgba(11,94,215,.20);
  color:var(--blue2);
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-card{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.12);
  border-radius:24px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-card img{width:100%; height:240px; object-fit:cover}
.hero-card .pad{padding:16px}
.hero-card .pad h3{margin:0 0 8px; font-size:16px}
.hero-card .pad p{margin:0; color:var(--muted); font-size:13px; line-height:1.5}
/* Sections */
.section{padding: 56px 0;}
.section.alt{background:var(--bg2); border-top:1px solid rgba(15,23,42,.06); border-bottom:1px solid rgba(15,23,42,.06);}
.kicker{color:var(--blue2); font-weight:900; letter-spacing:.14em; font-size:12px; text-transform:uppercase; margin:0 0 10px}
.h2{font-size: clamp(26px, 2.8vw, 36px); margin:0 0 12px; letter-spacing:-.02em}
.lead{margin:0 0 18px; color:var(--muted); max-width: 72ch; line-height:1.65}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:22px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(2,6,23,.05);
  padding:18px;
}
.card h3{margin:0 0 10px; font-size:16px}
.card p{margin:0; color:var(--muted); line-height:1.6; font-size:14px}
.split{display:grid; grid-template-columns: 1.05fr .95fr; gap:22px; align-items:center}

/* Testimonials */
.quotes{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:22px}
.quote{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(2,6,23,.05);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.quote::before{
  content:"“";
  position:absolute;
  top:10px; left:14px;
  font-size:46px;
  color: rgba(11,94,215,.18);
  font-weight:900;
  line-height:1;
}
.quote blockquote{margin:0; padding-left:18px; color:var(--ink); line-height:1.7; font-size:14px}
.quote figcaption{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; padding-left:18px}
.quote .who{font-weight:900}
.quote .meta{color:var(--muted); font-size:13px}

/* Map + contact cards */
.contact-cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin:18px 0 18px}
.mini{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 18px;
  padding:14px;
  box-shadow: 0 10px 24px rgba(2,6,23,.05);
}
.mini .t{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--blue2); font-weight:900; margin:0 0 8px}
.mini .v{color:var(--muted); line-height:1.65; font-size:14px}
.mini a{color:var(--ink)}
.map{
  border:1px solid var(--border);
  border-radius: 24px;
  overflow:hidden;
  box-shadow: var(--shadow);
  background:#fff;
}
.map iframe{width:100%; height: 380px; border:0; display:block}
.map-hint{padding:10px 12px; font-size:12px; color:var(--muted); border-top:1px solid var(--border)}
.media{
  border-radius:24px; overflow:hidden;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: var(--shadow);
  background:#fff;
}
.media img{width:100%; height:360px; object-fit:cover}
.stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:22px}
.stat{background:#fff; border:1px solid var(--border); border-radius:18px; padding:14px 14px 12px}
.stat .v{font-size:22px; font-weight:900; letter-spacing:-.02em}
.stat .l{color:var(--muted); margin-top:6px; font-size:13px}
.cta{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(11,94,215,.25);
  background: linear-gradient(135deg, rgba(11,94,215,.10), rgba(10,42,102,.08));
}
.cta p{margin:0; color:var(--muted); max-width:70ch; line-height:1.55}
.cta strong{color:var(--ink)}
/* Page header */
.page-hero{
  padding: 42px 0 18px;
}
.page-hero .wrap{
  border-radius:28px;
  border:1px solid rgba(15,23,42,.10);
  background: linear-gradient(135deg, rgba(11,94,215,.10), rgba(10,42,102,.06));
  padding: 26px;
}
.page-hero h1{margin:0 0 10px; font-size: clamp(28px, 4vw, 44px)}
.page-hero p{margin:0; color:var(--muted); max-width: 80ch; line-height:1.65}
/* Forms */
.form{
  display:grid; gap:12px;
}
.field{display:grid; gap:6px}
.field label{font-size:13px; font-weight:800}
.field input,.field textarea{
  border:1px solid var(--border);
  padding:12px 12px;
  border-radius:16px;
  font-size:14px;
  outline:none;
}
.field textarea{min-height:140px; resize:vertical}
.note{font-size:13px; color:var(--muted); line-height:1.6}
/* Footer */
.footer{
  border-top:1px solid var(--border);
  background: #fff;
  padding: 34px 0 22px;
}
.footer-grid{display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:16px}
.footer h4{margin:0 0 10px; font-size:14px; letter-spacing:.02em}
.footer p, .footer a{margin:0; color:var(--muted); font-size:14px; line-height:1.7}
.footer a:hover{color:var(--ink)}
.footer-bottom{margin-top:18px; padding-top:16px; border-top:1px solid rgba(15,23,42,.08); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.small{font-size:13px; color:var(--muted)}
/* Cookie banner */
.cookie{
  position:fixed; left:14px; right:14px; bottom:14px;
  z-index:90;
  display:none;
}
.cookie.show{display:block}
.cookie .box{
  width:min(980px, 100%);
  margin:0 auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow: var(--shadow);
  padding:14px;
}
.cookie .row{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.cookie h3{margin:0 0 6px; font-size:15px}
.cookie p{margin:0; color:var(--muted); font-size:13px; line-height:1.55; max-width: 86ch}
.cookie .actions{display:flex; gap:10px; flex-wrap:wrap}
.cookie .link{padding:12px 14px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:800}
/* Support bubble */
.support{
  position:fixed; right:16px; bottom:92px; z-index:88;
  display:grid; gap:10px;
}
.support .fab{
  width:54px; height:54px; border-radius:18px;
  border:1px solid rgba(11,94,215,.25);
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  box-shadow: 0 16px 34px rgba(11,94,215,.28);
  cursor:pointer;
  display:grid; place-items:center;
}
.support .fab svg{width:24px; height:24px; fill:#fff}
.support .panel{
  width:min(320px, calc(100vw - 40px));
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow: var(--shadow);
  padding:14px;
  display:none;
}
.support.open .panel{display:block; animation: pop .22s ease-out forwards}
.support .panel h4{margin:0 0 6px}
.support .panel p{margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.55}
.support .panel .btn{width:100%; justify-content:center}
/* Scroll animations */
[data-animate]{opacity:0; transform: translateY(10px); transition: .7s ease;}
[data-animate].in{opacity:1; transform: translateY(0)}
/* Responsive */
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr; align-items:start}
  .hero-card img{height:210px}
  .grid-3{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
  .map iframe{height:320px}
  .media img{height:260px}
  .stats{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .header-inner{grid-template-columns: 1fr 1fr 1fr}
  .brand-text{letter-spacing:.18em}
}