:root{
  --blue:#1f6fff;
  --deep:#0f57d8;
  --bg:#ffffff;
  --card:#ffffff;
  --border:rgba(15,87,216,.10);
  --text:#0b1b2b;
  --muted:#5b779d;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#ffffff;
  color:#0b1b2b;
  overflow-x:hidden;
}

.container{max-width:1150px;margin:0 auto;padding:0 20px}

header{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.98);
  border-bottom:1px solid rgba(15,87,216,.08);
  box-shadow:0 8px 24px rgba(15,87,216,.05);
}

.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:18px}

.logo{display:flex;align-items:center;gap:12px;font-weight:800}

.logo img{width:48px;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}

.logo-text{display:flex;flex-direction:column;line-height:1.05}
.logo-name{font-size:20px;letter-spacing:.2px}
.logo-tag{font-size:12px;color:#54709a;font-weight:600;opacity:.95}

.hero{
  position:relative;
  padding:136px 0 102px;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(7,22,43,.42) 0%, rgba(7,22,43,.18) 34%, rgba(7,22,43,.04) 72%),
    radial-gradient(circle at 14% 18%, rgba(54,129,255,.12) 0, rgba(54,129,255,0) 36%),
    url("hero-bg.png") center center / cover no-repeat;
  border-bottom:1px solid rgba(15,87,216,.06);
}

.hero-content{position:relative;z-index:1;max-width:760px;padding:34px 36px;border-radius:28px;background:linear-gradient(135deg, rgba(8,20,36,.34) 0%, rgba(8,20,36,.16) 100%);backdrop-filter:blur(6px);box-shadow:0 28px 70px rgba(7,22,43,.18);border:1px solid rgba(255,255,255,.16)}
.hero-kicker{margin-top:18px;display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#ffffff;font-size:13px;font-weight:700;letter-spacing:.2px}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.03) 35%, rgba(0,0,0,0) 72%);
  pointer-events:none;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.06);
  pointer-events:none;
}


.hero h1{
  font-size:64px;
  line-height:1.02;
  margin:0;
  color:#ffffff;
  max-width:920px;
  text-shadow:0 8px 28px rgba(0,0,0,.28);
}

.hero p{
  margin-top:20px;
  color:#3f5f82;
  font-size:19px;
  max-width:670px;
  text-shadow:0 2px 10px rgba(255,255,255,.16);
}

.btns{margin-top:30px;display:flex;gap:15px;flex-wrap:wrap}

.btn{
  padding:15px 24px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(17,71,150,.16);
  filter:brightness(1.03);
}
.btn:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(17,71,150,.14);
  filter:brightness(.98);
}

.btn.primary{
  background:linear-gradient(135deg,#39a0ff,#1767ec);
  color:white;
  box-shadow:0 18px 40px rgba(43,124,255,.34);
}
.btn.primary:hover{box-shadow:0 16px 34px rgba(43,124,255,.34)}

.btn.secondary{
  background:rgba(255,255,255,.94);
  border-color:rgba(255,255,255,.28);
  color:#123b73;
  box-shadow:0 14px 30px rgba(7,22,43,.10);
}
.btn.secondary:hover{box-shadow:0 14px 28px rgba(17,71,150,.12)}


.section{padding:60px 0}

.section h2{
  font-size:28px;
  margin-bottom:20px;
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}

.card{
  background:#ffffff;
  padding:28px;
  border-radius:20px;
  border:1px solid rgba(15,87,216,.08);
  box-shadow:0 18px 36px rgba(15,87,216,.07);
  transition:transform .25s ease, box-shadow .25s ease;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgba(17,71,150,.14);
}

.gallery{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:8px 2px 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}

.gallery img{
  flex:0 0 calc((100% - 48px)/4);
  scroll-snap-align:start;
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:18px;
  transition:0.4s;
}

.gallery::-webkit-scrollbar{height:10px}
.gallery::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:999px}
.gallery::-webkit-scrollbar-track{background:transparent}

@media (max-width: 980px){
  .gallery img{flex-basis:calc((100% - 16px)/2)}
}
@media (max-width: 560px){
  .gallery img{flex-basis:85%}
}

.gallery img:hover{
  transform:scale(1.05);
}

footer{
  padding:40px 0;
  border-top:1px solid rgba(17,71,150,.10);
  text-align:center;
  color:#54709a;
  font-size:14px;
}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}


