.text-center { text-align: center; } .text-white { color: #fff; } .text-brand-orange { color: var(--brand-orange); } .text-gray-400 { color: #9ca3af; } .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; } .text-5xl { font-size: 3rem; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .uppercase { text-transform: uppercase; } .tracking-wide { letter-spacing: 0.025em; } .tracking-widest { letter-spacing: 0.1em; } .leading-relaxed { line-height: 1.625; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .py-24 { padding-top: 6rem; padding-bottom: 6rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .w-full { width: 100%; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .md\:col-span-8 { grid-column: span 8 / span 8; } .md\:col-span-4 { grid-column: span 4 / span 4; } .md\:text-left { text-align: left; } .md\:flex-row { flex-direction: row; } .md\:flex-col { flex-direction: column; } .md\:block { display: block; } .md\:inline-flex { display: inline-flex; } .md\:w-1\/3 { width: 33.333333%; } .md\:w-2\/3 { width: 66.666667%; } .md\:w-auto { width: auto; } } @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:flex-row { flex-direction: row; } .lg\:w-1\/3 { width: 33.333333%; } .lg\:w-2\/3 { width: 66.666667%; } } .relative { position: relative; } .absolute { position: absolute; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .overflow-hidden { overflow: hidden; } .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } .rounded { border-radius: 0.25rem; } .rounded-lg { border-radius: 0.5rem; } .rounded-full { border-radius: 9999px; } .aspect-square { aspect-ratio: 1 / 1; } .opacity-50 { opacity: 0.5; } .opacity-70 { opacity: 0.7; } .opacity-90 { opacity: 0.9; } .opacity-100 { opacity: 1; } .hover\:opacity-100:hover { opacity: 1; } .cursor-pointer { cursor: pointer; } .border-2 { border-width: 2px; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; } .border-transparent { border-color: transparent; } .hover\:border-brand-orange:hover { border-color: var(--brand-orange); } .btn-outline-white { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); color: #fff; display: flex; align-items: center; justify-content: center; } .btn-outline-white:hover { background-color: rgba(255, 255, 255, 0.2); } .btn-outline-white i { margin-right: 0.5rem; } .btn-dark { background-color: var(--brand-dark); color: #fff; border: 1px solid var(--brand-darkBorder); } .btn-dark:hover { background-color: #fff; color: var(--brand-orange); } .site-footer { background-color: var(--brand-dark); border-top: 1px solid var(--brand-darkBorder); padding-top: 4rem; padding-bottom: 2rem; font-size: 0.875rem; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-bottom: 3rem; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } } .footer-desc { color: #9CA3AF; line-height: 1.625; margin-bottom: 1.5rem; } .social-links { display: flex; gap: 1rem; } .social-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.25rem; background-color: var(--brand-darkCard); display: flex; align-items: center; justify-content: center; color: #9CA3AF; transition: all 0.3s ease; } .social-icon:hover { color: #fff; background-color: var(--brand-orange); } .footer-heading { color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 1.5rem; } .footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .footer-menu a, .footer-contact a { color: #9CA3AF; transition: color 0.3s ease; } .footer-menu a:hover, .footer-contact a:hover { color: var(--brand-orange); } .footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .footer-contact li { display: flex; align-items: flex-start; } .footer-contact i { color: var(--brand-orange); margin-top: 0.25rem; margin-right: 0.75rem; width: 1rem; text-align: center; } .bg-brand-dark { background-color: var(--brand-dark); } .bg-brand-orange { background-color: var(--brand-orange); } .card { background-color: var(--brand-darkCard); border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--brand-darkBorder); } .cta-band { padding: 5rem 0; background-color: var(--brand-orange); position: relative; overflow: hidden; text-align: center; } .cta-band-bg { position: absolute; inset: 0; background-color: rgba(0,0,0,0.1); opacity: 0.2; background-image: radial-gradient(#000 1px, transparent 1px); background-size: 20px 20px; } .cta-band-content { position: relative; z-index: 10; } .cta-band .btn-wrapper { display: flex; flex-direction: column; justify-content: center; gap: 1rem; } @media (min-width: 640px) { .cta-band .btn-wrapper { flex-direction: row; } } .form-group { margin-bottom: 1.5rem; } .form-label { display: block; font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: #9CA3AF; letter-spacing: 0.05em; margin-bottom: 0.5rem; } .form-control { width: 100%; background-color: var(--brand-darkCard); border: 1px solid var(--brand-darkBorder); color: #fff; border-radius: 0.25rem; padding: 0.75rem 1rem; font-family: inherit; transition: all 0.3s ease; } .form-control:focus { border-color: var(--brand-orange); outline: none; box-shadow: 0 0 0 1px var(--brand-orange); } .form-control[aria-invalid="true"] { border-color: #EF4444; } .form-error { color: #EF4444; font-size: 0.75rem; margin-top: 0.25rem; display: block; } .hero-section { position: relative; overflow: hidden; height: calc(100vh - 5rem); min-height: 500px; display: flex; align-items: center; } .hero-bg-carousel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease-in-out; } .hero-slide.active { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-gradient-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(14, 15, 18, 0.95) 0%, rgba(14, 15, 18, 0.5) 50%, rgba(14, 15, 18, 0.1) 100%); z-index: 2; } .hero-content { position: relative; z-index: 10; } .hero-text-area { max-width: 800px; } .hero-surtitle { color: var(--brand-orange); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; margin-bottom: 1rem; display: block; } .hero-title { line-height: 1.1; margin-top: 0; margin-bottom: 1.5rem; font-size: 3rem; } @media (min-width: 768px) { .hero-title { font-size: 4.5rem; } } .hero-desc { color: #9CA3AF; font-size: 1.125rem; max-width: 600px; margin-bottom: 2.5rem; line-height: 1.625; } .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; } @keyframes heroBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-25%); } } .hero-scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 1.5rem; color: #fff; animation: heroBounce 2s infinite; } .pillar-card { position: relative; display: flex; flex-direction: column; height: 100%; } .pillar-img-wrap { height: 250px; position: relative; overflow: hidden; } .pillar-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .pillar-card:hover .pillar-img { transform: scale(1.05); } .pillar-bg-gradient { position: absolute; inset: 0; background: linear-gradient(to top, var(--brand-darkCard) 0%, transparent 100%); } .pillar-content { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; position: relative; z-index: 10; margin-top: -3rem; background: var(--brand-darkCard); border-top-left-radius: 1.5rem; } .pillar-icon { width: 4rem; height: 4rem; background: var(--brand-dark); border: 1px solid var(--brand-darkBorder); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--brand-orange); margin-bottom: 1.5rem; } .pillar-link { margin-top: auto; display: inline-flex; align-items: center; } .trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .trust-icon { font-size: 2.5rem; color: var(--brand-orange); margin-bottom: 1rem; } .bg-brand-light { background-color: var(--brand-light); } .text-brand-textLight { color: var(--brand-textLight); } .real-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .real-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; } } .real-item { position: relative; overflow: hidden; border-radius: 0.5rem; aspect-ratio: 1; cursor: pointer; } @media (min-width: 768px) { .real-item { aspect-ratio: auto; } .real-item.size-large { grid-column: span 2; grid-row: span 2; } .real-item.size-wide { grid-column: span 2; grid-row: span 1; } .real-item.size-small { grid-column: span 1; grid-row: span 1; } } .real-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .real-item:hover img { transform: scale(1.05); } .real-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 15, 18, 0.9) 0%, transparent 80%); } .real-content { position: absolute; bottom: 0; left: 0; padding: 1.5rem; } .real-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; text-transform: uppercase; font-size: 0.625rem; font-weight: 700; color: white; margin-bottom: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); } .process-section { position: relative; overflow: hidden; } .process-bg-pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.5; } .process-grid { position: relative; } .process-line { position: absolute; top: 2rem; left: 10%; right: 10%; height: 2px; border-top: 2px dashed var(--brand-darkBorder); z-index: 0; } .process-step { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; } .process-icon { width: 4rem; height: 4rem; background: var(--brand-dark); border: 2px solid var(--brand-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--brand-orange); margin-bottom: 1.5rem; position: relative; } .process-num { position: absolute; top: -5px; right: -5px; background: var(--brand-orange); color: white; width: 24px; height: 24px; border-radius: 50%; font-size: 0.75rem; font-weight: bold; display: flex; align-items: center; justify-content: center; }