/* SOCAR Trading — At a Glance redesign previews: shared core
   Brand per socar_DesignGuidelines_20150807: black/white base, flame colours as
   discreet accents, secondary palette for infographics, en-dash design element. */
.st-aag{
  --st-black:#000;--st-anth:#1e1e1e;--st-anth2:#333;--st-ink:#1a1a1a;--st-ink2:#4c4d4e;
  --st-mute:#999;--st-line:#e2e2e2;--st-paper:#fff;--st-paper2:#f5f5f5;
  --st-blue:#00A3E0;--st-red:#E4002B;--st-green:#64A70B;
  --st-gold:#FFB81C;--st-orange:#DE7C00;--st-brown:#A1561C;--st-brown2:#623412;
  --st-f-bold:"SOCAR-Bold","Akzidenz-Grotesk Pro",Arial,Helvetica,sans-serif;
  --st-f-reg:"SOCAR-Regular","Akzidenz-Grotesk Pro",Arial,Helvetica,sans-serif;
  --st-f-light:"SOCAR-Light","Akzidenz-Grotesk Pro",Arial,Helvetica,sans-serif;
  --st-max:1400px;--st-gut:clamp(20px,3.5vw,48px);
  --st-ease:cubic-bezier(.22,.61,.36,1);
  --st-pat-dark-img:url(/assets/st/pattern-dark.svg);
  --st-pat-light-img:url(/assets/st/pattern-light.svg);
  font-family:var(--st-f-reg);color:var(--st-ink);line-height:1.55;font-size:16px;
  -webkit-font-smoothing:antialiased;position:relative;
  /* clip horizontal bleed only — overflow:hidden would create a scroll container and kill position:sticky */
  overflow-x:clip;overflow-y:visible;
  /* break out of Avada's #main side padding (synced in JS) */
  margin-left:-30px;margin-right:-30px;
}
.st-aag *,.st-aag *::before,.st-aag *::after{box-sizing:border-box}
.st-aag p{margin:0 0 1em}
.st-aag p:last-child{margin-bottom:0}
.st-aag h1,.st-aag h2,.st-aag h3,.st-aag h4{margin:0;font-weight:400;line-height:1.15;color:inherit}
.st-aag a{color:inherit;text-decoration:none}
.st-aag img{display:block;max-width:100%;height:auto}
.st-aag svg{display:block;overflow:visible}
.st-aag button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.st-aag ul{list-style:none;margin:0;padding:0}
.st-aag i{font-style:normal}
.st-aag b,.st-aag strong{font-weight:400}
.st-aag sup{line-height:0}
.st-wrap{max-width:var(--st-max);margin:0 auto;padding-left:var(--st-gut);padding-right:var(--st-gut)}
.st-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* En-dash design element (guideline p.12): own line, left aligned, light weight */
.st-dash{display:block;font-family:var(--st-f-light);line-height:1;color:currentColor}
.st-dash::before{content:"–"}
.st-kicker{font-family:var(--st-f-reg);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--st-mute)}

/* Load-in (hero) */
[data-st-load]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--st-ease),transform 1s var(--st-ease);transition-delay:var(--d,0s)}
.st-loaded [data-st-load]{opacity:1;transform:none}
.st-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--st-ease) .15s}
.st-loaded .st-wipe{clip-path:inset(0 0 0 0)}
.st-scroll-hint{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.st-scroll-hint i{width:1px;height:36px;background:currentColor;position:relative;overflow:hidden;display:block}
.st-scroll-hint i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:#fff;mix-blend-mode:difference;animation:st-hint 1.8s ease-in-out infinite}
@keyframes st-hint{to{top:100%}}
.st-crumb{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--st-mute)}
.st-crumb a:hover{color:currentColor}
.st-cfo{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.st-cfo img{width:56px;height:56px;border-radius:50%}
.st-cfo q{display:block;quotes:"“" "”";font-family:var(--st-f-light);font-size:17px;line-height:1.4}
.st-cfo b{display:block;font-family:var(--st-f-bold);margin-top:8px;font-size:14px}
.st-cfo span{display:block;font-size:13px;color:var(--st-mute)}

/* Reveal on scroll */
.st-rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--st-ease),transform .9s var(--st-ease)}
.st-rv.is-in{opacity:1;transform:none}
.st-rv-l{opacity:0;transform:translateX(-30px);transition:opacity .9s var(--st-ease),transform .9s var(--st-ease)}
.st-rv-l.is-in{opacity:1;transform:none}
.st-rv-s{opacity:0;transform:scale(.96);transition:opacity .9s var(--st-ease),transform .9s var(--st-ease)}
.st-rv-s.is-in{opacity:1;transform:none}
.st-rv-f{opacity:0;transition:opacity 1.2s var(--st-ease)}
.st-rv-f.is-in{opacity:1}
[data-st-stagger]>*{opacity:0;transform:translateY(24px);transition:opacity .8s var(--st-ease),transform .8s var(--st-ease)}
[data-st-stagger].is-in>*{opacity:1;transform:none}
[data-st-stagger].is-in>*:nth-child(1){transition-delay:.05s}
[data-st-stagger].is-in>*:nth-child(2){transition-delay:.15s}
[data-st-stagger].is-in>*:nth-child(3){transition-delay:.25s}
[data-st-stagger].is-in>*:nth-child(4){transition-delay:.35s}
[data-st-stagger].is-in>*:nth-child(5){transition-delay:.45s}
[data-st-stagger].is-in>*:nth-child(6){transition-delay:.55s}
[data-st-stagger].is-in>*:nth-child(7){transition-delay:.65s}
[data-st-stagger].is-in>*:nth-child(8){transition-delay:.75s}
[data-st-stagger].is-in>*:nth-child(9){transition-delay:.85s}
[data-st-stagger].is-in>*:nth-child(10){transition-delay:.95s}
.st-line-grow{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--st-ease) .2s}
.is-in .st-line-grow,.st-line-grow.is-in{transform:scaleX(1)}

