@import "https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;1,400;0,700;1,700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;1,400;0,700;1,700&display=swap";

body {
margin: 0;
padding: 0;
min-height: 100vh;
font-family: 'Figtree', sans-serif;
background: linear-gradient(135deg, #fff 0%, #DFF3F2 100%);
color: #1a0d24;
font-size: 15px;
line-height: 1.7
}

.topbar {
box-sizing: border-box;
max-width: 1170px;
margin: 0 auto;
padding: 24px 40px;
display: grid;
grid-template-columns: auto 1fr;
gap: 40px;
align-items: center;
position: relative
}

.brand-mount {
display: flex;
align-items: center;
justify-content: flex-start
}

.brand-frame {
width: 68px;
height: 68px;
border: 1px solid #995FBA;
background: #ffffffeb;
box-shadow: 0 6px 28px -2px #995fba17 0 3px 2px -2px #995fba0f;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
box-sizing: border-box
}

.brand-frame img {
width: 100%;
height: 100%;
object-fit: contain
}

.navzone {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-end
}

.alert-strip {
background: linear-gradient(90deg, #995FBA 0%, #187780 100%);
color: #fff;
padding: 8px 24px;
border-radius: 20px;
font-size: 15px;
font-weight: 700;
box-shadow: 0 3px 2px -2px #1877800f;
text-transform: lowercase;
letter-spacing: .3px
}

.primary-links {
display: flex;
gap: 24px;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center
}

.primary-links a {
color: #1a0d24;
text-decoration: none;
font-size: 15px;
font-weight: 700;
padding: 8px 16px;
border-radius: 6px;
background: #ffffffb3;
border: 2px solid transparent;
transition: background .22s cubic-bezier(0.4, 0, 0.2, 1), border-color .22s cubic-bezier(0.4, 0, 0.2, 1), color .22s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.primary-links a::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #995fba26;
transform: translate(-50%, -50%);
transition: width .28s cubic-bezier(0.0, 0, 0.2, 1), height .28s cubic-bezier(0.0, 0, 0.2, 1)
}

.primary-links a:hover::before {
width: 200px;
height: 200px
}

.primary-links a:hover {
background: #995fba14;
border-color: #995FBA;
color: #995FBA
}

.primary-links a:focus {
outline: none;
border-color: #187780;
background: #1877800f
}

@media (max-width: 1024px) {
.topbar {
grid-template-columns: 1fr;
gap: 24px;
padding: 24px
}

.brand-mount {
justify-content: center
}

.navzone {
align-items: center
}

.primary-links {
justify-content: center
}
}

@media (max-width: 768px) {
.topbar {
padding: 16px
}

.alert-strip {
font-size: 15px;
padding: 8px 16px;
text-align: center
}

.primary-links {
gap: 16px
}

.primary-links a {
font-size: 15px;
padding: 8px 16px
}
}

@media (max-width: 360px) {
.brand-frame {
width: 60px;
height: 60px
}

.primary-links a {
padding: 8px 16px
}
}

.basement {
background: linear-gradient(180deg, #187780 0%, #0d4a51 100%);
color: #fff;
margin-top: 80px;
position: relative
}

.basement::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #995FBA 0%, #187780 50%, #DFF3F2 100%)
}

.basement-inner {
max-width: 1170px;
margin: 0 auto;
box-sizing: border-box;
padding: 40px 40px 24px
}

.divider-ornament {
height: 2px;
background: linear-gradient(90deg, transparent 0%, #fff3 20%, #fff3 80%, transparent 100%);
margin-bottom: 40px
}

.links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 40px;
margin-bottom: 40px
}

.links-cluster h3 {
font-family: 'Merriweather', serif;
font-size: 20px;
line-height: 1.2;
font-weight: 700;
margin: 0 0 16px;
color: #DFF3F2
}

.links-cluster ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px
}

.links-cluster li {
margin: 0
}

.links-cluster a {
color: #ffffffd9;
text-decoration: none;
font-size: 15px;
line-height: 1.7;
transition: color .18s cubic-bezier(0.4, 0, 0.2, 1), padding-left .18s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-block;
border-bottom: 1px solid transparent
}

.links-cluster a:hover {
color: #DFF3F2;
padding-left: 8px;
border-bottom-color: #DFF3F2
}

.links-cluster a:focus {
outline: none;
color: #fff;
background: #ffffff1a;
padding-left: 8px;
border-radius: 2px
}

.brand-footer-hold {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px
}

.brand-footer-frame {
width: 64px;
height: 64px;
border: 1px solid #ffffff4d;
background: #ffffff14;
box-shadow: 0 3px 2px -2px #dff3f20f;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
box-sizing: border-box
}

.brand-footer-frame img {
width: 100%;
height: 100%;
object-fit: contain
}

.tagline-footer {
font-size: 15px;
line-height: 1.7;
color: #ffffffb3;
font-style: italic;
max-width: 280px
}

.contact-details-footer {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 8px
}

.contact-details-footer p {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: #ffffffbf
}

.contact-details-footer a {
color: #DFF3F2;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-bottom-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.contact-details-footer a:hover {
border-bottom-color: #DFF3F2
}

.copyright-bar {
border-top: 1px solid #ffffff26;
padding-top: 24px;
margin-top: 40px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px
}

.copyright-text {
font-size: 15px;
color: #fff9;
margin: 0
}

.service-links {
display: flex;
gap: 24px;
flex-wrap: wrap
}

.service-links a {
color: #ffffffb3;
text-decoration: none;
font-size: 15px;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 1px solid transparent
}

.service-links a:hover {
color: #fff;
border-bottom-color: #ffffff80
}

.service-links a:focus {
outline: none;
color: #DFF3F2;
background: #ffffff1a;
border-radius: 2px;
padding: 0 8px
}

@media (max-width: 768px) {
.basement-inner {
padding: 40px 24px 24px
}

.links-grid {
grid-template-columns: 1fr;
gap: 24px
}

.copyright-bar {
flex-direction: column;
align-items: flex-start
}

.service-links {
flex-direction: column;
gap: 8px
}
}

@media (max-width: 360px) {
.basement-inner {
padding: 24px 16px 16px
}
}

.doc-content {
max-width: 1170px;
margin: 0 auto;
padding: 80px 24px;
color: #1a1a2e;
font-size: 15px;
line-height: 1.7
}

.doc-content h1 {
font-size: 48px;
line-height: 1.2;
margin-bottom: 40px;
color: #995FBA
}

.doc-content h2 {
font-size: 24px;
line-height: 1.2;
margin-top: 80px;
margin-bottom: 24px;
color: #187780
}

.doc-content h3 {
font-size: 20px;
line-height: 1.2;
margin-top: 40px;
margin-bottom: 16px;
color: #187780
}

.doc-content p {
margin-bottom: 24px
}

.doc-content ul,
.doc-content ol {
margin-bottom: 24px;
padding-left: 40px
}

.doc-content ul {
list-style-type: disc
}

.doc-content ol {
list-style-type: decimal
}

.doc-content li {
margin-bottom: 8px;
padding-left: 8px
}

.doc-content li:last-child {
margin-bottom: 0
}

.doc-content strong,
.doc-content b {
font-weight: 600;
color: #187780
}

.doc-content a {
color: #995FBA;
text-decoration: none;
border-bottom: 1px solid #995fba4d;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.doc-content a:hover {
border-bottom-color: #995FBA
}

.doc-content a:active {
color: #7a4a96
}

.doc-content table {
width: 100%;
margin-bottom: 40px;
border-collapse: collapse;
background: #fff;
box-shadow: 0 3px 2px -2px #995fba0f 0 6px 28px -2px #995fba17;
border-radius: 12px;
overflow: hidden
}

.doc-content thead {
background: #DFF3F2
}

.doc-content th {
padding: 16px 24px;
text-align: left;
font-weight: 600;
font-size: 15px;
color: #187780
}

.doc-content td {
padding: 16px 24px;
border-top: 1px solid #DFF3F2
}

.doc-content tr:hover {
background: #dff3f24d
}

.doc-content hr {
border: none;
height: 2px;
background: linear-gradient(90deg, #DFF3F2 0%, #995FBA 50%, #DFF3F2 100%);
margin: 80px 0
}

@media (max-width: 768px) {
.doc-content {
padding: 40px 16px
}

.doc-content h1 {
font-size: 24px;
margin-bottom: 24px
}

.doc-content h2 {
font-size: 20px;
margin-top: 40px;
margin-bottom: 16px
}

.doc-content h3 {
font-size: 15px;
margin-top: 24px;
margin-bottom: 16px
}

.doc-content ul,
.doc-content ol {
padding-left: 24px
}

.doc-content table {
font-size: 15px
}

.doc-content th,
.doc-content td {
padding: 8px 16px
}

.doc-content hr {
margin: 40px 0
}
}

@media (max-width: 360px) {
.doc-content {
padding: 24px 16px
}

.doc-content th,
.doc-content td {
padding: 8px
}
}

.learn-prog {
background: #fff;
color: #1a1a1a
}

.learn-prog .grad-intro {
background: linear-gradient(to top, #fff0 0%, #995FBA 100%);
padding: 80px 16px;
position: relative;
overflow: hidden
}

.learn-prog .grad-intro::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, #ffffff08 39px, #ffffff08 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, #ffffff08 39px, #ffffff08 40px);
pointer-events: none;
z-index: 1
}

.learn-prog .grad-intro .intro-inner {
max-width: 1170px;
margin: 0 auto;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center
}

.learn-prog .grad-intro .text-side h1 {
font-size: 64px;
line-height: 1.2;
color: #fff;
margin: 0 0 24px
}

.learn-prog .grad-intro .text-side .desc {
font-size: 20px;
line-height: 1.7;
color: #fffffff2;
margin: 0 0 40px
}

.learn-prog .grad-intro .text-side .actions {
display: flex;
gap: 16px;
flex-wrap: wrap
}

.learn-prog .grad-intro .text-side .actions a {
font-size: 15px;
line-height: 1.7;
color: #fff;
text-decoration: none;
padding: 16px 40px;
background: #ffffff26;
border-radius: 12px;
transition: background .22s cubic-bezier(0.4, 0, 0.2, 1), transform .18s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.learn-prog .grad-intro .text-side .actions a::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #fff3;
transform: translate(-50%, -50%);
transition: width .26s cubic-bezier(0.0, 0, 0.2, 1), height .26s cubic-bezier(0.0, 0, 0.2, 1)
}

.learn-prog .grad-intro .text-side .actions a:hover::before {
width: 300px;
height: 300px
}

.learn-prog .grad-intro .text-side .actions a:hover {
background: #ffffff40;
transform: translateY(-2px)
}

.learn-prog .grad-intro .image-side {
position: relative
}

.learn-prog .grad-intro .image-side img {
width: 100%;
height: 420px;
object-fit: cover;
border-radius: 20px;
position: relative;
animation: scaleIn .8s cubic-bezier(0.0, 0, 0.2, 1) forwards;
transform: scale(0.97)
}

@keyframes scaleIn {
to {
transform: scale(1)
}
}

.learn-prog .grad-intro .image-side::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #995fba66 0%, #18778033 100%);
border-radius: 20px;
pointer-events: none;
z-index: 1
}

.learn-prog .divider-dots {
text-align: center;
padding: 40px 0;
background: #fff
}

.learn-prog .divider-dots span {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #995FBA;
margin: 0 8px
}

.learn-prog .pathway {
background: #faf7fc;
padding: 80px 16px;
position: relative
}

.learn-prog .pathway .pathway-wrap {
max-width: 1170px;
margin: 0 auto
}

.learn-prog .pathway .top-intro {
max-width: 780px;
margin: 0 0 80px
}

.learn-prog .pathway .top-intro h2 {
font-size: 48px;
line-height: 1.2;
margin: 0 0 24px;
background: linear-gradient(to top, #995FBA 0%, #187780 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.learn-prog .pathway .top-intro .intro-text {
font-size: 20px;
line-height: 1.7;
color: #2a2a2a;
margin: 0
}

.learn-prog .pathway .stages {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}

.learn-prog .pathway .stage-card {
background: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 3px 2px -2px #995fba0f 0 6px 28px -2px #995fba17 0 12px 40px -2px #995fba1f;
transition: transform .24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 2px dashed transparent
}

.learn-prog .pathway .stage-card.highlight {
border: 2px dashed #995FBA;
transform: scale(1.05)
}

.learn-prog .pathway .stage-card:hover {
transform: translateY(-8px);
box-shadow: 0 6px 4px -2px #995fba14 0 12px 36px -2px #995fba1f 0 18px 48px -2px #995fba26
}

.learn-prog .pathway .stage-card .num {
display: inline-block;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(to top, #995FBA 0%, #187780 100%);
color: #fff;
font-size: 24px;
line-height: 48px;
text-align: center;
margin: 0 0 24px
}

.learn-prog .pathway .stage-card h3 {
font-size: 24px;
line-height: 1.2;
color: #1a1a1a;
margin: 0 0 16px
}

.learn-prog .pathway .stage-card .stage-desc {
font-size: 15px;
line-height: 1.7;
color: #4a4a4a;
margin: 0 0 24px
}

.learn-prog .pathway .stage-card .metrics {
display: flex;
gap: 24px;
margin: 0 0 24px
}

.learn-prog .pathway .stage-card .metric-item {
flex: 1
}

.learn-prog .pathway .stage-card .metric-val {
font-size: 24px;
line-height: 1.2;
color: #995FBA;
font-weight: 700;
margin: 0 0 8px;
display: block
}

.learn-prog .pathway .stage-card .metric-label {
font-size: 15px;
line-height: 1.2;
color: #6a6a6a;
display: block
}

.learn-prog .pathway .stage-card .features {
list-style: none;
padding: 0;
margin: 0
}

.learn-prog .pathway .stage-card .features li {
font-size: 15px;
line-height: 1.7;
color: #4a4a4a;
padding: 8px 0 8px 24px;
position: relative
}

.learn-prog .pathway .stage-card .features li::before {
content: '';
position: absolute;
left: 0;
top: 16px;
width: 8px;
height: 8px;
background: #187780;
border-radius: 50%
}

.learn-prog .pathway .animated-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #995fba05 20px, #995fba05 40px), repeating-linear-gradient(-45deg, transparent, transparent 20px, #18778005 20px, #18778005 40px);
background-size: 200% 200%;
animation: shiftPattern 20s linear infinite;
pointer-events: none;
z-index: 0
}

@keyframes shiftPattern {
0% {
background-position: 0 0
}

100% {
background-position: 100% 100%
}
}

.learn-prog .pathway .stages,
.learn-prog .pathway .top-intro {
position: relative;
z-index: 1
}

.learn-prog .pathway .testimonial-box {
max-width: 680px;
margin: 80px auto 0;
background: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 3px 2px -2px #1877800f 0 6px 28px -2px #18778017 0 12px 40px -2px #1877801f;
position: relative;
z-index: 1
}

.learn-prog .pathway .testimonial-box .quote-text {
font-size: 20px;
line-height: 1.7;
color: #2a2a2a;
margin: 0 0 24px;
font-style: italic
}

.learn-prog .pathway .testimonial-box .author {
font-size: 15px;
line-height: 1.7;
color: #6a6a6a;
margin: 0
}

.learn-prog .pathway .testimonial-box .author strong {
color: #187780;
font-weight: 700
}

@media (max-width: 1024px) {
.learn-prog .grad-intro .intro-inner {
grid-template-columns: 1fr;
gap: 40px
}

.learn-prog .grad-intro .image-side img {
height: 360px
}

.learn-prog .pathway .stages {
grid-template-columns: 1fr
}

.learn-prog .pathway .stage-card.highlight {
transform: scale(1)
}
}

@media (max-width: 768px) {
.learn-prog .grad-intro {
padding: 40px 16px
}

.learn-prog .grad-intro .text-side h1 {
font-size: 48px
}

.learn-prog .grad-intro .text-side .desc {
font-size: 15px
}

.learn-prog .grad-intro .text-side .actions {
flex-direction: column
}

.learn-prog .grad-intro .text-side .actions a {
text-align: center
}

.learn-prog .grad-intro .image-side img {
height: 280px
}

.learn-prog .pathway {
padding: 40px 16px
}

.learn-prog .pathway .top-intro {
margin: 0 0 40px
}

.learn-prog .pathway .top-intro h2 {
font-size: 24px
}

.learn-prog .pathway .top-intro .intro-text {
font-size: 15px
}

.learn-prog .pathway .stage-card {
padding: 24px
}

.learn-prog .pathway .stage-card h3 {
font-size: 20px
}

.learn-prog .pathway .stage-card .metrics {
flex-direction: column;
gap: 16px
}

.learn-prog .pathway .testimonial-box {
margin: 40px auto 0;
padding: 24px
}

.learn-prog .pathway .testimonial-box .quote-text {
font-size: 15px
}
}

@media (max-width: 360px) {
.learn-prog .grad-intro .text-side h1 {
font-size: 24px
}

.learn-prog .grad-intro .text-side .actions a {
padding: 16px 24px
}
}

.reach-us {
background: #fff;
color: #1a1a1a
}

.reach-us .intro-split {
max-width: 1170px;
margin: 0 auto;
padding: 80px 16px;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 40px;
align-items: center;
position: relative
}

.reach-us .intro-split::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(90deg, #995fba05 1px, transparent 1px), linear-gradient(0deg, #995fba05 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0
}

.reach-us .intro-split>* {
position: relative;
z-index: 1
}

.reach-us .intro-visual {
height: 520px;
overflow: hidden;
border-radius: 12px;
position: relative
}

.reach-us .intro-visual img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.7);
transition: filter .24s cubic-bezier(0.4, 0, 0.2, 1)
}

