/* InviteCraft landing pages - shared styles */



:root {

    --primary: #8B5A5A;

    --primary-light: #C4A484;

    --primary-dark: #5D3A3A;

    --accent: #D4AF37;

    --accent-light: #F4E4BC;

    --cream: #FDF8F3;

    --cream-dark: #F5EDE4;

    --text: #3D3D3D;

    --text-light: #6B6B6B;

    --white: #FFFFFF;

    --shadow: rgba(139, 90, 90, 0.1);

    --shadow-dark: rgba(0, 0, 0, 0.15);

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Inter', sans-serif;

    color: var(--text);

    background-color: var(--cream);

    line-height: 1.6;

    overflow-x: hidden;

}



h1, h2, h3, h4 {

    font-family: 'Playfair Display', serif;

    font-weight: 600;

}



.script-font {

    font-family: 'Great Vibes', cursive;

}



/* Modal Styles */

.modal-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.7);

    z-index: 2000;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.modal-overlay.active {

    display: flex;

    opacity: 1;

}



.modal-container {

    position: relative;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding: 2rem;

    overflow-y: auto;

}



.modal-content {

    background: var(--cream);

    border-radius: 20px;

    max-width: 900px;

    width: 100%;

    max-height: none;

    margin: 2rem auto;

    position: relative;

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);

    transform: translateY(-20px);

    opacity: 0;

    transition: all 0.3s ease;

}



.modal-overlay.active .modal-content {

    transform: translateY(0);

    opacity: 1;

}



.modal-header {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: var(--white);

    padding: 2.5rem 3rem;

    border-radius: 20px 20px 0 0;

    position: relative;

}



.modal-header h2 {

    font-size: 2rem;

    margin: 0;

}



.modal-header p {

    opacity: 0.9;

    margin-top: 0.5rem;

}



.modal-close {

    position: absolute;

    top: 1.5rem;

    right: 1.5rem;

    background: rgba(255, 255, 255, 0.2);

    border: none;

    color: var(--white);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 1.2rem;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

}



.modal-close:hover {

    background: rgba(255, 255, 255, 0.3);

    transform: scale(1.1);

}



.modal-body {

    padding: 2.5rem 3rem;

}



.modal-section {

    background: var(--white);

    padding: 2rem;

    border-radius: 12px;

    margin-bottom: 1.5rem;

    box-shadow: 0 5px 20px var(--shadow);

}



.modal-section h3 {

    color: var(--primary-dark);

    font-size: 1.3rem;

    margin-bottom: 1rem;

    padding-bottom: 0.5rem;

    border-bottom: 2px solid var(--accent-light);

}



.modal-section p {

    color: var(--text-light);

    margin-bottom: 0.75rem;

    line-height: 1.7;

}



.modal-section ul {

    color: var(--text-light);

    padding-left: 1.5rem;

    margin-bottom: 1rem;

}



.modal-section li {

    margin-bottom: 0.5rem;

}



.modal-highlight {

    background: var(--accent-light);

    border-left: 4px solid var(--accent);

    padding: 1.25rem 1.5rem;

    border-radius: 0 8px 8px 0;

    margin: 1rem 0;

}



.modal-highlight p {

    margin: 0;

    color: var(--primary-dark);

}



.modal-warning {

    background: #FEF5E7;

    border-left: 4px solid #E67E22;

    padding: 1.25rem 1.5rem;

    border-radius: 0 8px 8px 0;

    margin: 1rem 0;

}



.modal-warning p {

    margin: 0;

    color: var(--text);

}



/* Contact Modal Specific */

.contact-card {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: var(--white);

    padding: 2rem;

    border-radius: 12px;

    text-align: center;

    margin-bottom: 1.5rem;

}



.contact-card h3 {

    color: var(--white);

    border: none;

    padding: 0;

}



.contact-card p {

    color: rgba(255, 255, 255, 0.85);

}



.contact-icon {

    width: 70px;

    height: 70px;

    background: rgba(255, 255, 255, 0.15);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1rem;

    font-size: 1.8rem;

    color: var(--accent-light);

}



/* Terms Modal TOC */

.terms-toc {

    background: var(--white);

    padding: 1.5rem;

    border-radius: 12px;

    margin-bottom: 1.5rem;

}



