/* =============================================================
   Instant ITR — Corporate & Professional concept
   Style: Trust & Authority
   Tokens: WCAG AAA. Mobile-first. 8pt rhythm.
   ============================================================= */

/* -------- Tokens -------- */
:root {
  /* Color */
  --c-primary: #0F766E;
  --c-primary-700: #115E59;
  --c-primary-50: #CCFBF1;
  --c-accent: #0369A1;
  --c-accent-700: #075985;
  --c-bg: #F0FDFA;
  --c-surface: #FFFFFF;
  --c-fg: #134E4A;
  --c-fg-soft: #475569;
  --c-muted: #E8F0F3;
  --c-border: #B2EFE5;
  --c-border-soft: #E2EAEC;
  --c-success: #16A34A;
  --c-warn: #D97706;
  --c-danger: #DC2626;
  --c-on-primary: #FFFFFF;

  /* Type scale */
  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  /* Spacing (8pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;

  /* Radius */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Shadow (soft, layered) */
  --sh-1: 0 1px 2px rgba(15,118,110,.06);
  --sh-2: 0 1px 2px rgba(15,118,110,.06), 0 8px 24px -8px rgba(15,118,110,.12);
  --sh-3: 0 4px 8px rgba(15,118,110,.06), 0 16px 48px -12px rgba(15,118,110,.18);
  --sh-focus: 0 0 0 3px rgba(15,118,110,.35);

  /* Motion */
  --t-fast: 150ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --easing: cubic-bezier(.2,.8,.2,1);

  /* Layout */
  --max-w: 1200px;
}

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--c-fg);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern', 'liga', 'calt';
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.01em; font-weight: 600; }
p { margin: 0; }

/* Tabular numerals for stats and rupee figures */
.tabular, strong, .stat, .mock__row strong, .ben-card__metric, .trust-strip strong, .about__chip strong {
  font-variant-numeric: tabular-nums;
}

