/* NoraPix start page (hero with domain search, fact bar, solutions, steps, domain band, templates, why). Uses theme variables. */
.hm-hero, .hm-bar, .hm-section, .hm-domain-band { font-size: 17px; line-height: 1.65; color: #2b3340; }
.hm-hero .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* hero */
.hm-hero { position: relative; padding: 150px 0 80px; background: radial-gradient(900px 480px at 85% 0%, rgba(var(--color-primary-rgb), .13), rgba(var(--color-primary-rgb), 0) 70%), linear-gradient(180deg, rgba(var(--color-primary-rgb), .06) 0%, #fff 100%); overflow: hidden; }
.hm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.hm-pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(var(--color-primary-rgb), .25); color: var(--color-primary); font-weight: 700; font-size: 13.5px; padding: 7px 14px; border-radius: 999px; margin-bottom: 20px; }
.hm-pill i { font-size: 12px; }
.hm-hero h1 { font-size: 50px; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 20px; color: #111827; hyphens: manual; }
.hm-lead { font-size: 19px; line-height: 1.65; color: #4b5563; max-width: 600px; margin: 0 0 28px; }

.hm-domain { display: flex; align-items: center; gap: 10px; background: #fff; border: 2px solid #e3e8ef; border-radius: 18px; padding: 8px 8px 8px 20px; box-shadow: 0 18px 50px rgba(16, 24, 40, .1); max-width: 640px; transition: border-color .2s, box-shadow .2s; }
.hm-domain:focus-within { border-color: var(--color-primary); box-shadow: 0 18px 50px rgba(var(--color-primary-rgb), .18); }
.hm-domain > i { color: var(--color-primary); font-size: 20px; flex: 0 0 auto; }
.hm-domain input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 18px; padding: 12px 4px; color: #111827; }
.hm-domain input::placeholder { color: #9ca3af; }
.hm-domain .btn { flex: 0 0 auto; border-radius: 12px; padding: 14px 26px; font-weight: 700; white-space: nowrap; }

.hm-tlds { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; }
.hm-tld { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid #e3e8ef; background: #fff; border-radius: 12px; padding: 8px 14px; cursor: pointer; font-size: 15px; color: #1f2937; transition: border-color .15s, background-color .15s; }
.hm-tld strong { font-weight: 800; }
.hm-tld span { color: #6b7280; font-size: 14px; }
.hm-tld:hover, .hm-tld:focus-visible, .hm-tld.is-on { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb), .06); }
.hm-tld:focus-visible { outline: 3px solid rgba(var(--color-primary-rgb), .35); outline-offset: 2px; }
.hm-fine { font-size: 13.5px; color: #8a919c; margin: 0 0 26px; }
.hm-fine a { color: var(--color-primary); }
.hm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hm-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: #4b5563; }
.hm-trust li { display: flex; align-items: center; gap: 8px; }
.hm-trust i { color: var(--color-primary); font-size: 12px; }

/* hero visual */
.hm-hero-visual { position: relative; min-height: 520px; }
.hm-browser { position: absolute; background: #fff; border: 1px solid #e3e8ef; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(16, 24, 40, .18); }
.hm-browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3f6fa; border-bottom: 1px solid #e8ecf1; }
.hm-browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: #d3dae3; }
.hm-browser-bar em { margin-left: 10px; font-style: normal; font-size: 12px; color: #6b7280; background: #fff; border-radius: 8px; padding: 3px 12px; }
.hm-browser img { display: block; width: 100%; height: calc(100% - 38px); object-fit: cover; object-position: top; }
.hm-browser--main { left: 8%; right: 4%; top: 20px; height: 440px; z-index: 2; }
.hm-browser--a { left: -2%; bottom: 10px; width: 36%; height: 230px; z-index: 3; transform: rotate(-3deg); }
.hm-browser--b { right: -3%; bottom: 0; width: 34%; height: 210px; z-index: 3; transform: rotate(3deg); }
.hm-badge { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e3e8ef; border-radius: 999px; padding: 9px 16px; font-weight: 700; font-size: 14px; color: #1f2937; box-shadow: 0 14px 34px rgba(16, 24, 40, .14); }
.hm-badge i { color: var(--color-primary); }
.hm-badge--1 { top: 2px; left: 0; }
.hm-badge--2 { top: 46%; right: -2%; }
.hm-badge--3 { bottom: 40%; left: -3%; }

/* fact bar */
.hm-bar { padding: 0 0 20px; }
.hm-bar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid #e8ecf1; border-radius: 20px; box-shadow: 0 14px 40px rgba(16, 24, 40, .06); margin-top: -30px; position: relative; z-index: 3; }
.hm-bar-grid > div { padding: 24px 26px; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; border-left: 1px solid #eef1f5; }
.hm-bar-grid > div:first-child { border-left: 0; }
.hm-bar-grid i { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.hm-bar-grid strong { font-size: 16px; line-height: 1.3; color: #111827; }
.hm-bar-grid span { font-size: 14.5px; line-height: 1.5; color: #6b7280; }

/* sections */
.hm-section { padding: 90px 0; }
.hm-section--tint { background: rgba(var(--color-primary-rgb), .045); }
.hm-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.hm-head h2, .hm-why-copy h2, .hm-domain-band h2 { font-size: 38px; font-weight: 800; line-height: 1.2; margin: 0 0 14px; color: #111827; }
.hm-head p { font-size: 18px; color: #4b5563; margin: 0; }
.hm-eyebrow { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px; }
.hm-eyebrow--light { color: #a7f3d0; }
.hm-more { text-align: center; margin: 34px 0 0; }
.hm-more a:not(.btn) { font-weight: 700; text-decoration: none; color: var(--color-primary); }
.hm-more a:not(.btn):hover { text-decoration: underline; }
.hm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* steps */
.hm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: s; }
.hm-steps li { background: #fff; border: 1px solid #e8ecf1; border-radius: 20px; padding: 28px 26px; position: relative; }
.hm-step-no { width: 46px; height: 46px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.hm-steps h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: #111827; }
.hm-steps p { margin: 0; font-size: 15.5px; color: #4b5563; }

/* domain band */
.hm-domain-band { background: linear-gradient(135deg, var(--color-primary), #0b7a5c); padding: 80px 0; color: #fff; }
.hm-domain-band h2 { color: #fff; }
.hm-domain-band p { color: rgba(255, 255, 255, .88); font-size: 18px; max-width: 520px; margin: 0 0 26px; }
.hm-domain-band .btn-light { background: #fff; color: var(--color-primary); border-color: #fff; font-weight: 700; border-radius: 12px; }
.hm-domain-band .btn-light:hover { background: #ecfdf5; }
.hm-domain-band-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.hm-domain-prices { list-style: none; margin: 0; padding: 8px 24px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: 20px; backdrop-filter: blur(6px); }
.hm-domain-prices li { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 18px; }
.hm-domain-prices li:first-child { border-top: 0; }
.hm-domain-prices strong { font-size: 22px; font-weight: 800; }
.hm-domain-prices small { font-size: 13px; opacity: .8; }

/* templates */
.hm-tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.hm-tpl { display: block; text-decoration: none; color: #1f2937; border: 1px solid #e8ecf1; border-radius: 18px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; }
.hm-tpl:hover { box-shadow: 0 22px 50px rgba(16, 24, 40, .14); transform: translateY(-3px); color: #1f2937; }
.hm-tpl-img { display: block; height: 300px; overflow: hidden; background: #f3f6fa; }
.hm-tpl-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .6s ease; }
.hm-tpl:hover .hm-tpl-img img { transform: scale(1.04); }
.hm-tpl-name { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-weight: 700; font-size: 16px; border-top: 1px solid #eef1f5; }
.hm-tpl-name i { color: var(--color-primary); font-size: 13px; }

/* why */
.hm-why { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.hm-why-copy p { font-size: 18px; color: #4b5563; margin: 0 0 26px; }
.hm-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hm-feature { background: #fff; border: 1px solid #e8ecf1; border-radius: 18px; padding: 24px; }
.hm-feature img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 14px; }
.hm-feature h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: #111827; }
.hm-feature p { margin: 0; font-size: 15px; color: #4b5563; line-height: 1.6; }

@media (max-width: 1199px) {
  .hm-hero { padding-top: 110px; }
  .hm-hero h1 { font-size: 44px; }
  .hm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .hm-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hm-hero-visual { min-height: 420px; max-width: 560px; margin: 0 auto; width: 100%; }
  .hm-browser--main { height: 360px; }
  .hm-bar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-bar-grid > div:nth-child(3) { border-left: 0; }
  .hm-bar-grid > div:nth-child(n+3) { border-top: 1px solid #eef1f5; }
  .hm-domain-band-grid, .hm-why { grid-template-columns: 1fr; gap: 36px; }
  .hm-tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .hm-hero { padding: 96px 0 56px; }
  .hm-hero h1 { font-size: 33px; }
  .hm-lead { font-size: 17px; }
  .hm-domain { flex-wrap: wrap; padding: 10px; gap: 6px; }
  .hm-domain > i { display: none; }
  .hm-domain input { width: 100%; flex-basis: 100%; padding: 12px 10px; }
  .hm-domain .btn { width: 100%; }
  .hm-actions .btn { width: 100%; text-align: center; }
  .hm-hero-visual { min-height: 330px; }
  .hm-browser--main { height: 290px; left: 6%; right: 6%; }
  .hm-browser--a, .hm-browser--b { height: 150px; }
  .hm-badge { font-size: 12.5px; padding: 7px 12px; }
  .hm-bar-grid { grid-template-columns: 1fr; margin-top: -20px; }
  .hm-bar-grid > div { border-left: 0; border-top: 1px solid #eef1f5; }
  .hm-bar-grid > div:first-child { border-top: 0; }
  .hm-section { padding: 60px 0; }
  .hm-head h2, .hm-why-copy h2, .hm-domain-band h2 { font-size: 28px; }
  .hm-cards, .hm-steps, .hm-tpl-grid, .hm-why-grid { grid-template-columns: 1fr; }
  .hm-tpl-img { height: 240px; }
  .hm-domain-band { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) { .hm-tpl, .hm-tpl-img img { transition: none; } }

/* buttons keep normal German capitalisation on this page */
.hm-hero .btn, .hm-section .btn, .hm-domain-band .btn { text-transform: none; letter-spacing: 0; }

/* steps v2 */
.hm-section--steps { background: linear-gradient(180deg, #fff 0%, rgba(var(--color-primary-rgb), .06) 100%); position: relative; }
.hm-steps2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; counter-reset: st; }
.hm-steps2::before { content: ""; position: absolute; left: 12%; right: 12%; top: 168px; border-top: 2px dashed rgba(var(--color-primary-rgb), .35); z-index: 0; }
.hm-st { position: relative; z-index: 1; background: #fff; border: 1px solid #e8ecf1; border-radius: 22px; padding: 14px 14px 26px; box-shadow: 0 16px 44px rgba(16, 24, 40, .07); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.hm-st:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(16, 24, 40, .12); }
.hm-st-art { position: relative; background: linear-gradient(145deg, rgba(var(--color-primary-rgb), .1), rgba(var(--color-primary-rgb), .03)); border-radius: 16px; height: 170px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; overflow: hidden; }
.hm-st-art svg { width: 86%; height: auto; max-height: 150px; }
.hm-st-no { position: absolute; left: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(var(--color-primary-rgb), .35); z-index: 2; }
.hm-st h3 { font-size: 20px; font-weight: 800; margin: 0 14px 8px; color: #111827; }
.hm-st p { margin: 0 14px 16px; font-size: 15.5px; line-height: 1.6; color: #4b5563; flex: 1 1 auto; }
.hm-st-fact { display: flex; align-items: flex-start; gap: 8px; margin: 0 14px; padding-top: 14px; border-top: 1px solid #eef1f5; font-size: 14px; font-weight: 600; color: #1f2937; line-height: 1.4; }
.hm-st-fact i { color: var(--color-primary); margin-top: 3px; }
.hm-steps-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }
.hm-steps-cta .btn { text-transform: none; letter-spacing: 0; }
.hm-st-art .s-g { fill: #e5eaf0; } .hm-st-art .s-w { fill: #fff; } .hm-st-art .s-l { fill: #e8edf3; }
.hm-st-art .s-line { stroke: #dbe2ea; stroke-width: 1.5; }
.hm-st-art .s-p { fill: var(--color-primary); } .hm-st-art .s-pl { fill: rgba(var(--color-primary-rgb), .22); }
.hm-st-art .s-p-stroke { fill: none; stroke: var(--color-primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hm-st-art .s-pw { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.hm-st-art .s-ok { fill: #16a34a; } .hm-st-art .s-ck { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hm-st-art .s-c2 { fill: #DAABEE; } .hm-st-art .s-c3 { fill: #3b82f6; } .hm-st-art .s-c4 { fill: #ec4899; }
.hm-st-art .s-ring { fill: none; stroke: var(--color-primary); stroke-width: 2.5; }
@media (max-width: 1199px) {
  .hm-steps2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-steps2::before { display: none; }
}
@media (max-width: 575px) {
  .hm-steps2 { grid-template-columns: 1fr; }
  .hm-st-art { height: 160px; }
  .hm-steps-cta .btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .hm-st { transition: none; } }

/* plugins v2 */
.hm-pl-section { background: #fff; }
.hm-pl-top { display: grid; grid-template-columns: 1.25fr .75fr; gap: 48px; align-items: end; margin-bottom: 36px; }
.hm-pl-intro h2 { font-size: 38px; font-weight: 800; line-height: 1.2; margin: 0 0 14px; color: #111827; }
.hm-pl-intro p { font-size: 18px; color: #4b5563; margin: 0; max-width: 680px; }
.hm-pl-stats { display: flex; align-items: center; gap: 24px; background: rgba(var(--color-primary-rgb), .06); border: 1px solid rgba(var(--color-primary-rgb), .15); border-radius: 20px; padding: 22px 26px; }
.hm-pl-count { text-align: center; flex: 0 0 auto; }
.hm-pl-count strong { display: block; font-size: 56px; line-height: 1; font-weight: 800; color: var(--color-primary); }
.hm-pl-count span { font-weight: 700; color: #1f2937; }
.hm-pl-stats ul { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; }
.hm-pl-stats li { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 6px; color: #1f2937; }
.hm-pl-stats li i { color: var(--color-primary); font-size: 11px; margin-top: 6px; }
.hm-pl-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.hm-pl-tab { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #e3e8ef; background: #fff; border-radius: 999px; padding: 10px 18px; font-size: 15px; font-weight: 700; color: #374151; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.hm-pl-tab i { font-size: 14px; color: var(--color-primary); }
.hm-pl-tab:hover { border-color: var(--color-primary); }
.hm-pl-tab:focus-visible { outline: 3px solid rgba(var(--color-primary-rgb), .35); outline-offset: 2px; }
.hm-pl-tab.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.hm-pl-tab.is-on i { color: #fff; }
.hm-pl-panel[hidden] { display: none; }
.hm-pl-lead { font-size: 16px; color: #6b7280; margin: 0 0 18px; }
.hm-pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hm-pl-card { position: relative; display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid #e8ecf1; border-radius: 18px; padding: 22px; text-decoration: none; color: #1f2937; transition: box-shadow .2s, transform .2s, border-color .2s; }
.hm-pl-card:hover { box-shadow: 0 20px 46px rgba(16, 24, 40, .12); transform: translateY(-3px); border-color: rgba(var(--color-primary-rgb), .35); color: #1f2937; }
.hm-pl-ico { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; box-shadow: 0 10px 22px rgba(16, 24, 40, .18); }
.hm-pl-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-right: 22px; }
.hm-pl-body strong { font-size: 17.5px; font-weight: 800; line-height: 1.3; color: #111827; }
.hm-pl-body small { font-size: 13px; color: #8a919c; }
.hm-pl-body span { font-size: 15px; color: #4b5563; line-height: 1.55; margin-top: 4px; }
.hm-pl-go { position: absolute; right: 20px; top: 24px; font-size: 13px; color: #c3cad4; transition: color .2s, transform .2s; }
.hm-pl-card:hover .hm-pl-go { color: var(--color-primary); transform: translateX(3px); }
.hm-pl-how { margin-top: 36px; background: linear-gradient(135deg, var(--color-primary), #0b7a5c); border-radius: 22px; padding: 28px 32px; color: #fff; }
.hm-pl-how-title { font-weight: 800; font-size: 18px; margin-bottom: 18px; }
.hm-pl-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hm-pl-how li { display: flex; gap: 14px; align-items: flex-start; }
.hm-pl-how li > span { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--color-primary); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.hm-pl-how strong { display: block; font-size: 16.5px; margin-bottom: 2px; }
.hm-pl-how p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
@media (max-width: 1199px) { .hm-pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-pl-top { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 767px) {
  .hm-pl-intro h2 { font-size: 28px; }
  .hm-pl-stats { flex-direction: column; align-items: flex-start; }
  .hm-pl-tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 0 4px 6px; -webkit-overflow-scrolling: touch; }
  .hm-pl-tab { flex: 0 0 auto; }
  .hm-pl-grid, .hm-pl-how ol { grid-template-columns: 1fr; }
  .hm-pl-how { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) { .hm-pl-card, .hm-pl-go { transition: none; } }

/* solutions v2 */
.hm-sol { background: #fff; }
.hm-sol-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hm-sol-card { --t1: #0b7a5c; --t2: #064e3b; display: flex; flex-direction: column; background: #fff; border: 1px solid #e8ecf1; border-radius: 24px; overflow: hidden; text-decoration: none; color: #1f2937; box-shadow: 0 14px 40px rgba(16, 24, 40, .07); transition: transform .2s, box-shadow .2s; }
.hm-sol-card:hover { transform: translateY(-5px); box-shadow: 0 30px 64px rgba(16, 24, 40, .15); color: #1f2937; }
.hm-tone-green { --t1: #10a37f; --t2: #064e3b; }
.hm-tone-blue { --t1: #0ea5c6; --t2: #155e75; }
.hm-tone-violet { --t1: #c58be0; --t2: #7a3a96; }
.hm-sol-top { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 170px; padding: 22px; background: linear-gradient(135deg, var(--t1), var(--t2)); overflow: hidden; }
.hm-sol-top::before, .hm-sol-top::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.hm-sol-top::before { width: 190px; height: 190px; right: -50px; top: -70px; }
.hm-sol-top::after { width: 120px; height: 120px; right: 60px; bottom: -64px; background: rgba(255, 255, 255, .08); }
.hm-sol-ico { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 18px; background: #fff; color: var(--t2); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 14px 30px rgba(0, 0, 0, .22); }
.hm-sol-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-sol-tags em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 4px 11px; backdrop-filter: blur(4px); }
.hm-sol-main { padding: 24px 24px 8px; flex: 1 1 auto; }
.hm-sol-main strong { display: block; font-size: 23px; font-weight: 800; color: #111827; margin-bottom: 14px; }
.hm-sol-main ul { list-style: none; margin: 0; padding: 0; }
.hm-sol-main li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: #4b5563; margin-bottom: 9px; }
.hm-sol-main li i { color: var(--t1); font-size: 12px; margin-top: 6px; }
.hm-sol-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px 22px; border-top: 1px solid #eef1f5; margin-top: 10px; }
.hm-sol-price { font-size: 14.5px; color: #6b7280; }
.hm-sol-price b { font-size: 19px; color: #111827; }
.hm-sol-go { font-weight: 800; font-size: 15px; color: var(--t2); margin-left: auto; }
.hm-sol-go i { margin-left: 4px; transition: transform .2s; font-size: 13px; }
.hm-sol-card:hover .hm-sol-go i { transform: translateX(4px); }
.hm-sol-small { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.hm-mini { display: flex; align-items: center; gap: 12px; padding: 16px; background: #f7f9fb; border: 1px solid #e8ecf1; border-radius: 16px; text-decoration: none; color: #1f2937; transition: background-color .15s, border-color .15s, transform .15s; }
.hm-mini:hover { background: #fff; border-color: rgba(var(--color-primary-rgb), .4); transform: translateY(-2px); color: #1f2937; }
.hm-mini-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: rgba(var(--color-primary-rgb), .1); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.hm-mini strong { display: block; font-size: 14.5px; line-height: 1.3; color: #111827; }
.hm-mini small { display: block; font-size: 12.5px; color: #8a919c; margin-top: 1px; }
.hm-mini--all { background: var(--color-primary); border-color: var(--color-primary); }
.hm-mini--all strong, .hm-mini--all small { color: #fff; }
.hm-mini--all small { opacity: .85; }
.hm-mini--all .hm-mini-ico { background: rgba(255, 255, 255, .2); color: #fff; }
.hm-mini--all:hover { background: #0b7a5c; border-color: #0b7a5c; }
@media (max-width: 1199px) { .hm-sol-small { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .hm-sol-big { grid-template-columns: 1fr; } .hm-sol-top { min-height: 140px; } }
@media (max-width: 575px) { .hm-sol-small { grid-template-columns: 1fr; } .hm-sol-main strong { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .hm-sol-card, .hm-mini, .hm-sol-go i { transition: none; } }

/* no underline on hover inside cards (the theme underlines every link on hover) */
.hm-sol-card, .hm-sol-card:hover, .hm-sol-card:focus, .hm-mini, .hm-mini:hover, .hm-mini:focus, .hm-tpl, .hm-tpl:hover, .hm-tpl:focus,
.hm-pl-card, .hm-pl-card:hover, .hm-pl-card:focus, .hm-tld, .hm-tld:hover, .hm-more a, .hm-more a:hover, .hm-bar a, .hm-bar a:hover,
.lp-card, .lp-card:hover, .lp-card:focus { text-decoration: none !important; }
.hm-sol-card *, .hm-mini *, .hm-tpl *, .hm-pl-card *, .lp-card * { text-decoration: none !important; }

/* secondary colour: modern dark grey (graphite). Green = brand/actions, graphite = dark surfaces and text, light grey = quiet surfaces */
:root { --color-secondary: #1f2328; --color-secondary-2: #2b3036; --color-secondary-rgb: 31, 35, 40; --color-secondary-soft: #f4f5f7; --color-secondary-line: #e4e7eb; --color-secondary-ink: #ffffff; }
.hm-eyebrow { color: var(--color-primary); }
.hm-eyebrow--light { color: #6ee7b7; }
.hm-hero { background: radial-gradient(820px 460px at 90% 0%, rgba(var(--color-primary-rgb), .1), rgba(var(--color-primary-rgb), 0) 70%), linear-gradient(180deg, #f4f5f7 0%, #fff 100%); }
.hm-pill { background: #fff; border-color: var(--color-secondary-line); color: var(--color-secondary); }
.hm-pill i { color: var(--color-primary); }
.hm-mark { background: none; padding: 0; }
.hm-lead { color: #4b5563; }
.hm-tld span { color: #6b7280; font-weight: 600; }
.hm-tld:hover, .hm-tld.is-on { border-color: var(--color-primary); background: var(--color-secondary-soft); }
.hm-badge i, .hm-badge--1 i, .hm-badge--2 i, .hm-badge--3 i { color: var(--color-primary); }
.hm-bar-grid i, .hm-bar-grid > div:nth-child(n) i { background: var(--color-secondary-soft); color: var(--color-primary); border: 1px solid var(--color-secondary-line); }
.hm-section--steps { background: linear-gradient(180deg, #fff 0%, var(--color-secondary-soft) 100%); }
.hm-st-art { background: linear-gradient(145deg, var(--color-secondary-soft), #fff); border: 1px solid var(--color-secondary-line); }
.hm-st-no { background: var(--color-secondary); color: #fff; box-shadow: 0 8px 18px rgba(var(--color-secondary-rgb), .3); }
.hm-steps2::before { border-top-color: #cfd4da; }
.hm-st-fact i { color: var(--color-primary); }
.hm-st-art .s-c2 { fill: #6b7280; }
.hm-sol-card, .hm-tone-green, .hm-tone-blue, .hm-tone-violet { --t1: #0b7a5c; --t2: #064e3b; }
.hm-sol-ico { background: #fff; color: var(--color-primary); }
.hm-sol-main li i { color: var(--color-primary); }
.hm-sol-go { color: var(--color-primary); }
.hm-sol-price { background: var(--color-secondary-soft); border: 1px solid var(--color-secondary-line); color: #4b5563; padding: 5px 13px; border-radius: 999px; }
.hm-sol-price b { color: var(--color-secondary); }
.hm-mini-ico, .hm-mini:nth-child(n) .hm-mini-ico { background: #fff; color: var(--color-primary); border: 1px solid var(--color-secondary-line); }
.hm-mini--all { background: var(--color-secondary); border-color: var(--color-secondary); }
.hm-mini--all:hover { background: var(--color-secondary-2); border-color: var(--color-secondary-2); }
.hm-mini--all .hm-mini-ico { background: rgba(255, 255, 255, .12); color: #fff; border-color: transparent; }
.hm-domain-band { background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-2)); }
.hm-domain-band .btn-light { background: #fff; border-color: #fff; color: var(--color-secondary); }
.hm-domain-band .btn-light:hover { background: #e5e7eb; border-color: #e5e7eb; color: var(--color-secondary); }
.hm-domain-prices { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.hm-domain-prices strong { color: #fff; }
.hm-tpl-name i { color: var(--color-primary); }
.hm-section--tint { background: var(--color-secondary-soft); }
.hm-feature, .hm-feature:nth-child(n) { border-top: 1px solid #e8ecf1; }
.hm-pl-stats { background: var(--color-secondary-soft); border-color: var(--color-secondary-line); }
.hm-pl-count strong { color: var(--color-secondary); }
.hm-pl-stats li i { color: var(--color-primary); }
.hm-pl-ico { background: var(--color-secondary-soft) !important; color: var(--color-primary); border: 1px solid var(--color-secondary-line); box-shadow: none; }
.hm-pl-how { background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-2)); }
.hm-pl-how li > span { background: #fff; color: var(--color-secondary); }