/* =========================================================
   Gen-Smart Research Concept Pages
   ========================================================= */

.concept-link {
  color: inherit;
  text-decoration: none;
}

.concept-link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 5px;
}

.concept-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 14% 12%, rgba(89,30,218,.13), transparent 28%),
    radial-gradient(circle at 84% 26%, rgba(79,223,255,.08), transparent 27%),
    radial-gradient(circle at 70% 88%, rgba(228,92,249,.06), transparent 30%),
    var(--bg);
}

.concept-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(11,13,28,.78);
  backdrop-filter: blur(18px);
}

.concept-nav-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #bac2df;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.back-link:hover {
  color: var(--cyan);
}

.concept-hero {
  padding: 90px 0 54px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,.88fr);
  gap: 76px;
  align-items: center;
}

.concept-kicker {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.concept-kicker .code {
  padding: 6px 9px;
  border: 1px solid rgba(79,223,255,.28);
  border-radius: 999px;
  color: var(--text);
}

.concept-hero h1 {
  margin: 22px 0 24px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(62px, 8vw, 126px);
  line-height: .88;
  letter-spacing: -.065em;
}

.concept-hero h1 span {
  background: linear-gradient(90deg, var(--cyan), var(--blue) 35%, var(--purple) 65%, var(--magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.concept-hero .lead {
  max-width: 720px;
  color: #a5adc9;
  font-size: 18px;
  line-height: 1.75;
}

.reality-note {
  margin-top: 30px;
  padding: 16px 18px;
  border-left: 2px solid var(--magenta);
  background: rgba(228,92,249,.045);
  color: #aab2ce;
  font-size: 13px;
  line-height: 1.65;
  max-width: 680px;
}

.hero-machine {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.hero-machine::before,
.hero-machine::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(79,223,255,.20);
  border-radius: 50%;
  animation: conceptSpin 20s linear infinite;
}

.hero-machine::before { width: 86%; aspect-ratio: 1; }
.hero-machine::after {
  width: 66%;
  aspect-ratio: 1;
  border-color: rgba(228,92,249,.22);
  border-style: dashed;
  animation-direction: reverse;
  animation-duration: 14s;
}

.hero-frame {
  width: min(100%, 470px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(158,96,247,.22);
  border-radius: 26px;
  background: #0f1328;
  box-shadow:
    0 28px 80px rgba(0,0,0,.38),
    0 0 55px rgba(89,30,218,.13);
}

.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.025);
  transition: transform .75s cubic-bezier(.2,.8,.2,1), filter .75s ease;
}

.hero-frame:hover img {
  transform: scale(1.07);
  filter: saturate(1.12) brightness(1.05);
}

.scan-line {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), transparent);
  box-shadow: 0 0 18px rgba(79,223,255,.55);
  animation: scan 4.7s ease-in-out infinite;
}

.hero-hud {
  position: absolute;
  z-index: 4;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 9px;
  letter-spacing: .16em;
  color: #c4cae0;
}

.hero-hud span {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,13,28,.68);
  backdrop-filter: blur(8px);
}

@keyframes scan {
  0%,100% { top: 10%; opacity: .18; }
  50% { top: 90%; opacity: .95; }
}

@keyframes conceptSpin {
  to { transform: rotate(360deg); }
}

.concept-section {
  padding: 92px 0;
  border-top: 1px solid var(--line);
}

.concept-section-grid {
  display: grid;
  grid-template-columns: .34fr 1fr;
  gap: 54px;
}

.concept-section h2 {
  margin: 0 0 26px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -.045em;
}

.concept-section p {
  color: #9ca5c3;
  line-height: 1.8;
  max-width: 780px;
}

.flow-grid,
.stack-grid,
.challenge-grid {
  margin-top: 46px;
  display: grid;
  gap: 14px;
}

.flow-grid { grid-template-columns: repeat(4, 1fr); }
.stack-grid { grid-template-columns: repeat(3, 1fr); }
.challenge-grid { grid-template-columns: repeat(3, 1fr); }

