/* Fonts */
@font-face {
    font-family: 'YekanBakh';
    font-style: normal;
    font-weight: 100;
    src: url('/assets/fonts/YekanBakh-thin.woff') format('woff'),
         url('/assets/fonts/YekanBakh-thin.woff2') format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'YekanBakh';
    font-style: normal;
    font-weight: 300;
    src: url('/assets/fonts/YekanBakh-Light.woff') format('woff'),
         url('/assets/fonts/YekanBakh-Light.woff2') format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'YekanBakh';
    font-style: normal;
    font-weight: normal;
    src: url('/assets/fonts/YekanBakh-Regular.woff') format('woff'),
         url('/assets/fonts/YekanBakh-Regular.woff2') format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'YekanBakh';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/fonts/YekanBakh-SemiBold.woff') format('woff'),
         url('/assets/fonts/YekanBakh-SemiBold.woff2') format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'YekanBakh';
    font-style: normal;
    font-weight: bold;
    src: url('/assets/fonts/YekanBakh-Bold.woff') format('woff'),
         url('/assets/fonts/YekanBakh-Bold.woff2') format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'YekanBakh';
    font-style: normal;
    font-weight: 800;
    src: url('/assets/fonts/YekanBakh-ExtraBold.woff') format('woff'),
         url('/assets/fonts/YekanBakh-ExtraBold.woff2') format('woff2');
    font-display: swap
}
@font-face {
    font-family: 'YekanBakh';
    font-style: normal;
    font-weight: 900;
    src: url('/assets/fonts/YekanBakh-ExtraBlack.woff') format('woff'),
         url('/assets/fonts/YekanBakh-ExtraBlack.woff2') format('woff2');
    font-display: swap
}

/* Root variables */
:root {
    --green-700: #7F9E55;
    --green-600: #86A559;
    --green-500: #8EAA5E;
    --green-400: #9FB678;
    --green-300: #B3C491;
    --green-200: #C8D3AA;
    --green-100: #DCE1C4;
    --green-050: #ECEED9;
    --ivory: #E9E2D8;
    --teal: #5C757A;
    --terra: #CB7A5C;
    --ink: #1F2937;
    --muted: #6B7280;
    --surface: #FFFFFF;
    --surface-2: #F7F9FC;
    --border: #E5E7EB;
    --shadow: 0 4px 8px rgba(0, 0, 20, .05);
    --shadow-lg: 0 10px 16px rgba(0, 0, 20, .10);
    --slider-w: min(100%, clamp(460px, 60vw, 1060px));
    --slide-h: clamp(390px, 40vh, 420px)
}

/* Global styles */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}
body {
    font-family: 'YekanBakh', sans-serif;
    background-color: #fff;
    color: var(--ink);
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 1.65;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--hdrH, 0px)
}

/* Header styles */
header {
    background: rgba(255, 255, 255, .97);
    transition: background .25s ease, box-shadow .25s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    border-bottom: 1px solid var(--border)
}
header.sticky,
.lgx-header.is-fixed {
    background: rgba(255, 255, 255, .99);
    box-shadow: 0 2px 6px rgba(0, 0, 20, .06)
}
@supports (backdrop-filter: blur(10px)) {
    header {
        background: rgba(255, 255, 255, .7);
        backdrop-filter: blur(10px)
    }
    header.sticky,
    .lgx-header.is-fixed {
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(8px)
    }
}
nav a:hover {
    color: var(--terra) !important
}
header a.inline-flex:hover {
    background: linear-gradient(90deg, var(--green-700), var(--green-500));
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 20, .1)
}

/* Card styles */
.card {
    transition: transform .2s ease, box-shadow .2s ease;
    background: var(--surface);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow)
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg)
}

