/* Axomble service-page section library. Tokens only — see includes/style.php. */

/* ---------- shared ---------- */
.ax-section { padding: var(--ax-section) 0; position: relative; }
.ax-section--soft { background: var(--ax-bg-soft); }
.ax-section-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.ax-section-head h2 { font-family: var(--ax-font-display); font-size: var(--ax-fs-h2); line-height: var(--ax-lh-heading); letter-spacing: var(--ax-track-tight); color: var(--ax-ink); margin: 0 0 16px; }
.ax-section-head p { font-size: var(--ax-fs-lead); line-height: var(--ax-lh-body); color: var(--ax-ink-soft); margin: 0; }
.ax-kicker { font-family: var(--ax-font-mono); font-size: var(--ax-fs-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ax-primary); display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.ax-kicker::before { content: ""; width: 24px; height: 1px; background: var(--ax-primary); }
.ax-lead { font-family: var(--ax-font-serif); font-style: italic; font-size: var(--ax-fs-lead); line-height: var(--ax-lh-body); color: var(--ax-ink-soft); }
.ax-link-arrow { font-weight: 600; color: var(--ax-ink); text-decoration: none; border-bottom: 1px solid var(--ax-ink-faint); transition: border-color var(--ax-speed) var(--ax-ease), color var(--ax-speed) var(--ax-ease); }
.ax-link-arrow::after { content: " \2192"; }
.ax-link-arrow:hover { color: var(--ax-primary); border-color: var(--ax-primary); }
.ax-glass { background: var(--ax-light-soft); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--ax-ink-faint); border-radius: var(--ax-radius-lg); box-shadow: var(--ax-shadow-card); }

/* ---------- reveal ----------
   No CSS hidden state: GSAP gsap.from() animates elements in, so content is
   visible by default (JS off / reduced motion = fully readable page). */

/* ---------- hero (full-width, animated visual — no lead form) ---------- */
.ax-hero { position: relative; overflow: hidden; background: var(--ax-gradient-hero); padding: var(--ax-hero-pad) 0 var(--ax-section-sm); }
.ax-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; z-index: 2; }
.ax-hero h1 { font-family: var(--ax-font-display); font-size: var(--ax-fs-h1); line-height: var(--ax-lh-tight); letter-spacing: var(--ax-track-tight); color: var(--ax-ink); margin: 0 0 20px; }
.ax-hero .ax-lead { margin: 0 0 28px; max-width: 34em; }
.ax-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 28px; }
.ax-hero-visual { position: relative; height: 520px; align-self: start; }
.ax-hero-card { position: absolute; padding: 18px 22px; background: var(--ax-light-soft); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--ax-ink-faint); border-radius: var(--ax-radius); box-shadow: var(--ax-shadow-card); }
.ax-hero-card .ax-hero-card-label { font-family: var(--ax-font-mono); font-size: var(--ax-fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ax-ink-dim); margin: 0 0 6px; }
.ax-hero-card .ax-hero-card-value { font-family: var(--ax-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ax-fs-h3); font-weight: 600; color: var(--ax-ink); margin: 0; }
.ax-hero-card .ax-hero-card-value strong { color: var(--ax-primary); font-weight: 600; }
.ax-hero-card--bar { display: flex; align-items: center; gap: 10px; font-family: var(--ax-font-mono); font-size: var(--ax-fs-small); color: var(--ax-ink); }
.ax-hero-card--bar .ax-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ax-primary); }
/* Trust strip — partner SVGs ship white-filled with no intrinsic size;
   constrain and re-ink them for the light hero (all .ax-hero pages) */
