@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

* ,

body{

    font-family: "Geist", sans-serif !important;

}


:root,

[data-provab_landing="dark"] {

  --amber:        #F0A500;

  --amber-dim:    #C47F00;

  --amber-bright: #FFB800;

  --amber-glow:   rgba(240,165,0,0.16);

  --amber-edge:   rgba(240,165,0,0.5);



  --bg-base:    #0D0D0D;

  --bg-alt:     #111111;

  --bg-surface: #161616;

  --bg-panel:   #1E1E1E;

  --bg-card:    #1A1A1A;



  --line:       rgba(255,255,255,0.07);

  --line-mid:   rgba(255,255,255,0.11);

  --line-strong:rgba(255,255,255,0.16);



  --text-1:  #F2F2ED;

  --text-2:  #9A9A94;

  --text-3:  #55554F;



  --nav-scrolled-bg: rgba(13,13,13,0.88);

  --pre-bg:          #0D0D0D;

  --shadow-card:     0 2px 24px rgba(0,0,0,0.5);

  --shadow-glow:     0 16px 48px rgba(240,165,0,0.35);



  --grid-color: rgba(255,255,255,0.04);

  --orb-white:  rgba(255,255,255,0.03);

  --noise-opacity: 0.025;



  --outline-text-stroke: rgba(255,255,255,0.18);



  --toggle-bg:     #1E1E1E;

  --toggle-border: rgba(255,255,255,0.12);

  --toggle-knob:   #F0A500;

}



[data-provab_landing="light"] {

  --amber:        #D4880A;

  --amber-dim:    #A86500;

  --amber-bright: #F0A500;

  --amber-glow:   rgba(212,136,10,0.12);

  --amber-edge:   rgba(212,136,10,0.4);



  --bg-base:    #FAFAF8;

  --bg-alt:     #F4F3EF;

  --bg-surface: #FFFFFF;

  --bg-panel:   #F0EFE9;

  --bg-card:    #FFFFFF;



  --line:       rgba(0,0,0,0.07);

  --line-mid:   rgba(0,0,0,0.1);

  --line-strong:rgba(0,0,0,0.15);



  --text-1:  #1A1A18;

  --text-2:  #6B6B64;

  --text-3:  #A8A89E;



  --nav-scrolled-bg: rgba(250,250,248,0.92);

  --pre-bg:          #FAFAF8;

  --shadow-card:     0 2px 24px rgba(0,0,0,0.08);

  --shadow-glow:     0 16px 48px rgba(212,136,10,0.28);



  --grid-color: rgba(0,0,0,0.04);

  --orb-white:  rgba(212,136,10,0.06);

  --noise-opacity: 0.018;



  --outline-text-stroke: rgba(0,0,0,0.15);



  --toggle-bg:     #FFFFFF;

  --toggle-border: rgba(0,0,0,0.14);

  --toggle-knob:   #D4880A;

}



*, *::before, *::after {

  margin: 0; padding: 0; box-sizing: border-box;

}

body, nav, .service-card, .project-row, .process-step,

.tech-item, .testi-card, footer, .marquee-section,

.hero-stats, .hero-stat, .stat-num, .stat-lbl,

.section-title, .section-sub, .section-label,

#back-top, .social-btn, .footer-col ul li a,

.footer-links a, .proj-tag, .modal {

  transition:

    background-color 0.5s ease,

    color 0.5s ease,

    border-color 0.5s ease,

    box-shadow 0.5s ease;

}



html { scroll-behavior: smooth; font-size: 16px; }



body {

  font-family: 'DM Sans', sans-serif;

  background: var(--bg-base);

  color: var(--text-1);

  overflow-x: hidden;

  cursor: none;

}

.cursor {

  position: fixed;

  pointer-events: none;

  z-index: 9999;

  top: 0; left: 0;

}

.cursor__dot {

  width: 6px; height: 6px;

  background: var(--amber);

  border-radius: 50%;

  position: absolute;

  transform: translate(-50%,-50%);

  transition: transform 0.1s, background 0.5s;

}

.cursor__ring {

  width: 36px; height: 36px;

  border: 1.5px solid var(--amber-edge);

  border-radius: 50%;

  position: absolute;

  transform: translate(-50%,-50%);

  transition:

    width 0.35s cubic-bezier(0.16,1,0.3,1),

    height 0.35s cubic-bezier(0.16,1,0.3,1),

    border-color 0.35s, background 0.35s;

}

body.cursor-hover .cursor__ring {

  width: 54px; height: 54px;

  border-color: var(--amber);

  background: var(--amber-glow);

}

body.cursor-hover .cursor__dot { transform: translate(-50%,-50%) scale(2.2); }




