/* ===== WORK_02 · Zero (Figma 576:6618) ===== */
.zero-page .case { height: 5733px; }
.zero-page .zb1 { margin:0; font-size:18px; line-height:28px; font-weight:400; color:var(--ink); }
.zero-page .zb2 { margin:0; font-size:16px; line-height:24px; color:var(--ink); }
.zero-page .zb3 { white-space:nowrap; letter-spacing:-0.16px; margin:0; font-size:18px; line-height:20px; font-weight:500; text-align:right; color:#57703f; }
.zero-page .zh5 { font-weight:500; font-size:24px; line-height:30px; letter-spacing:-0.15px; white-space:nowrap; color:var(--ink); }
.zero-page .zh6 { font-weight:500; font-size:20px; line-height:24px; white-space:nowrap; color:var(--ink); }
.zero-page .z-title { font-weight:700; font-size:56px; line-height:68px; letter-spacing:-0.6px; color:var(--ink); }
.zero-page .zframe { position:absolute; border:1px solid #a7a7a8; border-radius:30px; box-sizing:border-box; }
.zero-page .zneco40, .zero-page .zneco25 { font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-0.2px; color:var(--ink); }
.zero-page .zneco40 { font-size:40px; line-height:45px; }
.zero-page .zneco25 { font-size:25px; line-height:45px; }
.zero-page .zlist { margin:0; padding-left:29px; }
.zero-page .zlist li { margin:0; }

/* cover */
.zero-page .zcover { width:1360px; height:768px; border-radius:40px; overflow:hidden; display:block; }
.zero-page .zcover__bg { position:absolute; inset:0; background:#f5f5f5; }
.zero-page .zcover__img { position:absolute; top:0; height:768px; overflow:hidden; }
.zero-page .zcover__img img { position:absolute; left:0; top:0; width:100%; height:100%; max-width:none; }
.zero-page .zcover__img--r { left:142px; width:1218px; border-radius:0 40px 40px 0; }
.zero-page .zcover__img--l { left:0; width:377px; border-radius:40px 0 0 40px; }

.zero-page .zcover__t { position:absolute; left:948px; top:29px; margin:0; font-weight:700; font-size:62px; line-height:76px; letter-spacing:-0.3px; color:rgb(33,104,61); white-space:nowrap; }
.zero-page .zcover__phone { position:absolute; left:152px; top:45px; width:328.5px; height:678px; max-width:none; }

/* insight */
.zero-page .zins__img { position:absolute; overflow:hidden; border-radius:30px; opacity:.46; filter:blur(.5px); mix-blend-mode:exclusion; }
.zero-page .zins__img img, .zero-page .zmap img, .zero-page .zsea img { position:absolute; max-width:none; display:block; }
.zero-page .zbar { overflow:hidden; height:291px; }
.zero-page .zbar__in { position:relative; width:96px; border-radius:20px 20px 0 0; }
.zero-page .zbar__in span { position:absolute; left:22px; top:10px; font-size:24px; line-height:30px; letter-spacing:-0.15px; white-space:nowrap; }
.zero-page .zins p.x { opacity:0; }
.zero-page .zins.is-live p.x { animation: z-fade 10s linear infinite; }
.zero-page .zins .zbar--1 { height:74px; transform:translateY(216px); }
.zero-page .zins .zbar--2 { height:53px; transform:translateY(159px); }
.zero-page .zins.is-live .zbar--1 { animation: z-bar1 10s linear infinite; }
.zero-page .zins.is-live .zbar--2 { animation: z-bar2 10s linear infinite; }
@keyframes z-fade { 0% { opacity:0; animation-timing-function:cubic-bezier(.5,0,.5,1); } 8.065% { opacity:1; } 100% { opacity:1; } }
@keyframes z-bar1 { 0% { height:74px; transform:translateY(216px); } 8.065% { height:291px; transform:translateY(-1px); } 100% { height:291px; transform:translateY(-1px); } }
@keyframes z-bar2 { 0% { height:53px; transform:translateY(159px); } 13.204% { height:212px; transform:translateY(0); } 100% { height:212px; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .zero-page .zins p.x { opacity:1; animation:none !important; }
  .zero-page .zins .zbar--1 { height:291px; transform:translateY(-1px); animation:none !important; }
  .zero-page .zins .zbar--2 { height:212px; transform:none; animation:none !important; }
  .zero-page .zcar__track { animation:none !important; }
}
/* percent */
.zero-page .zpct__n { text-align:right; font-weight:500; color:#57703f !important; margin:0; font-size:72px; line-height:88px; letter-spacing:-0.8px; white-space:nowrap; }
.zero-page .zdot { position:absolute; width:42px; height:42px; border-radius:50%; background:#b8ce9a; }
.zero-page .zdot--y { background:#fff1c5; }

/* b4 */
.zero-page .zsorry { font-family:"Indivisible",var(--font-sans); font-weight:500; font-size:30px; line-height:38px; letter-spacing:-0.18px; color:#292929; }
.zero-page .zmap, .zero-page .zsea { position:absolute; overflow:hidden; border-radius:30px; }
.zero-page .zmap { filter:blur(.85px); }
.zero-page .zsea { opacity:.7; filter:blur(.9px); }
.zero-page .zwin { background:#292929; border-radius:20px 20px 0 0; font-family:"Indivisible",var(--font-sans); font-weight:500; }
.zero-page .zwin p { position:absolute; margin:0; color:#f5f5f5; white-space:nowrap; }
.zero-page .zwin__t1 { left:16px; top:20px; font-size:16px; line-height:22px; letter-spacing:-0.18px; }
.zero-page .zwin__t2 { left:16px; top:45px; width:303px; font-size:12px; line-height:20px; letter-spacing:-0.24px; }
.zero-page .zwin__btn { position:absolute; width:303px; height:42px; box-sizing:border-box; border:1px solid #a7d678; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; line-height:20px; letter-spacing:-0.24px; color:#a7d678; white-space:nowrap; }
.zero-page .zwin__btn--fill { background:#a7d678; color:#292929; }
.zero-page .zwin__grab, .zero-page .zwin__ico { position:absolute; max-width:none; display:block; }

/* carousel */
.zero-page .zcar__track { position:absolute; top:0; animation: z-car 10s linear infinite; will-change: transform; }
.zero-page .zcar__track img { position:absolute; top:0; max-width:none; display:block; }
@keyframes z-car { from { transform:translateX(0); } to { transform:translateX(-2740px); } }

/* prototype phone */
/* video replaces the phone mock: radius 23 as in Figma */
.zero-page .zscan{border-radius:23px;overflow:hidden;background:#131313}
.zero-page .zscan__v { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.zero-page .next--back img { transform:rotate(180deg); transition:transform .2s ease-out; }
.zero-page .next--back:hover img { transform:rotate(180deg) translateX(4px); }
.zero-page .zmd{font-weight:500}
.zero-page .zbar__in span{font-weight:500}