/* Soulmark website aligned with the Soul OS visual language. */

html body {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  background-attachment: fixed;
  transition: background-color 0.35s ease, color 0.35s ease;
}

::selection {
  color: #fff;
  background: var(--color-accent);
}

html :focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

html .nav {
  background: rgba(var(--rgb-nav), 0.88);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: none;
}

html .nav--scrolled {
  background: rgba(var(--rgb-nav), 0.96);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

html .nav__links {
  padding: 4px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(var(--rgb-surface), 0.72);
  box-shadow: none;
}

html .nav__link {
  border-radius: 8px;
}

html .nav__link:hover,
html .nav__link.nav__link--active {
  color: var(--color-accent) !important;
  background: var(--accent-tint);
}

html .nav__lang,
html .nav__mobile-lang {
  min-height: 40px;
  border-radius: 10px;
  border-color: var(--border-subtle);
  background: rgba(var(--rgb-surface), 0.72);
}

html .nav__cta,
html .nav__mobile-cta,
html .btn--primary,
html .download-btn:not(.download-btn--outline) {
  color: #fff;
  background: var(--accent-bg);
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: 0 10px 28px var(--accent-glow);
}

html .nav__cta:hover,
html .nav__mobile-cta:hover,
html .btn--primary:hover,
html .download-btn:not(.download-btn--outline):hover {
  color: #fff;
  background: var(--accent-bg-hover);
  box-shadow: 0 14px 34px var(--accent-glow);
}

html .btn--secondary,
html .btn--outline,
html .download-btn--outline {
  color: var(--color-text);
  background: rgba(var(--rgb-surface), 0.72);
  border: 1px solid var(--border-medium);
  border-radius: 10px;
}

html .btn--secondary:hover,
html .btn--outline:hover,
html .download-btn--outline:hover {
  color: var(--color-accent);
  border-color: rgba(var(--rgb-accent), 0.52);
  background: var(--accent-tint);
}

html .page-section,
html .features,
html .intelligence,
html .reviews-section,
html .page-section--alt {
  background-color: transparent;
}

html .hero__eyebrow,
html .page-hero__eyebrow,
html .page-section__label,
html .cta-section__label,
html .shop-toolbar__count {
  color: var(--color-accent);
}

html .hero__eyebrow,
html .page-hero__eyebrow {
  display: inline-block;
  width: fit-content;
  padding: 6px 14px;
  border-color: rgba(var(--rgb-accent), 0.34);
  border: 1px solid rgba(var(--rgb-accent), 0.34);
  border-radius: 8px;
  background: var(--accent-tint);
}

.feature-card,
.signal-card,
.pricing-card,
.shop-card,
.team-card,
.faq-item,
.contact-block,
.review-bubble,
.story-block,
.app-feature-visual,
.download-card,
.checkout-card,
.checkout-summary,
.team-member,
.buy-modal__panel,
.vip-modal__panel,
.welcome-modal,
.team-drawer__panel,
.member-bio__panel {
  border-color: var(--border-medium);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.feature-card,
.signal-card,
.pricing-card,
.shop-card,
.team-card,
.faq-item,
.contact-block,
.review-bubble,
.story-block,
.app-feature-visual,
.download-card,
.checkout-card,
.checkout-summary {
  border-radius: 12px;
}

.feature-card,
.signal-card,
.pricing-card,
.shop-card,
.team-card,
.contact-block,
.review-bubble,
.story-block,
.download-card,
.checkout-card,
.checkout-summary {
  position: relative;
}

.feature-card::before,
.signal-card::before,
.pricing-card::before,
.shop-card::before,
.team-card::before,
.contact-block::before,
.review-bubble::before,
.story-block::before,
.download-card::before,
.checkout-card::before,
.checkout-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  z-index: 2;
  width: 72px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--color-accent);
  box-shadow: 0 0 16px var(--accent-glow);
  pointer-events: none;
}

html .feature-card__icon,
html .download-btn__icon,
html .pricing-card__badge,
html .buy-modal__dot.is-active,
html .vip-modal__success-icon {
  color: var(--color-accent);
  background: var(--accent-tint-strong);
}

html .feature-card__line,
html .signal-card__bar-fill,
html .pricing-card__list li::before,
html .faq-item__icon::before,
html .faq-item__icon::after {
  background: var(--color-accent);
}

html .shop-card__image,
html .team-member,
html .team-member__photo,
html .app-feature-visual,
html .download-card__visual,
html .qr-block__code {
  background: linear-gradient(145deg, var(--color-bg-warm), var(--color-surface));
}

html .shop-banner {
  background: #111319;
  border: 1px solid rgba(var(--rgb-accent), 0.32);
  border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--color-accent), var(--shadow-md);
}

html .pricing-card--featured {
  background: linear-gradient(155deg, var(--color-surface), var(--accent-tint));
  border-color: rgba(var(--rgb-accent), 0.5);
}

html input,
html textarea,
html select,
html .buy-modal__option,
html .checkout-pay-btn {
  color: var(--color-text);
  background: var(--color-bg-warm);
  border-color: var(--border-medium);
  border-radius: 8px;
}

