/* =========================================================
   HeyMatty theme styles
   Sections are normal blocks with "hm-…" classes; these rules
   give them the HeyMatty look. Icons are added inline by PHP.
   ========================================================= */

:root {
	--hm-ink: #0B0D12;
	--hm-steel: #5C6B82;
	--hm-steel-light: #AEB8CC;
	--hm-slate: #4A5060;
	--hm-muted: #6B7080;
	--hm-line: #ECEEF2;
	--hm-mist: #F3F5FB;
	--hm-cloud: #F6F7FA;
	--hm-midnight: linear-gradient(110deg, #0B0D14 0%, #101A33 60%, #14275C 100%);
	--hm-ease: cubic-bezier(.2, .8, .2, 1);
}

body { margin: 0; -webkit-font-smoothing: antialiased; }
.wp-site-blocks > * { margin-block: 0 !important; }
img { max-width: 100%; height: auto; }

/* ---------- Reset the default block spacing inside our sections ---------- */
.hm-content > *,
.hm-main > .hm-content { margin-block: 0; }
.hm-content { margin-block-start: 0 !important; }
.hm-main { margin-block-start: 0 !important; }
:where(.hm-section, .hm-header, .hm-footer) :is(p, h1, h2, h3, h4, figure, ul, ol, .wp-block-group, .wp-block-buttons, details, hr, .wp-block-shortcode) { margin: 0; }
:where(.hm-section, .hm-header, .hm-footer) .wp-block-group { display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; min-width: 0; }
.hm-section { position: relative; }
.hm-wrap { max-width: 1120px; margin-inline: auto !important; padding: 136px 24px; gap: 24px; width: 100%; }
.hm-wrap-wide { max-width: 1200px; }
.hm-wrap-narrow { max-width: 920px; }
.hm-wrap-faq { max-width: 820px; }
.hm-stack-48 { gap: 48px !important; }
.hm-stack-64 { gap: 64px !important; }
.hm-stack-72 { gap: 72px !important; }
.hm-border-top { border-top: 1px solid var(--hm-line); }
.hm-bg-cloud { background: var(--hm-cloud); }

/* ---------- Type ---------- */
.hm-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: -0.005em; color: var(--hm-steel); line-height: 1.4; }
.hm-eyebrow-light { color: var(--hm-steel-light); }
.hm-eyebrow-muted { color: var(--hm-muted); }
p.hm-has-bolt { display: inline-flex; align-items: center; gap: 8px; }
p.hm-has-bolt::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--hm-bolt-steel) center / contain no-repeat; }
.hm-h1 { font-size: 64px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; }
.hm-h2 { font-size: 48px; line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.hm-h2-xl { font-size: 52px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 800; color: #fff; }
.hm-lead { font-size: 19px; line-height: 1.6; color: var(--hm-slate); max-width: 540px; }
.hm-lead-wide { max-width: 700px; }
.hm-lead-sm { font-size: 17px; line-height: 1.65; color: var(--hm-slate); }
.hm-lead-light { font-size: 17px; line-height: 1.65; color: #C3C9D9; max-width: 480px; }
.hm-muted { font-size: 15px; color: var(--hm-muted); }

/* ---------- Buttons ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-section .wp-block-buttons { padding-top: 8px; }
.wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1.2; padding: 15px 28px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.wp-block-button .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(10, 16, 40, .5); }
.hm-btn-dark .wp-block-button__link { background: var(--hm-ink); color: #fff; }
.hm-btn-dark .wp-block-button__link:hover { color: #fff; }
.hm-btn-light .wp-block-button__link { background: #fff; color: var(--hm-ink); border: 1px solid #DADDE5; }
.hm-btn-white .wp-block-button__link { background: #fff; color: var(--hm-ink); }
.hm-btn-light .wp-block-button__link:hover,
.hm-btn-white .wp-block-button__link:hover { color: var(--hm-ink); }
.hm-btn-sm .wp-block-button__link { padding: 11px 20px; font-size: 15px; min-height: 44px; box-sizing: border-box; }
.hm-has-bolt .wp-block-button__link::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--hm-bolt-white) center / contain no-repeat; transition: transform .25s ease; }
.hm-btn-white.hm-has-bolt .wp-block-button__link::before,
.hm-btn-light.hm-has-bolt .wp-block-button__link::before { background-image: var(--hm-bolt-ink); }
.hm-has-arrow .wp-block-button__link::after { content: ""; width: 16px; height: 16px; flex: none; background: var(--hm-arrow-white) center / contain no-repeat; transition: transform .25s ease; }
.hm-has-arrow .wp-block-button__link:hover::after,
.hm-has-bolt .wp-block-button__link:hover::before { transform: translateX(3px); }

/* ---------- Header ---------- */
.hm-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hm-line); }
.hm-header-inner { max-width: 1120px; margin: 0 auto !important; padding: 16px 24px; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 24px !important; }
.hm-header-right { flex-direction: row !important; align-items: center; gap: 32px !important; }
.hm-logo { font-size: 24px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.hm-logo a { color: var(--hm-ink); text-decoration: none; }
.hm-logo strong { font-weight: 800; }
.hm-logo mark { background: none; font-weight: 800; }
.hm-logo-light a { color: #fff; }
.hm-logo-light mark.has-steel-color { color: var(--hm-steel-light) !important; }
.hm-nav { font-size: 15px; font-weight: 600; }
.hm-nav .wp-block-navigation__container { gap: 32px; }
.hm-nav .wp-block-navigation-item__content { color: var(--hm-ink); padding-bottom: 4px !important; background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat; transition: background-size .3s ease; }
.hm-nav .wp-block-navigation-item__content:hover,
.hm-nav .wp-block-navigation-item__content[aria-current="page"] { background-size: 100% 1.5px; }
.hm-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--hm-steel); }
.hm-header-cta { padding: 0 !important; }

/* ---------- Device frames ---------- */
.hm-win,
.is-style-hm-window { --bar: 26px; --dot: 4px; --dx: 13px; position: relative; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(10, 16, 40, .45), 0 0 0 1px rgba(16, 24, 48, .06); padding-top: var(--bar); }
.hm-win::before,
.is-style-hm-window::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--bar); box-sizing: border-box; border-bottom: 1px solid #E6E8EE; background:
	radial-gradient(circle at var(--dx) 50%, #FF5F57 var(--dot), transparent calc(var(--dot) + .5px)),
	radial-gradient(circle at calc(var(--dx) * 2.1) 50%, #FEBC2E var(--dot), transparent calc(var(--dot) + .5px)),
	radial-gradient(circle at calc(var(--dx) * 3.2) 50%, #28C840 var(--dot), transparent calc(var(--dot) + .5px)),
	#F7F8FA; }
.hm-win img,
.is-style-hm-window img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center top; border-radius: 0; }
.hm-win::after,
.is-style-hm-window::after,
.hm-phone::after { content: ""; position: absolute; pointer-events: none; inset: var(--bar, 0) 0 0 0; background: linear-gradient(118deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .10) 22%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .06) 100%); }
.hm-win-sm { --bar: 18px; --dot: 3px; --dx: 10px; box-shadow: 0 24px 44px -26px rgba(10, 16, 40, .5), 0 0 0 1px rgba(16, 24, 48, .07); }
.hm-win-lg { --bar: 34px; --dot: 5px; --dx: 16px; border-radius: 16px; box-shadow: 0 50px 90px -40px rgba(10, 16, 40, .5), 0 0 0 1px rgba(16, 24, 48, .07); }
.hm-phone,
.is-style-hm-phone { position: relative; background: #0B0D12; border-radius: 16% / 7.4%; padding: 0 !important; box-sizing: border-box; overflow: hidden; box-shadow: 0 40px 70px -24px rgba(10, 16, 40, .55); }
.hm-phone img,
.is-style-hm-phone img { display: block; width: 92% !important; max-width: 92% !important; height: auto !important; margin: 4% auto !important; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: center top; border-radius: 13% / 6%; }
.hm-phone::after { left: 4%; right: 4%; top: 2%; bottom: 2%; border-radius: 13% / 6%; }

/* ---------- Home: hero ---------- */
.hm-hero { background: linear-gradient(180deg, #F3F5FB 0%, #fff 70%); }
.hm-hero > .hm-wrap { padding: 128px 24px 136px; }
.hm-hero-grid { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 72px !important; }
.hm-hero-copy { flex: 999 1 520px; gap: 28px !important; }
.hm-showcase { position: relative; flex: 1 1 420px; max-width: 520px; width: 100%; aspect-ratio: 1 / .9; display: block !important; }
.hm-showcase::before { content: ""; position: absolute; inset: 4% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(92, 107, 130, .30), rgba(174, 184, 204, .30) 55%, rgba(255, 255, 255, 0) 100%); filter: blur(38px); pointer-events: none; }
.hm-showcase > * { position: absolute !important; margin: 0 !important; transition: translate .5s var(--hm-ease); }
.hm-showcase .hm-sc-back { right: 0; top: 0; width: 78%; transform: rotate(3deg); opacity: .96; }
.hm-showcase .hm-sc-front { left: 0; top: 24%; width: 84%; }
.hm-showcase .hm-sc-phone { right: 4%; bottom: 0; width: 24%; transform: rotate(-5deg); }
.hm-sc-badge { left: 4%; bottom: 6%; display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 9px 16px 9px 9px; box-shadow: 0 18px 40px -16px rgba(10, 16, 40, .4); font-size: 13px; font-weight: 700; }
.hm-sc-badge::before { content: ""; width: 30px; height: 30px; border-radius: 999px; background: var(--hm-bolt-white) center / 15px no-repeat, var(--hm-steel); flex: none; }

/* ---------- Home: logos ---------- */
.hm-logos > .hm-wrap { padding: 56px 24px; gap: 28px; align-items: center; }
.hm-logos-title { font-size: 13px; font-weight: 600; color: var(--hm-muted); text-align: center; }
.hm-marquee { flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 32px 64px !important; width: 100%; }
.hm-marquee.hm-marquee-on { display: block !important; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.hm-marquee-track { display: flex; align-items: center; gap: 88px; padding-right: 88px; width: max-content; }
.hm-marquee-on .hm-marquee-track { animation: hm-marq 90s linear infinite; }
.hm-marquee-on:hover .hm-marquee-track { animation-play-state: paused; }
@keyframes hm-marq { to { transform: translateX(-33.3333%); } }
.hm-clogo { margin: 0 !important; height: 64px; display: flex !important; align-items: center; justify-content: center; flex: none; }
.hm-clogo img { width: auto; max-width: 200px; opacity: .85; display: block; }
.hm-logo-22 img { height: 22px; } .hm-logo-34 img { height: 34px; } .hm-logo-42 img { height: 42px; } .hm-logo-44 img { height: 44px; }
.hm-logo-46 img { height: 46px; } .hm-logo-58 img { height: 58px; } .hm-logo-60 img { height: 60px; } .hm-logo-64 img { height: 64px; }

/* ---------- Shared section heads ---------- */
.hm-split-head { flex-direction: row !important; flex-wrap: wrap; gap: 32px 72px !important; align-items: flex-end; justify-content: space-between; }
.hm-head-main { flex: none; gap: 16px !important; }
.hm-split-head > .hm-head-main { flex: 1 1 420px; }
.hm-split-head > p { flex: 1 1 380px; }
.hm-center-head { align-items: center; text-align: center; gap: 16px !important; }

/* ---------- Home: project cards ---------- */
.hm-pcards { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px !important; }
.hm-pcard { position: relative; gap: 20px !important; transition: transform .4s var(--hm-ease); }
.hm-pcard:hover { transform: translateY(-4px); }
.hm-pcard-media { position: relative; display: block !important; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #EEF0F3 0%, #DDE3F2 100%); transition: box-shadow .4s ease; }
.hm-pcard:hover .hm-pcard-media { box-shadow: 0 34px 60px -34px rgba(10, 16, 40, .45); }
.hm-pcard-media > * { position: absolute !important; margin: 0 !important; }
.hm-pcard-media .hm-pc-desktop { --bar: 22px; --dot: 3.5px; --dx: 11px; left: 7%; top: 12%; width: 76%; border-radius: 10px; box-shadow: 0 30px 60px -28px rgba(10, 16, 40, .45), 0 0 0 1px rgba(16, 24, 48, .06); }
.hm-pcard-media .hm-pc-phone { right: 6%; bottom: 7%; width: 16%; transform: rotate(-4deg); box-shadow: 0 24px 40px -16px rgba(10, 16, 40, .5); }
.hm-pcard-meta { flex-direction: row !important; justify-content: space-between; align-items: baseline; gap: 16px !important; flex-wrap: wrap; }
.hm-pcard-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; }
.hm-pcard-title a { color: var(--hm-ink); text-decoration: none; }
.hm-pcard-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.hm-pcard-tag { font-size: 13px; font-weight: 600; color: var(--hm-muted); }
.hm-row-between { flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px !important; }
.hm-row-between .wp-block-buttons { padding-top: 0; }
.hm-built { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 10px 24px !important; }
.hm-inline-list { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.hm-inline-list li { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: #8A90A0; margin: 0; }

/* ---------- Home: marketing ---------- */
.hm-grid-2 { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px !important; }
.hm-card { background: #fff; border: 1px solid #E3E6EE; border-radius: 16px; padding: 36px; gap: 16px !important; }
.hm-card-title { font-size: 30px; line-height: 1.1; letter-spacing: -0.03em; }
.hm-card p { font-size: 16px; line-height: 1.65; color: var(--hm-slate); }
.hm-chips { list-style: none; padding: 4px 0 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-chips li { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: var(--hm-mist); color: #3A4050; margin: 0; }
.hm-glass { border: 1px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #fff 0%, #E3E6EE 45%, #CDD3DF 100%) border-box !important; }
.hm-lift { transition: transform .35s var(--hm-ease), box-shadow .35s ease; }
.hm-lift:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -32px rgba(10, 16, 40, .35); }

/* ---------- Home: process ---------- */
.hm-process { flex-direction: row !important; flex-wrap: wrap; gap: 72px !important; align-items: flex-start; }
.hm-process-intro { flex: 1 1 340px; position: sticky; top: 120px; gap: 20px !important; }
.hm-process-intro .hm-lead-sm { max-width: 400px; }
.hm-process-steps { flex: 999 1 520px; gap: 20px !important; }
.hm-step-card { border-radius: 22px; padding: 36px; flex-direction: row !important; flex-wrap: wrap; gap: 28px !important; }
.hm-num { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -0.04em; color: #D4D8E2; width: 84px; flex: none; }
.hm-step-body { flex: 1 1 280px; gap: 12px !important; }
.hm-step-card .hm-step-title { font-size: 24px; letter-spacing: -0.02em; }
.hm-step-card p:not(.hm-num) { font-size: 16px; line-height: 1.65; color: var(--hm-slate); }

/* ---------- Testimonial ---------- */
.hm-quote-sec .hm-wrap { align-items: center; text-align: center; gap: 36px !important; }
.hm-quote { font-size: 40px; line-height: 1.25; letter-spacing: -0.025em; font-weight: 700; color: var(--hm-ink); }
.hm-quote::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 36px; background: var(--hm-bolt-steel) center / contain no-repeat; }
.hm-person { flex-direction: row !important; align-items: center; gap: 16px !important; }
.hm-avatar { width: 52px; height: 52px; border-radius: 999px; background: var(--hm-ink); color: #fff; font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
.hm-person-text { gap: 2px !important; text-align: left; }
.hm-person-name { font-size: 16px; font-weight: 800; }
.hm-person-role { font-size: 14px; color: var(--hm-muted); }

/* ---------- Dark panels ---------- */
.hm-dark { position: relative; isolation: isolate; background: var(--hm-midnight); color: #fff; }
.hm-dark::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-repeat: repeat; background-size: 180px; opacity: .06; mix-blend-mode: overlay; pointer-events: none; z-index: 0; }
.hm-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(460px circle at var(--sx, -999px) var(--sy, -999px), rgba(174, 184, 204, .16), rgba(174, 184, 204, 0) 60%); }
.hm-dark > * { position: relative; z-index: 1; }
.hm-dark h2, .hm-dark h3 { color: #fff; }

/* ---------- Contact ---------- */
.hm-contact { overflow: hidden; }
.hm-contact > .hm-wrap::before { content: ""; position: absolute; right: -80px; top: -60px; width: 560px; height: 560px; background: var(--hm-bolt-steel-light) center / contain no-repeat; opacity: .07; transform: rotate(12deg); pointer-events: none; }
.hm-contact > .hm-wrap { position: static !important; }
.hm-contact-grid { flex-direction: row !important; flex-wrap: wrap; gap: 72px !important; align-items: center; }
.hm-contact-copy { flex: 999 1 440px; gap: 20px !important; }
.hm-contact-email { padding-top: 8px; }
.hm-contact-email a { color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; }
.hm-form-card { flex: 1 1 380px; max-width: 440px; background: #fff; color: var(--hm-ink); border-radius: 12px; padding: 36px; }
.hm-form { display: flex; flex-direction: column; gap: 18px; }
.hm-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--hm-ink); }
.hm-form input, .hm-form select, .hm-form textarea,
.hm-fluent input:not([type=checkbox]):not([type=radio]):not([type=submit]), .hm-fluent select, .hm-fluent textarea { font: inherit; font-size: 15px; font-weight: 500; color: var(--hm-ink); border: 1px solid #DADDE5; border-radius: 12px; padding: 0 14px; min-height: 46px; background: #fff; box-sizing: border-box; width: 100%; }
.hm-form textarea, .hm-fluent textarea { padding: 12px 14px; resize: vertical; }
.hm-form input:focus, .hm-form select:focus, .hm-form textarea:focus { outline: 2px solid var(--hm-steel-light); outline-offset: 1px; border-color: var(--hm-steel); }
.hm-form button, .hm-fluent button[type=submit] { height: 50px; border: 0; border-radius: 999px !important; background: var(--hm-ink) !important; color: #fff !important; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 6px; width: 100%; transition: transform .25s ease, box-shadow .25s ease; }
.hm-form button:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(10, 16, 40, .5); }
.hm-hp { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }
.hm-form-done { display: flex; flex-direction: column; gap: 8px; color: var(--hm-slate); }
.hm-form-done-title { font-size: 20px; font-weight: 800; color: var(--hm-ink); }

/* ---------- FAQ ---------- */
.hm-faqs { gap: 12px !important; }
.hm-faq { border: 1px solid var(--hm-line); border-radius: 14px; background: #fff; }
.hm-faq summary { list-style: none; cursor: pointer; padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 17px; font-weight: 700; }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after { content: ""; width: 18px; height: 18px; flex: none; background: var(--hm-chevron) center / contain no-repeat; transition: transform .2s; }
.hm-faq[open] summary::after { transform: rotate(180deg); }
.hm-faq > p { padding: 0 24px 22px; font-size: 15px; line-height: 1.65; color: var(--hm-slate); }

/* ---------- Footer ---------- */
.hm-footer { background: #08090C; color: #C3C9D9; }
.hm-footer-inner { padding: 80px 24px 40px; gap: 56px !important; }
.hm-footer-top { flex-direction: row !important; flex-wrap: wrap; gap: 48px !important; justify-content: space-between; }
.hm-footer-brand { flex: 1 1 320px; max-width: 400px; gap: 18px !important; }
.hm-footer-brand p:not(.hm-logo) { font-size: 15px; line-height: 1.65; }
.hm-footer-cols { flex-direction: row !important; gap: 72px !important; flex-wrap: wrap; }
.hm-footer-col { gap: 14px !important; }
.hm-footer-h { font-size: 13px; font-weight: 700; color: #fff; }
.hm-footer-links { list-style: none; padding: 0 !important; display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.hm-footer-links li { margin: 0; }
.hm-footer-links a { color: #C3C9D9; text-decoration: none; }
.hm-footer-links a:hover { color: #fff; }
.hm-footer-bottom { border-top: 1px solid #1E2230; padding-top: 24px; flex-direction: row !important; justify-content: space-between; gap: 16px !important; flex-wrap: wrap; font-size: 13px; color: #8A90A0; }
.hm-footer-domain::before { background-image: var(--hm-bolt-steel-light) !important; width: 12px !important; height: 12px !important; }

/* ---------- Web design: intro ---------- */
.hm-intro { background: linear-gradient(180deg, #F3F5FB 0%, #fff 80%); }
.hm-intro > .hm-wrap { padding: 112px 24px 96px; }
.hm-platforms { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 12px 16px !important; padding-top: 12px; }
.hm-pill-list { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-pill-list li { font-size: 14px; font-weight: 700; color: #3A4152; padding: 7px 14px; border-radius: 999px; border: 1px solid #DADDE5; background: rgba(255, 255, 255, .7); margin: 0; }
.hm-pindex { position: relative; display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 24px !important; margin-top: 48px !important; }
.hm-pindex::before { content: ""; position: absolute; inset: -6% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(92, 107, 130, .18), rgba(174, 184, 204, .22) 55%, rgba(255, 255, 255, 0) 100%); filter: blur(44px); pointer-events: none; z-index: 0; }
.hm-pi-card { position: relative; z-index: 1; gap: 12px !important; }
.hm-pi-card .hm-win { transition: transform .35s var(--hm-ease), box-shadow .35s ease; }
.hm-pi-card:hover .hm-win { transform: translateY(-4px); box-shadow: 0 34px 56px -30px rgba(10, 16, 40, .55), 0 0 0 1px rgba(16, 24, 48, .07); }
.hm-pi-name { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; padding: 0 2px; }
.hm-pi-name a { color: var(--hm-ink); text-decoration: none; }
.hm-pi-ind { font-size: 13px; color: var(--hm-muted); margin-top: -10px !important; padding: 0 2px; }

/* ---------- Web design: projects ---------- */
.hm-projects > .hm-wrap { padding: 24px 24px 120px; gap: 96px !important; }
.hm-project { background: var(--hm-mist); padding: 40px; border-radius: 36px; scroll-margin-top: 96px; gap: 20px !important; }
.hm-project-grid { flex-direction: row !important; flex-wrap: wrap; gap: 32px 56px !important; align-items: stretch; }
.hm-project-text { flex: 0 0 380px; gap: 20px !important; }
.hm-stage { flex: 999 1 560px; align-self: flex-start; gap: 22px !important; }
.hm-project-head { gap: 8px !important; padding-bottom: 18px; border-bottom: 1px solid #DDE2EC; }
.hm-project-title { font-size: 30px; line-height: 1.1; letter-spacing: -0.03em; }
.hm-tagline { font-size: 16px; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; color: var(--hm-steel); }
.hm-h3-sm { font-size: 18px; line-height: 1.25; letter-spacing: -0.02em; }
.hm-block { gap: 8px !important; }
.hm-block p { font-size: 15px; line-height: 1.6; color: var(--hm-slate); }
.hm-features { margin: auto 0 !important; gap: 12px !important; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid #E2E6EE; box-shadow: 0 18px 36px -28px rgba(10, 16, 40, .35); }
.hm-pills { list-style: none; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-pills li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px 7px 10px; border-radius: 999px; background: linear-gradient(180deg, #F1F4F9 0%, #E8ECF3 100%); border: 1px solid #DCE2EC; font-size: 13px; line-height: 1.2; font-weight: 600; color: var(--hm-ink); }
.hm-pills li::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--ic, var(--hm-tick-steel)) center / contain no-repeat; }
.hm-stage-row { flex-direction: row !important; gap: 22px !important; align-items: stretch; }
.hm-stage-row .hm-inner { flex: 1 1 auto; min-width: 0; }
.hm-stage-row .hm-inner img { position: absolute; top: var(--bar); left: 0; width: 100%; height: calc(100% - var(--bar)); aspect-ratio: auto; }
.hm-stage-row .hm-phone { flex: 0 0 22%; width: 22%; align-self: flex-start; }

.hm-panel { overflow: hidden; border-radius: 12px; padding: 24px; gap: 16px !important; background: linear-gradient(120deg, #0B0D14 0%, #101A33 55%, #14275C 100%); }
.hm-panel > .hm-panel-bg { position: absolute !important; right: 0; top: 0; width: 58%; height: 100%; z-index: 0; }
.hm-panel-bg img { width: 100%; height: 100% !important; object-fit: cover; object-position: left center; display: block; }
.hm-panel-head { flex-direction: row !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px !important; padding: 4px 4px 0; }
.hm-panel-head .wp-block-buttons { padding-top: 0; }
.hm-panel-titles { gap: 4px !important; }
.hm-panel-title { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
.hm-specs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px !important; }
.hm-spec { display: grid !important; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px !important; row-gap: 4px !important; align-items: center; padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); }
.hm-spec::before { content: ""; grid-row: 1 / span 2; width: 48px; height: 48px; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(174, 184, 204, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); background: var(--icl, none) center / 24px no-repeat, linear-gradient(180deg, rgba(174, 184, 204, .22), rgba(174, 184, 204, .08)); }
.hm-spec-k { font-size: 13px; font-weight: 700; color: var(--hm-steel-light); align-self: end; }
.hm-spec-v { font-size: 16px; line-height: 1.4; font-weight: 700; color: #fff; align-self: start; }

/* ---------- Web design: how it works ---------- */
.hm-steps { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 36px !important; }
.hm-step { position: relative; gap: 14px !important; }
.hm-step::before { content: ""; width: 60px; height: 60px; margin-bottom: 10px; box-sizing: border-box; border-radius: 18px; border: 1px solid #DDE2EC; box-shadow: 0 14px 28px -18px rgba(92, 107, 130, .45); background: var(--ic, none) center / 26px no-repeat, linear-gradient(180deg, #F3F5FB 0%, #E7EBF4 100%); position: relative; z-index: 1; }
.hm-step:not(:last-child)::after { content: ""; position: absolute; top: 30px; left: 76px; right: -24px; height: 1px; background: linear-gradient(90deg, #AEB8CC, rgba(174, 184, 204, .15)); }
.hm-step-title { font-size: 21px; letter-spacing: -0.02em; }
.hm-step p { font-size: 15px; line-height: 1.65; color: var(--hm-slate); }
.hm-cta-row { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 16px 24px !important; margin-top: -16px !important; padding-top: 40px; border-top: 1px solid var(--hm-line); }
.hm-cta-row .wp-block-buttons { padding-top: 0; }

/* ---------- Ordinary pages ---------- */
.hm-plain { padding: 96px 24px 120px; }
.hm-plain-title { font-size: 48px; letter-spacing: -0.03em; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
	.hm-rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .8s var(--hm-ease); }
	.hm-rv.hm-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.hm-marquee-on .hm-marquee-track { animation: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
	.hm-step::after { display: none; }
	.hm-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.hm-wrap { padding-top: 96px; padding-bottom: 96px; }
	.hm-hero > .hm-wrap { padding: 80px 24px 96px; }
	.hm-intro > .hm-wrap { padding: 80px 24px 64px; }
	.hm-h1 { font-size: 50px; }
	.hm-h2, .hm-h2-xl { font-size: 40px; }
	.hm-quote { font-size: 32px; }
	.hm-process-intro { position: static; }
	.hm-project { padding: 28px; }
	.hm-project-grid { display: grid !important; grid-template-columns: 1fr; }
	.hm-project-text { display: contents !important; }
	.hm-project-head { order: 0; }
	.hm-stage { order: 1; }
	.hm-project-text > :not(.hm-project-head) { order: 2; }
	.hm-features { margin: 0 !important; }
	.hm-header-right { gap: 16px !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 720px) {
	.hm-pcards, .hm-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.hm-wrap { padding: 72px 20px; }
	.hm-hero > .hm-wrap { padding: 56px 20px 72px; }
	.hm-hero-grid { gap: 48px !important; }
	.hm-intro > .hm-wrap { padding: 56px 20px 40px; }
	.hm-logos > .hm-wrap { padding: 44px 20px; }
	.hm-projects > .hm-wrap { padding: 16px 16px 80px; gap: 56px !important; }
	.hm-header-inner { padding: 12px 20px; }
	.hm-h1 { font-size: 38px; line-height: 1.08; }
	.hm-h2, .hm-h2-xl { font-size: 31px; }
	.hm-project-title { font-size: 27px; }
	.hm-quote { font-size: 24px; }
	.hm-lead { font-size: 17px; }
	.hm-project { padding: 16px; border-radius: 24px; }
	.hm-card, .hm-step-card { padding: 24px; }
	.hm-form-card { padding: 24px; }
	.hm-specs { grid-template-columns: 1fr; }
	.hm-panel { padding: 18px; }
	.hm-panel > .hm-panel-bg { width: 100%; opacity: .35; }
	.hm-stage-row { gap: 12px !important; }
	.hm-header-cta { display: none !important; }
}
@media (max-width: 600px) {
	.hm-nav .wp-block-navigation__responsive-container-open { padding: 6px; }
}
@media (max-width: 560px) {
	.hm-pindex { grid-template-columns: 1fr 1fr; gap: 20px 14px !important; }
	.hm-clogo { height: 48px; }
	.hm-clogo img { max-height: 40px; }
}

/* ---------- v1.1 ---------- */
.hm-form-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--hm-muted); text-align: center; }
.hm-form-note a { color: var(--hm-ink); text-decoration: underline; text-underline-offset: 2px; }
.hm-plain .wp-block-post-content { font-size: 16px; line-height: 1.7; color: var(--hm-slate); }
.hm-plain .wp-block-post-content h2 { font-size: 24px; letter-spacing: -0.02em; margin-top: 2.2em; margin-bottom: .5em; color: var(--hm-ink); }
.hm-plain .wp-block-post-content a { color: var(--hm-ink); text-decoration: underline; text-underline-offset: 2px; }
.hm-plain .wp-block-post-content li { margin-bottom: .5em; }
.hm-plain-title { margin-bottom: 24px; }

/* ---------- v1.2 ---------- */
.hm-avatar-img { width: 52px; height: 52px; flex: none; margin: 0 !important; }
.hm-avatar-img img { width: 52px !important; height: 52px !important; border-radius: 999px; object-fit: cover; display: block; box-shadow: 0 0 0 3px #fff, 0 10px 24px -12px rgba(10, 16, 40, .5); }