/* Charts */
.st-chart{position:relative;width:100%}
.st-chart svg{width:100%;height:auto}
.st-chart text{font-family:var(--st-f-reg);font-size:13px;fill:currentColor}
.st-chart .st-bar{transform:scaleY(0);transform-origin:bottom;transition:transform 1.1s var(--st-ease)}
.st-chart.is-in .st-bar{transform:scaleY(1)}
.st-chart .st-bar-lbl,.st-chart .st-val{opacity:0;transition:opacity .6s var(--st-ease) .9s}
.st-chart.is-in .st-bar-lbl,.st-chart.is-in .st-val{opacity:1}
.st-chart .st-arc{transition:stroke-dashoffset 1.4s var(--st-ease)}
.st-chart .st-path{transition:stroke-dashoffset 1.6s var(--st-ease)}
.st-chart .st-dot{opacity:0;transition:opacity .4s var(--st-ease) 1.2s}
.st-chart.is-in .st-dot{opacity:1}
.st-tip{position:absolute;pointer-events:none;background:#000;color:#fff;font-family:var(--st-f-reg);font-size:13px;line-height:1.35;padding:8px 10px;border-radius:2px;white-space:nowrap;opacity:0;transform:translate(-50%,-110%);transition:opacity .15s;z-index:5}
.st-tip.on{opacity:1}
.st-tip b{font-family:var(--st-f-bold);font-weight:400}

/* Tabs */
.st-tabs{display:flex;gap:4px}
.st-tab{padding:10px 18px;font-size:14px;letter-spacing:.04em;color:var(--st-mute);border-bottom:2px solid transparent;transition:color .25s,border-color .25s}
.st-tab:hover{color:var(--st-ink)}
.st-tab[aria-selected="true"]{color:var(--st-ink);border-color:var(--st-ink)}
.st-panel[hidden]{display:none}
.st-panel{animation:st-fade .5s var(--st-ease)}
@keyframes st-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Buttons & links */
.st-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--st-f-reg);font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:14px 22px;border:1px solid currentColor;transition:background .3s,color .3s,border-color .3s}
.st-btn svg{width:18px;height:18px;transition:transform .3s var(--st-ease)}
.st-btn:hover{background:#000;color:#fff;border-color:#000}
.st-btn:hover svg{transform:translateX(4px)}
.st-arrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:.04em}
.st-arrow svg{width:18px;height:18px;transition:transform .3s var(--st-ease)}
.st-arrow:hover svg{transform:translateX(5px)}
.st-ul{position:relative}
.st-ul::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--st-ease)}
.st-ul:hover::after{transform:scaleX(1);transform-origin:left}

/* Carousel */
.st-car{position:relative}
.st-car-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;cursor:grab}
.st-car-track::-webkit-scrollbar{display:none}
.st-car-track.dragging{cursor:grabbing;scroll-snap-type:none}
.st-car-track>*{scroll-snap-align:start;flex:0 0 auto}
.st-car-nav{display:flex;gap:10px;align-items:center}
.st-car-btn{width:46px;height:46px;border:1px solid currentColor;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:background .3s,color .3s,opacity .3s}
.st-car-btn svg{width:18px;height:18px}
.st-car-btn:hover{background:#000;color:#fff;border-color:#000}
.st-car-btn[disabled]{opacity:.3;pointer-events:none}
.st-car-dots{display:flex;gap:6px}
.st-car-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.25;transition:opacity .3s,transform .3s}
.st-car-dots i.on{opacity:1;transform:scale(1.3)}

/* SOCAR pattern (flame-derived) — negative on dark, positive on light */
.st-pat-dark{background-color:var(--st-black);background-image:var(--st-pat-dark-img)}
.st-pat-light{background-color:#fff;background-image:var(--st-pat-light-img)}

/* Screenshot/static mode (?st-static) */
.st-aag.st-static *,.st-aag.st-static *::before,.st-aag.st-static *::after{transition:none!important;animation:none!important}

/* Misc */
.st-num{font-variant-numeric:tabular-nums lining-nums}
.st-foot{font-size:12px;color:var(--st-mute);line-height:1.5}
@media (prefers-reduced-motion:reduce){
  .st-aag *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .st-rv,.st-rv-l,.st-rv-s,.st-rv-f,[data-st-stagger]>*{opacity:1;transform:none}
}