@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;1,9..40,300&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black: #151515;
  --white: #f4f1ec;
  --accent: #faa61e;
  --mid: #1f1f1f;
  --mid2: #282828;
  --muted: #777;
  --border: rgba(244,241,236,0.09);
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* ─── CURSOR ─────────────────────────────────────── */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .28s, height .28s;
}
.cursor-ring {
  position: fixed; top: 0; left: 0;
  width: 38px; height: 38px;
  border: 1px solid rgba(250,166,30,.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .28s, height .28s, border-color .28s;
}
.cursor.hover  { width: 18px; height: 18px; }
.cursor-ring.hover { width: 56px; height: 56px; border-color: var(--accent); }

/* ─── NAV ─────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 64px;
  z-index: 100;
  transition: background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
nav.scrolled {
  background: rgba(21,21,21,.93);
  backdrop-filter: blur(14px);
  border-color: var(--border);
}
.nav-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}
.nav-logo span { color: var(--accent); }
.nav-links { display: flex; gap: 40px; list-style: none; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .3s;
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width .3s;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

/* ─── MARQUEE ─────────────────────────────────────── */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  background: var(--mid);
}
.marquee-track {
  display: flex; gap: 56px;
  animation: marquee 24s linear infinite;
  white-space: nowrap;
}
.marquee-item {
  font-family: 'Syne', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.marquee-item span { color: var(--accent); margin: 0 10px; }

/* ─── SECTION UTILITIES ──────────────────────────── */
.section-label {
  font-size: .7rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 14px;
}
.section-label::before { content:''; display:inline-block; width:28px; height:1px; background:var(--accent); }

.section-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(36px,4vw,58px);
  line-height: 1.04;
  letter-spacing: -.025em;
}

/* ─── BUTTONS ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--accent);
  color: var(--black);
  text-decoration: none;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 18px 38px;
  border: none; cursor: none;
  transition: transform .3s, background .3s;
}
.btn:hover { transform: translateY(-3px); background: #e8960e; }
.btn svg { transition: transform .3s; }
.btn:hover svg { transform: translateX(4px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent;
  color: var(--white);
  text-decoration: none;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 16px 36px;
  border: 1px solid var(--border);
  transition: border-color .3s, color .3s, transform .3s;
  cursor: none;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ─── PROJECT CARD ────────────────────────────────── */
.project-card {
  position: relative;
  overflow: hidden;
  background: var(--mid);
  cursor: none;
  aspect-ratio: 4/5;
}
.project-card.wide { aspect-ratio: unset; }
.project-bg {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform .6s ease;
}
.project-card:hover .project-bg { transform: scale(1.05); }
.logo-mockup { width: 55%; max-width: 210px; }
.project-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21,21,21,.96) 0%, transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s, transform .4s;
}
.project-card:hover .project-overlay { opacity: 1; transform: translateY(0); }
.project-tag {
  font-size: .66rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 7px;
}
.project-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em;
}
.project-arrow {
  position: absolute; top: 24px; right: 24px;
  width: 38px; height: 38px;
  border: 1px solid rgba(244,241,236,.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .4s;
}
.project-card:hover .project-arrow { opacity: 1; }

/* Card color themes */
.c1 { background: #161624; }
.c2 { background: #0c1d30; }
.c3 { background: #1a1100; }
.c4 { background: #0b180b; }
.c5 { background: #1c0909; }
.c6 { background: #181418; }
.c7 { background: #0f1a20; }

/* ─── FOOTER ──────────────────────────────────────── */
footer {
  padding: 32px 64px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border);
  flex-wrap: wrap; gap: 12px;
}
.footer-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: .9rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.footer-logo span { color: var(--accent); }
.footer-copy { font-size: .7rem; color: var(--muted); }

/* ─── REVEAL ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .42s; }

/* ─── ANIMATIONS ──────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

/* ─── RESPONSIVE ──────────────────────────────────── */
@media(max-width:900px){
  nav { padding: 18px 24px; }
  .nav-links { gap: 20px; }
  footer { padding: 24px; }
}
@media(max-width:600px){
  .nav-links { display:none; }
}