/* Additions on top of base.css (extracted from appllama-hero) */
html { scroll-behavior: smooth; }
.pill { display:inline-flex; align-items:center; gap:.5rem; border-radius:9999px; border:1px solid rgba(0,234,101,.3); background:rgba(0,234,101,.1); padding:.375rem 1rem; font-size:.75rem; font-weight:600; color:#00ea65; }
.card-glass { border-radius:1.5rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); transition:border-color .3s, transform .4s cubic-bezier(.25,1,.5,1); }
.card-glass:hover { border-color:rgba(0,234,101,.4); }
.noise-grid { background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size:22px 22px; }
[data-reveal] { opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1); }
[data-reveal].is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity:1; transform:none; transition:none; } .animate-fade-up { animation:none !important; opacity:1 !important; } }
/* WhatsApp bubbles */
.wa-wall { background:#0b141a; background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size:18px 18px; }
.wa-in, .wa-out { position:relative; max-width:84%; padding:.5rem .7rem .35rem; border-radius:.6rem; font-size:.8rem; line-height:1.35; color:#e9edef; }
.wa-in { background:#202c33; border-top-left-radius:0; align-self:flex-start; }
.wa-out { background:#005c4b; border-top-right-radius:0; align-self:flex-end; }
.wa-time { display:block; text-align:right; font-size:.62rem; color:rgba(233,237,239,.55); margin-top:.15rem; }
.wa-btn { display:block; width:100%; text-align:center; padding:.5rem; font-size:.78rem; font-weight:600; color:#53bdeb; background:#202c33; border-radius:.5rem; margin-top:.25rem; }
.wa-typing span { display:inline-block; width:6px; height:6px; margin:0 1.5px; border-radius:50%; background:#8696a0; animation:waDot 1.2s infinite; }
.wa-typing span:nth-child(2){ animation-delay:.15s } .wa-typing span:nth-child(3){ animation-delay:.3s }
@keyframes waDot { 0%,60%,100%{ transform:translateY(0); opacity:.5 } 30%{ transform:translateY(-4px); opacity:1 } }
.wa-pop { animation:waPop .35s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes waPop { from{ opacity:0; transform:translateY(8px) scale(.96) } to{ opacity:1; transform:none } }
/* range slider */
input[type=range].rng { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:9999px; background:rgba(255,255,255,.12); outline:none; }
input[type=range].rng::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#00ea65; border:3px solid #141414; box-shadow:0 0 0 1px #00ea65, 0 4px 14px rgba(0,234,101,.4); cursor:pointer; }
input[type=range].rng::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#00ea65; border:3px solid #141414; box-shadow:0 0 0 1px #00ea65; cursor:pointer; }
.logo-glow { filter:drop-shadow(0 0 22px rgba(0,234,101,.35)); }
h1, h2 { text-wrap: balance; }

/* ==========================================================================
   WhatsApp Theme System: Authentic Dark & Light Mode
   ========================================================================== */
:root {
  --wa-phone-border: #222e35;
  --wa-phone-shadow: 0 25px 60px rgba(0, 0, 0, 0.95);
  
  --wa-header-bg: #060a0d;
  --wa-header-border: rgba(0, 0, 0, 0.4);
  --wa-header-title: #ffffff;
  --wa-header-sub: #8696a0;
  --wa-header-status: #00a884;
  --wa-header-icon: rgba(255, 255, 255, 0.7);

  --wa-wallpaper-bg: #0b141a;
  --wa-wallpaper-doodle: url("data:image/svg+xml,%3Csvg width='240' height='240' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-opacity='0.04' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 25 c-6 0-10 4-10 10 0 3.5 2 6.5 5 8 L18 52 l8.5-3.5 c1.5 0.5 3.5 0.8 5 0.8 6 0 10-4 10-10 s-4-10-10-10 z'/%3E%3Ccircle cx='110' cy='35' r='12'/%3E%3Cpath d='M110 28 v7 l5 3'/%3E%3Cpath d='M175 30 l-10 10 m0-10 l10 10'/%3E%3Cpath d='M40 110 c0-7 9-14 14-14 s14 7 14 14 c0 9-14 16-14 16 s-14-7-14-16 z'/%3E%3Cpath d='M130 105 h22 v16 h-22 z M130 109 l11 8 l11-8'/%3E%3Ccircle cx='195' cy='115' r='9'/%3E%3Cpath d='M85 185 c-5 0-9 4-9 9 v14 h18 v-14 c0-5-4-9-9-9 z'/%3E%3Cpath d='M160 195 l-8-14 h16 z'/%3E%3Cpath d='M30 195 h14 l-7-12 z'/%3E%3C/g%3E%3C/svg%3E");

  --wa-in-bg: #202c33;
  --wa-in-text: #e9edef;
  --wa-in-sub: #8696a0;
  --wa-in-tail: #202c33;
  --wa-in-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.25);
  --wa-in-card-bg: #182229;
  --wa-in-card-title: #e9edef;
  --wa-in-card-desc: #d1d7db;
  --wa-in-card-domain: #8696a0;
  --wa-in-btn-border: #2a3942;
  --wa-in-btn-pri: #00a884;
  --wa-in-btn-sec: #8696a0;
  --wa-in-btn-hover: rgba(255, 255, 255, 0.04);

  --wa-out-bg: #005c4b;
  --wa-out-text: #ffffff;
  --wa-out-sub: #8696a0;
  --wa-out-tail: #005c4b;
  --wa-out-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.25);
  --wa-out-quote-bg: #025144;
  --wa-out-quote-border: #00a884;
  --wa-out-quote-title: #00a884;
  --wa-out-quote-text: #8696a0;
  --wa-out-check: #53bdeb;

  --wa-pin-bg: #111b21;
  --wa-pin-border: rgba(0, 168, 132, 0.4);
  --wa-pin-label: #8696a0;
  --wa-pin-val: #00ea65;

  --wa-bar-bg: #0b141a;
  --wa-bar-pill: #1f2c34;
  --wa-bar-icon: #8696a0;
  --wa-bar-mic-bg: #00a884;
  --wa-bar-mic-icon: #0b141a;
}

/* Light Theme Variables (Matching official WhatsApp screenshot) */
.wa-light,
[data-wa-theme="light"],
[data-wa-theme="light"] .wa-phone {
  --wa-phone-border: #2c3540;
  --wa-phone-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 45px rgba(239, 234, 226, 0.09);

  --wa-header-bg: #ffffff;
  --wa-header-border: #e9edef;
  --wa-header-title: #111b21;
  --wa-header-sub: #667781;
  --wa-header-status: #008069;
  --wa-header-icon: #54656f;

  --wa-wallpaper-bg: #efeae2;
  --wa-wallpaper-doodle: url("data:image/svg+xml,%3Csvg width='240' height='240' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1.2' stroke-opacity='0.055' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 25 c-6 0-10 4-10 10 0 3.5 2 6.5 5 8 L18 52 l8.5-3.5 c1.5 0.5 3.5 0.8 5 0.8 6 0 10-4 10-10 s-4-10-10-10 z'/%3E%3Ccircle cx='110' cy='35' r='12'/%3E%3Cpath d='M110 28 v7 l5 3'/%3E%3Cpath d='M175 30 l-10 10 m0-10 l10 10'/%3E%3Cpath d='M40 110 c0-7 9-14 14-14 s14 7 14 14 c0 9-14 16-14 16 s-14-7-14-16 z'/%3E%3Cpath d='M130 105 h22 v16 h-22 z M130 109 l11 8 l11-8'/%3E%3Ccircle cx='195' cy='115' r='9'/%3E%3Cpath d='M85 185 c-5 0-9 4-9 9 v14 h18 v-14 c0-5-4-9-9-9 z'/%3E%3Cpath d='M160 195 l-8-14 h16 z'/%3E%3Cpath d='M30 195 h14 l-7-12 z'/%3E%3C/g%3E%3C/svg%3E");

  --wa-in-bg: #ffffff;
  --wa-in-text: #111b21;
  --wa-in-sub: #667781;
  --wa-in-tail: #ffffff;
  --wa-in-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  --wa-in-card-bg: #f0f2f5;
  --wa-in-card-title: #111b21;
  --wa-in-card-desc: #3b4a54;
  --wa-in-card-domain: #667781;
  --wa-in-btn-border: #e9edef;
  --wa-in-btn-pri: #008069;
  --wa-in-btn-sec: #008069;
  --wa-in-btn-hover: #f5f6f6;

  --wa-out-bg: #d9fdd3;
  --wa-out-text: #111b21;
  --wa-out-sub: #667781;
  --wa-out-tail: #d9fdd3;
  --wa-out-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  --wa-out-quote-bg: rgba(0, 0, 0, 0.05);
  --wa-out-quote-border: #00a884;
  --wa-out-quote-title: #008069;
  --wa-out-quote-text: #54656f;
  --wa-out-check: #53bdeb;

  --wa-pin-bg: #f8fafc;
  --wa-pin-border: #00a884;
  --wa-pin-label: #667781;
  --wa-pin-val: #008069;

  --wa-bar-bg: #efeae2;
  --wa-bar-pill: #ffffff;
  --wa-bar-icon: #54656f;
  --wa-bar-mic-bg: #00a884;
  --wa-bar-mic-icon: #ffffff;
}

.wa-phone {
  background-color: var(--wa-wallpaper-bg) !important;
  border-color: var(--wa-phone-border) !important;
  box-shadow: var(--wa-phone-shadow) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wa-chat-header {
  background-color: var(--wa-header-bg) !important;
  border-bottom-color: var(--wa-header-border) !important;
  transition: background-color 0.25s, border-color 0.25s;
}
.wa-chat-header .wa-header-title {
  color: var(--wa-header-title) !important;
}
.wa-chat-header .wa-header-sub {
  color: var(--wa-header-sub) !important;
}
.wa-chat-header .wa-header-status {
  color: var(--wa-header-status) !important;
}
.wa-chat-header .wa-header-icon {
  color: var(--wa-header-icon) !important;
}

.wa-wallpaper {
  background-color: var(--wa-wallpaper-bg) !important;
  background-image: var(--wa-wallpaper-doodle) !important;
  background-repeat: repeat;
  transition: background-color 0.25s;
}

.wa-msg-in {
  background-color: var(--wa-in-bg) !important;
  color: var(--wa-in-text) !important;
  box-shadow: var(--wa-in-shadow) !important;
  transition: background-color 0.25s, color 0.25s;
}
.wa-msg-in .wa-tail-svg {
  fill: var(--wa-in-tail) !important;
}
.wa-msg-in .wa-in-text {
  color: var(--wa-in-text) !important;
}
.wa-msg-in .wa-in-card {
  background-color: var(--wa-in-card-bg) !important;
}
.wa-msg-in .wa-in-domain {
  color: var(--wa-in-card-domain) !important;
}
.wa-msg-in .wa-in-title {
  color: var(--wa-in-card-title) !important;
}
.wa-msg-in .wa-in-desc {
  color: var(--wa-in-card-desc) !important;
}
.wa-msg-in .wa-in-time {
  color: var(--wa-in-sub) !important;
}
.wa-msg-in .wa-in-more {
  color: var(--wa-in-btn-pri) !important;
}
.wa-msg-in .wa-btn-container {
  border-color: var(--wa-in-btn-border) !important;
}
.wa-msg-in .wa-btn-container > * {
  border-color: var(--wa-in-btn-border) !important;
}
.wa-msg-in .wa-btn-pri {
  color: var(--wa-in-btn-pri) !important;
}
.wa-msg-in .wa-btn-pri:hover {
  background-color: var(--wa-in-btn-hover) !important;
}
.wa-msg-in .wa-btn-sec {
  color: var(--wa-in-btn-sec) !important;
}
.wa-msg-in .wa-btn-sec:hover {
  background-color: var(--wa-in-btn-hover) !important;
}

.wa-msg-out {
  background-color: var(--wa-out-bg) !important;
  color: var(--wa-out-text) !important;
  box-shadow: var(--wa-out-shadow) !important;
  transition: background-color 0.25s, color 0.25s;
}
.wa-msg-out .wa-tail-svg {
  fill: var(--wa-out-tail) !important;
}
.wa-msg-out .wa-out-body {
  color: var(--wa-out-text) !important;
}
.wa-msg-out .wa-quote-box {
  background-color: var(--wa-out-quote-bg) !important;
  border-color: var(--wa-out-quote-border) !important;
}
.wa-msg-out .wa-quote-title {
  color: var(--wa-out-quote-title) !important;
}
.wa-msg-out .wa-quote-text {
  color: var(--wa-out-quote-text) !important;
}
.wa-msg-out .wa-out-time {
  color: var(--wa-out-sub) !important;
}
.wa-msg-out .wa-check-icon {
  color: var(--wa-out-check) !important;
}

.wa-pin-box {
  background-color: var(--wa-pin-bg) !important;
  border-color: var(--wa-pin-border) !important;
}
.wa-pin-box .wa-pin-label {
  color: var(--wa-pin-label) !important;
}
.wa-pin-box .wa-pin-val {
  color: var(--wa-pin-val) !important;
}

.wa-bar-container {
  background-color: var(--wa-bar-bg) !important;
}

/* ==========================================================================
   Simulation Animations & Spark Step Switcher (Strict Volt/White Palette)
   ========================================================================== */
.wa-pop-msg {
  animation: waMsgPop 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes waMsgPop {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.spark-step-btn {
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.spark-step-btn.is-active {
  border-color: #00ea65 !important;
  background-color: rgba(0, 234, 101, 0.08) !important;
  box-shadow: 0 0 25px rgba(0, 234, 101, 0.12);
}
.spark-step-btn.is-active .step-num {
  border-color: #00ea65 !important;
  background-color: #00ea65 !important;
  color: #06080c !important;
  font-weight: 800;
}

.spark-chat-scene {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
.spark-chat-scene.is-active {
  display: flex;
  opacity: 1;
}

/* Ripple on interactive WhatsApp buttons */
.wa-btn-tap {
  transition: background-color 0.15s, transform 0.15s;
}
.wa-btn-tap:active {
  transform: scale(0.98);
  background-color: rgba(0, 168, 132, 0.12) !important;
}

/* ==========================================================================
   Mobile E-Commerce Phone Tab Switcher
   ========================================================================== */
@media (max-width: 1023px) {
  .ecom-phone-card {
    display: none !important;
  }
  .ecom-phone-card.is-active-mobile {
    display: flex !important;
    animation: waPhoneFade 0.25s ease-out;
  }
}
@media (min-width: 1024px) {
  .ecom-phone-card {
    display: flex !important;
  }
}
@keyframes waPhoneFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Responsive Hero Placement: Top-anchored on short mobile, centered on tablets and tall viewports */
#hero-content {
  justify-content: flex-start;
  padding-top: 4.5rem;
}
@media (min-height: 700px) {
  #hero-content {
    justify-content: center !important;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}
@media (min-width: 1024px) {
  #hero-content {
    justify-content: center !important;
    padding-top: 4rem !important;
    padding-bottom: 0 !important;
  }
}