.pageToggle {

  position: relative;

  width: 52px; height: 28px;

  background: var(--toggle-bg);

  border: 1.5px solid var(--toggle-border);

  border-radius: 14px;

  cursor: none;

  flex-shrink: 0;

  transition: background 0.4s, border-color 0.4s;

  overflow: hidden;

}

.pageToggle:hover { border-color: var(--amber); }

.toggle-track {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 6px;

  pointer-events: none;

}

.toggle-icon {

  font-size: 11px;

  line-height: 1;

  transition: opacity 0.3s;

}

.icon-sun  { opacity: 1; }

.icon-moon { opacity: 0.1; }

[data-provab_landing="light"] .icon-sun  { opacity: 0.1; }
[data-provab_landing="light"] .icon-moon { opacity: 1; }

.icon-sun img{

    width: 25px;

    margin-left: 1px;

    filter: brightness(0) saturate(100%) invert(64%) sepia(97%) saturate(749%) hue-rotate(2deg) brightness(102%) contrast(101%);

}

.icon-moon img{

    width: 17px;


    filter: brightness(0) saturate(100%) invert(64%) sepia(97%) saturate(749%) hue-rotate(2deg) brightness(102%) contrast(101%);

}

.toggle-knob {

  position: absolute;

  top: 3px; left: 3px;

  width: 20px; height: 20px;

  background: var(--toggle-knob);

  border-radius: 50%;

  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.4s;

  box-shadow: 0 2px 8px rgba(0,0,0,0.25);

}

[data-provab_landing="light"] .toggle-knob { transform: translateX(24px); }


#preloader {

  position: fixed; inset: 0;

  background: var(--pre-bg);

  z-index: 10000;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 40px;

  transition: background 0.5s;

}

.pre-logo {

  display: flex; align-items: left; gap: 0px;

  opacity: 0; transform: translateY(20px);

  animation: preLogoIn 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;

}

@keyframes preLogoIn { to { opacity:1; transform:translateY(0); } }

.pre-chevron { width: 200px; height: 38px; }

.pre-chevron svg { width: 100%; height: 100%; }

.pre-wordmark {

  font-family: 'Syne', sans-serif;

  font-weight: 800; font-size: 2.4rem;

  letter-spacing: 0.12em; color: var(--text-1);

}

.pre-bar-wrap {

  width: 240px; height: 2px;

  background: var(--line-strong);

  border-radius: 2px; overflow: hidden;

  opacity: 0; animation: fadeIn 0.5s ease 0.6s forwards;

}

.pre-bar {

  height: 100%; width: 0%;

  background: linear-gradient(90deg, var(--amber-dim), var(--amber));

  border-radius: 2px; transition: width 0.05s linear;

}

.pre-count {

  font-family: 'Space Mono', monospace;

  font-size: 0.75rem; color: var(--text-3);

  letter-spacing: 0.2em;

  opacity: 0; animation: fadeIn 0.5s ease 0.6s forwards;

}

@keyframes fadeIn { to { opacity:1; } }



.noise {

  position: fixed; inset: 0; z-index: 1;

  pointer-events: none;

  opacity: var(--noise-opacity);

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  background-size: 200px;

  animation: noiseShift 0.5s steps(1) infinite;

  transition: opacity 0.5s;

}

@keyframes noiseShift {

  0%  { transform: translate(0,0); }

  25% { transform: translate(-5px,3px); }

  50% { transform: translate(3px,-4px); }

  75% { transform: translate(-2px,6px); }

}


#progress-bar {

  position: fixed; top: 0; left: 0; height: 2px;

  background: linear-gradient(90deg, var(--amber-dim), var(--amber));

  z-index: 10001; width: 0%; transition: width 0.1s linear;

}



nav {

  position: fixed; top: 0; left: 0; right: 0;

  z-index: 1000; padding: 26px 48px;

  display: flex; align-items: center;

  justify-content: space-between;

  transition: padding 0.5s cubic-bezier(0.16,1,0.3,1), background 0.5s, border-color 0.5s;

}

nav.scrolled {

  padding: 16px 48px;

  background: var(--nav-scrolled-bg);

  backdrop-filter: blur(24px) saturate(1.5);

  border-bottom: 1px solid var(--line);

}

.nav-left { display: flex; align-items: center; gap: 65px; }

.nav-logo {

  display: flex; align-items: center; gap: 10px;

  text-decoration: none;

}

.nav-chevron svg { width: 26px; height: 22px; }

.nav-wordmark {

  font-family: 'Syne', sans-serif;

  font-weight: 800; font-size: 1.2rem;

  letter-spacing: 0.14em; color: var(--text-1);

  transition: color 0.5s;

}

