@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@400;500&display=swap');

:root {
  --black: #0a0a0a;
  --white: #f5f4f0;
  --red: #c0392b;
  --red-dim: #8b2a1e;
  --gray: #141414;
  --gray-mid: #222;
  --gray-border: #2a2a2a;
  --gray-light: #777;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
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 { width: 10px; height: 10px; background: var(--red); border-radius: 50%; position: fixed; top:0;left:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition: transform 0.15s ease; }
.cursor-ring { width: 32px; height: 32px; border: 1px solid rgba(192,57,43,0.45); border-radius:50%; position:fixed; top:0;left:0; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition: transform 0.45s cubic-bezier(.16,1,.3,1); }

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--red); }

/* Nav */
nav {
  position: fixed; top:0;left:0;right:0; z-index:100;
  padding: 26px 60px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(10,10,10,0.95) 0%, transparent 100%);
}
.nav-logo { font-family:'DM Mono',monospace; font-size:12px; letter-spacing:0.15em; color:var(--white); text-decoration:none; opacity:0.85; }
.nav-back { display:flex; align-items:center; gap:10px; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:rgba(245,244,240,0.45); text-decoration:none; transition:color 0.2s; }
.nav-back:hover { color:var(--red); }
.nav-back svg { width:14px; height:14px; }
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(245,244,240,0.45); text-decoration:none; transition:color 0.2s; }
.nav-links a:hover { color:var(--red); }

/* Common layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 60px; }
.section-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.25em; text-transform:uppercase; color:var(--red); margin-bottom:16px; display:flex; align-items:center; gap:14px; }
.section-label::after { content:''; flex:1; max-width:48px; height:1px; background:var(--red); opacity:0.4; }
.section-title { font-family:'Playfair Display',serif; font-size:clamp(36px,4vw,58px); font-weight:900; line-height:1; letter-spacing:-0.02em; }
.red-line { width:100%; height:3px; background:var(--red); }

/* Reveal */
.reveal { opacity:0; transform:translateY(28px); transition: opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }

/* Footer */
footer { background:var(--black); padding:36px 60px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--gray-border); }
footer p { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.12em; color:rgba(245,244,240,0.2); text-transform:uppercase; }
.footer-logo { font-family:'Playfair Display',serif; font-size:20px; font-weight:900; letter-spacing:-0.02em; }
.footer-logo em { color:var(--red); font-style:italic; }

/* Award badge */
.award-badge { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(192,57,43,0.35); padding:7px 14px; border-radius:2px; }
.award-dot { width:7px;height:7px;background:var(--red);border-radius:50%;animation:pulse 2s infinite; }
.award-text { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:var(--red); }

/* Metric block */
.metrics-row { display:flex; gap:40px; flex-wrap:wrap; }
.metric { display:flex; flex-direction:column; }
.metric-val { font-family:'Playfair Display',serif; font-size:clamp(28px,3vw,42px); font-weight:700; color:var(--white); line-height:1; }
.metric-val .pos { color:var(--red); }
.metric-label { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gray-light); margin-top:6px; }

/* Mockup frame */
.mockup-frame { background:var(--gray); border:1px solid var(--gray-border); border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.mockup-frame img { width:100%; height:100%; object-fit:cover; display:block; }
.mockup-placeholder { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.15em; color:rgba(245,244,240,0.12); text-transform:uppercase; }
.mockup-placeholder::before { content:'[ '; }
.mockup-placeholder::after { content:' ]'; }

/* Image placeholder styled */
.img-slot { background:var(--gray); border:1px solid var(--gray-border); border-radius:4px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.img-slot::before { content:''; position:absolute;inset:0; background:linear-gradient(135deg,rgba(192,57,43,0.04) 0%,transparent 60%); }
.img-slot-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.15em; color:rgba(245,244,240,0.1); text-transform:uppercase; }

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* Project hero */
.project-hero { min-height:72vh; display:flex; align-items:flex-end; position:relative; overflow:hidden; padding:0 60px 80px; }
.project-hero-bg { position:absolute;inset:0; }
.project-hero-bg-inner { width:100%;height:100%;object-fit:cover;filter:grayscale(100%) brightness(0.25); }
.project-hero-overlay { position:absolute;inset:0; background:linear-gradient(to top, var(--black) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.3) 100%); }
.project-hero-content { position:relative; max-width:820px; }
.project-tag { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--red); display:inline-block; border:1px solid rgba(192,57,43,0.35); padding:5px 12px; border-radius:2px; margin-bottom:24px; }
.project-hero-title { font-family:'Playfair Display',serif; font-size:clamp(48px,7vw,96px); font-weight:900; line-height:0.93; letter-spacing:-0.03em; margin-bottom:28px; }
.project-hero-sub { font-size:18px; line-height:1.7; color:rgba(245,244,240,0.6); max-width:560px; }

