.page__group-01 {
    position: fixed;
    inset: 0px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: rgb(241, 234, 224);
}

.page__group-02 {
    display: block;
    position: absolute;
    inset: -10%;
    background: repeating-linear-gradient(-40deg, rgb(255, 217, 204) 0px, rgb(255, 131, 104) 26px, rgb(240, 54, 43) 62px, rgb(196, 22, 15) 96px, rgb(110, 8, 5) 128px, rgb(196, 22, 15) 160px, rgb(240, 54, 43) 196px, rgb(255, 131, 104) 232px, rgb(255, 217, 204) 258px);
    opacity: 0.32;
    transform: scale(1.04);
    animation: silkDrift 34s ease-in-out infinite;
    will-change: transform;
}

.page__graphic-01 {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.5;
    filter: blur(2px);
}

.page__group-03 {
    position: absolute;
    inset: 0px;
    background: rgba(241, 234, 224, 0.5);
}

.page__group-04 {
    position: absolute;
    inset: 0px;
    background: radial-gradient(90% 70% at 50% 42%, rgba(241, 234, 224, 0.62), rgba(241, 234, 224, 0.2) 72%);
}

.page__group-05 {
    position: relative;
    z-index: 1;
    width: 100%;
}

.page__root-01 {
    position: sticky;
    top: 0px;
    z-index: 100;
    backdrop-filter: blur(16px) saturate(1.1);
    background: rgba(241, 234, 224, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.header__group-01 {
    max-width: 1200px;
    margin: 0px auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header__link-01 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header__label-01 {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    overflow: hidden;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.28) 0px 4px 14px;
    flex: 0 0 auto;
    background: rgb(12, 12, 13);
}

.header__image-01 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.header__label-02 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.header__nav-01 {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header__link-02 {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink2);
    opacity: 0.72;
}

.header__link-03 {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink2);
    opacity: 0.72;
}

.header__group-02 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header__link-04 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14.5px;
    padding: 11px 20px;
    border-radius: 999px;
    color: var(--ink);
    background: rgba(255, 255, 255, .34);
    border: 1.5px solid rgba(12, 12, 13, 0.24);
    white-space: nowrap;
    transition: background 0.18s, border-color 0.18s;
}

.header__link-05 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14.5px;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--button-ink);
    color: var(--button-text);
    white-space: nowrap;
    transition: transform 0.18s, background 0.18s;
}

.theme-toggle {
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(12, 12, 13, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .34);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s;
}


[data-theme-mode="auto"] .theme-toggle__icon {
    background: transparent;
    border: 2px solid var(--ink);
}

[data-theme-mode="auto"] .theme-toggle__icon::before {
    content: "A";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 900 11px/1 var(--font-display);
}

[data-theme-mode="auto"] .theme-toggle__icon::after {
    display: none;
}

.header__section-01 {
    position: relative;
    overflow: hidden;
}

.content__group-01 {
    position: absolute;
    inset: -15% -10% 0px;
    z-index: 0;
    pointer-events: none;
    filter: blur(56px);
    opacity: 0.72;
    mask-image: linear-gradient(rgb(0, 0, 0) 0px, rgb(0, 0, 0) 55%, transparent 92%);
}

.content__group-02 {
    position: absolute;
    top: -10%;
    right: -6%;
    width: 60%;
    height: 110%;
    background: radial-gradient(56% 48%, rgb(240, 54, 43) 0%, rgb(196, 22, 15) 40%, rgba(196, 22, 15, 0.28) 66%, rgba(196, 22, 15, 0) 82%);
    animation: blobDriftA 22s ease-in-out infinite;
}

.content__group-03 {
    position: absolute;
    top: 8%;
    right: 26%;
    width: 44%;
    height: 96%;
    background: radial-gradient(52% 48%, rgb(255, 106, 84) 0%, rgb(232, 36, 26) 42%, rgba(232, 36, 26, 0) 78%);
    animation: blobDriftB 26s ease-in-out infinite;
}

.content__group-04 {
    position: absolute;
    inset: 0px;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(70% 90% at 14% 44%, rgba(241, 234, 224, 0.94) 0%, rgba(241, 234, 224, 0.7) 34%, rgba(241, 234, 224, 0.16) 62%, rgba(241, 234, 224, 0) 82%);
}

