/**
 * (c) Coaching Circle 2025
 */

 @font-face{font-family:Poppins;font-style:normal;font-weight:100;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiGyp8kv8JHgFVrLPTecnFBGPaTSQ.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:normal;font-weight:200;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiByp8kv8JHgFVrLFj_V15vFP-KUEg.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiByp8kv8JHgFVrLDz8V15vFP-KUEg.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiEyp8kv8JHgFVrFJXUc1NECPY.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiByp8kv8JHgFVrLGT9V15vFP-KUEg.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiByp8kv8JHgFVrLEj6V15vFP-KUEg.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiByp8kv8JHgFVrLCz7V15vFP-KUEg.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiByp8kv8JHgFVrLDD4V15vFP-KUEg.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:normal;font-weight:900;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiByp8kv8JHgFVrLBT5V15vFP-KUEg.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:italic;font-weight:100;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiAyp8kv8JHgFVrJJLmE3tAOvODSVFF.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:italic;font-weight:200;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiDyp8kv8JHgFVrJJLmv1plFd2PQEhcqw.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:italic;font-weight:300;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiDyp8kv8JHgFVrJJLm21llFd2PQEhcqw.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:italic;font-weight:400;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiGyp8kv8JHgFVrJJLecnFBGPaTSQ.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:italic;font-weight:500;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiDyp8kv8JHgFVrJJLmg1hlFd2PQEhcqw.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:italic;font-weight:600;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiDyp8kv8JHgFVrJJLmr19lFd2PQEhcqw.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:italic;font-weight:700;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiDyp8kv8JHgFVrJJLmy15lFd2PQEhcqw.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:italic;font-weight:800;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiDyp8kv8JHgFVrJJLm111lFd2PQEhcqw.woff2') format('woff2');}
    @font-face{font-family:Poppins;font-style:italic;font-weight:900;font-display:fallback;src:url('https://eu.coachingcircle.app/wp-content/uploads/fonts/pxiDyp8kv8JHgFVrJJLm81xlFd2PQEhcqw.woff2') format('woff2');}
 

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--background: 0 0% 100%;
--foreground: 210 20% 15%;
--primary: 210 85% 28%;
--primary-foreground: 0 0% 100%;
--secondary: 210 15% 95%;
--secondary-foreground: 210 20% 20%;
--muted: 210 15% 95%;
--muted-foreground: 210 10% 50%;
--accent: 210 60% 45%;
--accent-foreground: 0 0% 100%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 100%;
--border: 210 15% 88%;
--input: 210 15% 96%;
--ring: 210 85% 28%;
--paypal-blue: 210 85% 28%;
--paypal-sky: 210 60% 45%;
--paypal-light: 210 15% 98%;
--paypal-gray: 210 10% 50%;
--paypal-dark: 210 20% 15%;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Poppins', sans-serif;
background: hsl(var(--background));
color: hsl(var(--foreground));
line-height: 1.6;
height: 100vh;
}


.wp-site-blocks {
	height: 100%;
}
#jumbotron {
	background: #0b4784 !important;
}

.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}

/* Header Styles */
header {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid hsla(var(--border), 0.2);
}

.header-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
}

.logo-section {
display: flex;
align-items: center;
gap: 0.75rem;
}

.logo-box {
width: 3rem;
height: 3rem;
background: linear-gradient(135deg, hsl(var(--paypal-sky)), hsl(210, 50%, 55%));
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px -2px hsla(var(--paypal-blue), 0.12);
}

.logo-text {
color: white;
font-weight: bold;
font-size: 1.25rem;
}

