@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700&display=swap');

:root {
    /* Color Palette */
    --primary-color: #2E003E;
    /* Deep Purple (Main Brand) */
    --secondary-color: #5B2C6F;
    /* Medium Purple (Buttons/Highlights) */
    --dark-bg: #1A0024;
    /* Very Dark Purple (Global BG) */
    --card-bg: #2E003E;
    /* Dark Purple (Cards) */
    --card-bg-alt: #3E1A4E;
    /* Slightly lighter Dark Purple */
    --accent-color: #D4AF37;
    /* Gold */
    --gold: #D4AF37;
    /* Alias for Gold */
    --light-accent: #E6E6FA;
    /* Lavender */
    --white: #ffffff;
    --text-color: #ffffff;
    --text-muted: #E0E0E0;
    --silver: #C0C0C0;
    --gray: #808080;
}

/* --- Base Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--dark-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Caveat', cursive;
    color: var(--white);
    margin-bottom: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

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

/* --- Components --- */
/* Buttons */
.btn,
.btn-outline-white,
.btn-filled-purple,
.btn-outline-purple {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.8rem 2rem;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 250px;
    text-align: center;
    border-width: 2px;
    border-style: solid;
}

/* Standard Button (Purple Fill) */
.btn,
.btn-filled-purple {
    background-color: var(--secondary-color);
    color: var(--white);
    border-color: var(--secondary-color);
}

.btn:hover,
.btn-filled-purple:hover {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--primary-color);
}

/* Outline White Button */
.btn-outline-white {
    background-color: transparent;
    color: var(--white);
    border-color: var(--secondary-color);
    /* Thicker border visual */
    border-width: 3px;
}

.btn-outline-white:hover {
    background-color: transparent;
    border-color: var(--gold);
    color: var(--gold);
}

/* Outline Purple Button */
.btn-outline-purple {
    background: transparent;
    color: var(--white);
    border-color: var(--white);
}

.btn-outline-purple:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* Text Button (Link style) */
.btn-text {
    color: var(--white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--gold);
    display: inline-block;
    width: max-content;
    /* Ensure underline matches text width */
    padding-bottom: 5px;
    margin-top: 2rem;
    /* Spacing from paragraph */
    transition: color 0.3s;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

.btn-text:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* Header & Navigation */
header {
    background-color: var(--dark-bg);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

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

.logo {
    font-family: 'Caveat', cursive;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: var(--white);
    font-weight: 600;
    font-size: 1rem;
    font-family: 'Lato', sans-serif;
}

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

/* --- Hero Section --- */
.hero {
    min-height: 100vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/home_hero_02.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    color: var(--white);
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.hero h1 {
    font-size: 4rem;
    color: var(--gold);
    margin-bottom: 1rem;
    animation: fadeInDown 1s ease-out;
}

.hero p {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
    max-width: 800px;
    color: var(--white);
    animation: fadeInUp 1s ease-out 0.5s backwards;
}

.eyebrow {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1rem;
    margin-bottom: 1rem;
    color: var(--white);
    animation: fadeInDown 1s ease-out;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 4rem;
    margin-bottom: 4rem;
    animation: fadeInUp 1s ease-out 1s backwards;
}

/* --- Carousel --- */
.carousel-container {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 2rem 0;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.carousel-track {
    display: flex;
    gap: 0;
    width: max-content;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    width: 400px;
    height: 550px;
    background: var(--card-bg);
    border: 1px solid var(--secondary-color);
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease;
    opacity: 0.7;
}

.carousel-item.active {
    transform: scale(1.1);
    z-index: 10;
    opacity: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.carousel-item:hover {
    opacity: 1;
}

.carousel-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.carousel-info {
    padding: 1.5rem;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.carousel-info h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--gold);
}

/* --- Services (ZigZag) --- */
.services-zigzag {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    padding: 0 !important;
    /* Override global section padding for full-width layout */
}

.zigzag-item {
    display: flex;
    align-items: stretch;
    min-height: 350px;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Sections Common */
section {
    padding: 3rem 2rem;
    position: relative;
    scroll-margin-top: 120px;
    /* Offset for sticky header (increased for visibility) */
}

.zigzag-item.reverse {
    flex-direction: row-reverse;
}

.zigzag-img {
    flex: 2;
    position: relative;
    display: flex;
}

.zigzag-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zigzag-content {
    flex: 1;
    padding: 4rem;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.6;
}

.zigzag-item:nth-child(even) .zigzag-content {
    background: var(--card-bg-alt);
}

.zigzag-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--gold);
    font-family: 'Caveat', cursive;
}

/* --- Gallery & Grid --- */
.gallery-grid {
    max-width: 1200px;
    margin: 2rem auto 4rem;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.3s ease;
    background-color: var(--card-bg);
    border: 1px solid var(--secondary-color);
}

.gallery-item:nth-child(even) {
    background-color: var(--card-bg-alt);
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
}

.item-info {
    padding: 1.5rem;
    text-align: center;
}

.item-info h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.hidden-desc {
    display: none;
}

/* CTA Tile in Gallery */
a.gallery-item.cta-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: var(--secondary-color);
    border: 2px solid var(--gold);
    padding: 2rem;
    text-align: center;
    min-height: 300px;
}

a.gallery-item.cta-tile:hover {
    background-color: var(--primary-color);
    transform: translateY(-5px);
}

.cta-content h3 {
    font-size: 1.8rem;
    color: var(--gold);
    margin-bottom: 1rem;
}

/* --- Modal --- */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: var(--secondary-color);
    /* Medium Purple */
    width: 90%;
    max-width: 900px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    animation: zoomIn 0.3s ease;
}

.modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: 85vh;
}