.ax-hero .iconwrp { margin-top: 4px; }
.ax-hero .iconwrp ul { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.ax-hero .iconwrp ul li { margin: 0; display: inline-flex; }
.ax-hero .iconwrp ul li img { height: 30px; width: auto; max-width: 110px; filter: brightness(0) opacity(0.4); transition: filter var(--ax-speed) var(--ax-ease); }
.ax-hero .iconwrp ul li img:hover { filter: brightness(0) opacity(0.75); }
.ax-trust-caption { font-family: var(--ax-font-mono); font-size: var(--ax-fs-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ax-ink-dim); margin: 0 0 14px; }
.ax-orb { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.45; pointer-events: none; z-index: 1; animation: ax-orb-drift 16s ease-in-out infinite alternate; }
.ax-orb--pink { background: var(--ax-pink); }
.ax-orb--yellow { background: var(--ax-yellow); animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes ax-orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(48px, -36px, 0) scale(1.18); }
}
@media (max-width: 991px) {
  .ax-hero-grid { grid-template-columns: 1fr; }
  .ax-hero-visual { height: 340px; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .ax-orb { animation: none; } }

/* ---------- bento ---------- */
.ax-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.ax-bento-card { grid-column: span 2; background: var(--ax-bg); border: 1px solid var(--ax-ink-faint); border-radius: var(--ax-radius-lg); box-shadow: var(--ax-shadow-card); padding: 28px; transition: transform var(--ax-speed) var(--ax-ease), box-shadow var(--ax-speed) var(--ax-ease); }
.ax-bento-card:hover { transform: translateY(-4px); box-shadow: var(--ax-shadow-hover); }
.ax-bento-card--wide { grid-column: span 3; }
.ax-bento-card--hero { grid-column: span 4; background: var(--ax-bg-dark); background-image: var(--ax-dots-dark); background-size: var(--ax-dots-size); }
.ax-bento-card h3 { font-family: var(--ax-font-display); font-size: var(--ax-fs-h3); color: var(--ax-ink); margin: 16px 0 8px; }
.ax-bento-card p { font-size: var(--ax-fs-body); line-height: var(--ax-lh-body); color: var(--ax-ink-soft); margin: 0; }
/* Variant colors AFTER the base rules; body.hompg selector outguns the
   theme's `body.hompg h3 { color: ink }` heading rule on the dark card */
.ax-bento-card--hero h3, body.hompg .ax-bento-card--hero h3 { color: var(--ax-light); }
.ax-bento-card--hero p, body.hompg .ax-bento-card--hero p { color: var(--ax-light-soft); }
.ax-icon-chip-lg { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--ax-radius-sm); background: var(--ax-bg-soft); border: 1px solid var(--ax-ink-faint); color: var(--ax-primary); }
.ax-bento-card--hero .ax-icon-chip-lg { background: var(--ax-light-faint); border-color: var(--ax-light-faint); color: var(--ax-yellow); }
@media (max-width: 1199px) { .ax-bento-card, .ax-bento-card--wide { grid-column: span 3; } .ax-bento-card--hero { grid-column: span 6; } }
@media (max-width: 767px) { .ax-bento { grid-template-columns: 1fr; } .ax-bento-card, .ax-bento-card--wide, .ax-bento-card--hero { grid-column: span 1; } }

/* ---------- process ---------- */
.ax-process { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.ax-process-rail { position: sticky; top: 120px; }
.ax-process-rail h2 { font-family: var(--ax-font-display); font-size: var(--ax-fs-h2); line-height: var(--ax-lh-heading); letter-spacing: var(--ax-track-tight); color: var(--ax-ink); margin: 0 0 16px; }
.ax-process-rail p { font-size: var(--ax-fs-body); line-height: var(--ax-lh-body); color: var(--ax-ink-soft); }
.ax-process-steps { display: flex; flex-direction: column; gap: 0; counter-reset: ax-step; }
.ax-process-step { position: relative; padding: 28px 0 28px 72px; border-top: 1px solid var(--ax-ink-faint); counter-increment: ax-step; }
.ax-process-step:last-child { border-bottom: 1px solid var(--ax-ink-faint); }
.ax-process-step::before { content: counter(ax-step, decimal-leading-zero); position: absolute; left: 0; top: 28px; font-family: var(--ax-font-mono); font-size: var(--ax-fs-h4); color: var(--ax-primary); }
.ax-process-step h3 { font-family: var(--ax-font-display); font-size: var(--ax-fs-h3); color: var(--ax-ink); margin: 0 0 8px; }
.ax-process-step p { font-size: var(--ax-fs-body); line-height: var(--ax-lh-body); color: var(--ax-ink-soft); margin: 0; }
@media (max-width: 991px) { .ax-process { grid-template-columns: 1fr; } .ax-process-rail { position: static; } }

/* ---------- stats ---------- */
.ax-statband { background: var(--ax-bg-dark); background-image: var(--ax-dots-dark); background-size: var(--ax-dots-size); }
.ax-statband .ax-section-head h2, .ax-statband .ax-section-head p { color: var(--ax-light); }
.ax-statband .ax-section-head p { color: var(--ax-light-soft); }
.ax-statband-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; text-align: center; }
.ax-statband-value { font-family: var(--ax-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ax-fs-h1); font-weight: 600; color: var(--ax-yellow); display: block; }
.ax-statband-label { font-size: var(--ax-fs-body); color: var(--ax-light-soft); }

