/* ============================================================
   NUDIBANK — project page
   ============================================================ */

/* ---------- HERO ---------- */
.np-hero { position: relative; background: var(--navy-deep); color: var(--parchment); overflow: hidden; }
.np-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 80% 0%, rgba(46,86,140,.5), transparent 60%),
    linear-gradient(165deg, #15355f 0%, #0c2342 60%, #081a33 100%);
}
.np-hero-grain {
  position: absolute; inset: 0; opacity: .45; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}
.np-hero-inner { position: relative; z-index: 2; padding: 24px 0 clamp(50px, 7vw, 88px); }
.crumbs {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  display: flex; gap: 12px; align-items: center; margin-bottom: clamp(30px, 5vw, 56px);
  color: color-mix(in srgb, var(--parchment) 65%, transparent);
}
.crumbs a { text-decoration: none; opacity: .8; } .crumbs a:hover { opacity: 1; }
.crumbs b { color: var(--champagne); font-weight: 400; }

.np-hero-grid { display: grid; grid-template-columns: 1.3fr .8fr; gap: 48px; align-items: center; }
.np-title { font-size: clamp(64px, 11vw, 150px); font-weight: 200; letter-spacing: -0.04em; line-height: .92; margin: 0 0 22px; }
.np-sub { font-size: clamp(20px, 2.6vw, 30px); font-weight: 300; max-width: 24ch; color: color-mix(in srgb, var(--parchment) 88%, transparent); margin: 0 0 34px; line-height: 1.35; }
.np-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.np-hero-fig { margin: 0; text-align: center; }
.np-hero-fig img {
  width: min(100%, 320px); margin: 0 auto;
  filter: invert(1) sepia(.35) saturate(.7) brightness(1.65) drop-shadow(0 26px 50px rgba(0,0,0,.5));
}
.np-hero-fig figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--champagne); opacity: .8; margin-top: 18px; }
@media (max-width: 820px) {
  .np-hero-grid { grid-template-columns: 1fr; }
  .np-hero-fig { order: -1; }
  .np-hero-fig img { width: 200px; }
}

/* ---------- AT A GLANCE ---------- */
.glance { background: var(--navy); color: var(--parchment); border-top: 1px solid rgba(244,239,228,.14); }
.glance-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.glance-item { display: flex; flex-direction: column; gap: 8px; padding: 26px 22px 26px 0; border-left: 1px solid rgba(244,239,228,.16); padding-left: 22px; }
.glance-item:first-child { border-left: none; padding-left: 0; }
.g-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.g-v { font-size: 17px; font-weight: 400; }
@media (max-width: 820px) { .glance-grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .glance-item { padding-left: 22px; border-left: 1px solid rgba(244,239,228,.16); border-top: 1px solid rgba(244,239,228,.1); }
}

/* ---------- OVERVIEW ---------- */
.np-overview { padding: clamp(72px, 10vw, 130px) 0; background: var(--parchment); }
.np-cols { display: grid; grid-template-columns: .8fr 1.3fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.np-col-left { position: sticky; top: 100px; }
.np-col-left h2 { margin-top: 16px; }
.np-col-right p { font-size: 18px; color: var(--ink-soft); margin: 0 0 22px; }
.np-lead { font-size: clamp(22px, 2.6vw, 28px) !important; line-height: 1.45; color: var(--ink) !important; font-weight: 300; }
.np-col-right strong { color: var(--ink); font-weight: 600; }
@media (max-width: 820px) { .np-cols { grid-template-columns: 1fr; } .np-col-left { position: static; } }

/* ---------- WHY ---------- */
.why { position: relative; color: var(--parchment); padding: clamp(72px, 9vw, 120px) 0; overflow: hidden; }
.why-bg { position: absolute; inset: 0; background: linear-gradient(160deg, #14315c, #0c2342); }
.why-inner { position: relative; z-index: 2; display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 72px); align-items: center; }
.why-fig { margin: 0; text-align: center; }
.why-fig img { width: min(100%, 320px); margin: 0 auto; filter: invert(1) sepia(.35) saturate(.7) brightness(1.6) drop-shadow(0 24px 44px rgba(0,0,0,.45)); }
.why-text h2 { margin: 16px 0 22px; }
.why-text > p { font-size: 18.5px; color: color-mix(in srgb, var(--parchment) 86%, transparent); margin: 0 0 26px; max-width: 54ch; }
.why-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.why-list li { padding: 20px 0; border-top: 1px solid rgba(244,239,228,.18); font-size: 17px; color: color-mix(in srgb, var(--parchment) 84%, transparent); }
.why-list li:last-child { border-bottom: 1px solid rgba(244,239,228,.18); }
.why-list b { color: var(--champagne); font-weight: 600; }
@media (max-width: 760px) { .why-inner { grid-template-columns: 1fr; } .why-fig img { width: 200px; } }

/* ---------- METHOD ---------- */
.method { padding: clamp(72px, 9vw, 120px) 0; background: var(--parchment-2); }
.method-head { max-width: 620px; margin-bottom: clamp(40px, 5vw, 60px); }
.method-head h2 { margin-top: 16px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(33,48,45,.16); border: 1px solid rgba(33,48,45,.16); border-radius: var(--r-md); overflow: hidden; }
.step { background: var(--paper); padding: clamp(28px, 3.4vw, 48px); }
.step-n { font-family: var(--font-mono); font-size: 13px; letter-spacing: .2em; color: var(--gold-deep); }
.step h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 400; margin: 16px 0 12px; }
.step p { font-size: 16.5px; color: var(--ink-soft); margin: 0; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr; } }

/* ---------- CONTRIBUTE ---------- */
.contribute { padding: clamp(72px, 9vw, 120px) 0; background: var(--parchment); }
.contribute-inner { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(36px, 6vw, 72px); align-items: center; }
.contribute-fig { margin: 0; text-align: center; }
.contribute-fig img { width: min(100%, 260px); margin: 0 auto; mix-blend-mode: multiply; }
.contribute-text h2 { margin: 16px 0 20px; }
.contribute-text p { font-size: 18.5px; color: var(--ink-soft); max-width: 52ch; margin: 0 0 30px; }
.contribute-actions { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 760px) { .contribute-inner { grid-template-columns: 1fr; } .contribute-fig { order: -1; } .contribute-fig img { width: 180px; } }

/* ---------- NUDIBANK FAQ ---------- */
.np-faq { padding: clamp(72px, 9vw, 120px) 0; background: var(--parchment-2); }
.np-faq-list { display: flex; flex-direction: column; max-width: 880px; }
.faq-row { border-top: 1px solid rgba(33,48,45,.18); padding: 6px 0; }
.faq-row:last-child { border-bottom: 1px solid rgba(33,48,45,.18); }
.faq-row summary {
  list-style: none; cursor: pointer; padding: 22px 0;
  font-size: clamp(19px, 2.2vw, 24px); font-weight: 400;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after { content: "+"; font-family: var(--font-mono); color: var(--gold-deep); font-size: 24px; }
.faq-row[open] summary::after { content: "–"; }
.faq-row p { margin: 0 0 22px; color: var(--ink-soft); font-size: 17px; max-width: 64ch; }

/* ---------- RELATED ---------- */
.related { padding: clamp(72px, 9vw, 120px) 0; background: var(--parchment); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 28px); }
.related-card {
  background: var(--paper); border-radius: var(--r-md); padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 12px; min-height: 180px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.related-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(12,35,66,.06), 0 26px 50px -26px rgba(12,35,66,.5); }
.rc-code { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.rc-title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 300; margin-top: auto; }
@media (max-width: 760px) { .related-grid { grid-template-columns: 1fr; } }