.nav-links {

  display: flex; list-style: none;

  gap: 36px; align-items: center;

}

.nav-links a {

  font-size: 0.875rem; font-weight: 400;

  color: var(--text-2); text-decoration: none;

  letter-spacing: 0.04em; position: relative;

  transition: color 0.3s;

}

.nav-links a::after {

  content: ''; position: absolute;

  bottom: -3px; left: 0;

  width: 0; height: 1px;

  background: var(--amber);

  transition: width 0.35s cubic-bezier(0.16,1,0.3,1);

}

.nav-links a:hover { color: var(--text-1); }

.nav-links a:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 16px; }

.nav-cta {

  display: inline-flex; align-items: center; gap: 8px;

  background: var(--amber); color: var(--bg-base) !important;

  font-weight: 600; padding: 10px 22px;

  border-radius: 6px; font-size: 0.85rem;

  letter-spacing: 0.06em; text-decoration: none;

  transition: background 0.3s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;

}

.nav-cta:hover {

  background: var(--amber-bright);

  transform: translateY(-2px);

  box-shadow: var(--shadow-glow);

}

.nav-cta::after { display: none !important; }



.hero {

  min-height: 100vh;

  display: flex; flex-direction: column;

  justify-content: flex-end;

  padding: 0 48px 80px;

  position: relative; overflow: hidden;

}

.hero-bg { position: absolute; inset: 0; z-index: 0; }

.hero-grid {

  position: absolute; inset: 0;

  background-image:

    linear-gradient(var(--grid-color) 1px, transparent 1px),

    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);

  background-size: 80px 80px;

  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);

  animation: gridPulse 8s ease-in-out infinite;

  transition: opacity 0.5s;

}

@keyframes gridPulse { 0%,100%{opacity:0.6;} 50%{opacity:1;} }

.hero-orb {

  position: absolute; border-radius: 50%;

  filter: blur(120px); pointer-events: none; will-change: transform;

}

.orb-amber {

  width: 700px; height: 700px;

  background: radial-gradient(circle, var(--amber-glow) 0%, transparent 70%);

  top: -200px; right: -100px;

  animation: orbDrift 20s ease-in-out infinite;

}

.orb-secondary {

  width: 400px; height: 400px;

  background: radial-gradient(circle, var(--orb-white) 0%, transparent 70%);

  bottom: 0; left: 20%;

  animation: orbDrift 25s ease-in-out infinite reverse;

  transition: background 0.5s;

}

@keyframes orbDrift {

  0%,100%{transform:translate(0,0) scale(1);}

  33%{transform:translate(40px,-60px) scale(1.08);}

  66%{transform:translate(-30px,40px) scale(0.94);}

}

.hero-slash {

  position: absolute; top: 0; right: 220px;

  width: 1px; height: 100%;

  background: linear-gradient(180deg, transparent, var(--amber-edge) 40%, transparent);

  opacity: 0.35;

  animation: slashReveal 1.5s cubic-bezier(0.16,1,0.3,1) 1.2s both;

}

@keyframes slashReveal { from{transform:scaleY(0);} to{transform:scaleY(1);} }



.hero-content { position: relative; z-index: 2; max-width: 1100px; margin-top: 105px; }

.hero-eyebrow {

  display: flex; align-items: center; gap: 14px;

  margin-bottom: 32px;

  opacity: 0; transform: translateY(24px);

  animation: slideUp 0.9s cubic-bezier(0.16,1,0.3,1) 1.4s forwards;

}

.eyebrow-line { width: 40px; height: 1px; background: var(--amber); transition: background 0.5s; }

.eyebrow-text {

  font-family: 'Space Mono', monospace;

  font-size: 0.7rem; letter-spacing: 0.25em;

  color: var(--amber); text-transform: uppercase;

  transition: color 0.5s;

}

.hero-title {

  font-family: 'Syne', sans-serif;

  font-weight: 800;

  font-size: clamp(3.8rem, 9vw, 9rem);

  line-height: 0.95; letter-spacing: -0.025em;

  margin-bottom: 40px;

}

.hero-title .line { display: block; overflow: hidden; }

.hero-title .line span {

  display: block; opacity: 0; transform: translateY(110%);

}

.hero-title .line:nth-child(1) span { animation: lineReveal 1s cubic-bezier(0.16,1,0.3,1) 1.5s forwards; }

.hero-title .line:nth-child(2) span { animation: lineReveal 1s cubic-bezier(0.16,1,0.3,1) 1.65s forwards; }

.hero-title .line:nth-child(3) span { animation: lineReveal 1s cubic-bezier(0.16,1,0.3,1) 1.8s forwards; }

