/*
Theme Name: Wealos IT Services
Theme URI: https://wealos.com
Author: Wealos IT Services
Description: Dark, conversion-first MSP theme built for modern managed IT marketing and future portal integration.
Version: 6.4.0
License: GPLv2 or later
Text Domain: wealos
*/

:root{
  --bg-main:#020617;
  --bg-top:#020b2d;
  --bg-panel:#020b1f;
  --border-soft:rgba(255,255,255,0.08);
  --text-main:#e5e7eb;
  --text-muted:#9ca3af;
  --accent:#38bdf8;
  --accent2:#2563eb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(circle at top,var(--bg-top),var(--bg-main) 60%);
  color:var(--text-main);
  line-height:1.6;
}

img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .75rem}
p{margin:.75rem 0;color:var(--text-muted)}
.w-container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.w-section{padding:4rem 0}

header{
  position:sticky;top:0;z-index:50;
  background:rgba(2,6,23,.72);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.w-nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0;min-height:72px}
.site-logo{display:flex;align-items:center;gap:.6rem}
.site-logo{display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:14px}
.site-logo img{height:44px;width:auto;display:block}
.w-navlinks{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center}
.w-navlinks a{color:#fff;font-weight:500;opacity:.9}
.w-navlinks a:hover{opacity:1}

.w-hero{padding:4.5rem 0 3.5rem}
.w-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.w-eyebrow{color:var(--text-muted);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase}
.w-hero h1{font-size:2.75rem}
.w-actions{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.w-btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.35rem;border-radius:12px;font-weight:700;border:1px solid transparent}
.w-btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04101f}
.w-btn-secondary{border-color:var(--border-soft);color:#fff;background:transparent}

.w-chips{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.w-chip{border:1px solid var(--border-soft);color:var(--text-muted);padding:.35rem .6rem;border-radius:999px;font-size:.85rem}

.w-visual{
  background:linear-gradient(180deg,#020b2d,#020617);
  border:1px solid var(--border-soft);
  border-radius:22px;
  padding:2rem;
  position:relative;
  overflow:hidden;
  min-height:160px;
}
.w-visual:before{
  content:"";
  position:absolute;inset:-60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(circle at 75% 55%, rgba(37,99,235,.18), transparent 55%);
  pointer-events:none;
}
.w-visual-inner{position:relative}
.w-metric{font-size:2.4rem;font-weight:900;color:var(--accent);margin:.35rem 0}
.w-visual small{color:var(--text-muted)}

.w-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-top:2rem}
.w-card{
  background:linear-gradient(180deg,#020b2d,#020617);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:1.6rem;
}
.w-card h3{margin:0 0 .5rem}

.w-trust{
  padding:1.8rem 0;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  color:var(--text-muted);
  text-align:center;
}
.w-trust strong{color:var(--text-main);font-weight:700}

.w-steps ol{margin:.75rem 0 0 1.1rem;padding:0;color:var(--text-muted)}
.w-steps li{margin:.35rem 0}

.w-seo{
  background:rgba(2,11,31,.55);
  border-top:1px solid var(--border-soft);
  padding:3rem 0;
}

.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;margin:2rem 0}
.price{font-size:2rem;color:var(--accent);font-weight:900;margin:.35rem 0 1rem}
ul{color:var(--text-muted)}
li{margin:.35rem 0}

footer{
  border-top:1px solid var(--border-soft);
  padding:2rem 0;
  color:var(--text-muted);
  font-size:.9rem;
}

@media(max-width:900px){
  .w-hero-grid{grid-template-columns:1fr}
  .w-hero h1{font-size:2.2rem}
  .site-logo img{height:30px}
}

/* === Wealos header logo: badge-only, larger, no header height change === */
.site-header{
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}
.site-logo img{
  height: 42px;
  width: auto;
  display: block;
}
@media (max-width: 640px){
  .site-logo{ width: 50px; height: 50px; }
  .site-logo img{ height: 38px; }
}


/* === v3.5: Integrated logo badge (no extra header strip) === */
.w-site-header{position:sticky;top:0;z-index:50;background:none;border-bottom:0;}

/* Single compact nav bar */
.w-navwrap{
  background:rgba(2,6,23,.72);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.w-navwrap .w-container{position:relative;}
.w-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0.75rem 0;
}

/* Primary header logo: badge-only inside a floating box (does not change menu height) */
.w-logo-box{
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  width:76px;
  height:76px;
  padding:10px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:rgba(2,6,23,.82);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.40);
  z-index:20;
}
.w-logo-box img{
  /* Make the badge larger without increasing the box size */
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  transform:scale(1.5);
  transform-origin:center;
  filter:
    drop-shadow(0 0 16px rgba(59,130,246,0.45))
    drop-shadow(0 0 30px rgba(37,99,235,0.25));
}

@media (max-width: 900px){
  /* Keep the header compact on mobile while still reading as "logo-first" */
  .w-logo-box{ width:66px; height:66px; padding:8px; }
  .w-logo-box img{ transform:scale(1.35); }
}

@media (max-width: 640px){
  .w-logo-box{left:14px;width:60px;height:60px;border-radius:16px;padding:9px;}
  .w-logo-box img{transform:scale(1.35);}
}

/* Logo box (badge-only) */
.w-brandmark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:74px;
  height:74px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.w-brandmark img{
  width:52px;
  height:auto;
  max-height:52px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.35));
}

