/* Averico. An editorial front door, a concise product story, one connected record. */
:root{
  color-scheme:dark;
  --bg:#070e16;
  --surface:#0b1420;
  --ink:#edf1f7;
  --muted:#a4b1c2;
  --cyan:#46c8ff;
  --line:#8ca7be25;
  --sans:"Hanken Grotesk","Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --width:1180px
}
*,*::before,*::after{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:104px
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased
}
main{
  overflow:clip
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button{
  font:inherit;
  cursor:pointer
}
a{
  color:inherit;
  text-decoration:none
}
img,svg{
  display:block;
  max-width:100%
}
h1,h2,h3,p,figure{
  margin:0
}
h1,h2,h3{
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.12
}
h2{
  font-size:clamp(2.25rem,3.55vw,3.15rem)
}
h2 em,h3 em{
  font:italic 400 1.08em/1.06 var(--serif);
  color:var(--cyan)
}
h3{
  font-size:1.2rem
}
::selection{
  background:#2078c4;
  color:white
}
[hidden]{
  display:none!important
}
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:5px
}
.container{
  width:calc(100% - 112px);
  max-width:var(--width);
  margin-inline:auto
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link{
  position:fixed;
  left:20px;
  top:12px;
  z-index:80;
  padding:10px 16px;
  background:var(--cyan);
  color:var(--bg);
  transform:translateY(-160%)
}
.skip-link:focus{
  transform:none
}
.eyebrow,.role-label{
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#93a5b9
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:19px
}
.section{
  padding-block:82px;
  border-top:1px solid var(--line)
}
.section-heading{
  max-width:770px;
  margin-bottom:38px
}
.section-intro{
  color:var(--muted);
  font-size:1.04rem;
  line-height:1.8;
  max-width:650px;
  margin-top:24px
}
.index{
  font-size:.69rem;
  color:#61b5dd;
  font-variant-numeric:tabular-nums;
  letter-spacing:.05em
}
.text-link{
  display:inline-flex;
  gap:24px;
  align-items:center;
  font-size:.87rem;
  color:#dbe8f6;
  border-bottom:1px solid #688ca153;
  padding-bottom:7px
}
.text-link:hover{
  color:var(--cyan);
  border-color:var(--cyan)
}
.brand-filter{
  position:absolute;
  pointer-events:none
}
.brand img,.entry-screen .entry-logo,.core-mark img{
  filter:url(#brand-key)
}
[tabindex="-1"]:focus{
  outline:none
}
.entry-button:focus-visible{
  outline:1px solid #b7dcff70;
  outline-offset:3px
}
/* The entry is intentionally simple: the brand, one line, one deliberate action. */
.entry-screen{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  background:radial-gradient(1200px 700px at 30% 30%,#0d2340,#050d17 70%);
  place-items:center;
  text-align:center;
  overflow:hidden;
  isolation:isolate;
  transition:opacity .85s ease,visibility .85s
}
.js:not(.is-entered){
  overflow:hidden
}
.js:not(.is-entered) .entry-screen{
  display:grid
}
.js:not(.is-entered) .page-shell{
  visibility:hidden
}
.entry-screen.is-leaving{
  display:grid;
  opacity:0;
  visibility:hidden;
  pointer-events:none
}
.entry-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1
}
.entry-content{
  width:calc(100% - 48px);
  max-width:750px;
  transform:translate3d(var(--entry-x,0px),var(--entry-y,0px),0);
  transition:opacity .65s,filter .65s;
  will-change:transform
}
.entry-logo{
  width:440px;
  height:auto;
  margin:0 auto 29px;
  filter:drop-shadow(0 8px 45px #0079ff0e)
}
.entry-content>p{
  font:italic 400 clamp(1.3rem,2.2vw,1.9rem)/1.3 var(--serif);
  color:#abb9ca;
  letter-spacing:-.02em
}
.entry-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:49px;
  margin-top:34px;
  padding:12px 27px;
  border:1px solid #a3dcffb5;
  border-radius:12px;
  background:linear-gradient(#278dfb,#1752d9);
  box-shadow:0 0 0 1px #e5f6ff65,0 10px 30px #1476ed36;
  color:white;
  font-size:.89rem;
  font-weight:600;
  transition:box-shadow .2s,background .2s,opacity .25s
}
.entry-button:hover{
  box-shadow:0 0 0 1px #e5f6ff,0 10px 42px #1476ed6b;
  background:linear-gradient(#40a0ff,#2164ee)
}
.entry-button>span{
  font-size:1.1rem;
  font-weight:400
}
.entry-hint{
  position:absolute;
  bottom:25px;
  left:24px;
  right:24px;
  color:#60758e;
  font-size:.72rem;
  letter-spacing:.01em
}
.entry-hint>span{
  margin:0 5px
}
.entry-screen.is-leaving .entry-content{
  opacity:0;
  filter:blur(5px)
}
.pointer-light{
  display:none;
  position:fixed;
  left:0;
  top:0;
  width:440px;
  height:440px;
  margin:-220px 0 0 -220px;
  z-index:45;
  pointer-events:none;
  background:radial-gradient(circle,#5bbdff09,transparent 65%);
  opacity:0;
  transition:opacity .5s;
  will-change:transform;
  mix-blend-mode:screen
}
/* Header mirrors the demo's restrained, three-part alignment. */
.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:30;
  background:#070e1690;
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s
}
.site-header.is-scrolled{
  background:#070e16f0;
  border-color:var(--line)
}
.nav-inner{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.brand{
  display:block;
  flex:0 0 137px;
  width:137px;
  padding-block:7px
}
.brand img{
  width:100%;
  height:auto
}
.navigation{
  display:flex;
  align-items:center;
  gap:27px
}
.navigation a{
  position:relative;
  color:#a7b5c8;
  font-size:.85rem;
  white-space:nowrap;
  transition:color .2s
}
.navigation a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:1px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s
}
.navigation a:hover,.navigation a[aria-current]{
  color:#f0f5fc
}
.navigation a:hover::after,.navigation a[aria-current]::after{
  transform:scaleX(1)
}
.nav-contact{
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:.8rem;
  font-weight:500;
  background:#1769ee;
  border:1px solid #5ba6ff38;
  box-shadow:0 5px 22px #0d6cf025;
  border-radius:10px;
  padding:10px 18px
}
.nav-contact:hover{
  background:#2580ff
}
.menu-toggle{
  display:none
}
.reading-progress{
  position:absolute;
  inset:auto 0 0;
  height:1px;
  background:var(--cyan);
  transform:scaleX(var(--read-progress,0));
  transform-origin:left;
  opacity:.8
}
/* A broad editorial hero. The globe belongs to the story, not the first screen. */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(1200px 700px at 70% 35%,#0d2340,#050d17 70%);
  min-height:900px
}
.hero-map{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:1;
  pointer-events:none
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(5,13,23,.86) 0%,rgba(5,13,23,.6) 32%,rgba(5,13,23,.08) 60%,rgba(5,13,23,0) 100%),linear-gradient(0deg,#050d17 0%,rgba(5,13,23,0) 22%)
}
.hero-inner{
  position:relative;
  z-index:2;
  padding-block:150px 110px
}
.hero-copy{
  max-width:740px;
  transform:translateY(calc(var(--hero-scroll,0) * -30px));
  opacity:calc(1 - var(--hero-scroll,0) * .5);
  will-change:transform,opacity
}
.stage-note{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.75rem;
  color:#a8b8cc;
  padding:8px 14px;
  border:1px solid #91acc537;
  border-radius:99px;
  background:#07131d65;
  margin-bottom:29px
}
.stage-note>span,.status-dot{
  display:inline-block;
  width:6px;
  height:6px;
  flex:none;
  background:#3ac9b0;
  border-radius:50%;
  box-shadow:0 0 12px #3ac9b022
}
.hero h1{
  font-size:clamp(3.4rem,4.85vw,4.6rem);
  line-height:1.045;
  letter-spacing:-.04em;
  font-weight:700;
  max-width:780px
}
.hero h1 em{
  display:inline-block;
  margin-top:8px;
  font:italic 400 1.09em/1.015 var(--serif);
  letter-spacing:-.04em;
  color:var(--cyan)
}
.hero-description,.hero-explanation{
  max-width:650px;
  color:#b2bfd0;
  font-size:1.1rem;
  line-height:1.8
}
.hero-description{
  margin-top:29px
}
.hero-explanation{
  margin-top:17px;
  color:#92a5bc;
  font-size:1rem
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:30px
}
.button{
  min-height:47px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  font-size:.86rem;
  font-weight:500;
  padding:12px 20px;
  border:1px solid transparent;
  border-radius:10px;
  transition:background .25s,border-color .25s,box-shadow .25s
}
.button-primary{
  background:linear-gradient(#278cfa,#195cdd);
  border-color:#68b4ff4a;
  box-shadow:0 7px 24px #0a61ef24
}
.button-primary:hover{
  background:#2b8cff;
  box-shadow:0 10px 32px #1475ef36
}
.button-outline{
  color:#c6d2e1;
  border-color:#7897b440;
  background:#08121f60
}
.button-outline:hover{
  border-color:#6cbbf28a;
  background:#10263e
}
.hero-facts{
  display:flex;
  gap:21px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:29px;
  padding-top:23px;
  border-top:1px solid #8ba5bf22;
  color:#8195ad;
  font-size:.59rem;
  text-transform:uppercase;
  letter-spacing:.1em
}
.hero-facts span+span::before{
  content:"";
  display:inline-block;
  width:3px;
  height:3px;
  background:#5c7c9f;
  border-radius:50%;
  margin-right:21px;
  vertical-align:middle
}
.scroll-cue{
  position:absolute;
  z-index:2;
  left:calc(50% - 11px);
  bottom:26px;
  width:22px;
  height:35px;
  border:1px solid #7a9abd69;
  border-radius:20px
}
.scroll-cue>span{
  position:absolute;
  top:7px;
  left:9px;
  width:2px;
  height:6px;
  background:#7ecbee;
  border-radius:2px;
  animation:scroll-drop 2.4s ease-in-out infinite
}
.map-caption{
  position:absolute;
  z-index:2;
  right:max(16px,min(32px,4vw));
  bottom:28px;
  color:rgba(200,215,235,.55);
  font-size:11px;
  letter-spacing:.06em;
  border:1px solid var(--line);
  border-radius:99px;
  padding:4px 10px;
  background:rgba(5,13,23,.5)
}
.is-entered .hero-copy>*{
  animation:arrival .85s both
}
.is-entered .hero-copy>:nth-child(2){
  animation-delay:.07s
}
.is-entered .hero-copy>:nth-child(3){
  animation-delay:.14s
}
.is-entered .hero-copy>:nth-child(4){
  animation-delay:.21s
}
.is-entered .hero-copy>:nth-child(5){
  animation-delay:.28s
}
.is-entered .hero-copy>:nth-child(6){
  animation-delay:.35s
}
@keyframes arrival{
  from{
    opacity:0;
    transform:translateY(18px)
  }
  to{
    opacity:1;
    transform:none
  }
}
@keyframes scroll-drop{
  0%,100%{
    transform:translateY(0);
    opacity:.45
  }
  50%{
    transform:translateY(10px);
    opacity:1
  }
}
/* Fewer containers, more typography. A clear rhythm instead of nested UI panels. */
.problem{
  background:#080f18
}
.problem-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px
}
.problem-item{
  padding-top:20px;
  border-top:1px solid #6c8ba237
}
.problem-item h3{
  font-size:1.16rem;
  margin-top:21px;
  letter-spacing:-.025em
}
.problem-item p{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.8;
  margin-top:13px;
  max-width:330px
}
.platform{
  background:#0a1320
}
.platform .section-heading{
  margin-bottom:31px
}
.release-title{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:17px
}
.release-title h3{
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:#adc1d7
}
.release-title>span:last-child:not(.status-dot){
  font-size:.68rem;
  color:#69839e;
  margin-left:auto
}
.capability-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.capability-card{
  min-width:0;
  padding:25px 26px 22px;
  border:1px solid #789bb52e;
  border-radius:14px;
  background:#0d1a2b;
  position:relative;
  transition:background .25s,border-color .25s,transform .25s
}
.capability-card:hover{
  border-color:#3b9ed77a;
  background:#102139;
  transform:translateY(-4px)
}
.capability-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:31px
}
.capability-top svg{
  width:29px;
  height:29px;
  stroke:var(--cyan);
  fill:none;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.capability-top>span{
  font-size:.65rem;
  color:#526f8e
}
.capability-card h3{
  font-size:1.36rem;
  line-height:1.15;
  letter-spacing:-.025em;
  min-height:50px
}
.capability-card p{
  font-size:.91rem;
  color:var(--muted);
  line-height:1.75;
  margin-top:16px;
  min-height:100px
}
.future-roadmap{
  margin-top:30px
}
.future-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  padding-top:19px;
  border-top:1px dashed #67829e38
}
.future-grid article{
  display:flex;
  gap:15px
}
.future-grid .index{
  color:#5b7895;
  margin-top:2px
}
.future-grid h3{
  font-size:.96rem;
  font-weight:500;
  letter-spacing:-.01em;
  color:#adbed1
}
.future-grid p{
  font-size:.82rem;
  color:#768ca6;
  margin-top:8px;
  line-height:1.65
}
.principles-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  border-top:1px solid var(--line);
  padding-top:25px;
  margin-top:32px;
  color:#849bb5;
  font-size:.78rem;
  line-height:1.7
}
.principles-strip>div{
  display:flex;
  gap:13px;
  align-items:flex-start
}
.principles-strip strong{
  display:block;
  color:#b4c6d8;
  font-weight:500;
  margin-bottom:3px
}
.principles-strip svg{
  width:25px;
  height:25px;
  flex:none;
  stroke:#74bade;
  stroke-width:1.2;
  fill:none;
  margin-top:3px
}
/* The current demo: direct, click-to-play and deliberately free of autoplay. */
.demo-section{
  background:radial-gradient(ellipse at 50% 60%,#102b4559,transparent 65%),#080f18
}
.demo-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:34px
}
.demo-heading>p{
  max-width:390px;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.85;
  padding-bottom:3px
}
.demo-heading>p>span{
  color:#6f8aa6;
  font-size:.76rem
}
.demo-player{
  width:100%;
  max-width:1080px;
  margin-inline:auto;
  overflow:hidden;
  border:1px solid #7099b842;
  border-radius:15px;
  background:#08121f;
  box-shadow:0 26px 70px #00000032
}
.demo-player-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 21px;
  border-bottom:1px solid #7099b827;
  color:#7f9ab5;
  font-size:.58rem;
  line-height:1;
  letter-spacing:.13em
}
.demo-player-bar>span:first-child{
  display:flex;
  align-items:center;
  gap:9px
}
.demo-player-bar>span:last-child{
  color:#adc5dc;
  letter-spacing:.07em;
  font-variant-numeric:tabular-nums
}
.demo-screen{
  position:relative;
  aspect-ratio:16/9;
  background:#060b13
}
.demo-screen video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#060b13
}
.demo-screen video:focus-visible{
  outline-offset:-3px
}
.demo-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:17px;
  min-width:190px;
  padding:20px 25px;
  border:0;
  border-radius:18px;
  background:#06111bd9;
  color:#edf5ff;
  backdrop-filter:blur(14px);
  box-shadow:0 8px 40px #0004;
  transition:background .25s,box-shadow .25s
}
.demo-play:hover{
  background:#0c2133ed;
  box-shadow:0 8px 45px #0079bc26
}
.demo-play-circle{
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  border:1px solid #70d4ffb3;
  border-radius:50%;
  background:#268de31a;
  transition:background .25s,transform .25s
}
.demo-play-circle svg{
  width:25px;
  height:25px;
  margin-left:2px;
  fill:#98e1ff
}
.demo-play:hover .demo-play-circle{
  transform:scale(1.05);
  background:#268de33d
}
.demo-play-label{
  font-size:.91rem;
  line-height:1.5;
  font-weight:500
}
.demo-play-label small{
  display:block;
  margin-top:3px;
  color:#829db9;
  font-size:.65rem;
  font-weight:400
}
.demo-player figcaption{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:16px 21px;
  border-top:1px solid #7099b827;
  color:#708ba7;
  font-size:.68rem;
  line-height:1.5
}
.demo-player figcaption a{
  display:inline-flex;
  align-items:center;
  gap:14px;
  color:#b2d2ec;
  white-space:nowrap
}
.demo-player figcaption a:hover{
  color:var(--cyan)
}
.demo-video-error{
  position:absolute;
  inset:auto 15px 18px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#08121ff2;
  color:#bacbdc;
  text-align:center;
  font-size:.75rem
}
.demo-video-error a{
  text-decoration:underline
}
@media(max-width:760px){
  .demo-heading{align-items:flex-start;flex-direction:column;gap:22px;margin-bottom:27px}
  .demo-heading>p{font-size:.9rem}
  .demo-heading>p>span{font-size:.69rem}
  .demo-player{border-radius:11px}
  .demo-player-bar{padding:12px 14px;font-size:.5rem}
  .demo-play{min-width:150px;padding:15px 20px;gap:10px;border-radius:13px}
  .demo-play-circle{width:49px;height:49px}
  .demo-play-circle svg{width:20px;height:20px}
  .demo-play-label{font-size:.78rem}
  .demo-play-label small{font-size:.55rem}
  .demo-player figcaption{padding:13px 14px;gap:15px;font-size:.58rem}
  .demo-player figcaption a{gap:8px}
}
@media(max-width:360px){
  .demo-play{gap:8px;min-width:140px;padding:12px 16px}
  .demo-play-circle{width:43px;height:43px}
  .demo-player figcaption{font-size:.53rem}
}

