@font-face {
font-family: "Outfit";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/Outfit-Light.ttf") format("truetype");
}
@font-face {
font-family: "Outfit";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Outfit-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Outfit";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Outfit-Medium.ttf") format("truetype");
}
@font-face {
font-family: "Outfit";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Outfit-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: "Outfit";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Outfit-Bold.ttf") format("truetype");
}
@font-face {
font-family: "Outfit";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Outfit-ExtraBold.ttf") format("truetype");
}
@font-face {
font-family: "Outfit";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/Outfit-Black.ttf") format("truetype");
}
:root {
--bg: #FFFFFF;
    --surface: #FAFAFA;
    --surface-2: #F4F4F5;
    --hairline: #E5E5E5;
    --hairline-strong: #D4D4D8;
    --text: #0A0A0F;
    --text-dim: #8B8B95;
    --text-soft: #4A4A5A;
    --cyan: #00CCFF;
    --cyan-dim: rgba(0, 204, 255, 0.18);
    --cyan-edge: rgba(0, 204, 255, 0.35);
    --red: #EF4444;

    --display: "Outfit", ui-sans-serif, system-ui, sans-serif;
    --body: "Outfit", ui-sans-serif, system-ui, sans-serif;
    --mono: "Outfit", ui-monospace, "SFMono-Regular", monospace;

    --max: 1440px;
    --gutter: clamp(20px, 4vw, 56px);
}
* {
box-sizing: border-box;
}
html, body {
margin: 0; padding: 0;
}
body {
background-color: var(--bg);
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
      url("../img/pattern-checkerboard.webp");
    background-repeat: repeat;
    background-position: top left;
    background-attachment: scroll;
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
a {
color: inherit; text-decoration: none;
}
button {
font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.oss-shell {
max-width: 1680px;
    margin: 0 auto;
    padding-inline: 2rem;
    position: relative;
}
.oss-section-rule {
border-top: 1px solid var(--hairline);
}
.oss-section-tag {
display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.oss-section-tag .oss-num {
color: var(--text);
    opacity: 0.55;
}
.oss-section-tag .oss-dot {
width: 6px; height: 6px; border-radius: 999px;
    background: var(--cyan);
    box-shadow: 0 0 12px var(--cyan-edge);
}
.oss-has-dropdown {
position: relative;
}
.oss-has-dropdown > a::after {
content: "";
    display: inline-block;
    width: 6px; height: 6px;
    margin-left: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.7;
    transition: transform 200ms ease;
}
.oss-has-dropdown:hover > a::after, .oss-has-dropdown:focus-within > a::after {
transform: translateY(0) rotate(225deg);
}
.oss-btn {
display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 8px 8px 8px 28px;
    border-radius: 50px;
    font-family: var(--body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    white-space: nowrap;
    min-height: 60px;
    box-sizing: border-box;
}
.oss-btn--primary {
background: var(--cyan);
    color: #0A0A0F;
}
.oss-btn--primary:hover {
transform: translateY(-1px); background: #1FD2FF;
}
.oss-btn--ghost {
background: #FFFFFF;
    color: var(--text);
    border: 2px solid #0A0A0F;
}
.oss-btn--ghost:hover {
transform: translateY(-1px);
}
.oss-btn--sm {
min-height: 48px;
    padding: 6px 6px 6px 22px;
    gap: 14px;
    font-size: 12px;
    border-radius: 50px;
}
.oss-btn .oss-arrow {
width: 44px; height: 44px;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0A0A0F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    flex-shrink: 0;
    transition: transform 180ms ease;
}
.oss-btn--sm .oss-arrow {
width: 36px; height: 36px;
}
.oss-btn--primary .oss-arrow {
background: #FFFFFF; color: #0A0A0F;
}
.oss-btn--ghost .oss-arrow {
background: var(--cyan); color: #0A0A0F;
}
.oss-btn .oss-arrow svg {
width: 16px; height: 16px;
}
.oss-btn--sm .oss-arrow svg {
width: 14px; height: 14px;
}
.oss-btn:hover .oss-arrow {
transform: translateX(3px);
}
@keyframes blink {
0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@keyframes pulse {
0%   { box-shadow: 0 0 0 0 rgba(0, 204, 255,0.55); }
    100% { box-shadow: 0 0 0 14px rgba(0, 204, 255,0); }
}
@keyframes marquee {
from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.oss-problem {
position: relative;
    padding: 100px 0;
    color: #FFFFFF;
}
.oss-problem::before {
content: "";
    position: absolute;
    inset: 0;
    margin-inline: calc(50% - 50vw);
    background: #0A0A0F;
    z-index: -1;
    pointer-events: none;
}
@media (max-width: 640px) {
.oss-problem {
padding: 100px 0;
}
}
@keyframes reviews-left {
from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes reviews-right {
from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}