:root{
  --hero-background:oklch(17% .052 256);--hero-foreground:oklch(98% .004 240);--hero-copy:oklch(82% .017 240);
  --hero-line:oklch(98% .004 240/.26);--hero-panel:oklch(98% .004 240/.08);--hero-action:oklch(72% .15 224);
  --hero-action-foreground:oklch(17% .052 256);--hero-highlight:oklch(69% .21 17);
  --background:oklch(98.6% .006 233);--foreground:oklch(19% .042 253);--card:oklch(100% 0 0);
  --primary:oklch(49% .15 238);--primary-foreground:oklch(100% 0 0);--secondary:oklch(95% .019 232);
  --muted-foreground:oklch(47% .03 248);--cyan:oklch(67% .16 224);--rose:oklch(54% .22 16);
  --border:oklch(86% .023 234/.75);--font-display:"Space Grotesk",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --bs-body-bg:var(--background);--bs-body-color:var(--foreground);--bs-body-font-family:"DM Sans",sans-serif;
  --bs-border-color:var(--border);
}
html{scroll-behavior:smooth}
body{background:var(--background);color:var(--foreground);font-family:"DM Sans",sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration:none}
.font-display{font-family:var(--font-display)}
.font-mono{font-family:var(--font-mono)}
.container{max-width:1280px;padding-left:24px;padding-right:24px}
@media(min-width:576px){.container{padding-left:32px;padding-right:32px}}
.text-muted-fg{color:var(--muted-foreground)}
.text-primary-c{color:var(--primary)}
.text-cyan-c{color:var(--cyan)}.text-rose-c{color:var(--rose)}
.eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin:0}
.eyebrow.cyan{color:var(--cyan)}
.h-display{font-family:var(--font-display);font-weight:700;line-height:1.15}
.h-section{font-size:clamp(2.25rem,4vw,3rem);margin-top:1rem}
.gradient-text{background:linear-gradient(90deg,var(--primary) 0%,var(--primary) 58%,var(--rose) 100%);color:transparent;-webkit-background-clip:text;background-clip:text}
.lead-lg{font-size:1.125rem;line-height:1.7;color:var(--muted-foreground)}
section[id]{scroll-margin-top:96px}

/* header */
.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--border);background:oklch(98.6% .006 233/.95);backdrop-filter:blur(24px)}
.site-header .bar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.site-header .logo{height:48px;width:auto;max-width:140px;object-fit:contain}
@media(min-width:576px){.site-header .logo{height:56px;max-width:180px}}
.site-nav a{font-size:14px;font-weight:500;color:var(--muted-foreground);transition:color .15s}
.site-nav a:hover{color:var(--primary)}
.btn-dark-c{background:var(--foreground);color:var(--background);border-radius:12px;height:36px;padding:0 16px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;border:0;transition:background .15s}
.btn-dark-c:hover{background:oklch(19% .042 253/.85);color:var(--background)}
.menu-btn{width:36px;height:36px;border-radius:12px;border:1px solid var(--border);background:oklch(98.6% .006 233/.7);display:inline-flex;align-items:center;justify-content:center;color:var(--foreground)}
.mobile-nav{border-top:1px solid var(--border)}
.mobile-nav a{display:block;padding:12px 0;font-weight:500;color:var(--muted-foreground)}

