:root{   --headerH: 72px;   --footerH: 56px;   --cinemaMaxW: 1180px;   --cinemaRadius: 18px;   --solY-core: rgba(255,211,110,0.95);   --solY-hot:  rgba(255,243,230,0.85);   --solY-amber:rgba(255,190,70,0.55);   --solB-glow: rgba(90,120,255,0.22);   --solB-soft: rgba(70,110,200,0.14);   --glowPad: 28px;   --glowPadLg: 36px;   --stageH: calc(100svh - var(--headerH) - var(--footerH)); }  *, *::before, *::after{ box-sizing: border-box; }  html, body{   height: 100%;   width: 100%; }  body{   margin: 0;   overflow: hidden;   scroll-behavior: smooth; }  .hero-stage{   position: relative;   height: 100svh;   overflow: hidden;   padding-top: var(--headerH);   padding-bottom: var(--footerH); }  .hero-deck{   position: relative;   height: var(--stageH);   display: flex;   align-items: center; }  .hero-slide{   position: absolute;   left: 0;   right: 0;   top: 0;   height: var(--stageH);   display: flex;   align-items: center;   opacity: 0;   transform: translateY(10px);   pointer-events: none;   transition: opacity 260ms ease, transform 260ms ease; }  .hero-slide.active{   opacity: 1;   transform: translateY(0px);   pointer-events: auto; }  .hero-slide.leaving{   opacity: 0;   transform: translateY(-12px); }  .bg-oriontis{   background:     radial-gradient(1100px 700px at 18% 22%, rgba(110,243,214,0.12), transparent 60%),     radial-gradient(950px 650px at 76% 18%, rgba(255,211,110,0.12), transparent 62%),     radial-gradient(900px 650px at 45% 86%, rgba(255,107,107,0.10), transparent 60%),     linear-gradient(180deg, #070A14 0%, #0E1330 55%, #070A14 100%); }  .header-solid{   background: rgba(7, 10, 20, 0.72);   border-bottom: 1px solid rgba(255,255,255,0.10);   backdrop-filter: blur(12px);   transition: opacity 220ms ease, background 220ms ease, border-color 220ms ease, filter 220ms ease;   position: relative;   overflow: hidden;   isolation: isolate;   box-shadow:     inset 0 -1px 0 rgba(255,211,110,0.18),     inset 0  1px 0 rgba(90,120,255,0.10); }  .header-solid::before, .header-solid::after{   content: "";   position: absolute;   pointer-events: none;   inset: calc(-1 * var(--glowPad));   width: calc(100% + (var(--glowPad) * 2));   height: calc(100% + (var(--glowPad) * 2)); }  .header-solid::before{   z-index: 0;   background:     linear-gradient(       90deg,       rgba(14,19,48,0.00) 0%,       var(--solB-soft) 18%,       var(--solB-glow) 35%,       var(--solB-soft) 52%,       var(--solB-glow) 68%,       rgba(14,19,48,0.00) 100%     );   background-size: 300% 100%;   filter: blur(12px) saturate(1.15);   opacity: 0.85;   animation: oriontisBlueFlow 12s linear infinite; }  .header-solid::after{   z-index: 1;   background:     linear-gradient(       90deg,       rgba(255,211,110,0.00) 0%,       rgba(255,211,110,0.10) 12%,       var(--solY-amber) 22%,       var(--solY-core) 38%,       var(--solY-hot) 50%,       var(--solY-core) 62%,       var(--solY-amber) 76%,       rgba(255,211,110,0.00) 100%     );   background-size: 260% 100%;   filter: blur(7px) saturate(1.25);   mix-blend-mode: screen;   opacity: 0.88;   animation: oriontisSolarFlow 8.5s linear infinite; }  @media (min-width: 1024px){   .header-solid::before,   .header-solid::after{     inset: calc(-1 * var(--glowPadLg));     width: calc(100% + (var(--glowPadLg) * 2));     height: calc(100% + (var(--glowPadLg) * 2));   } }  .header-solid > *{ position: relative; z-index: 2; }  @keyframes oriontisBlueFlow{   0%{ background-position: 0% 50%; }   50%{ background-position: 100% 50%; }   100%{ background-position: 200% 50%; } }  @keyframes oriontisSolarFlow{   0%{ background-position: 0% 50%; opacity: 0.82; }   50%{ background-position: 100% 50%; opacity: 0.98; }   100%{ background-position: 200% 50%; opacity: 0.84; } }  .hero-bg{   background-image:     radial-gradient(1100px 700px at 18% 22%, rgba(110,243,214,0.14), transparent 60%),     radial-gradient(950px 650px at 76% 18%, rgba(255,211,110,0.14), transparent 62%),     radial-gradient(900px 650px at 45% 86%, rgba(255,107,107,0.10), transparent 60%),     url("./assets/images/hero.png");   background-size: cover;   background-position: center;   background-repeat: no-repeat;   will-change: transform;   transform: scale(1.03);   animation: heroDrift 14s ease-in-out infinite; }  .hero-overlay{   background: linear-gradient(     180deg,     rgba(7,10,20,0.46) 0%,     rgba(7,10,20,0.70) 55%,     rgba(7,10,20,0.88) 100%   );   will-change: transform, opacity;   animation: heroOverlayBreath 18s ease-in-out infinite; }  @keyframes heroDrift{   0%{ transform: scale(1.03) translate3d(0px, 0px, 0); }   50%{ transform: scale(1.05) translate3d(0px, -10px, 0); }   100%{ transform: scale(1.03) translate3d(0px, 0px, 0); } }  @keyframes heroOverlayBreath{   0%{ transform: translate3d(0px, 0px, 0); opacity: 1; }   50%{ transform: translate3d(0px, 6px, 0); opacity: 0.94; }   100%{ transform: translate3d(0px, 0px, 0); opacity: 1; } }  .hero-aurora{   position: absolute;   inset: -10%;   pointer-events: none;   opacity: 0.55;   filter: blur(10px);   transform: translateZ(0); }  .hero-aurora-a{   background:     radial-gradient(700px 420px at 18% 30%, rgba(110,243,214,0.22), transparent 62%),     radial-gradient(620px 420px at 78% 22%, rgba(255,211,110,0.22), transparent 64%),     radial-gradient(520px 520px at 56% 82%, rgba(120,140,255,0.14), transparent 62%);   animation: auroraMoveA 12s ease-in-out infinite; }  .hero-aurora-b{   background:     radial-gradient(740px 520px at 30% 70%, rgba(255,107,107,0.10), transparent 66%),     radial-gradient(660px 520px at 72% 76%, rgba(110,243,214,0.12), transparent 64%);   opacity: 0.35;   animation: auroraMoveB 16s ease-in-out infinite; }  @keyframes auroraMoveA{   0%{ transform: translate3d(0,0,0) scale(1.00); }   50%{ transform: translate3d(0,-10px,0) scale(1.02); }   100%{ transform: translate3d(0,0,0) scale(1.00); } }  @keyframes auroraMoveB{   0%{ transform: translate3d(0,0,0) scale(1.00); }   50%{ transform: translate3d(12px,8px,0) scale(1.03); }   100%{ transform: translate3d(0,0,0) scale(1.00); } }  .sparkle{   position: absolute;   inset: 0;   pointer-events: none;   opacity: 0.42;   background-image:     radial-gradient(circle at 22% 34%, rgba(255,243,230,0.16) 0 2px, transparent 3px),     radial-gradient(circle at 62% 22%, rgba(255,243,230,0.10) 0 2px, transparent 3px),     radial-gradient(circle at 78% 68%, rgba(255,243,230,0.10) 0 2px, transparent 3px),     radial-gradient(circle at 30% 82%, rgba(255,243,230,0.08) 0 2px, transparent 3px);   background-size: 520px 520px; }  .hero-rail{   position: fixed;   left: 26px;   top: 50%;   transform: translateY(-50%);   z-index: 40;   display: flex;   flex-direction: column;   gap: 10px;   font-family: "Cormorant SC", serif;   text-shadow: 0 18px 70px rgba(0,0,0,0.70); }  .hero-rail button{   appearance: none;   background: transparent;   border: 0;   padding: 2px 0;   display: inline-flex;   align-items: center;   gap: 14px;   font-weight: 600;   font-size: 13px;   letter-spacing: 0.18em;   text-transform: uppercase;   color: rgba(255,255,255,0.62);   cursor: pointer;   transition: color 220ms ease, opacity 220ms ease, transform 220ms ease; }  .hero-rail button::before{   content: "";   width: 22px;   height: 22px;   flex: 0 0 22px;   background-image: url("assets/images/Estrella.png");   background-repeat: no-repeat;   background-position: center;   background-size: contain;   opacity: 0.75;   filter:     drop-shadow(0 0 14px rgba(255,211,110,0.30))     drop-shadow(0 18px 36px rgba(0,0,0,0.55));   transform: translateY(-1px);   transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease; }  .hero-rail button:hover{   color: rgba(255,243,230,0.85);   transform: translateX(2px); }  .hero-rail button:hover::before{   opacity: 0.90;   transform: scale(1.06); }  .hero-rail button.active{   color: rgba(255,243,230,0.96); }  .hero-rail button.active::before{   opacity: 1;   transform: scale(1.14);   filter:     drop-shadow(0 0 22px rgba(255,211,110,0.45))     drop-shadow(0 22px 48px rgba(0,0,0,0.65));   animation: oriontisStarPulse 8.5s ease-in-out infinite; }  @keyframes oriontisStarPulse{   0%{ transform: scale(1.14); }   50%{ transform: scale(1.20); }   100%{ transform: scale(1.14); } }  @media (max-width: 767px){   .hero-rail{ display: none; } }  .scroll-hint{   position: fixed;   left: 50%;   bottom: calc(var(--footerH) + 18px);   transform: translateX(-50%);   z-index: 80;   transition: opacity 220ms ease; }  body.mode-trailer .scroll-hint{   opacity: 0.85;   pointer-events: auto; }  .overview-stage{   position: relative;   width: 100%;   height: var(--stageH); }  .overview-center{   position: absolute;   inset: 0;   display: grid;   place-items: center;   z-index: 2;   pointer-events: none; }  .overview-logo{   width: min(880px, 86vw);   height: auto;   filter:     drop-shadow(0 28px 90px rgba(0,0,0,0.78))     drop-shadow(0 0 26px rgba(255,211,110,0.10));   transform: translateY(-10px);   user-select: none;   margin-bottom: 10px; }  .overview-brand{   display: grid;   justify-items: center;   gap: 12px; }  .overview-bottom{   position: absolute;   left: 0;   bottom: 56px;   width: 100%;   z-index: 3;   padding-left: 82px;   padding-right: 20px; }  @media (max-width: 767px){   .overview-bottom{ padding-left: 0; } }  .overview-copy{   font-family: Inter, system-ui, sans-serif;   color: rgba(255,255,255,0.72);   font-size: 13px;   line-height: 1.6;   text-shadow: 0 18px 70px rgba(0,0,0,0.75);   max-width: 560px;   opacity: 0.9; }  .overview-line1{   font-weight: 600;   color: rgba(255,243,230,0.80); }  .overview-line2{ margin-top: 4px; }  .overview-cta{   margin-top: 10px;   display: flex;   gap: 10px;   flex-wrap: wrap; }  .overview-watermark{   position: absolute;   left: 50%;   top: 58%;   transform: translate(-50%, -50%);   width: min(1220px, 98vw);   height: 120px;   background-image: url("assets/images/Test_Titulo_05.png");   background-repeat: no-repeat;   background-position: center;   background-size: contain;   opacity: 0.16;   filter:     drop-shadow(0 24px 60px rgba(0,0,0,0.65))     drop-shadow(0 0 18px rgba(255,211,110,0.14));   z-index: 1;   pointer-events: none; }  .overview-tagline{   margin-top: 16px;   transform: translateY(10px);   padding-top: 2px;   font-family: "Cormorant SC", serif;   letter-spacing: 0.42em;   text-transform: uppercase;   font-size: 10px;   line-height: 1;   background: linear-gradient(     110deg,     rgba(255,255,255,0.16) 0%,     rgba(255,255,255,0.26) 38%,     rgba(255,211,110,0.98) 50%,     rgba(255,255,255,0.26) 62%,     rgba(255,255,255,0.16) 100%   );   background-size: 260% 100%;   background-position: 0% 50%;   -webkit-background-clip: text;   background-clip: text;   color: transparent;   opacity: 0.48;   filter: blur(0.10px) saturate(1.15);   text-shadow:     0 0 22px rgba(255,211,110,0.14),     0 0 44px rgba(255,211,110,0.10),     0 18px 70px rgba(0,0,0,0.78);   animation: taglineTextGlow 9s ease-in-out infinite alternate; }  .overview-tagline .dot{   opacity: 0.45;   padding: 0 6px; }  @keyframes taglineTextGlow{   from { background-position: 0% 50%; }   to   { background-position: 100% 50%; } }  .slide-plane{   width: 100%;   max-width: 860px;   padding: 0 0 0 6px;   text-shadow: 0 18px 80px rgba(0,0,0,0.75);   margin-left: 82px; }  @media (max-width: 767px){   .slide-plane{ margin-left: 0; } }  .slide-title{   font-size: 52px;   line-height: 1.0;   color: rgba(255,243,230,0.96);   text-shadow:     0 22px 80px rgba(0,0,0,0.75),     0 0 26px rgba(255,211,110,0.10); }  .hero-sub{   margin-top: 10px;   font-size: 14px;   line-height: 1.55;   color: rgba(255,255,255,0.70);   max-width: 560px; }  .btn{   border-radius: 16px;   padding: 14px 18px;   font-weight: 800;   letter-spacing: 0.05em;   text-transform: uppercase;   font-size: 12px;   border: 2px solid rgba(255,255,255,0.18);   transition: transform 140ms ease, opacity 140ms ease;   cursor: pointer; }  .btn:hover{   transform: translateY(-2px);   opacity: 0.96; }  .btnGold{   background: linear-gradient(90deg, #FFD36E, #FFEFAD);   color: #070A14;   border-color: rgba(0,0,0,0.15); }  .btnGhost{   background: rgba(255,255,255,0.06);   color: rgba(255,255,255,0.85); }  .overview-cta .btnGhost{   opacity: 0.78;   border-color: rgba(255,255,255,0.12); }  .overview-cta .btnGhost:hover{   opacity: 0.9; }  .chip{   display: inline-flex;   align-items: center;   gap: 8px;   padding: 10px 14px;   border-radius: 999px;   border: 2px solid rgba(255,255,255,0.16);   background: rgba(255,255,255,0.06);   font-weight: 700;   letter-spacing: 0.08em;   text-transform: uppercase;   font-size: 11px;   cursor: pointer; }  .chip:hover{ opacity: 0.92; }  .linkMint{   color: rgba(110,243,214,0.95);   text-decoration: none; }  .linkMint:hover{ opacity: 0.9; }  .footer-fixed{   position: fixed;   left: 0;   right: 0;   bottom: 0;   z-index: 50;   background:     linear-gradient(       180deg,       rgba(14,19,48,0.82),       rgba(7,10,20,0.92)     );   border-top: 1px solid rgba(90,120,255,0.14);   backdrop-filter: blur(12px);   box-shadow:     inset 0 1px 0 rgba(90,120,255,0.16),     0 -18px 60px rgba(0,0,0,0.55);   opacity: 0.96; }  .footerLink{   color: rgba(255,255,255,0.65);   font-size: 12px;   text-decoration: none;   transition: opacity 150ms ease; }  .footerLink:hover{ opacity: 0.9; }  .footer-credit{   font-family: Inter, system-ui, sans-serif;   font-size: 12px;   color: rgba(255,255,255,0.65); }  .footer-credit a{   color: rgba(255,243,230,0.65);   text-decoration: none;   transition: color 180ms ease, opacity 180ms ease; }  .footer-credit a:hover{   color: rgba(255,211,110,0.90);   opacity: 1; }  .seo-hidden{   position: absolute;   width: 1px;   height: 1px;   padding: 0;   margin: -1px;   overflow: hidden;   clip: rect(0,0,0,0);   white-space: nowrap;   border: 0; }  .cinema-wrap{   position: fixed;   left: 0;   right: 0;   top: var(--headerH);   bottom: var(--footerH);   z-index: 45;   opacity: 0;   pointer-events: none;   transition: opacity 260ms ease; }  body.mode-trailer .cinema-wrap{   opacity: 1;   pointer-events: auto; }  .cinema-dim{   position: absolute;   inset: 0;   background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.82) 62%, rgba(0,0,0,0.90) 100%);   backdrop-filter: blur(1.5px); }  .cinema-frame{   position: absolute;   inset: 0;   display: grid;   place-items: center;   padding: 14px; }  .cinema-video{   width: min(var(--cinemaMaxW), calc(100vw - 28px));   aspect-ratio: 16 / 9;   border-radius: var(--cinemaRadius);   overflow: hidden;   background: #000;   position: relative;   border: 1px solid rgba(255,255,255,0.14);   box-shadow:     0 14px 70px rgba(0,0,0,0.65),     0 40px 140px rgba(0,0,0,0.70); }  .trailer-iframe{   position: absolute;   inset: 0;   width: 100%;   height: 100%;   border: 0; }  .trailer-wheel-layer{   position: absolute;   inset: 0;   z-index: 3;   background: transparent; }  body.mode-trailer .cinema-video{   animation: cinemaIn 320ms ease both; }  @keyframes cinemaIn{   0%{ transform: translateY(10px) scale(0.985); opacity: 0; filter: saturate(0.9); }   100%{ transform: translateY(0px) scale(1); opacity: 1; filter: saturate(1); } }  .slide-trailer.hero-slide{ transform: none; transition: opacity 180ms ease; } .slide-trailer.hero-slide.leaving{ transform: none; }  body.mode-trailer .header-solid{   background: rgba(0,0,0,0.92);   border-bottom-color: rgba(255,255,255,0.03);   filter: none;   padding-top: 6px;   padding-bottom: 6px; }  body.mode-trailer .header-solid::before, body.mode-trailer .header-solid::after{   opacity: 0 !important; }  body.mode-trailer .header-solid *{   opacity: 1; }  body.mode-trailer .footer-fixed{   background: rgba(0,0,0,0.88);   filter: saturate(0.6) brightness(0.6); }  body.mode-trailer .footer-fixed *{   opacity: 0.55; }  .gallery-wrap{   width: 100%;   max-width: 1280px;   margin: 0 auto;   padding-left: 82px;   padding-right: 22px; }  @media (max-width: 1024px){   .gallery-wrap{ padding-left: 0; } }  .gallery-titleRow{   display: flex;   align-items: center;   gap: 18px;   margin-bottom: 16px;   width: 100%; }  .gallery-line{   flex: 1;   height: 1px;   opacity: 0.8;   background: linear-gradient(     90deg,     rgba(255,211,110,0.00) 0%,     rgba(255,211,110,0.22) 14%,     rgba(255,211,110,0.38) 50%,     rgba(255,211,110,0.22) 86%,     rgba(255,211,110,0.00) 100%   );   box-shadow:     0 0 16px rgba(255,211,110,0.10),     0 0 28px rgba(255,211,110,0.06); }  .gallery-title{   font-family: "Cormorant SC", serif;   letter-spacing: 0.24em;   color: rgba(255,243,230,0.90);   font-size: 18px;   text-transform: uppercase;   display: inline-flex;   align-items: center;   gap: 10px;   text-shadow:     0 14px 60px rgba(0,0,0,0.60),     0 0 18px rgba(255,211,110,0.10); }  .gallery-title::before, .gallery-title::after{   content: "";   width: 16px;   height: 16px;   background-image: url("assets/images/Estrella.png");   background-repeat: no-repeat;   background-position: center;   background-size: contain;   opacity: 0.92;   filter:     drop-shadow(0 0 12px rgba(255,211,110,0.22))     drop-shadow(0 10px 22px rgba(0,0,0,0.45)); }  .gallery-qhd{   display: grid;   grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);   grid-template-rows: 1fr 1fr;   gap: 16px;   align-items: stretch;   width: 100%;   max-height: calc(var(--stageH) - 64px); }  .gq-card{   position: relative;   display: block;   width: 100%;   min-width: 0;   border-radius: 18px;   overflow: hidden;   border: 1px solid rgba(255,255,255,0.12);   background: rgba(0,0,0,0.25);   cursor: pointer;   aspect-ratio: 16 / 9;   box-shadow:     0 26px 90px rgba(0,0,0,0.55),     0 10px 26px rgba(0,0,0,0.35);   transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }  .gq-card img{   width: 100%;   height: 100%;   object-fit: cover;   display: block;   transform: scale(1.01);   transition: transform 260ms ease; }  .gq-main{ grid-column: 1; grid-row: 1 / span 2; } .gq-top{ grid-column: 2; grid-row: 1; } .gq-bottom{ grid-column: 2; grid-row: 2; }  .gq-card:hover{   transform: translateY(-2px);   border-color: rgba(255,211,110,0.28);   box-shadow:     0 34px 120px rgba(0,0,0,0.65),     0 0 26px rgba(255,211,110,0.08); }  .gq-card:hover img{   transform: scale(1.05); }  @media (max-width: 900px){   .gallery-qhd{     grid-template-columns: 1fr;     grid-template-rows: auto;     max-height: none;   }    .gq-main,   .gq-top,   .gq-bottom{     grid-column: 1;     grid-row: auto;   } }  .gmodal{   position: fixed;   inset: 0;   z-index: 120;   display: none; }  .gmodal.on{ display: block; }  .gmodal-dim{   position: absolute;   inset: 0;   background: rgba(0,0,0,0.74);   backdrop-filter: blur(3px); }  .gmodal-frame{   position: absolute;   left: 50%;   top: 50%;   transform: translate(-50%, -50%);   width: auto;   height: auto;   display: flex;   align-items: center;   justify-content: center;   padding: 0; }  .gmodal-img{   display: block;   width: auto;   height: auto;   max-width: min(1560px, 92vw);   max-height: calc(100svh - var(--headerH) - var(--footerH) - 36px);   border-radius: 16px;   border: 1px solid rgba(255,255,255,0.12);   background: rgba(0,0,0,0.40);   box-shadow: 0 40px 160px rgba(0,0,0,0.78);   object-fit: contain; }  .gmodal-close{   position: absolute;   right: -12px;   top: -12px;   width: 42px;   height: 42px;   border-radius: 999px;   border: 1px solid rgba(255,255,255,0.18);   background: rgba(7,10,20,0.55);   color: rgba(255,243,230,0.92);   font-weight: 800;   cursor: pointer;   backdrop-filter: blur(10px);   box-shadow:     0 18px 60px rgba(0,0,0,0.55),     0 0 18px rgba(255,211,110,0.06); }  .gmodal-nav{   position: absolute;   top: 50%;   transform: translateY(-50%);   width: 54px;   height: 54px;   border-radius: 999px;   border: 1px solid rgba(255,211,110,0.22);   background: rgba(7,10,20,0.45);   color: rgba(255,243,230,0.92);   font-size: 34px;   cursor: pointer;   backdrop-filter: blur(10px);   box-shadow:     0 20px 70px rgba(0,0,0,0.55),     0 0 26px rgba(255,211,110,0.06);   transition: transform 160ms ease, border-color 160ms ease, opacity 160ms ease; }  .gmodal-prev{ left: -78px; } .gmodal-next{ right: -78px; }  .gmodal-nav:hover{   transform: translateY(-50%) scale(1.03);   border-color: rgba(255,211,110,0.38); }  @media (max-width: 900px){   .gmodal-prev{ left: 10px; }   .gmodal-next{ right: 10px; } }  .hero-slide[data-index="2"] .gallery-wrap{   margin-top: -24px; }  .roadmap-wrap{   width: 100%;   max-width: 1100px;   margin: 0 auto;   padding-left: 82px;   padding-right: 22px; }  @media (max-width: 1024px){   .roadmap-wrap{ padding-left: 0; } }  .roadmap-grid{   display: grid;   grid-template-columns: repeat(3, 1fr);   gap: 24px;   margin-top: 24px; }  @media (max-width: 900px){   .roadmap-grid{     grid-template-columns: 1fr;   } }  .roadmap-card{   border-radius: 18px;   padding: 28px 26px;   background: rgba(0,0,0,0.28);   border: 1px solid rgba(255,255,255,0.12);   box-shadow:     0 28px 90px rgba(0,0,0,0.55),     0 10px 26px rgba(0,0,0,0.35);   transition: transform 220ms ease, border-color 220ms ease; }  .roadmap-card:hover{   transform: translateY(-2px);   border-color: rgba(255,211,110,0.28); }  .roadmap-phase{   font-family: "Cormorant SC", serif;   letter-spacing: 0.22em;   font-size: 14px;   margin-bottom: 10px;   color: rgba(255,211,110,0.90);   display: flex;   align-items: baseline;   gap: 12px; }  .roadmap-date{   font-family: Inter, system-ui, sans-serif;   font-size: 10px;   letter-spacing: 0.24em;   text-transform: uppercase;   color: rgba(255,211,110,0.65);   text-shadow: 0 2px 10px rgba(0,0,0,0.65); }  .roadmap-card p{   font-size: 14px;   line-height: 1.55;   color: rgba(255,255,255,0.72); }  .playtest-wrap{   width: 100%;   max-width: 1180px;   margin: 0 auto;   padding-left: 82px;   padding-right: 22px; }  @media (max-width: 1024px){   .playtest-wrap{ padding-left: 0; } }  .playtest-grid{   display: grid;   grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);   gap: 22px;   align-items: stretch; }  .playtest-robotPanel, .playtest-formPanel{   border-radius: 20px;   border: 1px solid rgba(255,255,255,0.12);   box-shadow:     0 28px 90px rgba(0,0,0,0.55),     0 10px 26px rgba(0,0,0,0.35); }  .playtest-robotPanel{   position: relative;   overflow: hidden;   display: grid;   place-items: center;   background:     radial-gradient(360px 220px at 58% 14%, rgba(255,200,120,0.12), transparent 72%),     radial-gradient(520px 320px at 20% 82%, rgba(117,91,70,0.16), transparent 72%),     linear-gradient(160deg, rgba(30,34,44,0.92), rgba(22,20,24,0.90)); }  .playtest-robotPanel::before{   content: "";   position: absolute;   inset: 0;   background:     linear-gradient(120deg, rgba(255,180,95,0.10), transparent 34%),     linear-gradient(300deg, rgba(255,223,170,0.08), transparent 36%);   pointer-events: none; }  .playtest-robot{   position: relative;   width: min(400px, 100%);   max-height: calc(var(--stageH) - 230px);   object-fit: contain;   filter:     drop-shadow(0 22px 46px rgba(0,0,0,0.58))     drop-shadow(0 0 20px rgba(255,192,110,0.12)); }  .playtest-formPanel{   padding: 22px;   background:     radial-gradient(640px 340px at 80% 8%, rgba(255,205,128,0.14), transparent 64%),     radial-gradient(540px 280px at 10% 100%, rgba(120,86,62,0.14), transparent 68%),     linear-gradient(180deg, rgba(29,30,37,0.92), rgba(18,17,22,0.94)); }  .playtest-heading{   margin: 0;   font-family: "Cormorant SC", serif;   letter-spacing: 0.1em;   font-size: 28px;   line-height: 1.1;   color: rgba(255,226,174,0.95);   text-shadow: 0 8px 30px rgba(0,0,0,0.55); }  .playtest-copy{   margin: 10px 0 0;   font-size: 14px;   line-height: 1.55;   color: rgba(255,243,230,0.74); }  .playtest-prizeVisual{   margin-top: 10px;   position: relative;   height: 92px;   width: 152px;   pointer-events: none; }  .playtest-prizeVisual::after{   content: "";   position: absolute;   left: 18px;   bottom: 30px;   width: 92px;   height: 48px;   background: radial-gradient(ellipse at center, rgba(110,243,214,0.26) 0%, rgba(110,243,214,0.06) 52%, rgba(110,243,214,0) 100%);   filter: blur(4px);   animation: playtestAuraPulse 3.2s ease-in-out infinite; }  .playtest-chest{   position: absolute;   left: 0;   bottom: 0;   width: 98px;   height: auto;   filter:     drop-shadow(0 10px 24px rgba(0,0,0,0.45))     drop-shadow(0 0 14px rgba(110,243,214,0.16));   animation: playtestChestFloat 4.8s ease-in-out infinite; }  .playtest-ticket{   position: absolute;   left: 66px;   top: 2px;   width: 86px;   height: auto;   transform: rotate(-10deg);   transform-origin: 20% 80%;   filter:     drop-shadow(0 8px 20px rgba(0,0,0,0.42))     drop-shadow(0 0 12px rgba(255,211,110,0.20));   animation: playtestTicketFloat 3.8s ease-in-out infinite; }  .playtest-copy-mini{   font-size: 12px;   color: rgba(255,243,230,0.58); }  @keyframes playtestChestFloat{   0%{ transform: translateY(0px) scale(1); }   50%{ transform: translateY(-3px) scale(1.015); }   100%{ transform: translateY(0px) scale(1); } }  @keyframes playtestTicketFloat{   0%{ transform: translateY(0px) rotate(-10deg); }   50%{ transform: translateY(-5px) rotate(-7deg); }   100%{ transform: translateY(0px) rotate(-10deg); } }  @keyframes playtestAuraPulse{   0%{ opacity: 0.52; transform: scale(0.98); }   50%{ opacity: 0.82; transform: scale(1.06); }   100%{ opacity: 0.52; transform: scale(0.98); } }  .playtest-form{   margin-top: 18px;   display: grid;   gap: 8px; }  .playtest-label{   margin-top: 6px;   font-size: 11px;   font-weight: 700;   text-transform: uppercase;   letter-spacing: 0.14em;   color: rgba(255,214,144,0.86); }  .playtest-form input[type="text"], .playtest-form input[type="email"], .playtest-form select, .playtest-form textarea{   width: 100%;   border-radius: 12px;   border: 1px solid rgba(255,255,255,0.14);   background: rgba(9,10,14,0.58);   color: rgba(255,243,230,0.92);   padding: 12px 13px;   font-size: 14px;   line-height: 1.35;   outline: none;   transition: border-color 160ms ease, box-shadow 160ms ease; }  .playtest-platformFixed{   width: 100%;   border-radius: 12px;   border: 1px solid rgba(255,255,255,0.14);   background: rgba(9,10,14,0.58);   color: rgba(255,243,230,0.92);   padding: 12px 13px;   font-size: 14px;   line-height: 1.35; }  .playtest-form input::placeholder, .playtest-form textarea::placeholder{   color: rgba(255,243,230,0.46); }  .playtest-form input:focus, .playtest-form select:focus, .playtest-form textarea:focus{   border-color: rgba(255,192,100,0.65);   box-shadow:     0 0 0 3px rgba(255,192,100,0.12),     0 0 20px rgba(255,192,100,0.10); }  .playtest-consent{   margin-top: 8px;   display: flex;   align-items: flex-start;   gap: 10px;   font-size: 13px;   color: rgba(255,243,230,0.76); }  .playtest-consent input{   margin-top: 2px; }  .playtest-form .btn{   margin-top: 8px;   width: fit-content;   min-width: 180px; }  .playtest-status{   min-height: 18px;   margin: 0;   font-size: 12px;   color: rgba(255,220,156,0.84); }  .brand-subtitle{   font-family: "Cormorant SC", serif;   font-weight: 500;   font-size: 12px;   letter-spacing: 0.32em;   text-transform: uppercase;   color: rgba(255,243,230,0.75);   text-shadow:     0 6px 22px rgba(0,0,0,0.55),     0 0 14px rgba(255,211,110,0.08);   opacity: 0.85; }  .langSwitch{   display: inline-flex;   gap: 8px;   align-items: center; }  .langBtn{   padding: 10px 12px;   min-width: 44px;   justify-content: center; }  .langBtn.active{   border-color: rgba(255,211,110,0.36);   box-shadow: 0 0 22px rgba(255,211,110,0.10);   opacity: 0.98; }  @media (max-width: 1024px){   .footer-fixed .max-w-7xl{     flex-wrap: nowrap;     gap: 12px;   }    .footer-credit{     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis;     max-width: 58vw;   } }  @media (max-width: 900px){   .footer-fixed{     min-height: 54px;   }    .footer-fixed .max-w-7xl{     padding-top: 10px !important;     padding-bottom: 10px !important;     gap: 10px;   }    .footer-fixed .footerLink{     font-size: 0;     line-height: 0;     width: 36px;     height: 36px;     display: inline-grid;     place-items: center;     border-radius: 999px;     background: rgba(255,255,255,0.06);     border: 1px solid rgba(255,255,255,0.14);     box-shadow:       0 12px 40px rgba(0,0,0,0.45),       inset 0 0 0 rgba(255,211,110,0);     transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;   }    .footer-fixed .footerLink:hover{     transform: translateY(-1px);     border-color: rgba(255,211,110,0.45);     box-shadow:       0 18px 60px rgba(0,0,0,0.55),       0 0 18px rgba(255,211,110,0.10);   }    .footer-fixed .footerLink::before{     content: "";     width: 16px;     height: 16px;     display: block;     background: rgba(255,243,230,0.85);     -webkit-mask-repeat: no-repeat;     -webkit-mask-position: center;     -webkit-mask-size: contain;             mask-repeat: no-repeat;             mask-position: center;             mask-size: contain;   }    .footer-fixed .footerLink[href^="mailto:"]::before{     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z'/%3E%3C/svg%3E");             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z'/%3E%3C/svg%3E");   }    .footer-fixed .footerLink[href*="x.com"]::before{     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.244 2H21l-6.52 7.455L22 22h-6.829l-5.35-7.02L3.7 22H1l7.02-8.03L2 2h6.999l4.84 6.35L18.244 2Zm-1.2 18h1.63L6.88 3.9H5.13L17.044 20Z'/%3E%3C/svg%3E");             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.244 2H21l-6.52 7.455L22 22h-6.829l-5.35-7.02L3.7 22H1l7.02-8.03L2 2h6.999l4.84 6.35L18.244 2Zm-1.2 18h1.63L6.88 3.9H5.13L17.044 20Z'/%3E%3C/svg%3E");   }    .footer-fixed .footerLink[href*="youtube.com"]::before{     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2a3 3 0 0 0-2.1-2.1C17.8 4.6 12 4.6 12 4.6s-5.8 0-7.5.5A3 3 0 0 0 2.4 7.2 31.6 31.6 0 0 0 2 12a31.6 31.6 0 0 0 .4 4.8 3 3 0 0 0 2.1 2.1c1.7.5 7.5.5 7.5.5s5.8 0 7.5-.5a3 3 0 0 0 2.1-2.1A31.6 31.6 0 0 0 22 12a31.6 31.6 0 0 0-.4-4.8ZM10 15.5v-7l6 3.5-6 3.5Z'/%3E%3C/svg%3E");             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 7.2a3 3 0 0 0-2.1-2.1C17.8 4.6 12 4.6 12 4.6s-5.8 0-7.5.5A3 3 0 0 0 2.4 7.2 31.6 31.6 0 0 0 2 12a31.6 31.6 0 0 0 .4 4.8 3 3 0 0 0 2.1 2.1c1.7.5 7.5.5 7.5.5s5.8 0 7.5-.5a3 3 0 0 0 2.1-2.1A31.6 31.6 0 0 0 22 12a31.6 31.6 0 0 0-.4-4.8ZM10 15.5v-7l6 3.5-6 3.5Z'/%3E%3C/svg%3E");   }    .footer-fixed .footerLink[href*="patreon.com"]::before{     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3C10.36 3 7 6.36 7 10.5S10.36 18 14.5 18 22 14.64 22 10.5 18.64 3 14.5 3ZM2 21V3h3v18H2Z'/%3E%3C/svg%3E");             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14.5 3C10.36 3 7 6.36 7 10.5S10.36 18 14.5 18 22 14.64 22 10.5 18.64 3 14.5 3ZM2 21V3h3v18H2Z'/%3E%3C/svg%3E");   } }  @media (max-width: 520px){   .footer-credit{ max-width: 48vw; } }  @media (max-width: 900px){   .footer-fixed .max-w-7xl{     align-items: center;   }    .footer-fixed .footerLink{     display: inline-flex !important;     align-items: center !important;     justify-content: center !important;     font-size: 0 !important;     line-height: 0 !important;     padding-top: 0 !important;     padding-bottom: 0 !important;   }    .footer-fixed .footerLink::before{     display: block;     margin: 0 auto;   } }  @media (max-width: 767px){   .overview-logo{     width: min(720px, 92vw);     transform: translateY(-34px);     margin-bottom: 6px;   }    .overview-watermark{     top: 56%;     height: 96px;     opacity: 0.12;   }    .overview-bottom{     bottom: calc(var(--footerH) + 64px);     padding-left: 16px;     padding-right: 16px;   }    .overview-copy{     font-size: 12px;     line-height: 1.55;     max-width: 520px;   }    .overview-cta{     gap: 8px;   }    .overview-cta .btn{     padding: 12px 16px;     border-radius: 14px;     font-size: 11px;   }    .scroll-hint{     bottom: calc(var(--footerH) + 10px);   }    .scroll-hint .chip{     padding: 9px 12px;     font-size: 10px;   } }  @media (max-width: 767px){   .overview-logo{     transform: translateY(-20px) !important;   }    .overview-bottom{     bottom: calc(var(--footerH) + 38px) !important;   }    .scroll-hint{     bottom: calc(var(--footerH) + 8px) !important;   } }  @media (max-width: 767px){   .hero-slide[data-index="2"]{     align-items: flex-start;   }    .hero-slide[data-index="2"] .gallery-wrap{     margin-top: 12px;     padding-left: 16px;     padding-right: 16px;   }    .gallery-titleRow{     margin-bottom: 12px;   }    .gallery-title{     font-size: 14px;     letter-spacing: 0.22em;   }    .gallery-qhd{     grid-template-columns: 1fr;     gap: 14px;     max-height: none;   }    .gq-card{     aspect-ratio: 16 / 9;     border-radius: 16px;   }    .scroll-hint{     bottom: calc(var(--footerH) + 12px);   } }  @media (max-width: 767px){   .hero-slide[data-index="3"]{     align-items: flex-start;   }    .roadmap-wrap{     padding-left: 16px;     padding-right: 16px;     margin-top: 12px;   }    .roadmap-grid{     gap: 14px;     margin-top: 14px;   }    .roadmap-card{     padding: 18px 18px;     border-radius: 16px;   }    .roadmap-phase{     font-size: 12px;     letter-spacing: 0.20em;     margin-bottom: 8px;   }    .roadmap-date{     font-size: 9px;     letter-spacing: 0.22em;   }    .roadmap-card p{     font-size: 13px;     line-height: 1.5;   }    .scroll-hint{     bottom: calc(var(--footerH) + 12px);   } }  @media (max-width: 900px){   .playtest-grid{     grid-template-columns: 1fr;     gap: 14px;   }    .playtest-robot{     max-height: 240px;     width: min(300px, 86%);   } }  @media (max-width: 767px){   .hero-slide[data-index="4"]{     align-items: flex-start;   }    .playtest-wrap{     padding-left: 16px;     padding-right: 16px;     margin-top: 12px;   }    .playtest-grid{     gap: 12px;   }    .playtest-robotPanel{     min-height: 170px;   }    .playtest-robot{     max-height: 160px;     width: min(240px, 78%);   }    .playtest-formPanel{     padding: 14px;     border-radius: 16px;   }    .playtest-heading{     font-size: 22px;   }    .playtest-copy{     font-size: 13px;   }    .playtest-prizeVisual{     height: 72px;     width: 122px;     margin-top: 8px;   }    .playtest-chest{     width: 76px;   }    .playtest-ticket{     left: 52px;     top: 2px;     width: 68px;   }    .playtest-prizeVisual::after{     left: 10px;     bottom: 24px;     width: 64px;     height: 32px;   }    .playtest-form{     margin-top: 12px;     gap: 6px;   }    .playtest-form input[type="text"],   .playtest-form input[type="email"],   .playtest-form select,   .playtest-form textarea{     padding: 10px 11px;     font-size: 13px;     border-radius: 11px;   }    .playtest-platformFixed{     padding: 10px 11px;     font-size: 13px;     border-radius: 11px;   }    .playtest-consent{     font-size: 12px;     line-height: 1.4;   }    .playtest-form .btn{     width: 100%;     min-width: 0;   } }  .hero-slide{   transition:     opacity 360ms cubic-bezier(.2,.9,.2,1),     transform 420ms cubic-bezier(.2,.9,.2,1); }  .hero-slide[data-index="0"]{ transform: translateY(10px) scale(0.995); } .hero-slide[data-index="0"].active{ transform: translateY(0px) scale(1); }  .hero-slide[data-index="2"]{ transform: translateY(12px) scale(0.99); } .hero-slide[data-index="2"].active{ transform: translateY(0px) scale(1); }  .hero-slide[data-index="3"]{ transform: translateY(14px) scale(0.99); } .hero-slide[data-index="3"].active{ transform: translateY(0px) scale(1); } .hero-slide[data-index="4"]{ transform: translateY(14px) scale(0.99); } .hero-slide[data-index="4"].active{ transform: translateY(0px) scale(1); }  @keyframes oriontisFadeUp{   0%{ opacity: 0; transform: translateY(10px); }   100%{ opacity: 1; transform: translateY(0px); } }  .hero-slide.active .overview-copy{   animation: oriontisFadeUp 420ms cubic-bezier(.2,.9,.2,1) both;   animation-delay: 40ms; }  .hero-slide.active .overview-cta{   animation: oriontisFadeUp 460ms cubic-bezier(.2,.9,.2,1) both;   animation-delay: 90ms; }  .hero-slide[data-index="2"].active .gallery-titleRow{   animation: oriontisFadeUp 420ms cubic-bezier(.2,.9,.2,1) both;   animation-delay: 40ms; }  .hero-slide[data-index="2"].active .gallery-qhd{   animation: oriontisFadeUp 520ms cubic-bezier(.2,.9,.2,1) both;   animation-delay: 90ms; }  .hero-slide[data-index="3"].active .gallery-titleRow{   animation: oriontisFadeUp 420ms cubic-bezier(.2,.9,.2,1) both;   animation-delay: 40ms; }  .hero-slide[data-index="3"].active .roadmap-grid{   animation: oriontisFadeUp 560ms cubic-bezier(.2,.9,.2,1) both;   animation-delay: 90ms; }  .hero-slide[data-index="4"].active .gallery-titleRow{   animation: oriontisFadeUp 420ms cubic-bezier(.2,.9,.2,1) both;   animation-delay: 40ms; }  .hero-slide[data-index="4"].active .playtest-grid{   animation: oriontisFadeUp 560ms cubic-bezier(.2,.9,.2,1) both;   animation-delay: 90ms; }  .hero-bg{   transition: transform 650ms cubic-bezier(.2,.9,.2,1); }  body.s0 .hero-bg{ transform: scale(1.03) translate3d(0px, 0px, 0); } body.s1 .hero-bg{ transform: scale(1.04) translate3d(0px, -6px, 0); } body.s2 .hero-bg{ transform: scale(1.05) translate3d(0px, -10px, 0); } body.s3 .hero-bg{ transform: scale(1.05) translate3d(0px, -12px, 0); } body.s4 .hero-bg{ transform: scale(1.05) translate3d(0px, -10px, 0); }  .scroll-hint .chip{   transition: box-shadow 220ms ease, border-color 220ms ease, transform 160ms ease, opacity 160ms ease; }  body.s2 .scroll-hint .chip{   border-color: rgba(110,243,214,0.20);   box-shadow: 0 0 26px rgba(110,243,214,0.10); }  body.s3 .scroll-hint .chip{   border-color: rgba(255,211,110,0.22);   box-shadow: 0 0 26px rgba(255,211,110,0.10); }  @media (prefers-reduced-motion: reduce){   .hero-slide,   .hero-bg,   .scroll-hint .chip{     transition: none !important;     animation: none !important;   } }  @media (max-width: 1024px){   .hero-rail{     display: none !important;   }    .overview-tagline{     transform: translateY(22px) !important;   } }  @media (max-width: 900px){   .overview-tagline{     transform: translateY(26px) !important;   } }  @media (max-width: 767px){   *, *::before, *::after{     animation: none !important;     transition: none !important;     scroll-behavior: auto !important;   }    .header-solid::before{     animation: oriontisBlueFlow 12s linear infinite !important;   }    .header-solid::after{     animation: oriontisSolarFlow 8.5s linear infinite !important;   }    .hero-bg,   .hero-overlay,   .hero-aurora-a,   .hero-aurora-b{     animation: none !important;     transform: none !important;   }    .hero-slide{     transition: none !important;     transform: none !important;   }    .hero-slide.leaving{     opacity: 0 !important;     transform: none !important;   }    .hero-slide.active .overview-copy,   .hero-slide.active .overview-cta,   .hero-slide[data-index="2"].active .gallery-titleRow,   .hero-slide[data-index="2"].active .gallery-qhd,   .hero-slide[data-index="3"].active .gallery-titleRow,   .hero-slide[data-index="3"].active .roadmap-grid,   .hero-slide[data-index="4"].active .gallery-titleRow,   .hero-slide[data-index="4"].active .playtest-grid{     animation: none !important;   } }  @media (max-width: 767px){   header .max-w-7xl{     flex-wrap: wrap;     justify-content: space-between;     gap: 10px;     padding-top: 10px !important;     padding-bottom: 10px !important;   }    .brand-subtitle{     display: none;   }    .lang-switch{     order: 3;     width: 100%;     display: flex;     justify-content: center;     gap: 8px;     margin-top: 2px;   }    .hero-slide[data-index="2"]{     align-items: flex-start;   }    .hero-slide[data-index="2"] .gallery-wrap{     margin-top: 10px;     padding-left: 16px;     padding-right: 16px;   }    .hero-slide[data-index="2"] .gallery-qhd{     grid-template-columns: 1fr;     grid-template-rows: repeat(3, minmax(0, 1fr));     gap: 12px;     max-height: calc(var(--stageH) - 64px);     align-content: stretch;   }    .hero-slide[data-index="2"] .gq-card{     aspect-ratio: auto;     height: 100%;     border-radius: 16px;   }    .hero-slide[data-index="2"] .gq-card img{     width: 100%;     height: 100%;     object-fit: cover;   }    .scroll-hint{     opacity: 0;     pointer-events: none;   } }
/* Playtest fit tuning (no internal scroll) */
.playtest-grid {
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
}

.playtest-robotPanel,
.playtest-formPanel {
  min-height: 0;
}

.playtest-formPanel {
  overflow: hidden;
}

.playtest-form {
  margin-top: 14px;
  gap: 6px;
}

.playtest-label {
  margin-top: 4px;
  font-size: 10px;
}

.playtest-copy {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.playtest-copy-mini {
  font-size: 11px;
}

.playtest-prizeVisual {
  margin-top: 8px;
  height: 82px;
  width: 136px;
}

.playtest-chest {
  width: 88px;
}

.playtest-ticket {
  width: 78px;
  left: 58px;
}

.playtest-form input[type="text"],
.playtest-form input[type="email"],
.playtest-form select,
.playtest-form textarea,
.playtest-platformFixed {
  padding: 10px 11px;
  font-size: 13px;
}

.playtest-consent {
  margin-top: 6px;
  font-size: 12px;
}

.playtest-form .btn {
  margin-top: 6px;
}

/* Desktop/laptop (including MacBook): wide but short height */
@media (min-width: 1101px) and (max-height: 980px) {
  .hero-slide[data-index="4"] {
    align-items: flex-start;
  }

  .playtest-wrap {
    padding-top: 4px;
  }

  .playtest-grid {
    transform: scale(0.9);
    transform-origin: top center;
    width: 111.2%;
    margin-left: -5.6%;
  }

  .playtest-robot {
    max-height: calc(var(--stageH) - 300px);
  }

  .playtest-prizeVisual {
    height: 72px;
    width: 120px;
  }

  .playtest-chest {
    width: 78px;
  }

  .playtest-ticket {
    width: 66px;
    left: 50px;
  }
}

@media (min-width: 1101px) and (max-height: 900px) {
  .playtest-grid {
    transform: scale(0.84);
    width: 119.05%;
    margin-left: -9.525%;
  }

  .playtest-prizeVisual {
    display: none;
  }

  .playtest-form {
    margin-top: 10px;
    gap: 5px;
  }

  .playtest-form input[type="text"],
  .playtest-form input[type="email"],
  .playtest-form select,
  .playtest-form textarea,
  .playtest-platformFixed {
    padding: 9px 10px;
    font-size: 12px;
  }

  #ptNotes {
    min-height: 64px;
    max-height: 78px;
  }
}

@media (max-width: 1100px) {
  .playtest-grid {
    grid-template-columns: 1fr;
    transform: none;
    width: 100%;
    margin-left: 0;
  }

  .playtest-formPanel {
    overflow: visible;
  }
}

/* Mobile fit for playtest verification block */
@media (max-width: 767px) {
  .playtest-prizeVisual {
    display: none;
  }

  .playtest-form {
    margin-top: 10px;
    gap: 4px;
  }

  .playtest-label {
    margin-top: 3px;
    font-size: 10px;
  }

  .playtest-form input[type="text"],
  .playtest-form input[type="email"],
  .playtest-form select,
  .playtest-form textarea,
  .playtest-platformFixed {
    padding: 9px 10px;
    font-size: 12px;
    border-radius: 10px;
  }

  #ptNotes {
    min-height: 68px;
    max-height: 84px;
  }

  .playtest-consent {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.35;
  }

  #ptHumanPrompt {
    margin: 3px 0 1px 0 !important;
    font-size: 11px;
    line-height: 1.2;
  }

  .playtest-form .btn {
    margin-top: 6px;
    width: 100%;
    min-width: 0;
    padding: 10px 14px;
    font-size: 11px;
  }
}

