:root {
    --brand-bg: #0b1220;
    --brand-bg-deep: #09111d;
    --brand-surface: #121c2f;
    --brand-surface-strong: #172338;
    --brand-border: rgba(152, 166, 184, 0.18);
    --brand-border-strong: rgba(127, 219, 255, 0.28);
    --brand-text: #f7fafc;
    --brand-soft: #eaf0f7;
    --brand-muted: #98a6b8;
    --brand-ink: #0f172a;
    --brand-light-surface: #eaf0f7;
    --brand-accent: #2f6bff;
    --brand-accent-strong: #1d4ed8;
    --brand-accent-soft: #7fdbff;
    --brand-success: #18b26b;
}

body.brand-modern,
body.brand-modern.dark {
    background:
        radial-gradient(circle at top left, rgba(47, 107, 255, 0.08), transparent 20%),
        radial-gradient(circle at 85% 12%, rgba(127, 219, 255, 0.08), transparent 18%),
        linear-gradient(180deg, #f8fbff 0%, #f1f6fb 100%) !important;
    color: #4f6178;
}

body.brand-modern .main,
body.brand-modern.dark .main {
    background: transparent !important;
}

body.brand-modern p,
body.brand-modern li,
body.brand-modern label {
    font-family: 'Inter', sans-serif;
    color: #5b6b80;
}

body.brand-modern h1,
body.brand-modern h2,
body.brand-modern h3,
body.brand-modern h4,
body.brand-modern h5,
body.brand-modern h6 {
    color: var(--brand-ink);
}

body.brand-modern a {
    color: #31445f;
}

body.brand-modern a:hover,
body.brand-modern a:focus {
    color: var(--brand-accent);
}

body.brand-modern .text-white {
    color: var(--brand-text) !important;
}

body.brand-modern .text-white-50,
body.brand-modern .text-muted {
    color: var(--brand-muted) !important;
}

body.brand-modern .color-1,
body.brand-modern .color-2,
body.brand-modern .color-3,
body.brand-modern .color-4,
body.brand-modern .color-5,
body.brand-modern .color-6 {
    color: var(--brand-accent) !important;
}

body.brand-modern .dark-bg,
body.brand-modern .dark .dark-bg,
body.brand-modern .dark .navbar-sticky-moved-up {
    background: transparent !important;
}

body.brand-modern .section-heading h2,
body.brand-modern .welcome-intro h1,
body.brand-modern .search-title,
body.brand-modern .breadcrumb-content > h2 {
    letter-spacing: -0.045em;
}

body.brand-modern .btn {
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: 999px;
    padding: 14px 28px;
}

body.brand-modern .btn:hover,
body.brand-modern .btn:focus,
body.brand-modern .btn:active,
body.brand-modern .btn.active {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

body.brand-modern .btn.btn-bordered,
body.brand-modern .btn.btn-bordered-white {
    color: var(--brand-text);
}

body.brand-modern .btn.btn-bordered:before,
body.brand-modern .btn.btn-bordered-white:after {
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-strong) 100%);
}

body.brand-modern .btn.btn-bordered:after {
    background: var(--brand-accent);
}

body.brand-modern .btn.btn-bordered-white {
    background: rgba(247, 250, 252, 0.02);
    border: 1px solid rgba(247, 250, 252, 0.22);
}

body.brand-modern .btn.btn-bordered-white:hover,
body.brand-modern .btn.btn-bordered-white:focus,
body.brand-modern .btn.btn-bordered-white.active {
    border-color: transparent;
}

body.brand-modern .btn.btn-bordered {
    background: transparent;
    color: #ffffff;
}

body.brand-modern .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

body.brand-modern .button-group a {
    margin-right: 0;
}

body.brand-modern .navbar-expand {
    padding: 18px 24px;
}

body.brand-modern .navbar-expand .container.header {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.9rem 1.25rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

body.brand-modern .navbar-expand .navbar-brand {
    margin-right: 0.8rem;
}

body.brand-modern .navbar-expand .navbar-nav.items {
    margin-left: auto;
    margin-right: 1.2rem;
}

body.brand-modern .navbar-expand .navbar-nav.items .nav-item + .nav-item {
    margin-left: 0.2rem;
}

body.brand-modern .navbar-sticky {
    background: transparent;
    box-shadow: none;
    transform: translate3d(0, 0, 0) !important;
}

body.brand-modern .navbar-sticky .container.header {
    background: rgba(234, 240, 247, 0.94);
    border-color: rgba(36, 50, 74, 0.12);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
}

body.brand-modern .navbar-sticky.hide,
body.brand-modern .navbar-sticky.hidden {
    transform: translate3d(0, 0, 0) !important;
}

body.brand-modern .navbar-expand .navbar-nav .nav-link {
    color: rgba(247, 250, 252, 0.82);
}

body.brand-modern .navbar-expand .navbar-nav.items .nav-link {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
}

body.brand-modern .navbar-expand .navbar-nav .nav-link:hover,
body.brand-modern .navbar-expand .navbar-nav.items .nav-link.active,
body.brand-modern .navbar-expand .navbar-nav.items .nav-link[aria-current='page'] {
    color: var(--brand-text);
}

body.brand-modern .navbar-expand.navbar-sticky .navbar-nav .nav-link,
body.brand-modern .navbar-expand.navbar-sticky .navbar-nav.items .nav-link.active,
body.brand-modern .navbar-expand.navbar-sticky .navbar-nav.items .nav-link[aria-current='page'] {
    color: var(--brand-ink) !important;
}

body.brand-modern .navbar-expand .navbar-nav.icons .nav-link,
body.brand-modern .navbar-expand .navbar-nav.toggle .nav-link {
    width: 42px;
    height: 42px;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(127, 219, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    padding: 0;
}

body.brand-modern .navbar-expand .navbar-nav.icons {
    margin-right: 0.9rem;
}

body.brand-modern .navbar-expand .navbar-nav.action {
    margin-left: 0.15rem;
}

body.brand-modern .navbar-expand .navbar-nav.action .btn {
    white-space: nowrap;
}

body.brand-modern .navbar-sticky .navbar-nav.icons .nav-link,
body.brand-modern .navbar-sticky .navbar-nav.toggle .nav-link {
    border-color: rgba(36, 50, 74, 0.14);
    background: rgba(255, 255, 255, 0.56);
}

body.brand-modern .welcome-area {
    min-height: 800px;
    isolation: isolate;
    background:
        radial-gradient(circle at 14% 18%, rgba(47, 107, 255, 0.42), transparent 28%),
        radial-gradient(circle at 84% 16%, rgba(127, 219, 255, 0.22), transparent 24%),
        linear-gradient(135deg, #040812 0%, #0b1220 42%, #10203b 100%) !important;
    background-size: 150% 150%, 140% 140%, 100% 100%;
    background-position: 0% 0%, 100% 0%, 50% 50%;
    border-bottom: 1px solid rgba(127, 219, 255, 0.08);
    animation: heroBackgroundFlow 16s ease-in-out infinite;
}

body.brand-modern .welcome-area .text-white,
body.brand-modern .welcome-area .text-white-50,
body.brand-modern .breadcrumb-area .text-white,
body.brand-modern .breadcrumb-area .text-white-50,
body.brand-modern .cta-area .text-white,
body.brand-modern .cta-area .text-white-50,
body.brand-modern .footer-area .text-white,
body.brand-modern .footer-area .text-white-50 {
    color: inherit;
}

body.brand-modern .welcome-area h1,
body.brand-modern .welcome-area h2,
body.brand-modern .welcome-area p,
body.brand-modern .breadcrumb-area h2,
body.brand-modern .breadcrumb-area a,
body.brand-modern .breadcrumb-area li,
body.brand-modern .cta-area h2,
body.brand-modern .cta-area p,
body.brand-modern .cta-area a,
body.brand-modern .footer-area h1,
body.brand-modern .footer-area h2,
body.brand-modern .footer-area h3,
body.brand-modern .footer-area p,
body.brand-modern .footer-area a,
body.brand-modern .footer-area span,
body.brand-modern .footer-area li {
    color: var(--brand-soft);
}

body.brand-modern .welcome-area::before {
    position: absolute;
    content: '';
    inset: 0;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.06) 0%, transparent 36%),
        linear-gradient(180deg, rgba(8, 16, 28, 0.12) 0%, rgba(8, 16, 28, 0.54) 100%);
    z-index: 0;
    animation: heroOverlayPulse 12s ease-in-out infinite;
}

body.brand-modern .welcome-area.bg-overlay::after {
    background:
        linear-gradient(180deg, rgba(9, 17, 29, 0.08) 0%, rgba(9, 17, 29, 0.34) 72%, rgba(9, 17, 29, 0.76) 100%);
    opacity: 1;
    z-index: 1;
    animation: heroShimmerSweep 14s ease-in-out infinite;
}

body.brand-modern .welcome-area > .container {
    position: relative;
    z-index: 3;
}

body.brand-modern .hero-atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
    transform-origin: center;
    animation: heroAtmosphereDrift 14s ease-in-out infinite;
}

