/* Nawiri AI demo gallery — shared design system.
   Tokens sourced from /apps/projects/my-ai-consultant-firm/brand_assests/nawiri-brand-guidelines.md */

:root{
  --cream:#F8F4EE;
  --cream-dark:#EDE8DF;
  --ink:#1B1411;
  --ink-muted:#796B61;
  --border:#DDD6CB;
  --blue:#0DA2E7;
  --blue-deep:#0B81B8;
  --blue-wash:rgba(13,162,231,0.10);
  --blue-wash-strong:rgba(13,162,231,0.18);
  --amber:#F3A216;
  --amber-dim:#9C6B12;
  --amber-wash:rgba(243,162,22,0.14);
  --good:#1E8A5F;
  --good-wash:rgba(30,138,95,0.12);
  --danger:#C4432B;
  --danger-dim:#8C2E1C;
  --danger-wash:rgba(196,67,43,0.14);

  --font-display:'Bricolage Grotesque', Georgia, 'Times New Roman', serif;
  --font-body:'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:64px; --sp-7:96px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);

  --shadow-card:0 16px 40px -24px rgba(27,20,17,0.18);
  --shadow-lift:0 24px 48px -24px rgba(13,162,231,0.28);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.7;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center;
  padding:0 var(--sp-3) var(--sp-7);
}
a{color:inherit;}
button{font-family:inherit;}

/* ---------- Sticky nav (persistent, never scroll-away) ---------- */
.nawiri-nav{
  position:sticky; top:0; z-index:100; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 var(--sp-3);
  background:rgba(248,244,238,0.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  margin-bottom:var(--sp-6);
}
.nawiri-nav-mark{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-0.02em;
  min-height:44px; padding:4px 4px 4px 0;
}
.nawiri-nav-mark img{height:26px; width:auto; flex-shrink:0; display:block;}
.nawiri-nav-all{
  display:flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:600; color:var(--ink-muted); text-decoration:none;
  padding:9px 14px; border-radius:var(--r-pill); min-height:44px;
  transition:background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.nawiri-nav-all:hover{background:var(--cream-dark); color:var(--ink);}
.nawiri-nav-all svg{width:16px; height:16px;}
.nawiri-nav-all.is-current{color:var(--ink-muted); pointer-events:none;}

/* ---------- Hero copy ---------- */
.kicker{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--blue-deep);
  opacity:0; animation:rise 0.6s 0.05s var(--ease-out) forwards;
}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--blue); box-shadow:0 0 0 4px var(--blue-wash);}

h1{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.03em;
  font-size:clamp(2rem, 6vw, 3.1rem); line-height:1.1;
  text-align:center; margin:var(--sp-2) 0 var(--sp-1); max-width:760px;
  opacity:0; animation:rise 0.7s 0.12s var(--ease-out) forwards;
}
h1 em{font-style:normal; font-weight:800; color:var(--blue);}

.sub{
  color:var(--ink-muted); font-size:15.5px; text-align:center; max-width:520px; line-height:1.6;
  margin:0 0 var(--sp-4);
  opacity:0; animation:rise 0.7s 0.2s var(--ease-out) forwards;
}

/* ---------- Section rhythm ---------- */
.phase-block{
  width:100%; max-width:920px; margin-top:var(--sp-7);
  display:flex; flex-direction:column; align-items:center;
  opacity:0; transform:translateY(18px);
  transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.phase-block.visible{opacity:1; transform:translateY(0);}
.phase-block:first-of-type{margin-top:var(--sp-1);}

.section-label{
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--blue-deep); margin-bottom:var(--sp-2);
}
.section-label .num{
  font-family:var(--font-display); font-weight:700; font-size:12.5px;
  color:var(--ink); background:var(--cream-dark); border:1px solid var(--border);
  border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
}
.section-title{
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem, 3.2vw, 1.9rem);
  letter-spacing:-0.02em;
  text-align:center; max-width:620px; margin:0 0 var(--sp-1); line-height:1.22;
}
.section-title em{font-style:normal; font-weight:800; color:var(--blue);}
.section-sub{
  color:var(--ink-muted); font-size:14.5px; text-align:center; max-width:480px; line-height:1.6; margin:0 0 var(--sp-4);
}

/* ---------- State pill: the one recurring "you can see it working" device ---------- */
.state-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; letter-spacing:0.03em;
  color:var(--blue-deep); background:var(--blue-wash);
  border:1px solid rgba(13,162,231,0.28);
  padding:5px 12px; border-radius:var(--r-pill);
  transition:background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.state-pill.is-attention{color:var(--amber-dim); background:var(--amber-wash); border-color:rgba(243,162,22,0.32);}
