/* ===== HERO ===== */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:100px 0 60px;position:relative;overflow:hidden}
.wash{position:absolute;border-radius:50%;pointer-events:none;filter:blur(120px);will-change:transform}
.w1{width:45vw;height:45vw;max-width:500px;max-height:500px;top:10%;right:5%;background:var(--connector);opacity:.08}
.w2{width:30vw;height:30vw;max-width:350px;max-height:350px;bottom:15%;left:8%;background:var(--explorer);opacity:.07}

.hero-container{width:100%;max-width:1200px;padding:0 48px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1}
.hero-inner{max-width:520px;position:relative;z-index:2}

@keyframes cinematicReveal {
  from { opacity: 0; transform: translateY(24px); filter: blur(12px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-badge{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--t3);margin-bottom:28px;opacity:0;animation:cinematicReveal .8s cubic-bezier(0.16, 1, 0.3, 1) .3s forwards}
.hero-badge-line{width:20px;height:1px;background:var(--t3)}
.hero-h1{font-family:var(--display);font-weight:700;font-size:clamp(52px,8vw,100px);line-height:.92;letter-spacing:-.04em;margin-bottom:24px;opacity:0;animation:cinematicReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) .45s forwards}
.hero-h1 .si{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.02em}
.hero-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.7;color:var(--t2);max-width:380px;margin-bottom:40px;opacity:0;animation:cinematicReveal 1s cubic-bezier(0.16, 1, 0.3, 1) .65s forwards}
.hero-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:600;font-size:15px;color:var(--cream);background:var(--ink);border:none;padding:16px 40px;border-radius:100px;cursor:pointer;text-decoration:none;transition:all .3s ease;opacity:0;animation:cinematicReveal 1s cubic-bezier(0.16, 1, 0.3, 1) .8s forwards}
.hero-cta:hover{box-shadow:0 8px 32px rgba(42,37,35,.2);transform:translateY(-2px)}
.hero-meta{margin-top:14px;font-size:12px;color:var(--t3);opacity:0;animation:cinematicReveal 1s cubic-bezier(0.16, 1, 0.3, 1) .95s forwards}

/* Hero Visual: The Archetype Compass */
.hero-visual{width:45%;max-width:480px;position:relative;z-index:1;opacity:0;animation:cinematicReveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) .6s forwards}
.hero-compass{width:100%;height:auto;display:block}
.spin-slow{transform-origin:200px 200px;animation:spin 45s linear infinite}
.spin-reverse-fast{transform-origin:200px 200px;animation:spinReverse 25s linear infinite}
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spinReverse { 100% { transform: rotate(-360deg); } }

/* Centered Organic Scroll Indicator */
.scroll-ind{position:absolute;bottom:32px;left:50%;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:cinematicRevealScroll 1s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards}
@keyframes cinematicRevealScroll {
  from { opacity: 0; transform: translate(-50%, 24px); filter: blur(12px); }
  to { opacity: 1; transform: translate(-50%, 0); filter: blur(0); }
}
.scroll-ind span{font-size:8px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--t3);opacity:0.7}
.scroll-track{width:1px;height:40px;background:linear-gradient(to bottom, rgba(42,37,35,.15), transparent);position:relative;overflow:hidden;border-radius:2px}
.scroll-drop{position:absolute;top:0;left:0;width:100%;height:30%;background:var(--t2);border-radius:2px;animation:scrollDrop 2.5s cubic-bezier(0.6, 0.05, 0.4, 1) infinite}
@keyframes scrollDrop{
  0% { transform: translateY(-100%); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(350%); opacity: 0; }
}

/* ===== JOURNEY ===== */
.journey{position:relative}
.journey-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.journey-bg{position:absolute;inset:0;background:var(--cream)}

/* Beats */
.beat-layer{position:absolute;inset:0;z-index:10;display:flex;align-items:center;pointer-events:none}
.beat-content{opacity:0;will-change:opacity,transform;transform:translateY(30px)}
.beat-content.pos-left{margin-left:max(48px,calc((100vw - 1200px)/2 + 48px));max-width:500px}
.beat-content.pos-right{margin-left:auto;margin-right:max(48px,calc((100vw - 1200px)/2 + 48px));max-width:500px;text-align:right}
.beat-content.pos-center{margin:0 auto;max-width:600px;text-align:center}
.beat-num{font-family:var(--body);font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:16px}
.beat-text{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(28px,5vw,54px);line-height:1.2;text-wrap:balance}
.beat-text strong{font-family:var(--display);font-weight:700;font-style:normal}
.beat-text .w { transition: opacity 0.2s ease; }

/* Orbit container */
.orbit-ring{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:visible;}

/* HIGH-PERFORMANCE DYNAMIC MORPHING CARDS */
.ocard{
  --morph: 0;
  position:absolute;
  top:50%; left:50%;
  margin-top:-195px; margin-left:-140px;
  width:280px; height:390px;
  background: var(--cream);
  clip-path: inset(
    calc((1 - var(--morph)) * 55px)
    0px
    calc((1 - var(--morph)) * 55px)
    0px
    round calc(140px - var(--morph) * 122px)
  );
  will-change:transform, opacity, filter;
  pointer-events:auto;
  overflow:hidden;
  box-shadow: 0 calc(8px + var(--morph)*16px) calc(20px + var(--morph)*40px) rgba(0,0,0,calc(0.2 + var(--morph)*0.2));
}

.ocard-bg{position:absolute;inset:0;will-change:opacity;}
.ocard-bg::after{content:'';position:absolute;inset:0;opacity:.28;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ocard-vig{position:absolute;inset:0;z-index:1;pointer-events:none;will-change:opacity;
  background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,transparent 30%,rgba(0,0,0,.18) 100%)}

