/* ==========================================================================
   Project Sayogi — Landing page
   Custom styles layered on top of Bootstrap 5.
   Sections follow the same order as the markup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Devanagari numerals
   Poppins claims U+0966-096F but draws them as Latin digits, so "१ साइट"
   renders as "1 साइट". This face is scoped to exactly that range and sits
   ahead of Poppins, so only the numerals are taken over — every other
   character, Devanagari or Latin, still renders in Poppins.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Devanagari Numerals";
  src: url("../fonts/noto-sans-devanagari.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0966-096F;
}

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand: #1ab189;
  --brand-deep: #0b4b3a;
  --brand-tint: rgba(26, 177, 137, 0.1);
  --brand-tint-soft: rgba(26, 177, 137, 0.08);
  --brand-tint-card: rgba(26, 177, 137, 0.2);
  --brand-tint-faint: rgba(26, 177, 137, 0.05);

  --blue: #0064a7;
  --secondary: #186b97;
  --secondary-tint: rgba(24, 107, 151, 0.1);
  --blue-deep: #073b5f;
  --blue-tint: rgba(0, 100, 167, 0.1);
  --blue-tint-card: rgba(0, 100, 167, 0.2);

  /* Foot of the "Everything Your Business Needs" gradient. */
  --needs-bottom: #082331;

  --navy-top: #0b466e;
  --navy-bottom: #002741;
  --footer-bg: #102d41;

  /* Text */
  --heading: #1a1a1a;
  --text: #222222;
  --muted: #555555;
  --text-invert: #ffffff;
  --copyright: #cccccc;

  /* Lines & surfaces */
  --surface: #ffffff;
  --line-soft: rgba(227, 227, 227, 0.8);
  --line-soft-solid: #e3e3e3;
  --page-tint: #fafafa;
  --line-header: rgba(0, 0, 0, 0.16);
  --line-section: rgba(167, 176, 170, 0.5);
  --cream: rgba(255, 251, 235, 0.5);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.22);
  --glow-feature: drop-shadow(0 0 10px rgba(26, 177, 137, 0.25));
  --glow-feature-hover: drop-shadow(0 6px 18px rgba(26, 177, 137, 0.45));

  /* Card lift on hover — same feel as the Hayabusa project. */
  --lift: translateY(-4px);
  --lift-transition: transform 0.25s ease, box-shadow 0.25s ease;

  /* Type */
  --font-body: "Devanagari Numerals", "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-store: "Product Sans", "Poppins", system-ui, sans-serif;

  /* Layout */
  --page-max: 1440px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

.text-brand {
  color: var(--brand);
}

/* Clipped image frame — reproduces Figma's "fill" crops without distortion. */
.img-frame {
  display: block;
  position: relative;
  overflow: hidden;
  flex: none;
}

.img-frame > img {
  position: absolute;
  display: block;
  max-width: none;
}

/* Shared page heading — the centred title + lead pair that opens the
   Pricing and Tutorials pages. Both use the identical block from the design,
   so the rules live here once and the page-level classes alias them. */
.page-head,
.pricing__head {
  max-width: 841px; /* 801px of content + 2 × 20px gutter */
  margin: 0 auto;
  text-align: center;
}

.page-head__title,
.pricing__title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: normal;
  color: var(--text);
}

.page-head__lead,
.pricing__lead {
  max-width: 796px;
  margin: 12px auto 0;
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.0514; /* the design's literal value */
  letter-spacing: 0.2px;
  color: var(--muted);
}

/* Shared section heading — the centred title + lead that opens every band of
   the home page. Inter ExtraBold over Poppins Light, straight from the design. */
.sec-head {
  max-width: 930px; /* 890px of content + 2 × 20px gutter */
  margin: 0 auto;
  text-align: center;
}

.sec-head--wide {
  max-width: 1032px;
}

.sec-head__title {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1.1;
  color: #000;
}

.sec-head__lead {
  margin-top: 22px;
  font-weight: 300;
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.5834; /* the design's 38px over 24px */
  color: var(--muted);
}

.sec-head--invert .sec-head__title,
.sec-head--invert .sec-head__lead {
  color: var(--text-invert);
}

/* Scroll-reveal helper.
   Mirrors the convention used in the Hayabusa project so both codebases share
   one vocabulary: `.reveal` + `--reveal-from`, flipped on with `.is-in`.
   The `.reveal` class is applied by script.js, never in the markup, so without
   JS nothing is ever left stuck at opacity 0. */
/* Driven by a keyframe rather than a transition. A transition only animates if
   the hidden state was painted first, which is not guaranteed for elements
   already on screen (the hero) — those would snap in instead of easing. An
   animation always plays from its first keyframe, whenever `.is-in` lands. */
.reveal {
  opacity: 0;
}

.reveal.is-in {
  animation: reveal-in 0.6s ease var(--reveal-delay, 0s) both;
}

.reveal--right { --reveal-from: translateX(36px); }
.reveal--left  { --reveal-from: translateX(-36px); }
.reveal--fade  { --reveal-from: none; }

/* Comes in from the left, carries on until it meets the copy beside it, then
   rebounds and settles into place. Longer than the plain reveal, so its group
   in script.js declares a matching duration. */
.reveal--bump.is-in {
  animation: reveal-bump 0.9s var(--reveal-delay, 0s) both;
}

@keyframes reveal-bump {
  0% {
    opacity: 0;
    transform: translateX(var(--bump-from, -120px));
    /* accelerates on the way in, so the meeting reads as a knock */
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  45% {
    opacity: 1;
    transform: translateX(var(--bump-over, 48px));
    animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
  }

  70% {
    transform: translateX(calc(var(--bump-over, 48px) * -0.3));
  }

  88% {
    transform: translateX(calc(var(--bump-over, 48px) * 0.1));
  }

  100% {
    transform: none;
  }
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: var(--reveal-from, translateY(24px));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
  }

  .reveal.is-in {
    animation: none;
  }
}

/* Pixel-accurate composition wrapper. JS scales `.stage` to fit its parent. */
.js-stage {
  position: relative;
}

.js-stage > .stage {
  position: relative;
  transform-origin: top left;
  will-change: transform;
}

.js-stage.is-unstaged > .stage {
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn-sayogi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--brand);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  font-family: var(--font-ui);
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    transform 0.2s ease;
}

.btn-sayogi:hover {
  background: #169976;
  color: #fff;
}

.btn-sayogi--sm {
  min-width: 153px;
  height: 40px;
  padding: 0 22px;
  font-size: 15px;
}

.btn-sayogi__arrow {
  width: 12px;
  height: 24px;
}

.btn-sayogi--lg {
  width: 211px;
  height: 50px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
}

.btn-sayogi--shadow {
  box-shadow: var(--shadow-btn);
}

.btn-sayogi--outline {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: none;
}

.btn-sayogi--outline:hover {
  background: var(--brand);
  color: #fff;
}

/* Sits on the dark band beside the section heading. The outbound arrow
   flags that the button leaves the page for the full features list. */
.btn-sayogi--view-all {
  min-width: 131px;
  height: 45px;
  padding: 0 16px;
  gap: 6px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 20px);
  text-transform: capitalize;
}

.btn-sayogi__leave {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.btn-sayogi--view-all:hover .btn-sayogi__leave {
  transform: translate(2px, -2px);
}

/* "Watch Demo" — the outline button carries a play glyph that flips to white
   with the rest of the label on hover. */
.btn-sayogi--play {
  gap: 10px;
}

.btn-sayogi__play {
  width: 24px;
  height: 24px;
}

.btn-sayogi--outline:hover .btn-sayogi__play {
  filter: brightness(0) invert(1);
}

.btn-sayogi--pill {
  width: 184px;
  height: 53px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 25px;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 86px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-header);
}

.site-header__inner {
  max-width: 1357px; /* 1317px of content + 2 × 20px gutter */
  height: 86px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.site-header__brand {
  padding: 0;
  margin: 0;
  flex: none;
}

.site-header__logo {
  width: 78px;
  height: 66px;
}

.site-header__logo > img {
  left: -6.9%;
  top: -8.29%;
  width: 114.48%;
  height: 112.48%;
}

.site-header__collapse {
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  margin-left: 240px;
}

.site-nav {
  flex-direction: row;
  align-items: center;
  gap: 40px;
}

.site-nav__link {
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-nav__link:hover,
.site-nav__link.is-active {
  color: var(--brand);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-switch__label {
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  line-height: normal;
  cursor: pointer;
}

.lang-switch__label--np {
  font-family: "Roboto", var(--font-body);
  font-weight: 500;
  font-size: 20px;
}

.lang-switch__label--en {
  font-weight: 500;
  font-size: 17px;
}

/* Real switch control — geometry taken from the design's toggle:
   50 x 22 white pill, 2px brand border, 19 x 20 brand knob. */
.lang-switch__toggle {
  position: relative;
  flex: none;
  width: 50px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--brand);
  border-radius: 11px;
  background: var(--surface);
  cursor: pointer;
}

.lang-switch__toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lang-switch__knob {
  position: absolute;
  left: 0;
  top: 50%;
  width: 19px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}

/* 46px of track minus the 19px knob = 27px of travel. */
.lang-switch__toggle[aria-checked="true"] .lang-switch__knob {
  transform: translate(27px, -50%);
}

.site-header__toggler {
  border: 0;
  margin-left: auto;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--surface);
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  left: calc(50% - 25px);
  top: -47px; /* 53px top on a 756x419 box grown by -23.87% vertically */
  width: 956px;
  height: 619px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  min-height: 647px;
  margin: 0 auto;
  padding: 93px 70px 60px;
}

.hero__content {
  position: relative;
  z-index: 3;
  max-width: 650px;
}

.hero__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(34px, 3.9vw, 55px);
  line-height: 1.273;
  letter-spacing: 1.5px;
  color: var(--heading);
}

