:root {
--pg-blue: #1E2A38;
--pg-orange: #FF6B00;
--pg-light: #f4f7fb;
--pg-gray: #6c7a89;
--pg-border: #e7edf4;
}

html {
scroll-behavior: smooth;
}

body {
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
color: var(--pg-blue);
background-color: #fff;
}

section {
scroll-margin-top: 88px;
}

.navbar {
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--pg-border);
}

.navbar-brand {
display: inline-flex;
align-items: center;
color: var(--pg-blue);
}

.navbar-logo {
height: 38px;
width: auto;
display: block;
}

.nav-link {
color: var(--pg-blue);
font-weight: 500;
}

.nav-link:hover,
.nav-link:focus {
color: var(--pg-orange);
}

.btn-pg-primary {
background-color: var(--pg-orange);
border-color: var(--pg-orange);
color: #fff;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-pg-primary:hover,
.btn-pg-primary:focus {
background-color: #e45f00;
border-color: #e45f00;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(255, 107, 0, 0.28);
}

.btn-pg-outline {
border: 1px solid var(--pg-blue);
color: var(--pg-blue);
background-color: transparent;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-pg-outline:hover,
.btn-pg-outline:focus {
background-color: var(--pg-blue);
color: #fff;
transform: translateY(-2px);
}

.hero {
padding: 9rem 0 6rem;
background:
    radial-gradient(circle at 12% 20%, rgba(255, 107, 0, 0.12), transparent 34%),
    radial-gradient(circle at 88% 80%, rgba(30, 42, 56, 0.09), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f7fafe 100%);
}

.hero h1 {
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 800;
line-height: 1.1;
}

.hero p {
font-size: 1.1rem;
color: var(--pg-gray);
max-width: 540px;
}

.hero-visual {
background: linear-gradient(145deg, #ffffff, #f2f6fb);
border: 1px solid var(--pg-border);
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 20px 45px rgba(30, 42, 56, 0.12);
}

.hero-icon {
width: 88px;
height: 88px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 107, 0, 0.12);
color: var(--pg-orange);
font-size: 2rem;
margin-bottom: 1rem;
}

.section-title {
font-weight: 800;
margin-bottom: 0.75rem;
}

.section-subtitle {
color: var(--pg-gray);
max-width: 680px;
margin: 0 auto;
}

.feature-card {
background: #fff;
border: 1px solid var(--pg-border);
border-radius: 1rem;
padding: 1.5rem;
height: 100%;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(30, 42, 56, 0.09);
}

.feature-icon {
width: 52px;
height: 52px;
border-radius: 0.9rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(30, 42, 56, 0.1);
color: var(--pg-blue);
font-size: 1.25rem;
margin-bottom: 1rem;
}

.diferencial {
background-color: var(--pg-light);
border-top: 1px solid var(--pg-border);
border-bottom: 1px solid var(--pg-border);
}

.plan-card {
border: 1px solid var(--pg-border);
border-radius: 1.2rem;
background: #fff;
padding: 2rem;
height: 100%;
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 30px rgba(30, 42, 56, 0.1);
}

.plan-card.popular {
border-color: var(--pg-orange);
box-shadow: 0 16px 36px rgba(255, 107, 0, 0.15);
}

.badge-popular {
position: absolute;
top: -12px;
right: 18px;
background: var(--pg-orange);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
border-radius: 999px;
padding: 0.35rem 0.7rem;
}

.price {
font-size: 2rem;
font-weight: 800;
margin-bottom: 1rem;
}

.price small {
font-size: 0.95rem;
color: var(--pg-gray);
font-weight: 500;
}

.plan-list {
list-style: none;
padding: 0;
margin: 1.2rem 0 1.6rem;
}

.plan-list li {
margin-bottom: 0.7rem;
display: flex;
align-items: start;
gap: 0.55rem;
color: #304355;
}

.plan-list i {
color: var(--pg-orange);
}

.cta-final {
background: linear-gradient(130deg, var(--pg-blue), #2f4052);
color: #fff;
border-radius: 1.4rem;
padding: 2.5rem 2rem;
}

footer {
border-top: 1px solid var(--pg-border);
color: #556474;
}

.footer-link {
color: #556474;
text-decoration: none;
}

.footer-link:hover {
color: var(--pg-orange);
}

.fade-in {
opacity: 0;
transform: translateY(16px);
animation: fadeInUp 0.7s ease forwards;
}

.fade-delay-1 { animation-delay: 0.1s; }
.fade-delay-2 { animation-delay: 0.2s; }
.fade-delay-3 { animation-delay: 0.3s; }

@keyframes fadeInUp {
to {
    opacity: 1;
    transform: translateY(0);
}
}

@media (max-width: 991px) {
.hero {
    padding-top: 7.5rem;
}
}