/* ---------- marquee ---------- */
.ax-ticker { overflow: hidden; padding: 28px 0; border-top: 1px solid var(--ax-ink-faint); border-bottom: 1px solid var(--ax-ink-faint); background: var(--ax-bg-soft); }
.ax-ticker-track { display: flex; width: max-content; animation: ax-ticker-scroll 36s linear infinite; }
.ax-ticker:hover .ax-ticker-track, .ax-ticker:focus-within .ax-ticker-track { animation-play-state: paused; }
.ax-ticker-group { display: flex; align-items: center; gap: 48px; padding-right: 48px; }
.ax-ticker-group span { font-family: var(--ax-font-mono); font-size: var(--ax-fs-body); color: var(--ax-ink-dim); white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.ax-ticker-group span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ax-primary); opacity: 0.6; }
@keyframes ax-ticker-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ax-ticker-track { animation: none; width: auto; flex-wrap: wrap; }
  .ax-ticker-group[aria-hidden="true"] { display: none; }
  .ax-ticker-group { flex-wrap: wrap; row-gap: 16px; }
}

/* ---------- prose (SEO longform) ---------- */
.ax-prose { display: grid; grid-template-columns: minmax(240px, 4fr) 8fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.ax-prose-rail { position: sticky; top: 120px; }
.ax-prose-rail h2 { font-family: var(--ax-font-display); font-size: var(--ax-fs-h2); line-height: var(--ax-lh-heading); letter-spacing: var(--ax-track-tight); color: var(--ax-ink); margin: 0; }
.ax-prose-body { max-width: 72ch; }
.ax-prose-body h3 { font-family: var(--ax-font-display); font-size: var(--ax-fs-h3); color: var(--ax-ink); margin: 32px 0 12px; }
.ax-prose-body h3:first-child { margin-top: 0; }
.ax-prose-body p { font-size: 17px; line-height: var(--ax-lh-body); color: var(--ax-ink-soft); margin: 0 0 16px; }
.ax-prose-body ul { margin: 0 0 16px; padding-left: 22px; }
.ax-prose-body li { font-size: 17px; line-height: var(--ax-lh-body); color: var(--ax-ink-soft); margin-bottom: 8px; }
.ax-prose-body a { color: var(--ax-primary); text-decoration: none; border-bottom: 1px solid var(--ax-ink-faint); }
.ax-prose-body a:hover { border-color: var(--ax-primary); }
@media (max-width: 991px) { .ax-prose { grid-template-columns: 1fr; } .ax-prose-rail { position: static; } }

/* ---------- faq ---------- */
.ax-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ax-faq-item { background: var(--ax-bg); border: 1px solid var(--ax-ink-faint); border-radius: var(--ax-radius); box-shadow: var(--ax-shadow-card); overflow: hidden; }
.ax-faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-family: var(--ax-font-display); font-size: var(--ax-fs-h4); font-weight: 700; color: var(--ax-ink); }
.ax-faq-item summary::-webkit-details-marker { display: none; }
.ax-faq-item summary::after { content: "+"; font-family: var(--ax-font-mono); font-size: 22px; color: var(--ax-primary); flex-shrink: 0; transition: transform var(--ax-speed) var(--ax-ease); }
.ax-faq-item[open] summary::after { transform: rotate(45deg); }
.ax-faq-item summary:focus-visible { outline: 2px solid var(--ax-primary); outline-offset: -2px; }
.ax-faq-answer { padding: 0 24px 20px; font-size: var(--ax-fs-body); line-height: var(--ax-lh-body); color: var(--ax-ink-soft); }
.ax-faq-answer p { margin: 0 0 12px; }
.ax-faq-answer p:last-child { margin-bottom: 0; }

