:root{--bg:#141414;--fg:#ffffff;--mut:rgba(255,255,255,.72);--ac:#ff552e;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141414;--fg:#ffffff;--mut:rgba(255,255,255,.72);--ac:#ff552e}}
:root[data-theme="dark"]{--bg:#141414;--fg:#ffffff;--mut:rgba(255,255,255,.72);--ac:#ff552e}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif}
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:#141414 url('../img/bg.jpg') center/cover no-repeat}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%)}
.stage>*{position:absolute}
#hdr{top:0;right:0;padding:18px 24px;font-size:12px;letter-spacing:.2em;color:var(--mut)}
#hdr a,#hint{color:inherit;text-decoration:none}
#hint{bottom:4vh;left:50%;font-size:11px;letter-spacing:.35em;color:var(--mut)}
#title{left:50%;top:50%;width:90%;text-align:center}
#title h1{margin:0;font-weight:500;letter-spacing:.38em;font-size:clamp(20px,3.6vw,48px);padding-left:.38em}
#title p{margin:14px 0 0;font-weight:300;letter-spacing:.3em;font-size:clamp(10px,1vw,13px);color:var(--ac)}
.txt{left:8vw;top:50%;margin:0;max-width:min(27ch,36vw);font-size:clamp(18px,2.1vw,30px);font-weight:300;line-height:1.35}
.txt b{color:var(--ac);font-weight:500}
#t2{left:50%;right:auto;top:17%;width:min(52ch,82vw);max-width:none;text-align:center}
#grid{left:50%;top:62%;width:min(66vw,1000px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,16px)}
#grid a{display:block;line-height:0}
#grid a[href]{cursor:pointer}
#grid img{width:100%;display:block;border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
#web{left:calc(50% + 24vw);top:50%;height:min(76vh,760px);aspect-ratio:2/3;border-radius:10px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
#web img{width:100%;height:100%;object-fit:cover;display:block}
#logos{left:calc(50% + 22vw);top:50%;width:min(34vw,62vh,500px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,14px)}
#logos img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
#phone{left:calc(50% + 12vw);top:calc(50% + 8vh);height:min(60vh,560px,88vw);aspect-ratio:2004/4118}
#phone .fr{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.scr{position:absolute;left:5.09%;top:3.11%;width:89.97%;height:93.5%;overflow:hidden;background:#fff;z-index:1}
.scr>img{width:100%;height:100%;object-fit:cover;display:block}
#pl{position:absolute;left:50%;top:50%;width:213.5%;height:46.83%;transform:translate(-50%,-50%) rotate(90deg);object-fit:cover;opacity:0}
#end{left:50%;top:46%;width:88%;text-align:center}
#end h2{margin:0 0 28px;font-weight:300;font-size:clamp(24px,3.4vw,46px);line-height:1.25}
#end h2 b{color:var(--ac);font-weight:500}
.btn{display:inline-block;padding:13px 30px;border:1px solid var(--fg);color:var(--fg);text-decoration:none;font-size:12px;letter-spacing:.22em;transition:background .2s,border-color .2s}
.btn:hover,.btn:focus-visible{background:var(--ac);border-color:var(--ac);outline:none}
#social{left:50%;bottom:6vh;display:flex;gap:26px}
#social a{color:var(--ac);display:block;width:24px;height:24px;transition:color .2s}
#social a[href]:hover,#social a[href]:focus-visible{color:var(--fg);outline:none}
#social svg{width:100%;height:100%;display:block}
@media (max-width:800px){
 .txt{left:6vw;right:6vw;top:15%;max-width:none;text-align:center;font-size:clamp(16px,4.6vw,24px)}
 #t2{top:14%}
 #grid{left:50%;top:47%;width:86vw;grid-template-columns:repeat(2,1fr)}
 #web{left:50%;top:60%;height:50vh}
 #logos{left:50%;top:60%;width:min(78vw,48vh)}
 #phone{left:50%;top:70%;height:min(40vh,88vw)}
}