/* AltPrimeFX landing page polish v3.50 */
.landing-body{
  background:
    radial-gradient(circle at 78% 6%,color-mix(in srgb,var(--ui-brand) 10%,transparent),transparent 28%),
    radial-gradient(circle at 10% 20%,color-mix(in srgb,#2899ff 6%,transparent),transparent 26%),
    var(--ui-bg);
}

.hero-v2{
  min-height:720px;
  grid-template-columns:minmax(0,.92fr) minmax(560px,1.08fr);
  gap:clamp(42px,6vw,96px);
  align-items:center;
  padding-block:74px 66px;
}
.hero-v2:before{
  width:620px;
  height:620px;
  right:-170px;
  top:0;
  opacity:.72;
  filter:blur(2px);
}
.hero-v2-copy{
  padding:0;
  position:relative;
  z-index:3;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ui-brand) 24%,var(--ui-border));
  background:color-mix(in srgb,var(--ui-brand-soft) 54%,var(--ui-surface));
  color:var(--ui-text-2);
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
  box-shadow:var(--ui-shadow-xs);
}
.hero-kicker span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ui-brand);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--ui-brand) 12%,transparent);
}
.hero-v2 h1{
  max-width:760px;
  margin:22px 0 22px;
  font-size:clamp(52px,5.2vw,82px);
  line-height:.99;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.hero-v2 h1 em{
  position:relative;
  color:var(--ui-brand);
  font-style:normal;
  white-space:nowrap;
}
.hero-v2 h1 em:after{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  bottom:-4px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--ui-brand),color-mix(in srgb,var(--ui-brand) 35%,transparent));
  opacity:.28;
}
.hero-v2-copy>p{
  max-width:660px;
  font-size:16px;
  line-height:1.72;
  color:var(--ui-muted);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:30px 0 28px;
}
.hero-actions .btn.large{
  min-height:52px;
  padding:0 21px;
  border-radius:14px;
  font-size:13px;
  font-weight:800;
}
.hero-actions .btn-primary{
  box-shadow:0 13px 30px color-mix(in srgb,var(--ui-brand) 26%,transparent);
}
.hero-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:min(100%,610px);
  border:1px solid var(--ui-border);
  border-radius:18px;
  background:color-mix(in srgb,var(--ui-surface) 92%,transparent);
  box-shadow:var(--ui-shadow-sm);
  overflow:hidden;
}
.hero-meta span{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  padding:15px 16px;
  position:relative;
}
.hero-meta span+span:before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:1px;
  background:var(--ui-border);
}
.hero-meta b{
  color:var(--ui-text);
  font-size:12px;
  line-height:1.2;
}
.hero-meta small{
  color:var(--ui-muted);
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hero-market-stage{
  height:520px;
  position:relative;
  filter:none;
}
.hero-ring{
  width:470px;
  height:470px;
  right:8px;
  top:17px;
  border-color:color-mix(in srgb,var(--ui-brand) 12%,var(--ui-border));
  background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--ui-brand) 9%,transparent),transparent 64%);
}
.hero-chart-card{
  left:0;
  top:20px;
  width:min(100%,620px);
  height:430px;
  padding:20px;
  border-radius:28px;
  border:1px solid color-mix(in srgb,var(--ui-border) 80%,transparent);
  background:color-mix(in srgb,var(--ui-surface) 96%,transparent);
  box-shadow:0 28px 80px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.hero-chart-head{
  padding-bottom:7px;
  border-bottom:1px solid var(--ui-border);
}
.hero-live-quote{
  margin:15px 0 4px;
}
.hero-live-quote strong{
  font-size:34px;
  letter-spacing:-.03em;
}
.eod-hero-chart{
  height:250px!important;
}
.hero-account-row{
  gap:8px;
  margin-top:7px;
}
.hero-account-row span{
  border-radius:13px;
  padding:9px 11px;
}
.hero-phone{
  right:-22px;
  bottom:0;
  width:190px;
  border:6px solid color-mix(in srgb,var(--ui-text) 88%,#000);
  border-radius:30px;
  box-shadow:0 28px 65px rgba(0,0,0,.22);
  transform:rotate(2.2deg);
}

.live-market-strip{
  border-top:1px solid var(--ui-border);
  border-bottom:1px solid var(--ui-border);
  background:color-mix(in srgb,var(--ui-surface) 88%,transparent);
  backdrop-filter:blur(14px);
}

.home-features{
  padding-top:96px;
}
.home-section-heading{
  max-width:760px;
  margin-inline:auto;
  text-align:center;
}
.home-feature-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.home-feature-grid article{
  min-height:220px;
}
.home-feature-grid article:nth-child(1),
.home-feature-grid article:nth-child(2){grid-column:span 3}
.home-feature-grid article:nth-child(3),
.home-feature-grid article:nth-child(4),
.home-feature-grid article:nth-child(5){grid-column:span 2}

.terminal-showcase{
  background:
    radial-gradient(circle at 75% 10%,rgba(255,106,0,.08),transparent 30%),
    color-mix(in srgb,var(--ui-surface-2) 62%,var(--ui-bg));
  border-block:1px solid var(--ui-border);
}
.showcase-v2{
  align-items:center;
}
.terminal-preview{
  box-shadow:0 30px 80px rgba(0,0,0,.18);
}
.quote-card-grid article{
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.quote-card-grid article:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--ui-brand) 30%,var(--ui-border));
  box-shadow:var(--ui-shadow-md);
}

