:root{
  --bg:#ffffff; --panel:#f6f8fb; --ink:#0a0f1a; --muted:#5a6472;
  --accent:#d8a21b; --accent-ink:#201400; --line:#e6e9ee; --card:#ffffff;
}
:root.dark{
  --bg:#0c0d10; --panel:#0f131b; --ink:#e9ecf1; --muted:#a9b3c4;
  --accent:#f2b233; --accent-ink:#1a1200; --line:#232b3a; --card:#141a24;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:auto;padding:24px}
.section{padding:48px 24px}
.row{display:flex;gap:16px;align-items:center}
.row.between{justify-content:space-between}
.site-header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);z-index:10}
:root.dark .site-header{background:rgba(12,13,16,.75)}
.brand{gap:12px;text-decoration:none;color:inherit}
.brand strong{font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.nav a{padding:10px 14px;border-radius:10px;text-decoration:none;color:inherit}
.nav a.btn{background:var(--panel);border:1px solid var(--line)}
.theme-toggle{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--line);background:var(--panel);
  padding:8px 12px;border-radius:10px;cursor:pointer}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding-top:28px}
.hero h1{font-size:44px;line-height:1.12;margin:0 0 10px}
.hero p{color:var(--muted)}
.btn{display:inline-flex;gap:8px;align-items:center;padding:11px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn:hover{box-shadow:0 0 0 6px rgba(216,162,27,.18)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--line);padding:18px;border-radius:14px;box-shadow:0 2px 10px rgba(20,29,46,.04)}
.card h3{margin:0 0 6px}
.price{font-size:22px;margin:.25rem 0 .5rem}
.tabbar{display:flex;gap:8px;margin:12px 0 0}
.tab{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer}
.tab.active{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.contact form{display:grid;gap:12px;max-width:760px}
label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
input,textarea,select{padding:12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#111}
:root.dark input,:root.dark textarea,:root.dark select{background:#0b0f18;color:#e9ecf1}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(216,162,27,.18);outline:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.site-footer{border-top:1px solid var(--line);background:var(--panel)}
.brands-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;margin-top:16px;background:#fff}
:root.dark .brands-strip{background:#0f131b}
.brands-strip h3{margin:0 0 10px;font-size:16px;color:var(--muted)}
.brand-logos{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;align-items:center}
.brand-logos img{max-height:60px;object-fit:contain;background:#fff;border-radius:8px;padding:6px;border:1px solid var(--line)}
:root.dark .brand-logos img{background:#fff}
.fine{color:var(--muted)}
.sticky-cta{position:static; display:none;left:0;right:0;bottom:0;display:none;gap:8px;justify-content:space-between;padding:10px 14px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-top:1px solid var(--line);z-index:50}
:root.dark .sticky-cta{background:rgba(12,13,16,.9)}
.sticky-cta a{flex:1;text-align:center}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .brand-logos{grid-template-columns:repeat(3,1fr)}
  .sticky-cta{display:flex} body{padding-bottom:64px}
}

/* Headline display font (clean) */
.headline{font-family:'Montserrat',sans-serif; font-weight:800; font-size:52px; letter-spacing:.2px}
@media (max-width:900px){ .headline{font-size:40px} }

/* Brand marquee */
.brand-marquee{overflow:hidden; position:relative; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);}
.brand-marquee .track{display:flex; gap:28px; align-items:center; animation:scroll 28s linear infinite;}
.brand-marquee img{height:44px; object-fit:contain; background:#fff; border-radius:10px; padding:6px; border:1px solid var(--line)}
:root.dark .brand-marquee img{background:#fff}
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Slightly slimmer header */
.site-header .container{padding-top:12px; padding-bottom:12px}

.card.highlight{outline:2px solid var(--accent); box-shadow:0 8px 30px rgba(216,162,27,.18)}
.card.highlight .price{opacity:.8}

/* Responsive nav fix */
@media (max-width:768px){
  .nav{flex-wrap:wrap; gap:8px; justify-content:flex-start; width:100%}
  .nav a, .nav button{flex:1 1 100%; text-align:left}
}

/* Prevent brand text from breaking into 2 lines */
.brand strong{white-space:nowrap}

/* Mobile nav: stack links so "Home" never disappears */
@media (max-width:768px){
  .nav{flex-wrap:wrap; gap:8px; justify-content:flex-start}
  .nav a, .nav button{flex:1 1 48%; text-align:center}
}

/* Attractive button variants */
.btn.call{background:var(--call-bg); color:var(--call-ink); border:2px solid var(--call-bg);}
.btn.call:hover{box-shadow:0 0 0 6px rgba(216,162,27,.20)}
.btn.whatsapp{background:linear-gradient(180deg,#25D366,#1EBE5D); color:#fff; border:none}
.btn.whatsapp:hover{box-shadow:0 0 0 6px rgba(37,211,102,.22)}
.btn.whatsapp img{filter:none}

.slogan{display:block;margin-top:8px;font-size:20px;font-weight:600;color:var(--accent)}

.btn img{width:18px;height:18px}

/* Mobile overhaul */
@media (max-width:768px){
  /* Disable sticky header on phones */
  .site-header{position:static}

  /* Tighter hero */
  .hero{padding-top:8px}
  .headline{font-size:34px}
  .hero p{font-size:15px}
  .slogan{font-size:17px}

  /* Nav: keep compact, avoid big pill button on 'Contact' */
  .nav{flex-wrap:wrap; gap:10px}
  .nav a,.nav button{padding:8px 10px}
  .nav a.btn{background:transparent;border:none}

  /* CTA buttons responsive grid */
  .hero .row{flex-wrap:wrap; gap:10px}
  .hero .row .btn{flex:1 1 calc(50% - 10px)}
  .hero .row .btn.primary{flex:1 1 100%}
}

/* Hamburger & mobile dropdown */
.hamburger{display:none; border:1px solid var(--line); background:var(--panel); padding:8px 12px; border-radius:10px; font-size:18px}
.mobile-menu{position:absolute; right:24px; top:64px; background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(20,29,46,.12); display:flex; flex-direction:column; min-width:180px; z-index:1000}
.mobile-menu a{padding:12px 14px; text-decoration:none; color:inherit; border-bottom:1px solid var(--line)}
.mobile-menu a:last-child{border-bottom:none}

.mobile-menu[hidden]{display:none !important}

@media (min-width:901px){
  .nav .nav-links a{padding:10px 14px}
}

.hamburger{margin-left:8px}
.nav .brand{flex:1}

/* Footer toggle visibility */
@media (max-width:768px){
  
  
  .hamburger{margin-left:8px}
  .site-header .container{align-items:center}
}

.nav.row{align-items:center; gap:10px}

/* Disable sticky CTA globally */
.sticky-cta{display:none !important}

/* Hamburger reposition */
@media (max-width:768px){
  .hamburger{position:absolute; right:16px; top:18px; margin:0; z-index:1100}
  .site-header .container{position:relative}
}

/* Mobile header positioning refinements */
@media (max-width:768px){
  .site-header .container{position:relative}
  .nav{position:relative; margin-left:auto}
  .hamburger{margin-left:auto; position:relative; z-index:1001}
  .mobile-menu{right:0; top:48px; left:auto}
  /* Avoid covering brand text */
  .brand{max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* --- Hard fix: top-right hamburger on phones, no overlap --- */
@media (max-width:768px){
  .site-header{position:relative}
  .site-header .container{position:relative; display:flex; align-items:center; justify-content:flex-start}
  .brand{flex:0 1 auto; max-width:72%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

  /* Make hamburger a small clean icon and pin it to the top-right */
  .hamburger{
    position:absolute; right:12px; top:10px;
    background:transparent; border:none; box-shadow:none; padding:6px; border-radius:6px;
  }
  .hamburger:active{transform:scale(.96)}
  /* Dropdown fixed to viewport top-right so it never covers brand */
  .mobile-menu{position:fixed; right:10px; top:56px; left:auto}
}

/* --- Refined hamburger placement: below brand line --- */
@media (max-width:768px){
  .hamburger{
    top:52px;  /* push it below brand/heading */
  }
  .mobile-menu{top:92px} /* dropdown opens further down */
  .site-header .container{flex-direction:column; align-items:flex-start}
  .brand{margin-bottom:8px}
}

/* Push hamburger below header line on phones to avoid overlapping the hero heading */
@media (max-width:768px){
  .site-header{padding-bottom:6px}
  .hamburger{top:56px}         /* previously ~10px */
  .mobile-menu{top:96px}       /* open a bit lower to match new button position */
  .hero{padding-top:10px}      /* slight breathing room under header */
}

/* Simple one-line nav on phones; no hamburger, no dropdown */
@media (max-width:768px){
  .hamburger, .mobile-menu{display:none !important}
  .nav-links{display:flex !important; gap:14px; flex-wrap:nowrap; overflow-x:auto}
  .nav-links a{padding:6px 0; font-size:15px; white-space:nowrap}
  .site-header{position:static; padding:10px 0 0}
  .hero{margin-top:8px} /* breathing space above "Professional Security..." */
}
/* Extra spacing between header and hero to avoid any overlap on small devices */
.headline{margin-top:6px}

/* Centered nav and brand fix on phones */
@media (max-width:768px){
  .nav-links{justify-content:center !important}
  .brand strong{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; max-width:100%}
  .site-header .container{flex-direction:column; align-items:center; gap:6px}
}

/* Center nav and show full brand on phones */
@media (max-width:768px){
  .nav-links{justify-content:center; text-align:center}
  .brand{max-width:100%; white-space:normal}
  .brand strong{display:block; font-size:18px; line-height:1.1}
}

/* Header refinements for mobile */
@media (max-width:768px){
  /* Bigger logo and brand text */
  .brand img{height:68px !important}
  .brand strong{font-size:20px !important}

  /* Nav links centered */
  .nav-links{justify-content:center; text-align:center; width:100%}

  /* Ensure theme toggle button visible on phones */
  
  
}

/* Tablet (iPad) fixes: always show nav links + theme toggle */
@media (min-width:769px) and (max-width:1024px){
  .nav-links{display:flex !important; gap:18px; align-items:center}
  .hamburger{display:none !important}
  
}

/* Final polish */
.card{box-shadow:0 8px 24px rgba(20,29,46,.06)}
.card:hover{box-shadow:0 12px 30px rgba(20,29,46,.09)}
.brand-rail img{opacity:.9; transition:transform .2s, opacity .2s}
.brand-rail img:hover{transform:translateY(-2px); opacity:1}

:root{ --call-bg:#d8901b; --call-ink:#ffffff }
:root.dark{ --call-bg:#f2b233; --call-ink:#1a1200 }

/* Global: footer toggle visible, header toggle hidden */
#themeToggle{display:none !important}
#footerToggleWrap{display:block !important}
#footerThemeToggle{display:inline-block !important}

/* Footer toggle spacing */
#footerToggleWrap{padding:16px 24px}

/* Bottom-right floating theme toggle */
#footerToggleWrap{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:2000;
  padding:0;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
#footerToggleWrap button{
  margin:0;
  padding:8px 14px;
  background:none;
  border:none;
  cursor:pointer;
  font-weight:600;
}