/* ===== Nijas — Dark Navy + Red Reference Style (v2 polish) ===== */

:root{
    --bg:#0f1220;          /* dark navy */
    --panel:#151a2c;       /* card */
    --panel-2:#111628;     /* deeper */
    --ink:#f3f4f9;         /* text */
    --muted:#a3aac2;       /* muted */
    --line:#0b0e1a;        /* deep shadow edge */
    --shadow:0 20px 40px rgba(0,0,0,.38);
    --brand:#ff4d5a;       /* coral red */
    --brand-2:#ff7b89;     /* lighter red */
    --chip:#1d2338;        /* neutral chip */
    --chip-brd:rgba(255,255,255,.12);
    --chip-text:#cbd3ea;
    --radius:18px;
    --radius-lg:22px;
    --container:1180px;
    --t-1:clamp(12px,.9vw,14px);
    --t0:clamp(14px,1vw,16px);
    --t1:clamp(18px,1.2vw,20px);
    --t2:clamp(26px,2vw,34px);
    --t3:clamp(36px,2.8vw,46px);
    --t4:clamp(52px,4vw,72px);
  }
  
  /* Base */
  html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;line-height:1.65}
  *{box-sizing:border-box}
  img{max-width:100%;height:auto;border-radius:14px}
  .container{max-width:var(--container);margin:0 auto;padding:0 24px}
  .muted{color:var(--muted)}
  .mt-6{margin-top:24px}
  .mt-8{margin-top:32px}
  
  /* Header */
  .header{position:sticky;top:0;z-index:999;background:linear-gradient(180deg, rgba(16,19,34,.95), rgba(16,19,34,.7));backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
  .header__inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
  .brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
  .brand__avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.15)}
  .brand__name{font-weight:800;letter-spacing:.2px}
  .nav{display:flex;gap:16px;align-items:center}
  .nav a{color:var(--ink);opacity:.92;text-decoration:none;font-size:var(--t0)}
  .nav a:hover{opacity:1}
  
  /* Right rail */
  .rail{position:fixed;right:24px;top:120px;bottom:120px;width:16px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
  .rail::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:2px;background:linear-gradient(var(--brand),transparent 60%, var(--brand));opacity:.35}
  .rail__dot{display:block;width:14px;height:14px;border-radius:50%;border:2px solid var(--brand);background:transparent;transition:background .2s ease}
  .rail__dot:hover{background:var(--brand)}
  
  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:var(--panel);color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .15s ease, filter .2s ease}
  .btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
  .btn--primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#2a0a10;border:none}
  .btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.16)}
  .btn--resume{border:none;background:linear-gradient(135deg,#ffd166,#fca311);color:#2a1400}
  
  /* Hero */
  .hero{padding:120px 0 80px}
  .hero__wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
  .kicker{color:var(--muted);font-size:var(--t-1);margin:0 0 6px}
  .hero__title{font-size:var(--t4);line-height:1.08;margin:0 0 8px;font-weight:800;letter-spacing:-.01em}
  .hero__lead{font-size:var(--t1);color:var(--muted);max-width:52ch;margin:10px 0 22px}
  .hero__art img{display:block;;border-radius:22px}
  @media (max-width:980px){.hero__wrap{grid-template-columns:1fr}}
  
  /* Section headings */
  .section{padding:84px 0}
  .section__eyebrow{color:var(--muted);font-size:var(--t-1);margin:0}
  .section__title{font-size:var(--t2);margin:6px 0 6px;font-weight:800}
  .section__underline{display:block;width:80px;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--brand),var(--brand-2));}
  
  /* Work cards — polished image-first */
  .grid{display:grid;gap:22px}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--2{grid-template-columns:repeat(2,1fr)}
  @media (max-width:980px){.grid--3{grid-template-columns:1fr 1fr}}
  @media (max-width:640px){.grid--3,.grid--2{grid-template-columns:1fr}}
  .card{position:relative;background:var(--panel-2);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.06);box-shadow:var(--shadow);overflow:hidden}
  .card__thumb{display:block;aspect-ratio:1/1;background:#0b1225;overflow:hidden}
  .card__thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .4s ease, filter .3s ease;filter:saturate(88%) contrast(102%)}
  .card:hover .card__thumb img{transform:scale(1.06);filter:saturate(100%)}
  .card__body{padding:16px}
  .card__title{font-size:20px;margin:4px 0 6px;font-weight:700}
  .card__desc{color:var(--muted);margin:0 0 10px}
  .tags{display:flex;flex-wrap:wrap;gap:8px}
  .tag{font-size:12px;padding:6px 10px;border-radius:999px;background:var(--chip);border:1px solid var(--chip-brd);color:var(--chip-text)}
  
  /* About panels */
  .panel{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:var(--shadow);padding:18px}
  .panel__title{margin:0 0 10px;font-size:20px;font-weight:700}
  .about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px}
  @media (max-width:980px){.about__grid{grid-template-columns:1fr}}
  .about__bio{background:var(--panel);padding:18px;border:1px solid rgba(255,255,255,.06);border-radius:18px}
  .skill-groups{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:640px){.skill-groups{grid-template-columns:1fr}}
  .group{background:var(--panel-2);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:14px}
  .group h4{margin:0 0 8px;font-size:16px}
  .badges{display:flex;flex-wrap:wrap;gap:8px}
  .badge{padding:6px 10px;border-radius:999px;background:var(--chip);border:1px solid var(--chip-brd);color:var(--chip-text);font-size:12px}
  
  /* Timeline */
  .timeline{position:relative;display:grid;gap:20px}
  .timeline::before{content:"";position:absolute;left:32px;top:0;bottom:0;width:2px;background:rgba(255,77,90,.35); z-index: 10;}
  .job{display:grid;grid-template-columns:80px 1fr;gap:16px;align-items:flex-start; position: relative; z-index: 100;}
  .job__logo{width:64px;height:64px;border-radius:12px;background:#14182a;border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--shadow)}
  .job__logo img{max-width:100%;max-height:100%;object-fit:contain}
  .job__body{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:var(--shadow);padding:14px}
  .role-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--chip);border:1px solid var(--chip-brd);color:var(--chip-text);font-size:12px}
  .job__title{margin:6px 0 6px;font-size:18px;font-weight:700}
  .job__desc{margin:0 0 15px 0;color:var(--muted)}
  
  /* Contact (no form) */
  .contact{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
  .contact__card{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:18px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:8px}
  .contact__card .label{color:var(--muted);font-size:12px}
  .contact__card .value{font-weight:700}
  .contact__actions{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
  .contact__actions .btn{padding:8px 12px;border-radius:12px}
  
  /* Footer */
  .footer{padding:36px 0;border-top:1px solid rgba(255,255,255,.06)}
  .footer__inner{display:flex;align-items:center;justify-content:space-between}

  /* ===== Case Study Pages ===== */

.case-body {
  background: var(--bg);
}

.case {
  padding-bottom: 80px;
}

.case-hero {
  padding: 96px 0 40px;
}

.case-back {
  margin-bottom: 24px;
}

.case-hero__content {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.case-title {
  margin-bottom: 8px;
}

.case-lead {
  max-width: 60ch;
  margin-bottom: 24px;
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.case-meta h2 {
  margin: 0 0 4px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.case-meta p {
  margin: 0;
}

.case-tags {
  margin-top: 8px;
}

.case-hero__image img {
  border-radius: 22px;
  box-shadow: var(--shadow);
}

/* Case sections */

.case-section {
  padding: 32px 0;
}

.case-section__title {
  font-size: 22px;
  margin: 0 0 8px;
}

.case-section__intro {
  margin: 0 0 20px;
  color: var(--muted);
}

/* Gallery */

.case-gallery {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.case-gallery__item img {
  width: 100%;
  height: auto;
  border-radius: 18px;
}

figure {
  margin: 15px 0;
  padding: 15px;
}

.card__actions {
  margin-top: 14px;
}

.btn--case {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  color: var(--brand);
  background: transparent;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease, opacity 0.2s ease;
  padding: 6px 0;  /* small touch target without making it look padded */
}

.btn--case:hover {
  transform: translateX(4px);
  opacity: 0.85;
}

/* Responsive case layout */

@media (max-width: 980px) {
  .case-hero__content {
    grid-template-columns: 1fr;
  }

  .case-meta {
    grid-template-columns: 1fr 1fr;
  }

  .case-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .case-meta {
    grid-template-columns: 1fr;
  }

  .case-gallery {
    grid-template-columns: 1fr;
  }

  .case-hero {
    padding-top: 80px;
  }
}

  
  /* Responsive rail hide on mobile */
  @media (max-width:980px){.rail{display:none}}
  @media screen and (max-width: 600px) {
    .header__inner {flex-wrap: wrap; padding: 10px;}
    .section {padding: 30px 0;}
    .contact {display: flex; flex-direction: column;}
  }