/* -------- Layout primitives -------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--s-5);
}

@media (min-width: 768px) { .container { padding-inline: var(--s-7); } }
@media (min-width: 1024px) { .container { padding-inline: var(--s-8); } }

/* -------- Buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: 1;
  min-height: 44px;
  transition: transform var(--t-fast) var(--easing),
              background-color var(--t-fast) var(--easing),
              box-shadow var(--t-fast) var(--easing),
              color var(--t-fast) var(--easing);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.btn .i { width: 18px; height: 18px; }

.btn--primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--sh-1);
}
.btn--primary:hover { background: var(--c-primary-700); transform: translateY(-1px); box-shadow: var(--sh-2); }

.btn--ghost {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-border);
}
.btn--ghost:hover { background: var(--c-primary-50); border-color: var(--c-primary); }

.btn--white {
  background: #fff;
  color: var(--c-primary-700);
}
.btn--white:hover { transform: translateY(-1px); box-shadow: var(--sh-3); }

.btn--outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.btn--outline-white:hover { background: rgba(255,255,255,.1); border-color: #fff; }

.btn--lg { padding: 16px 24px; min-height: 52px; font-size: var(--fs-18); }

/* -------- Eyebrow & section heads -------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-primary);
  background: var(--c-primary-50);
  padding: 6px 12px;
  border-radius: var(--r-pill);
}
.eyebrow--center { margin-inline: auto; }
.eyebrow--on-dark {
  background: rgba(255,255,255,.12);
  color: #CCFBF1;
}
.eyebrow__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-success);
  box-shadow: 0 0 0 3px rgba(22,163,74,.18);
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--s-9);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
}
.section-head--left { text-align: left; align-items: flex-start; margin-inline: 0; }
.section-head h2 {
  font-size: clamp(var(--fs-32), 4vw, var(--fs-56));
  letter-spacing: -.02em;
  color: var(--c-fg);
}
.section-head p { color: var(--c-fg-soft); font-size: var(--fs-18); }

/* -------- Utility bar -------- */
.utility-bar {
  background: #0B5752;
  color: #CCFBF1;
  font-size: var(--fs-14);
}
.utility-bar__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding-block: var(--s-2);
}
.utility-bar__item {
  display: inline-flex; align-items: center; gap: 8px;
}
.utility-bar__item a:hover { color: #fff; text-decoration: underline; }
.utility-bar__item .i { width: 14px; height: 14px; opacity: .9; }
.utility-bar__item--cta {
  background: var(--c-success);
  color: #fff !important;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: background var(--t-fast) var(--easing);
}
.utility-bar__item--cta:hover { background: #15803D; text-decoration: none !important; }
@media (max-width: 640px) {
  .utility-bar__item--hide-sm { display: none; }
}

/* -------- Header / Nav -------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-border-soft);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--s-6);
  padding-block: var(--s-3);
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-20); color: var(--c-fg); font-weight: 500;
}
.logo strong { color: var(--c-primary); font-weight: 700; }
.logo__mark {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--sh-1);
}
.logo__mark svg { width: 20px; height: 20px; }
.logo--on-dark { color: #fff; }
.logo--on-dark strong { color: #5EEAD4; }

.nav {
  display: none;
  align-items: center; gap: var(--s-6);
  margin-left: auto;
}
.nav a {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--c-fg-soft);
  padding: 8px 4px;
  position: relative;
  transition: color var(--t-fast) var(--easing);
}
.nav a:hover { color: var(--c-primary); }
.nav a:focus-visible {
  outline: none; color: var(--c-primary);
  box-shadow: 0 2px 0 0 var(--c-primary);
}

.nav__cta {
  display: none; align-items: center; gap: var(--s-3);
}
.nav__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; margin-left: auto;
  border-radius: var(--r-md);
}
.nav__toggle span {
  display: block; width: 22px; height: 2px; background: var(--c-fg);
  border-radius: 2px;
  transition: transform var(--t-base) var(--easing), opacity var(--t-base) var(--easing);
}
.nav__toggle:hover { background: var(--c-muted); }

@media (min-width: 1024px) {
  .nav { display: flex; }
  .nav__cta { display: flex; }
  .nav__toggle { display: none; }
}

/* Mobile nav drawer */
@media (max-width: 1023px) {
  .nav {
    position: fixed; inset: 64px 0 auto 0;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border-soft);
    box-shadow: var(--sh-2);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-4) var(--s-5);
    transform: translateY(-110%);
    transition: transform var(--t-base) var(--easing);
  }
  .nav--open { transform: translateY(0); display: flex; }
  .nav a { padding: var(--s-4); border-radius: var(--r-md); font-size: var(--fs-16); }
  .nav a:hover { background: var(--c-muted); }
}

/* -------- Hero -------- */
.hero {
  position: relative;
  padding-block: var(--s-10) var(--s-12);
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 90% 10%, rgba(3,105,161,.08), transparent 60%),
    radial-gradient(50% 40% at 5% 50%, rgba(15,118,110,.10), transparent 60%),
    var(--c-bg);
}
.hero::before {
  /* subtle grid pattern */
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(15,118,110,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,118,110,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  gap: var(--s-9);
  grid-template-columns: 1fr;
  align-items: center;
}
.hero__title {
  font-size: clamp(var(--fs-40), 6vw, var(--fs-72));
  letter-spacing: -.025em;
  margin-block: var(--s-5) var(--s-5);
  line-height: 1.05;
}
.hero__title-accent {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  font-size: var(--fs-18);
  color: var(--c-fg-soft);
  max-width: 56ch;
}
.hero__cta {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-7);
}
.hero__badges {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}
.hero__badges li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-14); color: var(--c-fg-soft);
}
.hero__badges .i--lg { width: 22px; height: 22px; color: var(--c-primary); flex-shrink: 0; }
.hero__badges strong { color: var(--c-fg); font-weight: 600; }

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-12); }
}

