/* landing.css — Quantblocks landing page
 * Built on top of @carbon/web-components (g100 dark theme), with the
 * brand colour overridden to mint #65D6A5 and surfaces nudged from
 * Carbon's default #161616 toward our pure-neutral charcoal stack.
 *
 * Carbon supplies: components (cds-button / cds-tile / cds-tag /
 *   cds-link), IBM Plex Sans, all interactive states, focus rings,
 *   accessibility patterns.
 * We supply:     hero composition, SVG backgrounds, equity chart,
 *   section rhythm — everything Carbon doesn't have. */

/* =====================================================================
   ROOT — landing scope tokens (override Carbon's CSS custom props)
   ===================================================================== */
.qb-landing {
    /* === Carbon token overrides ============================== */
    /* Surfaces — pure neutral charcoal, no tint */
    --cds-background:           #0A0A0A;
    --cds-background-hover:     #161616;
    --cds-background-active:    #1F1F1F;
    --cds-background-selected:  #1F1F1F;
    --cds-layer-01:             #141414;
    --cds-layer-02:             #1C1C1C;
    --cds-layer-03:             #242424;
    --cds-layer-hover-01:       #1C1C1C;
    --cds-layer-hover-02:       #242424;
    --cds-field-01:             #141414;
    --cds-field-02:             #1C1C1C;

    /* Borders */
    --cds-border-subtle-00:     #1F1F1F;
    --cds-border-subtle-01:     #2A2A2A;
    --cds-border-subtle-02:     #3A3A3A;
    --cds-border-strong-01:     #4D4D4D;

    /* Text */
    --cds-text-primary:         #FFFFFF;
    --cds-text-secondary:       #EDEDED;
    --cds-text-helper:          #B5B5B5;
    --cds-text-placeholder:     #797979;
    --cds-text-on-color:        #04231A;
    --cds-text-disabled:        #4D4D4D;

    /* Brand — single mint accent, replaces Carbon's IBM blue.
       This drives every interactive element: button, link, focus ring,
       interactive border, selected state. */
    --cds-button-primary:           #65D6A5;
    --cds-button-primary-hover:     #84E0BA;
    --cds-button-primary-active:    #4DBE8E;
    --cds-button-tertiary:          #65D6A5;
    --cds-button-tertiary-hover:    #84E0BA;
    --cds-button-tertiary-active:   #4DBE8E;
    --cds-link-primary:             #65D6A5;
    --cds-link-primary-hover:       #84E0BA;
    --cds-interactive:              #65D6A5;
    --cds-focus:                    #65D6A5;
    --cds-border-interactive:       #65D6A5;
    --cds-icon-primary:             #FFFFFF;
    --cds-icon-secondary:           #B5B5B5;

    /* Status (only used on numeric chart data) */
    --cds-support-success:      #4FA875;
    --cds-support-error:        #C25450;
    --cds-support-warning:      #D4B248;

    /* === Local convenience aliases — used by our custom CSS only === */
    --qb-mint:        var(--cds-button-primary);
    --qb-mint-hover:  var(--cds-button-primary-hover);
    --qb-mint-soft:   rgba(101, 214, 165, 0.14);
    --qb-bg:          var(--cds-background);
    --qb-elev-1:      var(--cds-layer-01);
    --qb-elev-2:      var(--cds-layer-02);
    --qb-rule:        var(--cds-border-subtle-00);
    --qb-rule-2:      var(--cds-border-subtle-01);
    --qb-rule-hi:     var(--cds-border-subtle-02);
    --qb-text:        var(--cds-text-primary);
    --qb-text-soft:   var(--cds-text-secondary);
    --qb-text-dim:    var(--cds-text-helper);
    --qb-text-faint:  var(--cds-text-placeholder);
    --qb-text-ghost:  var(--cds-text-disabled);
    --qb-up:          var(--cds-support-success);
    --qb-down:        var(--cds-support-error);

    /* === Page typography === */
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    color: var(--qb-text-soft);
    background: var(--qb-bg);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body:has(.qb-landing) { background: var(--qb-bg); }
body:has(.qb-landing)::before,
body:has(.qb-landing)::after { display: none; }

.qb-landing h1,
.qb-landing h2,
.qb-landing h3 {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    color: var(--qb-text);
    letter-spacing: -0.01em;
    line-height: 1.1;
    font-variation-settings: normal;
}
.qb-landing h4 {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 500;
    color: var(--qb-text);
    line-height: 1.2;
}

::selection { background: var(--qb-mint); color: var(--cds-text-on-color); }

/* =====================================================================
   CONTAINER — Carbon-aligned column widths (16-col, but we cap content)
   ===================================================================== */
.qb-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
@media (max-width: 720px) { .qb-container { padding: 0 16px; } }

/* =====================================================================
   SECTION
   ===================================================================== */
.qb-section { padding: 96px 0; }
.qb-section__head { margin-bottom: 48px; max-width: 720px; }
.qb-section__kicker {
    display: inline-block;
    font-family: "IBM Plex Mono", "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--qb-mint);
    letter-spacing: 0.04em;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.qb-section__title {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 16px;
    text-wrap: balance;
    letter-spacing: -0.018em;
    line-height: 1.1;
}
.qb-section__title em { font-style: normal; color: var(--qb-mint); }
.qb-section__lede {
    color: var(--qb-text-dim);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 56ch;
}

@media (max-width: 720px) {
    .qb-section { padding: 64px 0; }
    .qb-section__head { margin-bottom: 32px; }
}

/* =====================================================================
   CARBON COMPONENT TWEAKS — minimal overrides via :part() shadow API
   ===================================================================== */

/* cds-button: keep Carbon's shape but enforce our tap target sizes.
   Spacing rule scoped to .qb-landing only — leaking it globally would
   add margin to the header's Pricing/Dashboard buttons (which sit at
   `gap: 0` per header.css design) and shift them right on the landing
   page only. */
.qb-landing cds-button { display: inline-flex; }
.qb-landing cds-button + cds-button { margin-left: 8px; }

/* cds-tile: pad slightly more than default for marketing rhythm */
cds-tile {
    --cds-layer-01: var(--qb-elev-1);
    --cds-layer-hover-01: var(--qb-elev-2);
}

/* cds-link: use mint for primary links */
cds-link { --cds-link-primary: var(--qb-mint); }

/* cds-tag: round shape for the hero stat pills */
cds-tag {
    --cds-tag-background-cool-gray: rgba(50, 50, 50, 0.55);
    --cds-tag-color-cool-gray: var(--qb-text);
}

/* =====================================================================
   HERO — full-bleed, large left-aligned headline, stats pills below.
   Background SVG sits in qb-hero__bg layer behind the headline veil.
   ===================================================================== */
.qb-hero {
    position: relative;
    min-height: 820px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.qb-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 80% 20%, rgba(101, 214, 165, 0.05) 0%, transparent 60%),
        var(--qb-bg);
}
.qb-hero__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.qb-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.45) 38%, rgba(10, 10, 10, 0.10) 70%, rgba(10, 10, 10, 0) 100%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0) 25%, rgba(10, 10, 10, 0) 70%, rgba(10, 10, 10, 0.5) 100%);
}
.qb-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 120px 0 88px;
}
.qb-hero__copy { max-width: 640px; }
.qb-hero__title {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
    color: var(--qb-text);
    margin-bottom: 24px;
    text-wrap: balance;
}
.qb-hero__title em {
    font-style: normal;
    color: var(--qb-mint);
}
.qb-hero__lede {
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--qb-text-dim);
    max-width: 50ch;
    margin-bottom: 32px;
}
.qb-hero__lede-accent { color: var(--qb-mint); font-weight: 700; }
.qb-hero__cta { display: inline-flex; gap: 0; margin-bottom: 48px; }