.content__group-05 {
    position: absolute;
    width: 460px;
    height: 460px;
    left: 0px;
    top: 0px;
    z-index: 1;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    opacity: 0;
    transition: opacity 0.4s;
    /* Falloff follows (1-r^2)^2, which reaches zero with zero slope. A plain
       two-stop gradient ramps linearly and then stops dead, and the eye reads
       that slope break as a hard ring (Mach band) even though the pixels are
       continuous. closest-side pins 100% to the box edge so `contain: paint`
       has nothing left to clip. */
    background: radial-gradient(circle closest-side,
            rgba(255, 255, 255, .50) 0%,
            rgba(255, 255, 255, .490) 10%,
            rgba(255, 255, 255, .461) 20%,
            rgba(255, 255, 255, .414) 30%,
            rgba(255, 255, 255, .353) 40%,
            rgba(255, 255, 255, .281) 50%,
            rgba(255, 255, 255, .205) 60%,
            rgba(255, 255, 255, .130) 70%,
            rgba(255, 255, 255, .065) 80%,
            rgba(255, 255, 255, .018) 90%,
            rgba(255, 255, 255, 0) 100%);
    contain: layout paint;
}

.content__group-06 {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0px auto;
    padding: 40px 24px 28px;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 40px;
    align-items: center;
}

.content__group-07 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid rgba(12, 12, 13, 0.08);
    backdrop-filter: blur(6px);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 26px;
}

.content__label-01 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(18, 161, 80);
    box-shadow: rgba(18, 161, 80, 0.7) 0px 0px 10px;
    animation: 1.8s ease-in-out 0s infinite normal none running blink;
}

.content__title-01 {
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--ink);
    font-size: clamp(42px, 6.2vw, 82px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: 0px 0px 22px;
    text-wrap: balance;
}

.content__text-01 {
    color: var(--ink2);
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.55;
    max-width: 520px;
    margin: 0px 0px 34px;
    opacity: 0.82;
}

.content__group-08 {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.content__link-01 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16.5px;
    padding: 16px 30px;
    border-radius: 999px;
    background: var(--button-ink);
    color: var(--button-text);
    box-shadow: rgba(0, 0, 0, 0.45) 0px 14px 34px -12px;
    transition: transform 0.18s, background 0.18s;
}

.content__link-02 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16.5px;
    padding: 16px 26px;
    border-radius: 999px;
    color: var(--ink);
    border: 1.5px solid rgba(12, 12, 13, 0.24);
    transition: background 0.18s, border-color 0.18s;
}

.content__group-09 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

.content__label-02 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(12, 12, 13, 0.08);
    color: var(--ink2);
    font-size: 13px;
    font-weight: 500;
}

.content__label-03 {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.content__label-04 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(12, 12, 13, 0.08);
    color: var(--ink2);
    font-size: 13px;
    font-weight: 500;
}

.content__label-05 {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.content__label-06 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(12, 12, 13, 0.08);
    color: var(--ink2);
    font-size: 13px;
    font-weight: 500;
}

.content__label-07 {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.content__label-08 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(12, 12, 13, 0.08);
    color: var(--ink2);
    font-size: 13px;
    font-weight: 500;
}