.logo-link {
font-size: 1.5rem;
font-weight: bold;
color: hsl(var(--paypal-blue));
text-decoration: none;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-link:hover {
color: hsl(var(--paypal-sky));
}

nav {
display: none;
align-items: center;
gap: 1.5rem;
}

@media (min-width: 768px) {
nav {
  display: flex;
}
}

nav a {
font-weight: 500;
color: hsl(var(--paypal-gray));
text-decoration: none;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

nav a:hover {
color: hsl(var(--paypal-blue));
}

.btn {
padding: 0.75rem 2rem;
border: none;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'Poppins', sans-serif;
}

.btn-primary {
background: hsl(var(--paypal-blue));
color: white;
}

.btn-primary:hover {
opacity: 0.9;
}

/* Hero Section */
.hero-section {
position: relative;
overflow: hidden;
background: hsl(var(--paypal-blue));
padding-bottom: 42px;
}

@media (min-width: 1024px) {
.hero-section {
  padding-bottom: 0;
}
}

.hero-ellipse {
position: absolute;
inset: 0;
background-image: url('src/assets/ellipse4.png');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
top: 35%;
transform: translateY(-50%);
opacity: 0.5;
}

.hero-badges-mobile {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding-top: 1.5rem;
}

@media (min-width: 768px) {
.hero-badges-mobile {
  display: none;
}
}

.hero-badges-desktop {
position: absolute;
top: 1.5rem;
left: 1.5rem;
display: none;
align-items: center;
gap: 2rem;
}

@media (min-width: 768px) {
.hero-badges-desktop {
  display: flex;
}
}

.hero-social-desktop {
position: absolute;
top: 1.5rem;
right: 1.5rem;
display: none;
align-items: center;
gap: 1rem;
}

@media (min-width: 768px) {
.hero-social-desktop {
  display: flex;
}
}

.social-icon {
padding: 0.5rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.1);
color: white;
text-decoration: none;
display: inline-flex;
transition: background 0.3s;
}

.social-icon:hover {
background: rgba(255, 255, 255, 0.2);
}

.hero-content {
text-align: center;
max-width: 72rem;
margin: 0 auto;
padding-top: min(12vw, 136px);
padding-bottom: 0;
}

@media (min-width: 1024px) {
.hero-content {
  padding-bottom: 92px;
}
}

.hero-headline {
font-size: 3rem;
font-weight: bold;
color: white;
line-height: 1.2;
margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
.hero-headline {
  font-size: 4.5rem;
}
}

.hero-highlight {
font-size: 180%;
color: rgb(255, 158, 221);
font-weight: 800;
display: block;
}

.hero-subtitle {
color: #ffffff;
transform: skewX(-2deg);
display: block;
}

.hero-description {
font-size: 1.5rem;
font-weight: 600;
color: rgb(255, 238, 185);
max-width: 56rem;
margin: 0 auto 3rem;
}

/* Form Styles */
.form-container {
max-width: 48rem;
margin: 0 auto;
position: relative;
}

.form-overlay {
position: absolute;
inset: 0;
background: rgba(107, 114, 128, 0.5);
backdrop-filter: blur(0.5rem);
border-radius: 1.5rem;
z-index: 10;
display: none;
align-items: center;
justify-content: center;
}

.form-overlay.active {
display: flex;
}

.spinner {
width: 3rem;
height: 3rem;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

form {
background: rgba(255, 255, 255, 0.93);
backdrop-filter: blur(0.5rem);
padding: 2rem;
border-radius: 1.5rem;
box-shadow: 0 8px 30px -5px hsla(var(--paypal-blue), 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-title {
font-size: 2.5rem;
font-weight: bold;
color: hsl(var(--paypal-blue));
text-align: center;
margin: 0.5rem auto 1.25rem;
}

.form-subtitle {
color: hsl(var(--paypal-gray));
text-align: center;
margin-bottom: 1.5rem;
}

.form-grid {
display: grid;
gap: 1rem;
}

@media (min-width: 768px) {
.form-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
}

.form-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--paypal-blue));
text-align: left;
}

.required {
color: rgb(220, 38, 38);
}

input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid hsla(194.1, 89.6%, 49.2%, 0.38);
border-radius: 0.75rem;
font-size: 1.12rem;
font-family: 'Poppins', sans-serif;
transition: border-color 0.3s;
}

input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: hsl(var(--paypal-sky));
}

input.error,
select.error,
textarea.error {
border-color: rgb(239, 68, 68);
}

input:disabled,
select:disabled,
textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
}

.error-message {
color: rgb(239, 68, 68);
font-size: 0.875rem;
margin-top: 0.25rem;
}

.char-counter {
font-size: 0.875rem;
color: rgb(255, 43, 162);
text-align: right;
}

textarea {
min-height: 8rem;
resize: vertical;
}

.optional-field input {
border-color: rgb(193, 228, 190);
}

