/* HomeGuard Solutions - clean, modern, fast static site
   - Uses CSS variables for easy theme tweaks
   - Accessible focus states
   - Reduced motion support
*/

:root{
  --bg: #0b1220;
  --bg2:#0d162b;
  --card:#101a33;
  --text:#e9eefc;
  --muted:#b7c3e6;
  --line: rgba(255,255,255,.10);

  --accent:#43b0ff;
  --accent2:#35f1b6;
  --danger:#ff5c7a;

  --shadow: 0 18px 48px rgba(0,0,0,.42);
  --radius: 18px;

  --max: 1120px;
  --pad: 18px;
  --headerH: 74px;
}

[data-theme="light"]{
  --bg:#f7f8fb;
  --bg2:#eef2fb;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#44506b;
  --line: rgba(0,0,0,.10);

  --accent:#1367ff;
  --accent2:#07b97e;

  --shadow: 0 18px 48px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1100px 700px at 10% 10%, rgba(67,176,255,.20), transparent 55%),
              radial-gradient(900px 600px at 90% 20%, rgba(53,241,182,.12), transparent 52%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  line-height:1.55;
  overflow-x:hidden;
  overscroll-behavior-x: none;
}

a{color:inherit}
a:hover{opacity:.92}
img{max-width:100%;display:block}

.container{
  width:min(var(--max), calc(100% - 2*var(--pad)));
  margin:0 auto;
}

/* Skip link */
.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  background:var(--card);
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:12px;
  z-index:9999;
}
.skip-link:focus{left:10px}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background: rgba(11,18,32,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
[data-theme="light"] .site-header{
  background: rgba(247,248,251,.75);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  height: var(--headerH);
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width: 240px;
}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(67,176,255,.22), rgba(53,241,182,.12));
  border:1px solid var(--line);
  font-weight:900;
  letter-spacing:.5px;
}
.brand-name{font-weight:800; display:block}
.brand-sub{font-size:.86rem; color:var(--muted); display:block}

/* Nav */
.nav{position:relative}
.nav-toggle{
  display:none;
}
.nav-menu{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-link{
  text-decoration:none;
  color:var(--muted);
  padding:10px 10px;
  border-radius:12px;
}
.nav-link:hover{background: rgba(255,255,255,.06); color:var(--text)}
[data-theme="light"] .nav-link:hover{background: rgba(0,0,0,.05)}
.nav-actions{display:flex; align-items:center; gap:10px; margin-left:4px}

.icon-btn{
  border:1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 14px;
  padding:10px 12px;
  cursor:pointer;
}
.icon-btn:hover{background: rgba(255,255,255,.06)}
[data-theme="light"] .icon-btn:hover{background: rgba(0,0,0,.05)}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  user-select:none;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform: translateY(1px)}
.btn-lg{padding:12px 16px; border-radius:16px}
.btn-block{width:100%}

.btn-primary{
  background: linear-gradient(135deg, rgba(67,176,255,.92), rgba(53,241,182,.85));
  border-color: transparent;
  color: #08101f;
}
.btn-primary:hover{filter:saturate(1.05)}
.btn-ghost{
  background: rgba(255,255,255,.05);
}
[data-theme="light"] .btn-ghost{
  background: rgba(0,0,0,.04);
}

/* Sections */
.section{
  padding: 68px 0;
}
.section-alt{
  background: rgba(255,255,255,.03);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
[data-theme="light"] .section-alt{
  background: rgba(0,0,0,.02);
}

.section-head{
  margin-bottom: 22px;
  text-align:center;
}
.section-head h2{
  margin:0 0 8px 0;
  font-size: clamp(1.6rem, 2vw, 2rem);
}
.section-head p{
  margin:0;
  color:var(--muted);
}

/* Hero */
.hero{
  position:relative;
  padding: calc(var(--headerH) + 26px) 0 48px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr; /* less clutter: single column always */
  gap: 22px;
  align-items:start;
  position:relative;
  z-index:2;
}
.hero-narrow{
  max-width: 920px; /* keeps hero content tighter now that the form is gone */
}
.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color: var(--muted);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  margin: 0 0 14px 0;
}
.hero-copy h1{
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  line-height:1.1;
  margin: 0 0 12px 0;
}
.lead{
  font-size: 1.05rem;
  color: var(--muted);
  margin:0 0 18px 0;
  max-width: 60ch;
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}

.hero-badges{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 20px;
}
.badge{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 12px;
  background: rgba(255,255,255,.04);
  display:flex;
  gap:10px;
}
.badge-icon{font-size: 1.15rem}
.badge-text{font-size:.95rem}
.badge-text strong{display:block}

.hero-mini{
  margin: 14px 0 0 0;
  color: var(--muted);
}
.hero-mini a{
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}
.hero-mini a:hover{text-decoration: underline}

