/* ==========================================================================
   ABDUL BUILDS · home v7, the counter (on top of v5.css), 2026-10-16
   Built for someone who already heard the name: is this real, what does it
   cost. One quiet toy (the hype-word rain in the hero, fading once the page
   settles). No pinned scenes. Engine: assets/js/v7.js. Built by _seo/gen_v7.py.
   ========================================================================== */

/* ---------- hero: the rain sits behind the words and the face ---------- */
.hero{overflow:hidden;max-width:none;padding-left:max(var(--gut),calc((100vw - 1280px) / 2 + var(--gut)));
  padding-right:max(var(--gut),calc((100vw - 1280px) / 2 + var(--gut)))}
.noise{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-copy,.hero-face{position:relative;z-index:1}

/* ---------- what you get: the list beside two real recap pages ---------- */
.get-grid{display:grid;gap:48px;margin-top:8px}
.get .know-list{margin-top:36px}
.get .know-list .cap{max-width:40ch}
.proof{max-width:460px;margin:0 auto}
.pages{position:relative;aspect-ratio:900/1165;margin:0 8% 0 4%}
.pages img{position:absolute;inset:0;width:100%;height:auto;border:5px solid #F3F6EF;border-radius:3px;background:#F3F6EF;
  box-shadow:0 26px 44px rgb(0 0 0 / .55)}
.pages .p2{transform:rotate(4deg) translate3d(7%,2%,0);filter:brightness(.92)}
.pages .p1{transform:rotate(-2.5deg)}
.proof figcaption{margin-top:22px;font-size:15px;color:var(--mute);text-align:center;max-width:36ch;margin-left:auto;margin-right:auto}

/* ---------- results: three lines with numbers ---------- */
.res-list{margin-top:44px;display:grid}
.res{padding:30px 0;border-top:1px solid var(--line)}
.res:last-child{border-bottom:1px solid var(--line)}
.rn{font-size:clamp(28px,7.4vw,58px);font-weight:780;font-stretch:84%;line-height:1.02;letter-spacing:-.035em;max-width:18ch}
.res .cap{margin-top:12px;font-size:16px;color:var(--mute);max-width:46ch}
.res.in mark.hl{background-size:100% 100%;color:var(--on-lime)}

/* ---------- voices: four, short lines huge, both sides ---------- */
.voices .q{max-width:24ch;margin-top:clamp(44px,7vh,72px)}
.voices .q:nth-of-type(even){margin-left:auto;text-align:right}
.voices .q:nth-of-type(even) blockquote{text-indent:0}
.voices .q.xl blockquote{font-size:clamp(34px,9vw,76px);line-height:1;letter-spacing:-.035em;font-weight:760}
.voices .q.l blockquote{font-size:clamp(25px,6.2vw,46px)}
.voices .q.m{max-width:30ch}
.voices .q.m blockquote{font-size:clamp(20px,4.8vw,32px);line-height:1.18}
.voices .q.in mark.hl{background-size:100% 100%;color:var(--on-lime)}
.voices .q figcaption{font-size:15px}
.voices .q .qn{display:block;font-size:clamp(40px,10vw,72px);font-weight:800;line-height:.8;color:var(--lime);letter-spacing:-.05em;
  margin-bottom:10px;text-shadow:0 0 22px rgb(198 255 0 / .35)}

/* ---------- price: plain rows, the group amounts in ink ---------- */
.price{overflow-x:clip}
.row .amt .n{display:inline-block}
.row:not(.lead) .amt{font-size:clamp(60px,16vw,128px)}

/* ---------- films: tap to play, with sound ---------- */
.playbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;font:inherit;color:inherit}
.playbtn video{pointer-events:none}
.badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px 10px 14px;background:var(--lime);color:var(--on-lime);font-weight:760;font-size:16px;letter-spacing:-.01em;
  box-shadow:4px 4px 0 rgb(4 16 10 / .5);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.badge::before{content:"";width:0;height:0;border-left:12px solid var(--on-lime);border-top:8px solid transparent;border-bottom:8px solid transparent}
.playbtn:hover .badge{transform:translate(-50%,-50%) scale(1.06)}
.tile.playing .badge{opacity:0;transform:translate(-50%,-50%) scale(.8)}
.tile.playing:hover .badge{opacity:.9;transform:translate(-50%,-50%)}
.lab{margin-top:40px;font-size:clamp(18px,4.4vw,22px);color:var(--ink-2);max-width:40ch}
.lab a{font-weight:650;color:var(--ink);text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:6px}
.lab a:hover{color:var(--lime)}