/* Hero visual mockups (pure CSS) */
.hero__visual {
  position: relative;
  min-height: 480px;
  display: grid; place-items: center;
}
.mock {
  width: 100%; max-width: 480px;
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  overflow: hidden;
  border: 1px solid var(--c-border-soft);
  transform: rotate(-1.5deg);
}
.mock__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: #F8FAFB;
  border-bottom: 1px solid var(--c-border-soft);
}
.mock__chrome span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #E2EAEC;
}
.mock__chrome span:first-child { background: #FCA5A5; }
.mock__chrome span:nth-child(2) { background: #FDE68A; }
.mock__chrome span:nth-child(3) { background: #BBF7D0; }
.mock__chrome em {
  margin-left: auto; font-size: var(--fs-12); color: #94A3B8; font-style: normal;
}
.mock__body { padding: var(--s-6); display: grid; gap: var(--s-5); }
.mock__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.mock__row--head small {
  display: block; font-size: var(--fs-12); text-transform: uppercase;
  letter-spacing: .1em; color: var(--c-fg-soft); margin-bottom: 4px;
}
.mock__row--head strong { font-size: var(--fs-32); color: var(--c-primary); }
.mock__badge {
  font-size: var(--fs-12); font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.mock__badge--ok { background: #DCFCE7; color: #166534; }
.mock__bar {
  position: relative; height: 8px; background: var(--c-muted);
  border-radius: var(--r-pill); overflow: visible;
}
.mock__bar span {
  position: absolute; inset: 0 auto 0 0;
  width: var(--w, 50%);
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  border-radius: var(--r-pill);
}
.mock__bar em {
  position: absolute; top: 14px; left: 0;
  font-size: var(--fs-12); color: var(--c-fg-soft); font-style: normal;
}
.mock__list { display: grid; gap: 10px; padding-top: var(--s-5); }
.mock__list li {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-14); color: var(--c-fg);
  padding: 10px 12px; background: #F8FAFB; border-radius: var(--r-md);
}
.mock__list em { margin-left: auto; color: var(--c-fg-soft); font-style: normal; font-size: var(--fs-12); }
.mock__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-border);
}
.mock__dot--ok { background: var(--c-success); }
.mock__dot--pending { background: var(--c-warn); animation: pulse 1.6s ease-in-out infinite; }
.mock__cta {
  margin-top: var(--s-2);
  background: var(--c-primary); color: #fff;
  padding: 14px; text-align: center; border-radius: var(--r-md);
  font-weight: 600;
}

.mock-card {
  position: absolute;
  background: var(--c-surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--s-4);
  border: 1px solid var(--c-border-soft);
  display: grid; gap: 6px;
}
.mock-card--gst {
  bottom: -16px; left: -8px;
  width: 200px;
  transform: rotate(-4deg);
}
.mock-card--gst .mock-card__hd { display: flex; align-items: center; gap: 10px; }
.mock-card__icon {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--c-primary-50); color: var(--c-primary);
  display: grid; place-items: center;
}
.mock-card__icon svg { width: 20px; height: 20px; }
.mock-card__hd strong { display: block; font-size: var(--fs-14); }
.mock-card__hd small { color: var(--c-fg-soft); font-size: var(--fs-12); }
.mock-card__metric { font-size: var(--fs-24); font-weight: 600; color: var(--c-primary); }
.mock-card__metric em { display: block; font-size: var(--fs-12); color: var(--c-fg-soft); font-style: normal; font-weight: 400; }

.mock-card--reviews {
  top: -8px; right: -8px;
  width: 200px;
  transform: rotate(3deg);
}
.mock-card__stars { color: #F59E0B; font-size: var(--fs-18); letter-spacing: 2px; }
.mock-card--reviews small { font-size: var(--fs-14); color: var(--c-fg); line-height: 1.4; }
.mock-card--reviews em { font-size: var(--fs-12); color: var(--c-fg-soft); font-style: normal; }

@media (max-width: 767px) {
  .mock-card--gst, .mock-card--reviews { display: none; }
  .mock { transform: rotate(0); max-width: 100%; }
  .hero__visual { min-height: 0; }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,6,.4); }
  50% { box-shadow: 0 0 0 6px rgba(217,119,6,0); }
}

