/* ============================================================
   STILL — Dark mode overrides
   All rules scoped to [data-theme="dark"].
   Per brand v1.2: Chill Blue (#83BDEC) replaces gold accents.
   ============================================================ */

[data-theme="dark"] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .nav {
  background: rgba(5, 6, 10, 0.6);
  backdrop-filter: saturate(140%) blur(18px);
}
[data-theme="dark"] .nav.is-scrolled {
  background: rgba(5, 6, 10, 0.92);
  border-bottom-color: var(--line);
}
/* Mobile: solid background, no blur (see .nav comment in components.css) */
@media (max-width: 1023px) {
  [data-theme="dark"] .nav,
  [data-theme="dark"] .nav.is-scrolled {
    background: rgba(5, 6, 10, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
[data-theme="dark"] .nav__menu a { color: var(--text-muted); }
[data-theme="dark"] .nav__menu a:hover,
[data-theme="dark"] .nav__menu a[aria-current="page"] { color: var(--text-primary); }
[data-theme="dark"] .nav__submenu {
  background: var(--bg-elevated);
  border-color: var(--line);
}
[data-theme="dark"] .nav__submenu a { color: var(--text-muted); }
[data-theme="dark"] .nav__submenu a:hover { color: var(--text-primary); background: var(--bg-soft); }
[data-theme="dark"] button.nav__lang,
[data-theme="dark"] .nav__lang-btn { border-color: var(--line); color: var(--text-muted); }
[data-theme="dark"] button.nav__lang:hover,
[data-theme="dark"] .nav__lang-btn:hover,
[data-theme="dark"] .nav__lang-btn[aria-expanded="true"] { border-color: var(--text-primary); color: var(--text-primary); }

/* Dropdown popover on dark theme */
[data-theme="dark"] .nav__lang-list {
  background: var(--bg-elevated);
  border-color: var(--line);
}
[data-theme="dark"] .nav__lang-item { color: var(--text-primary); }
[data-theme="dark"] .nav__lang-item:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .nav__lang-item[aria-current="true"] {
  background: rgba(131, 189, 236, 0.12);
  color: var(--color-chill-blue);
}

/* ============================================================
   App teaser — gateway from still.html → still-app.html
   ============================================================ */
.still-app-teaser {
  padding: var(--space-9) 0;
  background:
    radial-gradient(60% 50% at 0% 50%, rgba(131, 189, 236, 0.10) 0%, transparent 60%),
    var(--bg-primary);
  border-top: 1px solid var(--line);
}
.still-app-teaser__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}
.still-app-teaser__content { max-width: 52ch; }
.still-app-teaser__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 var(--space-4);
  max-width: 22ch;
}
.still-app-teaser__body {
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
}
.still-app-teaser__visual {
  display: block;
  /* Cap visual so it stays proportional even on wide screens. */
  max-width: 280px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease);
}
.still-app-teaser__visual:hover { transform: translateY(-4px); }
.still-app-teaser__visual img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(14, 19, 32, 0.18));
}
@media (max-width: 1023px) {
  .still-app-teaser__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  /* Mobile: 30% smaller than before — was 200px, now 140px */
  .still-app-teaser__visual { max-width: 140px; }
  .still-app-teaser__visual img { max-height: 224px; object-fit: contain; }
}
@media (max-width: 479px) {
  .still-app-teaser__visual { max-width: 110px; }
  .still-app-teaser__visual img { max-height: 170px; }
}

/* Dark-theme override (still.html uses data-theme="dark") */
[data-theme="dark"] .still-app-teaser {
  background:
    radial-gradient(60% 50% at 0% 50%, rgba(131, 189, 236, 0.16) 0%, transparent 60%),
    transparent;
}

/* Han / JP font tuning for teaser title */
html[lang="zh-Hant"] .still-app-teaser__title { font-family: var(--font-han); font-weight: 700; }
html[lang="ja"]      .still-app-teaser__title { font-family: var(--font-jp);  font-weight: 700; letter-spacing: 0.01em; }

[data-theme="dark"] .footer {
  background: #02030A;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
}
[data-theme="dark"] .footer__top { border-bottom-color: var(--line); }
[data-theme="dark"] .footer__tagline { color: var(--text-primary); }
[data-theme="dark"] .footer__col a:hover { color: var(--text-primary); }