/* ---------- about: his code line ---------- */
.about .code{font-size:clamp(22px,5.4vw,32px);font-weight:700;font-stretch:88%;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.about .code.in mark.hl{background-size:100% 100%;color:var(--on-lime)}

@media (min-width:900px){
  .get-grid{grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
  .get .know-list{margin-top:44px}
  .proof{margin:52px 0 0;max-width:none}
  .res-list{grid-template-columns:repeat(3,1fr);gap:0 40px}
  .res{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0}
  .rn{font-size:clamp(28px,2.9vw,40px);max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .noise{display:none}
}

/* ---------- what you will be able to do: tap a job, a window plays it (2026-10-16 night) ---------- */
.chips{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:34px calc(var(--gut) * -1) 0;padding:4px var(--gut)}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;min-height:46px;padding:0 18px;background:transparent;border:2px solid rgb(239 255 242 / .22);color:var(--ink);
  font:650 17px var(--f);letter-spacing:-.01em;cursor:pointer;transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease)}
.chip:hover{border-color:var(--lime)}
.chip.on{background:var(--lime);border-color:var(--lime);color:var(--on-lime);box-shadow:4px 4px 0 rgb(198 255 0 / .28)}
.panel{margin-top:30px;padding-top:30px;border-top:1px solid var(--line)}
.can-head{font-size:clamp(26px,6.6vw,48px);font-weight:760;font-stretch:86%;line-height:1.05;letter-spacing:-.03em;max-width:20ch;
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.panel.in .can-head mark.hl,.panel.swap .can-head mark.hl{background-size:100% 100%;color:var(--on-lime);transition-delay:.15s}
.panel.out .can-head{opacity:0;transform:translate3d(0,10px,0)}
/* the window: dark glass, lime hard shadow, a bar with three dots */
.win{margin-top:26px;background:#020905;border:2px solid rgb(198 255 0 / .5);box-shadow:8px 8px 0 rgb(198 255 0 / .22);max-width:720px}
.wbar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgb(198 255 0 / .25);background:rgb(198 255 0 / .06)}
.wbar i{width:10px;height:10px;border-radius:50%;background:rgb(239 255 242 / .18)}
.wbar i:first-child{background:var(--red);opacity:.8}
.wtitle{margin-left:8px;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--mute)}
.wdone{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--on-lime);background:var(--lime);
  padding:3px 8px;opacity:0;transform:scale(.6);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.win.done .wdone{opacity:1;transform:none}
.wbody{padding:18px 16px 20px;min-height:230px;font-size:clamp(15px,3.9vw,18px);line-height:1.4}
.wp{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-weight:560}
.wu{flex:0 0 auto;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--on-lime);background:var(--lime);
  padding:3px 7px;margin-top:3px}
.wt{white-space:pre-wrap}
.wc{display:inline-block;width:.45em;height:1.05em;background:var(--lime);vertical-align:-.15em;margin-left:2px;animation:blink 1.05s steps(1) infinite}
.win.typed .wc{display:none}
.ws{margin-top:16px;display:grid;gap:9px}
.ws li{position:relative;padding-left:26px;color:var(--ink-2);opacity:0;transform:translate3d(0,6px,0);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.ws li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;background:var(--lime);box-shadow:0 0 14px rgb(198 255 0 / .5);
  transform:scale(0);transition:transform .35s var(--ease) .05s}
.ws li.on{opacity:1;transform:none}
.ws li.on::before{transform:scale(1)}
.wr{margin-top:18px;padding:12px 14px;border-left:4px solid var(--lime);background:rgb(198 255 0 / .07);color:var(--ink);font-weight:600;
  opacity:0;transform:translate3d(0,8px,0);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.wr.on{opacity:1;transform:none}
.wcap{margin-top:16px;max-width:52ch}
@media (min-width:900px){
  .chips{flex-wrap:wrap;overflow:visible;margin:40px 0 0;padding:0}
  .panel{display:grid;grid-template-columns:.8fr 1.2fr;column-gap:48px;align-items:start}
  .can-head{grid-column:1;max-width:14ch}
  .win{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .wcap{grid-column:1;margin-top:18px}
  .wbody{min-height:260px}
}
@media (prefers-reduced-motion:reduce){
  .wc{display:none}
  .ws li,.wr{opacity:1;transform:none}
  .ws li::before{transform:scale(1)}
}