/* ===== extra sections + details: flat, royal blue only ===== */

/* ---------- bento grid ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bx{position:relative;overflow:hidden;background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:24px;min-height:250px;display:flex;flex-direction:column;transition:border-color .2s,transform .25s,background .4s}
.bx.w2{grid-column:span 2}
.bx::before{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;background:var(--blue);opacity:0;transition:opacity .3s;z-index:0;pointer-events:none}
.bx:hover{border-color:var(--accent);transform:translateY(-4px)}
.bx:hover::before{opacity:.08}
.bx>*{position:relative;z-index:1}
.bx .num{font:700 .72rem var(--mono);color:var(--accent);letter-spacing:.06em}
.bx-art{flex:1;display:grid;place-items:center;min-height:100px;margin:6px 0 14px}
.bx-art svg{width:100%;max-width:220px;height:100px;overflow:visible}
.bx h3{font-size:1.05rem;margin-bottom:6px}
.bx p{margin:0;color:var(--muted);font-size:.85rem}
.bx svg *{transform-box:fill-box;transform-origin:center}
.ln{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fl{fill:var(--accent)}
.fs{fill:var(--soft);stroke:var(--accent);stroke-width:2.2}

/* art 1: loading bars finish quickly */
.sp-bar{transform-origin:left center!important;animation:barrun 2.6s cubic-bezier(.2,.8,.2,1) infinite var(--dl,0s)}
@keyframes barrun{0%{transform:scaleX(0)}45%,85%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:.2}}
.bolt{animation:flick 2.6s steps(1) infinite}
@keyframes flick{0%,44%{opacity:.25}45%,100%{opacity:1}}
/* art 2: lock opens and closes */
.shackle{animation:lock 3.4s ease-in-out infinite}
@keyframes lock{0%,35%{transform:translateY(0)}50%,85%{transform:translateY(-9px)}100%{transform:translateY(0)}}
.keyhole{animation:flick2 3.4s ease-in-out infinite}
@keyframes flick2{0%,35%,100%{opacity:1}50%,85%{opacity:.2}}
/* art 3: rings pulse around a person */
.ring{fill:none;stroke:var(--accent);stroke-width:2;animation:ringp 3s ease-out infinite var(--dl,0s);opacity:0}
@keyframes ringp{0%{transform:scale(.5);opacity:.8}100%{transform:scale(2.1);opacity:0}}
/* art 4: braces with a blinking caret */
.brace{font:800 54px var(--mono);fill:var(--accent)}
.caret-svg{animation:blink 1s steps(1) infinite}
/* art 5: devices resize */
.dev-a{animation:devA 5s ease-in-out infinite}
.dev-b{animation:devB 5s ease-in-out infinite}
.dev-c{animation:devC 5s ease-in-out infinite}
@keyframes devA{0%,100%{transform:scale(1)}50%{transform:scale(.94)}}
@keyframes devB{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes devC{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-4deg)}}
/* art 6: chat bubbles */
.bub{transform-origin:left bottom!important;animation:bub 5s ease-in-out infinite var(--dl,0s);opacity:0}
.bub.r{transform-origin:right bottom!important}
@keyframes bub{0%{transform:scale(0);opacity:0}12%,80%{transform:scale(1);opacity:1}95%,100%{transform:scale(1);opacity:0}}
.dotp{animation:dotp 1s ease-in-out infinite var(--dl,0s)}
@keyframes dotp{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- pick your path ---------- */
.path{display:grid;grid-template-columns:270px 1fr;gap:26px;align-items:start}
.tabs{display:grid;gap:10px}
.tab{display:flex;align-items:center;gap:12px;text-align:left;font:600 .88rem var(--mono);color:var(--ink);background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.tab svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab:hover{border-color:var(--accent);transform:translateX(4px)}
.tab[aria-selected="true"]{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateX(8px)}
.tab:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.pp{background:var(--panel);border:2px solid var(--accent);border-radius:14px;box-shadow:10px 10px 0 var(--shadow);overflow:hidden}
.pp[hidden]{display:none}
.pp-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--soft);border-bottom:2px solid var(--line);font:600 .76rem var(--mono);color:var(--muted)}
.pp-bar i{width:10px;height:10px;border-radius:50%;background:var(--accent);opacity:.5}
.pp-bar span{margin-left:8px}
.pp-body{padding:26px 28px 30px;animation:ppin .45s ease}
@keyframes ppin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pp-body h3{font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:10px}
.pp-body>p{margin:0 0 18px;color:var(--muted)}
.plan{list-style:none;margin:0 0 22px;padding:0;counter-reset:pl}
.plan li{counter-increment:pl;display:flex;gap:14px;padding:12px 0;border-top:2px dashed var(--line);font-size:.9rem}
.plan li::before{content:"0" counter(pl);font:700 .8rem var(--mono);color:var(--accent);padding-top:2px}
.plan li b{display:block;font-family:var(--mono);font-size:.92rem}
.plan li span{color:var(--muted);font-size:.85rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.tags span{font:600 .74rem var(--mono);color:var(--accent);background:var(--soft);padding:4px 10px;border-radius:999px}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:2px solid var(--line);transition:background .25s}
.faq details:first-of-type{border-top:2px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 6px;font:700 1rem var(--mono);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"?";display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:6px;background:var(--soft);color:var(--accent);font-size:.9rem}
.faq summary span{flex:1}
.faq summary::after{content:"+";flex:none;font:600 1.5rem var(--mono);color:var(--accent);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.faq details[open]{background:color-mix(in srgb,var(--blue) 5%,transparent)}
.faq details p{margin:0;padding:0 6px 22px 50px;color:var(--muted);animation:ppin .4s ease}

/* ---------- command menu ---------- */
.pal{position:fixed;inset:0;z-index:200;background:rgba(6,11,31,.6);display:flex;justify-content:center;align-items:flex-start;padding-top:13vh}
.pal[hidden]{display:none}
.pal-box{width:min(560px,92%);background:var(--panel-solid);border:2px solid var(--accent);border-radius:14px;box-shadow:10px 10px 0 var(--shadow);overflow:hidden;animation:ppin .25s ease}
.pal-in{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:2px solid var(--line);font:700 1rem var(--mono);color:var(--accent)}
.pal-in input{flex:1;border:0;background:transparent;padding:0;font:500 .95rem var(--mono);color:var(--ink);min-width:0;box-shadow:none}
.pal-in input:focus{box-shadow:none;border:0}
#pal-list{list-style:none;margin:0;padding:8px;max-height:46vh;overflow:auto}
#pal-list button{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;font:600 .88rem var(--mono);color:var(--ink);background:transparent;border:0;border-radius:8px;padding:11px 12px;cursor:pointer}
#pal-list button small{font:500 .72rem var(--mono);color:var(--muted)}
#pal-list button.on,#pal-list button:hover{background:var(--blue);color:#fff}
#pal-list button.on small,#pal-list button:hover small{color:#dbe4ff}
#pal-list li[hidden]{display:none}
.pal-foot{margin:0;padding:10px 18px;border-top:2px solid var(--line);font:500 .72rem var(--mono);color:var(--muted)}
.pal-none{padding:18px;font:500 .85rem var(--mono);color:var(--muted)}
.hint-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px;font:500 .78rem var(--mono);color:var(--muted)}
.kbd{font:700 .72rem var(--mono);padding:2px 7px;border:2px solid var(--line);border-bottom-width:4px;border-radius:6px;color:var(--accent);background:var(--panel)}
.hint-row button{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- back to top with progress ring ---------- */
.totop{position:fixed;right:18px;bottom:18px;z-index:60;width:48px;height:48px;border-radius:50%;border:0;padding:0;background:var(--panel-solid);cursor:pointer;display:grid;place-items:center;opacity:0;translate:0 14px;pointer-events:none;transition:opacity .3s,translate .3s,background .2s}
.totop.show{opacity:1;translate:0 0;pointer-events:auto}
.totop svg{position:absolute;inset:0;width:48px;height:48px;transform:rotate(-90deg)}
.totop .tr{fill:none;stroke:var(--line);stroke-width:3}
.totop .tp{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:125.7;stroke-dashoffset:125.7}
.totop .ar{position:static;width:18px;height:18px;transform:none;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.totop:hover{background:var(--blue)}
.totop:hover .ar{stroke:#fff;transform:translateY(-3px)}
.totop:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- trailing cursor (mouse only) ---------- */
.cur-ring,.cur-dot{position:fixed;left:0;top:0;z-index:300;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:2px solid var(--accent);transition:opacity .3s,width .25s,height .25s,margin .25s,background .25s}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent)}
.has-cur .cur-ring,.has-cur .cur-dot{opacity:1}
.cur-ring.big{width:58px;height:58px;margin:-29px 0 0 -29px;background:color-mix(in srgb,var(--blue) 14%,transparent)}
.cur-ring.down{width:24px;height:24px;margin:-12px 0 0 -12px}
@media (hover:none),(pointer:coarse){.cur-ring,.cur-dot{display:none}}

/* cards and tiles keep their hover transitions after they reveal */
.js .card.reveal{transition:opacity .7s ease var(--d,0s),translate .7s ease var(--d,0s),transform .18s ease-out,border-color .2s,box-shadow .2s,background .4s}
.js .bx.reveal{transition:opacity .7s ease var(--d,0s),translate .7s ease var(--d,0s),transform .25s,border-color .2s,background .4s}

/* terminal input matches the terminal text */
.term-input{font:500 .9rem var(--mono)}

/* magnetic buttons settle back smoothly */
.mag{transition:transform .25s ease-out}

/* ---------- responsive ---------- */
@media (max-width:980px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
  .path{grid-template-columns:1fr}
  .tabs{grid-template-columns:repeat(3,1fr)}
  .tab{flex-direction:column;text-align:center;padding:12px 8px;font-size:.78rem;gap:6px}
  .tab:hover,.tab[aria-selected="true"]{transform:none}
}
@media (max-width:560px){
  .bento{grid-template-columns:1fr}
  .bx.w2{grid-column:auto}
  .bx{min-height:220px}
  .tabs{grid-template-columns:1fr}
  .tab{flex-direction:row;text-align:left}
  .pp-body{padding:22px 20px 26px}
  .faq details p{padding-left:6px}
  .totop{bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .sp-bar{transform:none}.bub{opacity:1;transform:none}.ring{opacity:.4}
}