/* =========================================================================
   OWNER STUDIO — page-specific styles
   Implements the Figma "Owner Studio" page:
     1. Hero            — headline + lead on the left, 3D dashboard on the right
     2. What's inside…  — 6-pillar icon/text grid (centred header)
     3. One place…      — 4 feature cards in an asymmetric pinwheel grid
   Colours, gradients, sizes and assets are pulled verbatim from the design.
   Lives on top of the shared tokens in variables.css / layout.css.
   ========================================================================= */

/* --- Flat near-black arcs ------------------------------------------------
   .theme-dark seeds a default blue --_accent-glow, which paints a diagonal
   wash over the arc. The Owner Studio dark sections are flat black in the
   design, so we drop that gradient and keep the solid --color-bg. */
.story-arc.ows-arc {
  background-image: none;
}

/* --- Gradient text (clip a brand gradient through the glyphs) ------------- */
.ows-grad {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* keep the whole gradient anchored to the text box */
  background-size: 100% 100%;
}
.ows-grad--cyan  { background-image: linear-gradient(90deg, #00E0FF 0%, #FF00D4 100%); } /* hero accent  */
.ows-grad--mint  { background-image: linear-gradient(90deg, #1BFF9C 0%, #004DFF 100%); } /* "the hub."   */
.ows-grad--blue  { background-image: linear-gradient(90deg, #5AA4FC 0%, #8081FB 100%); } /* "…signal."   */
.ows-grad--label { background-image: linear-gradient(90deg, #0AD6FE 0%, #F707D6 100%); } /* card labels  */

/* =========================================================================
   1 — HERO
   ========================================================================= */
/* Hero uses the cube as a full-bleed background image (same pattern as the
   casino-games / live-casino / sportsbook headers). Copy sits on the dark left
   third; the cube + its baked glow fill the centre-right of the artwork. */
.ows-hero-arc {
  background-repeat: no-repeat;
  background-color: #050509;
  position: relative;
}
/* gentle scrim: darken the left where the copy sits, fade out over the cube */
.ows-hero-arc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5, 5, 9, 0.85) 0%,
    rgba(5, 5, 9, 0.45) 30%,
    rgba(5, 5, 9, 0) 52%);
}

.ows-hero {
  position: relative;
  z-index: 1;
  text-align: left;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 44vw, 660px);
}

.ows-hero__title {
  margin: 0;
  max-width: 12em;                      /* keep the copy on the dark left side */
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.ows-hero__line { display: block; }

.ows-hero .ows-hero__lead {
  margin: var(--space-lg) 0 0;          /* left-align under the title, not centred */
  max-width: 26em;
  color: #c2c3cc;                       /* a touch brighter over the artwork */
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.55;
}

/* =========================================================================
   Centred section header — uses the shared .text-center / .sc-lead pattern,
   this only adds the column width + spacing above the grid.
   ========================================================================= */
.ows-head {
  max-width: 760px;
  margin: 0 auto var(--space-3xl);
}
.ows-head .sc-lead {
  margin: var(--space-md) auto 0;
  max-width: 60ch;
}

/* =========================================================================
   2 — WHAT'S INSIDE THE HUB (6 pillars)
   ========================================================================= */
.ows-pillars {
  padding-top: var(--space-4xl);
  padding-bottom: var(--space-4xl);
}

.ows-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 5vw, 6rem);
  row-gap: clamp(3rem, 4vw, 4.5rem);
  max-width: 1200px;
  margin: 0 auto;
}

.ows-pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  letter-spacing: -0.01em;
}

.ows-pillar__icon {
  width: 48px;
  height: 48px;
  flex: none;
}

.ows-pillar__title {
  margin: 0;
  font-size: var(--text-2xl);          /* 24px */
  font-weight: 500;                    /* Satoshi Medium */
  line-height: 1.2;
  color: #fff;
}

.ows-pillar__desc {
  margin: 0;
  font-size: var(--text-sm);           /* 14px */
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

/* =========================================================================
   3 — ONE PLACE, EVERY SIGNAL
   Per Figma this section sits on a LIGHT panel (#E9E9EB) with DARK cards.
   Built on the shared .static-card bento system (layout.css); we re-theme its
   custom properties to the Owner Studio palette and float the transparent
   mockups inside .static-card__media. Copy sits at the BOTTOM of each card.
   ========================================================================= */
/* light panel — .story-arc.theme-light specificity (0,2,0) must be matched */
.story-arc.ows-signal-arc {
  background-color: #e9e9eb;
  background-image: none;
}

.ows-signal {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

/* heading is dark on the light panel (theme-light), with a blue accent word */
.ows-signal-arc .ows-head h2 { color: #0c0d12; }
.ows-accent-signal { color: #6598fb; }      /* Figma accent rgb(101,152,251) */
.ows-signal-arc .ows-head .sc-lead { color: #5b5d66; }

.ows-signal-grid {
  --sc-bg: #0b0a12;             /* card body — Figma near-black */
  --sc-bg-highlight: #1b1533;   /* subtle indigo top glow */
  --sc-accent: #54c7ff;         /* cyan eyebrow, matching the design labels */
  /* fill the shared .container (--wide-width) like the homepage bento grids —
     no local max-width cap so this grid reads as wide as #growth on index.html */
}

/* Figma cards are tall (≈522px) so the mockups read large above the copy */
.ows-signal-grid .static-card--feature {
  min-height: 460px;
}

/* the cards are dark on a light panel: keep their copy light (theme-light would
   otherwise darken it) and lift them off the panel with a soft shadow */
.ows-signal-grid .static-card {
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 48px -24px rgba(12, 8, 24, 0.45);
}
.ows-signal-grid .static-card .card__title { color: #fff; }
.ows-signal-grid .static-card .card__description { color: rgba(255, 255, 255, 0.72); }

/* Figma eyebrows are a cyan→violet gradient (not the flat --sc-accent), echoing
   the hero accent. Clip the gradient through the glyphs. */
.ows-signal-grid .static-card .card__label {
  /* hug the text so the cyan→violet ramp spans the WORD, not the full card width */
  width: fit-content;
  background-image: linear-gradient(90deg, #18c2f2 0%, #a24fe6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 1;
}

/* the mockups are full illustrations — show them whole (the shared .img-contain
   rule crops to cover), floating in the top of the card with the copy below */
.ows-signal-grid .static-card__media {
  padding: 24px 24px 0;
}
.ows-signal-grid .static-card__media img {
  object-fit: contain;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 992px) {
  /* keep the cube visible lower in the frame, copy stacked above it */
  .ows-hero-arc { background-position: center bottom; }
  /* scrim flips to vertical — hold a solid dark backing through the whole copy
     block (heading + lead), then fade to reveal the cube in the lower frame.
     The old 0→62% fade cleared before the lead ended, so its lower lines sat
     over the bright dashboard art and lost contrast. */
  .ows-hero-arc::before {
    background: linear-gradient(180deg,
      rgba(5, 5, 9, 0.95) 0%,
      rgba(5, 5, 9, 0.9) 34%,
      rgba(5, 5, 9, 0.66) 55%,
      rgba(5, 5, 9, 0.18) 76%,
      rgba(5, 5, 9, 0) 92%);
  }
  .ows-hero {
    min-height: clamp(440px, 86vw, 600px);
    align-items: flex-start;
    padding-top: var(--space-2xl);
  }
  .ows-hero__title { max-width: 16em; }

  .ows-pillars__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 3rem);
  }
}

/* The four feature cards stack via the shared .static-card mobile rules
   (img-right collapses to a column at ≤900px), so no card overrides are
   needed here. Keep the illustrations whole on the media band, though. */
@media (max-width: 900px) {
  .ows-signal-grid .static-card.img-contain .static-card__media img {
    object-fit: contain !important;
    object-position: center !important;
  }
}

@media (max-width: 600px) {
  .ows-pillars__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-2xl);
    max-width: 360px;
  }
}

/* At ≤500px the shared space tokens shrink (var(--space-2xl) → 18px), which is
   shorter than the ~52px fixed header, so the hero title tucked under the nav.
   Restore a header-clearing top pad here only (the 501–991px range already
   clears it with the full-size token). */
@media (max-width: 500px) {
  .ows-hero {
    padding-top: calc(56px + var(--space-2xl));
  }
}

/* =========================================================================
   Floating Lumio avatar helper (kept from the original page)
   ========================================================================= */
.ows-lumio {
  position: absolute;
  bottom: var(--space-lg);
  right: var(--space-xl);
  width: 64px;
  height: 64px;
  z-index: 10;
}