/* www.sneeze.it homepage, v2 local mockup (2026-11-07). Agency studio, not SaaS template. */
:root{
  --p0:oklch(98.6% .005 350); --p1:oklch(95.6% .011 350); --p2:oklch(91.5% .016 350);
  --i0:oklch(22.5% .012 350); --i1:oklch(40% .014 350); --i2:oklch(56% .012 350);
  --ln:oklch(87.5% .012 350);
  --m:oklch(63.5% .235 356); --m-d:oklch(47% .19 356); --m-w:oklch(94% .035 356);
  --hand:"Caveat",cursive;
  --ease:cubic-bezier(.16,1,.3,1);
}
body{background:var(--p0);color:var(--i0)}
.h-wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(20px,3.4vw,48px)}
.hand{font:600 clamp(21px,1.7vw,26px)/1.05 var(--hand);color:var(--m-d)}
.h-btn{display:inline-flex;align-items:center;gap:10px;background:var(--m);color:oklch(99% .005 350);font:800 16px/1 var(--display);text-decoration:none;padding:17px 26px;border-radius:999px;transition:background .25s var(--ease),transform .25s var(--ease)}
.h-btn:hover{background:var(--m-d);transform:translateY(-2px)}
.h-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.h-btn:hover svg{transform:translateX(4px)}
.h-link{font:800 16px/1 var(--display);color:var(--i0);text-decoration:none;border-bottom:2px solid var(--m);padding-bottom:4px}
.h-link:hover{color:var(--m-d)}
.smp{font:600 12px/1 var(--display);color:var(--i2);letter-spacing:.01em}

/* ---------- Hero ---------- */
.hero2{position:relative;padding:clamp(28px,4vh,52px) 0 0;overflow:hidden}
.hero2 > .h-wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:center;min-height:680px}
.hero2 h1{margin:0;font:900 clamp(46px,6.1vw,96px)/.9 var(--display);letter-spacing:-.055em}
.hero2 h1 span{display:block}
.hero2 h1 .two{color:var(--m)}
.hero2 .lede{margin:28px 0 0;max-width:44ch;font:500 clamp(17px,1.35vw,20px)/1.5 var(--display);color:var(--i1)}
.hero2 .act{display:flex;align-items:center;gap:28px;margin-top:34px;flex-wrap:wrap}
.hero2 .who{margin-top:38px;font:600 14.5px/1.5 var(--display);color:var(--i2);max-width:52ch}
.hero2 .who b{color:var(--i0);font-weight:800}

