/* Spider Studios — final lower-page polish.
   Deliberately scoped below the hero; no hero/header/domain artwork rules here. */

.selector{padding-top:34px!important;padding-bottom:28px!important}
.selector .section-head{margin-bottom:18px!important}
.service-select{gap:10px!important;align-items:stretch}
.select-card{min-height:104px!important;padding:15px 10px 13px!important;border-radius:15px!important;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}
.select-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(31,45,95,.10)}
.select-card.active{box-shadow:0 12px 30px color-mix(in srgb,var(--card-accent) 20%,transparent)!important}
.feature-stat{padding-top:18px!important;padding-bottom:30px!important;gap:26px!important}
.features article p,.stats article span{line-height:1.35!important}

.process-section{position:relative;overflow:hidden}
.process-section:after{content:"";position:absolute;left:0;right:0;bottom:-48px;height:96px;
  background:radial-gradient(ellipse at center,rgba(103,91,255,.16),transparent 68%);pointer-events:none}
.process-card{opacity:.68;transform:translateY(0);transition:opacity .35s ease,transform .35s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease}
.process-card.is-active{opacity:1;transform:translateY(-5px);border-color:rgba(95,207,255,.65)!important;
  background:linear-gradient(155deg,rgba(83,91,190,.42),rgba(38,49,116,.72))!important;
  box-shadow:0 18px 42px rgba(31,131,255,.18),0 0 28px rgba(236,39,181,.12)}
.process-card.is-done{opacity:.9}
.process-card:before{transition:box-shadow .35s ease,background .35s ease}
.process-card.is-active:before{box-shadow:0 0 0 5px rgba(62,194,255,.10),0 0 18px rgba(62,194,255,.65)}
.process-card .process-connector{position:absolute;top:27px;left:calc(50% + 18px);right:calc(-50% + 18px);height:2px;background:rgba(151,171,255,.20);overflow:hidden}
.process-card .process-connector:after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#33c8ff,#b45cff,#ff36a7);transition:transform .5s ease}
.process-card.is-done .process-connector:after,.process-card.is-active .process-connector:after{transform:scaleX(1)}

