@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bebas-neue-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/open-sans.woff2') format('woff2'); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Open Sans', sans-serif; overflow-x: hidden; background: #0a0a0a; color: #fff; }
.skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); background: #d4af37; color: #0a0a0a; padding: 1rem 2rem; z-index: 10000; font-weight: 600; text-decoration: none; border-radius: 0 0 8px 8px; transition: top 0.3s ease; }
.skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline: 3px solid #d4af37; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }
nav { position: fixed; top: 0; left: 0; width: 100%; padding: 1.5rem 5%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; transition: all 0.4s ease; }
nav.scrolled { background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(20px); padding: 1rem 5%; box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3); }
.nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; color: #d4af37; text-decoration: none; opacity: 0; transform: translateY(-10px); transition: all 0.4s ease; pointer-events: none; }
nav.scrolled .nav-logo { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-links { display: flex; gap: 3rem; list-style: none; }
.nav-links a { color: rgba(0, 0, 0, 0.7); text-decoration: none; font-size: 1rem; font-weight: 400; text-transform: uppercase; transition: color 0.3s ease; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 1px; background: #d4af37; transition: width 0.3s ease; }
.nav-links a:hover { color: #000000; }
nav.scrolled .nav-links a { color: rgba(255, 255, 255, 0.7); }
nav.scrolled .nav-links a:hover { color: #ffffff; }
.nav-links a:hover::after { width: 100%; }
.lang-switch { display: flex; align-items: center; gap: 0.3rem; margin-left: 1rem; }
.lang-btn { background: none; border: none; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.1em; cursor: pointer; color: rgba(0,0,0,0.55); transition: color 0.3s ease; padding: 0; }
.lang-btn.active { color: #000; }
.lang-btn:hover { color: #000; }
nav.scrolled .lang-btn { color: rgba(255,255,255,0.4); }
nav.scrolled .lang-btn.active { color: #fff; }
nav.scrolled .lang-btn:hover { color: #fff; }
.lang-divider { color: rgba(0,0,0,0.25); font-size: 0.85rem; }
nav.scrolled .lang-divider { color: rgba(255,255,255,0.3); }
.lang-switch-mobile { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2rem; }
.lang-switch-mobile .lang-btn { font-size: 1.2rem; color: rgba(255,255,255,0.4); }
.lang-switch-mobile .lang-btn.active { color: #d4af37; }
.lang-switch-mobile .lang-btn:hover { color: #d4af37; }
.lang-switch-mobile .lang-divider { color: rgba(255,255,255,0.3); font-size: 1.2rem; }
.hamburger-menu { display: none; width: 32px; height: 18px; cursor: pointer; position: relative; z-index: 1001; background: none; border: none; padding: 0; }
.hamburger-menu span { display: block; position: absolute; height: 3px; background: #d4af37; border-radius: 2px; transition: all 0.3s ease; }
.hamburger-menu span:nth-child(1) { top: 0; width: 100%; }
.hamburger-menu span:nth-child(2) { bottom: 0; width: 60%; }
.hamburger-menu.active span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.hamburger-menu.active span:nth-child(2) { bottom: 8px; width: 100%; transform: rotate(-45deg); }
.mobile-menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(10, 10, 10, 0.98); backdrop-filter: blur(20px); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; }
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }
.mobile-menu-links { list-style: none; text-align: center; display: flex; flex-direction: column; gap: 2rem; }
.mobile-menu-links li { opacity: 0; transform: translateY(20px); transition: all 0.3s ease; }
.mobile-menu-overlay.active .mobile-menu-links li { opacity: 1; transform: translateY(0); }
.mobile-menu-overlay.active .mobile-menu-links li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-menu-links li:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-menu-links li:nth-child(3) { transition-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-menu-links li:nth-child(4) { transition-delay: 0.4s; }
.mobile-menu-links a { font-family: 'Open Sans', sans-serif; font-size: 2.5rem; color: #fff; text-decoration: none; transition: color 0.3s ease; }
.mobile-menu-links a:hover { color: #d4af37; }
.hero { height: 100vh; background: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; position: relative; }
.hero-logo { width: 100%; max-width: 800px; height: auto; padding: 0 2rem; }
.typewriter { font-family: 'Inter', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; color: #000000; display: flex; align-items: center; justify-content: center; min-height: 1.5em; letter-spacing: 0.05em; padding: 0 2rem; }
.typewriter-line { display: inline-flex; align-items: center; }
.typewriter .word-development { color: #000000; }
.cursor { display: inline-block; width: 2px; height: 1em; background-color: #d4af37; margin-left: 3px; animation: blink 0.75s step-end infinite; vertical-align: middle; }
.dot { display: inline-block; color: #d4af37; opacity: 0; transform: scale(0) translateY(9px); font-size: 0.4em; vertical-align: baseline; line-height: 1; margin-left: 0.1em; }
.dot.animate { animation: dotPop 1.2s ease-out forwards; }
@keyframes dotPop { 0% { opacity: 0; transform: scale(0) translateY(9px); } 50% { opacity: 1; transform: scale(1.5) translateY(9px); } 100% { opacity: 1; transform: scale(0.8) translateY(9px); } }
@keyframes blink { from, to { opacity: 0; } 50% { opacity: 1; } }
.intro-section { padding: 10rem 5%; background: radial-gradient(ellipse at 20% 50%, #0d0d0d 0%, #000000 70%); position: relative; }
.intro-content { max-width: 900px; margin: 0 auto; }
.intro-label { font-size: 1rem; text-transform: uppercase; color: #d4af37; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; }
.intro-label::before { content: ''; width: 40px; height: 1px; background: #d4af37; }
.intro-headline { font-family: 'Open Sans', sans-serif; font-size: clamp(3.5rem, 6vw, 5rem); color: #ffffff; line-height: 1.1; margin-bottom: 2rem; }
.intro-headline span { color: #d4af37; }
.intro-text { font-size: 1.5rem; line-height: 1.5; color: #ffffff; max-width: 700px; }
.services-section { padding: 8rem 5%; background: #ffffff; }
.services-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5rem; flex-wrap: wrap; gap: 2rem; }
.services-title { font-family: 'Open Sans', sans-serif; font-size: clamp(3rem, 8vw, 6rem); color: #000000; line-height: 1; }
.services-subtitle { font-family: 'Open Sans', sans-serif; font-size: 1.5rem; color: #000000; max-width: 500px; line-height: 1.8; }
.accordion { display: flex; flex-direction: column; gap: 1px; background: #000000; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); }
.accordion-item { background: #f4f4f4; overflow: hidden; }
.accordion-item:first-child .accordion-header { border-radius: 8px 8px 0 0; }
.accordion-item:last-child .accordion-header { border-radius: 0 0 8px 8px; }
.accordion-item:last-child.active .accordion-header { border-radius: 0; }
.accordion-item:last-child .accordion-content { border-radius: 0 0 8px 8px; }
.accordion-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3rem; padding: 2.5rem 2rem; cursor: pointer; transition: all 0.4s ease; background: #ffffff; border: none; width: 100%; text-align: left; color: #000000; font-family: inherit; font-size: inherit; line-height: inherit; -webkit-appearance: none; appearance: none; }
.accordion-header:hover { background: #f7f7f7; padding-left: 3rem; }
.accordion-title { font-family: 'Open Sans', sans-serif; font-size: clamp(1.5rem, 4vw, 2.5rem); color: #000000; letter-spacing: 0.05em; }
.accordion-icon { font-size: 1.5rem; color: #333; transition: all 0.3s ease; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.accordion-icon::before { content: '+'; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 2rem; transition: transform 0.3s ease; display: block; }
.accordion-item.active .accordion-icon::before { transform: rotate(45deg); }
.accordion-header:hover .accordion-icon, .accordion-item.active .accordion-icon { color: #d4af37; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; }
.accordion-body { padding: 2rem 2rem 2.5rem 6rem; line-height: 1.8; font-size: 0.95rem; }
.accordion-content p { font-size: 1.1rem; line-height: 1.8; color: #000000; font-weight: 300; margin-bottom: 1rem; }
.accordion-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.accordion-tag { background: #1a1a1a; color: #ffffff; padding: 0.4rem 1rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid #2a2a2a; border-radius: 6px; }
.feature-section { min-height: auto; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 80% 50%, #0d0d0d 0%, #000000 70%); padding: 10rem 5%; position: relative; overflow: hidden; }
.feature-wrapper.feature-modern { position: relative; z-index: 1; max-width: 900px; width: 100%; display: flex; flex-direction: column; gap: 3rem; margin: 0 auto; }
.feature-header { text-align: left; }
.feature-label-line { font-size: 1rem; text-transform: uppercase; color: #d4af37; display: flex; align-items: center; gap: 1rem; }
.feature-label-line::before { content: ''; width: 40px; height: 1px; background: #d4af37; }
.feature-main { text-align: left; padding: 2rem 0; }
.feature-title-large { font-family: 'Open Sans', sans-serif; font-size: clamp(3.5rem, 6vw, 5rem); line-height: 1; color: #ffffff; margin-bottom: 2rem; }
.title-word { display: inline; }
.title-accent { color: #d4af37; }
.feature-text-centered { font-size: 1.5rem; line-height: 1.5; color: #ffffff; max-width: 700px; text-align: left; }
.feature-keywords { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.keyword-label { background: #ffffff; color: #000000; font-family: 'Open Sans', sans-serif; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.05em; padding: 0.8rem 1.5rem; border-radius: 30px; flex: 0 1 auto; text-align: center; white-space: nowrap; box-shadow: 0 2px 12px rgba(255, 255, 255, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.keyword-label:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15); }
.contact-section { padding: 10rem 5%; background: radial-gradient(ellipse at 50% 0%, #111 0%, #0a0a0a 70%); text-align: center; position: relative; }
.contact-label { font-family: 'Open Sans', sans-serif; font-size: 1rem; text-transform: uppercase; color: #d4af37; margin-bottom: 2rem; font-weight: 400; }
.contact-title { font-family: 'Open Sans', sans-serif; font-size: clamp(3rem, 10vw, 8rem); color: #ffffff; margin-bottom: 3rem; line-height: 1; }
.contact-form { font-family: 'Open Sans', sans-serif; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; text-align: left; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label { font-size: 0.85rem; font-weight: 500; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.05em; }
.form-group input, .form-group textarea { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 1rem 1.2rem; font-family: 'Inter', sans-serif; font-size: 1rem; color: #ffffff; transition: all 0.3s ease; width: 100%; }
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255, 255, 255, 0.35); }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #d4af37; background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15); }
.form-group textarea { resize: vertical; min-height: 120px; }
.contact-form .contact-button { margin-top: 1rem; align-self: center; border: none; cursor: pointer; background: #d4af37; color: #0a0a0a; }
.contact-form .contact-button:hover { background: #e0c04a; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-message { display: none; max-width: 500px; margin: 2rem auto 0; padding: 1.2rem 1.5rem; border-radius: 8px; text-align: center; font-size: 0.95rem; }
.form-message.success { background: rgba(74, 222, 128, 0.1); border: 1px solid #4ade80; color: #4ade80; }
.form-message.error { background: rgba(248, 113, 113, 0.1); border: 1px solid #f87171; color: #f87171; }
.form-message.show { display: block; }
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #111; border-top: 1px solid #2a2a2a; padding: 0.6rem 4%; z-index: 9999; display: none; align-items: center; justify-content: space-between; gap: 0.8rem; }
.cookie-banner.show { display: flex; }
.cookie-banner p { color: #999; font-size: 0.75rem; line-height: 1.3; flex: 1; margin: 0; }
.cookie-banner a { color: #d4af37; text-decoration: none; }
.cookie-banner a:hover { text-decoration: underline; }
.cookie-btn { background: #d4af37; color: #0a0a0a; border: none; padding: 0.5rem 1rem; font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; border-radius: 4px; transition: all 0.3s ease; white-space: nowrap; flex-shrink: 0; }
.cookie-btn:hover { background: #fff; }
.contact-button { display: inline-flex; align-items: center; gap: 1rem; background: #000000; color: #ffffff; padding: 1.2rem 3rem; font-family: 'Open Sans', sans-serif; font-size: 1.2rem; text-decoration: none; transition: all 0.3s ease; position: relative; overflow: hidden; border-radius: 8px; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.contact-button:hover { transform: translateY(-2px); background: #1a1a1a; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
footer { padding: 3rem 5%; background: #050505; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border-top: 1px solid #1a1a1a; }
.footer-logo { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #d4af37; }
.footer-text { color: #888; font-size: 0.8rem; }
.footer-social { color: #888; transition: color 0.3s ease; display: flex; align-items: center; }
.footer-social:hover { color: #d4af37; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 968px) { .feature-wrapper { grid-template-columns: 1fr; gap: 3rem; } .feature-image { order: -1; display: flex; justify-content: center; } .feature-image img { max-width: 395px; } .nav-links, .nav-lang-switch { display: none; } .hamburger-menu { display: block; } .accordion-header { grid-template-columns: 1fr auto; gap: 1.5rem; } .accordion-body { padding-left: 2rem; } }
@media (max-width: 768px) { .intro-section, .services-section, .feature-section, .contact-section { padding: 5rem 5%; } .accordion-header { gap: 1rem; } .mobile-menu-links a { font-size: 2.2rem; } .title-word { display: block; } .feature-keywords { justify-content: center; gap: 0.8rem; } .keyword-label { padding: 0.7rem 1.2rem; flex: 0 1 auto; min-width: -webkit-fill-available; } .feature-title-large { display: flex; flex-direction: column; } .typewriter { font-size: clamp(1.5rem, 5vw, 2rem); } .hero-logo { max-width: 100%; } }
body.menu-open { overflow: hidden; }
@media (prefers-contrast: more) { body { background: #000; color: #fff; } .nav-links a { color: rgba(0,0,0,0.9); } nav.scrolled .nav-links a { color: #fff; } .intro-text, .feature-text-centered { color: #fff; } .accordion-content p { color: #000; } .form-group label { color: rgba(255,255,255,0.9); } .form-group input, .form-group textarea { border-color: rgba(255,255,255,0.5); } .cookie-banner p { color: #ccc; } .footer-text { color: #aaa; } }