:root { --hm-ink:#0B0B0F; --hm-mute:#5b5b63; --hm-line:rgba(11,11,15,.10); --hm-bg:#F3F3F1;
  --hm-teal:#4DB6C4; --hm-lime:#B8F35C; --hm-pink:#F0679F; --hm-amber:#F7BC7C; --hm-ease:cubic-bezier(.2,.8,.2,1);
  --hm-grad: linear-gradient(100deg,#4DB6C4,#B8F35C); --hm-grad2: linear-gradient(100deg,#F26AA5,#D4208A 60%,#F7BC7C); }
body.hm-body { background: var(--hm-bg); color: var(--hm-ink); }
main#main.hm { background: var(--hm-bg); overflow-x: clip; margin-top: calc(var(--hdr-h) * -1); }
.hm-sec, [id=templates], [id=plans] { scroll-margin-top: 100px; }
:where(.hm) section { max-width: none; padding: 0; margin: 0; }
.hm-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.hm-sec { padding: 112px 0 0; }
.hm h1, .hm h2 { font-family: var(--font-display, inherit); letter-spacing: -.035em; color: var(--hm-ink); }
.hm h2 { margin: 0 0 18px; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.05; font-weight: 700; text-wrap: balance; }
.hm-lead { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--hm-mute); max-width: 52ch; text-wrap: pretty; }
.hm-mark { background: var(--hm-grad2); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hm-flow 6s ease-in-out infinite; }
.hm-mark--teal { background-image: linear-gradient(100deg,#35A4B7,#7CC93A); }
@keyframes hm-flow { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } }

.hm .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--hm-ease), transform .9s var(--hm-ease); transition-delay: calc(var(--d, 0) * 1ms); }
.hm .reveal.is-visible { opacity: 1; transform: none; filter: none; }
.hm-in { opacity: 0; transform: translateY(14px); animation: hm-enter 1s var(--hm-ease) forwards; animation-delay: calc(var(--d, 0) * 1ms + 120ms); }
@keyframes hm-enter { to { opacity: 1; transform: none; } }

.hm-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 30px; border-radius: 999px; border: 1px solid transparent; font: 700 16px/1 var(--font-body, inherit); text-decoration: none; cursor: pointer; background: var(--hm-ink); color: #fff; transition: transform .25s var(--hm-ease), box-shadow .3s; }
.hm-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--hm-ease); }
.hm-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(11,11,15,.55); }
.hm-btn:hover::after { transform: translateX(120%); }
.hm-btn--ghost { background: #fff; color: var(--hm-ink); border-color: var(--hm-line); }
.hm-btn--grad { background: var(--hm-grad); background-size: 160% 100%; color: var(--hm-ink); box-shadow: 0 18px 30px -16px rgba(77,182,196,.8); }
.hm-btn:focus-visible { outline: 3px solid var(--hm-teal); outline-offset: 3px; }
.hm-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--hm-ink); text-decoration: none; margin-top: 22px; }
.hm-link svg { width: 18px; height: 18px; transition: transform .3s var(--hm-ease); }
.hm-link:hover svg { transform: translateX(5px); }