/* Form and input styles */
.search-bar,
.form-control {
    border-radius: 12px;
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid #D1D5DB;
    box-shadow: 0 2px 4px rgba(0, 0, 20, .04);
    transition: box-shadow .2s ease, border-color .2s ease
}
.search-bar:focus,
.form-control:focus {
    border-color: var(--green-600);
    box-shadow: 0 0 0 4px rgba(142, 170, 94, .18);
    outline: none
}
input.parsley-error,
textarea.parsley-error {
    border-color: #DC2626 !important
}
input.parsley-success,
textarea.parsley-success {
    border-color: #16A34A !important
}
.parsley-errors-list {
    margin: .25rem 0 0 0;
    padding: 0;
    list-style: none;
    color: #DC2626;
    font-size: .85rem
}

/* Button styles */
.btn-primary,
.btn-brand {
    background: linear-gradient(90deg, var(--green-600), var(--green-400));
    color: #fff;
    border-radius: 12px;
    padding: 10px 20px;
    transition: transform .15s ease, filter .15s ease;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem
}
.btn-primary:hover,
.btn-brand:hover {
    transform: translateY(-1px);
    filter: brightness(.98)
}
.btn-primary:active {
    transform: translateY(0)
}

/* Tag and chip styles */
.tag {
    transition: all .2s ease;
    border-radius: 999px;
    padding: 6px 14px;
    background: var(--ivory);
    color: var(--teal);
    font-size: .875rem
}
.tag:hover,
.tag.active {
    background: var(--teal);
    color: #fff
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .7rem;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    background: #fff;
    font-size: .85rem;
    color: #334155;
    transition: border-color .15s ease, background .15s ease
}
.chip:hover {
    border-color: #CBD5E1;
    background: #F8FAFC
}
.badge-ivory,
.hero-badge {
    background: var(--ivory);
    color: var(--teal);
    border: 1px solid #e7dbcf;
    border-radius: 999px;
    padding: .45rem .9rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    animation: scaleIn .6s cubic-bezier(.22, .61, .36, 1)
}
.hero-badge i {
    color: var(--green-600)
}

/* Contact specific styles */
.contact-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: .75rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 600
}
.contact-badge i {
    opacity: .85
}
.contact-cta,
.cta-card {
    background: linear-gradient(135deg, #0ea5a2 0%, #14b8a6 40%, #22c55e 100%)
}

/* Breadcrumb styles */
.breadcrumb a {
    color: #0ea5a2
}
.breadcrumb a:hover {
    text-decoration: underline
}

/* Stat number */
.stat-number {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--green-600);
    animation: scaleIn .6s cubic-bezier(.22, .61, .36, 1)
}

/* QA item styles */
.qa-item {
    display: none
}
.qa-item.visible {
    display: block;
    animation: scaleIn .6s cubic-bezier(.22, .61, .36, 1)
}

/* Hero background */
.hero-bg {
    position: relative;
    overflow: hidden;
    color: var(--ink);
    background: radial-gradient(900px 500px at 20% 10%, rgba(233, 226, 216, .85) 0%, rgba(233, 226, 216, .25) 55%, rgba(233, 226, 216, 0) 70%), linear-gradient(180deg, rgba(233, 226, 216, .35) 0%, rgba(233, 226, 216, .18) 40%, rgba(233, 226, 216, .10) 70%, rgba(255, 255, 255, 1) 100%);
    z-index: 0
}
.hero-bg::before {
    content: "";
    position: absolute;
    inset: -20%;
    pointer-events: none;
    opacity: .35;
    filter: blur(40px);
    background:
        radial-gradient(260px 200px at 70% 28%, rgba(159, 182, 120, .18), transparent 65%),
        radial-gradient(280px 220px at 24% 75%, rgba(92, 117, 122, .12), transparent 65%);
    z-index: 0
}

/* Footer styles */
footer {
    background: linear-gradient(90deg, var(--green-600) 0%, var(--green-500) 60%, var(--green-400) 100%)
}
.footer-links a {
    display: block;
    padding: .25rem 0;
    color: #E5E7EB;
    font-size: .95rem
}
.footer-links a:hover {
    color: #fff
}

