@charset "utf-8";
/* home.css - the homepage below the video hero, loaded on that page only (index.js > styles).
   The bands: a faint medical texture held still behind the copy, the motto words ghosted large,
   the NurOwn and exosome infographics. Colours come from the tokens in styles.css; the only
   text colours set here are --text / --text-3 / #fff, all measured by tools/a11y.js. */

/* ---- band: a section with a fixed texture behind it -------------------------------------- */
.band{position:relative;overflow:hidden;background:var(--paper)}
/* Dark band, light page: re-point the tokens its contents already read. */
.band--raised{background:var(--ink-800);--text:#fff;--text-3:var(--on-dark-3);
  --label:var(--on-dark-4);--line:var(--dark-line);--card-bg:rgba(255,255,255,.04);
  --cyan-deep:var(--cyan)}
.band > .wrap{position:relative;z-index:2}
.band__bg{position:absolute;inset:-20% 0;z-index:0;pointer-events:none;
  background-position:center;background-size:cover;background-attachment:fixed;opacity:.1;filter:blur(1px)}
.band__bg--petri{background-image:url(../img/bg-petri-dish.jpg)}
.band__bg--neural{background-image:url(../img/bg-neural-cells.jpg)}
.band__bg--molecular{background-image:url(../img/bg-molecular.jpg)}
.band__veil{position:absolute;inset:0;z-index:1;pointer-events:none}
/* No dissolve: the dark band starts dark at its own top edge. */
.band--raised .band__veil{background:linear-gradient(180deg,var(--ink-800) 0%,
  rgba(8,25,42,.72) 50%,var(--ink-800) 100%)}
/* The mission band stays light: the photograph reads as texture under a pale wash. */
.band__veil--radial{background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(0,174,239,.06) 0%,rgba(223,234,244,.86) 55%,var(--paper) 100%)}
/* Dark again - white labels and glows need it. Dark bands both sides, so both edges land
   on --ink-800 and the photograph shows through the middle. */
.band--raised .band__veil--purple{background:linear-gradient(180deg,var(--ink-800) 0%,
  rgba(4,18,29,.55) 45%,rgba(4,18,29,.55) 60%,var(--ink-800) 100%)}
/* A hairline between chapters, deep blue into brand blue - on the dark bands too, where a cut
   alone would be invisible between two of them. */
.band--ruled::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(0,100,143,.45) 30%,rgba(0,174,239,.4) 70%,transparent)}
/* The motto's three words, ghosted. aria-hidden in the markup; opacity keeps them texture. */
.ghost{position:absolute;z-index:1;pointer-events:none;user-select:none;
  font:italic 400 clamp(7rem,20vw,19rem)/0.8 var(--font-serif);color:#fff;opacity:.04;
  letter-spacing:-.02em;white-space:nowrap}
.ghost--bl{left:-1%;bottom:-4%} .ghost--tr{right:-1%;top:-2%} .ghost--br{right:-1%;bottom:-6%}
/* Drifting motes on the mission band. */
.mote{position:absolute;z-index:1;border-radius:50%;opacity:0;animation:moteDrift 12s ease-in-out infinite;pointer-events:none}
.mote--cyan{background:var(--cyan)} .mote--purple{background:var(--cyan-pale)}
@keyframes moteDrift{0%,100%{opacity:0;transform:translate(0,0)}20%{opacity:.18}50%{opacity:.08;transform:translate(20px,-40px)}80%{opacity:.14}}
.mote:nth-child(1){width:4px;height:4px;top:20%;left:15%}
.mote:nth-child(2){width:3px;height:3px;top:60%;left:80%;animation-delay:2s}
.mote:nth-child(3){width:5px;height:5px;top:40%;left:60%;animation-delay:4s}
.mote:nth-child(4){width:3px;height:3px;top:70%;left:25%;animation-delay:6s}
.mote:nth-child(5){width:4px;height:4px;top:30%;left:90%;animation-delay:8s}
.mote:nth-child(6){width:6px;height:6px;top:80%;left:50%;animation-delay:3s}
.mote:nth-child(7){width:3px;height:3px;top:15%;left:70%;animation-delay:7s}

/* ---- mission: one sentence, centred, generous air ---------------------------------------- */
.mission{padding:clamp(80px,9vw,132px) var(--gutter)}
.mission .wrap{text-align:center;max-width:900px}
.mission .eyebrow{margin-bottom:24px}
.mission h2{font-size:clamp(2rem,1.4rem + 3.05vw,3.875rem);line-height:1.18;color:var(--text);text-wrap:balance}
.mission h2 strong{-webkit-text-fill-color:var(--ink-900);color:var(--ink-900);background:none;font-style:italic}

