/* Spectra Portal landing composition.
   Shared shell, header, footer, navigation, cards, buttons, spacing, and tokens come from Framework/spectra.css.
*/

body.sv-landing .sv-navCta{
  box-shadow:0 var(--sp-0) calc(var(--sp-6) + var(--sp-2)) color-mix(in srgb, var(--sp-accent) 16%, transparent);
}

body.sv-landing .sv-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(var(--sp-0), 1.08fr) minmax(22rem, .92fr);
  align-items:center;
  gap:clamp(var(--sp-6), 6vw, var(--sp-10));
  min-block-size:calc(100svh - var(--sp-web-shell-header-h));
  padding-block:clamp(var(--sp-8), 10vh, calc(var(--sp-10) + var(--sp-6)));
}

body.sv-landing .sv-hero::before{
  content:"";
  position:absolute;
  inset:auto auto 12% -8%;
  inline-size:min(30rem, 44vw);
  aspect-ratio:1;
  border-radius:var(--sp-radius-round);
  background:radial-gradient(circle, color-mix(in srgb, var(--sp-accent) 14%, transparent), transparent 66%);
  filter:blur(var(--sp-6));
  opacity:.42;
  pointer-events:none;
}

body.sv-landing .sv-hero__copy{
  position:relative;
  z-index:1;
  max-inline-size:50rem;
}

body.sv-landing .sv-hero h1{
  max-inline-size:var(--sp-measure-display-hero);
  margin-block:var(--sp-0) var(--sp-5);
  color:var(--sp-text);
  font-size:var(--sp-fs-display-hero);
  line-height:var(--sp-lh-1);
  letter-spacing:var(--sp-ls-tight);
}

body.sv-landing .sv-heroLead{
  max-inline-size:44rem;
  margin:var(--sp-0);
  color:var(--sp-text-muted);
  font-size:var(--sp-fs-body-lead);
  line-height:var(--sp-lh-3);
}

body.sv-landing .sv-heroActions{
  margin-block-start:var(--sp-5);
}

body.sv-landing .sv-primaryAction{
  box-shadow:0 var(--sp-4) calc(var(--sp-8) + var(--sp-4)) color-mix(in srgb, var(--sp-accent) 20%, transparent);
}

body.sv-landing .sv-heroPanel{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb, var(--sp-web-shell-accent) 22%, transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--sp-surface-2) 90%, var(--sp-web-shell-accent) 9%),
    color-mix(in srgb, var(--sp-surface) 88%, black 8%));
  box-shadow:
    0 var(--sp-8) calc(var(--sp-10) + var(--sp-8)) color-mix(in srgb, black 52%, transparent),
    0 var(--sp-0) var(--sp-8) color-mix(in srgb, var(--sp-web-shell-accent) 12%, transparent);
}

body.sv-landing .sv-windowBar{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-block-size:var(--sp-8);
  padding-inline:var(--sp-4);
  border-bottom:var(--sp-border-1);
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--sp-surface-2) 86%, var(--sp-web-shell-accent) 12%),
    color-mix(in srgb, var(--sp-surface-2) 92%, var(--sp-accent) 4%));
}

body.sv-landing .sv-windowBar span{
  inline-size:var(--sp-3);
  block-size:var(--sp-3);
  border-radius:var(--sp-radius-round);
  background:color-mix(in srgb, var(--sp-text-muted) 58%, transparent);
}

body.sv-landing .sv-editorMock{
  display:grid;
  grid-template-columns:var(--sp-8) 1fr;
  min-block-size:18rem;
}

body.sv-landing .sv-editorMock__gutter{
  padding-block:var(--sp-5);
  padding-inline:var(--sp-3);
  border-right:var(--sp-border-1);
  color:color-mix(in srgb, var(--sp-text-muted) 42%, transparent);
  font-family:var(--sp-font-mono);
  font-size:var(--sp-fs-2);
  line-height:var(--sp-lh-3);
  text-align:right;
  user-select:none;
}

