:root {
  --sage-black: #050408;
  --sage-ash: #17131d;
  --sage-gold: #d7ad5b;
  --sage-gold-light: #ffe2a2;
  --sage-pink: #ff4fc7;
  --sage-lavender: #b993ff;
  --sage-emerald: #3be3ad;
  --sage-white: #fbf7ff;
}

.sage-creative-landing {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: auto;
  color: var(--sage-white);
  background:
    radial-gradient(circle at 10% 18%, rgba(185,147,255,.2), transparent 34%),
    radial-gradient(circle at 85% 15%, rgba(255,79,199,.16), transparent 32%),
    linear-gradient(145deg, #030205, #0e0a13 48%, #050307);
  isolation: isolate;
}

.sage-creative-landing #landing-bg {
  position: fixed;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .11;
  filter: saturate(.7) contrast(1.3);
}

.sage-creative-landing::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  pointer-events: none;
}

.sage-glow {
  position: fixed;
  z-index: -2;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .17;
  pointer-events: none;
  animation: sageGlowMove 11s ease-in-out infinite alternate;
}

.sage-glow-left {
  left: -15vw;
  top: 25vh;
  background: var(--sage-lavender);
}

.sage-glow-right {
  right: -14vw;
  bottom: -12vw;
  background: var(--sage-pink);
  animation-delay: -5s;
}

.sage-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .18;
  pointer-events: none;
  background-image:
    radial-gradient(circle, white 0 1px, transparent 1.5px),
    radial-gradient(circle, #ffe2a2 0 1px, transparent 1.4px);
  background-size: 125px 125px, 175px 175px;
  background-position: 0 0, 44px 68px;
  animation: sageStarsMove 20s linear infinite;
}

.sage-landing-header,
.sage-landing-main,
.sage-landing-footer {
  width: min(1480px, calc(100% - 48px));
  margin-inline: auto;
}

.sage-landing-header {
  padding: 26px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.sage-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.sage-brand-symbol {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,226,162,.62);
  border-radius: 15px 4px 15px 4px;
  color: var(--sage-gold-light);
  background: rgba(213,173,91,.09);
  box-shadow: 0 0 25px rgba(213,173,91,.13);
  font: 1.5rem Georgia, serif;
}

.sage-brand strong,
.sage-brand small {
  display: block;
}

.sage-brand strong {
  color: var(--sage-gold-light);
  font-size: .88rem;
  letter-spacing: .18em;
}

.sage-brand small {
  margin-top: 4px;
  color: rgba(251,247,255,.55);
  font-size: .66rem;
  letter-spacing: .11em;
}

.sage-device-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid rgba(59,227,173,.3);
  border-radius: 999px;
  color: #d3fff1;
  background: rgba(5,27,22,.58);
  font-size: .67rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sage-device-badge span,
.sage-stage-label span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage-emerald);
  box-shadow: 0 0 12px var(--sage-emerald);
  animation: sagePulse 1.8s ease-in-out infinite;
}

.sage-landing-main {
  min-height: calc(100vh - 135px);
  padding: 45px 0 55px;
  display: grid;
  grid-template-columns: minmax(360px,.86fr) minmax(520px,1.14fr);
  gap: clamp(45px,7vw,110px);
  align-items: center;
}

.sage-eyebrow {
  margin-bottom: 18px;
  color: var(--sage-emerald);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .34em;
}

.sage-landing-copy h1 {
  margin: 0;
  color: white;
  font: 500 clamp(3.5rem,6vw,7.3rem)/.88 Georgia, serif;
  letter-spacing: -.045em;
  text-transform: none;
  text-shadow: 0 15px 45px rgba(0,0,0,.55);
}

.sage-landing-copy h1 em {
  display: block;
  margin-top: 11px;
  color: transparent;
  font-style: normal;
  background:
    linear-gradient(100deg,var(--sage-gold-light),var(--sage-pink),var(--sage-lavender));
  background-clip: text;
  -webkit-background-clip: text;
}

.sage-description {
  max-width: 650px;
  margin: 28px 0 30px;
  color: rgba(251,247,255,.69);
  font-size: 1rem;
  line-height: 1.8;
}

.sage-landing-actions {
  max-width: 625px;
  display: grid;
  gap: 12px;
}