body.brand-modern .hero-atmosphere::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(127, 219, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 219, 255, 0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: 0 0, 0 0;
    opacity: 0.36;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.72) 38%, rgba(0, 0, 0, 0.2));
    animation: heroAmbientGridDrift 10s linear infinite;
}

body.brand-modern .hero-orb,
body.brand-modern .hero-beam,
body.brand-modern .hero-grid,
body.brand-modern .hero-ring {
    position: absolute;
    display: block;
}

body.brand-modern .hero-orb {
    border-radius: 50%;
    filter: blur(16px);
    opacity: 0.8;
    animation: heroFloat 9s ease-in-out infinite;
}

body.brand-modern .hero-orb-1 {
    top: -8rem;
    left: -6rem;
    width: 28rem;
    height: 28rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(127, 219, 255, 0.34) 0%, rgba(47, 107, 255, 0.18) 35%, transparent 72%);
}

body.brand-modern .hero-orb-2 {
    top: 5%;
    right: -3.5rem;
    width: 25rem;
    height: 25rem;
    background:
        radial-gradient(circle at 40% 40%, rgba(127, 219, 255, 0.24) 0%, rgba(47, 107, 255, 0.13) 34%, transparent 68%);
    animation-duration: 10s;
    animation-delay: -2s;
}

body.brand-modern .hero-orb-3 {
    display: none;
}

body.brand-modern .hero-beam {
    border-radius: 999px;
    transform: rotate(-24deg);
    opacity: 0.22;
    filter: blur(12px);
    animation: heroBeamPulse 8s ease-in-out infinite;
}

body.brand-modern .hero-beam-1 {
    top: -3rem;
    right: 16%;
    width: 18rem;
    height: 28rem;
    background:
        linear-gradient(
            180deg,
            rgba(127, 219, 255, 0) 0%,
            rgba(127, 219, 255, 0.08) 18%,
            rgba(127, 219, 255, 0.18) 42%,
            rgba(47, 107, 255, 0.1) 64%,
            rgba(47, 107, 255, 0.02) 78%,
            transparent 100%
        );
}

body.brand-modern .hero-beam-2 {
    display: none;
}

body.brand-modern .hero-grid {
    inset: auto 0 0 0;
    height: 62%;
    background:
        linear-gradient(rgba(127, 219, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 219, 255, 0.08) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 20%, rgba(0, 0, 0, 1) 100%);
    transform: perspective(900px) rotateX(74deg) scale(1.35) translateY(24%);
    transform-origin: bottom center;
    opacity: 0.16;
    animation: heroGridShift 10s linear infinite, heroGridPulse 7s ease-in-out infinite;
}

body.brand-modern .hero-ring {
    display: none;
}

body.brand-modern .welcome-intro {
    max-width: 42rem;
}

body.brand-modern .welcome-intro h1 {
    font-size: clamp(2rem, 1.45rem + 2vw, 3.15rem);
    line-height: 1.02;
    max-width: 15ch;
}

body.brand-modern .welcome-intro p {
    max-width: 38rem;
}

body.brand-modern .welcome-thumb-wrapper::after {
    position: absolute;
    content: '';
    inset: 12% 2% 8% 10%;
    border: 1px solid rgba(127, 219, 255, 0.14);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(18, 28, 47, 0.28), rgba(18, 28, 47, 0.06)),
        radial-gradient(circle at top, rgba(127, 219, 255, 0.12), transparent 55%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 34px rgba(3, 7, 18, 0.14);
    z-index: -1;
}

body.brand-modern .welcome-thumb-1 img,
body.brand-modern .service-thumb img {
    opacity: 0.88;
    filter: saturate(0) brightness(1.15) contrast(1.04);
}

body.brand-modern .welcome-thumb-2 .welcome-animation {
    opacity: 0.55;
    filter: saturate(0) brightness(1.35);
}

body.brand-modern .welcome-thumb-wrapper {
    isolation: isolate;
}

body.brand-modern .welcome-thumb-wrapper::before {
    position: absolute;
    content: '';
    inset: 20% 10% 16% 18%;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(47, 107, 255, 0.16), rgba(127, 219, 255, 0.04));
    filter: blur(18px);
    z-index: -2;
}

body.brand-modern .service-area,
body.brand-modern .content-area,
body.brand-modern .price-plan-area,
body.brand-modern .contact-area,
body.brand-modern .portfolio-area,
body.brand-modern .blog-area,
body.brand-modern .footer-area {
    position: relative;
}

body.brand-modern .service-area::before,
body.brand-modern .content-area::before,
body.brand-modern .price-plan-area::before,
body.brand-modern .contact-area::before,
body.brand-modern .portfolio-area::before,
body.brand-modern .blog-area::before {
    position: absolute;
    content: '';
    inset: 0;
    border-top: 1px solid rgba(36, 50, 74, 0.05);
    pointer-events: none;
}

