/* ==========================================================================
   TECHZILLA — AI SOLUTIONS
   Extends the approved system. No new tokens.
   ========================================================================== */

/* Numbered eyebrow on AI pages */
.ai-num {
  font-family: var(--font-mono); font-weight: 600;
  color: var(--color-accent); background: var(--color-signal);
  padding: .1rem .38rem; border-radius: 4px; margin-right: .1rem;
}

/* Numbered mega-menu links (AI Solutions panel) */
.mega__link--numbered .mega__icon {
  background: var(--color-accent); color: var(--color-signal);
}
.mega__num {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em;
}
.mega__link--numbered:hover .mega__icon { background: var(--grad-brand); color: var(--color-accent); }

/* Mobile submenu "view all" link */
.m-sub__all {
  display: inline-flex !important; align-items: center; gap: .5rem;
  margin-top: .85rem; padding: .6rem 0 !important;
  font-family: var(--font-display); font-weight: 600; font-size: .9375rem;
  color: var(--color-primary-dark) !important;
}
.m-sub__all .arrow { transition: transform var(--dur) var(--ease-out); }
.m-sub__all:hover .arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   FOUR-SOLUTION INDEX
   -------------------------------------------------------------------------- */
.ai-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.ai-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 1.75rem 1.6rem 1.5rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  transition: transform .5s var(--ease-out), border-color .5s var(--ease-out), background .5s var(--ease-out);
}
.ai-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(160deg, rgba(0, 224, 92, .12), transparent 55%, rgba(11, 95, 168, .16));
  transition: opacity .5s var(--ease-out);
}
.ai-card:hover { transform: translateY(-6px); border-color: rgba(0, 224, 92, .35); }
.ai-card:hover::before { opacity: 1; }
.ai-card > * { position: relative; }

.ai-card__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.4rem;
}
.ai-card__num {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; color: var(--color-signal);
}
.ai-card__icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(0, 224, 92, .12); color: var(--color-signal);
  transition: background .5s var(--ease-out), color .5s var(--ease-out), transform .5s var(--ease-out);
}
.ai-card__icon svg { width: 20px; height: 20px; }
.ai-card:hover .ai-card__icon { background: var(--grad-brand); color: var(--color-accent); transform: rotate(-6deg); }

.ai-card__body { flex: 1; }
.ai-card__title {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 1.08rem; letter-spacing: -.02em; line-height: 1.2; color: #fff;
  margin-bottom: .5rem;
}
.ai-card__text { display: block; font-size: .875rem; line-height: 1.55; color: var(--color-on-dark-soft); }

.ai-card__go {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-signal);
}
.ai-card__go .arrow { transition: transform var(--dur) var(--ease-out); }
.ai-card:hover .ai-card__go .arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   AGENT REASONING LOOP
   -------------------------------------------------------------------------- */
.ai-loop { display: grid; gap: .65rem; max-width: 880px; margin-inline: auto; }
.ai-loop__node {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr; gap: 1.1rem; align-items: center;
  padding: 1.15rem 1.4rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-md);
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), border-color .4s var(--ease-out);
  transition-delay: calc(var(--i) * .1s);
}
.ai-loop.is-in .ai-loop__node { opacity: 1; transform: none; }
.ai-loop__node:hover { border-color: rgba(0, 224, 92, .4); }
.ai-loop__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: rgba(0, 224, 92, .12); color: var(--color-signal);
}
.ai-loop__icon svg { width: 20px; height: 20px; }
.ai-loop__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fff; }
.ai-loop__text { font-size: .875rem; color: var(--color-on-dark-soft); margin-top: .15rem; }
.ai-loop__arrow {
  position: absolute; left: 22px; bottom: -.72rem; z-index: 2;
  width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--color-primary);
  transform: rotate(90deg);
}
.ai-loop__arrow svg { width: 15px; height: 15px; }
.ai-loop__foot {
  display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start;
  margin-top: 1.25rem; padding: 1.1rem 1.3rem;
  background: rgba(0, 224, 92, .07);
  border: 1px solid rgba(0, 224, 92, .22);
  border-radius: var(--radius-md);
  font-size: .875rem; line-height: 1.55; color: var(--color-on-dark);
}
.ai-loop__foot svg { width: 22px; height: 22px; color: var(--color-signal); }