.modal-body img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-text {
    padding: 2rem;
    padding-bottom: 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    color: var(--white);
    max-height: 100%;
    box-sizing: border-box;
}

/* Force scrollable bottom space */
.modal-text::after {
    content: "";
    display: block;
    min-height: 5rem;
    /* ~80px space at the bottom */
    width: 100%;
    flex-shrink: 0;
}

.modal-text h2 {
    font-size: 1.8rem;
    /* Reduced from 2.2rem */
    color: var(--gold);
    margin-bottom: 0;
    /* Tight */
    line-height: 1.1;
    text-transform: uppercase;
}

.modal-text .product-code {
    font-family: 'Montserrat', sans-serif;
    color: #E0E0E0;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    /* Much tighter */
    display: block;
    font-weight: 500;
}

.modal-text h3 {
    font-size: 1.2rem;
    /* Smaller */
    color: var(--gold);
    margin-top: 0.8rem;
    /* Reduced space above */
    margin-bottom: 0.1rem;
    font-family: 'Caveat', cursive;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* --- Refined Modal Content Typography --- */
.modal-text p {
    font-size: 0.9rem;
    /* Smaller */
    line-height: 1.4;
    /* Tighter */
    margin-bottom: 0.4rem;
    /* Less gap */
}

/* Turn <strong> tags into Gold Sub-headers */
.modal-text strong {
    font-family: 'Caveat', cursive;
    font-size: 1.2rem;
    /* Smaller */
    color: var(--gold);
    display: block;
    margin-top: 0.6rem;
    /* Tighter */
    margin-bottom: 0.1rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Custom List with Gold Star Bullets */
.modal-text ul {
    list-style: none;
    padding-left: 0;
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;
}

.modal-text li {
    position: relative;
    padding-left: 1.2rem;
    /* Tighter indent */
    font-size: 0.9rem;
    /* Match p */
    line-height: 1.35;
    margin-bottom: 0.1rem;
    /* Very tight list items */
    color: #f0f0f0;
}

.modal-text li::before {
    content: '✦';
    /* Four-pointed star */
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--gold);
    font-size: 0.7rem;
}

#modal-order-btn {
    border: 2px solid var(--white);
    background: transparent;
    color: var(--white);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    padding: 0.6rem 1.5rem;
    /* Smaller button */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    align-self: flex-start;
    font-size: 0.9rem;
}

#modal-order-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--gold);
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    transition: color 0.3s;
    background: rgba(255, 255, 255, 0.8);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal:hover {
    color: var(--primary-color);
    background: #fff;
}

/* --- Contact Section & Form --- */
.contact-section {
    padding: 2rem 2rem;
    background-color: var(--card-bg);
}

.contact-container {
    max-width: 1100px;
    margin: 0 auto;
}

.contact-headers {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem;
}

.contact-headers h2 {
    font-size: 3.5rem;
    color: var(--gold);
}