.w-navlinks{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-left:0 !important;margin:0;}
.w-navlinks a{color:#fff;font-weight:500;opacity:.9}
.w-navlinks a:hover{opacity:1}

@media(max-width:900px){
  .w-brandmark{width:64px;height:64px;border-radius:14px}
  .w-brandmark img{width:46px;max-height:46px}
  .w-nav{justify-content:space-between}
}

/* Floating badge logo */
.w-floating-badge{
 position:absolute;
 top:64px;
 left:24px;
 width:88px;
 height:88px;
 z-index:60;
 background:rgba(2,6,23,.9);
 border-radius:18px;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 20px 40px rgba(0,0,0,.45);
}
.w-floating-badge img{
 width:64px;
 height:64px;
 object-fit:contain;
}

/* === USER APPENDED STYLES (do not edit) === */
:root{
  --bg-main:#020617;
  --bg-top:#020b2d;
  --bg-panel:#020b1f;
  --border-soft:rgba(255,255,255,0.08);
  --text-main:#e5e7eb;
  --text-muted:#9ca3af;
  --accent:#38bdf8;
  --accent2:#2563eb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(circle at top,var(--bg-top),var(--bg-main) 60%);
  color:var(--text-main);
  line-height:1.6;
}

img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 .75rem}
p{margin:.75rem 0;color:var(--text-muted)}
.w-container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.w-section{padding:4rem 0}

header{
  position:sticky;top:0;z-index:50;
  background:rgba(2,6,23,.72);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.w-nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0;min-height:72px}
