.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px clamp(20px,5vw,72px) 60px;position:relative}
h1{font-size:clamp(74px,19vw,300px);position:relative;z-index:2}
h1 span{display:block;animation:up 1.1s cubic-bezier(.2,.8,.2,1) both}
h1 span+span{animation-delay:.15s}
@keyframes up{from{transform:translateY(40%);opacity:0}}
#hs{position:absolute;right:clamp(10px,8vw,140px);top:50%;width:clamp(130px,28vw,440px);margin-top:calc(clamp(130px,28vw,440px)/-2);z-index:1}
.hero p{max-width:38ch;margin:40px 0 0;color:var(--mut);position:relative;z-index:2}
.hero .hint{display:none;margin-top:10px;font-size:15px}
@media (hover:hover) and (pointer:fine){.hero .hint{display:block}}
section{padding:clamp(70px,10vw,140px) 0}
.head{padding:0 clamp(20px,5vw,72px);margin-bottom:56px;display:flex;align-items:center;gap:18px}
.head h2{font-size:clamp(44px,7vw,96px)}
.head .sp{width:clamp(34px,5vw,64px);flex:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(34px,4.5vw,64px);padding:0 clamp(28px,6vw,84px)}
.card{position:relative;aspect-ratio:4/5;perspective:1200px;display:block;outline:none;z-index:1}
.card.on{z-index:70}
.lit{position:relative;z-index:70}
.flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.card.on .flip{transform:rotateX(var(--rx,0deg)) rotateY(calc(180deg + var(--ry,0deg))) scale(1.06)}
.f,.b{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;overflow:hidden}
.f{inset:0;background:radial-gradient(circle at 72% 28%,var(--c1),transparent 52%),linear-gradient(165deg,var(--c2),var(--bg) 85%)}
.f .sp{position:absolute;width:30%;right:12%;top:14%;opacity:.95}
.f h3{position:absolute;left:20px;right:20px;bottom:18px;font-size:clamp(34px,3.6vw,50px)}
.f img,.bv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.1)}
.f.im::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(8,8,22,.5))}
.b{inset:-18% -18%;transform:rotateY(180deg);background:var(--bg2);border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.bv{height:46%;background:conic-gradient(from 210deg at 28% 72%,var(--c2),var(--bg),var(--c1) 70%,var(--c2));position:relative;overflow:hidden}
.bv .sp{position:absolute;width:20%;right:9%;bottom:12%}
.bt{padding:20px 24px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.bt small{color:var(--star);font-size:14px;font-weight:500}
.bt h3{font-size:clamp(34px,3vw,44px)}
.bt p{margin:0;font-size:15px;line-height:1.5;color:var(--mut)}
.bt b{margin-top:auto;font-weight:500;font-size:15px}
.f h3,.bt h3{transition:text-shadow .4s ease}
.card.on .bt h3,.card.on .f h3{text-shadow:0 0 22px rgba(249,200,120,.4)}
.tag{position:absolute;left:20px;top:18px;z-index:2;font-size:14px;font-weight:500;background:rgba(26,26,46,.6);padding:4px 12px;border-radius:99px}
.b .prog{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--star);box-shadow:0 0 14px var(--star);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.card.charging .prog{transform:scaleX(1);transition:transform var(--dw,7150ms) linear .85s}
.gl{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s ease;mix-blend-mode:screen}
.card.on .gl{opacity:1}
.gl u{position:absolute;left:-60%;top:-60%;width:220%;height:220%;display:block;transform:translateX(-60%);will-change:transform;background:linear-gradient(90deg,transparent 28%,rgba(255,244,225,.1) 38%,rgba(255,244,225,.3) 50%,rgba(255,244,225,.1) 62%,transparent 72%);filter:blur(24px)}
@property --vc1{syntax:'<color>';inherits:false;initial-value:rgba(8,8,22,.55)}
@property --vc2{syntax:'<color>';inherits:false;initial-value:rgba(8,8,22,0)}
#dim{position:fixed;inset:0;background:radial-gradient(ellipse 70% 70% at var(--vx,50%) var(--vy,50%),var(--vc2),transparent 75%),var(--vc1);opacity:0;pointer-events:none;transition:opacity .5s ease,--vc1 .7s ease,--vc2 .7s ease;z-index:60}
body.dimmed #dim{opacity:1}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;padding:0 clamp(20px,5vw,72px)}
.three>*{padding:34px 28px 38px 0;border-top:1px solid var(--line);display:block;position:relative}
.three h3{font-size:46px;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.three .sp{width:26px;flex:none}
.three p{margin:0;color:var(--mut);max-width:30ch}
.three>*::after,.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;filter:blur(12px);background:linear-gradient(100deg,transparent 30%,rgba(249,200,120,.22) 50%,transparent 70%);background-size:260% 100%;background-position:130% 0}
.lit::after{opacity:1;animation:sweepx 6.2s ease-in-out infinite}
@keyframes sweepx{0%{background-position:130% 0}65%,100%{background-position:-30% 0}}
.contact{text-align:left;padding:0 clamp(20px,5vw,72px)}
.contact h2{font-size:clamp(64px,15vw,230px)}
.btn{display:inline-block;position:relative;margin-top:40px;padding:18px 36px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:500}
.mail{margin:22px 0 0;color:var(--mut);font-size:17px}
.mail a{border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .25s,border-color .25s}
.mail a:hover{color:var(--ink);border-color:var(--star)}
#rail{position:fixed;right:14px;top:18vh;bottom:18vh;width:1px;background:var(--line);z-index:40}
#rs{position:absolute;left:-8px;width:17px;top:0}
#tr{position:fixed;inset:0;z-index:95;pointer-events:none;visibility:hidden;opacity:0;overflow:hidden;background:#0a0a1e}
.tr-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%;will-change:transform}
.tr-glow{position:absolute;left:50%;top:50%;width:70vmin;height:70vmin;margin:-35vmin 0 0 -35vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,196,110,.6),rgba(255,196,110,0) 65%);mix-blend-mode:screen;opacity:0;will-change:transform,opacity}
.tr-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#FFF4DE 0,#F9C878 30%,rgba(249,200,120,0) 70%);opacity:0;will-change:transform,opacity}
.tr-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7) saturate(.92);display:none;will-change:opacity}
.tr-dark{position:absolute;inset:0;display:none;background:radial-gradient(ellipse 75% 75% at 50% 50%,rgba(10,10,30,.12),rgba(10,10,30,.68) 100%)}
#tr.vid .tr-img,#tr.vid .tr-glow,#tr.vid .tr-flash{display:none}
#tr.vid .tr-vid,#tr.vid .tr-dark{display:block}
@media (max-width:640px){.b{inset:-8% -5%}#rail{display:none}}
.btn{cursor:pointer}
.three h3{font-size:clamp(34px,4vw,46px);flex-wrap:wrap}