.ocard-in{
  position:relative; z-index:2; height:100%; padding:24px;
  display:flex; flex-direction:column; justify-content:space-between;
  will-change:opacity;
}

.ocard-top{display:flex;justify-content:space-between;align-items:flex-start;
  opacity:var(--morph); transform:translateY(calc((1 - var(--morph)) * -15px));}
.ocard-tag{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.2);padding:5px 12px;border-radius:100px}
.ocard-num{font-family:var(--serif);font-style:italic;font-size:15px;color:rgba(255,255,255,.5)}

.ocard-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  transform: scale(calc(1 + (1 - var(--morph)) * 0.5)) translateY(calc(var(--morph) * -12px));
  opacity:calc(0.4 + (1 - var(--morph)) * 0.6);
}
.ocard-icon svg{width:110px;height:110px}

.ocard-foot{border-top:1px solid rgba(255,255,255,.15);padding-top:16px;
  opacity:var(--morph); transform:translateY(calc((1 - var(--morph)) * 15px));}
.ocard-name{font-family:var(--display);font-weight:700;font-size:24px;color:#fff;margin-bottom:6px;letter-spacing:-0.01em;}
.ocard-line{font-family:var(--serif);font-style:italic;font-size:15px;line-height:1.45;color:rgba(255,255,255,.8)}

/* Colors */
.oc-phi .ocard-bg{background:var(--philosopher)}.oc-ana .ocard-bg{background:var(--analyst)}
.oc-bui .ocard-bg{background:var(--builder)}.oc-org .ocard-bg{background:var(--organizer)}
.oc-con .ocard-bg{background:var(--connector)}.oc-mob .ocard-bg{background:var(--mobilizer)}
.oc-cre .ocard-bg{background:var(--creator)}.oc-exp .ocard-bg{background:var(--explorer)}

/* Focus Glow */
.orbit-glow{position:absolute;z-index:4;pointer-events:none;width:550px;height:550px;border-radius:50%;
  top:50%; left:50%; margin-top:-275px; margin-left:-275px;
  filter:blur(100px);opacity:0;will-change:opacity, background-color, transform;}

/* UI Labels */
.orbit-label{position:absolute;bottom:8vh;left:50%;transform:translateX(-50%);text-align:center;z-index:12;pointer-events:none;opacity:0;white-space:nowrap;will-change:opacity;}
.orbit-label-tag{font-size:10px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px;opacity:.4}
.orbit-label-name{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.5vw,34px);letter-spacing:-.01em}
.orbit-label-line{font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.4vw,18px);opacity:.6;margin-top:6px}

/* Pips */
.orbit-progress{position:absolute;right:32px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:12;opacity:0;transition:opacity 0.4s ease}
.orbit-pip{width:5px;height:5px;border-radius:50%;transition:all .4s ease;opacity:0.25}
.orbit-pip.active{transform:scale(2.2);opacity:1}

/* CTA Layer */
.cta-layer{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;will-change:opacity;}
.cta-inner{text-align:center;max-width:520px;pointer-events:auto;transform:translateY(20px);transition:transform 0.5s ease}
.cta-layer.visible .cta-inner{transform:translateY(0)}
.cta-inner h2{font-family:var(--display);font-weight:700;font-size:clamp(40px,7vw,80px);line-height:.95;letter-spacing:-.03em;margin-bottom:20px}
.cta-inner h2 .si{font-family:var(--serif);font-weight:400;font-style:italic}
.cta-inner>p{font-size:16px;line-height:1.65;opacity:.6;max-width:380px;margin:0 auto 36px}
.btn-light{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:700;font-size:16px;color:var(--cream);background:var(--ink);border:none;padding:18px 44px;border-radius:100px;cursor:pointer;text-decoration:none;transition:all .4s cubic-bezier(0.16, 1, 0.3, 1);overflow:hidden;z-index:1}
.btn-light::before{content:'';position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg,var(--philosopher),var(--analyst),var(--builder),var(--organizer),var(--connector),var(--mobilizer),var(--creator),var(--explorer),var(--philosopher));opacity:0;transition:opacity .4s ease;z-index:-1;filter:blur(8px)}
.btn-light::after{content:'';position:absolute;inset:2px;border-radius:inherit;background:var(--ink);z-index:-1;transition:all .4s ease}
.btn-light:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 40px rgba(0,0,0,.3);letter-spacing:.02em}
.btn-light:hover::before{opacity:1;animation:colorSpin 3s linear infinite}
.btn-light:hover::after{inset:3px}
@keyframes colorSpin{100%{filter:blur(8px) hue-rotate(360deg)}}
.cta-meta{margin-top:16px;font-size:12px;opacity:.3}

/* ===== LANDING MOBILE ===== */
@media(max-width:768px){
  .hero{padding:100px 0 48px}
  .hero-container{flex-direction:column;justify-content:center;padding:0 24px}
  .hero-inner{max-width:100%;margin-left:0;z-index:2}
  .hero-visual{position:absolute;top:10%;right:-30%;width:120%;max-width:none;opacity:0.15 !important;z-index:0;animation:none}

  .beat-content {
    padding: 0 32px;
    width: 100%;
    box-sizing: border-box;
  }
  .beat-content.pos-left,
  .beat-content.pos-right,
  .beat-content.pos-center {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .scroll-ind{left:50%}
  .orbit-progress{right:16px;gap:8px}
  .orbit-pip{width:4px;height:4px}

  .cta-inner{padding:0 32px}
  .cta-inner h2{font-size:clamp(32px,10vw,52px)}
  .cta-inner>p{font-size:14px;max-width:300px}
  .btn-light{font-size:14px;padding:16px 36px}
}