/* =========================================================
   ATHAY DESIGN: HOME
   ========================================================= */


/* =========================================================
   1. SHARED
   ========================================================= */

.home-wrap {
  width: 100%;
  max-width: var(--site-width);
  margin: 0 auto;
  padding: var(--section-space) var(--page-padding);
}

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 760px;
  margin-left: auto;
  margin-right: auto;

  text-align: center;
}

.section-heading .eyebrow,
.home-cta-content .eyebrow {
  margin: 0 0 0.75rem;
}

.section-heading h2,
.home-cta-content h2 {
  margin: 0 0 1rem;
}

.section-heading > p:not(.eyebrow) {
  max-width: 720px;
  margin: 0 auto 1rem;
}

.home-lead {
  color: var(--ink);

  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.55;

  letter-spacing: -0.02em;
}


/* =========================================================
   2. HERO
   ========================================================= */

.hero-section {
  position: relative;
  overflow: hidden;

  background: var(--page);
}

.hero-section::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(var(--cobalt-rgb), 0.10),
      transparent 35%
    ),
    radial-gradient(
      circle at 88% 88%,
      rgba(233, 238, 255, 0.95),
      transparent 38%
    );
}

.hero-section > * {
  position: relative;
  z-index: 1;
}

.hero-section .home-wrap {
  padding-top: clamp(4rem, 7vw, 6.25rem);
  padding-bottom: clamp(4rem, 7vw, 6.25rem);
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 940px;
  margin: 0 auto;

  text-align: center;
}

.hero-content > .eyebrow {
  margin-bottom: 1rem;
}

.hero-content h1 {
  max-width: 820px;
  margin: 0 auto 1.4rem;

  color: var(--ink);

  font-size: clamp(2.5rem, 4.25vw, 3.85rem);
}

.hero-intro {
  max-width: 720px;
  margin: 0 auto;

  color: var(--text);

  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  line-height: 1.65;

  text-align: center;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: 12px;
  margin-top: 2rem;
}


/* ---------------------------------------------------------
   Hero trust
   --------------------------------------------------------- */

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  column-gap: 1.5rem;
  row-gap: 0.65rem;

  margin-top: 1.4rem;

  color: var(--text);

  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
}

.hero-trust > span {
  position: relative;

  display: inline-flex;
  align-items: center;
}

.hero-trust > span:not(:first-child) {
  padding-left: 1.45rem;
}

.hero-trust > span:not(:first-child)::before {
  content: "✓";

  position: absolute;

  top: 0;
  left: 0;

  color: #15e300;

  font-weight: 800;
}

.uk-flag {
  display: inline-flex;
  align-items: center;

  margin-right: 0.5rem;

  line-height: 1;
}


/* =========================================================
   3. INTRO
   ========================================================= */

.home-problem {
  overflow: hidden;

  background: var(--ink);
}

.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  max-width: 780px;
  margin: 0 auto;

  text-align: center;
}

.intro-heading {
  max-width: 680px;
}

.intro-heading .eyebrow {
  color: var(--dark-accent);
}

.intro-heading h2 {
  color: var(--white);
}

.intro-copy {
  max-width: 700px;
  margin-top: 1rem;
}

.intro-copy p {
  margin: 0 auto 1.25rem;

  color: var(--dark-text-secondary);

  line-height: 1.7;
}

.intro-copy p:last-child {
  margin-bottom: 0;
}

.intro-copy .home-lead {
  color: var(--white);
}


/* =========================================================
   4. EXAMPLES
   ========================================================= */

.home-examples {
  position: relative;
  overflow: hidden;

  background: var(--white);
}

.examples-heading {
  max-width: 720px;
  margin-bottom: 3rem;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1.5rem;
}

