/* Shyra · sections: hero, blob mascot, voice widget, mockup, pain, pricing, FAQ, industries */

/* ─── hero ─── */
.hero { padding: 48px 36px 0; text-align: center; max-width: 1000px; margin: 0 auto; position: relative; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .06em; color: var(--ink2);
  margin-bottom: 28px; border: 1.5px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
  border-radius: 100px; padding: 6px 16px;
}
.hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

.hero h1 {
  font-family: var(--serif); font-size: clamp(48px, 8vw, 100px);
  font-weight: 400; line-height: .98; letter-spacing: -3px; color: var(--ink);
  margin-bottom: 24px; text-wrap: balance;
}
.hero h1 em { font-style: italic; }
.hero-sub {
  font-size: 18px; color: var(--ink2); font-weight: 300; line-height: 1.5;
  max-width: 520px; margin: 0 auto 36px; text-wrap: balance;
}
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }

/* ─── blob mascot ─── */
@keyframes float { 0%,100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-14px) rotate(.5deg); } }
@keyframes blink { 0%,90%,100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }

.mascot-stage { position: relative; max-width: 1000px; margin: 52px auto 0; padding: 0 36px; min-height: 460px; display: flex; align-items: flex-start; justify-content: center; }
.hero-badge {
  position: absolute; background: #fff; border: 1px solid var(--border2); border-radius: 20px;
  padding: 12px 18px; display: flex; align-items: center; gap: 11px;
  box-shadow: 0 8px 32px rgba(15,15,14,.07), 0 2px 8px rgba(15,15,14,.04); white-space: nowrap;
}
.hb1 { top: 10px; left: 40px; animation: float 3.8s ease-in-out infinite; }
.hb2 { top: 10px; right: 40px; animation: float 3.8s ease-in-out infinite .9s; }
.hb3 { top: 170px; left: 0; animation: float 3.5s ease-in-out infinite 1.5s; }
.hb4 { top: 170px; right: 0; animation: float 3.5s ease-in-out infinite .4s; }
.hb-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hb-label { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.hb-sub { font-size: 11px; color: var(--ink3); margin-top: 1px; }
.hb-mini { padding: 9px 16px; border-radius: 100px; }
.hb-mini .hb-label { font-size: 13px; }

.blob-hero-wrap { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 10; }
.blob-main {
  position: relative; width: 180px; height: 180px; border-radius: 50%; background: #f4f3f0;
  box-shadow: inset -14px -18px 40px rgba(0,0,0,.11), inset 10px 12px 28px rgba(255,255,255,.85),
    0 32px 80px rgba(15,15,14,.14), 0 10px 24px rgba(15,15,14,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: float 3.4s ease-in-out infinite; cursor: pointer;
}
.blob-main::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 65% 78%, rgba(255,150,200,.22) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 72%, rgba(160,130,255,.18) 0%, transparent 48%);
}
.blob-main::after {
  content: ""; position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%);
  width: 72%; height: 12px; border-radius: 50%; background: rgba(15,15,14,.1); filter: blur(8px);
}
.blob-eyes { display: flex; gap: 24px; position: relative; z-index: 2; margin-bottom: 9px; }
.blob-eye { width: 25px; height: 25px; border-radius: 50%; background: #111; position: relative; animation: blink 5s ease-in-out infinite; }
.blob-eye::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.65); }
.blob-smile { width: 40px; height: 13px; border-bottom: 3px solid rgba(60,50,40,.35); border-radius: 0 0 100px 100px; position: relative; z-index: 2; }
.blob-main:hover { animation-play-state: paused; transform: scale(1.04); transition: transform .3s ease; }

/* voice level ring: reuses the blob as the "listen" affordance */
.blob-main[data-state] { --level: 0; box-shadow:
    inset -14px -18px 40px rgba(0,0,0,.11), inset 10px 12px 28px rgba(255,255,255,.85),
    0 32px 80px rgba(15,15,14,.14), 0 10px 24px rgba(15,15,14,.08),
    0 0 0 calc(6px + var(--level) * 26px) rgba(168, 85, 247, calc(.08 + var(--level) * .18));
  transform: scale(calc(1 + var(--level) * .06));
  transition: box-shadow 100ms linear, transform 100ms linear;
}
.blob-main[data-state="listening"] { animation-play-state: paused; }
.blob-main[data-state="thinking"] { filter: saturate(.7); }

