/* =========================================================
   SANFU 三福 · 生活新「搭」案  H5视觉系统
   Design canvas: 750 × 1334 px
   ========================================================= */
@font-face{
  font-family:'Smiley';
  src:url('../assets/fonts/SmileySans-subset.woff2') format('woff2'),
      url('../assets/fonts/SmileySans-subset.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:block;
}
@font-face{
  font-family:'NotoSC';
  src:url('../assets/fonts/NotoSansSC-subset.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:block;
}
@font-face{
  font-family:'MiSans';
  src:url('../assets/fonts/MiSans-subset.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:block;
}

:root{
  --red:#E60012;
  --orange:#F39800;
  --blue:#00A0E9;
  --ink:#2B2725;
  --ink-soft:#3F3A39;
  --paper:#F7F1E5;
  --paper-deep:#EFE5D3;
  --sky:#CDE9FF;
  --pink:#FFD9CF;
  --white:#FFFDF7;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#B9B1A3;
  font-family:'NotoSC',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
img{display:block;}
button{font:inherit;color:inherit;}

.phone{
  position:relative;
  width:750px;
  height:1334px;
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  isolation:isolate;
}
.layer{position:absolute;inset:0;pointer-events:none;}
.layer button,
.layer a,
.layer .scene-card,
.layer .scene-switch span,
.layer [role="button"]{pointer-events:auto;}

/* ---------- typography ---------- */
.display{font-family:'Smiley',sans-serif;font-weight:400;letter-spacing:-.02em;}
.noto{font-family:'NotoSC',sans-serif;}
.strong{font-weight:900;}
.mono-label{
  font-family:'MiSans',sans-serif;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* ---------- common bits ---------- */
.pill{
  display:inline-flex;align-items:center;gap:10px;
  border:2.5px solid var(--ink);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink);
  padding:9px 17px 8px;
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  line-height:1;
}
.pill .dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:0 0 auto;}
.pill--orange{background:var(--orange);}
.pill--blue{background:var(--blue);color:var(--paper);}
.pill--ink{background:var(--ink);color:var(--paper);}

.brand-logo{width:154px;height:auto;}
.brand-logo--light{width:150px;}

.hairline{height:2px;background:var(--ink);opacity:.18;}

.btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:16px;
  height:92px;
  border:3px solid var(--ink);
  border-radius:999px;
  background:var(--red);
  color:var(--white);
  font-family:'NotoSC',sans-serif;
  font-size:31px;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:8px 8px 0 var(--ink);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:active{transform:translate(5px,5px);box-shadow:3px 3px 0 var(--ink);}
.btn .arrow{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--paper);color:var(--ink);
  font-size:26px;font-weight:900;
}
.btn--ink{background:var(--ink);color:var(--paper);box-shadow:8px 8px 0 var(--orange);}
.btn--cream{background:var(--paper);color:var(--ink);box-shadow:8px 8px 0 var(--orange);}

/* ---------- textures ---------- */
.grain{
  position:absolute;inset:0;
  background-image:url('../assets/grain.png');
  background-size:320px 320px;
  opacity:.55;
  mix-blend-mode:multiply;
  pointer-events:none;
}
.halftone{
  background-image:radial-gradient(circle, rgba(43,39,37,.28) 1.4px, transparent 1.5px);
  background-size:13px 13px;
}
.dot-grid{
  background-image:radial-gradient(circle, rgba(43,39,37,.26) 1.6px, transparent 1.7px);
  background-size:20px 20px;
}

/* ---------- sticker tape ---------- */
.tape{
  position:absolute;
  height:38px;
  background:rgba(243,152,0,.72);
  border-top:2px solid rgba(43,39,37,.18);
  border-bottom:2px solid rgba(43,39,37,.18);
  transform:rotate(-5deg);
  clip-path:polygon(0 8%, 3% 0, 8% 7%, 14% 0, 20% 6%, 27% 0, 34% 7%, 42% 0, 50% 6%,
                    58% 0, 66% 7%, 75% 0, 84% 6%, 92% 0, 100% 8%, 100% 92%,
                    94% 100%, 87% 93%, 79% 100%, 71% 94%, 62% 100%, 53% 93%,
                    44% 100%, 36% 94%, 28% 100%, 20% 93%, 12% 100%, 5% 93%, 0 100%);
  opacity:.9;
}

/* ---------- circular stamp ---------- */
.stamp{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:118px;height:118px;border-radius:50%;
  border:3px solid var(--red);
  color:var(--red);
  transform:rotate(12deg);
  font-family:'NotoSC',sans-serif;
  line-height:1.15;
  text-align:center;
  background:rgba(247,241,229,.45);
}
.stamp b{font-size:17px;font-weight:900;letter-spacing:.12em;}
.stamp span{font-size:9px;letter-spacing:.18em;margin-top:4px;}

/* ---------- export / embed helpers ---------- */
body.embed .phone{box-shadow:none;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}