.content__label-09 {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

.content__group-10 {
    --orbit-size: min(460px, 82vw);
    position: relative;
    justify-self: center;
    width: var(--orbit-size);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content__group-11 {
    position: absolute;
    width: 92%;
    height: 92%;
    border-radius: 50%;
    /* Same eased falloff as the cursor glow — the old 3-stop ramp broke slope
       at 72% and rang faintly even under the 22px blur. */
    background: radial-gradient(circle closest-side,
            rgba(255, 241, 232, .720) 0%,
            rgba(255, 241, 232, .706) 10%,
            rgba(255, 241, 232, .664) 20%,
            rgba(255, 241, 232, .596) 30%,
            rgba(255, 241, 232, .508) 40%,
            rgba(255, 241, 232, .405) 50%,
            rgba(255, 241, 232, .295) 60%,
            rgba(255, 241, 232, .187) 70%,
            rgba(255, 241, 232, .094) 80%,
            rgba(255, 241, 232, .026) 90%,
            rgba(255, 241, 232, 0) 100%);
    filter: blur(22px);
    animation: 6s ease-in-out 0s infinite normal none running haloPulse;
}

.content__group-12 {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.85);
    animation: 16s linear 0s infinite normal none running ringSpin;
}

.content__group-13 {
    position: absolute;
    width: 82%;
    height: 82%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    animation: 12s linear 0s infinite normal none running ringSpinRev;
}

.content__group-14 {
    position: absolute;
    width: 64%;
    height: 64%;
    border-radius: 50%;
    border: 1.5px dotted rgba(12, 12, 13, 0.4);
    animation: 9s linear 0s infinite normal none running ringSpin;
}

.content__group-15 {
    position: absolute;
    left: 50%;
    top: 50%;
    --r: calc(var(--orbit-size)*.5);
    width: 16px;
    height: 16px;
    margin: -8px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    box-shadow: rgb(255, 255, 255) 0px 0px 20px 4px;
    animation: 7s linear 0s infinite normal none running orbit;
}

.content__group-16 {
    position: absolute;
    left: 50%;
    top: 50%;
    --r: calc(var(--orbit-size)*.41);
    width: 12px;
    height: 12px;
    margin: -6px;
    border-radius: 50%;
    background: rgb(42, 5, 3);
    box-shadow: rgba(12, 12, 13, 0.6) 0px 0px 14px 2px;
    animation: 10s linear 0s infinite reverse none running orbit;
}

.content__group-17 {
    position: relative;
    width: 72%;
    height: 72%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: 5s ease-in-out 0s infinite normal none running logoFloat;
    filter: drop-shadow(rgba(90, 7, 5, 0.55) 0px 20px 40px);
}

.content__image-01 {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.content__image-02 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    transform-origin: center center;
    z-index: 2;
    animation: 3.4s ease-in-out 0s infinite normal none running dotShift;
}

.content__group-18 {
    position: absolute;
    left: 81.5%;
    top: 36.7%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(224, 16, 8, 0.85), rgba(200, 12, 8, 0) 70%);
    filter: blur(4px);
    animation: 3.4s ease-in-out 0s infinite normal none running dotGlow;
    z-index: 1;
}

.content__section-01 {
    max-width: 1200px;
    margin: 0px auto;
    padding: 56px 24px 36px;
    position: relative;
}

.features__group-01 {
    max-width: 640px;
    margin-bottom: 52px;
}

.features__group-02 {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 16px;
}

.features__title-01 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0px 0px 18px;
    text-wrap: balance;
}

.features__text-01 {
    color: var(--ink2);
    opacity: 0.78;
    font-size: 17px;
    line-height: 1.6;
    margin: 0px;
}

.features__group-03 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.features__group-04 {
    border-radius: 26px;
    padding: 30px 26px;
    background: rgba(251, 248, 242, 0.6);
    backdrop-filter: blur(24px) saturate(1.08);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: rgba(140, 20, 14, 0.5) 0px 24px 60px -34px, rgba(255, 255, 255, 0.65) 0px 1px 0px inset;
}

.features__group-05 {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--accent), var(--accent-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    box-shadow: rgba(184, 20, 14, 0.7) 0px 10px 22px -10px;
    margin-bottom: 22px;
}

.features__subtitle-01 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
    margin: 0px 0px 10px;
}

.features__text-02 {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0px;
}

.features__group-06 {
    border-radius: 26px;
    padding: 30px 26px;
    background: rgba(251, 248, 242, 0.6);
    backdrop-filter: blur(24px) saturate(1.08);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: rgba(140, 20, 14, 0.5) 0px 24px 60px -34px, rgba(255, 255, 255, 0.65) 0px 1px 0px inset;
}

.features__group-07 {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--accent), var(--accent-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    box-shadow: rgba(184, 20, 14, 0.7) 0px 10px 22px -10px;
    margin-bottom: 22px;
}

.features__subtitle-02 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
    margin: 0px 0px 10px;
}

.features__text-03 {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0px;
}

.features__group-08 {
    border-radius: 26px;
    padding: 30px 26px;
    background: rgba(251, 248, 242, 0.6);
    backdrop-filter: blur(24px) saturate(1.08);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: rgba(140, 20, 14, 0.5) 0px 24px 60px -34px, rgba(255, 255, 255, 0.65) 0px 1px 0px inset;
}

