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

:root {
    --color-dark: #0a0a0f;
    --color-dark-secondary: #12121a;
    --color-prospex-blue: #001f3f;
    --color-prospex-accent: #0074D9;
    --color-presage-cream: #f5f0e8;
    --color-presage-gold: #c9a84c;
    --color-presage-burgundy: #722F37;
    --color-seiko5-white: #f8f9fa;
    --color-seiko5-green: #00B894;
    --color-seiko5-orange: #E17055;
    --color-seiko5-blue: #0984E3;
    --color-astron-black: #0a0a0a;
    --color-astron-blue: #4A90D9;
    --color-astron-silver: #C0C0C0;
    --color-gold: #c9a84c;
    --color-gold-hover: #d4b85c;
    --color-text: #1a1a1a;
    --color-text-muted: #6b6b6b;
    --color-text-light: rgba(255, 255, 255, 0.7);
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--color-dark);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Scroll Progress Bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--color-gold), var(--color-gold-hover), var(--color-gold));
    background-size: 200% 100%;
    z-index: 10000;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.5), 0 0 20px rgba(201, 168, 76, 0.2);
    animation: scrollBarShimmer 2s linear infinite;
}

@keyframes scrollBarShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Section Dividers */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    color: var(--color-gold);
    background: var(--color-dark);
}

.wave-divider {
    width: 200px;
    height: 20px;
    animation: wavePulse 4s ease-in-out infinite;
}

@keyframes wavePulse {
    0%, 100% { opacity: 0.6; transform: scaleX(1); }
    50% { opacity: 1; transform: scaleX(1.1); }
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 14px 0;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.navbar.scrolled {
    padding: 10px 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: baseline;
    gap: 4px;
    text-decoration: none;
}

.logo img {
    height: 36px;
    width: auto;
    transition: var(--transition);
}

.logo-text {
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: 4px;
    transition: var(--transition);
}

.logo-subtext {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-text-muted);
    letter-spacing: 1px;
    transition: var(--transition);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 28px;
    align-items: center;
}

.nav-links a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: var(--transition);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: var(--transition);
}

.nav-links a:hover::after {
    width: 100%;
}

.navbar.scrolled .nav-links a {
    color: var(--color-text);
}

.navbar.scrolled .nav-links a:hover {
    color: var(--color-prospex-blue);
}

.nav-links a:hover {
    color: var(--color-gold);
}

.nav-cta {
    background: var(--color-gold) !important;
    color: var(--color-dark) !important;
    padding: 10px 24px;
    border-radius: 3px;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
}

.nav-cta::after {
    display: none !important;
}

.nav-cta:hover {
    background: var(--color-gold-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(201, 168, 76, 0.3);
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.mobile-menu-btn span {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--color-text);
    transition: var(--transition);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

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

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 1.5s ease, transform 6s ease;
}

.slide.active {
    opacity: 1;
    transform: scale(1);
}

.hero-slideshow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.88) 0%, rgba(10, 10, 15, 0.78) 40%, rgba(10, 10, 15, 0.92) 100%);
    z-index: 1;
}

.hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.particle {
    position: absolute;
    background: var(--color-gold);
    border-radius: 50%;
    opacity: 0;
    animation: flickerFloat 6s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(201, 168, 76, 0.6), 0 0 12px rgba(201, 168, 76, 0.3);
}

.particle:nth-child(1) { left: 8%; top: 20%; width: 3px; height: 3px; animation-delay: 0s; animation-duration: 5s; }
.particle:nth-child(2) { left: 22%; top: 55%; width: 2px; height: 2px; animation-delay: 0.8s; animation-duration: 6.5s; }
.particle:nth-child(3) { left: 40%; top: 15%; width: 4px; height: 4px; animation-delay: 1.6s; animation-duration: 5.5s; }
.particle:nth-child(4) { left: 55%; top: 45%; width: 2px; height: 2px; animation-delay: 2.4s; animation-duration: 7s; }
.particle:nth-child(5) { left: 72%; top: 25%; width: 3px; height: 3px; animation-delay: 0.4s; animation-duration: 6s; }
.particle:nth-child(6) { left: 85%; top: 60%; width: 2px; height: 2px; animation-delay: 3.2s; animation-duration: 5.8s; }
.particle:nth-child(7) { left: 15%; top: 75%; width: 3px; height: 3px; animation-delay: 1.2s; animation-duration: 6.2s; }
.particle:nth-child(8) { left: 35%; top: 85%; width: 2px; height: 2px; animation-delay: 2s; animation-duration: 7.2s; }
.particle:nth-child(9) { left: 60%; top: 70%; width: 4px; height: 4px; animation-delay: 0.6s; animation-duration: 5.3s; }
.particle:nth-child(10) { left: 78%; top: 80%; width: 2px; height: 2px; animation-delay: 3.8s; animation-duration: 6.8s; }
.particle:nth-child(11) { left: 48%; top: 35%; width: 3px; height: 3px; animation-delay: 1.4s; animation-duration: 5.7s; }
.particle:nth-child(12) { left: 92%; top: 40%; width: 2px; height: 2px; animation-delay: 2.8s; animation-duration: 6.4s; }