/* Mobile menu styles */
html.menu-open,
body.menu-open {
    overflow: hidden;
    height: 100vh
}
#mobile-menu,
.offcanvas,
.navbar-collapse {
    z-index: 9999
}
#mobile-menu {
    transition: transform .2s ease, opacity .2s ease;
    transform-origin: top
}
#mobile-menu.hidden {
    opacity: 0;
    transform: scaleY(.98)
}
#mobile-menu:not(.hidden) {
    opacity: 1;
    transform: scaleY(1)
}

/* Contact info */
#contact .info p {
    margin-bottom: .5rem;
    font-size: .9rem
}

/* Reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
    will-change: transform, opacity
}
.reveal.show {
    opacity: 1;
    transform: translateY(0)
}
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.show {
        opacity: 1 !important;
        transform: none !important
    }
}

/* Typed wrapper and tagline */
.typed-wrapper {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 1.8em;
    flex-wrap: wrap
}
.typed {
    white-space: nowrap;
    overflow: hidden;
    border-inline-end: 2px solid transparent
}
.typed.cursor {
    border-inline-end-color: currentColor;
    animation: caret .9s steps(1) infinite
}
.tagline {
    display: inline-block;
    font-weight: 800;
    line-height: 1.7;
    white-space: normal;
    position: relative
}
.tagline::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -.25em;
    height: 2px;
    background: currentColor;
    opacity: .35;
    transform: scaleX(0);
    transform-origin: center;
    animation: underline .9s cubic-bezier(.2, .7, .2, 1) .2s forwards
}
.fx-gradient {
    background-image: linear-gradient(90deg, #0ea5a2 0%, #0891b2 50%, #0ea5a2 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shine 6s ease-in-out infinite
}
#brand-tagline-static {
    animation: scaleIn .6s cubic-bezier(.22, .61, .36, 1)
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    width: 48px;
    height: 48px;
    border: none;
    outline: none;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 60;
    background: linear-gradient(135deg, var(--green-600), var(--green-400));
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 20, .15);
    transform: scale(0);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease, filter .15s ease
}
.back-to-top:hover {
    filter: brightness(1.05)
}
.back-to-top:focus-visible {
    box-shadow: 0 0 0 4px rgba(142, 170, 94, .25)
}
.back-to-top.show {
    transform: scale(1);
    opacity: 1
}

/* Post content styles */
.post-hero {
    background: radial-gradient(120% 120% at 100% 0%, rgba(142, 170, 94, .06), rgba(92, 117, 122, .06) 40%, transparent 60%), linear-gradient(180deg, #fff, #fff);
    z-index: 0
}
.post-content {
    color: #334155;
    line-height: 1.9
}
.post-content h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin: 1.75rem 0 .75rem
}
.post-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 1.25rem 0 .5rem
}
.post-content p {
    margin: .75rem 0
}
.post-content ul {
    padding-right: 1.25rem;
    margin: .5rem 0;
    list-style: disc
}
.post-content ol {
    padding-right: 1.25rem;
    margin: .5rem 0;
    list-style: decimal
}
.post-content blockquote {
    border-right: 4px solid #E5E7EB;
    padding-right: 1rem;
    color: #475569;
    font-style: italic;
    margin: 1rem 0
}
.post-content img {
    border-radius: 1rem;
    border: 1px solid #E5E7EB;
    margin: 1rem 0;
    max-width: 100%;
    height: auto
}
.post-content a {
    color: var(--terra);
    text-decoration: underline
}

/* Share grid styles */
.share-grid a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .8rem;
    border: 1px solid #E5E7EB;
    border-radius: .9rem;
    background: #fff;
    font-size: .9rem;
    color: #334155;
    transition: background .15s ease, border-color .15s ease
}
.share-grid a:hover {
    background: #F8FAFC;
    border-color: #CBD5E1
}