/* Trailer wheel layer: keeps wheel-nav working and allows click-to-play */
.trailer-wheel-layer {
  cursor: pointer;
}

/* Trailer custom controls above wheel layer */
.trailer-controls{
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(7,10,20,0.72);
  backdrop-filter: blur(8px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.trailer-controls.is-hidden{
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.trailer-ctl-btn{
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,243,230,0.94);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.trailer-ctl-btn:hover{
  border-color: rgba(255,211,110,0.44);
}
.trailer-ctl-volume-wrap{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,243,230,0.9);
  font-size: 12px;
  font-weight: 700;
}
.trailer-ctl-volume-wrap input[type="range"]{
  width: 140px;
}
@media (max-width: 767px){
  .trailer-controls{
    left: 8px;
    right: 8px;
    bottom: 8px;
    padding: 7px 8px;
    gap: 6px;
  }
  .trailer-ctl-btn{
    padding: 6px 10px;
    font-size: 11px;
  }
  .trailer-ctl-volume-wrap input[type="range"]{
    width: 90px;
  }
}

/* Mobile: ensure Playtest section is fully reachable */
@media (max-width: 767px) {
  .hero-slide[data-index="4"] {
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .playtest-wrap {
    margin-top: 8px;
  }

  .playtest-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .playtest-robotPanel {
    display: none;
  }

  .playtest-formPanel {
    overflow: visible;
    max-height: none;
    padding: 12px;
    border-radius: 14px;
  }

  .playtest-heading {
    font-size: 20px;
    line-height: 1.15;
  }

  .playtest-copy {
    font-size: 12px;
    line-height: 1.35;
  }

  .playtest-label[data-i18n="playtest.platformLabel"],
  .playtest-platformFixed {
    display: none !important;
  }
}

/* Nav: imperial gold + blue, no hard-reset animation */
.header-solid {
  background: #2a3043;
}

.header-solid::before {
  inset: -36px -240px !important;
  width: calc(100% + 480px) !important;
  height: calc(100% + 72px) !important;
  background-image:
    linear-gradient(
      90deg,
      #2a3043 0%,
      #33425f 10%,
      #6e6d6c 22%,
      #d9b271 33%,
      #cebca5 39%,
      #d9b271 46%,
      #6e6d6c 64%,
      #33425f 84%,
      #2a3043 100%
    ),
    linear-gradient(
      90deg,
      rgba(46, 65, 103, 0.14) 0%,
      rgba(217, 178, 113, 0.18) 50%,
      rgba(46, 65, 103, 0.14) 100%
    ) !important;
  background-size: 170% 100%, 190% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 41% 50%, 46% 50% !important;
  filter: blur(0.35px) saturate(1.12) brightness(1.03) !important;
  opacity: 0.94 !important;
  will-change: transform, background-position, filter;
  transform: translateX(-3%);
  animation: navImperialBreath 3.8s ease-in-out infinite alternate !important;
}

.header-solid::after {
  inset: -36px -240px !important;
  width: calc(100% + 480px) !important;
  height: calc(100% + 72px) !important;
  background-image:
    radial-gradient(360px 160px at 26% 50%, rgba(217, 178, 113, 0.26), rgba(217, 178, 113, 0) 72%),
    radial-gradient(360px 170px at 74% 50%, rgba(72, 96, 148, 0.2), rgba(72, 96, 148, 0) 74%) !important;
  background-size: 140% 100%, 136% 100% !important;
  background-repeat: no-repeat !important;
  background-position: 38% 50%, 58% 50% !important;
  mix-blend-mode: screen;
  opacity: 0.7 !important;
  will-change: transform, background-position, opacity;
  transform: translateX(3%);
  animation: navImperialSheen 4.6s ease-in-out infinite alternate !important;
}

@keyframes navImperialBreath {
  from {
    transform: translateX(-4%);
    background-position: 34% 50%, 40% 50%;
    filter: blur(0.28px) saturate(1.05) brightness(0.99);
  }
  to {
    transform: translateX(4%);
    background-position: 54% 50%, 58% 50%;
    filter: blur(0.45px) saturate(1.2) brightness(1.06);
  }
}

@keyframes navImperialSheen {
  from {
    transform: translateX(4%);
    background-position: 30% 50%, 64% 50%;
    opacity: 0.52;
  }
  to {
    transform: translateX(-4%);
    background-position: 56% 50%, 42% 50%;
    opacity: 0.78;
  }
}

/* Playtest: short robot intro animation on section entry */
@keyframes playtestRobotIntroIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.9) rotate(-3deg);
    filter:
      drop-shadow(0 14px 32px rgba(0,0,0,0.4))
      drop-shadow(0 0 10px rgba(255,192,110,0.08));
  }
  55% {
    opacity: 1;
    transform: translateY(-6px) scale(1.03) rotate(1.5deg);
    filter:
      drop-shadow(0 28px 54px rgba(0,0,0,0.62))
      drop-shadow(0 0 18px rgba(255,192,110,0.16));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter:
      drop-shadow(0 22px 46px rgba(0,0,0,0.58))
      drop-shadow(0 0 20px rgba(255,192,110,0.12));
  }
}

