/* ============================================================
   lyncc.io — Home page styles
   ============================================================ */

/* ---------- HERO ---------- */
.hero { background: var(--lyncc-ink); color: var(--fg-on-ink); position: relative; overflow: hidden; padding: 168px 0 108px; }
.ptease .h2, .impact .h2 { color: var(--fg-on-ink); }
.hero-grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--border-ink) 1px, transparent 1px), linear-gradient(90deg, var(--border-ink) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%); }
.hero-inner { position: relative; z-index: 1; }
.hero-top { max-width: 900px; }
.hero-badge { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--fg-on-ink); background: var(--bg-ink-2); border: 1px solid var(--border-ink); border-radius: var(--r-pill);
  padding: 7px 14px 7px 11px; margin-bottom: 30px; white-space: nowrap; }
@media (max-width: 520px){ .hero-badge { white-space: normal; } }
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lyncc-yellow); box-shadow: 0 0 0 4px rgba(255,213,0,.18); }
.hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 6vw, 74px); line-height: 1.0; letter-spacing: -.03em; margin: 0 0 26px; color: var(--fg-on-ink); text-wrap: balance; }
.hero h1 .accent { color: var(--lyncc-yellow); }
.hero-sub { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; color: var(--fg-on-ink-2); max-width: 700px; margin: 0 0 36px; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 28px; font-size: 13.5px; color: var(--fg-on-ink-2); }
.hero-note svg { width: 16px; height: 16px; color: var(--lyncc-yellow); flex: none; }
.hero-stage { position: relative; z-index: 1; margin-top: 70px; max-width: 1080px; margin-left: auto; margin-right: auto; }

/* ---------- HOW IT WORKS + PLATFORM (combined animated explainer) ---------- */
.explain { background: var(--lyncc-ink); color: var(--fg-on-ink); overflow: hidden; }
.explain .h2, .explain .eyebrow { color: var(--fg-on-ink); }
.explain .eyebrow { color: var(--lyncc-yellow); }
.explain .eyebrow::before { background: var(--lyncc-yellow); }
.explain .lede { color: var(--fg-on-ink-2); }
.explain-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; }
.explain-steps { display: flex; flex-direction: column; gap: 6px; margin: 32px 0 30px; }
.explain-step { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; text-align: left; padding: 18px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; cursor: pointer; transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); position: relative; overflow: hidden; }
.explain-step:hover { background: var(--bg-ink-2); }
.explain-step.active { background: var(--bg-ink-2); border-color: var(--border-ink); }
.explain-step .es-idx { font-family: var(--font-mono); font-size: 13px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-ink); display: grid; place-items: center; color: var(--fg-on-ink-2); transition: all var(--dur) var(--ease-out); }
.explain-step.active .es-idx { background: var(--lyncc-yellow); color: var(--lyncc-ink); border-color: var(--lyncc-yellow); }
.explain-step h4 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 6px 0 0; letter-spacing: -.012em; color: var(--fg-on-ink); }
.explain-step p { font-size: 14.5px; line-height: 1.55; color: var(--fg-on-ink-2); margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), margin var(--dur-slow) var(--ease-out); }
.explain-step.active p { max-height: 80px; opacity: 1; margin-top: 8px; }
.explain-step .es-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--lyncc-yellow); }
.explain-step.active .es-prog { width: 100%; transition: width 4s linear; }

/* device panel */
.explain-right { position: relative; }
.explain-device { background: var(--bg-ink-2); border: 1px solid var(--border-ink); border-radius: var(--r-xl); box-shadow: 0 40px 90px rgba(0,0,0,.5); overflow: hidden; }
.ed-bar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border-ink); }
.ed-url { flex: 1; max-width: 360px; margin: 0 auto; display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-on-ink-2); background: var(--lyncc-ink); border: 1px solid var(--border-ink); border-radius: var(--r-pill); padding: 6px 14px; }
.ed-url svg { width: 12px; height: 12px; color: var(--lyncc-yellow); flex: none; }
.ed-body { padding: 30px; min-height: 320px; position: relative; }
.ed-stage { display: none; }
.ed-stage.active { display: block; animation: edin .45s var(--ease-out); }
@keyframes edin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .ed-stage.active { animation: none; } }
.ed-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lyncc-yellow); margin-bottom: 22px; }
.ed-foot { display: flex; align-items: center; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border-ink); font-size: 13px; color: var(--fg-on-ink-2); }
.ed-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 0 rgba(46,125,91,.5); animation: edpulse 1.8s infinite; }
@keyframes edpulse { 0%{box-shadow:0 0 0 0 rgba(46,125,91,.45)} 70%{box-shadow:0 0 0 7px rgba(46,125,91,0)} 100%{box-shadow:0 0 0 0 rgba(46,125,91,0)} }
@media (prefers-reduced-motion: reduce){ .ed-pulse { animation: none; } }

