.service-page {
  background: var(--white);
}

.case-study-gallery {
  padding: 88px var(--page) 104px;
  background: var(--paper);
  border-top: 1px solid rgba(20, 20, 15, .16);
  border-bottom: 1px solid rgba(20, 20, 15, .16);
}

.case-study-gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  max-width: 1160px;
  margin: 0 auto 34px;
}

.case-study-gallery-head span,
.case-study-gallery figcaption {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-study-gallery-head h2 {
  max-width: 650px;
  margin: 9px 0 0;
  font-size: clamp(38px, 5vw, 70px);
  line-height: .95;
  letter-spacing: -.055em;
}

.case-study-gallery-head > p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.case-study-gallery-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .32fr);
  gap: 18px;
  max-width: 1160px;
  margin: 0 auto;
}

.case-study-gallery figure {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(20, 20, 15, .22);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 10px 12px 0 rgba(20, 20, 15, .07);
}

.case-study-gallery img {
  display: block;
  width: 100%;
  height: clamp(310px, 42vw, 610px);
  border-radius: 8px;
  object-fit: cover;
  object-position: top;
}

.case-study-gallery figure:last-child img { object-fit: contain; background: #ecebe4; }
.case-study-gallery figcaption { display: flex; justify-content: space-between; gap: 14px; padding: 13px 4px 3px; }
.case-study-gallery figcaption i { color: var(--ink); font-style: normal; }

.automation-page .service-hero h1 span,
.automation-page .service-kicker,
.automation-page .breadcrumbs li + li::before {
  color: var(--red);
}

.automation-page .service-hero::after {
  background: var(--red);
}

.automation-console {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 245, .24);
  border-radius: 16px;
  background: rgba(12, 12, 9, .82);
  box-shadow: 22px 24px 0 rgba(240, 62, 40, .12);
  transform: rotate(1deg);
}

.automation-console-head,
.automation-console-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 253, 245, .13);
  color: rgba(255, 253, 245, .48);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.automation-console-head i { color: var(--red); }
.automation-console-foot { border-top: 1px solid rgba(255, 253, 245, .13); border-bottom: 0; }
.automation-console-foot strong { color: rgba(255, 253, 245, .8); }

.automation-route-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(255, 253, 245, .13);
}

