/* SUBPADI 2030 — Glassmorphic Fintech UI */

/* ── Design tokens ── */
:root {
    --brand-coral: #e45e10;
    --brand-pink: #c2185b;
    --brand-purple: #313054;
    --brand-deep: #0f0e1f;
    --bg-soft: #f8f7ff;
    --bg-dark: #0c0b1a;
    --gradient-brand: linear-gradient(135deg, #e45e10 0%, #c2185b 50%, #313054 100%);
    --gradient-brand-h: linear-gradient(90deg, #e45e10 0%, #c2185b 50%, #313054 100%);
    --gradient-glow: linear-gradient(135deg, rgba(228,94,16,0.15) 0%, rgba(194,24,91,0.08) 50%, rgba(49,48,84,0.05) 100%);
    --gradient-hero: linear-gradient(160deg, #0c0b1a 0%, #1a1635 40%, #0f0e1f 100%);
    --glass-bg: rgba(255,255,255,0.55);
    --glass-bg-dark: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.18);
    --glass-border-dark: rgba(255,255,255,0.08);
    --glass-blur: blur(20px) saturate(180%);
    --shadow-soft: 0 2px 8px rgba(15,14,31,0.04), 0 8px 32px rgba(15,14,31,0.06);
    --shadow-elevated: 0 4px 16px rgba(15,14,31,0.06), 0 20px 60px rgba(15,14,31,0.1);
    --shadow-glow-coral: 0 8px 40px rgba(228,94,16,0.2), 0 2px 12px rgba(228,94,16,0.1);
    --shadow-glass: 0 8px 32px rgba(0,0,0,0.08);
    --radius-md: 1rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.75rem;
    --radius-2xl: 2rem;
    --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Global resets ── */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(228,94,16,0.15); color: var(--brand-deep); }
.section-divider { border: none; height: 1px; background: linear-gradient(90deg, transparent, rgba(228,94,16,0.12), transparent); margin: 0; }

/* ── Gradient text ── */
.gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Buttons ── */
.btn-gradient {
    background: var(--gradient-brand);
    box-shadow: var(--shadow-glow-coral);
    transition: all 0.4s var(--transition-smooth);
    position: relative; overflow: hidden;
}
.btn-gradient::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    opacity: 0; transition: opacity 0.3s ease;
}
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 12px 50px rgba(228,94,16,0.3), 0 4px 16px rgba(228,94,16,0.15); }
.btn-gradient:hover::before { opacity: 1; }

.btn-outline {
    transition: all 0.3s var(--transition-smooth);
}
.btn-outline:hover { background: var(--brand-purple); color: white; border-color: var(--brand-purple); }

.btn-glass {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: white; transition: all 0.3s var(--transition-smooth);
}
.btn-glass:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }

/* ── Glass cards ── */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-glass);
    transition: all 0.4s var(--transition-smooth);
    position: relative; overflow: hidden;
}
.glass-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
}
.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
    border-color: rgba(228,94,16,0.15);
}

.glass-card-dark {
    background: var(--glass-bg-dark);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-dark);
    border-radius: var(--radius-xl);
    transition: all 0.4s var(--transition-smooth);
    position: relative; overflow: hidden;
}
.glass-card-dark::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.glass-card-dark:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-4px);
}

/* ── Sheen effect on glass cards ── */
.glass-sheen { position: relative; overflow: hidden; }
.glass-sheen::after {
    content: ''; position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,0.06) 45%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.06) 55%,
        transparent 60%
    );
    transform: translateX(-100%) rotate(0deg);
    animation: sheen 6s var(--sheen-delay, 0s) infinite;
}
@keyframes sheen {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

/* ── Icon box ── */
.icon-box {
    transition: all 0.3s var(--transition-smooth);
}
.glass-card:hover .icon-box,
.feature-card:hover .icon-box {
    transform: scale(1.1) rotate(4deg);
}

/* ── Glass icon (Jeroid-style) ── */
.glass-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(228,94,16,0.1) 0%, rgba(194,24,91,0.06) 100%);
    border: 1px solid rgba(228,94,16,0.08);
    transition: all 0.3s ease;
}

/* ── Feature card (accent border on hover) ── */
.feature-card {
    transition: all 0.4s var(--transition-smooth);
    position: relative;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
}

.accent-card { position: relative; overflow: hidden; }
.accent-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: var(--gradient-brand); transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s var(--transition-smooth);
}
.accent-card:hover::after { transform: scaleX(1); }

/* ── Hero section ── */
.hero-dark {
    background: var(--gradient-hero);
    position: relative; overflow: hidden;
}
.hero-blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.4;
    animation: blobFloat 14s ease-in-out infinite alternate;
}
.hero-blob-1 {
    width: 500px; height: 500px; top: -15%; right: -10%;
    background: radial-gradient(closest-side, rgba(228,94,16,0.25), transparent 70%);
}
.hero-blob-2 {
    width: 400px; height: 400px; bottom: -10%; left: -5%;
    background: radial-gradient(closest-side, rgba(194,24,91,0.2), transparent 70%);
    animation-delay: -7s;
}
.hero-blob-3 {
    width: 300px; height: 300px; top: 40%; left: 50%;
    background: radial-gradient(closest-side, rgba(49,48,84,0.3), transparent 70%);
    animation-delay: -3s; animation-duration: 10s;
}
@keyframes blobFloat {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
    100% { transform: translate(10px, -10px) scale(1.02); }
}

/* Hero badge pill */
.hero-badge-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 18px 6px 12px; border-radius: 100px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
}
.hero-badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.5);
    animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

