:root{--wb-primary:#6366f1;--wb-bg:#ffffff;--wb-text:#0f172a;--wb-font:'Inter', -apple-system, BlinkMacSystemFont, sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--wb-font);color:var(--wb-text);background:var(--wb-bg);line-height:1.6}
.wb-container{max-width:1200px;margin:0 auto;padding:0 20px}
.wb-main{min-height:100vh}
.wb-section{padding:40px 0}
.wb-text-center{text-align:center}
.wb-btn{display:inline-block;padding:12px 28px;border-radius:6px;text-decoration:none;font-weight:600;cursor:pointer;border:none;font-size:1rem;transition:opacity .2s}
.wb-btn:hover{opacity:.85}
.wb-btn-primary{background:var(--wb-primary);color:#fff}
.wb-btn-secondary{background:transparent;color:var(--wb-primary);border:2px solid var(--wb-primary)}
.wb-site-nav,.wb-navbar{padding:16px 0;border-bottom:1px solid rgba(0,0,0,.1)}
.wb-navbar-inner{display:flex;align-items:center;justify-content:space-between}
.wb-navbar-logo{font-size:1.25rem;font-weight:700}
.wb-navbar-menu{display:flex;list-style:none;gap:24px}
.wb-navbar-menu a{text-decoration:none;color:inherit;font-weight:500}
/* HIDDEN EVERYWHERE UNTIL THE NARROW QUERY BELOW TURNS IT ON. A bar that did
   not ask to collapse never draws this element at all, so the rule costs those
   pages nothing; a bar that did must not grow a second menu control on a
   desktop, which is the one thing this feature promised not to touch. */
.wb-navbar-toggle{display:none;align-items:center;justify-content:center;padding:8px;background:none;border:0;color:inherit;cursor:pointer}
.wb-hero{padding:80px 0;text-align:center}
.wb-hero h1{font-size:3rem;margin-bottom:16px}
.wb-hero-subtitle{font-size:1.25rem;opacity:.8;margin-bottom:32px}
/* THE PAGE IS A 12-COLUMN GRID. A block says how many it takes; taking all 12
   is what a header or a footer is. The two --span values are computed in PHP
   (see renderColumns) rather than by css arithmetic, because `round()` in a
   grid-column is not something every browser this catalog serves can do. */
.wb-columns{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.wb-column{min-width:0;grid-column:span var(--wb-span,12)}
/* A BLOCK INSIDE A BOX IS NOT A BAND, and this is the rule that says so.
   Every block draws itself as `.wb-section` round a `.wb-container` - 40px of
   air above and below, and a gutter sized for a 1200px page. On the PAGE that
   is exactly right: the air is what holds one band off the next. Nested, it is
   the defect that made built pages look stretched. A column holding a heading,
   two paragraphs and a button carried 240px of padding nobody asked for, and
   the container's 20px gutter was being taken out of a column 300px wide.
   A BOX THAT NARROWS THE WIDTH WEARS `wb-nested`, and only those: a column, a
   flex box, a repeat row and a collection card. A `section` does NOT, and that
   omission is the rule stated the other way round - a section is a band the
   full width of the page, so blocks inside it are spaced exactly as blocks on
   the page, which is what LayoutBandRoleTest holds it to. Nor does any box the
   OPERATOR named: given a class, that box is the site's own element and the
   site's stylesheet dresses it. One class, so this is ONE rule rather than one
   per container, and a narrowing box added later inherits it by wearing it.
   4px AND NOT 0, because two paragraphs with no air between them read as one
   paragraph. It is deliberately below the smallest value the padding control
   offers, so any padding an operator sets is visibly larger than the default.
   NO `!important` ON EITHER LINE. A block's own padding arrives as an inline
   style and has to keep winning: `!important` here would make the Padding
   control dead on every nested block, which is the exact failure the editor's
   Block Options panel is written to avoid. */
.wb-nested .wb-section{padding:4px 0}
.wb-nested .wb-container{max-width:none;padding:0}
/* A COLUMN THAT IS A CARD, without the operator writing a stylesheet first.
   Typed into a column's Class box, it is the one piece of decoration a row of
   three asks for often enough to ship with the engine: the row stops being
   three stacks of text separated by gaps and becomes three cards. It carries
   its own padding, so it does not depend on what was dropped inside it - and
   that padding survives the rule above, which reaches containers and bands and
   not the box wearing the class. */
.wb-card{background:#fff;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 4px 12px rgba(0,0,0,.05);padding:24px}
/* THE FLEX CONTAINER. One class per choice the block offers, so the renderer
   maps a switch onto a rule and never computes a length. Every size is on the
   8px scale: none, 8, 24, 48. The band exists to carry the padding and the
   shared style bag; the flex box inside it carries the layout. */
.wb-flex-band--pad-none{padding:0}
.wb-flex-band--pad-sm{padding:8px}
.wb-flex-band--pad-md{padding:24px}
.wb-flex-band--pad-lg{padding:48px}
.wb-flex{display:flex}
/* Without this a long word or a wide image in one child refuses to shrink and
   pushes the whole row past the edge of the page. Same reason .wb-column has it. */
.wb-flex>*{min-width:0}
.wb-flex--row{flex-direction:row}
.wb-flex--column{flex-direction:column}
.wb-flex--gap-none{gap:0}
.wb-flex--gap-sm{gap:8px}
.wb-flex--gap-md{gap:24px}
.wb-flex--gap-lg{gap:48px}
.wb-flex--align-start{align-items:flex-start}
.wb-flex--align-center{align-items:center}
.wb-flex--align-end{align-items:flex-end}
.wb-flex--align-stretch{align-items:stretch}
.wb-flex--justify-start{justify-content:flex-start}
.wb-flex--justify-center{justify-content:center}
.wb-flex--justify-end{justify-content:flex-end}
.wb-flex--justify-between{justify-content:space-between}
.wb-flex--wrap{flex-wrap:wrap}
.wb-flex--nowrap{flex-wrap:nowrap}
.wb-collection{display:grid;gap:16px}
.wb-collection-grid{grid-template-columns:repeat(var(--wb-cards,3),minmax(0,1fr))}
.wb-collection-list{grid-template-columns:1fr}
.wb-collection-card{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.wb-collection-list .wb-collection-card{flex-direction:row;align-items:center;gap:14px;padding:12px}
.wb-collection-img{width:100%;height:150px;object-fit:cover}
.wb-collection-list .wb-collection-img{width:96px;height:72px;border-radius:8px;flex:0 0 96px}
.wb-collection-title{display:block;padding:12px 14px 0;font-weight:600;color:inherit;text-decoration:none}
.wb-collection-list .wb-collection-title{padding:0}
.wb-collection-blurb{margin:6px 14px 14px;color:#6b7280;font-size:.9em}
.wb-collection-list .wb-collection-blurb{margin:4px 0 0}
.wb-collection-heading{margin:0 0 14px}
/* The card title became a real heading. This rule is what keeps that from
   showing: a browser gives h2 and h3 their own margin and size, and the card
   is meant to look exactly as it did when the title was a bare link. */
.wb-collection-card-title{margin:0;font-size:inherit;font-weight:inherit}
.wb-collection-empty{color:#6b7280}
.wb-gallery{display:grid;gap:12px}
.wb-gallery img{width:100%;height:200px;object-fit:cover;border-radius:8px}
.wb-video-wrapper{position:relative;padding-bottom:56.25%;height:0}
.wb-video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
/* THE DOWNLOAD CARD. It wraps rather than shrinking the button, because the
   one thing on it that must stay pressable on a narrow phone is the link, and
   a Download that has been squeezed to two characters is not one. Every length
   is on the 8px scale. */
.wb-file-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:24px;border:1px solid rgba(0,0,0,.1);border-radius:12px;background:rgba(0,0,0,.02)}
.wb-file-card__body{min-width:0}
.wb-file-card__title{font-weight:600;font-size:1.1rem}
.wb-file-card__note{margin-top:8px;opacity:.8}
/* The name, the format and the size. Quieter than the title on purpose: they
   tell a visitor what they are about to receive, they are not the heading. */
.wb-file-card__facts{margin-top:8px;font-size:.9rem;opacity:.6;overflow-wrap:anywhere}
.wb-testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.wb-testimonial-card{background:rgba(0,0,0,.03);padding:24px;border-radius:8px}
.wb-testimonial-card blockquote{font-style:italic;margin-bottom:12px}
.wb-testimonial-author{font-weight:600}
.wb-testimonial-role{opacity:.6;font-size:.9rem}
.wb-pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.wb-pricing-card{background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:32px;text-align:center}
.wb-pricing-featured{border-color:var(--wb-primary);box-shadow:0 4px 24px rgba(0,0,0,.1)}
.wb-pricing-price{font-size:2rem;font-weight:700;margin:16px 0}
.wb-pricing-card ul{list-style:none;margin:16px 0;text-align:left}
.wb-pricing-card li{padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.wb-faq-item{border-bottom:1px solid rgba(0,0,0,.1);padding:16px 0}
.wb-faq-item summary{cursor:pointer;font-weight:600;font-size:1.1rem}
.wb-faq-answer{padding:12px 0;opacity:.85}
.wb-divider{border:none;border-top:1px solid rgba(0,0,0,.1);margin:0}
.wb-footer{padding:40px 0;background:rgba(0,0,0,.03);text-align:center}
.wb-footer-copyright{opacity:.6;font-size:.9rem;margin-top:8px}
.wb-social{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.wb-social-link{text-decoration:none;color:var(--wb-primary);font-weight:500}
.wb-form-block{max-width:600px;margin:0 auto;padding:24px;background:rgba(0,0,0,.02);border-radius:12px}
.wb-form-title{margin-bottom:16px}
.wb-form-field{margin-bottom:16px}
.wb-form-field label{display:block;margin-bottom:4px;font-weight:500;font-size:.9rem}
.wb-form-field input,.wb-form-field textarea,.wb-form-field select{width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.2);border-radius:6px;font-size:1rem;font-family:inherit}
.wb-form-field--checkbox{display:flex;align-items:center;gap:8px}
.wb-form-field--checkbox label{display:flex;align-items:center;gap:8px;margin:0}
.wb-form-submit-row{margin-top:20px}
.wb-form-success{padding:16px;text-align:center;color:#16a34a;font-weight:600}
.wb-form-block--trigger{text-align:center}
.wb-form-trigger-title{margin-bottom:12px;font-weight:600}
.wb-form-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:9999}
.wb-form-modal{background:#fff;border-radius:12px;padding:0;max-width:520px;width:90%;max-height:90vh;overflow-y:auto}
.wb-form-modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(0,0,0,.1)}
.wb-form-modal-title{font-weight:700;font-size:1.1rem}
.wb-form-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:4px 8px}
.wb-form-modal-body{padding:24px}
.wb-auth-form{max-width:480px;margin:0 auto;padding:40px 36px 32px;background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.04)}
.wb-auth-form--compact{max-width:400px;padding:28px 24px 24px}
.wb-auth-form__title{text-align:center;margin:0 0 24px;font-size:1.35rem;font-weight:700;color:var(--wb-text,#1f2937);letter-spacing:-.01em}
.wb-auth-form__subtitle{text-align:center;color:#6b7280;font-size:.9rem;margin:-12px 0 20px;line-height:1.5}
.wb-auth-form__form{display:flex;flex-direction:column;gap:14px}
.wb-auth-field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px;letter-spacing:.02em;color:#374151}
.wb-auth-field input{width:100%;padding:11px 14px;border:1.5px solid #e5e7eb;border-radius:10px;font-size:.95rem;font-family:inherit;background:#f9fafb;transition:border-color .2s,box-shadow .2s,background .2s;box-sizing:border-box}
.wb-auth-field input:focus{outline:none;border-color:var(--wb-primary);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--wb-primary) 12%,transparent)}
.wb-auth-field input::placeholder{color:#9ca3af}
.wb-auth-field--error{color:#dc2626;font-size:.88rem;padding:8px 12px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;line-height:1.4}
.wb-auth-submit{width:100%;margin-top:6px;padding:12px;font-size:1rem;font-weight:600;letter-spacing:.01em;border:none;border-radius:10px;color:#fff;background:var(--wb-primary);cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s}
.wb-auth-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--wb-primary) 30%,transparent)}
.wb-auth-submit:disabled{opacity:.6;cursor:not-allowed}
.wb-auth-form__success{text-align:center;padding:24px 16px;color:#15803d;font-weight:600;font-size:1.05rem;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;line-height:1.5}
.wb-auth-ok-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#16a34a;color:#fff;border-radius:50%;font-size:.9rem;vertical-align:middle;margin-right:6px}
.wb-auth-form__links{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid #f3f4f6;font-size:.85rem;display:flex;flex-direction:column;gap:8px;align-items:center}
.wb-auth-toggle{color:var(--wb-primary);text-decoration:none;cursor:pointer;font-size:.85rem;font-weight:500}
.wb-auth-toggle:hover{text-decoration:underline}
.wb-auth-toggle--alt{color:#6b7280;font-size:.82rem;font-weight:400}
.wb-auth-toggle--alt strong{color:var(--wb-primary);font-weight:600}
.wb-auth-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;font-size:.9375rem;font-weight:500;color:#374151;cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s,background .2s}
.wb-auth-google:hover{border-color:#d1d5db;background:#f9fafb;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.wb-auth-google:active{transform:scale(.99)}
.wb-auth-google:disabled{opacity:.6;cursor:not-allowed}
.wb-auth-google__icon{flex-shrink:0}
.wb-auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:.8rem;color:#374151;text-transform:uppercase;letter-spacing:.05em}
.wb-auth-divider::before,.wb-auth-divider::after{content:'';flex:1;height:1px;background:#e5e7eb}
.wb-auth-step{animation:wbPaneFade .3s ease}
.wb-auth-continue{width:100%;margin-top:6px;padding:12px;font-size:1rem;font-weight:600;letter-spacing:.01em;border:none;border-radius:10px;color:#fff;background:var(--wb-primary);cursor:pointer;transition:transform .15s,box-shadow .15s}
.wb-auth-continue:hover{transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--wb-primary) 30%,transparent)}
.wb-auth-step2-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#f3f4f6;border-radius:8px;margin-bottom:14px;font-size:.875rem;color:#374151}
.wb-auth-step2-email{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-auth-step2-change{color:var(--wb-primary);font-size:.8125rem;font-weight:500;text-decoration:none;flex-shrink:0;margin-left:12px}
.wb-auth-step2-change:hover{text-decoration:underline}
.wb-auth-pane{animation:wbPaneFade .3s ease}
@keyframes wbPaneFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* THREE STEPS, not two. A tablet that jumps straight to one column turns a
   three-across card grid into a column of giants; halving the grid keeps two
   across, which is what the width is actually good for. */
@media(max-width:1024px){.wb-columns{grid-template-columns:repeat(6,minmax(0,1fr))}.wb-column{grid-column:span var(--wb-span-md,6)}.wb-collection-grid{grid-template-columns:repeat(min(2,var(--wb-cards,3)),minmax(0,1fr))}}
@media(max-width:768px){.wb-hero h1{font-size:2rem}.wb-columns{grid-template-columns:minmax(0,1fr)}.wb-column{grid-column:1/-1}.wb-collection-grid{grid-template-columns:minmax(0,1fr)}.wb-navbar-inner{flex-direction:column;gap:12px}.wb-navbar-menu{flex-wrap:wrap;justify-content:center}.wb-navbar-menu a{display:flex;align-items:center;min-height:32px}}
/* A ROW BECOMES A COLUMN ON A PHONE, on its own. This is the whole reason the
   direction is a class and not an inline style: a site people open on a phone
   cannot ship a three-across row that stays three-across at 360px, and an
   operator should not have to build the narrow version by hand. Kept as its own
   query rather than folded into the line above so the rule is readable, and so
   that a change to it is a change to one thing.
   `justify-content` is left alone deliberately: spread apart still means spread
   apart down a column, and re-packing it would silently undo the setting.
   `align-items` is NOT left alone, and the axis is the reason the two settings
   are treated differently. Align works on the CROSS axis, so in a row it means
   "where the blocks sit vertically" and costs nothing horizontally. Turning the
   direction turns that axis with it: the `align-items:center` an operator chose
   to line a logo up beside a heading would, once stacked, size every child to
   its own content instead. The children are `.wb-section` divs and that rule
   gives them no width of their own, so three full-width cards would collapse
   into three narrow slivers as wide as their longest word. Only the default
   `stretch` survives the turn, so the collapse resets to it: an align chosen
   for a row is not the align that was meant for a column. */
@media(max-width:768px){.wb-flex--row{flex-direction:column;align-items:stretch}}
/* THE MENU BUTTON, and only for a bar that asked for one.
   Its own query rather than another clause on the line above, because every
   rule here is conditional on an attribute the renderer emits for one opted-in
   block, and folding that into the shared phone query would put four selectors
   nobody can read beside the two that apply to every site.
   `data-wb-ready` IS WRITTEN BY site.js, and gating on it is what decides the
   no-script failure mode. Hiding the list on the attribute the renderer emits
   would leave a visitor whose script did not arrive with a menu that is gone
   and a button that does nothing. Gating on the attribute the RUNTIME writes
   means the bar falls back to exactly what it does today, links wrapped onto
   as many lines as they need, and the button stays hidden because it would be
   a control that cannot work.
   The bar stays a row here: the shared query above turns it into a column, and
   a logo stacked above its own menu button is not what a collapsed bar is. The
   list takes the full width so it wraps under both of them when it opens. */
@media(max-width:768px){
.wb-navbar[data-wb-navbar-collapse][data-wb-ready] .wb-navbar-inner{flex-direction:row;flex-wrap:wrap;gap:8px}
.wb-navbar[data-wb-navbar-collapse][data-wb-ready] .wb-navbar-toggle{display:inline-flex;margin-left:auto}
.wb-navbar[data-wb-navbar-collapse][data-wb-ready] .wb-navbar-menu{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:8px;padding:8px 0}
.wb-navbar[data-wb-navbar-collapse][data-wb-ready] .wb-navbar-menu li{width:100%}
.wb-navbar[data-wb-navbar-collapse][data-wb-ready] .wb-navbar-menu a{width:100%}
.wb-navbar[data-wb-navbar-collapse][data-wb-ready][data-wb-open] .wb-navbar-menu{display:flex}
}
/* ============================================================
   APIxAI — visual workflows · AI agents · custom blocks
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;color:#0f172a;background:#fff;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.ax-link{color:#6366f1;font-weight:600;text-decoration:underline;text-decoration-color:rgba(99,102,241,.4);text-underline-offset:2px;transition:.2s}
.ax-link:hover{color:#a855f7;text-decoration-color:#a855f7}

.ax-skip{position:absolute;top:-100%;left:16px;background:#6366f1;color:#fff;padding:8px 16px;border-radius:8px;font-size:.875rem;z-index:9999;transition:top .2s}
.ax-skip:focus{top:12px}

.ax-container{max-width:1200px;margin:0 auto;padding:0 24px;position:relative}
.ax-section{padding:104px 0;opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1);position:relative}
.ax-section.is-in{opacity:1;transform:translateY(0)}
.ax-section--alt{background:linear-gradient(180deg,#ffffff 0%,#f8fafc 50%,#ffffff 100%)}
.ax-section--builder{background:linear-gradient(180deg,#fafbff 0%,#f3f4fd 100%)}
.ax-section--agents{background:linear-gradient(180deg,#0b0f1a 0%,#0f1424 60%,#0b0f1a 100%);color:#e2e8f0;overflow:hidden}
.ax-section--agents .ax-section__head h2{color:#fff}
.ax-section--agents .ax-section__head p{color:rgba(255,255,255,.7)}
.ax-agents-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 50% at 30% 30%,rgba(99,102,241,.22),transparent 70%),radial-gradient(40% 50% at 70% 70%,rgba(168,85,247,.18),transparent 70%),radial-gradient(35% 45% at 50% 50%,rgba(6,182,212,.12),transparent 70%);filter:blur(60px) saturate(140%)}
.ax-section--agents>.ax-container{position:relative;z-index:1}

.ax-pill{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4f46e5;background:linear-gradient(135deg,#eef2ff 0%,#e0e7ff 100%);border:1px solid #c7d2fe}
.ax-pill--neo{background:linear-gradient(135deg,#ecfeff 0%,#cffafe 100%);color:#0e7490;border-color:#a5f3fc}
.ax-pill--accent{background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(168,85,247,.18));color:#c7d2fe;border-color:rgba(199,210,254,.3)}
.ax-section__head{text-align:center;max-width:760px;margin:0 auto 56px}
.ax-section__head h2{font-size:clamp(2rem,3.6vw,2.85rem);font-weight:800;letter-spacing:-.035em;margin:18px 0 14px;color:#0f172a;line-height:1.1}
.ax-section__head p{font-size:1.04rem;line-height:1.65;color:#475569;margin:0}
.ax-gradient-text{background:linear-gradient(100deg,#6366f1 0%,#a855f7 35%,#06b6d4 70%,#10b981 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:axShimmer 8s linear infinite}
@keyframes axShimmer{to{background-position:200% center}}

/* ── Buttons ── */
.ax-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.9rem;padding:10px 18px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .25s ease,background .2s ease,border-color .2s ease;font-family:inherit;line-height:1.3;white-space:nowrap;position:relative;overflow:hidden}
.ax-btn--sm{padding:8px 14px;font-size:.85rem;border-radius:9px}
.ax-btn--lg{padding:14px 24px;font-size:1rem;border-radius:12px}
.ax-btn--block{width:100%}
.ax-btn--primary{background:linear-gradient(135deg,#6366f1 0%,#818cf8 50%,#a855f7 100%);color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.32),0 1px 2px rgba(99,102,241,.2),inset 0 1px 0 rgba(255,255,255,.18)}
.ax-btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(99,102,241,.5),0 2px 6px rgba(99,102,241,.25),inset 0 1px 0 rgba(255,255,255,.25)}
.ax-btn--primary::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);background-size:200% 200%;background-position:100% 100%;transition:background-position .6s}
.ax-btn--primary:hover::before{background-position:0 0}
.ax-btn--ghost{background:#fff;color:#0f172a;border-color:#e2e8f0;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.ax-btn--ghost:hover{border-color:#cbd5e1;box-shadow:0 4px 12px rgba(15,23,42,.08);transform:translateY(-1px)}
.ax-btn--ghost-on-dark{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2);backdrop-filter:blur(10px)}
.ax-btn--ghost-on-dark:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);transform:translateY(-1px)}
.ax-btn--white{background:#fff;color:#0f172a;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.ax-btn--white:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.32)}

/* ── Nav ── */
.ax-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(226,232,240,.6);transition:background .3s,box-shadow .3s}
.ax-nav.is-scrolled{background:rgba(255,255,255,.9);box-shadow:0 4px 28px rgba(15,23,42,.06)}
.ax-nav__in{display:flex;align-items:center;padding:14px 24px}
.ax-nav__brand{display:inline-flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;color:#0f172a;letter-spacing:-.01em}
.ax-nav__name b{background:linear-gradient(100deg,#6366f1,#a855f7,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ax-nav__beta{margin-left:4px;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:6px;background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;border:1px solid #fcd34d}
.ax-nav__links{display:flex;gap:28px;margin-left:36px}
.ax-nav__links a{color:#475569;font-size:.9rem;font-weight:500;transition:color .15s;position:relative}
.ax-nav__links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:linear-gradient(90deg,#6366f1,#a855f7);border-radius:1px;transition:width .25s}
.ax-nav__links a:hover{color:#0f172a}
.ax-nav__links a:hover::after{width:100%}
.ax-nav__cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.ax-nav__ghost{color:#475569;font-size:.88rem;font-weight:500;padding:8px 12px;border-radius:8px;transition:.15s}
.ax-nav__ghost:hover{color:#0f172a;background:#f1f5f9}
.ax-nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.ax-nav__burger span{width:22px;height:2px;background:#0f172a;border-radius:2px}

/* ── Hero ── */
.ax-hero{position:relative;padding:80px 0 104px;overflow:hidden;isolation:isolate}
.ax-hero__mesh{position:absolute;inset:-10% -5%;z-index:-3;background:radial-gradient(45% 50% at 20% 30%,rgba(99,102,241,.32),transparent 70%),radial-gradient(40% 45% at 80% 20%,rgba(168,85,247,.26),transparent 70%),radial-gradient(35% 40% at 50% 90%,rgba(6,182,212,.24),transparent 70%),linear-gradient(180deg,#fafbff 0%,#f3f4fd 100%);filter:blur(40px) saturate(140%);animation:axMeshFloat 22s ease-in-out infinite alternate}
@keyframes axMeshFloat{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-10px,14px) scale(1.03)}}
.ax-hero__grid{position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(99,102,241,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.07) 1px,transparent 1px);background-size:60px 60px;mask:radial-gradient(ellipse 70% 70% at 50% 40%,#000 0%,transparent 85%);-webkit-mask:radial-gradient(ellipse 70% 70% at 50% 40%,#000 0%,transparent 85%)}
.ax-hero__noise{position:absolute;inset:0;z-index:-1;opacity:.025;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ax-hero__orb{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(70px)}
.ax-hero__orb--a{width:520px;height:520px;top:-120px;right:-120px;background:radial-gradient(circle,rgba(99,102,241,.32) 0%,transparent 70%);animation:axOrb 12s ease-in-out infinite alternate}
.ax-hero__orb--b{width:420px;height:420px;bottom:-80px;left:-100px;background:radial-gradient(circle,rgba(6,182,212,.22) 0%,transparent 70%);animation:axOrb 14s ease-in-out infinite alternate-reverse}
@keyframes axOrb{0%{transform:translate(0,0)}100%{transform:translate(-18px,22px) scale(1.06)}}

/* Floating particles */
.ax-particles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ax-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,#a855f7,#6366f1);opacity:.3;animation:axFloat linear infinite}
.ax-particle:nth-child(1){left:8%;top:20%;animation-duration:18s;animation-delay:-2s}
.ax-particle:nth-child(2){left:18%;top:70%;animation-duration:24s;animation-delay:-5s;background:radial-gradient(circle,#06b6d4,#6366f1)}
.ax-particle:nth-child(3){left:28%;top:35%;animation-duration:20s;animation-delay:-8s;width:3px;height:3px}
.ax-particle:nth-child(4){left:38%;top:80%;animation-duration:22s;animation-delay:-11s}
.ax-particle:nth-child(5){left:48%;top:15%;animation-duration:16s;animation-delay:-1s;width:5px;height:5px}
.ax-particle:nth-child(6){left:58%;top:60%;animation-duration:25s;animation-delay:-14s}
.ax-particle:nth-child(7){left:68%;top:30%;animation-duration:19s;animation-delay:-3s;background:radial-gradient(circle,#10b981,#06b6d4)}
.ax-particle:nth-child(8){left:78%;top:75%;animation-duration:21s;animation-delay:-9s}
.ax-particle:nth-child(9){left:88%;top:25%;animation-duration:17s;animation-delay:-6s;width:3px;height:3px}
.ax-particle:nth-child(10){left:5%;top:55%;animation-duration:23s;animation-delay:-12s}
.ax-particle:nth-child(11){left:15%;top:45%;animation-duration:18s;animation-delay:-7s;width:5px;height:5px}
.ax-particle:nth-child(12){left:25%;top:85%;animation-duration:20s;animation-delay:-4s}
.ax-particle:nth-child(13){left:42%;top:40%;animation-duration:22s;animation-delay:-10s}
.ax-particle:nth-child(14){left:55%;top:90%;animation-duration:24s;animation-delay:-13s;background:radial-gradient(circle,#a855f7,#ec4899)}
.ax-particle:nth-child(15){left:65%;top:10%;animation-duration:16s;animation-delay:-2s}
.ax-particle:nth-child(16){left:75%;top:50%;animation-duration:19s;animation-delay:-15s;width:3px;height:3px}
.ax-particle:nth-child(17){left:85%;top:65%;animation-duration:21s;animation-delay:-8s}
.ax-particle:nth-child(18){left:95%;top:40%;animation-duration:23s;animation-delay:-5s}
.ax-particles--dark .ax-particle{opacity:.55;background:radial-gradient(circle,#fff,rgba(255,255,255,0))}
.ax-particles--dark .ax-particle:nth-child(2n){background:radial-gradient(circle,#a855f7,rgba(168,85,247,0))}
.ax-particles--dark .ax-particle:nth-child(3n){background:radial-gradient(circle,#06b6d4,rgba(6,182,212,0))}
@keyframes axFloat{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:1}50%{transform:translate(20px,-30px) scale(1.4);opacity:.6}90%{opacity:1}100%{transform:translate(0,-60px) scale(1);opacity:0}}

.ax-hero__wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center;min-height:560px;padding-top:8px;position:relative;z-index:2}
.ax-hero__left{position:relative}
.ax-hero__badge{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border:1px solid rgba(99,102,241,.2);color:#4338ca;margin-bottom:24px;box-shadow:0 4px 14px rgba(99,102,241,.1);animation:axFadeUp .7s .05s cubic-bezier(.22,1,.36,1) both}
.ax-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18);animation:axPulse 1.6s ease-in-out infinite}
@keyframes axPulse{0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.18)}50%{box-shadow:0 0 0 7px rgba(16,185,129,0)}}
.ax-hero__title{font-size:clamp(2.4rem,4.8vw,4rem);font-weight:800;line-height:1.04;letter-spacing:-.045em;color:#0f172a;margin:0 0 18px;animation:axFadeUp .7s .15s cubic-bezier(.22,1,.36,1) both}
.ax-hero__sub{font-size:1.1rem;line-height:1.6;color:#475569;margin:0 0 28px;max-width:540px;animation:axFadeUp .7s .28s cubic-bezier(.22,1,.36,1) both}
.ax-hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;animation:axFadeUp .7s .4s cubic-bezier(.22,1,.36,1) both}
.ax-hero__chips{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap;animation:axFadeUp .7s .55s cubic-bezier(.22,1,.36,1) both}
.ax-hero__chips li{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:#475569;font-weight:500}
.ax-hero__chips svg{color:#10b981}
.ax-hero__right{animation:axFadeUp .8s .25s cubic-bezier(.22,1,.36,1) both}
@keyframes axFadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── Workflow canvas (hero) ── */
.ax-canvas{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 32px 80px -20px rgba(15,23,42,.22),0 8px 24px -4px rgba(15,23,42,.08),0 0 0 1px rgba(99,102,241,.04)}
.ax-canvas__chrome{display:flex;align-items:center;gap:8px;padding:10px 14px;background:linear-gradient(180deg,#f8fafc,#f1f5f9);border-bottom:1px solid #e2e8f0;font-size:.78rem;color:#64748b;font-family:'SF Mono',Menlo,Consolas,monospace}
.ax-canvas__dot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 1px 1px rgba(0,0,0,.2)}
.ax-canvas__title{margin-left:6px;font-weight:600}
.ax-canvas__run{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:.7rem;font-weight:700;font-family:inherit}
.ax-pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.25);animation:axPulse 1.4s ease-in-out infinite}
.ax-canvas__svg{width:100%;height:auto;display:block}
.ax-node{opacity:0;animation:axNodeDrop .55s cubic-bezier(.22,1,.36,1) forwards;transform-origin:center;transform-box:fill-box}
.ax-node--1{animation-delay:.2s}
.ax-node--2{animation-delay:.7s}
.ax-node--3{animation-delay:1.1s}
.ax-node--4{animation-delay:1.4s}
.ax-node--5{animation-delay:1.7s}
@keyframes axNodeDrop{from{opacity:0;transform:translateY(-10px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
.ax-edge{stroke-dasharray:600;stroke-dashoffset:600;animation:axEdgeDraw 1s cubic-bezier(.22,1,.36,1) forwards}
.ax-edge--1{animation-delay:.5s}
.ax-edge--2{animation-delay:1.3s}
.ax-edge--3{animation-delay:1.3s}
.ax-edge--4{animation-delay:1.8s}
@keyframes axEdgeDraw{to{stroke-dashoffset:0}}
.ax-canvas__ai{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 16px 40px rgba(15,23,42,.18),0 0 0 1px rgba(99,102,241,.08);max-width:280px;animation:axFadeUp .7s 2.2s cubic-bezier(.22,1,.36,1) both}
.ax-canvas__ai-ic{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 14px rgba(99,102,241,.4)}
.ax-canvas__ai-body{display:flex;flex-direction:column;line-height:1.3}
.ax-canvas__ai-body b{font-size:.82rem;color:#0f172a}
.ax-canvas__ai-body span{font-size:.74rem;color:#64748b}
.ax-canvas__ai-pill{margin-left:auto;padding:2px 8px;border-radius:999px;background:#fee2e2;color:#991b1b;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px}
.ax-canvas__ai-pill::before{content:"";width:5px;height:5px;border-radius:50%;background:#ef4444;animation:axPulse 1.2s infinite}

/* ── Flow3 (3 simple steps) ── */
.ax-flow3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center;max-width:1080px;margin:0 auto}
.ax-flow3__step{text-align:center;padding:32px 24px;background:#fff;border:1px solid #e2e8f0;border-radius:22px;box-shadow:0 6px 24px rgba(15,23,42,.04);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,border-color .25s;position:relative;overflow:hidden}
.ax-flow3__step::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;background:linear-gradient(135deg,#6366f1,#a855f7,#06b6d4);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.ax-flow3__step:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(15,23,42,.12)}
.ax-flow3__step:hover::before{opacity:1}
.ax-flow3__ic{width:88px;height:88px;margin:0 auto 20px;border-radius:24px;display:flex;align-items:center;justify-content:center;position:relative;color:#fff;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.ax-flow3__step:hover .ax-flow3__ic{transform:scale(1.08) rotate(-3deg)}
.ax-flow3__ic--a{background:linear-gradient(135deg,#6366f1,#818cf8);box-shadow:0 12px 28px rgba(99,102,241,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.ax-flow3__ic--b{background:linear-gradient(135deg,#a855f7,#ec4899);box-shadow:0 12px 28px rgba(168,85,247,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.ax-flow3__ic--c{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 12px 28px rgba(16,185,129,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.ax-flow3__ic svg{width:48px;height:48px}
.ax-flow3__n{display:inline-block;margin-bottom:8px;font-size:.74rem;font-weight:800;letter-spacing:.1em;color:#6366f1;background:#eef2ff;padding:3px 10px;border-radius:999px}
.ax-flow3__step h3{font-size:1.2rem;font-weight:700;color:#0f172a;margin:0 0 8px;letter-spacing:-.01em}
.ax-flow3__step p{font-size:.9rem;color:#475569;line-height:1.6;margin:0}
.ax-flow3__arrow{display:flex;justify-content:center;opacity:.65}
.ax-flow3__arrow svg{width:60px;height:30px;animation:axArrow 1.8s ease-in-out infinite}
@keyframes axArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ── Builder ── */
.ax-builder{max-width:1140px;margin:0 auto;background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 40px 96px -24px rgba(15,23,42,.26),0 8px 20px -4px rgba(15,23,42,.06),0 0 0 1px rgba(99,102,241,.05)}
.ax-builder__topbar{display:flex;align-items:center;padding:10px 16px;background:linear-gradient(180deg,#fafbff,#f3f4fd);border-bottom:1px solid #e2e8f0;gap:18px}
.ax-builder__brand{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:700;color:#0f172a}
.ax-builder__path{font-weight:500;color:#94a3b8;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.78rem}
.ax-builder__avas{display:inline-flex;align-items:center;gap:0;margin-left:auto}
.ax-ava{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:.72rem;font-weight:800;border:2px solid #fff;margin-left:-8px;box-shadow:0 1px 4px rgba(15,23,42,.12);position:relative}
.ax-ava:first-child{margin-left:0}
.ax-ava--more{background:#e2e8f0;color:#475569}
.ax-builder__tools{display:inline-flex;gap:6px}
.ax-bbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #e2e8f0;background:#fff;border-radius:8px;color:#475569;font-size:.78rem;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit}
.ax-bbtn:hover{border-color:#cbd5e1;color:#0f172a;transform:translateY(-1px);box-shadow:0 2px 6px rgba(15,23,42,.06)}
.ax-bbtn--primary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(16,185,129,.35)}
.ax-bbtn--primary:hover{box-shadow:0 6px 18px rgba(16,185,129,.5)}
.ax-bbtn--block{width:100%;justify-content:center;padding:9px 12px;margin-top:8px}
.ax-builder__body{display:grid;grid-template-columns:200px 1fr 220px;min-height:380px}
.ax-builder__pal{padding:12px;background:#fafbff;border-right:1px solid #e2e8f0;font-size:.82rem;overflow:hidden}
.ax-pal__search{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e2e8f0;border-radius:8px;color:#94a3b8;font-size:.78rem;background:#fff;margin-bottom:14px;transition:border-color .2s}
.ax-pal__search:hover{border-color:#c7d2fe}
.ax-pal__group{margin-bottom:14px}
.ax-pal__h{display:block;font-size:.65rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8;padding:0 4px 6px}
.ax-pal__i{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;color:#475569;font-size:.82rem;font-weight:500;cursor:pointer;transition:.15s;position:relative}
.ax-pal__i:hover{background:#eef2ff;color:#0f172a;transform:translateX(2px)}
.ax-pal__i i{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:#fff;font-style:normal;flex-shrink:0;box-shadow:0 1px 3px rgba(15,23,42,.12)}
.ax-pal__i--ai{background:linear-gradient(90deg,#eef2ff,#fdf4ff);color:#4f46e5;font-weight:700}
.ax-builder__canvas{position:relative;background:#fafbff;overflow:hidden}
.ax-builder__canvas svg{width:100%;height:100%;display:block}
.ax-builder__mini{position:absolute;left:12px;bottom:12px;width:104px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:2px;box-shadow:0 4px 12px rgba(15,23,42,.08)}
.ax-builder__mini svg{width:100%;height:auto;display:block;border-radius:4px}
.ax-builder__zoom{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:2px;box-shadow:0 4px 12px rgba(15,23,42,.08)}
.ax-builder__zoom button{width:24px;height:24px;border:none;background:none;color:#64748b;cursor:pointer;font-size:.9rem;border-radius:4px;transition:.12s}
.ax-builder__zoom button:hover{background:#f1f5f9;color:#0f172a}
.ax-builder__zoom span{padding:0 8px;font-size:.74rem;font-weight:600;color:#475569}
.ax-builder__props{padding:14px;background:#fff;border-left:1px solid #e2e8f0;font-size:.82rem;overflow:hidden}
.ax-props__head{display:flex;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #f1f5f9}
.ax-props__sw{width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.85rem;box-shadow:0 4px 10px rgba(99,102,241,.35)}
.ax-props__head b{font-size:.92rem;color:#0f172a}
.ax-props__field{margin-bottom:12px}
.ax-props__field label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin-bottom:5px}
.ax-props__textarea{padding:8px 10px;background:#fafbff;border:1px solid #e2e8f0;border-radius:7px;font-size:.78rem;color:#475569;line-height:1.5;font-family:inherit}
.ax-props__select{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:#fafbff;border:1px solid #e2e8f0;border-radius:7px;font-size:.8rem;color:#0f172a}
.ax-props__select span{color:#94a3b8}
.ax-props__row{display:flex;gap:6px;flex-wrap:wrap}
.ax-chip--mini{display:inline-flex;align-items:center;padding:3px 8px;border-radius:5px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#4338ca;font-size:.7rem;font-weight:700;border:1px solid #c7d2fe}
.ax-builder__status{display:flex;justify-content:space-between;padding:8px 16px;background:#fafbff;border-top:1px solid #e2e8f0;font-size:.74rem;color:#64748b;font-family:'SF Mono',Menlo,Consolas,monospace}
.ax-builder__status span{display:inline-flex;align-items:center;gap:6px}

.ax-feats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1080px;margin:36px auto 0;padding:0}
.ax-feats li{position:relative;padding:18px 18px 18px 50px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;font-size:.84rem;color:#475569;box-shadow:0 4px 14px rgba(15,23,42,.04);transition:.25s}
.ax-feats li:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,23,42,.08);border-color:#c7d2fe}
.ax-feats li b{display:block;color:#0f172a;font-size:.95rem;margin-bottom:2px;letter-spacing:-.01em}
.ax-feats__d{position:absolute;left:14px;top:18px;width:24px;height:24px;border-radius:7px;box-shadow:0 4px 10px rgba(15,23,42,.12)}
.ax-feats__d--1{background:linear-gradient(135deg,#f97316,#fb923c)}
.ax-feats__d--2{background:linear-gradient(135deg,#eab308,#facc15)}
.ax-feats__d--3{background:linear-gradient(135deg,#3b82f6,#60a5fa)}
.ax-feats__d--4{background:linear-gradient(135deg,#10b981,#34d399)}

/* ── AI split ── */
.ax-ai-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1080px;margin:0 auto;align-items:stretch}
.ax-aichat{background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 24px 56px rgba(15,23,42,.08),0 0 0 1px rgba(99,102,241,.04);display:flex;flex-direction:column}
.ax-aichat__head{display:flex;align-items:center;gap:10px;padding:14px 18px;background:linear-gradient(180deg,#fafbff,#f3f4fd);border-bottom:1px solid #e2e8f0}
.ax-aichat__avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 16px rgba(99,102,241,.4);animation:axGlowPulse 3s ease-in-out infinite}
@keyframes axGlowPulse{0%,100%{box-shadow:0 6px 16px rgba(99,102,241,.4)}50%{box-shadow:0 8px 24px rgba(168,85,247,.55)}}
.ax-aichat__head b{display:block;font-size:.92rem;color:#0f172a}
.ax-aichat__head span{font-size:.74rem;color:#64748b;display:inline-flex;align-items:center;gap:6px}
.ax-aichat__body{padding:18px;display:flex;flex-direction:column;gap:14px;flex:1}
.ax-msg{padding:12px 14px;border-radius:14px;font-size:.9rem;line-height:1.55;max-width:90%;animation:axMsgIn .4s cubic-bezier(.22,1,.36,1) backwards}
.ax-msg--user{align-self:flex-end;background:linear-gradient(135deg,#6366f1,#7c3aed);color:#fff;border-bottom-right-radius:4px;box-shadow:0 4px 14px rgba(99,102,241,.32);animation-delay:.1s}
.ax-msg--ai{align-self:flex-start;background:#f1f5f9;color:#0f172a;border-bottom-left-radius:4px;display:flex;flex-direction:column;gap:10px;animation-delay:.4s}
.ax-msg--typing{padding:14px 16px;animation-delay:1.4s}
@keyframes axMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ax-msg__line{font-weight:600}
.ax-msg__steps{display:flex;flex-direction:column;gap:6px}
.ax-msg__step{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:#475569}
.ax-msg__step.is-done{color:#15803d}
.ax-msg__step.is-done svg{color:#10b981}
.ax-msg__step.is-doing{color:#1d4ed8}
.ax-msg__spin{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid #cbd5e1;border-top-color:#6366f1;animation:axSpin .8s linear infinite}
@keyframes axSpin{to{transform:rotate(360deg)}}
.ax-typing{display:inline-flex;gap:4px;align-items:center}
.ax-typing i{width:7px;height:7px;border-radius:50%;background:#94a3b8;animation:axBlink 1.2s ease-in-out infinite}
.ax-typing i:nth-child(2){animation-delay:.2s}
.ax-typing i:nth-child(3){animation-delay:.4s}
@keyframes axBlink{0%,80%,100%{transform:scale(.7);opacity:.4}40%{transform:scale(1);opacity:1}}
.ax-aichat__inp{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fafbff;border-top:1px solid #e2e8f0;color:#94a3b8;font-size:.85rem}
.ax-aichat__inp span{flex:1;position:relative}
.ax-aichat__inp span::after{content:"|";position:absolute;color:#6366f1;animation:axBlink2 1s steps(2,end) infinite;margin-left:1px}
@keyframes axBlink2{50%{opacity:0}}
.ax-aichat__send{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(99,102,241,.4);transition:.15s}
.ax-aichat__send:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(99,102,241,.55)}
.ax-mini{background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 24px 56px rgba(15,23,42,.08),0 0 0 1px rgba(99,102,241,.04);display:flex;flex-direction:column}
.ax-mini__head{display:flex;align-items:center;gap:8px;padding:14px 18px;background:linear-gradient(180deg,#f0fdf4,#dcfce7);border-bottom:1px solid #bbf7d0;font-size:.82rem;font-weight:700;color:#15803d;font-family:'SF Mono',Menlo,Consolas,monospace}
.ax-mini svg{width:100%;height:auto;display:block;background:#fafbff}
.ax-mini__node{opacity:0;animation:axNodeDrop .5s cubic-bezier(.22,1,.36,1) forwards}
.ax-mini__node--1{animation-delay:.2s}
.ax-mini__node--2{animation-delay:.6s}
.ax-mini__node--3{animation-delay:1s}
.ax-mini__node--4{animation-delay:1s}
.ax-mini__edge{animation:axEdgeDraw .9s cubic-bezier(.22,1,.36,1) forwards}
.ax-mini__edge--1{animation-delay:.4s}
.ax-mini__edge--2{animation-delay:.8s}
.ax-mini__edge--3{animation-delay:.8s}

/* ── AI Agents (dark section) ── */
.ax-ag{position:relative;max-width:1100px;margin:0 auto;height:520px}
.ax-ag__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200px;height:200px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#a855f7,#6366f1 40%,#0b0f1a 80%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 0 80px rgba(99,102,241,.55),0 0 140px rgba(168,85,247,.35),inset 0 4px 20px rgba(255,255,255,.1);z-index:3}
.ax-ag__core-rings{position:absolute;inset:0;pointer-events:none}
.ax-ag__ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);animation:axCoreRing 3s ease-out infinite}
.ax-ag__ring--2{animation-delay:1s}
.ax-ag__ring--3{animation-delay:2s}
@keyframes axCoreRing{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.6);opacity:0}}
.ax-ag__brain{width:64px;height:64px;animation:axBrainFloat 4s ease-in-out infinite}
@keyframes axBrainFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ax-ag__label{font-size:.92rem;font-weight:800;color:#fff;letter-spacing:-.01em;margin-top:4px}
.ax-ag__sub{font-size:.7rem;color:rgba(255,255,255,.65);font-style:italic}
.ax-ag__lines{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.ax-agc{position:absolute;width:240px;background:rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;color:#e2e8f0;z-index:2;box-shadow:0 12px 32px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.04);transition:transform .3s ease}
.ax-agc:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22)}
.ax-agc--brain{top:30px;left:0;animation:axCardFloat1 8s ease-in-out infinite}
.ax-agc--knw{top:30px;right:0;animation:axCardFloat2 9s ease-in-out infinite}
.ax-agc--mem{bottom:30px;left:30px;animation:axCardFloat3 7s ease-in-out infinite}
.ax-agc--tool{bottom:30px;right:30px;animation:axCardFloat4 8.5s ease-in-out infinite}
@keyframes axCardFloat1{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes axCardFloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes axCardFloat3{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes axCardFloat4{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ax-agc__h{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1)}
.ax-agc__ic{width:26px;height:26px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.ax-agc__h b{font-size:.88rem;color:#fff;font-weight:700}
.ax-agc__tag{margin-left:auto;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:rgba(99,102,241,.25);color:#c7d2fe}
.ax-agc__body{display:flex;flex-direction:column;gap:6px}

.ax-mod{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid transparent;font-size:.78rem;transition:.2s}
.ax-mod.is-active{background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(168,85,247,.18));border-color:rgba(168,85,247,.4)}
.ax-mod__r{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.3);flex-shrink:0;position:relative;transition:.2s}
.ax-mod.is-active .ax-mod__r{border-color:#a855f7;background:#a855f7;box-shadow:0 0 0 3px rgba(168,85,247,.25)}
.ax-mod b{color:#fff;font-weight:600;font-size:.8rem}
.ax-mod span{color:rgba(255,255,255,.55);font-size:.7rem;margin-left:auto}

.ax-doc{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.04);font-size:.78rem;transition:.15s}
.ax-doc:hover{background:rgba(255,255,255,.08)}
.ax-doc b{color:#fff;font-weight:600;font-size:.78rem;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-doc span{color:rgba(255,255,255,.5);font-size:.68rem}

.ax-mem{padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.04);font-size:.78rem;border-left:2px solid #a855f7}
.ax-mem__t{display:block;font-size:.66rem;color:rgba(255,255,255,.5);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
.ax-mem b{color:#fff;font-weight:500;font-size:.78rem;line-height:1.4;display:block}

.ax-tool{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.04);font-size:.78rem;transition:.15s}
.ax-tool:hover{background:rgba(255,255,255,.08)}
.ax-tool__d{width:18px;height:18px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.62rem;flex-shrink:0;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.ax-tool b{color:#fff;font-weight:600;font-size:.78rem;flex:1}
.ax-tool i{color:rgba(255,255,255,.5);font-size:.66rem;font-style:normal}

.ax-ag-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px;max-width:1100px;margin-left:auto;margin-right:auto}
.ax-agf{padding:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;backdrop-filter:blur(10px);transition:.25s}
.ax-agf:hover{background:rgba(255,255,255,.08);transform:translateY(-3px);border-color:rgba(255,255,255,.18)}
.ax-agf__ic{width:40px;height:40px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.ax-agf b{display:block;color:#fff;font-size:1rem;font-weight:700;margin-bottom:4px;letter-spacing:-.01em}
.ax-agf span{display:block;color:rgba(255,255,255,.65);font-size:.85rem;line-height:1.55}

/* ── Custom integration creator ── */
.ax-cust{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1140px;margin:0 auto;position:relative}
.ax-cust::before{content:"";position:absolute;left:0;right:0;top:90px;height:2px;background:linear-gradient(90deg,#6366f1 0%,#a855f7 33%,#06b6d4 66%,#10b981 100%);background-size:200% 100%;animation:axShimmer 4s linear infinite;border-radius:2px;opacity:.4;z-index:0}
.ax-cust__step{position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 8px 24px rgba(15,23,42,.05);transition:transform .3s,box-shadow .3s,border-color .3s;z-index:1}
.ax-cust__step:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.1);border-color:#c7d2fe}
.ax-cust__no{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.04em;box-shadow:0 6px 16px rgba(99,102,241,.4)}
.ax-cust__step--2 .ax-cust__no{background:linear-gradient(135deg,#a855f7,#ec4899);box-shadow:0 6px 16px rgba(168,85,247,.4)}
.ax-cust__step--3 .ax-cust__no{background:linear-gradient(135deg,#06b6d4,#0891b2);box-shadow:0 6px 16px rgba(6,182,212,.4)}
.ax-cust__step--4 .ax-cust__no{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 6px 16px rgba(16,185,129,.4)}
.ax-cust__lbl{font-size:.84rem;font-weight:700;color:#0f172a;letter-spacing:-.01em}
.ax-cust__url{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fafbff;border:1px solid #e2e8f0;border-radius:10px;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.78rem;color:#0f172a;flex-wrap:wrap}
.ax-cust__url-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-cust__cursor{display:inline-block;width:2px;height:14px;background:#6366f1;animation:axBlink2 1s steps(2,end) infinite;vertical-align:middle;margin-left:1px}
.ax-cust__pill{margin-left:auto;padding:2px 8px;border-radius:999px;background:#dcfce7;color:#15803d;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ax-cust__desc{padding:12px 14px;background:linear-gradient(135deg,#fdf4ff,#fef2f8);border:1px dashed #f0abfc;border-radius:10px;font-size:.84rem;color:#0f172a;line-height:1.5;font-style:italic}
.ax-cust__chips{display:flex;gap:6px;flex-wrap:wrap}
.ax-cust__chip{padding:3px 8px;border-radius:5px;background:#eef2ff;color:#4338ca;font-size:.7rem;font-weight:700;border:1px solid #c7d2fe}
.ax-cust__build{display:flex;flex-direction:column;gap:8px}
.ax-cust__bar{position:relative;height:24px;background:#f1f5f9;border-radius:6px;overflow:hidden;font-size:.74rem;color:#475569}
.ax-cust__bar span{display:flex;align-items:center;height:100%;padding:0 10px;background:linear-gradient(90deg,#a5f3fc,#67e8f9);width:0;animation:axCustFill 1.6s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d,0s);color:#0e7490;font-weight:700;font-size:.72rem;border-radius:6px 0 0 6px}
@keyframes axCustFill{from{width:0}to{width:var(--w,100%)}}
.ax-cust__time{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:#0e7490;font-weight:700;margin-top:4px}
.ax-cust__block{padding:14px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid #86efac;border-radius:12px;display:flex;flex-direction:column;gap:10px;animation:axBlockPop .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:.5s}
@keyframes axBlockPop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.ax-cust__b-head{display:flex;align-items:center;gap:10px}
.ax-cust__b-ic{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#0f172a,#475569);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;flex-shrink:0;box-shadow:0 4px 10px rgba(15,23,42,.2)}
.ax-cust__b-head b{display:block;font-size:.88rem;color:#0f172a;font-weight:800}
.ax-cust__b-head span{display:block;font-size:.7rem;color:#15803d;font-weight:600}
.ax-cust__b-acts{display:flex;flex-direction:column;gap:5px}
.ax-cust__b-acts span{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:#0f172a;font-weight:500}
.ax-cust__b-acts i{width:6px;height:6px;border-radius:50%}
.ax-cust-feet{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-top:36px;padding:18px 28px;background:#fafbff;border:1px solid #e2e8f0;border-radius:14px;max-width:1080px;margin-left:auto;margin-right:auto}
.ax-cust-feet span{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:#475569;font-weight:500}

/* ── Integrations grid ── */
.ax-int-search{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;max-width:480px;margin:0 auto 28px;box-shadow:0 4px 14px rgba(15,23,42,.04);color:#94a3b8;font-size:.88rem;cursor:pointer;transition:.2s}
.ax-int-search:hover{border-color:#c7d2fe;box-shadow:0 8px 22px rgba(99,102,241,.1)}
.ax-int-search span:first-of-type{flex:1}
.ax-int-search__kbd{padding:2px 7px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:5px;font-size:.7rem;font-family:'SF Mono',Menlo,Consolas,monospace;color:#64748b}
.ax-int-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;max-width:1080px;margin:0 auto}
.ax-section.is-in .ax-int{animation:axIntIn .5s cubic-bezier(.22,1,.36,1) backwards}
@keyframes axIntIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ax-int{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border:1px solid #e2e8f0;border-radius:11px;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .2s;cursor:default;min-width:0;position:relative;overflow:hidden}
.ax-int::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(99,102,241,.12),transparent 70%);opacity:0;transition:opacity .25s}
.ax-int:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(15,23,42,.1);border-color:#c7d2fe}
.ax-int:hover::before{opacity:1}
.ax-int__l{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.78rem;flex-shrink:0;box-shadow:0 4px 10px rgba(15,23,42,.15);position:relative;z-index:1;transition:transform .25s}
.ax-int:hover .ax-int__l{transform:scale(1.08)}
.ax-int__n{font-size:.83rem;font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.ax-int-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;max-width:1080px;margin:24px auto 0;padding:18px 22px;background:linear-gradient(135deg,#eef2ff,#fdf4ff);border-radius:14px;border:1px solid #c7d2fe}
.ax-int-foot span{font-size:.92rem;color:#475569}
.ax-int-foot b{color:#0f172a}

/* ── Use cases ── */
.ax-uc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1140px;margin:0 auto}
.ax-uc__c{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:24px;transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.ax-uc__c::before{content:"";position:absolute;inset:-1px;background:linear-gradient(135deg,#6366f1,#a855f7);border-radius:inherit;opacity:0;transition:opacity .3s;z-index:-1}
.ax-uc__c:hover{transform:translateY(-5px);box-shadow:0 24px 48px rgba(15,23,42,.1)}
.ax-uc__c:hover .ax-uc__ic{transform:rotate(-6deg) scale(1.08)}
.ax-uc__ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(15,23,42,.15);margin-bottom:6px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ax-uc__c h3{margin:0;font-size:1.08rem;font-weight:700;color:#0f172a;letter-spacing:-.01em}
.ax-uc__c p{margin:0;font-size:.88rem;color:#475569;line-height:1.55}
.ax-uc__c ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:6px;border-top:1px dashed #e2e8f0;padding-top:12px}
.ax-uc__c li{font-size:.82rem;color:#475569;padding-left:18px;position:relative}
.ax-uc__c li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7)}

/* ── Platform (hosted) ── */
.ax-section--platform{position:relative;background:linear-gradient(180deg,#0a0e1a 0%,#0f1424 50%,#0a0e1a 100%);color:#e2e8f0;overflow:hidden}
.ax-section--platform .ax-section__head h2{color:#fff}
.ax-section--platform .ax-section__head p{color:rgba(255,255,255,.7)}
.ax-platform-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(45% 50% at 20% 20%,rgba(6,182,212,.22),transparent 70%),radial-gradient(40% 50% at 80% 30%,rgba(99,102,241,.22),transparent 70%),radial-gradient(35% 45% at 50% 90%,rgba(16,185,129,.18),transparent 70%);filter:blur(60px) saturate(140%);animation:axMeshFloat 24s ease-in-out infinite alternate}
.ax-section--platform>.ax-container{position:relative;z-index:1}

/* Ops dashboard */
.ax-ops{max-width:1140px;margin:0 auto;background:linear-gradient(180deg,rgba(15,23,42,.92) 0%,rgba(15,23,42,.96) 100%);border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;box-shadow:0 40px 96px rgba(0,0,0,.5),0 0 0 1px rgba(99,102,241,.08),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.ax-ops__head{display:flex;align-items:center;padding:12px 18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));border-bottom:1px solid rgba(255,255,255,.08);gap:16px;flex-wrap:wrap}
.ax-ops__brand{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:.92rem;font-weight:700;letter-spacing:-.01em}
.ax-ops__brand b{background:linear-gradient(100deg,#6366f1,#a855f7,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ax-ops__region{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.6);font-size:.76rem;font-weight:500;font-family:'SF Mono',Menlo,Consolas,monospace}
.ax-ops__live{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;background:rgba(16,185,129,.15);color:#6ee7b7;font-size:.74rem;font-weight:700;border:1px solid rgba(16,185,129,.3);text-transform:uppercase;letter-spacing:.04em}
.ax-ops__body{display:grid;grid-template-columns:1.15fr 1fr;gap:0}
.ax-ops__left{padding:16px;display:flex;flex-direction:column;gap:14px;border-right:1px solid rgba(255,255,255,.06)}
.ax-ops__right{padding:16px;display:flex;flex-direction:column;gap:14px}
.ax-ops__card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:14px;transition:background .2s}
.ax-ops__card:hover{background:rgba(255,255,255,.05)}
.ax-ops__card--big{background:linear-gradient(135deg,rgba(16,185,129,.06),rgba(6,182,212,.06));border-color:rgba(16,185,129,.18)}
.ax-ops__card--feed{flex:1}
.ax-ops__card--agents{flex:1}
.ax-ops__m-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.ax-ops__l{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.ax-ops__chip{padding:2px 8px;border-radius:5px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);font-size:.66rem;font-weight:700;letter-spacing:.04em}
.ax-ops__chip--ok{background:rgba(16,185,129,.15);color:#6ee7b7;border:1px solid rgba(16,185,129,.25)}
.ax-ops__dot-live{display:inline-flex;align-items:center;gap:5px;font-size:.66rem;color:#6ee7b7}
.ax-ops__v{font-size:2.4rem;font-weight:800;line-height:1;color:#fff;letter-spacing:-.03em;margin-bottom:10px;display:flex;align-items:baseline}
.ax-ops__v sub{font-size:.7em;color:#6ee7b7;font-weight:700;margin-left:2px;position:static}
.ax-ops__v--md{font-size:1.7rem}
.ax-ops__spark{width:100%;height:44px;display:block}
.ax-ops__spark-line{stroke-dasharray:640;stroke-dashoffset:640;animation:axSparkDraw 2s cubic-bezier(.22,1,.36,1) .5s forwards}
@keyframes axSparkDraw{to{stroke-dashoffset:0}}
.ax-ops__bars{display:flex;align-items:flex-end;gap:3px;height:44px;padding-top:4px}
.ax-ops__bars i{flex:1;height:var(--h,50%);background:linear-gradient(180deg,#6366f1,#a855f7);border-radius:3px 3px 0 0;transform-origin:bottom;animation:axBarRise .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:var(--d,0s)}
.ax-ops__bars i.is-now{background:linear-gradient(180deg,#06b6d4,#10b981);box-shadow:0 0 12px rgba(6,182,212,.55);animation:axBarRise .7s cubic-bezier(.22,1,.36,1) backwards,axBarPulse 1.8s ease-in-out infinite;animation-delay:var(--d,0s),1s}
@keyframes axBarRise{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes axBarPulse{0%,100%{box-shadow:0 0 12px rgba(6,182,212,.55)}50%{box-shadow:0 0 22px rgba(6,182,212,.85)}}

/* Events feed */
.ax-ops__feed{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:hidden;position:relative}
.ax-ops__feed li{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:start;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);font-size:.8rem;color:rgba(255,255,255,.75);line-height:1.5;opacity:0;transform:translateX(-6px);animation:axFeedIn .5s cubic-bezier(.22,1,.36,1) forwards}
.ax-ops__feed li:nth-child(1){animation-delay:.5s}
.ax-ops__feed li:nth-child(2){animation-delay:.7s}
.ax-ops__feed li:nth-child(3){animation-delay:.9s}
.ax-ops__feed li:nth-child(4){animation-delay:1.1s}
@keyframes axFeedIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.ax-ops__feed b{color:#fff;font-weight:700;margin-right:4px}
.ax-ops__ft{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.68rem;color:rgba(255,255,255,.45);white-space:nowrap;padding-top:2px}
.ax-ops__fi{width:18px;height:18px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.ax-ops__fi--upd{background:rgba(6,182,212,.2);color:#67e8f9}
.ax-ops__fi--ok{background:rgba(16,185,129,.2);color:#6ee7b7}
.ax-ops__fi--deploy{background:rgba(99,102,241,.2);color:#a5b4fc}
.ax-ops__fi--scale{background:rgba(168,85,247,.2);color:#d8b4fe}

/* Agents list */
.ax-ops__agents{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.ax-ops__agents li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);transition:background .2s,transform .2s}
.ax-ops__agents li:hover{background:rgba(255,255,255,.05);transform:translateX(2px)}
.ax-ops__av{width:30px;height:30px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.74rem;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.ax-ops__agents li div{flex:1;min-width:0;line-height:1.3}
.ax-ops__agents li b{display:block;color:#fff;font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-ops__agents li span:not(.ax-ops__st){display:block;color:rgba(255,255,255,.5);font-size:.7rem;font-weight:500}
.ax-ops__st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;flex-shrink:0}
.ax-ops__st i{width:6px;height:6px;border-radius:50%}
.ax-ops__st--ok{background:rgba(16,185,129,.15);color:#6ee7b7}
.ax-ops__st--ok i{background:#10b981;animation:axPulse 1.6s ease-in-out infinite}
.ax-ops__st--upd{background:rgba(234,179,8,.18);color:#fde68a}
.ax-ops__st--upd i{background:#eab308;animation:axSpin 1.2s linear infinite;border:1.5px solid transparent;border-top-color:transparent;border-right-color:#78350f;width:8px;height:8px;border-radius:50%}
.ax-ops__st--upd i{background:conic-gradient(#fde68a 0%, rgba(253,230,138,.15) 80%);animation:axSpin 1.4s linear infinite}

/* Footer row */
.ax-ops__footer{display:flex;align-items:center;gap:14px;padding:14px 18px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.04));border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.ax-ops__team-l{font-size:.78rem;color:rgba(255,255,255,.6);font-weight:600}
.ax-ops__team{display:inline-flex;align-items:center}
.ax-ops__team .ax-ava{width:28px;height:28px;margin-left:-9px;border-color:#0f1424;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.ax-ops__team .ax-ava:first-child{margin-left:0}
.ax-ops__team-meta{margin-left:auto;font-size:.72rem;color:rgba(255,255,255,.5);font-weight:500;font-family:'SF Mono',Menlo,Consolas,monospace;letter-spacing:.04em}

/* Platform feature cards (below dashboard) */
.ax-plat-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1140px;margin:36px auto 0}
.ax-platf{position:relative;padding:22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;backdrop-filter:blur(10px);transition:transform .3s,background .3s,border-color .3s}
.ax-platf::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(99,102,241,.6),rgba(168,85,247,.6),rgba(6,182,212,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.ax-platf:hover{transform:translateY(-4px);background:rgba(255,255,255,.08)}
.ax-platf:hover::before{opacity:1}
.ax-platf:hover .ax-platf__ic{transform:scale(1.1) rotate(-4deg)}
.ax-platf__ic{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 8px 20px rgba(0,0,0,.4);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.ax-platf b{display:block;color:#fff;font-size:1.02rem;font-weight:700;margin-bottom:6px;letter-spacing:-.01em}
.ax-platf span{display:block;color:rgba(255,255,255,.65);font-size:.86rem;line-height:1.6}

/* Note strip */
.ax-plat-note{display:flex;align-items:center;gap:14px;padding:16px 22px;margin:32px auto 0;max-width:1140px;background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(168,85,247,.15));border:1px solid rgba(168,85,247,.3);border-radius:14px;flex-wrap:wrap}
.ax-plat-note>svg{flex-shrink:0;color:#a855f7;filter:drop-shadow(0 0 8px rgba(168,85,247,.6))}
.ax-plat-note span{flex:1;color:rgba(255,255,255,.82);font-size:.92rem;line-height:1.55;min-width:200px}
.ax-plat-note b{color:#fff}
.ax-plat-note__link{color:#c7d2fe;font-size:.88rem;font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(199,210,254,.3);text-underline-offset:3px;transition:.2s}
.ax-plat-note__link:hover{color:#fff;text-decoration-color:#fff}

/* Plans hint */
.ax-plans-note{text-align:center;color:#475569;font-size:.9rem;margin:-32px 0 28px;font-weight:500}
.ax-plans-note::before{content:"✓ ";color:#10b981;font-weight:800}

/* ── Pricing ── */
.ax-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto}
.ax-plan{position:relative;padding:32px 28px;background:#fff;border:1px solid #e2e8f0;border-radius:20px;display:flex;flex-direction:column;gap:18px;transition:transform .35s,box-shadow .35s}
.ax-plan:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(15,23,42,.06)}
.ax-plan--featured{background:linear-gradient(180deg,#6366f1 0%,#7c3aed 50%,#a855f7 100%);border-color:transparent;color:#fff;box-shadow:0 24px 64px rgba(99,102,241,.4);transform:scale(1.04);overflow:hidden}
.ax-plan--featured::before{content:"";position:absolute;inset:-2px;border-radius:inherit;background:conic-gradient(from 0deg,#6366f1,#a855f7,#ec4899,#06b6d4,#10b981,#6366f1);z-index:-1;animation:axPlanRotate 6s linear infinite;filter:blur(2px) saturate(150%)}
@keyframes axPlanRotate{to{transform:rotate(360deg)}}
.ax-plan__glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.25),transparent 60%);pointer-events:none}
.ax-plan--featured:hover{transform:scale(1.04) translateY(-4px);box-shadow:0 32px 80px rgba(99,102,241,.55)}
.ax-plan__badge{position:absolute;top:-10px;right:24px;padding:4px 12px;background:linear-gradient(135deg,#fde047,#facc15);color:#78350f;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;box-shadow:0 4px 12px rgba(250,204,21,.4);z-index:1}
.ax-plan h3{margin:0;font-size:1.2rem;font-weight:700;letter-spacing:-.01em;position:relative;z-index:1}
.ax-plan__price{display:flex;align-items:baseline;gap:6px;position:relative;z-index:1}
.ax-plan__p{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;line-height:1}
.ax-plan__per{font-size:.82rem;opacity:.7;font-weight:500}
.ax-plan__features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;flex:1;position:relative;z-index:1}
.ax-plan__features li{position:relative;padding-left:26px;font-size:.9rem;line-height:1.5}
.ax-plan__features li::before{content:'';position:absolute;left:0;top:5px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#10b981,#34d399)}
.ax-plan__features li::after{content:'';position:absolute;left:4px;top:8px;width:5px;height:2px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.ax-plan--featured .ax-plan__features li::before{background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.4)}
.ax-plan--featured .ax-btn--primary{background:#fff;color:#4338ca;box-shadow:0 4px 14px rgba(0,0,0,.18);position:relative;z-index:1}

/* ── Final CTA ── */
.ax-finalcta{position:relative;padding:128px 0;background:#0b0f1a;color:#fff;overflow:hidden;isolation:isolate;text-align:center;opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.ax-finalcta.is-in{opacity:1;transform:translateY(0)}
.ax-finalcta__mesh{position:absolute;inset:0;z-index:-3;background:radial-gradient(40% 50% at 30% 20%,rgba(99,102,241,.4),transparent 70%),radial-gradient(35% 45% at 70% 70%,rgba(168,85,247,.35),transparent 70%),radial-gradient(30% 40% at 50% 50%,rgba(6,182,212,.22),transparent 70%);filter:blur(60px)}
.ax-finalcta__stars{position:absolute;inset:0;z-index:-2;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 40% 70%,rgba(255,255,255,.7),transparent),radial-gradient(1.5px 1.5px at 65% 20%,#fff,transparent),radial-gradient(1px 1px at 80% 80%,rgba(255,255,255,.5),transparent),radial-gradient(1px 1px at 10% 90%,#fff,transparent);background-size:400px 400px,300px 300px,350px 350px,420px 420px,280px 280px;opacity:.6}
.ax-finalcta__beam{position:absolute;left:50%;top:-10%;width:120%;height:80%;transform:translateX(-50%) rotate(8deg);z-index:-2;background:linear-gradient(180deg,rgba(168,85,247,.2),transparent);filter:blur(50px);opacity:.6;animation:axBeam 12s ease-in-out infinite alternate}
@keyframes axBeam{0%{transform:translateX(-50%) rotate(8deg) translateY(0)}100%{transform:translateX(-50%) rotate(-8deg) translateY(20px)}}
.ax-finalcta__orb{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(60px)}
.ax-finalcta__orb--a{width:520px;height:520px;top:-180px;right:-120px;background:radial-gradient(circle,rgba(99,102,241,.4),transparent 70%);animation:axOrb 14s ease-in-out infinite alternate}
.ax-finalcta__orb--b{width:440px;height:440px;bottom:-140px;left:-100px;background:radial-gradient(circle,rgba(168,85,247,.35),transparent 70%);animation:axOrb 16s ease-in-out infinite alternate-reverse}
.ax-finalcta__in{max-width:680px;margin:0 auto;position:relative;z-index:1}
.ax-finalcta h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;color:#fff;margin:0 0 16px;letter-spacing:-.035em;line-height:1.1}
.ax-finalcta p{color:rgba(255,255,255,.78);font-size:1.06rem;line-height:1.65;margin:0 0 32px}
.ax-finalcta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── Footer ── */
.ax-footer{background:#0b0f1a;color:#94a3b8;padding:40px 0}
.ax-footer__in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.ax-footer__brand{display:inline-flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;color:#fff}
.ax-footer__brand b{background:linear-gradient(100deg,#6366f1,#a855f7,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ax-footer__nav{display:flex;gap:22px;flex-wrap:wrap}
.ax-footer__nav a{font-size:.86rem;color:#94a3b8;transition:color .2s}
.ax-footer__nav a:hover{color:#fff}
.ax-footer__copy{font-size:.8rem;color:#64748b;margin:0}

/* ── Hero prompt input mockup ── */
.ax-prompt{margin:6px 0 28px;max-width:560px;background:linear-gradient(180deg,#fff,#fbfaff);border:1px solid #e4e4ee;border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 22px 48px -28px rgba(99,102,241,.35),0 6px 18px -8px rgba(15,23,42,.08);overflow:hidden;position:relative}
.ax-prompt::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(135deg,rgba(99,102,241,.45),transparent 40%,transparent 60%,rgba(168,85,247,.4));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55}
.ax-prompt__tabs{display:flex;gap:4px;align-items:center;padding:10px 12px;background:rgba(249,250,253,.9);border-bottom:1px solid #eceaf3}
.ax-prompt__tab{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;font-size:.78rem;font-weight:600;color:#64748b;background:transparent;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:all .2s}
.ax-prompt__tab:hover{color:#0f172a;background:rgba(99,102,241,.06)}
.ax-prompt__tab.is-active{color:#6366f1;background:#fff;border-color:#e1e0ef;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.ax-prompt__hint{margin-left:auto;font-size:.7rem;font-weight:600;color:#94a3b8;padding:4px 8px;background:#f1f5f9;border-radius:6px;letter-spacing:.02em}
.ax-prompt__body{display:flex;align-items:center;gap:10px;padding:14px 14px 12px}
.ax-prompt__mic{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -4px rgba(99,102,241,.55)}
.ax-prompt__mic-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(99,102,241,.4);animation:axMicRing 2s ease-out infinite}
@keyframes axMicRing{0%{transform:scale(.85);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.ax-prompt__text{flex:1;font-size:.9rem;color:#0f172a;font-weight:500;line-height:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-prompt__text b{color:#6366f1;font-weight:700}
.ax-prompt__cursor{display:inline-block;width:2px;height:14px;background:#6366f1;margin-left:2px;vertical-align:middle;animation:axBlink 1s steps(2,end) infinite}
@keyframes axBlink{50%{opacity:0}}
.ax-prompt__wave{display:inline-flex;align-items:flex-end;gap:2px;height:22px;flex:none}
.ax-prompt__wave i{width:2px;background:linear-gradient(180deg,#6366f1,#a855f7);border-radius:2px;animation:axWave 1.1s ease-in-out infinite}
.ax-prompt__wave i:nth-child(1){height:30%;animation-delay:0s}
.ax-prompt__wave i:nth-child(2){height:60%;animation-delay:.06s}
.ax-prompt__wave i:nth-child(3){height:80%;animation-delay:.12s}
.ax-prompt__wave i:nth-child(4){height:45%;animation-delay:.18s}
.ax-prompt__wave i:nth-child(5){height:90%;animation-delay:.24s}
.ax-prompt__wave i:nth-child(6){height:55%;animation-delay:.3s}
.ax-prompt__wave i:nth-child(7){height:35%;animation-delay:.36s}
.ax-prompt__wave i:nth-child(8){height:75%;animation-delay:.42s}
.ax-prompt__wave i:nth-child(9){height:50%;animation-delay:.48s}
.ax-prompt__wave i:nth-child(10){height:85%;animation-delay:.54s}
.ax-prompt__wave i:nth-child(11){height:40%;animation-delay:.6s}
.ax-prompt__wave i:nth-child(12){height:70%;animation-delay:.66s}
.ax-prompt__wave i:nth-child(13){height:30%;animation-delay:.72s}
.ax-prompt__wave i:nth-child(14){height:65%;animation-delay:.78s}
.ax-prompt__wave i:nth-child(15){height:50%;animation-delay:.84s}
.ax-prompt__wave i:nth-child(16){height:90%;animation-delay:.9s}
.ax-prompt__wave i:nth-child(17){height:40%;animation-delay:.96s}
.ax-prompt__wave i:nth-child(18){height:65%;animation-delay:1.02s}
.ax-prompt__wave i:nth-child(19){height:35%;animation-delay:1.08s}
.ax-prompt__wave i:nth-child(20){height:75%;animation-delay:1.14s}
.ax-prompt__wave i:nth-child(21){height:50%;animation-delay:1.2s}
.ax-prompt__wave i:nth-child(22){height:60%;animation-delay:1.26s}
@keyframes axWave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1.1)}}
.ax-prompt__go{flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:10px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 14px -6px rgba(99,102,241,.7);transition:transform .15s}
.ax-prompt__go:hover{transform:translateY(-1px)}
.ax-prompt__foot{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 11px;font-size:.72rem;color:#94a3b8;font-weight:500;border-top:1px solid #f1efff}
.ax-prompt__live{display:inline-flex;align-items:center;gap:5px;color:#a855f7;font-weight:600}

/* ── The shift section (category) ── */
.ax-section--shift{background:linear-gradient(180deg,#fafbff 0%,#fff 100%);position:relative}
.ax-section--shift::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.2),transparent)}
.ax-shift{display:grid;grid-template-columns:1fr 60px 1fr;gap:22px;align-items:stretch;max-width:1060px;margin:0 auto}
.ax-shift__col{position:relative;padding:34px 30px;border-radius:22px;display:flex;flex-direction:column;gap:20px;overflow:hidden}
.ax-shift__col--old{background:linear-gradient(180deg,#f5f5f7,#fafafa);border:1px solid #e4e4ea;color:#64748b;filter:saturate(.6)}
.ax-shift__col--new{background:linear-gradient(180deg,#0f172a 0%,#1a1f3a 100%);border:1px solid rgba(99,102,241,.3);color:rgba(255,255,255,.92);box-shadow:0 30px 60px -30px rgba(99,102,241,.4)}
.ax-shift__col--new::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 30% 0%,rgba(99,102,241,.2),transparent 70%),radial-gradient(50% 40% at 80% 100%,rgba(168,85,247,.18),transparent 70%);pointer-events:none}
.ax-shift__glow{position:absolute;top:-40%;right:-20%;width:70%;height:70%;background:radial-gradient(circle,rgba(99,102,241,.35),transparent 65%);filter:blur(40px);pointer-events:none;animation:axShiftGlow 6s ease-in-out infinite alternate}
@keyframes axShiftGlow{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-10%,10%) scale(1.1)}}
.ax-shift__head{position:relative;display:flex;flex-direction:column;gap:6px;z-index:1}
.ax-shift__tag{display:inline-flex;align-self:flex-start;padding:4px 10px;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(100,116,139,.12);color:#64748b}
.ax-shift__tag--new{background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(168,85,247,.2));color:#c4b5fd;border:1px solid rgba(167,139,250,.25)}
.ax-shift__head b{font-size:1.35rem;font-weight:800;letter-spacing:-.02em}
.ax-shift__col--new .ax-shift__head b{background:linear-gradient(135deg,#a78bfa,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ax-shift__sub{font-size:.86rem;opacity:.78;font-weight:500}
.ax-shift__list{position:relative;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;z-index:1}
.ax-shift__list li{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;line-height:1.45;font-weight:500}
.ax-shift__col--old .ax-shift__list li{text-decoration:line-through;text-decoration-color:rgba(100,116,139,.35);text-decoration-thickness:1.5px}
.ax-shift__ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;margin-top:1px}
.ax-shift__ic--x{background:rgba(148,163,184,.18);color:#94a3b8}
.ax-shift__ic--ok{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 10px -4px rgba(16,185,129,.5)}
.ax-shift__arrow{align-self:center;justify-self:center;width:60px}
.ax-shift__arrow svg{width:100%;height:auto;animation:axShiftArr 2.4s ease-in-out infinite}
@keyframes axShiftArr{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ── AI chat voice mode ── */
.ax-aichat__mic{position:relative;flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 4px 10px -4px rgba(99,102,241,.55)}
.ax-aichat__mic-ring{position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(99,102,241,.4);animation:axMicRing 2s ease-out infinite}
.ax-aichat__inp-text{flex:1;min-width:0;font-size:.82rem;color:#0f172a;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-aichat__inp-cur{display:inline-block;width:2px;height:12px;background:#6366f1;margin-left:2px;vertical-align:middle;animation:axBlink 1s steps(2,end) infinite}
.ax-aichat__inp-wave{display:inline-flex;align-items:flex-end;gap:1.5px;height:16px;flex:none}
.ax-aichat__inp-wave i{width:1.5px;background:linear-gradient(180deg,#6366f1,#a855f7);border-radius:2px;animation:axWave 1.1s ease-in-out infinite}
.ax-aichat__inp-wave i:nth-child(1){height:30%;animation-delay:0s}
.ax-aichat__inp-wave i:nth-child(2){height:65%;animation-delay:.08s}
.ax-aichat__inp-wave i:nth-child(3){height:45%;animation-delay:.16s}
.ax-aichat__inp-wave i:nth-child(4){height:85%;animation-delay:.24s}
.ax-aichat__inp-wave i:nth-child(5){height:55%;animation-delay:.32s}
.ax-aichat__inp-wave i:nth-child(6){height:75%;animation-delay:.4s}
.ax-aichat__inp-wave i:nth-child(7){height:40%;animation-delay:.48s}
.ax-aichat__inp-wave i:nth-child(8){height:90%;animation-delay:.56s}
.ax-aichat__inp-wave i:nth-child(9){height:50%;animation-delay:.64s}
.ax-aichat__inp-wave i:nth-child(10){height:70%;animation-delay:.72s}
.ax-aichat__inp-wave i:nth-child(11){height:45%;animation-delay:.8s}
.ax-aichat__inp-wave i:nth-child(12){height:80%;animation-delay:.88s}
.ax-aichat__inp-wave i:nth-child(13){height:55%;animation-delay:.96s}
.ax-aichat__inp-wave i:nth-child(14){height:35%;animation-delay:1.04s}

/* ── Custom block voice/type toggle ── */
.ax-cust__modes{display:inline-flex;align-items:center;gap:4px;padding:3px;background:#f1f5f9;border-radius:8px;margin-bottom:10px;align-self:flex-start}
.ax-cust__mode{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:6px;font-size:.7rem;font-weight:600;color:#64748b;transition:all .2s}
.ax-cust__mode.is-active{background:#fff;color:#6366f1;box-shadow:0 1px 2px rgba(15,23,42,.06)}

/* ── Brain core orbit ring ── */
.ax-ag__orbit{position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(99,102,241,.7) 90deg,transparent 180deg,rgba(168,85,247,.6) 270deg,transparent 360deg);-webkit-mask:radial-gradient(circle,transparent 48%,#000 49%,#000 54%,transparent 55%);mask:radial-gradient(circle,transparent 48%,#000 49%,#000 54%,transparent 55%);animation:axOrbit 8s linear infinite;pointer-events:none;z-index:0}
.ax-ag__orbit--2{inset:-26px;background:conic-gradient(from 180deg,transparent 0deg,rgba(6,182,212,.5) 90deg,transparent 180deg,rgba(16,185,129,.45) 270deg,transparent 360deg);-webkit-mask:radial-gradient(circle,transparent 47%,#000 48%,#000 50%,transparent 51%);mask:radial-gradient(circle,transparent 47%,#000 48%,#000 50%,transparent 51%);animation:axOrbit 14s linear infinite reverse;opacity:.8}
@keyframes axOrbit{to{transform:rotate(360deg)}}

/* ── Stats / Social proof section ── */
.ax-section--stats{position:relative;background:linear-gradient(180deg,#0b0f1a 0%,#121732 60%,#0b0f1a 100%);color:#fff;overflow:hidden}
.ax-section--stats .ax-section__head h2{color:#fff}
.ax-section--stats .ax-section__head p{color:rgba(255,255,255,.7)}
.ax-stats-bg{position:absolute;inset:0;background:radial-gradient(40% 50% at 20% 30%,rgba(99,102,241,.25),transparent 70%),radial-gradient(35% 45% at 80% 70%,rgba(168,85,247,.22),transparent 70%);filter:blur(40px);pointer-events:none}
.ax-stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0 auto 48px;max-width:1100px}
.ax-stat{position:relative;padding:26px 22px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:18px;backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:10px;overflow:hidden;transition:transform .3s,border-color .3s}
.ax-stat::before{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(135deg,rgba(99,102,241,.35),transparent 40%,transparent 60%,rgba(168,85,247,.3));-webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.4;transition:opacity .3s}
.ax-stat:hover{transform:translateY(-4px)}
.ax-stat:hover::before{opacity:1}
.ax-stat__ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.ax-stat__v{font-size:clamp(2rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,#fff,#c7d2fe);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ax-stat__v sup{font-size:.5em;font-weight:700;margin-left:2px;vertical-align:super}
.ax-stat__l{font-size:.85rem;color:rgba(255,255,255,.6);font-weight:500;line-height:1.4}
.ax-logos{position:relative;text-align:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.06)}
.ax-logos__l{display:block;font-size:.72rem;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.ax-logos__row{display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;opacity:.55;filter:grayscale(1)}
.ax-logos__i{font-size:1rem;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:-.01em;font-family:ui-sans-serif,system-ui,sans-serif}

/* ── Final CTA refresh ── */
.ax-finalcta__meta{margin-top:18px;font-size:.78rem;color:rgba(255,255,255,.55);font-weight:500}
.ax-pill--light{display:inline-block;margin-bottom:18px;padding:6px 14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#c7d2fe;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;backdrop-filter:blur(10px)}
.ax-finalcta .ax-gradient-text{background:linear-gradient(135deg,#a78bfa,#22d3ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── Focus visible ── */
a:focus-visible,.ax-btn:focus-visible,button:focus-visible{outline:2px solid #6366f1;outline-offset:3px;border-radius:8px}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    .ax-section,.ax-finalcta{opacity:1!important;transform:none!important}
    .ax-node,.ax-edge,.ax-mini__node,.ax-mini__edge{opacity:1!important;stroke-dashoffset:0!important;transform:none!important}
    .ax-particle{display:none}
}

/* ── Responsive ── */
@media(max-width:1100px){
    .ax-hero__wrap{grid-template-columns:1fr;gap:48px;padding-top:8px}
    .ax-hero__right{max-width:680px;margin:0 auto;width:100%}
    .ax-builder__body{grid-template-columns:170px 1fr 200px}
    .ax-int-grid{grid-template-columns:repeat(4,1fr)}
    .ax-feats,.ax-ag-feats{grid-template-columns:repeat(2,1fr)}
    .ax-uc{grid-template-columns:repeat(2,1fr)}
    .ax-cust{grid-template-columns:repeat(2,1fr)}
    .ax-cust::before{display:none}
    .ax-ag{height:auto;display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px 0}
    .ax-ag__core{position:relative;left:auto;top:auto;transform:none;order:0}
    .ax-agc{position:relative;top:auto;left:auto;right:auto;bottom:auto;width:100%;max-width:480px;animation:none!important}
    .ax-ag__lines{display:none}
    .ax-plat-feats{grid-template-columns:repeat(2,1fr)}
    .ax-shift{grid-template-columns:1fr;gap:14px}
    .ax-shift__arrow{transform:rotate(90deg);justify-self:center;margin:4px 0}
    .ax-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
    .ax-nav__links,.ax-nav__cta{display:none}
    .ax-nav__burger{display:flex;margin-left:auto}
    .ax-nav.is-open .ax-nav__links,.ax-nav.is-open .ax-nav__cta{display:flex}
    .ax-nav.is-open .ax-nav__in{flex-wrap:wrap}
    .ax-nav.is-open .ax-nav__links{flex-direction:column;width:100%;gap:14px;padding:16px 0 8px;margin-left:0;border-top:1px solid #e2e8f0}
    .ax-nav.is-open .ax-nav__cta{width:100%;padding-bottom:12px;margin-left:0}
    .ax-nav.is-open .ax-nav__cta>*{flex:1;text-align:center;justify-content:center}
    .ax-hero{padding:56px 0 80px}
    .ax-hero__orb--a,.ax-hero__orb--b{display:none}
    .ax-section{padding:72px 0}
    .ax-section__head{margin-bottom:40px}
    .ax-flow3{grid-template-columns:1fr;gap:12px}
    .ax-flow3__arrow{transform:rotate(90deg)}
    .ax-builder__avas{display:none}
    .ax-builder__pal,.ax-builder__props{display:none}
    .ax-builder__body{grid-template-columns:1fr}
    .ax-int-grid{grid-template-columns:repeat(3,1fr)}
    .ax-int__n{font-size:.78rem}
    .ax-ai-split{grid-template-columns:1fr}
    .ax-cust-feet{flex-direction:column;align-items:center;gap:14px;text-align:center}
    .ax-ops__body{grid-template-columns:1fr}
    .ax-ops__left{border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}
    .ax-ops__footer{flex-direction:column;text-align:center;gap:10px}
    .ax-ops__team-meta{margin-left:0}
    .ax-prompt{max-width:100%}
    .ax-prompt__wave{display:none}
    .ax-prompt__text{white-space:normal;font-size:.82rem}
    .ax-logos__row{gap:20px}
    .ax-logos__i{font-size:.88rem}
    .ax-plans{grid-template-columns:1fr}
    .ax-plan--featured{transform:none}
    .ax-plan--featured:hover{transform:translateY(-4px)}
    .ax-footer__in{flex-direction:column;text-align:center}
    .ax-footer__nav{justify-content:center}
}
@media(max-width:520px){
    .ax-hero__title{font-size:2.1rem}
    .ax-hero__sub{font-size:1rem}
    .ax-hero__actions{flex-direction:column;align-items:stretch}
    .ax-hero__actions .ax-btn{justify-content:center}
    .ax-int-grid{grid-template-columns:repeat(2,1fr)}
    .ax-feats,.ax-ag-feats{grid-template-columns:1fr}
    .ax-plat-feats{grid-template-columns:1fr}
    .ax-uc{grid-template-columns:1fr}
    .ax-cust{grid-template-columns:1fr}
    .ax-ag__core{width:160px;height:160px}
    .ax-ag__brain{width:50px;height:50px}
    .ax-stats{grid-template-columns:1fr}
    .ax-stat__v{font-size:1.8rem}
    .ax-shift__col{padding:22px 20px}
    .ax-prompt__tabs{padding:8px 10px}
    .ax-prompt__body{padding:12px 10px 10px;flex-wrap:wrap}
    .ax-prompt__text{flex:1 1 100%;order:2}
    .ax-finalcta h2{font-size:2.1rem}
}

/* ============================================================
   INTERACTIVE DEMOS — workflow builder + custom block
   ============================================================ */

/* Topbar live-demo badge */
.ax-builder__live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;margin-left:auto;margin-right:10px;background:rgba(16,185,129,.1);color:#047857;border:1px solid rgba(16,185,129,.25);border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.ax-builder__live .ax-pulse{background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.5)}

/* Palette — now buttons with toggleable "in use" state */
.ax-pal__search input{flex:1;border:none;background:none;outline:none;font:inherit;font-size:.82rem;color:#0f172a;padding:0;min-width:0}
.ax-pal__search input::placeholder{color:#94a3b8}
.ax-pal__i{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:1px solid transparent;background:none;border-radius:7px;font:inherit;font-size:.82rem;color:#475569;cursor:pointer;transition:.12s;text-align:left}
.ax-pal__i:hover{background:#eef2ff;color:#0f172a}
.ax-pal__i i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;color:#fff;font-size:.68rem;font-weight:700;flex-shrink:0}
.ax-pal__i em{margin-left:auto;font-style:normal;font-size:.62rem;font-weight:700;padding:2px 6px;background:rgba(99,102,241,.14);color:#4338ca;border-radius:99px;text-transform:uppercase;letter-spacing:.04em}
.ax-pal__i.is-on{background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(168,85,247,.08));border-color:rgba(99,102,241,.22);color:#0f172a}

/* Canvas — HTML nodes over SVG bg */
.ax-builder__canvas{position:relative;background:#fafbff;overflow:hidden;min-height:280px}
.ax-canvas__bg,.ax-canvas__edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ax-canvas__edges{z-index:1}
.ax-edge{transition:stroke-width .2s,filter .2s}
.ax-node{position:absolute;z-index:2;width:150px;min-height:72px;padding:9px 11px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;text-align:left;box-shadow:0 6px 18px -8px rgba(15,23,42,.25),0 1px 2px rgba(15,23,42,.04);cursor:pointer;font:inherit;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.ax-node:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(15,23,42,.3),0 2px 4px rgba(15,23,42,.05);border-color:#cbd5e1}
.ax-node.is-active{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.18),0 14px 28px -12px rgba(99,102,241,.4)}
.ax-node__head{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.ax-node__ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;color:#fff;font-size:.74rem;font-weight:700;flex-shrink:0}
.ax-node__badge{font-size:.58rem;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.08em}
.ax-node__state{margin-left:auto;width:12px;height:12px;border-radius:99px;background:#e2e8f0;position:relative;flex-shrink:0}
.ax-node__title{font-size:.86rem;font-weight:700;color:#0f172a;line-height:1.2}
.ax-node__sub{font-size:.7rem;color:#64748b}
.ax-node.is-done .ax-node__state{background:#10b981}
.ax-node.is-done .ax-node__state::after{content:'';position:absolute;left:3px;top:6px;width:4px;height:2px;border:solid #fff;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)}
.ax-node.is-running .ax-node__state{background:#6366f1;animation:axNodeRun 1.1s ease-in-out infinite}
.ax-node.is-running{border-color:#6366f1}
.ax-node.is-error .ax-node__state{background:#ef4444}
.ax-node.is-error{border-color:#fca5a5}
@keyframes axNodeRun{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.55)}50%{box-shadow:0 0 0 6px rgba(99,102,241,0)}}

/* Output chips next to nodes (positioned absolutely below each node) */
.ax-node__out{position:absolute;z-index:3;max-width:240px}
.ax-node__out[data-out="n2"]{left:200px;top:124px}
.ax-node__out[data-out="n3"]{left:390px;top:178px}
.ax-node__out[data-out="n4"]{left:580px;top:124px}
.ax-chip-mini{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:#fff;border:1px solid #c7d2fe;border-radius:99px;font-size:.7rem;color:#4338ca;box-shadow:0 6px 14px -6px rgba(99,102,241,.3);max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-chip-mini img{width:12px;height:12px;border-radius:2px;flex-shrink:0}
.ax-chip-mini b{font-weight:700;color:#1e1b4b;overflow:hidden;text-overflow:ellipsis}
.ax-chip-mini--ok{border-color:#86efac;color:#047857;background:#ecfdf5}
.ax-chip-mini--warn{border-color:#fcd34d;color:#92400e;background:#fffbeb}

/* Canvas hint */
.ax-builder__hint{position:absolute;top:12px;right:12px;display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid #e2e8f0;border-radius:99px;font-size:.7rem;color:#64748b;z-index:3}
.ax-builder__hint b{color:#0f172a;font-weight:700}

/* Props panel — dynamic cards */
.ax-props__card{font-size:.82rem}
.ax-props__head{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #e2e8f0}
.ax-props__head b{font-size:.92rem;color:#0f172a}
.ax-props__sw{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;color:#fff;font-size:.86rem;font-weight:700}
.ax-chip--off{background:#f1f5f9!important;color:#94a3b8!important;border-color:transparent!important}

/* Runner sheet (slide up) */
.ax-runner{position:absolute;inset:0;z-index:10;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s}
.ax-runner.is-open{opacity:1}
.ax-runner__sheet{position:relative;width:100%;max-width:560px;background:#fff;border-radius:16px 16px 0 0;padding:20px 22px 22px;transform:translateY(100%);transition:transform .3s cubic-bezier(.34,1.24,.64,1);box-shadow:0 -20px 40px -12px rgba(15,23,42,.3)}
.ax-runner.is-open .ax-runner__sheet{transform:translateY(0)}
.ax-runner__close{position:absolute;top:10px;right:12px}
.ax-runner__close button{width:28px;height:28px;border:none;background:#f1f5f9;border-radius:8px;color:#64748b;font-size:1.3rem;line-height:1;cursor:pointer;transition:.12s}
.ax-runner__close button:hover{background:#e2e8f0;color:#0f172a}
.ax-runner h4{margin:0 0 4px;font-size:1.08rem;color:#0f172a}
.ax-runner p{margin:0 0 14px;font-size:.84rem;color:#64748b}
.ax-runner__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.ax-runner__lbl{display:flex;flex-direction:column;gap:4px;font-size:.75rem;font-weight:700;color:#334155}
.ax-runner__lbl span{font-weight:500;color:#94a3b8;font-size:.7rem}
.ax-runner__in{padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:.86rem;color:#0f172a;background:#fafbff;font-family:inherit;outline:none;transition:.12s}
.ax-runner__in:focus{border-color:#6366f1;background:#fff;box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.ax-runner__consent{display:flex;align-items:flex-start;gap:8px;padding:10px;background:#f8fafc;border-radius:9px;font-size:.75rem;color:#475569;line-height:1.4;cursor:pointer}
.ax-runner__consent input{margin-top:2px;accent-color:#6366f1}
.ax-runner__hp{position:absolute;left:-9999px;opacity:0}
.ax-runner__actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.ax-bbtn--lg{padding:9px 18px;font-size:.88rem}
.ax-runner__meta{margin:12px 0 0;font-size:.7rem;color:#94a3b8;text-align:center}

/* Toast */
.ax-toast{position:absolute;bottom:46px;left:50%;transform:translate(-50%,10px);z-index:20;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:#0f172a;color:#fff;border-radius:9px;font-size:.82rem;box-shadow:0 12px 32px -12px rgba(15,23,42,.5);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:calc(100% - 40px)}
.ax-toast.is-in{opacity:1;transform:translate(-50%,0)}
.ax-toast svg{color:#10b981;flex-shrink:0}

/* ----- Custom block demo (ax-cust2) ------------------------ */
.ax-cust2{max-width:1100px;margin:0 auto;position:relative}
.ax-cust2__hero{text-align:center;margin-bottom:28px}
.ax-cust2__badge{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;background:rgba(16,185,129,.1);color:#047857;border:1px solid rgba(16,185,129,.25);border-radius:999px;font-size:.75rem;font-weight:700;margin-bottom:14px}
.ax-cust2__url{display:flex;align-items:stretch;gap:0;background:#fff;border:2px solid #e2e8f0;border-radius:14px;padding:6px;max-width:640px;margin:0 auto;box-shadow:0 24px 48px -18px rgba(15,23,42,.2),0 2px 6px rgba(15,23,42,.05);transition:.15s}
.ax-cust2__url:focus-within{border-color:#6366f1;box-shadow:0 0 0 4px rgba(99,102,241,.14),0 24px 48px -18px rgba(99,102,241,.3)}
.ax-cust2__url svg{margin:0 8px 0 12px;flex-shrink:0;align-self:center}
.ax-cust2__in{flex:1;border:none;outline:none;font-size:1rem;color:#0f172a;background:none;padding:10px 8px;font-family:inherit;min-width:0}
.ax-cust2__in::placeholder{color:#94a3b8}
.ax-cust2__go{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:10px;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:.15s;flex-shrink:0;min-width:140px}
.ax-cust2__go:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 20px -6px rgba(99,102,241,.5)}
.ax-cust2__go:disabled{opacity:.7;cursor:progress}
.ax-cust2__go-t{display:inline-flex;align-items:center;gap:6px}
.ax-cust2__go-t--busy svg{animation:axSpin 1s linear infinite}
@keyframes axSpin{to{transform:rotate(360deg)}}
.ax-cust2__examples{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:14px;font-size:.78rem;color:#64748b}
.ax-cust2__examples button{padding:4px 10px;background:#f1f5f9;border:1px solid transparent;border-radius:99px;font:inherit;font-size:.75rem;color:#475569;cursor:pointer;transition:.12s;font-family:'SF Mono',Menlo,Consolas,monospace}
.ax-cust2__examples button:hover{background:#e0e7ff;color:#4338ca;border-color:#c7d2fe}

/* Pipeline */
.ax-cust2__pipeline{display:flex;align-items:stretch;justify-content:center;gap:4px;flex-wrap:nowrap;padding:18px 12px;background:linear-gradient(180deg,#fafbff,#f1f5f9);border:1px solid #e2e8f0;border-radius:14px;margin-bottom:20px;overflow-x:auto}
.ax-cust2__pstep{flex:1 1 0;min-width:150px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:11px;transition:.2s;position:relative;opacity:.55}
.ax-cust2__pstep.is-active{opacity:1;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.18)}
.ax-cust2__pstep.is-active .ax-cust2__pic{animation:axPicPulse 1.1s ease-in-out infinite}
.ax-cust2__pstep.is-done{opacity:1;border-color:#10b981;background:linear-gradient(180deg,#fff,#ecfdf5)}
.ax-cust2__pstep.is-done .ax-cust2__pic{background:#10b981!important}
.ax-cust2__pstep.is-error{opacity:1;border-color:#ef4444;background:#fef2f2}
@keyframes axPicPulse{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.55)}50%{box-shadow:0 0 0 8px rgba(99,102,241,0)}}
.ax-cust2__pno{font-size:.62rem;font-weight:800;color:#94a3b8;letter-spacing:.08em}
.ax-cust2__pic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:#fff}
.ax-cust2__pic--a{background:linear-gradient(135deg,#f97316,#ef4444)}
.ax-cust2__pic--b{background:linear-gradient(135deg,#3b82f6,#06b6d4)}
.ax-cust2__pic--c{background:linear-gradient(135deg,#6366f1,#a855f7)}
.ax-cust2__pic--d{background:linear-gradient(135deg,#10b981,#059669)}
.ax-cust2__pstep b{font-size:.88rem;color:#0f172a}
.ax-cust2__pstep span:last-child{font-size:.72rem;color:#64748b}
.ax-cust2__parr{display:flex;align-items:center;color:#cbd5e1;flex-shrink:0;padding:0 2px}

/* Result card */
.ax-cust2__result{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;padding:22px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 24px 64px -24px rgba(15,23,42,.2),0 2px 8px rgba(15,23,42,.04);opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}
.ax-cust2__result.is-in{opacity:1;transform:translateY(0)}
.ax-cust2__r-preview{display:grid;grid-template-columns:130px 1fr;gap:14px;margin-bottom:14px}
.ax-cust2__r-og{width:130px;height:84px;border-radius:10px;background:#f1f5f9;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#cbd5e1;border:1px solid #e2e8f0;position:relative}
.ax-cust2__r-og img{width:100%;height:100%;object-fit:cover;display:block}
.ax-cust2__r-og-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ax-cust2__r-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.ax-cust2__r-title-row{display:flex;align-items:center;gap:8px}
.ax-cust2__r-title-row img{width:16px;height:16px;border-radius:3px;flex-shrink:0}
.ax-cust2__r-title-row b{font-size:1rem;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-cust2__r-url{font-size:.8rem;color:#6366f1;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-cust2__r-url:hover{text-decoration:underline}
.ax-cust2__r-summary{padding:14px 16px;background:linear-gradient(135deg,#eef2ff,#fdf4ff);border-radius:11px;border:1px solid rgba(99,102,241,.16)}
.ax-cust2__r-summary p{margin:6px 0 0;font-size:.88rem;color:#1e1b4b;line-height:1.5}
.ax-cust2__r-tag{display:inline-flex;align-items:center;padding:2px 8px;background:rgba(99,102,241,.14);color:#4338ca;font-size:.62rem;font-weight:800;letter-spacing:.08em;border-radius:99px}

/* Block "card" right side */
.ax-cust2__r-block{padding:14px 16px;background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px}
.ax-cust2__r-b-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ax-cust2__r-b-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;border-radius:9px;font-weight:800;font-size:.84rem;flex-shrink:0}
.ax-cust2__r-b-head>div{flex:1;min-width:0}
.ax-cust2__r-b-head b{display:block;font-size:.88rem;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-cust2__r-b-head span{font-size:.72rem;color:#64748b}
.ax-cust2__r-b-acts{display:flex;flex-direction:column;gap:4px}
.ax-cust2__r-b-acts span{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#fff;border:1px solid #e2e8f0;border-radius:7px;font-size:.76rem;color:#475569}
.ax-cust2__r-b-acts i{width:7px;height:7px;border-radius:99px;flex-shrink:0}

/* Email prompt */
.ax-cust2__email{padding:14px 16px;background:#fafbff;border:1px dashed #c7d2fe;border-radius:12px}
.ax-cust2__email b{display:block;font-size:.92rem;color:#0f172a;margin-bottom:2px}
.ax-cust2__email p{margin:0 0 10px;font-size:.78rem;color:#64748b}
.ax-cust2__email-row{display:flex;gap:8px;margin-bottom:8px}
.ax-cust2__email-in{flex:1;padding:9px 12px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:.86rem;color:#0f172a;background:#fff;font-family:inherit;outline:none;transition:.12s;min-width:0}
.ax-cust2__email-in:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.ax-cust2__email-go{padding:9px 16px;background:#0f172a;color:#fff;border:none;border-radius:9px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:.12s;flex-shrink:0}
.ax-cust2__email-go:hover:not(:disabled){background:#1e293b}
.ax-cust2__email-go:disabled{opacity:.6;cursor:progress}
.ax-cust2__email-consent{display:flex;align-items:flex-start;gap:8px;font-size:.72rem;color:#475569;line-height:1.45;cursor:pointer}
.ax-cust2__email-consent input{margin-top:2px;accent-color:#6366f1}
.ax-cust2__email-hp{position:absolute;left:-9999px;opacity:0}
.ax-cust2__email-status{margin:10px 0 0;padding:8px 10px;border-radius:7px;font-size:.78rem;font-weight:600}
.ax-cust2__email-status.is-ok{background:#ecfdf5;color:#047857}
.ax-cust2__email-status.is-warn{background:#fffbeb;color:#92400e}
.ax-cust2__email-status.is-err{background:#fef2f2;color:#b91c1c}

/* Responsive tweaks for interactive demos */
@media(max-width:860px){
    .ax-cust2__result{grid-template-columns:1fr}
    .ax-cust2__pipeline{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:640px){
    .ax-builder__body{grid-template-columns:1fr}
    .ax-builder__pal,.ax-builder__props{display:none}
    .ax-builder__canvas{min-height:260px;overflow-x:auto}
    .ax-node{width:130px;min-height:64px;padding:7px 9px}
    .ax-node__out{display:none}
    .ax-builder__hint{display:none}
    .ax-runner__grid{grid-template-columns:1fr}
    .ax-cust2__url{flex-wrap:wrap}
    .ax-cust2__url svg{margin-top:12px}
    .ax-cust2__go{width:100%;margin-top:6px}
    .ax-cust2__email-row{flex-direction:column}
    .ax-cust2__email-go{width:100%}
    .ax-cust2__r-preview{grid-template-columns:1fr}
    .ax-cust2__r-og{width:100%;height:120px}
}