.contact-content {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

.contact-info {
    flex: 1;
    min-width: 250px;
    padding-top: 1rem;
}

.info-item {
    margin-bottom: 2rem;
}

.info-item h3 {
    font-size: 1.1rem;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 0.1rem;
    /* Very tight to the text below */
    font-weight: 700;
}

.info-item p {
    margin-bottom: 0.2rem;
    /* Tight spacing between lines of text (e.g. name and IČ) */
    color: var(--white);
}

.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
}

.social-icon {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border: 3px solid var(--secondary-color);
    color: var(--white);
    border-radius: 8px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    transition: all 0.3s;
}

.social-icon:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.contact-form {
    flex: 2;
    min-width: 300px;
    background: var(--dark-bg);
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.form-row {
    display: flex;
    gap: 2rem;
}

.form-group {
    flex: 1;
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    background: #fafafa;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: var(--white);
}

.form-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color);
}

.checkbox-label input {
    margin-right: 10px;
    accent-color: var(--primary-color);
    width: auto;
}

/* --- FAQ & Testimonials --- */
.faq-section {
    padding: 2rem 2rem;
    background-color: var(--dark-bg);
}

.faq-section h2 {
    color: var(--gold);
    text-align: center;
    margin-bottom: 2rem;
}

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

.accordion-item {
    border-bottom: 1px solid #eee;
}