.terms-toc h4 {

    color: var(--primary-dark);

    margin-bottom: 1rem;

}



.terms-toc ol {

    margin: 0;

    padding-left: 1.5rem;

    columns: 2;

    column-gap: 2rem;

}



.terms-toc li {

    margin-bottom: 0.4rem;

    font-size: 0.9rem;

}



.terms-toc a {

    color: var(--primary);

    text-decoration: none;

}



.terms-toc a:hover {

    color: var(--accent);

}



@media (max-width: 768px) {

    .modal-container {

        padding: 1rem;

    }



    .modal-header {

        padding: 2rem 1.5rem;

    }



    .modal-header h2 {

        font-size: 1.5rem;

        padding-right: 2rem;

    }



    .modal-body {

        padding: 1.5rem;

    }



    .modal-section {

        padding: 1.5rem;

    }



    .terms-toc ol {

        columns: 1;

    }

}



/* Navigation */

nav {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    padding: 1rem 2rem;

    transition: all 0.3s ease;

}



nav.scrolled {

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(10px);

    box-shadow: 0 2px 20px var(--shadow);

}



.nav-container {

    max-width: 1400px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    font-family: 'Playfair Display', serif;

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--primary);

    text-decoration: none;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.logo i {

    color: var(--accent);

}



.nav-links {

    display: flex;

    gap: 2rem;

    list-style: none;

}



.nav-links a {

    text-decoration: none;

    color: var(--text);

    font-weight: 500;

    font-size: 0.95rem;

    transition: color 0.3s ease;

    position: relative;

}



.nav-links a::after {

    content: '';

    position: absolute;

    bottom: -4px;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--accent);

    transition: width 0.3s ease;

}



.nav-links a:hover {

    color: var(--primary);

}



.nav-links a:hover::after {

    width: 100%;

}



.nav-cta {

    background: var(--primary);

    color: var(--white) !important;

    padding: 0.75rem 1.5rem;

    border-radius: 50px;

    transition: all 0.3s ease !important;

}



.nav-cta::after {

    display: none !important;

}



.nav-cta:hover {

    background: var(--primary-dark) !important;

    transform: translateY(-2px);

    box-shadow: 0 4px 15px var(--shadow-dark);

}



.mobile-menu-btn {

    display: none;

    background: none;

    border: none;

    font-size: 1.5rem;

    color: var(--primary);

    cursor: pointer;

}



/* Hero Section */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);

}



.hero-bg-pattern {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238B5A5A' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    opacity: 0.5;

}



.hero-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 8rem 2rem 4rem;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

    position: relative;

    z-index: 1;

}



.hero-content {

    max-width: 600px;

}



.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    background: var(--accent-light);

    color: var(--primary-dark);

    padding: 0.5rem 1rem;

    border-radius: 50px;

    font-size: 0.85rem;

    font-weight: 600;

    margin-bottom: 1.5rem;

}



.hero-badge i {

    color: var(--accent);

}



.hero h1 {

    font-size: 3.5rem;

    line-height: 1.15;

    color: var(--primary-dark);

    margin-bottom: 1.5rem;

}



.hero h1 .script-font {

    color: var(--accent);

    font-size: 4rem;

    display: block;

}



.hero p {

    font-size: 1.15rem;

    color: var(--text-light);

    margin-bottom: 2rem;

    max-width: 500px;

}



.hero-buttons {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.btn {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 1rem 2rem;

    border-radius: 50px;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;

    font-size: 1rem;

}



.btn-primary {

    background: var(--primary);

    color: var(--white);

    box-shadow: 0 4px 15px var(--shadow-dark);

}



.btn-primary:hover {

    background: var(--primary-dark);

    transform: translateY(-3px);

    box-shadow: 0 8px 25px var(--shadow-dark);

}



.btn-secondary {

    background: var(--white);

    color: var(--primary);

    border: 2px solid var(--primary-light);

}



.btn-secondary:hover {

    border-color: var(--primary);

    background: var(--cream);

}



.hero-stats {

    display: flex;

    gap: 3rem;

    margin-top: 3rem;

    padding-top: 2rem;

    border-top: 1px solid var(--primary-light);

}



.stat {

    text-align: center;

}



.stat-number {

    font-family: 'Playfair Display', serif;

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--primary);

}



