/* =========================================================
   ACCOUNTRIVIA — Accountancy Amplified by AI
   Brand stylesheet
   ---------------------------------------------------------
   Primary   #2156B3  Anchor Blue   — primary buttons, key headlines
   Secondary #1592FD  Insight Blue  — secondary buttons, icons, highlights
   Accent    #17D4FC  Spark Blue    — highlights, supporting graphics
   Tint      #B9DCFF  Sky           — soft fills, washes
   Ink       #1A1A1A  Deep Anchor   — body text, major headlines
   Grey      #6B7280  Steel Grey    — secondary text, labels, borders
   Mist      #F3F4F6  Light Mist    — section backgrounds
   Yellow    #FFDE59                — call-out accents
   ========================================================= */

:root{
  /* brand palette */
  --c-anchor:#2156b3;
  --c-anchor-dark:#1a4693;
  --c-insight:#1592fd;
  --c-spark:#17d4fc;
  --c-sky:#b9dcff;
  --c-ink:#1a1a1a;
  --c-grey:#6b7280;
  --c-mist:#f3f4f6;
  --c-yellow:#ffde59;
  --c-yellow-dark:#f2cd35;

  /* semantic tokens */
  --c-primary:var(--c-anchor);
  --c-primary-hover:var(--c-anchor-dark);
  --c-secondary:var(--c-insight);
  --c-accent:var(--c-yellow);
  --c-text:var(--c-ink);
  --c-heading:var(--c-ink);
  --c-muted:var(--c-grey);
  --c-border:#e3e8ef;
  --c-tint:#eef5ff;
  --c-ghost:#f9fafb;

  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:24px;
  --shadow-card:0 10px 34px rgba(33,86,179,.10);
  --shadow-soft:0 20px 56px rgba(33,86,179,.14);

  --font-head:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--c-text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--c-primary);text-decoration:none}
a:hover{color:var(--c-secondary)}
ul{margin:0;padding:0;list-style:none}

h1,h2,h3,h4,h5{
  font-family:var(--font-head);
  font-weight:700;
  color:var(--c-heading);
  line-height:1.2;
  margin:0 0 .6em;
  letter-spacing:-.02em;
}
h1{font-size:clamp(2.05rem,4.4vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.85rem)}
h4{font-size:1.2rem}
h5{font-size:1.05rem}
p{margin:0 0 1rem}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}

.section{padding:82px 0}
.section-sm{padding:56px 0}
.section-title{text-align:center;margin-bottom:14px}
.section-lead{
  text-align:center;max-width:760px;margin:0 auto 48px;
  color:var(--c-muted);font-size:1.06rem;
}
.bg-ghost{background:var(--c-ghost)}
.bg-mist{background:var(--c-mist)}
.bg-tint{background:var(--c-tint)}
.text-center{text-align:center}