/* ---------- cta panel ---------- */
.ax-cta-panel-band { background: var(--ax-gradient-hero); padding: var(--ax-section-sm) 0; }
.ax-cta-panel { max-width: 880px; margin: 0 auto; text-align: center; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); }
.ax-cta-panel h2 { font-family: var(--ax-font-display); font-size: var(--ax-fs-h2); letter-spacing: var(--ax-track-tight); color: var(--ax-ink); margin: 0 0 12px; }
.ax-cta-panel p { font-size: var(--ax-fs-lead); line-height: var(--ax-lh-body); color: var(--ax-ink-soft); margin: 0 0 28px; }

/* ---------- hero pipeline (vertical status stack, git-graph style) ---------- */
.ax-hero-visual--pipeline { height: auto; display: flex; justify-content: flex-end; }
.ax-pipe { position: relative; display: flex; flex-direction: column; gap: 18px; padding-left: 34px; width: 100%; max-width: 400px; }
.ax-pipe::before { content: ""; position: absolute; left: 12px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--ax-pink), var(--ax-primary) 55%, var(--ax-ink-faint)); opacity: 0.55; }
.ax-pipe::after { content: ""; position: absolute; left: 9px; top: 6%; width: 8px; height: 8px; border-radius: 50%; background: var(--ax-primary); box-shadow: 0 0 12px rgba(212, 17, 80, 0.65); animation: ax-pipe-pulse 3.8s ease-in-out infinite; }
@keyframes ax-pipe-pulse {
  0% { top: 4%; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 92%; opacity: 0; }
}
.ax-pipe-stage { position: relative; }
.ax-pipe-stage::before { content: ""; position: absolute; left: -27px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--ax-bg); border: 2px solid var(--ax-primary); box-shadow: 0 0 0 4px rgba(212, 17, 80, 0.1); z-index: 1; }
.ax-pipe-stage--shift { margin-left: 26px; }
.ax-pipe-stage--shift::before { left: -53px; } /* keep the dot on the rail when the card shifts */
.ax-pipe .ax-hero-card { position: static; }
.ax-pipe .ax-hero-card-value { font-size: 17px; }
@media (max-width: 991px) {
  .ax-hero-visual--pipeline { height: auto; margin-top: 24px; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .ax-pipe::after { animation: none; opacity: 0; } }

/* ---------- hero visual variants (one concept per service family) ---------- */

/* Wave shader hero — ax-wave.js panel + floating stat chips */
.ax-hero-visual--shader { height: 520px; }
.ax-hero-visual--shader .ax-shader-panel { height: 100%; aspect-ratio: auto; }
.ax-hero-visual--shader .ax-hero-card { z-index: 1; }
@media (max-width: 991px) { .ax-hero-visual--shader { height: 380px; } }

/* Chat hero — agent conversation that plays on load */
.ax-hero-visual--chat { height: auto; display: flex; justify-content: flex-end; }
.ax-chat { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; }
.ax-chat-msg { max-width: 88%; padding: 14px 18px; border-radius: 18px; font-size: 15px; line-height: 1.55; box-shadow: var(--ax-shadow-card); opacity: 0; transform: translateY(14px) scale(0.97); animation: ax-pop-in 0.5s var(--ax-ease) forwards; }
.ax-chat-msg--user { align-self: flex-end; background: var(--ax-bg-dark); color: var(--ax-light); border-bottom-right-radius: 6px; }
.ax-chat-msg--bot { align-self: flex-start; background: var(--ax-light-soft); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--ax-ink-faint); color: var(--ax-ink); border-bottom-left-radius: 6px; }
.ax-chat-meta { font-family: var(--ax-font-mono); font-size: var(--ax-fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ax-ink-dim); margin: 0; opacity: 0; animation: ax-pop-in 0.5s var(--ax-ease) forwards; }
.ax-chat-typing { display: inline-flex; gap: 5px; align-items: center; }
.ax-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ax-ink-dim); animation: ax-typing 1.2s ease-in-out infinite; }
.ax-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.ax-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ax-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 991px) { .ax-hero-visual--chat { justify-content: flex-start; margin-top: 24px; } }