.automation-route-controls button {
  display: grid;
  gap: 7px;
  min-height: 84px;
  padding: 17px;
  border: 0;
  border-right: 1px solid rgba(255, 253, 245, .13);
  background: transparent;
  color: rgba(255, 253, 245, .5);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.automation-route-controls button:last-child { border-right: 0; }
.automation-route-controls button span { color: var(--red); font-size: 9px; }
.automation-route-controls button:is(:hover, :focus-visible),
.automation-route-controls button.is-active { background: rgba(240, 62, 40, .12); color: var(--white); }

.automation-flow {
  min-height: 380px;
  padding: 48px 30px 30px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 54px 100%,
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 100% 54px;
}

.automation-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.automation-steps span { padding: 17px 8px; border: 1px solid rgba(240,62,40,.6); border-radius: 999px; color: var(--white); font-size: 9px; font-weight: 800; text-align: center; text-transform: uppercase; }
.automation-steps i { color: var(--red); font-style: normal; }
.automation-flow article { max-width: 390px; margin: 78px auto 0; padding: 24px; border-left: 3px solid var(--red); background: rgba(255,253,245,.05); }
.automation-flow article small { color: var(--red); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.automation-flow article strong { display: block; margin: 10px 0; color: var(--white); font-size: 24px; line-height: 1.05; }
.automation-flow article p { margin: 0; color: rgba(255,253,245,.56); font-size: 12px; line-height: 1.55; }
.automation-flow.is-switching article { animation: automationSwitch 360ms ease; }

@keyframes automationSwitch {
  0% { opacity: .2; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.pricing-page .service-hero h1 span,
.pricing-page .service-kicker,
.pricing-page .breadcrumbs li + li::before { color: var(--lime); }

.price-dial { position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(255,253,245,.25); border-radius: 50% 50% 16px 16px; background: rgba(255,253,245,.035); box-shadow: 20px 24px 0 rgba(202,255,32,.1); }
.price-dial-head, .price-dial-foot { display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:0 22px; border-bottom:1px solid rgba(255,253,245,.14); color:rgba(255,253,245,.45); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.price-dial-head i { color:var(--lime); }
.price-dial-foot { border-top:1px solid rgba(255,253,245,.14); border-bottom:0; justify-content:center; text-align:center; }
.price-dial-ring { display:grid; place-content:center; width:min(330px,75%); aspect-ratio:1; margin:42px auto 22px; border:1px solid rgba(202,255,32,.7); border-radius:50%; box-shadow:0 0 0 24px rgba(202,255,32,.04), 0 0 0 48px rgba(202,255,32,.025); text-align:center; }
.price-dial-ring span { color:var(--lime); font-size:10px; font-weight:800; }
.price-dial-ring strong { display:block; color:var(--white); font-size:clamp(54px,6vw,82px); line-height:1; letter-spacing:-.07em; }
.price-dial-ring small { margin-top:8px; color:rgba(255,253,245,.45); font-size:8px; font-weight:800; letter-spacing:.1em; }
.price-dial-scale { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:min(420px,86%); margin:0 auto 34px; }
.price-dial-scale button { display:grid; gap:9px; min-width:0; padding:8px 4px; border:0; background:transparent; color:rgba(255,253,245,.42); font:inherit; font-size:8px; font-weight:800; text-transform:uppercase; cursor:pointer; transition:color 180ms ease; }
.price-dial-scale button i { width:100%; height:4px; background:rgba(255,253,245,.16); transition:background 180ms ease, transform 180ms ease; }
.price-dial-scale button:is(:hover,:focus-visible), .price-dial-scale button.is-active { color:var(--white); }
.price-dial-scale button:is(:hover,:focus-visible) i, .price-dial-scale button.is-active i { background:var(--lime); transform:scaleY(1.5); }

.price-comparator { padding:128px var(--page); background:var(--paper); }
.price-selector { display:grid; grid-template-columns:minmax(250px,.42fr) minmax(0,1fr); max-width:1160px; margin:72px auto 0; border:1px solid var(--ink); box-shadow:16px 16px 0 var(--lime); }
.price-selector-tabs { display:grid; background:var(--ink); }
.price-selector-tabs button { display:flex; justify-content:space-between; align-items:center; min-height:112px; padding:24px; border:0; border-bottom:1px solid rgba(255,253,245,.14); background:transparent; color:rgba(255,253,245,.48); font:inherit; font-size:19px; font-weight:800; text-align:left; cursor:pointer; }
.price-selector-tabs button span { font-size:11px; }
.price-selector-tabs button:is(:hover,:focus-visible), .price-selector-tabs button[aria-selected="true"] { background:var(--lime); color:var(--ink); }
.price-selector-panel { padding:38px; background:var(--white); }
.price-selector-panel header { display:flex; justify-content:space-between; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.1em; }
.price-selector-panel header i { color:var(--ink); }
.price-selector-summary { display:grid; grid-template-columns:.7fr 1fr; gap:34px; align-items:end; margin:46px 0 34px; padding-bottom:30px; border-bottom:1px solid var(--line); }
.price-selector-summary small { display:block; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.price-selector-summary strong { display:block; font-size:clamp(52px,7vw,84px); line-height:.9; letter-spacing:-.07em; }
.price-selector-summary h3 { margin:0 0 10px; font-size:38px; }
.price-selector-summary p { margin:0; color:var(--muted); line-height:1.55; }
.price-selector-panel ul { display:grid; grid-template-columns:repeat(2,1fr); gap:14px 26px; margin:0 0 34px; padding:0; list-style:none; }
.price-selector-panel li { position:relative; padding-left:18px; color:var(--muted); font-size:13px; font-weight:700; }
.price-selector-panel li::before { content:""; position:absolute; top:.45em; left:0; width:7px; height:7px; border-radius:50%; background:var(--lime); }
.price-selector-panel > a { display:flex; justify-content:space-between; padding:18px 20px; background:var(--ink); color:var(--white); font-weight:800; }

.studio-page .service-hero h1 span,
.studio-page .service-kicker,
.studio-page .breadcrumbs li + li::before { color:var(--lime); }

.studio-map { position:relative; z-index:2; overflow:hidden; border:1px solid rgba(255,253,245,.24); border-radius:16px; background:rgba(255,253,245,.035); box-shadow:22px 24px 0 rgba(202,255,32,.09); transform:rotate(1deg); }
.studio-map-head, .studio-map-foot { display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:0 20px; border-bottom:1px solid rgba(255,253,245,.14); color:rgba(255,253,245,.44); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.studio-map-head i { color:var(--lime); }
.studio-map-foot { border-top:1px solid rgba(255,253,245,.14); border-bottom:0; }
.studio-map-foot strong { color:rgba(255,253,245,.8); }
.studio-map-stage { position:relative; min-height:480px; background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 100%,linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 64px; }
.studio-map-ring { position:absolute; inset:14% 20%; border:1px solid rgba(202,255,32,.32); border-radius:50%; }
.studio-map-ring::before, .studio-map-ring::after { content:""; position:absolute; inset:16%; border:1px dashed rgba(255,253,245,.14); border-radius:50%; }
.studio-map-ring::after { inset:-12%; border-style:solid; opacity:.35; }
.studio-map-center { position:absolute; top:50%; left:50%; display:grid; place-items:center; width:148px; aspect-ratio:1; border:1px solid var(--lime); border-radius:50%; background:var(--ink); translate:-50% -50%; box-shadow:0 0 0 18px rgba(202,255,32,.05); }
.studio-map-center span { color:var(--lime); font-size:30px; font-weight:800; }
.studio-map-center strong { color:var(--white); font-size:16px; }
.studio-map-center small { color:rgba(255,253,245,.4); font-size:7px; font-weight:800; letter-spacing:.12em; }
.studio-map-node { position:absolute; display:grid; gap:5px; min-width:104px; padding:13px; border:1px solid rgba(255,253,245,.22); border-radius:10px; background:rgba(20,20,15,.92); color:var(--white); }
.studio-map-node small { color:var(--lime); font-size:8px; font-weight:800; }
.studio-map-node strong { font-size:11px; }
.studio-map-node-web { top:12%; left:8%; }
.studio-map-node-code { top:16%; right:7%; }
.studio-map-node-seo { bottom:14%; left:9%; }
.studio-map-node-system { right:8%; bottom:11%; }

.studio-method-grid { grid-template-columns:repeat(4,1fr); }
.studio-facts { padding:128px var(--page); background:var(--paper); }
.studio-facts-list { max-width:1100px; margin:72px auto 0; border-top:1px solid var(--ink); }
.studio-facts-list > div { display:grid; grid-template-columns:minmax(130px,.35fr) 1fr; gap:40px; padding:24px 0; border-bottom:1px solid var(--line); }
.studio-facts-list dt { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.studio-facts-list dd { margin:0; font-size:clamp(18px,2vw,26px); font-weight:700; line-height:1.25; }
.studio-project-list li { grid-template-columns:56px 1fr auto; }
.studio-project-list a { align-self:center; padding:12px 16px; border:1px solid var(--line); border-radius:999px; font-size:10px; font-weight:800; transition:background 180ms ease,color 180ms ease; }
.studio-project-list a:hover { background:var(--ink); color:var(--white); }
.studio-portfolio-link { display:flex; justify-content:flex-end; max-width:1100px; margin:32px auto 0; }
.studio-portfolio-link a { display:inline-flex; gap:30px; align-items:center; padding:16px 20px; border-bottom:1px solid var(--ink); font-weight:800; }

.case-study-page { --case-accent:var(--violet); }
.odisea-case-page { --case-accent:var(--lime); }
.repup-case-page { --case-accent:var(--blue); }
.mundial-case-page { --case-accent:var(--red); }
.case-study-page .service-hero h1 span,
.case-study-page .service-kicker,
.case-study-page .breadcrumbs li + li::before { color:var(--case-accent); }
.case-study-page .service-hero::after { background:var(--case-accent); }

.case-study-console { position:relative; z-index:2; overflow:hidden; border:1px solid rgba(255,253,245,.24); border-radius:16px; background:rgba(255,253,245,.035); box-shadow:22px 24px 0 color-mix(in srgb,var(--case-accent) 14%,transparent); transform:rotate(1deg); }
.case-study-console-head, .case-study-console-foot { display:flex; justify-content:space-between; align-items:center; min-height:56px; padding:0 20px; border-bottom:1px solid rgba(255,253,245,.14); color:rgba(255,253,245,.44); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.case-study-console-head i { color:var(--case-accent); }
.case-study-console-foot { border-top:1px solid rgba(255,253,245,.14); border-bottom:0; }
.case-study-console-foot strong { color:rgba(255,253,245,.8); }
.case-study-console-stage { position:relative; min-height:470px; padding:48px 34px; background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/62px 100%,linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 62px; }
.case-study-console-stage > small { color:#d9355a; font-size:8px; font-weight:800; letter-spacing:.12em; }
.case-study-console-stage > strong { position:relative; z-index:2; display:block; margin-top:35px; color:var(--white); font-size:clamp(58px,6vw,86px); line-height:.82; letter-spacing:-.08em; }
.case-study-products { position:absolute; right:7%; bottom:28%; display:flex; gap:12px; align-items:end; }
.case-study-products i { width:52px; height:82px; border:1px solid var(--case-accent); border-radius:30px 30px 8px 8px; background:color-mix(in srgb,var(--case-accent) 12%,transparent); }
.case-study-products i:nth-child(2) { height:116px; background:var(--case-accent); }
.case-study-products i:nth-child(3) { height:68px; }
.case-study-route { position:absolute; right:0; bottom:0; left:0; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:8px; align-items:center; padding:19px 22px; border-top:1px solid rgba(255,253,245,.14); color:rgba(255,253,245,.62); font-size:8px; font-weight:800; text-align:center; text-transform:uppercase; }
.case-study-route i { color:var(--case-accent); font-style:normal; }

.odisea-bars { position:absolute; right:9%; bottom:28%; display:flex; gap:8px; align-items:end; height:150px; }
.odisea-bars i { width:28px; height:45%; border:1px solid var(--case-accent); background:color-mix(in srgb,var(--case-accent) 8%,transparent); }
.odisea-bars i:nth-child(2) { height:76%; }
.odisea-bars i:nth-child(3) { height:100%; background:var(--case-accent); }
.odisea-bars i:nth-child(4) { height:62%; }
.repup-dashboard { position:absolute; right:7%; bottom:27%; display:grid; grid-template-columns:64px 64px; gap:9px; padding:14px; border:1px solid rgba(255,253,245,.2); border-radius:12px; background:rgba(20,20,15,.8); }
.repup-dashboard i { grid-row:span 3; border-radius:7px; background:var(--case-accent); }
.repup-dashboard span { height:34px; border:1px solid color-mix(in srgb,var(--case-accent) 60%,transparent); border-radius:7px; }
.mundial-score { position:absolute; right:6%; bottom:29%; display:flex; align-items:center; gap:15px; color:var(--white); }
.mundial-score > span { display:grid; place-items:center; width:100px; aspect-ratio:1; border:1px solid var(--case-accent); border-radius:50%; font-size:38px; font-weight:800; }
.mundial-score small { color:rgba(255,253,245,.45); font-size:7px; letter-spacing:.1em; }
.mundial-score > i { color:var(--case-accent); font-style:normal; }

.case-study-context { padding:128px var(--page); background:var(--paper); }
.case-study-context-grid { display:grid; grid-template-columns:repeat(3,1fr); max-width:1180px; margin:72px auto 0; border-top:1px solid var(--ink); }
.case-study-context-grid article { min-height:310px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.case-study-context-grid article:last-child { border-right:0; }
.case-study-context-grid span { color:var(--case-accent); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.case-study-context-grid h3 { margin:55px 0 18px; font-size:clamp(22px,2.3vw,34px); line-height:1.05; }
.case-study-context-grid p { margin:0; color:var(--muted); line-height:1.6; }
.case-study-system-grid { grid-template-columns:repeat(3,1fr); }

.case-study-evidence { padding:128px var(--page); background:var(--white); }
.case-study-ranking { max-width:1080px; margin:72px auto 0; border:1px solid var(--ink); box-shadow:14px 14px 0 var(--case-accent); }
.case-study-ranking header { display:flex; justify-content:space-between; gap:20px; padding:18px 22px; background:var(--ink); color:rgba(255,253,245,.58); font-size:8px; font-weight:800; letter-spacing:.1em; }
.case-study-ranking header i { color:var(--case-accent); }
.case-study-ranking ol { margin:0; padding:0; list-style:none; }
.case-study-ranking li { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; min-height:112px; padding:22px; border-bottom:1px solid var(--line); }
.case-study-ranking li span { display:grid; gap:8px; }
.case-study-ranking li small { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.case-study-ranking li strong { font-size:clamp(19px,2.2vw,29px); }
.case-study-ranking li b { color:var(--case-accent); font-size:clamp(28px,4vw,54px); letter-spacing:-.06em; }
.case-study-ranking > p { margin:0; padding:20px 22px; color:var(--muted); background:var(--paper); font-size:11px; line-height:1.6; }

.case-study-pages { padding:128px var(--page); background:var(--paper); }
.case-study-pages .related-links { max-width:1100px; margin:72px auto 0; }
.case-public-link { max-width:920px; margin:72px auto 0; }
.case-public-link a { display:flex; justify-content:space-between; align-items:center; min-height:150px; padding:28px; border:1px solid var(--ink); box-shadow:12px 12px 0 var(--case-accent); }
.case-public-link a > span { display:grid; gap:12px; }
.case-public-link small { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.1em; }
.case-public-link strong { font-size:clamp(24px,4vw,44px); }
.case-public-link i { font-size:34px; font-style:normal; }
.case-study-byline { display:grid; grid-template-columns:2fr 1fr 1fr; gap:1px; padding:0 var(--page) 96px; background:var(--paper); }
.case-study-byline > div { display:grid; gap:8px; padding:20px; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.case-study-byline span { color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.1em; }
.case-study-byline strong { font-size:12px; }

.service-page main {
  overflow: hidden;
}

.service-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .72fr);
  gap: clamp(44px, 7vw, 112px);
  align-items: center;
  min-height: 100svh;
  padding: 148px var(--page) 76px;
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
}

.service-hero::before {
  content: "";
  position: absolute;
  inset: 98px 16px 18px;
  z-index: -3;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 253, 245, .035) 1px, transparent 1px) 0 0 / 82px 100%,
    linear-gradient(rgba(255, 253, 245, .035) 1px, transparent 1px) 0 0 / 100% 82px,
    var(--ink);
  box-shadow: 0 34px 90px rgba(20, 20, 15, .18);
}

.service-hero::after {
  content: "";
  position: absolute;
  top: 15%;
  right: 19%;
  z-index: -2;
  width: min(560px, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
  opacity: .075;
  filter: blur(110px);
}

.breadcrumbs {
  position: absolute;
  top: 116px;
  left: var(--page);
  z-index: 3;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.breadcrumbs ol {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 0;
  color: rgba(255, 253, 245, .4);
  list-style: none;
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 9px;
  color: var(--lime);
}

.breadcrumbs a {
  transition: color 180ms ease;
}

.breadcrumbs a:hover {
  color: var(--white);
}

.service-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 860px;
}

.service-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 30px;
  color: var(--lime);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.service-kicker i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 6px rgba(202, 255, 32, .1);
  animation: pulse 2s ease-in-out infinite;
}

.service-hero h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(58px, 6.8vw, 108px);
  line-height: .86;
  letter-spacing: -.075em;
}

.service-hero h1 span {
  display: inline;
  color: var(--lime);
}

.service-lead {
  max-width: 650px;
  margin: 34px 0 0;
  color: rgba(255, 253, 245, .64);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
}

.service-hero-actions {
  display: flex;
  gap: 22px;
  align-items: center;
  margin-top: 34px;
}

.service-hero .button {
  width: auto;
}

.service-text-link {
  display: inline-flex;
  gap: 28px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 253, 245, .25);
  color: rgba(255, 253, 245, .72);
  font-size: 12px;
  font-weight: 800;
  transition: color 180ms ease, border-color 180ms ease;
}

.service-text-link:hover {
  color: var(--white);
  border-color: var(--lime);
}

.service-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 700px;
  margin: 48px 0 0;
  border-top: 1px solid rgba(255, 253, 245, .16);
}

.service-hero-facts > div {
  padding: 17px 18px 0 0;
}

.service-hero-facts > div + div {
  padding-left: 18px;
  border-left: 1px solid rgba(255, 253, 245, .16);
}

.service-hero-facts dt {
  margin-bottom: 6px;
  color: rgba(255, 253, 245, .38);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.service-hero-facts dd {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

.service-blueprint {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 245, .28);
  border-radius: 14px;
  background: rgba(255, 253, 245, .035);
  box-shadow: 24px 28px 0 rgba(202, 255, 32, .08);
  transform: rotate(1.4deg);
}

.blueprint-head,
.blueprint-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 253, 245, .14);
  color: rgba(255, 253, 245, .44);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.blueprint-head i {
  color: var(--lime);
  font-style: normal;
}

.blueprint-stage {
  position: relative;
  min-height: 480px;
  background:
    radial-gradient(circle at 50% 51%, rgba(202, 255, 32, .11), transparent 24%),
    linear-gradient(90deg, rgba(255, 253, 245, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255, 253, 245, .045) 1px, transparent 1px) 0 0 / 48px 48px;
}

.blueprint-stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.blueprint-route {
  fill: none;
  stroke: rgba(255, 253, 245, .18);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
}

.blueprint-route-live {
  stroke: var(--lime);
  stroke-dasharray: 46 820;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(202, 255, 32, .65));
  animation: blueprintSignal 5s linear infinite;
}

.blueprint-node {
  position: absolute;
  display: grid;
  width: 116px;
  min-height: 80px;
  padding: 13px;
  border: 1px solid rgba(255, 253, 245, .18);
  border-radius: 9px;
  background: rgba(20, 20, 15, .88);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .14);
}

.blueprint-node small {
  color: var(--lime);
  font-size: 7px;
  font-weight: 800;
}

.blueprint-node strong {
  align-self: end;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 16px;
}

.blueprint-node span {
  color: rgba(255, 253, 245, .4);
  font-size: 8px;
}

.node-home { top: 9%; left: 5%; }
.node-about { top: 8%; left: 50%; translate: -50%; }
.node-services { top: 38%; right: 4%; }
.node-proof { bottom: 8%; left: 50%; translate: -50%; }
.node-contact { bottom: 8%; left: 5%; }

.blueprint-core {
  position: absolute;
  top: 47%;
  left: 50%;
  display: grid;
  width: 88px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--lime);
  border-radius: 50%;
  color: var(--ink);
  background: var(--lime);
  font: 800 10px/1.1 "Space Grotesk", system-ui, sans-serif;
  text-align: center;
  translate: -50% -50%;
  box-shadow: 0 0 0 14px rgba(202, 255, 32, .06);
}

.blueprint-foot {
  border-top: 1px solid rgba(255, 253, 245, .14);
  border-bottom: 0;
}

.blueprint-foot strong {
  color: var(--white);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.direct-answer {
  display: grid;
  grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr);
  gap: clamp(44px, 8vw, 140px);
  padding: 72px var(--page);
  border-bottom: 1px solid var(--line);
  background: var(--lime);
}

.direct-answer > p,
.service-section-heading > p,
.plan-intro > p:first-of-type,
.related-services > div:first-child > p {
  color: rgba(20, 20, 15, .55);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.direct-answer h2 {
  margin: 0 0 16px;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -.055em;
}

.direct-answer div > p {
  max-width: 880px;
  margin: 0;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.6;
}

.service-fit,
.service-process,
.service-faq {
  padding: 120px var(--page);
}

.service-section-heading {
  max-width: 960px;
}

.service-section-heading > p {
  margin: 62px 0 16px;
  color: var(--blue);
}

.service-section-heading h2 {
  margin: 0;
  font-size: clamp(50px, 6vw, 92px);
  line-height: .9;
  letter-spacing: -.07em;
}

.service-section-heading h2 em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1.3px currentColor;
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 76px;
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  background: var(--line);
}

.fit-grid article {
  min-height: 360px;
  padding: 30px;
  background: var(--white);
  transition: background 240ms ease, transform 280ms var(--ease);
}

.fit-grid article:hover {
  position: relative;
  z-index: 1;
  background: var(--paper);
  transform: translateY(-5px);
}

.fit-grid article > span,
.include-grid article > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 8px;
  font-weight: 800;
}

.fit-grid h3 {
  margin: 90px 0 20px;
  font-size: clamp(25px, 2.4vw, 38px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.fit-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.service-includes {
  padding: 120px var(--page);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(255, 253, 245, .04) 1px, transparent 1px) 0 0 / 84px 84px,
    var(--ink);
}

.service-section-heading-light > p {
  color: var(--lime);
}

.include-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 76px;
}

.include-grid article {
  min-height: 260px;
  padding: 26px;
  border: 1px solid rgba(255, 253, 245, .15);
  border-radius: 11px;
  background: rgba(255, 253, 245, .035);
  transition: border-color 220ms ease, background 220ms ease, translate 280ms var(--ease);
}

.include-grid article:hover {
  border-color: var(--lime);
  background: rgba(202, 255, 32, .045);
  translate: 0 -5px;
}

.include-grid article > span {
  border-color: rgba(255, 253, 245, .3);
  color: var(--lime);
}

.include-grid h3 {
  margin: 60px 0 13px;
  font-size: 24px;
  letter-spacing: -.035em;
}

.include-grid h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.include-grid h3 a:hover,
.include-grid h3 a:focus-visible {
  border-bottom-color: currentColor;
}

.include-grid p {
  margin: 0;
  color: rgba(255, 253, 245, .54);
  font-size: 12px;
  line-height: 1.6;
}

.scope-note {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 36px;
  margin-top: 18px;
  padding: 22px 26px;
  border: 1px solid rgba(255, 253, 245, .14);
  border-radius: 11px;
  background: rgba(255, 253, 245, .035);
}

.scope-note span {
  color: var(--lime);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.scope-note p {
  margin: 0;
  color: rgba(255, 253, 245, .58);
  font-size: 12px;
  line-height: 1.6;
}

.service-process-list {
  margin: 76px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.service-process-list li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 100px;
  gap: 34px;
  align-items: center;
  min-height: 142px;
  padding: 24px 6px;
  border-bottom: 1px solid var(--line);
  transition: padding 280ms var(--ease), background 220ms ease;
}

.service-process-list li:hover {
  padding-inline: 18px;
  background: var(--paper);
}

.service-process-list li > span {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}

.service-process-list h3 {
  margin: 0 0 8px;
  font-size: clamp(25px, 3vw, 40px);
  letter-spacing: -.045em;
}

.service-process-list p {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.service-process-list small {
  justify-self: end;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.service-plan {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(440px, .6fr);
  gap: clamp(60px, 10vw, 150px);
  align-items: center;
  padding: 120px var(--page);
  color: var(--white);
  background: var(--blue);
}

.plan-intro h2 {
  margin: 20px 0;
  font-size: clamp(58px, 7vw, 102px);
  line-height: .86;
  letter-spacing: -.075em;
}

.plan-intro > p:first-of-type {
  margin: 60px 0 0;
  color: rgba(255, 253, 245, .62);
}

.plan-intro > p:last-child {
  max-width: 650px;
  margin: 30px 0 0;
  color: rgba(255, 253, 245, .68);
  font-size: 17px;
  line-height: 1.6;
}

.plan-card {
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 14px;
  color: var(--ink);
  background: var(--white);
  box-shadow: 18px 18px 0 rgba(20, 20, 15, .22);
}

.plan-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
}

.plan-card header i {
  padding: 7px 10px;
  border-radius: 99px;
  color: var(--ink);
  background: var(--lime);
  font-style: normal;
}

.plan-price {
  display: grid;
  padding: 30px 24px 24px;
}

.plan-price small,
.plan-price span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.plan-price strong {
  margin: 5px 0;
  font: 700 clamp(56px, 6vw, 86px)/.95 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -.07em;
}

.plan-card ul {
  margin: 0;
  padding: 0 24px;
  border-top: 1px solid var(--line);
  list-style: none;
}

.plan-card li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.plan-card li::before {
  content: "↳";
  margin-right: 10px;
  color: var(--blue);
}

.plan-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  margin: 24px 24px 10px;
  padding: 0 10px 0 20px;
  border-radius: 99px;
  color: var(--ink);
  background: var(--lime);
  font-size: 12px;
  font-weight: 800;
  transition: translate 220ms var(--ease), box-shadow 220ms ease;
}

.plan-card > a span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--ink);
}

.plan-card > a:hover {
  translate: 0 -3px;
  box-shadow: 0 12px 28px rgba(20, 20, 15, .12);
}

.plan-card > p {
  margin: 0;
  padding: 0 24px 24px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.service-faq {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(460px, 1fr);
  gap: clamp(70px, 10vw, 160px);
  align-items: start;
  background: var(--paper);
}

.service-faq .service-section-heading {
  position: sticky;
  top: 110px;
}

.service-faq .faq {
  box-shadow: 14px 14px 0 var(--lime);
}

.related-services {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(420px, 1fr);
  gap: clamp(60px, 10vw, 160px);
  align-items: start;
  padding: 120px var(--page);
}

.related-services h2 {
  margin: 20px 0 0;
  font-size: clamp(50px, 6vw, 90px);
  line-height: .9;
  letter-spacing: -.07em;
}

.related-services h2 span {
  color: transparent;
  -webkit-text-stroke: 1.3px var(--ink);
}

.related-links {
  border-top: 1px solid var(--ink);
}

.related-links a {
  display: grid;
  grid-template-columns: 42px 1fr 30px;
  gap: 18px;
  align-items: center;
  min-height: 112px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding 260ms var(--ease), background 220ms ease;
}

.related-links a:hover {
  padding-inline: 14px;
  background: var(--paper);
}

.related-links > a > span {
  color: var(--blue);
  font-size: 8px;
  font-weight: 800;
}

.related-links strong,
.related-links small {
  display: block;
}

.related-links strong {
  margin-bottom: 7px;
  font: 700 24px/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -.035em;
}

.related-links small {
  color: var(--muted);
  font-size: 11px;
}

.related-links i {
  justify-self: end;
  font-style: normal;
  transition: translate 220ms var(--ease);
}

.related-links a:hover i {
  translate: 4px -4px;
}

.service-contact {
  margin-top: 0;
}

.ecommerce-page .service-kicker,
.ecommerce-page .blueprint-head i {
  color: var(--violet);
}

.ecommerce-page .service-kicker i {
  box-shadow: 0 0 0 6px rgba(155, 140, 255, .12);
}

.ecommerce-page .service-hero h1 span {
  color: var(--violet);
}

.ecommerce-page .service-hero::after {
  background: var(--violet);
}

.ecommerce-page .service-blueprint {
  box-shadow: 24px 28px 0 rgba(155, 140, 255, .1);
}

.ecommerce-page .blueprint-route-live {
  stroke: var(--violet);
  filter: drop-shadow(0 0 7px rgba(155, 140, 255, .7));
}

.ecommerce-page .blueprint-node small {
  color: var(--violet);
}

.ecommerce-page .blueprint-core {
  border-color: var(--violet);
  background: var(--violet);
  box-shadow: 0 0 0 14px rgba(155, 140, 255, .07);
}

.ecommerce-page .direct-answer {
  background: var(--violet);
}

.ecommerce-page .service-section-heading-light > p,
.ecommerce-page .scope-note span {
  color: var(--violet);
}

.ecommerce-page .include-grid article:hover {
  border-color: var(--violet);
  background: rgba(155, 140, 255, .05);
}

.ecommerce-page .include-grid article > span {
  color: var(--violet);
}

.ecommerce-page .service-plan {
  background: var(--violet);
}

.ecommerce-page .plan-card header i,
.ecommerce-page .plan-card > a {
  background: var(--lime);
}

.ecommerce-page .service-faq .faq {
  box-shadow: 14px 14px 0 var(--violet);
}

.landing-page .service-kicker {
  color: var(--red);
}

.landing-page .service-kicker i {
  box-shadow: 0 0 0 6px rgba(240, 62, 40, .12);
}

.landing-page .service-hero h1 span {
  color: var(--red);
}

.landing-page .service-hero::after {
  background: var(--red);
}

.conversion-lab {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 245, .28);
  border-radius: 14px;
  background: rgba(255, 253, 245, .035);
  box-shadow: 24px 28px 0 rgba(240, 62, 40, .1);
  transform: rotate(-.8deg);
}

.conversion-lab-head,
.conversion-lab-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 0 20px;
  color: rgba(255, 253, 245, .44);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.conversion-lab-head {
  border-bottom: 1px solid rgba(255, 253, 245, .14);
}

.conversion-lab-head i {
  padding: 7px 10px;
  border: 1px solid rgba(240, 62, 40, .4);
  border-radius: 99px;
  color: var(--red);
  background: rgba(240, 62, 40, .08);
  font-style: normal;
}

.conversion-lab-stage {
  position: relative;
  min-height: 480px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 62, 40, .11), transparent 23%),
    linear-gradient(90deg, rgba(255, 253, 245, .04) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255, 253, 245, .04) 1px, transparent 1px) 0 0 / 48px 48px;
}

