/* =====================================================
   BLOCO 1 — BASE + MENU RESPONSIVO + HERO E-COMMERCE
===================================================== */

:root{
  --black:#050505;
  --soft:#08080d;
  --purple:#7c3aed;
  --purple2:#9333ea;
  --purpleLight:#c4b5fd;
  --green:#22c55e;
  --text:#ffffff;
  --muted:rgba(255,255,255,.68);
  --low:rgba(255,255,255,.46);
  --line:rgba(255,255,255,.08);
  --max:1180px;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:"Inter",sans-serif;
  background:var(--black);
  color:var(--text);
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

/* HEADER */

.header{
  position:fixed;
  top:16px;
  left:0;
  width:100%;
  z-index:999;
}

.nav{
  position:relative;
  width:min(var(--max),calc(100% - 32px));
  min-height:76px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(22px);
  box-shadow:0 22px 80px rgba(0,0,0,.46);
}

.brand{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  gap:14px;
}

.brand img{
  width:58px;
  height:58px;
  object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(124,58,237,.55));
}

.brand-text{
  display:grid;
  gap:3px;
  line-height:1;
}

.brand-text strong{
  font-size:1rem;
  letter-spacing:-.02em;
}

.brand-text span{
  color:var(--purpleLight);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:4px;
}

.nav-links a{
  padding:12px 14px;
  border-radius:13px;
  color:rgba(255,255,255,.72);
  font-size:.86rem;
  font-weight:800;
  transition:.28s ease;
}

.nav-links a:hover{
  color:#fff;
  background:rgba(124,58,237,.12);
}

.nav-cta{
  min-height:48px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:#fff;
  font-size:.86rem;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 20px 54px rgba(124,58,237,.34);
  transition:.28s ease;
}

.nav-cta:hover{
  transform:translateY(-2px);
}

/* MENU HAMBÚRGUER */

.menu-toggle{
  display:none;
  width:50px;
  height:50px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  background:rgba(255,255,255,.045);
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  position:relative;
  z-index:6;
}

.menu-toggle span{
  width:25px;
  height:3px;
  border-radius:999px;
  background:#fff;
  transition:.3s ease;
}

.menu-toggle.active span:nth-child(1){
  transform:translateY(9px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
  opacity:0;
}

.menu-toggle.active span:nth-child(3){
  transform:translateY(-9px) rotate(-45deg);
}

/* HERO */

.ecommerce-hero{
  position:relative;
  min-height:100vh;
  padding:155px 0 90px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 12%,rgba(124,58,237,.18),transparent 30rem),
    radial-gradient(circle at 84% 18%,rgba(147,51,234,.20),transparent 32rem),
    radial-gradient(circle at 70% 82%,rgba(34,197,94,.08),transparent 28rem),
    linear-gradient(180deg,#050505,#08080d 55%,#050505);
}

.ecommerce-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.16;
  mask-image:radial-gradient(circle at 50% 36%,black,transparent 78%);
}

.ecommerce-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(70px);
  pointer-events:none;
}

.ecommerce-glow-one{
  width:620px;
  height:620px;
  right:-220px;
  top:30px;
  background:rgba(124,58,237,.26);
}

.ecommerce-glow-two{
  width:520px;
  height:520px;
  left:-220px;
  bottom:-80px;
  background:rgba(34,197,94,.10);
}

.ecommerce-hero-container{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr .98fr;
  gap:62px;
  align-items:center;
}

.section-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  min-height:36px;
  margin-bottom:22px;
  padding:0 16px;
  border:1px solid rgba(124,58,237,.28);
  border-radius:999px;
  background:rgba(124,58,237,.10);
  color:var(--purpleLight);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.ecommerce-hero-content h1{
  margin:0 0 24px;
  font-size:clamp(3rem,6vw,5.8rem);
  line-height:.92;
  letter-spacing:-.08em;
}

.ecommerce-hero-content h1 span{
  display:block;
  color:transparent;
  background:linear-gradient(135deg,#fff 8%,#c4b5fd 46%,#7c3aed 100%);
  -webkit-background-clip:text;
  background-clip:text;
}

.ecommerce-hero-content p{
  max-width:650px;
  margin-bottom:34px;
  color:var(--muted);
  font-size:1.06rem;
  line-height:1.82;
}

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:34px;
}

.hero-btn-primary,
.hero-btn-secondary{
  min-height:54px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:14px;
  font-weight:900;
  transition:.28s ease;
}

.hero-btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:#fff;
  box-shadow:0 22px 58px rgba(124,58,237,.34);
}

.hero-btn-secondary{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  backdrop-filter:blur(14px);
}

.hero-btn-primary:hover,
.hero-btn-secondary:hover{
  transform:translateY(-3px);
}

