/* ==========================================================================
   FunctionAlps showcase — pages/home.css (part 1: hero, about band, features head)
   Layout, sizes and breakpoints from the Habitline replica home.css. The hero is
   light (cream veil over the mito artwork) instead of a dark photo; the hero phone
   and floating cards are HTML mini UIs scaled with container units (--u = 1 design px).
   ========================================================================== */

/* ---------- hero ---------- */
.hero { position: relative; width: 100%; display: flex; justify-content: center; padding-top: 200px; background: var(--c-page); }
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(245, 240, 232, .9) 0%, rgba(245, 240, 232, .82) 30%, rgba(245, 240, 232, .5) 52%, rgba(245, 240, 232, .3) 72%, rgba(245, 240, 232, .65) 100%); }
.hero__container { position: relative; z-index: 1; width: 100%; max-width: 1000px; padding: 0 30px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.hero__content { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.hero__top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero__tagline { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; background: rgba(255, 255, 255, .72); border-radius: 50px; font: var(--t-xs); color: var(--c-ink); white-space: nowrap; box-shadow: var(--sh-card); --bd: rgba(46, 84, 56, .12); }
.hero__new { display: flex; padding: 2px 9px; background: var(--fa-forest); color: var(--c-white); border-radius: 50px; }
.hero__title { font: var(--t-hero); color: var(--c-ink); text-align: center; max-width: 860px; }
.hero__title em { font-style: italic; color: var(--fa-forest); }
.hero__sub p { width: 540px; max-width: 100%; font: var(--t-lead); color: var(--c-ink-2); }
.hero__sub { display: flex; justify-content: center; width: 100%; }
.hero__buttons { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; }
.hero__bottom { width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 40px; }
.hero__left, .hero__right { width: 240px; flex: none; display: flex; align-items: center; }
.hero__left { justify-content: flex-end; padding: 20px 6px 6px; }
.hero__right { justify-content: center; padding: 160px 6px 6px; }
.hero__center { width: 360px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px; }
.hero__card, .hero__phone { position: relative; overflow: hidden; box-shadow: var(--sh-ring), rgba(26, 26, 22, .12) 0 24px 50px -10px; container-type: inline-size; }
.hero__card { width: 228px; border-radius: 16px; background: var(--c-white); }
.hero__phone { width: 348px; aspect-ratio: 348 / 560; border-radius: 50px 50px 0 0; }
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; z-index: 2; background: var(--c-page); }
.hero__blur { position: absolute; left: -120px; right: -120px; bottom: -60px; height: 300px; z-index: 1; pointer-events: none; }
.hero__blur .soft { position: absolute; }
.hero__blur .soft:nth-child(1) { left: 0; bottom: 0; width: 55%; height: 100%; }
.hero__blur .soft:nth-child(2) { right: 0; bottom: 20px; width: 55%; height: 90%; }
.hero__blur .soft:nth-child(3) { left: 30%; bottom: -40px; width: 40%; height: 100%; }
@media (max-width: 1199.98px) {
  .hero__container { max-width: none; }
  .hero__content { gap: 24px; }
  .hero__left, .hero__right, .hero__center { flex: 1; width: auto; }
  .hero__right { padding-top: 50px; }
  .hero__card { width: 100%; }
  .hero__phone { width: 100%; border-radius: 26px 26px 0 0; }
  .hero__fade { height: 70px; }
}
@media (max-width: 809.98px) {
  .hero { padding-top: 150px; overflow: clip; }
  .hero__bg img { object-position: 42% 70%; }
  .hero__shade { background: linear-gradient(180deg, rgba(245, 240, 232, .94) 0%, rgba(245, 240, 232, .86) 42%, rgba(245, 240, 232, .55) 62%, rgba(245, 240, 232, .45) 85%, rgba(245, 240, 232, .7) 100%); }
  .hero__container { padding: 0 20px; gap: 50px; }
  .hero__tagline { white-space: normal; text-align: left; }
  .hero__buttons { gap: 14px; }
  .hero__bottom { display: grid; grid-template-columns: 165px 165px; grid-template-areas: "l r" "c c"; column-gap: 20px; row-gap: 40px; justify-content: center; }
  .hero__left { grid-area: l; justify-content: flex-start; padding: 4px; }
  .hero__right { grid-area: r; padding: 4px; }
  .hero__center { grid-area: c; justify-self: center; width: 260px; padding: 4px; }
  .hero__phone { transform: translateY(-30px); border-radius: 30px 30px 0 0; }
  .hero__card, .hero__phone { box-shadow: rgba(46, 84, 56, .08) 0 0 0 4px, rgba(26, 26, 22, .1) 0 16px 30px -10px; }
  .hero__fade { left: -20px; right: -20px; bottom: -10px; height: 50px; }
  .hero__blur { left: -20px; right: -20px; bottom: -10px; height: 160px; }
}

/* ---------- hero mini UIs (1 design px = --u; phone designed at 348, cards at 228) ---------- */
.hcard { --u: calc(100cqw / 228); display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(18 * var(--u)); text-align: left; }
.hcard__label { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--u)); font: 500 calc(12 * var(--u))/1.3 var(--f-body); color: var(--c-stone); text-transform: uppercase; letter-spacing: .06em; }
.hcard__tag { padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: 50px; background: rgba(196, 139, 53, .14); color: #8A5F1F; text-transform: none; letter-spacing: 0; font-size: calc(11 * var(--u)); }
.hcard__score { display: flex; align-items: flex-end; gap: calc(8 * var(--u)); }
.hcard__num { font: 400 calc(52 * var(--u))/0.9 var(--f-display); color: var(--fa-gold); }
.hcard__of { font: 400 calc(13 * var(--u))/1.4 var(--f-body); color: var(--c-stone); padding-bottom: calc(4 * var(--u)); }
.hcard svg { width: 100%; height: auto; }
.hcard__row { display: flex; align-items: center; gap: calc(10 * var(--u)); font: 400 calc(14 * var(--u))/1.3 var(--f-body); color: var(--c-ink); }
.hcard__tick { flex: none; display: flex; align-items: center; justify-content: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; border: calc(1.5 * var(--u)) solid var(--c-line); }
.hcard__tick.is-done { background: var(--fa-forest); border-color: var(--fa-forest); }
.hcard__tick img { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.hcard__row.is-done span:last-child { color: var(--c-stone); text-decoration: line-through; text-decoration-color: rgba(122, 121, 111, .5); }
.hcard__title { font: 400 calc(21 * var(--u))/1.15 var(--f-display); color: var(--c-ink); }

.today { --u: calc(100cqw / 348); position: absolute; inset: 0; display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(20 * var(--u)) calc(20 * var(--u)) 0; background: #FBF8F2; text-align: left; }
.today__status { display: flex; justify-content: space-between; align-items: center; padding: 0 calc(12 * var(--u)); font: 600 calc(13 * var(--u))/1 var(--f-body); color: var(--c-ink); }
.today__status i { display: block; width: calc(64 * var(--u)); height: calc(20 * var(--u)); border-radius: 20px; background: var(--c-ink); }
.today__status b { display: block; width: calc(24 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u)); border: calc(1.5 * var(--u)) solid var(--c-ink); font: inherit; }
.today__head { display: flex; justify-content: space-between; align-items: flex-end; padding-top: calc(6 * var(--u)); }
.today__date { font: 600 calc(10.5 * var(--u))/1.4 var(--f-body); color: var(--c-stone); text-transform: uppercase; letter-spacing: .08em; }
.today__hello { font: 400 calc(26 * var(--u))/1.1 var(--f-display); color: var(--c-ink); }
.today__head img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.today__card { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)); background: var(--c-white); border-radius: calc(18 * var(--u)); box-shadow: rgba(26, 26, 22, .05) 0 6px 14px; }
.today__ring { position: relative; flex: none; width: calc(66 * var(--u)); height: calc(66 * var(--u)); }
.today__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.today__ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 calc(24 * var(--u))/1 var(--f-display); color: var(--c-ink); }
.today__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.today__k { font: 600 calc(10.5 * var(--u))/1.3 var(--f-body); color: var(--c-stone); text-transform: uppercase; letter-spacing: .08em; }
.today__v { font: 500 calc(15 * var(--u))/1.3 var(--f-body); color: var(--c-ink); }
.today__chips { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); }
.today__chips span { padding: calc(2 * var(--u)) calc(8 * var(--u)); border-radius: 50px; background: rgba(46, 84, 56, .1); color: var(--fa-forest); font: 500 calc(10.5 * var(--u))/1.5 var(--f-body); }
.today__cta { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--fa-forest); color: var(--c-white); }
.today__cta p { font: 500 calc(15 * var(--u))/1.25 var(--f-body); }
.today__cta small { display: block; font: 400 calc(12 * var(--u))/1.3 var(--f-body); color: rgba(255, 255, 255, .72); }
.today__go { flex: none; padding: calc(7 * var(--u)) calc(14 * var(--u)); border-radius: 50px; background: var(--fa-gold); font: 500 calc(13 * var(--u))/1.2 var(--f-body); }
.today__meals { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.today__meals img { width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(14 * var(--u)); object-fit: cover; }
.today__meal { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.today__add { display: flex; align-items: center; justify-content: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(14 * var(--u)); border: calc(1.5 * var(--u)) dashed rgba(46, 84, 56, .35); color: var(--fa-forest); font: 400 calc(24 * var(--u))/1 var(--f-body); }

/* ---------- about band (word headline, phone + tickers, trust pill) ---------- */
.about-features { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.about { position: relative; width: 100%; display: flex; justify-content: center; padding-top: 20px; }
.about__container { position: relative; z-index: 2; width: 100%; max-width: 1260px; display: flex; flex-direction: column; align-items: center; gap: 60px; }
.about__top { width: 100%; max-width: 1000px; padding: 0 30px; display: flex; flex-direction: column; align-items: center; gap: 50px; }
.about__words { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: 12px; row-gap: 4px; font: var(--t-words); color: var(--c-ink); text-align: center; }
.about__words > span { display: block; }
.about__words .is-accent { color: var(--fa-forest); font-style: italic; }
.about__pic { display: flex; padding-top: 7px; }
.about__pics { position: relative; display: block; width: 92px; height: 44px; }
.about__pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50px; }
.about__pics img:nth-child(1) { z-index: 4; } .about__pics img:nth-child(2) { z-index: 3; } .about__pics img:nth-child(3) { z-index: 2; } .about__pics img:nth-child(4) { z-index: 1; }
.about__vec { display: flex; padding-top: 4px; }
.about__vec svg { width: 60px; height: 46px; }
.about__meta { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.about__lead { width: 100%; font: var(--t-lead); color: var(--c-ink-2); text-align: center; }
.about__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.chip { display: flex; align-items: center; padding: 7px 14px; background: var(--c-line); border-radius: 50px; font: var(--t-xs); color: var(--fa-forest); white-space: nowrap; }
.about__center { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.about__phone { position: relative; z-index: 2; width: 320px; }
.about__tickers { position: absolute; z-index: 0; left: 0; right: 0; top: 50%; height: 480px; margin-top: -240px; padding: 80px 0; display: flex; flex-direction: column; justify-content: center; gap: 20px; overflow: clip; }
.about__tickers .ticker { height: 150px; flex: none; }
.fade { position: absolute; z-index: 2; top: -50px; width: 230px; height: 580px; pointer-events: none; }
.fade--l { left: -50px; background: linear-gradient(90deg, #F5F0E8 29%, rgba(245, 240, 232, 0) 100%); }
.fade--r { right: -50px; background: linear-gradient(270deg, #F5F0E8 31%, rgba(245, 240, 232, 0) 100%); }
.tile { width: 150px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 18px; background: var(--c-white); border-radius: var(--r-card); box-shadow: var(--sh-card); overflow: hidden; }
.tile p { width: 116px; font: var(--t-small); color: var(--c-ink); text-align: center; }
.tile--img { padding: 0; background: none; box-shadow: none; }
.tile--img img { width: 150px; height: 150px; object-fit: cover; }
.about__bottom { width: 680px; max-width: 100%; padding: 0 30px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.pill__icon { width: 16px; height: 16px; }
.about__rating { color: var(--c-ink-2); } .about__rating span { color: var(--fa-forest); }
.about__text { width: 600px; max-width: 100%; color: var(--c-ink-2); }
.store-buttons { width: 600px; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.about__cloud { position: absolute; pointer-events: none; }
.about__cloud--1 { z-index: 1; left: -330px; bottom: -380px; width: 2400px; height: 560px; }
.about__cloud--2 { z-index: 0; right: -150px; bottom: -140px; width: 891px; height: 296px; }
.about__cloud--3 { z-index: 0; left: -20px; bottom: -190px; width: 502px; height: 300px; }
@media (max-width: 1199.98px) {
  .about { padding-top: 10px; }
  .about__top { max-width: none; }
  .about__words { column-gap: 8px; }
  .about__pic { padding-top: 5px; } .about__pics { width: 70px; height: 32px; }
  .about__vec svg { width: 40px; height: 32px; }
}
@media (max-width: 809.98px) {
  .about__container { gap: 30px; }
  .about__top { padding: 0 20px; gap: 30px; }
  .about__words { column-gap: 6px; row-gap: 2px; }
  .about__pic { padding-top: 5px; } .about__pics { width: 48px; height: 24px; }
  .about__vec svg { width: 32px; height: 26px; }
  .about__chips { gap: 8px; }
  .about__phone { width: 200px; }
  .fade { width: 150px; }
  .about__bottom { padding: 0 20px; }
}