/* ─── Shared UI Components ─── */

.mono{font-family:'JetBrains Mono',monospace;}

/* Agent Status Display */
.agent-card{width:100%;max-width:620px;margin:0 auto;border-radius:var(--rlg);padding:1.25rem 1.5rem;}
.agent-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.agent-title{font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:0.45rem;}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pdot 1.2s ease-in-out infinite;}
.agent-json{font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--txt2);line-height:1.85;white-space:pre;overflow-x:auto;}
.jk{color:#93c5fd;}.js{color:#86efac;}.jn{color:#fca5a5;}.jb{color:#10b981;}
.agent-card.active-pulse {
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.15) !important;
}

/* Capability Cards */
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.25rem;}
.cap-card{padding:1.75rem;border-radius:var(--rlg);transition:transform var(--ts);cursor:default;}
.cap-card:hover{transform:translateY(-5px);}
.cap-card.highlight{border-color:rgba(59,130,246,0.45)!important;box-shadow:0 0 32px rgba(59,130,246,0.12)!important;}
.cap-icon{width:44px;height:44px;border-radius:var(--rmd);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:1.125rem;}
.cap-title{font-size:1rem;font-weight:700;margin-bottom:0.5rem;}
.cap-text{font-size:0.9125rem;color:var(--txt2);line-height:1.65;}

/* Quotes */
.quote-wrap{text-align:center;padding:3.5rem 1.5rem;}
.quote-text{font-size:clamp(1.125rem,2.5vw,1.5rem);font-weight:300;font-style:italic;color:var(--txt2);max-width:680px;margin:0 auto 1.25rem;line-height:1.7;}
.quote-attr{font-size:0.8125rem;font-weight:700;letter-spacing:0.08em;color:var(--txt3);text-transform:uppercase;}

/* Family Photo Grid */
.family-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;}
@media(max-width:900px){.family-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.family-grid{grid-template-columns:repeat(2,1fr);}}
.fam-card{border-radius:var(--rlg);overflow:hidden;aspect-ratio:3/4;position:relative;transition:transform var(--ts);display:block;cursor:pointer;}
.fam-card:hover{transform:scale(1.04);}
.fam-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s var(--ease);}
.fam-card:hover img{transform:scale(1.08);}
.fam-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.88) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.375rem;}
.fam-name{font-size:1.25rem;font-weight:800;letter-spacing:-0.02em;}
.fam-role{font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;opacity:0.6;margin-top:0.2rem;}

/* Timeline */
.timeline{position:relative;padding-left:1.75rem;}
.timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--blue),var(--emerald),transparent);}
.tl-item{position:relative;padding:0 0 2.5rem 1.75rem;opacity:0;transform:translateX(-18px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease);}
.tl-item.vis{opacity:1;transform:translateX(0);}
.tl-dot{position:absolute;left:-0.4375rem;top:0.2rem;width:13px;height:13px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue);border:2px solid var(--bg);}
.tl-year{font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-bottom:0.35rem;}
.tl-title{font-size:1rem;font-weight:700;margin-bottom:0.35rem;}
.tl-text{font-size:0.9rem;color:var(--txt2);line-height:1.65;}

/* Skill Trees */
.skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.125rem;}
.skill-card{padding:1.25rem 1.375rem;border-radius:var(--rmd);transition:transform var(--ts);}
.skill-card:hover{transform:translateY(-4px);}
.skill-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;}
.skill-name{font-size:0.9rem;font-weight:600;}
.skill-pct{font-size:0.78rem;font-weight:700;color:var(--blue);font-family:'JetBrains Mono',monospace;}
.skill-bg{height:4px;border-radius:99px;background:rgba(255,255,255,0.07);overflow:hidden;}
.skill-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--emerald));width:0;transition:width 1.3s var(--ease);}
.skill-tools{margin-top:0.5rem;font-size:0.72rem;color:var(--txt3);}

/* Filter Chips */
.filter-chips{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:1.75rem;}
.chip{padding:0.375rem 0.875rem;border-radius:99px;font-size:0.78rem;font-weight:600;cursor:pointer;border:1px solid var(--gb);background:transparent;color:var(--txt2);transition:all var(--tf);}
.chip:hover,.chip.on{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.38);color:var(--blue);}
.chip[style*="--chip-c"] { color: var(--chip-c); border-color: color-mix(in srgb, var(--chip-c) 30%, transparent); }
.chip[style*="--chip-c"]:hover, .chip[style*="--chip-c"].on { background: color-mix(in srgb, var(--chip-c) 15%, transparent); border-color: color-mix(in srgb, var(--chip-c) 60%, transparent); color: var(--chip-c); }

