:root {
--mg-bg: #f7f7f4;
--mg-surface: #ffffff;
--mg-surface-soft: #efefea;
--mg-ink: #121313;
--mg-muted: #62645f;
--mg-dark: #101112;
--mg-dark-soft: #191b1c;
--mg-accent: #d8a72e;
--mg-accent-dark: #94701c;
--mg-line: rgba(18, 19, 19, .12);
--mg-line-dark: rgba(255, 255, 255, .13);
--mg-radius: 22px;
--mg-radius-lg: 32px;
--mg-shadow: 0 18px 60px rgba(18, 19, 19, .08);
--mg-shell: 1180px;
}
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body.magnelli-site { margin: 0; overflow-x: hidden; background: var(--mg-bg); color: var(--mg-ink); font-family: Geist, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.magnelli-site * { box-sizing: border-box; }
.magnelli-site img { max-width: 100%; height: auto; }
.magnelli-site a { color: inherit; }
.mg-shell { width: min(var(--mg-shell), calc(100% - 48px)); margin-inline: auto; }
.mg-skip { position: fixed; top: -80px; left: 16px; z-index: 99999; padding: 12px 18px; border-radius: 10px; background: #fff; color: #000 !important; }
.mg-skip:focus { top: 12px; }
.mg-main { min-height: 65vh; } .mg-header { position: fixed; inset: 0 0 auto; z-index: 1000; border-bottom: 1px solid transparent; background: rgba(16, 17, 18, .72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background .25s, border-color .25s; }
.mg-header.is-compact { border-color: var(--mg-line-dark); background: rgba(16, 17, 18, .94); }
.mg-header__inner { display: flex; align-items: center; min-height: 82px; gap: 24px; transition: min-height .25s; }
.mg-header.is-compact .mg-header__inner { min-height: 68px; }
.mg-brand { flex: 0 0 auto; color: #fff !important; font-size: 1.14rem; font-weight: 900; letter-spacing: .12em; text-decoration: none !important; }
.mg-brand span { color: var(--mg-accent); }
.mg-nav { display: flex; align-items: center; justify-content: flex-end; gap: 23px; margin-left: auto; }
.mg-nav a { position: relative; color: #d9dad7; font-size: .84rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.mg-nav a:not(.mg-nav__cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: var(--mg-accent); transition: right .2s; }
.mg-nav a:hover::after, .mg-nav a:focus-visible::after { right: 0; }
.mg-nav__cta { padding: 11px 16px; border-radius: 999px; background: var(--mg-accent); color: #15130d !important; }
.mg-nav__cta:hover, .mg-nav__cta:focus-visible { background: #e6ba4c; transform: translateY(-1px); }
.mg-nav-tools { position: relative; }
.mg-nav-tools__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #d9dad7; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 650; }
.mg-nav-tools__toggle span { color: var(--mg-accent); font-size: .9rem; transition: transform .18s; }
.mg-nav-tools.is-open .mg-nav-tools__toggle span { transform: rotate(180deg); }
.mg-nav-tools__menu { position: absolute; top: calc(100% + 18px); left: 50%; min-width: 220px; display: grid; gap: 3px; padding: 9px; border: 1px solid var(--mg-line-dark); border-radius: 14px; background: rgba(21,23,24,.98); box-shadow: 0 20px 50px rgba(0,0,0,.34); opacity: 0; pointer-events: none; transform: translate(-50%, -6px); transition: opacity .18s, transform .18s; }
.mg-nav-tools__menu::before { content: ""; position: absolute; inset: -18px 0 auto; height: 18px; }
.mg-nav-tools__menu a { padding: 11px 12px; border-radius: 9px; font-size: .84rem; }
.mg-nav-tools__menu a::after { display: none; }
.mg-nav-tools__menu a:hover, .mg-nav-tools__menu a:focus-visible { background: rgba(216,167,46,.12); color: #fff; }
.mg-nav-tools.is-open .mg-nav-tools__menu { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.mg-menu-button { display: none; width: 44px; height: 44px; margin-left: auto; padding: 11px; border: 1px solid var(--mg-line-dark); border-radius: 12px; background: transparent; }
.mg-menu-button > span:not(.screen-reader-text) { display: block; height: 1px; margin: 5px 0; background: #fff; } .mg-section { position: relative; padding: 112px 0; }
.mg-section[id] { scroll-margin-top: 82px; }
.mg-section--white { background: var(--mg-surface); }
.mg-section--soft { background: var(--mg-surface-soft); }
.mg-section--dark { background: var(--mg-dark); color: #f8f8f5; }
.mg-eyebrow { margin: 0 0 18px !important; color: var(--mg-accent-dark); font-size: .75rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.mg-section--dark .mg-eyebrow, .mg-hero .mg-eyebrow { color: #e3bc5b; }
.mg-title { max-width: 820px; margin: 0 !important; font-size: clamp(2.25rem, 5vw, 4.7rem) !important; line-height: 1.02 !important; letter-spacing: -.052em !important; }
.mg-title--center { margin-inline: auto !important; text-align: center; }
.mg-lead { max-width: 720px; margin: 24px 0 0 !important; color: var(--mg-muted); font-size: clamp(1.04rem, 1.6vw, 1.2rem); line-height: 1.72; }
.mg-section--dark .mg-lead { color: #b8bab5; }
.mg-section-head { display: grid; grid-template-columns: 1.25fr .75fr; gap: 70px; align-items: end; margin-bottom: 54px; }
.mg-section-head .mg-lead { margin: 0 !important; }
.mg-button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.mg-button .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 13px 20px; border: 1px solid transparent; border-radius: 999px; font-size: .94rem; font-weight: 800; text-decoration: none; transition: transform .2s, background .2s, border-color .2s, box-shadow .2s; }
.mg-button .wp-block-button__link:hover, .mg-button .wp-block-button__link:focus-visible { transform: translateY(-2px); }
.mg-button--primary .wp-block-button__link { background: var(--mg-accent); color: #16140f !important; box-shadow: 0 12px 30px rgba(216, 167, 46, .18); }
.mg-button--primary .wp-block-button__link:hover { background: #e7bc50; box-shadow: 0 16px 36px rgba(216, 167, 46, .25); }
.mg-button--secondary .wp-block-button__link { border-color: var(--mg-line-dark); background: rgba(255, 255, 255, .04); color: #fff !important; }
.mg-button--secondary .wp-block-button__link:hover { background: rgba(255, 255, 255, .1); } .mg-hero { position: relative; isolation: isolate; min-height: 830px; display: flex; align-items: center; padding: 166px 0 94px; overflow: hidden; background: var(--mg-dark); color: #f8f8f5; }
.mg-hero::before { content: ""; position: absolute; z-index: 0; inset: -72px; pointer-events: none; opacity: .34; background-image: linear-gradient(rgba(227,188,91,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(227,188,91,.2) 1px, transparent 1px); background-size: 72px 72px; background-position: 0 0; mask-image: linear-gradient(to bottom, #000, transparent 86%); animation: mg-grid-dna 18s ease-in-out infinite; will-change: background-position, opacity; }
.mg-hero__grid { position: relative; z-index: 1; display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 72px; align-items: center; }
.mg-hero h1 { max-width: 840px; margin: 0; color: #fff; font-size: clamp(3.4rem, 5.7vw, 5.8rem); line-height: .98; letter-spacing: -.064em; text-wrap: balance; }
.mg-hero h1 em { color: #e3bc5b; font-style: normal; }
.mg-hero .mg-lead { max-width: 670px; color: #bfc0bc; }
.mg-trust-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; color: #d6d7d3; font-size: .88rem; }
.mg-trust-points li::before { content: "✓"; margin-right: 8px; color: #e3bc5b; font-weight: 900; }
.mg-ui-stage { position: relative; min-height: 500px; margin-bottom: 22px; overflow: visible; border-radius: 36px; background-color: #e9e6df; background-position: 38% center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 40px 90px rgba(0,0,0,.38); }
.mg-ui-stage::before { content: ""; position: absolute; inset: 0; border: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(11,11,12,.08), rgba(11,11,12,.34)); pointer-events: none; }
.mg-ui-card { position: absolute; z-index: 2; width: 250px; padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 19px; background: rgba(35,37,38,.94); box-shadow: 0 20px 45px rgba(0,0,0,.3); animation: mg-float 7s ease-in-out infinite; }
.mg-ui-card:nth-child(1) { top: 4%; left: 2%; }
.mg-ui-card:nth-child(2) { top: 24%; right: -2%; animation-delay: -1.8s; }
.mg-ui-card:nth-child(3) { bottom: 18%; left: 7%; animation-delay: -3.5s; }
.mg-ui-card:nth-child(4) { right: 4%; bottom: -8%; animation-delay: -5.1s; }
.mg-ui-card small { display: block; margin-bottom: 14px; color: #9fa19d; font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.mg-ui-card strong { display: block; color: #fff; font-size: 1.02rem; }
.mg-ui-card span { display: block; margin-top: 6px; color: #babcba; font-size: .84rem; }
.mg-ui-card .mg-live { color: #7bd99a; }
.mg-ui-card .mg-stars { color: #f2c653; letter-spacing: .08em; }
@keyframes mg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes mg-trust-slide { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mg-reason-glow { 0% { border-color: var(--mg-line-dark); box-shadow: 0 0 0 rgba(227,188,91,0); } 35% { border-color: rgba(227,188,91,.95); box-shadow: 0 0 24px rgba(227,188,91,.28); } 100% { border-color: var(--mg-line-dark); box-shadow: 0 0 0 rgba(227,188,91,0); } }
@keyframes mg-grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 72px 72px, 72px 72px; } }
@keyframes mg-grid-dna { 0%, 100% { opacity: .18; background-position: 0 0, 0 0; } 25% { opacity: .38; background-position: 18px 28px, 28px 18px; } 52% { opacity: .24; background-position: 44px 16px, 16px 44px; } 78% { opacity: .42; background-position: 62px 54px, 54px 62px; } }
@keyframes mg-grid-dna-alt { 0%, 100% { opacity: .10; background-position: 54px 54px, 54px 54px; } 34% { opacity: .28; background-position: 22px 70px, 70px 22px; } 68% { opacity: .14; background-position: 80px 34px, 34px 80px; } } .mg-proof { padding: 28px 0; border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-proof__grid { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.mg-proof__item { margin: 0 !important; color: #393b38; font-size: .92rem; font-weight: 720; }
.mg-proof__item span { display: block; margin-bottom: 4px; color: var(--mg-muted); font-size: .76rem; font-weight: 550; }
.mg-card-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.mg-service-card { min-height: 420px; display: flex; flex-direction: column; padding: 38px; border: 1px solid var(--mg-line); border-radius: var(--mg-radius-lg); background: #fff; box-shadow: 0 1px 0 rgba(18,19,19,.03); transition: transform .25s, box-shadow .25s, border-color .25s; }
.mg-service-card:hover { transform: translateY(-5px); border-color: rgba(216,167,46,.55); box-shadow: var(--mg-shadow); }
.mg-service-card__label { margin: 0 !important; color: var(--mg-accent-dark); font-size: .71rem; font-weight: 900; letter-spacing: .16em; }
.mg-service-card__icon { display: grid; width: 38px; height: 38px; margin: 18px 0 18px; place-items: center; border: 1px solid rgba(216,167,46,.42); border-radius: 11px; background: rgba(216,167,46,.06); color: var(--mg-accent-dark); }
.mg-service-card__icon svg { width: 21px; height: 21px; }
.mg-service-card h3 { max-width: 470px; margin: 24px 0 16px; font-size: clamp(1.7rem, 3vw, 2.65rem); line-height: 1.07; letter-spacing: -.04em; }
.mg-service-card > p:not(.mg-service-card__label) { color: var(--mg-muted); line-height: 1.65; }
.mg-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.mg-chip-list li { padding: 7px 10px; border: 1px solid var(--mg-line); border-radius: 999px; color: #4e504c; font-size: .76rem; font-weight: 650; }
.mg-service-card__link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: auto; padding-top: 28px; color: var(--mg-accent-dark) !important; font-weight: 850; text-decoration: none; }
.mg-service-card__link span { transition: transform .2s; }
.mg-service-card__link:hover span, .mg-service-card__link:focus-visible span { transform: translateX(4px); } .mg-problem { display: grid !important; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.mg-problem-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mg-problem-list li { padding: 18px; border: 1px solid var(--mg-line-dark); border-radius: 15px; background: rgba(255,255,255,.03); color: #d6d7d3; }
.mg-problem-list li::before { content: "—"; margin-right: 8px; color: #e3bc5b; }
.mg-problem-solution-title { margin: 34px 0 12px; color: #fff; font-weight: 800; }
.mg-problem-list--solution li { border-color: rgba(216,167,46,.35); background: rgba(216,167,46,.08); }
.mg-problem-list--solution li { position: relative; display: flex; align-items: center; gap: 12px; }
.mg-problem-list--solution li::before { content: none; }
.mg-solution-plus { position: relative; display: inline-grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border: 1px solid rgba(227,188,91,.68); border-radius: 50%; color: #e3bc5b; }
.mg-solution-plus i,
.mg-solution-plus b { position: absolute; display: block; width: 11px; height: 2px; border-radius: 2px; background: currentColor; transform-origin: center; }
.mg-solution-plus b { transform: rotate(90deg); }
.mg-solution-plus::after { position: absolute; inset: -1px; border: 1px solid #e3bc5b; border-radius: 50%; content: ""; opacity: 0; transform: scale(.8); }
.mg-js .mg-problem-list--solution:not(.is-animated) .mg-solution-plus i { transform: scaleX(0); }
.mg-js .mg-problem-list--solution:not(.is-animated) .mg-solution-plus b { transform: rotate(90deg) scaleX(0); }
.mg-js .mg-problem-list--solution:not(.is-animated) .mg-solution-plus { opacity: .4; transform: scale(.8); }
.mg-problem-list--solution.is-animated li .mg-solution-plus { animation: mg-solution-plus-arrive .55s cubic-bezier(.2,.8,.2,1) both; }
.mg-problem-list--solution.is-animated li .mg-solution-plus i { animation: mg-solution-line-x .34s ease-out both; }
.mg-problem-list--solution.is-animated li .mg-solution-plus b { animation: mg-solution-line-y .34s ease-out both; }
.mg-problem-list--solution.is-animated li .mg-solution-plus::after { animation: mg-solution-ring .75s ease-out both; }
.mg-problem-list--solution.is-animated li:nth-child(1) .mg-solution-plus,
.mg-problem-list--solution.is-animated li:nth-child(1) .mg-solution-plus i,
.mg-problem-list--solution.is-animated li:nth-child(1) .mg-solution-plus b,
.mg-problem-list--solution.is-animated li:nth-child(1) .mg-solution-plus::after { animation-delay: .05s; }
.mg-problem-list--solution.is-animated li:nth-child(2) .mg-solution-plus,
.mg-problem-list--solution.is-animated li:nth-child(2) .mg-solution-plus i,
.mg-problem-list--solution.is-animated li:nth-child(2) .mg-solution-plus b,
.mg-problem-list--solution.is-animated li:nth-child(2) .mg-solution-plus::after { animation-delay: .18s; }
.mg-problem-list--solution.is-animated li:nth-child(3) .mg-solution-plus,
.mg-problem-list--solution.is-animated li:nth-child(3) .mg-solution-plus i,
.mg-problem-list--solution.is-animated li:nth-child(3) .mg-solution-plus b,
.mg-problem-list--solution.is-animated li:nth-child(3) .mg-solution-plus::after { animation-delay: .31s; }
.mg-problem-list--solution.is-animated li:nth-child(4) .mg-solution-plus,
.mg-problem-list--solution.is-animated li:nth-child(4) .mg-solution-plus i,
.mg-problem-list--solution.is-animated li:nth-child(4) .mg-solution-plus b,
.mg-problem-list--solution.is-animated li:nth-child(4) .mg-solution-plus::after { animation-delay: .44s; }
.mg-problem-list--solution.is-animated li:nth-child(5) .mg-solution-plus,
.mg-problem-list--solution.is-animated li:nth-child(5) .mg-solution-plus i,
.mg-problem-list--solution.is-animated li:nth-child(5) .mg-solution-plus b,
.mg-problem-list--solution.is-animated li:nth-child(5) .mg-solution-plus::after { animation-delay: .57s; }
.mg-problem-list--solution.is-animated li:nth-child(6) .mg-solution-plus,
.mg-problem-list--solution.is-animated li:nth-child(6) .mg-solution-plus i,
.mg-problem-list--solution.is-animated li:nth-child(6) .mg-solution-plus b,
.mg-problem-list--solution.is-animated li:nth-child(6) .mg-solution-plus::after { animation-delay: .7s; }
@keyframes mg-solution-plus-arrive { from { opacity:.35; transform:scale(.78); } to { opacity:1; transform:scale(1); } }
@keyframes mg-solution-line-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes mg-solution-line-y { from { transform:rotate(90deg) scaleX(0); } to { transform:rotate(90deg) scaleX(1); } }
@keyframes mg-solution-ring { 0%,35% { opacity:.55; transform:scale(.85); } 100% { opacity:0; transform:scale(1.8); } }
.mg-process { counter-reset: mg-step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 62px; border-top: 1px solid var(--mg-line); }
.mg-step { position: relative; padding: 32px 26px 12px 0; border-right: 1px solid var(--mg-line); }
.mg-step:last-child { border-right: 0; padding-left: 26px; }
.mg-step:not(:first-child) { padding-left: 26px; }
.mg-step::before { counter-increment: mg-step; content: "0" counter(mg-step); display: block; margin-bottom: 52px; color: var(--mg-accent-dark); font-size: .78rem; font-weight: 900; letter-spacing: .12em; }
.mg-step h3 { margin: 0 0 12px; font-size: 1.22rem; }
.mg-step p { margin: 0; color: var(--mg-muted); line-height: 1.65; }
.mg-support-note { margin: 34px 0 0 !important; color: var(--mg-muted); font-weight: 700; }
.mg-support-note::before { content: "+"; margin-right: 10px; color: var(--mg-accent-dark); }
.mg-reasons { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 52px; }
.mg-reason { min-height: 148px; padding: 24px; border: 1px solid var(--mg-line-dark); border-radius: 18px; background: rgba(255,255,255,.035); }
.mg-reason.is-glowing { animation: mg-reason-glow 2s ease-out both; }
.mg-reason strong { display: block; color: #fff; font-size: 1.02rem; }
.mg-reason span { display: block; margin-top: 9px; color: #aeb0ab; font-size: .88rem; line-height: 1.5; } .mg-project-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mg-project { overflow: hidden; border: 1px solid var(--mg-line); border-radius: var(--mg-radius-lg); background: #fff; }
.mg-project__visual { min-height: 330px; display: grid; place-items: center; overflow: hidden; background: #151718; }
.mg-project__visual img { width: 100%; height: 100%; min-height: 330px; display: block; object-fit: cover; transition: transform .4s; }
.mg-project:hover .mg-project__visual img { transform: scale(1.025); }
.mg-project__window { width: 78%; padding: 15px; border: 1px solid var(--mg-line-dark); border-radius: 15px; background: #202223; transition: transform .4s; }
.mg-project:hover .mg-project__window { transform: scale(1.025); }
.mg-project__bar { height: 10px; margin-bottom: 26px; border-radius: 99px; background: linear-gradient(90deg, #d8a72e 0 24%, #444 24% 52%, #343637 52%); }
.mg-project__screen { min-height: 145px; border-radius: 10px; background: repeating-linear-gradient(180deg, #2b2d2e 0 14px, transparent 14px 27px); }
.mg-project__body { padding: 30px; }
.mg-project__body h3 { margin: 0 0 10px; font-size: 1.55rem; }
.mg-project__meta { color: var(--mg-accent-dark); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mg-project__body p { color: var(--mg-muted); line-height: 1.65; }
.mg-project__body a { font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mg-project__link { display: inline-block; color: var(--mg-accent-dark); font-weight: 800; } .mg-about { display: grid !important; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.mg-about__mark { min-height: 420px; display: grid; place-items: center; border: 1px solid var(--mg-line); border-radius: var(--mg-radius-lg); background: #fff; box-shadow: var(--mg-shadow); }
.mg-about__mark strong { font-size: clamp(3rem, 9vw, 7.5rem); letter-spacing: -.09em; }
.mg-about__mark span { color: var(--mg-accent); }
.mg-about__mark img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; border-radius: inherit; display: block; }
.mg-about-points { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 22px 0 26px; color: var(--mg-muted); font-size: .95rem; }
.mg-about-points span::before { content: "+"; color: var(--mg-accent); margin-right: 7px; font-weight: 800; }
.mg-reviews__viewport { overflow: hidden; margin-top: 34px; }
.mg-reviews { background: #000 !important; }
.mg-reviews__track { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 18px; width: calc(300% + 36px); animation: mg-review-rotate 24s ease-in-out infinite alternate; }
.mg-review-card { flex: 0 0 calc(33.3333% - 12px); width: auto; padding: clamp(26px, 4vw, 48px); border: 1px solid var(--mg-line); border-radius: var(--mg-radius-lg); background: #fff; box-shadow: var(--mg-shadow); }
.mg-review-card { display: flex; flex-direction: column; }
.mg-review-card--antigona { isolation: isolate; }
.mg-review-card__stars { color: var(--mg-accent); font-size: 1.25rem; letter-spacing: .16em; margin-bottom: 18px; }
.mg-review-card blockquote { max-width: 880px; margin: 0; color: var(--mg-text); font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.55; }
.mg-review-card__meta { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 24px 0 0; color: var(--mg-muted); font-size: .95rem; }
.mg-review-card__meta strong { color: var(--mg-text); }
.mg-reviews__track.is-paused { animation-play-state: paused; }
@keyframes mg-review-rotate { from { transform: translateX(0); } to { transform: translateX(calc(-66.6667% - 12px)); } }
@media (prefers-reduced-motion: reduce) { .mg-reviews__track { animation: none; } } .mg-reviews__track { gap: 0; width: 300%; animation: mg-review-slide-discrete 18s steps(3, end) infinite; }
.mg-review-card { flex: 0 0 33.3333%; width: 33.3333%; margin: 0; }
@keyframes mg-review-slide-discrete { from { transform: translateX(0); } to { transform: translateX(-66.6667%); } }
@media (prefers-reduced-motion: reduce) { .mg-reviews__track { animation: none; } } .mg-reviews__viewport { overflow: hidden; }
.mg-reviews__track { display: grid; grid-template-columns: 1fr; width: 100%; gap: 0; animation: none; }
.mg-review-card { grid-area: 1 / 1; width: 100%; min-width: 0; opacity: 0; transform: translateY(14px) scale(.985); animation: mg-review-fade 18s ease-in-out infinite; }
.mg-review-card:nth-child(2) { animation-delay: 6s; }
.mg-review-card:nth-child(3) { animation-delay: 12s; }
.mg-reviews__track.is-paused .mg-review-card { animation-play-state: paused; }
@keyframes mg-review-fade { 0%, 5% { opacity: 0; transform: translateY(14px) scale(.985); } 10%, 30% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateY(-10px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .mg-review-card { animation: none; opacity: 1; transform: none; } } .mg-reviews { background: #fff !important; }
.mg-reviews__track { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 20px; width: calc(300% + 40px); animation: mg-review-slide 24s ease-in-out infinite alternate; }
.mg-review-card { flex: 0 0 calc((100% - 40px) / 3); width: auto; align-self: flex-start; grid-area: auto; opacity: 1; transform: none; animation: none; box-sizing: border-box; overflow: hidden; }
.mg-reviews__track.is-paused { animation-play-state: paused; }
@keyframes mg-review-slide { from { transform: translateX(0); } to { transform: translateX(calc(-66.6667% - 13.333px)); } }
@media (prefers-reduced-motion: reduce) { .mg-reviews__track { animation: none; } }
.mg-cta { padding: 76px; border-radius: 36px; background: var(--mg-accent); color: #16140f; }
.mg-cta h2 { max-width: 860px; margin: 0; font-size: clamp(2.4rem, 5.5vw, 5rem); line-height: .99; letter-spacing: -.055em; }
.mg-cta p { max-width: 640px; margin: 22px 0 0; font-size: 1.1rem; }
.mg-cta .mg-button--primary .wp-block-button__link { background: #121313; color: #fff !important; box-shadow: none; }
.mg-contact { display: grid !important; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: start; }
.mg-contact-links { display: grid; gap: 12px; margin-top: 30px; }
.mg-contact-links a { font-weight: 760; text-decoration: none; }
.mg-contact-links a:hover { color: var(--mg-accent-dark); }
.mg-form { padding: 36px; border: 1px solid var(--mg-line); border-radius: var(--mg-radius-lg); background: #fff; box-shadow: var(--mg-shadow); }
.mg-form fieldset { margin: 0 0 18px; padding: 0; border: 0; }
.mg-form legend, .mg-form label { display: block; margin-bottom: 14px; color: var(--mg-ink); font-weight: 750; }
.mg-form input, .mg-form select, .mg-form textarea { width: 100%; margin-top: 7px; padding: 13px 14px; border: 1px solid rgba(18,19,19,.2); border-radius: 11px; background: #fafaf8; color: var(--mg-ink); font: inherit; }
.mg-form textarea { min-height: 130px; resize: vertical; }
.mg-form input:focus, .mg-form select:focus, .mg-form textarea:focus { outline: 2px solid var(--mg-accent); outline-offset: 2px; }
.mg-form input[type="submit"] { width: auto; min-height: 50px; padding-inline: 20px; border: 0; border-radius: 999px; background: var(--mg-accent); font-weight: 850; cursor: pointer; }
.mg-form .wpcf7-acceptance label { font-size: .85rem; font-weight: 500; line-height: 1.55; }
.mg-form .wpcf7-acceptance input { width: auto; margin-right: 8px; } .mg-local-hero { padding: 168px 0 94px; background: var(--mg-dark); color: #fff; }
.mg-local-hero h1 { max-width: 900px; margin: 0; font-size: clamp(3rem, 7vw, 6rem); line-height: .97; letter-spacing: -.06em; }
.mg-local-hero .mg-lead { color: #c0c2bd; }
.mg-local-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; }
.mg-local-card { padding: 30px; border: 1px solid var(--mg-line); border-radius: var(--mg-radius); background: #fff; }
.mg-local-card h3 { margin: 0 0 12px; }
.mg-local-card p { margin: 0; color: var(--mg-muted); line-height: 1.65; }
.mg-faq { max-width: 900px; margin: 48px auto 0; }
.mg-faq details { border-top: 1px solid var(--mg-line); }
.mg-faq details:last-child { border-bottom: 1px solid var(--mg-line); }
.mg-faq summary { position: relative; padding: 24px 44px 24px 0; cursor: pointer; list-style: none; font-weight: 780; }
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary::after { content: "+"; position: absolute; right: 8px; color: var(--mg-accent-dark); font-size: 1.4rem; }
.mg-faq details[open] summary::after { content: "–"; }
.mg-faq details p { max-width: 760px; margin: 0; padding-bottom: 24px; color: var(--mg-muted); line-height: 1.7; }
.page-template-page-magnelli-custom:not(.home) .mg-main > .entry-content, .magnelli-site:not(.home) .mg-main > p { max-width: 860px; margin-inline: auto; }
.magnelli-site:not(.home) .mg-main > h1, .magnelli-site:not(.home) .mg-main > h2, .magnelli-site:not(.home) .mg-main > h3, .magnelli-site:not(.home) .mg-main > p, .magnelli-site:not(.home) .mg-main > ul { width: min(860px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }
.magnelli-site:not(.home) .mg-main > h1 { margin-top: 150px; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.05em; }
.magnelli-site:not(.home) .mg-main > p, .magnelli-site:not(.home) .mg-main > ul { line-height: 1.75; } .mg-footer { padding: 76px 0 24px; background: #0b0c0c; color: #b6b8b3; }
.mg-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr .75fr; gap: 52px; }
.mg-brand--footer { display: inline-block; margin-bottom: 20px; }
.mg-footer p { max-width: 300px; line-height: 1.6; }
.mg-footer a { color: #d8d9d5; text-decoration: none; }
.mg-footer nav { display: flex; flex-direction: column; gap: 10px; }
.mg-footer nav strong { margin-bottom: 9px; color: #fff; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.mg-footer nav a { font-size: .9rem; }
.mg-footer nav a:hover { color: #e3bc5b; }
.mg-footer__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 58px; padding-top: 22px; border-top: 1px solid var(--mg-line-dark); font-size: .82rem; }
.mg-float-social { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; opacity: 1; transition: opacity .25s, transform .25s; }
.mg-float-social.is-scrolling { opacity: 0; pointer-events: none; transform: translateY(10px); }
.mg-float-social__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(21,23,24,.95); color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.24); font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; backdrop-filter: blur(10px); }
.mg-float-social__toggle span { color: var(--mg-accent); font-size: 1.35rem; line-height: 1; transition: transform .2s; }
.mg-float-social.is-open .mg-float-social__toggle span { transform: rotate(45deg); }
.mg-float-social__links { display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none; transition: opacity .2s, transform .2s; }
.mg-float-social.is-open .mg-float-social__links { opacity: 1; transform: none; pointer-events: auto; }
.mg-float-social__link { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(21,23,24,.95); color: #fff !important; box-shadow: 0 8px 20px rgba(0,0,0,.2); font-size: .78rem; font-weight: 800; text-decoration: none; }
.mg-float-social__link:hover, .mg-float-social__link:focus-visible, .mg-float-social__toggle:hover, .mg-float-social__toggle:focus-visible { border-color: var(--mg-accent); background: #252728; }
.mg-chatbot { position: fixed; right: 24px; bottom: 94px; z-index: 999; }
.mg-chatbot.is-scrolling { opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.mg-chatbot__toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 8px; border: 1px solid rgba(227,188,91,.65); border-radius: 999px; background: #151718; color: var(--mg-accent); box-shadow: 0 12px 28px rgba(0,0,0,.25); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; list-style: none; }
.mg-chatbot__toggle::-webkit-details-marker { display: none; }
.mg-chatbot__toggle span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--mg-accent); color: #171817; font-size: 1rem; }
.mg-chatbot__panel { position: absolute; right: 0; bottom: 56px; width: min(360px, calc(100vw - 28px)); padding: 20px; border: 1px solid var(--mg-line); border-radius: 20px; background: #fff; color: #292b29; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.mg-chatbot:not([open]) .mg-chatbot__panel { display: none; }
.mg-chatbot__head { display: flex; align-items: center; justify-content: space-between; color: #171817; }
.mg-chatbot__close { border: 0; background: none; color: #6b6e68; font-size: 1.35rem; cursor: pointer; }
.mg-chatbot__intro { margin: 8px 0 14px; color: var(--mg-muted); font-size: .9rem; }
.mg-chatbot__questions { display: grid; gap: 7px; max-height: 260px; overflow: auto; }
.mg-chatbot__questions button { padding: 10px 12px; border: 1px solid var(--mg-line); border-radius: 10px; background: #fafaf8; color: #30332f; text-align: left; font: inherit; font-size: .78rem; cursor: pointer; }
.mg-chatbot__questions button:hover, .mg-chatbot__questions button:focus-visible { border-color: var(--mg-accent); background: #fff8e7; }
.mg-chatbot__answer { margin-top: 12px; color: var(--mg-muted); font-size: .82rem; line-height: 1.5; }
.mg-chatbot__actions { display: flex; gap: 8px; margin-top: 14px; }
.mg-chatbot__actions a { flex: 1; padding: 9px 8px; border-radius: 999px; background: var(--mg-accent); color: #171817; font-size: .76rem; font-weight: 800; text-align: center; text-decoration: none; }
.mg-chatbot__actions a + a { background: #eaf8ee; color: #18783a; } .mg-reveal { opacity: 1; transform: none; }
.mg-js .mg-reveal { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease; }
.mg-js .mg-reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 1120px) {
.mg-menu-button { display: block; }
.mg-nav { display: none; position: absolute; top: 72px; left: 24px; right: 24px; max-height: calc(100vh - 96px); overflow: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 18px; border: 1px solid var(--mg-line-dark); border-radius: 18px; background: #151718; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.mg-nav.is-open { display: flex; }
.mg-nav a { padding: 12px; font-size: .95rem; }
.mg-nav-tools { width: 100%; }
.mg-nav-tools__toggle { width: 100%; justify-content: space-between; padding: 12px; font-size: .95rem; }
.mg-nav-tools__menu { position: static; min-width: 0; display: none; margin: 0 6px 8px; padding: 5px; border-radius: 11px; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; transition: none; }
.mg-nav-tools.is-open .mg-nav-tools__menu { display: grid; transform: none; }
.mg-nav-tools__menu a { padding: 11px 12px; font-size: .9rem; }
.mg-nav__cta { margin-top: 8px; text-align: center; }
.mg-hero__grid { grid-template-columns: 1fr; }
.mg-hero__content { max-width: 820px; }
.mg-ui-stage { width: min(680px, 100%); margin-inline: auto; }
.mg-reasons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 800px) {
.mg-shell { width: min(100% - 32px, var(--mg-shell)); }
.mg-section { padding: 82px 0; }
.mg-section-head, .mg-problem, .mg-about, .mg-contact, .mg-project-grid { grid-template-columns: 1fr; gap: 38px; }
.mg-card-grid, .mg-local-grid { grid-template-columns: 1fr; }
.mg-process { grid-template-columns: 1fr 1fr; }
.mg-step:nth-child(2) { border-right: 0; }
.mg-step:nth-child(3), .mg-step:nth-child(4) { border-top: 1px solid var(--mg-line); }
.mg-proof__grid { grid-template-columns: 1fr 1fr; }
.mg-footer__grid { grid-template-columns: 1fr 1fr; }
.mg-cta { padding: 52px 28px; }
}
@media (max-width: 560px) {
.mg-header__inner { min-height: 68px; }
.mg-header.is-compact .mg-header__inner { min-height: 62px; }
.mg-hero { min-height: auto; padding: 132px 0 72px; }
.mg-trust-points { display: grid; grid-template-columns: 1fr; gap: 11px; margin: 120px 0 0 !important; padding-top: 0; justify-items: center; text-align: center; font-size: 1.16rem; line-height: 1.4; }
.mg-trust-points li { animation: mg-trust-slide 1.1s cubic-bezier(.22,.61,.36,1) both; }
.mg-trust-points li:nth-child(2) { animation-delay: .1s; }
.mg-trust-points li:nth-child(3) { animation-delay: .2s; }
.mg-trust-points li:nth-child(4) { animation-delay: .3s; }
.mg-hero h1 { font-size: clamp(2.75rem, 14vw, 4.2rem); }
.mg-title { font-size: clamp(2.15rem, 11vw, 3.35rem) !important; }
.mg-trust-points { display: grid; grid-template-columns: 1fr; gap: 11px; margin: 120px 0 0 !important; padding-top: 0; justify-items: center; text-align: center; font-size: 1.16rem; line-height: 1.4; }
.mg-trust-points li { animation: mg-trust-slide 1.1s cubic-bezier(.22,.61,.36,1) both; }
.mg-trust-points li:nth-child(2) { animation-delay: .1s; }
.mg-trust-points li:nth-child(3) { animation-delay: .2s; }
.mg-trust-points li:nth-child(4) { animation-delay: .3s; } .mg-ui-stage { min-height: 0; aspect-ratio: 1 / 1; margin-bottom: 26px; padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: end; gap: 12px; background-position: 34% center; }
.mg-ui-card { position: relative; inset: auto !important; width: 100%; max-width: none; min-height: 0; padding: 14px; }
.mg-problem-list, .mg-process, .mg-reasons, .mg-footer__grid { grid-template-columns: 1fr; }
.mg-proof { padding: 20px 0 28px; background: #f7f7f4; }
.mg-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mg-proof__item { min-height: 108px; display: flex; flex-direction: column; justify-content: center; padding: 18px 14px; border: 1px solid var(--mg-line); border-radius: 16px; background: #fff; box-shadow: 0 8px 20px rgba(24, 26, 24, .05); font-size: .86rem; line-height: 1.35; }
.mg-proof__item span { margin-bottom: 7px; color: var(--mg-accent-dark); font-size: .68rem; letter-spacing: .08em; }
.mg-step, .mg-step:not(:first-child), .mg-step:last-child { padding: 26px 0; border-right: 0; border-top: 1px solid var(--mg-line); }
.mg-step::before { margin-bottom: 24px; }
.mg-service-card { min-height: 0; padding: 28px; }
.mg-service-card h3 { margin-top: 40px; }
.mg-button-row, .mg-button-row .wp-block-button, .mg-button-row .wp-block-button__link { width: 100%; }
.mg-form { padding: 24px 18px; }
.mg-footer__bottom { align-items: flex-start; flex-direction: column; }
.mg-float-social { right: 14px; bottom: 14px; gap: 8px; }
.mg-float-social__toggle { min-height: 44px; padding: 9px 16px; justify-content: center; border-color: rgba(227,188,91,.75); border-radius: 999px; color: var(--mg-accent); }
.mg-float-social__links { align-items: flex-end; gap: 8px; }
.mg-float-social__link { width: 64px; height: 64px; min-height: 64px; padding: 0; justify-content: center; border-color: rgba(227,188,91,.7); border-radius: 50%; font-size: 0; }
.mg-float-social__link span { display: block; width: auto; height: auto; color: var(--mg-accent); font-size: .64rem; font-weight: 900; letter-spacing: -.03em; white-space: nowrap; }
.mg-chatbot { right: 14px; bottom: 78px; }
.mg-chatbot__toggle { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.mg-js .mg-reveal { opacity: 1; transform: none; transition: none; }
.mg-ui-card { animation: none; }
.mg-trust-points li { animation: none; }
.mg-reason.is-glowing { animation: none; }
.mg-hero::before, .mg-hero::after { animation: none; }
.mg-service-card, .mg-button .wp-block-button__link, .mg-project__window { transition: none; }
.mg-problem-list--solution.is-animated .mg-solution-plus,
.mg-problem-list--solution.is-animated .mg-solution-plus i,
.mg-problem-list--solution.is-animated .mg-solution-plus b,
.mg-problem-list--solution.is-animated .mg-solution-plus::after { animation: none; }
} .cmplz-cookiebanner { --cmplz_banner_background_color: #151718; --cmplz_banner_border_color: rgba(227,188,91,.35); --cmplz_text_color: #f4f4ef; --cmplz_hyperlink_color: #e3bc5b; --cmplz_button_accept_background_color: #e3bc5b; --cmplz_button_accept_border_color: #e3bc5b; --cmplz_button_accept_text_color: #171817; --cmplz_button_deny_background_color: transparent; --cmplz_button_deny_border_color: rgba(255,255,255,.25); --cmplz_button_deny_text_color: #f4f4ef; --cmplz_button_settings_background_color: rgba(255,255,255,.06); --cmplz_button_settings_border_color: rgba(255,255,255,.2); --cmplz_button_settings_text_color: #f4f4ef; --cmplz_category_header_always_active_color: #7bd99a; background: #151718 !important; border-color: rgba(227,188,91,.35) !important; border-radius: 18px !important; box-shadow: 0 18px 50px rgba(0,0,0,.38) !important; }
.cmplz-cookiebanner .cmplz-categories .cmplz-category { background: rgba(255,255,255,.06); }
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn { border-radius: 999px !important; font-weight: 700; } .mg-reviews { background: #fff !important; }
.mg-reviews__viewport { overflow: hidden !important; }
.mg-reviews__track { display: flex !important; flex-wrap: nowrap !important; width: 300% !important; gap: 0 !important; animation: mg-review-slide-discrete 18s steps(3, jump-end) infinite !important; }
.mg-review-card { flex: 0 0 33.333333% !important; width: 33.333333% !important; max-width: none !important; margin: 0 !important; }
.mg-reviews__track.is-paused { animation-play-state: paused !important; } .mg-about__mark { min-height: 320px; }
.mg-about__mark { height: 420px; min-height: 0; overflow: hidden; }
.mg-about__mark img { height: 100%; min-height: 0; object-fit: contain; object-position: center; }
.mg-about__mark { border: 0; border-radius: 32px !important; background: transparent; box-shadow: none; overflow: hidden !important; }
.mg-about__mark img { border-radius: 32px !important; clip-path: inset(0 round 32px); overflow: hidden !important; }
.mg-about__mark { margin-top: 90px; }
@media (max-width: 700px) { .mg-about__mark { margin-top: 54px; } }
.mg-reviews { background: #000 !important; color: #f5f4ef; }
.mg-reviews .mg-title { color: #fff; }
.mg-reviews .mg-lead { color: #c8c6bf; }
.mg-reviews .mg-review-card { background: #171819; border-color: rgba(227,188,91,.35); box-shadow: 0 18px 45px rgba(0,0,0,.28); }
.mg-reviews .mg-review-card blockquote { color: #f5f4ef; }
.mg-reviews .mg-review-card__meta { color: #bcbab2; }
.mg-reviews .mg-review-card__meta strong { color: #fff; }
.mg-about { padding-top: 96px; }
@media (max-width: 700px) { .mg-about { padding-top: 72px; } }
.mg-reviews__track { width: 400% !important; }
.mg-review-card { flex-basis: 25% !important; width: 25% !important; }
@media (min-width: 701px) {
.mg-reviews__track { width: max-content !important; }
.mg-review-card { flex: 0 0 540px !important; width: 540px !important; padding: 32px !important; }
.mg-review-card blockquote { font-size: 1.12rem; line-height: 1.5; }
}
@media (max-width: 700px) {
.mg-about__mark { min-height: 0; height: 390px; }
.mg-about__mark img { min-height: 0; height: 100%; }
} .mg-reviews__viewport { position: relative; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 18px 12px; touch-action: pan-x pan-y; }
.mg-reviews__viewport::-webkit-scrollbar { display: none; }
.mg-reviews__viewport { cursor: grab; }
.mg-reviews__viewport.is-dragging { cursor: grabbing; }
.mg-reviews__carousel { position: relative; }
.mg-reviews__arrow { position: absolute; top: 50%; z-index: 5; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 1px solid rgba(227,188,91,.65); border-radius: 50%; background: #171819; color: #e3bc5b; font-size: 2rem; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.mg-reviews__arrow--prev { left: 24px; }
.mg-reviews__arrow--next { right: 24px; }
@media (max-width: 700px) { .mg-reviews__arrow { display: none !important; } }
.mg-reviews__track { display: flex !important; flex-wrap: nowrap !important; width: max-content !important; gap: 28px !important; padding: 0 2px; animation: none !important; transform: none !important; }
.mg-review-card { flex: 0 0 620px !important; width: 620px !important; max-width: calc(100vw - 120px) !important; scroll-snap-align: center; scroll-snap-stop: always; }
@media (max-width: 700px) {
.mg-review-card { flex-basis: calc(100vw - 56px) !important; width: calc(100vw - 56px) !important; max-width: none !important; }
}
@media (min-width: 701px) {
.mg-review-card { flex: 0 0 540px !important; width: 540px !important; max-width: 540px !important; padding: 32px !important; }
} .mg-about-section { background: #fff !important; }
.mg-google-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #f5f4ef; font-size: .84rem; font-weight: 750; letter-spacing: .04em; }
.mg-google-g { display: inline-block; flex: 0 0 auto; width: 25px; height: 25px; }
.mg-rating-copy { display: flex !important; align-items: center; gap: 7px; }
.mg-google-g--small { width: 15px; height: 15px; } .mg-hosting-page-hero { position: relative; isolation: isolate; overflow: hidden; }
.mg-hosting-page-hero > .mg-shell { position: relative; z-index: 1; }
.mg-hosting-hero-network { position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .42; -webkit-mask-image: linear-gradient(100deg,rgba(0,0,0,.15) 5%,rgba(0,0,0,.95) 58%,rgba(0,0,0,.3)); mask-image: linear-gradient(100deg,rgba(0,0,0,.15) 5%,rgba(0,0,0,.95) 58%,rgba(0,0,0,.3)); }
.mg-hosting-hero-network svg { width: 100%; height: 100%; }
.mg-hosting-hero-network__base { fill: none; stroke: #b9ad91; stroke-width: 1.1; opacity: .42; }
.mg-hosting-hero-network__signal { fill: none; stroke: #e3bc5b; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 34 610; animation: mg-hosting-network-signal 9s linear infinite; }
.mg-hosting-hero-network__nodes circle { fill: #181919; stroke: #c7baa0; stroke-width: 2; }
.mg-hosting-hero-network__nodes .mg-hosting-hero-network__success { fill: #79cf94; stroke: #f5f4ef; transform-box: fill-box; transform-origin: center; animation: mg-hosting-network-success 9s ease-in-out infinite; }
@keyframes mg-hosting-network-signal { from { stroke-dashoffset: 650; } to { stroke-dashoffset: 0; } }
@keyframes mg-hosting-network-success { 0%,70% { opacity:.38; transform:scale(.8); } 80%,90% { opacity:1; transform:scale(1.35); } 100% { opacity:.38; transform:scale(.8); } }
.mg-hosting-flow { margin: 24px 0 20px; padding: 18px 16px 15px; border: 1px solid #e7dfcf; border-radius: 17px; background: linear-gradient(145deg,#fff 0%,#fbf8f1 100%); color: #1b1c1c; overflow: hidden; }
.mg-hosting-flow__track { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.mg-hosting-flow__track::before,
.mg-hosting-flow__track::after { position: absolute; top: 7px; right: 10%; left: 10%; height: 2px; border-radius: 2px; content: ""; }
.mg-hosting-flow__track::before { background: #dfddd6; }
.mg-hosting-flow__track::after { background: linear-gradient(90deg,#e3bc5b,#f0d58b); transform: scaleX(0); transform-origin: left; animation: mg-hosting-line 8s ease-in-out infinite; }
.mg-hosting-flow__track span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; min-width: 0; }
.mg-hosting-flow__track i { width: 15px; height: 15px; border: 3px solid #cac8c1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #fbf8f1; animation: mg-hosting-node 8s ease-in-out infinite; animation-delay: calc(var(--mg-flow-index) * .75s); }
.mg-hosting-flow__track b { color: #62645f; font-size: .66rem; font-weight: 700; white-space: nowrap; }
.mg-hosting-flow__status { display: flex; width: max-content; margin: 17px auto 0 !important; padding: 7px 11px; align-items: center; gap: 8px; border: 1px solid rgba(123,217,154,.3); border-radius: 999px; background: rgba(123,217,154,.08); color: #9be7b4 !important; font-size: .74rem; font-weight: 750; }
.mg-hosting-flow__status i { width: 8px; height: 8px; border-radius: 50%; background: #7bd99a; box-shadow: 0 0 0 0 rgba(123,217,154,.35); animation: mg-hosting-status 8s ease-in-out infinite; }
@keyframes mg-hosting-line { 0%,10% { transform: scaleX(0); } 58%,88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes mg-hosting-node { 0%,8% { border-color:#cac8c1; background:#fff; } 20%,82% { border-color:#d5a433; background:#e3bc5b; } 96%,100% { border-color:#cac8c1; background:#fff; } }
@keyframes mg-hosting-status { 0%,48% { opacity:.35; box-shadow:0 0 0 0 rgba(123,217,154,0); } 62%,82% { opacity:1; box-shadow:0 0 0 7px rgba(123,217,154,0); } 100% { opacity:.35; } }
@media (prefers-reduced-motion: reduce) {
.mg-hosting-hero-network__signal, .mg-hosting-hero-network__success { animation: none; }
.mg-hosting-flow__track::after { transform: scaleX(1); animation: none; }
.mg-hosting-flow__track i { border-color:#e3bc5b; background:#e3bc5b; animation:none; }
.mg-hosting-flow__status i { opacity:1; animation:none; }
}
@media (max-width: 700px) { .mg-hosting-hero-network { opacity:.24; } } .mg-review-action { display: flex; margin-top: 30px; align-items: center; gap: 18px; }
.mg-review-action a, .mg-footer-review { display: inline-flex; min-height: 48px; padding: 12px 18px; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(227,188,91,.7); border-radius: 999px; background: #f5f4ef; color: #151617 !important; font-size: .86rem; font-weight: 800; text-decoration: none; transition: transform .2s, background .2s, border-color .2s; }
.mg-review-action a:hover, .mg-review-action a:focus-visible, .mg-footer-review:hover, .mg-footer-review:focus-visible { transform: translateY(-2px); border-color: #e3bc5b; background: #fff; }
.mg-review-action p { max-width: 570px; margin: 0; color: #c8c6bf; font-size: .86rem; line-height: 1.55; }
.mg-footer-review { min-height: 42px; margin-top: 18px; padding: 9px 14px; background: transparent; color: #e3bc5b !important; }
.mg-float-social__link--google { border-color: rgba(227,188,91,.7); }
@media (max-width: 700px) {
.mg-review-action { align-items: stretch; flex-direction: column; }
.mg-review-action a { width: 100%; }
.mg-float-social__link--google span { font-size: .58rem; white-space: normal; text-align: center; line-height: 1.05; }
} .mg-hosting-explainer { overflow: hidden; }
.mg-hosting-explainer__head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: end; }
.mg-hosting-explainer__head .mg-lead { margin-bottom: 0; }
.mg-hosting-explainer__grid { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 50px; }
.mg-hosting-explainer__grid::before,
.mg-hosting-explainer__grid::after { position: absolute; z-index: 0; top: 48px; left: 11%; right: 11%; height: 2px; border-radius: 2px; content: ""; }
.mg-hosting-explainer__grid::before { background: #dedbd3; }
.mg-hosting-explainer__grid::after { background: linear-gradient(90deg,#d5a433,#f0d58b); transform: scaleX(0); transform-origin: left; animation: mg-hosting-line 9s ease-in-out infinite; }
.mg-hosting-explainer__item { position: relative; z-index: 1; min-height: 255px; padding: 25px 22px; border: 1px solid #dfded8; border-radius: 22px; background: #fff; box-shadow: 0 12px 34px rgba(20,21,21,.055); }
.mg-hosting-explainer__icon { display: grid; width: 48px; height: 48px; margin-bottom: 28px; place-items: center; border: 1px solid #ddd9cf; border-radius: 14px; background: #faf8f2; color: #77766f; box-shadow: 0 0 0 7px #fff; animation: mg-hosting-icon 9s ease-in-out infinite; animation-delay: calc(var(--mg-flow-index) * .8s); }
.mg-hosting-explainer__icon svg { width: 25px; height: 25px; }
.mg-hosting-explainer__item small { color: #ad8428; font-size: .68rem; font-weight: 800; letter-spacing: .1em; }
.mg-hosting-explainer__item h3 { margin: 8px 0 10px; font-size: 1.15rem; }
.mg-hosting-explainer__item p { margin: 0; color: #666862; font-size: .91rem; line-height: 1.58; }
.mg-hosting-explainer__result { display: flex; width: max-content; max-width: 100%; margin: 28px auto 0; padding: 13px 18px; align-items: center; gap: 10px; border: 1px solid rgba(44,142,80,.23); border-radius: 999px; background: #f2faf4; color: #256c3d; }
.mg-hosting-explainer__result i { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #47ad69; animation: mg-hosting-status 9s ease-in-out infinite; }
.mg-hosting-explainer__result strong { color: #205f35; }
.mg-hosting-explainer__result span { color: #54705d; font-size: .86rem; }
@keyframes mg-hosting-icon { 0%,8% { border-color:#ddd9cf; background:#faf8f2; color:#77766f; transform:translateY(0); } 20%,82% { border-color:#d5a433; background:#fff7df; color:#a77b1a; transform:translateY(-3px); } 96%,100% { border-color:#ddd9cf; background:#faf8f2; color:#77766f; transform:translateY(0); } }
@media (max-width: 1000px) { .mg-hosting-explainer__head { grid-template-columns:1fr; gap:20px; } .mg-hosting-explainer__grid { grid-template-columns:1fr 1fr; } .mg-hosting-explainer__grid::before,.mg-hosting-explainer__grid::after { display:none; } }
@media (max-width: 620px) { .mg-hosting-explainer__grid { grid-template-columns:1fr; margin-top:34px; } .mg-hosting-explainer__item { min-height:0; } .mg-hosting-explainer__result { align-items:flex-start; border-radius:18px; } .mg-hosting-explainer__result span { display:block; } }
@media (prefers-reduced-motion: reduce) { .mg-hosting-explainer__grid::after { transform:scaleX(1); animation:none; } .mg-hosting-explainer__icon { border-color:#d5a433; background:#fff7df; color:#a77b1a; animation:none; } .mg-hosting-explainer__result i { animation:none; } } .page-id-653 .mg-local-hero {
isolation: isolate;
overflow: hidden;
position: relative;
}
.page-id-653 .mg-local-hero > .mg-shell {
position: relative;
z-index: 1;
}
.page-id-653 .mg-local-hero > .mg-shell > * {
position: relative;
z-index: 2;
}
.page-id-653 .mg-local-hero::before,
.page-id-653 .mg-local-hero::after,
.page-id-653 .mg-local-hero > .mg-shell::before {
--mg-ai-shift-x: 8px;
--mg-ai-shift-y: -10px;
animation: mg-ai-icon-float 7.2s ease-in-out infinite;
background-color: rgba(227,188,91,.035);
background-position: center;
background-repeat: no-repeat;
background-size: 23px 23px;
border: 1px solid rgba(227,188,91,.18);
border-radius: 15px;
box-shadow: 0 0 0 rgba(227,188,91,0);
content: "";
height: 48px;
opacity: .2;
pointer-events: none;
position: absolute;
width: 48px;
}
.page-id-653 .mg-local-hero::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3bc5b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19 13.5v-3l-2-.5a7.7 7.7 0 0 0-.8-1.8l1.1-1.8-2.2-2.2-1.8 1.1a7.7 7.7 0 0 0-1.8-.8L11 2.5H8L7.5 4.5a7.7 7.7 0 0 0-1.8.8L3.9 4.2 1.7 6.4l1.1 1.8A7.7 7.7 0 0 0 2 10l-2 .5v3l2 .5a7.7 7.7 0 0 0 .8 1.8l-1.1 1.8 2.2 2.2 1.8-1.1a7.7 7.7 0 0 0 1.8.8l.5 2h3l.5-2a7.7 7.7 0 0 0 1.8-.8l1.8 1.1 2.2-2.2-1.1-1.8A7.7 7.7 0 0 0 19 14l2-.5Z' transform='translate(1.5 0)'/%3E%3C/svg%3E");
right: 8%;
top: 23%;
}
.page-id-653 .mg-local-hero::after {
--mg-ai-shift-x: -10px;
--mg-ai-shift-y: 9px;
animation-delay: -2.4s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3bc5b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2'/%3E%3Cpath d='m5 7 7 5.4L19 7'/%3E%3C/svg%3E");
bottom: 15%;
right: 24%;
}
.page-id-653 .mg-local-hero > .mg-shell::before {
--mg-ai-shift-x: 6px;
--mg-ai-shift-y: 12px;
animation-delay: -4.8s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3bc5b' stroke-width='1.45' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 13.4 8l4.8 1.4-4.8 1.4L12 16l-1.4-5.2-4.8-1.4L10.6 8 12 2.8Z'/%3E%3Cpath d='m18.2 14 .7 2.3 2.3.7-2.3.7-.7 2.3-.7-2.3-2.3-.7 2.3-.7.7-2.3Z'/%3E%3C/svg%3E");
right: 40%;
top: -78px;
z-index: 0;
}
@keyframes mg-ai-icon-float {
0%,100% { box-shadow:0 0 0 rgba(227,188,91,0); opacity:.18; transform:translate3d(0,0,0) scale(.96); }
42%,58% { box-shadow:0 0 30px 5px rgba(227,188,91,.15); opacity:.7; transform:translate3d(var(--mg-ai-shift-x),var(--mg-ai-shift-y),0) scale(1.04); }
}
@media (max-width:700px) {
.page-id-653 .mg-local-hero::before,
.page-id-653 .mg-local-hero::after,
.page-id-653 .mg-local-hero > .mg-shell::before {
background-size:18px 18px;
border-radius:12px;
height:38px;
width:38px;
}
.page-id-653 .mg-local-hero::before { right:5%; top:15%; }
.page-id-653 .mg-local-hero::after { bottom:7%; right:9%; }
.page-id-653 .mg-local-hero > .mg-shell::before { right:30%; top:-46px; }
}
@media (prefers-reduced-motion:reduce) {
.page-id-653 .mg-local-hero::before,
.page-id-653 .mg-local-hero::after,
.page-id-653 .mg-local-hero > .mg-shell::before {
animation:none;
box-shadow:0 0 20px rgba(227,188,91,.09);
opacity:.28;
transform:none;
}
}