:root {
        --navy: #003b9b;
        --green: #34c759;
        --text: #132238;
        --muted: #556981;
        --bg: #f3f7fc;
        --surface: #ffffff;
        --border: #e7ecf3;
        --twist-premium-gradient: linear-gradient(90deg, #1664f5 0%, #2f7fff 52%, #34c759 100%);
        --twist-premium-shadow: 0 14px 30px rgba(22, 100, 245, 0.24), 0 4px 12px rgba(52, 199, 89, 0.14);
        --radius-lg: 30px;
        --radius-md: 20px;
        --radius-sm: 14px;
        --elev-1: 0 12px 24px rgba(15, 35, 64, 0.06);
        --elev-2: 0 18px 34px rgba(15, 35, 64, 0.09);
        --elev-3: 0 24px 42px rgba(15, 35, 64, 0.12);
        --motion-fast: 240ms;
        --motion-base: 300ms;
        --space-1: 8px;
        --space-2: 16px;
        --space-3: 24px;
        --space-4: 32px;
        --focus-ring: 0 0 0 3px rgba(52, 199, 89, 0.2), 0 0 0 1px rgba(16, 58, 124, 0.35);
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
        color: var(--text);
        background:
          radial-gradient(circle at top left, rgba(0, 59, 155, 0.12), transparent 30%),
          radial-gradient(circle at 85% 15%, rgba(52, 199, 89, 0.15), transparent 32%),
          linear-gradient(135deg, #fbfdff 0%, var(--bg) 100%);
        line-height: 1.6;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }

      a { text-decoration: none; color: inherit; }
      img { max-width: 100%; display: block; }
      button, input, textarea, select { font: inherit; }

      .page { max-width: 1420px; margin: 0 auto; padding: 24px 24px 96px; }
      section[id] { scroll-margin-top: 24px; }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
      .skip-link {
        position: absolute;
        left: 12px;
        top: -44px;
        z-index: 2000;
        background: #ffffff;
        color: #0f2442;
        border: 2px solid rgba(0, 59, 155, 0.35);
        border-radius: 10px;
        padding: 10px 12px;
        font-weight: 700;
      }
      .skip-link:focus {
        top: 12px;
      }
      .section,
      .cta,
      .footer {
        content-visibility: auto;
        contain-intrinsic-size: 1px 900px;
      }

      .hero-shell {
        position: relative;
        overflow: hidden;
        margin-top: 185px;
        min-height: calc(100vh + 64px);
        background:
          radial-gradient(circle at 8% 14%, rgba(0, 59, 155, 0.07), transparent 32%),
          radial-gradient(circle at 82% 15%, rgba(52, 199, 89, 0.09), transparent 34%),
          radial-gradient(circle at 44% 66%, rgba(24, 97, 226, 0.06), rgba(24, 97, 226, 0) 45%),
          radial-gradient(circle at 68% 76%, rgba(52, 199, 89, 0.06), rgba(52, 199, 89, 0) 44%),
          repeating-linear-gradient(122deg, rgba(30, 96, 199, 0.018) 0, rgba(30, 96, 199, 0.018) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 11px),
          linear-gradient(145deg, #ffffff 0%, #f8fbff 60%, #f7fcf8 100%);
        border: 1px solid rgba(255,255,255,0.9);
        border-radius: 44px;
        box-shadow: 0 44px 98px rgba(17, 34, 58, 0.09), 0 16px 36px rgba(17, 34, 58, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -22px 44px rgba(14, 42, 82, 0.03);
        padding: 84px 20px 20px;
        backdrop-filter: blur(9px) saturate(111%);
      }
      .hero-shell::before,
      .hero-shell::after {
        content: "";
        position: absolute;
        inset: auto;
        pointer-events: none;
        z-index: 0;
      }
      .hero-shell::before {
        width: 520px;
        height: 240px;
        right: 8%;
        top: 116px;
        background:
          radial-gradient(circle at 30% 48%, rgba(36, 108, 236, 0.16), rgba(36, 108, 236, 0) 68%),
          radial-gradient(circle at 72% 56%, rgba(52, 199, 89, 0.13), rgba(52, 199, 89, 0) 66%);
        filter: blur(0.8px);
        animation: ambient-drift-a 14s ease-in-out infinite alternate;
      }
      .hero-shell::after {
        width: 460px;
        height: 180px;
        right: 12%;
        top: 184px;
        background:
          linear-gradient(108deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.46) 34%, rgba(255,255,255,0) 68%),
          radial-gradient(circle at 66% 52%, rgba(47,127,255,0.13), rgba(47,127,255,0) 72%);
        opacity: 0.78;
      }
      .hero-backdrop {
        position: absolute;
        inset: 0;
        background:
          linear-gradient(120deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.22) 38%, rgba(0,59,155,0.07) 72%, rgba(52,199,89,0.08) 100%);
        opacity: 0.95;
        filter: saturate(102%);
        transform: none;
        z-index: 0;
        pointer-events: none;
      }
      .hero-backdrop::before {
        content: "";
        position: absolute;
        inset: 1px;
        pointer-events: none;
        border-radius: 42px;
        border: 1px solid rgba(255, 255, 255, 0.62);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -16px 30px rgba(18, 58, 109, 0.05);
      }
      .hero-backdrop::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          repeating-linear-gradient(105deg, rgba(28, 92, 191, 0.015) 0, rgba(28, 92, 191, 0.015) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 10px),
          radial-gradient(circle at 70% 54%, rgba(255,255,255,0.26), rgba(255,255,255,0) 58%);
        mix-blend-mode: soft-light;
        opacity: 0.72;
      }


      .nav-stack {
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: min(1200px, calc(100% - 32px));
        z-index: 1200;
        display: block;
        transition: top 0.28s ease;
      }

      .nav {
        min-height: 72px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 0 32px;
        position: relative;
        z-index: 2;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.18));
        border: 1px solid rgba(255, 255, 255, 0.34);
        border-radius: 24px;
        box-shadow: 0 10px 26px rgba(10, 26, 52, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.68);
        backdrop-filter: blur(18px) saturate(155%);
        -webkit-backdrop-filter: blur(18px) saturate(155%);
        transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
        overflow: hidden;
      }
      .nav::before,
      .nav::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        pointer-events: none;
      }
      .nav::before {
        top: 0;
        height: 48%;
        background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0));
        opacity: 0.8;
      }
      .nav::after {
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, rgba(22,100,245,0.22), rgba(22,100,245,0.62) 45%, rgba(52,199,89,0.62) 72%, rgba(52,199,89,0.24));
        opacity: 0.9;
      }

      .nav-stack.is-scrolled {
        top: 8px;
      }
      .nav-stack.is-scrolled .nav {
        background: rgba(255, 255, 255, 0.96);
        border-color: rgba(233, 239, 247, 0.95);
        box-shadow: 0 12px 32px rgba(13, 30, 56, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.74);
      }

      .brand {
        display: inline-flex;
        align-items: center;
        width: auto;
        padding: 0;
        margin: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
      }
      .brand img {
        width: 331px;
        height: auto;
        object-fit: contain;
        object-position: center;
        display: block;
        border-radius: 0;
        box-shadow: none;
        clip-path: none;
        transform: none;
        transition: filter 220ms ease, transform 220ms ease;
      }
      .brand:hover img {
        transform: translateY(-0.5px);
      }

      .nav-main {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 24px;
        margin-left: auto;
      }
      .nav-links {
        display: flex;
        align-items: center;
        gap: 16px;
        color: #233a5a;
        font-weight: 650;
        letter-spacing: 0.02em;
        font-size: 0.91rem;
        white-space: nowrap;
      }
      .nav-links a {
        padding: 10px 10px;
        border-radius: 10px;
        position: relative;
        transition: transform 0.24s ease, color 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease;
      }
      .nav-links a::after {
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: 5px;
        height: 2px;
        border-radius: 999px;
        transform: scaleX(0);
        transform-origin: left center;
        background: linear-gradient(90deg, rgba(22,100,245,0.85), rgba(52,199,89,0.85));
        opacity: 0;
        transition: transform 260ms ease, opacity 260ms ease;
      }
      .nav-links a:hover {
        background: rgba(0, 59, 155, 0.065);
        color: var(--navy);
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 8px 16px rgba(16, 42, 76, 0.07);
      }
      .nav-links a:hover::after,
      .nav-links a.is-active::after {
        transform: scaleX(1);
        opacity: 1;
      }
      .nav-links a.is-active {
        background: linear-gradient(145deg, rgba(22,100,245,0.1), rgba(52,199,89,0.09));
        color: #153f74;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 6px 12px rgba(19, 52, 93, 0.06);
      }

      .nav-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 52px;
        position: relative;
        overflow: hidden;
        padding: 0 26px;
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 48%),
          var(--twist-premium-gradient);
        color: #ffffff;
        font-size: 0.81rem;
        font-weight: 800;
        letter-spacing: 0.028em;
        text-shadow: 0 1px 1px rgba(10, 35, 74, 0.22);
        box-shadow: var(--twist-premium-shadow);
        transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, filter var(--motion-fast) ease;
      }
      .nav-cta::before,
      .btn-primary::before,
      .ai-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(164deg, rgba(255,255,255,0.45) 6%, rgba(255,255,255,0.12) 28%, rgba(255,255,255,0) 54%);
      }
      .nav-cta::after,
      .btn-primary::after,
      .ai-btn::after {
        content: "";
        position: absolute;
        inset: auto -20% -48% auto;
        width: 78%;
        height: 72%;
        pointer-events: none;
        background: radial-gradient(circle, rgba(255,255,255,0.26), rgba(255,255,255,0) 72%);
      }
      .nav-cta::after {
        animation: nav-sheen-sweep 6.2s ease-in-out infinite;
      }
      .nav-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 34px rgba(22, 100, 245, 0.29), 0 8px 20px rgba(52, 199, 89, 0.22);
        filter: saturate(109%);
      }
      .nav-cta:active {
        transform: translateY(0);
        box-shadow: 0 12px 22px rgba(22, 100, 245, 0.24), 0 5px 12px rgba(52, 199, 89, 0.16);
      }

      .nav-menu-toggle {
        display: none;
        width: 46px;
        height: 46px;
        border: 1px solid rgba(0, 59, 155, 0.14);
        background: rgba(255, 255, 255, 0.86);
        border-radius: 12px;
        cursor: pointer;
        padding: 0;
        align-items: center;
        justify-content: center;
      }
      .nav-menu-toggle span {
        position: absolute;
        width: 20px;
        height: 2px;
        background: #1d3558;
        border-radius: 2px;
        transition: transform 0.24s ease, opacity 0.24s ease;
      }
      .nav-menu-toggle span:nth-child(1) { transform: translateY(-6px); }
      .nav-menu-toggle span:nth-child(2) { transform: translateY(0); }
      .nav-menu-toggle span:nth-child(3) { transform: translateY(6px); }

      .nav-stack.is-menu-open .nav-menu-toggle span:nth-child(1) { transform: translateY(0) rotate(45deg); }
      .nav-stack.is-menu-open .nav-menu-toggle span:nth-child(2) { opacity: 0; }
      .nav-stack.is-menu-open .nav-menu-toggle span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

      .nav-overlay {
        display: none;
      }

      .hero {
        display: grid;
        grid-template-columns: minmax(0, 0.74fr) minmax(560px, 1.26fr);
        gap: 38px;
        align-items: start;
        align-content: start;
        min-height: calc(100vh - 182px);
        padding: 0 0 0;
        position: relative;
        z-index: 2;
        margin-top: 0;
      }
      .hero::before {
        content: "";
        position: absolute;
        left: 31%;
        top: 170px;
        width: 45%;
        height: 118px;
        pointer-events: none;
        z-index: 1;
        background:
          radial-gradient(circle at 10% 54%, rgba(22,100,245,0.28) 0 1.1px, rgba(22,100,245,0) 2.4px),
          radial-gradient(circle at 26% 46%, rgba(52,199,89,0.22) 0 1px, rgba(52,199,89,0) 2.2px),
          radial-gradient(circle at 44% 50%, rgba(22,100,245,0.22) 0 1px, rgba(22,100,245,0) 2.1px),
          radial-gradient(circle at 62% 44%, rgba(52,199,89,0.2) 0 0.95px, rgba(52,199,89,0) 2px),
          radial-gradient(circle at 80% 53%, rgba(22,100,245,0.22) 0 1px, rgba(22,100,245,0) 2.1px),
          linear-gradient(90deg, rgba(22,100,245,0) 0%, rgba(22,100,245,0.12) 36%, rgba(52,199,89,0.12) 68%, rgba(52,199,89,0) 100%);
        filter: blur(0.18px);
        opacity: 0.44;
        animation: bridge-particle-flow 14s linear infinite;
      }
      .hero::after {
        content: "";
        position: absolute;
        left: 33%;
        top: 210px;
        width: 42%;
        height: 36px;
        pointer-events: none;
        background:
          radial-gradient(ellipse at 26% 50%, rgba(23, 105, 224, 0.2), rgba(23, 105, 224, 0) 62%),
          radial-gradient(ellipse at 72% 50%, rgba(52, 199, 89, 0.18), rgba(52, 199, 89, 0) 64%),
          repeating-linear-gradient(90deg, rgba(57, 117, 203, 0.14) 0, rgba(57, 117, 203, 0.14) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 16px),
          linear-gradient(90deg, rgba(22,100,245,0), rgba(22,100,245,0.2) 38%, rgba(52,199,89,0.2) 62%, rgba(52,199,89,0));
        filter: blur(0.34px);
        opacity: 0.34;
        animation: bridge-net-breathe 11s ease-in-out infinite;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        background: rgba(0,59,155,0.08);
        color: #154184;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .hero-copy {
        max-width: 780px;
        position: relative;
        z-index: 2;
        padding: 24px 30px 28px;
        padding-right: 28px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        transform: translateY(-2px);
        background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
        border: 1px solid rgba(227, 236, 247, 0.9);
        border-radius: 28px;
        box-shadow: 0 22px 50px rgba(15, 35, 64, 0.07);
      }
      .hero-copy::before {
        content: "";
        position: absolute;
        left: -32px;
        bottom: 10px;
        width: 240px;
        height: 88px;
        background: linear-gradient(90deg, rgba(0,59,155,0.14), rgba(52,199,89,0.12));
        border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
        transform: rotate(-10deg);
        z-index: -1;
        opacity: 0.7;
        filter: blur(0.3px);
      }
      .hero-copy::after {
        content: "";
        position: absolute;
        right: -18px;
        bottom: -12px;
        width: 184px;
        height: 62px;
        background: linear-gradient(90deg, rgba(52,199,89,0.12), rgba(0,59,155,0.14));
        border-radius: 50% 50% 45% 55% / 60% 40% 60% 40%;
        transform: rotate(12deg);
        z-index: -1;
        opacity: 0.68;
        filter: blur(0.3px);
      }
      .hero-copy > * {
        position: relative;
        z-index: 1;
      }
      h1 {
        font-size: clamp(4.7rem, 9.5vw, 7.2rem);
        line-height: 0.9;
        margin: 14px 0 26px;
        letter-spacing: -0.045em;
        text-shadow: 0 2px 10px rgba(255,255,255,0.46);
        max-width: 13ch;
        color: #1664f5;
        font-feature-settings: "kern" 1;
        text-rendering: geometricPrecision;
      }
      .hero-title-dark {
        color: #1664f5;
      }
      .hero-title-navy {
        color: #0f2442;
      }
      .hero-title-grad {
        background-image: var(--twist-premium-gradient);
        background-size: 140% 100%;
        background-position: 22% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        filter: saturate(108%);
        animation: gradient-glide 14s ease-in-out infinite;
      }
      .hero-title-ai {
        text-shadow: 0 0 16px rgba(22, 100, 245, 0.22), 0 0 22px rgba(52, 199, 89, 0.16);
        filter: saturate(110%);
      }
      .hero p {
        font-size: 1.16rem;
        color: #2b4567;
        max-width: 50ch;
        margin: 0 0 30px;
        line-height: 1.68;
        text-shadow: 0 1px 3px rgba(255,255,255,0.62);
      }

      .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
      .hero-actions .btn {
        min-height: 56px;
        padding: 17px 28px;
        font-size: 0.98rem;
        font-weight: 800;
        letter-spacing: 0.012em;
        border-radius: 999px;
        box-shadow: 0 14px 26px rgba(15, 35, 64, 0.1);
        transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
      }
      .hero-actions .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 34px rgba(15, 35, 64, 0.15);
      }
      .hero-actions .btn-primary {
        border-radius: 15px;
        box-shadow: 0 20px 38px rgba(22, 100, 245, 0.24), 0 8px 18px rgba(52, 199, 89, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3);
      }
      .hero-actions .btn-primary:hover {
        box-shadow: 0 26px 44px rgba(22, 100, 245, 0.29), 0 10px 22px rgba(52, 199, 89, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        filter: brightness(1.02) saturate(1.06);
      }
      .hero-actions .btn-primary::after,
      .ai-btn::after {
        animation: sheen-sweep 6.6s ease-in-out infinite;
      }
      .nav-cta::after {
        animation: nav-sheen-sweep 6.2s ease-in-out infinite;
      }
      .hero-actions .btn-secondary {
        background: rgba(255,255,255,0.94);
      }
      .hero-note {
        margin: 10px 2px 28px;
        color: #5d7290;
        font-size: 0.86rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }
      .hero-stats {
        margin-top: 8px;
      }
      .stat-pill {
        background: linear-gradient(170deg, rgba(255,255,255,0.94) 0%, rgba(249,252,255,0.9) 100%);
        border: 1px solid rgba(221, 233, 246, 0.92);
        box-shadow: 0 16px 28px rgba(15, 35, 64, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(7px) saturate(106%);
      }
      .stat-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 20px;
        min-width: 30px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid rgba(208, 224, 242, 0.92);
        background: linear-gradient(160deg, rgba(241, 248, 255, 0.95), rgba(234, 244, 255, 0.9));
        color: #2e5784;
        font-size: 0.55rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        margin-bottom: 6px;
        line-height: 1;
        transform: translateY(-0.5px);
      }
      .stat-pill strong {
        font-size: 1.16rem;
        letter-spacing: -0.015em;
        color: #1a3f70;
      }
      .stat-pill p {
        font-size: 0.73rem;
        color: #4c6889;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 22px;
        border-radius: 999px;
        font-weight: 700;
        transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease;
        border: none;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      }
      .btn:hover { transform: translateY(-2px); }
      .btn:active { transform: translateY(0); }
      .btn:focus-visible,
      .nav-links a:focus-visible,
      .chatbot-control:focus-visible,
      .lead-form input:focus-visible,
      .lead-form select:focus-visible,
      .lead-form textarea:focus-visible,
      .contact-panel input:focus-visible,
      .contact-panel textarea:focus-visible {
        outline: 3px solid rgba(52, 199, 89, 0.42);
        outline-offset: 2px;
      }
      .btn-primary {
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 48%),
          linear-gradient(112deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 36%),
          var(--twist-premium-gradient);
        color: white;
        text-shadow: 0 1px 1px rgba(10, 35, 74, 0.22);
        box-shadow: 0 18px 34px rgba(22, 100, 245, 0.24), 0 7px 18px rgba(52, 199, 89, 0.18), inset 0 1px 0 rgba(255,255,255,0.24);
        position: relative;
        overflow: hidden;
      }
      .btn-secondary {
        background: linear-gradient(165deg, rgba(255,255,255,0.98), rgba(247,251,255,0.95));
        color: var(--navy);
        border: 1px solid rgba(214, 227, 242, 0.95);
        box-shadow: 0 10px 20px rgba(16, 42, 76, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.92);
      }
      .btn-secondary:hover {
        box-shadow: 0 14px 24px rgba(16, 42, 76, 0.11), 0 0 0 1px rgba(186, 210, 237, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.94);
      }

      .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-top: 6px;
      }
      .stat-pill {
        padding: 16px 16px 15px;
        background: linear-gradient(170deg, #ffffff 0%, #f9fcff 100%);
        border: 1px solid rgba(223, 233, 246, 0.95);
        border-radius: 20px;
        color: var(--muted);
        font-size: 0.92rem;
        box-shadow: 0 14px 24px rgba(15, 35, 64, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }
      .stat-pill strong {
        display: inline-block;
        font-size: 0.98rem;
        color: #173560;
        margin-bottom: 6px;
        letter-spacing: -0.01em;
      }
      .stat-pill p {
        margin: 0;
        color: #4d617d;
        line-height: 1.5;
      }

      .hero-card {
        position: relative;
        background: linear-gradient(170deg, #ffffff 0%, #f8fbff 66%, #f8fcf9 100%);
        border: 1px solid rgba(218, 230, 245, 0.92);
        border-radius: 34px;
        padding: 20px;
        box-shadow: 0 36px 78px rgba(12, 27, 48, 0.1), 0 16px 34px rgba(16, 39, 73, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -14px 30px rgba(15, 44, 88, 0.04);
        margin-left: 6px;
        margin-top: 0;
        isolation: isolate;
        align-self: center;
      }
      .hero-card::before {
        content: "";
        position: absolute;
        inset: -14px -16px -16px;
        border-radius: 40px;
        pointer-events: none;
        background: radial-gradient(circle at 74% 40%, rgba(26, 115, 235, 0.2), rgba(26, 115, 235, 0) 58%), radial-gradient(circle at 18% 78%, rgba(52, 199, 89, 0.18), rgba(52, 199, 89, 0) 54%);
        filter: blur(10px);
        opacity: 0.72;
        z-index: -2;
        animation: ambient-breathe 10s ease-in-out infinite;
      }
      .hero-card::after {
        content: "";
        position: absolute;
        inset: 2px;
        border-radius: 31px;
        pointer-events: none;
        border: 1px solid rgba(255, 255, 255, 0.65);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 -18px 28px rgba(22, 77, 150, 0.04);
        z-index: 2;
      }
      .product-experience {
        position: relative;
        margin-bottom: 14px;
      }
      .product-experience::before,
      .product-experience::after {
        content: "";
        position: absolute;
        pointer-events: none;
        z-index: -1;
        border-radius: 999px;
      }
      .product-experience::before {
        width: 290px;
        height: 220px;
        left: 12px;
        top: 30px;
        background: radial-gradient(circle at center, rgba(47, 127, 255, 0.16), rgba(47, 127, 255, 0) 74%);
        filter: blur(1.2px);
        animation: flow-float-a 11s ease-in-out infinite alternate;
      }
      .hero-edge-ribbon {
        position: absolute;
        width: 420px;
        height: 150px;
        border-radius: 999px;
        pointer-events: none;
        filter: blur(1px);
        z-index: 0;
        opacity: 0.5;
      }
      .hero-edge-ribbon.r1 {
        right: -80px;
        bottom: -42px;
        background: linear-gradient(95deg, rgba(22,100,245,0), rgba(22,100,245,0.2) 42%, rgba(52,199,89,0.18) 70%, rgba(255,255,255,0) 100%);
      }
      .hero-edge-ribbon.r2 {
        left: -110px;
        bottom: -64px;
        background: linear-gradient(88deg, rgba(255,255,255,0), rgba(52,199,89,0.14) 34%, rgba(22,100,245,0.14) 66%, rgba(255,255,255,0) 100%);
      }
      .product-experience::after {
        width: 260px;
        height: 200px;
        right: 4px;
        bottom: 18px;
        background: radial-gradient(circle at center, rgba(52, 199, 89, 0.12), rgba(52, 199, 89, 0) 74%);
        filter: blur(1.2px);
        animation: flow-float-b 12.5s ease-in-out infinite alternate;
      }
      .product-connectors {
        position: absolute;
        inset: 48px 12px 52px;
        pointer-events: none;
        z-index: 0;
        opacity: 0.56;
      }
      .product-connectors svg {
        width: 100%;
        height: 100%;
      }
      .product-connectors path {
        fill: none;
        stroke: rgba(42, 95, 173, 0.26);
        stroke-width: 1.2;
        stroke-dasharray: 4 6;
      }
      .product-atmosphere {
        position: absolute;
        inset: 30px 8px 30px 8px;
        pointer-events: none;
        z-index: 0;
        background: radial-gradient(ellipse at 66% 58%, rgba(25, 113, 228, 0.09), rgba(25, 113, 228, 0) 68%), radial-gradient(ellipse at 72% 64%, rgba(52, 199, 89, 0.08), rgba(52, 199, 89, 0) 70%);
      }
      .product-atmosphere::before {
        content: "";
        position: absolute;
        inset: 22px 40px auto;
        height: 120px;
        border-radius: 999px;
        background: radial-gradient(ellipse at center, rgba(40, 132, 255, 0.24), rgba(40, 132, 255, 0) 72%);
        filter: blur(8px);
        opacity: 0.8;
        animation: hologram-pulse 8.5s ease-in-out infinite;
      }
      .product-atmosphere::after {
        content: "";
        position: absolute;
        left: 20%;
        top: 148px;
        width: 72%;
        height: 140px;
        border-radius: 999px;
        background: radial-gradient(ellipse at center, rgba(52, 199, 89, 0.2), rgba(52, 199, 89, 0) 72%);
        filter: blur(10px);
        opacity: 0.72;
        animation: hologram-pulse 10.8s ease-in-out infinite reverse;
      }
      .neural-net {
        position: absolute;
        inset: 14px 26px auto 80px;
        height: 190px;
        opacity: 0.48;
      }
      .neural-net svg {
        width: 100%;
        height: 100%;
      }
      .neural-net path {
        fill: none;
        stroke: rgba(53, 111, 193, 0.36);
        stroke-width: 1.1;
        stroke-dasharray: 6 6;
        animation: flow-lines 7s linear infinite;
      }
      .neural-net circle {
        fill: rgba(255,255,255,0.95);
        stroke: rgba(52, 199, 89, 0.58);
        stroke-width: 1.1;
        filter: drop-shadow(0 0 6px rgba(52,199,89,0.35));
      }
      .flow-wave {
        position: absolute;
        width: 76%;
        height: 58px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(22,100,245,0) 0%, rgba(22,100,245,0.12) 30%, rgba(52,199,89,0.12) 64%, rgba(255,255,255,0) 100%);
        filter: blur(0.6px);
        opacity: 0.62;
      }
      .flow-wave.w1 {
        top: 42px;
        left: 18%;
        transform: rotate(-7deg);
        animation: wave-shift-a 16s ease-in-out infinite alternate;
      }
      .flow-wave.w2 {
        top: 214px;
        left: 12%;
        transform: rotate(4deg);
        opacity: 0.48;
        animation: wave-shift-b 19s ease-in-out infinite alternate;
      }
      .particle-field {
        position: absolute;
        inset: 20px 12% auto auto;
        width: 220px;
        height: 160px;
      }
      .particle-field span {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 0 10px rgba(47,127,255,0.35);
        animation: particle-float 5s ease-in-out infinite;
      }
      .particle-field span:nth-child(1) { top: 12px; left: 26px; animation-delay: 0s; }
      .particle-field span:nth-child(2) { top: 36px; left: 108px; animation-delay: 0.8s; }
      .particle-field span:nth-child(3) { top: 74px; left: 56px; animation-delay: 1.2s; }
      .particle-field span:nth-child(4) { top: 98px; left: 162px; animation-delay: 1.9s; }
      .particle-field span:nth-child(5) { top: 128px; left: 92px; animation-delay: 2.5s; }
      .particle-field span:nth-child(6) { top: 52px; left: 192px; animation-delay: 3.1s; }
      .light-rays {
        position: absolute;
        inset: 10px 50px auto;
        height: 220px;
        pointer-events: none;
        z-index: 0;
        opacity: 0.52;
      }
      .light-rays span {
        position: absolute;
        top: 0;
        width: 96px;
        height: 240px;
        border-radius: 120px;
        background: linear-gradient(180deg, rgba(110, 190, 255, 0.22), rgba(110, 190, 255, 0));
        filter: blur(1px);
        transform-origin: top center;
        animation: ray-sway 9s ease-in-out infinite;
      }
      .light-rays span:nth-child(1) { left: 8%; transform: rotate(-8deg); animation-delay: 0s; }
      .light-rays span:nth-child(2) { left: 42%; transform: rotate(-2deg); animation-delay: 1.4s; }
      .light-rays span:nth-child(3) { right: 10%; transform: rotate(6deg); animation-delay: 2.6s; }
      .product-shell {
        position: relative;
        z-index: 1;
        border-radius: 26px;
        border: 1px solid rgba(211, 226, 243, 0.92);
        background: linear-gradient(180deg, rgba(254,254,255,0.93) 0%, rgba(249,252,255,0.86) 100%);
        box-shadow: 0 20px 44px rgba(14, 31, 55, 0.11), 0 10px 24px rgba(14, 31, 55, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -14px 26px rgba(20, 58, 109, 0.04);
        backdrop-filter: blur(8px) saturate(110%);
        transform: perspective(1600px) rotateX(0.55deg);
        transform-origin: center top;
        overflow: hidden;
      }
      .product-shell::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(140deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 22%, rgba(255,255,255,0) 46%),
          radial-gradient(circle at 88% 18%, rgba(47,127,255,0.14), rgba(47,127,255,0) 42%),
          radial-gradient(circle at 86% 84%, rgba(52,199,89,0.11), rgba(52,199,89,0) 44%),
          repeating-linear-gradient(120deg, rgba(31, 88, 166, 0.05) 0, rgba(31, 88, 166, 0.05) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 10px);
        z-index: 0;
      }
      .product-shell::after {
        content: "";
        position: absolute;
        right: -44px;
        top: 48px;
        width: 180px;
        height: 180px;
        pointer-events: none;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(52,199,89,0.14), rgba(52,199,89,0) 72%);
        opacity: 0.7;
        z-index: 0;
      }
      .product-shell .telemetry-ribbon {
        position: absolute;
        right: 18px;
        top: 66px;
        display: grid;
        grid-auto-flow: column;
        gap: 6px;
        z-index: 3;
        pointer-events: none;
      }
      .product-shell .micro-alert-feed {
        position: absolute;
        left: 92px;
        right: 132px;
        top: 66px;
        min-height: 22px;
        border-radius: 10px;
        border: 1px solid rgba(208, 223, 241, 0.95);
        background: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(244,250,255,0.9));
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 0 9px;
        z-index: 3;
        pointer-events: none;
        position: absolute;
      }
      .product-shell .micro-alert-feed::after {
        content: none;
      }
      .executive-ai-monitor {
        position: absolute;
        right: 16px;
        top: 98px;
        width: 130px;
        border-radius: 14px;
        border: 1px solid rgba(205, 222, 242, 0.95);
        background: linear-gradient(165deg, rgba(255,255,255,0.95), rgba(243,249,255,0.9));
        box-shadow: 0 18px 30px rgba(14, 31, 56, 0.15), inset 0 1px 0 rgba(255,255,255,0.86);
        padding: 7px;
        z-index: 4;
        pointer-events: none;
        transform: translateY(-2px);
        animation: float-panel-a 11s ease-in-out infinite;
      }
      .executive-ai-monitor::before {
        content: "";
        position: absolute;
        top: 8px;
        right: 8px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #34c759;
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.42);
        animation: status-pulse 2.2s ease infinite;
      }
      .executive-ai-monitor h5 {
        margin: 0;
        color: #274a73;
        font-size: 0.5rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        font-weight: 800;
      }
      .ai-monitor-ring-wrap {
        margin-top: 5px;
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: center;
        gap: 6px;
      }
      .ai-monitor-ring {
        width: 58px;
        height: 58px;
      }
      .ai-monitor-ring circle {
        fill: none;
        stroke-width: 8;
      }
      .ai-monitor-ring .m-bg { stroke: rgba(206, 223, 241, 0.9); }
      .ai-monitor-ring .m-a { stroke: rgba(22,100,245,0.9); stroke-dasharray: 72 100; stroke-dashoffset: 0; }
      .ai-monitor-ring .m-b { stroke: rgba(52,199,89,0.88); stroke-dasharray: 22 100; stroke-dashoffset: -72; }
      .ai-monitor-score {
        color: #143b67;
        font-size: 0.92rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.01em;
      }
      .ai-monitor-score small {
        display: block;
        margin-top: 2px;
        color: #3f638c;
        font-size: 0.45rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .ai-monitor-meta {
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        color: #3a5d87;
        font-size: 0.45rem;
        font-weight: 700;
      }
      .ai-monitor-kpis {
        margin-top: 4px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px;
      }
      .ai-monitor-kpis span {
        min-height: 12px;
        border-radius: 999px;
        border: 1px solid rgba(212, 225, 241, 0.95);
        background: rgba(253, 255, 255, 0.9);
        color: #335981;
        font-size: 0.42rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }
      .floating-reco-window {
        position: absolute;
        right: 8px;
        top: 288px;
        width: 154px;
        border-radius: 12px;
        border: 1px solid rgba(202, 221, 241, 0.95);
        background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(245,251,255,0.92));
        box-shadow: 0 20px 32px rgba(12, 30, 57, 0.16), inset 0 1px 0 rgba(255,255,255,0.86);
        padding: 7px;
        z-index: 4;
        pointer-events: none;
        animation: float-panel-b 12.6s ease-in-out infinite;
      }
      .floating-reco-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
      }
      .floating-reco-head strong {
        color: #21466f;
        font-size: 0.52rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .floating-reco-badge {
        min-height: 14px;
        padding: 0 5px;
        border-radius: 999px;
        border: 1px solid rgba(204, 220, 240, 0.95);
        background: rgba(241, 248, 255, 0.92);
        color: #3a5f89;
        font-size: 0.44rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
      }
      .floating-reco-window p {
        margin: 5px 0 4px;
        color: #3d6087;
        font-size: 0.5rem;
        line-height: 1.3;
        font-weight: 600;
      }
      .floating-reco-chart {
        width: 100%;
        height: 16px;
      }
      .floating-reco-chart path {
        fill: none;
        stroke: rgba(21, 94, 188, 0.88);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-dasharray: 110;
        stroke-dashoffset: 110;
        animation: chart-draw 1.1s 220ms ease forwards, line-live-glow 6.6s ease-in-out infinite;
      }
      .floating-reco-legend {
        margin-top: 4px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px;
      }
      .floating-reco-legend span {
        min-height: 12px;
        border-radius: 999px;
        background: rgba(236, 244, 253, 0.9);
        color: #355880;
        font-size: 0.42rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .floating-reco-notes {
        margin-top: 3px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px;
      }
      .floating-reco-notes span {
        min-height: 11px;
        border-radius: 999px;
        background: rgba(246, 251, 255, 0.92);
        border: 1px solid rgba(215, 228, 242, 0.95);
        color: #365b83;
        font-size: 0.41rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
      }
      .ai-insights-panel {
        position: absolute;
        right: 172px;
        top: 288px;
        width: 164px;
        border-radius: 12px;
        border: 1px solid rgba(205, 221, 241, 0.95);
        background: linear-gradient(165deg, rgba(255,255,255,0.95), rgba(247,252,255,0.9));
        box-shadow: 0 18px 30px rgba(15, 33, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(8px) saturate(108%);
        padding: 7px;
        z-index: 4;
        pointer-events: none;
      }
      .ai-insights-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        margin-bottom: 5px;
      }
      .ai-insights-head strong {
        color: #254970;
        font-size: 0.52rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .ai-live-pip {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: #34c759;
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45);
        animation: status-pulse 2.1s ease infinite;
      }
      .ai-rec-list {
        display: grid;
        gap: 4px;
      }
      .ai-rec-item {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        align-items: start;
        gap: 5px;
        border: 1px solid rgba(216, 228, 243, 0.95);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.86);
        padding: 4px;
      }
      .ai-rec-icon {
        min-height: 18px;
        border-radius: 6px;
        border: 1px solid rgba(209, 223, 240, 0.95);
        background: rgba(242, 249, 255, 0.9);
        color: #2f5988;
        font-size: 0.4rem;
        font-weight: 800;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .ai-rec-text strong {
        display: block;
        margin: 0;
        color: #234a73;
        font-size: 0.47rem;
        line-height: 1.25;
        font-weight: 700;
      }
      .ai-rec-text em {
        font-style: normal;
        color: #3d638f;
        font-weight: 700;
      }
      .ai-rec-meta {
        margin-top: 2px;
        display: flex;
        align-items: center;
        gap: 3px;
      }
      .impact-tag {
        min-height: 11px;
        padding: 0 4px;
        border-radius: 999px;
        font-size: 0.39rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .impact-tag.high { background: rgba(22,100,245,0.14); color: #1f4d8f; }
      .impact-tag.medium { background: rgba(52,199,89,0.15); color: #236f40; }
      .impact-tag.low { background: rgba(161, 182, 210, 0.2); color: #456080; }
      .status-badge {
        min-height: 11px;
        padding: 0 4px;
        border-radius: 999px;
        border: 1px solid rgba(210, 223, 240, 0.95);
        background: rgba(251, 254, 255, 0.92);
        color: #4b6788;
        font-size: 0.39rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .ai-insights-foot {
        margin-top: 4px;
        color: #587394;
        font-size: 0.4rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }
      .system-ticker {
        position: absolute;
        left: 84px;
        right: 12px;
        bottom: 10px;
        min-height: 18px;
        border-radius: 9px;
        border: 1px solid rgba(208, 223, 241, 0.95);
        background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(243,249,255,0.9));
        box-shadow: 0 9px 16px rgba(14, 32, 57, 0.12);
        padding: 0 7px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
        align-items: center;
        z-index: 3;
        pointer-events: none;
      }
      .system-ticker::before {
        content: none;
      }
      .system-ticker::after {
        content: none;
      }
      .system-ticker span {
        min-height: 12px;
        border-radius: 999px;
        background: rgba(236, 244, 253, 0.92);
        color: #32577f;
        font-size: 0.41rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .micro-alert-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #34c759;
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45);
        animation: status-pulse 2s ease infinite;
      }
      .micro-alert-feed span {
        color: #2f517e;
        font-size: 0.53rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }
      .telemetry-pill {
        min-width: 70px;
        padding: 4px 6px;
        border-radius: 9px;
        border: 1px solid rgba(210, 224, 241, 0.95);
        background: linear-gradient(165deg, rgba(255,255,255,0.95), rgba(244,250,255,0.9));
        box-shadow: 0 7px 15px rgba(12, 31, 58, 0.1);
      }
      .telemetry-pill em {
        display: block;
        font-style: normal;
        color: #45658e;
        font-size: 0.48rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .telemetry-pill strong {
        display: block;
        margin-top: 2px;
        color: #163b68;
        font-size: 0.66rem;
        line-height: 1;
      }
      .product-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(216, 228, 242, 0.9);
        background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(247,251,255,0.88));
      }
      .product-brand {
        display: block;
        margin: 0 0 3px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #2a5387;
      }
      .product-heading h3 {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.2;
        color: #10294c;
        letter-spacing: -0.01em;
      }
      .product-label {
        display: inline-flex;
        margin-top: 7px;
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(0, 59, 155, 0.09);
        border: 1px solid rgba(177, 202, 232, 0.6);
        color: #305588;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .product-actions {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .product-action {
        min-height: 28px;
        padding: 0 9px;
        border-radius: 9px;
        border: 1px solid rgba(217, 228, 241, 0.95);
        background: #ffffff;
        color: #365681;
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        display: inline-flex;
        align-items: center;
        transition: transform 220ms ease, box-shadow 220ms ease;
      }
      .product-action:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(15, 35, 64, 0.1);
      }
      .product-body {
        display: grid;
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
        position: relative;
      }
      .product-rail {
        border-radius: 16px;
        border: 1px solid rgba(215, 226, 241, 0.95);
        background: linear-gradient(180deg, #ffffff 0%, #f4f8fe 100%);
        box-shadow: 0 10px 22px rgba(13, 31, 58, 0.07);
        padding: 8px 6px;
        display: grid;
        gap: 5px;
      }
      .rail-item {
        min-height: 32px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        color: #4a6284;
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
      }
      .rail-item:hover {
        transform: translateX(1px);
      }
      .rail-item.is-active {
        background: linear-gradient(135deg, rgba(0,59,155,0.14), rgba(52,199,89,0.12));
        color: #103869;
      }
      .product-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        grid-template-areas:
          "workflow status"
          "workflow pipeline"
          "journey insights";
        gap: 10px;
      }
      .module-card {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        border: 1px solid rgba(214, 228, 243, 0.92);
        background: linear-gradient(175deg, rgba(255,255,255,0.92) 0%, rgba(249,252,255,0.84) 100%);
        box-shadow: 0 15px 26px rgba(16, 35, 62, 0.075), 0 7px 16px rgba(16, 35, 62, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -10px 16px rgba(19, 54, 99, 0.03);
        backdrop-filter: blur(7px) saturate(108%);
        padding: 12px;
        transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
      }
      .module-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(158deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.08) 36%, rgba(255,255,255,0) 62%);
        opacity: 0.72;
        z-index: 0;
      }
      .module-card::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -30px;
        height: 72px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(ellipse at center, rgba(30, 112, 215, 0.12), rgba(30, 112, 215, 0) 76%);
        opacity: 0.4;
        z-index: 0;
      }
      .module-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 34px rgba(16, 35, 62, 0.11), 0 10px 22px rgba(16, 35, 62, 0.065), 0 0 22px rgba(35, 123, 230, 0.09), 0 0 30px rgba(52, 199, 89, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.95);
        border-color: rgba(199, 217, 238, 0.98);
      }
      .workflow-card { grid-area: workflow; min-height: 238px; }
      .status-card { grid-area: status; }
      .pipeline-card { grid-area: pipeline; }
      .journey-card { grid-area: journey; }
      .insights-card { grid-area: insights; }
      .workflow-card::before,
      .status-card::before,
      .pipeline-card::before,
      .journey-card::before,
      .insights-card::before {
        background: radial-gradient(circle at top right, rgba(47,127,255,0.08), transparent 40%), linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
      }
      .workflow-card {
        box-shadow: 0 18px 30px rgba(14, 35, 65, 0.085), 0 8px 18px rgba(14, 35, 65, 0.05), inset 0 1px 0 rgba(255,255,255,0.92);
      }
      .status-card {
        box-shadow: 0 14px 24px rgba(15, 34, 61, 0.082), 0 6px 14px rgba(15, 34, 61, 0.048), inset 0 1px 0 rgba(255,255,255,0.92);
      }
      .pipeline-card {
        box-shadow: 0 16px 27px rgba(15, 34, 61, 0.084), 0 7px 16px rgba(15, 34, 61, 0.05), inset 0 1px 0 rgba(255,255,255,0.92);
      }
      .journey-card {
        box-shadow: 0 13px 23px rgba(15, 34, 61, 0.08), 0 6px 14px rgba(15, 34, 61, 0.046), inset 0 1px 0 rgba(255,255,255,0.92);
      }
      .insights-card {
        box-shadow: 0 15px 25px rgba(15, 34, 61, 0.082), 0 7px 15px rgba(15, 34, 61, 0.048), inset 0 1px 0 rgba(255,255,255,0.92);
      }
      .workflow-card:hover { box-shadow: 0 24px 35px rgba(14, 35, 65, 0.12), 0 11px 22px rgba(14, 35, 65, 0.07), inset 0 1px 0 rgba(255,255,255,0.95); }
      .status-card:hover { box-shadow: 0 21px 32px rgba(15, 34, 61, 0.115), 0 10px 19px rgba(15, 34, 61, 0.066), inset 0 1px 0 rgba(255,255,255,0.95); }
      .pipeline-card:hover { box-shadow: 0 22px 33px rgba(15, 34, 61, 0.118), 0 10px 20px rgba(15, 34, 61, 0.068), inset 0 1px 0 rgba(255,255,255,0.95); }
      .journey-card:hover { box-shadow: 0 20px 30px rgba(15, 34, 61, 0.11), 0 9px 18px rgba(15, 34, 61, 0.064), inset 0 1px 0 rgba(255,255,255,0.95); }
      .insights-card:hover { box-shadow: 0 21px 32px rgba(15, 34, 61, 0.112), 0 10px 19px rgba(15, 34, 61, 0.065), inset 0 1px 0 rgba(255,255,255,0.95); }
      .module-card > * {
        position: relative;
        z-index: 1;
      }
      .module-card:nth-child(2n) {
        background: linear-gradient(175deg, rgba(255,255,255,0.94) 0%, rgba(250,250,250,0.88) 100%);
      }
      .module-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 10px;
      }
      .module-heading h4 {
        margin: 0;
        font-size: 0.81rem;
        color: #183b66;
        letter-spacing: 0.01em;
      }
      .module-chip {
        min-height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid rgba(204, 222, 241, 0.92);
        background: rgba(0,59,155,0.08);
        color: #2f5688;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .workflow-chart {
        width: 100%;
        height: 142px;
      }
      .workflow-axis-row {
        position: absolute;
        left: 16px;
        right: 138px;
        top: 171px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #547093;
        font-size: 0.46rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        pointer-events: none;
      }
      .workflow-legend-row {
        position: absolute;
        left: 16px;
        top: 38px;
        display: flex;
        align-items: center;
        gap: 6px;
        pointer-events: none;
      }
      .legend-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
      }
      .legend-dot.blue { background: rgba(22,100,245,0.9); }
      .legend-dot.green { background: rgba(52,199,89,0.88); }
      .workflow-legend-row span {
        color: #446488;
        font-size: 0.45rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }
      .workflow-chart .axis {
        stroke: rgba(138, 159, 189, 0.38);
        stroke-width: 1;
      }
      .workflow-chart .area {
        fill: rgba(0, 59, 155, 0.09);
      }
      .workflow-chart .line {
        fill: none;
        stroke: #0f4fae;
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 320;
        stroke-dashoffset: 320;
        animation: chart-draw 1.1s 130ms ease forwards, line-live-glow 6.2s ease-in-out infinite;
      }
      .workflow-chart .dot {
        fill: #34c759;
        stroke: #ffffff;
        stroke-width: 1.5;
      }
      .stage-row {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        margin-top: 8px;
      }
      .stage-row span {
        color: #557092;
        font-size: 0.62rem;
        text-align: center;
        font-weight: 700;
        letter-spacing: 0.02em;
      }
      .kpi-strip {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }
      .kpi-card {
        border: 1px solid rgba(219, 230, 244, 0.95);
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.9);
        padding: 6px;
        position: relative;
      }
      .kpi-card::after {
        content: "";
        position: absolute;
        right: 5px;
        top: 5px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #34c759;
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.42);
        animation: status-pulse 2.2s ease infinite;
      }
      .kpi-card strong {
        display: block;
        color: #1f416c;
        font-size: 0.58rem;
        letter-spacing: 0.03em;
      }
      .kpi-card span {
        display: block;
        margin-top: 3px;
        color: #4e6888;
        font-size: 0.55rem;
      }
      .kpi-spark {
        width: 100%;
        height: 14px;
        margin-top: 4px;
      }
      .kpi-spark path {
        fill: none;
        stroke: rgba(20, 91, 185, 0.9);
        stroke-width: 1.4;
        stroke-linecap: round;
        stroke-dasharray: 90;
        stroke-dashoffset: 90;
        animation: chart-draw 1.1s ease forwards, line-live-glow 5.5s ease-in-out infinite;
      }
      .revenue-strip {
        margin-top: 8px;
        border: 1px solid rgba(216, 229, 243, 0.95);
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.88);
        padding: 6px;
      }
      .revenue-strip p {
        margin: 0 0 4px;
        color: #2a4f80;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }
      .revenue-chart {
        width: 100%;
        height: 24px;
      }
      .revenue-chart .area {
        fill: rgba(22, 100, 245, 0.14);
      }
      .revenue-chart .line {
        fill: none;
        stroke: rgba(20, 92, 187, 0.9);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-dasharray: 180;
        stroke-dashoffset: 180;
        animation: chart-draw 1.3s 180ms ease forwards, line-live-glow 7.2s ease-in-out infinite;
      }
      .status-list {
        display: grid;
        gap: 6px;
      }
      .status-head-metrics {
        position: absolute;
        right: 12px;
        top: 37px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        width: 110px;
        z-index: 2;
        pointer-events: none;
      }
      .status-head-metrics span {
        min-height: 16px;
        border-radius: 999px;
        border: 1px solid rgba(212, 225, 241, 0.94);
        background: rgba(255, 255, 255, 0.88);
        color: #315885;
        font-size: 0.46rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
      }
      .status-chip-row {
        position: absolute;
        right: 12px;
        bottom: 34px;
        width: 112px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        z-index: 2;
        pointer-events: none;
      }
      .status-chip-row span {
        min-height: 13px;
        border-radius: 999px;
        border: 1px solid rgba(214, 227, 242, 0.95);
        background: rgba(252, 254, 255, 0.9);
        color: #355983;
        font-size: 0.44rem;
        font-weight: 700;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .status-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 7px 8px;
        border-radius: 10px;
        background: rgba(246, 250, 255, 0.8);
      }
      .status-name {
        color: #1e406c;
        font-size: 0.68rem;
        font-weight: 700;
      }
      .status-tag {
        min-height: 20px;
        padding: 0 7px;
        border-radius: 999px;
        font-size: 0.56rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
      }
      .status-tag.active {
        background: rgba(52, 199, 89, 0.14);
        color: #1f7f41;
      }
      .status-tag.monitoring {
        background: rgba(0, 59, 155, 0.12);
        color: #1d4f90;
      }
      .status-tag.track {
        background: rgba(39, 178, 83, 0.13);
        color: #206f3f;
      }
      .status-tag.ready {
        background: rgba(0, 59, 155, 0.1);
        color: #264f85;
      }
      .status-timeline {
        margin-top: 8px;
        border: 1px solid rgba(216, 229, 243, 0.95);
        border-radius: 10px;
        background: rgba(251, 253, 255, 0.95);
        padding: 6px;
      }
      .status-timeline p {
        margin: 0 0 4px;
        color: #2f537f;
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }
      .status-metrics {
        margin-top: 4px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
      }
      .metric-pill {
        border: 1px solid rgba(215, 228, 242, 0.95);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.88);
        padding: 3px;
      }
      .metric-pill strong {
        display: block;
        color: #27486f;
        font-size: 0.47rem;
        letter-spacing: 0.03em;
        line-height: 1.15;
      }
      .metric-pill svg {
        width: 100%;
        height: 8px;
        margin-top: 1px;
      }
      .metric-pill path {
        fill: none;
        stroke: rgba(19, 87, 177, 0.84);
        stroke-width: 1.3;
        stroke-linecap: round;
      }
      .timeline-row {
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .timeline-dot {
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: #34c759;
        box-shadow: 0 0 0 0 rgba(52,199,89,0.45);
        animation: status-pulse 2s ease infinite;
      }
      .timeline-line {
        flex: 1;
        height: 4px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(22,100,245,0.7), rgba(52,199,89,0.58));
      }
      .pulse-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #34c759;
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5);
        animation: status-pulse 2.1s ease infinite;
      }
      .pipeline-track {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 8px;
      }
      .pipeline-step {
        border-radius: 10px;
        border: 1px solid rgba(215, 228, 243, 0.95);
        background: rgba(251, 253, 255, 0.96);
        padding: 8px 6px;
        text-align: center;
      }
      .pipeline-step strong {
        display: block;
        font-size: 0.64rem;
        line-height: 1.2;
        color: #1f406c;
      }
      .pipeline-step span {
        display: inline-block;
        margin-top: 6px;
        width: 100%;
        min-height: 5px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(0,59,155,0.34), rgba(52,199,89,0.42));
      }
      .pipeline-bars {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        align-items: end;
        gap: 4px;
        height: 44px;
        margin-bottom: 8px;
      }
      .pipeline-bars span {
        display: block;
        border-radius: 4px 4px 2px 2px;
        background: linear-gradient(180deg, rgba(47,127,255,0.7), rgba(47,127,255,0.2));
        transition: height 700ms cubic-bezier(.22,.8,.2,1);
      }
      .pipeline-bars span:nth-child(2n) {
        background: linear-gradient(180deg, rgba(52,199,89,0.65), rgba(52,199,89,0.22));
      }
      .pipeline-sparkline {
        width: 100%;
        height: 22px;
      }
      .pipeline-sparkline path {
        fill: none;
        stroke: rgba(17, 88, 181, 0.9);
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 190;
        stroke-dashoffset: 190;
        animation: chart-draw 1.2s 180ms ease forwards, line-live-glow 6.8s ease-in-out infinite;
      }
      .pipeline-analytics-row {
        margin-top: 4px;
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 4px;
        align-items: center;
      }
      .mini-donut {
        width: 28px;
        height: 28px;
      }
      .mini-donut circle {
        fill: none;
        stroke-width: 7;
      }
      .mini-donut .d1 { stroke: rgba(22,100,245,0.85); stroke-dasharray: 38 100; stroke-dashoffset: 0; }
      .mini-donut .d2 { stroke: rgba(52,199,89,0.85); stroke-dasharray: 28 100; stroke-dashoffset: -38; }
      .mini-donut .d3 { stroke: rgba(140, 169, 209, 0.8); stroke-dasharray: 34 100; stroke-dashoffset: -66; }
      .pipeline-mini-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
      }
      .pipeline-mini-metrics span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 13px;
        border-radius: 999px;
        background: rgba(237, 244, 252, 0.9);
        color: #2e4f78;
        font-size: 0.46rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }
      .pipeline-density {
        position: absolute;
        right: 12px;
        bottom: 10px;
        width: 108px;
        border-radius: 10px;
        border: 1px solid rgba(214, 227, 242, 0.95);
        background: linear-gradient(165deg, rgba(255,255,255,0.94), rgba(246,251,255,0.9));
        box-shadow: 0 7px 16px rgba(13, 31, 56, 0.1);
        padding: 4px;
        z-index: 2;
        pointer-events: none;
      }
      .pipeline-density-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
      }
      .pipeline-density-row strong {
        color: #1f436e;
        font-size: 0.47rem;
        letter-spacing: 0.03em;
      }
      .pipeline-density-grid {
        margin-top: 3px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2px;
      }
      .pipeline-density-grid span {
        min-height: 12px;
        border-radius: 6px;
        background: rgba(232, 241, 252, 0.92);
        color: #33567f;
        font-size: 0.44rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .journey-wrap {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
      }
      .journey-donut {
        width: 74px;
        height: 74px;
      }
      .journey-donut circle {
        fill: none;
        stroke-width: 11;
      }
      .journey-donut .seg-a { stroke: #1f58ad; stroke-dasharray: 44 100; stroke-dashoffset: 0; }
      .journey-donut .seg-b { stroke: #2f7fca; stroke-dasharray: 24 100; stroke-dashoffset: -44; }
      .journey-donut .seg-c { stroke: #39b06e; stroke-dasharray: 17 100; stroke-dashoffset: -68; }
      .journey-donut .seg-d { stroke: #7ecf97; stroke-dasharray: 15 100; stroke-dashoffset: -85; }
      .journey-center {
        fill: #ffffff;
      }
      .journey-label {
        margin: 0;
        color: #4c6586;
        font-size: 0.61rem;
        line-height: 1.5;
      }
      .journey-label strong {
        display: block;
        margin-bottom: 2px;
        color: #1b3f6c;
        font-size: 0.68rem;
      }
      .journey-heatmap {
        position: absolute;
        right: 10px;
        top: 38px;
        width: 64px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        pointer-events: none;
        z-index: 2;
      }
      .journey-heatmap span {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 4px;
        background: rgba(225, 237, 251, 0.9);
      }
      .journey-heatmap span.hot { background: rgba(21, 102, 209, 0.72); }
      .journey-heatmap span.warm { background: rgba(52, 199, 89, 0.68); }
      .forecast-row {
        margin-top: 6px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
      }
      .forecast-widget {
        border: 1px solid rgba(219, 231, 244, 0.96);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.9);
        padding: 5px;
      }
      .forecast-widget strong {
        display: block;
        color: #23456f;
        font-size: 0.56rem;
        letter-spacing: 0.03em;
      }
      .forecast-widget svg {
        width: 100%;
        height: 13px;
        margin-top: 2px;
      }
      .forecast-widget path {
        fill: none;
        stroke: rgba(22,100,245,0.9);
        stroke-width: 1.4;
      }
      .journey-mini-bars {
        margin-top: 2px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2px;
        align-items: end;
        height: 12px;
      }
      .journey-mini-bars span {
        display: block;
        border-radius: 3px 3px 2px 2px;
        background: linear-gradient(180deg, rgba(22,100,245,0.75), rgba(52,199,89,0.42));
        transition: height 700ms cubic-bezier(.22,.8,.2,1);
      }
      .insight-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .insight-item {
        display: grid;
        gap: 6px;
        padding: 8px;
        border-radius: 10px;
        background: rgba(247, 251, 255, 0.9);
        border: 1px solid rgba(222, 232, 244, 0.95);
        position: relative;
      }
      .insight-item::after {
        content: "";
        position: absolute;
        right: 7px;
        top: 7px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 1px solid rgba(198, 217, 238, 0.85);
        background: radial-gradient(circle, rgba(47,127,255,0.2), rgba(47,127,255,0.02));
        opacity: 0.7;
      }
      .insight-item p {
        margin: 0;
        color: #345476;
        font-size: 0.66rem;
        line-height: 1.35;
        font-weight: 600;
      }
      .insight-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
      }
      .mini-line {
        width: 100%;
        height: 20px;
      }
      .mini-line path {
        fill: none;
        stroke: rgba(22, 100, 245, 0.86);
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 120;
        stroke-dashoffset: 120;
        animation: chart-draw 1.1s ease forwards, line-live-glow 6s ease-in-out infinite;
      }
      .widget-progress {
        height: 4px;
        border-radius: 999px;
        background: rgba(203, 219, 239, 0.75);
        overflow: hidden;
      }
      .widget-progress span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(22,100,245,0.9), rgba(52,199,89,0.9));
        transform-origin: left center;
        animation: progress-breathe 3.2s ease-in-out infinite;
      }
      .insight-kpi {
        display: none;
        align-items: center;
        justify-content: center;
        min-height: 16px;
        width: fit-content;
        padding: 0 6px;
        border-radius: 999px;
        background: rgba(230, 240, 252, 0.9);
        color: #2b4f7e;
        font-size: 0.5rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }
      .insight-tag {
        min-height: 20px;
        padding: 0 7px;
        border-radius: 999px;
        font-size: 0.56rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
      }
      .insight-tag.high { background: rgba(0,59,155,0.13); color: #1f4d8c; }
      .insight-tag.recommended { background: rgba(52,199,89,0.15); color: #22783e; }
      .insight-tag.ready { background: rgba(0,59,155,0.1); color: #285287; }
      .twist-ai-panel {
        position: absolute;
        right: 14px;
        bottom: 108px;
        width: min(230px, 62%);
        border-radius: 18px;
        border: 1px solid rgba(198, 217, 240, 0.98);
        background: linear-gradient(175deg, rgba(255,255,255,0.99), rgba(247,251,255,0.97));
        box-shadow: 0 24px 40px rgba(12, 28, 52, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
        padding: 12px;
        z-index: 2;
      }
      .twist-ai-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(125deg, rgba(255,255,255,0.36), rgba(255,255,255,0) 52%);
      }
      .holo-stream {
        margin-top: 7px;
        height: 18px;
        border-radius: 8px;
        border: 1px solid rgba(206, 221, 240, 0.94);
        background: linear-gradient(90deg, rgba(227, 239, 252, 0.86), rgba(238, 247, 252, 0.84));
        position: relative;
        overflow: hidden;
      }
      .holo-stream::before {
        content: "";
        position: absolute;
        inset: 2px -42% 2px -42%;
        background: linear-gradient(100deg, rgba(22,100,245,0) 10%, rgba(22,100,245,0.24) 40%, rgba(52,199,89,0.24) 60%, rgba(22,100,245,0) 90%);
        animation: stream-flow 5.4s linear infinite;
      }
      .workflow-meta-panel,
      .pipeline-funnel-panel,
      .journey-predict-panel,
      .insights-health-strip,
      .status-donut-panel {
        position: absolute;
        border-radius: 10px;
        border: 1px solid rgba(212, 225, 240, 0.95);
        background: linear-gradient(165deg, rgba(255,255,255,0.94), rgba(245,251,255,0.9));
        box-shadow: 0 10px 19px rgba(15, 34, 61, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82);
        pointer-events: none;
        z-index: 2;
      }
      .workflow-meta-panel {
        top: 37px;
        right: 10px;
        width: 114px;
        padding: 5px;
      }
      .workflow-meta-panel h5,
      .pipeline-funnel-panel h5,
      .journey-predict-panel h5,
      .status-donut-panel h5 {
        margin: 0;
        color: #2b4b74;
        font-size: 0.48rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        font-weight: 800;
      }
      .meta-rows {
        margin-top: 4px;
        display: grid;
        gap: 3px;
      }
      .meta-rows div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #385980;
        font-size: 0.5rem;
        font-weight: 700;
      }
      .meta-rows strong {
        color: #163a68;
        font-size: 0.55rem;
      }
      .workflow-mini-columns {
        margin-top: 4px;
        height: 16px;
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 2px;
        align-items: end;
      }
      .workflow-mini-columns span {
        display: block;
        border-radius: 2px 2px 1px 1px;
        background: linear-gradient(180deg, rgba(22,100,245,0.76), rgba(52,199,89,0.46));
      }
      .workflow-mini-labs {
        position: absolute;
        right: 10px;
        bottom: 66px;
        width: 118px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        z-index: 2;
        pointer-events: none;
      }
      .workflow-mini-labs article {
        border: 1px solid rgba(214, 227, 242, 0.94);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.86);
        min-height: 24px;
        padding: 3px;
      }
      .workflow-mini-labs strong {
        display: block;
        color: #305680;
        font-size: 0.42rem;
        line-height: 1.1;
      }
      .workflow-mini-labs svg {
        width: 100%;
        height: 8px;
        margin-top: 1px;
      }
      .workflow-mini-labs path {
        fill: none;
        stroke: rgba(20, 92, 186, 0.86);
        stroke-width: 1.2;
        stroke-linecap: round;
      }
      .pipeline-funnel-panel {
        top: 37px;
        right: 10px;
        width: 114px;
        padding: 5px;
      }
      .pipeline-funnel-panel .funnel-time {
        margin-top: 3px;
        color: #537092;
        font-size: 0.43rem;
        font-weight: 700;
      }
      .funnel-bars {
        margin-top: 4px;
        display: grid;
        gap: 3px;
      }
      .funnel-bars span {
        display: block;
        min-height: 4px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(17, 92, 191, 0.8), rgba(52, 199, 89, 0.65));
      }
      .pipeline-health-row {
        margin-top: 4px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
      }
      .pipeline-health-row span {
        min-height: 12px;
        border-radius: 999px;
        background: rgba(234, 243, 253, 0.92);
        color: #34557b;
        font-size: 0.44rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .pipeline-campaign-strip {
        position: absolute;
        left: 10px;
        bottom: 9px;
        width: 116px;
        border: 1px solid rgba(214, 227, 242, 0.94);
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.86);
        padding: 4px;
        z-index: 2;
        pointer-events: none;
      }
      .pipeline-campaign-strip p {
        margin: 0;
        color: #355981;
        font-size: 0.42rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }
      .pipeline-campaign-strip svg {
        width: 100%;
        height: 10px;
        margin-top: 2px;
      }
      .pipeline-campaign-strip path {
        fill: none;
        stroke: rgba(20, 92, 186, 0.86);
        stroke-width: 1.2;
        stroke-linecap: round;
      }
      .status-donut-panel {
        right: 10px;
        bottom: 8px;
        width: 114px;
        padding: 5px;
      }
      .status-mini-donut {
        width: 28px;
        height: 28px;
      }
      .status-mini-donut circle {
        fill: none;
        stroke-width: 7;
      }
      .status-mini-donut .s1 { stroke: rgba(22,100,245,0.86); stroke-dasharray: 42 100; }
      .status-mini-donut .s2 { stroke: rgba(52,199,89,0.86); stroke-dasharray: 36 100; stroke-dashoffset: -42; }
      .status-mini-donut .s3 { stroke: rgba(132, 161, 202, 0.86); stroke-dasharray: 22 100; stroke-dashoffset: -78; }
      .status-donut-wrap {
        margin-top: 4px;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .status-donut-metrics {
        display: grid;
        gap: 2px;
        color: #375980;
        font-size: 0.47rem;
        font-weight: 700;
      }
      .journey-predict-panel {
        right: 10px;
        bottom: 8px;
        width: 114px;
        padding: 5px;
      }
      .predictive-score {
        margin-top: 4px;
        color: #153a66;
        font-size: 0.66rem;
        font-weight: 800;
      }
      .predictive-score small {
        color: #3d6086;
        font-size: 0.46rem;
        font-weight: 700;
        text-transform: uppercase;
      }
      .predictive-curve {
        margin-top: 3px;
        width: 100%;
        height: 14px;
      }
      .predictive-curve path {
        fill: none;
        stroke: rgba(20, 92, 188, 0.9);
        stroke-width: 1.4;
        stroke-linecap: round;
      }
      .journey-predict-panel .predictive-time {
        margin-top: 2px;
        color: #567495;
        font-size: 0.42rem;
        font-weight: 700;
        letter-spacing: 0.03em;
      }
      .insights-health-strip {
        left: 8px;
        right: 8px;
        bottom: 8px;
        min-height: 24px;
        padding: 4px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
      }
      .insights-health-strip span {
        border-radius: 8px;
        border: 1px solid rgba(221, 232, 245, 0.95);
        background: rgba(255, 255, 255, 0.86);
        color: #2f527c;
        font-size: 0.44rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
      }
      .insights-attribution-row {
        position: absolute;
        left: 8px;
        right: 8px;
        top: 36px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        z-index: 2;
        pointer-events: none;
      }
      .insights-attribution-row span {
        min-height: 13px;
        border-radius: 999px;
        border: 1px solid rgba(214, 227, 242, 0.95);
        background: rgba(250, 253, 255, 0.9);
        color: #355881;
        font-size: 0.43rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .insight-trend-stack {
        position: absolute;
        right: 8px;
        top: 58px;
        width: 56px;
        display: grid;
        gap: 3px;
        z-index: 2;
        pointer-events: none;
      }
      .insight-trend-stack span {
        display: block;
        height: 7px;
        border-radius: 999px;
        background: rgba(232, 241, 252, 0.92);
        position: relative;
        overflow: hidden;
      }
      .insight-trend-stack span::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(90deg, rgba(22,100,245,0.78), rgba(52,199,89,0.62));
      }
      .insight-trend-stack span:nth-child(1)::after { width: 76%; display: block; }
      .insight-trend-stack span:nth-child(2)::after { width: 58%; display: block; }
      .insight-trend-stack span:nth-child(3)::after { width: 84%; display: block; }
      .insight-tooltip {
        position: absolute;
        right: 6px;
        bottom: 6px;
        min-height: 12px;
        padding: 0 5px;
        border-radius: 999px;
        border: 1px solid rgba(211, 225, 241, 0.95);
        background: rgba(255, 255, 255, 0.86);
        color: #385c84;
        font-size: 0.42rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
      }
      .micro-counter {
        font-variant-numeric: tabular-nums;
        animation: counter-breathe 4.6s ease-in-out infinite;
      }
      .ai-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
      }
      .ai-kicker {
        display: inline-flex;
        min-height: 20px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid rgba(202, 219, 239, 0.95);
        background: rgba(250, 253, 255, 0.96);
        color: #2b4f80;
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        align-items: center;
      }
      .ai-live-pill {
        display: inline-flex;
        min-height: 20px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(52, 199, 89, 0.14);
        color: #256f41;
        font-size: 0.56rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        align-items: center;
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.28);
        animation: status-pulse 2.3s ease infinite;
      }
      .twist-ai-panel h4 {
        margin: 0;
        color: #173b68;
        font-size: 0.88rem;
        letter-spacing: -0.01em;
      }
      .twist-ai-panel p {
        margin: 4px 0 10px;
        color: #4d6484;
        font-size: 0.66rem;
      }
      .ai-checklist {
        display: grid;
        gap: 6px;
      }
      .ai-check {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 0.63rem;
        font-weight: 700;
        color: #21466f;
      }
      .ai-check span:last-child {
        color: #4e6583;
      }
      .ai-progress {
        margin-top: 10px;
        height: 6px;
        border-radius: 999px;
        background: rgba(214, 226, 241, 0.74);
        overflow: hidden;
      }
      .ai-progress::after {
        content: "";
        display: block;
        width: 58%;
        height: 100%;
        border-radius: inherit;
        background: var(--twist-premium-gradient);
        animation: ai-progress 2.6s ease-in-out infinite alternate;
      }
      .ai-rec-row {
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.58rem;
        font-weight: 700;
        color: #355577;
      }
      .ai-rec-dot {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: #34c759;
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.48);
        animation: status-pulse 2s ease infinite;
      }
      .ai-btn {
        margin-top: 10px;
        width: 100%;
        min-height: 38px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 15px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 48%),
          var(--twist-premium-gradient);
        color: #ffffff;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        text-shadow: 0 1px 1px rgba(10, 35, 74, 0.22);
        box-shadow: 0 12px 22px rgba(22, 100, 245, 0.24), 0 5px 14px rgba(52, 199, 89, 0.15);
        transition: transform 220ms ease, box-shadow 220ms ease;
      }
      .ai-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 26px rgba(22, 100, 245, 0.27), 0 7px 16px rgba(52, 199, 89, 0.2);
      }

      .lead-form { margin-top: 14px; padding: 20px; background: linear-gradient(145deg, rgba(0,59,155,0.95), rgba(0,91,219,0.95)); color: white; border-radius: 20px; }
      .lead-form h3 { margin: 0 0 6px; font-size: 1.06rem; }
      .lead-form p { margin: 0 0 12px; color: rgba(255,255,255,0.86); font-size: 0.95rem; }
      .lead-form .field { display: grid; gap: 6px; margin-bottom: 10px; }
      .lead-form input, .lead-form select, .lead-form textarea { width: 100%; border: none; border-radius: 12px; padding: 11px 12px; background: rgba(255,255,255,0.95); color: var(--text); }
      .lead-form textarea { min-height: 92px; resize: vertical; }
      .lead-form .btn { margin-top: 4px; width: 100%; }
      .form-feedback { margin-top: 10px; font-size: 0.92rem; color: #eaf2ff; font-weight: 600; }
      .form-feedback.is-error { color: #ffe7e7; }
      .form-feedback.is-success { color: #dff7e7; }
      .lead-form input.is-invalid, .lead-form textarea.is-invalid, .lead-form select.is-invalid { outline: 2px solid #ffb4b4; }

      .section {
        margin-top: 32px;
        padding: 48px;
        background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(250,252,255,0.85));
        border: 1px solid rgba(224, 234, 246, 0.96);
        border-radius: 30px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 22px 48px rgba(15,35,64,0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        position: relative;
        backdrop-filter: blur(8px);
      }
      .section h2 {
        margin: 0 0 12px;
        font-size: clamp(1.92rem, 2.7vw, 2.45rem);
        line-height: 1.08;
        letter-spacing: -0.025em;
        color: #11335e;
      }
      .section p.lead {
        margin: 0 0 26px;
        color: var(--muted);
        font-size: 1.01rem;
        line-height: 1.64;
        max-width: 70ch;
      }

      .process-section {
        margin-top: 32px;
        padding: 58px 52px 48px;
        background:
          radial-gradient(circle at 12% 16%, rgba(22, 100, 245, 0.09), rgba(22, 100, 245, 0) 36%),
          radial-gradient(circle at 86% 18%, rgba(52, 199, 89, 0.08), rgba(52, 199, 89, 0) 34%),
          linear-gradient(168deg, rgba(255,255,255,0.93), rgba(249,252,255,0.9));
        border-radius: 34px;
        border: 1px solid rgba(221, 232, 246, 0.96);
        box-shadow: 0 24px 54px rgba(14, 33, 59, 0.08), inset 0 1px 0 rgba(255,255,255,0.92);
        backdrop-filter: blur(10px) saturate(108%);
        overflow: hidden;
      }
      .process-section::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at 38% 60%, rgba(255,255,255,0.42), rgba(255,255,255,0) 54%),
          repeating-linear-gradient(120deg, rgba(31, 88, 166, 0.012) 0, rgba(31, 88, 166, 0.012) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 12px);
      }
      .process-head {
        position: relative;
        z-index: 1;
        max-width: 860px;
      }
      .process-eyebrow {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid rgba(206, 223, 241, 0.96);
        background: rgba(247, 251, 255, 0.88);
        color: #2c5382;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .process-title {
        margin: 12px 0 10px;
        font-size: clamp(2.1rem, 4vw, 3.2rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
        color: #12345d;
      }
      .process-title .grad {
        background-image: var(--twist-premium-gradient);
        background-size: 130% 100%;
        background-position: 24% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: gradient-glide 12.5s ease-in-out infinite;
      }
      .process-sub {
        margin: 0;
        max-width: 76ch;
        color: #466185;
        font-size: 1.03rem;
        line-height: 1.66;
      }

      .process-timeline-wrap {
        position: relative;
        z-index: 1;
        margin-top: 28px;
      }
      .process-network {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
      }
      .process-network svg {
        width: 100%;
        height: 100%;
      }
      .process-network path {
        fill: none;
        stroke: rgba(174, 197, 225, 0.56);
        stroke-width: 2;
        stroke-linecap: round;
      }
      .process-network path::marker {
        display: none;
      }
      .process-network path[data-flow] {
        stroke: url(#processFlowGrad);
        stroke-dasharray: 220;
        stroke-dashoffset: 220;
        opacity: 0;
        filter: drop-shadow(0 0 4px rgba(41, 117, 220, 0.16));
        transition: stroke-dashoffset 620ms ease-out, opacity 440ms ease-out;
      }
      .process-network path.is-lit {
        stroke-dashoffset: 0;
        opacity: 0.95;
      }
      .process-timeline {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        padding: 8px 4px 16px;
      }
      .process-step {
        position: relative;
        min-height: 224px;
        padding: 20px 18px 18px;
        border-radius: 22px;
        border: 1px solid rgba(208, 224, 242, 0.96);
        background: linear-gradient(168deg, rgba(255,255,255,0.95), rgba(246,251,255,0.92));
        box-shadow: 0 16px 30px rgba(15, 35, 64, 0.07), inset 0 1px 0 rgba(255,255,255,0.94), inset 0 -12px 22px rgba(18, 62, 114, 0.04);
        backdrop-filter: blur(10px) saturate(112%);
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 420ms ease-out, transform 420ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out, filter 240ms ease-out;
      }
      .process-step.is-visible {
        opacity: 1;
        transform: translateY(0);
      }
      .process-step::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(160deg, rgba(255,255,255,0.36), rgba(255,255,255,0) 56%);
        opacity: 0.7;
      }
      .process-step:hover,
      .process-step.is-current {
        transform: translateY(-2px) scale(1.01);
        border-color: rgba(191, 214, 239, 0.96);
        box-shadow: 0 22px 38px rgba(17, 43, 78, 0.115), 0 8px 18px rgba(17, 43, 78, 0.07), inset 0 1px 0 rgba(255,255,255,0.97);
      }
      .process-step.is-active {
        box-shadow: 0 18px 34px rgba(22, 100, 245, 0.14), 0 9px 18px rgba(17, 43, 78, 0.06), inset 0 1px 0 rgba(255,255,255,0.95);
        border-color: rgba(187, 210, 237, 0.98);
      }
      .process-step.is-active::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        pointer-events: none;
        border: 1px solid rgba(65, 129, 215, 0.24);
      }
      .step-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 14px;
        position: relative;
        z-index: 1;
      }
      .process-icon {
        min-width: 40px;
        min-height: 40px;
        border-radius: 12px;
        border: 1px solid rgba(205, 222, 241, 0.95);
        background: linear-gradient(165deg, rgba(245, 251, 255, 0.94), rgba(238, 247, 255, 0.9));
        color: #295380;
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .step-number {
        color: #245185;
        font-size: 1.18rem;
        line-height: 1;
        font-weight: 800;
        letter-spacing: -0.01em;
        display: inline-flex;
        align-items: center;
      }
      .process-step h3 {
        margin: 0 0 9px;
        color: #173a66;
        font-size: 1.02rem;
        line-height: 1.28;
        letter-spacing: -0.01em;
        position: relative;
        z-index: 1;
      }
      .process-step p {
        margin: 0;
        color: #4c6788;
        font-size: 0.86rem;
        line-height: 1.46;
        position: relative;
        z-index: 1;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .process-principles {
        position: relative;
        z-index: 1;
        margin-top: 22px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }
      .process-principle {
        min-height: 116px;
        border-radius: 20px;
        border: 1px solid rgba(215, 228, 243, 0.95);
        background: linear-gradient(170deg, rgba(255,255,255,0.95), rgba(248,252,255,0.9));
        box-shadow: 0 12px 24px rgba(14, 32, 58, 0.06), inset 0 1px 0 rgba(255,255,255,0.92);
        padding: 14px 13px;
        display: flex;
        flex-direction: column;
        gap: 9px;
        justify-content: flex-start;
      }
      .process-principle:hover {
        border-color: rgba(193, 215, 238, 0.98);
        box-shadow: 0 16px 28px rgba(17, 43, 78, 0.09), inset 0 1px 0 rgba(255,255,255,0.95);
      }
      .principle-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        border: 1px solid rgba(206, 224, 242, 0.96);
        background: linear-gradient(165deg, rgba(245, 251, 255, 0.95), rgba(238, 247, 255, 0.92));
        color: #295380;
        font-size: 0.53rem;
        letter-spacing: 0.06em;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
      }
      .process-principle h3 {
        margin: 0;
        color: #173a66;
        font-size: 0.92rem;
        line-height: 1.28;
        letter-spacing: -0.01em;
      }
      .process-principle p {
        margin: 0;
        color: #4c6788;
        font-size: 0.82rem;
        line-height: 1.48;
      }

      @media (max-width: 1120px) {
        .process-section {
          padding: 44px 26px 38px;
        }
        .process-network {
          display: none;
        }
        .process-timeline {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 16px;
        }
        .process-step {
          min-height: 208px;
          padding: 18px 16px;
        }
      }

      @media (max-width: 760px) {
        .process-section {
          padding: 32px 16px 24px;
          border-radius: 24px;
        }
        .process-title {
          font-size: clamp(1.7rem, 8vw, 2.2rem);
        }
        .process-sub {
          font-size: 0.94rem;
        }
        .process-network {
          display: none;
        }
        .process-timeline {
          grid-template-columns: 1fr;
          gap: 14px;
          padding: 8px 0 10px 20px;
        }
        .process-timeline::before {
          content: "";
          position: absolute;
          left: 7px;
          top: 16px;
          bottom: 18px;
          width: 2px;
          border-radius: 999px;
          background: linear-gradient(180deg, rgba(22,100,245,0.42), rgba(52,199,89,0.42));
        }
        .process-step {
          min-height: 214px;
          padding: 20px 18px;
        }
        .process-principles {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 10px;
        }
        .process-principle {
          min-height: 102px;
        }
      }

      .ecosystem-section {
        margin-top: 28px;
        padding: 56px 50px 50px;
        background:
          radial-gradient(circle at 10% 14%, rgba(22, 100, 245, 0.085), rgba(22, 100, 245, 0) 34%),
          radial-gradient(circle at 88% 18%, rgba(52, 199, 89, 0.08), rgba(52, 199, 89, 0) 36%),
          linear-gradient(168deg, rgba(255,255,255,0.95), rgba(248,252,255,0.92));
        border: 1px solid rgba(220, 232, 246, 0.96);
        border-radius: 34px;
        box-shadow: 0 24px 52px rgba(14, 32, 58, 0.08), inset 0 1px 0 rgba(255,255,255,0.94);
        backdrop-filter: blur(10px) saturate(110%);
        overflow: hidden;
      }
      .ecosystem-section::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at 50% 52%, rgba(255,255,255,0.42), rgba(255,255,255,0) 54%),
          repeating-linear-gradient(120deg, rgba(28, 94, 190, 0.012) 0, rgba(28, 94, 190, 0.012) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 12px);
      }
      .ecosystem-section::after {
        content: "";
        position: absolute;
        inset: -80px -40px;
        pointer-events: none;
        background:
          radial-gradient(ellipse at 22% 48%, rgba(22, 100, 245, 0.11), rgba(22, 100, 245, 0) 52%),
          radial-gradient(ellipse at 78% 56%, rgba(52, 199, 89, 0.1), rgba(52, 199, 89, 0) 50%);
        filter: blur(30px);
        opacity: 0.62;
      }
      .ecosystem-head {
        position: relative;
        z-index: 2;
        max-width: 900px;
      }
      .ecosystem-eyebrow {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid rgba(206, 224, 241, 0.96);
        background: rgba(247, 251, 255, 0.88);
        color: #2d5482;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .ecosystem-title {
        margin: 14px 0 12px;
        color: #143760;
        font-size: clamp(2.24rem, 4.35vw, 3.5rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
        max-width: 16ch;
      }
      .ecosystem-title .grad {
        background-image: var(--twist-premium-gradient);
        background-size: 130% 100%;
        background-position: 24% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: gradient-glide 12.5s ease-in-out infinite;
      }
      .ecosystem-sub {
        margin: 0;
        max-width: 78ch;
        color: #486385;
        font-size: 1.02rem;
        line-height: 1.64;
      }

      .ecosystem-shell {
        position: relative;
        z-index: 2;
        margin-top: 30px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }
      .eco-tools--three {
        grid-template-columns: repeat(1, minmax(0, 1fr));
      }
      .ecosystem-head {
        position: relative;
        z-index: 2;
        max-width: 920px;
        display: grid;
        gap: 12px;
      }
      .ecosystem-eyebrow {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid rgba(206, 224, 241, 0.96);
        background: rgba(247, 251, 255, 0.88);
        color: #2d5482;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .ecosystem-title {
        margin: 0;
        color: #143760;
        font-size: clamp(2.24rem, 4.35vw, 3.5rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
        max-width: 16ch;
      }
      .ecosystem-sub {
        margin: 0;
        max-width: 78ch;
        color: #486385;
        font-size: 1.02rem;
        line-height: 1.64;
      }
      .twist-ai-cta {
        width: fit-content;
        min-height: 48px;
        padding: 0 18px;
        border-radius: 999px;
        border: 1px solid rgba(184, 217, 242, 0.96);
        background: linear-gradient(132deg, rgba(13, 85, 202, 0.96) 0%, rgba(24, 120, 239, 0.96) 45%, rgba(40, 180, 222, 0.96) 72%, rgba(52, 199, 89, 0.96) 100%);
        color: #f8fcff;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 16px 34px rgba(10, 42, 84, 0.18), 0 0 22px rgba(22,100,245,0.22), 0 0 28px rgba(52,199,89,0.16), inset 0 1px 0 rgba(255,255,255,0.18);
        transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
      }
      .twist-ai-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 42px rgba(10, 42, 84, 0.22), 0 0 30px rgba(22,100,245,0.28), 0 0 34px rgba(52,199,89,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
        filter: saturate(1.05);
      }
      .eco-tool-featured {
        border-color: rgba(158, 199, 236, 0.98);
        background:
          radial-gradient(circle at 50% 18%, rgba(22,100,245,0.1), rgba(22,100,245,0) 42%),
          radial-gradient(circle at 50% 82%, rgba(52,199,89,0.08), rgba(52,199,89,0) 34%),
          linear-gradient(164deg, rgba(255,255,255,0.96), rgba(241,248,255,0.9));
        box-shadow:
          0 18px 30px rgba(16, 40, 73, 0.12),
          0 0 24px rgba(22,100,245,0.12),
          0 0 28px rgba(52,199,89,0.1),
          inset 0 1px 0 rgba(255,255,255,0.96);
      }
      .eco-tool-featured .eco-icon {
        color: #124078;
        border-color: rgba(165, 204, 237, 0.98);
        background: linear-gradient(160deg, rgba(245,251,255,0.98), rgba(232,245,255,0.92));
      }
      .eco-tool-featured:hover {
        border-color: rgba(138, 190, 231, 0.98);
        box-shadow:
          0 24px 38px rgba(16, 40, 73, 0.16),
          0 0 30px rgba(22,100,245,0.18),
          0 0 34px rgba(52,199,89,0.14),
          inset 0 1px 0 rgba(255,255,255,0.98);
      }
      .ecosystem-neural-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
      }
      .ecosystem-flow-map {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .ecosystem-flow-map .wire {
        fill: none;
        stroke: rgba(143, 180, 221, 0.28);
        stroke-width: 1.5;
        stroke-linecap: round;
        filter: blur(0.24px);
      }
      .ecosystem-flow-map .data-stream {
        fill: none;
        stroke: url(#ecoDataFlow);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-dasharray: 2 16;
        opacity: 0.58;
        animation: eco-data-flow 7.4s linear infinite;
        filter: drop-shadow(0 0 6px rgba(34, 112, 207, 0.2)) drop-shadow(0 0 10px rgba(52, 199, 89, 0.16));
      }
      .ecosystem-flow-map .data-stream.alt {
        animation-duration: 8.1s;
        animation-direction: reverse;
        opacity: 0.5;
      }
      .ecosystem-flow-map .data-pulse {
        fill: none;
        stroke: rgba(173, 206, 241, 0.34);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-dasharray: 0.5 38;
        animation: eco-pulse-flow 6.8s linear infinite;
      }
      .eco-category::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background: linear-gradient(150deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 50%);
      }
      .eco-category:hover {
        transform: translateY(-8px);
        border-color: rgba(183, 211, 239, 0.98);
        box-shadow: 0 34px 52px rgba(15, 38, 67, 0.17), 0 0 0 1px rgba(193, 220, 246, 0.9), inset 0 1px 0 rgba(255,255,255,0.94), inset 0 -14px 26px rgba(18, 56, 106, 0.08);
      }
      .eco-category-head {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
      }
      .eco-kicker {
        min-height: 18px;
        padding: 0 8px;
        border-radius: 999px;
        border: 1px solid rgba(196, 218, 240, 0.92);
        background: rgba(248, 253, 255, 0.84);
        color: #3e6189;
        font-size: 0.47rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
      }
      .eco-category h3 {
        margin: 0;
        color: #163b67;
        font-size: 1.15rem;
        letter-spacing: -0.015em;
      }
      .eco-tools {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .eco-tool {
        border-radius: 16px;
        border: 1px solid rgba(206, 223, 241, 0.94);
        background: linear-gradient(164deg, rgba(255,255,255,0.9), rgba(244,250,255,0.84));
        box-shadow: 0 14px 24px rgba(16, 40, 73, 0.09), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(255,255,255,0.24);
        padding: 11px;
        transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease, filter 300ms ease;
        will-change: transform, box-shadow, filter;
      }
      .eco-tool-head {
        display: grid;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
        align-items: start;
      }
      .eco-icon {
        width: 30px;
        height: 30px;
        border-radius: 10px;
        border: 1px solid rgba(199, 218, 239, 0.95);
        background: linear-gradient(160deg, rgba(245,251,255,0.95), rgba(236,247,255,0.9));
        color: #2a557f;
        font-size: 0.52rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 12px rgba(15, 42, 76, 0.08), inset 0 1px 0 rgba(255,255,255,0.92);
        transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
      }
      .eco-copy h4 {
        margin: 0;
        color: #1b426f;
        font-size: 0.75rem;
        line-height: 1.22;
        letter-spacing: -0.01em;
      }
      .eco-desc {
        margin: 3px 0 0;
        color: #486788;
        font-size: 0.62rem;
        line-height: 1.35;
      }
      .eco-tool:hover {
        transform: translateY(-8px);
        border-color: rgba(172, 209, 245, 0.98);
        box-shadow: 0 24px 36px rgba(16, 40, 73, 0.16), 0 0 24px rgba(35, 123, 230, 0.12), 0 0 30px rgba(52, 199, 89, 0.09), inset 0 1px 0 rgba(255,255,255,0.94);
        filter: saturate(1.04);
      }
      .eco-tool:hover .eco-icon {
        transform: translateY(-1px);
        border-color: rgba(173, 206, 239, 0.98);
        box-shadow: 0 8px 16px rgba(22, 96, 188, 0.15), 0 0 14px rgba(52, 199, 89, 0.12), inset 0 1px 0 rgba(255,255,255,0.96);
      }
      .tool-preview {
        height: 62px;
        border-radius: 10px;
        border: 1px solid rgba(188, 213, 238, 0.9);
        background:
          linear-gradient(164deg, rgba(252,255,255,0.94), rgba(236,247,255,0.88)),
          radial-gradient(circle at 24% 16%, rgba(22,100,245,0.08), rgba(22,100,245,0) 52%),
          radial-gradient(circle at 82% 22%, rgba(52,199,89,0.07), rgba(52,199,89,0) 54%);
        padding: 5px;
        margin-top: 9px;
        display: grid;
        gap: 4px;
        font-size: 0.34rem;
        color: #40658d;
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -8px 14px rgba(18, 61, 117, 0.04);
        position: relative;
      }
      .tool-preview::before {
        content: "";
        position: absolute;
        left: 6px;
        right: 6px;
        top: 4px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(22,100,245,0.22), rgba(52,199,89,0.2));
        opacity: 0.65;
        pointer-events: none;
      }
      .tool-preview span {
        border-radius: 5px;
        background: rgba(22,100,245,0.12);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(190, 216, 241, 0.78);
      }

      .ecosystem-section:has(.eco-tool:hover) .ecosystem-flow-map .data-stream,
      .ecosystem-section:has(.eco-category:hover) .ecosystem-flow-map .data-stream {
        opacity: 0.88;
        stroke-width: 2.6;
      }
      .ecosystem-section:has(.eco-tool:hover) .ecosystem-flow-map .data-pulse,
      .ecosystem-section:has(.eco-category:hover) .ecosystem-flow-map .data-pulse {
        stroke: rgba(176, 212, 247, 0.62);
      }
      .ecosystem-section:has(.eco-category:nth-child(1):hover) .ecosystem-flow-map .c1,
      .ecosystem-section:has(.eco-category:nth-child(2):hover) .ecosystem-flow-map .c2,
      .ecosystem-section:has(.eco-category:nth-child(3):hover) .ecosystem-flow-map .c3,
      .ecosystem-section:has(.eco-category:nth-child(4):hover) .ecosystem-flow-map .c4 {
        opacity: 1;
        stroke-width: 2.9;
      }

      .p-content { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }
      .p-content .cal { background: rgba(52,199,89,0.15); }
      .p-content .caption { grid-column: 1 / span 2; }
      .p-content .media { grid-column: 3 / 4; background: rgba(52,199,89,0.17); }
      .p-content .approval { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(22,100,245,0.16), rgba(52,199,89,0.17)); }

      .p-assistant { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
      .p-assistant .intent { background: rgba(22,100,245,0.14); }
      .p-assistant .reply { grid-column: 1 / -1; background: rgba(255,255,255,0.76); border: 1px solid rgba(192, 214, 236, 0.86); }
      .p-assistant .tasks { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(22,100,245,0.16), rgba(52,199,89,0.18)); }

      .p-crm { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
      .p-crm .lane { background: rgba(255,255,255,0.7); border: 1px solid rgba(192, 214, 236, 0.86); }
      .p-crm .timeline { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(22,100,245,0.16), rgba(52,199,89,0.16)); }

      .p-automation { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
      .p-automation .node { background: rgba(255,255,255,0.75); border: 1px solid rgba(190, 212, 236, 0.86); }
      .p-automation .seq { grid-column: 1 / -1; background: rgba(52,199,89,0.17); }

      .p-proposal { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
      .p-proposal .doc { background: rgba(255,255,255,0.76); border: 1px solid rgba(191, 213, 236, 0.88); }
      .p-proposal .flow { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(22,100,245,0.16), rgba(52,199,89,0.18)); }

      .p-analytics { grid-template-columns: repeat(3, 1fr); align-items: end; }
      .p-analytics .chart { background: rgba(52,199,89,0.18); }
      .p-analytics .line { height: 30%; }
      .p-analytics .bars { height: 70%; background: rgba(22,100,245,0.17); }
      .p-analytics .area { height: 55%; }

      .p-image { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
      .p-image .asset { background: linear-gradient(140deg, rgba(22,100,245,0.18), rgba(52,199,89,0.16)); }
      .p-image .workspace { grid-column: 1 / -1; background: rgba(255,255,255,0.72); border: 1px solid rgba(193, 215, 238, 0.86); }

      .p-video { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
      .p-video .scene { grid-column: 1 / -1; background: linear-gradient(130deg, rgba(22,100,245,0.18), rgba(52,199,89,0.16)); }
      .p-video .clip { background: rgba(255,255,255,0.74); border: 1px solid rgba(191, 213, 236, 0.86); }
      .p-video .story { grid-column: 1 / -1; background: rgba(52,199,89,0.18); }

      .p-branding { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
      .p-branding .chip { background: rgba(22,100,245,0.15); }
      .p-branding .board { grid-column: 1 / -1; background: rgba(52,199,89,0.18); }

      .p-photo { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
      .p-photo .thumb { background: linear-gradient(140deg, rgba(22,100,245,0.16), rgba(52,199,89,0.14)); }
      .p-photo .strip { grid-column: 1 / -1; background: rgba(255,255,255,0.78); border: 1px solid rgba(192, 214, 236, 0.85); }

      .p-vprod { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
      .p-vprod .frame { background: rgba(22,100,245,0.16); }
      .p-vprod .timeline { grid-column: 1 / -1; background: rgba(52,199,89,0.18); }

      .p-podcast { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); }
      .p-podcast .wave { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(22,100,245,0.16), rgba(52,199,89,0.17)); }
      .p-podcast .track { background: rgba(255,255,255,0.76); border: 1px solid rgba(193, 215, 238, 0.86); }
      .p-podcast .mix { grid-column: 1 / -1; background: rgba(52,199,89,0.17); }

      .p-graphic { grid-template-columns: 1fr 1fr 1fr; }
      .p-graphic .panel { background: rgba(22,100,245,0.14); }
      .p-graphic .canvas { background: rgba(255,255,255,0.76); border: 1px solid rgba(192, 214, 236, 0.86); }

      .p-social { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
      .p-social .day { background: rgba(22,100,245,0.16); }
      .p-social .queue { grid-column: 1 / -1; background: rgba(52,199,89,0.18); }

      .p-local { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
      .p-local .map { grid-column: 1 / -1; background: linear-gradient(130deg, rgba(22,100,245,0.16), rgba(52,199,89,0.14)); }
      .p-local .item { background: rgba(255,255,255,0.78); border: 1px solid rgba(193, 215, 238, 0.86); }

      .p-gads { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
      .p-gads .group { background: rgba(22,100,245,0.16); }
      .p-gads .editor { grid-column: 1 / -1; background: rgba(52,199,89,0.18); }

      .p-mads { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
      .p-mads .aud { background: rgba(255,255,255,0.8); border: 1px solid rgba(190, 212, 236, 0.86); }
      .p-mads .review { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(22,100,245,0.16), rgba(52,199,89,0.17)); }

      .p-email { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
      .p-email .subject { grid-column: 1 / -1; background: rgba(22,100,245,0.15); }
      .p-email .seg { background: rgba(52,199,89,0.18); }
      .p-email .composer { background: rgba(255,255,255,0.78); border: 1px solid rgba(193, 215, 238, 0.86); }
      .p-email .preview { grid-column: 1 / -1; background: rgba(52,199,89,0.18); }

      .p-sites { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); }
      .p-sites .row { background: rgba(22,100,245,0.14); }
      .p-sites .device { background: rgba(52,199,89,0.17); }

      .p-landing { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
      .p-landing .hero { grid-column: 1 / -1; background: rgba(22,100,245,0.16); }
      .p-landing .form { background: rgba(255,255,255,0.78); border: 1px solid rgba(193, 215, 238, 0.86); }
      .p-landing .cta { background: rgba(52,199,89,0.18); }

      .p-funnels { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
      .p-funnels .step { background: rgba(255,255,255,0.8); border: 1px solid rgba(191, 213, 236, 0.86); }
      .p-funnels .path { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(22,100,245,0.16), rgba(52,199,89,0.16)); }

      .p-commerce { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
      .p-commerce .card { background: linear-gradient(140deg, rgba(22,100,245,0.16), rgba(52,199,89,0.14)); }
      .p-commerce .checkout { grid-column: 1 / -1; background: rgba(52,199,89,0.18); }

      .p-portal { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
      .p-portal .panel { background: rgba(255,255,255,0.8); border: 1px solid rgba(192, 214, 236, 0.86); }
      .p-portal .inbox { grid-column: 1 / -1; background: linear-gradient(90deg, rgba(22,100,245,0.16), rgba(52,199,89,0.18)); }

      .ecosystem-canvas {
        position: relative;
        z-index: 2;
        margin-top: 34px;
      }
      .ecosystem-ambient {
        position: absolute;
        inset: -26px -20px -18px;
        pointer-events: none;
        z-index: 0;
      }
      .ecosystem-ambient span {
        position: absolute;
        border-radius: 999px;
        backdrop-filter: blur(22px);
      }
      .ecosystem-ambient span:nth-child(1) {
        inset: 8% 10% auto;
        height: 120px;
        background: linear-gradient(120deg, rgba(255,255,255,0.54), rgba(255,255,255,0.18));
        border: 1px solid rgba(221, 236, 252, 0.68);
        box-shadow: 0 10px 34px rgba(26, 77, 142, 0.08);
      }
      .ecosystem-ambient span:nth-child(2) {
        inset: auto 6% 14% 52%;
        background: radial-gradient(circle at 22% 44%, rgba(22,100,245,0.2), rgba(22,100,245,0.02) 56%, rgba(22,100,245,0) 78%);
        filter: blur(18px);
        opacity: 0.84;
      }
      .ecosystem-ambient span:nth-child(3) {
        inset: auto 48% 12% 6%;
        background: radial-gradient(circle at 70% 52%, rgba(52,199,89,0.16), rgba(52,199,89,0.02) 52%, rgba(52,199,89,0) 78%);
        filter: blur(22px);
        opacity: 0.8;
      }
      .ecosystem-ambient span:nth-child(4) {
        inset: 35% 29% 31%;
        border-radius: 30px;
        border: 1px solid rgba(227, 237, 249, 0.7);
        background: linear-gradient(160deg, rgba(255,255,255,0.44), rgba(255,255,255,0.08));
        filter: blur(0.3px);
        opacity: 0.74;
      }
      .ecosystem-links {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
      }
      .ecosystem-links svg {
        width: 100%;
        height: 100%;
      }
      .ecosystem-links .wire {
        fill: none;
        stroke: rgba(156, 189, 224, 0.3);
        stroke-width: 1.3;
        stroke-linecap: round;
        filter: blur(0.35px);
      }
      .ecosystem-links .pulse {
        fill: none;
        stroke: url(#ecosystemFlow);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-dasharray: 12 220;
        animation: ecosystem-flow 6.4s linear infinite;
        opacity: 0.44;
        filter: blur(0.18px) drop-shadow(0 0 4px rgba(37, 113, 214, 0.18));
      }
      .ecosystem-links .pulse:nth-of-type(even) {
        animation-duration: 6.6s;
        animation-direction: reverse;
        opacity: 0.56;
      }
      .ecosystem-links .core-link {
        stroke: rgba(156, 192, 228, 0.4);
        stroke-width: 1.5;
      }
      .ecosystem-links .core-pulse {
        stroke-dasharray: 1.6 14;
        stroke-width: 2.1;
        opacity: 0.68;
        animation: core-feed 5.2s linear infinite;
        filter: drop-shadow(0 0 6px rgba(56, 132, 224, 0.34)) drop-shadow(0 0 10px rgba(52, 199, 89, 0.2));
      }
      .ecosystem-links .core-link.is-focus {
        stroke: rgba(88, 151, 225, 0.9);
        stroke-width: 2.2;
        filter: blur(0.2px) drop-shadow(0 0 9px rgba(52, 124, 221, 0.4));
      }
      .ecosystem-links .core-pulse.is-focus {
        opacity: 1;
        stroke-width: 2.6;
        animation-duration: 2.6s;
      }

      .ecosystem-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
      }
      .ecosystem-module {
        position: relative;
        min-height: 206px;
        padding: 16px 16px 14px;
        border-radius: 22px;
        border: 1px solid rgba(211, 226, 243, 0.96);
        background: linear-gradient(166deg, rgba(255,255,255,0.95), rgba(247,252,255,0.92));
        box-shadow: 0 18px 34px rgba(14, 33, 59, 0.085), inset 0 1px 0 rgba(255,255,255,0.96), inset 0 -12px 22px rgba(19, 59, 112, 0.04);
        backdrop-filter: blur(10px) saturate(112%);
        transition: transform 280ms ease-out, box-shadow 280ms ease-out, border-color 280ms ease-out, filter 280ms ease-out;
        will-change: transform, box-shadow, border-color, filter;
      }
      .ecosystem-module::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(160deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 58%);
        opacity: 0.76;
      }
      .ecosystem-module::after {
        content: "";
        position: absolute;
        inset: 10px 8px auto;
        height: 16px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(255,255,255,0.72), rgba(255,255,255,0));
        opacity: 0.6;
        pointer-events: none;
      }
      .ecosystem-module:hover {
        transform: translateY(-8px) scale(1.016);
        border-color: rgba(198, 220, 244, 0.99);
        box-shadow: 0 34px 48px rgba(17, 43, 78, 0.16), 0 15px 28px rgba(17, 43, 78, 0.1), 0 0 24px rgba(35, 123, 230, 0.1), 0 0 30px rgba(52, 199, 89, 0.06), inset 0 1px 0 rgba(255,255,255,0.97);
        filter: saturate(1.04);
      }
      .ecosystem-module.is-focus {
        transform: translateY(-8px) scale(1.016);
        border-color: rgba(178, 211, 243, 0.99);
        box-shadow: 0 34px 48px rgba(17, 43, 78, 0.16), 0 0 0 1px rgba(182, 213, 241, 0.82), inset 0 1px 0 rgba(255,255,255,0.99);
      }
      .ecosystem-module:focus-visible {
        outline: 2px solid rgba(95, 149, 220, 0.8);
        outline-offset: 3px;
      }
      .module-top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
      }
      .module-icon {
        min-width: 36px;
        min-height: 36px;
        border-radius: 11px;
        border: 1px solid rgba(203, 221, 241, 0.95);
        background: linear-gradient(165deg, rgba(246, 251, 255, 0.95), rgba(237, 246, 255, 0.92));
        color: #2a5483;
        font-size: 0.56rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .module-live {
        min-height: 18px;
        padding: 0 7px;
        border-radius: 999px;
        border: 1px solid rgba(204, 220, 240, 0.95);
        background: rgba(250, 254, 255, 0.92);
        color: #3f628a;
        font-size: 0.46rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 4px;
      }
      .module-live::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #34c759;
        box-shadow: 0 0 0 0 rgba(52,199,89,0.35);
        animation: status-pulse 2.1s ease infinite;
      }
      .ecosystem-module h3 {
        position: relative;
        z-index: 1;
        margin: 11px 0 8px;
        color: #173a66;
        font-size: 0.99rem;
        line-height: 1.25;
        letter-spacing: -0.01em;
      }
      .ecosystem-module p {
        position: relative;
        z-index: 1;
        margin: 0;
        color: #4b6688;
        font-size: 0.84rem;
        line-height: 1.46;
      }

      .module-preview {
        position: relative;
        z-index: 1;
        margin-top: 12px;
        min-height: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        border-radius: 12px;
        border: 1px solid rgba(208, 223, 241, 0.95);
        background: linear-gradient(170deg, rgba(255,255,255,0.95), rgba(242,249,255,0.9));
        transition: max-height 360ms ease-out, opacity 280ms ease-out, transform 280ms ease-out, box-shadow 280ms ease-out;
        transform: translateY(6px);
      }
      .ecosystem-module:hover .module-preview {
        max-height: 108px;
        opacity: 1;
        transform: translateY(0);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 6px 12px rgba(16, 42, 76, 0.08);
      }
      .ecosystem-module.is-focus .module-preview,
      .ecosystem-module:focus-within .module-preview {
        max-height: 108px;
        opacity: 1;
        transform: translateY(0);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 6px 12px rgba(16, 42, 76, 0.08);
      }

      .ecosystem-module:hover .pv {
        animation: pv-shift 2.8s ease-in-out infinite alternate;
      }

      @keyframes pv-shift {
        from { filter: saturate(1) brightness(1); }
        to { filter: saturate(1.08) brightness(1.02); }
      }

      .pv {
        height: 104px;
        padding: 8px;
      }
      .pv-a { background: linear-gradient(160deg, rgba(246,251,255,0.95), rgba(236,247,255,0.9)); display: grid; gap: 6px; }
      .pv-a .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 0.39rem; font-weight: 700; color: #4f6f95; letter-spacing: 0.01em; }
      .pv-a .week span { text-align: center; padding-top: 2px; border-radius: 6px; background: rgba(22,100,245,0.08); }
      .pv-a .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
      .pv-a .month-grid span { height: 7px; border-radius: 4px; background: rgba(52,199,89,0.18); }
      .pv-a .month-grid span:nth-child(3n) { background: rgba(22,100,245,0.16); }
      .pv-a .caption { height: 10px; border-radius: 999px; background: rgba(26, 101, 201, 0.18); font-size: 0.39rem; color: rgba(40, 79, 123, 0.92); padding: 0 6px; display: inline-flex; align-items: center; }
      .pv-a .channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
      .pv-a .channels span { border-radius: 7px; background: linear-gradient(135deg, rgba(22,100,245,0.16), rgba(52,199,89,0.15)); color: #355a84; font-size: 0.38rem; font-weight: 700; display: grid; place-items: center; }
      .pv-a .approval { height: 9px; width: 72%; border-radius: 999px; background: rgba(52,199,89,0.22); font-size: 0.34rem; color: #3f648c; display: inline-flex; align-items: center; padding: 0 4px; }

      .pv-b { display: grid; grid-template-columns: 40px 1fr; gap: 7px; }
      .pv-b .sidebar { border-radius: 8px; background: linear-gradient(180deg, rgba(28,108,213,0.16), rgba(28,108,213,0.06)); padding: 5px; display: grid; align-content: start; gap: 4px; }
      .pv-b .sidebar span { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.72); }
      .pv-b .canvas { border-radius: 8px; border: 1px solid rgba(186, 211, 239, 0.72); background: rgba(255,255,255,0.68); padding: 5px; display: grid; gap: 4px; }
      .pv-b .view-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
      .pv-b .view-switch span { height: 7px; border-radius: 999px; background: rgba(22,100,245,0.16); font-size: 0.33rem; color: #3f638a; display: inline-flex; align-items: center; justify-content: center; }
      .pv-b .toolbar { height: 7px; border-radius: 999px; background: rgba(22,100,245,0.16); width: 60%; }
      .pv-b .block { border-radius: 6px; }
      .pv-b .block.hero { height: 24px; background: linear-gradient(180deg, rgba(22,100,245,0.16), rgba(22,100,245,0.06)); }
      .pv-b .block.text { height: 14px; background: rgba(52,199,89,0.15); }
      .pv-b .drop-zone { height: 8px; width: 70%; border-radius: 999px; background: rgba(52,199,89,0.2); font-size: 0.33rem; color: #3f638a; display: inline-flex; align-items: center; padding: 0 4px; }

      .pv-c { display: grid; gap: 5px; }
      .pv-c .lane-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-size: 0.42rem; color: #4b6d93; font-weight: 700; }
      .pv-c .lane-head span { text-align: center; background: rgba(22,100,245,0.08); border-radius: 6px; padding-top: 2px; }
      .pv-c .lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
      .pv-c .lane { border-radius: 7px; background: rgba(255,255,255,0.7); border: 1px solid rgba(194, 216, 240, 0.76); padding: 4px; display: grid; gap: 3px; }
      .pv-c .lane span { height: 8px; border-radius: 5px; background: linear-gradient(90deg, rgba(52,199,89,0.18), rgba(22,100,245,0.16)); font-size: 0.39rem; color: #3f6289; display: inline-flex; align-items: center; padding: 0 3px; }
      .pv-c .contact-timeline { height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(22,100,245,0.18), rgba(52,199,89,0.2)); font-size: 0.33rem; color: #3f648d; display: inline-flex; align-items: center; padding: 0 4px; }

      .pv-d { position: relative; border-radius: 9px; background: linear-gradient(165deg, rgba(255,255,255,0.72), rgba(236,247,255,0.78)); }
      .pv-d .node { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, rgba(22,100,245,0.72), rgba(52,199,89,0.7)); box-shadow: 0 0 0 2px rgba(255,255,255,0.85); }
      .pv-d .node::after { content: attr(data-l); position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 0.34rem; letter-spacing: 0.01em; color: #44688f; white-space: nowrap; }
      .pv-d .n1 { left: 8px; top: 12px; }
      .pv-d .n2 { left: 40px; top: 34px; }
      .pv-d .n3 { left: 74px; top: 16px; }
      .pv-d .n4 { left: 102px; top: 40px; }
      .pv-d .link { position: absolute; height: 2px; transform-origin: left center; background: linear-gradient(90deg, rgba(22,100,245,0.5), rgba(52,199,89,0.48)); }
      .pv-d .l1 { left: 18px; top: 18px; width: 30px; transform: rotate(28deg); }
      .pv-d .l2 { left: 50px; top: 38px; width: 34px; transform: rotate(-28deg); }
      .pv-d .l3 { left: 84px; top: 22px; width: 30px; transform: rotate(30deg); }
      .pv-d .sequence { position: absolute; left: 6px; right: 6px; bottom: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
      .pv-d .sequence span { height: 7px; border-radius: 5px; background: rgba(255,255,255,0.72); font-size: 0.32rem; color: #3f648c; display: inline-flex; align-items: center; justify-content: center; }

      .pv-e { display: grid; gap: 5px; }
      .pv-e .reviews { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
      .pv-e .review { border-radius: 7px; background: rgba(255,255,255,0.74); border: 1px solid rgba(194, 216, 240, 0.74); padding: 4px; display: grid; gap: 3px; }
      .pv-e .review span { height: 5px; border-radius: 999px; background: rgba(26,103,205,0.16); font-size: 0.36rem; color: #44688f; display: inline-flex; align-items: center; padding: 0 3px; }
      .pv-e .queue { border-radius: 7px; background: rgba(26,103,205,0.1); padding: 4px; display: grid; gap: 3px; }
      .pv-e .queue span { height: 7px; border-radius: 5px; background: linear-gradient(90deg, rgba(22,100,245,0.2), rgba(52,199,89,0.18)); font-size: 0.36rem; color: #3f628a; display: inline-flex; align-items: center; padding: 0 3px; }

      .pv-f { display: grid; gap: 5px; }
      .pv-f .map { height: 44px; border-radius: 8px; border: 1px solid rgba(188, 213, 240, 0.74); background:
        radial-gradient(circle at 28% 46%, rgba(22,100,245,0.2) 0 3px, rgba(22,100,245,0) 4px),
        radial-gradient(circle at 68% 62%, rgba(52,199,89,0.24) 0 3px, rgba(52,199,89,0) 4px),
        linear-gradient(120deg, rgba(255,255,255,0.82), rgba(238,247,255,0.88));
      }
      .pv-f .rankings { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
      .pv-f .rankings span { height: 9px; border-radius: 999px; background: rgba(22,100,245,0.18); font-size: 0.35rem; color: #3e638b; display: inline-flex; align-items: center; justify-content: center; }
      .pv-f .tasks { height: 9px; width: 72%; border-radius: 999px; background: rgba(52,199,89,0.22); font-size: 0.35rem; color: #3e638b; display: inline-flex; align-items: center; padding: 0 4px; }
      .pv-f .checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
      .pv-f .checklist span { height: 7px; border-radius: 5px; background: rgba(255,255,255,0.72); font-size: 0.32rem; color: #3f648b; display: inline-flex; align-items: center; justify-content: center; }

      .pv-g { display: grid; gap: 5px; }
      .pv-g .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
      .pv-g .kpis span { height: 14px; border-radius: 6px; background: rgba(22,100,245,0.14); font-size: 0.4rem; color: #41658d; display: inline-flex; align-items: center; justify-content: center; }
      .pv-g .line-chart { height: 18px; border-radius: 7px; background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.2)); position: relative; }
      .pv-g .line-chart::after { content: ""; position: absolute; left: 5px; right: 5px; top: 9px; height: 2px; background: linear-gradient(90deg, rgba(22,100,245,0.74), rgba(52,199,89,0.78)); box-shadow: 15px -4px 0 rgba(22,100,245,0.36), 30px 2px 0 rgba(52,199,89,0.34), 47px -3px 0 rgba(22,100,245,0.36); }
      .pv-g .bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-items: end; height: 22px; }
      .pv-g .bars span { border-radius: 5px 5px 3px 3px; background: rgba(52,199,89,0.22); }
      .pv-g .bars span:nth-child(1) { height: 8px; }
      .pv-g .bars span:nth-child(2) { height: 16px; }
      .pv-g .bars span:nth-child(3) { height: 12px; }
      .pv-g .bars span:nth-child(4) { height: 19px; }

      .pv-h { display: grid; grid-template-columns: 1fr 50px; gap: 6px; }
      .pv-h .sheet { border-radius: 8px; border: 1px solid rgba(186, 211, 239, 0.74); background: rgba(255,255,255,0.78); padding: 5px; display: grid; gap: 4px; }
      .pv-h .sheet span { height: 5px; border-radius: 999px; background: rgba(26,103,205,0.16); font-size: 0.35rem; color: #43688f; display: inline-flex; align-items: center; padding: 0 3px; }
      .pv-h .approval { border-radius: 8px; background: rgba(52,199,89,0.12); padding: 5px; display: grid; gap: 4px; }
      .pv-h .approval span { height: 8px; border-radius: 6px; background: linear-gradient(90deg, rgba(52,199,89,0.24), rgba(22,100,245,0.22)); font-size: 0.35rem; color: #3f6287; display: inline-flex; align-items: center; justify-content: center; }
      .pv-h .flow { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(22,100,245,0.2), rgba(52,199,89,0.2)); }

      .pv-i { display: grid; gap: 5px; }
      .pv-i .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 0.4rem; color: #4a6c92; font-weight: 700; }
      .pv-i .days span { text-align: center; border-radius: 6px; background: rgba(22,100,245,0.08); padding-top: 2px; }
      .pv-i .slots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
      .pv-i .slots span { height: 14px; border-radius: 5px; background: rgba(52,199,89,0.18); font-size: 0.34rem; color: #42688f; display: inline-flex; align-items: center; justify-content: center; }
      .pv-i .slots.alt span:nth-child(odd) { background: rgba(22,100,245,0.16); }

      .pv-j { display: grid; gap: 5px; }
      .pv-j .subject { height: 10px; border-radius: 999px; width: 72%; background: rgba(22,100,245,0.2); }
      .pv-j .segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
      .pv-j .segments span { height: 11px; border-radius: 6px; background: rgba(52,199,89,0.16); font-size: 0.34rem; color: #41658c; display: inline-flex; align-items: center; justify-content: center; }
      .pv-j .editor { height: 28px; border-radius: 8px; background: rgba(26,103,205,0.12); font-size: 0.4rem; color: #3f638a; display: inline-flex; align-items: center; padding: 0 5px; }
      .pv-j .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
      .pv-j .actions span { height: 9px; border-radius: 999px; background: linear-gradient(90deg, rgba(22,100,245,0.2), rgba(52,199,89,0.2)); font-size: 0.34rem; color: #3f638a; display: inline-flex; align-items: center; justify-content: center; }

      .pv-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
      .pv-k .asset { height: 28px; border-radius: 7px; background: linear-gradient(160deg, rgba(22,100,245,0.16), rgba(52,199,89,0.14)); font-size: 0.35rem; color: #3f648c; display: inline-flex; align-items: center; justify-content: center; }
      .pv-k .workspace { grid-column: 1 / -1; height: 20px; border-radius: 8px; background: rgba(255,255,255,0.75); border: 1px solid rgba(186, 211, 239, 0.74); font-size: 0.38rem; color: #3f658d; display: inline-flex; align-items: center; padding: 0 5px; }
      .pv-k .prompt { grid-column: 1 / -1; height: 9px; width: 68%; border-radius: 999px; background: rgba(22,100,245,0.2); font-size: 0.33rem; color: #3f648d; display: inline-flex; align-items: center; padding: 0 4px; }

      .pv-l { display: grid; gap: 5px; }
      .pv-l .preview { height: 36px; border-radius: 8px; background: linear-gradient(120deg, rgba(22,100,245,0.18), rgba(52,199,89,0.18)); font-size: 0.4rem; color: #3f638a; display: inline-flex; align-items: center; padding: 0 5px; }
      .pv-l .timeline { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
      .pv-l .timeline span { height: 10px; border-radius: 6px; background: rgba(26,103,205,0.16); font-size: 0.33rem; color: #3f638a; display: inline-flex; align-items: center; justify-content: center; }
      .pv-l .tracks { height: 10px; border-radius: 999px; width: 74%; background: rgba(52,199,89,0.22); font-size: 0.33rem; color: #3f638a; display: inline-flex; align-items: center; padding: 0 4px; }
      .pv-l .storyboard { height: 8px; width: 66%; border-radius: 999px; background: rgba(22,100,245,0.2); font-size: 0.32rem; color: #3f648c; display: inline-flex; align-items: center; padding: 0 4px; }

      .ecosystem-core {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 192px;
        height: 192px;
        border-radius: 50%;
        border: 1px solid rgba(193, 215, 239, 0.98);
        background:
          radial-gradient(circle at 20% 20%, rgba(255,255,255,0.97), rgba(255,255,255,0.44) 30%, rgba(255,255,255,0) 66%),
          radial-gradient(circle at 34% 72%, rgba(22,100,245,0.34), rgba(22,100,245,0.03) 46%, rgba(22,100,245,0) 66%),
          radial-gradient(circle at 76% 34%, rgba(52,199,89,0.34), rgba(52,199,89,0.02) 46%, rgba(52,199,89,0) 66%),
          linear-gradient(152deg, rgba(255,255,255,0.92), rgba(241,248,255,0.92));
        box-shadow: 0 34px 60px rgba(17, 43, 78, 0.17), 0 0 36px rgba(42, 121, 226, 0.16), 0 0 42px rgba(52, 199, 89, 0.08), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -20px 28px rgba(17, 52, 101, 0.08), inset 0 0 26px rgba(90, 154, 226, 0.12);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        color: #1d4572;
        font-size: 1.3rem;
        font-weight: 800;
        letter-spacing: -0.015em;
        z-index: 3;
        pointer-events: none;
        animation: ai-core-breathe 5.8s ease-in-out infinite, ai-core-float 10.5s ease-in-out infinite;
        overflow: hidden;
        will-change: transform, box-shadow, filter;
      }
      .ecosystem-core .core-volume {
        position: absolute;
        inset: -40px;
        border-radius: 50%;
        pointer-events: none;
        background:
          radial-gradient(circle at 50% 50%, rgba(92, 164, 235, 0.26), rgba(92, 164, 235, 0.08) 38%, rgba(92, 164, 235, 0) 66%),
          radial-gradient(circle at 50% 50%, rgba(52, 199, 89, 0.18), rgba(52, 199, 89, 0.06) 34%, rgba(52, 199, 89, 0) 64%);
        filter: blur(16px);
        opacity: 0.72;
        animation: core-volume-breathe 5.8s ease-in-out infinite;
      }
      .ecosystem-core .core-rays {
        position: absolute;
        inset: -80px;
        border-radius: 50%;
        pointer-events: none;
        background: conic-gradient(from 0deg,
          rgba(93, 162, 232, 0) 0deg,
          rgba(93, 162, 232, 0.14) 28deg,
          rgba(93, 162, 232, 0) 58deg,
          rgba(76, 175, 156, 0.13) 95deg,
          rgba(76, 175, 156, 0) 128deg,
          rgba(93, 162, 232, 0.12) 168deg,
          rgba(93, 162, 232, 0) 206deg,
          rgba(76, 175, 156, 0.12) 246deg,
          rgba(76, 175, 156, 0) 284deg,
          rgba(93, 162, 232, 0.1) 324deg,
          rgba(93, 162, 232, 0) 360deg);
        filter: blur(10px);
        opacity: 0.38;
        animation: core-rays-rotate 18s linear infinite;
      }
      .ecosystem-core.is-engaged {
        box-shadow: 0 36px 64px rgba(17, 43, 78, 0.18), 0 0 42px rgba(42, 121, 226, 0.22), 0 0 46px rgba(52, 199, 89, 0.14), inset 0 1px 0 rgba(255,255,255,0.98), inset 0 -20px 28px rgba(17, 52, 101, 0.08), inset 0 0 28px rgba(90, 154, 226, 0.18);
        animation: ai-core-breathe 5.8s ease-in-out infinite, ai-core-float 10.5s ease-in-out infinite, core-engaged-pulse 1.7s ease-in-out infinite;
      }
      .ecosystem-core::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        pointer-events: none;
        background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0.62) 52deg, rgba(255,255,255,0.06) 102deg, rgba(255,255,255,0) 178deg, rgba(255,255,255,0.38) 238deg, rgba(255,255,255,0) 360deg);
        mix-blend-mode: screen;
        animation: core-reflect 10.2s linear infinite;
      }
      .ecosystem-core::after {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0), rgba(255,255,255,0) 42%, rgba(22,100,245,0.12) 64%, rgba(52,199,89,0.1) 78%, rgba(255,255,255,0) 100%);
        filter: blur(1px);
      }
      .ecosystem-core .label {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
      .core-orbit {
        position: absolute;
        inset: -18px;
        pointer-events: none;
      }
      .core-orbit span {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 0 10px rgba(39, 116, 214, 0.35);
        animation: core-orbit 8.4s linear infinite;
      }
      .core-orbit span:nth-child(1) { top: 8%; left: 44%; animation-delay: 0s; }
      .core-orbit span:nth-child(2) { top: 36%; right: 2%; animation-delay: -2.1s; }
      .core-orbit span:nth-child(3) { bottom: 6%; left: 48%; animation-delay: -4.2s; }
      .core-orbit span:nth-child(4) { top: 40%; left: 2%; animation-delay: -6.2s; }
      .core-orbit span:nth-child(5) { top: 18%; right: 18%; animation-delay: -1.2s; }
      .core-orbit span:nth-child(6) { bottom: 18%; left: 18%; animation-delay: -5.1s; }
      @keyframes core-orbit {
        0% { transform: rotate(0deg) translateX(0) scale(0.8); opacity: 0.6; }
        50% { transform: rotate(180deg) translateX(4px) scale(1.08); opacity: 1; }
        100% { transform: rotate(360deg) translateX(0) scale(0.8); opacity: 0.6; }
      }
      @keyframes core-reflect {
        from { transform: rotate(0deg); opacity: 0.86; }
        to { transform: rotate(360deg); opacity: 0.86; }
      }

      @keyframes eco-data-flow {
        from { stroke-dashoffset: 260; }
        to { stroke-dashoffset: 0; }
      }
      @keyframes eco-pulse-flow {
        from { stroke-dashoffset: 220; opacity: 0.3; }
        50% { opacity: 0.66; }
        to { stroke-dashoffset: 0; opacity: 0.3; }
      }
      @keyframes core-highlight-rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      @keyframes core-breathe-subtle {
        0% { transform: translate3d(-50%, -50%, 0) scale(0.99); }
        50% { transform: translate3d(-50%, -50%, 0) scale(1.02); }
        100% { transform: translate3d(-50%, -50%, 0) scale(0.99); }
      }
      @keyframes core-scatter-breathe {
        0% { opacity: 0.68; transform: scale(0.96); }
        50% { opacity: 0.9; transform: scale(1.04); }
        100% { opacity: 0.68; transform: scale(0.96); }
      }
      @keyframes core-hover-pulse {
        0% { filter: saturate(1) brightness(1); }
        50% { filter: saturate(1.08) brightness(1.05); }
        100% { filter: saturate(1) brightness(1); }
      }

      @keyframes ecosystem-flow {
        from { stroke-dashoffset: 260; }
        to { stroke-dashoffset: 0; }
      }
      @keyframes core-feed {
        from { stroke-dashoffset: 220; }
        to { stroke-dashoffset: 0; }
      }
      @keyframes ai-core-breathe {
        0% { transform: translate(-50%, -50%) scale(0.985); }
        50% { transform: translate(-50%, -50%) scale(1.03); }
        100% { transform: translate(-50%, -50%) scale(0.985); }
      }
      @keyframes ai-core-float {
        0% { margin-top: -2px; }
        50% { margin-top: -8px; }
        100% { margin-top: -2px; }
      }
      @keyframes core-volume-breathe {
        0% { opacity: 0.62; transform: scale(0.96); }
        50% { opacity: 0.82; transform: scale(1.03); }
        100% { opacity: 0.62; transform: scale(0.96); }
      }
      @keyframes core-rays-rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      @keyframes core-engaged-pulse {
        0% { filter: saturate(1) brightness(1); }
        50% { filter: saturate(1.06) brightness(1.03); }
        100% { filter: saturate(1) brightness(1); }
      }

      @media (max-width: 1200px) {
        .ecosystem-section {
          padding: 42px 24px 34px;
        }
        .ecosystem-shell {
          gap: 14px;
        }
      }

      @media (max-width: 1120px) {
        .ecosystem-shell {
          grid-template-columns: minmax(0, 1fr);
        }
      }

      @media (max-width: 760px) {
        .ecosystem-section {
          padding: 30px 16px 24px;
          border-radius: 24px;
        }
        .ecosystem-title {
          font-size: clamp(1.7rem, 8vw, 2.26rem);
        }
        .ecosystem-sub {
          font-size: 0.94rem;
        }
        .eco-category {
          padding: 14px;
        }
        .eco-tools {
          grid-template-columns: 1fr;
          gap: 12px;
        }
        .eco-tools--three {
          grid-template-columns: 1fr;
        }
        .eco-tool {
          padding: 9px;
        }
        .ecosystem-neural-layer {
          opacity: 0.42;
        }
        .ecosystem-shell {
          grid-template-columns: 1fr;
          gap: 14px;
          margin-top: 24px;
        }
        .twist-ai-cta {
          min-height: 44px;
          font-size: 0.7rem;
        }
      }
      .section-dark {
        background: linear-gradient(135deg, #071a35 0%, #0d2f5d 100%);
        color: white;
        border-color: rgba(255,255,255,0.08);
      }
      .section-dark p.lead { color: rgba(255,255,255,0.75); }
      .section-dark h2 { color: white; }

      .feature-grid, .service-grid, .testimonial-grid, .project-grid, .partner-grid { display: grid; gap: 16px; }
      .feature-grid { grid-template-columns: repeat(4, 1fr); }
      .service-grid { grid-template-columns: repeat(4, 1fr); }
      .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
      .project-grid { grid-template-columns: repeat(3, 1fr); }
      .partner-grid { grid-template-columns: repeat(5, 1fr); }

      .feature-card, .service-card, .testimonial-card, .project-card {
        padding: 22px;
        border-radius: 24px;
        background: linear-gradient(175deg, #ffffff 0%, #f9fcff 100%);
        border: 1px solid rgba(224, 234, 246, 0.96);
        box-shadow: var(--elev-1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease, border-color var(--motion-base) ease;
        backdrop-filter: blur(8px);
      }
      .section-dark .feature-card, .section-dark .service-card {
        background: rgba(255,255,255,0.95);
        color: var(--text);
      }
      .feature-card:hover, .service-card:hover, .testimonial-card:hover, .project-card:hover {
        transform: translateY(-6px);
        border-color: rgba(202, 221, 243, 0.98);
        box-shadow: var(--elev-3), 0 0 0 1px rgba(181, 210, 241, 0.7), 0 0 24px rgba(35, 123, 230, 0.09), 0 0 30px rgba(52, 199, 89, 0.06);
      }
      .service-card-link {
        position: relative;
        display: block;
        color: inherit;
        overflow: hidden;
      }
      .service-card-link::before {
        content: "";
        position: absolute;
        inset: -30% -40% auto auto;
        width: 58%;
        height: 180%;
        transform: rotate(18deg) translateX(130%);
        background: linear-gradient(110deg, rgba(255,255,255,0), rgba(255,255,255,0.56), rgba(255,255,255,0));
        transition: transform 620ms ease;
        pointer-events: none;
      }
      .service-card-link::after {
        content: "View Service";
        position: absolute;
        right: 16px;
        bottom: 14px;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        color: #1f4f83;
        opacity: 0.85;
      }
      .service-card-link:hover,
      .service-card-link:focus-visible {
        transform: translateY(-8px) scale(1.01);
        border-color: rgba(179, 207, 236, 0.98);
        box-shadow: 0 28px 52px rgba(15,35,64,0.16), 0 0 0 1px rgba(181,210,241,0.82), 0 0 28px rgba(35,123,230,0.14), 0 0 34px rgba(52,199,89,0.1);
      }
      .service-card-link:hover::before,
      .service-card-link:focus-visible::before {
        transform: rotate(18deg) translateX(-22%);
      }
      .service-card-link h3,
      .service-card-link p,
      .service-card-link .icon {
        position: relative;
        z-index: 1;
      }
      .icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: grid;
        place-items: center;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        border: 1px solid rgba(203, 221, 241, 0.95);
        background: linear-gradient(160deg, rgba(246,251,255,0.94), rgba(236,246,255,0.9));
        color: #234f82;
        margin-bottom: 10px;
        box-shadow: 0 8px 16px rgba(15, 41, 75, 0.08), inset 0 1px 0 rgba(255,255,255,0.92);
      }
      .feature-card h3, .service-card h3 {
        margin: 10px 0 10px;
        font-size: 1.06rem;
        line-height: 1.3;
        letter-spacing: -0.01em;
      }
      .feature-card p, .service-card p, .testimonial-card p, .project-card p {
        margin: 0;
        color: var(--muted);
        font-size: 0.96rem;
        line-height: 1.62;
      }
      .testimonial-card strong { display: block; margin-top: 12px; color: var(--text); }

      .project-card {
        min-height: 220px;
        position: relative;
        overflow: hidden;
        color: white;
        border-radius: 24px;
      }
      .project-card::before {
        content: "";
        position: absolute; inset: 0;
        background: linear-gradient(135deg, rgba(0,59,155,0.9), rgba(52,199,89,0.75));
        opacity: 0.9;
        z-index: 0;
      }
      .project-card > * { position: relative; z-index: 1; }
      .project-card .project-tag { display: inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.2); font-size: 0.8rem; font-weight: 700; margin-bottom: 10px; }
      .project-card h3 { margin: 0 0 8px; font-size: 1.08rem; color: white; }
      .project-card p { color: rgba(255,255,255,0.9); }

      .partner-pill {
        display: flex; align-items: center; justify-content: center;
        padding: 16px 14px; border-radius: 999px; background: rgba(255,255,255,0.86); border: 1px solid var(--border); color: var(--navy); font-weight: 700; box-shadow: 0 10px 24px rgba(15,35,64,0.04);
        transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease, border-color var(--motion-base) ease;
      }
      .partner-pill:hover {
        transform: translateY(-2px);
        border-color: rgba(190, 213, 238, 0.96);
        box-shadow: 0 14px 24px rgba(15,35,64,0.09);
      }

      .contact-card { display: grid; grid-template-columns: 1fr 0.95fr; gap: 24px; align-items: start; }
      .contact-list { display: grid; gap: 10px; margin-top: 14px; }
      .contact-item { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); }
      .contact-item strong { color: var(--text); }
      .follow-twist {
        margin-top: 16px;
      }
      .follow-twist h4 {
        margin: 0 0 10px;
        font-size: 0.95rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #1c446f;
      }
      .contact-panel { background: linear-gradient(135deg, var(--navy), #0054c9); color: white; padding: 24px; border-radius: 22px; }
      .contact-panel form { display: grid; gap: 10px; margin-top: 10px; }
      .contact-panel input, .contact-panel textarea { border: none; border-radius: 12px; padding: 11px 12px; background: rgba(255,255,255,0.96); color: var(--text); }
      .contact-panel textarea { min-height: 92px; resize: vertical; }
      .contact-panel .btn-secondary { background: white; color: var(--navy); margin-top: 6px; }

      .cta {
        margin-top: 32px;
        padding: 40px;
        border-radius: 30px;
        background: linear-gradient(135deg, rgba(0,59,155,0.96), rgba(52,199,89,0.90));
        color: white; text-align: center; box-shadow: 0 24px 70px rgba(0,59,155,0.18);
      }
      .cta h2 { margin: 0 0 12px; font-size: clamp(1.8rem,3.2vw,2.4rem); }
      .cta p { margin: 0 auto 18px; color: rgba(255,255,255,0.92); max-width: 660px; }

      .footer { padding: 18px 4px 0; color: var(--muted); font-size: 0.95rem; text-align: center; }
      .social-links {
        margin-top: 10px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      .social-links h4 {
        margin: 0;
        font-size: 0.95rem;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #1c446f;
      }
      .social-icon-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
      }
      .social-icon-link {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(196, 217, 240, 0.95);
        background: linear-gradient(155deg, #ffffff 0%, #f1f8ff 100%);
        box-shadow: 0 10px 20px rgba(15, 35, 64, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
        color: #1d4b7a;
        transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease, background var(--motion-fast) ease;
      }
      .social-icon-link svg {
        width: 19px;
        height: 19px;
        fill: currentColor;
      }
      .social-icon-link:hover {
        transform: translateY(-3px) scale(1.03);
        background: linear-gradient(150deg, #ffffff 0%, #f3f8ff 100%);
      }
      .social-icon-link[data-platform="instagram"]:hover {
        color: #e4405f;
        border-color: rgba(228, 64, 95, 0.45);
        box-shadow: 0 16px 28px rgba(15, 35, 64, 0.14), 0 0 20px rgba(228, 64, 95, 0.24);
      }
      .social-icon-link[data-platform="tiktok"]:hover {
        color: #111111;
        border-color: rgba(17, 17, 17, 0.45);
        box-shadow: 0 16px 28px rgba(15, 35, 64, 0.14), 0 0 20px rgba(0, 242, 234, 0.2);
      }
      .social-icon-link[data-platform="facebook"]:hover {
        color: #1877f2;
        border-color: rgba(24, 119, 242, 0.45);
        box-shadow: 0 16px 28px rgba(15, 35, 64, 0.14), 0 0 20px rgba(24, 119, 242, 0.24);
      }

      .chatbot-launcher {
        position: fixed;
        right: 20px;
        bottom: 18px;
        top: auto;
        transform: none;
        z-index: 2200;
        min-width: 200px;
        height: 56px;
        padding: 0 16px;
        border-radius: 16px;
        border: 1px solid rgba(184, 220, 246, 0.95);
        background: linear-gradient(132deg, #0d55ca 0%, #1878ef 45%, #28b4de 72%, #34c759 100%);
        color: #f7fcff;
        box-shadow:
          0 18px 40px rgba(10, 42, 84, 0.26),
          0 0 28px rgba(22, 100, 245, 0.36),
          0 0 38px rgba(52, 199, 89, 0.22),
          inset 0 1px 0 rgba(255,255,255,0.22);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease, filter var(--motion-fast) ease;
        animation: launcher-drift 3.6s ease-in-out infinite;
      }
      .chatbot-launcher::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 18px;
        background: radial-gradient(circle, rgba(88, 178, 255, 0.3) 0%, rgba(88, 178, 255, 0.06) 44%, rgba(88, 178, 255, 0) 74%);
        z-index: -1;
      }
      .chatbot-launcher:hover {
        transform: translateY(-2px) scale(1.02);
        border-color: rgba(163, 208, 240, 0.98);
        box-shadow:
          0 24px 50px rgba(10, 42, 84, 0.32),
          0 0 38px rgba(22, 100, 245, 0.44),
          0 0 58px rgba(52, 199, 89, 0.28),
          inset 0 1px 0 rgba(255,255,255,0.28);
        filter: saturate(1.06);
      }
      .chatbot-launcher-brand {
        font-size: 0.8rem;
        font-weight: 900;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        line-height: 1;
        text-shadow: 0 1px 10px rgba(5, 29, 65, 0.34);
      }
      .chatbot-launcher-sub {
        font-size: 0.56rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0.92;
        text-shadow: 0 1px 8px rgba(5, 29, 65, 0.3);
      }
      .chatbot-placeholder {
        position: fixed;
        right: 20px;
        top: 96px;
        bottom: 20px;
        width: min(420px, calc(100vw - 28px));
        background: linear-gradient(154deg, rgba(255,255,255,0.9), rgba(243,249,255,0.86));
        border: 1px solid rgba(206, 224, 243, 0.95);
        border-radius: 24px;
        box-shadow: 0 30px 60px rgba(10, 30, 58, 0.24), inset 0 1px 0 rgba(255,255,255,0.92);
        padding: 16px;
        z-index: 2150;
        overflow: hidden;
        display: grid;
        grid-template-rows: auto 1fr;
        transition: transform 280ms ease, opacity 280ms ease, visibility 280ms ease;
      }
      .chatbot-placeholder.is-closed {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(26px);
      }
      .chatbot-placeholder .chatbot-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
      }
      .chatbot-placeholder h4 { margin: 0 0 4px; font-size: 1rem; }
      .chatbot-placeholder p { margin: 0; color: var(--muted); font-size: 0.92rem; }
      .chatbot-controls { display: inline-flex; gap: 6px; }
      .chatbot-placeholder .chatbot-control {
        border: none;
        background: rgba(0,59,155,0.08);
        color: var(--navy);
        width: 32px;
        height: 32px;
        border-radius: 999px;
        cursor: pointer;
        font-weight: 800;
      }
      .chatbot-placeholder .chatbot-body {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto auto;
        gap: 12px;
        margin-top: 10px;
        min-height: 0;
      }
      .chatbot-placeholder.is-minimized .chatbot-body { display: none; }
      .chat-options {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .chat-option {
        min-height: 42px;
        border-radius: 12px;
        border: 1px solid rgba(212, 227, 245, 0.95);
        background: linear-gradient(180deg, #ffffff, #f7fbff);
        color: #12355f;
        font-weight: 700;
        text-align: left;
        padding: 0 12px;
        cursor: pointer;
        transition: transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, border-color var(--motion-fast) ease;
      }
      .chat-option:hover {
        transform: translateY(-1px);
        border-color: rgba(178, 204, 233, 0.95);
        box-shadow: 0 10px 20px rgba(15,35,64,0.08);
      }
      .chat-actions {
        display: flex;
        gap: 8px;
      }
      .chat-action {
        min-height: 38px;
        padding: 0 14px;
        border: 1px solid rgba(212, 227, 245, 0.95);
        border-radius: 999px;
        background: #ffffff;
        color: #12355f;
        font-weight: 700;
        cursor: pointer;
      }
      .chat-response {
        margin: 0;
        color: #31506f;
        font-size: 0.88rem;
        line-height: 1.52;
        background: #f4f8ff;
        border: 1px solid rgba(220, 232, 247, 0.95);
        border-radius: 12px;
        padding: 10px 12px;
        min-height: 70px;
      }
      .chat-conversation {
        margin: 0;
        padding: 10px;
        min-height: 180px;
        overflow-y: auto;
        border-radius: 12px;
        background: #f4f8ff;
        border: 1px solid rgba(220, 232, 247, 0.95);
        display: grid;
        gap: 8px;
      }
      .chat-input-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
      }
      .chat-input-row input {
        min-height: 42px;
        border-radius: 12px;
        border: 1px solid rgba(204, 223, 242, 0.95);
        background: rgba(255,255,255,0.92);
        color: #12355f;
        padding: 0 12px;
      }
      .chat-send {
        min-height: 42px;
        padding: 0 14px;
        border-radius: 12px;
        border: 1px solid rgba(194, 214, 237, 0.95);
        background: var(--twist-premium-gradient);
        color: #ffffff;
        font-weight: 800;
        cursor: pointer;
      }
      .chat-msg {
        font-size: 0.86rem;
        line-height: 1.45;
        padding: 8px 10px;
        border-radius: 10px;
        white-space: pre-line;
      }
      .chat-msg.user {
        background: #dbeafe;
        color: #12355f;
        justify-self: end;
        max-width: 92%;
      }
      .chat-msg.assistant {
        background: #ffffff;
        color: #2a4c6d;
        justify-self: start;
        border: 1px solid rgba(214, 227, 242, 0.95);
        max-width: 96%;
      }
      .chat-typing {
        margin: 0;
        color: #5a7494;
        font-size: 0.82rem;
        font-weight: 600;
      }
      .chat-help {
        margin: 0;
        color: #577191;
        font-size: 0.8rem;
      }

      .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.56s cubic-bezier(.2,.8,.2,1), transform 0.56s cubic-bezier(.2,.8,.2,1); }
      .reveal.visible { opacity: 1; transform: translateY(0); }

      .module-card,
      .eco-category,
      .eco-tool,
      .process-step,
      .process-principle,
      .partner-pill,
      .chatbot-placeholder,
      .lead-form,
      .contact-panel,
      .section,
      .cta {
        transition: transform var(--motion-base) ease, box-shadow var(--motion-base) ease, border-color var(--motion-base) ease, filter var(--motion-base) ease;
      }

      a:focus-visible,
      button:focus-visible,
      [role="button"]:focus-visible,
      .btn:focus-visible,
      .nav-links a:focus-visible,
      .nav-cta:focus-visible,
      .product-action:focus-visible,
      .ai-btn:focus-visible,
      .social-links a:focus-visible,
      .chatbot-placeholder .chatbot-control:focus-visible,
      .partner-pill:focus-visible,
      .module-card:focus-visible,
      .eco-tool:focus-visible {
        outline: 3px solid rgba(52, 199, 89, 0.45);
        outline-offset: 2px;
        box-shadow: var(--focus-ring);
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 1ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 1ms !important;
          scroll-behavior: auto !important;
        }
      }

      @keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(10px, 16px, 0) scale(1.06); } }
      @keyframes ambient-drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(10px,-8px,0); } }
      @keyframes flow-float-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(8px, -10px, 0); } }
      @keyframes flow-float-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-7px, 9px, 0); } }
      @keyframes launcher-drift {
        0% { transform: translateY(0) translateX(0); }
        50% { transform: translateY(-2px) translateX(-1px); }
        100% { transform: translateY(0) translateX(0); }
      }
      @keyframes bridge-particle-flow {
        0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity: 0.36; }
        50% { background-position: 18px 0, 26px 0, 34px 0, 42px 0, 50px 0, 0 0; opacity: 0.5; }
        100% { background-position: 64px 0, 88px 0, 118px 0, 148px 0, 176px 0, 0 0; opacity: 0.36; }
      }
      @keyframes bridge-net-breathe {
        0% { opacity: 0.24; filter: blur(0.3px); }
        50% { opacity: 0.4; filter: blur(0.38px); }
        100% { opacity: 0.24; filter: blur(0.3px); }
      }
      @keyframes wave-shift-a { from { transform: rotate(-7deg) translate3d(0,0,0); } to { transform: rotate(-5deg) translate3d(8px,-5px,0); } }
      @keyframes wave-shift-b { from { transform: rotate(4deg) translate3d(0,0,0); } to { transform: rotate(2deg) translate3d(-7px,6px,0); } }
      @keyframes particle-float {
        0% { transform: translate3d(0,0,0); opacity: 0.45; }
        50% { transform: translate3d(0,-4px,0); opacity: 0.95; }
        100% { transform: translate3d(0,0,0); opacity: 0.55; }
      }
      @keyframes chart-draw { to { stroke-dashoffset: 0; } }
      @keyframes status-pulse {
        0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45); }
        70% { box-shadow: 0 0 0 8px rgba(52, 199, 89, 0); }
        100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
      }
      @keyframes ai-progress {
        from { transform: translateX(-6%); }
        to { transform: translateX(12%); }
      }
      @keyframes hologram-pulse {
        0% { transform: scale(0.98); opacity: 0.52; }
        50% { transform: scale(1.02); opacity: 0.78; }
        100% { transform: scale(0.98); opacity: 0.52; }
      }
      @keyframes flow-lines {
        from { stroke-dashoffset: 0; }
        to { stroke-dashoffset: -24; }
      }
      @keyframes ray-sway {
        0% { transform: translate3d(0,0,0) rotate(-8deg); opacity: 0.32; }
        50% { transform: translate3d(5px, -4px, 0) rotate(-3deg); opacity: 0.58; }
        100% { transform: translate3d(0,0,0) rotate(-8deg); opacity: 0.32; }
      }
      @keyframes stream-flow {
        from { transform: translateX(-28%); }
        to { transform: translateX(28%); }
      }
      @keyframes line-live-glow {
        0% { opacity: 0.88; filter: drop-shadow(0 0 0 rgba(20, 95, 188, 0)); }
        50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(20, 95, 188, 0.22)); }
        100% { opacity: 0.88; filter: drop-shadow(0 0 0 rgba(20, 95, 188, 0)); }
      }
      @keyframes ambient-breathe {
        0% { opacity: 0.58; transform: scale(0.995); }
        50% { opacity: 0.78; transform: scale(1.006); }
        100% { opacity: 0.58; transform: scale(0.995); }
      }
      @keyframes progress-breathe {
        0% { transform: scaleX(0.97); }
        50% { transform: scaleX(1); }
        100% { transform: scaleX(0.97); }
      }
      @keyframes gradient-glide {
        0% { background-position: 20% 50%; }
        50% { background-position: 78% 50%; }
        100% { background-position: 20% 50%; }
      }
      @keyframes sheen-sweep {
        0%, 62%, 100% { transform: translateX(0); opacity: 0.92; }
        72% { transform: translateX(-8%); opacity: 1; }
      }
      @keyframes nav-sheen-sweep {
        0%, 60%, 100% { transform: translateX(0); opacity: 0.9; }
        70% { transform: translateX(-10%); opacity: 1; }
      }
      @keyframes float-panel-a {
        0% { transform: translateY(-2px); }
        50% { transform: translateY(-5px); }
        100% { transform: translateY(-2px); }
      }
      @keyframes float-panel-b {
        0% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
        100% { transform: translateY(0); }
      }
      @keyframes counter-breathe {
        0% { opacity: 0.9; }
        50% { opacity: 1; }
        100% { opacity: 0.9; }
      }

      @media (max-width: 1120px) {
        .nav-stack {
          width: calc(100% - 24px);
          top: 9px;
        }
        .nav {
          min-height: 66px;
          padding: 0 20px;
          gap: 16px;
        }
        .brand {
          height: 150px;
        }
        .brand img { width: 295px; }
        .nav-main { gap: 14px; }
        .nav-links { font-size: 0.86rem; gap: 8px; }
        .nav-links a { padding: 8px 6px; }
        .nav-cta { height: 46px; padding: 0 16px; font-size: 0.75rem; }
        .hero, .contact-card { grid-template-columns: 1fr; }
        .hero {
          min-height: auto;
          gap: 22px;
        }
        .hero::before,
        .hero::after {
          content: none;
          animation: none;
          opacity: 0;
        }
        .hero-shell {
          margin-top: 160px;
          padding: 76px 20px 20px;
          min-height: calc(100vh + 24px);
        }
        .hero-copy {
          transform: none;
          padding: 22px;
          max-width: 100%;
        }
        h1 { font-size: clamp(3.34rem, 8vw, 5.2rem); margin: 10px 0 18px; }
        .hero p { font-size: 1.08rem; margin: 0 0 24px; }
        .hero-actions { margin-bottom: 8px; }
        .hero-note { margin: 10px 2px 22px; }
        .hero-actions .btn {
          min-height: 54px;
          padding: 14px 22px;
          font-size: 0.93rem;
        }
        .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
        .hero-card { margin-left: 0; }
        .product-grid {
          grid-template-columns: minmax(0, 1fr);
          grid-template-areas:
            "workflow"
            "status"
            "pipeline"
            "journey"
            "insights";
        }
        .kpi-strip,
        .forecast-row,
        .insight-list {
          grid-template-columns: 1fr;
        }
        .twist-ai-panel {
          position: static;
          width: 100%;
          margin-top: 10px;
        }
        .product-connectors { display: none; }
        .light-rays { display: none; }
        .status-head-metrics,
        .pipeline-density,
        .journey-heatmap,
        .product-shell .telemetry-ribbon,
        .product-shell .micro-alert-feed,
        .executive-ai-monitor,
        .floating-reco-window,
        .ai-insights-panel,
        .system-ticker,
        .workflow-meta-panel,
        .workflow-mini-labs,
        .pipeline-funnel-panel,
        .pipeline-campaign-strip,
        .journey-predict-panel,
        .insights-health-strip,
        .insights-attribution-row,
        .insight-trend-stack,
        .status-chip-row,
        .status-donut-panel { display: none; }
        .feature-grid { grid-template-columns: repeat(2, 1fr); }
        .service-grid, .testimonial-grid, .project-grid { grid-template-columns: repeat(2, 1fr); }
        .partner-grid { grid-template-columns: repeat(3, 1fr); }
      }

      @media (max-width: 980px) {
        body.nav-open {
          overflow: hidden;
          touch-action: none;
        }
        .nav-stack {
          width: calc(100% - 20px);
          top: 8px;
        }
        .nav {
          min-height: 64px;
          padding: 0 16px;
          border-radius: 18px;
          z-index: 5;
        }
        .brand {
          height: 144px;
        }
        .brand img { width: 274px; }
        .nav-menu-toggle {
          display: inline-flex;
          position: relative;
          z-index: 3;
          margin-left: auto;
        }
        .nav-main {
          position: fixed;
          top: 98px;
          right: 12px;
          width: min(360px, calc(100vw - 24px));
          background: rgba(255, 255, 255, 0.98);
          border: 1px solid rgba(224, 232, 243, 0.95);
          border-radius: 18px;
          box-shadow: 0 18px 44px rgba(10, 26, 52, 0.16);
          padding: 20px;
          display: grid;
          gap: 14px;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          transform: translateY(-10px);
          transition: opacity 0.24s ease, transform 0.24s ease;
          z-index: 6;
        }
        .nav-stack.is-menu-open .nav-main {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
          transform: translateY(0);
        }
        .nav-stack.is-menu-open .nav {
          z-index: 8;
        }
        .nav-links {
          display: grid;
          gap: 6px;
        }
        .nav-links a {
          padding: 10px 8px;
          font-size: 0.93rem;
        }
        .nav-cta {
          width: 100%;
          height: 48px;
          font-size: 0.78rem;
        }
        .nav-overlay {
          display: block;
          position: fixed;
          inset: 0;
          background: rgba(9, 20, 36, 0.45);
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.24s ease;
          z-index: 4;
        }
        .nav-stack.is-menu-open .nav-overlay {
          opacity: 1;
          pointer-events: auto;
        }
      }

      @media (max-width: 768px) {
        .nav-stack {
          left: 0;
          right: 0;
          transform: none;
          width: 100%;
          padding: 0;
          top: 7px;
        }
        .nav {
          min-height: 62px;
          padding: 0 12px;
          border-radius: 16px;
          gap: 10px;
          width: calc(100% - 16px);
          margin: 0 auto;
        }
        .brand img {
          width: clamp(233px, 62vw, 278px);
        }
        .brand {
          height: 140px;
        }
        .nav-menu-toggle {
          width: 48px;
          height: 48px;
          margin-left: auto;
          border-radius: 13px;
          z-index: 7;
        }
        .nav-main {
          top: 0;
          right: 0;
          left: 0;
          width: 100%;
          max-width: none;
          height: 100dvh;
          min-height: 100dvh;
          border-radius: 0;
          border: none;
          box-shadow: none;
          box-sizing: border-box;
          padding: 112px 24px 28px;
          gap: 18px;
          background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(247,251,255,0.98) 100%);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transform: translateY(-16px);
          z-index: 6;
          overflow-y: auto;
          overflow-x: hidden;
        }
        .nav-stack.is-menu-open .nav-main {
          transform: translateY(0);
        }
        .nav-links {
          width: 100%;
          gap: 8px;
        }
        .nav-links a {
          width: 100%;
          min-height: 50px;
          display: flex;
          align-items: center;
          padding: 12px 12px;
          font-size: 0.98rem;
          letter-spacing: 0.01em;
          border-radius: 12px;
        }
        .nav-cta {
          width: 100%;
          height: 52px;
          font-size: 0.8rem;
          margin-top: 6px;
        }
        .kpi-strip {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .revenue-strip,
        .forecast-row {
          display: none;
        }
      }

      @media (max-width: 680px) {
        .page { padding: 14px 14px 80px; }
        .hero-shell {
          margin-top: 150px;
          padding: 64px 16px 104px;
          border-radius: 24px;
          min-height: auto;
        }
        .follow-twist {
          margin-top: 14px;
        }
        .social-icon-row {
          justify-content: flex-start;
        }
        .social-links {
          width: 100%;
        }
        .nav-stack { top: 7px; }
        .nav {
          min-height: 60px;
          padding: 0 12px;
          border-radius: 16px;
          width: calc(100% - 18px);
        }
        .brand {
          height: 134px;
        }
        .brand img { width: clamp(228px, 64vw, 262px); }
        .nav-main {
          padding: 104px 18px 22px;
        }
        .hero { gap: 20px; }
        .hero-copy {
          padding: 18px 16px 18px;
          border-radius: 18px;
        }
        h1 {
          font-size: clamp(2.7rem, 12vw, 4rem);
          line-height: 0.96;
          margin: 8px 0 16px;
        }
        .hero p {
          font-size: 1.02rem;
          margin: 0 0 18px;
          line-height: 1.62;
        }
        .hero-actions {
          gap: 10px;
          margin-bottom: 6px;
        }
        .hero-actions .btn {
          min-height: 50px;
          width: 100%;
          justify-content: center;
          text-align: center;
          padding: 13px 16px;
          font-size: 0.9rem;
        }
        .hero-note { margin: 8px 2px 18px; font-size: 0.78rem; }
        .hero-stats { gap: 9px; grid-template-columns: 1fr; }
        .product-body {
          grid-template-columns: 1fr;
          gap: 10px;
          padding: 12px;
        }
        .product-rail {
          grid-template-columns: repeat(4, minmax(0, 1fr));
          grid-auto-flow: dense;
          padding: 6px;
        }
        .rail-item {
          min-height: 30px;
          font-size: 0.52rem;
        }
        .product-topbar {
          padding: 12px;
          flex-wrap: wrap;
          align-items: center;
        }
        .product-actions {
          width: 100%;
          justify-content: flex-start;
        }
        .product-grid {
          grid-template-columns: 1fr;
          grid-template-areas:
            "workflow"
            "status"
            "pipeline"
            "journey"
            "insights";
        }
        .kpi-strip {
          grid-template-columns: 1fr;
        }
        .journey-wrap {
          grid-template-columns: 1fr;
          justify-items: start;
          gap: 8px;
        }
        .hero-card { padding: 14px; border-radius: 22px; }
        .insight-list { grid-template-columns: 1fr; }
        .section, .cta { padding: 20px; }
        .feature-grid, .service-grid, .testimonial-grid, .project-grid, .partner-grid { grid-template-columns: 1fr; }
        .chatbot-launcher {
          right: 12px;
          top: auto;
          bottom: 16px;
          transform: none;
          min-width: 170px;
          height: 52px;
          padding: 0 12px;
        }
        .chatbot-launcher:hover {
          transform: translateY(-1px) scale(1.01);
        }
        .chatbot-launcher-brand {
          font-size: 0.72rem;
        }
        .chatbot-launcher-sub {
          font-size: 0.5rem;
        }
        .chatbot-placeholder {
          right: 8px;
          left: 8px;
          top: 86px;
          bottom: 76px;
          width: auto;
          border-radius: 18px;
          padding: 12px;
        }
        .chat-options {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 420px) {
        .nav {
          min-height: 58px;
          padding: 0 10px;
          width: calc(100% - 16px);
        }
        .brand img {
          width: clamp(218px, 66vw, 247px);
        }
        .brand {
          height: 124px;
        }
        .nav-main {
          padding: 98px 14px 18px;
        }
        .nav-links a {
          min-height: 48px;
          font-size: 0.94rem;
        }
        .hero-shell {
          margin-top: 146px;
          padding: 54px 12px 16px;
        }
        .hero-copy {
          padding: 16px 14px;
        }
        h1 {
          font-size: clamp(2.38rem, 11vw, 3.2rem);
          margin: 7px 0 14px;
        }
        .hero p {
          font-size: 0.98rem;
          margin: 0 0 16px;
        }
        .hero-actions .btn {
          min-height: 48px;
          font-size: 0.86rem;
        }
        .hero-note { font-size: 0.74rem; }
        .hero-stats {
          grid-template-columns: 1fr;
        }
        .product-rail {
          display: none;
        }
        .product-body {
          padding: 10px;
        }
        .module-card {
          padding: 10px;
          border-radius: 14px;
        }
        .workflow-card {
          min-height: 188px;
        }
        .twist-ai-panel {
          margin-top: 8px;
          padding: 10px;
        }
      }