/* stage 0: brief */
.brief { display: flex; flex-direction: column; gap: 2px; }
.brief-row { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--border-ink); opacity: 0; transform: translateX(-8px); }
.ed-stage.active .brief-row { animation: briefin .5s var(--ease-out) forwards; }
.ed-stage.active .brief-row:nth-child(1){ animation-delay:.1s } .ed-stage.active .brief-row:nth-child(2){ animation-delay:.32s } .ed-stage.active .brief-row:nth-child(3){ animation-delay:.54s } .ed-stage.active .brief-row:nth-child(4){ animation-delay:.76s }
@keyframes briefin { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .brief-row { opacity: 1; transform: none; } .ed-stage.active .brief-row { animation: none; } }
.brief-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-on-ink-2); }
.brief-v { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--fg-on-ink); }

/* stage 1: pipeline */
.pipe { display: grid; grid-template-columns: repeat(5,1fr); position: relative; padding: 10px 0; }
.pipe-line { position: absolute; left: 10%; right: 10%; top: 30px; height: 2px; background: var(--border-ink); }
.pipe-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--lyncc-yellow); transition: width 3.4s linear; }
.pipe-node { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; z-index: 1; }
.pipe-node .pn-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--lyncc-ink); border: 2px solid var(--border-ink); display: grid; place-items: center; color: var(--fg-on-ink-2); transition: all .4s var(--ease-out); }
.pipe-node .pn-dot svg { width: 18px; height: 18px; }
.pipe-node.lit .pn-dot { background: var(--lyncc-yellow); border-color: var(--lyncc-yellow); color: var(--lyncc-ink); transform: scale(1.08); }
.pipe-node .pn-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--fg-on-ink-2); text-align: center; transition: color .4s var(--ease-out); }
.pipe-node.lit .pn-l { color: var(--fg-on-ink); }

/* stage 2 reuses .mini-dash / .mini-row from mock.css */

/* ---------- WHAT WE SOURCE (editorial, visual) ---------- */

/* ---------- STATS + WORLD MAP ---------- */
.depth { background: var(--bg-paper); }
.depth-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border-1); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-card); }
.stat-cell { padding: 32px 28px; border-right: 1px solid var(--border-1); }
.stat-cell:last-child { border-right: none; }
.stat-cell .v { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 4.6vw, 56px); letter-spacing: -.03em; line-height: 1; color: var(--lyncc-ink); }
.stat-cell .d { font-size: 14px; color: var(--fg-3); margin-top: 12px; line-height: 1.5; max-width: 250px; }
.depth-note { font-size: 15px; color: var(--fg-2); max-width: 760px; line-height: 1.65; text-wrap: pretty; }
.depth-note b { color: var(--fg-1); font-weight: 600; }

/* ---------- IMPACT ---------- */
.impact { background: var(--lyncc-ink); color: var(--fg-on-ink); }
.impact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.impact-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; }
.impact-metric { border: 1px solid var(--border-ink); border-radius: var(--r-md); padding: 22px; background: rgba(255,255,255,.015); }
.impact-metric .v { font-family: var(--font-display); font-weight: 600; font-size: 38px; letter-spacing: -.025em; line-height: 1; color: var(--lyncc-yellow); }
.impact-metric .d { font-size: 13px; color: var(--fg-on-ink-2); margin-top: 10px; line-height: 1.5; }
.faces { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.face { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-ink); aspect-ratio: 1 / 1.12; position: relative; }