.hero__lead {
  margin-top: 30px;
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 37px;
}

.hero__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 37px;
}

.hero__perk {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: 16px;
  color: var(--muted);
}

.hero__perk img {
  width: 18px;
  height: 18px;
}

.hero__proof {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 38px;
}

.avatar-stack {
  position: relative;
  flex: none;
  width: 141px;
  height: 45px;
}

.avatar-stack__item {
  position: absolute;
  top: 0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.avatar-stack__item:nth-child(1) { left: 0; }
.avatar-stack__item:nth-child(2) { left: 33px; }
.avatar-stack__item:nth-child(3) { left: 63px; }
.avatar-stack__item:nth-child(4) { left: 96px; }

.hero__proof-text {
  width: 271px;
  max-width: 100%;
}

.hero__proof-stars {
  display: block;
  width: 166px;
  height: 26px;
  margin-bottom: 10px;
}

.hero__proof-text p {
  font-size: 14px;
  line-height: normal;
  color: #000;
}

/* --- Hero illustration (absolute composition, 751 x 647) ---
   Anchored to the section's right edge, not the centred 1440 canvas, so the
   artwork keeps hugging the viewport edge on displays wider than the design. */
.hero__visual {
  position: absolute;
  top: 0;
  right: 0;
  width: 751px;
  z-index: 2;
  pointer-events: none;
}

.hero__backdrop {
  position: absolute;
  left: 211px;
  top: 18px;
  width: 540px;
  height: 629px;
}

.hero__worker {
  position: absolute;
  left: 91px;
  top: 75px;
  width: 450px;
  height: 597px;
  object-fit: cover;
}

/* Floating info cards */
.float-card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}

.float-card--grow {
  left: 456px;
  top: 106px;
  width: 171px;
  height: 102px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 17px;
  text-align: center;
}

.float-card__icon {
  width: 26px;
  height: 29px;
}

.float-card--grow p {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: normal;
  color: #000;
}

.float-card--income {
  left: 554px;
  top: 236px;
  width: 166px;
  height: 132px;
  background: rgba(255, 255, 255, 0.8);
  border-color: #e3e3e3;
  overflow: hidden;
}

.float-card__income-head {
  position: absolute;
  left: 9px;
  top: 12px;
  width: 99px;
}

.float-card__income-label {
  font-weight: 500;
  font-size: 12px;
  line-height: normal;
  color: #000;
}

.float-card__income-value {
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  color: #000;
}

.float-card__income-glow {
  position: absolute;
  left: 99.68px;
  top: 104.76px;
  width: 361.444px;
  height: 226.214px;
  transform: translate(-50%, -50%) rotate(-15deg);
}

.float-card__income-chart {
  position: absolute;
  left: 9px;
  top: 40px;
  width: 146px;
  height: 66px;
}

.float-card--review {
  left: 505px;
  top: 472px;
  width: 204px;
  height: 138px;
  padding: 11px 19px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.float-card__review-head {
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: 500;
  font-size: 12px;
  color: #000;
}

.float-card__review-head img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.float-card__review-text {
  font-size: 12px;
  line-height: normal;
  color: #000;
}

.float-card__review-stars {
  width: 165px;
  height: 14px;
}

/* Decorative leaves */
.leaf {
  position: absolute;
}

.leaf--1 { left: 0;     top: 547px; width: 31px;    height: 23px; }
.leaf--2 { left: 185px; top: 267px; width: 24.845px; height: 16.786px; transform: rotate(-3.99deg); }
.leaf--3 { left: 66px;  top: 63px;  width: 23px;    height: 31px;  transform: rotate(-12.38deg); }
.leaf--4 { left: 636px; top: 382px; width: 32px;    height: 34px; }
.leaf--5 { left: 503px; top: 236px; width: 16px;    height: 21px; }
.leaf--6 { left: 608px; top: 96px;  width: 31.077px; height: 31.5px; }

/* --------------------------------------------------------------------------
   6. Partner strip
   -------------------------------------------------------------------------- */
.partners {
  min-height: 260px;
  padding: 39px 20px 0;
  background: var(--brand-tint);
  overflow: hidden;
  text-align: center;
}

.partners__caption {
  font-size: clamp(16px, 1.6vw, 22px);
  line-height: normal;
  color: #000;
}

/* Continuous logo marquee.
   The track holds two identical runs of the logo set, so shifting it left by
   exactly one run (half the track, minus half a gap) lands on an identical
   frame and the loop is invisible. */
.partners__marquee {
  --marquee-gap: 60px;
  --marquee-duration: 35s;
  max-width: 1389px;
  margin: 30px auto 0;
  overflow: hidden;
  /* Softens the two cut edges so logos fade instead of snapping off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.partners__track {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
  width: max-content;
  will-change: transform;
  animation: partners-scroll var(--marquee-duration) linear infinite;
}

.partners__marquee:hover .partners__track,
.partners__marquee:focus-within .partners__track {
  animation-play-state: paused;
}

@keyframes partners-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - var(--marquee-gap) / 2), 0, 0);
  }
}

.partners__logo {
  width: 100px;
  height: 100px;
  flex: none;
}

/* --------------------------------------------------------------------------
   7. Everything Your Business Needs
   The dark band that opens the feature story. Three equal cards sit on a
   vertical brand gradient, with the "View All" escape hatch pinned right.
   -------------------------------------------------------------------------- */
.needs {
  padding: 60px 20px;
  background: linear-gradient(180deg, var(--secondary) 0%, var(--needs-bottom) 100%);
  overflow: hidden;
}

.needs__inner {
  max-width: 1293px;
  margin: 0 auto;
}

/* Grid rather than flex: the heading stays optically centred on the band while
   the button leaves the flow to the right edge, exactly as in the design. */
.needs__head {
  display: grid;
  justify-items: center;
  row-gap: 24px;
}

.needs__grid {
  margin-top: 40px;
}

.needs-card {
  height: 100%;
  padding: 34px 24px 28px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 0 10px rgba(0, 100, 167, 0.2));
  transition: var(--lift-transition);
}

.needs-card:hover {
  transform: var(--lift);
  filter: drop-shadow(0 8px 20px rgba(0, 100, 167, 0.35));
}

.needs-card__icon {
  display: block;
  width: 59px;
  height: 59px;
}

.needs-card__title {
  margin: 20px 0 0;
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: normal;
  color: var(--blue);
}

.needs-card__text {
  margin-top: 10px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: normal;
  color: var(--muted);
}

@media (min-width: 992px) {
  .needs__head {
    justify-items: end;
  }

  /* Only the button takes the right edge; the heading stays centred. */
  .needs__head > .sec-head {
    justify-self: center;
  }
}

/* --------------------------------------------------------------------------
   8. Complete solution on web & mobile
   -------------------------------------------------------------------------- */
.web-mobile {
  padding: 77px 20px 60px;
  background: var(--surface);
  overflow: hidden;
}

.web-mobile__inner {
  max-width: var(--page-max);
  margin: 0 auto;
}

.web-mobile__body {
  margin-top: 56px;
}

/* Checklist — rows separated by hairlines, which the design draws as
   full-width vectors between each pair. */
.check-list {
  max-width: 569px;
  margin: 0 auto;
}

.check-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(18px, 2vw, 28px);
  line-height: normal;
  color: #000;
}

.check-list__item + .check-list__item {
  margin-top: 21px;
  padding-top: 21px;
  border-top: 1px solid var(--line-soft-solid);
}

.check-list__item img {
  flex: none;
  width: 35px;
  height: 35px;
}

/* Device composition, 570 x 434 in design space. Both source renders carry a
   wide transparent margin — the laptop's screen only starts 34% into its own
   file — so each image is sized well past the stage and pulled back by
   negative offsets. That places the artwork itself, not its padding, where
   the layout wants it: the laptop reads at its true size, and the phone sits
   in front of the screen's left edge rather than merely beside it. The stage
   scales all the way down, so the pair stays joined at every width. */
.web-mobile__devices {
  margin: 40px auto 0;
  max-width: 570px;
}

.web-mobile__laptop,
.web-mobile__phone {
  position: absolute;
  display: block;
  max-width: none;
}

/* Screen spans 148 - 568 on the stage; the deck flares out to x 0, so it
   still shows to the left of the phone. */
.web-mobile__laptop {
  left: -163px;
  top: -115px;
  width: 910px;
  height: 682px;
}

/* Handset spans 39 - 204, covering 55px of the screen's left edge and
   standing a little lower than the deck. Painted after the laptop, so it
   reads as being in front. */