/* hero */
.hero-band{background:var(--hero-background);color:var(--hero-foreground);overflow:hidden;animation:.7s both page-rise}
@keyframes page-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-band .inner{padding-top:56px;padding-bottom:56px}
@media(min-width:768px){.hero-band .inner{padding-top:64px;padding-bottom:64px}}
.hero-eyebrow{color:var(--hero-action);font-size:12px;font-weight:700;text-transform:uppercase;margin:0}
.hero-band h1{font-family:var(--font-display);font-weight:700;line-height:1.03;margin-top:24px;font-size:3rem}
@media(min-width:576px){.hero-band h1{font-size:3.75rem}}
@media(min-width:992px){.hero-band h1{font-size:4.5rem}}
.hero-accent{color:var(--hero-highlight)}
.hero-tag{font-family:var(--font-display);font-weight:500;font-size:1.5rem;line-height:1.2;margin-top:16px}
@media(min-width:576px){.hero-tag{font-size:1.875rem}}
.hero-copy{color:var(--hero-copy);font-size:1rem;line-height:1.7;max-width:36rem;margin-top:20px}
@media(min-width:576px){.hero-copy{font-size:1.125rem}}
.btn-hero{background:var(--hero-action);color:var(--hero-action-foreground);height:40px;border-radius:6px;padding:0 32px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;border:1px solid transparent}
.btn-hero:hover{background:oklch(72% .15 224/.9);color:var(--hero-action-foreground)}
.btn-hero-outline{background:transparent;color:var(--hero-foreground);border-color:var(--hero-line)}
.btn-hero-outline:hover{background:var(--hero-panel);color:var(--hero-foreground)}
.hero-proof{border-top:1px solid var(--hero-line);color:var(--hero-copy);font-size:14px;padding-top:20px;margin-top:36px;display:flex;flex-wrap:wrap;gap:16px 28px}
.hero-proof strong{color:var(--hero-action);font-family:var(--font-display);margin-right:4px;font-size:1.5rem}
.hero-showcase{position:relative;width:100%;max-width:520px;height:320px;min-width:0}
@media(min-width:768px){.hero-showcase{height:clamp(310px,32vw,440px)}}
.showcase-frame{border:5px solid var(--hero-foreground);background:var(--hero-foreground);border-radius:7px;display:flex;flex-direction:column;position:absolute;overflow:hidden;box-shadow:0 24px 48px oklch(9% .03 252/.38)}
.showcase-frame img{min-height:0;width:100%;flex:1;object-fit:contain;object-position:top}
.showcase-frame-1{width:80%;height:69%;top:4%;right:0;transform:rotate(3deg)}
.showcase-frame-2{width:69%;height:58%;bottom:10%;left:0;transform:rotate(-6deg)}
.showcase-label{background:var(--hero-foreground);color:var(--hero-action-foreground);font-family:var(--font-display);display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px;font-size:12px;font-weight:700;flex-shrink:0}
.showcase-caption{color:var(--hero-copy);text-transform:uppercase;font-size:11px;position:absolute;bottom:0;right:0}

/* glass */
.glass{backdrop-filter:blur(20px);background:oklch(100% 0 0/.67);border:1px solid oklch(100% 0 0/.85);box-shadow:0 12px 40px oklch(27% .055 239/.07)}
.glass-card{backdrop-filter:blur(18px);background:oklch(100% 0 0/.68);border:1px solid oklch(100% 0 0/.9);transition:transform .3s,box-shadow .3s;box-shadow:0 14px 36px oklch(27% .055 239/.07)}
.glass-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px oklch(27% .055 239/.12)}

/* work */
.sec{padding-top:56px;padding-bottom:56px}
.sec-sm{padding-top:48px;padding-bottom:48px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filter-btn{height:32px;border-radius:6px;padding:0 12px;font-size:12px;font-weight:500;border:1px solid var(--border);background:oklch(98.6% .006 233/.7);color:var(--foreground);backdrop-filter:blur(24px);transition:.15s}
.filter-btn:hover{background:var(--background)}
.filter-btn.active{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);box-shadow:0 10px 15px -3px oklch(49% .15 238/.2)}
.work-toolbar{margin-top:40px;padding-bottom:28px;border-bottom:1px solid var(--border)}
.showing{font-size:13px;color:var(--muted-foreground);margin:24px 0}
.project-card{border-radius:16px;padding:14px;display:flex;flex-direction:column;overflow:hidden;height:100%}
.project-shot{aspect-ratio:1.65;overflow:hidden;border-radius:12px;background:var(--secondary)}
.project-shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.project-card:hover .project-shot img{transform:scale(1.03)}
.project-shot .ph{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:20px}
.project-shot .ph small{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;color:var(--primary)}
.project-shot .ph b{font-family:var(--font-display);font-size:1.5rem;line-height:1.2;overflow:hidden}
.project-main{display:flex;flex:1;flex-direction:column;padding:20px 6px 4px}
.cat-chip{align-self:flex-start;border-radius:6px;background:var(--secondary);padding:4px 10px;font-size:11px;font-weight:600;margin-bottom:12px}
.project-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.project-title h3{font-family:var(--font-display);font-size:1.125rem;font-weight:600;line-height:1.2;margin:0}
.tech-chip{flex-shrink:0;border-radius:6px;background:oklch(49% .15 238/.1);color:var(--primary);padding:4px 8px;font-size:10px;font-weight:600}
.project-desc{margin:12px 0 0;font-size:14px;line-height:1.65;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.project-foot{margin-top:auto;padding-top:16px}
.integ-list{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--muted-foreground)}
.integ-list span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.link-btn{background:none;border:0;padding:0;margin-top:12px;color:var(--primary);font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.link-btn:hover{text-decoration:underline;text-underline-offset:4px}
.btn-outline-c{height:40px;border-radius:6px;padding:0 32px;font-size:14px;font-weight:500;border:1px solid var(--border);background:oklch(98.6% .006 233/.7);color:var(--foreground)}
.btn-outline-c:hover{background:var(--background)}

/* stack / integrations */
.stack-box{border-radius:24px;padding:28px}
@media(min-width:576px){.stack-box{padding:36px}}
.stack-chip{border-radius:8px;background:oklch(98.6% .006 233/.85);padding:8px 14px;font-size:14px;font-weight:500}
.integ-box{border-radius:8px;border:1px solid var(--border);background:var(--card);padding:24px}
@media(min-width:576px){.integ-box{padding:36px}}
.integ-featured{border-radius:6px;border:1px solid oklch(49% .15 238/.3);background:oklch(49% .15 238/.1);padding:8px 12px;font-size:14px;font-weight:600}
.integ-other{border-radius:6px;border:1px solid var(--border);background:var(--background);padding:6px 10px;font-size:12px;font-weight:500;color:var(--muted-foreground)}
.label-sm{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);margin:0}