.ecommerce-hero-proof{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.ecommerce-proof-card{
  padding:18px;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:13px;
  align-items:start;
  border:1px solid rgba(255,255,255,.085);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(16px);
}

.ecommerce-proof-card i{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
}

.ecommerce-proof-card strong{
  display:block;
  margin-bottom:7px;
}

.ecommerce-proof-card span{
  color:var(--low);
  font-size:.78rem;
  line-height:1.48;
}

/* HERO VISUAL */

.ecommerce-hero-visual{
  position:relative;
  min-height:720px;
}

.commerce-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  border:1px solid rgba(124,58,237,.14);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.orbit-one{
  width:520px;
  height:520px;
  animation:rotateOrbit 16s linear infinite;
}

.orbit-two{
  width:660px;
  height:660px;
  animation:rotateOrbitReverse 22s linear infinite;
}

.commerce-main-mockup{
  position:absolute;
  inset:70px 0 60px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:34px;
  background:
    radial-gradient(circle at 20% 0%,rgba(124,58,237,.24),transparent 20rem),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  backdrop-filter:blur(24px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    0 0 90px rgba(124,58,237,.14);
  animation:mockupFloat 6s ease-in-out infinite;
}

.commerce-mockup-top{
  height:64px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.24);
}

.panel-dots{
  display:flex;
  gap:8px;
}

.panel-dots span{
  width:10px;
  height:10px;
  border-radius:50%;
}

.panel-dots span:nth-child(1){background:#ff5f57;}
.panel-dots span:nth-child(2){background:#febc2e;}
.panel-dots span:nth-child(3){background:#28c840;}

.commerce-mockup-top small{
  color:rgba(255,255,255,.52);
  font-size:.76rem;
  font-weight:900;
}

.commerce-mockup-body{
  display:grid;
  grid-template-columns:90px 1fr;
  height:calc(100% - 64px);
}

.commerce-sidebar{
  padding:24px 16px;
  border-right:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.20);
}

.sidebar-logo{
  margin-bottom:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.sidebar-logo i{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow:0 14px 40px rgba(124,58,237,.32);
}

.sidebar-logo span{
  color:rgba(255,255,255,.6);
  font-size:.7rem;
  font-weight:900;
}

.sidebar-line{
  width:100%;
  height:54px;
  margin-bottom:14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
}

.sidebar-line.active{
  background:linear-gradient(135deg,var(--purple),var(--purple2));
}

.commerce-store-preview{
  padding:30px;
}

.store-preview-header{
  margin-bottom:28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.store-preview-header span{
  display:block;
  margin-bottom:8px;
  color:rgba(255,255,255,.46);
  font-size:.76rem;
  font-weight:800;
}

.store-preview-header strong{
  font-size:1.6rem;
  letter-spacing:-.04em;
}

.store-status{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  color:#bbf7d0;
  font-size:.76rem;
  font-weight:900;
}

.product-showcase{
  min-height:320px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  margin-bottom:24px;
}

.product-image-3d{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  background:
    radial-gradient(circle at 30% 20%,rgba(124,58,237,.26),transparent 40%),
    linear-gradient(135deg,#090909,#141414,#090909);
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-glow{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(124,58,237,.30);
  filter:blur(40px);
}

.product-image-3d i{
  position:relative;
  z-index:2;
  font-size:4rem;
  color:#fff;
  animation:productFloat 4s ease-in-out infinite;
}

.product-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.product-info span{
  margin-bottom:12px;
  color:var(--purpleLight);
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.product-info h3{
  margin-bottom:18px;
  font-size:2rem;
  line-height:1;
  letter-spacing:-.05em;
}

.product-info p{
  margin-bottom:26px;
  color:rgba(255,255,255,.58);
  line-height:1.75;
}

.product-actions{
  display:flex;
  align-items:center;
  gap:16px;
}

.product-actions button{
  min-height:48px;
  padding:0 18px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(124,58,237,.34);
}

.product-actions small{
  color:#22c55e;
  font-size:1rem;
  font-weight:900;
}

.product-grid-mini{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}

.mini-product{
  height:110px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
}

.mini-product.active{
  border-color:rgba(124,58,237,.34);
  background:
    radial-gradient(circle at 20% 0%,rgba(124,58,237,.22),transparent 10rem),
    rgba(255,255,255,.04);
}

.commerce-float-card{
  position:absolute;
  z-index:5;
  min-width:210px;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(20px);
  box-shadow:0 26px 70px rgba(0,0,0,.42);
  animation:floatCard 5s ease-in-out infinite;
}

.commerce-float-card i{
  width:50px;
  height:50px;
  flex:0 0 50px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow:0 16px 40px rgba(124,58,237,.28);
}

.commerce-float-card span{
  display:block;
  margin-bottom:4px;
  color:rgba(255,255,255,.48);
  font-size:.74rem;
  font-weight:800;
}

.commerce-float-card strong{
  display:block;
  margin-bottom:4px;
  font-size:1.4rem;
  letter-spacing:-.04em;
}

.commerce-float-card small{
  color:rgba(255,255,255,.52);
  font-size:.72rem;
}

.float-sales{
  top:70px;
  right:-40px;
}

.float-orders{
  left:-30px;
  top:310px;
  animation-delay:-1.4s;
}

.float-ticket{
  right:-20px;
  bottom:80px;
  animation-delay:-2.4s;
}

/* ANIMAÇÕES */

@keyframes mockupFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

@keyframes floatCard{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}

@keyframes rotateOrbit{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}

@keyframes rotateOrbitReverse{
  from{transform:translate(-50%,-50%) rotate(360deg);}
  to{transform:translate(-50%,-50%) rotate(0deg);}
}

@keyframes productFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}

/* RESPONSIVO */

@media(max-width:1080px){

  .nav{
    min-height:auto;
    padding:14px;
  }

  .nav-links{
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    width:100%;
    padding:18px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:20px;
    background:rgba(5,5,5,.96);
    backdrop-filter:blur(22px);
    box-shadow:0 24px 80px rgba(0,0,0,.50);
    opacity:0;
    visibility:hidden;
    transform:translateY(-16px);
    transition:.3s ease;
  }

  .nav-links.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .nav-links a{
    width:100%;
    padding:15px;
  }

  .menu-toggle{
    display:flex;
  }

  .nav-cta{
    min-height:46px;
    padding:0 14px;
    font-size:.82rem;
  }

  .ecommerce-hero-container{
    grid-template-columns:1fr;
  }

  .ecommerce-hero-visual{
    min-height:680px;
  }
}

@media(max-width:760px){
  .nav-cta{
    display:none;
  }
}

@media(max-width:680px){

  .header{
    top:10px;
  }

  .nav{
    width:calc(100% - 20px);
  }

  .brand img{
    width:50px;
    height:50px;
  }

  .brand-text span{
    display:none;
  }

  .ecommerce-hero{
    padding:130px 0 70px;
  }

  .ecommerce-hero-container{
    width:min(100% - 30px,var(--max));
  }

  .ecommerce-hero-content h1{
    font-size:clamp(2.75rem,14vw,4.25rem);
  }

  .hero-buttons{
    flex-direction:column;
  }

  .hero-btn-primary,
  .hero-btn-secondary{
    width:100%;
  }

  .ecommerce-hero-proof{
    grid-template-columns:1fr;
  }

  .ecommerce-hero-visual{
    min-height:620px;
  }

  .commerce-main-mockup{
    inset:30px 0;
  }

  .commerce-mockup-body{
    grid-template-columns:1fr;
  }

  .commerce-sidebar{
    display:none;
  }

  .product-showcase{
    grid-template-columns:1fr;
  }

  .product-grid-mini{
    grid-template-columns:1fr 1fr;
  }

  .commerce-float-card{
    display:none;
  }
}


/* =====================================================
   BLOCO 2 — O DIGITAL É SOBREVIVÊNCIA
===================================================== */

.commerce-market-section{
  position:relative;
  padding:130px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%,rgba(124,58,237,.16),transparent 32rem),
    radial-gradient(circle at 85% 75%,rgba(34,197,94,.08),transparent 28rem),
    linear-gradient(180deg,#050505,#08080d 50%,#050505);
}

.commerce-market-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.16;
  mask-image:radial-gradient(circle at 50% 40%,black,transparent 78%);
}

.market-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(42px);
  pointer-events:none;
}

.market-glow-one{
  width:650px;
  height:650px;
  left:-260px;
  top:80px;
  background:radial-gradient(circle,rgba(147,51,234,.28),transparent 70%);
}

.market-glow-two{
  width:520px;
  height:520px;
  right:-220px;
  bottom:40px;
  background:radial-gradient(circle,rgba(34,197,94,.14),transparent 70%);
}

.commerce-market-container{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
}

.market-header{
  max-width:920px;
  margin:0 auto 68px;
  text-align:center;
}

.market-header h2{
  margin-bottom:22px;
  font-size:clamp(2.45rem,5vw,5rem);
  line-height:.95;
  letter-spacing:-.07em;
}

.market-header h2 span{
  display:block;
  color:transparent;
  background:linear-gradient(135deg,#fff 10%,#c4b5fd 45%,#22c55e 95%);
  -webkit-background-clip:text;
  background-clip:text;
}

.market-header p{
  max-width:780px;
  margin:0 auto;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.85;
}

.market-layout{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:20px;
  align-items:stretch;
  margin-bottom:34px;
}

.market-main-card{
  position:relative;
  min-height:640px;
  padding:34px;
  overflow:hidden;
  border:1px solid rgba(147,51,234,.32);
  border-radius:36px;
  background:
    radial-gradient(circle at 30% 0%,rgba(147,51,234,.28),transparent 25rem),
    linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  backdrop-filter:blur(22px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.46),
    0 0 90px rgba(124,58,237,.14);
}

.market-main-card::before{
  content:"";
  position:absolute;
  inset:28px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:28px;
  pointer-events:none;
}

.market-main-top{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:30px;
}

.market-main-top span{
  display:block;
  margin-bottom:8px;
  color:rgba(255,255,255,.48);
  font-size:.76rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.market-main-top strong{
  font-size:1.45rem;
  letter-spacing:-.04em;
}

.market-online-badge{
  padding:9px 13px;
  border:1px solid rgba(34,197,94,.25);
  border-radius:999px;
  background:rgba(34,197,94,.10);
  color:#bbf7d0;
  font-size:.74rem;
  font-weight:900;
  white-space:nowrap;
}

.market-graph{
  position:relative;
  z-index:3;
  min-height:340px;
  margin-bottom:30px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    rgba(0,0,0,.34);
  background-size:42px 42px;
}

.market-graph-line{
  position:absolute;
  left:10%;
  right:8%;
  top:48%;
  height:2px;
  background:linear-gradient(90deg,transparent,#c4b5fd,#22c55e,transparent);
  transform:rotate(-18deg);
  box-shadow:0 0 26px rgba(196,181,253,.65);
  animation:marketLinePulse 2.8s ease-in-out infinite;
}

.market-bar{
  position:absolute;
  bottom:34px;
  width:48px;
  border-radius:18px 18px 8px 8px;
  background:linear-gradient(180deg,#22c55e,#7c3aed);
  box-shadow:0 0 32px rgba(124,58,237,.24);
  animation:marketBarFloat 4s ease-in-out infinite;
}

.bar-1{
  left:10%;
  height:74px;
}

.bar-2{
  left:24%;
  height:108px;
  animation-delay:-.4s;
}

.bar-3{
  left:38%;
  height:148px;
  animation-delay:-.8s;
}

.bar-4{
  left:52%;
  height:192px;
  animation-delay:-1.2s;
}

.bar-5{
  left:66%;
  height:232px;
  animation-delay:-1.6s;
}

.bar-6{
  left:80%;
  height:270px;
  animation-delay:-2s;
}

.market-main-text{
  position:relative;
  z-index:3;
}

.market-main-text h3{
  max-width:680px;
  margin-bottom:18px;
  font-size:clamp(2rem,4vw,4.1rem);
  line-height:1;
  letter-spacing:-.06em;
}

.market-main-text p{
  max-width:680px;
  color:var(--muted);
  line-height:1.82;
}

.market-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.market-stat-card{
  position:relative;
  min-height:308px;
  padding:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-radius:30px;
  background:
    radial-gradient(circle at 20% 0%,rgba(147,51,234,.13),transparent 16rem),
    rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
  transition:.32s ease;
}

.market-stat-card:hover{
  transform:translateY(-8px);
  border-color:rgba(196,181,253,.28);
  box-shadow:0 24px 80px rgba(124,58,237,.13);
}

.market-stat-card.active{
  border-color:rgba(34,197,94,.28);
  background:
    radial-gradient(circle at 20% 0%,rgba(34,197,94,.15),transparent 16rem),
    rgba(255,255,255,.045);
}

.market-stat-icon{
  width:58px;
  height:58px;
  margin-bottom:24px;
  display:grid;
  place-items:center;
  border:1px solid rgba(147,51,234,.32);
  border-radius:18px;
  background:rgba(147,51,234,.13);
  color:var(--purpleLight);
  font-size:1.18rem;
  box-shadow:0 0 26px rgba(124,58,237,.16);
}

.market-stat-card.active .market-stat-icon{
  border-color:rgba(34,197,94,.32);
  background:rgba(34,197,94,.12);
  color:#bbf7d0;
}

.market-stat-card strong{
  display:block;
  margin-bottom:14px;
  font-size:clamp(2.3rem,4vw,4.2rem);
  line-height:.9;
  letter-spacing:-.07em;
}

.market-stat-card p{
  color:rgba(255,255,255,.58);
  font-size:.9rem;
  line-height:1.7;
}

.market-card-line{
  position:absolute;
  left:28px;
  right:28px;
  bottom:24px;
  height:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}

.market-card-line::before{
  content:"";
  position:absolute;
  inset:0;
  width:70%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--purple),var(--purpleLight));
  animation:marketProgress 3s ease-in-out infinite;
}

.market-stat-card.active .market-card-line::before{
  background:linear-gradient(90deg,#22c55e,var(--purpleLight));
}

.market-comparison{
  position:relative;
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  gap:18px;
  align-items:center;
  margin-top:24px;
}

.comparison-card{
  min-height:410px;
  padding:34px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:34px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
  box-shadow:0 30px 90px rgba(0,0,0,.32);
}

.comparison-card.negative{
  background:
    radial-gradient(circle at 20% 0%,rgba(239,68,68,.12),transparent 18rem),
    rgba(255,255,255,.04);
}

.comparison-card.positive{
  background:
    radial-gradient(circle at 20% 0%,rgba(34,197,94,.14),transparent 18rem),
    rgba(255,255,255,.04);
  border-color:rgba(34,197,94,.22);
}

.comparison-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:28px;
}

.comparison-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-size:1.1rem;
}

.negative .comparison-icon{
  background:rgba(239,68,68,.12);
  color:#fecaca;
  border:1px solid rgba(239,68,68,.22);
}

.positive .comparison-icon{
  background:rgba(34,197,94,.12);
  color:#bbf7d0;
  border:1px solid rgba(34,197,94,.22);
}

.comparison-header h3{
  font-size:1.55rem;
  line-height:1;
  letter-spacing:-.04em;
}

.comparison-card ul{
  display:grid;
  gap:16px;
  list-style:none;
}

.comparison-card li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:rgba(255,255,255,.64);
  font-size:.95rem;
  line-height:1.6;
}

.negative li i{
  color:#f87171;
  margin-top:4px;
}

.positive li i{
  color:#22c55e;
  margin-top:4px;
}

.comparison-center{
  display:grid;
  place-items:center;
}

.comparison-circle{
  width:90px;
  height:90px;
  display:grid;
  place-items:center;
  border:1px solid rgba(196,181,253,.32);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 0%,rgba(147,51,234,.24),transparent 7rem),
    rgba(0,0,0,.72);
  color:#fff;
  font-size:1.15rem;
  font-weight:900;
  box-shadow:
    0 0 50px rgba(124,58,237,.3),
    inset 0 0 24px rgba(255,255,255,.035);
  animation:vsPulse 2.4s ease-in-out infinite;
}

/* ANIMAÇÕES BLOCO 2 */

@keyframes marketBarFloat{
  0%,100%{
    transform:translateY(0);
    opacity:.78;
  }

  50%{
    transform:translateY(-10px);
    opacity:1;
  }
}

@keyframes marketLinePulse{
  0%,100%{
    opacity:.35;
  }

  50%{
    opacity:1;
  }
}

@keyframes marketProgress{
  0%,100%{
    transform:translateX(-18%);
  }

  50%{
    transform:translateX(48%);
  }
}

@keyframes vsPulse{
  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.07);
  }
}

/* RESPONSIVO BLOCO 2 */

@media(max-width:1080px){
  .market-layout,
  .market-comparison{
    grid-template-columns:1fr;
  }

  .comparison-center{
    order:2;
  }

  .comparison-card.positive{
    order:3;
  }

  .comparison-circle{
    width:76px;
    height:76px;
  }
}

@media(max-width:680px){
  .commerce-market-section{
    padding:90px 0;
  }

  .commerce-market-container{
    width:min(100% - 30px,var(--max));
  }

  .market-header{
    text-align:left;
    margin-bottom:44px;
  }

  .market-main-card{
    min-height:auto;
    padding:28px;
  }

  .market-main-card::before{
    display:none;
  }

  .market-main-top{
    flex-direction:column;
  }

  .market-graph{
    min-height:280px;
  }

  .market-bar{
    width:30px;
  }

  .market-stats{
    grid-template-columns:1fr;
  }

  .market-stat-card{
    min-height:250px;
  }

  .comparison-card{
    min-height:auto;
    padding:28px;
  }
}


/* =====================================================
   BLOCO 3 — COMPARATIVO DE OPERAÇÃO
===================================================== */

.commerce-compare-section{
  position:relative;
  padding:130px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 10%,rgba(124,58,237,.16),transparent 32rem),
    radial-gradient(circle at 85% 80%,rgba(34,197,94,.10),transparent 28rem),
    linear-gradient(180deg,#050505,#08080d 50%,#050505);
}

.compare-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.15;
  mask-image:radial-gradient(circle at 50% 40%,black,transparent 78%);
}

.compare-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(42px);
  pointer-events:none;
}

