/* ============================================================
   PROSPER ECOMMERCE — style.css
   Navy: #1B3A52  |  Orange: #F5A623
============================================================ */

/* ---- VARIABLES ---- */
:root {
  --navy:      #1B3A52;
  --navy-dk:   #0f2336;
  --navy-lt:   #234d6b;
  --orange:    #F5A623;
  --orange-dk: #d4891a;
  --white:     #ffffff;
  --light:     #f4f7fa;
  --muted:     #6c7a89;
  --text:      #1e2d3d;
  --border:    #dce4ed;
  --radius:    14px;
  --shadow:    0 8px 40px rgba(27,58,82,.12);
  --shadow-lg: 0 20px 60px rgba(27,58,82,.18);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: 'Nunito', sans-serif; color: var(--text); background: #fff; overflow-x: hidden; }
h1,h2,h3,h4,h5,h6 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ---- UTILITY ---- */
.text-orange   { color: var(--orange); }
.sec-pad       { padding: 90px 0; }
.bg-light      { background: var(--light); }
.bg-navy       { background: var(--navy-dk); }

.sec-label {
  display: inline-block;
  background: rgba(245,166,35,.12); color: var(--orange);
  border: 1px solid rgba(245,166,35,.28); border-radius: 100px;
  padding: .25rem 1rem; font-size: .68rem; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: .8rem;
}
.sec-title {
  font-size: clamp(1.85rem, 3.8vw, 2.75rem);
  line-height: 1.1; letter-spacing: -.5px; margin-bottom: 1rem; color: var(--navy-dk);
}
.sec-desc { color: var(--muted); font-size: .96rem; line-height: 1.8; max-width: 580px; }

/* ---- KEYFRAMES ---- */
@keyframes fadeInUp    { from { opacity:0; transform:translateY(36px); }  to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft  { from { opacity:0; transform:translateX(-44px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeInRight { from { opacity:0; transform:translateX(44px); }  to { opacity:1; transform:translateX(0); } }
@keyframes fadeDown    { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
@keyframes floatShape  { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-26px); } }
@keyframes orbGlow     { 0%,100%{ opacity:.16; transform:translate(-50%,-50%) scale(1); }   50%{ opacity:.3; transform:translate(-50%,-50%) scale(1.1); } }
@keyframes cardFloat   { 0%,100%{ transform:translateY(0); }  50%{ transform:translateY(-9px); } }
@keyframes marqueeRun  { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes waPulse     { 0%,100%{ box-shadow:0 6px 24px rgba(37,211,102,.4); } 50%{ box-shadow:0 6px 30px rgba(37,211,102,.65),0 0 0 10px rgba(37,211,102,.07); } }
@keyframes scrollBnc   { 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(6px); } }

/* ---- HERO LOAD ANIMATIONS ---- */
.anim-fade-up   { animation: fadeInUp  .85s ease both; }
.anim-fade-down { animation: fadeDown  .8s  ease both; }
.anim-fade-left { animation: fadeInLeft .9s ease both; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .4s; }
.delay-4 { animation-delay: .6s; }

/* ---- SCROLL REVEAL ---- */
.scroll-reveal, .scroll-reveal-left, .scroll-reveal-right {
  opacity: 0; transition: opacity .7s ease, transform .7s ease;
}
.scroll-reveal       { transform: translateY(38px); }
.scroll-reveal-left  { transform: translateX(-46px); }
.scroll-reveal-right { transform: translateX(46px); }
.scroll-reveal.on, .scroll-reveal-left.on, .scroll-reveal-right.on { opacity: 1; transform: none; }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }
.delay-5 { transition-delay: .5s; }

/* Image scroll reveal */
.scroll-img { opacity: 0; transform: scale(1.07) translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.scroll-img.on { opacity: 1; transform: scale(1) translateY(0); }

/* ---- BUTTONS ---- */
.btn-primary {
  background: var(--orange); color: #fff !important; border: none;
  padding: .75rem 1.9rem; border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .4px;
  display: inline-block; cursor: pointer; transition: background .25s, transform .25s, box-shadow .25s;
}
.btn-primary:hover { background: var(--orange-dk); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(245,166,35,.35); }

.btn-ghost {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.36);
  padding: .75rem 1.9rem; border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .4px;
  display: inline-block; transition: all .25s;
}
.btn-ghost:hover { border-color: var(--orange); background: rgba(245,166,35,.1); color: var(--orange); transform: translateY(-3px); }

/* ============================================================
   NAVBAR
============================================================ */
#mainNav { background: transparent; padding: 16px 0; transition: all .4s; z-index: 1050; }
#mainNav.scrolled { background: #fff; padding: 10px 0; box-shadow: 0 4px 28px rgba(27,58,82,.1); }

#mainNav .nav-link { color: #fff; font-weight: 600; font-size: .9rem; padding: .45rem .8rem !important; transition: color .2s; }
#mainNav.scrolled .nav-link { color: var(--navy); }
#mainNav .nav-link:hover, #mainNav.scrolled .nav-link:hover { color: var(--orange) !important; }

.btn-nav-cta {
  background: var(--orange); color: #fff !important; padding: .48rem 1.4rem !important;
  border-radius: 7px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: .95rem;
  transition: background .2s, transform .2s;
}
.btn-nav-cta:hover { background: var(--orange-dk); transform: translateY(-1px); }
.navbar-toggler { border: none; box-shadow: none !important; background: transparent !important; }
.toggler-icon { color: #fff; font-size: 1.4rem; }
#mainNav.scrolled .toggler-icon { color: var(--navy); }
.logo-img { object-fit: contain; border-radius: 4px; padding: 3px 6px; }

/* ============================================================
   HERO
============================================================ */
#hero {
  background: linear-gradient(135deg, var(--navy-dk) 0%, var(--navy) 60%, var(--navy-lt) 100%);
  position: relative; overflow: hidden; padding-top: 70px;
  min-height: 100vh; display: flex; align-items: center;
}
.hero-shapes { position: absolute; inset: 0; pointer-events: none; }
.hs { position: absolute; border-radius: 50%; background: var(--orange); }
.hs-1 { width:520px; height:520px; top:-150px; right:-110px; opacity:.06; animation:floatShape 8s ease-in-out infinite; }
.hs-2 { width:270px; height:270px; bottom:-55px; left:-75px;  opacity:.05; animation:floatShape 8s 3s ease-in-out infinite; }
.hs-3 { width:160px; height:160px; top:42%;    right:30%;    opacity:.04; animation:floatShape 8s 5s ease-in-out infinite; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(245,166,35,.14); border: 1px solid rgba(245,166,35,.32);
  border-radius: 100px; color: var(--orange);
  font-size: .7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  padding: .3rem .95rem; margin-bottom: 1.4rem;
}
.hero-title { font-size: clamp(2.3rem, 5vw, 3.75rem); color: #fff; letter-spacing: -1px; line-height: 1.06; margin-bottom: 1.3rem; }
.hero-desc  { color: rgba(255,255,255,.7); font-size: 1rem; max-width: 500px; margin-bottom: 2rem; line-height: 1.8; }

.hero-stats {
  display: flex; align-items: center; gap: 2rem;
  margin-top: 2.8rem; padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap;
}
.stat-item { display: flex; flex-direction: column; }
.stat-num  { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 800; color: var(--orange); line-height: 1; }
.stat-lbl  { font-size: .73rem; color: rgba(255,255,255,.48); margin-top: .15rem; }
.stat-sep  { width: 1px; height: 44px; background: rgba(255,255,255,.14); }

/* hero image */
.hero-img-box { position: relative; width: 440px; }
.hero-glow {
  position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: conic-gradient(var(--orange), var(--navy-lt), var(--orange));
  filter: blur(60px); opacity: .18;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: orbGlow 5s ease-in-out infinite; pointer-events: none;
}
.hero-photo { width: 100%; height: 400px; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }

.float-card {
  position: absolute;
  background: rgba(255,255,255,.1); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  padding: .75rem 1.1rem; display: flex; align-items: center; gap: .6rem;
  color: #fff; font-weight: 600; font-size: .82rem; white-space: nowrap;
}
.float-card i { color: var(--orange); font-size: 1.1rem; }
.fc-1 { top:24px;    left:-14px;  animation: cardFloat 4s ease-in-out infinite, fadeInLeft  .8s .7s both; }
.fc-2 { top:50%;     right:-14px; animation: cardFloat 4s 1.5s ease-in-out infinite, fadeInRight .8s .9s both; margin-top:-20px; }
.fc-3 { bottom:24px; left:14px;   animation: cardFloat 4s 2.5s ease-in-out infinite, fadeInUp    .8s 1.1s both; }

.scroll-hint {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  color: rgba(255,255,255,.32); font-size: .65rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  animation: scrollBnc 2s infinite;
}
.scroll-line { width: 1px; height: 34px; background: linear-gradient(to bottom, rgba(255,255,255,.45), transparent); }

/* ============================================================
   MARQUEE
============================================================ */
.marquee-bar {
  background: var(--navy-dk); padding: 15px 0; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05);
}
.marquee-inner {
  display: flex; gap: 3rem; white-space: nowrap;
  animation: marqueeRun 22s linear infinite;
}
.marquee-inner span {
  font-family: 'Barlow Condensed', sans-serif; font-size: .98rem; font-weight: 700;
  color: rgba(255,255,255,.3); letter-spacing: 1.5px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .4rem;
}
.marquee-inner span i { color: var(--orange); opacity: .55; }

/* ============================================================
   ABOUT
============================================================ */
.about-img-box { position: relative; }
.about-photo   { width: 100%; height: 420px; object-fit: cover; border-radius: 18px; box-shadow: var(--shadow-lg); }

.about-badge-br {
  position: absolute; bottom: -18px; right: -18px;
  background: var(--navy-dk); border-radius: 12px; padding: 1.1rem 1.4rem;
  border: 1px solid rgba(255,255,255,.07); text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.about-badge-br strong { font-family: 'Barlow Condensed', sans-serif; font-size: 2.1rem; color: var(--orange); display: block; line-height: 1; }
.about-badge-br span   { font-size: .78rem; color: rgba(255,255,255,.48); display: block; margin-top: .18rem; }

.about-badge-tl {
  position: absolute; top: -14px; left: -14px;
  background: var(--orange); color: #fff; border-radius: 10px;
  padding: .6rem .95rem; font-size: .76rem; font-weight: 700;
  box-shadow: 0 6px 20px rgba(245,166,35,.4);
  display: flex; align-items: center; gap: .35rem;
}

.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.check-list li { display: flex; align-items: center; gap: .65rem; font-size: .92rem; color: var(--text); font-weight: 500; }
.check-list li i { color: var(--orange); }

/* ============================================================
   SERVICES
============================================================ */
.svc-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.8rem; height: 100%;
  position: relative; overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.svc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--navy));
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: rgba(245,166,35,.25); }
.svc-card:hover::before { transform: scaleX(1); }

.svc-img-wrap { overflow: hidden; border-radius: 10px; margin-bottom: 1.1rem; }
.svc-img      { width: 100%; height: 155px; object-fit: cover; transition: transform .4s; }
.svc-card:hover .svc-img { transform: scale(1.06); }

.svc-num  { font-family: 'Barlow Condensed', sans-serif; font-size: .67rem; font-weight: 800; letter-spacing: 2px; color: var(--orange); margin-bottom: .45rem; }
.svc-icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: rgba(245,166,35,.1); border: 1px solid rgba(245,166,35,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: var(--orange); margin-bottom: 1rem;
  transition: background .3s, color .3s;
}
.svc-card:hover .svc-icon { background: var(--orange); color: #fff; }
.svc-card h4 { font-size: 1.08rem; margin-bottom: .5rem; color: var(--navy-dk); }
.svc-card p  { font-size: .85rem; color: var(--muted); line-height: 1.7; margin-bottom: 1rem; }
.svc-link    { font-size: .83rem; font-weight: 700; color: var(--orange); display: inline-flex; align-items: center; gap: .38rem; transition: gap .2s; }
.svc-link:hover { gap: .65rem; }

/* ============================================================
   WHY US
============================================================ */
.why-list { display: flex; flex-direction: column; gap: 1.1rem; }
.why-item {
  display: flex; gap: 1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1.2rem;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.why-item:hover { border-color: rgba(245,166,35,.3); box-shadow: var(--shadow); transform: translateX(4px); }
.why-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 9px;
  background: rgba(245,166,35,.1); border: 1px solid rgba(245,166,35,.2);
  display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--orange);
}
.why-item h5 { font-size: .94rem; margin-bottom: .25rem; color: var(--navy-dk); }
.why-item p  { font-size: .83rem; color: var(--muted); margin: 0; }

.why-img-box { position: relative; border-radius: 18px; overflow: hidden; }
.why-photo   { width: 100%; height: 450px; object-fit: cover; display: block; }
.why-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,35,54,.95) 0%, transparent 52%);
  display: flex; align-items: flex-end; padding: 2rem;
}
.why-stats-row { display: flex; gap: 2.5rem; }
.why-stat      { text-align: center; }
.why-stat span { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 800; color: var(--orange); }
.why-stat small { display: block; font-size: .7rem; color: rgba(255,255,255,.52); margin-top: .15rem; }