.optional-field input:focus {
border-color: rgb(193, 228, 190);
}

.tooltip-wrapper {
position: relative;
display: inline-block;
}

.info-icon {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 1.25rem;
height: 1.25rem;
color: rgb(156, 163, 175);
cursor: help;
}

.tooltip {
visibility: hidden;
position: absolute;
z-index: 50;
background: hsl(var(--foreground));
color: white;
padding: 0.5rem;
border-radius: 0.5rem;
font-size: 0.875rem;
max-width: 20rem;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}

.info-icon:hover + .tooltip {
visibility: visible;
opacity: 1;
}

input[type="file"] {
border: none;
padding: 0.75rem 0;
}

input[type="file"]::file-selector-button {
margin-right: 1rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border: none;
background: hsl(var(--paypal-sky));
color: white;
font-size: 0.875rem;
cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
background: hsl(var(--paypal-blue));
}

.submit-btn {
width: 100%;
height: 3.5rem;
font-size: 1.125rem;
font-weight: bold;
border-radius: 1rem;
background: rgb(255, 43, 162);
color: white;
border: none;
cursor: pointer;
margin-top: 1rem;
font-family: 'Poppins', sans-serif;
}

.submit-btn:hover:not(:disabled) {
opacity: 0.9;
}

.submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* Modal Styles */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 50;
background: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
padding: 1rem;
}

.modal-overlay.active {
display: flex;
}

.modal-content {
background: white;
border-radius: 1rem;
padding: 2rem;
max-width: 32rem;
width: 100%;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-title {
font-size: 1.5rem;
font-weight: bold;
color: rgb(22, 163, 74);
text-align: center;
margin-bottom: 1rem;
}

.modal-emoji {
font-size: 5rem;
text-align: center;
margin: 1rem 0;
}

.modal-box {
background: rgb(220, 252, 231);
border: 1px solid rgb(134, 239, 172);
padding: 1rem;
border-radius: 0.5rem;
margin: 1.5rem 0;
}

.modal-box p {
color: rgb(22, 101, 52);
font-weight: 500;
}

.modal-btn {
width: 100%;
background: rgb(22, 163, 74);
color: white;
font-weight: bold;
padding: 0.75rem;
border: none;
border-radius: 0.5rem;
cursor: pointer;
font-family: 'Poppins', sans-serif;
}

.modal-btn:hover {
background: rgb(21, 128, 61);
}

.error-modal .modal-content {
max-width: 28rem;
}

.error-modal .modal-title {
color: rgb(220, 38, 38);
}

.error-modal .modal-btn {
background: rgb(220, 38, 38);
}

.error-modal .modal-btn:hover {
background: rgb(185, 28, 28);
}

/* Section Styles */
.section {
padding: 4rem 0;
}

.cta-section {
background: linear-gradient(to bottom, hsla(var(--paypal-light), 0.3), white);
padding: 4rem 0 6rem;
}

.cta-box {
background: linear-gradient(to right, hsl(var(--paypal-blue)), hsl(var(--paypal-sky)));
padding: 3rem;
border-radius: 1.5rem;
color: white;
box-shadow: 0 8px 30px -5px hsla(var(--paypal-blue), 0.15);
max-width: 56rem;
margin: 0 auto;
text-align: center;
}

.cta-box h3 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
.cta-box h3 {
  font-size: 2.25rem;
}
}

.cta-btn {
height: 4rem;
padding: 0 2.5rem;
font-size: 1.25rem;
font-weight: bold;
border-radius: 1rem;
background: rgb(255, 175, 73);
color: white;
border: none;
cursor: pointer;
min-width: 250px;
font-family: 'Poppins', sans-serif;
}

.cta-btn:hover {
opacity: 0.9;
}

/* Pricing Section */
.pricing-section {
padding: 8rem 0;
background: hsl(var(--paypal-blue));
color: white;
position: relative;
overflow: hidden;
}

.pricing-bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 800px 600px at 50% 50%, hsla(var(--paypal-sky), 0.1), transparent);
}

.pricing-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
color: white;
padding: 0.5rem 1rem;
border-radius: 9999px;
margin-bottom: 1.5rem;
font-weight: 600;
}

.pricing-title {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 2rem;
text-align: center;
}

