/* ARKHE · Cinematic physical-world layer. Real image-based art direction with functional controls kept intact. */
:root{--film-gold:#dfb783;--film-blue:#9acbf4;--film-teal:#8ff0d4}
body.arkhe-home{background:#06090b}
.atmosphere{background:radial-gradient(ellipse 48% 64% at 30% 28%,rgba(15,48,65,.34),transparent),radial-gradient(ellipse 43% 59% at 88% 77%,rgba(111,65,35,.15),transparent),#05090d}
.intro{border:1px solid rgba(186,205,217,.18);border-radius:20px;padding:clamp(18px,2.2vw,34px);background:#05090d;box-shadow:inset 0 1px 0 #ffffff2c,0 32px 85px #0009}
.intro::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(3,6,9,.92) 0%,rgba(3,6,9,.59) 49%,rgba(3,6,9,.10) 100%),linear-gradient(0deg,rgba(4,8,11,.8),transparent 36%);border-radius:inherit}
.cinematic-scene{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;isolation:isolate;background:#05080c}
.scene-room{position:absolute;inset:-2%;background-image:linear-gradient(165deg,rgba(4,7,11,.07),rgba(4,7,11,.38)),url('https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?auto=format&fit=crop&w=1600&q=85');background-position:center;background-size:cover;filter:saturate(.88) contrast(1.08);transform:scale(1.04);animation:sceneBreath 17s ease-in-out infinite alternate}
.scene-robot{position:absolute;right:-21%;top:2%;height:91%;width:91%;background:url('https://images.unsplash.com/photo-1737644467636-6b0053476bb2?auto=format&fit=crop&w=1250&q=85') center center/cover no-repeat;opacity:.78;filter:contrast(1.24) saturate(.89) drop-shadow(-24px 2px 40px #000);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 77%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 12%,#000 96%);mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 77%,transparent 100%);mix-blend-mode:screen}
.scene-light{position:absolute;width:76%;height:65%;right:-18%;bottom:-14%;border-radius:50%;background:radial-gradient(ellipse,rgba(61,182,215,.27),rgba(50,74,119,.12) 30%,transparent 67%);filter:blur(26px)}
.scene-beam{position:absolute;right:24%;top:-22%;height:127%;width:2px;transform:rotate(24deg);background:linear-gradient(180deg,transparent,rgba(187,225,233,.2),transparent);box-shadow:0 0 55px 20px #91bfe216}
.scene-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 78% 55%,transparent 0,transparent 24%,rgba(2,5,8,.25) 59%,rgba(2,5,8,.8) 100%)}
.scene-id{position:absolute;right:20px;bottom:19px;display:flex;align-items:center;gap:9px;color:#d0e7e7;font:600 9px var(--mono);letter-spacing:.16em;text-shadow:0 2px 12px #000;opacity:.8}
.scene-id i{height:1px;width:34px;background:var(--film-gold)}
.intro>.orb,.intro>.core-caption{display:none!important}
.intro-top{color:#e2d1b3;border-color:var(--film-gold);text-shadow:0 1px 12px #000}
.intro h1{max-width:100%;font-weight:800;letter-spacing:-.085em;text-shadow:0 8px 30px #000,0 0 45px #000}
.intro h1 .impact{background:linear-gradient(110deg,#fce8c2 0%,#dcb27e 36%,#9cdae0 73%,#ebfffa 100%);-webkit-background-clip:text;background-clip:text}
.intro h1 .impact::after{background:linear-gradient(90deg,var(--film-gold),var(--film-blue),transparent)}
.intro p{color:#e0e9e9;text-shadow:0 2px 12px #000}
.gold-cta{box-shadow:0 18px 42px -14px #dcb7887d, inset 0 1px 0 #fff7}
.intro-sequence{border-color:#a6c8c956}
.intro-sequence span{color:#f4f7f3;text-shadow:0 1px 9px #000}
.intro-sequence span small{color:#dfb783}
.intro-footer{color:#b2c5cb}
.workspace{border:1px solid #c2ddec57;border-radius:22px;background:#070e15;box-shadow:0 0 0 1px #c6e7fb10,0 20px 90px -18px #000,0 0 140px -80px #7295c9}
.workspace::before{height:2px;background:linear-gradient(90deg,transparent,#d7c2a0 21%,#e1f2ff 52%,#83c5cf 78%,transparent)}
.workspace-top{background:linear-gradient(110deg,#121d28,#090f18 60%,#222019)}
.workspace-controls{background:linear-gradient(90deg,#0c1721,#11141b)}
.demo-tab.active{border-color:#dfb78385!important;box-shadow:inset 0 1px 0 #ffffff19,0 0 17px #a28d6c26!important}
.workspace-window{background:#05080d}
.workspace-bottom{background:linear-gradient(110deg,#0e1925,#181711)}
@keyframes sceneBreath{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.095) translateY(-1%)}}
@media(min-width:851px){.intro{padding-right:clamp(15px,1.8vw,28px)}.intro h1{font-size:clamp(44px,5.9vw,109px)}.scene-robot{right:-35%;width:108%;opacity:.73}.scene-room{background-position:center left}}
@media(max-width:850px){
 body.arkhe-home{height:auto;min-height:100dvh;overflow-y:auto;display:block}
 .topbar{position:sticky;top:0;z-index:45}
 .stage{height:auto;min-height:0;display:flex;flex-direction:column;padding:12px;gap:13px}
 .intro{min-height:370px;padding:24px 20px;justify-content:center;border-radius:20px;background:#05090d}
 .intro::after{background:linear-gradient(90deg,rgba(3,6,9,.97),rgba(3,6,9,.71) 48%,rgba(3,6,9,.15)),linear-gradient(0deg,rgba(3,6,9,.67),transparent 60%)}
 .intro h1{font-size:clamp(44px,9.6vw,85px);margin:16px 0 0}
 .intro h1 .line,.intro h1 .impact{display:block;white-space:nowrap;margin-left:0}
 .intro p{display:block;font-size:12px;max-width:360px;margin-top:14px;line-height:1.65}
 .intro-actions{margin-top:18px}
 .intro-sequence{display:none}
 .scene-robot{width:72%;right:-27%;top:0;height:100%;opacity:.82}
 .scene-room{background-position:65% center}
 .workspace{height:min(850px,calc(100dvh - 94px));min-height:530px;flex:none;border-radius:17px}
 .workspace-window{min-height:380px}
 .bottomline{height:auto;min-height:38px;padding:10px 14px}
}
@media(max-width:550px){
 .stage{padding:9px;gap:9px}
 .intro{min-height:366px;padding:22px 17px}
 .intro-top{font-size:9px;letter-spacing:.11em}
 .intro h1{font-size:clamp(46px,12.4vw,67px);letter-spacing:-.092em}
 .intro p{max-width:235px;font-size:11px;line-height:1.57}
 .intro-actions{position:relative;flex-direction:column;align-items:flex-start;gap:4px}
 .gold-cta{min-height:39px;font-size:11px;padding:9px 14px}
 .quiet-cta{font-size:11px}
 .scene-robot{width:92%;right:-48%;top:6%;opacity:.87}
 .scene-room{background-position:68% 50%}
 .scene-id{font-size:7px;right:12px;bottom:9px}
 .workspace{height:640px;min-height:0}
 .workspace-controls{flex-wrap:nowrap}
 .workspace-window{min-height:415px}
}
@media(prefers-reduced-motion:reduce){.scene-room{animation:none}}


/* On phones, do not crush the immersive homepage into a tall stack of tiny demos.
   Keep one cinematic, full-viewport first impression and open the real demo via the CTA. */
@media(max-width:550px){
 body.arkhe-home{height:100dvh!important;min-height:0!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;overflow:hidden!important}
 .stage{height:100%!important;min-height:0!important;display:block!important;overflow:hidden!important;padding:8px!important}
 .intro{height:100%!important;min-height:0!important;display:flex!important;justify-content:center!important;padding:22px 17px!important}
 .workspace{display:none!important}
 .bottomline{height:auto!important;min-height:20px!important}
 .intro p{display:block!important}
 .intro h1{font-size:clamp(43px,12.1vw,64px)!important}
 .scene-robot{opacity:.72}
}
@media(max-width:550px) and (max-height:680px){
 .intro{padding:14px!important}
 .intro h1{font-size:clamp(40px,10.5vw,55px)!important;margin-top:9px!important}
 .intro p{margin-top:9px!important;font-size:10px!important}
 .intro-actions{margin-top:11px!important}
}