/* =========================================================
   OZONTECK.EU — INDEX PREMIUM WEB3
   Design system: claro, tecnológico, legível, proprietário
   Reconstruído do zero para index-premium.html
========================================================= */

:root{
  --bg:#f5f9ff;
  --bg-2:#eef6ff;
  --bg-3:#f7f2ff;
  --surface:#ffffff;
  --surface-blue:#eef7ff;
  --surface-cyan:#effcff;
  --surface-violet:#f4f0ff;
  --surface-pink:#fff1f8;
  --surface-ice:#f7fbff;

  --text:#0b1737;
  --text-2:#182745;
  --muted:#51617a;
  --muted-2:#72809a;

  --line:#dce7f5;
  --line-2:#cfdcf0;

  --pink:#f52f95;
  --magenta:#d13bd0;
  --purple:#7a4af2;
  --violet:#5e63f4;
  --blue:#2586f4;
  --cyan:#18b6ec;
  --green:#17a96f;
  --danger:#df4d69;

  --gradient:linear-gradient(115deg,#f52f95 0%,#c73fd7 28%,#754ef3 56%,#2a82f4 82%,#17b6ec 100%);
  --gradient-blue:linear-gradient(115deg,#5d5df4 0%,#2887f4 60%,#17b6ec 100%);
  --gradient-soft:linear-gradient(135deg,rgba(245,47,149,.09),rgba(122,74,242,.08),rgba(24,182,236,.09));

  --shadow-xs:0 8px 24px rgba(31,55,104,.06);
  --shadow-sm:0 14px 34px rgba(31,55,104,.08);
  --shadow-md:0 22px 52px rgba(31,55,104,.11);
  --shadow-lg:0 32px 80px rgba(31,55,104,.14);

  --r-sm:14px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:30px;

  --container:1240px;
}

/* =========================================================
   RESET
========================================================= */

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  min-height:100%;
  overflow-x:hidden;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 8% 12%,rgba(117,198,255,.18),transparent 24%),
    radial-gradient(circle at 90% 10%,rgba(188,160,255,.16),transparent 24%),
    radial-gradient(circle at 92% 58%,rgba(255,163,220,.12),transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#f3f8ff 34%,#fbfdff 66%,#f5f9ff 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

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

button,input,select,textarea{
  font:inherit;
}

button,a{
  -webkit-tap-highlight-color:transparent;
}

/* =========================================================
   BASE
========================================================= */

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

.btn{
  min-height:48px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:14px;
  font-size:14px;
  font-weight:800;
  line-height:1;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}

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

.btn-large{
  min-height:54px;
  padding:0 24px;
  font-size:15px;
}

.btn-gradient{
  color:#fff;
  background:var(--gradient);
  box-shadow:0 14px 34px rgba(111,75,239,.22);
}

.btn-gradient:hover{
  box-shadow:0 18px 42px rgba(111,75,239,.28);
}

.btn-outline{
  color:#285cba;
  background:rgba(255,255,255,.88);
  border:1.5px solid rgba(47,114,224,.36);
}

.btn-outline:hover{
  border-color:#4f67ee;
  box-shadow:var(--shadow-sm);
}

.btn-light{
  color:#23344f;
  background:transparent;
}

/* =========================================================
   HEADER
========================================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(248,251,255,.88);
  border-bottom:1px solid rgba(84,113,172,.11);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}

.topbar-inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.brand{
  display:flex;
  align-items:center;
  gap:11px;
  flex-shrink:0;
}

.brand-logo{
  width:42px;
  height:42px;
  object-fit:contain;
}

.brand-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.brand-copy strong{
  font-size:22px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
  color:var(--text);
}

.brand-copy strong span{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.brand-copy small{
  margin-top:5px;
  font-size:9px;
  line-height:1;
  letter-spacing:.13em;
  font-weight:800;
  color:#64738c;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
}

.nav a{
  position:relative;
  color:#33435f;
  font-size:14px;
  font-weight:700;
}

.nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:0;
  height:2px;
  border-radius:999px;
  background:var(--gradient);
  transition:.2s ease;
}

.nav a:hover::after{
  left:0;
  width:100%;
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.menu-button{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(65,98,167,.16);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}

.menu-button span{
  width:19px;
  height:2px;
  display:block;
  margin:4px auto;
  border-radius:99px;
  background:#243351;
}

/* =========================================================
   HERO
========================================================= */

.hero{
  position:relative;
  overflow:hidden;
  padding:58px 0 44px;
  background:
    radial-gradient(circle at 4% 32%,rgba(123,205,255,.24),transparent 32%),
    radial-gradient(circle at 78% 12%,rgba(161,185,255,.20),transparent 32%),
    radial-gradient(circle at 92% 78%,rgba(255,170,224,.22),transparent 34%),
    linear-gradient(135deg,#f8fbff 0%,#edf6ff 48%,#f8f1ff 100%);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,rgba(255,255,255,.52),rgba(255,255,255,.04)),
    repeating-linear-gradient(90deg,transparent 0 120px,rgba(104,135,194,.025) 120px 121px);
}

.hero-wave{
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  opacity:.7;
}

.hero-wave-one{
  width:760px;
  height:260px;
  left:-280px;
  bottom:-120px;
  background:linear-gradient(110deg,rgba(102,190,255,.20),rgba(166,201,255,.10),transparent);
  transform:rotate(8deg);
}

.hero-wave-two{
  width:840px;
  height:280px;
  right:-320px;
  bottom:-120px;
  background:linear-gradient(110deg,transparent,rgba(184,161,255,.14),rgba(255,150,214,.18));
  transform:rotate(-7deg);
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:48px;
  align-items:center;
}

.hero-copy{
  min-width:0;
}

.hero-kicker{
  width:max-content;
  max-width:100%;
  margin-bottom:22px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(93,98,238,.16);
  border-radius:999px;
  background:linear-gradient(120deg,rgba(46,145,246,.10),rgba(166,91,240,.10));
  color:#4e5ee7;
  font-size:12px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.hero-kicker-icon{
  width:22px;
  height:22px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:var(--gradient-blue);
  font-size:11px;
}

.hero-sales-title{
  margin-bottom:18px;
  font-size:clamp(58px,7vw,96px);
  line-height:.88;
  font-weight:900;
  letter-spacing:-.065em;
  color:var(--text);
}

.hero-sales-title span{
  display:block;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-sales-subtitle{
  max-width:620px;
  margin-bottom:16px;
  font-size:26px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.03em;
  color:#223250;
}

.hero-sales-subtitle strong{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-sales-text{
  max-width:620px;
  color:#4f5f79;
  font-size:16px;
  line-height:1.72;
}

.hero-sales-benefits{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.hero-sales-benefit{
  min-height:150px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(77,111,177,.15);
  border-radius:18px;
  box-shadow:var(--shadow-xs);
}

.hero-sales-benefit:nth-child(1){
  background:linear-gradient(145deg,#f7fbff,#eaf6ff);
}

.hero-sales-benefit:nth-child(2){
  background:linear-gradient(145deg,#fbf9ff,#f0edff);
}

.hero-sales-benefit:nth-child(3){
  background:linear-gradient(145deg,#fff8fc,#fff0f7);
}

.hero-sales-benefit-icon{
  width:max-content;
  min-width:46px;
  height:30px;
  margin-bottom:16px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(93,98,238,.14);
  background:rgba(255,255,255,.70);
  color:#5d63ef;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
}

.hero-sales-benefit strong{
  margin-bottom:7px;
  color:#152541;
  font-size:16px;
  line-height:1.2;
}

.hero-sales-benefit span{
  color:#5d6b82;
  font-size:14px;
  line-height:1.5;
}

.hero-actions{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.hero-security{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#53617a;
  font-size:14px;
  font-weight:600;
}

.hero-security-icon{
  width:24px;
  height:24px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(53,121,224,.18);
  border-radius:50%;
  background:#edf6ff;
  color:#2d82e8;
  font-size:12px;
  font-weight:900;
}

/* compatibilidade com versão anterior */
.hero-copy > h1:not(.hero-sales-title){
  max-width:620px;
  margin-bottom:16px;
  font-size:clamp(46px,5vw,70px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.05em;
}

.hero-copy > h1:not(.hero-sales-title) span{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-copy > h2:not(.hero-sales-subtitle){
  max-width:620px;
  margin-bottom:16px;
  font-size:24px;
  line-height:1.25;
}

.hero-copy > p:not(.hero-sales-text){
  max-width:620px;
  color:#4f5f79;
  font-size:16px;
  line-height:1.7;
}

/* =========================================================
   AFILIADOS / NETWORK
========================================================= */

.network-card{
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:32px;
  border:1px solid rgba(91,122,226,.18);
  border-radius:26px;
  background:
    radial-gradient(circle at 84% 12%,rgba(112,190,255,.16),transparent 31%),
    radial-gradient(circle at 92% 84%,rgba(255,164,218,.16),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.90),rgba(239,246,255,.88),rgba(248,239,255,.88));
  box-shadow:var(--shadow-md);
}

.network-card::after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  right:-110px;
  bottom:-115px;
  border:1px solid rgba(91,112,177,.10);
  border-radius:50%;
  box-shadow:
    0 0 0 22px rgba(103,126,226,.025),
    0 0 0 44px rgba(103,126,226,.018);
}

.affiliate-kicker,
.network-eyebrow{
  width:max-content;
  max-width:100%;
  margin-bottom:16px;
  padding:9px 13px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(57,123,232,.15);
  border-radius:999px;
  background:rgba(239,247,255,.88);
  color:#256fda;
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.affiliate-link-icon{
  font-size:14px;
}

.affiliate-title,
.network-card h2{
  margin-bottom:14px;
  color:var(--text);
  font-size:clamp(42px,4.5vw,62px);
  line-height:.98;
  letter-spacing:-.05em;
  font-weight:900;
}

.affiliate-purple{
  color:#7647ee;
}

.affiliate-pink{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.network-card h2 span{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.affiliate-intro,
.network-card > p{
  max-width:520px;
  color:#52627b;
  font-size:16px;
  line-height:1.6;
}

.affiliate-rule-highlight{
  margin-top:18px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:5px;
  border-left:4px solid #6a57f4;
  border-radius:0 14px 14px 0;
  background:rgba(255,255,255,.72);
}

.affiliate-rule-highlight strong{
  color:#182845;
  font-size:15px;
}

.affiliate-rule-highlight span{
  color:#5e6c83;
  font-size:14px;
  line-height:1.45;
}

.network-percentages{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  position:relative;
  z-index:2;
}

.network-percentages > div{
  padding:0 22px;
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(91,112,177,.18);
}

.network-percentages > div:first-child{
  padding-left:0;
}

.network-percentages > div:last-child{
  border-right:none;
}

.network-percentages strong{
  font-size:46px;
  line-height:1;
  letter-spacing:-.045em;
}

.network-percentages > div:nth-child(1) strong{
  color:#168fe7;
}

.network-percentages > div:nth-child(2) strong{
  color:#7546e8;
}

.network-percentages > div:nth-child(3) strong{
  color:#f13d95;
}

.network-percentages span{
  margin-top:7px;
  color:#253552;
  font-size:13px;
  font-weight:800;
}

.network-rule,
.affiliate-generation-rule{
  margin-top:18px !important;
  max-width:520px !important;
  color:#52617a !important;
  font-size:14px !important;
  line-height:1.5;
  font-weight:700;
}

.sextou-box{
  position:relative;
  z-index:2;
  margin-top:20px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid rgba(99,119,188,.13);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(248,240,255,.88));
  box-shadow:var(--shadow-xs);
}

.sextou-icon{
  width:48px;
  height:48px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:#fff;
  background:var(--gradient);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}

.sextou-box > div:last-child{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sextou-box strong{
  color:#1c6fd2;
  font-size:15px;
}

.sextou-box span{
  color:#5f6e85;
  font-size:14px;
  line-height:1.45;
}

.affiliate-trust{
  position:relative;
  z-index:2;
  margin-top:16px;
  padding-top:14px;
  display:flex;
  align-items:center;
  gap:9px;
  border-top:1px solid rgba(93,110,168,.12);
  color:#4f5d75;
  font-size:14px;
}

.affiliate-trust-icon{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#edf6ff;
  color:#267ee4;
  font-size:12px;
  font-weight:900;
}

/* =========================================================
   BENEFÍCIOS
========================================================= */

.benefits-section{
  position:relative;
  padding:54px 0 34px;
  background:
    radial-gradient(circle at 12% 18%,rgba(131,201,255,.10),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(245,249,255,.86));
}

.section-title{
  margin-bottom:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.section-title > span{
  width:34px;
  height:3px;
  border-radius:999px;
  background:var(--gradient);
}

.section-title h2{
  max-width:760px;
  text-align:center;
  color:var(--text);
  font-size:34px;
  line-height:1.12;
  letter-spacing:-.035em;
  font-weight:900;
}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
}

.benefit-card{
  grid-column:span 3;
  min-height:220px;
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-xs);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.benefit-card:hover{
  transform:translateY(-3px);
  border-color:rgba(88,104,230,.24);
  box-shadow:var(--shadow-sm);
}

.benefit-card:nth-child(1),
.benefit-card:nth-child(4),
.benefit-card:nth-child(7){
  background:linear-gradient(145deg,#ffffff,#edf7ff);
}

.benefit-card:nth-child(2),
.benefit-card:nth-child(5),
.benefit-card:nth-child(8){
  background:linear-gradient(145deg,#ffffff,#fff2f9);
}

.benefit-card:nth-child(3),
.benefit-card:nth-child(6),
.benefit-card:nth-child(9){
  background:linear-gradient(145deg,#ffffff,#f3f0ff);
}

.benefit-card:nth-child(10){
  background:linear-gradient(145deg,#ffffff,#eefcff);
}

.benefit-icon{
  width:max-content;
  min-width:52px;
  height:32px;
  margin-bottom:20px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(87,105,230,.14);
  background:rgba(255,255,255,.76);
  color:#6d56e9;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
}

.benefit-card:nth-child(3n+1) .benefit-icon{
  color:#168bdc;
}

.benefit-card:nth-child(3n+2) .benefit-icon{
  color:#e93d91;
}

.benefit-card h3{
  margin-bottom:10px;
  color:#182744;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.015em;
}

.benefit-card p{
  color:#53637b;
  font-size:14px;
  line-height:1.6;
}

.ready-card{
  grid-column:span 6;
  min-height:220px;
  position:relative;
  overflow:hidden;
  padding:24px;
  background:
    radial-gradient(circle at 88% 14%,rgba(108,186,255,.16),transparent 34%),
    radial-gradient(circle at 12% 86%,rgba(255,148,217,.13),transparent 40%),
    linear-gradient(145deg,#fff,#f8f2ff);
  border:1px solid rgba(91,93,234,.24);
}

.ready-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(245,47,149,.04),rgba(35,142,237,.05));
}

.ready-symbol{
  position:relative;
  z-index:1;
  width:max-content;
  margin-bottom:18px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff0f8;
  color:#e93896;
  font-size:14px;
  font-weight:900;
}

.ready-card h3,
.ready-card p,
.ready-card strong{
  position:relative;
  z-index:1;
}

.ready-card h3{
  color:#a73ad4;
  font-size:24px;
}

.ready-card strong{
  display:block;
  margin-top:14px;
  color:#31415f;
  font-size:15px;
  line-height:1.55;
}

.professional-strip{
  margin-top:14px;
  min-height:86px;
  padding:18px 20px;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid rgba(102,119,210,.16);
  border-radius:18px;
  background:linear-gradient(110deg,rgba(255,255,255,.90),rgba(238,247,255,.94),rgba(248,239,255,.92));
  box-shadow:var(--shadow-xs);
}

.professional-symbol{
  width:44px;
  height:44px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:#fff;
  background:var(--gradient);
  font-size:18px;
}

.professional-strip strong{
  display:block;
  margin-bottom:5px;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:15px;
}

.professional-strip p{
  color:#586780;
  font-size:14px;
  line-height:1.5;
}

/* =========================================================
   PLANOS
========================================================= */

.plans-section{
  padding:48px 0 42px;
  background:
    radial-gradient(circle at 15% 8%,rgba(255,180,228,.10),transparent 22%),
    radial-gradient(circle at 90% 16%,rgba(104,194,255,.12),transparent 26%),
    linear-gradient(180deg,#f8fbff,#f3f8ff);
}

.plans-heading{
  margin-bottom:24px;
  text-align:center;
}

.plans-heading h2{
  margin-bottom:7px;
  color:var(--text);
  font-size:34px;
  line-height:1.08;
  letter-spacing:-.035em;
}

.plans-heading p{
  color:#4f5f78;
  font-size:16px;
}

.plans-heading span{
  display:block;
  margin-top:6px;
  color:#6d7891;
  font-size:14px;
}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.price-card{
  position:relative;
  overflow:hidden;
  min-width:0;
  min-height:420px;
  padding:0 20px 20px;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line-2);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}

.price-monthly{
  background:linear-gradient(180deg,#fff,#fff6fa);
}

.price-quarterly{
  background:linear-gradient(180deg,#fff,#f7f3ff);
}

.price-annual{
  background:
    radial-gradient(circle at 82% 12%,rgba(110,194,255,.16),transparent 30%),
    linear-gradient(180deg,#fff,#edf8ff);
  border:1.5px solid rgba(31,145,235,.55);
  box-shadow:0 20px 48px rgba(42,138,230,.12);
}

.price-header{
  margin:0 -20px 18px;
  padding:12px 16px;
  text-align:center;
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.03em;
}

.price-monthly .price-header{
  background:linear-gradient(115deg,#f5369a,#c73dd0);
}

.price-quarterly .price-header{
  background:linear-gradient(115deg,#9a3fe3,#6550ef);
}

.price-annual .price-header{
  background:linear-gradient(115deg,#277ee8,#11afe4);
}

.best-badge{
  position:absolute;
  top:9px;
  right:10px;
  z-index:3;
  padding:6px 10px;
  border-radius:999px;
  background:#0d87dd;
  color:#fff;
  font-size:10px;
  font-weight:900;
  box-shadow:0 6px 14px rgba(26,122,224,.16);
}

.price-value{
  margin-top:4px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:7px;
}

.price-value > span{
  margin-bottom:8px;
  color:#243350;
  font-size:15px;
  font-weight:800;
}

.price-value strong{
  color:#111f43;
  font-size:52px;
  line-height:1;
  letter-spacing:-.055em;
}

.price-value small{
  font-size:24px;
}

.price-period{
  margin:5px 0 16px;
  text-align:center;
  color:#6d7b91;
  font-size:13px;
}

.price-features{
  list-style:none;
  display:grid;
  gap:9px;
  margin-bottom:16px;
  padding-top:16px;
  border-top:1px solid rgba(102,119,167,.15);
}

.price-features li{
  position:relative;
  padding-left:21px;
  color:#46556d;
  font-size:14px;
}

.price-features li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#1998e5;
  font-weight:900;
}

.commission-box{
  margin-top:auto;
  min-height:92px;
  padding:14px 15px;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:7px 16px;
  border-radius:14px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(93,93,230,.20);
}

.price-monthly .commission-box{
  border-color:rgba(239,62,153,.30);
  background:#fff7fb;
}

.price-quarterly .commission-box{
  border-color:rgba(128,69,230,.30);
  background:#f8f5ff;
}

.price-annual .commission-box{
  border-color:rgba(39,144,232,.34);
  background:#f1f9ff;
}

.commission-box strong{
  width:100%;
  color:#5f4fd6;
  font-size:13px;
  font-weight:900;
}

.price-monthly .commission-box strong{
  color:#d52d87;
}

.price-annual .commission-box strong{
  color:#1689da;
}

.commission-box span{
  color:#47566d;
  font-size:13px;
  font-weight:700;
}

.price-button{
  min-height:44px;
  margin-top:12px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1.5px solid rgba(111,79,233,.35);
  border-radius:12px;
  background:#fff;
  color:#6450d5;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  transition:.2s ease;
}

.price-button:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}

.price-monthly .price-button{
  border-color:rgba(240,47,148,.40);
  color:#d82d8c;
}

.price-button-featured{
  color:#fff;
  border:none;
  background:linear-gradient(115deg,#267ee9,#13afe6);
  box-shadow:0 10px 22px rgba(31,136,228,.18);
}

.trust-strip{
  margin-top:14px;
  padding:16px 18px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(77,115,183,.14);
  border-radius:16px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-xs);
}

.trust-item{
  padding:0 18px;
  display:flex;
  flex-direction:column;
  border-right:1px solid rgba(92,110,167,.13);
}

.trust-item:last-child{
  border-right:none;
}

.trust-item strong{
  margin-bottom:5px;
  color:#176fd4;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
}

.trust-item span{
  color:#5c6a80;
  font-size:13px;
  line-height:1.45;
}

/* =========================================================
   FLUXO
========================================================= */

.flow-section{
  padding:52px 0 46px;
  background:
    radial-gradient(circle at 0 40%,rgba(120,206,255,.13),transparent 30%),
    radial-gradient(circle at 100% 60%,rgba(194,165,255,.11),transparent 30%),
    #f8fbff;
}

.flow-heading{
  margin-bottom:26px;
  text-align:center;
}

.flow-heading h2{
  color:var(--text);
  font-size:34px;
  letter-spacing:-.035em;
}

.flow-heading p{
  margin-top:6px;
  color:#66758d;
  font-size:14px;
}

.flow-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}

.flow-grid::before{
  content:"";
  position:absolute;
  left:4%;
  right:4%;
  top:32px;
  height:2px;
  background:linear-gradient(90deg,#2c8eea,#7252ef,#f03b95);
  opacity:.22;
}

.flow-card{
  position:relative;
  z-index:1;
  min-height:190px;
  padding:18px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-xs);
}

.flow-card:nth-child(1),
.flow-card:nth-child(4){
  background:linear-gradient(145deg,#fff,#eef7ff);
}

.flow-card:nth-child(2),
.flow-card:nth-child(5){
  background:linear-gradient(145deg,#fff,#f4f0ff);
}

.flow-card:nth-child(3),
.flow-card:nth-child(6){
  background:linear-gradient(145deg,#fff,#fff2f8);
}

.flow-card::after{
  display:none !important;
}

.flow-number{
  width:34px;
  height:34px;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:var(--gradient);
  box-shadow:0 8px 16px rgba(104,79,236,.18);
  font-size:13px;
  font-weight:900;
}

.flow-card strong{
  display:block;
  margin-bottom:9px;
  color:#1d2a48;
  font-size:15px;
  line-height:1.3;
  text-transform:uppercase;
}

.flow-card p{
  color:#5c6980;
  font-size:13px;
  line-height:1.55;
}

.status-area{
  margin-top:14px;
  display:grid;
  grid-template-columns:1.7fr .5fr .8fr;
  gap:12px;
}

.status-list,
.status-cancelled,
.status-message{
  border:1px solid rgba(90,117,178,.14);
  border-radius:16px;
  box-shadow:var(--shadow-xs);
}

.status-list{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:#fff;
}

.status-item{
  min-width:112px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border-radius:12px;
}

.status-item strong{
  font-size:12px;
  text-transform:uppercase;
}

.status-item span{
  color:#6d788e;
  font-size:11px;
}

.status-received{background:#edf4ff}
.status-received strong{color:#3277d8}
.status-paid{background:#eafaf3}
.status-paid strong{color:#159260}
.status-sent{background:#f4f0ff}
.status-sent strong{color:#7650df}
.status-delivered{background:#edf8ff}
.status-delivered strong{color:#1a8bd6}

.status-arrow{
  color:#7c8ba4;
  font-size:14px;
}

.status-cancelled{
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:#fff0f4;
}

.status-cancelled strong{
  color:#d84868;
  font-size:12px;
  text-transform:uppercase;
}

.status-cancelled span{
  margin-top:4px;
  color:#8a6e7c;
  font-size:11px;
}

.status-message{
  padding:14px 16px;
  background:linear-gradient(135deg,#edf7ff,#f5f1ff);
}

.status-message strong{
  display:block;
  margin-bottom:6px;
  color:#2b70d2;
  font-size:13px;
}

.status-message p{
  color:#5f6e85;
  font-size:12px;
  line-height:1.5;
}

/* =========================================================
   AUTOMAÇÃO + OPORTUNIDADES
========================================================= */

.growth-section{
  padding:46px 0 50px;
  background:linear-gradient(180deg,#f8fbff,#f4f8ff);
}

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

.automation-panel,
.opportunities-panel{
  padding:24px;
  border:1px solid rgba(82,112,177,.14);
  border-radius:22px;
  box-shadow:var(--shadow-sm);
}

.automation-panel{
  background:
    radial-gradient(circle at 10% 8%,rgba(117,196,255,.12),transparent 28%),
    linear-gradient(145deg,#fff,#f0f8ff);
}

.opportunities-panel{
  background:
    radial-gradient(circle at 15% 15%,rgba(219,178,255,.14),transparent 32%),
    radial-gradient(circle at 85% 80%,rgba(144,205,255,.12),transparent 35%),
    linear-gradient(145deg,#fff,#f8f1ff);
}

.automation-panel > h2,
.opportunities-panel > h2{
  margin-bottom:22px;
  text-align:center;
  color:var(--text);
  font-size:28px;
  letter-spacing:-.03em;
}

.automation-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
}

.automation-item{
  min-height:150px;
  padding:16px 14px;
  border:1px solid rgba(82,112,177,.12);
  border-radius:14px;
  background:rgba(255,255,255,.78);
}

.automation-item:nth-child(2n){
  background:#f5f2ff;
}

.automation-item:nth-child(3n){
  background:#eef9ff;
}

.automation-item strong{
  display:block;
  margin-bottom:8px;
  color:#1b6fd0;
  font-size:13px;
}

.automation-item span{
  color:#5d6c82;
  font-size:12px;
  line-height:1.5;
}

.automation-footer{
  margin-top:16px;
  text-align:center;
  color:#5f6d84;
  font-size:13px;
}

.automation-footer strong{
  color:#33415c;
}

.opportunity-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.opportunity-card{
  min-height:190px;
  padding:18px;
  border:1px solid rgba(91,110,182,.14);
  border-radius:16px;
  background:rgba(255,255,255,.80);
}

.platform-card{
  box-shadow:inset 0 3px 0 rgba(129,65,232,.78);
}

.factory-card{
  box-shadow:inset 0 3px 0 rgba(245,63,157,.78);
}

.opportunity-label{
  display:block;
  margin-bottom:16px;
  color:#7250db;
  font-size:12px;
  font-weight:900;
}

.factory-card .opportunity-label{
  color:#df368d;
}

.opportunity-card h3{
  margin-bottom:10px;
  color:#1f2d4a;
  font-size:18px;
  line-height:1.25;
}

.opportunity-card p{
  color:#5d6c82;
  font-size:14px;
  line-height:1.55;
}

.factory-rule{
  margin-top:14px;
  text-align:center;
  color:#68758c;
  font-size:13px;
  line-height:1.5;
}

/* =========================================================
   FAQ
========================================================= */

.faq-section{
  padding:42px 0 0;
  background:linear-gradient(180deg,#f6f9ff,#f8fbff);
}

.faq-header{
  margin-bottom:18px;
  text-align:center;
}

.faq-header h2{
  color:var(--text);
  font-size:30px;
  letter-spacing:-.03em;
}

.faq-header p{
  margin-top:5px;
  color:#67758d;
  font-size:14px;
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.faq-item{
  overflow:hidden;
  border:1px solid rgba(76,109,180,.13);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadow-xs);
}

.faq-item:nth-child(2n){
  background:#f5f2ff;
}

.faq-item:nth-child(3n){
  background:#eef8ff;
}

.faq-question{
  width:100%;
  min-height:72px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:none;
  background:none;
  color:#253550;
  text-align:left;
  font-size:14px;
  line-height:1.35;
  font-weight:800;
  cursor:pointer;
}

.faq-question > span{
  width:26px;
  height:26px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#604ede;
  background:#ece9ff;
  transition:.2s ease;
}

.faq-item.open .faq-question > span{
  transform:rotate(45deg);
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
}

.faq-answer p{
  padding:0 16px 16px;
  color:#5e6c83;
  font-size:14px;
  line-height:1.55;
}

/* =========================================================
   CTA FINAL
========================================================= */

.final-cta{
  margin-top:16px;
  min-height:130px;
  padding:24px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid rgba(87,110,206,.16);
  border-radius:22px 22px 0 0;
  background:
    radial-gradient(circle at 85% 50%,rgba(126,194,255,.26),transparent 30%),
    radial-gradient(circle at 10% 80%,rgba(255,158,221,.17),transparent 34%),
    linear-gradient(115deg,#edf5ff,#f3efff);
}

.final-cta > div:first-child > span{
  display:block;
  margin-bottom:6px;
  color:#6e53e0;
  font-size:12px;
  font-weight:900;
}

.final-cta h2{
  color:#172544;
  font-size:26px;
  line-height:1.1;
}

.final-cta h2 strong{
  display:block;
  margin-top:4px;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.final-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================================================
   FOOTER
========================================================= */

.footer{
  padding:26px 0 30px;
  background:#f8fbff;
}

.footer-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding-top:18px;
  border-top:1px solid rgba(87,109,160,.13);
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:9px;
}

.footer-brand img{
  width:32px;
  height:32px;
  object-fit:contain;
}

.footer-brand strong{
  color:#273651;
  font-size:13px;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
}

.footer-links a{
  color:#64718a;
  font-size:12px;
}

.footer-copy{
  justify-self:end;
  color:#7c889c;
  font-size:12px;
}

/* =========================================================
   TABLET / NOTEBOOK
========================================================= */

@media(max-width:1120px){

  .nav{
    gap:18px;
  }

  .nav a{
    font-size:13px;
  }

  .benefit-card{
    grid-column:span 4;
  }

  .ready-card{
    grid-column:span 8;
  }

  .flow-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .flow-grid::before{
    display:none;
  }

  .status-area{
    grid-template-columns:1fr;
  }

  .automation-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

  .container{
    padding:0 18px;
  }

  .topbar-inner{
    min-height:72px;
  }

  .brand-logo{
    width:38px;
    height:38px;
  }

  .brand-copy strong{
    font-size:18px;
  }

  .nav{
    position:absolute;
    top:72px;
    left:18px;
    right:18px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:14px;
    border:1px solid rgba(75,105,171,.12);
    border-radius:16px;
    background:rgba(255,255,255,.97);
    box-shadow:var(--shadow-md);
  }

  .nav.open{
    display:flex;
  }

  .nav a{
    width:100%;
    padding:11px 10px;
    font-size:14px;
  }

  .nav a::after{
    display:none;
  }

  .topbar-actions{
    margin-left:auto;
  }

  .topbar-actions .btn-gradient{
    display:none;
  }

  .menu-button{
    display:block;
  }

  .hero{
    padding-top:40px;
  }

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

  .hero-copy{
    text-align:center;
  }

  .hero-kicker{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-sales-text,
  .hero-sales-subtitle,
  .hero-copy > h1,
  .hero-copy > h2,
  .hero-copy > p{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-actions{
    justify-content:center;
  }

  .hero-security{
    justify-content:center;
  }

  .network-card{
    max-width:760px;
    margin:0 auto;
  }

  .benefit-card{
    grid-column:span 6;
  }

  .ready-card{
    grid-column:1 / -1;
  }

  .plans-grid{
    grid-template-columns:1fr;
  }

  .price-annual{
    order:-1;
  }

  .trust-strip{
    grid-template-columns:repeat(2,1fr);
  }

  .trust-item:nth-child(2){
    border-right:none;
  }

  .trust-item:nth-child(-n+2){
    padding-bottom:12px;
    border-bottom:1px solid rgba(92,110,167,.13);
  }

  .growth-grid{
    grid-template-columns:1fr;
  }

  .faq-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

  html{
    scroll-padding-top:74px;
  }

  .container{
    padding:0 14px;
  }

  .topbar-actions .btn-light{
    display:none;
  }

  .brand-copy small{
    display:none;
  }

  .hero{
    padding:30px 0 26px;
  }

  .hero-kicker{
    width:100%;
    justify-content:center;
    text-align:center;
    font-size:10px;
  }

  .hero-sales-title{
    font-size:54px;
  }

  .hero-sales-subtitle{
    font-size:22px;
  }

  .hero-sales-text{
    font-size:15px;
  }

  .hero-sales-benefits{
    grid-template-columns:1fr;
  }

  .hero-sales-benefit{
    min-height:auto;
  }

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

  .hero-actions .btn{
    width:100%;
  }

  .network-card{
    padding:22px 18px;
  }

  .affiliate-title,
  .network-card h2{
    font-size:38px;
  }

  .affiliate-intro,
  .network-card > p{
    font-size:15px;
  }

  .network-percentages > div{
    padding:0 10px;
  }

  .network-percentages strong{
    font-size:34px;
  }

  .network-percentages span{
    font-size:11px;
  }

  .section-title{
    gap:8px;
  }

  .section-title > span{
    width:18px;
  }

  .section-title h2{
    font-size:26px;
  }

  .benefit-card{
    grid-column:1 / -1;
    min-height:auto;
  }

  .ready-card{
    grid-column:1 / -1;
  }

  .professional-strip{
    align-items:flex-start;
  }

  .plans-heading h2{
    font-size:28px;
  }

  .price-card{
    min-height:auto;
    padding:0 16px 16px;
  }

  .price-header{
    margin:0 -16px 16px;
  }

  .price-value strong{
    font-size:48px;
  }

  .trust-strip{
    grid-template-columns:1fr;
  }

  .trust-item{
    padding:12px 0;
    border-right:none;
    border-bottom:1px solid rgba(92,110,167,.13);
  }

  .trust-item:last-child{
    border-bottom:none;
  }

  .flow-grid{
    grid-template-columns:1fr;
  }

  .flow-card{
    min-height:auto;
  }

  .status-list{
    flex-direction:column;
    align-items:stretch;
  }

  .status-item{
    width:100%;
  }

  .status-arrow{
    text-align:center;
    transform:rotate(90deg);
  }

  .automation-grid{
    grid-template-columns:1fr;
  }

  .opportunity-grid{
    grid-template-columns:1fr;
  }

  .faq-grid{
    grid-template-columns:1fr;
  }

  .final-cta{
    align-items:flex-start;
    flex-direction:column;
  }

  .final-actions{
    width:100%;
    flex-direction:column;
  }

  .final-actions .btn{
    width:100%;
  }

  .footer-inner{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }

  .footer-copy{
    justify-self:center;
  }
}

/* =========================================================
   MOBILE PEQUENO
========================================================= */

@media(max-width:390px){

  .hero-sales-title{
    font-size:46px;
  }

  .network-percentages{
    grid-template-columns:1fr;
    gap:12px;
  }

  .network-percentages > div{
    padding:0;
    border-right:none;
    border-bottom:1px solid rgba(91,112,177,.16);
    padding-bottom:12px;
  }

  .network-percentages > div:last-child{
    border-bottom:none;
  }
}

/* =========================================================
   ACESSIBILIDADE
========================================================= */

a:focus-visible,
button:focus-visible{
  outline:3px solid rgba(65,116,238,.28);
  outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}


/* =========================================================
   OZONTECK.EU — REFINAMENTO V2
   Compactação, alinhamento e escala premium
   Cole ESTE BLOCO NO FINAL de index-premium.css
========================================================= */

/* ---------- ESCALA GERAL ---------- */

:root{
  --container:1220px;
}

body{
  font-size:15px;
}

.screen{
  position:relative;
}

.hero{
  padding:42px 0 30px;
}

.benefits-section,
.plans-section,
.flow-section,
.growth-section{
  padding-top:38px;
  padding-bottom:34px;
}

/* ---------- HEADER MAIS ENXUTO ---------- */

.topbar-inner{
  min-height:72px;
}

.brand-logo{
  width:38px;
  height:38px;
}

.brand-copy strong{
  font-size:20px;
}

.brand-copy small{
  font-size:8px;
}

.nav{
  gap:24px;
}

.nav a{
  font-size:13px;
}

.btn{
  min-height:44px;
  font-size:13px;
}

.btn-large{
  min-height:48px;
  padding:0 21px;
  font-size:14px;
}

/* ---------- HERO: MESMA LINHA / MAIS EQUILÍBRIO ---------- */

.hero-grid{
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:38px;
  align-items:start;
}

.hero-kicker{
  margin-bottom:18px;
  padding:8px 12px;
  font-size:11px;
}

.hero-sales-title{
  margin-bottom:16px;
  font-size:clamp(52px,5.6vw,76px);
  line-height:.96;
  letter-spacing:-.055em;
  white-space:nowrap;
}

.hero-sales-title span{
  display:inline;
}

.hero-sales-subtitle{
  margin-bottom:12px;
  max-width:560px;
  font-size:22px;
  line-height:1.2;
}

.hero-sales-text{
  max-width:575px;
  font-size:15px;
  line-height:1.62;
}

.hero-sales-benefits{
  margin-top:20px;
  gap:9px;
}

.hero-sales-benefit{
  min-height:128px;
  padding:15px 14px;
  border-radius:16px;
}

.hero-sales-benefit-icon{
  min-width:0;
  height:auto;
  margin-bottom:11px;
  padding:0;
  border:0;
  background:transparent;
  font-size:10px;
}

.hero-sales-benefit strong{
  margin-bottom:5px;
  font-size:15px;
}

.hero-sales-benefit span{
  font-size:13px;
  line-height:1.42;
}

.hero-actions{
  margin-top:18px;
}

.hero-security{
  margin-top:13px;
  font-size:13px;
}

/* ---------- CARD AFILIADOS ---------- */

.network-card{
  padding:26px 28px;
  border-radius:22px;
}

.affiliate-kicker,
.network-eyebrow{
  margin-bottom:14px;
  padding:8px 11px;
  font-size:11px;
}

.affiliate-title,
.network-card h2{
  margin-bottom:12px;
  font-size:clamp(40px,4vw,54px);
  line-height:1;
  letter-spacing:-.045em;
  white-space:nowrap;
}

/* remove a quebra manual depois de "Compartilhou." */
.affiliate-title br{
  display:none;
}

.affiliate-title .affiliate-purple,
.affiliate-title .affiliate-pink{
  display:inline;
}

.affiliate-intro,
.network-card > p{
  font-size:14px;
  line-height:1.5;
}

.affiliate-rule-highlight{
  margin-top:14px;
  padding:13px 15px;
}

.affiliate-rule-highlight strong{
  font-size:14px;
}

.affiliate-rule-highlight span{
  font-size:13px;
}

.network-percentages{
  margin-top:18px;
}

.network-percentages strong{
  font-size:38px;
}

.network-percentages span{
  font-size:12px;
}

.network-rule,
.affiliate-generation-rule{
  margin-top:14px !important;
  font-size:13px !important;
}

.sextou-box{
  margin-top:15px;
  padding:13px 15px;
}

.sextou-icon{
  width:42px;
  height:42px;
}

.sextou-box strong{
  font-size:14px;
}

.sextou-box span{
  font-size:13px;
}

.affiliate-trust{
  margin-top:13px;
  padding-top:12px;
  font-size:13px;
}

/* ---------- TÍTULOS DE SEÇÃO ---------- */

.section-title{
  margin-bottom:22px;
}

.section-title h2,
.plans-heading h2,
.flow-heading h2{
  font-size:30px;
  line-height:1.12;
}

.automation-panel > h2,
.opportunities-panel > h2{
  font-size:25px;
}

.faq-header h2{
  font-size:27px;
}

/* ---------- BENEFÍCIOS: MAIS COMPACTOS ---------- */

.benefits-section{
  padding-top:34px;
}

.benefits-grid{
  gap:12px;
}

.benefit-card{
  min-height:178px;
  padding:18px 18px;
  border-radius:18px;
}

.benefit-icon{
  height:auto;
  min-width:0;
  margin-bottom:13px;
  padding:0;
  border:0;
  background:transparent;
  font-size:10px;
}

.benefit-card h3{
  margin-bottom:8px;
  font-size:16px;
  line-height:1.18;
}

.benefit-card p{
  font-size:13px;
  line-height:1.48;
}

.ready-card{
  min-height:164px;
  padding:20px 22px;
}

.ready-symbol{
  margin-bottom:12px;
  padding:6px 10px;
  font-size:11px;
}

.ready-card h3{
  font-size:21px;
}

.ready-card strong{
  margin-top:10px;
  font-size:14px;
}

/* ---------- CHECKOUT MAIS DENSO ---------- */

.plans-section{
  padding-top:36px;
}

.plans-heading{
  margin-bottom:20px;
}

.plans-heading p{
  font-size:15px;
}

.plans-heading span{
  font-size:13px;
}

.plans-grid{
  gap:14px;
}

.price-card{
  min-height:360px;
  border-radius:20px;
}

.price-header{
  margin-bottom:14px;
  padding:10px 14px;
  font-size:13px;
}

.price-value strong{
  font-size:46px;
}

.price-value small{
  font-size:21px;
}

.price-period{
  margin-bottom:13px;
  font-size:12px;
}

.price-features{
  gap:7px;
  margin-bottom:13px;
  padding-top:13px;
}

.price-features li{
  font-size:13px;
}

.commission-box{
  min-height:78px;
  padding:12px 13px;
}

.commission-box strong{
  font-size:12px;
}

.commission-box span{
  font-size:12px;
}

.price-button{
  min-height:41px;
  font-size:11px;
}

.trust-strip{
  margin-top:12px;
  padding:13px 16px;
}

.trust-item strong{
  font-size:12px;
}

.trust-item span{
  font-size:12px;
}

/* ---------- FLUXO MAIS ELEGANTE ---------- */

.flow-section{
  padding-top:38px;
}

.flow-heading{
  margin-bottom:20px;
}

.flow-heading p{
  font-size:13px;
}

.flow-grid{
  gap:10px;
}

.flow-card{
  min-height:164px;
  padding:15px 14px;
  border-radius:16px;
}

.flow-number{
  width:31px;
  height:31px;
  margin-bottom:14px;
  font-size:12px;
}

.flow-card strong{
  margin-bottom:7px;
  font-size:14px;
}

.flow-card p{
  font-size:12px;
  line-height:1.45;
}

.status-area{
  gap:10px;
}

.status-list,
.status-cancelled,
.status-message{
  border-radius:14px;
}

.status-list{
  padding:12px 14px;
}

.status-item{
  min-width:104px;
  padding:8px 10px;
}

.status-item strong{
  font-size:11px;
}

.status-item span{
  font-size:10px;
}

.status-message{
  padding:12px 14px;
}

.status-message strong{
  font-size:12px;
}

.status-message p{
  font-size:11px;
}

/* ---------- AUTOMAÇÃO / OPORTUNIDADES ---------- */

.growth-section{
  padding-top:32px;
}

.automation-panel,
.opportunities-panel{
  padding:20px;
  border-radius:20px;
}

.automation-panel > h2,
.opportunities-panel > h2{
  margin-bottom:17px;
}

.automation-grid{
  gap:8px;
}

.automation-item{
  min-height:124px;
  padding:13px 12px;
}

.automation-item strong{
  font-size:12px;
}

.automation-item span{
  font-size:11px;
}

.automation-footer{
  margin-top:13px;
  font-size:12px;
}

.opportunity-card{
  min-height:162px;
  padding:15px;
}

.opportunity-label{
  margin-bottom:12px;
  font-size:11px;
}

.opportunity-card h3{
  font-size:16px;
}

.opportunity-card p{
  font-size:12px;
  line-height:1.5;
}

.factory-rule{
  margin-top:11px;
  font-size:12px;
}

/* ---------- FAQ / CTA ---------- */

.faq-section{
  padding-top:34px;
}

.faq-header{
  margin-bottom:15px;
}

.faq-header p{
  font-size:13px;
}

.faq-question{
  min-height:62px;
  padding:0 14px;
  font-size:13px;
}

.faq-answer p{
  padding:0 14px 14px;
  font-size:13px;
}

.final-cta{
  min-height:112px;
  padding:20px 22px;
}

.final-cta h2{
  font-size:23px;
}

/* ---------- FOOTER ---------- */

.footer{
  padding-top:20px;
  padding-bottom:24px;
}

.footer-links a,
.footer-copy{
  font-size:11px;
}

/* =========================================================
   NOTEBOOK
========================================================= */

@media(max-width:1120px){

  .hero-sales-title{
    font-size:58px;
  }

  .affiliate-title,
  .network-card h2{
    font-size:42px;
  }

  .affiliate-title{
    white-space:normal;
  }

  .hero-sales-title{
    white-space:normal;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:900px){

  .hero-sales-title,
  .affiliate-title{
    white-space:normal;
  }

  .hero-sales-title span{
    display:block;
  }

  .affiliate-title br{
    display:block;
  }

  .hero-sales-benefits{
    grid-template-columns:repeat(3,1fr);
  }

  .benefit-card{
    min-height:165px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

  .hero{
    padding-top:28px;
  }

  .hero-sales-title{
    font-size:46px;
    white-space:normal;
  }

  .hero-sales-title span{
    display:inline;
  }

  .hero-sales-subtitle{
    font-size:20px;
  }

  .hero-sales-benefits{
    grid-template-columns:1fr;
  }

  .affiliate-title,
  .network-card h2{
    font-size:34px;
    white-space:normal;
  }

  .affiliate-title br{
    display:block;
  }

  .section-title h2,
  .plans-heading h2,
  .flow-heading h2{
    font-size:25px;
  }

  .benefit-card{
    min-height:auto;
  }

  .price-card{
    min-height:auto;
  }

  .flow-card{
    min-height:auto;
  }
}


/* =========================================================
   OZONTECK.EU — COMPACTAÇÃO FINAL 3 TELAS
   Cole este bloco NO FINAL de /css/index-premium.css
   Objetivo:
   - Tela 1 = Hero + benefícios na mesma dobra
   - Tela 2 = Planos completos em uma dobra
   - Tela 3 = Fluxo + automação + oportunidades + FAQ compactos
========================================================= */

/* ---------- BASE DE ESCALA ---------- */

:root{
  --container:1180px;
}

html{
  scroll-padding-top:72px;
}

body{
  font-size:14px;
}

.container{
  padding-left:22px;
  padding-right:22px;
}

/* ---------- HEADER ---------- */

.topbar-inner{
  min-height:66px;
}

.brand-logo{
  width:34px;
  height:34px;
}

.brand-copy strong{
  font-size:18px;
}

.brand-copy small{
  margin-top:4px;
  font-size:7px;
}

.nav{
  gap:22px;
}

.nav a{
  font-size:12px;
}

.btn{
  min-height:40px;
  padding:0 17px;
  font-size:12px;
  border-radius:12px;
}

.btn-large{
  min-height:44px;
  padding:0 20px;
  font-size:13px;
}

/* =========================================================
   TELA 1 — HERO + BENEFÍCIOS EM UMA ÚNICA EXPERIÊNCIA
========================================================= */

.screen-hero{
  background:
    radial-gradient(circle at 8% 18%,rgba(111,199,255,.18),transparent 25%),
    radial-gradient(circle at 90% 22%,rgba(191,161,255,.14),transparent 26%),
    linear-gradient(180deg,#f8fbff,#f2f8ff);
}

.screen-hero .hero{
  padding:34px 0 20px;
  background:transparent;
}

.hero-grid{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:30px;
  align-items:start;
}

.hero-kicker{
  margin-bottom:14px;
  padding:7px 10px;
  font-size:9px;
}

.hero-kicker-icon{
  width:18px;
  height:18px;
  font-size:9px;
}

/* VENDA MAIS em uma linha */

.hero-sales-title{
  margin-bottom:12px;
  font-size:clamp(42px,4.7vw,62px);
  line-height:.92;
  letter-spacing:-.055em;
  white-space:nowrap;
}

.hero-sales-title span{
  display:inline;
}

.hero-sales-subtitle{
  max-width:540px;
  margin-bottom:9px;
  font-size:18px;
  line-height:1.18;
}

.hero-sales-text{
  max-width:550px;
  font-size:13px;
  line-height:1.52;
}

/* 3 benefícios do hero viram módulos compactos */

.hero-sales-benefits{
  margin-top:15px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.hero-sales-benefit{
  min-height:92px;
  padding:11px 12px;
  border-radius:13px;
}

.hero-sales-benefit-icon{
  margin-bottom:7px;
  font-size:8px;
}

.hero-sales-benefit strong{
  margin-bottom:3px;
  font-size:13px;
}

.hero-sales-benefit span{
  font-size:11px;
  line-height:1.35;
}

.hero-actions{
  margin-top:13px;
  gap:8px;
}

.hero-security{
  margin-top:9px;
  font-size:11px;
}

.hero-security-icon{
  width:20px;
  height:20px;
  font-size:10px;
}

/* AFILIADOS */

.network-card{
  padding:22px 24px;
  border-radius:20px;
}

.affiliate-kicker,
.network-eyebrow{
  margin-bottom:10px;
  padding:7px 10px;
  font-size:9px;
}

/* frase inteira em uma linha no desktop */

.affiliate-title,
.network-card h2{
  margin-bottom:9px;
  font-size:clamp(30px,2.9vw,39px);
  line-height:1;
  letter-spacing:-.045em;
  white-space:nowrap;
}

.affiliate-title br{
  display:none !important;
}

.affiliate-title .affiliate-purple,
.affiliate-title .affiliate-pink{
  display:inline;
}

.affiliate-intro,
.network-card > p{
  max-width:none;
  font-size:12px;
  line-height:1.4;
}

.affiliate-rule-highlight{
  margin-top:10px;
  padding:10px 12px;
  border-left-width:3px;
}

.affiliate-rule-highlight strong{
  font-size:12px;
}

.affiliate-rule-highlight span{
  font-size:11px;
  line-height:1.35;
}

.network-percentages{
  margin-top:12px;
}

.network-percentages > div{
  padding:0 15px;
}

.network-percentages strong{
  font-size:30px;
}

.network-percentages span{
  margin-top:4px;
  font-size:10px;
}

.network-rule,
.affiliate-generation-rule{
  margin-top:10px !important;
  font-size:10px !important;
  line-height:1.35;
}

.sextou-box{
  margin-top:10px;
  padding:10px 12px;
  gap:10px;
  border-radius:13px;
}

.sextou-icon{
  width:36px;
  height:36px;
  border-radius:11px;
  font-size:9px;
}

.sextou-box strong{
  font-size:12px;
}

.sextou-box span{
  font-size:10px;
}

.affiliate-trust{
  margin-top:9px;
  padding-top:8px;
  font-size:10px;
}

/* ---------- BENEFÍCIOS NA MESMA TELA ---------- */

.screen-hero .benefits-section{
  padding:18px 0 24px;
  background:transparent;
}

/* título deixa de ser "hero de seção" e vira etiqueta */

.screen-hero .section-title{
  justify-content:flex-start;
  margin-bottom:12px;
  gap:9px;
}

.screen-hero .section-title > span{
  display:none;
}

.screen-hero .section-title h2{
  max-width:none;
  text-align:left;
  font-size:12px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5367d9;
}

/* seis benefícios em uma linha */

.screen-hero .benefits-grid-primary{
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}

.screen-hero .benefits-grid-primary .benefit-card{
  grid-column:auto;
  min-height:106px;
  padding:12px 12px;
  border-radius:14px;
}

.screen-hero .benefits-grid-primary .benefit-icon{
  margin-bottom:7px;
  font-size:8px;
}

.screen-hero .benefits-grid-primary .benefit-card h3{
  margin-bottom:5px;
  font-size:12px;
  line-height:1.15;
}

.screen-hero .benefits-grid-primary .benefit-card p{
  font-size:10px;
  line-height:1.35;
}

/* "sua loja já nasce pronta" vira faixa */

.screen-hero .ready-card-wide{
  width:100%;
  min-height:auto;
  margin-top:8px;
  padding:11px 14px;
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:12px;
  border-radius:14px;
}

.screen-hero .ready-card-wide .ready-symbol{
  margin:0;
  padding:5px 8px;
  font-size:8px;
}

.screen-hero .ready-card-wide h3{
  margin:0;
  white-space:nowrap;
  font-size:14px;
}

.screen-hero .ready-card-wide p{
  display:none;
}

.screen-hero .ready-card-wide strong{
  margin:0;
  font-size:11px;
  line-height:1.3;
  text-align:right;
}

/* =========================================================
   TELA 2 — CHECKOUT COMPLETO E COMPACTO
========================================================= */

.screen-checkout{
  min-height:calc(100vh - 66px);
  display:flex;
  align-items:center;
  padding:26px 0;
}

.screen-checkout .container{
  width:100%;
}

.plans-heading{
  margin-bottom:15px;
}

.plans-heading h2{
  margin-bottom:4px;
  font-size:26px;
}

.plans-heading p{
  font-size:13px;
}

.plans-heading span{
  margin-top:4px;
  font-size:11px;
}

.plans-grid{
  gap:12px;
}

.price-card{
  min-height:300px;
  padding:0 16px 14px;
  border-radius:17px;
}

.price-header{
  margin:0 -16px 10px;
  padding:8px 12px;
  font-size:11px;
}

.best-badge{
  top:6px;
  right:8px;
  padding:4px 7px;
  font-size:8px;
}

.price-value{
  margin-top:1px;
}

.price-value > span{
  margin-bottom:5px;
  font-size:11px;
}

.price-value strong{
  font-size:38px;
}

.price-value small{
  font-size:17px;
}

.price-period{
  margin:3px 0 9px;
  font-size:10px;
}

.price-features{
  gap:5px;
  margin-bottom:9px;
  padding-top:9px;
}

.price-features li{
  padding-left:17px;
  font-size:11px;
}

.commission-box{
  min-height:62px;
  padding:9px 10px;
  gap:4px 11px;
}

.commission-box strong{
  font-size:10px;
}

.commission-box span{
  font-size:10px;
}

.price-button{
  min-height:35px;
  margin-top:8px;
  font-size:9px;
}

.trust-strip{
  margin-top:9px;
  padding:10px 12px;
}

.trust-item{
  padding:0 12px;
}

.trust-item strong{
  margin-bottom:2px;
  font-size:9px;
}

.trust-item span{
  font-size:9px;
}

/* =========================================================
   TELA 3 — TODO O RESTANTE NO MESMO SISTEMA DE ESCALA
========================================================= */

.screen-final{
  background:linear-gradient(180deg,#f8fbff,#f4f8ff);
}

.screen-final .flow-section{
  padding:30px 0 18px;
  background:transparent;
}

.flow-heading{
  margin-bottom:15px;
}

.flow-heading h2{
  font-size:26px;
}

.flow-heading p{
  margin-top:4px;
  font-size:11px;
}

.flow-grid{
  gap:8px;
}

.flow-card{
  min-height:130px;
  padding:12px 11px;
  border-radius:14px;
}

.flow-number{
  width:27px;
  height:27px;
  margin-bottom:10px;
  font-size:10px;
}

.flow-card strong{
  margin-bottom:5px;
  font-size:11px;
}

.flow-card p{
  font-size:10px;
  line-height:1.35;
}

.status-area{
  margin-top:9px;
  gap:8px;
}

.status-list{
  padding:9px 10px;
}

.status-item{
  min-width:88px;
  padding:6px 8px;
}

.status-item strong{
  font-size:9px;
}

.status-item span{
  font-size:8px;
}

.status-arrow{
  font-size:10px;
}

.status-cancelled{
  padding:9px 10px;
}

.status-cancelled strong{
  font-size:9px;
}

.status-cancelled span{
  font-size:8px;
}

.status-message{
  padding:9px 10px;
}

.status-message strong{
  margin-bottom:3px;
  font-size:10px;
}

.status-message p{
  font-size:9px;
  line-height:1.35;
}

/* growth */

.screen-final .growth-section{
  padding:14px 0 18px;
  background:transparent;
}

.growth-grid{
  gap:10px;
}

.automation-panel,
.opportunities-panel{
  padding:15px;
  border-radius:16px;
}

.automation-panel > h2,
.opportunities-panel > h2{
  margin-bottom:12px;
  font-size:18px;
}

.automation-grid{
  gap:6px;
}

.automation-item{
  min-height:86px;
  padding:9px 8px;
  border-radius:11px;
}

.automation-item strong{
  margin-bottom:5px;
  font-size:9px;
}

.automation-item span{
  font-size:8px;
  line-height:1.3;
}

.automation-footer{
  margin-top:9px;
  font-size:9px;
}

.opportunity-grid{
  gap:8px;
}

.opportunity-card{
  min-height:112px;
  padding:10px;
  border-radius:12px;
}

.opportunity-label{
  margin-bottom:8px;
  font-size:8px;
}

.opportunity-card h3{
  margin-bottom:6px;
  font-size:12px;
}

.opportunity-card p{
  font-size:9px;
  line-height:1.35;
}

.factory-rule{
  margin-top:8px;
  font-size:9px;
}

/* FAQ */

.screen-final .faq-section{
  padding:14px 0 0;
  background:transparent;
}

.faq-header{
  margin-bottom:10px;
}

.faq-header h2{
  font-size:20px;
}

.faq-header p{
  margin-top:3px;
  font-size:10px;
}

.faq-grid{
  gap:6px;
}

.faq-question{
  min-height:48px;
  padding:0 10px;
  font-size:10px;
}

.faq-question > span{
  width:20px;
  height:20px;
}

.faq-answer p{
  padding:0 10px 10px;
  font-size:10px;
}

.final-cta{
  min-height:82px;
  margin-top:9px;
  padding:14px 16px;
  border-radius:16px 16px 0 0;
}

.final-cta > div:first-child > span{
  margin-bottom:3px;
  font-size:8px;
}

.final-cta h2{
  font-size:17px;
}

.final-actions{
  gap:7px;
}

/* ---------- FOOTER ---------- */

.footer{
  padding:14px 0 18px;
}

.footer-inner{
  padding-top:12px;
}

.footer-brand img{
  width:25px;
  height:25px;
}

.footer-brand strong{
  font-size:10px;
}

.footer-links a,
.footer-copy{
  font-size:8px;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width:1120px){

  .affiliate-title,
  .network-card h2{
    font-size:32px;
    white-space:normal;
  }

  .hero-sales-title{
    white-space:normal;
  }

  .screen-hero .benefits-grid-primary{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .screen-hero .benefits-grid-primary .benefit-card{
    min-height:96px;
  }
}

@media(max-width:900px){

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

  .hero-copy{
    text-align:center;
  }

  .hero-kicker{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-actions,
  .hero-security{
    justify-content:center;
  }

  .hero-sales-title{
    white-space:normal;
  }

  .affiliate-title{
    white-space:normal;
  }

  .affiliate-title br{
    display:block !important;
  }

  .screen-hero .ready-card-wide{
    grid-template-columns:1fr;
    text-align:left;
  }

  .screen-hero .ready-card-wide h3{
    white-space:normal;
  }

  .screen-hero .ready-card-wide strong{
    text-align:left;
  }

  .screen-checkout{
    min-height:auto;
  }

  .plans-grid{
    grid-template-columns:1fr;
  }

  .price-card{
    min-height:auto;
  }
}

@media(max-width:650px){

  .topbar-inner{
    min-height:64px;
  }

  .hero-sales-title{
    font-size:42px;
  }

  .hero-sales-benefits{
    grid-template-columns:1fr;
  }

  .network-percentages{
    grid-template-columns:repeat(3,1fr);
  }

  .screen-hero .benefits-grid-primary{
    grid-template-columns:1fr 1fr;
  }

  .screen-hero .benefits-grid-primary .benefit-card{
    min-height:auto;
  }

  .flow-grid{
    grid-template-columns:1fr;
  }

  .flow-card{
    min-height:auto;
  }

  .growth-grid{
    grid-template-columns:1fr;
  }

  .automation-grid{
    grid-template-columns:1fr 1fr;
  }

  .faq-grid{
    grid-template-columns:1fr;
  }
}


Biblioteca
/
ozonteck-destaque-cards-fundo-premium.css



/* =========================================================
   OZONTECK.EU — DESTAQUE VISUAL + FUNDO PREMIUM
   Cole ESTE BLOCO NO FINAL de /css/index-premium.css
   Objetivo:
   - recuperar o fundo azul/lilás/rosa "vivo"
   - unir visualmente as 3 telas
   - destacar mais os cards sem voltar ao exagero
========================================================= */

/* ---------- FUNDO GERAL MAIS PRESENTE ---------- */

body{
  background:
    radial-gradient(circle at 8% 10%,rgba(96,190,255,.22),transparent 24%),
    radial-gradient(circle at 88% 8%,rgba(170,151,255,.20),transparent 24%),
    radial-gradient(circle at 92% 60%,rgba(255,153,215,.16),transparent 28%),
    linear-gradient(180deg,#f7fbff 0%,#eef7ff 36%,#f8f3ff 68%,#f6fbff 100%);
}

main{
  position:relative;
  isolation:isolate;
}

main::before{
  content:"";
  position:fixed;
  inset:66px 0 0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%,rgba(73,167,255,.13),transparent 28%),
    radial-gradient(circle at 78% 18%,rgba(125,96,245,.10),transparent 30%),
    radial-gradient(circle at 92% 72%,rgba(247,76,162,.09),transparent 24%);
}

/* ---------- CADA TELA COM CONTINUIDADE VISUAL ---------- */

.screen{
  position:relative;
  overflow:hidden;
}

.screen::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.34),rgba(255,255,255,.03)),
    repeating-linear-gradient(
      90deg,
      transparent 0 138px,
      rgba(91,119,183,.022) 138px 139px
    );
}

.screen > *{
  position:relative;
  z-index:1;
}

.screen-hero{
  background:
    radial-gradient(circle at 4% 28%,rgba(95,190,255,.24),transparent 30%),
    radial-gradient(circle at 82% 12%,rgba(160,145,255,.18),transparent 28%),
    radial-gradient(circle at 92% 82%,rgba(255,152,218,.17),transparent 30%),
    linear-gradient(135deg,#f9fcff 0%,#edf7ff 48%,#f8f2ff 100%);
}

.screen-checkout{
  background:
    radial-gradient(circle at 12% 18%,rgba(255,159,215,.13),transparent 26%),
    radial-gradient(circle at 88% 20%,rgba(79,183,255,.17),transparent 28%),
    linear-gradient(135deg,#f9fbff 0%,#f4f6ff 50%,#eef8ff 100%);
}

.screen-final{
  background:
    radial-gradient(circle at 8% 18%,rgba(89,183,255,.14),transparent 25%),
    radial-gradient(circle at 88% 20%,rgba(177,144,255,.14),transparent 26%),
    radial-gradient(circle at 88% 78%,rgba(255,162,219,.11),transparent 24%),
    linear-gradient(145deg,#f7fbff 0%,#f2f7ff 50%,#f8f3ff 100%);
}

/* ---------- HERO / AFILIADOS MAIS VIVOS ---------- */

.hero-sales-benefit,
.network-card,
.affiliate-rule-highlight,
.sextou-box{
  box-shadow:
    0 14px 32px rgba(37,68,126,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.hero-sales-benefit{
  border-width:1px;
}

.hero-sales-benefit:nth-child(1){
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(222,243,255,.94));
  border-color:rgba(40,145,232,.18);
}

.hero-sales-benefit:nth-child(2){
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(236,230,255,.94));
  border-color:rgba(116,82,237,.18);
}

.hero-sales-benefit:nth-child(3){
  background:
    linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,228,241,.94));
  border-color:rgba(235,57,147,.17);
}

.network-card{
  background:
    radial-gradient(circle at 82% 10%,rgba(87,180,255,.20),transparent 34%),
    radial-gradient(circle at 92% 86%,rgba(255,153,218,.19),transparent 35%),
    linear-gradient(145deg,rgba(255,255,255,.95),rgba(236,246,255,.93),rgba(248,237,255,.93));
  border-color:rgba(91,107,226,.22);
}

/* ---------- BENEFÍCIOS MAIS MARCADOS ---------- */

.screen-hero .benefits-grid-primary .benefit-card{
  box-shadow:
    0 12px 28px rgba(29,60,112,.075),
    inset 0 1px 0 rgba(255,255,255,.8);
  border-width:1px;
}

.screen-hero .benefits-grid-primary .benefit-card:nth-child(1),
.screen-hero .benefits-grid-primary .benefit-card:nth-child(4){
  background:linear-gradient(145deg,#ffffff,#eaf6ff);
  border-color:rgba(48,143,224,.16);
}

.screen-hero .benefits-grid-primary .benefit-card:nth-child(2),
.screen-hero .benefits-grid-primary .benefit-card:nth-child(5){
  background:linear-gradient(145deg,#ffffff,#fff0f7);
  border-color:rgba(232,59,145,.15);
}

.screen-hero .benefits-grid-primary .benefit-card:nth-child(3),
.screen-hero .benefits-grid-primary .benefit-card:nth-child(6){
  background:linear-gradient(145deg,#ffffff,#f0edff);
  border-color:rgba(115,78,236,.16);
}

.screen-hero .ready-card-wide{
  background:
    radial-gradient(circle at 92% 30%,rgba(105,187,255,.17),transparent 34%),
    linear-gradient(115deg,#f9f5ff,#edf7ff);
  border:1px solid rgba(100,100,231,.22);
  box-shadow:0 14px 30px rgba(58,75,154,.08);
}

/* ---------- PLANOS COM MAIS PRESENÇA ---------- */

.price-card{
  box-shadow:
    0 18px 38px rgba(34,61,111,.10),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.price-monthly{
  background:
    radial-gradient(circle at 15% 14%,rgba(255,174,220,.12),transparent 34%),
    linear-gradient(180deg,#fff,#fff5fa);
  border-color:rgba(236,70,153,.18);
}

.price-quarterly{
  background:
    radial-gradient(circle at 18% 14%,rgba(178,151,255,.12),transparent 34%),
    linear-gradient(180deg,#fff,#f5f1ff);
  border-color:rgba(121,85,235,.18);
}

.price-annual{
  background:
    radial-gradient(circle at 80% 10%,rgba(104,194,255,.22),transparent 34%),
    radial-gradient(circle at 15% 88%,rgba(173,151,255,.10),transparent 34%),
    linear-gradient(180deg,#fff,#eaf7ff);
  border-color:rgba(34,145,229,.42);
  box-shadow:
    0 22px 46px rgba(37,133,221,.15),
    0 0 0 1px rgba(69,164,236,.06);
}

.commission-box{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.trust-strip{
  background:rgba(255,255,255,.84);
  box-shadow:0 12px 28px rgba(41,69,117,.07);
}

/* ---------- FLUXO MAIS DESTACADO ---------- */

.flow-card{
  box-shadow:
    0 12px 26px rgba(38,66,113,.075),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.flow-card:nth-child(1),
.flow-card:nth-child(4){
  background:linear-gradient(145deg,#fff,#eaf6ff);
}

.flow-card:nth-child(2),
.flow-card:nth-child(5){
  background:linear-gradient(145deg,#fff,#f2eeff);
}

.flow-card:nth-child(3),
.flow-card:nth-child(6){
  background:linear-gradient(145deg,#fff,#fff0f7);
}

.status-list,
.status-cancelled,
.status-message{
  box-shadow:0 10px 24px rgba(37,64,108,.07);
}

/* ---------- AUTOMAÇÃO / OPORTUNIDADES MAIS PROFISSIONAIS ---------- */

.automation-panel,
.opportunities-panel{
  box-shadow:
    0 16px 34px rgba(37,65,114,.08),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.automation-panel{
  background:
    radial-gradient(circle at 8% 14%,rgba(94,190,255,.16),transparent 30%),
    linear-gradient(145deg,#fff,#edf7ff);
}

.opportunities-panel{
  background:
    radial-gradient(circle at 88% 14%,rgba(255,162,218,.14),transparent 30%),
    radial-gradient(circle at 12% 84%,rgba(163,141,255,.12),transparent 32%),
    linear-gradient(145deg,#fff,#f7f0ff);
}

.automation-item,
.opportunity-card,
.faq-item{
  box-shadow:
    0 8px 20px rgba(39,66,112,.055),
    inset 0 1px 0 rgba(255,255,255,.78);
}

/* ---------- FAQ / CTA MAIS INTEGRADOS ---------- */

.faq-section{
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(246,250,255,.44));
}

.final-cta{
  background:
    radial-gradient(circle at 86% 50%,rgba(111,193,255,.28),transparent 31%),
    radial-gradient(circle at 10% 84%,rgba(255,158,221,.18),transparent 34%),
    linear-gradient(115deg,#eef5ff,#f1edff);
  border-color:rgba(93,109,212,.18);
  box-shadow:0 14px 32px rgba(63,78,153,.08);
}

/* ---------- EFEITO PREMIUM NAS BORDAS / PROFUNDIDADE ---------- */

.network-card,
.price-card,
.automation-panel,
.opportunities-panel,
.final-cta,
.ready-card-wide{
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ---------- HOVER DISCRETO ---------- */

.hero-sales-benefit,
.benefit-card,
.price-card,
.flow-card,
.automation-item,
.opportunity-card,
.faq-item{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.hero-sales-benefit:hover,
.benefit-card:hover,
.flow-card:hover,
.automation-item:hover,
.opportunity-card:hover,
.faq-item:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(38,66,113,.10);
}

/* ---------- MOBILE: MANTER LEVE ---------- */

@media(max-width:650px){

  body{
    background:
      radial-gradient(circle at 8% 10%,rgba(96,190,255,.14),transparent 26%),
      radial-gradient(circle at 88% 12%,rgba(170,151,255,.12),transparent 28%),
      linear-gradient(180deg,#f7fbff,#f2f8ff);
  }

  .screen::before{
    display:none;
  }

  .network-card,
  .price-card,
  .automation-panel,
  .opportunities-panel,
  .final-cta{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}