body.brand-modern .service-area {
    background: linear-gradient(180deg, #f5f9fd 0%, #eef4fa 100%);
}

body.brand-modern .content-area {
    background: #ffffff;
}

body.brand-modern .content-list li,
body.brand-modern .content-area .list-unstyled li {
    border-bottom: 1px solid rgba(36, 50, 74, 0.1);
}

body.brand-modern .content-list li:last-child,
body.brand-modern .content-area .list-unstyled li:last-child {
    border-bottom: 0;
}

body.brand-modern .home-visual {
    position: relative;
    min-height: 30rem;
    border-radius: 30px;
}

body.brand-modern .home-visual__glow,
body.brand-modern .home-visual__grid,
body.brand-modern .home-visual__beam,
body.brand-modern .home-visual__node,
body.brand-modern .home-visual__link {
    position: absolute;
    pointer-events: none;
}

body.brand-modern .home-visual__glow {
    border-radius: 999px;
    filter: blur(10px);
}

body.brand-modern .home-visual__glow--top {
    top: 0.5rem;
    right: 2rem;
    width: 11rem;
    height: 11rem;
    background: radial-gradient(circle, rgba(47, 107, 255, 0.22), transparent 72%);
}

body.brand-modern .home-visual__glow--bottom {
    bottom: 0.5rem;
    left: 0.5rem;
    width: 10rem;
    height: 10rem;
    background: radial-gradient(circle, rgba(127, 219, 255, 0.18), transparent 72%);
}

body.brand-modern .home-visual__glow--left {
    top: 2rem;
    left: 1rem;
    width: 12rem;
    height: 12rem;
    background: radial-gradient(circle, rgba(47, 107, 255, 0.16), transparent 72%);
}

body.brand-modern .home-visual__grid {
    inset: 15% 8% 12% 8%;
    border-radius: 26px;
    background-image:
        linear-gradient(rgba(36, 50, 74, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 50, 74, 0.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.76), rgba(0, 0, 0, 0.14));
}

body.brand-modern .home-visual__beam {
    top: 2rem;
    right: 14%;
    width: 10rem;
    height: 20rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(127, 219, 255, 0.2), rgba(127, 219, 255, 0));
    transform: rotate(20deg);
    opacity: 0.72;
}

body.brand-modern .home-visual__card {
    position: absolute;
    border: 1px solid rgba(36, 50, 74, 0.1);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 252, 0.98));
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(10px);
}

body.brand-modern .home-visual__card--frame {
    top: 3.5rem;
    right: 2rem;
    width: min(100%, 25rem);
    padding: 1.4rem;
}

body.brand-modern .home-visual__card--plan {
    top: 4rem;
    left: 1.25rem;
    width: min(100%, 17rem);
    padding: 1.2rem;
}

body.brand-modern .home-visual__card--overlay {
    right: 1.5rem;
    bottom: 3rem;
    width: min(100%, 18rem);
    padding: 1.2rem;
}

body.brand-modern .home-visual__tag,
body.brand-modern .home-visual__eyebrow {
    color: var(--brand-accent);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.brand-modern .home-visual__tag {
    margin-bottom: 1rem;
}

body.brand-modern .home-visual__schema {
    position: relative;
    height: 12rem;
    border: 1px solid rgba(36, 50, 74, 0.08);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(238, 244, 255, 0.9), rgba(255, 255, 255, 0.8));
    overflow: hidden;
}

body.brand-modern .home-visual__node {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-soft));
    box-shadow: 0 0 0 7px rgba(47, 107, 255, 0.08);
}

body.brand-modern .home-visual__node--core {
    top: 5rem;
    left: calc(50% - 0.475rem);
}

body.brand-modern .home-visual__node--a {
    top: 2rem;
    left: 3.5rem;
}

body.brand-modern .home-visual__node--b {
    top: 2rem;
    right: 3.5rem;
}

body.brand-modern .home-visual__node--c {
    bottom: 2rem;
    left: 4rem;
}

body.brand-modern .home-visual__node--d {
    bottom: 2rem;
    right: 4rem;
}

body.brand-modern .home-visual__link {
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(47, 107, 255, 0.38), rgba(127, 219, 255, 0.2));
}

body.brand-modern .home-visual__link--1 {
    top: 2.5rem;
    left: 4rem;
    width: 7rem;
    transform: rotate(27deg);
}

body.brand-modern .home-visual__link--2 {
    top: 2.5rem;
    left: calc(50% + 0.2rem);
    width: 6.7rem;
    transform: rotate(-27deg);
}

body.brand-modern .home-visual__link--3 {
    top: 8rem;
    left: 4.4rem;
    width: 6.2rem;
    transform: rotate(-23deg);
}

body.brand-modern .home-visual__link--4 {
    top: 8rem;
    left: calc(50% + 0.2rem);
    width: 6rem;
    transform: rotate(23deg);
}