@keyframes playtestRobotNod {
  0% { transform: translateY(0) scale(1) rotate(0deg); }
  35% { transform: translateY(-1px) scale(1.005) rotate(1.3deg); }
  70% { transform: translateY(0) scale(1) rotate(-0.8deg); }
  100% { transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes playtestRobotHops {
  0%   { transform: translateX(0) translateY(0) scale(1) rotate(0deg); }
  18%  { transform: translateX(10px) translateY(-11px) scale(1.015) rotate(1.8deg); }
  34%  { transform: translateX(14px) translateY(0) scale(1) rotate(0deg); }
  52%  { transform: translateX(19px) translateY(-8px) scale(1.01) rotate(1.2deg); }
  70%  { transform: translateX(24px) translateY(0) scale(1) rotate(0deg); }
  86%  { transform: translateX(28px) translateY(-4px) scale(1.005) rotate(0.7deg); }
  100% { transform: translateX(30px) translateY(0) scale(1) rotate(0deg); }
}

@keyframes playtestRobotHopsVertical {
  0%   { transform: translateX(0) translateY(0) scale(1) rotate(0deg); }
  20%  { transform: translateX(0) translateY(-12px) scale(1.014) rotate(0.4deg); }
  38%  { transform: translateX(0) translateY(0) scale(1) rotate(0deg); }
  56%  { transform: translateX(0) translateY(-9px) scale(1.01) rotate(-0.3deg); }
  74%  { transform: translateX(0) translateY(0) scale(1) rotate(0deg); }
  88%  { transform: translateX(0) translateY(-5px) scale(1.005) rotate(0.2deg); }
  100% { transform: translateX(0) translateY(0) scale(1) rotate(0deg); }
}

.hero-slide[data-index="4"].active .playtest-robot{
  will-change: transform, opacity, filter;
  animation:
    playtestRobotIntroIn 360ms cubic-bezier(.2,.9,.2,1) both,
    playtestRobotNod 260ms ease-in-out 360ms 1 both;
}

/* Playtest robot without panel box */
.playtest-robotPanel{
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 8px 0 0 !important;
}

.playtest-robotPanel::before{
  content: none !important;
  display: none !important;
}

.playtest-robot{
  width: min(430px, 100%) !important;
  transform: translateY(6px);
}

/* Global robot CTA: over background, under footer */
.playtest-robotPanel{
  display: none !important;
}

.oriontis-robotCta{
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(var(--footerH) - 20px);
  z-index: 44;
  width: clamp(120px, 18vw, 280px);
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.96;
  transform: translateZ(0);
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
}

.oriontis-robotCta::before{
  content: "";
  position: absolute;
  inset: auto 8% -4% 8%;
  height: 26%;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 208, 118, 0.44), rgba(255, 208, 118, 0) 72%);
  filter: blur(12px);
  opacity: 0.72;
  pointer-events: none;
  transition: opacity 220ms ease, filter 220ms ease;
}

