/* Skillvila home page: vibrant, block-based bento layout. Loaded on the home page only, after site.css and market.css.
   Vibrant blocks always carry dark ink text: white on the brand orange is only 3.1:1, ink is 6:1 or better on every block color. */
body.home{
  --paper:#FFF6EC;--card:#FFFFFF;--fg:#16110E;--muted:#5E554E;--ink:#16110E;--inkblk:#16110E;--cream:#FFF6EC;
  --orange:#FF5B2E;--orange2:#FF7A4D;--pink:#FF7AB8;--sun:#FFC93C;--lilac:#B9A6FF;--mint:#8EE3B0;
  --hot:#C2410C;--edge:#16110E;--hard:4px 4px 0 var(--edge);
  --bg:var(--paper);--bg2:#F6E7D7;--surface:var(--card);--line:rgba(22,17,14,.12);--line2:rgba(22,17,14,.24);
  --accent:var(--hot);--accent-soft:rgba(255,91,46,.14);--navbg:rgba(255,246,236,.84);
  background:var(--paper);
}
@media (prefers-color-scheme:dark){body.home{
  --paper:#0E0B09;--card:#1A1512;--fg:#FFF6EC;--muted:#B4AAA0;--inkblk:#211A16;
  --hot:#FF7A4D;--edge:#4A3D35;--bg2:#241D19;--line:rgba(255,246,236,.1);--line2:rgba(255,246,236,.22);
  --navbg:rgba(14,11,9,.8);
}}
.home .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home h1,.home h2,.home h3{font-weight:800}
.home .eyebrow{color:var(--hot);font-weight:700}
.home .sec{padding-block:clamp(64px,8vw,104px)}
.home .sec.tight{padding-block:clamp(24px,3vw,40px)}
.home a,.home button,.home summary{cursor:pointer}

