:root {
  --primary: #0077FF;
  --dark: #1E1E1E;
  --muted: #555555;
  --border: #EAEAEA;
}
body {font-family: 'Inter', sans-serif; margin:0; color: var(--dark);}
a {color: var(--primary);}
.site-header {display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border);}
.logo {font-weight:700;}
main {max-width:1000px;margin:0 auto;padding:24px;}
.hero {text-align:center;padding:60px 10px 40px;}
.btn {display:inline-block;padding:10px 16px;border-radius:6px;border:1px solid var(--border);text-decoration:none;font-weight:600;}
.btn.primary {background:var(--primary);color:#fff;border:none;}
.cards, .pricing {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;}
.card, .plan {border:1px solid var(--border);border-radius:10px;padding:16px;}
.workflow .steps {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.trust-summary ul {list-style:none;padding:0;}
.site-footer {text-align:center;border-top:1px solid var(--border);padding:20px;margin-top:40px;color:var(--muted);}
.contact-grid {display:grid;grid-template-columns:2fr 1fr;gap:20px;}
form label {display:block;margin-bottom:12px;}
input, textarea {width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;margin-top:6px;}
@media(max-width:768px){.contact-grid{grid-template-columns:1fr;}}

/* CTA buttons */
.hero-cta { margin-top: 20px; display:flex; gap:12px; flex-wrap:wrap; }
.btn.secondary { background:#fff; color:#111; border:1px solid #ddd; }
.btn.ghost { background:transparent; border:1px solid #fff; color:#fff; }
@media (prefers-color-scheme: light) {
  .btn.ghost { border-color:#111; color:#111; }
}


/* ===== Modern Refresh (2025) ===== */
:root{
  --bg:#0b0c10;
  --surface:#ffffff;
  --muted:#6b7280;
  --primary:#2563eb; /* modern blue */
  --primary-600:#1d4ed8;
  --ring:#dbeafe;
  --card:#f8fafc;
  --border:#e5e7eb;
  --radius:16px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}

/* Typography & layout */
html,body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";}
body{background:#f6f7fb;color:#0f172a; line-height:1.6;}
.container{max-width:1100px;margin:0 auto;padding:0 20px;}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;}
.logo{font-weight:800;font-size:20px;text-decoration:none;color:#0f172a}
.nav a{margin-left:16px;color:#334155;text-decoration:none}
.nav a:hover{color:#0f172a}

/* Topbar */
.topbar{background:#0f172a;color:#fff;text-align:center;padding:8px 10px;font-size:14px}
.topbar a{color:#93c5fd}

/* Hero */
.hero{background:linear-gradient(135deg, #0ea5e9 0%, #2563eb 40%, #0b5be0 100%); color:#fff; padding:88px 0; position:relative; overflow:hidden;}
.hero .title{font-size:44px; font-weight:900; text-align:center; letter-spacing:0.2px;}
.hero .sub{margin-top:8px; text-align:center; opacity:.92}
.hero-cta{margin-top:22px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap}

/* Buttons */
.btn{display:inline-block; padding:12px 18px; border-radius:12px; background:var(--primary); color:#fff; text-decoration:none; font-weight:700; box-shadow:0 6px 16px rgba(37,99,235,.25); border:1px solid rgba(255,255,255,.15);}
.btn:hover{background:var(--primary-600)}
.btn.secondary{background:#fff; color:#0f172a; border:1px solid var(--border); box-shadow:var(--shadow)}
.btn.ghost{background:transparent; border:1px solid #bfdbfe; color:#fff}

/* Cards / sections */
.section{padding:64px 0}
.section h2{font-size:28px; text-align:center; margin-bottom:10px}
.section .lead{color:var(--muted); text-align:center; margin-bottom:28px}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:920px){ .grid.cols-3{grid-template-columns:1fr} }

.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px 0; font-size:18px}

/* Contact */
.contact-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:32px}
@media (max-width:900px){ .contact-wrap{grid-template-columns:1fr} }
form input, form textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); outline:none}
form textarea{min-height:150px; resize:vertical}
form .actions{display:flex; gap:12px; align-items:center; margin-top:10px}

/* Footer */
.site-footer{margin-top:40px; background:#fff; border-top:1px solid var(--border); padding:30px 0; color:#475569}
.legal-links a{color:#334155}


/* === BoltWebsite tweaks per user request === */
/* Force 4 cards in a row on desktop for the "Why" section */
.why .cards{display:grid; gap:16px}
@media (min-width: 1000px){
  .why .cards{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 999px){
  .why .cards{grid-template-columns:1fr}
}

/* Improve readability: ghost buttons on the hero become solid white */
.hero .btn.ghost{background:#ffffff; color:#0f172a; border-color:#ffffff; box-shadow:var(--shadow)}
.hero .btn.ghost:hover{filter:brightness(.96)}

/* Ensure legal links are styled consistently */
.legal-links{margin-top:10px; font-size:14px}
.legal-links a{margin:0 6px}


/* === Home hero left-aligned refresh === */
.hero{background:linear-gradient(135deg, #0ea5e9 0%, #2563eb 40%, #0b5be0 100%); color:#fff; padding:70px 0 42px;}
.hero .container{max-width:1100px; margin:0 auto; padding:0 20px;}
.hero-title{font-size:44px; font-weight:900; margin:0 0 14px 0; letter-spacing:.2px;}
.hero .sub{opacity:.95; margin:8px 0 10px 0;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;}
.cta-row.left{justify-content:flex-start;}
.cta-row.tight{margin-top:6px;}

/* Ensure ghost buttons are clearly visible everywhere */
.btn.ghost{background:#ffffff; color:#0f172a; border:1px solid #ffffff; box-shadow:var(--shadow);}
.btn.ghost:hover{filter:brightness(.96)}

/* Secondary button style to match solid white */
.btn.secondary{background:#fff; color:#0f172a; border:1px solid var(--border); box-shadow:var(--shadow);}

/* Bring the WHY section closer to the hero */
.why{padding:28px 0 54px;}
.why .why-lead{color:#334155; margin:0 0 18px 0;}

/* === Home hero left-aligned refresh === */
.hero{background:linear-gradient(135deg, #0ea5e9 0%, #2563eb 40%, #0b5be0 100%); color:#fff; padding:70px 0 42px;}
.hero .container{max-width:1100px; margin:0 auto; padding:0 20px;}
.hero-title{font-size:44px; font-weight:900; margin:0 0 14px 0; letter-spacing:.2px;}
.hero .sub{opacity:.95; margin:8px 0 10px 0;}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;}
.cta-row.left{justify-content:flex-start;}
.cta-row.tight{margin-top:6px;}

/* Ensure ghost buttons are clearly visible everywhere */
.btn.ghost{background:#ffffff; color:#0f172a; border:1px solid #ffffff; box-shadow:var(--shadow);}
.btn.ghost:hover{filter:brightness(.96)}

/* Secondary button style to match solid white */
.btn.secondary{background:#fff; color:#0f172a; border:1px solid var(--border); box-shadow:var(--shadow);}

/* Bring the WHY section closer to the hero */
.why{padding:28px 0 54px;}
.why .why-lead{color:#334155; margin:0 0 18px 0;}

/* === Layout refinements per feedback (Nov 9) === */
/* Hero: remove gradient, left-aligned, tighter spacing */
.hero{background:none !important; color:#0f172a !important; padding:44px 0 24px !important;}
.hero .container{max-width:1100px; margin:0 auto; padding:0 20px;}
.hero-title{font-size:44px; font-weight:900; margin:0 0 10px 0;}
.hero .sub{opacity:.95; margin:6px 0 6px 0;}

/* CTA rows */
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px;}
.cta-row.left{justify-content:flex-start;}
.cta-row.tight{margin-top:6px;}

/* Buttons visibility */
.btn.ghost{background:#ffffff; color:#0f172a; border:1px solid #e5e7eb; box-shadow:var(--shadow);}
.btn.secondary{background:#fff; color:#0f172a; border:1px solid #e5e7eb; box-shadow:var(--shadow);}

/* Reduce vertical gaps between sections */
.section{padding:40px 0;}
.why{padding:16px 0 28px;}
.workflow.section{padding-top:28px; padding-bottom:40px;}
.trust-summary{margin-top:10px;}

/* Center certain texts */
.workflow.section > p{ text-align:center; }
.trust-summary{ text-align:center; }
.trust-summary ul{ list-style:none; margin:8px auto 0; padding:0; display:inline-block; text-align:left; }
.trust-summary li{ margin:6px 0; }

/* Services page tweaks */
.page-hero.small{padding:16px 0 8px;}
.services-addons h2{ text-align:left !important; }

/* Contact page left-align + actions spacing */
.contact-grid, .contact-aside{ text-align:left; }
form .actions{ display:block; margin-top:10px; }
form .actions .btn{ display:inline-block; }

/* v13 rebuild: center why-cards row */
.why .cards{
  max-width:1150px;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
}
.why .cards .card h3{ white-space:nowrap; }

/* v13 rebuild: contact buttons equal height & left aligned */
.contact-grid form .actions{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.contact-grid form .actions .btn{
  height:44px; line-height:44px; padding:0 16px; font-size:15px; border-radius:12px;
}
.contact-grid h2{ text-align:left; }
.contact-grid{ justify-items:start; }


/* v14: Force single-column contact layout like screenshot */
.contact-grid{ display:grid; grid-template-columns: 1fr !important; }
.contact-aside{ margin-top: 28px; }
.contact-grid h2{ text-align:left; }


/* === v39 Contact Page refinements === */
.contact-grid {display: grid; grid-template-columns: 1fr; gap: 32px; justify-items: start;}
.contact-grid form {width:100%; max-width:650px;}
.contact-grid input, .contact-grid textarea {width:100%;}
.contact-grid .actions {display:flex; flex-direction:column; align-items:flex-start; gap:12px;}
.contact-grid .btn {width:230px; height:46px; line-height:46px; font-size:15px; text-align:center;}
.contact-aside ul {list-style:none; padding:0; margin:0;}
.contact-aside li {margin:6px 0;}
.contact-aside h2 {margin-bottom:10px;}
.contact-aside {margin-top:20px;}


/* === v40 Contact refinements per screenshot === */
/* 1) Ensure everything is left-aligned (already), keep explicit just in case */
.contact-grid, .contact-grid h2, .contact-aside { text-align:left; }

/* 2) Buttons: center text both vertically & horizontally; same height; prevent clipping */
.contact-grid .actions .btn,
.contact-grid button.btn {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  height:48px;
  line-height:1;
  padding:0 18px;
  text-align:center;
  white-space:nowrap; /* keep on one line */
}

/* Make both buttons roomy enough; don't force a fixed width that clips text */
.contact-grid .actions .btn { 
  min-width:300px;  /* fits "Book a Google Meet (15–30 min)" */
}

/* 3) Reduce the gap before "Other ways to reach us" so the block moves up */
.contact-aside { margin-top:8px !important; }
.contact-aside h2 { margin:6px 0 8px 0 !important; }
.contact-aside ul { margin-top:0 !important; }

/* Keep the section compact overall */
section.contact-grid { max-width:820px; margin-left:0; }


/* === v41: Align contact grid left with page hero, do not change input sizes === */
section.contact-grid{ margin-left:0 !important; }
.page-hero.small{ text-align:left; } /* just in case */


/* === v45: Services page layout refinements === */
.section h2 { text-align:left !important; }
.services-addons { margin-top:24px !important; }
.services-addons h2 { text-align:left !important; }
.services-addons ul { margin-top:6px !important; }


/* === v46: Separate alignment rules per page === */
/* Home page: center "How BoltWebsite Works" block */
.workflow.section h2,
.workflow.section > p { 
  text-align: center !important; 
}
.workflow.section .steps { 
  margin-left: auto; 
  margin-right: auto; 
}

/* Services page: keep Included Setup & Add-ons left-aligned */
.section.services-addons h2,
.section.services-addons p,
.section.services-addons ul,
.section h2 + ul,
.section h2 + p { 
  text-align: left !important; 
}


/* === v47 spacing & alignment tweaks === */
/* Home: tighten gap between Workflow and Trust sections */
.workflow.section{ padding-bottom:24px !important; }
.trust-summary{ margin-top:10px !important; }
.trust-summary h2{ margin-top:0 !important; margin-bottom:8px !important; }

/* Services: bring Add-ons closer to Included Setup */
.services-addons{ margin-top:12px !important; }


/* === v48 adjustments === */
/* Home: center the "Because you don’t need another..." text */
.why .why-lead { 
  text-align:center !important; 
  margin-left:auto; 
  margin-right:auto; 
}

/* Services: reduce vertical gap between Included Setup paragraph and Add-ons heading */
.section.services-addons { 
  margin-top:0 !important; 
  padding-top:8px !important; 
}


/* === v49 fine-tuned spacing === */
/* Services: tighten space between Included Setup paragraph and Add-ons heading */
.section.services-addons {
  margin-top: -8px !important;
  padding-top: 4px !important;
}


/* === v50: Mobile safe padding for Services & Contact === */
@media (max-width: 768px){
  /* Increase side padding so content doesn't touch screen edges */
  .container{ padding-left:22px !important; padding-right:22px !important; }
  /* Tighten internal sections slightly but keep breathing room */
  .section{ padding-left:2px; padding-right:2px; }
  .page-hero.small{ padding-left:2px; padding-right:2px; }
  /* Contact form block */
  .contact-grid{ padding-left:0; padding-right:0; }
}


/* === Hamburger Menu (v53) === */
.hamburger{
  display:none;
  background:none;
  border:none;
  font-size:28px;
  line-height:1;
  padding:6px 8px;
  cursor:pointer;
}
.hamburger:focus{outline:2px solid var(--ring); outline-offset:2px; border-radius:8px;}
@media (max-width: 820px){
  .hamburger{display:block;}
  .nav{display:none;}
  .nav.open{display:flex; flex-direction:column; gap:6px; position:absolute; top:100%; right:0; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.08); padding:10px; min-width:180px; z-index:50;}
  .nav a{margin:0; padding:8px 10px; display:block;}
}

@media (max-width: 820px){
  .site-header{position:relative;}
}

/* === Desktop/Mobile visibility hardening (v56) === */
.hamburger{display:none !important; margin-left:auto;}
@media (max-width: 820px){
  .hamburger{display:inline-flex !important; align-items:center; justify-content:center;}
}


/* === Footer compact + copyright (v57) === */
.site-footer {
  text-align:center;
  border-top:1px solid var(--border);
  padding:16px 0 12px;
  margin-top:40px;
  color:var(--muted);
  line-height:1.4;
  font-size:14px;
}
.site-footer a {
  color:var(--primary);
  text-decoration:none;
}
.site-footer a:hover {
  text-decoration:underline;
}


/* === Launch Offer Banner (v58) === */
.offer {
  margin-top: 16px;
  text-align: center;
  font-size: 16px;
  color: #0f172a;
  background: #dbeafe;
  padding: 8px 12px;
  border-radius: 10px;
  display: inline-block;
  line-height: 1.4;
}
.offer .muted {
  color: #334155;
  font-size: 14px;
  opacity: 0.85;
}


/* === Launch Offer Banner strengthen (v59) === */
.hero .offer{
  background:#dbeafe;
  border-radius:10px;
  padding:10px 14px;
  margin:18px auto 0;
  color:#0f172a;
  font-weight:500;
  display:inline-block;
  text-align:center;
  line-height:1.5;
}
.hero .offer .muted{
  display:block;
  font-size:14px;
  color:#334155;
  opacity:.9;
}


/* === Launch Offer Banner (v60) === */
.hero .offer{
  background:#dbeafe;
  border-radius:10px;
  padding:10px 14px;
  margin:14px auto 0;
  color:#0f172a;
  font-weight:600;
  display:inline-block;
  text-align:center;
  line-height:1.5;
}
.hero .offer .muted{
  display:block;
  font-size:14px;
  color:#334155;
  opacity:.95;
}