/* ===================== STOXGEAR PRO THEME (WHITE + GOLD) ===================== */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0f1220;
  --muted:#5e6676;
  --gold:#c9a646;
  --gold2:#b38b2e;
  --line:#e7e9ee;
  --radius:18px;
  --shadow:0 12px 32px rgba(0,0,0,.08);
  --shadow2:0 18px 45px rgba(0,0,0,.10);
  --dropDur: 3.8s; /* slow dropdown */
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

/* ---------- global layout safety ---------- */
.container, main, section{
  width:min(1180px, calc(100% - 40px));
  margin-inline:auto;
}
@media (max-width:520px){
  .container, main, section{ width: calc(100% - 26px); }
}

/* ---------- premium background (same theme, different page mood) ---------- */
body::before{
  content:"";
  position:fixed;
  inset:-40vh -40vw;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(900px 600px at 18% 10%, rgba(201,166,70,.18), transparent 60%),
    radial-gradient(900px 600px at 82% 18%, rgba(179,139,46,.14), transparent 60%),
    radial-gradient(850px 650px at 60% 85%, rgba(201,166,70,.10), transparent 62%);
  filter: blur(0px);
}
body[data-mood="services"]::before{
  background:
    radial-gradient(1000px 650px at 20% 15%, rgba(201,166,70,.20), transparent 60%),
    radial-gradient(800px 600px at 80% 10%, rgba(179,139,46,.10), transparent 60%),
    radial-gradient(900px 700px at 65% 90%, rgba(201,166,70,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,248,230,.9), transparent 50%);
}
body[data-mood="leadership"]::before{
  background:
    radial-gradient(950px 650px at 20% 10%, rgba(201,166,70,.16), transparent 60%),
    radial-gradient(650px 520px at 78% 16%, rgba(179,139,46,.18), transparent 60%),
    radial-gradient(900px 700px at 60% 90%, rgba(201,166,70,.06), transparent 62%);
}
body[data-mood="contact"]::before{
  background:
    radial-gradient(1000px 700px at 22% 8%, rgba(201,166,70,.14), transparent 60%),
    radial-gradient(900px 650px at 70% 88%, rgba(179,139,46,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,250,240,.95), transparent 55%);
}
body[data-mood="risk"]::before{
  background:
    radial-gradient(900px 650px at 22% 10%, rgba(201,166,70,.12), transparent 60%),
    radial-gradient(1000px 700px at 85% 20%, rgba(179,139,46,.10), transparent 62%),
    radial-gradient(900px 700px at 55% 90%, rgba(201,166,70,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,248,232,.95), transparent 55%);
}

/* ---------- cards: make everything look premium without touching content ---------- */
.card, .coming-card, .feature-card, .service-card, .pricing-card, .step-card, .box, .panel, .tile,
[class*="card"], [class*="Card"]{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border:1px solid rgba(231,233,238,.9);
  background:var(--surface);
}
.card:hover, .coming-card:hover, .feature-card:hover, .service-card:hover, .pricing-card:hover, .step-card:hover,
[class*="card"]:hover, [class*="Card"]:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow2);
}
a{color:inherit}
a:hover{color:var(--gold2)}

/* ---------- elegant gold dividers for key headings ---------- */
h1,h2,h3{
  letter-spacing:-0.02em;
}
h2[data-divider], h3[data-divider]{
  position:relative;
  padding-bottom:14px;
  margin-bottom:18px;
}
h2[data-divider]::after, h3[data-divider]::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:min(220px, 60%);
  height:3px;
  border-radius:99px;
  background: linear-gradient(90deg, transparent, rgba(201,166,70,.95), transparent);
}

/* ---------- opening animations ---------- */
.nx-reveal{
  opacity:0;
  transform: translateY(22px);
}
.nx-reveal.nx-in{
  opacity:1;
  transform:none;
  transition: opacity .85s ease, transform .85s ease;
}
.nx-stagger .nx-reveal.nx-in{
  transition-delay: var(--d, 0ms);
}