html input:focus,
html textarea:focus,
html select:focus,
html .buy-modal__option.is-selected,
html .checkout-pay-btn.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}

html .page-hero__bg img,
html .cta-section__bg img,
html .photo-frame img,
html .moment-strip img {
  filter: saturate(0.58) contrast(1.02);
}

[data-mode="night"] .page-hero__bg img,
[data-mode="night"] .cta-section__bg img,
[data-mode="night"] .photo-frame img,
[data-mode="night"] .moment-strip img,
[data-mode="night"] .hero__bg-img {
  filter: brightness(0.52) saturate(0.5) contrast(1.08);
}

[data-mode="night"] .hero__bg-img {
  filter: brightness(0.48) saturate(0.58) contrast(1.08);
}

[data-mode="night"] .hero__bg-overlay {
  background: linear-gradient(
    100deg,
    rgba(var(--rgb-bg), 0.98) 0%,
    rgba(var(--rgb-bg), 0.9) 42%,
    rgba(var(--rgb-bg), 0.66) 72%,
    rgba(var(--rgb-bg), 0.44) 100%
  );
}

[data-mode="night"] .page-hero__overlay,
[data-mode="night"] .page-hero__overlay--deep,
[data-mode="night"] .cta-section__overlay {
  background: linear-gradient(95deg, rgba(var(--rgb-bg-warm), 0.97), rgba(var(--rgb-bg-warm), 0.78) 50%, rgba(var(--rgb-bg), 0.35));
}

html .footer {
  background: var(--footer-bg);
  border-top: 1px solid rgba(var(--rgb-accent), 0.28);
}

html .footer::before {
  background: var(--color-accent);
  box-shadow: 0 0 24px var(--accent-glow);
}

html .footer__download {
  color: var(--color-accent);
  border-color: rgba(var(--rgb-accent), 0.42);
}

html .about-guide-hint {
  position: relative;
  justify-content: center;
  width: auto;
  margin: 0 0 28px;
  padding: 9px 13px;
  color: #fff;
  background: #111319;
  border: 1px solid rgba(var(--rgb-accent), 0.48);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  text-shadow: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);
}

html .about-guide-hint::before {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 50%;
  width: 2px;
  height: 17px;
  background: var(--color-accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
  animation: about-guide-arrow 1.1s ease-in-out infinite;
}

html .about-guide-hint::after {
  content: '';
  position: absolute;
  bottom: -23px;
  left: calc(50% - 5px);
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  animation: about-guide-arrow-head 1.1s ease-in-out infinite;
}

@keyframes about-guide-arrow {
  0%, 100% { transform: translateY(-2px); opacity: 0.65; }
  50% { transform: translateY(2px); opacity: 1; }
}

@keyframes about-guide-arrow-head {
  0%, 100% { transform: translateY(-2px) rotate(45deg); opacity: 0.65; }
  50% { transform: translateY(2px) rotate(45deg); opacity: 1; }
}

body.page-about.about-guide-active {
  overflow: hidden;
}

body.page-about.about-guide-active::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(2, 4, 8, 0.82);
  backdrop-filter: blur(1px);
  pointer-events: auto;
}

.about-guide-active .page-hero {
  overflow: visible;
}

.about-guide-active .page-hero__content {
  z-index: auto;
}

html .about-guide-active .page-hero__action {
  position: relative;
  z-index: 1502;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  padding: 0 0 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none !important;
}

html .about-guide-active #teamDrawerOpen {
  min-height: 56px;
  color: #fff;
  background: var(--accent-bg);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(var(--rgb-accent), 0.2), 0 16px 44px var(--accent-glow);
}

.page-about .story-block {
  max-width: 920px;
  margin: 0 auto 72px;
  padding: 48px 56px;
}

.page-about .story-block p {
  max-width: 72ch;
  margin: 0 auto 28px;
  font-size: 1.0625rem;
  line-height: 1.85;
}

.page-about .story-block p:last-child {
  margin-bottom: 0;
}

@media (max-width: 960px) {
  html .nav__mobile {
    justify-content: flex-start;
    gap: 14px;
    padding: calc(var(--nav-height) + 24px) 20px 28px;
    overflow-y: auto;
    background: var(--color-bg);
  }

  html .nav__mobile a:not(.nav__mobile-cta) {
    font-size: 1.25rem;
  }

  html .nav__mobile-lang,
  html .nav__mobile-cta {
    margin-top: 0;
  }

  html .nav__mobile-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 144px;
  }

  body:has(.nav__mobile.is-open) .welcome-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 480px) {
  html body {
    background-size: 40px 40px;
  }

  .page-about .story-block {
    margin-bottom: 48px;
    padding: 28px 24px;
  }

  .page-about .story-block p {
    margin-bottom: 22px;
    font-size: 1rem;
    line-height: 1.8;
  }

  html .about-guide-active .page-hero__action {
    justify-self: start;
    align-items: flex-start;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body {
    transition: none;
  }
}