:root{
  --bg:#0b1220;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.09);
  --border:rgba(255,255,255,.12);
  --text:#f7f7fb;
  --muted:rgba(255,255,255,.72);
  --blue:#1d4ed8;
  --red:#cf142b;
  --beige:#f6efe6;
  --rose:#f2d6de;
  --shadow: 0 24px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% 5%, rgba(242,214,222,.18), transparent 55%),
    radial-gradient(900px 600px at 85% 15%, rgba(29,78,216,.18), transparent 55%),
    radial-gradient(900px 600px at 65% 90%, rgba(207,20,43,.14), transparent 55%),
    linear-gradient(180deg, #0b1220, #050813 70%);
}
img{max-width:100%;display:block}
a{color:inherit}

.container{width:min(1100px, calc(100% - 32px)); margin:0 auto}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(90deg, rgba(29,78,216,.12), rgba(11,18,32,.70), rgba(207,20,43,.10));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}

.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-logo{width:64px;height:64px; border-radius:50%; background:#fff; padding:3px; border:1px solid rgba(255,255,255,.20)}
.brand-name{font-weight:800; letter-spacing:.01em}

.nav{display:flex; gap:18px; align-items:center}
.nav a{opacity:.86; text-decoration:none; font-weight:600; font-size:14px}
.nav a:hover{opacity:1}

.header-ctas{display:flex; gap:10px; align-items:center}

/* Button Animations */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;
  background: rgba(255,255,255,.06);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateY(0);
}
.btn:hover {
  background: rgba(255,255,255,.10);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(29, 78, 216, 0.3);
  border-color: rgba(255,255,255,.3);
}

.btn--primary {
  border-color: rgba(29,78,216,.55); 
  background: linear-gradient(135deg, rgba(29,78,216,.28), rgba(207,20,43,.16));
}
.btn--primary:hover {
  background: linear-gradient(135deg, rgba(29,78,216,.45), rgba(207,20,43,.25));
  box-shadow: 0 10px 25px -5px rgba(29, 78, 216, 0.5);
  border-color: rgba(29,78,216,.8);
}

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: rgba(255,255,255,.08); }

.btn--sm { padding:8px 12px; border-radius:10px; font-size:13px; }
.btn__phone{margin-left:6px; font-weight:900}

.lang {
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  padding:8px 10px;
  font-weight:800;
  cursor:pointer;
  transition: all 0.2s ease;
}
.lang:hover { background: rgba(255,255,255,.12); transform: scale(1.05); }

.menu-btn { display:none; background:transparent; border:0; padding:8px; cursor:pointer; }
.menu-btn span { display:block; width:22px; height:2px; background:rgba(255,255,255,.88); margin:5px 0; border-radius:2px; }

.mobile-nav { display:none; padding:10px 0 16px; border-top:1px solid rgba(255,255,255,.08); }
.mobile-nav a { display:block; padding:10px 0; text-decoration:none; font-weight:700; opacity:.9; transition: opacity 0.2s; }
.mobile-nav a:hover { opacity: 1; color: var(--blue); }
.mobile-ctas { display:flex; gap:10px; flex-wrap:wrap; padding-top:8px; }

.hero { padding:34px 0 14px; }
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; align-items:stretch; }

.badge { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(246,239,230,.10); font-weight:800; font-size:13px; color:rgba(255,255,255,.92); }

.hero-title { margin:14px 0 10px; font-size:44px; line-height:1.06; font-family:"Playfair Display",serif; letter-spacing:-.02em; }
.hero-sub { margin:0 0 16px; color:var(--muted); font-size:16px; line-height:1.6; }

.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 16px; }