.stat-label {

    font-size: 0.85rem;

    color: var(--text-light);

    text-transform: uppercase;

    letter-spacing: 1px;

}



.hero-visual {

    position: relative;

}



.hero-mockup {

    position: relative;

    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);

    transition: transform 0.5s ease;

}



.hero-mockup:hover {

    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);

}



.mockup-window {

    background: var(--white);

    border-radius: 16px;

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15), 0 10px 30px rgba(0, 0, 0, 0.1);

    overflow: hidden;

}



.mockup-header {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    padding: 1rem 1.5rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

}



.mockup-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.3);

}



.mockup-dot:first-child { background: #ff6b6b; }

.mockup-dot:nth-child(2) { background: #ffd93d; }

.mockup-dot:nth-child(3) { background: #6bcb77; }



.mockup-content {

    padding: 2rem;

    background: linear-gradient(180deg, #f8f4f0 0%, #fff 100%);

    min-height: 400px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.mockup-invite {

    background: var(--white);

    padding: 3rem 2.5rem;

    border-radius: 8px;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);

    text-align: center;

    border: 1px solid var(--cream-dark);

    max-width: 300px;

}



.mockup-invite .script-font {

    font-size: 2.5rem;

    color: var(--accent);

    margin-bottom: 0.5rem;

}



.mockup-invite h3 {

    font-size: 1.1rem;

    color: var(--primary);

    margin-bottom: 1rem;

    font-weight: 500;

}



.mockup-invite .divider {

    width: 60px;

    height: 2px;

    background: var(--accent);

    margin: 1rem auto;

}



.mockup-invite p {

    font-size: 0.85rem;

    color: var(--text-light);

}



.floating-element {

    position: absolute;

    animation: float 6s ease-in-out infinite;

}



.floating-element.el-1 {

    top: -20px;

    right: -30px;

    width: 80px;

    height: 80px;

    background: var(--accent-light);

    border-radius: 50%;

    animation-delay: 0s;

}



.floating-element.el-2 {

    bottom: 50px;

    left: -40px;

    width: 60px;

    height: 60px;

    background: var(--primary-light);

    border-radius: 50%;

    opacity: 0.5;

    animation-delay: 2s;

}



.floating-element.el-3 {

    top: 100px;

    right: -60px;

    font-size: 3rem;

    color: var(--accent);

    animation-delay: 1s;

}



@keyframes float {

    0%, 100% { transform: translateY(0px); }

    50% { transform: translateY(-20px); }

}



/* Story Section */

.story {

    padding: 8rem 2rem;

    background: var(--white);

    position: relative;

    overflow: hidden;

}



.story::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 200px;

    background: linear-gradient(180deg, var(--cream) 0%, transparent 100%);

}



.story-container {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 6rem;

    align-items: center;

    position: relative;

    z-index: 1;

}



.story-img-wrapper {

    position: relative;

}



.story-photo {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    border-radius: 20px;

    padding: 4rem 3rem;

    text-align: center;

    color: var(--white);

    box-shadow: 0 25px 60px rgba(139, 90, 90, 0.25);

}



.story-photo i {

    font-size: 5rem;

    margin-bottom: 1.5rem;

    display: block;

    opacity: 0.9;

}



.story-photo span {

    font-family: 'Playfair Display', serif;

    font-size: 1.5rem;

    font-weight: 500;

}



.story-decoration {

    position: absolute;

    border-radius: 50%;

}



.story-decoration.dec-1 {

    width: 150px;

    height: 150px;

    background: var(--accent-light);

    top: -30px;

    right: -30px;

    z-index: -1;

}



.story-decoration.dec-2 {

    width: 80px;

    height: 80px;

    background: var(--cream-dark);

    bottom: -20px;

    left: -20px;

    z-index: -1;

}



.section-label {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--accent);

    font-weight: 600;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 1rem;

}



.story-content h2 {

    font-size: 2.8rem;

    color: var(--primary-dark);

    margin-bottom: 1.5rem;

    line-height: 1.2;

}



.story-content h2 .script-font {

    color: var(--accent);

    font-size: 3.2rem;

}



.story-lead {

    font-size: 1.2rem;

    color: var(--primary);

    font-weight: 500;

    margin-bottom: 1.5rem;

}



.story-content p {

    color: var(--text-light);

    margin-bottom: 1rem;

    line-height: 1.8;

}



.story-signature {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-top: 2rem;

    padding-top: 2rem;

    border-top: 1px solid var(--cream-dark);

}



.signature-icon {

    width: 60px;

    height: 60px;

    background: var(--accent-light);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 1.5rem;

}



.signature-text {

    display: flex;

    flex-direction: column;

}



.signature-text .script-font {

    font-size: 1.8rem;

    color: var(--primary);

}



.signature-text span:last-child {

    font-size: 0.85rem;

    color: var(--text-light);

}



/* Features Section */

.features {

    padding: 8rem 2rem;

    background: linear-gradient(180deg, var(--white) 0%, var(--cream) 100%);

}



.features-container {

    max-width: 1200px;

    margin: 0 auto;

}



.section-header {

    text-align: center;

    max-width: 600px;

    margin: 0 auto 4rem;

}



.section-header h2 {

    font-size: 2.8rem;

    color: var(--primary-dark);

    margin-bottom: 1rem;

    line-height: 1.2;

}



.section-header h2 .script-font {

    color: var(--accent);

    font-size: 3.2rem;

}



.section-header p {

    color: var(--text-light);

    font-size: 1.1rem;

}



.features-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

}



.feature-card {

    background: var(--white);

    padding: 2.5rem 2rem;

    border-radius: 20px;

    box-shadow: 0 10px 40px var(--shadow);

    transition: all 0.4s ease;

    border: 1px solid transparent;

}



.feature-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 20px 60px var(--shadow-dark);

    border-color: var(--accent-light);

}



