/* Base Styles */
body {
    background-color: #F7F7F5;
    color: #171717;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* SPA View Transitions */
.page-view {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.page-view.active {
    display: block;
}

.page-view.fade-in {
    opacity: 1;
}

/* Scroll Animations (Intersection Observer) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Custom UI Elements */
.bg-grid {
    background-image: radial-gradient(rgba(23, 23, 23, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

.nav-link {
    position: relative;
}
.nav-link.active-link {
    color: #C8102E;
    font-weight: 600;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background-color: #C8102E;
    transition: width 0.3s ease;
}
.nav-link.active-link::after,
.nav-link:hover::after {
    width: 100%;
}

.selector-content {
    transition: opacity 0.3s ease;
}

/* Premium Service Card Hover Effect */
.service-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border-bottom: 4px solid transparent;
}
.service-card:hover {
    transform: translateY(-8px);
    border-bottom-color: #C8102E;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
}
.service-card .service-icon {
    transition: all 0.4s ease;
    color: #171717; /* Charcoal */
}
.service-card:hover .service-icon {
    color: #D4AF37; /* Gold */
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    transform: scale(1.1);
}

/* Industry Badge Hover */
.industry-badge {
    transition: all 0.3s ease;
}
.industry-badge:hover {
    border-color: #C8102E;
    background-color: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(200, 16, 46, 0.15);
    transform: translateY(-3px);
}
.industry-badge:hover i {
    color: #D4AF37;
}
/* Dark red visual direction inspired by Neural Flow State. */
body, main, .page-view { background: #130101 !important; color: #fdfaf7; }
header { background: transparent; }
header nav { color: #cdbbb7; }
header .nav-link.active-link, header .nav-link:hover { color: #ff7259; }
header .nav-link::after { background: #ff5637; }
header img { background: transparent; padding: 0; }
.site-header { padding: 12px 0; }
.header-shell {
    height: 72px; border: 1px solid #ffad9124; border-radius: 20px;
    background: linear-gradient(110deg, #210806e8, #130101e8); backdrop-filter: blur(20px);
    box-shadow: inset 0 1px 0 #fff1, 0 18px 60px #0003; transition: height .3s, border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled .header-shell { height: 64px; border-color: #ff8b6045; box-shadow: inset 0 1px 0 #fff1, 0 14px 48px #0008; }
.brand-lockup { position: relative; display: flex; align-items: center; width: min(250px, 42vw); height: 64px; isolation: isolate; }
.brand-lockup img { position: relative; z-index: 1; display: block; width: 100%; height: 60px; object-fit: contain; object-position: left center; filter: drop-shadow(0 8px 18px #0008); transition: transform .35s, filter .35s; }
.brand-glow { position: absolute; inset: 15% 8%; z-index: -1; border-radius: 50%; background: #dc240038; filter: blur(22px); transition: background .35s, scale .35s; }
.brand-lockup:hover img { transform: translateY(-2px); filter: drop-shadow(0 10px 22px #000b) drop-shadow(0 0 10px #ffad9138); }
.brand-lockup:hover .brand-glow { background: #ff563752; scale: 1.12; }
.desktop-nav { gap: 5px; padding: 5px; border: 1px solid #ffad911a; border-radius: 999px; background: #0c010182; }
.desktop-nav .nav-link { height: auto; padding: 10px 15px; border-radius: 999px; }
.desktop-nav .nav-link::after { display: none; }
.desktop-nav .nav-link.active-link { color: #fff; background: linear-gradient(135deg, #6f160d, #3b0905); box-shadow: inset 0 1px 0 #ffad9130, 0 8px 18px #0005; }
.header-cta { display: flex; align-items: center; gap: 10px; background: linear-gradient(120deg, #f03413, #b41705) !important; box-shadow: inset 0 1px 0 #ffb1976b, 0 10px 28px #dc240035; }
.header-cta i { transition: transform .3s; }
.header-cta:hover i { transform: translate(2px, -2px); }
.text-brand-charcoal { color: #fdfaf7; }
.text-brand-gold { color: #ff9a84; }
.page-view .bg-white, #mobile-menu { background: #24100e !important; }
.page-view .bg-offWhite { background: #1b0806 !important; }
.page-view .bg-charcoal, .page-view .bg-softBlack, footer { background: #100302 !important; }
.page-view .text-charcoal, #mobile-menu, #mobile-menu-btn { color: #fdfaf7 !important; }
.page-view .text-gray-700, .page-view .text-gray-600, #mobile-menu .text-gray-600 { color: #d1bdb8 !important; }
.page-view .text-gray-500, .page-view .text-gray-400, footer .text-gray-500 { color: #bba19b !important; }
.page-view .text-gold, .page-view .text-appleRed { color: #ff9a84 !important; }
.page-view [class*="border-gray-"] { border-color: #492723 !important; }
.page-view .border-charcoal { border-color: #80514a !important; }
.bg-appleRed { background: #dc2400 !important; }
.bg-appleRed:hover { background: #b81e00 !important; }
.page-view a[class*="rounded-md"], header a[class*="rounded-md"], #submitBtn { border-radius: 999px; }
.font-display { font-family: 'Inter', sans-serif; letter-spacing: -.045em; }
#view-home > section:first-child {
    min-height: 88vh;
    background: radial-gradient(ellipse at 50% 95%, #a30e02 0%, #4c0403 32%, #130101 72%) !important;
}
#view-home h1 { font-weight: 600; max-width: 1050px; }
#view-home h1 span { background-image: linear-gradient(100deg, #ffad91, #ff4a26); }
.flow-visual { position: relative; width: min(720px, 100%); height: 290px; margin: 56px auto 0; }
.flow-core {
    position: absolute; width: 180px; height: 180px; left: 50%; top: 48%; transform: translate(-50%, -50%);
    border-radius: 50%; border: 1px solid #ff947160;
    background: radial-gradient(circle at 30% 25%, #ffab83, #dc2400 25%, #4c0403 65%, #130101 90%);
    box-shadow: inset -18px -20px 30px #130101, 0 0 90px #ff351c50;
}
.flow-core::after { content: ''; position: absolute; inset: -35px -80px; border: 1px solid #ff9a8450; border-radius: 50%; transform: rotate(-24deg); }
.flow-card { position: absolute; padding: 16px 22px; border: 1px solid #ffad9130; border-radius: 16px; background: #210704b3; backdrop-filter: blur(16px); text-align: left; box-shadow: 0 18px 50px #13010160; }
.flow-card small { display: block; color: #d1bdb8; font-size: 11px; margin-bottom: 5px; letter-spacing: .09em; text-transform: uppercase; }
.flow-card strong { font-size: 15px; font-weight: 500; color: #fdfaf7; }
.flow-card:first-of-type { left: 0; top: 20px; }
.flow-card:nth-of-type(2) { right: 0; top: 70px; }
.flow-card:nth-of-type(3) { left: 12%; bottom: 0; }
@media (max-width: 640px) {
    .flow-visual { height: 250px; margin-top: 36px; }
    .flow-core { width: 125px; height: 125px; }
    .flow-core::after { inset: -20px -45px; }
    .flow-card { padding: 12px; }
    .flow-card strong { font-size: 12px; }
    .flow-card small { font-size: 9px; }
    .flow-card:nth-of-type(2) { top: 100px; }
}
.bg-grid { background-image: radial-gradient(rgba(255, 173, 145, .16) 1px, transparent 1px); }
.service-card, .industry-badge, .page-view [class*="rounded-2xl"] {
    background-image: linear-gradient(140deg, rgba(255,255,255,.045), transparent);
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.service-card .service-icon { color: #ff9a84; }
.industry-badge:hover { background-color: #39120c; }
input, select, textarea { color-scheme: dark; }
input:focus, select:focus, textarea:focus { outline: 2px solid #ff7259; outline-offset: 2px; }
#form-success { background: #12281b !important; color: #c7f5d6; }
#form-error { background: #3b100d !important; color: #ffd1c6; }
@keyframes flow-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes flow-orbit { from { transform: rotate(-24deg); } to { transform: rotate(336deg); } }
@keyframes card-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.flow-core { animation: flow-float 7s ease-in-out infinite; }
.flow-core::after { animation: flow-orbit 24s linear infinite; }
.flow-card { animation: flow-float 6s ease-in-out infinite; transition: border-color .25s, box-shadow .25s; }
.flow-card:nth-of-type(2) { animation-delay: -2s; }
.flow-card:nth-of-type(3) { animation-delay: -4s; }
.flow-visual.motion-paused *, .flow-visual.motion-paused *::after { animation-play-state: paused; }
.motion-toggle { display: block; margin: 20px auto 0; color: #d1bdb8; font-size: 12px; border-bottom: 1px solid #80514a; padding: 4px; }
.reveal.active > :is(.service-card, .industry-badge, [class*="rounded-2xl"]) { animation: card-enter .7s cubic-bezier(.16,1,.3,1) backwards; }
.reveal.active > :nth-child(2) { animation-delay: .08s; }
.reveal.active > :nth-child(3) { animation-delay: .16s; }
.reveal.active > :nth-child(4) { animation-delay: .24s; }
.reveal.active > :nth-child(n+5) { animation-delay: .32s; }
.page-view a[class*="rounded-md"], header a[class*="rounded-md"], #submitBtn {
    transition: transform .25s, background-color .25s, box-shadow .25s;
}
.page-view a[class*="rounded-md"]:active, header a[class*="rounded-md"]:active, #submitBtn:active { transform: scale(.97); }
a:focus-visible, button:focus-visible { outline: 2px solid #ffad91; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
    .flow-card:hover { border-color: #ff9a84; box-shadow: 0 10px 45px #dc24004a; }
    .service-card:hover, .industry-badge:hover { border-color: #ff7259; box-shadow: 0 16px 45px #dc240026; }
    .page-view a[class*="rounded-md"]:hover, header a[class*="rounded-md"]:hover, #submitBtn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 28px #dc240045; }
}
/* Stronger depth and a pointer-lit surface, without an animation library. */
#view-home > section:first-child { padding-top: 100px; padding-bottom: 64px; }
#view-home h1 { font-size: clamp(2.7rem, 6.6vw, 6.3rem); line-height: 1.02; font-weight: 700; text-wrap: balance; }
#view-home h1 span { background-image: linear-gradient(110deg, #ffe3c8, #ff8b60 45%, #ff3518); }
.flow-visual { width: min(920px, 100%); height: 360px; isolation: isolate; perspective: 1000px; }
.flow-visual::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at var(--light-x, 50%) var(--light-y, 50%), #ff492c40, transparent 60%);
}
.flow-core { width: 230px; height: 230px; box-shadow: inset -24px -30px 45px #130101, 0 0 100px #ff351c70, 0 0 180px #dc240035; }
.flow-core::before { content: ''; position: absolute; inset: -60px -140px; border-radius: 50%; border: 1px solid #ffbda14a; transform: rotate(28deg); box-shadow: 0 0 24px #ff492c20; }
.flow-core::after { inset: -45px -100px; border-width: 2px; border-top-color: #ffd1ab; box-shadow: 0 -8px 30px #ff492c30; }
.flow-card { padding: 22px 28px; border-radius: 20px; background: linear-gradient(130deg, #6c2a2066, #190403df); box-shadow: inset 0 1px 0 #ffccab30, 0 24px 60px #130101a0; }
.flow-card strong { font-size: 18px; }
.flow-card:first-of-type { top: 35px; }
.flow-card:nth-of-type(2) { top: 125px; }
.flow-card:nth-of-type(3) { bottom: 15px; left: 16%; }
.service-card { position: relative; overflow: hidden; }
.service-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(260px circle at var(--light-x, 50%) var(--light-y, 50%), #ff9a8426, transparent 75%);
    transition: opacity .3s;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .service-card:hover { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-8px); }
    .service-card:hover::before { opacity: 1; }
    .flow-visual .flow-core { rotate: y var(--tilt-y, 0deg); }
    .flow-card:hover { scale: 1.035; }
}
.flow-card { transition: scale .35s, border-color .35s, box-shadow .35s; }
@media (max-width: 640px) {
    #view-home > section:first-child { padding-top: 60px; }
    .flow-visual { height: 290px; }
    .flow-core { width: 145px; height: 145px; }
    .flow-core::before { inset: -32px -66px; }
    .flow-core::after { inset: -22px -52px; }
    .flow-card { padding: 14px; max-width: 58%; }
    .flow-card strong { font-size: 13px; }
    .flow-card:nth-of-type(2) { top: 120px; }
    .flow-card:nth-of-type(3) { left: 5%; bottom: 0; }
}
/* Each business page gets its own lighting and visual hierarchy. */
#view-services > section:first-child,
#view-industries > section:first-child,
#view-digital-solutions > section:first-child,
#view-contact > section:first-child { position: relative; isolation: isolate; }
#view-services > section:first-child { background: radial-gradient(ellipse at 15% 0%, #701c124f, transparent 42%), #130101 !important; }
#view-industries > section:first-child { background: radial-gradient(ellipse at 85% 15%, #a30e0250, transparent 50%); }
#view-digital-solutions > section:first-child { background: radial-gradient(ellipse at 50% 90%, #dc240050, transparent 65%), linear-gradient(150deg, #130101, #300b07); }
#view-contact > section:first-child { background: radial-gradient(ellipse at 25% 50%, #dc240038, transparent 60%); }
#view-services > section:first-child::before,
#view-industries > section:first-child::before,
#view-digital-solutions > section:first-child::before,
#view-contact > section:first-child::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .38;
    background-image: linear-gradient(#ffad910b 1px, transparent 1px), linear-gradient(90deg, #ffad910b 1px, transparent 1px);
    background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, transparent 74%);
}
#view-services > section:first-child::after,
#view-industries > section:first-child::after,
#view-digital-solutions > section:first-child::after,
#view-contact > section:first-child::after {
    content: ''; position: absolute; width: 420px; height: 420px; right: -180px; top: -180px; z-index: -1;
    border: 1px solid #ffad912e; border-radius: 50%; box-shadow: 0 0 0 50px #ffad9108, 0 0 0 110px #ffad9105;
}
:is(#view-services, #view-industries) h3 { font-size: clamp(2.4rem, 5.5vw, 4.8rem); line-height: 1.08; text-wrap: balance; }
:is(#view-services, #view-industries, #view-digital-solutions) > section:first-child > div > .text-center::after {
    content: ''; display: block; width: 100px; height: 2px; margin: 28px auto 0;
    background: linear-gradient(90deg, transparent, #ffad91, #dc2400, transparent);
    box-shadow: 0 0 22px #ff563780;
}
#view-digital-solutions h3 span { background-image: linear-gradient(110deg, #ffe3c8, #ff8b60, #ff3518); }
.industry-badge, .effect-panel { position: relative; overflow: hidden; }
.industry-badge::before, .effect-panel::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(320px circle at var(--light-x, 50%) var(--light-y, 50%), #ff9a8429, transparent 75%);
    transition: opacity .3s;
}
.industry-badge { min-height: 165px; background-image: linear-gradient(145deg, #ffad910c, transparent); }
.industry-badge i { filter: drop-shadow(0 4px 12px #dc240035); transition: transform .35s, filter .35s; }
.effect-panel { transition: box-shadow .35s, border-color .35s; }
#view-contact .effect-panel { border-color: #864336 !important; box-shadow: 0 30px 100px #0008, 0 0 65px #dc240015; }
#view-contact input, #view-contact select, #view-contact textarea { transition: border-color .25s, box-shadow .25s, background-color .25s; }
#view-contact :is(input, select, textarea):focus { box-shadow: 0 0 25px #dc240025; background-color: #29100b !important; }
@media (hover: hover) and (pointer: fine) {
    .industry-badge:hover::before, .effect-panel:hover::before { opacity: 1; }
    .effect-panel:hover { border-color: #a45746 !important; box-shadow: 0 25px 80px #0008, 0 0 35px #dc240020; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .industry-badge:hover { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px); }
    .industry-badge:hover i { transform: translateY(-4px) scale(1.12); filter: drop-shadow(0 0 16px #ff563760); }
}
@media (max-width: 640px) { .industry-badge { min-height: 145px; } }
/* Section entrances and visual anchors on the inner pages. */
@keyframes heading-enter { from { opacity: 0; translate: 0 20px; filter: blur(5px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.page-view.fade-in > section:first-child h3,
#view-contact.fade-in h2 { animation: heading-enter .8s cubic-bezier(.16,1,.3,1) backwards; }
#view-services .grid { counter-reset: service; }
#view-services .service-card { counter-increment: service; }
#view-services .service-card::after {
    content: counter(service, decimal-leading-zero); position: absolute; top: 26px; right: 26px;
    font-size: 12px; letter-spacing: .12em; color: #ba8173; font-variant-numeric: tabular-nums;
}
#view-services .service-card:focus-within,
.industry-badge:focus-visible { border-color: #ff9a84 !important; box-shadow: 0 0 35px #dc240030; }
#view-digital-solutions > section:last-child .grid > div { border-top: 2px solid #864336 !important; }
#view-digital-solutions > section:last-child .grid > div::after {
    content: ''; position: absolute; top: -5px; left: 24px; width: 8px; height: 8px;
    border-radius: 50%; background: #ffad91; box-shadow: 0 0 16px #ff5637;
}
#view-contact form:focus-within { box-shadow: inset 0 0 65px #dc24000c; }
#view-contact form { transition: box-shadow .3s; }
.site-footer { overflow: hidden; border-top: 1px solid #7c2d234f; background: radial-gradient(circle at 12% 0%, #65160d55, transparent 32%), #0b0101 !important; }
.site-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .25; background-image: radial-gradient(#ffad9126 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, #000, transparent 55%); }
.site-footer > div { position: relative; z-index: 1; }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 64px; padding: clamp(28px, 5vw, 52px); border: 1px solid #ffad9135; border-radius: 28px; background: linear-gradient(120deg, #521008d9, #210504d9 60%, #130101); box-shadow: inset 0 1px 0 #fff1, 0 30px 90px #0006; overflow: hidden; }
.footer-cta::after { content: ''; position: absolute; width: 260px; height: 260px; right: 14%; top: -180px; border: 1px solid #ffad9160; border-radius: 50%; box-shadow: 0 0 60px #dc240040; }
.footer-cta span { display: block; margin-bottom: 10px; color: #ffad91; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.footer-cta h2 { max-width: 720px; font-size: clamp(1.8rem, 4vw, 3.5rem); line-height: 1.08; font-weight: 650; letter-spacing: -.045em; text-wrap: balance; }
.footer-cta > a { flex: none; display: inline-flex; align-items: center; gap: 12px; padding: 15px 21px; border-radius: 999px; color: #180201; background: #fdfaf7; font-size: 13px; font-weight: 700; transition: transform .3s, box-shadow .3s; }
.footer-cta > a:hover { transform: translateY(-3px); box-shadow: 0 12px 34px #0006; }
.footer-brand { position: relative; display: block; width: min(310px, 80vw); margin-bottom: 24px; }
.footer-brand img { width: 100%; height: 90px; object-fit: contain; object-position: left; filter: drop-shadow(0 10px 25px #000a); }
.footer-email { display: inline-block; margin-top: 24px; color: #ffad91; font-size: 13px; border-bottom: 1px solid #ffad9140; padding-bottom: 4px; }
.footer-email:hover { color: #fff; }
.footer-status { display: inline-flex; align-items: center; gap: 9px; color: #cdbbb7; }
.footer-status span { width: 8px; height: 8px; border-radius: 50%; background: #49d17d; box-shadow: 0 0 12px #49d17d; }
@media (max-width: 1023px) {
    .site-header { padding: 8px 12px; }
    .header-shell { height: 68px; border-radius: 17px; }
    .brand-lockup { width: min(220px, 62vw); }
    .brand-lockup img { height: 56px; }
}
@media (max-width: 700px) {
    .footer-cta { align-items: flex-start; flex-direction: column; }
    .footer-cta::after { right: -130px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
    .motion-toggle { display: none; }
}