:root{
  --navy:#061a2f; --navy2:#0b2742; --gold:#c8952e; --gold2:#f2c76a;
  --ink:#09182a; --muted:#657386; --line:#e8edf3; --bg:#f7f9fc; --white:#fff;
  --shadow:0 20px 55px rgba(8,24,42,.10); --radius:18px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,'Noto Sans Thai',sans-serif;color:var(--ink);background:#fff;line-height:1.65} a{text-decoration:none;color:inherit} img{max-width:100%;display:block}.container{width:min(1180px,calc(100% - 44px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.nav-wrap{height:86px;display:flex;align-items:center;gap:28px}.brand img{width:230px}.nav{display:flex;align-items:center;gap:30px;margin-left:auto}.nav a{font-size:13px;font-weight:800;letter-spacing:.02em;position:relative}.nav a.active,.nav a:hover{color:var(--gold)}.nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;background:var(--gold)}.nav-actions{display:flex;gap:14px}.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;padding:11px 24px;font-size:13px;font-weight:900;letter-spacing:.02em;border:1px solid transparent;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#211404;box-shadow:0 10px 22px rgba(200,149,46,.22)}.btn-ghost,.btn-outline{border-color:rgba(200,149,46,.55);color:#9a6c16;background:#fff}.big{padding:14px 28px}.section-soft{background:radial-gradient(circle at 77% 40%,rgba(242,199,106,.22),transparent 22%),linear-gradient(180deg,#fff 0%,#f8fbff 100%)}.hero{padding:54px 0 44px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:45px;align-items:center}.eyebrow{margin:0 0 8px;color:var(--gold);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.hero h1{font-size:52px;line-height:1.16;margin:0 0 16px;letter-spacing:-.04em}.hero h1 span{color:var(--gold)}.lead{font-size:18px;color:#334155;max-width:620px;margin:0 0 28px}.feature-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0}.mini-feature{border-right:1px solid var(--line);padding-right:14px;min-height:108px}.mini-feature:last-child{border-right:0}.mini-feature i{width:42px;height:42px;border:2px solid var(--gold);border-radius:14px;display:grid;place-items:center;color:var(--gold);font-style:normal;font-weight:900;margin-bottom:11px}.mini-feature strong{font-size:12px;display:block;line-height:1.25}.mini-feature span{font-size:12px;color:var(--muted);display:block;margin-top:5px}.hero-actions{display:flex;gap:16px;flex-wrap:wrap}.hero-art{height:440px;border-radius:32px;position:relative;background:linear-gradient(120deg,rgba(255,255,255,.88),rgba(235,241,247,.72)),url('') ;overflow:hidden}.hero-art:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 0 35%,rgba(6,26,47,.05)),radial-gradient(circle at 40% 35%,rgba(6,26,47,.10),transparent 24%)}.hero-art:after{content:"";position:absolute;right:-40px;bottom:0;width:105%;height:55%;background:linear-gradient(160deg,transparent 35%,rgba(200,149,46,.28) 36%,transparent 40%),repeating-linear-gradient(90deg,rgba(6,26,47,.18) 0 2px,transparent 2px 34px);clip-path:polygon(0 70%,100% 0,100% 100%,0 100%)}.clock-face{position:absolute;right:90px;top:35px;width:280px;height:280px;border:5px solid rgba(200,149,46,.55);border-radius:50%;box-shadow:inset 0 0 0 14px rgba(200,149,46,.04),0 10px 60px rgba(200,149,46,.22)}.clock-face:before,.clock-face:after{content:"";position:absolute;left:50%;top:50%;height:4px;background:var(--gold);transform-origin:left;border-radius:8px}.clock-face:before{width:85px;transform:rotate(-135deg)}.clock-face:after{width:116px;transform:rotate(-28deg)}.clock-face span{position:absolute;left:50%;top:50%;width:18px;height:18px;background:var(--gold);border-radius:50%;transform:translate(-50%,-50%)}.chart-line{position:absolute;right:34px;bottom:120px;width:420px;height:150px;border-top:8px solid var(--gold);border-radius:100% 0 0 0;transform:rotate(-18deg)}.candles{position:absolute;right:55px;bottom:75px;display:flex;align-items:flex-end;gap:18px}.candles b{display:block;width:22px;background:linear-gradient(#fff,#d7dde5);border:1px solid #aab4c0;border-radius:2px;box-shadow:0 -25px 0 -10px rgba(6,26,47,.45)}.candles b:nth-child(1){height:54px}.candles b:nth-child(2){height:72px}.candles b:nth-child(3){height:92px}.candles b:nth-child(4){height:120px}.candles b:nth-child(5){height:148px}.candles b:nth-child(6){height:178px}.candles b:nth-child(7){height:215px}.stats{margin-top:-8px}.stats-card{background:linear-gradient(135deg,var(--navy),#031225);border-radius:10px;padding:28px 20px;color:#fff;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--shadow)}.stats-card div{text-align:center;border-right:1px solid rgba(255,255,255,.28)}.stats-card div:last-child{border-right:0}.stats-card strong{display:block;font-size:32px;line-height:1;color:var(--gold2);font-weight:900}.stats-card span{font-size:14px;font-weight:700}.market,.process,.brokers,.faq{padding:34px 0}.section-head h2{font-size:32px;line-height:1.25;margin:0 0 8px}.section-head p:not(.eyebrow){color:var(--muted);margin:0}.split{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.text-link{color:var(--gold);font-weight:900}.ea-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px}.ea-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(6,26,47,.08)}.ea-cover{height:130px;border-radius:8px;color:#fff;padding:24px 18px;position:relative;overflow:hidden;background:linear-gradient(135deg,#071b2f,#0c3355)}.ea-cover:after{content:"";position:absolute;inset:auto -20px -30px 20px;height:80px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 8px,transparent 8px 28px);transform:skewY(-12deg)}.ea-cover span{position:absolute;right:10px;top:9px;background:#20c160;color:#fff;border-radius:4px;padding:3px 7px;font-size:10px;font-weight:900}.ea-cover h3{font-size:28px;letter-spacing:.08em;margin:18px 0 0}.ea-cover small{color:#cbd5e1}.nexus,.zenith{background:linear-gradient(135deg,#16120c,#0a1018)}.atlas{background:linear-gradient(135deg,#061a2f,#17202d)}.ea-card h4{margin:14px 0 2px}.ea-card p{font-size:13px;color:var(--muted);margin:0 0 12px}.ea-meta{display:flex;justify-content:space-between;font-size:12px;margin:6px 0}.ea-meta span{color:#a56f09}.ea-meta strong{color:#15964f}.btn-card{width:100%;border-color:rgba(200,149,46,.45);color:#9a6c16;margin-top:10px;background:#fff}.dark-band{background:linear-gradient(135deg,var(--navy),#031225);border-radius:12px;color:#fff;padding:30px;display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:24px;align-items:center;box-shadow:var(--shadow)}.why-title h2{line-height:1.05;margin:0 0 10px}.why-title p,.why-item span{color:#d3deeb;font-size:13px;margin:0}.why-item{border-left:1px solid rgba(255,255,255,.18);padding-left:24px}.why-item i{font-style:normal;color:var(--gold2);font-size:32px}.why-item strong{display:block;color:var(--gold2);font-size:12px;margin:8px 0}.steps{display:grid;grid-template-columns:1fr 36px 1fr 36px 1fr 36px 1fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;box-shadow:0 10px 30px rgba(6,26,47,.06)}.step b{width:32px;height:32px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--navy);margin-bottom:12px}.step h3{margin:0 0 4px}.step p{margin:0;color:var(--muted);font-size:13px}.arrow{text-align:center;color:#9aa8b8;font-size:22px}.brokers{display:grid;grid-template-columns:.8fr 1.2fr;gap:24px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:26px;margin-top:20px}.broker-logos{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:25px;font-size:20px;font-weight:900;color:#1d2939}.broker-logos span:nth-child(1){color:#d21d1d}.broker-logos span:nth-child(3),.broker-logos span:nth-child(6){color:#20a650}.risk{background:linear-gradient(135deg,var(--navy),#031225);color:#fff;border-radius:10px;padding:22px 28px;display:flex;gap:18px;align-items:flex-start}.risk strong{color:var(--gold2);white-space:nowrap}.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}details{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:#fff}summary{cursor:pointer;font-weight:900}details p{margin:12px 0 0;color:var(--muted)}.footer{margin-top:40px;background:linear-gradient(135deg,var(--navy),#031225);color:#dce6f2;padding:42px 0 18px}.footer-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr 1.1fr;gap:45px}.footer-logo{width:210px;margin-bottom:12px}.footer h3{font-size:13px;color:#fff}.footer a{display:block;color:#dce6f2;margin:7px 0;font-size:14px}.footer .btn{display:inline-flex;color:#211404;margin-top:8px}.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.1);margin-top:28px;padding-top:18px;font-size:13px;color:#9eb0c3}.menu-btn{display:none;background:transparent;border:0;width:38px}.menu-btn span{display:block;height:2px;background:var(--ink);margin:7px 0}
@media(max-width:980px){.nav,.nav-actions{display:none}.menu-btn{display:block;margin-left:auto}.nav.open{display:flex;position:absolute;left:22px;right:22px;top:86px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;flex-direction:column;align-items:flex-start;box-shadow:var(--shadow)}.hero-grid,.brokers{grid-template-columns:1fr}.hero h1{font-size:40px}.feature-row,.ea-grid,.stats-card,.dark-band,.faq-grid,.footer-grid{grid-template-columns:1fr 1fr}.hero-art{height:330px}.dark-band{gap:18px}.why-title{grid-column:1/-1}.steps{grid-template-columns:1fr}.arrow{display:none}.broker-logos{justify-content:flex-start}}@media(max-width:640px){.container{width:min(100% - 28px,1180px)}.brand img{width:180px}.hero{padding-top:32px}.hero h1{font-size:34px}.lead{font-size:16px}.feature-row,.ea-grid,.stats-card,.dark-band,.faq-grid,.footer-grid{grid-template-columns:1fr}.stats-card div{border-right:0;border-bottom:1px solid rgba(255,255,255,.18);padding:14px 0}.stats-card div:last-child{border-bottom:0}.hero-art{display:none}.risk{display:block}.risk strong{display:block;margin-bottom:8px}.split{display:block}.nav-wrap{height:74px}.nav.open{top:74px}}

/* Premium VELAEA Time Intro */
body.loading{overflow:hidden}
.preloader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#061a2f;color:#fff;transition:opacity .7s ease,visibility .7s ease;overflow:hidden}
.preloader-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,rgba(242,199,106,.22),transparent 28%),radial-gradient(circle at 70% 70%,rgba(255,255,255,.08),transparent 25%),linear-gradient(135deg,#031225,#061a2f 55%,#0b2742);opacity:1}
.preloader:before{content:"";position:absolute;inset:-25%;background:conic-gradient(from 180deg,transparent,rgba(242,199,106,.16),transparent 34%,rgba(255,255,255,.08),transparent 70%);animation:introSweep 2.6s ease-in-out forwards}
.preloader.hide{opacity:0;visibility:hidden;pointer-events:none}.preloader-content{position:relative;text-align:center;display:grid;justify-items:center;gap:14px;transform:translateY(8px);animation:introRise 1.25s ease forwards}.intro-logo{width:min(360px,78vw);filter:drop-shadow(0 18px 38px rgba(0,0,0,.32));opacity:0;animation:logoFade .9s ease .9s forwards}.intro-mark{width:210px;height:170px;position:relative;filter:drop-shadow(0 18px 32px rgba(200,149,46,.22))}.intro-clock{position:absolute;left:34px;top:0;width:142px;height:142px;border:7px solid var(--gold2);border-right-color:transparent;border-bottom-color:var(--gold);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}.intro-clock .tick{position:absolute;width:5px;height:18px;background:var(--gold2);border-radius:3px;left:50%;top:10px;transform-origin:50% 61px}.intro-clock .t1{transform:translateX(-50%) rotate(0deg)}.intro-clock .t2{transform:translateX(-50%) rotate(45deg)}.intro-clock .t3{transform:translateX(-50%) rotate(90deg)}.intro-clock .t4{transform:translateX(-50%) rotate(-45deg)}.hand{position:absolute;left:50%;top:50%;height:6px;background:linear-gradient(90deg,var(--gold2),var(--gold));border-radius:10px;transform-origin:left center;box-shadow:0 0 16px rgba(242,199,106,.35)}.hand-hour{width:55px;animation:hourSpin 2.15s cubic-bezier(.19,1,.22,1) forwards}.hand-minute{width:78px;animation:minuteSpin 2.15s cubic-bezier(.19,1,.22,1) forwards}.clock-dot{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;background:var(--gold2);transform:translate(-50%,-50%);box-shadow:0 0 22px rgba(242,199,106,.75)}.intro-swoosh{position:absolute;left:12px;top:78px;width:174px;height:58px;border-top:8px solid var(--gold2);border-radius:100% 0 0 0;transform:rotate(-17deg);opacity:0;animation:swooshIn .75s ease .45s forwards}.intro-arrow{position:absolute;right:7px;top:62px;width:0;height:0;border-left:28px solid var(--gold2);border-top:15px solid transparent;border-bottom:15px solid transparent;transform:rotate(-42deg) scale(.6);opacity:0;animation:arrowFly .75s ease .62s forwards}.intro-candles{position:absolute;right:34px;bottom:17px;display:flex;align-items:flex-end;gap:8px}.intro-candles i{display:block;width:13px;background:linear-gradient(#fff,#d8dde5);border:1px solid rgba(6,26,47,.35);border-radius:2px;transform:scaleY(0);transform-origin:bottom;position:relative}.intro-candles i:before{content:"";position:absolute;left:50%;top:-15px;width:2px;height:calc(100% + 28px);background:#d9dee7;transform:translateX(-50%);z-index:-1}.intro-candles i:nth-child(1){height:28px;animation:candleGrow .45s ease .65s forwards}.intro-candles i:nth-child(2){height:42px;animation:candleGrow .45s ease .78s forwards}.intro-candles i:nth-child(3){height:58px;animation:candleGrow .45s ease .91s forwards}.intro-candles i:nth-child(4){height:76px;animation:candleGrow .45s ease 1.04s forwards}.intro-candles i:nth-child(5){height:94px;animation:candleGrow .45s ease 1.17s forwards}.intro-line{margin:2px 0 0;color:var(--gold2);font-weight:900;letter-spacing:.22em;font-size:13px;opacity:0;animation:textIn .55s ease 1.25s forwards}.intro-sub{margin:0;color:#dce6f2;font-weight:700;letter-spacing:.06em;opacity:0;animation:textIn .55s ease 1.45s forwards}@keyframes introSweep{0%{transform:rotate(0deg) scale(.9);opacity:.2}100%{transform:rotate(180deg) scale(1.15);opacity:1}}@keyframes introRise{from{transform:translateY(18px);opacity:.6}to{transform:translateY(0);opacity:1}}@keyframes logoFade{to{opacity:1}}@keyframes hourSpin{0%{transform:rotate(-130deg)}72%{transform:rotate(585deg)}100%{transform:rotate(220deg)}}@keyframes minuteSpin{0%{transform:rotate(-35deg)}72%{transform:rotate(1085deg)}100%{transform:rotate(332deg)}}@keyframes swooshIn{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}@keyframes arrowFly{from{opacity:0;transform:translate(-28px,28px) rotate(-42deg) scale(.4)}to{opacity:1;transform:translate(0,0) rotate(-42deg) scale(1)}}@keyframes candleGrow{to{transform:scaleY(1)}}@keyframes textIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.intro-mark{width:180px;height:150px;transform:scale(.9)}.intro-line{font-size:11px;letter-spacing:.14em}.intro-sub{font-size:13px}.intro-logo{width:min(300px,78vw)}}
@media(prefers-reduced-motion:reduce){.preloader{display:none}body.loading{overflow:auto}}


/* Premium blended Hero artwork - VELAEA final */
.section-soft{
  background:
    radial-gradient(circle at 75% 34%, rgba(242,199,106,.16), transparent 28%),
    radial-gradient(circle at 92% 62%, rgba(6,26,47,.06), transparent 22%),
    linear-gradient(180deg,#fff 0%,#fbfdff 48%,#f8fbff 100%);
}
.hero{padding:46px 0 36px; position:relative;}
.hero-grid{grid-template-columns:1.02fr 1.08fr; gap:22px; align-items:center;}
.hero-copy{position:relative; z-index:2;}
.hero-art-image{
  height:465px;
  border-radius:0;
  position:relative;
  overflow:visible;
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  pointer-events:none;
  isolation:isolate;
}
.hero-art-image::before{
 content:'';
 position:absolute;

 width:500px;
 height:500px;

 background:
 radial-gradient(
 circle,
 rgba(242,199,106,.12),
 transparent 70%
 );
}
.hero-art-image::after{display:none!important;content:none!important;}
.hero-art-image img{
  width:118%;
  height:118%;
  max-width:none;
  object-fit:contain;
  object-position:center right;
  display:block;
  opacity:.58;
  mix-blend-mode:normal;
  filter:brightness(1.13) contrast(.94) saturate(.92);
  transform:translateX(-4%) scale(1.03);
  -webkit-mask-image:radial-gradient(ellipse at 58% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 52%, rgba(0,0,0,.62) 75%, rgba(0,0,0,.18) 91%, transparent 100%);
  mask-image:radial-gradient(ellipse at 58% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,.96) 52%, rgba(0,0,0,.62) 75%, rgba(0,0,0,.18) 91%, transparent 100%);
}
.hero-art-image .clock-face,
.hero-art-image .chart-line,
.hero-art-image .candles{display:none!important;}
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:120px;
  background:linear-gradient(180deg, rgba(255,255,255,0), #fff 78%);
  pointer-events:none;
}
.stats{position:relative; z-index:3; margin-top:-2px;}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:8px;}
  .hero-art-image{height:360px; margin-top:-18px;}
  .hero-art-image img{width:112%; height:112%; transform:translateX(-2%) scale(1.02); opacity:.46; object-position:center;}
}
@media(max-width:640px){
  .hero-art-image{display:block;height:260px;border-radius:0;margin-top:0;}
  .hero-art-image img{width:118%;height:118%;opacity:.38;transform:translateX(-9%) scale(1.02);}
}


/* === VELAEA FINAL HEADER + HERO POLISH === */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.nav-wrap{
  height:72px;
}
.brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  overflow:hidden;
}
.brand img{
  width:165px;
  height:auto;
  object-fit:contain;
  max-height:58px;
}
.hero-art-image{
  height:440px;
  border-radius:0;
  position:relative;
  overflow:visible;
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
  isolation:isolate;
}
.hero-art-image::before,
.hero-art-image::after{
  display:none!important;
  content:none!important;
}
.hero-art-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:.42;
  mix-blend-mode:normal;
  filter:brightness(1.12) contrast(.92) saturate(.92);
  transform:scale(1.08);
  -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 52%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.42) 84%, transparent 100%);
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 52%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.42) 84%, transparent 100%);
}
@media(max-width:980px){
  .nav-wrap{height:72px;}
  .nav.open{top:72px;}
  .brand img{width:155px;max-height:54px;}
  .hero-art-image{height:360px;}
}
@media(max-width:640px){
  .brand img{width:145px;max-height:50px;}
  .nav-wrap{height:68px;}
  .nav.open{top:68px;}
  .hero-art-image{display:block;height:260px;border-radius:0;margin-top:10px;}
  .hero-art-image img{opacity:.36;transform:scale(1.04);}
}