.conversion-flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.conversion-flow path {
  fill: none;
  stroke: rgba(255, 253, 245, .2);
  stroke-width: 1.5;
  stroke-dasharray: 4 8;
  animation: conversionCurrent 9s linear infinite;
}

.conversion-flow .conversion-flow-out {
  stroke: var(--red);
  stroke-width: 2;
  stroke-dasharray: 48 180;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(240, 62, 40, .7));
  animation-duration: 4.5s;
}

.conversion-inputs {
  position: absolute;
  top: 14%;
  left: 6%;
  z-index: 2;
  display: grid;
  gap: 16px;
  width: 118px;
}

.conversion-inputs span {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  min-height: 56px;
  padding: 0 11px;
  border: 1px solid rgba(255, 253, 245, .17);
  border-radius: 8px;
  background: rgba(20, 20, 15, .86);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  animation: conversionInput 3.8s ease-in-out var(--input-delay) infinite;
}

.conversion-inputs i {
  color: var(--red);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.conversion-inputs b {
  font: 700 11px/1 "Space Grotesk", system-ui, sans-serif;
}

.conversion-focus {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: 108px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--red);
  border-radius: 50%;
  color: var(--white);
  background: var(--ink);
  text-align: center;
  translate: -50% -50%;
  box-shadow: 0 0 0 18px rgba(240, 62, 40, .07), 0 0 46px rgba(240, 62, 40, .12);
}

.conversion-focus::before,
.conversion-focus::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(240, 62, 40, .36);
  border-radius: 50%;
}

.conversion-focus::before {
  inset: -31px;
  border-style: dashed;
  animation: conversionOrbit 18s linear infinite;
}

.conversion-focus::after {
  inset: 15px;
  border-color: rgba(255, 253, 245, .12);
}

.conversion-focus small,
.conversion-focus strong {
  position: absolute;
  z-index: 1;
}

.conversion-focus small {
  top: 23px;
  color: rgba(255, 253, 245, .42);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.conversion-focus strong {
  font: 800 14px/1.02 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -.025em;
}

.conversion-focus i {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  transform: translateX(-50%);
  box-shadow: 0 0 0 6px rgba(240, 62, 40, .12);
}

.conversion-action {
  position: absolute;
  top: 50%;
  right: 5%;
  z-index: 3;
  display: grid;
  width: 126px;
  min-height: 132px;
  padding: 15px;
  border-radius: 10px;
  color: var(--ink);
  background: var(--red);
  translate: 0 -50%;
  box-shadow: 14px 14px 0 rgba(240, 62, 40, .12);
  transition: translate 260ms var(--ease), box-shadow 260ms ease, background 200ms ease;
}

.conversion-action:hover {
  background: #ff4935;
  translate: -5px calc(-50% - 5px);
  box-shadow: 20px 20px 0 rgba(240, 62, 40, .15);
}

.conversion-action:active {
  translate: 0 calc(-50% + 2px);
  box-shadow: 8px 8px 0 rgba(240, 62, 40, .12);
}

.conversion-action:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 5px;
}

.conversion-action small {
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.conversion-action strong {
  align-self: end;
  font: 800 19px/.92 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -.055em;
}

.conversion-action > span {
  position: absolute;
  top: 14px;
  right: 15px;
  font-size: 20px;
}

.conversion-score {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.conversion-score span {
  padding: 7px 9px;
  border: 1px solid rgba(255, 253, 245, .14);
  border-radius: 99px;
  color: rgba(255, 253, 245, .42);
  background: rgba(20, 20, 15, .74);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.conversion-score b {
  margin-right: 3px;
  color: var(--red);
}

.conversion-lab-foot {
  border-top: 1px solid rgba(255, 253, 245, .14);
}

.conversion-lab-foot strong {
  color: var(--white);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.landing-page .direct-answer {
  background: var(--red);
}

.landing-page .service-section-heading-light > p,
.landing-page .scope-note span {
  color: var(--red);
}

.landing-page .include-grid article:hover {
  border-color: var(--red);
  background: rgba(240, 62, 40, .05);
}

.landing-page .include-grid article > span {
  color: var(--red);
}

.landing-page .service-plan {
  background: var(--red);
}

.landing-page .plan-card header i,
.landing-page .plan-card > a {
  background: var(--lime);
}

.landing-page .service-faq .faq {
  box-shadow: 14px 14px 0 var(--red);
}

.maintenance-page .service-kicker,
.maintenance-page .care-console-head i {
  color: var(--blue);
}

.maintenance-page .service-kicker i {
  box-shadow: 0 0 0 6px rgba(22, 142, 229, .12);
}

.maintenance-page .service-hero h1 span {
  color: var(--blue);
}

.maintenance-page .service-hero::after {
  background: var(--blue);
}

.maintenance-page .direct-answer,
.maintenance-page .service-plan {
  background: var(--blue);
}

.maintenance-page .service-section-heading-light > p,
.maintenance-page .scope-note span {
  color: #72c4ff;
}

.maintenance-page .include-grid article:hover {
  border-color: var(--blue);
  background: rgba(22, 142, 229, .05);
}

.maintenance-page .include-grid article > span {
  color: #72c4ff;
}

.maintenance-page .plan-card header i,
.maintenance-page .plan-card > a {
  background: var(--lime);
}

.maintenance-page .service-faq .faq {
  box-shadow: 14px 14px 0 var(--blue);
}

.maintenance-include-grid {
  grid-template-columns: repeat(4, 1fr);
}

.care-console {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 245, .28);
  border-radius: 14px;
  background: rgba(255, 253, 245, .035);
  box-shadow: 24px 28px 0 rgba(22, 142, 229, .1);
  transform: rotate(.7deg);
}

.care-console-head,
.care-console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 56px;
  padding: 0 20px;
  color: rgba(255, 253, 245, .44);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.care-console-head {
  border-bottom: 1px solid rgba(255, 253, 245, .14);
}

.care-console-head i {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-style: normal;
}

.care-console-head i::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(22, 142, 229, .1);
  animation: pulse 2s ease-in-out infinite;
}

.care-console-stage {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background:
    radial-gradient(circle at 38% 50%, rgba(22, 142, 229, .13), transparent 27%),
    linear-gradient(90deg, rgba(255, 253, 245, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255, 253, 245, .045) 1px, transparent 1px) 0 0 / 48px 48px;
}

.care-cycle {
  position: absolute;
  top: 50%;
  left: 38%;
  width: 190px;
  aspect-ratio: 1;
  translate: -50% -50%;
}

.care-cycle-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(22, 142, 229, .72);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(22, 142, 229, .035);
  animation: careOrbit 18s linear infinite;
}

.care-cycle-ring::before,
.care-cycle-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.care-cycle-ring::before {
  inset: 22px;
  border: 1px solid rgba(255, 253, 245, .12);
}

.care-cycle-ring::after {
  inset: 53px;
  border: 1px solid var(--blue);
  box-shadow: 0 0 30px rgba(22, 142, 229, .12);
}

.care-cycle-core {
  position: absolute;
  inset: 50%;
  z-index: 2;
  display: grid;
  width: 96px;
  aspect-ratio: 1;
  place-content: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--blue);
  text-align: center;
  translate: -50% -50%;
}

.care-cycle-core small {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
}

.care-cycle-core strong {
  margin-top: 4px;
  font: 800 14px/1 "Space Grotesk", system-ui, sans-serif;
}

.care-node {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 253, 245, .28);
  border-radius: 50%;
  color: var(--blue);
  background: var(--ink);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .2);
  animation: careNode 4s ease-in-out infinite;
}

.care-node-one { top: -15px; left: calc(50% - 15px); }
.care-node-two { top: calc(50% - 15px); right: -15px; animation-delay: -1s; }
.care-node-three { bottom: -15px; left: calc(50% - 15px); animation-delay: -2s; }
.care-node-four { top: calc(50% - 15px); left: -15px; animation-delay: -3s; }

.care-checks {
  position: absolute;
  top: 50%;
  right: 5%;
  display: grid;
  gap: 9px;
  width: 138px;
  margin: 0;
  padding: 0;
  list-style: none;
  translate: 0 -50%;
}

.care-checks li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 2px 8px;
  min-height: 66px;
  padding: 11px;
  border: 1px solid rgba(255, 253, 245, .16);
  border-radius: 8px;
  background: rgba(20, 20, 15, .82);
  transition: border-color 220ms ease, translate 240ms var(--ease);
}

.care-checks li:hover {
  border-color: var(--blue);
  translate: -4px 0;
}

.care-checks span {
  grid-row: 1 / 3;
  color: var(--blue);
  font-size: 7px;
  font-weight: 800;
}

.care-checks strong {
  font: 700 12px/1 "Space Grotesk", system-ui, sans-serif;
}

.care-checks small {
  color: rgba(255, 253, 245, .38);
  font-size: 7px;
}

.care-console-foot {
  border-top: 1px solid rgba(255, 253, 245, .14);
}

.care-console-foot strong {
  color: var(--white);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.redesign-page .service-kicker,
.redesign-page .redesign-console-head i {
  color: var(--lime);
}

.redesign-page .service-kicker i {
  box-shadow: 0 0 0 6px rgba(202, 255, 32, .1);
}

.redesign-page .service-hero h1 span {
  color: var(--lime);
}

.redesign-page .service-hero::after {
  background: var(--blue);
}

.redesign-page .direct-answer {
  background: var(--lime);
}

.redesign-page .service-section-heading-light > p,
.redesign-page .scope-note span {
  color: var(--lime);
}

.redesign-page .include-grid article:hover {
  border-color: var(--blue);
  background: rgba(22, 142, 229, .05);
}

.redesign-page .include-grid article > span {
  color: var(--lime);
}

.redesign-page .service-plan {
  background: linear-gradient(135deg, #0f6da9, var(--blue));
}

.redesign-page .plan-card header i,
.redesign-page .plan-card > a {
  background: var(--lime);
}

.redesign-page .service-faq .faq {
  box-shadow: 14px 14px 0 var(--lime);
}

.redesign-plan-card .plan-price strong {
  font-size: clamp(48px, 5vw, 76px);
  letter-spacing: -.065em;
}

.redesign-console {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 245, .28);
  border-radius: 14px;
  background: rgba(255, 253, 245, .035);
  box-shadow: 24px 28px 0 rgba(22, 142, 229, .1);
  transform: rotate(-.7deg);
}

.redesign-console-head,
.redesign-console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  padding: 0 20px;
  color: rgba(255, 253, 245, .44);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.redesign-console-head {
  border-bottom: 1px solid rgba(255, 253, 245, .14);
}

.redesign-console-head i {
  font-style: normal;
  animation: redesignHint 2s ease-in-out infinite;
}

.redesign-compare {
  position: relative;
  min-height: 480px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 253, 245, .04) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255, 253, 245, .04) 1px, transparent 1px) 0 0 / 48px 48px;
}

.redesign-screen {
  position: absolute;
  inset: 22px;
  overflow: hidden;
  border-radius: 10px;
}

.redesign-screen-label {
  position: absolute;
  top: 18px;
  z-index: 4;
  padding: 7px 9px;
  border-radius: 99px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}

.redesign-before {
  color: #3d3b35;
  background:
    linear-gradient(rgba(61, 59, 53, .07) 1px, transparent 1px) 0 0 / 100% 42px,
    #d8d4c8;
}

.redesign-before .redesign-screen-label {
  right: 18px;
  border: 1px solid rgba(61, 59, 53, .24);
  background: rgba(255, 255, 255, .35);
}

.redesign-after {
  z-index: 2;
  color: var(--white);
  background:
    radial-gradient(circle at 75% 72%, rgba(22, 142, 229, .34), transparent 29%),
    linear-gradient(90deg, rgba(255, 253, 245, .05) 1px, transparent 1px) 0 0 / 54px 54px,
    var(--ink);
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}

.redesign-after .redesign-screen-label {
  left: 18px;
  color: var(--ink);
  background: var(--lime);
}

.old-nav {
  position: absolute;
  top: 23px;
  left: 28px;
  display: flex;
  gap: 10px;
}

.old-nav i {
  width: 48px;
  height: 7px;
  background: rgba(61, 59, 53, .22);
}

.old-title {
  position: absolute;
  top: 102px;
  left: 28px;
  display: grid;
  gap: 9px;
  width: 72%;
}

.old-title i {
  height: 28px;
  background: rgba(61, 59, 53, .28);
}

.old-title i:nth-child(2) { width: 84%; }
.old-title i:nth-child(3) { width: 62%; }

.old-columns {
  position: absolute;
  right: 28px;
  bottom: 74px;
  left: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.old-columns span {
  height: 112px;
  border: 1px solid rgba(61, 59, 53, .18);
  background: rgba(255, 255, 255, .2);
}

.redesign-before > small {
  position: absolute;
  bottom: 30px;
  left: 28px;
  color: rgba(61, 59, 53, .56);
  font-size: 8px;
  font-weight: 800;
}

.new-nav {
  position: absolute;
  top: 20px;
  right: 22px;
  left: 22px;
  display: flex;
  gap: 9px;
  align-items: center;
}

.new-nav b {
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 7px;
  color: var(--ink);
  background: var(--lime);
  font-size: 8px;
}

.new-nav i {
  width: 46px;
  height: 5px;
  margin-left: auto;
  background: rgba(255, 253, 245, .18);
}

.new-nav i + i {
  width: 32px;
  margin-left: 0;
}

.new-copy {
  position: absolute;
  top: 112px;
  left: 28px;
  z-index: 2;
  display: grid;
  justify-items: start;
}

.new-copy small {
  color: var(--lime);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
}

.new-copy strong {
  margin-top: 18px;
  font: 800 clamp(48px, 5.6vw, 78px)/.82 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -.075em;
}

.new-copy > span {
  margin-top: 24px;
  padding: 12px 15px;
  border-radius: 99px;
  color: var(--ink);
  background: var(--lime);
  font-size: 8px;
  font-weight: 800;
}

.new-proof {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: grid;
  width: 118px;
  min-height: 96px;
  padding: 14px;
  border: 1px solid rgba(255, 253, 245, .2);
  border-radius: 9px;
  background: rgba(255, 253, 245, .055);
}

.new-proof i {
  color: var(--blue);
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}

.new-proof b {
  align-self: end;
  font: 700 14px/1 "Space Grotesk", system-ui, sans-serif;
}

.new-proof small {
  color: rgba(255, 253, 245, .38);
  font-size: 7px;
}

.redesign-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  z-index: 5;
  width: 2px;
  background: var(--lime);
  translate: -50% 0;
  box-shadow: 0 0 16px rgba(202, 255, 32, .45);
  pointer-events: none;
}

.redesign-divider i {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 44px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--lime);
  border-radius: 50%;
  color: var(--ink);
  background: var(--white);
  font-size: 16px;
  font-style: normal;
  translate: -50% -50%;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}

.redesign-range {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: .001;
}

.redesign-compare:focus-within .redesign-divider i {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}

.redesign-console-foot {
  border-top: 1px solid rgba(255, 253, 245, .14);
}

.redesign-console-foot > span {
  display: inline-flex;
  gap: 6px;
}

.redesign-console-foot b {
  color: var(--lime);
}