.state-pill.is-done{color:var(--good); background:var(--good-wash); border-color:rgba(30,138,95,0.28);}
.state-pill svg{width:13px; height:13px;}

/* ---------- Generic card shell ---------- */
.crm-card, .doc-card-shell{
  width:100%; max-width:560px; background:#fff; border:1px solid var(--border); border-radius:var(--r-xl);
  padding:var(--sp-3) var(--sp-4); box-shadow:var(--shadow-card);
}

/* ---------- Document preview (reused: document-generation + sourcing-matching) ---------- */
.doc-card{
  width:100%; max-width:460px; background:#fff; color:var(--ink); border-radius:var(--r-lg);
  padding:var(--sp-3) 26px; box-shadow:var(--shadow-card); border:1px solid var(--border);
  opacity:0; animation:bubbleIn 0.5s var(--ease-out) forwards;
}
.doc-name{font-family:var(--font-display); font-weight:700; font-size:19px;}
.doc-role{font-size:12.5px; color:var(--ink-muted); margin-top:2px;}
.doc-hr{height:1px; background:var(--border); margin:14px 0;}
.doc-section-h{font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue-deep); margin:14px 0 6px;}
.doc-line{font-size:13px; line-height:1.6; color:#3a332e;}

/* ---------- Tabs ---------- */
.tabbar{display:flex; gap:6px; background:var(--cream-dark); border:1px solid var(--border); border-radius:var(--r-md); padding:5px; margin-bottom:var(--sp-3);}
.tabbtn{
  flex:1; appearance:none; border:none; background:transparent; color:var(--ink-muted);
  font-family:var(--font-body); font-size:12.5px; font-weight:700;
  padding:9px 10px; border-radius:var(--r-sm); cursor:pointer; transition:background 0.2s var(--ease-out), color 0.2s var(--ease-out);
  min-height:36px;
}
.tabbtn:hover{color:var(--ink);}
.tabbtn.active{background:var(--blue); color:#fff; box-shadow:0 8px 18px -8px rgba(13,162,231,0.55);}
.tabpanel{display:none;}
.tabpanel.active{display:block; animation:rise 0.4s var(--ease-out);}

/* ---------- Charts ---------- */
.chart-note{font-size:11.5px; color:var(--ink-muted); margin:0 0 var(--sp-2); text-align:center;}
.chart-wrap{position:relative; width:100%;}
.chart-wrap svg{width:100%; height:auto; display:block; overflow:visible;}
.axis-label{font-size:10.5px; fill:var(--ink-muted); font-family:var(--font-body);}
.legend{display:flex; gap:16px; justify-content:center; margin-top:var(--sp-2); flex-wrap:wrap;}
.legend-item{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-muted);}
.legend-dot{width:9px;height:9px;border-radius:3px;}

.bargroup{transform:scaleY(0); transform-box:fill-box; transform-origin:bottom; transition:transform 0.6s var(--ease-inout);}
.chart-visible .bargroup, .tabpanel.active .bargroup{transform:scaleY(1);}
.bargroup:nth-of-type(1){transition-delay:.02s;} .bargroup:nth-of-type(2){transition-delay:.08s;}
.bargroup:nth-of-type(3){transition-delay:.14s;} .bargroup:nth-of-type(4){transition-delay:.20s;}
.bargroup:nth-of-type(5){transition-delay:.26s;} .bargroup:nth-of-type(6){transition-delay:.32s;}
.bar-hit{fill:transparent; cursor:pointer;}

.funnelbar{transform:scaleX(0); transform-box:fill-box; transform-origin:left; transition:transform 0.65s var(--ease-inout);}
.funnel-visible .funnelbar, .tabpanel.active .funnelbar{transform:scaleX(1);}
.funnelbar.f1{transition-delay:.04s;} .funnelbar.f2{transition-delay:.16s;} .funnelbar.f3{transition-delay:.28s;} .funnelbar.f4{transition-delay:.40s;}
.funnel-hit{fill:transparent; cursor:pointer;}

.traj-line{stroke-dasharray:420; stroke-dashoffset:420; transition:stroke-dashoffset 1.3s var(--ease-inout);}
.chart-visible .traj-line, .tabpanel.active .traj-line{stroke-dashoffset:0;}
.traj-area{opacity:0; transition:opacity 0.8s 0.5s ease;} .chart-visible .traj-area, .tabpanel.active .traj-area{opacity:1;}
.traj-proj{stroke-dasharray:6 6; opacity:0; transition:opacity 0.6s 1.2s ease;} .tabpanel.active .traj-proj{opacity:1;}
.traj-dot{opacity:0; transition:opacity 0.3s ease; cursor:pointer;} .chart-visible .traj-dot, .tabpanel.active .traj-dot{opacity:1;}
.traj-dot:nth-of-type(1){transition-delay:.25s;} .traj-dot:nth-of-type(2){transition-delay:.4s;}
.traj-dot:nth-of-type(3){transition-delay:.55s;} .traj-dot:nth-of-type(4){transition-delay:.7s;}
.traj-dot:nth-of-type(5){transition-delay:.85s;} .traj-dot:nth-of-type(6){transition-delay:1s;}
.traj-dot:nth-of-type(7){transition-delay:1.15s;}

.stat-row{display:flex; gap:var(--sp-2); margin-top:var(--sp-2); flex-wrap:wrap;}
.stat{flex:1 1 120px; min-width:0; background:var(--cream-dark); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 14px;}
.stat .v{font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--ink);}
.stat .l{font-size:11px; color:var(--ink-muted); margin-top:3px;}
@media (max-width:480px){ .stat-row{flex-direction:column;} }

