@font-face {
    font-family: 'Red Hat Display';
    src: url('/assets/fonts/red-hat-display-v21-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Display';
    src: url('/assets/fonts/red-hat-display-v21-latin-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Display';
    src: url('/assets/fonts/red-hat-display-v21-latin-700italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Text';
    src: url('/assets/fonts/red-hat-text-v19-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Text';
    src: url('/assets/fonts/red-hat-text-v19-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Text';
    src: url('/assets/fonts/red-hat-text-v19-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Red Hat Text';
    src: url('/assets/fonts/red-hat-text-v19-latin-500italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

:root {
    --sp-c1: #F6EEA0;
    --sp-c2: #9CE4D2;
    --sp-c3: #63B4A6;
    --sp-c4: #2C8680;
    --sp-c4-text: #1F6B66;

    --sp-ink: #10302E;
    --sp-ink-soft: #2C524C;
    --sp-ink-muted: #557069;

    --sp-bg: #D9EEE4;
    --sp-bg-2: #CBE6D9;
    --sp-bg-3: #BEDFCD;
    --sp-surface: #F7EFA6;
    --sp-surface-2: #FBF5C8;
    --sp-surface-glass: rgba(247, 239, 166, 0.78);
    --sp-head-bg: #BFE0D1;

    --sp-edge: #16403B;
    --sp-edge-soft: #CDE8DD;
    --sp-edge-butter: #ECE2A0;

    --sp-glow-c4: rgba(44, 134, 128, 0.22);
    --sp-glow-c3: rgba(99, 180, 166, 0.28);
    --sp-shadow-soft: rgba(16, 48, 46, 0.10);
    --sp-shadow-mid: rgba(16, 48, 46, 0.16);

    --sp-hot: #D6562A;
    --sp-hot-soft: #F2A07D;
    --sp-iris: #5B53A0;

    --sp-btn-main: #2C8680;
    --sp-btn-ink: #10302E;
    --sp-btn-flip-face: #F6EEA0;
    --sp-btn-flip-body: #2C8680;

    --sp-ff-display: 'Red Hat Display', system-ui, -apple-system, Segoe UI, sans-serif;
    --sp-ff-body: 'Red Hat Text', system-ui, -apple-system, Segoe UI, sans-serif;

    --sp-fz-h1: clamp(2.5rem, 5vw + 1rem, 4.3rem);
    --sp-fz-h2: clamp(1.85rem, 3vw + 1rem, 2.9rem);
    --sp-fz-h3: clamp(1.4rem, 1.5vw + 1rem, 1.8rem);
    --sp-fz-h4: clamp(1.18rem, 0.8vw + 1rem, 1.38rem);
    --sp-fz-h5: 1.06rem;
    --sp-fz-h6: 0.95rem;
    --sp-fz-body: 1rem;
    --sp-fz-sm: 0.9rem;
    --sp-fz-tc: 0.78rem;

    --sp-fw-md: 500;
    --sp-fw-sb: 600;
    --sp-fw-bd: 700;

    --sp-radius-lg: 30px;
    --sp-radius-md: 18px;
    --sp-radius-sm: 11px;
    --sp-radius-xs: 7px;
    --sp-radius-pill: 999px;

    --sp-header-h: 76px;
    --sp-notch: 22px;

    --sp-maze-wm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%232C8680' stroke-width='3'%3E%3Cpath d='M6 6h18v18h18'/%3E%3Cpath d='M6 42V24h18'/%3E%3C/g%3E%3C/svg%3E");
    --sp-maze-turn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6B66' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v9a3 3 0 0 0 3 3h13'/%3E%3Cpath d='m16 12 4 4-4 4'/%3E%3C/svg%3E");
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--sp-header-h) + 14px);
    -webkit-text-size-adjust: 100%;
    background: var(--sp-bg);
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--sp-bg);
    color: var(--sp-ink);
    font-family: var(--sp-ff-body);
    font-weight: var(--sp-fw-md);
    font-size: var(--sp-fz-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: var(--sp-c4-text);
    text-decoration: none;
}

button {
    font-family: inherit;
}

[hidden] {
    display: none !important;
}

.sp-h1, .sp-h2, .sp-h3, .sp-h4 {
    font-family: var(--sp-ff-display);
    font-weight: var(--sp-fw-bd);
    color: var(--sp-ink);
    line-height: 1.08;
    margin: 0;
}

.sp-h1 { font-size: var(--sp-fz-h1); letter-spacing: -0.02em; }
.sp-h2 { font-size: var(--sp-fz-h2); letter-spacing: -0.015em; }
.sp-h3 { font-size: var(--sp-fz-h3); }
.sp-h4 { font-size: var(--sp-fz-h4); }

.sp-h5 {
    font-family: var(--sp-ff-display);
    font-weight: var(--sp-fw-sb);
    font-size: var(--sp-fz-h5);
    color: var(--sp-ink);
    line-height: 1.3;
    margin: 0;
}

.sp-h6 {
    font-family: var(--sp-ff-body);
    font-weight: var(--sp-fw-bd);
    font-size: var(--sp-fz-h6);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sp-c4-text);
    margin: 0;
}

.sp-p {
    font-family: var(--sp-ff-body);
    font-weight: var(--sp-fw-md);
    font-size: var(--sp-fz-body);
    color: var(--sp-ink-soft);
    line-height: 1.7;
    margin: 0;
}

.sp-p--sm {
    font-family: var(--sp-ff-body);
    font-weight: var(--sp-fw-sb);
    font-size: var(--sp-fz-sm);
    color: var(--sp-ink-muted);
    line-height: 1.6;
    margin: 0;
}

.sp-lead {
    font-family: var(--sp-ff-body);
    font-weight: var(--sp-fw-md);
    font-size: clamp(1.1rem, 0.6vw + 1rem, 1.32rem);
    color: var(--sp-ink-soft);
    line-height: 1.62;
    margin: 0;
}

.sp-tc {
    font-family: var(--sp-ff-body);
    font-weight: var(--sp-fw-sb);
    font-size: var(--sp-fz-tc);
    color: var(--sp-ink-muted);
    line-height: 1.5;
    margin: 0;
}

.sp-btn {
    --sp-btn-c: var(--sp-btn-main);
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    overflow: hidden;
    padding: 0.95em 2.3em;
    border: 2px solid var(--sp-btn-c);
    border-radius: var(--sp-radius-pill);
    background: transparent;
    color: var(--sp-btn-c);
    font-family: var(--sp-ff-display);
    font-weight: var(--sp-fw-sb);
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    transition: color 0.5s ease;
}

.sp-btn > span {
    position: relative;
    z-index: 1;
}

.sp-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 100%;
    left: 100%;
    width: 18em;
    height: 14em;
    border-radius: 50%;
    background: var(--sp-btn-c);
    transition: all 0.7s ease;
}

.sp-btn:hover {
    color: var(--sp-c1);
}

.sp-btn:hover::before {
    top: -3em;
    left: -3em;
}

.sp-btn:active::before {
    background: var(--sp-c4-text);
    transition: background 0s;
}

.sp-btn--ink {
    --sp-btn-c: var(--sp-btn-ink);
}

.sp-btn--solid {
    background: var(--sp-btn-c);
    color: var(--sp-c1);
}

.sp-btn--solid::before {
    background: var(--sp-c4-text);
}

.sp-btn--solid:hover {
    color: var(--sp-c1);
}

.sp-btn--cream {
    background: var(--sp-c1);
    border-color: var(--sp-c1);
    color: var(--sp-ink);
}

.sp-btn--cream::before {
    background: var(--sp-c4);
}

.sp-btn--cream:hover {
    color: var(--sp-c1);
}

.sp-btn-flip {
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: 1em 2.4em;
    border: 2px solid var(--sp-btn-flip-body);
    border-radius: var(--sp-radius-pill);
    background: var(--sp-btn-flip-body);
    color: var(--sp-c1);
    font-family: var(--sp-ff-display);
    font-weight: var(--sp-fw-bd);
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

.sp-btn-flip__face {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    background: var(--sp-btn-flip-face);
    color: var(--sp-ink);
    transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
}

.sp-btn-flip:hover .sp-btn-flip__face {
    transform: translateY(100%);
}

.sp-btn-flip__letters {
    display: inline-flex;
}

.sp-btn-flip__letters span {
    opacity: 0;
    transform: translateY(-15px);
    transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.2s;
}

.sp-btn-flip__letters span:nth-child(2n) {
    transform: translateY(15px);
}

.sp-btn-flip:hover .sp-btn-flip__letters span {
    opacity: 1;
    transform: translateY(0);
}

.sp-btn-flip:hover .sp-btn-flip__letters span:nth-child(2) { transition-delay: 0.08s; }
.sp-btn-flip:hover .sp-btn-flip__letters span:nth-child(3) { transition-delay: 0.16s; }
.sp-btn-flip:hover .sp-btn-flip__letters span:nth-child(4) { transition-delay: 0.24s; }
.sp-btn-flip:hover .sp-btn-flip__letters span:nth-child(5) { transition-delay: 0.32s; }
.sp-btn-flip:hover .sp-btn-flip__letters span:nth-child(6) { transition-delay: 0.40s; }
.sp-btn-flip:hover .sp-btn-flip__letters span:nth-child(7) { transition-delay: 0.48s; }

.sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-family: var(--sp-ff-body);
    font-weight: var(--sp-fw-bd);
    font-size: var(--sp-fz-sm);
    letter-spacing: 0.02em;
    color: var(--sp-ink);
}

.sp-chip__node {
    position: relative;
    flex: none;
    width: 0.72em;
    height: 0.72em;
    border-radius: 3px;
    background: var(--sp-c4);
}

.sp-chip__node::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: 0.55em;
    height: 2px;
    background: var(--sp-c3);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
}

.sp-chip:hover .sp-chip__node {
    animation: sp-node-pulse 1.5s ease-in-out infinite;
}

.sp-chip:hover .sp-chip__node::after {
    transform: translateY(-50%) scaleX(1);
}

.sp-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 11px;
    padding: 0.66em 1.15em;
    background: var(--sp-surface);
    border-radius: 19px;
    font-family: var(--sp-ff-display);
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.15;
    color: var(--sp-ink);
    filter: drop-shadow(0 0 1.5px rgba(22, 64, 59, 0.32)) drop-shadow(0 9px 18px var(--sp-shadow-soft));
}

.sp-badge::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sp-surface);
    transform: translateY(-50%);
    z-index: -1;
}