/* -------- Trust strip -------- */
.trust-strip {
  background: var(--c-surface);
  border-block: 1px solid var(--c-border-soft);
  padding-block: var(--s-7);
}
.trust-strip__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
.trust-strip strong {
  display: block;
  font-size: clamp(var(--fs-24), 3vw, var(--fs-32));
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: -.02em;
}
.trust-strip span { font-size: var(--fs-14); color: var(--c-fg-soft); }
@media (min-width: 768px) {
  .trust-strip__grid { grid-template-columns: repeat(4, 1fr); }
}

/* -------- Audience selector -------- */
.audience { padding-block: var(--s-12); }
.audience__grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
}
.aud-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  display: grid; gap: var(--s-3);
  transition: transform var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing), border-color var(--t-base) var(--easing);
  position: relative;
}
.aud-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
  border-color: var(--c-border);
}
.aud-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--c-primary-50);
  color: var(--c-primary);
  display: grid; place-items: center;
}
.aud-card__icon svg { width: 26px; height: 26px; }
.aud-card h3 { font-size: var(--fs-20); }
.aud-card p { color: var(--c-fg-soft); }
.aud-card ul {
  display: grid; gap: 6px; padding-top: var(--s-3);
  border-top: 1px solid var(--c-border-soft);
  margin-top: var(--s-3);
}
.aud-card ul li {
  font-size: var(--fs-14); color: var(--c-fg);
  position: relative; padding-left: 20px;
}
.aud-card ul li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary-50); border: 2px solid var(--c-primary);
}
.aud-card .link {
  margin-top: var(--s-3);
  color: var(--c-primary); font-weight: 600; font-size: var(--fs-14);
}
.aud-card .link:hover { color: var(--c-primary-700); }

.aud-card--featured {
  background: linear-gradient(180deg, #fff 0%, #F0FDFA 100%);
  border-color: var(--c-primary);
  box-shadow: var(--sh-2);
}
.aud-card__badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--c-primary); color: #fff;
  font-size: var(--fs-12); font-weight: 600;
  padding: 4px 10px; border-radius: var(--r-pill);
}

@media (min-width: 768px) {
  .audience__grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

/* -------- Services -------- */
.services {
  padding-block: var(--s-12);
  background: var(--c-surface);
  border-block: 1px solid var(--c-border-soft);
}
.services__grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
}
.svc-card {
  padding: var(--s-7);
  background: var(--c-bg);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  display: grid; gap: var(--s-3);
  transition: transform var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing), background var(--t-base) var(--easing);
}
.svc-card:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: var(--sh-2);
}
.svc-card__icon {
  width: 48px; height: 48px;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-primary);
  display: grid; place-items: center;
}
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card h3 { font-size: var(--fs-20); }
.svc-card p { color: var(--c-fg-soft); font-size: var(--fs-14); }
.svc-card__meta {
  margin-top: var(--s-2);
  font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-accent);
}
@media (min-width: 640px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services__grid { grid-template-columns: repeat(4, 1fr); } }

/* -------- Benefits -------- */
.benefits { padding-block: var(--s-12); }
.benefits__grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
}
.ben-card {
  padding: var(--s-8);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--sh-1);
  display: grid; gap: var(--s-3);
  position: relative; overflow: hidden;
}
.ben-card::after {
  content: '';
  position: absolute; inset: auto -40px -40px auto;
  width: 160px; height: 160px;
  background: radial-gradient(circle, var(--c-primary-50) 0%, transparent 70%);
  border-radius: 50%;
  opacity: .6;
  pointer-events: none;
}
.ben-card__metric {
  font-size: var(--fs-56);
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: -.03em;
  line-height: 1;
}
.ben-card h3 { font-size: var(--fs-20); }
.ben-card p { color: var(--c-fg-soft); }
@media (min-width: 768px) { .benefits__grid { grid-template-columns: repeat(3, 1fr); } }

