.skill-page { --skill-accent:#0369a1; background:linear-gradient(180deg,#f7faf9 0%,#fff 42%); color:#14251f; min-height:100vh; }
.skill-hero { position:relative; overflow:hidden; display:flex; align-items:center; gap:clamp(2rem,6vw,6rem); max-width:1240px; margin:0 auto; padding:clamp(4rem,9vw,7rem) 1.5rem clamp(3rem,7vw,5rem); }
.skill-hero::before { content:""; position:absolute; width:32rem; height:32rem; border-radius:50%; right:-10rem; top:-14rem; background:radial-gradient(circle, color-mix(in srgb,var(--skill-accent) 18%,transparent), transparent 68%); pointer-events:none; }
.skill-hero__orb { flex:0 0 clamp(7rem,14vw,12rem); aspect-ratio:1; display:grid; place-items:center; border-radius:34% 66% 60% 40% / 42% 38% 62% 58%; background:linear-gradient(145deg,color-mix(in srgb,var(--skill-accent) 92%,#fff),color-mix(in srgb,var(--skill-accent) 44%,#fff)); color:#fff; font-size:clamp(2.6rem,6vw,5rem); box-shadow:0 1.5rem 3rem color-mix(in srgb,var(--skill-accent) 22%,transparent); transform:rotate(-8deg); }
.skill-hero__orb i { transform:rotate(8deg); }
.skill-hero__content { position:relative; max-width:700px; }
.skill-hero__eyebrow,.skill-kicker { margin:0 0 .65rem; color:var(--skill-accent); font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.skill-hero h1 { margin:0; font-size:clamp(3rem,7vw,6.2rem); line-height:.95; letter-spacing:-.055em; color:#10231c; }
.skill-hero__subtitle { max-width:660px; margin:1.35rem 0 1.7rem; font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.65; color:#52645e; }
.skill-hero__actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.skill-page__ad { max-width:1240px; margin:0 auto 1rem; padding:0 1.5rem; }
.skill-page__search { max-width:900px; margin:0 auto 2.5rem; padding:0 1.5rem; }
.skill-topics,.skill-feed { max-width:1240px; margin:0 auto; padding:2rem 1.5rem 4.5rem; }
.skill-section-heading { display:flex; align-items:end; gap:1rem; margin-bottom:1.5rem; }
.skill-section-heading h2 { margin:0; color:#15342a; font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.03em; }
.skill-section-heading p:not(.skill-kicker) { margin:.45rem 0 0; color:#64756f; }
.skill-section-heading__rule { flex:1; height:1px; margin-bottom:.45rem; background:linear-gradient(90deg,color-mix(in srgb,var(--skill-accent) 38%,transparent),transparent); }
.skill-topics__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.skill-topic { display:flex; align-items:center; gap:1rem; width:100%; min-height:8.5rem; padding:1.15rem; text-align:left; border:1px solid #d8e5df; border-radius:1.1rem; background:#fff; color:#1b342b; box-shadow:0 8px 24px rgba(22,63,46,.06); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.skill-topic:hover,.skill-topic:focus-visible { transform:translateY(-3px); border-color:color-mix(in srgb,var(--skill-accent) 60%,#d8e5df); box-shadow:0 14px 32px color-mix(in srgb,var(--skill-accent) 14%,transparent); outline:none; }
.skill-topic.is-active { border-color:var(--skill-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--skill-accent) 16%,transparent); }
.skill-topic__icon { flex:0 0 2.8rem; width:2.8rem; height:2.8rem; display:grid; place-items:center; border-radius:.8rem; color:var(--skill-accent); background:color-mix(in srgb,var(--skill-accent) 10%,#fff); font-size:1.15rem; }
.skill-topic__body { display:grid; gap:.28rem; flex:1; min-width:0; }.skill-topic__body strong { font-size:1rem; }.skill-topic__body small { color:#70807a; line-height:1.35; }.skill-topic__arrow { color:#93a49e; }
.skill-feed { padding-top:0; }.skill-feed__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }.skill-feed__loading,.skill-feed__empty { grid-column:1/-1; padding:2rem; text-align:center; color:#70807a; }.skill-feed__loader { display:flex; justify-content:center; padding:1.6rem; }.skill-feed__loader button { display:none; }
.skill-card { overflow:hidden; border:1px solid #dce7e2; border-radius:1rem; background:#fff; box-shadow:0 8px 22px rgba(22,63,46,.06); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; }.skill-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(22,63,46,.12); }.skill-card__media { position:relative; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,color-mix(in srgb,var(--skill-accent) 80%,#19352a),color-mix(in srgb,var(--skill-accent) 35%,#19352a)); color:#fff; }.skill-card__media img { width:100%; height:100%; object-fit:cover; }.skill-card__type { position:absolute; left:.7rem; top:.7rem; padding:.22rem .5rem; border-radius:999px; background:rgba(8,25,19,.78); color:#fff; font-size:.68rem; font-weight:700; }.skill-card__body { padding:1rem; }.skill-card__body h3 { margin:0 0 .45rem; color:#17342a; font-size:1.03rem; }.skill-card__body p { margin:0; color:#70807a; font-size:.86rem; line-height:1.45; }.skill-card__meta { margin-top:.75rem; color:var(--skill-accent); font-size:.76rem; font-weight:700; }
@media (max-width:850px){.skill-hero{display:block;text-align:center}.skill-hero__orb{margin:0 auto 2rem}.skill-hero__actions{justify-content:center}.skill-hero__subtitle{margin-left:auto;margin-right:auto}.skill-topics__grid,.skill-feed__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-section-heading{align-items:start}.skill-section-heading__rule{display:none}}
@media (max-width:540px){.skill-topics,.skill-feed{padding-left:1rem;padding-right:1rem}.skill-topics__grid,.skill-feed__grid{grid-template-columns:1fr}.skill-hero{padding-left:1rem;padding-right:1rem}.skill-hero h1{font-size:3.25rem}.skill-topic{min-height:7.25rem}.skill-page__ad,.skill-page__search{padding-left:1rem;padding-right:1rem}}
@media (prefers-reduced-motion:reduce){.skill-topic,.skill-card{transition:none}.skill-topic:hover,.skill-card:hover{transform:none}}