.redesign-console-foot strong {
  color: var(--white);
  font-size: 9px;
  text-transform: none;
  letter-spacing: 0;
}

.local-seo-page .service-kicker,
.local-seo-page .local-console-head i {
  color: var(--blue);
}

.local-seo-page .service-kicker i {
  box-shadow: 0 0 0 6px rgba(22, 142, 229, .12);
}

.local-seo-page .service-hero h1 span {
  color: var(--blue);
}

.local-seo-page .service-hero::after {
  background: var(--blue);
}

.local-seo-page .direct-answer,
.local-seo-page .service-plan {
  background: var(--blue);
}

.local-seo-page .service-section-heading-light > p,
.local-seo-page .scope-note span {
  color: #72c4ff;
}

.local-seo-page .include-grid article:hover {
  border-color: var(--blue);
  background: rgba(22, 142, 229, .05);
}

.local-seo-page .include-grid article > span {
  color: #72c4ff;
}

.local-seo-page .plan-card header i,
.local-seo-page .plan-card > a {
  background: var(--lime);
}

.local-seo-page .service-faq .faq {
  box-shadow: 14px 14px 0 var(--blue);
}

.local-console {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 245, .28);
  border-radius: 14px;
  background: rgba(255, 253, 245, .035);
  box-shadow: 24px 28px 0 rgba(22, 142, 229, .1);
  transform: rotate(.7deg);
}

.local-console-head,
.local-console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 56px;
  padding: 0 20px;
  color: rgba(255, 253, 245, .44);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.local-console-head {
  border-bottom: 1px solid rgba(255, 253, 245, .14);
}

.local-console-head i {
  font-style: normal;
}

.local-console-stage {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 53%, rgba(22, 142, 229, .12), transparent 24%),
    linear-gradient(90deg, rgba(255, 253, 245, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(rgba(255, 253, 245, .045) 1px, transparent 1px) 0 0 / 48px 48px;
}

.local-query {
  position: absolute;
  top: 22px;
  right: 22px;
  left: 22px;
  z-index: 4;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 0 16px;
  border: 1px solid rgba(255, 253, 245, .18);
  border-radius: 9px;
  background: rgba(20, 20, 15, .86);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .14);
}

.local-query small,
.local-query span {
  color: rgba(255, 253, 245, .38);
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.local-query strong {
  font: 700 15px/1 "Space Grotesk", system-ui, sans-serif;
}

.local-query span {
  padding: 7px 9px;
  border-radius: 99px;
  color: var(--ink);
  background: var(--lime);
}

.local-radar {
  position: absolute;
  top: 54%;
  left: 31%;
  width: 190px;
  aspect-ratio: 1;
  border: 1px solid rgba(22, 142, 229, .58);
  border-radius: 50%;
  translate: -50% -50%;
  box-shadow: 0 0 0 30px rgba(22, 142, 229, .04), 0 0 0 61px rgba(22, 142, 229, .025);
}

.local-radar::before,
.local-radar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.local-radar::before {
  inset: 20%;
  border: 1px dashed rgba(255, 253, 245, .18);
  animation: localRadar 14s linear infinite;
}

.local-radar::after {
  top: 50%;
  left: 50%;
  width: 50%;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), transparent);
  transform-origin: left center;
  animation: localScan 5s linear infinite;
}

.local-radar > span {
  position: absolute;
  inset: 50%;
  z-index: 2;
  display: grid;
  width: 82px;
  aspect-ratio: 1;
  place-content: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--blue);
  font: 800 11px/1 "Space Grotesk", system-ui, sans-serif;
  text-align: center;
  translate: -50% -50%;
  box-shadow: 0 0 0 12px rgba(22, 142, 229, .08);
}

.local-radar > i {
  position: absolute;
  z-index: 3;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 6px rgba(202, 255, 32, .1);
  animation: localPoint 3s ease-in-out infinite;
}

.local-radar > i:first-child { top: 15%; right: 19%; }
.local-radar > i:nth-child(2) { right: 6%; bottom: 26%; animation-delay: -1s; }
.local-radar > i:nth-child(3) { bottom: 9%; left: 26%; animation-delay: -2s; }

.local-signal-controls {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.local-signal-controls button {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 0 11px;
  border: 1px solid rgba(255, 253, 245, .16);
  border-radius: 8px;
  color: rgba(255, 253, 245, .56);
  background: rgba(20, 20, 15, .84);
  font: 700 10px/1 "Space Grotesk", system-ui, sans-serif;
  text-align: left;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, translate 220ms var(--ease);
}

.local-signal-controls button:hover,
.local-signal-controls button.is-active {
  border-color: var(--blue);
  color: var(--white);
  background: rgba(22, 142, 229, .14);
  translate: 0 -3px;
}

.local-signal-controls button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

.local-signal-controls span {
  color: var(--blue);
  font-size: 7px;
  font-weight: 800;
}

.local-signal-output {
  position: absolute;
  top: 36%;
  right: 5%;
  z-index: 4;
  display: grid;
  width: 172px;
  min-height: 190px;
  padding: 19px;
  border: 1px solid rgba(255, 253, 245, .2);
  border-radius: 10px;
  background: rgba(20, 20, 15, .9);
  box-shadow: 14px 14px 0 rgba(22, 142, 229, .08);
}

.local-signal-output small {
  color: var(--blue);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
}

.local-signal-output strong {
  align-self: end;
  font: 700 20px/.96 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -.04em;
}

.local-signal-output p {
  margin: 11px 0 0;
  color: rgba(255, 253, 245, .46);
  font-size: 9px;
  line-height: 1.45;
}

.local-signal-output.is-switching {
  animation: localOutput 360ms var(--ease);
}

.local-console-foot {
  border-top: 1px solid rgba(255, 253, 245, .14);
}

.local-console-foot strong {
  color: var(--white);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
}

.local-evidence {
  padding: 120px var(--page);
  background: var(--paper);
}

.local-evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 72px;
}

.local-evidence-grid article {
  min-height: 430px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--white);
  box-shadow: 12px 12px 0 rgba(22, 142, 229, .08);
}

.local-evidence-grid header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.local-evidence-grid header i {
  color: var(--blue);
  font-style: normal;
}

.local-evidence-grid h3 {
  margin: 68px 0 16px;
  font-size: clamp(38px, 4vw, 58px);
  letter-spacing: -.06em;
}

.local-evidence-grid article > p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.local-evidence-grid ul {
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.local-evidence-grid li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}

.local-evidence-grid li b {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 9px;
}

.local-evidence-grid article > a {
  display: inline-flex;
  gap: 24px;
  align-items: center;
  margin-top: 24px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--ink);
  font-size: 10px;
  font-weight: 800;
}

.local-evidence-note {
  max-width: 900px;
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.commerce-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, .78fr);
  gap: clamp(60px, 9vw, 140px);
  align-items: center;
  padding: 120px var(--page);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(255, 253, 245, .04) 1px, transparent 1px) 0 0 / 84px 84px,
    var(--ink);
}

.commerce-case-visual {
  overflow: hidden;
  border: 1px solid rgba(255, 253, 245, .2);
  border-radius: 14px;
  background: #f9e6e9;
  box-shadow: 18px 18px 0 rgba(155, 140, 255, .18);
  transform: rotate(-1.2deg);
}

.commerce-browser {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  color: rgba(43, 32, 34, .55);
  background: #fff8f2;
  font-size: 8px;
  font-weight: 700;
}

.commerce-browser i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(43, 32, 34, .18);
}

.commerce-browser span {
  margin-left: 8px;
}

.commerce-screen {
  position: relative;
  min-height: 500px;
  padding: 46px;
  overflow: hidden;
  color: #2b2022;
  background:
    linear-gradient(90deg, rgba(43, 32, 34, .06) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(rgba(43, 32, 34, .06) 1px, transparent 1px) 0 0 / 56px 56px,
    #f9e6e9;
}

.commerce-screen::before {
  content: "";
  position: absolute;
  top: 42%;
  right: 8%;
  width: 250px;
  aspect-ratio: 1;
  border: 1px solid rgba(43, 32, 34, .17);
  border-radius: 50%;
}

.commerce-screen::after {
  content: "";
  position: absolute;
  right: 15%;
  bottom: 16%;
  width: 86px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 22px rgba(155, 140, 255, .13);
}

.commerce-screen > small {
  color: #d9355a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}

.commerce-screen > strong {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 30px;
  font: 700 clamp(56px, 6vw, 94px)/.84 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -.075em;
}

.commerce-products {
  position: absolute;
  right: 7%;
  bottom: 12%;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: end;
}

.commerce-products i {
  width: 64px;
  height: 94px;
  border: 1px solid rgba(43, 32, 34, .18);
  border-radius: 8px;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 14px 26px rgba(43, 32, 34, .09);
}

.commerce-products i:nth-child(2) {
  height: 124px;
  background: #f5a9bc;
}

.commerce-products i:nth-child(3) {
  height: 78px;
  background: rgba(155, 140, 255, .35);
}

.commerce-status {
  position: absolute;
  bottom: 34px;
  left: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(43, 32, 34, .18);
  border-radius: 99px;
  background: rgba(255, 248, 242, .6);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.commerce-case-copy > p:first-of-type {
  margin: 64px 0 14px;
  color: var(--violet);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.commerce-case-copy h2 {
  margin: 0;
  font-size: clamp(52px, 6vw, 92px);
  line-height: .88;
  letter-spacing: -.07em;
}

.commerce-case-copy > p:nth-of-type(2) {
  margin: 28px 0 0;
  color: rgba(255, 253, 245, .6);
  font-size: 16px;
  line-height: 1.65;
}

.commerce-case-copy dl {
  margin: 34px 0 0;
  border-top: 1px solid rgba(255, 253, 245, .15);
}

.commerce-case-copy dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 253, 245, .12);
}

.commerce-case-copy dt {
  color: var(--violet);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.commerce-case-copy dd {
  margin: 0;
  color: rgba(255, 253, 245, .62);
  font-size: 11px;
  line-height: 1.55;
}

.commerce-rankings {
  display: grid;
  gap: 7px;
  margin-top: 24px;
}

.commerce-rankings span {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 13px;
  border: 1px solid rgba(155, 140, 255, .3);
  border-radius: 7px;
  color: rgba(255, 253, 245, .68);
  background: rgba(155, 140, 255, .055);
  font-size: 10px;
}

.commerce-rankings b {
  flex: 0 0 auto;
  color: var(--violet);
}

.commerce-case-copy > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  margin-top: 26px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--violet);
  border-radius: 99px;
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  transition: background 220ms ease, color 220ms ease, translate 220ms var(--ease);
}

.commerce-case-copy > a span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--violet);
}

.commerce-case-copy > a:hover {
  color: var(--ink);
  background: var(--violet);
  translate: 0 -3px;
}

.commerce-case-copy > small {
  display: block;
  margin-top: 12px;
  color: rgba(255, 253, 245, .36);
  font-size: 8px;
  line-height: 1.5;
}

.landing-case .commerce-case-visual {
  border-color: rgba(255, 253, 245, .2);
  background: #0e1114;
  box-shadow: 18px 18px 0 rgba(240, 62, 40, .2);
}

.landing-case .commerce-browser {
  color: rgba(255, 253, 245, .48);
  background: #090b0d;
}

.landing-case .commerce-browser i {
  background: rgba(255, 253, 245, .2);
}

.landing-case .commerce-screen {
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(255, 253, 245, .055) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(rgba(255, 253, 245, .055) 1px, transparent 1px) 0 0 / 56px 56px,
    #111820;
}

.landing-case .commerce-screen::before {
  border-color: rgba(22, 142, 229, .34);
}

.landing-case .commerce-screen::after {
  background: var(--red);
  box-shadow: 0 0 0 22px rgba(240, 62, 40, .12);
}

.landing-case .commerce-screen > small {
  color: var(--blue);
}

.landing-case .commerce-status {
  border-color: rgba(255, 253, 245, .18);
  color: var(--white);
  background: rgba(17, 24, 32, .72);
}

.landing-metric {
  position: absolute;
  right: 8%;
  bottom: 16%;
  z-index: 2;
  display: grid;
  min-width: 150px;
  padding: 16px;
  border: 1px solid rgba(255, 253, 245, .18);
  border-radius: 10px;
  background: rgba(9, 11, 13, .68);
  backdrop-filter: blur(10px);
}

.landing-metric span {
  color: rgba(255, 253, 245, .5);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
}

.landing-metric b {
  margin: 4px 0;
  color: var(--red);
  font: 700 52px/.9 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -.06em;
}

.landing-page .commerce-case-copy > p:first-of-type,
.landing-page .commerce-case-copy dt {
  color: var(--red);
}

.landing-page .commerce-rankings span {
  border-color: rgba(240, 62, 40, .3);
  background: rgba(240, 62, 40, .055);
}

.landing-page .commerce-rankings b {
  color: var(--red);
}

.landing-page .commerce-case-copy > a {
  border-color: var(--red);
}

.landing-page .commerce-case-copy > a span {
  background: var(--red);
}

.landing-page .commerce-case-copy > a:hover {
  background: var(--red);
}

.service-page [data-page-reveal] {
  opacity: 1;
  translate: none;
}

.service-page.motion-ready [data-page-reveal] {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 680ms var(--ease), translate 680ms var(--ease);
}

