:root {
  --charcoal: #1d1d20;
  --charcoal-2: #26262b;
  --charcoal-3: #34343a;
  --gold: #d8ba6d;
  --gold-light: #f1d894;
  --gold-dark: #ad8736;
  --ivory: #f6f2e9;
  --paper: #fcfbf8;
  --white: #ffffff;
  --gray: #77777f;
  --line: rgba(29, 29, 32, 0.12);
  --dark-line: rgba(255, 255, 255, 0.12);
  --green: #25d366;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 36px;
  --container: min(1240px, calc(100vw - 48px));
  --font-heading: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--charcoal); }
body { margin: 0; background: var(--paper); color: var(--charcoal); font-family: var(--font-body); line-height: 1.65; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-heading); }
h1 { font-size: clamp(3rem, 6.5vw, 6.2rem); line-height: 0.98; letter-spacing: -0.065em; }
h2 { font-size: clamp(2.2rem, 4.7vw, 4.8rem); line-height: 1.02; letter-spacing: -0.05em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.025em; }
::selection { color: var(--charcoal); background: var(--gold); }

.container { width: var(--container); margin-inline: auto; }
.section { padding: clamp(88px, 10vw, 148px) 0; }
.section-dark { position: relative; background: var(--charcoal); color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--gold-dark); font-family: var(--font-heading); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; }
.kicker::before { width: 34px; height: 2px; content: ""; background: currentColor; }
.section-dark .kicker, .hero .kicker, .contact-section .kicker { color: var(--gold); }

