/* =============== Global =============== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #ffffff;
  color: #333;
}
html { scroll-behavior: smooth; }

/* center helper on smaller screens */
.hero-content { text-align: center; }
.hero-content .lead { margin: 0 auto; }
.checks { justify-content: center; }

/* anchor offset for sticky headers */
#services, #contact, #assistant-types { scroll-margin-top: 90px; }

/* container utility (kept for non-Bootstrap bits) */
.container { width: 90%; max-width: 1100px; margin: auto; }

/* optional nav styles (if used) */
nav {
  background: #0b0c1e;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.logo {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: 1.8rem;
  color: #00bfff;
  letter-spacing: 1px;
  text-transform: uppercase;
}
nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
nav ul li a { color: #fff; text-decoration: none; font-weight: 500; transition: color .3s; }
nav ul li a:hover { color: #38bdf8; }

/* =============== Ventra Hero (matches Stan) =============== */
.ventra-hero {
  position: relative;            /* needed so the bot can be positioned inside */
  overflow: hidden;
  isolation: isolate;
  background: #0b0b0f;
  color: #fff;
  text-align: center;
  padding: clamp(80px, 15vw, 140px) 0;
}
.ventra-hero .grid-dots{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:22px 22px;
}
.ventra-hero .glow{
  position:absolute; width:1000px; height:1000px; border-radius:50%;
  background: radial-gradient(circle, rgba(91,107,255,0.25), rgba(155,61,255,0.2), transparent 70%);
  top:-250px; left:50%; transform:translateX(-50%);
  filter: blur(40px); pointer-events:none;
}
.ventra-hero .container{ position:relative; z-index:2; width:min(1100px,92vw); margin:0 auto; }
.ventra-hero h1{ font-size: clamp(32px, 5vw, 56px); font-weight:800; margin-bottom:1rem; }
.ventra-hero p{
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(255,255,255,0.75);
  max-width:60ch; margin:0 auto 2rem;
}

/* shared buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:999px; border:none;
  font-weight:600; letter-spacing:.3px; text-decoration:none; cursor:pointer;
  transition: all .2s ease;
}
.btn.primary{ background: linear-gradient(90deg, #5b6bff, #9b3dff); color:#fff; }
.btn.primary:hover{ filter:brightness(1.05); transform: translateY(-1px); }
.btn.ghost{ color:#d7d9ff; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); }
.btn.ghost:hover{ background:rgba(255,255,255,.08); }

/* =============== HERO BOT: intro center ➜ dock top-left =============== */
/* Place this SVG wrapper INSIDE .ventra-hero (above the H1) */
.bot-intro{
  position: absolute;       /* intro: inside the hero */
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  z-index: 10;
  transition: all .8s ease-in-out;  /* smooth slide/shrink when .freeze is added */
}
.bot-intro .bot-svg-mini { width:100%; height:100%; overflow:visible; }

/* After JS adds .freeze (~3s), dock to screen’s top-left */
.bot-intro.freeze{
  position: fixed;
  top: 14px;
  left: 14px;
  transform: none;
  width: 32px;
  height: 32px;
  z-index: 9999;
}

/* Bigger intro bot size */
.bot-intro {
    width: 180px;   /* was 120px */
    height: 180px;  /* was 120px */
}

/* Keep docked bot the same small size */
.bot-intro.freeze {
    width: 32px;
    height: 32px;
}


/* Animation states — SCOPED to the hero bot only */
.bot-intro .ant-dot { transform-origin:50% 12%; transform: translateY(-12px) scale(.6); opacity:0; }
.bot-intro .ant-stem { stroke-dasharray:26; stroke-dashoffset:26; opacity:0; }
.bot-intro .head { stroke-dasharray:260; stroke-dashoffset:260; }
.bot-intro .eye { transform-origin:center; transform: scale(0); opacity:0; }
.bot-intro .mouth { transform-origin:50% 50%; transform: scaleX(0); opacity:0; }
.bot-intro .bot-glow { opacity:0; }

@keyframes dropIn { to { transform:translateY(0) scale(1); opacity:1; } }
@keyframes draw    { to { stroke-dashoffset:0; opacity:1; } }
@keyframes pop     { 50% { transform:scale(1.2);} to { transform:scale(1); opacity:1; } }
@keyframes mouthIn { to { transform:scaleX(1); opacity:1; } }
@keyframes breathe { 0%,100% { opacity:.0; } 50% { opacity:.3; } }
@keyframes blink   { 0%,18%,100% { transform:scaleY(1);} 19%,21% { transform:scaleY(.2);} 22% { transform:scaleY(1);} }

.bot-intro:not(.freeze) .ant-dot   { animation: dropIn .45s .1s ease-out forwards; }
.bot-intro:not(.freeze) .ant-stem  { animation: draw .55s .15s ease-out forwards; }
.bot-intro:not(.freeze) .head      { animation: draw 1.2s .25s ease-out forwards; }
.bot-intro:not(.freeze) .eye       { animation: pop .35s .9s ease-out forwards, blink 3s 1.4s ease-in-out 1; }
.bot-intro:not(.freeze) .mouth     { animation: mouthIn .35s 1.15s ease-out forwards; }
.bot-intro:not(.freeze) .bot-glow  { animation: breathe 2.2s .6s ease-in-out 1 forwards; }

/* frozen (resting) look */
.bot-intro.freeze .ant-dot,
.bot-intro.freeze .eye,
.bot-intro.freeze .mouth { transform:none; opacity:1; }
.bot-intro.freeze .ant-stem,
.bot-intro.freeze .head { stroke-dashoffset:0; opacity:1; }
.bot-intro.freeze .bot-glow { opacity:.18; }

/* motion preference */
@media (prefers-reduced-motion: reduce) {
  .bot-intro * { animation: none !important; transition: none !important; }
}

/* Smaller screens: intro bot a bit smaller */
@media (max-width: 600px){
  .bot-intro { width: 88px; height: 88px; top: 28px; }
}

/* =============== Services / Cards / CTA (existing) =============== */
#services { background:#f8f8ff; padding:80px 20px; }
.services-container {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.card{
  background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.05);
  padding:40px 20px; text-align:center; transition: transform .3s, box-shadow .3s;
}
.card:hover{ transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.card i{ font-size:2.5rem; color:#6e00ff; }
.card h3{ margin-top:20px; font-size:1.2rem; }

/* =============== About (optional) =============== */
#about { padding:100px 20px; background:#fff; color:#222; text-align:center; }
#about h2 { font-size:2.5rem; margin-bottom:20px; }
#about p { font-size:1.1rem; line-height:1.8; max-width:800px; margin:0 auto 20px auto; }

/* =============== Contact =============== */
#contact { padding:80px 20px; background:#f9f9f9; text-align:center; }
#contact h2 { font-size:2.5rem; margin-bottom:20px; color:#3e64ff; }
.contact-form { max-width:600px; margin:0 auto; text-align:left; }
.contact-form label { display:block; margin-bottom:6px; font-weight:600; color:#333; }
.contact-form input,
.contact-form textarea{
  width:100%; padding:12px; margin-bottom:20px; border:1px solid #ccc;
  border-radius:8px; font-size:1rem; font-family:inherit;
}
.contact-form button{
  padding:12px 30px; background:#3e64ff; color:#fff; font-weight:600;
  border:none; border-radius:25px; cursor:pointer; transition:background .3s ease;
}
.contact-form button:hover{ background:#5f7eff; }

/* =============== Footer =============== */
footer {
  background: #0a0a23;
  color: white;
  padding: 30px 10px;
  text-align: center;
  font-size: 14px;
  margin-top: 60px;
}

/* =============== Blog (optional) =============== */
.single-post-container {
  max-width: 900px; margin: 80px auto; padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.post-article h1 { font-size: 2.5rem; margin-bottom: 10px; color: #2575fc; }
.post-date { color: #888; font-size: 0.95rem; margin-bottom: 20px; }
.post-feature-img { width: 100%; max-height: 400px; object-fit: cover; margin: 20px 0; border-radius: 8px; }
.post-content { font-size: 1.1rem; line-height: 1.6; color: #0a0a23; }

/* =============== Responsive tweaks =============== */
@media (max-width: 600px) {
  .ventra-hero h1 { font-size: 2.4rem; }
  .services-container { grid-template-columns: 1fr; }
}

/* =============== Stan section scoping only =============== */
/* Ensure the big bot illustration sizing applies ONLY inside the Stan hero */
.assistant-hero .bot-svg { width: min(480px, 80vw); height: auto; }

/* === Header logo sizing & header height === */
:root { --header-h: 76px; }          /* was 64px */

.logo-nav {                          /* navbar logo */
  height: 40px;
  width: auto;
}

@media (min-width: 992px) {
  .logo-nav { height: 56px; }        /* desktop size */
}

/* (optional) make the hero logo bigger too */
.logo-hero {                          /* big logo in hero */
  height: 140px;                      /* tweak as you like */
}
/* Navbar logo bigger */
.logo-nav {
  height: 64px !important;   /* try 72–80 if you want larger */
  width: auto;
}

@media (min-width: 992px) {
  .logo-nav { height: 72px !important; }
}

/* Make the header bar taller so the bigger logo fits */
.site-header { height: 86px !important; }

/* (optional) hero logo size */
.logo-hero { height: 160px !important; }

/* Force bigger ONLY during intro (not when docked) */
.ventra-hero .bot-intro:not(.freeze) {
  width: 220px !important;   /* pick your size */
  height: 220px !important;
}

/* If you want it big on phones too */
@media (max-width: 600px){
  .ventra-hero .bot-intro:not(.freeze){
    width: 160px !important;
    height: 160px !important;
  }
}