/*
Theme Name: AllStreak
Theme URI: https://allstreak.com/
Template: astra
Author: AllStreak
Description: AllStreak child theme built on Astra — WhatsApp AI Sales Agent marketing site.
Version: 1.0.0
Text Domain: allstreak
*/

/* Without this, "width: 100%" plus an element's own padding/border adds up
   to MORE than 100% of the parent (padding is added outside the declared
   width under the CSS default of box-sizing: content-box) — exactly what
   was making the "Request a Demo" button in the mobile drawer render wider
   than its container and push the page into horizontal overflow. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --brand-teal: #1AB99A;
  --brand-teal-dark: #0E8F76;
  --brand-teal-light: #E6F9F3;
  --ink-navy: #0F1B2D;
  --ink-navy-soft: #17273D;
  --slate: #4A5568;
  --slate-light: #7C8A9A;
  --whatsapp-green: #25D366;
  --coral: #FF6B5B;
  --coral-light: #FFEDEA;
  --surface: #FFFFFF;
  --surface-alt: #F7FAF9;
  --surface-dark: #0B1420;
  --border: #E4EAE8;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --max-w: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(15, 27, 45, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 27, 45, 0.08);
  --shadow-lg: 0 20px 48px rgba(15, 27, 45, 0.14);
  --ease: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

html.allstreak-theme { scroll-behavior: smooth; overflow-x: hidden; }
body.allstreak-theme {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-navy);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* The mobile drawer is a position:fixed panel translated off-screen when
     closed. On some mobile browsers a transformed fixed element can still
     widen the page's scrollable area even while visually off-canvas, which
     shows up as horizontal overflow / the panel "hanging past" the screen
     edge. overflow-x:hidden on both html and body is the standard guard. */
  overflow-x: hidden;
}
.allstreak-theme :where(img) { max-width: 100%; display: block; }
.allstreak-theme :where(a) { color: inherit; text-decoration: none; }
.allstreak-theme :where(h1, h2, h3, h4) { font-family: var(--font-display); margin: 0 0 .5em; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink-navy); }
.allstreak-theme :where(p) { margin: 0 0 1em; color: var(--slate); }
.allstreak-theme :where(ul) { margin: 0; padding: 0; list-style: none; }
.allstreak-theme :where(button) { font-family: inherit; cursor: pointer; }
.allstreak-theme :where(input, select, textarea) { font-family: inherit; }
.allstreak-theme :focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 2px; }

.as-wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.as-section { padding: 96px 0; }
.as-section-tight { padding: 64px 0; }
@media (max-width: 768px) {
  .as-section { padding: 64px 0; }
  .as-section-tight { padding: 44px 0; }
}

.as-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-teal-dark);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.as-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-teal); box-shadow: 0 0 0 4px var(--brand-teal-light); }

.as-section-head { max-width: 640px; margin: 0 0 48px; }
.as-section-head.center { margin-inline: auto; text-align: center; }
.as-section-head h2 { font-size: clamp(28px, 3.6vw, 42px); }
.as-section-head p { font-size: 17px; }