.page-progress { position: fixed; inset: 0 0 auto; z-index: 200; height: 3px; pointer-events: none; }
.page-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light)); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease; border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(29, 29, 32, 0.88); border-color: rgba(255,255,255,0.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nav-shell { display: flex; align-items: center; justify-content: space-between; min-height: 92px; transition: min-height 0.35s ease; }
.site-header.is-scrolled .nav-shell { min-height: 72px; }
.brand { position: relative; z-index: 2; width: 238px; overflow: hidden; }
.brand img { width: 100%; }
.primary-nav { display: flex; align-items: center; gap: 30px; color: rgba(255,255,255,0.78); font-family: var(--font-heading); font-size: 0.84rem; font-weight: 700; }
.primary-nav > a:not(.nav-cta) { position: relative; padding: 10px 0; }
.primary-nav > a:not(.nav-cta)::after { position: absolute; inset: auto 0 4px; height: 1px; content: ""; transform: scaleX(0); transform-origin: right; background: var(--gold); transition: transform 0.3s ease; }
.primary-nav > a:not(.nav-cta):hover { color: var(--white); }
.primary-nav > a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 0 19px; color: var(--charcoal); background: var(--gold); border-radius: 999px; }
.menu-toggle { display: none; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; }
.menu-toggle span:not(.sr-only) { display: block; width: 25px; height: 2px; margin: 6px auto; background: var(--white); transition: transform 0.25s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: var(--white); background: radial-gradient(circle at 72% 26%, rgba(216,186,109,0.16), transparent 23%), linear-gradient(135deg, #171719 0%, #25252a 57%, #2d2a24 100%); }
.hero-grid-lines { position: absolute; inset: 0; opacity: 0.06; background-image: linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to right, black, transparent 75%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-orb-a { width: 500px; height: 500px; top: -260px; right: -100px; border: 1px solid rgba(216,186,109,0.28); }
.hero-orb-b { width: 220px; height: 220px; left: 46%; bottom: -100px; background: rgba(216,186,109,0.09); filter: blur(38px); }
.hero-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 0.96fr 1.04fr; align-items: center; gap: clamp(38px, 6vw, 90px); padding-top: 130px; padding-bottom: 88px; }
.hero-copy { position: relative; z-index: 4; }
.hero-copy h1 { max-width: 790px; margin-bottom: 30px; }
.hero-copy h1 span { color: var(--gold); }
.hero-lead { max-width: 690px; margin-bottom: 34px; color: rgba(255,255,255,0.66); font-size: clamp(1rem, 1.4vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 56px; padding: 0 25px; overflow: hidden; border: 1px solid transparent; border-radius: 999px; font-family: var(--font-heading); font-size: 0.88rem; font-weight: 800; cursor: pointer; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.button span, .button i { position: relative; z-index: 2; font-style: normal; }
.button i { transition: transform 0.25s ease; }
.button:hover i { transform: translate(3px, -3px); }
.button-gold { color: var(--charcoal); background: var(--gold); }
.button-gold::before { position: absolute; inset: 0; content: ""; transform: translateX(-105%); background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent); transition: transform 0.65s ease; }
.button-gold:hover::before { transform: translateX(105%); }
.button-ghost { color: var(--white); border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.035); }
.button-ghost:hover { border-color: var(--gold); }
.button-dark { color: var(--white); background: var(--charcoal); border: 0; }
.button-outline-dark { color: var(--charcoal); border-color: rgba(29,29,32,0.22); background: transparent; }
.button-outline-dark:hover { color: var(--white); background: var(--charcoal); }
.button-whatsapp { width: 100%; color: var(--white); background: var(--green); }
.hero-points { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; color: rgba(255,255,255,0.66); font-size: 0.82rem; }
.hero-points span { display: flex; align-items: center; gap: 9px; }
.hero-points span::before { width: 6px; height: 6px; content: ""; border-radius: 50%; background: var(--gold); }
.hero-showcase { position: relative; min-height: 650px; perspective: 1200px; }
.hero-device { position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,0.18); border-radius: 18px; background: #fff; box-shadow: 0 38px 90px rgba(0,0,0,0.38); will-change: transform; }
.hero-device img { width: 100%; height: calc(100% - 34px); object-fit: cover; object-position: top; }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; color: #6a6a70; background: #f0f0f1; }
.browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: #b9b9be; }
.browser-bar small { margin-left: 8px; font-size: 0.58rem; }
.hero-device-main { z-index: 2; width: 82%; height: 470px; top: 60px; right: 0; transform: rotateY(-7deg) rotateZ(1deg); }
.hero-device-side { z-index: 3; width: 49%; height: 300px; left: -2%; bottom: 22px; transform: rotateY(7deg) rotateZ(-4deg); }
.hero-device-system { z-index: 4; width: 48%; height: 260px; right: -3%; bottom: -10px; transform: rotateY(-6deg) rotateZ(3deg); }
.hero-badge { position: absolute; z-index: 6; top: 28px; left: 20px; width: 132px; height: 132px; display: grid; place-items: center; align-content: center; border: 1px solid rgba(216,186,109,0.45); border-radius: 50%; color: var(--gold); background: rgba(29,29,32,0.76); backdrop-filter: blur(12px); box-shadow: 0 20px 60px rgba(0,0,0,0.28); font-family: var(--font-heading); text-transform: uppercase; }
.hero-badge span, .hero-badge strong, .hero-badge em { display: block; font-size: 0.69rem; letter-spacing: 0.15em; font-style: normal; line-height: 1.6; }
.hero-badge strong { color: var(--white); }
.scroll-cue { position: absolute; z-index: 5; bottom: 26px; left: 50%; display: grid; justify-items: center; gap: 8px; transform: translateX(-50%); color: rgba(255,255,255,0.5); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.18em; }
.scroll-cue span { width: 1px; height: 42px; overflow: hidden; background: rgba(255,255,255,0.18); }
.scroll-cue span::after { display: block; width: 100%; height: 50%; content: ""; background: var(--gold); animation: scrollCue 2s ease-in-out infinite; }
@keyframes scrollCue { 0% { transform: translateY(-110%); } 100% { transform: translateY(210%); } }

.client-strip { position: relative; z-index: 5; padding: 84px 0 76px; overflow: hidden; background: var(--ivory); }
.client-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.client-heading .kicker { margin: 0; }
.client-heading h2 { max-width: 760px; margin: 0; font-size: clamp(2rem, 3.5vw, 3.8rem); }
.logo-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-track { display: flex; width: max-content; gap: 16px; animation: logoScroll 32s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-item { width: 190px; height: 104px; display: grid; flex: none; place-items: center; padding: 21px; border: 1px solid rgba(29,29,32,0.07); border-radius: 20px; background: rgba(255,255,255,0.76); }
.logo-item img { max-width: 100%; max-height: 58px; object-fit: contain; filter: grayscale(1); opacity: 0.62; transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease; }
.logo-item:hover img { filter: none; opacity: 1; transform: scale(1.05); }
@keyframes logoScroll { to { transform: translateX(calc(-50% - 8px)); } }

.split-heading { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: end; gap: clamp(40px, 8vw, 120px); margin-bottom: clamp(54px, 7vw, 92px); }
.split-heading h2, .work-header h2, .service-heading h2, .pricing-heading h2 { margin-bottom: 0; }
.section-intro { margin-bottom: 4px; color: var(--gray); font-size: 1.05rem; }
.problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.problem-card { min-height: 340px; padding: 34px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.3s ease, transform 0.3s ease; }
.problem-card:hover { z-index: 2; transform: translateY(-7px); background: var(--white); box-shadow: 0 24px 64px rgba(29,29,32,0.09); }
.problem-card > span { display: block; margin-bottom: 64px; color: var(--gold-dark); font-family: var(--font-heading); font-size: 0.75rem; font-weight: 800; }
.problem-card h3 { margin-bottom: 18px; }
.problem-card p { margin: 0; color: var(--gray); }

.work-section { overflow: clip; }
.work-section::before { position: absolute; inset: 0; content: ""; opacity: 0.35; background: radial-gradient(circle at 10% 30%, rgba(216,186,109,0.13), transparent 28%), radial-gradient(circle at 80% 78%, rgba(216,186,109,0.08), transparent 25%); }
.work-header { position: relative; z-index: 2; max-width: 920px; padding-top: clamp(92px, 10vw, 150px); }
.work-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(50px, 8vw, 120px); }
.work-sticky { position: sticky; top: 108px; height: calc(100vh - 136px); display: flex; flex-direction: column; justify-content: center; align-self: start; }
.work-screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10.5; border: 1px solid rgba(255,255,255,0.15); border-radius: 24px; background: #f2f2f2; box-shadow: 0 45px 90px rgba(0,0,0,0.42); }
.browser-bar-dark { color: rgba(255,255,255,0.46); background: #27272c; }
.browser-bar-dark span { background: rgba(255,255,255,0.24); }
.work-image-stack { position: relative; height: calc(100% - 34px); }
.work-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.08); transition: opacity 0.65s ease, transform 1.1s cubic-bezier(.2,.75,.25,1); }
.work-image.is-active { opacity: 1; transform: scale(1); }
.work-index { display: flex; align-items: center; gap: 12px; margin-top: 22px; color: rgba(255,255,255,0.46); font-family: var(--font-heading); font-size: 0.72rem; }
.work-index i { width: 80px; height: 1px; background: rgba(255,255,255,0.18); }
.work-index span:first-child { color: var(--gold); }
.work-list { padding-bottom: 80px; }
.work-item { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.34; transition: opacity 0.45s ease; }
.work-item.is-active { opacity: 1; }
.work-item .work-type { margin-bottom: 22px; color: var(--gold); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.work-item h3 { max-width: 580px; margin-bottom: 22px; font-size: clamp(2.15rem, 4vw, 4.1rem); color: var(--white); }
.work-item > p:not(.work-type) { max-width: 620px; margin-bottom: 26px; color: rgba(255,255,255,0.62); font-size: 1.04rem; }
.work-item ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.work-item li { padding: 9px 13px; border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; color: rgba(255,255,255,0.68); font-size: 0.76rem; }
.work-mobile-preview { display: none; }

.system-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.system-card { overflow: hidden; min-width: 0; border: 1px solid var(--line); border-radius: 28px; background: var(--white); box-shadow: 0 20px 55px rgba(29,29,32,0.07); transform-style: preserve-3d; }
.system-media { height: 280px; overflow: hidden; background: #ececec; }
.system-media img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform 0.7s cubic-bezier(.2,.75,.25,1); }
.system-card:hover .system-media img { transform: scale(1.04); }
.system-body { padding: 28px; transform: translateZ(20px); }
.system-body > span { display: block; margin-bottom: 13px; color: var(--gold-dark); font-family: var(--font-heading); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.system-body p { margin: 0; color: var(--gray); }

.service-section { overflow: hidden; padding-top: 0; }
.service-marquee { overflow: hidden; padding: 42px 0 26px; color: rgba(255,255,255,0.055); font-family: var(--font-heading); font-size: clamp(4rem, 10vw, 10rem); font-weight: 800; white-space: nowrap; }
.service-marquee div { width: max-content; animation: serviceScroll 30s linear infinite; }
.service-marquee i { color: rgba(216,186,109,0.2); font-style: normal; }
@keyframes serviceScroll { to { transform: translateX(-50%); } }
.service-heading { max-width: 820px; margin-bottom: 60px; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--dark-line); border-left: 1px solid var(--dark-line); }
.service-card { position: relative; min-height: 500px; padding: 34px; overflow: hidden; border-right: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); transition: background 0.4s ease; }
.service-card::before { position: absolute; inset: auto -20% -60% 15%; height: 70%; content: ""; transform: scale(0.6); opacity: 0; border-radius: 50%; background: radial-gradient(circle, rgba(216,186,109,0.26), transparent 65%); transition: opacity 0.4s ease, transform 0.55s ease; }
.service-card:hover { background: rgba(255,255,255,0.035); }
.service-card:hover::before { opacity: 1; transform: scale(1); }
.service-number { display: block; margin-bottom: 86px; color: rgba(255,255,255,0.34); font-family: var(--font-heading); font-size: 0.74rem; }
.service-label { margin-bottom: 15px; color: var(--gold); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.service-card h3 { max-width: 320px; margin-bottom: 26px; font-size: clamp(1.7rem, 2.7vw, 2.8rem); }
.service-card ul { position: relative; z-index: 2; display: grid; gap: 11px; padding: 0; margin: 0; list-style: none; color: rgba(255,255,255,0.58); }
.service-arrow { position: absolute; right: 28px; bottom: 24px; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; color: var(--gold); transition: transform 0.3s ease, background 0.3s ease; }
.service-card:hover .service-arrow { transform: rotate(45deg); color: var(--charcoal); background: var(--gold); }

.pricing-section { background: var(--ivory); }
.pricing-heading { max-width: 880px; margin-bottom: 60px; }
.pricing-heading > p:last-child { max-width: 680px; color: var(--gray); }
.pricing-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 680px; padding: 34px; border: 1px solid rgba(29,29,32,0.1); border-radius: 28px; background: rgba(255,255,255,0.72); }
.price-featured { color: var(--white); background: var(--charcoal); border-color: var(--gold); box-shadow: 0 32px 80px rgba(29,29,32,0.18); }
.price-badge { position: absolute; top: 20px; right: 20px; padding: 8px 11px; border-radius: 999px; color: var(--charcoal); background: var(--gold); font-family: var(--font-heading); font-size: 0.62rem; font-weight: 800; }
.price-name { margin-bottom: 26px; color: var(--gold-dark); font-family: var(--font-heading); font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; }
.price-featured .price-name { color: var(--gold); }
.price-value { display: flex; align-items: flex-start; margin-bottom: 12px; font-family: var(--font-heading); font-size: clamp(3.3rem, 5vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -0.065em; }
.price-value small { margin-top: 8px; margin-right: 4px; font-size: 0.9rem; letter-spacing: 0; }
.price-value span { align-self: flex-end; margin: 0 0 7px 5px; font-size: 0.9rem; letter-spacing: 0; }
.price-desc { min-height: 84px; color: var(--gray); }
.price-featured .price-desc { color: rgba(255,255,255,0.58); }
.price-card ul { display: grid; gap: 12px; padding: 24px 0; margin: 24px 0 30px; border-top: 1px solid var(--line); list-style: none; }
.price-featured ul { border-color: var(--dark-line); }
.price-card li { display: flex; gap: 10px; font-size: 0.9rem; }
.price-card li::before { color: var(--gold-dark); content: "✓"; font-weight: 800; }
.price-featured li::before { color: var(--gold); }
.launch-offer { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: center; margin-top: 24px; padding: 36px 40px; border-radius: 26px; color: var(--charcoal); background: linear-gradient(135deg, var(--gold-light), var(--gold-dark)); }
.launch-offer .kicker { color: var(--charcoal); }
.launch-offer h3 { margin-bottom: 0; font-size: clamp(1.6rem, 2.5vw, 2.5rem); }
.launch-offer ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; padding: 0; margin: 0; list-style: none; }
.launch-offer li { padding: 13px 15px; border: 1px solid rgba(29,29,32,0.13); border-radius: 14px; background: rgba(255,255,255,0.23); font-weight: 600; }

.process-section { background: var(--paper); }
.process-layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(50px, 9vw, 130px); }
.process-copy { position: sticky; top: 120px; align-self: start; }
.process-copy > p:last-child { max-width: 570px; color: var(--gray); }
.process-list { position: relative; padding-left: 58px; }
.process-line { position: absolute; top: 14px; bottom: 60px; left: 18px; width: 2px; overflow: hidden; background: rgba(29,29,32,0.1); }
.process-line span { display: block; width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; background: var(--gold-dark); }
.process-item { display: grid; grid-template-columns: 76px 1fr; gap: 26px; min-height: 210px; padding-bottom: 50px; }
.process-item > span { color: var(--gold-dark); font-family: var(--font-heading); font-size: 0.75rem; font-weight: 800; }
.process-item h3 { margin-bottom: 12px; font-size: clamp(1.65rem, 2.5vw, 2.55rem); }
.process-item p { max-width: 620px; color: var(--gray); }