@keyframes lineReveal { to{opacity:1;transform:translateY(0);} }



.hero-title .accent { color: var(--amber); transition: color 0.5s; }

.hero-title .outline {

  -webkit-text-stroke: 2px var(--outline-text-stroke);

  color: transparent;

  transition: -webkit-text-stroke-color 0.5s;

}

.hero-bottom {

  display: flex; align-items: flex-end;

  justify-content: space-between; gap: 48px;

  opacity: 0; transform: translateY(20px);

  animation: slideUp 0.9s cubic-bezier(0.16,1,0.3,1) 2s forwards;

}

@keyframes slideUp { to{opacity:1;transform:translateY(0);} }

.hero-desc {

  max-width: 420px; font-size: 1.05rem;

  line-height: 1.75; color: var(--text-2); font-weight: 300;

  transition: color 0.5s;

}

.hero-desc strong { color: var(--text-1); font-weight: 500; transition: color 0.5s; }

.hero-actions { display: flex; gap: 16px; align-items: center; flex-shrink: 0; }



.btn-primary {

  display: inline-flex; align-items: center; gap: 10px;

  background: var(--amber); color: var(--bg-base);

  font-family: 'DM Sans', sans-serif;

  font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em;

  padding: 16px 32px; border-radius: 6px; text-decoration: none;

  transition: background 0.3s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, color 0.3s;

}

.btn-primary:hover {

  background: var(--amber-bright); transform: translateY(-3px);

  box-shadow: var(--shadow-glow);

}

.btn-primary svg { transition: transform 0.3s; }

.btn-primary:hover svg { transform: translate(3px,-3px); }

.btn-ghost {

  display: inline-flex; align-items: center; gap: 10px;

  color: var(--text-2); font-family: 'DM Sans', sans-serif;

  font-weight: 400; font-size: 0.9rem; letter-spacing: 0.04em;

  text-decoration: none; padding: 16px 24px;

  border: 1px solid var(--line-strong); border-radius: 6px;

  transition: color 0.3s, border-color 0.3s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.3s;

}

.btn-ghost:hover {

  color: var(--text-1); border-color: var(--text-3);

  transform: translateY(-3px); background: var(--bg-panel);

}



.scroll-hint {

  position: absolute; bottom: 48px; right: 48px; z-index: 2;

  display: flex; flex-direction: column; align-items: center; gap: 10px;

  opacity: 0; animation: fadeIn 1s ease 2.5s forwards;

}

.scroll-hint span {

  font-family: 'Space Mono', monospace; font-size: 0.6rem;

  letter-spacing: 0.2em; color: var(--text-3);

  writing-mode: vertical-rl; transition: color 0.5s;

}

.scroll-line {

  width: 1px; height: 60px;

  background: linear-gradient(180deg, var(--amber), transparent);

  animation: scrollPulse 2s ease-in-out infinite;

}

@keyframes scrollPulse { 0%,100%{transform:scaleY(1);opacity:0.6;} 50%{transform:scaleY(0.5);opacity:1;} }



.hero-stats {

  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;

  border-top: 1px solid var(--line);

  background: var(--bg-base);

  backdrop-filter: blur(10px);

  display: flex; overflow: hidden;

  transition: background 0.5s, border-color 0.5s;

  position: relative;

  top: 35px;

}


[data-provab_landing="light"] .hero-stats {

  background: rgba(244,243,239,0.9);

}



.hero-stat {

  flex: 1; padding: 22px 36px;

  border-right: 1px solid var(--line);

  opacity: 0; transform: translateY(20px);

}

.hero-stat:last-child { border-right: none; }

.hero-stat:nth-child(1){animation:slideUp 0.7s cubic-bezier(0.16,1,0.3,1) 2.1s forwards;}

.hero-stat:nth-child(2){animation:slideUp 0.7s cubic-bezier(0.16,1,0.3,1) 2.2s forwards;}

.hero-stat:nth-child(3){animation:slideUp 0.7s cubic-bezier(0.16,1,0.3,1) 2.3s forwards;}

.hero-stat:nth-child(4){animation:slideUp 0.7s cubic-bezier(0.16,1,0.3,1) 2.4s forwards;}

.stat-num {

  font-family: 'Syne', sans-serif; font-weight: 700;

  font-size: 1.9rem; color: var(--amber); line-height: 1;

  margin-bottom: 4px; transition: color 0.5s;

}

.stat-lbl {

  font-size: 0.75rem; color: var(--text-3);

  letter-spacing: 0.08em; text-transform: uppercase;

  transition: color 0.5s;

}


