/* PCenter V10.1 — Homepage Impacto Visual
   Objetivo: mais presença, mantendo o registo sóbrio B2B.
*/

/* HERO */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:104px 0 86px!important;
  background:
    radial-gradient(circle at 88% 16%,rgba(24,184,242,.12) 0,rgba(24,184,242,0) 24%),
    radial-gradient(circle at 12% 55%,rgba(8,103,242,.055) 0,rgba(8,103,242,0) 28%),
    linear-gradient(180deg,#fff 0%,#f6faff 100%)!important;
}
.hero:before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.44;
  background-image:
    linear-gradient(rgba(6,26,53,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,26,53,.035) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.62),transparent 86%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.62),transparent 86%);
}
.hero:after{
  content:"";position:absolute;right:-160px;top:60px;width:520px;height:520px;border-radius:50%;
  border:1px solid rgba(8,127,229,.09);box-shadow:
    0 0 0 70px rgba(8,127,229,.018),
    0 0 0 140px rgba(8,127,229,.012);
  z-index:-1;pointer-events:none;
}
.hero-copy{max-width:980px!important}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 12px;border:1px solid #d8e9f6;border-radius:999px;background:rgba(255,255,255,.72);
  box-shadow:0 8px 30px rgba(6,26,53,.03)
}
.hero .eyebrow:before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--electric));
  box-shadow:0 0 0 5px rgba(8,127,229,.07)
}
.hero h1{
  max-width:1040px;
  font-size:clamp(4.35rem,7.45vw,7.25rem)!important;
  line-height:.965!important;
  margin:24px 0 28px!important;
  letter-spacing:-.055em!important;
}
.hero h1 span{
  position:relative;display:inline-block;
  background:linear-gradient(100deg,#087fe5 0%,#2a78f5 52%,#18a8df 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent!important
}
.hero h1 span:after{
  content:"";position:absolute;left:3%;right:4%;bottom:-7px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,rgba(24,184,242,0),rgba(24,184,242,.7),rgba(8,103,242,0));
  opacity:.55
}
.hero .lead{max-width:760px!important;font-size:1.23rem!important;color:#5d7188!important}
.hero .actions{margin-top:34px!important}

.hero-visual{
  height:510px!important;
  margin-top:68px!important;
  border-radius:32px!important;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 34px 80px rgba(6,26,53,.16)!important;
  transform:translateZ(0);
}
.hero-visual img{
  opacity:.76!important;
  filter:saturate(.88) contrast(1.04);
  transform:scale(1.015);
}
.hero-visual:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:90px 90px;
  opacity:.18;
}
.hero-visual:after{
  z-index:1!important;
  background:
    linear-gradient(90deg,rgba(6,26,53,.90) 0%,rgba(6,26,53,.58) 38%,rgba(6,26,53,.10) 78%,rgba(6,26,53,.24) 100%)!important
}
.hero-note{left:42px!important;bottom:38px!important;max-width:520px!important}
.hero-note:before{
  content:"PCENTER · BUSINESS TECHNOLOGY";
  display:block;margin-bottom:12px;font-size:.66rem;font-weight:900;letter-spacing:.16em;color:#77dfff
}
.hero-note b{font-size:1.7rem!important;line-height:1.12;letter-spacing:-.025em}
.hero-note p{max-width:470px;margin-top:8px!important;font-size:.95rem}

.hero-system{
  position:absolute;z-index:3;right:28px;top:28px;
  display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:480px;
}
.hero-system span{
  display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(6,26,53,.48);
  backdrop-filter:blur(12px);color:#dcecff;font-size:.65rem;font-weight:800;letter-spacing:.035em;
}
.hero-system span:first-child:before{
  content:"";width:6px;height:6px;border-radius:50%;background:#65e3b4;
  box-shadow:0 0 0 4px rgba(101,227,180,.12)
}

/* PROOF STRIP */
.proof{
  position:relative;z-index:4;
  margin-top:-32px;
  border:0!important;background:transparent!important;
}
.proof-row{
  position:relative;
  padding:0!important;gap:0!important;
  background:rgba(255,255,255,.96);
  border:1px solid #dfe9f2;
  border-radius:20px;
  box-shadow:0 22px 54px rgba(6,26,53,.09);
  overflow:hidden;
}
.proof-row>div{
  position:relative;padding:24px 26px;
}
.proof-row>div+div:before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:#e4edf5
}
.proof b{font-size:1.02rem;color:var(--navy);letter-spacing:-.015em}
.proof span{display:block;margin-top:3px}

/* SECTIONS */
.problem{padding:124px 0 112px!important}
.problem-grid{gap:94px!important}
.problem .mini{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border-color:#dce7f0;
}
.problem .mini .num{
  display:inline-flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:10px;
  background:#edf7ff;color:var(--blue)
}
.problem .mini h3{margin-top:17px!important}

