/* Home page only: coloured frosted panels and a shallow refractive glass edge. */
.studio-home {
  --glass-rgb: 105, 181, 255;
  --glass-light: 187, 223, 255;
}

/* Saturated reflections sit over a dark base so the copy stays easy to read. */
.studio-home :is(.service-web, .t-seo, .step:nth-child(2), .approach-item:nth-child(2), .fix-list li:nth-child(2), .fq:nth-child(3n + 2)) {
  --glass-rgb: 86, 175, 255;
  --glass-light: 179, 222, 255;
}
.studio-home :is(.service-ads, .t-manage, .step:nth-child(4), .approach-item:nth-child(1), .fix-list li:nth-child(3), .fq:nth-child(3n + 1)) {
  --glass-rgb: 255, 105, 202;
  --glass-light: 255, 196, 235;
}
.studio-home :is(.t-pages, .step:nth-child(1), .approach-item:nth-child(3), .fix-list li:nth-child(1), .fq:nth-child(3n)) {
  --glass-rgb: 191, 237, 78;
  --glass-light: 224, 255, 173;
}
.studio-home :is(.step:nth-child(3), .fix-list li:nth-child(4)) {
  --glass-rgb: 170, 141, 255;
  --glass-light: 225, 211, 255;
}
.studio-home :is(.service-panel, .tile, .step, .approach-item, .fix-list li, .fq) {
  background:
    linear-gradient(125deg, #ffffff0e, transparent 30%, #ffffff03 78%, #ffffff09),
    radial-gradient(ellipse at 96% 0%, rgba(var(--glass-rgb), .22), transparent 68%),
    linear-gradient(145deg, rgba(var(--glass-rgb), .13), rgba(var(--glass-rgb), .045) 75%),
    rgba(13, 16, 23, .94);
  border-color: rgba(var(--glass-rgb), .34);
  box-shadow: inset 0 1px #ffffff40, inset 0 -1px #ffffff08, 0 20px 50px #0004;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  backdrop-filter: blur(10px) saturate(125%) !important;
}
.studio-home :is(.service-panel, .tile, .step, .approach-item, .fix-list li, .fq):hover {
  border-color: rgba(var(--glass-light), .62);
  box-shadow: inset 0 1px #ffffff55, inset 0 -1px #ffffff09, 0 24px 55px #0005;
}
.studio-home :is(.service-index, .tile-number, .approach-item > span, .service-copy h3 em) {
  color: rgb(var(--glass-light));
}
.studio-home :is(.service-copy > p, .tile > p, .step p, .approach-item p, .a p, .pain) {
  color: #e1e4ee;
}
.studio-home :is(.tile h3, .step h3, .approach-item h3, .gain, .q) { color: #f7f8fc; }
.studio-home :is(.service-tags li, .chip) {
  color: rgb(var(--glass-light));
  border-color: rgba(var(--glass-rgb), .3);
  background: linear-gradient(135deg, #ffffff10, #ffffff03), rgba(8, 12, 20, .44);
  box-shadow: inset 0 1px #ffffff19;
}
.studio-home .chip.sub { color: #f0f2f7; border-color: #ffffff32; }
.studio-home :is(.service-link, .visual-label) {
  border-color: rgba(var(--glass-rgb), .4);
  background: linear-gradient(120deg, #ffffff14, #ffffff03), rgba(9, 14, 23, .68);
  color: #f7f8fc;
}
.studio-home .service-link span { background: rgb(var(--glass-light)); color: #10131d; }
.studio-home .service-visual:before {
  background: radial-gradient(ellipse at 55% 45%, rgba(var(--glass-rgb), .27), transparent 68%);
}
.studio-home .service-visual .mock {
  background: linear-gradient(140deg, #1a354a, #111e2e 72%);
  border-color: #95d7ff66;
}
.studio-home .service-visual .mock-bar { background: #ffffff08; border-color: #ffffff24; }
.studio-home .mock-caption span { color: #b3deff; }
.studio-home .service-visual .m-btn { background: #acd9ff; }
.studio-home .service-visual .m-cards i { background: #7dccff30; border: 1px solid #a4dbff30; }
.studio-home .service-visual .m-cards i:nth-child(2) { background: #addbff50; }
.studio-home .ads-demo { background: linear-gradient(135deg, #f594da18, #ffffff05), #231520c9; border-color: #ffc4eb40; }
.studio-home .ads-demo-label { color: #ffc4eb; }
.studio-home .ads-demo .negs { color: #e9d5e3; }
.studio-home .ads-demo .negs span { color: #ffc4eb; border-color: #ffb5e355; background: #fba3d916; }
.studio-home .t-seo .res.me { background: #1b4765; border-color: #8bd8ff; }
.studio-home .t-seo .res.me .rk { background: #a8e0ff; color: #0b2030; }
.studio-home .t-seo .res small { color: #d1d9e4; }
.studio-home .t-seo .ranking-note { color: #d9e1ed; }
.studio-home .t-manage .b-you { background: #ffffff12; color: #f3eaf1; border: 1px solid #ffd2ee25; }
.studio-home .t-manage .b-us { background: #ffb5e5; color: #301027; }
.studio-home .fix-list .gain svg { background: rgb(var(--glass-light)); color: #111621; }
.studio-home .fq.open { border-color: rgba(var(--glass-light), .66); }
.studio-home #how .step:before { background: none; }
/* Off-screen panels retain their reflections without keeping a live blur. */
.studio-home .section-effects-idle :is(.service-panel, .tile, .step, .approach-item, .fix-list li, .fq) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Project titles keep a separate crisp foreground above the refracted artwork. */
.studio-home .work-card { --glass-rgb: 86, 175, 255; --glass-light: 179, 222, 255; }
.studio-home .work-card:nth-child(2) { --glass-rgb: 230, 185, 108; --glass-light: 255, 226, 177; }
.studio-home .work-card-foot {
  background: linear-gradient(125deg, #ffffff17, #ffffff04 42%, rgba(var(--glass-rgb), .11)), rgba(12, 19, 29, .75);
  border-color: rgba(var(--glass-light), .4);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
.studio-home .work-category { color: rgb(var(--glass-light)); }
.studio-home .work-link { background: rgb(var(--glass-light)); color: #10151b; box-shadow: 0 6px 20px #0003; }
.studio-home .work-card:hover .work-link { box-shadow: 0 6px 24px rgba(var(--glass-rgb), .22); }
.studio-home .nav { background: linear-gradient(115deg, #ffffff17, #ffffff04 45%, #96cbff0b), #11141ccc; }

/* Three small samples: a clear transition, a bent lens, then frosted diffusion.
   No extra animation is needed: the backdrop changes naturally while scrolling. */
.studio-home .optical-frost { isolation: auto; }
.studio-home .optical-frost > i {
  display: block;
  inset: 0;
  -webkit-backdrop-filter: blur(2px) saturate(130%);
  backdrop-filter: blur(2px) saturate(130%);
  -webkit-mask-image: linear-gradient(transparent, #000 68%);
  mask-image: linear-gradient(transparent, #000 68%);
}
.studio-home .optical-frost > .frost-refraction {
  top: 8%; bottom: 18%;
  -webkit-backdrop-filter: blur(5px) saturate(160%) brightness(1.07);
  backdrop-filter: blur(5px) saturate(160%) brightness(1.07);
  -webkit-mask-image: linear-gradient(transparent, #000 42%, #000 75%, transparent);
  mask-image: linear-gradient(transparent, #000 42%, #000 75%, transparent);
}
.has-glass-refraction .studio-home .optical-frost > .frost-refraction {
  -webkit-backdrop-filter: url("#d1-glass-refraction") saturate(145%) brightness(1.06);
  backdrop-filter: url("#d1-glass-refraction") saturate(145%) brightness(1.06);
}
.studio-home .optical-frost > .frost-finish {
  top: 52%;
  -webkit-backdrop-filter: blur(7px) saturate(125%);
  backdrop-filter: blur(7px) saturate(125%);
  -webkit-mask-image: linear-gradient(transparent, #000 86%);
  mask-image: linear-gradient(transparent, #000 86%);
}
.studio-home .viewport-frost {
  display: block;
  height: 54px;
  pointer-events: none;
  /* No opacity or filter on this parent: each child must sample the real page. */
}
.studio-home .viewport-frost:after {
  background: linear-gradient(transparent 10%, #d9e9ff02 35%, #f0e6ff07 75%, #e5edff0c);
  box-shadow: inset 0 -1px #ffffff20;
}
.studio-home:has(dialog[open], :focus-visible) .viewport-frost { opacity: 0; }
.motion-paused .studio-home .optical-frost > .frost-refraction {
  -webkit-backdrop-filter: blur(5px) saturate(145%);
  backdrop-filter: blur(5px) saturate(145%);
}
@media (max-width: 820px) {
  .studio-home :is(.service-panel, .tile, .step, .approach-item, .fix-list li, .fq) {
    -webkit-backdrop-filter: blur(8px) saturate(125%) !important;
    backdrop-filter: blur(8px) saturate(125%) !important;
  }
}
@media (max-width: 620px) {
  .studio-home .viewport-frost { display: block; height: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .studio-home .viewport-frost > i { display: block; }
  .studio-home .work-card-foot { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
  .studio-home .motion-control { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .studio-home footer { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .has-glass-refraction .studio-home .optical-frost > .frost-refraction {
    -webkit-backdrop-filter: blur(5px) saturate(145%);
    backdrop-filter: blur(5px) saturate(145%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .studio-home .optical-frost > i { display: none; }
  .studio-home .viewport-frost { height: 36px; background: linear-gradient(transparent, #17202b66); }
}