/* eyebrow label */
.eyebrow{
  display:inline-block;
  font-family:var(--font-head);
  font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-secondary);
  margin-bottom:14px;
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 30px;
  border:2px solid transparent;border-radius:10px;
  font-family:var(--font-head);font-size:.98rem;font-weight:600;line-height:1;
  cursor:pointer;transition:.2s ease;white-space:nowrap;
}
.btn-primary{background:var(--c-primary);color:#fff;box-shadow:0 6px 18px rgba(33,86,179,.26)}
.btn-primary:hover{background:var(--c-primary-hover);color:#fff;transform:translateY(-2px)}
.btn-secondary{background:var(--c-secondary);color:#fff;box-shadow:0 6px 18px rgba(21,146,253,.26)}
.btn-secondary:hover{background:var(--c-primary);color:#fff;transform:translateY(-2px)}
.btn-accent{background:var(--c-accent);color:var(--c-ink)}
.btn-accent:hover{background:var(--c-yellow-dark);color:var(--c-ink);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--c-primary);border-color:var(--c-primary)}
.btn-outline:hover{background:var(--c-primary);color:#fff}
.btn-light{background:#fff;color:var(--c-primary)}
.btn-light:hover{background:var(--c-tint);color:var(--c-primary-hover)}
.btn-block{width:100%}
.btn-lg{padding:17px 40px;font-size:1.05rem}

/* ---------------- Header / Nav ---------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-border);
}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:82px}
.navbar-brand{display:flex;align-items:center}
.navbar-brand img{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{
  font-family:var(--font-head);
  color:var(--c-text);font-weight:500;font-size:.97rem;
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav-links a:hover,.nav-links a.active{color:var(--c-primary);border-bottom-color:var(--c-spark)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-phone{font-family:var(--font-head);font-weight:600;color:var(--c-primary);white-space:nowrap;font-size:.95rem}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:3px;background:var(--c-primary);border-radius:2px;margin:5px 0;transition:.2s}

/* ---------------- Hero ---------------- */
.hero{
  background:
    radial-gradient(900px 420px at 88% -10%,rgba(23,212,252,.16),transparent 60%),
    radial-gradient(700px 400px at 5% 10%,rgba(33,86,179,.10),transparent 62%),
    linear-gradient(180deg,#f6faff 0%,#ffffff 100%);
  padding:70px 0 78px;
  overflow:hidden;
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{margin-bottom:20px}
.hero h1 .accent{
  background:linear-gradient(100deg,var(--c-insight),var(--c-spark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:1.13rem;color:var(--c-muted);max-width:540px;margin-bottom:30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
.hero-badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:36px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--c-border);border-radius:999px;
  padding:9px 18px;font-size:.87rem;font-weight:600;color:var(--c-primary);
  font-family:var(--font-head);
  box-shadow:0 3px 12px rgba(33,86,179,.07);
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--c-spark)}
.hero-visual{position:relative}
.hero-visual img{margin:0 auto}

/* signup card */
.signup-card{
  background:#fff;border-radius:var(--radius-xl);
  box-shadow:var(--shadow-soft);padding:34px;
  border:1px solid var(--c-border);
}
.signup-card h3{font-size:1.45rem;text-align:center;margin-bottom:6px}
.signup-card .sub{text-align:center;color:var(--c-muted);font-size:.92rem;margin-bottom:22px}
.form-group{margin-bottom:16px}
.form-label{display:block;font-family:var(--font-head);font-weight:600;font-size:.88rem;margin-bottom:6px}
.form-control{
  width:100%;padding:13px 16px;
  border:1px solid var(--c-border);border-radius:10px;
  font-family:var(--font-body);font-size:.98rem;color:var(--c-text);
  background:#fff;transition:.18s;
}
.form-control::placeholder{color:#9aa3b0}
.form-control:focus{outline:none;border-color:var(--c-secondary);box-shadow:0 0 0 3px rgba(21,146,253,.16)}
textarea.form-control{min-height:140px;resize:vertical}
.form-hint{font-size:.8rem;color:var(--c-muted);margin-top:5px}
.form-check{display:flex;align-items:flex-start;gap:10px;font-size:.89rem;margin:18px 0;color:var(--c-muted)}
.form-check input{margin-top:3px;accent-color:var(--c-primary);width:17px;height:17px}
.trust-row{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--c-border);
}
.trust-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--c-mist);border-radius:999px;padding:7px 14px;
  font-size:.79rem;font-weight:600;color:var(--c-grey);
  font-family:var(--font-head);
}
.trust-chip svg{width:14px;height:14px;flex:0 0 14px;color:var(--c-primary)}

/* ---------------- Steps ---------------- */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step-card{text-align:center}
.step-card .step-img{height:190px;display:grid;place-items:center;margin-bottom:22px}
.step-card .step-img img{max-height:190px;width:auto}
.step-num{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--c-insight),var(--c-anchor));
  color:#fff;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:1.1rem;
  margin:0 auto 16px;
}
.step-card h3{font-size:1.28rem}
.step-card p{color:var(--c-muted);font-size:.97rem}

/* ---------------- Pricing ---------------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.price-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-xl);
  padding:34px 28px;box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;height:100%;transition:.22s ease;
}
.price-card:hover{transform:translateY(-6px);border-color:var(--c-secondary);box-shadow:var(--shadow-soft)}
.price-card.featured{border:2px solid var(--c-primary);position:relative}
.price-card.featured::after{
  content:"Most popular";
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--c-accent);color:var(--c-ink);
  font-family:var(--font-head);
  font-size:.73rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:6px 16px;border-radius:999px;white-space:nowrap;
}
.price-card h3{font-size:1.3rem;margin-bottom:12px}
.price-amount{display:flex;align-items:baseline;gap:8px;margin-bottom:14px}
.price-amount .amount{font-family:var(--font-head);font-size:2.9rem;font-weight:700;color:var(--c-primary);line-height:1}
.price-amount .vat{font-size:.88rem;color:var(--c-muted);font-weight:600}
.price-desc{color:var(--c-muted);font-size:.94rem;margin-bottom:18px}
.price-desc ul{margin:10px 0 0;padding-left:18px;list-style:disc}
.price-desc ul li{margin-bottom:4px}
.price-card .btn{margin-bottom:22px}
.feature-list{border-top:1px solid var(--c-border);padding-top:18px;margin-top:auto}
.feature-list li{position:relative;padding-left:28px;margin-bottom:11px;font-size:.92rem}
.feature-list li::before{
  content:"";position:absolute;left:0;top:5px;
  width:17px;height:17px;border-radius:50%;background:var(--c-secondary);
}
.feature-list li::after{
  content:"";position:absolute;left:5.5px;top:9px;
  width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.toggle-more{
  background:none;border:0;color:var(--c-primary);font-weight:600;
  font-family:var(--font-head);font-size:.9rem;cursor:pointer;padding:8px 0;
}
.toggle-more:hover{color:var(--c-secondary);text-decoration:underline}
.more-features{display:none}
.more-features.open{display:block}

/* ---------------- Split feature ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.split.reverse .split-media{order:2}
.split h3{margin-bottom:16px}
.split p{color:var(--c-muted)}
.check-points{margin:22px 0 26px}
.check-points li{position:relative;padding-left:32px;margin-bottom:12px;font-size:.98rem}
.check-points li::before{
  content:"";position:absolute;left:0;top:2px;width:21px;height:21px;border-radius:7px;
  background:var(--c-tint);
}
.check-points li::after{
  content:"";position:absolute;left:7px;top:7px;width:6px;height:10px;
  border:solid var(--c-primary);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}

/* ---------------- Stats / value props ---------------- */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.stat{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:30px 24px;text-align:center;box-shadow:var(--shadow-card);
}
.stat b{
  display:block;font-family:var(--font-head);font-size:1.9rem;font-weight:700;
  color:var(--c-primary);line-height:1.15;margin-bottom:8px;
}
.stat span{color:var(--c-muted);font-size:.94rem}

/* ---------------- Info cards ---------------- */
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.info-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow-card);transition:.22s ease;
}
.info-card:hover{transform:translateY(-4px);border-color:var(--c-sky)}
.info-card .icon{
  width:52px;height:52px;border-radius:14px;
  background:var(--c-tint);color:var(--c-primary);
  display:grid;place-items:center;margin-bottom:18px;
}
.info-card .icon svg{width:26px;height:26px}
.info-card h4{margin-bottom:10px}
.info-card p{color:var(--c-muted);font-size:.95rem;margin:0}

/* ---------------- Callback band ---------------- */
.callback-band{
  background:linear-gradient(120deg,var(--c-anchor) 0%,var(--c-insight) 62%,var(--c-spark) 130%);
  border-radius:var(--radius-xl);color:#fff;padding:48px;
  display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
}
.callback-band h3{color:#fff;margin-bottom:8px}
.callback-band p{color:rgba(255,255,255,.9);margin:0;max-width:580px}

/* ---------------- Testimonials ---------------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.testi-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:28px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;
}
.testi-card .stars{color:var(--c-yellow);font-size:1.1rem;margin-bottom:14px;letter-spacing:2px}
.testi-card p{font-size:.96rem;flex:1}
.testi-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--c-border);
}
.testi-meta strong{font-family:var(--font-head);font-size:.94rem;font-weight:600}
.testi-meta span{font-size:.82rem;color:var(--c-muted)}

/* ---------------- Team ---------------- */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.team-member{text-align:center}
.team-member .avatar{
  width:120px;height:120px;border-radius:50%;margin:0 auto 14px;
  display:grid;place-items:center;
  background:var(--c-tint);color:var(--c-primary);
  font-family:var(--font-head);font-size:2.1rem;font-weight:700;
  border:4px solid #fff;box-shadow:var(--shadow-card);
}
.team-member:nth-child(3n) .avatar{background:#e6fbff;color:#0a8fae}
.team-member:nth-child(3n+2) .avatar{background:#fff8dd;color:#8a6d00}
.team-member strong{display:block;font-family:var(--font-head);font-size:1rem;font-weight:600}
.team-member span{font-size:.85rem;color:var(--c-muted)}

/* ---------------- Contact ---------------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.contact-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  padding:26px;margin-bottom:20px;box-shadow:var(--shadow-card);
  display:flex;gap:18px;align-items:flex-start;
}
.contact-card .icon{
  width:48px;height:48px;flex:0 0 48px;border-radius:12px;
  background:var(--c-tint);color:var(--c-primary);display:grid;place-items:center;
}
.contact-card .icon svg{width:23px;height:23px}
.contact-card h5{margin-bottom:6px}
.contact-card p{margin:0;color:var(--c-muted);font-size:.92rem}
.form-card{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-xl);
  padding:38px;box-shadow:var(--shadow-soft);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{
  display:none;margin-top:16px;padding:14px 18px;border-radius:10px;
  background:var(--c-tint);color:var(--c-primary);font-weight:600;font-size:.94rem;
}
.form-note.show{display:block}

/* ---------------- FAQ ---------------- */
.faq-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.faq-tab{
  background:#fff;border:1px solid var(--c-border);border-radius:999px;
  padding:11px 26px;font-family:var(--font-head);font-size:.93rem;font-weight:600;
  color:var(--c-primary);cursor:pointer;transition:.18s;
}
.faq-tab.active,.faq-tab:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.faq-panel{display:none;max-width:860px;margin:0 auto}
.faq-panel.active{display:block}
.faq-item{
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-md);
  margin-bottom:12px;overflow:hidden;
}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:0;padding:20px 24px;text-align:left;cursor:pointer;
  font-family:var(--font-head);font-size:1rem;font-weight:600;color:var(--c-heading);
}
.faq-q:hover{color:var(--c-primary)}
.faq-q .chev{transition:.25s;color:var(--c-secondary);font-size:1.2rem;line-height:1}
.faq-item.open{border-color:var(--c-sky)}
.faq-item.open .faq-q .chev{transform:rotate(180deg)}
.faq-a{display:none;padding:0 24px 22px;color:var(--c-muted);font-size:.96rem}
.faq-item.open .faq-a{display:block}
.faq-a ul{list-style:disc;padding-left:20px;margin:10px 0 0}
.faq-a ul li{margin-bottom:6px}

/* ---------------- Alt / CTA band ---------------- */
.alt-band{
  border:1px solid var(--c-sky);border-radius:var(--radius-xl);
  padding:34px 40px;background:var(--c-tint);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.alt-band h4{margin:0 0 4px}
.alt-band p{margin:0;color:var(--c-muted);font-size:.95rem}

/* ---------------- Footer ---------------- */
.site-footer{background:var(--c-ink);color:rgba(255,255,255,.7);padding:66px 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:46px}
.site-footer h5{
  font-family:var(--font-head);color:#fff;font-size:.82rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;
}
.site-footer a{color:rgba(255,255,255,.7);font-size:.94rem}
.site-footer a:hover{color:var(--c-spark)}
.site-footer li{margin-bottom:10px}
.footer-logo{
  display:inline-block;background:#fff;border-radius:12px;
  padding:12px 16px;margin-bottom:18px;
}
.footer-logo img{height:38px;width:auto}
.footer-about{font-size:.94rem;max-width:330px}
.social{display:flex;gap:12px;margin-top:20px}
.social a{
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.09);color:#fff;
  display:grid;place-items:center;transition:.18s;
}
.social a svg{width:17px;height:17px}
.social a:hover{background:var(--c-secondary);color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:22px 0;font-size:.86rem;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.footer-bottom .links{display:flex;gap:22px;flex-wrap:wrap}

/* ---------------- Hero entrance animation ---------------- */
@keyframes heroInLeft{
  from{opacity:0;transform:translateX(-52px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes heroInRight{
  from{opacity:0;transform:translateX(52px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes heroInUp{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:translateY(0)}
}

/* left column: children slide in from the left, staggered */
.hero-text > *{
  animation:heroInLeft .8s cubic-bezier(.22,.61,.36,1) both;
}
.hero-text > *:nth-child(1){animation-delay:.05s}
.hero-text > *:nth-child(2){animation-delay:.14s}
.hero-text > *:nth-child(3){animation-delay:.23s}
.hero-text > *:nth-child(4){animation-delay:.32s}
.hero-text > *:nth-child(5){animation-delay:.41s}
.hero-text > *:nth-child(6){animation-delay:.50s}

/* right column: slides in from the right */
.hero-visual{
  animation:heroInRight .95s cubic-bezier(.22,.61,.36,1) .18s both;
}

/* centred heroes (pricing / contact) fade up instead */
.hero-center > *{
  animation:heroInUp .75s cubic-bezier(.22,.61,.36,1) both;
}
.hero-center > *:nth-child(1){animation-delay:.05s}
.hero-center > *:nth-child(2){animation-delay:.16s}
.hero-center > *:nth-child(3){animation-delay:.27s}

@media (prefers-reduced-motion:reduce){
  .hero-text > *,
  .hero-visual,
  .hero-center > *{animation:none}
}

/* ---------------- Blog ---------------- */
.filter-pills{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.filter-pill{
  background:#fff;border:1px solid var(--c-border);border-radius:999px;
  padding:10px 22px;font-family:var(--font-head);font-size:.9rem;font-weight:600;
  color:var(--c-primary);cursor:pointer;transition:.18s;
}
.filter-pill:hover{border-color:var(--c-secondary)}
.filter-pill.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* thumbnails are pure CSS so the blog needs no image assets */
.post-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,var(--c-anchor),var(--c-insight));
}
.post-thumb::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120px 120px at 82% 18%,rgba(255,255,255,.22),transparent 70%),
    radial-gradient(180px 180px at 12% 92%,rgba(23,212,252,.35),transparent 70%);
}
.post-thumb--2{background:linear-gradient(135deg,var(--c-insight),var(--c-spark))}
.post-thumb--3{background:linear-gradient(135deg,#173a72,var(--c-anchor))}
.post-thumb--4{background:linear-gradient(135deg,var(--c-anchor),#6b3fb3)}
.post-thumb--5{background:linear-gradient(135deg,#0a8fae,var(--c-spark))}
.post-thumb--6{background:linear-gradient(135deg,#1a4693,var(--c-insight))}
.post-thumb .glyph{
  position:absolute;right:16px;bottom:-18px;z-index:1;
  font-family:var(--font-head);font-size:5.2rem;font-weight:800;
  color:rgba(255,255,255,.16);line-height:1;letter-spacing:-.04em;
}

.tag{
  display:inline-block;background:var(--c-tint);color:var(--c-primary);
  font-family:var(--font-head);font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-card);transition:.22s ease;
}
.post-card:hover{transform:translateY(-6px);border-color:var(--c-sky);box-shadow:var(--shadow-soft)}
.post-body{padding:26px;display:flex;flex-direction:column;flex:1}
.post-body h3{font-size:1.18rem;margin-bottom:10px}
.post-card:hover h3{color:var(--c-primary)}
.post-body p{color:var(--c-muted);font-size:.94rem;flex:1;margin-bottom:16px}
.post-meta{
  display:flex;align-items:center;gap:10px;
  font-size:.83rem;color:var(--c-muted);
  padding-top:14px;border-top:1px solid var(--c-border);
}
.post-meta .sep{width:4px;height:4px;border-radius:50%;background:var(--c-border)}

/* featured post */
.post-featured{
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  background:#fff;border:1px solid var(--c-border);border-radius:var(--radius-xl);
  overflow:hidden;box-shadow:var(--shadow-card);margin-bottom:48px;transition:.22s ease;
}
.post-featured:hover{box-shadow:var(--shadow-soft);border-color:var(--c-sky)}
.post-featured .post-thumb{aspect-ratio:auto;min-height:320px;height:100%}
.post-featured .post-thumb .glyph{font-size:8rem;right:26px;bottom:-26px}
.post-featured .post-body{padding:44px}
.post-featured h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-bottom:14px}
.post-featured p{font-size:1.02rem}

/* newsletter */
.newsletter-form{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;
}
.newsletter-form .form-control{
  flex:1;min-width:240px;border-color:transparent;
}
.newsletter-note{
  display:none;margin-top:14px;font-size:.92rem;
  color:#fff;font-weight:600;
}
.newsletter-note.show{display:block}

/* pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:52px}
.pagination a,.pagination span{
  min-width:42px;height:42px;padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--c-border);border-radius:10px;
  font-family:var(--font-head);font-size:.94rem;font-weight:600;
  color:var(--c-primary);background:#fff;transition:.18s;
}
.pagination a:hover{border-color:var(--c-primary);background:var(--c-tint)}
.pagination .current{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.pagination .disabled{color:#b7bec9;background:var(--c-mist);cursor:not-allowed}

/* article body (single post template) */
.article{max-width:760px;margin:0 auto}
.article h2{font-size:1.6rem;margin-top:38px}
.article h3{font-size:1.25rem;margin-top:28px}
.article p{font-size:1.04rem;color:#33313a}
.article ul{list-style:disc;padding-left:22px;margin:0 0 1rem}
.article ul li{margin-bottom:8px;font-size:1.02rem;color:#33313a}
.article blockquote{
  margin:28px 0;padding:20px 26px;
  border-left:4px solid var(--c-secondary);background:var(--c-tint);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:1.05rem;color:var(--c-primary);
}
.article-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  color:var(--c-muted);font-size:.92rem;margin-bottom:8px;
}

@media (max-width:991px){
  .post-grid{grid-template-columns:1fr 1fr}
  .post-featured{grid-template-columns:1fr}
  .post-featured .post-thumb{min-height:220px}
  .post-featured .post-body{padding:30px}
}
@media (max-width:640px){
  .post-grid{grid-template-columns:1fr}
}

/* ---------------- Scroll reveal ---------------- */
/* .js is set by an inline script in <head>, so there is no flash of
   hidden content and everything stays visible if JS is unavailable.

   The hidden state is written as :not(.in). Once an element has been
   revealed the rule stops matching it entirely, which leaves its own
   :hover transform free to work instead of being overridden. */

:is(.reveal,
    .split > *,
    .step-card,
    .price-card,
    .info-card,
    .stat,
    .testi-card,
    .contact-card,
    .team-member,
    .callback-band,
    .alt-band,
    .post-card,
    .post-featured){
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1);
}

/* cards and bands: fade up */
.js :is(.reveal,
        .step-card,
        .price-card,
        .info-card,
        .stat,
        .testi-card,
        .contact-card,
        .team-member,
        .callback-band,
        .alt-band,
        .post-card,
        .post-featured):not(.in){
  opacity:0;
  transform:translateY(30px);
}

/* split sections: the two halves arrive from opposite sides.
   In a .reverse split the media sits on the right, so the
   directions swap to match what the visitor actually sees. */
.js .split > *:not(.in){opacity:0}
.js .split:not(.reverse) > *:first-child:not(.in){transform:translateX(-52px)}
.js .split:not(.reverse) > *:last-child:not(.in) {transform:translateX(52px)}
.js .split.reverse       > *:first-child:not(.in){transform:translateX(52px)}
.js .split.reverse       > *:last-child:not(.in) {transform:translateX(-52px)}

/* keep the horizontal travel from creating a scrollbar */
.split{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .js :is(.reveal,
          .split > *,
          .step-card,
          .price-card,
          .info-card,
          .stat,
          .testi-card,
          .contact-card,
          .team-member,
          .callback-band,
          .alt-band,
          .post-card,
          .post-featured):not(.in){
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ---------------- Responsive ---------------- */
@media (max-width:991px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:82px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:8px 20px 20px;
    border-bottom:1px solid var(--c-border);box-shadow:var(--shadow-card);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--c-border)}
  .nav-phone{display:none}
  .hero-grid,.split,.contact-grid{grid-template-columns:1fr;gap:44px}
  .split.reverse .split-media{order:0}
  .steps-grid,.pricing-grid,.testi-grid,.stats-grid{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .section{padding:56px 0}
  .steps-grid,.pricing-grid,.testi-grid,.stats-grid,.info-grid,.form-row{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
  .callback-band,.alt-band{padding:30px 24px;text-align:center;justify-content:center}
  .footer-grid{grid-template-columns:1fr}
  .signup-card,.form-card{padding:24px}
  .navbar-brand img{height:38px}
}