/* ---------- nav dropdown mobile + slow ---------- */
.nx-dd, .dropdown, .menu-dropdown, [class*="dropdown"]{
  transition: max-height var(--dropDur) ease, opacity .6s ease, transform .6s ease;
}
.nx-dd{ max-height:0; overflow:hidden; opacity:0; transform: translateY(-6px); }
.nx-open > .nx-dd,
.open > .nx-dd,
.show > .nx-dd,
.is-open > .nx-dd{
  max-height: 900px;
  opacity:1;
  transform:none;
}

/* make tap targets mobile-friendly */
@media (max-width:900px){
  nav a, .nav a, .navbar a { padding: 12px 14px !important; }
}

/* ---------- index-only PSX widget section ---------- */
.psx-live{
  padding: 48px 0;
}
.psx-live h2{
  color: var(--gold2);
  text-align:center;
  font-weight: 900;
}
.psx-shell{
  margin-top:16px;
  border-radius: 18px;
  border:1px solid rgba(231,233,238,.95);
  box-shadow: var(--shadow);
  overflow:hidden;
  background:#fff;
}


/* ================= PAGE-SPECIFIC DESIGN LAYERS ================= */

/* LEADERSHIP / BOARD → TIMELINE + SPOTLIGHT */
body[data-mood="leadership"] section{
  position:relative;
}
body[data-mood="leadership"] section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  opacity:.25;
}
body[data-mood="leadership"] .card,
body[data-mood="leadership"] [class*="member"]{
  position:relative;
}
body[data-mood="leadership"] .card::before{
  content:"";
  position:absolute;
  left:-22px;
  top:24px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(201,166,70,.25);
}

/* SERVICES → DYNAMIC GRID + ICON FOCUS */
body[data-mood="services"] .card,
body[data-mood="services"] [class*="service"]{
  border-top:4px solid var(--gold);
}
body[data-mood="services"] .card:hover{
  transform:translateY(-6px) scale(1.02);
}

/* CONTACT → SPOTLIGHT PANEL */
body[data-mood="contact"] section{
  background:linear-gradient(180deg,#fff,#fff6da);
  border-radius:22px;
  padding:48px;
}
@media(max-width:700px){
  body[data-mood="contact"] section{ padding:28px; }
}

/* RISK / COMPLAINT → FORMAL STRIPES */
body[data-mood="risk"] section{
  border-left:4px solid var(--gold);
  padding-left:28px;
}


/* ===== FINAL PER-PAGE UNIQUE DESIGN LAYER ===== */
body[data-page]::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.9;
}
body[data-page*="index"]::after{
  background:radial-gradient(circle at top, rgba(201,166,70,.25), transparent 60%);
}
body[data-page*="service"]::after{
  background:linear-gradient(135deg, rgba(201,166,70,.18), transparent 60%);
}
body[data-page*="lead"]::after{
  background:linear-gradient(180deg, rgba(179,139,46,.2), transparent 70%);
}
body[data-page*="account"]::after{
  background:linear-gradient(90deg, rgba(201,166,70,.15), transparent 70%);
}
body[data-page*="contact"]::after{
  background:radial-gradient(circle at center, rgba(201,166,70,.18), transparent 65%);
}
body[data-page*="risk"], body[data-page*="complaint"]::after{
  background:repeating-linear-gradient(
    45deg,
    rgba(201,166,70,.08),
    rgba(201,166,70,.08) 10px,
    transparent 10px,
    transparent 20px
  );
}


/* ===== PAGE OPEN ANIMATIONS (DIFFERENT PER PAGE) ===== */
body[data-page] *{
  animation-duration:1.1s;
  animation-fill-mode:both;
}

body[data-page*="index"] section, 
body[data-page*="index"] .card{
  animation-name:fadeUp;
}

body[data-page*="service"] section{
  animation-name:slideLeft;
}

