/* AI agents — teal / turquoise nano field. Scoped: body[data-page="ai"] only. */

body[data-page="ai"] {
  --ai: #144d53;
  --ai-mid: #5eead4;
  --ai-cyan: #5eead4;
  --ai-deep: #0a3d42;
  --ai-ink: #062428;
  --forest: #144d53;
  --forest-deep: #0e3a3f;
  --line: rgba(20, 77, 83, 0.16);
  --glow: 0 10px 28px rgba(20, 77, 83, 0.16), 0 0 0 1px rgba(20, 77, 83, 0.06);
  --glow-soft: 0 8px 22px rgba(20, 77, 83, 0.1);
  position: relative;
  overflow-x: hidden;
  background-image:
    radial-gradient(900px 480px at 100% 18%, rgba(45, 212, 192, 0.12), transparent 55%),
    radial-gradient(700px 420px at 0% 62%, rgba(18, 184, 196, 0.07), transparent 50%);
}

html[data-theme="dark"] body[data-page="ai"] {
  --forest: #8eb8bc;
  --forest-deep: #144d53;
  --line: rgba(142, 184, 188, 0.18);
  --glow: 0 12px 32px rgba(0, 0, 0, 0.28);
  --glow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);
  background-image:
    radial-gradient(900px 480px at 100% 18%, rgba(45, 212, 192, 0.1), transparent 55%),
    radial-gradient(700px 420px at 0% 62%, rgba(18, 184, 196, 0.08), transparent 50%);
}

body[data-page="ai"] .site-header,
body[data-page="ai"] main,
body[data-page="ai"] .site-footer {
  position: relative;
  z-index: 1;
}

/* —— Hero: muted looping video, cover, dark overlay for text —— */
body[data-page="ai"] .app-hero {
  isolation: isolate;
  background: #071416;
}
body[data-page="ai"] .app-hero > *:not(.ai-hero-field) {
  position: relative;
  z-index: 2;
}
body[data-page="ai"] .app-hero > .ai-hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ai-hero-video,
video.hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  opacity: 0.62;
}
.ai-hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(4, 14, 16, 0.78) 0%,
    rgba(6, 24, 28, 0.5) 46%,
    rgba(8, 32, 36, 0.28) 100%
  );
}
.ai-hero-tex {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  max-width: none;
  object-fit: cover;
  opacity: 0.18;
  mix-blend-mode: screen;
  animation: ai-field-drift 36s ease-in-out infinite;
}
.ai-hero-waves {
  position: absolute;
  inset: -12% -8%;
  width: 116%;
  height: 124%;
  opacity: 0.28;
  animation: ai-waves-drift 28s ease-in-out infinite;
}
@keyframes ai-field-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-2.2%, 1.6%, 0) scale(1.04); }
}
@keyframes ai-waves-drift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.24; }
  50% { transform: translate3d(2.4%, -1.4%, 0); opacity: 0.36; }
}