/* --------------------------------------------------------------------------
   n8n WORKFLOW CHAIN
   -------------------------------------------------------------------------- */
.wf { max-width: 900px; margin-inline: auto; }
.wf__label, .wf__foot {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-on-dark-soft); text-align: center;
}
.wf__label { margin-bottom: 1.75rem; }
.wf__foot { margin-top: 1.75rem; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: .875rem; }

.wf__chain { display: grid; gap: 1.85rem; }
.wf__node {
  position: relative;
  display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: center;
  padding: 1.15rem 1.4rem;
  background: var(--color-dark-2);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-md);
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out), border-color .4s var(--ease-out);
  transition-delay: calc(var(--i) * .12s);
}
.wf.is-in .wf__node { opacity: 1; transform: none; }
.wf__node:hover { border-color: rgba(0, 224, 92, .45); }

/* Connector line between nodes */
.wf__node:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -1.85rem;
  width: 2px; height: 1.85rem; margin-left: -1px;
  background: linear-gradient(180deg, rgba(0, 224, 92, .5), rgba(11, 95, 168, .5));
}
.wf__port {
  position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--color-dark);
  border: 2px solid var(--color-primary);
}
.wf__port--in { top: -5px; }
.wf__port--out { bottom: -5px; }
.wf__node:first-child .wf__port--in,
.wf__node:last-child .wf__port--out { display: none; }

.wf__icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: var(--color-on-dark);
}
.wf__icon svg { width: 20px; height: 20px; }
.wf__node--trigger .wf__icon { background: rgba(0, 224, 92, .16); color: var(--color-signal); }
.wf__node--ai .wf__icon { background: var(--grad-brand); color: var(--color-accent); }
.wf__node--logic .wf__icon { background: rgba(11, 95, 168, .3); color: #8fc6f5; }

.wf__body { display: grid; gap: .2rem; }
.wf__kind {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-on-dark-soft);
}
.wf__desc { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: #fff; letter-spacing: -.015em; }

/* --------------------------------------------------------------------------
   CHATBOT MOCKUP
   -------------------------------------------------------------------------- */
.chatmock {
  max-width: 620px; margin-inline: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.chatmock__bar {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.35rem;
  background: var(--color-accent);
}
.chatmock__avatar {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; background: var(--grad-brand); color: var(--color-accent);
}
.chatmock__avatar svg { width: 19px; height: 19px; }
.chatmock__bar b { display: block; font-family: var(--font-display); font-size: .95rem; color: #fff; }
.chatmock__bar i {
  display: flex; align-items: center; gap: .4rem;
  font-style: normal; font-size: .75rem; color: var(--color-on-dark-soft);
}
.chatmock__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-signal);
  animation: pulse 2.6s var(--ease-inout) infinite;
}

.chatmock__log { padding: 1.5rem 1.35rem; display: grid; gap: .8rem; background: var(--color-surface); }
.chatmock__msg {
  max-width: 82%; padding: .8rem 1.05rem;
  font-size: .9125rem; line-height: 1.5;
  border-radius: var(--radius-md);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i) * .16s);
}
.chatmock.is-in .chatmock__msg { opacity: 1; transform: none; }
.chatmock__msg--user {
  justify-self: end; background: var(--color-accent); color: #fff;
  border-bottom-right-radius: 5px;
}
.chatmock__msg--bot {
  justify-self: start; background: #fff; color: var(--color-ink);
  border: 1px solid var(--color-line); border-bottom-left-radius: 5px;
}
.chatmock__handover {
  display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: center;
  margin-top: .4rem; padding: .85rem 1.05rem;
  background: var(--color-surface-2); border: 1px dashed rgba(0, 168, 142, .4);
  border-radius: var(--radius-md);
  font-size: .82rem; color: var(--color-primary-dark);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
  transition-delay: calc(var(--i) * .16s);
}
.chatmock.is-in .chatmock__handover { opacity: 1; transform: none; }
.chatmock__handover svg { width: 20px; height: 20px; }
.chatmock__note {
  padding: .9rem 1.35rem; background: #fff;
  border-top: 1px solid var(--color-line-soft);
  font-size: .78rem; color: var(--color-muted); text-align: center;
}

