:root { --dj-primary:       #00c896;
--dj-primary-dark:  #00a97e;
--dj-accent:        #4f46e5; --dj-white:         #ffffff;
--dj-text:          #0f1117; --dj-text-soft:     #374151;
--dj-text-light:    #6b7280;
--dj-border:        #e5e7eb;
--dj-border-soft:   #f3f4f6;
--dj-surface:       #f8fafc;
--dj-surface-alt:   #f1f5f9;  --shadow-xs:
0 1px 3px  rgba(0, 0, 0, .04),
0 2px 8px  rgba(0, 0, 0, .03);
--shadow-sm:
0 2px 8px  rgba(0, 0, 0, .04),
0 8px 24px rgba(0, 0, 0, .05);
--shadow-md:
0 4px 16px rgba(0, 0, 0, .05),
0 20px 56px rgba(0, 0, 0, .07);
--shadow-lg:
0 8px 24px rgba(0, 0, 0, .06),
0 40px 96px rgba(0, 0, 0, .10); --radius-sm:  10px;
--radius-md:  20px;
--radius-lg:  28px;
--radius-xl:  40px;  --font-heading: "Syne", "DM Sans", system-ui, sans-serif;
--font-body:    "DM Sans", "Inter", system-ui, sans-serif;
--font-mono:    "JetBrains Mono", "Fira Code", monospace; --container-width: 1280px; --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
--ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
--ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast:  0.2s var(--ease-out);
--transition:       0.35s var(--ease-out);
--transition-slow:  0.6s var(--ease-spring); --space-xs:  12px;
--space-sm:  24px;
--space-md:  48px;
--space-lg:  80px;
--space-xl:  140px;
--space-2xl: 200px;
} *,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%; scrollbar-gutter: stable;
}
body {
min-height: 100vh;
overflow-x: hidden;
font-family: var(--font-body);
color: var(--dj-text);
background:
linear-gradient(
180deg,
#fafaf9 0%,
#f7f8fa 100%
);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.7;
position: relative;
} body::before {
content: "";
position: fixed;
inset: 0;
background:
radial-gradient(
circle at top right,
rgba(0, 200, 150, 0.04),
transparent 42%
);
pointer-events: none;
z-index: -1;
} img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
img {
height: auto;
} a {
color: inherit;
text-decoration: none;
transition: color var(--transition-fast), opacity var(--transition-fast);
} ul,
ol {
list-style: none;
} h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--dj-text);
font-family: var(--font-heading);
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1;
}
h1 {
font-size: clamp(3.2rem, 5.5vw, 5.8rem);
line-height: 0.92;
letter-spacing: -0.06em;
}
h2 {
font-size: clamp(2.4rem, 3.8vw, 4.2rem);
line-height: 0.95;
letter-spacing: -0.05em;
}
h3 {
font-size: clamp(1.4rem, 2.2vw, 2rem);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 700;
}
h4 {
font-size: clamp(1.1rem, 1.6vw, 1.4rem);
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: 700;
}
h5,
h6 {
line-height: 1.25;
letter-spacing: -0.01em;
font-weight: 600;
}
p {
font-size: 1.02rem;
line-height: 1.85;
color: var(--dj-text-light);
}
strong {
font-weight: 700;
color: var(--dj-text);
} .dj-container {
width: min(
calc(100% - 80px),
var(--container-width)
);
margin-inline: auto;
} input,
textarea,
select,
button {
font: inherit;
}
button {
border: 0;
background: none;
cursor: pointer;
} :focus-visible {
outline: 2px solid var(--dj-primary);
outline-offset: 4px;
border-radius: 4px;
} ::selection {
background: rgba(0, 200, 150, 0.15);
color: var(--dj-text);
} ::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--dj-primary);
} section {
position: relative;
padding: var(--space-xl) 0;
} .dj-section-number {
position: absolute;
top: -40px;
left: 0;
font-size: clamp(6rem, 12vw, 12rem);
font-family: var(--font-heading);
font-weight: 900;
line-height: 1;
color: var(--dj-text);
opacity: 0.035;
pointer-events: none;
user-select: none;
z-index: 0;
letter-spacing: -0.08em;
} .dj-section-heading {
position: relative;
margin-bottom: 88px;
z-index: 2;
} .dj-section-heading span {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
color: var(--dj-text-light);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.dj-section-heading span::before {
content: "";
display: inline-block;
width: 24px;
height: 1px;
background: var(--dj-primary);
flex-shrink: 0;
}
.dj-section-heading h2 {
max-width: 860px;
} .dj-glass {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.45);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
} .dj-shadow {
box-shadow: var(--shadow-md);
} .dj-radius {
border-radius: var(--radius-lg);
} .dj-card {
background: var(--dj-white);
border: 1px solid var(--dj-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
} .dj-hover {
transition:
transform var(--transition),
box-shadow var(--transition);
}
.dj-hover:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
} .dj-divider {
width: 80px;
height: 1px;
background: linear-gradient(
90deg,
var(--dj-primary),
rgba(0, 200, 150, 0.15)
);
} @media (max-width: 1024px) {
.dj-container {
width: min(
calc(100% - 48px),
var(--container-width)
);
}
section {
padding: var(--space-lg) 0;
}
.dj-section-heading {
margin-bottom: 72px;
}
}
@media (max-width: 768px) {
.dj-container {
width: min(
calc(100% - 32px),
var(--container-width)
);
}
.dj-section-heading {
margin-bottom: 56px;
}
.dj-section-number {
font-size: clamp(4rem, 15vw, 7rem);
opacity: 0.03;
}
}
@media (max-width: 480px) {
.dj-container {
width: min(
calc(100% - 24px),
var(--container-width)
);
}
.dj-section-heading {
margin-bottom: 44px;
}
section {
padding: var(--space-md) 0;
}
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}