/* ==========================================================================
   Winda — Software page composition (Copy Deck v3).
     hero (image + scrim) · the "well" architecture diagram · Horizon ·
     Design Platform · Buddy · CTA
   Ported from the design export's prototype/product-software.html.
   The well reads as a drilling section: a depth ruler, stacked strata bands
   (Application / Intelligence / Data), a borehole signal rising in the gutter,
   and a detail panel that expands in-flow and squeezes the strata left.
   ========================================================================== */

/* ==========================================================================
   1. Hero — image seated right, near-black scrim carrying the copy left.
   ========================================================================== */

.hero-sw {
  position: relative;
  overflow: hidden;
}

.hero-sw__img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 78%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-sw__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--w-black) 24%, rgba(7, 8, 10, 0.82) 48%, rgba(7, 8, 10, 0.3) 72%, rgba(7, 8, 10, 0.12) 100%),
    linear-gradient(0deg, var(--w-black) 0%, transparent 22%);
}

.hero-sw__body {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   2. The well diagram
   ========================================================================== */

.well {
  position: relative;
  border: 1px solid var(--w-line-green);
  background: #060809;
  padding: 34px 38px 30px;
  overflow: hidden;
  display: flex;
  gap: 0;
}

.well .cg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(181, 208, 88, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 208, 88, 0.045) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* Depth ruler down the left edge. */
.ruler {
  width: 24px;
  position: relative;
  flex-shrink: 0;
  margin-right: 22px;
  border-right: 1px solid rgba(181, 208, 88, 0.16);
  background: repeating-linear-gradient(180deg, rgba(181, 208, 88, 0.16) 0 1px, transparent 1px 15px) right / 11px 100% no-repeat;
  z-index: 2;
}

.ruler span {
  position: absolute;
  right: 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--w-grey-2);
}

.ruler .top {
  color: var(--w-green);
}

.wcol {
  flex: 1;
  position: relative;
  z-index: 2;
  min-width: 0;
}

/* Strata band. Distinct lithology texture is set inline per band. */
.band {
  position: relative;
  border: 1px solid rgba(181, 208, 88, 0.3);
  border-bottom: 0;
  padding: 20px 24px;
  margin-right: 30px;
  transition: background var(--dur-base) var(--ease-engage);
}

.band:last-of-type {
  border-bottom: 1px solid rgba(181, 208, 88, 0.3);
}

.band .tier {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--w-green);
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* A clickable layer block. */
.blk {
  border: 1px solid rgba(181, 208, 88, 0.28);
  background: rgba(13, 15, 18, 0.72);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-engage);
  position: relative;
  padding: 16px 20px;
}

.blk:hover {
  border-color: var(--w-green);
  background: var(--w-green-dim);
  transform: translateY(-3px);
}

.blk.on {
  border-color: var(--w-green);
  background: var(--w-green-dim);
}

.blk:focus-visible {
  outline: 2px solid var(--w-green);
  outline-offset: 2px;
}

.blk .k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-green);
}

.blk h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--w-white);
  margin-top: 6px;
}

.blk .role {
  font: 400 12px/1.5 var(--font-body);
  color: var(--w-grey);
  margin-top: 5px;
}

.app2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Connector line under the Application blocks: "a chat assistant both share". */
.conn {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.conn .ln {
  flex: 1;
  height: 1px;
  background: var(--w-line-green);
}

.conn .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--w-grey);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
}

.conn .lbl:hover {
  color: var(--w-green);
}

/* A block laid out as a single row (Atlas, Lake). */
.rowblk {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rowblk h3 {
  margin-top: 0;
  font-size: 20px;
  color: var(--w-green);
}

.rowblk .role {
  margin-top: 0;
}

/* Winda Buddy icon, top-right of a product block. */
.bic {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--w-line-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--w-surface);
  z-index: 3;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-engage);
}

.bic:hover {
  border-color: var(--w-green);
  background: var(--w-green-dim);
}

.bic svg {
  width: 15px;
  height: 15px;
  stroke: var(--w-green);
  fill: none;
  stroke-width: 1.6;
}