.service-page.motion-ready [data-page-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

@keyframes blueprintSignal {
  to { stroke-dashoffset: -866; }
}

@keyframes conversionCurrent {
  to { stroke-dashoffset: -120; }
}

@keyframes conversionOrbit {
  to { transform: rotate(360deg); }
}

@keyframes conversionInput {
  0%, 100% { border-color: rgba(255, 253, 245, .17); translate: 0; }
  45% { border-color: rgba(240, 62, 40, .58); translate: 4px 0; }
}

@keyframes careOrbit {
  to { transform: rotate(360deg); }
}

@keyframes careNode {
  0%, 100% { border-color: rgba(255, 253, 245, .28); transform: scale(1); }
  50% { border-color: var(--blue); transform: scale(1.12); }
}

@keyframes redesignHint {
  0%, 100% { translate: -4px 0; opacity: .55; }
  50% { translate: 4px 0; opacity: 1; }
}

@keyframes localRadar {
  to { transform: rotate(360deg); }
}

@keyframes localScan {
  to { transform: rotate(360deg); }
}

@keyframes localPoint {
  0%, 100% { opacity: .45; transform: scale(.75); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes localOutput {
  from { opacity: .35; translate: 10px 0; }
  to { opacity: 1; translate: 0; }
}

@media (max-width: 1100px) {
  .service-hero {
    grid-template-columns: 1fr;
    padding-top: 156px;
  }

  .service-blueprint {
    width: min(100%, 720px);
    transform: none;
  }

  .conversion-lab {
    width: min(100%, 720px);
    transform: none;
  }

  .care-console {
    width: min(100%, 720px);
    transform: none;
  }

  .redesign-console {
    width: min(100%, 720px);
    transform: none;
  }

  .local-console {
    width: min(100%, 720px);
    transform: none;
  }

  .automation-console,
  .price-dial,
  .studio-map,
  .case-study-console {
    width: min(100%, 720px);
    transform: none;
  }

  .maintenance-include-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fit-grid,
  .include-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-plan,
  .service-faq,
  .related-services {
    grid-template-columns: 1fr;
  }

  .service-faq .service-section-heading {
    position: static;
  }

  .plan-card {
    max-width: 680px;
  }

  .commerce-case {
    grid-template-columns: 1fr;
  }

  .commerce-case-visual {
    width: min(100%, 760px);
    transform: none;
  }
}

@media (max-width: 700px) {
  .case-study-console-stage { min-height:390px; padding:38px 22px; }
  .case-study-console-stage > strong { font-size:58px; }
  .case-study-products { right:5%; bottom:29%; }
  .case-study-products i { width:38px; height:62px; }
  .case-study-products i:nth-child(2) { height:86px; }
  .case-study-products i:nth-child(3) { height:50px; }
  .case-study-context, .case-study-evidence, .case-study-pages { padding:82px 20px; }
  .case-study-context-grid { grid-template-columns:1fr; margin-top:46px; }
  .case-study-context-grid article { min-height:auto; padding:24px 0; border-right:0; }
  .case-study-context-grid h3 { margin-top:28px; }
  .case-study-system-grid { grid-template-columns:1fr; }
  .case-study-ranking { margin-top:46px; box-shadow:8px 8px 0 var(--case-accent); }
  .case-study-ranking header { align-items:flex-start; flex-direction:column; }
  .case-study-ranking li { min-height:96px; gap:15px; padding:18px; }
  .case-study-ranking li b { font-size:32px; }
  .case-study-pages .related-links { margin-top:46px; }
  .case-public-link { margin-top:46px; }
  .case-public-link a { min-height:120px; padding:20px; box-shadow:8px 8px 0 var(--case-accent); }
  .odisea-bars { right:5%; bottom:29%; height:115px; }
  .odisea-bars i { width:20px; }
  .repup-dashboard { right:4%; bottom:29%; grid-template-columns:48px 48px; }
  .mundial-score { right:4%; bottom:29%; gap:8px; }
  .mundial-score > span { width:72px; font-size:27px; }
  .case-study-byline { grid-template-columns:1fr; padding:0 20px 72px; }

  .studio-map-stage { min-height:410px; }
  .studio-map-ring { inset:17% 10%; }
  .studio-map-center { width:125px; }
  .studio-map-node { min-width:88px; padding:10px; }
  .studio-map-node-web { left:4%; }
  .studio-map-node-code { right:4%; }
  .studio-map-node-seo { left:4%; }
  .studio-map-node-system { right:4%; }
  .studio-method-grid { grid-template-columns:1fr; }
  .studio-facts { padding:82px 20px; }
  .studio-facts-list { margin-top:46px; }
  .studio-facts-list > div { grid-template-columns:1fr; gap:8px; padding:19px 0; }
  .studio-project-list li { grid-template-columns:42px 1fr; }
  .studio-project-list a { grid-column:2; justify-self:start; }
  .studio-portfolio-link { justify-content:stretch; }
  .studio-portfolio-link a { width:100%; justify-content:space-between; }

  .price-dial-ring { margin-block:34px 18px; }
  .price-comparator { padding:82px 20px; }
  .price-selector { grid-template-columns:1fr; margin-top:46px; box-shadow:8px 8px 0 var(--lime); }
  .price-selector-tabs { grid-template-columns:repeat(3,1fr); }
  .price-selector-tabs button { display:grid; justify-content:initial; min-height:74px; padding:13px 10px; font-size:11px; }
  .price-selector-tabs button span { font-size:8px; }
  .price-selector-panel { padding:25px 18px; }
  .price-selector-summary { grid-template-columns:1fr; gap:22px; margin-top:32px; }
  .price-selector-summary strong { font-size:58px; }
  .price-selector-panel ul { grid-template-columns:1fr; }

  .automation-route-controls {
    grid-template-columns: 1fr;
  }

  .automation-route-controls button {
    grid-template-columns: 28px 1fr;
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 253, 245, .13);
  }

  .automation-flow {
    min-height: 330px;
    padding: 36px 18px 22px;
  }

  .automation-steps {
    gap: 5px;
  }

  .automation-steps span {
    padding: 12px 4px;
    font-size: 7px;
  }

  .automation-flow article {
    margin-top: 54px;
  }

  .service-hero {
    gap: 56px;
    min-height: auto;
    padding: 122px 20px 48px;
  }

  .service-hero::before {
    inset: 84px 9px 10px;
  }

  .breadcrumbs {
    top: 100px;
    left: 20px;
  }

  .service-kicker {
    max-width: 88%;
    margin-top: 26px;
    font-size: 8px;
    line-height: 1.4;
  }

  .service-hero h1 {
    font-size: clamp(48px, 13.5vw, 70px);
  }

  .service-lead {
    font-size: 15px;
  }

  .service-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .service-hero .button {
    width: 100%;
  }

  .service-text-link {
    justify-content: space-between;
  }

  .service-hero-facts {
    grid-template-columns: 1fr;
  }

  .service-hero-facts > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 253, 245, .14);
  }

  .service-hero-facts > div + div {
    padding-left: 0;
    border-left: 0;
  }

  .blueprint-stage {
    min-height: 390px;
  }

  .blueprint-node {
    width: 96px;
    min-height: 68px;
    padding: 10px;
  }

  .blueprint-node strong {
    font-size: 13px;
  }

  .blueprint-core {
    width: 70px;
    font-size: 8px;
  }

  .conversion-lab-stage {
    min-height: 520px;
  }

  .conversion-flow {
    display: none;
  }

  .conversion-lab-stage::before {
    content: "";
    position: absolute;
    top: 116px;
    bottom: 150px;
    left: 50%;
    width: 1px;
    background: linear-gradient(rgba(255, 253, 245, .16), var(--red) 50%, rgba(240, 62, 40, .18));
  }

  .conversion-inputs {
    top: 28px;
    right: 16px;
    left: 16px;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    width: auto;
  }

  .conversion-inputs span {
    grid-template-columns: 1fr;
    gap: 5px;
    min-height: 64px;
    padding: 10px;
  }

  .conversion-focus {
    top: 52%;
    width: 116px;
  }

  .conversion-action {
    top: auto;
    right: 50%;
    bottom: 30px;
    width: 190px;
    min-height: 98px;
    translate: 50% 0;
    box-shadow: 10px 10px 0 rgba(240, 62, 40, .12);
  }

  .conversion-action:hover {
    translate: calc(50% - 4px) -4px;
    box-shadow: 15px 15px 0 rgba(240, 62, 40, .15);
  }

  .conversion-action:active {
    translate: 50% 2px;
  }

  .conversion-action strong {
    font-size: 20px;
  }

  .conversion-score {
    bottom: 140px;
    left: 50%;
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 24px);
    flex-wrap: wrap;
    translate: -50% 0;
  }

  .conversion-score span {
    padding-inline: 7px;
  }

  .care-console-stage {
    min-height: 560px;
    background:
      radial-gradient(circle at 50% 34%, rgba(22, 142, 229, .13), transparent 25%),
      linear-gradient(90deg, rgba(255, 253, 245, .045) 1px, transparent 1px) 0 0 / 48px 48px,
      linear-gradient(rgba(255, 253, 245, .045) 1px, transparent 1px) 0 0 / 48px 48px;
  }

  .care-cycle {
    top: 34%;
    left: 50%;
    width: 178px;
  }

  .care-checks {
    top: auto;
    right: 16px;
    bottom: 24px;
    left: 16px;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: auto;
    translate: 0;
  }

  .care-checks li {
    min-height: 68px;
  }

  .maintenance-include-grid {
    grid-template-columns: 1fr;
  }

  .redesign-compare {
    min-height: 470px;
  }

  .redesign-screen {
    inset: 14px;
  }

  .old-nav {
    left: 18px;
  }

  .old-nav i {
    width: 34px;
  }

  .old-title {
    top: 96px;
    left: 20px;
  }

  .old-columns {
    right: 20px;
    bottom: 72px;
    left: 20px;
  }

  .old-columns span {
    height: 96px;
  }

  .redesign-before > small {
    bottom: 27px;
    left: 20px;
  }

  .new-copy {
    top: 104px;
    left: 20px;
  }

  .new-copy strong {
    font-size: clamp(46px, 14vw, 66px);
  }

  .new-proof {
    right: 20px;
    bottom: 24px;
    width: 102px;
  }

  .redesign-console-foot strong {
    display: none;
  }

  .redesign-console-foot {
    gap: 10px;
  }

  .local-console-stage {
    min-height: 620px;
    background:
      radial-gradient(circle at 50% 31%, rgba(22, 142, 229, .12), transparent 23%),
      linear-gradient(90deg, rgba(255, 253, 245, .045) 1px, transparent 1px) 0 0 / 48px 48px,
      linear-gradient(rgba(255, 253, 245, .045) 1px, transparent 1px) 0 0 / 48px 48px;
  }

  .local-query {
    top: 16px;
    right: 16px;
    left: 16px;
    grid-template-columns: 1fr auto;
  }

  .local-query small {
    display: none;
  }

  .local-query strong {
    font-size: 13px;
  }

  .local-radar {
    top: 31%;
    left: 50%;
    width: 176px;
  }

  .local-signal-output {
    top: auto;
    right: 20px;
    bottom: 156px;
    left: 20px;
    width: auto;
    min-height: 126px;
  }

  .local-signal-output strong {
    margin-top: 24px;
    font-size: 19px;
  }

  .local-signal-controls button {
    justify-content: center;
    min-width: 0;
    padding-inline: 6px;
    font-size: 9px;
  }

  .local-evidence-grid {
    grid-template-columns: 1fr;
    margin-top: 54px;
  }

  .local-evidence-grid article {
    min-height: 0;
    padding: 22px;
  }

  .local-evidence-grid h3 {
    margin-top: 48px;
  }

  .local-evidence-grid li {
    align-items: flex-start;
  }

  .node-home { top: 6%; left: 3%; }
  .node-about { top: 6%; }
  .node-services { top: 38%; right: 2%; }
  .node-proof { bottom: 6%; }
  .node-contact { bottom: 6%; left: 3%; }

  .direct-answer {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 58px 20px;
  }

  .service-fit,
  .service-includes,
  .service-process,
  .commerce-case,
  .local-evidence,
  .service-plan,
  .service-faq,
  .related-services {
    padding: 84px 20px;
  }

  .service-section-heading > p {
    margin-top: 48px;
  }

  .service-section-heading h2,
  .related-services h2 {
    font-size: clamp(47px, 13vw, 66px);
  }

  .fit-grid,
  .include-grid {
    grid-template-columns: 1fr;
  }

  .fit-grid article {
    min-height: 310px;
    padding: 24px;
  }

  .fit-grid h3 {
    margin-top: 70px;
  }

  .include-grid article {
    min-height: 235px;
  }

  .scope-note {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .service-process-list li {
    grid-template-columns: 42px 1fr;
    gap: 18px;
    min-height: 160px;
  }

  .service-process-list small {
    display: none;
  }

  .plan-intro h2 {
    font-size: clamp(58px, 16vw, 78px);
  }

  .plan-card {
    box-shadow: 8px 8px 0 rgba(20, 20, 15, .22);
  }

  .plan-price strong {
    font-size: clamp(56px, 17vw, 76px);
  }

  .service-faq .faq {
    box-shadow: 8px 8px 0 var(--lime);
  }

  .ecommerce-page .service-faq .faq {
    box-shadow: 8px 8px 0 var(--violet);
  }

  .landing-page .service-faq .faq {
    box-shadow: 8px 8px 0 var(--red);
  }

  .commerce-case-visual {
    box-shadow: 8px 8px 0 rgba(155, 140, 255, .18);
  }

  .commerce-screen {
    min-height: 360px;
    padding: 30px 24px;
  }

  .commerce-screen > strong {
    font-size: clamp(52px, 15vw, 70px);
  }

  .commerce-screen::before {
    right: -18%;
    width: 230px;
  }

  .commerce-products {
    right: 5%;
    bottom: 13%;
  }

  .commerce-products i {
    width: 42px;
    height: 65px;
  }

  .commerce-products i:nth-child(2) {
    height: 88px;
  }

  .commerce-products i:nth-child(3) {
    height: 55px;
  }

  .landing-metric {
    right: 5%;
    bottom: 13%;
    min-width: 116px;
    padding: 12px;
  }

  .landing-metric b {
    font-size: 40px;
  }

  .commerce-status {
    bottom: 20px;
    left: 20px;
    max-width: 58%;
    line-height: 1.35;
  }

  .commerce-case-copy dl > div {
    grid-template-columns: 86px 1fr;
    gap: 15px;
  }

  .commerce-rankings span {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .related-links a {
    grid-template-columns: 32px 1fr 24px;
    gap: 12px;
    min-height: 104px;
  }

  .related-links strong {
    font-size: 21px;
  }
}

@media (max-width: 720px) {
  .case-study-gallery { padding: 64px var(--page) 74px; }
  .case-study-gallery-head { display: grid; margin-bottom: 24px; }
  .case-study-gallery-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .case-study-gallery-grid::-webkit-scrollbar { display: none; }
  .case-study-gallery figure { flex: 0 0 88%; scroll-snap-align: start; }
  .case-study-gallery figure:last-child { flex-basis: 72%; }
  .case-study-gallery img { height: min(62vh, 480px); }
}

@media (prefers-reduced-motion: reduce) {
  .blueprint-route-live {
    animation: none;
    stroke-dasharray: none;
    opacity: .6;
  }

  .conversion-flow path,
  .conversion-focus::before,
  .conversion-inputs span,
  .care-cycle-ring,
  .care-node,
  .care-console-head i::before,
  .redesign-console-head i,
  .local-radar::before,
  .local-radar::after,
  .local-radar > i,
  .local-signal-output {
    animation: none;
  }

  .automation-flow.is-switching article { animation: none; }
}

/* ── Web para reservas (azul) ── */
.booking-page .service-kicker,
.booking-page .booking-console-head i { color: var(--blue); }
.booking-page .service-kicker i { box-shadow: 0 0 0 6px rgba(22, 142, 229, .12); }
.booking-page .service-hero h1 span { color: var(--blue); }
.booking-page .service-hero::after { background: var(--blue); }
.booking-page .breadcrumbs li + li::before { color: var(--blue); }
.booking-page .direct-answer,
.booking-page .service-plan { background: var(--blue); }
.booking-page .service-section-heading-light > p,
.booking-page .scope-note span { color: #72c4ff; }
.booking-page .include-grid article:hover { border-color: var(--blue); background: rgba(22, 142, 229, .05); }
.booking-page .include-grid article > span { color: #72c4ff; }
.booking-page .plan-card header i,
.booking-page .plan-card > a { background: var(--lime); }
.booking-page .service-faq .faq { box-shadow: 14px 14px 0 var(--blue); }

.booking-console {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 245, .24);
  border-radius: 16px;
  background: rgba(12, 12, 9, .82);
  box-shadow: 22px 24px 0 rgba(22, 142, 229, .12);
  transform: rotate(-1deg);
}

.booking-console-head,
.booking-console-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 253, 245, .13);
  color: rgba(255, 253, 245, .48);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.booking-console-foot { border-top: 1px solid rgba(255, 253, 245, .13); border-bottom: 0; }
.booking-console-foot strong { color: rgba(255, 253, 245, .8); }

.booking-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 22px 20px 6px; }
.booking-week span { display: grid; place-content: center; min-height: 38px; border: 1px solid rgba(255, 253, 245, .14); border-radius: 9px; color: rgba(255, 253, 245, .5); font: 800 11px/1 "Space Grotesk", system-ui, sans-serif; }
.booking-week span.is-active { border-color: var(--blue); color: var(--white); background: rgba(22, 142, 229, .16); }

.booking-slots { display: grid; gap: 8px; padding: 16px 20px; }
.booking-slot { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border: 1px solid rgba(255, 253, 245, .14); border-radius: 10px; background: rgba(255, 253, 245, .03); }
.booking-slot small { color: rgba(255, 253, 245, .5); font: 800 10px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .06em; }
.booking-slot b { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 253, 245, .42); }
.booking-slot.is-taken { opacity: .5; }
.booking-slot.is-picked { border-color: var(--blue); background: rgba(22, 142, 229, .14); }
.booking-slot.is-picked b { color: var(--white); }
.booking-slot.is-picked small { color: #72c4ff; }

.booking-confirm { margin: 6px 20px 20px; padding: 18px; border-left: 3px solid var(--blue); background: rgba(255, 253, 245, .05); }
.booking-confirm small { color: #72c4ff; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.booking-confirm strong { display: block; margin: 8px 0 4px; color: var(--white); font: 700 22px/1 "Space Grotesk", system-ui, sans-serif; }
.booking-confirm p { margin: 0; color: rgba(255, 253, 245, .56); font-size: 11px; }

@media (prefers-reduced-motion: no-preference) {
  .booking-slot.is-picked { animation: bookingPulse 3s ease-in-out infinite; }
}

@keyframes bookingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 142, 229, .18); }
  50% { box-shadow: 0 0 0 6px rgba(22, 142, 229, 0); }
}

