/* ===========================================================
   Aifit — sections: journey, support, connect, voices, footer
   =========================================================== */

/* ---------- journey ---------- */
.journey { background: var(--lav); padding: clamp(3.5rem, 8vh, 6.5rem) 0; }
.journey-wrap { display: grid; grid-template-columns: 0.9fr 2.1fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: start; }
.journey-title { font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin: 1rem 0 1.1rem; }
.journey-lead { color: var(--text); font-size: 0.95rem; margin-bottom: 1.6rem; }
.journey-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem); }
.jcard { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.jcard:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -28px rgba(60,48,96,.55); }
.jcard-media { aspect-ratio: 5/4; background: var(--lav-2); }
.jcard-media image-slot::part(empty) { background: linear-gradient(135deg, var(--lav-2), var(--lav-3)); color: var(--purple); }
.jcard-body { padding: 1.1rem 1.1rem 1.3rem; display: flex; flex-direction: column; position: relative; flex: 1; }
.jcard-tag { font-size: 0.7rem; font-weight: 700; color: var(--purple); letter-spacing: .04em; }
.jcard-title { font-size: clamp(1.1rem, 1.5vw, 1.32rem); margin: 0.35rem 0 0.55rem; color: var(--ink); }
.jcard-desc { font-size: 0.82rem; color: var(--text); line-height: 1.75; }
.jcard-more { position: absolute; right: 1rem; bottom: 1.1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--lav-2); color: var(--purple); display: inline-flex; align-items: center; justify-content: center; transition: background .3s, color .3s, transform .3s; }
.jcard-more .ic { width: 1em; height: 1em; }
.jcard:hover .jcard-more { background: var(--node, var(--purple)); color: #fff; transform: translateX(3px); }

/* ---------- support (dark) ---------- */
.support { background: var(--dark); padding: clamp(3rem, 6.5vh, 5rem) 0; color: #fff; }
.support-grid { display: grid; grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr)); gap: clamp(0.8rem, 1.3vw, 1.2rem); align-items: stretch; }
.support-intro { display: flex; flex-direction: column; justify-content: center; padding-right: 0.5rem; }
.support-title { color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.support-sub { color: rgba(255,255,255,.66); font-size: 0.84rem; margin: 0.8rem 0 1.2rem; }
.support-more { display: inline-flex; align-items: center; gap: 0.4em; color: var(--gold); font-weight: 700; font-size: 0.84rem; }
.support-more .ic { width: 1em; height: 1em; transition: transform .25s; }
.support-more:hover .ic { transform: translateX(4px); }
.scard { background: #fff; border-radius: 14px; padding: 1.2rem 0.95rem 2.4rem; position: relative; color: var(--ink); display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s; }
.scard:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -22px rgba(0,0,0,.5); }
.scard-arr { transition: background .25s, color .25s, transform .25s; }
.scard:hover .scard-arr { background: var(--purple); color: #fff; transform: translateX(3px); }
.venue-btn:disabled { opacity: .55; cursor: not-allowed; }
.scard-ic { width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--lav-2); color: var(--purple); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.7rem; }
.scard-ic .ic { width: 1.5rem; height: 1.5rem; }
.scard-title { font-size: 0.96rem; color: var(--ink); line-height: 1.45; }
.scard-desc { font-size: 0.74rem; color: var(--text); margin-top: 0.4rem; line-height: 1.65; }
.scard-arr { position: absolute; left: 0.95rem; bottom: 1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--lav); color: var(--purple); display: inline-flex; align-items: center; justify-content: center; }
.scard-arr .ic { width: 0.9em; height: 0.9em; }

