[v-cloak] { display: none; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body { min-height: 100vh; }
#app { min-height: 100vh; display: flex; flex-direction: column; }
#app > main { flex: 1 0 auto; }
#app > footer,
#app > .rts-copyright-area-one { flex-shrink: 0; }
:root { --hexcode-primary: #8248f8; --hexcode-primary-dark: #6f35e8; --hexcode-primary-soft: #a78bfa; }
.hexcode-logo { display: inline-flex; align-items: center; text-decoration: none; }
.hexcode-logo img { display: block; width: 178px; max-width: 100%; height: auto; }
.hexcode-footer-logo img { width: 190px; }
.hexcode-hero { padding-top: 130px; padding-bottom: 110px; overflow: hidden; }
.hexcode-hero .title span { color: var(--hexcode-primary); }
.hexcode-hero-image { position: relative; min-height: 420px; }
.hexcode-hero-image img.main { border-radius: 8px; width: 100%; height: 520px; object-fit: cover; }
.hexcode-stat { border: 1px solid #e7edf8; border-radius: 8px; padding: 28px; height: 100%; background: #fff; }
.hexcode-stat strong { display: block; color: #111827; font-size: 42px; line-height: 1; margin-bottom: 10px; }
.hexcode-service-card { border: 1px solid #e7edf8; border-radius: 8px; padding: 32px; height: 100%; background: #fff; transition: .2s ease; }
.hexcode-service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(17, 24, 39, .08); }
.hexcode-service-card img { width: 54px; height: 54px; object-fit: contain; margin-bottom: 26px; }
.hexcode-process { border-left: 2px solid var(--hexcode-primary); padding-left: 24px; height: 100%; }
.hexcode-process .step { color: var(--hexcode-primary); font-weight: 800; margin-bottom: 12px; display: block; }
.rts-btn.btn-primary { background: var(--hexcode-primary); border-color: var(--hexcode-primary); }
.rts-btn.btn-primary:hover { background: var(--hexcode-primary-dark); border-color: var(--hexcode-primary-dark); }
.rts-btn.btn-border { border-color: var(--hexcode-primary); }
.rts-btn.btn-border::after { background-color: var(--hexcode-primary); }
.rts-btn.btn-border:hover,
.button-area-banner-one .rts-btn.btn-border:hover,
a.rts-btn.btn-border:hover { border-color: transparent; color: #fff; }
.pre, .title-area-left-wrapper .pre { color: var(--hexcode-primary); }
.hexcode-loading { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 3px; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.hexcode-loading.active { opacity: 1; }
.hexcode-loading span { display: block; width: 100%; height: 100%; background: var(--hexcode-primary); transform: translateX(-100%); animation: hexcode-loading 760ms ease-in-out infinite; }
@keyframes hexcode-loading { 0% { transform: translateX(-100%) scaleX(.35); } 55% { transform: translateX(8%) scaleX(.75); } 100% { transform: translateX(100%) scaleX(.35); } }
.hexcode-page-shell { padding: 140px 0 100px; background: #fff; min-height: calc(100vh - 260px); }
.hexcode-page-shell .breadcrumb-label { color: var(--hexcode-primary); font-weight: 800; margin-bottom: 18px; }
.hexcode-page-shell h1 { font-size: 64px; line-height: 1.04; margin-bottom: 22px; }
.hexcode-page-shell p { max-width: 720px; color: #5f6673; font-size: 18px; }
.hexcode-about-hero { padding: 145px 0 90px; background: #fff; overflow: hidden; }
.hexcode-about-hero .breadcrumb-label { color: var(--hexcode-primary); font-weight: 800; margin-bottom: 18px; }
.hexcode-about-hero h1 { font-size: 64px; line-height: 1.04; margin: 12px 0 22px; color: #111827; }
.hexcode-about-hero p,
.hexcode-muted { color: #5f6673; font-size: 18px; line-height: 1.7; max-width: 720px; }
.hexcode-about-image img { width: 100%; height: 520px; object-fit: cover; border-radius: 8px; box-shadow: 0 24px 70px rgba(17, 24, 39, .12); }
.hexcode-timeline { display: grid; gap: 18px; }
.hexcode-timeline-item { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 26px; border: 1px solid #e7edf8; border-radius: 8px; background: #fff; }
.hexcode-timeline-item span { color: var(--hexcode-primary); font-weight: 800; font-size: 22px; line-height: 1.2; }
.hexcode-timeline-item h4 { margin-bottom: 8px; }
.hexcode-timeline-item p { margin: 0; color: #5f6673; }
.hexcode-team-card { height: 100%; border: 1px solid #e7edf8; border-radius: 8px; background: #fff; overflow: hidden; }
.hexcode-team-card img { width: 100%; height: 270px; object-fit: cover; display: block; }
.hexcode-team-card div { padding: 26px; }
.hexcode-team-card h4 { margin-bottom: 4px; }
.hexcode-team-card span { display: block; color: var(--hexcode-primary); font-weight: 800; margin-bottom: 14px; }
.hexcode-team-card p { margin: 0; color: #5f6673; }
.hexcode-about-cta { border-radius: 8px; background: #111827; padding: 70px 32px; }
.hexcode-about-cta h2 { color: #fff; font-size: 48px; line-height: 1.12; margin-bottom: 18px; }
.hexcode-about-cta p { color: #d1d5db; max-width: 680px; margin: 0 auto 30px; }
.hexcode-admin-link { position: fixed; right: 18px; bottom: 18px; z-index: 20; border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; background: #111827; color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
@media (max-width: 991px) { .hexcode-hero { padding-top: 95px; } .hexcode-hero-image img.main { height: 360px; } .hexcode-page-shell h1, .hexcode-about-hero h1 { font-size: 42px; } .hexcode-about-image img { height: 360px; } .hexcode-timeline-item { grid-template-columns: 1fr; } .hexcode-about-cta h2 { font-size: 34px; } }