/* services */
.svc-card{border-radius:16px;padding:28px;display:flex;flex-direction:column;height:100%}
.svc-icon{width:48px;height:48px;border-radius:12px;background:oklch(49% .15 238/.1);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:20px}
.svc-card h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700;margin:32px 0 0}
.svc-card p{margin:12px 0 0;flex:1;font-size:14px;line-height:1.65;color:var(--muted-foreground)}
.svc-tag{border-radius:6px;background:var(--secondary);padding:4px 10px;font-size:12px;font-weight:500}

/* approach */
.approach-band{background:var(--secondary);padding:64px 0}
@media(min-width:576px){.approach-band{padding:80px 0}}
.step{border-left:2px solid var(--primary);padding-left:20px}
.step .n{font-family:var(--font-mono);font-size:12px;font-weight:700;text-transform:uppercase;color:var(--primary)}
.step h3{font-family:var(--font-display);font-size:1.25rem;font-weight:700;margin:28px 0 0}
.step p{margin:12px 0 0;font-size:14px;line-height:1.65;color:var(--muted-foreground)}

/* about */
.big-stat{font-family:var(--font-display);font-size:3rem;font-weight:700}
.pill{border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:12px}
.up-card{border-radius:16px;padding:24px}
.up-card strong{font-family:var(--font-display);font-size:2.25rem;font-weight:700;display:block}

/* cta/contact */
.gradient-cta{background:linear-gradient(105deg,var(--primary) 0%,var(--primary) 55%,var(--rose) 100%);color:var(--primary-foreground);border-radius:24px;padding:32px;box-shadow:0 20px 25px -5px oklch(49% .15 238/.15)}
@media(min-width:576px){.gradient-cta{padding:44px}}
.btn-light-c{background:var(--background);color:var(--primary);height:40px;border-radius:6px;padding:0 32px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 15px -3px rgba(0,0,0,.15);white-space:nowrap}
.btn-light-c:hover{background:oklch(98.6% .006 233/.9);color:var(--primary)}
.btn-primary-c{background:var(--primary);color:var(--primary-foreground);height:40px;border-radius:6px;padding:0 32px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 15px -3px oklch(49% .15 238/.2)}
.btn-primary-c:hover{background:oklch(49% .15 238/.9);color:#fff}
.contact-card{border-radius:24px;padding:28px}
@media(min-width:576px){.contact-card.big{padding:40px}}
.contact-card h3{font-family:var(--font-display);font-weight:700}
.contact-card a.tl{color:var(--foreground)}.contact-card a.tl:hover{color:var(--primary)}
.contact-card .ic{color:var(--primary);font-size:22px}

/* footer */
.site-footer{border-top:1px solid oklch(86% .023 234/.7);padding:40px 0}
.site-footer .links a{font-size:14px;color:var(--muted-foreground)}
.site-footer .links a:hover{color:var(--primary)}

/* modal */
.modal-content{border-radius:20px;border:1px solid var(--border);background:var(--background)}
.modal-kicker{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary)}
.modal-title{font-family:var(--font-display);font-weight:700}
.modal-shot{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:top;border-radius:12px;background:var(--secondary)}
.modal h6{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);margin:20px 0 8px}