:root{
  --bg:#0a0f0d;
  --ink:#f2ede0;
  --ink-dim:#a9b1ac;
  --green:#4a8a70;
  --green-bright:#6bc19a;
  --green-deep:#1b3b30;
  --black:#000;
  --font-display:"Bebas Neue","Arial Narrow",sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* Topbar */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 28px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);letter-spacing:.12em;font-size:20px}
.brand img{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(107,193,154,.35))}
.brand em{color:var(--green-bright);font-style:normal;margin-left:6px}
.cta-mini{
  border:1px solid rgba(242,237,224,.35);
  padding:10px 18px;border-radius:999px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  transition:.3s var(--ease);
}
.cta-mini:hover{background:var(--green-bright);color:#0a0f0d;border-color:var(--green-bright)}

/* Progress bar */
.progress-rail{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:60}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--green-bright));box-shadow:0 0 12px rgba(107,193,154,.6);transition:width .1s linear}

/* Scenes */
.scene{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;
  padding:120px 6vw;
}
.scene--void{background:radial-gradient(1200px 600px at 50% 50%,rgba(27,59,48,.5),#000 65%)}
.scene--eye{background:#000}
.scene--black{background:#000}
.scene--finale-green{background:radial-gradient(1200px 700px at 50% 40%,var(--green) 0%,var(--green-deep) 55%,#0a1a14 100%)}
.bg{
  position:absolute;inset:-6% -3%;z-index:-2;
  background-size:cover;background-position:center;
  will-change:transform;transform:scale(1.05);
}
.bg-video{object-fit:cover;width:100%;height:100%;inset:0;transform:scale(1.02)}

/* Scene 7b: show the full eyes image instead of cropping it */
.scene[data-scene="7b"] .bg{
  inset:0;background-size:contain;background-repeat:no-repeat;
  transform:scale(.94);
  filter:drop-shadow(0 0 60px rgba(0,0,0,.9));
}
.bg.parallax{transition:transform .2s linear}
.veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0, 0, 0, 0.5))}
.veil.dense{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.5))}

/* Scene transitions - fade between neighbors */
.scene::before{
  content:"";position:absolute;top:0;left:0;right:0;height:22vh;
  background:linear-gradient(180deg,#000,transparent);pointer-events:none;z-index:0;
}
.scene::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:22vh;
  background:linear-gradient(0deg,#000,transparent);pointer-events:none;z-index:0;
}
.scene--finale-green::before,.scene--finale-green::after{display:none}

/* Seamless blend: scene 1 -> scene 2 (no black seam) */
.scene--eye::after{background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 55%,transparent 100%);height:32vh}
.scene--blend-prev{margin-top:-18vh}
.scene--blend-prev::before{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 45%,transparent 100%);height:32vh}
.scene--blend-prev .veil{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.55))}

/* Same-image camera pan (scene 1 top third -> scene 2 bottom third) */
.bg-pan-top,.bg-pan-bottom{
  background-size:auto 260%;
  background-repeat:no-repeat;
  transform:none;inset:0;
}
.bg-pan-top{background-position:center top}
.bg-pan-bottom{background-position:center bottom}

/* Content */
.content{position:relative;z-index:2;max-width:1100px;width:100%}
.content.center{text-align:center;margin:0 auto}
.content.left{text-align:left;margin-right:auto;max-width:820px}
.content.right{text-align:right;margin-left:auto;max-width:820px}
.content.narrow{max-width:900px}

/* Corner-anchored content (pins the content block to a scene corner) */
.content.corner-br{align-self:flex-end;margin-top:auto}
.content.corner-tl{align-self:flex-start;margin-bottom:auto}