.hm-hero { position: relative; isolation: isolate; padding: calc(var(--hdr-h) + 118px) 0 70px; }
.hm-orbs { position: absolute; left: 0; right: 0; top: 0; height: 900px; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.hm-orbs i { position: absolute; border-radius: 50%; opacity: .9; will-change: transform; animation: hm-float 24s ease-in-out infinite; }
.hm-orbs i:nth-child(1) { width: 760px; height: 760px; left: -8%; top: -110px; background: radial-gradient(closest-side, #CFE0FF, color-mix(in srgb, #CFE0FF 62%, transparent) 28%, color-mix(in srgb, #CFE0FF 26%, transparent) 58%, color-mix(in srgb, #CFE0FF 7%, transparent) 82%, transparent); }
.hm-orbs i:nth-child(2) { width: 700px; height: 700px; right: -8%; top: -130px; background: radial-gradient(closest-side, #FFD6C2, color-mix(in srgb, #FFD6C2 62%, transparent) 28%, color-mix(in srgb, #FFD6C2 26%, transparent) 58%, color-mix(in srgb, #FFD6C2 7%, transparent) 82%, transparent); animation-delay: -8s; animation-duration: 28s; }
.hm-orbs i:nth-child(3) { width: 600px; height: 600px; left: 34%; top: 260px; background: radial-gradient(closest-side, #E3F7C9, color-mix(in srgb, #E3F7C9 62%, transparent) 28%, color-mix(in srgb, #E3F7C9 26%, transparent) 58%, color-mix(in srgb, #E3F7C9 7%, transparent) 82%, transparent); animation-delay: -13s; animation-duration: 32s; }
@keyframes hm-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(40px,20px,0); } }
.hm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.hm-hero h1 { margin: 0 0 22px; font-size: clamp(42px, 5.6vw, 76px); line-height: .98; font-weight: 800; letter-spacing: -.045em; text-wrap: balance; }
.hm-hero h1 .rotator-word { display: inline-block; background: var(--hm-grad2); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hm-flow 6s ease-in-out infinite; transition: opacity .3s, transform .3s, filter .3s; }
.hm-hero h1 .rotator-word.is-out { opacity: 0; transform: translateY(10px); filter: blur(6px); }
.hm-hero .hm-lead { max-width: 48ch; }
.hm-claim { margin: 34px 0 0; display: flex; align-items: center; gap: 6px; width: min(480px, 100%); padding: 7px 7px 7px 22px; background: #fff; border: 1.5px solid rgba(11,11,15,.12); border-radius: 999px; box-shadow: 0 24px 44px -28px rgba(11,11,15,.4); transition: box-shadow .3s, border-color .3s; }
.hm-claim:focus-within { border-color: var(--hm-teal); box-shadow: 0 0 0 5px rgba(77,182,196,.22), 0 24px 44px -28px rgba(11,11,15,.4); }
.hm-claim .claim-prefix { color: #77777f; font: 600 18px/1 var(--font-system); letter-spacing: -.01em; margin-right: -4px; }
.hm-claim .claim-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #77777f; caret-color: #77777f; font: 600 18px/1 var(--font-system); letter-spacing: -.01em; padding: 14px 0; }
.hm-claim .claim-input::placeholder { color: #a3a3ab; font-weight: 600; }
.hm-claim.is-invalid { animation: hm-shake .4s; border-color: #e5484d; }
@keyframes hm-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.hm-claim button { flex: none; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--hm-ink); color: #fff; font: 700 15px/1 var(--font-body, inherit); cursor: pointer; transition: transform .2s; }
.hm-claim button:hover { transform: scale(1.04); }
.hm-fine { margin: 14px 0 0 6px; font-size: 14px; color: var(--hm-mute); }

.hm-stage { position: relative; height: 640px; perspective: 1400px; }
.hm-phone { position: absolute; width: 270px; height: 548px; padding: 9px; border-radius: 44px; background: #14141a; box-shadow: 0 50px 80px -30px rgba(11,11,15,.55), 0 0 0 1.5px rgba(255,255,255,.08) inset; }
.hm-phone::before { content: ''; position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 78px; height: 22px; border-radius: 14px; background: #14141a; z-index: 3; }
.hm-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; padding: 58px 18px 18px; text-align: center; color: #fff; }
.hm-phone--a { left: 0; top: 70px; rotate: -8deg; z-index: 1; animation: hm-bob 7s ease-in-out infinite; }
.hm-phone--b { left: 50%; top: 10px; translate: -50% 0; z-index: 3; animation: hm-bob 6s ease-in-out -2s infinite; }
.hm-phone--c { right: 0; top: 90px; rotate: 8deg; z-index: 2; animation: hm-bob 8s ease-in-out -4s infinite; }
@keyframes hm-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hm-screen--teal { background: linear-gradient(170deg, #1d8fa3 0%, #4DB6C4 40%, #B8F35C 130%); color: #0B0B0F; }
.hm-screen--ink { background: linear-gradient(170deg, #1b1b22, #0b0b0f); }
.hm-screen--pink { background: linear-gradient(170deg, #F26AA5 0%, #D4208A 60%, #F7BC7C 140%); }
.hm-av { width: 78px; height: 78px; margin: 0 auto 12px; border-radius: 50%; background: rgba(255,255,255,.35); border: 3px solid rgba(255,255,255,.7); }
.hm-screen--teal .hm-av { background: rgba(11,11,15,.18); border-color: rgba(11,11,15,.4); }
.hm-nm { font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.hm-hd { font-size: 12.5px; opacity: .7; margin: 3px 0 14px; font-family: var(--font-mono, monospace); }
.hm-so { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.hm-so i { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.28); }
.hm-screen--teal .hm-so i { background: rgba(11,11,15,.18); }
.hm-ln { display: block; margin: 0 0 10px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); font-weight: 700; font-size: 14px; }
.hm-screen--teal .hm-ln { background: rgba(255,255,255,.55); }
.hm-ln--w { background: #fff !important; color: #0B0B0F; }
.hm-prod { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.hm-prod span { aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.2); display: flex; align-items: flex-end; justify-content: flex-start; padding: 8px; font-size: 11.5px; font-weight: 700; }
.hm-prod span:nth-child(1) { background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.1)); }

.hm-chip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 18px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 40px -22px rgba(11,11,15,.5); font-size: 14px; font-weight: 700; white-space: nowrap; animation: hm-bob 6s ease-in-out infinite; }
.hm-chip small { display: block; font-weight: 500; font-size: 12px; color: var(--hm-mute); }
.hm-chip--1 { left: -10px; top: 40px; animation-delay: -1s; }
.hm-chip--2 { right: -6px; top: 300px; animation-delay: -3s; }
.hm-chip--3 { left: 14px; bottom: 30px; animation-delay: -5s; }

.hm-head { text-align: center; max-width: 820px; margin: 0 auto; }
.hm-head .hm-lead { margin: 0 auto; }

.hm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: center; margin-top: 110px; }
.hm-row--rev .hm-row-art { order: -1; }
.hm-checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.hm-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; color: var(--hm-mute); }
.hm-checks li b { color: var(--hm-ink); }
.hm-checks li::before { content: ''; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--hm-grad) center/100% no-repeat; -webkit-mask: none; position: relative; }
.hm-checks li::after { content: ''; position: absolute; }
.hm-checks li { position: relative; }
.hm-checks li::after { left: 7px; top: 6px; width: 8px; height: 5px; border-left: 2.5px solid var(--hm-ink); border-bottom: 2.5px solid var(--hm-ink); transform: rotate(-45deg); }
.hm-art { position: relative; border-radius: 36px; padding: 34px; min-height: 440px; display: grid; place-items: center; overflow: hidden; isolation: isolate; border: 1px solid var(--hm-line); }
.hm-art--teal { background: radial-gradient(500px 340px at 20% 0%, #D7F1F5, transparent 70%), radial-gradient(500px 340px at 100% 100%, #E3F7C9, transparent 70%), #fff; }
.hm-art--pink { background: radial-gradient(500px 340px at 0% 0%, #FBD3E6, transparent 70%), radial-gradient(500px 340px at 100% 100%, #FFE3D2, transparent 70%), #fff; }
.hm-art--blue { background: radial-gradient(500px 340px at 0% 100%, #CFE0FF, transparent 70%), radial-gradient(500px 340px at 100% 0%, #E4DCFF, transparent 70%), #fff; }
.hm-art--amber { background: radial-gradient(500px 340px at 100% 0%, #FFE7C8, transparent 70%), radial-gradient(500px 340px at 0% 100%, #FBD3E6, transparent 70%), #fff; }

.hm-ed { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.hm-ed .hm-phone { position: relative; inset: auto; width: 220px; height: 450px; padding: 8px; border-radius: 38px; animation: hm-bob 7s ease-in-out infinite; }
.hm-ed .hm-screen { padding-top: 48px; border-radius: 31px; transition: background .6s; }
.hm-sw { display: grid; gap: 12px; }
.hm-sw button { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: #fff; border: 1.5px solid var(--hm-line); font: 700 14.5px/1 var(--font-body, inherit); color: var(--hm-ink); cursor: pointer; transition: transform .25s var(--hm-ease), border-color .25s, box-shadow .25s; }
.hm-sw button i { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.hm-sw button:hover { transform: translateX(4px); }
.hm-sw button[aria-pressed="true"] { border-color: var(--hm-ink); box-shadow: 0 14px 24px -16px rgba(11,11,15,.5); }

.hm-shop { width: min(420px, 100%); display: grid; gap: 14px; }
.hm-card { background: #fff; border: 1px solid var(--hm-line); border-radius: 24px; padding: 18px; box-shadow: 0 30px 50px -36px rgba(11,11,15,.4); }
.hm-pr { display: flex; align-items: center; gap: 14px; }
.hm-pr + .hm-pr { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hm-line); }
.hm-pr .th { flex: none; width: 58px; height: 58px; border-radius: 16px; }
.hm-pr b { display: block; font-size: 16px; }
.hm-pr small { color: var(--hm-mute); font-size: 13.5px; }
.hm-pr em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 17px; }
.hm-0 { display: flex; align-items: center; gap: 16px; background: var(--hm-ink); color: #fff; border-radius: 24px; padding: 20px 22px; }
.hm-0 strong { font-family: var(--font-display, inherit); font-size: 54px; line-height: 1; letter-spacing: -.05em; background: var(--hm-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hm-0 span { font-size: 15px; line-height: 1.4; color: rgba(255,255,255,.75); }
.hm-sale { display: flex; align-items: center; gap: 12px; align-self: end; margin-left: auto; padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--hm-line); font-weight: 700; font-size: 14px; animation: hm-pop 5s var(--hm-ease) infinite; }
.hm-sale i { width: 10px; height: 10px; border-radius: 50%; background: #2fbf71; box-shadow: 0 0 0 0 rgba(47,191,113,.5); animation: sp-ping 2s infinite; }
@keyframes hm-pop { 0%,60%,100% { transform: scale(1); } 70% { transform: scale(1.06); } }
@keyframes sp-ping { 70% { box-shadow: 0 0 0 10px rgba(47,191,113,0); } 100% { box-shadow: 0 0 0 0 rgba(47,191,113,0); } }

.hm-an { width: min(460px, 100%); }
.hm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.hm-kpis div { background: #fff; border: 1px solid var(--hm-line); border-radius: 18px; padding: 14px; }
.hm-kpis small { display: block; font-size: 12px; color: var(--hm-mute); }
.hm-kpis b { font-family: var(--font-display, inherit); font-size: 25px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hm-chart { display: flex; align-items: flex-end; gap: 9px; height: 190px; padding: 18px 18px 14px; }
.hm-chart i { flex: 1; border-radius: 9px 9px 4px 4px; background: var(--hm-grad); height: 8%; transition: height 1.2s var(--hm-ease); transition-delay: calc(var(--i) * 70ms); }
.is-visible .hm-chart i, .hm-chart.is-on i { height: var(--h); }
.hm-chart i:nth-child(odd) { background: linear-gradient(180deg, #4DB6C4, #8fe0b0); }
.hm-list { display: grid; gap: 10px; margin-top: 14px; }
.hm-list div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; }
.hm-list span { flex: 1; height: 8px; border-radius: 8px; background: rgba(11,11,15,.07); position: relative; overflow: hidden; }
.hm-list span::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 8px; background: var(--hm-grad2); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--hm-ease) .3s; }
.is-visible .hm-list span::after { transform: scaleX(1); }

.hm-dom { width: min(440px, 100%); display: grid; gap: 14px; }
.hm-url { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--hm-line); font-family: var(--font-mono, monospace); font-size: 15px; font-weight: 600; box-shadow: 0 24px 40px -30px rgba(11,11,15,.4); }
.hm-url svg { width: 18px; height: 18px; color: #2fbf71; flex: none; }
.hm-url s { color: #a3a3ab; text-decoration-thickness: 2px; }
.hm-qr { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.hm-qr svg { width: 120px; height: 120px; border-radius: 16px; background: #fff; padding: 10px; border: 1px solid var(--hm-line); }

.hm-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.hm-tile { position: relative; overflow: hidden; padding: 26px; border-radius: 26px; background: #fff; border: 1px solid var(--hm-line); transition: transform .35s var(--hm-ease), box-shadow .35s; }
a.hm-tile { display: block; color: inherit; text-decoration: none; }
a.hm-tile:focus-visible { outline: 3px solid #4DB6C4; outline-offset: 3px; }
.hm-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(240px 150px at var(--mx, 50%) var(--my, 0%), rgba(77,182,196,.22), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.hm-tile:hover { transform: translateY(-5px); box-shadow: 0 30px 46px -32px rgba(11,11,15,.45); }
.hm-tile:hover::before { opacity: 1; }
.hm-tile h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.02em; }
.hm-tile p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--hm-mute); }
.hm-tile--wide { grid-column: span 2; background: var(--hm-ink); color: #fff; border-color: transparent; }
.hm-tile--wide p { color: rgba(255,255,255,.7); }

.hm-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; align-items: stretch; }
.hm-plan { position: relative; display: flex; flex-direction: column; padding: 32px; border-radius: 30px; background: #fff; border: 1px solid var(--hm-line); transition: transform .35s var(--hm-ease), box-shadow .35s; }
.hm-plan:hover { transform: translateY(-5px); box-shadow: 0 34px 50px -34px rgba(11,11,15,.45); }
.hm-plan--pro { border: 1.5px solid transparent; background: linear-gradient(#fff,#fff) padding-box, conic-gradient(from var(--hm-ang, 0deg), #4DB6C4, #B8F35C, #8fe0b0, #4DB6C4) border-box; animation: hm-spin 7s linear infinite; }
@property --hm-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes hm-spin { to { --hm-ang: 360deg; } }
.hm-plan .tag { align-self: flex-start; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; background: #F3F3F1; font-family: var(--font-mono, monospace); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.hm-plan--pro .tag { background: var(--hm-grad); }
.hm-plan h3 { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.hm-plan .pr { margin: 10px 0 4px; font-family: var(--font-display, inherit); font-size: 52px; letter-spacing: -.05em; line-height: 1; font-weight: 800; }
.hm-plan .pr span { font-size: 16px; font-weight: 500; color: var(--hm-mute); letter-spacing: 0; }
.hm-plan .nt { margin: 0 0 22px; font-size: 14px; color: var(--hm-mute); }

.hm-plan .pr + ul { margin-top: 43px; }
.hm-plan ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; font-size: 15px; color: var(--hm-mute); }
.hm-plan ul li { padding-left: 26px; position: relative; }
.hm-plan ul li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--hm-grad); }
.hm-plan ul li::after { content: ''; position: absolute; left: 4.5px; top: 8px; width: 7px; height: 4px; border-left: 2px solid var(--hm-ink); border-bottom: 2px solid var(--hm-ink); transform: rotate(-45deg); }
.hm-plan .hm-btn { margin-top: auto; width: 100%; }

.hm-zero { margin-top: 112px; padding: 72px 28px; border-radius: 40px; background: var(--hm-ink); color: #fff; text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.hm-zero::before { content: ''; position: absolute; inset: -30% 10% auto; height: 100%; z-index: -1; background: radial-gradient(closest-side, rgba(77,182,196,.5), transparent); }
.hm-zero::after { content: ''; position: absolute; inset: auto 0 -40% 30%; height: 80%; z-index: -1; background: radial-gradient(closest-side, rgba(240,103,159,.35), transparent); }
.hm-zero strong { display: block; font-family: var(--font-display, inherit); font-size: clamp(100px, 22vw, 240px); line-height: .9; letter-spacing: -.06em; background: var(--hm-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.hm-zero h2 { color: #fff; margin: 10px auto 12px; max-width: 18ch; }

.hm-zero strong.is-landed { animation: hm-land .55s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes hm-land { 0% { transform: scale(1.04); filter: brightness(1.25); } 100% { transform: scale(1); filter: brightness(1); } }
.hm-zero p { margin: 0 auto; max-width: 50ch; color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.55; }

.hm-faq { margin-top: 112px; padding: 96px 0; background: linear-gradient(180deg, var(--hm-bg), #FBE9DC 55%, #F7DCE9); }
.hm-acc { display: grid; gap: 10px; max-width: 800px; margin: 48px auto 0; }
.hm-q { background: #fff; border: 1px solid var(--hm-line); border-radius: 22px; overflow: hidden; transition: box-shadow .3s; }
.hm-q[open] { box-shadow: 0 24px 40px -30px rgba(11,11,15,.4); }
.hm-q summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; cursor: pointer; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.hm-q summary::-webkit-details-marker { display: none; }
.hm-q summary:focus-visible { outline: 3px solid var(--hm-teal); outline-offset: -3px; border-radius: 22px; }
.hm-q summary i { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; background: #F3F3F1; transition: background .3s; }
.hm-q summary i::before, .hm-q summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--hm-ink); border-radius: 2px; transition: transform .4s var(--hm-ease); }
.hm-q summary i::after { transform: rotate(90deg); }
.hm-q[open] summary i { background: var(--hm-grad); }
.hm-q[open] summary i::after { transform: rotate(0); }
.hm-q .a { padding: 0 26px 24px; font-size: 16.5px; line-height: 1.65; color: var(--hm-mute); }
.hm-q .a a { color: var(--hm-ink); font-weight: 600; }

.hm-final { background: var(--hm-ink); color: #fff; text-align: center; padding: 110px 24px; position: relative; overflow: hidden; isolation: isolate; }
.hm-final::before { content: ''; position: absolute; left: 50%; top: -40%; translate: -50% 0; width: 900px; height: 600px; z-index: -1; background: radial-gradient(closest-side, rgba(77,182,196,.35), transparent); filter: blur(30px); }
.hm-final h2 { color: #fff; margin: 0 auto 10px; max-width: 16ch; }
.hm-final p { margin: 0 0 30px; color: rgba(255,255,255,.65); font-size: 17px; }
.hm-final .hm-claim { margin: 0 auto; }

@media (max-width: 960px) {
  .hm-hero { padding-top: calc(var(--hdr-h) + 120px); }
  .hm-hero-grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hm-hero .hm-lead, .hm-claim { margin-left: auto; margin-right: auto; }
  .hm-fine { margin-left: 0; }
  .hm-stage { height: 560px; margin-top: 20px; }
  .hm-row { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 84px; }
  .hm-row--rev .hm-row-art { order: 0; }
  .hm-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .hm-wrap { padding: 0 16px; }
  .hm-sec { padding-top: 84px; }
  .hm-stage { height: 520px; transform-origin: top center; }
  .hm-phone { width: 220px; height: 450px; border-radius: 38px; padding: 8px; }
  .hm-screen { border-radius: 31px; padding: 48px 14px 14px; }
  .hm-phone--a { left: -26px; top: 80px; } .hm-phone--c { right: -26px; top: 100px; }
  .hm-chip { font-size: 12.5px; padding: 9px 12px 9px 9px; }
  .hm-chip--1 { left: 0; top: 10px; } .hm-chip--2 { right: 0; top: 330px; } .hm-chip--3 { left: 6px; bottom: 6px; }
  .hm-claim { padding-left: 16px; } .hm-claim .claim-prefix { font-size: 16px; } .hm-claim .claim-input { font-size: 16px; }
  .hm-claim button { padding: 0 18px; }
  .hm-art { padding: 22px 16px; min-height: 0; border-radius: 28px; }
  .hm-ed { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .hm-sw { grid-template-columns: repeat(3, auto); }
  .hm-sw button { padding: 8px; font-size: 0; gap: 0; } .hm-sw button i { width: 40px; height: 40px; }
  .hm-bento { grid-template-columns: minmax(0, 1fr); }
  .hm-tile--wide { grid-column: auto; }
  .hm-zero { padding: 56px 20px; border-radius: 30px; }
  .hm-q summary { padding: 18px; font-size: 16.5px; } .hm-q .a { padding: 0 18px 20px; }
  .hm-qr { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-orbs i, .hm-mark, .hm-phone, .hm-chip, .hm-plan--pro, .hm-sale, .hm-hero h1 .rotator-word, .hm-hero h1 .rot-dot, .hm-zero::before, .hm-zero strong.is-landed { animation: none !important; }
  .hm-in { animation: none; opacity: 1; filter: none; transform: none; }
  .hm .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .hm-chart i { transition: none; height: var(--h); } .hm-list span::after { transition: none; transform: none; }
}

.hm-tpl h2 { margin: 0 0 16px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; white-space: nowrap; }
.tp-mark { background: linear-gradient(100deg, #7A4DF0, #C84DE0 70%, #F26AA5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tp-feats { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 18px; }
.tp-feats li { display: flex; align-items: center; gap: 16px; }
.tp-feats li > span:last-child { display: grid; gap: 3px; font-size: 16.5px; line-height: 1.3; }
.tp-feats b { color: var(--hm-ink); font-weight: 700; }
.tp-feats small { font-size: 15.5px; color: var(--hm-mute); }
.tp-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--hm-line); color: var(--hm-ink); }
.tp-ic svg { width: 21px; height: 21px; }
.tp-aa-ic { font: 800 18px/1 var(--font-display, var(--font-body, inherit)); letter-spacing: -.03em; }
.tp-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; min-height: 50px; padding: 0 26px; border-radius: 999px; background: var(--hm-ink); color: #fff; font: 600 15px/1 var(--font-body, inherit); text-decoration: none; transition: background .2s, transform .2s var(--hm-ease); }
.tp-cta svg { width: 18px; height: 18px; transition: transform .3s var(--hm-ease); }
.tp-cta:hover { background: #2a2a31; }
.tp-cta:hover svg { transform: translateX(5px); }
.tp-cta:focus-visible { outline: 2px solid var(--hm-ink); outline-offset: 3px; }

@media (min-width: 961px) { .hm-tpl { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 24px; } .hm-row-art .tp-art { width: 134%; margin-left: -20%; } .hm-tpl > .reveal:first-child { position: relative; z-index: 2; } }
.tp-art { position: relative; width: 100%; aspect-ratio: 3 / 2; }
.tp-glow { position: absolute; inset: 6% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(150,110,255,.42), rgba(240,140,220,.2) 55%, transparent 76%); filter: blur(34px); animation: tp-breathe 6s ease-in-out infinite; transition: transform .5s ease-out; transform: translate(var(--gx, 0), var(--gy, 0)); }
.tp-ground { position: absolute; left: 18%; right: 18%; bottom: 3%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(70,40,150,.32), transparent 72%); filter: blur(8px); animation: tp-ground 8s ease-in-out infinite; }
.tp-ring { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; margin: -46% 0 0 -46%; border-radius: 50%; border: 1px dashed rgba(122,77,240,.28); animation: tp-spin 70s linear infinite; pointer-events: none; }
.tp-ring::after { content: ''; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #7A4DF0; box-shadow: 0 0 14px 3px rgba(122,77,240,.55); }
.tp-ring--b { width: 70%; margin: -35% 0 0 -35%; border-color: rgba(200,77,224,.24); animation-duration: 50s; animation-direction: reverse; }
.tp-ring--b::after { background: #C84DE0; box-shadow: 0 0 14px 3px rgba(200,77,224,.5); }
.tp-tilt { position: absolute; inset: 0; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease-out; animation: tp-float 8s ease-in-out infinite; }
.tp-img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 34px 38px rgba(60,30,130,.3)); opacity: 0; transform: translateY(18px) scale(.95); transition: opacity 1s var(--hm-ease), transform 1s var(--hm-ease); }
.tp-art.is-ready .tp-img { opacity: 1; transform: none; }
.tp-sheen { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%) 130% 0 / 260% 100% no-repeat; -webkit-mask: var(--tp-mask) center / contain no-repeat; mask: var(--tp-mask) center / contain no-repeat; mix-blend-mode: soft-light; }
.tp-art.has-sheen .tp-sheen { opacity: 1; animation: tp-sheen 5.5s ease-in-out 1.2s infinite; }
.tp-tw { position: absolute; width: 4.2%; aspect-ratio: 1; margin: -2.1% 0 0 -2.1%; color: #fff; opacity: 0; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(160,120,255,.8)); animation: tp-twinkle 3.6s ease-in-out infinite; pointer-events: none; }
.tp-tw svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.tp-tw--1 { left: 82.5%; top: 52%; width: 5.4%; } .tp-tw--2 { left: 33%; top: 47%; animation-delay: -1.1s; } .tp-tw--3 { left: 86%; top: 59%; width: 2.6%; animation-delay: -2.2s; } .tp-tw--4 { left: 79%; top: 42%; width: 2.4%; animation-delay: -.6s; }
.tp-od { position: absolute; width: 1.7%; aspect-ratio: 1; margin: -.85% 0 0 -.85%; border-radius: 50%; background: #7A4DF0; box-shadow: 0 0 0 0 rgba(122,77,240,.5); animation: tp-ping 3s ease-out infinite; pointer-events: none; }
.tp-od--1 { left: 16.3%; top: 26.7%; } .tp-od--2 { left: 7%; top: 76.2%; animation-delay: -.8s; } .tp-od--3 { left: 51%; top: 13%; animation-delay: -1.6s; } .tp-od--4 { left: 56%; top: 88.6%; animation-delay: -2.3s; }
.tp-pa { position: absolute; bottom: 10%; width: 1%; aspect-ratio: 1; border-radius: 50%; background: #B49BFF; opacity: 0; animation: tp-rise 7s ease-in infinite; pointer-events: none; }
.tp-pa--1 { left: 12%; } .tp-pa--2 { left: 30%; animation-delay: -2.4s; width: .7%; } .tp-pa--3 { left: 62%; animation-delay: -4.1s; } .tp-pa--4 { left: 88%; animation-delay: -5.6s; width: .8%; background: #F29AD6; }
@keyframes tp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes tp-ground { 50% { transform: scaleX(.86); opacity: .6; } }
@keyframes tp-breathe { 50% { scale: 1.08; opacity: .75; } }
@keyframes tp-spin { to { transform: rotate(360deg); } }
@keyframes tp-sheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
@keyframes tp-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45%, 55% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes tp-ping { 0% { box-shadow: 0 0 0 0 rgba(122,77,240,.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(122,77,240,0); } }
@keyframes tp-rise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-190px); } }
@media (min-width: 961px) { .hm-shopsec { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; } .hm-shopsec .hm-row-art .tp-art { width: 86%; margin-left: auto; margin-right: auto; } .hm-shopsec > .reveal { position: relative; z-index: 2; } }
.tp-art--shop { aspect-ratio: 4 / 3; }
.hm-shopsec .hm-row-art .tp-art--shop { max-width: 520px; }
@media (max-width: 960px) { .hm-shopsec .hm-row-art .tp-art--shop { width: 88%; margin-left: auto; margin-right: auto; } }
.tp-mark--teal { background-image: linear-gradient(100deg, #35A4B7, #7CC93A); }

.hm-checks li::before { background: #fff; border: 1px solid var(--hm-line); box-sizing: border-box; }
.hm-checks li::after { border-color: var(--hm-ink); }
@media (max-width: 960px) { .tp-art { max-width: 640px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .tp-tilt, .tp-glow, .tp-ground, .tp-ring, .tp-tw, .tp-od, .tp-pa, .tp-art.has-sheen .tp-sheen { animation: none; } .tp-img { opacity: 1; transform: none; transition: none; } .tp-tw, .tp-pa, .tp-sheen { display: none; } }

.hm-art--an { padding: 44px 34px; min-height: 500px; overflow: visible; }
.hm-art--an .hm-an { position: relative; width: min(500px, 100%); }
.hm-an-top { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 12px; font: 600 13px/1 var(--font-body, inherit); color: var(--hm-mute); }
.hm-live { display: inline-flex; align-items: center; gap: 8px; color: var(--hm-ink); }
.hm-live i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; animation: hm-live 2s ease-out infinite; }
@keyframes hm-live { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }
.hm-art--an .hm-kpis div { position: relative; transition: transform .35s var(--hm-ease), box-shadow .35s; }
.hm-art--an .hm-kpis div:hover { transform: translateY(-3px); box-shadow: 0 16px 26px -18px rgba(11,11,15,.4); }
.hm-delta { position: absolute; top: 12px; right: 12px; font: 700 11px/1 var(--font-body, inherit); font-style: normal; color: #1E8E5A; background: #E6F6EE; padding: 4px 7px; border-radius: 99px; }
.hm-chartcard { position: relative; padding: 14px 18px 18px; }
.hm-chartcard .hm-chart { height: 170px; padding: 8px 4px 0; }
.hm-chartcard .hm-chart i { position: relative; transition: height 1.2s var(--hm-ease), transform .25s var(--hm-ease), filter .25s; transition-delay: calc(var(--i) * 70ms), 0s, 0s; cursor: default; }
.hm-chartcard .hm-chart i:hover { transform: translateY(-4px); filter: saturate(1.15) brightness(1.04); transition-delay: 0s; }
.hm-chartcard .hm-chart i::after { content: attr(data-v); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 4px); padding: 4px 8px; border-radius: 8px; background: var(--hm-ink); color: #fff; font: 700 11px/1 var(--font-body, inherit); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.hm-chartcard .hm-chart i:hover::after { opacity: 1; transform: translate(-50%, 0); }
.hm-trend { position: absolute; left: 22px; right: 22px; top: 22px; height: 150px; width: calc(100% - 44px); overflow: visible; pointer-events: none; }
.hm-trend path { fill: none; stroke: #F0679F; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 4px 6px rgba(240,103,159,.35)); }
.is-visible .hm-trend path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--hm-ease) 1s; }
.hm-trend-dot { position: absolute; right: 26px; top: 28px; width: 11px; height: 11px; margin: -5px -5px 0 0; border-radius: 50%; background: #F0679F; border: 2px solid #fff; opacity: 0; box-shadow: 0 0 0 0 rgba(240,103,159,.5); }
.is-visible .hm-trend-dot { opacity: 1; transition: opacity .3s 2.4s; animation: hm-dotping 2.4s ease-out 2.6s infinite; }
@keyframes hm-dotping { 0% { box-shadow: 0 0 0 0 rgba(240,103,159,.5); } 80%, 100% { box-shadow: 0 0 0 11px rgba(240,103,159,0); } }
.hm-days { display: flex; gap: 9px; padding: 6px 4px 0; }
.hm-days span { flex: 1; text-align: center; font: 600 11px/1 var(--font-body, inherit); color: var(--hm-mute); }
.hm-art--an .hm-list { margin-top: 16px; }
.hm-fchip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--hm-line); box-shadow: 0 18px 30px -20px rgba(11,11,15,.45); font: 600 12.5px/1 var(--font-body, inherit); color: var(--hm-ink); white-space: nowrap; animation: hm-bob 6s ease-in-out infinite; }
.hm-fchip i { width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
.hm-fchip b { color: #1E8E5A; font-weight: 800; }
.hm-fchip--1 { top: -34px; right: -10px; }
.hm-fchip--2 { bottom: -36px; right: -22px; animation-delay: -3s; }
@keyframes hm-bob { 50% { translate: 0 -8px; } }
@media (max-width: 640px) { .hm-art--an { padding: 44px 18px; } .hm-fchip--1 { right: 0; } .hm-fchip--2 { right: -4px; } .hm-delta { display: none; } }
@media (prefers-reduced-motion: reduce) { .hm-live i, .hm-fchip, .hm-trend-dot { animation: none; } .hm-trend path { stroke-dashoffset: 0; transition: none; } .hm-trend-dot { opacity: 1; } }

.hm-art--an { padding: 72px 44px 76px; min-height: 600px; }
.hm-art--an .hm-an { width: min(540px, 100%); }
.hm-art--an .hm-an-top { margin: 0 6px 20px; }
.hm-art--an .hm-kpis { gap: 16px; margin-bottom: 20px; }
.hm-art--an .hm-kpis div { padding: 18px 18px 16px; }
.hm-art--an .hm-kpis b { display: block; margin-top: 8px; font-size: 27px; }
.hm-art--an .hm-delta { top: 16px; right: 14px; }
.hm-art--an .hm-chartcard { padding: 28px 26px 22px; }
.hm-art--an .hm-chartcard .hm-chart { height: 210px; gap: 14px; padding: 0; }
.hm-art--an .hm-days { gap: 14px; padding: 12px 0 0; }
.hm-art--an .hm-trend { left: 26px; right: 26px; top: 28px; width: calc(100% - 52px); height: 210px; opacity: .7; }
.hm-art--an .hm-trend path { stroke-width: 2; }
.hm-art--an .hm-trend-dot { right: 30px; top: 34px; }
.hm-origin { margin-top: 16px; padding: 22px 26px; }
.hm-origin .hm-list { margin: 0; gap: 18px; }
.hm-origin .hm-list div { gap: 16px; }
.hm-art--an .hm-fchip--1 { top: -52px; right: 6px; }
.hm-art--an .hm-fchip--2 { bottom: -52px; right: 6px; }
@media (max-width: 640px) { .hm-art--an { padding: 64px 16px 68px; min-height: 0; } .hm-art--an .hm-chartcard { padding: 22px 16px 18px; } .hm-art--an .hm-chartcard .hm-chart { height: 170px; gap: 9px; } .hm-art--an .hm-trend { left: 16px; right: 16px; width: calc(100% - 32px); height: 170px; } .hm-art--an .hm-kpis { gap: 8px; } .hm-art--an .hm-kpis div { padding: 14px 12px; } .hm-art--an .hm-kpis b { font-size: 22px; } .hm-art--an .hm-days { gap: 9px; } .hm-origin { padding: 18px 16px; } .hm-art--an .hm-fchip--1 { right: 0; } .hm-art--an .hm-fchip--2 { right: 0; } }

.hl-w { transition: opacity .28s linear; }
.hm-zero p.is-hl { color: #fff; }
@media print { .hl-w { opacity: 1 !important; } }

.hm-btn { isolation: isolate; translate: var(--tx, 0px) var(--ty, 0px);
  transition: transform .25s var(--hm-ease), box-shadow .3s, color .3s, translate .5s var(--hm-ease); }
.hm-btn.is-pulled { transition: transform .25s var(--hm-ease), box-shadow .3s, color .3s, translate .12s linear; }
.hm-btn::before { content: ''; position: absolute; z-index: -1; left: var(--px, 50%); top: var(--py, 50%); width: 250%; aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%; scale: 0; background: var(--hm-fill, var(--hm-grad)); transition: scale .55s var(--hm-ease); pointer-events: none; }
.hm-btn--ghost, .hm-btn--grad { --hm-fill: var(--hm-ink); }
@media (hover: hover) {
  .hm-btn:hover::before { scale: 1; }
  .hm-btn:hover { color: var(--hm-ink); }
  .hm-btn--ghost:hover, .hm-btn--grad:hover { color: #fff; }
}
.hm-btn:active { transform: scale(.98); }

.hm-claim button { display: inline-flex; align-items: center; justify-content: center; }
.hm-claim button::after { content: ''; flex: none; width: 0; height: 14px; margin-inline-start: 0; opacity: 0; background: currentColor;
  -webkit-mask: var(--hm-arrow) center / 14px 14px no-repeat; mask: var(--hm-arrow) center / 14px 14px no-repeat;
  transition: width .3s var(--hm-ease), margin .3s var(--hm-ease), opacity .25s;
  --hm-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
[dir="rtl"] .hm-claim button::after { scale: -1 1; }
@media (hover: hover) {
  .hm-claim button:hover::after, .hm-claim:focus-within button::after { width: 14px; margin-inline-start: 8px; opacity: 1; }
}
.hm-claim button:active { transform: scale(.97); }

@property --hm-glow { syntax: '<number>'; initial-value: .4; inherits: false; }
@supports (width: calc(1px * sin(45deg))) {
  .hm-plan--pro {
    --hm-halo: calc(cos(var(--hm-ang, 0deg)) * 16px) calc(sin(var(--hm-ang, 0deg)) * 16px) 46px -14px rgb(77 182 196 / var(--hm-glow)),
               calc(cos(var(--hm-ang, 0deg)) * -16px) calc(sin(var(--hm-ang, 0deg)) * -16px) 46px -14px rgb(184 243 92 / calc(var(--hm-glow) * 1.2));
    box-shadow: var(--hm-halo);
  }
  .hm-plan--pro:hover { --hm-glow: .7; box-shadow: var(--hm-halo), 0 34px 50px -34px rgba(11,11,15,.45); }

  .hm .hm-plan--pro.reveal { transition: opacity .9s var(--hm-ease), transform .9s var(--hm-ease), --hm-glow .4s; }
}

.hm-plans > .hm-plan { z-index: 1; }
.hm-plans > .hm-plan--pro { z-index: 0; }
.hm-plan--pro.is-away { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hl-w { transition: none; }
  .hm-btn, .hm-btn.is-pulled { translate: none; transition: color .01s; }
  .hm-btn::before, .hm-claim button::after { transition: none; }
}