/* ─── hero product mockup (dashboard) ─── */
.hero-mockup {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 600px; max-width: 92vw; background: #fff; border: 1px solid var(--border2);
  border-radius: 20px; overflow: hidden; box-shadow: 0 16px 60px rgba(15,15,14,.1), 0 4px 16px rgba(15,15,14,.06);
}
.hm-bar { background: var(--cream2); border-bottom: 1px solid var(--border2); padding: 10px 16px; display: flex; align-items: center; gap: 6px; }
.hm-dot { width: 10px; height: 10px; border-radius: 50%; }
.hm-title { margin-left: 8px; font-size: 11px; color: var(--ink3); font-family: var(--mono); }
.hm-live { margin-left: auto; font-size: 10px; color: var(--good); font-family: var(--mono); display: flex; align-items: center; gap: 5px; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--good); animation: pulse 1.5s infinite; }
.hm-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border2); }
.hm-stat { background: #fff; padding: 14px 16px; }
.hm-n { font-family: var(--serif); font-size: 26px; font-style: italic; color: var(--ink); line-height: 1; }
.hm-l { font-size: 10px; color: var(--ink3); font-family: var(--mono); margin-top: 3px; }
.hm-agents { padding: 4px 16px; }
.hm-agent-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border2); }
.hm-agent-row:last-child { border-bottom: none; }
.hm-agent-icon { width: 32px; height: 32px; border-radius: 9px; background: var(--cream2); border: 1px solid var(--border2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hm-agent-name { font-size: 12px; font-weight: 500; color: var(--ink); }
.hm-agent-status { font-size: 10px; color: var(--ink3); font-family: var(--mono); display: flex; align-items: center; gap: 5px; }
.hm-agent-num { margin-left: auto; text-align: right; }
.hm-agent-big { font-size: 16px; font-weight: 500; color: var(--ink); }
.hm-agent-tiny { font-size: 10px; color: var(--ink3); font-family: var(--mono); }
.typing-dots span { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); margin: 0 1px; animation: blink 1.2s ease infinite; }
.typing-dots span:nth-child(2) { animation-delay: .18s; }
.typing-dots span:nth-child(3) { animation-delay: .36s; }

@media (max-width: 1023px) {
  .hero-badge { display: none; }
  .mascot-stage { min-height: auto; }
  .blob-hero-wrap { position: relative; transform: none; left: auto; margin: 0 auto; width: fit-content; }
  .hero-mockup { position: relative; left: auto; transform: none; width: 100%; margin-top: 32px; }
}

/* ─── voice widget (talk to Shyra) ─── */
.voice-card {
  max-width: 420px; margin: 40px auto 0; padding: 1.6rem 1.4rem 1.3rem;
  background: #fff; border: 1px solid var(--border2); border-radius: 24px;
  box-shadow: 0 16px 60px rgba(15,15,14,.08); display: flex; flex-direction: column; gap: .9rem;
}
.vw-feed { display: flex; flex-direction: column; gap: .5rem; max-height: 220px; overflow: auto; scroll-behavior: smooth; }
.vw-msg { margin: 0; padding: 9px 13px; font-size: .88rem; line-height: 1.45; max-width: 85%; border-radius: 14px; }
.vw-msg.agent { align-self: flex-start; background: var(--cream2); border: 1px solid var(--border2); border-bottom-left-radius: 3px; }
.vw-msg.user { align-self: flex-end; background: #f3e8ff; border: 1px solid #e4cfff; color: var(--ink); border-bottom-right-radius: 3px; }
.vw-hint { margin: 0; text-align: center; font-size: .8rem; color: var(--ink3); min-height: 2.1em; }
.vw-end { align-self: center; background: none; border: 0; color: var(--ink3); font: 500 .82rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vw-end:hover { color: var(--ink); }
.mic-ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ─── stat ticker ─── */
.social-proof { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 44px 36px 0; flex-wrap: wrap; text-align: center; }
.sp-text { font-size: 14px; color: var(--ink2); }
.sp-text strong { color: var(--ink); font-weight: 600; }

/* ─── pain section ─── */
.pain-section { padding: 100px 36px; }
.pain-inner { max-width: 860px; margin: 0 auto; }
.pain-kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 24px; display: block; }
.pain-headline { font-family: var(--serif); font-size: clamp(28px,3.8vw,52px); font-weight: 400; line-height: 1.3; letter-spacing: -.5px; color: var(--ink); margin-bottom: 32px; }
.pain-headline em { font-style: italic; color: var(--ink3); }
.pain-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 52px; }
.pain-card { background: #fff; border: 1px solid var(--border2); border-radius: 18px; padding: 26px; transition: transform .2s, box-shadow .2s; }
.pain-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(15,15,14,.08); }
.pain-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--cream2); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 18px; }
.pain-title { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.pain-text { font-size: 13px; color: var(--ink2); line-height: 1.65; font-weight: 300; }
.pain-cost { font-size: 12px; color: var(--bad); font-family: var(--mono); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border2); }

