/* ============================================================
   RIMAN / DEV STUDIO — components
   loader · cursor · grain · header · buttons · hero · marquee
   ============================================================ */

#loader{
  position:fixed; inset:0; z-index:9000;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
#loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader__inner{ width:min(560px,84vw); display:flex; flex-direction:column; gap:1.1rem; }
.loader__row{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.loader__word{ font-family:var(--display); font-size:clamp(1.5rem,4vw,2.4rem); letter-spacing:-.04em; }
.loader__pct{
  font-family:var(--mono); font-size:clamp(1.5rem,3.4vw,2rem);
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.loader__bar{ height:2px; background:rgba(233,238,255,.12); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0%; background:var(--grad); transition:width .35s linear; }
.loader__hint{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* cursor */
.cursor,.cursor-dot{
  position:fixed; top:0; left:0; z-index:8000;
  pointer-events:none; border-radius:50%;
  will-change:transform;
}
.cursor{
  width:38px; height:38px;
  border:1px solid rgba(79,240,224,.55);
  display:grid; place-items:center;
  background:rgba(79,240,224,.05);
  backdrop-filter:blur(2px);
  transition:width .35s var(--ease), height .35s var(--ease),
             background .35s var(--ease), border-color .35s var(--ease), opacity .3s linear;
  transform:translate3d(-50%,-50%,0);
}
.cursor__label{
  font-family:var(--mono); font-size:.55rem; letter-spacing:.12em;
  text-transform:uppercase; color:#04121a; opacity:0;
  transition:opacity .25s; white-space:nowrap;
}
.cursor.is-hover{ width:74px; height:74px; background:rgba(79,240,224,.14); border-color:rgba(79,240,224,.9); }
.cursor.is-label{ width:96px; height:96px; background:var(--cyan); border-color:var(--cyan); }
.cursor.is-label .cursor__label{ opacity:1; }
.cursor-dot{
  width:5px; height:5px; background:var(--cyan);
  transform:translate3d(-50%,-50%,0);
  box-shadow:0 0 12px rgba(79,240,224,.9);
}
.cursor.is-hidden,.cursor-dot.is-hidden{ opacity:0; }
@media (hover:none),(max-width:900px){ .cursor,.cursor-dot{ display:none; } }

/* grain + fx */
.grain{
  position:fixed; inset:0; z-index:7000; pointer-events:none;
  opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 8s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}
.scanlines{
  position:fixed; inset:0; z-index:6990; pointer-events:none; opacity:.16;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 4px);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 20%,transparent 80%);
}

.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:7500; }
.progress__fill{
  height:100%; width:100%;
  background:var(--grad);
  box-shadow:0 0 18px rgba(79,240,224,.5);
  transform-origin:left; transform:scaleX(0);
}

/* header */
.header{
  position:fixed; top:0; left:0; right:0; z-index:6000;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), backdrop-filter .5s, height .45s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  height:64px;
  background:rgba(5,6,10,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.header__inner{
  width:100%; max-width:1560px; margin-inline:auto;
  padding-inline:var(--pad-x);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.logo{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--display); font-weight:800;
  letter-spacing:-.03em; font-size:1.02rem; flex-shrink:0;
}
.logo__mark{ width:26px; height:26px; position:relative; flex-shrink:0; }
.logo__mark::before,.logo__mark::after{
  content:""; position:absolute; inset:0;
  border:1.5px solid var(--cyan); border-radius:7px;
  transition:transform .6s var(--ease), border-color .4s;
}
.logo__mark::after{ border-color:var(--violet); transform:rotate(45deg) scale(.72); }
.logo:hover .logo__mark::before{ transform:rotate(-90deg); }
.logo:hover .logo__mark::after{ transform:rotate(0deg) scale(.72); }
.logo__sub{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.22em;
  color:var(--ink-mute); text-transform:uppercase;
  align-self:flex-end; padding-bottom:.28rem;
}
@media (max-width:560px){ .logo__sub{ display:none; } }

.nav{ display:flex; align-items:center; gap:clamp(.5rem,2vw,2rem); }
.nav__link{
  position:relative; padding:.4rem .1rem;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-dim); transition:color .35s;
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--cyan); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__link.is-active{ color:var(--cyan); }
.nav__link.is-active::after{ transform:scaleX(1); }
@media (max-width:1080px){ .nav{ display:none; } }

.header__actions{ display:flex; align-items:center; gap:.9rem; }

.burger{
  display:none; width:44px; height:44px; position:relative;
  border:1px solid var(--line-strong); border-radius:50%;
  align-items:center; justify-content:center;
}
.burger span{
  position:absolute; left:50%; width:16px; height:1.5px;
  background:var(--ink); translate:-50% 0;
  transition:transform .45s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ transform:translateY(-4px); }
.burger span:nth-child(3){ transform:translateY(4px); }
body.menu-open .burger span:nth-child(1){ transform:rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:rotate(-45deg); }
@media (max-width:1080px){ .burger{ display:flex; } }

