/* VorteXAI premium design system — blog, programmatic SEO, lead pages */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#02020c;--bg2:#080818;--bg3:#0f1020;--bg-glass:rgba(10,10,28,.72);
  --cyan:#38bdf8;--cyan-soft:#7dd3fc;--cyan-deep:#0ea5e9;
  --gold:#ffd166;--gold-deep:#ffb347;
  --green:#34d399;--text:#fff;--text2:#c8cfdf;--text3:#8b92a8;
  --line:rgba(255,255,255,.08);--line-cyan:rgba(56,189,248,.22);
  --font-h:'Space Grotesk',system-ui,sans-serif;
  --font-b:'Inter',system-ui,sans-serif;
  --font-m:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow-lg:0 24px 64px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset;
  --glow-cyan:0 0 40px rgba(56,189,248,.18);
}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);line-height:1.7;min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(56,189,248,.25);color:#fff}
a{color:var(--cyan);text-decoration:none;transition:color .2s,box-shadow .2s}
a:hover{color:var(--cyan-soft)}

/* Ambient background */
.page-bg{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(ellipse 80% 50% at 15% 10%,rgba(56,189,248,.14),transparent 55%),
  radial-gradient(ellipse 60% 45% at 90% 85%,rgba(255,179,71,.1),transparent 50%),
  linear-gradient(180deg,var(--bg),var(--bg2) 45%,var(--bg))}
.page-bg::after{content:'';position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E")}
.orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.75}
.orb-1{width:min(55vw,520px);height:min(55vw,520px);background:rgba(56,189,248,.22);top:-8%;left:-6%;animation:drift1 20s ease-in-out infinite}
.orb-2{width:min(42vw,400px);height:min(42vw,400px);background:rgba(255,179,71,.15);bottom:5%;right:-4%;animation:drift2 24s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(6%,10%) scale(1.06)}}
@keyframes drift2{50%{transform:translate(-8%,-6%) scale(1.08)}}

/* Glass nav */
.vx-nav,.top{
  position:sticky;top:12px;z-index:100;max-width:1100px;margin:12px auto 0;padding:12px 22px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  background:var(--bg-glass);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);
  border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.35)}
.vx-nav-brand,.top>a:first-child{font-family:var(--font-h);font-weight:700;font-size:1.15rem;color:var(--text)!important;letter-spacing:-.02em}
.vx-nav-links{display:flex;gap:1.25rem;align-items:center}
.top{border-radius:16px}
.top a:not(:first-child):not(.vx-nav-cta){color:var(--text2);font-size:.88rem;font-weight:500}
.top a:not(:first-child):hover{color:var(--cyan)}
.vx-nav-cta,.nav-cta-pill{
  padding:10px 18px;border-radius:12px;font-size:.8rem;font-weight:700;
  background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(56,189,248,.05));
  border:1px solid var(--line-cyan);color:var(--cyan)!important}
.vx-nav-cta:hover{box-shadow:var(--glow-cyan);color:#fff!important}

/* Layout */
.vx-main,.wrap,.container{max-width:820px;margin:0 auto;padding:2.5rem 1.35rem 6rem;position:relative;z-index:1}
.container{max-width:900px}

/* Hero */
.vx-hero{padding:2rem 0 2.5rem;text-align:center}
.vx-hero h1,.wrap>h1:first-child,article>h1{
  font-family:var(--font-h);font-size:clamp(1.65rem,4vw,2.35rem);font-weight:700;line-height:1.2;
  letter-spacing:-.03em;margin-bottom:1rem;
  background:linear-gradient(135deg,#fff 0%,var(--text2) 55%,var(--cyan-soft) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.vx-badge,.article-meta .tag:first-child{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;
  font-family:var(--font-m);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold);background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.28);
  margin-bottom:1.25rem}
.lead,.subtitle{font-size:1.08rem;color:var(--text2);max-width:640px;margin:0 auto 1.5rem;line-height:1.65}
.wrap .lead{text-align:left;margin-left:0}

/* Stat strip */
.vx-stat{
  display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0 2rem;padding:1.25rem 1.5rem;
  background:linear-gradient(135deg,rgba(56,189,248,.06),rgba(255,209,102,.04));
  border:1px solid var(--line-cyan);border-radius:14px;box-shadow:var(--shadow-lg)}
.vx-stat strong{color:var(--cyan-soft);font-family:var(--font-h)}

