/* ==========================================================================
   AlloTech APEX bridge — v1
   Brings the older Tailwind-markup pages (body.apex-legacy) onto the APEX
   look without rewriting their content. Loaded AFTER the page's compiled
   Tailwind, so everything here is a deliberate override.
   ========================================================================== */

body.apex-legacy{
  --am:#a3b0c6;
  --text-primary:var(--text); --text-secondary:var(--am); --brand-blue:var(--iris); --glass:rgba(255,255,255,.05);
  --background:222 47% 4%; --foreground:214 32% 96%; --muted-foreground:216 20% 70%;
  background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;display:block
}
/* Content that the dead React runtime was meant to fade in */
.apex-legacy main [style*="opacity:0"]{opacity:1 !important;transform:none !important}

/* ---- Type ---- */
.apex-legacy main :is(h1,h2,h3,h4),.apex-legacy :is(.heading-1,.heading-2,.heading-3){font-family:var(--display);letter-spacing:-.028em;text-wrap:balance;color:var(--text)}
.apex-legacy main h1,.apex-legacy .heading-1{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.04;font-weight:600;letter-spacing:-.04em}
.apex-legacy main h2,.apex-legacy .heading-2{font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.08;font-weight:600}
.apex-legacy main h3,.apex-legacy .heading-3{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.25;font-weight:600;letter-spacing:-.015em}
.apex-legacy main p{text-wrap:pretty}
.apex-legacy .gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent !important;-webkit-text-fill-color:transparent}
.apex-legacy main a:not([class]){color:var(--iris)}

/* ---- Rhythm ---- */
.apex-legacy main{padding-top:0;display:block}
.apex-legacy main > section:first-child,.apex-legacy main > div:first-child > section:first-child{padding-top:calc(var(--nav-h) + 72px)}
.apex-legacy .section-padding{padding-block:clamp(64px,9vw,128px)}
.apex-legacy main > section{position:relative}
.apex-legacy main section[class*="border-y"],.apex-legacy main section[class*="border-t"]{border-color:var(--line) !important}
.apex-legacy .container-enterprise{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}