.services-detail{padding-top:64px!important;padding-bottom:68px!important}
.services-title{margin-bottom:30px!important}
.detail-grid article{overflow:hidden}
.detail-grid article p{font-size:14px!important;line-height:1.55!important;color:#586582!important}
.service-visual{transform:scale(1.12);transform-origin:bottom right;transition:transform .35s ease,filter .35s ease}
.detail-grid article:hover .service-visual{transform:scale(1.17) translateY(-3px);filter:drop-shadow(0 12px 18px rgba(23,45,110,.14))}
.detail-grid article:first-child .service-visual{transform:scale(1.24);transform-origin:bottom right}
.detail-grid article:first-child:hover .service-visual{transform:scale(1.29) translateY(-4px)}
.detail-grid article:has(.service-visual-shopify):hover .service-visual{transform:scale(1.18) translate(-3px,-3px)}
.detail-grid article:has(.service-visual-hosting):hover .service-visual{filter:drop-shadow(0 0 15px rgba(31,190,255,.22))}
.detail-grid article:has(.service-visual-seo):hover .service-visual{transform:scale(1.18) translateY(-5px)}

.proposal{position:relative;overflow:hidden;margin-top:8px!important}
.proposal:before{content:"";position:absolute;width:330px;height:330px;left:-150px;bottom:-190px;border-radius:50%;
 background:radial-gradient(circle,rgba(255,45,175,.13),rgba(96,92,255,.06) 48%,transparent 70%);pointer-events:none}
.proposal-copy,.proposal form{position:relative;z-index:1}
.proposal .cta span,.header-cta span{display:inline-block;transition:transform .25s ease}
.proposal .cta:hover span{transform:translateX(5px)}

.site-footer{position:relative}
.site-footer:before{content:"";position:absolute;top:0;left:6%;right:6%;height:1px;
 background:linear-gradient(90deg,transparent,rgba(255,38,171,.45),rgba(37,150,255,.45),transparent)}
.site-footer .footer-brand img{filter:drop-shadow(0 5px 10px rgba(18,32,79,.08))}

@media(max-width:900px){
 .selector{padding-top:26px!important}
 .select-card{min-height:94px!important}
 .process-card{opacity:1}
 .service-visual,.detail-grid article:first-child .service-visual{transform:scale(1.03)}
 .detail-grid article:hover .service-visual,.detail-grid article:first-child:hover .service-visual{transform:scale(1.05)}
}


/* v4 targeted corrections — selector overlap, process contrast, service visual position */
.selector{
  position:relative!important;
  z-index:3!important;
  overflow:visible!important;
  padding-bottom:34px!important;
}
.service-select{
  position:relative!important;
  z-index:4!important;
  margin-bottom:18px!important;
}
.feature-stat{
  position:relative!important;
  z-index:1!important;
  clear:both!important;
  margin-top:0!important;
  padding-top:20px!important;
}
.features,.stats{
  position:relative!important;
  z-index:1!important;
}
.feature-stat .features article,
.feature-stat .stats article{
  transform:none!important;
}
@media(min-width:901px){
  .selector{min-height:190px!important}
  .service-select{min-height:104px!important}
  .feature-stat{min-height:118px!important}
}

.process-card{opacity:.56!important}
.process-card.is-done{opacity:.78!important}
.process-card.is-active{
  opacity:1!important;
  border-color:rgba(96,217,255,.88)!important;
  box-shadow:
    0 18px 42px rgba(31,131,255,.24),
    0 0 34px rgba(236,39,181,.18),
    inset 0 0 0 1px rgba(255,255,255,.04)!important;
}
.process-card.is-active .process-connector:after{
  filter:drop-shadow(0 0 7px rgba(72,190,255,.8)) drop-shadow(0 0 9px rgba(255,66,181,.45));
}

.detail-grid article:first-child .service-visual{
  transform:scale(1.26) translateY(-18px)!important;
}
.detail-grid article:first-child:hover .service-visual{
  transform:scale(1.31) translateY(-22px)!important;
}

.services-detail{
  margin-top:-4px!important;
}
.proposal{
  margin-top:0!important;
}

@media(max-width:900px){
  .selector{min-height:unset!important;padding-bottom:24px!important}
  .feature-stat{min-height:unset!important;padding-top:12px!important}
  .detail-grid article:first-child .service-visual{
    transform:scale(1.03)!important;
  }
  .detail-grid article:first-child:hover .service-visual{
    transform:scale(1.05)!important;
  }
}


/* v5 — definitive selector/document-flow fix only.
   No hero, process, service-grid, proposal or footer styling changes. */
@media (min-width:901px){
  .selector{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    padding-bottom:0!important;
    overflow:visible!important;
  }

  .selector .service-select{
    position:relative!important;
    display:grid!important;
    float:none!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0 0 30px!important;
    padding:0!important;
    overflow:visible!important;
  }

  /* Force the following row to participate in normal document flow
     and begin only after the selector-card grid has fully ended. */
  .selector .feature-stat{
    position:relative!important;
    display:flex!important;
    float:none!important;
    clear:both!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0 0 32px!important;
    transform:none!important;
    top:auto!important;
    bottom:auto!important;
  }

  .selector .feature-stat .features,
  .selector .feature-stat .stats{
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
  }
}


/* =========================================================
   v6 — SERVICE CARDS VISUAL BALANCE
   Scope: services-detail / bento cards only.
   Hero, book, process, proposal and footer are untouched.
   ========================================================= */

.services-detail .bento-grid{
  grid-auto-rows:minmax(205px,auto)!important;
  gap:18px!important;
}

.services-detail .bento-card{
  min-height:205px!important;
  padding:28px!important;
  isolation:isolate;
}

/* Give every card a deliberate visual area rather than empty white space. */
.services-detail .bento-card:after{
  content:"";
  position:absolute;
  z-index:0;
  width:220px;
  height:220px;
  right:-46px;
  bottom:-62px;
  border-radius:50%;
  background:
    radial-gradient(circle at 42% 38%,
      color-mix(in srgb,var(--card-accent) 11%,white),
      color-mix(in srgb,var(--card-accent) 4%,transparent) 54%,
      transparent 70%);
  pointer-events:none;
}

.services-detail .bento-card .bento-orbit{
  width:250px!important;
  height:250px!important;
  right:-105px!important;
  bottom:-116px!important;
  opacity:.78;
}

.services-detail .bento-copy{
  max-width:64%!important;
}

.services-detail .bento-copy h3{
  font-size:22px!important;
  line-height:1.18!important;
  margin:17px 0 9px!important;
}

.services-detail .bento-copy p{
  max-width:520px;
  font-size:13px!important;
  line-height:1.58!important;
}

.services-detail .bento-copy a{
  margin-top:17px!important;
}

/* Stronger, larger mini-UI illustrations on all standard service cards. */
.services-detail .bento-visual{
  width:148px!important;
  height:112px!important;
  right:24px!important;
  bottom:24px!important;
  border-radius:20px!important;
  transform:none!important;
  box-shadow:
    0 18px 38px rgba(20,33,83,.18),
    0 0 0 1px rgba(255,255,255,.08) inset!important;
  opacity:1!important;
}

/* Scale the internal artwork proportionally for the larger visual frame. */
.services-detail .bento-visual:not(.visual-web){
  transform-origin:bottom right!important;
}
.services-detail .bento-visual:not(.visual-web):before{
  transform:scale(1.18);
  transform-origin:left top;
}
.services-detail .bento-visual:not(.visual-web) span,
.services-detail .bento-visual:not(.visual-web) i,
.services-detail .bento-visual:not(.visual-web) b{
  transform:scale(1.18);
  transform-origin:left top;
}

/* Large Website Design card: illustration becomes a real focal element. */
.services-detail .bento-1{
  min-height:405px!important;
  padding:32px!important;
}

.services-detail .bento-1 .bento-copy{
  max-width:52%!important;
}

.services-detail .bento-1 .bento-copy h3{
  font-size:29px!important;
  margin-top:18px!important;
}

.services-detail .bento-1 .bento-copy p{
  font-size:14px!important;
  line-height:1.62!important;
}

.services-detail .bento-1 .visual-web{
  width:320px!important;
  height:198px!important;
  right:38px!important;
  bottom:34px!important;
  transform:none!important;
  border-radius:22px!important;
  box-shadow:0 24px 54px rgba(20,33,83,.20)!important;
}

/* Rebuild the browser mock so it fills the larger visual naturally. */
.services-detail .bento-1 .visual-web:before{
  height:30px!important;
  border-radius:22px 22px 0 0!important;
}
.services-detail .bento-1 .visual-web:after{
  left:18px!important;
  top:11px!important;
  width:6px!important;
  height:6px!important;
  box-shadow:12px 0 #ffd05c,24px 0 #59d993!important;
}
.services-detail .bento-1 .visual-web span:nth-child(1){
  left:22px!important;
  top:48px!important;
  width:120px!important;
  height:62px!important;
  border-radius:11px!important;
}
.services-detail .bento-1 .visual-web span:nth-child(2){
  left:158px!important;
  top:49px!important;
  width:136px!important;
  height:11px!important;
  box-shadow:0 23px #40558f,0 46px #40558f!important;
}
.services-detail .bento-1 .visual-web span:nth-child(3){
  left:22px!important;
  right:22px!important;
  bottom:20px!important;
  width:auto!important;
  height:46px!important;
  border-radius:11px!important;
}
.services-detail .bento-1 .visual-web i{
  left:38px!important;
  bottom:37px!important;
  width:65px!important;
  height:10px!important;
}
.services-detail .bento-1 .visual-web b{
  left:117px!important;
  bottom:37px!important;
  width:92px!important;
  height:10px!important;
}

/* Card-specific placement so illustrations look designed, not corner-stuck. */
.services-detail .bento-2 .bento-visual,
.services-detail .bento-3 .bento-visual{
  right:26px!important;
  bottom:22px!important;
}

.services-detail .bento-4 .bento-visual,
.services-detail .bento-5 .bento-visual,
.services-detail .bento-6 .bento-visual{
  width:142px!important;
  height:108px!important;
  right:20px!important;
  bottom:18px!important;
}

/* Keep text from colliding with the now-larger visuals. */
.services-detail .bento-2 .bento-copy,
.services-detail .bento-3 .bento-copy{
  max-width:61%!important;
}

.services-detail .bento-4 .bento-copy,
.services-detail .bento-5 .bento-copy,
.services-detail .bento-6 .bento-copy{
  max-width:60%!important;
}

/* Hover = gentle lift only, no exaggerated movement. */
.services-detail .bento-card:hover .bento-visual{
  transform:translateY(-5px)!important;
  box-shadow:0 24px 50px rgba(20,33,83,.23)!important;
}
.services-detail .bento-1:hover .visual-web{
  transform:translateY(-6px)!important;
}

/* Tablet */
@media(max-width:1100px){
  .services-detail .bento-1{
    min-height:360px!important;
  }
  .services-detail .bento-1 .visual-web{
    width:270px!important;
    height:170px!important;
    right:28px!important;
  }
  .services-detail .bento-1 .bento-copy{
    max-width:54%!important;
  }
}

/* Mobile: illustration becomes a full-width visual block below the copy. */
@media(max-width:820px){
  .services-detail .bento-card{
    min-height:300px!important;
    padding:24px!important;
  }

  .services-detail .bento-copy,
  .services-detail .bento-1 .bento-copy,
  .services-detail .bento-2 .bento-copy,
  .services-detail .bento-3 .bento-copy,
  .services-detail .bento-4 .bento-copy,
  .services-detail .bento-5 .bento-copy,
  .services-detail .bento-6 .bento-copy{
    max-width:100%!important;
    padding-bottom:118px;
  }

  .services-detail .bento-visual,
  .services-detail .bento-4 .bento-visual,
  .services-detail .bento-5 .bento-visual,
  .services-detail .bento-6 .bento-visual{
    width:145px!important;
    height:108px!important;
    right:22px!important;
    bottom:20px!important;
    opacity:1!important;
  }

  .services-detail .bento-1{
    min-height:390px!important;
  }

  .services-detail .bento-1 .bento-copy{
    padding-bottom:190px;
  }

  .services-detail .bento-1 .visual-web{
    width:260px!important;
    height:164px!important;
    right:22px!important;
    bottom:22px!important;
  }
}

@media(max-width:520px){
  .services-detail .bento-1 .visual-web{
    width:calc(100% - 44px)!important;
    max-width:285px!important;
  }
}


/* =========================================================
   v7 — PRECISION REFINEMENT
   Scope: proof/stats, process cards, detailed services,
          proposal trust area.
   Explicitly does NOT touch Hero or Book Journey.
   ========================================================= */

/* ---------------------------------------------------------
   1. PROOF / STATS ROW — slightly stronger readability
   --------------------------------------------------------- */
.lower-proof{
  padding-top:22px!important;
  padding-bottom:22px!important;
}
.lower-proof .feature-stat-item,
.lower-proof .stat-item{
  min-height:74px;
}
.lower-proof h3,
.lower-proof strong{
  letter-spacing:-.01em;
}
.lower-proof p,
.lower-proof small{
  font-size:11px!important;
  line-height:1.45!important;
  color:#64728d!important;
}

/* ---------------------------------------------------------
   2. PROCESS — more depth, clearer hover, no redesign
   --------------------------------------------------------- */
.journey-track article{
  border:1px solid rgba(135,152,222,.22)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 22px rgba(2,9,40,.08)!important;
  transition:
    transform .28s ease,
    border-color .28s ease,
    background .28s ease,
    box-shadow .28s ease!important;
}
.journey-track article:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(108,135,255,.52)!important;
  background:
    linear-gradient(180deg,rgba(75,95,190,.18),rgba(30,45,105,.08))!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 34px rgba(0,8,42,.18)!important;
}
.journey-track article i{
  opacity:.95!important;
}
.journey-track article b{
  font-size:15px!important;
}
.journey-track article p{
  color:rgba(224,231,255,.72)!important;
  line-height:1.55!important;
}

