:root {
  --bg: #f7f9ff;
  --bg-soft: #eef3ff;
  --surface: rgba(255,255,255,.78);
  --surface-strong: #ffffff;
  --line: rgba(34,52,86,.13);
  --text: #13203a;
  --muted: #61708b;
  --purple: #6c5ce7;
  --blue: #3178f6;
  --cyan: #0aa6a6;
  --lime: #78c832;
  --shadow: 0 30px 80px rgba(55,72,118,.16);
  --radius: 24px;
  --container: min(1180px, calc(100% - 40px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% 10%, rgba(102,75,220,.14), transparent 26%), radial-gradient(circle at 85% 15%, rgba(63,168,255,.09), transparent 22%); z-index: -2; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
::selection { background: var(--purple); color: #fff; }
.skip-link { position: fixed; left: 16px; top: -70px; z-index: 10000; padding: 12px 18px; background: #fff; color: #000; border-radius: 10px; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 16px; }
.container { width: var(--container); margin-inline: auto; }
.narrow { max-width: 900px; }
.narrow-prose { max-width: 840px; }
.section-pad { padding: 120px 0; }
.section-pad-sm { padding: 72px 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: #d2d8e6; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow > span { width: 24px; height: 2px; background: linear-gradient(90deg,var(--purple),var(--cyan)); }
.eyebrow.centered { justify-content: center; }
.section-kicker { color: var(--muted); font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; }
.centered { text-align: center; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { line-height: 1.08; letter-spacing: -.035em; }
h1 { font-size: clamp(3.4rem, 7vw, 7rem); margin-bottom: 28px; }
h2 { font-size: clamp(2.4rem, 4.5vw, 4.5rem); margin-bottom: 24px; }
h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
p { color: var(--muted); }
.large-copy { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.65; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-weight: 750; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; cursor: pointer; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, var(--purple), #6a70ff); color: white; box-shadow: 0 14px 34px rgba(121,99,255,.28); }
.button-primary:hover { box-shadow: 0 18px 44px rgba(121,99,255,.42); }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,.03); }
.button-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); }
.button-light { background: #fff; color: #080d17; }
.button-small { min-height: 42px; padding-inline: 18px; font-size: .9rem; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: white; font-weight: 750; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 4px; }
.text-link:hover { border-color: var(--cyan); color: var(--cyan); }
.site-header { position: fixed; inset: 0 0 auto; z-index: 1000; padding: 18px 0; transition: background .25s, border-color .25s, padding .25s; }
.site-header.scrolled { padding: 10px 0; background: rgba(7,11,20,.84); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 36px; height: 36px; display: grid; grid-template-columns: repeat(3,1fr); align-items: end; gap: 3px; padding: 7px; border-radius: 11px; background: linear-gradient(145deg,#8d6dff,#3d78ff); box-shadow: inset 0 1px 1px rgba(255,255,255,.3); }
.brand-mark span { display: block; background: #fff; border-radius: 4px 4px 2px 2px; }
.brand-mark span:nth-child(1) { height: 45%; } .brand-mark span:nth-child(2) { height: 85%; } .brand-mark span:nth-child(3) { height: 65%; }
.brand-copy { display: flex; font-size: 1.1rem; letter-spacing: -.03em; }
.brand-copy strong { font-weight: 850; } .brand-copy em { font-style: normal; font-weight: 500; color: #b8c3d6; }
.primary-nav { display: flex; align-items: center; gap: 28px; }
.primary-nav > a:not(.button) { color: #c6cede; font-size: .94rem; font-weight: 650; position: relative; }
.primary-nav > a:not(.button)::after { content: ""; position: absolute; height: 2px; left: 0; right: 100%; bottom: -8px; background: var(--cyan); transition: right .25s; }
.primary-nav > a:not(.button):hover::after, .primary-nav > a[aria-current="page"]::after { right: 0; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px; }
.nav-toggle span { display: block; height: 2px; margin: 6px 0; background: white; transition: .25s; }
.hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; position: relative; padding-top: 155px; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg,transparent,var(--line),transparent); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 70px; }
.hero h1 em { display: block; font-style: normal; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); background: linear-gradient(100deg,var(--purple),var(--cyan)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-lead { max-width: 670px; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-proof { display: flex; gap: 38px; padding-top: 48px; margin-top: 48px; border-top: 1px solid var(--line); }
.hero-proof div { display: grid; gap: 4px; }
.hero-proof strong { font-size: .98rem; } .hero-proof span { color: var(--muted); font-size: .82rem; }
.hero-visual { min-height: 570px; position: relative; display: grid; place-items: center; }
.hero-visual::before { content: ""; width: 390px; height: 390px; position: absolute; background: radial-gradient(circle,rgba(130,100,255,.34),rgba(54,118,255,.1) 55%,transparent 70%); filter: blur(12px); }
.code-window { width: min(100%, 500px); position: relative; z-index: 3; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; background: linear-gradient(145deg,rgba(24,34,56,.92),rgba(10,16,29,.92)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08); transform-style: preserve-3d; }
.window-bar { height: 48px; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.035); }
.window-bar span { width: 10px; height: 10px; border-radius: 50%; background: #ff6b7d; }
.window-bar span:nth-child(2) { background: #ffc45d; } .window-bar span:nth-child(3) { background: #62db86; }
.window-bar small { margin-left: auto; color: #8d99af; }
.code-window pre { margin: 0; padding: 35px 28px; min-height: 310px; font: 500 .94rem/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #cad6ec; white-space: pre-wrap; }
.code-purple { color: #c29cff; } .code-blue { color: #72b8ff; } .code-green { color: #85e6ba; }
.deploy-row { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: rgba(108,224,208,.06); border-top: 1px solid var(--line); color: #b9c6d9; font-size: .85rem; }
.deploy-row strong { margin-left: auto; color: var(--cyan); }
.pulse-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #62e89b; box-shadow: 0 0 0 0 rgba(98,232,155,.55); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(98,232,155,0); } 100% { box-shadow: 0 0 0 0 rgba(98,232,155,0); } }
.visual-orbit { position: absolute; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; animation: spin 18s linear infinite; }
.visual-orbit::after { content: ""; width: 10px; height: 10px; position: absolute; top: 18%; left: 8%; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 18px var(--cyan); }
.orbit-one { width: 520px; height: 520px; } .orbit-two { width: 660px; height: 660px; animation-direction: reverse; animation-duration: 28s; }
.orbit-two::after { top: 65%; left: 92%; background: var(--purple); box-shadow: 0 0 18px var(--purple); }
@keyframes spin { to { transform: rotate(360deg); } }
.floating-chip { position: absolute; z-index: 5; padding: 11px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(15,23,39,.82); backdrop-filter: blur(14px); box-shadow: 0 12px 30px rgba(0,0,0,.25); color: #dce4f4; font-size: .82rem; font-weight: 700; animation: float 5s ease-in-out infinite; }
.floating-chip span { color: var(--cyan); margin-right: 5px; }
.chip-one { left: -10px; top: 22%; } .chip-two { right: -15px; top: 34%; animation-delay: -1.5s; } .chip-three { bottom: 13%; left: 8%; animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-14px); } }
.hero-marquee { margin-top: 70px; overflow: hidden; border-block: 1px solid var(--line); background: rgba(255,255,255,.025); }
.marquee-track { width: max-content; display: flex; align-items: center; gap: 28px; padding: 20px 0; animation: marquee 30s linear infinite; }
.marquee-track span { font-size: .88rem; text-transform: uppercase; letter-spacing: .12em; color: #b9c3d5; } .marquee-track i { color: var(--purple); }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-row { display: grid; grid-template-columns: repeat(6,1fr); margin-top: 34px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.logo-row span { min-height: 92px; display: grid; place-items: center; color: #8590a4; font-size: .72rem; font-weight: 850; letter-spacing: .12em; border-right: 1px solid var(--line); }
.logo-row span:last-child { border: 0; }
.section-heading { max-width: 850px; margin-bottom: 58px; }
.split-heading { max-width: none; display: grid; grid-template-columns: 1.25fr .65fr; gap: 90px; align-items: end; }
.split-heading > p { font-size: 1.08rem; padding-bottom: 14px; }
.service-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.service-card { min-height: 460px; position: relative; padding: 42px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); transition: border-color .3s, background .3s, transform .2s; transform-style: preserve-3d; }
.service-card::before { content: ""; position: absolute; width: 260px; height: 260px; right: -130px; bottom: -130px; border-radius: 50%; background: radial-gradient(circle,rgba(139,103,255,.2),transparent 68%); transition: transform .35s; }
.service-card:hover { border-color: rgba(155,124,255,.55); background: linear-gradient(145deg,rgba(155,124,255,.1),rgba(255,255,255,.02)); }
.service-card:hover::before { transform: scale(1.45); }
.service-index { color: #69758b; font-size: .78rem; font-weight: 800; letter-spacing: .15em; }
.service-icon { width: 56px; height: 56px; display: grid; place-items: center; margin: 72px 0 25px; border: 1px solid rgba(255,255,255,.16); border-radius: 17px; background: rgba(255,255,255,.05); color: var(--cyan); font-size: 1.5rem; }
.service-card p { max-width: 500px; }
.service-card ul { list-style: none; padding: 0; margin: 26px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.service-card li { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: #acb6c8; font-size: .75rem; }
.card-link { position: absolute; right: 38px; bottom: 34px; font-weight: 750; color: #d9e0ee; }
.featured-work { background: linear-gradient(180deg,transparent,rgba(255,255,255,.018),transparent); }
.work-card { display: grid; grid-template-columns: 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.035); }
.work-card-large { grid-template-columns: 1.2fr .8fr; margin-bottom: 22px; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.work-visual { min-height: 380px; position: relative; display: grid; place-items: center; overflow: hidden; }
.work-card-large .work-visual { min-height: 570px; }
.visual-data { background: radial-gradient(circle at 30% 30%,#6354bb 0,#262947 42%,#111827 100%); }
.dashboard-shell { width: 78%; height: 62%; display: grid; grid-template-columns: 19% 1fr; transform: rotate(-6deg) perspective(700px) rotateY(7deg); border: 1px solid rgba(255,255,255,.17); border-radius: 16px; overflow: hidden; background: rgba(11,17,29,.9); box-shadow: 0 40px 80px rgba(0,0,0,.35); }
.dash-side { border-right: 1px solid var(--line); background: rgba(255,255,255,.035); }
.dash-main { padding: 11%; }
.dash-main > span { display: block; width: 35%; height: 8px; background: #a698ff; border-radius: 8px; }
.dash-chart { height: 48%; display: flex; align-items: end; gap: 6%; margin: 12% 0 8%; border-bottom: 1px solid var(--line); }
.dash-chart i { width: 9%; height: 30%; border-radius: 5px 5px 0 0; background: linear-gradient(#74d3ff,#6956df); }
.dash-chart i:nth-child(2){height:55%}.dash-chart i:nth-child(3){height:42%}.dash-chart i:nth-child(4){height:78%}.dash-chart i:nth-child(5){height:68%}.dash-chart i:nth-child(6){height:92%}
.dash-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:5%;}.dash-cards b{height:45px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.03)}
.work-copy { padding: 46px; }
.work-card-large .work-copy { display: flex; flex-direction: column; justify-content: center; padding: 60px; }
.work-label { color: var(--cyan); font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; }
.work-copy h3 { font-size: clamp(1.8rem,3vw,3rem); }
.result-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 34px 0; }
.result-row div { padding-top: 18px; border-top: 1px solid var(--line); }
.result-row strong { display: block; font-size: 2rem; color: white; }.result-row span{color:var(--muted);font-size:.85rem}
.visual-commerce { background: linear-gradient(145deg,#d67bb1,#6e4bad); }
.phone-ui { width: 180px; height: 340px; padding: 22px 16px; border: 6px solid #10131d; border-radius: 32px; background:#fff; transform:rotate(7deg);box-shadow:0 30px 60px rgba(0,0,0,.3)}
.phone-top{width:36%;height:6px;margin:0 auto 24px;background:#ddd;border-radius:6px}.phone-product{height:140px;border-radius:15px;background:linear-gradient(135deg,#ffdcbe,#f7a6be)}.phone-lines{height:55px;margin:15px 0;background:repeating-linear-gradient(#ddd 0 5px,transparent 5px 14px)}.phone-ui button{width:100%;border:0;border-radius:10px;padding:11px;background:#171826;color:#fff;font-size:.75rem}
.visual-cloud { background: radial-gradient(circle,#2776a8,#15243a 55%,#101722); }
.cloud-nodes{width:260px;height:230px;position:relative}.cloud-nodes span{position:absolute;width:58px;height:58px;border-radius:18px;background:linear-gradient(145deg,#79d6ff,#7771f4);box-shadow:0 15px 35px rgba(0,0,0,.3)}.cloud-nodes span:nth-child(1){left:100px;top:0}.cloud-nodes span:nth-child(2){left:0;top:90px}.cloud-nodes span:nth-child(3){right:0;top:90px}.cloud-nodes span:nth-child(4){left:55px;bottom:0}.cloud-nodes span:nth-child(5){right:55px;bottom:0}.cloud-nodes i{position:absolute;height:1px;background:rgba(255,255,255,.5);transform-origin:left}.cloud-nodes i:nth-of-type(1){width:112px;left:128px;top:30px;transform:rotate(37deg)}.cloud-nodes i:nth-of-type(2){width:112px;left:128px;top:30px;transform:rotate(143deg)}.cloud-nodes i:nth-of-type(3){width:140px;left:62px;top:118px;transform:rotate(0deg)}
.process-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 110px; }
.process-sticky { align-self: start; position: sticky; top: 150px; }
.process-list { list-style: none; margin: 0; padding: 0; }
.process-list li { display: grid; grid-template-columns: 90px 1fr; gap: 25px; padding: 42px 0; border-top: 1px solid var(--line); }
.process-list li:last-child { border-bottom: 1px solid var(--line); }
.process-list > li > span { color: var(--purple); font-size: .8rem; font-weight: 800; letter-spacing: .14em; }
.process-list p { margin-bottom: 0; }
.metrics { border-block: 1px solid var(--line); background: rgba(255,255,255,.02); }
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.metrics-grid div { padding: 30px; border-right: 1px solid var(--line); }.metrics-grid div:last-child{border:0}
.metrics-grid strong { display: block; font-size: clamp(2.5rem,4vw,4.5rem); letter-spacing: -.06em; }.metrics-grid p{margin:4px 0 0;font-size:.88rem}
.testimonial-slider { position: relative; max-width: 980px; margin: 0 auto; padding: 40px 100px 80px; border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018)); }
.testimonial { display: none; text-align: center; margin: 0; }.testimonial.active{display:block;animation:fadeUp .5s ease}
.testimonial blockquote { margin: 0 0 36px; font-size: clamp(1.5rem,2.8vw,2.5rem); line-height: 1.4; letter-spacing: -.035em; }
.testimonial figcaption { display: grid; gap: 4px; }.testimonial figcaption span{color:var(--muted);font-size:.88rem}
.slider-button { position: absolute; top: 50%; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04); color: white; cursor: pointer; }.slider-button:hover{background:rgba(255,255,255,.1)}.slider-button.prev{left:26px}.slider-button.next{right:26px}
.slider-dots { position: absolute; left: 50%; bottom: 30px; display: flex; gap: 8px; transform: translateX(-50%); }.slider-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#4c566a;cursor:pointer}.slider-dots button.active{width:26px;border-radius:10px;background:var(--purple)}
.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 110px; }
.accordion-item { border-top: 1px solid var(--line); }.accordion-item:last-child{border-bottom:1px solid var(--line)}
.accordion h3 { margin: 0; }.accordion button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 0;border:0;background:transparent;color:white;text-align:left;font-weight:700;cursor:pointer}.accordion button span{font-size:1.6rem;font-weight:300;transition:transform .25s}.accordion button[aria-expanded="true"] span{transform:rotate(45deg)}.accordion-panel p{padding:0 40px 28px 0}
.cta-band { background: linear-gradient(115deg,#7258dc,#3178d9 65%,#3cabc0); position: relative; overflow: hidden; }
.cta-band::before { content:"";position:absolute;inset:-100%;background:repeating-radial-gradient(circle at center,transparent 0 35px,rgba(255,255,255,.04) 36px 37px);animation:spin 90s linear infinite; }
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 45px; }.cta-inner h2{margin-bottom:12px}.cta-inner p{color:rgba(255,255,255,.78);margin-bottom:0}.cta-inner .eyebrow{color:white}
.site-footer { padding: 85px 0 25px; background: #050811; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 70px; }
.footer-grid h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .15em; color:#d8dfec;margin:8px 0 24px}.footer-grid > div:not(:first-child) > a{display:block;color:#99a5b9;margin:12px 0}.footer-grid > div:not(:first-child) > a:hover{color:white}.footer-intro p{max-width:330px;margin-top:28px}.social-row{display:flex;gap:10px}.social-row a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}.social-row a:hover{background:white}.social-row a:hover svg{fill:#070b14}.social-row svg{width:17px;fill:#aab4c8}.footer-contact{margin-top:28px;font-size:.9rem}.footer-contact a{color:#cad3e2}.footer-bottom{display:flex;justify-content:space-between;gap:30px;margin-top:65px;padding-top:25px;border-top:1px solid var(--line)}.footer-bottom p{font-size:.78rem;margin:0}
.cursor-glow { width: 380px; height: 380px; position: fixed; left: 0; top: 0; z-index: -1; pointer-events:none; border-radius:50%; background: radial-gradient(circle,rgba(111,91,255,.1),transparent 68%); transform:translate(-50%,-50%); opacity:0; transition:opacity .3s; }
.page-hero { padding-top: 210px; border-bottom:1px solid var(--line); background: radial-gradient(circle at 75% 35%,rgba(99,75,220,.18),transparent 26%); }
.page-hero h1 { font-size: clamp(3.3rem,6vw,6rem); }
.page-hero p:last-child { font-size: clamp(1.1rem,1.8vw,1.35rem); max-width:760px; }
.service-detail { display:grid;grid-template-columns:120px 1fr;gap:35px;padding:90px 0;border-top:1px solid var(--line);scroll-margin-top:100px}.service-detail:first-child{border-top:0}.service-number{font-weight:800;color:var(--purple);letter-spacing:.15em}.service-tag{color:var(--cyan);font-size:.75rem;text-transform:uppercase;letter-spacing:.14em}.service-detail h2{font-size:clamp(2.8rem,5vw,5rem)}.service-detail .large-copy{max-width:900px}.detail-columns{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:50px}.detail-columns h3{font-size:1rem;text-transform:uppercase;letter-spacing:.1em}.check-list{list-style:none;padding:0}.check-list li{padding:11px 0 11px 28px;border-bottom:1px solid var(--line);position:relative;color:#bcc6d7}.check-list li::before{content:"✓";position:absolute;left:0;color:var(--cyan)}.tech-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.tech-pills span{padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:#aab5c7;font-size:.78rem}
.engagement { background:rgba(255,255,255,.018); }.engagement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.engagement-grid article{padding:36px;border:1px solid var(--line);border-radius:22px}.engagement-grid article > span,.values-grid article > span,.mini-grid article > span{color:var(--purple);font-size:.75rem;font-weight:800;letter-spacing:.15em}.engagement-grid h3{margin-top:70px}
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:100px;align-items:center}.story-visual{height:540px;display:grid;place-items:center;position:relative;border:1px solid var(--line);border-radius:30px;background:radial-gradient(circle,#4550a8,#1a223c 55%,#0b111e);overflow:hidden}.story-visual strong{font-size:clamp(3rem,6vw,5.4rem);line-height:.85;letter-spacing:-.08em;z-index:2}.story-ring{position:absolute;width:420px;height:420px;border:70px solid rgba(163,137,255,.2);border-radius:50%;animation:float 7s ease-in-out infinite}
.values{background:rgba(255,255,255,.018)}.values-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:25px;overflow:hidden}.values-grid article{padding:38px;border-right:1px solid var(--line)}.values-grid article:last-child{border:0}.values-grid h3{margin-top:70px}
.approach-map{display:grid;grid-template-columns:repeat(4,1fr);gap:35px;position:relative;margin-top:80px}.map-line{position:absolute;left:4%;right:4%;top:22px;height:1px;background:linear-gradient(90deg,var(--purple),var(--cyan))}.approach-map article{position:relative}.approach-map article > span{width:44px;height:44px;display:grid;place-items:center;margin-bottom:45px;border-radius:50%;background:#0d1424;border:1px solid var(--purple);font-size:.75rem;color:white}.approach-map h3{font-size:1.25rem}
.team-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;align-items:center}.team-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.team-mosaic div{aspect-ratio:1;display:flex;align-items:end;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(155,124,255,.18),rgba(255,255,255,.03))}.team-mosaic div:nth-child(2n){background:linear-gradient(145deg,rgba(104,224,208,.14),rgba(255,255,255,.03))}.team-mosaic span{font-weight:700}
.case-study{display:grid;grid-template-columns:110px 1fr;padding:90px 0;border-top:1px solid var(--line);scroll-margin-top:100px}.case-study:first-child{border-top:0}.case-number{color:var(--purple);font-weight:800;letter-spacing:.15em}.case-header p{color:var(--cyan);text-transform:uppercase;letter-spacing:.13em;font-size:.76rem}.case-header h2{max-width:900px}.case-body{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:45px}.case-body h3{font-size:1rem;text-transform:uppercase;letter-spacing:.1em}.case-results{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin-top:25px;border:1px solid var(--line);border-radius:20px;overflow:hidden}.case-results span{padding:30px;color:var(--muted);border-right:1px solid var(--line)}.case-results span:last-child{border:0}.case-results strong{display:block;color:white;font-size:2.4rem}.case-note .container{padding:25px 30px;border:1px solid rgba(255,194,91,.3);border-radius:16px;background:rgba(255,194,91,.06)}.case-note p{margin:0}
.contact-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:90px}.contact-aside{align-self:start;position:sticky;top:135px}.contact-method{padding:24px 0;border-top:1px solid var(--line)}.contact-method > span{display:block;color:#78859a;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}.contact-method a,.contact-method p{font-size:1.08rem;color:#dce4f2;margin:0}.response-note{display:flex;align-items:center;gap:12px;margin-top:30px}.response-note p{margin:0;font-size:.85rem}.project-form{padding:45px;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.035)}.form-row{margin-bottom:24px}.form-row label,fieldset legend{display:block;margin-bottom:9px;color:#dbe2ef;font-size:.88rem;font-weight:700}.form-row input,.form-row textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:#0b111d;color:white;padding:15px 16px;outline:none;transition:border-color .2s,box-shadow .2s}.form-row input:focus,.form-row textarea:focus{border-color:var(--purple);box-shadow:0 0 0 4px rgba(155,124,255,.12)}.form-row input[aria-invalid="true"],.form-row textarea[aria-invalid="true"]{border-color:#ff7181}.field-error{display:block;min-height:18px;margin-top:5px;color:#ff8793}.form-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}fieldset{border:0;padding:0;margin:0 0 25px}.option-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.option-grid input{position:absolute;opacity:0}.option-grid span{display:block;padding:13px;border:1px solid var(--line);border-radius:11px;color:#aeb9cb;cursor:pointer}.option-grid input:checked + span{border-color:var(--purple);background:rgba(155,124,255,.12);color:white}.consent{display:flex;gap:10px;align-items:flex-start;color:#aeb8c9;font-size:.83rem;margin:4px 0 25px}.consent input{margin-top:4px}.form-status{min-height:25px;margin:16px 0 0;color:var(--cyan)}.form-note{font-size:.75rem;margin:6px 0 0}.honeypot{position:absolute;left:-9999px}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mini-grid article{padding:32px;border:1px solid var(--line);border-radius:20px}.mini-grid h3{margin-top:45px}
.legal-copy h2{font-size:2rem;margin-top:55px}.legal-copy a{color:var(--cyan);text-decoration:underline}
html.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
html.js [data-reveal].revealed { opacity: 1; transform: translateY(0); }
@keyframes fadeUp { from {opacity:0;transform:translateY(15px)} to{opacity:1;transform:none} }
@media (max-width: 980px) {
  .section-pad{padding:90px 0}.hero-grid,.work-card-large,.process-grid,.faq-grid,.story-grid,.team-grid,.contact-grid{grid-template-columns:1fr}.hero-copy{padding-top:25px}.hero-visual{min-height:520px}.hero-grid{gap:25px}.split-heading{grid-template-columns:1fr;gap:12px}.logo-row{grid-template-columns:repeat(3,1fr)}.logo-row span:nth-child(3){border-right:0}.service-grid,.work-grid{grid-template-columns:1fr}.work-card-large .work-copy{padding:45px}.process-sticky,.contact-aside{position:static}.metrics-grid{grid-template-columns:repeat(2,1fr)}.metrics-grid div:nth-child(2){border-right:0}.footer-grid{grid-template-columns:1fr 1fr}.service-detail{grid-template-columns:70px 1fr}.values-grid{grid-template-columns:1fr 1fr}.values-grid article:nth-child(2){border-right:0}.values-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}.approach-map{grid-template-columns:1fr 1fr}.map-line{display:none}.case-body{grid-template-columns:1fr}.case-results{grid-column:auto}.contact-grid{gap:55px}
}
@media (max-width: 760px) {
  :root{--container:min(100% - 28px,1180px)}.section-pad{padding:72px 0}.section-pad-sm{padding:52px 0}h1{font-size:clamp(3rem,14vw,4.5rem)}h2{font-size:clamp(2.25rem,10vw,3.4rem)}
  .nav-toggle{display:block;z-index:2}.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .primary-nav{position:fixed;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:80px 34px;background:rgba(6,10,18,.98);transform:translateX(100%);transition:transform .35s ease}.primary-nav.open{transform:none}.primary-nav > a:not(.button){font-size:2rem}.nav-cta{margin-top:15px}.hero{padding-top:115px}.hero-proof{gap:20px;overflow-x:auto}.hero-proof div{min-width:125px}.hero-visual{min-height:420px}.orbit-one{width:400px;height:400px}.orbit-two{width:500px;height:500px}.floating-chip{font-size:.7rem}.chip-two{right:0}.code-window pre{padding:25px 18px;font-size:.75rem;min-height:260px}.hero-marquee{margin-top:35px}.logo-row{grid-template-columns:repeat(2,1fr)}.logo-row span{border-bottom:1px solid var(--line)}.logo-row span:nth-child(2n){border-right:0}.service-card{padding:28px;min-height:440px}.service-icon{margin-top:55px}.work-card-large .work-visual,.work-visual{min-height:370px}.dashboard-shell{width:90%;height:58%}.work-copy,.work-card-large .work-copy{padding:30px}.process-list li{grid-template-columns:50px 1fr}.metrics-grid{grid-template-columns:1fr}.metrics-grid div{border-right:0;border-bottom:1px solid var(--line)}.metrics-grid div:last-child{border-bottom:0}.testimonial-slider{padding:35px 24px 80px}.slider-button{top:auto;bottom:22px}.slider-button.prev{left:24px}.slider-button.next{right:24px}.cta-inner{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr;gap:35px}.footer-bottom{flex-direction:column}.page-hero{padding-top:165px}.service-detail{grid-template-columns:1fr;gap:10px;padding:65px 0}.detail-columns,.engagement-grid{grid-template-columns:1fr;gap:35px}.values-grid,.approach-map{grid-template-columns:1fr}.values-grid article{border-right:0!important;border-bottom:1px solid var(--line)!important}.values-grid article:last-child{border-bottom:0!important}.team-mosaic{grid-template-columns:1fr 1fr}.case-study{grid-template-columns:1fr;gap:10px;padding:65px 0}.case-body{grid-column:1;gap:25px}.case-results{grid-template-columns:1fr}.case-results span{border-right:0;border-bottom:1px solid var(--line)}.case-results span:last-child{border:0}.project-form{padding:25px}.form-grid-two,.option-grid,.mini-grid{grid-template-columns:1fr}.cursor-glow{display:none}
}
@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}html.js [data-reveal]{opacity:1;transform:none}.cursor-glow{display:none}
}

/* ========================================================================== 
   Light theme refresh + OfficeDesk product experience
   ========================================================================== */
:root {
  --ink: #13203a;
  --ink-soft: #34445f;
  --paper: #ffffff;
  --paper-blue: #f0f5ff;
  --paper-violet: #f4f1ff;
  --paper-mint: #ecfbf8;
  --shadow-soft: 0 18px 50px rgba(55, 72, 118, .12);
  --shadow-hover: 0 28px 80px rgba(55, 72, 118, .19);
}
body {
  background:
    radial-gradient(circle at 8% 4%, rgba(108,92,231,.11), transparent 25rem),
    radial-gradient(circle at 94% 11%, rgba(49,120,246,.09), transparent 25rem),
    linear-gradient(180deg,#fbfcff 0%,#f7f9ff 42%,#ffffff 100%);
  color: var(--text);
}
body::before {
  background:
    linear-gradient(rgba(76,98,142,.035) 1px, transparent 1px),
    linear-gradient(90deg,rgba(76,98,142,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 76%);
  opacity: .75;
}
::selection { background: rgba(108,92,231,.22); color: var(--ink); }
:focus-visible { outline-color: var(--blue); }
.eyebrow { color: #53627d; }
.eyebrow > span { height: 3px; border-radius: 999px; }
h1,h2,h3 { color: var(--ink); }
.button-ghost { color: var(--ink); background: rgba(255,255,255,.7); border-color: rgba(50,72,112,.18); box-shadow: 0 8px 24px rgba(55,72,118,.05); }
.button-ghost:hover { background: #fff; border-color: rgba(108,92,231,.36); box-shadow: var(--shadow-soft); }
.button-light { background: #fff; color: #2b2a5e; box-shadow: 0 16px 38px rgba(35,27,100,.19); }
.text-link { color: var(--ink); border-bottom-color: rgba(19,32,58,.25); }
.text-link:hover { color: #4e43c8; border-color: #4e43c8; }
.site-header { color: var(--ink); }
.site-header.scrolled { background: rgba(252,253,255,.86); border-bottom-color: rgba(42,61,96,.1); box-shadow: 0 8px 28px rgba(54,72,112,.07); }
.brand-copy em { color: #62708a; }
.primary-nav { gap: 23px; }
.primary-nav > a:not(.button) { color: #43516b; }
.primary-nav > a:not(.button)::after { background: linear-gradient(90deg,var(--purple),var(--blue)); }
.nav-toggle span { background: var(--ink); }
.hero::after { background: linear-gradient(90deg,transparent,rgba(48,70,112,.13),transparent); }
.hero h1 em { -webkit-text-stroke: 0; background: linear-gradient(100deg,#6b55dd,#247bdc 52%,#079b98); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-visual::before { background: radial-gradient(circle,rgba(108,92,231,.19),rgba(49,120,246,.08) 55%,transparent 70%); }
.visual-orbit { border-color: rgba(72,92,132,.14); }
.floating-chip { background: rgba(255,255,255,.86); color: #33415d; border-color: rgba(56,79,120,.13); box-shadow: 0 14px 38px rgba(51,72,116,.13); }
.floating-chip span { color: #5e50d9; }
.hero-marquee { background: rgba(255,255,255,.58); }
.marquee-track span { color: #68758d; }
.logo-row { background: rgba(255,255,255,.55); box-shadow: 0 12px 35px rgba(55,72,118,.05); }
.logo-row span { color: #6d7890; }
.service-card { background: linear-gradient(145deg,rgba(255,255,255,.95),rgba(244,247,255,.83)); box-shadow: 0 14px 44px rgba(55,72,118,.07); }
.service-card:hover { background: linear-gradient(145deg,#fff,#f3f1ff); box-shadow: var(--shadow-hover); }
.service-index { color: #78849a; }
.service-icon { border-color: rgba(75,97,139,.13); background: linear-gradient(145deg,#f4f1ff,#edf7ff); color: #5a4fd2; box-shadow: inset 0 1px white; }
.service-card li { color: #5a6880; background: rgba(255,255,255,.72); }
.card-link { color: #34425f; }
.featured-work { background: linear-gradient(180deg,transparent,rgba(224,232,250,.36),transparent); }
.work-card { background: rgba(255,255,255,.8); box-shadow: var(--shadow-soft); }
.result-row strong,.case-results strong { color: var(--ink); }
.process-list > li > span { color: #5f50d7; }
.metrics-grid { background: rgba(255,255,255,.72); box-shadow: var(--shadow-soft); }
.metrics-grid strong { color: var(--ink); }
.testimonial-section,.values,.engagement { background: linear-gradient(180deg,rgba(238,243,255,.54),rgba(255,255,255,.5)); }
.testimonial-slider { background: rgba(255,255,255,.9); box-shadow: var(--shadow-soft); }
.testimonial blockquote { color: var(--ink); }
.slider-button,.slider-dots button { border-color: rgba(50,72,112,.16); color: var(--ink); background: #fff; }
.accordion-item button { color: var(--ink); }
.cta-band { background: linear-gradient(125deg,#5748cb 0%,#526ce4 46%,#178ea5 100%); position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; width:460px; height:460px; border:1px solid rgba(255,255,255,.2); border-radius:50%; right:-130px; top:-210px; box-shadow:0 0 0 55px rgba(255,255,255,.045),0 0 0 110px rgba(255,255,255,.025); }
.cta-band h2,.cta-band .eyebrow { color:#fff; }
.cta-band p { color:rgba(255,255,255,.79); }
.site-footer { background: #f2f5fc; border-top: 1px solid rgba(42,61,96,.1); color: var(--ink); }
.site-footer h2,.site-footer a { color: var(--ink); }
.site-footer p { color: #63708a; }
.social-row a { background:#fff; border-color:rgba(42,61,96,.12); box-shadow:0 7px 22px rgba(55,72,118,.07); }
.social-row svg { fill:#42516b; }
.footer-bottom { border-top-color:rgba(42,61,96,.11); }
.cursor-glow { background:rgba(91,76,215,.07); }
.page-hero { background: linear-gradient(180deg,rgba(239,244,255,.72),transparent); }
.service-detail,.case-study { border-color:rgba(42,61,96,.12); }
.service-tag,.case-header p,.work-label { color:#167f98; }
.check-list li::before { background:rgba(10,166,166,.13); color:#078887; }
.tech-pills span { background:#fff; color:#56637a; border-color:rgba(42,61,96,.13); }
.engagement-grid article,.values-grid,.mini-grid article { background:rgba(255,255,255,.76); box-shadow:0 10px 32px rgba(55,72,118,.05); }
.story-visual { background:radial-gradient(circle,#e6e1ff,#cfdcff 55%,#edf5ff); }
.story-visual strong { color:#2d3168; }
.approach-map article > span { background:#fff; color:#5548c8; box-shadow:0 8px 24px rgba(86,73,202,.12); }
.team-mosaic div { background:linear-gradient(145deg,#f0edff,#fff); }
.team-mosaic div:nth-child(2n) { background:linear-gradient(145deg,#e9fbf8,#fff); }
.case-note .container { background:#fff9e9; }
.contact-method a,.contact-method p { color:var(--ink); }
.project-form { background:#fff; box-shadow:var(--shadow-soft); }
.form-row label,fieldset legend { color:#34425c; }
.form-row input,.form-row textarea { background:#f8faff; color:var(--ink); border-color:rgba(42,61,96,.16); }
.form-row input:focus,.form-row textarea:focus { background:#fff; }
.option-grid span { color:#526078; background:#f8faff; }
.option-grid input:checked + span { color:#4c3fc1; background:#f1eeff; }
.consent { color:#5d6980; }
.form-status { color:#087d86; }
.legal-copy a { color:#4f43c8; }

/* Home OfficeDesk highlight */
.product-feature { position:relative; overflow:hidden; background:linear-gradient(145deg,#f5f2ff 0%,#eff7ff 50%,#edfbf8 100%); border-block:1px solid rgba(50,72,112,.09); }
.product-feature::before,.product-feature::after { content:""; position:absolute; border-radius:50%; filter:blur(2px); pointer-events:none; }
.product-feature::before { width:440px;height:440px;left:-240px;top:-120px;background:rgba(108,92,231,.09); }
.product-feature::after { width:390px;height:390px;right:-180px;bottom:-220px;background:rgba(10,166,166,.08); }
.product-feature-grid { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:78px; position:relative; z-index:1; }
.product-feature-copy h2 em { font-style:normal; color:#5a4dd0; }
.product-badge { width:max-content; display:inline-flex; align-items:center; gap:10px; padding:9px 14px; margin:0 0 22px; border:1px solid rgba(85,72,198,.15); border-radius:999px; background:rgba(255,255,255,.72); color:#5145bd; font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 8px 24px rgba(85,72,198,.08); }
.product-points { display:flex; flex-wrap:wrap; gap:9px; margin:30px 0 0; }
.product-points span { padding:8px 12px; border:1px solid rgba(50,72,112,.12); border-radius:999px; background:rgba(255,255,255,.68); color:#526078; font-size:.78rem; font-weight:700; }
.office-preview { position:relative; padding:22px; border:1px solid rgba(56,79,120,.14); border-radius:30px; background:rgba(255,255,255,.72); box-shadow:0 35px 90px rgba(55,72,118,.18); transform-style:preserve-3d; }
.office-preview::before { content:""; position:absolute; inset:9% 8% -10%; z-index:-1; border-radius:30px; background:linear-gradient(120deg,rgba(108,92,231,.22),rgba(49,120,246,.12),rgba(10,166,166,.15)); filter:blur(34px); }
.office-app { min-height:430px; display:grid; grid-template-columns:64px 1fr; overflow:hidden; border:1px solid rgba(42,61,96,.11); border-radius:20px; background:#f8faff; }
.office-sidebar { display:flex; flex-direction:column; align-items:center; gap:22px; padding:16px 10px; background:#25345f; }
.office-mini-logo { width:38px;height:38px;display:grid;place-items:center;margin-bottom:12px;border-radius:12px;background:linear-gradient(145deg,#8e7bf4,#47a6ed);color:white;font-size:.72rem;font-weight:900;box-shadow:inset 0 1px rgba(255,255,255,.4); }
.office-sidebar > span { width:27px;height:8px;border-radius:999px;background:rgba(255,255,255,.22); }
.office-sidebar > span.active { height:27px;background:linear-gradient(145deg,#9b8aff,#70d6d2); }
.office-content { padding:24px; min-width:0; }
.office-topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.office-topbar div { display:grid; }
.office-topbar small { color:#8390a7; font-size:.7rem; }
.office-topbar strong { color:#25334e; font-size:1.05rem; }
.office-avatar { width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#eae6ff;color:#5648c8;font-size:.72rem;font-weight:850; }
.office-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.office-stat { min-width:0; padding:15px; border:1px solid rgba(42,61,96,.09); border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(55,72,118,.05); }
.office-stat small,.office-stat i { display:block; color:#8490a6; font-style:normal; font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.office-stat strong { display:block; color:#26334e; font-size:1.45rem; line-height:1.3; }
.office-stat i.up { color:#118a81; }
.office-dashboard-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; margin-top:12px; }
.office-chart,.office-activity { min-height:230px; padding:17px; border:1px solid rgba(42,61,96,.09); border-radius:14px; background:#fff; }
.chart-head { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#2e3c58; font-size:.78rem; }
.chart-head small { color:#8a96aa; }
.office-bars { height:158px; display:flex; align-items:flex-end; justify-content:space-around; gap:10px; padding:25px 5px 0; border-bottom:1px solid rgba(42,61,96,.09); }
.office-bars i { width:14%; height:var(--h); border-radius:8px 8px 2px 2px; background:linear-gradient(180deg,#7a69e8,#4c9ee8); transform-origin:bottom; animation:barGrow 1.2s cubic-bezier(.2,.8,.2,1) both; }
.office-bars i:nth-child(2){animation-delay:.08s}.office-bars i:nth-child(3){animation-delay:.16s}.office-bars i:nth-child(4){animation-delay:.24s}.office-bars i:nth-child(5){animation-delay:.32s}
@keyframes barGrow { from{transform:scaleY(.05);opacity:.2} }
.office-activity > strong { color:#2e3c58; font-size:.82rem; }
.activity-row { display:grid; grid-template-columns:27px 1fr; gap:9px; align-items:start; padding:13px 0; border-bottom:1px solid rgba(42,61,96,.08); }
.activity-row:last-child { border:0; }
.activity-row > span { width:25px;height:25px;display:grid;place-items:center;border-radius:8px;background:#efedff;color:#5a4dd0;font-size:.68rem;font-weight:900; }
.activity-row p { margin:0;color:#37445e;font-size:.69rem;line-height:1.35; }
.activity-row small { display:block;margin-top:3px;color:#8b96aa;font-size:.58rem; }
.preview-float { position:absolute; z-index:3; padding:10px 14px; border:1px solid rgba(55,78,118,.13); border-radius:999px; background:rgba(255,255,255,.9); color:#42506b; font-size:.72rem; font-weight:800; box-shadow:0 12px 30px rgba(55,72,118,.14); animation:float 5.5s ease-in-out infinite; }
.preview-float-one { top:12%; left:-38px; }
.preview-float-two { right:-35px; bottom:11%; animation-delay:-2.5s; }

/* OfficeDesk dedicated page */
.product-hero { min-height:100svh; display:flex; align-items:center; position:relative; overflow:hidden; padding-top:155px; background:linear-gradient(135deg,rgba(246,243,255,.95),rgba(241,248,255,.8) 50%,rgba(237,251,248,.8)); }
.product-hero::after { content:""; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,rgba(50,72,112,.12),transparent); }
.product-hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:74px; }
.product-hero-copy { position:relative; z-index:2; }
.product-hero h1 { font-size:clamp(3.5rem,6vw,6.3rem); }
.product-hero h1 em { display:block;font-style:normal;background:linear-gradient(100deg,#6552db,#2f7de4,#0d9696);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
.product-proof { display:flex; gap:28px; padding-top:38px; margin-top:38px; border-top:1px solid rgba(42,61,96,.13); }
.product-proof div { display:grid; gap:3px; }
.product-proof strong { color:#26344f; font-size:.9rem; }
.product-proof span { color:#758198; font-size:.75rem; }
.product-hero-visual { min-height:620px; display:grid; place-items:center; position:relative; }
.product-orb { position:absolute; border-radius:50%; filter:blur(1px); animation:orbDrift 9s ease-in-out infinite; }
.orb-a { width:440px;height:440px;background:rgba(106,84,219,.13);right:3%;top:5%; }
.orb-b { width:300px;height:300px;background:rgba(11,162,163,.12);left:2%;bottom:6%;animation-delay:-4s; }
@keyframes orbDrift { 50%{transform:translate(18px,-16px) scale(1.05)} }
.office-preview-large { width:min(100%,700px); padding:18px; }
.office-preview-large .office-app { min-height:480px; }
.benefit-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.benefit-grid article { position:relative; min-height:330px; padding:30px; border:1px solid rgba(42,61,96,.12); border-radius:22px; background:#fff; box-shadow:0 12px 35px rgba(55,72,118,.06); transition:transform .3s,box-shadow .3s,border-color .3s; overflow:hidden; }
.benefit-grid article::after { content:""; position:absolute; width:150px;height:150px;right:-80px;bottom:-85px;border-radius:50%;background:rgba(108,92,231,.07);transition:transform .3s; }
.benefit-grid article:hover { transform:translateY(-8px); box-shadow:var(--shadow-hover); border-color:rgba(108,92,231,.25); }
.benefit-grid article:hover::after { transform:scale(1.5); }
.benefit-grid article > span { color:#7c879b; font-size:.72rem; font-weight:850; letter-spacing:.13em; }
.benefit-icon { width:54px;height:54px;display:grid;place-items:center;margin:55px 0 22px;border-radius:17px;background:linear-gradient(145deg,#f0edff,#eaf6ff);color:#5b4ed0;font-size:1.35rem; }
.module-showcase { background:linear-gradient(180deg,#f3f6fd,#fbfcff); }
.module-showcase .section-heading > p:last-child { max-width:680px; margin-inline:auto; }
.module-explorer { display:grid; grid-template-columns:330px 1fr; min-height:600px; overflow:hidden; border:1px solid rgba(42,61,96,.12); border-radius:28px; background:#fff; box-shadow:var(--shadow-soft); }
.module-tabs { display:flex; flex-direction:column; padding:18px; background:#f6f8fd; border-right:1px solid rgba(42,61,96,.1); }
.module-tab { display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:center; width:100%; min-height:78px; padding:15px; border:0; border-radius:14px; background:transparent; color:#5c6980; text-align:left; font-weight:750; cursor:pointer; transition:background .25s,color .25s,transform .25s; }
.module-tab span { color:#929caf; font-size:.68rem; letter-spacing:.1em; }
.module-tab:hover { background:#fff; transform:translateX(4px); }
.module-tab.active { background:#fff; color:#4f43c5; box-shadow:0 10px 30px rgba(55,72,118,.09); }
.module-tab.active span { color:#4f43c5; }
.module-panels { min-width:0; }
.module-panel { height:100%; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center; padding:60px; animation:panelIn .45s ease both; }
.module-panel.active { display:grid; }
@keyframes panelIn { from{opacity:0;transform:translateY(10px)} }
.module-panel h3 { font-size:clamp(2rem,3.2vw,3.4rem); }
.module-panel .check-list { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin-top:28px; }
.module-visual { min-height:370px; position:relative; overflow:hidden; border:1px solid rgba(42,61,96,.1); border-radius:24px; background:linear-gradient(145deg,#f2f0ff,#eef8ff); box-shadow:inset 0 1px white; }
.module-visual::before { content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-80px;top:-90px;background:rgba(108,92,231,.1); }
.profile-card,.leave-card,.map-card,.checkin-card,.time-total,.time-list,.search-pill,.file-row,.payroll-summary { position:absolute; background:#fff; border:1px solid rgba(42,61,96,.1); box-shadow:0 17px 40px rgba(55,72,118,.11); }
.profile-card { width:61%; left:8%; top:12%; padding:24px; border-radius:19px; }
.profile-card > span { width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:#eeeaff;color:#5548c8;font-weight:850; }
.profile-card strong,.profile-card small { display:block; }
.profile-card strong { margin-top:35px;color:#2d3a55; }.profile-card small{color:#8290a6}.profile-card i{display:block;width:86%;height:8px;margin-top:15px;border-radius:8px;background:linear-gradient(90deg,#6e5bdd 86%,#e9edf5 86%)}
.leave-card { width:50%; right:6%; bottom:10%; padding:22px; border-radius:18px; }
.leave-card small,.leave-card strong{display:block}.leave-card small{color:#8490a5}.leave-card strong{color:#273550;font-size:1.8rem}.leave-card button,.payroll-summary button{width:100%;margin-top:15px;padding:10px;border:0;border-radius:10px;background:#5f50d7;color:#fff;font-weight:750}
.map-card { inset:8%; border-radius:20px; background:linear-gradient(145deg,#eaf5ff,#e9f8f5); }
.map-card::before,.map-card::after { content:"";position:absolute;inset:20% 12%;border:2px dashed rgba(71,111,161,.2);border-radius:50% 45% 55% 40%;transform:rotate(-12deg); }
.map-card::after{inset:38% 22%;transform:rotate(20deg)}
.map-card i{position:absolute;width:19px;height:19px;border:5px solid #5d4fd1;border-radius:50%;background:#fff;box-shadow:0 6px 15px rgba(55,72,118,.18)}.map-card i:nth-child(1){left:25%;top:30%}.map-card i:nth-child(2){right:24%;top:40%}.map-card i:nth-child(3){left:48%;bottom:25%}.map-card span{position:absolute;left:22px;bottom:18px;color:#43516b;font-size:.75rem;font-weight:750}
.checkin-card { right:5%; bottom:7%; padding:18px 22px; border-radius:16px; }.checkin-card small,.checkin-card strong,.checkin-card span{display:block}.checkin-card small,.checkin-card span{color:#8290a6;font-size:.7rem}.checkin-card strong{color:#26344e;font-size:1.45rem}
.module-visual-pms { display:flex;align-items:flex-start;gap:12px;padding:58px 22px 22px;background:linear-gradient(145deg,#f3f1ff,#f0f7ff); }
.kanban-col { flex:1;min-height:265px;padding:14px;border-radius:15px;background:rgba(255,255,255,.72);border:1px solid rgba(42,61,96,.08); }.kanban-col small{display:block;margin-bottom:16px;color:#53617a;font-weight:750}.kanban-col i{display:block;height:58px;margin-bottom:10px;border-radius:10px;background:#fff;border:1px solid rgba(42,61,96,.08);box-shadow:0 8px 18px rgba(55,72,118,.06)}.kanban-col:nth-child(2) i{border-left:4px solid #6858dd}.kanban-col:nth-child(3) i{border-left:4px solid #0d9c9c}
.time-total { width:48%;height:58%;left:8%;top:13%;display:grid;place-content:center;padding:22px;border-radius:20px;text-align:center; }.time-total small,.time-total span{color:#8390a5}.time-total strong{color:#2d3a55;font-size:3rem;line-height:1.1}
.time-list { width:51%;right:6%;bottom:11%;padding:22px;border-radius:18px; }.time-list i{display:block;width:var(--w);height:12px;margin:14px 0;border-radius:10px;background:linear-gradient(90deg,#6655da,#44a8d0)}
.module-visual-kms { padding:36px 24px; }
.search-pill { position:relative;inset:auto;width:100%;padding:14px 17px;border-radius:13px;color:#8a95a9;font-size:.74rem; }
.file-row { position:relative;inset:auto;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;margin-top:13px;padding:13px;border-radius:13px; }.file-row>span{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:#eeeaff;color:#594bc9;font-size:.62rem;font-weight:850}.file-row p{margin:0;color:#34425d;font-size:.73rem}.file-row small{display:block;color:#8a95a9;font-size:.62rem}
.payroll-ring { position:absolute;width:180px;height:180px;left:8%;top:19%;display:grid;place-content:center;border-radius:50%;background:conic-gradient(#6252d7 0 96%,#e6eaf3 96%);text-align:center; }.payroll-ring::after{content:"";position:absolute;inset:17px;border-radius:50%;background:#fff}.payroll-ring strong,.payroll-ring small{position:relative;z-index:1;display:block}.payroll-ring strong{color:#2c3954;font-size:2.3rem}.payroll-ring small{color:#8792a5}
.payroll-summary { width:50%;right:6%;bottom:12%;padding:22px;border-radius:18px; }.payroll-summary>span{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid rgba(42,61,96,.08)}.payroll-summary small{color:#8490a4}.payroll-summary strong{color:#2b3953}
.workflow-section { background:#fff; }
.workflow-grid { display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:100px; }
.workflow-map { min-height:550px;position:relative;display:grid;place-items:center; }
.workflow-core { width:180px;height:180px;display:grid;place-content:center;position:relative;z-index:3;border-radius:50%;background:linear-gradient(145deg,#6554dc,#397fdd);color:#fff;text-align:center;font-size:1.35rem;font-weight:850;box-shadow:0 24px 60px rgba(76,65,190,.28);animation:corePulse 4s ease-in-out infinite; }
.workflow-core span { display:block;color:rgba(255,255,255,.75);font-size:.65rem;font-weight:600; }
@keyframes corePulse { 50%{box-shadow:0 28px 75px rgba(76,65,190,.38);transform:scale(1.025)} }
.flow-ring { position:absolute;border:1px dashed rgba(83,104,146,.22);border-radius:50%;animation:spin 26s linear infinite; }.ring-one{width:350px;height:350px}.ring-two{width:510px;height:510px;animation-direction:reverse;animation-duration:38s}
.flow-node { position:absolute;z-index:2;min-width:96px;padding:12px 15px;border:1px solid rgba(42,61,96,.12);border-radius:999px;background:#fff;color:#45536d;text-align:center;font-size:.73rem;font-weight:800;box-shadow:0 13px 30px rgba(55,72,118,.11);animation:float 5s ease-in-out infinite; }.n1{left:5%;top:20%}.n2{right:4%;top:19%;animation-delay:-1s}.n3{left:0;bottom:23%;animation-delay:-2s}.n4{right:0;bottom:22%;animation-delay:-3s}.n5{left:39%;top:1%;animation-delay:-1.5s}.n6{left:39%;bottom:1%;animation-delay:-3.5s}
.product-metrics { background:linear-gradient(90deg,#f2efff,#eef7ff,#edfaf8); }

@media (max-width:1100px) {
  .primary-nav { gap:15px; }
  .primary-nav > a:not(.button) { font-size:.86rem; }
  .product-feature-grid,.product-hero-grid { grid-template-columns:1fr; gap:55px; }
  .product-feature-copy { max-width:800px; }
  .product-hero { padding-top:145px; }
  .product-hero-visual { min-height:560px; }
  .benefit-grid { grid-template-columns:1fr 1fr; }
  .module-explorer { grid-template-columns:260px 1fr; }
  .module-panel { grid-template-columns:1fr; padding:45px; }
  .module-visual { min-height:340px; }
  .workflow-grid { grid-template-columns:1fr; gap:35px; }
}
@media (max-width:760px) {
  :root { --container:min(1180px,calc(100% - 28px)); }
  .primary-nav { background:rgba(250,252,255,.98); }
  .primary-nav > a:not(.button) { color:var(--ink);font-size:1.75rem; }
  .product-feature-grid { gap:42px; }
  .office-preview { padding:10px;border-radius:20px; }
  .office-app { min-height:380px;grid-template-columns:45px 1fr; }
  .office-sidebar { padding:12px 6px;gap:17px; }
  .office-mini-logo { width:31px;height:31px;border-radius:9px;font-size:.58rem; }
  .office-sidebar > span { width:20px; }
  .office-content { padding:14px; }
  .office-topbar { margin-bottom:14px; }
  .office-stat-grid { grid-template-columns:1fr 1fr; }
  .office-stat:nth-child(3) { display:none; }
  .office-dashboard-grid { grid-template-columns:1fr; }
  .office-activity { display:none; }
  .office-chart { min-height:210px; }
  .preview-float { font-size:.62rem; }
  .preview-float-one { left:-8px;top:2%; }
  .preview-float-two { right:-8px;bottom:2%; }
  .product-hero h1 { font-size:clamp(3rem,14vw,4.6rem); }
  .product-hero-visual { min-height:440px; }
  .office-preview-large .office-app { min-height:390px; }
  .product-proof { gap:15px;overflow-x:auto; }
  .product-proof div { min-width:120px; }
  .benefit-grid { grid-template-columns:1fr; }
  .benefit-grid article { min-height:285px; }
  .module-explorer { display:block; min-height:0; overflow:visible; border:0; background:transparent; box-shadow:none; }
  .module-tabs { flex-direction:row;overflow-x:auto;gap:8px;padding:0 0 16px;background:transparent;border:0;scroll-snap-type:x mandatory; }
  .module-tab { min-width:220px;min-height:64px;background:#fff;border:1px solid rgba(42,61,96,.1);box-shadow:0 7px 22px rgba(55,72,118,.05);scroll-snap-align:start; }
  .module-tab:hover { transform:none; }
  .module-panels { border:1px solid rgba(42,61,96,.1);border-radius:22px;background:#fff;overflow:hidden; }
  .module-panel { padding:28px;gap:28px; }
  .module-panel .check-list { grid-template-columns:1fr; }
  .module-visual { min-height:300px; }
  .workflow-map { min-height:430px;transform:scale(.82);margin-inline:-45px; }
  .flow-node { min-width:85px; }
}
@media (max-width:480px) {
  .product-points { gap:6px; }
  .product-points span { font-size:.68rem; }
  .office-topbar strong { font-size:.85rem; }
  .office-stat { padding:11px; }
  .office-stat strong { font-size:1.15rem; }
  .office-bars { height:135px; }
  .module-panel { padding:22px; }
  .module-visual { min-height:280px; }
  .profile-card { width:74%; }
  .leave-card { width:57%; }
  .module-visual-pms { padding:45px 12px 12px;gap:7px; }
  .kanban-col { padding:8px; }
  .payroll-ring { width:145px;height:145px; }
}

/* Mobile containment and accessible reduced-motion refinements */
.product-hero-copy,.product-hero-visual,.product-feature-copy,.office-preview,.module-explorer,.module-panels { min-width:0; }
.workflow-section { overflow:hidden; }
@media (max-width:760px) {
  html,body { overflow-x:clip; }
  .primary-nav { transform:none; opacity:0; visibility:hidden; pointer-events:none; }
  .primary-nav.open { opacity:1; visibility:visible; pointer-events:auto; }
  .module-tabs { width:100%; max-width:100%; }
  .product-hero-copy,.product-feature-copy { width:100%; }
  .product-proof { max-width:100%; }
  .preview-float-two { right:0; }
}


/* Official CodeoDesk identity */
.brand { gap: 0; flex: 0 0 auto; }
.brand-logo-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid rgba(6, 23, 48, .08);
  border-radius: 14px;
  background: linear-gradient(145deg, #071326, #102c52);
  box-shadow: 0 10px 28px rgba(18, 46, 83, .16), inset 0 1px rgba(255,255,255,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.brand:hover .brand-logo-shell {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(18, 46, 83, .22), inset 0 1px rgba(255,255,255,.1);
}
.brand-logo {
  display: block;
  width: 166px;
  height: auto;
}
.footer-brand .brand-logo-shell { box-shadow: 0 9px 24px rgba(18, 46, 83, .13), inset 0 1px rgba(255,255,255,.08); }
@media (max-width: 760px) {
  .brand-logo-shell { padding: 6px 10px; border-radius: 12px; }
  .brand-logo { width: 140px; }
}
@media (max-width: 760px) {
  .site-header .brand { position: relative; z-index: 3; }
  .site-header .nav-toggle { position: relative; z-index: 4; }
  .site-header .primary-nav { z-index: 2; }
}