.trust { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:16px; }
.trust-item { padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.05); transition: transform 0.3s ease, background 0.3s ease; }
.trust-item:hover { transform: translateY(-3px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.trust-k { font-weight:900; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.trust-v { font-weight:800; margin-top:4px; }

.hero-media { display:grid; grid-template-columns: 1fr; gap:12px; }
.media-card { overflow:hidden; transition: transform 0.3s ease; }
.media-card:hover { transform: scale(1.01); }
.media-card img { width:100%; height:100%; object-fit:cover; aspect-ratio: 16 / 11; transition: transform 0.5s ease; }
.media-card:hover img { transform: scale(1.05); }

.media-stack { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }

.section { padding:28px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-title { margin:0; font-size:26px; }
.section-sub { margin:0; color:var(--muted); max-width:64ch; }

.grid { display:grid; gap:12px; }
.cards { grid-template-columns: repeat(3, 1fr); }

/* Service Card Animations */
.feature { 
  padding:16px; 
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: default;
}
.feature:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.08); /* Slightly lighter on hover */
  border-color: rgba(255,255,255,0.2);
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.svc-icon {
  width:56px;
  height:56px;
  object-fit:contain;
  margin:0 0 10px;
  border-radius:14px;
  padding:6px;
  background: rgba(246,239,230,.92);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.feature:hover .svc-icon {
  transform: scale(1.15) rotate(3deg);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.feature h3 { margin:0 0 6px; font-size:16px; transition: color 0.3s; }
.feature:hover h3 { color: #fff; }

.feature p { margin:0; color:var(--muted); line-height:1.55; }

.split{padding:18px 0 30px}
.split-grid{display:grid; grid-template-columns: 1fr .85fr; gap:16px; align-items:start}
.hours{padding:16px}
.hours .row{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.hours .row:last-child{border-bottom:0}

.cta-bar{margin-top:12px; padding:14px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.cta-title{font-weight:900}
.cta-sub{color:var(--muted); margin-top:4px}
.cta-actions{display:flex; gap:10px; flex-wrap:wrap}

.split-media{overflow:hidden}
.split-media img{width:100%; height:auto; object-fit:cover; aspect-ratio: 4 / 3}

.loc-grid{grid-template-columns: .9fr 1.1fr}
.loc-card{padding:16px}
.link{color:rgba(255,255,255,.92); font-weight:800}
.link:hover{text-decoration:underline}

.map{overflow:hidden}
.map iframe{width:100%; height:340px; border:0; display:block}

.contact-grid{grid-template-columns: 1fr .85fr}
.form{padding:16px}
label{display:block; margin-bottom:12px}
label span{display:block; font-weight:800; margin-bottom:6px}
input, textarea{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-family:inherit;
}
textarea{resize:vertical}
.form-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.fine{margin:12px 0 0; color:rgba(255,255,255,.55); font-size:12px}

.contact-card{padding:16px}
.kv{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08)}
.k{color:rgba(255,255,255,.70); font-weight:800}
.v{font-weight:800}
.divider{height:1px; background:rgba(255,255,255,.08); margin:12px 0}
.muted{color:var(--muted)}

.site-footer{padding:18px 0 32px; border-top:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.20)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer-brand{display:flex; align-items:center; gap:10px}
.footer-logo{width:48px; height:48px; border-radius:50%; background:#fff; padding:3px}
.footer-name{font-weight:900}
.footer-sub{color:rgba(255,255,255,.70); font-size:13px}
.footer-links{display:flex; gap:16px}
.footer-links a{text-decoration:none; opacity:.85; font-weight:800; font-size:13px}
.footer-links a:hover{opacity:1}

@media (max-width: 940px){
  .hero-grid{grid-template-columns: 1fr;}
  .cards{grid-template-columns: 1fr 1fr}
  .split-grid{grid-template-columns: 1fr}
  .loc-grid{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
}
@media (max-width: 720px){
  .nav{display:none}
  .menu-btn{display:block}
  .mobile-nav{display:none}
  .mobile-nav.is-open{display:block}

  /* Fix header crowding on phones */
  .header-inner{align-items:flex-start}
  .brand-name{display:none}
  .brand-logo{width:56px; height:56px}
  .header-ctas{flex-direction:column; align-items:stretch; gap:8px}
  .header-ctas .btn{width:140px}
  .lang{width:140px}

  .hero-title{font-size:34px}
  .trust{grid-template-columns: 1fr;}
  .cards{grid-template-columns: 1fr}
}