/* -------- How it works -------- */
.how {
  padding-block: var(--s-12);
  background: var(--c-surface);
  border-block: 1px solid var(--c-border-soft);
}
.how__steps {
  display: grid; gap: var(--s-6);
  grid-template-columns: 1fr;
  position: relative;
}
.how__step {
  background: var(--c-bg);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  border: 1px solid var(--c-border-soft);
  display: grid; gap: var(--s-3);
  position: relative;
}
.how__num {
  font-size: var(--fs-32);
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: -.02em;
  display: inline-block;
  border-bottom: 3px solid var(--c-primary);
  padding-bottom: 4px;
  width: fit-content;
}
.how__step h3 { font-size: var(--fs-20); }
.how__step p { color: var(--c-fg-soft); }
@media (min-width: 768px) {
  .how__steps { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

/* -------- Testimonials -------- */
.testimonials { padding-block: var(--s-12); }
.rating-row {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--s-2);
}
.stars { color: #F59E0B; letter-spacing: 2px; font-size: var(--fs-20); }
.rating-row strong { font-size: var(--fs-20); }
.rating-row__meta { font-size: var(--fs-14); color: var(--c-fg-soft); }

.testimonials__grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
}
.quote-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-7);
  margin: 0;
  display: grid; gap: var(--s-5);
  position: relative;
  box-shadow: var(--sh-1);
  transition: transform var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing);
}
.quote-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.quote-card__mark {
  width: 28px; height: 28px;
  color: var(--c-primary-50);
}
.quote-card blockquote {
  margin: 0;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--c-fg);
}
.quote-card figcaption {
  display: flex; align-items: center; gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border-soft);
}
.quote-card figcaption strong { display: block; font-size: var(--fs-16); }
.quote-card figcaption span { font-size: var(--fs-14); color: var(--c-fg-soft); }
.avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 600;
  font-size: var(--fs-14);
  flex-shrink: 0;
}
@media (min-width: 768px) { .testimonials__grid { grid-template-columns: repeat(3, 1fr); } }

/* -------- About founder -------- */
.about {
  padding-block: var(--s-12);
  background: linear-gradient(180deg, var(--c-bg), #fff);
  border-block: 1px solid var(--c-border-soft);
}
.about__grid {
  display: grid; gap: var(--s-9);
  grid-template-columns: 1fr;
  align-items: center;
}
.about__visual {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
}
.about__photo {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%);
  border-radius: var(--r-xl);
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh-3);
}
.about__photo-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.about__photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
  z-index: 1;
}
.about__initials {
  font-size: 96px; font-weight: 600; color: rgba(255,255,255,.95);
  letter-spacing: -.04em;
  position: relative; z-index: 1;
}
.about__caption {
  position: absolute; bottom: 16px; left: 16px;
  max-width: calc(100% - 32px);
  width: max-content;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-14);
  z-index: 2;
}
.about__chip {
  position: absolute;
  background: #fff;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  padding: 12px 16px;
  box-shadow: var(--sh-2);
  display: grid;
  z-index: 3;
}
.about__chip strong { font-size: var(--fs-20); color: var(--c-primary); font-weight: 600; }
.about__chip span { font-size: var(--fs-12); color: var(--c-fg-soft); text-transform: uppercase; letter-spacing: .1em; }
.about__chip--1 { top: 24px; left: -16px; }
.about__chip--2 { bottom: 24px; right: -16px; }

.about__copy { display: grid; gap: var(--s-4); }
.about__copy h2 {
  font-size: clamp(var(--fs-32), 3.5vw, var(--fs-40));
  letter-spacing: -.02em;
}
.about__lead { font-size: var(--fs-18); color: var(--c-fg-soft); }
.about__copy p { color: var(--c-fg-soft); }
.about__credentials {
  display: grid; gap: var(--s-3);
  margin-block: var(--s-4);
}
.about__credentials li {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-16);
}
.about__credentials .i {
  width: 22px; height: 22px;
  color: #fff; background: var(--c-success);
  border-radius: 50%; padding: 4px;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .about__grid { grid-template-columns: .85fr 1.15fr; gap: var(--s-12); }
}

