: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}


/* 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;
}


.site-footer {
  position: relative;
}
.site-footer #theme-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
}


/* === Fix: Footer dark-mode toggle pinned bottom-right === */
footer { position: relative; }
#footerToggleWrap { display: block !important; position: relative; }


/* Hide legacy floating toggle if any scripts inject it */
#theme-toggle { display: none !important; }


/* === Footer Toggle Inline Style Fix === */
#footerThemeToggle {
  margin-left: 8px;
  position: static;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
}


/* === Footer toggle inline with credits === */
#footerThemeToggle {
  position: static !important;
  margin-left: 8px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
/* Remove any layout dedicated to the old wrapper */
#footerToggleWrap { display: none !important; }


/* === Fix: Inactive tab visibility === */
[data-tab] {
  opacity: 1 !important;
  color: var(--ink) !important;
}
[data-tab]:not(.active) {
  background: #f0f0f0 !important;
  color: var(--muted) !important;
}

/* === Fix: Footer dark mode toggle visibility === */
#footerThemeToggle {
  color: var(--ink) !important;
  font-weight: 500;
}
:root.dark #footerThemeToggle {
  color: var(--ink) !important;
}


/* === Visibility tweaks === */
/* Tabs: make inactive tab text and background higher contrast */
[data-tab] {
  font-weight: 600;
}
[data-tab]:not(.active) {
  background: #eceff3 !important;   /* slightly darker than before */
  color: var(--ink) !important;      /* use main text color for contrast */
  opacity: 1 !important;
  border: 1px solid var(--line) !important;
}

/* Theme toggle: always readable */
.theme-toggle {
  color: var(--ink) !important;
  font-weight: 600;
}
:root.dark .theme-toggle {
  color: var(--ink) !important; /* in dark, ink is light */
}

.btn svg{width:18px;height:18px;display:inline-block}



/* === Accessibility & Visibility Tweaks (added) === */
::selection{ background: var(--accent); color: var(--accent-ink); }
::-moz-selection{ background: var(--accent); color: var(--accent-ink); }

a, a:visited{ color: var(--ink); text-decoration-color: rgba(0,0,0,.25); }
:root.dark a, :root.dark a:visited{ color: var(--ink); text-decoration-color: rgba(255,255,255,.35); }
a:hover{ text-decoration: underline; }

.nav a{ color: var(--ink); }
.nav a:focus, .nav button:focus, .tab:focus, .btn:focus{ outline:2px solid var(--accent); outline-offset:2px; }