.reach-us .intro-visual:hover img {
filter: brightness(1)
}

.reach-us .intro-visual::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #995fba80 0%, #18778080 100%);
pointer-events: none
}

.reach-us .intro-text {
padding: 24px 0
}

.reach-us .intro-text h1 {
font-size: 64px;
line-height: 1.2;
margin: 0 0 24px;
background: linear-gradient(0deg, #995FBA 0%, #187780 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

@media (max-width: 1024px) {
.reach-us .intro-split {
grid-template-columns: 1fr;
padding: 40px 16px
}

.reach-us .intro-visual {
height: 380px
}

.reach-us .intro-text h1 {
font-size: 48px
}
}

@media (max-width: 768px) {
.reach-us .intro-visual {
height: 280px
}

.reach-us .intro-text h1 {
font-size: 48px
}
}

.reach-us .form-zone {
background: linear-gradient(0deg, #DFF3F2 0%, #fff 100%);
padding: 80px 16px;
position: relative;
overflow: hidden
}

.reach-us .rotating-shape {
position: absolute;
width: 420px;
height: 420px;
top: 50%;
right: -120px;
transform: translateY(-50%);
pointer-events: none;
opacity: .08;
z-index: 0
}

.reach-us .rotating-shape svg {
width: 100%;
height: 100%;
animation: slow-rotate 60s linear infinite
}

@keyframes slow-rotate {
from {
transform: rotate(0deg)
}

to {
transform: rotate(360deg)
}
}

.reach-us .form-container {
max-width: 1170px;
margin: 0 auto;
position: relative;
z-index: 1
}

.reach-us .form-header {
margin-bottom: 40px;
text-align: center
}

.reach-us .form-header h2 {
font-size: 48px;
line-height: 1.2;
margin: 0 0 16px;
color: #187780
}

.reach-us .form-header p {
font-size: 20px;
line-height: 1.7;
margin: 0;
color: #333;
max-width: 680px;
margin: 0 auto
}

.reach-us .form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start
}

.reach-us .form-actual {
background: #fff;
border-radius: 12px;
padding: 40px;
box-shadow: 0 3px 2px -2px #995fba0f 0 6px 28px -2px #995fba17 0 12px 40px -2px #995fba1f;
animation: slide-in-left .6s cubic-bezier(0.0, 0, 0.2, 1)
}

@keyframes slide-in-left {
from {
opacity: 0;
transform: translateX(-40px)
}

to {
opacity: 1;
transform: translateX(0)
}
}

.reach-us .form-actual form {
display: flex;
flex-direction: column;
gap: 24px
}

.reach-us .field-group {
display: flex;
flex-direction: column;
gap: 8px
}

.reach-us .field-group label {
font-size: 15px;
line-height: 1.7;
color: #333;
font-weight: 600
}

.reach-us .field-group input,
.reach-us .field-group textarea,
.reach-us .field-group select {
padding: 16px;
border: 2px solid #DFF3F2;
border-radius: 6px;
font-size: 15px;
line-height: 1.7;
color: #1a1a1a;
background: #fff;
transition: border-color .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.reach-us .field-group input::placeholder,
.reach-us .field-group textarea::placeholder {
color: #999;
text-transform: uppercase;
font-size: 15px
}

.reach-us .field-group input:focus,
.reach-us .field-group textarea:focus,
.reach-us .field-group select:focus {
outline: none;
border-color: #995FBA
}

.reach-us .field-group textarea {
min-height: 140px;
resize: vertical
}

.reach-us .field-group select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23333333' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 48px;
cursor: pointer
}

.reach-us .field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px
}

.reach-us .privacy-check {
display: flex;
align-items: start;
gap: 8px;
margin-top: 8px
}

.reach-us .privacy-check input[type="checkbox"] {
margin-top: 4px;
cursor: pointer;
width: 18px;
height: 18px;
flex-shrink: 0
}

.reach-us .privacy-check label {
font-size: 15px;
line-height: 1.7;
color: #555;
cursor: pointer
}

.reach-us .privacy-check a {
color: #995FBA;
text-decoration: none;
position: relative;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.reach-us .privacy-check a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 1px;
background: #995FBA;
transition: width .25s cubic-bezier(0.4, 0, 0.2, 1), left .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.reach-us .privacy-check a:hover::after {
width: 100%;
left: 0
}

.reach-us .submit-btn {
padding: 16px 40px;
background: #995FBA;
color: #fff;
border: none;
border-radius: 6px;
font-size: 15px;
line-height: 1.7;
text-transform: lowercase;
cursor: pointer;
transition: background .2s cubic-bezier(0.4, 0, 0.2, 1), transform .15s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.reach-us .submit-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #ffffff4d;
transform: translate(-50%, -50%);
transition: width .4s cubic-bezier(0.4, 0, 0.2, 1), height .4s cubic-bezier(0.4, 0, 0.2, 1)
}

.reach-us .submit-btn:hover {
background: #7d4a96
}

.reach-us .submit-btn:active::before {
width: 300px;
height: 300px
}

.reach-us .submit-btn:active {
transform: scale(0.98)
}

.reach-us .info-blocks {
display: flex;
flex-direction: column;
gap: 24px;
animation: slide-in-right .6s cubic-bezier(0.0, 0, 0.2, 1)
}

@keyframes slide-in-right {
from {
opacity: 0;
transform: translateX(40px)
}

to {
opacity: 1;
transform: translateX(0)
}
}

.reach-us .info-card {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 3px 2px -2px #1877800f 0 6px 28px -2px #18778017 0 12px 40px -2px #1877801f;
transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.reach-us .info-card:hover {
transform: translateY(-4px)
}

.reach-us .info-card h3 {
font-size: 20px;
line-height: 1.2;
margin: 0 0 16px;
color: #187780;
display: flex;
align-items: center;
gap: 8px
}

.reach-us .info-card .icon-shape {
width: 32px;
height: 32px;
background: linear-gradient(135deg, #995FBA 0%, #187780 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0
}

.reach-us .info-card .icon-shape svg {
width: 16px;
height: 16px;
fill: #fff
}

.reach-us .info-card p {
font-size: 15px;
line-height: 1.7;
margin: 0;
color: #555
}

.reach-us .info-card a {
color: #187780;
text-decoration: none;
position: relative;
display: inline-block;
transition: color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.reach-us .info-card a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: #187780;
transition: width .25s cubic-bezier(0.4, 0, 0.2, 1), left .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.reach-us .info-card a:hover::after {
width: 100%;
left: 0
}

@media (max-width: 1024px) {
.reach-us .form-zone {
padding: 40px 16px
}

.reach-us .form-grid {
grid-template-columns: 1fr;
gap: 40px
}

.reach-us .form-header h2 {
font-size: 48px
}
}

@media (max-width: 768px) {
.reach-us .form-actual {
padding: 24px
}

.reach-us .field-row {
grid-template-columns: 1fr
}

.reach-us .form-header h2 {
font-size: 48px
}

.reach-us .rotating-shape {
width: 280px;
height: 280px;
right: -80px
}
}

.reach-us .details-section {
padding: 80px 16px;
background: #fff;
position: relative
}

.reach-us .details-wrap {
max-width: 1170px;
margin: 0 auto
}

.reach-us .details-divider {
height: 2px;
background: linear-gradient(90deg, transparent 0%, #995FBA 50%, transparent 100%);
margin: 0 0 80px;
opacity: .3
}

.reach-us .details-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: start
}

.reach-us .text-column {
animation: slide-in-left .7s cubic-bezier(0.0, 0, 0.2, 1)
}

.reach-us .text-column h2 {
font-size: 48px;
line-height: 1.2;
margin: 0 0 24px;
background: linear-gradient(0deg, #187780 0%, #995FBA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.reach-us .text-column p {
font-size: 20px;
line-height: 1.7;
margin: 0 0 24px;
color: #333
}

.reach-us .text-column p:last-child {
margin-bottom: 0
}

.reach-us .visual-column {
position: relative;
animation: slide-in-right .7s cubic-bezier(0.0, 0, 0.2, 1)
}

.reach-us .visual-column::before {
content: '';
position: absolute;
top: -24px;
left: -24px;
right: 24px;
bottom: 24px;
background: linear-gradient(135deg, #995fba1a 0%, #1877801a 100%);
border-radius: 12px;
z-index: 0
}

.reach-us .image-holder {
position: relative;
border-radius: 12px;
overflow: hidden;
z-index: 1
}

.reach-us .image-holder img {
width: 100%;
height: 440px;
object-fit: cover;
display: block;
filter: brightness(0.7);
transition: filter .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.reach-us .image-holder:hover img {
filter: brightness(1)
}

.reach-us .image-holder::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, #18778066 0%, #995fba66 100%);
pointer-events: none
}

.reach-us .stat-badges {
position: absolute;
bottom: 24px;
right: 24px;
display: flex;
gap: 16px;
z-index: 2
}

.reach-us .badge-item {
background: #fffffff2;
backdrop-filter: blur(8px);
padding: 16px 24px;
border-radius: 20px;
box-shadow: 0 3px 2px -2px #995fba0f 0 6px 28px -2px #995fba17;
display: flex;
align-items: center;
gap: 8px
}

.reach-us .badge-counter {
width: 28px;
height: 28px;
background: #995FBA;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700
}

.reach-us .badge-label {
font-size: 15px;
line-height: 1.2;
color: #333;
font-weight: 600
}

@media (max-width: 1024px) {
.reach-us .details-section {
padding: 40px 16px
}

.reach-us .details-divider {
margin: 0 0 40px
}

.reach-us .details-content {
grid-template-columns: 1fr;
gap: 40px
}

.reach-us .text-column h2 {
font-size: 48px
}

.reach-us .image-holder img {
height: 360px
}
}

@media (max-width: 768px) {
.reach-us .text-column h2 {
font-size: 48px
}

.reach-us .image-holder img {
height: 280px
}

.reach-us .stat-badges {
position: relative;
bottom: auto;
right: auto;
margin-top: 16px;
flex-wrap: wrap
}

.reach-us .visual-column::before {
top: -16px;
left: -16px;
right: 16px;
bottom: 16px
}
}

@media (max-width: 360px) {
.reach-us .intro-text h1 {
font-size: 48px
}

.reach-us .form-header h2 {
font-size: 48px
}

.reach-us .text-column h2 {
font-size: 48px
}
}

.svc-hub {
background: #FEFEFE;
color: #1A1818;
overflow-x: clip
}

.svc-hub .opener {
max-width: 1170px;
margin: 0 auto;
padding: 80px 16px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 80px;
align-items: center;
position: relative
}

.svc-hub .opener::before {
content: '';
position: absolute;
top: -40px;
left: -60px;
width: 180px;
height: 180px;
background: repeating-linear-gradient(45deg, #995fba14, #995fba14 8px, transparent 8px, transparent 16px);
border-radius: 20px;
z-index: 0
}

.svc-hub .opener::after {
content: '';
position: absolute;
bottom: -30px;
right: -50px;
width: 140px;
height: 140px;
background: repeating-linear-gradient(135deg, #1877800f, #1877800f 8px, transparent 8px, transparent 16px);
border-radius: 20px;
z-index: 0
}

.svc-hub .opener-space {
position: relative;
z-index: 1
}

.svc-hub .opener h1 {
font-size: 64px;
line-height: 1.2;
margin: 0 0 24px;
background: linear-gradient(to top, #995FBA, #187780);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}

.svc-hub .opener-visual {
position: relative;
height: 460px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 40px -2px #995fba1f 0 6px 28px -2px #995fba17 0 3px 2px -2px #995fba0f;
z-index: 1
}

.svc-hub .opener-visual img {
width: 100%;
height: 100%;
object-fit: cover;
position: relative
}

.svc-hub .opener-visual::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 180px;
background: linear-gradient(to bottom, #1a181899, transparent);
z-index: 1;
pointer-events: none
}

.svc-hub .capability-grid {
background: #995FBA;
padding: 80px 16px;
position: relative;
overflow: hidden
}

.svc-hub .capability-grid::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(-45deg, transparent, transparent 40px, #ffffff08 40px, #ffffff08 80px);
pointer-events: none
}

.svc-hub .capability-wrap {
max-width: 1170px;
margin: 0 auto;
position: relative;
z-index: 1
}

.svc-hub .capability-grid h2 {
font-size: 48px;
line-height: 1.2;
color: #FEFEFE;
margin: 0 0 40px;
text-align: center
}

.svc-hub .cap-set {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}

.svc-hub .cap-item {
background: #ffffff1f;
border-radius: 12px;
padding: 24px;
backdrop-filter: blur(10px);
transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), background .25s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid #ffffff26
}

.svc-hub .cap-item:hover {
transform: translateY(-4px);
background: #ffffff2e
}

.svc-hub .cap-icon {
width: 56px;
height: 56px;
background: #fff3;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 16px
}

.svc-hub .cap-icon svg {
width: 28px;
height: 28px;
fill: #FEFEFE
}

.svc-hub .cap-item h3 {
font-size: 20px;
line-height: 1.2;
color: #FEFEFE;
margin: 0 0 8px
}

.svc-hub .cap-item p {
font-size: 15px;
line-height: 1.7;
color: #ffffffe6;
margin: 0
}

.svc-hub .approach-flow {
background: #DFF3F2;
padding: 80px 16px;
position: relative
}

.svc-hub .approach-flow::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 600px;
background: radial-gradient(circle, #18778014, transparent 70%);
transform: translate(-50%, -50%);
animation: svc-glow 8s ease-in-out infinite;
pointer-events: none
}

@keyframes svc-glow {

0%,
100% {
opacity: .4
}

50% {
opacity: .7
}
}

.svc-hub .approach-wrap {
max-width: 1170px;
margin: 0 auto;
position: relative;
z-index: 1
}

.svc-hub .approach-flow h2 {
font-size: 48px;
line-height: 1.2;
color: #1A1818;
margin: 0 0 40px
}

.svc-hub .flow-layout {
display: grid;
grid-template-columns: 420px 1fr 320px;
gap: 40px;
align-items: start
}

.svc-hub .flow-visual {
position: relative;
height: 520px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 40px -2px #1877801f 0 6px 28px -2px #18778017 0 3px 2px -2px #1877800f
}

.svc-hub .flow-visual img {
width: 100%;
height: 100%;
object-fit: cover
}

.svc-hub .flow-steps {
display: flex;
flex-direction: column;
gap: 24px
}

.svc-hub .step-card {
background: #FEFEFE;
border-radius: 12px;
padding: 24px;
box-shadow: 0 6px 28px -2px #18778017 0 3px 2px -2px #1877800f;
position: relative;
overflow: hidden;
transition: transform .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.svc-hub .step-card:hover {
transform: translateX(6px)
}

.svc-hub .step-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to top, #995FBA, #187780)
}

.svc-hub .step-num {
font-size: 15px;
line-height: 1.2;
color: #995FBA;
font-weight: 600;
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: .5px
}

.svc-hub .step-card h4 {
font-size: 20px;
line-height: 1.2;
color: #1A1818;
margin: 0 0 8px
}

.svc-hub .step-card p {
font-size: 15px;
line-height: 1.7;
color: #3A3838;
margin: 0
}

.svc-hub .flow-stats {
display: flex;
flex-direction: column;
gap: 24px
}

.svc-hub .stat-box {
background: #FEFEFE;
border-radius: 12px;
padding: 24px;
box-shadow: 0 6px 28px -2px #18778017 0 3px 2px -2px #1877800f
}

.svc-hub .stat-label {
font-size: 15px;
line-height: 1.2;
color: #3A3838;
margin: 0 0 8px
}

.svc-hub .stat-value {
font-size: 48px;
line-height: 1.2;
color: #187780;
font-weight: 600;
margin: 0
}

.svc-hub .stat-bar {
margin: 16px 0 0;
height: 8px;
background: #DFF3F2;
border-radius: 6px;
overflow: hidden;
position: relative
}

.svc-hub .stat-bar-fill {
position: absolute;
top: 0;
left: 0;
bottom: 0;
background: linear-gradient(to right, #187780, #995FBA);
border-radius: 6px;
transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1)
}

.svc-hub .stat-bar-ratio {
display: flex;
justify-content: space-between;
margin: 8px 0 0;
font-size: 15px;
line-height: 1.2;
color: #3A3838
}

.svc-hub .delivery-showcase {
background: #FEFEFE;
padding: 80px 16px;
position: relative
}

.svc-hub .delivery-wrap {
max-width: 1170px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 480px;
gap: 80px;
align-items: center
}

.svc-hub .delivery-content h2 {
font-size: 48px;
line-height: 1.2;
margin: 0 0 24px;
background: linear-gradient(to top, #187780, #995FBA);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}

.svc-hub .delivery-text {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
margin: 0 0 40px
}

.svc-hub .delivery-main p {
font-size: 15px;
line-height: 1.7;
color: #3A3838;
margin: 0 0 16px
}

.svc-hub .delivery-main p:last-child {
margin: 0
}

.svc-hub .delivery-side {
display: flex;
flex-direction: column;
gap: 16px
}

.svc-hub .delivery-note {
background: #DFF3F2;
border-radius: 12px;
padding: 16px;
font-size: 15px;
line-height: 1.7;
color: #1A1818
}

.svc-hub .delivery-note strong {
display: block;
color: #187780;
margin: 0 0 4px
}

.svc-hub .feature-tags {
display: flex;
flex-wrap: wrap;
gap: 16px
}

.svc-hub .f-tag {
background: #FEFEFE;
border: 2px solid #995FBA;
border-radius: 6px;
padding: 8px 16px;
font-size: 15px;
line-height: 1.2;
color: #995FBA;
font-weight: 600;
position: relative;
overflow: hidden;
transition: color .22s cubic-bezier(0.4, 0, 0.2, 1), border-color .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.svc-hub .f-tag::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: #995FBA;
transition: left .28s cubic-bezier(0.0, 0, 0.2, 1);
z-index: -1
}

.svc-hub .f-tag:hover {
color: #FEFEFE;
border-color: #995FBA
}

.svc-hub .f-tag:hover::before {
left: 0
}

.svc-hub .delivery-visual-area {
position: relative
}

.svc-hub .delivery-frame {
position: relative;
height: 560px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 40px -2px #995fba1f 0 6px 28px -2px #995fba17 0 3px 2px -2px #995fba0f
}

.svc-hub .delivery-frame img {
width: 100%;
height: 100%;
object-fit: cover
}

.svc-hub .delivery-bracket-left,
.svc-hub .delivery-bracket-right {
position: absolute;
width: 60px;
height: 120px;
border: 3px solid #187780;
pointer-events: none
}

.svc-hub .delivery-bracket-left {
top: -16px;
left: -16px;
border-right: none;
border-bottom: none;
border-radius: 12px 0 0 0
}

.svc-hub .delivery-bracket-right {
bottom: -16px;
right: -16px;
border-left: none;
border-top: none;
border-radius: 0 0 12px 0
}

.svc-hub .word-cycle {
display: inline-block;
position: relative
}

.svc-hub .word-cycle span {
animation: svc-word-highlight 12s infinite;
padding: 0 4px;
border-radius: 2px
}

.svc-hub .word-cycle span:nth-child(1) {
animation-delay: 0s
}

.svc-hub .word-cycle span:nth-child(2) {
animation-delay: 3s
}

.svc-hub .word-cycle span:nth-child(3) {
animation-delay: 6s
}

.svc-hub .word-cycle span:nth-child(4) {
animation-delay: 9s
}

@keyframes svc-word-highlight {

0%,
24%,
100% {
background: transparent;
color: inherit
}

25%,
49% {
background: #995FBA;
color: #FEFEFE
}
}

@media (max-width: 1440px) {
.svc-hub .opener {
grid-template-columns: 1fr 340px;
gap: 40px
}

.svc-hub .opener-visual {
height: 400px
}

.svc-hub .flow-layout {
grid-template-columns: 380px 1fr 280px;
gap: 24px
}

.svc-hub .flow-visual {
height: 480px
}

.svc-hub .delivery-wrap {
grid-template-columns: 1fr 440px;
gap: 40px
}

.svc-hub .delivery-frame {
height: 520px
}
}

@media (max-width: 1024px) {
.svc-hub .opener {
grid-template-columns: 1fr;
padding: 40px 16px;
gap: 40px
}

.svc-hub .opener h1 {
font-size: 48px
}

.svc-hub .opener-visual {
height: 360px
}

.svc-hub .cap-set {
grid-template-columns: repeat(2, 1fr)
}

.svc-hub .capability-grid {
padding: 40px 16px
}

.svc-hub .approach-flow {
padding: 40px 16px
}

.svc-hub .flow-layout {
grid-template-columns: 1fr;
gap: 24px
}

.svc-hub .flow-visual {
height: 400px
}

.svc-hub .delivery-wrap {
grid-template-columns: 1fr;
gap: 40px
}

.svc-hub .delivery-showcase {
padding: 40px 16px
}

.svc-hub .delivery-text {
grid-template-columns: 1fr;
gap: 24px
}

.svc-hub .delivery-frame {
height: 440px
}
}

@media (max-width: 768px) {
.svc-hub .opener h1 {
font-size: 48px
}

.svc-hub .opener-visual {
height: 320px
}

.svc-hub .capability-grid h2,
.svc-hub .approach-flow h2,
.svc-hub .delivery-content h2 {
font-size: 48px
}

.svc-hub .cap-set {
grid-template-columns: 1fr
}

.svc-hub .flow-visual {
height: 360px
}

.svc-hub .stat-value {
font-size: 48px
}

.svc-hub .delivery-frame {
height: 400px
}
}

@media (max-width: 360px) {
.svc-hub .opener {
padding: 24px 16px
}

.svc-hub .opener h1 {
font-size: 48px
}

.svc-hub .opener-visual {
height: 280px
}

.svc-hub .capability-grid {
padding: 24px 16px
}

.svc-hub .capability-grid h2,
.svc-hub .approach-flow h2,
.svc-hub .delivery-content h2 {
font-size: 48px
}

.svc-hub .approach-flow {
padding: 24px 16px
}

.svc-hub .flow-visual {
height: 320px
}

.svc-hub .delivery-showcase {
padding: 24px 16px
}

.svc-hub .delivery-frame {
height: 360px
}

.svc-hub .feature-tags {
gap: 8px
}
}

.abt-labs {
max-width: 1170px;
margin: 0 auto;
background: #fff
}

.abt-labs .manifesto-zone {
position: relative;
padding: 80px 24px;
overflow: hidden;
background: linear-gradient(165deg, #DFF3F2 0%, #DFF3F2 48%, #995FBA 48%, #995FBA 100%)
}

.abt-labs .manifesto-zone::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(0deg, #18778008 0px, #18778008 1px, transparent 1px, transparent 40px), repeating-linear-gradient(90deg, #18778008 0px, #18778008 1px, transparent 1px, transparent 40px);
pointer-events: none;
z-index: 1
}

.abt-labs .manifesto-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 40px;
align-items: center
}

.abt-labs .manifesto-text-container {
max-width: 680px
}

.abt-labs .manifesto-title {
font-size: 64px;
line-height: 1.2;
color: #1a1a2e;
margin: 0 0 24px;
font-weight: 700
}

.abt-labs .manifesto-title .accent-bracket {
color: #995FBA
}

.abt-labs .manifesto-statement {
font-size: 20px;
line-height: 1.7;
color: #2d2d3a;
margin: 0 0 16px
}

.abt-labs .manifesto-statement:last-child {
margin-bottom: 0
}

.abt-labs .manifesto-visual {
position: relative;
width: 100%;
max-width: 540px;
height: 360px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 3px 2px -2px #995fba0f 0 6px 28px -2px #995fba17 0 12px 40px -2px #995fba1f
}

.abt-labs .manifesto-visual::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #995fba66 0%, #1877804d 100%);
z-index: 2;
pointer-events: none
}

.abt-labs .manifesto-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}

.abt-labs .evolution-segment {
padding: 80px 24px;
background: #fff;
position: relative
}

.abt-labs .evolution-segment::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 24px solid #995FBA;
z-index: 3
}

.abt-labs .evolution-segment::after {
content: '';
position: absolute;
top: 120px;
right: 8%;
width: 280px;
height: 280px;
border-radius: 50%;
background: radial-gradient(circle, #dff3f266 0%, #dff3f21a 70%, transparent 100%);
pointer-events: none;
z-index: 1
}

.abt-labs .evolution-inner {
max-width: 1120px;
margin: 0 auto;
position: relative;
z-index: 2
}

.abt-labs .evolution-header {
text-align: center;
margin-bottom: 80px
}

.abt-labs .evolution-heading {
font-size: 48px;
line-height: 1.2;
color: #1a1a2e;
margin: 0 0 24px;
font-weight: 700
}

.abt-labs .evolution-subtext {
font-size: 20px;
line-height: 1.7;
color: #4a4a5e;
margin: 0;
max-width: 720px;
margin-left: auto;
margin-right: auto
}

.abt-labs .milestone-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 80px
}

.abt-labs .milestone-card {
background: #fff;
border: 2px solid #DFF3F2;
border-radius: 12px;
padding: 40px 24px;
position: relative;
overflow: hidden;
transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1), border-color .22s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-labs .milestone-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background: #995FBA;
transition: width .28s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1
}

.abt-labs .milestone-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background: #995FBA;
transition: height .28s cubic-bezier(0.4, 0, 0.2, 1) .28s;
z-index: 1
}

.abt-labs .milestone-card:hover {
transform: translateY(-4px);
box-shadow: 0 3px 2px -2px #995fba0f 0 6px 28px -2px #995fba17 0 12px 40px -2px #995fba1f;
border-color: #995FBA
}

.abt-labs .milestone-card:hover::before {
width: 100%
}

.abt-labs .milestone-card:hover::after {
height: 100%
}

.abt-labs .milestone-card.tall {
grid-row: span 1
}

.abt-labs .milestone-card.medium {
grid-row: span 1
}

.abt-labs .milestone-card.short {
grid-row: span 1
}

.abt-labs .milestone-year {
font-size: 48px;
line-height: 1.2;
background: linear-gradient(180deg, #187780 0%, #995FBA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 16px;
font-weight: 700;
position: relative;
z-index: 2
}

.abt-labs .milestone-label {
font-size: 24px;
line-height: 1.2;
color: #1a1a2e;
margin: 0 0 16px;
font-weight: 600;
position: relative;
z-index: 2
}

.abt-labs .milestone-description {
font-size: 15px;
line-height: 1.7;
color: #4a4a5e;
margin: 0;
position: relative;
z-index: 2
}

.abt-labs .journey-narrative {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: start
}

.abt-labs .narrative-main {
display: flex;
flex-direction: column;
gap: 24px
}

.abt-labs .narrative-paragraph {
font-size: 15px;
line-height: 1.7;
color: #2d2d3a;
margin: 0
}

.abt-labs .narrative-sidebar {
background: linear-gradient(180deg, #DFF3F2 0%, #fff 100%);
border-radius: 12px;
padding: 40px 24px;
border: 1px solid #187780;
position: sticky;
top: 24px
}

.abt-labs .sidebar-highlight {
font-size: 20px;
line-height: 1.7;
color: #187780;
margin: 0 0 16px;
font-weight: 600
}

.abt-labs .sidebar-detail {
font-size: 15px;
line-height: 1.7;
color: #4a4a5e;
margin: 0
}

.abt-labs .approach-cluster {
margin-top: 80px;
padding: 80px 40px;
background: url(./media_gallery/pics-graphic-9.jpg) center/cover no-repeat;
position: relative;
border-radius: 20px;
overflow: hidden
}

.abt-labs .approach-cluster::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #dff3f2eb 0%, #995fbae0 100%);
z-index: 1
}

.abt-labs .approach-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto
}

.abt-labs .approach-title {
font-size: 48px;
line-height: 1.2;
color: #1a1a2e;
margin: 0 0 40px;
font-weight: 700;
text-align: center
}

.abt-labs .approach-points {
display: flex;
flex-direction: column;
gap: 24px
}

.abt-labs .approach-item {
display: flex;
gap: 16px;
align-items: start;
background: #ffffffb3;
padding: 24px;
border-radius: 12px;
backdrop-filter: blur(8px);
transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), background .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-labs .approach-item:hover {
transform: translateX(8px);
background: #ffffffe6
}

.abt-labs .approach-icon {
width: 48px;
height: 48px;
min-width: 48px;
background: linear-gradient(135deg, #995FBA 0%, #187780 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden
}

.abt-labs .approach-icon::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border: 3px solid #fff;
border-radius: 50%
}

.abt-labs .approach-text-block {
flex: 1
}

.abt-labs .approach-item-title {
font-size: 20px;
line-height: 1.2;
color: #1a1a2e;
margin: 0 0 8px;
font-weight: 600
}

.abt-labs .approach-item-desc {
font-size: 15px;
line-height: 1.7;
color: #2d2d3a;
margin: 0
}

.abt-labs .team-showcase {
margin-top: 80px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}

.abt-labs .team-member {
background: #fff;
border-radius: 12px;
overflow: hidden;
border: 1px solid #DFF3F2;
transition: transform .24s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .24s cubic-bezier(0.4, 0, 0.2, 1);
position: relative
}

.abt-labs .team-member:hover {
transform: scale(1.03);
box-shadow: 0 3px 2px -2px #1877800f 0 6px 28px -2px #18778017 0 12px 40px -2px #1877801f
}

.abt-labs .team-member::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #995FBA 0%, #187780 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform .26s cubic-bezier(0.0, 0, 0.2, 1)
}

.abt-labs .team-member:hover::before {
transform: scaleX(1)
}

.abt-labs .team-photo-container {
width: 100%;
height: 280px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #DFF3F2 0%, #fff 100%)
}

.abt-labs .team-photo {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(0.3) contrast(1.05);
transition: filter .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-labs .team-member:hover .team-photo {
filter: grayscale(0) contrast(1.1)
}

.abt-labs .team-info {
padding: 24px
}

.abt-labs .team-name {
font-size: 20px;
line-height: 1.2;
color: #1a1a2e;
margin: 0 0 8px;
font-weight: 600
}

.abt-labs .team-role {
font-size: 15px;
line-height: 1.7;
color: #187780;
margin: 0 0 16px;
font-weight: 500
}

.abt-labs .team-bio {
font-size: 15px;
line-height: 1.7;
color: #4a4a5e;
margin: 0
}

.abt-labs .metrics-banner {
margin-top: 80px;
background: linear-gradient(90deg, #187780 0%, #995FBA 100%);
padding: 80px 40px;
border-radius: 20px;
position: relative;
overflow: hidden
}

.abt-labs .metrics-banner::before {
content: '';
position: absolute;
top: 50%;
left: 15%;
width: 320px;
height: 320px;
border-radius: 50%;
background: #ffffff0f;
transform: translateY(-50%);
pointer-events: none
}

.abt-labs .metrics-banner::after {
content: '';
position: absolute;
bottom: -80px;
right: 10%;
width: 240px;
height: 240px;
border-radius: 50%;
background: #ffffff0a;
pointer-events: none
}

.abt-labs .metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
position: relative;
z-index: 2
}

.abt-labs .metric-box {
text-align: center;
opacity: 0;
transform: scale(0.85) translateY(20px);
animation: metricReveal .6s cubic-bezier(0.0, 0, 0.2, 1) forwards
}

.abt-labs .metric-box:nth-child(1) {
animation-delay: .1s
}

.abt-labs .metric-box:nth-child(2) {
animation-delay: .2s
}

.abt-labs .metric-box:nth-child(3) {
animation-delay: .3s
}

.abt-labs .metric-box:nth-child(4) {
animation-delay: .4s
}

@keyframes metricReveal {
to {
opacity: 1;
transform: scale(1) translateY(0)
}
}

.abt-labs .metric-number {
font-size: 64px;
line-height: 1.2;
color: #fff;
margin: 0 0 8px;
font-weight: 700
}

.abt-labs .metric-label {
font-size: 15px;
line-height: 1.7;
color: #ffffffe6;
margin: 0;
text-transform: uppercase;
letter-spacing: .5px
}

.abt-labs .philosophy-end {
margin-top: 80px;
padding: 80px 40px;
background: #DFF3F2;
border-radius: 20px;
text-align: center;
position: relative;
overflow: hidden
}

.abt-labs .philosophy-end::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 120px;
background: radial-gradient(circle, #995fba26 0%, transparent 70%);
border-radius: 50%;
pointer-events: none
}

.abt-labs .philosophy-end::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 160px;
height: 160px;
background: radial-gradient(circle, #1877801f 0%, transparent 70%);
border-radius: 50%;
pointer-events: none
}

.abt-labs .philosophy-statement {
font-size: 24px;
line-height: 1.7;
color: #1a1a2e;
margin: 0 0 40px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2
}

.abt-labs .philosophy-cta-link {
display: inline-block;
padding: 16px 40px;
background: #995FBA;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-size: 15px;
font-weight: 600;
transition: background .2s cubic-bezier(0.4, 0, 0.2, 1), transform .2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
z-index: 2;
overflow: hidden
}

.abt-labs .philosophy-cta-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #fff3;
transform: translate(-50%, -50%);
transition: width .5s cubic-bezier(0.4, 0, 0.2, 1), height .5s cubic-bezier(0.4, 0, 0.2, 1)
}

.abt-labs .philosophy-cta-link:hover {
background: #8a4fa9;
transform: translateY(-2px);
box-shadow: 0 3px 2px -2px #995fba0f 0 6px 28px -2px #995fba17 0 12px 40px -2px #995fba1f
}

.abt-labs .philosophy-cta-link:hover::before {
width: 300px;
height: 300px
}

.abt-labs .philosophy-cta-link:active {
transform: translateY(0)
}

@media (max-width: 1440px) {
.abt-labs .manifesto-zone {
padding: 80px 24px
}

.abt-labs .evolution-segment {
padding: 80px 24px
}

.abt-labs .milestone-grid {
gap: 24px
}

.abt-labs .metrics-grid {
gap: 40px
}
}

@media (max-width: 1024px) {
.abt-labs .manifesto-title {
font-size: 48px
}

.abt-labs .manifesto-zone {
padding: 80px 24px;
background: linear-gradient(155deg, #DFF3F2 0%, #DFF3F2 45%, #995FBA 45%, #995FBA 100%)
}

.abt-labs .manifesto-visual {
max-width: 100%;
height: 320px
}

.abt-labs .evolution-heading {
font-size: 48px
}

.abt-labs .milestone-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px
}

.abt-labs .journey-narrative {
grid-template-columns: 1fr;
gap: 40px
}

.abt-labs .narrative-sidebar {
position: static
}

.abt-labs .approach-cluster {
padding: 80px 24px
}

.abt-labs .approach-title {
font-size: 48px
}

.abt-labs .team-showcase {
grid-template-columns: repeat(2, 1fr)
}

.abt-labs .metrics-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px
}

.abt-labs .philosophy-end {
padding: 80px 24px
}
}

@media (max-width: 768px) {
.abt-labs .manifesto-zone {
padding: 80px 16px;
background: linear-gradient(145deg, #DFF3F2 0%, #DFF3F2 42%, #995FBA 42%, #995FBA 100%)
}

.abt-labs .manifesto-title {
font-size: 48px
}

.abt-labs .manifesto-statement {
font-size: 15px
}

.abt-labs .manifesto-visual {
height: 280px
}

.abt-labs .evolution-segment {
padding: 80px 16px
}

.abt-labs .evolution-heading {
font-size: 48px
}

.abt-labs .evolution-subtext {
font-size: 15px
}

.abt-labs .milestone-grid {
grid-template-columns: 1fr;
gap: 24px
}

.abt-labs .milestone-year {
font-size: 48px
}

.abt-labs .milestone-label {
font-size: 20px
}

.abt-labs .approach-cluster {
padding: 80px 16px
}

.abt-labs .approach-title {
font-size: 48px
}

.abt-labs .team-showcase {
grid-template-columns: 1fr
}

.abt-labs .metrics-banner {
padding: 80px 16px
}

.abt-labs .metrics-grid {
grid-template-columns: 1fr;
gap: 40px
}

.abt-labs .metric-number {
font-size: 48px
}

.abt-labs .philosophy-end {
padding: 80px 16px
}

.abt-labs .philosophy-statement {
font-size: 20px
}
}

@media (max-width: 360px) {
.abt-labs .manifesto-zone {
padding: 80px 16px
}

.abt-labs .manifesto-title {
font-size: 48px
}

.abt-labs .manifesto-visual {
height: 240px
}

.abt-labs .evolution-segment {
padding: 80px 16px
}

.abt-labs .evolution-heading {
font-size: 48px
}

.abt-labs .milestone-card {
padding: 24px 16px
}

.abt-labs .approach-cluster {
padding: 80px 16px
}

.abt-labs .approach-title {
font-size: 48px
}

.abt-labs .approach-item {
padding: 16px
}

.abt-labs .metrics-banner {
padding: 80px 16px
}

.abt-labs .philosophy-end {
padding: 80px 16px
}
}

.guides-hub {
background: #fff;
color: #1a1520;
min-height: 100vh
}

.guides-hub .opening-visual {
max-width: 1170px;
margin: 0 auto;
padding: 80px 16px;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 40px;
align-items: start;
position: relative
}

.guides-hub .opening-visual::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(90deg, #995fba08 1px, transparent 1px), linear-gradient(#995fba08 1px, transparent 1px);
background-size: 40px 40px;
pointer-events: none;
z-index: 1
}

.guides-hub .text-side {
display: flex;
flex-direction: column;
gap: 24px;
z-index: 2;
position: relative
}

.guides-hub .text-side h1 {
font-size: 48px;
line-height: 1.2;
margin: 0;
font-weight: 700
}

.guides-hub .text-side h1 .accent-word {
display: inline-block;
background: linear-gradient(180deg, #187780 0%, #995FBA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
position: relative
}

.guides-hub .text-side h1 .accent-word::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
right: 0;
height: 3px;
background: #995FBA
}

.guides-hub .text-side p {
font-size: 20px;
line-height: 1.7;
margin: 0;
color: #3a3442
}

.guides-hub .image-side {
z-index: 2;
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-end
}

.guides-hub .image-side img {
width: 100%;
height: 520px;
object-fit: cover;
border-radius: 12px;
filter: grayscale(100%) contrast(1.3);
box-shadow: 0 3px 2px -2px #995fba0f 0 6px 28px -2px #995fba17 0 12px 40px -2px #995fba1f
}

.guides-hub .knowledge-grid {
max-width: 1170px;
margin: 0 auto;
padding: 80px 16px;
background: linear-gradient(0deg, #187780 0%, #995FBA 100%);
position: relative;
overflow: hidden
}

.guides-hub .knowledge-grid::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(./media_gallery/graphic-card-11-120226.jpg) center/cover no-repeat;
opacity: .12;
pointer-events: none;
animation: contrast-pulse 8s cubic-bezier(0.4, 0, 0.2, 1) infinite
}

@keyframes contrast-pulse {

0%,
100% {
filter: contrast(1)
}

50% {
filter: contrast(1.08)
}
}

.guides-hub .knowledge-grid h2 {
font-size: 48px;
line-height: 1.2;
margin: 0 0 40px;
color: #fff;
font-weight: 700;
position: relative;
z-index: 2;
text-align: center
}

.guides-hub .resource-layout {
display: grid;
grid-template-columns: 1.8fr 1fr;
gap: 40px;
position: relative;
z-index: 2
}

.guides-hub .main-column {
display: flex;
flex-direction: column;
gap: 24px
}

.guides-hub .guide-card {
background: #fff;
border-radius: 12px;
padding: 40px;
position: relative;
overflow: hidden;
transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid transparent
}

.guides-hub .guide-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: #995FBA;
transition: width .26s cubic-bezier(0.0, 0, 0.2, 1)
}

.guides-hub .guide-card:hover {
transform: translateY(-3px);
border-color: #DFF3F2
}

.guides-hub .guide-card:hover::before {
width: 12px
}

.guides-hub .guide-card h3 {
font-size: 24px;
line-height: 1.2;
margin: 0 0 16px;
font-weight: 700;
color: #1a1520;
background: linear-gradient(180deg, #187780 0%, #995FBA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent
}

.guides-hub .guide-card p {
font-size: 15px;
line-height: 1.7;
margin: 0;
color: #4a4452
}

.guides-hub .side-column {
display: flex;
flex-direction: column;
gap: 24px
}

.guides-hub .metric-box {
background: #ffffff26;
backdrop-filter: blur(10px);
border: 2px solid #ffffff40;
border-radius: 12px;
padding: 40px;
text-align: center;
position: relative;
overflow: hidden;
transition: background .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.guides-hub .metric-box::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 8px;
height: 8px;
background: #fff;
transition: left .3s cubic-bezier(0.0, 0, 0.2, 1)
}

.guides-hub .metric-box:hover {
background: #ffffff38
}

.guides-hub .metric-box:hover::after {
left: 0;
animation: checkerboard-fill .6s steps(8) forwards
}

@keyframes checkerboard-fill {
0% {
box-shadow: 0 0 0 0 #ffffff, 8px 0 0 0 transparent, 16px 0 0 0 #ffffff, 24px 0 0 0 transparent
}

25% {
box-shadow: 0 0 0 0 #ffffff, 8px 0 0 0 transparent, 16px 0 0 0 #ffffff, 24px 0 0 0 transparent, 0 8px 0 0 transparent, 8px 8px 0 0 #ffffff, 16px 8px 0 0 transparent, 24px 8px 0 0 #fff
}

50% {
box-shadow: 0 0 0 0 #ffffff, 8px 0 0 0 transparent, 16px 0 0 0 #ffffff, 24px 0 0 0 transparent, 0 8px 0 0 transparent, 8px 8px 0 0 #ffffff, 16px 8px 0 0 transparent, 24px 8px 0 0 #ffffff, 0 16px 0 0 #ffffff, 8px 16px 0 0 transparent, 16px 16px 0 0 #ffffff, 24px 16px 0 0 transparent
}

75% {
box-shadow: 0 0 0 0 #ffffff, 8px 0 0 0 transparent, 16px 0 0 0 #ffffff, 24px 0 0 0 transparent, 0 8px 0 0 transparent, 8px 8px 0 0 #ffffff, 16px 8px 0 0 transparent, 24px 8px 0 0 #ffffff, 0 16px 0 0 #ffffff, 8px 16px 0 0 transparent, 16px 16px 0 0 #ffffff, 24px 16px 0 0 transparent, 0 24px 0 0 transparent, 8px 24px 0 0 #ffffff, 16px 24px 0 0 transparent, 24px 24px 0 0 #fff
}

100% {
box-shadow: 0 0 0 0 #ffffff, 8px 0 0 0 transparent, 16px 0 0 0 #ffffff, 24px 0 0 0 transparent, 0 8px 0 0 transparent, 8px 8px 0 0 #ffffff, 16px 8px 0 0 transparent, 24px 8px 0 0 #ffffff, 0 16px 0 0 #ffffff, 8px 16px 0 0 transparent, 16px 16px 0 0 #ffffff, 24px 16px 0 0 transparent, 0 24px 0 0 transparent, 8px 24px 0 0 #ffffff, 16px 24px 0 0 transparent, 24px 24px 0 0 #ffffff, 0 32px 0 0 #ffffff, 8px 32px 0 0 transparent
}
}

.guides-hub .metric-number {
font-size: 64px;
line-height: 1.2;
font-weight: 700;
color: #fff;
margin: 0 0 8px;
display: block
}

.guides-hub .metric-label {
font-size: 15px;
line-height: 1.7;
color: #ffffffe6;
margin: 0
}

.guides-hub .trust-marker {
background: #ffffff1a;
border: 2px solid #DFF3F2;
border-radius: 20px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px
}

.guides-hub .trust-icon {
width: 48px;
height: 48px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 2px -2px #1877800f 0 6px 28px -2px #18778017
}

.guides-hub .trust-icon svg {
width: 24px;
height: 24px;
fill: #187780
}

.guides-hub .trust-text {
font-size: 15px;
line-height: 1.7;
color: #fff;
margin: 0;
text-align: center
}

.guides-hub .divider-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 40px 16px
}

.guides-hub .divider-triangle {
width: 0;
height: 0;
border-style: solid
}

.guides-hub .divider-triangle.left {
border-width: 0 12px 12px 0;
border-color: transparent #995FBA transparent transparent
}

.guides-hub .divider-triangle.right {
border-width: 12px 12px 0 0;
border-color: #995FBA transparent transparent
}

@media (max-width: 1024px) {
.guides-hub .opening-visual {
grid-template-columns: 1fr;
gap: 40px;
padding: 40px 16px
}

.guides-hub .image-side img {
height: 400px
}

.guides-hub .text-side h1 {
font-size: 48px
}

.guides-hub .resource-layout {
grid-template-columns: 1fr;
gap: 24px
}

.guides-hub .knowledge-grid {
padding: 40px 16px
}

.guides-hub .knowledge-grid h2 {
font-size: 48px
}
}

@media (max-width: 768px) {
.guides-hub .opening-visual {
padding: 40px 16px
}

.guides-hub .text-side h1 {
font-size: 24px
}

.guides-hub .text-side p {
font-size: 15px
}

.guides-hub .image-side img {
height: 280px
}

.guides-hub .knowledge-grid {
padding: 40px 16px
}

.guides-hub .knowledge-grid h2 {
font-size: 24px;
margin-bottom: 24px
}

.guides-hub .guide-card {
padding: 24px
}

.guides-hub .guide-card h3 {
font-size: 20px
}

.guides-hub .metric-box {
padding: 24px
}

.guides-hub .metric-number {
font-size: 48px
}
}

@media (max-width: 360px) {
.guides-hub .opening-visual {
padding: 24px 16px
}

.guides-hub .text-side h1 {
font-size: 24px
}

.guides-hub .image-side img {
height: 220px
}

.guides-hub .knowledge-grid {
padding: 24px 16px
}

.guides-hub .guide-card {
padding: 16px
}

.guides-hub .metric-box {
padding: 16px
}
}

.first {
background: #fff;
color: #1a1515;
overflow-x: clip
}

.first * {
box-sizing: border-box
}

.first img {
max-width: 100%;
height: auto
}

.first ::selection {
background: #1a1515;
color: #fff
}

.opening {
max-width: 1170px;
margin: 0 auto;
padding: 120px 24px 80px;
display: flex;
gap: 40px;
align-items: stretch;
position: relative
}

.opening::before {
content: '';
position: absolute;
top: 80px;
left: 24px;
width: 280px;
height: 280px;
border-radius: 50%;
background: #995FBA;
opacity: .04;
z-index: 0
}

.opening::after {
content: '';
position: absolute;
bottom: 120px;
right: 80px;
width: 180px;
height: 180px;
border-radius: 50%;
background: #187780;
opacity: .06;
z-index: 0
}

.opening-img-strip {
flex: 0 0 240px;
position: relative;
z-index: 1;
overflow: hidden;
border-radius: 12px
}

.opening-img-strip img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}

.opening-img-strip::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60%;
background: linear-gradient(to bottom, #995fba66, transparent);
pointer-events: none
}

.opening-text {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
position: relative;
z-index: 1
}

.opening-headline {
font-size: 64px;
line-height: 1.2;
margin: 0;
font-weight: 700;
color: #1a1515
}

.opening-subline {
font-size: 24px;
line-height: 1.7;
margin: 0;
color: #4a4545
}

.opening-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 20px;
color: #995FBA;
text-decoration: none;
font-weight: 600;
transition: transform .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.opening-link:hover {
transform: translateX(8px)
}

.opening-link::after {
content: '→';
font-size: 24px;
transition: transform .22s cubic-bezier(0.0, 0, 0.2, 1)
}

.opening-link:hover::after {
transform: translateX(6px)
}

@media (max-width: 768px) {
.opening {
flex-direction: column;
padding: 80px 24px 40px
}

.opening-img-strip {
flex: 0 0 320px
}

.opening-headline {
font-size: 48px
}

.opening-subline {
font-size: 20px
}
}

@media (max-width: 360px) {
.opening-headline {
font-size: 48px
}
}

.readiness {
background: linear-gradient(to top, #DFF3F2, #fff);
padding: 80px 24px
}

.readiness-inner {
max-width: 1170px;
margin: 0 auto
}

.readiness-top {
text-align: center;
margin-bottom: 80px
}

.readiness-label {
font-size: 15px;
text-transform: uppercase;
letter-spacing: .05em;
color: #187780;
margin: 0 0 16px;
font-weight: 600
}

.readiness-heading {
font-size: 48px;
line-height: 1.2;
margin: 0;
font-weight: 700;
background: linear-gradient(to top, #187780, #995FBA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.readiness-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: start
}

.readiness-main {
display: flex;
flex-direction: column;
gap: 24px
}

.readiness-p {
font-size: 20px;
line-height: 1.7;
margin: 0;
color: #2a2525
}

.readiness-aside {
background: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 6px 28px -2px #995fba17;
position: sticky;
top: 24px
}

.readiness-aside-title {
font-size: 20px;
line-height: 1.2;
margin: 0 0 24px;
font-weight: 700;
color: #1a1515
}

.readiness-checklist {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px
}

.readiness-checklist li {
font-size: 15px;
line-height: 1.7;
color: #3a3535;
padding-left: 32px;
position: relative
}

.readiness-checklist li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 16px;
height: 16px;
border: 2px solid #995FBA;
border-radius: 2px;
background: #fff
}

.readiness-checklist li::after {
content: '';
position: absolute;
left: 5px;
top: 9px;
width: 6px;
height: 10px;
border: solid #995FBA;
border-width: 0 2px 2px 0;
transform: rotate(45deg)
}

@media (max-width: 1024px) {
.readiness-grid {
grid-template-columns: 1fr
}

.readiness-aside {
position: static
}
}

@media (max-width: 768px) {
.readiness {
padding: 40px 24px
}

.readiness-top {
margin-bottom: 40px
}

.readiness-heading {
font-size: 48px
}

.readiness-aside {
padding: 24px
}
}

.proof {
padding: 120px 24px;
background: #fff;
position: relative;
overflow: hidden
}

.proof::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: repeating-linear-gradient(to right, #995FBA 0, #995FBA 12px, transparent 12px, transparent 24px, #187780 24px, #187780 36px, transparent 36px, transparent 48px)
}

.proof-inner {
max-width: 1170px;
margin: 0 auto
}

.proof-heading {
font-size: 48px;
line-height: 1.2;
margin: 0 0 80px;
font-weight: 700;
text-align: center;
color: #1a1515
}

.proof-cases {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px
}

.proof-case {
background: #fff;
border: 2px dashed #995FBA;
border-radius: 12px;
padding: 40px;
display: flex;
flex-direction: column;
gap: 24px;
transition: all .24s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden
}

.proof-case::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #DFF3F2 0%, transparent 60%);
opacity: 0;
transition: opacity .28s cubic-bezier(0.0, 0, 0.2, 1);
pointer-events: none
}

.proof-case:hover::before {
opacity: 1
}

.proof-case:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px -2px #1877801f;
border-style: solid
}

.proof-case-label {
font-size: 15px;
text-transform: uppercase;
letter-spacing: .05em;
color: #187780;
font-weight: 600;
margin: 0;
position: relative;
z-index: 1
}

.proof-case-title {
font-size: 24px;
line-height: 1.2;
margin: 0;
font-weight: 700;
color: #1a1515;
position: relative;
z-index: 1
}

.proof-case-desc {
font-size: 15px;
line-height: 1.7;
margin: 0;
color: #3a3535;
position: relative;
z-index: 1
}

.proof-case-stat {
margin-top: auto;
padding-top: 24px;
border-top: 2px solid #DFF3F2;
position: relative;
z-index: 1
}

.proof-case-stat-value {
font-size: 48px;
line-height: 1.2;
font-weight: 700;
color: #995FBA;
margin: 0 0 8px
}

.proof-case-stat-label {
font-size: 15px;
line-height: 1.7;
color: #4a4545;
margin: 0
}

@media (max-width: 1024px) {
.proof-cases {
grid-template-columns: repeat(2, 1fr)
}
}

@media (max-width: 768px) {
.proof {
padding: 80px 24px
}

.proof-heading {
font-size: 48px;
margin-bottom: 40px
}

.proof-cases {
grid-template-columns: 1fr;
gap: 24px
}

.proof-case {
padding: 24px
}
}

.distinction {
background: #f7f7f7;
padding: 80px 24px
}

.distinction-inner {
max-width: 1170px;
margin: 0 auto
}

.distinction-heading {
font-size: 48px;
line-height: 1.2;
margin: 0 0 80px;
font-weight: 700;
text-align: center;
background: linear-gradient(to top, #187780, #995FBA);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text
}

.distinction-compare {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 40px;
align-items: center
}

.distinction-col {
display: flex;
flex-direction: column;
gap: 24px
}

.distinction-side {
background: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 3px 2px -2px #1877800f;
min-height: 420px;
display: flex;
flex-direction: column;
gap: 16px;
transition: transform .26s cubic-bezier(0.4, 0, 0.2, 1)
}

.distinction-side:hover {
transform: scale(1.02)
}

.distinction-side-title {
font-size: 24px;
line-height: 1.2;
margin: 0;
font-weight: 700;
color: #1a1515
}

.distinction-side-text {
font-size: 15px;
line-height: 1.7;
margin: 0;
color: #3a3535
}

.distinction-center {
background: linear-gradient(to right, #DFF3F2, #fff);
padding: 80px;
border-radius: 20px;
border: 3px solid #995FBA;
position: relative;
overflow: hidden;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.distinction-center::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, #995fba14 0%, transparent 70%);
opacity: 0;
transition: opacity .3s cubic-bezier(0.0, 0, 0.2, 1);
pointer-events: none
}

.distinction-center:hover::before {
opacity: 1
}

.distinction-center-label {
font-size: 15px;
text-transform: uppercase;
letter-spacing: .05em;
color: #995FBA;
font-weight: 600;
margin: 0 0 24px;
text-align: center
}

.distinction-center-title {
font-size: 48px;
line-height: 1.2;
margin: 0 0 24px;
font-weight: 700;
color: #1a1515;
text-align: center
}

.distinction-center-text {
font-size: 20px;
line-height: 1.7;
margin: 0;
color: #2a2525;
text-align: center
}

.distinction-img-wrapper {
margin-top: 40px;
border-radius: 12px;
overflow: hidden;
position: relative;
height: 240px;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
transition: clip-path .25s cubic-bezier(0.4, 0, 0.2, 1)
}

.distinction-center:hover .distinction-img-wrapper {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}

.distinction-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.6);
transition: filter .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.distinction-center:hover .distinction-img-wrapper img {
filter: saturate(1)
}

@media (max-width: 1024px) {
.distinction-compare {
grid-template-columns: 1fr
}

.distinction-center {
padding: 40px
}

.distinction-center-title {
font-size: 48px
}
}

@media (max-width: 768px) {
.distinction {
padding: 40px 24px
}

.distinction-heading {
font-size: 48px;
margin-bottom: 40px
}

.distinction-side {
padding: 24px;
min-height: auto
}

.distinction-center {
padding: 24px
}

.distinction-center-title {
font-size: 48px
}
}

.audience {
padding: 120px 24px;
background: #fff;
position: relative
}

.audience-inner {
max-width: 1170px;
margin: 0 auto
}

.audience-heading {
font-size: 48px;
line-height: 1.2;
margin: 0 0 80px;
font-weight: 700;
color: #1a1515
}

.audience-profiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px
}

.audience-card {
background: linear-gradient(to right, #fff, #DFF3F2);
border-radius: 12px;
padding: 40px;
box-shadow: 0 6px 28px -2px #995fba17;
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
overflow: hidden;
opacity: 0;
animation: reveal-audience .28s cubic-bezier(0.0, 0, 0.2, 1) forwards
}

.audience-card:nth-child(1) {
animation-delay: .1s
}

.audience-card:nth-child(2) {
animation-delay: .22s
}

.audience-card:nth-child(3) {
animation-delay: .34s
}

@keyframes reveal-audience {
from {
opacity: 0;
transform: translateY(24px)
}

to {
opacity: 1;
transform: translateY(0)
}
}

.audience-card-icon {
width: 80px;
height: 80px;
border: 4px solid #995FBA;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
position: relative
}

.audience-card-icon::before {
content: '';
position: absolute;
inset: 8px;
border-radius: 50%;
background: linear-gradient(135deg, #995FBA, #187780);
opacity: .12
}

.audience-card-icon-text {
font-size: 24px;
font-weight: 700;
color: #995FBA;
position: relative;
z-index: 1
}

.audience-card-name {
font-size: 24px;
line-height: 1.2;
margin: 0;
font-weight: 700;
color: #1a1515
}

.audience-card-situation {
font-size: 15px;
line-height: 1.7;
margin: 0;
color: #3a3535;
font-style: italic;
padding-left: 24px;
border-left: 3px solid #995FBA
}

.audience-card-needs {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px
}

.audience-card-needs li {
font-size: 15px;
line-height: 1.7;
color: #2a2525;
padding-left: 24px;
position: relative
}

.audience-card-needs li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
background: #187780;
border-radius: 50%
}

.audience-card-img-wrapper {
margin-top: auto;
border-radius: 6px;
overflow: hidden;
height: 160px
}

.audience-card-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.5);
transition: filter .21s cubic-bezier(0.4, 0, 0.2, 1)
}

.audience-card:hover .audience-card-img-wrapper img {
filter: saturate(1)
}

@media (max-width: 768px) {
.audience {
padding: 80px 24px
}

.audience-heading {
font-size: 48px;
margin-bottom: 40px
}

.audience-profiles {
grid-template-columns: 1fr;
gap: 24px
}

.audience-card {
padding: 24px
}
}

@media (max-width: 360px) {
.audience-profiles {
grid-template-columns: 1fr
}
}

.confirmation-page {
background: linear-gradient(180deg, #DFF3F2 0%, #fff 100%);
min-height: 100vh;
padding: 80px 16px
}

.confirmation-page .wrapper {
max-width: 1170px;
margin: 0 auto
}

.confirmation-page .status-card {
background: #fff;
border-radius: 20px;
box-shadow: 0 3px 2px -2px #995fba0f 0 6px 28px -2px #995fba17 0 12px 40px -2px #995fba1f;
padding: 80px 40px;
text-align: center;
margin-bottom: 40px
}

.confirmation-page .icon-holder {
width: 120px;
height: 120px;
margin: 0 auto 40px;
position: relative
}

.confirmation-page .checkmark-circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(180deg, #187780 0%, #995FBA 100%);
display: flex;
align-items: center;
justify-content: center;
animation: scaleIn .25s cubic-bezier(0.0, 0, 0.2, 1)
}

@keyframes scaleIn {
0% {
transform: scale(0.8);
opacity: 0
}

100% {
transform: scale(1);
opacity: 1
}
}

.confirmation-page .checkmark-circle svg {
width: 64px;
height: 64px;
stroke: #fff;
stroke-width: 4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: drawCheck .3s cubic-bezier(0.4, 0, 0.2, 1) .2s forwards
}

@keyframes drawCheck {
to {
stroke-dashoffset: 0
}
}

.confirmation-page .main-heading {
font-size: 48px;
line-height: 1.2;
background: linear-gradient(180deg, #187780 0%, #995FBA 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0 0 24px
}

.confirmation-page .status-description {
font-size: 20px;
line-height: 1.7;
color: #333;
margin: 0 0 40px;
max-width: 640px;
margin-left: auto;
margin-right: auto
}

.confirmation-page .reference-block {
background: #DFF3F2;
border-radius: 12px;
padding: 24px;
display: inline-block;
margin-bottom: 40px
}

.confirmation-page .reference-label {
font-size: 15px;
line-height: 1.7;
color: #666;
text-transform: uppercase;
letter-spacing: .5px;
margin: 0 0 8px
}

.confirmation-page .reference-code {
font-size: 24px;
line-height: 1.2;
color: #187780;
font-weight: 600;
margin: 0
}

.confirmation-page .next-steps {
background: #fff;
border-radius: 20px;
padding: 40px;
margin-bottom: 40px
}

.confirmation-page .section-title {
font-size: 24px;
line-height: 1.2;
color: #333;
margin: 0 0 24px
}

.confirmation-page .steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px
}

.confirmation-page .step-item {
background: linear-gradient(180deg, #DFF3F2 0%, #fff 100%);
border-radius: 12px;
padding: 24px;
border: 2px solid transparent;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.confirmation-page .step-item:hover {
border-color: #995FBA
}

.confirmation-page .step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: #995FBA;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 16px
}

.confirmation-page .step-heading {
font-size: 20px;
line-height: 1.2;
color: #333;
margin: 0 0 8px
}

.confirmation-page .step-text {
font-size: 15px;
line-height: 1.7;
color: #666;
margin: 0
}

.confirmation-page .info-panel {
background: #fff;
border-radius: 20px;
padding: 40px;
display: flex;
gap: 40px;
align-items: flex-start
}

.confirmation-page .info-main {
flex: 2
}

.confirmation-page .info-sidebar {
flex: 1;
background: linear-gradient(180deg, #995FBA 0%, #187780 100%);
border-radius: 12px;
padding: 24px;
color: #fff
}

.confirmation-page .info-title {
font-size: 20px;
line-height: 1.2;
color: #333;
margin: 0 0 16px
}

.confirmation-page .info-content {
font-size: 15px;
line-height: 1.7;
color: #666;
margin: 0 0 16px
}

.confirmation-page .info-content:last-child {
margin-bottom: 0
}

.confirmation-page .sidebar-heading {
font-size: 20px;
line-height: 1.2;
margin: 0 0 16px
}

.confirmation-page .sidebar-text {
font-size: 15px;
line-height: 1.7;
margin: 0 0 16px
}

.confirmation-page .contact-link {
display: inline-block;
color: #fff;
text-decoration: none;
font-size: 15px;
line-height: 1.7;
padding: 8px 16px;
background: #fff3;
border-radius: 6px;
transition: background .18s cubic-bezier(0.4, 0, 0.2, 1)
}

.confirmation-page .contact-link:hover {
background: #ffffff4d
}

.confirmation-page .action-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap
}

.confirmation-page .btn-primary {
background: linear-gradient(180deg, #187780 0%, #995FBA 100%);
color: #fff;
border: none;
border-radius: 12px;
padding: 16px 40px;
font-size: 15px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .15s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 3px 2px -2px #995fba0f 0 6px 28px -2px #995fba17
}

.confirmation-page .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 28px -2px #995fba17 0 12px 40px -2px #995fba1f
}

.confirmation-page .btn-secondary {
background: #fff;
color: #995FBA;
border: 2px solid #995FBA;
border-radius: 12px;
padding: 16px 40px;
font-size: 15px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background .2s cubic-bezier(0.4, 0, 0.2, 1), color .2s cubic-bezier(0.4, 0, 0.2, 1)
}

.confirmation-page .btn-secondary:hover {
background: #995FBA;
color: #fff
}

@media (max-width: 768px) {
.confirmation-page {
padding: 40px 16px
}

.confirmation-page .status-card {
padding: 40px 24px
}

.confirmation-page .main-heading {
font-size: 24px
}

.confirmation-page .status-description {
font-size: 15px
}

.confirmation-page .icon-holder {
width: 80px;
height: 80px;
margin-bottom: 24px
}

.confirmation-page .checkmark-circle {
width: 80px;
height: 80px
}

.confirmation-page .checkmark-circle svg {
width: 40px;
height: 40px
}

.confirmation-page .reference-code {
font-size: 20px
}

.confirmation-page .next-steps {
padding: 24px
}

.confirmation-page .steps-grid {
grid-template-columns: 1fr
}

.confirmation-page .info-panel {
flex-direction: column;
padding: 24px
}

.confirmation-page .action-buttons {
flex-direction: column
}

.confirmation-page .btn-primary,
.confirmation-page .btn-secondary {
width: 100%;
text-align: center
}
}