.web-mobile__phone {
  left: 29px;
  top: 75px;
  width: 189px;
  height: 371px;
}

/* --------------------------------------------------------------------------
   9. Why Project Sayogi
   Four cards orbit the site render and are joined to it by the design's
   connector curves. The whole composition is one 1440 x 430 stage, scaled to
   fit; under 992px it unstacks into an ordinary grid (see the unstaged rules).
   -------------------------------------------------------------------------- */
.why {
  padding: 60px 20px 55px;
  background: var(--brand-tint-faint);
  border: 1px solid rgba(167, 176, 170, 0.2);
  overflow: hidden;
}

.why__inner {
  max-width: var(--page-max);
  margin: 0 auto;
}

.why__composition {
  margin-top: 67px;
}

.why__building {
  position: absolute;
  left: 50%;
  top: 26px;
  width: 500px;
  height: 402px;
  transform: translateX(calc(-50% - 5px));
  object-fit: cover;
}

.why__link {
  position: absolute;
  display: block;
  max-width: none;
}

.why__link--tl  { left: 430px; top: 55px;  width: 131px; height: 82px; }
.why__link--bl  { left: 238px; top: 123px; width: 226px; height: 114px; }
.why__link--br  { left: 964px; top: 123px; width: 226px; height: 119px; transform: scaleX(-1); }
.why__link--bl2 { left: 464px; top: 328px; width: 72px;  height: 49px; }
.why__link--br2 { left: 892px; top: 328px; width: 72px;  height: 49px; transform: scaleX(-1); }

.why-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 345px;
  min-height: 123px;
  padding: 0 14px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 4px rgba(18, 105, 155, 0.25);
  transition: var(--lift-transition);
}

.why-card:hover {
  transform: var(--lift);
  box-shadow: 0 12px 22px rgba(18, 105, 155, 0.3);
}

.why-card--tl { left: 86px;   top: 1px; }
.why-card--tr { left: 1008px; top: 1px; }
.why-card--bl { left: 120px;  top: 306px; }
.why-card--br { left: 965px;  top: 293px; }

.why-card__icon {
  flex: none;
  width: 70px;
  height: 70px;
}

.why-card__body {
  width: 245px;
}

.why-card__title {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: var(--secondary);
}

.why-card__text {
  margin-top: 2px;
  font-size: 12px;
  line-height: normal;
  color: var(--muted);
}

/* Unstaged: the render leads, the four cards follow as a plain grid. */
.why__composition.is-unstaged {
  margin-top: 40px;
}

.why__composition.is-unstaged .stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.why__composition.is-unstaged .why__link {
  display: none;
}

.why__composition.is-unstaged .why__building {
  position: static;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto 8px;
  transform: none;
}

.why__composition.is-unstaged .why-card {
  position: static;
  width: auto;
  padding: 16px 14px;
}

@media (max-width: 575.98px) {
  .why__composition.is-unstaged .stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   10. Our Blogs
   -------------------------------------------------------------------------- */
.blogs {
  position: relative;
  padding: 86px 20px 90px;
  background: var(--surface);
  overflow: hidden;
}

/* Soft brand arcs bleeding in from either edge. */
.blogs__glow {
  position: absolute;
  pointer-events: none;
}

.blogs__glow--right { right: -194px; top: -74px;  width: 272px; }
.blogs__glow--left  { left: -193px;  top: 427px;  width: 251px; }

.blogs__inner {
  position: relative;
  max-width: 1268px;
  margin: 0 auto;
}

.blogs__grid {
  margin-top: 60px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  transition: var(--lift-transition);
}

.blog-card:hover {
  transform: var(--lift);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}

.blog-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 364 / 231;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.blog-card:hover .blog-card__media img {
  transform: scale(1.04);
}

/* The design shows this pill on the third card only — it is the hover state. */
.blog-card__open {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  font-weight: 500;
  font-size: 14px;
  color: var(--heading);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 6px));
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.blog-card:hover .blog-card__open,
.blog-card__media:focus-visible .blog-card__open {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.blog-card__arrow {
  font-size: 16px;
  line-height: 1;
}

.blog-card__body {
  flex: 1 1 auto;
  padding: 18px 6px 0;
}

.blog-card__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.4;
  color: var(--heading);
}

.blog-card__excerpt {
  margin-top: 10px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  color: var(--muted);
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 16px 6px 0;
  border-top: 1px dashed var(--line-soft-solid);
}

.blog-card__avatar {
  flex: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
}

.blog-card__author {
  flex: 1 1 auto;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--heading);
}

.blog-card__read {
  flex: none;
  padding: 5px 10px;
  border-radius: var(--radius-xs);
  background: var(--page-tint);
  font-size: clamp(12px, 1.1vw, 15px);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   11. Testimonials — "Trusted By Teams Nationwide"
   A continuous marquee, built the same way as the partner strip: the track
   holds two identical runs of the cards, so shifting it left by exactly one
   run (half the track, minus half a gap) lands on an identical frame and the
   loop never shows a seam.
   -------------------------------------------------------------------------- */
.testimonials {
  padding: 79px 0 90px;
  background: var(--brand-tint);
  overflow: hidden;
}

.testimonials__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 20px;
}

.testimonials__marquee {
  --marquee-gap: 38px;
  --marquee-duration: 45s;
  /* 40px of room for the avatars that overhang each card's top edge, plus
     the headroom the hover lift and its shadow need at the bottom. */
  padding: 90px 0 24px;
  overflow: hidden;
  /* Softens the two cut edges so cards fade instead of snapping off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.testimonials__track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  will-change: transform;
  animation: testimonials-scroll var(--marquee-duration) linear infinite;
}

/* Holds the run still while a card is being read or tabbed through. */
.testimonials__marquee:hover .testimonials__track,
.testimonials__marquee:focus-within .testimonials__track {
  animation-play-state: paused;
}

@keyframes testimonials-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-50% - var(--marquee-gap) / 2), 0, 0);
  }
}

.quote-card {
  position: relative;
  flex: none;
  width: 444px;
  max-width: calc(100vw - 40px);
  min-height: 248px;
  display: flex;
  flex-direction: column;
  padding: 60px 30px 24px;
  border-radius: 22px;
  background: var(--page-tint);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  transition: var(--lift-transition);
}

.quote-card:hover {
  transform: var(--lift);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.quote-card__avatar {
  position: absolute;
  left: 39px;
  top: -40px;
  width: 81px;
  height: 81px;
  border-radius: 50%;
  object-fit: cover;
}

.quote-card__text {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: normal;
  text-align: justify;
  color: var(--muted);
}

.quote-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft-solid);
}

.quote-card__name {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  color: var(--heading);
}

.quote-card__role {
  display: block;
  font-size: 12px;
  line-height: normal;
  color: var(--muted);
}

/* The exported glyph runs empty-star-first, so it is mirrored to put the
   filled stars on the left — the same flip the design applies. */
.quote-card__stars {
  flex: none;
  width: 92px;
  height: auto;
  transform: scaleX(-1);
}

@media (max-width: 575.98px) {
  .quote-card {
    padding: 56px 20px 20px;
  }

  .quote-card__avatar {
    left: 20px;
  }
}
/* --------------------------------------------------------------------------
   12. FAQ
   -------------------------------------------------------------------------- */
.faq {
  min-height: 644px;
  padding: 80px 0;
  background: var(--surface);
  border: 1px solid rgba(167, 176, 170, 0.3);
  border-bottom: 0;
}

.faq__inner {
  display: flex;
  align-items: flex-start;
  gap: 84px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 61px 0 74px;
}

.faq__intro {
  flex: none;
  width: 571px;
}

.faq__title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1.3;
  color: #000;
}

.faq__lead {
  margin-top: 35px;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: normal;
  color: #000;
}

.faq__intro .btn-sayogi--pill {
  margin-top: 36px;
}

.faq__list {
  flex: none;
  width: 650px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  --bs-accordion-border-width: 0;
  --bs-accordion-bg: transparent;
  --bs-accordion-btn-bg: transparent;
}

/* Bootstrap accordion, restyled to match the Figma cards */
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}

.faq-item__button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 63px;
  padding: 9px 37px 9px 36px;
  background: transparent;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.faq-item__button::after {
  flex: none;
  width: 17px;
  height: 17px;
  margin-left: auto;
  background-size: 12px;
  background-position: center;
}

.faq-item__bar {
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 45px;
  background: var(--brand);
  transform: translateY(-50%);
}

.faq-item__icon {
  flex: none;
  width: 25px;
  height: 26.837px;
}

.faq-item__label {
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: normal;
  color: #000;
  text-align: left;
}

.faq-item__body {
  padding: 0 22px 20px 36px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   13. Download CTA
   -------------------------------------------------------------------------- */
.download {
  min-height: 349px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
  background: linear-gradient(180deg, var(--brand) 4.441%, var(--brand-deep) 100%);
  border: 1px solid rgba(167, 176, 170, 0.3);
  text-align: center;
}

.download__inner {
  max-width: 974px;
}

.download__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(30px, 3.9vw, 55px);
  line-height: 1;
  color: var(--text-invert);
}