.compare-glow-one{
  width:650px;
  height:650px;
  left:-260px;
  top:80px;
  background:radial-gradient(circle,rgba(147,51,234,.25),transparent 70%);
}

.compare-glow-two{
  width:540px;
  height:540px;
  right:-220px;
  bottom:60px;
  background:radial-gradient(circle,rgba(34,197,94,.13),transparent 70%);
}

.compare-container{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
}

.compare-header{
  max-width:930px;
  margin:0 auto 68px;
  text-align:center;
}

.compare-header h2{
  margin-bottom:22px;
  font-size:clamp(2.45rem,5vw,5rem);
  line-height:.95;
  letter-spacing:-.07em;
}

.compare-header h2 span{
  display:block;
  color:transparent;
  background:linear-gradient(135deg,#fff 10%,#c4b5fd 45%,#22c55e 95%);
  -webkit-background-clip:text;
  background-clip:text;
}

.compare-header p{
  max-width:780px;
  margin:0 auto;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.85;
}

.compare-layout{
  display:grid;
  grid-template-columns:1fr 160px 1fr;
  gap:20px;
  align-items:center;
}

.compare-panel{
  position:relative;
  min-height:720px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:36px;
  background:
    radial-gradient(circle at 30% 0%,rgba(147,51,234,.20),transparent 24rem),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  backdrop-filter:blur(22px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.compare-before{
  background:
    radial-gradient(circle at 30% 0%,rgba(239,68,68,.16),transparent 24rem),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
}

.compare-after{
  border-color:rgba(34,197,94,.22);
  background:
    radial-gradient(circle at 30% 0%,rgba(34,197,94,.16),transparent 24rem),
    radial-gradient(circle at 80% 80%,rgba(147,51,234,.18),transparent 24rem),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
}

.compare-panel-top{
  height:64px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(0,0,0,.24);
}

.compare-panel-top small{
  color:rgba(255,255,255,.48);
  font-size:.76rem;
  font-weight:900;
}

.compare-panel-body{
  padding:34px;
}

.compare-status{
  width:max-content;
  margin-bottom:26px;
  padding:9px 13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.compare-status.danger{
  border:1px solid rgba(239,68,68,.24);
  background:rgba(239,68,68,.10);
  color:#fecaca;
}

.compare-status.success{
  border:1px solid rgba(34,197,94,.26);
  background:rgba(34,197,94,.10);
  color:#bbf7d0;
}

.compare-panel h3{
  margin-bottom:20px;
  font-size:clamp(2.2rem,4vw,4.5rem);
  line-height:1;
  letter-spacing:-.065em;
}

.compare-panel p{
  margin-bottom:30px;
  color:var(--muted);
  line-height:1.82;
}

.pain-list,
.gain-list{
  display:grid;
  gap:14px;
  margin-bottom:34px;
}

.pain-item,
.gain-item{
  padding:16px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:rgba(255,255,255,.04);
}

.pain-item i{
  color:#f87171;
  margin-top:3px;
}

.gain-item i{
  color:#22c55e;
  margin-top:3px;
}

.pain-item span,
.gain-item span{
  color:rgba(255,255,255,.64);
  font-size:.9rem;
  line-height:1.55;
}

.compare-mini-dashboard{
  position:relative;
  min-height:170px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:26px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    rgba(0,0,0,.32);
  background-size:36px 36px;
}

.broken-line{
  position:absolute;
  left:28px;
  right:28px;
  top:54px;
  height:18px;
  border-radius:999px;
  background:rgba(239,68,68,.18);
}

.broken-line.small{
  top:92px;
  width:48%;
  right:auto;
}

.broken-alert,
.working-alert{
  position:absolute;
  left:28px;
  bottom:24px;
  padding:11px 14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:900;
}

.broken-alert{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.24);
  color:#fecaca;
}

.working-chart{
  position:absolute;
  inset:28px 28px 72px;
  display:flex;
  align-items:end;
  gap:12px;
}

.working-chart span{
  flex:1;
  border-radius:14px 14px 6px 6px;
  background:linear-gradient(180deg,#22c55e,#7c3aed);
  box-shadow:0 0 26px rgba(124,58,237,.22);
  animation:workingBars 3.8s ease-in-out infinite;
}

.working-chart span:nth-child(2){
  animation-delay:-.6s;
}

.working-chart span:nth-child(3){
  animation-delay:-1.2s;
}

.working-chart span:nth-child(4){
  animation-delay:-1.8s;
}

.working-alert{
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.24);
  color:#bbf7d0;
}

.compare-transform{
  display:grid;
  place-items:center;
}

.transform-core{
  position:relative;
  width:150px;
  min-height:220px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
  text-align:center;
  border:1px solid rgba(196,181,253,.25);
  border-radius:34px;
  background:
    radial-gradient(circle at 50% 0%,rgba(147,51,234,.24),transparent 10rem),
    rgba(0,0,0,.62);
  backdrop-filter:blur(18px);
  box-shadow:
    0 0 70px rgba(124,58,237,.26),
    inset 0 0 28px rgba(255,255,255,.035);
}

.transform-ring{
  position:absolute;
  width:190px;
  height:190px;
  border:1px solid rgba(196,181,253,.14);
  border-radius:50%;
  animation:compareRotate 12s linear infinite;
}

.transform-core i{
  position:relative;
  z-index:2;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow:0 18px 48px rgba(124,58,237,.32);
}

.transform-core strong{
  position:relative;
  z-index:2;
  font-size:.95rem;
  line-height:1.2;
}

.transform-core span{
  position:relative;
  z-index:2;
  color:rgba(255,255,255,.48);
  font-size:.74rem;
  line-height:1.4;
}

/* ANIMAÇÕES BLOCO 3 */

@keyframes workingBars{
  0%,100%{
    opacity:.75;
    transform:translateY(0);
  }

  50%{
    opacity:1;
    transform:translateY(-8px);
  }
}

@keyframes compareRotate{
  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}

/* RESPONSIVO BLOCO 3 */

@media(max-width:1080px){
  .compare-layout{
    grid-template-columns:1fr;
  }

  .compare-transform{
    min-height:180px;
  }

  .transform-core{
    width:min(100%,320px);
    min-height:160px;
  }

  .transform-ring{
    width:250px;
    height:250px;
  }
}

@media(max-width:680px){
  .commerce-compare-section{
    padding:90px 0;
  }

  .compare-container{
    width:min(100% - 30px,var(--max));
  }

  .compare-header{
    text-align:left;
    margin-bottom:44px;
  }

  .compare-panel{
    min-height:auto;
    border-radius:30px;
  }

  .compare-panel-body{
    padding:28px;
  }

  .compare-status{
    white-space:normal;
  }

  .transform-ring{
    display:none;
  }
}

/* =====================================================
   BLOCO 4 — PROCESSO
===================================================== */

.commerce-process-section{
  position:relative;
  padding:130px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 10%,rgba(124,58,237,.14),transparent 30rem),
    radial-gradient(circle at 85% 80%,rgba(34,197,94,.08),transparent 26rem),
    linear-gradient(180deg,#050505,#07070b 50%,#050505);
}

.process-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.16;
  mask-image:radial-gradient(circle at center,black,transparent 78%);
}

.process-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(42px);
}

.process-glow-one{
  width:620px;
  height:620px;
  left:-240px;
  top:120px;
  background:radial-gradient(circle,rgba(147,51,234,.26),transparent 70%);
}

.process-glow-two{
  width:480px;
  height:480px;
  right:-180px;
  bottom:80px;
  background:radial-gradient(circle,rgba(34,197,94,.10),transparent 70%);
}

.process-container{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
}

.process-header{
  max-width:920px;
  margin:0 auto 80px;
  text-align:center;
}

.process-header h2{
  margin-bottom:22px;
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:.95;
  letter-spacing:-.07em;
}

.process-header h2 span{
  display:block;
  color:transparent;
  background:linear-gradient(135deg,#fff 10%,#c4b5fd 45%,#22c55e 95%);
  -webkit-background-clip:text;
  background-clip:text;
}

.process-header p{
  max-width:760px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.85;
}

.process-timeline{
  position:relative;
  display:grid;
  gap:40px;
  margin-bottom:90px;
}

.timeline-line{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(124,58,237,.45),rgba(34,197,94,.35),transparent);
}

.process-card{
  position:relative;
  width:calc(50% - 60px);
}

.process-card.left{
  justify-self:start;
}

.process-card.right{
  justify-self:end;
}

.process-number{
  position:absolute;
  top:26px;
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  box-shadow:0 20px 50px rgba(124,58,237,.34);
  font-size:1.1rem;
  font-weight:900;
  z-index:3;
}

.process-card.left .process-number{
  right:-95px;
}

.process-card.right .process-number{
  left:-95px;
}

.process-card-content{
  position:relative;
  overflow:hidden;
  padding:34px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:34px;
  background:
    radial-gradient(circle at 20% 0%,rgba(147,51,234,.18),transparent 18rem),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  backdrop-filter:blur(20px);
  box-shadow:0 30px 100px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.03);
  transition:.35s ease;
}

