:root {--color-main: #5c5566; --color-main-dark: #3b3644; --color-accent: #7b7385; --color-bg: #f9f8fa; --color-text-dark: #231f28; --color-text-light: #ffffff; --color-text-muted: #8c8594; --color-input-bg: #2d2833; --color-input-text: #ffffff; --color-card-light: #ffffff; --color-border: #e2dfed; --font-main: 'Inter', sans-serif; --font-display: 'Playfair Display', serif;} * {box-sizing: border-box; margin: 0; padding: 0;} body {font-family: var(--font-main); background-color: var(--color-bg); color: var(--color-text-dark); line-height: 1.6; -webkit-font-smoothing: antialiased;} a {text-decoration: none; color: inherit; transition: color 0.3s ease;} h1, h2, h3, h4 {font-family: var(--font-display); font-weight: 700; line-height: 1.25;} .container {max-width: 1200px; margin: 0 auto; padding: 0 24px;} .small-container {max-width: 800px;} .grid-2-col {display: grid; grid-template-columns: 1fr 1fr; gap: 60px;} .grid-3-col {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;} .grid-4-col {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;} .text-center {text-center: center; text-align: center;} .align-center {align-items: center;} .section-label {display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--color-main); font-weight: 700; margin-bottom: 12px;} .section-label.light {color: var(--color-text-muted);} .section-title {font-size: 38px; color: var(--color-text-dark); margin-bottom: 24px; font-weight: 700;} .section-title.light-text {color: var(--color-text-light);} .section-desc {font-size: 16px; color: var(--color-text-muted); margin-bottom: 30px;} .section-desc.light-text {color: #bfaec2;} .btn {display: inline-block; font-size: 13px; font-weight: 600; padding: 14px 28px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1.5px; border: none; cursor: pointer; transition: all 0.3s ease;} .btn-primary {background-color: var(--color-main); color: var(--color-text-light);} .btn-primary:hover {background-color: var(--color-main-dark);} .btn-secondary {background-color: transparent; border: 1px solid var(--color-main); color: var(--color-main);} .btn-secondary:hover {background-color: var(--color-main); color: var(--color-text-light);} .btn-secondary-inverse {background-color: transparent; border: 1px solid #7c7287; color: var(--color-text-light);} .btn-secondary-inverse:hover {background-color: var(--color-text-light); color: var(--color-text-dark);} .btn-sm {padding: 8px 16px; font-size: 11px;} .btn-full {width: 100%; text-align: center;} .main-header {background-color: rgba(255, 255, 255, 0.95); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid var(--color-border); backdrop-filter: blur(8px);} .flex-header {height: 80px; display: flex; justify-content: space-between; align-items: center;} .logo {display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--color-text-dark);} .logo svg {color: var(--color-main);} .nav-menu {display: flex; align-items: center; gap: 32px;} .nav-link {font-size: 14px; font-weight: 500; color: var(--color-text-dark);} .nav-link:hover, .nav-link.active {color: var(--color-main);} .burger {display: none; background: none; border: none; flex-direction: column; gap: 6px; cursor: pointer;} .burger-line {width: 24px; height: 2px; background-color: var(--color-text-dark); transition: all 0.3s ease;} .hero {aspect-ratio: 16/9; min-height: 90vh; background-color: var(--color-main-dark); background-image: url('../frames/gallery.jpg'); background-size: cover; background-position: center; position: relative; display: flex; align-items: center; justify-content: flex-start; overflow: hidden;} .hero-overlay {position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(135deg, rgba(35, 31, 40, 0.95) 30%, rgba(35,31,40,0.5) 100%); z-index: 1;} .hero-content {position: relative; z-index: 2; max-width: 720px; padding: 40px 0;} .hero-title {font-size: 54px; color: var(--color-text-light); margin-bottom: 24px; line-height: 1.15;} .hero-subtitle {font-size: 18px; color: #d6cbd9; margin-bottom: 36px; line-height: 1.6;} .about-intro {padding: 100px 0; background-color: #fff;} .about-image-wrapper img {width: 100%; height: auto; border-radius: 8px; filter: grayscale(10%) contrast(105%);} .about-text-content {display: flex; flex-direction: column; justify-content: center;} .how-it-works {padding: 100px 0; background-color: var(--color-main-dark); color: var(--color-text-light);} .step-card {background-color: var(--color-card-light); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; transition: transform 0.3s ease;} .step-card:hover {transform: translateY(-5px);} .step-image-wrap {position: relative; aspect-ratio: 4/3; overflow: hidden;} .step-image-wrap img {width:100%; height:100%; object-fit:cover;} .step-card-content {padding: 24px; text-align: left;} .step-card-content h3 {font-family: var(--font-main); font-size: 16px; font-weight: 700; color: var(--color-text-dark); margin-bottom: 10px;} .step-card-content p {font-size: 13px; color: var(--color-text-muted); line-height: 1.4;} .highlights {padding: 100px 0; background-color: #fff;} .highlights-text-content {display: flex; flex-direction: column; justify-content: center;} .highlight-list {list-style: none; margin-top: 20px;} .highlight-list li {margin-bottom: 18px; font-size: 15px; color: var(--color-text-dark); padding-left: 20px; position: relative;} .highlight-list li::before {content: '✓'; position: absolute; left: 0; top: 0; color: var(--color-main); font-weight: 700;} .highlights-image-wrapper img {width: 100%; height: auto; border-radius: 8px;} .who-we-serve {padding: 100px 0; background-color: var(--color-bg);} .serve-item {background: #fff; padding: 40px; border-radius: 8px; border: 1px solid var(--color-border); transition: all 0.3s ease;} .serve-item:hover {box-shadow: 0 10px 30px rgba(0,0,0,0.05);} .serve-item h3 {font-family: var(--font-main); font-size: 18px; color: var(--color-text-dark); margin-bottom: 16px;} .serve-item p {font-size: 14px; color: var(--color-text-muted);} .pricing-section {padding: 100px 0; background-color: var(--color-main-dark); color: var(--color-text-light);} .pricing-intro {margin-bottom: 60px;} .pricing-grid {align-items: stretch;} .pricing-card {background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.3s ease;} .pricing-card.featured {background: #fff; border-color: #fff; color: var(--color-text-dark);} .pricing-card.featured .pricing-header .price {color: var(--color-main);} .pricing-card.featured .pricing-header h3 {color: var(--color-text-dark);} .pricing-header {margin-bottom: 24px; text-align: left;} .price {font-size: 14px; color: #dfd4e6; margin-bottom: 8px;} .price span {font-size: 42px; font-weight: 700; font-family: var(--font-display); vertical-align: middle;} .pricing-header h3 {font-size: 24px; color: var(--color-text-light); margin-top: 8px;} .pricing-body p {font-size: 14px; margin-bottom: 24px; line-height: 1.5; color: inherit;} .pricing-list {list-style: none; margin-bottom: 40px;} .pricing-list li {font-size: 14px; margin-bottom: 12px; padding-left: 20px; position: relative;} .pricing-list li::before {content: '•'; position: absolute; left: 0; color: var(--color-main); font-weight: 700;} .cta-block-banner {padding: 120px 0; background-color: #fff;} .cta-text-wrapper {padding-right: 40px;} .cta-visual-group {position: relative; display: flex; gap: 20px;} .img-half {width: 48%; height: auto; object-fit: cover; border-radius: 8px;} .img-half.offset {transform: translateY(30px);} .contact-block-form {padding: 100px 0; background-color: var(--color-main-dark); color: var(--color-text-light);} .main-form {width: 100%; background-color: var(--color-input-bg); padding: 40px; border-radius: 8px; margin: 40px 0;} .form-group {margin-bottom: 20px;} .form-input {width: 100%; padding: 16px; border: 1px solid rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.05); border-radius: 4px; color: var(--color-input-text); font-family: var(--font-main); font-size: 14px; transition: border 0.3s ease;} .form-input:focus {outline: none; border-color: var(--color-main);} .checkbox-group {margin-bottom: 30px;} .checkbox-label {display: flex; align-items: flex-start; gap: 10px; cursor: pointer;} .checkbox-text {font-size: 12px; color: #bfaec2;} .checkbox-text a {text-decoration: underline; color: var(--color-text-light);} .error-message {color: #ff6b6b; font-size: 13px; margin-bottom: 15px; display:none;} .contact-details-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 60px;} .detail-card {background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 24px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; text-align: center;} .detail-icon {width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); margin-bottom: 16px; color: var(--color-text-light);} .detail-card h4 {font-family: var(--font-main); font-size: 12px; letter-spacing: 1px; margin-bottom: 8px; color: #8c8594;} .detail-card p {font-size: 14px; word-break: break-word;} .page-hero {height: 40vh; background-color: var(--color-main-dark); background-image: url('../frames/gallery.jpg'); background-size: cover; background-position: center; position: relative; display: flex; align-items: center;} .blog-list-section {padding: 100px 0; background: var(--color-bg);} .blog-card {background-color: #fff; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); display: flex; flex-direction: column;} .blog-card-image {aspect-ratio: 16/10; overflow:hidden;} .blog-card-image img {width: 100%; height: 100%; object-fit: cover;} .blog-card-content {padding: 30px;} .blog-card-content h3 {font-size: 20px; color: var(--color-text-dark); margin-bottom: 12px;} .blog-card-content p {font-size: 14px; color: var(--color-text-muted); margin-bottom: 20px;} .article-container {max-width: 800px; margin: 80px auto; padding: 0 24px;} .article-header {margin-bottom: 40px;} .article-title {font-size: 42px; color: var(--color-text-dark); margin-bottom: 12px;} .article-meta {font-size: 13px; color: var(--color-text-muted);} .article-featured-img {margin-bottom: 40px; border-radius: 8px; overflow: hidden;} .article-featured-img img {width: 100%; height: auto;} .article-body {font-size: 17px; line-height: 1.8; color: var(--color-text-dark);} .article-body h2 {font-size: 26px; margin: 40px 0 20px;} .article-body p {margin-bottom: 24px;} .article-body ul, .article-body ol {margin-bottom: 24px; padding-left: 20px;} .article-body li {margin-bottom: 10px;} .article-body blockquote {border-left: 4px solid var(--color-main); padding-left: 24px; font-family: var(--font-display); font-size: 20px; font-style: italic; color: var(--color-main); margin: 40px 0;} .article-cta {background-color: var(--color-bg); padding: 40px; border-radius: 8px; margin-top: 60px; border: 1px solid var(--color-border);} .article-containerlegal {max-width: 900px; margin: 80px auto; padding: 0 24px;} .article-containerlegal h2 {font-size: 20px; margin-top: 40px; margin-bottom: 12px; color: var(--color-text-dark);} .article-containerlegal p {margin-bottom: 18px; font-size: 15px; color: #4e4854;} .article-containerlegal table {width: 100%; border-collapse: collapse; margin-top: 20px; margin-bottom: 30px;} .article-containerlegal th, .article-containerlegal td {border: 1px solid var(--color-border); padding: 12px 15px; text-align: left; font-size: 14px;} .article-containerlegal th {background: #f1eef5; font-weight: 600;} .main-footer {background-color: #17141b; color: #bfaec2; padding: 80px 0 40px; border-top: 1px solid #231f28;} .footer-brand-row {display: flex; justify-content: space-between; margin-bottom: 60px; flex-wrap: wrap; gap: 40px;} .footer-brand-title {font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 24px; letter-spacing: 2px;} .footer-nav {display: flex; gap: 80px;} .footer-col {display: flex; flex-direction: column; gap: 12px;} .footer-col h5 {font-size: 12px; color: #fff; font-weight: 500; margin-bottom: 8px; letter-spacing: 2.5px; text-transform: uppercase;} .footer-col a {font-size: 13px; color: #8c8394;} .footer-col a:hover {color: #fff;} .footer-copyright {font-size: 12px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 40px; text-align: center; color: #6d6475;} .cookie-banner {position: fixed; bottom: 30px; right: 30px; z-index: 10000; width: 420px; max-width: calc(100vw - 60px); background-color: var(--color-text-dark); color: var(--color-text-light); padding: 30px; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); display: none;} .cookie-content h3 {font-family: var(--font-main); font-size: 16px; margin-bottom: 12px; font-weight: 700;} .cookie-content p {font-size: 13px; color: #d5ccd9; margin-bottom: 20px;} .cookie-content a {text-decoration: underline; color: #fff;} .cookie-options {margin-bottom: 20px; padding: 12px; background: rgba(255,255,255,0.05); border-radius: 4px;} .cookie-option-row {margin-bottom: 10px; display: flex; align-items: flex-start; gap: 10px; font-size: 12px;} .cookie-option-row input {margin-top: 3px;} .cookie-actions {display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;} @media (max-width: 991px) {.grid-4-col {grid-template-columns: 1fr 1fr; gap: 30px;} .grid-3-col {grid-template-columns: 1fr 1fr;} .grid-2-col {grid-template-columns: 1fr; gap: 40px;} .cta-visual-group {margin-top: 40px;} .contact-details-grid {grid-template-columns: 1fr 1fr;} .hero {aspect-ratio: auto; height: auto; min-height: 80vh;}} @media (max-width: 767px) {.burger {display: flex;} .nav-menu {display: none; position: absolute; top: 80px; left: 0; width: 100%; background-color: #fff; flex-direction: column; padding: 40px 24px; border-bottom: 1px solid var(--color-border); box-shadow: 0 10px 20px rgba(0,0,0,0.05); gap: 20px;} .nav-menu.open {display: flex;} .grid-3-col, .grid-4-col, .contact-details-grid {grid-template-columns: 1fr;} .hero-title {font-size: 38px;} .section-title {font-size: 28px;} .cta-visual-group {flex-direction: column;} .img-half {width: 100%;} .img-half.offset {transform: none;} .footer-brand-row {flex-direction: column; gap: 30px;} .footer-nav {flex-direction: column; gap: 40px;}}} outline:none;