/* ---------------------------------------------------------
   3. DETAILED SERVICES — crisp visuals, less fog/glow
   --------------------------------------------------------- */

/* Remove the washed-out look from v6. */
.services-detail .bento-card:after{
  opacity:.45!important;
  width:190px!important;
  height:190px!important;
  right:-58px!important;
  bottom:-70px!important;
}
.services-detail .bento-card .bento-orbit{
  opacity:.34!important;
  filter:none!important;
}

/* Crisp mini-UI art. */
.services-detail .bento-visual{
  filter:none!important;
  opacity:1!important;
  box-shadow:
    0 12px 26px rgba(18,31,78,.14),
    0 0 0 1px rgba(255,255,255,.10) inset!important;
  backdrop-filter:none!important;
}

/* Keep illustrations inside the card rather than glued to edges. */
.services-detail .bento-2 .bento-visual,
.services-detail .bento-3 .bento-visual{
  right:30px!important;
  bottom:26px!important;
}
.services-detail .bento-4 .bento-visual,
.services-detail .bento-5 .bento-visual,
.services-detail .bento-6 .bento-visual{
  right:24px!important;
  bottom:22px!important;
}

/* Main Website Design card — use more center-right space. */
.services-detail .bento-1{
  min-height:400px!important;
}
.services-detail .bento-1 .visual-web{
  width:340px!important;
  height:210px!important;
  right:34px!important;
  bottom:42px!important;
}
.services-detail .bento-1 .bento-copy{
  max-width:50%!important;
}
.services-detail .bento-1 .bento-copy p{
  max-width:430px!important;
}