.bic .tip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: -4px;
  white-space: nowrap;
  background: var(--w-black);
  border: 1px solid var(--w-line-green);
  color: var(--w-green);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: all var(--dur-fast) var(--ease-engage);
}

.bic:hover .tip {
  opacity: 1;
  transform: none;
}

/* Borehole signal rising in the right gutter. */
.bore {
  position: absolute;
  top: -4px;
  bottom: 26px;
  width: 1px;
  background: rgba(181, 208, 88, 0.3);
  z-index: 6;
}

.bore .rig {
  position: absolute;
  top: -12px;
  left: -4px;
  width: 9px;
  height: 5px;
  border: 1px solid var(--w-green);
  border-bottom: 0;
}

.bore .dot {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 7px;
  background: #dff0a8;
  box-shadow: 0 0 8px rgba(181, 208, 88, 0.9);
  animation: bore-rise 4.4s linear infinite;
}

@keyframes bore-rise {
  0% { top: 100%; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { top: -2%; opacity: 0; }
}

.flow {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--w-grey-2);
  margin-top: 12px;
}

.flow .up {
  color: var(--w-green);
}

/* The in-flow detail panel: expands right, squeezing the strata. */
.wD {
  position: relative;
  flex-shrink: 0;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  background: #0a0c0e;
  border-left: 0;
  transition: width 460ms var(--ease-engage), margin-left 460ms var(--ease-engage);
  z-index: 9;
}

.wD.open {
  width: 360px;
  margin-left: 26px;
  border-left: 1px solid var(--w-green);
  box-shadow: -34px 0 64px rgba(0, 0, 0, 0.5);
}

.wD .pad {
  width: 300px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}

.wD .x {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: 0;
  color: var(--w-grey);
  font-family: var(--font-mono);
  font-size: 20px;
  cursor: pointer;
}

.wD .x:hover {
  color: var(--w-green);
}

.wD .k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-green);
}

.wD h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  color: var(--w-white);
}

.wD p {
  font: 400 14.5px/1.7 var(--font-body);
  color: var(--w-grey);
  text-align: justify;
  text-justify: inter-word;
}

@media (prefers-reduced-motion: reduce) {
  .bore .dot {
    animation: none;
    display: none;
  }
}

/* ==========================================================================
   3. Product sections (Horizon / Design Platform / Buddy)
   ========================================================================== */

.sw-sec {
  padding-top: 0;
}

.sw-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: stretch;
  border-top: 1px solid var(--w-line);
  padding-top: 64px;
}

.sw-split--buddy {
  grid-template-columns: 0.8fr 1.2fr;
  align-items: start;
}

.sw-figslot {
  min-height: 400px;
  height: 100%;
}

.sw-sec .h2 {
  font-size: 44px;
}

.sw-eyebrow2 {
  color: var(--w-green);
  margin: 12px 0 20px;
}

.sw-note {
  color: var(--w-green);
  margin-top: 18px;
  border-top: 1px solid var(--w-line);
  padding-top: 14px;
}

.buddy-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.buddy-points .row {
  align-items: flex-start;
  gap: 14px;
}

.buddy-points .row:hover {
  transform: none; /* these are text rows, not links — no slide */
  background: none;
  border-color: var(--w-line);
}

.buddy-points .ar {
  font-family: var(--font-mono);
  color: var(--w-green);
  flex-shrink: 0;
  font-size: 13px;
  padding-top: 2px;
}

.buddy-points p {
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--w-grey);
}

/* ==========================================================================
   Narrow viewports
   ========================================================================== */