/* ---- Surfaces: one card language ---- */
.apex-legacy :is(.card-enterprise,.card-featured,.glass-panel,.glass-premium,.about-build-card,.about-founder-card,.about-cta-card){
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)) !important;
  border:1px solid var(--line) !important;border-radius:var(--r-lg) !important;box-shadow:none !important;
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:border-color .3s,transform .5s var(--ease-out),box-shadow .5s
}
.apex-legacy :is(.card-enterprise,.card-featured,.glass-panel,.glass-premium):hover{border-color:var(--line-2) !important;box-shadow:0 30px 70px -40px rgba(43,212,240,.55) !important}
.apex-legacy .card-featured{border-color:rgba(106,165,255,.5) !important;background:radial-gradient(500px 300px at 50% 0%,rgba(75,141,255,.26),transparent 70%),linear-gradient(180deg,#121d35,#0a1020) !important}
/* Old page-level tinted backdrops flatten into the single APEX background */
.apex-legacy main [class*="bg-[#0"],.apex-legacy main [class*="bg-gray-9"],.apex-legacy main [class*="bg-slate-9"],.apex-legacy main [class*="bg-background"]{background-color:transparent}
.apex-legacy main :is(input,textarea,select){background:rgba(255,255,255,.04) !important;border:1px solid var(--line-2) !important;border-radius:12px !important;color:var(--text) !important;min-height:48px;padding:12px 14px}
.apex-legacy main textarea{min-height:130px}
.apex-legacy main :is(input,textarea,select):focus{outline:2px solid var(--cyan);outline-offset:2px}
.apex-legacy main label{color:var(--am)}

/* ---- Buttons and badges ---- */
.apex-legacy main .btn-primary,.apex-legacy header.site .btn-primary,.apex-legacy .sheet a{font-family:var(--body)}
.apex-legacy main .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px !important;background:#fff !important;color:#04060c !important;font-weight:600;border:1px solid transparent;box-shadow:none;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s}
.apex-legacy main .btn-primary:hover{box-shadow:0 0 0 6px rgba(255,255,255,.12),0 16px 40px -12px rgba(75,141,255,.7);transform:none}
.apex-legacy main .btn-primary *{color:inherit !important}
.apex-legacy main .btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px !important;background:rgba(255,255,255,.05) !important;border:1px solid var(--line-2) !important;color:var(--text) !important;font-weight:600;text-decoration:none}
.apex-legacy main .btn-secondary:hover{background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.4) !important}
.apex-legacy header.site .btn-primary{background:#fff;color:#04060c;border-radius:999px;padding:0 18px;min-height:40px;box-shadow:none;font-size:.92rem;font-weight:600}
.apex-legacy main :is(.badge,.badge-primary,.badge-accent,.badge-success,.about-hero-badge){display:inline-flex;align-items:center;gap:8px;font:400 .72rem/1 var(--mono) !important;letter-spacing:.12em;text-transform:uppercase;padding:8px 13px;border-radius:999px !important;border:1px solid var(--line-2) !important;background:rgba(8,12,22,.6) !important;color:var(--cyan) !important;margin:0}
.apex-legacy main .badge-success{color:var(--ok) !important}

/* ---- Long-form (legal, blog articles) ---- */
.apex-legacy .prose{color:var(--am);font-size:1.05rem;line-height:1.75;max-width:74ch}
.apex-legacy .prose :is(h2,h3){color:var(--text);margin-top:2em}
.apex-legacy .prose a{color:var(--iris)}
.apex-legacy .prose strong{color:var(--text)}

/* ---- Header/footer are APEX markup; neutralise Tailwind preflight leaks ---- */
.apex-legacy header.site a,.apex-legacy footer.site a{text-decoration:none}
.apex-legacy footer.site{background:transparent}
.apex-legacy footer.site h3{font:400 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.apex-legacy .brand img{height:26px;width:auto}

/* The old pages ship shadcn tokens (--muted etc. as HSL triplets) that collide with APEX names */
.apex-legacy :is(header.site,footer.site,.skip,.atfab){--muted:var(--am)}

/* ---- Old hero atmospherics: replace the blurred colour blobs with one APEX glow ---- */
html:has(body.apex-legacy){background:var(--bg)}
.apex-legacy main [style*="mix-blend-mode:screen"],.apex-legacy main [class*="from-[#0B0F1A]"],.apex-legacy main .cyber-scanline{display:none !important}
.apex-legacy main > section:first-child{isolation:isolate}
.apex-legacy main > section:first-child::before{content:"";position:absolute;left:50%;top:-30%;width:min(1200px,140vw);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(75,141,255,.22),rgba(43,212,240,.08) 50%,transparent 72%);z-index:-1;pointer-events:none}
.apex-legacy main [class*="blur-3xl"],.apex-legacy main [class*="blur-[1"]{opacity:.35}

/* ==========================================================================
   One-off pages (body.apex-plain): content keeps its own markup, APEX supplies
   the frame and a readable default for elements that lost their old styling.
   ========================================================================== */
.apex-plain main{display:block}
.apex-article main,.apex-form main{max-width:820px;margin-inline:auto;padding:calc(var(--nav-h) + 80px) clamp(20px,5vw,40px) 96px}
.apex-form main{max-width:620px}
.apex-article main :is(nav,.breadcrumb):first-child{font:400 .78rem/1.4 var(--mono);letter-spacing:.08em;color:var(--dim);margin-bottom:24px}
.apex-article main h1,.apex-form main h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:20px}
.apex-article main h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:48px 0 14px}
.apex-article main h3{font-size:1.2rem;margin:28px 0 8px}
.apex-article main p,.apex-article main li{color:var(--muted);font-size:1.06rem;line-height:1.7}
.apex-article main p{margin-bottom:16px}
.apex-article main ul,.apex-article main ol{display:grid;gap:10px;margin:0 0 20px;padding-left:22px;list-style:disc}
.apex-article main ol{list-style:decimal}
.apex-article main strong{color:var(--text)}
.apex-article main :is(section,article,div) + :is(section,article){margin-top:40px}
.apex-article main table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.96rem;display:block;overflow-x:auto}
.apex-article main :is(th,td){text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.apex-article main th{color:var(--text);font:400 .74rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.apex-article main a:not(.btn){color:var(--iris)}
.apex-article main a[class*="bg-"],.apex-article main a[class*="rounded"]{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;background:#fff;color:#04060c !important;font-weight:600;text-decoration:none;margin-top:12px}
.apex-form main :is(input,textarea,select){width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;color:var(--text);min-height:48px;padding:12px 14px;font:inherit}
.apex-form main label{display:block;color:var(--muted);font-size:.9rem;margin:16px 0 6px}
.apex-form main button[type=submit],.apex-form main form button{margin-top:22px;width:100%;min-height:52px;border-radius:999px;border:0;background:#fff;color:#04060c;font:600 1rem var(--body);cursor:pointer}
.apex-form main p{color:var(--muted)}
.apex-keep main{padding-top:calc(var(--nav-h) + 40px)}
.apex-restyle main > .hero{padding:calc(var(--nav-h) + 90px) 0 clamp(48px,7vw,96px);text-align:left}
.apex-restyle main > .hero h1{max-width:18ch;margin-bottom:20px}
.apex-restyle main .section h2{margin-bottom:var(--s4);max-width:22ch}
.apex-restyle main .section p{color:var(--muted);max-width:70ch}
.apex-restyle main :is(.grid,.cards){display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:var(--s5)}
.apex-restyle main :is(.card,.item,article){padding:26px}
.apex-restyle main :is(.item,article){background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--r-lg)}
.apex-restyle main ul{display:grid;gap:10px;margin-top:14px;color:var(--muted)}

/* ---- Blog articles rendered statically from /data/articles ---- */
.apx-article{padding:calc(var(--nav-h) + 80px) 0 40px}
.apx-article .wrap{max-width:820px}
.apx-crumb{font:400 .78rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:24px}
.apx-crumb a{color:var(--cyan) !important;text-decoration:none}
.apex-legacy main .apx-article h1{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.06;margin-bottom:20px}
.apx-meta{font:400 .82rem/1.5 var(--mono);color:var(--dim);margin-bottom:32px}
.apx-meta a{color:var(--am) !important}
.apx-cover{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line);margin-bottom:36px}
.apx-lede p{font:500 clamp(1.15rem,1.8vw,1.4rem)/1.5 var(--display);color:var(--text);letter-spacing:-.01em}
.apex-legacy main .apx-article h2{font-size:clamp(1.45rem,2.6vw,2rem);margin:48px 0 14px}
.apx-article p{color:var(--am);font-size:1.07rem;line-height:1.75;margin-bottom:16px}
.apx-take{display:grid;gap:12px}
.apx-take li{position:relative;padding:16px 18px 16px 46px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text)}
.apx-take li::before{content:"";position:absolute;left:18px;top:22px;width:14px;height:8px;border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:rotate(-45deg)}
.apx-article .faq{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--r-lg)}
.apx-article .faq p{margin:0}
.apx-cta{margin-top:40px;padding:24px;border-radius:var(--r-lg);border:1px dashed var(--line-2);color:var(--text) !important}
.apx-article .cta-row a{text-transform:none}