@keyframes flickerFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    10% { opacity: 0.7; }
    15% { opacity: 0.2; }
    20% { opacity: 0.8; }
    25% { opacity: 0.3; }
    30% { opacity: 0.6; }
    50% { opacity: 0.5; transform: translateY(-40px) scale(0.9); }
    70% { opacity: 0.7; }
    75% { opacity: 0.2; }
    80% { opacity: 0.6; }
    90% { opacity: 0.4; }
    100% { opacity: 0; transform: translateY(-80px) scale(1); }
}

.hero-content {
    text-align: center;
    max-width: 850px;
    padding: 0 24px;
    position: relative;
    z-index: 4;
}

.hero-subtitle {
    font-size: 0.85rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 20px;
    font-weight: 500;
}

.hero-line {
    width: 60px;
    height: 1px;
    background: var(--color-gold);
    margin: 0 auto 24px;
    opacity: 0.6;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 6.5vw, 5rem);
    font-weight: 700;
    line-height: 1.08;
    margin-bottom: 28px;
    color: var(--color-white);
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.15);
}

.hero-title-main {
    transition: color 0.4s ease;
    cursor: default;
}

.hero-title-main:hover {
    color: var(--color-gold);
}

.hero-title-main:not(:hover) {
    transition-delay: 3s;
}

.hero-title .accent {
    color: var(--color-gold);
    font-style: italic;
}

.hero-desc {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.75);
    max-width: 620px;
    margin: 0 auto 44px;
    line-height: 1.85;
    font-weight: 300;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

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

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

.btn-primary {
    background: var(--color-gold);
    color: var(--color-dark);
}

.btn-primary:hover {
    background: var(--color-gold-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(201, 168, 76, 0.35);
}

.btn-secondary {
    background: transparent;
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.btn-secondary:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(201, 168, 76, 0.15);
}

.btn-sm {
    padding: 12px 24px;
    font-size: 0.78rem;
}

/* Collection Navigation - Sticky Tabs */
.collection-nav {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(-100%);
    transition: all 0.4s ease;
}

.collection-nav.visible {
    opacity: 1;
    transform: translateY(0);
}

.collection-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    gap: 0;
}

.nav-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: var(--transition);
    position: relative;
    border-bottom: 2px solid transparent;
}

.nav-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-gold);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-tab:hover {
    color: var(--color-text);
}

.nav-tab.active {
    color: var(--color-gold);
}

.nav-tab.active::after {
    transform: scaleX(1);
}

.tab-icon {
    display: flex;
    align-items: center;
    opacity: 0.6;
}

.nav-tab.active .tab-icon {
    opacity: 1;
}

/* Collection Section Base */
.collection-section {
    position: relative;
    overflow: hidden;
}

.collection-tag {
    font-size: 0.78rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 16px;
    font-weight: 600;
}

.collection-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.1;
}

.collection-desc {
    font-size: 1.05rem;
    line-height: 1.85;
    font-weight: 300;
    max-width: 600px;
}

.collection-stats {
    display: flex;
    gap: 32px;
    margin-top: 32px;
}

.c-stat {
    text-align: center;
}