.wall{position:relative;height:620px}
.wall figure{position:absolute;margin:0;border-radius:6px;overflow:hidden;box-shadow:0 1px 0 var(--ln),0 24px 48px -28px oklch(22% .02 350 / .55);opacity:0;animation:drop .9s var(--ease) forwards}
.wall img{display:block;width:100%;height:100%;object-fit:cover}
.wall .a1{width:42%;aspect-ratio:4/5;left:0;top:9%;transform:rotate(-4deg);animation-delay:.05s;--r:-4deg}
.wall .a2{width:40%;aspect-ratio:1/1;right:2%;top:2%;transform:rotate(3deg);animation-delay:.18s;--r:3deg}
.wall .a3{width:31%;aspect-ratio:9/16;left:30%;top:33%;transform:rotate(-1deg);animation-delay:.31s;z-index:2;--r:-1deg}
.wall .a4{width:36%;aspect-ratio:4/5;right:0;bottom:0;transform:rotate(4deg);animation-delay:.44s;--r:4deg}
@keyframes drop{from{opacity:0;transform:translateY(26px) rotate(0)}to{opacity:1;transform:translateY(0) rotate(var(--r))}}
.chip{position:absolute;z-index:5;background:var(--p0);border-radius:16px;padding:11px 14px;font:700 14px/1.3 var(--display);box-shadow:0 16px 32px -18px oklch(22% .02 350 / .5);opacity:0;animation:pop .7s var(--ease) forwards}
.chip.txt{left:-6%;bottom:16%;max-width:220px;animation-delay:.8s}
.chip.txt .them{display:block;margin-top:8px;margin-left:auto;width:fit-content;background:var(--m);color:var(--p0);padding:8px 12px;border-radius:14px 14px 4px 14px}
.chip.txt small{display:block;font:600 12px/1.2 var(--display);color:var(--i2);margin-bottom:6px}
.chip.ok{right:4%;top:47%;background:var(--i0);color:var(--p0);animation-delay:1.05s;display:flex;gap:9px;align-items:center}
.chip.ok i{width:20px;height:20px;border-radius:50%;background:var(--m);display:grid;place-items:center;font-style:normal;font-size:12px}
.chip.ok2{left:22%;bottom:-2%;animation-delay:1.25s;display:flex;gap:9px;align-items:center}
.chip.ok2 i{width:20px;height:20px;border-radius:50%;background:oklch(55% .13 150);color:var(--p0);display:grid;place-items:center;font-style:normal;font-size:12px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.wall .note{position:absolute;z-index:6;left:12%;top:-6%;transform:rotate(-4deg);display:flex;align-items:flex-end;gap:6px}
.wall .note svg{display:block;margin-bottom:-26px}

/* ---------- Live sentence band ---------- */
.live{background:var(--m);color:oklch(99% .006 350);margin-top:clamp(40px,6vw,72px);padding:clamp(52px,7vw,96px) 0}
.live p{margin:0;font:700 clamp(30px,3.9vw,58px)/1.08 var(--display);letter-spacing:-.035em;max-width:24ch}
.live b{font-weight:900;color:var(--i0)}
.live .src{margin-top:26px;font:600 14px/1.4 var(--display);color:oklch(96% .03 356);letter-spacing:0;max-width:none;display:flex;gap:10px;align-items:center}
.live .dot{width:9px;height:9px;border-radius:50%;background:oklch(99% .006 350);animation:blink 2s infinite}
@keyframes blink{50%{opacity:.25}}

/* ---------- Sections ---------- */
.sec2{padding-top:clamp(84px,10vw,150px)}
.sec2 h2{margin:0;font:900 clamp(36px,4.6vw,70px)/.95 var(--display);letter-spacing:-.05em;max-width:16ch}
.sec2 .intro{margin:20px 0 0;max-width:52ch;font:500 19px/1.55 var(--display);color:var(--i1)}
.split{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}

/* Path storyboard */
.ends2{display:inline-flex;border:1.5px solid var(--i0);border-radius:999px;padding:3px}
.ends2 button{border:0;background:none;font:800 15px/1 var(--display);color:var(--i0);padding:11px 18px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.ends2 button[aria-pressed="true"]{background:var(--i0);color:var(--p0)}
.board{display:grid;grid-template-columns:1fr 54px 1fr 1fr 1fr;margin-top:48px;border-top:1.5px solid var(--i0)}
.frame{padding:22px 22px 0 0}
.frame + .frame{padding-left:22px;border-left:1px solid var(--ln)}
.frame .n{font:900 15px/1 var(--display);color:var(--m)}
.frame h3{margin:10px 0 18px;font:800 21px/1.15 var(--display);letter-spacing:-.02em;min-height:2.3em}
.cut{position:relative;border-left:2px dashed var(--m);margin-left:26px}
.cut .hand{position:absolute;top:56%;left:-8px;transform:translateX(-50%) rotate(-90deg);white-space:nowrap}
.cut svg{position:absolute;top:18px;left:-12px;width:22px;height:22px;color:var(--m)}
.vis{height:230px}
.vis img{width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:4px;display:block}
.sad{height:100%;border-radius:4px;background:var(--i0);color:var(--p0);padding:18px;display:flex;flex-direction:column;justify-content:space-between}
.sad b{font:900 30px/1 var(--display);letter-spacing:-.03em}
.sad span{font:600 13px/1.3 var(--display);opacity:.75}
.sad em{font-style:normal;align-self:flex-start;background:var(--m);padding:8px 12px;border-radius:999px;font:800 13px/1 var(--display)}
.thread{display:flex;flex-direction:column;gap:8px;font:600 14px/1.35 var(--display)}
.thread .us{background:var(--p1);padding:10px 13px;border-radius:15px 15px 15px 4px;max-width:90%}
.thread .them{align-self:flex-end;background:var(--m);color:var(--p0);padding:10px 13px;border-radius:15px 15px 4px 15px}
.thread .done{margin-top:6px;font:800 14px/1 var(--display);color:oklch(48% .12 150)}
.form{border:1.5px solid var(--i0);border-radius:6px;padding:4px 14px 14px;font:600 14px/1 var(--display)}
.form div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--ln)}
.form div b{font-weight:800}
.form .go{margin-top:12px;display:block;text-align:center;background:var(--m);color:var(--p0);padding:12px;border-radius:999px;font-weight:800}
.form .t{margin-top:10px;display:block;text-align:center;color:var(--i2);font-size:12.5px}
.ledger{font:600 14px/1 var(--display)}
.ledger div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--ln)}
.ledger span{color:var(--i2)}
.ledger b{font-weight:800}
.ledger .w{margin-top:14px;color:oklch(48% .12 150);font-weight:800}
.board-foot{margin-top:18px}

