/* ==============================================
   由野科技 (Uyea Tech) — Custom Stylesheet
   Built with Tailwind CSS CDN + Custom CSS
   ============================================== */

/* ----- CSS Variables ----- */
:root {
  --accent: #22C55E;
  --accent-hover: #16A34A;
  --warm: #F59E0B;
  --brand-900: #0F172A;
  --brand-800: #1E293B;
}

/* ----- Smooth Scrolling ----- */
html {
  scroll-behavior: smooth;
}

/* ----- Selection ----- */
::selection {
  background: rgba(34, 197, 94, 0.25);
  color: #0F172A;
}

/* ==============================================
   HEADER / NAVIGATION
   ============================================== */

#header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.nav-link {
  @apply relative px-4 py-2 rounded-lg text-sm font-semibold text-slate-700
         hover:text-brand-900 hover:bg-slate-100
         transition-all duration-300 ease-out;
}

/* Sliding underline from center on hover/active */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: #0F172A;
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* Active nav link — solid pill highlight */
.nav-link.text-brand-900.bg-slate-100 {
  @apply font-semibold;
}

.nav-link.text-brand-900.bg-slate-100::after {
  transform: translateX(-50%) scaleX(1);
  background: #0F172A;
}

/* Language Switch */
.lang-switch-wrap {
  @apply flex items-center rounded-xl p-1 gap-0.5;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
}

.lang-btn {
  @apply px-3.5 py-2 rounded-lg text-sm font-semibold transition-all duration-200
         cursor-pointer select-none min-w-[44px] text-center;
  color: #64748B;
}

.lang-btn:not(.active):hover {
  color: #1E293B;
  background: #FFFFFF;
}