.example-card {
  min-width: 0;
  overflow: hidden;

  background: var(--white);

  border: 1px solid var(--border);
  border-radius: var(--radius-large);

  box-shadow:
    0 14px 38px
    rgba(11, 11, 50, 0.045);

  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.example-card:hover {
  transform: translateY(-3px);

  border-color:
    rgba(var(--cobalt-rgb), 0.22);

  box-shadow:
    0 20px 46px
    rgba(11, 11, 50, 0.07);
}

.example-visual {
  display: flex;
  align-items: center;
  justify-content: center;

  aspect-ratio: 16 / 10;

  min-height: 260px;
  padding: 2rem;

  overflow: hidden;
}

.example-visual-blue {
  background: #365cf5;
}

.example-visual-purple {
  background: #7657d9;
}

.example-visual-teal {
  background: #168b92;
}

.example-visual-pink {
  background: #c84691;
}

.example-visual > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: min(78%, 420px);
  aspect-ratio: 16 / 10;

  color: rgba(255, 255, 255, 0.9);

  background:
    rgba(255, 255, 255, 0.10);

  border:
    1px dashed
    rgba(255, 255, 255, 0.58);

  border-radius: 14px;

  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;

  text-align: center;
  letter-spacing: 0.06em;
}

.example-copy {
  padding: 1.6rem;
}

.example-type {
  margin: 0 0 0.55rem;

  color: var(--cobalt);

  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.example-copy h3 {
  margin: 0 0 0.65rem;

  color: var(--ink);

  font-size: 1.25rem;
  line-height: 1.2;

  letter-spacing: -0.03em;
}

.example-copy > p:not(.example-type) {
  max-width: 520px;
  margin: 0;

  color: var(--text);

  font-size: 0.92rem;
  line-height: 1.6;
}

.example-tags {
  display: flex;
  flex-wrap: wrap;

  gap: 0.45rem;
  margin-top: 1.25rem;
}

.example-tags span {
  display: inline-flex;
  align-items: center;

  min-height: 28px;
  padding: 0.35rem 0.7rem;

  color: var(--text);

  background: var(--page);

  border: 1px solid var(--border);
  border-radius: var(--radius-pill);

  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
}


/* =========================================================
   5. CLIENT REVIEWS
   ========================================================= */

.client-reviews {
  position: relative;
  overflow: hidden;

  background: var(--ink);
}

.client-reviews .section-heading {
  margin-bottom: 3rem;
}

.client-reviews .section-heading .eyebrow {
  color: var(--dark-accent);
}

.client-reviews .section-heading h2 {
  color: var(--white);
}

.client-reviews .section-heading > p:not(.eyebrow) {
  color: var(--dark-text-secondary);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1.25rem;
}

.review-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 280px;
  padding: 1.75rem;

  background:
    rgba(255, 255, 255, 0.06);

  border:
    1px solid
    rgba(255, 255, 255, 0.1);

  border-radius: var(--radius-large);
}

.review-stars {
  display: flex;
  align-items: center;

  gap: 0.25rem;
  margin-bottom: 1.25rem;
}

.review-stars img {
  display: block;

  width: 16px;
  height: 16px;

  filter:
    brightness(0)
    saturate(100%)
    invert(44%)
    sepia(94%)
    saturate(2448%)
    hue-rotate(217deg)
    brightness(101%)
    contrast(101%);
}

.review-card blockquote {
  flex: 1;

  margin: 0;
  padding: 0;
}

.review-card blockquote p {
  margin: 0;

  color: var(--white);

  font-size: 0.95rem;
  line-height: 1.65;
}

.review-author {
  display: flex;
  align-items: center;

  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.1);
}

.review-avatar {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  color: var(--white);

  background:
    rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  font-size: 0.68rem;
  font-weight: 700;
}

.review-author > div {
  display: flex;
  flex-direction: column;

  gap: 0.1rem;
}

.review-author strong {
  color: var(--white);

  font-size: 0.82rem;
  line-height: 1.3;
}

.review-author div span {
  color: var(--dark-text-secondary);

  font-size: 0.75rem;
  line-height: 1.3;
}


/* =========================================================
   6. WHAT YOU GET
   ========================================================= */

.home-services {
  overflow: hidden;

  background: var(--white);
}

.home-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1.5rem;
  margin-top: 3rem;
}

.home-service-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 260px;
  padding: 2rem;

  color: inherit;

  background: var(--white);

  border: 1px solid var(--border);
  border-radius: 20px;

  box-shadow: var(--shadow-soft);

  transition:
    transform 200ms ease,
    box-shadow 200ms ease,
    border-color 200ms ease;
}

.home-service-card:hover {
  transform: translateY(-4px);

  border-color:
    rgba(var(--cobalt-rgb), 0.24);

  box-shadow: var(--shadow-card);
}

.card-number {
  display: block;

  margin-bottom: 1.5rem;

  color: var(--cobalt);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.1em;
}

