:root{
  --bg:#ffffff;
  --soft:#f6f7fb;
  --text:#0b1220;
  --muted:#5b6472;
  --line:#e7ebf1;
  --primary:#c02a30;
  --primary-dark:#d27d6c;
  --dark:#0b1220;
  --radius:16px;
  --shadow:0 10px 30px rgba(2,8,23,.06);
  --shadow2:0 8px 20px rgba(2,8,23,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:80px 0}
.section-soft{background:var(--soft)}
.mt-12{margin-top:12px}

h1{font-size:56px;line-height:1.05;margin:12px 0 0;font-weight:750;letter-spacing:-.02em}
h2{font-size:40px;line-height:1.1;margin:0;font-weight:750;letter-spacing:-.02em}
h3{font-size:20px;line-height:1.25;margin:0 0 8px;font-weight:650}

.lead{font-size:18px;line-height:1.7;color:var(--muted);margin:10px 0}
.muted{color:var(--muted);line-height:1.7}
.subhead{margin-top:10px;color:var(--muted);font-size:18px}
.section-head{margin-bottom:26px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:16px}
.logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-img{
  height: 70px;   /* 你想更大就改这里 */
  width: auto;
  display: block;
}

.nav{display:flex;align-items:center;gap:22px;color:var(--muted);font-size:14px}
.nav a:hover{color:var(--text)}
.header-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 12px;cursor:pointer}

