/* ============ 单卡片 · 液态玻璃首页 ============ */
:root{
  --g-bg:rgba(255,255,255,.42);
  --g-strong:rgba(255,255,255,.62);
  --g-border:rgba(255,255,255,.72);
  --g-shadow:0 18px 50px rgba(184,97,55,.16),0 2px 8px rgba(184,97,55,.06);
  --g-blur:30px;
  --g-sat:180%;
  --g-sheen:linear-gradient(135deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.08) 42%,rgba(255,255,255,0) 60%,rgba(255,255,255,.24) 100%);
  --brand:#ff6b6b;
}

/* 背景：绿色渐变 + 光斑（仅改背景，文字不动） */
html,body{
  background:linear-gradient(160deg,#eaf7ef 0%,#d8f0e2 45%,#c9ead8 100%) !important;
  background-attachment:fixed !important;
  min-height:100vh;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 12% 18%,rgba(140,230,170,.38),transparent 42%),
    radial-gradient(circle at 88% 12%,rgba(120,210,180,.32),transparent 40%),
    radial-gradient(circle at 78% 82%,rgba(160,230,200,.30),transparent 46%);
}
/* 隐藏原模板的头部导航/多余元素，仅保留卡片 */
header,nav#main-nav,#ie9,#scroll_Top,.screen1,.screen3,.screen4,
#ielt9>header,.carousel,.screen2{display:none !important;}

/* 首页容器：垂直水平居中 */
.hero-glass{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  box-sizing:border-box;
}
.hero-card{
  width:100%;max-width:460px;
  padding:44px 34px 40px;
  text-align:center;
  background:var(--g-bg);
  background-image:var(--g-sheen);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border:1px solid var(--g-border);
  border-radius:26px;
  box-shadow:var(--g-shadow),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(255,255,255,.3);
}
.hero-title{
  font-size:26px;font-weight:800;letter-spacing:1px;
  color:#7c3f6b;line-height:1.5;margin-bottom:14px;
}
.hero-sub{
  font-size:14px;color:#a06a56;line-height:1.7;margin-bottom:30px;
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
}
/* 液态玻璃按钮 */
.glass-btn{
  display:inline-block;
  min-width:118px;
  padding:12px 26px;
  border-radius:999px;
  background:var(--g-strong);
  background-image:var(--g-sheen);
  border:1px solid rgba(255,255,255,.85);
  color:#8a3a5c;font-weight:700;font-size:15px;
  text-decoration:none;
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  box-shadow:0 10px 22px rgba(184,97,55,.16),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .2s ease,box-shadow .2s ease,color .2s ease;
  position:relative;overflow:hidden;
}
.glass-btn::after{
  content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg);pointer-events:none;
  transition:left .6s cubic-bezier(.22,.61,.36,1);
}
.glass-btn:hover::after{left:130%}
.glass-btn:hover{
  transform:translateY(-2px);
  color:#b86137;
  box-shadow:0 16px 32px rgba(184,97,55,.26),inset 0 1px 0 rgba(255,255,255,.9);
}
/* 品牌色按钮（我要开店） */
.glass-btn-brand{
  background:linear-gradient(135deg,#ff8a9b,#ff6b6b);
  color:#fff !important;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 24px rgba(255,107,107,.35),inset 0 1px 0 rgba(255,255,255,.5);
}
.glass-btn-brand:hover{color:#fff !important;box-shadow:0 16px 34px rgba(255,107,107,.45),inset 0 1px 0 rgba(255,255,255,.6)}

/* 兼容：不支持 backdrop-filter 时回退实底 */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hero-card{background:rgba(255,255,255,.95) !important;background-image:none !important}
  .glass-btn{background:#fff !important;background-image:none !important}
}
/* 小屏适配 */
@media (max-width:520px){
  .hero-card{padding:36px 22px 32px;border-radius:22px}
  .hero-title{font-size:22px}
  .glass-btn{min-width:100px;padding:11px 20px;font-size:14px}
}

/* ============ 樱花花瓣飘落 ============ */
#petal-container{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9999}
.petal{
  position:absolute;
  top:-28px;
  pointer-events:none;
  opacity:.8;
  border-radius:150% 0 150% 0;
  filter:blur(.3px);
  animation-name:petal-fall;
  animation-timing-function:linear;
  animation-fill-mode:both;
  will-change:transform,opacity;
}
@keyframes petal-fall{
  0%{transform:translate3d(0,0,0) rotate(0deg) rotateY(0deg);opacity:.85}
  20%{opacity:1;transform:translate3d(-6vw,20vh,0) rotateY(180deg)}
  40%{transform:translate3d(5vw,40vh,0) rotate(120deg) rotateY(360deg)}
  60%{transform:translate3d(-4vw,60vh,0) rotate(240deg);opacity:.9}
  80%{transform:translate3d(3vw,80vh,0) rotate(300deg)}
  100%{transform:translate3d(-2vw,105vh,0) rotate(360deg);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .petal{display:none}
  #petal-container{display:none}
}