.home-service-card h3 {
  max-width: 420px;
  margin: 0 0 0.75rem;

  color: var(--ink);
}

.home-service-card p {
  max-width: 470px;
  margin: 0;

  color: var(--text);

  font-size: 1rem;
}


/* =========================================================
   7. EVERYTHING INCLUDED
   ========================================================= */

.home-included {
  position: relative;
  overflow: hidden;

  background: var(--page);
}

.home-included::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(var(--cobalt-rgb), 0.055),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(118, 87, 217, 0.04),
      transparent 30%
    );
}

.home-included .home-wrap {
  position: relative;
  z-index: 1;
}

.included-heading {
  max-width: 720px;
  margin: 0 auto 3rem;
}

.included-heading h2 {
  max-width: 680px;
}

.included-heading > p:not(.eyebrow) {
  max-width: 640px;
}

.included-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.25rem;
}

.included-card {
  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 360px;

  overflow: hidden;

  background: var(--white);

  border: 1px solid var(--border);
  border-radius: var(--radius-large);

  box-shadow:
    0 14px 38px
    rgba(11, 11, 50, 0.045);

  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.included-card:hover {
  transform: translateY(-3px);

  border-color:
    rgba(var(--cobalt-rgb), 0.22);

  box-shadow:
    0 20px 46px
    rgba(11, 11, 50, 0.07);
}

.included-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 190px;
  padding: 1.5rem;
}

.included-visual-blue {
  background: #365cf5;
}

.included-visual-purple {
  background: #7657d9;
}

.included-visual-teal {
  background: #168b92;
}

.included-visual-violet {
  background: #7f4cc9;
}

.included-visual-pink {
  background: #c84691;
}

.included-visual-cyan {
  background: #0879d9;
}

.included-card-visual span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 112px;
  height: 112px;

  color: var(--white);

  background:
    rgba(255, 255, 255, 0.12);

  border:
    1px dashed
    rgba(255, 255, 255, 0.7);

  border-radius: 24px;

  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;

  text-align: center;
  letter-spacing: 0.04em;
}

.included-card-copy {
  padding: 1.5rem;
}

.included-card h3 {
  margin: 0 0 0.65rem;

  color: var(--ink);

  font-size: 1.08rem;
  line-height: 1.25;

  letter-spacing: -0.025em;
}

.included-card p {
  margin: 0;

  color: var(--text);

  font-size: 0.9rem;
  line-height: 1.6;
}

.included-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 1.25rem;

  width: 100%;
  max-width: 720px;

  margin: 2.5rem auto 0;

  text-align: center;
}

.included-summary p {
  width: 100%;
  margin: 0;

  color: var(--ink);

  font-size: 0.95rem;
  line-height: 1.5;
}

.included-summary strong {
  font-weight: 700;
}


/* =========================================================
   8. PRICING
   ========================================================= */

.home-pricing {
  position: relative;
  overflow: hidden;

  background: var(--white);
}

.home-pricing::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(var(--cobalt-rgb), 0.06),
      transparent 32%
    );
}

.home-pricing .home-wrap {
  position: relative;
  z-index: 1;
}

.pricing-heading {
  max-width: 680px;
  margin: 0 auto 2.25rem;
}

.pricing-heading h2 {
  max-width: 620px;
}

.pricing-heading > p:not(.eyebrow) {
  max-width: 620px;
}


/* =========================================================
   9. PRICING GRID
   ========================================================= */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.25rem;

  width: 100%;
}


/* =========================================================
   10. PRICING CARDS
   ========================================================= */