.c-stat-num {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.c-stat-label {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
}

/* PROSPEX - Dark, Sporty, Bold, Ocean Waves */
.section-prospex {
    background: linear-gradient(180deg, var(--color-prospex-blue) 0%, #001530 50%, var(--color-dark) 100%);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.section-prospex::before,
.section-prospex::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    z-index: 0;
    pointer-events: none;
    animation: waveBob 6s ease-in-out infinite;
}

.section-prospex::before {
    left: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 800'%3E%3Cpath d='M0 100 Q50 80 100 100 T200 100 M0 200 Q50 180 100 200 T200 200 M0 300 Q50 280 100 300 T200 300 M0 400 Q50 380 100 400 T200 400 M0 500 Q50 480 100 500 T200 500 M0 600 Q50 580 100 600 T200 600 M0 700 Q50 680 100 700 T200 700' stroke='%230074D9' stroke-width='1' fill='none' opacity='0.15'/%3E%3Cpath d='M0 150 Q50 130 100 150 T200 150 M0 250 Q50 230 100 250 T200 250 M0 350 Q50 330 100 350 T200 350 M0 450 Q50 430 100 450 T200 450 M0 550 Q50 530 100 550 T200 550 M0 650 Q50 630 100 650 T200 650' stroke='%230074D9' stroke-width='0.5' fill='none' opacity='0.08'/%3E%3C/svg%3E") no-repeat left center;
    background-size: contain;
}

.section-prospex::after {
    right: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 800'%3E%3Cpath d='M0 100 Q50 120 100 100 T200 100 M0 200 Q50 220 100 200 T200 200 M0 300 Q50 320 100 300 T200 300 M0 400 Q50 420 100 400 T200 400 M0 500 Q50 520 100 500 T200 500 M0 600 Q50 620 100 600 T200 600 M0 700 Q50 720 100 700 T200 700' stroke='%230074D9' stroke-width='1' fill='none' opacity='0.15'/%3E%3Cpath d='M0 150 Q50 170 100 150 T200 150 M0 250 Q50 270 100 250 T200 250 M0 350 Q50 370 100 350 T200 350 M0 450 Q50 470 100 450 T200 450 M0 550 Q50 570 100 550 T200 550 M0 650 Q50 670 100 650 T200 650' stroke='%230074D9' stroke-width='0.5' fill='none' opacity='0.08'/%3E%3C/svg%3E") no-repeat right center;
    background-size: contain;
    animation-delay: -3s;
}

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

.section-prospex .collection-tag {
    color: var(--color-prospex-accent);
}

.section-prospex .collection-title {
    color: var(--color-white);
}

.section-prospex .collection-desc {
    color: rgba(255, 255, 255, 0.7);
}

.section-prospex .c-stat-num {
    color: var(--color-prospex-accent);
}

.section-prospex .c-stat-label {
    color: rgba(255, 255, 255, 0.5);
}

.collection-hero {
    padding: 100px 0 60px;
    position: relative;
}

.collection-hero-bg {
    position: absolute;
    right: -5%;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    height: 80%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.15;
    z-index: 0;
}

.collection-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.collection-watches {
    padding: 60px 0 100px;
}

.watch-scroll {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 20px 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-prospex-accent) rgba(255, 255, 255, 0.05);
}

.watch-scroll::-webkit-scrollbar {
    height: 4px;
}

.watch-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.watch-scroll::-webkit-scrollbar-thumb {
    background: var(--color-prospex-accent);
    border-radius: 2px;
}

.watch-card-pro {
    flex: 0 0 340px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.watch-card-pro::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 116, 217, 0.15), transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.watch-card-pro::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(0deg, rgba(0, 116, 217, 0.1), transparent);
    transition: height 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.watch-card-pro:hover::before {
    width: 300px;
    height: 300px;
    opacity: 1;
}

.watch-card-pro:hover::after {
    height: 100%;
}

.watch-card-pro:hover {
    border-color: var(--color-prospex-accent);
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(0, 116, 217, 0.2), 0 0 30px rgba(0, 116, 217, 0.1);
}

.watch-card-pro .watch-card-image {
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(0, 31, 63, 0.8) 0%, rgba(0, 21, 48, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
}

.watch-card-pro .watch-card-image img {
    width: 85%;
    height: auto;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.watch-card-pro:hover .watch-card-image img {
    transform: scale(1.1);
}

.watch-card-pro .watch-card-info {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.watch-card-pro .watch-card-info h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-white);
    margin-bottom: 6px;
}

.watch-card-pro .watch-card-info h3.bright {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.2);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.watch-card-pro .watch-card-info h3.fading {
    transition: color 0.4s ease 3s, text-shadow 0.4s ease 3s;
}

.watch-card-pro .watch-card-info .watch-ref {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.btn-prospex {
    background: var(--color-prospex-accent);
    color: var(--color-white);
}

.btn-prospex:hover {
    background: #005bb5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 116, 217, 0.3);
}

/* PRESAGE - Warm, Elegant, Refined */
.section-presage {
    background: linear-gradient(180deg, var(--color-presage-cream) 0%, #ede5d5 50%, var(--color-presage-cream) 100%);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.section-presage::before,
.section-presage::after {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    width: 180px;
    z-index: 0;
    pointer-events: none;
    animation: goldWaveDrift 8s ease-in-out infinite;
}

.section-presage::before {
    left: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 600'%3E%3Cpath d='M0 50 Q45 30 90 50 T180 50 M0 100 Q45 80 90 100 T180 100 M0 150 Q45 130 90 150 T180 150 M0 200 Q45 180 90 200 T180 200 M0 250 Q45 230 90 250 T180 250 M0 300 Q45 280 90 300 T180 300 M0 350 Q45 330 90 350 T180 350 M0 400 Q45 380 90 400 T180 400 M0 450 Q45 430 90 450 T180 450 M0 500 Q45 480 90 500 T180 500 M0 550 Q45 530 90 550 T180 550' stroke='%23c9a84c' stroke-width='1.2' fill='none' opacity='0.2'/%3E%3Cpath d='M0 75 Q45 55 90 75 T180 75 M0 125 Q45 105 90 125 T180 125 M0 175 Q45 155 90 175 T180 175 M0 225 Q45 205 90 225 T180 225 M0 275 Q45 255 90 275 T180 275 M0 325 Q45 305 90 325 T180 325 M0 375 Q45 355 90 375 T180 375 M0 425 Q45 405 90 425 T180 425 M0 475 Q45 455 90 475 T180 475 M0 525 Q45 505 90 525 T180 525' stroke='%23c9a84c' stroke-width='0.6' fill='none' opacity='0.1'/%3E%3C/svg%3E") no-repeat left center;
    background-size: contain;
}

.section-presage::after {
    right: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 600'%3E%3Cpath d='M0 50 Q45 70 90 50 T180 50 M0 100 Q45 120 90 100 T180 100 M0 150 Q45 170 90 150 T180 150 M0 200 Q45 220 90 200 T180 200 M0 250 Q45 270 90 250 T180 250 M0 300 Q45 320 90 300 T180 300 M0 350 Q45 370 90 350 T180 350 M0 400 Q45 420 90 400 T180 400 M0 450 Q45 470 90 450 T180 450 M0 500 Q45 520 90 500 T180 500 M0 550 Q45 570 90 550 T180 550' stroke='%23c9a84c' stroke-width='1.2' fill='none' opacity='0.2'/%3E%3Cpath d='M0 75 Q45 95 90 75 T180 75 M0 125 Q45 145 90 125 T180 125 M0 175 Q45 195 90 175 T180 175 M0 225 Q45 245 90 225 T180 225 M0 275 Q45 295 90 275 T180 275 M0 325 Q45 345 90 325 T180 325 M0 375 Q45 395 90 375 T180 375 M0 425 Q45 445 90 425 T180 425 M0 475 Q45 495 90 475 T180 475 M0 525 Q45 545 90 525 T180 525' stroke='%23c9a84c' stroke-width='0.6' fill='none' opacity='0.1'/%3E%3C/svg%3E") no-repeat right center;
    background-size: contain;
    animation-delay: -4s;
}

@keyframes goldWaveDrift {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(10px); opacity: 1; }
}

.section-presage .collection-tag {
    color: var(--color-presage-burgundy);
}

.section-presage .collection-title {
    color: var(--color-text);
}

.section-presage .collection-desc {
    color: var(--color-text-muted);
}

.section-presage .c-stat-num {
    color: var(--color-presage-gold);
}

.section-presage .c-stat-label {
    color: var(--color-text-muted);
}

.presage-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 100px 0 60px;
}

.presage-content {
    max-width: 100%;
}

.presage-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.presage-circle {
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-presage-gold), var(--color-presage-burgundy));
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 60px rgba(201, 168, 76, 0.2);
    animation: presageGlow 4s ease-in-out infinite;
}

@keyframes presageGlow {
    0%, 100% { box-shadow: 0 25px 60px rgba(201, 168, 76, 0.2); }
    50% { box-shadow: 0 25px 80px rgba(201, 168, 76, 0.35), 0 0 40px rgba(201, 168, 76, 0.15); }
}

.presage-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background: var(--color-presage-cream);
}

