/* =========================================================
   WIZZIOSOFT SOLUTIONS — INDIVIDUAL SERVICE DETAIL PAGES
   ========================================================= */

.service-detail-page { background: var(--paper); }
.desktop-nav .active-link { color: var(--blue); }
.desktop-nav .active-link::after { transform: scaleX(1); }

/* PAGE ACCENTS */
.service-page-wordpress { --service-accent: #25abe1; --service-soft: #dff7ff; --service-deep: #283890; }
.service-page-shopify { --service-accent: #22b573; --service-soft: #e7f8ef; --service-deep: #175a45; }
.service-page-custom { --service-accent: #6e72e8; --service-soft: #ececff; --service-deep: #30348c; }
.service-page-seo { --service-accent: #15b8de; --service-soft: #e1f8fd; --service-deep: #165f84; }
.service-page-marketing { --service-accent: #5f67dd; --service-soft: #eceeff; --service-deep: #31378f; }

/* HERO */
.detail-hero {
  position: relative;
  min-height: 100svh;
  padding: 165px 0 85px;
  overflow: hidden;
  background:
    radial-gradient(circle at 79% 42%, color-mix(in srgb, var(--service-accent) 16%, transparent), transparent 30%),
    linear-gradient(180deg, #fcfdff, #f0f5ff);
}
.detail-hero-grid,
.detail-showcase-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(40,56,144,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,56,144,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .42;
  mask-image: linear-gradient(to bottom, transparent, black 16%, black 78%, transparent);
}
.detail-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.detail-glow-one {
  right: -220px;
  top: 0;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, color-mix(in srgb, var(--service-accent) 21%, transparent), transparent 68%);
}
.detail-glow-two {
  left: -310px;
  bottom: -330px;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(93,86,211,.12), transparent 68%);
}
.detail-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(540px,1.1fr);
  align-items: center;
  gap: 55px;
}
.page-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 27px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.page-breadcrumb strong { color: var(--service-deep); }
.page-breadcrumb a:hover { color: var(--service-accent); }
.detail-service-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: var(--service-deep);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.detail-service-label span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 25px;
  color: var(--service-accent);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 8px;
}
.detail-hero-title {
  max-width: 850px;
  font-size: clamp(67px, 6.8vw, 116px);
}
.detail-hero-title em {
  color: var(--service-accent);
}
.detail-hero-description {
  max-width: 680px;
  margin: 38px 0 0;
  color: var(--text);
  font-size: clamp(18px,1.45vw,21px);
}
.detail-hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 38px;
}
.detail-hero-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 610px;
  margin-top: 55px;
  padding-top: 22px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.detail-hero-note i {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  background: var(--service-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--service-accent) 12%, transparent);
}
.detail-hero-note p { margin: 0; }
.detail-hero-visual { min-width: 0; perspective: 1200px; }

