/* SKILX homepage structure
 * Product-led layout inspired by strong modern learning platforms without
 * reproducing any third-party brand, artwork or proprietary components.
 */

/* The canonical SKILX header is rendered as .skx-header (not a template-part
 * <header> wrapper), so target the real production DOM. Keep only a deliberate
 * 5px transition between the navigation and hero. */
.wp-site-blocks > .skx-header + main.wp-block-group,
.wp-site-blocks > header.wp-block-template-part + main.wp-block-group{
  margin-block-start:5px!important;
  margin-top:5px!important;
}

.skx-home-hero{
  padding:clamp(86px,7vw,116px) 0 clamp(78px,6vw,104px)!important;
  min-height:680px;
  display:flex;
  align-items:center;
}
.skx-home-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(360px,.72fr);
  gap:clamp(56px,6vw,112px);
  align-items:center;
  width:calc(100% - clamp(96px,8vw,152px))!important;
  max-width:1680px!important;
}
.skx-home-hero-copy{min-width:0}
.skx-home-hero-copy h1{
  max-width:980px!important;
  margin:0!important;
  font-size:clamp(4rem,6.6vw,7.3rem)!important;
  line-height:.91!important;
}
.skx-home-hero-copy .skx-hero-copy{
  max-width:760px!important;
  margin:28px 0 28px!important;
  font-size:clamp(1.04rem,1.4vw,1.2rem)!important;
}
.skx-home-hero-copy .skx-search{max-width:760px!important;width:100%!important}
.skx-home-hero-copy .skx-hero-meta{max-width:780px!important;margin-top:24px!important;gap:18px 26px!important}