/* -------- FAQ -------- */
.faq {
  padding-block: var(--s-12);
}
.faq__list {
  max-width: 800px; margin: 0 auto;
  display: grid; gap: var(--s-3);
}
.faq__item {
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--easing), box-shadow var(--t-fast) var(--easing);
}
.faq__item[open] { border-color: var(--c-primary); box-shadow: var(--sh-1); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  font-weight: 500;
  font-size: var(--fs-18);
  color: var(--c-fg);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--c-primary); }
.faq__chev {
  width: 22px; height: 22px;
  color: var(--c-primary);
  flex-shrink: 0;
  transition: transform var(--t-base) var(--easing);
}
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__item p {
  padding: 0 var(--s-6) var(--s-5);
  color: var(--c-fg-soft);
  line-height: 1.7;
}

/* -------- Final CTA -------- */
.final-cta {
  padding-block: var(--s-12);
  background:
    radial-gradient(60% 80% at 90% 0%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at left, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at left, #000, transparent 75%);
}
.final-cta__inner {
  position: relative;
  display: grid; gap: var(--s-7);
  align-items: center;
}
.final-cta h2 {
  font-size: clamp(var(--fs-32), 4vw, var(--fs-56));
  margin-block: var(--s-3);
  letter-spacing: -.02em;
}
.final-cta p { color: rgba(255,255,255,.85); font-size: var(--fs-18); }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (min-width: 1024px) {
  .final-cta__inner { grid-template-columns: 1.4fr 1fr; gap: var(--s-9); }
  .final-cta__actions { justify-content: flex-end; }
}

/* -------- Footer -------- */
.footer {
  background: #0B3A37;
  color: #CBD5E1;
  padding-block: var(--s-10) var(--s-6);
}
.footer__grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__col { display: grid; gap: var(--s-3); align-content: start; }
.footer__col h4 {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5EEAD4;
}
.footer__col a {
  font-size: var(--fs-14);
  color: #CBD5E1;
  transition: color var(--t-fast) var(--easing);
}
.footer__col a:hover { color: #fff; }
.footer__col--brand p { font-size: var(--fs-14); color: #94A3B8; max-width: 32ch; }
.footer__rating {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-14);
  margin-top: var(--s-3);
}
.footer__rating strong { color: #fff; }
.footer__bottom {
  padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
  font-size: var(--fs-12); color: #94A3B8;
}
.footer__bottom a { color: #CBD5E1; }
.footer__bottom a:hover { color: #fff; }

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-9); }
}

/* -------- Floating WhatsApp -------- */
.fab-whatsapp {
  position: fixed;
  right: 16px;
  bottom: 88px; /* above mobile sticky CTA */
  width: 56px; height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(37,211,102,.4), 0 2px 6px rgba(0,0,0,.12);
  z-index: 60;
  transition: transform var(--t-fast) var(--easing);
}
.fab-whatsapp:hover { transform: scale(1.06); }
.fab-whatsapp:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(37,211,102,.3), 0 8px 20px rgba(37,211,102,.4); }
.fab-whatsapp svg { width: 28px; height: 28px; position: relative; z-index: 1; }
.fab-whatsapp__pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: fab-pulse 2.4s ease-out infinite;
  z-index: 0;
}
@keyframes fab-pulse {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (min-width: 1024px) {
  .fab-whatsapp { bottom: 24px; right: 24px; width: 60px; height: 60px; }
}

/* -------- Mobile sticky CTA -------- */
.sticky-mobile-cta {
  position: fixed;
  inset: auto 0 0 0;
  display: flex; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -4px 16px rgba(15,118,110,.08);
  z-index: 55;
}
.sticky-mobile-cta .btn { flex: 1; }
.sticky-mobile-cta .btn--ghost { flex: 0 0 auto; min-width: 80px; }
@media (min-width: 1024px) {
  .sticky-mobile-cta { display: none; }
}
@media (max-width: 1023px) {
  body { padding-bottom: 76px; }
}

/* =================================================================
   MOTION / ANIMATIONS
   ================================================================= */

/* -------- Scroll-reveal (toggled by IntersectionObserver) -------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .75s cubic-bezier(.22,1,.36,1),
    transform .75s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(.96); }
.reveal--visible {
  opacity: 1;
  transform: none;
}

/* -------- Hero entrance (on load — above the fold) -------- */
@keyframes hero-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero__copy .eyebrow,
.hero__title,
.hero__sub,
.hero__cta,
.hero__badges li {
  opacity: 0;
  animation: hero-up .8s cubic-bezier(.22,1,.36,1) forwards;
}
.hero__copy .eyebrow          { animation-delay: .05s; }
.hero__title                  { animation-delay: .15s; }
.hero__sub                    { animation-delay: .30s; }
.hero__cta                    { animation-delay: .45s; }
.hero__badges li:nth-child(1) { animation-delay: .60s; }
.hero__badges li:nth-child(2) { animation-delay: .70s; }
.hero__badges li:nth-child(3) { animation-delay: .80s; }
/* Mock + cards have existing rotate() transforms — fade only, don't touch transform */
.hero__visual .mock,
.hero__visual .mock-card {
  opacity: 0;
  animation: hero-fade .9s cubic-bezier(.22,1,.36,1) forwards;
}
.hero__visual .mock                { animation-delay: .55s; }
.hero__visual .mock-card--gst      { animation-delay: .90s; }
.hero__visual .mock-card--reviews  { animation-delay: 1.05s; }

/* -------- Hero mock progress bar fill -------- */
.mock__bar span {
  animation: bar-fill 1.4s cubic-bezier(.22,1,.36,1) 1s both;
}
@keyframes bar-fill {
  from { width: 0; }
  to   { width: var(--w, 50%); }
}

/* -------- Eyebrow dot ping -------- */
.eyebrow__dot {
  animation: eyebrow-ping 2.6s ease-out infinite;
}
@keyframes eyebrow-ping {
  0%, 70%, 100% { box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
  35%           { box-shadow: 0 0 0 9px rgba(22,163,74,0); }
}

/* -------- Floating founder chips -------- */
@keyframes chip-float-a {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes chip-float-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.about__chip--1 { animation: chip-float-a 4.8s ease-in-out infinite; }
.about__chip--2 { animation: chip-float-b 5.4s ease-in-out infinite .5s; }

/* -------- Founder photo subtle zoom on hover -------- */
.about__photo-img {
  transition: transform 1.6s cubic-bezier(.22,1,.36,1);
}
.about__photo:hover .about__photo-img {
  transform: scale(1.05);
}

/* -------- Card-icon polish on hover -------- */
.aud-card__icon,
.svc-card__icon {
  transition:
    transform var(--t-base) var(--easing),
    background var(--t-base) var(--easing),
    color var(--t-base) var(--easing);
}
.aud-card:hover .aud-card__icon,
.svc-card:hover .svc-card__icon {
  transform: scale(1.08) rotate(-4deg);
}

/* -------- Button arrow nudge -------- */
.btn .i {
  transition: transform var(--t-base) var(--easing);
}
.btn:hover .i:last-child {
  transform: translateX(3px);
}

/* -------- Primary button gloss sweep -------- */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.32), transparent);
  transform: translateX(-220%) skewX(-18deg);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.btn--primary:hover::after {
  transform: translateX(420%) skewX(-18deg);
}

/* -------- FAQ content fade-in when opened -------- */
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq__item[open] p {
  animation: faq-open .35s cubic-bezier(.22,1,.36,1) both;
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .fab-whatsapp__pulse { display: none; }
  .mock { transform: none; }
  .mock-card--gst, .mock-card--reviews { transform: none; }
  /* Make sure reveal elements are visible if JS doesn't run them */
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* -------- Print -------- */
@media print {
  .utility-bar, .site-header, .fab-whatsapp, .sticky-mobile-cta, .final-cta { display: none; }
  body { background: #fff; color: #000; }
}