/* --- Business hero additions --- */
.menu{display:flex;gap:18px;align-items:center}
.menu a{color:#123b73;text-decoration:none;font-weight:700;font-size:14px}
.menu a:hover{color:#1f6fd6}

.nav-cta{display:flex;gap:10px;align-items:center}

.btn.ghost{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.20);
  color:#ffffff;
  box-shadow:none;
}
.btn.ghost:hover{box-shadow:0 14px 28px rgba(7,22,43,.12)}

.btn.small{padding:10px 15px;border-radius:12px;font-weight:800}

.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.badges span{
  font-size:13px;color:#ffffff;
  border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;border-radius:999px;
  background:rgba(255,255,255,.12);
  box-shadow:none;
}

.stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:24px;
  max-width:860px;
}
.stat{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:20px 20px;
  box-shadow:0 18px 38px rgba(7,22,43,.12);
  backdrop-filter: blur(8px);
}
.stat-num{font-size:36px;font-weight:900;line-height:1.05;color:#ffffff}
.stat-label{margin-top:6px;color:rgba(255,255,255,.88);font-size:13px;line-height:1.35}

.hero-actions{margin-top:22px}

.section.dark{background:#ffffff}

.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  margin-top:30px;
}
.service-card{
  background:#ffffff;
  padding:24px;
  border-radius:16px;
  border:1px solid rgba(17,71,150,.10);
  box-shadow:0 14px 30px rgba(17,71,150,.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(17,71,150,.14)}
.service-card p{margin:10px 0 0;color:#436082;line-height:1.4}

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  margin-top:30px;
}
.step{
  background:#ffffff;
  padding:24px;
  border-radius:16px;
  text-align:center;
  border:1px solid rgba(17,71,150,.10);
  box-shadow:0 14px 30px rgba(17,71,150,.08);
}
.step span{
  display:inline-block;
  width:40px;
  height:40px;
  line-height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--deep));
  margin-bottom:10px;
  font-weight:900;
}

#contacts a{color:#114aa8;text-decoration:none}
#contacts a:hover{text-decoration:underline}

@media (max-width:820px){
  .menu{display:none}
  .stats{grid-template-columns:1fr;max-width:420px}
}


