/* Landing page. Persuade surface. One memorable thing: the layered 3D board and review stack.
   Everything else stays flat, quiet and on a 4px grid. */
.wrap{width:min(1120px,100% - 2*var(--s5));margin-inline:auto}
.brand-logo{height:24px;display:block}
.fa-solid,.fa-regular{line-height:1}
:root{--gut:max(24px,calc((100vw - 1120px)/2));--sec:clamp(56px,7vw,96px)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:var(--s6);height:64px}
.nav-links{display:flex;gap:var(--s5);list-style:none;margin:0 0 0 var(--s4);padding:0}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:var(--t-sm);font-weight:500;transition:color var(--dur-fast) ease}
@media (hover:hover) and (pointer:fine){.nav-links a:hover{color:var(--ink)}}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.nav-actions .btn{height:40px;padding:0 var(--s4)}
.theme-btn .i-sun{display:none}
html[data-theme="light"] .theme-btn .i-sun{display:inline}
html[data-theme="light"] .theme-btn .i-moon{display:none}
.nav-toggle{display:none}
.mobile-menu{display:none;border-bottom:1px solid var(--line);background:var(--bg)}
.mobile-menu.is-open{display:block}
.mobile-menu a:not(.btn){display:block;padding:14px var(--s5);text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}
.mobile-menu .m-cta{display:flex;gap:var(--s2);padding:var(--s4) var(--s5)}
.mobile-menu .m-cta .btn{flex:1}

/* hero: copy left, board bleeds off the right edge */
@property --k{syntax:'<number>';inherits:true;initial-value:0}
@property --e{syntax:'<number>';inherits:true;initial-value:0}
@property --w{syntax:'<number>';inherits:true;initial-value:.6}
.hero{position:relative;overflow-x:clip;padding:var(--s7) 0 var(--sec)}
.hero-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);padding-left:var(--gut);gap:var(--s6);align-items:center}
.hero h1{font-size:var(--t-2xl);line-height:1.02;letter-spacing:-.035em;max-width:14ch}
.hero .lede{margin-top:var(--s5);max-width:38ch;font-size:var(--t-md);color:var(--ink-soft)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero-stage{position:relative;min-height:440px;display:flex;align-items:center}
.floor{position:absolute;left:-6%;right:-30%;bottom:-8px;height:300px;transform:perspective(640px) rotateX(64deg) translateY(calc(var(--k) * -18px));transform-origin:50% 100%;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 45% 55%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 45% 55%,#000 25%,transparent 72%);pointer-events:none}
.stage{position:relative;perspective:1500px;--rx:0deg;--ry:0deg;width:min(640px,100%)}

.board{margin:0;transform-style:preserve-3d;background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--shadow-pop);
  transform:rotateX(calc((1 - var(--k)) * 9deg + var(--rx))) rotateY(calc((1 - var(--k)) * -17deg + var(--ry)));
  transition:transform 260ms var(--ease-out);will-change:transform}
.board-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s1) var(--s2) var(--s4)}
.board-top strong{font:650 var(--t-md)/1.2 var(--font-display);letter-spacing:-.02em}
.board-top span{font-size:var(--t-xs);color:var(--ink-faint)}
.board-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);transform-style:preserve-3d;margin-top:calc(14px * (1 - var(--k)))}
.col h4{display:flex;align-items:center;gap:6px;font:600 var(--t-xs)/1 var(--font-body);letter-spacing:0;color:var(--ink-soft);margin:0 0 var(--s2);padding:2px 2px 0}
.col h4 i{width:7px;height:7px;border-radius:50%}
.col-todo h4 i{background:var(--todo)}.col-doing h4 i{background:var(--doing)}.col-done h4 i{background:var(--done)}
.plane{transform-style:preserve-3d;background:var(--surface-2);border-radius:var(--r-md);padding:var(--s2);
  transform:translate3d(0,calc((1 - var(--k)) * var(--y)),calc((1 - var(--k)) * var(--z))) rotate(calc((1 - var(--k)) * var(--r)));
  box-shadow:0 calc(8px + (1 - var(--k)) * 14px) calc(14px + (1 - var(--k)) * 22px) -10px rgba(0,0,0,.5)}