.presage-watches {
    padding: 60px 0 100px;
}

.presage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.presage-card {
    background: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.15);
    transition: var(--transition);
    position: relative;
}

.presage-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), rgba(201, 168, 76, 0.08) 40%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 2;
}

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

.presage-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
    box-shadow: inset 0 0 30px rgba(201, 168, 76, 0.06);
}

.presage-card:hover::after {
    opacity: 1;
}

.presage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(201, 168, 76, 0.15), 0 0 30px rgba(201, 168, 76, 0.08);
    border-color: var(--color-presage-gold);
}

.presage-card .presage-card-image {
    aspect-ratio: 1;
    background: linear-gradient(135deg, var(--color-presage-cream) 0%, #e8e0d0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
}

.presage-card .presage-card-image img {
    width: 80%;
    height: auto;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.presage-card:hover .presage-card-image img {
    transform: scale(1.08);
}

.presage-card .presage-card-info {
    padding: 20px;
    text-align: center;
    border-top: 1px solid rgba(201, 168, 76, 0.1);
}

.presage-card .presage-card-info h3 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 6px;
}

.presage-card .presage-card-info .watch-ref {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    margin-bottom: 16px;
}

.btn-presage {
    background: var(--color-presage-gold);
    color: var(--color-dark);
}

.btn-presage:hover {
    background: var(--color-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.3);
}

/* SEIKO 5 SPORTS - Bright, Energetic, Playful */
.section-seiko5 {
    background: linear-gradient(180deg, var(--color-seiko5-white) 0%, #e8f5e9 50%, var(--color-seiko5-white) 100%);
    color: var(--color-text);
    position: relative;
    overflow: hidden;
}

.section-seiko5::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 800'%3E%3Cpath d='M100 800 Q95 700 80 600 Q70 550 50 500 Q40 470 30 440 Q20 400 15 350 Q10 300 20 250 Q25 220 40 180 Q50 150 70 120 Q80 100 90 80 Q95 60 100 40' stroke='%2300B894' stroke-width='2' fill='none' opacity='0.06'/%3E%3Cpath d='M80 600 Q60 580 40 560 M70 550 Q50 530 30 510 M50 500 Q30 480 10 460 M40 470 Q20 450 5 430 M30 440 Q15 420 0 400 M20 400 Q10 380 0 360 M15 350 Q5 330 0 310 M20 250 Q10 230 0 210 M25 220 Q15 200 5 180 M40 180 Q30 160 20 140 M50 150 Q40 130 30 110 M70 120 Q60 100 50 80' stroke='%2300B894' stroke-width='1' fill='none' opacity='0.04'/%3E%3C/svg%3E") no-repeat left bottom,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 800'%3E%3Cpath d='M100 800 Q105 700 120 600 Q130 550 150 500 Q160 470 170 440 Q180 400 185 350 Q190 300 180 250 Q175 220 160 180 Q150 150 130 120 Q120 100 110 80 Q105 60 100 40' stroke='%2300B894' stroke-width='2' fill='none' opacity='0.06'/%3E%3Cpath d='M120 600 Q140 580 160 560 M130 550 Q150 530 170 510 M150 500 Q170 480 190 460 M160 470 Q180 450 195 430 M170 440 Q185 420 200 400 M180 400 Q190 380 200 360 M185 350 Q195 330 200 310 M180 250 Q190 230 200 210 M175 220 Q185 200 195 180 M160 180 Q170 160 180 140 M150 150 Q160 130 170 110 M130 120 Q140 100 150 80' stroke='%2300B894' stroke-width='1' fill='none' opacity='0.04'/%3E%3C/svg%3E") no-repeat right bottom;
    background-size: 200px 800px;
    pointer-events: none;
    z-index: 0;
}

.section-seiko5 .collection-tag {
    color: var(--color-seiko5-green);
}

.section-seiko5 .collection-title {
    color: var(--color-text);
}

.section-seiko5 .collection-desc {
    color: var(--color-text-muted);
}

.seiko5-layout {
    padding: 100px 0 60px;
}

.seiko5-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.five-pillars {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 36px;
    flex-wrap: wrap;
}

.pillar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--color-white);
    border-radius: 50px;
    border: 1px solid rgba(0, 184, 148, 0.2);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text);
    transition: var(--transition);
}