/* ── Plataformas web (violeta) ── */
.platform-page .service-kicker,
.platform-page .platform-console-head i { color: var(--violet); }
.platform-page .service-kicker i { box-shadow: 0 0 0 6px rgba(155, 140, 255, .12); }
.platform-page .service-hero h1 span { color: var(--violet); }
.platform-page .service-hero::after { background: var(--violet); }
.platform-page .breadcrumbs li + li::before { color: var(--violet); }
.platform-page .direct-answer,
.platform-page .service-plan { background: var(--violet); }
.platform-page .service-section-heading-light > p,
.platform-page .scope-note span { color: var(--violet); }
.platform-page .include-grid article:hover { border-color: var(--violet); background: rgba(155, 140, 255, .05); }
.platform-page .include-grid article > span { color: var(--violet); }
.platform-page .plan-card header i,
.platform-page .plan-card > a { background: var(--lime); }
.platform-page .service-faq .faq { box-shadow: 14px 14px 0 var(--violet); }

.platform-console {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 245, .24);
  border-radius: 16px;
  background: rgba(12, 12, 9, .82);
  box-shadow: 22px 24px 0 rgba(155, 140, 255, .12);
  transform: rotate(1deg);
}

.platform-console-head,
.platform-console-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255, 253, 245, .13);
  color: rgba(255, 253, 245, .48);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.platform-console-foot { border-top: 1px solid rgba(255, 253, 245, .13); border-bottom: 0; }
.platform-console-foot strong { color: rgba(255, 253, 245, .8); }

.platform-body { display: grid; grid-template-columns: minmax(96px, .34fr) 1fr; min-height: 300px; }
.platform-nav { display: grid; align-content: start; gap: 4px; padding: 18px 12px; border-right: 1px solid rgba(255, 253, 245, .12); }
.platform-nav span { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 8px; color: rgba(255, 253, 245, .5); font: 800 10px/1 "Space Grotesk", system-ui, sans-serif; }
.platform-nav span i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 253, 245, .24); }
.platform-nav span.is-active { color: var(--white); background: rgba(155, 140, 255, .14); }
.platform-nav span.is-active i { background: var(--violet); }

.platform-main {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 22px 20px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 44px 100%,
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 100% 44px;
}