/* Content sections */
.content-section { padding:100px 60px; }
.content-section.dark { background:var(--black); }
.content-section.gray { background:var(--gray); }
.two-col { display:grid; grid-template-columns:2fr 3fr; gap:64px; align-items:start; }
.two-col.flip { grid-template-columns:3fr 2fr; }
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; }
.content-lead { font-size:21px; line-height:1.75; color:rgba(245,244,240,0.85); margin-bottom:32px; }
.content-body { font-size:16px; line-height:1.8; color:rgba(245,244,240,0.6); }
.content-body + .content-body { margin-top:20px; }
.content-body strong { color:var(--white); font-weight:500; }

/* Responsibilities list */
.resp-list { list-style:none; margin-top:32px; }
.resp-list li { display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--gray-border); }
.resp-list li:last-child { border-bottom:none; }
.resp-icon { width:32px; height:32px; background:rgba(192,57,43,0.12); border:1px solid rgba(192,57,43,0.25); border-radius:2px; display:flex;align-items:center;justify-content:center; flex-shrink:0; margin-top:2px; }
.resp-icon span { color:var(--red); font-size:14px; }
.resp-title { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--white); margin-bottom:6px; }
.resp-desc { font-size:14px; line-height:1.65; color:rgba(245,244,240,0.55); }

/* Feature card */
.feature-card { background:var(--gray-mid); border:1px solid var(--gray-border); padding:36px 32px; border-radius:3px; transition:border-color 0.3s; }
.feature-card:hover { border-color:rgba(192,57,43,0.4); }
.feature-card-title { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; margin-bottom:12px; }
.feature-card-desc { font-size:14px; line-height:1.7; color:rgba(245,244,240,0.55); }

/* Full-width image band */
.image-band { width:100%; height:480px; position:relative; overflow:hidden; }
.image-band img { width:100%;height:100%;object-fit:cover;filter:grayscale(20%); }
.image-band-overlay { position:absolute;inset:0;background:linear-gradient(to bottom, rgba(10,10,10,0.3) 0%,rgba(10,10,10,0.1) 50%,rgba(10,10,10,0.5) 100%); }

/* Breadcrumb nav */
.project-nav-bottom { padding:60px; background:var(--gray); display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--gray-border); }
.proj-nav-link { display:flex; flex-direction:column; gap:8px; text-decoration:none; }
.proj-nav-link .pnl-label { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(245,244,240,0.3); }
.proj-nav-link .pnl-title { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--white); transition:color 0.2s; }
.proj-nav-link:hover .pnl-title { color:var(--red); }
.proj-nav-link.right { text-align:right; }

/* Screen grid for app mockups */
.screens-grid { display:grid; gap:16px; }
.screens-grid.two { grid-template-columns:1fr 1fr; }
.screens-grid.three { grid-template-columns:1fr 1fr 1fr; }
.screens-grid.four { grid-template-columns:repeat(4,1fr); }
.screen-item { background:var(--gray); border:1px solid var(--gray-border); border-radius:4px; overflow:hidden; aspect-ratio:9/16; position:relative; display:flex; align-items:center; justify-content:center; }
.screen-item img { width:100%;height:100%;object-fit:contain;padding:8px; }
.screen-desktop { aspect-ratio:16/10; }

/* Stat highlight */
.stat-highlight { padding:40px 0; border-top:1px solid var(--gray-border); }
.stat-highlight .stat-num { font-family:'Playfair Display',serif; font-size:clamp(48px,6vw,80px); font-weight:900; line-height:1; color:var(--red); }
.stat-highlight .stat-desc { font-size:16px; color:rgba(245,244,240,0.6); margin-top:10px; line-height:1.6; }

/* Research stats */
.research-row { display:flex; gap:2px; background:var(--gray-border); border:1px solid var(--gray-border); margin-top:48px; }
.research-item { flex:1; background:var(--gray); padding:32px 28px; text-align:center; }
.research-num { font-family:'Playfair Display',serif; font-size:40px; font-weight:700; color:var(--white); }
.research-label { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.15em; text-transform:uppercase; color:var(--gray-light); margin-top:8px; }

@media(max-width:960px){
  .container{padding:0 32px;}
  nav{padding:22px 32px;}
  .content-section{padding:72px 32px;}
  .project-hero{padding:0 32px 60px;}
  .two-col{grid-template-columns:1fr;gap:48px;}
  .three-col{grid-template-columns:1fr 1fr;}
  .screens-grid.four{grid-template-columns:1fr 1fr;}
  footer{padding:32px;}
.proj-nav-link.right{text-align:center;}
  .two-col[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
@media(max-width:600px){
  .three-col{grid-template-columns:1fr;}
  .screens-grid.three{grid-template-columns:1fr 1fr;}
  .research-row{flex-direction:column;}
}