.marquee-section {

  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);

  background: var(--bg-surface); padding: 16px 0; overflow: hidden;

  position: relative; z-index: 2;

  transition: background 0.5s, border-color 0.5s;

}

.marquee-track {

  display: flex; gap: 0;

  animation: marquee 30s linear infinite; white-space: nowrap;

}

.marquee-track:hover { animation-play-state: paused; }

@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

.marquee-item {

  display: inline-flex; align-items: center; gap: 20px;

  padding: 0 36px;

  font-family: 'Space Mono', monospace; font-size: 0.68rem;

  letter-spacing: 0.2em; color: var(--text-3); text-transform: uppercase;

  flex-shrink: 0; transition: color 0.5s;

}

.marquee-dot {

  width: 5px; height: 5px; border-radius: 50%;

  background: var(--amber); flex-shrink: 0; transition: background 0.5s;

}

.container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }



.section-label {

  display: flex; align-items: center; gap: 12px; margin-bottom: 28px;

  opacity: 0; transform: translateY(20px);

  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);

}

.section-label.visible { opacity:1; transform:translateY(0); }

.label-line { width: 32px; height: 1px; background: var(--amber); transition: background 0.5s; }

.label-text {

  font-family: 'Space Mono', monospace; font-size: 0.65rem;

  letter-spacing: 0.22em; color: var(--amber);

  text-transform: uppercase; transition: color 0.5s;

}

.section-title {

  font-family: 'Syne', sans-serif; font-weight: 800;

  font-size: clamp(2.4rem, 5vw, 4.5rem);

  letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 24px;

  opacity: 0; transform: translateY(30px);

  transition: opacity 1s cubic-bezier(0.16,1,0.3,1) 0.1s, transform 1s cubic-bezier(0.16,1,0.3,1) 0.1s, color 0.5s;

}

.section-title.visible { opacity:1; transform:translateY(0); }

.section-sub {

  font-size: 1.05rem; color: var(--text-2); line-height: 1.75;

  font-weight: 300; max-width: 540px;

  opacity: 0; transform: translateY(20px);

  transition: opacity 1s cubic-bezier(0.16,1,0.3,1) 0.2s, transform 1s cubic-bezier(0.16,1,0.3,1) 0.2s, color 0.5s;

}

.section-sub.visible { opacity:1; transform:translateY(0); }



.services { padding: 140px 0 100px; background: var(--bg-base); transition: background 0.5s; }

.services-layout {

  display: grid; grid-template-columns: 1fr 1.6fr;

  gap: 80px; align-items: start; margin-top: 20px;

}

.services-sticky { position: sticky; top: 120px; }

.services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }



.service-card {

  background: var(--bg-surface); padding: 40px 36px;

  border: 1px solid var(--line); position: relative; overflow: hidden;

  opacity: 0; transform: translateY(30px);

  transition:

    opacity 0.8s cubic-bezier(0.16,1,0.3,1),

    transform 0.8s cubic-bezier(0.16,1,0.3,1),

    border-color 0.4s, background 0.5s, box-shadow 0.4s;

}

.service-card.visible { opacity:1; transform:translateY(0); }

.service-card::before {

  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;

  background: linear-gradient(90deg, var(--amber), var(--amber-dim));

  transform: scaleX(0); transform-origin: left;

  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);

}

.service-card:hover {

  border-color: var(--line-strong);

  background: var(--bg-panel);

  box-shadow: var(--shadow-card);

}

.service-card:hover::before { transform: scaleX(1); }

.service-icon { width: 44px; height: 44px; margin-bottom: 24px; color: var(--amber); transition: color 0.5s; }
.service-icon img{width: 55px;
    position: relative;
    bottom: 15px;filter: invert(67%) sepia(77%) saturate(615%) hue-rotate(2deg) brightness(98%) contrast(101%);}
    .service-icon i{
      font-size: 42px;
    position: relative;
    bottom: 15px; color: #f3bb03;
    }
.service-num {

  position: absolute; top: 36px; right: 36px;

  font-family: 'Space Mono', monospace; font-size: 1.2rem;

  color: var(--text-3); letter-spacing: 0.1em; transition: color 0.5s;

}

.service-name {

  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.15rem;

  margin-bottom: 12px; color: var(--text-1); transition: color 0.5s;

}

.service-desc {

  font-size: 0.88rem; color: var(--text-2);

  line-height: 1.7; font-weight: 300; transition: color 0.5s;

}

