/* OTB Optimisations — refreshed style (compact spacing + fixes) */
:root{
  --bg:#f6f9ff;
  --surface:#ffffff;
  --ink:#0b2740;
  --muted:#5b6f86;
  --brand:#0f4c81;
  --brand-2:#2c7bd1;
  --line:#e6eef7;
  --radius:16px;
  --shadow:0 8px 24px rgba(15,76,129,.12);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
.visually-hidden-focusable:not(:focus):not(:active){
  position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; padding:0;
}

/* layout */
.container{width:min(1100px,92%); margin-inline:auto}
.section{padding:40px 0;}                 /* tighter than 64px */
.section + .section{margin-top:-10px;}    /* tighter transitions */
.section.alt{background:#f9fbff}
h1,h2,h3{line-height:1.2; margin:0 0 12px}
.section h2{margin-bottom:12px}
.lead{color:var(--muted); font-size:1.1rem; margin-bottom:20px}

/* header */
.site-header{position:sticky; top:0; background:#ffffffcc; backdrop-filter:blur(6px); border-bottom:1px solid var(--line); z-index:10}
.header-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none}
.brand-logo{height:50px; width:auto; display:block}
.nav a{color:var(--ink); text-decoration:none; margin-left:18px; font-weight:600}
.nav a:hover{color:var(--brand)}

/* hero */
.hero{padding:38px 0 8px; background:linear-gradient(180deg,#f2f8ff,rgba(255,255,255,0))}
.hero-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center}
.hero-copy h1{font-size:2.5rem}
.cta-group{display:flex; gap:12px; margin:14px 0}
.trust{margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:.95rem}
.hero-art img{width:100%; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow)}

/* components */
.btn{display:inline-block; background:var(--brand); color:#fff; text-decoration:none; padding:12px 18px; border-radius:12px; font-weight:700; box-shadow:var(--shadow); transition:transform .05s ease}
.btn:hover{transform:translateY(-1px)}
.btn-outline{background:#fff; color:var(--brand); border:2px solid var(--brand)}
.btn-small{padding:8px 12px; font-size:.9rem; color:#fff}
.btn.btn-small{background:var(--brand); color:#fff !important}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.step-num{
  width:36px; height:36px; border-radius:50%;
  background:#e9f2ff; color:var(--brand);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; margin:0 10px 0 0;
}
.steps .card h3{display:inline; margin:0}      /* number + title on one line */
.steps .card p{margin-top:10px}

/* grid list */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px}
.item{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; font-weight:600}
.note{color:var(--muted); margin-top:6px}

/* portfolio grid */
.grid.portfolio{grid-template-columns:repeat(2,1fr); gap:20px}
.site-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:0; overflow:hidden; box-shadow:var(--shadow); max-width:450px; margin:0 auto}
.site-card img{width:100%; height:180px; object-fit:cover; display:block}
.site-card h3{margin:14px 16px 6px; font-size:1.1rem}
.site-card h3 a{color:var(--brand); text-decoration:none}
.site-card h3 a:hover{text-decoration:underline}
.site-card p{margin:0 16px 16px; font-size:.95rem; color:var(--muted); line-height:1.5}

/* pricing (automation) */
.pricing{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.price-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px}
.price{font-size:28px; font-weight:800; color:var(--brand); margin-bottom:6px}

/* plans (web + seo + extras) */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px}
.plan{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow); display:flex; flex-direction:column}
.plan .btn{margin-top:auto}
.badge{display:inline-block; background:#2c7bd1; color:#fff; padding:6px 10px; border-radius:999px; font-weight:700; font-size:.85rem; margin-bottom:8px}
.badge.alt{background:#0f4c81}
.price-line{color:var(--muted); margin:6px 0 10px}
.features{padding-left:0; list-style:none; margin-bottom:16px}
.features li{padding-left:24px; position:relative; margin:6px 0}
.features li::before{content:"✓"; position:absolute; left:0; top:0; color:#1a7f37; font-weight:800}

.subhead{margin-top:28px}

/* testimonials */
.testimonials{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:10px 0}
.quote{display:grid; grid-template-columns:50px 1fr; gap:10px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; margin:0}
.quote blockquote{margin:0;color:#223;font-size:.92rem;line-height:1.5}
.quote figcaption{grid-column:1/-1;color:#5b6f86;font-size:.84rem;margin-top:4px;padding-left:0}
.avatar{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e9f2ff;color:var(--brand);font-weight:800;font-size:.95rem}

/* --- About Section --- */
.about-grid{display:flex; flex-wrap:wrap; align-items:center; gap:2rem; margin-top:1.2rem}
.about-text{flex:1 1 500px; font-size:1.05rem; line-height:1.7}
.about-image{flex:1 1 350px; text-align:center; background:none; padding:0; display:flex; justify-content:center; align-items:center}
.about-image img{max-width:90%; height:auto; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.05)}
.profile-circle{
  width:280px; max-width:90%; aspect-ratio:1/1; border-radius:50%; object-fit:cover;
  border:6px solid #1e1e1e;               /* dark round ring */
  background:#fff;                         /* clean edge */
  box-shadow:0 0 12px rgba(0,0,0,.15);
}
@media (max-width:768px){ .about-grid{flex-direction:column; text-align:center} }

/* contact form */
.contact{text-align:center}
.contact-actions{display:flex; gap:12px; justify-content:center; margin:12px 0}
.fineprint{color:var(--muted); font-size:.9rem}
.lead-form{max-width:720px;margin:14px auto 0;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.lead-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lead-form input,.lead-form textarea{width:100%;padding:12px;border:1px solid #dfe7f3;border-radius:10px;font:inherit}
.lead-form button{margin-top:10px}
@media (max-width:720px){.lead-form .row{grid-template-columns:1fr}}

/* footer */
.footer{margin-top:40px; background:#0b1f33; color:#cfe3ff; padding:24px 0}  /* tighter */
.footer-grid{display:grid; gap:20px; grid-template-columns:1.6fr 1fr}
.footer a{color:#e6f0fb; text-decoration:none}
.footer-logo{height:60px; width:auto; display:block; margin-bottom:12px; background:#fff; padding:8px; border-radius:8px}
.footer-legal{grid-column:1/-1; border-top:1px solid rgba(255,255,255,.14); margin-top:10px; padding-top:10px; font-size:.9rem}

/* responsive */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .cta-group{justify-content:center}
  .steps{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid.portfolio{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .testimonials{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}
/* === Time Saver Calculator === */
.calc{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:16px; box-shadow:var(--shadow); margin-top:10px;
}
.calc-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.calc-field{display:flex; flex-direction:column; gap:6px; font-weight:600}
.calc-field input{
  padding:12px; border:1px solid #dfe7f3; border-radius:10px; font:inherit;
}
.calc-actions{display:flex; gap:12px; margin-top:12px}

.calc-results{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  margin-top:14px;
}
.stat{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px;
}
.stat.alt{
  background:#f7fbff;
}
.stat-label{color:var(--muted); font-weight:700; margin-bottom:6px}
.stat-value{font-size:1.8rem; font-weight:800; color:var(--brand); line-height:1.2}
.stat-sub{color:#3a4b60; font-size:.95rem}

@media (max-width: 960px){
  .calc-grid{grid-template-columns:1fr 1fr}
  .calc-results{grid-template-columns:1fr}
}
/* 3-column results layout + emphasis styles */
.calc-results.three{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px; }
.stat.emphasis{ border:2px solid var(--brand); background:#f2f8ff; }
.stat.save .stat-label{ color:#1a7f37; }
@media (max-width: 960px){ .calc-results.three{ grid-template-columns:1fr; } }