:root{
  --ink:#130b08;
  --ink-soft:#241713;
  --blood:#ff2029;
  --blood-dark:#9a070b;
  --cream:#fff4d6;
  --paper:#f0e3c4;
  --bone:#d8c9a8;
  --muted:#a19b86;
  --green:#6a806d;
  --cyan:#8deeff;
  --shadow:rgba(0,0,0,.55);
  --header-h:70px;
  --max:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#110b08}
body{
  margin:0;
  color:var(--cream);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--ink);
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.noise{
  position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.12;
  background-image:
  radial-gradient(circle at 20% 10%, rgba(255,255,255,.18) 0 1px, transparent 1px),
  radial-gradient(circle at 70% 80%, rgba(0,0,0,.22) 0 1px, transparent 1px);
  background-size:31px 37px, 47px 53px;
  mix-blend-mode:overlay;
}
.page-progress{
  position:fixed;right:0;top:0;width:8px;height:0;background:var(--blood);z-index:1002;
  box-shadow:0 0 18px rgba(255,32,41,.8);
}
.site-header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:1000;
  display:flex;align-items:center;gap:22px;padding:0 22px 0 0;
  background:rgba(20,10,7,.84);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,244,214,.08);
  transition:background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  background:rgba(12,7,6,.94);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.trailer-ribbon{
  height:58px;min-width:240px;padding:0 34px;
  display:grid;place-items:center;align-self:start;
  background:var(--cream);color:#140907;
  font:900 22px/1 Georgia,serif;
  clip-path:polygon(0 0,100% 0,92% 50%,100% 100%,0 100%,8% 50%);
  filter:drop-shadow(0 5px 0 rgba(0,0,0,.34));
  transition:.25s transform ease,.25s background ease;
}
.site-header.scrolled .trailer-ribbon,.trailer-ribbon:hover{background:var(--blood);color:#110807;transform:translateY(2px)}
.platform-strip,.social-strip{display:flex;gap:10px;align-items:center;white-space:nowrap}
.platform-strip a,.social-strip a{
  min-width:38px;height:38px;display:grid;place-items:center;
  font:900 12px/1 Georgia,serif;color:var(--cream);
  border:2px solid rgba(255,244,214,.5);
  border-radius:50%;
  background:rgba(255,244,214,.08);
}
.nav-center{margin-left:auto;display:flex;align-items:center;gap:28px}
.codex-search input{
  width:210px;height:34px;border:0;outline:0;padding:0 16px;
  color:#22130c;background:var(--cream);
  font:900 12px/1 Georgia,serif;
  clip-path:polygon(4% 0,96% 0,100% 20%,96% 100%,4% 100%,0 80%);
}
.main-nav{display:flex;gap:22px;align-items:center;font-weight:900;text-transform:uppercase;font-size:15px;color:#e9dfcb}
.main-nav a{opacity:.86;transition:.2s}
.main-nav a:hover,.main-nav a.active{color:#fff;opacity:1;text-shadow:0 0 12px var(--blood)}
.mobile-menu{display:none;background:none;border:0;color:var(--cream);font-size:30px;margin-left:auto}

.hero{
  min-height:100vh;position:relative;overflow:hidden;
  display:grid;place-items:center;padding:110px 24px 120px;
  isolation:isolate;background:#080403;
}
.hero-video-wrap{
  position:absolute;inset:0;z-index:-8;overflow:hidden;background:#080403;
}
.hero-bg-video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.hero-bg-layer{position:absolute;inset:-8%;z-index:-4;pointer-events:none}
.layer-video-overlay{
  inset:0;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.08), transparent 28%),
    radial-gradient(circle at 20% 18%, rgba(255,30,40,.18), transparent 24%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.26) 48%, rgba(8,3,2,.62) 100%);
}
.layer-smoke{
  background:
    radial-gradient(ellipse at 50% 88%, rgba(20,10,7,.9), transparent 28%),
    radial-gradient(ellipse at 12% 102%, rgba(20,10,7,.86), transparent 28%),
    radial-gradient(ellipse at 89% 102%, rgba(20,10,7,.86), transparent 28%);
  mix-blend-mode:multiply;
}
.hero:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.16) 48%,rgba(0,0,0,.42));
  z-index:-1;
}
.hero-content{
  width:min(940px,94vw);
  display:grid;justify-items:center;text-align:center;position:relative;z-index:2;
  transform:translateY(-20px);
}
.hero-logo{width:min(920px,94vw);filter:drop-shadow(0 18px 18px rgba(0,0,0,.52))}
.hero-kicker{margin:-4px 0 10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 3px 0 #120807}
.hero-pitch{
  max-width:820px;margin:0;font:700 24px/1.32 Georgia,serif;
  color:#fff8e5;text-shadow:0 3px 0 rgba(0,0,0,.45);
}
.hero-actions{display:flex;gap:18px;align-items:center;margin-top:26px;flex-wrap:wrap;justify-content:center}
.blood-button,.bone-button{
  padding:16px 30px;font:900 17px/1 Georgia,serif;text-transform:uppercase;letter-spacing:.04em;
  clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);
  transition:.2s transform ease, .2s filter ease;
}
.blood-button{background:var(--blood);color:#150808;box-shadow:0 8px 0 var(--blood-dark)}
.bone-button{background:var(--cream);color:#160b08;box-shadow:0 8px 0 #6c5940}
.blood-button:hover,.bone-button:hover{transform:translateY(4px);filter:brightness(1.08)}
.floating-char{position:absolute;z-index:1;filter:drop-shadow(0 16px 8px rgba(0,0,0,.28));animation:bob 3.2s ease-in-out infinite}
.hero-lionis{width:170px;bottom:42px;left:11%;animation-delay:.2s}
.hero-zed{width:145px;top:15%;right:16%;animation-delay:.8s}
.hero-monster{width:210px;right:6%;bottom:9%;animation-delay:1.2s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
.expansion-card{
  position:absolute;left:28px;bottom:84px;width:min(580px,86vw);z-index:4;
  padding:24px 32px;background:#130b08;color:var(--cream);
  border-top:8px solid var(--blood);font-weight:800;
  clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.expansion-card strong{display:block;font:900 24px/1 Georgia,serif;text-transform:uppercase}
.expansion-card span{display:block;margin-top:8px;max-width:470px}
.red-drip-divider{
  position:absolute;left:-3%;right:-3%;bottom:-2px;height:92px;background:var(--blood);z-index:3;
  clip-path:polygon(0 45%,5% 37%,12% 52%,16% 35%,21% 49%,27% 38%,33% 54%,42% 41%,48% 56%,55% 40%,62% 51%,70% 36%,78% 52%,86% 34%,92% 48%,100% 38%,100% 100%,0 100%);
}
.trailer-zone{
  position:relative;background:var(--cream);padding:120px 24px 150px;color:#516856;overflow:hidden;
}
.trailer-zone:before,.trailer-zone:after{
  content:"";position:absolute;left:0;right:0;height:70px;background:#120807;opacity:.9;
  clip-path:polygon(0 0,10% 38%,18% 12%,24% 45%,35% 16%,44% 38%,53% 10%,63% 44%,75% 18%,86% 41%,100% 12%,100% 0);
}
.trailer-zone:before{top:0}
.trailer-zone:after{bottom:0;transform:rotate(180deg)}
.eye-divider{display:grid;place-items:center;margin-bottom:26px}
.eye-divider img{width:150px;filter:brightness(0)}
.trailer-shell{
  max-width:1050px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;align-items:center;
}
.media-frame{
  position:relative;background:#0d0706;padding:12px;border:5px solid var(--cream);
  box-shadow:0 18px 42px rgba(0,0,0,.48);
  filter:drop-shadow(0 0 0 var(--cream));
}
.media-frame:before{
  content:"";position:absolute;inset:-10px;pointer-events:none;border:3px solid var(--cream);
  clip-path:polygon(0 4%,8% 0,18% 4%,29% 0,41% 5%,53% 1%,64% 4%,75% 0,89% 5%,100% 1%,96% 100%,88% 96%,78% 100%,65% 95%,54% 100%,42% 96%,29% 100%,18% 95%,7% 100%,0 95%);
  opacity:.85;
}
.media-frame img{width:100%;aspect-ratio:16/9;object-fit:cover}
.video-frame{cursor:pointer}
.play-button{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:92px;height:66px;border:0;background:var(--blood);color:white;border-radius:14px;font-size:34px;
  box-shadow:0 10px 30px rgba(0,0,0,.5);cursor:pointer;
}
.trailer-menu{
  background:#1b211c;color:var(--cream);padding:28px 18px;display:grid;gap:8px;border-radius:4px;
  box-shadow:0 14px 35px rgba(0,0,0,.45);
}
.trailer-menu button{
  background:transparent;border:0;color:var(--cream);font:900 18px/1.2 Georgia,serif;padding:9px 12px;cursor:pointer;
}
.trailer-menu button.is-active{
  color:#120807;background:var(--blood);
  clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);
}
.note{text-align:center;font-weight:800;margin:36px 0 0}
.feature-section{
  position:relative;min-height:92vh;padding:130px 24px;display:grid;align-items:center;overflow:hidden;
  background:#516856;color:var(--cream);
}
.feature-section:before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(circle at 12% 22%,rgba(255,255,255,.1) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 70%,rgba(255,255,255,.08) 0 2px,transparent 3px),
    linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.3));
  background-size:98px 98px, 130px 130px, 100% 100%;
}
.scene-night{background:#37373d}
.scene-red{background:#21100f}
.scene-red:before{background:radial-gradient(ellipse at 50% 50%,rgba(255,32,41,.18),transparent 45%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.65))}
.feature-grid{
  position:relative;z-index:2;width:min(var(--max),100%);margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;
}
.alt .feature-grid{grid-template-columns:1fr 1fr}
.smoke-panel{
  position:relative;padding:54px 40px;background:rgba(18,10,8,.78);box-shadow:0 28px 80px rgba(0,0,0,.45);
}
.smoke-panel:before{
  content:"";position:absolute;inset:-48px -72px;z-index:-1;
  background:
    radial-gradient(ellipse at 40% 45%,rgba(11,7,6,.96),transparent 60%),
    radial-gradient(ellipse at 10% 55%,rgba(11,7,6,.66),transparent 45%),
    radial-gradient(ellipse at 90% 35%,rgba(11,7,6,.66),transparent 43%);
  filter:blur(8px);
}
.align-right{text-align:right}
.section-label{
  margin:0 0 10px;font-weight:900;text-transform:uppercase;letter-spacing:.18em;color:var(--bone);font-size:13px;
}
h2{
  margin:0 0 18px;color:var(--blood);font:900 clamp(42px,5vw,68px)/.96 Georgia,serif;
  letter-spacing:.01em;text-shadow:0 4px 0 #100704;
}
.smoke-panel p{font-size:20px;line-height:1.55;font-weight:750;color:#eee3ca}
.tier-row,.pipeline,.ritual-actions{
  display:flex;gap:10px;flex-wrap:wrap;margin:24px 0;
}
.tier-row span,.pipeline span,.ritual-actions span{
  background:rgba(255,244,214,.12);border:2px solid rgba(255,244,214,.35);padding:10px 14px;font-weight:900;border-radius:999px;
}
.pipeline{align-items:center}
.pipeline i{width:32px;height:4px;background:var(--blood);display:block;border-radius:99px}
.micro-copy{font-family:Georgia,serif;color:#fff!important;font-size:17px!important}
.slash-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;font-size:18px;line-height:1.45}
.slash-list li{position:relative;padding-left:24px}
.slash-list li:before{content:"";position:absolute;left:0;top:.72em;width:14px;height:5px;background:var(--blood);transform:rotate(-18deg)}
.section-floater{position:absolute;width:130px;z-index:3;opacity:.95;animation:bob 4.5s ease-in-out infinite}
.floater-left{left:8%;bottom:5%}
.floater-right{right:10%;bottom:8%}
.ritual-section{
  position:relative;min-height:95vh;display:grid;place-items:center;padding:110px 24px;overflow:hidden;
  background:#090707;
}
.ritual-bg{
  position:absolute;inset:0;background:
    linear-gradient(65deg,transparent 0 30%,rgba(255,255,255,.11) 31% 36%,transparent 37%),
    linear-gradient(115deg,transparent 0 35%,rgba(255,255,255,.09) 36% 40%,transparent 41%),
    radial-gradient(circle at 50% 45%,rgba(255,32,41,.22),transparent 28%),
    linear-gradient(180deg,#231717,#050404);
}
.ritual-bg:after{
  content:"";position:absolute;left:50%;top:48%;width:640px;height:640px;transform:translate(-50%,-50%);
  border-radius:50%;border:8px solid rgba(255,244,214,.24);box-shadow:inset 0 0 0 4px rgba(255,244,214,.1);
}
.ritual-card{
  position:relative;z-index:2;text-align:center;width:min(850px,92vw);
  background:rgba(9,7,7,.75);padding:60px 42px;border:2px solid rgba(255,244,214,.26);
  box-shadow:0 30px 110px rgba(0,0,0,.66);
}
.ritual-card img{width:190px;margin:0 auto 10px}
.ritual-card p{font:700 21px/1.55 Georgia,serif;color:#f8eed2}
.world-section{
  padding:120px 24px;background:
    radial-gradient(circle at 20% 20%,rgba(141,238,255,.18),transparent 22%),
    radial-gradient(circle at 80% 5%,rgba(255,32,41,.24),transparent 20%),
    linear-gradient(180deg,#151415,#2b1618 48%,#111);
}
.section-heading{text-align:center;max-width:880px;margin:0 auto 48px}
.section-heading p:last-child{font:700 20px/1.45 Georgia,serif;color:#e8dec8}
.realm-grid{
  max-width:1100px;margin:0 auto 58px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.realm-grid article{
  min-height:126px;padding:22px;background:#19100d;border:3px solid rgba(255,244,214,.35);display:grid;place-items:center;text-align:center;
  clip-path:polygon(6% 0,94% 0,100% 10%,100% 90%,94% 100%,6% 100%,0 90%,0 10%);
  box-shadow:0 16px 26px rgba(0,0,0,.32);
}
.realm-grid b{font:900 27px/1 Georgia,serif;color:var(--blood)}
.realm-grid span{font-weight:900;color:#f2e8cf;margin-top:8px}
.realm-grid .locked{background:#3b0909;border-color:var(--blood)}
.media-frame.wide{max-width:920px;margin:auto}
.story-section{
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:30px;
  padding:110px 6vw 0;background:#121010;position:relative;overflow:hidden;
}
.story-section:before{
  content:"";position:absolute;inset:0;background:
    linear-gradient(70deg,transparent 0 25%,rgba(255,255,255,.12) 26% 32%,transparent 33%),
    linear-gradient(110deg,transparent 0 72%,rgba(255,255,255,.08) 73% 78%,transparent 79%),
    radial-gradient(circle at 50% 38%,rgba(255,244,214,.2),transparent 22%),
    linear-gradient(180deg,#090707,#1e1413);
}
.story-altar{position:relative;z-index:2;min-height:690px;display:grid;place-items:end center}
.altar-cat{width:min(360px,72vw);position:relative;z-index:2;filter:drop-shadow(0 22px 14px rgba(0,0,0,.55))}
.halo{position:absolute;width:430px;height:430px;border-radius:50%;border:8px solid rgba(255,244,214,.35);bottom:220px;left:50%;transform:translateX(-50%);box-shadow:0 0 60px rgba(255,244,214,.15)}
.parchment{
  position:relative;z-index:3;align-self:center;margin-bottom:80px;background:var(--cream);color:#1c0f09;
  padding:48px 42px;box-shadow:0 26px 90px rgba(0,0,0,.45);
  clip-path:polygon(4% 0,95% 2%,100% 8%,98% 94%,92% 100%,5% 98%,0 91%,2% 7%);
}
.parchment h2{font-size:42px;color:#111;text-shadow:none}
.parchment p{font:800 19px/1.55 Georgia,serif}
.proof-section{
  padding:120px 24px;background:var(--blood);color:#140807;position:relative;overflow:hidden;
}
.proof-section h2{color:#140807;text-shadow:none}
.proof-section .section-label{color:#31100c}
.proof-grid{
  max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.proof-grid article{
  min-height:230px;background:#130b08;color:var(--cream);padding:28px 24px;border:3px solid #1d0c09;
  box-shadow:0 14px 0 rgba(0,0,0,.24);
}
.proof-grid strong{font:900 28px/1 Georgia,serif;color:var(--blood);display:block;margin-bottom:14px}
.proof-grid p{font-weight:760;line-height:1.45;color:#eee3c9}
.team-scroll{
  margin:60px auto 0;max-width:1120px;display:flex;gap:14px;overflow:auto;padding-bottom:12px;
}
.team-scroll span{flex:0 0 auto;padding:14px 18px;background:#130b08;color:var(--cream);font-weight:900;border-radius:999px}
.site-footer{
  padding:80px 24px;background:#080505;text-align:center;border-top:8px solid #1d0c09;
}
.site-footer img{width:min(520px,92vw);margin:0 auto 20px}
.site-footer p{font:800 20px/1.4 Georgia,serif;color:#eadfc8}
.footer-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:28px;text-transform:uppercase;font-weight:900}
.footer-links a{color:var(--blood)}
.modal{position:fixed;inset:0;z-index:1200;display:none}
.modal.is-open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}
.modal-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(980px,92vw);background:#130b08;border:6px solid var(--cream);padding:16px;
}
.modal-close{
  position:absolute;right:-24px;top:-24px;width:54px;height:54px;border:0;background:var(--blood);color:#130b08;
  font-size:36px;font-weight:900;border-radius:50%;cursor:pointer;z-index:2;
}
.modal-video-placeholder{
  min-height:500px;display:grid;place-items:center;position:relative;background:#050303;overflow:hidden;text-align:center;
}
.modal-video-placeholder img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.modal-video-placeholder div{position:relative;max-width:620px;padding:28px;background:rgba(0,0,0,.55)}
.modal-video-placeholder strong{display:block;font:900 42px/1 Georgia,serif;color:var(--blood)}
.modal-video-placeholder span{display:block;margin-top:12px;font-weight:800;color:var(--cream)}
.modal-video-placeholder code{background:#000;color:var(--blood);padding:2px 5px}
@media(max-width:1120px){
  .site-header{gap:12px;padding-right:14px}
  .platform-strip,.social-strip{display:none}
  .nav-center{gap:14px}
  .main-nav{gap:14px;font-size:13px}
}
@media(max-width:860px){
  :root{--header-h:64px}
  .site-header{padding:0 12px}
  .trailer-ribbon{min-width:178px;height:52px;font-size:17px;padding:0 20px}
  .mobile-menu{display:block}
  .nav-center{
    position:absolute;top:64px;right:12px;left:12px;display:none;grid-template-columns:1fr;background:#120807;padding:18px;border:2px solid rgba(255,244,214,.2)
  }
  .site-header.menu-open .nav-center{display:grid}
  .main-nav{display:grid}
  .codex-search input{width:100%}
  .hero-pitch{font-size:19px}
  .hero-lionis{left:2%;width:120px}.hero-zed{right:2%;width:105px}.hero-monster{display:none}
  .expansion-card{left:12px;right:12px;bottom:70px;width:auto;padding:18px}
  .trailer-shell,.feature-grid,.story-section{grid-template-columns:1fr}
  .feature-section{padding:88px 18px}
  .smoke-panel,.align-right{text-align:left;padding:36px 24px}
  .realm-grid,.proof-grid{grid-template-columns:1fr 1fr}
  .story-altar{min-height:420px}.halo{bottom:140px;width:310px;height:310px}.parchment{margin-bottom:40px}
}
@media(max-width:540px){
  .realm-grid,.proof-grid{grid-template-columns:1fr}
  .hero{padding-top:92px}
  h2{font-size:39px}
  .trailer-zone{padding:92px 14px}
  .trailer-menu{grid-row:1}
}


/* === Meowstoria requested polish pass: bottom hero anchor, seamless flow, trailer focus, team auto-pan === */
:root{
  --meow-white:#ffffff;
  --meow-coffee:#4a3129;
  --meow-charcoal:#3a3331;
  --meow-red:#871a05;
  --meow-cream:#edd9c4;
  --meow-black:#29130d;
  --flow-top:#4a3129;
  --flow-mid:#3a3331;
  --flow-deep:#29130d;
}
html{scroll-behavior:smooth;background:var(--flow-deep)}
body{background:linear-gradient(180deg,#29130d 0%,#3a3331 42%,#29130d 100%);color:var(--meow-cream)}
main{background:linear-gradient(180deg,#2a1510 0%,#4a3129 19%,#3a3331 45%,#29130d 71%,#871a05 100%)}
.site-header{
  height:var(--header-h);
  background:linear-gradient(90deg,rgba(41,19,13,.98),rgba(74,49,41,.9),rgba(41,19,13,.98));
  border-bottom:1px solid rgba(237,217,196,.18);
  box-shadow:0 10px 35px rgba(0,0,0,.32);
  justify-content:space-between;
}
.header-logo{display:flex;align-items:center;height:100%;min-width:210px;padding-left:18px;position:relative;z-index:3}
.header-logo img{display:block;width:clamp(138px,13vw,212px);height:auto;filter:drop-shadow(0 5px 3px rgba(0,0,0,.55))}
.trailer-ribbon,.platform-strip{display:none!important}
.nav-center{margin-left:auto;margin-right:18px;flex:1;justify-content:flex-end;max-width:980px}
.codex-search{display:none!important}
.main-nav a{color:var(--meow-cream)}
.main-nav a.active,.main-nav a:hover{color:#fff;text-shadow:0 0 10px rgba(237,217,196,.3)}
.social-strip a{border-color:rgba(237,217,196,.45);color:var(--meow-cream)}
.hero{
  min-height:100svh;
  padding:0;
  display:block;
  overflow:hidden;
  background:#29130d;
}
.hero-video-wrap{z-index:-8;background:#29130d}
.layer-video-overlay{
  background:
    linear-gradient(180deg,rgba(41,19,13,.18) 0%,rgba(41,19,13,.18) 42%,rgba(41,19,13,.92) 100%),
    radial-gradient(ellipse at 50% 78%,rgba(41,19,13,.58),transparent 55%),
    linear-gradient(90deg,rgba(41,19,13,.35),transparent 22%,transparent 78%,rgba(41,19,13,.35));
}
.layer-smoke{opacity:.55}
.hero:after{display:none!important}
.hero-content{
  position:absolute;
  left:50%;
  right:auto;
  top:auto;
  bottom:clamp(12px,2.8vh,34px);
  transform:translateX(-50%);
  width:min(860px,92vw);
  z-index:5;
  display:block;
  text-align:center;
  padding:0 12px;
  pointer-events:none;
}
.hero-pitch{
  width:100%;
  max-width:820px;
  margin:0 auto;
  color:#fff7e8;
  font:900 clamp(23px,2.15vw,34px)/1.16 Georgia,serif;
  letter-spacing:.01em;
  text-shadow:0 4px 0 rgba(41,19,13,.95),0 16px 28px rgba(0,0,0,.55);
}
.hero-logo,.hero-kicker,.hero-actions,.floating-char,.expansion-card,.red-drip-divider,.section-floater{display:none!important}
.trailer-zone{
  background:
    radial-gradient(ellipse at 50% 16%,rgba(237,217,196,.14),transparent 28%),
    linear-gradient(180deg,#4a3129 0%,#56352b 48%,#3a231c 100%);
  padding:clamp(52px,8vh,86px) 20px clamp(70px,9vh,104px);
  color:var(--meow-cream);
  overflow:hidden;
  position:relative;
}
.trailer-zone:before,.trailer-zone:after{display:none!important}
.trailer-zone::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:120px;pointer-events:none;display:block!important;
  background:linear-gradient(180deg,rgba(58,35,28,0),#3a3331 84%);
}
.trailer-title{position:relative;z-index:2;text-align:center;margin:0 auto clamp(24px,4vh,44px);display:flex;align-items:center;justify-content:center;gap:26px;width:min(900px,94vw)}
.trailer-title:before,.trailer-title:after{content:"";height:4px;flex:1;max-width:270px;background:linear-gradient(90deg,transparent,var(--meow-cream),transparent);box-shadow:0 2px 0 rgba(41,19,13,.9)}
.trailer-title h2{margin:0;color:var(--meow-cream);font-size:clamp(58px,8vw,118px);text-shadow:0 5px 0 #29130d,0 22px 38px rgba(0,0,0,.45)}
.trailer-shell{position:relative;z-index:2;display:block;width:min(1250px,92vw);margin:0 auto}
.trailer-main-video,.trailer-shell .video-frame{width:min(1180px,100%);margin:0 auto;box-shadow:0 30px 90px rgba(41,19,13,.62),0 0 80px rgba(237,217,196,.13)}
.trailer-menu,.note,.eye-divider{display:none!important}
.feature-section,
.ritual-section,
.world-section,
.story-section,
.proof-section,
.site-footer{border:0!important;box-shadow:none!important}
.feature-section{
  min-height:auto;
  padding:clamp(76px,10vh,130px) 24px;
  background:
    radial-gradient(ellipse at 24% 0%,rgba(237,217,196,.12),transparent 38%),
    linear-gradient(180deg,#3a3331 0%,#3d2e2a 48%,#4a3129 100%);
}
.feature-section:before{opacity:.34;background:radial-gradient(circle at 15% 20%,rgba(237,217,196,.11) 0 2px,transparent 3px),radial-gradient(circle at 80% 65%,rgba(237,217,196,.08) 0 2px,transparent 3px);background-size:110px 110px,145px 145px}
.scene-night{background:linear-gradient(180deg,#4a3129 0%,#3a3331 48%,#29130d 100%)}
.scene-red{background:linear-gradient(180deg,#29130d 0%,#3b1f17 52%,#4a3129 100%)}
.ritual-section{
  min-height:auto;
  padding:clamp(80px,11vh,130px) 24px;
  background:linear-gradient(180deg,#4a3129 0%,#3a3331 52%,#29130d 100%);
}
.ritual-bg{background:linear-gradient(70deg,transparent 0 32%,rgba(237,217,196,.08) 33% 37%,transparent 38%),linear-gradient(110deg,transparent 0 68%,rgba(237,217,196,.06) 69% 74%,transparent 75%),radial-gradient(ellipse at 50% 45%,rgba(237,217,196,.10),transparent 36%)}
.world-section{
  padding:clamp(82px,11vh,130px) 24px;
  background:linear-gradient(180deg,#29130d 0%,#4a3129 42%,#3a3331 100%);
}
.story-section{
  min-height:auto;
  grid-template-columns:1fr 1fr;
  padding:clamp(90px,10vh,130px) 6vw clamp(80px,10vh,120px);
  align-items:center;
  background:linear-gradient(180deg,#3a3331 0%,#4a3129 50%,#29130d 100%)!important;
}
.story-section:before{display:none!important;background:none!important}
.story-altar{min-height:520px}
.proof-section{
  padding:clamp(84px,11vh,136px) 24px;
  background:linear-gradient(180deg,#29130d 0%,#871a05 46%,#4a160d 100%);
  color:var(--meow-cream);
}
.proof-section .section-label{color:var(--meow-cream)}
.proof-section h2{color:var(--meow-cream);text-shadow:0 5px 0 #29130d,0 20px 34px rgba(0,0,0,.3)}
.proof-grid article{background:#29130d;border-color:rgba(237,217,196,.12)}
.proof-grid strong{color:#d44827}
.site-footer{background:linear-gradient(180deg,#29130d 0%,#110806 100%);padding:90px 24px}
.site-footer img{width:min(470px,76vw);filter:drop-shadow(0 8px 4px rgba(0,0,0,.56))}
.media-frame{border-color:var(--meow-cream);background:#120807;box-shadow:0 22px 70px rgba(41,19,13,.5),0 0 60px rgba(237,217,196,.1)}
.smoke-panel{background:rgba(41,19,13,.76);border:1px solid rgba(237,217,196,.12)}
.team-scroll{display:none!important}
.team-carousel{
  position:relative;
  width:min(1120px,92vw);
  margin:70px auto 0;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.team-carousel.is-dragging{cursor:grabbing}
.team-track{display:flex;gap:28px;will-change:transform;transform:translate3d(0,0,0);user-select:none;padding:6px 0 20px}
.team-card{
  flex:0 0 255px;
  min-height:342px;
  background:linear-gradient(180deg,#1e0e09 0%,#29130d 100%);
  color:var(--meow-cream);
  padding:18px 18px 24px;
  clip-path:polygon(5% 0,96% 0,100% 9%,100% 100%,7% 98%,0 90%,0 8%);
  box-shadow:14px 0 0 rgba(41,19,13,.45),0 18px 40px rgba(0,0,0,.25);
  border:1px solid rgba(237,217,196,.12);
}
.team-avatar{
  height:204px;
  border:5px solid var(--meow-cream);
  background:radial-gradient(circle at 50% 42%,#f6e8c7 0 31px,transparent 32px),radial-gradient(ellipse at 50% 44%,rgba(237,217,196,.22),transparent 55%),#21130f;
  position:relative;
  display:grid;
  align-items:end;
  justify-items:center;
  overflow:hidden;
  pointer-events:none;
}
.team-avatar:before{content:"";position:absolute;left:50%;bottom:34px;width:102px;height:82px;transform:translateX(-50%);border-radius:50% 50% 0 0;background:#1a0d09;box-shadow:0 -52px 0 -24px #f6e8c7}
.team-avatar:after{content:"";position:absolute;left:50%;top:86px;width:10px;height:10px;transform:translateX(-26px);border-radius:50%;background:#130806;box-shadow:52px 0 0 #130806,26px 38px 0 -2px #130806}
.team-avatar span{position:absolute;bottom:40px;font:900 54px/1 Georgia,serif;color:#d4211d;text-shadow:3px 3px 0 #050201;z-index:2}
.team-avatar small{position:absolute;bottom:14px;z-index:3;font-weight:900;letter-spacing:.06em;color:#fff4d6;text-align:center;text-shadow:0 3px 0 #050201}
.avatar-t{background-color:#4b070a}.avatar-n{background-color:#315c62}.avatar-s{background-color:#625d54}.avatar-m{background-color:#222a25}.avatar-a{background-color:#6b5a4a}
.team-card h3{margin:20px 0 8px;color:#d44827;font:900 36px/1 Georgia,serif;text-shadow:0 3px 0 #100704}
.team-card p{margin:0;color:#fff2d9;font-weight:900;line-height:1.32;font-size:16px}
@media(max-width:860px){
  .site-header{padding:0 16px;background:linear-gradient(90deg,rgba(41,19,13,.98),rgba(74,49,41,.94))}
  .header-logo{padding-left:0;min-width:180px}.header-logo img{width:158px}.nav-center{left:12px;right:12px;margin:0}.mobile-menu{color:var(--meow-cream)}
  .hero{min-height:100svh;padding:0;background:#29130d}.hero-content{bottom:clamp(14px,2.5vh,24px);width:96vw}.hero-pitch{font-size:clamp(25px,7vw,32px);line-height:1.08;max-width:94vw}
  .trailer-zone{padding:46px 14px 64px}.trailer-title{gap:12px;margin-bottom:22px}.trailer-title h2{font-size:clamp(58px,18vw,82px)}.trailer-title:before,.trailer-title:after{max-width:120px}
  .trailer-shell{width:min(100%,94vw)}.media-frame{padding:9px;border-width:4px}.play-button{width:86px;height:62px}
  .feature-section,.ritual-section,.world-section,.story-section,.proof-section{padding-left:18px;padding-right:18px}
  .feature-section{padding-top:64px;padding-bottom:72px}.feature-grid,.story-section{grid-template-columns:1fr}.alt .feature-grid{grid-template-columns:1fr}.alt .feature-grid .media-frame{order:-1}.smoke-panel,.align-right{text-align:left}
  .story-section{padding-top:74px}.story-altar{min-height:360px}.parchment{margin:0 0 20px;padding:36px 28px}.parchment h2{font-size:34px}
  .team-carousel{width:94vw;margin-top:48px}.team-card{flex-basis:238px}.team-track{gap:20px}
}
@media(max-width:540px){
  .hero-pitch{font-size:clamp(25px,7.6vw,31px)}
  .hero-content{bottom:16px}
  .trailer-title:before,.trailer-title:after{display:none}.trailer-zone{padding-top:38px}
  .team-card{flex-basis:232px;min-height:324px}.team-avatar{height:184px}.team-card h3{font-size:32px}
}


/* === Final single-source pass from latest uploaded zip: hero pitch, trailer blending, story duo === */
html,
body{
  background:#29130d;
}
main{
  background:linear-gradient(
    180deg,
    #29130d 0%,
    #3b2018 18%,
    #4a3129 34%,
    #3a3331 52%,
    #3b2119 70%,
    #29130d 100%
  )!important;
}

/* Put the pitch near the bottom, but with better UX breathing room. */
.hero-content{
  bottom:clamp(44px,7.4vh,82px)!important;
  width:min(880px,92vw)!important;
}
.hero-pitch{
  font-size:clamp(24px,2.05vw,33px)!important;
  line-height:1.15!important;
}

/* Page 2 / Trailer blend: no hard cut from hero, no grey break after trailer. */
.trailer-zone{
  margin-top:-1px!important;
  margin-bottom:-1px!important;
  background:
    radial-gradient(ellipse at 50% 26%,rgba(237,217,196,.16),transparent 42%),
    linear-gradient(180deg,
      #29130d 0%,
      #3b2018 12%,
      #4a3129 36%,
      #604537 58%,
      #4a3129 78%,
      #3a3331 100%
    )!important;
  padding-top:clamp(54px,7.2vh,82px)!important;
  padding-bottom:clamp(68px,8vh,98px)!important;
}
.trailer-zone::before{
  display:none!important;
}
.trailer-zone::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:160px!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(58,51,49,0),#3a3331 78%,#3a3331 100%)!important;
  z-index:1!important;
}
.trailer-title,
.trailer-shell{
  position:relative!important;
  z-index:2!important;
}
.trailer-main-video,
.trailer-shell .video-frame{
  box-shadow:0 34px 92px rgba(41,19,13,.55), 0 0 120px rgba(237,217,196,.10)!important;
}

/* Make the next section continue directly from the trailer bottom color. */
.feature-section{
  margin-top:-1px!important;
  margin-bottom:-1px!important;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(237,217,196,.10),transparent 38%),
    linear-gradient(180deg,#3a3331 0%,#3c2c28 42%,#4a3129 100%)!important;
}
.feature-section:before{
  mix-blend-mode:screen;
  opacity:.18!important;
}
.scene-night{
  background:linear-gradient(180deg,#4a3129 0%,#3b2119 42%,#29130d 100%)!important;
}
.scene-red{
  background:linear-gradient(180deg,#29130d 0%,#3b2119 45%,#4a3129 100%)!important;
}
.ritual-section{
  background:linear-gradient(180deg,#4a3129 0%,#3a3331 50%,#29130d 100%)!important;
}
.world-section{
  background:linear-gradient(180deg,#29130d 0%,#3b2119 34%,#4a3129 72%,#3a3331 100%)!important;
}
.story-section{
  background:linear-gradient(180deg,#3a3331 0%,#4a3129 45%,#29130d 100%)!important;
}
.proof-section{
  background:linear-gradient(180deg,#29130d 0%,#5b180d 38%,#871a05 66%,#4a160d 100%)!important;
}
.site-footer{
  background:linear-gradient(180deg,#29130d 0%,#160a07 100%)!important;
}

/* Story altar: show both Lionis and Zed PNG from the current request. */
.story-altar{
  position:relative!important;
  min-height:clamp(500px,56vw,720px)!important;
  display:block!important;
  overflow:visible!important;
  isolation:isolate;
}
.story-altar::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:8%;
  width:min(540px,72vw);
  height:min(540px,72vw);
  transform:translateX(-50%);
  border:9px solid rgba(237,217,196,.38);
  border-radius:50%;
  box-shadow:0 0 80px rgba(237,217,196,.10), inset 0 0 50px rgba(41,19,13,.40);
  z-index:0;
}
.story-altar::after{
  content:"";
  position:absolute;
  left:52%;
  bottom:0;
  width:min(620px,88vw);
  height:32%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 68%);
  z-index:0;
}
.altar-cat{
  position:absolute!important;
  height:auto!important;
  pointer-events:none;
  user-select:none;
  z-index:2;
}
.altar-lionis{
  width:min(370px,42vw)!important;
  left:55%;
  bottom:0;
  transform:translateX(-50%);
  filter:drop-shadow(0 26px 18px rgba(0,0,0,.60));
}
.altar-zed{
  width:min(220px,26vw)!important;
  left:28%;
  bottom:30%;
  transform:translateX(-50%) rotate(-6deg);
  filter:drop-shadow(0 22px 15px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(90,210,255,.26));
  animation:altarZedFloat 4.2s ease-in-out infinite;
}
@keyframes altarZedFloat{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-6deg)}
  50%{transform:translateX(-50%) translateY(-14px) rotate(4deg)}
}

@media(max-width:860px){
  .hero-content{
    bottom:clamp(34px,7svh,58px)!important;
    width:94vw!important;
  }
  .hero-pitch{
    font-size:clamp(24px,7.1vw,30px)!important;
    line-height:1.08!important;
  }
  .trailer-zone{
    background:linear-gradient(180deg,#29130d 0%,#4a3129 42%,#604537 64%,#3a3331 100%)!important;
    padding-top:34px!important;
    padding-bottom:56px!important;
  }
  .feature-section{
    background:linear-gradient(180deg,#3a3331 0%,#3d2e2a 45%,#4a3129 100%)!important;
  }
  .story-altar{
    min-height:430px!important;
    margin:0 auto;
    width:min(100%,460px);
  }
  .story-altar::before{
    width:330px;
    height:330px;
    bottom:12%;
    border-width:7px;
  }
  .altar-lionis{
    width:min(270px,58vw)!important;
    left:56%;
    bottom:0;
  }
  .altar-zed{
    width:min(150px,34vw)!important;
    left:24%;
    bottom:38%;
  }
}
@media(max-width:540px){
  .hero-content{
    bottom:clamp(26px,6.2svh,44px)!important;
  }
  .hero-pitch{
    font-size:clamp(24px,7.1vw,29px)!important;
  }
  .trailer-title h2{
    font-size:clamp(58px,17vw,76px)!important;
  }
  .story-altar{
    min-height:390px!important;
  }
  .story-altar::before{
    width:292px;
    height:292px;
  }
  .altar-lionis{
    width:min(245px,62vw)!important;
  }
  .altar-zed{
    width:min(138px,36vw)!important;
    left:22%;
    bottom:40%;
  }
}


/* Updated story character art: one transparent PNG, no circle/background layers. */
.story-altar{
  position:relative!important;
  min-height:clamp(500px,56vw,720px)!important;
  display:grid!important;
  place-items:end center!important;
  overflow:visible!important;
  isolation:isolate;
}
.story-altar::before,
.story-altar::after{
  content:none!important;
  display:none!important;
}
.altar-duo{
  width:min(760px,92vw)!important;
  max-width:100%;
  height:auto!important;
  display:block;
  position:relative!important;
  z-index:2;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 28px 18px rgba(0,0,0,.56));
}
@media(max-width:860px){
  .story-altar{
    min-height:430px!important;
    margin:0 auto;
    width:min(100%,620px);
  }
  .altar-duo{
    width:min(600px,96vw)!important;
  }
}
@media(max-width:540px){
  .story-altar{
    min-height:390px!important;
  }
  .altar-duo{
    width:min(500px,104vw)!important;
  }
}


/* =========================================================
   HERO → TRAILER BLEND FIX ONLY
   Fokus hanya:
   <section class="hero"> → <section class="trailer-zone">
   Tidak menyentuh header, footer, atau section lain.
   ========================================================= */

:root{
  --hero-trailer-seam:#35130e;
  --hero-trailer-top:#3b160f;
  --hero-trailer-mid:#4a2117;
  --hero-trailer-end:#573025;
}

/* Hero hanya diberi fade bawah agar tidak hard cut. */
.hero{
  position:relative!important;
  overflow:hidden!important;
  margin-bottom:0!important;
  background:#29130d!important;
}

/* Fade bawah hero → warna awal trailer. */
.hero::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:clamp(190px,26vh,320px)!important;
  pointer-events:none!important;
  z-index:3!important;
  background:
    linear-gradient(180deg,
      rgba(41,19,13,0) 0%,
      rgba(41,19,13,.22) 26%,
      rgba(53,19,14,.62) 58%,
      var(--hero-trailer-seam) 100%)!important;
}

.hero-content{
  z-index:5!important;
}

/* Trailer overlap ke hero, tapi padding tidak terlalu besar supaya title tidak turun jauh. */
.trailer-zone{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  margin-top:clamp(-128px,-11vh,-82px)!important;
  margin-bottom:-1px!important;
  padding-top:clamp(132px,16vh,190px)!important;
  padding-bottom:clamp(70px,8vh,104px)!important;
  color:var(--meow-cream, #edd9c4)!important;
  background:
    linear-gradient(180deg,
      rgba(53,19,14,0) 0%,
      rgba(53,19,14,.42) 22%,
      var(--hero-trailer-top) 42%,
      var(--hero-trailer-mid) 72%,
      var(--hero-trailer-end) 100%)!important;
}

/* Top blend overlay trailer: menutup garis pemisah hero-trailer. */
.trailer-zone::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:clamp(120px,15vh,190px)!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,
      rgba(53,19,14,0) 0%,
      rgba(53,19,14,.18) 32%,
      rgba(53,19,14,.72) 78%,
      rgba(53,19,14,0) 100%)!important;
  clip-path:none!important;
  transform:none!important;
  opacity:1!important;
}

/* Bagian bawah trailer tetap normal, tidak dibuat abu-abu dan tidak mengubah section lain. */
.trailer-zone::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:90px!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,
      rgba(87,48,37,0) 0%,
      rgba(87,48,37,.48) 70%,
      var(--hero-trailer-end) 100%)!important;
  clip-path:none!important;
  transform:none!important;
  opacity:1!important;
}

.trailer-title,
.trailer-shell{
  position:relative!important;
  z-index:2!important;
}

/* Khusus frame trailer: hilangkan glow putih/circle, bukan shadow seluruh web. */
.trailer-zone .media-frame,
.trailer-main-video,
.trailer-shell .video-frame{
  filter:none!important;
  box-shadow:0 22px 52px rgba(12,6,4,.58)!important;
}

.trailer-zone .media-frame::before{
  opacity:.55!important;
  filter:none!important;
  box-shadow:none!important;
}

/* Responsive khusus hero-trailer saja. */
@media(max-width:860px){
  .hero::before{
    height:clamp(160px,23vh,260px)!important;
  }

  .trailer-zone{
    margin-top:clamp(-94px,-9vh,-60px)!important;
    padding-top:clamp(112px,14vh,150px)!important;
    padding-bottom:58px!important;
    background:
      linear-gradient(180deg,
        rgba(53,19,14,0) 0%,
        rgba(53,19,14,.48) 20%,
        var(--hero-trailer-top) 42%,
        var(--hero-trailer-mid) 72%,
        var(--hero-trailer-end) 100%)!important;
  }

  .trailer-zone::before{
    height:clamp(96px,13vh,150px)!important;
  }
}

@media(max-width:540px){
  .trailer-zone{
    margin-top:-70px!important;
    padding-top:104px!important;
  }
}


/* =========================================================
   TRAILER → COMBAT BACKGROUND BLEND ONLY
   Fokus hanya:
   <section class="trailer-zone"> → <section class="feature-section scene-pawleaf">
   Tidak menyentuh hero, header, footer, atau section lain.
   ========================================================= */

:root{
  --trailer-combat-join:#4a3129;
  --trailer-combat-warm:#573025;
  --combat-soft-mid:#433430;
  --combat-deep:#3a3331;
}

/* Trailer diarahkan berakhir ke warna yang sama dengan awal Combat. */
.trailer-zone{
  margin-bottom:-1px!important;
  background:
    linear-gradient(180deg,
      rgba(53,19,14,0) 0%,
      rgba(53,19,14,.42) 18%,
      var(--hero-trailer-top, #3b160f) 38%,
      var(--hero-trailer-mid, #4a2117) 62%,
      var(--trailer-combat-warm) 82%,
      var(--trailer-combat-join) 100%)!important;
}

/* Bottom trailer dibuat fade ke warna awal Combat, bukan abu-abu. */
.trailer-zone::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:clamp(150px,18vh,230px)!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,
      rgba(74,49,41,0) 0%,
      rgba(74,49,41,.46) 46%,
      var(--trailer-combat-join) 100%)!important;
  clip-path:none!important;
  transform:none!important;
  opacity:1!important;
}

/* Combat dimulai dari warna akhir Trailer, lalu baru turun ke tone combat. */
.feature-section.scene-pawleaf{
  margin-top:-1px!important;
  background:
    linear-gradient(180deg,
      var(--trailer-combat-join) 0%,
      var(--trailer-combat-join) 10%,
      var(--combat-soft-mid) 46%,
      var(--combat-deep) 100%)!important;
}

/* Hilangkan radial putih/abu di awal Combat supaya tidak muncul gap visual. */
.feature-section.scene-pawleaf::before{
  opacity:.08!important;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.12) 100%)!important;
  mix-blend-mode:multiply!important;
}

/* Tambahkan top wash di Combat dengan warna yang sama agar sambungan tidak terlihat. */
.feature-section.scene-pawleaf::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:clamp(110px,14vh,180px)!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,
      var(--trailer-combat-join) 0%,
      rgba(74,49,41,.72) 42%,
      rgba(74,49,41,0) 100%)!important;
}

/* Pastikan konten Combat tetap di atas overlay blend. */
.feature-section.scene-pawleaf .feature-grid{
  position:relative!important;
  z-index:2!important;
}

@media(max-width:860px){
  .trailer-zone{
    background:
      linear-gradient(180deg,
        rgba(53,19,14,0) 0%,
        rgba(53,19,14,.46) 18%,
        var(--hero-trailer-top, #3b160f) 38%,
        var(--hero-trailer-mid, #4a2117) 62%,
        var(--trailer-combat-warm) 82%,
        var(--trailer-combat-join) 100%)!important;
  }

  .trailer-zone::after{
    height:clamp(110px,15vh,170px)!important;
  }

  .feature-section.scene-pawleaf::after{
    height:clamp(90px,12vh,140px)!important;
  }
}


/* =========================================================
   COMBAT → POSSESSION BLEND V2
   Fix utama:
   - .scene-pawleaf::before = top blend dari Trailer ke Combat
   - .scene-pawleaf::after  = bottom blend dari Combat ke Possession
   Jadi pseudo-element tidak saling tabrakan.
   Fokus hanya:
   Combat section → Possession Combat section
   ========================================================= */

:root{
  --combat-possession-join:#3a2824;
  --combat-possession-top:#4a3129;
  --combat-possession-mid:#40322e;
  --combat-possession-deep:#2b1711;
}

/* Combat: mulai tetap nyambung dari Trailer, lalu turun ke warna Possession. */
.feature-section.scene-pawleaf{
  position:relative!important;
  overflow:hidden!important;
  margin-top:-1px!important;
  margin-bottom:-1px!important;
  background:
    linear-gradient(180deg,
      var(--trailer-combat-join, #4a3129) 0%,
      var(--combat-possession-top) 18%,
      var(--combat-possession-mid) 56%,
      var(--combat-possession-join) 100%)!important;
}

/* Top Combat blend khusus dari Trailer → Combat.
   Pakai ::before agar tidak bentrok dengan bottom blend. */
.feature-section.scene-pawleaf::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:auto!important;
  height:clamp(100px,13vh,170px)!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,
      var(--trailer-combat-join, #4a3129) 0%,
      rgba(74,49,41,.55) 42%,
      rgba(74,49,41,0) 100%)!important;
  opacity:1!important;
  clip-path:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
}

/* Bottom Combat blend khusus Combat → Possession.
   Explicit top:auto supaya tidak mewarisi top:0 dari patch sebelumnya. */
.feature-section.scene-pawleaf::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:-1px!important;
  height:clamp(150px,19vh,250px)!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,
      rgba(58,40,36,0) 0%,
      rgba(58,40,36,.46) 44%,
      var(--combat-possession-join) 100%)!important;
  opacity:1!important;
  clip-path:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
}

/* Possession: top-nya harus persis sama dengan bottom Combat. */
.feature-section.scene-night.alt{
  position:relative!important;
  overflow:hidden!important;
  margin-top:-1px!important;
  background:
    linear-gradient(180deg,
      var(--combat-possession-join) 0%,
      var(--combat-possession-join) 14%,
      #33231f 52%,
      var(--combat-possession-deep) 100%)!important;
}

/* Top Possession wash untuk menutup seam. */
.feature-section.scene-night.alt::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:auto!important;
  height:clamp(130px,16vh,220px)!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,
      var(--combat-possession-join) 0%,
      rgba(58,40,36,.70) 44%,
      rgba(58,40,36,0) 100%)!important;
  opacity:1!important;
  clip-path:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
}

/* Jangan buat overlay baru di bawah Possession, karena section berikutnya tidak disentuh. */
.feature-section.scene-night.alt::after{
  content:none!important;
  display:none!important;
}

/* Konten dua section tetap di atas overlay blend. */
.feature-section.scene-pawleaf .feature-grid,
.feature-section.scene-night.alt .feature-grid{
  position:relative!important;
  z-index:2!important;
}

@media(max-width:860px){
  .feature-section.scene-pawleaf::before{
    height:clamp(82px,11vh,130px)!important;
  }

  .feature-section.scene-pawleaf::after{
    height:clamp(110px,15vh,180px)!important;
  }

  .feature-section.scene-night.alt::before{
    height:clamp(96px,13vh,160px)!important;
  }
}


/* =========================================================
   POSSESSION → FOOD BLEND ONLY
   Fokus hanya:
   <section class="feature-section scene-night alt">
   ->
   <section class="feature-section scene-red" id="food">
   Tidak menyentuh Hero, Trailer, Combat, Ritual, World, Story, Proof, Footer.
   ========================================================= */

:root{
  --possession-food-join:#29130d;
  --possession-food-red-dark:#32160f;
  --possession-food-red-mid:#3b2119;
  --possession-food-red-warm:#4a3129;
}

/* Possession tetap dimulai dari blend Combat sebelumnya,
   tapi bagian bawahnya sekarang diarahkan ke warna awal Food. */
.feature-section.scene-night.alt{
  margin-bottom:-1px!important;
  background:
    linear-gradient(180deg,
      var(--combat-possession-join, #3a2824) 0%,
      var(--combat-possession-join, #3a2824) 12%,
      #33231f 48%,
      var(--possession-food-join) 100%)!important;
}

/* Bottom Possession → Food.
   Ini yang menutup seam antara bagian bawah Possession dan atas Food. */
.feature-section.scene-night.alt::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:-1px!important;
  height:clamp(150px,19vh,250px)!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,
      rgba(41,19,13,0) 0%,
      rgba(41,19,13,.44) 42%,
      var(--possession-food-join) 100%)!important;
  opacity:1!important;
  clip-path:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
}

/* Food dimulai dari warna yang sama dengan bottom Possession. */
.feature-section.scene-red{
  position:relative!important;
  overflow:hidden!important;
  margin-top:-1px!important;
  background:
    linear-gradient(180deg,
      var(--possession-food-join) 0%,
      var(--possession-food-red-dark) 18%,
      var(--possession-food-red-mid) 52%,
      var(--possession-food-red-warm) 100%)!important;
}

/* Top Food wash untuk menghilangkan batas keras.
   Tetap di dalam scene-red saja. */
.feature-section.scene-red::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:auto!important;
  height:clamp(130px,16vh,220px)!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,
      var(--possession-food-join) 0%,
      rgba(41,19,13,.72) 44%,
      rgba(41,19,13,0) 100%)!important;
  opacity:1!important;
  clip-path:none!important;
  transform:none!important;
  mix-blend-mode:normal!important;
}

/* Konten dua section tetap di atas overlay blend. */
.feature-section.scene-night.alt .feature-grid,
.feature-section.scene-red .feature-grid{
  position:relative!important;
  z-index:2!important;
}

@media(max-width:860px){
  .feature-section.scene-night.alt::after{
    height:clamp(110px,15vh,180px)!important;
  }

  .feature-section.scene-red::before{
    height:clamp(96px,13vh,160px)!important;
  }
}

/* =========================================================
   Theme 01 — Warm Brown Blend
   Palette based on uploaded guide:
   white / brown / charcoal / blood red / cream / deep maroon.
   Paste-ready full CSS file: original CSS + this final override.
   ========================================================= */

:root{
  --ink:#2b100b!important;
  --ink-soft:#32160f!important;
  --blood:#981601!important;
  --blood-dark:#5b1209!important;
  --cream:#eddac4!important;
  --paper:#f0dec5!important;
  --bone:#d8c4a7!important;
  --meow-white:#f7f6f3!important;
  --meow-coffee:#4b3027!important;
  --meow-charcoal:#5a3a2f!important;
  --meow-red:#981601!important;
  --meow-cream:#eddac4!important;
  --meow-black:#2b100b!important;
  --flow-top:#4b3027!important;
  --flow-mid:#5a3a2f!important;
  --flow-deep:#2b100b!important;

  --hero-trailer-seam:#35130e!important;
  --hero-trailer-top:#35130e!important;
  --hero-trailer-mid:#4b3027!important;
  --hero-trailer-end:#5a3a2f!important;

  --trailer-combat-join:#4a3129!important;
  --trailer-combat-warm:#4b3027!important;
  --combat-soft-mid:#40322e!important;
  --combat-deep:#5a3a2f!important;

  --combat-possession-join:#3a2824!important;
  --combat-possession-top:#4a3129!important;
  --combat-possession-mid:#40322e!important;
  --combat-possession-deep:#2b1711!important;

  --possession-food-join:#29130d!important;
  --possession-food-red-dark:#29130d!important;
  --possession-food-red-mid:#3b2119!important;
  --possession-food-red-warm:#4a3129!important;
}

html,
body{
  background:#2b100b!important;
  color:#eddac4!important;
}

main{
  background:
    linear-gradient(180deg,
      #29130d 0%,
      #4b3027 28%,
      #38302e 54%,
      #3b2119 76%,
      #2b100b 100%)!important;
}

.site-header{
  background:linear-gradient(90deg,rgba(43,16,11,.96),rgba(75,48,39,.92),rgba(43,16,11,.96))!important;
  border-bottom:1px solid color-mix(in srgb, #eddac4 18%, transparent)!important;
}

.site-header.scrolled{
  background:linear-gradient(90deg,rgba(18,8,5,.97),rgba(43,16,11,.96),rgba(18,8,5,.97))!important;
}

.hero{
  background:#2b100b!important;
}

.layer-video-overlay{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #2b100b 18%, transparent) 0%,
      color-mix(in srgb, #2b100b 34%, transparent) 45%,
      color-mix(in srgb, #2b100b 92%, transparent) 100%),
    radial-gradient(ellipse at 50% 78%,color-mix(in srgb, #2b100b 58%, transparent),transparent 55%),
    linear-gradient(90deg,color-mix(in srgb, #2b100b 35%, transparent),transparent 22%,transparent 78%,color-mix(in srgb, #2b100b 35%, transparent))!important;
}

.hero::before{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #2b100b 0%, transparent) 0%,
      color-mix(in srgb, #2b100b 22%, transparent) 26%,
      color-mix(in srgb, #35130e 62%, transparent) 58%,
      #35130e 100%)!important;
}

.hero-pitch{
  color:#f7f6f3!important;
  text-shadow:0 4px 0 color-mix(in srgb, #2b100b 95%, black),0 16px 28px rgba(0,0,0,.55)!important;
}

.trailer-zone{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #35130e 0%, transparent) 0%,
      color-mix(in srgb, #35130e 42%, transparent) 18%,
      #35130e 38%,
      #4b3027 62%,
      #5a3a2f 82%,
      #4a3129 100%)!important;
  color:#eddac4!important;
}

.trailer-zone::before{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #35130e 0%, transparent) 0%,
      color-mix(in srgb, #35130e 18%, transparent) 32%,
      color-mix(in srgb, #35130e 72%, transparent) 78%,
      color-mix(in srgb, #35130e 0%, transparent) 100%)!important;
}

.trailer-zone::after{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #4a3129 0%, transparent) 0%,
      color-mix(in srgb, #4a3129 46%, transparent) 46%,
      #4a3129 100%)!important;
}

.trailer-title h2{
  color:#eddac4!important;
  text-shadow:0 5px 0 #2b100b,0 22px 38px rgba(0,0,0,.45)!important;
}

.trailer-title::before,
.trailer-title::after{
  background:linear-gradient(90deg,transparent,#eddac4,transparent)!important;
}

.media-frame{
  border-color:#eddac4!important;
  background:#120807!important;
}

.play-button,
.blood-button,
.trailer-menu button.is-active{
  background:#981601!important;
}

.feature-section.scene-pawleaf{
  background:
    linear-gradient(180deg,
      #4a3129 0%,
      #4a3129 12%,
      #40322e 50%,
      #3a2824 100%)!important;
}

.feature-section.scene-pawleaf::before{
  background:
    linear-gradient(180deg,
      #4a3129 0%,
      color-mix(in srgb, #4a3129 55%, transparent) 42%,
      color-mix(in srgb, #4a3129 0%, transparent) 100%)!important;
}

.feature-section.scene-pawleaf::after{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #3a2824 0%, transparent) 0%,
      color-mix(in srgb, #3a2824 46%, transparent) 44%,
      #3a2824 100%)!important;
}

.feature-section.scene-night.alt{
  background:
    linear-gradient(180deg,
      #3a2824 0%,
      #3a2824 14%,
      #2b1711 52%,
      #29130d 100%)!important;
}

.feature-section.scene-night.alt::before{
  background:
    linear-gradient(180deg,
      #3a2824 0%,
      color-mix(in srgb, #3a2824 70%, transparent) 44%,
      color-mix(in srgb, #3a2824 0%, transparent) 100%)!important;
}

.feature-section.scene-night.alt::after{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #29130d 0%, transparent) 0%,
      color-mix(in srgb, #29130d 44%, transparent) 42%,
      #29130d 100%)!important;
}

.feature-section.scene-red{
  background:
    linear-gradient(180deg,
      #29130d 0%,
      #3b2119 48%,
      #4a3129 100%)!important;
}

.feature-section.scene-red::before{
  background:
    linear-gradient(180deg,
      #29130d 0%,
      color-mix(in srgb, #29130d 72%, transparent) 44%,
      color-mix(in srgb, #29130d 0%, transparent) 100%)!important;
}

.ritual-section{
  background:linear-gradient(180deg,#4a3129 0%,#5a3a2f 52%,#2b100b 100%)!important;
}

.world-section{
  background:linear-gradient(180deg,#2b100b 0%,#3b2119 34%,#4b3027 72%,#5a3a2f 100%)!important;
}

.story-section{
  background:linear-gradient(180deg,#5a3a2f 0%,#4b3027 45%,#2b100b 100%)!important;
}

.proof-section{
  background:linear-gradient(180deg,#2b100b 0%,#5b1209 42%,#981601 70%,#32160f 100%)!important;
}

.site-footer{
  background:linear-gradient(180deg,#2b100b 0%,#110806 100%)!important;
}

.smoke-panel{
  background:color-mix(in srgb, #2b100b 78%, transparent)!important;
  border-color:color-mix(in srgb, #eddac4 14%, transparent)!important;
}

h2,
.realm-grid b,
.proof-grid strong,
.team-card h3,
.footer-links a{
  color:#981601!important;
}

.tier-row span,
.pipeline span,
.ritual-actions span{
  border-color:color-mix(in srgb, #eddac4 35%, transparent)!important;
  background:color-mix(in srgb, #eddac4 12%, transparent)!important;
}

.pipeline i,
.slash-list li::before{
  background:#981601!important;
}

@media(max-width:860px){
  .trailer-zone{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, #35130e 0%, transparent) 0%,
        color-mix(in srgb, #35130e 46%, transparent) 18%,
        #35130e 38%,
        #4b3027 62%,
        #5a3a2f 82%,
        #4a3129 100%)!important;
  }

  .feature-section.scene-pawleaf{
    background:
      linear-gradient(180deg,
        #4a3129 0%,
        #40322e 48%,
        #3a2824 100%)!important;
  }

  .feature-section.scene-night.alt{
    background:
      linear-gradient(180deg,
        #3a2824 0%,
        #2b1711 50%,
        #29130d 100%)!important;
  }

  .feature-section.scene-red{
    background:
      linear-gradient(180deg,
        #29130d 0%,
        #3b2119 52%,
        #4a3129 100%)!important;
  }
}

/* === Inline YouTube trailer player / Error 153 safer embed === */
.trailer-main-video.is-playing{
  aspect-ratio:16/9;
  padding:12px;
}
.trailer-main-video.is-playing iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:0;
  background:#000;
}
.trailer-main-video.is-playing::before{
  pointer-events:none;
}
.youtube-fallback-link{
  position:absolute;
  right:22px;
  bottom:18px;
  z-index:4;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-weight:900;
  font-size:13px;
  text-transform:uppercase;
}
.youtube-fallback-link:hover{
  background:var(--blood, #ff2029);
  color:#120807;
}

/* === Auto looping MP4 media sections === */
.inline-loop-video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  object-fit:cover;
  background:#000;
}

.media-frame video.inline-loop-video{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.ritual-loop-video{
  display:block;
  width:min(190px, 45vw);
  aspect-ratio:1/1;
  height:auto;
  margin:0 auto 10px;
  object-fit:contain;
  background:transparent;
  border:0;
  pointer-events:none;
}

.inline-loop-video::-webkit-media-controls,
.ritual-loop-video::-webkit-media-controls{
  display:none!important;
}

/* === Feast Ritual video frame same size as Worlds media frame === */
.ritual-video-frame{
  width:min(920px, 100%);
  max-width:920px;
  margin:0 auto clamp(28px, 4vh, 44px);
}

.ritual-video-frame .ritual-loop-video,
.ritual-video-frame video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  object-fit:cover;
  background:#000;
}

/* Override the old icon-size ritual video rule. */
.ritual-card .ritual-loop-video{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
}

.ritual-card{
  width:min(1100px, 92vw);
}

@media(max-width:860px){
  .ritual-video-frame{
    width:100%;
    margin-bottom:24px;
  }
}