.kicker{
  font-family:var(--font-display);
  letter-spacing:.4em;font-size:14px;color:var(--green-bright);
  margin-bottom:24px;
}
.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.92;letter-spacing:.01em;
  font-size:clamp(48px,8vw,128px);
  text-transform:uppercase;
  text-wrap:balance;
}
.display.huge{font-size:clamp(56px,10vw,168px)}
.display.compact{font-size:clamp(32px,4.5vw,64px);line-height:1.15}
.display.delayed{margin-top:12px;color:var(--green-bright)}
.lede{
  margin-top:28px;font-size:clamp(19px,2vw,28px);
  color:var(--ink-dim);max-width:60ch;line-height:1.55;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.content.center .lede{margin-left:auto;margin-right:auto}
.whisper{
  display:inline-block;margin-top:22px;font-style:italic;color:var(--ink-dim);letter-spacing:.02em;
  font-size:clamp(17px,1.7vw,23px);
  padding:8px 20px;border-radius:4px;
  background:rgba(0,0,0,.78);
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.hl{color:var(--green-bright)}
.accent{color:var(--green-bright)}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.scene .reveal:nth-child(2){transition-delay:.1s}
.scene .reveal:nth-child(3){transition-delay:.25s}
.scene .reveal:nth-child(4){transition-delay:.4s}
.scene .reveal:nth-child(5){transition-delay:.55s}

/* CTA */
.cta{
  display:inline-block;margin-top:40px;
  padding:20px 42px;
  font-family:var(--font-display);letter-spacing:.25em;font-size:20px;
  background:var(--green-bright);color:#0a0f0d;
  border-radius:2px;
  box-shadow:0 0 0 0 rgba(107,193,154,.6);
  transition:.4s var(--ease);
  text-transform:uppercase;
}
.cta:hover{transform:translateY(-3px);box-shadow:0 20px 50px -20px rgba(107,193,154,.9)}

/* Hero actions (hovering CTA pair) */
.hero-actions{
  margin-top:40px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
}
.content.left .hero-actions{justify-content:flex-start}
.content.right .hero-actions{justify-content:flex-end}
.cta--ghost{
  display:inline-block;margin-top:0;
  padding:16px 32px;
  font-family:var(--font-display);letter-spacing:.16em;font-size:15px;
  color:var(--ink);
  border:1px solid rgba(242,237,224,.35);
  border-radius:999px;
  background:rgba(10,15,13,.35);
  backdrop-filter:blur(6px);
  transition:.3s var(--ease);
  text-transform:uppercase;
}
.cta--ghost:hover{
  transform:translateY(-3px);
  border-color:var(--green-bright);
  color:var(--green-bright);
  background:rgba(10,15,13,.55);
}

/* Scroll hint */
.scroll-hint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.4em;color:var(--ink-dim);text-transform:uppercase;
  animation:bob 2.4s ease-in-out infinite;z-index:2;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);opacity:.6}50%{transform:translate(-50%,10px);opacity:1}}

/* Pulse orb (healing) */
.pulse-orb{
  margin:44px auto 0;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,var(--green-bright) 0%,rgba(107,193,154,.4) 40%,transparent 70%);
  animation:heal 2.6s ease-in-out infinite;
}
@keyframes heal{
  0%,100%{transform:scale(.85);opacity:.55;filter:blur(2px)}
  50%{transform:scale(1.1);opacity:1;filter:blur(0)}
}

/* Eyes row (scene 10) */
.eyes-row{
  display:flex;gap:clamp(16px,3vw,48px);justify-content:center;align-items:center;
  margin:8px auto 48px;flex-wrap:nowrap;
}
.eye-slot{
  width:clamp(60px,9vw,120px);aspect-ratio:1;
  opacity:0;transform:scale(.4);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  filter:drop-shadow(0 0 22px rgba(107,193,154,.45));
}
.eye-slot img{width:100%;height:100%;object-fit:contain}
.eye-slot--main{width:clamp(90px,12vw,170px)}
.scene[data-scene="7"].in-view .eye-slot--main{opacity:1;transform:scale(1);transition-delay:.1s}
.scene[data-scene="7"].in-view .eye-slot[data-i="1"]{opacity:1;transform:scale(1);transition-delay:.5s}
.scene[data-scene="7"].in-view .eye-slot[data-i="3"]{opacity:1;transform:scale(1);transition-delay:.5s}
.scene[data-scene="7"].in-view .eye-slot[data-i="0"]{opacity:1;transform:scale(1);transition-delay:.9s}
.scene[data-scene="7"].in-view .eye-slot[data-i="4"]{opacity:1;transform:scale(1);transition-delay:.9s}

