/* ==========================================================================
   ABDUL BUILDS · home v5 prototype (2026-10-11 night)
   Written from the buyer's side. Matrix night, lime signal, red only for what
   is broken. One family: Bricolage Grotesque. Short lines; the key words sit on
   a lime highlight bar that sweeps in like a marker. Square, hard shadows,
   his face as a die-cut sticker. Built by _seo/gen_v5.py.
   ========================================================================== */
@font-face{font-family:'Brico';src:url('../fonts/BricolageGrotesque-var.woff2') format('woff2');
  font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}

:root{
  --bg:#04100A; --bg-2:#08190F; --bg-3:#0E2416;
  --ink:#EFFFF2; --ink-2:rgb(239 255 242 / .74); --mute:#8FBF98;
  --lime:#C6FF00; --on-lime:#04100A; --red:#FF2D2D;
  --line:rgb(239 255 242 / .12);
  --f:'Brico',ui-sans-serif,system-ui,sans-serif;
  --gut:clamp(18px,5vw,64px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-optical-sizing:auto;font-size:18px;line-height:1.5;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* nothing may widen the page sideways on a phone. body's hidden alone is handed to the viewport, which iOS still lets you pan
   (the price stamps pushed it 30px wide). clip on html and body cuts it for real, and unlike hidden it keeps the sticky pins working (2026-10-13) */
@supports (overflow:clip){html,body{overflow-x:clip}}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(80vmax 60vmax at 85% 8%,rgb(198 255 0 / .09),transparent 60%),
    radial-gradient(70vmax 50vmax at 0% 100%,rgb(30 120 60 / .16),transparent 60%),
    linear-gradient(rgb(198 255 0 / .035) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgb(198 255 0 / .035) 1px,transparent 1px) 0 0/44px 44px}
a{color:inherit}
img,video{max-width:100%;display:block}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--lime);color:var(--on-lime)}
:focus-visible{outline:2px solid var(--lime);outline-offset:4px}

/* ---------- logo: the block (dark bar, lime type, lime hard shadow) ---------- */
.logo{display:inline-flex;align-items:flex-end;background:#000;color:var(--lime);text-decoration:none;
  font-weight:800;font-stretch:82%;font-size:20px;letter-spacing:-.025em;line-height:1;padding:.2em .38em .16em;
  border:2px solid var(--lime);transform:rotate(-2.5deg);box-shadow:.16em .16em 0 var(--lime)}
.caret{display:inline-block;width:.2em;height:.74em;margin:0 0 .04em .1em;background:var(--lime);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- buttons: square, hard shadow ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 24px;background:var(--lime);
  color:var(--on-lime) !important;font-weight:720;font-size:18px;letter-spacing:-.01em;text-decoration:none;
  box-shadow:5px 5px 0 rgb(198 255 0 / .28);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgb(198 255 0 / .36)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgb(198 255 0 / .3)}
.btn.sm{min-height:42px;padding:0 16px;font-size:16px;box-shadow:3px 3px 0 rgb(198 255 0 / .28)}
.txt{font-weight:600;font-size:18px;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;
  text-underline-offset:7px}
.txt:hover{color:var(--lime)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}

/* ---------- the highlight bar ---------- */
mark.hl{color:inherit;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 0/0% 100%;padding:0 .1em;margin:0 -.02em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .75s var(--ease),color .25s linear;transition-delay:calc(var(--i,0) * 45ms + .38s)}
.in mark.hl,html:not(.js) mark.hl{background-size:100% 100%;color:var(--on-lime)}

/* ---------- reveal: headings rise word by word, other blocks lift in ---------- */
.kin .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .12em;margin:0 -.03em -.12em}
.kin .w:has(mark){padding:0 .24em .12em .12em;margin:0 -.24em -.12em -.12em}
.kin .w i{display:inline-block;font-style:normal;transform:translate3d(0,112%,0) rotate(4deg);transform-origin:0 100%;
  transition:transform .85s var(--ease) calc(var(--i) * 45ms)}
.kin.in .w i,html:not(.js) .kin .w i{transform:none}
.js [data-reveal]:not(.kin){opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .7s var(--ease) calc(var(--d,0) * 90ms),transform .7s var(--ease) calc(var(--d,0) * 90ms)}
.js [data-reveal].in:not(.kin){opacity:1;transform:none}