.process-card-content:hover{
  transform:translateY(-8px);
  border-color:rgba(196,181,253,.24);
}

.process-card-content::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 40%);
  pointer-events:none;
}

.process-icon{
  width:62px;
  height:62px;
  margin-bottom:24px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:rgba(124,58,237,.14);
  border:1px solid rgba(124,58,237,.24);
  color:var(--purpleLight);
  font-size:1.2rem;
  box-shadow:0 0 26px rgba(124,58,237,.16);
}

.process-card-content span{
  display:block;
  margin-bottom:14px;
  color:var(--purpleLight);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.process-card-content h3{
  margin-bottom:18px;
  font-size:clamp(1.8rem,3vw,3rem);
  line-height:1;
  letter-spacing:-.05em;
}

.process-card-content p{
  margin-bottom:26px;
  color:rgba(255,255,255,.62);
  line-height:1.8;
}

.process-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.process-tags small{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.68);
  font-size:.72rem;
  font-weight:800;
}

.process-dashboard{
  position:relative;
  overflow:hidden;
  padding:50px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  border:1px solid rgba(147,51,234,.24);
  border-radius:40px;
  background:
    radial-gradient(circle at 20% 0%,rgba(147,51,234,.22),transparent 22rem),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  backdrop-filter:blur(22px);
  box-shadow:0 40px 120px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.04);
}

