/* ppss.ee — Evolved Minimal */
:root {
    --bg: #FEFEFE;
    --primary: #1A1A1A;
    --text: #4A4A4A;
    --accent: #0057FF;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 15px; line-height: 1.8; color: var(--text); background: var(--bg); overflow-x: hidden; }

.nav-dot { position: fixed; top: 32px; right: 32px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); cursor: pointer; z-index: 100; transition: transform 0.2s; }
.nav-dot:hover { transform: scale(1.5); }

#hero { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; }
.mark { font-weight: 700; font-size: 48px; color: var(--primary); letter-spacing: 0.05em; }
.scroll-line { position: absolute; bottom: 0; left: 50%; width: 1px; height: 0; background: var(--primary); opacity: 0.2; transition: height 1.5s ease-out; }
.scroll-line.visible { height: 80px; }

.content-cluster { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; padding: 80px 20%; gap: 40px; }
.content-cluster p { opacity: 0; transform: translateY(12px); transition: opacity 0.6s, transform 0.6s; }
.content-cluster p.visible { opacity: 1; transform: translateY(0); }
.left-text { align-self: flex-start; max-width: 60%; }
.right-text { align-self: flex-end; max-width: 60%; text-align: right; }
.center-text { align-self: center; text-align: center; font-weight: 700; font-size: 24px; }
.accent { color: var(--accent); }

#footer { padding: 80px 20%; text-align: center; }
.footer-mark { font-weight: 700; font-size: 14px; color: var(--primary); letter-spacing: 0.1em; opacity: 0.3; }

@media (max-width: 768px) {
    .content-cluster { padding: 60px 10%; }
    .left-text, .right-text { max-width: 90%; }
    .mark { font-size: 36px; }
}