/* Pills — equal-width grid, all five tiles identical box. Stretches
   each cell so longer labels (e.g. "Build your own indicator") wrap
   gracefully without making that pill wider than its siblings. */
.qb-hero__pills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 1080px;
    align-items: stretch;
}
.qb-hero__pill {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(50, 50, 50, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--qb-rule-2);
    box-sizing: border-box;
    min-height: 60px;
}
.qb-hero__pill-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--qb-mint-soft);
    color: var(--qb-mint);
    flex-shrink: 0;
}
.qb-hero__pill-icon svg { width: 14px; height: 14px; display: block; }
.qb-hero__pill-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--qb-text);
    line-height: 1.25;
    letter-spacing: -0.005em;
}

@media (max-width: 960px) {
    .qb-hero__pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .qb-hero__pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .qb-hero { min-height: 600px; }
    .qb-hero__inner { padding: 80px 0 56px; }
    .qb-hero__title {
        font-size: 2.625rem;
        line-height: 1.04;
        margin-bottom: 20px;
    }
    /* Stack each phrase on its own line so the headline mirrors the
       desktop layout (Build it. / Test it. / Trade it.) instead of
       collapsing into one wide line. */
    .qb-hero__title span,
    .qb-hero__title em { display: block; }
    .qb-hero__lede { font-size: 1rem; margin-bottom: 24px; }
    .qb-hero__cta {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 32px;
    }
}
@media (max-width: 480px) {
    .qb-hero { min-height: 560px; }
    .qb-hero__inner { padding: 72px 0 48px; }
    .qb-hero__title { font-size: 2.25rem; }
    /* Pills stay two-up on phone so they don't waste vertical space */
    .qb-hero__pills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .qb-hero__pill { padding: 10px 12px; gap: 10px; min-height: 56px; }
    .qb-hero__pill-name { font-size: 12px; }
    /* Get Started + See pricing side-by-side, each takes half the row */
    .qb-hero__cta { gap: 8px; }
    .qb-hero__cta cds-button::part(button) {
        min-width: 0;
        padding-inline: 14px;
    }
}

