.dj-header {
position: fixed;
top: 20px;
left: 0;
width: 100%;
z-index: 999; transition:
top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dj-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 72px;
padding: 0 32px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.65);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 8px 32px rgba(0, 0, 0, 0.06),
0 24px 64px rgba(0, 0, 0, 0.04);
transition:
background 0.4s ease,
box-shadow 0.4s ease,
border-color 0.4s ease;
}
.dj-header.is-scrolled .dj-header-inner {
background: rgba(255, 255, 255, 0.88);
border-color: rgba(255, 255, 255, 0.5);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 12px 40px rgba(0, 0, 0, 0.09),
0 32px 80px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(40px) saturate(200%);
-webkit-backdrop-filter: blur(40px) saturate(200%);
} .dj-logo {
display: flex;
flex-direction: column;
gap: 3px;
line-height: 1;
text-decoration: none;
}
.dj-logo strong {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 800;
color: var(--dj-text);
letter-spacing: -0.06em;
line-height: 1;
}
.dj-logo small {
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--dj-text-light);
font-weight: 500;
}
.dj-logo span {
color: var(--dj-primary);
} .dj-nav {
display: flex;
align-items: center;
gap: 36px;
}
.dj-nav a {
position: relative;
font-size: 0.82rem;
font-weight: 600;
color: var(--dj-text-light);
letter-spacing: 0.06em;
text-transform: uppercase;
transition:
color 0.25s ease,
opacity 0.25s ease;
}
.dj-nav a:hover {
color: var(--dj-text);
}
.dj-nav a::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
width: 0;
height: 1px;
background: currentColor;
transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.dj-nav a:hover::after {
width: 100%;
} .dj-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 140px;
overflow: hidden;
} .dj-hero::before {
content: "";
position: absolute;
top: -300px;
right: -200px;
width: 800px;
height: 800px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(0, 200, 150, 0.07) 0%,
transparent 65%
);
pointer-events: none;
z-index: 0;
}
.dj-hero::after {
content: "";
position: absolute;
bottom: -250px;
left: -150px;
width: 650px;
height: 650px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(79, 70, 229, 0.05) 0%,
transparent 65%
);
pointer-events: none;
z-index: 0;
}
.dj-hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 2;
} .dj-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 4px;
background: transparent;
border: 1px solid var(--dj-border);
margin-bottom: 32px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dj-text-light);
}
.dj-eyebrow::before {
content: "";
display: inline-block;
width: 20px;
height: 1px;
background: var(--dj-primary);
flex-shrink: 0;
} .dj-hero-content h1 {
max-width: 680px;
margin-bottom: 28px;
line-height: 0.95;
letter-spacing: -0.04em;
}
.dj-hero-content p {
max-width: 560px;
font-size: 1.1rem;
line-height: 1.75;
margin-bottom: 48px;
color: var(--dj-text-light);
}
.dj-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 72px;
} .dj-hero-stats {
display: flex;
gap: 48px;
padding-top: 28px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.dj-hero-stats strong {
display: block;
font-size: 2.4rem;
font-weight: 800;
letter-spacing: -0.06em;
color: var(--dj-text);
line-height: 1;
margin-bottom: 4px;
}
.dj-hero-stats span {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--dj-text-light);
font-weight: 500;
} .dj-hero-visual {
position: relative;
min-height: 680px;
border-radius: 28px;
overflow: hidden;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.98),
rgba(248, 250, 252, 0.96)
);
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.8) inset,
0 20px 60px rgba(0, 0, 0, 0.07),
0 60px 120px rgba(0, 0, 0, 0.04);
}
#dj-network {
width: 100%;
height: 100%;
} .dj-floating-card {
position: absolute;
min-width: 220px;
padding: 20px 24px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.75);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 20px 60px rgba(0, 0, 0, 0.07),
0 8px 24px rgba(0, 0, 0, 0.04);
z-index: 5;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dj-floating-card:hover {
transform: translateY(-10px) scale(1.02);
}
.dj-floating-card strong {
display: block;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.card-project {
top: 52px;
right: 18px;
animation: djFloat 8s ease-in-out infinite;
}
.card-skill {
bottom: 90px;
left: 8px;
animation: djFloat 6s ease-in-out infinite;
}
.card-system {
bottom: 24px;
right: 36px;
animation: djFloat 10s ease-in-out infinite;
} .dj-tech-stack {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}
.dj-tech-stack span {
padding: 7px 14px;
border-radius: 4px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.07);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--dj-text);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.dj-tech-stack span:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
} section {
position: relative;
padding: 160px 0;
} .dj-section-heading {
margin-bottom: 100px;
}
.dj-section-heading span {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
color: var(--dj-text-light);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.dj-section-heading span::before {
content: "";
display: inline-block;
width: 28px;
height: 1px;
background: var(--dj-primary);
}
.dj-section-heading h2 {
max-width: 660px;
letter-spacing: -0.04em;
line-height: 1.05;
} .dj-manifesto {
background: var(--dj-surface);
}
.dj-manifesto-content {
max-width: 980px;
}
.dj-manifesto h2 {
margin-bottom: 36px;
font-size: clamp(2.8rem, 5.5vw, 5.5rem);
line-height: 0.95;
letter-spacing: -0.05em;
}
.dj-manifesto p {
max-width: 660px;
font-size: 1.18rem;
line-height: 1.8;
color: var(--dj-text-light);
} .dj-methodology-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.dj-method-card {
position: relative;
padding: 44px 36px;
background: #fff;
border-radius: 20px;
border: 1px solid var(--dj-border);
transition:
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s ease,
border-color 0.35s ease;
}
.dj-method-card:hover {
transform: translateY(-12px);
border-color: rgba(0, 0, 0, 0.09);
box-shadow:
0 4px 0 var(--dj-primary) inset,
0 32px 80px rgba(0, 0, 0, 0.09),
0 12px 32px rgba(0, 0, 0, 0.05);
} .dj-method-card span {
display: block;
font-size: 3.5rem;
font-weight: 800;
color: rgba(0, 0, 0, 0.06);
margin-bottom: 24px;
letter-spacing: -0.06em;
line-height: 1;
font-variant-numeric: tabular-nums;
transition: color 0.35s ease;
}
.dj-method-card:hover span {
color: rgba(0, 0, 0, 0.1);
}
.dj-method-card h3 {
margin-bottom: 14px;
font-size: 1.05rem;
letter-spacing: -0.03em;
} .dj-paper {
background: #fff;
border-radius: 18px;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 12px 40px rgba(0, 0, 0, 0.05),
0 4px 12px rgba(0, 0, 0, 0.03);
transition:
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s ease;
}
.dj-paper:hover {
transform: translateY(-14px) rotate(-0.8deg);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 40px 80px rgba(0, 0, 0, 0.09),
0 16px 40px rgba(0, 0, 0, 0.05);
} .dj-systems-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.dj-system-card {
position: relative;
overflow: hidden;
padding: 64px;
border-radius: 28px;
background: linear-gradient(145deg, #ffffff, #f8fafc);
border: 1px solid var(--dj-border);
transition:
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s ease;
}
.dj-system-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--dj-primary), transparent);
opacity: 0;
transition: opacity 0.4s ease;
}
.dj-system-card:hover {
transform: translateY(-8px);
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
}
.dj-system-card:hover::before {
opacity: 1;
}
.dj-system-card h3 {
margin-bottom: 16px;
letter-spacing: -0.03em;
} .dj-projects-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.dj-project-large {
grid-column: span 8;
}
.dj-project-small {
grid-column: span 4;
}
.dj-project-card {
overflow: hidden;
border-radius: 24px;
background: #fff;
border: 1px solid var(--dj-border);
transition:
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s ease;
}
.dj-project-card:hover {
transform: translateY(-14px);
box-shadow:
0 40px 100px rgba(0, 0, 0, 0.09),
0 16px 40px rgba(0, 0, 0, 0.05);
} .dj-project-image {
aspect-ratio: 16 / 10;
background: #eceff3;
overflow: hidden;
position: relative;
}
.dj-project-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.dj-project-card:hover .dj-project-image img {
transform: scale(1.04);
}
.dj-project-content {
padding: 32px 28px;
} .dj-archive-grid {
columns: 4;
column-gap: 20px;
}
.dj-archive-item {
break-inside: avoid;
margin-bottom: 20px;
}
.dj-archive-card {
position: relative;
overflow: hidden;
border-radius: 16px;
background: #fff;
border: 1px solid var(--dj-border);
transition:
transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s ease;
}
.dj-archive-card:hover {
transform: translateY(-10px) rotate(0.6deg);
box-shadow:
0 32px 80px rgba(0, 0, 0, 0.09),
0 12px 32px rgba(0, 0, 0, 0.05);
}
.dj-archive-image {
width: 100%;
display: block;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.dj-archive-card:hover .dj-archive-image {
transform: scale(1.03);
}
.dj-archive-meta {
padding: 18px 20px;
} .dj-timeline {
max-width: 860px;
margin: auto;
position: relative;
} .dj-timeline::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background: linear-gradient(
to bottom,
transparent,
var(--dj-border) 8%,
var(--dj-border) 92%,
transparent
);
transform: translateX(-50%);
} .dj-contact {
text-align: center;
}
.dj-contact h2 {
margin-bottom: 20px;
letter-spacing: -0.04em;
}
.dj-contact p {
max-width: 640px;
margin: auto;
margin-bottom: 48px;
color: var(--dj-text-light);
line-height: 1.75;
} .dj-footer {
padding: 180px 0 80px;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.dj-footer-cta {
text-align: center;
max-width: 860px;
margin: auto;
padding-bottom: 100px;
}
.dj-footer-cta h2 {
margin-top: 28px;
margin-bottom: 24px;
letter-spacing: -0.04em;
line-height: 1.05;
}
.dj-footer-cta p {
max-width: 600px;
margin: auto;
margin-bottom: 48px;
color: var(--dj-text-light);
font-size: 1.05rem;
line-height: 1.8;
} .dj-footer-divider {
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(0, 0, 0, 0.1) 30%,
rgba(0, 0, 0, 0.1) 70%,
transparent
);
margin: 80px 0;
}
.dj-footer-main {
display: grid;
grid-template-columns: 1.5fr 0.5fr;
gap: 80px;
align-items: start;
}
.dj-footer-brand h3 {
margin-bottom: 16px;
letter-spacing: -0.03em;
}
.dj-footer-brand p {
max-width: 400px;
color: var(--dj-text-light);
line-height: 1.75;
}
.dj-footer-links {
display: flex;
gap: 24px;
flex-wrap: wrap;
padding-top: 8px;
}
.dj-footer-links a {
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--dj-text-light);
transition: color 0.25s ease;
}
.dj-footer-links a:hover {
color: var(--dj-text);
}
.dj-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
color: var(--dj-text-light);
font-size: 0.78rem;
letter-spacing: 0.04em;
padding-top: 48px;
margin-top: 48px;
border-top: 1px solid var(--dj-border);
} .dj-glow {
position: absolute;
border-radius: 50%;
filter: blur(100px);
pointer-events: none; }  @media (min-width: 1440px) {
.dj-hero-grid {
gap: 120px;
}
.dj-methodology-grid {
gap: 28px;
}
section {
padding: 180px 0;
}
} @media (max-width: 1280px) {
.dj-hero-grid {
gap: 60px;
}
.dj-methodology-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.dj-projects-grid .dj-project-large {
grid-column: span 7;
}
.dj-projects-grid .dj-project-small {
grid-column: span 5;
}
.dj-system-card {
padding: 48px;
}
.dj-archive-grid {
columns: 3;
}
} @media (max-width: 1024px) {
.dj-header-inner {
padding: 0 24px;
}
.dj-hero {
padding-top: 120px;
}
.dj-hero-grid {
grid-template-columns: 1fr;
gap: 64px;
}
.dj-hero-visual {
min-height: 480px;
border-radius: 24px;
}
.card-project,
.card-skill,
.card-system {
display: none;
}
.dj-hero-content h1 {
max-width: 100%;
}
.dj-projects-grid .dj-project-large,
.dj-projects-grid .dj-project-small {
grid-column: span 12;
}
.dj-systems-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.dj-archive-grid {
columns: 3;
}
.dj-footer-main {
grid-template-columns: 1fr;
gap: 48px;
}
section {
padding: 120px 0;
}
} @media (max-width: 768px) {
.dj-header {
top: 12px;
}
.dj-header-inner {
padding: 0 20px;
min-height: 62px;
border-radius: 16px;
}
.dj-nav {
gap: 24px;
}
.dj-nav a {
font-size: 0.78rem;
}
.dj-hero {
padding-top: 100px;
min-height: auto;
padding-bottom: 80px;
}
.dj-hero-stats {
gap: 32px;
flex-wrap: wrap;
}
.dj-hero-stats strong {
font-size: 2rem;
}
.dj-methodology-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.dj-method-card {
padding: 36px 28px;
}
.dj-archive-grid {
columns: 2;
column-gap: 16px;
}
.dj-archive-item {
margin-bottom: 16px;
}
.dj-timeline::before {
left: 24px;
}
.dj-footer {
padding: 120px 0 60px;
}
.dj-footer-cta {
padding-bottom: 72px;
}
.dj-footer-links {
gap: 20px;
}
section {
padding: 100px 0;
}
.dj-section-heading {
margin-bottom: 64px;
}
} @media (max-width: 480px) {
.dj-header {
top: 10px;
left: 0;
padding: 0 12px;
}
.dj-header-inner {
padding: 0 18px;
min-height: 56px;
border-radius: 14px;
}
.dj-nav {
gap: 18px;
} .dj-nav a:not(:first-child):not(:last-child) {
display: none;
}
.dj-hero {
padding-top: 90px;
padding-bottom: 60px;
}
.dj-hero-content p {
font-size: 1rem;
margin-bottom: 36px;
}
.dj-hero-actions {
margin-bottom: 48px;
gap: 12px;
}
.dj-hero-stats {
gap: 28px;
}
.dj-hero-stats strong {
font-size: 1.8rem;
}
.dj-hero-visual {
min-height: 360px;
border-radius: 20px;
}
.dj-eyebrow {
font-size: 0.65rem;
padding: 6px 12px;
margin-bottom: 20px;
}
.dj-manifesto h2 {
font-size: clamp(2.2rem, 9vw, 3.5rem);
}
.dj-manifesto p {
font-size: 1rem;
}
.dj-method-card {
padding: 28px 22px;
}
.dj-method-card span {
font-size: 2.8rem;
}
.dj-system-card {
padding: 36px 28px;
}
.dj-archive-grid {
columns: 2;
column-gap: 12px;
}
.dj-archive-item {
margin-bottom: 12px;
}
.dj-archive-card:hover { transform: translateY(-6px) rotate(0deg);
}
.dj-paper:hover {
transform: translateY(-8px) rotate(0deg);
}
.dj-footer {
padding: 80px 0 48px;
}
.dj-footer-cta {
padding-bottom: 48px;
}
.dj-footer-divider {
margin: 48px 0;
}
.dj-footer-bottom {
flex-direction: column;
text-align: center;
gap: 12px;
padding-top: 32px;
margin-top: 32px;
}
.dj-footer-links {
gap: 14px;
justify-content: flex-start;
}
section {
padding: 80px 0;
}
.dj-section-heading {
margin-bottom: 48px;
}
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}