.hero-points{
  margin-top: 18px;
  display:grid;
  gap: 10px;
  padding-left: 0;
  list-style: none;
  max-width: 520px;
}
.hero-points li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--text);
  font-weight: 700;
}
.hero-points li::before{
  content: "✓";
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--muted);
  font-weight: 900;
}
.hero-trust{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* Cards */
.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
}
[data-theme="light"] .card{
  background: var(--card);
}

.form{display:grid; gap: 10px}
.form-row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}

.field{display:grid; gap:6px}
.field-label{font-size:.92rem; color:var(--muted)}
input, select, textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea{
  background: rgba(0,0,0,.03);
  color: var(--text);
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(67,176,255,.75);
  box-shadow: 0 0 0 4px rgba(67,176,255,.18);
}
textarea{resize: vertical}

.fineprint{
  margin: 4px 0 0 0;
  font-size: .9rem;
  color: var(--muted);
}
.form-status{
  min-height: 18px;
  font-size: .95rem;
}
.center{text-align:center}

/* Netlify honeypot: visually hidden but accessible */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Layout grids */
.cards-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.feature{padding: 16px}
.card-icon{
  width:46px; height:46px;
  border-radius: 16px;
  border:1px solid var(--line);
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  margin-bottom: 10px;
  font-size: 1.15rem;
}
.feature h3{margin: 0 0 8px}
.checklist{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.checklist li{margin: 6px 0}
.card-link{
  display:inline-block;
  margin-top: 12px;
  color: var(--text);
  text-decoration:none;
  font-weight: 800;
}
.card-link:hover{text-decoration:underline}

.callout{
  margin-top: 18px;
  border:1px dashed rgba(67,176,255,.45);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(67,176,255,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.callout h3{margin:0 0 6px}
.callout p{margin:0; color:var(--muted)}
.callout-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Pricing */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.price{padding: 16px; position:relative}
.price-top{margin-bottom: 10px}
.price-top h3{margin:0 0 6px}
.price-amount{
  margin:0;
  font-size: 2rem;
  line-height:1;
}
.price-plus{font-size: 1.2rem; color:var(--muted)}
.muted{color:var(--muted)}
.pill{
  position:absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:800;
  color: #08101f;
  background: linear-gradient(135deg, rgba(67,176,255,.92), rgba(53,241,182,.85));
}
.popular{
  outline: 2px solid rgba(67,176,255,.55);
}

/* Reviews */
.reviews-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.review{padding: 16px}
.review blockquote{
  margin:0 0 14px 0;
  color: var(--text);
  font-size: 1rem;
}
.review figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.avatar{
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid var(--line);
  display:grid; place-items:center;
  font-weight:900;
  background: rgba(255,255,255,.05);
}
.stars{
  white-space:nowrap;
  color: #ffd363;
  letter-spacing: 1px;
  font-size: 1rem;
}

/* Why */
.why-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.why-item{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(255,255,255,.04);
}
.why-icon{
  width:46px; height:46px;
  border-radius: 16px;
  border:1px solid var(--line);
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  margin-bottom: 10px;
  font-size: 1.15rem;
}
.why-item h3{margin:0 0 6px}
.why-item p{margin:0; color: var(--muted)}

.process{
  margin-top: 18px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: rgba(255,255,255,.04);
}
.process h3{margin:0 0 10px}
.steps{margin:0; padding-left: 18px}
.steps li{margin: 8px 0; color: var(--muted)}
.steps strong{color: var(--text)}

/* Area chips */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.chip{
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 8px 12px;
  border-radius:999px;
  color: var(--muted);
  font-weight:800;
}

.chip-small{
  padding: 6px 10px;
  font-size: .92rem;
}

/* Accordion */
.accordion{
  display:grid;
  gap: 10px;
  max-width: 920px;
  margin: 0 auto;
}
.qa{
  border:1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.04);
  padding: 10px 12px;
}
.qa summary{
  cursor:pointer;
  font-weight: 900;
  padding: 8px 6px;
}
.qa[open] summary{color: var(--text)}
.qa-body{
  padding: 8px 6px 12px;
  color: var(--muted);
}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}
.contact-card{padding: 16px}
.contact-big{
  font-size: 1.3rem;
  margin: 8px 0 4px;
}
.contact-actions{display:flex; gap:10px; flex-wrap:wrap}
.sep{
  border:none;
  border-top:1px solid var(--line);
  margin: 14px 0;
}

/* Footer */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 34px 0 88px;
  background: rgba(0,0,0,.10);
}
[data-theme="light"] .site-footer{background: rgba(0,0,0,.02)}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 18px;
}
.footer-cols{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.footer-cols h4{margin:0 0 10px}
.footer-cols a{
  display:block;
  color: var(--muted);
  text-decoration:none;
  margin: 7px 0;
}
.footer-cols a:hover{color: var(--text)}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding-top: 16px;
  margin-top: 16px;
  border-top:1px solid var(--line);
  color: var(--muted);
  flex-wrap:wrap;
}
.footer-brand .brand-sub{max-width: 52ch}

