@font-face {
  font-family: 'Heebo';
  src: url('/css/fonts/Heebo-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heebo';
  src: url('/css/fonts/Heebo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heebo';
  src: url('/css/fonts/Heebo-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heebo';
  src: url('/css/fonts/Heebo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heebo';
  src: url('/css/fonts/Heebo-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


:root{
  --blue:#4a90e2; --blue-deep:#0077c2; --ink:#0f172a; --muted:#57606a; --bg:#f0f4f8;
  --card:#ffffff; --glass:rgba(255,255,255,0.6); --ok:#10b981; --err:#ef4444;
}
html,body{ background:var(--bg); font-family:'Heebo','Segoe UI',Tahoma,Geneva,Verdana,sans-serif; margin:0;  overflow-x: hidden; }


button, a, nav, header, footer {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.hero, .trust, .services, .stats, .gallery-grid, .testi-wrap, .cta-block {
  cursor: default;
}

.nav{ position:sticky; top:0; z-index:1000; backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7)); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.nav-inner{ max-width:1200px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-weight:800; font-size:22px; letter-spacing:.3px; color:var(--blue-deep); text-decoration: none; }
.menu{ display:flex; gap:18px; align-items:center; }
.menu a{ text-decoration:none; color:#1f2937; font-weight:600; opacity:.9 }
.menu a:not(.login):hover{ color:var(--blue-deep); }
.menu .login, .menu .login:hover{ color:#fff !important; }
.menu .login{ background:var(--blue); color:#fff; padding:10px 14px; border-radius:10px; }
.menu .login:hover{ background:var(--blue-deep); }
.burger{ display:none; background:none; border:none; font-size:22px; }

.hero{ position:relative; overflow:hidden; }
.hero-wrap{ max-width:1200px; margin:0 auto; padding:48px 16px 28px; display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:center; }
.hero h1{ font-size:44px; line-height:1.15; margin:0 0 12px; color:#0b2545; }
.hero p{ color:#4b5563; font-size:18px; margin:0 0 18px; }
.cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ border:0; cursor:pointer; border-radius:12px; padding:12px 18px; font-weight:800; }
.btn-primary {
  background-color: #1565c0;
  color: #fff;
}

.btn-primary:hover{ background:var(--blue-deep); }
.btn{ display:inline-block; }
.btn-ghost{
  background:#fff;
  color:var(--blue-deep);
  border:2px solid rgba(74,144,226,.55);
  display:inline-block;
  box-shadow:0 6px 16px rgba(74,144,226,.12);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-ghost:hover{
  background:#f5faff;
  border-color:var(--blue-deep);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(74,144,226,.18);
}

.hero-art{ position:relative; min-height:320px; border-radius:16px; background:linear-gradient(135deg,#e3f2fd,#e0f7fa); box-shadow:0 12px 28px rgba(0,0,0,.08); overflow:hidden; display:grid; place-items:center; }
.bubble{ position:absolute; border-radius:999px; filter:blur(12px); opacity:.35 }
.b1{ width:240px; height:240px; background:#8ecae6; right:-30px; top:-30px; }
.b2{ width:180px; height:180px; background:#90e0ef; left:-24px; bottom:-24px; }
.b3{ width:110px; height:110px; background:#ade8f4; right:22%; bottom:12%; }


.trust{ max-width:1200px; margin:6px auto 0; padding:0 16px 18px; color:#64748b; display:flex; gap:24px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.trust .item{ display:flex; align-items:center; gap:8px; background:#fff; padding:10px 14px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.05); }


.section{ max-width:1200px; margin:26px auto; padding:0 16px; }
.section .card{ background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:22px; }
.title{ font-size:28px; margin:0 0 14px; color:#0f172a; }

.services{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.service-icon{ width:44px; height:44px; }


.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.stat{ background:linear-gradient(180deg,#f8fbff,#f4faff); border:1px solid #eef3ff; padding:18px; border-radius:14px; text-align:center; }
.stat b{ font-size:28px; color:#004085; }


.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.gal{ position:relative; border-radius:14px; overflow:hidden; height:180px; background:#e6f2ff; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.gal img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal .caption{ position:absolute; inset:auto 0 0 0; padding:8px 10px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.55)); color:#fff; font-weight:700; font-size:14px; }


.testi-wrap{ position:relative; }
.testi{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:12px; overflow:hidden; }
.quote{
  background:linear-gradient(180deg,#ffffff,#f9fbff);
  border:1px solid #e6eef8;
  border-radius:16px; padding:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
}
.quote p{ margin:0 0 10px; color:#374151; }
.quote .who{ font-weight:700; color:#0b2545; }


.cta-block{ background:#fff; color:#0f172a; border:1px solid #eef3ff; border-radius:16px; padding:24px; margin:40px auto; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.06); }


.contact{ display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
.form-card{ background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:22px; border:1px solid #eef3ff; }
.contact form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.contact form .row.single{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-weight:700; color:#0f172a; font-size:14px; }
.field input, .field textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #dbe3ee; font-family:inherit; box-sizing:border-box; outline:none; transition:150ms;
  background:#fff;
}
.field input:focus, .field textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,144,226,.15); }
.hint{ font-size:12px; color:#6b7280; }
.error{ font-size:12px; color:var(--err); display:none; }
.ok{ font-size:12px; color:var(--ok); display:none; }
.invalid input{ border-color:var(--err); }
.invalid .error{ display:block; }
.valid .ok{ display:block; }
.field textarea{ resize:none; }
#submitBtn{ margin-top:12px; }


footer{ margin-top:26px; background:#0b2545; color:#c7d2fe; }
.foot-inner{ max-width:1200px; margin:0 auto; padding:22px 16px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; }
.foot-inner a{ color:#e6f0ff; text-decoration:none; }
.copyright{ text-align:center; padding:12px; color:#dbe4ff; font-size:14px; border-top:1px solid rgba(255,255,255,.12); }


@media (max-width:1000px){
  .hero-wrap{ grid-template-columns:1fr; }
  .services{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
  .foot-inner{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .menu{ display:none; position:absolute; inset:60px 16px auto 16px; background:#fff; border-radius:12px; padding:14px; box-shadow:0 12px 28px rgba(0,0,0,.12); flex-direction:column; }
  .menu.show{ display:flex; }
  .burger{ display:block; }
  .services{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .foot-inner{ grid-template-columns:1fr; }
  .hero h1{ font-size:36px; }
  .contact form .row{ grid-template-columns:1fr; }
}


.reveal{ opacity:0; transform:translateY(12px); transition:600ms ease; }
.reveal.in{ opacity:1; transform:none; }




.wa-fab{
  position:fixed; right:18px; bottom:18px;
  width:54px; height:54px; border-radius:999px;
  background:#25D366; color:#fff;
  display:grid; place-items:center;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  z-index:1001; text-decoration:none;
}
.wa-fab:hover{ filter:brightness(.95); }

.gallery-page {
  padding: 60px 20px;
  text-align: center;
}

.gallery-header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.gallery-header p {
  color: #666;
  margin-bottom: 40px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.gallery-grid a {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  aspect-ratio: 4 / 3; 
}

.gallery-grid img,
.gallery-grid video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.gallery-grid a:hover img,
.gallery-grid a:hover video {
  transform: scale(1.05);
}

.video-item::after {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  pointer-events: none;
}


body.has-sticky-footer {
  min-height: 100vh;          
  display: flex;            
  flex-direction: column;    
}

body.has-sticky-footer main {
  flex: 1;                    
}


.video-thumb {
  position: relative;
  display: block;
}

.video-thumb::after {
  content: "▶";
  font-size: 42px;
  color: white;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}



.fancybox__content video:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) !important; 
  border-radius: 8px;
}


.gallery-filters {
  display: flex;
  flex-wrap: wrap;          
  justify-content: center;  
  gap: 10px;                
  margin-bottom: 30px;
}

.gallery-filters button {
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
.gallery-filters button:hover {
  background: var(--blue-deep);
}
.gallery-filters button.active {
  background: #0b2545;
}

@media (max-width: 600px) {
  .gallery-filters {
    gap: 8px; 
  }

  .gallery-filters button {
    flex: 1 1 calc(50% - 16px); 
    text-align: center;
  }
}

.see-more {
  text-align: center;
  margin-top: 20px;
}

.see-link {
  color: var(--blue-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding: 4px 6px;
  transition: all .2s ease;
}

.see-link:hover {
  border-color: var(--blue-deep);
  color: var(--blue);
}


.see-card {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  background: #f8fbff;
  border: 1px solid #e6eef8;
  font-weight: 600;
  color: var(--blue-deep);
  text-decoration: none;
  transition: all .2s ease;
}

.see-card:hover {
  background: #eef6ff;
  color: var(--blue);
}


section[id] {
  scroll-margin-top: 90px; 
}

.form-status {
  margin: 10px 0;
  font-size: 0.9em;
  color: #d32f2f; 
  display: none;
}
.form-status.ok {
  color: #388e3c; 
}

.m0 { margin: 0 !important; }
.mb-6 { margin-bottom: 6px !important; }
.mt-0 { margin-top: 0 !important; }
.opacity-95 { opacity: .95 !important; }


.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}



a:focus-visible,
button:focus-visible {
  outline: 3px solid #1e88e5;
  outline-offset: 2px;
}