.pillar:hover {
    border-color: var(--color-seiko5-green);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 184, 148, 0.15);
}

.pillar-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-seiko5-green);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 700;
}

.seiko5-watches {
    padding: 60px 0 100px;
}

.seiko5-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.seiko5-card {
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: var(--transition);
    position: relative;
}

.seiko5-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    transition: var(--transition);
}

.seiko5-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 2px solid transparent;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.seiko5-card:nth-child(1)::before { background: var(--color-seiko5-green); }
.seiko5-card:nth-child(2)::before { background: var(--color-seiko5-orange); }
.seiko5-card:nth-child(3)::before { background: var(--color-seiko5-blue); }

.seiko5-card:nth-child(1):hover::after { border-color: var(--color-seiko5-green); box-shadow: 0 0 20px rgba(0, 184, 148, 0.2); }
.seiko5-card:nth-child(2):hover::after { border-color: var(--color-seiko5-orange); box-shadow: 0 0 20px rgba(225, 112, 85, 0.2); }
.seiko5-card:nth-child(3):hover::after { border-color: var(--color-seiko5-blue); box-shadow: 0 0 20px rgba(9, 132, 227, 0.2); }

.seiko5-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.seiko5-card .seiko5-card-image {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
}

.seiko5-card .seiko5-card-image img {
    width: 80%;
    height: auto;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.seiko5-card:hover .seiko5-card-image img {
    transform: scale(1.12);
}

.seiko5-card .seiko5-card-info {
    padding: 20px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.seiko5-card .seiko5-card-info h3 {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 6px;
}

.seiko5-card .seiko5-card-info .watch-ref {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    margin-bottom: 16px;
}

.btn-seiko5 {
    background: var(--color-seiko5-green);
    color: var(--color-white);
}

.btn-seiko5:hover {
    background: #00a383;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 184, 148, 0.3);
}

/* ASTRON - Dark, Techy, Futuristic */
.section-astron {
    background: linear-gradient(180deg, #000011 0%, #0a0a2e 30%, #0d0d1a 60%, #000011 100%);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.section-astron::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1px 1px at 10% 15%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 25% 35%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 40% 10%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 85% 55%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 15% 65%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 30% 80%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 50% 70%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 65% 85%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 80% 40%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 95% 75%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 5% 90%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 20% 50%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 45% 25%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 60% 60%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 75% 5%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 90% 30%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 35% 55%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 8% 42%, rgba(255, 255, 255, 0.4), transparent);
    animation: starsTwinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes starsTwinkle {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

.astron-moon {
    position: absolute;
    top: 8%;
    right: 8%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #e8e8e8, #c0c0c0 40%, #a0a0a0 70%, #808080);
    box-shadow: 0 0 40px rgba(200, 200, 200, 0.3), 0 0 80px rgba(200, 200, 200, 0.1);
    z-index: 0;
    animation: moonFloat 12s ease-in-out infinite;
}

.astron-moon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(0, 0, 0, 0.15) 0%, transparent 15%),
        radial-gradient(circle at 60% 40%, rgba(0, 0, 0, 0.1) 0%, transparent 12%),
        radial-gradient(circle at 45% 65%, rgba(0, 0, 0, 0.12) 0%, transparent 10%),
        radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.08) 0%, transparent 8%),
        radial-gradient(circle at 25% 55%, rgba(0, 0, 0, 0.1) 0%, transparent 6%);
}

@keyframes moonFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(3deg); }
}