/* Feature grid */
.vx-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:1.75rem 0}
.vx-feature{
  padding:1.25rem 1.35rem;border-radius:14px;background:rgba(15,16,32,.85);
  border:1px solid var(--line);transition:transform .25s var(--ease),border-color .25s,border-color .25s}
.vx-feature:hover{transform:translateY(-3px);border-color:var(--line-cyan);box-shadow:var(--glow-cyan)}
.vx-feature h3{font-family:var(--font-h);font-size:.95rem;margin-bottom:.4rem;color:var(--text)}
.vx-feature p{font-size:.85rem;color:var(--text3);line-height:1.5}

/* Prose */
.vx-prose h2,.content h2,main h2{font-family:var(--font-h);font-size:1.35rem;margin:2.25rem 0 1rem;color:var(--text)}
.vx-prose h3,.content h3{font-family:var(--font-h);font-size:1.1rem;margin:1.5rem 0 .65rem}
.vx-prose p,.content p,main p{color:var(--text2);margin-bottom:1.15rem;font-size:.98rem}
.vx-prose ul,.content ul,main ul{margin:1rem 0 1.5rem 1.25rem;color:var(--text2)}
.vx-prose li,.content li,main li{margin-bottom:.55rem}
.vx-prose strong,.content strong{color:var(--text)}

/* CTAs */
.cta-box,.cta-mid,.vx-cta-panel{
  text-align:center;margin:2.5rem 0;padding:2rem 1.75rem;border-radius:18px;
  background:linear-gradient(145deg,rgba(56,189,248,.1),rgba(255,209,102,.06));
  border:1px solid var(--line-cyan);box-shadow:var(--shadow-lg),var(--glow-cyan);
  animation:ctaPulse 6s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:var(--shadow-lg),0 0 32px rgba(56,189,248,.12)}50%{box-shadow:var(--shadow-lg),0 0 48px rgba(56,189,248,.22)}}
.cta-box h2,.cta-box h3,.cta-mid h3,.vx-cta-panel h3{font-family:var(--font-h);font-size:1.3rem;margin-bottom:.5rem}
.cta-box p,.cta-mid p{color:var(--text3);margin-bottom:1rem}
.cta-btn,.btn-primary-sm{
  display:inline-block;padding:14px 28px;border-radius:14px;font-family:var(--font-h);font-weight:700;font-size:.95rem;
  color:#000!important;background:linear-gradient(135deg,var(--cyan),var(--cyan-soft));
  box-shadow:0 8px 28px rgba(56,189,248,.35);transition:transform .2s var(--ease),box-shadow .2s}
.cta-btn:hover,.btn-primary-sm:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(56,189,248,.45);color:#000!important}

