/* Home (js/home.js): the welcome and four step cards. Each card has its colour (--k-*), light and dark. */
#sec-home{--hm-paper:#fff;--hm-paper-line:oklch(.92 0 0);--hm-ink-soft:oklch(.86 0 0);--hm-ink-softer:oklch(.92 0 0);--hm-glass:rgb(255 255 255 / .55);
  --l-bg:#EAF0FC;--l-fg:#1E4FB8;--l-bar:#2F62D0;--p-bg:#E8F5F9;--p-fg:#13768A;--p-bar:#1B8DA3;--j-bg:#E7F6EC;--j-fg:#15803D;--j-bar:#16A34A;--t-bg:#EFEBFC;--t-fg:#5B3FB0;--t-bar:#6D4FD0;
  --hero-a:#E3F3F8;--hero-b:#EAF6EF;--hero-c:#F1EDFC;
  --tj-bg:#D3EEF4;--tl-bg:#DCE5FA;--th-bg:#FBE9C8;--ts-bg:#E7E1FA}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #sec-home{--hm-paper:oklch(.27 0 0);--hm-paper-line:oklch(.34 0 0);--hm-ink-soft:oklch(.42 0 0);--hm-ink-softer:oklch(.35 0 0);--hm-glass:rgb(255 255 255 / .08);
  --l-bg:oklch(.25 .04 262);--l-fg:oklch(.84 .08 262);--p-bg:oklch(.25 .03 218);--p-fg:oklch(.84 .09 218);--j-bg:oklch(.25 .035 150);--j-fg:oklch(.84 .12 150);--t-bg:oklch(.25 .04 290);--t-fg:oklch(.84 .09 290);
  --hero-a:oklch(.26 .035 218);--hero-b:oklch(.25 .03 160);--hero-c:oklch(.25 .035 290);
  --tj-bg:oklch(.34 .05 218);--tl-bg:oklch(.34 .07 260);--th-bg:oklch(.36 .06 70);--ts-bg:oklch(.33 .07 290)}}
:root[data-theme="dark"] #sec-home{--hm-paper:oklch(.27 0 0);--hm-paper-line:oklch(.34 0 0);--hm-ink-soft:oklch(.42 0 0);--hm-ink-softer:oklch(.35 0 0);--hm-glass:rgb(255 255 255 / .08);
  --l-bg:oklch(.25 .04 262);--l-fg:oklch(.84 .08 262);--p-bg:oklch(.25 .03 218);--p-fg:oklch(.84 .09 218);--j-bg:oklch(.25 .035 150);--j-fg:oklch(.84 .12 150);--t-bg:oklch(.25 .04 290);--t-fg:oklch(.84 .09 290);
  --hero-a:oklch(.26 .035 218);--hero-b:oklch(.25 .03 160);--hero-c:oklch(.25 .035 290);
  --tj-bg:oklch(.34 .05 218);--tl-bg:oklch(.34 .07 260);--th-bg:oklch(.36 .06 70);--ts-bg:oklch(.33 .07 290)}