/* .service-arrow {

  display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;

  font-size: 0.78rem; color: var(--amber); font-weight: 500; letter-spacing: 0.04em;

  opacity: 0; transform: translateX(-8px);

  transition: opacity 0.3s, transform 0.3s, color 0.5s;

} */
.service-arrow-link{
   display: inline-flex; align-items: center; gap: 6px; margin-top: 20px;

  font-size: 0.78rem; color: var(--amber); font-weight: 500; letter-spacing: 0.04em;

  opacity: 0; transform: translateX(-8px);

  transition: opacity 0.3s, transform 0.3s, color 0.5s;
  text-decoration: none;
}

.service-card:hover .service-arrow-link { opacity:1; transform:translateX(0); text-decoration: none; }


.work {

  padding: 140px 0; background: var(--bg-alt);

  overflow: hidden; transition: background 0.5s;

}

.work-header {

  display: flex; align-items: flex-end;

  justify-content: space-between; margin-bottom: 64px;

}

.view-all {

  display: flex; align-items: center; gap: 8px;

  font-size: 0.85rem; color: var(--text-2); text-decoration: none;

  letter-spacing: 0.06em;

  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;

  transition: color 0.3s, border-color 0.3s;

}

.view-all:hover { color: var(--amber); border-color: var(--amber); }

.projects-list { display: flex; flex-direction: column; }

.project-row {

  display: grid;

  grid-template-columns: 80px 1fr 200px 120px;

  align-items: center; gap: 40px;

  padding: 30px 0; border-bottom: 1px solid var(--line);

  text-decoration: none; color: inherit;

  position: relative; overflow: hidden;

  opacity: 0; transform: translateY(20px);

  transition:

    opacity 0.7s cubic-bezier(0.16,1,0.3,1),

    transform 0.7s cubic-bezier(0.16,1,0.3,1),

    border-color 0.5s;

}

.project-row.visible { opacity:1; transform:translateY(0); }

.project-row::after {

  content: ''; position: absolute; inset: 0;

  background: var(--bg-surface);

  transform: translateX(-101%);

  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1);

  z-index: 0;

}

.project-row:hover::after { transform: translateX(0); }

.project-row > * { position: relative; z-index: 1; }

.proj-num {

  font-family: 'Space Mono', monospace; font-size: 0.65rem;

  color: var(--text-3); letter-spacing: 0.1em; transition: color 0.5s;

}

.proj-name {

  font-family: 'Syne', sans-serif; font-weight: 700;

  font-size: 1.45rem; letter-spacing: -0.01em;

  color: var(--text-1); transition: color 0.3s;

}

.project-row:hover .proj-name { color: var(--amber); }

.proj-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.proj-tag {

  font-size: 0.7rem; color: var(--text-3);

  border: 1px solid var(--line-strong); padding: 4px 12px;

  border-radius: 3px; letter-spacing: 0.06em;

  transition: color 0.3s, border-color 0.3s, background 0.5s;

}

.project-row:hover .proj-tag { color: var(--text-2); border-color: var(--text-3); }

.proj-arrow {

  text-align: right; color: var(--text-3);

  transition: color 0.3s, transform 0.3s;

}

.project-row:hover .proj-arrow { color: var(--amber); transform: translate(4px,-4px); }



.project-preview {

  position: fixed; pointer-events: none; z-index: 999;

  width: 320px; height: 200px; border-radius: 12px;

  overflow: hidden; opacity: 0;

  transform: scale(0.88) rotate(-2deg);

  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1);

  border: 1px solid var(--line-strong);

  box-shadow: var(--shadow-card);

}

.project-preview.visible { opacity:1; transform:scale(1) rotate(0deg); }

.project-preview-inner {

  width: 100%; height: 100%; background: var(--bg-panel);

  display: flex; align-items: center; justify-content: center;

}




.process { padding: 140px 0; background: var(--bg-base); transition: background 0.5s; }

.process-steps {

  display: grid; grid-template-columns: repeat(4,1fr);

  gap: 2px; margin-top: 80px;

}

.process-step {

  background: var(--bg-surface); padding: 48px 36px;

  border: 1px solid var(--line); position: relative;

  opacity: 0; transform: translateY(30px);

  transition:

    opacity 0.8s cubic-bezier(0.16,1,0.3,1),

    transform 0.8s cubic-bezier(0.16,1,0.3,1),

    border-color 0.4s, background 0.5s;

}

.process-step.visible { opacity:1; transform:translateY(0); }

.process-step:hover { border-color: var(--amber-edge); }

.step-big-num {

  font-family: 'Syne', sans-serif; font-weight: 800;

  font-size: 4.5rem; line-height: 1;

  color: var(--line-strong); margin-bottom: 28px;

  transition: color 0.4s;

}

.process-step:hover .step-big-num { color: var(--amber-glow); }