/* The retained globe now explains the employer proposition. */
.employers{
  background:radial-gradient(ellipse at 75% 50%,#0c233b66,transparent 55%),var(--bg);
  padding-block:68px
}
.employer-layout{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:55px;
  align-items:center
}
.employer-copy h2{
  font-size:clamp(2.15rem,3.1vw,2.8rem)
}
.employer-copy .section-intro{
  font-size:.97rem;
  margin-top:21px
}
.benefit-list{
  list-style:none;
  margin:26px 0 23px;
  padding:0
}
.benefit-list li{
  display:flex;
  gap:14px;
  align-items:baseline;
  color:#bccadb;
  font-size:.93rem;
  padding-block:8px
}
.benefit-list li::before{
  content:"";
  display:block;
  width:5px;
  height:5px;
  flex:none;
  border:1px solid var(--cyan);
  border-radius:50%
}
.sector-line{
  font-size:.72rem;
  color:#6f89a4;
  line-height:1.9
}
.employer-copy .text-link{
  margin-top:25px
}
.hero-diagram{
  position:relative;
  isolation:isolate;
  min-width:0;
  width:100%;
  container-type:inline-size
}
.trust-canvas{
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  pointer-events:none;
  mask-image:radial-gradient(ellipse at 50% 47%,#000 30%,#000e 67%,transparent 94%)
}
.diagram-caption{
  display:flex;
  justify-content:center;
  text-align:center
}
.micro-label{
  font-size:.57rem;
  color:#5d8dae;
  letter-spacing:.16em
}
.network{
  position:relative;
  width:100%;
  height:510px
}
.network-core{
  position:absolute;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:133px;
  height:133px;
  background:#091827ed;
  border:1px solid #66c9ff8c;
  border-radius:50%;
  box-shadow:0 0 45px #1282dc22
}
.network-core::before{
  content:"";
  position:absolute;
  inset:-24px;
  border:1px dashed #6ba9d52e;
  border-radius:50%
}
.network-core::after{
  content:"";
  position:absolute;
  inset:-11px;
  border:1px solid #4392cf35;
  border-top-color:#9ce3ff70;
  border-radius:50%;
  animation:core-orbit 28s linear infinite
}
.core-mark{
  width:45px;
  height:35px;
  overflow:hidden;
  flex:none
}
.core-mark img{
  width:154px;
  max-width:none;
  height:35px
}
.network-core>span{
  font-size:1.3rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.025em;
  margin-top:5px
}
.network-core small{
  font-size:.57rem;
  color:#8da6bf;
  margin-top:4px;
  text-align:center;
  max-width:110px
}
.source-node{
  position:absolute;
  transform:translate(-50%,-50%);
  display:grid;
  grid-template-columns:29px 1fr;
  gap:0 9px;
  width:164px;
  align-items:center;
  text-align:left;
  color:#d3e2f1;
  background:#0c1d2eee;
  border:1px solid #5a8eb847;
  border-radius:9px;
  padding:11px;
  backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s
}
.source-node:hover,.source-node[aria-pressed=true]{
  background:#103049;
  border-color:#4dbfffc7
}
.source-node>span:not(.source-icon){
  font-size:.71rem;
  line-height:1.5
}
.source-node small{
  font-size:.6rem;
  color:#7c9ab7;
  line-height:1.5;
  margin-top:3px
}
.source-icon{
  display:grid;
  place-items:center;
  grid-row:1/3;
  color:#6fc7f5;
  width:29px;
  height:31px
}
.source-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round
}
.source-university{
  top:18%;
  left:22%
}
.source-employer{
  top:29%;
  left:80%
}
.source-register{
  top:85%;
  left:57%;
  width:205px
}
.diagram-foot{
  font-size:.68rem;
  line-height:1.7;
  color:#7995b0;
  text-align:center;
  max-width:400px;
  margin:0 auto;
  min-height:42px
}
.candidates{
  background:#0b1420
}
.candidate-heading{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:70px;
  align-items:end
}
.candidate-heading .section-intro{
  margin-top:0;
  font-size:.98rem
}
.section-intro small{
  display:block;
  font-size:.72rem;
  line-height:1.75;
  color:#6d87a2;
  margin-top:12px
}
.career-stages{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none;
  margin:37px 0 0;
  padding:0;
  gap:36px
}
.career-stages li{
  border-top:1px solid #617e993d;
  padding-top:19px
}
.career-stages h3{
  margin-top:16px;
  font-size:1.12rem
}
.career-stages p{
  font-size:.9rem;
  color:var(--muted);
  margin-top:13px;
  line-height:1.8
}
.issuer-note{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:65px;
  align-items:start;
  padding-top:35px;
  margin-top:40px;
  border-top:1px solid var(--line)
}
.issuer-note .eyebrow{
  font-size:.57rem;
  margin-bottom:12px
}
.issuer-note h3{
  font-size:1.45rem;
  line-height:1.2
}
.issuer-note h3 em{
  white-space:nowrap
}
.issuer-note>p{
  font-size:.87rem;
  color:#9cacc1;
  line-height:1.8
}
.issuer-note small{
  display:block;
  font-size:.67rem;
  color:#66819e;
  line-height:1.75;
  margin-top:10px
}
.brand-statement{
  position:relative;
  text-align:center;
  padding-block:72px;
  border-top:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 100%,#10315855,transparent 65%),#070e16
}
.brand-statement .eyebrow{
  justify-content:center;
  font-size:.58rem;
  color:#62829e
}
.brand-statement h2{
  font-size:clamp(2.8rem,4.5vw,4.2rem);
  line-height:1.08
}
.brand-statement h2 em{
  font-size:1.05em
}
.company{
  padding-block:67px;
  background:#09111b
}
.company .section-heading{
  margin-bottom:33px
}
.company h2{
  font-size:clamp(2.15rem,3.3vw,2.9rem)
}
.founders{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}
.founder{
  border-top:1px solid #7295ae35;
  padding-top:25px
}
.role-label{
  font-size:.58rem;
  color:#668cae;
  margin-bottom:13px
}
.founder h3{
  font-size:1.65rem;
  letter-spacing:-.035em
}
.founder>p:last-child{
  font-size:.9rem;
  color:#9cacc1;
  line-height:1.85;
  margin-top:17px;
  max-width:490px
}
.contact{
  background:radial-gradient(ellipse at 50% 80%,#11305260,transparent 65%),#070f1a;
  text-align:center;
  padding-block:75px
}
.contact .eyebrow{
  justify-content:center;
  color:#7fa3c2;
  font-size:.6rem
}
.contact h2{
  font-size:clamp(2.6rem,4.1vw,3.7rem)
}
.contact .container>p:not(.eyebrow):not(.commercial-note){
  color:#9dacc0;
  max-width:630px;
  margin:24px auto 0;
  line-height:1.8;
  font-size:.98rem
}
.contact-email{
  display:inline-flex;
  gap:30px;
  align-items:center;
  margin-top:30px;
  color:#a9e5ff;
  border-bottom:1px solid #4a9bcc60;
  padding-bottom:8px;
  font-size:1.4rem;
  letter-spacing:-.02em
}
.contact-email:hover{
  color:white
}
.contact-email>span{
  font-size:1.1rem
}
.contact .commercial-note{
  font-size:.64rem;
  color:#5e7a97;
  margin:25px 0 0
}
.site-footer{
  border-top:1px solid var(--line);
  background:#070d15
}
.footer-inner{
  display:flex;
  gap:30px;
  align-items:center;
  min-height:95px
}
.footer-inner .brand{
  width:115px;
  flex-basis:115px
}
.footer-inner>p{
  font:italic 400 .98rem/1.5 var(--serif);
  color:#607b95
}
.footer-inner small{
  font-size:.69rem;
  color:#526c85
}
.replay-intro{
  font-size:.68rem;
  color:#8aa4bf;
  background:none;
  border:0;
  padding:12px 0;
  margin-left:auto
}
.replay-intro:hover{
  color:var(--cyan)
}
.reveal{
  transition:opacity .75s ease,transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms)
}
.cinematic-ready .reveal:not(.is-revealed){
  opacity:0;
  transform:translateY(25px)
}
.cinematic-ready .reveal:focus-within{
  opacity:1;
  transform:none
}
.stagger>:nth-child(2){
  --reveal-delay:90ms
}
.stagger>:nth-child(3){
  --reveal-delay:180ms
}
.magnetic{
  transform:translate3d(var(--magnet-x,0px),var(--magnet-y,0px),0);
  will-change:transform
}
@keyframes core-orbit{
  to{
    transform:rotate(360deg)
  }
}
@media(hover:hover) and (pointer:fine){
  .pointer-light{
    display:block
  }
  .capability-card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(350px circle at var(--card-x,50%) var(--card-y,50%),#65bdff08,transparent 70%);
    opacity:0;
    transition:opacity .25s
  }
  .capability-card:hover::after{
    opacity:1
  }
}
@media(min-width:961px) and (max-height:800px){
  .hero{
    min-height:815px
  }
  .hero-inner{
    padding-top:125px;
    padding-bottom:92px
  }
  .hero h1{
    font-size:3.55rem
  }
  .hero-description{
    font-size:1.03rem;
    margin-top:23px
  }
  .hero-explanation{
    font-size:.94rem;
    margin-top:12px
  }
  .hero-actions{
    margin-top:25px
  }
  .stage-note{
    margin-bottom:23px
  }
  .hero-facts{
    margin-top:24px;
    padding-top:20px
  }
}
@media(min-width:1500px){
  .hero{
    min-height:960px
  }
  .hero-inner{
    padding-top:170px
  }
  .hero h1{
    font-size:4.6rem
  }
}
@media(max-width:1100px){
  .navigation{
    gap:20px
  }
  .nav-inner{
    gap:22px
  }
  .nav-contact{
    gap:12px
  }
  .brand{
    width:130px;
    flex-basis:130px
  }
  .employer-layout{
    gap:30px
  }
  .network{
    height:490px
  }
  .source-node{
    width:151px;
    padding:10px;
    grid-template-columns:25px 1fr;
    gap:0 7px
  }
  .source-register{
    width:193px
  }
  .source-employer{
    left:76%
  }
  .source-university{
    left:24%
  }
  .source-node>span:not(.source-icon){
    font-size:.67rem
  }
  .source-node small{
    font-size:.56rem
  }
  .capability-card{
    padding-inline:22px
  }
  .capability-card h3{
    font-size:1.23rem
  }
}
@media(max-width:960px){
  .container{
    width:calc(100% - 72px)
  }
  .nav-inner{
    min-height:74px
  }
  .brand{
    width:128px;
    flex-basis:128px
  }
  .nav-contact{
    margin-left:auto;
    font-size:.72rem;
    padding:9px 15px
  }
  .menu-toggle{
    order:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:40px;
    height:40px;
    flex:0 0 40px;
    background:none;
    border:1px solid #5e87a443;
    border-radius:8px;
    padding:9px
  }
  .menu-line{
    width:20px;
    height:1px;
    background:#bdd3e8;
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] .menu-line:first-child{
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] .menu-line:nth-child(2){
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .navigation{
    display:none;
    position:absolute;
    left:36px;
    right:36px;
    top:68px;
    border:1px solid #5c8aa54f;
    background:#0a1725fa;
    padding:13px;
    border-radius:11px;
    box-shadow:0 24px 45px #0006
  }
  .navigation.is-open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:2px
  }
  .navigation a{
    padding:12px;
    font-size:.9rem
  }
  .navigation a::after{
    display:none
  }
  .hero{
    min-height:880px
  }
  .hero-inner{
    padding-block:135px 100px
  }
  .hero h1{
    font-size:clamp(3.4rem,6.3vw,4.3rem)
  }
  .hero-copy{
    max-width:710px
  }
  .hero-description{
    max-width:600px
  }
  .hero-explanation{
    max-width:590px
  }
  .map-caption{
    right:36px
  }
  .section{
    padding-block:67px
  }
  .problem-grid{
    gap:27px
  }
  .capability-grid{
    gap:13px
  }
  .capability-card{
    padding:23px 18px 19px
  }
  .capability-card h3{
    font-size:1.15rem
  }
  .capability-card p{
    font-size:.86rem;
    min-height:115px
  }
  .future-grid{
    gap:18px
  }
  .future-grid article{
    gap:10px
  }
  .future-grid h3{
    font-size:.87rem
  }
  .principles-strip{
    gap:27px
  }
  .employer-layout{
    grid-template-columns:1fr;
    gap:35px
  }
  .employer-copy{
    max-width:680px
  }
  .employer-copy h2{
    font-size:2.8rem
  }
  .employer-copy .benefit-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px 30px
  }
  .employer-copy .text-link{
    margin-top:17px
  }
  .hero-diagram{
    max-width:650px;
    margin-inline:auto
  }
  .network{
    height:520px
  }
  .source-node{
    width:170px;
    grid-template-columns:29px 1fr;
    padding:12px
  }
  .source-node>span:not(.source-icon){
    font-size:.73rem
  }
  .source-node small{
    font-size:.6rem
  }
  .source-register{
    width:208px
  }
  .source-university{
    left:22%
  }
  .source-employer{
    left:80%
  }
  .candidate-heading{
    gap:35px
  }
  .candidate-heading h2{
    font-size:2.5rem
  }
  .candidate-heading .section-intro{
    font-size:.9rem
  }
  .career-stages{
    gap:27px
  }
  .issuer-note{
    gap:35px
  }
  .founders{
    gap:40px
  }
  .footer-inner{
    gap:25px
  }
  .footer-inner>p{
    font-size:.85rem;
    max-width:200px
  }
  .footer-inner small{
    font-size:.61rem
  }
}
@media(max-width:600px){
  body{
    font-size:16px
  }
  .container{
    width:calc(100% - 40px)
  }
  .nav-inner{
    gap:14px;
    min-height:71px
  }
  .brand{
    width:117px;
    flex-basis:117px
  }
  .nav-contact{
    font-size:.68rem;
    gap:13px;
    padding:8px 12px;
    border-radius:7px
  }
  .menu-toggle{
    width:35px;
    height:35px;
    flex-basis:35px
  }
  .navigation{
    left:20px;
    right:20px;
    top:65px
  }
  .entry-logo{
    width:min(80vw,355px);
    margin-bottom:24px
  }
  .entry-content>p{
    max-width:300px;
    margin-inline:auto;
    line-height:1.4;
    font-size:1.5rem
  }
  .entry-button{
    margin-top:29px;
    min-height:47px;
    font-size:.85rem
  }
  .entry-hint{
    bottom:24px;
    font-size:.62rem;
    max-width:260px;
    margin-inline:auto;
    line-height:1.9
  }
  .entry-hint>span{
    display:none
  }
  .entry-hint{
    left:0;
    right:0
  }
  .hero{
    min-height:850px
  }
  .hero-inner{
    padding-block:118px 97px
  }
  .hero h1{
    font-size:clamp(2.58rem,8.6vw,3.35rem);
    line-height:1.07;
    letter-spacing:-.04em
  }
  .hero h1 em{
    font-size:1.09em;
    line-height:1.04;
    margin-top:12px
  }
  .desktop-break{
    display:none
  }
  .stage-note{
    font-size:.65rem;
    gap:8px;
    padding:7px 11px;
    margin-bottom:26px
  }
  .stage-note>span{
    width:5px;
    height:5px
  }
  .hero-description{
    font-size:.95rem;
    line-height:1.8;
    margin-top:26px
  }
  .hero-explanation{
    font-size:.85rem;
    line-height:1.8;
    margin-top:16px
  }
  .hero-actions{
    gap:10px;
    margin-top:25px
  }
  .hero-actions .button{
    width:100%;
    font-size:.8rem;
    min-height:45px;
    padding-inline:15px;
    justify-content:space-between
  }
  .hero-actions .button>span{
    font-size:1rem
  }
  .hero-facts{
    gap:9px 14px;
    margin-top:24px;
    padding-top:21px;
    font-size:.52rem;
    letter-spacing:.07em
  }
  .hero-facts span:first-child{
    flex-basis:100%
  }
  .hero-facts span:nth-child(2)::before{
    display:none
  }
  .hero-facts span+span::before{
    margin-right:14px
  }
  .scroll-cue{
    bottom:22px;
    width:19px;
    height:30px;
    left:calc(50% - 9px)
  }
  .scroll-cue>span{
    left:8px;
    top:6px;
    height:5px
  }
  .map-caption{
    font-size:.48rem;
    right:20px;
    bottom:29px
  }
  .section{
    padding-block:55px
  }
  .section-heading{
    margin-bottom:29px
  }
  .eyebrow{
    font-size:.57rem;
    letter-spacing:.14em;
    margin-bottom:16px
  }
  h2{
    font-size:2.2rem;
    line-height:1.12
  }
  .section-intro{
    font-size:.91rem;
    margin-top:21px;
    line-height:1.8
  }
  .problem-grid{
    grid-template-columns:1fr;
    gap:24px
  }
  .problem-item{
    padding-top:17px;
    display:grid;
    grid-template-columns:24px 1fr;
    gap:0 17px
  }
  .problem-item .index{
    grid-row:1/3;
    margin-top:3px
  }
  .problem-item h3{
    margin:0;
    font-size:1.15rem
  }
  .problem-item p{
    grid-column:2;
    font-size:.87rem;
    margin-top:11px;
    max-width:none
  }
  .release-title{
    gap:8px;
    margin-bottom:13px;
    flex-wrap:wrap
  }
  .release-title h3{
    font-size:.58rem
  }
  .release-title>span:last-child:not(.status-dot){
    font-size:.57rem
  }
  .capability-grid{
    grid-template-columns:1fr;
    gap:13px
  }
  .capability-card{
    padding:23px 24px
  }
  .capability-top{
    margin-bottom:20px
  }
  .capability-top svg{
    width:27px;
    height:27px
  }
  .capability-card h3{
    font-size:1.4rem;
    min-height:0
  }
  .capability-card h3 br{
    display:none
  }
  .capability-card p{
    font-size:.9rem;
    min-height:0;
    margin-top:13px
  }
  .future-roadmap{
    margin-top:26px
  }
  .future-grid{
    grid-template-columns:1fr;
    gap:20px;
    padding-top:20px
  }
  .future-grid article{
    gap:16px
  }
  .future-grid h3{
    font-size:1rem
  }
  .future-grid p{
    font-size:.81rem;
    margin-top:6px
  }
  .principles-strip{
    grid-template-columns:1fr;
    gap:20px;
    font-size:.76rem;
    margin-top:27px;
    padding-top:22px
  }
  .employer-layout{
    gap:30px
  }
  .employer-copy h2{
    font-size:2.2rem
  }
  .employer-copy .section-intro{
    font-size:.91rem
  }
  .employer-copy .benefit-list{
    grid-template-columns:1fr;
    gap:0;
    margin-block:22px 18px
  }
  .benefit-list li{
    font-size:.88rem;
    gap:12px;
    padding-block:7px
  }
  .sector-line{
    font-size:.67rem
  }
  .text-link{
    font-size:.8rem
  }
  .micro-label{
    font-size:.52rem;
    letter-spacing:.11em
  }
  .network{
    height:440px
  }
  .network-core{
    width:115px;
    height:115px
  }
  .network-core>span{
    font-size:1.13rem
  }
  .core-mark{
    width:39px;
    height:30px
  }
  .core-mark img{
    width:133px;
    height:30px
  }
  .network-core small{
    font-size:.51rem;
    max-width:100px
  }
  .source-node{
    width:143px;
    grid-template-columns:23px 1fr;
    padding:9px;
    gap:0 7px
  }
  .source-icon{
    width:23px;
    height:29px
  }
  .source-icon svg{
    width:22px;
    height:22px
  }
  .source-node>span:not(.source-icon){
    font-size:.64rem
  }
  .source-node small{
    font-size:.53rem
  }
  .source-university{
    left:24%;
    top:16%
  }
  .source-employer{
    left:77%;
    top:30%
  }
  .source-register{
    width:188px;
    left:55%;
    top:84%
  }
  .diagram-foot{
    font-size:.61rem;
    line-height:1.7;
    max-width:290px;
    min-height:42px
  }
  .candidate-heading{
    grid-template-columns:1fr;
    gap:22px
  }
  .candidate-heading h2{
    font-size:2.2rem
  }
  .candidate-heading .section-intro{
    font-size:.9rem;
    max-width:360px
  }
  .section-intro small{
    font-size:.68rem;
    margin-top:10px
  }
  .career-stages{
    grid-template-columns:1fr;
    gap:24px;
    margin-top:28px
  }
  .career-stages li{
    display:grid;
    grid-template-columns:24px 1fr;
    gap:0 17px;
    padding-top:19px
  }
  .career-stages .index{
    grid-row:1/3;
    margin-top:3px
  }
  .career-stages h3{
    margin:0;
    font-size:1.12rem
  }
  .career-stages p{
    grid-column:2;
    font-size:.86rem;
    margin-top:10px
  }
  .issuer-note{
    grid-template-columns:1fr;
    gap:17px;
    margin-top:31px;
    padding-top:28px
  }
  .issuer-note h3{
    font-size:1.45rem
  }
  .issuer-note>p{
    font-size:.85rem
  }
  .issuer-note small{
    font-size:.64rem;
    line-height:1.8
  }
  .brand-statement{
    padding-block:56px
  }
  .brand-statement h2{
    font-size:2.55rem
  }
  .brand-statement .eyebrow{
    font-size:.52rem
  }
  .company h2{
    font-size:2.2rem;
    max-width:310px
  }
  .company h2 em{
    display:inline-block
  }
  .founders{
    grid-template-columns:1fr;
    gap:30px
  }
  .founder{
    padding-top:21px
  }
  .role-label{
    font-size:.55rem;
    margin-bottom:12px
  }
  .founder h3{
    font-size:1.6rem
  }
  .founder>p:last-child{
    font-size:.87rem;
    margin-top:14px;
    line-height:1.85
  }
  .contact h2{
    font-size:2.4rem
  }
  .contact .container>p:not(.eyebrow):not(.commercial-note){
    font-size:.88rem;
    line-height:1.85;
    margin-top:23px
  }
  .contact-email{
    font-size:1.35rem;
    gap:28px;
    margin-top:26px
  }
  .contact .commercial-note{
    font-size:.59rem;
    line-height:1.75;
    margin-top:22px
  }
  .footer-inner{
    min-height:0;
    padding-block:28px;
    flex-wrap:wrap;
    gap:18px 26px;
    justify-content:space-between
  }
  .footer-inner .brand{
    width:111px;
    flex-basis:111px
  }
  .footer-inner>p{
    order:3;
    max-width:none;
    flex-basis:100%;
    font-size:.91rem
  }
  .footer-inner small{
    order:4;
    flex-basis:100%;
    font-size:.62rem
  }
  .replay-intro{
    margin-left:auto;
    font-size:.66rem;
    padding-block:6px
  }
}
@media(max-width:360px){
  .container{
    width:calc(100% - 32px)
  }
  .nav-inner{
    gap:10px
  }
  .brand{
    width:110px;
    flex-basis:110px
  }
  .nav-contact{
    gap:8px;
    font-size:.64rem;
    padding:8px 10px
  }
  .hero-inner{
    padding-top:108px
  }
  .hero h1{
    font-size:2.42rem
  }
  .hero-description{
    font-size:.9rem
  }
  .hero-explanation{
    font-size:.83rem
  }
  .hero-facts{
    font-size:.5rem
  }
  .map-caption{
    display:none
  }
  .stage-note{
    font-size:.6rem
  }
  .network{
    height:420px
  }
  .source-node{
    width:133px;
    grid-template-columns:21px 1fr;
    gap:0 5px
  }
  .source-register{
    width:176px
  }
  .source-node>span:not(.source-icon){
    font-size:.6rem
  }
  .source-node small{
    font-size:.49rem
  }
  .source-employer{
    left:74%;
    top:31%
  }
  .source-university{
    left:25%
  }
  .network-core{
    width:108px;
    height:108px
  }
  .entry-logo{
    width:260px
  }
  .entry-content>p{
    max-width:250px;
    font-size:1.4rem
  }
}
/* As in the demo, phones show the full map above the hero text. */
@media(max-width:760px){
  .hero{min-height:auto}
  .hero-map{top:64px;height:250px}
  .hero-inner{padding-top:300px}
  .hero::after{background:linear-gradient(180deg,rgba(5,13,23,0) 0,rgba(5,13,23,0) 240px,#050d17 330px)}
  .map-caption,.scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*::before,*::after{
    animation:none!important;
    transition:none!important
  }
  .hero-copy,.magnetic,.entry-content{
    transform:none!important
  }
  .hero-copy{
    opacity:1!important
  }
  .pointer-light{
    display:none
  }
  .cinematic-ready .reveal:not(.is-revealed){
    opacity:1;
    transform:none
  }
}