.feature-icon {

    width: 70px;

    height: 70px;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.5rem;

    font-size: 1.8rem;

    color: var(--white);

}



.feature-card h3 {

    font-size: 1.3rem;

    color: var(--primary-dark);

    margin-bottom: 0.75rem;

}



.feature-card p {

    color: var(--text-light);

    font-size: 0.95rem;

    line-height: 1.7;

}



/* How It Works Section */

.how-it-works {

    padding: 8rem 2rem;

    background: var(--primary-dark);

    position: relative;

    overflow: hidden;

}



.how-it-works::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");

}



.how-container {

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

    z-index: 1;

}



.how-it-works .section-header h2 {

    color: var(--white);

}



.how-it-works .section-header p {

    color: rgba(255, 255, 255, 0.7);

}



.how-it-works .section-label {

    color: var(--accent);

}



.steps-container {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 1rem;

    margin-top: 4rem;

}



.step {

    flex: 1;

    max-width: 320px;

    text-align: center;

    position: relative;

}



.step-number {

    font-family: 'Playfair Display', serif;

    font-size: 4rem;

    font-weight: 700;

    color: var(--accent);

    opacity: 0.3;

    position: absolute;

    top: -20px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 0;

}



.step-icon {

    width: 100px;

    height: 100px;

    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 2rem;

    font-size: 2.5rem;

    color: var(--primary-dark);

    position: relative;

    z-index: 1;

    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);

}



.step-content h3 {

    color: var(--white);

    font-size: 1.4rem;

    margin-bottom: 1rem;

}



.step-content p {

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 1.5rem;

    line-height: 1.7;

}



.step-features {

    list-style: none;

    text-align: left;

    background: rgba(255, 255, 255, 0.05);

    padding: 1.5rem;

    border-radius: 12px;

}



.step-features li {

    color: rgba(255, 255, 255, 0.8);

    margin-bottom: 0.75rem;

    display: flex;

    align-items: center;

    gap: 0.75rem;

    font-size: 0.9rem;

}



.step-features li:last-child {

    margin-bottom: 0;

}



.step-features li i {

    color: var(--accent);

    font-size: 0.8rem;

}



.step-connector {

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent);

    font-size: 1.5rem;

    opacity: 0.5;

    padding-top: 3rem;

}



.how-cta {

    text-align: center;

    margin-top: 4rem;

}



.btn-large {

    padding: 1.25rem 2.5rem;

    font-size: 1.1rem;

}