@media (max-width: 900px) {
  .well {
    padding: 24px 20px;
  }

  .band {
    margin-right: 0;
  }

  .flow {
    margin-right: 0 !important;
  }

  .bore {
    right: 4px !important;
  }

  /* The detail panel can't sit beside a full-width column on a phone; it drops
     below and spans the width instead. */
  .well {
    flex-wrap: wrap;
  }

  .wD.open {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
    border-left: 0;
    border-top: 1px solid var(--w-green);
    box-shadow: none;
  }

  .wD .pad {
    width: 100%;
  }

  .sw-split,
  .sw-split--buddy {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sw-figslot {
    min-height: 260px;
  }
}

@media (max-width: 560px) {
  .app2 {
    grid-template-columns: 1fr;
  }

  .rowblk {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .rowblk > span[style] {
    display: none; /* the vertical divider between title and role */
  }
}

/* ---- Live product demo embed (Winda Horizon) --------------------------
   The demo is a full-size app; render it at 1280x720 and scale it to the
   16:9 slot (js/software.js keeps the scale = slot width / 1280). The frame
   itself is non-interactive (a moving preview); "Open full demo" gives the
   real interactive app. */
.sw-demo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--w-line-green);
  background: #08090a;
}
.sw-demo__frame {
  position: absolute;
  top: 0; left: 0;
  width: 1280px; height: 720px;
  border: 0;
  transform-origin: top left;
  pointer-events: auto; /* interactive preview: autoplays, and you can click in */
}

/* Phone: js/software.js switches the card to a sideways-scrolling strip that
   holds the demo at a legible width instead of an unreadable fit-to-width
   thumbnail. The frame is zoomed (in flow) so the card grows to its height. */
.sw-demo--scroll {
  aspect-ratio: auto;
  height: auto;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.sw-demo--scroll .sw-demo__frame {
  pointer-events: none; /* let a horizontal drag scroll the strip, not the app */
}
.sw-demo__open {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--w-green);
  border: 1px solid var(--w-green);
  background: rgba(7, 8, 10, 0.62);
  backdrop-filter: blur(6px);
  padding: 7px 12px;
  transition: background var(--dur-fast) var(--ease-engage), color var(--dur-fast) var(--ease-engage);
}
.sw-demo__open:hover { background: var(--w-green); color: var(--w-black); }

/* ==========================================================================
   Full-width product layout (v4)
   Each product reads top-to-bottom: intro header band → full-width live demo
   → feature cards. The wide dashboards (Horizon, Buddy) get the whole column
   width instead of being cramped into a half-width split.
   ========================================================================== */
.sw-product {
  border-top: 1px solid var(--w-line);
  padding-top: 64px;
}

.sw-head {
  max-width: 760px;
  margin-bottom: 34px;
}

.sw-head .h2 {
  font-size: 44px;
}

.sw-head__lede {
  max-width: none;
  margin-top: 4px;
  color: var(--w-grey);
}

/* Full-width demo / placeholder — renders the 1280-wide app at column width. */
.sw-demo--wide,
.sw-figslot--wide {
  width: 100%;
  margin-bottom: 30px;
}

.sw-figslot--wide {
  aspect-ratio: 16 / 9;
  min-height: 0;
}

/* Feature cards below the demo. */
.sw-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.sw-cards .panel {
  padding: 18px 20px;
}

.sw-cards .panel h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.sw-cards .panel p {
  font: 400 13px/1.55 var(--font-body);
  color: var(--w-grey);
}

.sw-cards .panel--wide {
  grid-column: 1 / -1;
}

.sw-product .sw-note {
  display: inline-block;
  margin-top: 22px;
}

@media (max-width: 860px) {
  .sw-cards {
    grid-template-columns: 1fr 1fr;
  }
  .sw-head .h2 {
    font-size: 34px;
  }
}

@media (max-width: 560px) {
  .sw-cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HUD instrument-bay layout (v5)
   The live demo sits in a central bay; feature callouts and telemetry chips
   are wired around it with leader lines, corner brackets and mono labels —
   an exploded instrument panel. Grid engages at >=1180px; below that it
   collapses to a clean stack (demo, then callouts).
   ========================================================================== */
.sw-hud {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sw-hud__bay {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Status strip above the demo. */
.sw-hud__strip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--w-grey-2);
  border: 1px solid var(--w-line);
  background: rgba(10, 12, 10, 0.5);
  padding: 8px 14px;
  white-space: nowrap;
  overflow: hidden;
}
.sw-hud__strip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--w-green);
  box-shadow: 0 0 8px var(--w-green);
  flex-shrink: 0;
}
.sw-hud__strip-r {
  margin-left: auto;
  color: var(--w-green);
}

