/* =========================================================
   SpreadBooks — Premium Static SaaS/ERP Site Styles
   ========================================================= */

:root{
  --navy:#12184B;
  --sky:#3E7DC4;
}

html{ scroll-behavior:auto; position: relative; overflow-x: hidden; }
body{ overflow-x:hidden; }

h1,h2,h3,h4,.font-heading{ font-family:'Outfit', sans-serif; }
body,p,span,a,li,input,textarea,select,button{ font-family:'Manrope', sans-serif; }

.text-navy{ color:var(--navy); }
.text-sky{ color:var(--sky); }
.bg-navy{ background:var(--navy); }
.bg-navy-50{ background:#eef0fb; }

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:9999; background:var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.loaded{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-logo img{ animation:pulseFade 1.4s ease-in-out infinite; filter:brightness(0) invert(1); }
@keyframes pulseFade{ 0%,100%{opacity:.4;transform:scale(.96);} 50%{opacity:1;transform:scale(1);} }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,0.7);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(226,232,240,0);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,0.92);
  border-bottom-color:#E2E8F0;
  box-shadow:0 4px 24px rgba(18,24,75,.06);
}
.nav-link{ position:relative; padding:6px 0; transition:color .25s ease; white-space:nowrap; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--sky); transition:width .3s ease;
}
.nav-link:hover{ color:var(--sky); }
.nav-link:hover::after{ width:100%; }

.cta-icon-btn{
  display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600;
  color:var(--navy); padding:10px 16px; border-radius:999px; border:1.5px solid #E2E8F0;
  transition:all .3s ease;
}
.cta-icon-btn:hover{ border-color:var(--sky); color:var(--sky); transform:translateY(-2px); }
.cta-icon-btn.whatsapp{ border-color:#25D36633; color:#128C4B; }
.cta-icon-btn.whatsapp:hover{ background:#25D366; color:#fff; border-color:#25D366; }

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; font-weight:600; font-size:14px;
  padding:14px 28px; border-radius:999px; transition:all .35s ease;
  box-shadow:0 8px 24px rgba(18,24,75,.18);
}
.btn-primary:hover{ background:var(--sky); transform:translateY(-3px); box-shadow:0 14px 32px rgba(62,125,196,.3); }
.btn-primary.lg{ padding:17px 34px; font-size:15px; }

.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:2px solid var(--navy); color:var(--navy);
  font-weight:600; font-size:14px; padding:12px 28px; border-radius:999px;
  transition:all .35s ease;
}
.btn-secondary:hover{ background:var(--navy); color:#fff; transform:translateY(-3px); }

.btn-whatsapp{
  display:inline-flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; font-weight:600; font-size:14px;
  padding:14px 28px; border-radius:999px; transition:all .35s ease;
  box-shadow:0 8px 24px rgba(37,211,102,.25);
}
.btn-whatsapp:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(37,211,102,.35); filter:brightness(1.05); }

