:root {
    --color-primary: #388e3c;
    --color-primary-dark: #2e7d32;
    --color-primary-light: #4caf50;
    --color-secondary: #c8e6c9;
    --color-secondary-dark: #a5d6a7;
    --color-secondary-light: #e8f5e9;
    --color-accent: #ffb300;
    --color-accent-dark: #ff8f00;
    --color-accent-light: #ffc107;
    --color-text: #1a1a1a;
    --color-text-light: #555555;
    --color-text-muted: #757575;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #eeeeee;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #bdbdbd;
    --color-gray-500: #9e9e9e;
    --color-gray-600: #757575;
    --color-gray-700: #616161;
    --color-gray-800: #424242;
    --color-gray-900: #212121;
    --color-success: #4caf50;
    --color-warning: #ff9800;
    --color-error: #f44336;
    --color-info: #2196f3;
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-heading: var(--font-family-base);
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-32: 8rem;
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    --border-radius-2xl: 1.5rem;
    --border-radius-full: 9999px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 20px rgba(56, 142, 60, 0.3);
    --shadow-glow-accent: 0 0 20px rgba(255, 179, 0, 0.3);
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-slower: 500ms ease;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    --max-width-sm: 640px;
    --max-width-md: 768px;
    --max-width-lg: 1024px;
    --max-width-xl: 1280px;
    --max-width-2xl: 1400px;
    --header-height: 72px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

h1 {
    font-size: clamp(var(--font-size-3xl), 5vw, var(--font-size-5xl));
}

h2 {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
}

h3 {
    font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-2xl));
}

p {
    margin-bottom: var(--spacing-4);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

ul,
ol {
    list-style: none;
}

address {
    font-style: normal;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    width: 100%;
    max-width: var(--max-width-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--spacing-8);
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-base);
    cursor: pointer;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background: var(--color-secondary-light);
    color: var(--color-primary-dark);
}

.btn-accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: var(--color-text);
    box-shadow: var(--shadow-md), var(--shadow-glow-accent);
}

.btn-accent:hover {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
    transform: translateY(-2px);
}

.btn-text {
    background: transparent;
    color: var(--color-primary);
    padding: var(--spacing-2) var(--spacing-4);
}

.btn-text:hover {
    background: var(--color-secondary-light);
}

.btn-large {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
}

.btn-full {
    width: 100%;
}

.btn-icon::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-gray-200);
    z-index: var(--z-fixed);
    transition: all var(--transition-base);
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: var(--max-width-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

@media (min-width: 768px) {
    .main-nav {
        padding: 0 var(--spacing-6);
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.logo:hover {
    color: var(--color-primary-dark);
}

.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    border-radius: var(--border-radius-lg);
    position: relative;
}

.logo-icon::before {
    content: '';
    position: absolute;
    inset: 8px;
    background: var(--color-white);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 4px;
}

@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }
}

.nav-toggle-bar {
    width: 100%;
    height: 2px;
    background: var(--color-text);
    border-radius: var(--border-radius-full);
    transition: all var(--transition-base);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-4);
}

.nav-menu.active {
    display: block;
}

@media (min-width: 768px) {
    .nav-menu {
        display: flex;
        position: static;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        gap: var(--spacing-1);
    }
}

.nav-menu a {
    display: block;
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-fast);
}

.nav-menu a:hover {
    background: var(--color-secondary-light);
    color: var(--color-primary);
}

@media (min-width: 768px) {
    .nav-menu a {
        padding: var(--spacing-2) var(--spacing-3);
    }
}

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-height) + var(--spacing-8)) 0 var(--spacing-16);
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-white) 50%, var(--color-secondary) 100%);
}

.hero-particles {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, var(--color-primary) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, var(--color-accent) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, var(--color-primary-light) 1px, transparent 1px),
        radial-gradient(circle at 60% 20%, var(--color-accent-light) 1px, transparent 1px);
    background-size: 100px 100px, 150px 150px, 120px 120px, 80px 80px;
    opacity: 0.5;
    animation: particleFloat 20s ease-in-out infinite;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(10px, -10px);
    }
    50% {
        transform: translate(-5px, 5px);
    }
    75% {
        transform: translate(5px, 10px);
    }
}

