/* v9 centered responsive harmony for header, hero, footer */
:root{
  --screen-pad: clamp(16px, 2.5vw, 30px);
  --site-max: min(1360px, calc(100vw - (var(--screen-pad) * 2)));
}

html,body{overflow-x:clip;}
body{background:#eef3f8;}
.container{width:min(1200px, calc(100% - 32px));}

/* full width bands */
.topbar,
.hero,
.site-footer{
  width:100% !important;
  max-width:100% !important;
  margin-inline:calc(50% - 50vw) !important;
  border-radius:0 !important;
}

/* ===== Header ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:80;
  padding:0 var(--screen-pad) !important;
  background:rgba(238,243,248,.88) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(15,39,68,.08);
  box-shadow:0 10px 30px rgba(12,28,51,.07);
}
.topbar-inner{
  width:var(--site-max) !important;
  max-width:var(--site-max) !important;
  min-height:82px;
  margin-inline:auto !important;
  padding:14px 0 !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.brand{
  gap:14px !important;
}
.brand img{
  width:60px !important;
  height:60px !important;
  border-radius:18px !important;
}
.brand-text strong{
  font-size:1.35rem !important;
  line-height:1.1;
}
.brand-text span{
  font-size:.96rem !important;
}
.nav.nav-desktop{
  width:100%;
  justify-content:center !important;
  gap:10px !important;
}
.nav a{
  padding:12px 16px !important;
  border-radius:14px !important;
  font-weight:700 !important;
  white-space:nowrap;
}
.nav .btn,
.nav > .btn,
.nav > a.btn{
  height:46px !important;
  min-width:46px !important;
}
.menu-btn{
  height:48px !important;
  padding:0 18px !important;
  border-radius:16px !important;
}

/* ===== Hero ===== */
.hero{
  min-height: clamp(560px, 78vh, 760px) !important;
  padding: clamp(24px, 3.2vw, 42px) var(--screen-pad) !important;
  display:flex;
  align-items:center;
}
.hero .slides,
.hero .slide,
.hero .slide img,
.hero-overlay{border-radius:0 !important;}
.hero-content{
  position:absolute;
  inset:0;
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(24px, 3vw, 40px) var(--screen-pad) !important;
  background:linear-gradient(180deg, rgba(4,18,37,.16), rgba(4,18,37,.26));
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.hero-simple-shell,
.hero-simple-shell--compact{
  width:var(--site-max) !important;
  max-width:var(--site-max) !important;
  min-height: clamp(420px, 62vh, 560px);
  margin-inline:auto !important;
  padding:clamp(34px, 5vw, 64px) clamp(24px, 4vw, 56px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(135deg, rgba(3,28,62,.82), rgba(4,18,37,.66)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:32px !important;
  box-shadow:0 30px 70px rgba(2,12,27,.32);
  overflow:hidden;
}
.hero-simple-shell::before,
.hero-simple-shell--compact::before{display:none !important; content:none !important;}
.hero-copy,
.hero-copy--compact,
.hero-copy.hero-copy--compact{
  width:100% !important;
  max-width:980px !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:18px !important;
}
.tag{
  align-self:center !important;
  margin:0 auto 4px !important;
}
.hero-title,
.hero-copy h1,
.hero-copy--compact h1{
  max-width: 13.5ch !important;
  margin:0 auto !important;
  font-size:clamp(2.8rem, 4.6vw, 5.8rem) !important;
  line-height:1.08 !important;
  text-align:center !important;
  text-wrap:balance;
}
.hero-actions{
  width:100%;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  margin-top:8px !important;
}
.hero-actions .btn{
  min-width:190px !important;
  height:52px !important;
  border-radius:16px !important;
  justify-content:center !important;
}
.controls{
  right:auto !important;
  left:50% !important;
  transform:translateX(-50%);
  bottom:22px !important;
}
.dots{
  left:50% !important;
  transform:translateX(-50%);
  bottom:24px !important;
}

/* ===== Footer ===== */
.site-footer{
  padding:32px var(--screen-pad) !important;
  background:linear-gradient(180deg, #0d2f56 0%, #0a2341 100%) !important;
}
.site-footer .foot-top,
.site-footer .foot-bottom,
.site-footer .foot-grid{
  width:var(--site-max) !important;
  max-width:var(--site-max) !important;
  margin-inline:auto !important;
}
.site-footer .foot-top{
  display:grid !important;
  grid-template-columns:1.2fr .9fr .9fr 1fr;
  gap:24px !important;
  align-items:start;
}
.site-footer .foot-brand,
.site-footer .foot-col,
.site-footer .foot-cta-box{
  height:100%;
  border-radius:24px !important;
  padding:24px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
.site-footer .foot-brand,
.site-footer .foot-cta-box{
  text-align:center;
}
.site-footer .foot-logo{
  margin-inline:auto;
}
.site-footer .foot-social{
  justify-content:center !important;
}
.site-footer .foot-links a,
.site-footer .foot-contact div{
  justify-content:center !important;
  text-align:center;
}
.site-footer .foot-title,
.site-footer .foot-brand-copy,
.site-footer .foot-brand-desc,
.site-footer p{
  text-align:center !important;
}
.site-footer .foot-cta{
  display:inline-flex !important;
  margin-inline:auto !important;
}
.site-footer .foot-bottom{
  margin-top:18px !important;
  padding-top:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px;
  border-top:1px solid rgba(255,255,255,.12) !important;
}

/* Dark mode */
body.dark-mode .topbar{
  background:rgba(8,20,33,.88) !important;
  border-bottom-color:rgba(148,163,184,.12) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
body.dark-mode .topbar-inner{background:transparent !important;}
body.dark-mode .nav a,
body.dark-mode .brand-text strong,
body.dark-mode .brand-text span,
body.dark-mode .menu-btn,
body.dark-mode .menu-btn i,
body.dark-mode .menu-btn span{color:#f5f8ff !important;}
body.dark-mode .nav a:hover,
body.dark-mode .nav a.active,
body.dark-mode .menu-btn:hover{background:rgba(255,255,255,.06) !important;}
body.dark-mode .site-footer{
  background:linear-gradient(180deg, #091727 0%, #07111d 100%) !important;
}

/* Responsive */
@media (max-width: 1199.98px){
  .topbar-inner{
    grid-template-columns:auto 1fr auto;
    min-height:76px;
  }
  .brand-text strong{font-size:1.22rem !important;}
  .nav a{padding:11px 12px !important; font-size:.94rem !important;}
  .hero-title,
  .hero-copy h1,
  .hero-copy--compact h1{
    max-width: 14.5ch !important;
    font-size:clamp(2.4rem, 5vw, 4.9rem) !important;
  }
  .site-footer .foot-top{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 991.98px){
  .topbar{padding:0 14px !important;}
  .topbar-inner{
    grid-template-columns:1fr auto;
    gap:12px;
    min-height:72px;
    padding:12px 0 !important;
  }
  .nav.nav-desktop{display:none !important;}
  .menu-btn{display:inline-flex !important; justify-self:start;}
  .brand{justify-self:end;}
  .hero{
    min-height:520px !important;
    padding:18px 14px 24px !important;
  }
  .hero-content{padding:18px 14px 24px !important;}
  .hero-simple-shell,
  .hero-simple-shell--compact{
    min-height:420px;
    padding:28px 20px !important;
    border-radius:24px !important;
  }
  .hero-title,
  .hero-copy h1,
  .hero-copy--compact h1{
    max-width: 100% !important;
    font-size:clamp(2.05rem, 8vw, 3.6rem) !important;
  }
  .hero-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:min(460px, 100%);
  }
  .hero-actions .btn{min-width:0 !important; width:100% !important;}
  .site-footer{padding:26px 14px !important;}
  .site-footer .foot-top{grid-template-columns:1fr !important;}
  .site-footer .foot-bottom{
    flex-direction:column !important;
    text-align:center;
  }
}
@media (max-width: 575.98px){
  .brand img{width:54px !important; height:54px !important; border-radius:16px !important;}
  .brand-text strong{font-size:1.12rem !important;}
  .brand-text span{font-size:.84rem !important;}
  .hero{
    min-height:480px !important;
  }
  .hero-simple-shell,
  .hero-simple-shell--compact{
    padding:24px 16px !important;
    min-height:380px;
  }
  .hero-title,
  .hero-copy h1,
  .hero-copy--compact h1{
    font-size:clamp(1.9rem, 9vw, 3rem) !important;
    line-height:1.14 !important;
  }
  .hero-actions{grid-template-columns:1fr !important; width:100%;}
  .hero-actions .btn{height:48px !important;}
  .controls{display:none !important;}
  .dots{bottom:16px !important;}
}