/* ---- NurOwn platform: statement | the dish | three steps --------------------------------- */
.plat{padding:var(--sec) var(--gutter)}
.plat .band__bg{opacity:.08}
.plat__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.plat__copy .eyebrow{margin-bottom:16px}
.plat__copy h2{font-size:var(--fs-40);line-height:1.15;margin-bottom:14px;text-wrap:balance}
.plat__copy p{max-width:34ch;margin-bottom:28px}
.plat__visual{position:relative;width:min(360px,30vw);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(0,174,239,.18);
  box-shadow:0 0 100px rgba(0,174,239,.12),0 0 50px rgba(0,174,239,.08),inset 0 0 60px rgba(0,0,0,.4)}
.plat__visual picture,.plat__visual img{width:100%;height:100%;border-radius:50%;object-fit:cover;
  filter:brightness(.85) contrast(1.1)}
.plat__ring{position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(0,174,239,.1);
  pointer-events:none;animation:ringSpin 60s linear infinite}
.plat__ring::before{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);transform:translateX(-50%);box-shadow:0 0 8px var(--cyan)}
.plat__ring--2{inset:-28px;border-color:rgba(0,174,239,.1);animation-duration:95s;animation-direction:reverse}
.plat__ring--2::before{background:var(--cyan-pale);box-shadow:0 0 8px var(--cyan);width:5px;height:5px}
@keyframes ringSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.pstep-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pstep{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;position:relative;padding-bottom:28px}
.pstep:last-child{padding-bottom:0}
.pstep::before{content:'';position:absolute;left:19.5px;top:44px;bottom:2px;width:1px;
  background:linear-gradient(180deg,rgba(0,174,239,.45),rgba(0,100,143,.45))}
.pstep:last-child::before{display:none}
.pstep__n{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font:700 14px/1 var(--font-ui);color:var(--ink-900);
  background:linear-gradient(135deg,var(--cyan) 0%,var(--cyan-pale) 100%);box-shadow:0 0 18px rgba(0,174,239,.18)}
.pstep__t{font:600 16px/1.3 var(--font-ui);color:#fff;margin-top:9px;letter-spacing:.02em}
.pstep__d{font-size:13.5px;line-height:1.45;color:var(--text-3);margin-top:3px}

/* ---- exosome platform: anatomy diagram + attribute chips + lineage strip ------------------ */
.exo{padding:var(--sec) var(--gutter)}
.exo .band__bg{opacity:.22}
.exo__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;
  margin-bottom:clamp(56px,7vw,96px)}
.exo__copy .eyebrow{margin-bottom:16px;color:var(--cyan-pale)}
.exo__copy h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem);line-height:1.15;margin-bottom:16px;text-wrap:balance}
.exo__copy p{max-width:44ch;margin-bottom:32px}
.exo-chips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px;list-style:none;padding:0}
.exo-chip{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(0,174,239,.22);background:var(--card-bg);transition:border-color .3s,box-shadow .3s}
.exo-chip:hover{border-color:rgba(0,174,239,.5);box-shadow:0 0 24px rgba(0,174,239,.1)}
.exo-chip__icon{flex:none;width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(0,174,239,.16),rgba(0,100,143,.2));border:1px solid rgba(0,174,239,.28)}
.exo-chip__icon svg{width:18px;height:18px;stroke:var(--cyan-pale);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.exo-chip__t{display:block;font:600 14px/1.25 var(--font-ui);color:var(--text);margin-bottom:3px}
.exo-chip__d{display:block;font-size:12.5px;line-height:1.4;color:var(--text-3)}
.exo-patent{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:var(--r-pill);
  border:1px solid rgba(0,174,239,.2);background:rgba(0,174,239,.05);font:500 12.5px/1 var(--font-ui);color:var(--cyan-pale);letter-spacing:.02em}
.exo-patent svg{width:16px;height:16px;stroke:var(--cyan);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.exo-diagram{position:relative;width:100%;max-width:520px;margin:0 auto}
.exo-diagram svg{width:100%;height:auto;display:block;overflow:visible}
.exo-diagram .mem{transform-origin:220px 220px}
.exo-diagram .mem--outer,.exo-diagram .mem--stubs{animation:memSpin 80s linear infinite}
.exo-diagram .mem--inner{animation:memSpin 110s linear infinite reverse}
@keyframes memSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.exo-diagram .cargo{transform-box:fill-box;transform-origin:center;animation:cargoPulse 4.5s ease-in-out infinite}
.exo-diagram .cargo--2{animation-delay:1.1s} .exo-diagram .cargo--3{animation-delay:2.2s} .exo-diagram .cargo--4{animation-delay:3.3s}
@keyframes cargoPulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
.exo-diagram .sat{animation:satDrift 14s ease-in-out infinite}
.exo-diagram .sat--2{animation-duration:17s;animation-delay:-4s} .exo-diagram .sat--3{animation-duration:12s;animation-delay:-7s} .exo-diagram .sat--4{animation-duration:19s;animation-delay:-2s}
@keyframes satDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-10px)}}
.exo-call line{stroke:rgba(255,255,255,.28);stroke-width:1}
.exo-call circle{fill:var(--ink-900);stroke:rgba(255,255,255,.4);stroke-width:1}
.exo-call text{font:600 17px var(--font-ui);fill:var(--text);letter-spacing:.04em}
.exo-call .exo-sub{font:400 13px var(--font-ui);fill:var(--text-3);letter-spacing:.06em;text-transform:uppercase}
.exo-caption{font:400 13px var(--font-ui);fill:var(--text-3);letter-spacing:.08em;text-transform:uppercase}
.exo-lineage{display:grid;grid-template-columns:1fr 72px auto 72px 1fr;align-items:center;
  padding:clamp(24px,3vw,36px) clamp(20px,3vw,40px);border-radius:24px;border:1px solid var(--line-3);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.exo-lineage__node{display:flex;flex-direction:column;gap:6px}
.exo-lineage__node--nurown{text-align:right;align-items:flex-end}
.exo-lineage__node--exo{text-align:left;align-items:flex-start}
.exo-lineage__node--core{text-align:center;align-items:center;padding:0 8px}
.exo-lineage__core{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(circle at 38% 32%,rgba(0,174,239,.45),rgba(0,100,143,.3) 55%,rgba(8,25,42,.95) 100%);
  border:1px solid rgba(0,174,239,.45);box-shadow:0 0 40px rgba(0,174,239,.18),0 0 80px rgba(0,174,239,.08)}
.exo-lineage__core::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(0,174,239,.25);
  animation:coreHalo 5s ease-in-out infinite}