body[data-page*="lead"] section{
  animation-name:timelineIn;
}

body[data-page*="account"] section{
  animation-name:slideRight;
}

body[data-page*="contact"] section{
  animation-name:zoomIn;
}

body[data-page*="risk"], body[data-page*="complaint"]{
  animation-name:fadeIn;
}

/* Leadership eye-catching lines */
body[data-page*="lead"] section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(180deg, transparent, #c9a646, transparent);
  opacity:.5;
}

/* Keyframes */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(40px)}
  to{opacity:1; transform:none}
}
@keyframes slideLeft{
  from{opacity:0; transform:translateX(-60px)}
  to{opacity:1; transform:none}
}
@keyframes slideRight{
  from{opacity:0; transform:translateX(60px)}
  to{opacity:1; transform:none}
}
@keyframes zoomIn{
  from{opacity:0; transform:scale(.9)}
  to{opacity:1; transform:scale(1)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes timelineIn{
  from{opacity:0; transform:translateY(80px)}
  to{opacity:1; transform:none}
}


/* ===== STRONG PAGE-SPECIFIC DESIGNS ===== */

/* HOME – HERO PANELS */
body[data-page*="index"] section{
  border-radius:28px;
  background:linear-gradient(180deg,#fff,#fff5dc);
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

/* SERVICES – CUT CORNERS + BANDS */
body[data-page*="service"] section{
  background:#fff;
  border-left:6px solid #c9a646;
  padding-left:40px;
}

/* LEADERSHIP – TIMELINE CARDS */
body[data-page*="lead"] .card{
  margin-left:60px;
}
body[data-page*="lead"] .card::after{
  content:"";
  position:absolute;
  left:-48px;
  top:30px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#c9a646;
}

/* ACCOUNT OPENING – STEPS BLOCK */
body[data-page*="account"] .card{
  border:2px dashed #c9a646;
}

/* CONTACT – SPOTLIGHT CENTER */
body[data-page*="contact"] section{
  max-width:800px;
  background:radial-gradient(circle,#fff,#fff3c4);
}

/* RISK / COMPLAINT – FORMAL DOCUMENT */
body[data-page*="risk"], body[data-page*="complaint"]{
  background:#fcfcfc;
}
body[data-page*="risk"] section, body[data-page*="complaint"] section{
  border-left:5px solid #b38b2e;
}


/* ===== PAGE-SPECIFIC AURA EFFECTS ===== */

/* HOME – GOLDEN GLOW AURA */
body[data-page*="index"]::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(circle at top, rgba(201,166,70,.35), transparent 60%),
    radial-gradient(circle at bottom, rgba(179,139,46,.25), transparent 65%);
  z-index:-2;
}

/* SERVICES – DYNAMIC ANGULAR AURA */
body[data-page*="service"]::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    linear-gradient(120deg, rgba(201,166,70,.22), transparent 55%),
    linear-gradient(-60deg, rgba(179,139,46,.18), transparent 60%);
  z-index:-2;
}

/* LEADERSHIP – ROYAL VERTICAL AURA */
body[data-page*="lead"]::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    linear-gradient(180deg, rgba(201,166,70,.30), transparent 70%);
  z-index:-2;
}

/* ACCOUNT OPENING – FLOW AURA */
body[data-page*="account"]::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    linear-gradient(90deg, rgba(201,166,70,.25), transparent 65%);
  z-index:-2;
}

/* CONTACT – SOFT HUMAN AURA */
body[data-page*="contact"]::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(circle at center, rgba(201,166,70,.22), transparent 65%);
  z-index:-2;
}

/* RISK / COMPLAINT – FORMAL LOW ENERGY AURA */
body[data-page*="risk"],
body[data-page*="complaint"]::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    linear-gradient(180deg, rgba(179,139,46,.12), transparent 75%);
  z-index:-2;
}

