.home-page { background: #fff; overflow-x: hidden; }
.hero { background-color: #f9fdff; background-image: radial-gradient(circle at 41% 8%,rgba(182,232,250,.7),transparent 32%),repeating-radial-gradient(ellipse at 25% 33%,transparent 0 24px,rgba(41,122,162,.045) 25px 26px); min-height: calc(100vh - 88px); overflow: hidden; position: relative; }
.hero-inner { display: grid; grid-template-columns: minmax(390px,430px) minmax(630px,780px); gap: 38px; margin: 0 auto; max-width: 1536px; min-height: 820px; padding: 118px 60px 155px 88px; position: relative; z-index: 2; }
.hero-copy { padding-top: 64px; }
.hero-copy h1 { color: #02040b; font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.035em; line-height: .93; }
.hero-copy h1 span { color: var(--color-orange-500); }
.hero-copy p { color: #071c5c; font-size: 1.23rem; line-height: 1.55; margin-top: 30px; max-width: 400px; }
.hero-actions { align-items: center; display: flex; gap: 29px; margin-top: 38px; }
.mission-btn { border-radius: 999px; font-size: 1.05rem; min-height: 60px; padding: 0 24px; }
.mission-btn svg,.platform-link svg { height: 21px; width: 21px; }
.platform-link { align-items: center; color: #008180; display: flex; font-weight: 700; gap: 10px; white-space: nowrap; }
.hero-stage { min-height: 630px; position: relative; }
.academy-mockup { background: rgba(255,255,255,.94); border: 12px solid rgba(255,255,255,.9); border-radius: 20px; box-shadow: var(--shadow-card); height: 580px; left: 6px; overflow: hidden; position: absolute; top: 12px; transform: rotate(3deg); width: 730px; }
.mockup-columns { display: grid; grid-template-columns: .92fr 1.14fr 1fr; height: 522px; }
.mock-col { border: 1px solid #e8ebef; padding: 18px 13px; position: relative; }
.mock-col h3 { align-items: center; display: flex; font-family: var(--font-body); font-size: .84rem; gap: 6px; margin-bottom: 16px; white-space: nowrap; }
.mock-col h3 span { color: #002064; font-size: 1.1rem; }
.instruction-box { border: 1px solid #edf0f3; border-radius: 8px; color: #16203c; font-size: .7rem; line-height: 1.4; min-height: 148px; padding: 11px; }
.instructions-col > small { bottom: 68px; color: #657291; font-size: .62rem; left: 14px; position: absolute; }
.tool-row { align-items: center; display: grid; font-size: .65rem; grid-template-columns: 29px 1fr auto; margin: 0 -2px 7px; min-height: 57px; padding: 7px 5px; }
.tool-row b { align-items: center; border: 1px solid #d9dee6; border-radius: 50%; display: flex; font-size: .67rem; height: 27px; justify-content: center; width: 27px; }
.tool-row span { padding-left: 7px; }
.tool-row small { color: #6a7191; display: block; margin-top: 3px; }
.tool-row.active { background: linear-gradient(135deg,#ff5b0b,#f34200); border-radius: 7px; box-shadow: 0 7px 12px rgba(255,75,10,.24); color: #fff; transform: translateX(-2px); }
.tool-row.active b { background: #fff; border: 0; color: var(--color-orange-500); }
.tool-row.active small { color: #fff; }
.tool-row i { background: #fff; color: #e52d17; font-size: .5rem; font-style: normal; padding: 3px; transform: rotate(8deg); }
.mock-chat-msg { background: #f1f6f9; border-radius: 8px; font-size: .66rem; line-height: 1.45; margin-left: 9px; padding: 12px; width: 146px; }
.mock-avatar { position: absolute; right: 9px; top: 107px; }
.mock-pdf { align-items: center; background: #fff; border: 1px solid #e1e4e9; box-shadow: 0 8px 14px rgba(7,17,47,.14); display: flex; flex-direction: column; font-size: .62rem; gap: 12px; height: 96px; justify-content: center; left: 20px; position: absolute; top: 185px; transform: rotate(-2deg); width: 116px; }
.mock-pdf b { background: #f22; color: #fff; padding: 5px 3px; }
.hidden-glyphs { bottom: 22px; color: #31508a; font-size: .71rem; letter-spacing: 9px; line-height: 1.7; opacity: .68; position: absolute; right: 5px; transform: rotate(-7deg); }
.mock-input { align-items: center; bottom: 10px; color: #8791ae; display: flex; font-size: .65rem; height: 38px; justify-content: flex-end; padding-right: 13px; position: absolute; right: 12px; width: 210px; }
.mock-input span { align-items: center; background: #007c82; border-radius: 5px; color: #fff; display: flex; height: 32px; justify-content: center; margin-left: 15px; width: 32px; }
.mock-alert { align-items: center; background: linear-gradient(105deg,#ff4810,#ff2f20); border-radius: 12px; box-shadow: 0 18px 28px -14px rgba(218,47,13,.7); color: #fff; display: grid; gap: 13px; grid-template-columns: 45px 1fr auto; left: -8px; min-height: 106px; padding: 15px 17px; position: absolute; top: 335px; transform: rotate(5deg); width: 570px; z-index: 4; }
.eye-off { font-size: 2rem; }
.mock-alert strong { display: block; font-family: var(--font-heading); font-size: 1.42rem; }
.mock-alert small { display: block; font-size: .85rem; margin-top: 5px; }
.mock-alert a { align-items: center; background: #fff; border-radius: 9px; color: var(--color-navy-900); display: flex; font-size: .87rem; font-weight: 700; gap: 14px; min-height: 60px; padding: 0 15px; white-space: nowrap; }
.mock-alert a span { font-size: 1.6rem; }
.magnifier { align-items: center; background: rgba(255,255,255,.87); border: 6px solid #fff; border-radius: 50%; bottom: 56px; box-shadow: 0 8px 18px rgba(7,17,47,.3),inset 0 0 0 2px #9ba3ae; color: #758099; display: flex; height: 155px; justify-content: center; left: 166px; position: absolute; transform: rotate(-6deg); width: 155px; z-index: 5; }
.magnifier code { font-size: .72rem; line-height: 1.55; }
.coach-bubble.floating { bottom: -70px; max-width: 284px; position: absolute; right: 25px; width: 284px; z-index: 6; }
.coach-bubble.floating::before { border-bottom: 13px solid transparent; border-right: 14px solid #fff; border-top: 13px solid transparent; content:""; left: -14px; position:absolute; top:24px; }
.tech-net { background-image: linear-gradient(30deg,transparent 46%,rgba(85,181,220,.16) 47% 48%,transparent 49%),linear-gradient(150deg,transparent 46%,rgba(85,181,220,.14) 47% 48%,transparent 49%); background-size: 64px 64px; height: 250px; opacity: .65; pointer-events:none; position:absolute; width:260px; }
.tech-net-one { left: 340px; top: 0; }
.tech-net-two { bottom: 80px; left: 430px; }
.orange-wave { background: linear-gradient(90deg,#ff4b06,#ff3500 62%,#ff4b06); border-radius: 50% 50% 0 0 / 100% 100% 0 0; bottom: -108px; height: 220px; left: -5%; position: absolute; transform: rotate(1deg); width: 110%; z-index: 1; }
.orange-wave::after { border-top: 1px solid rgba(255,255,255,.3); border-radius: 50%; content:""; inset: 25px 0 auto; height: 80px; position:absolute; }
.learning-path-container { max-width:1400px; }
.learning-path-header { padding:var(--space-7) 0 var(--space-5); }
.learning-groups { padding-bottom:70px; }
.learning-group { position:relative; }
.learning-group + .learning-group { margin-top:42px; }
.learning-group + .learning-group::before { background-image:radial-gradient(circle,rgba(57,152,196,.28) 1px,transparent 1.5px); background-size:10px 10px; content:""; height:58px; left:0; mask-image:linear-gradient(90deg,transparent,#000 18%,transparent 38%,transparent 62%,#000 82%,transparent); opacity:.58; pointer-events:none; position:absolute; right:0; top:-50px; }
.learning-group-label { align-items:center; color:var(--color-orange-500); display:flex; font-family:var(--font-body); font-size:.82rem; font-style:normal; font-weight:700; gap:8px; letter-spacing:.085em; margin-bottom:14px; position:relative; text-transform:uppercase; }
.learning-group-label::after { background:var(--color-orange-500); border-radius:99px; bottom:-8px; content:""; height:3px; left:0; position:absolute; width:31px; }
.learning-group-label i { font-style:normal; opacity:.65; }
.learning-group-band { background:linear-gradient(110deg,rgba(237,249,255,.72),rgba(255,255,255,.72)); border:1px solid rgba(198,218,230,.58); border-radius:22px; padding:14px; }
.topic-grid { display:grid; gap:16px; grid-auto-rows:286px; grid-template-columns:repeat(5,minmax(0,1fr)); }
.topic-card { background:#fff; border:1px solid var(--color-border); border-radius:13px; display:flex; flex-direction:column; gap:14px; height:100%; padding:22px; }
.topic-card:hover { box-shadow:var(--shadow-panel); transform:translateY(-2px); }
.topic-card.is-locked { background:rgba(255,255,255,.72); }
.topic-card h3 { font-size:1.45rem; }
.topic-card p { color:var(--color-navy-500); line-height:1.45; }
.topic-status { align-self:flex-start; }
.topic-action { align-self:flex-start; margin-top:auto; }

@media (max-width:1100px) {
  .hero-inner { grid-template-columns: .7fr 1fr; padding-left:40px; padding-right:30px; }
  .hero-stage { transform:scale(.82); transform-origin:left center; width:690px; }
  .topic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:850px) {
  .hero-inner { display:block; min-height:1200px; padding:54px 20px 140px; }
  .hero-copy { padding:0; position:relative; z-index:4; }
  .hero-copy h1 { font-size:clamp(3.4rem,14vw,5rem); }
  .hero-stage { margin:60px auto 0; transform:scale(.88); transform-origin:top left; }
}
@media (max-width:620px) {
  .hero { min-height:1050px; }
  .hero-inner { min-height:1050px; }
  .hero-copy p { font-size:1.05rem; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }
  .hero-stage { margin-top:45px; transform:scale(.48); width:730px; }
  .coach-bubble.floating { bottom:-40px; }
  .learning-path-header { padding-top:var(--space-6); }
  .learning-group + .learning-group { margin-top:34px; }
  .learning-group-band { border-radius:16px; padding:10px; }
  .topic-grid { grid-auto-rows:286px; grid-template-columns:1fr; }
}