.pricing-card {
  position: relative;

  display: flex;
  flex-direction: column;

  min-width: 0;
  min-height: 100%;

  padding: 1.65rem;

  overflow: hidden;

  background: var(--white);

  border: 1px solid transparent;
  border-radius: var(--radius-large);

  box-shadow:
    0 16px 42px
    rgba(11, 11, 50, 0.055);

  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.pricing-card-starter {
  --plan-color: #4169d8;
  --plan-soft: rgba(65, 105, 216, 0.09);
}

.pricing-card-business {
  --plan-color: #7657d9;
  --plan-soft: rgba(118, 87, 217, 0.09);
}

.pricing-card-plus {
  --plan-color: #168b92;
  --plan-soft: rgba(22, 139, 146, 0.09);
}

.pricing-card-business {
  border: 4px solid transparent;

  background:
    linear-gradient(
      var(--white),
      var(--white)
    )
    padding-box,

    linear-gradient(
      115deg,
      rgba(var(--cobalt-rgb), 0.20) 0%,
      rgba(var(--cobalt-rgb), 0.20) 10%,
      var(--cobalt) 20%,
      #168cff 30%,
      #20c6e8 39%,
      rgba(var(--cobalt-rgb), 0.20) 48%,
      #7657d9 59%,
      #a44ee0 68%,
      #e24fa3 78%,
      #f06c8d 86%,
      rgba(var(--cobalt-rgb), 0.20) 95%,
      rgba(var(--cobalt-rgb), 0.20) 100%
    )
    border-box;

  background-size:
    100% 100%,
    260% 260%;

  background-position:
    0 0,
    0% 50%;

  box-shadow:
    0 20px 50px
    rgba(11, 11, 50, 0.08);

  animation:
    pricing-border-drift 22s ease-in-out infinite;
}

@keyframes pricing-border-drift {

  0% {
    background-position:
      0 0,
      0% 45%;
  }

  50% {
    background-position:
      0 0,
      100% 55%;
  }

  100% {
    background-position:
      0 0,
      0% 45%;
  }
}

.pricing-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 22px 52px
    rgba(11, 11, 50, 0.08);
}

.pricing-card-business:hover {
  box-shadow:
    0 24px 56px
    rgba(11, 11, 50, 0.10);
}

.pricing-card.is-selected {
  box-shadow:
    0 20px 50px
    rgba(11, 11, 50, 0.08);
}

.pricing-card.is-selected:hover {
  box-shadow:
    0 24px 56px
    rgba(11, 11, 50, 0.10);
}

.pricing-card-top {
  display: flex;
  flex-direction: column;
}


/* =========================================================
   11. PRICING TAGS
   ========================================================= */

.pricing-tags {
  display: flex;
  align-items: center;

  gap: 0.5rem;

  width: 100%;
  min-height: 26px;

  margin-bottom: 1rem;
}

.pricing-tags .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  min-height: 26px;
  padding: 0.3rem 0.7rem;

  color: var(--plan-color);

  background: var(--plan-soft);

  border: 0;
  border-radius: var(--radius-pill);

  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;

  text-align: center;

  letter-spacing: 0.015em;
}

.pricing-card-business .tag-blue-solid {
  min-height: auto;

  margin-left: auto;
  padding: 0;

  background:
    linear-gradient(
      90deg,
      var(--cobalt) 0%,
      #168cff 20%,
      #20c6e8 38%,
      #7657d9 58%,
      #a44ee0 72%,
      #e24fa3 88%,
      var(--cobalt) 100%
    );

  background-size: 250% 100%;
  background-position: 0% 50%;

  border: 0;
  border-radius: 0;

  color: transparent;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.01em;

  animation:
    pricing-label-drift 12s ease-in-out infinite;
}

@keyframes pricing-label-drift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}


/* =========================================================
   12. PRICING TITLES
   ========================================================= */

.pricing-card h3 {
  min-height: 0;
  max-width: 320px;

  margin: 0 0 1rem;

  color: var(--ink);

  font-size: clamp(1.08rem, 1.45vw, 1.3rem);
  line-height: 1.2;

  letter-spacing: -0.03em;
}


/* =========================================================
   13. PRICE
   ========================================================= */

.pricing-price {
  display: flex;
  align-items: baseline;

  gap: 0.4rem;

  min-height: 48px;

  margin: 0 0 0.45rem;
}

.pricing-currency {
  color: var(--text);

  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
}

.pricing-price strong {
  color: var(--ink);

  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 0.95;

  letter-spacing: -0.055em;
}

.pricing-period {
  color: var(--text-muted);

  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
}

.pricing-setup {
  margin: 0 0 1.1rem;

  color: var(--text-muted);

  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
}


/* =========================================================
   14. PRICING FEATURES
   ========================================================= */

.pricing-features {
  display: flex;
  flex-direction: column;

  gap: 0.7rem;

  margin: 0 0 1.5rem;
  padding: 0;

  list-style: none;
}

.pricing-features li {
  position: relative;

  padding-left: 1.45rem;

  color: var(--text);

  font-size: 0.84rem;
  line-height: 1.45;
}