/* Terminal hero — dark mono window, lines type in on load */
.ax-hero-visual--term { height: auto; display: flex; align-items: center; justify-content: flex-end; }
.ax-term { width: 100%; max-width: 440px; border-radius: var(--ax-radius); background: var(--ax-bg-dark); box-shadow: 0 0 0 1px rgba(41, 0, 41, 0.2), 0 24px 48px -16px rgba(36, 0, 41, 0.4); overflow: hidden; font-family: var(--ax-font-mono); font-size: 13.5px; }
.ax-term-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--ax-light-faint); }
.ax-term-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--ax-light-faint); }
.ax-term-bar span:first-child { background: var(--ax-primary); }
.ax-term-bar span:nth-child(2) { background: var(--ax-yellow); opacity: 0.7; }
.ax-term-title { margin: 0 0 0 auto; font-size: 11px; letter-spacing: 0.1em; color: var(--ax-light-dim); }
.ax-term-body { padding: 20px 22px 24px; }
.ax-term-line { color: var(--ax-light-soft); margin: 0 0 10px; opacity: 0; transform: translateY(6px); animation: ax-pop-in 0.4s var(--ax-ease) forwards; }
.ax-term-line:last-child { margin-bottom: 0; }
.ax-term-line--cmd::before { content: "$ "; color: var(--ax-pink); }
.ax-term-line--out { color: var(--ax-light-dim); }
.ax-term-line--ok { color: var(--ax-yellow); }
.ax-term-caret { display: inline-block; width: 8px; height: 15px; margin-left: 2px; vertical-align: text-bottom; background: var(--ax-pink); animation: ax-caret 1.1s steps(1) infinite; }
@keyframes ax-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (max-width: 991px) { .ax-hero-visual--term { justify-content: flex-start; margin-top: 24px; } }

