/* ---------- Design tokens ---------- */
:root {
--background: #fbfdfd;
--foreground: #1f2d33;
--card: #ffffff;
--muted: #f2f6f6;
--muted-foreground: #000000;
--primary: #4e72de;
--primary-dark: #147e89;
--primary-foreground: #ffffff;
--secondary: #e7f2f3;
--accent: #f4e2b8;
--accent-foreground: #6b5620;
--border: #dbe6e7;
--radius: 0.75rem;
--maxw: 72rem;
--font-sans: "Inter", system-ui, sans-serif;
--font-display: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
background: var(--background);
}
body {
font-family: var(--font-sans);
color: var(--foreground);
background: var(--background);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
h1,
h2,
h3 {
font-family: var(--font-display);
line-height: 1.15;
letter-spacing: -0.02em;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* ---------- Layout helpers ---------- */
.container {
width: 100%;
max-width: var(--maxw);
margin: 0 auto;
padding: 0 1.25rem;
}
.section {
padding: 4rem 0;
}
@media (min-width: 768px) {
.section {
    padding: 6rem 0;
}
}
.eyebrow {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--primary);
}
.section-head {
max-width: 42rem;
margin: 0 auto;
text-align: center;
}
.section-head h2 {
margin-top: 0.75rem;
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
}
.section-head p {
margin-top: 1rem;
color: var(--muted-foreground);
}

/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-weight: 600;
font-size: 0.95rem;
padding: 0.7rem 1.4rem;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-lg {
padding: 0.85rem 1.7rem;
font-size: 1rem;
}
.btn-primary {
background: var(--primary);
color: var(--primary-foreground);
}
.btn-primary:hover {
background: var(--primary-dark);
}
.btn-outline {
background: transparent;
border-color: var(--border);
color: var(--foreground);
}
.btn-outline:hover {
background: var(--muted);
}
.btn-block {
width: 100%;
}

/* ---------- Header ---------- */
header.site {
position: sticky;
top: 0;
z-index: 50;
background: rgba(251, 253, 253, 0.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
}
.brand {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
}
.brand .logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 0.6rem;
background: var(--primary);
color: var(--primary-foreground);
}
.nav-links {
display: none;
align-items: center;
gap: 2rem;
list-style: none;
}
.nav-links a {
font-size: 0.9rem;
font-weight: 500;
color: var(--muted-foreground);
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--foreground);
}
.nav-cta {
display: none;
}
.menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: none;
background: transparent;
color: var(--foreground);
cursor: pointer;
border-radius: 0.5rem;
}
.mobile-menu {
display: none;
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem 0 1rem;
border-top: 1px solid var(--border);
}
.mobile-menu.open {
display: flex;
}
.mobile-menu a {
padding: 0.75rem 0.5rem;
border-radius: 0.5rem;
font-size: 0.95rem;
font-weight: 500;
color: var(--muted-foreground);
}
.mobile-menu a:hover {
background: var(--muted);
color: var(--foreground);
}
@media (min-width: 768px) {
.nav-links,
.nav-cta {
    display: flex;
}
.menu-toggle,
.mobile-menu {
    display: none !important;
}
}

/* ---------- Hero ---------- */
.hero-grid {
display: grid;
gap: 3rem;
align-items: center;
padding: 4rem 0;
}
@media (min-width: 768px) {
.hero-grid {
    grid-template-columns: 1fr 1fr;
    padding: 6rem 0;
}
}
.pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid rgba(24, 153, 166, 0.25);
background: var(--secondary);
color: var(--primary);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.35rem 0.8rem;
border-radius: 999px;
}
.hero-grid h1 {
margin-top: 1.25rem;
font-size: clamp(2.25rem, 6vw, 3.75rem);
font-weight: 800;
}
.hero-grid .lead {
margin-top: 1.25rem;
max-width: 30rem;
font-size: 1.125rem;
color: var(--muted-foreground);
}
.hero-actions {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
@media (min-width: 480px) {
.hero-actions {
    flex-direction: row;
}
}
.hero-stats {
margin-top: 2.5rem;
display: flex;
gap: 2rem;
}
.hero-stat {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
font-weight: 500;
}
.hero-stat svg {
color: var(--primary);
}
.hero-media {
position: relative;
}
.hero-media .glow {
position: absolute;
inset: -1rem;
border-radius: 1.5rem;
background: rgba(24, 153, 166, 0.1);
}
.hero-media img {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 1rem;
box-shadow: 0 20px 40px -12px rgba(20, 60, 66, 0.25);
}

/* ---------- Cards / grids ---------- */
.grid-3 {
display: grid;
gap: 1.5rem;
margin-top: 3.5rem;
}
@media (min-width: 768px) {
.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
}
.card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1.75rem;
}
.card.hoverable {
transition: box-shadow 0.2s;
}
.card.hoverable:hover {
box-shadow: 0 12px 28px -14px rgba(20, 60, 66, 0.28);
}
.icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 0.85rem;
background: rgba(24, 153, 166, 0.12);
color: var(--primary);
margin-bottom: 1.25rem;
}
.card h3 {
font-size: 1.15rem;
font-weight: 600;
}
.card p {
margin-top: 0.5rem;
font-size: 0.925rem;
color: var(--muted-foreground);
}
.step-label {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 700;
color: var(--primary);
display: block;
margin-bottom: 1rem;
}