.features__group-09 {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--accent), var(--accent-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    box-shadow: rgba(184, 20, 14, 0.7) 0px 10px 22px -10px;
    margin-bottom: 22px;
}

.features__subtitle-03 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
    margin: 0px 0px 10px;
}

.features__text-04 {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0px;
}

.features__group-10 {
    border-radius: 26px;
    padding: 30px 26px;
    background: rgba(251, 248, 242, 0.6);
    backdrop-filter: blur(24px) saturate(1.08);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: rgba(140, 20, 14, 0.5) 0px 24px 60px -34px, rgba(255, 255, 255, 0.65) 0px 1px 0px inset;
}

.features__group-11 {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--accent), var(--accent-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    box-shadow: rgba(184, 20, 14, 0.7) 0px 10px 22px -10px;
    margin-bottom: 22px;
}

.features__subtitle-04 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
    margin: 0px 0px 10px;
}

.features__text-05 {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0px;
}

.features__group-12 {
    border-radius: 26px;
    padding: 30px 26px;
    background: rgba(251, 248, 242, 0.6);
    backdrop-filter: blur(24px) saturate(1.08);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: rgba(140, 20, 14, 0.5) 0px 24px 60px -34px, rgba(255, 255, 255, 0.65) 0px 1px 0px inset;
}

.features__group-13 {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--accent), var(--accent-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    box-shadow: rgba(184, 20, 14, 0.7) 0px 10px 22px -10px;
    margin-bottom: 22px;
}

.features__subtitle-05 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
    margin: 0px 0px 10px;
}

.features__text-06 {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0px;
}

.features__group-14 {
    border-radius: 26px;
    padding: 30px 26px;
    background: rgba(251, 248, 242, 0.6);
    backdrop-filter: blur(24px) saturate(1.08);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: rgba(140, 20, 14, 0.5) 0px 24px 60px -34px, rgba(255, 255, 255, 0.65) 0px 1px 0px inset;
}

.features__group-15 {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(140deg, var(--accent), var(--accent-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 22px;
    box-shadow: rgba(184, 20, 14, 0.7) 0px 10px 22px -10px;
    margin-bottom: 22px;
}

.features__subtitle-06 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.01em;
    margin: 0px 0px 10px;
}

.features__text-07 {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0px;
}

.features__section-01 {
    max-width: 1200px;
    margin: 20px auto 0px;
    padding: 20px 24px 40px;
    scroll-margin-top: 90px;
}

.trial__group-01 {
    padding: 30px 30px;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: radial-gradient(120% 150% at 18% 20%, rgb(196, 22, 15) 0%, rgb(142, 12, 8) 55%, rgb(92, 7, 5) 100%);
    box-shadow: rgba(140, 12, 8, 0.55) 0px 34px 76px -42px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.trial__group-02 {
    position: absolute;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
    filter: blur(52px);
    opacity: 0.75;
}

.trial__group-03 {
    position: absolute;
    top: -10%;
    right: 2%;
    width: 52%;
    height: 130%;
    mix-blend-mode: screen;
    background: radial-gradient(circle, rgb(255, 122, 92) 0%, rgb(239, 59, 52) 45%, rgba(239, 59, 52, 0) 74%);
    animation: blobDriftA 20s ease-in-out infinite;
}

.trial__group-04 {
    position: absolute;
    bottom: -16%;
    left: -2%;
    width: 48%;
    height: 130%;
    mix-blend-mode: screen;
    background: radial-gradient(circle, rgb(255, 90, 60) 0%, rgb(196, 22, 15) 50%, rgba(196, 22, 15, 0) 76%);
    animation: blobDriftB 24s ease-in-out infinite;
}

.trial__group-05 {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.trial__group-06 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgb(255, 255, 255);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 18px;
}

.trial__label-01 {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(124, 242, 155);
    box-shadow: rgb(124, 242, 155) 0px 0px 10px;
    animation: 1.8s ease-in-out 0s infinite normal none running blink;
}

.trial__title-01 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(28px, 3.8vw, 46px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: rgb(255, 255, 255);
    margin: 0px 0px 12px;
    text-wrap: balance;
}

.trial__text-01 {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16.5px;
    line-height: 1.55;
    margin: 0px;
    max-width: 520px;
}

.trial__group-07 {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.trial__group-08 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: rgb(255, 255, 255);
    font-family: var(--font-display);
}

.trial__label-02 {
    font-weight: 900;
    font-size: clamp(48px, 6vw, 76px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.trial__label-03 {
    font-weight: 700;
    font-size: 20px;
    opacity: 0.9;
}

.trial__link-01 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16.5px;
    padding: 16px 30px;
    border-radius: 999px;
    background: var(--button-light);
    color: var(--button-light-text);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 40px -14px;
    transition: transform 0.18s;
}

.trial__section-01 {
    position: relative;
    overflow: hidden;
    margin-top: 60px;
}

.steps__group-01 {
    position: absolute;
    inset: 0px;
    z-index: 0;
    pointer-events: none;
    background: rgba(14, 13, 12, 0.58);
    backdrop-filter: blur(22px) saturate(1.1);
    mask-image: linear-gradient(transparent 0px, rgba(0, 0, 0, 0.5) 22%, rgb(0, 0, 0) 46%, rgb(0, 0, 0) 54%, rgba(0, 0, 0, 0.5) 78%, transparent 100%);
}

.steps__group-02 {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0px auto;
    padding: 56px 24px;
}

.steps__group-03 {
    max-width: 600px;
    margin-bottom: 56px;
}

.steps__group-04 {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-soft);
    margin-bottom: 16px;
}

.steps__title-01 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(32px, 4.6vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 0px;
    color: rgb(255, 255, 255);
    text-wrap: balance;
}

.steps__group-05 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.steps__group-06 {
    border-top: 2px solid rgba(255, 255, 255, 0.16);
    padding-top: 26px;
}

.steps__group-07 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent-soft);
    margin-bottom: 20px;
}

