:root{--paper:#f3ecdf;--ink:#24211d;--gold:#b56b1d;--dark:#22211f;--muted:#766f65}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;background:#f8f8f8;color:var(--ink)}
body{overflow:hidden}.shell{width:min(1460px,calc(100vw - 34px));height:min(920px,calc(100vh - 28px));margin:14px auto;border-radius:30px;overflow:hidden;position:relative;background:#f8f8f8;box-shadow:0 25px 70px #30271922}
.top{height:66px;padding:0 42px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #9b78431e}.brand{display:flex;gap:12px;align-items:center;font-weight:850;font-size:19px}.logo{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#0b70d1,#63b7ff);color:#fff;display:grid;place-items:center;box-shadow:0 7px 18px #0b70d133}.brand{color:#176bb2}.status{font-size:12px;color:var(--muted)}
.ticker{
height:43px;
color:#242424;
overflow:hidden;
display:flex;
align-items:center;
white-space:nowrap;
background:#ededed;
border:0;
box-shadow:none;
}.track{display:inline-flex;align-items:center;gap:64px;min-width:max-content;animation:marquee 20s linear infinite;font-size:16px;line-height:1;font-weight:500}.track b{color:#075fae}.track span{display:inline-flex;align-items:center;line-height:1}.track span:before{content:"☺";color:#222;display:inline-flex;align-items:center;justify-content:center;margin-right:20px;font-size:27px;line-height:1;font-weight:400;transform:translateY(-1px) scale(1.18);transform-origin:center}@keyframes marquee{to{transform:translateX(-50%)}}
.hero{text-align:center;padding:15px 20px 0}.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--gold);font-weight:850}.hero h1{line-height:1.04;font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;font-weight:900;font-size:clamp(30px,3.6vw,54px);margin:7px 0 2px;letter-spacing:-.04em}.hero p{margin:0;color:var(--muted);font-size:14px}
.stage{height:385px;position:relative;perspective:1300px;margin-top:42px}.poster{position:absolute;left:50%;top:50%;width:252px;height:275px;margin:-137px 0 0 -126px;border-radius:31px;padding:26px;cursor:pointer;transition:transform .92s cubic-bezier(.22,.72,.18,1),opacity .72s ease,filter .72s ease,box-shadow .45s ease;box-shadow:0 18px 36px #30343a18;overflow:hidden}
.poster:after{content:"";position:absolute;width:170px;height:170px;border:1px solid #ffffff55;border-radius:50%;right:-70px;bottom:-70px}.poster .k{font-size:11px;font-weight:900;letter-spacing:.15em;opacity:.7}.poster h3{font-size:27px;line-height:1.12;margin:4px 0 12px}.poster p{font-size:13px;line-height:1.75;margin:0;opacity:.82}.poster .big{font:700 47px Georgia,serif;margin-top:18px}.poster .pill{display:inline-block;margin-top:18px;border:1px solid currentColor;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:800}
.price-card{background:#f0bd55;color:#292015}.stock-card{background:#f8f1e6;color:#392e22;border:1px solid #dac9b2}.channel-card{background:#bfd5ee;color:#18324d}.service-card{background:#badcc8;color:#173d2d}.brand-card{background:linear-gradient(145deg,#6558d9,#347fc4);color:#fff}.more-card{background:linear-gradient(145deg,#d6c6f1,#f0c4b3);color:#38283c}
.price-lines{margin-top:15px}.price-line{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #35251122;padding:8px 0;font-weight:800}.price-line small{font-size:11px;opacity:.65}.price-line strong{font:700 22px Georgia,serif}
.poster[data-pos="0"]{transform:translateX(-420px) translateY(24px) scale(.66) rotateY(28deg);opacity:.45;filter:saturate(.65)}
.poster[data-pos="1"]{transform:translateX(-220px) translateY(8px) scale(.84) rotateY(18deg);opacity:.78}
.poster[data-pos="2"]{transform:translateX(0) translateY(-12px) scale(1.24);opacity:1;z-index:10;box-shadow:0 38px 68px #382a1f38}
.poster:not([data-pos="2"]) h3{font-size:21px}.poster:not([data-pos="2"]) p{font-size:11px}.poster:not([data-pos="2"]) .price-line strong{font-size:18px}
.poster[data-pos="2"] h3{font-size:27px}.poster[data-pos="2"] p{font-size:13px}
.poster[data-pos="3"]{transform:translateX(220px) translateY(8px) scale(.84) rotateY(-18deg);opacity:.78}
.poster[data-pos="4"]{transform:translateX(420px) translateY(24px) scale(.66) rotateY(-28deg);opacity:.45;filter:saturate(.65)}
.poster[data-pos="5"]{transform:translateX(0) translateY(45px) scale(.5);opacity:0}
.cta{position:absolute;left:34px;right:34px;bottom:25px;height:118px;border-radius:27px;background:linear-gradient(115deg,#1d65a6,#2e8ab5 58%,#58a9a0);color:white;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;padding:0 40px;box-shadow:0 18px 42px #17130f2c}.cta h2{font-size:30px;margin:0}.cta p{margin:0;color:#e8f4f7;font-size:13px}.action{justify-self:end;display:flex;gap:11px;align-items:center}.wx{font-size:13px;color:#eef8ff;padding:15px 18px;border:1px solid #ffffff55;border-radius:15px}.action button{border:0;background:white;color:#3f4448;border-radius:15px;padding:16px 30px;font-size:14px;font-weight:750;letter-spacing:.02em;min-width:210px;cursor:pointer;transition:.25s}.action button:hover{transform:translateY(-3px)}
.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);background:#111;color:#fff;padding:9px 15px;border-radius:99px;opacity:0;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){body{overflow:auto}.shell{width:100%;height:100vh;margin:0;border-radius:0}.top{padding:0 18px}.status{display:none}.ticker{height:39px}.hero{padding-top:18px}.stage{height:380px;overflow:hidden}.poster{width:205px;height:255px;margin-left:-102px}.poster[data-pos="0"]{transform:translateX(-325px) scale(.6);opacity:.15}.poster[data-pos="1"]{transform:translateX(-175px) scale(.76);opacity:.62}.poster[data-pos="2"]{transform:translateX(0) scale(.98)}.poster[data-pos="3"]{transform:translateX(175px) scale(.76);opacity:.62}.poster[data-pos="4"]{transform:translateX(325px) scale(.6);opacity:.15}.cta{left:12px;right:12px;bottom:12px;height:135px;grid-template-columns:1fr;padding:20px}.cta h2{font-size:22px}.action{justify-self:stretch;margin-top:13px}.wx{display:none}.action button{width:100%}}
@media(max-height:780px) and (min-width:901px){.hero{padding-top:12px}.stage{height:330px}.poster{height:245px;margin-top:-122px}.cta{height:102px;bottom:15px}}

.hero-inline{
  display:inline-block;
  margin-left:24px;
  font-family:Arial,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:.34em;
  font-weight:650;
  letter-spacing:0;
  color:#766f65;
  white-space:nowrap;
  vertical-align:middle;
}


.cta-line{display:flex;align-items:baseline;gap:28px;white-space:nowrap}
.guarantee{font-size:15px;font-weight:600;color:#e8f4f7;letter-spacing:.03em}
@media(max-width:900px){
  .cta-line{gap:14px;white-space:normal;align-items:center}
  .guarantee{font-size:12px}
}


/* V17: larger carousel pill labels */
.poster .pill,
.poster .tag,
.poster .badge{
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  padding:10px 16px !important;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-width:1.5px !important;
}


/* V18: ticker icon bottom alignment */
.track{align-items:baseline !important;}
.track span{
  display:inline-flex !important;
  align-items:baseline !important;
  line-height:1 !important;
}
.track span:before{
  align-self:baseline !important;
  transform:translateY(2px) scale(1.18) !important;
  transform-origin:center bottom !important;
}


/* V19: reference-like ticker rhythm */
.track{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:54px !important;
  font-size:16px !important;
  line-height:1 !important;
}
.track span:before{content:none !important;display:none !important}
.ticker-unit{
  display:inline-flex;
  align-items:baseline;
  gap:20px;
  white-space:nowrap;
}
.ticker-unit strong{font-weight:700}
.ticker-unit .face{
  display:inline-block !important;
  font-size:25px !important;
  line-height:.8 !important;
  font-weight:400 !important;
  transform:translateY(2px) !important;
  transform-origin:center bottom !important;
}
.ticker-unit b{
  display:inline-block;
  margin-left:7px;
  color:#075fae;
  font-weight:750;
}


/* V20: simplified price ticker */
.track{gap:70px !important;}
.simple-ticker{
  display:inline-flex;
  align-items:baseline;
  gap:24px;
  white-space:nowrap;
}
.simple-ticker span{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:8px;
  white-space:nowrap;
}
.simple-ticker b{
  color:#075fae;
  font-weight:750;
  margin-left:0 !important;
}
.simple-ticker .face{
  font-size:25px !important;
  line-height:.8 !important;
  font-weight:400 !important;
  transform:translateY(2px) !important;
}


/* V21 — seamless ticker */
.ticker{overflow:hidden !important;}
.track{
  display:flex !important;
  width:max-content !important;
  gap:0 !important;
  align-items:flex-end !important;
  animation:tickerSeamless 18s linear infinite !important;
  will-change:transform;
}
.ticker-copy{
  flex:none;
  display:flex;
  align-items:flex-end;
  gap:28px;
  padding-right:28px;
  white-space:nowrap;
}
.ticker-copy > span{
  flex:none;
  display:inline-flex !important;
  align-items:flex-end !important;
  gap:9px;
  white-space:nowrap;
  line-height:1 !important;
}
.ticker-copy b{
  display:inline-block;
  margin:0 !important;
  color:#075fae;
  font-weight:750;
}
.ticker-copy .face{
  display:inline-block !important;
  font-size:31px !important;
  line-height:.72 !important;
  font-weight:400 !important;
  transform:none !important;
  padding-bottom:0 !important;
}
@keyframes tickerSeamless{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-25%,0,0)}
}


/* V22 — optical bottom alignment */
.ticker-copy{
  align-items:baseline !important;
}
.ticker-copy > span{
  align-items:baseline !important;
  line-height:1 !important;
}
.ticker-copy .face{
  font-size:31px !important;
  line-height:.72 !important;
  position:relative;
  top:4px;
  transform:none !important;
}


/* V23 — reference-style typography + slim SVG smile */
.track,
.ticker-copy{
  font-family:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif !important;
  font-size:16px !important;
  font-weight:400 !important;
  letter-spacing:-.015em !important;
}
.ticker-copy > span:not(.face){line-height:1 !important;}
.ticker-copy > span:not(.face) b{font-family:inherit !important;}
.ticker-copy .face{
  width:26px !important;
  height:32px !important;
  font-size:0 !important;
  line-height:0 !important;
  position:relative !important;
  top:7px !important;
  color:#252525;
  flex:none;
}
.ticker-copy .face svg{
  display:block;
  width:26px;
  height:32px;
}


/* V24 — typography/icon rebuilt from reference analysis */
.track,.ticker-copy{
  font-family:"Alte Haas Grotesk","Helvetica Neue",Arial,sans-serif !important;
  font-size:16px !important;
  font-weight:400 !important;
  letter-spacing:-.02em !important;
}
.ticker-copy > span:not(.face){line-height:20px !important;}
.ticker-copy > span:not(.face) b{font:inherit !important;font-weight:700 !important;color:#075fae !important}
.ticker-copy .face{
  position:relative !important;
  top:0 !important;
  width:24px !important;
  height:28px !important;
  display:inline-block !important;
  flex:none !important;
  border:1.45px solid #202020;
  border-radius:50%;
  transform:none !important;
  align-self:flex-end !important;
  margin-bottom:-1px;
  color:#202020;
}
.ticker-copy .face .eye{
  position:absolute;width:2px;height:2px;border-radius:50%;background:#202020;top:8px;
}
.ticker-copy .face .e1{left:7px}.ticker-copy .face .e2{right:7px}
.ticker-copy .face .mouth{
  position:absolute;left:5.5px;right:5.5px;bottom:6px;height:6px;
  border-bottom:1.45px solid #202020;border-radius:0 0 50% 50%;
}


/* V25 — polished ticker */
.ticker{
  height:48px !important;
  background:#ededed !important;
}
.track{
  animation-duration:22s !important;
}
.ticker-copy{
  gap:34px !important;
  padding-right:34px !important;
  align-items:center !important;
}
.ticker-copy > span:not(.face){
  font-family:Arial,"Helvetica Neue","PingFang SC",sans-serif !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:500 !important;
  letter-spacing:-.018em !important;
  align-items:center !important;
}
.ticker-copy > span:not(.face) b{
  margin-left:5px !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:700 !important;
  color:#0870c9 !important;
}
.ticker-copy .face{
  width:25px !important;
  height:25px !important;
  border:1.35px solid #343434 !important;
  border-radius:50% !important;
  margin:0 !important;
  align-self:center !important;
  position:relative !important;
  top:0 !important;
  flex:none !important;
}
.ticker-copy .face .eye{
  width:1.8px !important;height:1.8px !important;top:7px !important;
}
.ticker-copy .face .e1{left:7px !important}
.ticker-copy .face .e2{right:7px !important}
.ticker-copy .face .mouth{
  left:5.5px !important;right:5.5px !important;bottom:5px !important;height:5px !important;
  border-bottom:1.35px solid #343434 !important;
  border-radius:0 0 50% 50% !important;
}
/* keep the ticker visually isolated and clean */
.top{border-bottom:0 !important}


/* V26 — requested ticker text, everything else preserved */
.ticker-copy{align-items:center !important;}
.ticker-copy .product{
  font-family:Arial,"Helvetica Neue","PingFang SC",sans-serif !important;
  font-size:16px !important;
  font-weight:500 !important;
  letter-spacing:.055em !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}
.ticker-copy .product b{
  letter-spacing:.02em !important;
  margin:0 !important;
  color:#0870c9 !important;
  font-size:16px !important;
  font-weight:700 !important;
}
.ticker-copy .emoji{
  width:auto !important;
  height:auto !important;
  border:0 !important;
  margin:0 !important;
  position:static !important;
  display:inline-block !important;
  font-size:24px !important;
  line-height:1 !important;
  transform:none !important;
  background:none !important;
}
.ticker-copy .emoji *{display:none !important;}


/* V31 — price card hierarchy */
.price-line > span{
  font-weight:400 !important;
}
.price-line > strong{
  font-weight:700 !important;
}


/* V34 — highlight prices with Hope AI blue */
.price-line > strong{
  color:#0870c9 !important;
}


/* V35 — calmer deep blue for yellow price card */
.price-line > strong{
  color:#24577A !important;
}