/* Theme */
:root {
  --bg: #0d0f0e;
  --surface: #111311;
  --text: #e8e8e8;
  --muted: #a8aca7;
  --accent: #39dd54;
  --accent-2: #f7b733; /* case study button */
  --shadow: 0 20px 50px rgba(57, 221, 84, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Inter", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

section, header { padding: 5rem 2rem; }
.container { max-width: 1100px; margin: 0 auto; }

/* Intro / hero */
#intro { position: relative; min-height: 400px; }
#intro .intro-content { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
#intro h1 { font-size: clamp(2.2rem, 6vw, 3rem); font-weight: 800; letter-spacing: 0.2px; }
#intro .intro-text { max-width: 560px; color: var(--muted); margin: 1rem 0 1.5rem; }

.cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(180deg, #48e56b 0%, var(--accent) 100%);
  color: #0a0a0a; font-weight: 700; text-decoration: none; padding: 0.9rem 1.3rem;
  border-radius: 10px; box-shadow: var(--shadow);
}
.cta .arrow { display:inline-block; transform: translateY(1px); }
.cta:hover { filter: brightness(1.05); box-shadow: 0 30px 60px rgba(57, 221, 84, 0.35); }

/* Circular profile visual to the right via pseudo element */
#intro::after {
  content: "";
  position: absolute;
  right: 2rem;
  top: 2.5rem;
  width: clamp(200px, 28vw, 320px);
  height: clamp(200px, 28vw, 320px);
  border-radius: 50%;
  /* Layered backgrounds: image above, subtle radial behind */
  background: url('../images/tiger.png') center/cover no-repeat,
              radial-gradient(ellipse at 35% 35%, #384149 0%, #202628 55%, #161a1a 100%);
  outline: 8px solid #2a2f2a;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.6));
  z-index: 0;
}

@media (max-width: 768px) {
  #intro::after {
    position: relative;
    right: auto;
    top: auto;
    margin: 2rem auto;
    display: block;
    width: clamp(180px, 50vw, 280px);
  }
}

/* Worked-with logos */
.worked-with { margin-top: 3rem; }
.worked-with h3 { color: var(--muted); font-weight: 600; margin-bottom: 1rem; }
.worked-with ul { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(120px,1fr)); gap: 1rem; max-width: 900px; }
.worked-with li {
  background: #0f120f; color: #cbd5c0; border: 1px solid #1b221a; border-radius: 12px;
  display:flex; align-items:center; justify-content:center; height:56px;
  text-transform: none; font-weight: 600; letter-spacing:.2px;
}

/* Case Studies section */
#past-work { background:#fff; color:#121212; border-radius: 28px 28px 0 0; }
#past-work h2 { font-size: 2rem; font-weight: 800; text-align:center; }
#past-work .section-lead { color:#6b7280; text-align:center; max-width:720px; margin: .75rem auto 2rem; }

.featured-work { max-width:1100px; margin:0 auto; display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; }
.featured-work .details { padding: 0 1rem; }
.chip { display:inline-block; background:#fffbf0; color:#0a0a0a; border:1px solid #f1e5a6; border-radius:999px; font-size:.75rem; font-weight:700; padding:.3rem .6rem; margin-bottom:1rem; }
.featured-work h3 { font-size:1.5rem; font-weight:800; margin-bottom:.5rem; }
.featured-work p { color:#4b5563; margin: .75rem 0 1.25rem; }

.secondary-btn { display:inline-flex; align-items:center; gap:.4rem; background:#fff2d9; color:#0a0a0a; border:1px solid #f5c566; border-radius:10px; padding:.7rem 1rem; text-decoration:none; font-weight:700; }
.secondary-btn:hover { filter:brightness(1.02); }

.featured-work .visual img { width:100%; border-radius:12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }

/* Categories grid */
.work-categories { max-width:1100px; margin:3rem auto 0; display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:1.5rem; }
.category { background:#f7f7f7; border:1px solid #e7e7e7; border-radius:12px; padding:1.2rem; }
.category h3 { margin-bottom:.5rem; }
.category ul { list-style:none; color:#374151; }
.category li { padding:.35rem 0; }

/* Recent work slider */
#recent-work { color:var(--text); background:var(--bg); }
#recent-work h2 { font-weight:800; margin:0 auto 1rem; max-width:1100px; }
.slider { display:flex; overflow-x:auto; gap:1rem; padding: 0 2rem; }
.slide { min-width:280px; height:170px; background:#171a17; border:1px solid #212621; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#c7d2c8; }

/* Contact */
#contact { background:#0e100f; color:var(--text); }
form { display:flex; flex-direction:column; gap:1rem; max-width:480px; margin:0 auto; }
input, textarea { background:#171a17; color:#e8e8e8; border:1px solid #242a24; border-radius:10px; padding:.8rem 1rem; }
button { background:var(--accent); color:#0a0a0a; border:none; border-radius:10px; padding:.9rem 1.2rem; font-weight:700; box-shadow: var(--shadow); }
button:hover { filter:brightness(1.05); }

/* Responsive tweaks */
@media (max-width: 900px) {
  .featured-work { grid-template-columns: 1fr; }
  #intro::after { position: static; display:block; margin: 2rem auto 0; }
  .worked-with ul { grid-template-columns: repeat(3, 1fr); }
}