/* --------------------------------------------------------------------------
   CUSTOM AI PIPELINE
   -------------------------------------------------------------------------- */
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.pipe__stage {
  position: relative; padding: 1.75rem 1.5rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i) * .1s);
}
.pipe.is-in .pipe__stage { opacity: 1; transform: none; }
.pipe__stage:not(:last-child)::after {
  content: ""; position: absolute; right: -.8rem; top: 50%;
  width: 10px; height: 11px; margin-top: -5px;
  background: var(--grad-brand);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.pipe__num {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  color: var(--color-signal); display: block; margin-bottom: 1rem;
}
.pipe__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 11px; margin-bottom: 1rem;
  background: rgba(0, 224, 92, .12); color: var(--color-signal);
}
.pipe__icon svg { width: 19px; height: 19px; }
.pipe__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: #fff; margin-bottom: .4rem; }
.pipe__text { font-size: .8375rem; color: var(--color-on-dark-soft); }

/* --------------------------------------------------------------------------
   USE CASES
   -------------------------------------------------------------------------- */
.usecases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.usecase {
  position: relative; padding: 1.75rem 1.6rem;
  background: var(--color-background);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
}
.usecase:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.usecase__num {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  color: var(--color-primary-dark); display: block; margin-bottom: .9rem;
}
.usecase h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.usecase p { font-size: .9rem; color: var(--color-ink-soft); }

/* --------------------------------------------------------------------------
   HONESTY PANEL
   -------------------------------------------------------------------------- */
.ai-honest {
  display: grid; grid-template-columns: 34px 1fr; gap: 1.4rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  background: var(--color-background);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  max-width: 880px;
}
.ai-honest svg { width: 34px; height: 34px; color: var(--color-primary); }
.ai-honest h2 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.7rem); margin-bottom: .9rem; }
.ai-honest p { font-size: 1.0125rem; line-height: 1.65; color: var(--color-ink-soft); }

/* --------------------------------------------------------------------------
   SEVEN-STEP PROCESS
   -------------------------------------------------------------------------- */
.process__track--seven { grid-template-columns: repeat(7, 1fr); gap: 1rem; }
.process__track--seven .step h3 { font-size: 1rem; }
.process__track--seven .step p { font-size: .8125rem; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .process__track--seven { grid-template-columns: repeat(4, 1fr); gap: 2.5rem 1.25rem; padding-top: 0; }
  .process__track--seven .process__line { display: none; }
  .process__track--seven .step__node { position: relative; top: 0; left: 0; margin: 0 0 .9rem; }
}

@media (max-width: 1024px) {
  .ai-index { grid-template-columns: repeat(2, 1fr); }
  .usecases { grid-template-columns: repeat(2, 1fr); }
  .pipe { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
  .pipe__stage:nth-child(2)::after { display: none; }
  .ai-honest { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 640px) {
  .ai-index, .usecases, .pipe { grid-template-columns: 1fr; }
  .pipe__stage::after { display: none !important; }
  .process__track--seven { grid-template-columns: 1fr; gap: 2rem; }
  .chatmock__msg { max-width: 92%; }
  .ai-loop__node { grid-template-columns: 38px 1fr; gap: .85rem; padding: 1rem 1.1rem; }
  .ai-loop__icon { width: 38px; height: 38px; }
  .wf__node { grid-template-columns: 40px 1fr; gap: .85rem; padding: 1rem 1.1rem; }
  .wf__icon { width: 40px; height: 40px; }
}