.menu{
  position:fixed; inset:0; z-index:5900;
  background:rgba(5,6,10,.96);
  backdrop-filter:blur(24px);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + 2rem) var(--pad-x) 3rem;
  clip-path:circle(0% at calc(100% - 60px) 40px);
  transition:clip-path .8s var(--ease), visibility .8s;
  pointer-events:none;
  visibility:hidden;
}
body.menu-open .menu{
  clip-path:circle(150% at calc(100% - 60px) 40px);
  pointer-events:auto;
  visibility:visible;
}
.menu__list{ list-style:none; margin:0 0 2.5rem; padding:0; }
.menu__item{ overflow:hidden; }
.menu__link{
  display:flex; align-items:baseline; gap:1rem;
  font-family:var(--display); font-size:clamp(2rem,9vw,3.4rem);
  letter-spacing:-.04em; padding:.28em 0;
  transform:translateY(110%);
  transition:transform .7s var(--ease), color .3s;
  color:var(--ink);
}
body.menu-open .menu__link{ transform:none; }
.menu__item:nth-child(1) .menu__link{ transition-delay:.14s; }
.menu__item:nth-child(2) .menu__link{ transition-delay:.2s; }
.menu__item:nth-child(3) .menu__link{ transition-delay:.26s; }
.menu__item:nth-child(4) .menu__link{ transition-delay:.32s; }
.menu__item:nth-child(5) .menu__link{ transition-delay:.38s; }
.menu__link:hover{ color:var(--cyan); }
.menu__link em{
  font-family:var(--mono); font-size:.6rem; font-style:normal;
  letter-spacing:.2em; color:var(--ink-mute);
}
.menu__foot{ display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; }

/* buttons */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.6rem;
  border-radius:99px;
  font-size:.86rem; font-weight:700; letter-spacing:.01em;
  border:1px solid var(--line-strong);
  overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), border-color .4s, transform .4s var(--ease);
  white-space:nowrap;
}
.btn span{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.55rem; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--grad);
  transform:translate3d(0,101%,0);
  transition:transform .6s var(--ease);
}
.btn:hover::before{ transform:none; }
.btn:hover{ color:#04121a; border-color:transparent; }
.btn--primary{
  background:var(--cyan); color:#04121a; border-color:transparent;
  box-shadow:0 8px 40px -12px rgba(79,240,224,.6);
}
.btn--primary::before{ background:linear-gradient(100deg,#fff,#c9fff8); }
.btn--ghost{ color:var(--ink); }
.btn--sm{ padding:.7rem 1.15rem; font-size:.78rem; }
.btn__arrow{ width:16px; height:16px; transition:transform .45s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px) rotate(-45deg); }

.tlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.84rem; font-weight:700; letter-spacing:.02em;
  color:var(--ink); position:relative;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); transform-origin:left; }
.tlink svg{ width:14px; height:14px; transition:transform .4s var(--ease); }
.tlink:hover svg{ transform:translate(3px,-3px); }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; padding:0; margin:0; }
.chip{
  padding:.55rem 1.05rem; border-radius:99px;
  border:1px solid var(--line);
  font-size:.75rem; font-weight:700; letter-spacing:.04em;
  color:var(--ink-dim);
  transition:all .4s var(--ease);
}
.chip:hover{ border-color:var(--line-strong); color:var(--ink); }
.chip.is-active{ background:var(--ink); color:#05060A; border-color:var(--ink); }

/* hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding-top:calc(var(--header-h) + clamp(1rem,3vh,2.5rem));
  padding-bottom:clamp(1.2rem,2.2vh,2rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg canvas{ width:100%; height:100%; }
.hero__glow{
  position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 46% at 78% 14%, rgba(124,92,255,.30), transparent 68%),
    radial-gradient(46% 40% at 12% 84%, rgba(79,240,224,.16), transparent 70%),
    radial-gradient(38% 30% at 50% 108%, rgba(255,79,163,.14), transparent 70%);
  filter:blur(6px);
  animation:glowDrift 18s var(--ease-io) infinite alternate;
}
@keyframes glowDrift{
  0%{ transform:scale(1) translate3d(0,0,0); }
  50%{ transform:scale(1.08) translate3d(-1.5%,1%,0); }
  100%{ transform:scale(1.03) translate3d(1.5%,-1.5%,0); }
}
.hero__grid{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(233,238,255,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(233,238,255,.055) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(75% 65% at 50% 40%,#000 0%,transparent 78%);
  opacity:.9;
}

.hero__inner{
  position:relative; z-index:2;
  flex:1; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.1rem,2.4vh,2.4rem);
}
.hero__kicker{
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-dim);
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 0 rgba(79,240,224,.6);
  animation:pulse 2.4s infinite; flex-shrink:0;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(79,240,224,.5); }
  70%{ box-shadow:0 0 0 12px rgba(79,240,224,0); }
  100%{ box-shadow:0 0 0 0 rgba(79,240,224,0); }
}

.hero__title{
  font-size:clamp(2.4rem, min(9.2vw, 13.5vh), 9.6rem);
  line-height:.9;
  letter-spacing:-.045em;
  font-weight:800;
  text-transform:uppercase;
}
@media (max-width:680px){
  .hero__title{ font-size:clamp(2.5rem, 12.4vw, 4.6rem); }
}
/* short viewports: tighten the hero so the footer bar stays visible */
@media (max-height:760px){
  .hero{ padding-top:calc(var(--header-h) + .5rem); }
  .hero__title{ font-size:clamp(2.2rem, min(8.4vw, 11.4vh), 7rem); }
  .hero__lead{ font-size:.9rem; line-height:1.5; }
  .hero__foot{ margin-top:.9rem; padding-top:.9rem; }
  .hero__kicker{ font-size:.6rem; }
}
@media (max-height:730px){
  .hero__title{ font-size:clamp(1.9rem, min(7vw, 9.4vh), 5rem); }
  .hero__lead{ display:none; }
  .hero__foot{ margin-top:.6rem; }
  .hero__stat b{ font-size:1.05rem; }
  .hero__cta .btn{ padding:.78rem 1.15rem; font-size:.79rem; }
  .hero__kicker{ font-size:.56rem; }
}
.hero__title .row{ display:block; }
.hero__title .outline{
  color:transparent;
  -webkit-text-stroke:1.4px rgba(233,238,255,.45);
  position:relative;
}
.hero__title .row--indent{ padding-left:clamp(0px,7vw,11rem); }

.hero__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(1.5rem,4vw,4rem);
}
.hero__lead{
  max-width:44ch; color:var(--ink-dim);
  font-size:clamp(.95rem,1.25vw,1.12rem);
  line-height:1.65;
}
.hero__lead b{ color:var(--ink); font-weight:700; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; }