/* Leaks: index list */
.leaks2{margin-top:52px;border-top:1.5px solid var(--i0)}
.lk{display:grid;grid-template-columns:90px minmax(0,1.15fr) minmax(0,1.2fr) 210px;gap:28px;padding:32px 0;border-bottom:1px solid var(--ln);align-items:start;transition:background .3s var(--ease)}
.lk:hover{background:var(--p1)}
.lk .n{font:900 56px/.85 var(--display);letter-spacing:-.05em;color:oklch(84% .02 350);transition:color .3s}
.lk:hover .n{color:var(--m)}
.lk h3{margin:0;font:900 30px/1.02 var(--display);letter-spacing:-.035em}
.lk .q{margin:12px 0 0}
.lk p{margin:0;font:500 16.5px/1.55 var(--display);color:var(--i1)}
.lk .st b{display:block;font:900 40px/1 var(--display);letter-spacing:-.04em;color:var(--m)}
.lk .st span{display:block;margin-top:6px;font:600 13.5px/1.4 var(--display);color:var(--i2)}
.new2{display:inline-block;vertical-align:6px;margin-left:8px;font:800 11px/1 var(--display);background:var(--i0);color:var(--p0);padding:5px 8px;border-radius:999px;letter-spacing:.02em}

/* Proof with data */
.cases2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,72px);margin-top:56px;align-items:start}
.cs .k{font:700 14px/1.4 var(--display);color:var(--i2)}
.cs h3{margin:12px 0 0;font:900 clamp(30px,3vw,44px)/1.02 var(--display);letter-spacing:-.04em}
.cs h3 em{font-style:normal;color:var(--m)}
.cs p{margin:16px 0 0;font:500 16.5px/1.55 var(--display);color:var(--i1);max-width:52ch}
.bars{margin-top:30px;display:grid;gap:18px}
.bar .l{display:flex;justify-content:space-between;font:700 14px/1 var(--display);margin-bottom:8px}
.bar .l span{color:var(--i2)}
.bar .t{height:44px;background:var(--p1);border-radius:3px;display:flex;overflow:hidden}
.bar .t i{display:block;height:100%;width:0;transition:width 1.4s var(--ease)}
.bar .on{background:var(--m)}
.bar .sys{background:var(--p2)}
.bar .desk{background:var(--i0)}
.legend{display:flex;gap:18px;margin-top:12px;font:600 13px/1 var(--display);color:var(--i2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.dots{display:grid;grid-template-columns:repeat(25,1fr);gap:4px;margin-top:30px}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--p2);transition:background .4s}
.dots i.on{background:var(--m)}
.src2{margin-top:14px;font:600 13px/1.4 var(--display);color:var(--i2)}

/* Work wall */
.work{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:62px;gap:14px;margin-top:52px}
.work figure{margin:0;overflow:hidden;border-radius:4px;background:var(--p1)}
.work img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.work figure:hover img{transform:scale(1.035)}
.w1{grid-column:1/5;grid-row:1/9}
.w5{grid-column:1/5;grid-row:9/16}
.w2{grid-column:5/9;grid-row:1/7}
.w4{grid-column:5/9;grid-row:7/12}
.w7{grid-column:5/9;grid-row:12/16;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;border:1.5px dashed var(--m);border-radius:4px}
.w7 .hand{font-size:clamp(26px,2.4vw,36px);transform:rotate(-3deg)}
.w3{grid-column:9/13;grid-row:1/9}
.w6{grid-column:9/13;grid-row:9/16}
.hero-cap{max-width:1320px;margin:12px auto 0;padding-inline:clamp(20px,3.4vw,48px)}
.workcap{display:flex;justify-content:space-between;gap:24px;margin-top:18px;flex-wrap:wrap}

