/* components.css — buttons, cards, phone-frame, chips, lang-switch */

/* Lang switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 2px;
}

.lang-switch button {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  transition: color var(--t-fast), background var(--t-fast);
  min-height: 32px;
}

.lang-switch button:hover { color: var(--text); }

.lang-switch button[aria-current="true"] {
  background: var(--brand);
  color: #08151a;
}

/* App Store CTA (brand-locked) */
.app-store-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  background: var(--text);
  color: #08151a;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  min-height: 48px;
}

.app-store-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08) inset, 0 0 28px var(--brand-dim);
}

.app-store-button:active { transform: translateY(0); }

.app-store-button__icon {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  flex-shrink: 0;
}

.app-store-button__lines {
  display: flex; flex-direction: column;
  line-height: 1.05;
  text-align: left;
}

.app-store-button__l1 {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.app-store-button__l2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Ghost CTA */
.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 20px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid var(--border);
  transition: background var(--t-fast), border-color var(--t-fast);
  min-height: 48px;
}

.ghost-button:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
}

.ghost-button__arrow {
  transition: transform var(--t-fast);
}

.ghost-button:hover .ghost-button__arrow {
  transform: translateX(3px);
}

/* Chips */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-muted);
}

.chip__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: background var(--t-accent), box-shadow var(--t-accent);
}

/* Phone frame */
.phone-frame {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 2.05;
  border-radius: 38px;
  padding: 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  margin-inline: auto;
}

.phone-frame::before {
  /* subtle accent ring/glow */
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 46px;
  background: radial-gradient(50% 50% at 50% 50%, var(--accent-soft), transparent 70%);
  filter: blur(28px);
  z-index: -1;
  opacity: 0.85;
  transition: background var(--t-accent), opacity var(--t-accent);
}

.phone-frame__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #000;
}

.phone-frame__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--t-med);
}

.phone-frame--swap .phone-frame__img {
  /* placeholder for crossfade animations */
}

/* Pillar card */
.pillar-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.pillar-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}

.pillar-card[data-accent] .pillar-card__icon {
  color: var(--accent);
}

.pillar-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  color: var(--accent);
  transition: background var(--t-accent), color var(--t-accent);
}

.pillar-card__icon svg { width: 22px; height: 22px; }

.pillar-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pillar-card__body {
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.5;
  max-width: 30ch;
}

/* ---- Metric card (Velora-styled) ---- */
.metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: clamp(190px, 18vw, 230px);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.metric-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.metric-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}

.metric-card__icon svg {
  width: 16px;
  height: 16px;
}

.metric-card__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.metric-card__value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.metric-card__unit {
  font-size: 0.85rem;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0;
  margin-left: 2px;
}

.metric-card__bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-top: var(--space-1);
}

.metric-card__bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 70%, white));
  border-radius: inherit;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 50%, transparent);
}

/* ---- Hero ring (mini activity ring) ---- */
.hero-ring {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-1), 0 0 28px color-mix(in oklab, var(--accent) 30%, transparent);
  display: grid;
  place-items: center;
  position: relative;
  color: var(--accent);
}

.hero-ring svg {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
}

.hero-ring__day {
  position: relative;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
  z-index: 1;
}

.hero-ring__num {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: -2px;
  z-index: 1;
}

/* ---- Hero streak chip ---- */
.hero-streak {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-width: 130px;
}

.hero-streak__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.hero-streak__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.hero-streak__unit {
  font-size: 0.8rem;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text-soft);
  margin-left: 1px;
}

.hero-streak__dots {
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

.hero-streak__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: inline-block;
}

.hero-streak__dots i.is-on {
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 50%, transparent);
}

/* Privacy badge / strip */
.privacy-strip {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.privacy-strip__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--brand-dim);
  color: var(--brand);
  display: grid; place-items: center;
  flex-shrink: 0;
}

.privacy-strip__icon svg { width: 24px; height: 24px; }

.privacy-strip__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.privacy-strip__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

.privacy-strip__body {
  color: var(--text-muted);
  font-size: var(--fs-small);
}

@media (max-width: 640px) {
  .privacy-strip { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); }
}