/* Make the browser illustration visually richer without adding new assets. */
.services-detail .bento-1 .visual-web{
  background:
    linear-gradient(160deg,#18285f 0%,#243875 58%,#172554 100%)!important;
}
.services-detail .bento-1 .visual-web span:nth-child(1){
  background:linear-gradient(135deg,#7163ff,#4fb1ff)!important;
  box-shadow:0 8px 20px rgba(71,95,225,.22)!important;
}
.services-detail .bento-1 .visual-web span:nth-child(3){
  background:rgba(255,255,255,.08)!important;
}
.services-detail .bento-1 .visual-web i{
  background:#55d5ec!important;
  box-shadow:76px 0 #9167ef!important;
}

/* Standard service cards — slightly larger, sharper graphics. */
.services-detail .bento-2 .bento-visual,
.services-detail .bento-3 .bento-visual{
  width:156px!important;
  height:116px!important;
}
.services-detail .bento-4 .bento-visual,
.services-detail .bento-5 .bento-visual,
.services-detail .bento-6 .bento-visual{
  width:148px!important;
  height:112px!important;
}

/* Reduce empty-space feeling by balancing copy and art. */
.services-detail .bento-2 .bento-copy,
.services-detail .bento-3 .bento-copy{
  max-width:58%!important;
}
.services-detail .bento-4 .bento-copy,
.services-detail .bento-5 .bento-copy,
.services-detail .bento-6 .bento-copy{
  max-width:58%!important;
}
.services-detail .bento-card h3{
  letter-spacing:-.02em!important;
}
.services-detail .bento-card p{
  color:#66738e!important;
}

/* SEO wide card needs a much stronger illustration presence. */
.services-detail .bento-7{
  min-height:220px!important;
  position:relative;
}
.services-detail .bento-7 .bento-copy{
  max-width:62%!important;
}
.services-detail .bento-7 .bento-visual{
  width:220px!important;
  height:126px!important;
  right:34px!important;
  bottom:28px!important;
  border-radius:22px!important;
}
.services-detail .bento-7 .bento-orbit{
  width:300px!important;
  height:300px!important;
  right:-100px!important;
  bottom:-150px!important;
  opacity:.28!important;
}

/* Gentle hover only. */
.services-detail .bento-card:hover{
  transform:translateY(-4px)!important;
}
.services-detail .bento-card:hover .bento-visual{
  transform:translateY(-3px)!important;
  box-shadow:
    0 18px 34px rgba(18,31,78,.18),
    0 0 0 1px rgba(255,255,255,.12) inset!important;
}
.services-detail .bento-1:hover .visual-web{
  transform:translateY(-4px)!important;
}

/* ---------------------------------------------------------
   4. PROPOSAL — strengthen left trust / value panel
   --------------------------------------------------------- */
.creative-proposal .proposal-intro{
  position:relative;
}
.creative-proposal .proposal-intro:after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  left:-80px;
  bottom:-90px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,39,144,.10),rgba(76,106,255,.04) 54%,transparent 72%);
  pointer-events:none;
}
.creative-proposal .proposal-note,
.creative-proposal .proposal-trust,
.creative-proposal .trust-card{
  border:1px solid rgba(68,85,142,.10)!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 10px 28px rgba(38,54,96,.05)!important;
  border-radius:14px!important;
}
.creative-proposal .proposal-note strong,
.creative-proposal .proposal-trust strong,
.creative-proposal .trust-card strong{
  font-size:12px!important;
}
.creative-proposal .proposal-note p,
.creative-proposal .proposal-trust p,
.creative-proposal .trust-card p{
  color:#6b7891!important;
  line-height:1.5!important;
}

