/* Nelavista landing page: sections beyond the shared design system in main.css.
   Reuses main.css's tokens (colors, radius, shadow, ease) so nothing here invents a
   second visual language; it only adds the section layouts specific to the marketing
   page (pillars, skills grid, journey, opportunities, campus, why, hero product visual). */

.section-head { max-width: 640px; margin: 0 0 56px; }
.section-desc { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); margin-top: 16px; }
.campus-layout .section-desc, .why-copy { max-width: 560px; }

/* ─── HERO EXTRAS ─── */
.hero-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  margin: -12px 0 40px;
}

.hero-visual { width: 100%; max-width: 1040px; margin: 0 auto 44px; text-align: left; }
.hv-frame {
  border: 1px solid var(--border-hard);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.hv-titlebar {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-hard);
  background: var(--bg-elevated);
}
.hv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-hard); }
.hv-titlebar-label { margin-left: 10px; font-size: 0.7rem; color: var(--text-muted); }
.hv-body { display: grid; grid-template-columns: 176px 1fr; }
.hv-sidebar {
  border-right: 1px solid var(--border-hard);
  background: var(--bg-surface);
  padding: 16px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.hv-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 0.78rem; color: var(--text-muted);
}
.hv-side-item i { font-size: 1rem; width: 18px; text-align: center; }
.hv-side-item.active { background: rgba(56,189,248,0.1); color: var(--accent); font-weight: 600; }
.hv-main { padding: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: start; }
.hv-card-wide { grid-column: 1 / -1; }
.hv-card { background: var(--bg-surface); border: 1px solid var(--border-hard); border-radius: var(--r-md); padding: 16px; }
.hv-card-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: 12px;
}
.hv-card-head i { color: var(--accent); font-size: 0.9rem; }
.hv-chat-line { font-size: 0.8rem; line-height: 1.5; padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 8px; max-width: 88%; }
.hv-chat-user { background: rgba(56,189,248,0.12); margin-left: auto; color: var(--text-primary); }
.hv-chat-reply { background: var(--bg-card); color: var(--text-secondary); margin-bottom: 0; }
.hv-skill-name { font-size: 0.88rem; font-weight: 600; margin-bottom: 8px; }
.hv-progress-track { height: 6px; border-radius: 4px; background: var(--border-hard); overflow: hidden; margin-bottom: 8px; }
.hv-progress-fill { height: 100%; background: var(--grad-teal); border-radius: 4px; }
.hv-card-meta { font-size: 0.68rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.hv-card-big { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 4px; }

@media (max-width: 720px) {
  .hv-body { grid-template-columns: 1fr; }
  .hv-sidebar { display: none; }
  .hv-main { grid-template-columns: 1fr; padding: 16px; }
}

/* ─── PILLARS ─── */
.pillars-section { padding: 100px 0; }
.pillars-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-hard);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.4s ease, transform 0.4s var(--ease);
  animation: pillar-unbend 8s var(--ease-in-out, ease-in-out) infinite;
  transform-origin: center bottom;
}
.pillar-card:hover { border-color: rgba(56,189,248,0.3); transform: translateY(-4px); }
.pillar-card:nth-child(2) { animation-delay: 2s; }
.pillar-card:nth-child(3) { animation-delay: 4s; }
.pillar-card:nth-child(4) { animation-delay: 6s; }
@keyframes pillar-unbend {
  0%, 16%, 100% { transform: perspective(1000px) rotateX(0) rotateY(0) translateY(0); }
  5%, 11% { transform: perspective(1000px) rotateX(7deg) rotateY(-2deg) translateY(7px); }
}
.pillar-num {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.pillar-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
.pillar-card p { font-size: 0.88rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: 20px; }
.pillar-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pillar-list li {
  font-size: 0.8rem; color: var(--text-muted); padding-left: 16px; position: relative;
}
.pillar-list li::before {
  content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 1.5px; background: var(--text-muted);
}

/* ─── SKILLS MAJOR SECTION (centered intro → glass tab bar → curved card stage → CTA) ───
   The tab bar and the arc of cards are rendered by static/js/landing-skills.js from the
   #skills-data config; JS only writes --cx/--cy/--crz/--cry/--cs/--co/--cz onto each card,
   so every movement stays transform + opacity (GPU-friendly). */
.skills-major-section { padding: 110px 0 118px; background: var(--bg-surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.skills-intro { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.skills-intro .section-desc { max-width: 640px; margin: 16px auto 0; }

/* Glass pill bar: sized to its content, centred, scrolls sideways on small screens. */
.skills-tabs-wrap { display: flex; justify-content: center; margin-bottom: 44px; }
.skills-tablist {
  position: relative; display: inline-flex; align-items: center; gap: 2px; max-width: 100%;
  padding: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity;
  border: 1px solid var(--border-hard); border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 64%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 14px 34px rgba(4, 8, 18, .16), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.skills-tablist::-webkit-scrollbar { display: none; }
.skills-tab-pill {
  position: absolute; top: 6px; left: 0; z-index: 0; height: calc(100% - 12px); width: 0;
  border: 1px solid color-mix(in srgb, var(--text-primary) 18%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 12%, transparent);
  box-shadow: 0 6px 18px rgba(4, 8, 18, .18);
  transform: translate3d(0, 0, 0);
  transition: transform 0.5s var(--ease), width 0.5s var(--ease);
  will-change: transform, width; pointer-events: none;
}
.skills-tab {
  position: relative; z-index: 1; flex: 0 0 auto; scroll-snap-align: center;
  display: inline-flex; align-items: baseline; gap: 7px; padding: 10px 16px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--text-secondary); font-size: 0.87rem; font-weight: 600; white-space: nowrap;
  transition: color 0.3s ease;
}
.skills-tab[aria-selected="true"] { color: var(--text-primary); font-weight: 700; }
.skills-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.skills-tab-count { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 500; }
.skills-tab[aria-selected="true"] .skills-tab-count { color: var(--text-secondary); }

/* Curved card stage: JS places every card on a convex arc through the custom props below. */
.skills-stage { position: relative; height: clamp(460px, 38vw, 540px); max-width: 1080px; margin: 0 auto; perspective: 1500px; }
.skills-card {
  position: absolute; top: 50%; left: 50%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  width: clamp(240px, 23vw, 268px); height: 372px; padding: 26px 24px; overflow: hidden;
  color: #fff; text-align: left; border: 1px solid rgba(255, 255, 255, .22); border-radius: 30px;
  background-color: #10234d;
  /* 1) scrim so the heading stays readable, 2) the tab's photo, 3) the category
     gradient as fallback when no image is configured */
  background-image: linear-gradient(160deg, rgba(6, 11, 24, .30) 0%, rgba(5, 9, 18, .58) 55%, rgba(4, 7, 15, .88) 100%), var(--card-photo, none), var(--card-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -70px 90px rgba(4, 8, 18, .32), 0 26px 60px rgba(4, 8, 18, .3);
  transform: translate3d(calc(-50% + var(--cx, 0px)), calc(-50% + var(--cy, 0px)), 0) rotate(var(--crz, 0deg)) rotateY(var(--cry, 0deg)) scale(var(--cs, 1));
  opacity: var(--co, 1);
  z-index: var(--cz, 1);
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
  transition-delay: var(--tdel, 0ms);
  will-change: transform, opacity;
}
.skills-card.is-offscreen { pointer-events: none; }
.skills-card-cat { color: rgba(255, 255, 255, .82); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; }
.skills-card-body { display: flex; flex-direction: column; }
.skills-card-title { margin: 0 0 12px; color: #fff; font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.3rem, 1.9vw, 1.58rem); font-weight: 800; line-height: 1.14; letter-spacing: -0.015em; text-shadow: 0 2px 14px rgba(0, 0, 0, .3); overflow-wrap: anywhere; }
.skills-card-topics { color: rgba(255, 255, 255, .84); font-size: 0.78rem; font-weight: 500; }
.skills-cta { text-align: center; margin-top: 46px; }
@media (max-width: 760px) {
  .skills-major-section { padding: 84px 0 92px; }
  .skills-tabs-wrap { justify-content: flex-start; margin-bottom: 34px; }
  .skills-tablist { width: 100%; }
  .skills-card { width: min(72vw, 252px); height: 356px; padding: 22px 20px; border-radius: 26px; }
  .skills-card-title { font-size: 1.3rem; }
  .skills-cta { margin-top: 34px; }
}

/* ─── JOURNEY ─── */
.journey-section { padding: 100px 0; }
.journey-track {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px;
}
.journey-track li {
  background: var(--bg-card);
  border: 1px solid var(--border-hard);
  border-radius: var(--r-pill);
  padding: 14px 24px;
  font-size: 0.86rem; font-weight: 600;
  white-space: nowrap;
}
.journey-track li:not(:first-child) { position: relative; margin-left: 20px; }
.journey-track li:not(:first-child)::before {
  content: '→';
  position: absolute; left: -24px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 0.9rem;
}
@media (max-width: 640px) {
  .journey-track { flex-direction: column; align-items: stretch; }
  .journey-track li { text-align: center; }
  .journey-track li:not(:first-child) { margin-left: 0; margin-top: 20px; }
  .journey-track li:not(:first-child)::before { content: '↓'; left: 50%; top: -22px; transform: translateX(-50%); }
}

/* ─── OPPORTUNITIES ─── */
.opportunities-section { padding: 100px 0; }
.opp-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.opp-cta { margin-top: 26px; }
.opp-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.opp-type {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border-hard); border-radius: var(--r-md);
  padding: 18px 16px; font-size: 0.82rem; font-weight: 600;
}
.opp-type i { font-size: 1.3rem; color: var(--accent); }

/* ─── CAMPUS ─── */
.campus-section { padding: 100px 0; }
.campus-layout { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.campus-count { margin-top: 22px; font-size: 0.76rem; color: var(--accent-teal); }
.campus-visual {
  position: relative; height: 280px;
  background: var(--bg-card); border: 1px solid var(--border-hard); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-card);
}
.campus-visual iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.82) contrast(1.05); }
.campus-map-link {
  position: absolute; right: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 11px; border: 1px solid var(--border-hard); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg-elevated) 92%, transparent); color: var(--text-primary);
  font-size: .68rem; text-decoration: none; box-shadow: var(--shadow-card);
}
.campus-map-link:hover { color: var(--accent); border-color: var(--accent); }

/* ─── WHY NELAVISTA ─── */
.why-section { padding: 100px 0; }
.why-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
.why-copy { font-size: 0.98rem; line-height: 1.75; color: var(--text-secondary); margin-bottom: 16px; }

/* ─── RESPONSIVE ─── */
@media (min-width: 640px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .opp-types { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .pillars-grid { grid-template-columns: repeat(4, 1fr); }
  .opp-layout { grid-template-columns: 1.1fr 1fr; }
  .campus-layout { grid-template-columns: 1fr 1fr; }
  .why-layout { grid-template-columns: 0.8fr 1.2fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pillar-card { transition: none; animation: none; }
}

/* Image-led landing page sections. */
.hero-section {
  isolation: isolate;
  min-height: 100svh;
  margin-top: 0;
  padding: calc(var(--nav-h, 84px) + 40px) 24px 64px;
  justify-content: flex-start;
  background: #071126;
}
.hero-background { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero-section::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 12, 30, .88) 0%, rgba(4, 12, 30, .62) 48%, rgba(4, 12, 30, .18) 100%), linear-gradient(0deg, rgba(4, 12, 30, .58), transparent 55%); }
.hero-container { align-items: flex-start; text-align: left; max-width: 1080px; margin: auto; }
.hero-headline { max-width: 850px; margin: 0 0 20px; color: #fff; font-size: clamp(2.8rem, 7vw, 5.8rem); line-height: 1.02; text-wrap: balance; }
.hero-sub { max-width: 600px; margin: 0 0 28px; color: rgba(255,255,255,.9); font-size: clamp(1.1rem, 2vw, 1.3rem); }
.hero-actions { align-items: flex-start; max-width: 340px; margin: 0 0 20px; }
.hero-actions .btn-primary { width: auto; min-width: 230px; }
.hero-actions .btn-explore { justify-content: center; color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.66); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .28s ease, color .28s ease, background-color .28s ease, border-color .28s ease, box-shadow .28s ease; }
.hero-actions .btn-explore:hover { color: #fff; background: linear-gradient(135deg,rgba(21,53,168,.96),rgba(36,77,190,.9)); border-color: rgba(255,255,255,.9); box-shadow: 0 12px 30px rgba(7,20,63,.34), inset 0 1px 0 rgba(255,255,255,.32); transform: translateY(-3px); }
.hero-actions .btn-explore i { transition: transform .28s ease; }
.hero-actions .btn-explore:hover i { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .hero-actions .btn-explore, .hero-actions .btn-explore i { transition: none; } }
.hero-login { color: rgba(255,255,255,.9); font-size: .92rem; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hero-login:hover { color: #fff; }
.hero-support { margin: 0 0 7px; color: #fff; font-weight: 600; font-size: 1rem; }
.hero-note { margin: 0 0 22px; color: rgba(255,255,255,.75); font: 500 .76rem 'JetBrains Mono', monospace; }
.hero-login-line { margin: 0; color: rgba(255,255,255,.88); font-size: .92rem; }
.hero-badge { position: absolute; right: clamp(24px, 3.2vw, 48px); bottom: clamp(24px, 4vh, 48px); z-index: 2; width: clamp(140px, 11vw, 170px); aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(9,20,48,.32); -webkit-backdrop-filter: blur(14px) saturate(125%); backdrop-filter: blur(14px) saturate(125%); box-shadow: 0 0 0 5px rgba(255,255,255,.05), 0 16px 48px rgba(4,11,29,.28), inset 0 1px 0 rgba(255,255,255,.3); pointer-events: none; isolation: isolate; }
.hero-badge::before { position: absolute; inset: 5px; content: ''; border: 1px solid rgba(255,255,255,.16); border-radius: inherit; box-shadow: 0 0 18px rgba(101,145,255,.12); }
.hero-badge-state { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; opacity: 0; transform: translate3d(-50%,-50%,0) scale(.88) rotate(-7deg); animation-duration: 8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: transform, opacity; }
.hero-badge-state-a { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1) rotate(0); animation-name: hero-badge-state-a; }
.hero-badge-state-b { animation-name: hero-badge-state-b; }
.hero-badge:not(.is-active) .hero-badge-state, .hero-badge:not(.is-active) .hero-badge-curved-text, .hero-badge:not(.is-active) .hero-badge-emblem, .hero-badge:not(.is-active) .hero-badge-eye { animation-play-state: paused; }
.hero-badge-curved-text { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-box: view-box; transform-origin: center; animation: hero-badge-orbit 16s linear infinite; }
.hero-badge-curved-b { animation-direction: reverse; }
.hero-badge-curved-text text { fill: rgba(255,255,255,.96); font-family: 'DM Sans', sans-serif; font-size: 7.5px; font-weight: 700; letter-spacing: 1.05px; }
.hero-badge-emblem { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 42%; height: 42%; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(255,255,255,.17); box-shadow: 0 5px 20px rgba(4,14,40,.18), inset 0 1px 0 rgba(255,255,255,.36); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); transform: translate3d(-50%,-50%,0); }
.hero-badge-smile { animation: hero-badge-bounce 2.8s ease-in-out infinite; }
.hero-badge-smile svg { display: block; width: 100%; height: 100%; padding: 3px; }
.hero-badge-eye { transform-box: fill-box; transform-origin: center; animation: hero-badge-blink 5s ease-in-out infinite; }
.hero-badge-globe { font-size: clamp(36px, 4vw, 56px); line-height: 1; animation: hero-badge-pulse 3s ease-in-out infinite; }
@keyframes hero-badge-state-a { 0%,43.75%,100% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1) rotate(0); } 50%,93.75% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.88) rotate(7deg); } }
@keyframes hero-badge-state-b { 0%,43.75%,100% { opacity: 0; transform: translate3d(-50%,-50%,0) scale(.88) rotate(-7deg); } 50%,93.75% { opacity: 1; transform: translate3d(-50%,-50%,0) scale(1) rotate(0); } }
@keyframes hero-badge-orbit { to { transform: rotate(360deg); } }
@keyframes hero-badge-bounce { 0%,100% { transform: translate3d(-50%,-50%,0) translateY(0); } 50% { transform: translate3d(-50%,-50%,0) translateY(-3px); } }
@keyframes hero-badge-blink { 0%,44%,48%,100% { transform: scaleY(1); } 46% { transform: scaleY(.12); } }
@keyframes hero-badge-pulse { 0%,100% { transform: translate3d(-50%,-50%,0) scale(1); } 50% { transform: translate3d(-50%,-50%,0) scale(1.08); } }
@media (max-width: 680px) {
  .hero-badge { right: 20px; bottom: 20px; width: clamp(96px, 18vw, 112px); }
  .hero-badge-curved-text text { font-size: 7.2px; letter-spacing: .9px; }
  .hero-badge-globe { font-size: 36px; }
}
@media (max-width: 360px) { .hero-badge { right: 16px; bottom: 16px; width: 88px; } .hero-badge-curved-text text { font-size: 6.8px; letter-spacing: .7px; } .hero-badge-globe { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-badge-state, .hero-badge-curved-text, .hero-badge-emblem, .hero-badge-eye { animation: none !important; }
  .hero-badge-state-a { display: block; opacity: 1; transform: translate3d(-50%,-50%,0); }
  .hero-badge-state-b { display: none; }
}

/* The post-founder CTA gets its own full-bleed photo backdrop. */
.cta-card { background: #0a1735; }
.cta-background { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.cta-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,13,32,.84), rgba(5,13,32,.56)), linear-gradient(0deg, rgba(5,13,32,.64), rgba(5,13,32,.12)); pointer-events: none; }
.cta-title, .cta-desc, .cta-note, .cta-login { color: #fff; }
.cta-login a { color: #dce9ff; text-decoration: underline; text-underline-offset: 4px; }

/* Four image cards pin in sequence and layer over the previous card while scrolling. */
.pillars-section { padding: 100px 0 16vh; }
.pillars-grid { display: block; position: relative; padding-bottom: 5vh; }
.pillar-card { position: sticky; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(520px, 68vh); margin: 0 0 27vh; padding: clamp(26px, 5vw, 52px); overflow: hidden; isolation: isolate; color: #fff; border: 1px solid rgba(255,255,255,.24); border-radius: 28px; background: #10234d; box-shadow: 0 24px 60px rgba(5,12,28,.28); transform-origin: center top; animation: none; transition: none; }
.pillar-card:nth-child(1) { top: 92px; z-index: 1; }
.pillar-card:nth-child(2) { top: 108px; z-index: 2; }
.pillar-card:nth-child(3) { top: 124px; z-index: 3; }
.pillar-card:nth-child(4) { top: 140px; z-index: 4; margin-bottom: 0; }
.pillar-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pillar-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5,13,32,.92), rgba(5,13,32,.58) 58%, rgba(5,13,32,.22)), linear-gradient(0deg, rgba(5,13,32,.32), transparent 70%); }
.pillar-card:nth-child(n) h3, .pillar-card:nth-child(n) p, .pillar-card:nth-child(n) .pillar-list li { color: #fff; }
.pillar-card:nth-child(n) p { max-width: 620px; color: rgba(255,255,255,.86); }
.pillar-card:nth-child(n) .pillar-num { color: #c5dcff; }
.pillar-card:nth-child(n) .pillar-list li { color: rgba(255,255,255,.86); }
.pillar-card:nth-child(n) .pillar-list li::before { background: #d6e6ff; }
.pillar-card:nth-child(1) { filter: brightness(.82); }
.pillar-card:nth-child(2) { filter: brightness(.88); }
.pillar-card:nth-child(3) { filter: brightness(.94); }
.pillar-card:nth-child(4) { filter: brightness(1); }
.pillar-card:hover { transform: none; border-color: rgba(255,255,255,.24); }

/* The live map fills the campus section behind its glass copy and curved stats loop. */
.campus-section { position: relative; min-height: 790px; padding: 0; overflow: hidden; isolation: isolate; background: #193662; }
.campus-map-background { position: absolute; inset: 0; z-index: -2; }
.campus-map-background iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.86) contrast(1.04); }
.campus-section::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,14,31,.46), rgba(5,14,31,.08) 55%, rgba(5,14,31,.52)); pointer-events: none; }
.campus-content { position: relative; min-height: 790px; display: flex; flex-direction: column; align-items: center; padding: 46px 22px 94px; }
.campus-glass { width: min(720px, 100%); padding: 27px 32px; text-align: center; color: #fff; border: 1px solid rgba(255,255,255,.38); border-radius: 24px; background: rgba(12,25,48,.42); box-shadow: 0 18px 60px rgba(5,12,28,.15); backdrop-filter: blur(15px); }
.campus-glass .section-label, .campus-glass .section-title, .campus-glass p { color: #fff; }
.campus-glass .section-title { margin: 9px 0 12px; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.campus-glass p { margin: 0 auto; max-width: 630px; line-height: 1.65; color: rgba(255,255,255,.88); }
.campus-glass .campus-count { margin-top: 13px; font-size: .76rem; }
.campus-carousel { position: absolute; left: -5%; right: -5%; bottom: 89px; overflow: hidden; transform: rotate(-3deg); }
.campus-stats-track { display: flex; width: max-content; animation: campusStatsLoop 28s linear infinite; }
.campus-stat-set { display: flex; flex: 0 0 auto; gap: 16px; padding: 10px 8px; }
.campus-stat { min-width: 190px; display: flex; align-items: center; gap: 11px; padding: 9px 16px; color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(10,27,55,.52); backdrop-filter: blur(12px); }
.campus-stat strong { font-size: 1.2rem; font-weight: 800; white-space: nowrap; }
.campus-stat > span { font-size: .76rem; color: rgba(255,255,255,.84); white-space: nowrap; }
.campus-stat:nth-child(1) { transform: translateY(12px); }
.campus-stat:nth-child(2) { transform: translateY(1px); }
.campus-stat:nth-child(3) { transform: translateY(-10px); }
@keyframes campusStatsLoop { to { transform: translateX(-50%); } }
.campus-map-link { right: 22px; bottom: 20px; color: #fff; border-color: rgba(255,255,255,.32); background: rgba(10,27,55,.56); box-shadow: none; backdrop-filter: blur(12px); }
.campus-map-link:hover { color: #fff; border-color: rgba(255,255,255,.6); }

/* Avoid pointer-driven hover treatment on the platform cards. */
.feature-card, .feature-card:hover { transform: none; }
.feature-card::before { display: none; }

@media (max-width: 720px) {
  .hero-section { min-height: 100svh; padding: calc(var(--nav-h, 84px) + 28px) 20px 48px; }
  .hero-background { object-position: 58% center; }
  .hero-section::before { background: linear-gradient(90deg, rgba(4,12,30,.82), rgba(4,12,30,.38)), linear-gradient(0deg, rgba(4,12,30,.6), transparent 70%); }
  .hero-headline { font-size: clamp(2.7rem, 12vw, 4.2rem); }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn-primary { width: 100%; }
  .hero-login { text-align: center; }
  .pillar-card { min-height: 520px; margin-bottom: 22vh; border-radius: 22px; }
  .pillar-card:nth-child(1) { top: 78px; }
  .pillar-card:nth-child(2) { top: 92px; }
  .pillar-card:nth-child(3) { top: 106px; }
  .pillar-card:nth-child(4) { top: 120px; }
  .campus-section, .campus-content { min-height: 720px; }
  .campus-content { padding: 30px 16px 90px; }
  .campus-glass { padding: 23px 20px; }
  .campus-carousel { bottom: 100px; }
  .campus-stat { min-width: 162px; padding: 8px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .campus-stats-track { animation: none; }
  .campus-carousel { transform: none; }
}

/* The Idea: two opposing, looping learning paths crossing like open scissors. */
.journey-section { padding: 110px 0; overflow: hidden; }
.idea-layout { display: grid; grid-template-columns: minmax(270px, .88fr) minmax(0, 1.35fr); align-items: center; gap: clamp(38px, 6vw, 88px); }
.idea-copy .section-title { max-width: 480px; margin: 12px 0 18px; }
.idea-copy .section-desc { max-width: 530px; margin: 0; }
.idea-crossing { position: relative; min-width: 0; height: 360px; overflow: hidden; isolation: isolate; mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.idea-strip { position: absolute; top: calc(50% - 26px); left: -9%; width: 135%; overflow: hidden; }
.idea-strip-a { z-index: 2; transform: rotate(-12deg); }
.idea-strip-b { z-index: 1; opacity: .58; filter: blur(.35px); transform: rotate(12deg); }
.idea-marquee { display: flex; width: max-content; will-change: transform; }
.idea-marquee-left { animation: idea-marquee-left 38s linear infinite; }
.idea-marquee-right { animation: idea-marquee-right 38s linear infinite; }
.idea-sequence { display: flex; flex: 0 0 auto; align-items: center; gap: 11px; list-style: none; margin: 0; padding: 9px 11px 9px 0; }
.idea-chip { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; padding: 10px 14px; color: var(--text-primary); background: color-mix(in srgb, var(--bg-surface) 88%, transparent); border: 1px solid var(--border-hard); border-radius: 999px; box-shadow: 0 8px 22px rgba(7, 18, 40, .1); font-size: .82rem; font-weight: 650; white-space: nowrap; }
.idea-chip > span { color: var(--accent); font: 600 .66rem 'JetBrains Mono', monospace; }
.idea-chip-payoff { color: #fff; border-color: #1535a8; background: #1535a8; }
.idea-chip-payoff > span { color: rgba(255,255,255,.75); }
@keyframes idea-marquee-left { to { transform: translateX(-50%); } }
@keyframes idea-marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* Tablet: below ~1024px the copy column (min 270px) plus the gap squeezes the crossing
   strips into ~370px, which clips the marquee and makes the whole section feel tight.
   Stack it the way the phone layout already does, with a shorter, wider crossing. */
@media (min-width: 761px) and (max-width: 1023px) {
  .journey-section { padding: 92px 0; }
  .idea-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .idea-copy .section-title { max-width: 620px; }
  .idea-copy .section-desc { max-width: 620px; }
  .idea-crossing { height: 300px; }
  .idea-strip { left: -18%; width: 150%; }
  .idea-sequence { gap: 10px; }
  .idea-chip { padding: 9px 13px; font-size: .78rem; }
}
@media (max-width: 760px) {
  .journey-section { padding: 82px 0; }
  .idea-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .idea-copy .section-title { max-width: 620px; }
  .idea-crossing { height: 240px; margin: 0 -12px; }
  .idea-strip { left: -28%; width: 158%; }
  .idea-strip-a { transform: rotate(-14deg) scale(.9); }
  .idea-strip-b { transform: rotate(14deg) scale(.9); }
  .idea-sequence { gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  .idea-chip { gap: 7px; padding: 8px 11px; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .idea-marquee { animation: none; will-change: auto; }
}

/* Full-bleed academics carousel: duplicated image cards make the track loop cleanly. */
.academics-section { overflow: hidden; }
.academics-section .features-header { margin-bottom: 0; }
.academics-carousel {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.academics-track { display: flex; width: max-content; animation: academics-carousel-loop 56s linear infinite; will-change: transform; }
.academics-set { display: flex; flex: 0 0 auto; gap: 24px; padding-right: 24px; }
.academics-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 0 0 calc((100vw - 48px) / 3);
  align-items: flex-end;
  height: 500px;
  overflow: hidden;
  border-radius: 24px;
  background: #101c34;
}
.academics-card > img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.academics-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4,12,30,.94) 0%, rgba(4,12,30,.72) 27%, rgba(4,12,30,.12) 72%, transparent 100%); }
.academics-copy { width: 100%; padding: 32px 30px; color: #fff; }
.academics-copy h3 { margin: 0 0 10px; color: #fff; font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 750; line-height: 1.15; }
.academics-copy p { max-width: 34ch; margin: 0; color: rgba(255,255,255,.88); font-size: .92rem; line-height: 1.55; }
@keyframes academics-carousel-loop { to { transform: translateX(-50%); } }
@media (min-width: 768px) and (max-width: 1023px) {
  .academics-set { gap: 24px; padding-right: 24px; }
  .academics-card { flex-basis: calc((100vw - 24px) / 2); }
}
@media (max-width: 767px) {
  .academics-set { gap: 16px; padding-right: 16px; }
  .academics-card { flex-basis: 100vw; height: 430px; border-radius: 20px; }
  .academics-copy { padding: 25px 23px; }
  .academics-copy p { font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .academics-track { animation-play-state: paused; will-change: auto; }
}

/* One continuous story-and-founder section. */
.why-founder-section { padding: 118px 0 126px; overflow: hidden; background: var(--bg-deep); }
.why-founder-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); align-items: center; gap: clamp(48px, 7vw, 100px); }
.why-founder-story { min-width: 0; }
.why-founder-intro .section-title { max-width: 620px; margin: 12px 0 18px; }
.why-founder-intro .why-copy { max-width: 620px; margin: 0; }
.fragment-field { position: relative; width: 100%; max-width: 560px; height: 214px; margin: 17px 0 15px; }
.fragment-chip, .unified-pill { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: max-content; white-space: nowrap; }
.fragment-chip { padding: 9px 13px; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-hard); border-radius: 999px; box-shadow: 0 8px 20px rgba(6,18,42,.08); font-size: .72rem; font-weight: 600; transform: translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), 0) rotate(var(--tilt)); }
.fragment-field.is-visible .fragment-chip { animation: fragment-chip-cycle 8s cubic-bezier(.2,.78,.25,1) var(--chip-delay, 0s) infinite; will-change: transform, opacity; }
.fragment-field.is-visible .fragment-chip:nth-child(1) { --chip-delay: .04s; }
.fragment-field.is-visible .fragment-chip:nth-child(2) { --chip-delay: .14s; }
.fragment-field.is-visible .fragment-chip:nth-child(3) { --chip-delay: .24s; }
.fragment-field.is-visible .fragment-chip:nth-child(4) { --chip-delay: .34s; }
.fragment-field.is-visible .fragment-chip:nth-child(5) { --chip-delay: .44s; }
.fragment-field.is-visible .fragment-chip:nth-child(6) { --chip-delay: .54s; }
.fragment-field.is-visible .fragment-chip:nth-child(7) { --chip-delay: .64s; }
.fragment-field.is-visible .fragment-chip:nth-child(8) { --chip-delay: .74s; }
@keyframes fragment-chip-cycle {
  0%, 7% { opacity: 1; transform: translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), 0) rotate(var(--tilt)); }
  20%, 70% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.58) rotate(0); }
  91%, 100% { opacity: 1; transform: translate3d(calc(-50% + var(--tx)), calc(-50% + var(--ty)), 0) rotate(var(--tilt)); }
}
.unified-pill { padding: 6px; color: #fff; background: #1535a8; border: 1px solid rgba(255,255,255,.52); border-radius: 999px; box-shadow: 0 10px 30px rgba(21,53,168,.28); opacity: 0; transform: translate3d(-50%, -50%, 0); }
.unified-pill img { display: block; width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.fragment-field.is-visible .unified-pill { animation: unified-pill-cycle 8s ease-in-out infinite, unified-pill-float 6s ease-in-out infinite; }
@keyframes unified-pill-cycle { 0%, 16%, 76%, 100% { opacity: 0; } 23%, 69% { opacity: 1; } }
@keyframes unified-pill-float { 0%,100% { transform: translate3d(-50%, -50%, 0); } 50% { transform: translate3d(-50%, calc(-50% - 3px), 0); } }
.why-copy-last { max-width: 620px; margin: 0; }
.founder-divider { display: flex; align-items: center; gap: 14px; margin: 34px 0 17px; color: var(--accent); font: 600 .7rem 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.founder-divider::after { content: ''; height: 1px; flex: 1; background: var(--border-hard); }
.founder-story-heading { max-width: 560px; margin: 0 0 17px; color: var(--text-primary); font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.3; }
.founder-quote-block { max-width: 620px; margin: 0; padding: 2px 0 2px 20px; border-left: 2px solid var(--accent); color: var(--text-secondary); font-family: Georgia, 'Iowan Old Style', serif; font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 400; line-height: 1.75; }
.founder-quote-block p { margin: 0 0 13px; }
.founder-quote-block p:last-child { margin-bottom: 0; }
.founder-portrait { position: relative; width: min(100%, 470px); aspect-ratio: .76; justify-self: center; margin: 28px 0 0; isolation: isolate; transform: rotate(2.5deg); }
.founder-portrait > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: 48% 48% 28px 28px / 24% 24% 28px 28px; }
.founder-portrait::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 48% 48% 28px 28px / 24% 24% 28px 28px; background: linear-gradient(0deg, rgba(4,11,28,.9) 0%, rgba(4,11,28,.56) 18%, transparent 48%); pointer-events: none; }
.founder-portrait figcaption { position: absolute; right: 26px; bottom: 27px; left: 26px; z-index: 2; display: flex; flex-direction: column; gap: 5px; color: #fff; }
.founder-portrait figcaption strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.25rem; font-weight: 750; }
.founder-portrait figcaption span { color: rgba(255,255,255,.82); font-size: .82rem; }
.founder-pin-line { position: absolute; top: -48px; left: 50%; z-index: 3; width: 1px; height: 48px; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.founder-pin-dot { position: absolute; top: 0; left: 50%; z-index: 4; width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: #1535a8; box-shadow: 0 0 0 0 rgba(21,53,168,.42); transform: translate(-50%, -50%); animation: founder-pin-pulse 2.8s ease-out infinite; }
@keyframes founder-pin-pulse { 0% { box-shadow: 0 0 0 0 rgba(21,53,168,.38); } 70%,100% { box-shadow: 0 0 0 10px rgba(21,53,168,0); } }
@media (max-width: 820px) {
  .why-founder-section { padding: 88px 0 100px; }
  .why-founder-layout { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  .why-founder-story { order: 0; }
  .founder-portrait { order: 1; width: min(78%, 430px); margin-top: 36px; }
  .fragment-field { max-width: 560px; }
}
@media (max-width: 480px) {
  .fragment-field { height: 190px; transform: scale(.82); transform-origin: center; width: 122%; margin: 3px 0; left: -11%; }
  .founder-portrait { width: min(88%, 390px); }
}
@media (prefers-reduced-motion: reduce) {
  .fragment-chip { display: none; }
  .unified-pill { opacity: 1; transform: translate3d(-50%, -50%, 0); animation: none !important; transition: none; }
  .fragment-field.is-visible .fragment-chip { animation: none; }
  .founder-pin-dot { animation: none; }
}

/* Opportunities: centered copy framed by a loose orbit of cards. */
.opportunities-section { position: relative; display: flex; align-items: center; min-height: 94svh; padding: 54px 24px; overflow: hidden; }
.opportunities-stage { position: relative; width: min(100%, 1440px); min-height: min(88svh, 820px); margin: 0 auto; }
.opp-center { position: absolute; top: 50%; left: 50%; z-index: 2; width: min(620px, 52%); transform: translate3d(-50%, -50%, 0); text-align: center; }
.opp-center .section-title { max-width: 620px; margin: 12px auto 18px; }
.opp-center p { max-width: 590px; margin: 0 auto; color: var(--text-secondary); line-height: 1.75; }
.opp-cta { margin-top: 26px; }
.opp-cards { position: absolute; inset: 0; }
.opp-card { position: absolute; width: clamp(176px, 18vw, 252px); height: clamp(112px, 10vw, 144px); perspective: 900px; }
.opp-card-arrival { width: 100%; height: 100%; opacity: 0; transform: translate3d(var(--fly-x, -70vw), var(--fly-y, -16vh), 0) scale(.82); }
.opportunities-stage.is-visible .opp-card-arrival { animation: opportunity-card-arrive .88s cubic-bezier(.18,.78,.22,1) var(--arrival-delay, 0s) forwards; will-change: transform, opacity; }
.opp-card-surface { position: relative; display: flex; align-items: flex-end; width: 100%; height: 100%; padding: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); border-radius: var(--card-radius, 26px 16px 30px 18px); background-color: #0a1120;
  background-image: linear-gradient(155deg, rgba(6,11,24,.32) 0%, rgba(5,9,18,.58) 55%, rgba(4,7,15,.86) 100%), var(--card-image, var(--card-glass));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; -webkit-backdrop-filter: blur(12px) saturate(108%); backdrop-filter: blur(12px) saturate(108%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -18px 32px rgba(5,10,22,.08), 0 12px 28px rgba(4,8,18,.12); transform: perspective(850px) rotateX(var(--tilt-x, 3deg)) rotateY(var(--tilt-y, -4deg)) rotate(var(--card-angle, -4deg)); }
.opp-card-surface::before { position: absolute; inset: 0; content: ''; background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 48%, rgba(10,16,29,.1)); pointer-events: none; }
.opp-card-icon { position: absolute; top: 8px; right: 14px; z-index: 0; color: rgba(255,255,255,.72); font-size: clamp(4.2rem, 7vw, 6rem); line-height: 1; opacity: .72; filter: drop-shadow(0 4px 12px rgba(0,0,0,.45)); animation: opportunity-icon-drift var(--icon-duration, 7.6s) ease-in-out infinite; }
.opp-card-surface h3 { position: relative; z-index: 1; }
.opportunities-stage.is-visible .opp-card-surface { animation: opportunity-card-float var(--float-duration, 7s) ease-in-out var(--float-delay, 1s) infinite; }
.opp-card-surface h3 { max-width: 100%; margin: 0; color: #fff; font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(.94rem, 1.25vw, 1.12rem); font-weight: 750; line-height: 1.2; text-shadow: 0 1px 7px rgba(0,0,0,.14); overflow-wrap: anywhere; }
.opp-card-1 { top: 12%; left: 2%; --card-angle: -6deg; --tilt-x: 4deg; --tilt-y: -5deg; --card-radius: 27px 15px 30px 18px; --card-glass: linear-gradient(132deg,rgba(12,18,34,.8),rgba(7,11,21,.82) 55%,rgba(23,32,49,.72)); --fly-x: -72vw; --fly-y: -18vh; --arrival-delay: .04s; --float-duration: 7.2s; --float-delay: 1s; --icon-duration: 7.1s; }
.opp-card-2 { top: 42%; left: 0; --card-angle: 4deg; --tilt-x: -3deg; --tilt-y: -5deg; --card-radius: 16px 30px 19px 27px; --card-glass: linear-gradient(145deg,rgba(10,16,29,.82),rgba(6,11,21,.8) 52%,rgba(29,34,50,.72)); --fly-x: -75vw; --fly-y: 2vh; --arrival-delay: .17s; --float-duration: 8.4s; --float-delay: 1.8s; --icon-duration: 8.3s; }
.opp-card-3 { top: 73%; left: 5%; --card-angle: -3deg; --tilt-x: 4deg; --tilt-y: -3deg; --card-radius: 30px 18px 23px 15px; --card-glass: linear-gradient(125deg,rgba(9,15,27,.82),rgba(11,19,33,.78) 54%,rgba(31,39,52,.72)); --fly-x: -68vw; --fly-y: 20vh; --arrival-delay: .3s; --float-duration: 7.8s; --float-delay: 2.2s; --icon-duration: 7.7s; }
.opp-card-4 { top: 10%; right: 3%; --card-angle: 5deg; --tilt-x: -4deg; --tilt-y: 5deg; --card-radius: 17px 28px 16px 30px; --card-glass: linear-gradient(138deg,rgba(13,17,31,.82),rgba(14,18,35,.78) 53%,rgba(35,38,55,.72)); --fly-x: 72vw; --fly-y: -19vh; --arrival-delay: .1s; --float-duration: 8.1s; --float-delay: 1.4s; --icon-duration: 8.8s; }
.opp-card-5 { top: 43%; right: 0; --card-angle: -4deg; --tilt-x: 3deg; --tilt-y: 5deg; --card-radius: 29px 16px 28px 18px; --card-glass: linear-gradient(128deg,rgba(8,15,26,.82),rgba(14,23,36,.79) 50%,rgba(28,39,49,.72)); --fly-x: 76vw; --fly-y: 1vh; --arrival-delay: .23s; --float-duration: 7.5s; --float-delay: 2s; --icon-duration: 7.9s; }
.opp-card-6 { top: 72%; right: 5%; --card-angle: 6deg; --tilt-x: -3deg; --tilt-y: 4deg; --card-radius: 16px 29px 17px 28px; --card-glass: linear-gradient(143deg,rgba(8,12,24,.84),rgba(9,17,29,.78) 46%,rgba(26,33,51,.72)); --fly-x: 70vw; --fly-y: 20vh; --arrival-delay: .36s; --float-duration: 8.7s; --float-delay: 2.5s; --icon-duration: 8.5s; }
@keyframes opportunity-card-arrive { to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes opportunity-icon-drift { 0%,100% { transform: translate3d(0,0,0) rotate(-7deg) scale(.96); } 50% { transform: translate3d(-3px,-5px,0) rotate(3deg) scale(1.04); } }
@keyframes opportunity-card-float { 0%,100% { transform: perspective(850px) translate3d(0,0,0) rotateX(var(--tilt-x,3deg)) rotateY(var(--tilt-y,-4deg)) rotate(var(--card-angle,-4deg)); } 50% { transform: perspective(850px) translate3d(0,-5px,0) rotateX(var(--tilt-x,3deg)) rotateY(var(--tilt-y,-4deg)) rotate(calc(var(--card-angle,-4deg) + 1deg)); } }
@media (max-width: 980px) {
  .opportunities-section { display: block; min-height: 0; padding: 88px 20px 92px; }
  .opportunities-stage { min-height: 0; }
  .opp-center { position: relative; top: auto; left: auto; width: min(100%, 620px); margin: 0 auto 35px; transform: none; }
  .opp-cards { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 14px; width: min(100%, 640px); margin: 0 auto; padding: 5px 10px; }
  .opp-card { position: relative; top: auto; right: auto; left: auto; width: 100%; height: clamp(120px, 23vw, 156px); }
  .opp-card:nth-child(even) { transform: translateY(9px); }
  .opp-card-arrival { --fly-x: -36px; --fly-y: 28px; }
  .opp-card:nth-child(even) .opp-card-arrival { --fly-x: 36px; --fly-y: 28px; }
  .opp-card-surface { padding: 16px; }
  .opp-card-surface h3 { font-size: clamp(.82rem, 2.5vw, 1rem); }
  .opp-card-1 { --card-angle: -3deg; --tilt-x: 2deg; --tilt-y: -2deg; }
  .opp-card-2 { --card-angle: 3deg; --tilt-x: -2deg; --tilt-y: 2deg; }
  .opp-card-3 { --card-angle: 2deg; --tilt-x: 2deg; --tilt-y: -2deg; }
  .opp-card-4 { --card-angle: -2deg; --tilt-x: -2deg; --tilt-y: 2deg; }
  .opp-card-5 { --card-angle: -3deg; --tilt-x: 2deg; --tilt-y: -2deg; }
  .opp-card-6 { --card-angle: 3deg; --tilt-x: -2deg; --tilt-y: 2deg; }
}
@media (max-width: 420px) {
  .opp-cards { gap: 13px 10px; padding-inline: 5px; }
  .opp-card { height: 122px; }
  .opp-card-surface { padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .opp-card-arrival, .opportunities-stage.is-visible .opp-card-arrival { opacity: 1; transform: none; animation: none !important; }
  .opp-card-surface, .opportunities-stage.is-visible .opp-card-surface, .opp-card-icon { animation: none !important; }
}

/* Skills section: reduced motion swaps the card slide for a plain crossfade and freezes
   the sliding tab pill. JS stops the auto-advance for the same reason. */
@media (prefers-reduced-motion: reduce) {
  .skills-card { transition: opacity 0.35s linear; }
  .skills-tab-pill { transition: none; }
}