/* ==========================================================
       DIGITAL CATALYST — UNIFIED AI VISUAL SYSTEM
       One page, one flow, one brand language.
       ========================================================== */

    .dc-unified-flow {
      --flow-teal:#00A2A7;
      --flow-green:#70BE49;
      --flow-orange:#F7963E;
      --flow-red:#ED3239;
      --flow-ink:#101012;
      --flow-muted:#6c6e75;
      --flow-line:rgba(16,16,18,.09);
      position: relative;
      isolation: isolate;
      overflow: clip;
      background:
        radial-gradient(circle at 3% 16%, rgba(0,162,167,.055), transparent 18%),
        radial-gradient(circle at 96% 39%, rgba(112,190,73,.045), transparent 18%),
        radial-gradient(circle at 6% 66%, rgba(247,150,62,.045), transparent 17%),
        radial-gradient(circle at 96% 88%, rgba(237,50,57,.04), transparent 18%),
        #fff;
    }

    /* Subtle global circuit texture */
    .dc-unified-flow::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:-3;
      pointer-events:none;
      opacity:.26;
      background-image:
        linear-gradient(rgba(16,16,18,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,16,18,.026) 1px, transparent 1px);
      background-size: 54px 54px;
      mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 94%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 94%, transparent 100%);
    }

    /* ---------- Connected section rail ---------- */
    .dc-flow-section {
      position: relative;
      isolation: isolate;
    }

    .dc-flow-section > .container {
      position: relative;
    }

    .dc-flow-section > .container::before {
      content:"";
      position:absolute;
      left:-28px;
      top:-1px;
      bottom:-1px;
      width:1px;
      background:
        linear-gradient(
          to bottom,
          rgba(0,162,167,.10),
          rgba(112,190,73,.24) 28%,
          rgba(247,150,62,.22) 63%,
          rgba(237,50,57,.08)
        );
      pointer-events:none;
    }

    .dc-flow-section > .container::after {
      content: attr(data-flow);
      position:absolute;
      left:-43px;
      top:6px;
      width:30px;
      height:30px;
      display:grid;
      place-items:center;
      border:1px solid rgba(0,162,167,.18);
      border-radius:50%;
      background:#fff;
      color:var(--flow-teal);
      box-shadow:0 6px 18px rgba(16,16,18,.055);
      font:700 .58rem/1 'Poppins',sans-serif;
      letter-spacing:.02em;
      pointer-events:none;
    }

    /* ---------- Section-heading AI glyph ---------- */
    .dc-section-ai-glyph {
      width:48px;
      height:48px;
      margin:0 auto 14px;
      display:grid;
      place-items:center;
      border:1px solid rgba(0,162,167,.15);
      border-radius:15px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.95), rgba(244,250,249,.95));
      color:var(--flow-teal);
      box-shadow:
        0 10px 26px rgba(16,16,18,.06),
        inset 0 0 0 5px rgba(0,162,167,.025);
    }

    .dc-section-ai-glyph svg {
      width:24px;
      height:24px;
    }

    /* ---------- Hero: graphical AI ecosystem ---------- */
    .hero {
      position:relative;
      background:
        radial-gradient(circle at 75% 40%, rgba(0,162,167,.09), transparent 30%),
        radial-gradient(circle at 85% 70%, rgba(112,190,73,.07), transparent 25%),
        linear-gradient(180deg, #fff, #fbfdfc);
    }

    .hero::after {
      content:"";
      position:absolute;
      right:-120px;
      top:8%;
      width:360px;
      height:360px;
      border-radius:50%;
      border:1px dashed rgba(0,162,167,.10);
      pointer-events:none;
    }

    .dc-ai-hero-visual {
      position:relative;
    }

    .dc-ai-hero-stage {
      position:relative;
      width:min(100%, 610px);
      aspect-ratio:1.08 / 1;
      margin-inline:auto;
      display:grid;
      place-items:center;
      isolation:isolate;
    }

    .dc-ai-grid {
      position:absolute;
      inset:5% 4%;
      z-index:-4;
      border-radius:34px;
      background-image:
        linear-gradient(rgba(0,162,167,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,162,167,.05) 1px, transparent 1px);
      background-size:28px 28px;
      mask-image:radial-gradient(circle, #000 45%, transparent 82%);
      -webkit-mask-image:radial-gradient(circle, #000 45%, transparent 82%);
    }

    .dc-ai-hero-frame {
      position:relative;
      z-index:2;
      width:83%;
      padding:13px;
      border:1px solid rgba(16,16,18,.09);
      border-radius:28px;
      background:rgba(255,255,255,.72);
      box-shadow:
        0 28px 60px rgba(16,16,18,.10),
        0 0 0 10px rgba(255,255,255,.58);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
    }

    .dc-ai-hero-frame::before {
      content:"AI GROWTH ENGINE";
      position:absolute;
      left:22px;
      top:18px;
      z-index:4;
      padding:7px 10px;
      border:1px solid rgba(255,255,255,.7);
      border-radius:999px;
      background:rgba(16,16,18,.72);
      color:#fff;
      font:700 .58rem/1 'Poppins',sans-serif;
      letter-spacing:.08em;
      backdrop-filter:blur(8px);
    }

    .dc-ai-hero-frame .hero-growth-image {
      width:100%;
      display:block;
      border-radius:18px;
    }

    .dc-ai-orbit {
      position:absolute;
      z-index:-2;
      border-radius:50%;
      border:1px dashed rgba(0,162,167,.19);
      pointer-events:none;
    }

    .dc-ai-orbit-one {
      width:78%;
      aspect-ratio:1;
    }

    .dc-ai-orbit-two {
      width:98%;
      aspect-ratio:1;
      border-color:rgba(112,190,73,.14);
    }

    .dc-floating-signal {
      --signal:#00A2A7;
      position:absolute;
      z-index:5;
      min-width:145px;
      padding:9px 11px;
      display:flex;
      align-items:center;
      gap:9px;
      border:1px solid color-mix(in srgb, var(--signal) 24%, #e6e8e9);
      border-radius:14px;
      background:rgba(255,255,255,.90);
      color:#23262b;
      box-shadow:0 12px 28px rgba(16,16,18,.09);
      backdrop-filter:blur(12px);
      -webkit-backdrop-filter:blur(12px);
    }

    .dc-signal-icon {
      width:31px;
      height:31px;
      flex:none;
      display:grid;
      place-items:center;
      border-radius:10px;
      background:color-mix(in srgb, var(--signal) 12%, #fff);
      color:var(--signal);
    }

    .dc-signal-icon svg {
      width:17px;
      height:17px;
    }

    .dc-floating-signal strong,
    .dc-floating-signal small {
      display:block;
    }

    .dc-floating-signal strong {
      font:700 .68rem/1.25 'Poppins',sans-serif;
    }

    .dc-floating-signal small {
      margin-top:2px;
      color:#85878d;
      font-size:.57rem;
      line-height:1.25;
    }

    .dc-signal-seo { --signal:var(--flow-teal); left:-1%; top:23%; }
    .dc-signal-ads { --signal:var(--flow-orange); right:-3%; top:15%; }
    .dc-signal-crm { --signal:var(--flow-green); right:-1%; bottom:18%; }
    .dc-signal-ai { --signal:var(--flow-red); left:2%; bottom:12%; }

    /* ---------- Hero-to-page visual bridge ---------- */
    .dc-growth-flow-strip {
      position:relative;
      z-index:5;
      margin-top:-18px;
      padding:0 0 30px;
      background:transparent;
    }

    .dc-growth-flow-shell {
      padding:16px 18px;
      display:flex;
      align-items:center;
      gap:22px;
      border:1px solid rgba(16,16,18,.08);
      border-radius:18px;
      background:rgba(255,255,255,.92);
      box-shadow:0 14px 38px rgba(16,16,18,.07);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
    }

    .dc-flow-intro {
      flex:none;
      display:flex;
      align-items:center;
      gap:9px;
      padding-right:20px;
      border-right:1px solid rgba(16,16,18,.08);
      color:#4c4e55;
      font:600 .72rem/1.4 'Poppins',sans-serif;
      white-space:nowrap;
    }

    .dc-flow-pulse {
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--flow-teal);
      box-shadow:0 0 0 5px rgba(0,162,167,.10);
    }

    .dc-growth-flow-nodes {
      min-width:0;
      flex:1;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }

    .dc-flow-node {
      --node:var(--flow-teal);
      min-width:0;
      display:flex;
      align-items:center;
      gap:9px;
    }

    .dc-flow-node[data-node-color="green"] { --node:var(--flow-green); }
    .dc-flow-node[data-node-color="orange"] { --node:var(--flow-orange); }
    .dc-flow-node[data-node-color="red"] { --node:var(--flow-red); }

    .dc-flow-node-icon {
      width:34px;
      height:34px;
      flex:none;
      display:grid;
      place-items:center;
      border-radius:11px;
      background:color-mix(in srgb, var(--node) 11%, #fff);
      color:var(--node);
    }

    .dc-flow-node-icon svg {
      width:17px;
      height:17px;
    }

    .dc-flow-node strong,
    .dc-flow-node small {
      display:block;
    }

    .dc-flow-node strong {
      color:#101012;
      font:700 .68rem/1.2 'Poppins',sans-serif;
    }

    .dc-flow-node small {
      margin-top:2px;
      color:#8b8d93;
      font-size:.56rem;
      line-height:1.2;
      white-space:nowrap;
    }

    .dc-flow-link {
      min-width:20px;
      flex:1;
      height:1px;
      position:relative;
      overflow:hidden;
      background:#e5e8e9;
    }

    .dc-flow-link i {
      position:absolute;
      inset:0 auto 0 0;
      width:35%;
      background:linear-gradient(90deg, transparent, var(--flow-teal), transparent);
      transform:translateX(-100%);
      animation:dcSignalTravel 3.6s linear infinite;
    }

    @keyframes dcSignalTravel {
      to { transform:translateX(380%); }
    }

    /* ---------- Stats become signal modules ---------- */
    .stats-card {
      position:relative;
      overflow:visible;
      border-radius:18px;
      background:rgba(255,255,255,.88);
      box-shadow:0 14px 36px rgba(16,16,18,.055);
    }

    .stats-card::before {
      content:"";
      position:absolute;
      inset:50% 9% auto 9%;
      height:1px;
      z-index:0;
      background:linear-gradient(90deg, rgba(0,162,167,.12), rgba(112,190,73,.18), rgba(247,150,62,.16));
    }

    .stat {
      position:relative;
      z-index:1;
      background:rgba(255,255,255,.92);
    }

    .stat-icon {
      transition:transform .3s ease;
    }

    .stat:hover .stat-icon {
      transform:translateY(-3px) rotate(-3deg);
    }

    /* ---------- Lifecycle / industries become richer surfaces ---------- */
    .lifecycle-section {
      background:
        radial-gradient(circle at 16% 20%, rgba(0,162,167,.07), transparent 24%),
        linear-gradient(180deg, #fbfdfc, #f7faf9);
    }

    .dc-industry-section {
      background:
        radial-gradient(circle at 87% 18%, rgba(112,190,73,.075), transparent 20%),
        radial-gradient(circle at 8% 82%, rgba(247,150,62,.06), transparent 18%),
        #fff;
    }

    .industry-track article,
    .industry-track > div > article {
      position:relative;
      overflow:hidden;
    }

    .industry-track article::after,
    .industry-track > div > article::after {
      content:"";
      position:absolute;
      inset:auto -40px -45px auto;
      width:100px;
      height:100px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(0,162,167,.08), transparent 70%);
      pointer-events:none;
    }

    /* ---------- Capabilities: icon + number ---------- */
    .dc-cap-card {
      background:
        radial-gradient(circle at 95% 8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 31%),
        #fff;
    }

    .dc-cap-card .dc-cap-ai-icon {
      position:absolute;
      right:18px;
      top:18px;
      width:36px;
      height:36px;
      display:grid;
      place-items:center;
      border:1px solid color-mix(in srgb, var(--accent) 20%, #e9ebec);
      border-radius:12px;
      background:rgba(255,255,255,.78);
      color:var(--accent);
      opacity:.9;
    }

    .dc-cap-card .dc-cap-ai-icon svg {
      width:18px;
      height:18px;
    }

    /* ---------- Evidence: graph-like backdrop ---------- */
    .dc-evidence-section {
      background:
        linear-gradient(180deg, #fff, #fbfcfc);
    }

    .dc-evidence-layout {
      position:relative;
    }

    .dc-evidence-layout::before {
      content:"";
      position:absolute;
      inset:-18px -18px auto auto;
      width:150px;
      height:150px;
      z-index:-1;
      border-radius:50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(0,162,167,.09), transparent 60%);
    }

    /* ---------- Global map: intelligence halo ---------- */
    .map-wrapper {
      position:relative;
      isolation:isolate;
      /*box-shadow:0 18px 45px rgba(16,16,18,.07);*/
    }

    /*.map-wrapper::before {*/
    /*  content:"LIVE MARKET SIGNALS";*/
    /*  position:absolute;*/
    /*  left:16px;*/
    /*  top:16px;*/
    /*  z-index:2;*/
    /*  padding:7px 10px;*/
    /*  border-radius:999px;*/
    /*  background:rgba(16,16,18,.72);*/
    /*  color:#fff;*/
    /*  font:700 .55rem/1 'Poppins',sans-serif;*/
    /*  letter-spacing:.08em;*/
    /*  backdrop-filter:blur(8px);*/
    /*}*/

    /*.map-wrapper::after {*/
    /*  content:"";*/
    /*  position:absolute;*/
    /*  inset:0;*/
    /*  z-index:1;*/
    /*  pointer-events:none;*/
    /*  background:*/
    /*    radial-gradient(circle at 28% 52%, rgba(0,162,167,.16) 0 3px, transparent 4px),*/
    /*    radial-gradient(circle at 72% 38%, rgba(237,50,57,.18) 0 3px, transparent 4px),*/
    /*    linear-gradient(135deg, rgba(0,162,167,.03), transparent 50%);*/
    /*}*/

    /* ---------- Blogs: graphic "data cards" ---------- */
    .dc-blog-art {
      background:
        radial-gradient(circle at 22% 28%, color-mix(in srgb,var(--blog) 20%,transparent), transparent 30%),
        linear-gradient(135deg,#f7f9f9,#edf3f2);
    }

    .dc-blog-art::before {
      background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,250,.92));
    }

    .dc-blog-art .dc-blog-icon {
      z-index:4;
    }

    /* ---------- FAQ AI visual ---------- */
    .dc-faq-ai-visual {
      position:relative;
      width:210px;
      height:138px;
      margin:0 0 22px;
      border:1px solid rgba(0,162,167,.12);
      border-radius:20px;
      background:
        linear-gradient(rgba(0,162,167,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,162,167,.035) 1px, transparent 1px),
        #fff;
      background-size:22px 22px;
      box-shadow:0 14px 32px rgba(16,16,18,.055);
      overflow:hidden;
    }

    .dc-faq-core {
      position:absolute;
      left:50%;
      top:50%;
      width:76px;
      height:76px;
      transform:translate(-50%,-50%);
      color:var(--flow-teal);
    }

    .dc-faq-core svg {
      width:100%;
      height:100%;
    }

    .dc-faq-chip {
      position:absolute;
      padding:5px 8px;
      border-radius:999px;
      background:#fff;
      box-shadow:0 5px 14px rgba(16,16,18,.07);
      font:700 .53rem/1 'Poppins',sans-serif;
    }

    .dc-faq-chip-one { left:14px; top:18px; color:var(--flow-teal); }
    .dc-faq-chip-two { right:16px; top:28px; color:var(--flow-orange); }
    .dc-faq-chip-three { left:22px; bottom:18px; color:var(--flow-green); }

    /* ---------- Lead form: visual AI map ---------- */
    .dc-lead-ai-map {
      position:relative;
      margin:0 0 26px;
      padding:13px 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      border:1px solid rgba(255,255,255,.10);
      border-radius:14px;
      background:rgba(255,255,255,.045);
    }

    .dc-lead-ai-node,
    .dc-lead-ai-core {
      flex:none;
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:rgba(255,255,255,.82);
      font:600 .62rem/1 'Poppins',sans-serif;
    }

    .dc-lead-ai-node i {
      width:7px;
      height:7px;
      border-radius:50%;
      background:var(--flow-teal);
      box-shadow:0 0 0 4px rgba(0,162,167,.10);
    }

    .dc-lead-ai-node:last-child i {
      background:var(--flow-green);
      box-shadow:0 0 0 4px rgba(112,190,73,.10);
    }

    .dc-lead-ai-core {
      padding:7px 9px;
      border-radius:10px;
      background:rgba(255,255,255,.08);
      color:#fff;
    }

    .dc-lead-ai-core svg {
      width:15px;
      height:15px;
      color:#7bd7d8;
    }

    .dc-lead-ai-line {
      min-width:16px;
      flex:1;
      height:1px;
      background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(123,215,216,.48), rgba(255,255,255,.06));
    }

    /* ---------- CTA: strong end-state ---------- */
    .cta-band {
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 12% 50%, rgba(255,255,255,.11), transparent 20%),
        radial-gradient(circle at 88% 50%, rgba(112,190,73,.24), transparent 25%),
        #00A2A7;
    }

    .cta-band::before,
    .cta-band::after {
      content:"";
      position:absolute;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.12);
      pointer-events:none;
    }

    .cta-band::before {
      width:220px;
      height:220px;
      left:-100px;
      top:-110px;
    }

    .cta-band::after {
      width:160px;
      height:160px;
      right:-40px;
      bottom:-90px;
    }

    /* ---------- Motion ---------- */
    @media (prefers-reduced-motion: no-preference) {
      .dc-ai-orbit-one { animation:dcOrbitSpin 26s linear infinite; }
      .dc-ai-orbit-two { animation:dcOrbitSpinReverse 34s linear infinite; }
      .dc-floating-signal { animation:dcFloatSignal 5.5s ease-in-out infinite; }
      .dc-signal-ads { animation-delay:-1.2s; }
      .dc-signal-crm { animation-delay:-2.5s; }
      .dc-signal-ai { animation-delay:-3.4s; }

      @keyframes dcOrbitSpin { to { transform:rotate(360deg); } }
      @keyframes dcOrbitSpinReverse { to { transform:rotate(-360deg); } }
      @keyframes dcFloatSignal {
        0%,100% { transform:translateY(0); }
        50% { transform:translateY(-6px); }
      }
    }

    /* ---------- Responsive ---------- */
    @media (max-width:1280px) {
      .dc-floating-signal {
        min-width:132px;
      }
    }

    @media (max-width:1024px) {
      .dc-flow-section > .container::before,
      .dc-flow-section > .container::after {
        display:none;
      }

      .dc-growth-flow-shell {
        gap:16px;
      }

      .dc-flow-intro {
        display:none;
      }

      .dc-ai-hero-stage {
        width:min(100%, 520px);
      }

      .dc-floating-signal {
        min-width:124px;
        padding:8px 9px;
      }

      .dc-signal-seo { left:-3%; }
      .dc-signal-ads { right:-5%; }
      .dc-signal-crm { right:-4%; }
      .dc-signal-ai { left:-1%; }
    }

    @media (max-width:768px) {
      .dc-growth-flow-strip {
        margin-top:0;
        padding-top:6px;
      }

      .dc-growth-flow-shell {
        padding:15px;
      }

      .dc-growth-flow-nodes {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
      }

      .dc-flow-link {
        display:none;
      }

      .dc-flow-node {
        padding:10px;
        border:1px solid rgba(16,16,18,.06);
        border-radius:13px;
        background:#fff;
      }

      .dc-flow-node small {
        white-space:normal;
      }

      .dc-ai-hero-stage {
        width:min(100%, 570px);
      }

      .dc-floating-signal {
        min-width:132px;
      }

      .stats-card::before {
        display:none;
      }

      .dc-faq-ai-visual {
        width:100%;
        max-width:280px;
      }
    }

    @media (max-width:520px) {
      .dc-ai-hero-stage {
        aspect-ratio:1 / 1.1;
      }

      .dc-ai-hero-frame {
        width:92%;
        padding:9px;
        border-radius:22px;
      }

      .dc-ai-hero-frame::before {
        left:15px;
        top:14px;
        padding:6px 8px;
        font-size:.5rem;
      }

      .dc-floating-signal {
        min-width:0;
        max-width:128px;
        padding:7px 8px;
        gap:7px;
        border-radius:12px;
      }

      .dc-signal-icon {
        width:27px;
        height:27px;
      }

      .dc-floating-signal strong {
        font-size:.59rem;
      }

      .dc-floating-signal small {
        display:none;
      }

      .dc-signal-seo { left:0; top:19%; }
      .dc-signal-ads { right:0; top:13%; }
      .dc-signal-crm { right:0; bottom:16%; }
      .dc-signal-ai { left:1%; bottom:11%; }

      .dc-growth-flow-nodes {
        grid-template-columns:1fr 1fr;
      }

      .dc-flow-node-icon {
        width:31px;
        height:31px;
      }

      .dc-flow-node strong {
        font-size:.63rem;
      }

      .dc-flow-node small {
        font-size:.53rem;
      }

      .dc-section-ai-glyph {
        width:44px;
        height:44px;
        border-radius:14px;
      }
    }

    @media (max-width:360px) {
      .dc-growth-flow-nodes {
        grid-template-columns:1fr;
      }

      .dc-floating-signal {
        max-width:110px;
      }

      .dc-signal-ai {
        display:none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .dc-ai-orbit,
      .dc-floating-signal,
      .dc-flow-link i {
        animation:none !important;
      }
    }