/* ---------- top bar ---------- */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gut);
  background:rgb(4 16 10 / .78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* ---------- hero ---------- */
.hero{position:relative;padding:5vh var(--gut) 0;max-width:1280px;margin:0 auto;min-height:calc(100svh - 70px);
  display:grid;grid-template-rows:auto 1fr}
.hero h1{font-size:clamp(44px,11.6vw,112px);font-weight:800;font-stretch:82%;line-height:.92;letter-spacing:-.035em;max-width:11ch}
.sub{margin-top:20px;font-size:clamp(20px,5vw,30px);font-weight:500;font-stretch:92%;line-height:1.18;letter-spacing:-.02em;color:var(--ink-2);max-width:22ch}
.hero .acts{margin-top:28px}
.hero-q{margin-top:22px;font-size:15px;color:var(--mute);max-width:34ch}
.hero-q span{color:var(--ink);font-weight:600}
.hero-face{position:relative;align-self:end;justify-self:end;margin-top:18px;width:min(78vw,560px);
  transform:translate3d(0,var(--sy,0px),0)}
.hero-face img{position:relative;width:100%;height:auto;transform:rotate(-3deg);transform-origin:50% 100%;
  filter:drop-shadow(0 30px 50px rgb(0 0 0 / .55))}
.glow{position:absolute;inset:8% -10% 0 -10%;background:radial-gradient(closest-side,rgb(198 255 0 / .34),rgb(198 255 0 / .08) 60%,transparent);
  animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}

/* ---------- sections ---------- */
.sec{position:relative;max-width:1100px;margin:0 auto;padding:clamp(88px,15vh,170px) var(--gut) 0}
.sec h2{font-size:clamp(38px,9.4vw,88px);font-weight:800;font-stretch:84%;line-height:.95;letter-spacing:-.032em;max-width:14ch}
.lede{margin-top:26px;font-size:clamp(19px,4.6vw,26px);line-height:1.42;color:var(--ink-2);max-width:38ch}
.note{margin-top:28px;font-size:16px;color:var(--mute);max-width:52ch}
.note a{text-decoration:underline;text-decoration-color:var(--lime);text-underline-offset:4px}

.lines{margin-top:38px;max-width:40ch}
.lines li{display:grid;grid-template-columns:28px 1fr;align-items:baseline;padding:20px 0;border-top:1px solid var(--line);
  font-size:clamp(21px,5.2vw,32px);font-weight:560;line-height:1.22;letter-spacing:-.02em}
.lines li:last-child{border-bottom:1px solid var(--line)}
.lines li::before{content:"";width:12px;height:12px;transform:translateY(-.12em)}
.lines.x li::before{background:var(--red);box-shadow:0 0 18px rgb(255 45 45 / .6)}
.lines.ok li::before{background:var(--lime);box-shadow:0 0 18px rgb(198 255 0 / .5)}

.pbj-end{margin-top:30px;font-size:clamp(28px,7vw,52px);font-weight:780;font-stretch:86%;line-height:1.05;letter-spacing:-.03em}

.know-list{margin-top:44px;display:grid;gap:0}
.know-list li{display:grid;grid-template-columns:56px 1fr;padding:26px 0;border-top:1px solid var(--line)}
.know-list li:last-child{border-bottom:1px solid var(--line)}
.know-list b{font-size:18px;font-weight:700;color:var(--lime);font-variant-numeric:tabular-nums;padding-top:.5em}
.big{font-size:clamp(25px,6.3vw,46px);font-weight:720;font-stretch:88%;line-height:1.1;letter-spacing:-.03em;max-width:22ch}
.cap{margin-top:10px;font-size:16px;color:var(--mute);max-width:46ch}

/* ---------- the creative wall ---------- */
.strip{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;margin:40px calc(var(--gut) * -1) 0;
  padding:26px var(--gut) 34px;scrollbar-width:none;align-items:flex-start}
.strip::-webkit-scrollbar{display:none}
.tile{flex:0 0 auto;scroll-snap-align:center;transform:rotate(var(--r,0deg))}
.tile.wide{width:min(80vw,520px)}
.tile.tall{width:min(52vw,300px)}
.tile video{width:100%;height:auto;background:#000;border:5px solid #F3F6EF;border-radius:4px;
  box-shadow:0 26px 44px rgb(0 0 0 / .55)}
.tile figcaption{margin-top:14px;font-size:15px;color:var(--mute)}
.tile.covers{width:min(80vw,460px)}
.fan{display:flex;justify-content:center;padding:6px 0 0}
.fan img{width:34%;height:auto;margin-left:-11%;border:4px solid #F3F6EF;border-radius:3px;transform:rotate(var(--r));
  box-shadow:0 18px 30px rgb(0 0 0 / .5)}
.fan img:first-child{margin-left:0}

/* ---------- voices ---------- */
.q{margin-top:52px;max-width:28ch}
.q:nth-of-type(2){margin-left:auto}
.q blockquote{font-size:clamp(25px,6vw,46px);font-weight:640;font-stretch:88%;line-height:1.12;letter-spacing:-.03em;text-indent:-.4em}
.q blockquote::before{content:"\201C";color:var(--lime)}
.q blockquote::after{content:"\201D";color:var(--lime)}
.q figcaption{margin-top:14px;font-size:16px;color:var(--mute)}

/* ---------- how ---------- */
.steps{margin-top:48px;display:grid;gap:34px}
.steps li{display:grid;grid-template-columns:auto 1fr;column-gap:20px}
.steps b{grid-row:span 2;font-size:clamp(56px,13vw,84px);font-weight:800;line-height:.8;color:var(--lime);letter-spacing:-.05em}
.steps h3{font-size:clamp(22px,5vw,28px);font-weight:720;letter-spacing:-.02em;line-height:1.15}
.steps p{margin-top:8px;font-size:18px;color:var(--ink-2)}

/* ---------- price ---------- */
.rows{margin-top:48px;display:grid;gap:clamp(40px,6vh,64px)}
.row{display:grid;gap:12px 48px}
.row .amt{margin:0;font-size:clamp(60px,16vw,128px);font-weight:800;font-stretch:82%;line-height:.86;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.row .amt small{display:block;font-size:17px;font-weight:540;letter-spacing:-.01em;color:var(--mute);margin-bottom:8px;font-stretch:100%}
.row.lead .amt{color:var(--lime);font-size:clamp(76px,22vw,176px)}
.row h3{font-size:26px;font-weight:720;letter-spacing:-.025em}
.row p{margin-top:8px;font-size:19px;color:var(--ink-2);max-width:40ch}
.row .acts{margin-top:18px}

/* ---------- about ---------- */
.about{display:grid;gap:28px;align-items:end}
.about-face{width:62%;max-width:380px;height:auto;transform:rotate(2.5deg);filter:drop-shadow(0 30px 50px rgb(0 0 0 / .5))}
.hi{font-size:clamp(52px,13vw,124px);font-weight:800;font-stretch:84%;line-height:.9;letter-spacing:-.04em}
.about p{margin-top:22px;font-size:clamp(19px,4.4vw,23px);line-height:1.5;color:var(--ink-2);max-width:44ch}
.about p a{text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------- close + footer + dock ---------- */
.close{padding-bottom:clamp(90px,16vh,160px)}
.close h2{font-size:clamp(48px,12vw,120px)}
.close .acts{margin-top:32px}
.foot{max-width:1100px;margin:0 auto;padding:56px var(--gut) 130px;border-top:1px solid var(--line);color:var(--mute);font-size:16px;
  display:grid;gap:18px}
.foot .logo{justify-self:start;margin-bottom:6px}
.foot .links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--lime)}
.foot .small{font-size:14px}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:20px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgb(4 16 10 / 0),rgb(4 16 10 / .94) 42%);transition:transform .35s var(--ease)}
.dock .btn{width:100%}
.hero-in .dock,.close-in .dock{transform:translateY(115%)}

/* ---------- wider screens ---------- */
@media (min-width:900px){
  .hero{grid-template-columns:1.1fr .9fr;grid-template-rows:1fr;align-items:center;min-height:calc(100vh - 70px)}
  .hero-copy{padding-bottom:8vh}
  .hero-face{align-self:end;width:100%;max-width:600px;margin-top:0}
  .know-list li{grid-template-columns:90px 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .row{grid-template-columns:minmax(260px,.8fr) 1.2fr;align-items:start}
  .about{grid-template-columns:.7fr 1.3fr}
  .about-face{width:100%;justify-self:end}
  .strip{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;margin:48px 0 0;padding:20px 0 0;gap:44px 34px}
  .tile.wide,.tile.tall,.tile.covers{width:auto}
  .tile.tall{grid-row:span 2}
  .dock{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .kin .w i{transform:none !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  mark.hl{background-size:100% 100% !important;color:var(--on-lime) !important}
}

/* language switch in the top bar */
.bar-r{display:flex;align-items:center;gap:16px}
.bar .lang{font-weight:750;font-size:16px;letter-spacing:.02em;color:var(--ink);text-decoration:none;padding:6px 2px;border-bottom:2px solid var(--lime)}
.bar .lang:hover{color:var(--lime)}