/* AOM Traders V25 — Immersive Wide Experience
   Goal: full-width, breathable presentation while preserving V24 app visual language.
*/
:root{
  --container:1760px;
  --wide-gutter:clamp(22px,3.2vw,64px);
  --section-y:clamp(82px,7vw,132px);
}

/* Wider global rhythm */
.container{
  width:min(var(--container),calc(100% - (var(--wide-gutter) * 2)));
}
.site-shell{padding:14px 0 0;background:linear-gradient(180deg,rgba(6,17,26,.99) 0%,rgba(6,17,26,.82) 68%,transparent 100%)}
.site-header{
  width:min(1840px,calc(100% - 32px));
  height:66px;
  padding:0 clamp(16px,1.6vw,28px);
  border-radius:17px;
  background:rgba(6,17,26,.82);
  border-color:rgba(56,121,148,.28);
}
.mobile-nav{width:min(1840px,calc(100% - 32px))}
.section{padding:var(--section-y) 0}
.section-first{padding-top:126px}

/* Full-canvas hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid rgba(65,145,176,.10);
  background:
    radial-gradient(ellipse at 72% 42%,rgba(25,192,229,.12),transparent 30%),
    radial-gradient(ellipse at 14% 76%,rgba(14,94,125,.12),transparent 28%),
    linear-gradient(180deg,#06111a 0%,#06111a 68%,#07131c 100%);
}
.hero::before{
  content:"";
  position:absolute;inset:-18%;z-index:-2;
  background-image:
    linear-gradient(rgba(59,142,174,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(59,142,174,.07) 1px,transparent 1px);
  background-size:76px 76px;
  transform:perspective(780px) rotateX(62deg) translateY(25%);
  transform-origin:center bottom;
  mask-image:linear-gradient(to bottom,transparent 4%,rgba(0,0,0,.72) 38%,#000 100%);
  animation:aomGridDrift 22s linear infinite;
}
.hero::after{
  content:"";
  position:absolute;z-index:-1;width:760px;height:760px;right:-240px;top:8%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(39,215,242,.13),rgba(39,215,242,.02) 42%,transparent 68%);
  filter:blur(8px);
  animation:aomPulse 8s ease-in-out infinite alternate;
}
.hero .container{width:min(1780px,calc(100% - (var(--wide-gutter) * 2)))}
.hero-grid{
  width:100%;
  min-height:calc(100svh - 126px);
  grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr);
  gap:clamp(54px,5vw,108px);
  align-items:center;
}
.hero-copy{padding:44px 0 54px}
.hero-copy h1{font-size:clamp(58px,5.9vw,104px);max-width:900px;line-height:.96;margin:24px 0 28px}
.hero-copy .lead{font-size:clamp(16px,1.15vw,20px);max-width:760px;line-height:1.75}
.hero-actions{margin-top:34px}
.hero-actions .btn{min-height:50px;padding:0 24px}
.trust-row{grid-template-columns:repeat(4,1fr);max-width:840px;margin-top:36px}
.trust-row>div{height:74px}
.live-panel{
  height:clamp(520px,60vh,650px);
  padding:clamp(24px,2vw,34px);
  border-radius:28px;
  background:linear-gradient(145deg,rgba(13,29,42,.92),rgba(6,17,26,.88));
  backdrop-filter:blur(12px);
  box-shadow:0 46px 110px rgba(0,0,0,.42),0 0 90px rgba(39,215,242,.07);
  transform:translateZ(0);
}
.live-panel-head h2{font-size:clamp(30px,2.2vw,40px)}
.market-chart{height:clamp(220px,27vh,310px);margin:28px 0 20px;position:relative}
.market-chart::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(70,148,178,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(70,148,178,.07) 1px,transparent 1px);
  background-size:48px 48px;
  animation:aomChartGrid 16s linear infinite;
}
.market-chart svg{position:relative;z-index:1}
.market-chart path:last-child{stroke-dasharray:1500;stroke-dashoffset:1500;animation:aomLineDraw 4.6s ease-out .25s forwards,aomLineFlow 14s linear 4.8s infinite}
.market-chart path:first-of-type{animation:aomAreaGlow 6s ease-in-out infinite alternate}
.live-stats>div{height:82px;padding:14px 16px}
.live-stats span{font-size:10px}.live-stats b{font-size:14px}

/* Moving market ribbon gives the homepage a live, expansive transition */
.market-tape{
  position:relative;overflow:hidden;
  border-top:1px solid rgba(52,128,157,.16);
  border-bottom:1px solid rgba(52,128,157,.16);
  background:#071620;
  height:54px;
  display:flex;align-items:center;
}
.market-tape::before,.market-tape::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:100px;pointer-events:none}
.market-tape::before{left:0;background:linear-gradient(90deg,#071620,transparent)}
.market-tape::after{right:0;background:linear-gradient(270deg,#071620,transparent)}
.market-tape-track{display:flex;width:max-content;gap:44px;white-space:nowrap;animation:aomTape 34s linear infinite}
.market-tape-item{display:inline-flex;align-items:center;gap:10px;color:#8fa7b5;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.market-tape-item b{color:#eefbff}.market-tape-item i{width:6px;height:6px;border-radius:50%;background:#27d7f2;box-shadow:0 0 12px rgba(39,215,242,.6)}

/* Full-width sections without the "boxed page" feeling */
.section-soft{
  background:
    radial-gradient(circle at 12% 20%,rgba(39,215,242,.055),transparent 26%),
    linear-gradient(180deg,rgba(8,24,35,.78),rgba(6,17,26,.42));
  border-color:rgba(65,145,176,.10);
}
.section-head{margin-bottom:clamp(30px,3vw,50px)}
.section-head>div{max-width:900px}.section-head>p{max-width:540px;font-size:14px}
.section-head h2{font-size:clamp(34px,3.4vw,56px)}
.market-cards,.strategy-grid,.access-grid,.market-workspace{gap:18px}
.info-card,.workspace-card,.strategy-card,.access-card{padding:clamp(24px,2vw,34px);border-radius:22px}
.info-card{min-height:330px}
.info-card,.workspace-card,.strategy-card,.access-card,.product-card,.app-card,.side-card{transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.info-card:hover,.workspace-card:hover,.strategy-card:hover,.access-card:hover,.product-card:hover,.app-card:hover,.side-card:hover{transform:translateY(-4px);box-shadow:0 26px 70px rgba(0,0,0,.22)}

/* Product area uses more horizontal canvas on large displays */
.product-grid{gap:18px}
@media(min-width:1560px){
  .product-grid:not(.home-products){grid-template-columns:repeat(5,1fr)}
  .home-products{grid-template-columns:repeat(4,1fr)}
}
.product-card{border-radius:21px}
.home-products .product-card{height:410px;min-height:410px}

/* Page heroes also feel like large modern canvases */
.page-hero{
  min-height:58vh;
  display:flex;align-items:center;
  padding-bottom:74px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 80% 40%,rgba(39,215,242,.075),transparent 31%),
    linear-gradient(180deg,#06111a,#07141d);
}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 49.9%,rgba(66,139,168,.055) 50%,transparent 50.1%);opacity:.7}
.page-hero-grid{
  width:min(1780px,calc(100% - (var(--wide-gutter) * 2)));
  margin-inline:auto;
  grid-template-columns:minmax(0,1.30fr) minmax(420px,.70fr);
  gap:clamp(56px,6vw,118px);
  align-items:center;
}
.page-hero h1{
  font-size:clamp(50px,4.45vw,80px);
  max-width:940px;
  line-height:1.02;
  overflow-wrap:normal;
}
.page-hero .lead{max-width:760px;font-size:clamp(15px,1.05vw,18px);line-height:1.7}
.page-hero .hero-mini{width:100%;max-width:560px;justify-self:end}
.hero-mini>div{height:112px;padding:18px;border-radius:17px}

/* Footer spans the canvas rather than looking like a centered card cluster */
.footer{padding-top:86px;background:linear-gradient(180deg,#050f17,#041018)}
.footer-grid{gap:clamp(40px,5vw,92px)}

/* Scroll reveal — subtle, not gimmicky */
.aom-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.75,.25,1),transform .7s cubic-bezier(.2,.75,.25,1)}
.aom-reveal.is-visible{opacity:1;transform:none}

@keyframes aomGridDrift{from{background-position:0 0,0 0}to{background-position:0 152px,152px 0}}
@keyframes aomPulse{from{transform:scale(.94);opacity:.7}to{transform:scale(1.08);opacity:1}}
@keyframes aomChartGrid{from{background-position:0 0,0 0}to{background-position:48px 0,0 48px}}
@keyframes aomLineDraw{to{stroke-dashoffset:0}}
@keyframes aomLineFlow{0%,100%{filter:drop-shadow(0 0 2px rgba(39,215,242,.2))}50%{filter:drop-shadow(0 0 8px rgba(39,215,242,.48))}}
@keyframes aomAreaGlow{from{opacity:.72}to{opacity:1}}
@keyframes aomTape{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(max-width:1280px){
  :root{--wide-gutter:clamp(20px,2.8vw,36px)}
  .hero-grid{grid-template-columns:1fr 1fr;gap:46px}
  .hero-copy h1{font-size:clamp(54px,6vw,78px)}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .live-panel{height:540px}
}
@media(max-width:900px){
  :root{--wide-gutter:15px}
  .site-header,.mobile-nav{width:calc(100% - 20px)}
  .hero{min-height:auto}.hero-grid{min-height:auto;grid-template-columns:1fr;gap:40px;padding-bottom:70px}
  .hero-copy{padding-top:22px}.hero-visual{max-width:none}
  .page-hero{min-height:auto}.page-hero-grid{width:min(100% - 30px,900px);grid-template-columns:1fr;gap:38px}.page-hero .hero-mini{max-width:none;justify-self:stretch}
  .market-tape{height:48px}
}
@media(max-width:620px){
  .hero-copy h1{font-size:clamp(45px,13vw,62px)}
  .hero-copy .lead{font-size:15px}
  .trust-row{grid-template-columns:1fr 1fr}
  .live-panel{height:450px;border-radius:21px}
  .market-tape-track{gap:28px;animation-duration:26s}
  .page-hero h1{font-size:44px}
}
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.market-chart::before,.market-chart path,.market-tape-track{animation:none!important}
  .aom-reveal{opacity:1;transform:none;transition:none}
}