.download__lead {
  margin-top: 22px;
  font-weight: 500;
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: normal;
  color: var(--text-invert);
}

/* Store download buttons — shared by the CTA (light) and footer (dark) */
.store-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 43px;
}

.store-buttons--stacked {
  flex-direction: column;
  align-items: flex-start;
  margin-top: 0;
}

.store-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.store-btn:hover {
  transform: translateY(-2px);
}

.store-btn--light {
  width: 130px;
  height: 45px;
  padding-left: 7px;
  background: var(--surface);
  border: 1px solid rgba(0, 0, 0, 0.4);
  color: #000;
}

.store-btn--dark {
  width: 151px;
  height: 40px;
  padding-left: 11px;
  background: #000;
  border: 1px solid #a6a6a6;
  color: var(--text-invert);
}

.store-btn__icon {
  flex: none;
  height: 24px;
}

.store-btn__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.store-btn__kicker {
  font-family: var(--font-store);
  font-size: 10px;
  line-height: normal;
  text-transform: uppercase;
}

.store-btn__kicker--apple {
  font-family: var(--font-ui);
  font-size: 9px;
  line-height: 9px;
  text-transform: none;
}

.store-btn__wordmark {
  width: 74px;
  height: 15px;
  transform: scaleY(-1); /* the exported asset is flipped, as it is in Figma */
}

.store-btn__name {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.47px;
}

.store-btn--light .store-btn__content {
  gap: 0;
}

.store-btn--light .store-btn__kicker--apple + .store-btn__name {
  margin-top: 1px;
}

/* ---- Framed variant: a rounded card inset from the page edges, with the
   phone mockups bleeding past its top and bottom (Tutorials page) ---- */
.download--framed {
  width: 1328px;
  max-width: calc(100% - 40px);
  margin: 0 auto 89px;
  padding: 0 20px;
  border-radius: 40px;
  overflow: hidden;
}

.download__layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 106px;
}

.download--framed .download__inner {
  max-width: 709px;
}

.download--framed .download__title {
  font-size: clamp(24px, 2.5vw, 36px);
}

.download--framed .download__lead {
  margin-top: 6px;
  font-size: clamp(16px, 1.53vw, 22px);
}

.download--framed .store-buttons {
  margin-top: 24px;
}

/* The mockup group is 615px tall inside a 349px band, so it is pulled in by
   133px top and bottom and clipped by the card — exactly as in the design. */
.download__phones {
  flex: none;
  display: flex;
  align-items: center;
  gap: 35px;
  margin: -133px 0;
}

.download__phone {
  display: block;
  width: 144px;
  height: auto;
}

.download__phone--lead {
  width: 143px;
}

.download__phone-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Home variant: 1347 x 400 card, copy left and mockups right ---- */
.download--home {
  width: 1347px;
  min-height: 400px;
  margin: 0 auto 80px;
  border: 0;
  padding: 0 0 0 60px;
  border-radius: 22px;
  text-align: left;
}

.download--home .download__layout {
  justify-content: space-between;
  gap: 33px;
  width: 100%;
}

.download--home .download__inner {
  max-width: 709px;
}

.download--home .download__title {
  font-size: clamp(24px, 2.8vw, 40px);
}

.download--home .download__lead {
  margin-top: 12px;
  font-weight: 400;
  font-size: clamp(16px, 1.53vw, 22px);
}

.download--home .store-buttons {
  justify-content: flex-start;
  gap: 14px;
  margin-top: 31px;
}

.download--home .store-btn--light {
  width: 154px;
  height: 51px;
  padding-left: 22px;
}

/* 840px of mockups inside a 400px card, pulled in equally top and bottom. */
.download--home .download__phones {
  gap: 35px;
  margin: -220px 0;
}

.download--home .download__phone--lead {
  width: 163px;
}

.download--home .download__phone {
  width: 196px;
}

.download--home .download__phone-stack {
  gap: 27px;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  min-height: 420px;
  padding: 86px 0 40px;
  background: var(--footer-bg);
  color: var(--text-invert);
  overflow: hidden;
}

/* Kathmandu skyline watermark, sitting on the footer's bottom edge. The
   artwork is white with the drawing carried in its alpha channel, so the whole
   thing dims from one `opacity` instead of needing a second colour. It
   repeats horizontally so ultrawide screens stay covered, and its height
   tracks the viewport so the buildings keep a sane scale on phones. */
.site-footer::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(120px, 22vw, 306px);
  background: url("../images/footer-skyline.png") repeat-x center bottom;
  background-size: auto 100%;
  opacity: 0.12;
  pointer-events: none;
}

/* Lifted above the watermark. */
.site-footer__inner {
  position: relative;
  max-width: 1280px; /* 1240px of content + 2 × 20px gutter */
  margin: 0 auto;
  padding: 0 20px;
}

.site-footer__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.site-footer__brand {
  flex: none;
  width: 240px;
}

.site-footer__tagline {
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--copyright);
}

.site-footer__logo {
  width: 136px;
  height: 113px;
  margin-bottom: 12px;
}

.site-footer__logo > img {
  left: 0;
  top: -0.23%;
  width: 83.82%;
  height: 84.2%;
}

.social-list {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-list__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #fff;
  border-radius: 20px;
  transition: background-color 0.2s ease;
}

.social-list__link--bare {
  border: 0;
}

.social-list__link:hover {
  background: rgba(255, 255, 255, 0.12);
}

.footer-col {
  flex: none;
}

.footer-col--links    { width: 130px; }
.footer-col--contact  { width: 250px; }
.footer-col--download { width: 148px; }

.footer-col__title {
  position: relative;
  margin: 0 0 27px;
  padding-bottom: 8px;
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  color: var(--text-invert);
}

.footer-col__rule {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 93px;
  background: currentColor;
}

.footer-col__rule--sm {
  width: 66px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: -7px;
  font-size: 16px;
  line-height: normal;
}

.footer-links a:hover,
.contact-list a:hover {
  color: var(--brand);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
  line-height: normal;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: 14px;
}

.contact-list img {
  flex: none;
}

.site-footer__bottom {
  margin-top: 40px;
  text-align: center;
}

.site-footer__divider {
  display: block;
  width: 100%;
  height: 1px;
}

.site-footer__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 22px;
  font-size: 14px;
  line-height: normal;
  color: var(--copyright);
}

/* --------------------------------------------------------------------------
   15. Floating chat widget
   -------------------------------------------------------------------------- */
.chat-widget {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 90;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  transition: transform 0.2s ease;
}

.chat-widget:hover {
  transform: scale(1.06);
}

.chat-widget img {
  width: 74px;
  height: 74px;
}

/* ==========================================================================
   16. About page
   ========================================================================== */

/* Intro band — hero, story and stats share one white band so the mint wave
   can sit behind all three. */
.about-intro {
  position: relative;
  padding-bottom: 72px;
  background: var(--surface);
  overflow: hidden;
}

/* The design's wave. Figma places it at its natural 1670 x 556, mirrored on X
   and turned -10.63deg — that tilt is why the wash thins out into the top-right
   corner and opens the white lobe there. Everything is a share of the band's
   own width so it holds at any viewport; the band clips the overflow.
   max-width has to be released or Bootstrap's img reset clamps the 116% width
   back to 100% and slides the whole curve out of place.
   (Recovered by fitting the curve traced off the Figma render: 1.3px RMS.) */
.about-intro__shape {
  position: absolute;
  left: -15%;
  top: 0;
  z-index: 0;
  width: 115.97%;
  height: auto;
  aspect-ratio: 1670 / 556;
  max-width: none;
  /* Applied right to left: mirror, tilt, then drop into place. The tilt is
     eased off the design's -10.63deg and the drop deepened to match, which
     lifts the left end of the wash ~50px while leaving the right where the
     design puts it. */
  transform: translateY(-30.96%) rotate(-8.5deg) scaleX(-1);
  pointer-events: none;
}

.about-hero,
.about-story,
.about-stats {
  position: relative;
  z-index: 1;
}

/* --- Hero --- */
.about-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1236px; /* 1196px of content + 2 × 20px gutter */
  margin: 0 auto;
  padding: 60px 20px 0;
  text-align: center;
}

.about-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 297px;
  max-width: 100%;
  height: 28px;
  border: 1px solid var(--secondary);
  border-radius: var(--radius-lg);
  background: rgba(26, 106, 153, 0.05);
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.42px;
  color: var(--secondary);
  white-space: nowrap;
}

.about-hero__title {
  margin: 8px 0 0;
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.5;
  letter-spacing: 1.04px;
  color: var(--text);
}

.about-hero__lead {
  max-width: 1079px;
  margin-top: 16px;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.4px;
  color: var(--text);
}

/* --- Story — 669px of copy beside the 565x507 product shot --- */
.about-story {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 55px;
  max-width: 1329px; /* 1289px of content + 2 × 20px gutter */
  margin: 71px auto 0;
  padding: 0 20px;
}

.about-story__text {
  flex: 0 1 669px;
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: normal;
  letter-spacing: 0.48px;
  color: #000;
  text-align: justify;
}