/* ---------------------------------------------------------
   Responsive refinements
   --------------------------------------------------------- */
@media(max-width:1100px){
  .services-detail .bento-1 .visual-web{
    width:300px!important;
    height:188px!important;
    right:26px!important;
    bottom:34px!important;
  }
  .services-detail .bento-7 .bento-visual{
    width:190px!important;
    height:116px!important;
  }
}
@media(max-width:820px){
  .services-detail .bento-card:after{
    opacity:.30!important;
  }
  .services-detail .bento-1 .visual-web{
    width:min(300px,calc(100% - 44px))!important;
    right:22px!important;
  }
  .services-detail .bento-7{
    min-height:310px!important;
  }
  .services-detail .bento-7 .bento-copy{
    max-width:100%!important;
    padding-bottom:130px;
  }
  .services-detail .bento-7 .bento-visual{
    width:185px!important;
    height:110px!important;
    right:22px!important;
    bottom:20px!important;
  }
}


/* =========================================================
   v8 — SERVICES VISUAL COMPOSITION
   Scope: detailed service cards ONLY.
   Hero / Book / Process / Proposal / Footer untouched.
   ========================================================= */

/* Kill the artificial hotspot / glare from all service artwork. */
.services-detail .bento-visual,
.services-detail .bento-visual *,
.services-detail .bento-visual:before,
.services-detail .bento-visual:after{
  filter:none!important;
  backdrop-filter:none!important;
  text-shadow:none!important;
}
.services-detail .bento-visual{
  overflow:hidden!important;
  opacity:1!important;
  background-color:#17265b!important;
  box-shadow:
    0 14px 30px rgba(20,34,83,.16),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* Neutralize old shine overlays if present. */
.services-detail .bento-visual .shine,
.services-detail .bento-visual .glare,
.services-detail .bento-visual .light,
.services-detail .bento-visual [class*="shine"],
.services-detail .bento-visual [class*="glow"]{
  display:none!important;
}

/* Make the card itself part of the composition. */
.services-detail .bento-card{
  overflow:hidden!important;
}
.services-detail .bento-card:after{
  width:245px!important;
  height:245px!important;
  right:-72px!important;
  bottom:-94px!important;
  opacity:.28!important;
  filter:none!important;
}
.services-detail .bento-card .bento-orbit{
  width:280px!important;
  height:280px!important;
  right:-104px!important;
  bottom:-132px!important;
  opacity:.22!important;
  filter:none!important;
}

/* Add a restrained decorative visual field behind each mini interface. */
.services-detail .bento-card:before{
  content:"";
  position:absolute;
  z-index:0;
  width:210px;
  height:150px;
  right:8px;
  bottom:5px;
  border-radius:52% 48% 0 0 / 72% 68% 0 0;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--card-accent) 7%,transparent),
      color-mix(in srgb,var(--card-accent) 2%,transparent) 52%,
      transparent 72%);
  border-top:1px solid color-mix(in srgb,var(--card-accent) 10%,transparent);
  transform:rotate(-4deg);
  pointer-events:none;
}

