/* ==========================================================================
   又悠數位 YoYou Studio — Home page only (index.html)
   Hero / What I Do / Beyond Launch / About. Loaded after studio.css.
   ========================================================================== */
/* 07 Hero (home only) ------------------------------------------------------ */
.hero { position: relative; background: var(--st-ink); color: var(--st-paper); }
.hero__stage { position: relative; overflow: hidden; padding: calc(var(--st-header-h) + 36px) 0 56px; }
.hero__inner { position: relative; z-index: 2; }
.hero__title { font-size: var(--st-fs-h1); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; }
@media (max-width: 480px) {
  .hero__title { font-size: clamp(2.15rem, 10.6vw, 2.85rem); }
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: block; }
.hero__intro { max-width: 30em; text-wrap: pretty; margin-top: 28px; font-size: 1.02rem; line-height: 1.9; color: var(--st-text-mute-light); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 34px; }
.hero__actions .st-link { color: var(--st-paper); }

.hero__wordmark {
  position: relative; z-index: 1; margin-top: 56px; padding-inline: var(--st-gutter);
  font-weight: 900; font-size: clamp(2.2rem, 13.4vw, 4.4rem); line-height: .9; letter-spacing: -.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(238, 240, 248, .34);
}
.hero__portal { position: relative; z-index: 2; margin: 44px var(--st-gutter) 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--st-blue); }
@media (max-width: 1099.98px) {
  .hero__portal {
    border-radius: 16px;
    box-shadow: 0 20px 48px -12px rgba(8, 20, 53, .45);
  }
}
.hero__portal img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.hero__reveal { display: none; }

@media (min-width: 1100px) {
  .hero__stage { height: 100vh; height: 100svh; min-height: 720px; padding: calc(var(--st-header-h) + 2vh) 0 0; }
  .hero__inner { height: 100%; }
  .hero__copy { position: relative; z-index: 3; width: min(56vw, 860px); padding-top: clamp(3vh, 6vh, 7vh); }
  .hero__title { font-size: clamp(4.4rem, 7.5vw, 8.6rem); }
  .hero__intro { margin-top: 3.4vh; font-size: 1.08rem; }
  .hero__actions { margin-top: 4vh; }
  .hero__wordmark { position: absolute; bottom: 3.2vh; margin: 0; z-index: 1; font-size: clamp(5.5rem, 12.8vw, 15.5rem); -webkit-text-stroke-width: 2px; left: var(--st-gutter); padding-inline: 0; }
  .hero__portal { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; z-index: 2; clip-path: inset(17% 6% 15% 64%); }
  .hero__portal img { object-position: 50% 50%; }
    .hero__reveal { position: absolute; z-index: 4; left: var(--st-gutter); bottom: 6vh; display: block; color: var(--st-white); opacity: 0; pointer-events: none; }
  .hero__reveal strong { display: block; font-size: clamp(3rem, 7vw, 7rem); font-weight: 900; line-height: 1.05; }
  .hero__reveal span { display: block; margin-top: 6px; font-size: 1rem; font-weight: 700; }
}

/* hero entrance (CSS-driven, safe on mobile) */
html.js .hero__title .line > span { transform: translateY(108%); }
html.js .hero__portal { opacity: 0; }
html.js.is-ready .hero__title .line > span { transform: none; transition: transform 1.1s var(--st-ease); transition-delay: calc(.2s + var(--i) * .12s); }
html.js.is-ready .hero__portal { opacity: 1; transition: opacity 1.2s ease .5s; }
html.js.is-ready .hero__wordmark { animation: st-fade-in 1.4s var(--st-ease) .9s backwards; }