.flow-card,
.stack-card,
.challenge-card {
  position: relative;
  min-height: 190px;
  padding: 24px;
  border: 1px solid rgba(91,157,248,.17);
  background:
    linear-gradient(145deg, rgba(79,223,255,.025), rgba(89,30,218,.05), rgba(228,92,249,.025)),
    #101329;
  overflow: hidden;
}

.flow-card::after,
.stack-card::after,
.challenge-card::after {
  content: "";
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  right: -30px;
  bottom: -36px;
  background: radial-gradient(circle, rgba(79,223,255,.12), transparent 68%);
}

.flow-card b,
.stack-card b,
.challenge-card b {
  display: block;
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: .16em;
  margin-bottom: 38px;
}

.flow-card h3,
.stack-card h3,
.challenge-card h3 {
  margin: 0 0 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 21px;
}

.flow-card p,
.stack-card p,
.challenge-card p {
  font-size: 13px;
  line-height: 1.65;
  margin: 0;
}

.concept-diagram {
  margin-top: 48px;
  border: 1px solid rgba(158,96,247,.18);
  padding: 42px;
  background:
    radial-gradient(circle at 20% 20%, rgba(79,223,255,.06), transparent 28%),
    radial-gradient(circle at 80% 70%, rgba(228,92,249,.07), transparent 30%),
    #0e1124;
  position: relative;
  overflow: hidden;
}

.signal-track {
  height: 112px;
  position: relative;
  display: flex;
  align-items: center;
}

