/* ============================================================
   Homepage sections — flat, editorial, grounded
   ============================================================ */

/* ---- Services ---- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--card)}
@media(max-width:880px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
.svc{display:flex;flex-direction:column;gap:.6rem;padding:clamp(1.4rem,2.4vw,1.9rem);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .2s;position:relative}
.svc-grid .svc:nth-child(3n){border-right:0}
@media(max-width:880px){.svc-grid .svc:nth-child(3n){border-right:1px solid var(--line)}.svc-grid .svc:nth-child(2n){border-right:0}}
@media(max-width:560px){.svc{border-right:0 !important}}
.svc:hover{background:var(--paper-2)}
.svc-ic{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;background:var(--accent-050);color:var(--accent);margin-bottom:.3rem}
.svc-ic svg{width:23px;height:23px}
.svc h3{font-size:var(--fs-md)}
.svc p{font-size:var(--fs-sm);color:var(--ink-2)}
.svc .svc-link{margin-top:auto;padding-top:.4rem;font-size:var(--fs-sm);font-weight:600;color:var(--accent-ink);display:inline-flex;align-items:center;gap:.35rem}
.svc .svc-link svg{width:1em;height:1em;transition:transform .2s}
.svc:hover .svc-link svg{transform:translateX(3px)}

/* ---- Tools band ---- */
.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.4rem)}
@media(max-width:820px){.tool-row{grid-template-columns:1fr}}
.tool-card{background:rgba(255,255,255,.045);border:1px solid var(--line-navy);border-radius:var(--r-lg);padding:clamp(1.5rem,2.6vw,2.1rem);display:flex;flex-direction:column;gap:.9rem}
.tool-card .tc-tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--label);font-weight:600;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:#7fb0ff}
.tool-card .tc-tag svg{width:14px;height:14px}
.tool-card h3{color:#fff;font-size:var(--fs-lg)}
.tool-card p{color:var(--on-navy-mute);font-size:var(--fs-sm)}
.tool-input{display:flex;gap:.5rem;background:rgba(255,255,255,.07);border:1px solid var(--line-navy);border-radius:var(--r);padding:.4rem .4rem .4rem 1rem;align-items:center}
.tool-input input{flex:1;background:none;border:none;color:#fff;font-size:var(--fs-sm);min-width:0}
.tool-input input::placeholder{color:var(--on-navy-mute)}
.tool-input .btn{flex-shrink:0}
.tool-card .tc-foot{font-size:var(--fs-xs);color:var(--on-navy-mute);display:flex;align-items:center;gap:.45rem;margin-top:auto}
.tool-card .tc-foot svg{width:13px;height:13px;color:var(--good)}

/* ---- Why-us / differentiators ---- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.4rem) clamp(2rem,4vw,3.5rem)}
@media(max-width:720px){.why-grid{grid-template-columns:1fr;gap:1.6rem}}
.why{display:flex;gap:1rem}
.why-ic{width:42px;height:42px;border-radius:9px;flex-shrink:0;display:grid;place-items:center;background:var(--ink);color:var(--paper)}
.why-ic svg{width:21px;height:21px}
.why h4{font-size:var(--fs-base);margin-bottom:.35rem}
.why p{font-size:var(--fs-sm);color:var(--ink-2)}

/* ---- Stats row ---- */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:1.5rem}
@media(max-width:680px){.stats-row{grid-template-columns:1fr 1fr;gap:2rem 1rem}}
.stats-row .stat{padding-left:1.1rem;border-left:2px solid var(--accent)}

/* ---- Pricing teaser ---- */
.price-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:820px){.price-teaser{grid-template-columns:1fr}}
.price-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;display:flex;flex-direction:column;gap:.45rem;position:relative;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.price-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--ink)}
.price-card.feat{border:1.5px solid var(--accent);box-shadow:var(--sh-2)}
.price-card.feat:hover{box-shadow:var(--sh-3)}
.tst{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tst:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.price-card .pc-name{font-weight:700;font-family:var(--display);font-size:var(--fs-md)}
.price-card .pc-feat-tag{position:absolute;top:-11px;left:1.6rem;background:var(--accent);color:#fff;font-size:var(--fs-xs);font-weight:700;padding:.28rem .75rem;border-radius:var(--r-pill);letter-spacing:.02em}
.price-card .pc-price{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.02em;color:var(--ink)}
.price-card .pc-price small{font-size:var(--fs-sm);font-weight:500;color:var(--ink-3);font-family:var(--body)}
.price-card .pc-sub{font-size:var(--fs-xs);color:var(--ink-3)}
.price-card ul{display:flex;flex-direction:column;gap:.5rem;margin:.6rem 0 1.1rem;font-size:var(--fs-sm)}
.price-card li{display:flex;gap:.5rem;align-items:flex-start;color:var(--ink-2)}
.price-card li svg{width:16px;height:16px;color:var(--accent);flex-shrink:0;margin-top:3px}
.price-card .btn{margin-top:auto}

/* ---- Testimonials ---- */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:900px){.tst-grid{grid-template-columns:1fr}}
.tst{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem;display:flex;flex-direction:column;gap:1rem}
.tst .stars{font-size:1rem}
.tst blockquote{font-size:var(--fs-base);color:var(--ink);line-height:1.55}
.tst .tst-by{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.tst .mono-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:var(--fs-sm);color:#fff;background:var(--navy)}
.tst .tst-by .tb-n{display:block;font-weight:700;font-size:var(--fs-sm)}
.tst .tst-by .tb-r{display:block;font-size:var(--fs-xs);color:var(--ink-3)}

/* ---- Process steps ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:1.2rem;border-top:2px solid var(--ink)}
.step .s-num{display:none}
.step h4{font-size:var(--fs-md);margin-bottom:.4rem}
.step p{font-size:var(--fs-sm);color:var(--ink-2)}

/* ---- FAQ accordion ---- */
.faq-list{display:flex;flex-direction:column;max-width:760px;margin-inline:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 1.3rem;box-shadow:var(--sh-1)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:last-child{border-bottom:0}
.faq-item summary{list-style:none;cursor:pointer;padding:1.15rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:600;font-size:var(--fs-base);color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .fq-ic{width:22px;height:22px;flex-shrink:0;position:relative}
.faq-item summary .fq-ic::before,.faq-item summary .fq-ic::after{content:"";position:absolute;background:var(--accent);border-radius:2px;transition:transform .3s}
.faq-item summary .fq-ic::before{top:10px;left:3px;width:16px;height:2px}
.faq-item summary .fq-ic::after{top:3px;left:10px;width:2px;height:16px}
.faq-item[open] summary .fq-ic::after{transform:rotate(90deg);opacity:0}
.faq-item .fq-body{padding:0 0 1.25rem;color:var(--ink-2);font-size:var(--fs-base);max-width:64ch}
.faq-item .fq-body p+p{margin-top:.7rem}

/* ---- Section split layout ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:2rem}}

/* ---- AI services band ---- */
.section--accent{background:var(--accent-050)}
.pill-new{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent);color:#fff;font-family:var(--label);font-weight:600;font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:var(--r-pill);margin-bottom:1rem}
.ai-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){.ai-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.ai-grid{grid-template-columns:1fr}}
.ai-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.ai-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.ai-ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:#fff}
.ai-ic svg{width:23px;height:23px}
.ai-card h4{font-size:var(--fs-base)}
.ai-card p{font-size:var(--fs-sm);color:var(--ink-2)}

/* ---- Final CTA URL field ---- */
.cta-or{margin:1.5rem auto .9rem;max-width:440px;font-size:var(--fs-sm);color:var(--on-navy-mute);display:flex;align-items:center;gap:1rem;justify-content:center}
.cta-or::before,.cta-or::after{content:"";height:1px;flex:1;background:var(--line-navy)}
.cta-check{display:flex;gap:.5rem;max-width:440px;margin:0 auto;background:rgba(255,255,255,.08);border:1px solid var(--line-navy);border-radius:var(--r);padding:.4rem .4rem .4rem 1rem;align-items:center;text-align:left}
.cta-check input{flex:1;background:none;border:none;color:#fff;font-size:var(--fs-sm);min-width:0}
.cta-check input::placeholder{color:var(--on-navy-mute)}
.cta-check .btn{flex-shrink:0}
.cta-phone{margin-top:1.2rem;font-size:var(--fs-sm);color:var(--on-navy-mute)}
.cta-phone a{color:#fff;font-weight:600}

/* Shared "email me this" lead-capture card (cost estimator + website health check) */
.ee-card{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3.5vw,3rem);align-items:center;background:var(--navy);color:var(--on-navy);border-radius:var(--r-xl);padding:clamp(1.7rem,3.5vw,2.8rem);box-shadow:var(--sh-3)}
@media(max-width:760px){.ee-card{grid-template-columns:1fr;gap:1.4rem}}
.ee-copy h2{color:#fff;font-size:clamp(1.4rem,3vw,1.95rem);line-height:1.15;margin:.3rem 0 .6rem}
.ee-copy p{color:var(--on-navy-mute);font-size:var(--fs-base);max-width:44ch;margin:0}
.ee-form{display:flex;flex-direction:column;gap:.8rem}
.ee-fields{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}
@media(max-width:480px){.ee-fields{grid-template-columns:1fr}}
.ee-form input[type=text],.ee-form input[type=email]{width:100%;padding:.82rem 1rem;border-radius:var(--r);border:1px solid var(--line-navy);background:rgba(255,255,255,.07);color:#fff;font-size:var(--fs-base)}
.ee-form input::placeholder{color:var(--on-navy-mute)}
.ee-form input:focus{outline:none;border-color:#6f9bff;box-shadow:0 0 0 3px rgba(31,84,224,.35)}
.ee-form .btn{align-self:flex-start}
.ee-form .btn svg{width:16px;height:16px}
.ee-status{font-size:var(--fs-sm);font-weight:600;margin:0;min-height:1.1em}
.ee-status.ok{color:#4ad6b4}
.ee-status.err{color:#ff9f8e}
.ee-fine{font-size:var(--fs-xs);color:var(--on-navy-mute);margin:0}
.ee-fine a{color:#9fc0ff;text-decoration:underline}
.hc-save{margin-top:2rem}
.ee-form .cf-turnstile,.est-save-form .cf-turnstile{max-width:100%;overflow:hidden}