.lang-btn.active {
  color: #FFFFFF;
  background: #0F172A;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}

/* Language Switch (Mobile) */
.lang-btn-m {
  @apply px-3 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200
         cursor-pointer select-none min-w-[36px] text-center;
  color: #64748B;
}

.lang-btn-m:not(.active):hover {
  color: #1E293B;
  background: #FFFFFF;
}

.lang-btn-m.active {
  color: #FFFFFF;
  background: #0F172A;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}

/* Mobile Menu */
.mobile-nav-link {
  @apply text-2xl font-bold text-white/80 hover:text-white transition-colors;
}

#mobile-menu.show {
  display: flex;
}

/* ==============================================
   BUTTONS
   ============================================== */

.btn-primary {
  @apply inline-flex items-center gap-2 bg-accent text-white font-semibold rounded-xl
         hover:bg-accent-hover active:scale-[0.98]
         transition-all duration-200 cursor-pointer;
}

.btn-outline-white {
  @apply inline-flex items-center gap-2 border-2 border-white/30 text-white font-semibold rounded-xl
         hover:bg-white/10 hover:border-white/50 active:scale-[0.98]
         transition-all duration-200 cursor-pointer;
}

.btn-outline {
  @apply inline-flex items-center gap-2 border-2 border-slate-300 text-slate-700 font-semibold rounded-xl
         hover:border-accent hover:text-accent active:scale-[0.98]
         transition-all duration-200 cursor-pointer;
}

/* ==============================================
   HERO SECTION
   ============================================== */

.hero-card {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

/* ==============================================
   PAIN POINT COMPARISON
   ============================================== */

.compare-card {
  @apply bg-white rounded-2xl p-6 lg:p-8 border border-slate-100;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

.compare-card.saas {
  @apply border-red-200;
}

.compare-card.youye {
  @apply border-accent/30;
}

.compare-item {
  @apply flex items-start gap-2.5 text-sm leading-relaxed;
}

.compare-item.bad::before {
  content: '✕';
  @apply text-red-400 font-bold text-base shrink-0 mt-0.5;
}

.compare-item.good::before {
  content: '✓';
  @apply text-accent font-bold text-base shrink-0 mt-0.5;
}

/* ==============================================
   PRODUCT CARDS
   ============================================== */

.product-card {
  @apply bg-white rounded-2xl border border-slate-100
         hover:-translate-y-1
         transition-all duration-300 flex flex-col overflow-hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}
.product-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.product-card.b2c {
  @apply border-warm/30 ring-1 ring-warm/10;
}

.product-card-header {
  @apply p-6 lg:p-8 pb-0;
}

.product-badge {
  @apply inline-block text-xs font-bold px-3 py-1.5 rounded-full;
}

.product-badge.b2b {
  @apply bg-blue-100 text-blue-700;
}

.product-badge.b2c {
  @apply bg-warm/15 text-warm;
}

.product-card-body {
  @apply p-6 lg:p-8 pt-4 flex-1 flex flex-col;
}

.product-card-footer {
  @apply mt-auto pt-6 border-t border-slate-100;
}

.product-features {
  @apply space-y-2.5 text-sm;
}

.product-features li {
  @apply flex items-start gap-2 text-slate-600;
}

.product-features li::before {
  content: '';
  @apply w-1.5 h-1.5 rounded-full bg-accent shrink-0 mt-2;
}

/* Toggle Tabs */
.toggle-tab {
  @apply px-5 py-2 rounded-lg text-sm font-medium text-slate-500
         hover:text-slate-700 transition-colors cursor-pointer;
}

.toggle-tab.active {
  @apply bg-white text-slate-900 shadow-sm;
}

/* ==============================================
   ADD-ON CARDS
   ============================================== */

.addon-card {
  @apply bg-white rounded-2xl p-6 lg:p-8 border border-slate-100
         hover:-translate-y-1
         transition-all duration-300;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.addon-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.07);
}

/* ==============================================
   WORKFLOW — Bento Cards (uyeacare style)
   ============================================== */

.wf-card {
  @apply relative overflow-hidden rounded-2xl border p-6 sm:p-8
         transition-all duration-300;
  border-color: rgba(74, 74, 74, 0.08);
  background: #fff;
}

.wf-card:hover {
  border-color: rgba(135, 169, 133, 0.20);
  box-shadow: 0 12px 40px rgba(135, 169, 133, 0.06);
  transform: translateY(-4px);
}

.wf-icon {
  @apply mb-4 inline-flex h-12 w-12 items-center justify-center rounded-xl
         transition-colors duration-300;
  background: rgba(135, 169, 133, 0.08);
  color: #87A985;
}

.wf-card:hover .wf-icon {
  background: #87A985;
  color: #fff;
}

.wf-badge {
  @apply absolute top-4 right-4 text-xs font-bold;
  color: rgba(135, 169, 133, 0.30);
}

.wf-glow {
  @apply absolute -bottom-4 -right-4 h-16 w-16 rounded-full
         transition-colors duration-500;
  background: rgba(135, 169, 133, 0.04);
}

.wf-card:hover .wf-glow {
  background: rgba(135, 169, 133, 0.08);
}

/* Payment Timeline */
.pay-card {
  @apply flex flex-col items-center gap-3 bg-white rounded-2xl border px-6 py-5 flex-1
         transition-all duration-200;
  border-color: rgba(74, 74, 74, 0.08);
}

.pay-card:hover {
  border-color: rgba(135, 169, 133, 0.15);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

.pay-circle {
  @apply w-14 h-14 rounded-full flex items-center justify-center
         text-lg font-bold;
  background: #4A4A4A;
  color: #fff;
}

.pay-circle-outline {
  @apply w-14 h-14 rounded-full flex items-center justify-center
         border-2 text-lg font-bold;
  border-color: rgba(74, 74, 74, 0.2);
  background: #fff;
  color: #4A4A4A;
}

.pay-circle-fill {
  @apply w-14 h-14 rounded-full flex items-center justify-center
         text-lg font-bold text-white;
  background: #87A985;
}

.pay-arrow {
  @apply flex items-center justify-center w-8 h-8 shrink-0;
  color: rgba(74, 74, 74, 0.25);
}

@media (max-width: 639px) {
  .pay-arrow {
    @apply rotate-90 w-full h-6;
  }
}

/* ==============================================
   TRUST CARDS
   ============================================== */

.trust-card {
  @apply bg-white/[0.06] border border-white/[0.08] rounded-2xl p-6
         hover:bg-white/[0.10]
         transition-all duration-300;
}

.trust-icon {
  @apply w-10 h-10 text-accent mb-4;
}

.trust-card h4 {
  @apply font-bold text-lg text-white mb-2;
}

.trust-card p {
  @apply text-sm text-slate-300 leading-relaxed;
}

/* ==============================================
   FAQ — Native details/summary (uyeacare style)
   ============================================== */

.faq-card {
  @apply rounded-2xl border bg-white transition-shadow duration-200 list-none;
  border-color: rgba(74, 74, 74, 0.08);
}

.faq-card:hover {
  border-color: rgba(135, 169, 133, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.faq-card[open] {
  border-color: rgba(135, 169, 133, 0.15);
}

.faq-details {
  @apply list-none;
}

.faq-details > summary::-webkit-details-marker {
  display: none;
}

.faq-summary {
  @apply flex cursor-pointer items-center gap-4 px-6 py-5
         list-none appearance-none select-none
         focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px];
  outline-color: #87A985;
}

.faq-help-icon {
  @apply h-5 w-5 shrink-0;
  color: rgba(135, 169, 133, 0.60);
}

.faq-q-text {
  @apply flex-1 text-left text-sm font-medium;
  color: #4A4A4A;
}

.faq-chevron {
  @apply h-4 w-4 shrink-0 transition-transform duration-200;
  color: rgba(74, 74, 74, 0.30);
}

.faq-details[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-a-wrap {
  @apply px-6 pb-5;
  padding-left: calc(1.5rem + 1.25rem + 1rem);
}

.faq-a-text {
  @apply text-sm leading-relaxed;
  color: rgba(74, 74, 74, 0.65);
}

/* ==============================================
   BLOG CARDS
   ============================================== */

.blog-card {
  @apply bg-white rounded-2xl border border-slate-100 overflow-hidden
         transition-all duration-300 flex flex-col;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.blog-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

.blog-card-img {
  @apply h-44 shrink-0;
}

/* Blog Carousel */
.blog-carousel-wrap {
  overflow: hidden;
}

.blog-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.blog-track::-webkit-scrollbar {
  display: none;
}

.blog-slide {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 100%;
}

@media (min-width: 640px) {
  .blog-slide {
    width: calc(50% - 12px);
  }
}

@media (min-width: 1024px) {
  .blog-slide {
    width: calc(33.333% - 16px);
  }
}

.blog-arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(74, 74, 74, 0.15);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  color: #4A4A4A;
  cursor: pointer;
}

.blog-arrow:hover {
  border-color: transparent;
  background: #87A985;
  color: #fff;
}

.blog-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  padding: 0;
  background: rgba(74, 74, 74, 0.2);
}

.blog-dot.active {
  width: 2rem;
  background: #87A985;
}

/* ==============================================
   FORM
   ============================================== */

.form-input {
  @apply w-full px-4 py-2.5 rounded-xl border border-slate-300
         text-sm text-slate-900
         focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent
         placeholder:text-slate-400
         transition-all duration-200;
}

/* ==============================================
   FOOTER
   ============================================== */

.footer-link {
  @apply hover:text-white transition-colors duration-200;
}

.footer-social-link {
  @apply w-9 h-9 rounded-lg bg-white/10 flex items-center justify-center
         text-slate-400 hover:bg-accent hover:text-white
         transition-all duration-200;
}



/* ==============================================
   ANIMATIONS
   ============================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Intersection Observer animation classes */
[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children animations */
[data-animate-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

[data-animate-stagger].visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-animate-stagger].visible > *:nth-child(2) { transition-delay: 0.10s; }
[data-animate-stagger].visible > *:nth-child(3) { transition-delay: 0.15s; }
[data-animate-stagger].visible > *:nth-child(4) { transition-delay: 0.20s; }
[data-animate-stagger].visible > *:nth-child(5) { transition-delay: 0.25s; }
[data-animate-stagger].visible > *:nth-child(6) { transition-delay: 0.30s; }

[data-animate-stagger].visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

/* Mobile (< 640px) */
@media (max-width: 639px) {
  /* Section spacing */
  section {
    @apply py-16;
  }

  /* Hero */
  #hero {
    @apply min-h-0 pt-20 pb-16;
  }
  #hero h1 {
    @apply text-3xl;
  }
  #hero p {
    @apply text-base;
  }

  /* Comparison cards */
  .compare-card {
    @apply p-5;
  }

  /* Product cards */
  .product-card-header {
    @apply p-5 pb-0;
  }
  .product-card-body {
    @apply p-5 pt-3;
  }
  .hero-card {
    @apply max-w-full;
  }

  /* Savings table — horizontal scroll */
  #product-savings-view .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
  #product-savings-view table {
    @apply text-xs;
  }

  /* Workflow cards */
  .wf-card {
    @apply p-5;
  }

  /* Payment timeline */
  .pay-arrow {
    @apply rotate-90 w-full h-6;
  }

  /* FAQ */
  .faq-summary {
    @apply px-4 py-4 gap-3;
  }
  .faq-a-wrap {
    padding-left: calc(1rem + 1rem + 0.75rem) !important;
  }
  .faq-q-text {
    @apply text-xs;
  }
  .faq-a-text {
    @apply text-xs;
  }

  /* Blog cards */
  .blog-card-img {
    @apply h-36;
  }

  /* CTA section */
  #contact form {
    @apply p-5;
  }
  #contact .btn-primary {
    @apply w-full justify-center;
  }

  /* Footer */
  footer {
    @apply pt-12 pb-6;
  }
  footer .grid {
    @apply gap-8;
  }

  /* Buttons */
  .btn-primary,
  .btn-outline-white,
  .btn-outline {
    @apply text-sm px-5 py-3 w-full justify-center;
  }

  /* Navigation */
  .nav-link {
    @apply text-sm;
  }
}

/* Tablet (640px - 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
  .compare-card {
    @apply p-6;
  }

  .wf-card {
    @apply p-6;
  }

  /* Hero heading on tablet */
  #hero h1 {
    @apply text-4xl;
  }
}

/* Large screens (1280px+) */
@media (min-width: 1280px) {
  .wf-card {
    @apply p-8;
  }
}

/* Ensure tables don't break on small screens */
@media (max-width: 767px) {
  table {
    @apply block overflow-x-auto whitespace-nowrap;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  [data-animate],
  [data-animate-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

}

/* ==============================================
   LINE CLAMP (Tailwind v3 utility)
   ============================================== */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==============================================
   PRINT STYLES
   ============================================== */
@media print {
  #header,
  #contact-form {
    display: none !important;
  }
}