.astron-constellation {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
}

.astron-constellation:nth-child(1) {
    top: 20%;
    left: 5%;
    animation: constellationDrift1 25s ease-in-out infinite;
}

.astron-constellation:nth-child(2) {
    top: 60%;
    right: 3%;
    animation: constellationDrift2 30s ease-in-out infinite;
}

.astron-constellation:nth-child(3) {
    bottom: 15%;
    left: 15%;
    animation: constellationDrift3 28s ease-in-out infinite;
}

@keyframes constellationDrift1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.3; }
    25% { transform: translate(10px, -15px) rotate(2deg); opacity: 0.5; }
    50% { transform: translate(-5px, -25px) rotate(-1deg); opacity: 0.3; }
    75% { transform: translate(15px, -10px) rotate(3deg); opacity: 0.4; }
}

@keyframes constellationDrift2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.25; }
    33% { transform: translate(-12px, 10px) rotate(-2deg); opacity: 0.4; }
    66% { transform: translate(8px, 20px) rotate(1deg); opacity: 0.2; }
}

@keyframes constellationDrift3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.35; }
    50% { transform: translate(20px, -10px) rotate(-3deg); opacity: 0.5; }
}

.section-astron .collection-tag {
    color: var(--color-astron-blue);
}

.section-astron .collection-title {
    color: var(--color-white);
    font-size: clamp(3rem, 6vw, 5rem);
    text-shadow: 0 0 30px rgba(74, 144, 217, 0.4), 0 0 60px rgba(74, 144, 217, 0.2);
}

