/* GENOS Signal System — V12 unified hero/product system.
   Product previews inherit the master cover grid.
   Master cover uses a reversible scroll-driven power handoff:
   primary promise -> THE NOÛS ECOSYSTEM / ECOSISTEMUL NOÛS.
*/

@media (min-width:1181px){
  /* PRODUCT GRID LOCK — all five product previews keep the exact same typography and left anchor. */
  .hero:not([data-preview="master"]) .hero-content{
    position:relative!important;
    height:100%!important;
    padding:126px 5% 66px!important;
  }

  .hero:not([data-preview="master"]) .hero-content .eyebrow{
    font:600 11px/1.2 Manrope,DM Sans,sans-serif!important;
    letter-spacing:.18em!important;
    height:22px!important;
    min-height:22px!important;
    color:rgba(255,255,255,.83)!important;
  }

  .hero:not([data-preview="master"]) .hero-content h1{
    position:static!important;
    font-size:clamp(54px,4.8vw,78px)!important;
    line-height:1.01!important;
    letter-spacing:-4px!important;
    margin:30px 0 24px!important;
    height:158px!important;
    min-height:158px!important;
    max-width:900px!important;
  }

  /* Disable old apex labels. */
  .hero:not([data-preview="master"]) .hero-content h1::before,
  .hero:not([data-preview="master"]) .hero-content h1::after,
  .hero:not([data-preview="master"]) .hero-content::after{
    display:none!important;
    content:none!important;
  }

  /* APPROVED FIVE-SIDED FIELD
     P1 0/0 -> P2 48/0 -> P3 62/52 -> P4 20/100 -> P5 0/100. */
  .hero:not([data-preview="master"]) .hero-content::before{
    display:block!important;
    content:'';
    position:absolute!important;
    inset:0 auto auto 0!important;
    width:100vw!important;
    height:100%!important;
    clip-path:polygon(0 0,48% 0,62% 52%,20% 100%,0 100%)!important;
    background:linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.05) 18%,
      rgba(0,0,0,.14) 34%,
      rgba(0,0,0,.32) 48%,
      rgba(0,0,0,.54) 57%,
      rgba(0,0,0,.70) 62%,
      rgba(0,0,0,.70) 100%)!important;
    opacity:0;
    z-index:-1!important;
    pointer-events:none;
    transform:translateX(-32px);
    transform-origin:left center;
    animation:genosFieldV12 980ms cubic-bezier(.22,1,.36,1) 280ms forwards!important;
  }

  .hero:not([data-preview="master"]) .hero-actions{display:none!important}

  /* Balanced support copy — no dash/separator characters. */
  .hero:not([data-preview="master"]) .hero-content>p{
    position:relative!important;
    height:auto!important;
    min-height:84px!important;
    max-width:640px!important;
    margin:0!important;
    padding:0!important;
    font-size:0!important;
    line-height:0!important;
    color:transparent!important;
  }
  .hero:not([data-preview="master"]) .hero-content>p::before{
    display:block;
    max-width:640px;
    color:rgba(255,255,255,.76)!important;
    font:400 17px/1.65 DM Sans,sans-serif!important;
    letter-spacing:0!important;
    text-align:left!important;
    text-wrap:balance;
    white-space:normal;
  }

  html[lang="ro"] .hero[data-preview="workforce"] .hero-content>p::before{content:'Transformă problemele de business și cunoașterea organizației în experiențe care dezvoltă capabilități și dovezi despre performanța reală.'}
  html[lang="en"] .hero[data-preview="workforce"] .hero-content>p::before{content:'Turn business problems and organizational knowledge into capability-building experiences and evidence of what people can actually perform.'}
  html[lang="ro"] .hero[data-preview="academic"] .hero-content>p::before{content:'Conectează curriculumul, munca cognitivă și predarea cu evaluarea și dovezile pentru învățare reală în clasă.'}
  html[lang="en"] .hero[data-preview="academic"] .hero-content>p::before{content:'Connect curriculum, cognitive work and teaching with assessment and evidence for real classroom learning.'}
  html[lang="ro"] .hero[data-preview="assurance"] .hero-content>p::before{content:'Conectează afirmații, proceduri, dependențe și teste astfel încât asigurarea operațională să poată fi contestată, reconstruită și revalidată.'}
  html[lang="en"] .hero[data-preview="assurance"] .hero-content>p::before{content:'Connect claims, procedures, dependencies and tests so operational assurance can be challenged, reconstructed and revalidated.'}
  html[lang="ro"] .hero[data-preview="capital"] .hero-content>p::before{content:'Conectează teza, ipotezele, contradovezile și evaluarea cu consecințele de portofoliu și deciziile care își păstrează raționamentul.'}
  html[lang="en"] .hero[data-preview="capital"] .hero-content>p::before{content:'Connect thesis, assumptions, counterevidence and valuation to portfolio consequences and decisions that preserve their reasoning.'}
  html[lang="ro"] .hero[data-preview="learn"] .hero-content>p::before{content:'Construiește cursuri, organizează învățarea, atribuie programe și gestionează cursanții, livrarea și măsurarea dintr-un LMS modern.'}
  html[lang="en"] .hero[data-preview="learn"] .hero-content>p::before{content:'Build courses, organize learning, assign programs and manage learners, delivery and measurement from one modern LMS.'}

  /* Product signal replaces ROLE / CAPABILITY / ... */
  .hero:not([data-preview="master"]) .semantic-rail{
    display:block!important;
    position:relative!important;
    width:min(640px,52vw)!important;
    max-width:640px!important;
    height:auto!important;
    min-height:76px!important;
    margin:26px 0 0!important;
    padding:0!important;
    text-align:left!important;
    color:inherit!important;
  }
  .hero:not([data-preview="master"]) .semantic-rail>span{display:none!important}
  .hero:not([data-preview="master"]) .semantic-rail::before,
  .hero:not([data-preview="master"]) .semantic-rail::after{
    display:block!important;
    position:static!important;
    padding:0!important;
    border:0!important;
    text-align:left!important;
    white-space:normal!important;
    pointer-events:none;
  }
  .hero:not([data-preview="master"]) .semantic-rail::before{
    margin:0 0 8px!important;
    color:rgba(255,255,255,.96)!important;
    font:700 clamp(27px,2.2vw,36px)/1.06 Manrope,DM Sans,sans-serif!important;
    letter-spacing:-.03em!important;
  }
  .hero:not([data-preview="master"]) .semantic-rail::after{
    color:rgba(255,255,255,.74)!important;
    font:400 clamp(14px,1.02vw,18px)/1.45 DM Sans,sans-serif!important;
    letter-spacing:0!important;
    text-wrap:balance;
  }

  html[lang="ro"] .hero[data-preview="workforce"] .semantic-rail::before,
  html[lang="en"] .hero[data-preview="workforce"] .semantic-rail::before{content:'WORKFORCE'}
  html[lang="ro"] .hero[data-preview="workforce"] .semantic-rail::after{content:'Construiește capabilitate. Demonstrează performanța.'}
  html[lang="en"] .hero[data-preview="workforce"] .semantic-rail::after{content:'Build capability. Prove performance.'}

  html[lang="ro"] .hero[data-preview="academic"] .semantic-rail::before,
  html[lang="en"] .hero[data-preview="academic"] .semantic-rail::before{content:'ACADEMIC'}
  html[lang="ro"] .hero[data-preview="academic"] .semantic-rail::after{content:'Construiește înțelegere. Validează învățarea.'}
  html[lang="en"] .hero[data-preview="academic"] .semantic-rail::after{content:'Design understanding. Validate learning.'}

  html[lang="ro"] .hero[data-preview="assurance"] .semantic-rail::before,
  html[lang="en"] .hero[data-preview="assurance"] .semantic-rail::before{content:'ASSURANCE'}
  html[lang="ro"] .hero[data-preview="assurance"] .semantic-rail::after{content:'Știi ce mai poate fi justificat.'}
  html[lang="en"] .hero[data-preview="assurance"] .semantic-rail::after{content:'Know what still holds.'}

  html[lang="ro"] .hero[data-preview="capital"] .semantic-rail::before,
  html[lang="en"] .hero[data-preview="capital"] .semantic-rail::before{content:'CAPITAL'}
  html[lang="ro"] .hero[data-preview="capital"] .semantic-rail::after{content:'Păstrează deciziile legate de dovezi.'}
  html[lang="en"] .hero[data-preview="capital"] .semantic-rail::after{content:'Keep decisions tied to evidence.'}

  html[lang="ro"] .hero[data-preview="learn"] .semantic-rail::before,
  html[lang="en"] .hero[data-preview="learn"] .semantic-rail::before{content:'LEARN'}
  html[lang="ro"] .hero[data-preview="learn"] .semantic-rail::after{content:'Creează. Livrează. Măsoară.'}
  html[lang="en"] .hero[data-preview="learn"] .semantic-rail::after{content:'Create. Deliver. Measure.'}

  .hero:not([data-preview="master"]) .eyebrow,
  .hero:not([data-preview="master"]) .hero-content h1,
  .hero:not([data-preview="master"]) .hero-content>p,
  .hero:not([data-preview="master"]) .semantic-rail{
    opacity:0;
    transform:translateX(-28px);
    animation:genosCopyV12 760ms cubic-bezier(.22,1,.36,1) forwards!important;
  }
  .hero:not([data-preview="master"]) .eyebrow{animation-delay:70ms!important}
  .hero:not([data-preview="master"]) .hero-content h1{animation-delay:145ms!important}
  .hero:not([data-preview="master"]) .hero-content>p{animation-delay:245ms!important}
  .hero:not([data-preview="master"]) .semantic-rail{animation-delay:355ms!important}
}