.dashboard-left span{
  display:block;
  margin-bottom:14px;
  color:var(--purpleLight);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.dashboard-left h3{
  margin-bottom:20px;
  font-size:clamp(2rem,4vw,4rem);
  line-height:1;
  letter-spacing:-.06em;
}

.dashboard-left p{
  max-width:560px;
  color:rgba(255,255,255,.62);
  line-height:1.85;
}

.dashboard-right{
  display:grid;
  gap:24px;
}

.dashboard-chart{
  min-height:220px;
  padding:28px;
  display:flex;
  align-items:end;
  gap:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    rgba(0,0,0,.28);
  background-size:42px 42px;
}

.dashboard-chart span{
  flex:1;
  border-radius:16px 16px 6px 6px;
  background:linear-gradient(180deg,#22c55e,#7c3aed);
  box-shadow:0 0 26px rgba(124,58,237,.24);
  animation:dashboardBars 3.5s ease-in-out infinite;
}

.dashboard-chart span:nth-child(2){animation-delay:-.5s;}
.dashboard-chart span:nth-child(3){animation-delay:-1s;}
.dashboard-chart span:nth-child(4){animation-delay:-1.5s;}
.dashboard-chart span:nth-child(5){animation-delay:-2s;}

.dashboard-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.dashboard-mini-card{
  padding:22px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:rgba(255,255,255,.04);
}

.dashboard-mini-card strong{
  display:block;
  margin-bottom:8px;
  font-size:1.15rem;
}

.dashboard-mini-card span{
  color:rgba(255,255,255,.58);
  font-size:.86rem;
  line-height:1.5;
}

@keyframes dashboardBars{
  0%,100%{
    opacity:.78;
    transform:translateY(0);
  }

  50%{
    opacity:1;
    transform:translateY(-8px);
  }
}

/* RESPONSIVO BLOCO 4 */

@media(max-width:1080px){
  .timeline-line{
    display:none;
  }

  .process-card{
    width:100%;
  }

  .process-number{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto;
    margin-bottom:20px;
  }

  .process-dashboard{
    grid-template-columns:1fr;
  }
}

@media(max-width:680px){
  .commerce-process-section{
    padding:90px 0;
  }

  .process-container{
    width:min(100% - 30px,var(--max));
  }

  .process-header{
    text-align:left;
    margin-bottom:50px;
  }

  .process-card-content{
    padding:28px;
    border-radius:30px;
  }

  .process-dashboard{
    padding:30px;
    border-radius:30px;
  }

  .dashboard-info{
    grid-template-columns:1fr;
  }

  .dashboard-chart{
    min-height:180px;
  }
}

/* =====================================================
   BLOCO 5 — CASES EM PRODUÇÃO
===================================================== */

.commerce-cases-section{
  position:relative;
  padding:130px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 10%,rgba(124,58,237,.16),transparent 32rem),
    radial-gradient(circle at 85% 80%,rgba(245,158,11,.10),transparent 28rem),
    linear-gradient(180deg,#050505,#08080d 50%,#050505);
}

.cases-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.14;
  mask-image:radial-gradient(circle at 50% 40%,black,transparent 78%);
}

.cases-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(42px);
  pointer-events:none;
}

.cases-glow-one{
  width:650px;
  height:650px;
  left:-260px;
  top:80px;
  background:radial-gradient(circle,rgba(147,51,234,.26),transparent 70%);
}

.cases-glow-two{
  width:540px;
  height:540px;
  right:-220px;
  bottom:80px;
  background:radial-gradient(circle,rgba(245,158,11,.12),transparent 70%);
}

.cases-container{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
}

.cases-header{
  max-width:920px;
  margin:0 auto 68px;
  text-align:center;
}

.cases-header h2{
  margin-bottom:22px;
  font-size:clamp(2.45rem,5vw,5rem);
  line-height:.95;
  letter-spacing:-.07em;
}

.cases-header h2 span{
  display:block;
  color:transparent;
  background:linear-gradient(135deg,#fff 10%,#c4b5fd 45%,#9333ea 95%);
  -webkit-background-clip:text;
  background-clip:text;
}

.cases-header p{
  max-width:780px;
  margin:0 auto;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.85;
}

.cases-showcase{
  display:grid;
  gap:30px;
}

.ecommerce-case-card{
  position:relative;
  min-height:640px;
  padding:46px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:46px;
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:38px;
  background:
    radial-gradient(circle at 20% 0%,rgba(147,51,234,.18),transparent 24rem),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  backdrop-filter:blur(22px);
  box-shadow:0 40px 120px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.04);
}

.ecommerce-case-card::before{
  content:"";
  position:absolute;
  inset:28px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:30px;
  pointer-events:none;
}

.dragon-case{
  background:
    radial-gradient(circle at 20% 0%,rgba(239,68,68,.16),transparent 26rem),
    radial-gradient(circle at 85% 80%,rgba(124,58,237,.22),transparent 26rem),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
}

.construfer-case{
  background:
    radial-gradient(circle at 20% 0%,rgba(245,158,11,.16),transparent 26rem),
    radial-gradient(circle at 85% 80%,rgba(124,58,237,.22),transparent 26rem),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
}

.case-info{
  position:relative;
  z-index:3;
}

.case-status{
  width:max-content;
  margin-bottom:22px;
  padding:9px 13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(34,197,94,.26);
  border-radius:999px;
  background:rgba(34,197,94,.10);
  color:#bbf7d0;
  font-size:.74rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.case-status i{
  font-size:.45rem;
}

.case-info > span{
  display:block;
  margin-bottom:16px;
  color:var(--purpleLight);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.case-info h3{
  margin-bottom:22px;
  font-size:clamp(2.2rem,4vw,4.6rem);
  line-height:.95;
  letter-spacing:-.07em;
}

.case-info p{
  max-width:620px;
  margin-bottom:28px;
  color:var(--muted);
  line-height:1.82;
}

.case-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.case-tags small{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.68);
  font-size:.72rem;
  font-weight:800;
}

.case-visual{
  position:relative;
  z-index:3;
  min-height:520px;
}

.case-browser{
  position:absolute;
  inset:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:34px;
  background:
    radial-gradient(circle at 30% 0%,rgba(147,51,234,.22),transparent 20rem),
    rgba(0,0,0,.42);
  backdrop-filter:blur(20px);
  box-shadow:0 34px 110px rgba(0,0,0,.46), 0 0 70px rgba(124,58,237,.12);
  animation:caseMockupFloat 6s ease-in-out infinite;
}

.case-browser-top{
  height:62px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(0,0,0,.24);
}

.case-browser-top small{
  color:rgba(255,255,255,.48);
  font-size:.76rem;
  font-weight:900;
}

.case-browser-body{
  padding:28px;
}

.dragon-hero-mini,
.construfer-hero-mini{
  min-height:160px;
  padding:24px;
  margin-bottom:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  overflow:hidden;
}

.dragon-hero-mini{
  background:
    radial-gradient(circle at 80% 50%,rgba(239,68,68,.25),transparent 16rem),
    linear-gradient(135deg,rgba(239,68,68,.10),rgba(124,58,237,.10));
}

.construfer-hero-mini{
  background:
    radial-gradient(circle at 80% 50%,rgba(245,158,11,.26),transparent 16rem),
    linear-gradient(135deg,rgba(245,158,11,.10),rgba(124,58,237,.10));
}

.dragon-hero-mini strong,
.construfer-hero-mini strong{
  display:block;
  margin-bottom:10px;
  font-size:1.8rem;
  letter-spacing:-.05em;
}

.dragon-hero-mini span,
.construfer-hero-mini span{
  color:rgba(255,255,255,.56);
  font-size:.9rem;
  line-height:1.5;
}

.dragon-hero-mini i,
.construfer-hero-mini i{
  font-size:3.8rem;
  color:rgba(255,255,255,.86);
  filter:drop-shadow(0 0 26px rgba(124,58,237,.4));
  animation:caseIconFloat 4s ease-in-out infinite;
}

.case-product-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:18px;
}

.case-product{
  min-height:130px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  background:rgba(255,255,255,.04);
}

.case-product.active{
  border-color:rgba(239,68,68,.28);
  background:
    radial-gradient(circle at 50% 0%,rgba(239,68,68,.18),transparent 9rem),
    rgba(255,255,255,.04);
}

.case-product i{
  font-size:2.1rem;
  color:var(--purpleLight);
}

.construction-list{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}

.construction-item{
  padding:16px;
  display:flex;
  gap:14px;
  align-items:center;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(255,255,255,.04);
}

.construction-item i{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(245,158,11,.12);
  color:#fbbf24;
}

.construction-item strong{
  display:block;
  margin-bottom:5px;
  font-size:.95rem;
}

.construction-item span{
  color:rgba(255,255,255,.52);
  font-size:.78rem;
}

.case-checkout-card{
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(0,0,0,.38);
}

.case-checkout-card span{
  display:block;
  margin-bottom:6px;
  color:rgba(255,255,255,.48);
  font-size:.74rem;
  font-weight:800;
}

.case-checkout-card strong{
  font-size:1rem;
}