.sw-hud__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Callout card. */
.sw-co {
  border: 1px solid var(--w-line);
  background: rgba(10, 12, 10, 0.6);
  padding: 14px 16px;
}
.sw-co__id {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-green);
  margin-bottom: 7px;
}
.sw-co__t {
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 5px;
}
.sw-co__d {
  font: 400 12px/1.5 var(--font-body);
  color: var(--w-grey);
}

/* Amber alert chip, styled after the field-tablet warning boxes. */
.sw-co--alert {
  border-color: rgba(224, 163, 62, 0.4);
  background: rgba(224, 163, 62, 0.05);
}
.sw-co--alert .sw-co__id {
  color: var(--w-warn);
  display: flex;
  align-items: center;
  gap: 8px;
}
.sw-co__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 0;
}
.sw-co__row + .sw-co__row {
  border-top: 1px solid rgba(224, 163, 62, 0.16);
}
.sw-co__row .k {
  color: var(--w-grey-2);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sw-co__row .v { color: var(--w-white); }
.sw-co__row .v.warn { color: var(--w-warn); }

@media (min-width: 1180px) {
  .sw-hud {
    position: relative;
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr) 236px;
    grid-template-rows: 1fr;
    gap: 0 36px;
    align-items: stretch;
    padding: 32px 38px;
    background:
      radial-gradient(circle at 1px 1px, rgba(181, 208, 88, 0.05) 1px, transparent 1.5px) 0 0 / 24px 24px,
      linear-gradient(rgba(6, 8, 9, 0.5), rgba(6, 8, 9, 0.5));
    border: 1px solid var(--w-line);
  }

  .sw-hud__bay { grid-column: 2; grid-row: 1; }
  .sw-hud__side--l { grid-column: 1; grid-row: 1; }
  .sw-hud__side--r { grid-column: 3; grid-row: 1; }

  .sw-hud__side {
    justify-content: space-between;
    gap: 16px;
  }

  /* Corner brackets around the whole bay. */
  .sw-hud__cb {
    position: absolute;
    width: 20px; height: 20px;
    border: 1px solid var(--w-green);
    opacity: 0.7;
    pointer-events: none;
  }
  .sw-hud__cb--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .sw-hud__cb--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
  .sw-hud__cb--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
  .sw-hud__cb--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

  /* Leader lines from each callout to the central bay. */
  .sw-hud__side .sw-co { position: relative; }
  .sw-hud__side--l .sw-co::after,
  .sw-hud__side--r .sw-co::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 36px; height: 1px;
    background: var(--w-line-green);
  }
  .sw-hud__side--l .sw-co::before,
  .sw-hud__side--r .sw-co::before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -2.5px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--w-green);
    box-shadow: 0 0 6px rgba(181, 208, 88, 0.7);
  }
  .sw-hud__side--l .sw-co::after { right: -36px; }
  .sw-hud__side--l .sw-co::before { right: -38px; }
  .sw-hud__side--r .sw-co::after { left: -36px; }
  .sw-hud__side--r .sw-co::before { left: -38px; }
}

/* ==========================================================================
   Blueprint section — editorial layout (richer copy than the HUD callouts).
   ========================================================================== */
.sw-lead {
  max-width: 70ch;
  margin: -14px 0 30px;
  color: var(--w-grey);
}

/* A solo demo bay (no side callouts): the framed bay spans the full width. */
.sw-demo__cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--w-grey-2);
  margin-top: 14px;
  max-width: 82ch;
}

/* Understated fine print (impact estimate, Horizon hand-off). */
.sw-fine {
  font: 400 13.5px/1.65 var(--font-body);
  color: var(--w-grey-2);
  max-width: 74ch;
  margin-top: 22px;
}
.sw-fine--link {
  color: var(--w-grey);
  border-top: 1px solid var(--w-line);
  padding-top: 18px;
}

@media (min-width: 1180px) {
  .sw-hud--solo {
    grid-template-columns: 1fr;
  }
  .sw-hud--solo .sw-hud__bay {
    grid-column: 1;
  }
}