@media (min-width: 1024px) {
.pricing-title {
  font-size: 3.75rem;
}
}

.pricing-subtitle {
color: rgb(251, 216, 149);
display: block;
}

.pricing-description {
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.8);
max-width: 48rem;
margin: 0 auto 5rem;
text-align: center;
}

.pricing-card {
max-width: 42rem;
margin: 0 auto;
padding: 3rem;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(0.5rem);
border-radius: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
}

.pricing-badge-top {
position: absolute;
top: 0;
right: 0;
background: linear-gradient(135deg, hsl(var(--paypal-sky)), hsl(210, 50%, 55%));
padding: 0.5rem 1.5rem;
border-bottom-left-radius: 1rem;
font-weight: bold;
color: white;
}

.pricing-card h3 {
font-size: 2rem;
font-weight: bold;
margin: 2rem 0 1.5rem;
text-align: center;
}

@media (min-width: 1024px) {
.pricing-card h3 {
  font-size: 2.25rem;
  margin-top: 0;
}
}

.pricing-price {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}

.price-large {
font-size: 5.5rem;
font-weight: bold;
}

@media (min-width: 1024px) {
.price-large {
  font-size: 6rem;
}
}

.price-details {
text-align: left;
}

.price-old {
color: rgba(255, 255, 255, 0.6);
text-decoration: line-through;
font-size: 1.5rem;
}

.price-period {
color: white;
font-size: 1.25rem;
}

.pricing-note {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 3rem;
font-size: 1.125rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.pricing-features {
list-style: none;
margin-bottom: 3rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}

.pricing-features li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
font-size: 1.125rem;
}

@media (min-width: 1024px) {
.pricing-features li {
  font-weight: normal;
}
}

.check-icon {
width: 1.5rem;
height: 1.5rem;
color: hsl(var(--paypal-sky));
flex-shrink: 0;
margin-top: 0.25rem;
}

.pricing-disclaimer {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
margin-top: 1.5rem;
}

/* Footer Styles */
footer {
background: white;
border-top: 1px solid hsla(var(--border), 0.2);
padding: 2rem 1.5rem;
}

.footer-content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

@media (min-width: 768px) {
.footer-content {
  flex-direction: row;
}
}

.footer-badges {
display: flex;
align-items: center;
gap: 2rem;
}

.footer-badge {
display: flex;
align-items: center;
gap: 0.5rem;
}

.footer-badge a {
color: hsl(var(--paypal-gray));
font-weight: 500;
text-decoration: none;
transition: color 0.3s;
}

.footer-badge a:hover {
color: hsl(var(--paypal-sky));
}

.footer-icon {
width: 1.25rem;
height: 1.25rem;
color: hsl(var(--paypal-sky));
}

.footer-icon-small {
width: 1rem;
height: 1rem;
display: inline;
margin-right: 0.5rem;
}

.footer-text {
font-size: 0.875rem;
color: hsl(var(--paypal-gray));
}

.footer-text a {
color: hsl(var(--paypal-gray));
text-decoration: none;
transition: color 0.3s;
}

.footer-text a:hover {
color: hsl(var(--paypal-sky));
}

//////////////////////////////////////////////////////////////////////


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--background: 0 0% 100%;
--foreground: 210 20% 15%;
--primary: 210 85% 28%;
--primary-foreground: 0 0% 100%;
--secondary: 210 15% 95%;
--secondary-foreground: 210 20% 20%;
--muted: 210 15% 95%;
--muted-foreground: 210 10% 50%;
--accent: 210 60% 45%;
--accent-foreground: 0 0% 100%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 100%;
--border: 210 15% 88%;
--input: 210 15% 96%;
--ring: 210 85% 28%;
--paypal-blue: 210 85% 28%;
--paypal-sky: 210 60% 45%;
--paypal-light: 210 15% 98%;
--paypal-gray: 210 10% 50%;
--paypal-dark: 210 20% 15%;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Poppins', sans-serif;
background: hsl(var(--background));
color: hsl(var(--foreground));
line-height: 1.6;
}

.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}

/* Header Styles */
header {
position: sticky;
top: 0;
z-index: 50;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid hsla(var(--border), 0.2);
}

.header-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
}

