:root { --clr-bg-dark: #0F0B09; --clr-card-dark: rgba(26, 17, 12, 0.4); --clr-card-border-dark: rgba(216, 131, 59, 0.15); --clr-bg-light: #F8F5F2; --clr-card-light: #FFFFFF; --clr-card-light-glass: rgba(255, 255, 255, 0.65); --clr-card-border-light: rgba(216, 131, 59, 0.2); --clr-primary: #D8833B; --clr-secondary: #F2C57C; --clr-text-light: #E4D5C7; --clr-text-muted-light: #A3968C; --clr-text-dark: #2C2420; --clr-text-muted-dark: #6E615C; --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --trans-fast: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --trans-smooth: 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
*, ::before, ::after { margin: 0px; padding: 0px; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0px; font-size: 16px; background-color: var(--clr-bg-dark); }
body { font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; color: var(--clr-text-light); padding-top: 0px; }
a { text-decoration: none; color: inherit; transition: color var(--trans-fast); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.2; }
input, select, textarea, button { font-family: var(--font-body); }
.section-dark { background-color: var(--clr-bg-dark); color: var(--clr-text-light); background-image: radial-gradient(circle at 15% 50%, rgba(216, 131, 59, 0.05) 0%, transparent 40%), radial-gradient(circle at 85% 30%, rgba(242, 197, 124, 0.05) 0%, transparent 40%); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: rgb(255, 255, 255); }
.section-dark p { color: var(--clr-text-muted-light); }
.section-dark .lead { color: rgb(255, 255, 255); }
.section-light { background-color: var(--clr-bg-light); color: var(--clr-text-dark); }
.section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--clr-text-dark); }
.section-light p { color: var(--clr-text-muted-dark); }
.section-dark .section-header h2 { color: rgb(255, 255, 255); }
.section-light .section-header h2 { color: var(--clr-text-dark); }
.container { width: 100%; max-width: 1200px; margin: 0px auto; padding: 0px 1.5rem; }
.container-sm { max-width: 800px; }
.section { min-height: 100vh; display: flex; flex-direction: column; padding: calc(var(--space-lg) + 80px) 0 var(--space-lg) 0; position: relative; z-index: 2; }
.section-header { text-align: center; margin-bottom: var(--space-md); }
.section-header h2 { font-size: 2.2rem; margin-bottom: 0.5rem; }
.section-header p { font-size: 1rem; }
.glassmorphism { background: var(--clr-card-dark); backdrop-filter: blur(12px); border: 1px solid var(--clr-card-border-dark); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px; }
.glassmorphism-light { background: var(--clr-card-light-glass); backdrop-filter: blur(12px); border: 1px solid var(--clr-card-border-light); border-radius: 16px; box-shadow: rgba(216, 131, 59, 0.05) 0px 8px 25px; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.justify-center { justify-content: center; }
.mt-xl { margin-top: var(--space-xl); }
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 30px; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all var(--trans-fast); text-align: center; border: 2px solid transparent; position: relative; overflow: hidden; }
.btn-primary { background: linear-gradient(135deg, var(--clr-primary), #bd6d2c); color: rgb(255, 255, 255); box-shadow: rgba(216, 131, 59, 0.2) 0px 4px 15px; border-radius: 8px; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: rgba(216, 131, 59, 0.4) 0px 6px 20px; background: linear-gradient(135deg, #e3924f, var(--clr-primary)); }
.btn-white { background: rgb(255, 255, 255); color: var(--clr-bg-dark); border-radius: 30px; }
.btn-white:hover { background: var(--clr-text-light); transform: translateY(-2px); }
.section-dark .btn-outline { background: transparent; border-color: var(--clr-secondary); color: var(--clr-secondary); border-radius: 8px; }
.section-dark .btn-outline:hover { background: rgba(242, 197, 124, 0.1); transform: translateY(-2px); }
.section-light .btn-outline { background: transparent; border-color: var(--clr-primary); color: var(--clr-primary); border-radius: 30px; }
.section-light .btn-outline:hover { background: rgba(216, 131, 59, 0.05); transform: translateY(-2px); }
.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; }
.btn-block { display: block; width: 100%; border-radius: 8px; }
.text-gradient { color: var(--clr-primary); }
.shine-effect::after { content: ""; position: absolute; top: 0px; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-25deg); animation: 4s ease 0s infinite normal none running shine; }
@keyframes shine { 
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}
.top-ribbon-bar { position: fixed; top: 0px; left: 0px; width: 100%; background: var(--clr-primary); color: rgb(255, 255, 255); z-index: 1002; padding: 0.5rem 0px; font-size: 0.9rem; font-weight: 500; }
.top-ribbon-container { display: flex; justify-content: center; gap: 2rem; }
.top-ribbon-container a { color: rgb(255, 255, 255); text-decoration: none; transition: opacity var(--trans-fast); }
.top-ribbon-container a:hover { opacity: 0.8; }
.navbar { position: fixed; top: 0px; left: 0px; width: 100%; padding: 1rem 0px; z-index: 1000; background: rgba(15, 11, 9, 0.4); backdrop-filter: blur(15px); transition: background var(--trans-fast), padding var(--trans-fast), border-bottom var(--trans-fast); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.navbar.scrolled { background: rgba(15, 11, 9, 0.8); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0.75rem 0px; }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; }
.logo-img { height: 35px; width: auto; }
.navbar nav { display: flex; align-items: center; gap: 2.5rem; }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { font-size: 0.95rem; font-weight: 500; position: relative; padding-bottom: 5px; color: rgb(255, 255, 255); }
.nav-links a::after { content: ""; position: absolute; bottom: 0px; left: 0px; width: 0px; height: 2px; background: var(--clr-secondary); transition: width var(--trans-fast); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--clr-secondary); font-weight: 600; }
.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001; }
.mobile-menu-btn span { width: 25px; height: 2px; background: rgb(255, 255, 255); transition: var(--trans-fast); }
.modal-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--trans-fast); }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box { width: 90%; max-width: 450px; padding: 2.5rem; position: relative; transform: translateY(20px); transition: transform var(--trans-fast); }
.modal-light { background: rgb(255, 255, 255); color: var(--clr-text-dark); border-color: transparent; }
.modal-light .modal-header h3 { color: var(--clr-text-dark); }
.modal-light .modal-header p { color: var(--clr-text-muted-dark); }
.modal-light .contact-form label { color: var(--clr-text-dark); opacity: 1; }
.modal-light .contact-form input { background: rgb(248, 245, 242); border: 1px solid rgb(228, 213, 199); color: var(--clr-text-dark); }
.modal-light .contact-form input:focus { border-color: var(--clr-primary); }
.modal-light .modal-close { color: var(--clr-text-dark); font-weight: bold; }
.modal-light .modal-close:hover { color: var(--clr-primary); }
.modal-overlay.active .modal-box { transform: translateY(0px); }
.modal-close { position: absolute; top: 15px; right: 20px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 2rem; cursor: pointer; transition: color var(--trans-fast); }
.modal-header { margin-bottom: 2rem; text-align: center; }
.modal-header h3 { font-size: 1.8rem; margin-bottom: 0.5rem; }
.modal-header p { font-size: 0.9rem; }
.contact-form label { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 500; }
.contact-form input { width: 100%; padding: 0.85rem 1rem; border-radius: 8px; font-family: var(--font-body); font-size: 0.95rem; transition: all var(--trans-fast); margin-bottom: 1.25rem; }
.contact-form input:focus { outline: none; }
.form-notification { margin-top: 1rem; font-size: 0.95rem; text-align: center; border-radius: 8px; display: none; font-weight: 600; box-sizing: border-box; }
.form-notification.success-msg { align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0.75rem 1.5rem; margin: 0px; color: rgb(15, 81, 50); background-color: rgb(209, 231, 221); border: 1px solid rgb(186, 219, 204); border-radius: 8px; text-align: center; line-height: 1.4; display: flex !important; }
.form-notification.error-msg { margin-top: 1rem; padding: 10px 14px; color: rgb(132, 32, 41); background-color: rgb(248, 215, 218); border: 1px solid rgb(245, 198, 203); border-radius: 8px; display: block !important; }
.hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 80px; }
.hero-swiper { width: 100%; height: 100%; }
.hero-container { padding-top: 0px; padding-bottom: 0px; display: flex; flex-direction: column; justify-content: center; }
.swiper-slide { height: 100%; display: flex; align-items: center; justify-content: center; }
.badge { display: inline-block; padding: 0.5rem 1rem; background: rgba(242, 197, 124, 0.1); border: 1px solid rgba(242, 197, 124, 0.2); border-radius: 30px; font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--clr-text-light); }
.badge .highlight { color: var(--clr-secondary); font-weight: 600; }
.hero-title { font-size: clamp(2.5rem, 4vw, 4rem); margin-bottom: 1.5rem; letter-spacing: -1px; }
.hero-desc { font-size: 1.15rem; margin-bottom: 2.5rem; max-width: 550px; }
.hero-actions { display: flex; gap: 1rem; }
.hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 80px; background-color: rgb(14, 10, 8); background-image: radial-gradient(circle at 18% 25%, rgba(216, 131, 59, 0.12) 0%, transparent 45%), radial-gradient(circle at 82% 75%, rgba(242, 197, 124, 0.09) 0%, transparent 50%), radial-gradient(circle, rgba(14, 10, 8, 0.3) 0%, rgb(14, 10, 8) 85%); }
.hero-spotlight { position: absolute; inset: 0px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.5s; background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 40%), rgba(216, 131, 59, 0.18), rgba(242, 197, 124, 0.05) 40%, transparent 75%); }
.hero:hover .hero-spotlight { opacity: 1; }
.blob { position: absolute; filter: blur(75px); z-index: 0; pointer-events: none; will-change: transform; border-radius: 50%; animation: 12s ease-in-out 0s infinite alternate none running floatingOrb; }
.blob-1 { top: -5%; left: -8%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(216, 131, 59, 0.55) 0%, rgba(216, 131, 59, 0.1) 65%, transparent 80%); opacity: 0.75; }
.blob-2 { bottom: -10%; right: -8%; width: 480px; height: 480px; background: radial-gradient(circle, rgba(242, 197, 124, 0.5) 0%, rgba(242, 197, 124, 0.08) 65%, transparent 80%); opacity: 0.7; animation-delay: -6s; }
.blob-3 { top: 35%; left: 60%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(226, 109, 45, 0.45) 0%, rgba(226, 109, 45, 0.06) 65%, transparent 80%); opacity: 0.6; animation-delay: -3s; }
@keyframes floatingOrb { 
  0% { transform: translate3d(0px, 0px, 0px) scale(1); }
  50% { transform: translate3d(35px, 25px, 0px) scale(1.1); }
  100% { transform: translate3d(-25px, 45px, 0px) scale(0.95); }
}
.hero-content { position: relative; z-index: 2; will-change: transform, opacity; }
.glass-stats { display: flex; flex-direction: column; gap: 2rem; }
.stat-item h3 { font-size: 2.5rem; color: var(--clr-secondary); margin-bottom: 0.25rem; }
.swiper-button-next, .swiper-button-prev { color: var(--clr-primary) !important; z-index: 100 !important; }
.swiper-pagination-bullet-active { background: var(--clr-primary) !important; }
.swiper-pagination { bottom: 20px !important; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.service-card { padding: 2rem; transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.15s ease-out; display: flex; flex-direction: column; cursor: pointer; }
.service-card:hover { transform: translateY(-10px); border-color: rgba(216, 131, 59, 0.4); }
.service-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.icon-box { width: 50px; height: 50px; background: rgba(216, 131, 59, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 1px solid rgba(216, 131, 59, 0.2); transition: background var(--trans-fast); color: var(--clr-primary); flex-shrink: 0; }
.service-card:hover .icon-box { background: var(--clr-primary); color: rgb(255, 255, 255); }
.service-header h3 { margin: 0px; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-card p { font-size: 0.95rem; margin-bottom: 0.75rem; }
.service-features { display: flex; flex-direction: column; gap: 0.5rem; }
.service-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--clr-text-dark); }
.service-features li span { color: var(--clr-primary); font-weight: bold; }
.process { overflow: hidden; padding-top: calc(var(--space-md) + 80px); }
.process .section-header { margin-bottom: 1.5rem; }
#process .container { padding-left: 5%; padding-right: 5%; max-width: 100% !important; }
.timeline { position: relative; max-width: 100%; margin: 0px auto; padding: 1rem 0px; }
.timeline::after { content: ""; position: absolute; width: 2px; background: rgba(216, 131, 59, 0.3); top: 0px; bottom: 0px; left: 50%; margin-left: -1px; }
.timeline-item { padding: 5px 20px; position: relative; width: 50%; z-index: 10; }
.timeline-item:nth-child(2n+1) { left: 0px; text-align: right; }
.timeline-item:nth-child(2n) { left: 50%; }
.timeline-number { position: absolute; width: 40px; height: 40px; right: -20px; top: 15px; background: var(--clr-primary); border: 4px solid var(--clr-bg-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); font-family: var(--font-heading); font-weight: bold; z-index: 12; }
.timeline-item:nth-child(2n) .timeline-number { left: -20px; }
.timeline-content { padding: 1.5rem; text-align: left; }
.timeline-content h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.timeline-content p { font-size: 0.9rem; margin-bottom: 0px; line-height: 1.5; }
.platforms-swiper { padding: 2rem 1rem 4rem; margin: -1rem; }
.platforms-swiper .swiper-slide { height: auto; display: block; }
.pc-slide { padding: 2.5rem 2rem; height: 100%; display: flex; flex-direction: column; }
.pc-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.pc-logo { height: 32px; width: 32px; object-fit: contain; }
.pc-top h3 { color: var(--clr-primary); font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; margin: 0px; }
.pc-slide h4 { font-size: 1.2rem; margin-bottom: 1rem; }
.pc-slide p { font-size: 0.95rem; flex-grow: 1; }
.pc-actions { margin-top: 1.5rem; }
.pc-actions .btn { padding: 0.5rem 1rem; font-size: 0.9rem; }
.refs-swiper { padding: 1rem 1rem 4rem; margin: -1rem; }
.refs-swiper .swiper-slide { height: auto; display: block; }
.ref-card { background-color: var(--clr-card-light); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px; padding: 2rem; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; transition: transform var(--trans-fast), box-shadow var(--trans-fast); }
.ref-card:hover { transform: translateY(-5px); box-shadow: rgba(0, 0, 0, 0.04) 0px 10px 30px; }
.ref-logo-box { height: 80px; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 2rem; }
.ref-logo-box img { max-height: 50px; max-width: 180px; object-fit: contain; }
.ref-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; overflow: hidden; max-height: 4.8rem; }
.badge-pill { background-color: rgb(248, 245, 242); border: 1px solid rgba(216, 131, 59, 0.15); color: var(--clr-text-muted-dark); font-size: 0.75rem; font-weight: 500; padding: 0.35rem 0.85rem; border-radius: 30px; white-space: nowrap; }
.about-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-text h2 { font-size: 2.5rem; margin-bottom: 1.5rem; }
.about-text .lead { font-size: 1.25rem; margin-bottom: 1rem; }
.about-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.about-list li { display: flex; align-items: center; gap: 0.75rem; font-size: 1.05rem; }
.check { color: var(--clr-primary); font-weight: bold; background: rgba(216, 131, 59, 0.1); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.about-visual { position: relative; height: auto; min-height: 400px; display: flex; }
.visual-wrapper { width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center; text-align: center; }
.inner-glass { padding: 2rem; width: 100%; }
.inner-glass p { font-family: var(--font-heading); font-size: 1.25rem; font-style: italic; }
.features .section-header { margin-bottom: 3rem; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.feature-item { background: rgb(248, 249, 250); border: 1px solid var(--clr-card-border-light); border-radius: 16px; padding: 2.5rem 1.5rem; transition: transform var(--trans-fast); }
.feature-item:hover { transform: translateY(-5px); }
.f-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.feature-item h4 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--clr-text-dark); }
.feature-item p { font-size: 0.95rem; color: var(--clr-text-muted-dark); }
.footer-premium { background-color: rgb(11, 8, 7); padding-top: var(--space-md); position: relative; border-top: 1px solid rgba(255, 255, 255, 0.03); }
.footer-cta-banner { background: linear-gradient(100deg, rgba(35, 23, 17, 0.8) 0%, rgba(55, 34, 18, 0.8) 100%); border: 1px solid rgba(216, 131, 59, 0.2); border-radius: 16px; padding: 2.5rem; margin-bottom: 4rem; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 40px inset, rgba(0, 0, 0, 0.2) 0px 10px 30px; }
.cta-banner-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; }
.cta-text h3 { font-size: 1.75rem; margin-bottom: 0.5rem; color: rgb(255, 255, 255); }
.cta-text p { color: var(--clr-text-muted-light); font-size: 1rem; margin: 0px; }
.cta-actions { display: flex; gap: 1rem; }
.cta-actions .btn { border-radius: 30px; padding: 0.85rem 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; }
.footer-brand .logo { margin-bottom: 1.5rem; }
.brand-desc { color: var(--clr-text-muted-light); font-size: 0.95rem; margin-top: 0.5rem; max-width: 280px; }
.footer-links-col h4 { color: rgb(255, 255, 255); font-family: var(--font-heading); margin-bottom: 1.5rem; font-size: 1.1rem; letter-spacing: 0.5px; }
.footer-links-col ul { display: flex; flex-direction: column; gap: 0.85rem; }
.footer-links-col a { color: var(--clr-text-muted-light); font-size: 0.95rem; transition: color var(--trans-fast); }
.footer-links-col a:hover { color: rgb(255, 255, 255); }
.footer-bottom { padding: 1.5rem 0px; border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: space-between; align-items: center; color: rgb(110, 97, 92); font-size: 0.85rem; }
.reveal { opacity: 0; visibility: hidden; transition: all var(--trans-smooth); }
.reveal.active { opacity: 1; visibility: visible; }
.fade-in { transform: scale(0.95); }
.fade-in.active { transform: scale(1); }
.slide-up { transform: translateY(40px); }
.slide-up.active { transform: translateY(0px); }
.slide-left { transform: translateX(40px); }
.slide-left.active { transform: translateX(0px); }
.slide-right { transform: translateX(-40px); }
.slide-right.active { transform: translateX(0px); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
@media (max-width: 1024px) {
  .grid-2-col { gap: 2rem; }
  .hero-title { font-size: 3rem; }
  .cta-banner-content { flex-direction: column; text-align: center; }
  .cta-actions { justify-content: center; }
}
@media (max-width: 768px) {
  .swiper-button-next, .swiper-button-prev { display: none !important; }
  .grid-2-col { grid-template-columns: 1fr; text-align: center; }
  .text-left-mobile { text-align: left; }
  .hero-glass-card { padding: 1.5rem; border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 20px -5px; }
  .glass-stats { gap: 1rem; flex-flow: wrap; justify-content: space-between; text-align: center; }
  .stat-item h3 { font-size: 1.8rem; }
  .stat-item p { font-size: 0.8rem; line-height: 1.2; }
  .hero-desc { margin: 0px 0px 2rem; font-size: 1.05rem; }
  .hero-actions { flex-direction: column; gap: 0.8rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hide-mobile-sm { display: none !important; }
  .timeline::after { left: 31px; }
  .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }
  .timeline-item:nth-child(2n), .timeline-item:nth-child(2n+1) { left: 0px; text-align: left; }
  .timeline-number { left: 11px !important; right: auto !important; }
  .navbar nav { position: fixed; top: 0px; right: -100%; width: 80%; height: 100vh; background: rgba(15, 11, 9, 0.98); flex-direction: column; justify-content: center; transition: right var(--trans-smooth); border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .navbar.menu-open nav { right: 0px; }
  .nav-links { flex-direction: column; align-items: center; gap: 2rem; }
  .mobile-menu-btn { display: flex; }
  .mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
  .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .about-container { grid-template-columns: 1fr; gap: 2rem; }
  .about-visual { height: 300px; }
  .modal-box { padding: 1.5rem; width: 95%; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
  .footer-brand .logo { justify-content: center; }
  .brand-desc { margin: 0.5rem auto; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}
@media (max-width: 576px) {
  .hero-container { padding-left: 1rem; padding-right: 1rem; }
  .hero-title { font-size: 2.2rem; }
  .cta-actions { flex-direction: column; width: 100%; }
  .cta-actions .btn { width: 100%; justify-content: center; }
}
.marquee-wrapper { overflow: hidden; white-space: nowrap; width: 100%; padding: 24px 0px; position: relative; }
.marquee-wrapper::before, .marquee-wrapper::after { display: none; }
.marquee-content { display: inline-block; white-space: nowrap; animation: 65s linear 0s infinite normal none running marquee; }
.marquee-content img { display: inline-block; height: 56px; margin: 0px 60px; filter: grayscale(0%) opacity(1); transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.marquee-content img:hover { filter: grayscale(0%) opacity(1); transform: scale(1.1); }
@keyframes marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
.reference-logos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 36px 0px 50px; }
.ref-logo-card { background: rgb(255, 255, 255); border: 1.5px solid var(--color-line); border-radius: 16px; padding: 24px 20px; display: flex; align-items: center; justify-content: center; height: 115px; box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 16px; transition: 0.3s; }
.ref-logo-card img { max-width: 85%; max-height: 55px; width: auto; height: auto; object-fit: contain; filter: grayscale(0%); opacity: 1; transition: 0.3s; }
.ref-logo-card:hover { transform: translateY(-4px); box-shadow: rgba(37, 99, 235, 0.12) 0px 10px 25px; border-color: var(--color-brand-500); }
.ref-logo-card:hover img { filter: grayscale(0%); opacity: 1; }
.ref-logo-card.join-card { background: linear-gradient(135deg, rgba(216, 131, 59, 0.08), rgba(242, 197, 124, 0.15)); border: 2px dashed var(--clr-primary); cursor: pointer; flex-direction: column; gap: 0.25rem; padding: 12px 14px; text-align: center; position: relative; overflow: hidden; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.ref-logo-card.join-card:hover { background: linear-gradient(135deg, var(--clr-primary), #bd6d2c); border-style: solid; border-color: var(--clr-primary); transform: translateY(-5px); box-shadow: rgba(216, 131, 59, 0.3) 0px 12px 30px; }
.ref-logo-card.join-card .join-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(216, 131, 59, 0.15); color: var(--clr-primary); display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.ref-logo-card.join-card:hover .join-icon { background: rgb(255, 255, 255); color: var(--clr-primary); transform: scale(1.15) rotate(90deg); }
.ref-logo-card.join-card .join-title { font-size: 0.88rem; font-weight: 700; color: var(--clr-dark); line-height: 1.2; transition: color 0.3s; }
.ref-logo-card.join-card:hover .join-title { color: rgb(255, 255, 255); }
.ref-logo-card.join-card .join-sub { font-size: 0.72rem; color: var(--clr-primary); font-weight: 600; transition: color 0.3s; }
.ref-logo-card.join-card:hover .join-sub { color: rgba(255, 255, 255, 0.95); }
@media (max-width: 992px) {
  .reference-logos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .reference-logos-grid { grid-template-columns: 1fr; }
  .btn-section-link { font-size: 0.82rem; padding: 8px 18px; }
}
.references { justify-content: center; }
.section .container { flex: 1 1 0%; display: flex; flex-direction: column; }
.section .container > :not(.section-header) { margin-top: auto; margin-bottom: auto; }
.section-header { flex-shrink: 0; }
.ref-img:hover { filter: none !important; }
.references-swiper .swiper-wrapper { transition-timing-function: linear !important; }
#process .container { max-width: 1050px !important; width: 100% !important; padding: 0px 1.5rem !important; }
.timeline { max-width: 1050px !important; width: 100% !important; }
.timeline-item { padding: 5px 40px !important; }
.about-visual { display: flex; align-items: center; justify-content: center; padding: 2rem 0px; }
.about-visual .visual-wrapper { background: linear-gradient(135deg, rgba(216, 131, 59, 0.1) 0%, rgba(26, 17, 12, 0.6) 100%); border: 1px solid rgba(216, 131, 59, 0.2); padding: 3rem; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 40px; }
.about-visual h3 { color: var(--clr-primary); font-size: 2rem; margin-bottom: 1rem; }
.about-visual p { font-size: 1.25rem; font-style: italic; line-height: 1.8; color: rgb(224, 224, 224); }
.about-container { display: grid !important; }
#about.section-light { background-color: rgb(234, 224, 210) !important; }
#about.section-light .about-visual .visual-wrapper { background: linear-gradient(135deg, rgba(255, 246, 229, 0.8) 0%, rgb(255, 255, 255) 100%); border: 1px solid rgba(216, 131, 59, 0.4); box-shadow: rgba(216, 131, 59, 0.08) 0px 15px 40px; position: relative; overflow: hidden; }
#about.section-light .about-visual .visual-wrapper::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 5px; background: var(--clr-primary); }
#about.section-light .about-visual p { color: var(--clr-text-dark); }
.footer-premium { background-color: rgb(45, 35, 30) !important; }
#process.section-dark .timeline-number { background: rgb(255, 255, 255); color: rgb(140, 71, 36); border-color: rgb(140, 71, 36) !important; }
#process.section-light { background-color: rgb(230, 232, 234) !important; }
#process.section-light .timeline-number { background: var(--clr-primary); color: rgb(255, 255, 255); border-color: rgb(230, 232, 234) !important; }
#process.section-light .timeline::after { background: rgba(216, 131, 59, 0.4); }
@media (min-width: 992px) {
  .platforms-slider-wrapper .custom-next { right: -60px !important; }
  .platforms-slider-wrapper .custom-prev { left: -60px !important; }
}
@media (min-width: 992px) {
  .platforms-slider-wrapper { padding: 0px; position: relative; }
  .platforms-slider-wrapper .custom-next { right: -60px !important; }
  .platforms-slider-wrapper .custom-prev { left: -60px !important; }
}
.platforms-swiper { padding: 2rem 0px 4rem !important; margin: 0px !important; }
.nav-actions { position: relative; }
.notch-menu { position: absolute; top: calc(100% + 1rem); right: 0px; background: rgb(26, 20, 17); padding: 12px 24px; border-radius: 0px 0px 12px 12px; display: flex; gap: 15px; align-items: center; border-width: medium 1px 1px; border-style: none solid solid; border-color: currentcolor rgba(216, 131, 59, 0.4) rgba(216, 131, 59, 0.4); border-image: none; box-shadow: rgba(0, 0, 0, 0.5) 0px 15px 30px; transition: top 0.3s; z-index: 9999 !important; }
.navbar.scrolled .notch-menu { top: calc(100% + 0.75rem); }
.notch-menu a { color: rgb(255, 255, 255); opacity: 0.7; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.notch-menu a:hover { opacity: 1; color: var(--clr-primary); transform: translateY(2px); }
@media (max-width: 991px) {
  .notch-menu { right: 4rem; padding: 8px 15px; }
}
.service-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: rgba(0, 0, 0, 0.08) 0px 20px 40px, rgba(216, 131, 59, 0.15) 0px 0px 25px; border-color: rgba(216, 131, 59, 0.6); }
.notch-menu { background: rgba(15, 11, 9, 0.7) !important; backdrop-filter: blur(12px) !important; border-color: rgba(216, 131, 59, 0.3) !important; margin-top: 1px !important; }
.notch-menu a { color: rgb(255, 255, 255) !important; }
.notch-menu a:hover { color: var(--clr-primary) !important; }
.timeline-item { cursor: pointer; }
.timeline-content { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s, border-color 0.25s; border: 1px solid transparent; }
.timeline-item:hover .timeline-content { transform: translateY(-5px) scale(1.02); box-shadow: rgba(0, 0, 0, 0.06) 0px 15px 35px, rgba(216, 131, 59, 0.12) 0px 0px 20px; border-color: rgba(216, 131, 59, 0.4); border-radius: 12px; }
#process.section-light .timeline-item:hover .timeline-content { background: rgb(255, 255, 255); }
.about-visual .visual-wrapper { cursor: default; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s, border-color 0.4s !important; }
.about-visual .visual-wrapper:hover { transform: scale(1.03) rotate(-1deg) !important; box-shadow: rgba(216, 131, 59, 0.2) 0px 20px 40px !important; border-color: rgba(216, 131, 59, 0.8) !important; }
#about.section-light .about-visual .visual-wrapper:hover { box-shadow: rgba(216, 131, 59, 0.15) 0px 20px 50px !important; }
.breadcrumb-nav { display: inline-flex; margin-bottom: 100px; }
.breadcrumb-list { display: flex; align-items: center; list-style: none; padding: 6px 16px; margin: 0px; background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 30px; box-shadow: rgba(0, 0, 0, 0.03) 0px 2px 10px; font-size: 0.82rem; font-weight: 500; }
.breadcrumb-item { display: inline-flex; align-items: center; color: rgb(100, 116, 139); }
.breadcrumb-item a { color: rgb(71, 85, 105); text-decoration: none; transition: color 0.2s; }
.breadcrumb-item a:hover { color: var(--clr-primary); }
.breadcrumb-item.separator { margin: 0px 8px; color: var(--clr-primary); font-size: 0.75rem; }
.breadcrumb-item.active { color: var(--clr-primary); font-weight: 600; }
.subpage-hero .breadcrumb-list, .section-dark .breadcrumb-list { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, 0.15); box-shadow: none; }
.subpage-hero .breadcrumb-item a, .section-dark .breadcrumb-item a { color: rgba(255, 255, 255, 0.85); }
.subpage-hero { position: relative; width: 100%; min-height: 420px; padding-top: 160px; padding-bottom: 100px; display: flex; align-items: center; overflow: hidden; color: rgb(255, 255, 255); border-bottom: 1px solid rgba(216, 131, 59, 0.3); }
.subpage-hero-bg { position: absolute; top: -25%; left: 0px; width: 100%; height: 150%; background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.55) 100%), url("assets/subpage-hero-bg.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; z-index: 1; will-change: transform; }
.subpage-hero .container { position: relative; z-index: 2; }
.subpage-hero .container { width: 100%; position: relative; z-index: 2; }
.subpage-hero-text { text-align: left; max-width: 780px; }
.subpage-hero-text h1 { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 0.5rem; letter-spacing: -0.02em; line-height: 1.2; }
.subpage-hero-text p { font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); margin: 0px; line-height: 1.5; }
@media (max-width: 768px) {
  .subpage-hero { padding-top: 100px; padding-bottom: 35px; min-height: 140px; background-attachment: scroll; }
  .subpage-hero-text h1 { font-size: 1.75rem; }
  .subpage-hero-text p { font-size: 0.95rem; }
}
.subpage-section-top, .subpage-hero + section, .subpage-hero + .section { padding-top: 60px !important; }
.subpage-section-bottom { padding-bottom: 200px !important; }
@media (max-width: 768px) {
  .subpage-section-top, .subpage-hero + section, .subpage-hero + .section { padding-top: 50px !important; }
  .subpage-section-bottom { padding-bottom: 120px !important; }
}
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr !important; }
.footer-social-icons { display: flex; align-items: center; gap: 0.75rem; }
.footer-social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); transition: 0.3s; color: rgba(255, 255, 255, 0.85) !important; }
.footer-social-icons a:hover { transform: translateY(-3px); box-shadow: rgba(216, 131, 59, 0.4) 0px 6px 16px; background: var(--clr-primary) !important; border-color: var(--clr-primary) !important; color: rgb(255, 255, 255) !important; }
@media (max-width: 992px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
}
@media (max-width: 576px) {
  .footer-grid { grid-template-columns: 1fr !important; }
}
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 992px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
}
.blog-card { background: rgb(255, 255, 255); border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.06); overflow: hidden; box-shadow: rgba(0, 0, 0, 0.03) 0px 10px 30px; transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; }
.blog-card:hover { transform: translateY(-8px); box-shadow: rgba(216, 131, 59, 0.15) 0px 20px 40px; border-color: rgba(216, 131, 59, 0.3); }
.blog-card-img-wrapper { position: relative; width: 100%; height: 210px; overflow: hidden; }
.blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.blog-card:hover .blog-card-img { transform: scale(1.05); }
.blog-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1 1 0%; }
.blog-meta { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; margin-bottom: 0.75rem; }
.blog-badge { background: rgba(216, 131, 59, 0.1); color: var(--clr-primary); font-weight: 700; padding: 4px 10px; border-radius: 12px; font-size: 0.75rem; text-transform: uppercase; }
.blog-date { color: rgb(136, 114, 104); }
.blog-card-title { font-size: 1.2rem; font-weight: 700; color: rgb(26, 20, 17); line-height: 1.35; margin-bottom: 0.75rem; transition: color 0.2s; }
.blog-card:hover .blog-card-title { color: var(--clr-primary); }
.blog-card-excerpt { color: rgb(102, 82, 73); font-size: 0.92rem; line-height: 1.6; margin-bottom: 1.25rem; flex: 1 1 0%; }
.blog-card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--clr-primary); font-weight: 700; font-size: 0.9rem; transition: gap 0.2s; }
.blog-card:hover .blog-card-link { gap: 10px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 5rem; padding-top: 2rem; }
.icon-box { width: 48px; height: 48px; background: rgba(216, 131, 59, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(216, 131, 59, 0.2); transition: background var(--trans-fast), color var(--trans-fast); color: var(--clr-primary); flex-shrink: 0; padding: 12px; box-sizing: border-box; }
.icon-box svg { max-width: 22px; max-height: 22px; display: block; margin: auto; flex-shrink: 0; width: 22px !important; height: 22px !important; }
.service-card:hover .icon-box { background: var(--clr-primary); color: rgb(255, 255, 255); }
.pagination-item { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.1); color: rgb(26, 20, 17); font-weight: 600; text-decoration: none; transition: 0.2s; cursor: pointer; }
.pagination-item:hover, .pagination-item.active { background: var(--clr-primary); color: rgb(255, 255, 255); border-color: var(--clr-primary); box-shadow: rgba(216, 131, 59, 0.3) 0px 6px 16px; }
.pagination-item.disabled { opacity: 0.4; pointer-events: none; }
#faq { background: rgb(250, 248, 245); display: block !important; padding: 7rem 0px 6rem !important; }
#faq .container { display: block !important; margin-top: 0px !important; margin-bottom: 0px !important; }
#faq .section-header { text-align: center; margin-top: 0px !important; margin-bottom: 3.5rem !important; }
#faq .faq-button-wrapper { margin-top: 5rem !important; text-align: center; }
.faq-item { transition: background-color 0.35s, box-shadow 0.35s, border-color 0.35s; margin-bottom: 0px; }
#faq .faq-item .faq-header { display: flex; justify-content: space-between; align-items: center; min-height: 72px; box-sizing: border-box; cursor: pointer; user-select: none; transition: color 0.3s; padding: 1.7rem 1.6rem 1.5rem !important; }
#faq .faq-item .faq-header span:first-child { font-size: 0.98rem; font-weight: 700; color: rgb(26, 20, 17); line-height: 1.35; display: block; transform: translateY(1.5px); }
#faq .faq-item .faq-header .faq-icon { font-size: 1.3rem; color: var(--clr-primary); font-weight: 600; margin-left: 1rem; flex-shrink: 0; line-height: 1; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.faq-item .faq-answer { display: none; height: 0px; opacity: 0; overflow: hidden; }
.faq-item .faq-answer-inner { overflow: hidden; }
.faq-item .faq-header .faq-icon { transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), color 0.35s; }
.faq-item.faq-open .faq-header .faq-icon { transform: rotate(45deg); color: var(--clr-primary); }
#references { min-height: 100vh; box-sizing: border-box; background: rgb(255, 255, 255); display: block !important; padding-top: calc(var(--space-md) + 80px) !important; padding-bottom: 7rem !important; }
.references-header-band { border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; padding: 0px 0px 2.5rem !important; margin-bottom: 3rem !important; }
#references .references-swiper { margin-bottom: 3rem !important; }
#references .feature-grid-wrapper { margin-top: 7rem !important; }
.notch-menu, .nav-mini-links { display: none !important; }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.breadcrumb-nav { margin-top: 1.5rem; margin-bottom: 0px; }
.subpage-section-bottom { padding-top: 60px !important; padding-bottom: 140px; }
@media (max-width: 768px) {
  .subpage-section-bottom { padding-top: 50px !important; padding-bottom: 90px; }
}
.service-card:not(a) { cursor: default; }
.platform-logo-img { width: 36px; height: 36px; object-fit: contain; }
.section-header-centered, .section-header.text-center { text-align: center; max-width: 800px; margin: 0px auto 3.5rem; }
.services-grid + .section-header, .timeline-horizontal + .section-header, .coming-soon-wrapper + .section-header, .reference-logos-grid + .section-header, .section-header-centered:not(:first-child), .section-header-mt { margin-top: 5.5rem !important; }
.services-grid:not(:last-child) { margin-bottom: 4.5rem; }
.services-grid-mb-sm { margin-bottom: 3.5rem; }
.services-grid-mb-md { margin-bottom: 4rem; }
.services-grid-mb-lg { margin-bottom: 5rem; }
.coming-soon-wrapper { position: relative; overflow: hidden; border-radius: 20px; }
.coming-soon-grid { filter: blur(6px); opacity: 0.45; pointer-events: none; user-select: none; }
.coming-soon-overlay { position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(250, 248, 246, 0.45); backdrop-filter: blur(2px); z-index: 5; text-align: center; padding: 1.5rem; }
.coming-soon-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--clr-primary, #d8833b); color: rgb(255, 255, 255); font-family: Outfit, sans-serif; font-size: 1.15rem; font-weight: 700; padding: 12px 28px; border-radius: 50px; box-shadow: rgba(216, 131, 59, 0.35) 0px 10px 25px; letter-spacing: 0.5px; text-transform: uppercase; }
.coming-soon-desc { margin-top: 0.75rem; color: rgb(74, 59, 53); font-size: 0.95rem; font-weight: 500; }
.service-header-custom-gap { gap: 15px; }
.card-title-sm { font-size: 1.2rem; margin: 0px; }
.icon-box-sm { width: 44px; height: 44px; flex-shrink: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; align-items: stretch; }
.contact-info-col { display: flex; flex-direction: column; height: 100%; }
.contact-info-list { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; }
.contact-info-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.08); background: rgb(255, 255, 255); }
.contact-info-card-left { display: flex; align-items: center; gap: 1.25rem; }
.contact-info-icon-wrapper { width: 44px; height: 44px; flex-shrink: 0; background: rgba(216, 131, 59, 0.12); color: var(--clr-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.contact-info-title { margin: 0px 0px 0.2rem; font-size: 1rem; color: rgb(26, 20, 17); }
.contact-info-sub { margin: 0px; color: rgb(102, 82, 73); font-size: 0.88rem; }
.contact-info-btn { padding: 8px 16px; font-size: 0.85rem; text-decoration: none; display: inline-flex; align-items: center; }
.contact-map-card { border-radius: 16px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.08); background: rgb(229, 227, 223); flex: 1 1 0%; min-height: 220px; display: flex; }
.contact-map-iframe { border: 0px; width: 100%; height: 100%; min-height: 100%; flex: 1 1 0%; }
.contact-form-container { padding: 2.25rem 2rem; border-radius: 20px; border: 1px solid rgba(0, 0, 0, 0.08); background: rgb(255, 255, 255); height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.contact-form-title { font-size: 1.5rem; color: rgb(26, 20, 17); margin-bottom: 0.35rem; }
.contact-form-desc { color: rgb(102, 82, 73); font-size: 0.9rem; margin-bottom: 1.75rem; }
.contact-form-body { display: flex; flex-direction: column; gap: 1.15rem; flex: 1 1 0%; justify-content: space-between; }
.contact-form-row-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.contact-form-submit { width: 100%; justify-content: center; padding: 13px; font-size: 1rem; margin-top: 0.35rem; }
.contact-form-body label { display: block; font-size: 0.88rem; font-weight: 600; color: rgb(26, 20, 17); margin-bottom: 0.35rem; }
.contact-form-body label span.required, .contact-form-body label span[style*="var(--clr-primary)"] { color: var(--clr-primary); }
.contact-form-body label span.optional, .contact-form-body label span[style*="#887268"] { color: rgb(136, 114, 104); font-weight: 400; font-size: 0.8rem; }
.form-control, .contact-form-body input[type="text"], .contact-form-body input[type="tel"], .contact-form-body input[type="email"], .contact-form-body textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 10px; font-size: 0.92rem; font-family: inherit; outline: none; background: rgb(255, 255, 255); color: rgb(26, 20, 17); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.form-control:focus, .contact-form-body input:focus, .contact-form-body textarea:focus { box-shadow: rgba(216, 131, 59, 0.15) 0px 0px 0px 3px; border-color: var(--clr-primary) !important; }
.contact-form-body textarea { resize: vertical; }
@media (max-width: 991px) {
  .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .subpage-hero .container > div[style*="grid-template-columns"], .subpage-hero .subpage-hero-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .subpage-hero-text { text-align: center; margin: 0px auto; }
  .subpage-hero-text h1 { font-size: 2.2rem; }
  .subpage-hero-text .breadcrumb-nav { display: flex; justify-content: center; }
  .section-light .container > div[style*="grid-template-columns: 1fr 1fr"], .section-light .container > div[style*="grid-template-columns: 1.1fr 0.9fr"], .section-light .container > div[style*="grid-template-columns: 0.9fr 1.1fr"], .section-light .container > div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
}
@media (max-width: 768px) {
  .subpage-hero { padding-top: 110px !important; padding-bottom: 40px !important; min-height: auto !important; }
  .subpage-hero-text h1 { font-size: 1.85rem !important; line-height: 1.25 !important; margin-bottom: 0.75rem !important; }
  .subpage-hero-text p { font-size: 0.95rem !important; line-height: 1.5 !important; max-width: 100% !important; }
  .breadcrumb-nav { margin-top: 1rem !important; }
  .breadcrumb-list { flex-wrap: wrap !important; justify-content: center !important; font-size: 0.825rem !important; }
  .timeline-horizontal, .section-light .container > div[style*="grid-template-columns: repeat(4, 1fr)"], .section-light .container > div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  .timeline-horizontal::before { display: none !important; }
  .timeline-step, .timeline-horizontal .timeline-item { width: 100% !important; margin-bottom: 0px !important; }
  .services-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  .service-card { padding: 1.5rem 1.25rem !important; border-radius: 16px !important; }
  .section-header-centered, .section-header.text-center { margin-bottom: 2.5rem !important; }
  .section-header[style*="justify-content: space-between"], .section-header-with-action { flex-direction: column !important; align-items: flex-start !important; gap: 1.25rem !important; text-align: left !important; margin-bottom: 2.25rem !important; }
  .section-header[style*="justify-content: space-between"] > div, .section-header-with-action > div { width: 100% !important; }
  .section-header[style*="justify-content: space-between"] h2, .section-header-with-action h2 { font-size: 1.85rem !important; line-height: 1.25 !important; margin-bottom: 0.5rem !important; }
  .section-header[style*="justify-content: space-between"] p, .section-header-with-action p { font-size: 0.95rem !important; line-height: 1.5 !important; max-width: 100% !important; margin-bottom: 0px !important; }
  .section-header[style*="justify-content: space-between"] > a.btn, .section-header-with-action > a.btn { width: 100% !important; justify-content: center !important; margin: 0.25rem 0px 0px !important; }
  .references-header-band { padding: 2.5rem 0px 1.5rem !important; margin-bottom: 1.5rem !important; }
  #references.references { padding: 4rem 0px 3.5rem !important; min-height: auto !important; }
  .faq-header { padding: 1.2rem 1.25rem !important; gap: 0.75rem !important; }
  .faq-header span:first-child { font-size: 0.95rem !important; line-height: 1.35 !important; font-weight: 600 !important; }
  .section-header h2 { font-size: 1.65rem !important; line-height: 1.3 !important; }
  .section-header p { font-size: 0.92rem !important; }
  .services-grid + .section-header, .timeline-horizontal + .section-header, .coming-soon-wrapper + .section-header, .reference-logos-grid + .section-header, .section-header-centered:not(:first-child), .section-header-mt { margin-top: 3.5rem !important; }
  .services-grid:not(:last-child) { margin-bottom: 3rem !important; }
  .navbar { padding: 1.62rem 0px !important; transition: padding 0.3s, background 0.3s !important; }
  .navbar.scrolled { padding: 1.05rem 0px !important; }
  .navbar .logo-img { height: 38px !important; width: auto !important; }
  .navbar nav { position: fixed !important; top: 0px !important; right: 0px !important; transform: translateX(100%) !important; width: 64% !important; max-width: 320px !important; height: 100dvh !important; background: rgba(15, 11, 9, 0.97) !important; backdrop-filter: blur(24px) !important; flex-direction: column !important; justify-content: flex-start !important; padding: 5rem 1.25rem 2rem !important; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important; border-left: 1px solid rgba(216, 131, 59, 0.25) !important; box-shadow: rgba(0, 0, 0, 0.6) -15px 0px 35px !important; overflow-y: auto !important; z-index: 1000 !important; visibility: hidden !important; }
  .navbar nav .btn { white-space: nowrap !important; font-size: 0.9rem !important; width: 100% !important; text-align: center !important; justify-content: center !important; }
  .navbar.menu-open nav { transform: translateX(0px) !important; visibility: visible !important; }
  .nav-links { flex-direction: column !important; align-items: flex-start !important; width: 100% !important; gap: 1.25rem !important; }
  .nav-links li { width: 100% !important; }
  .nav-links a { font-size: 1.1rem !important; display: block !important; padding: 0.5rem 0px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; width: 100% !important; }
  .nav-actions { margin-right: 0.5rem; }
  .notch-menu { right: 3.5rem !important; padding: 6px 12px !important; gap: 10px !important; }
  .modal-box { width: 92% !important; max-height: 90dvh !important; overflow-y: auto !important; padding: 2rem 1.5rem !important; border-radius: 20px !important; }
  .contact-info-card { padding: 1rem 1.15rem !important; }
  .contact-form-container { padding: 1.75rem 1.25rem !important; border-radius: 16px !important; }
  .contact-form-title { font-size: 1.35rem !important; }
  .reference-logos-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
  .blog-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .blog-post-banner { height: 220px !important; }
  .blog-post-content { padding: 1.5rem 1.25rem !important; }
}
@media (max-width: 480px) {
  .subpage-hero [style*="Performans Göstergelerimiz"] + div { gap: 0.75rem !important; }
  .subpage-hero [style*="Performans Göstergelerimiz"] + div > div { padding: 1rem 0.6rem !important; border-radius: 12px !important; }
  .subpage-hero [style*="Performans Göstergelerimiz"] + div span:first-child { font-size: 1.4rem !important; }
  .subpage-hero [style*="Performans Göstergelerimiz"] + div span:last-child { font-size: 0.75rem !important; }
  .contact-form-row-2col { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .hero-actions, .cta-actions { flex-direction: column !important; width: 100% !important; }
  .hero-actions .btn, .cta-actions .btn { width: 100% !important; justify-content: center !important; }
  .coming-soon-badge { font-size: 1rem !important; padding: 10px 20px !important; }
  .logo-img { height: 30px !important; }
  .subpage-section-bottom { padding-bottom: 80px !important; }
}
.section-footer-mobile { display: none; }
@media (max-width: 768px) {
  .section-header[style*="justify-content: space-between"] > a.btn, .section-header-with-action > a.btn { display: none !important; }
  .section-footer-mobile { display: flex !important; justify-content: center !important; width: 100% !important; }
  .section-footer-mobile .btn { width: 100% !important; justify-content: center !important; padding: 12px 24px !important; font-size: 0.95rem !important; }
  .timeline-item { width: 100% !important; padding: 10px 15px 10px 70px !important; margin-bottom: 1.75rem !important; }
  .timeline-item:last-child { margin-bottom: 0px !important; }
  .timeline-horizontal { gap: 1.75rem !important; }
  .footer-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2.25rem 1.25rem !important; text-align: left !important; }
  .footer-brand { grid-column: 1 / -1 !important; text-align: left !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0px !important; }
  .footer-brand .logo { justify-content: flex-start !important; line-height: 1 !important; margin-bottom: 0px !important; }
  .footer-brand .logo-img { max-height: 36px !important; margin-bottom: 0px !important; }
  .brand-desc { text-align: left !important; margin: 0.4rem 0px 0px !important; font-size: 0.85rem !important; line-height: 1.35 !important; color: rgba(255, 255, 255, 0.7) !important; }
  .footer-links-col h4 { font-size: 0.95rem !important; margin-bottom: 0.85rem !important; white-space: nowrap !important; }
  .footer-links-col ul li a { font-size: 0.82rem !important; line-height: 1.85 !important; }
  .footer-social-col { grid-column: 1 / -1 !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; margin-top: 0.75rem !important; }
  .footer-social-icons { justify-content: center !important; }
}
@media (max-width: 576px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
.homepage-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; width: 100%; }
@media (max-width: 768px) {
  .homepage-blog-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .platform-info-card { padding: 1.75rem 1.25rem !important; margin-top: 2.5rem !important; }
  .platform-info-card h3 { font-size: 1.3rem !important; line-height: 1.3 !important; }
  .platform-info-card p { font-size: 0.92rem !important; }
  .platform-info-card button { width: 100% !important; margin-top: 0.5rem !important; }
  .references-header-band { padding: 2rem 0px 1rem !important; }
  .references-swiper { max-width: 100% !important; overflow: hidden !important; }
  .feature-grid-wrapper { margin-top: 3.5rem !important; }
  .feature-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
  .feature-item { padding: 1.75rem 1.25rem !important; }
}
html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; position: relative !important; margin: 0px !important; padding: 0px !important; box-sizing: border-box !important; }
*, ::before, ::after { box-sizing: border-box !important; }
section, .section, .hero, .subpage-hero, .footer-premium, #hero, #services, #process, #platforms, #references, #faq, #about { overflow: hidden !important; max-width: 100vw !important; width: 100% !important; box-sizing: border-box !important; }
.container { max-width: 1200px; width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }
.swiper, .swiper-container, .platforms-swiper, .references-swiper, .hero-swiper { max-width: 100% !important; overflow: hidden !important; }
@media (max-width: 991px) {
  .custom-next, .custom-prev, .platforms-slider-wrapper .custom-next, .platforms-slider-wrapper .custom-prev, .swiper-button-next, .swiper-button-prev { display: none !important; }
  .platforms-slider-wrapper { overflow: hidden !important; max-width: 100% !important; }
}
.hero-scroll-indicator { position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.7); text-decoration: none; z-index: 10; transition: color 0.3s, transform 0.3s; cursor: pointer; }
.hero-scroll-indicator:hover { color: var(--clr-primary); transform: translateX(-50%) translateY(4px); }
.mouse-icon { width: 35px; height: 58px; border: 2.5px solid rgba(216, 131, 59, 0.6); border-radius: 19px; display: flex; justify-content: center; padding-top: 10px; box-sizing: border-box; }
.mouse-wheel { width: 5px; height: 12px; background: var(--clr-primary); border-radius: 3px; animation: 1.8s cubic-bezier(0.65, 0.05, 0.36, 1) 0s infinite normal none running mouseScroll; }
.scroll-text { font-size: 1.05rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, 0.65); }
@keyframes mouseScroll { 
  0% { opacity: 1; transform: translateY(0px); }
  50% { opacity: 0.2; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@media (max-width: 768px) {
  #hero.hero { min-height: 100svh !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding-top: 105px !important; padding-bottom: 95px !important; background-color: rgb(14, 10, 8) !important; background-image: radial-gradient(circle at 15% 20%, rgba(216, 131, 59, 0.2) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(242, 197, 124, 0.15) 0%, transparent 50%), radial-gradient(circle at 50% 40%, rgba(216, 131, 59, 0.08) 0%, rgba(14, 10, 8, 0.95) 75%) !important; }
  #hero .blob { opacity: 0.55 !important; filter: blur(65px) !important; width: 260px !important; height: 260px !important; }
  #hero .blob-1 { top: -5% !important; left: -15% !important; }
  #hero .blob-2 { bottom: 2% !important; right: -15% !important; }
  #hero .hero-title { margin-bottom: 1.85rem !important; }
  #hero .hero-desc { margin-bottom: 2.5rem !important; color: rgba(228, 213, 199, 0.92) !important; }
  .hero-actions { flex-direction: column !important; width: 100% !important; gap: 1.05rem !important; max-width: 340px !important; margin: 0px auto !important; }
  .hero-actions .btn { width: 100% !important; justify-content: center !important; }
  .hero-scroll-indicator { bottom: 30px !important; }
}
.references-swiper .ref-img, .ref-img { height: 50px !important; width: auto !important; max-width: 180px !important; object-fit: contain !important; display: inline-block !important; }
.references-swiper .swiper-slide { width: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; }
@media (max-width: 768px) {
  #services, #services.section, .services { padding-top: 5.25rem !important; }
  #process, #process.section, #process.process, .process { padding-top: 4.5rem !important; }
  #platforms, #platforms.section, .platforms { padding-top: 5.25rem !important; }
  #about, #about.section, .about { padding-top: 5.25rem !important; }
  #references, #references.references { padding-top: 4.5rem !important; padding-bottom: 2rem !important; min-height: auto !important; }
  .references-header-band { padding-top: 0.5rem !important; padding-bottom: 0.75rem !important; margin-bottom: 0.5rem !important; }
  #references-mobile-action { margin-top: 1rem !important; margin-bottom: 0.35rem !important; }
  .feature-grid-wrapper { margin-top: 0.5rem !important; }
}


/* Status Pages (404, Tesekkurler) Spacings */
.status-page-section {
  min-height: 85vh;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: calc(80px + 4.5rem) !important;
  padding-bottom: 5rem !important;
  background: #faf8f5;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .status-page-section {
    min-height: calc(100vh - 70px);
    padding-top: calc(70px + 3rem) !important;
    padding-bottom: 4rem !important;
  }
}


@media (max-width: 768px) {
  .about-visual {
    height: auto !important;
    padding: 0.75rem 0 0 0 !important;
  }
  .about-visual .visual-wrapper,
  #about.section-light .about-visual .visual-wrapper {
    padding: 1.5rem 1.5rem !important;
    border-radius: 16px !important;
  }
  .about-visual h3 {
    font-size: 1.5rem !important;
    margin-bottom: 0.6rem !important;
  }
  .about-visual p {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
  }
}