/* Standard cards: larger and intentionally centered in right visual zone. */
.services-detail .bento-2 .bento-visual,
.services-detail .bento-3 .bento-visual{
  width:170px!important;
  height:124px!important;
  right:28px!important;
  bottom:28px!important;
}
.services-detail .bento-4 .bento-visual,
.services-detail .bento-5 .bento-visual,
.services-detail .bento-6 .bento-visual{
  width:158px!important;
  height:116px!important;
  right:22px!important;
  bottom:24px!important;
}

/* Website Design: use the vacant center-right area much more effectively. */
.services-detail .bento-1{
  min-height:400px!important;
}
.services-detail .bento-1:before{
  width:430px;
  height:280px;
  right:-55px;
  bottom:-72px;
  opacity:.75;
}
.services-detail .bento-1 .bento-copy{
  max-width:48%!important;
}
.services-detail .bento-1 .visual-web{
  width:365px!important;
  height:225px!important;
  right:38px!important;
  bottom:48px!important;
  border-radius:22px!important;
  background:linear-gradient(155deg,#16265c,#253b7b 62%,#172757)!important;
  box-shadow:
    0 18px 38px rgba(17,31,76,.18),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* Browser UI details remain crisp. */
.services-detail .bento-1 .visual-web span:nth-child(1){
  box-shadow:none!important;
}
.services-detail .bento-1 .visual-web span:nth-child(2){
  opacity:.92!important;
}
.services-detail .bento-1 .visual-web span:nth-child(3){
  background:#30477f!important;
}
.services-detail .bento-1 .visual-web i,
.services-detail .bento-1 .visual-web b{
  filter:none!important;
  box-shadow:none!important;
}

/* Text width gives each card a clean two-zone layout. */
.services-detail .bento-2 .bento-copy,
.services-detail .bento-3 .bento-copy{
  max-width:55%!important;
}
.services-detail .bento-4 .bento-copy,
.services-detail .bento-5 .bento-copy,
.services-detail .bento-6 .bento-copy{
  max-width:55%!important;
}

/* SEO & Support: make wide card feel intentionally composed. */
.services-detail .bento-7{
  min-height:235px!important;
}
.services-detail .bento-7:before{
  width:430px;
  height:220px;
  right:-28px;
  bottom:-70px;
  opacity:.8;
}
.services-detail .bento-7 .bento-copy{
  max-width:55%!important;
}
.services-detail .bento-7 .bento-visual{
  width:285px!important;
  height:150px!important;
  right:42px!important;
  bottom:36px!important;
  border-radius:22px!important;
  box-shadow:
    0 16px 34px rgba(20,34,83,.16),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}

/* Give SEO dashboard more visual weight if its inner pieces use spans. */
.services-detail .bento-7 .bento-visual span,
.services-detail .bento-7 .bento-visual i,
.services-detail .bento-7 .bento-visual b{
  transform:scale(1.22);
  transform-origin:center bottom;
}

/* Maintain restrained movement; no glow on hover. */
.services-detail .bento-card:hover .bento-visual,
.services-detail .bento-1:hover .visual-web{
  transform:translateY(-4px)!important;
  filter:none!important;
  box-shadow:
    0 20px 38px rgba(20,34,83,.19),
    inset 0 1px 0 rgba(255,255,255,.09)!important;
}

/* Tablet */
@media(max-width:1100px){
  .services-detail .bento-1 .visual-web{
    width:320px!important;
    height:202px!important;
    right:28px!important;
    bottom:38px!important;
  }
  .services-detail .bento-7 .bento-visual{
    width:235px!important;
    height:135px!important;
    right:28px!important;
  }
}

/* Mobile: preserve clean text-first hierarchy. */
@media(max-width:820px){
  .services-detail .bento-card:before{
    width:190px;
    height:125px;
    opacity:.55;
  }
  .services-detail .bento-1 .bento-copy,
  .services-detail .bento-2 .bento-copy,
  .services-detail .bento-3 .bento-copy,
  .services-detail .bento-4 .bento-copy,
  .services-detail .bento-5 .bento-copy,
  .services-detail .bento-6 .bento-copy,
  .services-detail .bento-7 .bento-copy{
    max-width:100%!important;
  }
  .services-detail .bento-1 .visual-web{
    width:min(315px,calc(100% - 44px))!important;
    height:190px!important;
    right:22px!important;
    bottom:24px!important;
  }
  .services-detail .bento-7{
    min-height:340px!important;
  }
  .services-detail .bento-7 .bento-copy{
    padding-bottom:155px!important;
  }
  .services-detail .bento-7 .bento-visual{
    width:220px!important;
    height:125px!important;
    right:22px!important;
    bottom:22px!important;
  }
}