/* ==========================================================================
   Bloom24 — homepage-only styles (front-page.php)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding:150px 0 110px;position:relative;
  background:
    radial-gradient(700px 420px at 88% 12%, rgba(232,106,138,.14), transparent 60%),
    radial-gradient(560px 380px at 4% 82%, rgba(203,168,219,.22), transparent 60%),
    var(--cream)}
/* 鲜花点缀：左上 + 右下两角水彩花束 */
.hero::before,
.hero::after{content:"";position:absolute;pointer-events:none;background-repeat:no-repeat;background-size:contain;z-index:0}
.hero::before{background-image:url("../images/decor/flower-left.png");width:300px;height:316px;top:0;left:0;opacity:.45}
.hero::after{background-image:url("../images/decor/flower-right.png");width:320px;height:337px;right:0;bottom:-30px;opacity:.45}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,56px);font-weight:700;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--rose-deep)}
.hero .sub{font-size:1.125rem;margin-top:22px}
.hero-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.hero-trust{display:flex;gap:36px;margin-top:44px;flex-wrap:wrap}
.trust-item .num{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--leaf)}
.trust-item .num span{color:var(--rose)}
.trust-item .lbl{font-size:0.8125rem;color:var(--grey);letter-spacing:.04em}
.hero-media{position:relative;max-width:100%}
.hero-badge{max-width:calc(100% - 20px)}
.hero-photo{aspect-ratio:4/4.6;width:100%}
.hero-badge{position:absolute;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:14px 18px;display:flex;gap:12px;align-items:center;font-size:0.8438rem}
.badge-temp{bottom:34px;left:-34px}
.badge-temp .big{font-family:var(--font-display);font-size:1.375rem;font-weight:700;color:var(--leaf)}
.badge-temp .small{font-size:0.75rem;color:var(--grey)}
.badge-24{top:26px;right:-26px}
.badge-24 .dot{width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(203,168,219,.3)}
.badge-24 .badge-txt{font-size:0.8125rem}
.badge-24 .badge-txt b{color:var(--leaf)}
.badge-24 .badge-txt span{font-size:0.75rem;color:var(--grey)}
.petal{position:absolute;pointer-events:none;opacity:.75;filter:drop-shadow(0 6px 14px rgba(201,74,109,.25));animation:floaty 9s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(9deg)}}
@media(prefers-reduced-motion:reduce){.petal,.snowflake,.gauge-needle,.gauge-zone,.gauge-status{animation:none!important}.snow-layer{display:none}}

