/* Home v2 — loaded only on the v2 home page and project pages that need it */

/* ---------- hero: work-first spotlight ---------- */
.h2x{position:relative;padding:150px 0 0;text-align:center;overflow:hidden}
.h2x::before{content:"";position:absolute;left:50%;top:-260px;width:1300px;height:900px;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 30%,rgba(208,255,113,.13),transparent 62%);pointer-events:none}
.h2x .pill{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);font-size:14px;color:var(--text-2);transition:border-color .3s,background .3s}
.h2x .pill b{padding:5px 11px;border-radius:999px;background:var(--lime);color:var(--on-lime);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.h2x .pill:hover{border-color:var(--lime);background:rgba(208,255,113,.06)}
.h2x h1{font-family:var(--display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(54px,8.2vw,140px);line-height:.88;margin:28px auto 0;max-width:1200px}
.h2x h1 em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--lime);font-stretch:100%}
.h2x h1 .ln{display:block;overflow:hidden;padding-bottom:.05em}
.h2x h1 .ln>span{display:block;transform:translateY(105%);animation:up 1.1s var(--ease) forwards}
.h2x h1 .ln:nth-child(2)>span{animation-delay:.1s}
.h2x .lead{margin:26px auto 0;text-align:center;max-width:600px}
.h2x .cta{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.promises{display:flex;justify-content:center;gap:26px;margin-top:26px;font-size:14px;color:var(--text-2);flex-wrap:wrap}
.promises span{display:inline-flex;align-items:center;gap:8px}
.promises span::before{content:"";width:16px;height:16px;border-radius:50%;background:rgba(208,255,113,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.2 4.7-4.8' fill='none' stroke='%23D0FF71' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* device stage */
.stage2{position:relative;width:min(1040px,92%);margin:64px auto 0;padding-bottom:40px}
.stage2::before{content:"";position:absolute;left:50%;top:18%;width:120%;height:80%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 40%,rgba(208,255,113,.2),transparent 62%);filter:blur(20px);pointer-events:none}
.mac2{position:relative;animation:rise 1.4s .25s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(60px) scale(.97)}}
.mac2 .sc{position:relative;border-radius:22px 22px 4px 4px;padding:12px 12px 16px;background:#0a0a0b;border:1.5px solid #39393d;box-shadow:0 60px 120px -40px rgba(0,0,0,.9)}
.mac2 .sc::before{content:"";position:absolute;left:50%;top:5px;width:6px;height:6px;border-radius:50%;background:#222;transform:translateX(-50%)}
.mac2 .view{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#F3F5F7}
.mac2 .view img{width:100%;height:auto;animation:pageScroll 34s cubic-bezier(.45,0,.55,1) infinite alternate;will-change:transform}
@keyframes pageScroll{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(-100% + 100cqw * .625))}}
.mac2 .view{container-type:inline-size}
.mac2 .bs{height:18px;margin:0 -7%;border-radius:2px 2px 18px 18px;background:linear-gradient(180deg,#dcdde1,#9c9da2 70%,#6c6d71)}
.mac2 .bs::before{content:"";display:block;width:15%;height:6px;margin:0 auto;border-radius:0 0 8px 8px;background:#aaabaf}
.iph2{position:absolute;right:-5%;bottom:30px;width:21%;padding:7px;border-radius:38px;background:#0b0b0c;border:1.5px solid #4a4a4f;box-shadow:0 40px 80px -24px rgba(0,0,0,.95);animation:rise 1.4s .45s var(--ease) both}
.iph2::before{content:"";position:absolute;z-index:2;left:50%;top:15px;width:32%;height:18px;border-radius:12px;background:#000;transform:translateX(-50%)}
.iph2 .view{aspect-ratio:390/820;overflow:hidden;border-radius:31px;background:#F3F5F7;container-type:inline-size}
.iph2 .view img{width:100%;height:auto;animation:phoneScroll 30s cubic-bezier(.45,0,.55,1) 3s infinite alternate}
@keyframes phoneScroll{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(calc(-100% + 100cqw * 2.103))}}
.stage2:hover .view img{animation-play-state:paused}
.stage2 .live{position:absolute;left:-2%;bottom:70px;z-index:3;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px;border-radius:999px;background:rgba(17,17,18,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-2);font-size:14px;color:var(--text-2);text-align:left;transition:border-color .3s;animation:rise 1.2s .7s var(--ease) both}
.stage2 .live b{display:block;color:var(--text);font-size:15px}
.stage2 .live i{width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--on-lime);display:grid;place-items:center;font-style:normal}
.stage2 .live:hover{border-color:var(--lime)}
.stage2 .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 0 3px rgba(34,211,105,.2)}

/* ---------- planner ---------- */
.planner{position:relative;border-radius:36px;padding:clamp(28px,4vw,60px);background:radial-gradient(ellipse 80% 70% at 50% 100%,#1d2215,#18181A 70%);border:1px solid var(--line);overflow:hidden}
.pl-head{text-align:center;max-width:760px;margin:0 auto}
.pl-steps{display:inline-flex;align-items:center;gap:12px;font-size:13px;color:var(--text-2)}
.pl-steps .track{width:140px;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.pl-steps .track i{display:block;height:100%;width:33.33%;background:var(--lime);border-radius:4px;transition:width .6s var(--ease)}
.pl-head .h2{margin-top:20px}
.pl-head p{color:var(--text-2);font-size:clamp(16px,1.3vw,19px);margin-top:16px}
.pl-body{margin-top:clamp(32px,4vw,52px)}
.pl-step{display:none}
.pl-step.on{display:block;animation:fadeUp .6s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}
.opts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.opt{position:relative;text-align:left;border-radius:24px;background:var(--card);border:1px solid var(--line);padding:10px 10px 20px;cursor:pointer;transition:border-color .3s,transform .5s var(--ease),box-shadow .4s,background .3s;color:inherit}
.opt:hover{transform:translateY(-4px);border-color:var(--line-2)}
.opt img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:16px}
.opt b{display:block;font-family:var(--display);font-stretch:70%;font-weight:700;font-size:24px;text-transform:uppercase;margin:16px 10px 4px}
.opt span{display:block;margin:0 10px;font-size:14px;color:var(--text-2)}
.opt .tick{position:absolute;right:20px;top:20px;width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);display:grid;place-items:center;font-weight:800;font-size:14px;color:transparent;transition:all .3s}
.opt[aria-pressed="true"]{border-color:var(--lime);background:#1c1f17;box-shadow:0 0 0 4px rgba(208,255,113,.14),0 30px 60px -30px rgba(208,255,113,.45)}
.opt[aria-pressed="true"] .tick{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.chips2{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip2{height:58px;padding:0 26px;border-radius:16px;border:1px solid var(--line-2);background:var(--card);font-size:16px;color:var(--text-2);cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:10px}
.chip2:hover{border-color:var(--text-2)}
.chip2[aria-pressed="true"]{border-color:var(--lime);background:rgba(208,255,113,.1);color:var(--text)}
.chip2[aria-pressed="true"]::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.5L13 6.5' fill='none' stroke='%23111112' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px}
.pl-final{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin:0 auto}
.pl-sum{padding:30px;border-radius:26px;background:var(--lime);color:var(--on-lime);display:flex;flex-direction:column;gap:16px}
.pl-sum small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.pl-sum .big{font-family:var(--display);font-stretch:62%;font-weight:800;font-size:clamp(38px,3.6vw,54px);line-height:.92;text-transform:uppercase}
.pl-sum .big em{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;font-stretch:100%}
.pl-sum ul{list-style:none;display:grid;gap:10px;border-top:1px solid rgba(17,17,18,.18);padding-top:16px;font-weight:600}
.pl-sum li{display:flex;justify-content:space-between;gap:12px}
.pl-sum li span{opacity:.6;font-weight:500}
.pl-form{display:grid;gap:12px;align-content:start}
.pl-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:clamp(28px,3vw,40px);flex-wrap:wrap}
.pl-nav .back{background:none;border:0;color:var(--text-2);font-size:15px;cursor:pointer;padding:10px 0}
.pl-nav .back:hover{color:var(--lime)}
.pl-nav .alt{color:var(--text-2);font-size:15px}
.pl-nav .alt a{color:var(--text);border-bottom:1px solid var(--line-2)}
.pl-nav .alt a:hover{color:var(--lime);border-color:var(--lime)}
.pl-done{text-align:center;padding:30px 0}
.pl-done .ok{width:72px;height:72px;border-radius:50%;background:var(--lime);color:var(--on-lime);display:grid;place-items:center;font-size:30px;margin:0 auto 22px}

/* ---------- note from me ---------- */
.note2{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.note2 .ph{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/5}
.note2 .ph img{width:100%;height:100%;object-fit:cover}
.note2 .ph span{position:absolute;left:14px;bottom:14px;padding:9px 14px;border-radius:999px;background:rgba(17,17,18,.72);backdrop-filter:blur(10px);font-size:13px}
.note2 blockquote{font-family:var(--serif);font-size:clamp(30px,3.2vw,50px);line-height:1.1;margin-top:22px}
.note2 blockquote em{color:var(--lime)}
.note2 .sig{font-family:var(--serif);font-style:italic;font-size:46px;color:var(--lime);margin-top:26px;line-height:1}
.note2 .sig small{display:block;font-family:var(--sans);font-style:normal;font-size:14px;color:var(--mute);margin-top:8px}
.note2 ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
.note2 li{padding:18px;border-radius:18px;background:var(--card);border:1px solid var(--line);font-size:14.5px;color:var(--text-2)}
.note2 li b{display:block;color:var(--text);font-size:15.5px;margin-bottom:4px}

/* ---------- first 7 days ---------- */
.days2{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-top:46px}
.days2::before{content:"";position:absolute;left:0;right:0;top:12px;height:4px;border-radius:4px;background:var(--line)}
.days2::after{content:"";position:absolute;left:0;top:12px;height:4px;width:100%;border-radius:4px;background:linear-gradient(90deg,var(--lime),#a6e64e);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .2s linear}
.day2{position:relative;padding:28px;border-radius:24px;background:var(--card);border:1px solid var(--line);transition:background .5s,color .5s,border-color .5s}
.day2::before{content:"";position:absolute;top:-42px;left:28px;width:20px;height:20px;border-radius:50%;background:var(--bg);border:2px solid var(--line-2);transition:all .4s}
.day2.on::before{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 6px rgba(208,255,113,.18)}
.day2 small{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.day2 b{display:block;font-family:var(--display);font-stretch:70%;font-weight:700;font-size:28px;text-transform:uppercase;margin:12px 0 8px;line-height:1}
.day2 p{font-size:15px;color:var(--text-2)}
.day2 .deliv{display:inline-block;margin-top:16px;padding:6px 12px;border-radius:999px;background:rgba(208,255,113,.1);color:var(--lime);font-size:13px;font-weight:600}
.day2.last.on{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.day2.last.on small,.day2.last.on p{color:var(--on-lime)}
.day2.last.on .deliv{background:var(--on-lime);color:var(--lime)}

/* ---------- mobile sticky bar ---------- */
.mbar{display:none}

/* ---------- before / after (project pages) ---------- */
.ba2{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#0c0c0d;user-select:none;touch-action:pan-y;--x:50%}
.ba2 img{display:block;width:100%;height:auto;pointer-events:none}
.ba2 .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.ba2 .after img{width:100%;height:100%;object-fit:cover}
.ba2 .hd{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:var(--lime);box-shadow:0 0 24px rgba(208,255,113,.7);transform:translateX(-1px)}
.ba2 .kn{position:absolute;top:50%;left:var(--x);width:62px;height:62px;border-radius:50%;background:var(--lime);color:var(--on-lime);display:grid;place-items:center;font-size:22px;font-weight:800;transform:translate(-50%,-50%);cursor:ew-resize;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.ba2 .lb{position:absolute;top:16px;padding:7px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ba2 .lb.b{left:16px;background:rgba(17,17,18,.8);color:#FF8F7E}
.ba2 .lb.a{right:16px;background:var(--lime);color:var(--on-lime)}
.ba2 input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-wrap2 figcaption{padding:14px 2px 0;font-size:14px;color:var(--mute)}

@media (max-width:1080px){
  .opts{grid-template-columns:repeat(2,1fr)}
  .days2{grid-template-columns:1fr 1fr}
  .days2::before,.days2::after{display:none}
  .day2::before{display:none}
}
@media (max-width:900px){
  .h2x{padding-top:118px}
  .stage2{width:100%;margin-top:44px}
  .iph2{width:26%;right:-2%}
  .stage2 .live{left:0;bottom:-6px;font-size:13px}
  .note2{grid-template-columns:1fr}
  .note2 .ph{max-width:320px}
  .note2 ul{grid-template-columns:1fr}
  .pl-final{grid-template-columns:1fr}
  .mbar{display:flex;position:fixed;z-index:60;left:12px;right:12px;bottom:12px;gap:8px;padding:8px;border-radius:999px;background:rgba(30,30,33,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-2);transform:translateY(130%);transition:transform .5s var(--ease)}
  .mbar.show{transform:none}
  .mbar .btn{flex:1;height:50px;justify-content:space-between;font-size:13px}
  .mbar .wa{width:50px;height:50px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:0 0 auto}
  .mbar .wa svg{width:24px;height:24px}
  body.has-mbar .ft{padding-bottom:100px}
}
@media (max-width:560px){
  .opts{grid-template-columns:1fr 1fr;gap:10px}
  .opt{padding:8px 8px 14px;border-radius:18px}
  .opt img{border-radius:12px}
  .opt b{font-size:18px;margin:12px 6px 2px}
  .opt span{font-size:12.5px;margin:0 6px}
  .opt .tick{right:14px;top:14px;width:26px;height:26px}
  .days2{grid-template-columns:1fr}
  .chip2{height:50px;padding:0 18px;font-size:15px}
  .promises{gap:12px 18px;font-size:13px}
}
.pl-steps span{white-space:nowrap}
@media (max-width:560px){
  .h2x h1{font-size:13.4vw}
  .h2x h1 .ln,.h2x h1 .ln>span{display:inline;transform:none;animation:none;padding:0}
  .pl-steps .track{width:80px}
}
.hdr.solid .bar{background:rgba(20,20,22,.94)}
.pl-next{opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .45s var(--ease),transform .5s var(--ease),background .3s,box-shadow .4s}
.pl-next.ready{opacity:1;transform:none;pointer-events:auto}
.opt .tick{opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--ease),background .3s,border-color .3s}
.opt:hover .tick{opacity:1;transform:none}
.opt[aria-pressed="true"] .tick{opacity:1;transform:none}
.sig-row{display:flex;align-items:center;gap:18px;margin-top:26px}
.sig-row .sig{margin-top:0}
.sig-mark{height:58px;width:auto;opacity:.95;padding-right:18px;border-right:1px solid var(--line-2)}
.btn i.wa-i{background:#25D366}
.btn i.wa-i svg{width:20px;height:20px}

/* header CTA waits until the hero's own CTA has scrolled away */
.v2-home .hdr-cta{transition:opacity .45s var(--ease),transform .5s var(--ease),background .3s,box-shadow .4s}
.v2-home .hdr:not(.cta-on) .hdr-cta{opacity:0;transform:translateY(-6px) scale(.96);pointer-events:none}
.v2-home .hdr-cta{max-width:220px;overflow:hidden;transition:opacity .45s var(--ease),transform .5s var(--ease),max-width .6s var(--ease),padding .6s var(--ease),margin .6s var(--ease),background .3s,box-shadow .4s}
.v2-home .hdr:not(.cta-on) .hdr-cta{max-width:0;padding:0;margin-left:-10px}

/* header WhatsApp follows the same reveal as "Let's talk" */
.v2-home .hdr-wa{transition:opacity .45s var(--ease),transform .5s var(--ease),max-width .6s var(--ease),margin .6s var(--ease),box-shadow .4s;max-width:44px;overflow:hidden}
.v2-home .hdr:not(.cta-on) .hdr-wa{opacity:0;transform:scale(.7);max-width:0;margin-left:-10px;pointer-events:none}

/* live-site button on the hero laptop */
.live-btn{position:absolute;z-index:3;left:50%;bottom:62px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 6px 0 20px;border-radius:999px;background:rgba(17,17,18,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--line-2);color:var(--text);font-size:14px;font-weight:600;letter-spacing:.02em;white-space:nowrap;box-shadow:0 20px 50px -20px rgba(0,0,0,.8);transition:border-color .3s,background .3s,transform .5s var(--ease);animation:rise 1.2s .7s var(--ease) both}
.live-btn i{width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--on-lime);display:grid;place-items:center;font-style:normal}
.live-btn .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,211,105,.2)}
.live-btn:hover{border-color:var(--lime);background:rgba(17,17,18,.9)}

/* compact planner heading: one line, so the cards stay in view */
.pl-title{font-size:clamp(40px,5.4vw,88px);white-space:nowrap}
.pl-head p{margin-top:12px}
.pl-body{margin-top:clamp(24px,3vw,40px)}
@media (max-width:560px){.pl-title{white-space:normal;font-size:clamp(40px,12vw,56px)}.live-btn{bottom:34px;height:42px;font-size:13px}.live-btn i{width:32px;height:32px}}
.live-btn{bottom:auto;top:-25px}
@media (max-width:560px){.live-btn{top:-21px}}

/* tablet & phone: keep the hero phone and laptop base inside the screen */
@media (max-width:1080px){.iph2{right:0}.mac2 .bs{margin:0 -3%}}
@media (max-width:900px){.stage2{width:93%}}
/* dark placeholder while the device screenshots load on slow connections */
.mac2 .view,.iph2 .view{background:#141416}