[data-theme="dark"] .btn--primary {
  background: var(--color-chill-blue);
  color: #05060A;
}
[data-theme="dark"] .btn--primary:hover {
  background: var(--accent-hover);
  color: #05060A;
}
[data-theme="dark"] .btn--ghost {
  border-color: var(--line);
  color: var(--text-primary);
}
[data-theme="dark"] .btn--ghost:hover {
  border-color: var(--color-chill-blue);
  color: var(--color-chill-blue);
  background: rgba(131, 189, 236, 0.05);
}

/* ---- STILL hero ----------------------------------------- */

.still-hero {
  position: relative;
  padding: var(--space-10) 0 var(--space-9);
  overflow: hidden;
  background:
    radial-gradient(40% 30% at 80% 20%, rgba(131, 189, 236, 0.18) 0%, transparent 60%),
    radial-gradient(50% 40% at 20% 100%, rgba(144, 184, 255, 0.10) 0%, transparent 60%);
}
.still-hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
.still-hero__content { max-width: 560px; }
.still-hero__title {
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: -0.03em;
  margin: var(--space-3) 0 var(--space-5);
}
/* CJK versions of the hero title are short ("漂浮於壓力之上。" / "ストレスの上を、ふわりと。")
   and must stay on a single line. Scale the font with viewport so they fit on phones. */
html[lang="zh-Hant"] .still-hero__title,
html[lang="ja"]      .still-hero__title {
  white-space: nowrap;
  font-size: clamp(28px, 7vw, 72px);
}

/* Two-sentence statements/headlines that include an explicit \n in their
   JSON strings. `pre` honours the newline AND prevents either sentence from
   wrapping internally (which previously caused 4 lines on narrow viewports). */
html[lang="zh-Hant"] .still-statement__body,
html[lang="ja"]      .still-statement__body,
html[lang="zh-Hant"] .still-experience__title,
html[lang="ja"]      .still-experience__title {
  white-space: pre;
  max-width: none;
  font-size: clamp(20px, 3.8vw, 52px);
  letter-spacing: -0.01em;
}
/* Closing statement (all 3 languages have \n now) — same treatment.
   Higher specificity than the generic .still-closing__statement rule below
   so this clamp() wins. */
.still-closing__statement[data-i18n="still.closing.statement"],
[data-i18n="still.closing.statement"] {
  white-space: pre;
  max-width: none;
  font-size: clamp(22px, 4.6vw, 60px);
  letter-spacing: -0.02em;
}
.still-hero__sub {
  font-size: var(--text-body-lg);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.still-hero__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* STILL product render — hero stage */
.still-device {
  position: relative;
  width: 100%;
  padding: var(--space-6);
}
.still-device::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  border-radius: 50%;
  background:
    radial-gradient(50% 60% at 50% 60%, rgba(131, 189, 236, 0.35) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
.still-device img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(131, 189, 236, 0.15)) drop-shadow(0 12px 30px rgba(0, 0, 0, 0.4));
}

@media (max-width: 1023px) {
  .still-hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .still-device { max-width: 560px; margin-inline: auto; }
}

/* Experience figure (angle render) */
.still-experience {
  padding: var(--space-9) 0;
  border-top: 1px solid var(--line);
}
.still-experience__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-7);
  align-items: center;
}
.still-experience__copy { max-width: 520px; }
.still-experience__title {
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  margin: var(--space-3) 0;
}
.still-experience__sub {
  font-size: var(--text-body-lg);
  color: var(--text-muted);
}
.still-experience__figure {
  position: relative;
  padding: var(--space-5);
}
.still-experience__figure::before {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(131, 189, 236, 0.2) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
}
.still-experience__figure img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.45));
}
@media (max-width: 1023px) {
  .still-experience__inner { grid-template-columns: 1fr; }
}

/* Internal figure for tech intro */
.still-tech__figure {
  display: flex;
  justify-content: center;
  margin: var(--space-6) auto var(--space-7);
  max-width: 720px;
  position: relative;
}
.still-tech__figure::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(131, 189, 236, 0.18) 0%, transparent 70%);
  filter: blur(50px);
  z-index: 0;
}
.still-tech__figure img {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.5));
}