/* Gradient and color utilities */
.brand-grad {
    background: linear-gradient(90deg, var(--green-700) 0%, var(--green-600) 25%, var(--green-500) 50%, var(--green-400) 75%, var(--green-300) 100%)
}
.brand-text-grad {
    background: linear-gradient(90deg, var(--green-700), var(--green-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}
.text-brand {
    color: var(--green-600) !important
}
.text-green {
    color: var(--green-700) !important
}
.text-ivory {
    color: var(--ivory) !important
}
.text-teal {
    color: var(--teal) !important
}
.text-terra {
    color: var(--terra) !important
}
.text-sand {
    color: rgb(233, 226, 216)
}
.bg-ivory {
    background-color: var(--ivory) !important
}
.bg-slate-50 {
    background: rgba(233, 226, 216, .1)
}

/* Icon styles */
.icon-animate {
    transition: transform .15s ease
}
.icon-animate:hover {
    transform: scale(1.08)
}
.icon-teal i,
.icon-teal {
    color: var(--teal) !important
}
.icon-terra i,
.icon-terra {
    color: var(--terra) !important
}
.icon-brand i,
.icon-brand {
    color: var(--green-600) !important
}

/* Legal underline */
.legal-underline {
    position: relative
}
.legal-underline::after {
    content: "";
    position: absolute;
    inset: auto 0 -2px 0;
    height: 3px;
    background: linear-gradient(90deg, var(--terra), var(--teal));
    border-radius: 2px;
    transform-origin: right;
    transform: scaleX(0);
    animation: underlineIn .8s ease .2s forwards
}

/* Slider styles */
.legal-slider {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background: #fff;
    z-index: 1
}
.legal-slider .swiper-wrapper {
    display: flex;
    will-change: transform
}
.legal-slide {
    position: relative;
    min-width: 100%;
    height: var(--slide-h)
}
.legal-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}
.legal-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .35));
    opacity: .65
}
.legal-slide-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1rem 1.25rem;
    color: #fff;
    z-index: 2
}
.legal-slide-caption h3 {
    font-weight: 800;
    font-size: 1rem
}
.legal-slide-caption p {
    opacity: .95;
    margin-top: .25rem;
    font-size: .875rem
}
.legal-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: linear-gradient(135deg, var(--green-600), var(--green-400));
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 20, .18);
    transition: filter .15s ease, transform .15s ease
}
.legal-nav:hover {
    filter: brightness(1.05)
}
.legal-nav::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    transform: rotate(45deg)
}
.legal-prev {
    right: 8px
}
.legal-prev::after {
    transform: rotate(-135deg)
}
.legal-next {
    left: 8px
}
.legal-dots {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    display: flex;
    gap: 6px;
    justify-content: center;
    z-index: 2
}
.legal-dots button {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .8);
    background: transparent;
    margin: 0 3px
}
.legal-dots button.active,
.legal-dot.active {
    background: #fff
}
.legal-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .75);
    background: transparent;
    opacity: .8;
    transition: all .2s ease;
    cursor: pointer
}

/* New slider styles */
.legal-stage {
    position: relative;
    display: block;
    z-index: 0
}
.slider-container {
    position: relative;
    width: var(--slider-w);
    height: var(--slide-h);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 1.25rem;
    box-shadow: 0 8px 28px rgba(2, 6, 23, .08);
    z-index: 1
}
.swiper {
    width: 100%;
    height: 100%;
    will-change: transform
}
.slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    will-change: transform
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block
}
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(2, 6, 23, .12);
    color: #899F5F;
    border: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    z-index: 2
}
.prev-btn {
    right: 8px
}
.prev-btn::after {
    content: '' !important
}
.next-btn {
    left: 8px
}
.next-btn::after {
    content: '' !important
}
.slider-nav:disabled {
    opacity: .4;
    cursor: not-allowed
}
.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, .45) 12%, rgba(2, 6, 23, 0) 58%);
    pointer-events: none;
    z-index: 1
}
.slide-caption {
    position: absolute;
    inset-inline: 1.2rem;
    bottom: 1.2rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    z-index: 2
}
.slide-caption h3 {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}
@media (min-width: 640px){
    .slide-caption h3 {
        font-size: 1.4rem;
    }
}
@media (min-width: 1024px){
    .slide-caption h3 {
        font-size: 1.8rem;
    }
}
.slide-caption p {
    font-size: 1rem;
    opacity: .95
}
.dec-blob,
.dec-dots {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    will-change: transform
}
.dec-blob {
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(closest-side, rgba(14, 165, 162, .18), rgba(14, 165, 162, .06) 62%, transparent 70%);
    opacity: .9;
    animation: floatY 8s ease-in-out infinite
}
.dec-blob.left {
    left: 20px;
    top: 10%
}
.dec-blob.right {
    right: 20px;
    bottom: 8%;
    animation: floatY 8s ease-in-out infinite;
    animation-delay: -2s
}
.dec-dots {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: .5
}
.dec-dots.left {
    left: 20px;
    bottom: 12%
}

