/* Global visual polish for public pages. CSS only; existing scripts and data flow stay unchanged. */
:root {
  --hy-brand: #ff4785;
  --hy-brand-dark: #d93067;
  --hy-coral: #ff7a59;
  --hy-teal: #10b3a3;
  --hy-ink: #172033;
  --hy-muted: #627086;
  --hy-soft: #f7f9fc;
  --hy-panel: rgba(255, 255, 255, 0.94);
  --hy-line: rgba(23, 32, 51, 0.1);
  --hy-line-strong: rgba(23, 32, 51, 0.16);
  --hy-shadow: 0 18px 46px rgba(23, 32, 51, 0.1);
  --hy-shadow-soft: 0 10px 28px rgba(23, 32, 51, 0.08);
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  color: var(--hy-ink);
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbff 42%, #fff6fa 76%, #ffffff 100%) !important;
  background-attachment: fixed;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::selection {
  background: var(--hy-brand);
  color: #fff;
}

body *,
body *::before,
body *::after {
  letter-spacing: 0 !important;
}

a {
  text-underline-offset: 3px;
}

img,
video {
  max-width: 100%;
}

/* Unified top navigation across Tailwind pages and legacy pages. */
#main-nav,
.header {
  background: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid rgba(23, 32, 51, 0.08) !important;
  box-shadow: 0 10px 30px rgba(23, 32, 51, 0.06) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#main-nav {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

#main-nav .max-w-7xl,
.header-content,
.nav-container {
  max-width: 1180px !important;
}

#main-nav a[href="/"] span,
.logo,
.nav-logo a {
  color: var(--hy-ink) !important;
  background: linear-gradient(135deg, var(--hy-ink), var(--hy-brand-dark)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

#main-nav .hidden.md\:flex.items-center.space-x-1,
.nav-menu {
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(248, 250, 252, 0.86) !important;
  border: 1px solid rgba(23, 32, 51, 0.06) !important;
}

#main-nav .hidden.md\:flex.items-center.space-x-1 a,
.nav-menu > li > a,
.nav a {
  min-height: 38px;
  border-radius: 999px !important;
  padding: 9px 14px !important;
  color: #475569 !important;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

#main-nav .hidden.md\:flex.items-center.space-x-1 a:hover,
#main-nav .hidden.md\:flex.items-center.space-x-1 a.text-brand-600,
.nav-menu > li > a:hover,
.nav-menu > li > a.active,
.nav a:hover {
  background: #ffffff !important;
  color: var(--hy-brand-dark) !important;
  box-shadow: 0 6px 16px rgba(23, 32, 51, 0.08) !important;
}

#mobile-menu {
  background: #fff !important;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 20px 40px rgba(23, 32, 51, 0.16) !important;
}

#mobile-menu a,
#mobile-menu button {
  border-radius: 8px;
  padding: 10px 12px;
}

#mobile-menu a:hover,
#mobile-menu button:hover {
  background: rgba(255, 71, 133, 0.07);
  color: var(--hy-brand-dark) !important;
}

/* Page shells and headings. */
.container,
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl {
  width: 100%;
}

.page-hero,
.hero-section,
.gradient-bg,
body > .pt-24 > .bg-gradient-to-br,
body > .pt-24 > .bg-slate-50,
body > .pt-24 > .bg-white,
main > .bg-gradient-to-br,
section.hero,
.article-header {
  position: relative;
}

.page-hero,
.hero-section,
.gradient-bg,
body > .pt-24 > .bg-gradient-to-br {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 46%, #fff4f8 100%) !important;
  color: var(--hy-ink) !important;
  border-bottom: 1px solid rgba(255, 71, 133, 0.16);
}

.page-hero {
  clip-path: none !important;
  margin-bottom: 0 !important;
  padding: 112px 24px 72px !important;
}

.page-hero h1,
.hero-section h1,
body > .pt-24 h1,
main h1,
.article-title,
.page-title h1 {
  color: var(--hy-ink) !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
}

.page-title h1,
.hero-section h1,
body > .pt-24 h1 {
  background: linear-gradient(135deg, var(--hy-ink), var(--hy-brand-dark), var(--hy-teal)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.page-hero p,
.hero-section p,
.page-title p,
body > .pt-24 p,
.article-meta,
.article-summary {
  color: var(--hy-muted) !important;
}

/* Cards and panels. */
.section-card,
.card,
.plan-card,
.pricing-card,
.feature-card,
.service-card,
.strategy-card,
.case-card,
.case-item,
.article,
.news-card,
.tool-card,
.material-card,
.content-card,
.talent-card,
.kol-card,
.video-card,
.faq-item,
.bg-white.rounded-2xl,
.bg-white.rounded-3xl,
.bg-white.rounded-xl,
[class*="shadow"].bg-white,
[class*="shadow-sm"].bg-white,
[class*="shadow-lg"].bg-white {
  border-radius: 8px !important;
  border: 1px solid rgba(23, 32, 51, 0.08) !important;
  background: var(--hy-panel) !important;
  box-shadow: var(--hy-shadow-soft) !important;
}

.section-card:hover,
.card:hover,
.plan-card:hover,
.pricing-card:hover,
.feature-card:hover,
.service-card:hover,
.strategy-card:hover,
.case-card:hover,
.case-item:hover,
.news-card:hover,
.tool-card:hover,
.material-card:hover,
.content-card:hover,
.talent-card:hover,
.kol-card:hover,
.video-card:hover,
.faq-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--hy-shadow) !important;
  border-color: rgba(255, 71, 133, 0.22) !important;
}

.rounded-3xl,
.rounded-2xl {
  border-radius: 8px !important;
}

.rounded-xl {
  border-radius: 8px !important;
}

.rounded-lg {
  border-radius: 6px !important;
}

/* Buttons, filters, and form controls. */
.btn,
.btn-primary,
.btn-secondary,
.btn-login-index,
.pricing-btn,
.strategy-btn,
.plan-button,
.tag-btn,
.tab-btn,
.filter-btn,
.category-btn,
button,
input[type="submit"],
input[type="button"],
a[class*="bg-brand"],
a[class*="bg-gradient"],
button[class*="bg-brand"],
button[class*="bg-gradient"] {
  border-radius: 999px !important;
}

.btn-primary,
.pricing-btn.primary,
.strategy-btn,
.plan-card.recommended .plan-button,
a[class*="bg-brand"],
button[class*="bg-brand"],
a[class*="from-brand"],
button[class*="from-brand"] {
  background: linear-gradient(135deg, var(--hy-brand) 0%, var(--hy-coral) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 14px 28px rgba(255, 71, 133, 0.24) !important;
}

.btn-secondary,
.btn-login-index,
.pricing-btn,
button[class*="bg-white"],
a[class*="bg-white"] {
  border-color: rgba(23, 32, 51, 0.12) !important;
  box-shadow: 0 8px 20px rgba(23, 32, 51, 0.07) !important;
}

button:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
a[class*="bg-brand"]:hover,
a[class*="bg-white"]:hover {
  transform: translateY(-2px) !important;
}

input,
select,
textarea {
  border-radius: 8px !important;
  border-color: rgba(23, 32, 51, 0.14) !important;
  background: rgba(255, 255, 255, 0.94) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--hy-brand) !important;
  box-shadow: 0 0 0 4px rgba(255, 71, 133, 0.12) !important;
  outline: none !important;
}

/* Market/list pages. */
#categoryFilters,
.category-tabs,
.platform-tags,
.filters,
.filter-tabs {
  gap: 8px !important;
  padding: 6px !important;
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.06);
}

.tag-btn.active,
.tab-btn.active,
.filter-btn.active,
.category-btn.active,
#categoryFilters button.active,
#categoryFilters .active {
  background: linear-gradient(135deg, var(--hy-brand), var(--hy-coral)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(255, 71, 133, 0.22) !important;
}

[class*="grid"] > .bg-white,
[id*="grid"] > .bg-white,
[id*="Grid"] > .bg-white,
[id*="list"] > .bg-white,
[id*="List"] > .bg-white {
  border-radius: 8px !important;
  border: 1px solid rgba(23, 32, 51, 0.08) !important;
  box-shadow: var(--hy-shadow-soft) !important;
}

/* Article and generated news pages. */
.article {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.article-header {
  padding: 42px 44px 30px !important;
  border-bottom: 1px solid rgba(23, 32, 51, 0.08) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
}

.article-category,
.badge,
.tag,
[class*="badge"] {
  border-radius: 999px !important;
  background: rgba(255, 71, 133, 0.1) !important;
  color: var(--hy-brand-dark) !important;
}

.article-title {
  font-size: 38px !important;
}

.article-content {
  padding: 40px 44px !important;
  color: #2d3848 !important;
  font-size: 17px !important;
}

.article-content p {
  margin-bottom: 18px !important;
  text-align: left !important;
}

.article-content h2,
.article-content h3 {
  color: var(--hy-ink) !important;
  line-height: 1.25 !important;
}

.article-content img,
.case-image,
.material-image,
.cover-image {
  border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(23, 32, 51, 0.1);
}

/* Data-heavy and account pages. */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border-radius: 8px;
}

th {
  background: #f8fafc !important;
  color: var(--hy-ink) !important;
  font-weight: 700 !important;
}

td,
th {
  border-color: rgba(23, 32, 51, 0.08) !important;
}

.modal,
.dialog,
[role="dialog"] {
  border-radius: 8px !important;
}

/* Footers and floating actions. */
footer,
.footer {
  background: #121a28 !important;
  color: #fff !important;
}

footer a:hover,
.footer a:hover {
  color: #ff9ab8 !important;
}

.floating-contact,
#floating-contact,
[class*="floating"] {
  border-radius: 999px !important;
}

@media (max-width: 1024px) {
  #main-nav .hidden.md\:flex.items-center.space-x-1 {
    display: none !important;
  }

  .page-hero {
    padding: 96px 20px 56px !important;
  }

  .section-card {
    padding: 32px !important;
  }
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }

  #main-nav {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .page-hero,
  .hero-section,
  body > .pt-24 > .bg-gradient-to-br,
  body > .pt-24 > .bg-slate-50 {
    padding-top: 86px !important;
    padding-bottom: 34px !important;
  }

  .page-hero h1,
  .hero-section h1,
  body > .pt-24 h1,
  .page-title h1 {
    font-size: 30px !important;
  }

  .section-card,
  .article-header,
  .article-content,
  .plan-card,
  .pricing-card,
  .feature-card,
  .service-card,
  .case-card {
    padding: 22px !important;
  }

  .article {
    margin: 20px 14px !important;
  }

  .article-title {
    font-size: 26px !important;
  }

  .article-content {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

  #categoryFilters,
  .category-tabs,
  .platform-tags,
  .filters,
  .filter-tabs {
    justify-content: flex-start !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    border-radius: 8px !important;
  }

  .plans-grid,
  .pricing-grid,
  .stats-grid,
  .features-grid,
  .cases-grid,
  .strategies-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .page-hero h1,
  .hero-section h1,
  body > .pt-24 h1,
  .page-title h1 {
    font-size: 27px !important;
  }

  .btn,
  .btn-primary,
  .btn-secondary,
  .pricing-btn,
  .strategy-btn,
  .plan-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}