.tab{ color: var(--ink); }
:root.dark .tab{ background:#141a24; }
.tab.active{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }

/* Make muted text a bit brighter in dark mode for readability */
:root.dark .fine{ color:#c9d3e3; }

/* Improve icon visibility on dark backgrounds (e.g., phone/WhatsApp icons) */
:root.dark .btn img, :root.dark .nav img[src$=".svg"]{ filter: invert(1) brightness(1.2); }



/* --- Fix invisible inactive tabs (added) --- */
.tab {
  background: var(--panel);
  color: var(--ink);
  opacity: 1;  /* remove faded look */
  font-weight: 600;
}
.tab:not(.active) {
  background: #f1f3f7;  /* light grey background */
  color: #444;          /* dark text */
}
:root.dark .tab:not(.active) {
  background: #1e2533;  /* dark grey background */
  color: #ccc;          /* light text */
}

/* --- Fix dark mode toggle visibility --- */
.theme-toggle {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  opacity: 1;
}
:root.dark .theme-toggle {
  background: #1e2533;
  color: #f1f1f1;
  border: 1px solid #444;
}



/* === Final Visibility Tweaks (tabs + theme toggle) === */
.tab{ background: var(--panel); color: var(--ink); opacity: 1; font-weight:600; }
.tab:not(.active){ background:#f1f3f7; color:#444; border-color: var(--line); }
:root.dark .tab:not(.active){ background:#1e2533; color:#ccc; border-color:#2a3447; }

.theme-toggle{ background: var(--panel); color: var(--ink); border:1px solid var(--line); opacity:1; }
:root.dark .theme-toggle{ background:#1e2533; color:#f1f1f1; border:1px solid #444; }



/* --- Dark mode inactive tab fix (final) --- */
:root.dark .tab:not(.active) {
  background: #2a2f3a !important;   /* medium-dark grey */
  color: #f0f0f0 !important;        /* bright text */
  border: 1px solid #3a4150 !important;
  font-weight: 600;
}



/* === Strong Dark-Mode Inactive Tab Fix (with !important) === */
:root.dark .tab:not(.active){
  background:#2a2f3a !important;
  color:#f0f0f0 !important;
  border:1px solid #3a4150 !important;
  font-weight:600 !important;
}



/* === Dark mode visibility fixes for cards/boxes === */
:root.dark .card,
:root.dark .panel,
:root.dark .box,
:root.dark .pricing,
:root.dark .service {
  background: color-mix(in srgb, var(--card) 85%, #ffffff 15%);
  border-color: color-mix(in srgb, var(--line) 50%, #ffffff 50%);
  outline: 1px solid color-mix(in srgb, var(--line) 30%, #ffffff 70%);
}

:root.dark .card.highlight,
:root.dark .box.highlight {
  background: color-mix(in srgb, var(--card) 70%, var(--accent) 30%);
  outline: 2px solid var(--accent);
  box-shadow: 0 12px 36px rgba(242,178,51,0.25);
}

:root.dark .tab,
:root.dark .theme-toggle,
:root.dark .btn {
  background: color-mix(in srgb, var(--panel) 80%, #ffffff 20%);
  border-color: color-mix(in srgb, var(--line) 60%, #ffffff 40%);
}

:root.dark input, :root.dark select, :root.dark textarea {
  background: color-mix(in srgb, var(--panel) 80%, #ffffff 20%);
  border: 1px solid color-mix(in srgb, var(--line) 60%, #ffffff 40%);
  color: var(--ink);
  outline: none;
}

:root.dark .price, :root.dark h3, :root.dark .card p, :root.dark label {
  color: var(--ink);
}

/* Focus ring for accessibility (both themes) */
.card:focus-within, .card:focus, .btn:focus, input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* === End dark mode fixes === */




/* Fallbacks for browsers that don't support color-mix */
@supports not (color: color-mix(in srgb, black 0%, white 0%)) {
  :root.dark .card,
  :root.dark .panel,
  :root.dark .box,
  :root.dark .pricing,
  :root.dark .service {
    background: #1a2230; /* slightly lighter than --card */
    border-color: #3a4660;
    outline: 1px solid #5d6a86;
  }
  :root.dark .card.highlight,
  :root.dark .box.highlight {
    background: #2a2a17;
    outline: 2px solid #f2b233;
    box-shadow: 0 12px 36px rgba(242,178,51,0.25);
  }
  :root.dark .tab,
  :root.dark .theme-toggle,
  :root.dark .btn {
    background: #182030;
    border-color: #3a4660;
  }
  :root.dark input, :root.dark select, :root.dark textarea {
    background: #182030;
    border: 1px solid #3a4660;
    color: #e9ecf1;
  }
}




/* === Targeted dark-mode fixes: tabs + package cards only === */
/* Tabs: keep visible in dark, turn golden on click/active */
:root.dark .tab {
  background: color-mix(in srgb, var(--panel) 85%, #ffffff 15%);
  border-color: color-mix(in srgb, var(--line) 60%, #ffffff 40%);
  color: var(--ink);
}
/* Active and pressed states = gold */
:root.dark .tab.active,
:root.dark .tab:active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 0 0 6px rgba(242,178,51,0.18);
}
:root.dark .tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Package cards: slightly stronger border so it shows on dark */
:root.dark .cards .card {
  border-color: color-mix(in srgb, var(--line) 30%, #ffffff 70%);
}

/* Fallbacks when color-mix is unavailable */
@supports not (color: color-mix(in srgb, black 0%, white 0%)) {
  :root.dark .tab {
    background: #1a2230;
    border-color: #3a4660;
    color: #e9ecf1;
  }
  :root.dark .tab.active,
  :root.dark .tab:active {
    background: #f2b233;
    color: #1a1200;
    border-color: transparent;
    box-shadow: 0 0 0 6px rgba(242,178,51,0.18);
  }
  :root.dark .cards .card {
    border-color: #5d6a86;
  }
}
/* === End targeted fixes === */