/* Visual inspired by the supplied reference. Content and checkout actions stay in the original application. */
:root{color-scheme:dark;--page:#0b0c0b;--surface:#181a18;--line:#2b302c;--accent:#26ff31;--mint:#8bffbc;--copy:#c5c9c5}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;color:#f5f7f4}
#root{overflow-x:clip}
#root>.bg-black{background:var(--page)}
#root main{background:radial-gradient(ellipse 430px 480px at 0 26%,#00ac3d13,transparent),radial-gradient(ellipse 430px 480px at 100% 28%,#00ac3d13,transparent),var(--page)}
#root main>section,#root #pricing-section,#root footer{background:transparent}
#root main>section:not(.hero-mobile-image):not(.hero-mobile-copy):not(.hero-desktop),#root #pricing-section{padding-top:64px;padding-bottom:64px}
#root .max-w-4xl{max-width:1040px}
#root .max-w-3xl{max-width:830px}
#root h1,#root h2{letter-spacing:-.045em;font-weight:400;line-height:1.1;text-wrap:balance}
#root h2{font-size:clamp(28px,3.1vw,40px);margin-bottom:32px}
#root h3{letter-spacing:-.025em;line-height:1.3}
#root p{line-height:1.65}
#root strong{font-weight:600;color:#f5f7f4}
#root [class*="text-gray-"],#root .text-black{color:var(--copy)}
#root h1,#root h2,#root h3{color:#f0f3ef}
#root [class*="text-orange-"],#root .text-emerald-500,#root .text-green-400,#root .text-green-500,#root .text-yellow-400,#root [class*="text-[#FA7315]"]{color:var(--accent)}
#root [class*="bg-gray-"],#root .bg-white{background:#171917}
#root [class*="from-white"],#root [class*="from-gray-"],#root [class*="from-orange-"]{background-image:none}
#root [class*="border-gray-"],#root [class*="border-yellow-"],#root [class*="border-orange-"]{border-color:var(--line)}
#root .bg-yellow-100,#root .bg-orange-50,#root [class*="bg-orange-500/" ]{background:#15341e55;border-color:#345c3e}
#root .bg-red-50{background:#21191a}
#root .border-dashed{border-style:solid}
#root [class*="rounded-3xl"],#root .rounded-2xl,#root .rounded-xl{border-radius:12px}
#root [class*="shadow-"]{box-shadow:none}
#root button[class*="bg-orange-500"],#root button.bg-green-500,#root a[class*="bg-orange-500"]{background:linear-gradient(105deg,#22ff13 0%,#52ff6d 56%,#9affc2 100%);color:#07210b;border:1px solid #7dff9b;border-radius:5px;padding:18px 26px;font-size:14px;font-weight:700;letter-spacing:0;text-transform:none;box-shadow:0 6px 30px #00ff3210;transition:filter .2s,transform .2s;min-height:54px;max-width:100%;white-space:normal}
#root button[class*="bg-orange-500"] span,#root button[class*="bg-orange-500"] svg,#root button.bg-green-500 svg{color:#184324}
#root button[class*="bg-orange-500"]:hover,#root button.bg-green-500:hover,#root a[class*="bg-orange-500"]:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 8px 28px #2aff3120}
#root button:focus-visible,#root a:focus-visible{outline:2px solid var(--mint);outline-offset:5px}
#root .animate-bounce{animation:none}
#root>.bg-black>.fixed{position:relative;background:#142219;border-bottom:1px solid #2a4230;padding:10px 20px;color:#d7efdd}
#root>.bg-black>.fixed p{font-size:12px;line-height:1.5;letter-spacing:.025em}
#root>.bg-black>.pt-12{padding-top:0}
/* Desktop: cinematic portrait above a two-column introduction. */
@container sales-page (min-width: 768px){
#root .hero-desktop{display:flex;flex-direction:column-reverse;min-height:0;padding-bottom:38px}
#root .hero-desktop>.hero-portrait-desktop{width:100%;height:420px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#29423240,transparent 65%)}
#root .hero-desktop>.hero-portrait-desktop:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--page) 0%,transparent 30%),linear-gradient(90deg,var(--page),transparent 30%,transparent 70%,var(--page));pointer-events:none}
#root .hero-desktop>.hero-portrait-desktop>div{width:560px;height:650px;margin:0 auto;max-width:100%}
#root .hero-desktop img{width:100%;height:650px;object-fit:cover;object-position:center top}
#root .hero-desktop>div:first-child{width:100%;padding:0 32px;background:transparent;position:relative;z-index:2;margin-top:-5px}
#root .hero-desktop .max-w-md{max-width:1040px;width:100%;display:grid;grid-template-columns:1.1fr 1fr;column-gap:72px;text-align:left;align-items:start}
#root .hero-desktop h1{grid-column:1;grid-row:1/3;font-size:clamp(30px,3.3vw,44px);margin:0}
#root .hero-desktop p{grid-column:2;font-size:16px;line-height:1.6;margin:0 0 22px}
#root .hero-desktop .max-w-md>button{grid-column:2;grid-row:2;width:100%;align-self:start}
#root .hero-desktop .space-y-4{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:45px 0 0;border:1px solid var(--line)}
#root .hero-desktop .space-y-4>div{margin:0;min-height:105px;padding:24px;align-items:flex-start;flex-direction:column;gap:12px;border-right:1px solid var(--line);font-size:15px}
#root .hero-desktop .space-y-4>div:last-child{border-right:0}
#root .hero-desktop .space-y-4>div>span:last-child{margin:0;line-height:1.4}
#root .system-section .grid.gap-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#root .system-section .grid.gap-6>div:last-child{grid-column:1/-1}
}
#root .intro-section>div>div,#root .system-section>div>div,#root .comparison-section>div>div{padding:0;border:0;background:transparent}
#root .intro-section>div>div>h2{max-width:840px;margin-left:auto;margin-right:auto}
#root .intro-section .text-left.space-y-3{max-width:820px;margin-left:auto;margin-right:auto}
#root .intro-section .border-dashed{padding:24px 30px;background:#171b18;border-color:#2c3f31}
#root .intro-section .border-dashed h3{color:var(--mint);font-size:14px;font-weight:500}
#root .intro-section .border-dashed p{font-size:15px}
#root .intro-section .mt-8.space-y-6{padding-top:20px}
#root .story-section>div>div{background:#141714;border:1px solid var(--line);padding:36px}
#root .story-section .space-y-4{font-size:17px;line-height:1.7}
#root .story-section img{max-height:620px;object-fit:contain;background:#101210}
#root .system-section .grid.gap-6>div{background:var(--surface);border:1px solid #262e27;padding:28px;border-radius:10px;transition:border-color .2s,transform .2s}
#root .system-section .grid.gap-6>div:hover{border-color:#4b7854;transform:translateY(-3px)}
#root .system-section h3{font-size:19px;font-weight:500}
#root .system-section .grid.gap-6 p{font-size:15px;color:#bfc6bf}
#root .system-section .grid.gap-6 svg{flex-shrink:0;stroke-width:1.4}
#root .testimonials-section .grid{gap:22px}
#root .testimonials-section .grid .border,#root .intro-section .grid .border{border-color:#303830;border-radius:10px;background:#151815}
#root #pricing-section>div{max-width:850px}
#root #pricing-section>div>div{background:linear-gradient(150deg,#1a221b,#111411);border:1px solid #344637;border-radius:14px;padding:44px}
#root #pricing-section .space-y-4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#root #pricing-section .space-y-4>div{margin:0;background:#1b211c;border:1px solid #303b31;padding:18px}
#root #pricing-section .w-12.bg-green-500{background:#273e2b;width:36px;height:36px}
#root #pricing-section .w-12.bg-green-500 svg{color:var(--mint);width:18px;height:18px}
#root #pricing-section .space-y-4 h3{font-size:14px;font-weight:500}
#root #pricing-section .space-y-4 p{font-size:13px}
#root #pricing-section .border-green-500{background:#e1e7e0;border:1px solid #fff;max-width:590px;margin:30px auto 0;padding:32px;border-radius:10px}
#root #pricing-section .border-green-500 p,#root #pricing-section .border-green-500 span{color:#182c1c}
#root #pricing-section .border-green-500 span.text-3xl{font-size:48px;letter-spacing:-.05em}
#root #pricing-section .border-dashed{font-size:14px;background:#161d17;border-color:#344b37}
#root .comparison-section .grid>div{border-width:1px;padding:28px}
#root .comparison-section .grid>div:first-child{background:#15251a;border-color:#33563d}
#root .comparison-section .grid>div:last-child{border-color:#503037}
#root .comparison-section .grid>div h3{font-size:21px;font-weight:500}
#root .comparison-section .grid>div p.text-2xl{font-size:20px}
#root .guarantee-section>div>div{background:#151a16;border-color:#2e3d31;padding:40px}
#root .faq-section>div{max-width:850px}
#root .faq-section .space-y-4>div{background:#171a17;border-color:#2b322c;border-radius:9px}
#root .faq-section button{padding:23px 24px;font-size:15px;gap:20px}
#root .faq-section button:hover{background:#202820}
#root footer{border-color:var(--line);padding-top:40px;padding-bottom:24px}
#root footer .text-gray-500{color:#8a958d}
@container sales-page (max-width: 767px){
#root main>section:not(.hero-mobile-image):not(.hero-mobile-copy):not(.hero-desktop),#root #pricing-section{padding:42px 22px}
#root .hero-mobile-image{width:100%;height:370px;background:var(--page)}
#root .hero-mobile-image>div:first-child{height:100%;max-width:510px;margin:auto}
#root .hero-mobile-image img{height:550px;width:100%;object-fit:cover;object-position:center top}
#root .hero-mobile-image>div:last-child{background:linear-gradient(to top,var(--page),transparent);height:120px}
#root .hero-mobile-copy{padding:0 22px 28px;margin-top:-2px}
#root .hero-mobile-copy>div>div{padding:0;text-align:left;margin-bottom:0}
#root .hero-mobile-copy h1{font-size:34px;line-height:1.13;margin-bottom:24px}
#root .hero-mobile-copy p{font-size:16px}
#root .hero-mobile-copy .space-y-3{display:grid;gap:0;border:1px solid var(--line);margin:26px 0}
#root .hero-mobile-copy .space-y-3>div{justify-content:flex-start;padding:13px 16px;margin:0;border-bottom:1px solid var(--line)}
#root .hero-mobile-copy .space-y-3>div:last-child{border-bottom:0}
#root .hero-mobile-copy .space-y-3 p{font-size:14px;margin:0}
#root .hero-mobile-copy button{width:100%}
#root h2{font-size:29px;line-height:1.15}
#root .intro-section .border-dashed{padding:20px}
#root .intro-section p,#root .story-section .space-y-4,#root .system-section p{font-size:16px}
#root .story-section>div>div,#root .guarantee-section>div>div{padding:24px 20px}
#root .system-section .grid.gap-6>div{padding:24px 20px}
#root #pricing-section>div>div{padding:28px 18px}
#root #pricing-section .space-y-4{grid-template-columns:1fr}
#root #pricing-section .border-green-500{padding:26px 18px}
#root #pricing-section .border-dashed{padding:20px}
#root .faq-section button{padding:20px 18px}
#root footer .flex.space-x-4{flex-wrap:wrap;justify-content:center;gap:14px}
#root footer .flex.space-x-4>div{margin:0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}#root *,#root *:before,#root *:after{animation:none!important;transition:none!important}}
/* Requested headline emphasis. */
#root .hero-mobile-copy h1{ text-transform:uppercase; font-weight:800; text-align:center; }
/* Requested CTA, section background and contrast adjustments. */
#root .hero-mobile-copy button,#root .hero-desktop .max-w-md>button{display:flex;align-items:center;justify-content:center;gap:12px;font-size:clamp(18px,2.8vw,22px);font-weight:800;line-height:1.25;padding:22px 18px}
#root .cta-click-icon{flex:0 0 26px;display:inline-block}
#root .intro-section>div>div{background:#fff;padding:40px;border-radius:12px;color:#242924}
#root .intro-section h2,#root .intro-section h3,#root .intro-section p,#root .intro-section strong{color:#202620}
#root .intro-section .border-dashed{background:#f0f5f0;border-color:#d9e3da}
#root .intro-section .border-dashed h3,#root .intro-section .text-green-500{color:#15803d}
#root .story-section>div>div{background:#000}
#root main>.bonus-section,#root .bonus-section>div>div{background:#000;background-image:none}
@container sales-page (max-width: 767px){#root .intro-section>div>div{padding:28px 20px}}
/* Requested centered hero copy, compact bullets and CTA highlights. */
#root .hero-mobile-copy>div>div>p{color:#fff;text-align:center;font-size:20px;line-height:1.6}
#root .hero-mobile-copy .space-y-3{border:0;gap:5px;margin:22px 0 26px}
#root .hero-mobile-copy .space-y-3>div{border:0;justify-content:center;padding:3px 0;gap:7px}
#root .hero-mobile-copy .space-y-3 p,#root .hero-mobile-copy .space-y-3>div>span{color:#fff}
#root .hero-mobile-copy .space-y-3 p{font-size:15px;line-height:1.4}
#root .hero-mobile-copy .space-y-3>div>span{font-size:21px;line-height:1}
#root .hero-mobile-copy .space-y-3>div>p{margin-left:0}
#root .intro-section button,#root .story-section button{display:inline-flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 0 22px #22ff3150,0 0 48px #22ff3120}
#root .intro-section button{animation:cta-soft-pulse 2.8s ease-in-out infinite}
#root .story-section button{font-size:19px;font-weight:800;padding:22px 32px;min-height:68px;min-width:min(100%,340px)}
#root .intro-section button:hover,#root .story-section button:hover{box-shadow:0 0 30px #22ff3170,0 0 60px #22ff3135}
@keyframes cta-soft-pulse{0%,100%{transform:scale(1);box-shadow:0 0 20px #22ff3145,0 0 42px #22ff3120}50%{transform:scale(1.025);box-shadow:0 0 30px #22ff3170,0 0 58px #22ff3130}}
@media(prefers-reduced-motion:reduce){#root .intro-section button{animation:none}}
/* Shared button appearance requested across the full page. */
#root main button[class],#root main a[href*="pay.cakto.com.br"]{background:linear-gradient(105deg,#22ff13 0%,#52ff6d 56%,#9affc2 100%);border:1px solid #17682d;border-radius:14px;color:#07210b}
#root main button[class]:hover,#root main a[href*="pay.cakto.com.br"]:hover{background:linear-gradient(105deg,#2bff23 0%,#65ff7e 56%,#afffce 100%);border-color:#145b27}
#root main button[class] svg,#root main button[class] span{color:inherit}
#root .faq-section button{border-radius:14px}

/* Start directly with the headline after removing the hero portrait. */
#root .hero-mobile-copy{margin-top:0;padding-top:36px}
#root .hero-desktop{padding-top:44px}
#root .hero-desktop>div:first-child{margin-top:0}

/* Image placed immediately below the opening supporting copy. */
#root .hero-inline-image{display:block;width:100%;height:auto;max-width:760px;margin:24px auto;border-radius:12px}
@container sales-page (min-width: 768px){#root .hero-desktop .hero-inline-image{grid-column:2;grid-row:2;margin:0 0 24px}#root .hero-desktop .max-w-md>button{grid-row:3}#root .hero-desktop .space-y-4{grid-row:4}#root .hero-desktop h1{grid-row:1/4}}

/* Keep the mobile page centered on large screens. Responsive styles follow the page column. */
#root{container: sales-page / inline-size;width:100%;max-width:480px;margin-inline:auto;min-height:100vh;box-shadow:0 0 64px #0005}
body{background:#141614}
