/* ============================================================
   RIMAN / DEV STUDIO — index sections
   ============================================================ */

/* games grid */
.games__intro{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem);
  margin-bottom:clamp(2rem,4vw,3rem);
  align-items:end;
}
.games__lead{ font-size:clamp(.95rem,1.15vw,1.06rem); color:var(--ink-dim); }
.filters{ display:flex; gap:.45rem; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:900px){
  .games__intro{ grid-template-columns:1fr; }
  .filters{ justify-content:flex-start; }
}

.games{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.8rem,1.6vw,1.4rem); }
.game{
  grid-column:span 4;
  position:relative;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  isolation:isolate;
  min-height:clamp(240px,32vw,400px);
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:opacity .5s, transform .8s var(--ease), border-color .5s;
  transform-style:preserve-3d;
}
.game--wide{ grid-column:span 8; }
@media (max-width:1080px){ .game,.game--wide{ grid-column:span 6; } }
@media (max-width:680px){ .game,.game--wide{ grid-column:span 12; } }
.game.is-filtered{ display:none; }

.game__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.game__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.1s var(--ease), filter .7s var(--ease);
  filter:saturate(.72) brightness(.72);
}
.game__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,6,10,.15) 0%,rgba(5,6,10,.42) 46%,rgba(5,6,10,.94) 100%);
}
.game:hover .game__media img{ transform:scale(1.13); filter:saturate(1.05) brightness(.9); }

.game__sheen{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0; transition:opacity .5s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(79,240,224,.22), transparent 62%);
  mix-blend-mode:screen;
}
.game:hover .game__sheen{ opacity:1; }
.game::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:2;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(233,238,255,.1);
  transition:box-shadow .5s;
}
.game:hover::after{ box-shadow:inset 0 0 0 1px rgba(79,240,224,.4); }