/* Background shapes */
.hero-bg{position:absolute; inset:0; overflow:hidden; z-index:1; pointer-events:none}
.hero-blob{
  position:absolute;
  width: 640px; height: 640px;
  left: -220px; top: -240px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(67,176,255,.55), transparent 52%),
              radial-gradient(circle at 60% 55%, rgba(53,241,182,.35), transparent 60%);
  filter: blur(10px);
  opacity: .8;
}
.hero-gridlines{
  position:absolute;
  inset:-20px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 45% 35%, rgba(0,0,0,1), transparent 60%);
  opacity:.35;
}

/* Mobile sticky bar */
.mobile-bar{
  position:fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 1200;
  display:none;
  border:1px solid var(--line);
  border-radius: 18px;
  background: rgba(11,18,32,.75);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
[data-theme="light"] .mobile-bar{background: rgba(247,248,251,.8)}
.mobile-action{
  flex:1;
  text-decoration:none;
  text-align:center;
  padding: 12px 8px;
  font-weight: 900;
  color: var(--text);
  border-right:1px solid var(--line);
}
.mobile-action:last-child{border-right:none}
.mobile-action:hover{background: rgba(255,255,255,.06)}
[data-theme="light"] .mobile-action:hover{background: rgba(0,0,0,.05)}

/* Reveal animations */
[data-reveal]{opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease}
.revealed{opacity:1 !important; transform: translateY(0) !important}

/* Accessibility: focus */
:focus-visible{
  outline: 3px solid rgba(67,176,255,.7);
  outline-offset: 3px;
  border-radius: 14px;
}

/* Responsiveness */
@media (max-width: 980px){
  .cards-3, .pricing-grid, .reviews-grid, .why-grid{grid-template-columns: 1fr; }
  .footer-grid{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
  .hero-badges{grid-template-columns: 1fr}
}

@media (max-width: 760px){
  .nav-toggle{display:inline-flex}
  .nav-menu{
    position:absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, calc(100vw - 24px));
    padding: 10px;
    flex-direction:column;
    align-items:stretch;
    gap: 6px;
    border:1px solid var(--line);
    border-radius: 18px;
    background: rgba(11,18,32,.92);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow);
    display:none;
  }
  [data-theme="light"] .nav-menu{background: rgba(247,248,251,.96)}
  .nav-menu.open{display:flex}
  .nav-actions{justify-content:space-between}
  .form-row{grid-template-columns: 1fr}
  .mobile-bar{display:flex}
  .site-footer{padding-bottom: 110px}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  [data-reveal]{transition:none}
}

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.modal.is-open{display:block}
.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}
.modal-panel{
  position: relative;
  max-width: 720px;
  margin: 8vh auto;
  background: rgba(20,20,24,.98);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  padding: 18px;
  width: calc(100% - 28px);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.modal-close{
  width: 40px;
  height: 40px;
}
body.modal-open{
  overflow: hidden;
}
@media (max-height: 720px){
  .modal-panel{ margin: 3vh auto; }
}

@media (max-width: 420px){
  :root{
    --pad: 14px;
    --headerH: 66px;
  }

  /* Prevent header overflow on tiny screens */
  .brand{min-width:0}
  .brand-sub{display:none}
  .brand-name{font-size: 1.02rem}

  /* Make hero buttons stack nicely */
  .hero-cta .btn{width:100%}

  /* Slightly tighter section spacing */
  .section{padding: 54px 0}
}


@media (max-width: 380px){
  :root{
    --pad: 12px;
    --headerH: 64px;
  }

  /* Tighten header so nothing wraps */
  .brand-mark{width:36px; height:36px; border-radius:12px}
  .brand-name{font-size: 1rem}
  .icon-btn{padding: 9px 10px}

  /* Make hero headline fit nicely on narrow/tall screens */
  .hero-copy h1{font-size: 2.02rem}
  .lead{font-size: 1rem}

  /* Make badges less chunky */
  .badge{padding: 10px}
  .badge-text{font-size: .92rem}

  /* Buttons stack and stay readable */
  .btn-lg{padding: 11px 14px}
  .hero-cta .btn{width:100%}

  /* Bottom bar: prevent wrapping */
  .mobile-action{padding: 11px 6px; font-size: .95rem}
}

@supports (width: 100dvw){
  @media (max-width: 760px){
    .nav-menu{width: min(360px, calc(100dvw - 24px));}
  }
}