.signal-track svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.signal-path {
  fill: none;
  stroke: url(#signalGradient);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 13 9;
  animation: dashFlow 1.8s linear infinite;
}

@keyframes dashFlow {
  to { stroke-dashoffset: -44; }
}

.diagram-labels {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #aeb6d1;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-next {
  padding: 90px 0 110px;
}

.next-card {
  padding: 42px;
  border: 1px solid rgba(158,96,247,.20);
  background:
    linear-gradient(120deg, rgba(79,223,255,.04), rgba(89,30,218,.08), rgba(228,92,249,.05));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.next-card span {
  color: #8f99bc;
  font-size: 10px;
  letter-spacing: .15em;
}

.next-card h3 {
  margin: 10px 0 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(28px, 4vw, 48px);
}

.next-arrow {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(79,223,255,.34);
  font-size: 26px;
  transition: transform .25s ease, background .25s ease;
}

.next-card:hover .next-arrow {
  transform: translateX(5px) rotate(-8deg);
  background: rgba(79,223,255,.08);
}

@media (max-width: 900px) {
  .concept-hero {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 64px;
  }
  .hero-machine { min-height: 460px; }
  .concept-section-grid { grid-template-columns: 1fr; }
  .flow-grid { grid-template-columns: repeat(2,1fr); }
  .stack-grid, .challenge-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .concept-nav-inner { min-height: 68px; }
  .concept-nav .gen-logo { width: 155px; }
  .concept-hero h1 { font-size: 55px; }
  .concept-hero .lead { font-size: 15px; }
  .hero-machine { min-height: 390px; }
  .hero-frame { max-width: 350px; }
  .flow-grid { grid-template-columns: 1fr; }
  .concept-diagram { padding: 24px 18px; }
  .diagram-labels { font-size: 8px; gap: 8px; }
  .next-card { padding: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-machine::before,
  .hero-machine::after,
  .scan-line,
  .signal-path {
    animation: none !important;
  }
}


/* V2.1 — transparent, floating research hero illustrations */
.hero-machine{overflow:visible;min-height:520px}
.hero-machine::before,.hero-machine::after{opacity:.55;filter:drop-shadow(0 0 16px rgba(79,223,255,.12))}
.hero-illustration{width:min(100%,560px);min-height:470px;position:relative;z-index:2;display:grid;place-items:center;isolation:isolate;overflow:visible}
.hero-illustration img{position:relative;z-index:4;width:min(100%,520px);max-height:490px;object-fit:contain;display:block;filter:drop-shadow(0 25px 30px rgba(0,0,0,.38)) drop-shadow(0 0 22px rgba(79,223,255,.25)) drop-shadow(0 0 36px rgba(228,92,249,.16));animation:heroFloat 5.5s ease-in-out infinite;transition:filter .45s ease,transform .45s ease}
.hero-illustration:hover img{filter:drop-shadow(0 28px 34px rgba(0,0,0,.4)) drop-shadow(0 0 30px rgba(79,223,255,.38)) drop-shadow(0 0 44px rgba(228,92,249,.24))}
.hero-glow{position:absolute;z-index:-1;width:68%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(79,223,255,.18),rgba(91,157,248,.09) 30%,rgba(228,92,249,.08) 48%,transparent 72%);filter:blur(20px);animation:heroAura 4.8s ease-in-out infinite}
.hero-orbit{position:absolute;z-index:1;border-radius:50%;pointer-events:none}.orbit-a{width:91%;aspect-ratio:1;border:1px solid rgba(79,223,255,.25);animation:orbitA 8s ease-in-out infinite}.orbit-b{width:72%;aspect-ratio:1;border:1px dashed rgba(228,92,249,.30);animation:orbitB 10s ease-in-out infinite}
.hero-spark{position:absolute;z-index:5;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan),0 0 20px var(--cyan);pointer-events:none}.spark-a{left:11%;top:26%;animation:sparkA 5s ease-in-out infinite}.spark-b{right:12%;top:35%;background:var(--magenta);box-shadow:0 0 8px var(--magenta),0 0 20px var(--magenta);animation:sparkB 6.2s ease-in-out infinite}.spark-c{right:26%;bottom:17%;width:4px;height:4px;background:var(--purple);box-shadow:0 0 10px var(--purple);animation:sparkC 4.6s ease-in-out infinite}
.hero-illustration .hero-hud{left:5%;right:5%;bottom:3%;z-index:6}.hero-illustration .hero-hud span{background:rgba(11,13,28,.52);border-color:rgba(79,223,255,.18);box-shadow:0 0 22px rgba(89,30,218,.08)}
@keyframes heroFloat{0%,100%{transform:translate3d(0,0,0) rotate(-.8deg) scale(.985)}50%{transform:translate3d(0,-15px,0) rotate(1deg) scale(1.018)}}
@keyframes heroAura{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.1);opacity:1}}
@keyframes orbitA{0%,100%{transform:rotate(-16deg) scaleY(.37) scale(.94);opacity:.45}50%{transform:rotate(-5deg) scaleY(.42) scale(1.04);opacity:.92}}
@keyframes orbitB{0%,100%{transform:rotate(28deg) scaleY(.49) scale(.96);opacity:.38}50%{transform:rotate(44deg) scaleY(.44) scale(1.05);opacity:.8}}
@keyframes sparkA{0%,100%{transform:translate(0,0) scale(.7);opacity:.3}50%{transform:translate(25px,-30px) scale(1.2);opacity:1}}
@keyframes sparkB{0%,100%{transform:translate(0,0);opacity:.25}50%{transform:translate(-28px,24px);opacity:1}}
@keyframes sparkC{0%,100%{transform:translate(0,0);opacity:.3}50%{transform:translate(-18px,-28px) scale(1.35);opacity:.9}}
@media(max-width:900px){.hero-illustration{min-height:430px;max-width:610px;margin-inline:auto}}
@media(max-width:560px){.hero-machine{min-height:350px}.hero-illustration{min-height:340px}.hero-illustration img{width:min(100%,430px);max-height:360px}.hero-illustration .hero-hud{bottom:-4px}}
@media(prefers-reduced-motion:reduce){.hero-illustration img,.hero-glow,.hero-orbit,.hero-spark{animation:none!important}}

/* Keep research hero photos static; surrounding background/HUD animations remain active. */
.hero-illustration img,
.hero-illustration:hover img {
  animation: none !important;
  transform: none !important;
}