/* Phone hero — device frame with skeleton app UI */
.ax-hero-visual--app { height: auto; display: flex; justify-content: center; align-items: center; position: relative; }
.ax-phone { position: relative; width: 232px; border-radius: 38px; background: var(--ax-bg-dark); padding: 10px; box-shadow: 0 0 0 1px rgba(41, 0, 41, 0.2), 0 32px 56px -20px rgba(36, 0, 41, 0.45); }
.ax-phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 74px; height: 20px; border-radius: 12px; background: var(--ax-bg-dark); z-index: 2; }
.ax-phone-screen { border-radius: 29px; background: var(--ax-bg); overflow: hidden; height: 452px; padding: 52px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.ax-phone-blk { border-radius: 10px; background: var(--ax-bg-soft); border: 1px solid var(--ax-ink-faint); min-height: 46px; opacity: 0; transform: translateY(10px); animation: ax-pop-in 0.5s var(--ax-ease) forwards; }
.ax-phone-blk--hero { min-height: 118px; background: linear-gradient(120deg, var(--ax-yellow-soft), #ffe9f4 70%, #ffd3e8); border: none; }
.ax-phone-blk--row { display: flex; gap: 10px; background: none; border: none; min-height: 64px; }
.ax-phone-blk--row i { flex: 1; border-radius: 10px; background: var(--ax-bg-soft); border: 1px solid var(--ax-ink-faint); }
.ax-phone-bar { margin-top: auto; display: flex; justify-content: space-around; align-items: center; border-radius: 12px; background: var(--ax-bg-dark); min-height: 46px; opacity: 0; animation: ax-pop-in 0.5s var(--ax-ease) forwards; }
.ax-phone-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--ax-light-dim); }
.ax-phone-bar i:first-child { background: var(--ax-pink); }
.ax-hero-visual--app .ax-hero-card { position: absolute; z-index: 2; }
@media (max-width: 991px) { .ax-hero-visual--app { margin-top: 24px; } }

/* Browser hero — window with layout blocks assembling */
.ax-hero-visual--browser { height: auto; display: flex; align-items: center; justify-content: flex-end; }
.ax-browser { width: 100%; max-width: 470px; border-radius: var(--ax-radius); background: var(--ax-bg); border: 1px solid var(--ax-ink-faint); box-shadow: var(--ax-shadow-hover); overflow: hidden; }
.ax-browser-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--ax-bg-soft); border-bottom: 1px solid var(--ax-ink-faint); }
.ax-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ax-ink-faint); }
.ax-browser-bar i:first-child { background: var(--ax-primary); }
.ax-browser-url { flex: 1; margin-left: 6px; padding: 5px 12px; border-radius: var(--ax-radius-pill); background: var(--ax-bg); border: 1px solid var(--ax-ink-faint); font-family: var(--ax-font-mono); font-size: 11px; color: var(--ax-ink-dim); }
.ax-browser-body { padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ax-browser-blk { border-radius: 8px; background: var(--ax-bg-soft); border: 1px solid var(--ax-ink-faint); min-height: 54px; opacity: 0; transform: translateY(10px); animation: ax-pop-in 0.5s var(--ax-ease) forwards; }
.ax-browser-blk--hero { grid-column: span 3; min-height: 104px; background: linear-gradient(120deg, var(--ax-yellow-soft), #ffe9f4 65%, #ffd3e8); border: none; }
.ax-browser-blk--wide { grid-column: span 2; }
@media (max-width: 991px) { .ax-hero-visual--browser { justify-content: flex-start; margin-top: 24px; } }

/* Shared entrance + reduced-motion for all variants */
@keyframes ax-pop-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ax-chat-msg, .ax-chat-meta, .ax-term-line, .ax-phone-blk, .ax-phone-bar, .ax-browser-blk { animation: none; opacity: 1; transform: none; }
  .ax-chat-typing span, .ax-term-caret { animation: none; }
}

/* ---------- flowline (scroll-drawn spine connecting sections; built by ax-scroll.js) ---------- */
.ax-flowline { position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 2; }
/* Full-bleed / centered-content sections sit above the flowline — the
   line passes underneath instead of crossing their content */
.portfoliowrp, .client-logowrp { position: relative; z-index: 3; }
.ax-flowline svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ax-flowline-track { fill: none; stroke: var(--ax-ink-faint); stroke-width: 2; }
.ax-flowline-draw { fill: none; stroke: var(--ax-primary); stroke-width: 2; stroke-linecap: round; }
.ax-flowline-node circle { fill: var(--ax-bg); stroke: rgba(41, 0, 41, 0.25); stroke-width: 2; transition: stroke var(--ax-speed) var(--ax-ease), fill var(--ax-speed) var(--ax-ease); }
.ax-flowline-node text { font-family: var(--ax-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ax-primary); opacity: 0; transition: opacity var(--ax-speed-slow) var(--ax-ease); }
.ax-flowline-node.is-on circle { stroke: var(--ax-primary); fill: var(--ax-primary); }
.ax-flowline-node.is-on text { opacity: 0.85; }
.ax-flowline-tip { fill: var(--ax-primary); filter: drop-shadow(0 0 6px rgba(212, 17, 80, 0.55)); }