/* OGM / The Future Is Built — cinematic experience */
:root{--cinema:#03080b;--signal:#a7fbd5}
html{scroll-padding-top:85px}
body{background:var(--cinema)}
header{background:#03080bca!important;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid #ffffff13}
.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;background:radial-gradient(ellipse 65% 70% at 74% 47%,#0c2832 0%,#061118 50%,#03080b 100%);padding:105px 0 70px!important}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#03080b88,transparent 65%),radial-gradient(circle at 78% 50%,transparent 20%,#03080b99 85%);z-index:0}
.hero>.wrap{position:relative;z-index:2;width:100%}
.hero-grid{align-items:center;min-height:70vh}
.hero h1{font-size:clamp(62px,8.2vw,134px)!important;line-height:.96!important;letter-spacing:-.075em!important;max-width:780px}
.hero h1 em{font-style:normal;background:linear-gradient(110deg,#fff 15%,#91eacb 55%,#8bafd6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:clamp(15px,1.25vw,19px)!important;max-width:510px;line-height:1.75!important}
.hero .blueprint{background:none!important;border:0!important;box-shadow:none!important;min-height:480px;overflow:visible}
.hero .blueprint>*{display:none!important}
.cosmos{position:absolute;inset:-15%;display:block!important;pointer-events:none;perspective:900px}
.cosmos .halo{position:absolute;left:50%;top:50%;width:min(42vw,550px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 28%,#d3ffeb 0%,#80d7c3 6%,#276a76 18%,#0b2838 38%,#06121e 62%,#02080e 76%);box-shadow:inset -25px -25px 55px #000b,inset 9px 10px 30px #ccfff72b,0 0 95px #62d5bb30,0 0 240px #4d9dc51a;filter:drop-shadow(0 0 50px #60d5b322);animation:halo-breathe 9s ease-in-out infinite}
.cosmos .halo:after{content:'';position:absolute;inset:-13%;border-radius:50%;border:1px solid #98f6d223;box-shadow:0 0 60px #5fc6a814;transform:rotateX(65deg) rotate(-30deg)}
.cosmos .ring{position:absolute;left:50%;top:50%;width:min(53vw,690px);aspect-ratio:1;border:1px solid #80d6c633;border-radius:50%;transform:translate(-50%,-50%) rotateX(66deg) rotate(-24deg);box-shadow:0 0 28px #9affd113,inset 0 0 30px #9affd10a}
.cosmos .ring.r2{width:min(65vw,850px);transform:translate(-50%,-50%) rotateY(64deg) rotate(24deg);border-color:#99c7ff24}
.cosmos .ring.r3{width:min(46vw,610px);transform:translate(-50%,-50%) rotateX(35deg) rotate(67deg);border-color:#b8ffdd26}
.cosmos .particle{position:absolute;width:3px;height:3px;border-radius:50%;background:#c3fff0;box-shadow:0 0 16px #adffdf;opacity:.8}
.cosmos .particle:nth-child(5){top:23%;left:27%}.cosmos .particle:nth-child(6){top:75%;left:76%}.cosmos .particle:nth-child(7){top:43%;left:91%}.cosmos .particle:nth-child(8){top:67%;left:16%}
@keyframes halo-breathe{50%{filter:drop-shadow(0 0 75px #60d5b33c);transform:translate(-50%,-51.5%) scale(1.025)}}
.cinema-kicker{display:inline-flex;align-items:center;gap:12px;font:10px/1.4 monospace;letter-spacing:.25em;color:#b3d8d1;margin-bottom:26px}
.cinema-kicker:before{content:'';width:26px;height:1px;background:#9bffdc}
.cinema-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font:10px monospace;letter-spacing:.2em;color:#9bc1bb;z-index:3}
.cinema-scroll:after{content:' ↓';color:#b7ffdf}
.cinema-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:100;background:#a7fbd5;transform:scaleX(0);transform-origin:left;pointer-events:none}
.cinema-story{position:relative;background:#03080b;color:#f3faf8}
.cinema-sticky{height:330vh;position:relative}
.cinema-frame{position:sticky;top:0;height:100svh;min-height:580px;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.cinema-frame:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 52%,#153744 0%,#081922 36%,#03080b 75%)}
.cinema-grid{position:absolute;inset:-40%;opacity:.22;background-image:linear-gradient(#90f9df24 1px,transparent 1px),linear-gradient(90deg,#90f9df24 1px,transparent 1px);background-size:80px 80px;transform:perspective(600px) rotateX(62deg) scale(1.5);mask-image:linear-gradient(transparent 10%,black 70%)}
.cinema-content{position:relative;z-index:3;text-align:center;padding:24px;width:min(100%,1100px)}
.cinema-eyebrow{font:11px monospace;letter-spacing:.28em;color:#91dcbf;margin-bottom:25px}
.cinema-content h2{font-size:clamp(42px,7.5vw,108px);line-height:1.02;letter-spacing:-.075em;margin:0 auto;max-width:1000px}
.cinema-content p{font-size:clamp(15px,1.45vw,21px);line-height:1.65;color:#b5c6c9;max-width:590px;margin:25px auto 0}
.cinema-orbit{position:absolute;left:50%;top:50%;width:660px;height:660px;border:1px solid #98e9d12b;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 100px #4bc1ab12}
.cinema-orbit:before,.cinema-orbit:after{content:'';position:absolute;inset:14%;border:1px solid #91bff12b;border-radius:50%}
.cinema-orbit:after{inset:31%;border-color:#91f5d544}
.cinema-panel{position:absolute;z-index:2;border:1px solid #b2e7d92b;background:#0b2029a8;backdrop-filter:blur(16px);border-radius:14px;padding:16px 19px;min-width:165px;box-shadow:0 20px 60px #0005;color:#d9fff1;font:11px monospace;letter-spacing:.04em}
.cinema-panel small{display:block;color:#87a5ac;font-size:9px;margin-top:9px}
.cinema-panel.one{top:23%;left:12%}.cinema-panel.two{top:21%;right:10%}.cinema-panel.three{bottom:18%;left:17%}.cinema-panel.four{bottom:20%;right:14%}
.cinema-frame[data-act="0"] .cinema-panel{opacity:.25}
.cinema-frame[data-act="1"] .cinema-panel{opacity:1}
.cinema-frame[data-act="2"] .cinema-panel{opacity:.45}
.cinema-content [data-story]{transition:opacity .65s ease,transform .65s ease;position:absolute;inset:auto 0;top:50%;transform:translateY(-42%);opacity:0;pointer-events:none}
.cinema-content [data-story].active{opacity:1;transform:translateY(-50%);pointer-events:auto}
.cinema-content{height:360px}
.cinema-story .story-end{padding:90px 24px;text-align:center;border-top:1px solid #ffffff13}
.cinema-story .story-end h3{font-size:clamp(30px,4vw,58px);letter-spacing:-.05em;line-height:1.1;margin:0 0 28px}
.cinema-story .story-end a{display:inline-flex}
.work,.services,.process,.contact{position:relative;z-index:1}
@media(max-width:900px){.hero .blueprint{min-height:340px}.cosmos .halo{width:330px}.cosmos .ring{width:410px}.cosmos .ring.r2{width:490px}.cosmos .ring.r3{width:340px}.cinema-panel{font-size:9px;min-width:110px;padding:12px}.cinema-panel.one{left:2%;top:15%}.cinema-panel.two{right:2%;top:16%}.cinema-panel.three{left:3%;bottom:12%}.cinema-panel.four{right:3%;bottom:12%}}
@media(max-width:650px){.hero{padding-top:110px!important}.hero h1{font-size:clamp(50px,13vw,72px)!important}.hero .blueprint{min-height:310px}.cosmos .halo{width:280px}.cosmos .ring{width:340px}.cosmos .ring.r2{width:390px}.cosmos .ring.r3{width:260px}.cinema-sticky{height:270vh}.cinema-frame{min-height:480px}.cinema-content{height:310px}.cinema-content h2{font-size:clamp(40px,11vw,64px)}.cinema-panel{opacity:.35!important;min-width:0;font-size:8px;padding:9px}.cinema-panel small{display:none}.cinema-panel.one{top:15%;left:4%}.cinema-panel.two{top:16%;right:4%}.cinema-panel.three{bottom:13%;left:4%}.cinema-panel.four{bottom:13%;right:4%}.cinema-orbit{width:430px;height:430px}}
@media(prefers-reduced-motion:reduce){.cosmos .halo{animation:none}.cinema-sticky{height:auto}.cinema-frame{height:auto;min-height:0;padding:80px 0}.cinema-content{height:auto}.cinema-content [data-story]{position:relative;top:auto;transform:none!important;opacity:1!important;margin-bottom:75px}.cinema-content [data-story]:last-child{margin-bottom:0}.cinema-panel{display:none}.cinema-scroll{display:none}}