.case-checkout-card button{
  min-height:44px;
  padding:0 18px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

.case-float-card{
  position:absolute;
  z-index:5;
  min-width:220px;
  padding:16px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:22px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(18px);
  box-shadow:0 26px 80px rgba(0,0,0,.44);
  animation:caseFloatCard 5s ease-in-out infinite;
}

.case-float-card i{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:#fff;
}

.case-float-card strong{
  display:block;
  margin-bottom:5px;
  font-size:.92rem;
}

.case-float-card span{
  color:rgba(255,255,255,.52);
  font-size:.76rem;
}

.dragon-float-one,
.construfer-float-one{
  left:-10px;
  top:70px;
}

.dragon-float-two,
.construfer-float-two{
  right:-16px;
  bottom:70px;
  animation-delay:-1.6s;
}

@keyframes caseMockupFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

@keyframes caseIconFloat{
  0%,100%{transform:translateY(0) rotate(0);}
  50%{transform:translateY(-10px) rotate(-4deg);}
}

@keyframes caseFloatCard{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}

/* RESPONSIVO BLOCO 5 */

@media(max-width:1080px){
  .ecommerce-case-card{
    grid-template-columns:1fr;
  }

  .case-visual{
    min-height:560px;
  }
}

@media(max-width:680px){
  .commerce-cases-section{
    padding:90px 0;
  }

  .cases-container{
    width:min(100% - 30px,var(--max));
  }

  .cases-header{
    text-align:left;
    margin-bottom:44px;
  }

  .ecommerce-case-card{
    padding:28px;
    border-radius:30px;
  }

  .ecommerce-case-card::before{
    display:none;
  }

  .case-visual{
    min-height:520px;
  }

  .case-browser{
    inset:0;
  }

  .case-browser-body{
    padding:18px;
  }

  .dragon-hero-mini,
  .construfer-hero-mini{
    flex-direction:column;
    align-items:flex-start;
  }

  .case-product-row{
    grid-template-columns:1fr;
  }

  .case-float-card{
    display:none;
  }

  .case-checkout-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .case-checkout-card button{
    width:100%;
  }
}

/* =====================================================
   BLOCO 6 — RECURSOS DO E-COMMERCE
===================================================== */

.commerce-features-section{
  position:relative;
  padding:130px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%,rgba(124,58,237,.16),transparent 32rem),
    radial-gradient(circle at 90% 75%,rgba(34,197,94,.09),transparent 28rem),
    linear-gradient(180deg,#050505,#08080d 50%,#050505);
}

.features-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.14;
  mask-image:radial-gradient(circle at 50% 40%,black,transparent 78%);
}

.features-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(42px);
  pointer-events:none;
}

.features-glow-one{
  width:650px;
  height:650px;
  left:-260px;
  top:80px;
  background:radial-gradient(circle,rgba(147,51,234,.26),transparent 70%);
}

.features-glow-two{
  width:540px;
  height:540px;
  right:-220px;
  bottom:80px;
  background:radial-gradient(circle,rgba(34,197,94,.12),transparent 70%);
}

.features-container{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
}

.features-header{
  max-width:920px;
  margin:0 auto 68px;
  text-align:center;
}

.features-header h2{
  margin-bottom:22px;
  font-size:clamp(2.45rem,5vw,5rem);
  line-height:.95;
  letter-spacing:-.07em;
}

.features-header h2 span{
  display:block;
  color:transparent;
  background:linear-gradient(135deg,#fff 10%,#c4b5fd 45%,#22c55e 95%);
  -webkit-background-clip:text;
  background-clip:text;
}

.features-header p{
  max-width:780px;
  margin:0 auto;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.85;
}

.features-layout{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:20px;
  align-items:stretch;
}

.features-main-panel{
  position:relative;
  min-height:720px;
  overflow:hidden;
  border:1px solid rgba(147,51,234,.30);
  border-radius:38px;
  background:
    radial-gradient(circle at 30% 0%,rgba(147,51,234,.26),transparent 25rem),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  backdrop-filter:blur(22px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.46),
    0 0 90px rgba(124,58,237,.13),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.features-panel-top{
  height:64px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(0,0,0,.24);
}

.features-panel-top small{
  color:rgba(255,255,255,.48);
  font-size:.76rem;
  font-weight:900;
}

.features-panel-body{
  position:relative;
  height:656px;
}

.features-center-card{
  position:absolute;
  left:50%;
  top:50%;
  width:230px;
  height:230px;
  transform:translate(-50%,-50%);
  z-index:5;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:1px solid rgba(196,181,253,.30);
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 0%,rgba(147,51,234,.26),transparent 12rem),
    rgba(0,0,0,.62);
  box-shadow:
    0 0 90px rgba(124,58,237,.28),
    inset 0 0 34px rgba(255,255,255,.035);
}

.features-center-glow{
  position:absolute;
  width:160px;
  height:160px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(147,51,234,.45),transparent 70%);
  filter:blur(20px);
  z-index:-1;
}

.features-center-card i{
  margin-bottom:16px;
  color:var(--purpleLight);
  font-size:2.2rem;
  animation:featureCenterPulse 3.5s ease-in-out infinite;
}

.features-center-card strong{
  margin-bottom:8px;
  font-size:1.15rem;
}

.features-center-card span{
  color:rgba(255,255,255,.50);
  font-size:.78rem;
  font-weight:800;
}

.feature-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid rgba(196,181,253,.12);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.orbit-a{
  width:390px;
  height:390px;
  animation:featureOrbitRotate 16s linear infinite;
}

.orbit-b{
  width:520px;
  height:520px;
  animation:featureOrbitReverse 22s linear infinite;
}

.feature-node{
  position:absolute;
  z-index:6;
  width:150px;
  min-height:118px;
  padding:18px;
  display:grid;
  place-items:center;
  text-align:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(18px);
  box-shadow:0 24px 80px rgba(0,0,0,.36);
  animation:featureNodeFloat 5s ease-in-out infinite;
}

.feature-node i{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:rgba(147,51,234,.14);
  color:var(--purpleLight);
  font-size:1.05rem;
}

.feature-node strong{
  font-size:.86rem;
}

.node-one{
  left:60px;
  top:88px;
}

.node-two{
  right:60px;
  top:96px;
  animation-delay:-.8s;
}

.node-three{
  left:70px;
  bottom:108px;
  animation-delay:-1.6s;
}

.node-four{
  right:70px;
  bottom:104px;
  animation-delay:-2.4s;
}

.node-five{
  left:50%;
  top:32px;
  transform:translateX(-50%);
  animation-delay:-3.2s;
}

.node-six{
  left:50%;
  bottom:38px;
  transform:translateX(-50%);
  animation-delay:-4s;
}

.features-list{
  display:grid;
  gap:14px;
}

.feature-item{
  min-height:134px;
  padding:24px;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:18px;
  align-items:flex-start;
  border:1px solid rgba(255,255,255,.085);
  border-radius:26px;
  background:
    radial-gradient(circle at 20% 0%,rgba(147,51,234,.10),transparent 16rem),
    rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
  transition:.32s ease;
}

.feature-item:hover{
  transform:translateX(8px);
  border-color:rgba(196,181,253,.28);
  box-shadow:0 24px 80px rgba(124,58,237,.13);
}

.feature-item.active{
  border-color:rgba(34,197,94,.24);
  background:
    radial-gradient(circle at 20% 0%,rgba(34,197,94,.12),transparent 16rem),
    rgba(255,255,255,.045);
}

.feature-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(147,51,234,.30);
  border-radius:18px;
  background:rgba(147,51,234,.12);
  color:var(--purpleLight);
  font-size:1.12rem;
  box-shadow:0 0 26px rgba(124,58,237,.16);
}

.feature-item.active .feature-icon{
  border-color:rgba(34,197,94,.28);
  background:rgba(34,197,94,.10);
  color:#bbf7d0;
}

.feature-item h3{
  margin-bottom:8px;
  font-size:1.12rem;
  letter-spacing:-.03em;
}

.feature-item p{
  color:rgba(255,255,255,.58);
  font-size:.9rem;
  line-height:1.65;
}

/* =====================================================
   BLOCO 7 — INVESTIMENTO X RETORNO
===================================================== */

.commerce-roi-section{
  position:relative;
  padding:130px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%,rgba(124,58,237,.16),transparent 32rem),
    radial-gradient(circle at 88% 78%,rgba(34,197,94,.10),transparent 28rem),
    linear-gradient(180deg,#050505,#08080d 50%,#050505);
}

.roi-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.14;
  mask-image:radial-gradient(circle at 50% 40%,black,transparent 78%);
}

.roi-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(42px);
  pointer-events:none;
}

.roi-glow-one{
  width:650px;
  height:650px;
  left:-260px;
  top:80px;
  background:radial-gradient(circle,rgba(147,51,234,.26),transparent 70%);
}

.roi-glow-two{
  width:540px;
  height:540px;
  right:-220px;
  bottom:80px;
  background:radial-gradient(circle,rgba(34,197,94,.12),transparent 70%);
}

.roi-container{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
}

.roi-header{
  max-width:920px;
  margin:0 auto 68px;
  text-align:center;
}

.roi-header h2{
  margin-bottom:22px;
  font-size:clamp(2.45rem,5vw,5rem);
  line-height:.95;
  letter-spacing:-.07em;
}

