/* Spider Studios finishing pass — intentionally leaves the approved hero untouched. */
.services-detail{position:relative;padding:72px 4% 62px;background:linear-gradient(180deg,#f9fbff 0%,#fcfaff 48%,#fff 100%);border-top:1px solid #eef1f7;overflow:hidden}
.services-detail:before,.services-detail:after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(2px)}
.services-detail:before{width:420px;height:420px;left:-220px;top:120px;background:radial-gradient(circle,rgba(36,142,255,.075),transparent 68%)}
.services-detail:after{width:480px;height:480px;right:-250px;bottom:40px;background:radial-gradient(circle,rgba(240,50,173,.065),transparent 68%)}
.services-title{position:relative;z-index:1;margin-bottom:38px}.services-title h2{font-size:36px}.services-title p{font-size:15px}
.detail-grid{position:relative;z-index:1;max-width:1420px;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.detail-grid article{position:relative;min-height:245px;padding:25px 24px 23px;border-color:#e5eaf3;box-shadow:0 10px 28px rgba(30,52,105,.055);overflow:hidden}
.detail-grid article:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--card-accent);opacity:.75;transform:scaleX(.22);transform-origin:left;transition:transform .32s ease}
.detail-grid article:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--card-accent) 30%,#e5eaf3);box-shadow:0 20px 42px rgba(30,52,105,.11)}
.detail-grid article:hover:before{transform:scaleX(1)}
.detail-grid article:nth-last-child(-n+3){transform:translateX(50%)}
.detail-grid article:nth-last-child(-n+3):hover{transform:translateX(50%) translateY(-6px)}
.detail-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--card-accent) 9%,white);color:var(--card-accent)}
.detail-icon svg{width:28px;height:28px}.detail-grid h3{margin-top:15px}.detail-grid p{min-height:62px}.detail-grid a{display:inline-flex;align-items:center;transition:transform .2s ease}.detail-grid article:hover a{transform:translateX(3px)}