/* buttons */
.home .btn{background:var(--orange);color:var(--ink);font-weight:700;border:2px solid var(--edge);box-shadow:var(--hard);min-height:44px;transition:background .2s,transform .2s,box-shadow .2s}
.home .btn:hover{background:var(--orange2);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--edge)}
.home .btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--edge)}
.home .btn.g{background:var(--card);color:var(--fg)}.home .btn.g:hover{background:var(--bg2)}
.home .btn.ink{background:var(--ink);color:var(--cream)}.home .btn.ink:hover{background:#2E2520}
.home .nav .btn{box-shadow:2px 2px 0 var(--edge);min-height:0;padding:8px 16px}
.home .link{color:var(--hot);font-weight:650}
.home :focus-visible{outline:3px solid var(--hot);outline-offset:3px}

/* highlight: a tilted color block behind the words */
.home mark{background:none;color:var(--ink);position:relative;z-index:0;padding-inline:.06em;white-space:nowrap}
.home mark::before{content:"";position:absolute;inset:.1em -.06em .02em;background:var(--orange);border-radius:.16em;transform:rotate(-1.6deg);z-index:-1}

/* on phones the highlight wraps with the words instead of running past the edge */
@media (max-width:560px){.home mark{white-space:normal;background:var(--orange);-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.14em;padding:0 .1em}.home mark::before{display:none}.home .mk h2 mark{background:var(--sun)}}

/* shared block */
.blk{position:relative;border:2px solid var(--edge);border-radius:32px;overflow:hidden;min-width:0}

/* hero */
.hx{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:18px;padding-block:28px 18px}
.hx-main{background:var(--card);padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:2px solid var(--edge);background:var(--sun);color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.chip svg.i{width:14px;height:14px}
.hx h1{font-size:clamp(44px,6.4vw,92px);letter-spacing:-.055em;line-height:.96;margin-top:24px}
.hx .sub{font-size:clamp(17px,1.5vw,20px);color:var(--muted);margin-top:22px;max-width:54ch;line-height:1.5}
.home .claim{margin:32px 0 0;max-width:520px;width:100%;background:var(--card);border:2px solid var(--edge);box-shadow:var(--hard);padding:6px 6px 6px 18px}
.home .claim:focus-within{border-color:var(--edge);box-shadow:var(--hard),0 0 0 5px var(--accent-soft)}
.home .claim label{color:var(--muted)}
.home .claim .btn{box-shadow:none;border-width:2px}
.home .claim .btn:hover{transform:none;box-shadow:none}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted)}
.ticks li{display:flex;align-items:center;gap:6px}.ticks svg.i{width:16px;height:16px;color:var(--hot);stroke-width:2.4}
.hx-stage{background:var(--orange);min-height:600px;display:grid;place-items:center;padding:40px 16px}
.shape{position:absolute;border:2px solid var(--edge);pointer-events:none}
.hx-stage .sh1{width:190px;height:190px;border-radius:50%;background:var(--sun);top:-50px;left:-40px}
.hx-stage .sh2{width:150px;height:150px;border-radius:28px;background:var(--lilac);right:-36px;bottom:70px;transform:rotate(14deg)}
.hx-stage .sh3{width:110px;height:110px;border-radius:50%;background:var(--pink);left:22px;bottom:-30px}
.hx-phone{position:relative;z-index:1;width:268px;height:552px;border-radius:46px;background:#0b0b0d;padding:10px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink)}
.hx-phone .scr{width:100%;height:100%;border-radius:36px;overflow:hidden;position:relative;background:#0D0D10}
.hx-phone .scr::before{content:"";position:absolute;z-index:3;top:9px;left:50%;transform:translateX(-50%);width:88px;height:26px;border-radius:20px;background:#0b0b0d}
.stk{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;max-width:230px;padding:10px 12px;border-radius:16px;background:var(--card);color:var(--muted);border:2px solid var(--edge);box-shadow:var(--hard);font-size:12.5px;line-height:1.35;text-align:left}
.stk b{display:block;color:var(--fg);font-size:13.5px}
.stk .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;border:2px solid var(--edge)}
.stk .ic svg.i{width:17px;height:17px}
.k1{left:16px;top:24px}.k2{right:16px;bottom:24px}
@media (prefers-reduced-motion:no-preference){
  .stk{animation:bob 6s ease-in-out infinite}.k2{animation-delay:-3s}
  @keyframes bob{50%{transform:translateY(-8px)}}
  .hx-main>*{animation:hx-in .8s cubic-bezier(.2,.8,.2,1) both}.hx-main>:nth-child(2){animation-delay:.06s}.hx-main>:nth-child(3){animation-delay:.12s}.hx-main>:nth-child(n+4){animation-delay:.18s}
  @keyframes hx-in{from{opacity:0;transform:translateY(14px)}}
}
@media (max-width:900px){.hx{grid-template-columns:minmax(0,1fr)}.hx-stage{min-height:0;padding:96px 16px}}
@media (max-width:560px){.stk{display:none}.hx-stage{padding:40px 16px}.hx-phone{width:240px;height:480px}.blk{border-radius:26px}.hx-main{padding:26px 22px}.chip{font-size:11px;letter-spacing:.04em}}
/* narrow phones: the claim button drops under the input so the name field keeps its width */
@media (max-width:480px){.home .claim{flex-wrap:wrap;border-radius:22px;padding:6px 6px 6px 14px;row-gap:4px}.home .claim .cin{flex:1 1 120px}.home .claim .btn{flex:1 0 100%}}

/* stats */
.hstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hstats>div{border:2px solid var(--edge);border-radius:24px;padding:22px 24px;display:flex;flex-direction:column;gap:2px}
.hstats b{font-size:clamp(34px,4.4vw,52px);font-weight:800;letter-spacing:-.05em;line-height:1}
.hstats span{font-size:14px;font-weight:500}
@media (max-width:760px){.hstats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hstats>div{padding:18px}}

/* section heads */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 24px;flex-wrap:wrap;margin-bottom:30px}
.shead>div{max-width:740px}
.shead h2{font-size:clamp(34px,5vw,60px);letter-spacing:-.05em;line-height:1;margin-top:10px}
.shead p{font-size:18px;color:var(--muted);margin-top:14px}
.shead.c{justify-content:center;text-align:center}.shead.c>div{margin-inline:auto}
.shead.sub{margin:64px 0 24px}
.shead .h3{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.045em}
.shead .btn svg.i{width:16px;height:16px}

/* marketplace block: search first, then categories */
.home #learn{padding-block:clamp(48px,6vw,72px) clamp(24px,3vw,40px)}
.mk{background:var(--inkblk);color:var(--cream);padding:clamp(26px,5vw,56px)}
.mk .eyebrow{color:var(--sun)}
.mk-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 40px;align-items:end}
.mk h2{font-size:clamp(34px,4.8vw,58px);letter-spacing:-.05em;line-height:1.02;margin-top:10px}
.mk h2 mark::before{background:var(--sun)}
.mk p{color:#D9CFC5;font-size:17px;margin-top:16px;max-width:56ch}
.home .mk .msearch{margin:0;max-width:none;background:var(--cream);border:2px solid var(--cream);border-radius:18px;padding:8px 8px 8px 16px}
.home .mk .msearch:focus-within{box-shadow:0 0 0 4px var(--sun)}
.home .mk .msearch svg.i{color:#5E554E}
.home .mk .msearch .cin{color:var(--ink);font-size:16px}
.home .mk .msearch .cin::placeholder{color:#6B6158}
.home .mk .msearch .btn{box-shadow:none;border-color:var(--ink)}
.home .mk .msearch .btn:hover{transform:none;box-shadow:none}
@media (max-width:900px){.mk-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.home .mk .msearch .btn{padding:10px 14px}}
.ctiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px;margin-top:34px}
.ctile{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:120px;padding:18px;border-radius:20px;border:2px solid var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s}
.ctile:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--cream)}
.ctile svg.i{width:26px;height:26px;stroke-width:1.9;margin-bottom:auto}
.ctile b{font-size:15.5px;line-height:1.2;letter-spacing:-.01em}
.ctile span{font-size:13px;font-weight:500}
.ctile.all{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.ctile.all svg.i{color:var(--hot)}
@media (max-width:560px){.ctiles{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(2,auto);grid-auto-columns:42%;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 8px 12px 4px;margin:28px -4px 0;scrollbar-width:none}.ctiles::-webkit-scrollbar{display:none}.ctile{min-height:108px;padding:14px;scroll-snap-align:start}.ctile:hover{transform:none;box-shadow:none}}

/* product cards */
.home .mgrid{gap:26px 22px}
.home .cover{border:2px solid var(--edge);border-radius:20px;transition:transform .25s,box-shadow .25s}
.home .pc:hover .cover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--edge)}
.home .cover .cat{background:var(--sun);color:var(--ink);border:2px solid var(--ink);font-weight:700}
.home .aff{color:#14532D;background:var(--mint)}
@media (prefers-color-scheme:dark){.home .aff{color:#0B2E1A}}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,270px);gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:6px 8px 20px 4px;margin-inline:-4px;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rail:focus-visible{outline:3px solid var(--hot);outline-offset:4px;border-radius:12px}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:36px;border:2px solid var(--edge);border-radius:24px;background:var(--card);overflow:hidden}
.trust>div{padding:20px 22px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.trust>div+div{border-left:2px solid var(--line)}
.trust b{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--fg)}
.trust b svg.i{color:var(--hot)}
@media (max-width:860px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}.trust>div:nth-child(3){border-left:0}.trust>div:nth-child(n+3){border-top:2px solid var(--line)}}
@media (max-width:480px){.trust{grid-template-columns:minmax(0,1fr)}.trust>div+div{border-left:0;border-top:2px solid var(--line)}}

/* who it's for */
.who3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wb{padding:30px;display:flex;flex-direction:column;gap:12px}
.wb .k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.wb h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.04em;line-height:1.05;margin-top:8px}
.wb p{font-size:16px;line-height:1.5;flex:1}
.home .wb .link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:700}
@media (max-width:860px){.who3{grid-template-columns:minmax(0,1fr)}}