.roi-header h2 span{
  display:block;
  color:transparent;
  background:linear-gradient(135deg,#fff 10%,#c4b5fd 45%,#22c55e 95%);
  -webkit-background-clip:text;
  background-clip:text;
}

.roi-header p{
  max-width:780px;
  margin:0 auto;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.85;
}

.roi-layout{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:20px;
  align-items:stretch;
}

.roi-main-card{
  position:relative;
  min-height:640px;
  padding:34px;
  overflow:hidden;
  border:1px solid rgba(147,51,234,.30);
  border-radius:38px;
  background:
    radial-gradient(circle at 30% 0%,rgba(147,51,234,.26),transparent 25rem),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  backdrop-filter:blur(22px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.46),
    0 0 90px rgba(124,58,237,.13),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.roi-main-card::before{
  content:"";
  position:absolute;
  inset:28px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:30px;
  pointer-events:none;
}

.roi-card-top{
  position:relative;
  z-index:3;
  margin-bottom:30px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.roi-card-top span{
  display:block;
  margin-bottom:8px;
  color:rgba(255,255,255,.48);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.roi-card-top strong{
  font-size:1.45rem;
  letter-spacing:-.04em;
}

.roi-live-badge{
  padding:9px 13px;
  border:1px solid rgba(34,197,94,.26);
  border-radius:999px;
  background:rgba(34,197,94,.10);
  color:#bbf7d0;
  font-size:.74rem;
  font-weight:900;
  white-space:nowrap;
}

.roi-chart-area{
  position:relative;
  z-index:3;
  min-height:360px;
  margin-bottom:30px;
  padding:28px 26px 34px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
  align-items:end;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:30px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    rgba(0,0,0,.32);
  background-size:42px 42px;
}

.roi-line{
  position:absolute;
  left:9%;
  right:8%;
  top:46%;
  height:2px;
  background:linear-gradient(90deg,transparent,#c4b5fd,#22c55e,transparent);
  transform:rotate(-16deg);
  box-shadow:0 0 26px rgba(196,181,253,.65);
  animation:roiLinePulse 2.8s ease-in-out infinite;
}

.roi-column{
  position:relative;
  z-index:3;
  height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

.roi-column span{
  width:100%;
  max-width:58px;
  border-radius:18px 18px 8px 8px;
  background:linear-gradient(180deg,#22c55e,#7c3aed);
  box-shadow:0 0 32px rgba(124,58,237,.24);
  animation:roiBarMove 4s ease-in-out infinite;
}

.roi-column small{
  color:rgba(255,255,255,.56);
  font-size:.72rem;
  font-weight:900;
  text-align:center;
}

.col-two span{animation-delay:-.4s;}
.col-three span{animation-delay:-.8s;}
.col-four span{animation-delay:-1.2s;}
.col-five span{animation-delay:-1.6s;}

.roi-insight{
  position:relative;
  z-index:3;
  padding:22px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  border:1px solid rgba(34,197,94,.20);
  border-radius:26px;
  background:
    radial-gradient(circle at 20% 0%,rgba(34,197,94,.12),transparent 16rem),
    rgba(255,255,255,.04);
}

.roi-insight i{
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(34,197,94,.12);
  color:#bbf7d0;
  border:1px solid rgba(34,197,94,.24);
}

.roi-insight strong{
  display:block;
  margin-bottom:8px;
  font-size:1rem;
}

.roi-insight span{
  color:rgba(255,255,255,.58);
  line-height:1.6;
  font-size:.9rem;
}

.roi-side{
  display:grid;
  gap:14px;
}

.roi-metric-card{
  min-height:148px;
  padding:24px;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:18px;
  align-items:flex-start;
  border:1px solid rgba(255,255,255,.085);
  border-radius:26px;
  background:
    radial-gradient(circle at 20% 0%,rgba(147,51,234,.10),transparent 16rem),
    rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
  transition:.32s ease;
}

.roi-metric-card:hover{
  transform:translateX(8px);
  border-color:rgba(196,181,253,.28);
  box-shadow:0 24px 80px rgba(124,58,237,.13);
}

.roi-metric-card.active{
  border-color:rgba(34,197,94,.24);
  background:
    radial-gradient(circle at 20% 0%,rgba(34,197,94,.12),transparent 16rem),
    rgba(255,255,255,.045);
}

.roi-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(147,51,234,.30);
  border-radius:18px;
  background:rgba(147,51,234,.12);
  color:var(--purpleLight);
  font-size:1.12rem;
  box-shadow:0 0 26px rgba(124,58,237,.16);
}

.roi-metric-card.active .roi-icon{
  border-color:rgba(34,197,94,.28);
  background:rgba(34,197,94,.10);
  color:#bbf7d0;
}

.roi-metric-card strong{
  display:block;
  margin-bottom:8px;
  font-size:1.12rem;
  letter-spacing:-.03em;
}

.roi-metric-card p{
  color:rgba(255,255,255,.58);
  font-size:.9rem;
  line-height:1.65;
}

.roi-bottom-comparison{
  margin-top:28px;
  display:grid;
  grid-template-columns:1fr 100px 1fr;
  gap:18px;
  align-items:center;
}

.roi-bottom-card{
  min-height:260px;
  padding:34px;
  border:1px solid rgba(255,255,255,.085);
  border-radius:32px;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(18px);
}

.roi-bottom-card.weak{
  background:
    radial-gradient(circle at 20% 0%,rgba(239,68,68,.11),transparent 16rem),
    rgba(255,255,255,.04);
}

.roi-bottom-card.strong{
  border-color:rgba(34,197,94,.22);
  background:
    radial-gradient(circle at 20% 0%,rgba(34,197,94,.13),transparent 16rem),
    rgba(255,255,255,.04);
}

.roi-bottom-card span{
  display:block;
  margin-bottom:14px;
  color:var(--purpleLight);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.roi-bottom-card h3{
  margin-bottom:16px;
  font-size:clamp(1.9rem,3vw,3.3rem);
  line-height:1;
  letter-spacing:-.05em;
}

.roi-bottom-card p{
  color:rgba(255,255,255,.60);
  line-height:1.75;
}

.roi-bottom-center{
  display:grid;
  place-items:center;
}

.roi-vs-circle{
  width:94px;
  height:94px;
  display:grid;
  place-items:center;
  border:1px solid rgba(196,181,253,.28);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 0%,rgba(147,51,234,.24),transparent 7rem),
    rgba(0,0,0,.68);
  font-weight:900;
  box-shadow:
    0 0 60px rgba(124,58,237,.32),
    inset 0 0 24px rgba(255,255,255,.035);
  animation:roiPulse 2.5s ease-in-out infinite;
}

/* ANIMAÇÕES */

@keyframes featureCenterPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}

@keyframes featureOrbitRotate{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}

@keyframes featureOrbitReverse{
  from{transform:translate(-50%,-50%) rotate(360deg);}
  to{transform:translate(-50%,-50%) rotate(0deg);}
}

@keyframes featureNodeFloat{
  0%,100%{margin-top:0;}
  50%{margin-top:-12px;}
}

@keyframes roiLinePulse{
  0%,100%{opacity:.35;}
  50%{opacity:1;}
}

@keyframes roiBarMove{
  0%,100%{opacity:.78;transform:translateY(0);}
  50%{opacity:1;transform:translateY(-8px);}
}

@keyframes roiPulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.07);}
}

/* RESPONSIVO BLOCOS 6 E 7 */

@media(max-width:1080px){
  .features-layout,
  .roi-layout,
  .roi-bottom-comparison{
    grid-template-columns:1fr;
  }

  .roi-bottom-center{
    order:2;
  }

  .roi-bottom-card.strong{
    order:3;
  }
}

@media(max-width:680px){
  .commerce-features-section,
  .commerce-roi-section{
    padding:90px 0;
  }

  .features-container,
  .roi-container{
    width:min(100% - 30px,var(--max));
  }

  .features-header,
  .roi-header{
    text-align:left;
    margin-bottom:44px;
  }

  .features-main-panel{
    min-height:620px;
    border-radius:30px;
  }

  .features-panel-body{
    height:556px;
  }

  .features-center-card{
    width:170px;
    height:170px;
    border-radius:32px;
  }

  .features-center-card span{
    display:none;
  }

  .feature-orbit{
    display:none;
  }

  .feature-node{
    width:125px;
    min-height:100px;
    padding:14px;
  }

  .feature-node strong{
    font-size:.76rem;
  }

  .node-one{
    left:18px;
    top:86px;
  }

  .node-two{
    right:18px;
    top:96px;
  }

  .node-three{
    left:18px;
    bottom:96px;
  }

  .node-four{
    right:18px;
    bottom:88px;
  }

  .node-five,
  .node-six{
    display:none;
  }

  .feature-item,
  .roi-metric-card{
    grid-template-columns:1fr;
  }

  .feature-item:hover,
  .roi-metric-card:hover{
    transform:translateY(-6px);
  }

  .roi-main-card{
    padding:28px;
    min-height:auto;
    border-radius:30px;
  }

  .roi-main-card::before{
    display:none;
  }

  .roi-card-top{
    flex-direction:column;
  }

  .roi-chart-area{
    min-height:300px;
    gap:10px;
    padding:24px 16px 28px;
  }

  .roi-column{
    height:220px;
  }

  .roi-column span{
    max-width:38px;
  }

  .roi-insight{
    flex-direction:column;
  }

  .roi-bottom-card{
    padding:28px;
    min-height:auto;
  }

  .roi-vs-circle{
    width:76px;
    height:76px;
  }
}

/* =====================================================
   BLOCO 8 — PROJETOS DE E-COMMERCE
===================================================== */

.commerce-projects-section{
  position:relative;
  padding:130px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(124,58,237,.18),transparent 34rem),
    radial-gradient(circle at 85% 85%,rgba(34,197,94,.08),transparent 28rem),
    linear-gradient(180deg,#050505,#08080d 50%,#050505);
}

.projects-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.14;
  mask-image:radial-gradient(circle at 50% 35%,black,transparent 76%);
}

.projects-glow{
  position:absolute;
  width:760px;
  height:760px;
  left:50%;
  top:-260px;
  transform:translateX(-50%);
  border-radius:999px;
  background:radial-gradient(circle,rgba(147,51,234,.28),transparent 70%);
  filter:blur(38px);
  pointer-events:none;
}

.projects-container{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
}

.projects-header{
  max-width:920px;
  margin:0 auto 64px;
  text-align:center;
}

.projects-header h2{
  margin-bottom:22px;
  font-size:clamp(2.45rem,5vw,5rem);
  line-height:.95;
  letter-spacing:-.07em;
}

.projects-header h2 span{
  display:block;
  color:transparent;
  background:linear-gradient(135deg,#fff 10%,#c4b5fd 45%,#9333ea 95%);
  -webkit-background-clip:text;
  background-clip:text;
}

.projects-header p{
  max-width:760px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.85;
}

.projects-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.commerce-project-card{
  position:relative;
  min-height:540px;
  overflow:hidden;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border:1px solid rgba(255,255,255,.10);
  border-radius:36px;
  background:rgba(255,255,255,.04);
  box-shadow:
    0 34px 110px rgba(0,0,0,.42),
    0 0 70px rgba(124,58,237,.12);
  transition:.35s ease;
}

.commerce-project-card:hover{
  transform:translateY(-10px);
  border-color:rgba(196,181,253,.34);
  box-shadow:
    0 40px 130px rgba(0,0,0,.52),
    0 0 90px rgba(124,58,237,.22);
}

.dragon-project{
  background:
    radial-gradient(circle at 30% 20%,rgba(239,68,68,.22),transparent 26rem),
    radial-gradient(circle at 80% 80%,rgba(147,51,234,.28),transparent 24rem),
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
}

.construfer-project{
  background:
    radial-gradient(circle at 30% 20%,rgba(245,158,11,.24),transparent 26rem),
    radial-gradient(circle at 80% 80%,rgba(147,51,234,.26),transparent 24rem),
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
}

.project-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.40) 48%,rgba(0,0,0,.86) 100%);
}

