:root {
  --navy:#031630;
  --teal:#00bbae;
  --gold:#ffbc32;
  --ink:#132c40;
  --muted:#566a78;
  --line:#dae4e8;
  --paper:#fff;
  --wash:#f3f7f8;
  color-scheme:light;
  font-family:'Segoe UI',Tahoma,Arial,sans-serif;
  font-size:16px;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  line-height:1.75;
}
a {
  color:inherit;
  text-decoration:none;
}
button {
  font:inherit;
}
a,button {
  -webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:5px;
}
h1,h2,h3,p {
  margin:0;
}
img {
  max-width:100%;
  display:block;
}
em {
  font-style:normal;
}
.container {
  width:min(1200px,calc(100% - 80px));
  margin-inline:auto;
}
.skip {
  position:absolute;
  top:-100px;
  background:var(--gold);
  color:var(--navy);
  padding:12px;
  z-index:10;
}
.skip:focus {
  top:10px;
}
.masthead {
  background:var(--navy);
  color:white;
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:100px;
  border-bottom:1px solid #ffffff20;
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:1.6rem;
  font-weight:750;
  line-height:1.25;
}
.brand img {
  border-radius:10px;
}
.brand small {
  display:block;
  font-size:.7rem;
  letter-spacing:.2em;
  color:#a7c9d0;
  margin-top:4px;
}
.site-header nav {
  display:flex;
  gap:32px;
  font-size:.95rem;
  color:#c5d3dd;
}
.site-header nav a:hover {
  color:white;
}
.language-form button {
  border:1px solid #526074;
  border-radius:8px;
  background:transparent;
  color:white;
  padding:8px 15px;
  cursor:pointer;
}
.hero {
  display:grid;
  grid-template-columns:1.25fr .8fr;
  align-items:center;
  gap:64px;
  padding-block:55px 70px;
}
.eyebrow {
  font-size:.85rem;
  font-weight:650;
  letter-spacing:.06em;
  color:#068278;
  margin-bottom:16px;
}
.hero .eyebrow {
  color:#afc8d4;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow span {
  height:7px;
  width:7px;
  border-radius:50%;
  background:var(--gold);
}
h1 {
  font-size:clamp(2.4rem,4.4vw,4.1rem);
  line-height:1.35;
  letter-spacing:-.035em;
  font-weight:750;
}
h1 em {
  color:#27d2bf;
}
.intro {
  font-size:1.1rem;
  color:#b8cad6;
  max-width:580px;
  margin-block:20px 26px;
}
.primary-action {
  display:inline-flex;
  gap:30px;
  align-items:center;
  background:var(--teal);
  color:var(--navy);
  padding:11px 23px;
  border-radius:8px;
  font-weight:750;
}
.primary-action:hover {
  background:#2bd4c4;
}
.secondary-action {
  display:inline-flex;
  gap:14px;
  align-items:center;
  padding:12px 20px;
  color:#e5edf2;
}
.brand-visual {
  max-width:360px;
  justify-self:center;
  text-align:center;
}
.brand-visual img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
}
.brand-visual p {
  font-size:.85rem;
  color:#a7bdce;
}
.brand-visual p span {
  display:block;
  color:white;
  letter-spacing:.4em;
  font-size:1rem;
  margin-bottom:6px;
}
.portals {
  padding-block:32px 64px;
}
.section-caption {
  display:flex;
  align-items:baseline;
  gap:22px;
  margin-bottom:20px;
}
.section-caption h2 {
  font-size:1.35rem;
}
.section-caption p {
  color:var(--muted);
  font-size:.95rem;
}
.portal-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.portal-card {
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  transition:transform .18s,border-color .18s,box-shadow .18s;
  background:white;
}
.portal-card:hover {
  transform:translateY(-4px);
  border-color:#00877d;
  box-shadow:0 12px 32px #0316300b;
}
.portal-card:first-child {
  border-top:3px solid #009b8f;
  padding-top:22px;
}
.portal-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.portal-number {
  color:#417b7d;
  font-size:.9rem;
  font-variant-numeric:tabular-nums;
}
.portal-arrow {
  border-radius:50%;
  width:36px;
  height:36px;
  background:#eaf6f4;
  color:#00766b;
  display:grid;
  place-items:center;
}
.portal-card h3 {
  font-size:1.35rem;
  margin-bottom:7px;
}
.portal-card p {
  color:var(--muted);
  font-size:.95rem;
  min-height:3.4em;
}
.portal-enter {
  color:#006e65;
  font-weight:650;
  font-size:.9rem;
  display:flex;
  gap:16px;
  margin-top:14px;
}
.modules-section {
  padding-block:72px 80px;
  background:var(--wash);
  border-block:1px solid var(--line);
}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:60px;
  margin-bottom:40px;
}
.section-heading h2,.about h2 {
  font-size:clamp(2rem,3vw,3rem);
  line-height:1.45;
  letter-spacing:-.025em;
}
.section-heading>p {
  max-width:450px;
  color:var(--muted);
  font-size:1rem;
}
.module-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  border-block-start:1px solid var(--line);
  border-inline-start:1px solid var(--line);
}
.module-card {
  padding:26px 23px;
  background:#fff;
  border-block-end:1px solid var(--line);
  border-inline-end:1px solid var(--line);
  min-width:0;
}
.module-number {
  display:block;
  color:#26736e;
  font-size:.8rem;
  margin-bottom:18px;
  font-variant-numeric:tabular-nums;
}
.module-card h3 {
  font-size:1.07rem;
  line-height:1.5;
  margin-bottom:10px;
}
.module-card p {
  font-size:.9rem;
  line-height:1.8;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.about {
  padding-block:72px 80px;
}
.about>div {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}
.about em {
  color:#008579;
}
.about p:not(.eyebrow) {
  color:var(--muted);
  font-size:1.05rem;
}
.site-footer {
  background:var(--navy);
  color:#c1d0db;
  padding-block:28px;
}
.site-footer>.container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-footer p,.site-footer a:not(.brand) {
  font-size:.85rem;
}
.site-footer .brand {
  color:white;
  font-size:1.3rem;
}
@media(min-width:1500px) {
  .hero {
    padding-block:65px 75px;
  }
}
@media(max-width:1000px) {
  .hero {
    gap:30px;
  }
  .module-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .container {
    width:calc(100% - 48px);
  }
  .brand-visual {
    max-width:270px;
  }
  .section-heading {
    gap:30px;
  }
  .about>div {
    gap:35px;
  }
}
@media(max-width:700px) {
  .container {
    width:calc(100% - 36px);
  }
  .site-header {
    min-height:82px;
    gap:12px;
  }
  .site-header nav {
    display:none;
  }
  .brand {
    font-size:1.35rem;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:38px 40px;
    gap:12px;
  }
  .brand-visual {
    display:none;
  }
  h1 {
    font-size:2.65rem;
  }
  .intro {
    font-size:1rem;
  }
  .secondary-action {
    padding-inline:12px;
    font-size:.9rem;
  }
  .primary-action {
    gap:20px;
  }
  .section-caption {
    display:block;
  }
  .section-caption p {
    margin-top:5px;
  }
  .portal-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .portal-card {
    padding:20px;
  }
  .portal-card:first-child {
    padding-top:18px;
  }
  .portal-card p {
    min-height:0;
  }
  .portal-top {
    float:inline-end;
    margin-inline-start:12px;
  }
  .portal-number {
    display:none;
  }
  .portal-enter {
    margin-top:12px;
  }
  .portals {
    padding-block:26px 40px;
  }
  .section-heading {
    display:block;
    margin-bottom:26px;
  }
  .section-heading>p {
    margin-top:20px;
  }
  .module-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .module-card {
    padding:20px 16px;
  }
  .module-card h3 {
    font-size:1rem;
  }
  .module-card p {
    font-size:.875rem;
  }
  .module-number {
    margin-bottom:12px;
  }
  .modules-section {
    padding-block:42px;
  }
  .about {
    padding-block:44px;
  }
  .about>div {
    grid-template-columns:1fr;
    gap:20px;
  }
  .site-footer>.container {
    flex-wrap:wrap;
    gap:18px;
  }
  .site-footer p {
    order:3;
    width:100%;
    border-top:1px solid #ffffff20;
    padding-top:16px;
  }
  .site-footer a:last-child {
    margin-inline-start:auto;
  }
}
@media(max-width:360px) {
  .module-grid {
    grid-template-columns:1fr;
  }
  h1 {
    font-size:2.2rem;
  }
  .primary-action,.secondary-action {
    display:flex;
    justify-content:center;
  }
  .secondary-action {
    margin-top:8px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  .portal-card {
    transition:none;
  }
  .portal-card:hover {
    transform:none;
  }
}
@media print {
  .masthead,.site-footer {
    background:white;
    color:#132c40;
  }
  .brand-visual,.language-form,.primary-action,.secondary-action {
    display:none;
  }
  .hero {
    display:block;
  }
  .module-grid {
    grid-template-columns:repeat(3,1fr);
  }
  .module-card {
    break-inside:avoid;
  }
  .intro,.hero .eyebrow {
    color:#566a78;
  }
}
/* The landing page's luminous orbital identity. */
.hero-stage{position:relative;isolation:isolate;overflow:hidden;background:#061728;color:#fff}
.hero-stage:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 20% 50%,#087b7438,transparent 52%),radial-gradient(ellipse at 85% 0%,#21558330,transparent 50%)}
.wave-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.8}
.masthead{background:transparent}
.site-header{min-height:104px;border-color:#aac9d51f}
.site-header nav{font-size:.95rem}
.language-form button{border-radius:100px;padding:9px 20px;background:#ffffff06}
.hero{min-height:650px;gap:70px;padding-block:76px 110px;grid-template-columns:1.2fr 1fr}
h1{font-size:clamp(2.8rem,5vw,4.7rem);line-height:1.35;letter-spacing:-.035em}
html[dir=rtl] h1,html[dir=rtl] h2{letter-spacing:0}
h1 em{color:#64edca}
.hero .eyebrow{font-size:.875rem;color:#c3e1de;border:1px solid #8ce6d633;background:#0a302d80;display:inline-flex;padding:7px 14px;border-radius:99px;margin-bottom:24px}
.intro{line-height:1.95;margin-block:24px 32px;max-width:550px;color:#bdd0db}
.primary-action{background:#9ef3cc;border-radius:100px;padding:14px 25px;box-shadow:0 5px 28px #6eeacb18;transition:background .2s,transform .2s}
.primary-action:hover{background:#c3ffe1;transform:translateY(-3px)}
.secondary-action{font-size:.95rem}
.brand-visual{position:relative;width:100%;max-width:450px;min-height:450px;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate}
.brand-visual:before{content:"";position:absolute;width:65%;aspect-ratio:1;border-radius:50%;background:#17bfaa12;box-shadow:0 0 90px #36c3a627;z-index:-1}
.brand-visual img{width:220px;border-radius:50%;mix-blend-mode:screen;filter:drop-shadow(0 12px 35px #0004)}
.brand-visual p{margin-top:16px;font-size:.875rem}
.brand-visual p span{font-size:.875rem;letter-spacing:.4em;color:#e4fff8}
.orbital-ring{position:absolute;inset:4%;border:1px solid #8ce7d82b;border-radius:50%;z-index:-1;animation:orbit 38s linear infinite}
.orbital-ring:after{content:"";position:absolute;top:16%;left:12%;width:9px;height:9px;border-radius:50%;background:#8af3d2;box-shadow:0 0 20px #8af3d2}
.ring-two{inset:12%;border-style:dashed;border-color:#aed8ec24;animation-direction:reverse;animation-duration:55s}
.ring-two:after{background:#f1c775;width:6px;height:6px}
.ring-three{inset:-4%;transform:rotateX(52deg) rotate(-28deg);animation:none;border-color:#8ce7d81c}
.ring-three:after{display:none}
.orbit-label{position:absolute;padding:10px 17px;border:1px solid #b4dccc35;background:#102b36ed;box-shadow:0 14px 35px #0002;border-radius:12px;font-size:.875rem;color:#e0f5ef;animation:float 7s ease-in-out infinite}
.label-one{top:9%;inset-inline-start:0}.label-two{bottom:18%;inset-inline-end:-2%;animation-delay:-2s}.label-three{bottom:5%;inset-inline-start:4%;animation-delay:-4s}
.portals{padding-block:58px 80px}
.section-caption{justify-content:space-between;margin-bottom:28px}
.section-caption h2{font-size:1.75rem}
.portal-grid{gap:20px}
.portal-card{padding:28px;border-radius:20px;background:linear-gradient(150deg,#fff,#f7faf9);position:relative;overflow:hidden}
.portal-card:first-child{padding-top:28px;border-top:1px solid var(--line)}
.portal-card:hover{border-color:#259d87;box-shadow:0 15px 35px #082f2710;transform:translateY(-6px)}
.portal-arrow{width:44px;height:44px;background:#e6f3ee}
.portal-top{margin-bottom:28px}.portal-enter{margin-top:24px}.portal-card p{font-size:1rem}
.modules-section{background:#edf3f3;padding-block:85px}
.module-grid{border:0;gap:14px}
.module-card{border:1px solid #dbe6e6;border-radius:14px;padding:26px;background:#ffffffb8;transition:border-color .2s,background .2s}
.module-card:hover{border-color:#76afa3;background:#fff}
.module-number{font-size:.875rem;color:#427b71}
.module-card h3{font-size:1.125rem}.module-card p{font-size:.9375rem}
.about{padding-block:90px}.about em{color:#087c67}
.site-footer{background:#061728}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-color-scheme:dark){:root{--ink:#e5eff2;--muted:#a9bec8;--line:#28404a;--paper:#0b202b;--wash:#102630;color-scheme:dark}.portal-card{background:linear-gradient(150deg,#142e38,#10252f)}.portal-enter,.module-number,.about em,.eyebrow{color:#76d9be}.portal-arrow{background:#21483f;color:#aff5db}.modules-section{background:#0e252f}.module-card{background:#122d37;border-color:#29454e}.module-card:hover{background:#193b44}.portal-card:hover{border-color:#62b59e}}
@media(max-width:1000px){.hero{gap:32px;min-height:580px}.brand-visual{min-height:350px}.brand-visual img{width:180px}.orbit-label{padding:8px 12px}.label-one{inset-inline-start:-4%}.hero h1{font-size:clamp(2.5rem,5vw,4.3rem)}}
@media(max-width:700px){.hero{grid-template-columns:1fr;padding-block:42px 54px;gap:35px;min-height:0}.hero h1{font-size:clamp(2.5rem,9vw,3.7rem)}.brand-visual{display:flex;min-height:320px;max-width:330px;margin-top:5px}.brand-visual img{width:150px}.brand-visual p{font-size:.875rem}.label-one{inset-inline-start:0}.label-two{inset-inline-end:0}.orbit-label{font-size:.875rem}.hero .eyebrow{font-size:.875rem}.portals{padding-block:36px 50px}.portal-card,.portal-card:first-child{padding:22px}.portal-top{margin-bottom:12px}.modules-section{padding-block:50px}.about{padding-block:50px}.section-caption p{font-size:1rem}.module-card{padding:20px 16px}.module-card h3{font-size:1rem}.module-card p{font-size:.9375rem}.site-header{min-height:88px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.primary-action:hover,.portal-card:hover{transform:none}}
@media print{.hero-stage{background:white;color:#132c40}.wave-canvas,.orbital-ring,.orbit-label{display:none}}

/* Module links share an icon language and respond to mouse and keyboard. */
.module-card{--module-accent:#087a69;--module-tint:#e0f4ec;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;padding:28px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}
.module-card:nth-child(4n+2){--module-accent:#2967bc;--module-tint:#e7efff}
.module-card:nth-child(4n+3){--module-accent:#8b4daf;--module-tint:#f2e9fc}
.module-card:nth-child(4n+4){--module-accent:#a16414;--module-tint:#fff1d9}
.module-card:before{content:"";position:absolute;width:150px;height:150px;inset-inline-end:-75px;top:-75px;border-radius:50%;background:var(--module-tint);z-index:-1;opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s}
.module-card-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px}
.module-icon{display:grid;place-items:center;width:58px;height:58px;flex-shrink:0;border-radius:17px;background:var(--module-tint);color:var(--module-accent);transition:transform .3s ease,box-shadow .3s ease}
.module-icon svg{display:block;overflow:visible}
.module-card .module-number{margin:0;font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}
.module-card h3{line-height:1.65;margin-bottom:10px}
.module-card p{flex:1}
.module-action{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:24px;padding-top:17px;border-top:1px solid var(--line);font-size:.875rem;font-weight:650;color:var(--module-accent)}
.module-action>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--module-tint);transition:transform .25s}
.module-card:hover,.module-card:focus-visible{transform:translateY(-6px);border-color:var(--module-accent);box-shadow:0 18px 36px #062c2914}
.module-card:hover:before,.module-card:focus-visible:before{opacity:.7;transform:scale(1)}
.module-card:hover .module-icon,.module-card:focus-visible .module-icon{transform:rotate(-6deg) scale(1.06);box-shadow:0 8px 20px #102b3612}
.module-card:hover .module-action>span,.module-card:focus-visible .module-action>span{transform:translate(2px,-2px)}
html[dir=rtl] .module-action>span{scale:-1 1}
@media(prefers-color-scheme:dark){.module-card{--module-accent:#7ae4c2;--module-tint:#1c473f}.module-card:nth-child(4n+2){--module-accent:#9cc7ff;--module-tint:#213d58}.module-card:nth-child(4n+3){--module-accent:#d5aafa;--module-tint:#3c3052}.module-card:nth-child(4n+4){--module-accent:#f2cd86;--module-tint:#493e28}}
@media(max-width:700px){.module-card{padding:20px 16px}.module-card-top{margin-bottom:20px}.module-icon{width:48px;height:48px;border-radius:14px}.module-action{margin-top:20px;font-size:.875rem;gap:5px}.module-action>span{flex-shrink:0}}
@media(max-width:420px){.module-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.module-card:hover,.module-card:focus-visible,.module-card:hover .module-icon,.module-card:focus-visible .module-icon,.module-card:hover .module-action>span,.module-card:focus-visible .module-action>span{transform:none}}

/* A self-contained, user-triggered film inside the brand's existing footprint. */
.story-trigger{display:block;border:0;padding:0;background:transparent;border-radius:50%;cursor:pointer;position:relative;z-index:1}
.story-trigger:focus-visible{outline:3px solid #9ef3cc;outline-offset:8px}
.story-trigger img{transition:filter .3s,transform .3s}
.story-trigger:hover img{filter:drop-shadow(0 0 26px #36dfc460);transform:scale(1.035)}
.story-hint{font-size:.875rem;color:#a8cdc8;margin-top:10px;text-align:center;max-width:250px}
.brand-visual>p{transition:opacity .3s}
.logo-story[hidden],.story-scene[hidden]{display:none}
.logo-story{position:absolute;inset:-12px;z-index:5;border:1px solid #619eaa5e;border-radius:26px;overflow:hidden;isolation:isolate;background:#040e1c;box-shadow:0 22px 65px #0005,0 0 50px #3bf1c714;color:#edf8fc;display:flex;flex-direction:column}
.logo-story:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#1b777c42,transparent 65%),repeating-linear-gradient(0deg,transparent 0 4px,#8fecff04 5px 6px);z-index:-1}
.story-letterbox{height:18px;flex-shrink:0;background:#020913;border-bottom:1px solid #91d9cc20}
.story-scenes{flex:1;position:relative;min-height:0}
.story-scene{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 22px;text-align:center;animation:scene-reveal .7s ease-out both;--scene-color:#f2c781}
.story-cards{--scene-color:#e6c59a}.story-code{--scene-color:#76edb3}.story-web{--scene-color:#8bcaff}.story-ai{--scene-color:#c3abff}.story-finale{--scene-color:#81f5d4}
.story-era{font-size:.75rem;letter-spacing:.16em;color:var(--scene-color);font-weight:600}
.story-art{position:relative;display:grid;place-items:center;width:120px;height:120px;margin:22px 0;color:var(--scene-color)}
.story-art:before,.story-art:after{content:"";position:absolute;inset:-10px;border:1px solid currentColor;border-radius:50%;opacity:.18;animation:story-orbit 12s linear infinite}
.story-art:after{inset:-22px;border-style:dashed;animation-direction:reverse;opacity:.12}
.story-art svg{width:88px;height:88px;filter:drop-shadow(0 0 14px currentColor);animation:art-arrive 1.2s ease-out both}
.story-code .story-art:before{border-radius:14px;transform:rotate(-8deg)}
.story-scene h2{font-size:clamp(1.35rem,2.1vw,1.8rem);line-height:1.5;color:#f3fbff;margin:0 0 10px}
.brand-visual .story-scene p{font-size:1rem;line-height:1.8;color:#bacee0;margin:0;max-width:340px}
.story-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:#020b16;border-top:1px solid #80d0c127;flex-shrink:0}
.story-controls button{font:inherit;font-size:.875rem;background:#12313b;border:1px solid #427170;color:#d4f8f0;border-radius:8px;padding:6px 14px;cursor:pointer;min-height:38px}
.story-controls button:hover{background:#21514e}
.story-count{font-size:.875rem;color:#9ebabc;font-variant-numeric:tabular-nums}
.story-progress{height:3px;background:#17303d;flex-shrink:0;direction:ltr}
.story-progress span{display:block;height:100%;width:16.6667%;background:#89efd2;box-shadow:0 0 10px #89efd2;transition:width .5s ease}
.finale-logo{position:relative;margin:10px 0;isolation:isolate;animation:logo-arrive 2.2s cubic-bezier(.16,1,.3,1) both}
.brand-visual .finale-logo img{width:155px;height:155px;object-fit:contain;filter:drop-shadow(0 0 22px #45eed666);animation:logo-light 3.5s ease-out both}
.finale-logo:before,.finale-logo:after{content:"";position:absolute;inset:-10px;border:1px solid #87f7d8;border-radius:50%;z-index:-1;animation:finale-ring 2.6s ease-out both}
.finale-logo:after{animation-delay:.35s;border-color:#e5ca8a}
.story-finale h2{font-size:2.25rem;animation:finale-title 1.5s .6s both}
.story-finale p{animation:finale-title 1.5s 1s both}
.story-playing>.orbital-ring,.story-playing>.orbit-label{animation-play-state:paused;opacity:.18}
.story-playing>.story-trigger,.story-playing>.story-hint,.story-playing>p{visibility:hidden}
@keyframes scene-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes art-arrive{from{opacity:0;transform:scale(.8);stroke-dasharray:80;stroke-dashoffset:80}to{opacity:1;transform:scale(1);stroke-dasharray:80;stroke-dashoffset:0}}
@keyframes story-orbit{to{rotate:360deg}}
@keyframes logo-arrive{from{opacity:0;transform:scale(.55) translateY(20px);filter:blur(12px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes logo-light{0%{opacity:.15}45%{opacity:1;filter:drop-shadow(0 0 38px #45eed6aa)}100%{filter:drop-shadow(0 0 18px #45eed655)}}
@keyframes finale-ring{0%{opacity:0;transform:scale(.5)}35%{opacity:.7}100%{opacity:0;transform:scale(1.7)}}
@keyframes finale-title{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.brand-visual{min-height:430px}.story-scene{padding:14px}.story-art{width:100px;height:100px;margin:20px 0}.story-art svg{width:75px;height:75px}.brand-visual .story-scene p{font-size:.9375rem}.brand-visual .finale-logo img{width:140px;height:140px}}
@media(max-width:700px){.brand-visual{min-height:420px}.logo-story{inset:0 -4px}.story-scene h2{font-size:1.4rem}.story-hint{font-size:.875rem}}
@media(prefers-reduced-motion:reduce){.story-trigger:hover img{transform:none}.story-scene,.story-art svg,.finale-logo,.story-finale h2,.story-finale p{opacity:1;transform:none;filter:none}.finale-logo:before,.finale-logo:after{display:none}}

/* The film and idle logo occupy the very same circular aperture. */
.logo-aperture{position:relative;width:260px;max-width:100%;aspect-ratio:1;flex-shrink:0;border-radius:50%;isolation:isolate}
.logo-aperture .story-trigger{width:100%;height:100%;border-radius:50%}
.logo-aperture .story-trigger img{width:100%;height:100%;object-fit:contain}
.logo-aperture .logo-story{inset:0;width:100%;height:100%;border-radius:50%;clip-path:circle(50% at 50% 50%);display:block;background:#020b19;border:1px solid #57c5b680;box-shadow:0 0 28px #35ddbc28}
.logo-aperture .logo-story[hidden]{display:none}
.logo-aperture .story-letterbox{display:none}
.logo-aperture .story-scenes{position:absolute;inset:0;min-height:0}
.logo-aperture .story-scene{position:absolute;inset:0;padding:0;display:block;animation:aperture-cut .9s ease-out both;overflow:hidden;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#17516560,transparent 70%)}
.logo-aperture .story-scene[hidden]{display:none}
.logo-aperture .story-era{position:absolute;top:27px;left:15%;width:70%;font-size:.75rem;letter-spacing:.07em}
.logo-aperture .story-art{position:absolute;top:64px;left:50%;translate:-50% 0;width:74px;height:74px;margin:0}
.logo-aperture .story-art svg{width:64px;height:64px;animation:cinema-drift 4.8s ease-out both}
.logo-aperture .story-art:before{inset:-18px;opacity:.22}.logo-aperture .story-art:after{inset:-36px;opacity:.1}
.logo-aperture .story-scene h2{position:absolute;top:151px;left:12%;width:76%;font-size:1rem;line-height:1.45;margin:0;animation:finale-title .8s .25s both}
/* Keep the full narrative available to assistive technology without crowding the film. */
.logo-aperture .story-scene p{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.logo-aperture .story-controls{position:absolute;bottom:26px;left:50%;translate:-50% 0;width:180px;max-width:75%;padding:0;gap:6px;border:0;background:transparent;z-index:3}
.logo-aperture .story-controls button{font-size:.875rem;min-height:32px;padding:3px 8px;border-radius:20px;background:#102a38cc;border-color:#588e9270}
.logo-aperture .story-controls button:focus-visible{outline:2px solid #b3ffe3;outline-offset:2px}
.logo-aperture .story-count{font-size:.75rem;color:#c1dcd9;white-space:nowrap}
.logo-aperture .story-progress{position:absolute;bottom:15px;left:35%;width:30%;height:2px}
.logo-aperture .finale-logo{position:absolute;top:24px;left:50%;translate:-50% 0;margin:0}
.logo-aperture .finale-logo img{width:135px;height:135px}
.logo-aperture .story-finale h2{top:157px;font-size:1.3rem;animation:finale-title 1.5s .6s both}
.logo-aperture .story-finale .story-era{display:none}
.logo-aperture .story-scene:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#bbfff519 45%,#eefff940 49%,transparent 54%);translate:-100% 0;animation:lens-sweep 4.5s ease-out both}
.logo-aperture .story-finale:after{animation-delay:.7s}
.story-playing>.story-hint,.story-playing>p{visibility:visible}
.story-playing>.orbit-label{opacity:1;animation-play-state:running}
.story-playing .logo-aperture>.story-trigger{visibility:hidden}
@keyframes aperture-cut{from{opacity:0;filter:blur(6px);transform:scale(1.12)}to{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes cinema-drift{from{opacity:0;transform:scale(.65) rotate(-8deg);filter:blur(4px) drop-shadow(0 0 12px currentColor)}25%{opacity:1;filter:blur(0) drop-shadow(0 0 12px currentColor)}to{opacity:1;transform:scale(1.12) rotate(0);filter:blur(0) drop-shadow(0 0 18px currentColor)}}
@keyframes lens-sweep{0%,15%{translate:-100% 0;opacity:0}35%{opacity:1}80%,100%{translate:100% 0;opacity:0}}
@media(max-width:700px){.logo-aperture{width:250px}.logo-aperture .story-art{top:58px}.logo-aperture .story-scene h2{top:144px}.logo-aperture .story-finale h2{top:150px}.logo-aperture .finale-logo{top:20px}}
@media(prefers-reduced-motion:reduce){.logo-aperture .story-scene,.logo-aperture .story-art svg{filter:none;transform:none;opacity:1}.logo-aperture .story-scene:after{display:none}}

/* Keep the cinematic aperture free of visible playback controls. */
.logo-aperture .story-controls{display:none}

/* Center the logo and its film within the surrounding orbital composition. */
.brand-visual{justify-content:center;align-items:center}
.brand-visual>.logo-aperture{margin:0;align-self:center}

/* Feature previews replace navigation on the public module cards. */
.module-card{padding-bottom:94px;cursor:pointer}
.module-features[hidden]{display:none}
.module-features{position:absolute;inset-inline:18px;bottom:22px;border-top:1px solid var(--line);padding-top:14px;overflow:hidden;color:var(--module-accent)}
.feature-track{display:flex;width:500%;list-style:none;padding:0;margin:0;animation:feature-pan 18s ease-in-out infinite;--feature-direction:-1}
html[dir=rtl] .feature-track{--feature-direction:1}
.feature-track li{flex:0 0 20%;display:flex;align-items:center;gap:10px;padding-inline:4px;font-size:.9375rem;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.feature-index{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--module-tint);font-size:.75rem;font-variant-numeric:tabular-nums}
@keyframes feature-pan{0%,12%{transform:translateX(0)}20%,32%{transform:translateX(calc(var(--feature-direction)*20%))}40%,52%{transform:translateX(calc(var(--feature-direction)*40%))}60%,72%{transform:translateX(calc(var(--feature-direction)*60%))}80%,95%{transform:translateX(calc(var(--feature-direction)*80%))}100%{transform:translateX(0)}}
/* A restrained highlight sweeps over the original logo, inside its circular mask. */
.logo-aperture .story-trigger{overflow:hidden;box-shadow:inset 0 0 0 1px #92f8e23b,0 0 28px #00cfb21a}
.logo-aperture .story-trigger:after{content:"";position:absolute;inset:-25%;pointer-events:none;background:linear-gradient(115deg,transparent 38%,#adfff00d 44%,#e6fff866 49%,#afffe91a 53%,transparent 59%);transform:translateX(-110%);animation:brand-sheen 8s ease-in-out infinite}
@keyframes brand-sheen{0%,20%{transform:translateX(-110%);opacity:0}25%{opacity:.7}48%{transform:translateX(110%);opacity:0}100%{transform:translateX(110%);opacity:0}}
.site-header .brand{font-size:1.4rem}.brand small{letter-spacing:.12em;font-size:.75rem}
@media(max-width:700px){.site-header .brand{font-size:1.2rem}.module-card{padding-bottom:94px}.module-features{inset-inline:14px}}
@media(prefers-reduced-motion:reduce),(hover:none){.module-features{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--module-accent) transparent}.feature-track{animation:none}.feature-track li{padding-bottom:6px}}
@media(prefers-reduced-motion:reduce){.logo-aperture .story-trigger:after{display:none}}