/* ============================================================
   HOW WE WORK
============================================================ */
.process-line {
  position: absolute; top: 70px; left: 14%; right: 14%;
  height: 2px; background: linear-gradient(90deg, var(--orange), var(--navy-lt)); opacity: .2; z-index: 0;
}
.step-card { text-align: center; position: relative; z-index: 1; transition: transform .3s; }
.step-card:hover { transform: translateY(-6px); }

.step-img-wrap { overflow: hidden; border-radius: 10px; margin-bottom: 1.2rem; }
.step-img      { width: 100%; height: 170px; object-fit: cover; transition: transform .4s; }
.step-card:hover .step-img { transform: scale(1.06); }

.step-num {
  width: 72px; height: 72px; border-radius: 50%;
  background: #fff; border: 3px solid var(--orange);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--navy-dk);
  margin: 0 auto 1.2rem; box-shadow: 0 6px 20px rgba(245,166,35,.2);
  transition: background .3s, color .3s;
}
.step-card:hover .step-num { background: var(--orange); color: #fff; }
.step-card h4 { font-size: 1.1rem; color: var(--navy-dk); margin-bottom: .4rem; }
.step-card p  { font-size: .85rem; color: var(--muted); }

/* ============================================================
   TESTIMONIALS
============================================================ */
.tslider-wrap { overflow: hidden; }
.tslider-track {
  display: flex; gap: 22px;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}
.tcard {
  width: calc(33% - 30px); flex-shrink: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.8rem;
  transition: border-color .3s, box-shadow .3s;
}
.tcard.active { border-color: rgba(245,166,35,.28); box-shadow: 0 14px 42px rgba(27,58,82,.11); }

.t-stars { color: #f5b301; margin-bottom: .85rem; font-size: .88rem; letter-spacing: 2px; }
.tcard p {
  font-size: .88rem; color: var(--muted); font-style: italic; line-height: 1.8;
  margin-bottom: 1.3rem; position: relative; padding-left: 1.1rem;
}
.tcard p::before { content: '"'; position: absolute; left: 0; top: -4px; font-size: 1.8rem; color: var(--orange); opacity: .28; font-style: normal; line-height: 1; }
.t-author { display: flex; align-items: center; gap: .8rem; }
.t-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(245,166,35,.28); }
.t-author strong { font-size: .88rem; display: block; color: var(--navy-dk); }
.t-author span   { font-size: .74rem; color: var(--muted); }

/* Dots */
.t-dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1.8rem; }
.t-dot {
  width: 10px; height: 10px; border-radius: 5px;
  background: var(--border); border: none; cursor: pointer;
  transition: background .3s, width .3s, transform .3s; padding: 0;
}
.t-dot.active { background: var(--orange); width: 26px; transform: scale(1.1); }