.steps__subtitle-01 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    margin: 0px 0px 10px;
    color: rgb(255, 255, 255);
}

.steps__text-01 {
    color: rgb(201, 192, 180);
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0px;
}

.steps__group-08 {
    border-top: 2px solid rgba(255, 255, 255, 0.16);
    padding-top: 26px;
}

.steps__group-09 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent-soft);
    margin-bottom: 20px;
}

.steps__subtitle-02 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    margin: 0px 0px 10px;
    color: rgb(255, 255, 255);
}

.steps__text-02 {
    color: rgb(201, 192, 180);
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0px;
}

.steps__group-10 {
    border-top: 2px solid rgba(255, 255, 255, 0.16);
    padding-top: 26px;
}

.steps__group-11 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent-soft);
    margin-bottom: 20px;
}

.steps__subtitle-03 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    margin: 0px 0px 10px;
    color: rgb(255, 255, 255);
}

.steps__text-03 {
    color: rgb(201, 192, 180);
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0px;
}

.steps__group-12 {
    margin-top: 52px;
}

.steps__link-01 {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16.5px;
    padding: 16px 30px;
    border-radius: 999px;
    background: var(--accent);
    color: rgb(255, 255, 255);
    box-shadow: rgba(239, 59, 52, 0.7) 0px 14px 34px -12px;
    transition: transform 0.18s;
}

.steps__section-01 {
    position: relative;
    overflow: hidden;
    margin-top: 40px;
    padding: 120px 24px;
    text-align: center;
}

.content__group-19 {
    position: absolute;
    inset: 0px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    mask-image: radial-gradient(90% 96% at 50% 62%, rgb(0, 0, 0) 8%, transparent 74%);
}

.content__group-20 {
    position: absolute;
    inset: -20%;
    filter: blur(88px);
    opacity: 0.5;
}

.content__group-21 {
    position: absolute;
    top: -4%;
    left: 6%;
    width: 52%;
    height: 96%;
    background: radial-gradient(56% 48%, rgb(240, 54, 43) 0%, rgb(196, 22, 15) 42%, rgba(196, 22, 15, 0) 78%);
    animation: blobDriftA 25s ease-in-out infinite;
}

.content__group-22 {
    position: absolute;
    bottom: -8%;
    right: 4%;
    width: 50%;
    height: 96%;
    background: radial-gradient(54% 48%, rgb(255, 106, 84) 0%, rgb(232, 36, 26) 44%, rgba(232, 36, 26, 0) 78%);
    animation: blobDriftB 28s ease-in-out infinite;
}

