/* 47 Web Design V6.1 — portfolio, theme, footer, visual-rich polish */
:root{
  --v61-radius:18px;
  --v61-shadow:0 28px 70px rgba(0,0,0,.16);
  --v61-soft:color-mix(in srgb,var(--surface2) 72%,transparent);
  --v61-ink:#07171c;
  --v61-white:#f5ffff;
}

/* ---------- PORTFOLIO ---------- */
.p56-portfolio-hero{padding-bottom:78px!important}
.p56-tools{padding:18px 0 26px!important}
.p58-intro{padding:60px 0 34px!important}
.p58-intro+.p56-section,.p58-intro+section{padding-top:0!important}
[data-v5-portfolio-grid]{padding-top:36px!important}
.p58-grid,.p56-projects-grid,.v5-portfolio-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:34px 26px!important;
  align-items:stretch!important;
}
.v5-project,.v5-project:nth-child(n){
  grid-column:auto!important;
  display:flex!important;
  flex-direction:column!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:visible!important;
  box-shadow:none!important;
  transform:none!important;
}
.v5-project:hover{box-shadow:none!important;transform:none!important}
.v5-project-media{
  position:relative!important;
  width:100%!important;
  aspect-ratio:16/10!important;
  display:block!important;
  overflow:hidden!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  box-shadow:0 18px 46px rgba(0,0,0,.13)!important;
}
.v5-project-media:before,.v5-project-media:after{display:none!important}
.v5-project-media img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border-radius:18px!important;
  transform:none!important;
  transition:transform .45s cubic-bezier(.22,.7,.24,1),filter .35s ease!important;
}
.v5-project:hover .v5-project-media img{transform:scale(1.012)!important;filter:saturate(1.035)}
.v5-region,.v5-status{top:12px!important;bottom:auto!important;font-size:8px!important;border-radius:999px!important}
.v5-project-copy{
  display:flex!important;
  flex-direction:column!important;
  flex:1!important;
  padding:19px 4px 0!important;
  min-height:205px!important;
  background:transparent!important;
}
.v5-project-meta{min-height:18px!important;margin-bottom:10px!important}
.v5-project-copy h3{font-size:21px!important;line-height:1.18!important;min-height:49px!important;margin:0 0 9px!important}
.v5-project-copy p{font-size:12.5px!important;line-height:1.68!important;min-height:64px!important;margin:0!important;color:var(--muted)!important}
.v5-project-actions{margin-top:auto!important;padding-top:15px!important;border-top:1px solid var(--line)!important}
.v5-project-actions a{font-size:10.5px!important}
.v5-project.v61-filtered{display:none!important}
.v5-empty{grid-column:1/-1!important}
.p56-filters button{transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease!important}
.p56-filters button:hover{transform:translateY(-1px)}
.p56-filters button.active{box-shadow:0 8px 24px color-mix(in srgb,var(--brand) 18%,transparent)}

