/* ============================================================
   NickAcademy · Product roadmap page ("What's new / O que vem")
   Shared by whats-new-en.html and whats-new-pt.html
   Scroll animation lives in js/whats-new.js (GSAP + ScrollTrigger)

   Layout: full-width alternating bands. Every item is fully open,
   nothing hidden behind a click, so no one misses content because
   they did not realise a row was expandable.
   ============================================================ */

:root {
  --wn-or: #FF8C42;
  --wn-band: #F7FAFD;
  --wn-hair: #E8EEF6;
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.wn-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #06265C 0%, #0D47A1 45%, #1565C0 100%);
  color: #fff;
  padding: calc(var(--nav-height) + 104px) 32px 96px;
  isolation: isolate;
}
.wn-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: -1; }
.wn-orb-1 { width: 620px; height: 620px; background: #2196F3; opacity: .34; top: -260px; right: -160px; }
.wn-orb-2 { width: 420px; height: 420px; background: #FF8C42; opacity: .19; bottom: -180px; left: 4%; }
.wn-orb-3 { width: 340px; height: 340px; background: #7C4DFF; opacity: .20; top: 34%; left: 44%; }

.wn-in { max-width: 1240px; margin: 0 auto; position: relative; }

.wn-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .71rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  opacity: .8; margin-bottom: 30px;
}
.wn-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; flex: none; }

.wn-hero h1 {
  font-size: clamp(3rem, 8.4vw, 6.4rem);
  font-weight: 800; line-height: .98; letter-spacing: -.038em;
  margin-bottom: 32px; max-width: 13ch;
}
.wn-hero h1 em { font-style: normal; color: #FFC48C; }
/* words are wrapped by JS for the stagger reveal */
.wn-word { display: inline-block; overflow: hidden; vertical-align: top; }
.wn-word > span, .wn-word > em { display: inline-block; }

.wn-lead { font-size: 1.15rem; line-height: 1.75; max-width: 56ch; opacity: .88; }

.wn-meta {
  display: flex; gap: 34px; flex-wrap: wrap;
  margin-top: 52px; padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.wn-meta span {
  display: block; font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; opacity: .62; margin-bottom: 7px;
}
.wn-meta b { font-size: 1.15rem; font-weight: 800; }
.wn-meta b.hot { color: #FFC48C; }

/* ------------------------------------------------------------
   SECTION HEADING
   ------------------------------------------------------------ */
/* bottom padding matters: without it the intro paragraph sits flush against
   the next band's border and tint, which reads as cramped */
.wn-sec { padding: 96px 32px 60px; }
.wn-sec-in { max-width: 1240px; margin: 0 auto; }
.wn-kick {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .7rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 7px; margin-bottom: 18px;
}
.wn-sec.dated .wn-kick { background: #FFF0E2; color: #B8500A; }
.wn-sec.later .wn-kick { background: #EEF3F8; color: #66788F; }
.wn-sec h2 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 800; letter-spacing: -.03em; color: var(--ink);
  line-height: 1.08; margin-bottom: 14px;
}
.wn-sec-in > p { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.72; max-width: 62ch; }

/* ------------------------------------------------------------
   BANDS
   ------------------------------------------------------------ */
.wn-band { padding: 64px 32px; border-top: 1px solid var(--wn-hair); }
.wn-band.tint { background: var(--wn-band); }
.wn-band-in {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 96px 1fr 1.15fr; gap: 48px; align-items: start;
}
.wn-num { font-size: 3.3rem; font-weight: 800; line-height: .85; color: #DCE6F2; letter-spacing: -.05em; }
.wn-band.hot .wn-num { color: #FFD9BC; }

.wn-when {
  display: inline-block; font-size: .75rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 7px; margin-bottom: 16px;
}
.wn-band.hot .wn-when { background: var(--wn-or); color: #fff; }
.wn-band.cool .wn-when { background: #E9EFF6; color: #7C8DA5; }

.wn-band h3 {
  font-size: clamp(1.45rem, 2.7vw, 1.95rem);
  font-weight: 700; color: var(--ink); line-height: 1.22; letter-spacing: -.022em;
}
.wn-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.wn-tags span {
  font-size: .72rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 1px solid #E2EAF4; color: #66788F;
}
.wn-copy p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.82; }
.wn-copy p + p { margin-top: 16px; }
.wn-copy p:first-child { color: var(--ink); font-weight: 600; font-size: 1.08rem; }

/* ------------------------------------------------------------
   CTA + NOTE
   ------------------------------------------------------------ */
.wn-cta { padding: 0 32px; margin-top: 96px; }
.wn-cta-in {
  max-width: 1240px; margin: 0 auto; border-radius: 26px; padding: 72px 56px;
  background: linear-gradient(125deg, #0D47A1, #1E88E5 60%, #42A5F5);
  color: #fff; display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.wn-cta-in h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; margin-bottom: 12px; }
.wn-cta-in p { opacity: .9; line-height: 1.72; max-width: 50ch; }
.wn-cta-in .btn { background: #fff; color: var(--blue-deep); flex: none; }
.wn-cta-in .btn:hover { background: #FFEDD9; color: var(--blue-deep); }

.wn-note { max-width: 1240px; margin: 44px auto 0; padding: 0 32px 60px; color: #93A2B5; font-size: .78rem; line-height: 1.7; }

@media (max-width: 920px) {
  .wn-hero { padding: calc(var(--nav-height) + 62px) 20px 66px; }
  .wn-sec { padding: 64px 20px 40px; }
  .wn-band { padding: 44px 20px; }
  .wn-band-in { grid-template-columns: 1fr; gap: 20px; }
  .wn-num { font-size: 2.4rem; }
  .wn-cta { padding: 0 20px; margin-top: 64px; }
  .wn-cta-in { padding: 44px 26px; flex-direction: column; align-items: flex-start; }
  .wn-note { padding: 0 20px 48px; }
  .wn-meta { gap: 24px; margin-top: 38px; }
}

/* respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  .wn-orb { display: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}