/* HCE */
.hce-box,.hce-sidebar{
  margin:2rem 0;padding:1.5rem 1.6rem;border-radius:0 16px 16px 0;
  background:linear-gradient(90deg,rgba(255,209,102,.08),transparent);
  border-left:4px solid var(--gold);border-top:1px solid rgba(255,209,102,.15);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.hce-box h4,.hce-sidebar h3{font-family:var(--font-h);font-size:1.05rem;margin-bottom:.5rem}
.hce-note{font-size:.88rem;color:var(--text3);margin-top:.75rem}

/* Blog cards */
.articles{display:flex;flex-direction:column;gap:1.25rem;margin-top:2rem}
.article-card{
  padding:1.6rem 1.75rem;border-radius:16px;background:rgba(8,8,24,.75);
  border:1px solid var(--line);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.article-card:hover{transform:translateY(-4px);border-color:var(--line-cyan);box-shadow:var(--glow-cyan)}
.article-card h3{font-family:var(--font-h);font-size:1.2rem;line-height:1.35;margin:.5rem 0}
.article-card h3 a{color:var(--text)}
.article-card h3 a:hover{color:var(--cyan)}
.article-card .meta{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;color:var(--text3);font-size:.8rem}
.article-card .tag{background:rgba(56,189,248,.12);color:var(--cyan);padding:.2rem .65rem;border-radius:999px;font-size:.72rem;font-weight:600}
.read-more{font-weight:600;font-size:.88rem;margin-top:.75rem;display:inline-block}

/* Article meta bar */
.article-meta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1.25rem;color:var(--text3);font-size:.85rem}
.header{display:flex;justify-content:space-between;align-items:center;padding:1rem 0 2rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem}
.header h1{font-family:var(--font-h);font-size:1.35rem}
.header h1 a{color:var(--text)}
.nav a{color:var(--text3);margin-left:1.25rem;font-size:.88rem;font-weight:500}
.nav a:hover{color:var(--cyan)}

/* Blog hero */
.blog-hero{text-align:center;padding:2.5rem 0 1.5rem}
.blog-hero h2{
  font-family:var(--font-h);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;margin-bottom:.75rem;
  background:linear-gradient(135deg,var(--cyan),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.blog-hero p{color:var(--text3);max-width:560px;margin:0 auto;font-size:1.05rem}

/* Index list programmatic */
.index-hero{text-align:center;padding:3rem 1rem 2rem}
.index-hero h1{font-family:var(--font-h);font-size:2rem;margin-bottom:.5rem}
.index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;max-width:1000px;margin:0 auto;padding:0 1.25rem 4rem}
.index-card{
  padding:1.25rem;border-radius:14px;background:rgba(15,16,32,.8);border:1px solid var(--line);
  transition:border-color .2s,transform .2s}
.index-card:hover{border-color:var(--line-cyan);transform:translateY(-2px)}
.index-card a{font-family:var(--font-h);font-weight:600;color:var(--text2);font-size:.95rem}
.index-list{list-style:none;padding:0;max-width:720px;margin:0 auto}

/* Sticky CTA */
.sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:200;padding:12px 20px;
  display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;
  background:rgba(8,8,24,.92);backdrop-filter:blur(20px);border-top:1px solid var(--line-cyan);
  transform:translateY(110%);transition:transform .3s var(--ease)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta span{color:var(--text2);font-size:.9rem}

/* Footer */
footer,.footer{
  text-align:center;padding:2.5rem 1rem;color:var(--text3);font-size:.85rem;
  border-top:1px solid var(--line);margin-top:3rem}

/* Code */
.content code,.vx-prose code{font-family:var(--font-m);background:var(--bg3);padding:.15rem .45rem;border-radius:6px;font-size:.85rem;color:var(--cyan)}
.content blockquote{border-left:3px solid var(--cyan);padding:1rem 1.25rem;margin:1.5rem 0;background:rgba(8,8,24,.6);border-radius:0 12px 12px 0;color:var(--text3);font-style:italic}

@media(max-width:768px){
  .vx-nav,.top{top:8px;margin:8px 12px 0;padding:10px 14px}
  .vx-main,.wrap,.container{padding:1.75rem 1rem 5rem}
  .header{flex-direction:column;gap:1rem;text-align:center}
  .nav a{margin:0 .5rem}
}
@media(max-width:480px){
  .cta-btn,.btn-primary-sm{width:100%;text-align:center}
  .sticky-cta{flex-direction:column;text-align:center}
}
/* industrias overrides */
.wrap>h1:first-child{-webkit-text-fill-color:initial;color:var(--text);background:none}
main.wrap{padding-top:1rem}
footer a{color:var(--cyan)}

/* First-party email capture on VorteXAI industry pages */
.vx-inbound-capture{margin:2.5rem 0;padding:2rem 1.75rem;border-radius:18px;background:linear-gradient(145deg,rgba(56,189,248,.1),rgba(255,209,102,.06));border:1px solid var(--line-cyan);box-shadow:var(--shadow-lg),var(--glow-cyan);text-align:center}
.vx-inbound-capture h2{margin:0 0 .5rem!important;font-size:1.35rem}
.vx-inbound-capture p{max-width:560px;margin:0 auto 1rem;color:var(--text2)}
.vx-inbound-form{display:flex;gap:.65rem;max-width:560px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.vx-inbound-form input{flex:1;min-width:220px;padding:.85rem 1rem;border:1px solid var(--line-cyan);border-radius:12px;background:var(--bg);color:var(--text);font:inherit}
.vx-inbound-form input:focus{outline:2px solid var(--cyan);outline-offset:2px}
.vx-inbound-form button{border:0;cursor:pointer;padding:.85rem 1.1rem;border-radius:12px;background:linear-gradient(135deg,var(--cyan),var(--cyan-soft));color:#000;font-family:var(--font-h);font-weight:700}
.vx-inbound-status{min-height:1.5rem;margin:.75rem 0 0!important;font-size:.88rem;color:var(--cyan-soft)!important}
.vx-inbound-legal{font-size:.75rem!important;color:var(--text3)!important;margin:.8rem 0 0!important}
@media(max-width:480px){.vx-inbound-form input,.vx-inbound-form button{width:100%}}