/* skill paths */
.home .path{border:2px solid var(--edge);border-radius:28px;background:var(--card)}
.home .path h3{font-size:24px}
.home .path li a{background:var(--paper);border:1px solid var(--line)}
.home .path li a:hover{background:var(--bg2)}
.home .path .ft{border-top:2px solid var(--line)}
.home .path .btn.d{background:var(--ink);color:var(--cream)}

/* features bento */
.home .bento{gap:18px}
.home .tile{border:2px solid var(--edge);border-radius:28px;background:var(--card);align-content:start}
.home .tile h3{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.04em}
.home .tile.dark{background:var(--inkblk);color:var(--cream);border-color:var(--edge)}.home .tile.dark p{color:#D9CFC5}
.home .tile[class*="c-"] p{color:var(--ink)}
.home .tile.dark .tag{background:rgba(255,246,236,.12);color:var(--cream)}
.home .tile.c-lilac .tag{background:rgba(255,255,255,.55);color:var(--ink)}
.home .pb{background:var(--paper);border:2px solid var(--line);color:var(--fg)}
.home .serp{background:var(--paper);border:2px solid var(--line)}

/* how it works */
.how{padding:clamp(26px,5vw,56px)}
.how .eyebrow{color:var(--ink)}
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.steps3 li{background:var(--card);color:var(--fg);border:2px solid var(--edge);border-radius:24px;padding:26px}
.steps3 .n{display:block;font-size:64px;font-weight:800;letter-spacing:-.06em;line-height:1;color:var(--hot)}
.steps3 h3{font-size:22px;letter-spacing:-.03em;margin-top:18px}
.steps3 p{color:var(--muted);margin-top:8px;font-size:15px}
@media (max-width:800px){.steps3{grid-template-columns:minmax(0,1fr)}}

/* creators */
.home .cr{border:2px solid var(--edge);transition:transform .2s,box-shadow .2s}
.home .cr:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--edge)}