/* Portfolio / Articles */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.375rem;}
.proj-card{padding:1.625rem;border-radius:var(--rlg);transition:transform var(--ts);cursor:pointer;}
.proj-card:hover{transform:translateY(-5px);}
.proj-card.hidden{opacity:0;pointer-events:none;display:none;}
.proj-tag{display:inline-block;padding:0.22rem 0.6rem;border-radius:99px;font-size:0.65rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;margin-bottom:0.875rem;}
.t-agents{background:rgba(59,130,246,0.14);color:var(--blue);}
.t-ops{background:rgba(6,182,212,0.14);color:var(--cyan);}
.t-revenue{background:rgba(16,185,129,0.14);color:var(--green);}
.t-security{background:rgba(16,185,129,0.14);color:#10b981;}
.proj-title{font-size:1rem;font-weight:700;margin-bottom:0.5rem;}
.proj-text{font-size:0.9rem;color:var(--txt2);line-height:1.65;margin-bottom:1.125rem;}
.proj-metrics{display:flex;gap:1.125rem;}
.metric-v{font-size:1rem;font-weight:800;font-family:'JetBrains Mono',monospace;}
.metric-l{font-size:0.65rem;color:var(--txt3);text-transform:uppercase;letter-spacing:0.07em;}
.chart-wrap{height:160px;margin-top:1rem;position:relative;}

/* Automated Forms */
.smart-form{display:flex;flex-direction:column;gap:1.125rem;}
.form-lbl{font-size:0.78rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--txt2);display:block;margin-bottom:0.4rem;}
.form-input,.form-textarea{width:100%;padding:0.8rem 1.0625rem;background:rgba(255,255,255,0.04);border:1px solid var(--gb);border-radius:var(--rmd);color:var(--txt);font-size:0.9375rem;outline:none;transition:border-color var(--tf),box-shadow var(--tf);}
.form-input:focus,.form-textarea:focus{border-color:rgba(59,130,246,0.45);box-shadow:0 0 0 3px rgba(59,130,246,0.09);}
.form-input::placeholder,.form-textarea::placeholder{color:var(--txt3);}
.form-textarea{resize:vertical;min-height:130px;line-height:1.6;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.125rem;}
@media(max-width:580px){.form-row{grid-template-columns:1fr;}}
.form-chips-wrap{display:flex;gap:0.4rem;flex-wrap:wrap;}
.form-chip{padding:0.35rem 0.8rem;border-radius:99px;font-size:0.78rem;font-weight:600;cursor:pointer;border:1px solid var(--gb);background:transparent;color:var(--txt2);transition:all var(--tf);}
.form-chip.sel,.form-chip:hover{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.38);color:var(--blue);}
.ai-suggest{padding:0.55rem 0.8rem;border-radius:var(--rsm);font-size:0.8rem;color:var(--txt2);border:1px dashed rgba(59,130,246,0.28);background:rgba(59,130,246,0.04);margin-top:0.35rem;display:flex;align-items:center;gap:0.4rem;cursor:pointer;transition:all var(--tf);}
.ai-suggest:hover{background:rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.45);}
.ai-suggest::before{content:'✨';}
.follow-preview{margin-top:1.25rem;padding:1rem 1.25rem;border-radius:var(--rmd);background:rgba(16,185,129,0.07);border:1px solid rgba(16,185,129,0.22);font-size:0.84rem;line-height:1.6;color:var(--txt2);display:none;}
.follow-preview.show{display:block;}

/* Blog Specific */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.375rem;}
.blog-card{padding:1.625rem;border-radius:var(--rlg);display:flex;flex-direction:column;transition:transform var(--ts);cursor:pointer;}
.blog-card:hover{transform:translateY(-5px);}
.blog-date{font-size:0.65rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:0.625rem;}
.blog-title{font-size:1rem;font-weight:700;margin-bottom:0.5rem;line-height:1.3;}
.blog-exc{font-size:0.9rem;color:var(--txt2);line-height:1.65;flex:1;}
.blog-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1.125rem;padding-top:0.875rem;border-top:1px solid var(--gb);}
.blog-tags{display:flex;gap:0.375rem;}
.blog-tag{padding:0.175rem 0.45rem;border-radius:5px;font-size:0.65rem;font-weight:600;background:rgba(255,255,255,0.06);color:var(--txt3);}
.blog-more{font-size:0.78rem;font-weight:600;color:var(--blue);}

