.site-header nav a.active { color: var(--green); position: relative; }
.site-header nav a.active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: -12px; background: var(--green); }
.learn-hero { padding: 86px clamp(24px,8vw,120px) 78px; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(48px,9vw,140px); align-items: end; background: radial-gradient(circle at 12% 15%,rgba(132,56,232,.12),transparent 25%),radial-gradient(circle at 78% 80%,rgba(83,217,255,.16),transparent 30%),var(--paper); }
.learn-hero h1 { font-size: clamp(54px,6.4vw,92px); margin-bottom: 0; }
.learn-hero-copy > p { margin: 0; color: #475467; font-size: 18px; line-height: 1.75; max-width: 590px; }
.hub-stats { display: flex; gap: 44px; padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--line); }
.hub-stats span { display: grid; gap: 3px; }
.hub-stats b { font: 800 24px "Figtree",sans-serif; color: var(--green); }
.hub-stats small { color: var(--muted); font-size: 11px; font-weight: 700; }
.start-here { display: grid; grid-template-columns: .5fr 1.1fr 1.4fr; gap: clamp(34px,6vw,92px); align-items: center; padding: 66px clamp(24px,8vw,120px); background: linear-gradient(125deg,#082b78,#0757f8 57%,#7139d4); color: #fff; }
.start-mark { min-height: 180px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); background: radial-gradient(circle,rgba(83,217,255,.2),transparent 64%); }
.start-mark span { width: 86px; height: 100px; display: grid; place-items: center; clip-path: polygon(50% 0,100% 18%,91% 78%,50% 100%,9% 78%,0 18%); background: linear-gradient(145deg,#0757f8,#8438e8); font: 800 38px "Figtree",sans-serif; }
.start-here h2 { font-size: clamp(32px,3.4vw,48px); line-height: 1.13; margin: 22px 0 14px; }
.start-here > div:nth-child(2) > p:last-child { color: #cbd5e1; line-height: 1.7; margin-bottom: 0; }
.habit-list { list-style: none; padding: 0; margin: 0; }
.habit-list li { display: flex; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.16); }
.habit-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.habit-list li > b { color: #72ddff; font: 700 11px "Figtree",sans-serif; }
.habit-list span { display: grid; gap: 4px; }
.habit-list strong { font: 700 17px "Figtree",sans-serif; }
.habit-list small { color: #aebdd1; line-height: 1.45; }
.topic-section { padding: 105px clamp(24px,6vw,92px) 112px; }
.topic-heading { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9vw; align-items: end; margin-bottom: 58px; }
.topic-heading h2 { font-size: clamp(38px,4.2vw,58px); line-height: 1.12; margin: 24px 0 0; max-width: 760px; }
.topic-heading > p { color: var(--muted); line-height: 1.7; max-width: 500px; margin: 0; }
.topic-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.topic-card { min-height: 390px; display: flex; flex-direction: column; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; color: inherit; position: relative; transition: transform .2s ease,box-shadow .2s ease; }
.topic-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.topic-card:hover { z-index: 1; transform: translateY(-4px); box-shadow: 0 18px 42px rgba(16,24,40,.12); }
.topic-card:hover::before { transform: scaleX(1); }
.topic-card-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.topic-card-top small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; text-align: right; }
.topic-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--accent); background: var(--tint); font: 800 20px "Figtree",sans-serif; }
.topic-card h3 { font-size: 23px; margin: 44px 0 14px; }
.topic-card > p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }
.signal { margin-top: auto; padding-top: 24px; display: grid; gap: 7px; border-top: 1px solid var(--line); }
.signal b { color: var(--accent); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.signal span { color: #475467; font-size: 12px; line-height: 1.55; }
.topic-blue { --accent:#0757f8; --tint:#eef4ff; }.topic-violet { --accent:#8438e8; --tint:#f4edff; }.topic-red { --accent:#e2231a; --tint:#fff0ef; }.topic-cyan { --accent:#087e9c; --tint:#e9faff; }.topic-navy { --accent:#344054; --tint:#f2f4f7; }.topic-gold { --accent:#a15c00; --tint:#fff7e6; }
.resource-promo { margin: 0 clamp(24px,6vw,92px) 72px; padding: 58px clamp(28px,5vw,72px); display: flex; align-items: end; justify-content: space-between; gap: 50px; background: #f0f2f3; color: var(--ink); border: 1px solid #d9dee2; border-left: 6px solid #0757f8; }
.resource-promo .eyebrow { color: #0757f8; }
.resource-promo .eyebrow span { background: #0757f8; }
.resource-promo h2 { font-size: clamp(34px,4vw,52px); margin: 20px 0 12px; }
.resource-promo p:last-child { max-width: 690px; color: #475467; line-height: 1.7; margin-bottom: 0; }
.resource-promo > a { flex: 0 0 auto; min-width: 230px; padding: 17px 19px; display: flex; justify-content: space-between; align-items: center; background: #101828; color: #fff; font-size: 12px; font-weight: 800; }
.resource-promo > a:hover { background: #0757f8; }
.resource-promo > a b { font-size: 20px; }
.topic-icon-text { font-size: 12px; letter-spacing: -.25px; }
@media(max-width:900px){.learn-hero,.topic-heading{grid-template-columns:1fr}.start-here{grid-template-columns:.55fr 1.45fr}.habit-list{grid-column:1/-1}.topic-grid{grid-template-columns:1fr 1fr}.resource-promo{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){.learn-hero{padding:58px 20px}.learn-hero h1{font-size:46px}.hub-stats{gap:24px}.start-here{grid-template-columns:1fr;padding:60px 20px}.start-mark{min-height:150px}.habit-list{grid-column:auto}.topic-section{padding:72px 20px}.topic-heading{margin-bottom:38px}.topic-grid{grid-template-columns:1fr}.topic-card{min-height:350px;padding:26px}.resource-promo{margin:0 20px 70px;padding:42px 26px}.resource-promo>a{width:100%}}