/* ── Phone float ── */
.float-anim {
    animation: phoneFloat 6s ease-in-out infinite;
}
@keyframes phoneFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* Mobile: phone as faded centered bg */
.hero-mobile-phone {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90%; max-width: 400px;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}
.hero-mobile-phone img {
    width: 100%; height: auto;
    filter: brightness(1.8);
}

/* Hero phone glow */
.hero-phone-glow {
    position: relative;
}
.hero-phone-glow::after {
    content: ''; position: absolute; bottom: -20%; left: 10%; right: 10%; height: 60%;
    background: radial-gradient(ellipse at center, rgba(228,94,16,0.2) 0%, transparent 70%);
    filter: blur(40px); z-index: -1;
}

/* ── Stats bar (dark) ── */
.stats-bar-dark {
    background: var(--bg-dark);
    position: relative;
}
.stats-bar-dark::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(228,94,16,0.2), transparent);
}

/* ── Convert widget ── */
.convert-widget {
    background: white;
    border-radius: var(--radius-2xl);
    box-shadow: 0 4px 24px rgba(15,14,31,0.06), 0 24px 80px rgba(15,14,31,0.08);
    border: 1px solid rgba(0,0,0,0.04);
    overflow: hidden;
}

/* ── Pillar cards (large, with glass effect) ── */
.pillar-card {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    transition: all 0.4s var(--transition-smooth);
    position: relative; overflow: hidden;
}
.pillar-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gradient-brand);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.5s var(--transition-smooth);
}
.pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
    border-color: rgba(228,94,16,0.1);
}
.pillar-card:hover::before { transform: scaleX(1); }

/* ── Differentiator section ── */
.diff-hero-card {
    background: linear-gradient(135deg, #fef7f0 0%, #fff5f5 50%, #f8f7ff 100%);
    border: 1px solid rgba(228,94,16,0.08);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}
.diff-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 100px;
    background: rgba(228,94,16,0.08);
    color: var(--brand-coral); font-size: 13px; font-weight: 700;
}

/* ── Bills grid ── */
.bill-card {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: all 0.3s var(--transition-smooth);
    text-decoration: none; display: block;
}
.bill-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
    border-color: rgba(228,94,16,0.12);
}

/* ── How it works steps ── */
.step-card {
    position: relative; padding-left: 4.5rem;
}
.step-number {
    position: absolute; left: 0; top: 0;
    width: 3.5rem; height: 3.5rem; border-radius: 1rem;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem; color: white;
    background: var(--gradient-brand);
    box-shadow: var(--shadow-glow-coral);
}

/* ── Trust section (dark) ── */
.trust-dark {
    background: var(--bg-dark);
    position: relative; overflow: hidden;
}
.trust-dark::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(228,94,16,0.06) 0%, transparent 70%);
    transform: translate(-50%, -50%); filter: blur(60px);
}
.trust-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
    transition: all 0.3s var(--transition-smooth);
}
.trust-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    transform: translateY(-3px);
}
.trust-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(228,94,16,0.15) 0%, rgba(194,24,91,0.1) 100%);
    flex-shrink: 0;
}

/* ── Testimonial cards ── */
.testimonial-card {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: all 0.3s var(--transition-smooth);
}
.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
}
.testimonial-quote {
    font-size: 1rem; line-height: 1.75; color: #4b5563;
    position: relative; padding-left: 1.25rem;
    border-left: 3px solid; border-image: var(--gradient-brand) 1;
}

/* ── FAQ ── */
.faq-item {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}
.faq-item:hover { border-color: rgba(228,94,16,0.12); }
.faq-item summary {
    list-none; cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] { box-shadow: var(--shadow-soft); }

/* ── CTA section ── */
.cta-glow {
    position: relative; overflow: hidden;
    background: var(--gradient-hero);
}
.cta-glow::before {
    content: ''; position: absolute; top: -50%; right: -20%;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(228,94,16,0.15) 0%, transparent 70%);
    filter: blur(60px);
}

/* ── Footer ── */
.footer-link {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: color 0.25s ease;
    display: inline-block;
}
.footer-link:hover { color: white; }
.social-icon {
    transition: all 0.25s var(--transition-smooth);
}
.social-icon:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
}
.store-badge {
    transition: all 0.3s var(--transition-smooth);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/* ── Scroll reveal ── */
[data-animate] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 0.7s var(--transition-smooth), transform 0.7s var(--transition-smooth);
}
[data-animate].is-visible {
    opacity: 1; transform: translateY(0);
}
[data-animate-img] {
    opacity: 0; transform: scale(0.96);
    transition: opacity 0.8s var(--transition-smooth), transform 0.8s var(--transition-smooth);
}
[data-animate-img].is-visible {
    opacity: 1; transform: scale(1);
}

/* ── Mobile menu ── */
.mobile-menu {
    display: none !important;
}
.mobile-menu.is-open {
    display: flex !important;
    flex-direction: column;
}

/* ── Navbar scrolled state ── */
#navbar.is-scrolled {
    background: rgba(255,255,255,0.92);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.06);
}

/* ── Marquee (for crypto ticker or logos) ── */
.marquee-track {
    display: flex; gap: 2rem;
    animation: marqueeScroll 30s linear infinite;
}
@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .hero-blob { opacity: 0.2; }
    .hero-blob-1 { width: 300px; height: 300px; }
    .hero-blob-2 { width: 250px; height: 250px; }
    .hero-blob-3 { display: none; }
}