.oriontis-robotCta:hover,
.oriontis-robotCta:focus-visible{
  transform: translateY(-4px) scale(1.03);
  filter:
    drop-shadow(0 24px 52px rgba(0,0,0,0.62))
    drop-shadow(0 0 18px rgba(255,208,118,0.30));
  opacity: 1;
  outline: none;
}

.oriontis-robotCta:hover::before,
.oriontis-robotCta:focus-visible::before{
  opacity: 1;
  filter: blur(14px);
}

.oriontis-robotCta-img{
  width: 100%;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 20px 46px rgba(0,0,0,0.58))
    drop-shadow(0 0 20px rgba(255,192,110,0.12));
}

/* Trailer: robot remains visible but darker */
body.mode-trailer .oriontis-robotCta{
  filter: brightness(0.5) saturate(0.7);
  opacity: 0.82;
}

/* Playtest: move robot to the left side of the form and replay intro animation */
body.mode-playtest .oriontis-robotCta{
  right: auto;
  left: calc(50% - min(560px, 44vw));
  bottom: calc(var(--footerH) + 10px);
  width: clamp(140px, 20vw, 300px);
}

body.mode-playtest .oriontis-robotCta.playtest-entry .oriontis-robotCta-img{
  animation:
    playtestRobotIntroIn 360ms cubic-bezier(.2,.9,.2,1) both,
    playtestRobotNod 260ms ease-in-out 360ms 1 both,
    playtestRobotHops 520ms cubic-bezier(.22,.92,.24,1) 640ms 1 both;
}