/* value-flow panel (replaces farmer faces) */
.valueflow { background: rgba(255,255,255,.018); border: 1px solid var(--border-ink); border-radius: var(--r-xl); padding: 32px; align-self: stretch; display: flex; flex-direction: column; }
.vf-head { margin-bottom: 30px; }
.vf-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--lyncc-yellow); display: block; margin-bottom: 12px; }
.vf-sub { font-size: 14.5px; color: var(--fg-on-ink-2); margin: 0; line-height: 1.55; }
.vf-bars { display: flex; flex-direction: column; gap: 26px; }
.vf-row .vf-label { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--fg-on-ink); margin-bottom: 11px; }
.vf-track { height: 40px; border-radius: var(--r-sm); background: var(--lyncc-ink); border: 1px solid var(--border-ink); overflow: hidden; }
.vf-fill { height: 100%; background: var(--lyncc-yellow); border-radius: var(--r-sm) 0 0 var(--r-sm); display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; width: 0; transition: width 1.1s var(--ease-out); }
.vf-fill.dim { background: #4A463F; }
.vf-fill span { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--lyncc-ink); }
.vf-fill.dim span { color: var(--fg-on-ink); }
.vf-note { font-size: 12.5px; color: var(--fg-on-ink-2); margin-top: 9px; }
.vf-foot { display: flex; gap: 14px; align-items: flex-start; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border-ink); }
.vf-foot-ico { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,213,0,.12); color: var(--lyncc-yellow); display: grid; place-items: center; flex: none; }
.vf-foot-ico svg { width: 18px; height: 18px; }
.vf-foot p { font-size: 13.5px; color: var(--fg-on-ink-2); margin: 0; line-height: 1.55; }

/* ---------- WHAT WE SOURCE (editorial photo mosaic) ---------- */
.source { background: var(--bg-paper); }
.source-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 232px; gap: 14px; }
.source-tile { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-1); background: var(--lyncc-ink); isolation: isolate; }
.source-tile.feat { grid-column: span 2; grid-row: span 2; }
.source-tile .st-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; --image-slot-radius: 0px; }
.source-tile .st-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,19,17,.12) 0%, rgba(20,19,17,.30) 46%, rgba(20,19,17,.86) 100%); }
.source-tile .st-content { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; }
.source-tile .st-ico { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--lyncc-yellow); color: var(--lyncc-ink); display: grid; place-items: center; margin-bottom: auto; box-shadow: var(--sh-sm); }
.source-tile .st-ico svg { width: 21px; height: 21px; }
.source-tile.feat .st-ico { width: 52px; height: 52px; }
.source-tile.feat .st-ico svg { width: 26px; height: 26px; }
.source-tile .st-meta h4 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.014em; margin: 0 0 5px; color: #fff; }
.source-tile.feat .st-meta h4 { font-size: 30px; }
.source-tile .st-meta p { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: rgba(255,255,255,.82); margin: 0; }
.source-tile.feat .st-meta p { font-size: 13px; }
.source-tile .st-link { position: absolute; top: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-text); font-weight: 600; font-size: 12.5px; color: var(--lyncc-ink); background: rgba(255,255,255,.92);
  padding: 8px 13px; border-radius: var(--r-pill); opacity: 0; transform: translateY(-4px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.source-tile .st-link svg { width: 14px; height: 14px; }
.source-tile:hover .st-link { opacity: 1; transform: none; }
.source-tile .st-link:hover { background: var(--lyncc-yellow); }
/* keep explore visible on touch where hover is unavailable */
@media (hover: none) { .source-tile .st-link { opacity: 1; transform: none; } }

/* ---------- HIGHLIGHTED TRACEABILITY CALLOUT (under live demo) ---------- */
#platform.section { padding-bottom: 56px; }
.depth.section { padding-top: 64px; }
.trace-band { max-width: 860px; margin: 58px auto 0; text-align: center; }
.trace-band .tb-rule { display: block; width: 44px; height: 2px; background: var(--lyncc-yellow); border-radius: 2px; margin: 0 auto 26px; }
.trace-band p { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2vw, 27px); line-height: 1.5; color: var(--fg-2); letter-spacing: -.015em; text-wrap: balance; }
.trace-band p b { color: var(--fg-1); font-weight: 600; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .explain-grid, .impact-grid { grid-template-columns: 1fr; gap: 40px; }
  .source-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .source-tile.feat { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 760px) {
  .hero { padding-top: 120px; }
  .hero-stage { margin-top: 48px; }
  .stat-row { grid-template-columns: 1fr; }
  .stat-cell { border-right: none; border-bottom: 1px solid var(--border-1); }
  .stat-cell:last-child { border-bottom: none; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .dash-cards { grid-template-columns: 1fr 1fr; }
  .impact-metrics { grid-template-columns: 1fr 1fr; }
  .source-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .source-tile.feat { grid-column: span 1; }
  .pipe-node .pn-l { font-size: 8.5px; }
  .ed-body { padding: 22px; }
  .trace-band { margin-top: 40px; }
}