.hero-content {
    max-width: var(--max-width-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
    display: grid;
    gap: var(--spacing-8);
    align-items: center;
}

@media (min-width: 768px) {
    .hero-content {
        padding: 0 var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr auto;
        gap: var(--spacing-12);
        padding: 0 var(--spacing-8);
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-white);
    border: 2px solid var(--color-accent);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-dark);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 179, 0, 0);
    }
}

.badge-icon {
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.hero h1 {
    margin: var(--spacing-4) 0;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    max-width: 540px;
    margin-bottom: var(--spacing-6);
}

@media (min-width: 768px) {
    .hero-subtitle {
        font-size: var(--font-size-xl);
    }
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

@media (min-width: 768px) {
    .stat-number {
        font-size: var(--font-size-4xl);
    }
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.hero-image {
    position: relative;
    display: none;
}

@media (min-width: 1024px) {
    .hero-image {
        display: block;
    }
}

.hero-image img {
    border-radius: var(--border-radius-2xl);
    box-shadow: var(--shadow-2xl);
    animation: heroFloat 6s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
    }
}

.hero-image-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
    opacity: 0.3;
    filter: blur(40px);
    z-index: -1;
    animation: glowPulse 4s ease-in-out infinite;
}

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

.scroll-indicator {
    position: absolute;
    bottom: var(--spacing-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    animation: scrollBounce 2s ease-in-out infinite;
}

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

.scroll-arrow {
    width: 24px;
    height: 24px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.social-proof {
    background: var(--color-primary);
    padding: var(--spacing-4) 0;
    overflow: hidden;
}

.proof-ticker {
    display: flex;
    gap: var(--spacing-8);
    animation: tickerScroll 30s linear infinite;
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.proof-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    white-space: nowrap;
    color: var(--color-white);
    font-size: var(--font-size-sm);
}

.proof-icon {
    width: 20px;
    height: 20px;
    background: var(--color-white);
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
}

.proof-icon-download {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23388e3c'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 14px;
}

.proof-icon-star {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23388e3c'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 14px;
}

.proof-icon-level {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23388e3c'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 14px;
}

.proof-text strong {
    color: var(--color-accent);
}

.proof-time {
    color: var(--color-secondary);
    font-size: var(--font-size-xs);
}

.live-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    color: var(--color-white);
    font-size: var(--font-size-sm);
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: var(--border-radius-full);
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.live-number {
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.section-header-left {
    text-align: left;
}

.section-tag {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--color-secondary);
    color: var(--color-primary-dark);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-full);
    margin-bottom: var(--spacing-4);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    max-width: 600px;
    margin: var(--spacing-4) auto 0;
}

.section-header-left .section-subtitle {
    margin-left: 0;
}

.features {
    padding: var(--spacing-20) 0;
    background: var(--color-gray-50);
}

.features-grid {
    display: grid;
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-card {
    position: relative;
    background: var(--color-white);
    padding: var(--spacing-8);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.feature-card-large {
    grid-column: span 1;
}

@media (min-width: 768px) {
    .feature-card-large {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .feature-card-large {
        grid-column: span 1;
        grid-row: span 2;
    }
}

.feature-card-accent {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: var(--color-text);
}

.feature-card-accent .feature-icon {
    background: var(--color-white);
}

.feature-icon {
    width: 56px;
    height: 56px;
    background: var(--color-secondary);
    border-radius: var(--border-radius-lg);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon::before {
    content: '';
    width: 28px;
    height: 28px;
    background: var(--color-primary);
}

.feature-icon-puzzle::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.feature-icon-touch::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.feature-icon-offline::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M23.64 7c-.45-.34-4.93-4-11.64-4-1.5 0-2.89.19-4.15.48L18.18 13.8 23.64 7zm-6.6 8.22L3.27 1.44 2 2.72l2.05 2.06C1.91 5.76.59 6.82.36 7l11.63 14.49.01.01.01-.01 3.9-4.86 3.32 3.32 1.27-1.27-3.46-3.46z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.feature-icon-free::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.feature-icon-graphics::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 3l.01 10.55c-.59-.34-1.27-.55-2-.55C7.79 13 6 14.79 6 17s1.79 4 4.01 4S14 19.21 14 17V7h4V3h-6zm-1.99 16c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.feature-icon-reward::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.feature-card h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-3);
}

.feature-card p {
    color: var(--color-text-light);
}

.feature-card-accent p {
    color: var(--color-gray-800);
}

.feature-list {
    margin-top: var(--spacing-4);
}

.feature-list li {
    position: relative;
    padding-left: var(--spacing-6);
    margin-bottom: var(--spacing-2);
    color: var(--color-text-light);
}

.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.feature-badge {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--color-white);
    color: var(--color-accent-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-full);
    text-transform: uppercase;
}

.gallery {
    padding: var(--spacing-20) 0;
}

.gallery-showcase {
    display: grid;
    gap: var(--spacing-6);
}

@media (min-width: 1024px) {
    .gallery-showcase {
        grid-template-columns: 1fr 200px;
        gap: var(--spacing-8);
    }
}

.gallery-main {
    position: relative;
}

.gallery-featured {
    position: relative;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.gallery-featured img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-6) var(--spacing-4);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: var(--color-white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
}

.gallery-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
}

.gallery-btn {
    width: 48px;
    height: 48px;
    background: var(--color-white);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.gallery-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.gallery-btn span {
    width: 20px;
    height: 20px;
    background: var(--color-text);
    transition: background var(--transition-fast);
}

.gallery-btn:hover span {
    background: var(--color-white);
}

.gallery-prev span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.gallery-next span {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.gallery-dots {
    display: flex;
    gap: var(--spacing-2);
}

.gallery-dot {
    width: 12px;
    height: 12px;
    background: var(--color-gray-300);
    border-radius: var(--border-radius-full);
    transition: all var(--transition-fast);
}

.gallery-dot.active,
.gallery-dot:hover {
    background: var(--color-primary);
    transform: scale(1.2);
}

.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-3);
}

@media (min-width: 1024px) {
    .gallery-thumbs {
        grid-template-columns: 1fr;
    }
}

.gallery-thumb {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: all var(--transition-fast);
    border: 3px solid transparent;
}

.gallery-thumb:hover,
.gallery-thumb.active {
    opacity: 1;
    border-color: var(--color-primary);
}

.gallery-thumb img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.how-to-play {
    padding: var(--spacing-20) 0;
    background: linear-gradient(135deg, var(--color-secondary-light) 0%, var(--color-white) 100%);
}

.steps-timeline {
    display: grid;
    gap: var(--spacing-6);
    max-width: 800px;
    margin: 0 auto var(--spacing-12);
}

@media (min-width: 768px) {
    .steps-timeline {
        gap: var(--spacing-8);
    }
}

.step-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--spacing-4);
    align-items: center;
    background: var(--color-white);
    padding: var(--spacing-6);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.step-card:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 768px) {
    .step-card {
        padding: var(--spacing-8);
        gap: var(--spacing-6);
    }
}

