/* ===================== Animations & home page extras ===================== */

html { scroll-behavior: smooth; }

/* Scroll reveal (only hidden while JS is running, so content never disappears) */
html.js .reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
html.js .reveal.from-left { transform: translateX(-40px); }
html.js .reveal.from-right { transform: translateX(40px); }
html.js .reveal.zoom { transform: scale(.92); }
html.js .reveal.in { opacity: 1; transform: none; }
@media (max-width: 991.98px) {
  html.js .reveal.from-left:not(.in), html.js .reveal.from-right:not(.in) { transform: translateY(32px); }
}
/* Safety net: never let off-screen animation offsets create sideways scrolling (clip keeps the sticky navbar working) */
html, body { overflow-x: clip; }

/* Scroll progress + navbar shrink + back to top */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: linear-gradient(90deg, var(--sd-accent), var(--sd-primary)); }
.navbar-sd { transition: padding .3s, box-shadow .3s; }
.navbar-sd.scrolled { padding-top: .5rem !important; padding-bottom: .5rem !important; box-shadow: 0 6px 20px rgba(11,61,145,.08); }
.to-top { position: fixed; right: 26px; bottom: 90px; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--sd-primary); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.2); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s; z-index: 1000; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }

/* Hero blobs, floating phone, chips */
.hero, .page-hero { position: relative; overflow: hidden; }
.hero .container, .page-hero .container { position: relative; z-index: 1; }
.page-hero .blob.b1 { width: 260px; height: 260px; top: -140px; right: -60px; }
.page-hero .blob.b2 { width: 220px; height: 220px; bottom: -160px; left: 20%; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; animation: blob 14s ease-in-out infinite; pointer-events: none; }
.blob.b1 { width: 380px; height: 380px; background: #00b386; top: -120px; right: -80px; }
.blob.b2 { width: 300px; height: 300px; background: #3d7bff; bottom: -140px; left: -100px; animation-delay: -5s; }
.blob.b3 { width: 200px; height: 200px; background: #00d4a6; top: 40%; left: 45%; animation-delay: -9s; opacity: .25; }
@keyframes blob { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-40px) scale(1.1); } 66% { transform: translate(-25px,25px) scale(.95); } }

.phone-wrap { position: relative; max-width: 340px; margin: 0 auto; }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.chip-float { position: absolute; background: #fff; color: var(--sd-ink); border-radius: 12px; padding: 8px 12px; font-size: .78rem; font-weight: 600; box-shadow: 0 10px 25px rgba(0,0,0,.18); display: flex; align-items: center; gap: 8px; white-space: nowrap; z-index: 2; }
.chip-float i { font-size: 1.1rem; }
.chip-float.c1 { top: 20%; left: -34px; animation: float 5s ease-in-out infinite; }
.chip-float.c2 { bottom: 16%; right: -28px; animation: float 5.5s ease-in-out -2s infinite; }
@media (max-width: 575.98px) { .chip-float.c1 { left: 0; } .chip-float.c2 { right: 0; } }

.word-rotate { display: inline-block; color: #6ff0cc; }
.word-rotate .w { display: inline-block; animation: wordIn .5s ease both; }
@keyframes wordIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #00b386; display: inline-block; margin-right: 6px; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,179,134,.6); } 70% { box-shadow: 0 0 0 10px rgba(0,179,134,0); } 100% { box-shadow: 0 0 0 0 rgba(0,179,134,0); } }

.scroll-hint { display: block; width: max-content; margin: 36px auto 0; color: rgba(255,255,255,.7); font-size: 1.4rem; animation: bounce 2s infinite; text-decoration: none; }
.scroll-hint:hover { color: #fff; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* Trust strip */
.trust-strip { background: #fff; border-radius: 16px; box-shadow: 0 18px 40px rgba(11,61,145,.12); margin-top: -44px; position: relative; z-index: 2; padding: 18px 8px; }
.trust-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.trust-item i { font-size: 1.6rem; color: var(--sd-accent); }
.trust-item strong { display: block; font-size: .95rem; }
.trust-item small { color: var(--sd-muted); }

/* Counters */
.counter-box { text-align: center; padding: 20px 8px; }
.counter-box .num { font-size: 2.6rem; font-weight: 700; line-height: 1.1; background: linear-gradient(135deg, var(--sd-primary), var(--sd-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.counter-box .lbl { color: var(--sd-muted); font-size: .9rem; }

/* Card icon hover */
.card-sd .icon-bubble { transition: transform .35s, background .35s, color .35s; }
.card-sd:hover .icon-bubble { transform: rotate(-8deg) scale(1.1); background: var(--sd-accent); color: #fff; }

/* Feature tabs with phone */
.feature-tab { display: flex; gap: 14px; text-align: left; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 14px; padding: 16px; margin-bottom: 8px; transition: background .3s, border-color .3s, box-shadow .3s; color: inherit; }
.feature-tab:hover { background: #fff; }
.feature-tab.active { background: #fff; border-color: var(--sd-border); box-shadow: 0 10px 25px rgba(11,61,145,.08); }
.feature-tab .icon-bubble { margin: 0; flex-shrink: 0; }
.feature-tab h6 { margin-bottom: 4px; }
.feature-tab p { margin: 0; font-size: .88rem; color: var(--sd-muted); }
.feature-tab .bar { height: 3px; background: var(--sd-border); border-radius: 2px; margin-top: 10px; overflow: hidden; visibility: hidden; }
.feature-tab.active .bar { visibility: visible; }
.feature-tab.active .bar span { display: block; height: 100%; width: 0; background: var(--sd-accent); animation: tabProgress 6s linear forwards; }
.feature-tabs.paused .feature-tab.active .bar span { animation-play-state: paused; }
@keyframes tabProgress { to { width: 100%; } }
.phone .screen { display: none; min-height: 330px; }
.phone .screen.active { display: block; animation: screenIn .5s ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.phone .row-item { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; padding: 9px 0; border-bottom: 1px solid var(--sd-border); }
.phone .tag { font-size: .65rem; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.tag.ok { background: #e6f8f3; color: #00875f; }
.tag.wait { background: #fff4e0; color: #a86b00; }
.tag.info { background: #eaf0ff; color: var(--sd-primary); }
.tree-mini { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0; }
.tree-mini .lvl { display: flex; gap: 6px; }
.tree-mini .n { width: 20px; height: 20px; border-radius: 50%; background: var(--sd-accent-soft); border: 2px solid var(--sd-accent); }
.tree-mini .n.me { width: 30px; height: 30px; background: var(--sd-primary); border-color: var(--sd-primary); }

/* Slab bars */
.slab-row { margin-bottom: 18px; }
.slab-row .track { height: 14px; background: var(--sd-bg-alt); border-radius: 8px; overflow: hidden; }
.slab-row .fill { height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--sd-primary), var(--sd-accent)); transition: width 1.4s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.slabs.in .fill, html:not(.js) .slab-row .fill { width: var(--w); }

/* Plans: level bars fill when the table scrolls into view */
.levels .level-bar { width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.levels.in .level-bar, html:not(.js) .levels .level-bar { width: var(--w); }
.slab-card { transition: border-color .3s, box-shadow .3s, transform .3s; }
.slab-card:hover { transform: translateY(-4px); }
.contact-item i { transition: transform .3s; }
.contact-item:hover i { transform: scale(1.2) rotate(-8deg); }

/* Timeline */
.timeline { position: relative; }
.timeline > .line { position: absolute; top: calc(var(--bs-gutter-y) + 19px); left: 12.5%; right: 12.5%; width: auto; height: 3px; padding: 0; margin: 0; background: var(--sd-border); }
.timeline .line span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sd-primary), var(--sd-accent)); transition: width 2s ease .3s; }
.timeline.in .line span, html:not(.js) .timeline .line span { width: 100%; }
.timeline .step-num { position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--sd-bg-alt); }
@media (max-width: 991.98px) { .timeline .line { display: none; } }

/* Referral SVG tree */
.ref-tree { width: 100%; max-width: 460px; display: block; margin: 0 auto; }
.ref-tree line { stroke: var(--sd-accent); stroke-width: 2; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1.2s ease; transition-delay: var(--d, 0s); }
.ref-tree circle { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1); transition-delay: var(--d, 0s); }
.ref-tree text { font-size: 12px; font-weight: 600; fill: var(--sd-muted); font-family: inherit; }
.ref-tree.in line { stroke-dashoffset: 0; }
.ref-tree.in circle { transform: scale(1); }
html:not(.js) .ref-tree line { stroke-dashoffset: 0; }
html:not(.js) .ref-tree circle { transform: none; }

/* Dark security section */
.section-dark { background: linear-gradient(135deg, #0a1630, var(--sd-primary-dark)); color: #fff; }
.section-dark .section-sub { color: rgba(255,255,255,.7); }
.sec-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 24px; height: 100%; transition: background .3s, transform .3s; }
.sec-card:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }
.sec-card i { font-size: 1.8rem; color: #6ff0cc; }
.sec-card p { color: rgba(255,255,255,.7); margin: 0; font-size: .92rem; }

/* Presence */
.city-pin { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--sd-border); margin-bottom: 12px; transition: transform .3s, box-shadow .3s; }
.city-pin:hover { transform: translateX(6px); box-shadow: 0 8px 20px rgba(11,61,145,.08); }
.city-pin .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sd-accent); animation: pulse 2.4s infinite; flex-shrink: 0; }
.city-pin .dot.soon { background: var(--sd-warn); animation: none; }
.city-pin small { color: var(--sd-muted); display: block; }

/* Ecosystem */
.eco-card { text-align: center; }
.eco-card .icon-bubble { width: 64px; height: 64px; font-size: 1.8rem; }

/* Shine on buttons */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: shine 3.5s ease-in-out infinite; }
@keyframes shine { 0% { left: -75%; } 40%,100% { left: 130%; } }

/* App download band */
.app-band { background: var(--sd-accent-soft); border-radius: 20px; padding: 40px; }
.store-btn { display: inline-flex; align-items: center; gap: 10px; background: #10182a; color: #fff; border-radius: 12px; padding: 10px 18px; text-decoration: none; transition: transform .25s; }
.store-btn:hover { color: #fff; transform: translateY(-3px); }
.store-btn i { font-size: 1.6rem; }
.store-btn small { display: block; font-size: .65rem; opacity: .75; line-height: 1; }
.store-btn strong { line-height: 1.1; }
@media (max-width: 575.98px) { .app-band { padding: 24px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .slab-row .fill, .levels .level-bar { width: var(--w); }
  .timeline .line span { width: 100%; }
  .ref-tree line { stroke-dashoffset: 0; }
  .ref-tree circle { transform: none; }
}