.section-astron .collection-title::after {
    background: var(--color-astron-blue);
    box-shadow: 0 0 10px rgba(74, 144, 217, 0.5);
}

.section-astron .collection-desc {
    color: rgba(255, 255, 255, 0.7);
}

.astron-layout {
    padding: 100px 0;
    position: relative;
}

.astron-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(74, 144, 217, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(74, 144, 217, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
}

.astron-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto 60px;
    text-align: center;
}

.astron-features {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
}

.astron-feat {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--color-astron-blue);
    font-size: 1rem;
    font-weight: 600;
    padding: 14px 24px;
    background: rgba(74, 144, 217, 0.08);
    border: 1px solid rgba(74, 144, 217, 0.15);
    border-radius: 50px;
    transition: var(--transition);
}

.astron-feat:hover {
    background: rgba(74, 144, 217, 0.15);
    border-color: rgba(74, 144, 217, 0.3);
    box-shadow: 0 0 20px rgba(74, 144, 217, 0.15);
}

.astron-feat svg {
    color: var(--color-astron-blue);
    width: 28px;
    height: 28px;
}

.astron-watches {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.astron-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(74, 144, 217, 0.15);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}

.astron-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(74, 144, 217, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: var(--transition);
    z-index: 0;
}

.astron-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 3px);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

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

.astron-card:hover::after {
    opacity: 1;
}

.astron-card:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(74, 144, 217, 0.15), 0 0 25px rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
}

.astron-card .astron-card-image {
    aspect-ratio: 1;
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(13, 13, 26, 0.95) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.astron-card .astron-card-image img {
    width: 80%;
    height: auto;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.astron-card:hover .astron-card-image img {
    transform: scale(1.08);
}

.astron-card .astron-card-info {
    padding: 20px;
    text-align: center;
    border-top: 1px solid rgba(74, 144, 217, 0.1);
    position: relative;
    z-index: 1;
}

.astron-card .astron-card-info h3 {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--color-white);
    margin-bottom: 6px;
}

.astron-card .astron-card-info h3.bright {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.2);
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.astron-card .astron-card-info h3.fading {
    transition: color 0.4s ease 3s, text-shadow 0.4s ease 3s;
}

.astron-card .astron-card-info .watch-ref {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.78rem;
    margin-bottom: 16px;
    font-family: var(--font-mono);
}

.btn-astron {
    background: var(--color-astron-blue);
    color: var(--color-white);
}

.btn-astron:hover {
    background: #3a7bc8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 217, 0.3);
}

/* Video Section - Unique Design */
.video-section {
    padding: 100px 0;
    background: var(--color-dark);
    position: relative;
    overflow: hidden;
}

.video-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.05) 0%, transparent 60%);
}

.video-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.video-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: var(--color-gold);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.video-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gold);
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.4); }
    50% { opacity: 0.6; box-shadow: 0 0 0 8px rgba(201, 168, 76, 0); }
}

.video-frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(201, 168, 76, 0.2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.video-frame::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--color-gold), transparent, var(--color-gold));
    opacity: 0.3;
    z-index: -1;
}