.game__top{
  position:absolute; top:0; left:0; right:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:clamp(1rem,1.6vw,1.4rem);
}
.game__year{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  color:rgba(237,240,248,.8);
  padding:.35rem .7rem; border-radius:99px;
  background:rgba(5,6,10,.4);
  border:1px solid rgba(233,238,255,.16);
  backdrop-filter:blur(6px);
}
.game__tag{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan);
  opacity:0; transform:translateY(-6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.game:hover .game__tag{ opacity:1; transform:none; }

.game__body{
  position:relative; z-index:3;
  padding:clamp(1rem,1.8vw,1.7rem);
  display:flex; flex-direction:column; gap:.5rem;
}
.game__title{
  font-size:clamp(1.35rem,2.6vw,2.1rem);
  letter-spacing:-.035em;
  display:flex; align-items:center; gap:.55rem;
}
.game__title svg{
  width:15px; height:15px; opacity:0; transform:translate(-6px,6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  color:var(--cyan); flex-shrink:0;
}
.game:hover .game__title svg{ opacity:1; transform:none; }
.game__desc{
  font-size:.86rem; color:rgba(237,240,248,.66);
  max-width:38ch; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color .4s;
}
.game:hover .game__desc{ color:rgba(237,240,248,.86); }
.game__meta{ display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.35rem; }
.game__meta span{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase;
  padding:.28rem .6rem; border-radius:99px;
  border:1px solid rgba(233,238,255,.14);
  color:rgba(237,240,248,.62);
}
.game__play{
  position:absolute; right:clamp(1rem,1.8vw,1.6rem); bottom:clamp(1rem,1.8vw,1.6rem);
  z-index:4;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(5,6,10,.5); border:1px solid rgba(233,238,255,.2);
  backdrop-filter:blur(8px);
  opacity:0; transform:scale(.8);
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .4s;
}
.game:hover .game__play{ opacity:1; transform:none; background:var(--cyan); color:#04121a; border-color:transparent; }
.game__play svg{ width:15px; height:15px; }

.game--cta{
  background:linear-gradient(150deg,rgba(124,92,255,.14),rgba(79,240,224,.06) 60%,transparent);
  border-style:dashed;
  border-color:rgba(233,238,255,.16);
  justify-content:center; align-items:center; text-align:center;
  padding:clamp(1.6rem,3vw,2.6rem);
  gap:1rem;
}
.game--cta:hover{ border-color:rgba(79,240,224,.5); }
.game--cta .big{ font-family:var(--display); font-size:clamp(1.5rem,3.2vw,2.4rem); letter-spacing:-.04em; line-height:1.02; }
.game--cta p{ font-size:.86rem; color:var(--ink-mute); max-width:28ch; }
.game--cta__ring{
  width:54px; height:54px; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; transition:transform .6s var(--ease), background .4s;
}
.game--cta:hover .game--cta__ring{ transform:rotate(90deg); background:var(--cyan); color:#04121a; }

/* about */
.about{ position:relative; overflow:hidden; }
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
@media (max-width:960px){ .about__grid{ grid-template-columns:1fr; } }
.about__text{
  font-family:var(--display);
  font-size:clamp(1.35rem,2.9vw,2.5rem);
  line-height:1.22; letter-spacing:-.03em; font-weight:500;
  color:rgba(237,240,248,.42);
}
.about__text b{ color:var(--ink); font-weight:700; }
.about__text .hl{ color:var(--cyan); }
.about__aside{ display:flex; flex-direction:column; gap:1.6rem; padding-top:.4rem; }
.about__aside p{ font-size:.92rem; color:var(--ink-dim); }

.stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; margin-top:clamp(2rem,4vw,3rem);
}
.stat{
  background:var(--bg-soft);
  padding:clamp(1.1rem,2.2vw,1.8rem);
  display:flex; flex-direction:column; gap:.3rem;
  transition:background .5s;
}
.stat:hover{ background:var(--surface-2); }
.stat b{
  font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.6rem);
  letter-spacing:-.04em; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.stat span{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute);
}

.about__photos{
  position:relative; margin-top:clamp(2.5rem,5vw,4rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.4vw,1.1rem);
}
.pframe{
  position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:4/5; margin:0;
}
.pframe:nth-child(2){ margin-top:clamp(1rem,3vw,2.6rem); }
.pframe:nth-child(3){ margin-top:clamp(.3rem,1vw,.9rem); }
.pframe img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) brightness(.78) contrast(1.05);
  transition:filter .8s var(--ease);
  will-change:transform;
}
.pframe:hover img{ filter:none; }
.pframe figcaption{
  position:absolute; left:.7rem; bottom:.6rem;
  font-family:var(--mono); font-size:.54rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(237,240,248,.75);
}