.hero__floats{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.fcard{
  position:absolute; border-radius:var(--r-md); overflow:hidden;
  border:1px solid rgba(233,238,255,.14);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
  will-change:transform;
}
.fcard img{ width:100%; height:100%; object-fit:cover; }
.fcard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg,rgba(5,6,10,0) 40%,rgba(5,6,10,.55));
}
.fcard--1{ width:clamp(120px,13vw,206px); aspect-ratio:4/5; top:14%; right:6%; }
.fcard--2{ width:clamp(90px,9vw,148px); aspect-ratio:1/1; top:56%; right:20%; }
.fcard--3{ width:clamp(80px,8vw,128px); aspect-ratio:3/4; top:30%; right:26%; }
@media (max-width:1180px){ .hero__floats{ display:none; } }

.hero__foot{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding-top:clamp(1.2rem,3vw,2rem);
  border-top:1px solid var(--line);
  margin-top:clamp(1.4rem,3vw,2.4rem);
}
.hero__stats{ display:flex; gap:clamp(1.2rem,4vw,3.4rem); flex-wrap:wrap; }
.hero__stat b{
  display:block; font-family:var(--display);
  font-size:clamp(1.15rem,2.2vw,1.7rem);
  letter-spacing:-.03em; font-weight:700;
}
.hero__stat span{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mute);
}
.scrollcue{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute);
}
.scrollcue i{
  width:1px; height:38px; background:linear-gradient(var(--line-strong),transparent);
  position:relative; overflow:hidden;
}
.scrollcue i::after{
  content:""; position:absolute; top:-38px; left:0; width:1px; height:38px;
  background:var(--cyan);
  animation:cue 2.2s var(--ease-io) infinite;
}
@keyframes cue{ 0%{ transform:translateY(0); } 60%,100%{ transform:translateY(76px); } }
@media (max-width:720px){
  .hero__body{ grid-template-columns:1fr; }
  .hero__foot{ flex-direction:column; align-items:flex-start; }
  .scrollcue{ display:none; }
}

/* marquee */
.marquee{
  --speed:34s;
  position:relative;
  border-block:1px solid var(--line);
  padding-block:.95rem;
  overflow:hidden;
  background:rgba(255,255,255,.014);
  display:flex;
}
.marquee__track{
  display:flex; flex-shrink:0;
  animation:scrollX var(--speed) linear infinite;
  will-change:transform;
}
.marquee--rev .marquee__track{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scrollX{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.marquee__item{
  display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.6rem);
  padding-inline:clamp(.6rem,1.5vw,1.3rem);
  font-family:var(--display);
  font-size:clamp(.95rem,1.7vw,1.35rem);
  letter-spacing:-.02em; white-space:nowrap;
  color:rgba(233,238,255,.55);
  text-transform:uppercase;
}
.marquee__item::after{ content:"◆"; font-size:.55em; color:var(--cyan); translate:0 -.06em; }
.marquee--big{ padding-block:clamp(1.1rem,2.4vw,2rem); }
.marquee--big .marquee__item{
  font-size:clamp(1.6rem,4.6vw,3.6rem); font-weight:800;
  color:transparent;
  -webkit-text-stroke:1px rgba(233,238,255,.32);
}
.marquee--big .marquee__item:nth-child(even){ color:var(--ink); -webkit-text-stroke:0; }