@keyframes genosCopyV12{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:translateX(0)}}
@keyframes genosFieldV12{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:translateX(0)}}

/* Master support copy is normalized in both languages: no em dash/separator remains. */
.hero[data-preview="master"] .hero-content>p{
  font-size:0!important;
  line-height:0!important;
  color:transparent!important;
}
.hero[data-preview="master"] .hero-content>p::before{
  display:block;
  color:#b9bec0!important;
  font:400 18px/1.7 DM Sans,sans-serif!important;
  letter-spacing:0!important;
  white-space:normal;
}
html[lang="en"] .hero[data-preview="master"] .hero-content>p::before{
  content:'Turn expertise and sources into executable experiences and connect what people learn to evidence of what they can do.';
}
html[lang="ro"] .hero[data-preview="master"] .hero-content>p::before{
  content:'Transformă expertiza și sursele în experiențe executabile și conectează ceea ce oamenii învață cu dovezi despre ceea ce pot face.';
}

/* MASTER COVER — darker where the headline sits, faster falloff to transparent on the right.
   This preserves headline contrast while revealing more of the robot/character face. */
@media (min-width:761px){
  main{timeline-scope:--genos-cover-exit}

  .hero[data-preview="master"] .hero-shade{
    background:
      linear-gradient(90deg,
        rgba(5,7,8,.99) 0%,
        rgba(5,7,8,.97) 20%,
        rgba(5,7,8,.86) 31%,
        rgba(5,7,8,.58) 40%,
        rgba(5,7,8,.28) 48%,
        rgba(5,7,8,.09) 56%,
        rgba(5,7,8,0) 66%)!important,
      linear-gradient(0deg,rgba(17,19,21,.92) 0%,rgba(17,19,21,.28) 17%,transparent 31%)!important;
  }

  /* Scroll-driven power handoff. */
  .hero{view-timeline-name:--genos-cover-exit;view-timeline-axis:block}

  .hero[data-preview="master"] .hero-shade::after{
    content:'';
    position:absolute;
    inset:0;
    background:#000;
    opacity:0;
    pointer-events:none;
    animation:genosCoverDimV12 1ms linear both;
    animation-timeline:--genos-cover-exit;
    animation-range:exit 0% exit 100%;
  }

  /* The original promise yields visual authority progressively. */
  .hero[data-preview="master"] .hero-content>.eyebrow,
  .hero[data-preview="master"] .hero-content>h1,
  .hero[data-preview="master"] .hero-content>p,
  .hero[data-preview="master"] .hero-content>.hero-actions{
    animation:genosMasterCopyOutV12 1ms linear both!important;
    animation-timeline:--genos-cover-exit!important;
    animation-range:exit 0% exit 100%!important;
  }

  /* The new statement occupies the same visual scene, not a new section. */
  .hero[data-preview="master"] .hero-content::before,
  .hero[data-preview="master"] .hero-content::after{
    display:block!important;
    position:fixed!important;
    left:34vw!important;
    width:min(62vw,1040px)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    color:#fff!important;
    text-align:left!important;
    white-space:nowrap!important;
    pointer-events:none!important;
    z-index:20!important;
    opacity:0;
    transform:translateY(14px);
    animation:genosCoverStatementV12 1ms linear both!important;
    animation-timeline:--genos-cover-exit!important;
    animation-range:exit 0% exit 100%!important;
  }

  .hero[data-preview="master"] .hero-content::before{
    top:39vh!important;
    font:800 clamp(30px,2.75vw,50px)/1 Manrope,DM Sans,sans-serif!important;
    letter-spacing:-.035em!important;
  }
  .hero[data-preview="master"] .hero-content::after{
    top:44vh!important;
    font:800 clamp(62px,6.25vw,112px)/.94 Manrope,DM Sans,sans-serif!important;
    letter-spacing:-.055em!important;
  }

  html[lang="en"] .hero[data-preview="master"] .hero-content::before{content:'THE NOÛS'!important}
  html[lang="en"] .hero[data-preview="master"] .hero-content::after{content:'ECOSYSTEM'!important}

  /* Romanian stays on one line, centered, at the same scale as the English THE NOÛS line. */
  html[lang="ro"] .hero[data-preview="master"] .hero-content::before{
    content:'ECOSISTEMUL NOÛS'!important;
    left:0!important;
    top:42vh!important;
    width:100vw!important;
    max-width:none!important;
    text-align:center!important;
    white-space:nowrap!important;
    font:800 clamp(30px,2.75vw,50px)/1 Manrope,DM Sans,sans-serif!important;
    letter-spacing:-.035em!important;
  }
  html[lang="ro"] .hero[data-preview="master"] .hero-content::after{
    display:none!important;
    content:none!important;
    animation:none!important;
  }

  @keyframes genosMasterCopyOutV12{
    0%{opacity:1;transform:translateY(0)}
    12%{opacity:.86;transform:translateY(-2px)}
    50%{opacity:0;transform:translateY(-10px)}
    100%{opacity:0;transform:translateY(-10px)}
  }

  /* Requested timing: 0–50 fade in, 50–80 hold, 80–100 slow fade out. */
  @keyframes genosCoverStatementV12{
    0%{opacity:0;transform:translateY(14px)}
    50%{opacity:1;transform:translateY(0)}
    80%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-8px)}
  }
  @keyframes genosCoverDimV12{
    0%{opacity:0}
    50%{opacity:.25}
    80%{opacity:.25}
    100%{opacity:0}
  }

  /* ECOSYSTEM RAIL — overlay the bottom of the cover so transparency reveals the cover, not the page background. */
  .disciplines{
    position:relative!important;
    z-index:30!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:clamp(28px,2.8vw,48px)!important;
    height:90px!important;
    min-height:90px!important;
    margin-top:-90px!important;
    margin-bottom:0!important;
    padding:0 5%!important;
    overflow:hidden;
    background:transparent!important;
    backdrop-filter:none!important;
    isolation:isolate;
  }
  .disciplines::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    background:#111315;
    opacity:1;
    pointer-events:none;
    animation:genosRailBackgroundV12 1ms linear both;
    animation-timeline:--genos-cover-exit;
    animation-range:exit 0% exit 100%;
  }
  .disciplines>span,
  .disciplines>div{
    position:relative!important;
    z-index:2;
    flex:0 0 auto;
    white-space:nowrap;
  }
  .disciplines>span{
    padding:0!important;
    margin-right:6px!important;
  }
  .disciplines>div{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    min-height:34px;
    padding:0!important;
  }
  .disciplines>div::before{
    content:'';
    width:4px;
    height:4px;
    flex:0 0 4px;
    border-radius:50%;
    background:rgba(126,220,227,.86);
    box-shadow:none!important;
  }
  .disciplines>div::after{
    display:none!important;
    content:none!important;
  }
  .disciplines>i{display:none!important}

  /* At 50–80% cover exit the statement is fully opaque and the rail is 60% transparent. */
  @keyframes genosRailBackgroundV12{
    0%{opacity:1}
    18%{opacity:.84}
    35%{opacity:.62}
    50%{opacity:.40}
    80%{opacity:.40}
    100%{opacity:0}
  }
}

@media (prefers-reduced-motion:reduce){
  .hero:not([data-preview="master"]) .eyebrow,
  .hero:not([data-preview="master"]) .hero-content h1,
  .hero:not([data-preview="master"]) .hero-content>p,
  .hero:not([data-preview="master"]) .semantic-rail,
  .hero:not([data-preview="master"]) .hero-content::before{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .hero[data-preview="master"] .hero-shade::after,
  .hero[data-preview="master"] .hero-content::before,
  .hero[data-preview="master"] .hero-content::after{
    animation:none!important;
    opacity:0!important;
  }
  .hero[data-preview="master"] .hero-content>.eyebrow,
  .hero[data-preview="master"] .hero-content>h1,
  .hero[data-preview="master"] .hero-content>p,
  .hero[data-preview="master"] .hero-content>.hero-actions{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .disciplines::before{
    animation:none!important;
    opacity:1!important;
  }
}