/* =====================================================================
   STEPS — three cds-tile cards in a row
   ===================================================================== */
.qb-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.qb-steps cds-tile {
    padding: 32px 24px 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 260px;
}
.qb-step__num {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    font-weight: 500;
    color: var(--qb-mint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.qb-step__title {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1.375rem;
    color: var(--qb-text);
    line-height: 1.15;
    letter-spacing: -0.012em;
}
.qb-step__body {
    color: var(--qb-text-dim);
    font-size: 15px;
    line-height: 1.55;
}

@media (max-width: 960px) {
    .qb-steps { grid-template-columns: 1fr; }
}

/* =====================================================================
   OUTCOME — equity chart + metric grid
   ===================================================================== */
.qb-outcome { display: grid; gap: 24px; }
.qb-outcome__chart {
    border: 1px solid var(--qb-rule-2);
    background: var(--qb-elev-1);
    overflow: hidden;
}
.qb-outcome__chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 20px 24px 4px;
    flex-wrap: wrap;
    gap: 12px;
}
.qb-outcome__chart-symbol {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--qb-text);
    line-height: 1.1;
    letter-spacing: -0.012em;
}
.qb-outcome__chart-meta {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: var(--qb-text-faint);
    font-feature-settings: "tnum";
}
.qb-outcome__chart-svg { padding: 8px 24px 22px; }
.qb-outcome__chart-svg svg { width: 100%; height: auto; display: block; }

.qb-outcome__metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--qb-rule-2);
    background: var(--qb-elev-1);
}
.qb-outcome__metric {
    padding: 18px 24px;
    border-left: 1px solid var(--qb-rule-2);
}
.qb-outcome__metric:first-child { border-left: 0; }
.qb-outcome__metric-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    color: var(--qb-text-faint);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
}
.qb-outcome__metric-value {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-size: 1.5rem;
    color: var(--qb-text);
    line-height: 1;
    letter-spacing: -0.018em;
}
.qb-outcome__metric-value--up   { color: var(--qb-up); }
.qb-outcome__metric-value--down { color: var(--qb-down); }
.qb-outcome__metric-unit {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.875rem;
    color: var(--qb-text-faint);
    margin-left: 2px;
    font-weight: 400;
}

.qb-outcome__caption {
    font-size: 13px;
    color: var(--qb-text-faint);
    line-height: 1.55;
    max-width: 76ch;
    margin-top: 4px;
}