.pricing-features li::before {
  content: "✓";

  position: absolute;

  top: 0;
  left: 0;

  color: #15e300;

  font-weight: 800;
}


/* =========================================================
   15. PRICING CTA
   ========================================================= */

.pricing-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin-top: auto;

  text-align: center;
}

.pricing-button {
  box-sizing: border-box;

  color: var(--white);

  background: var(--cobalt);
  border-color: var(--cobalt);
}

.pricing-button:hover {
  color: var(--white);

  background: var(--cobalt-hover);
  border-color: var(--cobalt-hover);

  filter: none;
}

.pricing-note {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 720px;
  margin: 1.75rem auto 0;

  text-align: center;
}

.pricing-note p {
  margin: 0;

  color: var(--text);

  font-size: 0.9rem;
  line-height: 1.55;
}

.pricing-note a {
  display: inline-block;

  margin-top: 0.65rem;

  color: var(--cobalt);

  font-size: 0.9rem;
  font-weight: 600;

  text-decoration: none;
}

.pricing-note a:hover {
  color: var(--cobalt-hover);
}


/* =========================================================
   16. BUSINESS FOCUS
   ========================================================= */

.home-difference {
  overflow: hidden;

  background: var(--ink);
}

.difference-intro {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-width: 800px;
  margin: 0 auto;

  text-align: center;
}

.difference-heading {
  max-width: 720px;
}

.home-difference .eyebrow {
  color: var(--dark-accent);
}

.home-difference h2 {
  color: var(--white);
}

.difference-copy {
  max-width: 700px;
  margin-top: 1rem;
}

.difference-copy p {
  margin: 0 auto 1.25rem;

  color: var(--dark-text-secondary);

  line-height: 1.7;
}

.difference-copy p:last-child {
  margin-bottom: 0;
}

.difference-copy .home-lead {
  color: var(--white);
}

.difference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.5rem;

  margin-top: 3.5rem;
}

.difference-card {
  min-height: 230px;

  padding: 2rem;

  background: var(--dark-surface);

  border: 1px solid var(--dark-border);
  border-radius: 20px;
}

.difference-card .card-number {
  color: var(--dark-accent);
}

.difference-card h3 {
  margin: 0 0 0.75rem;

  color: var(--white);
}

.difference-card p {
  margin: 0;

  color: var(--dark-text-secondary);

  font-size: 1rem;
}


/* =========================================================
   17. PROCESS
   ========================================================= */
/* =========================================================
   17. PROCESS
   ========================================================= */

.home-process {
  overflow: hidden;

  background: var(--white);
}

.process-preview-grid {
  position: relative;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 1rem;

  width: 100%;
  margin-top: 3rem;
}


/* ---------------------------------------------------------
   Connecting line
   --------------------------------------------------------- */

.process-preview-grid::before {
  content: "";

  position: absolute;
  z-index: 0;

  /*
   * Card padding is 24px.
   * Icon container is 80px high.
   * 24 + 40 = 64px, placing the line directly
   * through the vertical centre of the icons.
   */
  top: 64px;
  left: 12.5%;
  right: 12.5%;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--cobalt) 0%,
      #168cff 20%,
      #20c6e8 38%,
      #7657d9 58%,
      #a44ee0 72%,
      #e24fa3 88%,
      var(--cobalt) 100%
    );

  background-size: 250% 100%;
  background-position: 0% 50%;

  border-radius: var(--radius-pill);

  opacity: 0.8;

  animation:
    process-line-drift 16s ease-in-out infinite;
}