.faq-layout { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(50px, 8vw, 110px); }
.faq-heading { position: sticky; top: 120px; align-self: start; }
.faq-heading > p:last-child { max-width: 430px; color: var(--gray); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 26px 0; border: 0; background: transparent; text-align: left; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; cursor: pointer; }
.faq-item button i { flex: none; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold-dark); font-style: normal; transition: transform 0.3s ease, background 0.3s ease; }
.faq-item.is-open button i { transform: rotate(45deg); color: var(--charcoal); background: var(--gold); }
.faq-answer { height: 0; overflow: hidden; }
.faq-answer p { padding: 0 60px 26px 0; margin: 0; color: var(--gray); }

.contact-section { overflow: hidden; }
.contact-glow { position: absolute; width: 640px; height: 640px; right: -240px; bottom: -320px; border-radius: 50%; background: rgba(216,186,109,0.1); filter: blur(35px); }
.contact-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(48px, 8vw, 110px); align-items: start; }
.contact-copy { position: sticky; top: 120px; }
.contact-copy h2 { max-width: 650px; }
.contact-copy > p:not(.kicker) { max-width: 620px; color: rgba(255,255,255,0.62); }
.contact-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 36px; }
.contact-details a { display: grid; padding: 18px; border: 1px solid var(--dark-line); border-radius: 17px; background: rgba(255,255,255,0.035); }
.contact-details small { margin-bottom: 4px; color: rgba(255,255,255,0.44); }
.contact-details strong { color: var(--gold-light); font-family: var(--font-heading); font-size: 0.88rem; }
.form-card { color: var(--charcoal); padding: clamp(25px, 4vw, 42px); border-radius: 30px; background: var(--white); box-shadow: 0 38px 90px rgba(0,0,0,0.28); }
.form-top { display: flex; justify-content: space-between; margin-bottom: 12px; color: var(--gray); font-size: 0.78rem; }
.form-progress { height: 5px; margin-bottom: 30px; overflow: hidden; border-radius: 999px; background: #ececee; }
.form-progress span { display: block; width: 33.333%; height: 100%; background: var(--gold-dark); transition: width 0.3s ease; }
.form-step { display: none; }
.form-step.is-active { display: block; }
.form-step > p { margin-bottom: 26px; color: var(--gray); }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.form-card label { display: grid; gap: 7px; margin-bottom: 17px; font-size: 0.82rem; font-weight: 700; }
.form-card input, .form-card select, .form-card textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #dcdce0; border-radius: 13px; color: var(--charcoal); background: var(--white); outline: none; transition: border 0.2s ease, box-shadow 0.2s ease; }
.form-card textarea { resize: vertical; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: var(--gold-dark); box-shadow: 0 0 0 4px rgba(216,186,109,0.17); }
.form-card .is-invalid { border-color: #d84c4c; box-shadow: 0 0 0 3px rgba(216,76,76,0.12); }
.form-actions { display: flex; justify-content: flex-end; gap: 11px; margin-top: 24px; }
.form-back { border: 1px solid var(--line); background: transparent; }
.form-success { padding: 35px 5px; text-align: center; }
.form-success > span { display: grid; width: 70px; height: 70px; place-items: center; margin: 0 auto 22px; border-radius: 50%; color: #176e32; background: #e5f7ea; font-size: 2rem; }
.form-success p { color: var(--gray); }

.site-footer { color: rgba(255,255,255,0.62); background: #131315; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.65fr 0.75fr; gap: 70px; padding: 72px 0 48px; }
.footer-brand img { width: 260px; margin-bottom: 22px; }
.footer-brand p { max-width: 500px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-grid h3 { margin-bottom: 12px; color: var(--white); font-size: 1rem; }
.footer-grid a:hover { color: var(--gold); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; }
.floating-whatsapp { position: fixed; z-index: 90; right: 22px; bottom: 22px; display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; color: var(--white); background: var(--green); box-shadow: 0 15px 35px rgba(0,0,0,0.28); font-family: var(--font-heading); font-size: 0.72rem; font-weight: 800; }

@media (max-width: 1100px) {
  .primary-nav { gap: 19px; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-copy { max-width: 900px; }
  .hero-showcase { min-height: 590px; width: min(900px, 100%); margin-inline: auto; }
  .work-layout { grid-template-columns: 1fr 0.8fr; gap: 55px; }
  .problem-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .system-grid, .service-grid, .pricing-grid { grid-template-columns: 1fr; }
  .system-card { display: grid; grid-template-columns: 1.1fr 0.9fr; }
  .price-card { min-height: auto; }
  .price-featured { order: -1; }
  .service-card { min-height: 390px; }
}

@media (max-width: 860px) {
  :root { --container: min(100vw - 32px, 1240px); }
  .site-header { background: rgba(29,29,32,0.9); backdrop-filter: blur(16px); }
  .nav-shell { min-height: 72px; }
  .brand { width: 195px; }
  .menu-toggle { position: relative; z-index: 110; display: block; }
  .primary-nav { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; padding: 90px 30px 40px; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-28px); background: rgba(24,24,27,0.98); transition: transform 0.45s cubic-bezier(.2,.75,.25,1), opacity 0.3s ease, visibility 0s linear 0.45s; font-size: 1.35rem; }
  .primary-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }
  .primary-nav .nav-cta { min-height: 54px; margin-top: 12px; font-size: 0.9rem; }
  .hero { min-height: auto; }
  .hero-layout { padding-top: 130px; }
  .client-heading, .split-heading, .process-layout, .faq-layout, .contact-layout, .launch-offer { grid-template-columns: 1fr; }
  .client-heading { align-items: flex-start; }
  .work-layout { display: block; }
  .work-sticky { display: none; }
  .work-item { min-height: auto; padding: 45px 0 76px; opacity: 1; border-bottom: 1px solid var(--dark-line); }
  .work-mobile-preview { display: block; overflow: hidden; margin-bottom: 30px; border-radius: 20px; }
  .work-mobile-preview img { width: 100%; }
  .work-item h3 { font-size: clamp(2.3rem, 8vw, 4rem); }
  .process-copy, .faq-heading, .contact-copy { position: static; }
  .launch-offer ul { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  h1 { font-size: clamp(2.7rem, 14vw, 4.3rem); }
  h2 { font-size: clamp(2.15rem, 11vw, 3.5rem); }
  .section { padding: 82px 0; }
  .hero-layout { padding-bottom: 74px; }
  .hero-actions .button { width: 100%; }
  .hero-points { display: grid; gap: 9px; }
  .hero-showcase { min-height: 400px; margin-top: 18px; }
  .hero-device-main { width: 92%; height: 300px; top: 35px; }
  .hero-device-side { width: 58%; height: 185px; left: 0; bottom: 0; }
  .hero-device-system { width: 56%; height: 165px; right: 0; bottom: -18px; }
  .hero-badge { top: 2px; left: 2px; width: 96px; height: 96px; }
  .scroll-cue { display: none; }
  .client-heading { margin-bottom: 30px; }
  .logo-item { width: 150px; height: 90px; }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-card { min-height: auto; }
  .problem-card > span { margin-bottom: 38px; }
  .system-card { display: block; }
  .system-media { height: 220px; }
  .service-card { min-height: 420px; }
  .service-number { margin-bottom: 55px; }
  .price-card { padding: 26px; }
  .contact-details, .form-row { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
  .process-list { padding-left: 44px; }
  .process-item { grid-template-columns: 54px 1fr; gap: 12px; }
  .process-line { left: 13px; }
  .footer-grid { grid-template-columns: 1fr; gap: 38px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .floating-whatsapp { right: 15px; bottom: 15px; width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .logo-track, .service-marquee div { animation: none; }
}


/* ===== Full website additions ===== */
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:9999;background:#fff;color:#111;padding:.7rem 1rem;border-radius:.5rem}.skip-link:focus{top:1rem}
.brand{display:flex!important;align-items:center;gap:.62rem;text-decoration:none}.brand-mark{width:42px;height:42px;display:grid;place-items:center;flex:0 0 auto}.brand-mark img{width:100%;height:100%;object-fit:contain;filter:saturate(.9)}.brand-copy{display:grid;line-height:1}.brand-copy strong{font-family:var(--font-heading);font-size:1.05rem;letter-spacing:.08em;color:#f5f2ea}.brand-copy small{font-family:var(--font-heading);font-size:.57rem;letter-spacing:.38em;color:var(--gold);margin-top:.32rem}.site-header.is-scrolled .brand-copy strong{color:var(--ink)}.site-header.is-scrolled .brand-copy small{color:var(--gold-deep)}.site-header .brand>img{display:none}
.primary-nav a.is-active{color:var(--gold)}.site-header.is-scrolled .primary-nav a.is-active{color:var(--gold-deep)}
.inner-page{background:var(--ivory)}.page-hero{position:relative;overflow:hidden;padding:clamp(9.5rem,14vw,12rem) 0 clamp(5rem,8vw,8rem);min-height:72vh;display:grid;align-items:center}.page-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 25%,rgba(216,187,108,.18),transparent 35%);pointer-events:none}.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:clamp(3rem,7vw,7rem);align-items:center;position:relative}.page-hero h1,.page-hero-simple h1{font-family:var(--font-heading);font-size:clamp(3rem,7vw,6.5rem);line-height:.98;letter-spacing:-.055em;margin:.9rem 0 1.4rem}.page-hero p{font-size:clamp(1rem,1.45vw,1.18rem);line-height:1.8;max-width:720px}.page-hero-gold{background:linear-gradient(135deg,#1c1d21 0%,#2a2927 72%,#5d4d2d 140%);color:white}.page-hero-dark{background:linear-gradient(135deg,#17181b,#292a30);color:white}.page-hero-simple{background:var(--ivory);min-height:auto;padding-bottom:5.5rem}.page-hero-simple .narrow{max-width:1000px}.page-visual{position:relative}.browser-frame{border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 35px 80px rgba(0,0,0,.32);transform:perspective(1200px) rotateY(-5deg) rotateX(2deg)}.browser-frame img{width:100%;display:block}.system-collage{min-height:520px}.system-collage img{position:absolute;width:75%;border-radius:1rem;box-shadow:0 30px 65px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14)}.system-collage img:nth-child(1){right:0;top:0;z-index:3}.system-collage img:nth-child(2){left:0;top:30%;z-index:2}.system-collage img:nth-child(3){right:4%;bottom:0;z-index:1}.center-action{text-align:center;margin-top:2.2rem}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}.feature-card,.deliverable,.capability,.terms-card{padding:2rem;border:1px solid var(--line);border-radius:1.25rem;background:rgba(255,255,255,.66)}.feature-card h3,.deliverable h3,.capability h3,.terms-card h3{font-family:var(--font-heading);margin:0 0 .8rem;font-size:1.18rem}.feature-card p,.deliverable p,.capability p,.terms-card p{margin:0;color:var(--muted);line-height:1.7}.deliverable-grid,.capability-grid,.terms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}.deliverable{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11)}.deliverable span{color:var(--gold);font-family:var(--font-heading)}.deliverable p{color:rgba(255,255,255,.67)}.capability-grid{grid-template-columns:repeat(3,1fr)}.capability{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.11)}.capability p{color:rgba(255,255,255,.67)}
.comparison-section{background:#fff}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:1.25rem;background:#fff}.comparison-table{width:100%;min-width:720px;border-collapse:collapse}.comparison-table th,.comparison-table td{padding:1.1rem 1.3rem;text-align:left;border-bottom:1px solid var(--line)}.comparison-table th{font-family:var(--font-heading);background:#f7f4ec}.comparison-table th:nth-child(3),.comparison-table td:nth-child(3){background:rgba(216,187,108,.11)}
.case-list{display:grid;gap:5rem;margin-top:4rem}.case-row{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,6vw,6rem);align-items:center}.case-row.reverse .case-image{order:2}.case-image{border-radius:1.3rem;overflow:hidden;border:1px solid var(--line);box-shadow:0 22px 60px rgba(20,21,24,.12)}.case-image img{display:block;width:100%}.case-row span,.portfolio-card span{color:var(--gold-deep);font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.case-row h3{font-family:var(--font-heading);font-size:clamp(1.8rem,3.5vw,3.1rem);margin:.65rem 0 1.2rem}.case-row p{color:var(--muted);line-height:1.75}
.filter-bar{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}.filter-bar button{border:1px solid var(--line);background:#fff;padding:.75rem 1.15rem;border-radius:999px;font-weight:700;cursor:pointer}.filter-bar button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}.portfolio-card{background:#fff;border:1px solid var(--line);border-radius:1.35rem;overflow:hidden;transition:.3s ease}.portfolio-card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(20,21,24,.12)}.portfolio-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--line)}.portfolio-card>div{padding:1.8rem}.portfolio-card h2{font-family:var(--font-heading);font-size:1.65rem;margin:.5rem 0 1rem}.portfolio-card p{color:var(--muted);line-height:1.65;margin:.5rem 0}.portfolio-card.is-hidden{display:none}
.cta-band{padding:4rem 0}.cta-band>.container{display:flex;justify-content:space-between;align-items:center;gap:2rem}.cta-band h2{font-family:var(--font-heading);font-size:clamp(2rem,4vw,3.8rem);margin:.3rem 0 0}
.about-story{display:grid;grid-template-columns:.85fr 1.15fr;gap:6rem}.about-story h2{font-family:var(--font-heading);font-size:clamp(2rem,4.5vw,4.2rem);line-height:1.05;margin:.6rem 0}.about-copy{font-size:1.15rem;color:var(--muted);line-height:1.9}.ecosystem{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}.ecosystem article{border:1px solid var(--line);border-radius:1.25rem;padding:2.2rem;background:#fff}.ecosystem strong{color:var(--gold-deep);letter-spacing:.16em}.ecosystem h3{font-family:var(--font-heading);font-size:1.6rem;margin:.8rem 0}.ecosystem p{color:var(--muted);line-height:1.7}
.lead-panel{background:#fff;color:var(--ink);border-radius:1.4rem;padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 28px 70px rgba(0,0,0,.22)}.lead-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.6rem}.lead-panel-head h3{font-family:var(--font-heading);font-size:1.55rem;margin:.35rem 0}.eyebrow{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}.response-badge{font-size:.72rem;background:#f4efdF;padding:.45rem .65rem;border-radius:999px;white-space:nowrap}.lead-form{display:grid;gap:1rem}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.lead-form label>span{display:block;font-size:.82rem;font-weight:700;margin-bottom:.45rem}.lead-form input,.lead-form select,.lead-form textarea{width:100%;border:1px solid #d9d7d0;border-radius:.75rem;padding:.88rem 1rem;background:#fff;font:inherit;color:var(--ink);outline:none}.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(184,146,62,.13)}.consent{display:flex!important;gap:.7rem;align-items:flex-start}.consent input{width:auto;margin-top:.25rem}.consent span{font-weight:400!important;color:var(--muted);line-height:1.5}.form-note{font-size:.77rem;color:var(--muted);margin:0}.form-status{font-size:.86rem;min-height:1.3em}.form-status.is-error{color:#b42318}.form-status.is-success{color:#18794e}.honeypot{position:absolute;left:-9999px}.contact-card-list{display:grid;gap:.8rem;margin-top:2rem}.contact-card-list>a,.contact-card-list>div{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border:1px solid rgba(255,255,255,.13);border-radius:.8rem;color:#fff}.contact-card-list span{color:rgba(255,255,255,.6)}
.step-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.step-cards article{padding:1.8rem;border:1px solid var(--line);border-radius:1rem}.step-cards span{color:var(--gold-deep);font-family:var(--font-heading)}.step-cards h3{font-family:var(--font-heading)}.step-cards p{color:var(--muted)}
.legal-content{max-width:850px;background:#fff;border:1px solid var(--line);border-radius:1.2rem;padding:clamp(1.6rem,4vw,3rem)}.legal-content h2{font-family:var(--font-heading);font-size:1.5rem;margin:2rem 0 .7rem}.legal-content h2:first-child{margin-top:0}.legal-content p{color:var(--muted);line-height:1.8}.thank-page{min-height:90vh;display:grid;align-items:center;text-align:center;padding:9rem 0 5rem;background:var(--ivory)}.thank-icon{display:inline-grid;place-items:center;width:70px;height:70px;border-radius:50%;background:var(--gold);font-size:2rem;margin-bottom:1.5rem}.thank-page h1{font-family:var(--font-heading);font-size:clamp(2.7rem,6vw,5.7rem);line-height:1;margin:1rem 0}.thank-page p{color:var(--muted);font-size:1.1rem}.thank-page .hero-actions{justify-content:center}
.floating-wa{position:fixed;right:1.2rem;bottom:1.2rem;z-index:80;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#25D366;color:#fff;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.25);transition:.25s}.floating-wa:hover{transform:translateY(-4px) scale(1.03)}
.footer-brand .brand{margin-bottom:1.1rem}.footer-brand .brand-copy strong{color:#fff}.footer-brand .brand-mark{width:48px;height:48px}.footer-bottom{padding-top:1.4rem;margin-top:2rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;color:rgba(255,255,255,.5);font-size:.8rem}
@media(max-width:1000px){.page-hero-grid{grid-template-columns:1fr}.page-visual{max-width:700px}.system-collage{min-height:460px}.feature-grid,.deliverable-grid,.terms-grid,.step-cards{grid-template-columns:repeat(2,1fr)}.capability-grid{grid-template-columns:repeat(2,1fr)}.case-row{grid-template-columns:1fr}.case-row.reverse .case-image{order:0}.portfolio-grid{grid-template-columns:1fr}.about-story{grid-template-columns:1fr;gap:2rem}.ecosystem{grid-template-columns:1fr}.cta-band>.container{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.brand-copy strong{font-size:.9rem}.brand-copy small{font-size:.48rem}.brand-mark{width:36px;height:36px}.page-hero{padding-top:8rem;min-height:auto}.page-hero h1,.page-hero-simple h1{font-size:clamp(2.55rem,13vw,4.3rem)}.system-collage{min-height:330px}.feature-grid,.deliverable-grid,.capability-grid,.terms-grid,.step-cards{grid-template-columns:1fr}.field-grid{grid-template-columns:1fr}.lead-panel-head{display:block}.response-badge{display:inline-block;margin-top:.65rem}.footer-bottom{display:grid;gap:.5rem}.floating-wa{width:50px;height:50px;right:.8rem;bottom:.8rem}}