/* Pillars (scene 11) */
.pillars-content{
  margin:0 auto;text-align:center;max-width:520px;
}
.pillars{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,2vw,22px);margin:32px auto 0;
}
.pillar{
  position:relative;display:flex;flex-direction:row;align-items:center;
  opacity:0;transform:translateY(30px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.pillar img{
  width:clamp(40px,5vw,56px);height:clamp(40px,5vw,56px);flex-shrink:0;
  filter:drop-shadow(0 0 12px rgba(107,193,154,.4));
  transition:filter .3s var(--ease),transform .3s var(--ease);
}
.pillar:hover img{filter:drop-shadow(0 0 20px rgba(107,193,154,.75));transform:scale(1.08)}
.pillar span{
  position:absolute;left:calc(100% + 16px);top:50%;
  transform:translate(-8px,-50%);white-space:nowrap;
  font-family:var(--font-display);font-size:clamp(14px,1.5vw,22px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-align:left;
  padding:8px 16px;border-radius:4px;
  background:rgba(6,14,11,.85);border:1px solid rgba(107,193,154,.3);
  text-shadow:0 2px 8px rgba(0,0,0,.8);
  opacity:0;pointer-events:none;z-index:3;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.pillar:hover span,.pillar span.shown{opacity:1;transform:translate(0,-50%)}
.scene[data-scene="9"].in-view .pillar[data-i="0"]{opacity:1;transform:none;transition-delay:.1s}
.scene[data-scene="9"].in-view .pillar[data-i="1"]{opacity:1;transform:none;transition-delay:.35s}
.scene[data-scene="9"].in-view .pillar[data-i="2"]{opacity:1;transform:none;transition-delay:.6s}
.scene[data-scene="9"].in-view .pillar[data-i="3"]{opacity:1;transform:none;transition-delay:.85s}
.scene[data-scene="9"].in-view .pillar[data-i="4"]{opacity:1;transform:none;transition-delay:1.1s}

/* Footer */
footer{background:#000;padding:80px 6vw;text-align:center;color:var(--ink-dim)}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:16px}
.foot-inner img{width:60px;height:60px;opacity:.9}
.foot-inner p{font-family:var(--font-display);letter-spacing:.25em;font-size:14px;color:var(--ink)}
.foot-inner .muted{font-family:var(--font-body);font-size:12px;color:var(--ink-dim);letter-spacing:.1em}

/* Mobile */
@media (max-width:720px){
  .topbar{padding:14px 18px}
  .scene{padding:100px 6vw}
  .eyes-row{gap:8px}
  .content.left,.content.right{text-align:center;margin:0 auto}
  .pillars-content{max-width:100%}
  .pillars{gap:clamp(8px,3vw,16px);align-items:flex-start;margin-left:8vw}
  .pillar span{font-size:13px;padding:6px 12px}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .pulse-orb,.scroll-hint{animation:none}
}

/* Multi-page nav overlay on top of scenes */
.site-nav { gap: 20px; }
.site-nav__links {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  font-family: var(--font-body);
}
.site-nav__links a {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-dim); transition: color .25s var(--ease);
}
.site-nav__links a:hover { color: var(--ink); }
.site-nav__links a.is-active { color: var(--green-bright); }
.site-nav__links-cta { display: none; }
.site-nav__burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; padding: 8px; flex-direction: column;
  justify-content: space-between; align-items: stretch;
}
.site-nav__burger span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
}
@media (max-width: 900px) {
  .site-nav__burger { display: flex; }
  .cta-mini { display: none; }
  .site-nav__links {
    position: fixed; top: 64px; left: 0; right: 0; z-index: 50;
    flex-direction: column; align-items: stretch;
    background: rgba(0, 0, 0, 0.95);
    padding: 24px; gap: 18px;
    display: flex;
    transform: translateY(-120%); opacity: 0; pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  .site-nav__links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .site-nav__links a { font-size: 15px; padding: 8px 0; }
  .site-nav__links-cta { display: inline-block; margin-top: 8px; text-align: center; }
}

/* IGSS welcome popup */
.igss-popup {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 10, 8, 0.72);
  backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.igss-popup.is-visible { opacity: 1; pointer-events: auto; }
.igss-popup__card {
  position: relative; width: 100%; max-width: 420px;
  background: linear-gradient(180deg, #0f2119, #0a0f0d);
  border: 1px solid rgba(242, 237, 224, 0.14);
  border-radius: 20px;
  padding: clamp(28px, 5vw, 40px);
  text-align: center;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.igss-popup.is-visible .igss-popup__card { transform: translateY(0) scale(1); }
.igss-popup__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(242, 237, 224, 0.2);
  color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.igss-popup__close:hover { border-color: var(--green-bright); color: var(--green-bright); }
.igss-popup__eyebrow {
  font-family: var(--font-display);
  letter-spacing: 0.4em; font-size: 11px; color: var(--green-bright);
  text-transform: uppercase; margin: 0 0 14px;
}
.igss-popup__title {
  font-family: var(--font-display);
  font-weight: 400; font-size: clamp(26px, 4vw, 32px);
  line-height: 1.1; text-transform: uppercase; color: var(--ink);
  margin: 0 0 12px;
}
.igss-popup__body {
  color: var(--ink-dim); font-size: 15px; line-height: 1.6;
  margin: 0 0 26px;
}
.igss-popup__actions { display: flex; flex-direction: column; gap: 10px; }
.igss-popup__link {
  color: var(--ink-dim); font-size: 12px; letter-spacing: 0.1em; margin-top: 4px;
  cursor: pointer; background: none; border: none; text-decoration: underline;
  font-family: var(--font-body);
}
.igss-popup__link:hover { color: var(--ink); }