.oriontis-robotCta.robot-click-hop .oriontis-robotCta-img{
  animation: playtestRobotHops 520ms cubic-bezier(.22,.92,.24,1) 1 both;
}

.oriontis-robotCta.robot-click-hop-vertical .oriontis-robotCta-img{
  animation: playtestRobotHopsVertical 520ms cubic-bezier(.22,.92,.24,1) 1 both;
}

@media (max-width: 1100px){
  body.mode-playtest .oriontis-robotCta{
    right: max(12px, env(safe-area-inset-right));
    left: auto;
    bottom: calc(var(--footerH) - 16px);
    width: clamp(110px, 24vw, 220px);
  }
}

@media (max-width: 767px){
  .oriontis-robotCta{
    display: none !important;
  }
}

/* Playtest robot layering and placement fix */
.playtest-formPanel{
  position: relative;
  z-index: 46;
}

body.mode-playtest .oriontis-robotCta{
  right: auto;
  left: clamp(8px, calc(50% - 780px), 220px);
  bottom: calc(var(--footerH) + 10px);
  width: clamp(130px, 14.5vw, 230px);
}

/* Keep Playtest form centered after removing internal robot panel */
.playtest-grid{
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
}

.playtest-formPanel{
  width: min(100%, 760px);
  margin-inline: auto;
}