/* ---------- Alt sections ---------- */
.alt {
background: var(--secondary);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

/* ---------- Adaptation block ---------- */
.adapt {
margin-top: 4rem;
display: grid;
gap: 2.5rem;
align-items: center;
border: 1px solid var(--border);
background: var(--secondary);
border-radius: 1.5rem;
padding: 1.75rem;
}
@media (min-width: 768px) {
.adapt {
    grid-template-columns: 1fr 1fr;
    padding: 2.5rem;
}
}
.adapt img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 1rem;
box-shadow: 0 16px 32px -14px rgba(20, 60, 66, 0.25);
}
.adapt h3 {
font-size: 1.5rem;
font-weight: 700;
}
.adapt p {
margin-top: 0.75rem;
color: var(--muted-foreground);
}
.check-list {
margin-top: 1.5rem;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.check-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.925rem;
}
.check-list svg {
flex-shrink: 0;
color: var(--primary);
margin-top: 0.15rem;
}

/* ---------- Pricing ---------- */
.price-card {
max-width: 28rem;
margin: 3rem auto 0;
border: 1px solid var(--border);
border-radius: 1.5rem;
overflow: hidden;
background: var(--card);
box-shadow: 0 12px 30px -16px rgba(20, 60, 66, 0.25);
}
.price-head {
background: var(--primary);
color: var(--primary-foreground);
text-align: center;
padding: 2rem;
}
.price-head .tag {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.9;
}
.price-amount {
margin-top: 0.75rem;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 0.25rem;
}
.price-amount .num {
font-family: var(--font-display);
font-size: 3rem;
font-weight: 800;
}
.price-amount .per {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 0.35rem;
}
.price-head .note {
margin-top: 0.5rem;
font-size: 0.875rem;
opacity: 0.9;
}
.price-body {
padding: 2rem;
}
.free-banner {
background: rgba(244, 226, 184, 0.6);
color: var(--accent-foreground);
text-align: center;
font-weight: 600;
font-size: 0.9rem;
padding: 0.75rem 1rem;
border-radius: 0.6rem;
}
.price-body ul {
margin-top: 1.5rem;
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
}
.price-body li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.925rem;
}
.tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 999px;
background: rgba(24, 153, 166, 0.12);
color: var(--primary);
flex-shrink: 0;
margin-top: 0.1rem;
}
.price-body .btn {
margin-top: 2rem;
}

/* ---------- Testimonials ---------- */
.quote {
display: flex;
flex-direction: column;
}
.quote blockquote {
flex: 1;
color: var(--foreground);
}
.quote figcaption {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.75rem;
}
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 999px;
background: rgba(24, 153, 166, 0.12);
color: var(--primary);
font-family: var(--font-display);
font-weight: 700;
}
.quote .name {
display: block;
font-size: 0.9rem;
font-weight: 600;
}
.quote .role {
display: block;
font-size: 0.8rem;
color: var(--muted-foreground);
}

/* ---------- Contact ---------- */
.contact {
background: var(--primary);
color: var(--primary-foreground);
border-top: 1px solid var(--border);
}
.contact-grid {
display: grid;
gap: 3rem;
}
@media (min-width: 768px) {
.contact-grid {
    grid-template-columns: 1fr 1fr;
}
}
.contact h2 {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 700;
}
.contact .lead {
margin-top: 1rem;
max-width: 28rem;
opacity: 0.9;
}
.contact-items {
display: grid;
gap: 1.5rem;
}
@media (min-width: 480px) {
.contact-items {
    grid-template-columns: 1fr 1fr;
}
}
.contact-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 1rem;
padding: 1.5rem;
}
.contact-item dt {
display: flex;
align-items: center;
gap: 0.75rem;
}
.contact-item .ci-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.6rem;
background: rgba(255, 255, 255, 0.15);
}
.contact-item .ci-label {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.9;
}
.contact-item dd {
margin-top: 1rem;
font-size: 0.9rem;
}
.contact-item dd a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}

