/* ============================================================
   WINIVEXGO THEME — landing + about pages
   Primary: #c63c3c  |  Dark: #a02e2e  |  Xlight: #f5e0e0
============================================================ */

/* Force palette regardless of backgroundChange setting */
:root {
  --primary:       #c63c3c !important;
  --primary-dark:  #a02e2e !important;
  --primary-light: #d96060;
  --primary-xlight:#f5e0e0;
  --primary-rgb:   198,60,60 !important;
  --green:         #c63c3c !important;
  --green-soft:    rgba(198,60,60,.1) !important;
}

/* ── NAV ── */
.nav-links a:hover,
.nav-links a.active-link        { color:#c63c3c }
.btn-browse-web                 { background:#c63c3c; border-color:#c63c3c }
.btn-browse-web:hover           { background:#a02e2e; border-color:#a02e2e }
.btn-join                       { color:#c63c3c; border-color:#c63c3c }
.btn-join:hover                 { background:#c63c3c; color:#fff }
.lang-dd a:hover,.lang-dd a.active { color:#c63c3c; background:rgba(198,60,60,.08) }

/* ── HERO (home page) ── */
.hero {
  background: linear-gradient(135deg,#c63c3c 0%,#a02e2e 55%,#7a1f1f 100%);
  padding: 64px 0 0;
  text-align: left;
  overflow: hidden;
  position: relative
}
.hero::before {
  content:'';position:absolute;top:-80px;right:-80px;
  width:340px;height:340px;border-radius:50%;
  background:rgba(255,255,255,.06);pointer-events:none
}
.hero::after {
  content:'';position:absolute;bottom:40px;left:-60px;
  width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.04);pointer-events:none
}
.hero .container {
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:40px
}
.hero h1 {
  font-size:2.6rem;font-weight:900;color:#fff;
  line-height:1.2;margin-bottom:14px
}
.hero h1 .hl { color:rgba(255,255,255,.75) }
.hero-logo   { display:none }
.hero p      { font-size:1.05rem;color:rgba(255,255,255,.78);max-width:500px;margin:0 0 28px }
.hero-btns   { justify-content:flex-start }

.hero-btn--vendor {
  background:#fff;color:#c63c3c;border-color:#fff
}
.hero-btn--vendor:hover {
  background:#f5e0e0;color:#a02e2e;
  box-shadow:0 6px 24px rgba(0,0,0,.15)
}
.hero-btn--delivery {
  background:rgba(255,255,255,.15);color:#fff;
  border-color:rgba(255,255,255,.4)
}
.hero-btn--delivery:hover {
  background:rgba(255,255,255,.25);color:#fff;
  border-color:rgba(255,255,255,.7)
}

/* hero right visual */
.hero-visual {
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:12px
}
.hero-logo-card {
  background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.2);
  border-radius:24px;padding:28px 32px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center
}
.hero-logo-card img {
  height:180px;width:auto;object-fit:contain;
  filter:none
}

/* trust pills */
.hero-trust-row {
  display:flex;gap:10px;flex-wrap:wrap
}
.hero-trust-pill {
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);
  border-radius:100px;font-size:.74rem;font-weight:600;
  color:rgba(255,255,255,.85)
}
.hero-trust-pill svg {
  width:12px;height:12px;stroke:rgba(255,255,255,.7);flex-shrink:0
}

/* wave */
.hero-wave { display:block;width:100%;line-height:0;margin-top:40px }
.hero-wave svg { display:block;width:100%;height:48px }
.hero-illustration { display:none }

/* ── HOW IT WORKS ── */
.how-it-works { padding:60px 0;background:#fff }

.sec-label {
  display:inline-block;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  color:#c63c3c;background:#f5e0e0;
  padding:4px 14px;border-radius:100px;margin-bottom:10px
}

.hiw-grid {
  display:flex;align-items:flex-start;gap:0;margin-top:36px
}
.hiw-card {
  flex:1;text-align:center;padding:32px 24px;
  border-radius:20px;background:#f7f7f7;
  border:1.5px solid #e8ebe9;
  transition:.3s;position:relative
}
.hiw-card:hover {
  border-color:#c63c3c;
  box-shadow:0 8px 28px rgba(198,60,60,.1);
  transform:translateY(-3px)
}
.hiw-card:hover .hiw-icon { background:#c63c3c;color:#fff }
.hiw-num {
  position:absolute;top:16px;right:18px;
  font-size:2rem;font-weight:900;color:#f5e0e0;line-height:1
}
.hiw-icon {
  width:56px;height:56px;border-radius:16px;
  background:#f5e0e0;color:#c63c3c;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;transition:.3s
}
.hiw-icon svg { width:26px;height:26px;stroke:currentColor }
.hiw-card h4 { font-size:.95rem;font-weight:700;color:#2F3934;margin-bottom:8px }
.hiw-card p  { font-size:.82rem;color:#717C77;line-height:1.6 }
.hiw-connector {
  flex:0 0 48px;display:flex;align-items:center;
  justify-content:center;padding-top:28px
}
.hiw-connector svg { width:48px;height:20px }

/* ── SERVICES accent ── */
.svc-icon-btn.active { border-color:#c63c3c;background:rgba(198,60,60,.08) }
.svc-icon-btn:hover  { border-color:#c63c3c }

/* ── REFERRAL / CTA — red gradient ── */
.refer-card { background:linear-gradient(135deg,#a02e2e,#c63c3c) }
.cta-box    { background:linear-gradient(135deg,#a02e2e,#c63c3c) }

/* ── FEATURES — red gradient bg ── */
.features {
  background:linear-gradient(135deg,#c63c3c 0%,#a02e2e 55%,#7a1f1f 100%);
  position:relative
}
.features .sec-header h2 { color:#fff }
.features .sec-header p  { color:rgba(255,255,255,.72) }
.features .sec-label     { background:rgba(255,255,255,.15);color:#fff }
.feat-card {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
  color:#fff
}
.feat-card h4 { color:#fff }
.feat-card p  { color:rgba(255,255,255,.75) }
.feat-card:hover {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.45);
  box-shadow:0 8px 28px rgba(0,0,0,.2)
}
.feat-ico { background:rgba(255,255,255,.15);border-radius:12px;padding:8px }
.slider-arrow { border-color:rgba(255,255,255,.3);color:#fff }
.slider-arrow.visible { border-color:rgba(255,255,255,.5) }
.slider-arrow:hover { background:rgba(255,255,255,.15) }

/* ── SPECIAL — red gradient bg ── */
.special {
  background:linear-gradient(135deg,#7a1f1f 0%,#a02e2e 50%,#c63c3c 100%)
}
.special .sec-header h2 { color:#fff }
.sp-card {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18)
}
.sp-card h4 { color:#fff }
.sp-card p  { color:rgba(255,255,255,.75) }
.sp-card:hover {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.45)
}
.sp-dot       { background:rgba(255,255,255,.35) }
.sp-dot.active{ background:#fff }

/* ── TESTIMONIALS — red gradient bg ── */
.testimonials {
  background:linear-gradient(135deg,#c63c3c 0%,#a02e2e 55%,#7a1f1f 100%)
}
.testimonials .sec-header h2 { color:#fff }
.test-card {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18)
}
.test-card .qm   { color:rgba(255,255,255,.3) }
.test-text        { color:rgba(255,255,255,.82) }
.test-name        { color:#fff }
.test-role        { color:rgba(255,255,255,.6) }
.test-stars       { color:#ffd166 }
.test-card:hover {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.4)
}

/* ── STAT / FEAT hover ── */
.stat-card:hover { border-color:#c63c3c }

/* ── PAGE HERO (inner pages) ── */
.page-hero { background:linear-gradient(135deg,#c63c3c,#7a1f1f) }

/* ── ABOUT HERO ── */
.about-hero {
  background:linear-gradient(135deg,#c63c3c 0%,#a02e2e 55%,#7a1f1f 100%);
  padding:56px 0;position:relative;overflow:hidden
}
.about-hero::before {
  content:'';position:absolute;top:-60px;right:-60px;
  width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,.07)
}
.about-hero::after {
  content:'';position:absolute;bottom:-40px;left:-40px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.05)
}
.about-hero .container { position:relative;z-index:2 }
.about-hero h1 { font-size:2rem;font-weight:800;color:#fff;margin-bottom:8px }
.about-hero p  { color:rgba(255,255,255,.72);font-size:.95rem;max-width:520px }
.about-breadcrumb {
  display:flex;align-items:center;gap:6px;
  font-size:.82rem;color:rgba(255,255,255,.6);margin-top:10px
}
.about-breadcrumb a { color:rgba(255,255,255,.6);transition:.2s }
.about-breadcrumb a:hover { color:#fff }
.about-breadcrumb span { opacity:.5 }

/* ── MISSION STRIP ── */
.about-mission {
  background:#f5e0e0;border-top:3px solid #c63c3c;padding:36px 0
}
.about-mission-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px
}
.about-mission-item { text-align:center;padding:20px 16px }
.ami-icon {
  width:48px;height:48px;border-radius:14px;
  background:#c63c3c;color:#fff;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 12px
}
.ami-icon svg { width:22px;height:22px;stroke:#fff }
.about-mission-item h4 { font-size:.9rem;font-weight:700;color:#2F3934;margin-bottom:4px }
.about-mission-item p  { font-size:.8rem;color:#717C77 }

/* ── FOUNDER SECTION ── */
.about-founder { padding:64px 0 }
.about-founder-grid {
  display:grid;grid-template-columns:320px 1fr;
  gap:56px;align-items:start
}
.founder-photo-col { display:flex;flex-direction:column;align-items:center }
.founder-photo-wrap {
  width:100%;border-radius:20px;overflow:hidden;
  border:4px solid #f5e0e0;
  box-shadow:0 12px 40px rgba(198,60,60,.15);
  position:relative
}
.founder-photo-wrap img {
  width:100%;aspect-ratio:3/4;object-fit:cover;display:block
}
.founder-name-card { margin-top:16px;text-align:center;width:100% }
.founder-name-card h3 { font-size:1.15rem;font-weight:800;color:#2F3934;margin-bottom:2px }
.founder-position {
  display:inline-block;font-size:.78rem;font-weight:700;
  color:#c63c3c;background:#f5e0e0;
  padding:3px 14px;border-radius:100px;margin-top:4px
}

/* about content col */
.about-content-col .sec-label { margin-bottom:8px }
.about-content-col h2 {
  font-size:1.7rem;font-weight:800;color:#2F3934;
  margin-bottom:16px;line-height:1.3
}
.about-body-content { font-size:.9rem;color:#717C77;line-height:1.8 }
.about-body-content h2,.about-body-content h3 {
  color:#2F3934;font-weight:700;margin:20px 0 8px
}
.about-body-content p  { margin-bottom:12px }
.about-body-content ul { margin:8px 0 14px 18px;list-style:disc }
.about-body-content ul li { margin-bottom:6px;list-style:disc }

/* value pills */
.about-values {
  display:grid;grid-template-columns:1fr 1fr;
  gap:12px;margin-top:24px
}
.about-value-item {
  display:flex;align-items:flex-start;gap:10px;
  padding:14px;background:#f7f7f7;
  border-radius:12px;border:1px solid #e8ebe9;transition:.3s
}
.about-value-item:hover { border-color:#c63c3c;background:#f5e0e0 }
.avi-dot {
  width:8px;height:8px;border-radius:50%;
  background:#c63c3c;flex-shrink:0;margin-top:5px
}
.about-value-item p { font-size:.82rem;font-weight:600;color:#2F3934;margin:0 }

/* ── ABOUT CTA ── */
.about-cta {
  background:linear-gradient(135deg,#c63c3c,#7a1f1f);
  padding:48px 0;text-align:center
}
.about-cta h2 { font-size:1.5rem;font-weight:800;color:#fff;margin-bottom:8px }
.about-cta p  { color:rgba(255,255,255,.72);font-size:.9rem;margin-bottom:24px }
.about-cta-btns {
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap
}
.about-cta-btn {
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:100px;
  font-size:.88rem;font-weight:700;transition:.3s
}
.about-cta-btn--white { background:#fff;color:#c63c3c }
.about-cta-btn--white:hover {
  background:#f5e0e0;color:#a02e2e;transform:translateY(-2px)
}
.about-cta-btn--outline {
  background:rgba(255,255,255,.12);color:#fff;
  border:1.5px solid rgba(255,255,255,.35)
}
.about-cta-btn--outline:hover {
  background:rgba(255,255,255,.22);color:#fff;transform:translateY(-2px)
}

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .about-founder-grid { grid-template-columns:1fr;gap:32px }
  .founder-photo-wrap { max-width:280px;margin:0 auto }
  .about-values       { grid-template-columns:1fr }
  .about-mission-grid { grid-template-columns:1fr }
}
@media(max-width:768px) {
  .hero .container { grid-template-columns:1fr;text-align:center }
  .hero h1         { font-size:1.8rem }
  .hero p          { margin:0 auto 24px }
  .hero-btns       { justify-content:center }
  .hero-visual     { display:none }
  .hero-trust-row  { justify-content:center }
  .hiw-grid        { flex-direction:column;gap:16px }
  .hiw-connector   { display:none }
  .about-hero h1   { font-size:1.5rem }
}
@media(max-width:480px) {
  .hero h1            { font-size:1.4rem }
  .about-cta-btns     { flex-direction:column;align-items:center }
}