@import url("https://fonts.googleapis.com/css2?family=Monda:wght@400;500;600;700&display=swap");

:root {
  --ink: #0b0912;
  --ink-2: #121019;
  --paper: #f1efea;
  --purple: #5e2aa6;
  --purple-deep: #1b072f;
  --cyan: #11c9d2;
  --white: #fff;
  --muted: #cac6d2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #000;
  color: #16111f;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.display-hero, .mission-title, .section-title, .side-title,
.cta-title, .participate-title, .opportunity-title, .steps-heading {
  font-family: "Monda", Arial, Helvetica, sans-serif;
}

a { color: inherit; }
.site-header { background: rgba(14,14,15,.97); backdrop-filter: blur(12px); z-index: 1030; }
.navbar { min-height: 86px; }
.navbar .nav-link { color: #f6f6f6; letter-spacing: .05em; font-size: .78rem; transition: color .25s ease, transform .25s ease; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--cyan); transform: translateY(-2px); }

.brand-mark { position: relative; display: inline-flex; align-items: flex-end; gap: .15rem; color: #fff; text-decoration: none; min-width: 175px; }
.brand-ati { position: absolute; top: -5px; left: 2px; font-size: .64rem; font-style: italic; font-weight: 800; letter-spacing: -.03em; }
.brand-spark { font-size: .55rem; margin-left: 1px; }
.brand-horizons { position: relative; z-index: 2; font-size: 1.55rem; font-weight: 900; letter-spacing: -.06em; line-height: 1; }
.brand-orbit { width: 27px; height: 27px; border: 3px solid var(--cyan); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(32deg); margin-left: -16px; margin-bottom: -3px; }

.hero-section { position: relative; background: #030304; color: #fff; }
.min-vh-hero { min-height: 540px; }
.hero-space { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 73% 46%, rgba(28,46,74,.22), transparent 45%), #020203; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,12,26,.97) 0%, rgba(24,16,38,.82) 39%, rgba(8,7,12,.22) 66%, rgba(0,0,0,.08) 100%); }
.planet { position: absolute; width: min(76vw, 840px); aspect-ratio: 1; right: -7vw; top: 50%; transform: translateY(-45%); border-radius: 50%; overflow: hidden; background:
  radial-gradient(circle at 42% 45%, rgba(84,141,97,.85) 0 5%, transparent 6%),
  radial-gradient(circle at 34% 38%, rgba(74,119,84,.9) 0 13%, transparent 14%),
  radial-gradient(circle at 49% 27%, rgba(128,147,87,.78) 0 8%, transparent 9%),
  radial-gradient(circle at 58% 57%, rgba(66,116,85,.8) 0 11%, transparent 12%),
  radial-gradient(circle at 62% 46%, #356085 0 30%, #193b68 50%, #0f2e58 65%, #07111f 78%);
  box-shadow: 0 0 80px rgba(92,154,255,.15), inset -35px -45px 80px rgba(0,0,0,.5);
}
.planet::after { content:""; position:absolute; inset:0; border-radius:50%; background: linear-gradient(100deg, rgba(0,0,0,.68) 0 23%, transparent 44% 78%, rgba(0,0,0,.35)); }
.planet-glow { position:absolute; inset:-8%; border-radius:50%; border: 9px solid rgba(120,198,255,.2); filter: blur(8px); }
.land { position:absolute; z-index:1; background: rgba(75,121,77,.82); filter: blur(.4px); border-radius: 46% 54% 43% 57% / 53% 43% 57% 47%; transform: rotate(22deg); }
.land-1 { width: 33%; height: 22%; left: 31%; top: 28%; }
.land-2 { width: 24%; height: 15%; left: 48%; top: 42%; transform: rotate(-18deg); }
.land-3 { width: 18%; height: 11%; left: 34%; top: 58%; transform: rotate(46deg); }
.cloud { position:absolute; z-index:2; height: 5%; background: rgba(255,255,255,.74); filter: blur(4px); border-radius:999px; transform: rotate(-12deg); }
.cloud-1 { width: 41%; left: 27%; top: 25%; box-shadow: 20px 44px 0 rgba(255,255,255,.45), -30px 78px 0 rgba(255,255,255,.4); }
.cloud-2 { width: 28%; left: 52%; top: 54%; box-shadow: -80px 22px 0 rgba(255,255,255,.4), -130px 52px 0 rgba(255,255,255,.24); }
.cloud-3 { width: 24%; left: 40%; top: 68%; }
.star { position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.7; box-shadow: 0 0 7px rgba(255,255,255,.8); }
.s1{right:6%;top:20%}.s2{right:3%;top:66%}.s3{right:18%;top:13%}.s4{right:11%;top:44%}.s5{right:21%;top:79%}
.hero-content { z-index: 2; }
.display-hero { font-size: clamp(3rem, 5.3vw, 5.2rem); line-height: .99; font-weight: 700; letter-spacing: .015em; max-width: 780px; }
.hero-copy { max-width: 620px; font-size: 1.05rem; color: #f0edf4; }
.scroll-link { display:inline-flex; align-items:center; gap:.65rem; text-transform:uppercase; font-size:.73rem; letter-spacing:.03em; color:#fff; }
.scroll-icon { width:32px; height:32px; border:2px solid #fff; border-radius:50%; display:grid; place-items:center; font-size:1rem; transition: .25s ease; }
.scroll-link:hover .scroll-icon { background: var(--cyan); border-color: var(--cyan); color:#082127; transform: translateY(3px); }
.powered-by { font-size:.65rem; color:#d2ced8; font-style:italic; }
.powered-by strong { margin-left:.45rem; color:#fff; font-size:.9rem; font-style:normal; }

.mission-intro { background: var(--paper); }
.mission-title { color:#5b2c98; font-size:clamp(2.4rem,4vw,4.3rem); font-weight:400; line-height:1.08; margin:0; }
.mission-intro p { max-width: 650px; font-size:1rem; }
.cyan-rule { width:2px; background: var(--cyan); height:100%; min-height:170px; }

.steps-section { background: var(--paper); }
.step-card { min-height: 330px; border-top:1px solid rgba(29,20,40,.1); }
.step-card + .step-card { border-left:1px solid rgba(29,20,40,.1); }
.step-card-dark { background:#050506; color:#4f287f; }
.step-card-dark p, .step-card-dark .step-num, .step-card-dark h3 { color:#4f287f; }
.step-num { font-weight:700; font-size:1.3rem; line-height:1; }
.step-card h3 { font-size:1.15rem; font-weight:800; margin-top:.5rem; }
.step-card p { margin-top:1.75rem; max-width:330px; }
.step-icon { width:128px; height:95px; margin-top:1.5rem; position:relative; }
.icon-signal .signal-dot { position:absolute; width:20px; height:20px; border-radius:50%; background:var(--cyan); left:54px; top:35px; }
.signal-wave { position:absolute; border:3px solid var(--cyan); border-top-color:transparent; border-bottom-color:transparent; border-radius:50%; top:10px; height:70px; }
.wave-a{width:48px;left:40px}.wave-b{width:74px;left:27px}.wave-c{width:100px;left:14px}
.icon-search .lens { position:absolute; width:68px; height:68px; border:4px solid var(--purple); border-radius:50%; left:18px; top:4px; }
.icon-search .handle { position:absolute; width:44px; height:8px; background:var(--purple); left:75px; top:69px; transform:rotate(42deg); border-radius:8px; transform-origin:left center; }
.icon-search .scan { position:absolute; width:28px; height:3px; background:var(--purple); left:37px; top:37px; transform:rotate(45deg); box-shadow: 10px -8px 0 -1px #050506; }
.icon-network .network-ring { position:absolute; width:34px; height:34px; border:2px solid var(--purple); border-radius:50%; left:48px; top:44px; }
.person { position:absolute; width:18px; height:18px; border:2px solid var(--purple); border-radius:50%; }
.person::after{content:"";position:absolute;width:28px;height:12px;border-radius:15px 15px 0 0;background:var(--purple);top:21px;left:-7px}
.p1{left:55px;top:1px}.p2{left:14px;top:49px}.p3{right:10px;top:49px}
.link{position:absolute;height:2px;background:var(--cyan);transform-origin:left center}.l1{width:32px;left:66px;top:31px;transform:rotate(90deg)}.l2{width:30px;left:44px;top:60px;transform:rotate(160deg)}.l3{width:30px;left:80px;top:60px;transform:rotate(20deg)}

.landscape-section { color:#fff; background:
  radial-gradient(circle at 32% 58%, rgba(107,37,179,.2), transparent 35%),
  radial-gradient(circle at 84% 24%, rgba(60,14,125,.48), transparent 45%),
  linear-gradient(90deg,#160d25 0%,#190b2f 46%,#22004a 100%); }
.section-title { font-size:1.45rem; font-weight:500; margin-bottom:1.6rem; }
.landscape-copy { font-size:.9rem; color:#ece8f2; max-width:760px; }
.tech-map { position:relative; width:100%; max-width:760px; aspect-ratio: 1.35; margin-top:1.4rem; }
.tech-map svg { width:100%; height:100%; overflow:visible; }
.tech-map .label { position:absolute; font-size:.8rem; line-height:1.18; color:#fff; text-shadow:0 2px 7px #000; }
.ai{left:43%;top:4%;text-align:center}.autonomy{left:70%;top:22%}.biotech{left:78%;top:40%}.manufacturing{left:80%;top:60%}.energy{left:58%;top:85%;text-align:center}.micro{left:8%;top:82%}.space{left:7%;top:58%}.cyber{left:6%;top:36%}.materials{left:16%;top:17%;text-align:center}
.side-title { font-size:1.55rem; line-height:1.18; margin-bottom:1.6rem; }
.landscape-side p { font-size:.9rem; color:#ece8f2; line-height:1.8; }
.ecosystem-diagram { position:relative; width:310px; height:250px; }
.eco-node,.eco-center { position:absolute; border-radius:50%; display:grid; place-items:center; text-align:center; z-index:2; }
.eco-node { width:90px; height:90px; border:1px solid #6a3aaa; color:#fff; background:rgba(21,8,48,.35); }
.eco-node small { display:block; font-size:.48rem; margin-top:-22px; }
.eco-symbol { font-size:1.5rem; margin-top:18px; }
.eco-center { width:112px;height:112px;left:99px;top:71px;border:2px solid var(--cyan);color:#fff;font-weight:900;font-style:italic;font-size:1.35rem;background:rgba(17,5,39,.7); }
.eco-center span{font-size:.75rem}.eco-gov{left:110px;top:0}.eco-ind{left:18px;bottom:0}.eco-acad{right:18px;bottom:0}
.eco-link{position:absolute;height:2px;background:#6a3aaa;z-index:1;transform-origin:left center}.e1{width:62px;left:154px;top:71px;transform:rotate(90deg)}.e2{width:89px;left:94px;top:160px;transform:rotate(137deg)}.e3{width:89px;left:214px;top:160px;transform:rotate(43deg)}

.cta-section { position:relative; overflow:hidden; background:linear-gradient(#030207 0 50%,#080311 100%); color:#fff; }
.cta-title { font-size:clamp(2.3rem,4vw,4.2rem); font-weight:400; }
.cta-section p { color:#eeeaf5; font-size:.92rem; }
.btn-horizon { min-width:285px; border-radius:0; background:var(--cyan); border:0; color:#151020; text-transform:uppercase; font-weight:700; letter-spacing:.04em; padding:.85rem 1.5rem; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.btn-horizon:hover { background:#5de7eb; color:#151020; transform:translateY(-3px); box-shadow:0 16px 35px rgba(17,201,210,.2); }
.cta-glow { position:absolute; left:18%; right:18%; bottom:-120px; height:210px; background:radial-gradient(ellipse at center, rgba(255,255,255,.95) 0 8%, rgba(143,89,255,.7) 14%, rgba(88,23,181,.4) 32%, transparent 70%); filter:blur(3px); }

.site-footer { background:#030304; color:#fff; }
.site-footer a { text-decoration:none; color:#fff; transition:color .2s ease; }
.site-footer a:hover { color:var(--cyan); }
.footer-brand { transform:scale(.9); transform-origin:left center; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width: 991.98px) {
  .navbar { min-height:74px; }
  .hero-overlay { background:linear-gradient(90deg,rgba(16,11,25,.96),rgba(16,11,25,.72) 60%,rgba(0,0,0,.12)); }
  .planet { width:820px; right:-360px; opacity:.88; }
  .min-vh-hero { min-height:600px; }
  .display-hero { max-width:700px; }
  .mission-title br { display:none; }
  .step-card + .step-card { border-left:0; }
  .step-card { border-bottom:1px solid rgba(29,20,40,.1); }
  .tech-map { margin-inline:auto; }
}

@media (max-width: 767.98px) {
  .display-hero { font-size:clamp(2.7rem,12vw,4.4rem); }
  .hero-copy { font-size:.95rem; max-width:92%; }
  .planet { width:690px; right:-430px; top:54%; }
  .mission-title { font-size:2.8rem; }
  .tech-map .label { font-size:.61rem; }
  .ecosystem-diagram { transform:scale(.88); transform-origin:center top; margin-bottom:-20px; }
  .btn-horizon { min-width:0; width:min(100%,300px); }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* Background video */
.hero-video,
.hero-video-fallback { position:absolute; inset:0; width:100%; height:100%; }
.hero-video { object-fit:cover; object-position:center center; z-index:0; }
.hero-video-fallback { z-index:-1; background:#050507; }
.hero-overlay { z-index:1; background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 35%, rgba(0,0,0,.34) 57%, rgba(0,0,0,.12) 78%, rgba(0,0,0,.08) 100%); }

/* Step icon micro movement */
.step-card .step-icon { transition:transform .35s ease; }
.step-card:hover .step-icon { transform:translateY(-4px); }
.step-card:hover .signal-wave { animation:signalPulse 1.25s ease-in-out infinite; }
.step-card:hover .wave-b { animation-delay:.12s; }
.step-card:hover .wave-c { animation-delay:.24s; }
.step-card:hover .icon-search { animation:searchFloat 1.8s ease-in-out infinite; }
.step-card:hover .icon-network .person { animation:nodeFloat 1.4s ease-in-out infinite alternate; }
.step-card:hover .icon-network .p2 { animation-delay:.15s; }
.step-card:hover .icon-network .p3 { animation-delay:.3s; }
@keyframes signalPulse { 50% { transform:scale(1.08); opacity:.5; } }
@keyframes searchFloat { 50% { transform:translate(5px,-3px) rotate(2deg); } }
@keyframes nodeFloat { to { transform:translateY(-4px); } }

/* Participation */
.participate-section { background:var(--paper); color:#17121e; }
.eyebrow { margin:0 0 .75rem; color:var(--purple); font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow-light { color:var(--cyan); }
.participate-title,.opportunity-title { margin:0; font-size:clamp(2.6rem,4.6vw,5rem); line-height:1.02; font-weight:400; letter-spacing:-.035em; }
.participate-title { color:#542590; }
.participate-lead,.opportunity-lead { max-width:760px; margin-top:1.5rem; font-size:1.05rem; }
.role-grid { --bs-columns:5; }
.role-col { min-width:0; }
.role-card { position:relative; display:flex; flex-direction:column; min-height:390px; padding:2rem 1.45rem 1.6rem; background:#f8f7f3; border:1px solid rgba(39,23,55,.12); overflow:hidden; transition:transform .35s ease, box-shadow .35s ease, background .35s ease; }
.role-card::before { content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:linear-gradient(90deg,var(--purple),var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; }
.role-card:hover { transform:translateY(-7px); background:#fff; box-shadow:0 20px 45px rgba(33,15,55,.10); }
.role-card:hover::before { transform:scaleX(1); }
.role-card h3 { min-height:2.5em; margin:1rem 0 .8rem; font-size:1.08rem; font-weight:800; }
.role-card p { margin-bottom:1.5rem; font-size:.88rem; line-height:1.65; }
.role-link { margin-top:auto; color:#4d2185; font-size:.78rem; font-weight:800; text-decoration:none; text-transform:uppercase; letter-spacing:.035em; }
.role-link span { display:inline-block; transition:transform .25s ease; }
.role-link:hover { color:#111; }
.role-link:hover span { transform:translateX(5px); }
.role-icon { position:relative; width:82px; height:72px; color:var(--purple); }
.role-icon * { position:absolute; display:block; }
.icon-partner .core { width:18px;height:18px;border-radius:50%;background:var(--cyan);left:32px;top:27px; }
.icon-partner .orbit { border:2px solid var(--purple);border-radius:50%;left:20px;top:15px;width:42px;height:42px; }
.icon-partner .o2 { left:9px;top:4px;width:64px;height:64px;border-color:rgba(94,42,166,.45); }
.role-card:hover .icon-partner .o1 { animation:orbitPulse 1.4s ease-in-out infinite; }
.role-card:hover .icon-partner .o2 { animation:orbitPulse 1.4s .2s ease-in-out infinite; }
.icon-innovator .idea-core { width:34px;height:34px;border:3px solid var(--purple);border-radius:50%;left:24px;top:20px; }
.icon-innovator .spark { width:7px;height:7px;border-radius:50%;background:var(--cyan); }
.icon-innovator .s-a{left:8px;top:12px}.icon-innovator .s-b{right:8px;top:8px}.icon-innovator .s-c{right:13px;bottom:5px}
.role-card:hover .icon-innovator .spark { animation:sparkPop 1.2s ease-in-out infinite alternate; }
.icon-student .cap-top { width:58px;height:34px;left:12px;top:12px;background:var(--purple);clip-path:polygon(50% 0,100% 40%,50% 80%,0 40%); }
.icon-student .cap-base { width:34px;height:12px;left:24px;top:39px;border-bottom:4px solid var(--cyan);border-radius:0 0 50% 50%; }
.icon-student .tassel { width:2px;height:27px;left:67px;top:25px;background:var(--purple);transform-origin:top; }
.role-card:hover .icon-student .tassel { animation:tasselSwing 1.1s ease-in-out infinite alternate; }
.leader-node { width:14px;height:14px;border:2px solid var(--purple);border-radius:50%;background:#f8f7f3;z-index:2; }
.icon-leader .n1{left:34px;top:4px}.icon-leader .n2{left:8px;top:46px}.icon-leader .n3{left:60px;top:46px}
.leader-line { height:2px;width:48px;background:var(--cyan);left:20px;top:38px;transform-origin:center; }
.icon-leader .l-a{transform:rotate(58deg)}.icon-leader .l-b{transform:rotate(-58deg)}
.role-card:hover .icon-leader .n1 { animation:nodeFloat 1s ease-in-out infinite alternate; }
.c-ring { border:2px solid var(--purple);border-radius:50%;left:18px;top:9px;width:48px;height:48px; }
.icon-catalyst .r2 { left:28px;top:19px;width:28px;height:28px;border-color:var(--cyan); }
.c-dot { width:8px;height:8px;border-radius:50%;background:var(--purple); }
.icon-catalyst .d1{left:8px;top:14px}.icon-catalyst .d2{right:5px;top:37px}.icon-catalyst .d3{left:21px;bottom:2px}
.role-card:hover .icon-catalyst .r1 { animation:slowSpin 3s linear infinite; border-style:dashed; }
@keyframes orbitPulse { 50% { transform:scale(1.12); opacity:.45; } }
@keyframes sparkPop { to { transform:scale(1.65); opacity:.45; } }
@keyframes tasselSwing { to { transform:rotate(18deg); } }
@keyframes slowSpin { to { transform:rotate(360deg); } }

/* Opportunities */
.opportunity-section {
  color:#fff;
  background:radial-gradient(circle at 82% 20%,rgba(85,26,159,.5),transparent 34%),linear-gradient(115deg,#12091f,#21043d 58%,#150022);
}
.opportunity-lead { color:#e9e3ef; }
.opportunity-card {
  --card-accent: var(--cyan);
  --card-accent-soft: rgba(17,201,210,.12);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:2rem;
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(7px);
  transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.opportunity-card::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--card-accent);
  z-index:-1;
  transition:width .35s ease,opacity .35s ease;
}
.opportunity-card::after {
  content:"";
  position:absolute;
  right:-36px;
  top:-36px;
  width:120px;
  height:120px;
  opacity:.42;
  pointer-events:none;
  transition:transform .4s ease,opacity .4s ease;
}
.opportunity-card:hover {
  transform:translateY(-7px);
  border-color:var(--card-accent);
  box-shadow:0 22px 48px rgba(0,0,0,.22);
}
.opportunity-card:hover::before { width:7px; }
.opportunity-card:hover::after { transform:scale(1.08) rotate(6deg); opacity:.7; }

/* Open Innovation — cyan / forward-motion treatment */
.opportunity-card-open {
  --card-accent:#11c9d2;
  background:linear-gradient(145deg,rgba(17,201,210,.13),rgba(255,255,255,.04) 50%,rgba(17,201,210,.04));
}
.opportunity-card-open::after {
  border:1px solid rgba(17,201,210,.8);
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  box-shadow:0 0 0 14px rgba(17,201,210,.08),0 0 0 28px rgba(17,201,210,.035);
}
.opportunity-card-open .opportunity-type {
  background:rgba(17,201,210,.12);
  border:1px solid rgba(17,201,210,.45);
  color:#79f4f7;
}

/* Event — warm violet / calendar-grid treatment */
.opportunity-card-convening {
  --card-accent:#a874ff;
  background:linear-gradient(155deg,rgba(128,74,213,.22),rgba(255,255,255,.045) 58%,rgba(128,74,213,.08));
}
.opportunity-card-convening::after {
  border-radius:14px;
  background:
    linear-gradient(rgba(168,116,255,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,116,255,.35) 1px,transparent 1px);
  background-size:22px 22px;
  transform:rotate(8deg);
}
.opportunity-card-convening .opportunity-type {
  background:rgba(168,116,255,.13);
  border:1px solid rgba(168,116,255,.48);
  color:#d7beff;
}

.opportunity-card-atiprograms .opportunity-type {
  background:rgba(168,116,255,.13);
  border:1px solid rgba(42,176,247,.48);
  color:#80ccf5;
}

/* Event — warm violet / calendar-grid treatment */
.opportunity-card-atiprograms {
  --card-accent:#2ab0f7;
  background:linear-gradient(155deg,rgba(42,176,247,.22),rgba(255,255,255,.045) 58%,rgba(42,176,247,.08));
}
.opportunity-card-atiprograms::after {
  border-radius:14px;
  background:
    linear-gradient(rgba(168,116,255,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(168,116,255,.35) 1px,transparent 1px);
  background-size:22px 22px;
  transform:rotate(8deg);
}
.opportunity-card-atiprograms .opportunity-type {
  background:rgba(168,116,255,.13);
  border:1px solid rgba(168,116,255,.48);
  color:#80ccf5;
}


/* Community — connected-node / softer network treatment */
.opportunity-card-community {
  --card-accent:#e7edf0;
  background:radial-gradient(circle at 85% 18%,rgba(17,201,210,.13),transparent 28%),linear-gradient(145deg,rgba(255,255,255,.09),rgba(94,42,166,.2));
}
.opportunity-card-community::after {
  border-radius:50%;
  background:
    radial-gradient(circle at 22% 26%,#11c9d2 0 4px,transparent 5px),
    radial-gradient(circle at 72% 24%,#fff 0 4px,transparent 5px),
    radial-gradient(circle at 50% 72%,#9f74dd 0 4px,transparent 5px),
    linear-gradient(34deg,transparent 47%,rgba(255,255,255,.32) 48% 50%,transparent 51%),
    linear-gradient(-38deg,transparent 47%,rgba(17,201,210,.38) 48% 50%,transparent 51%);
}
.opportunity-card-community .opportunity-type {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
}

.opportunity-type {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin-bottom:2.2rem;
  padding:.38rem .65rem;
  border-radius:999px;
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.12em;
  line-height:1;
  text-transform:uppercase;
}
.opportunity-card h3 { font-size:1.35rem; font-weight:600; }
.opportunity-card p { min-height:6.5em; color:#dcd5e4; font-size:.88rem; }
.opportunity-card a { color:#fff; font-size:.78rem; font-weight:800; text-decoration:none; text-transform:uppercase; }
.opportunity-card a span { color:var(--card-accent); }
.opportunity-card a:hover { color:var(--card-accent); }
.cta-copy { max-width:720px; }

@media (min-width:1200px) {
  .role-grid > .role-col { flex:0 0 20%; max-width:20%; }
}
@media (max-width:991.98px) {
  .hero-video { object-position:62% center; }
  .hero-overlay { background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.68) 58%,rgba(0,0,0,.28)); }
}
@media (max-width:767.98px) {
  .hero-overlay { background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.66)); }
  .role-card { min-height:330px; }
}


/* HOW ATI HORIZONS WORKS intro */
.steps-intro {
  background: #f5f2ed;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.25rem, 4.5vw, 4rem);
  border-top: 1px solid rgba(26, 15, 39, 0.06);
}

.steps-eyebrow {
  margin: 0 0 0.9rem;
  color: #5b2ca0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.25;
}

.steps-heading {
  max-width: 900px;
  margin: 0;
  color: #21172d;
  font-size: clamp(2rem, 4.1vw, 4.15rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

@media (max-width: 767.98px) {
  .steps-intro {
    padding-top: 2.75rem;
    padding-bottom: 2.25rem;
  }

  .steps-heading {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.08;
  }
}

/* =========================================================
   HOW ATI HORIZONS WORKS — distinct visual chapter
   Creates a stronger break before the Find Your Place section.
   ========================================================= */
.steps-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  color: #fff;
  background:
    radial-gradient(circle at 12% 28%, rgba(17,201,210,.15), transparent 25%),
    radial-gradient(circle at 84% 20%, rgba(104,49,183,.32), transparent 34%),
    linear-gradient(125deg, #160b25 0%, #100619 44%, #1c0732 100%);
}

.steps-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent 88%);
}

.steps-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(52vw, 760px);
  aspect-ratio: 1;
  right: -16%;
  bottom: -46%;
  border-radius: 50%;
  border: 1px solid rgba(17,201,210,.25);
  box-shadow:
    0 0 0 55px rgba(17,201,210,.035),
    0 0 0 115px rgba(94,42,166,.055),
    0 0 120px rgba(94,42,166,.24);
}

.steps-intro {
  position: relative;
  background: transparent;
  padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(2.25rem, 4vw, 3.5rem);
  border-top: 0;
}

.steps-intro::after {
  content: "";
  display: block;
  width: clamp(72px, 9vw, 128px);
  height: 3px;
  margin-top: 2rem;
  background: linear-gradient(90deg, var(--cyan), rgba(17,201,210,0));
}

.steps-eyebrow {
  color: var(--cyan);
  font-size: .76rem;
  letter-spacing: .17em;
}

.steps-heading {
  max-width: 940px;
  color: #fff;
  font-weight: 400;
  text-wrap: balance;
}

.steps-section > .container-xxl {
  position: relative;
  padding-inline: clamp(.85rem, 2.2vw, 2rem) !important;
}

.steps-section .row.g-0 {
  margin-inline: -.55rem;
}

.steps-section .step-card {
  min-height: 385px;
  padding: .55rem;
  border: 0;
  background: transparent;
  color: #fff;
}

.steps-section .step-card + .step-card { border-left: 0; }

.steps-section .step-card > div {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 2px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  backdrop-filter: blur(9px);
  box-shadow: 0 24px 55px rgba(0,0,0,.18);
  transition: transform .38s cubic-bezier(.2,.7,.2,1), border-color .38s ease, background .38s ease, box-shadow .38s ease;
}

.steps-section .step-card:nth-child(2) > div {
  background: linear-gradient(150deg, rgba(3,3,5,.86), rgba(53,17,86,.62));
}

.steps-section .step-card:nth-child(3) > div {
  background: linear-gradient(145deg, rgba(73,30,124,.34), rgba(255,255,255,.025));
}

.steps-section .step-card > div::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), #7a43bf 56%, transparent 92%);
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform .4s ease;
}

.steps-section .step-card > div::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -78px;
  bottom: -85px;
  border: 1px solid rgba(17,201,210,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(17,201,210,.025), 0 0 0 56px rgba(94,42,166,.03);
  transition: transform .55s ease, opacity .55s ease;
}

.steps-section .step-card:hover > div {
  transform: translateY(-9px);
  border-color: rgba(17,201,210,.42);
  background-color: rgba(255,255,255,.035);
  box-shadow: 0 30px 70px rgba(0,0,0,.28);
}

.steps-section .step-card:hover > div::before { transform: scaleX(1); }
.steps-section .step-card:hover > div::after { transform: scale(1.1) rotate(12deg); opacity: .75; }

.steps-section .step-num {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: .8rem;
  border: 1px solid rgba(17,201,210,.58);
  border-radius: 50%;
  color: #fff;
  font-size: .88rem;
  letter-spacing: .05em;
  background: rgba(17,201,210,.07);
  transition: background .3s ease, transform .3s ease, border-color .3s ease;
}

.steps-section .step-card:hover .step-num {
  transform: scale(1.08);
  background: rgba(17,201,210,.16);
  border-color: var(--cyan);
}

.steps-section .step-card h3,
.steps-section .step-card-dark h3,
.steps-section .step-card p,
.steps-section .step-card-dark p,
.steps-section .step-card-dark .step-num {
  color: #fff;
}

.steps-section .step-card h3 {
  margin-top: .35rem;
  font-size: 1.08rem;
  letter-spacing: .07em;
}

.steps-section .step-card p {
  color: rgba(255,255,255,.78);
  line-height: 1.7;
}

.steps-section .step-icon {
  margin-top: 1.75rem;
  filter: drop-shadow(0 8px 18px rgba(17,201,210,.08));
}

/* The center icon originally used purple on black; brighten it in this chapter. */
.steps-section .icon-search .lens { border-color: #8050c4; }
.steps-section .icon-search .handle,
.steps-section .icon-search .scan { background: #8050c4; }
.steps-section .icon-network .network-ring,
.steps-section .person { border-color: #8050c4; }
.steps-section .person::after { background: #8050c4; }

/* A subtle one-time "come alive" movement as the step cards enter the viewport. */
.steps-section .step-card.reveal.is-visible .step-icon {
  animation: stepsIconArrive .75s cubic-bezier(.2,.75,.25,1) both;
}
.steps-section .step-card.reveal.is-visible:nth-child(2) .step-icon { animation-delay: .12s; }
.steps-section .step-card.reveal.is-visible:nth-child(3) .step-icon { animation-delay: .24s; }

@keyframes stepsIconArrive {
  0% { opacity: 0; transform: translateY(12px) scale(.9); }
  65% { opacity: 1; transform: translateY(-3px) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Make the following Find Your Place section read as a new, light chapter. */
.participate-section {
  position: relative;
  border-top: 8px solid #fff;
  box-shadow: inset 0 1px 0 rgba(35,17,52,.07);
}

@media (max-width: 991.98px) {
  .steps-section > .container-xxl::before { display: none; }
  .steps-section .step-card { min-height: 350px; }
}

@media (max-width: 767.98px) {
  .steps-section { padding-bottom: 3rem; }
  .steps-intro { padding-top: 3.4rem; }
  .steps-section .row.g-0 { margin-inline: 0; }
  .steps-section .step-card { padding: .45rem 0; }
  .steps-section .step-card > div { border-radius: 0; }
  .participate-section { border-top-width: 5px; }
}

/* =========================================================
   HOW ATI HORIZONS WORKS — updated copy + richer icon motion
   ========================================================= */
.steps-section .step-card > div {
  display: flex;
  flex-direction: column;
}

.steps-section .step-subhead {
  margin: .15rem 0 0;
  color: #fff;
  font-family: "Monda", Arial, sans-serif;
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.steps-section .step-card p {
  margin-top: 1rem;
  max-width: 360px;
}

/* STEP 02 — Explore: magnifier/search field becomes noticeably active on rollover */
.steps-section .icon-search {
  transform-origin: 54% 56%;
}
.steps-section .icon-search .search-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: .55;
  box-shadow: 0 0 10px rgba(17,201,210,.55);
}
.steps-section .icon-search .dot-a { left: 48px; top: 25px; }
.steps-section .icon-search .dot-b { left: 64px; top: 48px; width: 5px; height: 5px; }

.steps-section .step-card:nth-child(2):hover .icon-search {
  animation: exploreSweep 1.8s cubic-bezier(.45,0,.25,1) infinite;
}
.steps-section .step-card:nth-child(2):hover .icon-search .scan {
  animation: exploreScan 1.25s ease-in-out infinite alternate;
}
.steps-section .step-card:nth-child(2):hover .icon-search .search-dot {
  animation: exploreDot 1.15s ease-in-out infinite alternate;
}
.steps-section .step-card:nth-child(2):hover .icon-search .dot-b { animation-delay: .18s; }

@keyframes exploreSweep {
  0%,100% { transform: translate(-2px,1px) rotate(-4deg); }
  40% { transform: translate(6px,-3px) rotate(4deg); }
  70% { transform: translate(2px,4px) rotate(1deg); }
}
@keyframes exploreScan {
  from { transform: translate(-9px,-5px) rotate(45deg); opacity:.45; }
  to { transform: translate(10px,8px) rotate(45deg); opacity:1; }
}
@keyframes exploreDot {
  from { transform: scale(.75); opacity:.35; }
  to { transform: scale(1.45); opacity:1; }
}

/* STEP 03 — Activate: ecosystem hub that energizes outward */
.steps-section .icon-activate {
  width: 128px;
  height: 98px;
}
.steps-section .icon-activate span {
  position: absolute;
  display: block;
}
.activate-core {
  width: 24px;
  height: 24px;
  left: 52px;
  top: 36px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 7px rgba(17,201,210,.10), 0 0 18px rgba(17,201,210,.38);
  z-index: 3;
}
.activate-ring {
  left: 38px;
  top: 22px;
  width: 52px;
  height: 52px;
  border: 2px solid #8050c4;
  border-radius: 50%;
  opacity: .75;
}
.activate-ring.ring-b {
  left: 29px;
  top: 13px;
  width: 70px;
  height: 70px;
  border-color: rgba(128,80,196,.35);
}
.activate-node {
  width: 12px;
  height: 12px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: #170a28;
  z-index: 3;
}
.activate-node.node-a { left: 58px; top: 1px; }
.activate-node.node-b { left: 10px; top: 67px; }
.activate-node.node-c { right: 10px; top: 67px; }
.activate-link {
  height: 2px;
  background: linear-gradient(90deg, #8050c4, var(--cyan));
  transform-origin: left center;
  z-index: 1;
}
.activate-link.link-a { width: 27px; left: 64px; top: 28px; transform: rotate(-90deg); }
.activate-link.link-b { width: 46px; left: 48px; top: 57px; transform: rotate(146deg); }
.activate-link.link-c { width: 46px; left: 80px; top: 57px; transform: rotate(34deg); }
.activate-arrow {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--cyan);
  opacity: .75;
  z-index: 4;
}
.activate-arrow.arrow-a { left: 61px; top: 7px; transform: rotate(-90deg); }
.activate-arrow.arrow-b { left: 17px; top: 69px; transform: rotate(146deg); }
.activate-arrow.arrow-c { right: 17px; top: 69px; transform: rotate(34deg); }

.steps-section .step-card:nth-child(3):hover .activate-core {
  animation: activateCore 1.2s ease-in-out infinite;
}
.steps-section .step-card:nth-child(3):hover .ring-a {
  animation: activateRing 1.6s ease-out infinite;
}
.steps-section .step-card:nth-child(3):hover .ring-b {
  animation: activateRing 1.6s .35s ease-out infinite;
}
.steps-section .step-card:nth-child(3):hover .activate-node {
  animation: activateNode 1.2s ease-in-out infinite alternate;
}
.steps-section .step-card:nth-child(3):hover .node-b { animation-delay:.12s; }
.steps-section .step-card:nth-child(3):hover .node-c { animation-delay:.24s; }
.steps-section .step-card:nth-child(3):hover .activate-arrow {
  animation: activateArrow 1.35s ease-in-out infinite;
}
.steps-section .step-card:nth-child(3):hover .arrow-b { animation-delay:.16s; }
.steps-section .step-card:nth-child(3):hover .arrow-c { animation-delay:.32s; }

@keyframes activateCore {
  0%,100% { transform: scale(1); box-shadow:0 0 0 7px rgba(17,201,210,.10),0 0 18px rgba(17,201,210,.38); }
  50% { transform: scale(1.16); box-shadow:0 0 0 12px rgba(17,201,210,.05),0 0 28px rgba(17,201,210,.62); }
}
@keyframes activateRing {
  0% { transform: scale(.9); opacity:.78; }
  75%,100% { transform: scale(1.22); opacity:.08; }
}
@keyframes activateNode {
  to { transform: scale(1.3); background:var(--cyan); box-shadow:0 0 12px rgba(17,201,210,.65); }
}
@keyframes activateArrow {
  0%,100% { opacity:.25; transform:translate(0,0) rotate(var(--arrow-rot,0deg)); }
  50% { opacity:1; }
}
/* Preserve each arrow's direction while adding a small outward pulse. */
.steps-section .step-card:nth-child(3):hover .arrow-a { animation-name:activateArrowA; }
.steps-section .step-card:nth-child(3):hover .arrow-b { animation-name:activateArrowB; }
.steps-section .step-card:nth-child(3):hover .arrow-c { animation-name:activateArrowC; }
@keyframes activateArrowA { 0%,100%{transform:translateY(3px) rotate(-90deg);opacity:.25}50%{transform:translateY(-3px) rotate(-90deg);opacity:1} }
@keyframes activateArrowB { 0%,100%{transform:translate(3px,-1px) rotate(146deg);opacity:.25}50%{transform:translate(-3px,3px) rotate(146deg);opacity:1} }
@keyframes activateArrowC { 0%,100%{transform:translate(-3px,-1px) rotate(34deg);opacity:.25}50%{transform:translate(3px,3px) rotate(34deg);opacity:1} }

/* =========================================================
   Refinement pass — smoother step motion + opportunity studies
   ========================================================= */

/* Keep the three step icons visually centered between the label above and copy below. */
.steps-section .step-card > div {
  min-height: 430px;
}
.steps-section .step-icon {
  flex: 0 0 104px;
  width: 128px;
  height: 104px;
  margin: 1.65rem auto 1.65rem;
  align-self: center;
  display: block;
}
.steps-section .step-subhead,
.steps-section .step-card p {
  width: 100%;
}

/* STEP 02 — remove teal dots; move the magnifier as one smooth, controlled object. */
.steps-section .icon-search .search-group {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 55% 55%;
  will-change: transform;
}
.steps-section .icon-search .search-dot { display: none !important; }
.steps-section .step-card:nth-child(2):hover .icon-search {
  animation: none;
}
.steps-section .step-card:nth-child(2):hover .icon-search .search-group {
  animation: exploreGlide 2.35s cubic-bezier(.45,.05,.25,.98) infinite;
}
.steps-section .step-card:nth-child(2):hover .icon-search .scan {
  animation: exploreScanSoft 1.8s cubic-bezier(.45,.05,.25,.98) infinite alternate;
}
@keyframes exploreGlide {
  0%,100% { transform: translate3d(-2px,2px,0) rotate(-2.2deg); }
  30% { transform: translate3d(4px,-2px,0) rotate(1.2deg); }
  62% { transform: translate3d(7px,2px,0) rotate(2.4deg); }
  82% { transform: translate3d(2px,4px,0) rotate(.2deg); }
}
@keyframes exploreScanSoft {
  0% { transform: translate3d(-4px,-3px,0) rotate(45deg); opacity:.52; }
  100% { transform: translate3d(6px,5px,0) rotate(45deg); opacity:1; }
}

/* STEP 03 — restored prior connected-people/network icon, now with coordinated ecosystem motion. */
.steps-section .step-card:nth-child(3):hover .icon-network .person {
  animation: ecosystemPerson 1.7s cubic-bezier(.45,.05,.3,1) infinite alternate;
}
.steps-section .step-card:nth-child(3):hover .icon-network .p2 { animation-delay:.12s; }
.steps-section .step-card:nth-child(3):hover .icon-network .p3 { animation-delay:.24s; }
.steps-section .step-card:nth-child(3):hover .icon-network .network-ring {
  animation: ecosystemRing 1.7s ease-in-out infinite;
}
.steps-section .step-card:nth-child(3):hover .icon-network .link {
  animation: ecosystemLink 1.35s ease-in-out infinite alternate;
}
@keyframes ecosystemPerson { to { transform: translateY(-4px) scale(1.04); } }
@keyframes ecosystemRing { 50% { transform:scale(1.13); border-color:var(--cyan); opacity:.7; } }
@keyframes ecosystemLink { to { filter:brightness(1.45); opacity:.62; } }

/* Opportunity cards: remove decorative background imagery/patterns from the base cards. */
.opportunity-treatment-block { position: relative; }
.treatment-label {
  margin: 0 0 1rem;
  color: rgba(255,255,255,.58);
  font-family: "Monda", Arial, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.opportunity-card::after { display:none !important; content:none !important; }
.opportunity-card-open,
.opportunity-card-event,
.opportunity-card-community {
  background: rgba(255,255,255,.045);
}
.opportunity-card-open { --card-accent:#11c9d2; }
.opportunity-card-event { --card-accent:#a874ff; }
.opportunity-card-community { --card-accent:#e7edf0; }

/* Treatment 01: type-led, clean surface. */
.opportunity-treatment-block:first-of-type .opportunity-card {
  min-height: 315px;
}

/* Treatment 02: editorial / publication-like. */
.opportunity-card-editorial {
  min-height: 315px;
  background: transparent;
  border-width: 1px 0 1px 0;
  border-color: rgba(255,255,255,.22);
  padding: 1.75rem .35rem 1.5rem;
  backdrop-filter: none;
}
.opportunity-card-editorial::before {
  width: 100%;
  height: 2px;
  inset: 0 0 auto 0;
  transform: scaleX(.22);
  transform-origin:left;
}
.opportunity-card-editorial:hover::before { width:100%; transform:scaleX(1); }
.opportunity-card-editorial:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.025);
  box-shadow:none;
}
.editorial-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:2.8rem;
}
.editorial-index {
  color:rgba(255,255,255,.28);
  font-family:"Monda",Arial,sans-serif;
  font-size:2.1rem;
  line-height:1;
}

/* Treatment 03: image-forward. Replace these sample URLs with CMS-provided images later. */
.opportunity-card-photo {
  padding:0;
  background:#140c21;
}
.opportunity-card-photo::before { display:none; }
.opportunity-photo {
  width:100%;
  aspect-ratio: 16 / 8.8;
  background-size:cover;
  background-position:center;
  filter:saturate(.72) contrast(1.04);
  transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.photo-open {
  background-image:linear-gradient(rgba(28,7,54,.16),rgba(9,9,15,.2)),url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1000&q=80");
}
.photo-event {
  background-image:linear-gradient(rgba(28,7,54,.14),rgba(9,9,15,.28)),url("https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1000&q=80");
}
.photo-community {
  background-image:linear-gradient(rgba(28,7,54,.12),rgba(9,9,15,.25)),url("https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1000&q=80");
}
.photo-card-body {
  position:relative;
  padding:1.55rem 1.75rem 1.7rem;
  border-top:3px solid var(--card-accent);
}
.opportunity-card-photo .opportunity-type { margin-bottom:1.35rem; }
.opportunity-card-photo p { min-height:6.5em; }
.opportunity-card-photo:hover .opportunity-photo {
  transform:scale(1.025);
  filter:saturate(.95) contrast(1.08);
}

/* Optional icon-study sheet. */
.icon-study-page { background:#efece6; color:#1b1322; min-height:100vh; }
.icon-study-wrap { padding:4rem 0; }
.icon-study-title { color:#562691; font-size:clamp(2rem,4vw,4rem); }
.icon-study-group { margin-top:3.5rem; }
.icon-study-card { height:100%; padding:1.6rem; background:#fff; border:1px solid rgba(45,25,61,.12); }
.icon-study-card h3 { font-size:1rem; margin:1.1rem 0 .4rem; }
.icon-study-card p { font-size:.82rem; color:#5e5664; margin:0; }
.study-icon { position:relative; width:112px; height:92px; margin:auto; }
.study-icon span { position:absolute; display:block; }

/* Ecosystem alternative A: connected rings */
.eco-alt-rings .er-core{width:20px;height:20px;border-radius:50%;background:var(--cyan);left:46px;top:36px}
.eco-alt-rings .er{border:2px solid var(--purple);border-radius:50%;left:32px;top:22px;width:48px;height:48px}
.eco-alt-rings .er2{left:17px;top:7px;width:78px;height:78px;border-color:rgba(94,42,166,.45);border-style:dashed}
.icon-study-card:hover .eco-alt-rings .er{animation:studyPulse 1.5s ease-in-out infinite}
.icon-study-card:hover .eco-alt-rings .er2{animation:studySpin 4s linear infinite}

/* Ecosystem alternative B: bridge / cluster */
.eco-alt-bridge .eb-node{width:18px;height:18px;border-radius:50%;border:2px solid var(--purple);background:#fff;top:56px}
.eco-alt-bridge .n1{left:8px}.eco-alt-bridge .n2{left:47px;top:24px}.eco-alt-bridge .n3{right:8px}
.eco-alt-bridge .eb-link{height:3px;background:var(--cyan);width:48px;top:55px;transform-origin:left center}
.eco-alt-bridge .l1{left:23px;transform:rotate(-38deg)}.eco-alt-bridge .l2{left:64px;transform:rotate(38deg)}
.icon-study-card:hover .eco-alt-bridge .n2{animation:studyLift 1.1s ease-in-out infinite alternate}
.icon-study-card:hover .eco-alt-bridge .eb-link{animation:studyBright 1.1s ease-in-out infinite alternate}

/* Ecosystem alternative C: growing constellation */
.eco-alt-grow .eg-node{width:11px;height:11px;border-radius:50%;background:var(--purple)}
.eco-alt-grow .g1{left:50px;top:40px;background:var(--cyan);width:18px;height:18px}.eco-alt-grow .g2{left:15px;top:20px}.eco-alt-grow .g3{right:13px;top:17px}.eco-alt-grow .g4{left:20px;bottom:10px}.eco-alt-grow .g5{right:18px;bottom:12px}
.eco-alt-grow .eg-line{height:2px;background:rgba(94,42,166,.6);width:42px;left:35px;top:46px;transform-origin:center}
.eco-alt-grow .x1{transform:rotate(28deg)}.eco-alt-grow .x2{transform:rotate(-30deg)}.eco-alt-grow .x3{transform:rotate(75deg)}
.icon-study-card:hover .eco-alt-grow .eg-node{animation:studyNode 1.25s ease-in-out infinite alternate}.icon-study-card:hover .eco-alt-grow .g3{animation-delay:.15s}.icon-study-card:hover .eco-alt-grow .g4{animation-delay:.3s}

/* Partner alternatives */
.partner-alt-handshake .ph-left,.partner-alt-handshake .ph-right{width:52px;height:22px;border:3px solid var(--purple);top:34px;border-radius:18px}
.partner-alt-handshake .ph-left{left:9px;transform:rotate(18deg)}.partner-alt-handshake .ph-right{right:9px;transform:rotate(-18deg)}
.partner-alt-handshake .ph-link{width:18px;height:18px;background:var(--cyan);left:47px;top:36px;transform:rotate(45deg)}
.icon-study-card:hover .partner-alt-handshake .ph-left{animation:handLeft 1.1s ease-in-out infinite alternate}.icon-study-card:hover .partner-alt-handshake .ph-right{animation:handRight 1.1s ease-in-out infinite alternate}
.partner-alt-align .pa-ring{border:2px solid var(--purple);border-radius:50%;width:42px;height:42px;top:25px}.partner-alt-align .a1{left:12px}.partner-alt-align .a2{right:12px}.partner-alt-align .pa-core{width:16px;height:16px;border-radius:50%;background:var(--cyan);left:48px;top:38px}
.icon-study-card:hover .partner-alt-align .a1{animation:alignLeft 1.3s ease-in-out infinite alternate}.icon-study-card:hover .partner-alt-align .a2{animation:alignRight 1.3s ease-in-out infinite alternate}
.partner-alt-orbit .po-core{width:20px;height:20px;background:var(--cyan);border-radius:50%;left:46px;top:36px}.partner-alt-orbit .po-orbit{border:2px solid var(--purple);border-radius:50%;width:82px;height:42px;left:15px;top:25px;transform:rotate(-18deg)}.partner-alt-orbit .po-dot{width:10px;height:10px;background:var(--purple);border-radius:50%;left:17px;top:37px}
.icon-study-card:hover .partner-alt-orbit{animation:softRock 1.8s ease-in-out infinite alternate}.icon-study-card:hover .partner-alt-orbit .po-dot{animation:studyNode 1s ease-in-out infinite alternate}

/* Innovator alternatives */
.innov-alt-spark .is-core{width:34px;height:34px;border:3px solid var(--purple);left:39px;top:29px;transform:rotate(45deg)}.innov-alt-spark .is-ray{width:3px;height:18px;background:var(--cyan);left:55px;top:4px;transform-origin:50% 42px}.innov-alt-spark .r2{transform:rotate(60deg)}.innov-alt-spark .r3{transform:rotate(120deg)}
.icon-study-card:hover .innov-alt-spark .is-core{animation:studyPulse 1.2s ease-in-out infinite}.icon-study-card:hover .innov-alt-spark .is-ray{animation:studyBright 1.1s ease-in-out infinite alternate}
.innov-alt-launch .il-base{width:42px;height:42px;border:3px solid var(--purple);border-radius:50% 50% 50% 8px;left:34px;top:30px;transform:rotate(-45deg)}.innov-alt-launch .il-tip{width:12px;height:12px;background:var(--cyan);border-radius:50%;left:71px;top:17px}.innov-alt-launch .il-trail{width:3px;height:28px;background:var(--purple);left:37px;top:58px;transform:rotate(45deg)}
.icon-study-card:hover .innov-alt-launch{animation:launchNudge 1.35s ease-in-out infinite alternate}
.innov-alt-ripple .ir-core{width:18px;height:18px;background:var(--purple);border-radius:50%;left:47px;top:37px}.innov-alt-ripple .ir-ring{border:2px solid var(--cyan);border-radius:50%;left:35px;top:25px;width:42px;height:42px}.innov-alt-ripple .r2{left:21px;top:11px;width:70px;height:70px;border-color:rgba(94,42,166,.55)}
.icon-study-card:hover .innov-alt-ripple .ir-ring{animation:rippleOut 1.5s ease-out infinite}.icon-study-card:hover .innov-alt-ripple .r2{animation-delay:.25s}

@keyframes studyPulse{50%{transform:scale(1.13)}}
@keyframes studySpin{to{transform:rotate(360deg)}}
@keyframes studyLift{to{transform:translateY(-7px)}}
@keyframes studyBright{to{filter:brightness(1.8)}}
@keyframes studyNode{to{transform:scale(1.45);opacity:.6}}
@keyframes handLeft{to{transform:translateX(5px) rotate(13deg)}}
@keyframes handRight{to{transform:translateX(-5px) rotate(-13deg)}}
@keyframes alignLeft{to{transform:translateX(8px)}}
@keyframes alignRight{to{transform:translateX(-8px)}}
@keyframes softRock{to{transform:rotate(3deg)}}
@keyframes launchNudge{to{transform:translate(5px,-6px)}}
@keyframes rippleOut{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.25);opacity:.18}}

@media (max-width: 767.98px) {
  .steps-section .step-card > div { min-height: 0; }
  .steps-section .step-icon { margin-block: 1.35rem; }
  .opportunity-card-editorial { min-height: 0; }
}

/* =========================================================
   CURRENT OPPORTUNITIES — refined comparison
   Treatment 02 keeps photography secondary to the content.
   ========================================================= */
.opportunity-card-photo {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 315px;
  padding: 1.55rem 1.6rem 1.6rem;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.15);
  overflow: hidden;
}
.opportunity-card-photo::before {
  display: block;
  width: 3px;
  height: 100%;
  inset: 0 auto 0 0;
  background: var(--card-accent);
  transform: none;
}
.photo-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.65rem;
}
.opportunity-card-photo .opportunity-type {
  margin: .1rem 0 0;
  flex: 0 1 auto;
}
.opportunity-card-photo .opportunity-photo {
  position: relative;
  flex: 0 0 104px;
  width: 104px;
  height: 74px;
  aspect-ratio: auto;
  border-radius: 2px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  filter: saturate(.62) contrast(1.05) brightness(.82);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
  transform-origin: right top;
  transition: width .5s cubic-bezier(.2,.75,.2,1), flex-basis .5s cubic-bezier(.2,.75,.2,1), transform .5s cubic-bezier(.2,.75,.2,1), filter .4s ease, box-shadow .4s ease;
}
.opportunity-card-photo .opportunity-photo::after {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(19,7,34,.02), rgba(19,7,34,.5));
  transition: opacity .4s ease;
}
.photo-arrow {
  position: absolute;
  right: 7px;
  bottom: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #fff;
  background: rgba(8,5,14,.68);
  border: 1px solid rgba(255,255,255,.35);
  font-size: .74rem;
  opacity: 0;
  transform: translate(-4px,4px) scale(.85);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.75,.2,1), background .3s ease;
}
.photo-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  border-top: 0;
}
.opportunity-card-photo .photo-card-body h3 {
  max-width: 90%;
  margin-bottom: .75rem;
}
.opportunity-card-photo .photo-card-body p {
  min-height: 0;
  margin-bottom: 1.5rem;
}
.opportunity-card-photo .photo-card-body a { margin-top: auto; }
.opportunity-card-photo .photo-card-body a span {
  display: inline-block;
  transition: transform .3s ease;
}
.opportunity-card-photo:hover {
  transform: translateY(-7px);
  background: rgba(255,255,255,.065);
}
.opportunity-card-photo:hover .opportunity-photo {
  flex-basis: 124px;
  width: 124px;
  transform: translateY(-3px);
  filter: saturate(.92) contrast(1.08) brightness(.96);
  box-shadow: 0 10px 24px rgba(0,0,0,.26), 0 0 0 1px var(--card-accent);
}
.opportunity-card-photo:hover .opportunity-photo::after { opacity: .35; }
.opportunity-card-photo:hover .photo-arrow {
  opacity: 1;
  transform: translate(0,0) scale(1);
  background: color-mix(in srgb, var(--card-accent) 70%, #0a0610 30%);
}
.opportunity-card-photo:hover .photo-card-body a span { transform: translateX(5px); }

@media (max-width: 575.98px) {
  .photo-card-top { align-items: center; }
  .opportunity-card-photo .opportunity-photo,
  .opportunity-card-photo:hover .opportunity-photo {
    flex-basis: 92px;
    width: 92px;
    height: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opportunity-card-photo:hover .opportunity-photo,
  .opportunity-card-photo:hover .photo-arrow,
  .opportunity-card-photo:hover .photo-card-body a span { transform:none; }
}

/* STEP 02 — supplied magnifier animation, rebuilt inline so it can replay on hover. */
.steps-section .icon-search-svg {
  width: 132px;
  height: 104px;
  display: grid;
  place-items: center;
  overflow: visible;
}
.steps-section .icon-search-svg .search-animation-svg {
  width: 118px;
  height: 118px;
  overflow: visible;
  display: block;
}
.steps-section .icon-search-svg .search-magnifier,
.steps-section .icon-search-svg .search-scan-lines {
  transform-box: fill-box;
  transform-origin: center;
}
.steps-section .icon-search-svg.is-playing .search-magnifier {
  animation: suppliedSearchSweep 1.25s cubic-bezier(.445,.05,.55,.95) 1 both;
}
.steps-section .icon-search-svg.is-playing .search-scan-lines {
  animation: suppliedSearchLines 1.25s cubic-bezier(.445,.05,.55,.95) 1 both;
}
@keyframes suppliedSearchSweep {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  20%  { transform: translate3d(15px,7px,0) rotate(15.9deg); }
  40%  { transform: translate3d(15px,7px,0) rotate(15.9deg); }
  60%  { transform: translate3d(22px,0,0) rotate(15.9deg); }
  80%  { transform: translate3d(22px,0,0) rotate(15.9deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}
@keyframes suppliedSearchLines {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  20%  { transform: translate3d(-29px,-14px,0) rotate(-15.9deg); }
  40%  { transform: translate3d(-29px,-14px,0) rotate(-15.9deg); }
  60%  { transform: translate3d(-42px,0,0) rotate(-15.9deg); }
  80%  { transform: translate3d(-42px,0,0) rotate(-15.9deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .steps-section .icon-search-svg.is-playing .search-magnifier,
  .steps-section .icon-search-svg.is-playing .search-scan-lines { animation: none; }
}

/* STEP 02 — external SVG supplied by client. Kept at the same visual size as the previous icon. */
.steps-section .icon-search-svg {
  width: 128px;
  height: 95px;
  margin-top: 1.5rem;
  display: grid;
  place-items: center;
  overflow: visible;
}

.steps-section .icon-search-svg .search-animation-object {
  display: block;
  width: 153.4px;
  height: 153.4px;
  border: 0;
  pointer-events: none;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .steps-section .icon-search-svg .search-animation-object {
    animation: none !important;
  }
}

/* STEP 02 refinement — 20% larger than the current version and vertically centered
   in a dedicated icon zone between EXPLORE and its supporting subhead. */
.steps-section .step-card-dark .icon-search-svg {
  width: 100%;
  height: 138px;
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.steps-section .step-card-dark .icon-search-svg .search-animation-object {
  width: 184.08px;
  height: 184.08px;
  flex: 0 0 auto;
}

/* STEP 02 alignment refinement — keep the larger SVG, but give it the same
   vertical icon slot as Steps 01 and 03 so all subheads begin on one baseline. */
.steps-section .step-card-dark .icon-search-svg {
  width: 128px;
  height: 104px;
  flex: 0 0 104px;
  margin: 1.65rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.steps-section .step-card-dark .icon-search-svg .search-animation-object {
  width: 184.08px;
  height: 184.08px;
  max-width: none;
  flex: 0 0 auto;
}

/* =========================================================
   STEP 03 — ecosystem build: center hub + dotted radiating network
   ========================================================= */
.steps-section .icon-ecosystem-build {
  width: 128px;
  height: 104px;
  position: relative;
  overflow: visible;
}

/* Main hub retains the original purple treatment and visual weight. */
.steps-section .icon-ecosystem-build .ecosystem-core {
  position: absolute;
  z-index: 3;
  width: 36px;
  height: 36px;
  left: 46px;
  top: 42px;
  border: 2px solid #8050c4;
  border-radius: 50%;
  background: rgba(128,80,196,.08);
  box-shadow: 0 0 0 1px rgba(128,80,196,.06);
  transform-origin: center;
}

/* Every teal connection originates from the exact center of the hub. */
.steps-section .icon-ecosystem-build .eco-ray {
  --ray-length: 38px;
  --ray-angle: -90deg;
  position: absolute;
  z-index: 1;
  left: 64px;
  top: 60px;
  width: var(--ray-length);
  height: 4px;
  transform-origin: 0 50%;
  transform: rotate(var(--ray-angle));
  opacity: .92;
  background-image: radial-gradient(circle, var(--cyan) 0 1.55px, transparent 1.75px);
  background-repeat: repeat-x;
  background-position: 1px center;
  background-size: 7px 4px;
}
.steps-section .icon-ecosystem-build .ray-top {
  --ray-length: 42px;
  --ray-angle: -90deg;
}
.steps-section .icon-ecosystem-build .ray-left {
  --ray-length: 49px;
  --ray-angle: -161deg;
}
.steps-section .icon-ecosystem-build .ray-right {
  --ray-length: 49px;
  --ray-angle: -19deg;
}
.steps-section .icon-ecosystem-build .eco-ray-faint {
  --ray-length: 43px;
  opacity: .38;
  background-size: 8px 4px;
  filter: saturate(.78);
}
.steps-section .icon-ecosystem-build .ray-upper-left {
  --ray-angle: -126deg;
}
.steps-section .icon-ecosystem-build .ray-upper-right {
  --ray-angle: -54deg;
}

/* Three primary figures retain the established size and purple color. */
.steps-section .icon-ecosystem-build .person {
  z-index: 4;
  width: 18px;
  height: 18px;
  border: 2px solid #8050c4;
  background: transparent;
}
.steps-section .icon-ecosystem-build .person::after {
  width: 28px;
  height: 12px;
  left: -7px;
  top: 21px;
  background: #8050c4;
}
.steps-section .icon-ecosystem-build .p1 { left: 55px; top: 0; }
.steps-section .icon-ecosystem-build .p2 { left: 7px; top: 60px; }
.steps-section .icon-ecosystem-build .p3 { right: 3px; top: 60px; }

/* Smaller secondary figures sit midway between the top and side figures. */
.steps-section .icon-ecosystem-build .person-small {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
  opacity: .48;
}
.steps-section .icon-ecosystem-build .person-small::after {
  width: 19px;
  height: 8px;
  left: -5px;
  top: 15px;
  background: #8050c4;
  opacity: .82;
}
.steps-section .icon-ecosystem-build .p4 { left: 29px; top: 27px; }
.steps-section .icon-ecosystem-build .p5 { right: 27px; top: 27px; }

/* Retire the older continuous-line/ring hover behavior for this icon only. */
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .network-ring,
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .link {
  animation: none;
}
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .person {
  animation: none;
}

/* Hover rebuild sequence: hub -> primary rays -> secondary rays -> figures. */
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ecosystem-core {
  animation: ecoCoreBuild .48s cubic-bezier(.2,.8,.25,1) both;
}
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .eco-ray {
  animation: ecoRayBuild .58s cubic-bezier(.25,.75,.25,1) both;
}
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ray-top { animation-delay: .22s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ray-left { animation-delay: .30s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ray-right { animation-delay: .38s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ray-upper-left { animation-delay: .50s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ray-upper-right { animation-delay: .58s; }

.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .person {
  animation: ecoPersonBuild .48s cubic-bezier(.2,.9,.25,1.25) both;
}
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .p1 { animation-delay: .70s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .p2 { animation-delay: .80s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .p3 { animation-delay: .88s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .p4 { animation-delay: .96s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .p5 { animation-delay: 1.04s; }

@keyframes ecoCoreBuild {
  0% { opacity: 0; transform: scale(.35); }
  72% { opacity: 1; transform: scale(1.10); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ecoRayBuild {
  0% { opacity: 0; transform: rotate(var(--ray-angle)) scaleX(0); }
  100% { opacity: var(--ray-opacity, .92); transform: rotate(var(--ray-angle)) scaleX(1); }
}
@keyframes ecoPersonBuild {
  0% { opacity: 0; transform: translateY(5px) scale(.68); }
  72% { opacity: 1; transform: translateY(-1px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Preserve the intended faded-back opacity on the secondary ecosystem tier. */
.steps-section .icon-ecosystem-build .eco-ray-faint { --ray-opacity: .38; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .person-small {
  animation-name: ecoPersonBuildFaint;
}
@keyframes ecoPersonBuildFaint {
  0% { opacity: 0; transform: translateY(4px) scale(.7); }
  72% { opacity: .56; transform: translateY(-1px) scale(1.05); }
  100% { opacity: .48; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .steps-section .step-card:nth-child(3):hover .icon-ecosystem-build * {
    animation: none !important;
  }
}

/* =========================================================
   STEP 03 refinement — finer dotted rays that build dot-by-dot
   from the outside edge of the hub to the figure bodies.
   ========================================================= */
.steps-section .icon-ecosystem-build .eco-ray {
  /* Fine dots: about 50% smaller than the previous 3.1px dots. */
  height: 3px;
  background-image: radial-gradient(circle, var(--cyan) 0 .78px, transparent .9px);
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 5px 3px;
  opacity: .92;
  transform-origin: 0 50%;
}

/* Primary rays begin on the OUTSIDE of the 36px center circle,
   then terminate at the nearest edge of each solid half-circle body. */
.steps-section .icon-ecosystem-build .ray-top {
  left: 64px;
  top: 42px;
  --ray-length: 9px;
  --ray-angle: -90deg;
}
.steps-section .icon-ecosystem-build .ray-left {
  left: 48px;
  top: 69px;
  --ray-length: 25px;
  --ray-angle: 154deg;
}
.steps-section .icon-ecosystem-build .ray-right {
  left: 80px;
  top: 69px;
  --ray-length: 25px;
  --ray-angle: 26deg;
}

/* Secondary ecosystem tier also starts at the hub edge, but remains
   lighter and visually behind the three primary connections. */
.steps-section .icon-ecosystem-build .eco-ray-faint {
  height: 3px;
  background-image: radial-gradient(circle, var(--cyan) 0 .78px, transparent .9px);
  background-size: 5px 3px;
  opacity: .32;
  filter: saturate(.72);
}
.steps-section .icon-ecosystem-build .ray-upper-left {
  left: 48px;
  top: 52px;
  --ray-length: 9px;
  --ray-angle: -153deg;
}
.steps-section .icon-ecosystem-build .ray-upper-right {
  left: 80px;
  top: 52px;
  --ray-length: 9px;
  --ray-angle: -27deg;
}

/* Reveal the repeated dot pattern in discrete increments so the
   connection appears to build one dot at a time rather than stretch. */
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .eco-ray {
  animation-name: ecoRayDotBuild;
  animation-duration: .62s;
  animation-timing-function: steps(7, end);
  animation-fill-mode: both;
}
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ray-top { animation-delay: .22s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ray-left { animation-delay: .30s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ray-right { animation-delay: .38s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ray-upper-left { animation-delay: .50s; }
.steps-section .step-card:nth-child(3):hover .icon-ecosystem-build .ray-upper-right { animation-delay: .58s; }

@keyframes ecoRayDotBuild {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  1% {
    opacity: var(--ray-opacity, .92);
  }
  100% {
    opacity: var(--ray-opacity, .92);
    clip-path: inset(0 0 0 0);
  }
}

.steps-section .icon-ecosystem-build .eco-ray-faint { --ray-opacity: .32; }

/* Find Your Place — selected animated role icons */
.role-icon svg { width:82px; height:72px; display:block; overflow:visible; }
.role-icon svg * { position:static; display:initial; transform-box:fill-box; }

/* Partners & Sponsors — growth signal */
.icon-partner-growth .axis { position:absolute; left:9px; bottom:10px; width:60px; height:46px; border-left:2px solid rgba(109,53,194,.55); border-bottom:2px solid rgba(109,53,194,.55); }
.icon-partner-growth .seg { position:absolute; height:3px; background:var(--cyan); transform-origin:left center; border-radius:2px; opacity:.9; }
.icon-partner-growth .s1 { left:15px; top:46px; width:19px; --rot:rotate(-21deg); transform:rotate(-21deg); }
.icon-partner-growth .s2 { left:32px; top:39px; width:20px; --rot:rotate(-34deg); transform:rotate(-34deg); }
.icon-partner-growth .s3 { left:49px; top:28px; width:22px; --rot:rotate(-49deg); transform:rotate(-49deg); }
.icon-partner-growth .dot { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--purple); }
.icon-partner-growth .d1 { left:13px; top:43px; }
.icon-partner-growth .d2 { left:30px; top:36px; }
.icon-partner-growth .d3 { left:47px; top:25px; }
.icon-partner-growth .d4 { left:64px; top:9px; background:var(--cyan); }
.role-card:hover .icon-partner-growth .seg { animation:roleGrowSeg .38s ease-out both; }
.role-card:hover .icon-partner-growth .s2 { animation-delay:.18s; }
.role-card:hover .icon-partner-growth .s3 { animation-delay:.36s; }
.role-card:hover .icon-partner-growth .dot { animation:roleDotPop .32s ease-out both; }
.role-card:hover .icon-partner-growth .d2 { animation-delay:.15s; }
.role-card:hover .icon-partner-growth .d3 { animation-delay:.3s; }
.role-card:hover .icon-partner-growth .d4 { animation-delay:.5s; }
@keyframes roleGrowSeg { from { transform:var(--rot) scaleX(0); } to { transform:var(--rot) scaleX(1); } }
@keyframes roleDotPop { 0% { transform:scale(.35); opacity:.2; } 100% { transform:scale(1); opacity:1; } }

/* Innovators — active brain */
.icon-innovator-brain svg { width:74px; height:68px; }
.icon-innovator-brain path { fill:none; stroke:var(--purple); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.icon-innovator-brain .activity { stroke:var(--cyan); stroke-dasharray:12 55; stroke-dashoffset:0; opacity:.85; }
.role-card:hover .icon-innovator-brain .activity { animation:roleBrainPulse 1.4s linear 1; }
@keyframes roleBrainPulse { to { stroke-dashoffset:-68; } }

/* Technical Leaders — original network + strategic route */
.icon-leader-play .leader-node { position:absolute; width:14px; height:14px; border:2px solid var(--purple); border-radius:50%; background:#f8f7f3; z-index:2; }
.role-card:hover .icon-leader-play .leader-node { background:#fff; }
.icon-leader-play .n1 { left:34px; top:4px; }
.icon-leader-play .n2 { left:8px; top:46px; }
.icon-leader-play .n3 { left:60px; top:46px; }
.icon-leader-play .leader-line { position:absolute; height:2px; width:48px; background:var(--cyan); left:20px; top:38px; transform-origin:center; }
.icon-leader-play .la { transform:rotate(58deg); }
.icon-leader-play .lb { transform:rotate(-58deg); }
.icon-leader-play .route-svg { position:absolute; inset:0; width:82px; height:72px; overflow:visible; }
.icon-leader-play .route-path { fill:none; stroke:var(--purple); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:1 7; stroke-dashoffset:70; opacity:.88; }
.icon-leader-play .route-arrow { fill:none; stroke:var(--purple); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.role-card:hover .icon-leader-play .n1 { animation:roleLeaderFloat .8s ease-in-out alternate 2; }
.role-card:hover .icon-leader-play .route-path { animation:rolePlayRoute 1.25s cubic-bezier(.2,.72,.25,1) both; }
.role-card:hover .icon-leader-play .route-arrow { animation:roleArrowAppear .25s ease-out 1.05s both; }
@keyframes roleLeaderFloat { to { transform:translateY(-4px); } }
@keyframes rolePlayRoute { 0% { stroke-dashoffset:70; opacity:.2; } 100% { stroke-dashoffset:0; opacity:1; } }
@keyframes roleArrowAppear { from { opacity:0; transform:translateX(-3px); } to { opacity:1; transform:translateX(0); } }

/* Catalysts — activation circles; joining circle stays docked */
.icon-catalyst-activation .ring { position:absolute; border-radius:50%; border:2px solid var(--purple); transition:border-color .01s linear 1.04s; }
.icon-catalyst-activation .ring::after { content:""; position:absolute; inset:5px; border:2px solid var(--cyan); border-radius:50%; }
.icon-catalyst-activation .ring::before { content:""; position:absolute; inset:-2px; border:2px dotted var(--purple); border-radius:50%; opacity:0; transform-origin:center; }
.icon-catalyst-activation .big { left:23px; top:14px; width:42px; height:42px; }
.icon-catalyst-activation .s1 { left:7px; top:5px; width:24px; height:24px; }
.icon-catalyst-activation .s2 { left:7px; top:47px; width:24px; height:24px; }
.icon-catalyst-activation .s3 { left:72px; top:45px; width:24px; height:24px; }
.role-card:hover .icon-catalyst-activation .s3 { animation:roleCircleJoinStay 1.05s cubic-bezier(.24,.72,.18,1) both; border-color:transparent; }
.role-card:hover .icon-catalyst-activation .big,
.role-card:hover .icon-catalyst-activation .s1,
.role-card:hover .icon-catalyst-activation .s2 { border-color:transparent; }
.role-card:hover .icon-catalyst-activation .ring::before { animation:roleCatDotsOn .01s linear 1.04s both; }
.role-card:hover .icon-catalyst-activation .big::before { animation:roleCatDotsOn .01s linear 1.04s both, roleCatSpinCCW 1.7s linear 1.05s infinite; }
.role-card:hover .icon-catalyst-activation .s1::before,
.role-card:hover .icon-catalyst-activation .s2::before,
.role-card:hover .icon-catalyst-activation .s3::before { animation:roleCatDotsOn .01s linear 1.04s both, roleCatSpinCW 1.35s linear 1.05s infinite; }
@keyframes roleCircleJoinStay { 0% { transform:translate(8px,5px); } 72% { transform:translate(-10px,-6px); } 100% { transform:translate(-12px,-8px); } }
@keyframes roleCatDotsOn { to { opacity:1; } }
@keyframes roleCatSpinCW { to { transform:rotate(360deg); } }
@keyframes roleCatSpinCCW { to { transform:rotate(-360deg); } }


/* Opportunity date / location metadata */
.opportunity-card .opportunity-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.15rem 0 1.35rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(255,255,255,.13);
  font-family: "Monda", sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.opportunity-card .opportunity-meta .meta-divider {
  color: #20d8d2;
  opacity: .85;
}
.opportunity-card-event .opportunity-meta .meta-divider { color: #b99cff; }
.opportunity-card-community .opportunity-meta .meta-divider { color: #20d8d2; }

/* =========================================================
   Current Opportunities — aligned metadata + horizontal rail
   ========================================================= */
.opportunity-carousel-shell {
  position: relative;
}

.opportunity-carousel-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin: 0 0 1rem;
}

.opportunity-scroll-hint {
  color: rgba(255,255,255,.58);
  font-family: "Monda", sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.opportunity-carousel-buttons {
  display: flex;
  gap: .5rem;
}

.opportunity-carousel-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.045);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.opportunity-carousel-btn:hover,
.opportunity-carousel-btn:focus-visible {
  border-color: var(--cyan);
  background: rgba(17,201,210,.13);
  transform: translateY(-2px);
  outline: none;
}

.opportunity-scroller {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  overflow-x: auto;
  overflow-y: visible;
  padding: 2.15rem .25rem 2.35rem;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(17,201,210,.55) rgba(255,255,255,.08);
}

.opportunity-scroller::-webkit-scrollbar { height: 7px; }
.opportunity-scroller::-webkit-scrollbar-track {
  background: rgba(255,255,255,.07);
  border-radius: 999px;
}
.opportunity-scroller::-webkit-scrollbar-thumb {
  background: rgba(17,201,210,.5);
  border-radius: 999px;
}

.opportunity-slide {
  flex: 0 0 calc((100% - 3rem) / 3.35);
  min-width: 0;
  scroll-snap-align: center;
  transform-origin: center center;
  transition: flex-basis .32s cubic-bezier(.2,.75,.25,1), filter .32s ease;
}

/* The card nearest the center gets 20% more width, but keeps the same
   height and internal row structure so metadata remains horizontally aligned. */
.opportunity-slide.is-featured {
  flex-basis: calc(((100% - 3rem) / 3.35) * 1.2);
  filter: drop-shadow(0 18px 32px rgba(0,0,0,.18));
  z-index: 2;
}

.opportunity-slide .opportunity-card {
  display: grid;
  grid-template-rows: auto auto minmax(7.25em, 1fr) auto auto;
  height: 100%;
  min-height: 365px;
  padding: 2rem;
}

.opportunity-slide.is-featured .opportunity-card {
  border-color: color-mix(in srgb, var(--card-accent) 62%, rgba(255,255,255,.18));
  box-shadow: 0 22px 44px rgba(0,0,0,.18);
}

.opportunity-card .opportunity-type {
  justify-self: start;
}

.opportunity-card .opportunity-description {
  min-height: 0;
  margin-bottom: .55rem;
}

/* Remove the faded divider line and tighten the paragraph-to-meta spacing. */
.opportunity-card .opportunity-meta {
  min-height: 1.35rem;
  margin: .15rem 0 1.15rem;
  padding-top: 0;
  border-top: 0;
  align-self: end;
}

.opportunity-card a {
  align-self: end;
}

@media (max-width: 991.98px) {
  .opportunity-slide,
  .opportunity-slide.is-featured {
    flex: 0 0 46%;
  }
  .opportunity-slide.is-featured {
    filter: none;
  }
}

@media (max-width: 767.98px) {
  .opportunity-carousel-tools {
    justify-content: space-between;
  }
  .opportunity-scroll-hint {
    font-size: .62rem;
  }
  .opportunity-scroller {
    gap: 1rem;
    padding-top: 1rem;
  }
  .opportunity-slide,
  .opportunity-slide.is-featured {
    flex: 0 0 84%;
  }
  .opportunity-slide .opportunity-card {
    min-height: 0;
    grid-template-rows: auto auto auto auto auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opportunity-scroller { scroll-behavior: auto; }
  .opportunity-slide { transition: none; }
}


/* =========================================================
   Current Opportunities — looping overlapping center carousel
   ========================================================= */
.opportunity-carousel-shell {
  position: relative;
}

.opportunity-scroller {
  position: relative;
  display: block;
  height: 470px;
  overflow: hidden;
  padding: 36px 0 46px;
  scroll-snap-type: none;
  scrollbar-width: none;
  touch-action: pan-y;
  outline: none;
}
.opportunity-scroller::-webkit-scrollbar { display: none; }

.opportunity-slide {
  position: absolute;
  top: 56px;
  left: 50%;
  width: min(31%, 390px);
  height: 360px;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.9);
  transform-origin: center center;
  transition:
    transform .58s cubic-bezier(.22,.78,.24,1),
    opacity .4s ease,
    filter .45s ease;
  z-index: 0;
}

.opportunity-slide.is-prev,
.opportunity-slide.is-next {
  opacity: .86;
  pointer-events: auto;
  z-index: 1;
  filter: saturate(.86) brightness(.92);
}
.opportunity-slide.is-prev {
  transform: translateX(calc(-50% - 84%)) scale(.94);
}
.opportunity-slide.is-next {
  transform: translateX(calc(-50% + 84%)) scale(.94);
}

.opportunity-slide.is-featured {
  opacity: 1;
  pointer-events: auto;
  z-index: 4;
  width: min(37.2%, 468px); /* about 20% wider than side cards */
  height: 430px;
  top: 21px;
  transform: translateX(-50%) scale(1);
  filter: drop-shadow(0 28px 34px rgba(0,0,0,.34));
}

.opportunity-slide .opportunity-card {
  display: grid;
  grid-template-rows: auto auto minmax(7.25em, 1fr) auto auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 2rem;
  transition: border-color .28s ease, box-shadow .28s ease;
}
.opportunity-slide.is-featured .opportunity-card {
  border-color: color-mix(in srgb, var(--card-accent) 68%, rgba(255,255,255,.2));
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    0 0 26px rgba(0,0,0,.16);
}

/* The center-card treatment is the only scale emphasis.
   Do not alter a slide's transform on hover because its transform controls
   carousel positioning. Only suppress hover scaling on the card itself. */
.opportunity-card:hover {
  transform: none;
}
.opportunity-card:hover::before { width: 5px; }

/* Give the overlapping side cards enough visible face area. */
.opportunity-carousel-shell::before,
.opportunity-carousel-shell::after {
  content: "";
  position: absolute;
  top: 50px;
  bottom: 38px;
  width: 5%;
  z-index: 6;
  pointer-events: none;
}
.opportunity-carousel-shell::before {
  left: 0;
  background: linear-gradient(90deg, #22182f 15%, rgba(34,24,47,0));
}
.opportunity-carousel-shell::after {
  right: 0;
  background: linear-gradient(270deg, #22182f 15%, rgba(34,24,47,0));
}

.opportunity-scroller.is-moving .opportunity-slide { pointer-events: none; }

@media (max-width: 991.98px) {
  .opportunity-scroller { height: 455px; }
  .opportunity-slide {
    width: 42%;
    height: 350px;
  }
  .opportunity-slide.is-featured {
    width: 50.4%;
    height: 415px;
  }
  .opportunity-slide.is-prev { transform: translateX(calc(-50% - 72%)) scale(.92); }
  .opportunity-slide.is-next { transform: translateX(calc(-50% + 72%)) scale(.92); }
}

@media (max-width: 767.98px) {
  .opportunity-scroller {
    height: 430px;
    padding-inline: 0;
    touch-action: pan-y;
  }
  .opportunity-slide {
    width: 70%;
    height: 330px;
    top: 58px;
  }
  .opportunity-slide.is-featured {
    width: 82%;
    height: 390px;
    top: 25px;
  }
  .opportunity-slide.is-prev { transform: translateX(calc(-50% - 78%)) scale(.9); }
  .opportunity-slide.is-next { transform: translateX(calc(-50% + 78%)) scale(.9); }
  .opportunity-slide .opportunity-card {
    grid-template-rows: auto auto 1fr auto auto;
    padding: 1.55rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .opportunity-slide { transition: none; }
}

/* =========================================================
   Current Opportunities — opaque featured card + color option
   ========================================================= */
/* The featured card is intentionally opaque so overlapping cards never show through it. */
.opportunity-carousel-shell:not(.opportunity-carousel-color) .opportunity-slide.is-featured .opportunity-card {
  background: linear-gradient(145deg, #2d213b 0%, #24192f 58%, #201529 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.opportunity-carousel-option-label {
  margin: 2.5rem 0 .8rem;
  color: rgba(255,255,255,.62);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Alternate carousel: opportunity type is communicated by the full card surface. */
.opportunity-carousel-color {
  margin-top: .25rem;
}
.opportunity-carousel-color .opportunity-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(255,255,255,.24);
}
.opportunity-carousel-color .opportunity-card-open {
  --card-accent: #b8ffff;
  background: linear-gradient(145deg, #087f86 0%, #086d73 100%);
  color: #fff;
}
.opportunity-carousel-color .opportunity-card-event {
  --card-accent: #e3cfff;
  background: linear-gradient(145deg, #7140ad 0%, #59308f 100%);
  color: #fff;
}
.opportunity-carousel-color .opportunity-card-community {
  --card-accent: #6c3ea1;
  background: linear-gradient(145deg, #f8f5f9 0%, #eee9f1 100%);
  color: #24192f;
  border-color: rgba(36,25,47,.16);
}
.opportunity-carousel-color .opportunity-card-community h3,
.opportunity-carousel-color .opportunity-card-community p,
.opportunity-carousel-color .opportunity-card-community a {
  color: #24192f;
}
.opportunity-carousel-color .opportunity-card-community .opportunity-description {
  color: #554d5d;
}
.opportunity-carousel-color .opportunity-card-community .opportunity-meta {
  color: #352a3e;
}
.opportunity-carousel-color .opportunity-card-community .opportunity-type {
  color: #5b2c8d;
  border-color: rgba(91,44,141,.28);
  background: rgba(91,44,141,.08);
}
.opportunity-carousel-color .opportunity-card-community a span,
.opportunity-carousel-color .opportunity-card-community .meta-divider {
  color: #6c3ea1;
}
.opportunity-carousel-color .opportunity-slide.is-featured .opportunity-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}