.site-logo{display:flex;align-items:center;gap:.6rem}
.site-logo{display:flex;align-items:center;justify-content:center;width:64px;height:64px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);border-radius:14px}
.site-logo img{height:44px;width:auto;display:block}
.w-navlinks{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center}
.w-navlinks a{color:#fff;font-weight:500;opacity:.9}
.w-navlinks a:hover{opacity:1}

.w-hero{padding:4.5rem 0 3.5rem}
.w-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.w-eyebrow{color:var(--text-muted);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase}
.w-hero h1{font-size:2.75rem}
.w-actions{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.w-btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.35rem;border-radius:12px;font-weight:700;border:1px solid transparent}
.w-btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#04101f}
.w-btn-secondary{border-color:var(--border-soft);color:#fff;background:transparent}

.w-chips{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.w-chip{border:1px solid var(--border-soft);color:var(--text-muted);padding:.35rem .6rem;border-radius:999px;font-size:.85rem}

.w-visual{
  background:linear-gradient(180deg,#020b2d,#020617);
  border:1px solid var(--border-soft);
  border-radius:22px;
  padding:2rem;
  position:relative;
  overflow:hidden;
  min-height:160px;
}
.w-visual:before{
  content:"";
  position:absolute;inset:-60px;
  background:
    radial-gradient(circle at 20% 30%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(circle at 75% 55%, rgba(37,99,235,.18), transparent 55%);
  pointer-events:none;
}
.w-visual-inner{position:relative}
.w-metric{font-size:2.4rem;font-weight:900;color:var(--accent);margin:.35rem 0}
.w-visual small{color:var(--text-muted)}

.w-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-top:2rem}
.w-card{
  background:linear-gradient(180deg,#020b2d,#020617);
  border:1px solid var(--border-soft);
  border-radius:18px;
  padding:1.6rem;
}
.w-card h3{margin:0 0 .5rem}

.w-trust{
  padding:1.8rem 0;
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  color:var(--text-muted);
  text-align:center;
}
.w-trust strong{color:var(--text-main);font-weight:700}

.w-steps ol{margin:.75rem 0 0 1.1rem;padding:0;color:var(--text-muted)}
.w-steps li{margin:.35rem 0}

.w-seo{
  background:rgba(2,11,31,.55);
  border-top:1px solid var(--border-soft);
  padding:3rem 0;
}

.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;margin:2rem 0}
.price{font-size:2rem;color:var(--accent);font-weight:900;margin:.35rem 0 1rem}
ul{color:var(--text-muted)}
li{margin:.35rem 0}

footer{
  border-top:1px solid var(--border-soft);
  padding:2rem 0;
  color:var(--text-muted);
  font-size:.9rem;
}

@media(max-width:900px){
  .w-hero-grid{grid-template-columns:1fr}
  .w-hero h1{font-size:2.2rem}
  .site-logo img{height:30px}
}

/* === Wealos header logo: badge-only, larger, no header height change === */
.site-header{
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}
.site-logo img{
  height: 42px;
  width: auto;
  display: block;
}
@media (max-width: 640px){
  .site-logo{ width: 50px; height: 50px; }
  .site-logo img{ height: 38px; }
}


/* === v3.5: Integrated logo badge (no extra header strip) === */
.w-site-header{position:sticky;top:0;z-index:50;background:none;border-bottom:0;}

/* Single compact nav bar */
.w-navwrap{
  background:rgba(2,6,23,.72);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.w-navwrap .w-container{position:relative;}
.w-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0.75rem 0;
}

/* Primary header logo: badge-only inside a floating box (does not change menu height) */
.w-logo-box{
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  width:76px;
  height:76px;
  padding:10px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:rgba(2,6,23,.82);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.40);
  z-index:20;
}
.w-logo-box img{
  /* Make the badge larger without increasing the box size */
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  transform:scale(1.5);
  transform-origin:center;
  filter:
    drop-shadow(0 0 16px rgba(59,130,246,0.45))
    drop-shadow(0 0 30px rgba(37,99,235,0.25));
}

@media (max-width: 900px){
  /* Keep the header compact on mobile while still reading as "logo-first" */
  .w-logo-box{ width:66px; height:66px; padding:8px; }
  .w-logo-box img{ transform:scale(1.35); }
}

@media (max-width: 640px){
  .w-logo-box{left:14px;width:60px;height:60px;border-radius:16px;padding:9px;}
  .w-logo-box img{transform:scale(1.35);}
}

/* Logo box (badge-only) */
.w-brandmark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:74px;
  height:74px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.w-brandmark img{
  width:52px;
  height:auto;
  max-height:52px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,.35));
}

.w-navlinks{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;padding-left:0 !important;margin:0;}
.w-navlinks a{color:#fff;font-weight:500;opacity:.9}
.w-navlinks a:hover{opacity:1}

@media(max-width:900px){
  .w-brandmark{width:64px;height:64px;border-radius:14px}
  .w-brandmark img{width:46px;max-height:46px}
  .w-nav{justify-content:space-between}
}

/* Floating badge logo */
.w-floating-badge{
 position:absolute;
 top:64px;
 left:24px;
 width:88px;
 height:88px;
 z-index:60;
 background:rgba(2,6,23,.9);
 border-radius:18px;
 display:flex;
 align-items:center;
 justify-content:center;
 box-shadow:0 20px 40px rgba(0,0,0,.45);
}
.w-floating-badge img{
 width:64px;
 height:64px;
 object-fit:contain;
}


.w-logo-box {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  width: 56px;        /* fixed anchor size */
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible; /* THIS IS CRITICAL */
}


.w-logo-box {
  width: 60px;
  height: 60px;
}

.w-logo-box img {
  width: 65px; /* 20% larger */
}

/* === v4.7: header badge brightness + size lock (no box, no header height change) === */
.w-logo-box{
  width:60px !important;
  height:60px !important;
  padding:0 !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.w-logo-box img{
  width:78px !important; /* ~20% larger vs 65px */
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  /* brighten + increase perceived glow */
  filter:
    brightness(1.35)
    saturate(1.25)
    contrast(1.05)
    drop-shadow(0 0 18px rgba(56,189,248,.55))
    drop-shadow(0 0 34px rgba(37,99,235,.35));
}

@media (max-width: 900px){
  .w-logo-box{ width:56px !important; height:56px !important; }
  .w-logo-box img{ width:72px !important; }
}
@media (max-width: 640px){
  .w-logo-box{ width:52px !important; height:52px !important; }
  .w-logo-box img{ width:66px !important; }
}

/* === Mobile header layout fix: prevent logo overlap, keep header compact === */
@media (max-width: 640px){
  .w-navwrap .w-container{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* Put the badge back into normal flow on mobile so it cannot collide with nav */
  .w-logo-box{
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    flex: 0 0 auto;

    /* Keep the click target compact */
    width: 48px !important;
    height: 48px !important;
  }

  /* Preserve the same visual logo size (badge can overflow its anchor) */
  .w-logo-box img{
    width: 56px !important;
    height: auto !important;
    max-width: none !important;
  }

  .w-nav{
    justify-content: flex-end !important;
    padding: 0.6rem 0 !important;
    width: auto;
    flex: 1 1 auto;
  }

  .w-navlinks{
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .w-navlinks a{
    font-size: 0.95rem;
  }
}
/* Cybersecurity dashboard visuals */
.wealos-figure {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.wealos-figure img { display:block; width:100%; height:auto; }
.wealos-media { display:grid; gap:1.1rem; }
@media (min-width: 900px) {
  .wealos-media { grid-template-columns: 1fr 1fr; }
}

/* Cybersecurity posture: place explanatory copy inside the top of the figure */
.wealos-figure-posture{
  position: relative;
  overflow: hidden;
  padding: 2rem 2rem 0;
}
.wealos-figure-posture .wealos-figure-image{
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.25rem;
}
.wealos-figure-posture .wealos-figure-overlay{
  position: relative;
  max-width: 58rem;
}
.wealos-figure-posture .wealos-figure-caption{
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  opacity: 0.80;
  margin-bottom: 0.6rem;
}
.wealos-figure-posture .wealos-figure-overlay h2{
  margin: 0 0 0.75rem;
}
.wealos-figure-posture .wealos-figure-overlay p{
  margin: 0 0 0.6rem;
  opacity: 0.92;
}
@media (max-width: 700px){
  .wealos-figure-posture{ padding: 1.25rem 1.25rem 0; }
}