@media (max-width: 720px) {
    .qb-outcome__metrics { grid-template-columns: repeat(2, 1fr); }
    .qb-outcome__metric { border-top: 1px solid var(--qb-rule-2); }
    .qb-outcome__metric:nth-child(odd) { border-left: 0; }
    .qb-outcome__metric:nth-child(-n+2) { border-top: 0; }
}

/* SVG chart elements */
.qb-chart-axis    { stroke: var(--qb-rule-2); stroke-width: 1; }
.qb-chart-tick    { font-family: "IBM Plex Mono", monospace; font-size: 11px; fill: var(--qb-text-ghost); font-feature-settings: "tnum"; }
.qb-chart-line    { fill: none; stroke: var(--qb-mint); stroke-width: 2; stroke-linejoin: round; }
.qb-chart-fill    { fill: url(#qb-chart-grad); opacity: 0.32; }
.qb-chart-bench   { fill: none; stroke: var(--qb-text-ghost); stroke-width: 1; stroke-dasharray: 3 4; }
.qb-chart-marker  { fill: var(--qb-mint); }
.qb-chart-marker-ring { fill: none; stroke: var(--qb-mint); stroke-width: 1; opacity: 0.5; }

/* =====================================================================
   CUSTOM INDICATOR
   ===================================================================== */
.qb-custom__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: center;
}
.qb-custom__copy h2 { margin-bottom: 16px; }
.qb-custom__lede {
    color: var(--qb-text-dim);
    font-size: 1.0625rem;
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: 44ch;
}
@media (max-width: 960px) {
    .qb-custom__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* App-mock frame for the custom indicator section */
.qb-mock {
    position: relative;
    border: 1px solid var(--qb-rule-2);
    background: var(--qb-elev-1);
    overflow: hidden;
}
.qb-mock__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--qb-rule-2);
    background: var(--qb-elev-2);
}
.qb-mock__bar-title {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: var(--qb-text-dim);
}
.qb-mock__bar-tags { display: inline-flex; gap: 6px; }
.qb-mock__bar-tag {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--qb-text-ghost);
}
.qb-mock__canvas {
    background: var(--qb-bg);
    background-image:
        linear-gradient(#181818 1px, transparent 1px),
        linear-gradient(90deg, #181818 1px, transparent 1px);
    background-size: 26px 26px;
    background-position: -1px -1px;
    padding: 22px;
}
.qb-mock__canvas svg { width: 100%; height: auto; display: block; }

/* SVG block-editor mock styles */
.qb-node-rect { fill: var(--qb-elev-2); stroke: var(--qb-rule-hi); stroke-width: 1; }
.qb-node-cat {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    fill: var(--qb-text-faint);
    text-transform: uppercase;
}
.qb-node-cat-bar      { stroke-width: 2.5; stroke-linecap: round; stroke: var(--qb-text-ghost); }
.qb-node-cat-bar--out { stroke: var(--qb-mint); }
.qb-node-title {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    fill: var(--qb-text);
}
.qb-node-sub {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    fill: var(--qb-text-faint);
}
.qb-node-port { fill: var(--qb-bg); stroke: var(--qb-text-ghost); stroke-width: 1.5; }
.qb-edge { fill: none; stroke: var(--qb-text-ghost); stroke-width: 1.75; stroke-linecap: round; }
.qb-edge--out { stroke: var(--qb-mint); opacity: 0.95; }

/* =====================================================================
   FINAL CTA
   ===================================================================== */
.qb-cta {
    padding: 96px 0 112px;
    text-align: center;
    border-top: 1px solid var(--qb-rule);
}
.qb-cta__title {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 600;
    font-size: clamp(1.875rem, 4vw, 2.625rem);
    line-height: 1.1;
    letter-spacing: -0.018em;
    margin: 0 auto 20px;
    max-width: 26ch;
    text-wrap: balance;
}
.qb-cta__title em { font-style: normal; color: var(--qb-mint); }
.qb-cta__lede {
    color: var(--qb-text-dim);
    font-size: 1rem;
    margin: 0 auto 32px;
    max-width: 50ch;
    line-height: 1.55;
}
.qb-cta__actions {
    display: inline-flex;
    gap: 0;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .qb-cta { padding: 64px 0 80px; }
}