.solutions{
  position:relative;isolation:isolate;overflow:hidden;
  padding:118px 0!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(24,184,242,.14),transparent 30%),
    radial-gradient(circle at 88% 100%,rgba(8,103,242,.12),transparent 34%),
    var(--navy)!important;
}
.solutions:before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:84px 84px
}
.solution-grid{gap:16px!important}
.solution{
  min-height:285px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.038))!important;
  border-color:rgba(255,255,255,.11)!important;
  backdrop-filter:blur(8px)
}
.solution:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(89,211,255,.38)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.055))!important;
  box-shadow:0 22px 55px rgba(0,0,0,.12)
}
.solution .badge{
  border:1px solid rgba(99,215,255,.2);
  background:rgba(99,215,255,.08)
}

.about{padding:118px 0!important}
.about-photo{
  position:relative;border-radius:28px!important;overflow:visible!important;
}
.about-photo:before{
  content:"";position:absolute;left:-14px;bottom:-14px;width:58%;height:55%;
  border-left:2px solid rgba(8,127,229,.2);border-bottom:2px solid rgba(8,127,229,.2);
  border-radius:0 0 0 24px;z-index:-1
}
.about-photo img{border-radius:28px;box-shadow:0 28px 64px rgba(6,26,53,.12)}

.eco{padding:112px 0!important}
.eco-card{border-color:rgba(255,255,255,.11)!important}
.eco-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.20)!important}

.home-guides{padding:110px 0!important}
.home-guide-card{
  border-radius:24px!important;
  padding:29px!important;
}
.home-guide-card small:after{
  content:"";display:block;width:34px;height:2px;margin-top:14px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--electric))
}

.cta{padding-top:108px!important}
.cta-box{
  position:relative;overflow:hidden;
  border-radius:28px!important;
  box-shadow:0 26px 64px rgba(6,26,53,.11)
}
.cta-box:after{
  content:"";position:absolute;right:-110px;top:-110px;width:330px;height:330px;border-radius:50%;
  border:1px solid rgba(8,127,229,.10);box-shadow:0 0 0 55px rgba(8,127,229,.025);
  pointer-events:none
}

@media(max-width:900px){
  .hero{padding-top:76px!important;padding-bottom:72px!important}
  .hero h1{font-size:clamp(3.35rem,12vw,5.15rem)!important}
  .hero-visual{height:420px!important;margin-top:52px!important}
  .hero-system{right:18px;top:18px;max-width:60%}
  .proof{margin-top:-24px}
  .proof-row{grid-template-columns:1fr 1fr!important}
  .proof-row>div+div:before{display:none}
  .proof-row>div:nth-child(odd){border-right:1px solid #e4edf5}
  .proof-row>div:nth-child(-n+2){border-bottom:1px solid #e4edf5}
  .problem{padding-top:102px!important}
}
@media(max-width:620px){
  .hero{
    padding:64px 0 62px!important;
    background:
      radial-gradient(circle at 95% 12%,rgba(24,184,242,.11),transparent 24%),
      linear-gradient(180deg,#fff,#f7fbff)!important
  }
  .hero:before{background-size:46px 46px;opacity:.32}
  .hero:after{display:none}
  .hero .eyebrow{padding:7px 10px;font-size:.66rem}
  .hero h1{font-size:clamp(3rem,13.7vw,3.75rem)!important;line-height:.99!important;margin-top:22px!important}
  .hero h1 span:after{height:3px;bottom:-5px}
  .hero .lead{font-size:1.05rem!important}
  .hero-visual{height:355px!important;margin-top:44px!important;border-radius:24px!important}
  .hero-visual img{object-position:58% center}
  .hero-note{left:22px!important;right:22px!important;bottom:24px!important}
  .hero-note:before{font-size:.58rem;margin-bottom:8px}
  .hero-note b{font-size:1.33rem!important}
  .hero-note p{font-size:.84rem!important}
  .hero-system{left:18px;right:18px;top:17px;max-width:none;justify-content:flex-start}
  .hero-system span{padding:7px 9px;font-size:.58rem}
  .hero-system span:nth-child(n+3){display:none}
  .proof{margin-top:-18px}
  .proof-row{border-radius:17px}
  .proof-row>div{padding:18px 17px}
  .proof b{font-size:.88rem}
  .proof span{font-size:.72rem}
  .problem{padding:88px 0!important}
  .solutions{padding:92px 0!important}
  .solution{min-height:0!important}
  .about,.eco,.home-guides{padding:88px 0!important}
  .cta{padding-top:84px!important}
}