body.brand-modern .home-visual__stats {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

body.brand-modern .home-visual__stat {
    padding: 0.88rem 0.95rem;
    border: 1px solid rgba(36, 50, 74, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
}

body.brand-modern .home-visual__stat-label {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--brand-ink);
    font-weight: 600;
}

body.brand-modern .home-visual__stat-copy {
    display: block;
    color: #5f6f85;
    font-size: 0.92rem;
    line-height: 1.55;
}

body.brand-modern .home-visual__badge {
    position: absolute;
    padding: 0.62rem 0.95rem;
    border: 1px solid rgba(47, 107, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--brand-ink);
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

body.brand-modern .home-visual__badge--top {
    top: 2rem;
    left: 2.2rem;
}

body.brand-modern .home-visual__badge--bottom {
    right: 2.4rem;
    bottom: 1.8rem;
}

body.brand-modern .home-visual__badge--left {
    left: 2rem;
    bottom: 2rem;
}

body.brand-modern .home-visual__badge--right {
    top: 2rem;
    right: 2rem;
}

body.brand-modern .home-visual__steps {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
}

body.brand-modern .home-visual__step {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

body.brand-modern .home-visual__step-index {
    min-width: 2rem;
    color: var(--brand-accent);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

body.brand-modern .home-visual__step-line {
    flex: 1 1 auto;
    height: 0.72rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(18, 28, 47, 0.16), rgba(18, 28, 47, 0.08));
}

body.brand-modern .home-visual__step-line--long {
    max-width: 11rem;
}

body.brand-modern .home-visual__step-line--short {
    max-width: 6.5rem;
}

body.brand-modern .home-visual__eyebrow {
    display: block;
    margin-bottom: 0.95rem;
}

body.brand-modern .home-visual__bars {
    display: grid;
    gap: 0.75rem;
}

body.brand-modern .home-visual__bar {
    display: block;
    height: 0.8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(47, 107, 255, 0.22), rgba(127, 219, 255, 0.12));
}

body.brand-modern .home-visual__bar--a {
    width: 88%;
}

body.brand-modern .home-visual__bar--b {
    width: 70%;
}

body.brand-modern .home-visual__bar--c {
    width: 58%;
}

body.brand-modern .home-visual__tiny-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 1rem;
}

body.brand-modern .home-visual__tiny-grid span {
    display: block;
    height: 2.8rem;
    border-radius: 12px;
    border: 1px solid rgba(36, 50, 74, 0.08);
    background: rgba(238, 244, 255, 0.62);
}

body.brand-modern .single-service {
    height: 100%;
    padding: 1.4rem !important;
    border: 1px solid rgba(36, 50, 74, 0.1);
    border-radius: 18px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.brand-modern .single-service:hover {
    transform: translateY(-8px);
    border-color: rgba(47, 107, 255, 0.18);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

body.brand-modern .single-service > img {
    padding: 12px;
    border: 1px solid rgba(127, 219, 255, 0.16);
    border-radius: 14px;
}

body.brand-modern .single-service > img.icon-bg-1,
body.brand-modern .single-service > img.icon-bg-3,
body.brand-modern .single-service > img.icon-bg-5 {
    background-color: rgba(47, 107, 255, 0.14);
}

body.brand-modern .single-service > img.icon-bg-2,
body.brand-modern .single-service > img.icon-bg-4,
body.brand-modern .single-service > img.icon-bg-6 {
    background-color: rgba(127, 219, 255, 0.12);
}

body.brand-modern .bg-hover::after,
body.brand-modern .color-1.bg-hover:hover::after,
body.brand-modern .color-1.bg-hover.active::after,
body.brand-modern .color-2.bg-hover:hover::after,
body.brand-modern .color-2.bg-hover.active::after,
body.brand-modern .color-3.bg-hover:hover::after,
body.brand-modern .color-3.bg-hover.active::after {
    background: linear-gradient(90deg, var(--brand-accent) 0%, var(--brand-accent-soft) 100%);
}

body.brand-modern .price-plan-area {
    background:
        radial-gradient(circle at 10% 10%, rgba(47, 107, 255, 0.08), transparent 18%),
        linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
}

body.brand-modern .single-price-plan {
    border: 1px solid rgba(36, 50, 74, 0.1);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.brand-modern .single-price-plan.bg-hover::after {
    height: 4px;
}

body.brand-modern .single-price-plan.active,
body.brand-modern .single-price-plan:hover {
    transform: translateY(-8px);
    border-color: rgba(47, 107, 255, 0.22);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

body.brand-modern .plan-title .badge {
    background: rgba(127, 219, 255, 0.16) !important;
    color: var(--brand-soft) !important;
    border: 1px solid rgba(127, 219, 255, 0.22);
}

body.brand-modern .dark-shadow,
body.brand-modern .dark-shadow-2 {
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06) !important;
}

body.brand-modern .contact-area {
    background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%);
}

body.brand-modern .contact-info {
    margin: 1rem 0 !important;
    border: 1px solid rgba(36, 50, 74, 0.1);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

body.brand-modern .contact-box {
    padding: 2rem;
    border: 1px solid rgba(36, 50, 74, 0.12);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(234, 240, 247, 0.98), rgba(247, 250, 252, 1));
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

body.brand-modern .contact-box .text-white-50,
body.brand-modern .contact-box .contact-demo-note,
body.brand-modern .contact-box .small {
    color: #5b6b80 !important;
}

body.brand-modern .contact-box .form-control {
    min-height: 3.5rem;
    border: 1px solid rgba(36, 50, 74, 0.14);
    border-radius: 14px;
    background: #ffffff;
    color: var(--brand-ink);
    box-shadow: none;
    padding: 0.95rem 1rem;
}

body.brand-modern .contact-box textarea.form-control {
    min-height: 12rem;
}

body.brand-modern .contact-box .form-control:focus {
    border-color: rgba(47, 107, 255, 0.42);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.1);
}

body.brand-modern .contact-box .btn.btn-bordered:after {
    background: var(--brand-accent);
    opacity: 1;
}

body.brand-modern .contact-box .btn.btn-bordered {
    color: var(--brand-text);
}

body.brand-modern .contact-box .btn.btn-bordered:before {
    opacity: 0;
}

body.brand-modern .contact-success {
    background: rgba(24, 178, 107, 0.14);
    border: 1px solid rgba(24, 178, 107, 0.3);
}

body.brand-modern .contact-success .text-white {
    color: #eafff3 !important;
}

body.brand-modern .contact-success .text-white-50 {
    color: rgba(234, 255, 243, 0.8) !important;
}

body.brand-modern .cta-area {
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 22%, rgba(47, 107, 255, 0.26), transparent 24%),
        radial-gradient(circle at 82% 28%, rgba(127, 219, 255, 0.18), transparent 22%),
        linear-gradient(135deg, #07101c 0%, #0d172a 48%, #11213d 100%) !important;
    border-top: 1px solid rgba(127, 219, 255, 0.08);
}

body.brand-modern .cta-area.bg-overlay::after {
    background: linear-gradient(180deg, rgba(9, 17, 29, 0.06), rgba(9, 17, 29, 0.48));
    opacity: 1;
    z-index: 1;
}

body.brand-modern .cta-area > .container {
    position: relative;
    z-index: 3;
}

body.brand-modern .cta-atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

body.brand-modern .cta-orb,
body.brand-modern .cta-beam,
body.brand-modern .cta-grid,
body.brand-modern .cta-ring {
    position: absolute;
    display: block;
}

body.brand-modern .cta-orb {
    border-radius: 50%;
    filter: blur(16px);
    opacity: 0.72;
    animation: heroFloat 18s ease-in-out infinite;
}

body.brand-modern .cta-orb-1 {
    top: -8rem;
    left: -4rem;
    width: 22rem;
    height: 22rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(127, 219, 255, 0.28) 0%, rgba(47, 107, 255, 0.14) 40%, transparent 72%);
}

body.brand-modern .cta-orb-2 {
    right: -7rem;
    bottom: -10rem;
    width: 28rem;
    height: 28rem;
    background:
        radial-gradient(circle at 50% 50%, rgba(47, 107, 255, 0.22) 0%, rgba(127, 219, 255, 0.1) 38%, transparent 72%);
    animation-duration: 20s;
    animation-delay: -7s;
}

body.brand-modern .cta-beam {
    border-radius: 999px;
    opacity: 0.22;
}

body.brand-modern .cta-beam-1 {
    top: -7rem;
    right: 22%;
    width: 14rem;
    height: 24rem;
    transform: rotate(-32deg);
    background: linear-gradient(180deg, rgba(127, 219, 255, 0.14) 0%, rgba(127, 219, 255, 0.02) 72%, transparent 100%);
}

body.brand-modern .cta-beam-2 {
    left: 14%;
    bottom: -8rem;
    width: 12rem;
    height: 20rem;
    transform: rotate(24deg);
    background: linear-gradient(180deg, rgba(47, 107, 255, 0.12) 0%, rgba(47, 107, 255, 0.02) 72%, transparent 100%);
}

body.brand-modern .cta-grid {
    inset: auto 0 -8% 0;
    height: 54%;
    background:
        linear-gradient(rgba(127, 219, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 219, 255, 0.1) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.75) 18%, rgba(0, 0, 0, 1) 100%);
    transform: perspective(800px) rotateX(76deg) scale(1.3) translateY(22%);
    transform-origin: bottom center;
    opacity: 0.12;
    animation: heroGridShift 22s linear infinite;
}

body.brand-modern .cta-ring {
    display: none;
}

body.brand-modern .portfolio-menu .btn {
    color: #5f6f85;
}

body.brand-modern .portfolio-menu .btn::after {
    background-color: var(--brand-accent-soft);
}

body.brand-modern .portfolio-menu .btn.active {
    color: var(--brand-ink);
}

body.brand-modern .case-studies-overlay {
    background:
        linear-gradient(180deg, rgba(9, 17, 29, 0.2), rgba(11, 18, 32, 0.9)),
        linear-gradient(135deg, rgba(47, 107, 255, 0.72), rgba(127, 219, 255, 0.32));
}

body.brand-modern .single-case-studies > a > img {
    border-radius: 20px;
}

body.brand-modern .single-case-studies:hover .case-studies-overlay {
    opacity: 0.96;
}

body.brand-modern .single-blog,
body.brand-modern .single-widget,
body.brand-modern .search-widget input,
body.brand-modern .search-widget select {
    border: 1px solid rgba(36, 50, 74, 0.1);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

body.brand-modern .single-blog:hover {
    transform: translateY(-8px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

body.brand-modern .blog-thumb img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

body.brand-modern .blog-content {
    background: transparent;
}

body.brand-modern .portfolio-area,
body.brand-modern .blog-area {
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%);
}

body.brand-modern .service-area .text-white,
body.brand-modern .service-area .single-service h3,
body.brand-modern .about-area .text-white,
body.brand-modern .our-goal .text-white,
body.brand-modern .content-area .text-white,
body.brand-modern .price-plan-area .text-white,
body.brand-modern .contact-area .text-white,
body.brand-modern .portfolio-area .text-white,
body.brand-modern .blog-area .text-white,
body.brand-modern .blog-area .single-blog h3,
body.brand-modern .blog-area .single-widget h5,
body.brand-modern .blog-area .single-widget h6,
body.brand-modern .blog-area .blog-title,
body.brand-modern .blog-area .admin-name {
    color: var(--brand-ink) !important;
}

body.brand-modern .portfolio-area .case-studies-overlay .text-white,
body.brand-modern .contact-success .text-white,
body.brand-modern .contact-success .text-white-50,
body.brand-modern .contact-area .btn .text-white,
body.brand-modern .blog-area .btn .text-white,
body.brand-modern .price-plan-area .btn .text-white {
    color: var(--brand-text) !important;
}

body.brand-modern .service-area .text-white-50,
body.brand-modern .about-area .text-white-50,
body.brand-modern .our-goal .text-white-50,
body.brand-modern .content-area .text-white-50,
body.brand-modern .price-plan-area .text-white-50,
body.brand-modern .price-plan-area .text-sm,
body.brand-modern .contact-area .text-white-50,
body.brand-modern .portfolio-area .text-white-50,
body.brand-modern .blog-area .text-white-50,
body.brand-modern .blog-area .meta-info,
body.brand-modern .blog-area .post-date,
body.brand-modern .blog-area .comments-title {
    color: #5f6f85 !important;
}

body.brand-modern .service-area p,
body.brand-modern .about-area p,
body.brand-modern .our-goal p,
body.brand-modern .content-area p,
body.brand-modern .price-plan-area p,
body.brand-modern .portfolio-area p,
body.brand-modern .blog-area p,
body.brand-modern .blog-area li,
body.brand-modern .blog-area .author-bio,
body.brand-modern .blog-area .author-bio p {
    color: #5f6f85;
}

body.brand-modern .content-area .content-icon i,
body.brand-modern .content-area .me-3 i {
    color: var(--brand-accent);
}

body.brand-modern .price-plan-area .plan-features > li,
body.brand-modern .price-plan-area .fw-6,
body.brand-modern .blog-area .widget-items a,
body.brand-modern .blog-area .single-post {
    color: var(--brand-ink);
}

body.brand-modern .price-plan-area .btn.btn-bordered-white,
body.brand-modern .contact-area .btn.btn-bordered-white,
body.brand-modern .portfolio-area .btn.btn-bordered-white {
    border-color: rgba(47, 107, 255, 0.16);
    color: var(--brand-ink);
    background: rgba(47, 107, 255, 0.04);
}

body.brand-modern .price-plan-area .btn.btn-bordered-white:hover,
body.brand-modern .price-plan-area .btn.btn-bordered-white:focus,
body.brand-modern .price-plan-area .btn.btn-bordered-white.active {
    color: var(--brand-text);
}

body.brand-modern .contact-area .contact-info .text-white,
body.brand-modern .contact-area .contact-info h3,
body.brand-modern .contact-area .contact-info p {
    color: var(--brand-ink) !important;
}

body.brand-modern .contact-area .contact-info span i {
    color: var(--brand-accent);
}

body.brand-modern .contact-box {
    border-color: rgba(36, 50, 74, 0.1);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.1);
}

body.brand-modern .search-widget input,
body.brand-modern .search-widget select,
body.brand-modern .blog-area .contact-box.comment-box .form-control {
    background: #ffffff;
    color: var(--brand-ink);
}

body.brand-modern .blog-area .single-widget {
    padding: 1.25rem 1.35rem;
}

body.brand-modern .blog-area .single-widget h5 {
    border-bottom-color: rgba(36, 50, 74, 0.08);
}

body.brand-modern .blog-area .widget-items li,
body.brand-modern .blog-area .tags-widget-items a,
body.brand-modern .blog-area .single-post,
body.brand-modern .blog-area .meta-info,
body.brand-modern .blog-area .blog-contact,
body.brand-modern .blog-area .blog-comments {
    border-color: rgba(36, 50, 74, 0.08);
}

body.brand-modern .blog-area .tags-widget-items a {
    border: 1px solid rgba(36, 50, 74, 0.08);
    border-radius: 999px;
    background: #f7fbff;
    color: #5f6f85 !important;
}

body.brand-modern .blog-area .tags-widget-items a:hover,
body.brand-modern .blog-area .tags-widget-items a:focus {
    color: var(--brand-accent) !important;
    border-color: rgba(47, 107, 255, 0.16);
}

body.brand-modern .blog-area .single-blog-details,
body.brand-modern .blog-area .digimax-blog,
body.brand-modern .blog-area .blog-comments,
body.brand-modern .blog-area .blog-contact {
    border: 1px solid rgba(36, 50, 74, 0.08);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

body.brand-modern .blog-area .digimax-blog,
body.brand-modern .blog-area .blog-comments,
body.brand-modern .blog-area .blog-contact {
    margin-top: 1rem;
}

body.brand-modern .blog-area .blog-comments,
body.brand-modern .blog-area .blog-contact {
    padding: 1.5rem !important;
}

body.brand-modern .blog-area .meta-info > ul > li,
body.brand-modern .blog-area .meta-info > ul > li a,
body.brand-modern .blog-area .blog-details a,
body.brand-modern .blog-area .author-bio a {
    color: #5f6f85;
}

body.brand-modern .blog-area .blog-details a:hover,
body.brand-modern .blog-area .meta-info > ul > li a:hover,
body.brand-modern .blog-area .author-bio a:hover {
    color: var(--brand-accent);
}

body.brand-modern .blog-area .blog-share .social-icons a {
    background: #eef4ff !important;
    border: 1px solid rgba(47, 107, 255, 0.12);
    color: var(--brand-accent) !important;
}

body.brand-modern .blog-area .blog-share .social-icons a:hover {
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-soft) 100%) !important;
    color: #ffffff !important;
}

body.brand-modern .comment-thread {
    border-top: 1px solid rgba(36, 50, 74, 0.1);
}

body.brand-modern .comment-children {
    border-left: 1px solid rgba(36, 50, 74, 0.1);
}

body.brand-modern .blog-title a,
body.brand-modern .blog-btn,
body.brand-modern .widget-items li a.active,
body.brand-modern .pagination > li.active > a {
    color: var(--brand-accent) !important;
}

body.brand-modern .blog-body,
body.brand-modern .blog-body p,
body.brand-modern .blog-body li,
body.brand-modern .blog-html,
body.brand-modern .blog-html p,
body.brand-modern .work-html,
body.brand-modern .work-html p,
body.brand-modern .author-bio,
body.brand-modern .author-bio p {
    color: var(--brand-muted);
}

body.brand-modern .blog-html h2,
body.brand-modern .blog-html h3,
body.brand-modern .blog-html h4,
body.brand-modern .work-html h2,
body.brand-modern .work-html h3,
body.brand-modern .work-html h4 {
    color: var(--brand-ink);
}

body.brand-modern .pagination > li > a,
body.brand-modern .pagination li span {
    border: 1px solid rgba(36, 50, 74, 0.1);
    border-radius: 999px;
    color: var(--brand-ink);
    background: #ffffff;
}

body.brand-modern .pagination > li.active > a,
body.brand-modern .pagination li.active span {
    background: var(--brand-accent);
    border-color: transparent;
    color: #ffffff !important;
}

body.brand-modern .search-widget input,
body.brand-modern .search-widget select {
    color: var(--brand-ink);
}

body.brand-modern .search-widget input:focus,
body.brand-modern .search-widget select:focus {
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.1);
}

