/* ==========================================================================
   Component Styles
   ========================================================================== */

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px 0;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.3s var(--ease-out-expo);
}

.nav__logo:hover {
    transform: scale(1.05);
}

.nav__logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.nav__logo-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    min-height: 44px;
    background: var(--text-primary);
    color: var(--bg-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 100px;
    transition: all 0.3s var(--ease-out-expo);
    animation: pulse-glow 3s ease-in-out infinite;
}

.nav__cta:hover {
    transform: scale(1.08);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
    animation: none;
}

.nav__cta:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

        .nav__right {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .nav__lang {
            padding: 6px 12px;
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.875rem;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .nav__lang:hover {
            color: var(--text-primary);
            border-color: var(--border-color-hover);
            background: rgba(255, 255, 255, 0.05);
        }

        /* ==========================================================================
           Hero Section - Asymmetric Layout
           ========================================================================== */
        .hero {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 60px;
            padding: 140px 24px 80px 10%;
            position: relative;
            overflow: hidden;
        }

        .hero > * {
            grid-column: 1;
        }

        .hero__phones {
            grid-column: 2;
            grid-row: 1 / -1;
        }

        /* Animated background grid */
        .hero__bg {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
            animation: grid-float 20s ease-in-out infinite;
        }

        @keyframes grid-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-30px); }
        }

        /* Gradient orbs - Enhanced visibility */
        .hero__orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(120px);
            opacity: 0.6;
            animation: orb-float 20s ease-in-out infinite;
            pointer-events: none;
        }

        .hero__orb--1 {
            width: 600px;
            height: 600px;
            background: var(--accent-blue);
            top: -250px;
            left: -150px;
        }

        .hero__orb--2 {
            width: 500px;
            height: 500px;
            background: var(--accent-purple);
            bottom: -200px;
            right: -150px;
            animation-delay: -7s;
        }

        .hero__orb--3 {
            width: 400px;
            height: 400px;
            background: var(--accent-pink);
            top: 40%;
            right: 10%;
            animation-delay: -14s;
        }

        @keyframes orb-float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(30px, -30px) scale(1.05); }
            66% { transform: translate(-20px, 20px) scale(0.95); }
        }

        .hero__badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 20px;
            background: rgba(23, 23, 23, 0.8);
            backdrop-filter: blur(12px);
            border: 1px solid var(--border-color);
            border-radius: 100px;
            font-size: 0.875rem;
            color: var(--text-secondary);
            margin-bottom: 32px;
            animation: fade-up 1s var(--ease-out-expo) forwards;
            opacity: 0;
            box-shadow:
                0 4px 20px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

        /* Consolidated Social Proof - subtle single line */
        .hero__social-proof {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 24px;
            font-size: 0.875rem;
            color: var(--text-muted);
            animation: fade-up 0.8s var(--ease-out-expo) forwards;
            opacity: 0;
        }

        .hero__social-proof-item {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .hero__social-proof-item svg {
            flex-shrink: 0;
        }

        .hero__social-proof-divider {
            color: var(--border-color);
            font-size: 0.75rem;
        }

        .hero__social-proof-item--highlight {
            color: var(--accent-blue);
        }

        .hero__social-proof-dot {
            width: 6px;
            height: 6px;
            background: var(--accent-green);
            border-radius: 50%;
            animation: pulse-dot 2s ease-in-out infinite;
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(1.3); }
        }

        .hero__title {
            font-family: var(--font-display);
            font-size: clamp(3.5rem, 9vw, 6.5rem);
            font-weight: 800;
            line-height: 0.95;
            letter-spacing: -0.05em;
            max-width: 850px;
            text-wrap: balance;
            margin-bottom: 2rem;
            text-align: left;
            animation: fadeInUp 0.8s var(--ease-out-expo) 0.2s forwards;
            opacity: 0;
            text-shadow: 0 0 80px rgba(59, 130, 246, 0.3);
        }

        .hero__title .gradient-text {
            display: inline;
            font-size: 1em;
            line-height: inherit;
        }

        .hero__subtitle {
            font-family: var(--font-body);
            font-size: clamp(1.125rem, 2vw, 1.375rem);
            color: var(--text-secondary);
            max-width: 600px;
            margin-bottom: 3rem;
            line-height: 1.6;
            text-align: left;
            animation: fadeInUp 0.8s var(--ease-out-expo) 0.4s forwards;
            opacity: 0;
        }

        /* Hero Store Badges - Primary CTA */
        .hero__store-badges {
            display: flex;
            flex-direction: row;
            gap: 16px;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 2rem;
            animation: fadeInUp 0.8s var(--ease-out-expo) 0.6s forwards;
            opacity: 0;
        }

        .hero__store-badge {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 24px;
            background: var(--bg-card);
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 14px;
            text-decoration: none;
            color: var(--text-primary);
            transition: all 0.3s var(--ease-out-expo);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .hero__store-badge:hover {
            background: var(--bg-card-hover);
            border-color: var(--accent-blue);
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
        }

        .hero__store-badge--coming {
            opacity: 0.5;
            pointer-events: none;
        }

        .hero__store-badge-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        .hero__store-badge-text {
            display: flex;
            flex-direction: column;
            text-align: left;
        }

        .hero__store-badge-small {
            font-size: 0.6875rem;
            color: var(--text-muted);
            line-height: 1.2;
        }

        .hero__store-badge-name {
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.2;
        }

        @keyframes fade-up {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .hero__cta-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            margin-bottom: 0;
            animation: fade-up 1s var(--ease-out-expo) 0.3s forwards;
            opacity: 0;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 32px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 100px;
            text-decoration: none;
            transition: all 0.4s var(--ease-out-expo);
            cursor: pointer;
            border: none;
        }

        .btn--primary {
            background: var(--accent-blue);
            color: white;
            position: relative;
            overflow: hidden;
            font-weight: 600;
            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
        }

        .btn--primary:hover {
            background: #2563eb;
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
        }

        .btn--primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                transparent,
                rgba(0, 0, 0, 0.1),
                transparent);
            transition: left 0.5s ease;
        }

        .btn--primary:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow:
                0 20px 40px rgba(255, 255, 255, 0.15),
                0 0 60px rgba(255, 255, 255, 0.1);
        }

        .btn--primary:hover::before {
            left: 100%;
        }

        .btn--secondary {
            background: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border-color);
            position: relative;
            overflow: hidden;
        }

        .btn--secondary::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.05) 0%,
                transparent 50%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .btn--secondary:hover {
            background: var(--bg-card);
            border-color: var(--border-color-hover);
            transform: translateY(-2px);
        }

        .btn--secondary:hover::before {
            opacity: 1;
        }

        .btn__icon {
            width: 20px;
            height: 20px;
        }

        /* Keyboard Focus States (Accessibility) */
        .btn:focus-visible,
        .nav__cta:focus-visible,
        .app-store-badge:focus-visible {
            outline: 3px solid var(--accent-blue);
            outline-offset: 3px;
        }

        .btn:focus:not(:focus-visible),
        .nav__cta:focus:not(:focus-visible),
        .app-store-badge:focus:not(:focus-visible) {
            outline: none;
        }

        a:focus-visible {
            outline: 2px solid var(--accent-blue);
            outline-offset: 2px;
            border-radius: 4px;
        }

        /* Phone mockup */
        .hero__phones {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: -40px;
            position: relative;
            animation: fade-up 1s var(--ease-out-expo) 0.4s forwards;
            opacity: 0;
        }

        .phone {
            position: relative;
            width: 260px;
            height: 540px;
            background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #0f0f0f 100%);
            border-radius: 44px;
            padding: 10px;
            box-shadow:
                0 50px 100px -20px rgba(0, 0, 0, 0.7),
                0 25px 50px -10px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.15),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3);
            animation: float 6s ease-in-out infinite;
        }

        /* Phone frame details */
        .phone::before {
            content: '';
            position: absolute;
            top: 50%;
            right: -2px;
            transform: translateY(-50%);
            width: 3px;
            height: 60px;
            background: linear-gradient(180deg, #3a3a3a, #2a2a2a, #3a3a3a);
            border-radius: 0 2px 2px 0;
        }

        .phone::after {
            content: '';
            position: absolute;
            top: 25%;
            left: -2px;
            width: 3px;
            height: 35px;
            background: linear-gradient(180deg, #3a3a3a, #2a2a2a, #3a3a3a);
            border-radius: 2px 0 0 2px;
        }

        .phone--center {
            z-index: 3;
            transform: scale(1.25) rotate(-2deg);
            box-shadow:
                0 50px 100px rgba(0, 0, 0, 0.5),
                0 0 80px rgba(59, 130, 246, 0.2);
            transition: transform 0.5s var(--ease-out-expo);
        }

        .phone--center:hover {
            transform: scale(1.28) rotate(-1deg);
        }

        .phone--left,
        .phone--right {
            display: none; /* Simplified hero - single phone focus */
        }

        /* Feature section phone - fills container */
        .phone--feature {
            width: 100%;
            height: 100%;
            animation: none;
            transform: none;
        }

        .phone--feature .phone__screen {
            display: flex;
            flex-direction: column;
        }

        .phone--feature .phone__content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .phone--feature .phone__content--center {
            justify-content: center;
            align-items: center;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        .phone--center {
            animation: float 6s ease-in-out infinite;
            transform: scale(1.1); /* Larger single phone */
        }

        .phone__screen {
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #0f1419 0%, #0a0d10 100%);
            border-radius: 34px;
            overflow: hidden;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* Dynamic Island style notch */
        .phone__notch {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 90px;
            height: 28px;
            background: #000;
            border-radius: 20px;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10px;
        }

        .phone__notch::before {
            content: '';
            width: 8px;
            height: 8px;
            background: radial-gradient(circle, #1a3a5c 0%, #0a1520 70%);
            border-radius: 50%;
            box-shadow: 0 0 3px rgba(59, 130, 246, 0.3);
        }

        .phone__statusbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            font-size: 11px;
            font-weight: 600;
            color: #fff;
        }

        .phone__statusbar-time {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: -0.2px;
        }

        .phone__statusbar-icons {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .phone__statusbar-icon {
            width: 14px;
            height: 14px;
            opacity: 0.9;
        }

        .phone__statusbar-battery {
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .phone__statusbar-battery svg {
            width: 20px;
            height: 20px;
            opacity: 0.9;
        }

        .phone__statusbar-battery-level {
            font-size: 11px;
            font-weight: 600;
            opacity: 0.9;
            letter-spacing: -0.2px;
        }

        .phone__content {
            display: flex;
            flex-direction: column;
            height: calc(100% - 44px);
            overflow: hidden;
            background: #0f1419;
        }

        /* App UI Components */
        .app-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .app-header__title {
            font-size: 22px;
            font-weight: 700;
            color: #fff;
        }

        .app-header__avatar {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            border-radius: 50%;
        }

        /* Circles visualization in phone */
        .app-circles {
            position: relative;
            width: 180px;
            height: 180px;
            margin: 0 auto 20px;
        }

        .app-circle {
            position: absolute;
            border: 2px solid;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .app-circle--outer {
            width: 180px;
            height: 180px;
            border-color: rgba(59, 130, 246, 0.2);
        }

        .app-circle--middle {
            width: 120px;
            height: 120px;
            border-color: rgba(59, 130, 246, 0.4);
        }

        .app-circle--inner {
            width: 60px;
            height: 60px;
            border-color: rgba(59, 130, 246, 0.8);
            background: rgba(59, 130, 246, 0.1);
        }

        .app-circle__dot {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #3b82f6;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        }

        /* Friend list items in phone */
        .app-friend {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            margin-bottom: 8px;
        }

        .app-friend__avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
        }

        .app-friend__info {
            flex: 1;
        }

        .app-friend__name {
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 2px;
        }

        .app-friend__status {
            font-size: 11px;
            color: #6b7280;
        }

        .app-friend__badge {
            width: 8px;
            height: 8px;
            background: #3b82f6;
            border-radius: 50%;
        }

        /* Stats in phone */
        .app-stat {
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.2);
            border-radius: 12px;
            padding: 12px;
            text-align: center;
            margin-bottom: 8px;
        }

        .app-stat__number {
            font-size: 24px;
            font-weight: 700;
            color: #3b82f6;
        }

        .app-stat__label {
            font-size: 10px;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Reminder card in phone */
        .app-reminder {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
            border: 1px solid rgba(59, 130, 246, 0.3);
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 12px;
        }

        .app-reminder__header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .app-reminder__icon {
            width: 24px;
            height: 24px;
            background: #3b82f6;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .app-reminder__title {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
        }

        .app-reminder__text {
            font-size: 11px;
            color: #9ca3af;
            line-height: 1.4;
        }

        .app-reminder__time {
            font-size: 10px;
            color: #3b82f6;
            margin-top: 8px;
        }

        /* Bottom Navigation Bar with wave cutout */
        .app-navbar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 56px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 0;
        }

        .app-navbar__bg {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 56px;
        }

        .app-navbar__wave {
            fill: #1a1d21;
        }

        .app-navbar__left,
        .app-navbar__right {
            display: flex;
            flex: 1;
            height: 56px;
        }

        .app-navbar__left {
            justify-content: space-around;
            padding-left: 8px;
            padding-right: 40px;
        }

        .app-navbar__right {
            justify-content: space-around;
            padding-left: 40px;
            padding-right: 8px;
        }

        .app-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            flex: 1;
            height: 100%;
            opacity: 0.5;
        }

        .app-nav-item--active {
            opacity: 1;
        }

        .app-nav-item svg {
            width: 22px;
            height: 22px;
            color: #99CCFA;
        }

        .app-nav-item span {
            font-size: 10px;
            color: #99CCFA;
            font-weight: 500;
        }

        .app-fab {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 52px;
            height: 52px;
            background: linear-gradient(135deg, #2C638B 0%, #3b82f6 100%);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                0 6px 20px rgba(44, 99, 139, 0.5),
                0 2px 8px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            z-index: 5;
        }

        .app-fab svg {
            width: 26px;
            height: 26px;
            color: #fff;
        }

        /* Dashboard Insight Cards */
        .app-insights {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 12px;
        }

        .app-insight {
            background: rgba(44, 99, 139, 0.08);
            border: 1px solid rgba(44, 99, 139, 0.15);
            border-radius: 12px;
            padding: 10px;
        }

        .app-insight__icon {
            width: 28px;
            height: 28px;
            background: rgba(44, 99, 139, 0.2);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
        }

        .app-insight__icon svg {
            width: 14px;
            height: 14px;
            color: #99CCFA;
        }

        .app-insight__value {
            font-size: 18px;
            font-weight: 700;
            color: #99CCFA;
        }

        .app-insight__label {
            font-size: 9px;
            color: #6b7280;
        }

        /* Activity Chart */
        .app-chart {
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .app-chart__title {
            font-size: 11px;
            color: #6b7280;
            margin-bottom: 10px;
        }

        .app-chart__bars {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            height: 50px;
            gap: 6px;
        }

        .app-chart__bar {
            flex: 1;
            background: linear-gradient(to top, #2C638B, #3b82f6);
            border-radius: 3px;
            min-width: 20px;
        }

        .app-chart__labels {
            display: flex;
            justify-content: space-between;
            margin-top: 6px;
        }

        .app-chart__label {
            font-size: 8px;
            color: #6b7280;
            text-align: center;
            flex: 1;
        }

        /* Circle color indicators */
        .app-friend__circle {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-left: auto;
        }

        .app-friend__circle--inner {
            background: #003352;
            box-shadow: 0 0 6px rgba(0, 51, 82, 0.6);
        }

        .app-friend__circle--personal {
            background: #074B72;
            box-shadow: 0 0 6px rgba(7, 75, 114, 0.6);
        }

        .app-friend__circle--social {
            background: #2C638B;
            box-shadow: 0 0 6px rgba(44, 99, 139, 0.6);
        }

        /* Updated friend card with due badge */
        .app-friend__due {
            font-size: 9px;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
        }

        .app-friend__due--soon {
            background: rgba(168, 168, 255, 0.2);
            color: #A8A8FF;
        }

        .app-friend__due--urgent {
            background: rgba(255, 180, 171, 0.2);
            color: #FFB4AB;
        }

        .app-friend__due--ok {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
        }

        /* What's Next section styling */
        .app-section-title {
            font-size: 12px;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
        }

        /* ==========================================================================
           Material 3 Phone Mockup Components - Accurate App Representation
           SCALED DOWN for realistic phone preview
           ========================================================================== */

        /* M3 Toolbar - Compact */
        /* DARK THEME - Toolbar */
        .m3-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            background: #0f1419;
        }

        .m3-toolbar__icon {
            width: 18px;
            height: 18px;
            color: #99CCFA;
            opacity: 0.9;
            flex-shrink: 0;
        }

        .m3-toolbar__title {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
            letter-spacing: -0.02em;
        }

        .m3-toolbar__badge {
            position: relative;
        }

        .m3-toolbar__badge::after {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 6px;
            height: 6px;
            background: #FFB4AB;
            border-radius: 50%;
        }

        /* DARK THEME - Tab Bar */
        .m3-tabs {
            display: flex;
            background: #0f1419;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 0 8px;
        }

        .m3-tab {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 8px 2px;
            position: relative;
            opacity: 0.5;
            transition: opacity 0.2s ease;
        }

        .m3-tab--active {
            opacity: 1;
        }

        .m3-tab svg {
            width: 16px;
            height: 16px;
            color: #99CCFA;
        }

        .m3-tab span:not(.m3-tab__indicator):not(.m3-tab__badge) {
            font-size: 8px;
            color: #99CCFA;
            font-weight: 500;
        }

        .m3-tab__indicator {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 2px;
            background: #99CCFA;
            border-radius: 2px 2px 0 0;
        }

        .m3-tab__badge-wrap {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .m3-tab__badge {
            position: absolute;
            top: -3px;
            right: -6px;
            min-width: 10px;
            height: 10px;
            background: #FFB4AB;
            color: #410002;
            font-size: 6px;
            font-weight: 600;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 2px;
        }

        /* M3 Card List - Compact */
        .m3-card-list {
            padding: 4px 0;
            display: flex;
            flex-direction: column;
            gap: 0;
            flex: 1;
            overflow: hidden;
            background: #0f1419;
        }

        /* M3 Friend Card - Compact */
        /* DARK THEME - Friend Card */
        .m3-friend-card {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 8px;
            background: rgba(255, 255, 255, 0.03);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            transition: all 0.2s ease;
        }

        .m3-friend-card__indicator {
            width: 3px;
            height: 28px;
            border-radius: 2px;
            flex-shrink: 0;
        }

        .m3-friend-card__avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
            color: #fff;
            flex-shrink: 0;
        }

        .m3-friend-card__content {
            flex: 1;
            min-width: 0;
        }

        .m3-friend-card__name {
            font-size: 10px;
            font-weight: 600;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .m3-friend-card__meta {
            font-size: 8px;
            color: #9ca3af;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .m3-friend-card__status {
            font-size: 7px;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 500;
            color: #9ca3af;
            flex-shrink: 0;
        }

        .m3-friend-card__status--overdue {
            background: rgba(251, 146, 60, 0.12);
            color: #fb923c;
        }

        .m3-friend-card__status--due {
            background: rgba(251, 191, 36, 0.15);
            color: #fbbf24;
        }

        .m3-friend-card__chevron {
            width: 12px;
            height: 12px;
            color: #6b7280;
            flex-shrink: 0;
        }

        .m3-friend-card__birthday {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
        }

        /* M3 Birthday Card - Compact */
        .m3-birthday-card {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            background: rgba(168, 168, 255, 0.08);
            border: 1px solid rgba(168, 168, 255, 0.15);
            border-radius: 10px;
        }

        .m3-birthday-card__avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 600;
            color: #fff;
            flex-shrink: 0;
        }

        .m3-birthday-card__content {
            flex: 1;
        }

        .m3-birthday-card__name {
            font-size: 9px;
            font-weight: 600;
            color: #fff;
        }

        .m3-birthday-card__date {
            font-size: 7px;
            color: #A8A8FF;
            margin-top: 1px;
        }

        .m3-birthday-card__icon {
            font-size: 12px;
        }

        /* M3 Reminder Card - Compact */
        .m3-reminder-card {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            background: rgba(44, 99, 139, 0.08);
            border: 1px solid rgba(44, 99, 139, 0.15);
            border-radius: 10px;
        }

        .m3-reminder-card--overdue {
            background: rgba(251, 146, 60, 0.08);
            border-color: rgba(251, 146, 60, 0.15);
        }

        .m3-reminder-card__icon {
            width: 24px;
            height: 24px;
            background: rgba(44, 99, 139, 0.2);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .m3-reminder-card--overdue .m3-reminder-card__icon {
            background: rgba(251, 146, 60, 0.2);
        }

        .m3-reminder-card__icon svg {
            width: 12px;
            height: 12px;
            color: #99CCFA;
        }

        .m3-reminder-card--overdue .m3-reminder-card__icon svg {
            color: #fb923c;
        }

        .m3-reminder-card__content {
            flex: 1;
        }

        .m3-reminder-card__title {
            font-size: 9px;
            font-weight: 600;
            color: #fff;
        }

        .m3-reminder-card__subtitle {
            font-size: 7px;
            color: #6b7280;
            margin-top: 1px;
        }

        .m3-reminder-card__status {
            font-size: 6px;
            padding: 2px 4px;
            border-radius: 4px;
            font-weight: 600;
            background: rgba(255, 180, 171, 0.15);
            color: #FFB4AB;
        }

        .m3-reminder-card__check {
            width: 18px;
            height: 18px;
            background: rgba(44, 99, 139, 0.2);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .m3-reminder-card__check svg {
            width: 10px;
            height: 10px;
            color: #99CCFA;
        }

        /* DARK THEME - Bottom Navigation Bar */
        .m3-bottom-nav {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding: 10px 20px;
            background: #0f1419;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            position: relative;
        }

        .m3-bottom-nav__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0.5;
            flex: 1;
            padding: 2px 0;
        }

        .m3-bottom-nav__item--active {
            opacity: 1;
        }

        .m3-bottom-nav__item svg {
            width: 18px;
            height: 18px;
            color: #99CCFA;
        }

        .m3-bottom-nav__item span {
            font-size: 7px;
            color: #99CCFA;
            font-weight: 500;
            display: none;
        }

        /* DARK THEME - FAB (Center of bottom nav) */
        .m3-fab {
            width: 40px;
            height: 40px;
            background: rgba(153, 204, 250, 0.2);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
            flex: 0 0 auto;
        }

        .m3-fab svg {
            width: 20px;
            height: 20px;
            color: #99CCFA;
        }

        /* ==========================================================================
           DARK THEME - Circles Page Mockup
           ========================================================================== */
        .m3-circles-viz {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px;
            position: relative;
            background: #0f1419;
        }

        .m3-circles-container {
            position: relative;
            width: 140px;
            height: 140px;
        }

        .m3-circle-ring {
            position: absolute;
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        /* Dark theme - light blue/lavender fills for circle rings */
        .m3-circle-ring--inner { width: 35px; height: 35px; background: rgba(153, 204, 250, 0.25); }
        .m3-circle-ring--middle { width: 65px; height: 65px; background: rgba(153, 204, 250, 0.18); }
        .m3-circle-ring--outer { width: 95px; height: 95px; background: rgba(153, 204, 250, 0.12); }
        .m3-circle-ring--work { width: 125px; height: 125px; background: rgba(153, 204, 250, 0.06); }

        .m3-circle-center {
            position: absolute;
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, #1e3a5f, #2c5282);
            border-radius: 50%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .m3-circle-node {
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5px;
            font-weight: 600;
            color: #fff;
        }

        .m3-circles-label {
            font-size: 7px;
            color: #6b7280;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .m3-circles-label::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        .m3-circles-label--intimate::before { background: #1e3a5f; }
        .m3-circles-label--personal::before { background: #3b82f6; }
        .m3-circles-label--social::before { background: #60a5fa; }
        .m3-circles-label--public::before { background: #93c5fd; }

        .m3-circles-labels {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 8px;
        }

        .m3-circle-friend {
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5px;
            font-weight: 600;
            color: #fff;
            z-index: 10;
            background: #1e3a5f;
        }

        /* Different colors for circle levels */
        .m3-circle-friend--intimate { background: #1e3a5f; }
        .m3-circle-friend--personal { background: #2563eb; }
        .m3-circle-friend--social { background: #3b82f6; }
        .m3-circle-friend--public { background: #60a5fa; }

        /* Pink indicator dot for some contacts */
        .m3-circle-friend::after {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 5px;
            height: 5px;
            background: #ec4899;
            border-radius: 50%;
            display: none;
        }

        /* Pink dots on select avatars (offset by 4 for ring divs) */
        .m3-circle-friend:nth-child(7)::after,
        .m3-circle-friend:nth-child(10)::after,
        .m3-circle-friend:nth-child(14)::after,
        .m3-circle-friend:nth-child(17)::after {
            display: block;
        }

        /* DARK THEME - Recent Friends Section */
        .m3-recent-friends {
            padding: 8px 10px;
            background: #0f1419;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .m3-recent-friends__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .m3-recent-friends__title {
            font-size: 10px;
            font-weight: 600;
            color: #fff;
        }

        .m3-recent-friends__link {
            font-size: 8px;
            color: #99CCFA;
        }

        .m3-recent-friends__list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .m3-recent-friend {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 0;
        }

        .m3-recent-friend__avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            font-weight: 600;
            color: #fff;
        }

        .m3-recent-friend__info {
            flex: 1;
        }

        .m3-recent-friend__name {
            font-size: 9px;
            font-weight: 600;
            color: #fff;
        }

        .m3-recent-friend__meta {
            font-size: 7px;
            color: #9ca3af;
        }

        /* ==========================================================================
           DARK THEME - Friend Detail Page Mockup
           ========================================================================== */
        .m3-detail-content {
            flex: 1;
            padding: 8px;
            background: #0a0d10;
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow-y: auto;
        }

        .m3-detail-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .m3-detail-card__header {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 6px;
        }

        .m3-detail-card__icon {
            width: 14px;
            height: 14px;
            color: #99CCFA;
        }

        .m3-detail-card__title {
            font-size: 10px;
            font-weight: 600;
            color: #fff;
        }

        .m3-detail-card__content {
            font-size: 9px;
            color: #9ca3af;
            line-height: 1.4;
        }

        .m3-detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 4px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .m3-detail-row:last-child {
            border-bottom: none;
        }

        .m3-detail-row__label {
            font-size: 8px;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .m3-detail-row__value {
            font-size: 9px;
            color: #fff;
            font-weight: 500;
        }

        .m3-detail-row__badge {
            font-size: 7px;
            padding: 2px 6px;
            background: #6366f1;
            color: #fff;
            border-radius: 10px;
        }

        .m3-detail-reminder {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
        }

        .m3-detail-reminder__info {
            display: flex;
            flex-direction: column;
            gap: 1px;
        }

        .m3-detail-reminder__title {
            font-size: 9px;
            color: #fff;
            font-weight: 500;
        }

        .m3-detail-reminder__date {
            font-size: 7px;
            color: #6b7280;
        }

        .m3-detail-reminder__badge {
            font-size: 7px;
            padding: 3px 8px;
            background: rgba(255, 255, 255, 0.08);
            color: #9ca3af;
            border-radius: 10px;
            font-weight: 500;
        }

        /* Hobby Tags */
        .m3-detail-card__tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 4px 0;
        }

        .m3-detail-tag {
            font-size: 7px;
            padding: 3px 8px;
            background: rgba(99, 102, 241, 0.15);
            color: #a5b4fc;
            border-radius: 10px;
            font-weight: 500;
        }

        .m3-detail-row-icon {
            width: 14px;
            height: 14px;
            color: #99CCFA;
        }

        .m3-detail-row-text {
            font-size: 8px;
            color: #fff;
        }

        .m3-detail-row-label {
            font-size: 6px;
            color: #6b7280;
            display: block;
        }

        .m3-detail-note {
            font-size: 7px;
            color: #9ca3af;
            padding: 6px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 4px;
        }

        /* Profile Avatar Header */
        .m3-profile-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            margin-bottom: 8px;
        }

        .m3-profile-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            flex-shrink: 0;
        }

        .m3-profile-info {
            flex: 1;
            min-width: 0;
        }

        .m3-profile-name {
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 2px;
        }

        .m3-profile-meta {
            font-size: 9px;
            color: #6b7280;
        }

        /* Connect Card */
        .m3-connect-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
            margin-bottom: 6px;
        }

        .m3-connect-item:last-child {
            margin-bottom: 0;
        }

        .m3-connect-icon {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(153, 204, 250, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .m3-connect-icon svg {
            width: 12px;
            height: 12px;
            color: #99CCFA;
        }

        .m3-connect-info {
            flex: 1;
            min-width: 0;
        }

        .m3-connect-label {
            font-size: 7px;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .m3-connect-value {
            font-size: 9px;
            color: #fff;
            font-weight: 500;
        }

        .m3-connect-actions {
            display: flex;
            gap: 4px;
        }

        .m3-connect-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #99CCFA;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .m3-connect-btn svg {
            width: 12px;
            height: 12px;
            color: #0a0d10;
        }

        /* Privacy Feature Card (non-phone) */
        .privacy-feature-card {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.08));
            border: 1px solid rgba(99, 102, 241, 0.2);
            border-radius: 20px;
            padding: 32px 24px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .privacy-feature-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
            animation: privacy-glow 8s ease-in-out infinite;
        }

        @keyframes privacy-glow {
            0%, 100% { transform: translate(0, 0); opacity: 0.5; }
            50% { transform: translate(10%, 10%); opacity: 0.8; }
        }

        .privacy-feature-card__content {
            position: relative;
            z-index: 1;
        }

        .privacy-feature-card__icon {
            width: 64px;
            height: 64px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #6366f1, #3b82f6);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
        }

        .privacy-feature-card__icon svg {
            width: 32px;
            height: 32px;
            color: #fff;
        }

        .privacy-feature-card__title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 8px;
        }

        .privacy-feature-card__text {
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 24px;
            max-width: 280px;
            margin-left: auto;
            margin-right: auto;
        }

        .privacy-feature-card__badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }

        .privacy-feature-card__badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 100px;
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
        }

        .privacy-feature-card__badge svg {
            width: 14px;
            height: 14px;
            color: #10b981;
        }

        /* Dashboard Screen Styles */
        .screen-dashboard {
            flex: 1;
            padding: 8px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .screen-dashboard__header {
            text-align: center;
            padding: 8px 0;
        }

        .screen-dashboard__status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 20px;
            font-size: 10px;
            font-weight: 600;
            color: #10b981;
        }

        .screen-dashboard__status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #10b981;
            animation: pulse-dot 2s ease-in-out infinite;
        }

        @keyframes pulse-dot {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(1.2); }
        }

        .screen-dashboard__stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }

        .screen-dashboard__stat {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 10px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .screen-dashboard__stat-value {
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 2px;
        }

        .screen-dashboard__stat-value--warning {
            color: #f59e0b;
        }

        .screen-dashboard__stat-value--success {
            color: #10b981;
        }

        .screen-dashboard__stat-label {
            font-size: 7px;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .screen-dashboard__chart {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .screen-dashboard__chart-title {
            font-size: 9px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .screen-dashboard__chart-icon {
            width: 12px;
            height: 12px;
            color: #99CCFA;
        }

        .screen-dashboard__bars {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            height: 50px;
            gap: 4px;
        }

        .screen-dashboard__bar {
            flex: 1;
            background: linear-gradient(to top, #3b82f6, #60a5fa);
            border-radius: 3px 3px 0 0;
            min-height: 8px;
        }

        .screen-dashboard__bar--low {
            background: linear-gradient(to top, #f59e0b, #fbbf24);
        }

        .screen-dashboard__alerts {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .screen-dashboard__alert {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 8px;
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid rgba(245, 158, 11, 0.2);
            border-radius: 8px;
            font-size: 8px;
            color: #fbbf24;
        }

        .screen-dashboard__alert-icon {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }

        /* Dashboard Kreis-Gesundheit Card */
        .screen-dashboard__circles {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .screen-dashboard__circles-title {
            font-size: 9px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .screen-dashboard__circles-icon {
            width: 12px;
            height: 12px;
            color: #99CCFA;
        }

        .screen-dashboard__circle-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 6px;
        }

        .screen-dashboard__circle-row:last-child {
            margin-bottom: 0;
        }

        .screen-dashboard__circle-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .screen-dashboard__circle-label {
            flex: 1;
            font-size: 8px;
            color: #9ca3af;
        }

        .screen-dashboard__circle-bar {
            flex: 2;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            overflow: hidden;
        }

        .screen-dashboard__circle-fill {
            height: 100%;
            border-radius: 3px;
        }

        .screen-dashboard__circle-count {
            font-size: 8px;
            color: #fff;
            font-weight: 600;
            width: 16px;
            text-align: right;
        }

        /* Dashboard Upcoming Card */
        .screen-dashboard__upcoming {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .screen-dashboard__upcoming-title {
            font-size: 9px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .screen-dashboard__upcoming-icon {
            width: 12px;
            height: 12px;
            color: #99CCFA;
        }

        .screen-dashboard__upcoming-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .screen-dashboard__upcoming-item:last-child {
            border-bottom: none;
        }

        .screen-dashboard__upcoming-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7px;
            font-weight: 600;
            color: #fff;
            flex-shrink: 0;
        }

        .screen-dashboard__upcoming-info {
            flex: 1;
            min-width: 0;
        }

        .screen-dashboard__upcoming-name {
            font-size: 8px;
            color: #fff;
            font-weight: 500;
        }

        .screen-dashboard__upcoming-type {
            font-size: 6px;
            color: #6b7280;
        }

        .screen-dashboard__upcoming-days {
            font-size: 7px;
            padding: 2px 6px;
            border-radius: 10px;
            font-weight: 600;
        }

        .screen-dashboard__upcoming-days--soon {
            background: rgba(245, 158, 11, 0.15);
            color: #fbbf24;
        }

        .screen-dashboard__upcoming-days--ok {
            background: rgba(59, 130, 246, 0.15);
            color: #60a5fa;
        }
            line-height: 1.4;
        }

        /* M3 Back button */
        .m3-back-btn {
            width: 14px;
            height: 14px;
            color: #99CCFA;
        }

        /* Birthday card */
        .app-birthday {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: rgba(168, 168, 255, 0.1);
            border: 1px solid rgba(168, 168, 255, 0.2);
            border-radius: 12px;
            margin-bottom: 8px;
        }

        .app-birthday__avatar {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #A8A8FF, #8b5cf6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            color: #fff;
        }

        .app-birthday__info {
            flex: 1;
        }

        .app-birthday__name {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
        }

        .app-birthday__date {
            font-size: 10px;
            color: #A8A8FF;
        }

        .app-birthday__icon {
            font-size: 16px;
        }

        /* Contact reminder */
        .app-contact {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: rgba(44, 99, 139, 0.1);
            border: 1px solid rgba(44, 99, 139, 0.2);
            border-radius: 12px;
            margin-bottom: 8px;
        }

        .app-contact__avatar {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #2C638B, #3b82f6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            color: #fff;
        }

        .app-contact__info {
            flex: 1;
        }

        .app-contact__name {
            font-size: 13px;
            font-weight: 600;
            color: #fff;
        }

        .app-contact__reason {
            font-size: 10px;
            color: #6b7280;
        }

        .app-contact__actions {
            display: flex;
            gap: 6px;
        }

        .app-contact__action {
            width: 28px;
            height: 28px;
            background: rgba(44, 99, 139, 0.2);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .app-contact__action svg {
            width: 14px;
            height: 14px;
            color: #99CCFA;
        }

        /* Glow behind phones */
        .hero__phones-glow {
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            animation: glow-pulse 4s ease-in-out infinite;
        }

        @keyframes glow-pulse {
            0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
            50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.1); }
        }

        /* ==========================================================================
           Floating Glassmorphic Badges (Modern 2025 Pattern)
           ========================================================================== */
        .floating-badge {
            display: none; /* Hidden - using consolidated social proof instead */
            position: absolute;
            align-items: center;
            gap: 10px;
            padding: 12px 18px;
            background: rgba(23, 23, 23, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            font-size: 0.875rem;
            color: var(--text-primary);
            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            z-index: 10;
            animation: float-badge 6s ease-in-out infinite;
            transition: all 0.3s ease;
        }

        .floating-badge:hover {
            transform: translateY(-5px) scale(1.05);
            border-color: rgba(59, 130, 246, 0.3);
            box-shadow:
                0 12px 40px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(59, 130, 246, 0.2);
        }

        .floating-badge__icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
            border-radius: 10px;
            flex-shrink: 0;
        }

        .floating-badge__icon svg {
            width: 20px;
            height: 20px;
            color: var(--accent-blue);
        }

        .floating-badge__content {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .floating-badge__value {
            font-weight: 700;
            font-size: 1rem;
            color: var(--text-primary);
        }

        .floating-badge__label {
            font-size: 0.75rem;
            color: var(--text-muted);
            white-space: nowrap;
        }

        /* Badge positions - floating around phones */
        .floating-badge--users {
            top: 15%;
            left: -5%;
            animation-delay: 0s;
        }

        .floating-badge--privacy {
            top: 25%;
            right: -8%;
            animation-delay: -2s;
        }

        .floating-badge--offline {
            bottom: 30%;
            left: -10%;
            animation-delay: -4s;
        }

        .floating-badge--rating {
            bottom: 20%;
            right: -5%;
            animation-delay: -1s;
        }

        @keyframes float-badge {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* Feature callout annotations (like Moqups wireframe) */
        .feature-callout {
            position: absolute;
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 15;
        }

        .feature-callout__number {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent-blue);
            color: white;
            font-size: 0.875rem;
            font-weight: 700;
            border-radius: 50%;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
            flex-shrink: 0;
        }

        .feature-callout__line {
            width: 40px;
            height: 2px;
            background: linear-gradient(90deg, var(--accent-blue), transparent);
        }

        .feature-callout__text {
            background: rgba(23, 23, 23, 0.9);
            backdrop-filter: blur(12px);
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 0.8rem;
            color: var(--text-secondary);
            border: 1px solid rgba(255, 255, 255, 0.1);
            white-space: nowrap;
        }

        .feature-callout--left {
            flex-direction: row-reverse;
        }

        .feature-callout--left .feature-callout__line {
            background: linear-gradient(90deg, transparent, var(--accent-blue));
        }

        /* App Store badges */
        .app-store-badges {
            display: flex;
            gap: 12px;
            justify-content: center;
            margin-top: 1rem;
            margin-bottom: 3rem;
            animation: fade-up 1s var(--ease-out-expo) 0.4s forwards;
            opacity: 0;
        }

        .app-store-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 24px;
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            text-decoration: none;
            transition: all 0.3s ease;
            color: var(--text-primary);
        }

        .app-store-badge:hover {
            background: var(--bg-card-hover);
            border-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .app-store-badge__icon {
            width: 28px;
            height: 28px;
        }

        .app-store-badge__text {
            display: flex;
            flex-direction: column;
        }

        .app-store-badge__small {
            font-size: 0.65rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .app-store-badge__name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
        }

        /* Social proof counter */
        .social-proof {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            margin-top: 24px;
            padding: 16px 32px;
            background: rgba(23, 23, 23, 0.6);
            backdrop-filter: blur(12px);
            border: 1px solid var(--border-color);
            border-radius: 100px;
            animation: fade-up 1s var(--ease-out-expo) 0.45s forwards;
            opacity: 0;
        }

        .social-proof__item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .social-proof__avatars {
            display: flex;
        }

        .social-proof__avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 2px solid var(--bg-primary);
            margin-left: -8px;
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 600;
            color: white;
        }

        .social-proof__avatar:first-child {
            margin-left: 0;
        }

        .social-proof__text {
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        .social-proof__text strong {
            color: var(--text-primary);
            font-weight: 600;
        }

        .social-proof__divider {
            width: 1px;
            height: 24px;
            background: var(--border-color);
        }

        .social-proof__rating {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .social-proof__stars {
            display: flex;
            gap: 2px;
            color: #fbbf24;
        }

        /* Hide floating badges on mobile */
        @media (max-width: 1024px) {
            .floating-badge {
                display: none;
            }
            .feature-callout {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .social-proof {
                flex-direction: column;
                gap: 12px;
                padding: 16px 24px;
                border-radius: 20px;
            }
            .social-proof__divider {
                width: 60px;
                height: 1px;
            }
            .app-store-badges {
                flex-direction: column;
                align-items: center;
            }
        }

        /* ==========================================================================
           The Difference Section (merged Problem + Not-a-CRM)
           ========================================================================== */
        .the-difference {
            padding: 120px 0;
            background: var(--bg-secondary);
            position: relative;
        }

        .the-difference__problem,
        .the-difference__solution {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .the-difference__solution {
            margin-top: 80px;
            margin-bottom: 48px;
        }

        .the-difference__label {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent-blue);
            margin-bottom: 24px;
        }

        .the-difference__title {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -0.035em;
            margin-bottom: var(--space-lg);
            text-wrap: balance;
        }

        .the-difference__highlight {
            color: var(--accent-blue);
            font-style: italic;
        }

        .the-difference__text {
            font-size: 1.125rem;
            color: var(--text-secondary);
            line-height: 1.8;
        }

        .the-difference__stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 24px;
            margin-top: 48px;
        }

        .the-difference__comparison {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 32px;
            max-width: 700px;
            margin: 0 auto 48px;
        }

        .the-difference__card {
            padding: 32px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            transition: all 0.4s var(--ease-out-expo);
        }

        .the-difference__card--other {
            background: linear-gradient(135deg, rgba(100, 100, 100, 0.08), rgba(80, 80, 80, 0.03));
        }

        .the-difference__card--keep {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(99, 102, 241, 0.06));
            border-color: rgba(59, 130, 246, 0.25);
        }

        .the-difference__card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
        }

        .the-difference__card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .the-difference__card-icon {
            font-size: 1.5rem;
        }

        .the-difference__card-title {
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .the-difference__list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .the-difference__list li {
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-secondary);
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .the-difference__list li:last-child {
            border-bottom: none;
        }

        .the-difference__card--other .the-difference__list li::before {
            content: '→';
            color: var(--text-muted);
        }

        .the-difference__card--keep .the-difference__list li::before {
            content: '✓';
            color: var(--accent-blue);
            font-weight: 600;
        }

        .the-difference__conclusion {
            max-width: 650px;
            margin: 0 auto;
            text-align: center;
            font-size: 1.125rem;
            color: var(--text-secondary);
            line-height: 1.8;
        }

        .the-difference__conclusion strong {
            color: var(--accent-blue);
            font-weight: 600;
        }

        .the-difference__sources {
            text-align: center;
            font-size: 0.75rem;
            color: var(--text-secondary);
            opacity: 0.6;
            margin-top: 16px;
            margin-bottom: 0;
        }

        .stat {
            padding: 32px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            text-align: center;
            transition: all 0.4s var(--ease-out-expo);
            position: relative;
            overflow: hidden;
            box-shadow:
                0 1px 1px rgba(0, 0, 0, 0.1),
                0 2px 2px rgba(0, 0, 0, 0.1),
                0 4px 4px rgba(0, 0, 0, 0.1);
        }

        /* Top gradient highlight */
        .stat::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, 0.1) 20%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.1) 80%,
                transparent);
        }

        /* Inner glow on hover */
        .stat::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 120%;
            height: 60%;
            background: radial-gradient(ellipse at center top,
                rgba(255, 255, 255, 0.05) 0%,
                transparent 70%);
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .stat:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: var(--border-color-hover);
            box-shadow:
                0 4px 4px rgba(0, 0, 0, 0.1),
                0 8px 8px rgba(0, 0, 0, 0.15),
                0 16px 16px rgba(0, 0, 0, 0.1),
                0 32px 32px rgba(0, 0, 0, 0.1);
        }

        .stat:hover::after {
            opacity: 1;
        }

        .stat__number {
            font-size: 3rem;
            font-weight: 800;
            letter-spacing: -0.03em;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }

        /* Unified blue color scheme for all stat numbers */
        .stat__number--red,
        .stat__number--blue {
            color: var(--accent-blue);
            text-shadow: 0 0 40px rgba(59, 130, 246, 0.3);
        }

        .stat__label {
            font-size: 0.9375rem;
            color: var(--text-muted);
            position: relative;
            z-index: 1;
        }

        /* ==========================================================================
           Features Bento Grid
           ========================================================================== */
        .features {
            padding: 120px 0;
            position: relative;
        }

        .features__header {
            text-align: center;
            margin-bottom: 64px;
        }

        .features__label {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent-blue);
            margin-bottom: 24px;
        }

        .features__title {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -0.035em;
            max-width: 600px;
            margin: 0 auto;
            text-wrap: balance;
        }

        /* ==========================================================================
           Features - Linear-style Cards with UI Graphics
           ========================================================================== */
        .features__grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        .feature-card {
            background: linear-gradient(145deg, rgba(23, 23, 23, 0.9), rgba(17, 17, 17, 0.95));
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 20px;
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            transition: all 0.4s var(--ease-out-expo);
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.08), transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .feature-card:hover {
            border-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-4px);
        }

        .feature-card:hover::before {
            opacity: 1;
        }

        .feature-card__content {
            position: relative;
            z-index: 1;
        }

        .feature-card__title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0 0 8px 0;
        }

        .feature-card__text {
            font-size: 0.9375rem;
            color: var(--text-secondary);
            line-height: 1.6;
            margin: 0;
        }

        /* Feature UI Graphics Container */
        .feature-card__graphic {
            position: relative;
            background: linear-gradient(180deg, rgba(10, 10, 10, 0.8), rgba(17, 17, 17, 0.95));
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 16px;
            padding: 20px;
            min-height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* Circles Graphic - with labels */
        .graphic-circles {
            position: relative;
            width: 200px;
            height: 200px;
        }

        .graphic-circles__ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(59, 130, 246, 0.15);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .graphic-circles__ring--outer {
            width: 200px;
            height: 200px;
            background: rgba(74, 122, 158, 0.06);
            border-color: rgba(74, 122, 158, 0.2);
        }
        .graphic-circles__ring--social {
            width: 150px;
            height: 150px;
            background: rgba(44, 99, 139, 0.08);
            border-color: rgba(44, 99, 139, 0.25);
        }
        .graphic-circles__ring--personal {
            width: 100px;
            height: 100px;
            background: rgba(7, 75, 114, 0.1);
            border-color: rgba(7, 75, 114, 0.3);
        }
        .graphic-circles__ring--intimate {
            width: 50px;
            height: 50px;
            background: rgba(0, 51, 82, 0.15);
            border-color: rgba(0, 51, 82, 0.4);
        }

        .graphic-circles__center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.625rem;
            font-weight: 600;
            color: var(--text-primary);
            z-index: 3;
        }

        .graphic-circles__avatar {
            position: absolute;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            font-size: 9px;
            font-weight: 600;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(10, 10, 10, 0.8);
            z-index: 2;
        }

        .graphic-circles__labels {
            position: absolute;
            right: -80px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .graphic-circles__label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.625rem;
            color: var(--text-muted);
        }

        .graphic-circles__label-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .graphic-circles__label-dot--intimate { background: #003352; }
        .graphic-circles__label-dot--personal { background: #074B72; }
        .graphic-circles__label-dot--social { background: #2C638B; }
        .graphic-circles__label-dot--public { background: #4A7A9E; }

        /* Reminders Graphic - Card with parallel lines to reminder cards */
        .graphic-reminders {
            position: relative;
            width: 100%;
            max-width: 360px;
            margin: 0 auto;
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
        }

        .graphic-reminders__source {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .graphic-reminders__source-card {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
            border: 1px solid rgba(59, 130, 246, 0.35);
            border-radius: 14px;
            padding: 16px 14px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.12);
            transition: all 0.3s ease;
        }

        .graphic-reminders__source-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.18);
        }

        .graphic-reminders__source-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--accent-blue), rgba(59, 130, 246, 0.8));
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        }

        .graphic-reminders__source-icon svg {
            width: 20px;
            height: 20px;
            color: #fff;
        }

        .graphic-reminders__source-label {
            font-size: 0.625rem;
            color: rgba(59, 130, 246, 0.9);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .graphic-reminders__lines {
            position: relative;
            width: 48px;
            height: 100%;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            padding: 20px 0;
        }

        .graphic-reminders__line {
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.15));
            border-radius: 2px;
            position: relative;
        }

        .graphic-reminders__line::after {
            content: '';
            position: absolute;
            right: -4px;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            background: var(--accent-blue);
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
        }

        .graphic-reminders__cards {
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
            min-width: 0;
        }

        .graphic-reminders__item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            transition: all 0.25s ease;
            cursor: default;
        }

        .graphic-reminders__item:hover {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
            border-color: rgba(255, 255, 255, 0.14);
            transform: translateX(2px);
        }

        .graphic-reminders__item-icon {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.12));
            color: rgba(59, 130, 246, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border: 1px solid rgba(59, 130, 246, 0.25);
        }

        .graphic-reminders__item-icon svg {
            width: 16px;
            height: 16px;
        }

        .graphic-reminders__item-text {
            font-size: 0.8125rem;
            color: rgba(255, 255, 255, 0.85);
            font-weight: 500;
            line-height: 1.3;
        }

        .graphic-reminders__item-date {
            font-size: 0.6875rem;
            color: rgba(255, 255, 255, 0.5);
            margin-top: 2px;
            font-weight: 400;
        }

        /* Profile Graphic - Detailed card */
        .graphic-profile {
            width: 100%;
            max-width: 260px;
        }

        .graphic-profile__card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 16px;
            overflow: hidden;
        }

        .graphic-profile__header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }

        .graphic-profile__avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            font-size: 16px;
            font-weight: 600;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
            flex-shrink: 0;
        }

        .graphic-profile__info {
            flex: 1;
            min-width: 0;
        }

        .graphic-profile__name {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
        }

        .graphic-profile__circle {
            font-size: 0.6875rem;
            color: #8b5cf6;
            margin-top: 2px;
        }

        .graphic-profile__details {
            padding: 12px 16px;
        }

        .graphic-profile__row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 0;
        }

        .graphic-profile__row-icon {
            width: 16px;
            height: 16px;
            color: var(--text-muted);
            flex-shrink: 0;
        }

        .graphic-profile__row-label {
            font-size: 0.6875rem;
            color: var(--text-muted);
            width: 60px;
            flex-shrink: 0;
        }

        .graphic-profile__row-value {
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .graphic-profile__tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 12px 16px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .graphic-profile__tag {
            font-size: 0.625rem;
            padding: 4px 8px;
            background: rgba(139, 92, 246, 0.12);
            color: #a78bfa;
            border-radius: 12px;
        }

        /* Dashboard Graphic */
        .graphic-dashboard {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: 100%;
            max-width: 280px;
        }

        .graphic-dashboard__stat {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
        }

        .graphic-dashboard__stat-label {
            font-size: 0.8125rem;
            color: var(--text-secondary);
        }

        .graphic-dashboard__stat-value {
            font-size: 1.125rem;
            font-weight: 600;
        }

        .graphic-dashboard__stat-value--good { color: #10b981; }
        .graphic-dashboard__stat-value--warning { color: #f59e0b; }

        .graphic-dashboard__bar-container {
            display: flex;
            gap: 4px;
            height: 40px;
            align-items: flex-end;
        }

        .graphic-dashboard__bar {
            flex: 1;
            background: linear-gradient(to top, #3b82f6, #60a5fa);
            border-radius: 4px 4px 0 0;
            min-height: 8px;
        }

        /* Legacy Sticky Phone Container (hidden by default now) */
        .features__phone-wrap {
            position: sticky;
            top: 100px;
            display: flex;
            justify-content: center;
            padding: 40px 0;
        }

        .features__phone {
            position: relative;
            width: 280px;
            height: 580px;
        }

        .features__screen {
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: scale(0.95);
            transition: all 0.4s ease;
            pointer-events: none;
        }

        .features__screen--active {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
        }

        /* Phone Screen Component */
        .screen-phone {
            width: 100%;
            height: 100%;
            background: #0f1419;
            border-radius: 40px;
            border: 3px solid #2a2a2a;
            overflow: hidden;
            box-shadow:
                0 25px 50px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            display: flex;
            flex-direction: column;
        }

        /* Dynamic Island Notch */
        .screen-phone__notch {
            width: 100px;
            height: 24px;
            background: #000;
            margin: 8px auto 0;
            border-radius: 20px;
            flex-shrink: 0;
        }

        /* App Bar (Top Bar) */
        .screen-appbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 12px;
            background: #0f1419;
            flex-shrink: 0;
        }

        .screen-appbar__left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .screen-appbar__icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .screen-appbar__icon svg {
            width: 16px;
            height: 16px;
            color: #fff;
        }

        .screen-appbar__badge {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 8px;
            height: 8px;
            background: #99CCFA;
            border-radius: 50%;
            border: 1.5px solid #0f1419;
        }

        .screen-appbar__title {
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
            letter-spacing: -0.01em;
        }

        .screen-appbar__right {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* Phone Content Area */
        .screen-phone__content {
            padding: 0 12px;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .screen-phone__content--center {
            justify-content: center;
            align-items: center;
        }

        /* Bottom Navigation Bar */
        .screen-navbar {
            height: 52px;
            background: #171b1f;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 8px;
            position: relative;
            flex-shrink: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .screen-navbar__section {
            display: flex;
            flex: 1;
            justify-content: space-around;
        }

        .screen-navbar__item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 6px 8px;
            opacity: 0.5;
        }

        .screen-navbar__item--active {
            opacity: 1;
        }

        .screen-navbar__item svg {
            width: 18px;
            height: 18px;
            color: #99CCFA;
        }

        .screen-navbar__item span {
            font-size: 8px;
            color: #99CCFA;
            font-weight: 500;
        }

        /* Center FAB space */
        .screen-navbar__center {
            width: 56px;
            flex-shrink: 0;
        }

        /* FAB Button */
        .screen-navbar__fab {
            position: absolute;
            left: 50%;
            top: -20px;
            transform: translateX(-50%);
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, #2C638B 0%, #3b82f6 100%);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(44, 99, 139, 0.4);
        }

        .screen-navbar__fab svg {
            width: 20px;
            height: 20px;
            color: #fff;
        }

        /* Screen Header */
        .screen-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
        }

        .screen-header__title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #fff;
        }

        .screen-header--back svg {
            color: var(--accent-blue);
        }

        /* Screen Tabs */
        .screen-tabs {
            display: flex;
            gap: 16px;
            padding: 8px 0 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 12px;
        }

        .screen-tab {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.5);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .screen-tab--active {
            color: var(--accent-blue);
        }

        .screen-tab__badge {
            background: var(--accent-blue);
            color: #fff;
            font-size: 0.625rem;
            padding: 2px 6px;
            border-radius: 10px;
        }

        /* Screen Contact List */
        .screen-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow: hidden;
        }

        .screen-contact {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
        }

        .screen-contact__avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
            color: #fff;
        }

        .screen-contact__info {
            flex: 1;
            min-width: 0;
        }

        .screen-contact__name {
            font-size: 0.8125rem;
            font-weight: 500;
            color: #fff;
        }

        .screen-contact__meta {
            font-size: 0.6875rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .screen-contact__status {
            font-size: 0.6875rem;
            color: rgba(255, 255, 255, 0.5);
        }

        .screen-contact__status--overdue {
            color: #FFB4AB;
        }

        .screen-contact__status--due {
            color: #fbbf24;
        }

        /* Screen Circles */
        .screen-circles {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
            min-height: 220px;
        }

        .screen-circles__ring {
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .screen-circles__ring--public {
            width: 200px;
            height: 200px;
        }

        .screen-circles__ring--outer {
            width: 160px;
            height: 160px;
        }

        .screen-circles__ring--middle {
            width: 115px;
            height: 115px;
        }

        .screen-circles__ring--inner {
            width: 70px;
            height: 70px;
            background: rgba(59, 130, 246, 0.1);
        }

        .screen-circles__center {
            font-size: 0.75rem;
            color: var(--accent-blue);
            font-weight: 600;
        }

        .screen-circles__avatar {
            position: absolute;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.625rem;
            font-weight: 600;
            color: #fff;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--distance))) rotate(calc(-1 * var(--angle)));
        }

        .screen-circles__legend {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px 12px;
            font-size: 0.5625rem;
            color: rgba(255, 255, 255, 0.6);
            padding: 0 8px;
        }

        .screen-circles__legend span {
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .screen-circles__dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        /* Screen Profile */
        .screen-profile {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .screen-profile__header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .screen-profile__avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
        }

        .screen-profile__name {
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
        }

        .screen-profile__circle {
            font-size: 0.75rem;
            color: var(--accent-blue);
        }

        .screen-profile__section {
            padding: 12px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .screen-profile__label {
            font-size: 0.6875rem;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 4px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .screen-profile__value {
            font-size: 0.8125rem;
            color: #fff;
            line-height: 1.5;
        }

        .screen-profile__activity {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 8px;
        }

        .screen-activity {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.8);
        }

        .screen-activity__icon {
            font-size: 1rem;
        }

        .screen-activity__date {
            margin-left: auto;
            color: rgba(255, 255, 255, 0.4);
        }

        /* Screen Privacy */
        .screen-privacy {
            text-align: center;
            padding: 20px;
        }

        .screen-privacy__icon {
            color: var(--accent-blue);
            margin-bottom: 16px;
        }

        .screen-privacy__title {
            font-size: 1.125rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 8px;
        }

        .screen-privacy__text {
            font-size: 0.8125rem;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 24px;
        }

        .screen-privacy__badges {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
        }

        .screen-privacy__badge {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.6875rem;
            color: var(--accent-blue);
            background: rgba(59, 130, 246, 0.1);
            padding: 6px 10px;
            border-radius: 20px;
        }

        /* Keep old Privacy Banner for backwards compatibility */
        .privacy-banner {
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 32px 36px;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.02));
            border: 1px solid rgba(59, 130, 246, 0.15);
            border-radius: 20px;
            flex-wrap: wrap;
        }

        .privacy-banner__icon {
            width: 56px;
            height: 56px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            border-radius: 14px;
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
        }

        .privacy-banner__icon svg {
            width: 28px;
            height: 28px;
            color: #fff;
        }

        .privacy-banner__content {
            flex: 1;
            min-width: 200px;
        }

        .privacy-banner__title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 6px;
        }

        .privacy-banner__text {
            font-size: 0.95rem;
            color: var(--text-secondary);
        }

        .privacy-banner__badges {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .privacy-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.875rem;
            color: var(--accent-blue);
            font-weight: 500;
        }

        .privacy-badge svg {
            width: 16px;
            height: 16px;
        }

        @media (max-width: 768px) {
            .privacy-banner {
                flex-direction: column;
                text-align: center;
                padding: 24px;
            }

            .privacy-banner__badges {
                justify-content: center;
            }
        }

        .bento {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(4, auto);
            gap: 16px;
        }

        .bento__card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            padding: 32px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s var(--ease-out-expo);
            /* Layered shadows for depth */
            box-shadow:
                0 1px 1px rgba(0, 0, 0, 0.1),
                0 2px 2px rgba(0, 0, 0, 0.1),
                0 4px 4px rgba(0, 0, 0, 0.1),
                0 8px 8px rgba(0, 0, 0, 0.1);
        }

        /* Gradient border glow effect */
        .bento__card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 24px;
            padding: 1px;
            background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.1) 0%,
                rgba(255, 255, 255, 0) 50%,
                rgba(255, 255, 255, 0.05) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        /* Shine sweep animation */
        .bento__card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                135deg,
                transparent 0%,
                transparent 40%,
                rgba(255, 255, 255, 0.03) 45%,
                rgba(255, 255, 255, 0.08) 50%,
                rgba(255, 255, 255, 0.03) 55%,
                transparent 60%,
                transparent 100%
            );
            transform: translateX(-100%) translateY(-100%) rotate(0deg);
            transition: transform 0.8s ease;
            pointer-events: none;
        }

        .bento__card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: var(--border-color-hover);
            box-shadow:
                0 2px 2px rgba(0, 0, 0, 0.1),
                0 4px 4px rgba(0, 0, 0, 0.1),
                0 8px 8px rgba(0, 0, 0, 0.15),
                0 16px 16px rgba(0, 0, 0, 0.15),
                0 32px 32px rgba(0, 0, 0, 0.1),
                0 0 80px rgba(59, 130, 246, 0.15);
        }

        .bento__card:hover::before {
            opacity: 1;
        }

        .bento__card:hover::after {
            transform: translateX(100%) translateY(100%) rotate(0deg);
        }

        /* Mouse-following spotlight effect */
        .bento__card .spotlight,
        .stat .spotlight,
        .testimonial .spotlight {
            pointer-events: none;
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
            background: radial-gradient(
                400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                rgba(255, 255, 255, 0.06),
                transparent 40%
            );
            z-index: 1;
        }

        .bento__card:hover .spotlight,
        .stat:hover .spotlight,
        .testimonial:hover .spotlight {
            opacity: 1;
        }

        .bento__card--large {
            grid-column: span 4;
            grid-row: span 2;
        }

        .bento__card--medium {
            grid-column: span 2;
        }

        .bento__card--wide {
            grid-column: span 6;
        }

        .bento__card--featured {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.15) 50%, rgba(96, 165, 250, 0.1) 100%);
        }

        .bento__icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            transition: all 0.4s var(--ease-out-back);
            position: relative;
        }

        /* Icon glow effect */
        .bento__icon::before {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 20px;
            background: inherit;
            filter: blur(16px);
            opacity: 0.4;
            z-index: -1;
            transition: opacity 0.4s ease, filter 0.4s ease;
        }

        .bento__card:hover .bento__icon {
            transform: scale(1.15) rotate(5deg);
        }

        .bento__card:hover .bento__icon::before {
            opacity: 0.6;
            filter: blur(24px);
        }

        /* Unified blue color scheme for all icons */
        .bento__icon--blue,
        .bento__icon--purple,
        .bento__icon--pink,
        .bento__icon--green,
        .bento__icon--orange {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
        }

        .bento__icon svg {
            width: 28px;
            height: 28px;
            color: white;
        }

        .bento__title {
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-bottom: 12px;
            position: relative;
            z-index: 2;
        }

        .bento__card--large .bento__title {
            font-size: 2rem;
        }

        .bento__text {
            font-size: 1rem;
            color: var(--text-secondary);
            line-height: 1.7;
            position: relative;
            z-index: 2;
        }

        .bento__visual {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50%;
            opacity: 0.1;
        }

        /* Circle visualization for large card */
        .circles-viz {
            position: absolute;
            bottom: 32px;
            right: 32px;
            width: 200px;
            height: 200px;
        }

        .circles-viz__ring {
            position: absolute;
            border: 2px solid;
            border-radius: 50%;
            animation: circle-pulse 3s ease-in-out infinite;
        }

        .circles-viz__ring--1 {
            width: 100%;
            height: 100%;
            border-color: rgba(59, 130, 246, 0.2);
        }

        .circles-viz__ring--2 {
            width: 70%;
            height: 70%;
            top: 15%;
            left: 15%;
            border-color: rgba(59, 130, 246, 0.4);
            animation-delay: -1s;
        }

        .circles-viz__ring--3 {
            width: 40%;
            height: 40%;
            top: 30%;
            left: 30%;
            border-color: rgba(59, 130, 246, 0.6);
            animation-delay: -2s;
        }

        .circles-viz__center {
            position: absolute;
            width: 20%;
            height: 20%;
            top: 40%;
            left: 40%;
            background: var(--accent-blue);
            border-radius: 50%;
            box-shadow: 0 0 30px var(--accent-blue);
        }

        @keyframes circle-pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.8; }
        }

        /* ==========================================================================
           Animated Card Elements
           ========================================================================== */

        /* Bell swing animation for reminders */
        .card-anim-bell {
            position: absolute;
            bottom: 32px;
            right: 32px;
            width: 80px;
            height: 80px;
            opacity: 0.15;
            animation: bell-swing 2s ease-in-out infinite;
            transform-origin: top center;
        }

        .card-anim-bell svg {
            width: 100%;
            height: 100%;
            color: var(--accent-blue);
        }

        @keyframes bell-swing {
            0%, 100% { transform: rotate(-5deg); }
            50% { transform: rotate(5deg); }
        }

        .bento__card:hover .card-anim-bell {
            opacity: 0.3;
            animation: bell-ring 0.5s ease-in-out infinite;
        }

        @keyframes bell-ring {
            0%, 100% { transform: rotate(-10deg); }
            25% { transform: rotate(10deg); }
            50% { transform: rotate(-10deg); }
            75% { transform: rotate(10deg); }
        }

        /* Floating avatars for profiles card */
        .card-anim-profiles {
            position: absolute;
            bottom: 24px;
            right: 24px;
            display: flex;
            gap: -12px;
        }

        .card-anim-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-blue), #60a5fa);
            border: 2px solid var(--bg-card);
            margin-left: -12px;
            animation: avatar-float 3s ease-in-out infinite;
            opacity: 0.6;
        }

        .card-anim-avatar:nth-child(1) { animation-delay: 0s; }
        .card-anim-avatar:nth-child(2) { animation-delay: 0.3s; }
        .card-anim-avatar:nth-child(3) { animation-delay: 0.6s; }
        .card-anim-avatar:nth-child(4) { animation-delay: 0.9s; }

        @keyframes avatar-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        .bento__card:hover .card-anim-avatar {
            opacity: 1;
        }

        /* Bar chart animation for dashboard */
        .card-anim-bars {
            position: absolute;
            bottom: 24px;
            right: 24px;
            display: flex;
            align-items: flex-end;
            gap: 6px;
            height: 60px;
        }

        .card-anim-bar {
            width: 12px;
            background: linear-gradient(to top, var(--accent-blue), #60a5fa);
            border-radius: 4px 4px 0 0;
            opacity: 0.3;
            animation: bar-grow 2s ease-in-out infinite;
        }

        .card-anim-bar:nth-child(1) { height: 40%; animation-delay: 0s; }
        .card-anim-bar:nth-child(2) { height: 70%; animation-delay: 0.2s; }
        .card-anim-bar:nth-child(3) { height: 50%; animation-delay: 0.4s; }
        .card-anim-bar:nth-child(4) { height: 90%; animation-delay: 0.6s; }
        .card-anim-bar:nth-child(5) { height: 60%; animation-delay: 0.8s; }

        @keyframes bar-grow {
            0%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(0.7); }
        }

        .bento__card:hover .card-anim-bar {
            opacity: 0.6;
            animation: bar-bounce 0.6s ease-in-out infinite;
        }

        @keyframes bar-bounce {
            0%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(1.2); }
        }

        /* Calendar highlight animation */
        .card-anim-calendar {
            position: absolute;
            bottom: 24px;
            right: 24px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
        }

        .card-anim-date {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.2);
            opacity: 0.4;
        }

        .card-anim-date--highlight {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
            animation: date-pulse 2s ease-in-out infinite;
        }

        @keyframes date-pulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); transform: scale(1); }
            50% { box-shadow: 0 0 12px rgba(59, 130, 246, 0.6); transform: scale(1.1); }
        }

        .bento__card:hover .card-anim-date {
            opacity: 0.7;
        }

        .bento__card:hover .card-anim-date--highlight {
            opacity: 1;
        }

        /* Shield pulse for privacy card */
        .card-anim-shield {
            position: absolute;
            top: 50%;
            right: 60px;
            transform: translateY(-50%);
            width: 100px;
            height: 100px;
            opacity: 0.1;
        }

        .card-anim-shield svg {
            width: 100%;
            height: 100%;
            color: var(--accent-blue);
        }

        .card-anim-shield::before {
            content: '';
            position: absolute;
            inset: -10px;
            border-radius: 50%;
            background: var(--accent-blue);
            filter: blur(30px);
            opacity: 0.3;
            animation: shield-glow 3s ease-in-out infinite;
        }

        @keyframes shield-glow {
            0%, 100% { opacity: 0.2; transform: scale(1); }
            50% { opacity: 0.4; transform: scale(1.1); }
        }

        .bento__card:hover .card-anim-shield {
            opacity: 0.25;
        }

        /* Floating particles effect */
        .card-particles {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .card-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--accent-blue);
            border-radius: 50%;
            opacity: 0;
            animation: particle-float 4s linear infinite;
        }

        .card-particle:nth-child(1) { left: 20%; animation-delay: 0s; }
        .card-particle:nth-child(2) { left: 40%; animation-delay: 1s; }
        .card-particle:nth-child(3) { left: 60%; animation-delay: 2s; }
        .card-particle:nth-child(4) { left: 80%; animation-delay: 3s; }

        @keyframes particle-float {
            0% { bottom: -10px; opacity: 0; }
            20% { opacity: 0.4; }
            80% { opacity: 0.4; }
            100% { bottom: 110%; opacity: 0; }
        }

        .bento__card:hover .card-particle {
            animation-duration: 2s;
        }

        /* ==========================================================================
           How It Works
           ========================================================================== */
        .how-it-works {
            padding: 120px 0;
            background: var(--bg-secondary);
        }

        .how-it-works__header {
            text-align: center;
            margin-bottom: 80px;
        }

        .how-it-works__label {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent-blue);
            margin-bottom: 24px;
        }

        .how-it-works__title {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -0.035em;
            text-wrap: balance;
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 32px;
            position: relative;
        }

        .step {
            text-align: center;
            padding: 40px 32px;
            position: relative;
        }

        .step__number {
            width: 64px;
            height: 64px;
            margin: 0 auto 24px;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            transition: all 0.4s var(--ease-out-expo);
            position: relative;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        /* Animated ring around step number */
        .step__number::before {
            content: '';
            position: absolute;
            inset: -6px;
            border-radius: 50%;
            border: 1px dashed rgba(255, 255, 255, 0.1);
            opacity: 0;
            transition: all 0.4s ease;
        }

        /* Glow effect */
        .step__number::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 50%;
            background: var(--gradient-primary);
            opacity: 0;
            z-index: -1;
            filter: blur(12px);
            transition: opacity 0.4s ease;
        }

        .step:hover .step__number {
            background: var(--gradient-primary);
            border-color: transparent;
            transform: scale(1.15);
            box-shadow:
                0 10px 30px rgba(59, 130, 246, 0.3),
                0 0 40px rgba(59, 130, 246, 0.2);
        }

        .step:hover .step__number::before {
            opacity: 1;
            animation: spin-slow 8s linear infinite;
        }

        .step:hover .step__number::after {
            opacity: 0.5;
        }

        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .step__title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .step__text {
            font-size: 1rem;
            color: var(--text-secondary);
            line-height: 1.7;
        }

        /* ==========================================================================
           Story Section
           ========================================================================== */
        .story {
            padding: 120px 0;
            position: relative;
        }

        .story__content {
            max-width: 700px;
            margin: 0 auto;
        }

        .story__label {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent-blue);
            margin-bottom: 24px;
        }

        .story__title {
            font-size: clamp(2rem, 5vw, 2.5rem);
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: -0.02em;
            margin-bottom: 32px;
        }

        .story__text {
            font-size: 1.125rem;
            color: var(--text-secondary);
            line-height: 1.9;
        }

        .story__text p {
            margin-bottom: 24px;
        }

        .story__text strong {
            color: var(--text-primary);
        }

        .story__quote {
            padding: 32px;
            background: var(--bg-card);
            border-left: 4px solid var(--accent-blue);
            border-radius: 0 16px 16px 0;
            margin: 40px 0;
        }

        .story__quote p {
            font-size: 1.25rem;
            font-style: italic;
            color: var(--text-primary);
            margin: 0;
        }

        /* ==========================================================================
           Testimonials
           ========================================================================== */
        .testimonials {
            padding: 120px 0;
            background: var(--bg-secondary);
        }

        .testimonials__header {
            text-align: center;
            margin-bottom: 64px;
        }

        .testimonials__label {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent-blue);
            margin-bottom: 24px;
        }

        .testimonials__title {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -0.035em;
            text-wrap: balance;
        }

        .testimonials__grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
        }

        .testimonial {
            padding: 32px;
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 24px;
            transition: all 0.4s var(--ease-out-expo);
            position: relative;
            overflow: hidden;
            box-shadow:
                0 1px 1px rgba(0, 0, 0, 0.1),
                0 2px 2px rgba(0, 0, 0, 0.1),
                0 4px 4px rgba(0, 0, 0, 0.1);
        }

        /* Corner accent glow */
        .testimonial::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle,
                rgba(59, 130, 246, 0.1) 0%,
                transparent 50%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        /* Quote decoration */
        .testimonial::after {
            content: '"';
            position: absolute;
            top: 20px;
            right: 24px;
            font-size: 4rem;
            font-family: Georgia, serif;
            color: rgba(255, 255, 255, 0.03);
            line-height: 1;
            pointer-events: none;
            transition: color 0.4s ease;
        }

        .testimonial:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: var(--border-color-hover);
            box-shadow:
                0 4px 4px rgba(0, 0, 0, 0.1),
                0 8px 8px rgba(0, 0, 0, 0.15),
                0 16px 16px rgba(0, 0, 0, 0.1),
                0 32px 32px rgba(0, 0, 0, 0.1),
                0 0 60px rgba(59, 130, 246, 0.1);
        }

        .testimonial:hover::before {
            opacity: 1;
        }

        .testimonial:hover::after {
            color: rgba(59, 130, 246, 0.15);
        }

        .testimonial__stars {
            display: flex;
            gap: 4px;
            margin-bottom: 16px;
            color: var(--accent-blue);
            filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
        }

        .testimonial__text {
            font-size: 1rem;
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 24px;
            position: relative;
            z-index: 2;
        }

        .testimonial__author {
            display: flex;
            align-items: center;
            gap: 12px;
            position: relative;
            z-index: 2;
        }

        .testimonial__avatar {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            position: relative;
            box-shadow:
                0 2px 8px rgba(59, 130, 246, 0.3),
                0 0 0 2px rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .testimonial:hover .testimonial__avatar {
            transform: scale(1.1);
            box-shadow:
                0 4px 16px rgba(59, 130, 246, 0.4),
                0 0 0 3px rgba(255, 255, 255, 0.15);
        }

        .testimonial__name {
            font-weight: 600;
        }

        .testimonial__location {
            font-size: 0.875rem;
            color: var(--text-muted);
        }

        /* ==========================================================================
           FAQ Section
           ========================================================================== */
        .faq {
            padding: 120px 0;
            background: var(--bg-secondary);
        }

        .faq__header {
            text-align: center;
            margin-bottom: 64px;
        }

        .faq__label {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent-blue);
            margin-bottom: 16px;
        }

        .faq__title {
            font-size: clamp(2rem, 4vw, 2.5rem);
            font-weight: 700;
            letter-spacing: -0.03em;
        }

        .faq__list {
            max-width: 800px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .faq__item {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s var(--ease-out-expo);
        }

        .faq__item:hover {
            border-color: var(--border-color-hover);
        }

        .faq__item[open] {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.04));
            border-color: rgba(59, 130, 246, 0.2);
        }

        .faq__question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px;
            cursor: pointer;
            font-size: 1.0625rem;
            font-weight: 600;
            color: var(--text-primary);
            list-style: none;
        }

        .faq__question::-webkit-details-marker {
            display: none;
        }

        .faq__question span {
            flex: 1;
            padding-right: 16px;
        }

        .faq__icon {
            width: 20px;
            height: 20px;
            color: var(--accent-blue);
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }

        .faq__item[open] .faq__icon {
            transform: rotate(180deg);
        }

        .faq__answer {
            padding: 0 24px 24px;
        }

        .faq__answer p {
            color: var(--text-secondary);
            line-height: 1.7;
            font-size: 1rem;
        }

        /* ==========================================================================
           CTA Section
           ========================================================================== */
        .cta {
            padding: 120px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .cta__bg {
            position: absolute;
            inset: 0;
            background: var(--gradient-primary);
            opacity: 0.05;
        }

        .cta__content {
            position: relative;
            z-index: 1;
        }

        .cta__title {
            font-size: clamp(2.5rem, 6vw, 4rem);
            font-weight: 800;
            line-height: 1.08;
            letter-spacing: -0.045em;
            margin-bottom: var(--space-lg);
            text-wrap: balance;
        }

        .cta__subtitle {
            font-size: 1.25rem;
            color: var(--text-secondary);
            max-width: 500px;
            margin: 0 auto 48px;
        }

        .cta__buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
            margin-bottom: 32px;
        }

        .cta__features {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
            justify-content: center;
            color: var(--text-muted);
            font-size: 0.9375rem;
        }

        .cta__feature {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cta__feature svg {
            width: 20px;
            height: 20px;
            color: var(--accent-blue);
        }

        /* ==========================================================================
           Footer
           ========================================================================== */
        .footer {
            padding: 64px 0 32px;
            border-top: 1px solid var(--border-color);
        }

        .footer__inner {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 24px;
        }

        .footer__logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: var(--text-primary);
        }

        .footer__logo-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
        }

        .footer__logo-text {
            font-size: 1.125rem;
            font-weight: 700;
        }

        .footer__links {
            display: flex;
            gap: 32px;
        }

        .footer__link {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 0.9375rem;
            transition: color 0.3s ease;
        }

        .footer__link:hover {
            color: var(--text-primary);
        }

        .footer__copy {
            width: 100%;
            text-align: center;
            padding-top: 32px;
            margin-top: 32px;
            border-top: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 0.875rem;
        }

        /* ==========================================================================
           Scroll Animations
           ========================================================================== */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s var(--ease-out-expo);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-delay-1 { transition-delay: 0.1s; }
        .reveal-delay-2 { transition-delay: 0.2s; }
        .reveal-delay-3 { transition-delay: 0.3s; }
        .reveal-delay-4 { transition-delay: 0.4s; }

        /* ==========================================================================
           Responsive
           ========================================================================== */
        @media (max-width: 1024px) {
            .bento__card--large {
                grid-column: span 6;
            }
            .bento__card--medium {
                grid-column: span 3;
            }
        }

        @media (max-width: 768px) {
            /* Container padding */
            .container {
                padding: 0 16px;
            }

            /* Bento grid to single column */
            .bento {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .bento__card--large,
            .bento__card--medium,
            .bento__card--wide {
                grid-column: span 1;
            }

            .bento__card {
                padding: 24px;
                border-radius: 20px;
            }

            .bento__icon {
                width: 48px;
                height: 48px;
                border-radius: 12px;
                margin-bottom: 16px;
            }

            .bento__icon svg {
                width: 24px;
                height: 24px;
            }

            .bento__title {
                font-size: 1.25rem;
            }

            .bento__card--large .bento__title {
                font-size: 1.5rem;
            }

            .bento__text {
                font-size: 0.9375rem;
            }

            .circles-viz {
                display: none;
            }

            /* Hide animated card elements on mobile for cleaner look */
            .card-anim-bell,
            .card-anim-profiles,
            .card-anim-bars,
            .card-anim-calendar,
            .card-anim-shield,
            .card-particles {
                display: none;
            }

            /* Hero section */
            .hero {
                padding: 100px 16px 60px;
                min-height: auto;
            }

            .hero__social-proof {
                flex-wrap: wrap;
                gap: 8px;
                font-size: 0.8125rem;
                margin-bottom: 20px;
            }

            .hero__social-proof-divider {
                display: none;
            }

            .hero__social-proof-item {
                background: rgba(255, 255, 255, 0.05);
                padding: 6px 12px;
                border-radius: 20px;
            }

            .hero__title {
                font-size: 2rem;
            }

            .hero__subtitle {
                font-size: 0.9375rem;
                margin-bottom: 1.5rem;
            }

            .hero__store-badges {
                flex-direction: row;
                gap: 8px;
                margin-bottom: 2rem;
            }

            .hero__store-badge {
                padding: 10px 14px;
                gap: 8px;
            }

            .hero__store-badge-icon {
                width: 20px;
                height: 20px;
            }

            .hero__store-badge-small {
                font-size: 0.625rem;
            }

            .hero__store-badge-name {
                font-size: 0.875rem;
            }

            .btn {
                width: 100%;
                max-width: 300px;
                justify-content: center;
                padding: 14px 28px;
            }

            /* Phone mockups on mobile - only show center */
            .hero__phones {
                transform: scale(0.8);
            }

            .phone--left,
            .phone--right {
                display: none;
            }

            .phone--center {
                transform: scale(1);
            }

            .hero__orb {
                opacity: 0.2;
            }

            /* The Difference section */
            .the-difference {
                padding: 80px 0;
            }

            .the-difference__solution {
                margin-top: 60px;
            }

            .the-difference__stats {
                gap: 12px;
                margin-top: 32px;
            }

            .the-difference__comparison {
                gap: 20px;
            }

            .the-difference__card {
                padding: 24px;
            }

            .the-difference__card-title {
                font-size: 1.1rem;
            }

            .the-difference__conclusion {
                font-size: 1rem;
            }

            .stat {
                padding: 24px;
                border-radius: 16px;
            }

            .stat__number {
                font-size: 2.5rem;
            }

            .stat__label {
                font-size: 0.875rem;
            }

            /* Features section */
            .features {
                padding: 80px 0;
            }

            .features__header {
                margin-bottom: 40px;
            }

            .features__layout {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            /* Features grid - single column on mobile */
            .features__grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .feature-card {
                padding: 24px;
                gap: 16px;
            }

            .feature-card__title {
                font-size: 1.125rem;
            }

            .feature-card__text {
                font-size: 0.875rem;
            }

            .feature-card__graphic {
                min-height: 140px;
                padding: 16px;
            }

            /* Hide legacy phone mockups */
            .features__phone-wrap,
            .features__list {
                display: none;
            }

            .screen-phone {
                border-radius: 32px;
            }

            .screen-phone__notch {
                width: 100px;
                height: 24px;
            }

            .screen-circles__ring--outer {
                width: 180px;
                height: 180px;
            }

            .screen-circles__ring--middle {
                width: 120px;
                height: 120px;
            }

            .screen-circles__ring--inner {
                width: 60px;
                height: 60px;
            }

            /* How it works */
            .how-it-works {
                padding: 80px 0;
            }

            .how-it-works__header {
                margin-bottom: 48px;
            }

            .steps {
                gap: 24px;
            }

            .step {
                padding: 24px 16px;
            }

            .step__number {
                width: 56px;
                height: 56px;
                font-size: 1.25rem;
            }

            /* Story section */
            .story {
                padding: 80px 0;
            }

            .story__quote {
                padding: 24px;
                margin: 32px 0;
            }

            .story__quote p {
                font-size: 1.125rem;
            }

            /* Testimonials */
            .testimonials {
                padding: 80px 0;
            }

            .testimonials__grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .testimonial {
                padding: 24px;
                border-radius: 20px;
            }

            .testimonial::after {
                font-size: 3rem;
                top: 16px;
                right: 20px;
            }

            /* FAQ section */
            .faq {
                padding: 80px 0;
            }

            .faq__header {
                margin-bottom: 40px;
            }

            .faq__title {
                font-size: 1.75rem;
            }

            .faq__question {
                padding: 20px;
                font-size: 1rem;
            }

            .faq__answer {
                padding: 0 20px 20px;
            }

            .faq__answer p {
                font-size: 0.9375rem;
            }

            /* CTA section */
            .cta {
                padding: 80px 0;
            }

            .cta__title {
                font-size: 2rem;
            }

            .cta__subtitle {
                font-size: 1rem;
            }

            .cta__features {
                flex-direction: column;
                gap: 12px;
            }

            /* Footer */
            .footer {
                padding: 48px 0 24px;
            }

            .footer__inner {
                flex-direction: column;
                text-align: center;
            }

            .footer__links {
                gap: 24px;
            }

            /* Disable 3D tilt on mobile (touch) */
            .bento__card:hover {
                transform: translateY(-4px);
            }
        }

        @media (max-width: 480px) {
            .hero__title {
                font-size: 1.875rem;
            }

            .problem__title,
            .features__title,
            .how-it-works__title,
            .testimonials__title {
                font-size: 1.75rem;
            }

            .stat__number {
                font-size: 2rem;
            }

            .bento__card {
                padding: 20px;
            }

            .testimonial {
                padding: 20px;
            }
        }

        /* ==========================================================================
           Reduced Motion
           ========================================================================== */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }

            html {
                scroll-behavior: auto;
            }
        }
    </style>