/* Make the compact selector clearly interactive rather than a duplicate card section. */
.select-card{box-shadow:0 5px 16px rgba(26,43,88,.045);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
.select-card:hover{transform:translateY(-3px);box-shadow:0 13px 27px rgba(21,33,75,.095)}
.select-card.active{box-shadow:0 10px 24px rgba(232,44,158,.09)}
.reference-icon svg{display:block;width:31px;height:31px}.select-card .reference-icon{color:var(--card-accent)}

/* Pull the conversion area into the service flow and give it a stronger finish. */
.proposal{position:relative;z-index:2;max-width:1420px;margin:0 auto 34px;padding:36px 38px;background:radial-gradient(circle at 90% 10%,rgba(36,139,255,.08),transparent 30%),radial-gradient(circle at 10% 90%,rgba(239,43,170,.07),transparent 32%),linear-gradient(115deg,#fff,#faf8ff);box-shadow:0 20px 52px rgba(32,47,94,.075)}
.proposal input,.proposal textarea{font-weight:400;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.proposal input:focus,.proposal textarea:focus{border-color:#8aaeff;box-shadow:0 0 0 4px rgba(54,128,255,.08)}
.proposal .cta{box-shadow:0 10px 25px rgba(104,53,255,.18);transition:transform .2s ease,box-shadow .2s ease}.proposal .cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(104,53,255,.24)}

.site-footer{max-width:1420px;margin:0 auto;padding:30px 4% 34px;display:grid;grid-template-columns:1.2fr 1fr auto;align-items:center;gap:28px;border-top:1px solid #edf0f6;color:#485272;font-size:11px;letter-spacing:normal}
.footer-brand img{width:150px;height:auto;display:block;margin-bottom:8px}.footer-brand p{margin:0;font-size:9px;letter-spacing:.2em}.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:18px}.footer-links a{text-decoration:none;font-size:12px;font-weight:600;color:#394563;transition:color .2s ease}.footer-links a:hover{color:#e92172}.footer-copy{white-space:nowrap;font-size:11px}

@media(max-width:1200px){.detail-grid article:nth-last-child(-n+3){transform:none}.detail-grid article:nth-last-child(-n+3):hover{transform:translateY(-6px)}}
@media(max-width:900px){.services-detail{padding:54px 4% 42px}.detail-grid{grid-template-columns:repeat(2,1fr)}.proposal{margin:0 4% 28px}.site-footer{grid-template-columns:1fr;text-align:center}.footer-brand img{margin-left:auto;margin-right:auto}.footer-links{justify-content:center}}
@media(max-width:620px){.services-detail{padding:44px 18px 34px}.services-title h2{font-size:29px}.detail-grid{grid-template-columns:1fr}.detail-grid article{min-height:0}.proposal{margin:0 18px 24px;padding:26px 20px}.site-footer{margin:0 18px;padding-left:0;padding-right:0}.footer-links{gap:12px 16px}}
@media(prefers-reduced-motion:reduce){.detail-grid article,.detail-grid a,.select-card,.proposal .cta{transition:none!important}}

/* ===== Spider Studios refinement pass v2 =====
   Tightens rhythm and interaction only. Hero + domain search are intentionally untouched. */

/* Give the transition below the approved hero a deliberate, soft landing. */
.services-detail{
  padding-top:58px;
  padding-bottom:42px;
  background:
    radial-gradient(ellipse at 50% -4%,rgba(96,124,255,.075),transparent 37%),
    linear-gradient(180deg,#f9fbff 0%,#fcfaff 52%,#fff 100%);
}
.services-detail:before{top:70px}
.services-detail:after{bottom:-55px}
.services-title{margin-bottom:30px}

/* Slightly denser service cards: same information, less unused vertical space. */
.detail-grid{gap:14px 16px}
.detail-grid article{
  min-height:220px;
  padding:21px 23px 20px;
  border-radius:18px;
}
.detail-icon{width:42px;height:42px;border-radius:12px}
.detail-icon svg{width:25px;height:25px}
.detail-grid h3{margin-top:12px;margin-bottom:8px}
.detail-grid p{min-height:52px;margin-bottom:12px}

/* Make the top row read as an actual multi-select control, not a second card catalogue. */
.selector-head p{max-width:650px}
.select-grid{gap:8px}
.select-card{
  min-height:88px;
  padding-top:13px;
  padding-bottom:13px;
  border-radius:13px;
  cursor:pointer;
}
.select-card:hover{transform:translateY(-2px)}
.select-card.active{
  background:linear-gradient(180deg,#fff 0%,#fff8fd 100%);
  border-color:#f0299c;
  box-shadow:0 10px 26px rgba(232,44,158,.12),inset 0 0 0 1px rgba(240,41,156,.08);
}
.select-card.active:after{
  content:"Selected";
  position:absolute;
  right:9px;
  top:7px;
  padding:2px 6px;
  border-radius:999px;
  background:#fff0f8;
  color:#df1c84;
  font-size:7px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Keep proposal visually important while using its left column more effectively. */
.proposal{
  margin-top:4px;
  margin-bottom:24px;
  padding:32px 38px;
  overflow:hidden;
}
.proposal:before{
  content:"";
  position:absolute;
  width:230px;height:230px;
  left:-105px;bottom:-145px;
  border:1px solid rgba(238,43,167,.11);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(69,142,255,.025),0 0 0 58px rgba(238,43,167,.018);
  pointer-events:none;
}
.proposal-copy{position:relative;z-index:1}
.proposal .trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.proposal .trust b{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border:1px solid #e7eaf3;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 5px 15px rgba(33,52,96,.045);
  font-size:10px;
  font-weight:700;
  color:#34405f;
}

/* More confident footer without making it bulky. */
.site-footer{padding-top:34px;padding-bottom:36px;gap:32px}
.footer-brand img{width:176px;margin-bottom:10px}
.footer-links{gap:21px}
.footer-links a{font-size:12.5px}
.footer-copy{font-size:11.5px}

@media(max-width:1200px){
  .services-detail{padding-top:54px;padding-bottom:38px}
  .detail-grid article{min-height:216px}
  .select-card.active:after{display:none}
}
@media(max-width:900px){
  .services-detail{padding-top:48px;padding-bottom:34px}
  .detail-grid article{min-height:0}
  .proposal{padding:30px 28px}
  .footer-brand img{width:168px}
}
@media(max-width:620px){
  .services-detail{padding-top:40px;padding-bottom:28px}
  .services-title{margin-bottom:24px}
  .detail-grid{gap:12px}
  .detail-grid article{padding:20px 19px 18px}
  .select-card{min-height:82px}
  .proposal{margin-top:0;padding:25px 20px}
  .proposal .trust{gap:6px}
  .proposal .trust b{font-size:9px;padding:5px 8px}
  .site-footer{padding-top:28px;padding-bottom:30px}
  .footer-brand img{width:158px}
}