.sage-action {
  position: relative;
  width: 100%;
  min-height: 73px;
  padding: 13px 21px;
  display: flex;
  align-items: center;
  gap: 17px;
  overflow: hidden;
  border: 1px solid rgba(213,173,91,.31);
  border-radius: 24px 7px 24px 7px;
  color: var(--sage-white);
  background:
    linear-gradient(100deg,rgba(255,255,255,.055),rgba(185,147,255,.025));
  box-shadow:
    inset 0 1px rgba(255,255,255,.07),
    0 13px 35px rgba(0,0,0,.25);
  cursor: pointer;
  text-align: left;
  transition: transform .25s ease, border-color .25s ease;
}

.sage-action:hover:not(:disabled) {
  transform: translateY(-4px);
  border-color: var(--sage-gold-light);
}

.sage-action-primary {
  border-color: rgba(255,79,199,.48);
  background:
    linear-gradient(100deg,rgba(255,79,199,.18),rgba(185,147,255,.11));
}

.sage-action:disabled {
  opacity: .72;
  cursor: default;
}

.sage-action-icon {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,226,162,.44);
  border-radius: 13px 4px 13px 4px;
  color: var(--sage-gold-light);
  background: rgba(4,3,7,.52);
}

.sage-action strong,
.sage-action small {
  display: block;
}

.sage-action strong {
  font-size: .76rem;
  letter-spacing: .14em;
}

.sage-action small {
  margin-top: 5px;
  color: rgba(251,247,255,.52);
  font-size: .7rem;
}

.sage-feature-line {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: rgba(251,247,255,.46);
  font-size: .59rem;
  letter-spacing: .16em;
}

.sage-feature-line i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--sage-pink);
  box-shadow: 0 0 8px var(--sage-pink);
}

.sage-language-area {
  margin-top: 28px;
}

