/* =========================================================
   WATCHOPS24 — SHARED HEADER + FOOTER v1
   One visual shell for all public pages.
   Loaded LAST so page-specific CSS cannot distort the shell.
   ========================================================= */

:root{--w24-shell-max:1660px;--w24-header-h:86px}

/* ---------- HEADER ---------- */
.site-header{
  position:fixed !important;
  z-index:100 !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:var(--w24-header-h) !important;
  min-height:var(--w24-header-h) !important;
  display:grid !important;
  grid-template-columns:230px minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:clamp(24px,3vw,52px) !important;
  padding:0 clamp(24px,4vw,72px) !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(133,188,255,.10) !important;
  background:linear-gradient(180deg,rgba(2,8,23,.74),rgba(2,8,23,.34)) !important;
  -webkit-backdrop-filter:blur(14px) saturate(120%) !important;
  backdrop-filter:blur(14px) saturate(120%) !important;
  box-shadow:none !important;
  transition:height .3s ease,background .3s ease,border-color .3s ease !important;
}
.site-header.scrolled{
  height:72px !important;
  min-height:72px !important;
  border-bottom-color:rgba(133,188,255,.16) !important;
  background:rgba(2,8,23,.88) !important;
}
.site-header .official-brand{
  width:230px !important;
  min-width:0 !important;
  max-width:230px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin:0 !important;
}
.site-header .official-brand img{
  display:block !important;
  width:100% !important;
  max-width:230px !important;
  height:auto !important;
  object-fit:contain !important;
  filter:drop-shadow(0 0 18px rgba(15,168,255,.12)) !important;
}
.site-header .nav{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(18px,2vw,34px) !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  color:#bdcada !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  white-space:nowrap !important;
}
.site-header .nav a{
  position:relative !important;
  display:block !important;
  padding:10px 0 !important;
  margin:0 !important;
  color:inherit !important;
  line-height:1.4 !important;
  text-decoration:none !important;
}
.site-header .nav a:hover,.site-header .nav a.active{color:#fff !important}
.site-header .nav a.active::after{
  content:"" !important;
  position:absolute !important;
  height:2px !important;
  left:10% !important;
  right:10% !important;
  bottom:-5px !important;
  background:linear-gradient(90deg,#19d9ff,#176cff) !important;
  box-shadow:0 0 12px #19d9ff !important;
}
.site-header .header-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
  min-width:max-content !important;
  margin:0 !important;
}
.site-header .lang-switch{
  height:44px !important;
  min-height:44px !important;
  padding:0 15px !important;
  border:1px solid rgba(133,188,255,.16) !important;
  background:rgba(255,255,255,.025) !important;
  color:#d9e4ef !important;
  border-radius:13px !important;
  cursor:pointer !important;
  line-height:1 !important;
}
.site-header .lang-switch span{opacity:.4 !important;margin:0 5px !important}
.site-header .btn-sm,
.site-header .unified-demo{
  min-height:44px !important;
  height:44px !important;
  padding:0 17px !important;
  gap:14px !important;
  border-radius:12px !important;
  font-size:14px !important;
  white-space:nowrap !important;
}
.site-header .menu-toggle{
  display:none !important;
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  border:1px solid rgba(133,188,255,.16) !important;
  background:transparent !important;
  border-radius:12px !important;
}
.site-header .menu-toggle span,
.site-header .menu-toggle i{
  display:block !important;
  width:18px !important;
  height:1px !important;
  margin:5px auto !important;
  background:#fff !important;
}
html[dir="rtl"] .site-header{direction:rtl !important}
html[dir="ltr"] .site-header{direction:ltr !important}
html[dir="rtl"] .site-header .nav{direction:rtl !important}
html[dir="ltr"] .site-header .nav{direction:ltr !important}

@media(max-width:1180px) and (min-width:981px){
  .site-header{grid-template-columns:205px minmax(0,1fr) auto !important;padding-inline:28px !important;gap:22px !important}
  .site-header .official-brand,.site-header .official-brand img{width:205px !important;max-width:205px !important}
  .site-header .nav{gap:18px !important;font-size:13px !important}
  .site-header .btn-sm,.site-header .unified-demo{padding-inline:14px !important}
}
@media(max-width:980px){
  .site-header{
    display:grid !important;
    grid-template-columns:minmax(160px,210px) 1fr auto !important;
    gap:12px !important;
    padding-inline:20px !important;
  }
  .site-header .official-brand,.site-header .official-brand img{width:200px !important;max-width:200px !important}
  .site-header .nav{
    position:fixed !important;
    top:var(--w24-header-h) !important;
    left:0 !important;
    right:0 !important;
    z-index:99 !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:18px 24px 24px !important;
    background:rgba(2,8,23,.98) !important;
    border-bottom:1px solid rgba(133,188,255,.16) !important;
    white-space:normal !important;
  }
  .site-header.scrolled .nav{top:72px !important}
  .site-header .nav.open{display:flex !important}
  .site-header .nav a{padding:12px 4px !important}
  .site-header .menu-toggle{display:block !important}
}
@media(max-width:700px){
  :root{--w24-header-h:72px}
  .site-header{height:72px !important;min-height:72px !important;grid-template-columns:minmax(135px,175px) 1fr auto !important;padding-inline:16px !important;gap:8px !important}
  .site-header.scrolled{height:72px !important;min-height:72px !important}
  .site-header .official-brand,.site-header .official-brand img{width:170px !important;max-width:170px !important}
  .site-header .nav,.site-header.scrolled .nav{top:72px !important}
  .site-header .btn-sm,.site-header .unified-demo{display:none !important}
  .site-header .lang-switch{height:42px !important;min-height:42px !important;padding-inline:12px !important}
  .site-header .menu-toggle{width:42px !important;height:42px !important}
}
@media(max-width:440px){
  .site-header{grid-template-columns:minmax(120px,150px) 1fr auto !important;padding-inline:12px !important}
  .site-header .official-brand,.site-header .official-brand img{width:145px !important;max-width:145px !important}
}

/* ---------- FOOTER ---------- */
.site-footer{
  position:relative !important;
  width:100% !important;
  overflow:hidden !important;
  padding:0 !important;
  margin:0 !important;
  border-top:1px solid rgba(92,185,255,.22) !important;
  background:linear-gradient(180deg,#020817 0%,#01040c 100%) !important;
  color:#fff !important;
}
.site-footer .footer-glow{
  position:absolute !important;
  inset:-120px 0 auto !important;
  height:260px !important;
  pointer-events:none !important;
  background:radial-gradient(ellipse at 50% 0,rgba(30,150,255,.18),transparent 65%) !important;
  filter:blur(18px) !important;
}
.site-footer .footer-inner{
  position:relative !important;
  z-index:2 !important;
  width:min(100%,var(--w24-shell-max)) !important;
  max-width:var(--w24-shell-max) !important;
  margin:0 auto !important;
  padding:72px clamp(28px,4.5vw,76px) 28px !important;
}
.site-footer .footer-main{
  display:grid !important;
  grid-template-columns:220px minmax(0,1fr) 220px !important;
  align-items:center !important;
  gap:clamp(34px,5vw,88px) !important;
  padding:0 0 54px !important;
  margin:0 !important;
}
html[dir="ltr"] .site-footer .footer-main{direction:ltr !important;grid-template-areas:"brand message demo" !important}
html[dir="rtl"] .site-footer .footer-main{direction:ltr !important;grid-template-areas:"demo message brand" !important}
.site-footer .footer-logo{grid-area:brand !important;display:flex !important;align-items:center !important;width:100% !important;min-width:0 !important}
html[dir="ltr"] .site-footer .footer-logo{justify-content:flex-start !important}
html[dir="rtl"] .site-footer .footer-logo{justify-content:flex-end !important;direction:ltr !important}
.site-footer .footer-logo img{display:block !important;width:220px !important;max-width:100% !important;height:auto !important;object-fit:contain !important;filter:drop-shadow(0 0 24px rgba(25,139,255,.10)) !important}
.site-footer .footer-message{grid-area:message !important;width:100% !important;max-width:650px !important;min-width:0 !important}
html[dir="ltr"] .site-footer .footer-message{direction:ltr !important;text-align:left !important}
html[dir="rtl"] .site-footer .footer-message{direction:rtl !important;text-align:right !important}
.site-footer .footer-kicker{display:inline-block !important;margin:0 0 14px !important;color:#59dcff !important;font-weight:700;font-size:10px;line-height:1;letter-spacing:3.2px !important}
.site-footer .footer-message h2{margin:0 !important;font-size:clamp(38px,3.4vw,58px) !important;line-height:1.04 !important;letter-spacing:-.035em !important}
.site-footer .footer-message h2 em{font-style:normal !important;background:linear-gradient(90deg,#7ce4ff,#168dff) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.site-footer .footer-message p{margin:18px 0 0 !important;max-width:590px !important;color:#98adc5 !important;font-size:15px !important;line-height:1.85 !important}
.site-footer .footer-demo{grid-area:demo !important;display:inline-flex !important;align-items:center !important;justify-content:space-between !important;gap:30px !important;width:auto !important;min-width:190px !important;max-width:220px !important;padding:18px 20px !important;margin:0 !important;border-radius:16px !important;background:linear-gradient(135deg,#1377ff,#2356da) !important;border:1px solid rgba(107,194,255,.42) !important;box-shadow:0 15px 45px rgba(17,95,230,.22) !important;color:#fff !important;text-decoration:none !important;font-weight:700 !important;white-space:nowrap !important}
html[dir="ltr"] .site-footer .footer-demo{justify-self:end !important;direction:ltr !important}
html[dir="rtl"] .site-footer .footer-demo{justify-self:start !important;direction:rtl !important}
.site-footer .footer-demo:hover{transform:translateY(-3px) !important;box-shadow:0 22px 55px rgba(17,95,230,.34) !important}
.site-footer .footer-demo i{font-style:normal !important;font-size:18px !important}
.site-footer .footer-links-row{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:36px !important;padding:27px 0 !important;margin:0 !important;border-top:1px solid rgba(119,176,235,.12) !important;border-bottom:1px solid rgba(119,176,235,.12) !important}
html[dir="ltr"] .site-footer .footer-links-row{direction:ltr !important}
html[dir="rtl"] .site-footer .footer-links-row{direction:rtl !important}
.site-footer .footer-nav{display:flex !important;flex-direction:column !important;flex-wrap:nowrap !important;align-items:flex-start !important;gap:12px !important;min-width:150px !important;margin:0 !important;padding:0 !important}
html[dir="ltr"] .site-footer .footer-nav{direction:ltr !important;text-align:left !important;align-items:flex-start !important}
html[dir="rtl"] .site-footer .footer-nav{direction:rtl !important;text-align:right !important;align-items:flex-end !important}
.site-footer .footer-nav a{display:block !important;width:100% !important;padding:0 !important;margin:0 !important;color:#9eb1c8 !important;text-decoration:none !important;font-size:13px !important;line-height:1.45 !important;transition:color .25s ease !important}
html[dir="rtl"] .site-footer .footer-nav a{text-align:right !important}
.site-footer .footer-nav a:hover{color:#67ddff !important}
.site-footer .footer-trust{display:flex !important;align-items:center !important;gap:22px !important;flex-wrap:wrap !important;margin:0 !important;padding:0 !important}
html[dir="ltr"] .site-footer .footer-trust{direction:ltr !important;justify-content:flex-end !important;text-align:left !important}
html[dir="rtl"] .site-footer .footer-trust{direction:rtl !important;justify-content:flex-end !important;text-align:right !important}
.site-footer .footer-trust span{display:inline-flex !important;align-items:center !important;gap:8px !important;color:#9eb1c8 !important;font-size:12px !important}
.site-footer .footer-trust i{width:6px !important;height:6px !important;border-radius:50% !important;background:#25dec1 !important;box-shadow:0 0 12px #25dec1 !important}
.site-footer .footer-trust b{font-weight:500 !important}
.site-footer .footer-bottom{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-direction:row !important;
  gap:14px !important;
  padding:24px 20px 22px !important;
  margin:0 !important;
  border-top:1px solid rgba(119,176,235,.12) !important;
  color:#7f95ad !important;
  font-weight:500;font-size:13px;line-height:1.6;
  letter-spacing:0 !important;
  text-align:center !important;
  direction:ltr !important;
}
.site-footer .footer-bottom p{position:static !important;inset:auto !important;transform:none !important;margin:0 !important;width:auto !important;max-width:none !important;white-space:normal !important}
.site-footer .footer-copyright{unicode-bidi:plaintext !important}
html[dir="rtl"] .site-footer .footer-copyright{direction:rtl !important}
html[dir="ltr"] .site-footer .footer-copyright{direction:ltr !important}
.site-footer .footer-bottom-separator{display:inline-block !important;color:#26d9ff !important;opacity:.75 !important;line-height:1 !important;direction:ltr !important}
.site-footer .footer-credit{direction:ltr !important;color:#8ea6bf !important}
.site-footer .footer-credit a{color:#7fdcff !important;font-weight:700 !important;text-decoration:underline !important;text-underline-offset:3px !important;text-decoration-color:rgba(86,202,255,.55) !important}
.site-footer .footer-credit a:hover{color:#b7efff !important}

@media(max-width:1100px){
  .site-footer .footer-main{grid-template-columns:190px minmax(0,1fr) 190px !important;gap:30px !important}
  .site-footer .footer-logo img{width:190px !important}
}
@media(max-width:980px){
  .site-footer .footer-inner{padding-top:58px !important}
  .site-footer .footer-main,
  html[dir="ltr"] .site-footer .footer-main,
  html[dir="rtl"] .site-footer .footer-main{
    grid-template-columns:1fr !important;
    grid-template-areas:"brand" "message" "demo" !important;
    gap:30px !important;
  }
  html[dir="rtl"] .site-footer .footer-main{direction:rtl !important}
  html[dir="rtl"] .site-footer .footer-logo,
  html[dir="ltr"] .site-footer .footer-logo{justify-content:flex-start !important}
  html[dir="rtl"] .site-footer .footer-demo,
  html[dir="ltr"] .site-footer .footer-demo{justify-self:start !important}
  .site-footer .footer-links-row{align-items:flex-start !important;flex-direction:column !important}
  html[dir="rtl"] .site-footer .footer-trust,
  html[dir="ltr"] .site-footer .footer-trust{justify-content:flex-start !important}
}
@media(max-width:700px){
  .site-footer .footer-inner{padding:52px 20px 24px !important}
  .site-footer .footer-main{padding-bottom:42px !important}
  .site-footer .footer-logo img{width:190px !important}
  .site-footer .footer-message h2{font-size:40px !important}
  .site-footer .footer-bottom{flex-wrap:wrap !important;gap:6px 10px !important;padding:20px 18px !important;font-size:12px !important}
  .site-footer .footer-bottom-separator{display:none !important}
  .site-footer .footer-copyright,.site-footer .footer-credit{width:100% !important;text-align:center !important}
}


/* ---------- SECTION MARKERS v2 ----------
   Numeric badges were replaced with one monitoring icon language.
   This keeps section headers visual and avoids decorative numbering. */
.num,
.card-index > span,
.section-kicker > span{
  position:relative !important;
  display:inline-grid !important;
  place-items:center !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  padding:0 !important;
  border:1px solid rgba(82,216,255,.30) !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 38% 32%,rgba(82,216,255,.13),rgba(6,21,43,.34) 62%,rgba(2,8,23,.42)) !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  box-shadow:inset 0 0 18px rgba(37,135,255,.05),0 0 20px rgba(33,165,255,.05) !important;
  overflow:hidden !important;
}
.num::before,
.card-index > span::before,
.section-kicker > span::before{
  content:"" !important;
  width:22px !important;
  height:22px !important;
  display:block !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355d9ff' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h3.1l1.8-4.4 3.1 8.8 2.1-5.2 1.2 2.8h5.7'/%3E%3Cpath d='M5 5.8A9 9 0 0 1 18.4 5' opacity='.58'/%3E%3Cpath d='M18.8 18a9 9 0 0 1-13.6.2' opacity='.58'/%3E%3C/svg%3E") !important;
  filter:drop-shadow(0 0 6px rgba(85,217,255,.28)) !important;
}
.card-index > span{width:46px !important;height:46px !important;min-width:46px !important}
.section-kicker > span{width:42px !important;height:42px !important;min-width:42px !important}
.section-kicker > span::before{width:19px !important;height:19px !important}

@media(max-width:700px){
  .num,.card-index > span{width:42px !important;height:42px !important;min-width:42px !important}
  .section-kicker > span{width:38px !important;height:38px !important;min-width:38px !important}
}