/* Nueva Technology. Blue #1877F2 · ink #0A0A0A · muted #555B66 · line #E3E6EB.
   One-off styles stay inline in the templates; shared patterns and hover states live here. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#050505;color:#0A0A0A;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
img{display:block}
a{color:#1877F2;text-decoration:none}
a:hover{color:#3D9BFF}
::selection{background:#1877F2;color:#fff}
input,select,textarea,button{font-family:inherit}
@keyframes nt-marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes nt-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Layout and type */
.wrap{max-width:1312px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.sec{padding:clamp(88px,12vw,160px) 0}
.bg-white{background:#fff}
.bg-alt{background:#F5F7FA}
.mono{font-family:'Geist Mono',monospace}
.eyebrow{margin:0 0 20px;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.14em;color:#1877F2}
.h2{margin:0;font-size:clamp(29px,3.3vw,46px);line-height:1.02;font-weight:800;letter-spacing:-0.035em;text-wrap:balance}
.h2.lg{font-size:clamp(32px,3.7vw,52px);line-height:1}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px}
.sec-head>p{margin:0;max-width:420px;font-size:17px;line-height:1.6;color:#555B66;text-wrap:pretty}
.rv{opacity:0}

/* Links and buttons (every link class sets its hover color so the global a:hover doesn't leak in) */
.link-ink{color:#0A0A0A}
.link-ink:hover{color:#1877F2}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:10px;transition:background .2s,border-color .2s,color .2s,transform .2s}
.btn-primary,.btn-primary:hover{color:#fff}
.btn-primary{background:#1877F2}
.btn-primary:hover{background:#3A8BFF;transform:translateY(-1px)}
.btn-ghost,.btn-ghost:hover{color:#fff}
.btn-ghost{border:1px solid rgba(255,255,255,.18)}
.btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
.btn-outline{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn-outline:hover{background:#fff;border-color:#fff;color:#0A0A0A}
.btn-white,.btn-white:hover{color:#0A0A0A}
.btn-white{background:#fff}
.btn-white:hover{background:#E8F0FD;transform:translateY(-1px)}
.btn-ink,.btn-ink:hover{color:#fff}
.btn-ink{background:#0A0A0A}
.btn-ink:hover{background:#1877F2}
.btn-line{height:44px;padding:0 18px;border-radius:10px;border:1px solid #D9DDE3;background:#fff;color:#0A0A0A;font-size:14px;font-weight:600;cursor:pointer}
.btn-line:hover{border-color:#1877F2;color:#1877F2}
.link-under,.link-under:hover{color:#fff}
.link-under{font-size:16px;border-bottom:1px solid rgba(255,255,255,.3);padding:6px 0;transition:border-color .2s}
.link-under:hover{border-color:#fff}
.round-btn{width:48px;height:48px;border-radius:50%;border:1px solid #D9DDE3;background:#fff;color:#0A0A0A;font-size:18px;cursor:pointer;transition:background .2s,color .2s}
.round-btn:hover{background:#1877F2;color:#fff;border-color:#1877F2}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.crumbs a{color:rgba(255,255,255,.5)}
.crumbs a:hover{color:#fff}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
.site-header.scrolled,.site-header.open{background:rgba(5,5,5,.72);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-color:rgba(255,255,255,.08)}
.site-header.open{background:#050505}
.nav{max-width:1312px;margin:0 auto;padding:0 clamp(20px,5vw,64px);height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand,.brand:hover{color:#fff}
.brand{display:flex;align-items:center;gap:12px;padding:8px 0}
.brand img{height:32px;width:auto}
.brand span{font-size:19px;font-weight:700;letter-spacing:-0.02em}
.nav-links{display:flex;align-items:center;gap:40px}
.nav-links a{font-size:16px;font-weight:500;letter-spacing:-0.005em;color:rgba(255,255,255,.66);transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current]{color:#fff}
.nav-cta{gap:8px;height:46px;padding:0 22px;border-radius:9px;font-size:16px;font-weight:500}
.menu-btn{display:none;width:44px;height:44px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0}
.menu-btn span{display:block;width:18px;height:1.5px;background:#fff;transition:transform .25s,opacity .2s}
.open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.open .menu-btn span:nth-child(2){opacity:0}
.open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none;height:calc(100vh - 80px);overflow-y:auto;padding:24px clamp(20px,5vw,64px) 40px;flex-direction:column;gap:4px;background:#050505}
.m-link,.m-link:hover{color:#fff}
.m-link{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:28px;font-weight:500;letter-spacing:-0.03em}
.m-link span{font-size:18px;color:rgba(255,255,255,.4)}
@media (max-width:959px){.nav-links,.nav-cta{display:none}.menu-btn{display:flex}.open .mobile-menu{display:flex}}

/* Home hero: full-bleed background video under a see-through dark layer. Small screens get an even
   layer behind the text; from 1100px it is darker behind the headline and lighter to the right. */
.hero{position:relative;overflow:hidden;background:#050505;color:#fff;min-height:min(100vh,860px);display:flex;align-items:center;padding:clamp(128px,15vw,168px) 0 clamp(72px,9vw,120px)}
.hero-media{position:absolute;inset:0}
.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:rgba(5,5,5,.74)}
@media (min-width:1100px){
  .hero-media::after{background:linear-gradient(90deg,rgba(5,5,5,.8) 0%,rgba(5,5,5,.68) 38%,rgba(5,5,5,.2) 68%,rgba(5,5,5,.08) 100%)}
  /* Nav links sit over the light video here, so the header keeps its glass bar even before scrolling */
  body:has(.hero) .site-header{background:rgba(5,5,5,.72);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-color:rgba(255,255,255,.08)}
}

/* Partner logos */
.logos img{filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
.logos img:hover{filter:none;opacity:1}

/* Video play button */
.play{position:relative;width:96px;height:96px;border-radius:50%;border:0;background:#1877F2;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 16px rgba(24,119,242,.18),0 20px 40px -12px rgba(24,119,242,.6);transition:transform .2s}
.play:hover{transform:scale(1.06)}

/* Services carousel: site.js spins and drags the track. pan-y leaves vertical swipes to the page, and
   overflow-y:hidden stops the tilted cards' overhang from making the track itself scroll vertically. */
.svc-track{position:relative;margin-top:8px;display:flex;gap:24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:48px 0 140px;outline:none;cursor:grab;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none}
.svc-track::-webkit-scrollbar{display:none}
.svc-track:focus-visible{outline:2px solid #1877F2;outline-offset:-2px}
.svc-track.dragging,.svc-track.dragging a{cursor:grabbing}
@media (max-width:640px){.svc-track{padding:32px 0 64px}}
.svc-item{flex:none;width:320px;transform-origin:50% 120%}
.svc-card,.svc-card:hover{color:#0A0A0A}
.svc-card{position:relative;display:flex;flex-direction:column;min-height:340px;height:100%;padding:28px;border-radius:12px;background:#fff;border:1px solid #E3E6EB;transition:border-color .25s,transform .25s,box-shadow .25s}

/* Technology grid */
.tech-grid{margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(calc(50% - 1px),196px),1fr));gap:1px;background:#E3E6EB;border:1px solid #E3E6EB;border-radius:12px;overflow:hidden}
.tech-grid>div{background:#fff;padding:28px 24px;min-height:128px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;transition:background .2s}
.tech-grid>div:hover{background:#F5F8FE}
@media (max-width:420px){.tech-grid>div{padding:22px 14px}}
.tech-grid img{width:40px;height:40px;object-fit:contain}
.tech-grid span{font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-0.02em}

/* Work cards */
.work-media{display:flex;align-items:center;justify-content:center;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#EEF3FB,#F7F9FC);aspect-ratio:16/11;position:relative;border:1px solid #E3E6EB;transition:transform .35s}
.work-media:hover{transform:translateY(-4px)}
.work-media img{position:relative;width:88%;height:auto;max-height:88%;object-fit:contain;border-radius:10px;border:1px solid #E3E6EB;box-shadow:0 24px 50px -24px rgba(10,10,10,.35)}
.work-media.glow{background:radial-gradient(ellipse 70% 60% at 50% 100%,rgba(24,119,242,.18),transparent 70%),linear-gradient(160deg,#EEF3FB,#F7F9FC)}
.work-media.glow img{border-color:rgba(255,255,255,.12);box-shadow:0 24px 60px -20px rgba(24,119,242,.5)}

/* Process: vertical timeline, horizontal from 900px */
.process{list-style:none;margin:56px 0 0;padding:0;display:flex;flex-direction:column;position:relative}
.process::before{content:"";position:absolute;top:8px;bottom:8px;left:7px;width:1px;background:linear-gradient(180deg,#1877F2,#E3E6EB)}
.process li{position:relative;padding:0 0 44px 44px}
.process .dot{position:absolute;left:0;top:2px;display:block;width:15px;height:15px;border-radius:50%;background:#fff;border:1.5px solid #1877F2}
.process .num{font-size:12px;color:#1877F2}
.process h3{margin:10px 0 8px;font-size:24px;font-weight:700;letter-spacing:-0.02em}
.process p{margin:0;font-size:15.5px;line-height:1.6;color:#555B66}
@media (min-width:900px){
  .process{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
  .process::before{top:7px;bottom:auto;left:0;right:0;width:auto;height:1px;background:linear-gradient(90deg,#1877F2,#E3E6EB 80%)}
  .process li{padding:0 16px 0 0}
  .process .dot{position:static;box-shadow:0 0 0 5px #fff}
  .process .num{margin-top:36px}
  .process h3{margin:14px 0 10px;font-size:26px}
  .process p{text-wrap:pretty}
}

/* Blog */
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid #E3E6EB;border-radius:14px;overflow:hidden;transition:border-color .25s,transform .25s}
.post-card:hover{border-color:#1877F2;transform:translateY(-4px)}
.cover-ph{background:repeating-linear-gradient(135deg,#EEF1F5 0 10px,#F6F8FA 10px 20px);display:flex;align-items:center;justify-content:center;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.06em;color:#8A909B}
.more-card,.more-card:hover{color:#0A0A0A}
.more-card{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:14px;background:#fff;border:1px solid #E3E6EB;transition:border-color .25s,transform .25s}
.more-card:hover{border-color:#1877F2;transform:translateY(-3px)}
.prose p{margin:0 0 24px;font-size:clamp(17px,1.3vw,19px);line-height:1.75;color:#2A2F38;text-wrap:pretty}
.prose h2{margin:48px 0 16px;font-size:clamp(24px,2.2vw,30px);line-height:1.2;font-weight:800;letter-spacing:-0.025em;color:#0A0A0A}
.prose blockquote{margin:40px 0;padding:28px 32px;border-radius:14px;background:#F0F5FE;font-size:clamp(20px,1.8vw,24px);line-height:1.4;font-weight:700;letter-spacing:-0.015em;color:#0A0A0A;text-wrap:balance}
.prose ul{margin:0 0 28px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.prose li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:clamp(17px,1.3vw,18px);line-height:1.6;color:#2A2F38}
.prose li::before{content:"";margin-top:10px;width:8px;height:8px;border-radius:2px;background:#1877F2}

/* About: event photo marquee */
.event-photo{flex:none;width:clamp(150px,15vw,210px);aspect-ratio:4/5;margin-right:12px;border-radius:14px;overflow:hidden;background:#E3E6EB}
.event-photo img{width:100%;height:100%;object-fit:cover}

/* Contact cards */
.info-card{border:1px solid #E3E6EB;border-radius:14px;padding:clamp(24px,3vw,32px);background:#FBFCFD;display:flex;flex-direction:column;gap:12px}
.info-card .label{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.1em;color:#8A909B}
.info-card .value{font-size:clamp(19px,1.8vw,24px);font-weight:600;letter-spacing:-0.02em;overflow-wrap:anywhere}
.info-card .note{font-size:14.5px;color:#555B66}

/* Social icon buttons: dark by default, .light on white backgrounds */
.social{display:flex;gap:10px}
.social a{width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;color:#fff;transition:border-color .2s,background .2s,color .2s}
.social.light a{border-color:#E3E6EB;background:#fff;color:#0A0A0A}
.social a:hover,.social.light a:hover{border-color:#1877F2;background:#1877F2;color:#fff}

/* Footer. The brand block spans two columns only when two fit (below ~450px the grid is one column). */
.f-brand{grid-column:span 2}
@media (max-width:449px){.f-brand{grid-column:auto}}
.f-mail{font-size:15px;color:#fff}
.f-mail:hover{color:#4D9BFF}
.f-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.f-links a{display:inline-block;padding:6px 0;font-size:15px;color:rgba(255,255,255,.8);transition:color .2s}
.f-links a:hover,.f-legal a:hover{color:#fff}
.f-legal a{color:rgba(255,255,255,.5)}

/* Chat support */
.chat{position:fixed;right:clamp(16px,2.5vw,28px);bottom:clamp(16px,2.5vw,28px);z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.chat-panel{width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow-y:auto;border-radius:18px;background:#0B0F17;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.chat-panel[hidden]{display:none}
.chat-opt,.chat-opt:hover{color:#fff}
.chat-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;transition:background .2s}
.chat-opt:hover{background:rgba(255,255,255,.06)}
.chat-opt .ico{width:44px;height:44px;flex:none;border-radius:10px;background:rgba(24,119,242,.16);color:#6FB1FF;display:flex;align-items:center;justify-content:center}
.chat-opt .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chat-opt b{font-size:15px}
.chat-opt small{font-size:13px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-toggle{height:56px;padding:0 20px 0 16px;border-radius:999px;border:0;background:#1877F2;color:#fff;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 16px 40px -12px rgba(24,119,242,.7);transition:transform .2s,background .2s}
.chat-toggle:hover{background:#3A8BFF;transform:translateY(-2px)}