/* Arrows */
.t-arrows { display: flex; justify-content: center; gap: .9rem; margin-top: 1.3rem; }
.t-arrow {
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: var(--navy); cursor: pointer; transition: all .25s;
}
.t-arrow:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: scale(1.1); }

/* ============================================================
   CONTACT
============================================================ */
.cinfo { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.cinfo li { display: flex; align-items: flex-start; gap: .8rem; font-size: .9rem; color: rgba(255,255,255,.56); }
.cinfo li i { color: var(--orange); width: 15px; margin-top: .2rem; flex-shrink: 0; }
.cinfo a { color: rgba(255,255,255,.7); transition: color .2s; }
.cinfo a:hover { color: var(--orange); }

.social-row { display: flex; gap: .5rem; }
.s-btn {
  width: 37px; height: 37px; border-radius: 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.56); font-size: .86rem; transition: all .25s;
}
.s-btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-3px); }
.s-btn.sm { width: 31px; height: 31px; font-size: .74rem; }

.office-img { width: 100%; border-radius: 12px; height: 180px; object-fit: cover; opacity: .52; }

.cform-card { background: #fff; border-radius: 18px; padding: 2.3rem; box-shadow: var(--shadow-lg); }
.cform-card h4 { font-size: 1.45rem; color: var(--navy-dk); margin-bottom: 1.6rem; }

.finput {
  width: 100%; background: var(--light); border: 1px solid var(--border);
  border-radius: 9px; padding: .78rem 1.1rem;
  font-family: 'Nunito', sans-serif; font-size: .9rem; color: var(--text);
  outline: none; transition: border-color .25s, box-shadow .25s; resize: vertical;
}
.finput:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,166,35,.11); }
.finput::placeholder { color: var(--muted); }