@media(max-width:1180px){
  .hero-v2{
    grid-template-columns:minmax(0,.95fr) minmax(470px,1.05fr);
    gap:34px;
    min-height:660px;
  }
  .hero-market-stage{height:470px}
  .hero-chart-card{height:400px}
  .eod-hero-chart{height:220px!important}
  .hero-phone{right:-6px;width:174px}
}

@media(max-width:900px){
  .hero-v2{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:36px!important;
    padding:48px 0 38px!important;
  }
  .hero-v2-copy{max-width:760px}
  .hero-market-stage{height:410px!important;margin:0!important}
  .hero-chart-card{top:0!important;width:100%!important;height:390px!important}
  .eod-hero-chart{height:215px!important}
  .hero-phone{display:none!important}
  .home-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .home-feature-grid article{grid-column:auto!important}
}

@media(max-width:760px){
  .landing-body{background:var(--ui-bg)}
  .hero-v2{
    padding:34px 0 28px!important;
    gap:28px!important;
  }
  .hero-v2:before{display:none}
  .hero-kicker{
    min-height:30px;
    padding:0 11px;
    font-size:9px;
    letter-spacing:.09em;
  }
  .hero-v2 h1{
    font-size:38px!important;
    line-height:1.01!important;
    letter-spacing:-.05em!important;
    margin:16px 0 15px!important;
  }
  .hero-v2 h1 em{white-space:normal}
  .hero-v2 h1 em:after{height:4px;bottom:-2px}
  .hero-v2-copy>p{
    font-size:13px!important;
    line-height:1.65!important;
  }
  .hero-actions{
    grid-template-columns:1fr 1fr!important;
    margin:21px 0 18px!important;
  }
  .hero-actions .btn.large{
    min-height:46px!important;
    padding:0 11px!important;
    font-size:11px!important;
  }
  .hero-meta{
    width:100%;
    border-radius:15px;
  }
  .hero-meta span{padding:12px 10px}
  .hero-meta b{font-size:10px}
  .hero-meta small{font-size:8px}
  .hero-market-stage{
    height:320px!important;
    margin-top:0!important;
  }
  .hero-ring{display:none!important}
  .hero-chart-card{
    height:320px!important;
    padding:13px!important;
    border-radius:20px!important;
  }
  .hero-chart-head{padding-bottom:5px}
  .hero-live-quote{margin:9px 0 0!important}
  .hero-live-quote strong{font-size:23px!important}
  .eod-hero-chart{height:185px!important}
  .hero-account-row{margin-top:3px!important}
  .hero-account-row span{padding:7px 8px!important}
  .home-features{padding-top:54px!important}
  .home-section-heading{text-align:left!important;margin-inline:0!important}
  .home-feature-grid{grid-template-columns:1fr!important}
  .home-feature-grid article{
    grid-template-columns:44px minmax(0,1fr)!important;
    border-radius:18px!important;
    padding:18px!important;
  }
}