/* ==========================================================================
   Accessibility - Focus States
   ========================================================================== */

/* Focus states for all interactive elements */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.nav__lang:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.hero__store-badge:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 4px;
}

.cta-button:focus-visible,
.email-input:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Ensure minimum touch targets for mobile */
@media (max-width: 768px) {
    .nav__cta,
    .nav__lang,
    .hero__store-badge,
    button,
    a[role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================================================
   Section Backgrounds - Gradient Mesh Atmosphere
   ========================================================================== */

/* Problem Section - Blue gradient mesh */
.problem {
    position: relative;
    background: 
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        var(--bg-primary);
}

/* Features Section - Purple gradient mesh */
.features {
    position: relative;
    background: 
        radial-gradient(circle at 70% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 30% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        var(--bg-secondary);
}

/* How It Works Section - Teal gradient mesh */
.how-it-works {
    position: relative;
    background: 
        radial-gradient(circle at 50% 30%, rgba(16, 185, 129, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 20% 70%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
        var(--bg-primary);
}

/* Testimonials - Warm gradient mesh */
.testimonials {
    position: relative;
    background: 
        radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 60% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        var(--bg-secondary);
}


/* ==========================================================================
   Responsive: Asymmetric Hero on Mobile
   ========================================================================== */

@media (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 140px 24px 80px;
        text-align: center;
    }

    .hero > * {
        grid-column: 1;
    }

    .hero__phones {
        grid-row: auto;
        margin-top: 3rem;
    }

    .hero__title,
    .hero__subtitle {
        text-align: center;
        max-width: 100%;
    }

    .hero__store-badges {
        justify-content: center;
    }

    .phone--center {
        transform: scale(1.1);
    }
}

@media (max-width: 768px) {
    .hero__title {
        font-size: clamp(2.5rem, 8vw, 3.5rem);
        text-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
    }

    .hero__subtitle {
        font-size: clamp(1rem, 2vw, 1.125rem);
    }

    .nav__logo-text {
        font-size: 1.25rem;
    }

    .phone--center {
        transform: scale(0.9);
    }
}