.project-top,
.project-content{
  position:relative;
  z-index:2;
}

.project-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.project-top span{
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(14px);
  color:var(--purpleLight);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.project-top i{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(16px);
  transition:.3s ease;
}

.commerce-project-card:hover .project-top i{
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  transform:translate(4px,-4px);
}

.project-content h3{
  max-width:520px;
  margin-bottom:18px;
  font-size:clamp(2rem,4vw,4rem);
  line-height:1;
  letter-spacing:-.06em;
}

.project-content p{
  max-width:560px;
  margin-bottom:24px;
  color:rgba(255,255,255,.66);
  line-height:1.75;
}

.project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.project-tags small{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  color:rgba(255,255,255,.76);
  font-size:.72rem;
  font-weight:800;
}

/* =====================================================
   BLOCO 9 — CTA FINAL + FOOTER
===================================================== */

.commerce-final-section{
  position:relative;
  padding:140px 0 40px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(124,58,237,.22),transparent 34rem),
    linear-gradient(180deg,#050505,#07070b 45%,#040404);
}

.final-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:72px 72px;
  opacity:.14;
  mask-image:radial-gradient(circle at 50% 30%,black,transparent 76%);
}

.final-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(42px);
  pointer-events:none;
}

.final-glow-one{
  width:680px;
  height:680px;
  left:-260px;
  top:0;
  background:radial-gradient(circle,rgba(147,51,234,.28),transparent 70%);
}

.final-glow-two{
  width:520px;
  height:520px;
  right:-180px;
  bottom:40px;
  background:radial-gradient(circle,rgba(34,197,94,.10),transparent 70%);
}

.final-container{
  position:relative;
  z-index:2;
  width:min(var(--max),calc(100% - 44px));
  margin:0 auto;
}

.final-cta{
  position:relative;
  overflow:hidden;
  padding:70px;
  margin-bottom:34px;
  text-align:center;
  border:1px solid rgba(147,51,234,.24);
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 0%,rgba(147,51,234,.22),transparent 22rem),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  backdrop-filter:blur(24px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.44),
    0 0 90px rgba(124,58,237,.14);
}

.final-cta::before{
  content:"";
  position:absolute;
  inset:24px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:30px;
  pointer-events:none;
}

.final-cta > span{
  position:relative;
  z-index:2;
  display:inline-flex;
  margin-bottom:22px;
  padding:9px 13px;
  border:1px solid rgba(196,181,253,.24);
  border-radius:999px;
  background:rgba(124,58,237,.12);
  color:var(--purpleLight);
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.final-cta h2{
  position:relative;
  z-index:2;
  max-width:950px;
  margin:0 auto 24px;
  font-size:clamp(2.8rem,6vw,6rem);
  line-height:.92;
  letter-spacing:-.08em;
}

.final-cta h2 span{
  display:block;
  color:transparent;
  background:linear-gradient(135deg,#fff 10%,#c4b5fd 45%,#22c55e 95%);
  -webkit-background-clip:text;
  background-clip:text;
}

.final-cta p{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:0 auto 36px;
  color:var(--muted);
  font-size:1.04rem;
  line-height:1.85;
}

.final-buttons{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}

.final-btn-primary,
.final-btn-secondary{
  min-height:56px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:16px;
  font-weight:900;
  transition:.3s ease;
}

.final-btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  color:#fff;
  box-shadow:0 22px 60px rgba(124,58,237,.34);
}

.final-btn-secondary{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#fff;
}

.final-btn-primary:hover,
.final-btn-secondary:hover{
  transform:translateY(-4px);
}

/* FOOTER */

/* =====================================================
   FOOTER IGUAL AO MODELO — CLASSES DO SEU HTML
===================================================== */

.commerce-footer{
  padding:54px 0 38px;
  display:grid;
  grid-template-columns:1.2fr 1fr auto;
  gap:42px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.commerce-footer .footer-brand{
  max-width:500px;
}

.commerce-footer .footer-logo{
  display:flex;
  align-items:center;
  gap:22px;
}

.commerce-footer .footer-logo img{
  width:76px;
  height:76px;
  object-fit:contain;
  filter:drop-shadow(0 0 24px rgba(124,58,237,.55));
}

.commerce-footer .footer-logo div{
  max-width:430px;
}

.commerce-footer .footer-logo strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font-size:1rem;
  font-weight:900;
}

.commerce-footer .footer-logo span{
  display:block;
  color:rgba(255,255,255,.62);
  font-size:.95rem;
  line-height:1.8;
}

.commerce-footer .footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}

.commerce-footer .footer-links a{
  color:rgba(255,255,255,.72);
  font-size:.88rem;
  font-weight:900;
  transition:.28s ease;
}

.commerce-footer .footer-links a:hover{
  color:#fff;
}

.commerce-footer .footer-social{
  display:flex;
  align-items:center;
  gap:12px;
}

.commerce-footer .footer-social a{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:17px;
  background:rgba(255,255,255,.04);
  color:#facc15;
  font-size:1rem;
  transition:.28s ease;
}

.commerce-footer .footer-social a:hover{
  transform:translateY(-4px);
  border-color:rgba(124,58,237,.38);
  background:rgba(124,58,237,.14);
  box-shadow:0 16px 42px rgba(124,58,237,.22);
}

.footer-copy{
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

.footer-copy span{
  color:rgba(255,255,255,.48);
  font-size:.85rem;
}

/* RESPONSIVO */

@media(max-width:1080px){
  .commerce-footer{
    grid-template-columns:1fr;
    text-align:center;
  }

  .commerce-footer .footer-logo{
    justify-content:center;
  }

  .commerce-footer .footer-links,
  .commerce-footer .footer-social{
    justify-content:center;
  }
}

@media(max-width:680px){
  .commerce-footer{
    padding:42px 0 30px;
    gap:30px;
  }

  .commerce-footer .footer-logo{
    flex-direction:column;
  }

  .commerce-footer .footer-logo img{
    width:66px;
    height:66px;
  }

  .commerce-footer .footer-links{
    gap:16px;
  }

  .footer-copy{
    justify-content:center;
    text-align:center;
  }
}