.as-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 15px 28px; border-radius: var(--radius-pill); border: none;
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.as-btn-primary { background: var(--brand-teal); color: #fff; box-shadow: var(--shadow-sm); }
.as-btn-primary:hover { background: var(--brand-teal-dark); transform: translateY(-3px); box-shadow: var(--shadow-md); color: #fff; }
.as-btn-ghost { background: transparent; color: var(--ink-navy); border: 1.5px solid var(--border); }
.as-btn-ghost:hover { border-color: var(--brand-teal); color: var(--brand-teal-dark); transform: translateY(-2px); }
.as-btn-light { background: #fff; color: var(--ink-navy); }
.as-btn-light:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.as-btn-wa { background: var(--whatsapp-green); color: #fff; }
.as-btn-wa:hover { background: #1EBE57; transform: translateY(-3px); box-shadow: var(--shadow-md); color: #fff; }
.as-btn-lg { padding: 18px 34px; font-size: 16px; }
.as-btn-block { width: 100%; }
.as-btn[disabled] { opacity: .6; cursor: not-allowed; transform: none !important; }

/* Header */
.as-header {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 500;
  background: var(--surface-alt);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.as-header.scrolled { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
/* backdrop-filter is expensive to composite on scroll on many Android GPUs;
   only turn it on for desktop, where it's cheap and rarely a jank risk. */
@media (min-width: 1025px) {
  .as-header { backdrop-filter: blur(10px); }
}
.as-header .as-wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.as-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink-navy); }
.as-logo-mark { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-teal); position: relative; flex-shrink: 0; }
.as-logo-mark::before, .as-logo-mark::after { content: ''; position: absolute; background: #fff; border-radius: 2px; }
.as-logo-mark::before { width: 5px; height: 5px; top: 12px; left: 9px; box-shadow: 12px 0 0 #fff; }
.as-logo-mark::after { width: 12px; height: 3px; border-radius: 0 0 6px 6px; bottom: 9px; left: 11px; }

/* Desktop inline nav — simple, no positioning tricks, hidden entirely on mobile */
.as-nav-desktop { display: flex; align-items: center; }
.as-nav-desktop ul { display: flex; align-items: center; gap: 32px; font-size: 14.5px; font-weight: 500; }
.as-nav-desktop a { color: var(--slate); transition: color .2s; }
.as-nav-desktop a:hover, .as-nav-desktop .current-menu-item a { color: var(--ink-navy); }

.as-header-actions { display: flex; align-items: center; gap: 18px; }
.as-header-actions .as-btn { padding: 12px 22px; font-size: 14.5px; }

.as-nav-toggle { display: none; background: none; border: none; padding: 6px; flex-shrink: 0; }
.as-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink-navy); margin: 5px 0; transition: transform .25s, opacity .25s; }

/* Mobile drawer — a self-contained fixed panel with its own top:0, so it
   never depends on measuring the header's height. An overlay behind it
   handles tap-to-close and visually confirms the open state. */
.as-nav-overlay {
  position: fixed; inset: 0; background: rgba(15,27,45,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
  z-index: 540;
}
.as-nav-overlay.open { opacity: 1; pointer-events: auto; }

.as-nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw);
  background: #fff; z-index: 550; overflow-y: auto;
  padding: 24px 24px 40px;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  box-shadow: -12px 0 32px rgba(15,27,45,.12);
}
.as-nav-drawer.open { transform: translateX(0); }
.as-nav-drawer ul { display: flex; flex-direction: column; }
/* Scoped to the actual menu <ul> only — a bare ".as-nav-drawer a" also
   matched the logo link and the "Request a Demo" button (both direct
   children of the drawer), silently overriding their own flex/button
   display and breaking the logo mark's layout and the button's centering. */
.as-nav-drawer ul a { display: block; width: 100%; padding: 16px 4px; border-bottom: 1px solid var(--border); font-size: 17px; color: var(--ink-navy); }
.as-nav-drawer .as-btn { margin: 44px 0 22px; }

.as-nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.as-nav-drawer-head .as-logo { font-size: 18px; }
.as-nav-close { display: block; background: none; border: none; font-size: 22px; color: var(--slate-light); padding: 8px; flex-shrink: 0; }

@media (max-width: 1024px) {
  .as-nav-desktop { display: none; }
  .as-nav-toggle { display: block; }
}

/* Below 640px the logo + full "Request a Demo" button + hamburger no longer
   fit comfortably next to each other — drop the header CTA text (it's
   still reachable via the drawer above, the sticky bar, and the WhatsApp FAB)
   and keep the top bar to just the logo and menu toggle. */
@media (max-width: 640px) {
  .as-header-actions .as-header-cta { display: none; }
  .as-header .as-wrap { padding: 0 18px; }
  .as-header-actions { gap: 6px; }
}
@media (max-width: 380px) {
  .as-logo { font-size: 17px; gap: 8px; }
  .as-logo-mark { width: 28px; height: 28px; }
}

/* Unified scroll lock — used by both the mobile drawer and any modal, so
   there's exactly one mechanism instead of two that could disagree. */
body.as-scroll-lock { overflow: hidden; height: 100%; }

/* Chat thread */
.as-thread { display: flex; flex-direction: column; gap: 14px; }
.as-msg {
  max-width: 86%; padding: 14px 18px; border-radius: var(--radius-md); font-size: 15.5px; position: relative;
  opacity: 0; transform: translateY(14px); animation: as-msgIn .55s var(--ease) forwards;
}
.as-msg p { margin: 0; color: inherit; }
.as-msg .as-meta { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; margin-top: 8px; opacity: .65; }
.as-msg-in { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px; color: var(--ink-navy); box-shadow: var(--shadow-sm); }
.as-msg-out { align-self: flex-end; background: var(--brand-teal); color: #fff; border-bottom-right-radius: 4px; }
.as-msg-out .as-meta { justify-content: flex-end; }
.as-ticks { color: rgba(255,255,255,.75); transition: color .4s; }
.as-ticks.read { color: #4FC3F7; }
@keyframes as-msgIn { to { opacity: 1; transform: translateY(0); } }
.as-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 14px 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); border-bottom-left-radius: 4px; }
.as-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--slate-light); animation: as-bounce 1.2s infinite; }
.as-typing span:nth-child(2) { animation-delay: .15s; }
.as-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes as-bounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Hero */
.as-hero { padding: 56px 0 80px; background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%); overflow: hidden; }
.as-hero .as-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.as-hero-copy h1 { font-size: clamp(34px, 4.6vw, 56px); }
.as-hero-copy .as-lede { font-size: 18px; color: var(--slate); max-width: 520px; }
.as-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; }
.as-trust-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--slate-light); }
.as-trust-row .as-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-teal); box-shadow: 0 0 0 4px var(--brand-teal-light); flex-shrink: 0; animation: as-pulse 1.8s infinite; }
@keyframes as-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.as-hero-visual { position: relative; }
.as-phone-frame { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px; position: relative; }
.as-phone-frame .as-badge-float {
  position: absolute; top: -16px; right: 18px; background: var(--ink-navy); color: #fff;
  font-family: var(--font-mono); font-size: 12px; padding: 8px 14px; border-radius: var(--radius-pill);
  display: flex; align-items: center; gap: 6px; box-shadow: var(--shadow-md);
}
.as-phone-frame .as-badge-float::before { content: '⏱'; }