/* ---- Blog hub list ---- */
.apx-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:48px}
.apx-card{display:flex;flex-direction:column;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));overflow:hidden;text-decoration:none;color:var(--text) !important;transition:border-color .3s,transform .5s var(--ease-out),box-shadow .5s}
.apx-card:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 30px 70px -40px rgba(43,212,240,.55)}
.apx-card img{width:100%;aspect-ratio:600/315;object-fit:cover}
.apx-card-b{display:grid;gap:10px;padding:22px}
.apx-card-k{font:400 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.apx-card strong{font:600 1.18rem/1.25 var(--display);letter-spacing:-.015em}
.apx-card-m{font:400 .78rem/1 var(--mono);color:var(--dim)}
.apex-legacy main div:has(> input[type=search]){display:none}
.apex-legacy main [hidden]{display:none !important}

/* ---- Security overview page (its inline stylesheet was dropped) ---- */
.apex-restyle .container{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.apex-restyle main svg{width:26px;height:26px;flex:none}
.apex-restyle .hero-badge{font:400 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:var(--s3)}
.apex-restyle .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.apex-restyle .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s5)}
.apex-restyle .btn-outline{background:rgba(255,255,255,.05);border-color:var(--line-2);color:var(--text)}
.apex-restyle :is(.lead,.hero p){color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.5;max-width:60ch}
.apex-restyle .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:var(--s5)}
.apex-restyle :is(.pillar,.arch-step){padding:26px;display:grid;gap:10px;align-content:start;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--r-lg)}
.apex-restyle .pillar p,.apex-restyle .arch-step p{color:var(--muted);font-size:.96rem;max-width:none}
.apex-restyle .icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--cyan);background:rgba(75,141,255,.12);box-shadow:0 0 0 1px var(--line-2) inset}
.apex-restyle .two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,56px);align-items:start}
.apex-restyle .arch-grid{display:grid;gap:14px}
.apex-restyle main .final .container{display:grid;justify-items:center;gap:var(--s4)}
/* booking form page keeps its own small inline stylesheet */
.apex-form main .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.apex-form main .sub{color:var(--muted);margin-bottom:24px}
@media (max-width:560px){.apex-form main .row{grid-template-columns:1fr}}