.step-number {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .step-number {
        width: 64px;
        height: 64px;
        font-size: var(--font-size-2xl);
    }
}

.step-content h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
}

@media (min-width: 768px) {
    .step-content h3 {
        font-size: var(--font-size-xl);
    }
}

.step-content p {
    color: var(--color-text-light);
    margin: 0;
}

.step-visual {
    display: none;
}

@media (min-width: 768px) {
    .step-visual {
        display: block;
    }
}

.step-icon {
    width: 48px;
    height: 48px;
    background: var(--color-secondary);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon::before {
    content: '';
    width: 24px;
    height: 24px;
    background: var(--color-primary);
}

.step-icon-download::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.step-icon-play::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.step-icon-plan::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.step-icon-star::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.video-preview {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.video-container {
    position: relative;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-2xl);
}

.video-poster {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--color-white);
    border-radius: var(--border-radius-full);
    box-shadow: var(--shadow-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
}

.video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: var(--shadow-2xl);
}

.play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent var(--color-primary);
    margin-left: 5px;
}

.video-caption {
    margin-top: var(--spacing-4);
    color: var(--color-text-muted);
}

.download-section {
    padding: var(--spacing-20) 0;
    background: var(--color-gray-900);
}

.download-card {
    display: grid;
    gap: var(--spacing-8);
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    padding: var(--spacing-10);
    border-radius: var(--border-radius-2xl);
    position: relative;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .download-card {
        grid-template-columns: 1fr auto;
        padding: var(--spacing-12);
    }
}