body.brand-modern .breadcrumb-area,
body.brand-modern .blog .breadcrumb-area {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(47, 107, 255, 0.2), transparent 22%),
        linear-gradient(135deg, #09111d 0%, #0d172a 48%, #12233c 100%) !important;
}

body.brand-modern .breadcrumb-area::before,
body.brand-modern .blog .breadcrumb-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(127, 219, 255, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 219, 255, 0.09) 1px, transparent 1px);
    background-size: 62px 62px;
    background-position: 0 0, 0 0;
    opacity: 0.36;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.78) 42%, rgba(0, 0, 0, 0.24));
    animation: heroAmbientGridDrift 10s linear infinite;
    pointer-events: none;
    z-index: 0;
}

body.brand-modern .overlay-dark::after,
body.brand-modern .breadcrumb-area.bg-overlay::after {
    background: linear-gradient(180deg, rgba(9, 17, 29, 0.28) 0%, rgba(9, 17, 29, 0.72) 100%);
}

body.brand-modern .breadcrumb-area .container,
body.brand-modern .breadcrumb-content {
    position: relative;
    z-index: 1;
}

body.brand-modern .breadcrumb-content > h2 {
    background-image: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand-accent-soft) 100%);
}

body.brand-modern .breadcrumb-item,
body.brand-modern .breadcrumb-item > a,
body.brand-modern .breadcrumb-item.active,
body.brand-modern .breadcrumb-item + .breadcrumb-item::before {
    color: var(--brand-soft) !important;
}

