/* Zirva website v7: colour and life without clutter. No monospace anywhere. */

/* section numbers: big, display font, coloured */
.zs-n{font:600 72px/1 var(--font-family-display);letter-spacing:-.04em;color:var(--group-cobalt);margin-bottom:12px;opacity:.9}
@media (max-width:640px){.zs-n{font-size:52px}}
/* footer column labels: plain label style */
.zf-cols b{font:600 14px/20px var(--font-family-ui);letter-spacing:0;color:rgba(255,255,255,.45);margin-bottom:12px}

/* colour panels: blue, green, then the dark grading section */
.zc{margin:176px 16px 0;padding:120px 0;border-radius:48px;color:#fff;transform-origin:50% 0}
.zc + .zc,.zc + .zdark{margin-top:16px}
.zc-blue{background:var(--group-cobalt)}
.zc-green{background:var(--color-success)}
.zc .lp-h2{color:#fff}
.zc .lp-lead{color:rgba(255,255,255,.82)}
.zc .zs-n{color:rgba(255,255,255,.35);opacity:1}
.zdark .zs-n{color:rgba(255,255,255,.3);opacity:1}
.zc .zcard{box-shadow:0 30px 70px rgba(0,0,0,.22);color:var(--color-text)}
.zc .lp-phone{box-shadow:0 40px 80px rgba(0,0,0,.3)}
.zc .lp-reveal,.zdark .lp-reveal{transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out)}
.zdark{margin-top:16px}
@media (max-width:899px){.zc{margin:112px 8px 0;padding:72px 0;border-radius:32px}.zc + .zc,.zc + .zdark{margin-top:8px}}

/* hero stickers: product bits floating around the headline */
.zhero-in{position:relative}
.zst{position:absolute;inset:-40px 0 -20px;pointer-events:none}
.zst-i{position:absolute;display:grid;place-items:center;font:600 18px/1 var(--font-family-display);translate:calc(var(--mx,0) * var(--k,14px)) calc(var(--my,0) * var(--k,14px));transition:translate 500ms var(--ease-out);animation:stick 700ms var(--ease-spring) var(--d) both}
@keyframes stick{from{opacity:0;transform:scale(.6) rotate(0)}}
.zst .s1{--d:500ms;--k:22px;left:6%;top:10px;width:92px;height:92px;border-radius:50%;background:var(--color-success);color:#fff;box-shadow:inset 0 -6px 0 rgba(0,0,0,.2),0 18px 30px rgba(31,122,69,.25);transform:rotate(-10deg);grid-auto-flow:column;align-items:baseline;gap:2px;padding-bottom:6px}
.zst .s1 b{font-size:38px}.zst .s1 small{font-size:15px;opacity:.85}
.zst .s2{--d:650ms;--k:-18px;right:7%;top:30px;padding:14px 20px 17px;border-radius:22px 22px 22px 6px;background:var(--color-surface);color:var(--group-cobalt);font-size:22px;box-shadow:inset 0 0 0 2px var(--color-border-strong),inset 0 -4px 0 var(--color-surface-sunken),0 18px 30px rgba(22,27,38,.1);transform:rotate(6deg)}
.zst .s3{--d:800ms;--k:26px;left:13%;bottom:40px;width:64px;height:64px;border-radius:50%;background:var(--color-accent);color:var(--color-text);font-size:30px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.15),0 14px 24px rgba(233,181,0,.3);transform:rotate(8deg);padding-bottom:4px}
.zst .s4{--d:950ms;--k:-24px;right:14%;bottom:30px;width:70px;height:70px;border-radius:22px;background:var(--group-cobalt);color:#fff;font-size:32px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),0 14px 24px rgba(48,71,192,.3);transform:rotate(-8deg);padding-bottom:5px}
.zhero-in>h1,.zhero-in>p,.zhero-in>.zhero-act{position:relative;z-index:1}
@media (max-width:899px){.zst .s3,.zst .s4{display:none}.zst .s1{width:64px;height:64px;left:0;top:-20px}.zst .s1 b{font-size:26px}.zst .s1 small{font-size:12px}.zst .s2{right:0;top:-10px;font-size:16px;padding:10px 14px 12px}}

/* the fan spreads as you scroll (desktop) */
@media (min-width:900px){
  .lp-fan figure{transform:translateX(calc(-50% + var(--x) * var(--sp,1))) translateY(calc(var(--y) * var(--sp,1))) rotate(calc(var(--r) * var(--sp,1)));transition:transform 120ms linear}
  .lp-fan figure:hover{transform:translateX(calc(-50% + var(--x) * var(--sp,1))) translateY(calc(var(--y) * var(--sp,1) - 18px)) rotate(calc(var(--r) * var(--sp,1))) scale(1.03);transition:transform 260ms var(--ease-out)}
}

/* what's in beta: each column in its colour */
.zi-col h3{display:flex;align-items:center;gap:12px;border-bottom-width:3px;border-bottom-color:var(--c)}
.zi-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--c);color:#fff;font-size:20px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);padding-bottom:3px}
.zi-c{--c:var(--group-cobalt)} .zi-g{--c:var(--color-success)} .zi-t{--c:var(--group-tangerine)}
.zi-col li{display:flex;align-items:center;gap:12px}
.zi-col li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}

/* closing: the road draws behind the heading */
.zend-in{position:relative;padding:40px 0 20px}
.zend-road{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}
.zend-road path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.zend-road .a{stroke:var(--color-success-tint);stroke-width:46}
.zend-road .b{stroke:var(--group-cobalt-tint);stroke-width:30}
.zend-in.in .zend-road .a{animation:draw 1400ms var(--ease-out) 150ms forwards}
.zend-in.in .zend-road .b{animation:draw 1400ms var(--ease-out) 350ms forwards}
.zend-in>h2,.zend-in>p,.zend-in>form{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .zst-i{animation:none;transition:none;translate:none}
  .lp-fan figure{transition:none}
  .zend-road path{stroke-dashoffset:0}.zend-in.in .zend-road path{animation:none}
}

/* fixes after first look */
.zst .s1{display:flex;align-items:center;justify-content:center;gap:1px}
.zend{overflow:hidden}
.zend-road{left:50%;width:140vw;transform:translateX(-50%)}