@media(max-width:430px){
  .hero-v2 h1{font-size:34px!important}
  .hero-actions{grid-template-columns:1fr!important}
  .hero-meta span{padding:11px 8px}
  .hero-meta small{display:none}
  .hero-market-stage{height:300px!important}
  .hero-chart-card{height:300px!important}
  .eod-hero-chart{height:168px!important}
}

/* v3.50.1 — responsive containment hotfix */
html,body.landing-body{max-width:100%;overflow-x:hidden}
.landing-body main,.landing-body section,.hero-v2,.hero-v2-copy,.hero-market-stage,.hero-chart-card{min-width:0;max-width:100%;box-sizing:border-box}

@media(max-width:1180px){
  .hero-v2{
    grid-template-columns:1fr!important;
    gap:34px!important;
    min-height:0!important;
    padding:54px 0 46px!important;
    overflow:hidden!important;
  }
  .hero-v2-copy{
    width:100%!important;
    max-width:820px!important;
    margin-inline:auto!important;
    text-align:center!important;
  }
  .hero-v2-copy>p{margin-inline:auto!important}
  .hero-actions{justify-content:center!important}
  .hero-meta{margin-inline:auto!important}
  .hero-market-stage{
    width:min(100%,820px)!important;
    height:440px!important;
    margin:0 auto!important;
    transform:none!important;
    filter:none!important;
  }
  .hero-chart-card{
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:0!important;
    width:calc(100% - 112px)!important;
    max-width:700px!important;
    height:410px!important;
    margin-inline:auto!important;
    transform:none!important;
  }
  .hero-phone{
    right:0!important;
    top:54px!important;
    bottom:auto!important;
    width:164px!important;
    height:350px!important;
    transform:rotate(1.2deg)!important;
  }
  .eod-phone-chart{height:160px!important}
}

@media(max-width:900px){
  .hero-v2{
    padding:42px 0 34px!important;
    gap:26px!important;
  }
  .hero-v2-copy{text-align:left!important;margin:0!important}
  .hero-v2-copy>p{margin-inline:0!important}
  .hero-actions{justify-content:flex-start!important}
  .hero-meta{margin-inline:0!important}
  .hero-market-stage{
    width:100%!important;
    height:350px!important;
  }
  .hero-chart-card{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:none!important;
    height:340px!important;
    margin:0!important;
  }
  .hero-phone{display:none!important}
  .eod-hero-chart{height:195px!important}
}