[data-provab_landing="light"] .step-big-num { color: rgba(0,0,0,0.08); }

[data-provab_landing="light"] .process-step:hover .step-big-num { color: rgba(212,136,10,0.25); }

.step-name {

  font-family: 'Syne', sans-serif; font-weight: 700;

  font-size: 1.15rem; margin-bottom: 12px; color: var(--text-1); transition: color 0.5s;

}

.step-desc {

  font-size: 0.88rem; color: var(--text-2);

  line-height: 1.7; font-weight: 300; transition: color 0.5s;

}

.step-connector {

  position: absolute; top: 48px; right: -1px;

  width: 20px; height: 1px; background: var(--amber); z-index: 1;

  transition: background 0.5s;

}

.process-step:last-child .step-connector { display: none; }



.tech { padding: 0px 0; background: var(--bg-alt); overflow: hidden; transition: background 0.5s; }

.tech-grid {

  display: grid; grid-template-columns: repeat(6,1fr);

  gap: 2px; margin-top: 80px;

}

.tech-item {

  background: var(--bg-surface); border: 1px solid var(--line);

  padding: 36px 24px; text-align: center;

  opacity: 0; transform: translateY(20px) scale(0.95);

  transition:

    opacity 0.6s cubic-bezier(0.16,1,0.3,1),

    transform 0.6s cubic-bezier(0.34,1.56,0.64,1),

    background 0.5s, border-color 0.4s, box-shadow 0.4s;

}

.tech-item.visible { opacity:1; transform:translateY(0) scale(1); }

.tech-item:hover {

  background: var(--bg-panel); border-color: var(--amber-edge);

  transform: translateY(-6px) scale(1.02);

  box-shadow: var(--shadow-card); z-index: 1;

}

/* .tech-emoji { font-size: 2.2rem; margin-bottom: 12px; display: block; } */
.tech-emoji i {
  font-size: 2.4rem;
  display: inline-block;
  margin-bottom: 12px;
}
.tech-item:hover i,
.tech-item:hover img {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}
.tech-name {

  font-size: 0.78rem; color: var(--text-2);

  font-weight: 500; letter-spacing: 0.06em; transition: color 0.5s;

}


.testimonials { padding: 140px 0; background: var(--bg-base); overflow: hidden; transition: background 0.5s; }

.testimonials-scroll {

  display: flex; gap: 20px; margin-top: 64px;

  padding-bottom: 20px; overflow-x: auto;

  scroll-snap-type: x mandatory;

  scrollbar-width: none; -webkit-overflow-scrolling: touch;

}

.testimonials-scroll::-webkit-scrollbar { display: none; }

.testi-card {

  flex-shrink: 0; width: 460px;

  background: var(--bg-surface); border: 1px solid var(--line);

  padding: 44px; border-radius: 6px; scroll-snap-align: start;

  position: relative;

  opacity: 0; transform: translateX(30px);

  transition:

    opacity 0.8s cubic-bezier(0.16,1,0.3,1),

    transform 0.8s cubic-bezier(0.16,1,0.3,1),

    border-color 0.4s, background 0.5s, box-shadow 0.4s;

}

.testi-card.visible { opacity:1; transform:translateX(0); }

.testi-card:hover { border-color: var(--amber-edge); transform: translateY(-4px); box-shadow: var(--shadow-card); }

.testi-quote {

  font-size: 2.5rem; color: var(--amber); line-height: 1;

  margin-bottom: 20px; font-family: 'Syne', sans-serif; transition: color 0.5s;

}

.testi-text {

  font-size: 1rem; color: var(--text-2); line-height: 1.8;

  font-weight: 300; margin-bottom: 32px; transition: color 0.5s;

}

.testi-author { display: flex; align-items: center; gap: 16px; }

.testi-avatar {

  width: 44px; height: 44px; border-radius: 50%;

  background: linear-gradient(135deg, var(--amber-dim), var(--amber));

  display: flex; align-items: center; justify-content: center;

  font-family: 'Syne', sans-serif; font-weight: 700;

  font-size: 1rem; color: var(--bg-base); transition: color 0.5s, background 0.5s;

}

.testi-name {

  font-family: 'Syne', sans-serif; font-weight: 600;

  font-size: 0.95rem; margin-bottom: 2px; color: var(--text-1); transition: color 0.5s;

}

.testi-role { font-size: 0.78rem; color: var(--text-3); transition: color 0.5s; }

.testi-stars {

  position: absolute; top: 44px; right: 44px;

  font-size: 0.75rem; color: var(--amber); letter-spacing: 2px; transition: color 0.5s;

}


.cta-section {

  padding: 160px 0; background: var(--bg-alt);

  text-align: center; position: relative; overflow: hidden;

  transition: background 0.5s;

}