/* Code blocks */
.code-block{border-radius:var(--rmd);overflow:hidden;}
.code-hdr{padding:0.625rem 1.125rem;background:rgba(0,0,0,0.45);border-bottom:1px solid var(--gb);display:flex;align-items:center;justify-content:space-between;}
.code-dots{display:flex;gap:5px;}
.code-dot{width:11px;height:11px;border-radius:50%;}
.code-dot:nth-child(1){background:#ff5f57;}.code-dot:nth-child(2){background:#febc2e;}.code-dot:nth-child(3){background:#28c840;}
.code-file{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--txt3);}
.code-body{padding:1.125rem 1.375rem;font-family:'JetBrains Mono',monospace;font-size:0.78rem;line-height:1.9;overflow-x:auto;background:rgba(0,0,0,0.38);white-space:pre;}
.kw{color:#10b981;}.fn{color:#60a5fa;}.str{color:#86efac;}.cm{color:#6b7280;}.nm{color:#fca5a5;}

/* Voice Search Box */
.voice-search-wrap{display:flex;align-items:center;gap:0.75rem;width:100%;max-width:560px;padding:0.8rem 1.0625rem;background:rgba(255,255,255,0.04);border:1px solid var(--gb);border-radius:var(--rxl);transition:all var(--tf);}
.voice-search-wrap:focus-within{border-color:rgba(59,130,246,0.45);}
.vs-input{flex:1;background:none;border:none;color:var(--txt);font-size:0.9rem;outline:none;}
.vs-input::placeholder{color:var(--txt3);}
.vs-mic{color:var(--blue);font-size:1.125rem;cursor:pointer;border:none;background:none;}

/* Standard Image Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;}
.gallery-img{border-radius:var(--rlg);overflow:hidden;aspect-ratio:1;position:relative;}
.gallery-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.8s var(--ease);}
.gallery-img:hover img{transform:scale(1.07);}

/* Custom Lexi/Avatar Wave Animation */
.wave-wrap{position:relative;display:inline-block;cursor:pointer;width:100%;}
.wave-wrap.waving img{animation:wiggle 0.5s ease-in-out 4;}
@keyframes wiggle{0%,100%{transform:rotate(0deg);}25%{transform:rotate(-6deg);}75%{transform:rotate(6deg);}}

/* ────────────────────────────────────────────────────────────────────────────────
   NAV DROPDOWN MENUS
   ──────────────────────────────────────────────────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 280px; padding: 0.75rem; border-radius: var(--rlg);
  background: rgba(12,12,22,0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(124,107,255,0.05);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-dropdown.open .nav-drop-menu,
.nav-dropdown:hover .nav-drop-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-drop-item {
  display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem;
  border-radius: var(--rsm); color: var(--txt); text-decoration: none;
  transition: background 0.15s;
}
.nav-drop-item:hover { background: rgba(255,255,255,0.06); }
.nav-drop-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 0.1rem; }
.nav-drop-item strong { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.15rem; }
.nav-drop-item small { display: block; font-size: 0.72rem; color: var(--txt3); line-height: 1.4; }

/* Mobile nav sections */
.nav-mob-section {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--txt3); padding: 0.75rem 0 0.25rem; margin-top: 0.5rem;
}
.nav-link.nav-sub { padding-left: 1rem; font-size: 0.9rem; opacity: 0.8; }

/* ────────────────────────────────────────────────────────────────────────────────
   GRADIENT CTA BUTTON
   ──────────────────────────────────────────────────────────────────────────────── */
.btn-cta-gradient {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1.25rem; border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #10b981, #10b981);
  color: #fff; font-size: 0.82rem; font-weight: 700; text-decoration: none;
  border: none; cursor: pointer; transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(99,102,241,0.35);
  white-space: nowrap;
}
.btn-cta-gradient:hover {
  transform: translateY(-1px); box-shadow: 0 8px 25px rgba(99,102,241,0.5);
  filter: brightness(1.1);
}
.btn-login { text-decoration: none; }

/* ────────────────────────────────────────────────────────────────────────────────
   MULTI-COLUMN FOOTER
   ──────────────────────────────────────────────────────────────────────────────── */
.vixci-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 4rem 2rem 2rem;
  max-width: 1200px; margin: 0 auto;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
  margin-bottom: 3rem;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { max-width: 280px; }
.footer-logo {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em;
  color: #fff; margin-bottom: 0.75rem;
}
.footer-tagline { font-size: 0.85rem; color: var(--txt3); line-height: 1.6; }
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-col-title {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--txt2); margin-bottom: 0.5rem;
}
.footer-col a {
  font-size: 0.85rem; color: var(--txt3); text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--txt); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-bottom p { font-size: 0.78rem; color: var(--txt3); }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { font-size: 0.78rem; color: var(--txt3); text-decoration: none; }