/* Matches the blank line the design leaves between the two paragraphs. */
.about-story__text p + p {
  margin-top: 1.5em;
}

.about-story__media {
  flex: none;
  width: 565px;
  max-width: 100%;
  height: 507px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  /* The design lays the shot in at 90%, which lifts it off the white band. */
  opacity: 0.9;
}

/* --- Stats --- */
.about-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin: 71px auto 0;
  padding: 0 20px;
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 208px;
  height: 193px;
  padding-top: 27px;
  border-radius: var(--radius-md);
  background: rgba(26, 177, 137, 0.05);
  /* Inferred: the free MCP does not expose this effect, but Figma exports the
     208x193 card at 216x201 — an 8px bleed down and to the right. */
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: var(--lift-transition);
}

.stat-card:hover {
  transform: var(--lift);
  box-shadow: var(--shadow-card-hover);
}

.stat-card--projects {
  padding-top: 33px;
}

.stat-card--accent {
  background: var(--brand);
}

.stat-card__icon {
  display: block;
  margin-bottom: 12px;
}

.stat-card__value {
  font-weight: 600;
  font-size: 36px;
  line-height: 1;
  color: var(--brand);
}

.stat-card__label {
  margin-top: 5px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: #000;
}

.stat-card--accent .stat-card__value,
.stat-card--accent .stat-card__label {
  color: var(--text-invert);
}

/* --- Why choose --- */
.about-why {
  position: relative;
  padding: 85px 20px 131px;
  background: var(--surface);
  overflow: hidden;
}

/* The design's wave again, flipped on Y so the wash falls below the crest and
   settles into the band's bottom-right corner. Most of the shape hangs off the
   canvas and is clipped by the section; the sizes are in vw so the visible
   sliver keeps its proportions at every width. Fitted by least squares against
   the curve traced off the Figma render — at 1440 that is a 5700 x 2400 box at
   right -1385px, bottom -1586px (10px RMS). */
.about-why__shape {
  position: absolute;
  right: -96.18%;
  bottom: 0;
  z-index: 0;
  /* Every length is a share of the section's own width, so the visible sliver
     keeps its proportions at any viewport. The max-width cap has to be
     released — Bootstrap's img reset would otherwise clamp this to the section
     width and silently show a different stretch of the wave. */
  width: 395.83%;
  aspect-ratio: 5700 / 2400;
  max-width: none;
  /* Right to left: flip on Y, then drop the box below the band's bottom edge
     by 65.1% of its own height. */
  transform: translateY(65.1%) scaleY(-1);
  pointer-events: none;
}

.about-why__head,
.about-why__grid {
  position: relative;
  z-index: 1;
}

.about-why__head {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.about-why__title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 45px);
  line-height: 1.5;
  letter-spacing: 0.9px;
  color: var(--text);
}

.about-why__lead {
  margin-top: 12px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  letter-spacing: 0.36px;
  color: var(--muted);
}

.about-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 340px);
  justify-content: center;
  column-gap: 40px;
  row-gap: 45px;
  margin: 45px auto 0;
}

.about-feature {
  width: 340px;
  min-height: 240px;
  padding: 24.5px 19.5px;
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  background: var(--surface);
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.about-feature:hover {
  transform: var(--lift);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.14));
}

.about-feature__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.about-feature__badge--mint      { background: rgba(26, 177, 137, 0.2); }
.about-feature__badge--blue      { background: rgba(24, 107, 151, 0.2); }
.about-feature__badge--blue-soft { background: rgba(24, 107, 151, 0.1); }

.about-feature__title {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: 21px;
  line-height: 28px;
  letter-spacing: 0.63px;
  color: var(--text);
}

.about-feature__title--tight {
  line-height: 22px;
}

.about-feature__text {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: 0.45px;
  color: var(--muted);
  text-align: justify;
}

/* --- Closing CTA — full-bleed navy band --- */
.about-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 364px;
  padding: 68px 20px;
  /* Figma draws this a hair off vertical; 0deg runs bottom-to-top in CSS. */
  background: linear-gradient(0deg, var(--blue) 17.263%, #083f64 85.711%);
}

.about-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 891px;
  text-align: center;
}

.about-cta__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: normal;
  color: var(--text-invert);
}

.about-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 35px;
}

/* Square-cornered pair — the design gives neither button a radius. */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 232px;
  max-width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  color: var(--text-invert);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cta-btn:hover {
  transform: var(--lift);
  color: var(--text-invert);
}

.cta-btn--solid {
  background: var(--brand);
}

.cta-btn--solid:hover {
  background: #169976;
}

.cta-btn--ghost {
  border-color: var(--text-invert);
  background: transparent;
}

.cta-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   17. Contact page
   ========================================================================== */
.page-contact {
  background: var(--page-tint);
}

/* --- Banner --- */
.contact-hero {
  position: relative;
  height: 410px;
  background: var(--surface);
  border: 1px solid var(--line-soft-solid);
  overflow: hidden;
}

/* The banner art already carries its own fade and green corner, so it runs
   at full strength — no wash, no glow layered over it. It is anchored right
   so the two workers stay in frame as the viewport widens. */
.contact-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact-hero__photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Copy sits left, on the empty half of the photo, and lines up with the
   details/form container below it. */
.contact-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  max-width: 1191px; /* matches .contact-main, so the two left edges agree */
  margin: 0 auto;
  padding: 62px 20px 0; /* 148px from the page top, less the 86px header */
  text-align: left;
}

.contact-hero__title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: normal;
  color: var(--brand);
}

.contact-hero__lead {
  max-width: 520px; /* keeps the lead clear of the workers on the right */
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: normal;
  color: var(--text);
}

/* --- Details + form --- */
.contact-main {
  max-width: 1191px; /* 1151px of content + 2 × 20px gutter */
  margin: 0 auto;
  padding: 62px 20px 45px;
}

.contact-main__row {
  display: flex;
  align-items: center;
  gap: 100px;
}

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: none;
  width: 440px;
}

.contact-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex: none;
  width: 210px;
  height: 141px;
  padding: 0 12px;
  border: 1px solid rgba(227, 227, 227, 0.2);
  border-radius: var(--radius-md);
  background: var(--brand-tint-soft);
  box-shadow: 4px 4px 4px rgba(26, 177, 137, 0.1);
  text-align: center;
  transition: var(--lift-transition);
}

.contact-card:hover {
  transform: var(--lift);
  box-shadow: 4px 8px 16px rgba(26, 177, 137, 0.22);
}

.contact-card__icon {
  display: block;
}

/* The icon block and the label pair are one unit, 12px apart. */
.contact-card__title {
  font-weight: 600;
  font-size: 15px;
  line-height: normal;
  color: var(--text);
}

.contact-card__value {
  margin-top: 2px;
  font-size: 12px;
  line-height: normal;
  color: var(--muted);
}

.contact-card__value a:hover {
  color: var(--brand);
}

.contact-map {
  height: 219px;
  border: 2px solid rgba(227, 227, 227, 0.2);
  border-radius: var(--radius-md);
  background: var(--line-soft-solid);
  overflow: hidden;
}

.contact-map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Enquiry form --- */
.contact-form {
  flex: none;
  width: 611px;
  min-height: 541px;
  padding: 27px 22px 29px 19px;
  border: 1px solid rgba(167, 176, 170, 0.3);
  border-radius: 8px;
  background: var(--surface);
}

.contact-form__title {
  margin: 0 0 30px;
  font-weight: 600;
  font-size: clamp(22px, 2vw, 28px);
  line-height: normal;
  color: #000;
}

.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form__row {
  display: flex;
  gap: 20px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}

.contact-field__label {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: normal;
  color: var(--text);
}

.contact-field__input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line-soft-solid);
  border-radius: var(--radius-xs);
  background: var(--surface);
  font-family: inherit;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: normal;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-field__input::placeholder {
  color: var(--muted);
}

.contact-field__input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(26, 177, 137, 0.15);
}

.contact-field__input--area {
  height: 97px;
  padding-top: 12px;
  resize: vertical;
}

.contact-form__submit {
  width: 100%;
  height: 48px;
  /* The 20px column gap already supplies the spacing above the button. */
  border: 0;
  border-radius: 8px;
  background: var(--brand);
  font-family: inherit;
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--text-invert);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.contact-form__submit:hover {
  background: var(--brand-deep);
  transform: translateY(-2px);
}

/* --- WhatsApp call to action --- */
.whatsapp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 367px;
  max-width: 100%;
  height: 48px;
  margin: 45px auto 0;
  border-radius: 8px;
  /* Reads as secondary to the solid green Send Inquiry button: the fill is
     the brand at 20%, with the label and icon carrying the full colour. */
  background: var(--brand-tint-card);
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--brand);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.whatsapp-cta:hover {
  background: rgba(26, 177, 137, 0.28);
  color: var(--brand);
  transform: translateY(-2px);
}

/* ==========================================================================
   18. Pricing page
   ========================================================================== */
.page-pricing {
  background: var(--page-tint);
}

.pricing {
  padding: 64px 20px 65px;
}

/* `.pricing__head`, `.pricing__title` and `.pricing__lead` are styled with the
   shared page heading block in section 2. */