/* ================= GLOBAL POLISH FIXES ================= */
a{ text-decoration:none; }
a:hover{ text-decoration:none; }

/* Dropdown text should not look bold */
.nx-drop a{ font-weight:600 !important; }

/* Prevent buttons from spilling outside cards */
.card, .info-card, .panel, .nx-card{ overflow:hidden; }
.card .nx-btn, .info-card .nx-btn, .panel .nx-btn, .nx-card .nx-btn{
  max-width:100%;
  white-space:normal;
}

/* Better tap targets on mobile */
@media(max-width:640px){
  .nx-link, .nx-drop a{ padding:12px 12px; }
}

/* ================= DROPDOWN SLOW + CONSISTENT SIZE ================= */
.nx-drop{
  min-width: 280px;
}
.nx-drop a{
  font-size:14px;
  line-height:1.35;
}
.nx-item>.nx-drop{
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.plus{font-weight:900;color:var(--accent);margin-left:4px;}
/* About split visual right */
.wrap.split{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start;}
.wrap.split .visual{position:relative;}
@media(max-width:900px){
  .wrap.split{grid-template-columns:1fr;}
}

/* ================= INDEX HERO IMAGE FIX ================= */
.frame{
  width:100%;
  max-width: 520px;
  margin-left:auto;   /* keeps it on the right */
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(201,166,70,.20);
  box-shadow: var(--shadow);
  background:#fff;
}
.frame img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  max-height: 260px;   /* prevents huge image */
}
@media(max-width:900px){
  .frame{max-width:100%; margin:14px auto 0;}
  .frame img{max-height: 210px;}
}

/* ================= DROPDOWN COMPACT + READABLE ================= */
.nx-drop{
  max-width: 360px;
  padding: 10px;
}
.nx-drop a{
  padding:10px 12px;
  border-radius:12px;
}
@media(max-width:900px){
  .nx-drop{
    max-width: 100%;
    max-height: 70vh;
    overflow:auto;
  }
}

/* ================= DROPDOWN ALWAYS WORKS ================= */
/* Desktop hover */
@media (min-width: 901px){
  .nx-item:hover > .nx-drop{ 
    opacity:1; 
    transform:translateY(0);
    pointer-events:auto;
    display:block;
  }
}
/* Ensure hidden state is consistent */
.nx-item > .nx-drop{
  display:none;
}
@media (max-width: 900px){
  .nx-item.open > .nx-drop{
    display:block;
  }
}


/* ================= MOBILE RESPONSIVE FIX PACK (ALL PAGES) ================= */

/* Navbar + dropdown menu should fit on small mobiles */
@media (max-width:1024px){
  .nx-menu{
    max-height: 72vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nx-drop a{
    font-size:14px;
    line-height:1.35;
  }
}

/* Hero spacing + image sizing on mobile (safe defaults) */
@media (max-width:900px){
  .container{padding:0 14px;}
  .hero__inner{padding:18px 0 12px; gap:16px;}
  .hero h1{margin:8px 0 10px;}
  .hero__art .frame{max-height:260px;}
  .hero__art img{
    max-height:260px;
    object-fit:cover;
  }
}

/* Shares ticker: readable + slower */
.ticker:hover .ticker__row,
.ticker:focus-within .ticker__row{ animation-play-state:paused; }

/* Force slower marquee wherever ticker exists */

@media (max-width:640px){
  
  .tick{font-size:12.5px;}
  .tick .sym{font-size:12.5px;}
}

/* Live widget section: prevent overflow */
.psx-live{ padding:18px 0 34px; }
.psx-shell{
  width:100%;
  overflow:hidden;
  border-radius:16px;
}




/* ================= TICKER SPEED (MEDIUM SLOW) ================= */
.ticker__row{
  animation: marq 120s linear infinite;
}
@media (max-width:640px){
  .ticker__row{ animation-duration:150s; }
}
.ticker:hover .ticker__row,
.ticker:focus-within .ticker__row{ animation-play-state:paused; }