.footer-bottom-links a:hover { color: var(--txt); }

/* ────────────────────────────────────────────────────────────────────────────────
   PRICING CARDS
   ──────────────────────────────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  max-width: 1100px; margin: 0 auto;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; } }
.pricing-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.5rem; padding: 2.5rem 2rem; position: relative;
  transition: all 0.3s ease; display: flex; flex-direction: column;
}
.pricing-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.15); }
.pricing-card.popular {
  border-color: rgba(124,107,255,0.4);
  background: linear-gradient(145deg, rgba(124,107,255,0.08), rgba(56,189,248,0.03));
  box-shadow: 0 0 60px rgba(124,107,255,0.08);
}
.pricing-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 0.3rem 1rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(135deg, #6366f1, #10b981); color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}
.pricing-name { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.5rem; color: #fff; }
.pricing-desc { font-size: 0.85rem; color: var(--txt3); margin-bottom: 1.5rem; line-height: 1.5; }
.pricing-price {
  font-size: 3rem; font-weight: 900; color: #fff; letter-spacing: -0.03em;
  margin-bottom: 0.25rem; line-height: 1;
}
.pricing-price span { font-size: 1rem; font-weight: 500; color: var(--txt3); }
.pricing-period { font-size: 0.78rem; color: var(--txt3); margin-bottom: 2rem; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 2rem; flex: 1; }
.pricing-features li {
  padding: 0.5rem 0; font-size: 0.88rem; color: var(--txt2);
  display: flex; align-items: flex-start; gap: 0.6rem; line-height: 1.5;
}
.pricing-features li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }
.pricing-features li.na { opacity: 0.35; }
.pricing-features li.na::before { content: '—'; color: var(--txt3); }
.pricing-cta {
  display: block; width: 100%; padding: 0.875rem; border-radius: 999px;
  font-size: 0.95rem; font-weight: 700; text-align: center;
  text-decoration: none; cursor: pointer; transition: all 0.2s;
  border: 1px solid rgba(255,255,255,0.15); background: transparent; color: #fff;
}
.pricing-cta:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.3); }
.pricing-cta.primary {
  background: linear-gradient(135deg, #6366f1, #10b981); border-color: transparent;
  box-shadow: 0 4px 15px rgba(99,102,241,0.3);
}
.pricing-cta.primary:hover { box-shadow: 0 8px 25px rgba(99,102,241,0.5); transform: translateY(-1px); }

/* ────────────────────────────────────────────────────────────────────────────────
   FAQ ACCORDION
   ──────────────────────────────────────────────────────────────────────────────── */
.faq-list { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem; overflow: hidden; transition: border-color 0.2s;
}
.faq-item:hover { border-color: rgba(255,255,255,0.15); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.125rem 1.5rem; cursor: pointer; font-size: 0.95rem;
  font-weight: 600; color: var(--txt); user-select: none;
}
.faq-q::after { content: '+'; font-size: 1.25rem; color: var(--txt3); transition: transform 0.2s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s;
  padding: 0 1.5rem; font-size: 0.88rem; color: var(--txt2); line-height: 1.7;
}
.faq-item.open .faq-a { max-height: 300px; padding: 0 1.5rem 1.25rem; }

/* ────────────────────────────────────────────────────────────────────────────────
   SPLIT-SCREEN LOGIN
   ──────────────────────────────────────────────────────────────────────────────── */