.skx-home-discovery-panel{
  position:relative;
  z-index:2;
  padding:clamp(30px,3vw,42px);
  border-radius:18px;
  background:#fff;
  color:var(--skx-ink);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
}
.skx-home-discovery-panel:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--skx-cyan),var(--skx-cyan-2));
}
.skx-home-panel-kicker{
  display:block;
  margin-bottom:14px;
  color:#087d8c;
  font-family:var(--skx-font-display);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.skx-home-discovery-panel h2{
  margin:0;
  color:var(--skx-navy);
  font-size:clamp(1.9rem,2.4vw,2.7rem);
  line-height:1.03;
  letter-spacing:-.045em!important;
}
.skx-home-discovery-panel>p{
  margin:16px 0 24px;
  color:var(--skx-muted);
  line-height:1.68;
  font-size:.98rem;
}
.skx-home-quick-links{display:grid;border-top:1px solid var(--skx-line)}
.skx-home-quick-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:52px;
  border-bottom:1px solid var(--skx-line);
  color:var(--skx-navy);
  font-family:var(--skx-font-display);
  font-weight:600;
  font-size:.94rem;
  transition:color .18s ease,padding .18s ease;
}
.skx-home-quick-links a span{color:var(--skx-cyan-2)}
.skx-home-quick-links a:hover{color:var(--skx-cyan-2);padding-left:4px}
.skx-home-panel-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  margin-top:24px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--skx-cyan),#37f5ff);
  color:#021018!important;
  font-family:var(--skx-font-display);
  font-weight:700;
}
.skx-home-discovery-panel small{display:block;margin-top:14px;text-align:center;color:#7a8b98;font-size:.78rem}

.skx-home-skill-rail{
  background:#0a2037;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.skx-home-skill-rail-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px 30px;
  min-height:82px;
  overflow-x:auto;
  scrollbar-width:none;
}
.skx-home-skill-rail-inner::-webkit-scrollbar{display:none}
.skx-home-skill-rail-label{
  flex:0 0 auto;
  color:#6feff6;
  font-family:var(--skx-font-display);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.skx-home-skill-rail a{
  flex:0 0 auto;
  color:#c8d6df;
  font-family:var(--skx-font-display);
  font-size:.86rem;
  font-weight:600;
}
.skx-home-skill-rail a:hover{color:#fff}

.skx-home-paths,.skx-home-popular,.skx-home-standard{padding:clamp(96px,7vw,132px) 0!important}
.skx-home-resources{padding:clamp(104px,7.5vw,142px) 0!important}
.skx-home-section-head{margin-bottom:clamp(38px,4vw,58px)}
.skx-home-section-head .skx-section-title{margin:.55rem 0 0!important;max-width:920px!important}
.skx-home-section-head .skx-section-copy{margin-top:18px!important;max-width:680px!important}
.skx-home-section-head--wide{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.72fr);
  gap:clamp(48px,6vw,110px);
  align-items:end;
}
.skx-home-section-head--wide .skx-section-copy{margin:0 0 8px!important}
.skx-home-section-head--action{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
}
.skx-home-section-head--action>div{max-width:900px}
.skx-home-section-head--center{text-align:center;max-width:1040px;margin-left:auto;margin-right:auto}
.skx-home-section-head--center .skx-section-title,.skx-home-section-head--center .skx-section-copy{margin-left:auto!important;margin-right:auto!important}

.skx-home-path-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  margin-top:0!important;
  gap:18px!important;
}
.skx-home-path-grid .skx-category-card{
  min-height:178px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:26px!important;
  border-radius:14px;
}
.skx-home-path-grid .skx-category-card strong{
  position:relative;
  z-index:1;
  font-family:var(--skx-font-display)!important;
  font-size:1.05rem;
  font-weight:650!important;
}
.skx-home-path-grid .skx-category-card>span{position:relative;z-index:1;margin-top:9px!important}
.skx-home-path-grid .skx-category-card:after{
  content:"→";
  position:absolute;
  right:22px;
  top:20px;
  color:#13b9c6;
  font-family:var(--skx-font-display);
  font-weight:700;
}

.skx-home-outline-link{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  color:#e9f4f8!important;
  font-family:var(--skx-font-display);
  font-size:.88rem;
  font-weight:650;
}
.skx-home-outline-link:hover{border-color:rgba(92,229,239,.7);color:#8df9ff!important}
.skx-home-course-grid{margin-top:0!important;gap:20px!important}
.skx-home-course-grid .skx-course-card{border-radius:14px}
.skx-home-course-grid .skx-course-cover{aspect-ratio:16/7;min-height:150px}
.skx-home-course-grid .skx-course-body{padding:28px!important}

.skx-home-skill-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  margin-top:0!important;
  gap:18px!important;
}
.skx-home-skill-grid .skx-skill-card{
  min-height:190px!important;
  padding:28px!important;
  border-radius:14px;
}
.skx-home-skill-grid .skx-skill-card:nth-child(1),
.skx-home-skill-grid .skx-skill-card:nth-child(6){background:linear-gradient(145deg,#fff,#effcfd)}

.skx-home-model{
  position:relative;
  overflow:hidden;
  padding:clamp(106px,8vw,152px) 0;
  background:linear-gradient(160deg,#05070a,#071526);
  color:#fff;
}
.skx-home-model:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,transparent 5%,#000 32%,#000 78%,transparent 100%);
}
.skx-home-model>.skx-shell{position:relative;z-index:1}
.skx-home-model .skx-kicker{color:#7ef7fc}
.skx-home-model .skx-section-title{color:#fff}
.skx-home-model .skx-section-copy{color:#9fb0bf}
.skx-home-model-head{margin-bottom:clamp(54px,5vw,78px)}
.skx-home-model-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(32px,4vw,64px);
  align-items:stretch;
  max-width:1260px;
  margin:0 auto;
}
.skx-home-model-stack{display:grid;gap:16px;align-content:start}
.skx-home-model-card{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:18px;
  padding:24px 26px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:#0d2134;
  color:#fff;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.skx-home-model-card.is-active{
  background:#fff;
  border-color:#fff;
  color:var(--skx-navy);
  transform:translateX(8px);
}
.skx-home-model-card>span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(6,231,249,.11);
  color:#5ce5ef;
  font-family:var(--skx-font-display);
  font-size:.76rem;
  font-weight:700;
}
.skx-home-model-card.is-active>span{background:#e8fcfd;color:#087d8c}
.skx-home-model-card h3{margin:1px 0 7px;font-size:1.08rem;letter-spacing:-.02em}
.skx-home-model-card p{margin:0;color:#9fb0bf;line-height:1.6;font-size:.91rem}
.skx-home-model-card.is-active p{color:#5e7180}
.skx-home-model-stage{
  min-height:520px;
  padding:30px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:16px;
  background:linear-gradient(145deg,#091828,#0b263a);
  box-shadow:0 30px 70px rgba(0,0,0,.26);
}
.skx-home-stage-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.09)}
.skx-home-stage-top span{color:#6fdfea;font-family:var(--skx-font-display);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.skx-home-stage-top strong{font-family:var(--skx-font-display)!important;font-size:1rem;color:#fff}
.skx-home-stage-card{margin-top:28px;padding:28px;border-radius:14px;border:1px solid rgba(255,255,255,.11);background:#0a1623}
.skx-home-stage-card--primary{background:#fff;color:var(--skx-navy)}
.skx-home-stage-card h3{margin:18px 0 10px;font-size:1.45rem;letter-spacing:-.035em}
.skx-home-stage-card p{margin:0;color:#607282;line-height:1.6}
.skx-home-stage-card>div{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.skx-home-stage-card>div span{padding:7px 9px;border-radius:8px;background:#eef7f8;color:#35616b;font-size:.72rem;font-weight:650}
.skx-home-stage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.skx-home-stage-row>div{padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.035)}
.skx-home-stage-row span{display:block;color:#7992a4;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.skx-home-stage-row strong{display:block;margin-top:7px;color:#fff;font-family:var(--skx-font-display)!important;font-size:.9rem}
.skx-home-stage-note{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:16px 18px;border-radius:12px;background:rgba(6,231,249,.08);border:1px solid rgba(6,231,249,.14)}
.skx-home-stage-note>span{color:#5ce5ef;font-weight:800}
.skx-home-stage-note p{margin:0;color:#a9bac6;font-size:.84rem;line-height:1.55}

.skx-home-standard-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(60px,7vw,130px);
  align-items:start;
}
.skx-home-standard-copy{position:sticky;top:120px}
.skx-home-standard-copy .skx-section-title{max-width:700px!important}
.skx-home-standard-copy .skx-section-copy{max-width:520px!important}
.skx-home-text-link{display:inline-flex;margin-top:24px;color:#087d8c!important;font-family:var(--skx-font-display);font-weight:650}
.skx-home-standard-cards{grid-template-columns:1fr!important;margin-top:0!important;gap:14px!important}
.skx-home-standard-cards .skx-trust-card{padding:30px!important;border-radius:14px}
.skx-home-standard-cards .skx-trust-card strong{font-size:1.02rem}

.skx-home-cta{padding:clamp(94px,7vw,128px) 0!important}
.skx-home-cta .skx-cta-wrap{align-items:center!important}
.skx-home-cta .skx-cta-wrap>div{max-width:900px}
.skx-home-cta-kicker{display:block;margin-bottom:16px;color:#8df9ff;font-family:var(--skx-font-display);font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

@media(max-width:1100px){
  .skx-home-hero-grid{grid-template-columns:1fr;gap:48px;width:min(100% - 56px,1180px)!important}
  .skx-home-hero-copy h1{max-width:920px!important}
  .skx-home-discovery-panel{max-width:720px}
  .skx-home-skill-rail-inner{justify-content:flex-start}
  .skx-home-path-grid,.skx-home-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .skx-home-section-head--wide{grid-template-columns:1fr;gap:16px}
  .skx-home-section-head--wide .skx-section-copy{margin-top:0!important}
  .skx-home-model-grid,.skx-home-standard-grid{grid-template-columns:1fr!important}
  .skx-home-standard-copy{position:static}
  .skx-home-model-stage{min-height:0}
}

@media(max-width:760px){
  .skx-home-hero{padding:72px 0 68px!important;min-height:0}
  .skx-home-hero-grid{width:min(100% - 34px,1180px)!important;gap:36px}
  .skx-home-hero-copy h1{font-size:clamp(3.25rem,14.6vw,5.2rem)!important}
  .skx-home-discovery-panel{padding:26px 22px;border-radius:14px}
  .skx-home-skill-rail-inner{min-height:68px}
  .skx-home-section-head--action{display:block}
  .skx-home-outline-link{margin-top:24px}
  .skx-home-model-card.is-active{transform:none}
  .skx-home-model-stage{padding:20px}
}

@media(max-width:560px){
  .skx-home-paths,.skx-home-popular,.skx-home-standard,.skx-home-resources{padding:72px 0!important}
  .skx-home-path-grid,.skx-home-skill-grid{grid-template-columns:1fr!important;gap:14px!important}
  .skx-home-path-grid .skx-category-card{min-height:150px;padding:24px!important}
  .skx-home-skill-grid .skx-skill-card{min-height:160px!important;padding:24px!important}
  .skx-home-course-grid{grid-template-columns:1fr!important}
  .skx-home-course-grid .skx-course-cover{min-height:130px}
  .skx-home-model{padding:78px 0}
  .skx-home-model-card{grid-template-columns:42px 1fr;padding:20px;gap:14px}
  .skx-home-stage-top{display:block}.skx-home-stage-top strong{display:block;margin-top:8px}
  .skx-home-stage-row{grid-template-columns:1fr}
  .skx-home-standard-grid{gap:42px}
  .skx-home-cta{padding:78px 0!important}
}