.cta-orb {

  position: absolute; inset: -50%;

  background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--amber-glow), transparent);

  pointer-events: none; animation: orbDrift 15s ease-in-out infinite;

  transition: background 0.5s;

}

.cta-section .section-title { max-width: 900px; margin: 0 auto 20px; }

.cta-section .section-sub { max-width: 520px; margin: 0 auto 48px; }

.cta-actions {

  display: flex; gap: 16px; justify-content: center; align-items: center;

  opacity: 0; transform: translateY(20px);

  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1) 0.3s, transform 0.8s cubic-bezier(0.16,1,0.3,1) 0.3s;

}

.cta-actions.visible { opacity:1; transform:translateY(0); }



footer {

  background: var(--bg-base); border-top: 1px solid var(--line);

  padding: 72px 0 40px; transition: background 0.5s, border-color 0.5s;

}

.footer-grid {

  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 64px; margin-bottom: 64px;

}

.footer-tagline {

  font-size: 0.9rem; color: var(--text-2); line-height: 1.7;

  font-weight: 300; max-width: 260px; margin: 16px 0 28px;

  transition: color 0.5s;

}

.footer-socials { display: flex; gap: 12px; }

.social-btn {

  width: 36px; height: 36px;

  border: 1px solid var(--line-strong); border-radius: 6px;

  display: flex; align-items: center; justify-content: center;

  color: var(--text-3); text-decoration: none; font-size: 0.8rem;

  font-family: 'Space Mono', monospace;

  transition: color 0.3s, border-color 0.3s, background 0.3s;

}

.social-btn:hover { color: var(--amber); border-color: var(--amber); background: var(--amber-glow); }

.footer-col h4 {

  font-family: 'Syne', sans-serif; font-weight: 600;

  font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;

  color: var(--text-1); margin-bottom: 20px; transition: color 0.5s;

}

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-col ul li a {

  font-size: 0.88rem; color: var(--text-2); text-decoration: none;

  transition: color 0.3s, padding-left 0.3s; display: block;

}

.footer-col ul li a:hover { color: var(--amber); padding-left: 4px; }

.footer-bottom {

  border-top: 1px solid var(--line); padding-top: 32px;

  display: flex; justify-content: space-between; align-items: center;

  transition: border-color 0.5s;

}

.footer-copy { font-size: 0.78rem; color: var(--text-3); letter-spacing: 0.06em; transition: color 0.5s; }

.footer-legal { display: flex; gap: 24px; }

.footer-legal a {

  font-size: 0.78rem; color: var(--text-3); text-decoration: none;

  transition: color 0.3s;

}

.footer-legal a:hover { color: var(--text-2); }



#back-top {

  position: fixed; bottom: 40px; right: 40px; z-index: 900;

  width: 46px; height: 46px;

  background: var(--bg-surface); border: 1px solid var(--line-strong);

  border-radius: 6px; display: flex; align-items: center; justify-content: center;

  color: var(--text-2); cursor: none;

  opacity: 0; transform: translateY(16px);

  transition: opacity 0.4s, transform 0.4s, background 0.3s, color 0.3s, border-color 0.3s;

}

#back-top.show { opacity:1; transform:translateY(0); }

#back-top:hover { background: var(--amber); color: var(--bg-base); border-color: var(--amber); }



[data-provab_landing="light"] .hero-grid {

  opacity: 0.7;

}

[data-provab_landing="light"] .hero-slash { opacity: 0.2; }



@media(max-width:1024px) {

  .tech-grid { grid-template-columns: repeat(4,1fr); }

}
@media(max-width:410px){
  nav.scrolled{
    padding: 20px 7px;
  }
  .nav-cta{
    padding: 10px 8px;
  }
}
@media(max-width:450px){
  .nav-chevron img{
        width: 110px;
  }
}
@media(max-width:900px) {

  nav { padding: 20px 24px; }

  nav.scrolled { padding: 14px 5px; }

  .nav-links { display: none; }

  .hero { padding: 0 24px 140px; }

  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 28px; }

  .hero-stats { flex-wrap: wrap; }

  .hero-stat { flex: 0 0 50%; }

  .container { padding: 0 24px; }

  .services-layout { grid-template-columns: 1fr; gap: 48px; }

  .services-sticky { position: static; }

  .services-grid { grid-template-columns: 1fr; }

  .project-row { grid-template-columns: 60px 1fr; }

  .proj-tags,.proj-arrow { display: none; }

  .process-steps { grid-template-columns: 1fr 1fr; }

  .tech-grid { grid-template-columns: repeat(3,1fr); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }

}