body.brand-modern .modal-content {
    border: 1px solid rgba(36, 50, 74, 0.08);
    border-radius: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 250, 252, 0.99));
    color: var(--brand-ink);
    box-shadow: 0 22px 56px rgba(15, 23, 42, 0.12);
}

body.brand-modern .modal-header {
    border-bottom: 1px solid rgba(36, 50, 74, 0.08);
    color: var(--brand-ink);
    font-weight: 600;
    background: rgba(255, 255, 255, 0.7);
}

body.brand-modern .modal-header .icon-close {
    color: #5f6f85;
}

body.brand-modern .modal-header .icon-close:hover,
body.brand-modern .modal-header .icon-close:focus {
    color: var(--brand-accent);
}

body.brand-modern .modal-body p,
body.brand-modern .modal-body label,
body.brand-modern .modal-body .form-check-label {
    color: var(--brand-muted);
}

body.brand-modern .modal-body .form-control {
    min-height: 3.25rem;
    border: 1px solid rgba(36, 50, 74, 0.1);
    border-radius: 12px;
    background: #ffffff;
    color: var(--brand-ink);
    box-shadow: none;
}

body.brand-modern .modal-body .form-control:focus {
    border-color: rgba(47, 107, 255, 0.28);
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.1);
}

body.brand-modern .form-check-input {
    background-color: #ffffff;
    border-color: rgba(36, 50, 74, 0.18);
}

body.brand-modern .form-check-input:checked {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}

body.brand-modern .modal-body .btn.btn-bordered {
    border-color: rgba(47, 107, 255, 0.14);
    background: rgba(47, 107, 255, 0.05);
    color: var(--brand-ink);
}

body.brand-modern .modal-body .btn.btn-bordered:hover,
body.brand-modern .modal-body .btn.btn-bordered:focus {
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-soft) 100%);
    color: #ffffff;
    border-color: transparent;
}

