/* Demo/showcase pages (omaralazemi.com/inkwell, /wasl).
   Builds on the Aurora tokens + components in styles.css — this file only adds
   the per-app page layout, screenshot frames, and the two interactive widgets.
   Everything is theme-aware through the shared --ink/--panel/--a* tokens. */

/* ---- shared page scaffold -------------------------------------------------- */
.demo-main { position: relative; z-index: 1; }

.nav__back {
  display: inline-flex; align-items: center; gap: .4em;
  color: var(--ink2); font-weight: 600; font-size: .92rem;
  text-decoration: none; transition: color .2s var(--ease);
}
.nav__back:hover { color: var(--ink); }

/* ---- hero ------------------------------------------------------------------ */
.demo-hero { padding: clamp(96px, 14vh, 168px) 0 clamp(40px, 6vw, 72px); }
.demo-hero__inner {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 64px); align-items: center;
}
.demo-hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink2); margin: 0 0 18px;
}
.demo-hero__title {
  font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1.02; letter-spacing: -.02em;
  font-weight: 800; margin: 0 0 18px;
}
.demo-hero__title .ar {
  font-family: var(--serif); font-weight: 400; color: var(--muted);
  font-size: .5em; margin-inline-start: .3em; vertical-align: middle;
}
.demo-hero__lead {
  font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ink2);
  line-height: 1.5; max-width: 34ch; margin: 0 0 26px;
}
.demo-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.demo-hero__art { display: grid; place-items: center; }
.demo-hero__icon {
  width: clamp(150px, 22vw, 216px); aspect-ratio: 1; border-radius: 30px;
  object-fit: cover; box-shadow: 0 30px 70px -24px rgba(0,0,0,.5);
}

/* ---- generic section ------------------------------------------------------- */
.demo-section { padding: clamp(40px, 6vw, 84px) 0; }
.demo-section__head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 48px); }
.demo-section__title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.08; letter-spacing: -.02em;
  font-weight: 800; margin: 0 0 12px;
}
.demo-section__title em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.demo-section__lead { font-size: 1.05rem; color: var(--ink2); line-height: 1.55; margin: 0; }

/* ---- feature grid ---------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.feature {
  background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 20px;
  padding: 26px 24px; backdrop-filter: blur(12px);
}
.feature__ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 16px; color: #fff;
}
.feature__ico svg { width: 22px; height: 22px; }
.feature__title { font-size: 1.12rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.feature__text { font-size: .96rem; color: var(--ink2); line-height: 1.5; margin: 0; }

/* accent helpers for feature icons / bars */
.ac1 { background: var(--a1); } .ac2 { background: var(--a2); }
.ac3 { background: var(--a3); } .ac4 { background: var(--a4); } .ac5 { background: var(--a5); }

/* ---- screenshots ----------------------------------------------------------- */
.shots { display: grid; gap: clamp(20px, 3vw, 34px); }
.shots--phones {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start; justify-items: center;
}
.browser {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--panel-brd);
  background: var(--panel); box-shadow: 0 34px 80px -30px rgba(0,0,0,.55);
}
.browser__bar {
  display: flex; align-items: center; gap: 7px; padding: 11px 14px;
  border-bottom: 1px solid var(--panel-brd); background: color-mix(in srgb, var(--panel) 80%, var(--bg));
}
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--panel-brd); }
.browser__bar span {
  margin-inline-start: 10px; font-size: .8rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.browser img { display: block; width: 100%; height: auto; }

.phone {
  width: 100%; max-width: 264px; border-radius: 30px; padding: 8px;
  background: color-mix(in srgb, var(--ink) 82%, var(--bg));
  box-shadow: 0 30px 66px -26px rgba(0,0,0,.6);
}
.phone img { display: block; width: 100%; height: auto; border-radius: 22px; }
.phone__cap { text-align: center; color: var(--ink2); font-size: .9rem; margin: 14px 2px 0; }

/* ---- interactive widget shell --------------------------------------------- */
.widget {
  background: var(--panel); border: 1px solid var(--panel-brd); border-radius: 24px;
  padding: clamp(18px, 2.4vw, 28px); backdrop-filter: blur(14px);
  box-shadow: 0 28px 70px -34px rgba(0,0,0,.5);
}
.widget__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.widget__title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.widget__live {
  display: inline-flex; align-items: center; gap: .5em; font-size: .8rem; font-weight: 700;
  color: var(--a5); background: color-mix(in srgb, var(--a5) 14%, transparent);
  padding: 4px 10px; border-radius: 999px;
}
.widget__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--a5); }
.widget__spacer { flex: 1; }
.widget__hint { font-size: .84rem; color: var(--muted); margin: 14px 0 0; text-align: center; }