/* Portfolio slider — same real screenshots used across portfolio */
.p59-slider-shell{border-radius:26px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.p59-browser{border-radius:22px!important;overflow:hidden!important;background:var(--surface)!important;border:1px solid var(--line)!important;box-shadow:0 28px 70px rgba(0,0,0,.18)!important}
.p59-browserbar{height:34px!important}
.p59-stage{aspect-ratio:16/10!important;min-height:0!important;padding:0!important;background:transparent!important}
.p59-stage>img{width:100%!important;height:100%!important;min-height:0!important;object-fit:contain!important;object-position:center!important;border-radius:0!important;background:transparent!important}
.p59-caption{padding-top:17px!important}
.p59-caption strong{font-size:20px!important}
.p59-caption small{font-size:11px!important}

/* ---------- THEME INTEGRITY ---------- */
/* Keep photographic / cinematic hero modules intentionally dark in BOTH themes. */
html[data-theme="light"] .v3-showcase,
html[data-theme="light"] .v3-showcase-card,
html[data-theme="light"] .hero-slider,
html[data-theme="light"] .v3-slide,
html[data-theme="light"] .v3-hero,
html[data-theme="light"] .p56-portfolio-hero{
  color:var(--v61-white)!important;
}
html[data-theme="light"] .v3-showcase-card{
  background:rgba(4,20,26,.94)!important;
  border-color:rgba(85,233,227,.22)!important;
  box-shadow:0 30px 80px rgba(2,16,20,.28)!important;
}
html[data-theme="light"] .v3-showcase-card :where(h1,h2,h3,h4,b,strong){color:#f4ffff!important}
html[data-theme="light"] .v3-showcase-card :where(p,span:not(.accent),small){color:#bed0d5!important}
html[data-theme="light"] .v3-showcase-card .eyebrow{color:#61ebe6!important}
html[data-theme="light"] .v3-mini-grid>div{
  background:rgba(7,31,39,.94)!important;
  border-color:rgba(83,224,222,.20)!important;
  color:#f4ffff!important;
}
html[data-theme="light"] .v3-mini-grid b{color:#f4ffff!important}
html[data-theme="light"] .v3-mini-grid span{color:#a9c1c7!important}
html[data-theme="light"] .v3-mini-grid svg{color:#28d7d4!important}
html[data-theme="light"] .v3-showcase-card .btn-secondary{background:#0c252d!important;color:#efffff!important;border-color:rgba(104,232,229,.24)!important}

/* Service heroes stay visually coherent: header can be light, service hero stays dark. */
html[data-theme="light"] .service55 .s55-hero{
  background:radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--s55) 14%,transparent),transparent 36%),#06171d!important;
  border-color:rgba(98,219,218,.15)!important;
  color:#f4ffff!important;
}
html[data-theme="light"] .service55 .s55-hero :where(h1,h2,h3,strong){color:#f4ffff!important}
html[data-theme="light"] .service55 .s55-hero :where(p,.breadcrumbs,.breadcrumbs span){color:#abc2c8!important}
html[data-theme="light"] .service55 .s55-hero .breadcrumbs a{color:#49deda!important}
html[data-theme="light"] .service55 .s55-hero-media{
  background:linear-gradient(145deg,#0b242c,#07171d)!important;
  border-color:rgba(104,226,222,.20)!important;
}
html[data-theme="light"] .service55 .s55-hero-media>img{background:#07171d!important}
html[data-theme="light"] .service55 .s55-hero-media figcaption{background:rgba(5,25,31,.88)!important;color:#fff!important}
html[data-theme="light"] .service55 .s55-actions .btn-secondary{background:#0b252d!important;color:#f4ffff!important;border-color:rgba(113,226,223,.22)!important}

/* Section dark really means dark regardless of selected global theme. */
html[data-theme="light"] .section-dark{
  background:linear-gradient(180deg,#081b22,#061419)!important;
  color:#f4ffff!important;
  border-color:rgba(90,216,214,.15)!important;
}
html[data-theme="light"] .section-dark :where(h1,h2,h3,h4,strong,b){color:#f4ffff!important}
html[data-theme="light"] .section-dark :where(p,small,li){color:#a9c0c6!important}
html[data-theme="light"] .section-dark .article-card,
html[data-theme="light"] .section-dark .service-card,
html[data-theme="light"] .section-dark .process-card{background:#0b222a!important;border-color:rgba(92,216,214,.16)!important}

/* Buttons/cards on light backgrounds */
html[data-theme="light"] .btn-secondary{background:#fff!important;color:#0a1b20!important;border-color:rgba(7,80,88,.16)!important}
html[data-theme="light"] .btn-secondary:hover{background:#edf7f8!important}
html[data-theme="light"] .faq details,
html[data-theme="light"] .v5-faq-item,
html[data-theme="light"] .v5-tech-card,
html[data-theme="light"] .v5-method-card,
html[data-theme="light"] .process-card,
html[data-theme="light"] .why-card{color:#0a1b20!important}
html[data-theme="light"] .faq details p,
html[data-theme="light"] .v5-faq-answer{color:#566f75!important}

/* ---------- VISUAL RICHNESS ---------- */
.v61-gallery{padding:88px 0;border-block:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 42%,transparent),transparent)}
.v61-gallery-head{display:grid;grid-template-columns:1fr .7fr;gap:36px;align-items:end;margin-bottom:30px}
.v61-gallery-head h2{font-size:clamp(29px,2.6vw,43px)!important;margin:10px 0 0!important;max-width:800px}
.v61-gallery-head p{margin:0;color:var(--muted);font-size:13px;max-width:560px;justify-self:end}
.v61-gallery-grid{display:grid;grid-template-columns:1.28fr .72fr;grid-template-rows:1fr 1fr;gap:15px;min-height:540px}
.v61-gallery-figure{margin:0;position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line);background:var(--surface);box-shadow:0 18px 46px rgba(0,0,0,.10)}
.v61-gallery-figure:first-child{grid-row:1/3}
.v61-gallery-figure img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .75s cubic-bezier(.22,.7,.24,1),filter .35s ease}
.v61-gallery-figure.is-ui img{object-fit:contain;background:color-mix(in srgb,var(--surface2) 82%,#07181e)}
.v61-gallery-figure:hover img{transform:scale(1.025);filter:saturate(1.04)}
.v61-gallery-figure figcaption{position:absolute;left:14px;bottom:14px;padding:8px 11px;border-radius:999px;background:rgba(4,18,23,.76);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
html[data-theme="light"] .v61-gallery{background:linear-gradient(180deg,#edf6f7,#f8fbfb)}

/* ---------- FOOTER 6.1 ---------- */
.site-footer.footer61{padding:0!important;background:#051318!important;border-top:1px solid rgba(89,225,221,.17)!important;color:#eaffff!important}
.footer61-main{display:grid;grid-template-columns:1.35fr .8fr .8fr 1fr;gap:48px;padding:72px 0 52px}
.footer61-brand img{width:88px!important;height:auto!important;margin-bottom:20px!important;filter:drop-shadow(0 12px 28px rgba(0,0,0,.32))}
.footer61-brand p{font-size:14px!important;line-height:1.7!important;color:#a8c0c6!important;max-width:440px;margin:0 0 20px}
.footer61-tag{display:inline-flex;align-items:center;gap:8px;color:#62e8e3;font-size:10px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
.footer61-tag:before{content:"";width:22px;height:2px;background:#20cbc9}
.footer61-col h4{font-size:13px!important;color:#f5ffff!important;letter-spacing:.05em;margin:2px 0 17px!important}
.footer61-col a{display:block;color:#a8c0c6!important;font-size:13px!important;line-height:1.45;padding:5px 0;transition:.2s}
.footer61-col a:hover{color:#5be6e1!important;transform:translateX(3px)}
.footer61-contact{padding:22px;border:1px solid rgba(95,220,218,.15);border-radius:20px;background:rgba(16,48,57,.48)}
.footer61-contact small{display:block;color:#62e8e3;font-size:9px;font-weight:850;letter-spacing:.13em;text-transform:uppercase;margin-bottom:9px}
.footer61-contact strong{display:block;font-size:18px;line-height:1.3;color:#fff;margin-bottom:8px}
.footer61-contact p{font-size:12px!important;color:#9fb8be!important;margin:0 0 16px}
.footer61-contact .btn{min-height:42px;font-size:12px;padding:0 16px}
.footer61-markets{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}
.footer61-market{display:flex!important;align-items:center;gap:7px;padding:7px 9px!important;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.035);font-size:10px!important;color:#c7dcdf!important}
.footer61-market img{width:20px!important;height:20px!important;margin:0!important}
.footer61-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#7f9aa1}
.footer61-legal,.footer61-social{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.footer61-bottom a{color:#9db7bd!important}.footer61-bottom a:hover{color:#5be6e1!important}
.footer61-social a{display:grid;width:34px;height:34px;place-items:center;border:1px solid rgba(255,255,255,.11);border-radius:50%;font-weight:850}

/* ---------- MOTION POLISH ---------- */
.v61-clip{clip-path:inset(0 0 100% 0 round 24px);transition:clip-path .9s cubic-bezier(.22,.7,.24,1)}
.v61-clip.v60-in{clip-path:inset(0 0 0 0 round 24px)}
.v61-line-title{position:relative}
.v61-line-title:after{content:"";display:block;width:0;height:2px;background:linear-gradient(90deg,var(--brand),transparent);margin-top:13px;transition:width .8s cubic-bezier(.22,.7,.24,1)}
.v61-line-title.v60-in:after{width:min(180px,36%)}
.v61-magnetic{will-change:transform}

@media(max-width:1180px){
 .p58-grid,.p56-projects-grid,.v5-portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .footer61-main{grid-template-columns:1.2fr 1fr 1fr;gap:34px}.footer61-contact{grid-column:1/-1}
 .v61-gallery-grid{min-height:450px}
}
@media(max-width:760px){
 .p56-portfolio-hero{padding-bottom:52px!important}.p58-intro{padding-top:42px!important}[data-v5-portfolio-grid]{padding-top:24px!important}
 .p58-grid,.p56-projects-grid,.v5-portfolio-grid{grid-template-columns:1fr!important;gap:28px!important}
 .v5-project-copy{min-height:auto!important;padding-top:16px!important}.v5-project-copy h3,.v5-project-copy p{min-height:0!important}
 .v61-gallery{padding:64px 0}.v61-gallery-head{grid-template-columns:1fr;gap:14px}.v61-gallery-head p{justify-self:start}.v61-gallery-grid{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}.v61-gallery-figure:first-child{grid-row:auto}.v61-gallery-figure{aspect-ratio:16/10}.v61-gallery-figure:nth-child(n+2){aspect-ratio:16/9}
 .footer61-main{grid-template-columns:1fr 1fr;padding:52px 0 38px;gap:30px 24px}.footer61-brand,.footer61-contact{grid-column:1/-1}.footer61-bottom{align-items:flex-start;flex-direction:column}.footer61-brand img{width:76px!important}
}
@media(max-width:480px){.footer61-main{grid-template-columns:1fr}.footer61-col,.footer61-contact{grid-column:1}.footer61-legal{gap:10px}.footer61-market span{display:none}}