/* VELAEA Fintech Pro Final Adjustments */
.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.brand img{
  width:205px;
  height:auto;
  object-fit:contain;
}
.nav-wrap{
  height:76px;
}
.site-header{
  z-index:1000;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
}
.hero-art-image{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible;
}
.hero-art-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:.66;
  mix-blend-mode:normal;
  filter:brightness(1.03) contrast(1.09) saturate(1.08);
  transform:scale(1.08);
  -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 56%, rgba(0,0,0,.9) 72%, rgba(0,0,0,.45) 88%, transparent 100%);
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 56%, rgba(0,0,0,.9) 72%, rgba(0,0,0,.45) 88%, transparent 100%);
}
.preloader{display:none!important;}
body.loading{overflow:auto!important;}
@media(max-width:980px){
  .brand img{width:185px;}
  .nav-wrap{height:72px;}
  .nav.open{top:72px;}
  .hero-art-image img{opacity:.6;transform:scale(1.03);}
}
@media(max-width:640px){
  .brand img{width:160px;}
  .nav-wrap{height:68px;}
  .nav.open{top:68px;}
  .hero-art-image{height:270px;}
  .hero-art-image img{opacity:.58;transform:scale(1.02);}
}

/* VELAEA Final User Request */
 .brand img{
  width:220px !important;
  max-height:none !important;
}
@media(max-width:980px){
  .brand img{width:200px !important;}
}
@media(max-width:640px){
  .brand img{width:170px !important;}
}



/* =========================================================
   VELAEA FINAL FIX PACK
   - Header logo fixed: cropped asset + correct sizing
   - Prevent logo overflow
   - Keep premium Fintech hero blending
   ========================================================= */

.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:1000 !important;
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  border-bottom:1px solid var(--line) !important;
}

.nav-wrap{
  height:76px !important;
  display:flex !important;
  align-items:center !important;
  overflow:visible !important;
}

.brand{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  height:76px !important;
  flex:0 0 auto !important;
  overflow:visible !important;
}

.brand img{
  width:205px !important;
  height:auto !important;
  max-height:68px !important;
  object-fit:contain !important;
  object-position:left center !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}

.footer-logo{
  width:210px !important;
  max-height:none !important;
}

/* Hero image: slightly stronger, smooth, no hard box */
.hero-art-image{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.hero-art-image::before,
.hero-art-image::after{
  display:none !important;
  content:none !important;
}

.hero-art-image img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  opacity:.66 !important;
  mix-blend-mode:normal !important;
  filter:brightness(1.03) contrast(1.08) saturate(1.06) !important;
  transform:scale(1.08) !important;
  -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 56%, rgba(0,0,0,.9) 72%, rgba(0,0,0,.45) 88%, transparent 100%) !important;
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 56%, rgba(0,0,0,.9) 72%, rgba(0,0,0,.45) 88%, transparent 100%) !important;
}

/* Remove preloader if old CSS remains */
.preloader{display:none !important;}
body.loading{overflow:auto !important;}

@media(max-width:980px){
  .nav-wrap{height:72px !important;}
  .nav.open{top:72px !important;}
  .brand{height:72px !important;}
  .brand img{
    width:185px !important;
    max-height:62px !important;
  }
}

@media(max-width:640px){
  .nav-wrap{height:68px !important;}
  .nav.open{top:68px !important;}
  .brand{height:68px !important;}
  .brand img{
    width:155px !important;
    max-height:56px !important;
  }
}



/* =========================================================
   VELAEA TWO THEME FINAL + DARK HERO IMAGE
   ========================================================= */

.theme-toggle{
  border:1px solid rgba(200,149,46,.38);
  background:rgba(255,255,255,.76);
  color:var(--ink);
  height:42px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(6,26,47,.06);
  transition:.2s ease;
}
.theme-toggle:hover{transform:translateY(-1px);border-color:rgba(200,149,46,.72);}
.theme-toggle-mobile{display:none;margin-left:auto;width:42px;padding:0;}
.theme-icon{font-size:15px;line-height:1}
.theme-text{font-size:11px}

.hero-img-dark{display:none!important;}
.hero-img-light{display:block!important;}
body.dark-mode .hero-img-light{display:none!important;}
body.dark-mode .hero-img-dark{display:block!important;}

.brand img{
  width:195px!important;
  height:auto!important;
  max-height:62px!important;
  object-fit:contain!important;
}

.hero-art-image img{
  opacity:.66!important;
  filter:brightness(1.03) contrast(1.08) saturate(1.06)!important;
}