.login-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
@media (max-width: 768px) { .login-split { grid-template-columns: 1fr; } }
.login-form-side {
  display: flex; flex-direction: column; justify-content: center;
  padding: 3rem; max-width: 440px; margin: 0 auto; width: 100%;
}
.login-demo-side {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(56,189,248,0.08));
  border-left: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden;
}
@media (max-width: 768px) { .login-demo-side { display: none; } }
.login-logo { font-size: 1.75rem; font-weight: 900; color: #fff; margin-bottom: 0.5rem; }
.login-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.login-subtitle { font-size: 0.9rem; color: var(--txt3); margin-bottom: 2rem; }
.login-social-row { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
.login-social-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem; border-radius: var(--rsm); border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); color: var(--txt); font-size: 0.82rem;
  font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.login-social-btn:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
.login-divider {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;
  font-size: 0.75rem; color: var(--txt3);
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.1);
}
.login-field { margin-bottom: 1rem; }
.login-field label {
  display: block; font-size: 0.78rem; font-weight: 600; color: var(--txt2);
  margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.login-field input {
  width: 100%; padding: 0.75rem 1rem; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--rsm);
  color: var(--txt); font-size: 0.9rem; outline: none; transition: border-color var(--tf);
  box-sizing: border-box;
}
.login-field input:focus { border-color: rgba(99,102,241,0.5); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.login-submit {
  width: 100%; padding: 0.875rem; border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #10b981); border: none;
  color: #fff; font-size: 0.95rem; font-weight: 700; cursor: pointer;
  transition: all 0.2s; margin-top: 0.5rem;
}
.login-submit:hover { box-shadow: 0 8px 25px rgba(99,102,241,0.5); transform: translateY(-1px); }
.login-footer-text {
  text-align: center; margin-top: 1.5rem; font-size: 0.82rem; color: var(--txt3);
}
.login-footer-text a { color: var(--blue); text-decoration: none; font-weight: 600; }

/* ────────────────────────────────────────────────────────────────────────────────
   VAPI-STYLE AUDIO EQUALIZER
   ──────────────────────────────────────────────────────────────────────────────── */
.audio-equalizer {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; height: 80px; margin: 2rem auto; max-width: 500px;
}
.eq-bar {
  width: 4px; border-radius: 2px; transition: height 0.1s ease;
  animation: eq-bounce var(--eq-speed, 1.2s) ease-in-out infinite alternate;
  animation-delay: var(--eq-delay, 0s);
}
@keyframes eq-bounce {
  0% { height: var(--eq-min, 8px); }
  100% { height: var(--eq-max, 40px); }
}
.eq-bar.teal { background: #7c6bff; }
.eq-bar.blue { background: #38bdf8; }
.eq-bar.green { background: #10b981; }
.eq-bar.orange { background: #f97316; }
.eq-bar.pink { background: #ec4899; }
.eq-bar.cyan { background: #06b6d4; }
.eq-bar.yellow { background: #eab308; }

/* ─── AI Prompt Bar ─── */
.hero-prompt-bar {
  max-width: 650px;
  margin: 0 auto;
  position: relative;
  background: rgba(20, 20, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255,255,255,0.05) inset;
  transition: all 0.3s ease;
}
.hero-prompt-bar:hover, .hero-prompt-bar:focus-within {
  border-color: rgba(56, 189, 248, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.15);
  transform: translateY(-2px);
}
.hero-prompt-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.1rem;
  outline: none;
  font-family: inherit;
}
.hero-prompt-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.hero-prompt-btn {
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  border: none;
  border-radius: 999px;
  padding: 0.8rem 1.5rem;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
}
.hero-prompt-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.4);
}

/* ─── Portal & Profile Components (Wortman.AI) ─── */
.portal-hero-wrap { display:flex; flex-direction:column; align-items:center; gap:2rem; text-align:center; }
.portal-avatar-col { display:flex; flex-direction:column; align-items:center; gap:0.75rem; flex-shrink:0; }
.portal-avatar-name { font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--txt3); opacity:0.8; }
.portal-avatar { 
  width:140px; height:140px; border-radius:50%; object-fit:cover; 
  border:3px solid var(--pulse-color, rgba(59,130,246,0.5)); 
  box-shadow:0 0 40px var(--pulse-shadow, rgba(59,130,246,0.25)), 0 0 0 6px rgba(255,255,255,0.03); 
  animation:avatarPulse 4s ease-in-out infinite; 
}
@keyframes avatarPulse { 
  0%,100%{box-shadow:0 0 40px var(--pulse-shadow, rgba(59,130,246,0.25)),0 0 0 6px rgba(255,255,255,0.03);} 
  50%{box-shadow:0 0 60px var(--pulse-glow, rgba(59,130,246,0.45)),0 0 0 10px rgba(255,255,255,0.06);} 
}
.stats-bar { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.stat-pill { display:flex; flex-direction:column; align-items:center; gap:0.25rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:1rem; padding:0.75rem 1.25rem; min-width:90px; transition: all 0.3s var(--ease); }
.stat-pill:hover { transform: translateY(-3px); border-color: var(--pulse-color, var(--blue)); background: rgba(255,255,255,0.06); }
.stat-num { font-size:1.5rem; font-weight:800; color:#fff; line-height:1; }
.stat-lbl { font-size:0.65rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--txt3); }
.breadcrumb { font-size:0.78rem; color:var(--txt3); margin-bottom:1rem; }
.breadcrumb a { color:var(--txt3); text-decoration:none; } .breadcrumb a:hover { color:var(--txt); }
@media(max-width:640px){ .portal-avatar{width:100px;height:100px;} .stats-bar{gap:1rem;} .portal-hero-wrap { flex-direction:column; text-align:center; } }