#sec-home .hm{max-width:1180px;display:flex;flex-direction:column;gap:18px}
#sec-home .hm-i{width:18px;height:18px;flex:none}
/* the welcome */
#sec-home .hm-hero{border-radius:22px;padding:28px 30px;background:linear-gradient(110deg,var(--hero-a),var(--hero-b) 55%,var(--hero-c));border:1px solid var(--line)}
#sec-home .hm-hero h1{display:flex;align-items:center;gap:12px;font-size:30px;line-height:38px;font-weight:800;letter-spacing:-.01em}
#sec-home .hm-wave{font-size:32px;line-height:1}
#sec-home .hm-hero p{margin-top:8px;color:var(--ink2);font-size:15.5px;line-height:23px;max-width:720px}
/* the four steps, two a row */
#sec-home .hm-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#sec-home .hm-linkedin{--k-bg:var(--l-bg);--k-fg:var(--l-fg);--k-bar:var(--l-bar)}
#sec-home .hm-profile{--k-bg:var(--p-bg);--k-fg:var(--p-fg);--k-bar:var(--p-bar)}
#sec-home .hm-jobs{--k-bg:var(--j-bg);--k-fg:var(--j-fg);--k-bar:var(--j-bar)}
#sec-home .hm-team{--k-bg:var(--t-bg);--k-fg:var(--t-fg);--k-bar:var(--t-bar)}
#sec-home .hm-step{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:22px;background:var(--k-bg);border:1px solid var(--line)}
#sec-home .hm-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;min-height:120px}
#sec-home .hm-nb{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
#sec-home .hm-num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--k-bar);color:#fff;font-size:20px;font-weight:800}
#sec-home .hm-chip{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:3px 10px;border-radius:999px;background:var(--surface);color:var(--ink2);font-size:12px;font-weight:700;line-height:16px}
#sec-home .hm-chip.ok{color:var(--good)}#sec-home .hm-chip.ok .hm-i{width:15px;height:15px}
#sec-home .hm-chip.muted{color:var(--ink3);font-weight:600}
/* step 1 while LinkedIn isn't connected: it stands out, a must before the rest (js/home.js must) */
#sec-home .hm-step.hm-must{border-color:var(--k-bar);box-shadow:0 0 0 1px var(--k-bar),0 0 0 5px color-mix(in oklab,var(--k-bar) 22%,transparent),0 14px 34px -14px color-mix(in oklab,var(--k-bar) 70%,transparent);animation:hm-must 2.4s ease-in-out infinite}
#sec-home .hm-chip.must{background:var(--k-bar);color:#fff}
@keyframes hm-must{50%{box-shadow:0 0 0 1px var(--k-bar),0 0 0 9px color-mix(in oklab,var(--k-bar) 12%,transparent),0 14px 34px -14px color-mix(in oklab,var(--k-bar) 70%,transparent)}}
@media (prefers-reduced-motion:reduce){#sec-home .hm-step.hm-must{animation:none}}
#sec-home .hm-art{display:block;flex:none;width:170px;height:120px;filter:drop-shadow(0 8px 14px rgb(0 0 0 / .08))}
#sec-home .hm-crew{display:flex;align-items:center;width:auto;height:120px;padding-right:4px;filter:none}
#sec-home .hm-face{display:grid;place-items:end center;width:58px;height:58px;border-radius:50%;overflow:hidden;border:3px solid var(--surface);margin-left:-14px;box-shadow:0 4px 10px rgb(0 0 0 / .1)}
#sec-home .hm-face:first-child{margin-left:0}
#sec-home .hm-face svg{display:block;width:58px;height:58px}
#sec-home .hm-f-jobs{background:var(--tj-bg)}#sec-home .hm-f-linkedin{background:var(--tl-bg)}#sec-home .hm-f-signals{background:var(--th-bg)}#sec-home .hm-f-spy{background:var(--ts-bg)}
#sec-home .hm-step h2{font-size:22px;line-height:28px;font-weight:800;margin-top:4px}
#sec-home .hm-p{color:var(--ink2);font-size:14.5px;line-height:21px}
#sec-home .hm-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:4px;padding-top:14px;border-top:1px solid color-mix(in oklab,var(--k-fg) 18%,transparent);flex:1}
#sec-home .hm-list li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--ink)}
#sec-home .hm-list .hm-i{width:18px;height:18px;color:var(--k-bar);margin-top:1px}
#sec-home .hm-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;margin-top:6px;border:0;border-radius:13px;background:var(--k-bar);color:#fff;font:inherit;font-size:15px;font-weight:700;cursor:pointer;width:100%}
#sec-home .hm-go:hover{filter:brightness(.95)}
#sec-home .hm-go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* the steps' rows line up across each row of two (number and picture, title, words, points, button) */
@supports (grid-template-rows:subgrid){
  #sec-home .hm-steps{grid-template-rows:repeat(10,auto);row-gap:0}
  #sec-home .hm-step:nth-child(-n+2){margin-bottom:18px}
  #sec-home .hm-step{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:12px}
  #sec-home .hm-go{align-self:end}
}
@media (max-width:1100px){#sec-home .hm-steps{grid-template-columns:1fr;grid-template-rows:none;row-gap:18px}#sec-home .hm-step{display:flex;grid-row:auto}#sec-home .hm-step:nth-child(-n+2){margin-bottom:0}#sec-home .hm-go{width:auto;align-self:flex-start;padding:0 28px}}
@media (max-width:640px){#sec-home .hm-hero{padding:20px}#sec-home .hm-hero h1{font-size:24px;line-height:30px}#sec-home .hm-wave{font-size:26px}
  #sec-home .hm-step{padding:20px}#sec-home .hm-top{min-height:0}#sec-home .hm-go{width:100%}
  #sec-home .hm-art{width:136px;height:96px}#sec-home .hm-crew{height:96px}#sec-home .hm-face{width:46px;height:46px;margin-left:-12px}#sec-home .hm-face svg{width:46px;height:46px}}
/* A phone (Max 2026-10-20: "Make it like real monile app UI"): tighter cards, a smaller picture, the whole card a tap target */
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  #sec-home .hm{gap:14px}
  #sec-home .hm-hero{padding:16px;border-radius:18px}
  #sec-home .hm-hero h1{font-size:22px;line-height:28px;gap:10px;margin-bottom:0}
  #sec-home .hm-wave{font-size:24px}
  #sec-home .hm-hero p{margin-top:6px;font-size:14.5px;line-height:21px}
  #sec-home .hm-steps{row-gap:14px}
  #sec-home .hm-step{padding:16px;gap:10px;border-radius:18px;cursor:pointer;-webkit-tap-highlight-color:transparent}
  #sec-home .hm-step:active{filter:brightness(.97)}
  #sec-home .hm-top{align-items:center;gap:6px}
  #sec-home .hm-nb{gap:8px}
  #sec-home .hm-num{width:38px;height:38px;font-size:17px}
  #sec-home .hm-chip{min-height:28px}
  #sec-home .hm-art{width:112px;height:80px}
  #sec-home .hm-crew{height:80px;padding-right:2px}
  #sec-home .hm-face{width:40px;height:40px;margin-left:-10px;border-width:2px}
  #sec-home .hm-face svg{width:40px;height:40px}
  #sec-home .hm-step h2{font-size:20px;line-height:26px;margin-top:0}
  #sec-home .hm-p{font-size:14px;line-height:20px}
  #sec-home .hm-list{gap:8px;padding-top:12px}
  #sec-home .hm-list li{font-size:13.5px;line-height:19px}
  #sec-home .hm-go{height:48px;margin-top:2px;border-radius:14px}
}