/* ══════════════════════════════════════════
   PROSETIC DESIGN SYSTEM
   Shared styles across all pages
═══════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
    --color-primary: #0D2F4B;
    --color-accent: #00A99D;
    --color-accent-dark: #008C81;
    --color-accent-glow: rgba(0,169,157,0.35);
    --color-surface: #F8FAFB;
    --color-surface-warm: #F5F7F8;
    --color-border: rgba(13,47,75,0.06);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-luxury: cubic-bezier(0.22, 0.68, 0, 1.04);
}

html { scrollbar-width: none; }
body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    color: #374151;
    background-color: var(--color-surface);
    -ms-overflow-style: none;
}
body::-webkit-scrollbar { display: none; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-primary);
}

/* ── Floating Island Nav ── */
#navbar {
    transition: all 700ms var(--ease-spring);
}
#navbar.scrolled {
    background-color: rgba(255,255,255,0.88);
    box-shadow:
        0 0 0 1px rgba(13,47,75,0.05),
        0 8px 40px rgba(13,47,75,0.08),
        0 0 60px rgba(0,169,157,0.04);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* ── Logo ── */
.logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: block;
}
.logo-img-footer {
    height: 72px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.90;
}

/* ── Entry Animations ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.fade-up-1 { animation: fadeUp 0.8s 0.15s var(--ease-out-expo) both; }
.fade-up-2 { animation: fadeUp 0.8s 0.30s var(--ease-out-expo) both; }
.fade-up-3 { animation: fadeUp 0.8s 0.45s var(--ease-out-expo) both; }
.fade-up-4 { animation: fadeUp 0.8s 0.60s var(--ease-out-expo) both; }

/* ── Scroll reveal ── */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
    transition: opacity 800ms var(--ease-spring),
                transform 800ms var(--ease-spring),
                filter 800ms var(--ease-spring);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
    .fade-up-1, .fade-up-2, .fade-up-3, .fade-up-4 {
        animation: none;
    }
    .reveal {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* ── Section divider — Eyebrow pill ── */
.section-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 1rem;
    padding: 0.35rem 1rem;
    background: rgba(0,169,157,0.08);
    border: 1px solid rgba(0,169,157,0.12);
    border-radius: 999px;
}

/* ── Cards — Double-Bezel ── */
.card-outer {
    background: rgba(13,47,75,0.02);
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    padding: 6px;
    transition: all 600ms var(--ease-spring);
    position: relative;
}
.card-outer::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 2rem;
    background: linear-gradient(135deg, rgba(0,169,157,0.0) 0%, rgba(0,169,157,0.0) 100%);
    transition: background 600ms var(--ease-spring);
    pointer-events: none;
    z-index: 0;
}
.card-outer:hover::before {
    background: linear-gradient(135deg, rgba(0,169,157,0.12) 0%, rgba(0,169,157,0.03) 100%);
}
.card-outer:hover {
    box-shadow:
        0 0 0 1px rgba(0,169,157,0.10),
        0 24px 64px rgba(13,47,75,0.10),
        0 0 80px rgba(0,169,157,0.06);
    transform: translateY(-6px);
}
.card-inner {
    background: white;
    border-radius: calc(2rem - 6px);
    padding: 2rem;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.8);
    height: 100%;
    position: relative;
    z-index: 1;
}

.icon-wrap {
    width: 56px; height: 56px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(0,169,157,0.10) 0%, rgba(0,169,157,0.04) 100%);
    border: 1px solid rgba(0,169,157,0.12);
    color: var(--color-accent);
    margin: 0 auto 1.25rem;
    flex-shrink: 0;
    transition: all 500ms var(--ease-spring);
}
.card-outer:hover .icon-wrap,
.group:hover .icon-wrap {
    background: linear-gradient(135deg, rgba(0,169,157,0.16) 0%, rgba(0,169,157,0.08) 100%);
    border-color: rgba(0,169,157,0.22);
    box-shadow: 0 0 24px rgba(0,169,157,0.12);
    transform: scale(1.06);
}

/* ── Stats banner ── */
.stat-number {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    line-height: 1;
    background: linear-gradient(180deg, #ffffff 30%, rgba(110,231,226,0.7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.stat-card {
    padding: 1.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1.5rem;
    transition: all 500ms var(--ease-spring);
}
.stat-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(110,231,226,0.15);
    transform: translateY(-2px);
}

/* ── Accordion ── */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 500ms var(--ease-spring);
}

/* ── FAQ card — Double-Bezel ── */
.faq-outer {
    background: rgba(13,47,75,0.02);
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    padding: 6px;
}
.faq-inner {
    background: white;
    border-radius: calc(2rem - 6px);
    overflow: hidden;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.8);
}

/* ── CTA Button — Button-in-Button ── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-accent);
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    padding: 0.875rem 1.25rem 0.875rem 1.75rem;
    border-radius: 999px;
    box-shadow:
        0 0 0 1px rgba(0,169,157,0.15),
        0 4px 16px rgba(0,169,157,0.25);
    transition: all 500ms var(--ease-spring);
    cursor: pointer;
    text-decoration: none;
}
.btn-primary:hover {
    background: var(--color-accent-dark);
    box-shadow:
        0 0 0 1px rgba(0,169,157,0.20),
        0 8px 32px rgba(0,169,157,0.30),
        0 0 60px rgba(0,169,157,0.15);
}
.btn-primary:active { transform: scale(0.96); }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    transition: all 500ms var(--ease-spring);
    flex-shrink: 0;
}
.btn-primary:hover .btn-icon {
    background: rgba(255,255,255,0.25);
    transform: translateX(2px) translateY(-1px) scale(1.05);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: white;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    padding: 0.875rem 2rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.30);
    transition: all 500ms var(--ease-spring);
    cursor: pointer;
    text-decoration: none;
}
.btn-outline:hover {
    border-color: rgba(255,255,255,0.60);
    background: rgba(255,255,255,0.06);
}

/* ── btn-outline on light backgrounds ── */
.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--color-primary);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    padding: 0.875rem 2rem;
    border-radius: 999px;
    border: 1.5px solid rgba(13,47,75,0.20);
    transition: all 500ms var(--ease-spring);
    cursor: pointer;
    text-decoration: none;
}
.btn-outline-dark:hover {
    border-color: rgba(13,47,75,0.40);
    background: rgba(13,47,75,0.03);
}