/* 09 What I Do -------------------------------------------------------------- */
.services { background: var(--st-ink); color: var(--st-paper); padding-block: var(--st-section); }
.services__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(36px, 7vw, 72px); }
.services__title { font-size: var(--st-fs-h2); font-weight: 900; line-height: 1.05; }
.services__title small { display: block; margin-top: .45em; font-size: clamp(.95rem, 2.2vw, 1.15rem); font-weight: 600; color: var(--st-text-mute-light); }
.works__head-more .st-link,
.services__more .st-link { font-size: 1rem; white-space: nowrap; }
.services__item { position: relative; display: grid; gap: 10px; padding-block: clamp(30px, 5vw, 48px); border-top: 1px solid var(--st-line-light); transition: opacity .6s ease; }
.services__item:last-child { border-bottom: 1px solid var(--st-line-light); }
.services__no { font-size: 1.05rem; font-weight: 800; color: var(--st-signal); }
.services__name { font-size: clamp(1.7rem, 7vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.services__zh { margin-top: 6px; font-size: 1rem; font-weight: 700; color: var(--st-text-mute-light); }
.services__desc { margin-top: 10px; max-width: 32em; font-size: 1rem; line-height: 1.85; color: var(--st-text-mute-light); }
.services__points { margin-top: 14px; display: grid; grid-template-columns: 1fr; column-gap: 32px; }
.services__points li { position: relative; padding: 9px 0 9px 20px; font-size: .95rem; font-weight: 600; line-height: 1.55; color: rgba(238, 240, 248, .92); border-bottom: 1px solid rgba(238, 240, 248, .1); }
.services__points li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; background: var(--st-signal); }
@media (min-width: 600px) and (max-width: 1099.98px) { .services__points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1099.98px) {
  .services {
    padding-bottom: clamp(56px, 10vw, 80px);
  }
  html.js .services__item {
    transition: opacity .5s ease, border-color .5s ease;
    opacity: .36;
  }
  .services__name {
    transition: transform .5s var(--st-ease), color .4s ease;
  }
  html.js .services__item.is-active {
    opacity: 1;
    border-top-color: var(--st-signal);
  }
  html.js .services__item.is-active .services__no {
    text-shadow: 0 0 16px rgba(255, 122, 69, .45);
  }
  html.js .services__item.is-active .services__name {
    color: var(--st-white);
    transform: translateX(8px);
  }
}
@media (min-width: 1100px) {
  .services__title { font-size: clamp(3.4rem, 5.6vw, 6rem); }
  .services__item { grid-template-columns: 72px minmax(0, 5fr) minmax(0, 6fr); column-gap: 3vw; align-items: start; padding-block: clamp(40px, 7vh, 64px); }
  .services__main { padding-top: 4px; }
  .services__name { transition: transform .7s var(--st-ease); font-size: clamp(2rem, 3vw, 3.2rem); }
  .services__item:hover .services__name { transform: translateX(10px); }
  .services__points { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .services__no { padding-top: .6em; }
  html.is-scrolly .services__item { opacity: .32; }
  html.is-scrolly .services__item.is-active, html.is-scrolly .services__item:hover { opacity: 1; }
}

/* 10 Beyond Launch --------------------------------------------------------- */
.care { position: relative; background: var(--st-blue); color: var(--st-white); overflow: hidden; }
.care__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.care__bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.care__bg::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(0deg, rgba(8, 20, 53, .78) 0%, rgba(8, 20, 53, 0) 42%),
    linear-gradient(90deg, rgba(8, 20, 53, .9) 0%, rgba(8, 20, 53, .72) 50%, rgba(8, 20, 53, .5) 100%),
    rgba(43, 63, 224, .22); }
.care__stage { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; min-height: auto; padding-block: clamp(80px, 14vw, 110px) clamp(110px, 20vw, 160px); }
.care__label { font-size: clamp(.95rem, 2.2vw, 1.15rem); font-weight: 700; color: rgba(255, 255, 255, .86); }
.care__title { margin-top: clamp(32px, 8vw, 48px); font-size: clamp(2.1rem, 9.4vw, 4.4rem); font-weight: 900; line-height: 1.24; letter-spacing: -.02em; }
.care__title .care__char { display: inline; }
.care__body { margin-top: clamp(48px, 11vw, 68px); max-width: 30em; font-size: 1.05rem; line-height: 2.05; color: rgba(255, 255, 255, .9); }
.care__points { display: flex; flex-wrap: wrap; gap: 18px 32px; margin-top: clamp(48px, 11vw, 64px); }
.care__points li { position: relative; padding-left: 20px; font-size: 1rem; font-weight: 700; line-height: 1.7; color: rgba(255, 255, 255, .92); }
.care__points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--st-signal); }

.care__steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(84px, 18vw, 120px); }
.care__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.care__dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--st-white); box-shadow: 0 0 0 3px rgba(8, 20, 53, .8), 0 0 8px rgba(255, 255, 255, .5); transition: transform .3s var(--st-ease), background-color .3s ease, box-shadow .3s ease; }
.care__step span { font-size: clamp(.82rem, 2.3vw, .95rem); font-weight: 800; line-height: 1.45; color: rgba(255, 255, 255, .92); transition: color .3s ease, opacity .3s ease; }
.care__rail { position: absolute; z-index: 0; left: 10%; right: 10%; top: 6px; height: 3px; background: rgba(255, 255, 255, .25); border-radius: 3px; }
.care__line-fill { position: absolute; inset: 0; background: var(--st-signal); transform-origin: left; box-shadow: 0 0 10px rgba(255, 122, 69, .8); border-radius: 3px; }
.care__track { position: absolute; z-index: 2; left: 10%; right: 10%; top: 7px; height: 0; pointer-events: none; }
.care__marker { position: absolute; left: 100%; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--st-signal); box-shadow: 0 0 0 6px rgba(255, 122, 69, .35), 0 0 16px rgba(255, 122, 69, .8); }
.care__marker::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #ffffff; }
@media (min-width: 1100px) {
  .care { min-height: 100svh; }
  .care__stage { min-height: 100svh; justify-content: center; padding-block: calc(var(--st-header-h) + 3vh) 6vh; }
  .care__title { font-size: clamp(3.6rem, 7vw, 8.2rem); line-height: 1.12; margin-top: 2.4vh; }
  .care__row { margin-top: 4vh; }
  .care__body { margin-top: 0; font-size: 1.08rem; }
  .care__points { margin-top: 3.4vh; gap: 8px 36px; }
  .care__points li { font-size: 1rem; }
  .care__steps { margin-top: 6vh; }
  .care__step span { font-size: 1rem; }
}

/* 11 About ----------------------------------------------------------------- */
.about { background: var(--st-paper); color: var(--st-ink); padding-block: var(--st-section); }
.about__grid { display: grid; gap: 40px; }
.about__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #c9cee8; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; }
.nowrap { white-space: nowrap; }
.about__content { container-type: inline-size; }
.about__title { font-size: clamp(1.9rem, 7.6vw, 3.4rem); font-size: min(8.6cqw, 3.4rem); font-weight: 900; line-height: 1.2; }
.about__text { margin-top: 28px; max-width: 28em; font-size: 1.08rem; line-height: 2; color: #2c3763; }
.about__more { margin-top: 32px; }
.about__more .st-link { font-size: 1.1rem; }
@media (min-width: 1100px) {
  .about__grid { grid-template-columns: repeat(12, 1fr); column-gap: 2.2vw; align-items: center; }
  .about__photo { grid-column: 1 / span 5; }
  .about__content { grid-column: 7 / span 6; }
  .about__title { font-size: clamp(2.6rem, 3.7vw, 4.4rem); font-size: min(8.6cqw, 4.4rem); }
}