/* ---- STILL statement ----------------------------------- */

.still-statement {
  padding: var(--space-10) 0;
  text-align: center;
}
.still-statement__body {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 18ch;
  margin-inline: auto;
}

/* ---- Pillars (3) --------------------------------------- */

.still-pillars {
  padding: var(--space-9) 0;
  border-top: 1px solid var(--line);
}
.still-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.still-pillar {
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.still-pillar:hover {
  border-color: rgba(131, 189, 236, 0.4);
  transform: translateY(-2px);
}
.still-pillar__num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-chill-blue);
  font-size: var(--text-h4);
  margin-bottom: var(--space-3);
}
.still-pillar__title {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  margin-bottom: var(--space-3);
}
.still-pillar__desc {
  color: var(--text-muted);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}
@media (max-width: 1023px) {
  .still-pillars__grid { grid-template-columns: 1fr; }
}

/* ---- Five core technologies ----------------------------- */

.still-tech {
  padding: var(--space-9) 0;
  border-top: 1px solid var(--line);
}
.still-tech__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.still-tech-card {
  padding: var(--space-5);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.02) 0%, rgba(131, 189, 236, 0.03) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.still-tech-card:hover { border-color: rgba(131, 189, 236, 0.45); }
.still-tech-card--v2 {
  background: linear-gradient(155deg, rgba(131, 189, 236, 0.10) 0%, rgba(144, 184, 255, 0.06) 100%);
  border-color: rgba(131, 189, 236, 0.3);
}
.still-tech-card__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h4);
  color: var(--color-chill-blue);
  margin-bottom: var(--space-2);
}
.still-tech-card__title {
  font-size: var(--text-h4);
  line-height: 1.3;
  margin-bottom: 4px;
}
.still-tech-card__title-zh {
  font-size: var(--text-small);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  font-weight: 500;
}
.still-tech-card__desc {
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: var(--lh-small);
}
.still-tech-card__tag {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 4px 10px;
  background: rgba(131, 189, 236, 0.15);
  color: var(--color-chill-blue);
  border-radius: var(--radius-pill);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 1023px) {
  .still-tech__grid { grid-template-columns: 1fr; }
}

/* ---- Closing -------------------------------------------- */

.still-closing {
  padding: var(--space-10) 0;
  text-align: center;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(131, 189, 236, 0.18) 0%, transparent 60%);
}
.still-closing__statement {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.still-closing__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-body-lg);
  color: var(--color-chill-blue);
  max-width: 32ch;
  margin: 0 auto var(--space-7);
}
.still-closing__cta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  max-width: 100%;
}

/* ---- Disclaimer ----------------------------------------- */

.still-disclaimer {
  padding: var(--space-5) 0 var(--space-7);
  text-align: center;
  color: var(--text-soft);
  font-size: var(--text-micro);
  letter-spacing: 0.04em;
  max-width: 64ch;
  margin: 0 auto;
}

/* ============================================================
   MOBILE OVERRIDES — closing statement + teaser visual
   ============================================================ */
@media (max-width: 599px) {
  /* "Above Stress.\nInto STILL." — Playfair Display italic at 40px
     in serif overflowed 375px viewports. Shrink and let the \n still
     split the two sentences onto separate lines via white-space: pre. */
  .still-closing__statement[data-i18n="still.closing.statement"],
  [data-i18n="still.closing.statement"] {
    font-size: clamp(28px, 8vw, 44px) !important;
  }

  /* Teaser visual on phones — restore prominence. Previous 110px was
     too small; bump back up so the mockup is clearly visible. */
  .still-app-teaser__visual { max-width: 220px; }
  .still-app-teaser__visual img { max-height: 340px; }

  /* Closing section CTA — stack the two buttons. "Explore the STILL
     App" is too wide to share a row with "Shop STILL" on phones. */
  .still-closing__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  .still-closing__cta .btn { width: 100%; }

  /* STILL hero CTA — same treatment if both buttons are long. */
  .still-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
  }
  .still-hero__cta .btn { width: 100%; }
}

@media (max-width: 420px) {
  .still-app-teaser__visual { max-width: 200px; }
  .still-app-teaser__visual img { max-height: 310px; }
}