/* News section */
.news-wrap{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 82px;
  padding-right: 22px;
}

@media (max-width: 1024px){
  .news-wrap{ padding-left: 0; }
}

.news-grid{
  display: grid;
  grid-template-columns: minmax(320px, 1fr);
  gap: 20px;
  align-items: stretch;
  justify-items: center;
}

.news-panel{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(640px 340px at 80% 8%, rgba(255,205,128,0.12), transparent 64%),
    radial-gradient(540px 280px at 10% 100%, rgba(120,86,62,0.12), transparent 68%),
    linear-gradient(180deg, rgba(29,30,37,0.90), rgba(18,17,22,0.92));
  box-shadow:
    0 28px 90px rgba(0,0,0,0.55),
    0 10px 26px rgba(0,0,0,0.35);
  padding: 20px;
  min-height: 460px;
  width: min(100%, 860px);
}

.news-heading{
  margin: 0;
  font-family: "Cormorant SC", serif;
  letter-spacing: 0.08em;
  font-size: 28px;
  line-height: 1.1;
  color: rgba(255,226,174,0.95);
  text-shadow: 0 8px 30px rgba(0,0,0,0.55);
}

.news-copy{
  margin: 10px 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,243,230,0.74);
}

.news-feed{
  border-radius: 14px;
  overflow: hidden;
  min-height: 352px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,12,20,0.45);
}

