/* CloudSprint v2 — neon studio experience. Original design & code. */
:root{
  --bg:#0c0d12; --bg2:#111219; --ink:#f5f4f8; --mut:#9b99a8; --line:rgba(255,255,255,.12);
  --violet:#a45cff; --pink:#ff3fa4; --cyan:#3fd9ff;
  --r-lg:26px; --r-md:18px;
  --font-px:'Silkscreen',monospace; --font-d:'Space Grotesk',sans-serif; --font-b:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font-family:var(--font-b);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.px{font-family:var(--font-px);font-weight:400;letter-spacing:.01em}
h1,h2,h3{font-family:var(--font-d);font-weight:600}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.kicker{font-size:11px;letter-spacing:.3em;color:var(--mut)}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--bg);display:flex;flex-direction:column;gap:22px;align-items:center;justify-content:center;transition:opacity .7s,visibility .7s}
.loader img{width:70px;animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader__txt{font-size:15px;letter-spacing:.28em;color:var(--mut)}
body.is-ready .loader{opacity:0;visibility:hidden}

/* ---------- header ---------- */
.hd{position:fixed;top:20px;left:20px;right:20px;z-index:100;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.hd__brand,.hd__talk,.hd__lines{pointer-events:auto}
.hd__brand{display:flex;align-items:center;gap:26px;background:#fff;color:#101116;border-radius:16px;padding:14px 22px;font-family:var(--font-d);font-size:19px}
.hd__home{display:flex;align-items:center;gap:10px;color:#101116}
.hd__brand img{width:26px}
.hd__brand b{font-weight:700}
.hd__lines{background:none;border:0;padding:8px 2px;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.hd__lines u{display:block;width:34px;height:2px;background:#101116;transition:.3s}
.hd__lines:hover u:nth-child(2){width:22px}
.hd__lines.is-open u:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hd__lines.is-open u:nth-child(2){opacity:0}
.hd__lines.is-open u:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hd__talk{background:#fff;color:#101116;border-radius:16px;padding:18px 30px;font-family:var(--font-d);font-weight:500;transition:.3s}
.hd__talk:hover{background:var(--violet);color:#fff}

/* ---------- menu overlay ---------- */
.menu{position:fixed;inset:0;z-index:90;background:rgba(12,13,18,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6vh;opacity:0;visibility:hidden;transition:.45s}
.menu.is-open{opacity:1;visibility:visible}
.menu a{font-size:clamp(28px,5vw,54px);color:var(--ink);transition:.3s}
.menu a:hover{color:var(--violet);text-shadow:0 0 30px rgba(164,92,255,.8)}

/* ---------- hero ---------- */
.hero{padding:130px 20px 0;position:relative}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start;max-width:1560px;margin:0 auto}
.hero__title{font-size:clamp(40px,6.2vw,96px);line-height:1.08;padding-top:8vh}
.hero__title span{display:inline-block}
.hero__card{border-radius:var(--r-lg);overflow:hidden;transform:rotate(0.001deg);box-shadow:0 40px 120px rgba(164,92,255,.18)}
.hero__card video{width:100%;height:min(58vh,620px);object-fit:cover}
.hero__banner{max-width:1560px;margin:26px auto 0;border-radius:var(--r-lg);overflow:hidden;position:relative;height:min(46vh,480px)}
.hero__banner img{width:100%;height:100%;object-fit:cover}
.hero__banner-copy{position:absolute;left:0;bottom:0;display:flex;gap:20px;align-items:center;background:rgba(12,13,18,.72);backdrop-filter:blur(8px);border-top-right-radius:var(--r-lg);padding:24px 34px;max-width:640px}
.hero__banner-copy p{font-size:16.5px;line-height:1.55}
.hero__arrow{font-size:28px;color:var(--violet)}
.hero__bar{max-width:1560px;margin:0 auto;display:flex;justify-content:space-between;padding:20px 4px;font-size:11px;letter-spacing:.22em;color:var(--mut)}
.hero__bar b{color:var(--ink)}

/* ---------- statement (scrub word reveal) ---------- */
.statement{max-width:1100px;margin:0 auto;padding:22vh 24px 18vh}
.statement__text{font-family:var(--font-d);font-weight:500;font-size:clamp(26px,3.6vw,48px);line-height:1.35}
.statement__text .w{color:rgba(245,244,248,.16);transition:color .25s}
.statement__text .w.on{color:var(--ink)}
.pill{display:inline-block;margin-top:46px;border:1px solid var(--line);border-radius:16px;padding:16px 30px;font-family:var(--font-d);font-weight:500;transition:.3s;background:rgba(255,255,255,.03)}
.pill:hover{background:#fff;color:#101116}
.pill--solid{background:#fff;color:#101116;border:0;cursor:pointer;font-size:15px}
.pill--solid:hover{background:var(--violet);color:#fff}

/* ---------- services ---------- */
.services{position:relative;padding:14vh 20px;overflow:hidden}
.services__bg{position:absolute;inset:0}
.services__bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.services__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(12,13,18,.35) 30%,rgba(12,13,18,.55) 70%,var(--bg) 100%)}
.services .kicker{position:relative;z-index:2;max-width:1560px;margin:0 auto 8vh}
.services__wrap{position:relative;z-index:2;max-width:1560px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.services__list{list-style:none}
.services__list li{display:flex;align-items:center;gap:22px;padding:3.2vh 0;cursor:pointer;opacity:.45;transition:.35s}
.services__list li.is-active,.services__list li:hover{opacity:1}
.services__list h2{font-size:clamp(30px,4.4vw,64px);font-weight:500}
.services__arrow{font-size:30px;color:var(--violet);opacity:0;transform:translateX(-14px);transition:.35s}
.services__list li.is-active .services__arrow{opacity:1;transform:none}
.services__card{background:rgba(16,17,23,.82);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;max-width:520px;justify-self:end;width:100%}
.services__num{font-size:12px;letter-spacing:.14em;color:var(--mut);display:block;margin-bottom:16px}
.services__media{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3}
.services__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.services__media video.is-active{opacity:1}
.services__card p{margin-top:18px;color:var(--mut);font-size:15px}

/* ---------- work ---------- */
.work{padding:18vh 0 10vh;overflow:hidden}
.work__title{font-size:clamp(38px,6vw,84px);max-width:1560px;margin:0 auto 7vh;padding:0 20px}
#workSwiper{overflow:visible;padding:0 20px;max-width:1560px;margin:0 auto}
.work__slide{width:min(560px,82vw);border-radius:var(--r-lg);overflow:hidden;position:relative;transform:scale(.97);transition:transform .4s}
.swiper-slide-active.work__slide{transform:scale(1)}
.work__slide img{width:100%;aspect-ratio:4/4.6;object-fit:cover;transition:transform .6s}
.work__slide:hover img{transform:scale(1.05)}
.work__meta{position:absolute;left:0;bottom:0;background:rgba(12,13,18,.78);backdrop-filter:blur(8px);border-top-right-radius:var(--r-md);padding:16px 24px;display:flex;flex-direction:column}
.work__meta b{font-family:var(--font-d);font-size:19px}
.work__meta span{color:var(--mut);font-size:13.5px}
.work__nav{display:flex;gap:14px;justify-content:flex-end;max-width:1560px;margin:4vh auto 0;padding:0 20px}
.work__nav button{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:14px;width:64px;height:52px;font-size:20px;cursor:pointer;transition:.3s}
.work__nav button:hover{background:#fff;color:#101116}

/* ---------- why (pinned horizontal) ---------- */
.why{position:relative}
.why__pin{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center}
.why__video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(62vh,760px);height:min(62vh,760px);object-fit:cover;border-radius:50%;opacity:.55;filter:saturate(1.15)}
.why__kicker{position:absolute;top:44px;left:44px}
.why__track{display:flex;gap:4vw;padding-left:12vw;will-change:transform}
.why__card{flex:0 0 auto;width:min(440px,80vw);background:rgba(16,17,23,.78);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px;transition:border-color .4s,background .4s,transform .4s}
.why__card span{font-size:30px;color:var(--violet)}
.why__card h3{font-size:clamp(24px,2.2vw,34px);margin:14px 0 0;font-weight:500;transition:font-size .45s}
.why__card p{color:var(--mut);font-size:15.5px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .45s,margin .45s}
.why__card.is-center{border-color:rgba(164,92,255,.6);background:rgba(20,18,30,.92);transform:translateY(-8px)}
.why__card.is-center h3{font-size:clamp(28px,2.8vw,44px)}
.why__card.is-center p{max-height:220px;opacity:1;margin-top:14px}
@media(max-width:990px){.why__pin{height:auto;padding:12vh 0}.why__track{flex-direction:column;padding:0 20px;gap:20px}.why__card p{max-height:none;opacity:1;margin-top:12px}}

/* ---------- facts ---------- */
.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.facts__row{max-width:1560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}
.facts__row>div{padding:7vh 10px;border-right:1px solid var(--line)}
.facts__row>div:last-child{border-right:0}
.facts__row b{display:block;font-size:clamp(22px,2.6vw,38px);color:var(--ink);margin-bottom:8px}
.facts__row span{color:var(--mut);font-size:14px}

/* ---------- contact ---------- */
.contact{position:relative;padding:20vh 20px;overflow:hidden}
.contact__bg{position:absolute;inset:0}
.contact__bg img{width:100%;height:100%;object-fit:cover;opacity:.16;filter:blur(2px)}
.contact__grid{position:relative;z-index:2;max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.contact__grid p{color:var(--mut);margin-bottom:22px;font-size:17px}
.contact__mail{font-size:clamp(19px,2.6vw,34px);border-bottom:2px solid var(--ink);padding-bottom:10px;transition:.3s;white-space:nowrap}
.contact__mail:hover{color:var(--violet);border-color:var(--violet)}
.contact__form{display:flex;flex-direction:column;gap:14px}
.contact__form input{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:18px 22px;color:var(--ink);font-family:var(--font-b);font-size:15px;outline:none;transition:.3s}
.contact__form input:focus{border-color:var(--violet);box-shadow:0 0 0 3px rgba(164,92,255,.2)}
.contact__form .pill--solid{margin-top:8px;align-self:flex-start;border-radius:14px;padding:18px 34px}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);padding:34px 20px}
.ft__row{max-width:1560px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--mut)}
.ft nav{display:flex;gap:26px}
.ft a:hover{color:#fff}
.ft .px{font-size:11px;letter-spacing:.2em}
.ft b{color:var(--ink)}

/* ---------- neon flicker (applied at random intervals via JS) ---------- */
@keyframes neonFlick{
  0%{filter:brightness(1)}
  12%{filter:brightness(.35) saturate(.7)}
  18%{filter:brightness(1.25)}
  28%{filter:brightness(.55)}
  36%{filter:brightness(1.15) saturate(1.2)}
  52%{filter:brightness(.85)}
  100%{filter:brightness(1)}
}
.flick{animation:neonFlick .55s steps(8,end) 1}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .hero__grid{grid-template-columns:1fr}
  .hero__card video{height:44vh}
  .services__wrap{grid-template-columns:1fr}
  .services__card{justify-self:start}
  .contact__grid{grid-template-columns:1fr;gap:44px}
  .facts__row{grid-template-columns:1fr 1fr}
  .facts__row>div:nth-child(2){border-right:0}
}
@media(max-width:700px){
  .hd{top:12px;left:12px;right:12px}
  .hd__brand{padding:11px 16px;font-size:16px}
  .hd__lines{padding:16px 18px}
  .hd__lines u{width:26px}
  .hd__talk{padding:14px 20px;font-size:14px}
  .hero{padding-top:104px}
  .hero__banner-copy{position:static;max-width:none;border-radius:0}
  .hero__banner{height:auto}
  .hero__banner img{height:38vh}
  .why__track{padding-left:20px}
  .facts__row{grid-template-columns:1fr 1fr}
  .ft__row{justify-content:center;text-align:center}
}