/* The framed panel the four plans sit inside. */
.pricing__table {
  display: flex;
  /* All four columns share one height, as they do in the design. */
  align-items: stretch;
  max-width: 1403px;
  margin: 98px auto 0;
  padding: 45px 0 6px;
  border: 2px solid rgba(167, 176, 170, 0.3);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.plan {
  --plan-gap: 25px;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  padding: 60px 20px 40px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: #000;
}

.plan--starter  { --plan-gap: 45px; }
.plan--business { --plan-gap: 65px; }

/* The featured plan is taller and breaks out above the row. */
/* Breaks out 45px above the row and stops 26px short of its bottom. */
.plan--pro {
  --plan-gap: 65px;
  margin: -47px 0 26px;
  padding: 15px 20px 34px;
  background: var(--blue);
  color: var(--text-invert);
  /* Lifted off the panel with a shadow under it, so the featured plan reads
     as raised rather than merely taller than its neighbours. z-index keeps
     the shadow over the two cards it sits between. */
  position: relative;
  z-index: 1;
  transform: translateY(-10px);
  box-shadow: 0 18px 40px rgba(0, 40, 70, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.plan--pro:hover {
  transform: translateY(-18px);
  box-shadow: 0 26px 54px rgba(0, 40, 70, 0.34);
}

.plan__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  height: 24px;
  margin-bottom: 20px;
  padding: 0 12px;
  border-radius: var(--radius-lg);
  background: var(--brand);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-invert);
  white-space: nowrap;
}

.plan__name {
  margin: 0;
  font-weight: 700;
  font-size: 26px;
  line-height: 35px;
  color: inherit;
}

.plan__desc {
  margin-top: 9px;
  font-weight: 300;
  font-size: 12px;
  line-height: 20px;
  text-align: justify;
  color: inherit;
}

.plan__body {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: var(--plan-gap);
}

.plan__offer {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plan__price {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-weight: 700;
  font-size: 26px;
  line-height: 25px;
  color: inherit;
}

.plan__period {
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: #a7b0aa;
}

.plan__note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1;
  color: #a7b0aa;
}

.plan--pro .plan__period,
.plan--pro .plan__note {
  color: var(--text-invert);
}

.plan__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 1px solid rgba(26, 177, 137, 0.8);
  border-radius: var(--radius-sm);
  background: var(--brand-tint-soft);
  font-weight: 600;
  font-size: 22px;
  color: var(--brand);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.plan__cta:hover {
  background: var(--brand);
  color: var(--text-invert);
  transform: translateY(-2px);
}

.plan--pro .plan__cta {
  border-color: var(--blue);
  background: var(--surface);
  color: #000;
}

.plan--pro .plan__cta:hover {
  background: var(--brand);
  color: var(--text-invert);
}

.plan__included-title {
  margin: 0 0 2px;
  font-weight: 600;
  font-size: 16px;
  line-height: 35px;
  color: inherit;
}

.plan__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  color: rgba(0, 0, 0, 0.6);
}

/* The tick is an exported asset, so the light variant swaps the file. */
.plan__features li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 9px;
  background: url("../images/plan-check.svg") no-repeat center / contain;
}

.plan--pro .plan__features li {
  color: var(--text-invert);
}

.plan--pro .plan__features li::before {
  background-image: url("../images/plan-check-light.svg");
}

/* ==========================================================================
   19. Tutorials page
   ========================================================================== */

/* Video lightbox — opened from the tutorial cards. */
.video-modal__content {
  position: relative;
  border: 0;
  border-radius: var(--radius-lg);
  background: #000;
  overflow: hidden;
}

.video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  z-index: 2;
  opacity: 0.9;
}

.video-modal__frame {
  border: 0;
}

@media (max-width: 767.98px) {
  .video-modal__close {
    top: -38px;
  }
}
.page-tutorials {
  background: var(--page-tint);
}

/* Plain heading band — no shape behind it, just the page tint running
   through, so the title and lead carry the top of the page on their own. */
.tutorials-hero {
  padding: 60px 20px 56px;
}

/* Tutorials is the one page head that runs in the brand green. */
.tutorials-hero .page-head__title {
  color: var(--brand);
}

/* The band above now supplies the gap the head used to. */
.tutorials {
  padding: 0 20px 118px;
}

.tutorials__inner {
  max-width: 1242px;
  margin: 0 auto;
}

/* The switch is right-aligned above the grid, 30px clear of it. */
.tutorials__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 30px;
  margin-top: 0;
}

.tutorials__switch {
  display: inline-flex;
  align-items: center;
  gap: 46px;
  min-width: 173px;
  height: 56px;
  padding: 0 0 0 24px;
  border: 0;
  border-radius: 30px;
  background: var(--brand);
  color: var(--text-invert);
  white-space: nowrap;
  transition: width 0.3s ease, background-color 0.3s ease, color 0.3s ease,
    transform 0.2s ease;
}

.tutorials__switch:hover {
  background: #169976;
  transform: translateY(-2px);
}

/* Mobile state: the tinted blue treatment, with the knob at the other end of
   the pill so the control still reads as a switch. */
.tutorials__switch[data-platform="mobile"] {
  flex-direction: row-reverse;
  padding: 0 24px 0 0;
  background: var(--blue-tint);
  color: var(--blue);
}

.tutorials__switch[data-platform="mobile"]:hover {
  background: rgba(0, 100, 167, 0.18);
}

/* The label and knob cross-fade while the pill resizes, so neither appears to
   jump from one end to the other mid-switch. */
.tutorials__switch-label,
.tutorials__switch-knob {
  transition: opacity 0.18s ease;
}

.tutorials__switch.is-switching .tutorials__switch-label,
.tutorials__switch.is-switching .tutorials__switch-knob {
  opacity: 0;
}

.tutorials__switch-label {
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
}

.tutorials__switch-knob {
  display: block;
  flex: none;
  width: 56px;
  height: 56px;
}

.tutorials__switch-knob img {
  display: block;
  width: 100%;
  height: 100%;
}

.tutorials__grid {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 35px;
  width: 100%;
}

/* The grid carries the active platform, so the filtering holds without JS. */
.tutorials__grid[data-platform="web"] .tutorial-col[data-platform="mobile"],
.tutorials__grid[data-platform="mobile"] .tutorial-col[data-platform="web"] {
  display: none;
}

/* The incoming set eases in rather than appearing all at once. The class is
   added by script.js on each switch, so nothing animates on first paint —
   that entrance belongs to the scroll-reveal module. The per-column delay is
   set there too, because the set on its way out still counts towards
   :nth-child and would throw a CSS-only stagger out of step. */
.tutorials__grid.is-switching .tutorial-col {
  animation: tutorial-swap-in 0.4s ease both;
}

@keyframes tutorial-swap-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The card sits white on the page and only picks up its tint under the
   pointer, so the thumbnails carry the colour and the hover does the talking. */
/* Flat by default so the grid reads as thumbnails on the page rather than as
   a row of cards — the tint only arrives on hover, the way a video grid
   behaves. No shadow and no lift: the background change carries the state. */
.tutorial-card {
  display: block;
  height: 100%;
  padding: 12px 11px;
  border-radius: var(--radius-lg);
  background: transparent;
  transition: background-color 0.2s ease;
}

/* Card as a whole-surface link (Features page), rather than one that opens
   the lightbox from its play button. */
.tutorial-card--link {
  color: inherit;
}

.tutorial-card:hover,
.tutorial-card:focus-within {
  background: var(--secondary-tint);
}

.tutorial-card__media {
  display: block;
  position: relative;
  aspect-ratio: 378 / 214;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tutorial-card__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Every card opens the shared video lightbox. */
.tutorial-card__play {
  position: absolute;
  top: 56%;
  left: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.tutorial-card__play:hover,
.tutorial-card__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.15);
}

.tutorial-card__play img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Two lines in the design; the min-height keeps shorter titles from
   shrinking their card out of step with the rest of the row. */
.tutorial-card__title {
  margin: 8px 0 0;
  min-height: 48px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #333;
}

/* ==========================================================================
   20. Features page
   Built from the shared vocabulary — .sec-head for the band headings,
   .btn-sayogi for the actions, the brand/secondary pair for the two-tone
   accents, --lift-transition for the card hover. Everything below is
   page-local and prefixed .feat-.

   The page reads top to bottom as: what it is (hero) → what is in it
   (modules) → how each part works (rows) → where each part runs
   (web/mobile) → why it survives on a site (field band) → get it (CTA).
   ========================================================================== */
.page-features {
  background: var(--surface);
}

/* --- Modules — the app's own menu, one tile per part ---------------------
   This is the page's opening band, so it carries the mint wash that fades to
   white before the first row, and enough top padding to clear the header. */
.feat-modules {
  padding: 88px 20px 96px;
  background: linear-gradient(180deg,
      rgba(26, 177, 137, 0.1) 0%,
      rgba(26, 177, 137, 0.03) 52%,
      var(--surface) 100%);
}

.feat-modules__inner {
  max-width: 1242px; /* 1202px of content + 2 × 20px gutter */
  margin: 0 auto;
}

.feat-modules__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.feat-tile {
  padding: 28px 26px 30px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.05);
  transition: var(--lift-transition);
}