.logo-section {
display: flex;
align-items: center;
gap: 0.75rem;
}

.logo-box {
width: 3rem;
height: 3rem;
background: linear-gradient(135deg, hsl(var(--paypal-sky)), hsl(210, 50%, 55%));
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px -2px hsla(var(--paypal-blue), 0.12);
}

.logo-text {
color: white;
font-weight: bold;
font-size: 1.25rem;
}

.logo-link {
font-size: 1.5rem;
font-weight: bold;
color: hsl(var(--paypal-blue));
text-decoration: none;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-link:hover {
color: hsl(var(--paypal-sky));
}

nav {
display: none;
align-items: center;
gap: 1.5rem;
}

@media (min-width: 768px) {
nav {
display: flex;
}
}

nav a {
font-weight: 500;
color: hsl(var(--paypal-gray));
text-decoration: none;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

nav a:hover {
color: hsl(var(--paypal-blue));
}

.btn {
padding: 0.75rem 2rem;
border: none;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'Poppins', sans-serif;
}

.btn-primary {
background: hsl(var(--paypal-blue));
color: white;
}

.btn-primary:hover {
opacity: 0.9;
}

/* Hero Section */
.hero-section {
position: relative;
overflow: hidden;
background: hsl(var(--paypal-blue));
padding-bottom: 42px;
}

@media (min-width: 1024px) {
.hero-section {
padding-bottom: 0;
}
}

.hero-ellipse {
position: absolute;
inset: 0;
background-image: url('src/assets/ellipse4.png');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
top: 35%;
transform: translateY(-50%);
opacity: 0.5;
}

.hero-badges-mobile {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding-top: 1.5rem;
}

@media (min-width: 768px) {
.hero-badges-mobile {
display: none;
}
}

.hero-badges-desktop {
position: absolute;
top: 1.5rem;
left: 1.5rem;
display: none;
align-items: center;
gap: 2rem;
}

@media (min-width: 768px) {
.hero-badges-desktop {
display: flex;
}
}

.hero-social-desktop {
position: absolute;
top: 1.5rem;
right: 1.5rem;
display: none;
align-items: center;
gap: 1rem;
}

@media (min-width: 768px) {
.hero-social-desktop {
display: flex;
}
}

.social-icon {
padding: 0.5rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.1);
color: white;
text-decoration: none;
display: inline-flex;
transition: background 0.3s;
}

.social-icon:hover {
background: rgba(255, 255, 255, 0.2);
}

.hero-content {
text-align: center;
max-width: 72rem;
margin: 0 auto;
padding-top: min(12vw, 136px);
padding-bottom: 0;
}

@media (min-width: 1024px) {
.hero-content {
padding-bottom: 92px;
}
}

.hero-headline {
font-size: 3rem;
font-weight: bold;
color: white;
line-height: 1.2;
margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
.hero-headline {
font-size: 4.5rem;
}
}

.hero-highlight {
font-size: 180%;
color: rgb(255, 158, 221);
font-weight: 800;
display: block;
}

.hero-subtitle {
color: #ffffff;
transform: skewX(-2deg);
display: block;
}

.hero-description {
font-size: 1.5rem;
font-weight: 600;
color: rgb(255, 238, 185);
max-width: 56rem;
margin: 0 auto 3rem;
}

/* Form Styles */
.form-container {
max-width: 48rem;
margin: 0 auto;
position: relative;
}

.form-overlay {
position: absolute;
inset: 0;
background: rgba(107, 114, 128, 0.5);
backdrop-filter: blur(0.5rem);
border-radius: 1.5rem;
z-index: 10;
display: none;
align-items: center;
justify-content: center;
}

.form-overlay.active {
display: flex;
}

.spinner {
width: 3rem;
height: 3rem;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

form {
background: rgba(255, 255, 255, 0.93);
backdrop-filter: blur(0.5rem);
padding: 2rem;
border-radius: 1.5rem;
box-shadow: 0 8px 30px -5px hsla(var(--paypal-blue), 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-title {
font-size: 2.5rem;
font-weight: bold;
color: hsl(var(--paypal-blue));
text-align: center;
margin: 0.5rem auto 1.25rem;
}

.form-subtitle {
color: hsl(var(--paypal-gray));
text-align: center;
margin-bottom: 1.5rem;
}

.form-grid {
display: grid;
gap: 1rem;
}

@media (min-width: 768px) {
.form-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
}

.form-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

label {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: hsl(var(--paypal-blue));
text-align: left;
}

.required {
color: rgb(220, 38, 38);
}

input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid hsla(194.1, 89.6%, 49.2%, 0.38);
border-radius: 0.75rem;
font-size: 1.12rem;
font-family: 'Poppins', sans-serif;
transition: border-color 0.3s;
}

input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: hsl(var(--paypal-sky));
}

input.error,
select.error,
textarea.error {
border-color: rgb(239, 68, 68);
}

input:disabled,
select:disabled,
textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
}

.error-message {
color: rgb(239, 68, 68);
font-size: 0.875rem;
margin-top: 0.25rem;
}

.char-counter {
font-size: 0.875rem;
color: rgb(255, 43, 162);
text-align: right;
}

textarea {
min-height: 8rem;
resize: vertical;
}

.optional-field input {
border-color: rgb(193, 228, 190);
}

.optional-field input:focus {
border-color: rgb(193, 228, 190);
}

.tooltip-wrapper {
position: relative;
display: inline-block;
}

.info-icon {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 1.25rem;
height: 1.25rem;
color: rgb(156, 163, 175);
cursor: help;
}

.tooltip {
visibility: hidden;
position: absolute;
z-index: 50;
background: hsl(var(--foreground));
color: white;
padding: 0.5rem;
border-radius: 0.5rem;
font-size: 0.875rem;
max-width: 20rem;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}

.info-icon:hover + .tooltip {
visibility: visible;
opacity: 1;
}

input[type="file"] {
border: none;
padding: 0.75rem 0;
}

input[type="file"]::file-selector-button {
margin-right: 1rem;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
border: none;
background: hsl(var(--paypal-sky));
color: white;
font-size: 0.875rem;
cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
background: hsl(var(--paypal-blue));
}

.submit-btn {
width: 100%;
height: 3.5rem;
font-size: 1.125rem;
font-weight: bold;
border-radius: 1rem;
background: rgb(255, 43, 162);
color: white;
border: none;
cursor: pointer;
margin-top: 1rem;
font-family: 'Poppins', sans-serif;
}

.submit-btn:hover:not(:disabled) {
opacity: 0.9;
}

.submit-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* Modal Styles */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 50;
background: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: center;
padding: 1rem;
}