@media (max-width: 900px) { .pain-grid { grid-template-columns: 1fr; } }

/* ─── how it works ─── */
.how-section { padding: 80px 0; max-width: 1140px; margin: 0 auto; padding-left: 36px; padding-right: 36px; }
.how-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 52px; }
.how-step { background: #fff; border: 1px solid var(--border2); border-radius: 20px; padding: 32px; transition: box-shadow .2s, transform .2s; }
.how-step:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(15,15,14,.07); }
.step-num { font-family: var(--serif); font-size: 13px; font-style: italic; color: var(--ink3); margin-bottom: 16px; background: var(--cream2); border: 1px solid var(--border2); padding: 4px 12px; border-radius: 100px; display: inline-block; }
.step-title { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.step-desc { font-size: 13px; color: var(--ink2); line-height: 1.65; font-weight: 300; }
.step-tag { display: inline-block; margin-top: 14px; font-size: 11px; font-family: var(--mono); color: var(--ink3); border: 1px solid var(--border); padding: 3px 12px; border-radius: 100px; }

@media (max-width: 900px) { .how-steps { grid-template-columns: 1fr; } }

/* ─── agent catalog ─── */
.agents-section { padding: 80px 36px; max-width: 1140px; margin: 0 auto; }
.agents-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.agent-card { border: 1px solid var(--border2); border-radius: 20px; padding: 24px; background: #fff; transition: all .22s; }
.agent-card:hover { border-color: rgba(15,15,14,.2); transform: translateY(-4px); box-shadow: 0 10px 32px rgba(15,15,14,.07); }
.ac-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--cream2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 18px; }
.ac-name { font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.ac-desc { font-size: 13px; color: var(--ink2); line-height: 1.6; font-weight: 300; }

@media (max-width: 900px) { .agents-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .agents-grid { grid-template-columns: 1fr; } }

/* ─── industry pills (marquee) ─── */
@keyframes marquee { to { transform: translateX(-50%); } }
.ind-section { padding: 60px 0 80px; overflow: hidden; }
.ind-inner { max-width: 1140px; margin: 0 auto 32px; padding: 0 36px; }
.ind-track { display: flex; gap: 10px; width: max-content; animation: marquee 30s linear infinite; padding: 0 36px; }
.ind-track:hover { animation-play-state: paused; }
.ind-pill { padding: 11px 22px; border-radius: 100px; border: 1px solid var(--border); font-size: 14px; color: var(--ink2); background: #fff; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .ind-track { animation: none; flex-wrap: wrap; width: auto; } }

/* ─── proof of capability (honest, replaces fabricated testimonials) ─── */
.proof-section { padding: 80px 36px; background: var(--cream2); border-top: 1px solid var(--border2); border-bottom: 1px solid var(--border2); }
.proof-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 52px; }
.proof-card { background: #fff; border: 1px solid var(--border2); border-radius: 20px; padding: 28px; }
.proof-title { font-family: var(--serif); font-size: 21px; font-style: italic; color: var(--ink); margin-bottom: 10px; }
.proof-desc { font-size: 14px; color: var(--ink2); line-height: 1.65; font-weight: 300; }

@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; } }

/* ─── pricing ─── */
.pricing-section { padding: 80px 36px; max-width: 900px; margin: 0 auto; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.pc { border: 1.5px solid var(--border2); border-radius: 20px; padding: 32px; background: #fff; display: flex; flex-direction: column; }
.pc.hot { background: var(--ink); }
.pc-label { font-size: 11px; font-family: var(--mono); color: var(--ink3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; }
.pc.hot .pc-label { color: rgba(255,255,255,.5); }
.pc-price { font-family: var(--serif); font-size: 48px; font-style: italic; font-weight: 400; letter-spacing: -2px; line-height: 1; margin-bottom: 4px; color: var(--ink); }
.pc.hot .pc-price { color: #fff; }
.pc-period { font-size: 12px; color: var(--ink3); margin-bottom: 24px; font-weight: 300; }
.pc.hot .pc-period { color: rgba(255,255,255,.45); }
.pc-list { flex: 1; margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; }
.pc-list li { font-size: 13px; color: var(--ink2); font-weight: 300; display: flex; align-items: center; gap: 8px; line-height: 1.4; }
.pc-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink3); flex-shrink: 0; }
.pc.hot .pc-list li { color: rgba(255,255,255,.7); }
.pc.hot .pc-list li::before { background: rgba(255,255,255,.4); }
.pc-btn { display: block; width: 100%; text-align: center; padding: 13px; border-radius: 100px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1.5px solid rgba(15,15,14,.15); color: var(--ink); background: transparent; transition: all .15s; text-decoration: none; }
.pc-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.pc.hot .pc-btn { background: #fff; color: var(--ink); border: none; }
.pc.hot .pc-btn:hover { opacity: .88; }
.price-compare { text-align: center; margin-top: 24px; font-size: 13px; color: var(--ink3); font-family: var(--mono); }

@media (max-width: 767px) { .price-grid { grid-template-columns: 1fr; } }

/* ─── FAQ ─── */
.faq-section { padding: 80px 36px; max-width: 760px; margin: 0 auto; }
.faq-h { font-family: var(--serif); font-size: clamp(32px,4vw,52px); font-style: italic; font-weight: 400; letter-spacing: -1px; margin-bottom: 48px; }
.faq-list { border: 1px solid var(--border2); border-radius: 22px; overflow: hidden; background: #fff; }
.faq-list details { border-bottom: 1px solid var(--border2); }
.faq-list details:last-child { border-bottom: none; }
.faq-list summary { list-style: none; cursor: pointer; padding: 20px 28px; font-size: 15px; font-weight: 500; color: var(--ink); position: relative; transition: background .15s; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { background: var(--cream2); }
.faq-list summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font: 300 22px var(--serif); color: var(--ink3); transition: transform .25s;
}
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { padding: 0 28px 20px; margin: 0; font-size: 14px; color: var(--ink2); line-height: 1.75; font-weight: 300; }

/* ─── dark CTA band ─── */
.cta-band { background: var(--ink); color: #fff; padding: 90px 36px; text-align: center; }
.cta-h { font-family: var(--serif); font-size: clamp(36px,6vw,72px); font-weight: 400; letter-spacing: -2px; line-height: 1; margin-bottom: 14px; }
.cta-h em { font-style: italic; }
.cta-p { font-size: 16px; color: rgba(255,255,255,.55); font-weight: 300; margin-bottom: 30px; max-width: 420px; margin-left: auto; margin-right: auto; }
.cta-band .cta-row { margin-bottom: 0; }

/* ─── responsive type ─── */
@media (max-width: 640px) {
  .hero { padding: 40px 20px 0; }
  .hero h1 { letter-spacing: -2px; }
  .pain-section, .how-section, .agents-section, .pricing-section, .faq-section, .proof-section, .cta-band { padding-left: 20px; padding-right: 20px; }
}