/* v2: image fit, search, brand colours (loaded after style.css) */
:root{--brand-blue:oklch(67% .16 224);--brand-pink:oklch(62% .22 8);--brand-violet:oklch(55% .2 295);--brand-orange:oklch(75% .16 55)}
.project-shot{position:relative;background:linear-gradient(135deg,oklch(95% .03 224),oklch(95% .03 8))}
.project-shot{aspect-ratio:auto;background:var(--secondary)}
.project-shot img{width:100%;height:auto;min-height:0;display:block;object-fit:fill}
.project-shot .ph{aspect-ratio:1.65}
.project-card:hover .project-shot img{transform:none}
.modal-shot{height:auto;aspect-ratio:auto;max-height:340px;object-fit:unset;object-position:left top}

.searchbox{position:relative;flex:0 1 340px;width:100%;max-width:340px;margin:0}
.searchbox i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted-foreground);pointer-events:none}
.searchbox input{width:100%;height:40px;border:1px solid var(--border);border-radius:10px;padding:0 14px 0 38px;background:#fff;font-size:14px;outline:0;color:var(--foreground)}
.searchbox input:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px oklch(67% .16 224/.18)}

/* page-wide soft colour washes */
body{background:
  radial-gradient(900px 500px at 100% 12%,oklch(92% .06 8/.45),transparent 60%),
  radial-gradient(900px 500px at 0% 40%,oklch(92% .06 224/.45),transparent 60%),
  var(--background)}
.site-header{border-bottom:0;box-shadow:0 1px 0 var(--border)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-violet),var(--brand-pink),var(--brand-orange))}
.btn-dark-c,.btn-dark-c:hover{background:linear-gradient(105deg,var(--brand-blue),var(--brand-violet) 60%,var(--brand-pink));color:#fff}
.btn-dark-c:hover{filter:brightness(1.08)}

/* hero */
.hero-band{background:
  radial-gradient(600px 380px at 85% 20%,oklch(55% .2 295/.45),transparent 70%),
  radial-gradient(520px 360px at 70% 95%,oklch(62% .22 8/.35),transparent 70%),
  radial-gradient(560px 380px at 5% 0%,oklch(67% .16 224/.28),transparent 70%),
  var(--hero-background)}
.hero-band h1{background:linear-gradient(100deg,#fff 40%,oklch(85% .1 224));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-accent{-webkit-text-fill-color:var(--hero-highlight)}
.hero-proof span:nth-child(2) strong{color:oklch(78% .15 295)}
.hero-proof span:nth-child(3) strong{color:oklch(78% .17 8)}
.btn-hero,.btn-hero:hover{background:linear-gradient(100deg,var(--hero-action),oklch(70% .16 260));color:#fff}
.btn-hero:hover{filter:brightness(1.08)}
.btn-hero.btn-hero-outline,.btn-hero.btn-hero-outline:hover{background:transparent}
.btn-hero.btn-hero-outline:hover{background:var(--hero-panel);filter:none}

/* headings & accents */
.gradient-text{background:linear-gradient(90deg,var(--brand-blue) 0%,var(--brand-violet) 55%,var(--brand-pink) 100%);-webkit-background-clip:text;background-clip:text}
.eyebrow{background:linear-gradient(90deg,var(--primary),var(--brand-violet));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.eyebrow.cyan{background:linear-gradient(90deg,var(--brand-blue),var(--brand-violet));-webkit-background-clip:text;background-clip:text}
.filter-btn.active{background:linear-gradient(105deg,var(--brand-blue),var(--brand-violet));border-color:transparent}
.filter-btn:hover{border-color:var(--brand-blue)}

/* category chips */
.cat-chip{background:oklch(95% .03 224);color:oklch(40% .12 230)}
.cat-chip.c-commerce{background:oklch(94% .06 55);color:oklch(42% .12 50)}
.cat-chip.c-real-estate{background:oklch(94% .05 160);color:oklch(38% .1 160)}
.cat-chip.c-education{background:oklch(94% .05 295);color:oklch(40% .15 295)}
.cat-chip.c-travel{background:oklch(94% .05 200);color:oklch(40% .1 210)}
.cat-chip.c-events{background:oklch(94% .06 8);color:oklch(45% .17 8)}
.cat-chip.c-finance{background:oklch(94% .06 100);color:oklch(42% .1 100)}
.cat-chip.c-web-platforms{background:oklch(94% .04 255);color:oklch(40% .14 260)}
.tech-chip{background:linear-gradient(105deg,oklch(67% .16 224/.14),oklch(55% .2 295/.14));color:oklch(42% .15 260)}
.project-card{position:relative}
.project-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-violet),var(--brand-pink));opacity:0;transition:opacity .3s}
.project-card:hover::before{opacity:1}
.link-btn{color:var(--brand-violet)}

/* stack + integrations */
.stack-box{background:linear-gradient(120deg,oklch(96% .03 224/.85),oklch(96% .035 295/.85) 55%,oklch(96% .035 8/.85))}
.stack-chip:nth-child(4n+1){border-bottom:2px solid var(--brand-blue)}
.stack-chip:nth-child(4n+2){border-bottom:2px solid var(--brand-violet)}
.stack-chip:nth-child(4n+3){border-bottom:2px solid var(--brand-pink)}
.stack-chip:nth-child(4n){border-bottom:2px solid var(--brand-orange)}
.integ-featured{border-color:oklch(55% .2 295/.3);background:linear-gradient(105deg,oklch(67% .16 224/.12),oklch(62% .22 8/.1))}
.integ-box{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--brand-blue),var(--brand-violet),var(--brand-pink)) 1 0 0 0}
.integ-other:hover{border-color:var(--brand-blue);color:var(--foreground)}