.card{background:var(--surface-3);border-radius:var(--r-sm);padding:10px 10px 9px;margin-bottom:6px;font-size:var(--t-sm);line-height:1.35}
.card:last-child{margin-bottom:0}
.card small{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:var(--t-xs);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.av{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font:700 9px/1 var(--font-body);color:#101312}
.board-progress{margin-top:var(--s3);padding:var(--s3) var(--s2) var(--s1);border-top:1px solid var(--line);display:flex;align-items:center;gap:var(--s3)}
.bar{flex:1;height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;width:33%;background:var(--done);border-radius:inherit}
.board-progress p{font-size:var(--t-xs);color:var(--ink-faint);font-variant-numeric:tabular-nums;white-space:nowrap}

/* shared section rhythm */
.block{padding:var(--sec) 0}
.block.band{background:var(--surface-1);border-block:1px solid var(--line)}
.sec-head{max-width:34rem;margin-bottom:var(--s7)}
.sec-head h2{font-size:var(--t-xl)}
.sec-head p{margin-top:var(--s3);color:var(--ink-soft);max-width:44ch}

/* why: chat pile vs board plate */
.why{animation-timeline:view();animation-range:entry 0% cover 45%}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7)}
.why-visual{height:280px;perspective:1000px;position:relative;margin-bottom:var(--s5)}
.pile,.plate{position:absolute;inset:0;transform-style:preserve-3d}
.pile{transform:rotateX(14deg) rotateY(10deg)}
.bubble{position:absolute;max-width:62%;padding:10px 14px;border-radius:var(--r-md) var(--r-md) var(--r-md) 4px;background:var(--surface-3);color:var(--ink-soft);font-size:var(--t-sm);line-height:1.35;box-shadow:0 14px 24px -14px rgba(0,0,0,.55);
  transform:translate3d(calc(var(--w) * var(--dx)),calc(var(--w) * var(--dy)),calc(var(--w) * var(--dz))) rotate(calc(var(--w) * var(--dr)))}
.bubble:nth-child(even){border-radius:var(--r-md) var(--r-md) 4px var(--r-md)}
.plate{transform:rotateX(14deg) rotateY(-10deg);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:var(--s3);box-shadow:var(--shadow-pop);display:grid;align-content:start;gap:var(--s2)}
.row{display:flex;align-items:center;gap:var(--s3);background:var(--surface-3);border-radius:var(--r-sm);padding:10px 12px;font-size:var(--t-sm)}
.row i.s{width:8px;height:8px;border-radius:50%;flex:none}
.row span.t{flex:1}
.row small{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.why-copy h3{font-size:var(--t-lg);margin-bottom:var(--s2)}
.why-copy p{color:var(--ink-soft);max-width:38ch}
.why-grid>div:first-child h3{color:var(--ink-soft)}

/* features: list left, exploded review stack right */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s8);align-items:start}
.feat-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)}
.feat-list h3{font-size:var(--t-md);letter-spacing:-.02em;margin-bottom:4px}
.feat-list p{color:var(--ink-soft);max-width:44ch;font-size:var(--t-base)}
.feat{animation-timeline:view();animation-range:entry 10% cover 40%}
.review{position:sticky;top:96px;height:470px;perspective:1400px}
.layers{position:absolute;inset:0;transform-style:preserve-3d;--rx:0deg;--ry:0deg;
  transform:rotateX(calc(52deg - var(--e) * 40deg + var(--rx))) rotateZ(calc(-24deg + var(--e) * 24deg)) rotateY(var(--ry));transition:transform 260ms var(--ease-out)}
