:root {
    --bg: #0f1117;
    --bg-card: #161922;
    --fg: #e8eaf0;
    --fg-muted: #7a7f8e;
    --primary: #ff0066;
    --primary-glow: #ff3385;
    --border: #232730;
    --radius: 0.75rem;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg); color:var(--fg); font-family:'DM Sans',sans-serif; line-height:1.6; }
h1,h2,h3,h4,h5,h6 { font-family:'Space Grotesk',sans-serif; }
a { color:var(--primary); text-decoration:none; }
a:hover { opacity:0.85; }
img { max-width:100%; height:auto; }

/* Layout */
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.section { padding:4rem 0; }
.section-alt { background:var(--bg-card); }

/* Nav */
.site-nav { position:sticky; top:0; z-index:100; background:rgba(15,17,23,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.nav-brand { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.25rem; color:var(--fg); }
.nav-brand span { color:var(--primary); }
.nav-links { display:flex; gap:1.5rem; list-style:none; }
.nav-links a { color:var(--fg-muted); font-size:0.875rem; transition:color 0.2s; }
.nav-links a:hover,.nav-links a.active { color:var(--primary); }
.nav-toggle { display:none; background:none; border:none; color:var(--fg); font-size:1.5rem; cursor:pointer; }
@media(max-width:768px) {
    .nav-toggle { display:block; }
    .nav-links { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid var(--border); padding:1rem 1.5rem; }
    .nav-links.open { display:flex; }
}

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:0.5rem; padding:0.75rem 1.5rem; border-radius:2rem; font-size:0.875rem; font-weight:500; transition:all 0.2s; border:none; cursor:pointer; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--fg); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }

/* Cards */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color 0.2s; }
.card:hover { border-color:rgba(255,0,102,0.3); }
.card-body { padding:1.25rem; }
.card img { width:100%; height:12rem; object-fit:cover; }

/* Grid */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media(max-width:1024px) { .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* Tags */
.tag { display:inline-block; padding:0.25rem 0.625rem; border-radius:2rem; font-size:0.625rem; font-weight:500; background:rgba(255,0,102,0.1); color:var(--primary); }

/* Section headers */
.section-label { display:inline-block; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.2em; color:var(--primary); margin-bottom:0.75rem; }
.section-title { font-size:2rem; font-weight:700; color:var(--fg); margin-bottom:0.5rem; }

/* Hero */
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
@media(max-width:768px) { .hero-grid { grid-template-columns:1fr; } }
.hero-img { width:20rem; height:24rem; object-fit:cover; border-radius:1rem; box-shadow:0 20px 40px rgba(0,0,0,0.3); }
.text-gradient { background:linear-gradient(135deg,#ff0066,#ff5588); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Skills bar */
.skills-bar { display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; margin-top:2rem; }
.skill-icon { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.skill-icon img { width:3.5rem; height:3.5rem; object-fit:contain; padding:0.5rem; background:var(--bg-card); border:1px solid var(--border); border-radius:0.75rem; }
.skill-icon span { font-size:0.625rem; color:var(--fg-muted); }

/* Clients */
.client-logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2rem; }
.client-logos img { height:3.5rem; object-fit:contain; filter:grayscale(1); opacity:0.5; transition:all 0.3s; }
.client-logos img:hover { filter:grayscale(0); opacity:1; }

/* Testimonials */
.testimonial { padding:2rem; border-radius:var(--radius); background:var(--bg-card); border:1px solid var(--border); }
.testimonial-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.testimonial-header img { width:3.5rem; height:3.5rem; border-radius:50%; object-fit:cover; }
.stars { color:var(--primary); margin-bottom:0.75rem; }

/* Timeline */
.timeline-item { position:relative; padding-left:1.5rem; padding-bottom:2rem; border-left:2px solid var(--border); }
.timeline-item:last-child { border-left-color:transparent; }
.timeline-dot { position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--primary); border:2px solid var(--bg); }

/* Gallery */
.gallery-filters { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:2rem; }
.filter-btn { padding:0.5rem 1rem; border-radius:2rem; font-size:0.75rem; font-weight:500; background:var(--bg-card); color:var(--fg-muted); border:1px solid var(--border); cursor:pointer; transition:all 0.2s; }
.filter-btn.active,.filter-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

.gallery-item { position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-card); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.gallery-item:hover img { transform:scale(1.1); }
.gallery-overlay { position:absolute; bottom:0; left:0; right:0; padding:0.75rem; background:linear-gradient(to top,rgba(0,0,0,0.7),transparent); }
.gallery-overlay p { font-size:0.875rem; font-weight:500; color:#fff; }
.gallery-overlay span { font-size:0.75rem; color:var(--primary); }
.gallery-item iframe { width:100%; height:100%; border:none; }

/* Animations */
.anim-card iframe,.anim-card video { width:100%; aspect-ratio:16/9; border:none; }

/* Contact */
.contact-card { display:flex; flex-direction:column; align-items:center; gap:0.75rem; padding:1.5rem; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-card); text-align:center; transition:border-color 0.2s; }
.contact-card:hover { border-color:rgba(255,0,102,0.3); }
.contact-card svg { width:1.25rem; height:1.25rem; color:var(--primary); }

/* Footer */
.site-footer { border-top:1px solid var(--border); padding:2rem 0; text-align:center; color:var(--fg-muted); font-size:0.875rem; }

/* Project group */
.project-group-title { font-size:1.25rem; font-weight:700; color:var(--fg); border-left:4px solid var(--primary); padding-left:1rem; margin-bottom:2rem; }

/* Expand gallery */
.project-gallery { display:none; padding:0 1.25rem 1.25rem; }
.project-gallery.open { display:block; }
.project-gallery-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.project-gallery-grid img { width:100%; border-radius:0.5rem; border:1px solid var(--border); object-fit:contain; max-height:500px; background:var(--bg-card); }
@media(max-width:640px) { .project-gallery-grid { grid-template-columns:1fr; } }