:root {
    --bg-dark: #050505;
    --text-light: #f5f5f5;
    --accent: #a8b1ff;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', sans-serif; cursor: none; /* Hide default cursor */ }

body { background-color: var(--bg-dark); color: var(--text-light); overflow-x: hidden; }

/* Custom Cursor */
.cursor-dot { width: 8px; height: 8px; background: var(--text-light); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s; }
.cursor-outline { width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, top 0.15s ease-out, left 0.15s ease-out; }

/* Navbar */
.navbar { position: fixed; top: 0; width: 100%; padding: 30px 5%; display: flex; justify-content: space-between; align-items: center; z-index: 100; mix-blend-mode: difference; }
.logo { font-size: 1.5rem; font-weight: bold; letter-spacing: 2px; }
.btn-primary { background: transparent; color: var(--text-light); border: 1px solid var(--text-light); padding: 10px 24px; border-radius: 30px; transition: all 0.3s; }
.btn-primary:hover { background: var(--text-light); color: var(--bg-dark); }

/* Hero & Parallax */
.hero { height: 100vh; display: flex; align-items: center; padding: 0 10%; position: relative; overflow: hidden; }
.parallax-bg { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background-size: cover; background-position: center; z-index: -2; opacity: 0.4; will-change: transform; }
.hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, var(--bg-dark)); z-index: -1; }
.hero-content { position: relative; z-index: 1; max-width: 800px; }
.hero h1 { font-size: clamp(4rem, 8vw, 8rem); line-height: 1; letter-spacing: -2px; margin-bottom: 30px; }
.text-accent { color: transparent; -webkit-text-stroke: 1px var(--accent); }
.hero p { font-size: 1.5rem; color: #aaa; max-width: 500px; line-height: 1.4; }
.hero-deco { position: absolute; right: 10%; bottom: 10%; animation: spin 20s linear infinite; }

/* Bento Grid */
.bento-section { padding: 150px 5%; }
.container { max-width: 1400px; margin: 0 auto; }
.bento-section h2 { font-size: 4rem; margin-bottom: 60px; letter-spacing: -1px; }
.bento-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; grid-auto-rows: 400px; }
.wide { grid-column: span 2; }

/* Premium Cards */
.bento-card { position: relative; border-radius: 24px; overflow: hidden; background: #111; isolation: isolate; }
/* Gradient Border Simulation */
.bento-card::before { content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1px; background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.01)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 2; pointer-events: none; transition: background 0.5s; }
.bento-card:hover::before { background: linear-gradient(135deg, var(--accent), rgba(255,255,255,0.01)); }
.card-bg { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.bento-card:hover .card-bg { transform: scale(1.05); }

/* Glassmorphism */
.glass-effect { position: absolute; bottom: 20px; left: 20px; right: 20px; padding: 24px; background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 16px; z-index: 1; transition: transform 0.4s; }
.full-glass { inset: 0; bottom: 0; left: 0; right: 0; height: 100%; border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
.bento-card:hover .glass-effect { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }

.card-content h3 { font-size: 1.8rem; margin-bottom: 10px; }
.card-content p { color: #aaa; }

/* Footer */
.footer { height: 60vh; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--glass-border); }
.footer h2 { font-size: 6vw; letter-spacing: -3px; color: #333; transition: color 0.4s; }
.footer:hover h2 { color: var(--text-light); }

/* Animations */
.reveal-up { opacity: 0; transform: translateY(60px); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-up.active { opacity: 1; transform: translateY(0); }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Responsive */
@media (max-width: 768px) {
    .wide { grid-column: span 1; }
    .hero h1 { font-size: 4rem; }
    .cursor-dot, .cursor-outline { display: none; } /* Hide custom cursor on mobile */
    * { cursor: auto; }
}