.layer{position:absolute;left:6%;right:6%;border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line-strong);padding:var(--s4);box-shadow:var(--shadow-pop)}
.layer h4{font:650 var(--t-md)/1.2 var(--font-display);letter-spacing:-.02em;margin-bottom:var(--s3)}
.l-board{top:2%;height:150px;transform:translateZ(calc(var(--e) * 0px))}
.l-task{top:30%;height:176px;transform:translateZ(calc(var(--e) * 70px));background:var(--surface-1)}
.l-review{top:60%;height:176px;transform:translateZ(calc(var(--e) * 140px));background:var(--surface-3)}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.mini i{display:grid;gap:2px;height:56px;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-3);font:650 var(--t-lg)/1 var(--font-display);font-style:normal;align-content:center}
.mini b{font:500 var(--t-xs)/1.2 var(--font-body);color:var(--ink-soft)}
.plate-foot{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);font-size:var(--t-sm);color:var(--ink-soft)}
.plate-foot .bar{flex:1;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.plate-foot .bar span{display:block;width:25%;height:100%;background:var(--done)}
.meta{display:flex;gap:var(--s3);flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:var(--s3)}
.file{display:inline-flex;align-items:center;gap:var(--s2);padding:8px 12px;border-radius:var(--r-sm);background:var(--surface-3);font-size:var(--t-sm)}
.file small{color:var(--ink-faint);font-variant-numeric:tabular-nums}
.remark{padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:var(--s3)}
.decide{display:flex;gap:var(--s2)}
.decide span{display:inline-flex;align-items:center;height:36px;padding:0 var(--s4);border-radius:var(--r-sm);font:600 var(--t-sm)/1 var(--font-body)}
.decide .ok{background:var(--accent);color:var(--accent-ink)}
.decide .back{border:1px solid var(--line-strong);color:var(--ink)}

/* roles + stack */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);perspective:1200px}
.role{padding:var(--s6);background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--r-lg);transition:transform 300ms var(--ease-out)}
.role:first-child{transform:rotateY(5deg)}.role:last-child{transform:rotateY(-5deg);border-radius:var(--r-md)}
@media (hover:hover) and (pointer:fine){.roles:hover .role{transform:none}}
.role h3{font-size:var(--t-lg)}
.role p{margin-top:var(--s2);color:var(--ink-soft)}
.role ul{margin:var(--s4) 0 0;padding:0;list-style:none;display:grid;gap:var(--s2)}
.role li{padding-left:var(--s4);position:relative}
.role li::before{content:'';position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--accent)}
.stack{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{padding:6px 12px;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:var(--t-sm);color:var(--ink-soft)}

/* faq: heading left, accordion right */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s8);align-items:start}
.faq-wrap .sec-head{margin:0;position:sticky;top:96px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s4) 0;background:none;border:0;color:var(--ink);font:600 var(--t-md)/1.35 var(--font-body);text-align:left;cursor:pointer}
.faq-q i{flex:none;font-size:13px;color:var(--ink-faint);transition:transform var(--dur) var(--ease-out)}
.faq-q[aria-expanded="true"] i{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease-out)}
.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 0 var(--s4);color:var(--ink-soft);max-width:56ch}

/* closing block */
.cta{padding:0 0 var(--sec)}
.cta-panel{background:var(--accent);color:var(--accent-ink);border-radius:var(--r-lg);padding:clamp(32px,5vw,64px);display:flex;align-items:center;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}
.cta-panel h2{font-size:var(--t-xl);max-width:16ch;color:inherit}
.btn-dark{background:#151A18;color:#F1F4F2;height:52px;padding:0 28px;font-size:var(--t-md)}
@media (hover:hover) and (pointer:fine){.btn-dark:hover{background:#000}}
footer{border-top:1px solid var(--line);padding:var(--s6) 0;font-size:var(--t-sm);color:var(--ink-faint)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3)}
footer a{color:var(--ink-soft);text-decoration:none}
footer .links{display:flex;gap:var(--s5)}
@media (hover:hover) and (pointer:fine){footer a:hover{color:var(--ink)}}

/* motion: hero entrance once; scroll-driven depth only where supported */
.rise{opacity:0;transform:translateY(12px);animation:rise .6s var(--ease-out) forwards}
.rise-2{animation-delay:70ms}.rise-3{animation-delay:140ms}.rise-4{animation-delay:210ms}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes assemble{from{--k:0}to{--k:1}}
@keyframes explode{from{--e:0}to{--e:1}}
@keyframes scatter{from{--w:0}to{--w:1}}
@supports (animation-timeline:scroll()){
  .hero-stage{animation:assemble linear both;animation-timeline:scroll(root block);animation-range:0px 260px}
  .why{animation-name:scatter;animation-timing-function:linear;animation-fill-mode:both}
  .feat{animation-name:explode;animation-timing-function:linear;animation-fill-mode:both}
}
@media (prefers-reduced-motion:reduce){
  .hero-stage,.why,.feat{animation:none !important;--k:1;--w:.6;--e:1}
  .board,.layers{transition:none}.rise{opacity:1;transform:none}
}

@media (max-width:1000px){
  .nav-links,.nav-actions .btn{display:none}
  .nav-toggle{display:grid}
  .hero{padding:var(--s6) 0 var(--sec)}
  .hero-grid{grid-template-columns:1fr;padding:0 var(--s5);gap:var(--s6)}
  .hero h1{max-width:none}
  .hero-stage{min-height:0;animation:none !important;--k:1}
  .floor{display:none}
  .why-grid,.roles,.feat,.faq-wrap{grid-template-columns:1fr;gap:var(--s6)}
  .why{animation:none !important;--w:.6}
  .feat{animation:none !important;--e:1}
  .review{position:static;height:auto;perspective:none;display:grid;gap:var(--s3)}
  .layers{position:static;transform:none !important;display:grid;gap:var(--s3)}
  .layer{position:static;height:auto !important;transform:none !important}
  .l-board{display:none}
  .role:first-child,.role:last-child{transform:none}
  .faq-wrap .sec-head{position:static}
}
@media (max-width:520px){
  .board-cols{grid-template-columns:1fr}
  .col .card:nth-child(n+3){display:none}
  .why-visual{height:260px}
}