/* ==========================================================================
   SunTeam v2 — "Second job, first income" (/sun/work)
   ========================================================================== */
.wk { overflow-x: clip; }
.wk-hero { position: relative; padding: 14px 0 24px; overflow: hidden; }
.wk-hero .hero-bg { z-index: -1; background: radial-gradient(800px 420px at 85% 20%, rgba(38,198,218,.16), transparent 70%), radial-gradient(700px 380px at 10% 80%, rgba(255,212,0,.16), transparent 70%); }
.wk-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.wk-copy { display: flex; flex-direction: column; gap: 16px; }
.wk-copy .lead { margin: 0; }
.wk-copy .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.wk-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }
.wk-checks li { display: inline-flex; align-items: center; gap: 6px; }
.wk-checks .ic { color: var(--mint); }

.wk-art { position: relative; max-width: 500px; width: 100%; justify-self: center; }
.wk-art > svg { display: block; width: 100%; height: auto; overflow: visible; }
.wk-sun { transform-box: fill-box; transform-origin: center; animation: wk-pulse 4s ease-in-out infinite; }
.wk-moon { animation: wk-float 6s ease-in-out infinite; }
.wk-stars circle { animation: wk-tw 2.4s ease-in-out infinite; }
.wk-stars circle:nth-child(2) { animation-delay: .6s; } .wk-stars circle:nth-child(3) { animation-delay: 1.2s; } .wk-stars circle:nth-child(4) { animation-delay: 1.8s; }
.wk-phone { animation: wk-buzz 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.wk-notif { animation: wk-float 5s ease-in-out infinite; }
.wk-notif.n2 { animation-delay: -2.5s; }
.wk-hand { transform-origin: 0 0; animation: spin-slow 8s linear infinite; }
.wk-tag { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 16px; font-weight: 800; font-size: var(--fs-sm); animation: wk-float 6s ease-in-out infinite; }
.wk-tag.t-day { top: 18%; inset-inline-start: -2%; } .wk-tag.t-day .ic { color: #F59E0B; }
.wk-tag.t-night { bottom: 14%; inset-inline-end: -2%; animation-delay: -3s; } .wk-tag.t-night .ic { color: #4338CA; }
@keyframes wk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes wk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wk-tw { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes wk-buzz { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(-8deg); } 92% { transform: rotate(8deg); } 96% { transform: rotate(-4deg); } }

/* facts */
.wk-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.wk-facts > div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); }
.wk-facts > div > span { grid-row: span 2; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #111318; color: var(--sun-400); }
.wk-facts b { font-size: var(--fs-xl); font-weight: 900; line-height: 1.2; }
.wk-facts small { font-size: var(--fs-xs); color: var(--text-3); }

/* comparison */
.wk-vs { display: grid; grid-template-columns: 1fr 70px 1fr; gap: 0; align-items: stretch; }
.vs-col { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 28px; }
.vs-old { background: var(--surface-sunk); }
.vs-new { background: #111318; color: #fff; box-shadow: 0 30px 60px -36px rgba(17,19,24,.6); }
.vs-h { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-lg); font-weight: 900; margin-bottom: 4px; }
.vs-new .vs-h .ic { color: var(--sun-400); }
.vs-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; font-size: var(--fs-sm); font-weight: 700; }
.vs-old .vs-row { background: var(--surface); color: var(--text-3); }
.vs-old .vs-row .ic { color: var(--rose, #F04438); }
.vs-new .vs-row { background: rgba(255,255,255,.07); }
.vs-new .vs-row .ic { color: #4ADE80; }
.vs-mid { display: grid; place-items: center; }
.vs-mid span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--sun-400); font-weight: 900; box-shadow: 0 0 0 6px var(--bg, #F6F5F0); z-index: 1; }

/* planner */
.wk-plan { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: center; padding: clamp(22px, 4vw, 40px); border-radius: 32px; background: linear-gradient(135deg, color-mix(in srgb, #26C6DA 12%, var(--surface)), var(--sun-50)); box-shadow: inset 0 0 0 1px var(--line); }
.wp-head { display: flex; flex-direction: column; gap: 10px; }
.wp-head p { margin: 0; color: var(--text-2); line-height: 2; font-size: var(--fs-sm); }
.wp-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; }
.wp-seg button { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border: 0; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: inherit; cursor: pointer; transition: all .2s; }
.wp-seg b { font-size: 1.5rem; font-weight: 900; line-height: 1.2; }
.wp-seg small { font-size: var(--fs-xs); color: var(--text-3); }
.wp-seg button.is-active { background: #111318; color: #fff; box-shadow: 0 14px 28px -14px rgba(17,19,24,.6); }
.wp-seg button.is-active b { color: var(--sun-400); }
.wp-seg button.is-active small { color: rgba(255,255,255,.6); }
.wp-body { display: flex; flex-direction: column; gap: 10px; }
.wp-panel { padding: 20px; border-radius: 24px; background: var(--surface); box-shadow: var(--sh-2); }
.wp-panel[hidden] { display: none; }
.wp-panel.anim { animation: wk-in .45s var(--ease); }
@keyframes wk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wp-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wp-title b { font-size: var(--fs-lg); font-weight: 900; }
.wp-title span { padding: 3px 10px; border-radius: 999px; background: var(--amber-soft); font-size: var(--fs-xs); font-weight: 800; }
.wp-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.wp-week span { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 800; background: var(--surface-sunk); color: var(--text-3); }
.wp-week span.on { background: var(--sun-400); color: #111318; }
.wp-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wp-panel li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 700; }
.wp-panel li span { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, #26C6DA 18%, var(--surface)); color: #0E7490; }
.wp-note { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-3); }

/* earning paths */
.wk-earn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.we { position: relative; padding: 22px 18px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.we::before { content: ""; position: absolute; width: 140px; height: 140px; top: -60px; inset-inline-end: -50px; border-radius: 50%; background: rgba(255,212,0,.18); }
.we:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--sun-400), var(--sh-2); }
.we-n { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 1.6rem; font-weight: 900; color: var(--accent-ink); }
.we-n .ic { width: 34px; height: 34px; }
.we b { position: relative; display: block; margin: 8px 0 6px; font-weight: 900; }
.we p { position: relative; margin: 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.9; }

/* audience */
.wk-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ww { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px 16px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ww svg { width: 96px; height: 96px; }
.ww-ico { position: absolute; top: 88px; margin-inline-start: 64px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--wc); color: #fff; box-shadow: 0 0 0 3px var(--surface); }
.ww b { margin-top: 6px; font-weight: 900; }
.ww p { margin: 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.9; }

/* proof */
.wk-proof { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: center; padding: clamp(22px, 4vw, 36px); border-radius: 30px; background: #111318; color: #fff; }
.wk-proof .eyebrow { background: rgba(255,212,0,.14); color: #FFE45C; }
.wk-proof .h-2 { margin: 10px 0; }
.wk-proof p { color: rgba(255,255,255,.72); line-height: 2; margin: 0 0 14px; }
.wp-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; border-radius: 22px; background: rgba(255,255,255,.06); text-align: center; }
.wt-av { position: relative; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--sun-400); color: #111318; font-weight: 900; font-size: 1.4rem; box-shadow: 0 0 0 3px var(--sun-400); }
.wt-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wt-r { position: absolute; top: 12px; inset-inline-end: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--sun-400); color: #111318; font-weight: 900; font-size: var(--fs-xs); }
.wt b { margin-top: 6px; font-size: var(--fs-sm); }
.wt small { display: inline-flex; align-items: center; gap: 3px; color: rgba(255,255,255,.55); font-size: var(--fs-xs); }

@media (prefers-reduced-motion: reduce) { .wk-sun, .wk-moon, .wk-stars circle, .wk-phone, .wk-notif, .wk-hand, .wk-tag { animation: none; } }
@media (max-width: 1100px) { .wk-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wk-earn, .wk-who { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) {
  .wk-hero-grid, .wk-plan, .wk-proof { grid-template-columns: 1fr; }
  .wk-art { order: -1; max-width: 360px; }
  .wk-vs { grid-template-columns: 1fr; gap: 10px; }
  .vs-mid { order: 0; }
}
@media (max-width: 560px) {
  .wk-facts { grid-template-columns: 1fr 1fr; }
  .wk-earn, .wk-who, .wp-top { grid-template-columns: 1fr; }
  .wp-seg b { font-size: 1.2rem; }
}