/* Scoped adaptation of catalog-project/landing-pages/hooshyar-landing.html. */
.ai-integrator-page{
      --ink: #0d1628;
      --muted: #5d687a;
      --quiet: #7c8798;
      --white: #ffffff;
      --surface: #f7f9fc;
      --line: #dfe7f1;
      --line-soft: #edf2f7;
      --blue: #2367f0;
      --cyan: #22c1d6;
      --teal: #0fa394;
      --green: #3f8f5f;
      --violet: #7357d9;
      --amber: #bb7a17;
      --dark: #08111f;
      --dark-2: #101a2e;
      --shadow: 0 22px 70px rgba(13, 22, 40, 0.12);
      --soft-shadow: 0 14px 34px rgba(13, 22, 40, 0.07);
      --radius: 8px;
      --max: 1180px;
    }
    .ai-integrator-page *{
      box-sizing: border-box;
    }

    .ai-integrator-page{
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    .ai-integrator-page{
      width: 100%;
      margin: 0;
      background: #fff;
      color: var(--ink);
      direction: ltr;
      font-family: var(--font-family-base);
      line-height: 1.8;
      overflow-x: hidden;
      text-rendering: optimizeLegibility;
    }

    .ai-integrator-page .site-header, .ai-integrator-page .hero, .ai-integrator-page .modules, .ai-integrator-page .architecture-band, .ai-integrator-page .seo-faq, .ai-integrator-page .final-cta, .ai-integrator-page .footer{
      overflow-x: clip;
    }

    .ai-integrator-page a{
      color: inherit;
      text-decoration: none;
    }

    .ai-integrator-page img, .ai-integrator-page svg{
      display: block;
      max-width: 100%;
    }

    .ai-integrator-page .svg-sprite{
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    .ai-integrator-page .ui-icon{
      width: 22px;
      height: 22px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.85;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ai-integrator-page .icon-badge{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(223, 231, 241, 0.95);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.92);
      color: var(--teal);
      box-shadow: 0 12px 30px rgba(13, 22, 40, 0.08);
      flex: 0 0 auto;
    }

    .ai-integrator-page .icon-badge.blue{ color: var(--blue); }
    .ai-integrator-page .icon-badge.violet{ color: var(--violet); }
    .ai-integrator-page .icon-badge.amber{ color: var(--amber); }
    .ai-integrator-page .icon-badge.green{ color: var(--green); }

    .ai-integrator-page .page{
      position: relative;
      min-height: 100dvh;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 8% 18%, rgba(35, 103, 240, 0.055), transparent 26rem),
        radial-gradient(circle at 90% 42%, rgba(15, 163, 148, 0.07), transparent 30rem),
        #fff;
    }

    .ai-integrator-page .skip-link{
      position: fixed;
      inset-inline-start: 16px;
      top: 12px;
      z-index: 100;
      transform: translateY(-140%);
      border-radius: var(--radius);
      padding: 10px 14px;
      background: #fff;
      color: var(--ink);
      font-weight: 700;
      box-shadow: var(--shadow);
      transition: transform 180ms ease;
    }

    .ai-integrator-page .skip-link:focus{
      transform: translateY(0);
    }

    .ai-integrator-page .page::before{
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.58;
      background:
        linear-gradient(135deg, rgba(35, 103, 240, 0.05), transparent 34%),
        linear-gradient(315deg, rgba(15, 163, 148, 0.05), transparent 40%),
        radial-gradient(circle at 50% 18%, rgba(115, 87, 217, 0.04), transparent 28rem);
      background-size: 160% 160%;
    }

    @supports (animation-timeline: scroll()) {
      .ai-integrator-page .page::before{
        animation: scroll-atmosphere linear both;
        animation-timeline: scroll(root);
      }
    }

    @keyframes scroll-atmosphere {
      0% {
        background-position: 0% 0%, 100% 0%, 50% 0%;
        filter: hue-rotate(0deg);
      }

      100% {
        background-position: 100% 100%, 0% 100%, 50% 100%;
        filter: hue-rotate(16deg);
      }
    }

    .ai-integrator-page .container{
      width: min(var(--max), 100%);
      margin: 0 auto;
      padding-inline: 24px;
    }

    .ai-integrator-page .site-header{
      position: sticky;
      top: 0;
      z-index: 40;
      direction: ltr;
      background: rgba(255, 255, 255, 0.88);
      border-bottom: 1px solid rgba(223, 231, 241, 0.9);
      backdrop-filter: blur(18px);
    }

    .ai-integrator-page .nav{
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 22px;
    }

    .ai-integrator-page .brand{
      order: 3;
      direction: rtl;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: max-content;
      font-size: 20px;
      font-weight: 700;
    }

    .ai-integrator-page .brand-mark{
      width: 38px;
      height: 38px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: #fff;
      box-shadow: var(--soft-shadow);
    }

    .ai-integrator-page .nav-links{
      order: 2;
      direction: rtl;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 26px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 500;
    }

    .ai-integrator-page .nav-links a{
      min-height: 44px;
      display: inline-flex;
      align-items: center;
    }

    .ai-integrator-page .button{
      direction: rtl;
      min-height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      padding: 10px 18px;
      font-weight: 700;
      line-height: 1.2;
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .ai-integrator-page .button:hover{
      transform: translateY(-1px);
    }

    .ai-integrator-page .button:focus-visible, .ai-integrator-page .nav-links a:focus-visible{
      outline: 3px solid rgba(35, 103, 240, 0.24);
      outline-offset: 3px;
    }

    .ai-integrator-page .site-header .button{
      order: 1;
    }

    .ai-integrator-page .button-primary{
      background: var(--ink);
      color: #fff;
      box-shadow: 0 14px 30px rgba(13, 22, 40, 0.18);
    }

    .ai-integrator-page .button-secondary{
      background: rgba(255, 255, 255, 0.94);
      border-color: var(--line);
      color: var(--ink);
    }

    .ai-integrator-page .ai-integrator-main, .ai-integrator-page .ai-integrator-footer{
      position: relative;
      z-index: 1;
      direction: rtl;
    }

    .ai-integrator-page .hero{
      position: relative;
      overflow: hidden;
      isolation: isolate;
      color: #fff;
      background:
        radial-gradient(circle at 20% 14%, rgba(80, 125, 255, 0.42), transparent 20rem),
        radial-gradient(circle at 72% 28%, rgba(16, 204, 184, 0.32), transparent 23rem),
        radial-gradient(circle at 45% 88%, rgba(110, 73, 220, 0.3), transparent 22rem),
        linear-gradient(135deg, #050914 0%, #0b1324 45%, #101629 100%);
    }

    .ai-integrator-page .hero::before, .ai-integrator-page .hero::after{
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: -1;
    }

    .ai-integrator-page .hero::before{
      opacity: 0.58;
      background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(34, 193, 214, 0.65) 0 1px, transparent 1.5px);
      background-size: 74px 74px, 118px 118px;
      background-position: 12px 18px, 54px 28px;
      animation: star-drift 24s linear infinite;
    }

    .ai-integrator-page .hero::after{
      background:
        linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.08) 50%, transparent 100%),
        radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.08), transparent 24rem);
      mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
    }

    @keyframes star-drift {
      from { transform: translate3d(0, 0, 0); }
      to { transform: translate3d(-74px, 74px, 0); }
    }

    @keyframes float-soft {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }

    @keyframes pulse-line {
      0%, 100% { opacity: 0.42; }
      50% { opacity: 0.95; }
    }

    .ai-integrator-page .hero-grid{
      display: grid;
      grid-template-columns: minmax(430px, 0.96fr) minmax(0, 1.04fr);
      align-items: center;
      gap: clamp(28px, 4.4vw, 58px);
      min-height: min(630px, calc(100dvh - 74px));
      padding-block: 38px 46px;
      direction: ltr;
    }

    .ai-integrator-page .hero-copy{
      direction: rtl;
      text-align: right;
      min-width: 0;
    }

    .ai-integrator-page .eyebrow{
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 36px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 999px;
      padding: 6px 14px;
      background: rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.78);
      font-size: 13px;
      font-weight: 500;
      backdrop-filter: blur(12px);
    }

    .ai-integrator-page .eyebrow::before{
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #24d6c8;
      box-shadow: 0 0 0 6px rgba(36, 214, 200, 0.14), 0 0 28px rgba(36, 214, 200, 0.86);
    }

    .ai-integrator-page h1, .ai-integrator-page h2, .ai-integrator-page h3, .ai-integrator-page p{
      letter-spacing: 0;
    }

    .ai-integrator-page .hero h1{
      margin: 22px 0 0;
      font-size: clamp(66px, 7.4vw, 98px);
      line-height: 0.98;
      font-weight: 700;
    }

    .ai-integrator-page .hero-subtitle{
      margin: 14px 0 0;
      font-size: clamp(26px, 3.2vw, 38px);
      line-height: 1.24;
      font-weight: 700;
      max-width: 760px;
    }

    .ai-integrator-page .hero-lead{
      margin: 22px 0 0;
      max-width: 690px;
      color: rgba(255, 255, 255, 0.76);
      font-size: clamp(17px, 1.35vw, 20px);
      line-height: 1.82;
    }

    .ai-integrator-page .hero-actions{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .ai-integrator-page .hero .button-primary{
      background: #fff;
      color: var(--ink);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
    }

    .ai-integrator-page .hero .button-secondary{
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.22);
      color: #fff;
    }

    .ai-integrator-page .hero-showcase{
      direction: rtl;
      position: relative;
      min-width: 0;
      animation: float-soft 7s ease-in-out infinite;
    }

    .ai-integrator-page .glass-stage{
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 28px;
      background:
        radial-gradient(circle at 22% 18%, rgba(34, 193, 214, 0.24), transparent 15rem),
        radial-gradient(circle at 78% 72%, rgba(115, 87, 217, 0.22), transparent 18rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.045));
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
      min-height: 410px;
      padding: 22px;
      overflow: hidden;
      backdrop-filter: blur(14px);
      perspective: 1200px;
    }

    .ai-integrator-page .glass-stage::before{
      content: "";
      position: absolute;
      inset: 16px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 14px;
      pointer-events: none;
    }

    .ai-integrator-page .glass-stage::after{
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 76%;
      height: 32%;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(34, 193, 214, 0.16), transparent 68%);
      transform: translate(-50%, 42%) rotateX(72deg);
      filter: blur(6px);
      pointer-events: none;
    }

    .ai-integrator-page .hero-orbit-scene{
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(76%, 380px);
      aspect-ratio: 1;
      z-index: 2;
      transform: translate(-50%, -50%);
      transform-style: preserve-3d;
    }

    .ai-integrator-page .hero-link-svg{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0.68;
      filter: drop-shadow(0 0 8px rgba(34, 193, 214, 0.22));
    }

    .ai-integrator-page .hero-link{
      fill: none;
      stroke: rgba(204, 230, 255, 0.34);
      stroke-width: 1.1;
      stroke-dasharray: 8 12;
      animation: dash-flow 10s linear infinite;
    }

    @keyframes dash-flow {
      to { stroke-dashoffset: -120; }
    }

    .ai-integrator-page .hero-ring{
      position: absolute;
      left: 50%;
      top: 50%;
      border: 1px solid rgba(210, 235, 255, 0.18);
      border-radius: 50%;
      transform-style: preserve-3d;
      box-shadow: inset 0 0 26px rgba(34, 193, 214, 0.08);
    }

    .ai-integrator-page .hero-ring.one{
      width: 70%;
      height: 70%;
      transform: translate(-50%, -50%) rotateX(64deg) rotateZ(0deg);
      animation: ring-spin 18s linear infinite;
    }

    .ai-integrator-page .hero-ring.two{
      width: 88%;
      height: 48%;
      transform: translate(-50%, -50%) rotateX(68deg) rotateZ(34deg);
      animation: ring-spin-alt 22s linear infinite;
    }

    .ai-integrator-page .hero-ring.three{
      width: 52%;
      height: 86%;
      transform: translate(-50%, -50%) rotateY(56deg) rotateZ(-18deg);
      animation: ring-spin 26s linear infinite reverse;
    }

    @keyframes ring-spin {
      to { transform: translate(-50%, -50%) rotateX(64deg) rotateZ(360deg); }
    }

    @keyframes ring-spin-alt {
      to { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(394deg); }
    }

    .ai-integrator-page .hero-core, .ai-integrator-page .hero-node{
      position: absolute;
      z-index: 3;
      display: grid;
      place-items: center;
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      backdrop-filter: blur(4px);
      text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
      transform: translateZ(0);
    }

    .ai-integrator-page .hero-core{
      left: 50%;
      top: 50%;
      width: 104px;
      height: 104px;
      border-radius: 50%;
      padding: 16px;
      transform: translate(-50%, -50%);
      box-shadow:
        0 0 0 14px rgba(255, 255, 255, 0.035),
        0 0 80px rgba(34, 193, 214, 0.34),
        0 24px 60px rgba(0, 0, 0, 0.25);
    }

    .ai-integrator-page .core-symbol{
      position: relative;
      width: 34px;
      height: 34px;
      margin-bottom: 8px;
      border: 1.6px solid rgba(34, 193, 214, 0.95);
      border-radius: 50%;
      box-shadow: inset 0 0 0 8px rgba(34, 193, 214, 0.12), 0 0 28px rgba(34, 193, 214, 0.26);
    }

    .ai-integrator-page .core-symbol::before, .ai-integrator-page .core-symbol::after{
      content: "";
      position: absolute;
      inset: 7px;
      border: 1.4px solid rgba(255, 255, 255, 0.82);
      border-radius: 50%;
      transform: rotate(45deg) scaleX(1.55);
    }

    .ai-integrator-page .core-symbol::after{
      transform: rotate(-45deg) scaleX(1.55);
    }

    .ai-integrator-page .hero-core strong{
      font-size: 21px;
      line-height: 1.1;
    }

    .ai-integrator-page .hero-core span{
      margin-top: 4px;
      color: rgba(255, 255, 255, 0.68);
      font-size: 11px;
      line-height: 1.4;
    }

    .ai-integrator-page .hero-node{
      width: 76px;
      height: 76px;
      border-radius: 50%;
      padding: 10px 8px;
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
      transform: translate(-50%, -50%) translateZ(0);
    }

    .ai-integrator-page .hero-node i{
      display: block;
      width: 20px;
      height: 20px;
      margin-bottom: 6px;
      border: 1.7px solid currentColor;
      border-radius: 50%;
      color: rgba(34, 193, 214, 0.95);
      box-shadow: inset 0 0 0 6px rgba(34, 193, 214, 0.12), 0 0 16px rgba(34, 193, 214, 0.22);
    }

    .ai-integrator-page .hero-node strong{
      font-size: 11px;
      line-height: 1.28;
    }

    .ai-integrator-page .hero-node span{
      margin-top: 2px;
      color: rgba(255, 255, 255, 0.6);
      font-size: 9px;
      line-height: 1.25;
    }

    @keyframes node-breathe {
      0%, 100% { transform: translate(-50%, -50%) translateZ(0); }
      50% { transform: translate(-50%, calc(-50% - 8px)) translateZ(22px); }
    }

    .ai-integrator-page .node-models{ left: 50%; top: 14%; }
    .ai-integrator-page .node-chatbot{ left: 81.2%; top: 32%; }
    .ai-integrator-page .node-agent{ left: 81.2%; top: 68%; }
    .ai-integrator-page .node-dashboard{ left: 50%; top: 86%; }
    .ai-integrator-page .node-knowledge{ left: 18.8%; top: 68%; }
    .ai-integrator-page .node-data{ left: 18.8%; top: 32%; }

    .ai-integrator-page .hero-particle{
      position: absolute;
      z-index: 1;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.72);
      box-shadow: 0 0 16px rgba(34, 193, 214, 0.58);
      animation: particle-float 9s ease-in-out infinite;
    }

    .ai-integrator-page .hero-particle.p1{ left: 24%; top: 18%; animation-delay: -1s; }
    .ai-integrator-page .hero-particle.p2{ left: 72%; top: 18%; animation-delay: -3s; }
    .ai-integrator-page .hero-particle.p3{ left: 68%; top: 83%; animation-delay: -5s; }
    .ai-integrator-page .hero-particle.p4{ left: 29%; top: 83%; animation-delay: -7s; }

    @keyframes particle-float {
      0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.45; }
      50% { transform: translate3d(10px, -16px, 0); opacity: 0.9; }
    }

    .ai-integrator-page .module-nav{
      position: sticky;
      top: 74px;
      z-index: 30;
      border-bottom: 1px solid rgba(223, 231, 241, 0.84);
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(14px);
    }

    .ai-integrator-page .module-strip{
      direction: rtl;
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-block: 12px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .ai-integrator-page .module-strip::-webkit-scrollbar{
      display: none;
    }

    .ai-integrator-page .module-strip a{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      min-width: max-content;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 7px 14px;
      background: #fff;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .ai-integrator-page .module-strip a.is-active{
      border-color: rgba(15, 163, 148, 0.32);
      color: var(--teal);
      background: rgba(15, 163, 148, 0.1);
    }

    .ai-integrator-page .intro-band{
      padding: 48px 0 22px;
      background: rgba(255, 255, 255, 0.94);
    }

    .ai-integrator-page .section-kicker{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      border-radius: 999px;
      padding: 6px 13px;
      background: rgba(15, 163, 148, 0.1);
      color: #087d73;
      font-size: 13px;
      font-weight: 700;
    }

    .ai-integrator-page .section-kicker::before{
      content: "";
      width: 18px;
      height: 3px;
      border-radius: 999px;
      background: currentColor;
    }

    .ai-integrator-page .intro-grid{
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      gap: 34px;
      align-items: end;
    }

    .ai-integrator-page .intro-copy h2{
      margin: 14px 0 0;
      max-width: 760px;
      font-size: clamp(28px, 3.6vw, 40px);
      line-height: 1.2;
    }

    .ai-integrator-page .intro-copy p{
      margin: 16px 0 0;
      max-width: 650px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.86;
    }

    .ai-integrator-page .intro-note{
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 16px;
      align-items: start;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      background:
        radial-gradient(circle at 14% 18%, rgba(35, 103, 240, 0.08), transparent 12rem),
        #fff;
      box-shadow: var(--soft-shadow);
    }

    .ai-integrator-page .intro-note strong{
      display: block;
      margin-bottom: 10px;
      font-size: 22px;
    }

    .ai-integrator-page .intro-note p{
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.9;
    }

    .ai-integrator-page .intro-note p, .ai-integrator-page .module-copy p, .ai-integrator-page .architecture-card p, .ai-integrator-page .cta-panel p{
      text-align: justify;
      text-align-last: right;
    }

    .ai-integrator-page .modules{
      padding: 42px 0 54px;
      background: rgba(255, 255, 255, 0.94);
    }

    .ai-integrator-page .module-section{
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(28px, 4.4vw, 56px);
      align-items: center;
      min-height: 470px;
      padding: 50px 0;
      border-bottom: 1px solid var(--line-soft);
    }

    .ai-integrator-page .module-section:last-child{
      border-bottom: 0;
    }

    .ai-integrator-page .module-section.reverse .module-visual{
      order: 2;
    }

    .ai-integrator-page .module-section.reverse .module-copy{
      order: 1;
    }

    .ai-integrator-page .module-copy{
      min-width: 0;
    }

    .ai-integrator-page .module-index{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--teal);
      background: #fff;
      font-weight: 700;
      box-shadow: var(--soft-shadow);
    }

    .ai-integrator-page .module-copy h2{
      margin: 16px 0 0;
      font-size: clamp(25px, 2.75vw, 34px);
      line-height: 1.18;
    }

    .ai-integrator-page .module-copy p{
      margin: 16px 0 0;
      max-width: 630px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.8;
    }

    .ai-integrator-page .module-list{
      display: grid;
      gap: 10px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
      max-width: 650px;
    }

    .ai-integrator-page .module-list li{
      position: relative;
      min-height: 28px;
      padding-right: 31px;
      color: var(--ink);
      font-size: 15px;
      line-height: 1.58;
    }

    .ai-integrator-page .module-list li::before{
      content: "";
      position: absolute;
      right: 0;
      top: 0.22em;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(15, 163, 148, 0.1);
      box-shadow: 0 0 0 4px rgba(15, 163, 148, 0.06);
    }

    .ai-integrator-page .module-list li::after{
      content: "";
      position: absolute;
      right: 6px;
      top: calc(0.22em + 5px);
      width: 7px;
      height: 4px;
      border-right: 2px solid var(--teal);
      border-bottom: 2px solid var(--teal);
      transform: rotate(45deg);
    }

    @media (min-width: 1081px) {
      .ai-integrator-page .module-copy h2{
        white-space: nowrap;
        font-size: clamp(23px, 2.22vw, 30px);
      }

      .ai-integrator-page .module-list li{
        white-space: nowrap;
        font-size: 13.8px;
        line-height: 1.5;
      }
    }

    .ai-integrator-page .list-icon{
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.25em;
      border-radius: 50%;
      background: rgba(15, 163, 148, 0.1);
      color: var(--teal);
      box-shadow: 0 0 0 4px rgba(15, 163, 148, 0.06);
    }

    .ai-integrator-page .list-icon .ui-icon{
      width: 12px;
      height: 12px;
      stroke-width: 2.2;
    }

    .ai-integrator-page .module-visual{
      min-width: 0;
    }

    .ai-integrator-page .browser-frame, .ai-integrator-page .concept-frame{
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #fff;
      box-shadow: var(--shadow);
    }

    .ai-integrator-page .browser-frame::before{
      content: "";
      display: block;
      height: 42px;
      border-bottom: 1px solid var(--line-soft);
      background:
        radial-gradient(circle at calc(100% - 22px) 50%, #ef6969 0 5px, transparent 5.5px),
        radial-gradient(circle at calc(100% - 42px) 50%, #f5bd4f 0 5px, transparent 5.5px),
        radial-gradient(circle at calc(100% - 62px) 50%, #58c77f 0 5px, transparent 5.5px),
        linear-gradient(180deg, #fbfdff, #f5f8fc);
    }

    .ai-integrator-page .browser-frame img{
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
      object-position: top center;
    }

    .ai-integrator-page .frame-caption{
      position: absolute;
      right: 18px;
      bottom: 18px;
      border: 1px solid rgba(223, 231, 241, 0.94);
      border-radius: 999px;
      padding: 8px 13px;
      background: rgba(255, 255, 255, 0.88);
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      backdrop-filter: blur(8px);
    }

    .ai-integrator-page .concept-frame{
      padding: 24px;
      min-height: 360px;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 20% 18%, rgba(15, 163, 148, 0.12), transparent 14rem),
        radial-gradient(circle at 80% 74%, rgba(115, 87, 217, 0.1), transparent 16rem),
        linear-gradient(135deg, #ffffff, #f7fbff);
    }

    .ai-integrator-page .concept-line{
      stroke: #c8d6e7;
      stroke-width: 1.2;
      animation: pulse-line 4s ease-in-out infinite;
    }

    .ai-integrator-page .concept-line-soft{
      stroke: #dce6f1;
      stroke-width: 1;
    }

    .ai-integrator-page .concept-node{
      fill: rgba(255, 255, 255, 0.94);
      stroke: #dfe7f1;
      stroke-width: 1.1;
      filter: drop-shadow(0 12px 20px rgba(13, 22, 40, 0.08));
    }

    .ai-integrator-page .concept-title{
      fill: var(--ink);
      font: 700 13px "Yekan", Tahoma, Arial, sans-serif;
    }

    .ai-integrator-page .concept-small{
      fill: var(--muted);
      font: 500 10px "Yekan", Tahoma, Arial, sans-serif;
    }

    .ai-integrator-page .icon{
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ai-integrator-page .brand-text{
      fill: var(--ink);
      font: 700 12px "Yekan", Tahoma, Arial, sans-serif;
    }

    .ai-integrator-page .brand-dot{
      fill: #fff;
      stroke: #dfe7f1;
      stroke-width: 1.1;
      filter: drop-shadow(0 10px 18px rgba(13, 22, 40, 0.08));
    }

    .ai-integrator-page .dashboard-mock{
      width: 100%;
      min-height: 380px;
    }

    .ai-integrator-page .chat-mock{
      direction: rtl;
      width: min(100%, 560px);
      border: 1px solid rgba(223, 231, 241, 0.9);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 24px 54px rgba(13, 22, 40, 0.12);
    }

    .ai-integrator-page .chat-mock-top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      min-height: 54px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line-soft);
      background:
        radial-gradient(circle at 12% 20%, rgba(34, 193, 214, 0.14), transparent 8rem),
        linear-gradient(180deg, #fbfdff, #f5f9fd);
    }

    .ai-integrator-page .chat-models{
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .ai-integrator-page .chat-models span, .ai-integrator-page .chat-status{
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      border: 1px solid #dfe7f1;
      border-radius: 999px;
      padding: 5px 10px;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.82);
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
    }

    .ai-integrator-page .chat-models .active{
      border-color: rgba(15, 163, 148, 0.28);
      color: var(--teal);
      background: rgba(15, 163, 148, 0.1);
    }

    .ai-integrator-page .chat-body{
      display: grid;
      grid-template-columns: 132px 1fr;
      min-height: 314px;
    }

    .ai-integrator-page .chat-sidebar{
      border-left: 1px solid var(--line-soft);
      padding: 14px 12px;
      background: #f8fbfe;
    }

    .ai-integrator-page .chat-sidebar strong{
      display: block;
      margin-bottom: 10px;
      color: var(--ink);
      font-size: 12px;
    }

    .ai-integrator-page .chat-history{
      display: grid;
      gap: 8px;
    }

    .ai-integrator-page .chat-history span{
      display: block;
      border: 1px solid #e5edf5;
      border-radius: 12px;
      padding: 8px 9px;
      color: var(--muted);
      background: #fff;
      font-size: 10px;
      font-weight: 700;
      white-space: nowrap;
    }

    .ai-integrator-page .chat-thread{
      display: grid;
      align-content: start;
      gap: 10px;
      padding: 16px;
      background:
        radial-gradient(circle at 18% 0%, rgba(15, 163, 148, 0.07), transparent 10rem),
        #fff;
    }

    .ai-integrator-page .chat-question, .ai-integrator-page .chat-answer{
      max-width: 82%;
      border-radius: 17px;
      padding: 10px 12px;
      box-shadow: 0 10px 24px rgba(13, 22, 40, 0.06);
    }

    .ai-integrator-page .chat-question{
      justify-self: start;
      border-bottom-left-radius: 6px;
      border: 1px solid #d7e0ec;
      background: linear-gradient(135deg, #e7edf5, #dbe5f0);
      color: #203047;
    }

    .ai-integrator-page .chat-answer{
      justify-self: end;
      border: 1px solid #e5edf5;
      border-bottom-right-radius: 6px;
      background: #fff;
      color: var(--ink);
    }

    .ai-integrator-page .chat-message-head{
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 6px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.4;
    }

    .ai-integrator-page .chat-question .chat-message-head{
      color: #475569;
    }

    .ai-integrator-page .chat-answer .chat-message-head{
      color: var(--muted);
    }

    .ai-integrator-page .chat-avatar{
      display: inline-grid;
      place-items: center;
      width: 21px;
      height: 21px;
      flex: 0 0 21px;
      border-radius: 999px;
      border: 1px solid rgba(15, 163, 148, 0.22);
      background: rgba(15, 163, 148, 0.1);
      color: var(--teal);
    }

    .ai-integrator-page .chat-question .chat-avatar{
      border-color: rgba(32, 48, 71, 0.12);
      background: rgba(255, 255, 255, 0.58);
      color: #475569;
    }

    .ai-integrator-page .chat-avatar svg{
      width: 12px;
      height: 12px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .ai-integrator-page .chat-speaker{
      display: block;
      min-width: 0;
    }

    .ai-integrator-page .chat-question p, .ai-integrator-page .chat-answer p{
      margin: 0;
      font-size: 11px;
      line-height: 1.75;
    }

    .ai-integrator-page .chat-answer-meta{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 9px;
    }

    .ai-integrator-page .chat-answer-meta b{
      border-radius: 999px;
      padding: 4px 7px;
      color: var(--teal);
      background: rgba(15, 163, 148, 0.1);
      font-size: 9px;
      font-weight: 700;
    }

    .ai-integrator-page .chat-input-row{
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
      border: 1px solid #dfe7f1;
      border-radius: 14px;
      padding: 9px 10px;
      background: #f8fbfe;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .ai-integrator-page .chat-send-dot{
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #22c1d6, #0fa394);
      box-shadow: 0 10px 22px rgba(15, 163, 148, 0.22);
    }

    .ai-integrator-page .software-mock{
      direction: rtl;
      width: min(100%, 560px);
      min-height: 330px;
      border: 1px solid rgba(223, 231, 241, 0.94);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 24px 54px rgba(13, 22, 40, 0.12);
    }

    .ai-integrator-page .software-mock.dark{
      border-color: rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.09);
      color: #fff;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
      backdrop-filter: blur(12px);
    }

    .ai-integrator-page .mock-topbar{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 48px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line-soft);
      background:
        radial-gradient(circle at 12% 18%, rgba(34, 193, 214, 0.12), transparent 8rem),
        linear-gradient(180deg, #fbfdff, #f5f9fd);
    }

    .ai-integrator-page .dark .mock-topbar{
      border-color: rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.08);
    }

    .ai-integrator-page .mock-title{
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .ai-integrator-page .dark .mock-title{
      color: #fff;
    }

    .ai-integrator-page .mock-title::before{
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 0 5px rgba(15, 163, 148, 0.12);
    }

    .ai-integrator-page .mock-actions, .ai-integrator-page .mock-tabs, .ai-integrator-page .mock-chip-row{
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .ai-integrator-page .mock-pill, .ai-integrator-page .mock-status, .ai-integrator-page .mock-tab, .ai-integrator-page .mock-chip{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      border: 1px solid #dfe7f1;
      border-radius: 999px;
      padding: 4px 9px;
      color: var(--muted);
      background: rgba(255, 255, 255, 0.86);
      font-size: 9.5px;
      font-weight: 700;
      white-space: nowrap;
    }

    .ai-integrator-page .mock-pill.active, .ai-integrator-page .mock-status.ok, .ai-integrator-page .mock-tab.active, .ai-integrator-page .mock-chip.active{
      border-color: rgba(15, 163, 148, 0.28);
      color: var(--teal);
      background: rgba(15, 163, 148, 0.1);
    }

    .ai-integrator-page .mock-status.warn{
      border-color: rgba(187, 122, 23, 0.22);
      color: var(--amber);
      background: rgba(187, 122, 23, 0.09);
    }

    .ai-integrator-page .mock-body{
      display: grid;
      grid-template-columns: 118px 1fr;
      min-height: 282px;
    }

    .ai-integrator-page .mock-sidebar{
      display: grid;
      align-content: start;
      gap: 8px;
      border-left: 1px solid var(--line-soft);
      padding: 13px 10px;
      background: #f8fbfe;
    }

    .ai-integrator-page .mock-sidebar strong{
      display: block;
      margin-bottom: 3px;
      color: var(--ink);
      font-size: 11px;
    }

    .ai-integrator-page .mock-nav-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-height: 31px;
      border: 1px solid #e5edf5;
      border-radius: 10px;
      padding: 6px 8px;
      color: var(--muted);
      background: #fff;
      font-size: 9.5px;
      font-weight: 700;
    }

    .ai-integrator-page .mock-nav-item.active{
      border-color: rgba(15, 163, 148, 0.22);
      color: var(--teal);
      background: rgba(15, 163, 148, 0.08);
    }

    .ai-integrator-page .mock-content{
      display: grid;
      align-content: start;
      gap: 11px;
      padding: 14px;
      background:
        radial-gradient(circle at 14% 4%, rgba(15, 163, 148, 0.07), transparent 10rem),
        #fff;
    }

    .ai-integrator-page .mock-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    .ai-integrator-page .mock-grid.two{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-integrator-page .mock-card, .ai-integrator-page .mock-kpi, .ai-integrator-page .mock-panel{
      border: 1px solid #e5edf5;
      border-radius: 13px;
      padding: 10px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 10px 24px rgba(13, 22, 40, 0.045);
    }

    .ai-integrator-page .mock-card strong, .ai-integrator-page .mock-kpi strong, .ai-integrator-page .mock-panel strong{
      display: block;
      margin-bottom: 5px;
      color: var(--ink);
      font-size: 11px;
      line-height: 1.5;
    }

    .ai-integrator-page .mock-card span, .ai-integrator-page .mock-kpi span, .ai-integrator-page .mock-panel span{
      display: block;
      color: var(--muted);
      font-size: 9.5px;
      line-height: 1.55;
    }

    .ai-integrator-page .mock-kpi b{
      display: block;
      margin-top: 4px;
      color: var(--teal);
      font-size: 16px;
      line-height: 1.2;
    }

    .ai-integrator-page .mock-table{
      display: grid;
      gap: 6px;
      border: 1px solid #e5edf5;
      border-radius: 13px;
      padding: 8px;
      background: #fff;
    }

    .ai-integrator-page .mock-row{
      display: grid;
      grid-template-columns: 1.1fr 0.8fr auto;
      align-items: center;
      gap: 8px;
      min-height: 28px;
      border-radius: 9px;
      padding: 5px 7px;
      background: #f8fbfe;
      color: var(--muted);
      font-size: 9.5px;
      font-weight: 700;
    }

    .ai-integrator-page .mock-row.head{
      color: var(--quiet);
      background: transparent;
      font-size: 9px;
    }

    .ai-integrator-page .mock-progress{
      height: 7px;
      border-radius: 999px;
      overflow: hidden;
      background: #edf2f7;
    }

    .ai-integrator-page .mock-progress i{
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--teal), var(--cyan));
    }

    .ai-integrator-page .mock-chart{
      position: relative;
      min-height: 82px;
      border: 1px solid #e5edf5;
      border-radius: 13px;
      background:
        linear-gradient(180deg, transparent 24%, rgba(223, 231, 241, 0.45) 24% 25%, transparent 25% 49%, rgba(223, 231, 241, 0.45) 49% 50%, transparent 50% 74%, rgba(223, 231, 241, 0.45) 74% 75%, transparent 75%),
        #fff;
      overflow: hidden;
    }

    .ai-integrator-page .mock-chart svg{
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .ai-integrator-page .mock-bars{
      display: flex;
      align-items: end;
      gap: 7px;
      min-height: 76px;
      padding: 10px 12px;
      border: 1px solid #e5edf5;
      border-radius: 13px;
      background: #fff;
    }

    .ai-integrator-page .mock-bars i{
      flex: 1;
      min-width: 8px;
      border-radius: 999px 999px 4px 4px;
      background: linear-gradient(180deg, var(--cyan), var(--teal));
    }

    .ai-integrator-page .mock-split{
      display: grid;
      grid-template-columns: 1fr 0.9fr;
      gap: 10px;
      align-items: stretch;
    }

    .ai-integrator-page .mock-checklist{
      display: grid;
      gap: 7px;
    }

    .ai-integrator-page .mock-check{
      display: flex;
      align-items: center;
      gap: 7px;
      border-radius: 10px;
      padding: 7px 8px;
      background: #f8fbfe;
      color: var(--ink);
      font-size: 9.5px;
      font-weight: 700;
    }

    .ai-integrator-page .mock-check::before{
      content: "";
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: rgba(15, 163, 148, 0.13);
      box-shadow: inset 0 0 0 4px rgba(15, 163, 148, 0.08);
      flex: 0 0 auto;
    }

    .ai-integrator-page .hero-control-mock{
      width: min(100%, 520px);
      min-height: 382px;
      transform: translateZ(0);
    }

    .ai-integrator-page .hero-control-mock .mock-body{
      grid-template-columns: 116px 1fr;
      min-height: 332px;
    }

    .ai-integrator-page .hero-control-mock .mock-content{
      background:
        radial-gradient(circle at 14% 4%, rgba(34, 193, 214, 0.13), transparent 10rem),
        rgba(255, 255, 255, 0.96);
    }

    .ai-integrator-page .hero-control-mock .mock-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-integrator-page .wizard-steps{
      display: grid;
      gap: 8px;
    }

    .ai-integrator-page .wizard-step{
      display: grid;
      grid-template-columns: 30px 1fr auto;
      align-items: center;
      gap: 8px;
      border: 1px solid #e5edf5;
      border-radius: 12px;
      padding: 8px;
      background: #fff;
    }

    .ai-integrator-page .wizard-step b{
      display: inline-grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      color: var(--teal);
      background: rgba(15, 163, 148, 0.1);
      font-size: 11px;
    }

    .ai-integrator-page .wizard-step strong{
      display: block;
      color: var(--ink);
      font-size: 10.5px;
    }

    .ai-integrator-page .wizard-step span{
      color: var(--muted);
      font-size: 9px;
    }

    .ai-integrator-page .architecture-visual{
      width: 100%;
      margin-bottom: 24px;
      border: 1px solid var(--line-soft);
      border-radius: 16px;
      padding: 12px;
      background:
        radial-gradient(circle at 18% 18%, rgba(34, 193, 214, 0.1), transparent 11rem),
        linear-gradient(135deg, #ffffff, #f7fbff);
      box-shadow: 0 18px 45px rgba(13, 22, 40, 0.06);
    }

    .ai-integrator-page .blue{ stroke: var(--blue); }
    .ai-integrator-page .teal{ stroke: var(--teal); }
    .ai-integrator-page .green{ stroke: var(--green); }
    .ai-integrator-page .violet{ stroke: var(--violet); }
    .ai-integrator-page .amber{ stroke: var(--amber); }

    .ai-integrator-page .architecture-band{
      padding: 58px 0;
      background:
        radial-gradient(circle at 12% 18%, rgba(35, 103, 240, 0.1), transparent 24rem),
        linear-gradient(135deg, #f6f9fc, #eef6f8);
      border-block: 1px solid var(--line);
    }

    .ai-integrator-page .architecture-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      align-items: stretch;
    }

    .ai-integrator-page .architecture-card{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.82);
      box-shadow: var(--soft-shadow);
      padding: clamp(28px, 4vw, 44px);
      backdrop-filter: blur(10px);
    }

    .ai-integrator-page .architecture-card h2{
      margin: 0;
      font-size: clamp(28px, 3.5vw, 40px);
      line-height: 1.22;
    }

    .ai-integrator-page .architecture-card p{
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.86;
    }

    .ai-integrator-page .architecture-steps{
      display: grid;
      gap: 12px;
    }

    .ai-integrator-page .step{
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 14px;
      align-items: start;
      border: 1px solid var(--line-soft);
      border-radius: var(--radius);
      padding: 18px;
      background: #fff;
    }

    .ai-integrator-page .step span{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(15, 163, 148, 0.1);
      color: var(--teal);
      font-weight: 700;
    }

    .ai-integrator-page .step span .ui-icon{
      width: 20px;
      height: 20px;
    }

    .ai-integrator-page .step strong{
      display: block;
      margin-bottom: 6px;
      font-size: 18px;
    }

    .ai-integrator-page .step p{
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.8;
    }

    .ai-integrator-page .final-cta{
      padding: 60px 0;
      background: rgba(255, 255, 255, 0.94);
    }

    .ai-integrator-page .cta-panel{
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 30px;
      align-items: center;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      padding: clamp(30px, 4.4vw, 52px);
      color: #fff;
      background:
        radial-gradient(circle at 18% 18%, rgba(34, 193, 214, 0.35), transparent 20rem),
        radial-gradient(circle at 85% 74%, rgba(115, 87, 217, 0.38), transparent 18rem),
        linear-gradient(135deg, #08111f, #101a2e);
      box-shadow: var(--shadow);
    }

    .ai-integrator-page .cta-panel::before{
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.4px);
      background-size: 88px 88px;
      opacity: 0.18;
      pointer-events: none;
    }

    .ai-integrator-page .cta-panel > *{
      position: relative;
      z-index: 1;
    }

    .ai-integrator-page .cta-panel h2{
      margin: 0;
      max-width: 760px;
      font-size: clamp(28px, 3.5vw, 40px);
      line-height: 1.22;
    }

    .ai-integrator-page .cta-panel p{
      margin: 14px 0 0;
      max-width: 720px;
      color: rgba(255, 255, 255, 0.72);
      font-size: 17px;
      line-height: 1.82;
    }

    .ai-integrator-page .cta-actions{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 12px;
    }

    .ai-integrator-page .cta-panel .button-primary{
      background: #fff;
      color: var(--ink);
      box-shadow: none;
    }

    .ai-integrator-page .cta-panel .button-secondary{
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.2);
      color: #fff;
    }

    .ai-integrator-page .footer{
      border-top: 1px solid var(--line);
      padding: 26px 0;
      color: var(--muted);
      font-size: 14px;
      background: #fff;
    }

    .ai-integrator-page .footer-row{
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
    }

    .ai-integrator-page .seo-faq{
      padding: 58px 0;
      background: rgba(247, 249, 252, 0.92);
      border-top: 1px solid var(--line-soft);
    }

    .ai-integrator-page .faq-grid{
      direction: rtl;
      display: grid;
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: clamp(24px, 4vw, 52px);
      align-items: start;
    }

    .ai-integrator-page .faq-copy h2{
      margin: 14px 0 0;
      font-size: clamp(28px, 3vw, 38px);
      line-height: 1.25;
    }

    .ai-integrator-page .faq-copy p{
      margin: 14px 0 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.85;
      text-align: justify;
      text-align-last: right;
    }

    .ai-integrator-page .faq-list{
      display: grid;
      gap: 12px;
    }

    .ai-integrator-page .faq-item{
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 18px 20px;
      background: #fff;
      box-shadow: var(--soft-shadow);
    }

    .ai-integrator-page .faq-item h3{
      margin: 0;
      font-size: 17px;
      line-height: 1.55;
    }

    .ai-integrator-page .faq-item p{
      margin: 9px 0 0;
      color: var(--muted);
      font-size: 14.5px;
      line-height: 1.85;
      text-align: justify;
      text-align-last: right;
    }

    @media (max-width: 1080px) {
      .ai-integrator-page .hero-grid, .ai-integrator-page .intro-grid, .ai-integrator-page .module-section, .ai-integrator-page .architecture-grid, .ai-integrator-page .faq-grid, .ai-integrator-page .cta-panel{
        grid-template-columns: 1fr;
      }

      .ai-integrator-page .module-section, .ai-integrator-page .module-section.reverse .module-visual, .ai-integrator-page .module-section.reverse .module-copy{
        order: initial;
      }

      .ai-integrator-page .module-section{
        min-height: 0;
        padding: 56px 0;
      }

      .ai-integrator-page .hero-copy{
        order: 1;
        text-align: center;
      }

      .ai-integrator-page .hero-showcase{
        order: 2;
      }

      .ai-integrator-page .hero-actions{
        justify-content: center;
      }

      .ai-integrator-page .module-visual{
        order: 2;
      }

      .ai-integrator-page .module-copy, .ai-integrator-page .module-section.reverse .module-copy{
        order: 1;
      }

      .ai-integrator-page .cta-actions{
        justify-content: flex-start;
      }
    }

    @media (max-width: 760px) {
      .ai-integrator-page .container{
        width: 100%;
        max-width: 100vw;
        padding-inline: 16px;
      }

      .ai-integrator-page .nav{
        min-height: 66px;
        gap: 12px;
      }

      .ai-integrator-page .nav-links{
        display: none;
      }

      .ai-integrator-page .brand{
        font-size: 18px;
      }

      .ai-integrator-page .brand-mark{
        width: 34px;
        height: 34px;
      }

      .ai-integrator-page .site-header .button{
        min-height: 42px;
        padding-inline: 12px;
        font-size: 14px;
      }

      .ai-integrator-page .module-nav{
        top: 66px;
      }

      .ai-integrator-page .module-strip{
        gap: 8px;
        margin-inline: -1rem;
        padding-inline: 1rem;
        scroll-padding-inline: 1rem;
        scroll-snap-type: x proximity;
      }

      .ai-integrator-page .module-strip a{
        white-space: nowrap;
        scroll-snap-align: start;
      }

      .ai-integrator-page .hero-grid{
        min-height: 0;
        padding-block: 32px 36px;
        gap: 24px;
      }

      .ai-integrator-page .hero h1{
        font-size: clamp(48px, 14vw, 68px);
      }

      .ai-integrator-page .hero-subtitle{
        font-size: clamp(21px, 6.2vw, 29px);
      }

      .ai-integrator-page .hero-lead{
        font-size: 16px;
        line-height: 1.82;
      }

      .ai-integrator-page .hero-actions, .ai-integrator-page .cta-actions{
        align-items: stretch;
      }

      .ai-integrator-page .hero-actions .button, .ai-integrator-page .cta-actions .button{
        width: 100%;
      }

      .ai-integrator-page .glass-stage{
        min-height: 310px;
        padding: 14px;
      }

      .ai-integrator-page .hero-orbit-scene{
        width: min(92%, 285px);
      }

      .ai-integrator-page .hero-core{
        width: 98px;
        height: 98px;
      }

      .ai-integrator-page .hero-core strong{
        font-size: 17px;
      }

      .ai-integrator-page .hero-node{
        width: 72px;
        height: 72px;
        padding: 10px 7px;
      }

      .ai-integrator-page .hero-node i{
        width: 18px;
        height: 18px;
        margin-bottom: 5px;
      }

      .ai-integrator-page .hero-node strong{
        font-size: 10px;
      }

      .ai-integrator-page .hero-node span{
        display: none;
      }

      .ai-integrator-page .intro-band{
        padding-top: 36px;
      }

      .ai-integrator-page .intro-copy h2, .ai-integrator-page .module-copy h2, .ai-integrator-page .architecture-card h2, .ai-integrator-page .cta-panel h2{
        font-size: clamp(24px, 7.2vw, 32px);
      }

      .ai-integrator-page .module-section{
        padding: 36px 0;
      }

      .ai-integrator-page .module-copy p, .ai-integrator-page .faq-copy p, .ai-integrator-page .faq-item p{
        text-align: right;
        text-align-last: auto;
      }

      .ai-integrator-page .concept-frame{
        min-height: 330px;
        padding: 16px;
      }

      .ai-integrator-page .chat-mock{
        width: 100%;
      }

      .ai-integrator-page .software-mock, .ai-integrator-page .hero-control-mock{
        width: 100%;
      }

      .ai-integrator-page .mock-body, .ai-integrator-page .hero-control-mock .mock-body{
        grid-template-columns: 1fr;
      }

      .ai-integrator-page .mock-sidebar{
        display: none;
      }

      .ai-integrator-page .mock-grid, .ai-integrator-page .mock-grid.two, .ai-integrator-page .hero-control-mock .mock-grid, .ai-integrator-page .mock-split{
        grid-template-columns: 1fr;
      }

      .ai-integrator-page .mock-topbar{
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }

      .ai-integrator-page .mock-actions, .ai-integrator-page .mock-tabs, .ai-integrator-page .mock-chip-row{
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
      }

      .ai-integrator-page .chat-mock-top{
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
      }

      .ai-integrator-page .chat-models{
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
      }

      .ai-integrator-page .chat-body{
        grid-template-columns: 1fr;
      }

      .ai-integrator-page .chat-sidebar{
        display: none;
      }

      .ai-integrator-page .chat-thread{
        padding: 14px;
      }

      .ai-integrator-page .chat-question, .ai-integrator-page .chat-answer{
        max-width: 92%;
      }

      .ai-integrator-page .browser-frame img{
        aspect-ratio: 4 / 3;
      }

      .ai-integrator-page .step{
        grid-template-columns: 1fr;
      }

      .ai-integrator-page .footer-row{
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 430px) {
      .ai-integrator-page .container{
        padding-inline: 14px;
      }

      .ai-integrator-page .site-header .button{
        min-height: 40px;
        padding-inline: 10px;
        font-size: 12.5px;
      }

      .ai-integrator-page .brand span{
        font-size: 16px;
      }

      .ai-integrator-page .hero{
        min-height: auto;
      }

      .ai-integrator-page .hero-grid{
        padding-block: 26px 30px;
      }

      .ai-integrator-page .eyebrow{
        max-width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
        font-size: 11.5px;
      }

      .ai-integrator-page .hero h1{
        font-size: clamp(42px, 16vw, 58px);
      }

      .ai-integrator-page .hero-subtitle{
        font-size: clamp(18px, 7vw, 24px);
      }

      .ai-integrator-page .hero-lead{
        font-size: 14.5px;
        line-height: 1.9;
      }

      .ai-integrator-page .glass-stage{
        min-height: 292px;
        border-radius: 22px;
      }

      .ai-integrator-page .hero-orbit-scene{
        width: min(94%, 264px);
      }

      .ai-integrator-page .hero-core{
        width: 82px;
        height: 82px;
        padding: 10px;
      }

      .ai-integrator-page .core-symbol{
        width: 24px;
        height: 24px;
        margin-bottom: 5px;
      }

      .ai-integrator-page .core-symbol::before, .ai-integrator-page .core-symbol::after{
        inset: 5px;
      }

      .ai-integrator-page .hero-core strong{
        font-size: 15px;
      }

      .ai-integrator-page .hero-core span{
        font-size: 9px;
      }

      .ai-integrator-page .hero-node{
        width: 58px;
        height: 58px;
        padding: 7px 5px;
      }

      .ai-integrator-page .hero-node i{
        width: 15px;
        height: 15px;
        margin-bottom: 4px;
      }

      .ai-integrator-page .hero-node strong{
        font-size: 9px;
      }

      .ai-integrator-page .module-copy h2, .ai-integrator-page .faq-copy h2, .ai-integrator-page .architecture-card h2, .ai-integrator-page .cta-panel h2{
        font-size: clamp(22px, 8vw, 28px);
      }

      .ai-integrator-page .module-copy p, .ai-integrator-page .architecture-card p, .ai-integrator-page .cta-panel p{
        font-size: 15px;
      }

      .ai-integrator-page .module-list li{
        padding-right: 28px;
        font-size: 13.8px;
      }

      .ai-integrator-page .chat-question, .ai-integrator-page .chat-answer{
        max-width: 98%;
      }

      .ai-integrator-page .chat-question p, .ai-integrator-page .chat-answer p{
        font-size: 10px;
      }

      .ai-integrator-page .mock-content{
        padding: 12px;
      }

      .ai-integrator-page .mock-card, .ai-integrator-page .mock-kpi, .ai-integrator-page .mock-panel{
        padding: 9px;
      }

      .ai-integrator-page .mock-row{
        grid-template-columns: 1fr auto;
      }

      .ai-integrator-page .mock-row span:nth-child(2){
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .ai-integrator-page *, .ai-integrator-page *::before, .ai-integrator-page *::after{
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important;
      }
    }