body.brand-modern .footer-area {
    background: linear-gradient(180deg, #0b1220 0%, #08101c 100%) !important;
}

body.brand-modern .footer-area,
body.brand-modern .footer-area .footer-top,
body.brand-modern .footer-area .footer-bottom {
    background: transparent;
}

body.brand-modern .footer-area .footer-bottom {
    background: rgba(255, 255, 255, 0.02);
}

body.brand-modern .footer-area .footer-title,
body.brand-modern .footer-area .text-white {
    color: var(--brand-soft) !important;
}

body.brand-modern .footer-area .text-white-50,
body.brand-modern .footer-area .footer-items a,
body.brand-modern .footer-area .footer-items span,
body.brand-modern .footer-area .footer-items p,
body.brand-modern .footer-area .copyright-area {
    color: rgba(234, 240, 247, 0.76) !important;
}

body.brand-modern .footer-items a:hover,
body.brand-modern .footer-items a:focus,
body.brand-modern .footer-area .social-icons a:hover,
body.brand-modern .footer-area .social-icons a:focus {
    color: var(--brand-accent-soft) !important;
}

body.brand-modern .footer-area .copyright-area,
body.brand-modern .footer-area .footer-bottom {
    border-top: 1px solid rgba(127, 219, 255, 0.1);
}

body.brand-modern .not-found-card {
    background: linear-gradient(180deg, rgba(18, 28, 47, 0.88), rgba(12, 20, 34, 0.96));
    border-color: var(--brand-border);
}

body.brand-modern #scrollUp {
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent-soft) 100%);
    box-shadow: 0 16px 40px rgba(47, 107, 255, 0.26);
}

body.brand-modern .founder-note {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid rgba(127, 219, 255, 0.12);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(18, 28, 47, 0.88), rgba(12, 20, 34, 0.94)),
        radial-gradient(circle at top right, rgba(47, 107, 255, 0.14), transparent 34%);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.16);
}

body.brand-modern .about-area,
body.brand-modern .our-goal {
    position: relative;
    overflow: hidden;
}

body.brand-modern .about-area::before,
body.brand-modern .our-goal::before {
    content: "";
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(47, 107, 255, 0.08), transparent 70%);
    pointer-events: none;
    filter: blur(4px);
}

body.brand-modern .about-area::before {
    top: -8rem;
    right: -8rem;
}

body.brand-modern .our-goal::before {
    bottom: -10rem;
    left: -8rem;
}

body.brand-modern .about-visual {
    position: relative;
    min-height: 30rem;
    border-radius: 28px;
}

body.brand-modern .about-visual__orb,
body.brand-modern .about-visual__beam,
body.brand-modern .about-visual__grid,
body.brand-modern .about-visual__ring {
    position: absolute;
    pointer-events: none;
}

body.brand-modern .about-visual__orb {
    border-radius: 999px;
    filter: blur(8px);
}

body.brand-modern .about-visual__orb--top {
    top: 0.5rem;
    right: 1.5rem;
    width: 10rem;
    height: 10rem;
    background: radial-gradient(circle, rgba(47, 107, 255, 0.22), transparent 72%);
}

body.brand-modern .about-visual__orb--bottom {
    bottom: 1rem;
    left: 0.5rem;
    width: 9rem;
    height: 9rem;
    background: radial-gradient(circle, rgba(127, 219, 255, 0.18), transparent 72%);
}

body.brand-modern .about-visual__beam {
    top: 3rem;
    right: 18%;
    width: 9rem;
    height: 18rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(127, 219, 255, 0.24), rgba(127, 219, 255, 0));
    transform: rotate(24deg);
    opacity: 0.7;
}

body.brand-modern .about-visual__grid {
    inset: 18% 12% 12% 12%;
    border-radius: 24px;
    background-image:
        linear-gradient(rgba(36, 50, 74, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 50, 74, 0.08) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.12));
}

body.brand-modern .about-visual__ring {
    top: 2.5rem;
    left: 1rem;
    width: 15rem;
    height: 15rem;
    border-radius: 999px;
    border: 1px solid rgba(47, 107, 255, 0.12);
}

body.brand-modern .about-visual__panel {
    position: absolute;
    border: 1px solid rgba(36, 50, 74, 0.1);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 252, 0.98));
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(10px);
}

body.brand-modern .about-visual__panel--main {
    top: 4rem;
    right: 2rem;
    width: min(100%, 24rem);
    padding: 1.35rem;
}

body.brand-modern .about-visual__panel--stack {
    width: min(100%, 21rem);
    padding: 1.25rem;
}

body.brand-modern .about-visual__panel--back {
    top: 3rem;
    left: 1.5rem;
    opacity: 0.72;
}

body.brand-modern .about-visual__panel--front {
    top: 7rem;
    left: 4.5rem;
}

body.brand-modern .about-visual__eyebrow {
    margin-bottom: 0.95rem;
    color: var(--brand-accent);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.brand-modern .about-visual__line {
    height: 0.72rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(18, 28, 47, 0.16), rgba(18, 28, 47, 0.08));
}

body.brand-modern .about-visual__line + .about-visual__line {
    margin-top: 0.65rem;
}

body.brand-modern .about-visual__line--lg {
    width: 82%;
}

body.brand-modern .about-visual__line--sm {
    width: 54%;
}

body.brand-modern .about-visual__metrics {
    display: grid;
    gap: 0.85rem;
    margin-top: 1.2rem;
}

body.brand-modern .about-visual__metric {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(36, 50, 74, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
}

body.brand-modern .about-visual__metric-title {
    display: block;
    color: var(--brand-ink);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

body.brand-modern .about-visual__metric-copy {
    display: block;
    color: #5f6f85;
    font-size: 0.92rem;
    line-height: 1.6;
}

body.brand-modern .about-visual__chip {
    position: absolute;
    padding: 0.62rem 0.95rem;
    border: 1px solid rgba(47, 107, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--brand-ink);
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

body.brand-modern .about-visual__chip--top {
    top: 2rem;
    left: 3rem;
}

body.brand-modern .about-visual__chip--bottom {
    right: 3rem;
    bottom: 2rem;
}

body.brand-modern .about-visual__chip--left {
    left: 0.5rem;
    bottom: 4rem;
}

body.brand-modern .about-visual__chip--right {
    right: 1.5rem;
    top: 3rem;
}

body.brand-modern .about-visual__checklist {
    display: grid;
    gap: 0.9rem;
}

body.brand-modern .about-visual__check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--brand-ink);
    font-weight: 500;
}

body.brand-modern .about-visual__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-soft));
    box-shadow: 0 0 0 6px rgba(47, 107, 255, 0.08);
    flex: 0 0 auto;
}

body.brand-modern .founder-note__quote {
    position: relative;
    flex: 1 1 auto;
    color: var(--brand-soft);
    line-height: 1.8;
    padding-left: 1.2rem;
}

body.brand-modern .founder-note__mark {
    position: absolute;
    top: -0.5rem;
    left: 0;
    font-size: 2rem;
    line-height: 1;
    color: rgba(127, 219, 255, 0.52);
}

body.brand-modern .founder-note__person {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 13rem;
}

body.brand-modern .founder-note__avatar {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 16px;
    object-fit: cover;
    border: 1px solid rgba(127, 219, 255, 0.18);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.18);
}