body.sv-landing .sv-editorMock__code{
  margin:var(--sp-0);
  padding:var(--sp-5);
  overflow:auto;
  color:color-mix(in srgb, var(--sp-text) 86%, var(--sp-info) 14%);
  font-family:var(--sp-font-mono);
  font-size:clamp(var(--sp-fs-2), 1.45vw, var(--sp-fs-3));
  font-weight:var(--sp-fw-semibold);
  line-height:var(--sp-lh-3);
}

body.sv-landing .sv-sectionHeader{
  margin-block-end:var(--sp-5);
}

body.sv-landing .sv-sectionHeader h2{
  margin-block:var(--sp-0) var(--sp-3);
  color:var(--sp-text);
  font-size:var(--sp-fs-section-title);
  line-height:var(--sp-lh-1);
  letter-spacing:var(--sp-ls-tight);
}

body.sv-landing .sv-sectionHeader p{
  font-size:var(--sp-fs-body-reading);
}

body.sv-landing .sv-featureCard,
body.sv-landing .sv-roadmapCard{
  border-color:color-mix(in srgb, var(--sp-web-shell-accent) 16%, transparent);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--sp-surface-2) 78%, var(--sp-web-shell-accent) 10%),
    color-mix(in srgb, var(--sp-surface) 92%, transparent));
}

body.sv-landing .sv-featureCard .sp-card__body,
body.sv-landing .sv-roadmapCard .sp-card__body{
  display:grid;
  gap:var(--sp-3);
  padding:var(--sp-4);
}

body.sv-landing .sv-featureCard .sp-card__body{
  position:relative;
  padding-block-start:calc(var(--sp-4) + 1.35rem);
}

body.sv-landing .sv-featureCard .sp-badge{
  position:absolute;
  inset-block-start:var(--sp-3);
  inset-inline-end:var(--sp-3);
  inline-size:max-content;
  max-inline-size:calc(100% - (var(--sp-3) * 2));
  padding:.16rem .5rem;
  font-size:.68rem;
  line-height:1.2;
  letter-spacing:.015em;
  white-space:nowrap;
}

body.sv-landing .sv-featureCard h3,
body.sv-landing .sv-roadmapCard h3{
  margin:var(--sp-0);
  color:var(--sp-text);
  font-size:var(--sp-fs-card-title);
  line-height:var(--sp-lh-2);
}

body.sv-landing .sv-featureCard p,
body.sv-landing .sv-roadmapCard p{
  margin:var(--sp-0);
  color:var(--sp-text-muted);
  font-size:var(--sp-fs-body-reading);
  line-height:var(--sp-lh-3);
}

body.sv-landing .sv-roadmapCards{
  margin-block-start:var(--sp-5);
}

body.sv-landing .sv-roadmapCard{
  background:color-mix(in srgb, var(--sp-surface) 90%, var(--sp-web-shell-accent) 4%);
}

body.sv-landing .sv-roadmapCard--active{
  border-color:color-mix(in srgb, var(--sp-accent) 22%, var(--sp-web-shell-accent) 18%);
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--sp-surface-2) 78%, var(--sp-web-shell-accent) 16%),
    color-mix(in srgb, var(--sp-surface) 88%, var(--sp-accent) 6%));
}

body.sv-landing .sv-roadmapStep{
  color:color-mix(in srgb, var(--sp-accent) 78%, var(--sp-text) 22%);
  font-size:var(--sp-fs-1);
  font-weight:var(--sp-fw-bold);
  letter-spacing:var(--sp-ls-loose);
  text-transform:uppercase;
}

@media (max-width:52rem){
  body.sv-landing .sv-hero{
    grid-template-columns:1fr;
    min-block-size:auto;
  }

  body.sv-landing .sv-hero h1{
    max-inline-size:var(--sp-measure-display-hero);
  }
}

@media (max-width:40rem){
  body.sv-landing .sv-hero{
    padding-block:var(--sp-7) var(--sp-8);
  }

  body.sv-landing .sv-heroPanel{
    margin-inline:calc(var(--sp-2) * -1);
  }

  body.sv-landing .sv-editorMock{
    grid-template-columns:var(--sp-7) 1fr;
  }

  body.sv-landing .sv-editorMock__code{
    padding:var(--sp-4);
  }
}