/* Cor chapada. O degrade daqui descia de #e8dffa ate #fff nos ultimos 220px para entregar branco a secao seguinte; a Eleva IA agora tambem e #e8dffa, entao o fade so cortava a faixa lilas no meio. */ .feature-showcase{ background:#e8dffa; border-bottom-left-radius:56px; border-bottom-right-radius:56px; } /* Texto a esquerda e cards a direita, na ordem do proprio HTML - por isso o 'order:-1' que invertia as colunas saiu. As fracoes tambem trocaram de lado para a coluna dos cards continuar sendo a mais larga. */ .feature-showcase .platform-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:center;gap:64px} /* Titulo no padrao da LP anterior (.platform-intro h2 de css/home/page-sections.css + o h1,h2 base de css/shared/style.css): corpo maior, entrelinha de 1.04 e letter-spacing de -.05em, na cor --ink em vez de --purple-dark. O vira bloco para "formalizar sem atrito." ocupar a linha inteira, como la. */ .feature-showcase .platform-intro h2{margin:0;font-family:"Plus Jakarta Sans","Space Grotesk",Nunito,sans-serif;font-size:clamp(38px,3.6vw,58px);font-weight:500;line-height:1.04;letter-spacing:-.05em;color:var(--ink)} .feature-showcase .platform-intro h2 em{display:block;color:var(--purple);font-style:normal} .feature-showcase .platform-intro p{margin:22px 0 0;max-width:460px;color:var(--muted);font-size:18px;line-height:1.7} .feature-showcase .platform-intro .button{margin-top:34px} .feature-showcase .platform-cards{margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} .feature-showcase .platform-card{padding:28px 26px 30px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 14px 34px -26px rgba(58,38,138,.35)} .feature-showcase .platform-card--destaque{border-color:color-mix(in oklab,var(--purple) 45%,var(--line));box-shadow:0 16px 38px -24px rgba(89,50,193,.4)} .feature-showcase .platform-card__ico{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;background:#eee8fa;color:var(--purple);font-size:24px} .feature-showcase .platform-card h3{margin:22px 0 0;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .feature-showcase .platform-card p{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.65} @media(max-width:1023px){.feature-showcase .platform-grid{grid-template-columns:1fr;gap:44px}.feature-showcase .platform-intro p{max-width:none}} @media(max-width:639px){.feature-showcase .platform-intro{text-align:center}.feature-showcase .platform-intro h2{font-size:clamp(30px,8vw,38px)}.feature-showcase .platform-intro p{margin-left:auto;margin-right:auto}.feature-showcase .platform-cards{gap:14px}} @media(max-width:700px){ .feature-showcase .platform-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .feature-showcase .platform-card{min-height:0;padding:12px;border-radius:14px} .feature-showcase .platform-card__ico{width:36px;height:36px;border-radius:10px;font-size:17px} .feature-showcase .platform-card h3{margin-top:10px;font-size:14px;line-height:1.2} .feature-showcase .platform-card p{margin-top:6px;font-size:10px;line-height:1.4} } .showcase-grid{ display:grid; grid-template-columns:.72fr 1.28fr; align-items:center; gap:75px } .showcase-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px } .showcase-cards article{ position:relative; min-height:230px; padding:25px; border:1px solid var(--line); border-radius:19px; background:#fff } .showcase-cards article.selected{ border-color:#9f7de2; box-shadow:0 14px 40px rgba(89,50,193,.1) } .showcase-cards article>div{ width:43px; height:43px; display:grid; place-items:center; border-radius:12px; color:var(--purple); background:#eee9fa; font-size:20px } .showcase-cards h3{ margin:30px 0 8px; font-size:17px } .showcase-cards p{ color:var(--muted); font-size:11px } .showcase-cards article>span{ position:absolute; right:18px; bottom:18px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--purple) } @media(max-width:1080px){ .showcase-grid{ grid-template-columns:1fr } } @media(max-width:700px){ .showcase-cards{ grid-template-columns:1fr } } .feature-card.active{ border-color:#8967db; background: linear-gradient( 145deg, #ffffff, #faf6ff ); } .feature-card h3{ font-family: "Space Grotesk"; font-size:22px; color:#17132f; } .feature-card:hover{ transform: translateY(-8px); box-shadow: 0 25px 60px rgba(89,50,193,.12); border-color:#8967db; transform:translateY(-6px); box-shadow: 0 25px 60px rgba(89,50,193,.12); } .feature-card:hover .feature-icon{ background: linear-gradient( 145deg, #5932c1, #8967db ); color:#fff; } .feature-card{ position:relative; padding:34px; min-height:220px; border-radius:28px; border:1px solid #ebe4fa; background:#fff; transition:.35s ease; animation: cardPulse 12s infinite; } .feature-card:nth-child(1){ animation-delay:0s; } .feature-card:nth-child(2){ animation-delay:3s; } .feature-card:nth-child(3){ animation-delay:6s; } .feature-card:nth-child(4){ animation-delay:9s; } @keyframes cardPulse { 0%,100% { border-color:#ebe4fa; } 15% { border-color:#8967db; box-shadow: 0 20px 50px rgba(89,50,193,.15); } 25% { border-color:#ebe4fa; } } .feature-icon{ width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:#f1e9ff; color:#5932c1; margin-bottom:28px; width:64px; height:64px; border-radius:20px; } .feature-icon i{ font-size:30px; font-size:34px; } .feature-card span{ position:absolute; right:30px; bottom:25px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#5932c1; color:white; position:absolute; right:28px; bottom:25px; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#5932c1; color:white; opacity:0; transform:translateX(-10px); transition:.3s ease; } .feature-card:hover span{ opacity:1; transform:translateX(0); } .feature-card p{ margin-top:12px; color:#77708a; line-height:1.5; font-size:16px; line-height:1.6; color:#77708a; max-width:320px; }