.mobile-demo-toggle{display:none}
section[id],main[id]{scroll-margin-top:calc(var(--header-height,118px) + 16px)}
.footer-grid>*{min-width:0}.footer-links{flex-wrap:wrap}
@media(min-width:641px) and (max-width:980px){
 .demo-columns{grid-template-columns:1fr .95fr 1fr;gap:8px}.demo-panel-head{flex-wrap:wrap;padding:12px}.demo-panel h3{font-size:16px!important}.demo-kicker,.connection-tag{font-size:10px}.demo-record{flex-wrap:wrap;padding:9px 7px;gap:5px}.demo-record .source-state,.record-result{margin-left:0}.demo-records{padding:8px}.demo-record strong{font-size:12px}.demo-record small{font-size:11px}.engine-motion{width:150px}.engine-panel{padding:12px 8px}.engine-panel p{font-size:12px!important;min-height:76px}.demo-stages{grid-template-columns:repeat(4,1fr);row-gap:14px}.demo-stages li:nth-child(5)::before{display:none}.demo-panel-foot{font-size:11px}.file-preview-head{flex-wrap:wrap}.file-preview th,.file-preview td{font-size:10px;padding:5px}.signal{display:none}
}
@media(max-width:640px){
 .nav-wrap{padding:7px 0;gap:6px}.brand{flex-basis:calc(100% - 95px)!important}.brand .brand-logo{max-width:250px}.font-controls{display:none}.nav-wrap:has(.nav.open) .font-controls{display:flex}.header-statement{padding:0 3px 5px;font-size:11px}.nav.open{left:0;right:0;max-height:60vh;overflow-y:auto}.themed-nav>a{min-height:44px!important;font-size:15px!important}
 .hero-copy .eyebrow{font-size:10px!important;margin-bottom:8px}.site-content .hero h1{font-size:30px!important}.hero{padding-top:22px}.hero-actions{gap:8px;margin-top:14px}.hero-actions .btn{min-height:44px}.hero-grid{gap:22px}.sample-label{font-size:12px}.demo-heading .sample-label{text-align:left}.site-content .demo-heading h2{font-size:18px!important}
 .mobile-demo-toggle{display:block;width:100%;min-height:44px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:14px;font-weight:600;margin-bottom:12px;cursor:pointer}
 .integration-demo:not(.mobile-expanded) .route-controls,.integration-demo:not(.mobile-expanded) .source-panel,.integration-demo:not(.mobile-expanded) .target-panel,.integration-demo:not(.mobile-expanded) .demo-stages,.integration-demo:not(.mobile-expanded) .demo-status,.integration-demo:not(.mobile-expanded) #demoReset{display:none}
 .integration-demo:not(.mobile-expanded) .engine-panel{padding:12px 16px}.integration-demo:not(.mobile-expanded) .engine-motion{width:132px}.integration-demo:not(.mobile-expanded) .engine-panel p{min-height:42px;max-width:350px}.integration-demo:not(.mobile-expanded) .demo-buttons{max-width:300px;display:grid;grid-template-columns:1fr 1fr}.integration-demo:not(.mobile-expanded) .flow-direction{min-height:20px}
 .demo-buttons .btn,.demo-reset{min-height:44px}.contact-form label{font-size:16px!important}.cta-card{padding:22px}.back-to-top{font-size:12px;bottom:12px}.site-footer{padding-bottom:80px}.footer-links{gap:6px 16px}.footer-links a{display:inline-flex;align-items:center;min-height:44px}.hero-actions .btn-ghost{padding:8px}
}
:root[data-theme="light"] .site-content .eyebrow{color:#506b90}:root[data-theme="light"] .feature-card .icon{color:#355b88}

/* Keep mobile lifecycle nodes on the same axis as their connecting line. */
@media(max-width:640px){
 .site-content .demo-stages li{justify-content:flex-start;align-items:center;text-align:left;padding:9px 0;gap:14px}
 .demo-stages li>span{flex:0 0 26px;width:26px;height:26px}
 .demo-stages li::before{left:12px}
 .demo-stages li.active::after{left:10px}
}

/* A single, restrained brand highlight keeps the message readable. */
.header-statement{isolation:isolate;animation:statement-intro .8s ease-out both}
.header-statement strong{position:relative;display:inline-block;color:#fff;text-shadow:0 0 14px rgba(39,184,255,.35)}
.header-statement strong::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:linear-gradient(90deg,#12b8ff,#9870ff,#12b8ff);background-size:200% 100%;box-shadow:0 0 9px rgba(89,155,255,.55);transform-origin:left;animation:statement-underline 1.4s .25s ease-out both,statement-shimmer 4s 1.4s ease-in-out infinite}
@keyframes statement-intro{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
@keyframes statement-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes statement-shimmer{0%,20%{background-position:200% 0;opacity:.65;box-shadow:0 0 5px rgba(89,155,255,.3)}55%{opacity:1;box-shadow:0 0 13px rgba(89,155,255,.75)}80%,100%{background-position:0 0;opacity:.65;box-shadow:0 0 5px rgba(89,155,255,.3)}}
@media(prefers-reduced-motion:reduce){.header-statement,.header-statement strong::after{animation:none!important;opacity:1;translate:none;transform:none}}


/* A bright segment travels continuously along the slogan underline. */
.header-statement strong::after{background:linear-gradient(90deg,transparent 0%,#12b8ff 30%,#b797ff 50%,#12b8ff 70%,transparent 100%),linear-gradient(90deg,rgba(18,184,255,.22),rgba(152,83,255,.22));background-size:45% 100%,100% 100%;background-repeat:no-repeat;transform:none;opacity:1;animation:running-slogan-line 2s linear infinite}
@keyframes running-slogan-line{from{background-position:-90% 0,0 0}to{background-position:190% 0,0 0}}
@media(prefers-reduced-motion:reduce){.header-statement strong::after{animation:none!important;background-position:50% 0,0 0}}

/* Run the highlight beneath the whole sentence, including wrapped mobile text. */
.header-statement strong::after{content:none}
.header-statement .slogan-full{position:relative;display:inline-block;max-width:100%;padding-bottom:5px}
.header-statement .slogan-full::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent 0%,#12b8ff 30%,#b797ff 50%,#12b8ff 70%,transparent 100%),linear-gradient(90deg,rgba(18,184,255,.22),rgba(152,83,255,.22));background-size:45% 100%,100% 100%;background-repeat:no-repeat;box-shadow:0 0 9px rgba(89,155,255,.55);animation:running-slogan-line 2s linear infinite}
@media(prefers-reduced-motion:reduce){.header-statement .slogan-full::after{animation:none!important;background-position:50% 0,0 0}}

/* Emphasise only Agentic AI; retain readable white text in light mode. */
.hero-lead .agentic-emphasis{color:#fff;font-weight:700}
:root[data-theme="light"] .hero-lead .agentic-emphasis{background:#16345c;border-radius:4px;padding:1px 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* Centre the integration selector over the engine column. */
.route-controls{display:grid;grid-template-columns:1fr .85fr 1fr;align-items:end;gap:14px}
.route-controls>label:first-child{grid-column:2;grid-row:1;min-width:0}
.route-controls>#sourceFormatLabel{grid-column:1;grid-row:1;justify-self:end}
.route-controls>#targetFormatLabel{grid-column:3;grid-row:1;justify-self:start}
.route-controls>span{grid-column:1/-1;grid-row:2;justify-self:center;margin:0;padding:0;text-align:center}
.route-controls select{max-width:100%;width:100%}
@media(min-width:641px) and (max-width:980px){.route-controls{grid-template-columns:1fr .95fr 1fr;gap:8px}}
@media(max-width:640px){.route-controls{grid-template-columns:1fr 1fr;gap:12px}.route-controls>label:first-child{grid-column:1/-1;grid-row:1}.route-controls>#sourceFormatLabel{grid-column:1;grid-row:2;justify-self:stretch}.route-controls>#targetFormatLabel{grid-column:2;grid-row:2;justify-self:stretch}.route-controls>span{grid-column:1/-1;grid-row:3}}

/* Match the route selector border exactly to the engine panel column. */
.route-controls>label:first-child{width:100%;justify-self:stretch;align-items:stretch}
.route-controls>label:first-child select{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0}

/* One aligned introductory row above Source, TAAE and Target. */
@media(min-width:641px){
 .integration-demo>.demo-heading{display:none}
 .route-controls{align-items:center}
 .site-content .route-controls .route-row-heading{grid-column:1;grid-row:1;align-self:center;margin:0;font-size:18px!important;line-height:1.35!important}
 .route-controls>.route-row-note{grid-column:3;grid-row:1;justify-self:stretch;align-self:center;text-align:right;font-size:12px;line-height:1.5;white-space:normal;padding:0;margin:0}
 .route-controls>#sourceFormatLabel{grid-column:1;grid-row:2;width:100%;justify-self:stretch}
 .route-controls>#targetFormatLabel{grid-column:3;grid-row:2;width:100%;justify-self:stretch}
}
@media(max-width:640px){.route-row-heading,.route-row-note{display:none!important}}

/* Restrained navy canvas with a soft violet accent; distinct original demo panels. */
:root:not([data-theme="light"]) body{background:radial-gradient(ellipse at 85% 14%,rgba(94,49,145,.12),transparent 42%),linear-gradient(165deg,#0c1b35 0%,#101c36 36%,#191a32 68%,#0d1b32 100%)}
:root:not([data-theme="light"]) .site-content{--panel:#14213a;--panel2:#1c233e;--muted:#acbdd5;--line:rgba(142,168,211,.17)}
:root:not([data-theme="light"]) .flow-section{background:linear-gradient(135deg,rgba(23,42,73,.35),rgba(40,27,65,.28))}
:root:not([data-theme="light"]) .feature-card,:root:not([data-theme="light"]) .flow-step{background:linear-gradient(150deg,#172740,#121e36)}
:root:not([data-theme="light"]) .ai-banner,:root:not([data-theme="light"]) .cta-card{background:linear-gradient(135deg,#15243e,#201d37)}
:root:not([data-theme="light"]) .ai-badge{background:linear-gradient(145deg,#192b49,#292040)}
:root:not([data-theme="light"]) .feature-card p,:root:not([data-theme="light"]) .flow-step p,:root:not([data-theme="light"]) .ai-banner p,:root:not([data-theme="light"]) .section-head p,:root:not([data-theme="light"]) .cta-copy>p{color:#acbdd5}

/* Slightly deeper canvas with a brighter central TAAE panel. */
:root:not([data-theme="light"]) body{background:radial-gradient(ellipse at 85% 14%,rgba(94,49,145,.10),transparent 42%),linear-gradient(165deg,#0a162b 0%,#0d182d 36%,#15162b 68%,#0b1629 100%)}
:root:not([data-theme="light"]) .engine-panel{background:radial-gradient(ellipse at 50% 30%,#343a65,#252c50);border-color:#8272aa;box-shadow:0 0 24px rgba(111,86,202,.10)}

/* TAAE engine: luminous brand colours around a rich indigo centre. */
:root:not([data-theme="light"]) .engine-panel{position:relative;isolation:isolate;border:1px solid transparent;background:radial-gradient(ellipse at 18% 12%,rgba(0,198,255,.25),transparent 52%) padding-box,radial-gradient(ellipse at 90% 56%,rgba(183,31,246,.24),transparent 60%) padding-box,linear-gradient(155deg,#102a58 0%,#21164d 55%,#291343 100%) padding-box,linear-gradient(145deg,#21d9ff 0%,#6570ff 48%,#cf48ff 100%) border-box;box-shadow:0 0 22px rgba(51,126,255,.16),0 0 36px rgba(166,49,238,.10),inset 0 1px 0 rgba(190,225,255,.13)}
:root:not([data-theme="light"]) .engine-motion{filter:drop-shadow(0 0 12px rgba(37,185,255,.24))}
:root:not([data-theme="light"]) .engine-motion::before{content:'';position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(97,49,226,.24),rgba(29,154,246,.14) 48%,transparent 73%);box-shadow:0 0 40px rgba(135,48,238,.17);z-index:-1}
:root:not([data-theme="light"]) .engine-state{color:#78ffea;text-shadow:0 0 12px rgba(38,226,214,.32)}
:root:not([data-theme="light"]) .engine-panel p{color:#e0e6ff}
:root:not([data-theme="light"]) .engine-panel .flow-direction{color:#a8eaff}
:root:not([data-theme="light"]) .engine-panel .btn-outline{background:rgba(83,76,172,.2);border-color:rgba(172,157,255,.3);color:#edf1ff}

/* File-format controls belong to their panels, avoiding empty header rows. */
.demo-panel>#sourceFormatLabel,.demo-panel>#targetFormatLabel{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:0;border-bottom:1px solid rgba(132,193,224,.2);font-size:12px!important;color:#c5e1f1}
.demo-panel>#sourceFormatLabel select,.demo-panel>#targetFormatLabel select{flex:1;min-width:0;min-height:38px;padding:8px 10px;border:1px solid rgba(142,193,225,.35);border-radius:8px;background:#153350;color:#f4f8ff;font:inherit;font-size:14px}
.target-panel>#targetFormatLabel select{background:#123e38}

/* Make file-format dropdowns clearly identifiable as editable controls. */
.demo-panel>#sourceFormatLabel select,.demo-panel>#targetFormatLabel select{background:#edf7ff;color:#123353;border:2px solid #55c7fa;font-weight:600;cursor:pointer;min-height:42px;box-shadow:0 2px 8px rgba(14,116,179,.12);color-scheme:light}
.demo-panel>#sourceFormatLabel select:hover,.demo-panel>#targetFormatLabel select:hover{background:#fff;border-color:#92e2ff}
.demo-panel>#sourceFormatLabel select:focus-visible,.demo-panel>#targetFormatLabel select:focus-visible{outline:3px solid #ac8aff;outline-offset:3px;background:#fff}
.demo-panel>#sourceFormatLabel option,.demo-panel>#targetFormatLabel option{background:#fff;color:#123353}

/* Branded Agentic AI mark: luminous and legible in both themes. */
.ai-badge,:root[data-theme="light"] .ai-badge,:root:not([data-theme="light"]) .ai-badge{
 position:relative;isolation:isolate;overflow:hidden;color:#fff;
 border:2px solid transparent;
 background:radial-gradient(circle at 28% 20%,rgba(27,216,255,.32),transparent 35%) padding-box,radial-gradient(circle at 78% 82%,rgba(213,33,255,.32),transparent 42%) padding-box,linear-gradient(145deg,#071934,#170b36) padding-box,linear-gradient(135deg,#16ddff 0%,#477eff 48%,#dd2cff 100%) border-box;
 box-shadow:0 0 24px rgba(26,189,255,.24),0 0 42px rgba(176,42,255,.18),inset 0 0 28px rgba(61,85,255,.2);
}
.ai-badge::before{content:"";position:absolute;inset:11px;border:1px solid rgba(118,226,255,.38);border-radius:26px;box-shadow:inset 0 0 18px rgba(125,64,255,.22);z-index:-1}
.ai-badge::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;right:14px;top:15px;background:#6affef;box-shadow:-85px 88px 0 #b84cff,0 0 12px #6affef,-85px 88px 12px #b84cff}
.ai-badge span{font-family:"Space Grotesk",Inter,sans-serif;font-weight:800;letter-spacing:-.06em;background:linear-gradient(115deg,#fff 8%,#76edff 43%,#8b7bff 68%,#f054ff 94%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 24px rgba(73,164,255,.22)}
@media(max-width:640px){.ai-badge::before{inset:9px;border-radius:20px}.ai-badge::after{right:11px;top:12px;box-shadow:-62px 64px 0 #b84cff,0 0 10px #6affef,-62px 64px 10px #b84cff}}

/* 2026 AI-first hero using the supplied TAAE brand artwork. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:#09152d}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url("assets/taae-hero-bg.webp") center top/cover no-repeat;opacity:.74}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,15,35,.92) 0%,rgba(8,18,45,.72) 43%,rgba(12,14,49,.58) 100%)}
.hero>.container{position:relative;z-index:1}
.agentic-headline{background:linear-gradient(90deg,#1ad8ff,#5d7cff 48%,#b755ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-problem{font-size:clamp(18px,2vw,24px);line-height:1.45;color:#f4f7ff;max-width:640px;margin:24px 0 8px;font-weight:650}
.agentic-lifecycle{align-self:stretch;min-height:430px;padding:30px 28px;border:1px solid rgba(105,167,255,.28);border-radius:24px;background:linear-gradient(155deg,rgba(16,48,91,.76),rgba(31,18,67,.82));box-shadow:0 24px 70px rgba(5,10,35,.3),inset 0 1px 0 rgba(214,237,255,.1)}
.agentic-lifecycle h2{font-size:clamp(24px,2.6vw,36px)!important;margin:10px 0 8px;color:#fff}
.agentic-lifecycle h2 span{background:linear-gradient(90deg,#1ad8ff,#647bff,#c455ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.agentic-lifecycle p{color:#bcd2ef;margin:0 0 20px}
.agentic-lifecycle ol{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 22px;list-style:none;margin:0;padding:0}
.agentic-lifecycle li{position:relative;display:flex;align-items:center;gap:10px;min-height:40px;color:#eaf4ff;font-size:14px;font-weight:700;border-bottom:1px solid rgba(145,194,255,.14)}
.agentic-lifecycle li span{color:#70e8ff;font-size:11px;letter-spacing:.12em}
.agentic-lifecycle li::after{content:"";width:6px;height:6px;margin-left:auto;border-radius:50%;background:#536fff;box-shadow:0 0 12px rgba(106,137,255,.85)}
.agentic-lifecycle li:nth-child(4n+1),.agentic-lifecycle li:nth-child(4n+2){animation:agenticPulse 8s ease-in-out infinite}
.agentic-lifecycle li:nth-child(4n+2){animation-delay:1s}.agentic-lifecycle li:nth-child(4n+3){animation-delay:2s}.agentic-lifecycle li:nth-child(4n){animation-delay:3s}
@keyframes agenticPulse{0%,100%{color:#eaf4ff}10%,22%{color:#6affef;text-shadow:0 0 16px rgba(69,224,255,.45)}30%{color:#eaf4ff}}
.live-demo-section{padding-top:36px}
@media(min-width:981px){.hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:56px}}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0 0 30px;padding:0}
.hero-proof li{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(149,194,255,.25);border-radius:999px;background:rgba(21,56,105,.28);color:#dcecff;font-size:.78em;font-weight:650;line-height:1.2;padding:8px 11px}
.hero-proof li::before{content:"";width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:#22d7ff;box-shadow:0 0 12px rgba(34,215,255,.9)}
.brand .brand-logo{aspect-ratio:2172/724!important}
.footer-brand img{aspect-ratio:2172/724!important}
:root[data-theme="light"] .hero{background:#e9f2ff}
:root[data-theme="light"] .hero::before{opacity:.2;filter:saturate(.9)}
:root[data-theme="light"] .hero::after{background:linear-gradient(90deg,rgba(241,247,255,.96),rgba(238,244,255,.84) 48%,rgba(241,237,255,.76))}
:root[data-theme="light"] .hero-tagline{color:#15335d;text-shadow:none}
 :root[data-theme="light"] .hero-proof li{border-color:rgba(43,92,150,.2);background:rgba(255,255,255,.68);color:#193a65}
 :root[data-theme="light"] .hero-problem{color:#102d54}
@media(max-width:640px){.hero-proof{gap:7px;margin-bottom:24px}.hero-proof li{font-size:.72em;padding:7px 9px}}
@media(max-width:980px){.agentic-lifecycle{min-height:0}.hero-problem{margin-top:18px}}
@media(max-width:640px){.agentic-lifecycle{padding:22px 18px;border-radius:18px}.agentic-lifecycle ol{gap:0 14px}.agentic-lifecycle li{font-size:12px;min-height:36px}.live-demo-section{padding-top:18px}}
@media(prefers-reduced-motion:reduce){.agentic-lifecycle li{animation:none!important}}
@media(max-width:640px){.hero::before{background-position:54% top;opacity:.58}.hero::after{background:linear-gradient(180deg,rgba(5,15,35,.84),rgba(8,18,45,.72) 55%,rgba(8,17,38,.82))}:root[data-theme="light"] .hero::before{opacity:.14}:root[data-theme="light"] .hero::after{background:linear-gradient(180deg,rgba(244,249,255,.95),rgba(238,244,255,.87))}}