/* ═══ Modern layer: loaded on every page, after everything else ═══ */

/* Scroll progress */
.mx-progress { position: fixed; left: 0; top: 0; z-index: 10000; width: 100%; height: 3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--orange), #fbbf24); box-shadow: 0 0 12px rgba(249,115,22,.6); pointer-events: none; }

/* Glass header once you scroll */
.site-nav { transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.site-nav.mx-glass { background: rgba(255,255,255,.82) !important; -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 1px 0 rgba(17,31,62,.06), 0 10px 30px -18px rgba(17,31,62,.35); }

/* Reveal on scroll */
.mx-reveal-on .mx-r { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1) var(--mx-d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--mx-d, 0ms); }
.mx-reveal-on .mx-r.mx-in { opacity: 1; transform: none; }

/* Aurora behind dark heroes */
.h-hero, .twl-quote-band { position: relative; isolation: isolate; }
.mx-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mx-aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: mxFloat 18s ease-in-out infinite alternate; }
.mx-aurora i:nth-child(1) { width: 520px; height: 520px; left: -140px; top: -160px; background: rgba(249,115,22,.35); }
.mx-aurora i:nth-child(2) { width: 460px; height: 460px; right: -120px; top: 20%; background: rgba(59,130,246,.28); animation-duration: 22s; animation-delay: -6s; }
.mx-aurora i:nth-child(3) { width: 380px; height: 380px; left: 40%; bottom: -220px; background: rgba(168,85,247,.18); animation-duration: 26s; animation-delay: -12s; }
.ind2-hero .mx-aurora i { opacity: .28; }
@keyframes mxFloat { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.1); } 100% { transform: translate(-40px, 70px) scale(.95); } }

/* Cursor spotlight on dark sections */
.mx-has-spot { position: relative; }
.mx-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(249,115,22,.12), transparent 60%); }
.mx-has-spot:hover > .mx-spot { opacity: 1; }
.mx-has-spot > .h-wrap, .mx-has-spot > .container, .mx-has-spot > div:not(.mx-spot):not(.mx-aurora) { position: relative; z-index: 1; }

/* Card glow that follows the cursor */
.mx-glow { position: relative; }
.mx-glow__l { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), rgba(249,115,22,.10), transparent 55%); z-index: 0; }
.mx-glow:hover > .mx-glow__l { opacity: 1; }
.h-navy .mx-glow__l, .sv2-process .mx-glow__l { background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 50%), rgba(249,115,22,.16), transparent 60%); }

/* Magnetic buttons ease back smoothly */
.btn-primary { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background-color .2s ease; will-change: transform; }

/* Section labels: a small animated accent */
.section-label::before { background-size: 200% 100% !important; }

/* ── Homepage & shared section upgrades ─────────────────────────────────── */