body.dark-mode{
  background:#07111f;
  color:#f5f7fa;
}
body.dark-mode .site-header{
  background:rgba(7,17,31,.90)!important;
  border-bottom-color:rgba(242,199,106,.16)!important;
}
body.dark-mode .nav a,
body.dark-mode .menu-btn span{color:#eef4fb;}
body.dark-mode .nav a.active,
body.dark-mode .nav a:hover{color:var(--gold2);}
body.dark-mode .section-soft{
  background:
    radial-gradient(circle at 76% 34%, rgba(242,199,106,.18), transparent 28%),
    radial-gradient(circle at 90% 62%, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(180deg,#07111f 0%,#091827 48%,#07111f 100%)!important;
}
body.dark-mode .hero h1,
body.dark-mode .section-head h2,
body.dark-mode .brokers h2,
body.dark-mode .ea-card h4,
body.dark-mode .step h3,
body.dark-mode summary{color:#f7fbff;}
body.dark-mode .hero h1 span,
body.dark-mode .eyebrow,
body.dark-mode .text-link{color:var(--gold2);}
body.dark-mode .lead,
body.dark-mode .section-head p:not(.eyebrow),
body.dark-mode .brokers p,
body.dark-mode .mini-feature span,
body.dark-mode .ea-card p,
body.dark-mode .step p,
body.dark-mode details p{color:#9fb0c3;}
body.dark-mode .mini-feature{border-right-color:rgba(255,255,255,.1);}
body.dark-mode .mini-feature i{
  background:rgba(242,199,106,.08);
  border-color:rgba(242,199,106,.65);
  color:var(--gold2);
}
body.dark-mode .btn-ghost,
body.dark-mode .btn-outline{
  background:rgba(255,255,255,.04);
  color:var(--gold2);
  border-color:rgba(242,199,106,.45);
}
body.dark-mode .theme-toggle{
  background:rgba(255,255,255,.06);
  color:#f7fbff;
  border-color:rgba(242,199,106,.35);
}
body.dark-mode .stats-card,
body.dark-mode .dark-band,
body.dark-mode .risk,
body.dark-mode .footer{
  background:linear-gradient(135deg,#07111f,#020914)!important;
  border:1px solid rgba(242,199,106,.12);
}
body.dark-mode .ea-card,
body.dark-mode .steps,
body.dark-mode .brokers,
body.dark-mode details{
  background:#0d1b2a!important;
  border-color:#1b3149!important;
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}
body.dark-mode .ea-cover{background:linear-gradient(135deg,#061a2f,#102a43)!important;}
body.dark-mode .ea-meta span{color:#d7a84b;}
body.dark-mode .broker-logos{color:#eef4fb;}
body.dark-mode .hero-art-image{filter:drop-shadow(0 34px 70px rgba(0,0,0,.28));}
body.dark-mode .hero-art-image img{
  opacity:.92!important;
  filter:brightness(1.06) contrast(1.05) saturate(1.08)!important;
  transform:scale(1.08)!important;
}
body.dark-mode .footer a,
body.dark-mode .footer p,
body.dark-mode .copyright{color:#aebdd0;}
body.dark-mode .nav.open{
  background:#0d1b2a!important;
  border-color:#1b3149!important;
}
body.dark-mode *::selection{background:rgba(242,199,106,.3);}

.nav-wrap{height:76px!important;}
.brand{
  height:76px!important;
  display:flex!important;
  align-items:center!important;
  overflow:visible!important;
}
.preloader{display:none!important;}
body.loading{overflow:auto!important;}

@media(max-width:980px){
  .theme-toggle-mobile{display:inline-flex;}
  .nav-actions .theme-toggle{display:none;}
  .brand img{width:175px!important;max-height:56px!important;}
  .nav-wrap{height:72px!important;}
  .brand{height:72px!important;}
  .nav.open{top:72px!important;}
}
@media(max-width:640px){
  .theme-toggle-mobile{width:38px;height:38px;}
  .brand img{width:150px!important;max-height:50px!important;}
  .nav-wrap{height:68px!important;}
  .brand{height:68px!important;}
  .nav.open{top:68px!important;}
}



/* =========================================================
   VELAEA FINAL PREMIUM DARK THEME SMOOTH BLEND
   Added last to override previous duplicated CSS blocks.
   ========================================================= */

:root{
  --dark-bg:#020814;
  --dark-bg2:#04101d;
  --dark-card:#0b1828;
  --dark-card2:#0f2033;
  --dark-line:rgba(242,199,106,.14);
  --dark-text:#f7fbff;
  --dark-muted:#9fb0c3;
}

/* Stable header + logo */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  border-bottom:1px solid var(--line)!important;
}
.nav-wrap{
  height:76px!important;
  display:flex!important;
  align-items:center!important;
}
.brand{
  height:76px!important;
  display:flex!important;
  align-items:center!important;
  overflow:visible!important;
  flex:0 0 auto!important;
}
.brand img{
  width:195px!important;
  height:auto!important;
  max-height:62px!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
}

/* Theme button polish */
.theme-toggle{
  border:1px solid rgba(200,149,46,.38)!important;
  background:rgba(255,255,255,.76)!important;
  color:var(--ink)!important;
  height:42px!important;
  padding:0 14px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  cursor:pointer!important;
  box-shadow:0 10px 25px rgba(6,26,47,.06)!important;
  transition:.2s ease!important;
}
.theme-toggle:hover{
  transform:translateY(-1px);
  border-color:rgba(200,149,46,.72)!important;
}
.theme-toggle-mobile{
  display:none!important;
  margin-left:auto!important;
  width:42px!important;
  padding:0!important;
}

/* Light/Dark hero image switch */
.hero-img-dark{display:none!important;}
.hero-img-light{display:block!important;}
body.dark-mode .hero-img-light{display:none!important;}
body.dark-mode .hero-img-dark{display:block!important;}

/* Light hero */
.hero-art-image{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.hero-art-image img{
  opacity:.64!important;
  filter:brightness(1.03) contrast(1.06) saturate(1.04)!important;
  transform:scale(1.06)!important;
  -webkit-mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 52%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.42) 84%, transparent 100%)!important;
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,1) 52%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.42) 84%, transparent 100%)!important;
}

/* Dark foundation */
body.dark-mode{
  background:var(--dark-bg)!important;
  color:var(--dark-text)!important;
}
body.dark-mode .site-header{
  background:rgba(2,8,20,.88)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  border-bottom-color:rgba(242,199,106,.13)!important;
}
body.dark-mode .section-soft{
  background:
    radial-gradient(circle at 78% 30%, rgba(242,199,106,.10), transparent 22%),
    radial-gradient(circle at 85% 60%, rgba(255,255,255,.025), transparent 30%),
    linear-gradient(180deg,#020814 0%,#04101d 42%,#07111f 100%)!important;
}
body.dark-mode .hero{
  background:transparent!important;
  overflow:hidden!important;
}
body.dark-mode .hero::after{
  background:linear-gradient(180deg, rgba(2,8,20,0), #020814 82%)!important;
}

/* Dark hero smooth integration */
body.dark-mode .hero-art-image{
  filter:drop-shadow(0 34px 70px rgba(0,0,0,.20))!important;
}
body.dark-mode .hero-art-image::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  background:
    radial-gradient(circle at 56% 42%, rgba(242,199,106,.16), transparent 35%),
    radial-gradient(circle at 78% 58%, rgba(242,199,106,.06), transparent 38%)!important;
  filter:blur(72px)!important;
  pointer-events:none!important;
}
body.dark-mode .hero-art-image::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-1px!important;
  z-index:2!important;
  background:
    radial-gradient(circle at center, transparent 42%, rgba(2,8,20,.16) 68%, rgba(2,8,20,.58) 100%),
    linear-gradient(90deg, rgba(2,8,20,.18) 0%, transparent 20%, transparent 74%, rgba(2,8,20,.35) 100%)!important;
  pointer-events:none!important;
}
body.dark-mode .hero-art-image img{
  opacity:.78!important;
  filter:brightness(.95) contrast(1.08) saturate(.96)!important;
  transform:scale(1.10)!important;
  -webkit-mask-image:
    radial-gradient(ellipse at center,
      rgba(0,0,0,1) 40%,
      rgba(0,0,0,.82) 64%,
      rgba(0,0,0,.35) 84%,
      transparent 100%)!important;
  mask-image:
    radial-gradient(ellipse at center,
      rgba(0,0,0,1) 40%,
      rgba(0,0,0,.82) 64%,
      rgba(0,0,0,.35) 84%,
      transparent 100%)!important;
}

/* Dark text + sections */
body.dark-mode .nav a,
body.dark-mode .menu-btn span{color:#eef4fb!important;}
body.dark-mode .nav a.active,
body.dark-mode .nav a:hover,
body.dark-mode .hero h1 span,
body.dark-mode .eyebrow,
body.dark-mode .text-link{color:var(--gold2)!important;}

body.dark-mode .hero h1,
body.dark-mode .section-head h2,
body.dark-mode .brokers h2,
body.dark-mode .ea-card h4,
body.dark-mode .step h3,
body.dark-mode summary{color:var(--dark-text)!important;}

body.dark-mode .lead,
body.dark-mode .section-head p:not(.eyebrow),
body.dark-mode .brokers p,
body.dark-mode .mini-feature span,
body.dark-mode .ea-card p,
body.dark-mode .step p,
body.dark-mode details p{
  color:var(--dark-muted)!important;
}

body.dark-mode .mini-feature{border-right-color:rgba(255,255,255,.10)!important;}
body.dark-mode .mini-feature i{
  background:rgba(242,199,106,.08)!important;
  border-color:rgba(242,199,106,.65)!important;
  color:var(--gold2)!important;
}

body.dark-mode .btn-ghost,
body.dark-mode .btn-outline{
  background:rgba(255,255,255,.035)!important;
  color:var(--gold2)!important;
  border-color:rgba(242,199,106,.45)!important;
}
body.dark-mode .theme-toggle{
  background:rgba(255,255,255,.055)!important;
  color:#f7fbff!important;
  border-color:rgba(242,199,106,.36)!important;
}

/* Dark cards */
body.dark-mode .stats-card,
body.dark-mode .dark-band,
body.dark-mode .risk,
body.dark-mode .footer{
  background:linear-gradient(135deg,#07111f,#020914)!important;
  border:1px solid rgba(242,199,106,.12)!important;
  box-shadow:0 24px 65px rgba(0,0,0,.28)!important;
}
body.dark-mode .ea-card,
body.dark-mode .steps,
body.dark-mode .brokers,
body.dark-mode details{
  background:linear-gradient(180deg,var(--dark-card),#081421)!important;
  border-color:#1b3149!important;
  box-shadow:0 18px 45px rgba(0,0,0,.25)!important;
}
body.dark-mode .ea-cover{
  background:linear-gradient(135deg,#061a2f,#102a43)!important;
}
body.dark-mode .ea-meta span{color:#d7a84b!important;}
body.dark-mode .broker-logos{color:#eef4fb!important;}
body.dark-mode .footer a,
body.dark-mode .footer p,
body.dark-mode .copyright{color:#aebdd0!important;}
body.dark-mode .nav.open{
  background:#0d1b2a!important;
  border-color:#1b3149!important;
}
body.dark-mode *::selection{background:rgba(242,199,106,.30)!important;}

/* Remove old preloader leftovers */
.preloader{display:none!important;}
body.loading{overflow:auto!important;}

@media(max-width:980px){
  .theme-toggle-mobile{display:inline-flex!important;}
  .nav-actions .theme-toggle{display:none!important;}
  .brand img{width:175px!important;max-height:56px!important;}
  .nav-wrap{height:72px!important;}
  .brand{height:72px!important;}
  .nav.open{top:72px!important;}
  body.dark-mode .hero-art-image img{
    opacity:.62!important;
    transform:scale(1.03)!important;
  }
}
@media(max-width:640px){
  .theme-toggle-mobile{width:38px!important;height:38px!important;}
  .brand img{width:150px!important;max-height:50px!important;}
  .nav-wrap{height:68px!important;}
  .brand{height:68px!important;}
  .nav.open{top:68px!important;}
  .hero-art-image{height:270px!important;}
  body.dark-mode .hero-art-image img{
    opacity:.54!important;
    transform:scale(1.02)!important;
  }
}


/* =========================================================
   VELAEA CENTER - FINAL DARK HERO FIX (NO LEFT EDGE LINE)
   ใช้บล็อกนี้เป็นตัวคุมสุดท้าย
   - แก้แถบดำแนวตั้งฝั่งภูเขา
   - ลบ mask/overlay หนักที่ทำให้ภาพแหว่ง
   - ใช้ภาพ Dark Hero แบบคมชัด พร้อม glow เบา ๆ
   ========================================================= */

:root{
  --velaea-final-dark:#020814;
  --velaea-final-dark-2:#06111f;
  --velaea-final-gold-glow:rgba(242,199,106,.13);
}

/* Header balance */
.site-header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border-bottom:1px solid rgba(232,237,243,.9)!important;
}

body.dark-mode .site-header{
  background:rgba(2,8,20,.92)!important;
  border-bottom-color:rgba(242,199,106,.16)!important;
}

.nav-wrap{
  height:76px!important;
  display:flex!important;
  align-items:center!important;
}

.brand{
  height:76px!important;
  display:flex!important;
  align-items:center!important;
  overflow:visible!important;
  flex:0 0 auto!important;
}

.brand img{
  width:220px!important;
  height:auto!important;
  max-height:68px!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
}

/* Hero layout */
.hero{
  padding:48px 0 38px!important;
  position:relative!important;
  overflow:hidden!important;
}

.hero-grid{
  grid-template-columns:1fr 1.12fr!important;
  gap:22px!important;
  align-items:center!important;
}

.hero-copy{
  position:relative!important;
  z-index:6!important;
}

.hero-art-image{
  height:470px!important;
  position:relative!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  isolation:isolate!important;
  pointer-events:none!important;
}

.hero-art-image .clock-face,
.hero-art-image .chart-line,
.hero-art-image .candles{
  display:none!important;
}

/* Theme image switching */
.hero-img-light{
  display:block!important;
}

.hero-img-dark{
  display:none!important;
}

body.dark-mode .hero-img-light{
  display:none!important;
}

body.dark-mode .hero-img-dark{
  display:block!important;
}

/* Light hero image */
.hero-img-light{
  width:100%!important;
  height:100%!important;
  opacity:.68!important;
  filter:brightness(1.02) contrast(1.04) saturate(1.02)!important;
  transform:scale(1.035)!important;
  object-fit:contain!important;
  object-position:center!important;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 56%,rgba(0,0,0,.72) 78%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse at center,#000 56%,rgba(0,0,0,.72) 78%,transparent 100%)!important;
}

/* Dark theme base */
body.dark-mode{
  background:var(--velaea-final-dark)!important;
  color:#f7fbff!important;
}

body.dark-mode .section-soft{
  background:
    radial-gradient(circle at 75% 32%, rgba(242,199,106,.10), transparent 25%),
    radial-gradient(circle at 28% 42%, rgba(255,255,255,.025), transparent 32%),
    linear-gradient(180deg,#020814 0%,#06111f 48%,#020814 100%)!important;
}

/* Remove every old over-processed mask/edge filter */
body.dark-mode .hero-art-image{
  filter:none!important;
}

/* Soft glow only behind artwork */
body.dark-mode .hero-art-image::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:38px 34px 44px 34px!important;
  background:
    radial-gradient(circle at 58% 45%, var(--velaea-final-gold-glow), transparent 68%),
    radial-gradient(circle at 32% 52%, rgba(255,255,255,.026), transparent 62%)!important;
  filter:blur(60px)!important;
  opacity:.68!important;
  pointer-events:none!important;
}

/* Final edge blend: radial only, no vertical left stripe */
body.dark-mode .hero-art-image::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(
      ellipse at center,
      transparent 58%,
      rgba(2,8,20,.10) 82%,
      rgba(2,8,20,.34) 100%
    )!important;
}

/* Dark artwork: no mask, no left translate */
body.dark-mode .hero-img-dark{
  width:100%!important;
  height:100%!important;
  display:block!important;
  opacity:.96!important;
  filter:brightness(.98) contrast(1.045) saturate(1.02)!important;
  transform:scale(1.04)!important;
  object-fit:contain!important;
  object-position:center!important;
  mix-blend-mode:normal!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  -webkit-mask-composite:initial!important;
  mask-composite:initial!important;
}

/* Smooth hero bottom transition */
body.dark-mode .hero::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:118px!important;
  background:linear-gradient(180deg,rgba(2,8,20,0),#020814 82%)!important;
  pointer-events:none!important;
}

body.dark-mode .stats{
  position:relative!important;
  z-index:7!important;
  margin-top:0!important;
}

body.dark-mode .stats-card{
  background:linear-gradient(135deg,rgba(7,17,31,.96),rgba(2,9,20,.98))!important;
  border:1px solid rgba(242,199,106,.16)!important;
  box-shadow:0 24px 65px rgba(0,0,0,.32)!important;
}

/* Dark UI card polish */
body.dark-mode .ea-card,
body.dark-mode .steps,
body.dark-mode .brokers,
body.dark-mode details{
  background:linear-gradient(180deg,#0b1828,#071321)!important;
  border-color:rgba(242,199,106,.13)!important;
}

body.dark-mode .btn-ghost,
body.dark-mode .btn-outline{
  background:rgba(255,255,255,.035)!important;
  color:var(--gold2)!important;
  border-color:rgba(242,199,106,.45)!important;
}

body.dark-mode .theme-toggle{
  background:rgba(255,255,255,.055)!important;
  color:#f7fbff!important;
  border-color:rgba(242,199,106,.36)!important;
}

/* Responsive */
@media(max-width:980px){
  .brand img{
    width:185px!important;
    max-height:58px!important;
  }

  .nav-wrap,
  .brand{
    height:72px!important;
  }

  .nav.open{
    top:72px!important;
  }

  .hero-grid{
    grid-template-columns:1fr!important;
  }

  .hero-art-image{
    height:360px!important;
    margin-top:-14px!important;
  }

  body.dark-mode .hero-img-dark{
    opacity:.72!important;
    transform:scale(1.02)!important;
  }

  body.dark-mode .hero-art-image::after{
    background:
      radial-gradient(ellipse at center, transparent 56%, rgba(2,8,20,.12) 82%, rgba(2,8,20,.36) 100%)!important;
  }
}

@media(max-width:640px){
  .brand img{
    width:155px!important;
    max-height:50px!important;
  }

  .nav-wrap,
  .brand{
    height:68px!important;
  }

  .nav.open{
    top:68px!important;
  }

  .hero-art-image{
    display:block!important;
    height:270px!important;
    margin-top:2px!important;
  }

  body.dark-mode .hero-img-dark{
    opacity:.58!important;
    transform:scale(1.01)!important;
  }
}


/* =========================================================
   VELAEA CENTER - Policy & Business Launch Content Refresh
   ========================================================= */
.velaea-policy-hero .lead{max-width:690px}.policy-tagline{display:inline-flex;align-items:center;gap:8px;margin:2px 0 20px;padding:9px 13px;border:1px solid rgba(200,149,46,.22);border-radius:999px;background:rgba(242,199,106,.08);color:#9a6c16;font-size:12px;font-weight:950;letter-spacing:.04em}.policy-feature-row{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:22px}.policy-pillar-strip .stats-card strong{font-size:20px;letter-spacing:-.02em}.policy-section{padding:42px 0}.policy-card{border:1px solid var(--line);border-radius:18px;padding:24px;background:#fff;box-shadow:0 12px 34px rgba(6,26,47,.06)}.policy-card h2,.developer-panel h2,.role-card h2{margin:0 0 12px;font-size:30px;line-height:1.22;letter-spacing:-.03em;color:var(--navy)}.policy-card p,.developer-panel p,.role-card p{margin:0 0 12px;color:#42526a;font-weight:650}.policy-card p:last-child,.developer-panel p:last-child,.role-card p:last-child{margin-bottom:0}.policy-card-large{padding:28px;font-size:15px}.policy-grid{display:grid;gap:20px}.policy-grid.two{grid-template-columns:1fr 1fr}.warning-card{background:linear-gradient(180deg,rgba(242,199,106,.08),rgba(255,255,255,.96));border-color:rgba(200,149,46,.22)}.policy-dark-band{grid-template-columns:1.25fr repeat(4,1fr)}.criteria-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 16px}.criteria-grid div,.risk-grid span,.services-grid div,.role-grid span,.free-list span{border:1px solid rgba(200,149,46,.18);border-radius:15px;padding:13px 14px;background:rgba(242,199,106,.065);color:#1d2939;font-weight:900;font-size:13px}.policy-note{background:linear-gradient(135deg,#fff,rgba(242,199,106,.08))}.standard-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0 16px}.standard-list div{display:flex;align-items:flex-start;gap:10px;min-height:54px;padding:14px 15px;border:1px solid var(--line);border-radius:15px;background:#fff;box-shadow:0 10px 28px rgba(6,26,47,.045)}.standard-list b{width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto;border-radius:999px;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#1d1205;font-size:12px;font-weight:950}.standard-list span{color:#334155;font-weight:850;line-height:1.5}.policy-bullets{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}.policy-bullets li{position:relative;padding-left:24px;color:#42526a;font-weight:750}.policy-bullets li:before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:950}.three-steps{grid-template-columns:1fr 36px 1fr 36px 1fr}.risk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 18px}.policy-risk-block{margin-top:0}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}.services-grid div{min-height:94px;display:grid;align-content:start;gap:4px;background:#fff}.services-grid b{color:var(--navy);font-size:14px}.services-grid span{color:var(--muted);font-size:12px;font-weight:800}.free-card{background:radial-gradient(circle at 84% 10%,rgba(242,199,106,.16),transparent 36%),linear-gradient(135deg,#fff,rgba(248,251,255,.95))}.free-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.small-note{margin-top:14px!important;color:var(--muted)!important;font-size:12px}.developer-panel{padding:32px;border-radius:22px;border:1px solid rgba(242,199,106,.18);background:radial-gradient(circle at 88% 12%,rgba(242,199,106,.16),transparent 34%),linear-gradient(135deg,var(--navy),#031225);color:#fff;box-shadow:var(--shadow)}.developer-panel h2,.developer-panel p{color:#fff}.developer-panel p{color:#d3deeb;max-width:900px}.role-card{padding:30px;border-radius:22px;border:1px solid rgba(242,199,106,.20);background:radial-gradient(circle at 18% 0,rgba(242,199,106,.13),transparent 36%),linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 14px 40px rgba(6,26,47,.08)}.role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.role-grid span{background:rgba(255,255,255,.78)}body.dark-mode .policy-tagline{background:rgba(242,199,106,.10);color:var(--gold2);border-color:rgba(242,199,106,.24)}body.dark-mode .policy-card,body.dark-mode .standard-list div,body.dark-mode .services-grid div,body.dark-mode .role-card{background:linear-gradient(180deg,#0b1828,#071321)!important;border-color:rgba(242,199,106,.13)!important;box-shadow:0 18px 45px rgba(0,0,0,.24)!important}body.dark-mode .warning-card,body.dark-mode .policy-note,body.dark-mode .free-card{background:radial-gradient(circle at 85% 0,rgba(242,199,106,.10),transparent 38%),linear-gradient(180deg,#0b1828,#071321)!important}body.dark-mode .policy-card h2,body.dark-mode .developer-panel h2,body.dark-mode .role-card h2,body.dark-mode .services-grid b{color:#f7fbff!important}body.dark-mode .policy-card p,body.dark-mode .developer-panel p,body.dark-mode .role-card p,body.dark-mode .policy-bullets li,body.dark-mode .standard-list span,body.dark-mode .services-grid span{color:#9fb0c3!important}body.dark-mode .criteria-grid div,body.dark-mode .risk-grid span,body.dark-mode .role-grid span,body.dark-mode .free-list span{background:rgba(242,199,106,.075)!important;border-color:rgba(242,199,106,.16)!important;color:#f3ead2!important}body.dark-mode .developer-panel{background:radial-gradient(circle at 88% 12%,rgba(242,199,106,.12),transparent 34%),linear-gradient(135deg,#07111f,#020914)!important;border-color:rgba(242,199,106,.14)!important}@media(max-width:980px){.policy-feature-row,.criteria-grid,.risk-grid,.services-grid,.free-list{grid-template-columns:1fr 1fr}.policy-grid.two,.role-grid{grid-template-columns:1fr}.policy-dark-band{grid-template-columns:1fr 1fr}.policy-dark-band .why-title{grid-column:1 / -1}.three-steps{grid-template-columns:1fr}}@media(max-width:640px){.policy-section{padding:30px 0}.policy-tagline{border-radius:14px;line-height:1.45;font-size:11px}.policy-feature-row,.criteria-grid,.standard-list,.risk-grid,.services-grid,.free-list,.policy-dark-band{grid-template-columns:1fr}.policy-card,.developer-panel,.role-card{padding:20px;border-radius:18px}.policy-card h2,.developer-panel h2,.role-card h2{font-size:24px}.services-grid div{min-height:auto}}


/* =========================================================
   VELAEA Thai First Text Polish
   ปรับหน้าไทยให้เป็นภาษาไทยมากขึ้น โดยยังคงความพรีเมียมเดิม
   ========================================================= */
.policy-tagline{
  letter-spacing:.01em!important;
}
.policy-pillar-strip .stats-card strong{
  font-family:Inter,'Noto Sans Thai',sans-serif;
}
.services-grid b,
.criteria-grid div,
.risk-grid span,
.standard-list span,
.free-list span,
.role-grid span{
  font-family:Inter,'Noto Sans Thai',sans-serif;
}
@media(max-width:640px){
  .nav a{
    letter-spacing:0!important;
  }
}



/* =========================================================
   VELAEA CENTER - Brand Split + Platform Mockup + Copy Polish
   ========================================================= */

.brand-split-title{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.16em;
  line-height:1;
}

.brand-split-title .brand-vela{
  color:inherit;
  letter-spacing:-.055em;
}

.brand-split-title .brand-ea{
  color:var(--gold);
  position:relative;
  padding:0 .08em;
  letter-spacing:-.04em;
  text-shadow:0 10px 28px rgba(200,149,46,.16);
}

.brand-split-title .brand-ea:after{
  content:"Expert Advisor";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  margin-top:5px;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(242,199,106,.10);
  border:1px solid rgba(200,149,46,.22);
  color:#9a6c16;
  font-size:9px;
  font-weight:950;
  letter-spacing:.04em;
  white-space:nowrap;
}

.brand-split-title .brand-center{
  color:inherit;
  letter-spacing:-.055em;
}

.platform-preview{
  padding:44px 0;
}

.platform-mockup{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  margin-top:22px;
  align-items:stretch;
}

.mockup-dashboard,
.mockup-ea-panel{
  border:1px solid rgba(200,149,46,.18);
  border-radius:24px;
  background:
    radial-gradient(circle at 82% 0,rgba(242,199,106,.14),transparent 34%),
    linear-gradient(180deg,#fff,#f8fbff);
  box-shadow:0 22px 58px rgba(6,26,47,.10);
  overflow:hidden;
}

.mockup-dashboard{
  padding:20px;
}

.mockup-topbar,
.mockup-panel-head,
.mockup-chart-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

.mockup-kicker,
.mockup-panel-head span{
  display:block;
  color:var(--gold);
  font-size:11px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.mockup-topbar strong,
.mockup-panel-head strong{
  display:block;
  color:var(--navy);
  font-size:18px;
  line-height:1.25;
  margin-top:4px;
}

.mockup-status{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(88,216,120,.12);
  border:1px solid rgba(88,216,120,.20);
  color:#168c42;
  font-size:11px;
  font-weight:950;
}

.mockup-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:18px 0;
}

.mockup-metrics div{
  padding:13px;
  border-radius:16px;
  border:1px solid rgba(6,26,47,.08);
  background:rgba(255,255,255,.72);
}

.mockup-metrics label{
  display:block;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  margin-bottom:5px;
}

.mockup-metrics strong{
  display:block;
  color:var(--navy);
  font-size:15px;
  font-weight:950;
}

.mockup-metrics small{
  display:block;
  color:var(--muted);
  font-size:10.5px;
  font-weight:800;
  margin-top:4px;
}

.mockup-chart{
  position:relative;
  min-height:220px;
  border-radius:20px;
  border:1px solid rgba(6,26,47,.08);
  background:
    linear-gradient(rgba(6,26,47,.045) 1px, transparent 1px),
    linear-gradient(90deg,rgba(6,26,47,.045) 1px, transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(242,199,106,.06));
  background-size:44px 44px,44px 44px,auto;
  padding:16px;
  overflow:hidden;
}

.mockup-chart-head span{
  display:block;
  color:var(--navy);
  font-size:13px;
  font-weight:950;
}

.mockup-chart-head small{
  color:var(--muted);
  font-size:10.5px;
  font-weight:800;
  text-align:right;
}

.mockup-chart-line{
  position:absolute;
  left:34px;
  right:28px;
  bottom:72px;
  height:98px;
  border-top:5px solid var(--gold);
  border-radius:90% 0 0 0;
  transform:skewY(-9deg) rotate(-2deg);
  opacity:.9;
}

.mockup-chart-line:after{
  content:"";
  position:absolute;
  right:0;
  top:-12px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  box-shadow:0 0 0 7px rgba(242,199,106,.12);
}

.mockup-bars{
  position:absolute;
  left:24px;
  right:24px;
  bottom:20px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}

.mockup-bars i{
  display:block;
  width:100%;
  max-width:34px;
  border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,rgba(242,199,106,.72),rgba(200,149,46,.92));
}

.mockup-bars i:nth-child(1){height:38px}
.mockup-bars i:nth-child(2){height:56px}
.mockup-bars i:nth-child(3){height:44px}
.mockup-bars i:nth-child(4){height:78px}
.mockup-bars i:nth-child(5){height:64px}
.mockup-bars i:nth-child(6){height:90px}
.mockup-bars i:nth-child(7){height:108px}

.mockup-ea-panel{
  padding:18px;
}

.mockup-ea-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.mockup-ea-list article{
  position:relative;
  display:grid;
  gap:3px;
  padding:14px;
  border-radius:17px;
  border:1px solid rgba(6,26,47,.08);
  background:rgba(255,255,255,.72);
  overflow:hidden;
}

.mockup-ea-list article:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
}

.mockup-ea-list b{
  color:var(--navy);
  font-size:14px;
  font-weight:950;
}

.mockup-ea-list span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  line-height:1.42;
}

.mockup-ea-list em{
  justify-self:start;
  margin-top:7px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(242,199,106,.10);
  border:1px solid rgba(200,149,46,.18);
  color:#9a6c16;
  font-size:10px;
  font-style:normal;
  font-weight:950;
}

/* Dark Mode */
body.dark-mode .brand-split-title .brand-ea{
  color:var(--gold2);
}

body.dark-mode .brand-split-title .brand-ea:after{
  color:var(--gold2);
  background:rgba(242,199,106,.11);
  border-color:rgba(242,199,106,.20);
}

body.dark-mode .mockup-dashboard,
body.dark-mode .mockup-ea-panel{
  background:
    radial-gradient(circle at 82% 0,rgba(242,199,106,.11),transparent 34%),
    linear-gradient(180deg,#0b1828,#071321)!important;
  border-color:rgba(242,199,106,.14)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.30)!important;
}

body.dark-mode .mockup-topbar strong,
body.dark-mode .mockup-panel-head strong,
body.dark-mode .mockup-chart-head span,
body.dark-mode .mockup-metrics strong,
body.dark-mode .mockup-ea-list b{
  color:#f7fbff!important;
}

body.dark-mode .mockup-metrics div,
body.dark-mode .mockup-chart,
body.dark-mode .mockup-ea-list article{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(242,199,106,.10)!important;
}

body.dark-mode .mockup-chart{
  background:
    linear-gradient(rgba(242,199,106,.055) 1px, transparent 1px),
    linear-gradient(90deg,rgba(242,199,106,.04) 1px, transparent 1px),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(242,199,106,.055))!important;
  background-size:44px 44px,44px 44px,auto!important;
}

body.dark-mode .mockup-metrics label,
body.dark-mode .mockup-metrics small,
body.dark-mode .mockup-chart-head small,
body.dark-mode .mockup-ea-list span{
  color:#9fb0c3!important;
}

body.dark-mode .mockup-ea-list em{
  color:var(--gold2);
  background:rgba(242,199,106,.10);
  border-color:rgba(242,199,106,.16);
}

@media(max-width:980px){
  .platform-mockup{
    grid-template-columns:1fr;
  }

  .mockup-metrics{
    grid-template-columns:1fr 1fr 1fr;
  }
}

@media(max-width:640px){
  .brand-split-title{
    gap:.12em;
  }

  .brand-split-title .brand-ea:after{
    display:none;
  }

  .platform-preview{
    padding:32px 0;
  }

  .mockup-dashboard,
  .mockup-ea-panel{
    border-radius:20px;
  }

  .mockup-metrics{
    grid-template-columns:1fr;
  }

  .mockup-topbar,
  .mockup-chart-head{
    display:grid;
  }

  .mockup-chart-head small{
    text-align:left;
  }

  .mockup-chart{
    min-height:190px;
  }
}



/* =========================================================
   VELAEA CENTER - EA Market Showcase Final
   คืนส่วน EA Market และ Why Choose ตามดีไซน์เดิม พร้อมรองรับ Light/Dark
   ========================================================= */

.brand-wordmark{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.08em;
  line-height:1;
}

.brand-wordmark .word-vela,
.brand-wordmark .word-center{
  color:var(--navy);
  letter-spacing:-.055em;
}

.brand-wordmark .word-ea{
  color:var(--gold);
  letter-spacing:-.055em;
}

body.dark-mode .brand-wordmark .word-vela,
body.dark-mode .brand-wordmark .word-center{
  color:#f7fbff;
}

body.dark-mode .brand-wordmark .word-ea{
  color:var(--gold2);
}

.ea-market-showcase{
  padding:0 0 42px;
}

.ea-market-shell{
  position:relative;
  display:grid;
  grid-template-columns:.75fr 2.25fr;
  gap:24px;
  align-items:stretch;
  padding:30px;
  border:1px solid rgba(6,26,47,.07);
  border-radius:18px;
  background:#fff;
  box-shadow:0 16px 42px rgba(6,26,47,.08);
  overflow:hidden;
}

.ea-market-shell:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 0,rgba(242,199,106,.12),transparent 32%),
    linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
  pointer-events:none;
}

.ea-market-intro,
.ea-showcase-grid{
  position:relative;
  z-index:1;
}

.ea-market-intro{
  padding:8px 0;
}

.ea-market-intro h2{
  margin:0 0 8px;
  color:var(--navy);
  font-size:31px;
  line-height:1.18;
  letter-spacing:-.035em;
}

.ea-market-intro p{
  margin:0 0 14px;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}

.ea-showcase-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.ea-showcase-card{
  background:#fff;
  border:1px solid rgba(6,26,47,.08);
  border-radius:12px;
  padding:12px;
  box-shadow:0 12px 30px rgba(6,26,47,.08);
  transition:.2s ease;
}

.ea-showcase-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(6,26,47,.12);
}

.ea-visual{
  position:relative;
  height:132px;
  border-radius:8px;
  overflow:hidden;
  padding:26px 18px;
  color:#fff;
  background:#061a2f;
}

.ea-visual:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.16),transparent 25%),
    linear-gradient(135deg,rgba(255,255,255,.06),transparent 38%),
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.06) 23px 25px);
}

.ea-visual:after{
  content:"";
  position:absolute;
  left:18px;
  right:-30px;
  bottom:18px;
  height:78px;
  border-top:4px solid currentColor;
  border-radius:100% 0 0 0;
  transform:rotate(-11deg);
  opacity:.78;
}

.ea-visual span{
  position:absolute;
  right:0;
  top:0;
  padding:4px 8px;
  border-radius:0 8px 0 8px;
  background:#22c55e;
  color:#fff;
  font-size:10px;
  font-weight:950;
  z-index:2;
}

.ea-visual h3{
  position:relative;
  z-index:1;
  margin:34px 0 0;
  font-size:30px;
  letter-spacing:.06em;
}

.ea-visual small{
  position:relative;
  z-index:1;
  display:block;
  color:rgba(255,255,255,.68);
  font-weight:900;
  letter-spacing:.16em;
}

.aurora-card{color:#1cc8ff;background:linear-gradient(135deg,#07131f,#06243d)}
.nexus-card{color:#f2c76a;background:linear-gradient(135deg,#111,#1b1407)}
.atlas-card{color:#dce7f4;background:linear-gradient(135deg,#07131f,#0e2235)}
.zenith-card{color:#f2c76a;background:linear-gradient(135deg,#100f0d,#191005)}

.ea-showcase-card h4{
  margin:13px 0 0;
  color:var(--navy);
  font-size:14px;
  font-weight:950;
}

.ea-showcase-card p{
  margin:1px 0 9px;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
}

.rating{
  color:#f4b400;
  font-size:12px;
  font-weight:950;
  margin-bottom:7px;
}

.rating b,
.rating small{
  color:#1d2939;
  font-size:11px;
}

.ea-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  margin:5px 0;
}

.ea-line span{
  color:#b98419;
  font-weight:850;
}

.ea-line strong{
  color:#08a65a;
  font-weight:950;
}

.ea-line strong.neutral{
  color:#1d2939;
}

.ea-detail-btn{
  min-height:34px;
  margin-top:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(200,149,46,.42);
  border-radius:7px;
  color:#b98419;
  font-size:11px;
  font-weight:950;
  transition:.2s ease;
}

.ea-detail-btn:hover{
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#1d1205;
}

.why-showcase{
  padding:0 0 42px;
}

.why-showcase-band{
  display:grid;
  grid-template-columns:1.15fr repeat(4,1fr);
  gap:22px;
  align-items:center;
  padding:32px;
  border-radius:14px;
  background:
    radial-gradient(circle at 90% 30%,rgba(242,199,106,.10),transparent 36%),
    linear-gradient(135deg,var(--navy),#031225);
  color:#fff;
  box-shadow:0 20px 55px rgba(8,24,42,.14);
}

.why-showcase-title h2{
  margin:0 0 10px;
  line-height:1.05;
  color:#fff;
  font-size:31px;
  letter-spacing:-.035em;
}

.why-showcase-title p,
.why-showcase-item span{
  margin:0;
  color:#d3deeb;
  font-size:13px;
  font-weight:700;
}

.why-showcase-item{
  min-height:150px;
  padding-left:22px;
  border-left:1px solid rgba(255,255,255,.18);
}

.why-showcase-item i{
  display:block;
  color:var(--gold2);
  font-style:normal;
  font-size:42px;
  line-height:1;
  margin-bottom:14px;
}

.why-showcase-item strong{
  display:block;
  color:var(--gold2);
  font-size:12px;
  font-weight:950;
  margin-bottom:8px;
}

/* Dark mode */
body.dark-mode .ea-market-shell{
  background:linear-gradient(180deg,#0b1828,#071321)!important;
  border-color:rgba(242,199,106,.13)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.28)!important;
}

body.dark-mode .ea-market-shell:before{
  background:
    radial-gradient(circle at 12% 0,rgba(242,199,106,.10),transparent 32%),
    linear-gradient(90deg,rgba(11,24,40,.95),rgba(7,19,33,.88));
}

body.dark-mode .ea-market-intro h2,
body.dark-mode .ea-showcase-card h4{
  color:#f7fbff!important;
}

body.dark-mode .ea-market-intro p,
body.dark-mode .ea-showcase-card p{
  color:#9fb0c3!important;
}

body.dark-mode .ea-showcase-card{
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(242,199,106,.12)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.26)!important;
}

body.dark-mode .rating b,
body.dark-mode .rating small,
body.dark-mode .ea-line strong.neutral{
  color:#f7fbff!important;
}

body.dark-mode .why-showcase-band{
  background:
    radial-gradient(circle at 90% 30%,rgba(242,199,106,.10),transparent 36%),
    linear-gradient(135deg,#07111f,#020914)!important;
  border:1px solid rgba(242,199,106,.13);
}

/* Responsive */
@media(max-width:1180px){
  .ea-market-shell{
    grid-template-columns:1fr;
  }

  .ea-showcase-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

@media(max-width:980px){
  .ea-showcase-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .why-showcase-band{
    grid-template-columns:1fr 1fr;
  }

  .why-showcase-title{
    grid-column:1 / -1;
  }
}

@media(max-width:640px){
  .ea-market-showcase,
  .why-showcase{
    padding-bottom:30px;
  }

  .ea-market-shell{
    padding:18px;
    border-radius:18px;
  }

  .ea-showcase-grid,
  .why-showcase-band{
    grid-template-columns:1fr;
  }

  .ea-market-intro h2,
  .why-showcase-title h2{
    font-size:25px;
  }

  .why-showcase-band{
    padding:22px;
    border-radius:18px;
  }

  .why-showcase-item{
    min-height:auto;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.15);
    padding:18px 0 0;
  }

  .brand-wordmark{
    gap:.04em;
  }
}

.platform-preview{display:none!important;}

/* Hero title final copy */
.hero-title{display:flex;flex-direction:column;gap:2px;margin:0 0 16px;}
.hero h1.hero-title span{display:block;}
.hero-title-main{color:var(--navy)!important;}
.hero-title-accent{color:var(--gold)!important;}
body.dark-mode .hero-title-main{color:#f8fbff!important;}
body.dark-mode .hero-title-accent{color:var(--gold2)!important;}
@media(max-width:640px){.hero-title{gap:0;}}


/* =========================================================
   VELAEA CENTER - Restore Original EA Market Section
   คืนรูปแบบ EA Market + Why Choose เดิม ให้เข้ากับ Light / Dark theme
   ========================================================= */

.market.container{
  padding:34px 0!important;
}

.market .section-head h2{
  color:var(--navy);
  letter-spacing:-.03em;
}

.market .section-head p:not(.eyebrow){
  color:var(--muted);
  font-weight:700;
}

.market .ea-grid{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:22px!important;
  margin-top:24px!important;
}

.market .ea-card{
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  padding:12px!important;
  box-shadow:0 10px 30px rgba(6,26,47,.08)!important;
  transition:.2s ease!important;
}

.market .ea-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(6,26,47,.12)!important;
}

.market .ea-card h4{
  color:var(--navy)!important;
  font-weight:950!important;
}

.market .ea-card p{
  color:var(--muted)!important;
  font-weight:700!important;
}

.market .ea-cover{
  height:130px!important;
  border-radius:8px!important;
  color:#fff!important;
  padding:24px 18px!important;
  position:relative!important;
  overflow:hidden!important;
}

.market .ea-cover.aurora{background:linear-gradient(135deg,#071b2f,#0c3355)!important;}
.market .ea-cover.nexus,
.market .ea-cover.zenith{background:linear-gradient(135deg,#16120c,#0a1018)!important;}
.market .ea-cover.atlas{background:linear-gradient(135deg,#061a2f,#17202d)!important;}

.market .btn-card{
  width:100%!important;
  border-color:rgba(200,149,46,.45)!important;
  color:#9a6c16!important;
  background:#fff!important;
  margin-top:10px!important;
}

.market .btn-card:hover{
  background:linear-gradient(135deg,var(--gold2),var(--gold))!important;
  color:#211404!important;
}

.why.container{
  padding:0 0 34px!important;
}

.why .dark-band{
  background:linear-gradient(135deg,var(--navy),#031225)!important;
  border-radius:12px!important;
  color:#fff!important;
  padding:30px!important;
  display:grid!important;
  grid-template-columns:1.2fr repeat(4,1fr)!important;
  gap:24px!important;
  align-items:center!important;
  box-shadow:var(--shadow)!important;
}

.why .why-title h2{
  color:#fff!important;
  line-height:1.05!important;
  margin:0 0 10px!important;
}

.why .why-title p,
.why .why-item span{
  color:#d3deeb!important;
}

.why .why-item strong,
.why .why-item i{
  color:var(--gold2)!important;
}

body.dark-mode .market .section-head h2,
body.dark-mode .market .ea-card h4{
  color:#f7fbff!important;
}

body.dark-mode .market .section-head p:not(.eyebrow),
body.dark-mode .market .ea-card p{
  color:#9fb0c3!important;
}

body.dark-mode .market .ea-card{
  background:linear-gradient(180deg,#0b1828,#071321)!important;
  border-color:rgba(242,199,106,.13)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.25)!important;
}

body.dark-mode .market .btn-card{
  background:rgba(255,255,255,.035)!important;
  color:var(--gold2)!important;
  border-color:rgba(242,199,106,.45)!important;
}

body.dark-mode .why .dark-band{
  background:
    radial-gradient(circle at 90% 30%,rgba(242,199,106,.10),transparent 36%),
    linear-gradient(135deg,#07111f,#020914)!important;
  border:1px solid rgba(242,199,106,.13)!important;
  box-shadow:0 24px 65px rgba(0,0,0,.28)!important;
}

@media(max-width:980px){
  .market .ea-grid{grid-template-columns:repeat(2,1fr)!important;}
  .why .dark-band{grid-template-columns:1fr 1fr!important;}
  .why .why-title{grid-column:1/-1!important;}
}

@media(max-width:640px){
  .market.container{padding:28px 0!important;}
  .market .ea-grid{grid-template-columns:1fr!important;}
  .why .dark-band{grid-template-columns:1fr!important;padding:22px!important;border-radius:18px!important;}
  .why .why-item{border-left:0!important;border-top:1px solid rgba(255,255,255,.15)!important;padding:18px 0 0!important;}
}

/* Safety: prevent unused new showcase from displaying if accidentally duplicated */
.ea-market-showcase.is-disabled,.why-showcase.is-disabled{display:none!important;}


/* =========================================================
   VELAEA Small Polish Patch
   - Remove PERFORMANCE menu in HTML
   - Hero title first line white in dark mode
   - EA cover names gold in light mode
   ========================================================= */

/* ข้อ 2: ตีมมืดให้ "ให้ EA ทำงานแทนคุณ" เป็นสีขาว */
body.dark-mode .hero h1.hero-title .hero-title-main,
html[data-theme="dark"] .hero h1.hero-title .hero-title-main{
  color:#ffffff!important;
}

/* กัน selector เดิมของ hero h1 span ไปบังคับเป็นสีทอง */
body.dark-mode .hero-title-main,
html[data-theme="dark"] .hero-title-main{
  color:#ffffff!important;
}

body.dark-mode .hero-title-accent,
html[data-theme="dark"] .hero-title-accent{
  color:var(--gold2)!important;
}

/* ข้อ 3: ตีมสว่างให้ชื่อ EA บนการ์ด AURORA / NEXUS / ATLAS / ZENITH เป็นสีทอง */
body:not(.dark-mode) .ea-cover h3,
html[data-theme="light"] .ea-cover h3,
body:not(.dark-mode) .ea-visual h3,
html[data-theme="light"] .ea-visual h3{
  color:var(--gold)!important;
  text-shadow:0 8px 22px rgba(200,149,46,.18)!important;
}

/* รักษา subtitle ใต้ชื่อ EA ให้ยังอ่านง่ายในตีมสว่าง */
body:not(.dark-mode) .ea-cover small,
html[data-theme="light"] .ea-cover small,
body:not(.dark-mode) .ea-visual small,
html[data-theme="light"] .ea-visual small{
  color:rgba(255,255,255,.70)!important;
}


/* =========================================================
   VELAEA INDEX - Desktop Menu One Line Patch
   ทำให้เมนูด้านบนเป็นบรรทัดเดียว ไม่ตัดคำ เช่น EA MARKET / HOW IT WORKS
   ========================================================= */

@media(min-width:981px){
  .site-header .nav-wrap{
    gap:18px!important;
  }

  .site-header .nav{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:22px!important;
    min-width:0!important;
  }

  .site-header .nav a{
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    flex:0 0 auto!important;
    line-height:1!important;
    font-size:clamp(11px,.72vw,13px)!important;
  }

  .site-header .nav-actions{
    flex:0 0 auto!important;
    gap:10px!important;
    white-space:nowrap!important;
  }

  .site-header .btn,
  .site-header .theme-toggle,
  .site-header .lang-trigger{
    white-space:nowrap!important;
  }
}

@media(min-width:981px) and (max-width:1180px){
  .site-header .brand img{
    width:170px!important;
  }

  .site-header .nav{
    gap:16px!important;
  }

  .site-header .nav-actions{
    gap:8px!important;
  }

  .site-header .btn{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}


/* =========================================================
   VELAEA INDEX - Dark Hero Image Smooth Blend Patch
   ทำให้ภาพ Hero ในตีมมืดกลืนกับพื้นหลัง ไม่เป็นกล่องแข็ง
   ========================================================= */

/* คุมเฉพาะตีมมืด ไม่กระทบ Light Mode */
body.dark-mode .hero,
html[data-theme="dark"] .hero{
  overflow:hidden!important;
  background:
    radial-gradient(circle at 72% 38%, rgba(242,199,106,.075), transparent 28%),
    radial-gradient(circle at 52% 48%, rgba(255,255,255,.025), transparent 36%),
    linear-gradient(180deg,#020814 0%,#06111f 50%,#020814 100%)!important;
}

body.dark-mode .hero-grid,
html[data-theme="dark"] .hero-grid{
  position:relative!important;
  isolation:isolate!important;
}

/* ให้กล่องรูปไม่มีพื้นแข็ง และมี glow เบา ๆ หลังภาพ */
body.dark-mode .hero-art-image,
html[data-theme="dark"] .hero-art-image{
  position:relative!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  isolation:isolate!important;
}

/* แสงทองนุ่ม ๆ หลังรูป */
body.dark-mode .hero-art-image::before,
html[data-theme="dark"] .hero-art-image::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:-1!important;
  inset:42px 22px 40px 22px!important;
  background:
    radial-gradient(circle at 62% 44%, rgba(242,199,106,.15), transparent 42%),
    radial-gradient(circle at 35% 54%, rgba(255,255,255,.035), transparent 45%)!important;
  filter:blur(72px)!important;
  opacity:.72!important;
  pointer-events:none!important;
}

/* Overlay เกลี่ยขอบซ้าย/ล่าง/ขวา ให้กลืนกับพื้นหลัง */
body.dark-mode .hero-art-image::after,
html[data-theme="dark"] .hero-art-image::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:3!important;
  inset:-2px!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,
      #020814 0%,
      rgba(2,8,20,.82) 7%,
      rgba(2,8,20,.36) 18%,
      rgba(2,8,20,0) 34%,
      rgba(2,8,20,0) 67%,
      rgba(2,8,20,.18) 86%,
      rgba(2,8,20,.58) 100%
    ),
    linear-gradient(180deg,
      rgba(2,8,20,.20) 0%,
      rgba(2,8,20,0) 18%,
      rgba(2,8,20,0) 64%,
      rgba(2,8,20,.34) 84%,
      #020814 100%
    ),
    radial-gradient(ellipse at 56% 48%,
      rgba(2,8,20,0) 0%,
      rgba(2,8,20,0) 48%,
      rgba(2,8,20,.22) 76%,
      rgba(2,8,20,.58) 100%
    )!important;
}

/* ภาพมืดลดความเป็นสี่เหลี่ยมด้วย mask รอบขอบ */
body.dark-mode .hero-img-dark,
html[data-theme="dark"] .hero-img-dark{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:.86!important;
  transform:scale(1.045)!important;
  filter:brightness(.94) contrast(1.06) saturate(.98)!important;
  mix-blend-mode:normal!important;
  -webkit-mask-image:
    radial-gradient(ellipse at 55% 50%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 44%,
      rgba(0,0,0,.78) 64%,
      rgba(0,0,0,.34) 84%,
      transparent 100%)!important;
  mask-image:
    radial-gradient(ellipse at 55% 50%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 44%,
      rgba(0,0,0,.78) 64%,
      rgba(0,0,0,.34) 84%,
      transparent 100%)!important;
}

/* ให้ภาพ light ยังซ่อนใน dark mode ชัวร์ */
body.dark-mode .hero-img-light,
html[data-theme="dark"] .hero-img-light{
  display:none!important;
}

/* Fade ด้านล่างของ Hero ให้ต่อกับ section ถัดไปเนียน */
body.dark-mode .hero::after,
html[data-theme="dark"] .hero::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:130px!important;
  pointer-events:none!important;
  z-index:2!important;
  background:linear-gradient(180deg,rgba(2,8,20,0),#020814 82%)!important;
}

/* ป้องกัน content ด้านซ้ายโดน overlay */
body.dark-mode .hero-copy,
html[data-theme="dark"] .hero-copy{
  position:relative!important;
  z-index:6!important;
}

/* Responsive */
@media(max-width:980px){
  body.dark-mode .hero-art-image::after,
  html[data-theme="dark"] .hero-art-image::after{
    background:
      linear-gradient(90deg,#020814 0%,rgba(2,8,20,.56) 10%,rgba(2,8,20,0) 32%,rgba(2,8,20,.42) 100%),
      linear-gradient(180deg,rgba(2,8,20,0) 52%,#020814 100%),
      radial-gradient(ellipse at 50% 50%,rgba(2,8,20,0) 45%,rgba(2,8,20,.48) 100%)!important;
  }

  body.dark-mode .hero-img-dark,
  html[data-theme="dark"] .hero-img-dark{
    opacity:.66!important;
    transform:scale(1.02)!important;
  }
}

@media(max-width:640px){
  body.dark-mode .hero-img-dark,
  html[data-theme="dark"] .hero-img-dark{
    opacity:.56!important;
    transform:scale(1.01)!important;
  }

  body.dark-mode .hero-art-image::before,
  html[data-theme="dark"] .hero-art-image::before{
    inset:24px 18px 24px 18px!important;
    filter:blur(48px)!important;
  }
}


/* =========================================================
   VELAEA INDEX - Dark Hero Blend FIX v2
   แก้บัคแถบดำ/กล่องสี่เหลี่ยมบนภาพ Hero ในตีมมืด
   หลักการ: ไม่ใช้ overlay พาดกลางภาพ, ใช้ mask ที่ตัวรูป + glow เบา ๆ แทน
   ========================================================= */

body.dark-mode .hero,
html[data-theme="dark"] .hero{
  overflow:hidden!important;
  background:
    radial-gradient(circle at 72% 38%, rgba(242,199,106,.055), transparent 28%),
    radial-gradient(circle at 54% 48%, rgba(255,255,255,.018), transparent 38%),
    linear-gradient(180deg,#020814 0%,#06111f 48%,#020814 100%)!important;
}

/* กล่องภาพต้องไม่สร้างพื้นหลังสี่เหลี่ยม */
body.dark-mode .hero-art-image,
html[data-theme="dark"] .hero-art-image{
  position:relative!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  isolation:isolate!important;
}

/* glow หลังภาพอย่างเดียว ไม่ทับหน้าภาพ */
body.dark-mode .hero-art-image::before,
html[data-theme="dark"] .hero-art-image::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:-1!important;
  inset:48px 42px 46px 42px!important;
  background:
    radial-gradient(circle at 60% 44%, rgba(242,199,106,.13), transparent 46%),
    radial-gradient(circle at 40% 52%, rgba(255,255,255,.025), transparent 48%)!important;
  filter:blur(70px)!important;
  opacity:.70!important;
  pointer-events:none!important;
}

/* ปิด overlay ตัวเดิมที่ทำให้เกิดแถบดำสี่เหลี่ยม */
body.dark-mode .hero-art-image::after,
html[data-theme="dark"] .hero-art-image::after{
  display:none!important;
  content:none!important;
  background:none!important;
}

/* ใช้ mask ที่ตัวรูปแทน overlay เพื่อให้ขอบภาพ fade ออกแบบนุ่ม */
body.dark-mode .hero-img-dark,
html[data-theme="dark"] .hero-img-dark{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  opacity:.88!important;
  transform:scale(1.045)!important;
  filter:brightness(.96) contrast(1.05) saturate(1.00)!important;
  mix-blend-mode:normal!important;

  -webkit-mask-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.22) 7%,
      rgba(0,0,0,.78) 18%,
      #000 34%,
      #000 72%,
      rgba(0,0,0,.78) 86%,
      transparent 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.68) 10%,
      #000 24%,
      #000 72%,
      rgba(0,0,0,.70) 86%,
      transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.22) 7%,
      rgba(0,0,0,.78) 18%,
      #000 34%,
      #000 72%,
      rgba(0,0,0,.78) 86%,
      transparent 100%),
    linear-gradient(180deg,
      transparent 0%,
      rgba(0,0,0,.68) 10%,
      #000 24%,
      #000 72%,
      rgba(0,0,0,.70) 86%,
      transparent 100%);
  mask-composite:intersect;
}

/* ซ่อนภาพ Light ใน Dark ให้ชัวร์ */
body.dark-mode .hero-img-light,
html[data-theme="dark"] .hero-img-light{
  display:none!important;
}

/* เกลี่ยท้าย Hero กับ section ถัดไปแบบบาง ไม่ทับปุ่ม */
body.dark-mode .hero::after,
html[data-theme="dark"] .hero::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-1px!important;
  height:92px!important;
  pointer-events:none!important;
  z-index:1!important;
  background:linear-gradient(180deg,rgba(2,8,20,0),#020814 86%)!important;
}

/* ให้ข้อความและปุ่มอยู่เหนือ fade เสมอ */
body.dark-mode .hero-copy,
html[data-theme="dark"] .hero-copy{
  position:relative!important;
  z-index:8!important;
}

body.dark-mode .hero-actions,
html[data-theme="dark"] .hero-actions{
  position:relative!important;
  z-index:9!important;
}

/* คืนความสว่างปุ่ม ไม่ให้เหมือนโดน overlay ทับ */
body.dark-mode .hero-actions .btn-gold,
html[data-theme="dark"] .hero-actions .btn-gold{
  opacity:1!important;
  filter:none!important;
  color:#211404!important;
  background:linear-gradient(135deg,var(--gold2),var(--gold))!important;
  box-shadow:0 14px 30px rgba(200,149,46,.24)!important;
}

body.dark-mode .hero-actions .btn-outline,
html[data-theme="dark"] .hero-actions .btn-outline{
  opacity:1!important;
  filter:none!important;
  color:var(--gold2)!important;
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(242,199,106,.48)!important;
}

/* Responsive */
@media(max-width:980px){
  body.dark-mode .hero-img-dark,
  html[data-theme="dark"] .hero-img-dark{
    opacity:.68!important;
    transform:scale(1.025)!important;
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.75) 14%, #000 32%, #000 70%, rgba(0,0,0,.75) 88%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,.74) 12%, #000 28%, #000 70%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.75) 14%, #000 32%, #000 70%, rgba(0,0,0,.75) 88%, transparent 100%),
      linear-gradient(180deg, transparent 0%, rgba(0,0,0,.74) 12%, #000 28%, #000 70%, transparent 100%);
    mask-composite:intersect;
  }
}

@media(max-width:640px){
  body.dark-mode .hero-img-dark,
  html[data-theme="dark"] .hero-img-dark{
    opacity:.58!important;
    transform:scale(1.01)!important;
  }

  body.dark-mode .hero-art-image::before,
  html[data-theme="dark"] .hero-art-image::before{
    inset:26px 18px 28px 18px!important;
    filter:blur(48px)!important;
  }

  body.dark-mode .hero::after,
  html[data-theme="dark"] .hero::after{
    height:70px!important;
  }
}


/* =========================================================
   VELAEA PROFESSIONAL NAVBAR FIX V2
   แก้เมนู Header ทับกันบน Desktop / Laptop
   - Desktop: แบ่งเป็น 3 โซน Logo | Menu | Actions
   - เพิ่มพื้นที่ Header เป็น 1440px เฉพาะ Header
   - ปุ่มขวาไม่ถูกบีบและไม่ชนเมนู
   - Laptop แคบ: ลดขนาดและซ่อนข้อความบางส่วนอัตโนมัติ
   ========================================================= */

@media (min-width:1101px){
  .site-header{
    position:sticky!important;
    top:0!important;
    z-index:1200!important;
    overflow:visible!important;
  }

  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    width:min(1440px, calc(100% - 72px))!important;
    max-width:1440px!important;
    height:80px!important;
    min-height:80px!important;
    margin:0 auto!important;
    padding:0!important;

    display:grid!important;
    grid-template-columns:minmax(150px, 210px) minmax(0, 1fr) max-content!important;
    align-items:center!important;
    gap:clamp(18px, 2vw, 34px)!important;

    overflow:visible!important;
  }

  .site-header .brand{
    grid-column:1!important;
    grid-row:1!important;
    width:auto!important;
    height:80px!important;
    min-width:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    flex:0 0 auto!important;
    overflow:visible!important;
  }

  .site-header .brand img{
    width:clamp(150px, 12vw, 185px)!important;
    max-width:185px!important;
    max-height:64px!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  .site-header .theme-toggle-mobile,
  .site-header .menu-btn{
    display:none!important;
    width:0!important;
    min-width:0!important;
    height:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  .site-header .nav{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    padding:0!important;
    min-width:0!important;
    max-width:100%!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:nowrap!important;
    gap:clamp(15px, 1.55vw, 28px)!important;
    overflow:visible!important;
  }

  .site-header .nav > .mobile-menu-actions{
    display:none!important;
  }

  .site-header .nav a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    flex:0 0 auto!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;

    font-size:clamp(12px, .78vw, 14px)!important;
    line-height:1!important;
    letter-spacing:.01em!important;
  }

  .site-header .nav a.active:after{
    bottom:-24px!important;
  }

  .site-header .nav-actions{
    grid-column:3!important;
    grid-row:1!important;
    min-width:max-content!important;
    margin:0!important;
    padding:0!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;
    flex-wrap:nowrap!important;
    gap:10px!important;

    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    position:relative!important;
    z-index:1210!important;
    white-space:nowrap!important;
  }

  .site-header .nav-actions .nav-tools{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    margin:0!important;
    padding:0!important;
  }

  .site-header .nav-actions .theme-toggle,
  .site-header .lang-trigger,
  .site-header .btn{
    height:42px!important;
    min-height:42px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  .site-header .nav-actions .theme-toggle{
    padding:0 14px!important;
    border-radius:999px!important;
    gap:8px!important;
  }

  .site-header .language-switcher{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
  }

  .site-header .lang-trigger{
    min-width:auto!important;
    width:auto!important;
    padding:0 14px!important;
    border-radius:999px!important;
    gap:8px!important;
  }

  .site-header .lang-current-text,
  .site-header .lang-chevron,
  .site-header .nav-actions .theme-text{
    display:inline-flex!important;
  }

  .site-header .lang-panel{
    position:absolute!important;
    top:calc(100% + 12px)!important;
    right:0!important;
    left:auto!important;
    bottom:auto!important;
  }

  .site-header .btn{
    padding:0 18px!important;
    border-radius:12px!important;
    font-size:13px!important;
  }

  /* hide duplicate mobile controls after all theme rules */
  .site-header .theme-toggle-mobile,
  .site-header .menu-btn{
    display:none!important;
  }
}

/* Compact desktop / laptop: กันทับเมื่อจอแคบหรือ Browser Zoom สูง */
@media (min-width:1101px) and (max-width:1280px){
  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    width:min(1248px, calc(100% - 32px))!important;
    grid-template-columns:minmax(132px, 160px) minmax(0, 1fr) max-content!important;
    gap:14px!important;
  }

  .site-header .brand img{
    width:145px!important;
    max-width:145px!important;
  }

  .site-header .nav{
    gap:12px!important;
  }

  .site-header .nav a{
    font-size:12px!important;
    letter-spacing:0!important;
  }

  .site-header .nav-actions,
  .site-header .nav-actions .nav-tools{
    gap:8px!important;
  }

  .site-header .nav-actions .theme-toggle{
    width:42px!important;
    min-width:42px!important;
    padding:0!important;
  }

  .site-header .nav-actions .theme-toggle .theme-text{
    display:none!important;
  }

  .site-header .lang-trigger{
    width:42px!important;
    min-width:42px!important;
    padding:0!important;
  }

  .site-header .lang-current-text,
  .site-header .lang-chevron{
    display:none!important;
  }

  .site-header .btn{
    padding:0 13px!important;
    font-size:12px!important;
  }
}

/* Tablet landscape: เปลี่ยนเป็นเมนูปุ่ม เพื่อไม่ให้ชนกันก่อนถึงมือถือ */
@media (min-width:981px) and (max-width:1100px){
  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    width:min(1080px, calc(100% - 32px))!important;
    height:72px!important;
    min-height:72px!important;
    margin:0 auto!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    overflow:visible!important;
    position:relative!important;
  }

  .site-header .brand{
    margin-right:auto!important;
    height:72px!important;
    display:flex!important;
    align-items:center!important;
  }

  .site-header .brand img{
    width:150px!important;
    max-width:150px!important;
    max-height:56px!important;
  }

  .site-header .theme-toggle-mobile{
    display:inline-flex!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border-radius:14px!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .site-header .menu-btn{
    display:inline-flex!important;
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    margin:0!important;
    border-radius:14px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:4px!important;
  }

  .site-header .menu-btn span{
    display:block!important;
    width:18px!important;
    height:2px!important;
    margin:0!important;
    border-radius:999px!important;
  }

  .site-header .nav{
    position:absolute!important;
    top:72px!important;
    left:0!important;
    right:0!important;
    z-index:1190!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin:0!important;
    padding:16px!important;
    border-radius:22px!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-8px)!important;
  }

  body.mobile-menu-open .site-header .nav,
  .site-header .nav.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }

  .site-header .nav a{
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 14px!important;
    border-radius:14px!important;
    white-space:nowrap!important;
  }

  .site-header .nav-actions{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    white-space:nowrap!important;
  }

  .site-header .nav-actions .nav-tools{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }

  .site-header .nav-actions .nav-tools > .theme-toggle,
  .site-header .nav-actions > .btn-ghost{
    display:none!important;
  }

  .site-header .language-switcher{
    position:relative!important;
    display:inline-flex!important;
  }

  .site-header .lang-trigger{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border-radius:14px!important;
  }

  .site-header .lang-current-text,
  .site-header .lang-chevron{
    display:none!important;
  }

  .site-header .nav-actions > .btn-gold{
    height:40px!important;
    min-height:40px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
}

/* =========================================================
   VELAEA HEADER RIGHT-ALIGN FINAL PATCH
   จัดกลุ่มเมนูกลางให้ชิดกล่องปุ่มด้านขวา โดยไม่ทับกัน
   Desktop: Logo | flexible space | Nav + Actions
   Tablet/Mobile: Logo | Theme | Language | Signup | Menu
   ========================================================= */

@media (min-width:1101px){
  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    width:min(1440px, calc(100% - 56px))!important;
    max-width:1440px!important;
    height:80px!important;
    min-height:80px!important;
    margin:0 auto!important;
    padding:0!important;

    display:grid!important;
    grid-template-columns:minmax(126px, 185px) minmax(0, 1fr) max-content!important;
    align-items:center!important;
    column-gap:12px!important;
    overflow:visible!important;
  }

  .site-header .brand{
    grid-column:1!important;
    grid-row:1!important;
    margin:0!important;
    height:80px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
    overflow:visible!important;
  }

  .site-header .brand img{
    width:clamp(130px, 10vw, 170px)!important;
    max-width:170px!important;
    max-height:62px!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  .site-header .theme-toggle-mobile,
  .site-header .menu-btn{
    display:none!important;
    width:0!important;
    min-width:0!important;
    height:0!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  .site-header .nav{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    padding:0!important;
    min-width:0!important;
    max-width:100%!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:clamp(16px, 1.25vw, 25px)!important;
    overflow:visible!important;
    white-space:nowrap!important;
  }

  .site-header .nav > .mobile-menu-actions{display:none!important;}

  .site-header .nav a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    font-size:clamp(12px, .76vw, 14px)!important;
    line-height:1!important;
    letter-spacing:.01em!important;
  }

  .site-header .nav a.active:after{bottom:-24px!important;}

  .site-header .nav-actions{
    grid-column:3!important;
    grid-row:1!important;
    margin:0!important;
    padding:0!important;
    min-width:max-content!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:10px!important;

    position:relative!important;
    z-index:1210!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    white-space:nowrap!important;
  }

  .site-header .nav-actions .nav-tools{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    margin:0!important;
    padding:0!important;
  }

  .site-header .nav-actions .theme-toggle,
  .site-header .lang-trigger,
  .site-header .btn{
    height:42px!important;
    min-height:42px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  .site-header .nav-actions .theme-toggle{
    padding:0 14px!important;
    border-radius:999px!important;
    gap:8px!important;
  }

  .site-header .language-switcher{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
  }

  .site-header .lang-trigger{
    width:auto!important;
    min-width:auto!important;
    padding:0 14px!important;
    border-radius:999px!important;
    gap:8px!important;
  }

  .site-header .lang-current-text,
  .site-header .lang-chevron,
  .site-header .nav-actions .theme-text{
    display:inline-flex!important;
  }

  .site-header .lang-panel{
    position:absolute!important;
    top:calc(100% + 12px)!important;
    right:0!important;
    left:auto!important;
    bottom:auto!important;
  }

  .site-header .btn{
    padding:0 18px!important;
    border-radius:12px!important;
    font-size:13px!important;
  }
}

/* Compact desktop: จอ laptop/zoom สูง ดึงเข้าขวาเหมือนเดิม แต่ลดขนาดเพื่อกันชน */
@media (min-width:1101px) and (max-width:1280px){
  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    width:min(1248px, calc(100% - 28px))!important;
    grid-template-columns:minmax(112px, 150px) minmax(0, 1fr) max-content!important;
    column-gap:8px!important;
  }

  .site-header .brand img{
    width:128px!important;
    max-width:128px!important;
    max-height:56px!important;
  }

  .site-header .nav{
    justify-content:flex-end!important;
    gap:11px!important;
  }

  .site-header .nav a{
    font-size:11.5px!important;
    letter-spacing:0!important;
  }

  .site-header .nav-actions,
  .site-header .nav-actions .nav-tools{
    gap:7px!important;
  }

  .site-header .nav-actions .theme-toggle,
  .site-header .lang-trigger{
    width:40px!important;
    min-width:40px!important;
    padding:0!important;
  }

  .site-header .nav-actions .theme-toggle .theme-text,
  .site-header .lang-current-text,
  .site-header .lang-chevron{
    display:none!important;
  }

  .site-header .btn{
    padding:0 12px!important;
    font-size:12px!important;
  }
}

/* Tablet landscape: ใช้ปุ่มกลุ่มขวา ไม่ให้ nav ทับกัน */
@media (min-width:981px) and (max-width:1100px){
  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    width:min(1080px, calc(100% - 28px))!important;
    height:72px!important;
    min-height:72px!important;
    margin:0 auto!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:7px!important;
    overflow:visible!important;
    position:relative!important;
  }

  .site-header .brand{
    order:1!important;
    margin-right:auto!important;
    height:72px!important;
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
  }

  .site-header .brand img{
    width:140px!important;
    max-width:140px!important;
    max-height:56px!important;
  }

  .site-header .theme-toggle-mobile{
    order:2!important;
    display:inline-flex!important;
  }

  .site-header .nav-actions{
    order:3!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    white-space:nowrap!important;
  }

  .site-header .nav-actions .nav-tools{display:flex!important;gap:7px!important;align-items:center!important;}
  .site-header .nav-actions .nav-tools > .theme-toggle,
  .site-header .nav-actions > .btn-ghost{display:none!important;}

  .site-header .language-switcher{position:relative!important;display:inline-flex!important;}
  .site-header .lang-trigger,
  .site-header .theme-toggle-mobile,
  .site-header .menu-btn{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0!important;
    border-radius:14px!important;
  }

  .site-header .lang-current-text,
  .site-header .lang-chevron{display:none!important;}

  .site-header .nav-actions > .btn-gold{
    display:inline-flex!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

  .site-header .menu-btn{
    order:4!important;
    display:inline-flex!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:4px!important;
  }

  .site-header .menu-btn span{margin:0!important;width:18px!important;height:2px!important;}

  .site-header .nav{
    order:10!important;
    position:absolute!important;
    top:calc(100% + 10px)!important;
    left:0!important;
    right:0!important;
    z-index:1190!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin:0!important;
    padding:16px!important;
    border-radius:22px!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-8px)!important;
  }

  body.mobile-menu-open .site-header .nav,
  .site-header .nav.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }
}

/* Mobile: กล่องด้านขวาชิดกันเป็นชุดเดียว แต่ยังเว้นช่องไฟพอดี */
@media (max-width:980px){
  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    width:min(100% - 24px, 1180px)!important;
    min-height:64px!important;
    height:64px!important;
    margin:0 auto!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    overflow:visible!important;
    position:relative!important;
  }

  .site-header .brand{
    order:1!important;
    margin-right:auto!important;
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    min-width:0!important;
    height:64px!important;
  }

  .site-header .brand img{
    width:clamp(78px, 23vw, 132px)!important;
    max-width:132px!important;
    max-height:52px!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  .site-header .theme-toggle-mobile{
    order:2!important;
    display:inline-flex!important;
    flex:0 0 auto!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    margin:0!important;
    border-radius:13px!important;
  }

  .site-header .nav-actions{
    order:3!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    margin:0!important;
    padding:0!important;
    position:static!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    white-space:nowrap!important;
    flex:0 0 auto!important;
  }

  .site-header .nav-actions .nav-tools{display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;}
  .site-header .nav-actions .nav-tools > .theme-toggle,
  .site-header .nav-actions > .btn-ghost{display:none!important;}
  .site-header .language-switcher{position:relative!important;display:inline-flex!important;flex:0 0 auto!important;}

  .site-header .lang-trigger{
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    border-radius:13px!important;
  }

  .site-header .lang-current-flag{width:24px!important;height:24px!important;}
  .site-header .lang-current-text,
  .site-header .lang-chevron{display:none!important;}

  .site-header .nav-actions > .btn-gold{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:38px!important;
    min-height:38px!important;
    min-width:72px!important;
    padding:0 12px!important;
    border-radius:999px!important;
    font-size:12px!important;
    white-space:nowrap!important;
    flex:0 0 auto!important;
  }

  .site-header .menu-btn{
    order:4!important;
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:4px!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    margin:0!important;
    border-radius:13px!important;
  }

  .site-header .menu-btn span{
    display:block!important;
    width:17px!important;
    height:2px!important;
    margin:0!important;
    border-radius:999px!important;
  }

  .site-header .nav{
    order:10!important;
    position:absolute!important;
    top:calc(100% + 10px)!important;
    left:0!important;
    right:0!important;
    z-index:1190!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin:0!important;
    padding:14px!important;
    max-height:calc(100dvh - 88px)!important;
    overflow:auto!important;
    border-radius:22px!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateY(-8px)!important;
  }

  body.mobile-menu-open .site-header .nav,
  .site-header .nav.open,
  .site-header .nav.active,
  .site-header .nav.show{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }
}

@media (max-width:430px){
  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    width:min(100% - 18px, 1180px)!important;
    gap:5px!important;
  }

  .site-header .brand img{
    width:clamp(70px, 22vw, 96px)!important;
    max-width:96px!important;
  }

  .site-header .theme-toggle-mobile,
  .site-header .lang-trigger,
  .site-header .menu-btn{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
  }

  .site-header .nav-actions{gap:5px!important;}
  .site-header .nav-actions .nav-tools{gap:5px!important;}

  .site-header .nav-actions > .btn-gold{
    min-width:64px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 9px!important;
    font-size:11px!important;
  }
}

/* =========================================================
   VELAEA MOBILE HEADER NO-OVERLAP FINAL PATCH
   - แก้ปุ่ม Theme / Language / สมัครสมาชิก / Menu ซ้อนกันบนมือถือ
   - ใช้ Grid แบบล็อกช่อง เพื่อไม่ให้ปุ่มทับกันแม้จอ 412px / 390px / 360px
========================================================= */
@media (max-width:980px){
  .site-header{
    overflow:visible!important;
  }

  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    width:min(100% - 18px, 1180px)!important;
    height:66px!important;
    min-height:66px!important;
    margin:0 auto!important;
    padding:0!important;

    display:grid!important;
    grid-template-columns:minmax(0, 1fr) 38px 38px max-content 38px!important;
    grid-template-rows:66px!important;
    align-items:center!important;
    justify-items:center!important;
    column-gap:6px!important;
    row-gap:0!important;

    position:relative!important;
    overflow:visible!important;
  }

  .site-header .brand{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
    align-self:center!important;
    order:0!important;
    margin:0!important;
    padding:0!important;
    min-width:0!important;
    max-width:100%!important;
    height:66px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    position:relative!important;
    z-index:1001!important;
  }

  .site-header .brand img{
    width:clamp(82px, 24vw, 124px)!important;
    max-width:124px!important;
    max-height:50px!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:left center!important;
    display:block!important;
    margin:0!important;
  }

  .site-header #themeToggleMobile,
  .site-header .theme-toggle-mobile{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:center!important;
    align-self:center!important;
    order:0!important;

    display:inline-flex!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;

    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0!important;
    margin:0!important;
    border-radius:13px!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 38px!important;
    z-index:1003!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .site-header .theme-toggle-mobile .theme-text{
    display:none!important;
  }

  .site-header .nav-actions{
    grid-column:3 / 5!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    order:0!important;

    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    margin:0!important;
    padding:0!important;
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
    flex:0 0 auto!important;

    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    z-index:1002!important;
  }

  .site-header .nav-actions .nav-tools{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    position:relative!important;
  }

  .site-header .nav-actions .nav-tools > .theme-toggle{
    display:none!important;
  }

  .site-header .nav-actions .language-switcher{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    flex:0 0 38px!important;

    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    z-index:1002!important;
  }

  .site-header .nav-actions .lang-trigger,
  .site-header .lang-trigger{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0!important;
    margin:0!important;
    border-radius:13px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
  }

  .site-header .lang-current-flag{
    width:24px!important;
    min-width:24px!important;
    height:24px!important;
    min-height:24px!important;
    margin:0!important;
  }

  .site-header .lang-current-text,
  .site-header .lang-chevron{
    display:none!important;
  }

  .site-header .nav-actions > .btn-ghost{
    display:none!important;
  }

  .site-header .nav-actions > .btn-gold{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:72px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0 12px!important;
    margin:0!important;
    border-radius:999px!important;
    font-size:12px!important;
    line-height:1!important;
    white-space:nowrap!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .site-header .menu-btn,
  .site-header #menuBtn{
    grid-column:5!important;
    grid-row:1!important;
    justify-self:end!important;
    align-self:center!important;
    order:0!important;

    display:inline-flex!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;

    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0!important;
    margin:0!important;
    border-radius:13px!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:4px!important;
    flex:0 0 38px!important;
    z-index:1003!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .site-header .menu-btn span{
    display:block!important;
    width:17px!important;
    min-width:17px!important;
    height:2px!important;
    margin:0!important;
    border-radius:999px!important;
    flex:0 0 auto!important;
  }

  .site-header .nav{
    grid-column:1 / -1!important;
    grid-row:1!important;
    position:absolute!important;
    top:calc(100% + 8px)!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    z-index:1200!important;
  }

  .site-header .nav-actions .lang-panel{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    z-index:1300!important;
  }
}

@media (max-width:430px){
  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    width:min(100% - 16px, 1180px)!important;
    grid-template-columns:minmax(0, 1fr) 36px 36px max-content 36px!important;
    grid-template-rows:64px!important;
    height:64px!important;
    min-height:64px!important;
    column-gap:5px!important;
  }

  .site-header .brand{
    height:64px!important;
  }

  .site-header .brand img{
    width:clamp(72px, 21vw, 92px)!important;
    max-width:92px!important;
    max-height:46px!important;
  }

  .site-header #themeToggleMobile,
  .site-header .theme-toggle-mobile,
  .site-header .nav-actions .nav-tools,
  .site-header .nav-actions .language-switcher,
  .site-header .nav-actions .lang-trigger,
  .site-header .lang-trigger,
  .site-header .menu-btn,
  .site-header #menuBtn{
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    flex-basis:36px!important;
    border-radius:12px!important;
  }

  .site-header .lang-current-flag{
    width:22px!important;
    min-width:22px!important;
    height:22px!important;
    min-height:22px!important;
  }

  .site-header .nav-actions{
    gap:5px!important;
  }

  .site-header .nav-actions > .btn-gold{
    min-width:64px!important;
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    padding:0 9px!important;
    font-size:10.5px!important;
  }
}

@media (max-width:360px){
  .site-header .container.nav-wrap,
  .site-header .nav-wrap{
    grid-template-columns:minmax(0, 1fr) 36px max-content 36px!important;
    column-gap:5px!important;
  }

  .site-header #themeToggleMobile,
  .site-header .theme-toggle-mobile{
    display:none!important;
  }

  .site-header .nav-actions{
    grid-column:2 / 4!important;
  }

  .site-header .menu-btn,
  .site-header #menuBtn{
    grid-column:4!important;
  }
}



/* =========================================================
   VELAEA INDEX - Trading Community Presentation Section
   ชุมชนเทรด / Verified Backtest / Public Forum
========================================================= */
.community-index-section{
  padding:48px 0 36px;
}
.community-index-shell{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(200,149,46,.20);
  border-radius:28px;
  padding:34px;
  display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(320px,.82fr);
  gap:24px;
  align-items:start;
  background:
    radial-gradient(circle at 86% 6%,rgba(242,199,106,.18),transparent 34%),
    linear-gradient(135deg,#ffffff,#f7fbff 62%,#fff8e5);
  box-shadow:0 22px 64px rgba(6,26,47,.10);
}
.community-index-shell:before{
  content:"";
  position:absolute;
  right:-120px;
  top:-120px;
  width:340px;
  height:340px;
  border-radius:50%;
  border:1px solid rgba(200,149,46,.28);
  opacity:.72;
}
.community-index-copy,.community-index-panel{position:relative;z-index:1}
.community-index-copy h2{
  margin:0 0 14px;
  max-width:760px;
  color:var(--navy);
  font-size:clamp(30px,3vw,46px);
  line-height:1.17;
  letter-spacing:-.04em;
}
.community-index-copy p{
  margin:0 0 14px;
  color:#42526a;
  font-weight:650;
}
.community-index-lead{
  font-size:17px;
  line-height:1.75;
  color:#25364d!important;
}
.verified-backtest-badge{
  margin:22px 0 20px;
  width:min(100%,560px);
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 16px;
  border-radius:20px;
  border:1px solid rgba(242,199,106,.36);
  background:
    radial-gradient(circle at 0 0,rgba(88,216,120,.18),transparent 34%),
    linear-gradient(135deg,rgba(255,217,120,.22),rgba(255,255,255,.74));
  box-shadow:0 15px 36px rgba(200,149,46,.13);
}
.verified-backtest-mark{
  width:48px;
  height:48px;
  border-radius:18px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#12301f;
  background:linear-gradient(135deg,#58d878,#f7d77a);
  font-weight:950;
  font-size:24px;
  box-shadow:0 14px 28px rgba(88,216,120,.22);
}
.verified-backtest-badge strong{
  display:block;
  color:#061a2f;
  font-size:15px;
  line-height:1.28;
  font-weight:950;
}
.verified-backtest-badge small{
  display:block;
  margin-top:4px;
  color:#657386;
  font-size:12px;
  font-weight:850;
}
.community-index-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}
.community-outside-points{
  width:min(100%,560px);
  margin:16px 0 0;
}
.community-outside-kicker{
  margin:0 0 9px!important;
  color:#9d772b!important;
  font-size:11px;
  line-height:1.2;
  font-weight:950!important;
  letter-spacing:.16em;
}
.community-outside-card{
  padding:10px 16px;
  border-radius:18px;
  border:1px solid rgba(200,149,46,.17);
  background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(242,199,106,.07));
  box-shadow:0 12px 28px rgba(6,26,47,.055);
}
.community-outside-list{
  list-style:none;
  margin:0;
  padding:0;
}
.community-outside-list li{
  position:relative;
  margin:0;
  padding:10px 0;
  color:#25364d;
  font-size:13.5px;
  line-height:1.5;
  font-weight:850;
}
.community-outside-list li + li{
  border-top:1px solid rgba(200,149,46,.12);
}
.community-index-panel{
  display:grid;
  align-content:start;
  justify-items:end;
  gap:0;
}
.community-preview-card{
  width:100%;
  max-width:450px;
  border-radius:24px;
  padding:18px;
  color:#fff;
  border:1px solid rgba(242,199,106,.20);
  background:
    radial-gradient(circle at 84% 8%,rgba(242,199,106,.22),transparent 32%),
    linear-gradient(180deg,#07192d,#04101d);
  box-shadow:0 26px 70px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
.community-preview-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}
.community-preview-head span,.community-preview-head b{
  border:1px solid rgba(242,199,106,.34);
  border-radius:999px;
  padding:6px 10px;
  color:#ffd978;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.04em;
}
.community-preview-head b{
  color:#b9d7ff;
  border-color:rgba(185,215,255,.24);
}
.community-preview-titlebar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
}
.community-preview-titlebar h3{
  margin:0;
  font-size:20px;
  letter-spacing:-.03em;
}
.community-preview-titlebar p{
  margin:6px 0 0;
  color:#9fb0c3;
  font-size:12px;
  font-weight:850;
}
.community-points-badge{
  flex:0 0 auto;
  border-radius:999px;
  padding:8px 12px;
  color:#ffd978;
  background:rgba(255,217,120,.10);
  border:1px solid rgba(255,217,120,.18);
  font-size:12px;
  line-height:1;
  font-weight:950;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.community-metrics-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.community-metrics-grid div{
  min-width:0;
  border-radius:15px;
  padding:10px 11px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}
.community-metrics-grid small{
  display:block;
  color:#9fb0c3;
  font-size:10px;
  font-weight:950;
  letter-spacing:.05em;
}
.community-metrics-grid strong{
  display:block;
  color:#fff;
  font-size:15px;
  line-height:1.22;
  margin-top:3px;
  white-space:normal;
  overflow-wrap:anywhere;
}
.community-metrics-grid div:first-child strong{color:#58d878}
.community-star-showcase{
  margin:10px 0 12px;
  padding:10px;
  border-radius:18px;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,217,120,.12),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
  border:1px solid rgba(255,217,120,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 16px 34px rgba(0,0,0,.16);
}
.community-star-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 1px 8px;
}
.community-star-head span{
  color:#ffd978;
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
}
.community-star-head small{
  color:#8ea3ba;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.community-star-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.community-star-box{
  min-width:0;
  border-radius:14px;
  padding:8px 8px 7px;
  background:rgba(5,18,31,.52);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.community-star-box small{
  display:block;
  color:#a9bad0;
  font-size:8.8px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:.045em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.community-star-box div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  margin-top:5px;
}
.community-star-box span{
  display:block;
  font-size:11.2px;
  line-height:1;
  letter-spacing:.02em;
  white-space:nowrap;
  text-shadow:0 0 14px currentColor;
}
.community-star-box .community-star-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  margin-top:5px;
}
.community-star-box .community-mini-stars{
  --mini-star-color:#ffd978;
  display:inline-flex;
  align-items:center;
  gap:1px;
  font-size:11.2px;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
  color:var(--mini-star-color);
  text-shadow:none;
}
.community-star-box .community-mini-stars i{
  position:relative;
  display:inline-block;
  width:.92em;
  height:1em;
  font-style:normal;
  color:var(--mini-star-color);
  text-shadow:0 0 13px var(--mini-star-color);
}
.community-star-box .community-mini-stars i.empty,
.community-star-box .community-mini-stars i.half{
  color:rgba(255,255,255,.20);
  text-shadow:none;
}
.community-star-box .community-mini-stars i.half::before{
  content:'★';
  position:absolute;
  inset:0 auto 0 0;
  width:50%;
  overflow:hidden;
  color:var(--mini-star-color);
  text-shadow:0 0 13px var(--mini-star-color);
}
.community-star-box.score .community-mini-stars{--mini-star-color:#ffd978}
.community-star-box.strategy .community-mini-stars{--mini-star-color:#6fe7ff}
.community-star-box.drawdown .community-mini-stars{--mini-star-color:#b58cff}
.community-star-box b{
  flex:0 0 auto;
  color:#fff;
  font-size:10.5px;
  font-weight:950;
}
.community-star-box em{
  display:block;
  margin-top:5px;
  color:#8396ad;
  font-size:9.2px;
  line-height:1.2;
  font-style:normal;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.community-star-box.score span{color:#ffd978}
.community-star-box.strategy span{color:#6fe7ff}
.community-star-box.drawdown span{color:#b58cff}
.community-star-box.score{border-color:rgba(255,217,120,.14);background:linear-gradient(180deg,rgba(255,217,120,.07),rgba(5,18,31,.50))}
.community-star-box.strategy{border-color:rgba(111,231,255,.14)}
.community-star-box.drawdown{border-color:rgba(181,140,255,.16)}
.community-portfolio-stage{
  margin:14px 0 10px;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.community-chart-topline{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}
.community-chart-legends{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.community-chart-legend{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  padding:6px 10px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
  color:#dce6f3;
  font-size:11px;
  font-weight:900;
}
.community-chart-legend i{
  width:9px;
  height:9px;
  border-radius:50%;
  display:block;
  box-shadow:0 0 12px currentColor;
}
.community-chart-legend i.balance{background:#5ea2ff;color:#5ea2ff}
.community-chart-legend i.equity{background:#ffd978;color:#ffd978}
.community-chart-topline small{
  color:#8ea3ba;
  font-size:11px;
  font-weight:850;
}
.community-chart-panel{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:8px;
  align-items:stretch;
}
.community-chart-yaxis{
  display:grid;
  align-content:space-between;
  padding:8px 0 12px;
}
.community-chart-yaxis span{
  color:#7d93ac;
  font-size:10px;
  font-weight:850;
}
.community-chart-core{
  position:relative;
  min-height:176px;
  border-radius:20px;
  overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/100% 25%,
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/20% 100%,
    radial-gradient(circle at 85% 18%,rgba(255,217,120,.16),transparent 30%),
    linear-gradient(180deg,rgba(5,18,31,.98),rgba(3,12,24,.92));
  border:1px solid rgba(255,255,255,.07);
}
.community-chart-core:before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:46%;
  background:linear-gradient(180deg,rgba(255,217,120,0),rgba(255,217,120,.06));
  pointer-events:none;
}
.community-chart-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.community-area-path{
  fill:url(#communityAreaFill);
}
.community-line-balance,
.community-line-equity{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:4.5;
}
.community-line-balance{
  stroke:url(#communityLineBlue);
  opacity:.9;
  filter:drop-shadow(0 0 12px rgba(94,162,255,.26));
}
.community-line-equity{
  stroke:url(#communityLineGold);
  filter:drop-shadow(0 0 16px rgba(255,217,120,.28));
}
.community-chart-callout{
  position:absolute;
  min-width:112px;
  border-radius:14px;
  padding:8px 10px;
  background:rgba(4,15,28,.84);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  backdrop-filter:blur(10px);
}
.community-chart-callout span{
  display:block;
  color:#8ea3ba;
  font-size:10px;
  font-weight:950;
  letter-spacing:.06em;
}
.community-chart-callout strong{
  display:block;
  margin-top:4px;
  color:#fff;
  font-size:12.5px;
  line-height:1.2;
}
.community-chart-callout.callout-profit{
  left:12px;
  bottom:12px;
}
.community-chart-callout.callout-dd{
  right:12px;
  top:12px;
}
.community-chart-xaxis{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin-top:7px;
}
.community-chart-xaxis span{
  color:#7d93ac;
  font-size:10px;
  font-weight:850;
  text-align:center;
}
.community-chart-xaxis span:first-child{text-align:left}
.community-chart-xaxis span:last-child{text-align:right}
.community-chart-footer{
  margin-top:7px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.community-chart-meta{
  margin-top:0;
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  gap:6px;
}
.community-verified-stamp{
  display:block;
  flex:0 0 auto;
  width:clamp(86px,31%,126px);
  max-width:42%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.30)) drop-shadow(0 0 10px rgba(255,217,120,.18));
  opacity:.96;
  transform:translateY(-1px);
}
.community-chart-meta span{
  border-radius:999px;
  padding:5px 9px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:#c8d5e4;
  font-size:10.5px;
  font-weight:850;
}
.community-preview-note{
  color:#b9c6d8;
  font-size:11.5px;
  font-weight:850;
}
.community-feature-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
.community-feature-grid article{
  min-height:190px;
  border:1px solid rgba(200,149,46,.18);
  border-radius:20px;
  padding:18px;
  background:#fff;
  box-shadow:0 14px 36px rgba(6,26,47,.06);
}
.community-feature-grid i{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#1d1205;
  background:linear-gradient(135deg,#ffd978,#c8952e);
  font-style:normal;
  font-size:12px;
  font-weight:950;
  margin-bottom:13px;
}
.community-feature-grid h3{
  margin:0 0 8px;
  color:#061a2f;
  font-size:16px;
  line-height:1.25;
  letter-spacing:-.02em;
}
.community-feature-grid p{
  margin:0;
  color:#657386;
  font-size:12.5px;
  font-weight:700;
  line-height:1.65;
}
body.dark-mode .community-index-shell,
html[data-theme="dark"] .community-index-shell{
  background:
    radial-gradient(circle at 86% 6%,rgba(242,199,106,.14),transparent 34%),
    linear-gradient(135deg,#071321,#020814 64%,#0d1723)!important;
  border-color:rgba(242,199,106,.16)!important;
  box-shadow:0 26px 80px rgba(0,0,0,.32)!important;
}
body.dark-mode .community-index-copy h2,
html[data-theme="dark"] .community-index-copy h2{color:#f7fbff!important}
body.dark-mode .community-index-copy p,
body.dark-mode .community-index-lead,
html[data-theme="dark"] .community-index-copy p,
html[data-theme="dark"] .community-index-lead{color:#9fb0c3!important}
body.dark-mode .verified-backtest-badge,
html[data-theme="dark"] .verified-backtest-badge{
  background:
    radial-gradient(circle at 0 0,rgba(88,216,120,.16),transparent 34%),
    linear-gradient(135deg,rgba(242,199,106,.12),rgba(255,255,255,.04));
  border-color:rgba(242,199,106,.22);
}
body.dark-mode .verified-backtest-badge strong,
html[data-theme="dark"] .verified-backtest-badge strong{color:#fff}
body.dark-mode .verified-backtest-badge small,
html[data-theme="dark"] .verified-backtest-badge small{color:#9fb0c3}
body.dark-mode .community-feature-grid article,
html[data-theme="dark"] .community-feature-grid article{
  background:linear-gradient(180deg,#0b1828,#071321)!important;
  border-color:rgba(242,199,106,.13)!important;
  box-shadow:0 18px 45px rgba(0,0,0,.24)!important;
}
body.dark-mode .community-feature-grid h3,
html[data-theme="dark"] .community-feature-grid h3{color:#f7fbff!important}
body.dark-mode .community-feature-grid p,
html[data-theme="dark"] .community-feature-grid p{color:#9fb0c3!important}
body.dark-mode .community-outside-kicker,
html[data-theme="dark"] .community-outside-kicker{color:#f2c76a!important}
body.dark-mode .community-outside-card,
html[data-theme="dark"] .community-outside-card{
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(242,199,106,.075));
  border-color:rgba(242,199,106,.16);
  box-shadow:none;
}
body.dark-mode .community-outside-list li,
html[data-theme="dark"] .community-outside-list li{color:#dce6f3}
body.dark-mode .community-outside-list li + li,
html[data-theme="dark"] .community-outside-list li + li{border-color:rgba(242,199,106,.12)}

body.dark-mode .community-preview-titlebar p,
html[data-theme="dark"] .community-preview-titlebar p{color:#9fb0c3}

@media(max-width:1100px){
  .community-index-shell{grid-template-columns:1fr;padding:28px}
  .community-index-panel{justify-items:stretch}
  .community-preview-card{max-width:none}
  .community-feature-grid{grid-template-columns:repeat(2,1fr)}
  .community-chart-panel{grid-template-columns:38px minmax(0,1fr)}
  .community-chart-core{min-height:190px}
}
@media(max-width:640px){
  .community-index-section{padding:32px 0 24px}
  .community-index-shell{padding:20px;border-radius:22px}
  .community-preview-card{padding:16px;border-radius:22px}
  .community-index-actions .btn{width:100%}
  .community-outside-points{width:100%;margin-top:14px}
  .community-outside-kicker{margin-bottom:8px!important;font-size:10px}
  .community-outside-card{padding:8px 12px;border-radius:16px}
  .community-outside-list li{font-size:12.5px;padding:9px 0;line-height:1.45}
  .community-preview-titlebar{flex-direction:column;align-items:flex-start}
  .community-points-badge{padding:6px 9px;font-size:11px}
  .community-metrics-grid,.community-feature-grid{grid-template-columns:1fr}
  .community-star-showcase{padding:9px;margin:9px 0 11px;border-radius:16px}
  .community-star-head{align-items:flex-start;flex-direction:column;gap:3px}
  .community-star-grid{grid-template-columns:1fr;gap:6px}
  .community-star-box div{justify-content:flex-start;gap:10px}
  .community-star-box small,.community-star-box em{white-space:normal;overflow:visible;text-overflow:clip}
  .community-feature-grid article{min-height:auto}
  .community-portfolio-stage{padding:10px}
  .community-chart-topline{flex-direction:column;align-items:flex-start}
  .community-chart-panel{grid-template-columns:1fr}
  .community-chart-yaxis{display:none}
  .community-chart-core{min-height:158px}
  .community-chart-callout{min-width:auto;padding:7px 9px}
  .community-chart-callout strong{font-size:12px}
  .community-chart-footer{display:grid;grid-template-columns:1fr;gap:8px;justify-items:center}
  .community-chart-meta{display:grid;grid-template-columns:1fr;gap:5px;width:100%}
  .community-chart-meta span{text-align:center;font-size:10px}
  .community-verified-stamp{width:min(138px,58%);max-width:58%;transform:none;margin-top:2px}
  .verified-backtest-badge{align-items:flex-start;border-radius:18px}
  .verified-backtest-mark{width:42px;height:42px;border-radius:15px}
}

/* =========================================================
   INDEX LIGHT MODE PROFESSIONAL POLISH - 2026-07-02
   Scope: index.html only. Fixes policy/developer section contrast,
   premium light surfaces, active nav clarity, and card readability.
========================================================= */
html[data-theme="light"] body.index-page,
body.index-page.light-mode,
body.index-page:not(.dark-mode){
  background:
    radial-gradient(circle at 50% 0%,rgba(242,199,106,.10),transparent 25%),
    linear-gradient(180deg,#f7fbff 0%,#eef5fb 42%,#f7fbff 100%) !important;
  color:#071629;
}

html[data-theme="light"] body.index-page .policy-section,
body.index-page.light-mode .policy-section,
body.index-page:not(.dark-mode) .policy-section{
  padding:36px 0;
}

html[data-theme="light"] body.index-page #developers,
body.index-page.light-mode #developers,
body.index-page:not(.dark-mode) #developers{
  padding-top:28px;
  scroll-margin-top:106px;
}

html[data-theme="light"] body.index-page .nav a,
body.index-page.light-mode .nav a,
body.index-page:not(.dark-mode) .nav a{
  color:#17304c !important;
  font-weight:900;
}

html[data-theme="light"] body.index-page .nav a.active,
html[data-theme="light"] body.index-page .nav a:hover,
body.index-page.light-mode .nav a.active,
body.index-page.light-mode .nav a:hover,
body.index-page:not(.dark-mode) .nav a.active,
body.index-page:not(.dark-mode) .nav a:hover{
  color:#8f620d !important;
  background:linear-gradient(180deg,rgba(242,199,106,.20),rgba(242,199,106,.08)) !important;
  border-radius:14px;
}

html[data-theme="light"] body.index-page .nav a.active::after,
body.index-page.light-mode .nav a.active::after,
body.index-page:not(.dark-mode) .nav a.active::after{
  height:3px;
  background:linear-gradient(90deg,#c8952e,#f2c76a,#b8871f) !important;
  box-shadow:0 8px 18px rgba(200,149,46,.24);
}

html[data-theme="light"] body.index-page .policy-card,
html[data-theme="light"] body.index-page .role-card,
body.index-page.light-mode .policy-card,
body.index-page.light-mode .role-card,
body.index-page:not(.dark-mode) .policy-card,
body.index-page:not(.dark-mode) .role-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(242,199,106,.09),transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
  border:1px solid rgba(200,149,46,.26) !important;
  box-shadow:0 18px 48px rgba(13,35,61,.085) !important;
}

html[data-theme="light"] body.index-page .policy-card:hover,
html[data-theme="light"] body.index-page .role-card:hover,
body.index-page.light-mode .policy-card:hover,
body.index-page.light-mode .role-card:hover,
body.index-page:not(.dark-mode) .policy-card:hover,
body.index-page:not(.dark-mode) .role-card:hover{
  border-color:rgba(200,149,46,.42) !important;
  box-shadow:0 24px 64px rgba(13,35,61,.115) !important;
  transform:translateY(-1px);
}

html[data-theme="light"] body.index-page .policy-card h2,
html[data-theme="light"] body.index-page .role-card h2,
body.index-page.light-mode .policy-card h2,
body.index-page.light-mode .role-card h2,
body.index-page:not(.dark-mode) .policy-card h2,
body.index-page:not(.dark-mode) .role-card h2{
  color:#071629 !important;
  text-shadow:none !important;
}

html[data-theme="light"] body.index-page .policy-card p,
html[data-theme="light"] body.index-page .role-card p,
html[data-theme="light"] body.index-page .policy-bullets li,
body.index-page.light-mode .policy-card p,
body.index-page.light-mode .role-card p,
body.index-page.light-mode .policy-bullets li,
body.index-page:not(.dark-mode) .policy-card p,
body.index-page:not(.dark-mode) .role-card p,
body.index-page:not(.dark-mode) .policy-bullets li{
  color:#263850 !important;
  line-height:1.72;
}

html[data-theme="light"] body.index-page .eyebrow,
body.index-page.light-mode .eyebrow,
body.index-page:not(.dark-mode) .eyebrow{
  color:#a56f12 !important;
  letter-spacing:.14em;
  font-weight:950;
}

html[data-theme="light"] body.index-page .developer-panel,
body.index-page.light-mode .developer-panel,
body.index-page:not(.dark-mode) .developer-panel{
  position:relative;
  overflow:hidden;
  color:#071629 !important;
  background:
    radial-gradient(circle at 88% 12%,rgba(242,199,106,.22),transparent 34%),
    radial-gradient(circle at 0% 100%,rgba(56,132,255,.08),transparent 38%),
    linear-gradient(135deg,#ffffff 0%,#f7fbff 58%,#fff8e8 100%) !important;
  border:1px solid rgba(200,149,46,.34) !important;
  box-shadow:0 26px 72px rgba(13,35,61,.12) !important;
}

html[data-theme="light"] body.index-page .developer-panel::before,
body.index-page.light-mode .developer-panel::before,
body.index-page:not(.dark-mode) .developer-panel::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:7px;
  background:linear-gradient(180deg,#f2c76a,#c8952e,#8f620d);
  opacity:.95;
}

html[data-theme="light"] body.index-page .developer-panel::after,
body.index-page.light-mode .developer-panel::after,
body.index-page:not(.dark-mode) .developer-panel::after{
  content:"VELAEA LAB";
  position:absolute;
  right:28px;
  top:26px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(200,149,46,.26);
  background:rgba(255,255,255,.72);
  color:#9a6c16;
  font-size:11px;
  line-height:1;
  font-weight:950;
  letter-spacing:.14em;
}

html[data-theme="light"] body.index-page .developer-panel > div,
body.index-page.light-mode .developer-panel > div,
body.index-page:not(.dark-mode) .developer-panel > div{
  position:relative;
  z-index:1;
  max-width:920px;
}

html[data-theme="light"] body.index-page .developer-panel h2,
body.index-page.light-mode .developer-panel h2,
body.index-page:not(.dark-mode) .developer-panel h2{
  max-width:760px;
  margin-bottom:14px;
  color:#071629 !important;
  font-size:clamp(26px,3vw,40px);
  line-height:1.18;
  text-shadow:none !important;
}

html[data-theme="light"] body.index-page .developer-panel p,
body.index-page.light-mode .developer-panel p,
body.index-page:not(.dark-mode) .developer-panel p{
  color:#263850 !important;
  font-weight:750;
  line-height:1.82;
  max-width:930px;
  text-shadow:none !important;
}

html[data-theme="light"] body.index-page .developer-panel .eyebrow,
body.index-page.light-mode .developer-panel .eyebrow,
body.index-page:not(.dark-mode) .developer-panel .eyebrow{
  color:#9a6c16 !important;
  margin-bottom:14px;
}

html[data-theme="light"] body.index-page .services-grid div,
html[data-theme="light"] body.index-page .criteria-grid div,
html[data-theme="light"] body.index-page .risk-grid span,
html[data-theme="light"] body.index-page .role-grid span,
html[data-theme="light"] body.index-page .free-list span,
body.index-page.light-mode .services-grid div,
body.index-page.light-mode .criteria-grid div,
body.index-page.light-mode .risk-grid span,
body.index-page.light-mode .role-grid span,
body.index-page.light-mode .free-list span,
body.index-page:not(.dark-mode) .services-grid div,
body.index-page:not(.dark-mode) .criteria-grid div,
body.index-page:not(.dark-mode) .risk-grid span,
body.index-page:not(.dark-mode) .role-grid span,
body.index-page:not(.dark-mode) .free-list span{
  background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
  border-color:rgba(200,149,46,.28) !important;
  color:#17263b !important;
  box-shadow:0 12px 28px rgba(13,35,61,.055);
}

html[data-theme="light"] body.index-page .services-grid b,
body.index-page.light-mode .services-grid b,
body.index-page:not(.dark-mode) .services-grid b{
  color:#071629 !important;
}

html[data-theme="light"] body.index-page .services-grid span,
html[data-theme="light"] body.index-page .small-note,
body.index-page.light-mode .services-grid span,
body.index-page.light-mode .small-note,
body.index-page:not(.dark-mode) .services-grid span,
body.index-page:not(.dark-mode) .small-note{
  color:#516279 !important;
}

@media(max-width:768px){
  html[data-theme="light"] body.index-page .policy-section,
  body.index-page.light-mode .policy-section,
  body.index-page:not(.dark-mode) .policy-section{padding:28px 0}

  html[data-theme="light"] body.index-page .developer-panel::after,
  body.index-page.light-mode .developer-panel::after,
  body.index-page:not(.dark-mode) .developer-panel::after{display:none}

  html[data-theme="light"] body.index-page .developer-panel,
  body.index-page.light-mode .developer-panel,
  body.index-page:not(.dark-mode) .developer-panel{padding:22px 20px 22px 26px}
}