.modal-overlay.active {
display: flex;
}

.modal-content {
background: white;
border-radius: 1rem;
padding: 2rem;
max-width: 32rem;
width: 100%;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-title {
font-size: 1.5rem;
font-weight: bold;
color: rgb(22, 163, 74);
text-align: center;
margin-bottom: 1rem;
}

.modal-emoji {
font-size: 5rem;
text-align: center;
margin: 1rem 0;
}

.modal-box {
background: rgb(220, 252, 231);
border: 1px solid rgb(134, 239, 172);
padding: 1rem;
border-radius: 0.5rem;
margin: 1.5rem 0;
}

.modal-box p {
color: rgb(22, 101, 52);
font-weight: 500;
}

.modal-btn {
width: 100%;
background: rgb(22, 163, 74);
color: white;
font-weight: bold;
padding: 0.75rem;
border: none;
border-radius: 0.5rem;
cursor: pointer;
font-family: 'Poppins', sans-serif;
}

.modal-btn:hover {
background: rgb(21, 128, 61);
}

.error-modal .modal-content {
max-width: 28rem;
}

.error-modal .modal-title {
color: rgb(220, 38, 38);
}

.error-modal .modal-btn {
background: rgb(220, 38, 38);
}

.error-modal .modal-btn:hover {
background: rgb(185, 28, 28);
}

/* Section Styles */
.section {
padding: 4rem 0;
}

.cta-section {
background: linear-gradient(to bottom, hsla(var(--paypal-light), 0.3), white);
padding: 4rem 0 6rem;
}

.cta-box {
background: linear-gradient(to right, hsl(var(--paypal-blue)), hsl(var(--paypal-sky)));
padding: 3rem;
border-radius: 1.5rem;
color: white;
box-shadow: 0 8px 30px -5px hsla(var(--paypal-blue), 0.15);
max-width: 56rem;
margin: 0 auto;
text-align: center;
}

.cta-box h3 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
.cta-box h3 {
font-size: 2.25rem;
}
}