/* Big stat cards: subtle glow */
.h-bigstat { position: relative; overflow: hidden; background: radial-gradient(380px 200px at 100% 0%, rgba(249,115,22,.22), transparent 70%), linear-gradient(160deg, #1b2c55, var(--navy)) !important; box-shadow: 0 30px 60px -36px rgba(17,31,62,.7); }

/* Statement band: animated shimmer on the highlighted words */
.h-statement__text span { background: linear-gradient(90deg, var(--orange-dark), #f97316, #fb923c, var(--orange-dark)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: mxShimmer 6s linear infinite; }
@keyframes mxShimmer { to { background-position: 300% 0; } }

/* Homepage how-it-works: same energy as the service pages */
.h-navy:not(.sv2-process) .h-step { border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.14); box-shadow: 0 24px 48px -32px rgba(0,0,0,.6); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.h-navy:not(.sv2-process) .h-step:hover { transform: translateY(-6px); border-color: rgba(249,115,22,.55); box-shadow: 0 30px 60px -30px rgba(249,115,22,.45); }
.h-navy:not(.sv2-process) .h-step__num { filter: drop-shadow(0 0 18px rgba(249,115,22,.35)); }
.h-navy:not(.sv2-process) .h-step__meta { display: inline-flex; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(249,115,22,.15); color: #fdba74; }

/* Journey / weak spot steps */
.h-journey__step { border-radius: 18px; transition: transform .25s ease; }
.h-journey__step:hover { transform: translateY(-4px); }
.h-journey__stat { position: relative; overflow: hidden; }
.h-journey__stat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-100%); }
.h-journey__step:hover .h-journey__stat::after { transform: translateX(100%); transition: transform .8s ease; }

/* Comparison table: the winning column glows */
.h-compare { border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(17,31,62,.55); }
.h-compare__row { transition: background-color .2s ease; }
.h-compare__row:not(.h-compare__row--head):hover { background: #fffaf5; }
.h-compare__row--head .h-compare__us { background: linear-gradient(135deg, var(--orange-dark), #ea580c) !important; color: #fff !important; }

/* Recent work cards */
.h-case { border-radius: 20px; transition: transform .3s ease, box-shadow .3s ease; }
.h-case:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -44px rgba(17,31,62,.55); }

/* Blog cards */
.h-post { border-radius: 20px; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.h-post:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(17,31,62,.5); }
.h-post__img img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.h-post:hover .h-post__img img { transform: scale(1.05); }

/* Industries list: hover slide with glowing bar */
.h-ind__list a { position: relative; transition: background-color .25s ease, padding-left .25s ease; }
.h-ind__list a::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--orange); transform: scaleY(0); transition: transform .25s ease; box-shadow: 0 0 12px rgba(249,115,22,.8); }
.h-ind__list a:hover { background: rgba(255,255,255,.04); padding-left: 14px; }
.h-ind__list a:hover::before { transform: scaleY(1); }

/* FAQ: smooth, clearer open state */
.h-faq__item { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; }
.h-faq__item:hover { border-color: #fdba74; }
.h-faq__item[open] { box-shadow: 0 24px 48px -36px rgba(249,115,22,.55); }
.h-faq__item[open] > *:not(summary) { animation: mxDrop .35s ease both; }
@keyframes mxDrop { from { opacity: 0; transform: translateY(-6px); } }

/* Forms: focus glow everywhere */
main input[type=text]:focus, main input[type=email]:focus, main input[type=tel]:focus, main input[type=url]:focus, main textarea:focus, main select:focus { border-color: var(--orange) !important; box-shadow: 0 0 0 4px rgba(249,115,22,.16) !important; outline: none; }

/* Hero form card: animated gradient edge */
@property --mx-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.h-hero .qf, .twl-quote-band .qf { border: 2px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--mx-a), #e2e8f0 0deg, #f97316 70deg, #fbbf24 110deg, #e2e8f0 180deg, #e2e8f0 360deg) border-box !important; animation: mxSpin 6s linear infinite; }
@keyframes mxSpin { to { --mx-a: 360deg; } }

/* Footer: glowing top edge and a soft grid */
footer { position: relative; overflow: hidden; }
footer::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000, transparent 80%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); }
footer a { transition: color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .mx-aurora i, .h-statement__text span, .h-hero .qf, .twl-quote-band .qf { animation: none !important; }
  .mx-progress { display: none; }
}
@media (max-width: 720px) {
  .mx-aurora i { filter: blur(50px); }
}

/* Services overview: visuals float gently, rows feel alive */
.sv-visual > * { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.sv-row:hover .sv-visual > * { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 50px 90px -50px rgba(17,31,62,.6); }
.sv-jump a, .sv-jump li { transition: transform .2s ease, box-shadow .2s ease; }
.sv-jump a:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(17,31,62,.45); }

/* About: cards lift */
.ab-values > *, .ab-pillar, .ab-steps > * { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ab-values > *:hover, .ab-pillar:hover, .ab-steps > *:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(17,31,62,.45); }

/* Pricing: system tabs and cards */
.p-systab { transition: transform .2s ease, box-shadow .2s ease; }
.p-systab:hover { transform: translateY(-2px); }
.p-step, .p-sys__list > * { transition: transform .25s ease, box-shadow .25s ease; }
.p-step:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(17,31,62,.45); }

/* Industries hub cards */
.ih-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ih-card:hover { transform: translateY(-5px); box-shadow: 0 28px 56px -34px rgba(17,31,62,.5); border-color: #fdba74; }

/* Website screenshots in browser frames: scroll slowly on hover, return quickly */
.portfolio-scroll-img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1) !important; }
.h-case:hover .portfolio-scroll-img, .portfolio-frame:hover .portfolio-scroll-img, .combined-result-card:hover .portfolio-scroll-img { transition: transform 22s cubic-bezier(.35,0,.65,1) !important; }

/* Homepage "Common marketing problems": the quotes in red italics */
.h-problems:not(.sv2 .h-problems) .h-problem h3 { color: #b91c1c; font-style: italic; }