/* HERO MACHINES */
.detail-hero-machine {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(18,26,85,.1);
  border-radius: 29px;
  box-shadow: 0 45px 100px rgba(25,42,118,.18);
  backdrop-filter: blur(15px);
}
.machine-top,
.app-shell-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 52px;
  padding: 0 18px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  font-weight: 700;
}
.machine-top > div,
.app-shell-top > div { display:flex; gap:5px; }
.machine-top i,
.app-shell-top > div i { width:6px;height:6px;background:#d5dbea;border-radius:50%; }
.machine-top b { justify-self:end;padding:6px 10px;color:white;background:var(--service-deep);border-radius:999px;font-size:7px; }
.machine-body { display:grid;grid-template-columns:70px 1fr;min-height:598px; }
.machine-body aside,
.custom-shell aside {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  padding:23px 0;
  background:#f2f5fd;
  border-right:1px solid var(--line);
}
.machine-body aside img,
.custom-shell aside img { width:35px;height:28px;object-fit:contain; }
.machine-body aside i,
.custom-shell aside i { width:22px;height:3px;background:#cad2e7;border-radius:3px; }
.machine-body aside .selected,
.custom-shell aside .selected { width:31px;height:31px;background:var(--service-deep);border-radius:8px; }
.machine-canvas { padding:20px; }
.canvas-bar { display:flex;justify-content:space-between;margin-bottom:15px;color:var(--navy);font-size:9px;font-weight:700; }
.canvas-bar i { color:var(--muted);font-style:normal;font-size:7px; }
.canvas-hero {
  position:relative;
  min-height:375px;
  padding:52px 42px;
  overflow:hidden;
  color:white;
  background:
    radial-gradient(circle at 80% 15%, color-mix(in srgb, var(--service-accent) 58%, transparent), transparent 30%),
    linear-gradient(145deg,var(--navy),var(--service-deep));
  border-radius:18px;
}
.canvas-hero small { color:rgba(255,255,255,.6);font-size:7px;letter-spacing:.15em; }
.canvas-hero h3 { position:relative;z-index:2;margin:65px 0 26px;font:650 clamp(44px,4vw,65px)/.95 "Manrope";letter-spacing:-.06em; }
.canvas-hero button { position:relative;z-index:2;padding:10px 14px;color:var(--navy);background:white;border:0;border-radius:999px;font-size:8px; }
.canvas-hero > b { position:absolute;right:-55px;bottom:-95px;width:300px;height:300px;border:1px solid rgba(255,255,255,.25);border-radius:50%;box-shadow:inset 0 0 0 50px rgba(255,255,255,.06),inset 0 0 0 100px rgba(255,255,255,.06); }
.canvas-blocks { display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:12px; }
.canvas-blocks i { height:100px;background:#eef2fb;border-radius:11px; }

/* SHOPIFY */
.machine-shopify { color:#2a231f;background:#f5efe8; }
.store-nav { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:65px;padding:0 28px;border-bottom:1px solid rgba(60,40,20,.1);font-size:10px; }
.store-nav strong { font:800 16px "Manrope";letter-spacing:.14em; }
.store-nav i { justify-self:end;font-style:normal; }
.store-stage { display:grid;grid-template-columns:.92fr 1.08fr;min-height:500px; }
.store-copy { padding:73px 20px 35px 45px; }
.store-copy small { font-size:7px;letter-spacing:.16em; }
.store-copy h3 { margin:64px 0 28px;font:600 clamp(43px,4.2vw,68px)/.95 "Manrope";letter-spacing:-.065em; }
.store-copy button { padding:11px 15px;color:white;background:#2a231f;border:0;border-radius:999px;font-size:8px; }
.store-object { position:relative;display:flex;align-items:center;justify-content:center;background:#d9c1a9; }
.object-body { position:absolute;width:52%;height:220px;background:#302824;border-radius:50% 50% 18px 18px;transform:rotate(-4deg); }
.store-object > i,.store-object > b { position:absolute;bottom:92px;width:15px;height:120px;background:#302824; }
.store-object > i { left:31%;transform:rotate(8deg); }
.store-object > b { right:31%;transform:rotate(-8deg); }
.store-object > span { position:absolute;left:28px;right:28px;bottom:28px;display:flex;justify-content:space-between;font-size:10px; }
.store-bottom { display:grid;grid-template-columns:repeat(3,1fr);min-height:85px;border-top:1px solid rgba(60,40,20,.1); }
.store-bottom span { display:grid;place-items:center;border-right:1px solid rgba(60,40,20,.1);font-size:8px;text-transform:uppercase;letter-spacing:.09em; }
.store-bottom span:last-child { border:0; }

/* CUSTOM */
.machine-custom { color:var(--ink);background:#f8faff; }
.app-shell-top b { justify-self:end;display:flex;align-items:center;gap:6px;color:#159565;font-size:7px;letter-spacing:.12em; }
.app-shell-top b i { width:6px;height:6px;background:#1fc183;border-radius:50%; }
.custom-shell { display:grid;grid-template-columns:68px 1fr;min-height:598px; }
.custom-main { padding:28px; }
.custom-head { display:flex;justify-content:space-between;align-items:center; }
.custom-head small { color:var(--muted);font-size:7px;letter-spacing:.13em; }
.custom-head h3 { margin:5px 0 0;font:650 27px "Manrope";letter-spacing:-.04em; }
.custom-head button { padding:9px 13px;color:white;background:var(--service-deep);border:0;border-radius:999px;font-size:8px; }
.custom-stats { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:25px; }
.custom-stats article { display:grid;padding:17px;background:white;border:1px solid var(--line);border-radius:13px; }
.custom-stats span { color:var(--muted);font-size:8px; }
.custom-stats strong { margin:17px 0 3px;font:700 25px "Manrope"; }
.custom-stats i { color:#159b6e;font-size:8px;font-style:normal; }
.custom-data { display:grid;grid-template-columns:1.5fr .7fr;gap:10px;margin-top:10px; }
.custom-chart,.custom-feed { position:relative;min-height:280px;padding:18px;overflow:hidden;background:white;border:1px solid var(--line);border-radius:13px; }
.custom-chart > span,.custom-feed > span { font-size:9px;font-weight:700; }
.custom-chart svg { position:absolute;inset:65px 15px 25px;width:calc(100% - 30px);height:calc(100% - 90px); }
.custom-chart path { fill:none;stroke:var(--service-accent);stroke-width:3;filter:drop-shadow(0 8px 10px color-mix(in srgb,var(--service-accent) 30%,transparent)); }
.custom-feed { display:grid;align-content:start;gap:18px; }
.custom-feed i { height:32px;background:linear-gradient(90deg,#edf1fb 25%,#f8faff 25%);border-radius:6px; }

/* SEO */
.machine-seo { padding:28px; }
.seo-hero-top { display:flex;justify-content:space-between;align-items:center; }
.seo-hero-top > div { display:grid; }
.seo-hero-top strong { font:650 14px "Manrope"; }
.seo-hero-top span { color:var(--muted);font-size:8px; }
.seo-hero-top button { padding:8px 11px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;font-size:7px; }
.seo-hero-metric { margin-top:45px; }
.seo-hero-metric small { color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.14em; }
.seo-hero-metric > div { display:flex;align-items:end;gap:17px;margin-top:8px; }
.seo-hero-metric strong { font:650 clamp(50px,5vw,76px)/1 "Manrope";letter-spacing:-.065em; }
.seo-hero-metric span { margin-bottom:8px;padding:5px 9px;color:#158f65;background:#e4faef;border-radius:999px;font-size:8px;font-weight:800; }
.seo-hero-chart { position:relative;height:300px;margin-top:18px;overflow:hidden;background:linear-gradient(#fbfcff,#f2f6ff);border:1px solid var(--line);border-radius:15px; }
.seo-hero-chart > div:first-child { position:absolute;inset:0;display:grid;align-content:space-around; }
.seo-hero-chart > div:first-child i { height:1px;background:var(--line); }
.seo-hero-chart svg { position:absolute;inset:20px 0 0;width:100%;height:calc(100% - 20px); }
.seo-hero-chart .area { fill:url(#heroSeoGradient); }
.seo-hero-chart .line { fill:none;stroke:var(--service-accent);stroke-width:4; }
.seo-point { position:absolute;right:8%;top:18%;display:grid;padding:10px 12px;color:white;background:var(--navy);border-radius:10px; }
.seo-point strong { font:700 15px "Manrope"; }
.seo-point span { color:rgba(255,255,255,.58);font-size:7px; }
.seo-hero-terms { margin-top:12px; }
.seo-hero-terms span { display:grid;grid-template-columns:1fr auto;padding:10px 0;color:#59617f;border-bottom:1px solid var(--line);font-size:9px; }
.seo-hero-terms b { color:var(--service-deep); }

/* MARKETING */
.machine-marketing { padding:26px; }
.campaign-top { display:flex;justify-content:space-between;align-items:center; }
.campaign-top > div { display:grid; }
.campaign-top strong { font:650 14px "Manrope"; }
.campaign-top span { color:var(--muted);font-size:8px; }
.campaign-top button { padding:8px 11px;color:var(--navy);background:var(--paper);border:1px solid var(--line);border-radius:999px;font-size:7px; }
.campaign-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:24px; }
.campaign-metrics article { display:grid;padding:17px;background:#f7f9ff;border:1px solid var(--line);border-radius:12px; }
.campaign-metrics span { color:var(--muted);font-size:8px; }
.campaign-metrics strong { margin:12px 0 2px;font:700 24px "Manrope";letter-spacing:-.04em; }
.campaign-metrics i { color:#159568;font-size:8px;font-style:normal; }
.campaign-main { display:grid;grid-template-columns:1.3fr .7fr;gap:10px;margin-top:10px; }
.campaign-bars,.campaign-ad { min-height:390px;padding:18px;background:#f7f9ff;border:1px solid var(--line);border-radius:13px; }
.campaign-bars > div { display:flex;justify-content:space-between;font-size:9px;font-weight:700; }
.campaign-bars > div b { color:var(--muted);font-size:7px; }
.campaign-bars section { display:flex;align-items:end;gap:8px;height:315px;padding-top:42px;border-bottom:1px solid var(--line); }
.campaign-bars section i { flex:1;height:var(--h);min-width:8px;background:linear-gradient(var(--service-accent),var(--service-deep));border-radius:5px 5px 0 0; }
.campaign-ad > span { font-size:8px;font-weight:700; }
.campaign-ad > div { min-height:250px;margin-top:16px;padding:22px 17px;color:white;background:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--service-accent) 55%,transparent),transparent 34%),var(--navy);border-radius:12px; }
.campaign-ad small { color:rgba(255,255,255,.56);font-size:6px;letter-spacing:.12em; }
.campaign-ad h3 { margin:65px 0 23px;font:600 27px/1 "Manrope";letter-spacing:-.05em; }
.campaign-ad button { padding:8px 10px;color:var(--navy);background:white;border:0;border-radius:999px;font-size:7px; }
.campaign-ad p { display:flex;justify-content:space-between;color:var(--muted);font-size:7px; }
.campaign-ad p b { color:var(--navy); }
.campaign-status { display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:13px;color:var(--muted);border-top:1px solid var(--line);font-size:8px; }
.campaign-status i { width:7px;height:7px;background:#1fc183;border-radius:50%; }
.campaign-status b { margin-left:auto;color:var(--service-deep);letter-spacing:.12em; }

/* FLOAT CARDS */
.hero-float {
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:calc(100% - 36px);
  padding:13px 16px;
  background:rgba(255,255,255,.93);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 18px 45px rgba(25,42,118,.14);
  backdrop-filter:blur(14px);
}
.hero-float strong { color:var(--service-accent);font:700 19px "Manrope"; }
.hero-float span { color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; }
.hero-float.float-a { right:18px;top:15%; }
.hero-float.float-b { left:18px;bottom:12%; }

/* OTHER SERVICES NAV */
.detail-service-nav {
  position:sticky;
  z-index:110;
  top:93px;
  background:rgba(255,255,255,.9);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.detail-service-nav-inner {
  display:flex;
  align-items:center;
  width:100%;
  min-height:64px;
  margin:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.detail-service-nav-inner::-webkit-scrollbar { display:none; }
.detail-service-nav-inner > span {
  flex:none;
  align-self:stretch;
  display:flex;
  align-items:center;
  margin:0;
  padding:0 30px 0 max(48px,calc((100vw - var(--container))/2));
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
}
.detail-service-nav-inner a {
  flex:1 1 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-width:0;
  padding:22px 18px;
  color:#535b7a;
  border-left:1px solid var(--line);
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.detail-service-nav-inner a:last-child { border-right:1px solid var(--line); }
.detail-service-nav-inner a:hover,.detail-service-nav-inner a.active { color:var(--navy);background:var(--service-soft); }
.detail-service-nav-inner a i { color:var(--service-accent);font-size:10px;font-style:normal; }

/* FIT */
.detail-fit { background:white; }
.detail-fit-grid { display:grid;grid-template-columns:minmax(0,1.42fr) minmax(360px,.72fr);gap:95px; }
.detail-fit-side { display:flex;flex-direction:column;justify-content:space-between; }
.detail-audience { margin-top:55px; }
.detail-audience small { color:var(--muted);font-size:13px !important;font-weight:800;letter-spacing:.14em; }
.detail-audience > div { display:flex;flex-wrap:wrap;gap:7px;margin-top:14px; }
.detail-audience span,.deliverables-cloud span { padding:9px 14px;background:var(--paper);border:1px solid var(--line);border-radius:999px;color:#59617e;font-size:13px;font-weight:700;line-height:1.25; }

/* CAPABILITIES */
.detail-capabilities { background:var(--paper); }
.detail-section-head { display:flex;justify-content:space-between;align-items:end;gap:70px;margin-bottom:75px; }
.detail-section-head > p { max-width:430px;color:var(--text); }
.capabilities-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:17px; }
.capability-card {
  position:relative;
  min-height:390px;
  padding:28px;
  background:white;
  border:1px solid var(--line);
  border-radius:22px;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;
}
.capability-card:hover { transform:translateY(-8px);border-color:color-mix(in srgb,var(--service-accent) 45%,var(--line));box-shadow:0 28px 65px rgba(25,42,118,.1); }
.capability-card > span { color:var(--service-accent);font-size:13px;font-weight:800; }
.capability-icon { position:relative;width:85px;height:85px;margin:48px 0 42px;border:1px solid color-mix(in srgb,var(--service-accent) 30%,transparent);border-radius:22px;transform:rotate(8deg); }
.capability-icon::before { content:"";position:absolute;inset:10px;background:linear-gradient(145deg,var(--service-deep),var(--service-accent));border-radius:16px;box-shadow:0 15px 27px color-mix(in srgb,var(--service-accent) 25%,transparent); }
.capability-icon i { position:absolute;z-index:2;display:block; }
.capability-icon i:nth-child(1) { left:27px;top:29px;width:30px;height:2px;background:white;box-shadow:0 9px 0 rgba(255,255,255,.65),0 18px 0 rgba(255,255,255,.4); }
.capability-icon i:nth-child(2) { right:20px;top:20px;width:8px;height:8px;background:var(--service-soft);border-radius:50%; }
.capability-card h3 { margin:0 0 14px;font:650 25px/1.12 "Manrope";letter-spacing:-.04em; }
.capability-card p { margin:0;color:var(--text);font-size:14px;line-height:1.6; }

/* SHOWCASE */
.detail-showcase {
  position:relative;
  padding:145px 0;
  overflow:hidden;
  color:white;
  background:
    radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--service-accent) 35%,transparent),transparent 30%),
    var(--navy);
}
.detail-showcase-grid { opacity:.5;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); }
.detail-showcase-layout { position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:100px; }
.showcase-copy > p { max-width:700px;margin:38px 0;color:rgba(255,255,255,.62);font-size:18px; }
.showcase-metrics { display:grid;border-top:1px solid var(--line-light); }
.showcase-metrics article { display:grid;grid-template-columns:150px 1fr;align-items:center;gap:25px;padding:30px 0;border-bottom:1px solid var(--line-light); }
.showcase-metrics strong { color:var(--service-accent);font:650 clamp(40px,4vw,64px)/1 "Manrope";letter-spacing:-.06em; }
.showcase-metrics span { color:rgba(255,255,255,.6);font-size:14px; }

/* PROCESS */
.detail-process { background:white; }
.detail-process-layout { display:grid;grid-template-columns:.78fr 1fr;gap:115px; }
.detail-process-sticky { position:sticky;top:130px;align-self:start; }
.detail-process-sticky > p { max-width:480px;margin:35px 0;color:var(--text); }
.detail-process-list { border-top:1px solid var(--line); }
.detail-process-step { display:grid;grid-template-columns:70px 1fr;gap:25px;padding:42px 0;border-bottom:1px solid var(--line); }
.detail-process-step > span { color:var(--service-accent);font-size:13px;font-weight:800; }
.detail-process-step small { color:var(--muted);font-size:13px !important;font-weight:800;letter-spacing:.14em; }
.detail-process-step h3 { margin:10px 0 12px;font:600 clamp(29px,3vw,43px)/1.08 "Manrope";letter-spacing:-.045em; }
.detail-process-step p { max-width:620px;margin:0;color:var(--text); }

/* DELIVERABLES */
.detail-deliverables { color:white;background:linear-gradient(145deg,var(--service-deep),var(--navy)); }
.deliverables-layout { display:grid;grid-template-columns:1.1fr .9fr;align-items:end;gap:95px; }
.deliverables-side > p { color:rgba(255,255,255,.62);font-size:18px; }
.deliverables-cloud { display:flex;flex-wrap:wrap;gap:9px;margin-top:38px; }
.deliverables-cloud span { color:white;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);padding:11px 16px;font-size:13px;line-height:1.25; }

/* FAQ */
.detail-faq { background:var(--paper); }
.detail-faq-layout { display:grid;grid-template-columns:.72fr 1.28fr;gap:100px; }
.detail-faq-intro { align-self:start; }
.detail-faq-intro > p { max-width:390px;margin:35px 0 28px;color:var(--text); }
.detail-faq-list { border-top:1px solid var(--line); }
.detail-faq-item { border-bottom:1px solid var(--line); }
.detail-faq-item button { display:grid;grid-template-columns:1fr auto;align-items:center;gap:25px;width:100%;padding:28px 0;background:transparent;border:0;text-align:left;cursor:pointer; }
.detail-faq-item button span { font:600 clamp(21px,2vw,29px)/1.25 "Manrope";letter-spacing:-.035em; }
.detail-faq-item button i { font-size:26px;font-style:normal;font-weight:300;transition:transform .4s var(--ease); }
.detail-faq-item.active button i { transform:rotate(45deg); }
.detail-faq-answer { height:0;overflow:hidden; }
.detail-faq-answer p { max-width:760px;margin:0;padding:0 65px 30px 0;color:var(--text); }
.detail-contact { padding-top:150px;padding-bottom:150px; }

/* RESPONSIVE */
@media (max-width:1180px) {
  .detail-hero-layout { grid-template-columns:.88fr 1.12fr;gap:28px; }
  .detail-hero-title { font-size:clamp(62px,6.7vw,92px); }
  .detail-process-layout { gap:70px; }
}
@media (max-width:960px) {
  .detail-hero { min-height:auto;padding-top:145px; }
  .detail-hero-layout { grid-template-columns:1fr; }
  .detail-hero-copy { max-width:840px; }
  .detail-hero-visual { width:min(100%,760px);margin:25px auto 0; }
  .detail-service-nav { top:82px; }
  .detail-service-nav-inner > span { display:none; }
  .detail-service-nav-inner a:first-of-type { border-left:0; }
  .detail-fit-grid { grid-template-columns:1fr;gap:50px; }
  .capabilities-grid { grid-template-columns:repeat(2,1fr); }
  .detail-showcase-layout { grid-template-columns:1fr;gap:60px; }
  .detail-process-layout { grid-template-columns:1fr; }
  .detail-process-sticky { position:relative;top:auto; }
  .deliverables-layout { grid-template-columns:1fr;gap:50px; }
  .detail-faq-layout { grid-template-columns:1fr;gap:65px; }
}
@media (max-width:680px) {
  .detail-hero { padding-top:126px;padding-bottom:70px; }
  .detail-hero-title { font-size:clamp(54px,15.5vw,73px); }
  .detail-hero-description { margin-top:27px;font-size:17px; }
  .detail-hero-actions { align-items:flex-start;flex-direction:column;gap:24px; }
  .detail-hero-note { margin-top:42px; }
  .detail-hero-machine { min-height:520px;border-radius:20px; }
  .detail-service-nav { top:76px; }
  .detail-service-nav-inner { width:100%;padding:0; }
  .detail-service-nav-inner a {
    flex:0 0 auto;
    min-width:145px;
    padding:18px 15px;
    font-size:12px;
  }
  .deliverables-cloud span { padding:10px 14px;font-size:12px; }
  .machine-body { grid-template-columns:46px 1fr;min-height:468px; }
  .machine-body aside { gap:17px; }
  .machine-body aside img { width:27px; }
  .machine-canvas { padding:11px; }
  .canvas-hero { min-height:300px;padding:38px 22px; }
  .canvas-hero h3 { margin-top:43px;font-size:42px; }
  .canvas-blocks i { height:75px; }
  .store-nav { grid-template-columns:1fr auto;padding:0 18px; }
  .store-nav span { display:none; }
  .store-stage { grid-template-columns:1fr;min-height:380px; }
  .store-copy { padding:38px 24px 12px; }
  .store-copy h3 { margin:34px 0 20px;font-size:47px; }
  .store-object { min-height:220px; }
  .object-body { height:110px; }
  .store-object > i,.store-object > b { bottom:58px;height:65px; }
  .store-bottom { min-height:70px; }
  .custom-shell { grid-template-columns:45px 1fr;min-height:468px; }
  .custom-shell aside { gap:17px; }
  .custom-main { padding:15px; }
  .custom-head h3 { font-size:20px; }
  .custom-head button { display:none; }
  .custom-stats { grid-template-columns:1fr 1fr; }
  .custom-stats article:last-child { display:none; }
  .custom-data { grid-template-columns:1fr; }
  .custom-feed { display:none; }
  .custom-chart { min-height:260px; }
  .machine-seo,.machine-marketing { padding:18px; }
  .seo-hero-chart { height:230px; }
  .seo-hero-terms span:last-child { display:none; }
  .campaign-metrics { grid-template-columns:1fr 1fr; }
  .campaign-metrics article:last-child { display:none; }
  .campaign-main { grid-template-columns:1fr; }
  .campaign-ad { display:none; }
  .campaign-bars { min-height:335px; }
  .campaign-bars section { height:275px; }
  .hero-float { padding:9px 11px; }
  .hero-float strong { font-size:15px; }
  .hero-float.float-a { right:12px;top:13%; }
  .hero-float.float-b { left:12px;bottom:9%; }
  .detail-section-head { align-items:start;flex-direction:column;margin-bottom:50px; }
  .capabilities-grid { grid-template-columns:1fr; }
  .capability-card { min-height:350px; }
  .detail-showcase { padding:100px 0; }
  .showcase-metrics article { grid-template-columns:115px 1fr; }
  .detail-process-step { grid-template-columns:42px 1fr;padding:34px 0; }
  .detail-faq-answer p { padding-right:0; }
}