.news-feed .twitter-timeline{
  width: 100% !important;
}

.news-fallback{
  margin: 14px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(7,10,20,0.42);
  color: rgba(255,243,230,0.78);
  font-size: 13px;
}

.news-fallback a{
  color: rgba(255,211,110,0.95);
  text-decoration: none;
}

@media (max-width: 1100px){
  .news-grid{
    grid-template-columns: 1fr;
  }

  .news-panel{
    min-height: 0;
  }
}

@media (max-width: 767px){
  .hero-slide[data-index="5"]{
    align-items: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }

  .news-wrap{
    margin-top: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .news-panel{
    border-radius: 16px;
    padding: 14px;
  }

  .news-heading{
    font-size: 22px;
  }

  .news-copy{
    font-size: 13px;
    margin: 8px 0 10px;
  }
}

/* Unify Playtest + News containers with Roadmap card style */
.playtest-formPanel,
.news-panel{
  border-radius: 18px !important;
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.55),
    0 10px 26px rgba(0,0,0,0.35) !important;
  transition: transform 220ms ease, border-color 220ms ease;
}

.playtest-formPanel:hover,
.news-panel:hover{
  transform: translateY(-2px);
  border-color: rgba(255,211,110,0.28) !important;
}

/* In Playtest, keep left rail above floating robot */
body.mode-playtest .hero-rail{
  z-index: 70;
}

/* Header spacing + brand readability (desktop) */
@media (min-width: 1100px){
  .header-solid .max-w-7xl{
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    max-width: 1560px;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 14px !important;
  }

  .header-solid #homeBtn{
    margin-right: 18px;
    flex: 0 0 auto;
  }

  .header-solid nav{
    justify-self: center;
    width: 100%;
    justify-content: center;
    gap: 16px !important;
  }

  .header-solid .chip{
    padding: 9px 12px;
    font-size: 10px;
  }

  .header-solid .langSwitch{
    gap: 6px;
  }

  .brand-subtitle{
    white-space: nowrap;
    letter-spacing: 0.24em;
    font-size: 11px;
    opacity: 0.9;
  }
}