.mobile-nav{display:none; padding:12px 20px; border-top:1px solid var(--line); background:#fff}
.mobile-nav a{display:block;padding:10px 0;color:var(--muted)}
.mobile-nav a:hover{color:var(--text)}

/* ===== Desktop dropdown ===== */
.nav{display:flex; align-items:center; gap:18px;}
.nav-link{
  background:none;
  border:0;
  cursor:pointer;
  font: inherit;
  color: var(--muted);
  font-size:14px;
  padding: 8px 10px;
  border-radius: 999px;
}
.nav-link:hover{color: var(--text); background: rgba(246,247,251,.9);}

.nav-link.is-active,
.nav-item.is-active > .nav-link{
  color: var(--text);
  font-weight: 700;
}

.nav-item{position:relative; display:flex; align-items:center;}
.nav-caret{font-size:12px; opacity:.7; margin-left:6px;}

.nav-dd{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background:#c02a30;
  border:1px solid rgba(231,235,241,.95);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(2,8,23,.10);
  padding: 8px;
  display:none;
  z-index: 60;
}
.nav-dd a{
  display:flex;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgb(255 255 255);
  font-size:14px;
}
.nav-dd a:hover{background: rgba(246,247,251,.9); color: rgba(11,18,32,.95);}
.nav-dd a.is-active{font-weight:800; color: rgba(11,18,32,.95);}

/* dropdown hidden by default */
.nav-dd{
  display:none;
}

/* open state */
.nav-item.is-open > .nav-dd{
  display:flex;
}

/* ===== Mobile dropdown ===== */
.m-dd-toggle{
  width:100%;
  text-align:left;
  padding: 10px 0;
  background:none;
  border:0;
  color: var(--muted);
  font-size:14px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.m-dd{display:none; padding-left: 10px; padding-bottom: 8px;}
.m-dd a{padding: 10px 0; display:block;}
.m-dd[data-open="true"]{display:block;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:999px;
  font-size:14px;font-weight:600;
  border:1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{background:#fafbff}
.btn-ghost-on-dark{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn-ghost-on-dark:hover{background:rgba(255,255,255,.06)}

/* Hero */
.hero{position:relative;min-height:78vh;display:grid;align-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-video{width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.78), rgba(255,255,255,.95));
}
.hero-inner{position:relative; padding:70px 0 40px; display:grid; grid-template-columns: 1.15fr .85fr; gap:32px; align-items:start}
.pill{display:inline-flex; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.7); color:var(--muted); font-size:12px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hero-proof .card{padding:18px}
.card{border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow)}
.glass{background:rgba(255,255,255,.72); backdrop-filter: blur(10px)}

.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat{border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff}
.stat-value{font-size:26px;font-weight:750}
.stat-label{font-size:12px;color:var(--muted);margin-top:4px}

/* Trust row */
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust-item{border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px}
.trust-value{font-size:26px;font-weight:750}
.trust-label{font-size:12px;color:var(--muted);margin-top:4px}

/* Brand cards */
.brand-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.brand-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:#fff; overflow:hidden; box-shadow:var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.brand-card:hover{transform: translateY(-3px); box-shadow: var(--shadow2)}
.brand-media{position:relative; height:300px; background:#eef2ff}
.brand-media img{width:100%;height:100%;object-fit:cover}
.brand-badge{
  position:absolute; right:16px; top:16px;
  padding:8px 10px; border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  font-size:12px; font-weight:650;
}
.brand-body{padding:20px}
.brand-tag{color:var(--muted);margin:0 0 10px;font-size:14px}
.brand-desc{color:var(--muted);margin:0;line-height:1.7;font-size:15px}
.brand-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:650;color:var(--primary)}
.brand-cta:hover{text-decoration:underline}

/* Why */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.why-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px;box-shadow:var(--shadow)}
.why-icon{font-size:20px}
/* WHY head row */
.why-head{
      display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    justify-content: space-between;

}

/* 调整 meta 视觉 */
.why-meta{
  margin:0;
}

/* Partner */
.partner{
  background:linear-gradient(180deg, #0b1220, #0b1220);
  color:#fff;
}
.partner-inner{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.subhead-on-dark{color:rgba(255,255,255,.72)}
.partner-copy{color:rgba(255,255,255,.78);line-height:1.7;margin-top:12px}
.partner-box{
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  padding:22px;
  background:rgba(255,255,255,.06);
}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checklist li{position:relative;padding-left:26px;color:rgba(255,255,255,.86)}
.checklist li:before{content:"✓"; position:absolute; left:0; top:0; color:var(--primary); font-weight:800}
.partner-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* Careers */
.careers{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.careers-copy{    align-content: center;}
.careers-media{border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow)}
.careers-photo{
  width:100%;height:100%;
  background:linear-gradient(135deg, rgba(20,184,166,.12), rgba(29,78,216,.10));
  min-height:260px;
}

/* Final CTA */
.final-cta{display:flex;align-items:center;justify-content:space-between;gap:16px}
.final-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
.footer{border-top:1px solid var(--line); padding:34px 0 0 0}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.footer-logo{font-weight:800}
.footer-links{display:flex;gap:14px;color:var(--muted)}
.footer-links a:hover{color:var(--text)}

/* Responsive */
@media (max-width: 960px){
  h1{font-size:42px}
  .hero-inner{grid-template-columns:1fr; padding:54px 0 26px}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .brand-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .partner-inner{grid-template-columns:1fr}
  .careers{grid-template-columns:1fr}
  .final-cta{flex-direction:column;align-items:flex-start}
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-nav[data-open="true"]{display:block}
}


/* HERO: no overlay, white text */
.hero--nooverlay{
  min-height: 90vh;
  position:relative;
  display:flex;
  align-items:stretch;
  overflow:hidden;
}

.hero--nooverlay .hero-media{position:absolute; inset:0; overflow:hidden}
.hero--nooverlay .hero-video{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.03);
  /* 不是 overlay：直接调视频渲染，让白字更稳 */
  filter: contrast(1.06) saturate(1.08) brightness(.95);
}

.hero--nooverlay .hero-inner{
  position:relative;
  width:100%;
  padding: 110px 0 64px;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items:center;
}

/* White typography with readable shadow */
.hero-copy--light{color:#fff}
.hero-title{
  color:#fff;
  text-shadow: 0 8px 28px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
}
.lead--light{
  color: rgba(255,255,255,.92);
  text-shadow: 0 6px 22px rgba(0,0,0,.45);
}

/* Pill in light mode */
.pill--light{
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(6px);
}

/* Secondary button on video */
.btn-ghost-light{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color:#fff;
}
.btn-ghost-light:hover{
  background: rgba(255,255,255,.18);
}

/* Right proof card: dark glass (still not an overlay on whole video) */
.hero-proof-card--darkglass{
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(0,0,0,.35);
}
.stat--dark{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}
.stat--dark .stat-value{color:#fff}
.stat--dark .stat-label{color: rgba(255,255,255,.75)}
.muted--light{color: rgba(255,255,255,.82)}

/* Responsive */
@media (max-width: 960px){
  .hero--nooverlay{min-height: 86vh;}
  .hero--nooverlay .hero-inner{grid-template-columns:1fr; padding:84px 0 54px}
}

/* --- WHY premium --- */
.why-grid--premium{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.why-card--premium{
  position:relative;
  border-radius: 20px;
  border: 1px solid rgba(231,235,241,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 30px rgba(2,8,23,.06);
  padding: 18px;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.why-card--premium:before{
  content:"";
  position:absolute;
  inset: -2px;
  background: radial-gradient(circle at 20% 10%, rgb(175 20 24 / 16%), rgba(20, 184, 166, 0) 55%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events:none;
}

.why-card--premium:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(2,8,23,.10);
  border-color: rgba(20,184,166,.32);
}

.why-card--premium:hover:before{
  opacity: 1;
}

/* icon */
.why-iconwrap{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgb(239 195 197);
  border: 1px solid rgb(192 42 48);
  color: rgba(11,18,32,.86);
  margin-bottom: 12px;
}

.why-icon-svg{
  width: 22px;
  height: 22px;
}

/* meta label */
.why-meta{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(231,235,241,.9);
  background: rgba(246,247,251,.9);
  font-size: 12px;
  font-weight: 700;
  color: rgba(11,18,32,.74);
  margin-bottom: 10px;
}

.why-card--premium h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.why-card--premium p{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 15px;
}

/* responsive */
@media (max-width: 1100px){
  .why-grid--premium{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px){
  .why-grid--premium{grid-template-columns: 1fr;}
}


.careers-media{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.careers-img{
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}


.final-cta-bg{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 76px 0;
  border-top: 1px solid var(--line);
}

/* 让文字在背景图上更清楚（不是 overlay，是文字自身阴影） */
.final-cta-bg h2,
.final-cta-bg .muted{
  color:#fff;
  text-shadow: 0 10px 28px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
}
.final-cta-bg .muted{
  color: rgba(255,255,255,.85);
}

/* 按钮第二个适配深背景 */
.final-cta-bg .btn-ghost{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color:#fff;
}
.final-cta-bg .btn-ghost:hover{
  background: rgba(255,255,255,.18);
}

@media (max-width: 960px){
  .final-cta-bg{padding: 62px 0;}
}
.final-cta-bg{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 130px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
}

/* 暗黑 overlay（轻微渐变，更premium） */
.final-cta-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.62),
    rgba(0,0,0,.48) 55%,
    rgba(0,0,0,.38)
  );
  z-index: 0;
}

/* 内容层在 overlay 上面 */
.final-cta-content{
  position: relative;
  z-index: 1;
}

/* 文字改白 + 阴影保证清晰 */
.final-title{
  color:#fff;
  margin:0;
  text-shadow: 0 10px 28px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
}
.final-sub{
  margin:10px 0 0;
  color: rgba(255,255,255,.84);
  text-shadow: 0 10px 26px rgba(0,0,0,.45);
  line-height: 1.7;
}

/* 适配按钮（第二个变白描边） */
.btn-ghost-light{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color:#fff;
}
.btn-ghost-light:hover{
  background: rgba(255,255,255,.18);
}

@media (max-width: 960px){
  .final-cta-bg{padding: 62px 0;}
  .final-cta-overlay{
    background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.42));
  }
}

/* --- Section overall fade (clean) --- */
[data-section="fade"]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

[data-section="fade"].section-inview{
  opacity: 1;
  transform: translateY(0);
}

/* keep your element fade-up */
[data-animate="fade-up"]{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}

.is-inview{
  opacity:1 !important;
  transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce){
  [data-section="fade"], [data-animate="fade-up"]{
    transition:none;
    opacity:1;
    transform:none;
  }
}

/* --- Footer premium --- */
.footer--premium{
  background: #f6f7fb;
  border-top: 1px solid var(--line);
}

.footer-top{
  padding: 54px 0 40px;
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 22px;
}

.footer-logo{
  font-weight: 850;
  letter-spacing: .02em;
  font-size: 16px;
}

.footer-desc{
  margin: 12px 0 16px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 38ch;
}

.footer-title{
  font-weight: 750;
  margin-bottom: 12px;
  color: rgba(11,18,32,.9);
}

.footer-link{
  display:block;
  color: rgba(11,18,32,.72);
  padding: 8px 0;
  transition: color .15s ease, transform .15s ease;
}
.footer-link:hover{
  color: rgba(11,18,32,.95);
  transform: translateX(2px);
}

.footer-badges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.fchip{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(231,235,241,.9);
  background: rgba(255,255,255,.8);
  font-size: 12px;
  color: rgba(11,18,32,.74);
}

.footer-mini{
  margin-bottom: 12px;
}
.footer-mini-label{
  font-size: 12px;
  color: rgba(11,18,32,.55);
  margin-bottom: 4px;
}
.footer-mini-text{
  color: rgba(11,18,32,.78);
}

.footer-cta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

/* bottom bar */
.footer-bottom{
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.6);
}

.footer-bottom-inner{
  padding: 16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.footer-legal{
  color: rgba(11,18,32,.62);
  font-size: 13px;
}

.footer-bottom-links{
  display:flex;
  gap: 14px;
  font-size: 13px;
}
.footer-bottom-links a{
  color: rgba(11,18,32,.62);
}
.footer-bottom-links a:hover{
  color: rgba(11,18,32,.9);
}

/* responsive */
@media (max-width: 1100px){
  .footer-top{grid-template-columns: 1.2fr 1fr; }
}
@media (max-width: 640px){
  .footer-top{grid-template-columns: 1fr; padding: 44px 0 30px;}
  .footer-desc{max-width: none;}
  .footer-bottom-inner{flex-direction:column; align-items:flex-start;}
}


/* =========================
   PAGE HERO (bg + overlay)
   ========================= */
.page-hero{
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  padding: 0 0 48px;
  color: #fff;
  overflow: hidden;

  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.page-hero__inner{
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}

.page-hero__title{
  margin: 0 0 10px;
  font-size: clamp(32px, 3.5vw, 56px);
  font-weight: 700;
  letter-spacing: .2px;
}

.page-hero__breadcrumb{
  font-size: 14px;
  opacity: .9;
}

.page-hero__breadcrumb a{
  color: #dd9194;
  text-decoration: none;
}

.page-hero__breadcrumb .sep{
  margin: 0 10px;
  opacity: .7;
}

.mobile-nav .mnav-group { display: block; }
.mobile-nav .mnav-dd-toggle{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:transparent;
  border:0;
  padding:12px 0;
  font:inherit;
  cursor:pointer;
}
.mobile-nav .mnav-dd-panel a{
  display:block;
  padding:10px 0 10px 14px;
  opacity:.95;
}


/* =========================
   HERO VIDEO OVERLAY
   ========================= */

.hero-media{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Professional gradient overlay */
.hero-video-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(
      100deg,
      rgba(0,0,0,.65) 0%,
      rgba(0,0,0,.55) 35%,
      rgba(0,0,0,.45) 60%,
      rgba(0,0,0,.35) 100%
    );
}

/* Make sure content stays above overlay */
.hero-inner{
  position:relative;
  z-index:2;
}