.sp-badge__txt {
    display: flex;
    flex-direction: column;
    gap: 0.06em;
}

.sp-badge__k {
    font-family: var(--sp-ff-display);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--sp-hot);
}

.sp-badge__v {
    font-family: var(--sp-ff-display);
    font-weight: 800;
    font-size: 0.94rem;
    color: var(--sp-ink);
}

.sp-badge--tl { transform: rotate(-2.2deg); }
.sp-badge--tr { transform: rotate(2.2deg); }

.sp-puzz {
    position: relative;
    filter: drop-shadow(0 0 1.6px rgba(22, 64, 59, 0.26)) drop-shadow(0 16px 30px var(--sp-shadow-soft));
}

.sp-puzz__fill {
    --m-t: linear-gradient(#000, #000);
    --m-r: linear-gradient(#000, #000);
    --m-b: linear-gradient(#000, #000);
    --m-l: linear-gradient(#000, #000);
    position: relative;
    z-index: 1;
    height: 100%;
    border-radius: 26px;
    background: linear-gradient(140deg, var(--sp-puzz-a, var(--sp-c2)), var(--sp-puzz-b, var(--sp-c3)));
    -webkit-mask: var(--m-t), var(--m-r), var(--m-b), var(--m-l);
    -webkit-mask-composite: source-in, source-in, source-in;
    mask: var(--m-t), var(--m-r), var(--m-b), var(--m-l);
    mask-composite: intersect, intersect, intersect;
}

.sp-puzz__tab {
    position: absolute;
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--sp-puzz-a, var(--sp-c2)), var(--sp-puzz-b, var(--sp-c3)));
    z-index: 0;
}

.sp-puzz__tab--t { top: -17px; left: 50%; transform: translateX(-50%); }
.sp-puzz__tab--b { bottom: -17px; left: 50%; transform: translateX(-50%); }
.sp-puzz__tab--l { left: -17px; top: 50%; transform: translateY(-50%); }
.sp-puzz__tab--r { right: -17px; top: 50%; transform: translateY(-50%); }

.sp-puzz--t-tab .sp-puzz__tab--t { display: block; }
.sp-puzz--b-tab .sp-puzz__tab--b { display: block; }
.sp-puzz--l-tab .sp-puzz__tab--l { display: block; }
.sp-puzz--r-tab .sp-puzz__tab--r { display: block; }

.sp-puzz--t-blank .sp-puzz__fill { --m-t: radial-gradient(circle 17px at 50% 0%, transparent 0 17px, #000 18px); }
.sp-puzz--r-blank .sp-puzz__fill { --m-r: radial-gradient(circle 17px at 100% 50%, transparent 0 17px, #000 18px); }
.sp-puzz--b-blank .sp-puzz__fill { --m-b: radial-gradient(circle 17px at 50% 100%, transparent 0 17px, #000 18px); }
.sp-puzz--l-blank .sp-puzz__fill { --m-l: radial-gradient(circle 17px at 0% 50%, transparent 0 17px, #000 18px); }

.sp-puzz--g1 { --sp-puzz-a: #F6EEA0; --sp-puzz-b: #F4B98D; }
.sp-puzz--g2 { --sp-puzz-a: #B6E7F0; --sp-puzz-b: #8FD3C6; }
.sp-puzz--g3 { --sp-puzz-a: #D8CDF2; --sp-puzz-b: #B7E0D6; }
.sp-puzz--g4 { --sp-puzz-a: #F8D6A2; --sp-puzz-b: #F0A37C; }

.sp-card {
    position: relative;
    background: var(--sp-surface);
    border: 2px solid var(--sp-edge-soft);
    border-radius: var(--sp-radius-md);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.sp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--sp-maze-wm);
    background-size: 48px 48px;
    opacity: 0.05;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(135deg, #000, transparent 62%);
    mask-image: linear-gradient(135deg, #000, transparent 62%);
}

.sp-card > * {
    position: relative;
    z-index: 1;
}

.sp-card:hover {
    border-color: var(--sp-c4);
    box-shadow: 0 0 0 2px var(--sp-glow-c4), 0 18px 42px var(--sp-shadow-soft);
    transform: scale(1.01);
}

.sp-sec-head {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 48rem;
}

.sp-sec-head__kick {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--sp-ff-body);
    font-weight: var(--sp-fw-bd);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sp-c4-text);
}

.sp-sec-head__kick::before {
    content: "";
    width: 1.25em;
    height: 1.25em;
    flex: none;
    background: var(--sp-maze-turn) center / contain no-repeat;
}

.sp-sec-head__title {
    font-family: var(--sp-ff-display);
    font-weight: var(--sp-fw-bd);
    font-size: var(--sp-fz-h2);
    letter-spacing: -0.015em;
    line-height: 1.06;
    color: var(--sp-ink);
    margin: 0;
}

.sp-sec-head__sub {
    font-family: var(--sp-ff-body);
    font-weight: var(--sp-fw-md);
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--sp-ink-soft);
    margin: 0;
}

.sp-sec-head--center {
    align-items: center;
    text-align: center;
    margin-inline: auto;
}

.sp-wrap {
    width: min(100% - 2.6rem, 1200px);
    margin-inline: auto;
}

.sp-section {
    padding-block: clamp(3.4rem, 6vw, 6rem);
}

.sp-section--alt { background: var(--sp-bg-2); }
.sp-section--tint { background: var(--sp-bg-3); }

.sp-ic {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    vertical-align: middle;
}

.sp-ic--ink { filter: brightness(0) saturate(100%) invert(13%) sepia(22%) saturate(1400%) hue-rotate(125deg) brightness(94%); }
.sp-ic--teal { filter: brightness(0) saturate(100%) invert(46%) sepia(46%) saturate(420%) hue-rotate(124deg) brightness(90%); }
.sp-ic--cream { filter: brightness(0) saturate(100%) invert(95%) sepia(22%) saturate(480%) hue-rotate(2deg) brightness(103%); }

.sp-draw-path {
    stroke-dasharray: var(--sp-len, 600);
    stroke-dashoffset: var(--sp-len, 600);
}

.sp-draw-path.is-drawn {
    animation: sp-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.sp-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;
}

@keyframes sp-node-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.28); }
}

@keyframes sp-draw {
    to { stroke-dashoffset: 0; }
}

@keyframes sp-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .sp-draw-path { stroke-dashoffset: 0; }
}