/* ---------- Mobile Nav ---------- */
.mobile-nav{
  position:fixed; top:0; right:-100%; width:82%; max-width:340px; height:100vh; z-index:101;
  background:#fff; box-shadow:-20px 0 60px rgba(18,24,75,.15);
  transition:right .45s cubic-bezier(.16,1,.3,1);
  overflow-y:auto;
}
.mobile-nav.open{ right:0; }
.mobile-nav-link{ padding:12px 8px; border-bottom:1px solid #F1F5F9; }
#mobile-menu-toggle{ display:none; }
@media (max-width: 1023px){ #mobile-menu-toggle{ display:flex; } }

/* ---------- Badges / Labels ---------- */
.badge-label{
  display:inline-flex; align-items:center; font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--navy); background:#fff; border:1px solid rgba(62,125,196,.25);
  padding:8px 16px; border-radius:999px; box-shadow:0 4px 16px rgba(18,24,75,.06);
}
.badge-label-dark{
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--sky);
}
.badge-label-light{
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#8EB6E0;
}
.h2{ font-size:clamp(2rem,4vw,2.75rem); font-weight:700; letter-spacing:-.02em; color:var(--navy); line-height:1.15; }
.body-text{ font-size:1.05rem; color:#475569; line-height:1.75; }
.section-heading{ max-width:640px; }
.section-py{ padding:96px 0; }
.section-py-dark{ padding:96px 0; background:var(--navy); position:relative; overflow:hidden; }
@media (max-width:768px){ .section-py, .section-py-dark{ padding:64px 0; } }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,#fff 0%, #F5F8FD 100%); }
.hero-bg-grid{
  position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(18,24,75,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(18,24,75,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 20%, black 40%, transparent 100%);
}
.hero-orb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; }
.hero-orb-1{ width:420px; height:420px; background:var(--sky); top:-120px; right:-100px; }
.hero-orb-2{ width:320px; height:320px; background:var(--navy); bottom:-100px; left:-80px; opacity:.15; }

.hero-title{ font-size:clamp(2.6rem,5.6vw,4.4rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; color:var(--navy); }
.hero-line{ display:block; overflow:hidden; }
.hero-line > span{ display:inline-block; transform:translateY(115%); will-change:transform; }
.hero-sub{ font-size:1.15rem; color:#475569; line-height:1.7; }

.hero-trust{ display:flex; flex-wrap:wrap; gap:22px; }
.trust-item{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--navy); }
.trust-item i{ color:var(--sky); font-size:16px; }

.hero-visual{ position:relative; height:460px; display:flex; align-items:center; justify-content:center; }
.hero-laptop{ width:100%; max-width:520px; filter:drop-shadow(0 30px 60px rgba(18,24,75,.25)); }
.hero-phone{ position:absolute; width:150px; bottom:-10px; right:0; filter:drop-shadow(0 20px 40px rgba(18,24,75,.3)); }
.hero-float-card{
  position:absolute; display:flex; align-items:center; gap:10px; background:#fff; padding:12px 18px;
  border-radius:16px; box-shadow:0 12px 32px rgba(18,24,75,.14); font-size:13px; font-weight:700; color:var(--navy);
}
.hero-float-card i{ color:var(--sky); font-size:16px; }
.hero-float-card.card-1{ top:6%; left:-4%; }
.hero-float-card.card-2{ bottom:14%; left:2%; }
@media (max-width:1023px){
  .hero-visual{ height:340px; }
  .hero-phone{ width:100px; }
  .hero-float-card{ display:none; }
}

/* ---------- Value chips (about) ---------- */
.value-chip{
  display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:14px;
  background:#fff; border:1px solid #E2E8F0; font-weight:600; font-size:14px; color:var(--navy);
  transition:all .3s ease;
}
.value-chip:hover{ border-color:var(--sky); transform:translateY(-3px); box-shadow:0 8px 20px rgba(18,24,75,.08); }
.value-chip i{ color:var(--sky); }

/* ---------- Solution Cards ---------- */
.solution-card{
  background:#fff; border:1px solid #E2E8F0; border-radius:20px; padding:32px 26px;
  transition:all .35s ease; box-shadow:0 4px 24px rgba(18,24,75,.05);
}
.solution-card:hover{ transform:translateY(-6px); box-shadow:0 16px 40px rgba(18,24,75,.12); border-color:rgba(62,125,196,.4); }
.solution-icon{
  width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#12184B,#3E7DC4); color:#fff; font-size:22px;
  transition:transform .35s ease;
}
.solution-card:hover .solution-icon{ transform:scale(1.1) rotate(-4deg); }

/* ---------- Bento Features ---------- */
.bento-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.bento-lg{ grid-column:span 2; }
@media (max-width:1023px){ .bento-grid{ grid-template-columns:repeat(2,1fr); } .bento-lg{ grid-column:span 2; } }
@media (max-width:640px){ .bento-grid{ grid-template-columns:1fr; } .bento-lg{ grid-column:span 1; } }

.feature-card{
  background:#F8FAFC; border:1px solid #E2E8F0; border-radius:20px; padding:28px;
  transition:all .35s ease;
}
.feature-card:hover{ background:#fff; border-color:rgba(62,125,196,.4); box-shadow:0 16px 40px rgba(18,24,75,.1); transform:translateY(-5px); }
.feature-card i{ font-size:26px; color:var(--sky); transition:transform .3s ease; }
.feature-card:hover i{ transform:scale(1.15); }
.feature-card h3{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.1rem; color:var(--navy); margin-top:16px; margin-bottom:6px; }
.feature-card p{ font-size:.9rem; color:#64748B; line-height:1.6; }

/* ---------- Marquee ---------- */
.marquee-wrap{
  background:var(--navy); overflow:hidden; padding:22px 0; white-space:nowrap;
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
}
.marquee-track{
  display:inline-flex; align-items:center; gap:22px;
  animation:marqueeScroll 34s linear infinite;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:15px; letter-spacing:.15em;
  color:#fff; text-transform:uppercase;
}
.marquee-track .dot{ color:var(--sky); font-size:13px; }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Industries Showcase (tabs + visual) ---------- */
.industries-showcase{ display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:stretch; }
.industries-tabs{ display:flex; flex-direction:column; }
.industry-tab{
  display:flex; align-items:center; gap:20px; text-align:left; padding:22px 12px;
  border-bottom:1px solid #E2E8F0; transition:all .3s ease; cursor:pointer;
}
.industry-tab .tab-num{ font-family:'Outfit',sans-serif; font-size:1.3rem; font-weight:300; color:#94A3B8; min-width:38px; transition:color .3s ease; }
.industry-tab .tab-body{ display:flex; flex-direction:column; gap:4px; flex:1; }
.industry-tab .tab-title{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.08rem; color:var(--navy); transition:color .3s ease; }
.industry-tab .tab-desc{ font-size:.85rem; color:#94A3B8; max-height:0; opacity:0; overflow:hidden; transition:all .35s ease; }
.industry-tab i{ color:#CBD5E1; font-size:14px; opacity:0; transform:translateX(-6px); transition:all .3s ease; }
.industry-tab:hover .tab-title, .industry-tab.active .tab-title{ color:var(--sky); }
.industry-tab:hover .tab-num, .industry-tab.active .tab-num{ color:var(--sky); }
.industry-tab.active{ background:#fff; border-radius:16px; box-shadow:0 8px 28px rgba(18,24,75,.08); border-bottom-color:transparent; }
.industry-tab.active .tab-desc{ max-height:60px; opacity:1; margin-top:2px; }
.industry-tab.active i{ opacity:1; transform:translateX(0); color:var(--sky); }

.industries-visual{
  position:relative; border-radius:24px; overflow:hidden; display:block; min-height:420px;
  box-shadow:0 20px 50px rgba(18,24,75,.14);
}
.industry-visual-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .6s ease, transform 8s ease; transform:scale(1.05);
}
.industry-visual-img.active{ opacity:1; transform:scale(1); }
.industry-visual-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(18,24,75,.75), transparent 60%); }
.industry-visual-badge{
  position:absolute; bottom:24px; left:24px; z-index:2; display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.95); color:var(--navy); font-weight:700; font-size:13px; padding:12px 20px;
  border-radius:999px; transition:transform .3s ease;
}
.industries-visual:hover .industry-visual-badge{ transform:translateY(-3px); }
@media (max-width:1023px){
  .industries-showcase{ grid-template-columns:1fr; }
  .industries-visual{ min-height:280px; order:-1; }
  .industry-tab .tab-desc{ display:none; }
}

/* ---------- Why Choose Us (Manifesto) ---------- */
.section-py-dark::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 10%, rgba(62,125,196,.18), transparent 55%);
}
.manifesto-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid rgba(255,255,255,.1); position:relative; z-index:1; }
.manifesto-item{
  display:flex; gap:22px; padding:32px 22px; border-bottom:1px solid rgba(255,255,255,.1);
  border-right:1px solid rgba(255,255,255,.1); transition:background .3s ease;
}
.manifesto-item:nth-child(even){ border-right:none; }
.manifesto-item:hover{ background:rgba(255,255,255,.04); }
.manifesto-item .num{ font-family:'Outfit',sans-serif; font-size:2.2rem; font-weight:300; color:var(--sky); min-width:56px; }
.manifesto-item h3{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.15rem; color:#fff; margin-bottom:6px; }
.manifesto-item p{ font-size:.92rem; color:#A9B4D6; line-height:1.6; }
@media (max-width:768px){ .manifesto-list{ grid-template-columns:1fr; } .manifesto-item{ border-right:none !important; } }

/* ---------- Process Timeline ---------- */
.process-timeline{ position:relative; padding-left:20px; border-left:2px dashed #CBD5E1; }
.process-step{ position:relative; padding:0 0 44px 34px; }
.process-step:last-child{ padding-bottom:0; }
.process-step .step-num{
  position:absolute; left:-52px; top:0; width:40px; height:40px; border-radius:50%;
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:14px; box-shadow:0 6px 16px rgba(18,24,75,.25);
}
.process-step h3{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.2rem; color:var(--navy); margin-bottom:6px; }
.process-step p{ color:#64748B; font-size:.95rem; line-height:1.6; }
@media (max-width:640px){ .process-step .step-num{ left:-44px; width:32px; height:32px; font-size:12px; } }

/* ---------- CTA Strips ---------- */
.cta-strip{ background:linear-gradient(120deg,var(--navy),var(--sky)); padding:36px 0; }
.cta-strip-lg{ background:linear-gradient(135deg,var(--navy) 30%, var(--sky) 130%); padding:90px 0; }

/* ---------- Demo Form / Contact Form ---------- */
.demo-form{ background:#fff; border:1px solid #E2E8F0; border-radius:24px; padding:34px; box-shadow:0 8px 32px rgba(18,24,75,.06); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:13px; font-weight:600; color:var(--navy); }
.field input, .field select, .field textarea{
  border:1.5px solid #E2E8F0; border-radius:12px; padding:12px 14px; font-size:14px; color:#0F172A;
  transition:border-color .25s ease, box-shadow .25s ease; background:#F8FAFC;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(62,125,196,.18); background:#fff;
}
.form-note{ font-size:12px; color:#94A3B8; margin-top:14px; }

.benefits-list{ display:flex; flex-direction:column; gap:14px; }
.benefits-list li{ display:flex; align-items:center; gap:12px; font-weight:600; color:var(--navy); font-size:.95rem; }
.benefits-list i{ width:38px; height:38px; border-radius:12px; background:#EEF5FC; color:var(--sky); display:flex; align-items:center; justify-content:center; font-size:15px; }

/* ---------- Accordion ---------- */
.accordion-item{ border-bottom:1px solid #E2E8F0; }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:22px 4px; font-family:'Outfit',sans-serif; font-weight:600; font-size:1.02rem; color:var(--navy);
  text-align:left; transition:color .25s ease;
}
.accordion-trigger:hover{ color:var(--sky); }
.accordion-trigger i{ transition:transform .35s ease; color:var(--sky); font-size:14px; }
.accordion-item.active .accordion-trigger i{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.accordion-panel p{ padding:0 4px 22px; color:#64748B; font-size:.95rem; line-height:1.65; }

/* ---------- Contact Info Cards ---------- */
.contact-info-card{ display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid #E2E8F0; border-radius:16px; padding:18px; }
.contact-info-card i{ width:42px; height:42px; border-radius:12px; background:#EEF5FC; color:var(--sky); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.contact-info-card h4{ font-family:'Outfit',sans-serif; font-weight:600; font-size:.92rem; color:var(--navy); margin-bottom:2px; }
.contact-info-card p, .contact-info-card a{ font-size:.88rem; color:#64748B; }
.contact-info-card a:hover{ color:var(--sky); }

/* ---------- Footer ---------- */
.footer{ background:var(--navy); color:#fff; position:relative; }
.footer-heading{ font-family:'Outfit',sans-serif; font-weight:600; font-size:1.05rem; margin-bottom:18px; }
.footer-links{ display:flex; flex-direction:column; gap:11px; font-size:.9rem; color:#A9B4D6; }
.footer-links a{ transition:color .25s ease; }
.footer-links a:hover{ color:var(--sky); }
.social-icon{
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center;
  color:#fff; transition:all .3s ease;
}
.social-icon:hover{ background:var(--sky); transform:translateY(-3px); }

/* ---------- Floating Buttons ---------- */
.floating-btn{
  position:fixed; z-index:90; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; box-shadow:0 10px 28px rgba(18,24,75,.25); transition:all .3s ease;
}
.floating-whatsapp{ bottom:96px; right:24px; background:#25D366; animation:pulseRing 2.2s infinite; }
.floating-call{ bottom:24px; right:24px; background:var(--navy); }
.floating-scrolltop{ bottom:24px; left:24px; background:var(--sky); opacity:0; pointer-events:none; transform:translateY(10px); }
.floating-scrolltop.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.floating-btn:hover{ transform:translateY(-4px) scale(1.05); }
@keyframes pulseRing{
  0%{ box-shadow:0 10px 28px rgba(18,24,75,.25), 0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 10px 28px rgba(18,24,75,.25), 0 0 0 14px rgba(37,211,102,0); }
  100%{ box-shadow:0 10px 28px rgba(18,24,75,.25), 0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:640px){
  .floating-btn{ width:42px; height:42px; font-size:17px; box-shadow:0 6px 16px rgba(18,24,75,.2); }
  .floating-whatsapp{ bottom:172px; right:14px; }
  .floating-call{ bottom:172px; right:64px; }
  .floating-scrolltop{ bottom:172px; left:14px; }
}

/* ---------- Sticky Mobile Demo Bar ---------- */
.mobile-demo-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:95;
  background:#fff; border-top:1px solid #E2E8F0; box-shadow:0 -8px 24px rgba(18,24,75,.1);
  padding:10px 14px; align-items:center; justify-content:space-between; gap:8px;
}
.mobile-demo-bar a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; font-weight:600; color:var(--navy); padding:6px 0; }
.mobile-demo-bar a i{ font-size:17px; }
.mobile-demo-bar .mobile-bar-demo{ background:var(--navy); color:#fff; border-radius:14px; padding:8px 0; }
@media (max-width:1023px){ .mobile-demo-bar{ display:flex; } }

/* ---------- Scroll Reveal base ---------- */
.reveal-up{ opacity:0; transform:translateY(36px); }
.reveal-up.is-visible{ opacity:1; transform:translateY(0); transition:opacity .8s ease, transform .8s ease; }

/* ---------- Focus states (a11y) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--sky); outline-offset:2px;
}