/* pricing */
.home .plans{gap:18px}
.home .plan{border:2px solid var(--edge);border-radius:28px;background:var(--card)}
.home .plan li svg.i{color:var(--hot);margin-top:3px}
.home .plan.f{background:var(--orange);color:var(--ink);border-color:var(--edge);box-shadow:8px 8px 0 var(--edge)}
.home .plan.f p,.home .plan.f li{color:var(--ink);opacity:1}
.home .plan.f li svg.i{color:var(--ink)}
.home .plan.f .btn{background:var(--ink);color:var(--cream)}
.home .note{color:var(--muted)}

/* closing call to action */
.fcta-wrap{padding-block:clamp(24px,4vw,48px) clamp(64px,8vw,104px)}
.fcta{background:var(--orange);color:var(--ink);text-align:center;padding:clamp(48px,8vw,104px) 22px;display:flex;flex-direction:column;align-items:center}
.fcta h2{font-size:clamp(40px,7vw,88px);letter-spacing:-.055em;line-height:.98;max-width:12ch;position:relative}
.fcta p{font-size:clamp(17px,1.8vw,20px);margin-top:18px;max-width:46ch;position:relative}
.fcta .claim{position:relative;margin-inline:auto}
.home .fcta .claim .btn{background:var(--ink);color:var(--cream)}
.fcta>.link{position:relative;margin-top:22px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.fcta .sh1{width:220px;height:220px;border-radius:50%;background:var(--sun);top:-70px;right:-50px}
.fcta .sh2{width:160px;height:160px;border-radius:32px;background:var(--pink);left:-50px;bottom:-40px;transform:rotate(-12deg)}
@media (max-width:560px){.fcta .sh1{width:140px;height:140px;top:-60px;right:-50px}.fcta .sh2{width:110px;height:110px}}

/* colors: vibrant blocks with ink text (last, so they win over the generic card backgrounds above) */
.home .c-orange{background:var(--orange);color:var(--ink)}.home .c-pink{background:var(--pink);color:var(--ink)}
.home .c-sun{background:var(--sun);color:var(--ink)}.home .c-lilac{background:var(--lilac);color:var(--ink)}.home .c-mint{background:var(--mint);color:var(--ink)}

@media (prefers-reduced-motion:reduce){.home *,.home *::before{transition:none!important;animation:none!important}}