.content__group-23 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, 92%);
    height: 360px;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(241, 234, 224, 0.86) 0%, rgba(241, 234, 224, 0.55) 50%, rgba(241, 234, 224, 0) 80%);
}

.content__group-24 {
    position: relative;
    z-index: 2;
}

.content__group-25 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
}

.content__title-02 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.03;
    letter-spacing: -0.03em;
    color: rgb(20, 20, 20);
    margin: 0px 0px 16px;
    text-wrap: balance;
}

.content__text-02 {
    color: var(--ink2);
    opacity: 0.8;
    font-size: 17px;
    line-height: 1.55;
    max-width: 520px;
    margin: 0px auto 30px;
}

.content__link-03 {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 17px;
    padding: 17px 34px;
    border-radius: 999px;
    background: var(--button-ink);
    color: var(--button-text);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 16px 40px -14px;
    transition: transform 0.18s, background 0.18s;
}

.content__root-01 {
    background: var(--footer-bg);
    color: var(--footer-text);
}

.footer__group-01 {
    max-width: 1200px;
    margin: 0px auto;
    padding: 64px 24px 40px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 40px;
}

.footer__link-01 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.footer__label-01 {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    overflow: hidden;
    display: block;
    flex: 0 0 auto;
    background: rgb(12, 12, 13);
}

.footer__image-01 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.footer__label-02 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: var(--footer-ink);
}

.footer__text-01 {
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 320px;
    margin: 0px;
    color: var(--footer-text);
}

.footer__group-02 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--footer-ink);
    margin-bottom: 16px;
}

.footer__group-03 {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 14.5px;
}

.footer__group-04 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--footer-ink);
    margin-bottom: 16px;
}

.footer__group-05 {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 14.5px;
}

.footer__group-06 {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer__group-07 {
    max-width: 1200px;
    margin: 0px auto;
    padding: 22px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    font-size: 13px;
    color: var(--footer-text);
}

.footer__group-08 {
    display: none;
}

[data-theme="dark"] .page__group-01 {
    background: #100D0C;
}

[data-theme="dark"] .page__group-02 {
    opacity: .2;
    filter: saturate(.9) brightness(.75);
}

[data-theme="dark"] .page__group-03 {
    background: rgba(16, 13, 12, .62);
}

[data-theme="dark"] .page__group-04 {
    background: radial-gradient(90% 70% at 50% 42%, rgba(16, 13, 12, .4), rgba(16, 13, 12, .82) 72%);
}

[data-theme="dark"] .page__root-01 {
    background: rgba(16, 13, 12, .72);
    border-bottom-color: rgba(255, 255, 255, .08);
}

[data-theme="dark"] .header__link-04 {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
}

[data-theme="dark"] .theme-toggle {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
}

[data-theme="dark"] .content__group-04 {
    background: radial-gradient(70% 90% at 14% 44%, rgba(16, 13, 12, .9) 0%, rgba(16, 13, 12, .64) 34%, rgba(16, 13, 12, .18) 62%, rgba(16, 13, 12, 0) 82%);
}

[data-theme="dark"] .content__group-07,
[data-theme="dark"] .content__label-02,
[data-theme="dark"] .content__label-04,
[data-theme="dark"] .content__label-06,
[data-theme="dark"] .content__label-08 {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .1);
}

[data-theme="dark"] .content__link-02 {
    border-color: rgba(255, 255, 255, .24);
}

/* On the cream background a white glow at .5 reads as a soft highlight; on
   #100D0C the same value is a light-grey disc (luminance 136 against a 15
   background). Warm it to the brand and drop it to where it reads as light,
   not as an object. */
[data-theme="dark"] .content__group-05 {
    background: radial-gradient(circle closest-side,
            rgba(255, 196, 174, .150) 0%,
            rgba(255, 196, 174, .147) 10%,
            rgba(255, 196, 174, .138) 20%,
            rgba(255, 196, 174, .124) 30%,
            rgba(255, 196, 174, .106) 40%,
            rgba(255, 196, 174, .084) 50%,
            rgba(255, 196, 174, .062) 60%,
            rgba(255, 196, 174, .039) 70%,
            rgba(255, 196, 174, .020) 80%,
            rgba(255, 196, 174, .005) 90%,
            rgba(255, 196, 174, 0) 100%);
}