@media(max-width:760px){
  .landing-header-wrap{max-width:100vw;overflow:visible}
  .landing-header{height:64px!important}
  .hero-v2{
    display:block!important;
    width:100%!important;
    padding:28px 0 24px!important;
  }
  .hero-kicker{
    max-width:100%;
    white-space:normal;
  }
  .hero-v2 h1{
    max-width:100%!important;
    font-size:clamp(34px,11vw,43px)!important;
    overflow-wrap:anywhere;
    text-wrap:balance;
  }
  .hero-v2 h1 em{display:inline;white-space:normal!important}
  .hero-v2-copy>p{max-width:100%!important}
  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }
  .hero-actions .btn.large{
    width:100%!important;
    min-width:0!important;
  }
  .hero-meta{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
  }
  .hero-market-stage{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin-top:24px!important;
  }
  .hero-chart-card{
    position:relative!important;
    width:100%!important;
    height:305px!important;
    padding:12px!important;
    overflow:hidden!important;
  }
  .hero-chart-head>div:first-child{min-width:0}
  .hero-chart-head b,.hero-chart-head small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero-live-quote strong{font-size:22px!important}
  .live-label{max-width:42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .eod-hero-chart{height:170px!important;margin-inline:-4px!important}
  .hero-account-row{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  .hero-account-row span:first-child{grid-column:1/-1}
  .hero-account-row span{min-width:0!important}
  .hero-account-row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .home-features{padding-top:50px!important}
  .home-feature-grid{gap:10px!important}
  .home-feature-grid article{min-height:0!important}
  .terminal-showcase{overflow:hidden}
  .showcase-v2{width:100%!important}
  .terminal-preview{max-width:100%!important;overflow:hidden!important}
}

@media(max-width:430px){
  .hero-v2{padding-top:24px!important}
  .hero-v2 h1{font-size:34px!important}
  .hero-meta small{display:none!important}
  .hero-chart-card{height:292px!important}
  .eod-hero-chart{height:158px!important}
}

/* v3.54.1 — keep the desktop phone mockup inside the hero composition */
@media(min-width:1181px){
  .hero-market-stage{overflow:hidden!important;border-radius:32px}
  .hero-chart-card{width:calc(100% - 112px)!important;max-width:620px!important}
  .hero-phone{right:8px!important;top:54px!important;bottom:auto!important;width:184px!important;height:410px!important;transform:rotate(1.1deg)!important}
  .eod-phone-chart{height:188px!important}
}
@media(min-width:901px) and (max-width:1180px){
  .hero-market-stage{overflow:hidden!important;border-radius:28px}
  .hero-phone{right:8px!important}
}


/* v3.54.2 — tighten mobile hero layout for the app webview */
@media(max-width:760px){
  .hero-v2{
    padding:22px 14px 18px!important;
  }
  .hero-v2-copy{
    max-width:100%!important;
  }
  .hero-kicker{
    display:inline-flex!important;
    width:auto!important;
    max-width:calc(100vw - 40px)!important;
    padding:10px 14px!important;
    font-size:11px!important;
    letter-spacing:.11em!important;
  }
  .hero-v2 h1{
    font-size:clamp(31px,10.2vw,40px)!important;
    line-height:1.03!important;
    margin:14px 0 14px!important;
    max-width:12.2ch!important;
  }
  .hero-v2-copy>p{
    font-size:12px!important;
    line-height:1.58!important;
    max-width:32ch!important;
    color:var(--ui-text-2)!important;
  }
  .hero-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px!important;
    margin:20px 0 16px!important;
    width:100%!important;
  }
  .hero-actions .btn.large{
    width:min(100%,312px)!important;
    min-height:54px!important;
    padding:0 20px!important;
    border-radius:18px!important;
    font-size:16px!important;
    justify-content:center!important;
  }
  .hero-actions .btn-outline.large{
    background:color-mix(in srgb,var(--ui-surface) 94%,transparent)!important;
  }
  .hero-meta{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0!important;
    margin-top:2px!important;
    border:1px solid var(--ui-border)!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:color-mix(in srgb,var(--ui-surface) 96%,transparent)!important;
    box-shadow:var(--ui-shadow-xs)!important;
  }
  .hero-meta span{
    border-right:1px solid var(--ui-border)!important;
    padding:13px 10px!important;
  }
  .hero-meta span:last-child{border-right:0!important}
  .hero-meta b{font-size:11px!important}
  .hero-market-stage{
    margin-top:18px!important;
    padding:0!important;
  }
  .hero-chart-card{
    width:100%!important;
    height:auto!important;
    min-height:300px!important;
    padding:14px!important;
    border-radius:24px!important;
  }
  .hero-chart-head{
    gap:10px!important;
  }
  .hero-live-quote strong{font-size:20px!important}
  .live-label{font-size:10px!important;max-width:46%!important}
  .eod-hero-chart{
    height:168px!important;
    margin-inline:0!important;
    border-radius:16px!important;
  }
  .hero-account-row{
    margin-top:10px!important;
    gap:8px!important;
  }
  .hero-account-row span{
    padding:9px 10px!important;
    border-radius:14px!important;
  }
}

@media(max-width:430px){
  .hero-v2{
    padding:18px 12px 16px!important;
  }
  .hero-kicker{
    max-width:calc(100vw - 32px)!important;
    font-size:10px!important;
    letter-spacing:.09em!important;
  }
  .hero-v2 h1{
    font-size:clamp(29px,9.8vw,36px)!important;
    max-width:11.7ch!important;
  }
  .hero-v2-copy>p{
    max-width:100%!important;
  }
  .hero-actions .btn.large{
    width:min(100%,100%)!important;
    min-height:52px!important;
    font-size:15px!important;
  }
  .hero-meta{
    border-radius:16px!important;
  }
  .hero-meta span{
    padding:12px 8px!important;
  }
  .hero-chart-card{
    min-height:288px!important;
    padding:12px!important;
    border-radius:20px!important;
  }
  .eod-hero-chart{height:154px!important}
}