/* services */
.svc-list{ border-top:1px solid var(--line); }
.svc{ position:relative; border-bottom:1px solid var(--line); overflow:hidden; isolation:isolate; }
.svc__row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr) auto;
  align-items:center;
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.2rem,2.6vw,2.1rem) 0;
  cursor:pointer;
}
@media (max-width:820px){
  .svc__row{ grid-template-columns:auto 1fr auto; }
  .svc__desc{ display:none; }
}
.svc__num{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--ink-mute); transition:color .4s; width:2.2rem; }
.svc__title{
  font-family:var(--display); font-size:clamp(1.15rem,2.5vw,2rem);
  letter-spacing:-.03em; font-weight:600;
  transition:transform .6s var(--ease), color .4s;
}
.svc__desc{ font-size:.84rem; color:var(--ink-mute); line-height:1.55; }
.svc__icon{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:grid; place-items:center;
  transition:transform .6s var(--ease), background .4s, border-color .4s, color .4s;
  flex-shrink:0;
}
.svc__icon svg{ width:14px; height:14px; }
.svc__bg{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(79,240,224,.07),rgba(124,92,255,.05) 50%,transparent);
  opacity:0; transition:opacity .5s;
}
.svc:hover .svc__bg{ opacity:1; }
.svc:hover .svc__title{ transform:translateX(10px); color:#fff; }
.svc:hover .svc__num{ color:var(--cyan); }
.svc:hover .svc__icon{ background:var(--cyan); color:#04121a; border-color:transparent; transform:rotate(45deg) scale(1.06); }
.svc__body{ max-height:0; overflow:hidden; transition:max-height .7s var(--ease), opacity .5s; opacity:0; }
.svc.is-open .svc__body{ max-height:220px; opacity:1; }
.svc__body-inner{
  padding:0 0 clamp(1.2rem,2.4vw,1.8rem) calc(2.2rem + clamp(1rem,3vw,3rem));
  display:flex; gap:.5rem; flex-wrap:wrap;
}

/* process */
.process{ background:var(--bg-soft); border-block:1px solid var(--line); }
.steps{ display:grid; margin-top:clamp(1rem,2vw,2rem); }
.step{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.2rem,4vw,4rem);
  padding-block:clamp(1.5rem,3.4vw,3rem);
  border-top:1px solid var(--line);
  position:relative;
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step__idx{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.6vw,2.8rem);
  font-weight:800; letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(233,238,255,.28);
  transition:-webkit-text-stroke-color .5s;
  line-height:1; min-width:3ch;
}
.step:hover .step__idx{ -webkit-text-stroke-color:var(--cyan); }
.step__main{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(1rem,3vw,3rem); align-items:start;
}
@media (max-width:820px){ .step__main{ grid-template-columns:1fr; } }
.step__title{ font-size:clamp(1.25rem,2.6vw,2rem); letter-spacing:-.035em; font-weight:700; }
.step__title small{
  display:block; font-family:var(--mono); font-size:.58rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
  margin-bottom:.6rem; font-weight:500;
}
.step__text{ font-size:.9rem; color:var(--ink-dim); line-height:1.65; }
.step__rail{
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--cyan); transform:scaleY(0); transform-origin:top;
  transition:transform .6s var(--ease); opacity:.6;
}
.step:hover .step__rail{ transform:scaleY(1); }

/* school band */
.band{
  position:relative; overflow:hidden;
  border-block:1px solid var(--line);
  background:radial-gradient(60% 120% at 82% 50%,rgba(124,92,255,.22),transparent 70%), var(--bg);
}
.band__inner{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,5rem); align-items:center;
  padding-block:clamp(3.5rem,8vw,7rem);
}
@media (max-width:900px){ .band__inner{ grid-template-columns:1fr; } }
.band h2{ font-size:clamp(2rem,5vw,4rem); letter-spacing:-.04em; }
.band p{ color:var(--ink-dim); font-size:clamp(.92rem,1.1vw,1.02rem); margin-top:1.2rem; }
.band__actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem; }
.band__cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.6rem,1.4vw,1rem); }
.band__card{
  padding:clamp(1.1rem,2vw,1.6rem);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
  transition:transform .6s var(--ease), border-color .4s, background .4s;
}
.band__card:hover{ border-color:rgba(79,240,224,.4); background:rgba(79,240,224,.05); transform:translateY(-6px); }
.band__card b{ font-family:var(--display); font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.04em; display:block; margin-bottom:.3rem; }
.band__card span{ font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }

/* contact */
.contact{ position:relative; overflow:hidden; }
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem); align-items:start;
}
@media (max-width:960px){ .contact__grid{ grid-template-columns:1fr; } }
.contact h2{ font-size:clamp(2.2rem,6vw,5rem); letter-spacing:-.045em; line-height:.96; }
.contact__lead{ margin-top:1.4rem; color:var(--ink-dim); max-width:40ch; }
.contact__links{ display:flex; flex-direction:column; margin-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line); }
.contact__link{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0; border-bottom:1px solid var(--line);
  transition:padding .5s var(--ease), color .4s;
}
.contact__link:hover{ padding-left:.6rem; color:var(--cyan); }
.contact__link em{ font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); font-style:normal; }
.contact__link strong{ font-weight:600; font-size:.95rem; }

