/* SIAPNS Tech Services · premium dark / sage */
:root {
  --s7: #8a6d1f; --s5: #b8912f; --s3: #d9b64e; --s1: #f4e3a8;
  --bg: #0b0a09; --bg2: #11100e; --surf: #171512; --surf2: #1e1b17;
  --line: rgba(244, 227, 168, .10); --line2: rgba(244, 227, 168, .2);
  --text: #f7f3ea; --muted: #a39d90; --ink: #14120d;
  --paper: #f6f4ef; --paper-2: #ebe7dd;
  --r: 22px; --max: 1240px;
  --head: "Space Grotesk", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--body); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; }
::selection { background: var(--s3); color: var(--ink); }

.wrap { width: min(var(--max), 100% - 48px); margin-inline: auto; }
section { padding: 120px 0; position: relative; }
h1, h2, h3 { font-family: var(--head); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; }
h1 { font-size: clamp(2.8rem, 7vw, 5.8rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.7rem); }
h3 { font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.2; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); max-width: 60ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--s3); font-weight: 600; margin-bottom: 22px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--s5); }
.grad { background: linear-gradient(100deg, var(--s1) 0%, var(--s3) 45%, var(--s5) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-head { max-width: 780px; margin-bottom: 64px; }
.sec-head p { margin-top: 20px; color: var(--muted); font-size: 1.1rem; }
.center { text-align: center; margin-inline: auto; }
.center .eyebrow::before { display: none; }

/* light sections */
.light { background: var(--paper); color: var(--ink); }
.light .eyebrow { color: var(--s7); }
.light .eyebrow::before { background: var(--s7); }
.light .sec-head p, .light .lead { color: #5b5646; }
.light .grad { background: linear-gradient(100deg, #6b4f0e, var(--s7), var(--s5)); -webkit-background-clip: text; background-clip: text; }

/* ambient */
.glow { position: fixed; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 0; left: 0; top: 0; background: radial-gradient(closest-side, rgba(217, 182, 78, .12), transparent 70%); transform: translate(-50%, -50%); transition: opacity .3s; opacity: 0; }
body.has-pointer .glow { opacity: 1; }
main, header, footer { position: relative; z-index: 1; }

/* topbar */
.topbar { background: var(--bg2); border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--muted); position: relative; z-index: 60; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; gap: 16px; }
.topbar .live { display: inline-flex; align-items: center; gap: 9px; }
.topbar .links { display: flex; gap: 22px; }
.topbar a:hover { color: var(--s1); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }

/* header */
.site-header { position: sticky; top: 0; z-index: 55; padding: 14px 0; transition: padding .3s var(--ease); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 12px 0 22px; border-radius: 999px; border: 1px solid var(--line); background: rgba(17, 16, 14, .55); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); transition: background .3s, border-color .3s; }
.site-header.scrolled .nav { background: rgba(12, 11, 9, .86); border-color: var(--line2); }
.logo { display: flex; align-items: center; gap: 11px; font-family: var(--head); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }
.logo-mark { width: 36px; height: 36px; border-radius: 11px; background: conic-gradient(from 210deg, var(--s1), var(--s5), var(--s7), var(--s3), var(--s1)); display: grid; place-items: center; color: var(--ink); font-weight: 800; position: relative; }
.logo-mark::after { content: ""; position: absolute; inset: 2px; border-radius: 9px; background: var(--bg); opacity: .0; }
.logo small { color: var(--s5); font-weight: 500; font-size: .8em; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a { padding: 9px 16px; border-radius: 999px; color: var(--muted); font-size: .92rem; font-weight: 500; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--s1); background: rgba(244, 227, 168, .06); }
.nav-links a.active { color: var(--s1); }
.nav-links a.btn { margin-left: 8px; color: var(--ink); padding: 12px 22px; }
.nav-links a.btn:hover { color: var(--ink); background: var(--s1); }
.menu-btn { display: none; background: none; border: 1px solid var(--line2); color: var(--text); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.15rem; }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-weight: 600; font-size: .95rem; cursor: pointer; border: 1px solid transparent; transition: transform .3s var(--ease), background .25s, border-color .25s, box-shadow .3s; overflow: hidden; isolation: isolate; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: var(--s3); color: var(--ink); box-shadow: 0 10px 40px -12px rgba(217, 182, 78, .55); }
.btn-primary:hover { background: var(--s1); box-shadow: 0 16px 50px -10px rgba(244, 227, 168, .6); }
.btn-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); z-index: -1; }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { background: rgba(244, 227, 168, .04); border-color: var(--line2); color: var(--text); }
.btn-ghost:hover { border-color: var(--s3); background: rgba(244, 227, 168, .09); }
.btn-wa { background: #25d366; color: #052e14; }
.btn-wa:hover { background: #4be585; }
.light .btn-ghost { color: var(--ink); border-color: rgba(20, 18, 13, .2); background: transparent; }
.light .btn-ghost:hover { border-color: var(--ink); background: rgba(20, 18, 13, .05); }
.arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow, .more:hover .arrow { transform: translateX(5px); }

/* hero */
.hero { padding: 90px 0 110px; overflow: hidden; }
.aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { width: 640px; height: 640px; background: #7a5c12; top: -220px; right: -120px; animation: drift1 18s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 520px; height: 520px; background: #b8912f; bottom: -260px; left: -140px; opacity: .35; animation: drift2 22s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 380px; height: 380px; background: #e6c766; top: 30%; left: 38%; opacity: .16; animation: drift3 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(-140px, 120px) scale(1.15); } }
@keyframes drift2 { to { transform: translate(160px, -100px) scale(1.2); } }
@keyframes drift3 { to { transform: translate(-200px, 80px) scale(.8); } }
.grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 70% at 60% 35%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 35%, #000, transparent 75%); }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: 40px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(23, 21, 18, .7); backdrop-filter: blur(8px); font-size: .82rem; color: var(--s1); margin-bottom: 30px; }
.badge b { background: var(--s3); color: var(--ink); padding: 2px 9px; border-radius: 999px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.hero h1 { margin-bottom: 28px; }
.hero h1 .line { display: block; }
.rot { display: inline-block; position: relative; vertical-align: top; height: 1.65em; overflow: hidden; font-weight: 600; }
.rot span { display: block; height: 1.65em; transition: transform .7s var(--ease); }
.hero .lead { margin-bottom: 40px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.trust { display: flex; gap: 34px; margin-top: 54px; padding-top: 30px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.trust div b { display: block; font-family: var(--head); font-size: 2rem; color: var(--s1); line-height: 1; letter-spacing: -.03em; }
.trust div span { font-size: .82rem; color: var(--muted); }

/* hero visual */
.visual { position: relative; height: 560px; perspective: 1200px; }
.vlayer { position: absolute; inset: 0; transition: transform .25s ease-out; transform-style: preserve-3d; }
.glass { position: absolute; background: linear-gradient(145deg, rgba(32, 28, 22, .88), rgba(17, 16, 14, .82)); border: 1px solid var(--line2); border-radius: 24px; backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
.dash { left: 6%; top: 8%; width: 82%; padding: 22px; animation: floaty 7s ease-in-out infinite; }
.dash-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--s7); }
.dash-title { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.live-tag { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; color: #4ade80; }
.bars { display: flex; align-items: flex-end; gap: 10px; height: 112px; margin-bottom: 20px; }
.bars i { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--s3), var(--s7)); transform-origin: bottom; animation: bar 3.6s ease-in-out infinite; opacity: .95; }
.bars i:nth-child(1) { height: 38%; animation-delay: -.2s; } .bars i:nth-child(2) { height: 62%; animation-delay: -.8s; }
.bars i:nth-child(3) { height: 48%; animation-delay: -1.4s; } .bars i:nth-child(4) { height: 82%; animation-delay: -2s; }
.bars i:nth-child(5) { height: 66%; animation-delay: -2.6s; } .bars i:nth-child(6) { height: 96%; animation-delay: -3.2s; }
@keyframes bar { 50% { transform: scaleY(.72); } }
.feed { display: grid; gap: 8px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .76rem; height: 118px; overflow: hidden; align-content: end; }
.feed li { display: flex; gap: 10px; color: var(--s3); padding: 7px 11px; border-radius: 10px; background: rgba(244, 227, 168, .05); animation: in .5s var(--ease); }
.feed li em { color: var(--muted); font-style: normal; }
@keyframes in { from { opacity: 0; transform: translateY(12px); } }
.fl { padding: 12px 18px; font-size: .84rem; font-weight: 500; display: flex; align-items: center; gap: 10px; white-space: nowrap; border-radius: 16px; }
.f1 { right: 0; top: 2%; animation: floaty 6s -1s ease-in-out infinite; }
.f2 { left: 0; bottom: 20%; animation: floaty 8s -3s ease-in-out infinite; }
.f3 { right: 4%; bottom: 3%; animation: floaty 7s -2s ease-in-out infinite; }
.fl .ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(217, 182, 78, .15); color: var(--s1); font-size: .85rem; }
.orb { right: -2%; top: 46%; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, var(--s1), var(--s5) 55%, var(--s7)); box-shadow: 0 0 60px rgba(217, 182, 78, .55); animation: floaty 5s ease-in-out infinite; border: 0; }
.orb svg { width: 40px; height: 40px; color: var(--ink); animation: spin 14s linear infinite; }
@keyframes floaty { 50% { transform: translateY(-16px); } }
@keyframes spin { to { transform: rotate(360deg); } }
.ring { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border: 1px dashed var(--line2); border-radius: 50%; animation: spin 60s linear infinite; pointer-events: none; }

/* marquee */
.marquee { padding: 34px 0; border-block: 1px solid var(--line); background: var(--bg2); overflow: hidden; }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--head); font-size: 1.5rem; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 64px; letter-spacing: -.02em; }
.marquee span::after { content: "✦"; color: var(--s5); font-size: 1rem; }
@keyframes slide { to { transform: translateX(-50%); } }

/* services cards */
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sc { position: relative; display: flex; flex-direction: column; min-height: 440px; padding: 32px 30px 28px; border-radius: 26px; background: linear-gradient(165deg, #1f1b14, #100e0b 72%); color: var(--text); border: 1px solid rgba(244, 227, 168, .12); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.sc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 182, 78, .2), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.sc::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, var(--s3), transparent); transform: translateX(-100%); transition: transform .9s var(--ease); }
.sc:hover { transform: translateY(-8px); border-color: rgba(217, 182, 78, .55); box-shadow: 0 40px 70px -30px rgba(40, 28, 4, .55), 0 0 0 1px rgba(217, 182, 78, .15); }
.sc:hover::before { opacity: 1; }
.sc:hover::after { transform: translateX(100%); }
.sc .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.sc .no { font-family: var(--head); font-size: .82rem; letter-spacing: .14em; color: var(--s3); }
.sc .tg { font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; padding: 4px 11px; border-radius: 99px; border: 1px solid rgba(217, 182, 78, .45); color: var(--s1); }
.sc .ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 24px; color: var(--s1); background: linear-gradient(145deg, rgba(244, 227, 168, .18), rgba(184, 145, 47, .06)); border: 1px solid rgba(217, 182, 78, .38); transition: transform .5s var(--ease); }
.sc:hover .ic { transform: rotate(-8deg) scale(1.08); }
.sc .ic svg { width: 28px; height: 28px; }
.sc h3 { font-size: 1.5rem; margin-bottom: 12px; }
.sc p { color: var(--muted); font-size: .95rem; }
.sc ul { margin-top: 20px; display: grid; gap: 9px; }
.sc li { display: flex; gap: 11px; font-size: .9rem; color: #d9d3c5; }
.sc li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--s3); box-shadow: 0 0 10px var(--s3); }
.sc .more { margin-top: auto; padding-top: 26px; display: flex; justify-content: space-between; align-items: center; color: var(--s1); font-weight: 600; font-size: .9rem; }
.sc .more .arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(217, 182, 78, .45); display: grid; place-items: center; transition: background .3s, color .3s, transform .4s var(--ease); }
.sc:hover .more .arrow { background: var(--s3); color: var(--ink); transform: rotate(-45deg); }
.sc.feat { background: linear-gradient(150deg, #f7e9b3, #dcb94f 52%, #a9801f); color: #1a1407; border-color: rgba(255, 241, 194, .6); }
.sc.feat::before { background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .45), transparent 60%); }
.sc.feat .no, .sc.feat .more { color: #2b2108; }
.sc.feat .tg { border-color: rgba(26, 20, 7, .5); color: #1a1407; }
.sc.feat .ic { color: #1a1407; background: rgba(26, 20, 7, .1); border-color: rgba(26, 20, 7, .3); }
.sc.feat p { color: #3d3010; }
.sc.feat li { color: #2b2108; }
.sc.feat li::before { background: #1a1407; box-shadow: none; }
.sc.feat .more .arrow { border-color: rgba(26, 20, 7, .45); }
.sc.feat:hover .more .arrow { background: #1a1407; color: var(--s1); }
.sc.plain { min-height: 0; }

/* card animations */
.viz { position: absolute; right: 28px; top: 66px; width: 92px; height: 92px; color: var(--s3); pointer-events: none; }
.sc.feat .viz { color: #1a1407; }
.viz i { position: absolute; display: block; }
.v-gaas i { inset: 0; border-radius: 50%; border: 1.5px solid currentColor; animation: ripple 3.2s ease-out infinite; }
.v-gaas i:nth-child(2) { animation-delay: -1.07s; } .v-gaas i:nth-child(3) { animation-delay: -2.13s; }
.v-gaas::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: currentColor; }
@keyframes ripple { from { transform: scale(.25); opacity: .9; } to { transform: scale(1); opacity: 0; } }
.v-web { border: 1.5px solid rgba(217, 182, 78, .45); border-radius: 12px; }
.v-web i { left: 12px; width: calc(100% - 24px); height: 9px; border-radius: 6px; background: currentColor; opacity: .75; transform-origin: left; animation: wbar 3.4s ease-in-out infinite; }
.v-web i:nth-child(1) { top: 14px; } .v-web i:nth-child(2) { top: 36px; animation-delay: -1s; } .v-web i:nth-child(3) { top: 58px; animation-delay: -2s; }
@keyframes wbar { 50% { transform: scaleX(.5); } }
.v-fin i { bottom: 0; width: 12px; border-radius: 4px 4px 2px 2px; background: currentColor; transform-origin: bottom; animation: bar 2.8s ease-in-out infinite; }
.v-fin i:nth-child(1) { left: 2px; height: 34%; } .v-fin i:nth-child(2) { left: 21px; height: 56%; animation-delay: -.6s; } .v-fin i:nth-child(3) { left: 40px; height: 44%; animation-delay: -1.2s; } .v-fin i:nth-child(4) { left: 59px; height: 76%; animation-delay: -1.8s; } .v-fin i:nth-child(5) { left: 78px; height: 96%; animation-delay: -2.4s; }
.v-saas i { left: 16px; width: 60px; height: 60px; border-radius: 14px; border: 1.5px solid currentColor; transform: rotateX(62deg) rotateZ(45deg); animation: layer 3.2s ease-in-out infinite; }
.v-saas i:nth-child(1) { top: 2px; opacity: .45; } .v-saas i:nth-child(2) { top: 16px; opacity: .7; animation-delay: -.5s; } .v-saas i:nth-child(3) { top: 30px; animation-delay: -1s; background: rgba(217, 182, 78, .15); }
@keyframes layer { 50% { translate: 0 -7px; } }
.v-agent i { inset: 0; border-radius: 50%; border: 1px dashed currentColor; animation: spin 7s linear infinite; }
.v-agent i::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: currentColor; }
.v-agent i:nth-child(2) { inset: 20px; animation-duration: 4.5s; animation-direction: reverse; }
.v-agent::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 4px; background: currentColor; transform: rotate(45deg); }
.v-auto::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; margin-top: -1px; background: currentColor; opacity: .35; }
.v-auto i { top: calc(50% - 9px); width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid currentColor; }
.v-auto i:nth-child(1) { left: 0; } .v-auto i:nth-child(2) { left: calc(50% - 9px); } .v-auto i:nth-child(3) { right: 0; }
.v-auto::after { content: ""; position: absolute; top: calc(50% - 4px); left: 0; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; animation: travel 2.8s ease-in-out infinite; }
@keyframes travel { from { left: 0; } to { left: calc(100% - 8px); } }
.v-chat i { height: 24px; border-radius: 13px; opacity: 0; animation: pop 6s ease-in-out infinite; }
.v-chat i:nth-child(1) { left: 0; top: 6px; width: 70%; border: 1.5px solid currentColor; border-bottom-left-radius: 3px; }
.v-chat i:nth-child(2) { right: 0; top: 38px; width: 60%; background: currentColor; border-bottom-right-radius: 3px; animation-delay: 1.4s; }
.v-chat i:nth-child(3) { left: 0; top: 70px; width: 44%; border: 1.5px solid currentColor; border-bottom-left-radius: 3px; animation-delay: 2.8s; }
@keyframes pop { 0% { opacity: 0; transform: translateY(8px); } 12%, 78% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.v-video { border: 1.5px solid rgba(217, 182, 78, .45); border-radius: 14px; }
.sc.feat .v-video { border-color: rgba(26, 20, 7, .45); }
.v-video::before { content: ""; position: absolute; left: 50%; top: 40%; margin: -11px 0 0 -7px; border-left: 18px solid currentColor; border-top: 11px solid transparent; border-bottom: 11px solid transparent; animation: beat 2.4s ease-in-out infinite; }
.v-video i { left: 10px; bottom: 10px; height: 4px; border-radius: 3px; background: currentColor; }
.v-video i:nth-child(1) { width: calc(100% - 20px); opacity: .25; }
.v-video i:nth-child(2) { width: calc(100% - 20px); transform-origin: left; animation: prog 4s linear infinite; }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes beat { 50% { transform: scale(1.18); } }
.v-sec { border: 1.5px solid currentColor; border-radius: 50%; }
.v-sec::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 72%, currentColor); opacity: .5; animation: spin 3s linear infinite; }
.v-sec i:nth-child(1) { left: 0; right: 0; top: 50%; height: 1px; background: currentColor; opacity: .3; }
.v-sec i:nth-child(2) { top: 0; bottom: 0; left: 50%; width: 1px; background: currentColor; opacity: .3; }
.v-sec i:nth-child(3) { right: 22px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.6s steps(2) infinite; }

/* autonomous */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.checks li { display: flex; gap: 14px; margin-bottom: 18px; color: var(--muted); }
.checks li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: rgba(217, 182, 78, .15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9B64E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat; }
.checks li strong { color: var(--text); font-weight: 600; }
.term { background: #060504; border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--s7); }
.term-bar span { margin-left: 12px; font-size: .76rem; color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
.term pre { padding: 24px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85rem; line-height: 2; color: var(--s3); min-height: 330px; white-space: pre-wrap; }
.term pre .t { color: var(--muted); } .term pre .ok { color: #4ade80; } .term pre .k { color: var(--s1); }
.caret { display: inline-block; width: 8px; height: 1em; background: var(--s3); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* proof / numbers */
.proof { position: relative; border-radius: 34px; padding: 64px; overflow: hidden; background: radial-gradient(900px 420px at 88% -12%, rgba(217, 182, 78, .24), transparent 60%), radial-gradient(600px 300px at -5% 110%, rgba(184, 145, 47, .14), transparent 60%), linear-gradient(160deg, #1d1912, #0d0b08); border: 1px solid rgba(244, 227, 168, .16); }
.proof::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 90% 0%, #000, transparent 65%); -webkit-mask-image: radial-gradient(ellipse at 90% 0%, #000, transparent 65%); opacity: .7; }
.proof > * { position: relative; }
.proof-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: end; margin-bottom: 48px; }
.proof-head h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.proof-head p { color: var(--muted); font-size: 1.05rem; }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pgrid.four { grid-template-columns: repeat(4, 1fr); }
.pt { position: relative; padding: 28px 26px 30px; border-radius: 22px; overflow: hidden; background: rgba(255, 255, 255, .03); border: 1px solid rgba(244, 227, 168, .12); transition: transform .45s var(--ease), border-color .3s, background .3s; isolation: isolate; }
.pt::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 182, 78, .18), transparent 60%); opacity: 0; transition: opacity .3s; }
.pt:hover { transform: translateY(-5px); border-color: rgba(217, 182, 78, .5); }
.pt:hover::before { opacity: 1; }
.pt .pi { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px; background: rgba(217, 182, 78, .12); border: 1px solid rgba(217, 182, 78, .3); color: var(--s3); }
.pt .pi svg { width: 22px; height: 22px; }
.pt b { display: block; font-family: var(--head); font-size: clamp(2.6rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.04em; background: linear-gradient(180deg, #fff1c2, #d9b64e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pt strong { display: block; margin-top: 14px; font-family: var(--head); font-size: 1.12rem; color: var(--text); letter-spacing: -.01em; }
.pt span { display: block; margin-top: 6px; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.pt::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--s5), var(--s1)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .3s; }
.pgrid.in .pt::after { transform: scaleX(1); }
.proof-cta { margin-top: 40px; }

/* process flow */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 10px; }
.flow::before, .flow::after { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 35px; height: 2px; background: rgba(244, 227, 168, .14); }
.flow::after { background: linear-gradient(90deg, var(--s5), var(--s1)); box-shadow: 0 0 14px var(--s3); transform: scaleX(0); transform-origin: left; transition: transform 2.4s var(--ease) .3s; }
.flow.in::after { transform: scaleX(1); }
.fs { position: relative; text-align: center; padding: 0 6px; }
.fs .nd { position: relative; z-index: 1; width: 72px; height: 72px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 1.3rem; color: var(--s1); background: radial-gradient(circle at 30% 25%, #2d2617, #14110b); border: 1px solid rgba(217, 182, 78, .55); box-shadow: 0 0 0 9px var(--bg), 0 0 44px -6px rgba(217, 182, 78, .5); }
.fs .nd::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--s3); animation: ring 3s ease-out infinite; }
.fs:nth-child(2) .nd::after { animation-delay: .75s; } .fs:nth-child(3) .nd::after { animation-delay: 1.5s; } .fs:nth-child(4) .nd::after { animation-delay: 2.25s; }
.fs h3 { margin-bottom: 10px; font-size: 1.35rem; }
.fs p { color: var(--muted); font-size: .95rem; max-width: 30ch; margin: 0 auto; }
.fs .dl { display: inline-block; margin-top: 16px; padding: 6px 14px; border-radius: 99px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(217, 182, 78, .35); color: var(--s1); background: rgba(217, 182, 78, .06); }

/* tech logos */
.tk-group { margin-bottom: 44px; }
.tk-group h3 { font-family: var(--body); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--s3); font-weight: 600; margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.tk-group h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tkg { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.tk { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 14px 20px; border-radius: 20px; background: linear-gradient(165deg, #1b1812, #100e0b); border: 1px solid rgba(244, 227, 168, .1); text-align: center; transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; overflow: hidden; }
.tk::before { content: ""; position: absolute; left: 50%; top: -30px; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; background: var(--c, #d9b64e); opacity: 0; filter: blur(46px); transition: opacity .4s; }
.tk:hover { transform: translateY(-6px); border-color: rgba(244, 227, 168, .35); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7); }
.tk:hover::before { opacity: .3; }
.tk img, .tk > svg { position: relative; width: 44px; height: 44px; transition: transform .4s var(--ease); }
.tk > svg { color: var(--s3); }
.tk:hover img, .tk:hover > svg { transform: scale(1.14) rotate(-4deg); }
.tk span { position: relative; font-size: .88rem; font-weight: 500; color: var(--text); }

/* work */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.work-grid.three { grid-template-columns: repeat(3, 1fr); }
.wk { display: block; border-radius: var(--r); background: var(--surf); border: 1px solid var(--line); overflow: hidden; transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; }
.wk:hover { transform: translateY(-8px); border-color: var(--s5); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.frame { margin: 18px 18px 0; border-radius: 14px 14px 0 0; border: 1px solid var(--line2); border-bottom: 0; background: #080706; overflow: hidden; }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--s7); }
.frame-bar span { margin-left: 8px; font-size: .68rem; color: var(--muted); font-family: ui-monospace, Consolas, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.wk:hover .frame img { transform: scale(1.05); }
.wk-body { padding: 24px 28px 28px; }
.tag { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--s5); margin-bottom: 8px; display: block; }
.wk-body p { color: var(--muted); font-size: .94rem; margin-top: 8px; }
.wk-body .more { margin-top: 16px; }
.more { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: .9rem; color: var(--s3); }
.more:hover { color: var(--s1); }
.nossl { display: inline-block; margin-left: 8px; font-size: .62rem; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line2); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }

/* services page */
.page-hero { padding: 110px 0 70px; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { margin-bottom: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(23, 21, 18, .7); font-size: .88rem; color: var(--s1); transition: border-color .25s, background .25s, transform .3s var(--ease); }
a.chip:hover, .chip:hover { border-color: var(--s3); background: var(--surf2); transform: translateY(-2px); }
.svc { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; padding: 64px 0; border-top: 1px solid var(--line); }
.svc:first-child { border-top: 0; }
.svc .no { font-family: var(--head); color: transparent; -webkit-text-stroke: 1px var(--s5); font-size: 4.4rem; font-weight: 700; line-height: 1; display: block; margin-bottom: 22px; }
.svc h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 16px; }
.svc > div:first-child p { color: var(--muted); }
.svc .chips { margin-top: 28px; }
.stack-g { margin-bottom: 38px; }
.stack-g h3 { font-family: var(--body); font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); font-weight: 500; margin-bottom: 16px; }

/* faq */
.faq { max-width: 860px; margin-inline: auto; }
.faq details { border-bottom: 1px solid rgba(20, 18, 13, .14); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 0; font-family: var(--head); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.8rem; color: var(--s7); transition: transform .3s var(--ease); line-height: 1; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 26px; color: #5b5646; max-width: 64ch; }

/* cta */
.cta { position: relative; overflow: hidden; border-radius: 36px; padding: 96px 48px; text-align: center; background: linear-gradient(135deg, #2a2314, #0f0d0a 70%); border: 1px solid var(--line2); }
.cta::before { content: ""; position: absolute; width: 620px; height: 620px; left: 50%; top: -340px; margin-left: -310px; background: radial-gradient(closest-side, rgba(217, 182, 78, .35), transparent 70%); animation: floaty 9s ease-in-out infinite; }
.cta > * { position: relative; }
.cta h2 { margin-bottom: 20px; max-width: 18ch; margin-inline: auto; }
.cta p { color: var(--s1); opacity: .8; max-width: 54ch; margin: 0 auto 38px; font-size: 1.1rem; }
.cta .hero-cta { justify-content: center; }

/* contact */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
.contact-list li { display: flex; gap: 18px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-list .ic { flex: none; width: 52px; height: 52px; border-radius: 16px; background: rgba(217, 182, 78, .1); border: 1px solid var(--line2); display: grid; place-items: center; color: var(--s3); }
.contact-list .ic svg { width: 22px; height: 22px; }
.contact-list small { display: block; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.contact-list a { color: var(--s1); font-weight: 600; font-size: 1.1rem; }
.contact-list a:hover { color: var(--s3); }
.form { padding: 42px; border-radius: 28px; background: var(--surf); border: 1px solid var(--line2); display: grid; gap: 20px; }
label { font-size: .82rem; color: var(--muted); display: grid; gap: 8px; }
input, select, textarea { font-size: .9rem; background: var(--bg2); border: 1px solid var(--line2); color: var(--text); padding: 15px 17px; border-radius: 14px; font-family: inherit; width: 100%; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--s3); box-shadow: 0 0 0 4px rgba(217, 182, 78, .15); }
textarea { min-height: 140px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.note { font-size: .82rem; color: var(--muted); }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: 90px 0 34px; background: var(--bg2); overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.site-footer h4 { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--s5); margin-bottom: 20px; font-weight: 600; }
.site-footer li { margin-bottom: 12px; }
.site-footer li a, .site-footer p { color: var(--muted); font-size: .94rem; }
.site-footer li a:hover { color: var(--s1); }
.big-word { font-family: var(--head); font-weight: 700; font-size: clamp(4rem, 17vw, 15rem); line-height: .8; letter-spacing: -.06em; text-align: center; color: transparent; -webkit-text-stroke: 1px var(--line2); user-select: none; margin: 10px 0 30px; white-space: nowrap; }
.foot-bottom { border-top: 1px solid var(--line); padding-top: 26px; color: var(--muted); font-size: .85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* floating widgets */
.dock { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.dock .fab { width: 60px; height: 60px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 14px 40px -8px rgba(0, 0, 0, .7); transition: transform .3s var(--ease); position: relative; }
.dock .fab:hover { transform: scale(1.1) rotate(-4deg); }
.fab svg { width: 28px; height: 28px; }
.fab-wa { background: #25d366; color: #052e14; }
.fab-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.fab-chat { background: linear-gradient(135deg, var(--s1), var(--s5)); color: var(--ink); }
.fab-chat .badge-n { position: absolute; top: -3px; right: -3px; width: 20px; height: 20px; border-radius: 50%; background: #ef4444; color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.nudge { background: var(--surf2); border: 1px solid var(--line2); color: var(--text); font-size: .84rem; padding: 10px 16px; border-radius: 16px 16px 4px 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: in .6s var(--ease) 3s both; max-width: 220px; line-height: 1.4; }
.nudge b { color: var(--s3); display: block; }
.chat { position: fixed; right: 22px; bottom: 104px; z-index: 90; width: min(390px, calc(100vw - 32px)); height: min(560px, calc(100vh - 140px)); display: none; flex-direction: column; border-radius: 24px; background: var(--bg2); border: 1px solid var(--line2); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .9); overflow: hidden; }
.chat.open { display: flex; animation: in .4s var(--ease); }
.chat-head { padding: 18px 20px; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #2a2314, #1a1710); border-bottom: 1px solid var(--line); }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--s1), var(--s5)); display: grid; place-items: center; color: var(--ink); font-weight: 800; font-family: var(--head); position: relative; }
.avatar::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #4ade80; border: 2px solid #1a1710; }
.chat-head b { display: block; font-family: var(--head); line-height: 1.2; }
.chat-head small { color: var(--s3); font-size: .74rem; }
.chat-x { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 1.5rem; cursor: pointer; line-height: 1; }
.chat-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.msg { max-width: 86%; padding: 12px 16px; border-radius: 18px; font-size: .92rem; line-height: 1.5; animation: in .35s var(--ease); }
.msg.bot { background: var(--surf2); border: 1px solid var(--line); border-bottom-left-radius: 5px; align-self: flex-start; }
.msg.me { background: var(--s3); color: var(--ink); border-bottom-right-radius: 5px; align-self: flex-end; }
.msg a { color: var(--s1); text-decoration: underline; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; }
.quick button { background: transparent; border: 1px solid var(--line2); color: var(--s1); padding: 8px 14px; border-radius: 999px; font-size: .82rem; cursor: pointer; transition: background .2s, border-color .2s; }
.quick button:hover { background: var(--surf2); border-color: var(--s3); }
.chat-in { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
.chat-in input { border-radius: 999px; padding: 12px 18px; font-size: .9rem; }
.chat-in button { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--s3); color: var(--ink); cursor: pointer; font-size: 1.1rem; }
.typing { display: inline-flex; gap: 4px; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--s3); animation: blink 1s infinite; } .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }

/* reveal */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.split-words .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-words .w i { display: inline-block; font-style: normal; transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i) * .06s); }
.split-words.in .w i { transform: none; }

/* inner page hero with animation */
.page-hero .wrap { display: grid; grid-template-columns: 1fr .95fr; gap: 30px; align-items: center; }
.page-hero h1 { max-width: 12ch; font-size: clamp(2.4rem, 4.8vw, 4.2rem); }
.page-hero .lead { max-width: 46ch; }
.page-hero .visual { height: 440px; }
.sysorb { position: absolute; inset: 0; display: grid; place-items: center; }
.sysorb .core { position: relative; z-index: 2; width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 2.1rem; color: var(--ink); background: radial-gradient(circle at 30% 25%, #fff1c2, #d9b64e 55%, #8a6d1f); box-shadow: 0 0 80px rgba(217, 182, 78, .55); }
.sysorb .rg { position: absolute; left: 50%; top: 50%; border: 1px dashed var(--line2); border-radius: 50%; }
.rg1 { width: 250px; height: 250px; margin: -125px 0 0 -125px; animation: spin 32s linear infinite; }
.rg2 { width: 400px; height: 400px; margin: -200px 0 0 -200px; animation: spin 54s linear infinite reverse; }
.no-a { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)); }
.no-a > span { display: block; transform: rotate(calc(var(--a) * -1)); }
.no-a i { display: grid; place-items: center; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 16px; color: var(--s1); background: linear-gradient(145deg, #2a2416, #14110b); border: 1px solid rgba(217, 182, 78, .45); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8); }
.rg1 .no-a i { animation: spin 32s linear infinite reverse; }
.rg2 .no-a i { animation: spin 54s linear infinite; }
.no-a svg { width: 22px; height: 22px; }
.pf { position: absolute; width: 62%; border-radius: 18px; overflow: hidden; }
.pf .fb { display: flex; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.pf .fb i { width: 7px; height: 7px; border-radius: 50%; background: var(--s5); }
.pf img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.pf1 { left: 0; top: 4%; animation: floaty 7s ease-in-out infinite; }
.pf2 { right: 0; top: 30%; animation: floaty 8s -2s ease-in-out infinite; }
.pf3 { left: 12%; bottom: 0; animation: floaty 9s -4s ease-in-out infinite; }
.prof { left: 8%; top: 8%; width: 72%; padding: 26px; animation: floaty 8s ease-in-out infinite; }
.prof-top { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.prof .av { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 1.6rem; color: var(--ink); background: conic-gradient(from 210deg, #f4e3a8, #d9b64e, #8a6d1f, #e6c766, #f4e3a8); }
.prof b { display: block; font-family: var(--head); font-size: 1.1rem; }
.prof small { color: var(--muted); font-size: .8rem; }
.sk { display: grid; gap: 15px; }
.sk div { display: grid; gap: 7px; font-size: .78rem; color: var(--muted); }
.meter { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--s5), var(--s1)); animation: fill 2.6s var(--ease) both; }
@keyframes fill { from { width: 0; } }
.convo { left: 6%; top: 8%; width: 78%; padding: 22px; animation: floaty 8s ease-in-out infinite; }
.convo-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.convo-top .av { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-family: var(--head); color: var(--ink); background: linear-gradient(135deg, #f4e3a8, #c9a227); }
.convo-top small { display: block; color: #4ade80; font-size: .72rem; }
.cb { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: .84rem; line-height: 1.45; margin-bottom: 10px; opacity: 0; animation: cpop 11s ease-in-out infinite; }
.cb.in { background: var(--surf2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cb.out { margin-left: auto; background: linear-gradient(135deg, #f4e3a8, #d9b64e); color: var(--ink); border-bottom-right-radius: 4px; }
.cb:nth-of-type(2) { animation-delay: 1.8s; } .cb:nth-of-type(3) { animation-delay: 3.6s; } .cb:nth-of-type(4) { animation-delay: 5.4s; }
@keyframes cpop { 0% { opacity: 0; transform: translateY(12px); } 6%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* marquee with logos */
.marquee-track { gap: 56px; }
.marquee span { font-size: 1.15rem; gap: 14px; }
.marquee span img, .marquee span svg { width: 28px; height: 28px; flex: none; }
.marquee span svg { color: var(--s3); }
.marquee span::after { margin-left: 42px; }

/* contact wizard */
.wiz { position: relative; padding: 38px; border-radius: 30px; overflow: hidden; background: linear-gradient(165deg, #1c1912, #100e0b); border: 1px solid rgba(244, 227, 168, .18); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9); }
.wiz::before { content: ""; position: absolute; width: 340px; height: 340px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(217, 182, 78, .28), transparent 70%); pointer-events: none; }
.wiz > * { position: relative; }
.wtop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--s3); font-weight: 600; }
.wprog { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); margin-bottom: 30px; overflow: hidden; }
.wprog i { display: block; height: 100%; width: 25%; border-radius: 4px; background: linear-gradient(90deg, var(--s5), var(--s1)); box-shadow: 0 0 12px var(--s3); transition: width .6s var(--ease); }
.wstep { display: none; }
.wstep.on { display: grid; gap: 22px; animation: slidein .55s var(--ease); }
@keyframes slidein { from { opacity: 0; transform: translateX(26px); } }
.wstep h3 { font-size: 1.75rem; }
.wstep > p { color: var(--muted); margin-top: -12px; font-size: .95rem; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.opt { position: relative; cursor: pointer; display: block; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt > span { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; padding: 16px; border-radius: 16px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); font-size: .86rem; line-height: 1.3; color: var(--text); font-weight: 500; transition: border-color .25s, background .25s, transform .3s var(--ease), box-shadow .25s; }
.opt > span svg { width: 22px; height: 22px; color: var(--s3); }
.opt:hover > span { border-color: var(--s5); transform: translateY(-3px); }
.opt input:checked + span { border-color: var(--s3); background: rgba(217, 182, 78, .13); box-shadow: 0 0 0 3px rgba(217, 182, 78, .14); }
.opt input:checked + span::after { content: "✓"; position: absolute; right: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; background: var(--s3); color: var(--ink); }
.opt input:focus-visible + span { outline: 2px solid var(--s1); outline-offset: 2px; }
.fgroup { display: grid; gap: 10px; }
.fgroup > b { font-size: .82rem; color: var(--muted); font-weight: 500; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills .opt > span { flex-direction: row; align-items: center; height: auto; padding: 10px 18px; border-radius: 999px; }
.pills .opt input:checked + span::after { position: static; margin-left: 2px; width: 16px; height: 16px; font-size: .62rem; }
.mrow { display: flex; gap: 10px; align-items: center; }
.mrow select { flex: none; width: 150px; }
.mrow button { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--muted); cursor: pointer; font-size: 1.2rem; transition: color .2s, border-color .2s; }
.mrow button:hover { color: #f59e8b; border-color: #f59e8b; }
.addmore { justify-self: start; background: none; border: 1px dashed rgba(217, 182, 78, .5); color: var(--s1); padding: 9px 18px; border-radius: 999px; cursor: pointer; font-size: .84rem; transition: background .2s; }
.addmore:hover { background: rgba(217, 182, 78, .1); }
.wnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.wnav .btn { padding: 13px 26px; }
.wnav .spacer { flex: 1; }
.werr { color: #f59e8b; font-size: .84rem; min-height: 1.2em; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .84rem; cursor: pointer; }
.consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: #d9b64e; padding: 0; }
.sum { white-space: pre-wrap; font-size: .85rem; line-height: 1.7; color: #d9d3c5; padding: 20px 22px; border-radius: 18px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line2); max-height: 280px; overflow: auto; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.sendrow { display: flex; flex-wrap: wrap; gap: 12px; }
.wdone { display: none; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 16px; background: rgba(74, 222, 128, .1); border: 1px solid rgba(74, 222, 128, .35); color: #b7f3cb; font-size: .88rem; }
.wdone.on { display: flex; animation: in .5s var(--ease); }

/* cookie banner */
.cookie { position: fixed; left: 50%; bottom: 22px; z-index: 130; width: min(980px, calc(100vw - 32px)); display: grid; grid-template-columns: auto 1fr auto; gap: 20px 24px; align-items: center; padding: 22px 26px; border-radius: 26px; background: rgba(20, 18, 13, .95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(217, 182, 78, .38); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .9); transform: translate(-50%, 160%); opacity: 0; visibility: hidden; transition: transform .8s var(--ease), opacity .5s, visibility 0s .8s; }
.cookie.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .8s var(--ease), opacity .5s; }
.cookie .ci { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--s1); background: linear-gradient(145deg, rgba(244, 227, 168, .18), rgba(184, 145, 47, .06)); border: 1px solid rgba(217, 182, 78, .4); }
.cookie .ci svg { width: 26px; height: 26px; }
.cookie h4 { font-family: var(--head); font-size: 1.05rem; margin-bottom: 4px; }
.cookie p { font-size: .86rem; color: var(--muted); line-height: 1.55; }
.cookie p button { background: none; border: 0; color: var(--s1); text-decoration: underline; cursor: pointer; font: inherit; }
.cbtns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cbtns .btn { padding: 12px 22px; font-size: .88rem; }
.cprefs { grid-column: 1 / -1; display: none; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.cookie.prefs .cprefs { display: grid; }
.cprefs label { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line2); font-size: .84rem; color: var(--text); cursor: pointer; }
.cprefs label small { display: block; color: var(--muted); font-size: .74rem; margin-top: 2px; }
.cprefs input { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; padding: 0; border-radius: 99px; background: rgba(255, 255, 255, .14); border: 0; position: relative; cursor: pointer; transition: background .25s; }
.cprefs input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.cprefs input:checked { background: var(--s5); }
.cprefs input:checked::after { transform: translateX(18px); }
.cprefs input:disabled { opacity: .6; cursor: not-allowed; }

/* floating widgets: WhatsApp left, assistant right */
.wa-float { position: fixed; left: 22px; bottom: 22px; z-index: 80; display: flex; align-items: center; height: 60px; max-width: 60px; border-radius: 999px; overflow: hidden; background: #25d366; color: #052e14; white-space: nowrap; box-shadow: 0 14px 40px -8px rgba(0, 0, 0, .7); animation: wapulse 2.8s ease-out infinite, wahint 8s 3s 1; transition: max-width .5s var(--ease), transform .3s var(--ease); }
.wa-float:hover { max-width: 250px; transform: translateY(-3px); animation-play-state: paused; }
.wa-float svg { flex: none; width: 60px; height: 60px; padding: 16px; }
.wa-float span { padding-right: 24px; font-weight: 600; font-size: .92rem; }
@keyframes wapulse { 0% { box-shadow: 0 14px 40px -8px rgba(0, 0, 0, .7), 0 0 0 0 rgba(37, 211, 102, .55); } 70%, 100% { box-shadow: 0 14px 40px -8px rgba(0, 0, 0, .7), 0 0 0 18px rgba(37, 211, 102, 0); } }
@keyframes wahint { 0%, 100% { max-width: 60px; } 10%, 85% { max-width: 250px; } }
.dock { right: 22px; bottom: 22px; }

/* footer extras */
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line2); transition: color .25s, border-color .25s, background .25s, transform .3s var(--ease); }
.socials a:hover { color: var(--ink); background: var(--s3); border-color: var(--s3); transform: translateY(-3px); }
.socials svg { width: 20px; height: 20px; }
.linkbtn { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--s1); }

@media (max-width: 1040px) {
  section { padding: 84px 0; }
  .hero .wrap, .split, .svc, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .visual { height: 480px; max-width: 560px; margin-inline: auto; width: 100%; }
  .work-grid.three { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .topbar .links { display: none; }
  .menu-btn { display: block; }
  .nav { padding-left: 18px; }
  .nav-links { position: absolute; top: 84px; left: 24px; right: 24px; flex-direction: column; align-items: stretch; gap: 2px; background: rgba(12, 11, 9, .97); border: 1px solid var(--line2); border-radius: 24px; padding: 14px; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 16px; }
  .nav-links a.btn { margin: 8px 0 0; justify-content: center; }
  .hero { padding: 50px 0 70px; }
  .work-grid, .work-grid.three, .row { grid-template-columns: 1fr; }
  .cta { padding: 64px 24px; border-radius: 26px; }
  .visual { height: 430px; }
  .fl { font-size: .76rem; padding: 9px 13px; }
  .orb { width: 70px; height: 70px; }
  .dock { right: 14px; bottom: 14px; }
  .chat { right: 12px; bottom: 96px; }
  .nudge { display: none; }
}
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } .trust { gap: 24px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .split-words .w i { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* responsive additions */
@media (max-width: 1040px) {
  .sgrid { grid-template-columns: repeat(2, 1fr); }
  .sgrid .sc:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pgrid, .pgrid.four { grid-template-columns: repeat(2, 1fr); }
  .proof { padding: 44px 32px; }
  .proof-head { grid-template-columns: 1fr; gap: 16px; }
  .flow { grid-template-columns: repeat(2, 1fr); row-gap: 48px; }
  .flow::before, .flow::after { display: none; }
  .page-hero .wrap { grid-template-columns: 1fr; }
  .page-hero h1 { max-width: 16ch; }
  .page-hero .visual { height: 400px; max-width: 520px; margin: 10px auto 0; width: 100%; }
}
@media (max-width: 760px) {
  .sgrid, .pgrid, .pgrid.four, .opts, .cprefs { grid-template-columns: 1fr; }
  .sc { min-height: 0; }
  .proof { padding: 34px 20px; border-radius: 26px; }
  .flow { grid-template-columns: 1fr; row-gap: 34px; }
  .flow::before, .flow::after { display: block; left: 35px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .flow::after { transform: scaleY(0); transform-origin: top; }
  .flow.in::after { transform: scaleY(1); }
  .fs { text-align: left; padding: 0 0 0 96px; min-height: 72px; }
  .fs .nd { position: absolute; left: 0; top: 0; margin: 0; }
  .fs p { margin: 0; max-width: none; }
  .wiz { padding: 24px 18px; border-radius: 24px; }
  .mrow select { width: 120px; }
  .cookie { grid-template-columns: 1fr; padding: 18px; bottom: 12px; gap: 14px; }
  .cookie .ci { display: none; }
  .cbtns { justify-content: stretch; }
  .cbtns .btn { flex: 1; justify-content: center; padding: 12px 14px; }
  .wa-float { left: 14px; bottom: 14px; }
  .page-hero .visual { height: 340px; }
  .sysorb { transform: scale(.72); }
  .viz { top: 62px; right: 22px; width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) { .cb { opacity: 1; } .flow::after, .pgrid .pt::after { transform: none; } }

/* dark cards inside light sections */
.light .proof { color: var(--text); }
.light .proof .eyebrow { color: var(--s3); }
.light .proof .eyebrow::before { background: var(--s5); }
.light .proof-head p { color: var(--muted); }
.light .btn-ghost { color: var(--ink); }
.light .proof .btn-ghost { color: var(--text); border-color: var(--line2); background: rgba(244, 227, 168, .04); }
.light .proof .btn-ghost:hover { border-color: var(--s3); background: rgba(244, 227, 168, .09); }

/* footer wordmark: digital scan + glitch */
.big-word { display: flex; justify-content: center; position: relative; }
.big-word span { position: relative; display: inline-block; padding: 0 .01em; -webkit-text-stroke: 1px rgba(217, 182, 78, .38); color: transparent; background: linear-gradient(180deg, transparent 0 28%, rgba(217,182,78,.7) 44%, #fff1c2 50%, rgba(217,182,78,.7) 56%, transparent 72%) 0 85% / 100% 300% no-repeat; -webkit-background-clip: text; background-clip: text; animation: scan 4.8s linear infinite; animation-delay: calc(var(--i) * .22s); transition: color .35s, text-shadow .35s, -webkit-text-stroke-color .35s; }
.big-word span:hover { color: rgba(217, 182, 78, .9); -webkit-text-stroke-color: #fff1c2; text-shadow: 0 0 40px rgba(217, 182, 78, .8); }
.big-word::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #f4e3a8, transparent); box-shadow: 0 0 22px #d9b64e; opacity: 0; animation: sweep 4.8s linear infinite; pointer-events: none; }
.big-word.glitch span:nth-child(odd) { text-shadow: 3px 0 rgba(255, 220, 120, .55), -3px 0 rgba(184, 145, 47, .55); transform: translateX(2px) skewX(-4deg); }
.big-word.glitch span:nth-child(even) { text-shadow: -3px 0 rgba(255, 220, 120, .55); transform: translateX(-2px); clip-path: inset(0 0 38% 0); }
@keyframes scan { 0% { background-position: 0 85%; } 55%, 100% { background-position: 0 15%; } }
@keyframes sweep { 0% { top: 8%; opacity: 0; } 10% { opacity: 1; } 55% { top: 92%; opacity: 1; } 62%, 100% { top: 92%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .big-word span, .big-word::after { animation: none !important; } }