/* ============================================================
   ONFUN — Refined Outdoor Theme (2026-09-24 v3)
   首页 Hero：真实照片背景 + 电影感处理（暗角 + 颗粒质感）
   去掉卡通云/山/太阳；去掉 Hero 数据条（数据保留在「关于我们」）
   其余区块：干净中性浅色
   Loaded AFTER the inline <style>, so equal-specificity rules win.
   ============================================================ */

:root {
  --forest: #2F7D5B;
  --sky-deep: #1C7BB5;
}

/* ─── HERO : full-bleed photo + cinematic scrim ─── */
#hero {
  background-color: #10151b;
  background-image:
    linear-gradient(180deg,
      rgba(10,16,22,0.34) 0%,
      rgba(10,16,22,0.15) 18%,
      rgba(9,14,20,0.16) 40%,
      rgba(8,12,18,0.42) 70%,
      rgba(6,9,13,0.70) 100%),
    url('../images/hero-bg.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: center 75%, center 75%;
  background-size: cover, cover;
  padding-bottom: 130px;
}

/* soft vignette to focus the centre (premium look) */
#hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 118% 92% at 50% 42%,
      rgba(0,0,0,0) 46%, rgba(0,0,0,0.42) 100%);
}

/* fine film-grain texture for depth */
#hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .085; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* remove the old cartoon scenery */
.hero-sun,
.hero-rays,
.hero-cloud,
.hero-scene { display: none !important; }

/* ── refined typography over the photo ── */
.hero-badge {
  background: rgba(12,18,26,0.34);
  border: 1px solid rgba(255,255,255,0.26);
  color: rgba(255,255,255,0.94);
  padding: 8px 22px;
  letter-spacing: 3px;
  font-weight: 500;
  box-shadow: 0 8px 26px rgba(0,0,0,0.30),
              inset 0 1px 0 rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
}
.hero-logo-big { filter: drop-shadow(0 16px 34px rgba(0,0,0,0.55)); }
.hero-title {
  color: #ffffff;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.55);
}
.hero-title span {
  color: var(--orange-light);
  text-shadow: 0 4px 26px rgba(242,101,34,0.45);
}
.hero-slogan {
  display: inline-block;
  position: relative;
  margin: 6px 0 14px;
  padding-bottom: 10px;
  font-size: clamp(14px, 1.7vw, 19px);
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90);
  text-shadow: 0 2px 14px rgba(0,0,0,0.5);
}
.hero-slogan::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 54px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
}
.hero-slogan .fun { color: var(--orange-light); }
.hero-cn {
  color: rgba(255,255,255,0.66);
  letter-spacing: 7px;
  font-weight: 300;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

/* primary button : subtle lift */
.btn-primary {
  box-shadow: 0 10px 30px rgba(242,101,34,0.35);
}
.btn-outline {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
}
.btn-outline:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--dark);
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
}

/* ─── COMMITMENTS : clean neutral ─── */
#commitments {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F8F9 100%);
}
#commitments .section-tag  { background: rgba(47,125,91,.10);  color: var(--forest); }
#commitments .section-title{ color: var(--dark); }
#commitments .section-desc { color: var(--gray); }

.commit-card {
  background: #fff;
  border: 1px solid #ECEFF1;
  box-shadow: 0 8px 26px rgba(20,30,40,.05);
  backdrop-filter: none;
}
.commit-card:hover {
  background: #fff;
  border-color: var(--orange);
  box-shadow: 0 16px 40px rgba(242,101,34,.12);
}
.commit-card h4 { color: var(--dark); }
.commit-card p  { color: var(--gray); }

/* ─── CERTIFICATIONS : clean neutral ─── */
#certifications {
  background: linear-gradient(180deg, #F6F8F9 0%, #FFFFFF 100%);
}
#certifications .section-tag  { background: rgba(59,158,219,.10); color: var(--sky-deep); }
#certifications .section-title{ color: var(--dark); }
#certifications .section-desc { color: var(--gray); }

.cert-card {
  background: #fff;
  border: 1px solid #ECEFF1;
  box-shadow: 0 8px 26px rgba(20,30,40,.05);
}
.cert-card:hover {
  background: #fff;
  border-color: var(--orange);
  box-shadow: 0 16px 40px rgba(242,101,34,.12);
}
.cert-card h4 { color: var(--dark); }
.cert-card p  { color: var(--gray); }

/* ─── FOOTER : light neutral ─── */
footer {
  background: #F5F7F8;
  color: #5B6B75;
  border-top: 1px solid #E4E8EA;
}
footer a { color: var(--orange); }
.footer-slogan {
  margin: 6px 0 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #33414a;
}
.footer-slogan .fun { color: var(--orange); }

/* ─── alternate sections : subtle neutral tints ─── */
#structure { background: linear-gradient(180deg, #F7FAFB 0%, #FFFFFF 100%); }
#contact   { background: linear-gradient(180deg, #F5F8FA 0%, #EDF2F4 100%); }