/* ---------- Footer ---------- */
footer.site {
background: var(--background);
border-top: 1px solid var(--border);
}
.footer-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem 0;
text-align: center;
}
@media (min-width: 768px) {
.footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
}
}
.footer-inner .brand .logo {
width: 2rem;
height: 2rem;
}
.footer-inner p {
font-size: 0.875rem;
color: var(--muted-foreground);
}

/* ---------- Login popup ---------- */
.login-modal {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(31, 45, 51, 0.55);
backdrop-filter: blur(4px);
}

.login-modal.open {
display: flex;
}

.login-modal-card {
position: relative;
width: 100%;
max-width: 460px;
max-height: 90vh;
overflow-y: auto;
background: var(--card);
border: 1px solid var(--border);
border-radius: 1rem;
box-shadow: 0 24px 60px rgba(20, 60, 66, 0.28);
}

.login-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem 0;
}

.login-modal-title {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 700;
}

.login-modal-close {
width: 2.25rem;
height: 2.25rem;
border: 0;
border-radius: 0.5rem;
background: transparent;
color: var(--muted-foreground);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
}

.login-modal-close:hover {
background: var(--muted);
color: var(--foreground);
}

.login-modal-body {
padding: 1.25rem 1.5rem 1.5rem;
}

.login-modal-body .form-group {
margin-bottom: 1rem;
}

.login-modal-body label {
display: block;
margin-bottom: 0.4rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--foreground);
}

.login-modal-body input {
display: block;
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: #fff;
color: var(--foreground);
font: inherit;
outline: none;
}

.login-modal-body input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(24, 153, 166, 0.12);
}

.login-modal-body #loginBtn {
width: 100%;
margin-top: 0.5rem;
}

body.login-modal-open {
overflow: hidden;
}

@media (max-width: 480px) {
.login-modal {
    padding: 0.75rem;
}

.login-modal-card {
    max-height: 95vh;
}

.login-modal-header {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}

.login-modal-body {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}
}

/* Cookie Consent Popup */

#cookiePolicyModal {
    position: fixed;
    z-index: 10001 !important;
}

.cookie-consent-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(31, 45, 51, 0.35);
    backdrop-filter: blur(5px);
    backdrop:static;
    keyboard:false;

}

.cookie-consent-modal.open {
    display: flex;
}

.cookie-consent-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(20, 60, 66, 0.32);
    overflow: hidden;
}

.cookie-consent-header {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--border);
}

.cookie-consent-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--foreground);
}

.cookie-consent-body {
    padding: 1rem 1.1rem 1.1rem;
}

.cookie-consent-copy {
    padding-right: 0.25rem;
}

.cookie-consent-copy p {
    margin: 0 0 0.45rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--foreground);
}

.cookie-consent-copy a {
    display: inline-block;
    margin-top: 0.15rem;
    color: var(--muted-foreground);
    font-size: 0.82rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-consent-copy a:hover {
    color: var(--foreground);
}

.cookie-essential-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--muted);
    cursor: pointer;
}

.cookie-check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 1.8rem;
    border-radius: 0.45rem;
    background: #20b76b;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}

.cookie-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--foreground);
}

.cookie-checkbox-wrap input {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.cookie-accept-btn {
    display: block;
    width: 100%;
    min-height: 42px;
    margin-top: 0.85rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--primary);
    border-radius: 0.7rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.cookie-accept-btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Cookie Error Popup */

.cookie-error-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(31, 45, 51, 0.45);
    backdrop-filter: blur(3px);
}

.cookie-error-modal.open {
    display: flex;
}

.cookie-error-card {
    width: 100%;
    max-width: 380px;
    padding: 1.5rem;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(20, 60, 66, 0.3);
}

.cookie-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.8rem;
    border-radius: 50%;
    background: #f4e2b8;
    color: #6b5620;
    font-size: 1.4rem;
    font-weight: 800;
}

.cookie-error-card h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--foreground);
}

.cookie-error-card p {
    margin-top: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted-foreground);
}

.cookie-error-ok-btn {
    width: 100%;
    min-height: 42px;
    margin-top: 1rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--primary);
    border-radius: 0.7rem;
    background: var(--primary);
    color: var(--primary-foreground);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.cookie-error-ok-btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

@media (max-width: 480px) {

    .cookie-consent-modal,
    .cookie-error-modal {
        padding: 0.75rem;
    }

    .cookie-consent-card {
        max-width: 100%;
    }

    .cookie-consent-header {
        padding: 0.9rem 1rem;
    }

    .cookie-consent-body {
        padding: 0.9rem 1rem 1rem;
    }
}