.tooltip{
  position:absolute; pointer-events:none; background:var(--ink); border:1px solid rgba(255,255,255,0.12);
  color:var(--cream); font-size:11.5px; padding:7px 11px; border-radius:var(--r-sm); white-space:nowrap;
  box-shadow:0 12px 30px -10px rgba(27,20,17,0.5); opacity:0; transform:translate(-50%,-130%); transition:opacity 0.15s; z-index:20;
}
.tooltip.show{opacity:1;} .tooltip b{color:#8fd8ff;}

/* ---------- Feature strip ---------- */
.features{margin-top:var(--sp-6); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); max-width:920px; width:100%;}
.feature{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-3); transition:transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out);}
.feature:hover{transform:translateY(-3px); border-color:rgba(13,162,231,0.4); box-shadow:var(--shadow-lift);}
.feature .num{font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--blue); margin-bottom:8px; display:block;}
.feature h3{font-family:var(--font-display); font-weight:700; font-size:17px; margin:0 0 8px; letter-spacing:-0.01em;}
.feature p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-muted);}

footer{margin-top:var(--sp-5); display:flex; align-items:center; gap:10px; color:var(--ink-muted); font-size:12.5px; flex-wrap:wrap; justify-content:center; text-align:center;}
footer b{color:var(--ink); font-weight:700;}
footer .sep{width:3px;height:3px;border-radius:50%;background:var(--border);}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-body); font-size:13px; font-weight:700; padding:9px 16px; border-radius:var(--r-pill);
  border:1px solid var(--border); color:var(--ink); background:#fff; cursor:pointer;
  transition:transform 0.1s var(--ease-out), background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), opacity 0.15s;
  min-height:40px; display:inline-flex; align-items:center; gap:6px;
}
.btn:active{transform:scale(0.98);}
.btn.primary{background:var(--blue); color:#fff; border-color:var(--blue);}
.btn.primary:hover{background:var(--blue-deep); border-color:var(--blue-deep);}
.btn:disabled{opacity:0.45; cursor:not-allowed;}
.btn:disabled:active{transform:none;}
.btn.ghost{background:transparent;}
.btn.ghost:hover{background:var(--cream-dark);}
.btn.good{background:var(--good); color:#fff; border-color:var(--good);}
.btn.good:hover{background:#176e4b; border-color:#176e4b;}

/* Outline icon defaults (single-weight, no fills) */
.icon{width:18px; height:18px; flex-shrink:0;}
.icon, .icon *{stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}

@keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
@keyframes bubbleIn{from{opacity:0; transform:translateY(6px) scale(0.98);} to{opacity:1; transform:translateY(0) scale(1);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes softPulse{0%,100%{box-shadow:0 0 0 0 var(--blue-wash-strong);} 50%{box-shadow:0 0 0 6px rgba(13,162,231,0);}}

@media (max-width:1024px){
  .features{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  body{padding:0 var(--sp-2) var(--sp-6);}
  .nawiri-nav{padding:0 var(--sp-2); margin-bottom:var(--sp-5);}
  .phase-block{margin-top:var(--sp-5);}
  .features{grid-template-columns:1fr; margin-top:var(--sp-5);}
  .crm-card, .doc-card-shell, .doc-card{padding:var(--sp-2) var(--sp-3);}
}
@media (max-width:380px){
  body{padding:0 var(--sp-2) var(--sp-5);}
  .nawiri-nav-mark span{display:none;}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}