.hero {
    padding: 20px;
}

.badge {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(0,0,0,.09);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
    box-shadow: 0 12px 34px rgba(0,0,0,.06);
    backdrop-filter: blur(18px);
}

.badge::before,
.badge::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    height: 1px;
    border-radius: 999px;
}

.badge::before {
    top: 5px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0,0,0,.12),
        transparent
    );
}

.badge::after {
    bottom: 5px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0,0,0,.07),
        transparent
    );
}

.badge span {
    display: block;
    transition: .25s;
}

.badge-hover {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 8px));
    opacity: 0;
    white-space: nowrap;
    z-index: 2;
}

.badge:hover .badge-main,
.badge:focus .badge-main,
.badge:active .badge-main {
    opacity: 0;
    transform: translateY(-8px);
}

.badge:hover .badge-hover,
.badge:focus .badge-hover,
.badge:active .badge-hover {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.logo-svg {
    position: relative;
    width: 100%;
    max-width: 430px;
    cursor: pointer;
    isolation: isolate;
}

.logo-svg::before {
    content: "";
    position: absolute;
    inset: -18px -22px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 30%, rgba(0,0,0,.10), transparent 34%),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,.08), transparent 36%),
        linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.12));
    opacity: 0;
    transform: scale(.96);
    transition: .35s;
    z-index: -1;
}

.logo-svg::after {
    content: "";
    position: absolute;
    left: -14%;
    top: -30%;
    width: 34%;
    height: 160%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.85),
        transparent
    );
    opacity: 0;
    transform: rotate(18deg) translateX(-80%);
    transition: .55s;
    pointer-events: none;
}

.logo-svg svg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 35px rgba(0,0,0,.16));
    transition: .35s;
}

.logo-svg svg path {
    fill: #111111;
    transition: .35s;
}

.logo-svg:hover,
.logo-svg:focus,
.logo-svg:active {
    outline: none;
}

.logo-svg:hover::before,
.logo-svg:focus::before,
.logo-svg:active::before {
    opacity: 1;
    transform: scale(1);
}

.logo-svg:hover::after,
.logo-svg:focus::after,
.logo-svg:active::after {
    opacity: 1;
    transform: rotate(18deg) translateX(360%);
}

.logo-svg:hover svg,
.logo-svg:focus svg,
.logo-svg:active svg {
    filter: drop-shadow(0 28px 48px rgba(0,0,0,.22));
}

.logo-svg:hover svg path,
.logo-svg:focus svg path,
.logo-svg:active svg path {
    fill: #000000;
}

.hero p {
    position: relative;
    max-width: 520px;
    margin: 24px 0 0;
    padding: 16px 18px 16px 22px;
    color: #444;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.4px;
    border-radius: 18px;
    background: rgba(255,255,255,.45);
    border: 1px solid rgba(0,0,0,.05);
    backdrop-filter: blur(12px);
    transition: .3s;
    cursor: pointer;
}

.hero p::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 999px;
    background: #111;
    transition: .3s;
}

.hero p::after {
    content: "Marezu ID";
    position: absolute;
    right: 14px;
    bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(0,0,0,.28);
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(4px);
    transition: .3s;
}

.hero p:hover,
.hero p:focus,
.hero p:active {
    transform: translateY(-2px);
    background: rgba(255,255,255,.72);
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

.hero p:hover::before,
.hero p:focus::before,
.hero p:active::before {
    width: 8px;
}

.hero p:hover::after,
.hero p:focus::after,
.hero p:active::after {
    opacity: 1;
    transform: translateY(0);
}

.features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
    max-width: 560px;
}

.feature {
    position: relative;
    overflow: hidden;
    min-height: 56px;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.62);
    border-radius: 20px;
    padding: 16px 52px 16px 18px;
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 600;
    box-shadow:
        0 18px 40px rgba(0,0,0,.06),
        inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
    cursor: pointer;
    transition: .25s;
}

.feature span {
    position: relative;
    z-index: 3;
    display: block;
    transition: .25s;
}

.feature small {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 4;
    display: block;
    padding: 12px 13px;
    border-radius: 16px;
    background: rgba(255,255,255,.92);
    color: #555;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    box-shadow: 0 18px 40px rgba(0,0,0,.10);
    transition: .25s;
}

.feature::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 12px;
    width: 34px;
    height: 22px;
    pointer-events: none;
    opacity: .8;
    transition: .25s;
    background:
        linear-gradient(135deg, transparent 0, transparent 12px, rgba(0,0,0,.10) 12px, rgba(0,0,0,.10) 14px, transparent 14px),
        linear-gradient(135deg, transparent 0, transparent 20px, rgba(0,0,0,.08) 20px, rgba(0,0,0,.08) 22px, transparent 22px),
        linear-gradient(135deg, transparent 0, transparent 28px, rgba(0,0,0,.06) 28px, rgba(0,0,0,.06) 30px, transparent 30px);
}

.feature svg {
    position: absolute;
    right: 17px;
    bottom: 13px;
    width: 22px;
    height: 22px;
    fill: currentColor;
    opacity: 0;
    transform: scale(.82);
    transition: .25s;
    pointer-events: none;
}

.feature:hover,
.feature:focus,
.feature:active {
    min-height: 112px;
    transform: translateY(-3px);
    border-color: rgba(0,0,0,.14);
    box-shadow:
        0 24px 50px rgba(0,0,0,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
    outline: none;
}

.feature:hover::after,
.feature:focus::after,
.feature:active::after {
    opacity: 0;
}

.feature:hover svg,
.feature:focus svg,
.feature:active svg {
    opacity: .75;
    transform: scale(1);
}

.feature:hover small,
.feature:focus small,
.feature:active small {
    opacity: 1;
    transform: translateY(0);
}