/* ============================================================
   Aqaris · Feature pages (feature-*.html), Figma "aqaris-feature-*"
   sections: 1440w / 768w / 390w frames per module.
   Loaded after style.css and home.css. Body is "home features":
   header, buttons, CTA band and footer come from home.css;
   everything here is scoped to body.features or to ft-* classes.
   Pages are generated by .figma-cache/build-features.js.
   Breakpoints: desktop > 1024 · tablet 641–1024 · mobile ≤ 640
   ============================================================ */

.features .nav-dropdown-toggle { color: var(--hp-indigo); font-weight: 600; }
.features .nav-dropdown-menu a[aria-current="page"] { color: var(--hp-indigo); font-weight: 600; }

.ft-pill {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px;
  border-radius: 999px;
  background: var(--hp-lav);
  font-size: 14px; font-weight: 600; line-height: 22px;
  color: var(--hp-indigo);
}
.ft-pill-dark { background: rgba(196,192,255,.14); color: #C4C0FF; }
.ft-btn-white { background: #FFFFFF; }

/* ---------- Hero ---------- */
.ft-hero { background: var(--hp-slate); padding: 88px 0 96px; overflow: hidden; }
.ft-hero-inner { display: flex; gap: 64px; align-items: center; }
.ft-hero-copy { flex: 0 0 520px; min-width: 0; }
.ft-hero h1 {
  margin-top: 19px;
  font-size: clamp(48px, 4.03vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
/* The gradient phrase wraps as one unit on desktop and tablet, as in Figma */
.ft-hero h1 > .hp-grad, .ft-hero h1 .ft-unit { display: inline-block; }
.ft-hero-lead { margin-top: 24px !important; font-size: 19px; line-height: 1.55; }
.ft-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.ft-hero-meta {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
}
.ft-hero-meta li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500; line-height: 24px;
  color: var(--hp-body);
}

/* Browser-framed screenshot; on desktop it bleeds past the content edge as in Figma */
.ft-shot {
  flex: 1 0 0; min-width: 0;
  margin: 0 -144px 0 0;
  border: 1px solid var(--hp-line);
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 40px 80px -30px rgba(36,28,66,.35);
  overflow: hidden;
  transition: transform .6s var(--hp-smooth), box-shadow .6s var(--hp-smooth);
}
.ft-shot-bar {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px;
  border-bottom: 1px solid var(--hp-line);
}
.ft-shot-bar i { flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--hp-line); }
.ft-shot-bar span {
  display: inline-flex; align-items: center;
  width: 300px; max-width: 60%; height: 22px; margin-left: 14px; padding: 0 10px;
  border-radius: 6px;
  background: var(--hp-slate);
  font-size: 12px; line-height: 1; color: var(--hp-muted);
}
.ft-shot img { display: block; width: 100%; height: auto; }

/* ---------- The problem ---------- */
.ft-problem { background: var(--hp-night); padding: 113px 0 112px; }
.ft-problem-inner { display: flex; gap: 80px; align-items: flex-start; }
.ft-problem-head { flex: 0 0 460px; }
.ft-problem h2 {
  margin-top: 20px;
  font-size: 40px; line-height: 1.1; letter-spacing: -0.03em;
  color: #FFFFFF;
}
.ft-problem-copy { flex: 1; min-width: 0; display: grid; gap: 18px; }
.features .ft-problem-copy p { font-size: 17px; line-height: 26.4px; color: rgba(255,255,255,.72); }
.features .ft-problem-copy .ft-problem-lead { font-size: 21px; line-height: 31.5px; color: #FFFFFF; }
.ft-impact {
  margin-top: 10px;
  padding: 22px 26px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.05);
}
.ft-impact span { display: block; font-size: 14px; font-weight: 600; line-height: 22px; color: #C4C0FF; }
.features .ft-impact p { margin-top: 5px; font-size: 18px; line-height: 27.9px; color: #FFFFFF; }
/* Closing statement used instead of the impact box on some pages */
.features .ft-problem-copy .ft-callout {
  margin-top: 10px;
  padding-left: 22px;
  border-left: 3px solid #8E8BFF;
  font-size: 21px; font-weight: 600; line-height: 30px;
  color: #FFFFFF;
}

/* ---------- What Aqaris does ---------- */
.ft-what h2, .ft-related h2 { margin-top: 18px; max-width: 780px; }
.ft-what h2 { font-size: 44px; line-height: 1.1; letter-spacing: -0.03em; }
.ft-grid {
  margin-top: 52px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.ft-card {
  padding: 30px;
  border: 1px solid var(--hp-line);
  border-radius: 20px;
  background: #FFFFFF;
  transition: transform .45s var(--hp-smooth), box-shadow .45s var(--hp-smooth), border-color .3s var(--ease);
}
.ft-card-featured { background: var(--hp-lav); border-color: #E4DAFF; }
.ft-card-icon {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--hp-lav);
  transition: transform .45s var(--hp-smooth), background-color .3s var(--ease);
}
.ft-card-featured .ft-card-icon { background: #FFFFFF; }
/* On five-card pages the first card spans two columns, with larger type */
.ft-card-wide { grid-column: span 2; padding: 40px; }
.ft-card-wide h3 { font-size: 26px; }
.ft-card-wide p { font-size: 18px; line-height: 27.9px; }
.ft-card h3 { margin-top: 22px; font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.ft-card p { margin-top: 9px; font-size: 16px; line-height: 25.6px; }

/* ---------- CTA ---------- */
.ft-cta { padding: 96px 0; }
.ft-cta h2 { flex-basis: 620px; font-size: 46px; line-height: 1.1; }

/* ---------- Related features ---------- */
.ft-related { padding: 97px 0 96px; }
.ft-related h2 { font-size: 38px; line-height: 1.1; }
.ft-related-grid {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  align-items: start;
}
.ft-rel {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px;
  border: 1px solid var(--hp-line);
  border-radius: 18px;
  background: #FFFFFF;
  color: inherit;
  transition: transform .45s var(--hp-smooth), box-shadow .45s var(--hp-smooth), border-color .3s var(--ease);
}
.ft-rel-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--hp-lav);
}
.ft-rel h3 { margin-top: 18px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.ft-rel p { margin-top: 8px; font-size: 16px; line-height: 24.8px; }
.ft-rel-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 17px;
  font-size: 15.5px; font-weight: 600; line-height: 24px;
  color: var(--hp-indigo);
}
.ft-rel-link img { transition: transform .35s var(--hp-smooth); }

/* Gentle hovers: cards lift with a soft border and shadow; related cards nudge their arrow. */
@media (hover: hover) {
  .ft-card:hover, .ft-rel:hover {
    transform: translateY(-4px);
    border-color: #C7C2F7;
    box-shadow: 0 22px 44px -26px rgba(15,23,42,.28);
  }
  .ft-card-featured:hover { box-shadow: 0 24px 48px -24px rgba(79,70,229,.38); }
  .ft-card:hover .ft-card-icon { transform: translateY(-2px) scale(1.05); }
  .ft-rel:hover .ft-rel-link img { transform: translateX(4px); }
  .ft-shot:hover { transform: translateY(-4px); box-shadow: 0 48px 90px -30px rgba(36,28,66,.42); }
}
/* style.css zeroes every transition under reduced motion; keep colour changes gentle, drop movement. */
@media (prefers-reduced-motion: reduce) {
  .ft-card, .ft-rel, .ft-shot { transition-duration: .3s !important; }
  .ft-card:hover, .ft-rel:hover, .ft-shot:hover, .ft-card:hover .ft-card-icon, .ft-rel:hover .ft-rel-link img { transform: none; }
}

/* ============================================================
   Small desktop (1025–1240)
   ============================================================ */
@media (max-width: 1240px) {
  .ft-hero-inner { gap: 48px; }
  .ft-hero-copy { flex-basis: 460px; }
  .ft-shot { margin-right: -96px; }
  .ft-problem-inner { gap: 56px; }
  .ft-problem-head { flex-basis: 38%; }
  .ft-card { padding: 26px; }
  .ft-card-wide { padding: 36px; }
  .ft-cta h2 { flex-basis: 50%; }
}

/* ============================================================
   Tablet (≤ 1024) — "768w dark", 32px gutter
   ============================================================ */
@media (max-width: 1024px) {
  .ft-hero { padding: 64px 0 72px; }
  .ft-hero-inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .ft-hero-copy { flex: none; }
  .ft-hero h1 { font-size: 52px; line-height: 1.05; }
  .ft-hero-lead { margin-top: 23px !important; font-size: 18px; }
  .ft-hero-meta { margin-top: 21px; }
  .ft-shot { flex: none; margin-right: 0; }

  .ft-problem { padding: 81px 0 80px; }
  .ft-problem-inner { flex-direction: column; gap: 28px; }
  .ft-problem-head { flex: none; }
  .ft-problem h2 { margin-top: 19px; font-size: 38px; }

  .ft-what h2 { font-size: 38px; }
  .ft-grid { margin-top: 40px; grid-template-columns: 1fr 1fr; }

  .ft-cta { padding: 80px 0; }
  .ft-cta .hp-cta-inner { gap: 24px; }
  .ft-cta h2 { flex: none; font-size: 38px; }
  .ft-cta .hp-cta-copy { max-width: 583px; }

  .ft-related { padding: 73px 0 72px; }
  .ft-related-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   Mobile (≤ 640) — "390w dark", 20px gutter
   ============================================================ */
@media (max-width: 640px) {
  .ft-hero { padding: 48px 0 56px; }
  .ft-hero h1 { font-size: 36px; line-height: 1.08; }
  .ft-hero h1 > .hp-grad, .ft-hero h1 .ft-unit { display: inline; }
  .ft-hero-lead { font-size: 17px; line-height: 26.4px; }
  .ft-hero-cta { flex-direction: column; }
  .ft-hero-cta .hp-btn { width: 100%; height: 48px; font-size: 16px; }
  .ft-hero-meta { flex-direction: column; gap: 12px; }
  .ft-shot-bar span { width: auto; flex: 1; }

  .ft-problem { padding: 65px 0 64px; }
  .ft-problem h2 { font-size: 30px; line-height: 1.12; }
  .features .ft-problem-copy .ft-problem-lead { font-size: 18px; line-height: 27px; }
  .ft-impact { padding: 18px 20px; }
  .features .ft-problem-copy .ft-callout { font-size: 18px; line-height: 26px; }

  .ft-what h2 { font-size: 30px; line-height: 1.12; }
  .ft-grid { grid-template-columns: 1fr; gap: 14px; }
  .ft-card { padding: 24px; }
  .ft-card h3 { font-size: 20px; }
  .ft-card-wide { grid-column: auto; }
  .ft-card-wide h3 { font-size: 22px; }
  .ft-card-wide p { font-size: 16px; line-height: 25.6px; }

  .ft-cta { padding: 63px 0 64px; }
  .ft-cta h2 { font-size: 30px; line-height: 1.12; }
  .ft-cta .hp-cta-copy p { font-size: 20px; }
  .ft-cta .hp-cta-btns { flex-direction: column; }
  .ft-cta .hp-cta-btns .hp-btn { width: 100%; height: 48px; font-size: 16px; }

  .ft-related h2 { font-size: 30px; }
  .ft-rel { padding: 24px 23px; }
}