@keyframes coreHalo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:.4}}
.exo-lineage__core svg{width:44px;height:44px}
.exo-lineage__name{font:400 clamp(1.25rem,1rem + 1vw,1.75rem)/1.1 var(--font-serif);color:#fff}
.exo-lineage__name--sm{font-size:1.1rem;margin-top:8px}
.exo-lineage__meta{font-size:12px;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.exo-lineage__tag{display:inline-block;font:600 11px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);margin-bottom:4px}
.exo-lineage__tag--cyan{color:var(--cyan-pale);border:1px solid rgba(0,174,239,.3);background:rgba(0,174,239,.06)}
.exo-lineage__tag--purple{color:var(--cyan-pale);border:1px solid rgba(138,220,251,.45);background:rgba(0,174,239,.1)}
.exo-lineage__link{position:relative;height:1px;background:linear-gradient(90deg,rgba(0,174,239,.35),rgba(0,100,143,.45))}
.exo-lineage__link::after{content:'';position:absolute;top:50%;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--cyan-pale);box-shadow:0 0 8px var(--cyan)}
.exo-lineage__link--l::after{animation:flowLeft 3s ease-in-out infinite}
.exo-lineage__link--r::after{animation:flowRight 3s ease-in-out infinite;animation-delay:1.5s;background:var(--cyan-pale);box-shadow:0 0 8px var(--cyan)}
@keyframes flowLeft{0%{left:100%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:0;opacity:0}}
@keyframes flowRight{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}

/* ---- latest releases on the homepage --------------------------------------------------- */
.latest{padding:var(--sec) var(--gutter)}
[data-page="home"] .site-footer{margin-top:0}

@media (max-width:1024px){
  .plat__grid{grid-template-columns:1fr;gap:40px;justify-items:center;text-align:center}
  .plat__visual{order:-1;width:min(320px,70vw)}
  .plat__copy p{margin-inline:auto}
  .pstep-list{text-align:left}
  .exo__grid{grid-template-columns:1fr}
  .ghost{font-size:clamp(5rem,26vw,9rem)}
}
@media (max-width:640px){
  .ghost{font-size:4.5rem;left:50%;right:auto;transform:translateX(-50%)}
  .exo-chips{grid-template-columns:1fr}
  .exo-lineage{grid-template-columns:1fr;gap:18px;text-align:center}
  .exo-lineage__node,.exo-lineage__node--nurown,.exo-lineage__node--exo{align-items:center;text-align:center}
  .exo-lineage__link{width:1px;height:40px;margin:0 auto;background:linear-gradient(180deg,rgba(0,174,239,.35),rgba(0,100,143,.45))}
  .exo-lineage__link::after{left:50%!important;animation:none}
  .band__bg,.page-hero--plain{background-attachment:scroll}
}
@media (prefers-reduced-motion:reduce){
  .mote{animation:none;opacity:.08}
  .exo-lineage__link::after{left:50%}
}
@media print{
  .band__bg,.band__veil,.ghost,.mote{display:none!important}
  .band,.band--raised{background:#fff}
}