/* ============ inner pages ============ */
.pg-in{opacity:0;transform:translateY(3rem);transition:opacity .9s var(--ease5),transform .9s var(--ease5)}
.pg-in.in{opacity:1;transform:none}
body[data-page] #main{display:block}
body[data-page] .section{overflow:visible}

.pg-hero{position:relative;overflow:hidden;color:#fff;padding:min(18rem,20vw) 0 min(20rem,22vw);
  background:
    radial-gradient(60% 80% at 82% 8%,rgba(228,87,46,.4),transparent 62%),
    radial-gradient(50% 70% at 6% 100%,rgba(255,179,71,.16),transparent 65%),
    linear-gradient(160deg,#2a100b 0%,#170a09 55%,#0d0708 100%)}
.pg-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1.5px) 0 0/3.2rem 3.2rem;
  -webkit-mask-image:radial-gradient(70% 80% at 25% 40%,#000,transparent);mask-image:radial-gradient(70% 80% at 25% 40%,#000,transparent)}
.pg-hero .container{position:relative;z-index:2}
.crumbs{display:flex;align-items:center;gap:1.2rem;font-size:var(--fs-14);color:rgba(255,255,255,.7);margin-bottom:2.4rem}
.crumbs a:hover{color:#fff}
.crumbs i{width:.6rem;height:.6rem;border-top:1.5px solid currentColor;border-left:1.5px solid currentColor;transform:rotate(-45deg)}
.pg-title{font-size:clamp(4.4rem,6.4vw,9.6rem);font-weight:700;line-height:1.2;max-width:96rem;
  background:linear-gradient(100deg,#fff 40%,#ffd08a);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-lead{margin-top:2.4rem;max-width:72rem;font-size:clamp(1.8rem,1.5vw,2.4rem);line-height:2;color:rgba(255,255,255,.78)}
.pg-en{margin-top:1.4rem;font-family:var(--ff-en);font-size:var(--fs-18);color:#ffb347;letter-spacing:.08em}
.pg-tags{margin-top:2.4rem}
.pg-hero .pcard-tags i{border-color:rgba(255,255,255,.3);color:#fff}

.pg-sec{padding:min(5rem,6vw) 0}
.pg-head{margin-bottom:3.4rem}
.pg-head h2{font-size:clamp(3rem,3.4vw,4.8rem);font-weight:700}
.pg-note{margin-top:3rem;text-align:center;color:var(--fg-soft);font-size:var(--fs-14)}

/* filters */
.pfilter{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:3.4rem}
.pfilter button{padding:1rem 2.4rem;border-radius:99px;font-size:var(--fs-14);border:1px solid var(--line);background:var(--panel-2);color:var(--fg);transition:background .4s,color .4s,transform .5s var(--ease5)}
.pfilter button:hover{transform:translateY(-.3rem)}
.pfilter button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* project / article grid */
.pgrid{display:grid;grid-template-columns:1fr;gap:2.4rem}
@media (min-width:50em){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:80em){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pgrid [hidden]{display:none}
.pcard{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:3rem;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);
  transition:transform .7s var(--ease5),border-color .4s,box-shadow .5s}
.pcard:hover{transform:translateY(-.8rem);border-color:color-mix(in srgb,var(--c) 60%,var(--line));box-shadow:0 3rem 6rem -2.6rem color-mix(in srgb,var(--c) 70%,transparent)}
.pcard-shot{position:relative;padding:2.4rem 2.4rem 0;background:radial-gradient(70% 90% at 50% 20%,color-mix(in srgb,var(--c) 34%,transparent),transparent 75%)}
.pcard-frame{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:1.6rem 1.6rem 0 0;background:#111;box-shadow:0 2rem 4rem -1.6rem rgba(0,0,0,.5);border:.6rem solid #17181c;border-bottom:0}
.pcard-frame img{display:block;width:100%;height:auto;transition:transform 7s linear}
.pcard:hover .pcard-frame img{transform:translateY(-62%)}
.pcard-body{display:flex;flex-direction:column;gap:1.2rem;padding:2.6rem 2.8rem 2.8rem;flex:1}
.pcard-cat{font-size:var(--fs-14);color:var(--fg-soft)}
.pcard h3{font-size:2.8rem;font-weight:700;line-height:1.4}
.pcard-body p{font-size:var(--fs-16);line-height:1.9;color:var(--fg-soft)}
.pcard-tags{display:flex;flex-wrap:wrap;gap:.8rem}
.pcard-tags i{font-style:normal;padding:.4rem 1.4rem;border-radius:99px;font-size:1.25rem;border:1px solid var(--line)}
.pcard-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:1.6rem;border-top:1px solid var(--line)}
.pcard-stat{font-size:var(--fs-14);color:var(--fg-soft)}
.pcard-stat b{margin-left:.8rem;font-size:var(--fs-18);color:var(--fg)}
.pcard-go{flex:none;width:4.6rem;height:4.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);transition:background .4s,transform .7s var(--ease5)}
.pcard-go svg{width:2rem;fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.pcard:hover .pcard-go,.acard:hover .pcard-go{background:var(--c-primary-400);border-color:var(--c-primary-400);transform:rotate(-45deg)}
.pcard:hover .pcard-go svg,.acard:hover .pcard-go svg{stroke:#fff}

/* article cards */
.acard{display:flex;flex-direction:column;overflow:hidden;border-radius:2.8rem;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);transition:transform .7s var(--ease5),box-shadow .5s}
.acard:hover{transform:translateY(-.8rem);box-shadow:0 3rem 6rem -2.6rem color-mix(in srgb,var(--c) 70%,transparent)}
.acard-cover{position:relative;aspect-ratio:16/9;display:flex;align-items:flex-end;padding:2rem;background:radial-gradient(120% 120% at 20% 0%,color-mix(in srgb,var(--c) 90%,#fff) 0%,var(--c) 45%,#2a0c0a 110%)}
.acard-cover::after{content:"";position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'160\' height=\'160\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'.85\' numOctaves=\'2\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\'/%3E%3C/svg%3E")}
.acard-cover span{position:relative;z-index:1;padding:.6rem 1.6rem;border-radius:99px;font-size:1.3rem;color:#fff;background:rgba(20,8,6,.45);border:1px solid rgba(255,255,255,.28)}
.acard-body{display:flex;flex-direction:column;gap:1rem;padding:2.4rem 2.6rem 2.6rem;flex:1;position:relative}
.acard-body small{color:var(--fg-soft);font-size:var(--fs-14)}
.acard-body h3{font-size:2.3rem;font-weight:700;line-height:1.6;padding-left:6rem}
.acard-body .pcard-go{position:absolute;left:2.4rem;bottom:2.4rem}

/* project detail */
.pd{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media (min-width:64em){.pd{grid-template-columns:1.5fr .9fr;gap:6rem}}
.pd-monitor{position:relative;display:flex;justify-content:center;padding:4rem 0}
.pd-monitor .show-blob{position:absolute;left:50%;top:50%;width:46rem;height:46rem;margin:-23rem;border-radius:50%;background:var(--c);filter:blur(8rem);opacity:.34}
.pd-monitor .monitor{position:relative;z-index:1;width:min(64rem,100%)}
.pd-facts{display:grid;gap:1.4rem}
.pd-facts div{padding:1.8rem 2.2rem;border-radius:2rem;background:var(--panel-2);border:1px solid var(--line)}
.pd-facts small{display:block;color:var(--fg-soft);font-size:var(--fs-14)}
.pd-facts b{font-size:var(--fs-18);font-weight:600}
.pd-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin:5rem 0}
.pd-stats div{padding:3rem 2rem;text-align:center;border-radius:2.6rem;background:linear-gradient(150deg,#e4572e,#b83a1f);color:#fff}
.pd-stats b{display:block;font-size:clamp(3rem,4vw,5.6rem);font-weight:700;line-height:1.2}
.pd-stats small{font-size:var(--fs-14);opacity:.85}
.pd-story{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:50em){.pd-story{grid-template-columns:repeat(3,1fr)}}
.pd-block{position:relative;padding:3rem;border-radius:2.8rem;background:var(--panel-2);border:1px solid var(--line)}
.pd-block span{display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:50%;margin-bottom:1.8rem;background:var(--c-primary-400);color:#fff;font-weight:700}
.pd-block h3{font-size:2.4rem;margin-bottom:1rem}
.pd-block p{color:var(--fg-soft);line-height:2}
.pd-next{position:relative;margin-top:4rem;display:flex;align-items:center;justify-content:space-between;padding:3.2rem 4rem;border-radius:3rem;color:#fff;overflow:hidden;
  background:linear-gradient(110deg,color-mix(in srgb,var(--c) 80%,#000),var(--c));transition:transform .6s var(--ease5)}
.pd-next:hover{transform:translateY(-.5rem)}
.pd-next small{display:block;opacity:.8}
.pd-next b{font-size:clamp(3rem,4vw,5.6rem);font-weight:700}
.pd-next span{width:7rem;height:7rem;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.pd-next svg{width:2.8rem;fill:none;stroke:#2a0c0a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* features / steps */
.feat-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:50em){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:80em){.feat-grid{grid-template-columns:repeat(3,1fr)}}
.feat{position:relative;padding:3.2rem;border-radius:2.8rem;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;transition:transform .6s var(--ease5),border-color .4s}
.feat:hover{transform:translateY(-.6rem);border-color:color-mix(in srgb,var(--c-primary-400) 55%,var(--line))}
.feat-no{position:absolute;left:2.4rem;top:1.6rem;font-family:var(--ff-en);font-weight:700;font-size:5rem;line-height:1;color:var(--fg);opacity:.07}
.feat h3{font-size:2.3rem;font-weight:700;margin-bottom:1rem;padding-top:.6rem}
.feat p{color:var(--fg-soft);line-height:2}
.pg-steps{display:grid;gap:1.6rem;list-style:none;counter-reset:s}
@media (min-width:64em){.pg-steps:not(.tl){grid-template-columns:repeat(4,1fr)}}
.pg-steps li{display:flex;gap:1.6rem;align-items:flex-start;padding:2.4rem;border-radius:2.4rem;background:var(--panel-2);border:1px solid var(--line)}
.pg-steps li>span{flex:none;width:4rem;height:4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--fg);color:var(--bg);font-weight:700}
.pg-steps b{display:block;font-size:var(--fs-18)}
.pg-steps small{color:var(--fg-soft);font-size:var(--fs-14)}
.pg-steps.tl{grid-template-columns:1fr}
.pg-steps.tl li>span.tl-y{width:auto;height:auto;border-radius:99px;padding:.6rem 1.6rem;background:linear-gradient(120deg,#ffb347,#e4572e);color:#fff}
.pg-others{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media (min-width:50em){.pg-others{grid-template-columns:repeat(3,1fr)}}
.pg-other{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:2.8rem;border-radius:2.6rem;background:var(--panel-2);border:1px solid var(--line);color:var(--fg);transition:transform .6s var(--ease5),border-color .4s}
.pg-other:hover{transform:translateY(-.6rem);border-color:var(--c-primary-400)}
.pg-other b{font-size:2.2rem}
.pg-other small{font-family:var(--ff-en);color:var(--fg-soft)}
.pg-other span{align-self:flex-start;margin-top:1rem;width:4.4rem;height:4.4rem;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.pg-other svg{width:2rem;fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg-other:hover span{background:var(--c-primary-400);border-color:var(--c-primary-400)}
.pg-other:hover svg{stroke:#fff}

/* about */
.ab-story{display:grid;grid-template-columns:1fr;gap:4rem;align-items:center}
@media (min-width:64em){.ab-story{grid-template-columns:1.2fr 1fr;gap:7rem}}
.ab-story h2{font-size:clamp(3rem,3.6vw,5rem);font-weight:700;margin-bottom:1.6rem}
.ab-story p{font-size:var(--fs-18);line-height:2.1;color:var(--fg-soft);margin-bottom:1.4rem}
.ab-numbers{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.ab-numbers div{padding:2.8rem 2rem;text-align:center;border-radius:2.4rem;background:var(--panel-2);border:1px solid var(--line)}
.ab-numbers div:nth-child(1){background:linear-gradient(150deg,#e4572e,#b83a1f);color:#fff;border-color:transparent}
.ab-numbers b{display:block;font-size:4rem;font-weight:700;line-height:1.3}
.ab-numbers small{font-size:var(--fs-14);opacity:.75}

/* contact */
.ct-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-bottom:3rem}
@media (min-width:50em){.ct-grid{grid-template-columns:repeat(3,1fr)}}
.ct-tile{padding:2.6rem 2.8rem;border-radius:2.4rem;background:var(--panel-2);border:1px solid var(--line)}
.ct-tile small{display:block;color:var(--fg-soft);font-size:var(--fs-14);margin-bottom:.6rem}
.ct-tile b{font-size:2.2rem}
body[data-page="contact"] .section--collab{padding-top:1rem}