/* Trust block */
.trust{
  padding:84px 0 60px;
  background:#ffffff;
  color:#0b1b2b;
}
.trust h2{
  margin:0 0 38px;
  font-size:28px;
  letter-spacing:.2px;
  color:#114aa8;
  text-align:center;
}
.trust-grid-logos{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:40px 54px;
  align-items:center;
  justify-items:center;
  max-width:1150px;
  margin:0 auto;
}
.trust-grid-logos .trust-logo-full{
  display:block;
  width:auto;
  max-width:240px;
  height:94px;
  object-fit:contain;
  object-position:center;
  transition:transform .2s ease, opacity .2s ease, filter .2s ease;
  filter:drop-shadow(0 6px 14px rgba(15,38,74,.08));
}
.trust-grid-logos .trust-logo-full:hover{
  transform:scale(1.05);
  filter:drop-shadow(0 10px 18px rgba(15,38,74,.12));
}
@media (max-width: 1100px){
  .trust-grid-logos{grid-template-columns:repeat(3,1fr);gap:28px 34px}
  .trust-grid-logos .trust-logo-full{height:84px;max-width:210px}
}
@media (max-width: 680px){
  .trust{padding:48px 0 32px}
  .trust-grid-logos{grid-template-columns:repeat(2,1fr);gap:22px 18px}
  .trust-grid-logos .trust-logo-full{height:66px;max-width:160px}
}
body, .section, .card, .service-card, .step, footer{color:#0b1b2b;}
.menu a{color:#123b73;font-weight:700;}
.menu a:hover{color:#1f6fd6;}
.nav-cta .btn.small{box-shadow:none;}
.trust-grid-logos img[alt="Magnum"]{height:140px;max-width:320px;}
.stat{background:#ffffff;border:1px solid rgba(17,71,150,.10);box-shadow:0 14px 30px rgba(17,71,150,.08);}
.stat-num{color:#114aa8;}
.stat-label{color:#436082;}

.hero .btn.primary{min-width:220px;}
.hero .btn.secondary,.hero .btn.ghost{min-width:170px;}
@media (max-width: 640px){
  .hero{padding:104px 0 74px; background: linear-gradient(180deg, rgba(7,22,43,.50) 0%, rgba(7,22,43,.20) 42%, rgba(7,22,43,.10) 100%), url("hero-bg.png") center center / cover no-repeat;} 
  .hero-content{padding:24px 22px;border-radius:22px;}
  .hero h1{font-size:40px;}
  .hero .btn.primary,.hero .btn.secondary,.hero .btn.ghost{min-width:unset;width:100%;}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:12px;}
}

.hero{border-bottom:1px solid rgba(15,87,216,.06);}
.section h2{color:#0e2440;}
.stats{margin-top:30px;}
.stat{background:#ffffff;border:1px solid rgba(15,87,216,.08);box-shadow:0 18px 36px rgba(15,87,216,.07);}
.stat-num{font-size:36px;}
.services-grid,.cards,.steps{margin-top:26px;}
.service-card,.step{background:#ffffff;border:1px solid rgba(15,87,216,.08);box-shadow:0 18px 36px rgba(15,87,216,.07);}
footer{background:#ffffff;}
@media (max-width: 640px){.hero h1{font-size:42px}.hero p{font-size:16px}}


.section-cases{padding-top:18px;padding-bottom:6px;}
.cases-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px;}
.case-card{background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);border:1px solid rgba(15,87,216,.08);border-radius:22px;padding:24px;box-shadow:0 18px 40px rgba(15,87,216,.08);}
.case-card strong{display:block;font-size:22px;color:#0e2440;margin-top:10px;}
.case-card p{margin:10px 0 0;color:#54709a;line-height:1.5;}
.case-badge{display:inline-flex;padding:7px 12px;border-radius:999px;background:rgba(43,124,255,.10);color:#145ddf;font-size:12px;font-weight:800;letter-spacing:.2px;}
@media (max-width: 900px){.cases-grid{grid-template-columns:1fr;}}


.hero img,.hero-media img,.hero-image img{filter:brightness(1.14) contrast(1.12) saturate(1.04);}


/* v36 lively homepage */
.hero{padding:118px 0 88px;background:
  linear-gradient(90deg, rgba(7,22,43,.28) 0%, rgba(7,22,43,.10) 34%, rgba(7,22,43,.02) 72%),
  radial-gradient(circle at 14% 18%, rgba(54,129,255,.14) 0, rgba(54,129,255,0) 36%),
  url("hero-bg.png") center center / cover no-repeat;}
.hero::after{background:linear-gradient(90deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.015) 35%, rgba(0,0,0,0) 72%)}
.hero::before{background:rgba(0,0,0,.04)}
.hero-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:24px;align-items:stretch}
.hero-copy{position:relative;z-index:1;max-width:760px;padding:34px 36px;border-radius:28px;background:linear-gradient(135deg, rgba(8,20,36,.30) 0%, rgba(8,20,36,.12) 100%);backdrop-filter:blur(6px);box-shadow:0 28px 70px rgba(7,22,43,.18);border:1px solid rgba(255,255,255,.16)}
.hero-content{max-width:none;padding:0;background:none;border:none;box-shadow:none;backdrop-filter:none}
.hero h1{font-size:58px}
.hero p{color:#e7f1ff;text-shadow:0 3px 18px rgba(0,0,0,.25)}
.hero-chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero-chip{display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:13px;font-weight:700}
.hero-config{position:relative;z-index:1;padding:20px;border-radius:28px;background:linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(244,248,255,.92) 100%);border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 60px rgba(10,31,59,.18);display:flex;flex-direction:column;min-height:100%}
.hero-config-title{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.hero-config-title h3{margin:0;font-size:24px;color:#0f2747}
.hero-config-title p{margin:6px 0 0;color:#557092;font-size:14px;max-width:320px;text-shadow:none}
.hero-config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hero-field label{display:block;margin:0 0 7px;color:#436082;font-size:12px;font-weight:700}
.hero-field input,.hero-field select{width:100%;padding:13px 14px;border-radius:14px;border:1px solid rgba(17,71,150,.14);background:#fff;color:#0b1b2b;outline:none;box-shadow:0 8px 16px rgba(17,71,150,.06);font:inherit}
.hero-preview{margin-top:16px;padding:18px;border-radius:22px;background:linear-gradient(135deg,#f7fbff 0%,#eef5ff 100%);border:1px solid rgba(31,111,255,.10)}
.hero-preview-top{display:grid;grid-template-columns:128px 1fr;gap:16px;align-items:center}
.hero-preview-media{height:128px;border-radius:22px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid rgba(17,71,150,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.hero-preview-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease, filter .35s ease;filter:saturate(1.05) contrast(1.02)}
.hero-config:hover .hero-preview-media img{transform:scale(1.04)}
.hero-preview-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.hero-kpi{padding:12px 14px;border-radius:16px;background:#fff;border:1px solid rgba(17,71,150,.08)}
.hero-kpi-label{display:block;font-size:12px;color:#6580a4;margin-bottom:6px}
.hero-kpi-value{display:block;font-size:18px;font-weight:800;color:#0d2444}
.hero-config-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.hero-config-note{margin-top:12px;color:#6280a3;font-size:12px}
.stats{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{padding:16px 18px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(4px)}
.stat-num{font-size:34px;font-weight:900;color:#fff;line-height:1}
.stat-label{margin-top:6px;color:#dfe9f7;font-size:13px}
.trust-marquee{position:relative;overflow:hidden;padding:14px 0 6px}
.trust-marquee::before,.trust-marquee::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.trust-marquee::before{left:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 100%)}
.trust-marquee::after{right:0;background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,0) 100%)}
.marquee-track{display:flex;gap:18px;width:max-content;animation:marquee-scroll 26s linear infinite}
.marquee-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:160px;height:68px;padding:12px 18px;border-radius:18px;background:#fff;border:1px solid rgba(17,71,150,.08);box-shadow:0 10px 24px rgba(17,71,150,.05)}
.marquee-item img{max-width:120px;max-height:34px;object-fit:contain;opacity:.9;filter:grayscale(100%)}
.marquee-item:hover img{opacity:1;filter:none}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:hover){.trust-marquee:hover .marquee-track{animation-play-state:paused}}
.reveal-up{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease}
.reveal-up.is-visible{opacity:1;transform:none}
@media (max-width: 980px){
  .hero-shell{grid-template-columns:1fr}
  .hero h1{font-size:44px}
  .hero-copy,.hero-config{padding:24px}
}
@media (max-width: 640px){
  .hero{padding:100px 0 68px}
  .hero-config-grid,.hero-preview-kpis,.stats{grid-template-columns:1fr}
  .hero-preview-top{grid-template-columns:1fr}
  .hero h1{font-size:36px}
  .marquee-item{min-width:132px;height:60px}
}


/* v38 cleanup */
.hero-shell{grid-template-columns:minmax(0,1fr)!important;gap:0!important}
.hero-copy{max-width:820px!important}
.brands-marquee-section{padding-top:18px}
.brands-marquee-section h2{text-align:center;margin:0 0 22px;color:#123b73;font-size:34px}
.trust-marquee{padding:6px 0 8px}
.trust-marquee::before,.trust-marquee::after{width:36px}
.marquee-track{gap:22px;animation:marquee-scroll 28s linear infinite}
.marquee-item{min-width:170px;height:76px;padding:12px 20px;border-radius:20px;background:#ffffff;border:1px solid rgba(17,71,150,.08);box-shadow:0 10px 24px rgba(17,71,150,.05)}
.marquee-item img{max-width:132px;max-height:42px;object-fit:contain;opacity:1!important;filter:none!important}
@media (max-width: 980px){.brands-marquee-section h2{font-size:28px}.marquee-item{min-width:150px;height:68px}.marquee-item img{max-width:116px;max-height:36px}}

.whatsapp-float{
position:fixed;
right:20px;
bottom:20px;
width:60px;
height:60px;
background:#25D366;
color:#fff;
font-size:28px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
box-shadow:0 8px 20px rgba(0,0,0,.2);
z-index:999;
text-decoration:none;
transition:.3s;
}
.whatsapp-float:hover{transform:scale(1.1);}

.reveal{opacity:0;transform:translateY(40px);transition:all .8s ease;}
.reveal.active{opacity:1;transform:translateY(0);}

.nav-price-btn{
  margin-left:12px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
}

.hero{
  background-attachment: fixed;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 0;
}