/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.process-preview {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;
  min-height: 250px;

  padding: 1.5rem 1.75rem;

  text-align: center;

  /*
   * Must remain opaque.
   * This hides the connector as it passes behind each card,
   * leaving only the joining sections visible.
   */
  background: var(--white);

  border: 1px solid var(--border);
  border-radius: 22px;

  box-shadow: var(--shadow-soft);

  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.process-preview:hover {
  transform: translateY(-3px);

  border-color:
    rgba(var(--cobalt-rgb), 0.24);

  box-shadow: var(--shadow-card);
}


/* ---------------------------------------------------------
   Old process numbers
   --------------------------------------------------------- */

.process-number {
  display: none;
}


/* ---------------------------------------------------------
   Process icons
   --------------------------------------------------------- */

.process-preview-icon {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 80px;
  height: 80px;

  flex: 0 0 80px;

  margin: 0 auto 0.65rem;

  /*
   * White background masks the connector directly
   * behind the icon itself.
   */
  background: var(--white);

  border-radius: 18px;
}

/*
 * Keep the real SVG in the HTML as the source/fallback,
 * but render the visible version through the gradient mask.
 */
.process-preview-icon img {
  display: none;
}

.process-preview-icon::before {
  content: "";

  display: block;

  width: 58px;
  height: 58px;

  background:
    linear-gradient(
      135deg,
      var(--cobalt) 0%,
      #168cff 22%,
      #20c6e8 38%,
      #7657d9 60%,
      #a44ee0 75%,
      #e24fa3 88%,
      var(--cobalt) 100%
    );

  background-size: 350% 350%;
  background-position: 0% 0%;

  animation:
    process-sky-drift 12s ease-in-out infinite;
}


/* ---------------------------------------------------------
   Individual icon masks
   --------------------------------------------------------- */

.process-preview:nth-child(1)
.process-preview-icon::before {
  -webkit-mask:
    url("../img/icons/clipboard-list-check-regular-full.svg")
    center / contain no-repeat;

  mask:
    url("../img/icons/clipboard-list-check-regular-full.svg")
    center / contain no-repeat;

  animation-delay: 0s;
}

.process-preview:nth-child(2)
.process-preview-icon::before {
  -webkit-mask:
    url("../img/icons/head-side-gear-regular-full.svg")
    center / contain no-repeat;

  mask:
    url("../img/icons/head-side-gear-regular-full.svg")
    center / contain no-repeat;

  animation-delay: -3s;
}

.process-preview:nth-child(3)
.process-preview-icon::before {
  -webkit-mask:
    url("../img/icons/laptop-code-regular-full.svg")
    center / contain no-repeat;

  mask:
    url("../img/icons/laptop-code-regular-full.svg")
    center / contain no-repeat;

  animation-delay: -6s;
}

.process-preview:nth-child(4)
.process-preview-icon::before {
  -webkit-mask:
    url("../img/icons/rocket-vertical-sharp-regular-full.svg")
    center / contain no-repeat;

  mask:
    url("../img/icons/rocket-vertical-sharp-regular-full.svg")
    center / contain no-repeat;

  animation-delay: -9s;
}


/* ---------------------------------------------------------
   Process animation
   --------------------------------------------------------- */

@keyframes process-sky-drift {

  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 100%;
  }

  100% {
    background-position: 0% 0%;
  }

}

@keyframes process-line-drift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

}


/* ---------------------------------------------------------
   Process content
   --------------------------------------------------------- */

.process-preview h3 {
  margin: 0 auto 0.65rem;

  color: var(--ink);

  font-size: 1.2rem;
  line-height: 1.2;

  letter-spacing: -0.025em;
}

.process-preview p {
  max-width: 260px;
  margin: 0 auto;

  color: var(--text);

  font-size: 0.95rem;
  line-height: 1.6;
}

.section-action {
  display: flex;
  justify-content: center;

  margin-top: 2.5rem;
}

/* =========================================================
   18. EXPERIENCE
   ========================================================= */

.home-experience {
  overflow: hidden;

  background: #f1f7fe;
}

.experience-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  max-width: 820px;
  margin: 0 auto;

  text-align: center;
}

.experience-heading {
  max-width: 720px;
}

.experience-copy {
  max-width: 700px;
  margin-top: 1rem;
}

.experience-copy p {
  margin: 0 auto 1.25rem;

  color: var(--text);

  line-height: 1.7;
}

.experience-copy .home-lead {
  color: var(--ink);
}

.experience-copy .btn {
  margin-top: 0.5rem;
}


/* =========================================================
   19. FAQ
   ========================================================= */

.home-faq {
  overflow: hidden;

  background: var(--white);
}

.home-faq .section-heading {
  max-width: 760px;
  margin: 0 auto;

  text-align: center;
}

.faq-list {
  width: 100%;
  max-width: 900px;

  margin: 3rem auto 0;
}