/* Templates Section */

.templates {

    padding: 8rem 2rem;

    background: var(--cream);

}



.templates-container {

    max-width: 1200px;

    margin: 0 auto;

}



.templates-showcase {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 2rem;

    margin-top: 3rem;

}



.template-card {

    background: var(--white);

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 10px 40px var(--shadow);

    transition: all 0.4s ease;

}



.template-card:hover {

    transform: translateY(-10px) scale(1.02);

    box-shadow: 0 20px 60px var(--shadow-dark);

}



.template-preview {

    aspect-ratio: 3/4;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

}



.template-inner {

    text-align: center;

    padding: 2rem;

}



.style-classic {

    background: linear-gradient(135deg, #f8f4f0 0%, #fff 100%);

    border-bottom: 3px solid var(--accent);

}



.style-classic .script-font {

    font-size: 1.8rem;

    color: var(--primary);

}



.style-classic .template-divider {

    width: 50px;

    height: 2px;

    background: var(--accent);

    margin: 1rem auto;

}



.style-classic .template-date {

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 3px;

    color: var(--text-light);

}



.style-modern {

    background: linear-gradient(180deg, #2d2d2d 0%, #1a1a1a 100%);

}



.style-modern .modern-names {

    font-family: 'Inter', sans-serif;

    font-weight: 300;

    font-size: 1.5rem;

    letter-spacing: 8px;

    color: #fff;

    line-height: 2;

}



.style-floral {

    background: linear-gradient(135deg, #fce4ec 0%, #fff 100%);

}



.style-floral .script-font {

    font-size: 1.6rem;

    color: #c2185b;

}



.style-floral .floral-accent {

    font-size: 3rem;

    margin-top: 1rem;

}



.style-rustic {

    background: linear-gradient(135deg, #efebe9 0%, #d7ccc8 100%);

}



.style-rustic .rustic-text {

    font-family: 'Playfair Display', serif;

    font-size: 1.3rem;

    color: #5d4037;

    letter-spacing: 4px;

    line-height: 1.8;

}



.template-info {

    padding: 1.5rem;

    text-align: center;

}



.template-info h4 {

    font-size: 1.1rem;

    color: var(--primary-dark);

    margin-bottom: 0.25rem;

}



.template-info p {

    font-size: 0.85rem;

    color: var(--text-light);

}



.templates-cta {

    text-align: center;

    margin-top: 3rem;

}



.templates-cta p {

    color: var(--text-light);

    margin-bottom: 1rem;

    font-size: 0.9rem;

}



/* FAQ Section */

.faq {

    padding: 8rem 2rem;

    background: var(--white);

}



.faq-container {

    max-width: 800px;

    margin: 0 auto;

}



.faq-grid {

    margin-top: 3rem;

}



.faq-item {

    background: var(--cream);

    border-radius: 12px;

    margin-bottom: 1rem;

    overflow: hidden;

    transition: all 0.3s ease;

}



.faq-item:hover {

    box-shadow: 0 5px 20px var(--shadow);

}



.faq-question {

    padding: 1.5rem 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    cursor: pointer;

    transition: all 0.3s ease;

}



.faq-question span {

    font-weight: 600;

    color: var(--primary-dark);

    font-size: 1.05rem;

}



.faq-question i {

    color: var(--accent);

    transition: transform 0.3s ease;

}



.faq-item.active .faq-question {

    background: var(--primary);

}



.faq-item.active .faq-question span {

    color: var(--white);

}



.faq-item.active .faq-question i {

    color: var(--accent-light);

    transform: rotate(180deg);

}



.faq-answer {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease;

}



.faq-item.active .faq-answer {

    max-height: 500px;

}



.faq-answer p {

    padding: 0 2rem 1.5rem;

    color: var(--text-light);

    line-height: 1.8;

}



/* CTA Section */

.cta-section {

    padding: 6rem 2rem;

    background: linear-gradient(135deg, var(--cream) 0%, var(--cream-dark) 100%);

}



.cta-container {

    max-width: 900px;

    margin: 0 auto;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    border-radius: 30px;

    padding: 4rem;

    text-align: center;

    position: relative;

    overflow: hidden;

    box-shadow: 0 30px 80px rgba(139, 90, 90, 0.3);

}



.cta-content {

    position: relative;

    z-index: 1;

}



.cta-content h2 {

    color: var(--white);

    font-size: 2.5rem;

    margin-bottom: 1rem;

}



.cta-content h2 .script-font {

    color: var(--accent-light);

    font-size: 3rem;

}



.cta-content p {

    color: rgba(255, 255, 255, 0.8);

    font-size: 1.1rem;

    margin-bottom: 2rem;

}



.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 1rem;

    flex-wrap: wrap;

}



.btn-light {

    background: rgba(255, 255, 255, 0.15);

    color: var(--white);

    border: 2px solid rgba(255, 255, 255, 0.3);

}



.btn-light:hover {

    background: rgba(255, 255, 255, 0.25);

    border-color: rgba(255, 255, 255, 0.5);

}



.cta-decoration {

    position: absolute;

    right: -50px;

    bottom: -50px;

    font-size: 15rem;

    color: rgba(255, 255, 255, 0.05);

}



/* Footer */

.footer {

    background: var(--primary-dark);

    color: var(--white);

    padding: 4rem 2rem 2rem;

}



.footer-container {

    max-width: 1200px;

    margin: 0 auto;

}



.footer-main {

    display: grid;

    grid-template-columns: 1.5fr 2fr;

    gap: 4rem;

    padding-bottom: 3rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}



.footer-brand .logo {

    color: var(--white);

    margin-bottom: 1rem;

    display: inline-flex;

}



.footer-brand p {

    color: rgba(255, 255, 255, 0.7);

    line-height: 1.7;

    margin-bottom: 1.5rem;

}



.footer-social {

    display: flex;

    gap: 1rem;

}



.footer-social a {

    width: 45px;

    height: 45px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    font-size: 1.2rem;

    transition: all 0.3s ease;

}



.footer-social a:hover {

    background: var(--accent);

    color: var(--primary-dark);

    transform: translateY(-3px);

}



.footer-links {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 2rem;

}



.footer-col h4 {

    font-size: 1.1rem;

    margin-bottom: 1.5rem;

    color: var(--white);

}



.footer-col ul {

    list-style: none;

}



.footer-col ul li {

    margin-bottom: 0.75rem;

}



.footer-col ul a {

    color: rgba(255, 255, 255, 0.7);

    text-decoration: none;

    transition: all 0.3s ease;

}



.footer-col ul a:hover {

    color: var(--accent);

}



.footer-bottom {

    padding-top: 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: rgba(255, 255, 255, 0.5);

    font-size: 0.9rem;

}



.footer-bottom i {

    color: var(--accent);

}



.solo-badge {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    background: rgba(255, 255, 255, 0.1);

    padding: 0.5rem 1rem;

    border-radius: 50px;

}



.solo-badge i {

    color: var(--accent);

}



/* Responsive Styles */

@media (max-width: 1024px) {

    .hero-container {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .hero-content {

        max-width: 100%;

    }



    .hero p {

        max-width: 100%;

    }



    .hero-buttons {

        justify-content: center;

    }



    .hero-stats {

        justify-content: center;

    }



    .hero-visual {

        display: none;

    }



    .story-container {

        grid-template-columns: 1fr;

        gap: 3rem;

    }



    .story-image {

        order: 2;

    }



    .features-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .steps-container {

        flex-direction: column;

        align-items: center;

    }



    .step {

        max-width: 100%;

    }



    .step-connector {

        transform: rotate(90deg);

        padding: 1rem 0;

    }



    .templates-showcase {

        grid-template-columns: repeat(2, 1fr);

    }



    .footer-main {

        grid-template-columns: 1fr;

        gap: 3rem;

    }



    .footer-links {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (max-width: 768px) {

    .nav-links {

        position: fixed;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: var(--white);

        flex-direction: column;

        justify-content: center;

        align-items: center;

        gap: 2rem;

        opacity: 0;

        visibility: hidden;

        transition: all 0.3s ease;

    }



    .nav-links.active {

        opacity: 1;

        visibility: visible;

    }



    .mobile-menu-btn {

        display: block;

        z-index: 1001;

    }



    .hero h1 {

        font-size: 2.5rem;

    }



    .hero h1 .script-font {

        font-size: 2.8rem;

    }



    .hero-stats {

        flex-direction: column;

        gap: 1.5rem;

    }



    .features-grid {

        grid-template-columns: 1fr;

    }



    .templates-showcase {

        grid-template-columns: 1fr;

        max-width: 300px;

        margin: 3rem auto 0;

    }



    .footer-links {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .footer-bottom {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }



    .cta-container {

        padding: 3rem 2rem;

    }



    .cta-content h2 {

        font-size: 2rem;

    }



    .cta-content h2 .script-font {

        font-size: 2.3rem;

    }



    .section-header h2 {

        font-size: 2.2rem;

    }



    .section-header h2 .script-font {

        font-size: 2.5rem;

    }

}



@media (max-width: 480px) {

    .hero h1 {

        font-size: 2rem;

    }



    .hero h1 .script-font {

        font-size: 2.2rem;

    }



    .btn {

        padding: 0.875rem 1.5rem;

        font-size: 0.9rem;

    }



    .hero-buttons {

        flex-direction: column;

    }



    .cta-buttons {

        flex-direction: column;

    }

}



/* ===========================================

   Platform sections (homepage "about" + designers page)

   =========================================== */



.nav-links a.active {

    color: var(--primary);

}



.nav-links a.active::after {

    width: 100%;

}



/* Flow card: Etsy order -> access -> personalize -> print */

.platform-flow {

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    border-radius: 20px;

    padding: 2.5rem;

    color: var(--white);

    box-shadow: 0 25px 60px rgba(139, 90, 90, 0.25);

}



.platform-flow h3 {

    font-size: 1.3rem;

    margin-bottom: 1.5rem;

    color: var(--accent-light);

}



.flow-step {

    display: flex;

    align-items: flex-start;

    gap: 1rem;

    padding: 1rem 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

}



.flow-step:last-child {

    border-bottom: none;

    padding-bottom: 0;

}



.flow-icon {

    flex-shrink: 0;

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.12);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--accent-light);

    font-size: 1.1rem;

}



.flow-step strong {

    display: block;

    font-size: 1rem;

    margin-bottom: 0.15rem;

}



.flow-step span {

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.75);

}



/* Two audiences */

.audience-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;

    margin-top: 2rem;

}



.audience-card {

    background: var(--cream);

    border-radius: 16px;

    padding: 1.75rem;

    border: 1px solid var(--cream-dark);

}



.audience-card h3 {

    font-size: 1.15rem;

    color: var(--primary-dark);

    margin-bottom: 0.75rem;

    display: flex;

    align-items: center;

    gap: 0.6rem;

}



.audience-card h3 i {

    color: var(--accent);

}



.audience-card ul {

    list-style: none;

    margin-bottom: 1.25rem;

}



.audience-card li {

    display: flex;

    gap: 0.6rem;

    color: var(--text-light);

    font-size: 0.95rem;

    margin-bottom: 0.5rem;

    line-height: 1.5;

}



.audience-card li i {

    color: var(--accent);

    margin-top: 0.3rem;

    font-size: 0.75rem;

}



.text-link {

    color: var(--primary);

    font-weight: 600;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

}



.text-link:hover {

    color: var(--primary-dark);

    gap: 0.6rem;

}



/* Designer teaser band on the homepage */

.designer-band {

    padding: 5rem 2rem;

    background: var(--white);

}



.designer-band-inner {

    max-width: 1100px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1.4fr 1fr;

    gap: 3rem;

    align-items: center;

    background: var(--cream);

    border: 1px solid var(--cream-dark);

    border-radius: 24px;

    padding: 3rem;

}



.designer-band h2 {

    font-size: 2.2rem;

    color: var(--primary-dark);

    line-height: 1.2;

    margin-bottom: 1rem;

}



.designer-band p {

    color: var(--text-light);

    margin-bottom: 1.5rem;

}



.designer-band-points {

    list-style: none;

    display: grid;

    gap: 0.85rem;

}



.designer-band-points li {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    color: var(--text);

    font-weight: 500;

}



.designer-band-points li i {

    width: 36px;

    height: 36px;

    border-radius: 10px;

    background: var(--accent-light);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



/* Designers page: signup directions */

.signup {

    padding: 8rem 2rem;

    background: var(--cream);

}



.signup-container {

    max-width: 1000px;

    margin: 0 auto;

}



.signup-steps {

    list-style: none;

    counter-reset: signup;

    display: grid;

    gap: 1rem;

    margin-top: 3rem;

}



.signup-steps li {

    counter-increment: signup;

    display: grid;

    grid-template-columns: 56px 1fr;

    gap: 1.25rem;

    align-items: start;

    background: var(--white);

    border-radius: 16px;

    padding: 1.5rem 1.75rem;

    box-shadow: 0 10px 30px var(--shadow);

}



.signup-steps li::before {

    content: counter(signup);

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

    color: var(--white);

    font-family: 'Playfair Display', serif;

    font-size: 1.5rem;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

}



.signup-steps h3 {

    font-size: 1.15rem;

    color: var(--primary-dark);

    margin-bottom: 0.35rem;

}



.signup-steps p {

    color: var(--text-light);

    font-size: 0.95rem;

    line-height: 1.7;

}



.signup-steps code {

    background: var(--cream);

    color: var(--primary-dark);

    padding: 0.1rem 0.4rem;

    border-radius: 4px;

    font-size: 0.9em;

}



.signup-cta {

    text-align: center;

    margin-top: 3rem;

}



.signup-cta p {

    color: var(--text-light);

    font-size: 0.9rem;

    margin-top: 1rem;

}



.etsy-notice {

    font-size: 0.8rem;

    color: rgba(255, 255, 255, 0.45);

    margin-top: 1.5rem;

    line-height: 1.6;

}



@media (max-width: 1024px) {

    .designer-band-inner {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 768px) {

    .audience-grid {

        grid-template-columns: 1fr;

    }



    .designer-band-inner {

        padding: 2rem 1.5rem;

    }



    .designer-band h2 {

        font-size: 1.8rem;

    }



    .signup-steps li {

        grid-template-columns: 1fr;

        padding: 1.5rem;

    }



    .platform-flow {

        padding: 2rem 1.5rem;

    }

}



/* Designers page: hero checklist + order feed mockup */

.hero-checks {

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem 1.75rem;

    margin-top: 2.5rem;

    padding-top: 1.75rem;

    border-top: 1px solid var(--primary-light);

}



.hero-checks li {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--text-light);

    font-size: 0.95rem;

    font-weight: 500;

}



.hero-checks li i {

    color: var(--accent);

}



.mockup-content.order-feed {

    align-items: stretch;

    justify-content: flex-start;

    gap: 0.85rem;

    min-height: 0;

}



.order-feed-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-family: 'Playfair Display', serif;

    font-size: 1.2rem;

    color: var(--primary-dark);

    margin-bottom: 0.25rem;

}



.order-feed-live {

    font-family: 'Inter', sans-serif;

    font-size: 0.75rem;

    font-weight: 600;

    color: #2f7d4f;

    display: flex;

    align-items: center;

    gap: 0.35rem;

}



.order-feed-live i {

    font-size: 0.5rem;

}



.order-row {

    display: flex;

    align-items: center;

    gap: 0.85rem;

    background: var(--white);

    border: 1px solid var(--cream-dark);

    border-radius: 12px;

    padding: 0.85rem 1rem;

}



.order-icon {

    width: 38px;

    height: 38px;

    border-radius: 10px;

    background: var(--accent-light);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



.order-info {

    flex: 1;

    min-width: 0;

}



.order-info strong {

    display: block;

    font-size: 0.92rem;

    color: var(--text);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.order-info span {

    font-size: 0.8rem;

    color: var(--text-light);

}



.order-status {

    font-size: 0.72rem;

    font-weight: 600;

    color: #2f7d4f;

    background: #e6f4ea;

    border-radius: 999px;

    padding: 0.25rem 0.65rem;

    flex-shrink: 0;

}



.order-feed-note {

    font-size: 0.75rem;

    color: var(--text-light);

    text-align: center;

    margin-top: 0.25rem;

}



@media (max-width: 768px) {

    .hero-checks {

        justify-content: center;

    }

}



@media (max-width: 768px) {

    .etsy-notice {

        text-align: center;

    }

}