/* services */
.svc-icon{background:oklch(94% .05 224);color:oklch(48% .15 235)}
.col-lg-4:nth-child(3n+2) .svc-icon{background:oklch(94% .05 295);color:oklch(46% .2 295)}
.col-lg-4:nth-child(3n) .svc-icon{background:oklch(94% .06 8);color:oklch(50% .21 8)}
.svc-card{border-top:3px solid var(--brand-blue)}
.col-lg-4:nth-child(3n+2) .svc-card{border-top-color:var(--brand-violet)}
.col-lg-4:nth-child(3n) .svc-card{border-top-color:var(--brand-pink)}

/* approach */
.approach-band{background:linear-gradient(120deg,oklch(94% .035 224),oklch(94% .035 295) 55%,oklch(94% .04 8))}
.col-lg-3:nth-child(1)>.step{border-color:var(--brand-blue)}.col-lg-3:nth-child(1)>.step .n{color:var(--brand-blue)}
.col-lg-3:nth-child(2)>.step{border-color:var(--brand-violet)}.col-lg-3:nth-child(2)>.step .n{color:var(--brand-violet)}
.col-lg-3:nth-child(3)>.step{border-color:var(--brand-pink)}.col-lg-3:nth-child(3)>.step .n{color:var(--brand-pink)}
.col-lg-3:nth-child(4)>.step{border-color:var(--brand-orange)}.col-lg-3:nth-child(4)>.step .n{color:oklch(62% .15 55)}

/* about */
.up-card{border-top:3px solid var(--brand-blue)}
.col-lg-3:nth-child(2)>.up-card{border-top-color:var(--brand-violet)}
.col-lg-3:nth-child(3)>.up-card{border-top-color:var(--brand-pink)}
.col-lg-3:nth-child(4)>.up-card{border-top-color:var(--brand-orange)}
.pill:nth-child(3n+1){border-color:oklch(67% .16 224/.5);background:oklch(67% .16 224/.07)}
.pill:nth-child(3n+2){border-color:oklch(55% .2 295/.4);background:oklch(55% .2 295/.06)}
.pill:nth-child(3n){border-color:oklch(62% .22 8/.4);background:oklch(62% .22 8/.06)}

/* CTA / contact / footer */
.gradient-cta{background:linear-gradient(105deg,var(--brand-blue) 0%,var(--brand-violet) 55%,var(--brand-pink) 100%)}
.btn-primary-c,.btn-primary-c:hover{background:linear-gradient(105deg,var(--brand-blue),var(--brand-violet));color:#fff}
.btn-primary-c:hover{filter:brightness(1.08)}
.btn-light-c{color:var(--brand-violet)}
.contact-card .ic{color:var(--brand-pink)}
.site-footer{background:linear-gradient(180deg,transparent,oklch(95% .03 260/.6));position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand-blue),var(--brand-violet),var(--brand-pink),var(--brand-orange))}

/* hero frames: show whole screenshot */
.showcase-frame img{flex:none;height:auto;object-fit:fill}
.showcase-frame-1{width:76%;height:auto;top:2%}
.showcase-frame-2{width:64%;height:auto;bottom:6%}
@media(max-width:575px){.hero-showcase{height:300px}}