/* Color overrides */
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900,
.text-indigo-600,
.text-indigo-700,
.text-purple-600,
.text-purple-700,
.text-purple-800,
i.text-blue-500,
i.text-blue-600,
i.text-blue-700,
i.text-blue-800,
i.text-blue-900 {
    color: var(--teal) !important
}
.hover\:text-blue-700:hover {
    color: var(--teal) !important
}
.bg-gradient-to-r.from-blue-700.to-purple-700,
.bg-gradient-to-r.from-blue-900.to-purple-800,
.bg-gradient-to-r.from-blue-900.via-indigo-800.to-purple-800 {
    background: linear-gradient(90deg, var(--green-700), var(--green-500)) !important
}

/* Media queries */
@media (min-width: 640px) {
    .legal-slide {
        height: var(--slide-h)
    }
    .legal-slide-caption h3 {
        font-size: 1.1rem
    }
    .legal-slide-caption p {
        font-size: .95rem
    }
    .legal-nav {
        width: 44px;
        height: 44px
    }
    .legal-prev {
        right: 12px
    }
    .legal-next {
        left: 12px
    }
    .legal-dots {
        bottom: 10px;
        gap: 8px
    }
    .legal-dot {
        width: 10px;
        height: 10px
    }
    .slider-container {
        height: var(--slide-h)
    }
    .slider-nav {
        width: 40px;
        height: 40px
    }
    .prev-btn {
        right: 12px
    }
    .next-btn {
        left: 12px
    }
}
@media (min-width: 768px) {
    :root {
        --slide-h: 460px
    }
    .legal-slide {
        height: var(--slide-h)
    }
    .legal-slide-caption h3 {
        font-size: 1.25rem
    }
    .legal-slide-caption p {
        font-size: 1rem
    }
}
@media (min-width: 1024px) {
    :root {
        --slide-h: 420px
    }
    .legal-slide {
        height: var(--slide-h)
    }
}
@media (max-width: 640px) {
    .dec-blob {
        width: 200px;
        height: 200px;
        opacity: .7;
        animation: floatY-mobile 8s ease-in-out infinite
    }
    .dec-blob.right {
        animation: floatY-mobile 8s ease-in-out infinite;
        animation-delay: -2s
    }
    .dec-dots {
        width: 150px;
        height: 150px;
        opacity: .4
    }
}

/* Animations */
@keyframes legaloFade {
    from {
        opacity: 0;
        transform: translateY(10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}
@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(.96)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}
@keyframes caret {
    50% {
        border-color: transparent
    }
}
@keyframes underlineIn {
    to {
        transform: scaleX(1)
    }
}
@keyframes floatY {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-15px)
    }
}
@keyframes floatY-mobile {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-10px)
    }
}
@keyframes shine {
    0%, 100% {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
}
@keyframes lgxTaglinePop {
    from {
        opacity: 0;
        transform: translateY(8px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}
@keyframes underline {
    to {
        transform: scaleX(1)
    }
}