body.brand-modern .founder-note__name {
    color: var(--brand-soft);
    font-weight: 600;
    letter-spacing: 0.01em;
}

body.brand-modern .founder-note__role {
    color: var(--brand-muted);
    font-size: 0.92rem;
}

@media (max-width: 991px) {
    body.brand-modern .navbar-expand .container.header {
        border-radius: 28px;
        padding: 1rem 1.1rem;
    }

    body.brand-modern .welcome-area {
        min-height: auto;
    }

    body.brand-modern .hero-ring {
        width: 24rem;
        height: 24rem;
        left: 52%;
    }

    body.brand-modern .hero-grid {
        height: 48%;
        background-size: 64px 64px;
        opacity: 0.18;
    }

    body.brand-modern .contact-box {
        padding: 1.5rem;
    }

    body.brand-modern .cta-ring {
        width: 18rem;
        height: 18rem;
    }

    body.brand-modern .cta-grid {
        height: 46%;
        background-size: 58px 58px;
    }

    body.brand-modern .founder-note {
        flex-direction: column;
    }

    body.brand-modern .founder-note__person {
        min-width: 0;
    }

    body.brand-modern .home-visual {
        min-height: 26rem;
    }

    body.brand-modern .home-visual__card--frame {
        left: 1rem;
        right: 1rem;
        width: auto;
    }

    body.brand-modern .home-visual__card--plan {
        left: 1rem;
    }

    body.brand-modern .home-visual__card--overlay {
        right: 1rem;
    }

    body.brand-modern .about-visual {
        min-height: 26rem;
    }

    body.brand-modern .about-visual__panel--main,
    body.brand-modern .about-visual__panel--front {
        right: 1rem;
        left: 1rem;
        width: auto;
    }

    body.brand-modern .about-visual__panel--back {
        left: 0.5rem;
        right: 3rem;
        width: auto;
    }

    body.brand-modern .about-visual__chip--top,
    body.brand-modern .about-visual__chip--left {
        left: 1rem;
    }

    body.brand-modern .about-visual__chip--bottom,
    body.brand-modern .about-visual__chip--right {
        right: 1rem;
    }
}

@media (max-width: 767px) {
    body.brand-modern .breadcrumb-area::before,
    body.brand-modern .blog .breadcrumb-area::before {
        background-size: 52px 52px;
        opacity: 0.16;
    }

    body.brand-modern .hero-atmosphere::before {
        background-size: 52px 52px;
        opacity: 0.18;
    }

    body.brand-modern .hero-orb-1 {
        width: 18rem;
        height: 18rem;
        top: -3rem;
        left: -4rem;
    }

    body.brand-modern .hero-orb-2 {
        width: 22rem;
        height: 22rem;
        right: -7rem;
    }

    body.brand-modern .hero-orb-3,
    body.brand-modern .hero-ring,
    body.brand-modern .hero-beam-2 {
        display: none;
    }

    body.brand-modern .hero-beam-1 {
        right: -2rem;
        width: 12rem;
        height: 18rem;
    }

    body.brand-modern .cta-ring,
    body.brand-modern .cta-beam-2 {
        display: none;
    }

    body.brand-modern .cta-orb-1 {
        width: 16rem;
        height: 16rem;
        top: -4rem;
        left: -3rem;
    }

    body.brand-modern .cta-orb-2 {
        width: 20rem;
        height: 20rem;
        right: -6rem;
        bottom: -7rem;
    }

    body.brand-modern .cta-beam-1 {
        right: 8%;
        width: 10rem;
        height: 16rem;
    }

    body.brand-modern .home-visual {
        min-height: 22rem;
    }

    body.brand-modern .home-visual__beam,
    body.brand-modern .home-visual__glow--bottom,
    body.brand-modern .home-visual__badge--bottom,
    body.brand-modern .home-visual__badge--right {
        display: none;
    }

    body.brand-modern .home-visual__grid {
        inset: 12% 4% 10% 4%;
        background-size: 36px 36px;
    }

    body.brand-modern .home-visual__card--frame,
    body.brand-modern .home-visual__card--plan,
    body.brand-modern .home-visual__card--overlay {
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        padding: 1rem;
    }

    body.brand-modern .home-visual__card--frame {
        top: 2.5rem;
    }

    body.brand-modern .home-visual__card--plan {
        top: 2.2rem;
    }

    body.brand-modern .home-visual__card--overlay {
        bottom: 1.8rem;
    }

    body.brand-modern .home-visual__badge {
        padding: 0.5rem 0.78rem;
        font-size: 0.76rem;
    }

    body.brand-modern .about-visual {
        min-height: 23rem;
    }

    body.brand-modern .about-visual__beam,
    body.brand-modern .about-visual__ring,
    body.brand-modern .about-visual__orb--bottom {
        display: none;
    }

    body.brand-modern .about-visual__grid {
        inset: 16% 6% 10% 6%;
        background-size: 34px 34px;
    }

    body.brand-modern .about-visual__panel--main,
    body.brand-modern .about-visual__panel--front {
        top: 3rem;
        padding: 1.1rem;
    }

    body.brand-modern .about-visual__panel--back {
        top: 1.5rem;
    }

    body.brand-modern .about-visual__chip {
        padding: 0.5rem 0.78rem;
        font-size: 0.76rem;
    }
}

@keyframes heroFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, 32px, 0) scale(1.1);
    }
}

@keyframes heroBackgroundFlow {
    0%,
    100% {
        background-position: 0% 0%, 100% 0%, 50% 50%;
    }

    50% {
        background-position: 10% 8%, 88% 12%, 50% 50%;
    }
}

@keyframes heroAccentFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(-6px, 10px, 0) rotate(6deg);
    }
}

@keyframes heroAtmosphereDrift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-6px, -18px, 0) scale(1.035);
    }
}

@keyframes heroOverlayPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.82;
        transform: scale(1.04);
    }
}

@keyframes heroBeamPulse {
    0%,
    100% {
        transform: rotate(-24deg) translate3d(0, 0, 0);
        opacity: 0.22;
    }

    50% {
        transform: rotate(-20deg) translate3d(14px, 12px, 0);
        opacity: 0.34;
    }
}

@keyframes heroShimmerSweep {
    0%,
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    50% {
        opacity: 0.9;
        transform: translate3d(-10px, 6px, 0);
    }
}

@keyframes heroGridShift {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 0 88px, 88px 0;
    }
}

@keyframes heroGridPulse {
    0%,
    100% {
        opacity: 0.16;
    }

    50% {
        opacity: 0.34;
    }
}

@keyframes heroAmbientGridDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        background-position: 0 0, 0 0;
    }

    50% {
        transform: translate3d(0, -6px, 0) scale(1.01);
        background-position: 24px 18px, 24px 18px;
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
        background-position: 48px 36px, 48px 36px;
    }
}