/* =============================================================================
   TASK BERRY · World-Class UI Upgrade  (CSS-only overlay, v1)
   - No HTML copy / image changes. Pure visual system: type, color, spacing,
     radius, shadow, motion. Loaded LAST so it refines the existing template.
   ============================================================================= */

:root{
  /* ink & text */
  --wc-ink:#0B1524;          /* headings */
  --wc-body:#46566B;         /* body text */
  --wc-muted:#6B7A90;        /* secondary */
  --wc-line:#E7EDF5;         /* hairline borders */

  /* surfaces */
  --wc-bg:#FFFFFF;
  --wc-soft:#F5F9FE;         /* section tint A */
  --wc-soft2:#EAF2FC;        /* section tint B */

  /* brand */
  --wc-blue:#1E66E0;
  --wc-blue-deep:#0B3FA0;
  --wc-orange:#FF8A1E;
  --wc-orange-deep:#F26C0A;

  /* gradients */
  --wc-grad-cta:linear-gradient(135deg,#FFA336 0%,#F26C0A 100%);
  --wc-grad-blue:linear-gradient(135deg,#2E7BF6 0%,#0B3FA0 100%);
  --wc-grad-hero:linear-gradient(160deg,#EAF3FF 0%,#F6FAFF 55%,#FFFFFF 100%);

  /* elevation */
  --wc-sh-sm:0 1px 2px rgba(11,21,36,.06),0 2px 6px rgba(11,21,36,.05);
  --wc-sh:0 10px 30px rgba(11,21,36,.08);
  --wc-sh-lg:0 24px 60px rgba(11,21,36,.13);
  --wc-sh-cta:0 12px 26px rgba(242,108,10,.34);

  /* radius */
  --wc-r-sm:12px; --wc-r:16px; --wc-r-lg:24px; --wc-pill:999px;

  /* type */
  --wc-sans:"Inter","puhuimedium",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --wc-maxw:1200px;
}

/* ----------------------------------------------------------------------------
   1) Base typography & rhythm
   ---------------------------------------------------------------------------- */
html{scroll-behavior:smooth}
body{
  font-family:var(--wc-sans)!important;
  color:var(--wc-body)!important;
  line-height:1.7!important;
  letter-spacing:normal!important;
  background:var(--wc-bg)!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button,input,select,textarea,a{font-family:var(--wc-sans)!important}
h1,h2,h3,h4{color:var(--wc-ink);letter-spacing:-.02em;line-height:1.16}
::selection{background:rgba(30,102,224,.18);color:var(--wc-ink)}

/* gentle, consistent motion on interactive elements (no layout-shifting scale) */
.ecommerce-register-btn,.why-choose-register-btn,.growth-support-register-btn,
.growth-support-image-btn,.submit-btn,.reg-wrap,.hero-contact-btn,
.testimonial-card,.cf-form,.partner-item,.cf-country-trigger,.form-input,
.ecommerce-feature-item,.why-choose-feature-item,.service-item,.dropdown-menu a{
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s ease,
             background-color .25s ease,border-color .2s ease,color .2s ease,
             filter .2s ease!important;
}

/* custom scrollbar (desktop) */
@media(min-width:769px){
  *{scrollbar-width:thin;scrollbar-color:#c9d6e8 transparent}
  *::-webkit-scrollbar{width:10px;height:10px}
  *::-webkit-scrollbar-thumb{background:#c9d6e8;border-radius:999px;border:2px solid #fff}
  *::-webkit-scrollbar-thumb:hover{background:#aab9d0}
}

/* ----------------------------------------------------------------------------
   2) Header — lighter, premium sticky glass
   ---------------------------------------------------------------------------- */
.header[data-v-b96db0b5],.header{
  background:rgba(255,255,255,.78)!important;
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 rgba(11,21,36,.06),0 8px 24px rgba(11,21,36,.05)!important;
  border-bottom:1px solid rgba(231,237,245,.9);
}
.logo-container[data-v-b96db0b5],.logo-container{
  background:transparent!important;border-radius:0!important;
}
.menu-btn span[data-v-b96db0b5]{height:2.5px!important;border-radius:2px;background:var(--wc-ink)!important}
.dropdown-menu a[data-v-b96db0b5]:hover,.desktop-menu a[data-v-b96db0b5]:hover{color:var(--wc-blue)!important}

/* ----------------------------------------------------------------------------
   3) Hero — fix contrast, refine title chip & lead text
   ---------------------------------------------------------------------------- */
.header-hero{background:var(--wc-grad-hero)!important}
.hero-title,.hero-banner-content .hero-title{
  background:rgba(255,255,255,.62)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.7);
  color:var(--wc-ink)!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
  border-radius:var(--wc-r)!important;
  box-shadow:var(--wc-sh)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.hero-features p{
  color:var(--wc-body)!important;
  font-weight:500!important;
  font-size:clamp(15px,1.4vw,19px)!important;
}

/* ----------------------------------------------------------------------------
   4) Section rhythm & headings (titles were oversized w/ !important)
   ---------------------------------------------------------------------------- */
.ecommerce-title,.global-opportunities-title,.testimonials-title,
.why-choose-section .why-choose-title,.growth-support-title{
  font-weight:800!important;letter-spacing:-.02em!important;color:var(--wc-ink)!important;
}
.ecommerce-title{font-size:clamp(26px,3.4vw,40px)!important;line-height:1.2!important}
.global-opportunities-title{font-size:clamp(26px,3.6vw,42px)!important;line-height:1.2!important}
.ecommerce-intro{font-size:clamp(15px,1.5vw,19px)!important;color:var(--wc-body)!important}

/* alternating section backgrounds for depth */
.ecommerce-section{background:var(--wc-bg)!important;padding:clamp(48px,7vh,88px) 0!important}
.why-choose-section{background:var(--wc-soft)!important;padding:clamp(48px,7vh,88px) 0!important}
.global-opportunities-section{background:var(--wc-bg)!important}
.partners-section{background:var(--wc-soft)!important}
.testimonials-section{background:var(--wc-bg)!important}
.growth-support-section{background:var(--wc-soft)!important}

/* ----------------------------------------------------------------------------
   5) Feature items / icons — tidy cards with soft brand halo
   ---------------------------------------------------------------------------- */
.ecommerce-feature-item,.why-choose-feature-item,.service-item{
  background:#fff;border:1px solid var(--wc-line);border-radius:var(--wc-r);
  padding:20px!important;box-shadow:var(--wc-sh-sm);
}
.ecommerce-feature-item:hover,.why-choose-feature-item:hover,.service-item:hover{
  box-shadow:var(--wc-sh);transform:translateY(-3px);border-color:#d9e6f7;
}
.ecommerce-feature-icon,.why-choose-feature-icon,
.growth-support-icon-wrapper,.service-item-icon-wrapper{
  background:var(--wc-grad-cta)!important;
  border-radius:14px!important;
  width:56px!important;height:56px!important;min-width:56px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-shadow:0 8px 18px rgba(242,108,10,.30)!important;
}
/* normalize every (inconsistent) feature icon asset to crisp white */
.feature-icon-img,.why-choose-icon-img,.growth-support-icon-img,.service-item-icon-img{
  width:28px!important;height:28px!important;object-fit:contain!important;
  filter:brightness(0) invert(1)!important;
}
.ecommerce-feature-title,.why-choose-feature-title,.growth-support-item-title{
  color:var(--wc-ink)!important;font-weight:700!important;
  font-size:clamp(16px,1.6vw,19px)!important;line-height:1.3!important;
}
.ecommerce-feature-description,.why-choose-feature-description{
  color:var(--wc-body)!important;font-size:clamp(14px,1.3vw,16px)!important;line-height:1.6!important;
}

/* ----------------------------------------------------------------------------
   6) CTAs — gradient, glow, premium press states
   ---------------------------------------------------------------------------- */
.ecommerce-register-btn,.why-choose-register-btn,.growth-support-register-btn,
.submit-btn,.reg-wrap{
  background:var(--wc-grad-cta)!important;
  color:#fff!important;border:none!important;
  border-radius:var(--wc-pill)!important;
  box-shadow:var(--wc-sh-cta)!important;
  font-weight:700!important;letter-spacing:.01em;
}
.ecommerce-register-btn:hover,.why-choose-register-btn:hover,
.growth-support-register-btn:hover,.submit-btn:hover,.reg-wrap:hover{
  filter:brightness(1.05)!important;
  box-shadow:0 16px 34px rgba(242,108,10,.42)!important;
  transform:translateY(-2px)!important;
}
.ecommerce-register-btn:active,.why-choose-register-btn:active,
.growth-support-register-btn:active,.submit-btn:active,.reg-wrap:active{
  transform:translateY(0)!important;filter:brightness(.98)!important;
}

/* ----------------------------------------------------------------------------
   7) Testimonials — unified premium cards
   ---------------------------------------------------------------------------- */
.testimonial-card{
  background:#fff!important;border:1px solid var(--wc-line)!important;
  border-radius:var(--wc-r-lg)!important;box-shadow:var(--wc-sh)!important;
  padding:28px 24px!important;
}
.testimonial-card:hover{box-shadow:var(--wc-sh-lg)!important;transform:translateY(-4px)}
.testimonial-card .testimonial-name{font-size:clamp(18px,1.6vw,22px)!important;color:var(--wc-ink)!important;font-weight:700!important}
.testimonial-card .testimonial-role{font-size:clamp(13px,1.2vw,15px)!important;color:var(--wc-muted)!important;font-weight:600!important}
.testimonial-card .testimonial-quote{font-size:clamp(15px,1.4vw,18px)!important;line-height:1.7!important;color:var(--wc-body)!important;padding:24px 8px 8px!important}
.testimonial-card .testimonial-avatar-wrapper{
  width:clamp(80px,12vw,104px)!important;height:clamp(80px,12vw,104px)!important;
  min-width:clamp(80px,12vw,104px)!important;min-height:auto!important;
  border-radius:var(--wc-pill)!important;overflow:hidden!important;
  box-shadow:0 6px 18px rgba(11,21,36,.16);border:3px solid #fff;
}
.testimonial-card .testimonial-info{margin-top:0!important;margin-left:0!important}

/* orange ribbon badges (testimonials/growth) */
.testimonials-title-banner,.growth-support-title-banner,.testimonials-title-banner{
  background:var(--wc-grad-cta)!important;border-radius:var(--wc-pill)!important;
  box-shadow:var(--wc-sh-cta)!important;
}

/* ----------------------------------------------------------------------------
   8) Partners — tidy logo row
   ---------------------------------------------------------------------------- */
.partner-item{
  background:#fff;border:1px solid var(--wc-line);border-radius:var(--wc-r-sm);
  padding:16px 18px!important;box-shadow:var(--wc-sh-sm);
  filter:saturate(.85);opacity:.92;
}
.partner-item:hover{filter:saturate(1);opacity:1;box-shadow:var(--wc-sh);transform:translateY(-2px)}

/* ----------------------------------------------------------------------------
   9) Contact form — premium glass card
   ---------------------------------------------------------------------------- */
.contact-form-section{
  background:radial-gradient(1200px 480px at 50% -10%,#EAF3FF 0%,#F5F9FE 45%,#FFFFFF 100%)!important;
  padding:clamp(48px,7vh,88px) 20px!important;
}
.cf-form{
  border:1px solid var(--wc-line)!important;border-radius:var(--wc-r-lg)!important;
  box-shadow:var(--wc-sh-lg)!important;padding:clamp(24px,3vw,40px)!important;
}
.cf-form-title{color:var(--wc-ink)!important;font-weight:800!important}
.cf-form-badge{background:#EAF2FC!important;color:var(--wc-blue)!important}
.form-input,.cf-phone-input-wrapper,.cf-country-trigger,.cf-gender-trigger{
  border-radius:var(--wc-r-sm)!important;border-color:#d8e2ef!important;
}
.form-input:focus,.cf-phone-focused{
  border-color:var(--wc-orange)!important;
  box-shadow:0 0 0 4px rgba(242,108,10,.14)!important;
}
.form-label{color:var(--wc-ink)!important;font-weight:600!important}
.submit-btn{height:auto!important;padding:15px 24px!important;font-size:16px!important}

/* ----------------------------------------------------------------------------
   10) Footer — refined dark, fix runaway sizes/hacks
   ---------------------------------------------------------------------------- */
.footer{background:linear-gradient(180deg,#0E1B2E,#0A1422)!important;padding:clamp(40px,6vh,64px) 0 0!important}
.footer-content{padding:0 24px!important}
.footer-section h3{font-size:clamp(16px,1.6vw,20px)!important;color:#fff!important;font-weight:700!important;margin-bottom:16px!important}
.footer-section:last-child{margin-left:0!important}
.footer-section:last-child h3{font-size:clamp(16px,1.6vw,20px)!important}
.footer-contact p,.footer-links li{font-size:clamp(14px,1.3vw,16px)!important;line-height:1.7!important;color:#C7D2E0!important}
.footer-links a{color:#C7D2E0!important}
.footer-links a:hover{color:#fff!important}
.footer-bottom{border-top:1px solid rgba(255,255,255,.10)!important;margin-top:28px!important;padding:18px 24px!important}

/* ----------------------------------------------------------------------------
   11) Floating WhatsApp — keep brand green, calmer motion
   ---------------------------------------------------------------------------- */
.whatsapp-float-button{animation:none!important;box-shadow:0 10px 26px rgba(37,211,102,.45)!important}
.whatsapp-float-button:hover{transform:translateY(-3px)!important}

/* ----------------------------------------------------------------------------
   12) Scroll-reveal (progressive enhancement; JS adds .wc-reveal/.wc-in)
   ---------------------------------------------------------------------------- */
.wc-reveal{opacity:0;transform:translateY(22px)}
.wc-in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.16,.84,.44,1)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .wc-reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}