/* ---------- Trust marquee ---------- */
.marquee-band{background:var(--leaf);color:#F0E9F4;padding:16px 0;overflow:hidden}
.marquee-track{display:flex;gap:64px;white-space:nowrap;animation:marquee 28s linear infinite;font-size:0.875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.marquee-track span{display:flex;align-items:center;gap:12px}
.marquee-track span::before{content:"❀";color:var(--mint)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;white-space:normal}}

/* ---------- Wavy section dividers ---------- */
.wave-divider{display:block;width:100%;height:56px;margin-bottom:-1px}
.wave-into-fresh{background:var(--cream)}
.wave-into-fresh path{fill:var(--leaf)}
.wave-into-warranty{background:#fff}
.wave-into-warranty path{fill:var(--leaf)}
.wave-into-tint{background:#fff}
.wave-into-tint path{fill:#F6EEF7}

/* ---------- Freshness (dark violet) ---------- */
.fresh{background:linear-gradient(160deg,var(--leaf) 0%,var(--leaf-mid) 100%);color:#F0E9F4;overflow:hidden}
.fresh h2,.fresh h3{color:#fff}
.fresh .sub{color:#CFC0D8}
.fresh-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch;margin-top:56px;position:relative;z-index:1}

/* Snowfall particles (JS-spawned) */
.snow-layer{position:absolute;inset:0;pointer-events:none;z-index:0}
.snowflake{position:absolute;top:-40px;color:#fff;opacity:0;user-select:none;animation:snowfall linear infinite;text-shadow:0 0 8px rgba(203,168,219,.8)}
@keyframes snowfall{
  0%{transform:translate3d(0,-40px,0) rotate(0);opacity:0}
  8%{opacity:.55}
  85%{opacity:.5}
  100%{transform:translate3d(var(--drift,20px),var(--fall,900px),0) rotate(320deg);opacity:0}
}

/* Gauge visual */
.gauge-visual{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:36px;backdrop-filter:blur(6px)}
.gauge-title{font-family:var(--font-display);font-size:1.25rem;color:#fff}
.gauge-desc{font-size:0.875rem;color:#CFC0D8;margin-top:6px}
.gauge-wrap{margin:22px 0 8px;display:grid;justify-items:center}
.gauge{width:min(300px,100%)}
.gauge-tick{font-family:var(--font-body);font-size:0.6875rem;fill:#CFC0D8;text-anchor:middle}
.gauge-zone{filter:drop-shadow(0 0 10px rgba(203,168,219,.9));animation:zonePulse 3s ease-in-out infinite}
@keyframes zonePulse{0%,100%{opacity:.9}50%{opacity:.55}}
.gauge-needle{transform-origin:100px 95px;animation:needleSway 6s ease-in-out infinite}
@keyframes needleSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.gauge-readout{margin-top:-40px;text-align:center;font-family:var(--font-display)}
.gauge-num{font-size:3.25rem;font-weight:700;color:#fff;text-shadow:0 0 24px rgba(203,168,219,.9)}
.gauge-unit{font-size:1.375rem;color:#CBA8DB;margin-left:4px}
.gauge-status{display:block;font-family:var(--font-body);font-size:0.8125rem;color:var(--mint);letter-spacing:.08em;margin-top:2px;animation:zonePulse 3s ease-in-out infinite}
.temp-zone-label{margin-top:18px;font-size:0.875rem;display:flex;gap:10px;align-items:center}
.temp-zone-label .swatch{width:14px;height:14px;border-radius:4px;background:var(--mint);flex:none}
.gauge-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.gauge-stat{text-align:center}
.gauge-stat-num{display:block;font-family:var(--font-display);font-size:1.3125rem;font-weight:700;color:#fff}
.gauge-stat-num small{font-size:0.75rem;font-weight:500;color:#CBA8DB}
.gauge-stat-lbl{display:block;font-size:0.7188rem;color:#CFC0D8;margin-top:4px;line-height:1.4}
.fresh-cards{display:grid;grid-template-rows:repeat(3,1fr);gap:18px}
.fresh-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:30px 26px}
.fresh-card .icon-flower{background:rgba(255,255,255,.1)}
.fresh-card .icon-flower svg{stroke:var(--mint)}

/* ---------- Models ---------- */
.model-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.model-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s;display:flex;flex-direction:column}
.model-card:hover{transform:translateY(-6px)}
.model-ph{aspect-ratio:3/3.6;border-radius:0;border:none;border-bottom:2px dashed rgba(74,44,78,.22)}
.model-body{padding:22px 20px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.model-body h3{font-size:1.1875rem}
.model-spec{font-size:0.8438rem;color:var(--grey)}
.model-spec b{color:var(--leaf)}
.model-link{margin-top:auto;padding-top:12px;color:var(--rose-deep);font-weight:600;font-size:0.9062rem}

/* ---------- Scenes ---------- */
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.scene-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s}
.scene-card:hover{transform:translateY(-5px)}
.scene-ph{aspect-ratio:16/10;border-radius:0;border:none;border-bottom:2px dashed rgba(74,44,78,.22)}
.scene-body{padding:20px 22px 24px}
.scene-body h3{font-size:1.125rem;margin-bottom:6px}
.scene-body p{font-size:0.875rem;color:var(--grey)}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px;counter-reset:step}
.step{background:#fff;border-radius:var(--radius);padding:32px 26px;box-shadow:var(--shadow);position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--font-display);font-size:2.75rem;font-weight:700;color:var(--rose-soft);-webkit-text-stroke:1.5px var(--rose);position:absolute;top:-20px;left:24px;background:var(--cream);padding:0 10px}
.step h3{font-size:1.125rem;margin:16px 0 8px}
.step p{font-size:0.875rem;color:var(--grey)}

/* ---------- Earning ---------- */
.earning{background:var(--rose-soft)}
.earning-note{font-size:0.8125rem;color:var(--grey);margin-top:18px}

/* ---------- Why us / E-E-A-T ---------- */
.eat-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.eat-photo img{box-shadow:0 18px 50px rgba(74,44,78,.14)}
.check-list{margin-top:24px;display:grid;gap:14px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:0.9375rem}
.check-list svg{width:22px;height:22px;flex:none;stroke:var(--mint);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;background:var(--leaf);border-radius:50%;padding:4px}
.cert-wall{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.cert-chip{background:#fff;border:1.5px solid #EBD9DE;border-radius:12px;padding:12px 20px;font-weight:600;font-size:0.875rem;color:var(--leaf);display:flex;align-items:center;gap:8px}
.cert-chip::before{content:"✿";color:var(--gold)}

/* ---------- Warranty band ---------- */
.warranty-band{background:var(--leaf);color:#F0E9F4}
.warranty-band h2{color:#fff}
.w-band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px}
.w-band-card{text-align:center;padding:34px 24px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);background:rgba(255,255,255,.05)}
.w-band-card .icon-flower{margin:0 auto 18px;background:rgba(255,255,255,.1)}
.w-band-card .icon-flower svg{stroke:var(--mint)}
.w-band-card h3{color:#fff;font-size:1.1875rem;margin-bottom:8px}
.w-band-card p{font-size:0.875rem;color:#CFC0D8}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:48px auto 0;display:grid;gap:14px}
details{background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
summary{cursor:pointer;list-style:none;padding:22px 26px;font-weight:600;font-size:1rem;color:var(--leaf);display:flex;justify-content:space-between;align-items:center;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;color:var(--rose);transition:.25s;font-weight:400}
details[open] summary::after{transform:rotate(45deg)}
details .faq-a{padding:0 26px 24px;color:var(--grey);font-size:0.9375rem}

/* ---------- Final CTA + form ---------- */
.final{background:
  radial-gradient(620px 380px at 90% 8%, rgba(232,106,138,.10), transparent 60%),
  radial-gradient(520px 340px at 6% 32%, rgba(203,168,219,.18), transparent 60%),
  linear-gradient(180deg,#FBF5F8 0%,#F4ECF6 100%)}
.final h2{color:var(--leaf)}
.final .sub{color:var(--grey)}
.final-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.final-list{display:grid;gap:14px;margin-top:26px}
.final-list li{display:flex;gap:12px;align-items:center;font-size:0.9375rem;color:var(--leaf);font-weight:500}
.form-card{background:#fff;border-radius:var(--radius);padding:38px 34px;box-shadow:0 24px 60px rgba(74,44,78,.16)}
.form-card h3{font-size:1.375rem;margin-bottom:22px}
.form-card .btn{width:100%;justify-content:center}

/* ---------- Video section + modal ---------- */
.video-section{background:#F6EEF7}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px;max-width:900px;margin-left:auto;margin-right:auto}
.video-card{position:relative;background:#fff;border:none;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s;cursor:pointer;font-family:inherit;padding:0;text-align:left;display:flex;flex-direction:column}
.video-card:hover{transform:translateY(-6px)}
.video-card:focus-visible{outline:3px solid var(--rose);outline-offset:3px}
.video-thumb{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center;display:block;border-radius:0;border-bottom:2px solid #F0E4E7}
.play-btn{position:absolute;top:calc(50% - 44px);left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--rose),var(--rose-deep));display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(201,74,109,.4);transition:.25s}
.play-btn::before{content:"";display:block;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.video-card:hover .play-btn{transform:translate(-50%,-50%) scale(1.1)}
.video-title{padding:16px 20px 20px;font-weight:600;font-size:0.9375rem;color:var(--leaf)}
.visually-hidden-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.video-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.video-modal[hidden]{display:none}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(26,12,30,.86);backdrop-filter:blur(4px)}
.video-modal-body{position:relative;width:auto;height:min(86vh,820px);aspect-ratio:9/16;max-width:100%;background:#000;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.video-modal-body video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.video-modal-close{position:absolute;top:10px;right:12px;z-index:2;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:1.625rem;line-height:1;cursor:pointer;transition:.2s}
.video-modal-close:hover{background:var(--rose-deep)}
body.modal-open{overflow:hidden}

/* ---------- Homepage responsive ---------- */
@media(max-width:980px){
  .hero-grid,.fresh-grid,.eat-grid,.final-grid{grid-template-columns:1fr}
  .model-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .scene-grid,.video-grid{grid-template-columns:repeat(2,1fr)}
  .w-band-grid{grid-template-columns:1fr;gap:16px;max-width:420px;margin-left:auto;margin-right:auto}
  .hero-media{max-width:480px;margin:0 auto}
  .badge-temp{left:8px;bottom:14px}
  .badge-24{right:8px;top:12px}
}
@media(max-width:600px){
  .hero{padding-top:120px}
  .hero-trust{gap:22px}
  .hero-badge{padding:10px 14px}
  .badge-24 .badge-txt span{display:none}
  .model-grid,.steps,.scene-grid,.video-grid{grid-template-columns:1fr}
  .petal{display:none}
  .hero::before{width:180px;height:190px;opacity:.35}
  .hero::after{width:190px;height:200px;opacity:.35;bottom:110px}
}