/* venue */
.venue { margin-top: clamp(1rem, 2vw, 1.6rem); display: grid; grid-template-columns: 0.9fr 1.4fr; background: var(--dark-2); border-radius: 18px; overflow: hidden; box-shadow: 0 26px 50px -28px rgba(0,0,0,.6); }
.venue-media { min-height: 200px; }
.venue-media image-slot::part(empty) { background: linear-gradient(135deg, #4a4856, #34333c); color: rgba(255,255,255,.6); }
.venue-body { padding: clamp(1.4rem, 2.4vw, 2.1rem); display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.venue-title { color: #fff; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.venue-sub { color: rgba(255,255,255,.66); font-size: 0.86rem; }
.venue-form { display: flex; gap: 0.7rem; margin: 0.7rem 0 0.3rem; flex-wrap: wrap; }
.venue-select { position: relative; flex: 1; min-width: 180px; }
.venue-select select { width: 100%; appearance: none; -webkit-appearance: none; background: #fff; border: 0; border-radius: 999px; padding: 0.85em 2.6em 0.85em 1.3em; font-family: inherit; font-size: 0.92rem; color: var(--ink); cursor: pointer; }
.venue-caret { position: absolute; right: 1.1em; top: 50%; transform: translateY(-50%) rotate(90deg); width: 1em; height: 1em; color: var(--purple); pointer-events: none; }
.venue-btn { padding-inline: 1.8em; white-space: nowrap; }
.venue-all { display: inline-flex; align-items: center; gap: 0.4em; color: rgba(255,255,255,.8); font-size: 0.82rem; font-weight: 600; margin-top: 0.4rem; }
.venue-all .ic { width: 1em; height: 1em; transition: transform .25s; }
.venue-all:hover .ic { transform: translateX(4px); }

/* ---------- connect ---------- */
.connect { background: var(--lav); padding: clamp(3.5rem, 7vh, 6rem) 0; }
.connect-grid { display: grid; grid-template-columns: 0.95fr 1.3fr 0.95fr; gap: clamp(1.2rem, 2vw, 1.8rem); align-items: stretch; }

/* story */
.story { position: relative; border-radius: 18px; overflow: hidden; min-height: 360px; display: flex; box-shadow: var(--shadow); }
.story-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(47,41,66,.12) 0%, rgba(47,41,66,.2) 45%, rgba(47,41,66,.82) 100%); }
.story-body { position: relative; z-index: 2; margin-top: auto; padding: 1.6rem; color: #fff; }
.story-title { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.story-text { color: rgba(255,255,255,.86); font-size: 0.86rem; margin: 0.7rem 0 1.1rem; }
.story-link { display: inline-flex; align-items: center; gap: 0.6em; color: #fff; font-weight: 700; font-size: 0.88rem; }
.story-play { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); display: inline-flex; align-items: center; justify-content: center; }
.story-play .ic { width: 1.1em; height: 1.1em; }
.story image-slot::part(empty) { background: linear-gradient(150deg, #C9D7E8, #DAD0EC 55%, #EBDDE6); color: var(--purple-deep); }

/* app */
.app { background: #fff; border-radius: 18px; padding: clamp(1.5rem, 2.4vw, 2.2rem); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.app-title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--ink); }
.app-sub { font-size: 0.66em; color: var(--purple); }
.app-text { font-size: 0.9rem; color: var(--text); margin: 0.7rem 0 1.3rem; }
.app-inner { display: flex; align-items: center; gap: 1.4rem; flex: 1; }
.app-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.app-list li { display: flex; align-items: center; gap: 0.6em; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.app-check { width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--lav-2); color: var(--purple); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.app-check .ic { width: 0.9em; height: 0.9em; }
.phone { position: relative; width: 132px; flex: none; aspect-ratio: 132/270; background: linear-gradient(160deg, #2F2E37, #4a4856); border-radius: 26px; padding: 9px; box-shadow: 0 24px 44px -22px rgba(47,41,66,.7); }
.phone-notch { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 38%; height: 8px; border-radius: 99px; background: #2F2E37; z-index: 2; }
.phone-screen { width: 100%; height: 100%; border-radius: 18px; background: linear-gradient(180deg, #F4EFFB, #E7DEF4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 1rem; }
.phone-flower { width: 2rem; height: 2rem; color: var(--purple); }
.phone-name { font-family: var(--mincho); font-weight: 700; font-size: 0.84rem; color: var(--purple-deep); }
.phone-rows { display: flex; flex-direction: column; gap: 6px; width: 80%; margin-top: 0.4rem; }
.phone-rows span { height: 8px; border-radius: 99px; background: rgba(124,107,166,.25); }
.phone-rows span:nth-child(2) { width: 80%; } .phone-rows span:nth-child(3) { width: 60%; }
.app-link { display: inline-flex; align-items: center; gap: 0.4em; color: var(--purple-deep); font-weight: 700; font-size: 0.86rem; margin-top: 1.3rem; }
.app-link .ic { width: 1em; height: 1em; transition: transform .25s; }
.app-link:hover .ic { transform: translateX(4px); }

/* contact card */
.ccard { background: linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%); border-radius: 18px; padding: clamp(1.5rem, 2.2vw, 2rem); color: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.7rem; }
.ccard-title { color: #fff; font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin-bottom: 0.4rem; }
.ccard-row { display: flex; align-items: center; gap: 0.8rem; background: rgba(255,255,255,.96); border-radius: 14px; padding: 0.85rem 1rem; color: var(--ink); transition: transform .25s, box-shadow .25s; }
.ccard-row:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(0,0,0,.4); }
.ccard-ic { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--lav-2); color: var(--purple); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ccard-ic .ic { width: 1.4rem; height: 1.4rem; }
.ccard-ic--line { background: #06C755; color: #fff; }
.ccard-tx { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.ccard-tx small { font-size: 0.66rem; color: var(--muted); }
.ccard-tx b { font-family: var(--mincho); font-size: 1.32rem; color: var(--ink); }
.ccard-row:nth-child(n+3) .ccard-tx b { font-family: var(--gothic); font-size: 0.98rem; }
.ccard-tx em { font-style: normal; font-size: 0.68rem; color: var(--muted); }
.ccard-arr { width: 1.1em; height: 1.1em; color: var(--purple); flex: none; }
.ccard-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; font-size: 0.74rem; color: rgba(255,255,255,.85); }
.ccard-foot b { font-size: 0.84rem; }
.ccard-fab { width: 3rem; height: 3rem; border-radius: 50%; background: #fff; color: var(--purple); display: inline-flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 10px 22px -10px rgba(0,0,0,.5); }
.ccard-fab .ic { width: 1.4rem; height: 1.4rem; }

/* ---------- voices ---------- */
.voices { background: #fff; padding: clamp(3.5rem, 7vh, 6rem) 0; }
.voices-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.voices-title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-top: 0.5rem; }
.voices-all { display: inline-flex; align-items: center; gap: 0.4em; color: var(--purple-deep); font-weight: 700; font-size: 0.88rem; }
.voices-all .ic { width: 1em; height: 1em; transition: transform .25s; }
.voices-all:hover .ic { transform: translateX(4px); }
.voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.vcard { display: flex; align-items: center; gap: 1rem; background: var(--lav); border-radius: 16px; padding: 1.3rem 1.4rem; margin: 0; box-shadow: var(--shadow-sm); }
.vcard-avatar { width: 4.2rem; height: 4.2rem; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 6px 16px -8px rgba(60,48,96,.5); }
.vcard-avatar image-slot::part(empty) { background: linear-gradient(135deg, var(--lav-2), var(--lav-3)); color: var(--purple); font-size: 0.6rem; }
.vcard-quote { font-size: 0.86rem; color: var(--ink); margin: 0 0 0.5rem; line-height: 1.7; }
.vcard-who { font-size: 0.74rem; color: var(--muted); font-weight: 600; }

/* ---------- footer ---------- */
.ftr { background: var(--purple-ink); color: rgba(255,255,255,.82); padding: clamp(3rem, 6vh, 4.5rem) 0 1.6rem; }
.ftr-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.ftr-logo { height: 2.4rem; width: auto; aspect-ratio: 658 / 248; display: block; margin-bottom: 0.3rem; }
.ftr-tag { color: #C9B9E6; font-family: var(--mincho); margin-top: 0.6rem; }
.ftr-desc { font-size: 0.82rem; color: rgba(255,255,255,.6); margin-top: 0.8rem; max-width: 24rem; }
.ftr-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ftr-col { display: flex; flex-direction: column; gap: 0.55em; }
.ftr-col h4 { font-family: var(--mincho); font-size: 0.92rem; color: #fff; margin-bottom: 0.4em; }
.ftr-col a { font-size: 0.86rem; color: rgba(255,255,255,.72); transition: color .2s; }
.ftr-col a:hover { color: #C9B9E6; }
.ftr-col--info p { font-size: 0.82rem; color: rgba(255,255,255,.6); line-height: 1.9; }
.ftr-base { display: flex; justify-content: space-between; align-items: center; padding-top: 1.5rem; font-size: 0.72rem; color: rgba(255,255,255,.5); flex-wrap: wrap; gap: 0.5rem; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-wrap { grid-template-columns: 1fr; }
  .hero-plat { order: -1; width: 100%; max-width: 460px; margin: 0 auto; }
  .journey-wrap { grid-template-columns: 1fr; }
  .journey-cards { grid-template-columns: repeat(2, 1fr); }
  .support-grid { grid-template-columns: 1fr; }
  .support-intro { text-align: center; align-items: center; }
  .support-cards-wrap { }
  .support-grid .scard { }
  .venue { grid-template-columns: 1fr; }
  .connect-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
  .voices-grid { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .support-grid { grid-template-columns: repeat(3, 1fr); }
  .support-intro { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
}
@media (max-width: 680px) {
  .journey-cards { grid-template-columns: 1fr 1fr; }
  .support-grid { grid-template-columns: 1fr 1fr; }
  .support-intro { flex-direction: column; align-items: flex-start; }
  .app-inner { flex-direction: column-reverse; align-items: stretch; }
  .phone { align-self: center; }
  .voices-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .journey-cards { grid-template-columns: 1fr; }
  .support-grid { grid-template-columns: 1fr; }
}