.cta-btn {
height: 4rem;
padding: 0 2.5rem;
font-size: 1.25rem;
font-weight: bold;
border-radius: 1rem;
background: rgb(255, 175, 73);
color: white;
border: none;
cursor: pointer;
min-width: 250px;
font-family: 'Poppins', sans-serif;
}

.cta-btn:hover {
opacity: 0.9;
}

/* Pricing Section */
.pricing-section {
padding: 8rem 0;
background: hsl(var(--paypal-blue));
color: white;
position: relative;
overflow: hidden;
}

.pricing-bg {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 800px 600px at 50% 50%, hsla(var(--paypal-sky), 0.1), transparent);
}

.pricing-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
color: white;
padding: 0.5rem 1rem;
border-radius: 9999px;
margin-bottom: 1.5rem;
font-weight: 600;
}

.pricing-title {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 2rem;
text-align: center;
}

@media (min-width: 1024px) {
.pricing-title {
font-size: 3.75rem;
}
}

.pricing-subtitle {
color: rgb(251, 216, 149);
display: block;
}

.pricing-description {
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.8);
max-width: 48rem;
margin: 0 auto 5rem;
text-align: center;
}

.pricing-card {
max-width: 42rem;
margin: 0 auto;
padding: 3rem;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(0.5rem);
border-radius: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
}

.pricing-badge-top {
position: absolute;
top: 0;
right: 0;
background: linear-gradient(135deg, hsl(var(--paypal-sky)), hsl(210, 50%, 55%));
padding: 0.5rem 1.5rem;
border-bottom-left-radius: 1rem;
font-weight: bold;
color: white;
}

.pricing-card h3 {
font-size: 2rem;
font-weight: bold;
margin: 2rem 0 1.5rem;
text-align: center;
}

@media (min-width: 1024px) {
.pricing-card h3 {
font-size: 2.25rem;
margin-top: 0;
}
}

.pricing-price {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}

.price-large {
font-size: 5.5rem;
font-weight: bold;
}

@media (min-width: 1024px) {
.price-large {
font-size: 6rem;
}
}

.price-details {
text-align: left;
}

.price-old {
color: rgba(255, 255, 255, 0.6);
text-decoration: line-through;
font-size: 1.5rem;
}

.price-period {
color: white;
font-size: 1.25rem;
}

.pricing-note {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 3rem;
font-size: 1.125rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.pricing-features {
list-style: none;
margin-bottom: 3rem;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}

.pricing-features li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
font-size: 1.125rem;
}

@media (min-width: 1024px) {
.pricing-features li {
font-weight: normal;
}
}

.check-icon {
width: 1.5rem;
height: 1.5rem;
color: hsl(var(--paypal-sky));
flex-shrink: 0;
margin-top: 0.25rem;
}

.pricing-disclaimer {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
margin-top: 1.5rem;
}

/* Footer Styles */
footer {
background: white;
border-top: 1px solid hsla(var(--border), 0.2);
padding: 2rem 1.5rem;
}

.footer-content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

@media (min-width: 768px) {
.footer-content {
flex-direction: row;
}
}

.footer-badges {
display: flex;
align-items: center;
gap: 2rem;
}

.footer-badge {
display: flex;
align-items: center;
gap: 0.5rem;
}

.footer-badge a {
color: hsl(var(--paypal-gray));
font-weight: 500;
text-decoration: none;
transition: color 0.3s;
}

.footer-badge a:hover {
color: hsl(var(--paypal-sky));
}

.footer-icon {
width: 1.25rem;
height: 1.25rem;
color: hsl(var(--paypal-sky));
}

.footer-icon-small {
width: 1rem;
height: 1rem;
display: inline;
margin-right: 0.5rem;
}

.footer-text {
font-size: 0.875rem;
color: hsl(var(--paypal-gray));
}

.footer-text a {
color: hsl(var(--paypal-gray));
text-decoration: none;
transition: color 0.3s;
}

.footer-text a:hover {
color: hsl(var(--paypal-sky));
}