.platform-card { padding: 18px; border: 1px solid rgba(155, 140, 255, .4); border-radius: 12px; background: rgba(155, 140, 255, .06); }
.platform-card small { color: var(--violet); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.platform-card b { display: block; margin: 8px 0 3px; color: var(--white); font: 700 20px/1 "Space Grotesk", system-ui, sans-serif; }
.platform-card em { color: rgba(255, 253, 245, .5); font-style: normal; font-size: 11px; }

.platform-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.platform-rows li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid rgba(255, 253, 245, .12); border-radius: 9px; background: rgba(255, 253, 245, .03); }
.platform-rows li i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(155, 140, 255, .5); background: rgba(155, 140, 255, .12); }
.platform-rows li span { height: 8px; border-radius: 99px; background: rgba(255, 253, 245, .16); }
.platform-rows li b { padding: 5px 10px; border-radius: 99px; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.platform-rows .tag-on { color: var(--ink); background: var(--lime); }
.platform-rows .tag-new { color: var(--white); background: rgba(155, 140, 255, .32); }
.platform-rows .tag-plan { color: rgba(255, 253, 245, .66); border: 1px solid rgba(255, 253, 245, .2); }

/* ── SEO (azul) ── */
.seo-page .service-kicker { color: var(--blue); }
.seo-page .service-kicker i { box-shadow: 0 0 0 6px rgba(22, 142, 229, .12); }
.seo-page .service-hero h1 span { color: var(--blue); }
.seo-page .service-hero::after { background: var(--blue); }
.seo-page .breadcrumbs li + li::before { color: var(--blue); }
.seo-page .direct-answer,
.seo-page .service-plan { background: var(--blue); }
.seo-page .service-section-heading-light > p,
.seo-page .scope-note span { color: #72c4ff; }
.seo-page .include-grid article:hover { border-color: var(--blue); background: rgba(22, 142, 229, .05); }
.seo-page .include-grid article > span { color: #72c4ff; }
.seo-page .plan-card header i,
.seo-page .plan-card > a { background: var(--lime); }
.seo-page .service-faq .faq { box-shadow: 14px 14px 0 var(--blue); }

/* Visual del héroe: página de resultados en claro */
.seo-visual {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(22, 142, 229, .055) 1px, transparent 1px) 0 0 / 38px 100%,
    linear-gradient(rgba(22, 142, 229, .055) 1px, transparent 1px) 0 0 / 100% 38px,
    var(--white);
  color: var(--ink);
  box-shadow: 16px 18px 0 var(--blue);
}
.seo-visual-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 22px 0; color: var(--muted); font: 800 9px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.seo-visual-label span { color: var(--ink); }
.seo-visual-label i { padding: 6px 9px; border: 1px solid rgba(22, 142, 229, .35); border-radius: 999px; color: var(--blue); font-style: normal; }
.seo-visual-query { display: flex; align-items: center; gap: 12px; margin: 22px 22px 18px; padding: 8px 8px 8px 18px; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); }
.seo-visual-query i { color: var(--blue); font-style: normal; font-size: 17px; font-weight: 700; }
.seo-visual-query strong { flex: 1; min-width: 0; overflow: hidden; font: 700 14px/1.2 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.seo-visual-query span { flex: none; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.seo-visual-ranks { display: grid; gap: 10px; margin: 0; padding: 0 22px; list-style: none; }
.seo-visual-ranks li { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; }
.seo-visual-ranks li > span { display: grid; place-content: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font: 800 13px/1 "Space Grotesk", system-ui, sans-serif; }
.seo-visual-ranks li > div { display: grid; gap: 8px; min-width: 0; }
.seo-visual-ranks li em { height: 9px; border-radius: 99px; background: var(--line); }
.seo-visual-ranks li em:last-child { max-width: 62%; }
.seo-visual-ranks li.is-you { border-color: var(--blue); background: rgba(22, 142, 229, .07); }
.seo-visual-ranks li.is-you > span { border-color: var(--blue); color: var(--white); background: var(--blue); }
.seo-visual-ranks li.is-you b { font: 700 16px/1.1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.01em; }
.seo-visual-ranks li.is-you small { color: #4c4c46; font-size: 11px; font-weight: 700; }
.seo-visual-ranks li.is-you > i { color: var(--blue); font-style: normal; font-weight: 800; }
.seo-visual-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 20px; padding: 15px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.seo-visual-foot strong { color: var(--ink); font-size: 10px; }

/* ── Google Ads (rojo) ── */
.ads-page .service-kicker { color: var(--red); }
.ads-page .service-kicker i { box-shadow: 0 0 0 6px rgba(240, 62, 40, .12); }
.ads-page .service-hero h1 span { color: var(--red); }
.ads-page .service-hero::after { background: var(--red); }
.ads-page .breadcrumbs li + li::before { color: var(--red); }
.ads-page .direct-answer,
.ads-page .service-plan { background: var(--red); }
.ads-page .service-section-heading-light > p,
.ads-page .scope-note span { color: #ff8a78; }
.ads-page .include-grid article:hover { border-color: var(--red); background: rgba(240, 62, 40, .05); }
.ads-page .include-grid article > span { color: #ff8a78; }
.ads-page .plan-card header i,
.ads-page .plan-card > a { background: var(--lime); }
.ads-page .service-faq .faq { box-shadow: 14px 14px 0 var(--red); }

/* Visual del héroe: ventana de navegador con anuncio */
.ads-visual { position: relative; z-index: 2; overflow: hidden; border: 1px solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--white); box-shadow: 16px 18px 0 var(--red); transform: rotate(1deg); }
.ads-visual-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 253, 245, .14); }
.ads-visual-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.ads-visual-bar i:first-child { background: var(--red); }
.ads-visual-bar i:nth-child(2) { background: var(--lime); }
.ads-visual-bar span { flex: 1; margin-left: 10px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 253, 245, .08); color: rgba(255, 253, 245, .76); font: 700 10px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .05em; }
.ads-visual-search { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 20px 20px 14px; padding: 13px 18px; border: 1px solid rgba(255, 253, 245, .22); border-radius: 999px; }
.ads-visual-search strong { font: 700 14px/1 "Space Grotesk", system-ui, sans-serif; }
.ads-visual-search i { color: var(--red); font-style: normal; font-weight: 800; }
.ads-visual-ad { margin: 0 20px; padding: 18px; border-left: 3px solid var(--red); border-radius: 4px 12px 12px 4px; background: rgba(240, 62, 40, .1); }
.ads-visual-ad small { display: inline-block; padding: 4px 9px; border-radius: 99px; background: var(--red); color: var(--white); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ads-visual-ad b { display: block; margin: 12px 0 4px; font: 700 19px/1.15 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.01em; }
.ads-visual-ad em { color: rgba(255, 253, 245, .68); font-style: normal; font-size: 11px; }
.ads-visual-organic { display: grid; gap: 10px; margin: 15px 20px 20px; }
.ads-visual-organic article { display: grid; gap: 7px; padding: 10px 14px; border-top: 1px solid rgba(255, 253, 245, .1); }
.ads-visual-organic small { color: rgba(255, 253, 245, .54); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ads-visual-organic span,
.ads-visual-organic i { display: block; height: 8px; border-radius: 999px; background: rgba(255, 253, 245, .13); }
.ads-visual-organic i { width: 63%; height: 6px; background: rgba(255, 253, 245, .08); }
.ads-visual-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 20px; border-top: 1px solid rgba(255, 253, 245, .14); color: rgba(255, 253, 245, .48); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ads-visual-foot strong { color: rgba(255, 253, 245, .85); font-size: 10px; }

/* ── Meta Ads (violeta) ── */
.social-page .service-kicker { color: var(--violet); }
.social-page .service-kicker i { box-shadow: 0 0 0 6px rgba(155, 140, 255, .12); }
.social-page .service-hero h1 span { color: var(--violet); }
.social-page .service-hero::after { background: var(--violet); }
.social-page .breadcrumbs li + li::before { color: var(--violet); }
.social-page .direct-answer,
.social-page .service-plan { background: var(--violet); }
.social-page .service-section-heading-light > p,
.social-page .scope-note span { color: var(--violet); }
.social-page .include-grid article:hover { border-color: var(--violet); background: rgba(155, 140, 255, .05); }
.social-page .include-grid article > span { color: var(--violet); }
.social-page .plan-card header i,
.social-page .plan-card > a { background: var(--lime); }
.social-page .service-faq .faq { box-shadow: 14px 14px 0 var(--violet); }

/* Visual del héroe: anuncio dentro de un teléfono */
.social-visual { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; color: var(--ink); }
.social-phone { position: relative; width: min(290px, 84%); padding: 16px 14px 14px; border: 1px solid var(--ink); border-radius: 36px; background: var(--ink); box-shadow: 14px 16px 0 var(--violet); transform: rotate(-1.4deg); transition: transform 240ms ease, box-shadow 240ms ease; }
.social-phone::after { content: ""; position: absolute; top: 82px; right: -5px; width: 4px; height: 48px; border: 1px solid var(--ink); border-radius: 0 4px 4px 0; background: var(--violet); }
.social-phone:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 17px 20px 0 var(--violet); }
.social-phone-notch { display: block; width: 86px; height: 7px; margin: 0 auto 14px; border-radius: 99px; background: rgba(255, 253, 245, .2); }
.social-post { overflow: hidden; border: 1px solid rgba(255, 253, 245, .16); border-radius: 20px; background: rgba(255, 253, 245, .05); color: var(--white); }
.social-post-head { display: flex; align-items: center; gap: 11px; padding: 13px 15px; }
.social-post-head i { width: 32px; height: 32px; flex: none; border: 1px solid var(--violet); border-radius: 50%; background: rgba(155, 140, 255, .28); }
.social-post-head b { display: block; color: #fffdf5; font: 700 12.5px/1.2 "Space Grotesk", system-ui, sans-serif; }
.social-post-head small { color: rgba(255, 253, 245, .74); font-size: 9px; font-weight: 700; }
.social-post-media { position: relative; isolation: isolate; display: grid; place-content: center; justify-items: center; gap: 7px; aspect-ratio: 4 / 3; overflow: hidden; border-block: 1px solid rgba(255, 253, 245, .16); background: linear-gradient(145deg, #40376f, #171611 72%); color: #fffdf5; text-align: center; }
.social-post-media::before { content: ""; position: absolute; z-index: -1; width: 155px; height: 155px; border: 1px solid rgba(255, 253, 245, .24); border-radius: 50%; background: rgba(155, 140, 255, .2); box-shadow: 0 0 0 25px rgba(155, 140, 255, .06); transform: translate(42%, -22%); }
.social-post-media::after { content: ""; position: absolute; z-index: -1; left: 16px; bottom: 16px; width: 52px; height: 52px; border: 1px solid var(--lime); border-radius: 50%; }
.social-post-media small { color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.social-post-media strong { max-width: 180px; color: #fffdf5; font: 700 25px/.95 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.04em; }
.social-post-media span { padding: 8px 14px; border: 1px solid rgba(255, 253, 245, .7); border-radius: 999px; background: rgba(20, 20, 15, .4); color: #fffdf5; font: 800 9px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.social-post-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 10px; padding: 12px 14px; border-radius: 11px; background: #fffdf5; color: var(--ink); font: 800 11.5px/1 "Space Grotesk", system-ui, sans-serif; }
.social-post-cta i { display: grid; place-content: center; width: 25px; height: 25px; border-radius: 50%; background: var(--violet); color: var(--ink); font-style: normal; }
.social-visual-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.social-visual-tags span { padding: 9px 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.social-visual-tags span:nth-child(2) { background: var(--violet); }

/* ── Email marketing (lima; usa el acento base) ── */
.email-page .breadcrumbs li + li::before { color: var(--lime); }
.email-page .service-faq .faq { box-shadow: 14px 14px 0 var(--lime); }

/* Visual del héroe: carta saliendo de un sobre */
.email-visual { position: relative; z-index: 2; display: grid; justify-items: center; }
.email-letter { position: relative; z-index: 2; display: grid; gap: 10px; width: min(330px, 86%); margin-bottom: -52px; padding: 22px 22px 26px; border: 1px solid var(--ink); border-radius: 14px; background: var(--white); color: var(--ink); box-shadow: 12px 12px 0 var(--lime); transform: rotate(-2deg); transition: transform 240ms ease; }
.email-letter:hover { transform: rotate(-.5deg) translateY(-4px); }
.email-letter-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.email-letter small { color: #56564f; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.email-letter-head i { display: grid; place-content: center; width: 27px; height: 27px; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); font: 800 9px/1 "Space Grotesk", system-ui, sans-serif; }
.email-letter b { color: var(--ink); font: 700 21px/1.1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; }
.email-letter > span { height: 9px; border-radius: 99px; background: var(--line); }
.email-letter > span:last-of-type { max-width: 64%; }
.email-letter-tag { justify-self: start; margin-top: 6px; padding: 8px 13px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.email-envelope { position: relative; z-index: 1; width: min(430px, 96%); height: 180px; overflow: hidden; border: 1px solid var(--ink); border-radius: 16px; background: var(--paper); }
.email-envelope::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(20, 20, 15, .24) calc(50% - 1px), rgba(20, 20, 15, .24) calc(50% + 1px), transparent calc(50% + 1px)) top left / 50.5% 72% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), rgba(20, 20, 15, .24) calc(50% - 1px), rgba(20, 20, 15, .24) calc(50% + 1px), transparent calc(50% + 1px)) top right / 50.5% 72% no-repeat;
}
.email-envelope::after { content: ""; position: absolute; inset: auto 0 0; height: 74%; background: linear-gradient(155deg, transparent 49.5%, rgba(20, 20, 15, .16) 50%, transparent 50.5%) left bottom / 50.5% 100% no-repeat, linear-gradient(205deg, transparent 49.5%, rgba(20, 20, 15, .16) 50%, transparent 50.5%) right bottom / 50.5% 100% no-repeat; }
.email-envelope > span { position: absolute; z-index: 2; left: 50%; bottom: 39px; width: 29px; height: 29px; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); transform: translateX(-50%); }
.email-visual-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.email-visual-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.email-visual-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* ── Branding e identidad visual (violeta) ── */
.branding-page .service-kicker { color: var(--violet); }
.branding-page .service-kicker i { box-shadow: 0 0 0 6px rgba(155, 140, 255, .12); }
.branding-page .service-hero h1 span { color: var(--violet); }
.branding-page .service-hero::after { background: var(--violet); }
.branding-page .breadcrumbs li + li::before { color: var(--violet); }
.branding-page .direct-answer,
.branding-page .service-plan { background: var(--violet); }
.branding-page .service-section-heading-light > p,
.branding-page .scope-note span { color: var(--violet); }
.branding-page .include-grid article:hover { border-color: var(--violet); background: rgba(155, 140, 255, .05); }
.branding-page .include-grid article > span { color: var(--violet); }
.branding-page .plan-card header i,
.branding-page .plan-card > a { background: var(--lime); }
.branding-page .service-faq .faq { box-shadow: 14px 14px 0 var(--violet); }

/* Visual del héroe: tarjeta de marca con logotipo, color y tipografía */
.branding-visual { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; color: var(--ink); }
.branding-card { position: relative; z-index: 2; display: grid; gap: 12px; width: min(320px, 86%); padding: 22px 22px 24px; border: 1px solid var(--ink); border-radius: 16px; background: var(--white); box-shadow: 13px 14px 0 var(--violet); transform: rotate(-1.6deg); transition: transform 240ms ease, box-shadow 240ms ease; }
.branding-card:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 16px 18px 0 var(--violet); }
.branding-card-head { display: flex; align-items: center; gap: 12px; }
.branding-mark { display: grid; place-content: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--ink); border-radius: 12px; background: var(--violet); color: var(--ink); font: 800 18px/1 "Space Grotesk", system-ui, sans-serif; }
.branding-card-head small { color: #56564f; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.branding-card b { color: var(--ink); font: 700 27px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .04em; }
.branding-card p { margin: 0; color: #56564f; font-size: 12px; font-weight: 600; }
.branding-swatches { display: flex; gap: 8px; margin-top: 4px; }
.branding-swatches i { width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 8px; }
.branding-swatches i:nth-child(1) { background: var(--ink); }
.branding-swatches i:nth-child(2) { background: var(--violet); }
.branding-swatches i:nth-child(3) { background: var(--lime); }
.branding-swatches i:nth-child(4) { background: var(--paper); }
.branding-type { display: flex; align-items: center; gap: 14px; width: min(320px, 86%); padding: 12px 18px; border: 1px solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--white); }
.branding-type span { color: var(--violet); font: 700 30px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; }
.branding-type small { color: rgba(255, 253, 245, .74); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.branding-visual-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.branding-visual-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.branding-visual-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }

/* ── Textos comerciales (azul) ── */
.copy-page .service-kicker { color: var(--blue); }
.copy-page .service-kicker i { box-shadow: 0 0 0 6px rgba(22, 142, 229, .12); }
.copy-page .service-hero h1 span { color: var(--blue); }
.copy-page .service-hero::after { background: var(--blue); }
.copy-page .breadcrumbs li + li::before { color: var(--blue); }
.copy-page .direct-answer,
.copy-page .service-plan { background: var(--blue); }
.copy-page .service-section-heading-light > p,
.copy-page .scope-note span { color: #72c4ff; }
.copy-page .include-grid article:hover { border-color: var(--blue); background: rgba(22, 142, 229, .05); }
.copy-page .include-grid article > span { color: #72c4ff; }
.copy-page .plan-card header i,
.copy-page .plan-card > a { background: var(--lime); }
.copy-page .service-faq .faq { box-shadow: 14px 14px 0 var(--blue); }

/* Visual del héroe: hoja de texto con titular y llamada */
.copy-visual { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; color: var(--ink); }
.copy-sheet { position: relative; z-index: 2; display: grid; gap: 12px; width: min(330px, 86%); padding: 24px 24px 26px; border: 1px solid var(--ink); border-radius: 16px; background: var(--white); box-shadow: 13px 14px 0 var(--blue); transform: rotate(-1.6deg); transition: transform 240ms ease, box-shadow 240ms ease; }
.copy-sheet:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 16px 18px 0 var(--blue); }
.copy-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.copy-sheet-head small { color: #56564f; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.copy-sheet-head i { display: grid; place-content: center; width: 30px; height: 30px; border: 1px solid var(--ink); border-radius: 8px; background: var(--blue); color: var(--white); font: 800 13px/1 "Space Grotesk", system-ui, sans-serif; }
.copy-sheet b { color: var(--ink); font: 700 24px/1.05 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; }
.copy-sheet > span { height: 9px; border-radius: 99px; background: var(--line); }
.copy-sheet > span.is-short { max-width: 60%; }
.copy-sheet-cta { justify-self: start; display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; padding: 11px 16px; border-radius: 10px; background: var(--blue); color: var(--white); font: 800 11px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.copy-sheet-cta i { font-style: normal; }
.copy-visual-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.copy-visual-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.copy-visual-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

/* ── Diseño para redes sociales (rojo) ── */
.feed-page .service-kicker { color: var(--red); }
.feed-page .service-kicker i { box-shadow: 0 0 0 6px rgba(240, 62, 40, .12); }
.feed-page .service-hero h1 span { color: var(--red); }
.feed-page .service-hero::after { background: var(--red); }
.feed-page .breadcrumbs li + li::before { color: var(--red); }
.feed-page .direct-answer,
.feed-page .service-plan { background: var(--red); }
.feed-page .service-section-heading-light > p,
.feed-page .scope-note span { color: #ff8a78; }
.feed-page .include-grid article:hover { border-color: var(--red); background: rgba(240, 62, 40, .05); }
.feed-page .include-grid article > span { color: #ff8a78; }
.feed-page .plan-card header i,
.feed-page .plan-card > a { background: var(--lime); }
.feed-page .service-faq .faq { box-shadow: 14px 14px 0 var(--red); }

/* Visual del héroe: cuadrícula de feed */
.feed-visual { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; color: var(--ink); }
.feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(320px, 86%); padding: 14px; border: 1px solid var(--ink); border-radius: 18px; background: var(--white); box-shadow: 13px 14px 0 var(--red); transform: rotate(-1.4deg); transition: transform 240ms ease, box-shadow 240ms ease; }
.feed-grid:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 16px 18px 0 var(--red); }
.feed-tile { display: grid; place-content: center; aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); }
.feed-tile span { font: 800 18px/1 "Space Grotesk", system-ui, sans-serif; }
.feed-tile i { width: 42%; height: 42%; border: 1px solid var(--ink); border-radius: 50%; }
.feed-tile.is-solid { background: var(--red); }
.feed-tile.is-solid b { color: var(--white); font: 800 10px/1.1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.feed-visual-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.feed-visual-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.feed-visual-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

/* ── Artículos SEO (lima; usa el acento base) ── */
.article-page .breadcrumbs li + li::before { color: var(--lime); }
.article-page .service-faq .faq { box-shadow: 14px 14px 0 var(--lime); }

/* Visual del héroe: artículo con encabezados y párrafos */
.article-visual { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; color: var(--ink); }
.article-sheet { position: relative; z-index: 2; display: grid; gap: 11px; width: min(330px, 86%); padding: 22px; border: 1px solid var(--ink); border-radius: 16px; background: var(--white); box-shadow: 13px 14px 0 var(--lime); transform: rotate(-1.5deg); transition: transform 240ms ease, box-shadow 240ms ease; }
.article-sheet:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 16px 18px 0 var(--lime); }
.article-sheet-head { display: flex; justify-content: space-between; align-items: center; }
.article-sheet-head small { color: #56564f; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.article-sheet-head i { padding: 5px 9px; border: 1px solid var(--ink); border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 9px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .08em; font-style: normal; }
.article-sheet b { color: var(--ink); font: 700 21px/1.12 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; }
.article-sheet-body { display: grid; gap: 7px; }
.article-sheet-body span { height: 8px; border-radius: 99px; background: var(--line); }
.article-sheet-body span.is-short { max-width: 58%; }
.article-sheet-index { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.article-sheet-index em { padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--lime); font: 800 9px/1 "Space Grotesk", system-ui, sans-serif; font-style: normal; letter-spacing: .04em; }
.article-sheet-index span { flex: 1; height: 8px; border-radius: 99px; background: rgba(20, 20, 15, .16); }
.article-visual-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.article-visual-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.article-visual-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* ── Edición de vídeo corto (violeta) ── */
.video-page .service-kicker { color: var(--violet); }
.video-page .service-kicker i { box-shadow: 0 0 0 6px rgba(155, 140, 255, .12); }
.video-page .service-hero h1 span { color: var(--violet); }
.video-page .service-hero::after { background: var(--violet); }
.video-page .breadcrumbs li + li::before { color: var(--violet); }
.video-page .direct-answer,
.video-page .service-plan { background: var(--violet); }
.video-page .service-section-heading-light > p,
.video-page .scope-note span { color: var(--violet); }
.video-page .include-grid article:hover { border-color: var(--violet); background: rgba(155, 140, 255, .05); }
.video-page .include-grid article > span { color: var(--violet); }
.video-page .plan-card header i,
.video-page .plan-card > a { background: var(--lime); }
.video-page .service-faq .faq { box-shadow: 14px 14px 0 var(--violet); }

/* Visual del héroe: reproductor de vídeo con línea de tiempo */
.video-visual { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; color: var(--ink); }
.video-frame { position: relative; z-index: 2; display: grid; gap: 12px; width: min(330px, 86%); padding: 20px 20px 22px; border: 1px solid var(--ink); border-radius: 18px; background: var(--white); box-shadow: 13px 14px 0 var(--violet); transform: rotate(-1.4deg); transition: transform 240ms ease, box-shadow 240ms ease; }
.video-frame:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 16px 18px 0 var(--violet); }
.video-frame-head { display: flex; justify-content: space-between; align-items: center; }
.video-frame-head small { color: #56564f; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.video-frame-head i { display: grid; place-content: center; width: 27px; height: 27px; border: 1px solid var(--ink); border-radius: 8px; background: var(--violet); color: var(--ink); font: 800 11px/1 "Space Grotesk", system-ui, sans-serif; font-style: normal; }
.video-stage { position: relative; display: grid; place-items: center; gap: 8px; aspect-ratio: 5 / 4; border-radius: 12px; background: linear-gradient(150deg, #40376f, #171611 74%); color: #fffdf5; text-align: center; overflow: hidden; }
.video-play { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--violet); }
.video-play::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--ink); }
.video-stage b { font: 700 17px/1 "Space Grotesk", system-ui, sans-serif; }
.video-stage em { padding: 5px 10px; border-radius: 6px; background: rgba(255, 253, 245, .14); color: #fffdf5; font-size: 9px; font-weight: 700; font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.video-timeline { display: flex; gap: 6px; }
.video-timeline i { flex: 1; height: 10px; border-radius: 3px; background: var(--line); }
.video-timeline i:first-child { flex: 2; background: var(--violet); }
.video-visual-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.video-visual-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.video-visual-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }

/* ── Fotografía de producto (azul) ── */
.photo-page .service-kicker { color: var(--blue); }
.photo-page .service-kicker i { box-shadow: 0 0 0 6px rgba(22, 142, 229, .12); }
.photo-page .service-hero h1 span { color: var(--blue); }
.photo-page .service-hero::after { background: var(--blue); }
.photo-page .breadcrumbs li + li::before { color: var(--blue); }
.photo-page .direct-answer,
.photo-page .service-plan { background: var(--blue); }
.photo-page .service-section-heading-light > p,
.photo-page .scope-note span { color: #72c4ff; }
.photo-page .include-grid article:hover { border-color: var(--blue); background: rgba(22, 142, 229, .05); }
.photo-page .include-grid article > span { color: #72c4ff; }
.photo-page .plan-card header i,
.photo-page .plan-card > a { background: var(--lime); }
.photo-page .service-faq .faq { box-shadow: 14px 14px 0 var(--blue); }

/* Visual del héroe: encuadre de fotografía de producto */
.photo-visual { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; color: var(--ink); }
.photo-frame { position: relative; z-index: 2; display: grid; gap: 10px; width: min(320px, 86%); padding: 14px; border: 1px solid var(--ink); border-radius: 16px; background: var(--white); box-shadow: 13px 14px 0 var(--blue); transform: rotate(-1.4deg); transition: transform 240ms ease, box-shadow 240ms ease; }
.photo-frame:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 16px 18px 0 var(--blue); }
.photo-stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 12px; background: linear-gradient(180deg, #fffdf5, #e6e1d3); overflow: hidden; }
.photo-object { width: 42%; height: 58%; border-radius: 18px 18px 42% 42% / 18px 18px 26% 26%; background: linear-gradient(150deg, var(--blue), #0f5f9e); box-shadow: 0 18px 22px -12px rgba(20, 20, 15, .55); }
.photo-stage small { position: absolute; left: 12px; bottom: 10px; color: #56564f; font: 800 8px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.photo-thumbs { display: flex; gap: 8px; }
.photo-thumbs i { flex: 1; height: 34px; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper); }
.photo-thumbs i.is-active { background: var(--blue); }
.photo-visual-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.photo-visual-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.photo-visual-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }

@media (max-width: 640px) {
  .service-hero { grid-template-columns: minmax(0, 1fr); }
  .service-hero-copy,
  .seo-visual,
  .ads-visual,
  .social-visual,
  .email-visual,
  .branding-visual,
  .copy-visual,
  .feed-visual,
  .article-visual,
  .video-visual,
  .photo-visual { min-width: 0; width: calc(100vw - 40px); max-width: 100%; }
  .service-hero h1,
  .service-lead { max-width: 100%; overflow-wrap: break-word; }

  .seo-visual,
  .ads-visual { transform: none; }

  .seo-visual { box-shadow: 10px 12px 0 var(--blue); }
  .seo-visual-label { align-items: flex-start; padding: 13px 15px 0; }
  .seo-visual-label i { padding: 5px 7px; font-size: 8px; }
  .seo-visual-query { gap: 8px; margin: 15px 14px 13px; padding: 7px 7px 7px 13px; }
  .seo-visual-query strong { font-size: 11px; }
  .seo-visual-query span { padding: 8px 10px; font-size: 8px; }
  .seo-visual-ranks { gap: 8px; padding-inline: 14px; }
  .seo-visual-ranks li { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 10px; }
  .seo-visual-ranks li > span { width: 34px; height: 34px; font-size: 11px; }
  .seo-visual-ranks li.is-you b { font-size: 13px; }
  .seo-visual-ranks li.is-you small { font-size: 9px; }
  .seo-visual-foot { align-items: flex-start; margin-top: 14px; padding: 12px 14px; font-size: 8px; }
  .seo-visual-foot strong { max-width: 58%; text-align: right; }

  .ads-visual { box-shadow: 10px 12px 0 var(--red); }
  .ads-visual-bar { padding: 12px 14px; }
  .ads-visual-search { margin: 15px 14px 11px; padding: 11px 13px; }
  .ads-visual-search strong { font-size: 11px; }
  .ads-visual-ad { margin-inline: 14px; padding: 14px; }
  .ads-visual-ad b { font-size: 16px; }
  .ads-visual-organic { margin: 12px 14px 15px; }
  .ads-visual-organic article { padding: 8px 10px; }
  .ads-visual-foot { align-items: flex-start; padding: 12px 14px; font-size: 8px; }
  .ads-visual-foot strong { max-width: 62%; text-align: right; }

  .social-phone { width: min(270px, 86%); box-shadow: 10px 12px 0 var(--violet); transform: none; }
  .social-phone:hover { transform: translateY(-3px); box-shadow: 12px 15px 0 var(--violet); }
  .social-post-media strong { font-size: 22px; }
  .social-visual-tags { gap: 6px; }
  .social-visual-tags span { padding: 8px 11px; font-size: 8px; }

  .email-letter { width: min(300px, 82%); margin-bottom: -42px; padding: 18px 18px 21px; box-shadow: 9px 10px 0 var(--lime); transform: rotate(-1deg); }
  .email-letter b { font-size: 18px; }
  .email-envelope { width: 94%; height: 148px; }
  .email-envelope > span { bottom: 31px; width: 25px; height: 25px; }
  .email-visual-meta { gap: 6px; margin-top: 14px; }
  .email-visual-meta span { padding: 8px 10px; font-size: 8px; }

  .branding-card { width: min(300px, 84%); box-shadow: 9px 10px 0 var(--violet); transform: rotate(-1deg); }
  .branding-card b { font-size: 24px; }
  .branding-type { width: min(300px, 84%); padding: 10px 14px; }
  .branding-type span { font-size: 26px; }
  .branding-visual-meta { gap: 6px; }
  .branding-visual-meta span { padding: 8px 10px; font-size: 8px; }

  .copy-sheet { width: min(300px, 84%); box-shadow: 9px 10px 0 var(--blue); transform: rotate(-1deg); }
  .copy-sheet b { font-size: 21px; }
  .feed-grid { width: min(300px, 84%); box-shadow: 9px 10px 0 var(--red); transform: rotate(-1deg); }
  .article-sheet { width: min(300px, 84%); box-shadow: 9px 10px 0 var(--lime); transform: rotate(-1deg); }
  .article-sheet b { font-size: 19px; }
  .video-frame { width: min(300px, 84%); box-shadow: 9px 10px 0 var(--violet); transform: rotate(-1deg); }
  .photo-frame { width: min(300px, 84%); box-shadow: 9px 10px 0 var(--blue); transform: rotate(-1deg); }
  .copy-visual-meta span,
  .feed-visual-meta span,
  .article-visual-meta span,
  .video-visual-meta span,
  .photo-visual-meta span { padding: 8px 10px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .social-phone,
  .email-letter,
  .branding-card,
  .copy-sheet,
  .feed-grid,
  .article-sheet,
  .video-frame,
  .photo-frame { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   Familia Automatización — 6 páginas de servicio
   Visual compartido (tarjeta de flujo) + temas por página
   ═══════════════════════════════════════════════════════════ */
.auto-visual { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; color: var(--ink); }
.auto-card { position: relative; z-index: 2; display: grid; gap: 13px; width: min(330px, 86%); padding: 22px 22px 24px; border: 1px solid var(--ink); border-radius: 16px; background: var(--white); transform: rotate(-1.6deg); transition: transform 240ms ease, box-shadow 240ms ease; }
.auto-card:hover { transform: rotate(0deg) translateY(-4px); }
.auto-card-head { display: flex; align-items: center; gap: 12px; }
.auto-card-head i { display: grid; place-content: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--ink); border-radius: 10px; color: var(--white); font: 800 15px/1 "Space Grotesk", system-ui, sans-serif; font-style: normal; }
.auto-card-head small { color: #56564f; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.auto-card b { color: var(--ink); font: 700 23px/1.05 "Space Grotesk", system-ui, sans-serif; letter-spacing: -.02em; }
.auto-rows { display: grid; gap: 8px; }
.auto-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: #56564f; font-size: 12px; font-weight: 600; }
.auto-row span { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 6px; color: var(--white); font: 800 9px/1 "Space Grotesk", system-ui, sans-serif; }
.auto-row.is-active { background: var(--white); color: var(--ink); font-weight: 700; }
.auto-cta { justify-self: start; display: inline-flex; align-items: center; gap: 9px; margin-top: 3px; padding: 11px 16px; border-radius: 10px; color: var(--white); font: 800 11px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.auto-cta i { font-style: normal; }
.auto-visual-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.auto-visual-meta span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.auto-visual-meta span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

/* ── Formularios inteligentes (azul) ── */
.forms-page .service-kicker { color: var(--blue); }
.forms-page .service-kicker i { box-shadow: 0 0 0 6px rgba(22, 142, 229, .12); }
.forms-page .service-hero h1 span { color: var(--blue); }
.forms-page .service-hero::after { background: var(--blue); }
.forms-page .breadcrumbs li + li::before { color: var(--blue); }
.forms-page .direct-answer,
.forms-page .service-plan { background: var(--blue); }
.forms-page .service-section-heading-light > p,
.forms-page .scope-note span { color: #72c4ff; }
.forms-page .include-grid article:hover { border-color: var(--blue); background: rgba(22, 142, 229, .05); }
.forms-page .include-grid article > span { color: #72c4ff; }
.forms-page .plan-card header i,
.forms-page .plan-card > a { background: var(--lime); }
.forms-page .service-faq .faq { box-shadow: 14px 14px 0 var(--blue); }
.forms-page .auto-card { box-shadow: 13px 14px 0 var(--blue); }
.forms-page .auto-card:hover { box-shadow: 16px 18px 0 var(--blue); }
.forms-page .auto-card-head i,
.forms-page .auto-row span,
.forms-page .auto-cta { background: var(--blue); }
.forms-page .auto-row.is-active { border-color: var(--blue); }
.forms-page .auto-visual-meta span::before { background: var(--blue); }

/* ── Integración con WhatsApp (lima; usa el acento base) ── */
.whatsapp-page .breadcrumbs li + li::before { color: var(--lime); }
.whatsapp-page .service-faq .faq { box-shadow: 14px 14px 0 var(--lime); }
.whatsapp-page .auto-card { box-shadow: 13px 14px 0 var(--lime); }
.whatsapp-page .auto-card:hover { box-shadow: 16px 18px 0 var(--lime); }
.whatsapp-page .auto-card-head i,
.whatsapp-page .auto-row span,
.whatsapp-page .auto-cta { background: var(--lime); color: var(--ink); }
.whatsapp-page .auto-row.is-active { border-color: var(--ink); }
.whatsapp-page .auto-visual-meta span::before { background: var(--lime); }

/* ── Chatbots (violeta) ── */
.chatbot-page .service-kicker { color: var(--violet); }
.chatbot-page .service-kicker i { box-shadow: 0 0 0 6px rgba(155, 140, 255, .12); }
.chatbot-page .service-hero h1 span { color: var(--violet); }
.chatbot-page .service-hero::after { background: var(--violet); }
.chatbot-page .breadcrumbs li + li::before { color: var(--violet); }
.chatbot-page .direct-answer,
.chatbot-page .service-plan { background: var(--violet); }
.chatbot-page .service-section-heading-light > p,
.chatbot-page .scope-note span { color: var(--violet); }
.chatbot-page .include-grid article:hover { border-color: var(--violet); background: rgba(155, 140, 255, .05); }
.chatbot-page .include-grid article > span { color: var(--violet); }
.chatbot-page .plan-card header i,
.chatbot-page .plan-card > a { background: var(--lime); }
.chatbot-page .service-faq .faq { box-shadow: 14px 14px 0 var(--violet); }
.chatbot-page .auto-card { box-shadow: 13px 14px 0 var(--violet); }
.chatbot-page .auto-card:hover { box-shadow: 16px 18px 0 var(--violet); }
.chatbot-page .auto-card-head i,
.chatbot-page .auto-row span,
.chatbot-page .auto-cta { background: var(--violet); }
.chatbot-page .auto-row.is-active { border-color: var(--violet); }
.chatbot-page .auto-visual-meta span::before { background: var(--violet); }

/* ── Automatización de correos (azul) ── */
.mailflow-page .service-kicker { color: var(--blue); }
.mailflow-page .service-kicker i { box-shadow: 0 0 0 6px rgba(22, 142, 229, .12); }
.mailflow-page .service-hero h1 span { color: var(--blue); }
.mailflow-page .service-hero::after { background: var(--blue); }
.mailflow-page .breadcrumbs li + li::before { color: var(--blue); }
.mailflow-page .direct-answer,
.mailflow-page .service-plan { background: var(--blue); }
.mailflow-page .service-section-heading-light > p,
.mailflow-page .scope-note span { color: #72c4ff; }
.mailflow-page .include-grid article:hover { border-color: var(--blue); background: rgba(22, 142, 229, .05); }
.mailflow-page .include-grid article > span { color: #72c4ff; }
.mailflow-page .plan-card header i,
.mailflow-page .plan-card > a { background: var(--lime); }
.mailflow-page .service-faq .faq { box-shadow: 14px 14px 0 var(--blue); }
.mailflow-page .auto-card { box-shadow: 13px 14px 0 var(--blue); }
.mailflow-page .auto-card:hover { box-shadow: 16px 18px 0 var(--blue); }
.mailflow-page .auto-card-head i,
.mailflow-page .auto-row span,
.mailflow-page .auto-cta { background: var(--blue); }
.mailflow-page .auto-row.is-active { border-color: var(--blue); }
.mailflow-page .auto-visual-meta span::before { background: var(--blue); }

/* ── Integración con CRM (violeta) ── */
.crm-page .service-kicker { color: var(--violet); }
.crm-page .service-kicker i { box-shadow: 0 0 0 6px rgba(155, 140, 255, .12); }
.crm-page .service-hero h1 span { color: var(--violet); }
.crm-page .service-hero::after { background: var(--violet); }
.crm-page .breadcrumbs li + li::before { color: var(--violet); }
.crm-page .direct-answer,
.crm-page .service-plan { background: var(--violet); }
.crm-page .service-section-heading-light > p,
.crm-page .scope-note span { color: var(--violet); }
.crm-page .include-grid article:hover { border-color: var(--violet); background: rgba(155, 140, 255, .05); }
.crm-page .include-grid article > span { color: var(--violet); }
.crm-page .plan-card header i,
.crm-page .plan-card > a { background: var(--lime); }
.crm-page .service-faq .faq { box-shadow: 14px 14px 0 var(--violet); }
.crm-page .auto-card { box-shadow: 13px 14px 0 var(--violet); }
.crm-page .auto-card:hover { box-shadow: 16px 18px 0 var(--violet); }
.crm-page .auto-card-head i,
.crm-page .auto-row span,
.crm-page .auto-cta { background: var(--violet); }
.crm-page .auto-row.is-active { border-color: var(--violet); }
.crm-page .auto-visual-meta span::before { background: var(--violet); }

/* ── Reservas y pagos online (rojo) ── */
.bookingpay-page .service-kicker { color: var(--red); }
.bookingpay-page .service-kicker i { box-shadow: 0 0 0 6px rgba(240, 62, 40, .12); }
.bookingpay-page .service-hero h1 span { color: var(--red); }
.bookingpay-page .service-hero::after { background: var(--red); }
.bookingpay-page .breadcrumbs li + li::before { color: var(--red); }
.bookingpay-page .direct-answer,
.bookingpay-page .service-plan { background: var(--red); }
.bookingpay-page .service-section-heading-light > p,
.bookingpay-page .scope-note span { color: #ff8a78; }
.bookingpay-page .include-grid article:hover { border-color: var(--red); background: rgba(240, 62, 40, .05); }
.bookingpay-page .include-grid article > span { color: #ff8a78; }
.bookingpay-page .plan-card header i,
.bookingpay-page .plan-card > a { background: var(--lime); }
.bookingpay-page .service-faq .faq { box-shadow: 14px 14px 0 var(--red); }
.bookingpay-page .auto-card { box-shadow: 13px 14px 0 var(--red); }
.bookingpay-page .auto-card:hover { box-shadow: 16px 18px 0 var(--red); }
.bookingpay-page .auto-card-head i,
.bookingpay-page .auto-row span,
.bookingpay-page .auto-cta { background: var(--red); }
.bookingpay-page .auto-row.is-active { border-color: var(--red); }
.bookingpay-page .auto-visual-meta span::before { background: var(--red); }

/* ── Dominio y alojamiento (azul) ── */
.domain-page .service-kicker { color: var(--blue); }
.domain-page .service-kicker i { box-shadow: 0 0 0 6px rgba(22, 142, 229, .12); }
.domain-page .service-hero h1 span { color: var(--blue); }
.domain-page .service-hero::after { background: var(--blue); }
.domain-page .breadcrumbs li + li::before { color: var(--blue); }
.domain-page .direct-answer,
.domain-page .service-plan { background: var(--blue); }
.domain-page .service-section-heading-light > p,
.domain-page .scope-note span { color: #72c4ff; }
.domain-page .include-grid article:hover { border-color: var(--blue); background: rgba(22, 142, 229, .05); }
.domain-page .include-grid article > span { color: #72c4ff; }
.domain-page .plan-card header i,
.domain-page .plan-card > a { background: var(--lime); }
.domain-page .service-faq .faq { box-shadow: 14px 14px 0 var(--blue); }
.domain-page .auto-card { box-shadow: 13px 14px 0 var(--blue); }
.domain-page .auto-card:hover { box-shadow: 16px 18px 0 var(--blue); }
.domain-page .auto-card-head i,
.domain-page .auto-row span,
.domain-page .auto-cta { background: var(--blue); }
.domain-page .auto-row.is-active { border-color: var(--blue); }
.domain-page .auto-visual-meta span::before { background: var(--blue); }

/* ── Optimización de velocidad (lima; usa el acento base) ── */
.speed-page .breadcrumbs li + li::before { color: var(--lime); }
.speed-page .service-faq .faq { box-shadow: 14px 14px 0 var(--lime); }
.speed-page .auto-card { box-shadow: 13px 14px 0 var(--lime); }
.speed-page .auto-card:hover { box-shadow: 16px 18px 0 var(--lime); }
.speed-page .auto-card-head i,
.speed-page .auto-row span,
.speed-page .auto-cta { background: var(--lime); color: var(--ink); }
.speed-page .auto-row.is-active { border-color: var(--ink); }
.speed-page .auto-visual-meta span::before { background: var(--lime); }

/* ── Seguridad y copias de respaldo (violeta) ── */
.security-page .service-kicker { color: var(--violet); }
.security-page .service-kicker i { box-shadow: 0 0 0 6px rgba(155, 140, 255, .12); }
.security-page .service-hero h1 span { color: var(--violet); }
.security-page .service-hero::after { background: var(--violet); }
.security-page .breadcrumbs li + li::before { color: var(--violet); }
.security-page .direct-answer,
.security-page .service-plan { background: var(--violet); }
.security-page .service-section-heading-light > p,
.security-page .scope-note span { color: var(--violet); }
.security-page .include-grid article:hover { border-color: var(--violet); background: rgba(155, 140, 255, .05); }
.security-page .include-grid article > span { color: var(--violet); }
.security-page .plan-card header i,
.security-page .plan-card > a { background: var(--lime); }
.security-page .service-faq .faq { box-shadow: 14px 14px 0 var(--violet); }
.security-page .auto-card { box-shadow: 13px 14px 0 var(--violet); }
.security-page .auto-card:hover { box-shadow: 16px 18px 0 var(--violet); }
.security-page .auto-card-head i,
.security-page .auto-row span,
.security-page .auto-cta { background: var(--violet); }
.security-page .auto-row.is-active { border-color: var(--violet); }
.security-page .auto-visual-meta span::before { background: var(--violet); }

/* ── Analítica e informes (rojo) ── */
.analytics-page .service-kicker { color: var(--red); }
.analytics-page .service-kicker i { box-shadow: 0 0 0 6px rgba(240, 62, 40, .12); }
.analytics-page .service-hero h1 span { color: var(--red); }
.analytics-page .service-hero::after { background: var(--red); }
.analytics-page .breadcrumbs li + li::before { color: var(--red); }
.analytics-page .direct-answer,
.analytics-page .service-plan { background: var(--red); }
.analytics-page .service-section-heading-light > p,
.analytics-page .scope-note span { color: #ff8a78; }
.analytics-page .include-grid article:hover { border-color: var(--red); background: rgba(240, 62, 40, .05); }
.analytics-page .include-grid article > span { color: #ff8a78; }
.analytics-page .plan-card header i,
.analytics-page .plan-card > a { background: var(--lime); }
.analytics-page .service-faq .faq { box-shadow: 14px 14px 0 var(--red); }
.analytics-page .auto-card { box-shadow: 13px 14px 0 var(--red); }
.analytics-page .auto-card:hover { box-shadow: 16px 18px 0 var(--red); }
.analytics-page .auto-card-head i,
.analytics-page .auto-row span,
.analytics-page .auto-cta { background: var(--red); }
.analytics-page .auto-row.is-active { border-color: var(--red); }
.analytics-page .auto-visual-meta span::before { background: var(--red); }

@media (max-width: 640px) {
  .auto-visual { min-width: 0; width: calc(100vw - 40px); max-width: 100%; }
  .auto-card { width: min(300px, 84%); transform: rotate(-1deg); }
  .auto-card b { font-size: 21px; }
  .auto-visual-meta { gap: 6px; }
  .auto-visual-meta span { padding: 8px 10px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .auto-card { transition: none; }
}