.faq-item {
  width: 100%;

  border-top: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  position: relative;

  width: 100%;

  padding:
    1.5rem
    3rem
    1.5rem
    0;

  color: var(--ink);

  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;

  text-align: left;
  letter-spacing: -0.02em;

  cursor: pointer;

  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";

  position: absolute;

  top: 50%;
  right: 0;

  color: var(--cobalt);

  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;

  transform: translateY(-50%);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 4px;

  border-radius: 4px;
}

.faq-answer {
  max-width: 720px;

  padding: 0 0 1.75rem;

  text-align: left;
}

.faq-answer p {
  margin: 0 0 1rem;

  color: var(--text);

  font-size: 1rem;
  line-height: 1.65;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   20. MAIN CTA
   ========================================================= */

.home-cta {
  position: relative;
  overflow: hidden;

  background: var(--ink);
}

.home-cta::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(var(--cobalt-rgb), 0.25),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 90%,
      rgba(175, 192, 255, 0.10),
      transparent 40%
    );
}

.home-cta .home-wrap {
  position: relative;
  z-index: 1;

  padding-top: clamp(4rem, 7vw, 6rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

.home-cta-content {
  max-width: 820px;
  margin: 0 auto;

  text-align: center;
}

.home-cta-content .eyebrow {
  color: var(--dark-accent);
}

.home-cta-content h2 {
  color: var(--white);
}

.home-cta-content > p:not(.eyebrow) {
  max-width: 650px;
  margin: 0 auto;

  color: var(--dark-text-secondary);
}

.home-cta .btn-light {
  color: var(--ink);

  background: var(--white);
  border-color: var(--white);
}

.home-cta .btn-light:hover {
  color: var(--ink);

  background: var(--pale-blue);
  border-color: var(--pale-blue);
}


/* =========================================================
   21. EXPLORE
   ========================================================= */

.home-explore {
  overflow: hidden;

  background: var(--page);
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 1rem;
}

.explore-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;

  gap: 1.5rem;

  min-width: 0;
  min-height: 170px;
  padding: 1.5rem;

  color: inherit;
  text-decoration: none;

  background: var(--white);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  box-shadow:
    0 8px 24px
    rgba(11, 11, 50, 0.025);

  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.explore-card:hover {
  transform: translateY(-3px);

  border-color:
    rgba(var(--cobalt-rgb), 0.24);

  box-shadow: var(--shadow-soft);
}

.explore-card h3 {
  margin: 0 0 0.5rem;

  color: var(--ink);
}

.explore-card p {
  margin: 0;

  color: var(--text);

  font-size: 0.9rem;
  line-height: 1.55;
}

.explore-card > span {
  flex: 0 0 auto;

  color: var(--cobalt);

  font-size: 1.4rem;
  line-height: 1;

  transition:
    transform 180ms ease;
}

.explore-card:hover > span {
  transform: translateX(3px);
}

.explore-card:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 3px;
}


/* =========================================================
   22. TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .example-visual {
    min-height: 220px;
  }

  .included-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .pricing-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .pricing-card:last-child {
    grid-column: 1 / -1;
  }

  .process-preview-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    max-width: 760px;
    margin: 3rem auto 0;
  }

  .process-preview-grid::before {
    display: none;
  }

  .explore-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   23. MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .hero-section .home-wrap {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .hero-content {
    align-items: flex-start;

    text-align: left;
  }

  .hero-content > .eyebrow {
    text-align: left;
  }

  .hero-content h1 {
    max-width: 100%;
    margin-left: 0;

    font-size:
      clamp(2.25rem, 10vw, 2.9rem);

    text-align: left;
  }

  .hero-intro {
    max-width: 100%;
    margin: 0;

    text-align: left;
  }

  .hero-actions {
    justify-content: flex-start;

    margin-top: 1.5rem;
  }


  /* Hero trust */

  .hero-trust {
    justify-content: flex-start;

    width: 100%;

    column-gap: 1.25rem;
    row-gap: 0.65rem;

    margin-top: 1.4rem;
  }

  .hero-trust > span {
    white-space: normal;
  }


  /* Intro */

  .intro-content,
  .intro-copy {
    max-width: 100%;
  }


  /* Examples */

  .examples-heading {
    margin-bottom: 2rem;
  }

  .examples-grid {
    grid-template-columns: 1fr;

    gap: 1rem;
  }

  .example-visual {
    min-height: 0;
    padding: 1.5rem;
  }

  .example-visual > span {
    width: 82%;
  }

  .example-copy {
    padding: 1.35rem;
  }


  /* Reviews */

  .client-reviews .section-heading {
    margin-bottom: 2rem;
  }

  .reviews-grid {
    grid-template-columns: 1fr;

    gap: 1rem;
  }

  .review-card {
    min-height: 0;
    padding: 1.5rem;
  }


  /* Services */

  .home-service-grid {
    grid-template-columns: 1fr;

    gap: 1rem;
    margin-top: 2rem;
  }

  .home-service-card {
    min-height: 0;
    padding: 1.5rem;
  }


  /* Included */

  .included-heading {
    margin-bottom: 2rem;
  }

  .included-grid {
    grid-template-columns: 1fr;

    gap: 1rem;
  }

  .included-card {
    min-height: 0;
  }

  .included-card-visual {
    min-height: 160px;
  }

  .included-card-visual span {
    width: 96px;
    height: 96px;
  }

  .included-card-copy {
    padding: 1.35rem;
  }

  .included-summary {
    gap: 1rem;

    margin-top: 2rem;
  }


  /* Pricing */

  .pricing-heading {
    margin-bottom: 1.75rem;
  }

  .pricing-grid {
    grid-template-columns: 1fr;

    gap: 1rem;
  }

  .pricing-card,
  .pricing-card:last-child {
    grid-column: auto;

    min-height: 0;
    padding: 1.5rem;

    border-radius: var(--radius-large);
  }

  .pricing-tags {
    min-height: 24px;

    margin-bottom: 1rem;
  }

  .pricing-tags .tag {
    min-height: 24px;
  }

  .pricing-card-business .tag-blue-solid {
    min-height: auto;
  }

  .pricing-card h3 {
    min-height: 0;

    margin-bottom: 1rem;

    font-size: 1.2rem;
  }

  .pricing-price {
    min-height: 0;

    margin-bottom: 0.4rem;
  }

  .pricing-price strong {
    font-size:
      clamp(2.35rem, 12vw, 2.8rem);
  }

  .pricing-setup {
    margin-bottom: 1.1rem;
  }

  .pricing-features {
    gap: 0.65rem;

    margin-bottom: 1.5rem;
  }

  .pricing-note {
    margin-top: 1.5rem;
  }


  /* Difference */

  .difference-intro,
  .difference-copy {
    max-width: 100%;
  }

  .difference-grid {
    grid-template-columns: 1fr;

    gap: 1rem;
    margin-top: 2.5rem;
  }

  .difference-card {
    min-height: 0;
    padding: 1.5rem;
  }


  /* Process */

  .process-preview-grid {
    grid-template-columns: 1fr;

    width: 100%;
    max-width: none;

    gap: 1rem;
    margin-top: 2.5rem;
  }

  .process-preview {
    min-height: 0;
    padding: 1.5rem;
  }


  /* Experience */

  .experience-content,
  .experience-copy {
    max-width: 100%;
  }


  /* FAQ */

  .faq-list {
    max-width: 100%;

    margin-top: 2.5rem;
  }

  .faq-item summary {
    padding-top: 1.35rem;
    padding-bottom: 1.35rem;

    font-size: 1rem;
  }


  /* CTA */

  .home-cta .home-wrap {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }


  /* Explore */

  .explore-grid {
    grid-template-columns: 1fr;
  }

  .explore-card {
    min-height: 0;
    padding: 1.5rem;
  }

}


/* =========================================================
   24. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .example-card,
  .review-card,
  .home-service-card,
  .included-card,
  .pricing-card,
  .process-preview,
  .explore-card,
  .explore-card > span {
    transition: none;
  }

  .pricing-card-business,
  .pricing-card-business .tag-blue-solid,
  .process-preview-grid::before,
  .process-preview-icon::before {
    animation: none;
  }

  .pricing-card-business {
    background-position:
      0 0,
      50% 50%;
  }

  .pricing-card-business .tag-blue-solid,
  .process-preview-grid::before,
  .process-preview-icon::before {
    background-position: 50% 50%;
  }

  .example-card:hover,
  .review-card:hover,
  .home-service-card:hover,
  .included-card:hover,
  .pricing-card:hover,
  .process-preview:hover,
  .explore-card:hover,
  .explore-card:hover > span {
    transform: none;
  }

}