/* Principles */
.vows2{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(28px,5vw,96px);border-top:1.5px solid var(--i0);padding-top:40px}
.vows2 ol{list-style:none;margin:0;padding:0;counter-reset:v}
.vows2 li{counter-increment:v;display:grid;grid-template-columns:54px 1fr;padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--ln);font:800 clamp(24px,2.4vw,34px)/1.12 var(--display);letter-spacing:-.03em}
.vows2 li:last-child{border:0}
.vows2 li::before{content:"0" counter(v);font:900 15px/2.2 var(--display);color:var(--m);letter-spacing:0}
.vows2 li small{display:block;grid-column:2;margin-top:8px;font:500 16px/1.5 var(--display);color:var(--i1);letter-spacing:0}

/* Who + software marquee */
.wholine{font:800 clamp(28px,3.4vw,52px)/1.12 var(--display);letter-spacing:-.04em;max-width:30ch;margin:0}
.wholine span{color:var(--i2)}
.wholine span.s{color:var(--m)}
.mq{margin-top:56px;border-block:1px solid var(--ln);padding:20px 0;display:flex;gap:28px;align-items:center}
.mq .vp{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq .lab{flex:none;font:700 14px/1.35 var(--display);color:var(--i2);max-width:220px;padding-left:clamp(20px,3.4vw,48px)}
.mq .track{width:max-content;display:flex;gap:44px;white-space:nowrap;animation:slide 48s linear infinite;font:800 24px/1 var(--display);color:var(--i1);letter-spacing:-.02em}
@keyframes slide{to{transform:translateX(-50%)}}

/* Close */
.close2{margin-top:clamp(84px,10vw,150px);background:var(--i0);color:var(--p0);padding:clamp(70px,9vw,130px) 0}
.close2 .h-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:end}
.close2 h2{margin:0;font:900 clamp(44px,6vw,96px)/.9 var(--display);letter-spacing:-.055em}
.close2 h2 span{color:var(--m)}
.close2 p{margin:0 0 26px;font:500 19px/1.55 var(--display);color:oklch(85% .01 350)}
.close2 .hand{color:oklch(80% .12 356);display:block;margin-top:18px}

/* Reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .wall figure,.chip{animation:none;opacity:1}
  .rv{opacity:1;transform:none;transition:none}
  .mq .track{animation:none}
  .bar .t i{transition:none}
}

@media (max-width:1020px){
  .hero2 > .h-wrap,.cases2,.vows2,.close2 .h-wrap{grid-template-columns:1fr}
  .wall{height:520px}
  .board{grid-template-columns:1fr 1fr}
  .cut{display:none}
  .frame + .frame{border-left:0;padding-left:0}
  .frame{padding-right:16px}
  .lk{grid-template-columns:60px 1fr;gap:14px 20px}
  .lk > p,.lk .st{grid-column:2}
  .work{grid-auto-rows:44px}
}
@media (max-width:640px){
  .board{grid-template-columns:1fr}
  .wall{height:440px;min-height:0}
  .chip.txt{left:0}
  .work{grid-template-columns:1fr 1fr}
  .work figure,.work .w7{grid-column:auto!important;grid-row:span 5!important}
}

.work2{columns:4 260px;column-gap:16px;margin-top:52px}
.work2 figure{break-inside:avoid;margin:0 0 22px}
.work2 img{display:block;width:100%;border-radius:4px;transition:transform .8s var(--ease)}
.work2 figure:hover img{transform:translateY(-4px)}
.work2 figcaption{margin-top:9px;font:600 13.5px/1.3 var(--display);color:var(--i2)}
.work2 figcaption b{color:var(--i0);font-weight:800;margin-right:4px}

/* r2: rotating proof band */
.rot-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3.5vw,44px)}
.rot-tabs button{position:relative;overflow:hidden;border:1.5px solid oklch(96% .03 356 / .55);background:none;color:oklch(99% .006 350);font:700 14px/1 var(--display);padding:11px 18px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.rot-tabs button:hover{border-color:oklch(99% .006 350)}
.rot-tabs button[aria-pressed=true]{background:oklch(99% .006 350);color:var(--i0);border-color:oklch(99% .006 350)}
.rot-tabs button span{position:relative;z-index:1}
.rot-tabs button i{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--m);transform:scaleX(0);transform-origin:left}
.rot-tabs button.run i{animation:fill 6s linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.rot{display:grid}
.rot .slide{grid-area:1/1;opacity:0;transform:translateY(14px);visibility:hidden;transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),visibility 0s .6s}
.rot .slide.on{opacity:1;transform:none;visibility:visible;transition-delay:0s}
@media (prefers-reduced-motion: reduce){.rot .slide{transition:none}}