:root{--bg:#F1F3F6;--surface:#FFFFFF;--surface-2:#E7EBF1;--ink:#10131F;--ink-muted:#3A3F4D;--ink-faint:#525866;--accent:#2E4BFF;--accent-ink:#FFFFFF;--accent-2:#FFB020;--accent-2-ink:#10131F;--border:#DADFE6;--border-strong:#C1C8D3;--shadow:0 1px 2px rgba(16,19,31,0.04),0 8px 24px rgba(16,19,31,0.06);--font-display:"Space Grotesk","IBM Plex Sans",system-ui,sans-serif;--font-body:"IBM Plex Sans",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;--container:1180px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--section-pad:clamp(64px,9vw,128px);color-scheme:light}
[data-theme="dark"]{--bg:#10131F;--surface:#191D2E;--surface-2:#20263B;--ink:#EDEFF5;--ink-muted:#B8BFD6;--ink-faint:#949DB3;--accent:#6E8BFF;--accent-ink:#0B0E17;--accent-2:#FFC24D;--accent-2-ink:#10131F;--border:#2A2F42;--border-strong:#363C54;--shadow:0 1px 2px rgba(0,0,0,0.2),0 12px 32px rgba(0,0,0,0.35);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background-color 0.25s ease,color 0.25s ease}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0;line-height:1.1;letter-spacing:-0.01em}
p{margin:0}
button{font:inherit;cursor:pointer}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.eyebrow{font-family:var(--font-mono);font-size:12.5px;text-transform:uppercase;letter-spacing:0.12em;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
section{position:relative;padding-block:var(--section-pad)}
.section-head{max-width:640px;margin-bottom:48px}
.section-head h2{font-size:clamp(28px,4vw,40px);margin-top:12px}
.section-head p{margin-top:14px;color:var(--ink-muted);font-size:17px}
.spine{position:absolute;left:24px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--border-strong) 8%,var(--border-strong) 92%,transparent);display:none}
@media (min-width:1280px){.spine{display:block}}
.spine-node{position:absolute;left:-3.5px;top:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font-family:var(--font-display);font-weight:700;font-size:19px;display:flex;align-items:center;gap:10px}
.logo a,.logo-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center}
.logo .dot{color:var(--accent)}
.nav-links{display:none;gap:32px;font-size:14.5px;font-weight:600;margin-left:auto}
.nav-links a{color:var(--ink-muted);transition:color 0.15s ease}
.nav-links a:hover{color:var(--ink)}
@media (min-width:860px){.nav-links{display:flex}}
.nav-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
@media (min-width:860px){.nav-actions{margin-left:0}}
.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color 0.15s ease,transform 0.15s ease,background-color 0.15s ease}
.theme-toggle:hover{border-color:var(--accent);transform:scale(1.05)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .icon-moon{display:none}
.theme-toggle .icon-sun{display:block;color:var(--ink)}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}
.nav-toggle{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface)}
@media (min-width:860px){.nav-toggle{display:none}}
.mobile-nav{display:none;border-bottom:1px solid var(--border);background:var(--bg)}
.mobile-nav.open{display:block}
.mobile-nav ul{padding:16px 24px 24px;display:flex;flex-direction:column;gap:16px;font-size:15px}
@media (min-width:860px){.mobile-nav{display:none!important}}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14.5px;border:1px solid transparent;transition:transform 0.15s ease,box-shadow 0.15s ease,background-color 0.15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-on-accent{background:var(--surface);color:var(--ink)}
.hero{padding-top:clamp(72px,10vw,120px);padding-bottom:clamp(64px,8vw,96px);overflow:hidden}
.hero-grid{display:grid;gap:15px}
@media (min-width:720px){.hero-grid{grid-template-columns:1.1fr 0.9fr;align-items:center}}
.hero-media{display:flex;flex-direction:column;gap:24px}
.hero-image-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--surface);transition:transform 0.3s ease,box-shadow 0.3s ease}
.hero-image-wrap:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(16,19,31,0.12)}
.hero-image-wrap img{width:100%;height:auto;display:block}
.hero h1{font-size:clamp(38px,6.4vw,74px);font-weight:700;max-width:15ch}
.hero h1 .accent-underline{position:relative;white-space:nowrap}
.hero h1 .accent-underline::after{content:"";position:absolute;left:0;right:0;bottom:0.06em;height:0.14em;background:var(--accent-2);z-index:-1;opacity:0.55}
.hero-sub{margin-top:22px;font-size:18px;color:var(--ink-muted);max-width:46ch}
.hero-cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.hero-meta{font-family:var(--font-mono);font-size:13px;color:var(--ink-muted);border-left:2px solid var(--border-strong);padding-left:16px;display:flex;flex-direction:column;gap:6px}
.hero-meta strong{color:var(--ink);font-weight:600}
.client-strip{margin-top:64px;padding-top:28px;border-top:1px solid var(--border)}
.client-strip .eyebrow{margin-bottom:18px}
.client-marquee{display:flex;flex-wrap:wrap;gap:12px}
.client-chip{font-family:var(--font-mono);font-size:13px;padding:8px 14px;border:1px solid var(--border);border-radius:999px;color:var(--ink-muted);background:var(--surface)}
.services-grid{display:grid;gap:20px}
@media (min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.services-grid{grid-template-columns:repeat(3,1fr)}}
.service-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 26px;transition:border-color 0.2s ease,transform 0.2s ease;overflow:hidden}
.service-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.service-thumb{margin:-30px -26px 20px -26px;border-bottom:1px solid var(--border);overflow:hidden;aspect-ratio:16/9;background:var(--surface-2)}
.service-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease}
.service-card:hover .service-thumb img{transform:scale(1.04)}
.service-card .eyebrow{margin-bottom:16px}
.service-card h3{font-size:20px;margin-bottom:10px}
.service-card p{color:var(--ink-muted);font-size:15px}
#work{background:var(--ink);color:#EDEFF5}
[data-theme="dark"] #work{background:var(--surface);border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)}
.work-expandable{position:relative;overflow:hidden;max-height:var(--work-collapsed-h,560px);transition:max-height 0.65s cubic-bezier(0.16,1,0.3,1);-webkit-mask-image:linear-gradient(to bottom,#000 0px,#000 var(--work-fade-start,350px),rgba(0,0,0,0.5) var(--work-fade-mid,455px),transparent var(--work-collapsed-h,560px));mask-image:linear-gradient(to bottom,#000 0px,#000 var(--work-fade-start,350px),rgba(0,0,0,0.5) var(--work-fade-mid,455px),transparent var(--work-collapsed-h,560px))}
.work-expandable.is-expanded{max-height:var(--work-full-h,4000px);-webkit-mask-image:none;mask-image:none}
.work-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:640px){.work-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.work-grid{grid-template-columns:repeat(3,1fr)}}
.work-more-wrap{display:flex;justify-content:center;margin-top:36px;position:relative;z-index:2}
.btn-work-load-more{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;border-radius:999px;font-family:var(--font-body);font-weight:600;font-size:14.5px;background:rgba(255,255,255,0.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#EDEFF5;border:1px solid rgba(255,255,255,0.18);box-shadow:0 4px 16px rgba(0,0,0,0.25);transition:transform 0.2s cubic-bezier(0.16,1,0.3,1),background-color 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease,color 0.2s ease;user-select:none}
.btn-work-load-more:hover{transform:translateY(-2px);background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 45%,transparent)}
.btn-work-load-more:active{transform:translateY(0)}
.btn-work-icon{width:16px;height:16px;transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);flex-shrink:0}
[data-work-toggle][aria-expanded="true"] .btn-work-icon{transform:rotate(180deg)}
[data-theme="dark"] .btn-work-load-more{background:rgba(255,255,255,0.06);border-color:var(--border-strong);color:var(--ink)}
[data-theme="dark"] .btn-work-load-more:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#work .eyebrow{color:var(--accent-2)!important}
#work .eyebrow::before{background:var(--accent-2)}
.work-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;transition:transform 0.2s ease,box-shadow 0.2s ease}
.work-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.work-thumb{aspect-ratio:16/11;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--surface-2)),var(--surface-2));display:block;overflow:hidden;font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);border-bottom:1px solid var(--border)}
.work-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease}
.work-card:hover .work-thumb img{transform:scale(1.04)}
.work-body{padding:18px 20px 22px}
.work-body .client{font-size:12.5px;font-family:var(--font-mono);color:var(--accent);text-transform:uppercase;letter-spacing:0.06em}
.work-body h3{font-size:17px;margin-top:8px;color:var(--ink)}
.work-body p{font-size:14px;margin-top:6px;color:var(--ink-muted)}
#work .section-head p{color:#B9BFD6}
[data-theme="dark"] .work-body h3,[data-theme="dark"] .work-body p{color:#FFFFFF}
#products{background:var(--ink);color:#EDEFF5}
[data-theme="dark"] #products{background:var(--surface);border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)}
.saas-band .eyebrow{color:var(--accent-2)!important}
.saas-band .eyebrow::before{background:var(--accent-2)}
.saas-band .section-head h2{color:#FFFFFF}
[data-theme="dark"] .saas-band .section-head h2{color:var(--ink)}
.saas-band .section-head p{color:#B9BFD6}
[data-theme="dark"] .saas-band .section-head p{color:var(--ink-muted)}
.saas-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.saas-grid{grid-template-columns:1fr 1fr}}
.saas-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-md);padding:22px;transition:border-color 0.2s ease,background-color 0.2s ease}
[data-theme="dark"] .saas-card{background:var(--surface-2);border-color:var(--border)}
.saas-card:hover{border-color:var(--accent-2)}
.saas-card .tag{font-family:var(--font-mono);font-size:12px;color:var(--accent-2);letter-spacing:0.06em}
.saas-card h3{font-size:18px;margin-top:10px;color:#fff}
[data-theme="dark"] .saas-card h3{color:var(--ink)}
.saas-card p{font-size:14px;margin-top:8px;color:#B9BFD6}
[data-theme="dark"] .saas-card p{color:var(--ink-muted)}
.saas-card a.card-link{margin-top:14px;display:inline-flex;font-size:13px;font-weight:600;color:#fff;gap:6px}
[data-theme="dark"] .saas-card a.card-link{color:var(--accent-2)}
.saas-band-footer{margin-top:36px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.contact-inner{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.contact-inner h2{font-size:clamp(30px,5vw,48px);max-width:16ch}
.contact-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.site-footer{border-top:1px solid var(--border);padding-block:28px;font-size:13.5px;color:var(--ink-muted)}
.site-footer .container{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.site-footer a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;transition:color 0.15s ease,text-decoration-color 0.15s ease}
.site-footer a:hover{color:var(--accent);text-decoration-color:var(--accent)}
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity 0.6s ease,transform 0.6s ease}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
.product-hero{padding-top:clamp(72px,10vw,110px);padding-bottom:40px}
.product-hero h1{font-size:clamp(34px,5.6vw,58px);max-width:18ch}
.product-hero p.hero-sub{max-width:52ch}
.product-detail{display:grid;gap:24px;padding-block:40px;border-top:1px solid var(--border)}
@media (min-width:860px){.product-detail{grid-template-columns:0.85fr 1.15fr;align-items:start}}
.product-detail .tag{font-family:var(--font-mono);font-size:12.5px;color:var(--accent);letter-spacing:0.06em}
.product-detail h2{font-size:28px;margin-top:10px}
.product-detail .kicker{color:var(--ink-muted);margin-top:8px;font-size:15.5px}
.feature-list{display:grid;gap:10px;margin-top:8px}
.feature-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-muted)}
.feature-list li::before{content:"";margin-top:7px;width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}
.product-visual{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);aspect-ratio:16/10;display:grid;place-items:center;font-family:var(--font-mono);font-size:13px;color:var(--ink-faint)}
.product-cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
.breadcrumb{font-family:var(--font-mono);font-size:13px;color:var(--ink-faint);display:flex;gap:8px;align-items:center}
.breadcrumb a{color:var(--ink-muted)}
.breadcrumb a:hover{color:var(--accent)}
.contact-page-hero{padding-top:clamp(72px,10vw,110px);padding-bottom:40px}
.contact-page-hero h1{font-size:clamp(34px,5.6vw,58px);max-width:20ch;margin-top:16px}
.contact-page-hero p.hero-sub{max-width:54ch;margin-top:14px;color:var(--ink-muted);font-size:18px}
.contact-wrapper{display:grid;gap:36px;padding-bottom:clamp(64px,9vw,110px)}
@media (min-width:900px){.contact-wrapper{grid-template-columns:1.25fr 0.75fr;align-items:start;gap:48px}}
.form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow)}
.form-card h2{font-size:24px;margin-bottom:6px}
.form-card p.form-desc{color:var(--ink-muted);font-size:14.5px;margin-bottom:28px}
.form-row{display:grid;gap:20px;margin-bottom:20px}
@media (min-width:600px){.form-row.two-col{grid-template-columns:1fr 1fr}}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.form-group label .optional{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--ink-faint)}
.form-control{width:100%;padding:12px 16px;font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color 0.2s ease,box-shadow 0.2s ease,background-color 0.2s ease}
.form-control::placeholder{color:var(--ink-faint)}
.form-control:hover{border-color:var(--border-strong)}
.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(46,75,255,0.18);background:var(--surface)}
[data-theme="dark"] .form-control:focus{box-shadow:0 0 0 3px rgba(110,139,255,0.25)}
textarea.form-control{resize:vertical;min-height:120px}
.form-submit-wrap{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.btn-submit{width:100%;justify-content:center;padding-block:14px;font-size:15px}
.form-status{padding:14px 18px;border-radius:var(--radius-md);font-size:14px;display:none;align-items:center;gap:10px;line-height:1.4}
.form-status.is-visible{display:flex}
.form-status.success{background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.35);color:#15803d}
[data-theme="dark"] .form-status.success{color:#4ade80}
.form-status.error{background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.35);color:#b91c1c}
[data-theme="dark"] .form-status.error{color:#f87171}
.form-status.loading{background:rgba(46,75,255,0.08);border:1px solid rgba(46,75,255,0.2);color:var(--accent)}
.contact-sidebar{display:flex;flex-direction:column;gap:24px}
.info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px}
.info-card h3{font-size:18px;margin-bottom:16px}
.info-list{display:flex;flex-direction:column;gap:18px}
.info-item{display:flex;gap:14px;align-items:flex-start}
.info-icon{width:36px;height:36px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--accent);flex-shrink:0}
.info-details label{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-faint);display:block;margin-bottom:2px}
.info-details p,.info-details a{font-size:14.5px;color:var(--ink);font-weight:600}
.info-details a:hover{color:var(--accent)}
.social-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.social-pill{padding:8px 14px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:13px;font-weight:600;color:var(--ink);transition:all 0.2s ease}
.social-pill:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}