.fstatus { display: none; padding: .75rem 1.1rem; border-radius: 9px; font-size: .88rem; font-weight: 600; margin-top: .9rem; text-align: center; }
.fstatus.ok  { display: block; background: rgba(34,197,94,.1);  color: #15803d; border: 1px solid rgba(34,197,94,.28); }
.fstatus.err { display: block; background: rgba(239,68,68,.1);  color: #b91c1c; border: 1px solid rgba(239,68,68,.28); }

/* ============================================================
   FOOTER
============================================================ */
.site-footer { background: var(--navy-dk); padding-top: 62px; }
.footer-body { padding-bottom: 42px; }
.site-footer p { color: rgba(255,255,255,.4); font-size: .85rem; line-height: 1.8; }

.f-heading { font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 1rem; }
.f-links   { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .48rem; }
.f-links a { font-size: .85rem; color: rgba(255,255,255,.45); display: flex; align-items: center; gap: .35rem; transition: color .2s, padding-left .2s; }
.f-links a i { font-size: .6rem; color: var(--orange); opacity: .55; }
.f-links a:hover { color: var(--orange); padding-left: 4px; }

.f-contact { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.f-contact li { font-size: .85rem; color: rgba(255,255,255,.45); display: flex; align-items: flex-start; gap: .6rem; }
.f-contact li i { color: var(--orange); margin-top: .14rem; width: 13px; flex-shrink: 0; }
.f-contact a { color: rgba(255,255,255,.45); transition: color .2s; }
.f-contact a:hover { color: var(--orange); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06); padding: 16px 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .4rem;
}
.footer-bottom p { margin: 0; font-size: .77rem; }

/* ============================================================
   WHATSAPP + BACK TO TOP
============================================================ */
.wa-float {
  position: fixed; bottom: 26px; right: 26px;
  width: 56px; height: 56px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: #fff; z-index: 9999;
  box-shadow: 0 6px 22px rgba(37,211,102,.4);
  transition: transform .3s; animation: waPulse 2.5s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.12); color: #fff; }

.wa-tip {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  background: var(--navy-dk); color: #fff; font-size: .74rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.wa-float:hover .wa-tip { opacity: 1; }

.btt {
  position: fixed; bottom: 94px; right: 26px;
  width: 40px; height: 40px; background: var(--navy);
  border: 2px solid rgba(245,166,35,.35); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); font-size: .9rem; cursor: pointer; z-index: 9998;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.btt.show { opacity: 1; pointer-events: all; }
.btt:hover { background: var(--orange); color: #fff; transform: translateY(-3px); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 991px) {
  .hero-photo { height: 310px; }
  .tcard { min-width: calc(50% - 11px); }
  .process-line { display: none !important; }
  .about-badge-br { right: -10px; }
}
@media (max-width: 767px) {
  .sec-pad { padding: 62px 0; }
  .tcard { min-width: 100%; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .scroll-hint { display: none; }
}
@media (max-width: 575px) {
  .hero-stats { gap: .8rem; }
  .stat-sep   { display: none; }
  .wa-float   { bottom: 16px; right: 16px; }
  .btt        { bottom: 82px; right: 16px; }
}