.feat-tile:hover {
  transform: var(--lift);
  box-shadow: var(--shadow-card-hover);
}

/* The badge alternates mint and blue down the grid, the same two-tone the
   About page's feature cards use. */
.feat-tile__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--brand-tint-card);
}

.feat-tile--blue .feat-tile__badge {
  background: rgba(24, 107, 151, 0.2);
}

.feat-tile__title {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: 0.4px;
  color: var(--text);
}

/* The module's name as it actually reads in the app. */
.feat-tile__np {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  color: var(--brand);
}

.feat-tile--blue .feat-tile__np {
  color: var(--secondary);
}

.feat-tile__text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: var(--muted);
}

/* --- Deep dive — copy and product alternate sides ------------------------ */
.feat-deep {
  display: flex;
  flex-direction: column;
  gap: 104px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px 100px;
}

.feat-row {
  display: flex;
  align-items: center;
  gap: 78px;
  scroll-margin-top: 110px; /* clears the sticky header on an anchor jump */
}

.feat-row--reverse {
  flex-direction: row-reverse;
}

.feat-row__text,
.feat-row__media {
  flex: 1 1 0;
  min-width: 0;
}

.feat-row__step {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--brand);
}

.feat-row__step::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.feat-row__title {
  margin: 16px 0 0;
  font-weight: 600;
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.28;
  letter-spacing: 0.4px;
  color: var(--text);
}

.feat-row__body {
  margin-top: 16px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.72;
  color: var(--muted);
}

.feat-row__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.feat-row__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--text);
}

.feat-row__list img {
  flex: none;
  margin-top: 4px;
}

.feat-row__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 26px;
  font-weight: 500;
  font-size: 17px;
  color: var(--brand);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.feat-row__link::after {
  content: "\2192";
  transition: transform 0.2s ease;
}

.feat-row__link:hover {
  color: #169976;
  border-bottom-color: currentColor;
}

.feat-row__link:hover::after {
  transform: translateX(3px);
}

/* The four shots differ in shape, so each sits on a tinted panel that gives
   every row one silhouette. The tint alternates along with the row. */
.feat-row__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border-radius: 24px;
  background: var(--brand-tint-soft);
}

.feat-row__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
}

/* The worker cut-out is portrait, so it is sized by height instead. */
.feat-row__media--portrait img {
  width: auto;
  max-width: 100%;
  max-height: 430px;
}

/* about-dashboard.png is exported with a strip of the source layout's copy
   down its left edge, a review card over the bottom-left corner and a
   watermark below it. The frame shows only the dashboard itself: of the
   991 x 701 export, the 871 x 520 box starting 120px in and 5px down. */
.feat-row__frame {
  width: 100%;
  aspect-ratio: 871 / 520;
  border-radius: var(--radius-md);
}

.feat-row__frame > img {
  left: -13.8%;
  top: -0.96%;
  width: 113.8%;
  height: auto;
  max-height: none;
}

.feat-row--reverse .feat-row__step {
  color: var(--blue);
}

.feat-row--reverse .feat-row__media {
  background: var(--blue-tint);
}

.feat-row--reverse .feat-row__link {
  color: var(--blue);
}

.feat-row--reverse .feat-row__link:hover {
  color: var(--blue-deep);
}

/* --- Where each part runs ------------------------------------------------ */
.feat-where {
  padding: 0 20px 100px;
}

.feat-where__inner {
  max-width: 1000px;
  margin: 0 auto;
}

/* The table keeps its own scroller so a narrow screen scrolls the table
   rather than the page. */
.feat-where__scroll {
  margin-top: 46px;
  overflow-x: auto;
  border: 1px solid var(--line-soft-solid);
  border-radius: 16px;
}

.feat-where__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--surface);
}

.feat-where__table th,
.feat-where__table td {
  padding: 16px 22px;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
}

.feat-where__table thead th {
  background: rgba(26, 177, 137, 0.08);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text);
}

.feat-where__table thead th:not(:first-child),
.feat-where__table tbody td {
  width: 140px;
  text-align: center;
}

.feat-where__table tbody th {
  font-weight: 400;
  color: var(--text);
}

.feat-where__table tbody tr + tr th,
.feat-where__table tbody tr + tr td {
  border-top: 1px solid var(--line-soft);
}

.feat-where__table tbody tr:hover th,
.feat-where__table tbody tr:hover td {
  background: rgba(26, 177, 137, 0.04);
}

/* An em dash reads as "not here" without needing a second icon. */
.feat-where__no {
  font-size: 18px;
  color: #b5bbb8;
}