[data-theme="dark"] .content__group-11 {
    background: radial-gradient(circle closest-side,
            rgba(255, 120, 92, .200) 0%,
            rgba(255, 120, 92, .196) 10%,
            rgba(255, 120, 92, .184) 20%,
            rgba(255, 120, 92, .166) 30%,
            rgba(255, 120, 92, .141) 40%,
            rgba(255, 120, 92, .113) 50%,
            rgba(255, 120, 92, .082) 60%,
            rgba(255, 120, 92, .052) 70%,
            rgba(255, 120, 92, .026) 80%,
            rgba(255, 120, 92, .007) 90%,
            rgba(255, 120, 92, 0) 100%);
}

[data-theme="dark"] .content__group-14 {
    border-color: rgba(255, 245, 236, .34);
}

[data-theme="dark"] .features__group-04,
[data-theme="dark"] .features__group-06,
[data-theme="dark"] .features__group-08,
[data-theme="dark"] .features__group-10,
[data-theme="dark"] .features__group-12,
[data-theme="dark"] .features__group-14 {
    background: rgba(25, 20, 19, .74);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: rgba(0, 0, 0, .5) 0px 24px 60px -34px, rgba(255, 255, 255, .06) 0px 1px 0px inset;
}

[data-theme="dark"] .content__group-23 {
    background: radial-gradient(closest-side, rgba(16, 13, 12, .9) 0%, rgba(16, 13, 12, .58) 50%, rgba(16, 13, 12, 0) 80%);
}

[data-theme="dark"] .content__title-02 {
    color: var(--ink);
}

/* ---------- Hero signal rings ----------
   Radiate outward from the mark on a stagger, reading as "connection live".
   Purely decorative; hidden from AT via aria-hidden on the host. */
.signal-ring {
    position: absolute;
    width: 82%;
    height: 82%;
    border-radius: 50%;
    border: 1.5px solid var(--accent-soft);
    opacity: 0;
    pointer-events: none;
    animation: signalPulse 4.2s var(--ease-out-quart, ease-out) infinite;
    animation-delay: calc(var(--i, 0) * 1.4s);
}

/* ---------- Hover / active states ---------- */
.header__link-04:hover {
    background: rgba(255, 255, 255, .62);
    border-color: rgba(12, 12, 13, .42);
}

[data-theme="dark"] .header__link-04:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .32);
}

.header__link-05:hover,
.content__link-01:hover,
.content__link-03:hover {
    box-shadow: rgba(0, 0, 0, .5) 0px 20px 44px -12px;
}

.content__link-02:hover {
    background: rgba(255, 255, 255, .5);
    border-color: rgba(12, 12, 13, .46);
}

[data-theme="dark"] .content__link-02:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .44);
}

.steps__link-01:hover {
    box-shadow: rgba(239, 59, 52, .85) 0px 20px 44px -12px;
}

.trial__link-01:hover {
    box-shadow: rgba(0, 0, 0, .58) 0px 22px 50px -14px;
}

.theme-toggle:hover {
    transform: rotate(-18deg) scale(1.06);
    border-color: var(--accent);
}

.nav-toggle:hover {
    border-color: var(--accent);
}

/* Footer links share the underline-wipe treatment. */
.footer__group-03 a,
.footer__group-05 a {
    position: relative;
    display: inline-block;
    width: fit-content;
    transition: color var(--dur-base, .26s) var(--ease-smooth, ease);
}

.footer__group-03 a:hover,
.footer__group-05 a:hover {
    color: var(--accent-soft);
}

/* Steps: the connector rule draws in when the card reveals. */
.steps__group-06,
.steps__group-08,
.steps__group-10 {
    border-top-color: transparent;
    background-image: linear-gradient(90deg, var(--accent), rgba(255, 255, 255, .16));
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 0;
    transition: background-size 1s var(--ease-out-expo, ease) .25s;
}

.steps__group-06.is-revealed,
.steps__group-08.is-revealed,
.steps__group-10.is-revealed {
    background-size: 100% 2px;
}

/* Feature icon tiles (see .card-fx .icon-tile in animations.css). */
.icon-tile svg {
    width: 26px;
    height: 26px;
    display: block;
}