.accordion-header {
    width: 100%;
    padding: 1.5rem 0;
    background: none;
    border: none;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.accordion-header:hover,
.accordion-header.active {
    color: var(--gold);
}

.accordion-header .icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.accordion-header.active .icon {
    transform: rotate(45deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-content p {
    padding-bottom: 1.5rem;
    color: var(--text-color);
}

.testimonials-section {
    padding: 3rem 2rem 6rem;
    background-color: #240a33;
    background-blend-mode: overlay;
    background-image: url('images/stars_bg.png');
}

.testimonials-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.testimonials-section h2 {
    color: var(--gold);
}

.testimonials-carousel-wrapper {
    position: relative;
    max-width: 1200px;
    /* Increased slightly to give space for buttons + 3 cards */
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonials-track-container {
    overflow: hidden;
    width: 100%;
    padding: 10px 0;
    /* Space for hover effect */
}

.testimonials-track {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 2rem;
    /* Important: Matches JS calculation */
    transition: transform 0.4s ease-in-out;
}

.testimonial-card {
    /* Formula: (100% width - (2 gaps * 2rem)) / 3 items */
    flex: 0 0 calc((100% - 4rem) / 3);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
}

.testimonial-btn {
    background: transparent;
    border: none;
    color: var(--gold);
    font-size: 2.5rem;
    cursor: pointer;
    padding: 0 0.5rem;
    transition: transform 0.3s;
    z-index: 2;
}

.testimonial-btn:hover {
    transform: scale(1.2);
}

.testimonial-author h3 {
    margin-bottom: 0.2rem;
    color: var(--white);
    font-family: 'Caveat', cursive;
    font-size: 1.5rem;
}

.testimonial-author p {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.quote-icon {
    font-size: 3rem;
    color: var(--gold);
    opacity: 0.5;
    line-height: 1;
    margin-bottom: 1rem;
}

/* --- Page Components (Detail Lists) --- */
.section-title {
    font-size: 1.8rem;
    font-family: 'Caveat', cursive;
    color: var(--gold) !important;
    margin-top: 4rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.process-list,
.info-list {
    list-style: none;
    padding-left: 1rem;
    margin-bottom: 3rem;
}

.process-list li::before {
    content: '◆';
    color: var(--gold);
    position: absolute;
    left: 0;
    top: 0.2rem;
}

.info-list li::before {
    content: '✦';
    color: var(--gold);
    position: absolute;
    left: 0;
    top: 0.1rem;
}

.process-list li,
.info-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.intentions-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.intentions-list li {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.intentions-list li:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
    background: rgba(255, 255, 255, 0.05);
}

.intentions-list li strong {
    color: var(--gold);
    display: block;
    margin-bottom: 0.5rem;
}

/* --- Journey Map --- */
.journey-map {
    position: relative;
    max-width: 1000px;
    margin: 3rem auto;
    padding: 50px 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M 10,50 C 10,150 70,150 70,200 S 95,300 95,350 S 35,450 35,500 S 5,600 5,650 S 90,750 90,800 S 50,900 50,950' fill='none' stroke='%23D4AF37' stroke-width='1' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.journey-step {
    position: relative;
    width: 320px;
    max-width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.journey-step:nth-child(1) {
    align-self: flex-start;
    margin-left: 0;
}

.journey-step:nth-child(2) {
    align-self: center;
    margin-left: 30%;
}

.journey-step:nth-child(3) {
    align-self: flex-end;
    margin-right: 0;
}

.journey-step:nth-child(4) {
    align-self: center;
    margin-right: 30%;
}

.journey-step:nth-child(5) {
    align-self: flex-start;
    margin-left: 0;
}

.journey-step:nth-child(6) {
    align-self: flex-end;
    margin-right: 5%;
}

.journey-step:nth-child(7) {
    align-self: center;
    margin-left: 0;
}

.journey-content {
    padding: 1rem;
    background: var(--dark-bg);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 10px;
    width: 100%;
    text-align: center;
    z-index: 2;
    transition: transform 0.3s ease;
}

.journey-content:hover {
    transform: scale(1.03);
    border-color: var(--gold);
    background: var(--card-bg);
}

.journey-content h4 {
    color: var(--gold) !important;
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 0.3rem;
}

.journey-content p {
    font-size: 0.8rem;
    margin: 0;
}

/* --- Footer --- */
footer {
    background-color: var(--dark-bg);
    color: var(--white);
    text-align: center;
    padding: 1.5rem 1rem;
    margin-top: auto;
    border-top: 1px solid var(--secondary-color);
}

.footer-links {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

/* --- Animations --- */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Responsive --- */
@media (max-width: 900px) {

    .zigzag-item,
    .zigzag-item.reverse {
        flex-direction: column;
        height: auto;
    }

    .zigzag-img {
        height: 400px;
    }

    .zigzag-content {
        padding: 3rem 2rem;
    }

    .intentions-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .nav-links {
        display: none;
    }

    /* TODO: Mobile Menu */
    .contact-content,
    .form-row {
        flex-direction: column;
    }

    .contact-header h2 {
        font-size: 2.5rem;
    }

    .modal-body {
        grid-template-columns: 1fr;
    }

    .modal-body img {
        height: 300px;
    }

    .modal-text {
        padding: 2rem;
    }

    .journey-map {
        background-image: none;
        padding: 0;
        gap: 1.5rem;
        position: relative;
    }

    .journey-map::before {
        content: '';
        position: absolute;
        width: 2px;
        background: var(--gold);
        top: 0;
        bottom: 0;
        left: 20px;
    }

    .journey-step {
        width: 100%;
        max-width: none;
        align-self: flex-start !important;
        margin: 0 !important;
        padding-left: 50px;
    }

    .journey-step::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background: var(--dark-bg);
        border: 2px solid var(--gold);
        border-radius: 50%;
        z-index: 2;
    }
}

@media (max-width: 600px) {
    .intentions-list {
        grid-template-columns: 1fr;
    }
}

/* --- Page Headers (Má tvorba etc.) --- */
.page-header {
    text-align: center;
    padding: 4rem 1rem 3rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/home_hero_02.png');
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 3.5rem;
    color: var(--gold);
    margin-bottom: 0.5rem;
    /* Reduced margin */
}

.header-subtitle {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--white);
    /* Changed from --text-muted for contrast on bg image */
    line-height: 1.4;
}

.page-header h2 {
    margin-top: 0.5rem;
    font-size: 1.5rem;
}

.page-header h2 a {
    color: var(--gold);
    text-decoration: underline;
    transition: color 0.3s;
}

.page-header h2 a:hover {
    color: var(--white);
}

/* --- Portfolio Filter --- */
.portfolio-filter {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    /* Reduced margin */
    flex-wrap: wrap;
}

.filter-btn {
    background: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--white);
    padding: 0.8rem 2rem;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--primary-color);
}

/* --- Blog Section --- */
.blog-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.blog-post {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.blog-post:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
}

.blog-post img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.post-content {
    padding: 2rem;
}

/* --- Blog Detail Page --- */
.blog-post-detail {
    max-width: 100%;
}

.detail-hero-img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 3rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.blog-post-detail .post-content {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: left;
}

.blog-post-detail h3 {
    font-size: 1.25rem !important;
    color: var(--gold);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.blog-post-detail p {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.blog-post-detail ul {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
    list-style: none;
}

.blog-post-detail ul li {
    position: relative;
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    line-height: 1.6;
}

.blog-post-detail ul li::before {
    content: '✦';
    position: absolute;
    left: 0;
    color: var(--gold);
}

.blog-navigation-wide {
    width: 100%;
    margin: 4rem 0 2rem;
    padding: 2rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--secondary-color);
    box-sizing: border-box;
}

.blog-nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.blog-nav-link:hover {
    color: var(--gold);
}

.post-content h3 {
    color: var(--gold);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.post-content .date {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-style: italic;
}

.read-more {
    display: inline-block;
    width: max-content;
    /* Ensure underline matches text width */
    margin-top: 1rem;
    color: var(--white);
    border-bottom: 1px solid var(--gold);
    padding-bottom: 2px;
    font-weight: 600;
}

.read-more:hover {
    color: var(--gold);
}

.read-more::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

@media (min-width: 768px) {
    .blog-post {
        flex-direction: row;
    }

    .blog-post img {
        width: 40%;
        height: auto;
    }

    .post-content {
        width: 60%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* --- Detail Page Headers (Service Pages) --- */
.page-header-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/home_hero_02.png');
    background-size: cover;
    background-position: center;
    padding: 4rem 1rem 3rem;
    /* Compact padding */
    color: var(--white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}



.detail-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

.detail-content h2 {
    color: var(--gold);
    font-size: 2.5rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.intro-text {
    font-size: 1.1rem;
    line-height: 1.6;
    /* Reduced line height */
    margin: 0 auto 2rem;
    /* Centering */
    max-width: 700px;
    /* Narrower for readability */
}

/* --- Journey Map (Process) --- */
.journey-map {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    /* Reduced margin */
    padding: 0;
    /* Minimal padding - snake touches edges more */
    /* Custom Path: User Provided Snake Image */
    background-image: url('images/journey_snake_bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Significantly reduced gap to squash vertical height despite larger boxes */
}

/* Clear the old central line */
.journey-map::after {
    display: none;
}

.journey-map::before {
    display: none;
}

/* Base Step Wrapper */
.journey-step {
    position: relative;
    width: 360px;
    /* Increased width (+20%) */
    max-width: 90%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    /* Above snake */
}

/* Irregular Positioning - Targeting to TOUCH the snake path */

/* Irregular Positioning - Targeted to User Image Curves (L-L-R-L-R-L-R) + Fine Tuning */

/* 1. Tail (Right side) - Moved from Left as requested */
.journey-step:nth-child(1) {
    align-self: flex-end;
    margin-right: 15%;
    transform: translateX(-10px);
    /* Nudge left to touch tail */
}

/* 2. First Arc (Left) - Shift Request: 0.5cm Down, 0.5cm Left */
.journey-step:nth-child(2) {
    align-self: flex-start;
    margin-left: 2%;
    /* Reduced */
    transform: translate(-10px, 10px);
}

/* 3. First Arc (Right) - Shift Request: 0.5cm Right */
.journey-step:nth-child(3) {
    align-self: flex-end;
    margin-right: 2%;
    /* Reduced */
    transform: translateX(10px);
}

/* 4. Second Arc (Left) - Shift Request: 1cm Left */
.journey-step:nth-child(4) {
    align-self: flex-start;
    margin-left: 2%;
    transform: translateX(-20px);
}

/* 5. Second Arc (Right) - Shift Request: 1cm Right */
.journey-step:nth-child(5) {
    align-self: flex-end;
    margin-right: 2%;
    transform: translateX(20px);
}

/* 6. Last Arc (Left) - Shift Request: 0.5cm Right */
.journey-step:nth-child(6) {
    align-self: flex-start;
    margin-left: 2%;
    transform: translateX(10px);
}

/* 7. Head (Right side) - Shift Request: 0.3cm Right, 0.3cm Up */
.journey-step:nth-child(7) {
    align-self: flex-end;
    margin-right: 10%;
    /* Reduced */
    flex-direction: row;
    /* reset to row if it was column */
    margin-left: 0;
    /* Clear previous override */
    transform: translate(10px, -10px);
}


/* The Box (Stop/Station) - Fixed Dimensions & Centered Content */
.journey-content {
    padding: 1.5rem;
    background: var(--dark-bg);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 10px;
    position: relative;
    transition: transform 0.3s ease;
    width: 100%;

    /* Uniform Size Enforcement */
    min-height: 170px;
    /* Increased height (+20%) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center text vertically */
    align-items: center;
}

.journey-content:hover {
    transform: scale(1.03);
    border-color: var(--gold);
    background: var(--card-bg);
    z-index: 10;
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.2);
}

/* Text Styling */
.journey-content h4 {
    margin-top: 0;
    color: var(--gold) !important;
    font-family: 'Caveat', cursive;
    font-size: 1.4rem;
    /* Increased size (+20%) */
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.journey-content p {
    margin: 0;
    font-size: 1.05rem;
    /* Increased size (+~15-20%) */
    line-height: 1.5;
    color: var(--white);
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .journey-map {
        background-image: none;
        padding: 0;
        gap: 1.5rem;
    }

    .journey-map::before {
        content: '';
        position: absolute;
        width: 3px;
        background: var(--gold);
        top: 0;
        bottom: 0;
        left: 20px;
        display: block;
    }

    .journey-step {
        width: 100%;
        max-width: none;
        align-self: flex-start !important;
        margin: 0 !important;
        padding-left: 50px;
        padding-right: 10px;
    }

    .journey-content {
        min-height: auto;
        /* Allow flexible height on mobile */
        text-align: left;
        align-items: flex-start;
        padding: 1rem;
    }

    /* Dot for mobile */
    .journey-step::before {
        content: '';
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 15px;
        height: 15px;
        background: var(--dark-purple);
        border: 3px solid var(--gold);
        border-radius: 50%;
        z-index: 2;
    }
}

/* --- Journey Map Section Wrapper (Purple + Dots) --- */
.journey-section-wrapper {
    background-color: #100321;
    /* Specific lighter purple requested by user */
    position: relative;
    padding: 1rem 1rem;
    /* Significantly reduced vertical padding */
    overflow: hidden;
    /* Contain dots */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* Full bleed width breakout */
    margin-top: 0;
    margin-bottom: 0;
}

/* Ensure content sits above dots & Align Header */
.journey-section-wrapper .section-title {
    position: relative;
    z-index: 5;
    max-width: 1000px;
    margin: 2rem auto 1rem;
    /* Centered block */
    text-align: left;
    /* Aligned with other section headers */
    padding: 0 2rem;
    /* Mimic .detail-container padding */
    width: 100%;
    box-sizing: border-box;
}

.journey-map {
    position: relative;
    z-index: 5;
}

/* Dots Container */
#stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Random Gold Dots */
.gold-dot {
    position: absolute;
    background-color: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(212, 175, 55, 0.6);
}
/* --- Landing Page (Lead Magnet) --- */
.landing-page-body {
    background-color: var(--dark-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.landing-header {
    text-align: center;
    padding: 2rem;
}

.landing-hero {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.landing-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.landing-content {
    flex: 1;
    min-width: 300px;
}

.landing-content .eyebrow {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

.landing-content h1 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--white);
}

.landing-lead {
    font-size: 1.15rem;
    color: var(--text-color);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.landing-benefits {
    list-style: none;
    margin-bottom: 2.5rem;
    padding: 0;
}

.landing-benefits li {
    font-size: 1.05rem;
    margin-bottom: 0.8rem;
    color: var(--text-muted);
}

.form-box {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid var(--secondary-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.form-box h3 {
    font-size: 1.3rem;
    color: var(--white);
    margin-bottom: 1.5rem;
    text-transform: none;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}

.signup-form .form-group {
    margin-bottom: 1rem;
}

.signup-form input {
    width: 100%;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #4a2c5a;
    background: #180522;
    color: var(--white);
    font-family: 'Lato', sans-serif;
}

.signup-form input:focus {
    outline: none;
    border-color: var(--gold);
}

.full-width {
    width: 100% !important;
}

.form-footer {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1rem;
    text-align: center;
    font-style: italic;
}

.landing-visual {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.mockup-img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.2);
    transform: rotate(2deg);
    transition: transform 0.3s ease;
}

.mockup-img:hover {
    transform: rotate(0deg) scale(1.02);
}

.landing-footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.landing-footer a {
    color: var(--gold);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .landing-container {
        flex-direction: column-reverse; /* Image top on mobile? Or text top? Usually visual first or header first. Let's keep text first for speed, or visual first for appeal. Actually text first is better for loading. Reversing? */
        flex-direction: column;
        gap: 2rem;
    }
    
    .landing-content h1 {
        font-size: 2.2rem;
    }
    
    .mockup-img {
        max-width: 80%;
    }
}