.sage-language-area > p {
  margin: 0;
  color: rgba(251,247,255,.4);
  font-size: .63rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.sage-language-buttons {
  margin-top: 11px;
  justify-content: flex-start;
}

.sage-language-buttons button {
  background: rgba(12,9,17,.58);
  border-color: rgba(185,147,255,.24);
}

.sage-visual-stage {
  position: relative;
  min-height: 650px;
  display: grid;
  place-items: center;
}

.sage-stage-frame {
  position: relative;
  width: min(100%,780px);
  padding: 28px;
  border: 1px solid rgba(213,173,91,.42);
  border-radius: 46px 10px 46px 10px;
  background:
    linear-gradient(145deg,rgba(21,16,28,.95),rgba(6,4,9,.91));
  box-shadow:
    inset 0 0 50px rgba(255,255,255,.025),
    0 35px 85px rgba(0,0,0,.55),
    0 0 55px rgba(185,147,255,.11);
}

.sage-stage-label {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(251,247,255,.53);
  font-size: .61rem;
  letter-spacing: .21em;
}

.sage-stage-images {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 14px;
  align-items: center;
}

.sage-preview-card {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px 8px 28px 8px;
  box-shadow: 0 15px 32px rgba(0,0,0,.35);
}

.sage-preview-card small {
  position: absolute;
  left: 14px;
  bottom: 13px;
  z-index: 6;
  padding: 7px 10px;
  border-radius: 999px;
  color: white;
  background: rgba(0,0,0,.64);
  font-size: .53rem;
  letter-spacing: .17em;
}

.sage-preview-color {
  background:
    linear-gradient(to bottom,#3b215e 0 45%,#e889bd 46% 59%,#121018 60%);
}

.sage-preview-lines {
  background: #f8f4ec;
}

.sage-preview-moon,
.sage-line-moon {
  position: absolute;
  top: 13%;
  right: 13%;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.sage-preview-moon {
  background: #ffe8b2;
  box-shadow: 0 0 40px rgba(255,226,162,.72);
}

.sage-line-moon {
  border: 3px solid #17131c;
}

.sage-preview-mountains,
.sage-line-mountains {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: 18%;
  height: 44%;
  clip-path:
    polygon(0 100%,0 58%,18% 30%,35% 64%,53% 12%,70% 58%,84% 30%,100% 67%,100% 100%);
}

.sage-preview-mountains {
  background: linear-gradient(145deg,#282237,#09080d 72%);
}

.sage-line-mountains {
  border: 3px solid #17131c;
  background:
    repeating-linear-gradient(140deg,transparent 0 14px,rgba(20,17,24,.18) 15px 17px);
}

.sage-preview-figure,
.sage-line-figure {
  position: absolute;
  left: 42%;
  bottom: 10%;
  width: 18%;
  height: 44%;
  border-radius: 45% 45% 10% 10%;
}

.sage-preview-figure {
  background:
    radial-gradient(circle at 50% 13%,#281326 0 13%,transparent 14%),
    linear-gradient(to bottom,transparent 0 20%,#100a13 21%);
}

.sage-line-figure {
  border: 3px solid #17131c;
}

.sage-stage-arrow {
  display: grid;
  place-items: center;
  color: var(--sage-pink);
  font-size: 1.25rem;
  text-shadow: 0 0 16px var(--sage-pink);
  animation: sageArrow 2s ease-in-out infinite;
}

.sage-light-track {
  position: relative;
  height: 3px;
  margin: 25px 4px 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}

.sage-light-track span {
  position: absolute;
  inset-block: 0;
  width: 42%;
  border-radius: inherit;
  background:
    linear-gradient(90deg,transparent,var(--sage-pink),var(--sage-gold-light),transparent);
  animation: sageSweep 3s ease-in-out infinite;
}

.sage-stage-message strong {
  display: block;
  color: white;
  font: 500 1.45rem Georgia, serif;
}

.sage-stage-message p {
  margin: 8px 0 0;
  color: rgba(251,247,255,.52);
  line-height: 1.65;
}

.sage-step {
  position: absolute;
  z-index: 5;
  padding: 13px 17px;
  border: 1px solid rgba(213,173,91,.3);
  border-radius: 18px 5px 18px 5px;
  color: rgba(251,247,255,.75);
  background: rgba(8,6,11,.77);
  box-shadow: 0 15px 38px rgba(0,0,0,.35);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  animation: sageFloat 4s ease-in-out infinite;
}

.sage-step b {
  margin-right: 7px;
  color: var(--sage-gold-light);
}

.sage-step-one {
  left: -25px;
  top: 19%;
}

.sage-step-two {
  right: -22px;
  top: 43%;
  animation-delay: -1.4s;
}

.sage-step-three {
  left: 5%;
  bottom: 3%;
  animation-delay: -2.5s;
}

.sage-landing-footer {
  padding: 15px 0 25px;
  display: flex;
  justify-content: space-between;
  color: rgba(251,247,255,.27);
  font-size: .56rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}

@keyframes sageGlowMove {
  to { transform: translate3d(8vw,-4vh,0) scale(1.08); }
}

@keyframes sageStarsMove {
  to { transform: translateY(-125px); }
}

@keyframes sagePulse {
  50% { opacity: .45; transform: scale(.72); }
}

@keyframes sageArrow {
  50% { transform: translateX(7px) scale(1.18); }
}

@keyframes sageSweep {
  from { left: -45%; }
  to { left: 110%; }
}

@keyframes sageFloat {
  50% { transform: translateY(-9px); }
}

@media (max-width: 1080px) {
  .sage-landing-main {
    max-width: 850px;
    grid-template-columns: 1fr;
  }

  .sage-visual-stage {
    min-height: 600px;
  }
}

@media (max-width: 760px) {
  .sage-landing-header,
  .sage-landing-main,
  .sage-landing-footer {
    width: calc(100% - 28px);
  }

  .sage-landing-header {
    align-items: flex-start;
  }

  .sage-device-badge {
    max-width: 160px;
    border-radius: 17px 5px 17px 5px;
    line-height: 1.4;
  }

  .sage-brand small {
    display: none;
  }

  .sage-landing-copy h1 {
    font-size: clamp(3.2rem,16vw,5.2rem);
  }

  .sage-visual-stage {
    min-height: auto;
    padding: 35px 0;
  }

  .sage-stage-frame {
    padding: 18px;
  }

  .sage-stage-images {
    grid-template-columns: 1fr 30px 1fr;
    gap: 7px;
  }

  .sage-step {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sage-glow,
  .sage-stars,
  .sage-device-badge span,
  .sage-stage-label span,
  .sage-stage-arrow,
  .sage-light-track span,
  .sage-step {
    animation: none !important;
  }
}

/* ==========================================================
   SAGE LANDING VISUAL CORRECTION V2
   Removes legacy white header and improves viewport fit.
   ========================================================== */

html,
body {
  background: #050408 !important;
}

body {
  margin: 0 !important;
}

#landing-page.sage-creative-landing {
  background:
    radial-gradient(
      circle at 10% 18%,
      rgba(185,147,255,.20),
      transparent 34%
    ),
    radial-gradient(
      circle at 85% 15%,
      rgba(255,79,199,.16),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      #030205,
      #0e0a13 48%,
      #050307
    ) !important;
}

/* Force the header to remain dark and transparent. */
#landing-page .sage-landing-header,
.sage-creative-landing .sage-landing-header,
header.sage-landing-header {
  min-height: 58px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 14px 0 8px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 0 !important;
  color: #fbf7ff !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#landing-page .sage-landing-header::before,
#landing-page .sage-landing-header::after {
  display: none !important;
  content: none !important;
}

#landing-page .sage-brand,
#landing-page .sage-brand div,
#landing-page .sage-device-badge {
  background-color: transparent;
}

#landing-page .sage-brand-symbol {
  width: 42px;
  height: 42px;
}

#landing-page .sage-brand strong {
  color: #ffe2a2 !important;
}

#landing-page .sage-brand small {
  color: rgba(251,247,255,.48) !important;
}

#landing-page .sage-device-badge {
  color: #d3fff1 !important;
  background: rgba(5,27,22,.58) !important;
}

/* Prevent old global heading rules from overpowering the new title. */
#landing-page .sage-fixed-title {
  margin: 0 !important;
  max-width: 690px;
  color: #ffffff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(3.25rem, 5.3vw, 6.65rem) !important;
  font-weight: 500 !important;
  line-height: .88 !important;
  letter-spacing: -.045em !important;
  text-transform: none !important;
  text-align: left !important;
}