.video-frame video {
    width: 100%;
    max-height: 600px;
    display: block;
    background: var(--color-dark-secondary);
}

.video-title {
    text-align: center;
    margin-top: 20px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-text-light);
    letter-spacing: 0.5px;
}

/* CTA Section */
.cta-section {
    padding: 120px 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-secondary) 50%, var(--color-dark) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30 Q15 20 30 30 T60 30' stroke='%23c9a84c' stroke-width='0.5' fill='none' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.cta-quote {
    font-family: var(--font-heading);
    font-size: 6rem;
    color: #e0c060;
    opacity: 0.5;
    line-height: 1;
    margin-bottom: -30px;
    text-shadow: 0 0 20px rgba(224, 192, 96, 0.3);
}

.cta-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 18px;
    color: var(--color-white);
    font-weight: 700;
}

.cta-content h2.bright {
    color: #fff;
    text-shadow: 0 0 20px rgba(201, 168, 76, 0.6), 0 0 40px rgba(201, 168, 76, 0.3), 0 0 60px rgba(201, 168, 76, 0.15);
    transition: all 0.5s ease;
}

.cta-content h2::after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: var(--color-gold);
    margin: 18px auto 0;
    animation: goldLinePulse 3s ease-in-out infinite;
}

@keyframes goldLinePulse {
    0%, 100% { box-shadow: 0 0 4px rgba(201, 168, 76, 0.2); width: 50px; }
    50% { box-shadow: 0 0 15px rgba(201, 168, 76, 0.5), 0 0 30px rgba(201, 168, 76, 0.2); width: 65px; }
}

.cta-content p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    margin-bottom: 36px;
    line-height: 1.8;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.cta-buttons {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-section .btn-secondary {
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.cta-section .btn-secondary:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
    box-shadow: 0 8px 25px rgba(201, 168, 76, 0.15);
}

.cta-section .btn-primary {
    animation: ctaPulse 3s ease-in-out infinite;
}

@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.3); }
    50% { box-shadow: 0 0 0 12px rgba(201, 168, 76, 0); }
}

/* Footer */
.footer {
    padding: 70px 0 30px;
    background: var(--color-dark);
    color: var(--color-white);
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}

.footer-logo-text {
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 700;
    color: #e0c060;
    letter-spacing: 4px;
    margin-bottom: 18px;
    text-shadow: 0 0 10px rgba(224, 192, 96, 0.3);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.5);
    max-width: 320px;
    font-size: 0.92rem;
    line-height: 1.75;
    font-weight: 300;
}

.footer-links h4,
.footer-contact h4 {
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 22px;
    color: #e0c060;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(224, 192, 96, 0.25);
}

.footer-links ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links a,
.footer-contact a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
    position: relative;
    font-size: 0.92rem;
    font-weight: 400;
}

.footer-links a::after,
.footer-contact a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: width 0.3s ease;
}

.footer-links a:hover::after,
.footer-contact a:hover::after {
    width: 100%;
}

.footer-links a:hover,
.footer-contact a:hover {
    color: var(--color-gold);
}

.footer-contact p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
    font-weight: 400;
}

.social-links {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.social-links a {
    color: rgba(255, 255, 255, 0.5);
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.social-links a:hover {
    color: var(--color-gold);
    border-color: var(--color-gold);
    box-shadow: 0 0 20px rgba(201, 168, 76, 0.2);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.82rem;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 1024px) {
    .presage-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .presage-circle {
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }
    
    .presage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .astron-watches {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-white);
        flex-direction: column;
        padding: 28px 24px;
        gap: 22px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links a {
        color: var(--color-text) !important;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .collection-nav-inner {
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .collection-nav-inner::-webkit-scrollbar {
        display: none;
    }
    
    .nav-tab {
        padding: 14px 20px;
        white-space: nowrap;
        font-size: 0.72rem;
    }
    
    .presage-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .seiko5-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .astron-watches {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
        padding: 0 24px;
    }
    
    .five-pillars {
        flex-direction: column;
        align-items: center;
    }
    
    .collection-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .video-frame video {
        max-height: 300px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 36px;
    }
    
    .footer-brand p {
        max-width: none;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-quote {
        font-size: 4rem;
    }
}

@media (max-width: 480px) {
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .watch-card-pro {
        flex: 0 0 280px;
    }
}