/* ── Nav links ── */
.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748B;
    text-decoration: none;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    transition: all 400ms var(--ease-spring);
}
.nav-link:hover {
    color: var(--color-primary);
    background: rgba(13,47,75,0.04);
}
.nav-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.nav-link.active {
    color: var(--color-primary);
    background: rgba(13,47,75,0.06);
    font-weight: 600;
}

/* ── Grain overlay ── */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px;
}

/* ── Mobile nav overlay ── */
.mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(255,255,255,0.90);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms var(--ease-spring);
}
.mobile-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.mobile-overlay .mobile-link {
    opacity: 0;
    transform: translateY(20px);
    transition: all 500ms var(--ease-spring);
}
.mobile-overlay.open .mobile-link {
    opacity: 1;
    transform: translateY(0);
}
.mobile-overlay.open .mobile-link:nth-child(1) { transition-delay: 80ms; }
.mobile-overlay.open .mobile-link:nth-child(2) { transition-delay: 140ms; }
.mobile-overlay.open .mobile-link:nth-child(3) { transition-delay: 200ms; }
.mobile-overlay.open .mobile-link:nth-child(4) { transition-delay: 260ms; }
.mobile-overlay.open .mobile-link:nth-child(5) { transition-delay: 320ms; }
.mobile-overlay.open .mobile-link:nth-child(6) { transition-delay: 380ms; }
.mobile-overlay.open .mobile-link:nth-child(7) { transition-delay: 440ms; }

/* ── Hamburger morph ── */
.hamburger-line {
    display: block;
    width: 22px;
    height: 1.5px;
    background: #475569;
    border-radius: 2px;
    transition: all 400ms var(--ease-spring);
    transform-origin: center;
}
.hamburger-open .hamburger-line:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}
.hamburger-open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger-open .hamburger-line:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* ── Form inputs ── */
.form-input {
    width: 100%;
    padding: 0.875rem 1.25rem;
    border: 1.5px solid rgba(13,47,75,0.10);
    border-radius: 1rem;
    font-size: 0.9375rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: rgba(13,47,75,0.015);
    transition: all 400ms var(--ease-spring);
    outline: none;
}
.form-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(0,169,157,0.08);
    background: white;
}
.form-input::placeholder {
    color: #94A3B8;
}

/* ── Trust badges hero ── */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255,255,255,0.88);
    backdrop-filter: blur(4px);
}

/* ── Hero background base ── */
.hero-bg {
    background-image:
        linear-gradient(135deg, rgba(13,47,75,0.97) 0%, rgba(13,47,75,0.92) 50%, rgba(0,169,157,0.18) 100%),
        url('https://images.unsplash.com/photo-1580582932707-520aed937b7b?q=80&w=1932&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.hero-bg::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,169,157,0.15) 0%, transparent 70%);
    top: -10%;
    right: -10%;
    animation: heroOrb1 12s ease-in-out infinite alternate;
    pointer-events: none;
}
.hero-bg::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,47,75,0.4) 0%, transparent 70%);
    bottom: -20%;
    left: -5%;
    animation: heroOrb2 15s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes heroOrb1 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-60px, 40px) scale(1.15); }
}
@keyframes heroOrb2 {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(40px, -30px) scale(1.1); }
}

/* ── Testimonial quote ── */
.testimonial-quote {
    position: relative;
    padding-left: 1.5rem;
}
.testimonial-quote::before {
    content: '\201C';
    position: absolute;
    left: -0.25rem;
    top: -0.75rem;
    font-size: 4rem;
    font-weight: 800;
    color: rgba(0,169,157,0.12);
    line-height: 1;
    font-family: 'Plus Jakarta Sans', serif;
}

/* ── Section glow separator ── */
.section-glow {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,169,157,0.3) 50%, transparent 100%);
}

/* ── Page hero (inner pages, lighter) ── */
.page-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #0A2440 60%, rgba(0,169,157,0.3) 100%);
    padding-top: 7rem;
}

/* ── Pricing table ── */
.price-tag {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-accent);
}
.price-from {
    font-size: 0.75rem;
    font-weight: 400;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Footer glow ── */
.footer-glow-line {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,169,157,0.4) 30%, rgba(0,169,157,0.6) 50%, rgba(0,169,157,0.4) 70%, transparent 100%);
}

/* ── Floating number counter animation ── */
@keyframes counterPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ── Dark section ── */
.section-dark {
    background: linear-gradient(135deg, #0D2F4B 0%, #081E33 60%, #0D2F4B 100%);
    position: relative;
    overflow: hidden;
}
.section-dark::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,169,157,0.08) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ── Heading gradient accent ── */
.heading-accent {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1A4A6E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Nav link subtle glow on active ── */
.nav-link.active {
    color: var(--color-primary);
    background: rgba(0,169,157,0.08);
    font-weight: 600;
    box-shadow: 0 0 12px rgba(0,169,157,0.06);
}