.download-content {
    position: relative;
    z-index: 1;
}

.download-content h2 {
    color: var(--color-white);
    margin-bottom: var(--spacing-4);
}

.download-content p {
    color: var(--color-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-8);
}

.download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.store-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    background: var(--color-black);
    color: var(--color-white);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-base);
}

.store-btn:hover {
    background: var(--color-gray-800);
    transform: translateY(-2px);
    color: var(--color-white);
}

.store-icon {
    width: 32px;
    height: 32px;
    background: var(--color-white);
}

.store-icon-apple {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.store-icon-google {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.store-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.store-small {
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

.store-large {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.download-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.info-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
}

.info-icon {
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.download-visual {
    position: relative;
    display: none;
}

@media (min-width: 1024px) {
    .download-visual {
        display: block;
    }
}

.download-visual img {
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-2xl);
}

.download-decoration {
    position: absolute;
    inset: -20px;
    background: var(--color-accent);
    opacity: 0.2;
    border-radius: var(--border-radius-2xl);
    z-index: -1;
    transform: rotate(3deg);
}

.reviews {
    padding: var(--spacing-20) 0;
    background: var(--color-gray-50);
}

.reviews-grid {
    display: grid;
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.review-card {
    position: relative;
    background: var(--color-white);
    padding: var(--spacing-6);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.review-card-featured {
    border: 2px solid var(--color-accent);
}

.review-badge {
    position: absolute;
    top: calc(-1 * var(--spacing-3));
    right: var(--spacing-4);
    padding: var(--spacing-1) var(--spacing-3);
    background: var(--color-accent);
    color: var(--color-text);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-full);
}

.review-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.review-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.review-meta {
    flex: 1;
}

.review-name {
    display: block;
    font-weight: var(--font-weight-semibold);
}

.review-location {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.review-rating {
    display: flex;
    gap: 2px;
}

.star {
    width: 16px;
    height: 16px;
    background: var(--color-gray-300);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.star.filled {
    background: var(--color-accent);
}

.star.half {
    background: linear-gradient(90deg, var(--color-accent) 50%, var(--color-gray-300) 50%);
}

.review-text {
    font-style: italic;
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
}

.review-date {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.reviews-summary {
    margin-top: var(--spacing-10);
    text-align: center;
}

.summary-score {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-6) var(--spacing-10);
    background: var(--color-white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-lg);
}

.score-number {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

.score-stars {
    display: flex;
    gap: 4px;
}

.score-stars .star {
    width: 24px;
    height: 24px;
}

.score-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.faq {
    padding: var(--spacing-20) 0;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-gray-200);
}

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

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-5) 0;
    text-align: left;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    transition: color var(--transition-fast);
}

.faq-question:hover {
    color: var(--color-primary);
}

.faq-icon {
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
    position: relative;
    transition: transform var(--transition-base);
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background: var(--color-white);
    border-radius: 2px;
}

.faq-icon::before {
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.faq-icon::after {
    width: 2px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform var(--transition-base);
}

.faq-question[aria-expanded="true"] .faq-icon {
    background: var(--color-primary-dark);
}

.faq-question[aria-expanded="true"] .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
    padding-bottom: var(--spacing-5);
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
    animation: fadeIn var(--transition-base);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.trust-section {
    padding: var(--spacing-20) 0;
    background: var(--color-secondary-light);
}

.trust-grid {
    display: grid;
    gap: var(--spacing-6);
}

@media (min-width: 768px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .trust-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trust-card {
    background: var(--color-white);
    padding: var(--spacing-6);
    border-radius: var(--border-radius-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.trust-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.trust-icon {
    width: 64px;
    height: 64px;
    background: var(--color-secondary);
    border-radius: var(--border-radius-full);
    margin: 0 auto var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-icon::before {
    content: '';
    width: 32px;
    height: 32px;
    background: var(--color-primary);
}

.trust-icon-shield::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.trust-icon-lock::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.trust-icon-check::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.trust-icon-family::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.trust-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-2);
}

.trust-card p {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    margin: 0;
}

.trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-10);
}

.badge-item {
    padding: var(--spacing-2) var(--spacing-4);
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--border-radius-full);
}

.contact {
    padding: var(--spacing-20) 0;
}

.contact-wrapper {
    display: grid;
    gap: var(--spacing-10);
}

@media (min-width: 1024px) {
    .contact-wrapper {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-16);
    }
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    margin: var(--spacing-8) 0;
}

.contact-item {
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-start;
}

.contact-icon {
    width: 48px;
    height: 48px;
    background: var(--color-secondary);
    border-radius: var(--border-radius-lg);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-icon::before {
    content: '';
    width: 24px;
    height: 24px;
    background: var(--color-primary);
}

.contact-icon-email::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.contact-icon-info::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.contact-icon-business::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.contact-icon-location::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.contact-text strong {
    display: block;
    margin-bottom: var(--spacing-1);
}

.contact-text a,
.contact-text span {
    color: var(--color-text-light);
}

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

.response-time {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-secondary-light);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-sm);
    color: var(--color-primary-dark);
}

.response-icon {
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.contact-form-wrapper {
    background: var(--color-gray-50);
    padding: var(--spacing-8);
    border-radius: var(--border-radius-xl);
}

.contact-form h3 {
    margin-bottom: var(--spacing-6);
}

.form-group {
    margin-bottom: var(--spacing-4);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-white);
    border: 2px solid var(--color-gray-300);
    border-radius: var(--border-radius-lg);
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(56, 142, 60, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-gray-500);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.newsletter {
    padding: var(--spacing-16) 0;
    background: var(--color-gray-900);
}

.newsletter-card {
    display: grid;
    gap: var(--spacing-6);
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .newsletter-card {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
}

.newsletter-content h2 {
    color: var(--color-white);
    margin-bottom: var(--spacing-2);
}

.newsletter-content p {
    color: var(--color-gray-400);
    margin: 0;
}

.newsletter-input-group {
    display: flex;
    gap: var(--spacing-3);
}

.newsletter-input-group input {
    flex: 1;
    padding: var(--spacing-4);
    background: var(--color-white);
    border: none;
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-base);
}

.newsletter-input-group input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.newsletter-note {
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.newsletter-note a {
    color: var(--color-secondary);
}

.newsletter-note a:hover {
    color: var(--color-white);
}

.site-footer {
    background: var(--color-gray-900);
    color: var(--color-gray-400);
    padding: var(--spacing-16) 0 var(--spacing-8);
}

.footer-main {
    display: grid;
    gap: var(--spacing-10);
    margin-bottom: var(--spacing-10);
}

@media (min-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr 2fr;
    }
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin-bottom: var(--spacing-4);
}

.footer-logo:hover {
    color: var(--color-secondary);
}

.footer-logo .logo-icon {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.footer-tagline {
    margin-bottom: var(--spacing-6);
    line-height: var(--line-height-relaxed);
}

.footer-social {
    display: flex;
    gap: var(--spacing-3);
}

.social-link {
    width: 40px;
    height: 40px;
    background: var(--color-gray-800);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.social-link:hover {
    background: var(--color-primary);
}

.social-icon {
    width: 20px;
    height: 20px;
    background: var(--color-white);
}

.social-icon-facebook {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.social-icon-twitter {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M22.46 6c-.85.38-1.78.64-2.75.76 1-.6 1.76-1.55 2.12-2.68-.93.55-1.96.95-3.06 1.17-.88-.94-2.13-1.53-3.51-1.53-2.66 0-4.81 2.16-4.81 4.81 0 .38.04.75.13 1.1-4-.2-7.58-2.11-9.96-5.02-.42.72-.66 1.56-.66 2.46 0 1.68.85 3.16 2.14 4.02-.79-.02-1.53-.24-2.18-.6v.06c0 2.35 1.67 4.31 3.88 4.76-.4.1-.83.16-1.27.16-.31 0-.62-.03-.92-.08.63 1.96 2.45 3.39 4.61 3.43-1.69 1.32-3.83 2.1-6.15 2.1-.4 0-.8-.02-1.19-.07 2.19 1.4 4.78 2.22 7.57 2.22 9.07 0 14.02-7.52 14.02-14.02 0-.21 0-.43-.01-.64.96-.69 1.79-1.56 2.45-2.55z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.social-icon-instagram {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.social-icon-youtube {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.footer-nav {
    display: grid;
    gap: var(--spacing-8);
}

@media (min-width: 640px) {
    .footer-nav {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-nav-group h3 {
    color: var(--color-white);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-4);
}

.footer-nav-group ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.footer-nav-group a {
    color: var(--color-gray-400);
    transition: color var(--transition-fast);
}

.footer-nav-group a:hover {
    color: var(--color-white);
}

.footer-bottom {
    padding-top: var(--spacing-8);
    border-top: 1px solid var(--color-gray-800);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.copyright {
    font-size: var(--font-size-sm);
}

.copyright a {
    color: var(--color-secondary);
}

.footer-address {
    font-size: var(--font-size-sm);
}

.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-white);
    padding: var(--spacing-6);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: var(--z-modal);
    animation: slideUp var(--transition-base);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.cookie-content {
    max-width: var(--max-width-xl);
    margin: 0 auto;
}

.cookie-content h3 {
    margin-bottom: var(--spacing-2);
}

.cookie-content p {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-4);
}

.cookie-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.back-to-top {
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--border-radius-full);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-fixed);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--color-primary-dark);
    transform: translateY(-4px);
}

.back-to-top span {
    width: 24px;
    height: 24px;
    background: var(--color-white);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
}

.legal-content {
    padding: calc(var(--header-height) + var(--spacing-12)) 0 var(--spacing-16);
    background: var(--color-white);
    min-height: 100vh;
}

.legal-content .container {
    max-width: 800px;
}

.legal-header {
    margin-bottom: var(--spacing-10);
    padding-bottom: var(--spacing-6);
    border-bottom: 2px solid var(--color-gray-200);
}

.legal-header h1 {
    margin-bottom: var(--spacing-4);
}

.legal-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.legal-body h2 {
    font-size: var(--font-size-xl);
    margin: var(--spacing-10) 0 var(--spacing-4);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-gray-200);
}

.legal-body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal-body h3 {
    font-size: var(--font-size-lg);
    margin: var(--spacing-6) 0 var(--spacing-3);
}

.legal-body p {
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
}

.legal-body ul,
.legal-body ol {
    margin: var(--spacing-4) 0;
    padding-left: var(--spacing-6);
}

.legal-body li {
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-2);
    list-style: disc;
}

.legal-body ol li {
    list-style: decimal;
}

.legal-body a {
    color: var(--color-primary);
    text-decoration: underline;
}

.legal-body a:hover {
    color: var(--color-primary-dark);
}

.legal-body strong {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.legal-contact {
    background: var(--color-gray-50);
    padding: var(--spacing-6);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-8) 0;
}

.legal-contact h3 {
    margin-top: 0;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-6) 0;
}

.legal-table th,
.legal-table td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border: 1px solid var(--color-gray-300);
}

.legal-table th {
    background: var(--color-gray-100);
    font-weight: var(--font-weight-semibold);
}

.legal-table td {
    color: var(--color-text-light);
}

@media (max-width: 640px) {
    .legal-table {
        display: block;
        overflow-x: auto;
    }
}