body[data-page="ai"] .app-hero .kicker { color: rgba(165, 240, 236, 0.84); }
body[data-page="ai"] .app-hero .kicker a { color: #e8fffc; }
body[data-page="ai"] .app-hero .btn-dark { background: #fff; color: #0a2428; }
body[data-page="ai"] .app-hero .btn-line:hover {
  border-color: rgba(94, 234, 212, 0.7);
  box-shadow: 0 8px 22px rgba(18, 184, 196, 0.18);
}

/* Light page: dark teal only. Bright mint stays on dark tiles. */
body[data-page="ai"] .eyebrow { color: #144d53; }
body[data-page="ai"] .btn-primary {
  background: #144d53;
  color: #fff;
  box-shadow: 0 10px 26px rgba(20, 77, 83, 0.24);
}
body[data-page="ai"] .btn-primary:hover { background: #0e3a3f; }
body[data-page="ai"] .btn-line {
  color: #144d53;
  border-color: rgba(20, 77, 83, 0.28);
}
body[data-page="ai"] .btn-line:hover {
  border-color: #144d53;
  box-shadow: 0 8px 22px rgba(20, 77, 83, 0.12);
}
body[data-page="ai"] .app-hero .btn-line {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
body[data-page="ai"] .app-hero .btn-line:hover {
  border-color: rgba(94, 234, 212, 0.7);
  box-shadow: 0 8px 22px rgba(18, 184, 196, 0.18);
}
html[data-theme="dark"] body[data-page="ai"] .eyebrow { color: #8eb8bc; }
html[data-theme="dark"] body[data-page="ai"] .btn-line {
  color: #8eb8bc;
  border-color: rgba(142, 184, 188, 0.35);
}

body[data-page="ai"] .price.popular {
  background: linear-gradient(125deg, #071012 0%, #0e2e32 68%, #145056 100%);
}
body[data-page="ai"] .price.popular .tag { color: rgba(165, 240, 236, 0.72); }

body[data-page="ai"] .dir-tabs {
  background: linear-gradient(160deg, #071416 0%, #0f2c30 100%);
  box-shadow: 0 18px 44px rgba(6, 36, 40, 0.28);
}
body[data-page="ai"] .dir-tabs-nav button:hover {
  border-color: rgba(94, 234, 212, 0.45);
}
body[data-page="ai"] .dir-tabs-nav button.is-on {
  background: #fff;
  color: #0a2428;
  border-color: #fff;
}
body[data-page="ai"] .dir-tabs-panel.is-on {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(45, 212, 192, 0.2);
}
body[data-page="ai"] .dir-tabs-panel li::before {
  background: #5eead4;
}
body[data-page="ai"] .dir-tabs-ex { color: #5eead4; }

body[data-page="ai"] .app-steps .num {
  background: #144d53;
  color: #fff;
}

body[data-page="ai"] .lead a,
body[data-page="ai"] .feature a,
body[data-page="ai"] .faq-a a,
body[data-page="ai"] .contact a {
  color: var(--forest);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body[data-page="ai"] .price.glass .tag { color: var(--forest); }

body[data-page="ai"] input,
body[data-page="ai"] textarea {
  accent-color: var(--ai);
}

/* —— Side floats: cream-glass-amber, keep motion —— */
.ai-scape {
  position: absolute;
  inset: 0 0 auto;
  height: 3200px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ai-scape-el {
  position: absolute;
  will-change: transform;
}
.ai-scape-el img {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  filter:
    saturate(0.52)
    hue-rotate(152deg)
    brightness(1.06)
    drop-shadow(0 22px 36px rgba(18, 42, 58, 0.22));
  animation: ai-drift 9s ease-in-out infinite;
}
.ai-scape-el.is-lattice {
  width: min(440px, 42vw);
  right: -8%;
  top: 620px;
}
.ai-scape-el.is-glass {
  width: min(280px, 32vw);
  left: -6%;
  top: 1280px;
}
.ai-scape-el.is-glass img { animation-delay: -3s; }
.ai-scape-el.is-cells {
  width: min(250px, 28vw);
  right: 1%;
  top: 2100px;
}
.ai-scape-el.is-cells img { animation-delay: -5.5s; }

@keyframes ai-drift {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}

.ai-bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 12px;
}
.ai-tile {
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.ai-tile h3 { margin: 0 0 10px; font-size: 1.08rem; }
.ai-tile p { margin: 0; color: var(--copy); font-size: 0.94rem; line-height: 1.55; font-weight: 500; }
.ai-tile.is-wide,
.ai-tile.is-mint {
  padding: 28px 26px;
  background: linear-gradient(155deg, #071416 0%, #0e2e32 70%, #145056 100%);
  border-color: #0e2e32;
  color: #fff;
  box-shadow: 0 18px 40px rgba(6, 36, 40, 0.22);
}
.ai-tile.is-wide {
  grid-row: span 2;
}
.ai-tile.is-wide h3,
.ai-tile.is-mint h3 { font-size: 1.28rem; color: #fff; }
.ai-tile.is-wide p,
.ai-tile.is-mint p { color: rgba(232, 255, 252, 0.78); font-size: 1.02rem; }
.ai-tile.is-ink,
.ai-tile.is-soft {
  background: rgba(20, 77, 83, 0.08);
  border-color: rgba(20, 77, 83, 0.14);
  color: inherit;
}
.ai-tile.is-ink h3,
.ai-tile.is-ink p { color: inherit; }

.ai-tile.glow-follow,
.ai-rules-board.glow-follow,
.ai-price-main.glow-follow { position: relative; overflow: hidden; }
.ai-tile.glow-follow .glow,
.ai-rules-board.glow-follow .glow,
.ai-price-main.glow-follow .glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  pointer-events: none;
  left: var(--mx, 50%);
  top: var(--my, 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s ease;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.42) 0%, rgba(94, 234, 212, 0) 70%);
  filter: blur(2px);
  z-index: 0;
}
.ai-tile.glow-follow:hover .glow,
.ai-rules-board.glow-follow:hover .glow,
.ai-price-main.glow-follow:hover .glow { opacity: 1; }
.ai-tile.glow-follow > *:not(.glow),
.ai-rules-board.glow-follow > *:not(.glow),
.ai-price-main.glow-follow > *:not(.glow) { position: relative; z-index: 1; }

.ai-rules-board {
  display: grid;
  gap: 0;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(155deg, #071416 0%, #0e2e32 70%, #145056 100%);
  box-shadow: 0 18px 40px rgba(6, 36, 40, 0.22);
}
.ai-rules-board article {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-rules-board article:first-child { border-top: 0; }
.ai-rules-board .num {
  font-size: 1.2rem;
  font-weight: 800;
  color: #5eead4;
  line-height: 1.1;
}
.ai-rules-board h3 { margin: 0 0 6px; font-size: 1.02rem; color: #fff; }
.ai-rules-board p { margin: 0; color: rgba(232, 255, 252, 0.7); font-size: 0.92rem; line-height: 1.5; }

.ai-price-board { display: grid; gap: 14px; }
.ai-price-main {
  padding: 32px 34px;
  border-radius: 28px;
}
.ai-price-main .amount { font-size: 2.1rem; }
.ai-price-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
  margin: 10px 0 20px;
}
.ai-price-cols ul { margin-bottom: 0; }
.ai-price-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 900px) {
  .ai-bento { grid-template-columns: 1fr 1fr; }
  .ai-tile.is-wide { grid-row: auto; }
  .ai-price-cols, .ai-price-side { grid-template-columns: 1fr; }
  .ai-scape-el.is-lattice { width: 200px; right: -40px; top: 520px; opacity: 0.55; }
  .ai-scape-el.is-glass { width: 140px; left: -36px; top: 1100px; opacity: 0.45; }
  .ai-scape-el.is-cells { display: none; }
  .ai-hero-tex { opacity: 0.22; }
  .ai-hero-waves { opacity: 0.2; }
}
@media (max-width: 560px) {
  .ai-bento { grid-template-columns: 1fr; }
  .ai-rules-board article { grid-template-columns: 40px 1fr; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-hero-tex,
  .ai-hero-waves,
  .ai-scape-el img {
    animation: none;
  }
  .ai-hero-video,
  video.hero { display: none; }
}