.feat-where__note {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

/* --- Built for the field — the band the page closes on ------------------- */
.feat-field {
  padding: 84px 20px 96px;
  /* The About page's closing gradient, run the other way up: this band sits
     directly on the footer, so the dark end goes at the bottom where it meets
     --footer-bg rather than the bright end. */
  background: linear-gradient(180deg, var(--blue) 17.263%, #083f64 85.711%);
}

.feat-field__inner {
  max-width: 1242px;
  margin: 0 auto;
}

.feat-field__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.feat-note {
  padding: 30px 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  transition: var(--lift-transition), background-color 0.25s ease;
}

.feat-note:hover {
  transform: var(--lift);
  background: rgba(255, 255, 255, 0.11);
}

.feat-note__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
}

.feat-note__title {
  margin: 0;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.35;
  letter-spacing: 0.4px;
  color: var(--text-invert);
}

.feat-note__text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   21. Responsive — Bootstrap breakpoints
   ========================================================================== */

/* ---- ≤1399px: keep the 1440 canvas from overflowing ---- */
@media (max-width: 1399.98px) {
  /* About: the 1289px story row no longer fits beside the gutters. */
  .about-story {
    gap: 40px;
  }

  .about-story__media {
    width: 48%;
  }

  /* FAQ: 571 + 84 + 650 plus gutters no longer fits, so both columns
     become fluid rather than overflowing. */
  .faq__inner {
    gap: 40px;
    padding: 0 40px;
  }

  .faq__intro {
    width: auto;
    flex: 1 1 340px;
  }

  .faq__list {
    width: auto;
    flex: 1 1 420px;
  }
}

/* ---- ≤1199px (below xl): hero and the device composition stack ---- */
@media (max-width: 1199.98px) {
  .site-header__collapse {
    margin-left: 40px;
  }

  .site-nav {
    gap: 26px;
  }

  /* Hero: copy first, illustration below */
  .hero__inner {
    padding: 60px 40px;
    min-height: 0;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__inner {
    padding-bottom: 0;
  }

  .hero__visual {
    position: relative;
    right: auto;
    width: calc(100% - 80px);
    max-width: 751px;
    margin: 48px auto 60px;
  }

  .hero__glow {
    display: none;
  }

  /* About: story stacks, feature grid drops to two columns. */
  .about-intro {
    padding-bottom: 60px;
  }

  .about-story {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding: 0 40px;
  }

  /* The 669px flex-basis would become a minimum HEIGHT once the container
     turns into a column, leaving a large empty gap below. */
  .about-story__text {
    flex: none;
  }

  .about-story__media {
    width: 100%;
    height: auto;
    aspect-ratio: 565 / 507;
  }

  .about-stats {
    margin-top: 72px;
  }

  .about-why {
    padding: 70px 40px;
  }

  .about-why__shape {
    display: none;
  }

  .about-cta {
    min-height: 0;
    padding: 56px 20px;
  }

  .about-why__grid {
    grid-template-columns: repeat(2, minmax(0, 340px));
  }

  .about-feature {
    width: auto;
  }

  /* Pricing: four 349px columns no longer fit, so they wrap two-up and the
     featured plan stops breaking out of the row. */
  .pricing__table {
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
  }

  .plan {
    flex: 1 1 calc(50% - 10px);
    border: 1px solid rgba(167, 176, 170, 0.25);
    padding: 32px 20px;
  }

  /* Once the plans wrap there is no row to break out of, so the card sits
     level with the rest and keeps only a soft shadow. */
  .plan--pro {
    margin: 0;
    padding: 20px;
    border-color: var(--blue);
    transform: none;
    box-shadow: 0 10px 24px rgba(0, 40, 70, 0.18);
  }

  .plan--pro:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 40, 70, 0.24);
  }

  /* Contact: the 1151px row no longer fits, so it stacks. */
  .contact-main__row {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .contact-aside,
  .contact-form {
    width: 100%;
  }

  .contact-cards {
    flex-wrap: nowrap;
  }

  .contact-card {
    flex: 1 1 0;
    width: auto;
  }

  /* Tutorials: the copy column gives way before the mockups do. */
  .tutorials-hero {
    padding: 56px 20px 48px;
  }

  .tutorials {
    padding: 0 20px 90px;
  }

  .download__layout {
    gap: 60px;
  }

  /* Features: the deep-dive rows close up. */
  .feat-deep {
    gap: 84px;
    padding-bottom: 84px;
  }

  .feat-row {
    gap: 56px;
  }
}

/* ---- ≤991px (below lg): collapse the navbar, simplify sections ---- */
@media (max-width: 991.98px) {
  .site-header {
    height: auto;
    position: static;
  }

  .site-header__inner {
    height: auto;
    padding: 12px 20px;
    flex-wrap: wrap;
  }

  .site-header__collapse {
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 16px 0;
  }

  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }

  .partners__marquee {
    --marquee-gap: 32px;
    --marquee-duration: 28s;
  }

  .partners__logo {
    width: 76px;
    height: 76px;
  }

  /* The section stacks here, so there is no copy to knock against — the
     entrance keeps its shape but travels a shorter distance. */
  .reveal--bump {
    --bump-from: -60px;
    --bump-over: 18px;
  }

  .why {
    min-height: 0;
    padding-bottom: 60px;
  }

  .needs {
    padding: 56px 20px;
  }

  .web-mobile {
    padding: 56px 20px;
  }

  .web-mobile__body {
    margin-top: 40px;
  }

  /* The checklist leads, the devices follow underneath. */
  .check-list {
    margin-bottom: 8px;
  }

  .blogs {
    padding: 56px 20px 64px;
  }

  .blogs__grid {
    margin-top: 40px;
  }

  .testimonials {
    padding: 60px 0 70px;
  }

  /* FAQ: single column */
  .faq {
    min-height: 0;
    padding: 60px 0;
  }

  .faq__inner {
    flex-direction: column;
    gap: 48px;
    padding: 0 40px;
  }

  .faq__intro,
  .faq__list {
    width: 100%;
    /* Clear the row's flex-basis, which would otherwise become a minimum
       HEIGHT now that the container is a column. */
    flex: none;
  }

  /* Footer: wrap into a responsive grid */
  .site-footer {
    padding-top: 60px;
  }

  .site-footer__columns {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 40px;
  }

  .site-footer__brand,
  .footer-col,
  .footer-col--links,
  .footer-col--contact,
  .footer-col--download {
    margin-left: 0;
    width: calc(50% - 20px);
  }

  /* About: the wave is shorter once the hero copy stacks tighter. */
  .about-intro__shape {
    height: 480px;
  }

  .about-story {
    padding: 0 20px;
  }

  .about-cta__actions {
    gap: 16px;
  }

  .cta-btn {
    width: 100%;
    max-width: 260px;
  }

  /* Contact: info cards wrap to 2 x 2. */
  .contact-hero {
    height: 340px;
  }

  .contact-cards {
    flex-wrap: wrap;
  }

  .contact-card {
    flex: 1 1 calc(50% - 10px);
    min-width: 180px;
  }

  .tutorials-hero {
    padding: 48px 20px 40px;
  }

  .tutorials {
    padding: 0 20px 72px;
  }

  .tutorials__body {
    gap: 24px;
  }

  /* Below lg the mockups would crowd the copy out, so the CTA falls back to
     the centred, text-only treatment used on the home page. */
  .download__phones {
    display: none;
  }

  .download__layout {
    display: block;
  }

  .download--framed {
    padding: 48px 20px;
  }

  /* Without the mockups the home CTA re-centres like the plain variant. */
  .download--home {
    padding: 48px 20px;
    text-align: center;
  }

  .download--home .download__inner {
    max-width: 974px;
    margin: 0 auto;
  }

  .download--home .store-buttons {
    justify-content: center;
  }

  /* Features: every row puts its copy above its media, regardless of which
     side it was on. */
  .feat-modules {
    padding: 64px 20px;
  }

  .feat-modules__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feat-row,
  .feat-row--reverse {
    flex-direction: column;
    gap: 32px;
  }

  .feat-where {
    padding-bottom: 72px;
  }

  .feat-field {
    padding: 64px 20px;
  }

  .feat-field__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- ≤767px (below md): fully stacked, single column ---- */
@media (max-width: 767.98px) {
  .hero__inner {
    padding: 40px 20px 0;
  }

  .hero__visual {
    width: calc(100% - 40px);
    margin: 40px auto 48px;
  }

  .hero__actions .btn-sayogi--lg {
    width: 100%;
    max-width: 300px;
  }

  .hero__proof {
    flex-direction: column;
    gap: 16px;
  }

  .partners {
    padding: 22px 20px 30px;
  }

  .partners__marquee {
    --marquee-gap: 24px;
    --marquee-duration: 22s;
  }

  .partners__logo {
    width: 64px;
    height: 64px;
  }

  .why {
    padding: 48px 20px;
  }

  .needs,
  .web-mobile {
    padding: 48px 20px;
  }

  .blogs {
    padding: 48px 20px 56px;
  }

  /* The arcs bleed far past the gutter at this width and read as clutter. */
  .blogs__glow {
    display: none;
  }

  .sec-head__lead {
    margin-top: 16px;
  }

  .testimonials {
    padding: 48px 0 56px;
  }

  .faq__inner {
    padding: 0 20px;
  }

  .faq-item__button {
    padding: 14px 16px 14px 26px;
  }

  .faq-item__body {
    padding: 0 16px 16px 26px;
  }

  .btn-sayogi--pill {
    width: 100%;
    max-width: 260px;
    font-size: 20px;
  }

  .download {
    padding: 48px 20px;
    min-height: 0;
  }

  .download--framed {
    margin-bottom: 56px;
    padding: 40px 20px;
    border-radius: 24px;
  }

  .store-buttons {
    flex-wrap: wrap;
    margin-top: 32px;
  }

  .tutorials-hero {
    padding: 40px 20px 32px;
  }

  .tutorials {
    padding: 0 20px 56px;
  }

  .tutorials__switch {
    gap: 30px;
  }

  .feat-modules {
    padding: 48px 20px;
  }

  .feat-modules__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .feat-deep {
    gap: 56px;
    padding-bottom: 56px;
  }

  .feat-row__media {
    padding: 16px;
    border-radius: 18px;
  }

  .feat-where {
    padding-bottom: 56px;
  }

  .feat-where__scroll {
    margin-top: 32px;
  }

  /* Tightened so both columns fit a phone without the table scrolling. */
  .feat-where__table {
    min-width: 440px;
  }

  .feat-where__table th,
  .feat-where__table td {
    padding: 14px 16px;
    font-size: 15px;
  }

  .feat-where__table thead th:not(:first-child),
  .feat-where__table tbody td {
    width: 88px;
  }

  .feat-field {
    padding: 48px 20px;
  }

  .feat-field__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
  }

  .site-footer {
    padding: 48px 0 32px;
  }

  .site-footer__columns {
    gap: 32px;
  }

  .site-footer__brand,
  .footer-col,
  .footer-col--links,
  .footer-col--contact,
  .footer-col--download {
    width: 100%;
  }

  .chat-widget {
    right: 10px;
    bottom: 10px;
    width: 60px;
    height: 60px;
  }

  .chat-widget img {
    width: 60px;
    height: 60px;
  }

  /* About: single column throughout. */
  .about-hero {
    padding-top: 40px;
  }

  .about-intro__shape {
    width: 150%;
    left: -25%;
  }

  .about-badge {
    width: auto;
    height: auto;
    padding: 4px 14px;
    font-size: 12px;
    white-space: normal;
  }

  .about-story {
    margin-top: 48px;
    padding: 0 20px;
    gap: 32px;
  }

  /* Justified copy opens ugly rivers once the measure gets this narrow. */
  .about-story__text {
    text-align: left;
  }

  .about-stats {
    gap: 20px;
    margin-top: 56px;
  }

  .stat-card {
    width: calc(50% - 10px);
    max-width: 208px;
  }

  .about-why {
    padding: 48px 20px;
  }

  .about-why__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
    margin-top: 32px;
  }

  .about-feature {
    min-height: 0;
    padding: 20px;
  }

  .about-feature__text {
    text-align: left;
  }

  /* Pricing: one plan per row. */
  .pricing {
    padding: 40px 20px;
  }

  .plan {
    flex: 1 1 100%;
  }

  /* Contact: single column, form fields stack. */
  .contact-hero {
    height: 280px;
  }

  .contact-hero__content {
    padding-top: 40px;
  }

  /* Cropped this tight the photo's own left-hand fade is off-frame, so a
     scrim stands in and keeps the copy legible over the workers. */
  .contact-hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.92) 42%, rgba(255, 255, 255, 0) 88%);
  }

  .contact-main {
    padding: 40px 20px;
  }

  .contact-main__row {
    gap: 32px;
  }

  .contact-card {
    height: 130px;
  }

  .contact-map {
    height: 180px;
  }

  .contact-form {
    min-height: 0;
    padding: 20px;
  }

  .contact-form__row {
    flex-direction: column;
    gap: 20px;
  }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* The play control keeps its hover lift, but stops calling attention. */
  /* The marquee degrades to the design's original static, centred logo row. */
  .partners__marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .partners__track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  .partners__logo[aria-hidden="true"] {
    display: none;
  }

  /* The quote marquee degrades to a plain centred grid of the three cards. */
  .testimonials__marquee {
    -webkit-mask-image: none;
    mask-image: none;
    padding: 90px 20px 24px;
  }

  .testimonials__track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    /* Wrapped rows need clearance for the avatar that overhangs each card. */
    row-gap: 80px;
    width: 100%;
  }

  .quote-card[aria-hidden="true"] {
    display: none;
  }
}