@media (max-width: 1024px) {
  .as-hero .as-wrap { grid-template-columns: 1fr; }
  .as-hero-visual { order: -1; max-width: 460px; margin: 0 auto; }
}

/* Features */
.as-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.as-feature-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 30px 26px; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.as-feature-card:hover { transform: translateY(-6px); border-color: var(--brand-teal); box-shadow: var(--shadow-md); }
.as-icon-badge { width: 46px; height: 46px; border-radius: 13px; background: var(--brand-teal-light); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.as-icon-badge svg { width: 22px; height: 22px; stroke: var(--brand-teal-dark); }
.as-feature-card h3 { font-size: 17.5px; margin-bottom: 8px; }
.as-feature-card p { font-size: 14.5px; margin: 0; }
.as-feature-card a { color: var(--brand-teal-dark); text-decoration: underline; }
@media (max-width: 1024px) { .as-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .as-feature-grid { grid-template-columns: 1fr; } }

/* Why band */
.as-why-band { background: linear-gradient(160deg, var(--surface-dark) 0%, var(--ink-navy-soft) 60%, #0E3A32 130%); color: #fff; }
.as-why-band .as-section-head p { color: rgba(255,255,255,.7); }
.as-why-band .as-eyebrow { color: #6FE3C4; }
.as-why-band .as-eyebrow::before { background: #6FE3C4; box-shadow: 0 0 0 4px rgba(111,227,196,.2); }
.as-why-band h2 { color: #fff; }
.as-why-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 54px; align-items: center; }
.as-why-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 40px 30px; text-align: center; }
.as-why-stat .as-big { font-family: var(--font-display); font-size: 54px; font-weight: 700; color: var(--brand-teal); line-height: 1; }
.as-why-stat .as-tag { font-size: 14px; color: rgba(255,255,255,.75); margin-top: 10px; }
.as-why-list { display: grid; gap: 4px; }
.as-why-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.as-why-item:last-child { border-bottom: none; }
.as-why-item .as-num { font-family: var(--font-mono); color: var(--brand-teal); font-size: 13px; padding-top: 4px; }
.as-why-item h4 { color: #fff; font-size: 16.5px; margin: 0 0 6px; font-family: var(--font-body); font-weight: 600; }
.as-why-item p { color: rgba(255,255,255,.68); font-size: 14.5px; margin: 0; }
@media (max-width: 900px) { .as-why-layout { grid-template-columns: 1fr; } }

/* Stats */
.as-stat-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.as-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.as-stat-grid .as-num { font-family: var(--font-display); font-size: clamp(30px,4vw,44px); font-weight: 700; color: var(--brand-teal-dark); }
.as-stat-grid .as-lbl { font-size: 13.5px; color: var(--slate); margin-top: 6px; }
@media (max-width: 768px) { .as-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; } }

/* Pricing CTA */
.as-pricing-cta { max-width: 760px; margin: 0 auto; }
.as-pricing-cta-inner { background: linear-gradient(150deg, var(--ink-navy) 0%, var(--brand-teal-dark) 160%); border-radius: var(--radius-lg); padding: 52px 48px; text-align: center; color: #fff; box-shadow: var(--shadow-lg); }
.as-pricing-cta-inner h3 { color: #fff; font-size: clamp(20px, 2.4vw, 26px); max-width: 480px; margin: 0 auto 12px; }
.as-pricing-cta-inner p { color: rgba(255,255,255,.72); max-width: 460px; margin: 0 auto; font-size: 15px; }
@media (max-width: 640px) { .as-pricing-cta-inner { padding: 38px 24px; } }

/* FAQ */
.as-faq-thread { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.as-faq-item { display: flex; flex-direction: column; gap: 10px; }
.as-faq-item .as-msg-out { align-self: flex-end; cursor: pointer; }
.as-faq-item .as-answer { align-self: flex-start; max-width: 86%; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); overflow: hidden; }
.as-faq-item .as-answer-header { padding: 14px 18px 0; font-weight: 600; font-size: 15px; }
.as-faq-item .as-answer-body { padding: 8px 18px 18px; font-size: 14.5px; color: var(--slate); margin: 0; }

/* CTA band */
.as-cta-band { background: linear-gradient(120deg, var(--brand-teal-dark), var(--ink-navy) 110%); color: #fff; text-align: center; }
.as-cta-band h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); max-width: 680px; margin-inline: auto; }
.as-cta-band p { color: rgba(255,255,255,.8); max-width: 520px; margin: 14px auto 34px; font-size: 17px; }
.as-cta-band .as-hero-ctas { justify-content: center; margin: 0; }

/* Footer */
.as-footer { background: var(--surface-dark); color: rgba(255,255,255,.72); padding: 72px 0 28px; }
.as-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
.as-footer-grid .as-logo { color: #fff; margin-bottom: 14px; }
.as-footer-grid p { color: rgba(255,255,255,.55); font-size: 14px; }
.as-footer-col h5 { font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.5); margin-bottom: 16px; }
.as-footer-col ul { display: grid; gap: 12px; }
.as-footer-col a { font-size: 14.5px; color: rgba(255,255,255,.75); transition: color .2s; }
.as-footer-col a:hover { color: var(--brand-teal); }
.as-newsletter { display: flex; gap: 8px; margin-top: 14px; }
.as-newsletter input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #fff; font-size: 14px; }
.as-newsletter input::placeholder { color: rgba(255,255,255,.4); }
.as-newsletter button { background: var(--brand-teal); color: #fff; border: none; border-radius: var(--radius-sm); padding: 12px 16px; font-weight: 600; }
.as-social-row { display: flex; gap: 12px; margin-top: 18px; }
.as-social-row a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.as-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 54px; padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: rgba(255,255,255,.45); }
@media (max-width: 900px) { .as-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .as-footer-grid { grid-template-columns: 1fr; } }

/* WhatsApp FAB */
.as-fab-wa { position: fixed; right: 24px; bottom: 24px; z-index: 601; background: var(--whatsapp-green); color: #fff; width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); font-size: 26px; transition: transform .25s var(--ease); }
.as-fab-wa:hover { transform: scale(1.08); color: #fff; }
.as-fab-wa .as-ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--whatsapp-green); animation: as-ping 2.2s infinite; }
@keyframes as-ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* Reveal */
.as-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.as-reveal.in { opacity: 1; transform: translateY(0); }
html:not(.as-js) .as-reveal { opacity: 1; transform: none; }

/* Page hero */
.as-page-hero { padding: 64px 0 56px; background: var(--surface-alt); text-align: center; border-bottom: 1px solid var(--border); }
.as-page-hero h1 { font-size: clamp(30px, 4.4vw, 48px); }
.as-page-hero p { font-size: 17px; max-width: 560px; margin: 0 auto; }
.as-breadcrumb { font-family: var(--font-mono); font-size: 12.5px; color: var(--slate-light); margin-bottom: 16px; }
.as-breadcrumb a { color: var(--brand-teal-dark); }

.as-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px; transition: transform .25s var(--ease), box-shadow .25s; }
.as-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

/* Forms */
.as-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.as-form-grid .as-full { grid-column: 1 / -1; }
.as-field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; color: var(--ink-navy); }
.as-field .as-hint { font-size: 12px; color: var(--slate-light); font-weight: 400; margin-left: 6px; }
.as-field input, .as-field select, .as-field textarea { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14.5px; background: var(--surface-alt); transition: border-color .2s, background .2s; }
.as-field input:focus, .as-field select:focus, .as-field textarea:focus { border-color: var(--brand-teal); background: #fff; outline: none; }
.as-field textarea { resize: vertical; min-height: 110px; }
@media (max-width: 640px) { .as-form-grid { grid-template-columns: 1fr; } }

.as-form-error { display: none; color: #C4402F; font-size: 13.5px; margin-top: 8px; }
.as-form-error.show { display: block; }
.as-form-success { display: none; text-align: center; padding: 40px 20px; }
.as-form-success.show { display: block; }
.as-form-success .as-check { width: 60px; height: 60px; border-radius: 50%; background: var(--brand-teal-light); color: var(--brand-teal-dark); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 18px; }

.as-steps { display: grid; gap: 22px; }
.as-step { display: flex; gap: 16px; }
.as-step .as-idx { font-family: var(--font-mono); color: var(--brand-teal-dark); background: var(--brand-teal-light); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.as-step h4 { margin: 0 0 4px; font-size: 15.5px; font-family: var(--font-body); font-weight: 600; }
.as-step p { margin: 0; font-size: 14px; }

.as-quote-card { background: var(--ink-navy); color: #fff; border-radius: var(--radius-lg); padding: 30px; }
.as-quote-card p { color: rgba(255,255,255,.85); font-size: 15.5px; font-style: italic; }
.as-quote-card .as-who { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-style: normal; }
.as-quote-card .as-who .as-dot { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-teal); flex-shrink: 0; }
.as-quote-card .as-who strong { font-size: 14px; color: #fff; display: block; }
.as-quote-card .as-who span { font-size: 12.5px; color: rgba(255,255,255,.6); }
.as-quote-card .as-who a { color: #fff; text-decoration: underline; }

/* Blog */
.as-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.as-post-card .as-thumb { aspect-ratio: 16/10; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--brand-teal-light), #fff); margin-bottom: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.as-post-card .as-tag { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; color: var(--brand-teal-dark); }
.as-post-card h3 { font-size: 17px; margin: 8px 0; }
.as-post-card .as-meta-row { font-size: 12.5px; color: var(--slate-light); margin-top: 12px; }
@media (max-width: 1024px) { .as-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .as-blog-grid { grid-template-columns: 1fr; } }

.as-post-hero-tag { display: inline-block; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--brand-teal-dark); background: var(--brand-teal-light); padding: 6px 14px; border-radius: var(--radius-pill); margin-bottom: 18px; }
.as-prose { max-width: 720px; margin: 0 auto; font-size: 16.5px; }
.as-prose h2 { font-size: 24px; margin-top: 1.6em; }
.as-prose p { color: var(--slate); }
.as-prose blockquote { border: none; border-left: 3px solid var(--brand-teal); margin: 1.6em 0; padding: 2px 0 2px 20px; font-style: italic; color: var(--ink-navy); }

.as-pdf-box { max-width: 720px; margin: 40px auto 0; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px 28px; display: flex; align-items: center; gap: 18px; justify-content: space-between; flex-wrap: wrap; }
.as-pdf-box .as-pdf-copy h4 { margin: 0 0 4px; font-size: 15.5px; }
.as-pdf-box .as-pdf-copy p { margin: 0; font-size: 13.5px; }

.as-modal-overlay { position: fixed; inset: 0; background: rgba(15,27,45,.55); z-index: 900; display: none; align-items: center; justify-content: center; padding: 20px; }
.as-modal-overlay.open { display: flex; }
.as-modal { background: #fff; border-radius: var(--radius-lg); max-width: 440px; width: 100%; padding: 34px; position: relative; box-shadow: var(--shadow-lg); max-height: 90vh; overflow-y: auto; }
.as-modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 20px; color: var(--slate-light); padding: 6px; }
.as-modal h3 { font-size: 20px; margin-bottom: 6px; }
.as-modal p.as-modal-sub { font-size: 14px; margin-bottom: 22px; }
.as-modal .as-field { margin-bottom: 16px; }
.as-modal .as-loading { display: none; text-align: center; padding: 30px 0; }
.as-modal .as-loading.show { display: block; }
.as-modal .as-loading .as-spinner { width: 34px; height: 34px; border: 3px solid var(--brand-teal-light); border-top-color: var(--brand-teal); border-radius: 50%; margin: 0 auto 14px; animation: as-spin .8s linear infinite; }
@keyframes as-spin { to { transform: rotate(360deg); } }

/* About */
.as-about-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.as-value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.as-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.as-team-card .as-photo { aspect-ratio: 1; border-radius: var(--radius-md); background: linear-gradient(150deg, var(--brand-teal-light), var(--surface-alt)); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.as-team-card h4 { font-size: 15px; margin: 0 0 2px; }
.as-team-card span { font-size: 13px; color: var(--slate-light); }
@media (max-width: 1024px) { .as-about-hero-grid { grid-template-columns: 1fr; } .as-value-grid, .as-team-grid { grid-template-columns: repeat(2, 1fr); } }

/* Contact */
.as-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; }
.as-info-card { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.as-info-card:last-child { border-bottom: none; }
.as-info-card .as-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-teal-light); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.as-info-card h4 { margin: 0 0 4px; font-size: 15px; }
.as-info-card p { margin: 0; font-size: 14px; }
.as-map-box { margin-top: 24px; aspect-ratio: 16/9; border-radius: var(--radius-md); background: repeating-linear-gradient(45deg, var(--surface-alt), var(--surface-alt) 10px, #EEF4F2 10px, #EEF4F2 20px); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--slate-light); font-size: 13px; font-family: var(--font-mono); }
@media (max-width: 900px) { .as-contact-grid { grid-template-columns: 1fr; } }

/* Nav dropdown — Resources submenu (desktop: hover/focus panel; mobile: always-open indented list) */
.as-nav-desktop li { position: relative; }
.as-nav-desktop .sub-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); min-width: 190px; padding: 8px; margin-top: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 20;
}
.as-nav-desktop li.menu-item-has-children:hover > .sub-menu,
.as-nav-desktop li.menu-item-has-children:focus-within > .sub-menu,
.as-nav-desktop li.menu-item-has-children.open > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.as-nav-desktop li.menu-item-has-children.open > a::after { transform: rotate(225deg) translateY(1px); }
.as-nav-desktop .sub-menu li { width: 100%; }
.as-nav-desktop .sub-menu a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; white-space: nowrap; }
.as-nav-desktop .sub-menu a:hover { background: var(--surface-alt); color: var(--ink-navy); }
.as-nav-desktop li.menu-item-has-children > a { display: inline-flex; align-items: center; gap: 5px; }
.as-nav-desktop li.menu-item-has-children > a::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .6; flex-shrink: 0; }

.as-nav-drawer .sub-menu { padding-left: 16px; }
.as-nav-drawer .sub-menu a { font-size: 15.5px; color: var(--slate); padding: 12px 4px; }
.as-nav-drawer li.menu-item-has-children > a { font-weight: 600; color: var(--ink-navy); }
.as-nav-drawer li.menu-item-has-children > .sub-menu { border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 4px; }
.as-nav-drawer li.menu-item-has-children > .sub-menu li:last-child a { border-bottom: none; }

/* Astra core injects its own "scroll to top" widget after the footer
   regardless of theme customization; since its JS is dequeued it never gets
   position:fixed, so it sits in normal flow as an empty full-width block and
   shows up as a stray white strip below the footer. Not a feature this site
   uses — hide it outright. */
.ast-scroll-top-icon { display: none !important; }

/* WP admin-bar offset for sticky header */
.admin-bar .as-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .as-header { top: 46px; } }


/* Footer newsletter feedback */
.as-footer .as-form-error { display:none; margin-top:10px; font-size:13px; color:#FF9A8E; }
.as-footer .as-form-error.show { display:block; }
.as-footer .as-footer-success { display:none; margin-top:10px; padding:10px 14px; border-radius:10px; background:rgba(26,185,154,.15); color:#7FE3CB; font-size:13.5px; font-weight:600; }
.as-footer .as-footer-success.show { display:block; }

/* ===== v1.5: scalable logo mark, mobile header + drawer polish, hero robot ===== */
.as-logo-mark { --m: 34px; width: var(--m); height: var(--m); }
.as-logo-mark::before { width: calc(var(--m) * .147); height: calc(var(--m) * .147); top: calc(var(--m) * .353); left: calc(var(--m) * .265); border-radius: calc(var(--m) * .06); box-shadow: calc(var(--m) * .353) 0 0 #fff; }
.as-logo-mark::after { width: calc(var(--m) * .353); height: calc(var(--m) * .088); left: calc(var(--m) * .324); bottom: calc(var(--m) * .265); border-radius: 0 0 calc(var(--m) * .18) calc(var(--m) * .18); }
@media (max-width: 640px) { .as-logo-mark { --m: 30px; } }

.as-nav-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.as-nav-drawer { display: flex; flex-direction: column; padding: 0; border-radius: 24px 0 0 24px; }
.as-nav-drawer-head { margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface-alt), #fff); }
.as-nav-close { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--surface-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--ink-navy); }
.as-nav-drawer > ul { padding: 6px 20px; }
.as-nav-drawer ul a { display: flex; align-items: center; justify-content: space-between; padding: 15px 4px; font-weight: 500; }
.as-nav-drawer > ul > li:not(.menu-item-has-children) > a::after { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--slate-light); border-top: 2px solid var(--slate-light); transform: rotate(45deg); opacity: .6; flex-shrink: 0; }
.as-nav-drawer .current-menu-item > a { color: var(--brand-teal-dark); font-weight: 700; }
.as-nav-drawer > ul > li { opacity: 0; transform: translateX(18px); }
.as-nav-drawer.open > ul > li { opacity: 1; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.as-nav-drawer.open > ul > li:nth-child(1) { transition-delay: .10s; }
.as-nav-drawer.open > ul > li:nth-child(2) { transition-delay: .14s; }
.as-nav-drawer.open > ul > li:nth-child(3) { transition-delay: .18s; }
.as-nav-drawer.open > ul > li:nth-child(4) { transition-delay: .22s; }
.as-nav-drawer.open > ul > li:nth-child(5) { transition-delay: .26s; }
.as-nav-drawer.open > ul > li:nth-child(6) { transition-delay: .30s; }
.as-nav-drawer.open > ul > li:nth-child(7) { transition-delay: .34s; }
.as-nav-drawer.open > ul > li:nth-child(8) { transition-delay: .38s; }
.as-nav-drawer.open > ul > li:nth-child(9) { transition-delay: .42s; }
.as-nav-drawer-cta { margin-top: auto; padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--surface-alt); display: grid; gap: 10px; }
.as-nav-drawer .as-nav-drawer-cta .as-btn { margin: 0; }
.as-nav-drawer-note { font-size: 12.5px; color: var(--slate-light); text-align: center; margin: 2px 0 0; }

@media (max-width: 640px) {
  .as-header .as-wrap { height: 64px; }
  .as-header-actions { gap: 10px; }
  .as-header-actions .as-header-cta { display: inline-flex; padding: 9px 16px; font-size: 13px; }
  .as-nav-toggle { width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--brand-teal-light); display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .as-nav-toggle span { width: 18px; margin: 2.5px 0; background: var(--brand-teal-dark); }
  .as-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .as-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .as-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 360px) { .as-header-actions .as-header-cta { display: none; } }

/* Hero mascot: the AllStreak bot is dropped in by a drone, jumps off, lands and welcomes you */
.as-hero-visual { padding-top: 156px; }
.as-stage { position: absolute; top: -34px; left: 6%; width: 112px; height: 150px; z-index: 6; animation: asb-fly 2.8s cubic-bezier(.22,.61,.36,1) both; pointer-events: none; }
.as-stage-bob { position: relative; width: 100%; height: 100%; animation: asb-bob .5s ease-in-out 7; }
.as-drone { position: absolute; top: 0; left: 0; width: 112px; height: 60px; z-index: 3; animation: asb-leave 1.7s cubic-bezier(.5,0,.9,.4) 3.7s forwards; }
.as-drone svg { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 8px 10px rgba(15,27,45,.22)); }
.as-drone .d-blade { transform-box: fill-box; transform-origin: center; animation: asb-spin .08s linear 70; }
.as-drone .d-led { animation: asb-led .6s ease-in-out infinite alternate; }
.as-drone .d-claw-l { transform-origin: 76px 64px; animation: asb-claw-l .3s ease-out 3.45s forwards; }
.as-drone .d-claw-r { transform-origin: 84px 64px; animation: asb-claw-r .3s ease-out 3.45s forwards; }
.as-bot { position: absolute; top: 45px; left: 7px; width: 98px; height: 102px; z-index: 2; pointer-events: none; }
.as-bot.ready { pointer-events: auto; cursor: pointer; }
.as-bot-hop, .as-bot-jump, .as-bot-squash { width: 100%; height: 100%; }
.as-bot-jump { animation: asb-jump .85s cubic-bezier(.45,0,.9,.6) 3.6s both; }
.as-bot-squash { transform-origin: 50% 100%; animation: asb-squash .6s ease-out 4.2s both, asb-breathe 3.2s ease-in-out 5.3s infinite; }
.as-bot.hop .as-bot-hop { animation: asb-hop .75s cubic-bezier(.3,.6,.4,1); }
.as-bot svg { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 6px 8px rgba(15,27,45,.18)); transform-origin: 50% 4%; animation: asb-swing .9s ease-in-out 4; }
.as-bot .r-arm-l { transform-origin: 50px 88px; animation: asb-dangle-l .45s ease-in-out 8 alternate, asb-armL 1.8s ease-in-out 4.35s both; }
.as-bot .r-arm-r { transform-origin: 90px 88px; animation: asb-dangle-r .45s ease-in-out 8 alternate, asb-wave 3.2s ease-in-out 4.35s both; }
.as-bot .r-leg-l { transform-origin: 60px 114px; animation: asb-leg-l .45s ease-in-out 8 alternate; }
.as-bot .r-leg-r { transform-origin: 80px 114px; animation: asb-leg-r .45s ease-in-out 8 alternate; }
.as-bot .r-look { transition: transform .15s ease-out; }
.as-bot .r-eyes { transform-box: fill-box; transform-origin: center; animation: asb-blink 4.4s ease-in-out 4.9s infinite; }
.as-halo { position: absolute; left: -24px; top: 66px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(26,185,154,.30) 0%, rgba(26,185,154,0) 66%); opacity: 0; animation: asb-halo-in .6s ease-out 4.2s forwards, asb-halo 2.6s ease-in-out 4.9s infinite; z-index: 0; }
.as-ring { position: absolute; left: 8px; top: 181px; width: 96px; height: 18px; border-radius: 50%; border: 2px solid rgba(26,185,154,.65); opacity: 0; animation: asb-ring .7s ease-out 4.2s forwards; z-index: 1; }
.as-puff { position: absolute; top: 178px; left: 50px; width: 16px; height: 16px; border-radius: 50%; background: rgba(148,163,184,.5); opacity: 0; z-index: 1; animation: asb-puff .75s ease-out 4.2s forwards; }
.as-puff.p1 { --px: -46px; } .as-puff.p2 { --px: -26px; width: 11px; height: 11px; } .as-puff.p3 { --px: 28px; width: 11px; height: 11px; } .as-puff.p4 { --px: 48px; }
.as-confetti { position: absolute; left: 52px; top: 150px; width: 0; height: 0; z-index: 7; }
.as-confetti i { position: absolute; left: 0; top: 0; width: 7px; height: 11px; border-radius: 2px; opacity: 0; animation: asb-conf 1.5s cubic-bezier(.2,.7,.3,1) 4.25s both; }
.as-confetti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
.as-confetti.again i { animation: asb-conf2 1.5s cubic-bezier(.2,.7,.3,1) both; }
.as-spark { position: absolute; width: 13px; height: 13px; background: #FFC83D; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; z-index: 1; animation: asb-twinkle 2.2s ease-in-out 5s infinite; }
.as-spark.s1 { left: 2px; top: 98px; } .as-spark.s2 { left: 108px; top: 112px; animation-delay: 5.7s; width: 10px; height: 10px; background: #1AB99A; } .as-spark.s3 { left: 100px; top: 78px; animation-delay: 6.3s; width: 9px; height: 9px; background: #FF6B5B; }
.as-robot-bubble { position: absolute; top: 16px; left: calc(6% + 116px); max-width: 190px; background: #fff; border: 1px solid var(--border); border-radius: 18px 18px 18px 4px; padding: 10px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink-navy); box-shadow: var(--shadow-md); z-index: 7; pointer-events: none; opacity: 0; transform: scale(.5); transform-origin: left bottom; animation: asb-pop .5s cubic-bezier(.34,1.56,.64,1) 4.5s forwards; }
.as-bubble-txt { display: inline-block; }
.as-bubble-txt.bump { animation: asb-bump .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes asb-fly { 0% { transform: translate(300px,-210px) rotate(10deg); opacity: 0; } 8% { opacity: 1; } 40% { transform: translate(-56px,-62px) rotate(-8deg); } 70% { transform: translate(22px,-20px) rotate(5deg); } 100% { transform: translate(0,0) rotate(0); opacity: 1; } }
@keyframes asb-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes asb-leave { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 22% { transform: translate(-6px,-14px) rotate(-6deg); opacity: 1; } 100% { transform: translate(280px,-320px) rotate(18deg); opacity: 0; } }
@keyframes asb-spin { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.2); } }
@keyframes asb-led { from { opacity: .35; } to { opacity: 1; } }
@keyframes asb-claw-l { to { transform: rotate(-42deg); } }
@keyframes asb-claw-r { to { transform: rotate(42deg); } }
@keyframes asb-swing { 0%,100% { transform: rotate(0); } 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } }
@keyframes asb-dangle-l { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes asb-dangle-r { from { transform: rotate(14deg); } to { transform: rotate(-16deg); } }
@keyframes asb-leg-l { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes asb-leg-r { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } }
@keyframes asb-jump { 0% { transform: translate(0,0) rotate(0); } 70% { transform: translate(0,46px) rotate(-360deg); animation-timing-function: ease-out; } 86% { transform: translate(0,32px) rotate(-360deg); animation-timing-function: ease-in; } 100% { transform: translate(0,46px) rotate(-360deg); } }
@keyframes asb-squash { 0% { transform: scale(1,1); } 18% { transform: scale(1.3,.68); } 40% { transform: scale(.94,1.1); } 58% { transform: scale(1,1); } 78% { transform: scale(1.1,.9); } 100% { transform: scale(1,1); } }
@keyframes asb-breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.02,.985); } }
@keyframes asb-hop { 0% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-36px) rotate(-180deg); } 90% { transform: translateY(0) rotate(-360deg); } 100% { transform: translateY(0) rotate(-360deg); } }
@keyframes asb-armL { 0%,100% { transform: rotate(0); } 18%,70% { transform: rotate(115deg); } }
@keyframes asb-wave { 0% { transform: rotate(0); } 12% { transform: rotate(-148deg); } 24% { transform: rotate(-168deg); } 36% { transform: rotate(-130deg); } 48% { transform: rotate(-168deg); } 60% { transform: rotate(-130deg); } 72% { transform: rotate(-168deg); } 84% { transform: rotate(-140deg); } 100% { transform: rotate(0); } }
@keyframes asb-blink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes asb-halo-in { to { opacity: 1; } }
@keyframes asb-halo { 0%,100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes asb-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes asb-puff { 0% { opacity: .85; transform: translate(0,0) scale(.3); } 100% { opacity: 0; transform: translate(var(--px),-12px) scale(1.9); } }
@keyframes asb-conf { 0% { opacity: 0; transform: translate(0,0) scale(.3) rotate(0); } 8% { opacity: 1; } 45% { opacity: 1; transform: translate(var(--dx),var(--dy)) scale(1) rotate(var(--r)); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.25),calc(var(--dy) + 130px)) scale(1) rotate(calc(var(--r) * 2)); } }
@keyframes asb-conf2 { 0% { opacity: 0; transform: translate(0,0) scale(.3) rotate(0); } 8% { opacity: 1; } 45% { opacity: 1; transform: translate(var(--dx),var(--dy)) scale(1) rotate(var(--r)); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.25),calc(var(--dy) + 130px)) scale(1) rotate(calc(var(--r) * 2)); } }
@keyframes asb-twinkle { 0%,100% { opacity: 0; transform: scale(.3) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
@keyframes asb-pop { to { opacity: 1; transform: scale(1); } }
@keyframes asb-bump { 0% { transform: scale(.6); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 420px) { .as-robot-bubble { max-width: 160px; font-size: 12.5px; padding: 9px 12px; } }
@media (prefers-reduced-motion: reduce) {
  .as-stage, .as-stage-bob, .as-drone, .as-bot-jump, .as-bot-squash, .as-bot svg, .as-bot .r-arm-l, .as-bot .r-arm-r, .as-bot .r-leg-l, .as-bot .r-leg-r, .as-bot .r-eyes, .as-halo, .as-spark, .as-robot-bubble { animation: none !important; }
  .as-drone, .as-confetti, .as-puff, .as-ring, .as-spark { display: none; }
  .as-bot-jump { transform: translateY(46px); }
  .as-halo { opacity: 1; }
  .as-robot-bubble { opacity: 1; transform: none; }
}
/* hide the floating WhatsApp button while the mobile menu is open */
body.as-scroll-lock .as-fab-wa { opacity: 0; pointer-events: none; transform: scale(.8); }