#landing-page .sage-fixed-title em {
  display: block !important;
  margin-top: 8px !important;
  color: transparent !important;
  font-style: normal !important;
  background:
    linear-gradient(
      100deg,
      #ffe2a2,
      #ff4fc7,
      #b993ff
    ) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

#landing-page .sage-fixed-description {
  max-width: 620px !important;
  margin: 20px 0 22px !important;
  color: rgba(251,247,255,.68) !important;
  font-size: .93rem !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

/* Pull the entire composition upward and fit it better. */
#landing-page .sage-landing-main {
  min-height: calc(100vh - 105px) !important;
  padding: 18px 0 28px !important;
  gap: clamp(30px, 5vw, 76px) !important;
  align-items: center !important;
}

#landing-page .sage-eyebrow {
  margin: 0 0 12px !important;
}

#landing-page .sage-landing-actions {
  gap: 9px !important;
}

#landing-page .sage-action {
  min-height: 63px !important;
  padding: 10px 18px !important;
}

#landing-page .sage-action-icon {
  width: 39px !important;
  height: 39px !important;
  flex-basis: 39px !important;
}

#landing-page .sage-feature-line {
  margin-top: 17px !important;
}

#landing-page .sage-language-area {
  margin-top: 16px !important;
}

#landing-page .sage-language-buttons {
  margin-top: 8px !important;
  gap: 7px !important;
}

#landing-page .sage-language-buttons button {
  min-height: 31px !important;
  padding: 5px 12px !important;
  font-size: .67rem !important;
}

/* Reduce right-side frame enough to remain fully visible. */
#landing-page .sage-visual-stage {
  min-height: 560px !important;
}

#landing-page .sage-stage-frame {
  width: min(100%, 740px) !important;
  padding: 24px !important;
}

#landing-page .sage-stage-images {
  gap: 11px !important;
}

#landing-page .sage-preview-card {
  max-height: 395px !important;
}

#landing-page .sage-stage-message strong {
  font-size: 1.28rem !important;
}

#landing-page .sage-stage-message p {
  margin-top: 6px !important;
  font-size: .88rem !important;
}

#landing-page .sage-step {
  padding: 11px 14px !important;
}

#landing-page .sage-landing-footer {
  padding: 6px 0 15px !important;
}

/* Remove legacy landing decoration leaking into the new page. */
#landing-page .landing-logo,
#landing-page .landing-card,
#landing-page .landing-header,
#landing-page .landing-title,
#landing-page .landing-subtitle {
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 1080px) {
  #landing-page .sage-landing-main {
    padding-top: 25px !important;
  }

  #landing-page .sage-visual-stage {
    min-height: 540px !important;
  }
}

@media (max-width: 760px) {
  #landing-page .sage-landing-header {
    padding-top: 10px !important;
  }

  #landing-page .sage-fixed-title {
    font-size: clamp(3rem, 15vw, 5rem) !important;
  }

  #landing-page .sage-landing-main {
    min-height: auto !important;
    padding-bottom: 24px !important;
  }

  #landing-page .sage-visual-stage {
    min-height: auto !important;
  }
}