.form{
  display:flex; flex-direction:column; gap:1.1rem;
  padding:clamp(1.3rem,3vw,2.2rem);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  backdrop-filter:blur(10px);
  position:relative; overflow:hidden;
}
.form::before{ content:""; position:absolute; top:-1px; left:10%; right:10%; height:1px; background:var(--grad); opacity:.7; }
.fgroup{ position:relative; display:flex; flex-direction:column; gap:.45rem; }
.fgroup label{ font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); }
.fgroup input,.fgroup textarea{
  width:100%; padding:.85rem 1rem;
  background:rgba(5,6,10,.5);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:.9rem;
  transition:border-color .4s, background .4s, box-shadow .4s;
  resize:vertical;
}
.fgroup textarea{ min-height:104px; }
.fgroup input:focus,.fgroup textarea:focus{
  outline:none; border-color:rgba(79,240,224,.6);
  background:rgba(5,6,10,.8);
  box-shadow:0 0 0 3px rgba(79,240,224,.1);
}
.fgroup input::placeholder,.fgroup textarea::placeholder{ color:#4a5265; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }
.form__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:.3rem; }
.form__note{ font-size:.72rem; color:var(--ink-mute); max-width:26ch; line-height:1.5; }
.form__ok{ display:none; align-items:center; gap:.6rem; font-size:.85rem; color:var(--cyan); font-weight:600; }
.form.is-sent .form__ok{ display:flex; }

/* footer (shared) */
.footer{
  position:relative; overflow:hidden;
  border-top:1px solid var(--line);
  padding-top:clamp(3rem,6vw,5rem);
  background:linear-gradient(180deg,transparent,rgba(124,92,255,.05));
}
.footer__big{
  font-family:var(--display);
  font-size:clamp(3rem,13vw,12rem);
  font-weight:800; letter-spacing:-.055em; line-height:.82;
  color:transparent;
  -webkit-text-stroke:1px rgba(233,238,255,.18);
  white-space:nowrap;
  transition:-webkit-text-stroke-color .6s;
  user-select:none;
  padding-bottom:.1em;
}
.footer__big:hover{ -webkit-text-stroke-color:rgba(79,240,224,.45); }
.footer__mid{
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,4rem);
  justify-content:space-between;
  padding-block:clamp(2rem,4vw,3.2rem);
  border-top:1px solid var(--line);
}
.fcol{ display:flex; flex-direction:column; gap:.6rem; min-width:140px; }
.fcol h4{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute); font-weight:500; margin-bottom:.3rem;
}
.fcol a,.fcol span{ font-size:.84rem; color:var(--ink-dim); transition:color .35s, transform .35s var(--ease); display:inline-block; }
.fcol a:hover{ color:var(--cyan); transform:translateX(3px); }
.footer__bar{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding-block:1.4rem;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mute);
}
.socials{ display:flex; gap:.5rem; flex-wrap:wrap; }
.social{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  transition:background .4s, color .4s, border-color .4s, transform .4s var(--ease);
  color:var(--ink-dim);
}
.social:hover{ background:var(--cyan); color:#04121a; border-color:transparent; transform:translateY(-3px); }
.social svg{ width:15px; height:15px; }

.totop{
  position:fixed; right:clamp(1rem,3vw,2.2rem); bottom:clamp(1rem,3vw,2.2rem);
  z-index:5500;
  width:48px; height:48px; border-radius:50%;
  background:rgba(5,6,10,.7); border:1px solid var(--line-strong);
  backdrop-filter:blur(10px);
  display:grid; place-items:center;
  opacity:0; transform:translateY(14px) scale(.9); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .4s;
}
.totop.is-on{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:var(--cyan); color:#04121a; }
.totop svg{ width:15px; height:15px; }

.glow-blob{ position:absolute; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.5; z-index:-1; }