/* Mind-Photos research landscape */
.research-landscape{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2rem}.research-evidence{border:1px solid rgba(0,252,255,.16);background:rgba(39,47,64,.34);padding:1.4rem;position:relative;overflow:hidden}.research-evidence::before{content:"";position:absolute;inset:0 auto auto 0;width:42%;height:2px;background:linear-gradient(90deg,#00fcff,#680096,#ff00a7)}.research-evidence .status{font-size:.68rem;letter-spacing:.14em;color:#00fcff;font-weight:700}.research-evidence h3{margin:.7rem 0 .55rem}.research-evidence p{margin:0 0 .9rem}.research-link{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.prototype-architecture{display:grid;grid-template-columns:repeat(5,1fr);gap:.65rem;margin:2rem 0}.architecture-node{min-height:145px;border:1px solid rgba(0,252,255,.18);padding:1rem;background:rgba(8,12,22,.6)}.architecture-node b{color:#00fcff;font-size:.68rem;letter-spacing:.12em}.architecture-node h3{font-size:1rem;margin:.55rem 0}.architecture-node p{font-size:.82rem;margin:0}.research-question{border-left:2px solid #ff00a7;padding:1rem 1.2rem;background:rgba(255,0,167,.04);margin-top:1.4rem}.research-question strong{color:#ff00a7}.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem}.phase-card{border:1px solid rgba(104,0,150,.35);padding:1.25rem}.phase-card b{color:#00fcff;font-size:.7rem;letter-spacing:.12em}.phase-card h3{margin:.6rem 0}.ethics-note{margin-top:1.5rem;padding:1.25rem;border:1px solid rgba(255,0,167,.22);background:linear-gradient(135deg,rgba(104,0,150,.08),rgba(0,252,255,.035))}@media(max-width:900px){.research-landscape,.phase-grid{grid-template-columns:1fr}.prototype-architecture{grid-template-columns:1fr 1fr}}@media(max-width:560px){.prototype-architecture{grid-template-columns:1fr}}


/* Mind-Map research flowchart */
.mind-flow-wrap{margin:2.2rem 0 2.5rem;padding:1.4rem;border:1px solid rgba(0,252,255,.18);background:linear-gradient(145deg,rgba(8,12,22,.86),rgba(39,47,64,.28));overflow:hidden;position:relative}
.mind-flow-wrap::before{content:"";position:absolute;left:0;top:0;width:34%;height:2px;background:linear-gradient(90deg,#00fcff,#354596,#ff00a7)}
.mind-flow-title{display:flex;justify-content:space-between;gap:1rem;align-items:end;margin-bottom:1.35rem}.mind-flow-title span{font-size:.67rem;letter-spacing:.15em;color:#00fcff;font-weight:800}.mind-flow-title strong{font-size:.9rem;color:#fbffff;font-weight:600}
.mind-flowchart{display:flex;flex-direction:column;align-items:center;gap:.2rem;max-width:760px;margin:0 auto}
.flow-node,.flow-decision{width:min(100%,620px);border:1px solid rgba(0,252,255,.2);background:rgba(4,8,17,.72);padding:1rem 1.1rem;min-width:0;position:relative}.flow-node::after{content:"";position:absolute;inset:auto 16px 0;height:1px;background:linear-gradient(90deg,#00fcff,#680096,#ff00a7);opacity:.55}.flow-num{display:inline-grid;place-items:center;width:26px;height:26px;border:1px solid rgba(0,252,255,.35);border-radius:50%;font-size:.62rem;color:#00fcff;margin-bottom:.7rem}.flow-node b,.flow-decision>b{display:block;color:#00fcff;font-size:.62rem;letter-spacing:.12em}.flow-node strong{display:block;font-size:.92rem;line-height:1.35;margin:.45rem 0;color:#fbffff}.flow-node small{display:block;font-size:.7rem;line-height:1.45;color:rgba(251,255,255,.56)}
.flow-arrow{height:34px;width:2px;background:linear-gradient(180deg,#00fcff,#354596,#ff00a7);position:relative;font-size:0;opacity:.78}.flow-arrow::after{content:"";position:absolute;left:50%;bottom:-1px;width:9px;height:9px;border-right:2px solid #ff00a7;border-bottom:2px solid #ff00a7;transform:translateX(-50%) rotate(45deg)}
.flow-decision{border-color:rgba(255,0,167,.3);padding:1rem}.flow-decision>b{color:#ff00a7;margin-bottom:.75rem}.decision-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}.decision-branches div{padding:.7rem;border:1px solid rgba(104,0,150,.35);background:rgba(104,0,150,.08)}.decision-branches span{display:block;color:#00fcff;font-size:.56rem;letter-spacing:.12em;font-weight:800}.decision-branches strong{display:block;color:#fbffff;font-size:.72rem;line-height:1.35;margin-top:.25rem}.flow-output{border-color:rgba(255,0,167,.28);background:linear-gradient(145deg,rgba(104,0,150,.13),rgba(0,252,255,.035))}.flow-caption{max-width:760px;margin:1rem auto 0;font-size:.7rem;line-height:1.5;color:rgba(251,255,255,.5);text-align:center}
@media(max-width:800px){.mind-flow-title{display:block}.mind-flow-title strong{display:block;margin-top:.4rem}.decision-branches{grid-template-columns:1fr}.flow-node,.flow-decision{width:100%}}


/* =========================================================
   Dedicated collaboration section
   ========================================================= */
.collaboration-section {
  padding: 34px 0 86px;
}

.collaboration-shell {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(180px,.42fr) minmax(0,1fr);
  gap: 56px;
  padding: clamp(34px,5vw,66px);
  border: 1px solid rgba(79,223,255,.18);
  background:
    radial-gradient(circle at 0% 0%, rgba(79,223,255,.09), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(228,92,249,.08), transparent 34%),
    rgba(255,255,255,.018);
}

.collaboration-shell::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -105px;
  top: -105px;
  border: 1px solid rgba(228,92,249,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 38px rgba(79,223,255,.025), 0 0 0 76px rgba(89,30,218,.018);
  pointer-events: none;
}

.collaboration-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.collaboration-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  color: #9aa7c7;
}

.collaboration-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(79,223,255,.72);
}

.collaboration-content {
  position: relative;
  z-index: 1;
}

.collaboration-eyebrow {
  color: var(--cyan);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

.collaboration-content h2 {
  max-width: 760px;
  margin: 14px 0 20px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(36px,5vw,68px);
  line-height: .98;
  letter-spacing: -.045em;
}

.collaboration-content > p {
  max-width: 760px;
  color: #9aa3bc;
  font-size: 15px;
  line-height: 1.8;
}

.collaboration-tracks {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.collaboration-tracks span {
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: #c5cce0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.collaboration-action-row {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.collaboration-cta {
  min-width: min(100%, 278px);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 17px 19px;
  border: 1px solid rgba(79,223,255,.34);
  color: #f7fbff;
  background: linear-gradient(110deg, rgba(79,223,255,.09), rgba(89,30,218,.12), rgba(228,92,249,.08));
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.collaboration-cta b {
  color: var(--cyan);
  font-size: 17px;
}

.collaboration-cta:hover {
  transform: translateY(-2px);
  border-color: rgba(228,92,249,.58);
  background: linear-gradient(110deg, rgba(79,223,255,.13), rgba(89,30,218,.17), rgba(228,92,249,.12));
}

.collaboration-action-row p {
  max-width: 430px;
  margin: 0;
  color: #77819c;
  font-size: 11px;
  line-height: 1.65;
}

@media (max-width: 760px) {
  .collaboration-section { padding-bottom: 64px; }
  .collaboration-shell { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; }
  .collaboration-meta { gap: 14px; }
  .collaboration-content h2 { font-size: clamp(34px,12vw,52px); }
  .collaboration-action-row { align-items: stretch; }
  .collaboration-cta { width: 100%; }
}