/* ---- Wasl dispatch widget -------------------------------------------------- */
.disp__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.disp__kpi { background: color-mix(in srgb, var(--panel) 60%, var(--bg)); border: 1px solid var(--panel-brd);
  border-radius: 14px; padding: 12px 14px; }
.disp__kpi b { display: block; font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.disp__kpi span { font-size: .78rem; color: var(--muted); }
.disp__lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lane__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
  font-size: .82rem; font-weight: 700; color: var(--ink2); }
.lane__head b { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink2);
  border-radius: 999px; padding: 1px 9px; font-size: .74rem; }
.lane__col { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.ocard {
  background: var(--bg); border: 1px solid var(--panel-brd); border-radius: 14px; padding: 12px;
  animation: ocard-in .35s var(--ease) both;
}
@keyframes ocard-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ocard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ocard__id { font-weight: 800; font-size: .9rem; letter-spacing: -.01em; }
.ocard__amt { font-weight: 700; font-size: .84rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ocard__cust { font-size: .9rem; margin: 3px 0 1px; }
.ocard__area { font-size: .78rem; color: var(--muted); }
.ocard__driver { font-size: .78rem; color: var(--a5); font-weight: 600; margin-top: 6px; }
.ocard__bar { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent);
  margin-top: 8px; overflow: hidden; }
.ocard__bar > i { display: block; height: 100%; width: 0; background: var(--a5);
  border-radius: 999px; transition: width .3s linear; }
.ocard__btn {
  margin-top: 9px; width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  font-size: .82rem; color: #fff; background: var(--a5); border-radius: 10px; padding: 7px 10px;
  transition: filter .15s var(--ease);
}
.ocard__btn:hover { filter: brightness(1.06); }
.ocard__btn--ghost { background: transparent; color: var(--ink2); border: 1px solid var(--panel-brd); }
.ocard__done { margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--a3); }
.disp__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }

/* ---- Inkwell relationship graph ------------------------------------------- */
.graph { position: relative; width: 100%; }
.graph svg { display: block; width: 100%; height: auto; touch-action: none; }
.graph__legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 16px; }
.graph__legend span { display: inline-flex; align-items: center; gap: .5em; font-size: .84rem; color: var(--ink2); }
.graph__legend i { width: 22px; height: 3px; border-radius: 2px; }
.gnode-label { font: 600 13px var(--sans); fill: var(--ink); paint-order: stroke;
  stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }
.gedge-label { font: 500 10px var(--sans); fill: var(--muted); }

/* ---- final CTA ------------------------------------------------------------- */
.demo-cta { text-align: center; padding: clamp(48px, 7vw, 96px) 0; }
.demo-cta__title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.demo-cta__title em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.demo-cta__lead { color: var(--ink2); font-size: 1.05rem; margin: 0 auto 24px; max-width: 46ch; }
.demo-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.demo-note { font-size: .8rem; color: var(--muted); text-align: center; margin-top: 12px; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 860px) {
  .demo-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .demo-hero__art { order: -1; }
  .demo-hero__lead { max-width: none; }
  .demo-hero__actions { justify-content: center; }
  .disp__lanes { grid-template-columns: 1fr; }
  .disp__kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ocard { animation: none; }
  .ocard__bar > i { transition: none; }
}